• Save
Curso de Responsive Web Design de BEEVA
Upcoming SlideShare
Loading in...5
×
 

Curso de Responsive Web Design de BEEVA

on

  • 229 views

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

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

Statistics

Views

Total Views
229
Views on SlideShare
161
Embed Views
68

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 68

http://academy.beeva.com 68

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Curso de Responsive Web Design de BEEVA Curso de Responsive Web Design de BEEVA Presentation Transcript

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