Curso de Responsive Web Design de BEEVA
5 recomendaciones1,464 vistas
Este documento ofrece una introducción al diseño web responsive. Explica conceptos clave como arquitectura, ventajas e inconvenientes, ejemplos reales, puntos de ruptura y herramientas. También incluye secciones prácticas sobre cómo implementar diseño responsive utilizando CSS, Bootstrap y optimizando imágenes.
![[+34] 902 20 25 52
hablemos@beeva.com
www.beeva.com
Clara del Rey 26 - 4ª planta. [28002] Madrid!
RESPONSIVE WEB DESIGN
hector.mateos@beeva.com](https://image.slidesharecdn.com/cursoresponsivebeeva-140627040444-phpapp01/85/Curso-de-Responsive-Web-Design-de-BEEVA-1-320.jpg)
Curso de Responsive Web Design de BEEVA
- 1. [+34] 902 20 25 52 hablemos@beeva.com www.beeva.com Clara del Rey 26 - 4ª planta. [28002] Madrid! RESPONSIVE WEB DESIGN hector.mateos@beeva.com
- 2. 2! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 3. Curso Responsive Web Design | BEEVA! 3! INTRO Apps na'vas Apps na'vas basadas en framework común Web específica para móviles Web sensible a disposi'vos Web convencional COSTE RENDIMIENTO Aplicaciones vs.dispositivos
- 4. Curso Responsive Web Design | BEEVA! 4! INTRO Comparativa de enfoques
- 5. 5! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 6. Curso Responsive Web Design | BEEVA! 6! ARQUITECTURA Misma UI en distintos dispositivos
- 7. 7! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 8. Curso Responsive Web Design | BEEVA! 8! VENTAJAS E INCONVENIENTES Pros • UI única (mantenibilidad) • Gran capacidad de personalización para disAntos disposiAvos • Móviles • Tablets Contras • Riesgo de desperdicio de recursos • Complejidad alta en en apps de media y gran escala
- 9. 9! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 10. Curso Responsive Web Design | BEEVA! 10! EJEMPLOS REALES hHp://www.noupe.com/showcases/let-‐it-‐flow-‐26-‐awesome-‐examples-‐of-‐ responsive-‐web-‐design-‐75368.html hHp://mediaqueri.es/ hHp://www.designyourway.net/blog/inspiraAon/responsive-‐web-‐designs-‐for-‐ inspiraAon-‐40-‐examples/ hHp://socialdriver.com/2013/06/50-‐best-‐responsive-‐website-‐design-‐examples-‐ of-‐2013/
- 11. 11! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 12. Curso Responsive Web Design | BEEVA! 12! REPASO CSS3 Media queries • Capacidad que puede tener un siAo web de uAlizar CSS3 con las extensiones @media para adaptar la disposición gráfica al entorno de visualización – Ejemplos: monitores, móviles, tablets, impresoras, orientación verAcal y horizontal, etc. <link ref="stylesheet" media="screen and (max-device-width: 480px)" href="smartphone.css" /> <link rel="stylesheet" media="screen and (min-width: 480px)" href="screen.css" /> – Otra forma: bloques @media en un mismo CSS @media only screen and (min-width: 320px) and (max-width: 400px) { body {background: blue;} } @media only screen and (min-width: 401px) and (max-width: 1024px) { body {background: red;} } • Conveniente excepto si supone desperdicio de recursos en consultas -‐> SiAo independiente – Ejemplos: Facebook, YouTube, etc. • Autoajuste en navegadores móviles <meta name="viewport" content="width=device-width; initial-scale=1.0;”/>
- 13. 13! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 14. Curso Responsive Web Design | BEEVA! 14! PUNTOS DE RUPTURA
- 15. 15! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 16. Curso Responsive Web Design | BEEVA! 16! CASO PRACTICO 1. IdenAficar capas a rediseñar – Candidatas principales: dimensiones fijas 2. Redefinir capas en cada @media query – Propiedades CSS candidatas • Disposición (display, align, float …) • Dimensiones (width, height, max-* …) Ideas esenciales
- 17. Curso Responsive Web Design | BEEVA! 17! CASO PRACTICO “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.” Más guías básicas
- 18. Curso Responsive Web Design | BEEVA! 18! CASO PRACTICO Sobre la plantilla de la tienda de camisetas diseña y desarrolla adaptaciones RWD para la página de las camisetas
- 19. 19! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 20. Curso Responsive Web Design | BEEVA! 20! RESPONSIVE EN BOOTSTRAP Bootstrap incluye un sistema de grid fluido y responsive que se autoajusta para 12 columnas según el tamaño del área de visión
- 21. Curso Responsive Web Design | BEEVA! 21! RESPONSIVE EN BOOTSTRAP Ejemplo Así se vería en un disposiAvo pequeño (xs):
- 22. Curso Responsive Web Design | BEEVA! 22! RESPONSIVE EN BOOTSTRAP Más clases útiles
- 23. Curso Responsive Web Design | BEEVA! 23! RESPONSIVE EN BOOTSTRAP Ejemplo 1 – Prestad por favor atención a las etiquetas y campos del formulario, así como al botón de envío
- 24. Curso Responsive Web Design | BEEVA! 24! RESPONSIVE EN BOOTSTRAP Ejemplo 1 – vistas según dispositivo dimensiones lg, md, sm dimensiones xs
- 25. Curso Responsive Web Design | BEEVA! 25! RESPONSIVE EN BOOTSTRAP Ejemplo 2 – Prestad por favor atención a las columnas fundamentalmente
- 26. Curso Responsive Web Design | BEEVA! 26! RESPONSIVE EN BOOTSTRAP Ejemplo 2 – vistas según dispositivo dimensiones lg dimensiones md, sm dimensiones xs
- 27. 27! INDICE Curso Responsive Web Design | BEEVA! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 28. Curso Responsive Web Design | BEEVA! 28! CASO PRACTICO CON BOOTSTRAP Sobre la plantilla de la tienda de camisetas diseña y desarrolla adaptaciones RWD para la página de las camisetas utilizando las clases de ayuda de Bootstrap
- 29. Curso Responsive Web Design | BEEVA! 29! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 30. Curso Responsive Web Design | BEEVA! 30! IMAGENES RESPONSIVE • E'queta picture en HTML -‐ hHp://responsiveimages.org/ • Algunas formas de op'mizar la carga • Propiedades background en CSS -‐ hHp://www.smashingmagazine.com/2013/07/22/simple-‐responsive-‐ images-‐with-‐css-‐background-‐images • Lazy-‐load -‐ hHp://www.appelsiini.net/projects/lazyload
- 31. Curso Responsive Web Design | BEEVA! 31! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 32. Curso Responsive Web Design | BEEVA! 32! RESPONSIVE EMAIL La importancia del email, los números lo dejan claro
- 33. Curso Responsive Web Design | BEEVA! 33! INDICE Intro Arquitectura Ventajas e inconvenientes Ejemplos reales Repaso CSS3 Puntos de ruptura Caso práctico Responsive en Bootstrap Caso práctico Imágenes Responsive Responsive Email Recursos y herramientas
- 34. Curso Responsive Web Design | BEEVA! 34! RECURSOS Y HERRAMIENTAS • Fastclick -‐ hHp://elabs.github.io/fastclick Biblioteca que elimina el retardo de 300 ms que existe entre el toque de la pantalla y la acAvación del evento click en los navegadores de smartphones. El objeAvo es que la aplicación web se comporte de forma ágil y natural. • Patrones -‐ hHp://bradfrost.github.io/this-‐is-‐responsive/paHerns.html • Algunas herramientas para desarrollo/pruebas • hHps://chrome.google.com/webstore/detail/dimensions/ hdmihohhdcbejdkidbfijmfehjbnmih • hHps://chrome.google.com/webstore/detail/responsive-‐web-‐design-‐tes/ objclahbaimlfnbjdeobicmmlnbhamkg • Las herramientas/consolas (F12) de desarrollador de los navegadores también traen uAlidades responsive muy potentes
- 35. Curso Responsive Web Design | BEEVA! 35! RESPONSIVE WEB DESIGN hector.mateos@beeva.com