Herramientas y Best Practices para ser un buen Front-End
-
Upload
investigador-independiente -
Category
Technology
-
view
166 -
download
0
Transcript of Herramientas y Best Practices para ser un buen Front-End
![Page 1: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/2.jpg)
![Page 3: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/3.jpg)
Preprocesadores de Css
+
![Page 4: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/6.jpg)
Ventajas que aportan
Te evitas de repetir tu código.
![Page 7: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/8.jpg)
Pre procesadores Js
http://coffeescript.org/
http://www.dartlang.org/
![Page 9: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/9.jpg)
![Page 10: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/10.jpg)
Compatibilidad con los Navegadores
![Page 11: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/11.jpg)
Compatibilidad con los Navegadores
http://caniuse.com/
![Page 12: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/13.jpg)
![Page 14: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/14.jpg)
Template Engines
![Page 15: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/15.jpg)
Frameworks MV*
![Page 16: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/16.jpg)
![Page 17: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/17.jpg)
Uso de las DevTools
![Page 18: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/18.jpg)
Uso de las DevTools
http://getfirebug.com/
![Page 19: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/19.jpg)
![Page 20: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/20.jpg)
Automatizando las Tareas
![Page 21: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/21.jpg)
![Page 22: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/22.jpg)
Demo
https://github.com/Wilo/bar
campMilagro2014
![Page 23: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/23.jpg)
¿Preguntas?
![Page 24: Herramientas y Best Practices para ser un buen Front-End](https://reader033.fdocuments.co/reader033/viewer/2022052413/55abe6c01a28abc4678b4587/html5/thumbnails/24.jpg)
Gracias por su Atención :D