Your SlideShare is downloading. ×
0
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
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

Responsive web design

469

Published on

#BarCampNea charla de Responsive Web Design

#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
469
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
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 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 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. 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 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. 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. BootstrapBasta de bla bla bla bla y a Codear un rato!!.< “-_-” >

×