jueves, 30 de mayo de 2013

14. Introducción al Desarrollo Web: CSS. Diseño adaptable, adaptativo o flexible.

Los diseños web realmente adaptativos exigen la implementación de estas tres técnicas.

El punto clave es la adaptación a las necesidades del usuario y las capacidades del dispositivo. Supongamos un usuario de un dispositivo móvil que visita nuestro sitio web con una pantalla pequeña. Tener en cuenta las necesidades del usuario no significa simplemente adaptar el contenido al tamaño de la pantalla, sino considerar también lo que va a querer hacer este usuario en primer lugar cuando visite nuestro sitio web y después mostrarle el contenido en función de ese criterio. Quizás tengamos que presentar la información en un orden distinto. No debemos suponer que el usuario no va a querer acceder a toda la información del sitio web porque utiliza el móvil. Es posible que tengamos que cambiar el tipo de letra o las áreas de interacción para dar una mejor respuesta en un entorno de pantalla táctil. Todos estos factores influyen en el que denominamos "diseño adaptativo". (Referencia: Diseño web adaptativo).

Décima cuarta clase del curso INTRODUCCIÓN AL DESARROLLO WEB, producido por Sergio Luján Mora de la Universidad de Alicante. Siguiendo con el apartado sobre CSS, hoy aprenderemos sobre diseño adaptable, adaptativo o flexible, términos comúnmente utilizados en estos tiempos contemporáneos de la web.


Contenido de la clase
1) Diseño adaptable, adaptativo o flexible.
(07:52 minutos)
2) Creación de un diseño adaptable,
adaptativo o flexible I.
(04:38 minutos)
3) Creación de un diseño adaptable,
adaptativo o flexible II.
(20:11 minutos)
4) Creación de un diseño adaptable,
adaptativo o flexible III.
(03:18 minutos)

Duración de la clase
35:59 minutos.

Añadimos más recursos, ahora con este módulo está adjunto el link a: USABILIDAD EN LA WEB, del sitio desarrolloweb.com.

Si estas viendo los apartados sobre CSS entonces este link es para tí: MANUAL DE CSS, HOJAS DE ESTILO.

Y si ya te metiste con la nueva versión de CSS, entonces te recomiendo el link a: MANUAL DE CSS3.

Para quienes están aprendiendo HTML5, este link les será de gran utilidad: Referencia: GUIA HTML5.

Si todavía usas HTML4, te recomendamos el siguiente link: Referencia: CURSO DE HTML.

A continuación la clase para este día...

1) Diseño adaptable, adaptativo o flexible.

¿Cómo se puede crear un sitio web para que se pueda visualizar de una forma correcta en todos los diferentes dispositivos que existen en la actualidad y en los que puedan aparecer en el futuro?, responsive design.


2) Creación de un diseño adaptable, adaptativo o flexible I.

Diseño adaptable (responsive design), @media, patrones de diseño adaptativo (casi fluido, caída de columna, cambio de la estructura, pequeños cambios, fuera de la pantalla).


3) Creación de un diseño adaptable, adaptativo o flexible II.

Desarrollo de un ejemplo con diseño adaptable (responsive design) completo desde cero, herramientas (Window Resizer, Opera Mobile Emulator).


4) Creación de un diseño adaptable, adaptativo o flexible III.

Referencias y fuentes de información para aprender más cosas sobre diseño adaptable, adaptativo o flexible (responsive design).


Si deseas saber más sobre este curso, haz clic abajo: