Responsive web design

654 views

Published on

#BarCampNea charla de Responsive Web Design

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

No Downloads
Views
Total views
654
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. Responsive Web DesignWalter Gerez@wgerezhttp://opivalia.com.ar
  2. 2. Responsive Web Design??
  3. 3. Inspiration!! http://mediaqueri.es
  4. 4. Inspiration!! http://mediaqueri.es
  5. 5. Inspiration!! http://mediaqueri.es
  6. 6. Pero, necesito esto?¿Argentina multiplicar por doce el consumo de internetám vil en cinco a osó ñEl avance del acceso a Internet desde un dispositivo móvil no es una tendencia local, y laArgentina se ubica detrás de mercados como Japón y por delante de Estados Unidos y el ReinoUnido en términos de ingresos, superando incluso las llamadas de voz.Fuente: La Nacionhttp://www.lanacion.com.ar/1558158-argentina-detras-de-japon-con-el-consumo-de-internet-movilAño 2012 Año 2013 Año 2014 Año 20150.00%20.00%40.00%60.00%80.00%100.00%120.00%140.00%160.00%180.00%Porcentaje de Penetracion Internet Movil
  7. 7. Responsive Web DesignCual es el truco?HTML5 y CSS3 – Media QueriesMedia Queries
  8. 8. Responsive Web DesignEjemplos – CSS Media Queries@media screen and (min-width:1200px){img {max-width:1000px;}#container{width:1100px;}header h1 a{width:1100px;height:180px;background:url(image.jpg) no-repeat 0 0;}}
  9. 9. Responsive Web DesignEjemplos – CSS Media Queries@media screen and (min-width: 600px) and (max-width: 900px) {.class {background: #333;}}
  10. 10. Herramientas ResponsiveLess Framework
  11. 11. Herramientas ResponsiveSkeleton
  12. 12. Herramientas ResponsiveGolden Grid System
  13. 13. Herramientas Responsive320 and up
  14. 14. Herramientas ResponsiveFluid 960 Grid system
  15. 15. Herramientas ResponsiveBoilerplate
  16. 16. Herramientas ResponsiveBootstrap - Twitter
  17. 17. Bootstrap - Ejemploshttp://www.angelomazzilli.com/Preciso/preciso.html
  18. 18. Bootstrap - Ejemploshttp://themes.suggeelson.com/supr/
  19. 19. Bootstrap - Ejemploshttp://www.youxithemes.com/live_previews/dandelion/
  20. 20. Bootstrap - Ejemploshttp://www.youxithemes.com/live_previews/mws-admin/
  21. 21. Bootstrap - VentajasUtiliza componentes y servicios creados por la comunidad:HTML5 shim<!--[if lt IE 9]><script src="js/html5shiv.js"></script><![endif]-->Normalize.css(en navegadores viejos – section, article, aside)OOCSSjQuery UI (implementa 12 plugins)GitHub
  22. 22. Bootstrap - VentajasEs un conjunto de buenas prácticas* Implementa los nuevos stándares: HTML5 + CSS3* Uso intensivo de:- Vendor prefixes: -moz, -webkit, -o, -ms- Polyfills: vía HTML5 Shim- Prefixed classes: btn, alert, navbar, thumbnails, etc..* CSS Sprites para la iconografía.* Cross-browser- IE 7/8/9, Firefox, Chrome, Safari- Mac y Windows
  23. 23. BootstrapBasta de bla bla bla bla y a Codear un rato!!.< “-_-” >

×