Mario González

Blog sobre desarrollo web

Icono hamburguesa

Icono animado para el menú de móvil

Cuando accedéis a una web desde un móvil, lo más seguro es que el menú de navegación esté oculto para dejar más espacio disponible al contenido principal, y que haya un icono de tres líneas horizontales para desplegar el menú. A ese icono se le llama hamburguesa. En este tutorial vamos a ver cómo hacer que el icono de la hamburguesa se convierta en una cruz cuando se despliegue el menú, y que vuelva a su apariencia hamburguesil tras cerrarlo.

Icono hamburguesa

(más…)

Adaptive Images

Adaptive Images – Imágenes para responsive web design

| ,

En la actualidad aún no hay una solución ideal y sin problemas asociados para utlizar imágenes en responsive web design. Sin embargo, hay muchas propuestas, cada una con sus ventajas e inconvenientes, que nos permiten incluir imágenes flexibles en nuestros diseños. Podemos ver un listado de todas las técnicas que están recopilando Chris Coyier y Christopher Schmitt en esta hoja de cálculo de Google.

En este artículo vamos a hablar de una de estas soluciones: Adaptive Images. Veremos en qué se basa su funcionamiento, qué tenemos que hacer para implementarla y qué ventajas y desventajas tiene.

(más…)

Responsive Web Design

Responsive web design

|

Encontrada en múltiples traducciones al castellano (diseño web adaptativo, diseño web adaptable, diseño web responsivo, diseño web sensible, diseño web sensitivo, diseño web responsivo…), Responsive web design es sin duda una de las metodologías que más está acaparando la atención de los desarrolladores web en los últimos años. Concebido mediante la unión de tres principios que ya existían anteriormente (plantillas flexibles, imágenes flexibles y media queries), este enfoque nació para dar respuesta a uno de los mayores problemas que se avecinaba en el futuro de las webs: la inmensa cantidad de dispositivos con diferentes resoluciones desde los que se podía y podrá navegar por internet.

Este artículo explica en qué consiste el responsive web design, cuáles son sus ventajas, qué herramientas nos ayudan a implementarlo y algunos ejemplos en la red.

(más…)