Todos estos meses he pasado por distintos problemas personales por la cual este blog ha caído en una acción de desactualización por falta de tiempo. Pero nada estaré con ustedes poco a poco. Disculpen los inconvenientes causados, pero les dejo este tutorial para los que quieran aprender HTML Y CSS principalmente CSS3.
El grupo de Mozilla nunca se duerme utilizando continuamente el conocimiento compartido del cual constantemente escribo, si realmente te interesa aprender un poco sobre HTML, crear tu propia página web esta es tu oportunidad.
Pues resulta que hay algunos entornos que no son muy amigables para aprender HTML y CSS verdad? Pues recientemente Mozilla ha lanzado un editor en línea llamado Thimble, su capacidad de reproducir automáticamente el código al momento que es ingresado es interesante entrega a quienes están dando sus primeros pasos en el lenguaje de hipertexto una referencia visual muy importante para realizar ajustes y detectar errores en sus creaciones. Te animo a que lo pruebes verdaderamente es súper excelente.
Te recomiendo que si no sabes lo que es un “body” o “div”, deberías concentrarte en leer una introducción básica a HTML.
Fuente: thimbletest
Esto es algo que vi hace unas horas y que quiero compartir con todos los desarrolladores Web que les gusta hacer algo diferente, y es que encontré una sorprendente, librería llamada Scroll-Effects para aplicar efectos visuales muy lindos a listas de elementos que tienen barra de desplazamiento, utilizando CSS3 y un poquito de Javascript.
Su autor es Hakim El Hattab, aunque también tiene como colaborador a Paul Irish y Felix Gnass. Han publicado en una página de demostración donde pueden verse en directo los 11 efectos que hay implementados hasta ahora.
Demostración de algunos efectos creados con Scroll-Effects.
La idea es, dada una lista de elementos que tiene una barra de desplazamiento (o scroll), conseguir que el usuario pueda moverse por ella y los elementos aparezcan/desaparezcan con efectos visuales. Los hay de todo tipo: CURL (CSS 3D), WAVE, FLIP (CSS 3D), FLY (CSS 3D)
El proyecto consta de tres Factores:
Algo bueno es que el CSS está muy bien organizado. hay que especificar el comportamiento de los elementos de la lista en sus tres estados: normal, past y future.te dejo la fuente de donde se puede conocer más sobre este Scroll-Effects
Fuentes:
Euclides Download PageView the Demo
Origin Download PageView the Demo
Hatch Download PageView the Demo
Gridly Download PageView the Demo
Balloons Download PageView the Demo
Photum Download PageView the Demo
Ascetica Download PageView the Demo
Sundance Download PageView the Demo
Stumblr Download PageView the Demo
Responsive Download PageView the Demo
Proyecto Download PageView the Demo
Pronto Download PageView the Demo
Mercato Foot Download PageView the Demo
Widely Download PageView the Demo
Nova Download PageView the Demo
Reverie Download PageView the Demo
Here are our favorite webdev resources from the past week:
BBG es una aplicación muy sencilla que genera nuevos tipos de botones ajustados al estilo de Bootstrap sin tirar ni una sola line de código. Con tan solo o unos cuantos color pickers puedes elegir los colores que se usarán en los degradados de los botones y crear así botones personalizados.
Para no volver a escribir los estilos de botones incluidos en Bootstrap, BBG puedes asignar nuevas clases css a los botones que vayas creando, espero de verdad que lo apliquen en sus proyectos Web si es necesario muy interesante:
Fuente: koalite
Mozilla siempre lanzando sorpresas y de verdad esto es algo sumamente interesante pues le presento Hackasaurus, una herramientaque facilita el aprendizaje sobre las tecnologías que hacen posible la web como HTML5 CSS, con el objetivo de formar una nueva generación de jóvenes con grandes habilidades, actitudes y valores éticos que les permitan desenvolverse mejor en el mundo del desarrollo WEB .
Con Hackasaurus puedes modificar, crear y compartir páginas web de manera instantánea. Gracias a esto hasta un niño podrán alterar sobre la marcha sus páginas favoritas, para luego compartir los diseños y creaciones con sus amigos.
La característica de esta herramienta son unos “Lentes de Rayos-X” que se instalan en el navegador en forma de bookmarklet y que al ser activados nos dejan ver la estructura completa de la página web que deseemos, permitiendo seleccionar y modificar cada uno de los distintos elementos presentes en ella de forma casi “mágica”.
Luego de haber instalado Hackasaurus en el navegador, el funcionamiento de la herramienta es básicamente el siguiente:
Para ver un ejemplo más claro sobre como funciona, Mozilla a dejado esta página para probar Hackasaurus.
La herramienta fue presentada el año pasado en fase beta durante el Festival anual de Mozilla y en su desarrollo participaron más de 700 personas entre educadores, desarrolladores web y el propio team de Mozilla.
Desde Mozilla se están promocionando eventos en varias partes del mundo para promover la enseñanza de tecnologías web y el uso de esta fuerte herramienta, además ponen a disposición de los educadores un completo kit con contenido que facilitará el proceso pedagógico.
Cabe destacar que por tratarse de una herramienta de código abierto, los desarrolladores están invitados a unirse a la iniciativa y generar aportes, así como los interesados en ayudar con la traducción de la herramienta también serán bienvenidos asi que se agradeceria los aportes a la comunidad Mozilla.
Number of Icons/Characters: 89
Price: Free
License: Open Font License →
Download Page: Modern Pictograms →
Number of Icons/Characters: 77
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Web Symbols Typeface →
Number of Icons/Characters: 60
Price: Free
License: SIL Open Font License (OFL) →
Download Page: A Free Icon Web Font →
Number of Icons/Characters: 171
Price: Free
License: Creative Commons Share Alike 3.0 →
Download Page: Iconic Icon Set →
Number of Icons/Characters: 116
Price: Free
License: The MIT License (MIT) →
Download Page: Raphaël Icon-Set →
Number of Icons/Characters: 92
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Modern Pictograms →
Number of Icons/Characters: 21
Price: Free
License: Creative Commons – Attribution →
Download Page: Symbol Signs →
Number of Icons/Characters: 94
Price: $49
License: Pictos License →
Download Page: Pictos →
Number of Icons/Characters: 52
Price: €19
Download Page: Fico →
Number of Icons/Characters: 78
Price: Free
License: SIL Open Font License (OFL) →
Download Page: Web Symbols →
Number of Icons/Characters: 400+
Price: $8
License: You may use these icons/font for both commercial and non-commercial projects and customize them any way you like. You may NOT redistribute these icons.
Download Page: iconSweets 2 →
Number of Icons/Characters: 90
Price: $18
License: Tipogram License @fontface font” width”640″>
Download Page: Tipogram @fontface font” width”640″>
Number of Icons/Characters: 190
Price: $29 for both styles
License: Fonthead Standard EULA →
Download Page: InfoBits Icons & Dingbats →
Number of Icons/Characters: 65
Price: Free
License: Creative Commons Attribution-Share Alike →
Download Page: ikoo →
Number of Icons/Characters: 74
Price: Free
Download Page: Social Media Icons Pack →
Number of Icons/Characters: 30
Price: $17
Download Page: GUI Design Icons →
Number of Icons/Characters: 93
Price: Free
License: Free for personal use.
Download Page: Dot Com Font →
Number of Icons/Characters: 300+
Price: $49 for all styles
License: Fonthead Standard EULA →
Download Page: ClickBits Web Icon & Dingbat System →
Number of Icons/Characters: 56
Price: Free
Download Page: Social Networking Icons Font →
Number of Icons/Characters: 18
Price: Free
License: Free Art License →
Download Page: Writesocial @fontface font” width”640″>
Number of Icons/Characters: 30
Price: Free
Download Page: JustVector Social Icons Font →
Number of Icons/Characters: 65
Price: Free
Download Page: Flexi Social Icons →
Podemos definir que CSS, llamado técnicamente hojas de estilo, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. Este nos ayuda o nos permite definir los aspectos visuales de un sitio web tales como, color de fondo, color de los enlaces, tamaño del sitio.
CSS nos permite modificar todos los aspectos visuales de la página utilizando un solo archivo, es cual es llamado a la página desde la cabecera, por ejemplo, con solo modificar este archivo podemos cambiarle el color de fondo a toda la página. Pero resulta algo extraño pero esta es una de las partes que el programador odia por eso no todos saben definir estructuras del CSS, pero si saben definir los parámetros visuales del sitio en HTML.
Para ayudarte en la elaboración de hojas de estilo te tengo una herramienta llamada BearCSS, es una aplicación vía web gratuita que te genera hojas de estilo a partir de archivos en HTML. Para usar la aplicación no necesitamos registro, solo basta con subir el archivo HTML, automáticamente la aplicación genera la plantilla y después solo es descargar. Si eres programador o diseñador web, esta es una de las aplicaciones que no puede faltar en tu libreta de marcadores, así que te la recomiendo ya comencé a usarla y veo que es algo sumamente excelentes para tus proyectos.
Fuente | Bearcss
HAML, es un lenguaje de marcado ligero con el cual podemos generar HTML y XHTML a partir de un sencillo DSL. Haml busca limpiar las plantillas y deshacerse de los lenguajes “feos” que venimos utilizando en nuestras plantillas HTML. Haml evita la necesidad de codificar explícitamente XHTML en la plantilla, ya que es en sí mismo una descripción de los XHTML, con algo de código para generar contenido dinámico.
HAML
#profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio
Sass:Es un tipo CSS Syntactically Awesome Stylesheets. que trabaja para HAML, como si se tratara de HTML Y CSS pero en este caso es HAML Y Sass
blooglery.wordpress.com 