Introducción al concepto de responsive web, css3 y html5,

1. Introducción al
RESPONSIVE
WEB DESIGN
#HTML5 + CSS3
#Diseño fluido #diseño receptivo
#Concepto #Ventajas

2. HTML5 + CSS3
Introducción a El cambio en las tecnologías del que hablamos también se ve reflejado en la evolución
de los navegadores y la necesidad de actualizar el lenguaje HTML a los tiempos moder-
nos, 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 apli-
Responsive
caciones web: Audio, video, Acceso a las webcams, animaciones, etc. Todas estas ven-
tajas independientemente de que navegados se este usando y sin plugins de por medio.
En cuanto al diseño, el HTML5 incorpora Etiquetas semánticas, que amplían notable-
mente el significado y la funcionalidad de una web.
web design <header>
<nav>
Concepto <section>
<aside>
Olvidemos la necesidad de diseñar una web para resoluciones de pantalla específicas, <article>
dejemos de lado las medidas en pixels y hagámonos 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 automáti-
camente.
<footer>
Traduciendo Literalmente al español, “Responsive design” sería diseño sensible. A pesar
de que las traducciones son variadas y en ocasiones también se lo denomina adaptati-
vo 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 años los sitios web pasaron de poseer un cierto tipo estandarizado
de resolución a lo que hoy es una diversidad de dispositivos PC, Notebooks, Tablets y Diseño fluido y diseño receptivo
Smartphones con diferentes resoluciones de pantalla. Antes teníamos un diseño web
para lo que se conoce como PCs de escritorio, y se tenía que diseñar a su vez otra web El diseño fluido no debe ser confundido con el diseño receptivo. Ambas técnicas son
para dispositivos móviles . complementarias, y un usuario puede detectar rápidamente si un sitio web ha sido desa-
rrollado de esta manera.
Ahora el paradigma cambió totalmente, y una web debe ser receptiva y ser adaptable al La principal evidencia para detectarlo fácilmente, es que no crea un scroll horizontal
dispositivo en el cual estamos navegando. debido a que la estructura del diseño web se va adaptando al tamaño del dispositivo y
la resolución en la que se la está visualizando. Esta adaptación es posible por el cambio
de los valores de medida relativos y el uso de media queries.

3. Para el diseño receptivo se tiene en cuenta que para determinado dispositivo, es probable Diseño fluido:
que se pueda omitir el uso y la visualización de algún elemento. Por ejemplo, es muy co- • No trabaja con pixel perfect. Para una determinada resolución de pantalla.
mún que se transforme un menú de navegación en un menú desplegable. O bien, tenga- • Uso de valores de medida relativos (em, %)
mos la decisión que determinado elemento de la web no se visualice para Smartphone. • Determinar mínimos y máximos previamente
Diseño receptivo:
• Utilización de diseño fluido
• Estructura de elementos flexibles
• Uso de media queries. (Detecta la resolución de salida)
Ventajas
Links
Google recomienda a los webmasters el uso del “Responsive web design”:
http://googlewebmastercentral.blogspot.com.ar/2012/06/recommendations-for-buil-
ding-smartphone.html
https://developers.google.com/webmasters/smartphone-sites/
http://es.scribd.com/doc/104313542/Multiscreenworld-Final
Encuentre más ejemplos en http://mediaqueri.es/

4. ¿Qué es lo que sigue?
Si bien las aplicaciones del diseño responsable están avanzadas y su aplicación masifi-
cada, siempre es bueno tener una mirada hacia el futuro. Qué otros usos es posible que
nos brinde esta técnica. Cuál será el techo, si es que lo tiene. Para muestra basta con
un botón dicen, por lo que para terminar, presentamos “Responsive Typography”.
Utilizando detección de rostro mediante una cámara en tiempo real, el texto del disposi-
tivo mantendrá siempre la proporción en relación a la distancia en la que estemos le-
yendo. Si nos acercamos, el tamaño de la letra disminuye y por el contrario al alejarnos,
aumenta.
Fuente: http://webdesign.maratz.com/lab/responsivetypography/realtime/
Librería: https://github.com/auduno/headtrackr/
Autor: Marko Dugonjić http://maratz.com/
Más información: http://informationarchitects.net/blog/responsive-typography-the-basics/
Fuente: www.g2khosting.com/blog