RESPONSIVE WEB DESIGN

1. RESPONSIVE WEB DESIGN • Participantes • Gabriel Cuchca Palomino U720546 • Jorge Luis Alcantara Ospina U201121532 • Juan BotetanoOlortegui U201200192 • Tapia Suaña Juan Pablo U201201060 • Ricardo Campos U800052

2. Responsive Web Design • Sitios Web adaptables al ancho del dispositivo, es decir único diseño para Desktop, Mobile y Tablet. • Tecnología, que NO solamente cambia el diseñosino le ajusta del tamaño de las imágenes.

3. Antecedentes • Ethan Marcotte utilizo el termino Responsive Web Design en su artículo publicado en «A ListApart». En el describe la teoría y la práctica de diseño de páginas web sensibles. (25 Mayo 2010) Fuente: http://www.alistapart.com/articles/responsive-web-design/ • Tres elementos claves. • A flexible/fluid grid(http://www.alistapart.com/articles/fluidgrids/) • Responsiveimages (http://www.alistapart.com/articles/fluid-images/) • Media queries(http://www.w3.org/TR/css3-mediaqueries/) • NET Magazine, #2 Top Web Design Trends for 2012 (Tendencias de Diseño Web para 2012).

4. EL ENFOQUE TRADICIONAL Dos sitios web. Tu sitio web para desktop más uno construido específicamente para móviles. El browser del cliente redirigirá automáticamente al mejor sitio para su dispositivo.

5. DISEÑO DE RESPUESTA Un SOLO sitio web. El sitio web, en forma automática se formatea al presentarse al usuario a cualquier ancho de la pantalla del dispositivo.

6. Entonces, ¿cómo puedo saber si debo construir un sitio web por separado o para móviles utilizar el diseño de respuesta? ?

7. ¿QUE SOLUCION ES MEJOR PARA TU MOBILE SITE ? ¿Cuáles son las necesidades de tu negocio? Sitio Independiente Responsive Design El diseño para las necesidades de los usuarios móviles (por ejemplo, el comercio electrónico, direcciones, llamadas telefónicas, las descargas de aplicaciones) La facilidad de actualización del sitio Optimizado para los motores de búsqueda. La creación de sitios rápidos. Desarrollo web accesible. Añadir la conversión de códigos y redirigir. Grandes Opciones de «hazlo tú mismo» DIY (en inglés «Do It Yourself») Fuente: http://analytics.blogspot.jp/2012/07/mobile-websites-vs-responsive-design.html

8. Beneficios de Responsive Web Design • Reducción de costos. Se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información. • Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error. • Mejora la usabilidad y conversión. Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión. • Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

9. RESS: Responsive Web Design with Server Side Components • Combinar RWD con la optimización de componentes en el lado del servidorestoesunamanera de extender el lado del cliente a una sola solución. • Ajustes de diseño a través de dispositivos. • Optimización a nivel de componentes para aumentar la experiencia de la ejecución o ajuste de usuario. • Confiar en el lado del servidor para la detección de dispositivo con valores predeterminados razonables. Fuente http://www.lukew.com/ff/entry.asp?1509

10. TÉCNICAS DEL RESPONSIVE DESIGNMostly Fluid – más o menos fluido Se adapta siguiendo el flujo respectivo

11. ColumnDrop – caída de columnaEste tipo de diseño se adapta hasta el punto en el que no se pueden manejar las tres columnas en una sola fila.

12. LayoutShifter – Movimiento de EstructuraCambia ligeramente el diseño, la estructura está orientanda a dar una experiencia diferente en dispositivos de pantallas más reducidas para invitar al usuario a la navegación.

13. TynyTweaks – Pequeños CambiosAdapta los contenidos a la pantalla, sin casi hacerle cambios.

14. OffCanvas – Fuera del CanvasConsiste en sólo tener un bloque de información general que no distraiga mucho y guardan las demás opciones o menús en botones que suelen tener íconos para distinguirlos.

15. Nuevo en HTML5 Nuevas etiquetas semánticas (Google debe entender los contenidos) Video, audio y animación sin plugins (Acceso universal: cualquier dispositivo, cualquier navegador, cualquier versión) Nuevos elementos de formularios(Más usabilidad y menor uso de JavaScript)

16. Nuevo en CSS3 Usar cualquier tipografía Efectos decorativos: sombras, RGBa, bordes redondeados, gradientes, (menor uso de imágenes) Movimientos: transformaciones, transiciones, animaciones(menor uso de JavaScript) Diseño adaptable: Media Queries Selectoresmás precisos (menor uso de marcado innecesario)

17. Comparación • Antes: • <div id=“wrapper”></div> • <div id=“noticia”></div> • <div id=“banners”></div> • <div id=“header”></div> • <div id=“footer”></div> • <div id=“nav”></div> • <div id=“foto”><img src=“x” /><p>Esta foto habla de...</p></div> • Ahora: • <section></section> • <article></article> • <aside></aside> • <header></header> • <footer></footer> • <nav></nav> • <figure><img src=“x” /><figcaption><p>Esta foto habla de...</p></figcaption></figure>

18. Estructuras nuevas • Article:contenido fundamental, independiente • Aside:contenido accesorio, no fundamental • Nav:barra de navegación • Section:una sección o bloque (ex DIV) • Header:introducción / orientación sobre sección • Footer:final de una sección • Hgroup:grupo de encabezados • Figure:contenido relacionado (imagen, video, audio, canvas, gráficos, tablas estadísticas, etc.) • Figcaption:leyenda de un elemento Figure

19. DEMO http://www.thismanslife.co.uk/projects/lab/responsiveillustration/