Curso de Responsive Web Design de BEEVA

1,100 views

Published on

Curso de diseño web responsive de BEEVA (incluye ejercicios prácticos).

Published in: Design

Curso de Responsive Web Design de BEEVA

  1. 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. 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. 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. 4.    Curso Responsive Web Design | BEEVA! 4! INTRO Comparativa de enfoques
  5. 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. 6.    Curso Responsive Web Design | BEEVA! 6! ARQUITECTURA Misma UI en distintos dispositivos
  7. 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. 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. 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. 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. 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. 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. 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. 14.    Curso Responsive Web Design | BEEVA! 14! PUNTOS DE RUPTURA
  15. 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. 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. 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. 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. 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. 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. 21.    Curso Responsive Web Design | BEEVA! 21! RESPONSIVE EN BOOTSTRAP Ejemplo Así  se  vería  en  un  disposiAvo  pequeño  (xs):  
  22. 22.    Curso Responsive Web Design | BEEVA! 22! RESPONSIVE EN BOOTSTRAP Más clases útiles
  23. 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. 24.    Curso Responsive Web Design | BEEVA! 24! RESPONSIVE EN BOOTSTRAP Ejemplo 1 – vistas según dispositivo dimensiones  lg,  md,  sm   dimensiones  xs  
  25. 25.    Curso Responsive Web Design | BEEVA! 25! RESPONSIVE EN BOOTSTRAP Ejemplo 2 – Prestad por favor atención a las columnas fundamentalmente
  26. 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. 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. 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. 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. 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. 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. 32.    Curso Responsive Web Design | BEEVA! 32! RESPONSIVE EMAIL La importancia del email, los números lo dejan claro
  33. 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. 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. 35.    Curso Responsive Web Design | BEEVA! 35! RESPONSIVE WEB DESIGN hector.mateos@beeva.com

×