1. Responsive Web DesignWalter Gerez@wgerezhttp://opivalia.com.ar

2. Responsive Web Design?? 3. Inspiration!! http://mediaqueri.es 4. Inspiration!! http://mediaqueri.es 5. Inspiration!! http://mediaqueri.es 6. Pero, necesito esto?Argentina multiplicar por doce el consumo de internetm vil en cinco a os El avance del acceso a Internet desde un dispositivo mvil no es una tendencia local, y laArgentina se ubica detrs de mercados como Japn y por delante de Estados Unidos y el ReinoUnido en trminos 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-movilAo 2012 Ao 2013 Ao 2014 Ao 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. Responsive Web DesignCual es el truco?HTML5 y CSS3 Media QueriesMedia Queries 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. Responsive Web DesignEjemplos CSS Media Queries@media screen and (min-width: 600px) and (max-width: 900px) {.class {background: #333;}} 10. Herramientas ResponsiveLess Framework 11. Herramientas ResponsiveSkeleton 12. Herramientas ResponsiveGolden Grid System 13. Herramientas Responsive320 and up 14. Herramientas ResponsiveFluid 960 Grid system 15. Herramientas ResponsiveBoilerplate 16. Herramientas ResponsiveBootstrap - Twitter 17. Bootstrap - Ejemploshttp://www.angelomazzilli.com/Preciso/preciso.html 18. Bootstrap - Ejemploshttp://themes.suggeelson.com/supr/ 19. Bootstrap - Ejemploshttp://www.youxithemes.com/live_previews/dandelion/ 20. Bootstrap - Ejemploshttp://www.youxithemes.com/live_previews/mws-admin/ 21. Bootstrap - VentajasUtiliza componentes y servicios creados por la comunidad:HTML5 shimNormalize.css(en navegadores viejos section, article, aside)OOCSSjQuery UI (implementa 12 plugins)GitHub 22. Bootstrap - VentajasEs un conjunto de buenas prcticas* Implementa los nuevos stndares: HTML5 + CSS3* Uso intensivo de:- Vendor prefixes: -moz, -webkit, -o, -ms- Polyfills: va HTML5 Shim- Prefixed classes: btn, alert, navbar, thumbnails, etc..* CSS Sprites para la iconografa.* Cross-browser- IE 7/8/9, Firefox, Chrome, Safari- Mac y Windows 23. BootstrapBasta de bla bla bla bla y a Codear un rato!!.< -_- >