Bueno, un poco a marchas forzadas, acabo de enviar el ejercicio correspondiente a la cuarta semana del curso: An Introduction to W3C’s Mobile Web Best Practices.

Se trataba de personalizar el contenido según el dispositivo del usuario, es decir, si una persona se conecta a nuestra web desde un móvil, debemos entregarle contenido ajustado a su dispositivo (por ejemplo debemos reducir el número de imágenes, utilizar una maquetación más sencilla…), pero si se conecta desde un ordenador o navegador “normal”, debe poder aprovechar al máximo las capacidades del mismo (debe poder ver vídeos, flash, utilizar ajax…).

Para este ejercicio debíamos basarnos en el de la semana pasada y debíamos modificar el menú, el tamaño y formato de las imágenes.

En resumen lo que hice fue:

  • Eliminar la imagen decorativa principal de Beethoven.
  • Crear dos css, una para los móviles y otra para el resto de los dispoisitivos.
  • Ajustar el tamaño del contenido principal y pintar el menú de navegación flotando a la derecha para aquellos dispositivos que no sean móviles.

Podéis consultar el resultado en:

A partir de aquí, una pequeña traducción al inglés de lo realizado.


Here’s my assignment for the 4 week.

  • I’ve removed the big image in the main content.
  • Created two css one for mobile the other for screen media.
  • On the screen media I made a floating right navigation menu. In order to display ok the content I adjusted the width of the main content.

You can see the result in:

I’ve tried to insert the big image like background in the screen.css, but I noticed that in small resolutions contrast between text and image is not enough.

Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada.