Introduccin al

RESPONSIVE
WEB DESIGN
#HTML5 + CSS3 #Diseo fluido #diseo receptivo #Concepto #Ventajas

Introduccin a

HTML5 + CSS3
El cambio en las tecnologas del que hablamos tambin se ve reflejado en la evolucin de los navegadores y la necesidad de actualizar el lenguaje HTML a los tiempos modernos, con el fin de superar las capacidades hoy limitadas, del HTML 4 y Adobe FLASH. Tanto CSS 3 como HTML 5, establecen los nuevos estandares para el desarrollo de aplicaciones web: Audio, video, Acceso a las webcams, animaciones, etc. Todas estas ventajas independientemente de que navegados se este usando y sin plugins de por medio. En cuanto al diseo, el HTML5 incorpora Etiquetas semnticas, que amplan notablemente el significado y la funcionalidad de una web.

Responsive web design

Concepto
Olvidemos la necesidad de disear una web para resoluciones de pantalla especficas, dejemos de lado las medidas en pixels y hagmonos amigos de los porcentajes. Este es el momento donde ya no son los desarrolladores quienes deben adaptar un sitio web a las diversas pantallas y dispositivos sino las mismas webs quienes lo hagan automticamente. Traduciendo Literalmente al espaol, Responsive design sera diseo sensible. A pesar de que las traducciones son variadas y en ocasiones tambin se lo denomina adaptativo o adaptable, lo cierto es que el concepto es una respuesta a la necesidad de mejorar la usabilidad de quienes navegan la web. En los ltimos aos los sitios web pasaron de poseer un cierto tipo estandarizado de resolucin a lo que hoy es una diversidad de dispositivos PC, Notebooks, Tablets y Smartphones con diferentes resoluciones de pantalla. Antes tenamos un diseo web para lo que se conoce como PCs de escritorio, y se tena que disear a su vez otra web para dispositivos mviles . Ahora el paradigma cambi totalmente, y una web debe ser receptiva y ser adaptable al dispositivo en el cual estamos navegando.

<header> <nav>
<section> <article> <aside>

<footer>

Diseo fluido y diseo receptivo

El diseo fluido no debe ser confundido con el diseo receptivo. Ambas tcnicas son complementarias, y un usuario puede detectar rpidamente si un sitio web ha sido desarrollado de esta manera. La principal evidencia para detectarlo fcilmente, es que no crea un scroll horizontal debido a que la estructura del diseo web se va adaptando al tamao del dispositivo y la resolucin en la que se la est visualizando. Esta adaptacin es posible por el cambio de los valores de medida relativos y el uso de media queries.

Para el diseo receptivo se tiene en cuenta que para determinado dispositivo, es probable que se pueda omitir el uso y la visualizacin de algn elemento. Por ejemplo, es muy comn que se transforme un men de navegacin en un men desplegable. O bien, tengamos la decisin que determinado elemento de la web no se visualice para Smartphone.

Diseo fluido:

No trabaja con pixel perfect. Para una determinada resolucin de pantalla. Uso de valores de medida relativos (em, %) Determinar mnimos y mximos previamente

Diseo receptivo:

Utilizacin de diseo fluido Estructura de elementos flexibles Uso de media queries. (Detecta la resolucin de salida)

Ventajas

Links Google recomienda a los webmasters el uso del Responsive web design: http://googlewebmastercentral.blogspot.com.ar/2012/06/recommendations-for-building-smartphone.html https://developers.google.com/webmasters/smartphone-sites/ http://es.scribd.com/doc/104313542/Multiscreenworld-Final

Encuentre ms ejemplos en http://mediaqueri.es/

Qu es lo que sigue?
Si bien las aplicaciones del diseo responsable estn avanzadas y su aplicacin masificada, siempre es bueno tener una mirada hacia el futuro. Qu otros usos es posible que nos brinde esta tcnica. Cul ser el techo, si es que lo tiene. Para muestra basta con un botn dicen, por lo que para terminar, presentamos Responsive Typography.

Utilizando deteccin de rostro mediante una cmara en tiempo real, el texto del dispositivo mantendr siempre la proporcin en relacin a la distancia en la que estemos leyendo. Si nos acercamos, el tamao de la letra disminuye y por el contrario al alejarnos, aumenta.
Fuente: http://webdesign.maratz.com/lab/responsivetypography/realtime/ Librera: https://github.com/auduno/headtrackr/ Autor: Marko Dugonji http://maratz.com/ Ms informacin: http://informationarchitects.net/blog/responsive-typography-the-basics/

Fuente: www.g2khosting.com/blog