Your SlideShare is downloading. ×
0
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
"Responsive web design": desarrollando para todos lados
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

"Responsive web design": desarrollando para todos lados

1,479

Published on

Presentación hecha en el marco de la #COPO5 en la tarima de innovación.

Presentación hecha en el marco de la #COPO5 en la tarima de innovación.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,479
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. “RESPONSIVE WEB DESIGN - DESARROLLANDO PARA TODOS LADOS” Por: @dgfrancisco Imagen por: - http://thenounproject.com/martes 26 de junio de 12
  • 2. @dgfrancisco www.dgfrancisco.commartes 26 de junio de 12
  • 3. @enterco www.enter.comartes 26 de junio de 12
  • 4. ¿Y qué con eso de RD? Imagen por: Lukew - http://www.flickr.com/photos/lukew/7382743430/in/photostreammartes 26 de junio de 12
  • 5. Estadísticas Crecimiento de las ventas y actualización de teléfonos inteligentes para los próximos años. 982 millones 2015 25% 630 millones 2012 472 millones 2011 Sources: IDC.com - flurry.com - NPD.com - onlinemarketingtrends.com - abiresearch.com - gartner.commartes 26 de junio de 12
  • 6. Estadísticas Los usuarios en que momento están usando sus dispositivos para usar apps o web y que es lo q hacen en esos momentos. Hogar En la calle Mientras compran En el trabajo En el transporte 98% 89% 79% 74% 64% Navegando, buscando, Fotos, Música, Ubicación, Cupones, descuentos, Navegando, buscando, Fotos, Música, Ubicación, amigos, chat, redes, Redes sociales, chat. ofertas, comparando. amigos, chat, redes, Redes sociales, chat. remplazando computadores remplazando computadoresmartes 26 de junio de 12
  • 7. TODOmartes 26 de junio de 12
  • 8. Conceptos Adaptive web design Mobile first Responsive designmartes 26 de junio de 12
  • 9. ¿Qué es responsive design? “... una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media- queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario ...” Enlace: http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativomartes 26 de junio de 12
  • 10. ¿Qué es responsive design? Un solo código fuente, adaptado por su capa gráfica por medio de media-queries y layouts fluidosmartes 26 de junio de 12
  • 11. ¿Cómo? Imagen: HikingArtist - www.flickr.com/photos/hikingartist/5726773583/in/photostreammartes 26 de junio de 12
  • 12. 1. Layout Fluido 2. Media-queries 3. RESSmartes 26 de junio de 12
  • 13. 1. Layout Fluido 2. Media-queries 3. RESSmartes 26 de junio de 12
  • 14. Layouts fluidos % 1. Retículas flexibles 2. Elementos contenedores flexibles 100% width: 60% 40%martes 26 de junio de 12
  • 15. Layouts fluidos Target ÷ Contexto = Resultado% Contexto 1000px Target 600px %martes 26 de junio de 12 600px ÷ 1000px = 0.6%
  • 16. 1. Layout Fluido 2. Media-queries 3. RESSmartes 26 de junio de 12
  • 17. Media-queries <link rel="stylesheet" media="print" type="text/css" href="print.css" /> http://www.w3.org/TR/css3-mediaqueriesmartes 26 de junio de 12
  • 18. Media-queries Tipos print Impresos. braille Dispositivos de lectura braille. embossed Dispositivos de impresión braille. handheld Dispositivos de mano. projection Dispositivos para proyección como el videobin. screen Pantallas de computadores. speech Sintetizadores de Voz (Sordos). tty Dispositivos mecánicos, como los teletipos. tv Televisores de gran, medio o pequeño formato.martes 26 de junio de 12
  • 19. Media-queries Propiedades width Filtro por ancho. height Filtro por alto. device-width Filtro por el ancho del dispositivo. device-height Filtro por el alto del dispositivo. orientation Landscape o Portrait. aspect-ratio X:Y (ancho/altura, 16:9 TV). device-aspect-ratio X:Y (ancho/altura) de los dispositivos. color Cantidad de color por bit, sin color = 0 color-index Capacidad de color del dispositivo. monochrome monocromático. resolution densidad de pixeles.martes 26 de junio de 12
  • 20. Media-queries Syntaxis @media all and (max-width: 1000px) and (min-width: 700px) {} @media screen and (orientation:portrait) and (min-width: 400px) {} @media (tipo) and (filtro por: ...) and (filtro por: ...) { body{background-color: #c00;} }martes 26 de junio de 12
  • 21. Media-queries max-width :/ min-height min-color-index max-device-width max-color min-resolution min-monocrohmemartes 26 de junio de 12
  • 22. 1. Layout Fluido 2. Media-queries 3. RESSmartes 26 de junio de 12
  • 23. RESS Responsive design + Server side components 1. Detección de dispositivos 2. Detección de características 3. Contenido condicionalmartes 26 de junio de 12
  • 24. RESS Detección de dispositivos Request BD con info detallada ¿Qué tipo de dispositivo, móvil, TV, tablet?martes 26 de junio de 12
  • 25. RESS Detección de dispositivos / BD • WURFL (PHP, Java, .Net) • 51Degrees.mobi (.Net)martes 26 de junio de 12
  • 26. RESS Detección de características <html class="js canvas canvastext geo cssanimations csscolumns no-cssgradi cufon-active fontface cufon-ready"> CSS3 - HTML5 ¿Qué soporta? ¿Qué puedo usar?martes 26 de junio de 12
  • 27. RESS js geolocation Detección de características rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio fontfacemartes 26 de junio de 12
  • 28. RESS Contenido Condicional 1. Cambiar pauta 2. img de tamaño XXX 3. Secciones registros/login 1. Quitar XXX poner XXX Js 2. Forzar propiedades 3. Validacionesmartes 26 de junio de 12
  • 29. Entonces 1. Layout Fluido 2. Media-queries 3. RESSmartes 26 de junio de 12
  • 30. Siguiente paso 1. Progressive enhancement 2. Off Canvas layouts 3. Pre-procesadoresmartes 26 de junio de 12
  • 31. Gracias Francisco Rodríguez @dgfrancisco yo@dgfrancisco.com @nounprojectmartes 26 de junio de 12

×