Blog


The magic of CSS, un sitio perfecto para aprender CSS de forma muy profesional

A principios de año les decía que este 2014 era un año donde ya el tener que aprender CSS no debería ser un problema. Hay miles de tutoriales donde podemos aprender HTML y CSS, tantos sitios que ofrecen clases y cursos en vivo que el poder decir que no encuentra recursos es porque no tiene ganas de aprender.
Hoy les presento un sitio más donde podemos aprender CSS pero de una forma mucho más profunda y teórica. El sitio se llama The magic of CSS, es un proyecto de Gihub el cuál trata el tema de CSS de una forma completamente diferente. En vez de enseñarnos como tal las clases y estilos que estamos acostumbrados a aprender, el sitio trata esos mismos temas desde categorías, de tal forma que lo que aprendemos no es solamente a usar las propiedades, sino la teoría de diseño detrás de ellas.

El sitio trata los temas como si fueran capítulos de un libro. Hasta ahorita hay 6 capítulos y en lo personal la forma en que enseñan a usar CSS es bastante sencilla pero muy comprensible. Por ejemplo, para los colores uno pensaría que no hay demasiado que contar, y sin embargo nos platican un poco sobre la teoría del color, su significado y los colores que corresponden a las reacciones humanas ya establecidas de una forma psicológica, algo que ningún otro sitio te platica cuando aprender a poner colores en formato hexadecimal.
En fin, un buen sitio para aprender si es que quieren empezar con algo sencillo. También para los que buscan un poco de más teoría es un buen recurso para que también conozcamos las bases de las mejores prácticas de uso de estilos con CSS.
Enlace: The magic of CSS




10 códigos rápidos de CSS3 para descargar

Siempre que empecemos con un nuevo proyecto van a surgir ocasiones donde sea necesario implementar controles mucho más llamativos que los que nos ofrece HTML por defecto. Al decir llamativos siempre pienso en hacer el mismo elemento de una forma mucho más compleja o sencilla de usar. Aquí entran ejemplos de formularios más estilizados, controles personalizados como botones o switches, o también efectos a elementos.
Por eso les presento 10 códigos rápidos de CSS3 para descargar, donde podemos encontrar ya estilos listos para usarse en nuestros sitios web. Como les mencionaba arriba, tenemos ya los estilos para formularios, botones, cargadores, y lo que se imaginen. Para poder usarlos solo necesitamos implementar el HTML como nos lo indiquen, aunque en realidad en la mayoría de las veces representa solo cambiarle el nombre o la clase a nuestros elementos.

Formulario multi pasos con barra de progreso
multistep form progress bar css
Cinta en CSS3
css3 ribbon open source code freebie
Cargadores hechos con CSS3
rotating circle loaders in css3
Botones switch
basic switch button css3 open source
Efectos de movimiento con CSS3
css transition keyframe shake code
Botón de navegación de botones sociales
vertical dropdown social icons navigation
Gráficas con pestañas
tabbed chart js css open source code
Efecto de scroll con créditos
css3 animated scrolling movie credits
CSS3 Tags
css3 tag links open source code
Cintas en las esquinas CSS3

css3 corner ribbon effect open source
 Vía spyrestudios




Libro para ayudar a los niños a entender cómo funciona internet.

Vivimos en una época donde los niños además de usar la tecnología deberían entender cómo funciona. Es fácil abrir una cuenta de Facebook, escuchar música en Spotify o leer una revista interactiva para niños, pero son pocos los que conocen lo que ocurre detrás de estas aplicaciones para que todo funcione mágicamente.

Por tal motivo una fundación suiza consciente de esta necesidad lanzó un libro para los niños para ayudarlos a entender cómo funciona internet. Es un libro bastante entendible a nivel técnico para darles un acercamiento a la infraestructura que tienen las empresas para poder dar servicio a millones de usuarios que se conectan. Lo más interesante es que aunque está enfocado en que los más pequeños entiendan sobre estos temas también los adultos que no saben absolutamente nada de tecnología pueden leerlo.

 Descargar




Las tendencias en Diseño Web para 2015


