Your SlideShare is downloading. ×
0
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
La nueva tendencia del Responsive Web Design
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

La nueva tendencia del Responsive Web Design

847

Published on

La importancia del diseño y desarrollo de un sitio web hoy radica en darle al usuario la ventaja de poder acceder a la información que desee cuando lo desee, sobre todo desde cualquier dispositivo …

La importancia del diseño y desarrollo de un sitio web hoy radica en darle al usuario la ventaja de poder acceder a la información que desee cuando lo desee, sobre todo desde cualquier dispositivo como una pc de escritorio, notebook, netbook, tablets o smartphones. Esto es una tendencia en aumento considerada como “Responsive Web Design”

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
847
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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. Diseñando una web para todos los dispositivos La nueva tendencia del Responsive Web Design Nicolás Salinas Graphic & Interactive Web Designer
  • 2. ¿Qué es el Responsive Web Design o Diseño Web Adaptable? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 3. Es la tendencia para crear sitios web que se adaptan alancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC’s, notebooks, netbooks, smartphones y tablets. Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 4. Un poco de historia... pero solo un poco Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 5. 1990’s la web mide 800pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 6. 2000’sla web mide 1024pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 7. 2007 +la web mide 1024px y 320px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 8. 2010 + +la web mide 1200px y 320px y 768px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 9. 2012 + + +la web mide 1200px y 320px y 768px y 1800px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 10. 2012 + + + ¿320px?la web mide 256px y 320px y 426px y 480px y 560px y 640px y 768px y 800px y 960px y 1024px y 1280px y 1440px y 1600px y 1800px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 11. ¿Cómo abordar una versión móvil? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 12. 1ra. solución:versión desktop + versión mobile (específica para c/dispositivo) Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 13. ¿Cómo logro que mi web sea adaptable? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 14. + + Retículas flexibles + Elementos multimedia flexibles + Diseños fluidos (@media queries) Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 15. ¿Qué son las Media Queries? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 16. Son una exten­ ión de CSS2 que per­ iten defi­ ir las hojas de estilo s m n espe­cí­fi­cas para dis­tin­tos dis­po­si­ti­vos o “media”. Ahora con CSS3 esta fun­cio­na­li­dad per­mi­te defi­nir con­di­cio­nescomo el tamaño en dimensiones de las pantallas de los dis­ o­ i­ivos p st Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 17. Dentro de las etiquetas <head> </head><link rel=”stylesheet” media=”screen and (min-device-width: 980px)” href=”desktop.css” /><link rel=”stylesheet” media=”screen and (min-device-width: 768px)” href=”tablet.css” /><link rel=”stylesheet” media=”screen and (min-device-width: 480px)” href=”mobile.css” />Dentro del archivo .css#wrapper { @media screen and (max-width: 768px) { margin:auto; #wrapper { width:90%; background-color:#0C0; padding:20px; } background-color:#0CF; }} Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 18. Retículas Flexibles Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 19. www.anderssonwise.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 20. www.bradsawicki.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 21. www.madebysplendid.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 22. www.palantir.netDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 23. www.orestis.nlDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 24. Navegación - Soluciones Adaptables Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 25. Navegación StandardDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 26. Navegación en GrillaDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 27. Navegación con un botón “Menú” Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 28. Navegación “Select” Drop-down Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 29. Frameworks más utilizados Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 30. http://html5boilerplate.com/html5boilerplate.com/dist/mobile/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 31. http://lessframework.com/Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 32. http://twitter.github.com/bootstrap/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 33. http://goldengridsystem.com/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 34. http://foundation.zurb.com/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 35. Resoluciones de pantallas posibles Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 36. Pros:- Una sola versión para todos los dispositivos (multiplataforma)- Reducción de los costos del mantenimiento- No se trata sólo del dispositivo, sino de la UX (User Experience)- SEO, mejora la usabilidad y conversión Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 37. Contras:- Tiempos de diseño- Desarrollo en formato web- Compatibilidad con navegadores y dispositivos Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 38. ¿Puedo ver más ejemplos? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 39. Smashing Magazine www.smashingmagazine.com Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 40. CSS-Tricks css-tricks.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 41. App Cube appcube.infoDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 42. Media Queries mediaqueri.esDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 43. ¿Algunos links sobre RWD?- mediaqueri.es- webdesignledger.com/tips/web-design-trends-in-2012- www.emenia.es/diseno-web-adaptable-o-responsive-web-design- teamtreehouse.com/blog/beginners-guide-to-responsive-web-design- www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 44. ConclusiónNo hay una web para escritorio, una para smartphones y otra para tablets; hay UNA SOLA WEB Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 45. Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 46. Muchas Gracias! Nicolás Salinas Graphic & Interactive Web Designer @nick_supremacy nico@socialcherry.com.py Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer

×