Herramientas y Best Practices para ser un buen Front-End

24
Aprovechando lo mejor de la web William Méndez Open Source Web Developer Avanet Member / Web Development Manager at Mozilla - Ecuador. [email protected] | [email protected] | @willirocker | wmendezc.wordpress.com

Transcript of Herramientas y Best Practices para ser un buen Front-End

Page 1: Herramientas y Best Practices para ser un buen Front-End

Aprovechando lo mejor de la web

William MéndezOpen Source Web Developer

Avanet Member / Web Development Manager at Mozilla - Ecuador.

[email protected] | [email protected] | @willirocker | wmendezc.wordpress.com

Page 2: Herramientas y Best Practices para ser un buen Front-End
Page 3: Herramientas y Best Practices para ser un buen Front-End

Preprocesadores de Css

+

Page 4: Herramientas y Best Practices para ser un buen Front-End

Qué necesitamos para poder tener estos pre-procesadores

http://www.nodejs.org/

npm -g install

Page 5: Herramientas y Best Practices para ser un buen Front-End

Qué necesitamos para poder tener estos pre-procesadores

https://www.ruby-lang.org/es/

gem install compass

Page 6: Herramientas y Best Practices para ser un buen Front-End

Ventajas que aportan

Te evitas de repetir tu código.

Page 7: Herramientas y Best Practices para ser un buen Front-End

Herramientas para compilar a Css con los pre procesadores

https://mhs.github.io/scout-app/

http://koala-app.com/

Page 8: Herramientas y Best Practices para ser un buen Front-End

Pre procesadores Js

http://coffeescript.org/

http://www.dartlang.org/

Page 9: Herramientas y Best Practices para ser un buen Front-End
Page 10: Herramientas y Best Practices para ser un buen Front-End

Compatibilidad con los Navegadores

Page 11: Herramientas y Best Practices para ser un buen Front-End

Compatibilidad con los Navegadores

http://caniuse.com/

Page 12: Herramientas y Best Practices para ser un buen Front-End

Compatibilidad con los Navegadores

Normalize.csshttps://necolas.github.io/normalize.css/

http://modernizr.com/

Page 13: Herramientas y Best Practices para ser un buen Front-End
Page 14: Herramientas y Best Practices para ser un buen Front-End

Template Engines

Page 15: Herramientas y Best Practices para ser un buen Front-End

Frameworks MV*

Page 16: Herramientas y Best Practices para ser un buen Front-End
Page 17: Herramientas y Best Practices para ser un buen Front-End

Uso de las DevTools

Page 18: Herramientas y Best Practices para ser un buen Front-End

Uso de las DevTools

http://getfirebug.com/

Page 19: Herramientas y Best Practices para ser un buen Front-End
Page 20: Herramientas y Best Practices para ser un buen Front-End

Automatizando las Tareas

Page 21: Herramientas y Best Practices para ser un buen Front-End
Page 22: Herramientas y Best Practices para ser un buen Front-End

Demo

https://github.com/Wilo/bar

campMilagro2014

Page 23: Herramientas y Best Practices para ser un buen Front-End

¿Preguntas?

Page 24: Herramientas y Best Practices para ser un buen Front-End

Gracias por su Atención :D