Las tendencias en Diseño Web para 2015
A pesar de que el 2014 nos está enseñando mucho en cuanto a diseño web se refiere, creemos que no hay mejor momento para hablar sobre qué nos deparará el 2015.
Con este post me atrevo a augurar cuáles serán las tendencias en el diseño web para el año que viene.
Cada vez más avanzamos hacia diseños menos complicados y más sofisticados.
Así que si estás pensando en cambiar el diseño de tu web aquí te muestro algunas de las características que más se van a llevar en los próximos meses.
Imágenes grandes
Como dice el refrán, una imagen vale más que mil palabras y es por eso que la tendencia será a sustituir contenido por grandes imágenes. Las imágenes a toda pantalla poseen gran potencia a la hora de comunicar algo y permiten mostrar con todo lujo de detalles lo que en la web se está ofreciendo. Podríamos decir que este 2015 el contenido visual va a ser el rey. 
Aquí te dejo un ejemplo de web que ya están aplicando este tipo de diseño:
Vídeos a toda pantalla
Ya está comenzando a utilizarse este recurso y va a ser uno de los más vistos el año que viene: El de utilizar un vídeo a toda pantalla en la Home de la web. Vídeos no demasiado largos y reproducidos en bucle, que hacen una breve sinopsis sobre el tema del que trata la web.
Aquí te dejo algunas de las webs que están comenzando a utilizar esta técnica:
Responsive design o el adiós a las webs para móviles 
Con la llegada del Responsive Design las versiones web para móviles están comenzando a desaparecer. Para 2015 este tipo de webs deberían conformar una minoría notable y quien no tenga una web adaptable estará fuera.
Menús mobile desde la versión escritorio
Sí has leído bien. Los menús, de entre todos los elementos de la web puede considerarse uno de los más estandar y que menos cambios ha sufrido a lo largo del tiempo. Al ser un elemento fundamental en la estructura de la web, que sitúa y guía al usuario en todo el recorrido por la web, no podía sufrir demasiadas modificaciones ya que, si no, el usuario podía ser despistado y por lo tanto, perder su cometido.
Sin embargo, como el aumento de tráfico a las webs desde dispositivos móviles continúa progresivamente en aumento, la forma como mostramos el menú o nav de las páginas webs va a cambiar. De hecho ya está cambiando en muchas webs.
El usuario ya ha interiorizado que tres rayitas en la parte superior de la pantalla significa que cuando pinchas ahí las diferentes secciones de la web van a aparecer desplegadas. Y aprovechando esta situación y la tendencia a simplificar el diseño, cada vez será más común ver este tipo de menú en las webs.
Aquí te dejo algunas webs en las que puedes ver cómo utilizan ya este recurso:
Iconos
La tendencia a simplificar el diseño, como ya he comentado antes, traerá como consecuencia la utilización de la iconografía para sintetizar la información. 
La ventaja de los iconos no es solo estética sino que además, al poder insertar estos iconos como si se tratase de una tipografía más en tu web, esto te permite escalarlos como tu quieras sin perder resolución. Además de que ayudan a que tu web pese menos y el tiempo de carga sea menor.
Menos Click y más Scroll
Los sitios voluminosos que fragmentan la historia de su marca a lo largo de decenas de páginas ya han hecho historia. Los usuarios ahora esperan ser capaces de desplazarse a través de todo lo que se ofrece en una sola página. A pesar de que los sitios con varias páginas son más amigables para el SEO, los diseños que ofrecen contenido en forma de una única página se están ganando a los usuarios de smartphones y tablets. 
Desorden ordenado
Una de las tendencias más marcadas para este 2015 va a ser el de la apariencia de desorden. Los elementos de la web se muestran de manera aparentemente caótica aunque en el fondo existe un orden y un concepto detrás. Imágenes de diferentes tamaños, que se disponen por toda la ventana del navegador de forma aleatoria. Textos que pisan las imágenes y que se desbordan de las mismas. Una tendencia aparentemente caótica pero que, sin embargo, dota de personalidad y de originalidad a tu web.
Algunos ejemplos:



Pagina Web: Patricia Ramos

Pagina Web: Patricia Ramos

Inicio
Trabajos
Contactos



Trabajos – Logo: Jhosy Jimenez

Logotipo: Jhosy Jimenez
Realizado: Ilustrator