Archivo de la categoría ‘Diseño Web’

Videotutorial: Diseños flexibles con CSS3 media queries

martes, 19 de octubre, 2010

Con la llegada de los tablets y el aumento de uso de los smartphones con distintas resoluciones y tamaños de pantalla, nos surge el problema de crear versiones móviles diferentes para cada dispositivo.

CSS3 nos trae una nueva herramienta para atacar este problema: los media queries. El funcionamiento de los media queries consiste en disponer de un único documento html para todas las versiones, y seleccionar una u otra hoja de estilo CSS dependiendo de algunos parámetros del dispositivo, principalmente la resolución de la pantalla. De esta manera eliminamos la necesidad de redireccionar a una versión móvil diferente de nuestro sitio, sino que cada dispositivo leerá un bloque de reglas CSS según su anchura.

En este videotutorial voy a enseñaros cómo utilizar los media queries mediante un sencillo ejemplo de diseño de tres columnas de contenido y un menú. Veremos cómo las columnas se reordenan según disminuimos el tamaño del navegador, y por lo tanto cómo se mostraría en dispositivos de ese tamaño.

Ver Demo CSS3 media queries
Leer el resto de la entrada »

Videotutorial: Mejora progresiva con CSS3

martes, 12 de enero, 2010

En este videotutorial voy a enseñaros algunas propiedades de CSS3 que nos servirán para mejorar visualmente nuestros diseños sin necesidad de usar imágenes o javascript, concretamente el manejo de sombras, gradientes y transformaciones sólo con CSS. Puesto que CSS3 aún no es un estándar, tendremos que usar las extensiones propietarias que implementan los navegadores más modernos, como las últimas versiones de Safari, Chrome y Firefox. Estas propiedades generalmente contiene el prefijo -moz para Firefox y -webkit para Safari y Chrome (webkit es que el motor utilizado en estos navegadores).

Ver Demo CSS3
Leer el resto de la entrada »

Fuentes en la web con @font-face

lunes, 21 de diciembre, 2009

Una de las grandes limitaciones que siempre hemos tenido diseñando en la web ha sido la incapacidad de poder usar fuentes mas allá de las que el usuario tiene instaladas por defecto en su sistema. Por ello las opciones que teníamos era utilizar imágenes (sólo recomendable para encabezados y menús) y las clásicas fuentes Arial, Verdana, Georgia, …etc., las llamadas fuentes «web-safe» que sabemos se encuentran en la mayoría de los sistemas. Recientemente han salido herramientas como Cufón y Typekit, que nos permiten mostrar fuentes usando javascript, pero estos sistemas no son la solución más óptima.

Hoy día gracias al avance de los navegadores podemos usar cualquier fuente utilizando la propiedad CSS @font-face, siempre que tengamos en cuenta y respetemos la licencia de cada una, que debe permitir empotrado mediante @font-face. Podemos ver un listado de fuentes y licencias que permiten este uso en el wiki de webfonts.info.
A continuación os explicaré cómo utilizar @font-face para poder usar fuentes de verdad en la web.
Leer el resto de la entrada »

Menú vertical en acordeón con CSS y jquery

miércoles, 7 de octubre, 2009

menu_acordeonA pesar del buen feedback recibido sobre mi serie de tutoriales de CodeIgniter, los artículos sobre menús animados con CSS y javascript siguen siendo los más populares en este sitio, y parece que son bastante útiles para la gente que está empezando. Por ello hoy me tomo un pequeño respiro de los videotutoriales y voy a enseñaros cómo hacer el clásico menú vertical en acordeón con CSS y jQuery.
El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado desplegable con CSS y jquery

jueves, 9 de julio, 2009

menu_desplegableTras el inesperado éxito de mi artículo Menú animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creación de menús: cómo hacer un menú horizontal animado desplegable con CSS y jquery. Cada elemento del menú horizontal contendrá un submenú vertical que se desplegará con una animación. A su vez, al pasar el ratón sobre cada entrada del submenú éste cambiará de color de forma gradual. El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado con CSS y jquery

domingo, 17 de mayo, 2009

La diferencia entre un buen diseño y un diseño genial puede estar en pequeños detalles que proporcionen mayor riqueza visual, como los menús animados realizados habitualmente en Adobe Flash. Como no soy amigo del Flash (*insertar aquí delirio sobre porqué los desarrolladores serios odiamos flash*), voy a mostraros cómo hacer un menú similar al que tenemos en la cabecera de esta web usando CSS Sprites y javascript (jQuery).

Preparando las imágenes

En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:

homeboton

La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.
Leer el resto de la entrada »

Rediseño

miércoles, 22 de abril, 2009

La gente me comentaba «muy chula tu página… pero ¿porqué pone 2007 en el pie?». Esta web necesitaba un rediseño urgente. Cualquiera que me conozca un poco (y mis recientes experimentos para recortarle horas al sueño lo atestiguan), sabe que si no lo he hecho antes no ha sido por falta de ganas, sino de tiempo. Así que sin planearlo, un día cualquiera en un arranque de creatividad le metí mano al photoshop hasta que salió una cabecera decente. La idea ya llevaba tiempo rondándome la cabeza. El resto vino solo.

Tras el diseño de la portada, tenía que decidirme sobre qué sistema iba a implementar el sitio. Las páginas iban a ser estáticas en su mayoría, pero me apetecía tener un blog (ya sabéis, hoy en día si no tienes blog la gente te mira raro por la calle). La cosa estaba entre wordpress o hacerme algo a medida con Codeigniter. Al final me decidí por wordpress. Podría decir que lo hice por la facilidad de instalación e uso, versatilidad, los plugins, etc. Mentira. Lo hice por la pijada de turno: la aplicación libre para iPod/iPhone. Quizá no lo use mucho, pero para cualquier geek eso de sacarse el iPod del bolsillo y decir «voy a escribir una entrada en mi blog» es la leche. Ya os contaré que tal va.

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos