VERSIÓN 2012 EN http://www.slideshare.net/juaneladio/herramientas-de-desarrollo-para-la-web-abierta Este taller explica el uso de diversas herramientas de apoyo en la implementación, mantenimiento, optimización y prueba de sitios web, todas ellas disponible libremente como extensiones de Firefox.

1. Desarrollo
web con
Mozilla
Firefox
Juan Eladio Sánchez Rosas
Mozilla Perú

2. ¿Desarrollo web con Firefox?
• Bueno, no exactamente “programar” con Firefox.
• Herramientas de análisis, diseño, construcción,
mantenimiento de sitios web.

3. Tiempo Cero
• Elegir 5 sitios web que les gustaría analizar
• Y dejarlos abiertos en pestañas
• NO Hi5, Hotmail, páginas de 1 solo Flash
• Accesos directos
• Ctrl+N / Ctrl+T / Alt+1,2,3 … / Ctrl+Tab
• Registrar las direcciones en
• http://ir.pe/dwfirefox

4. Herramientas de Firefox
• Herramientas
• Información de la página

5. Herramientas de Firefox
• Herramientas – Desarrollador web
• Consola web

6. Herramientas de Firefox
• Herramientas – Desarrollador web
• Inspeccionar

7. Herramientas de Firefox
• Herramientas – Desarrollador web
• Borrador

8. Herramientas de Firefox
• Herramientas – Desarrollador web
• Código fuente

9. Herramientas de Firefox
• Herramientas – Desarrollador web
• Consola de errores

10. Wappalyzer
• Detecta qué herramientas emplea una web
• Content Management Systems
(Wordpress, Joomla, Drupal)
• Sistemas de comercio electrónico (Magento)
• Foros de discusión (phpBB, SMF, vBulletin)
• Frameworks en JavaScript (JQuery, ExtJS, YUI)
• Paneles de sistemas de hostings (Cpanel)
• Herramientas de estadísticas (Google Analytics)

11. ScreenGrab
• Guardar una página web (o parte de ella) como imagen

12. Web Developer
• Menú y barra de herramientas
• Desactivar componentes • Resaltar componentes
• Cookies • Tamaño de ventana
• CSS (estilos) • Herramientas
adicionales
• Formularios
• Imágenes • Código fuente
• Información

13. Firebug
• Inspeccionar código
• Modificar estilo y estructura
• Depurar código JavaScript
• Analizar uso de red y desempeño
• Extender con más complementos

14. CodeBurner for Firebug
• Ofrece material de referencia para HTML y CSS
• Opciones concentradas en panel Reference
• Provee información complementaria en otros paneles

15. YSlow
• Analiza sitios web
• Y sugiere formas de mejorarlos
• Reglas basadas en
• Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
• Integrado a Firebug

16. Más extensiones
• ColorZilla
• FireFTP
• Open With
• ShowIP
• PassiveRecon
• User Agent Switcher

17. Desarrollo web con
Mozilla Firefox
Mozilla Perú
mozilla.pe
www.facebook.com/mozillaperu
groups.google.com/group/mozilla-peru
Juan Eladio Sánchez Rosas
jesanchez(a)mozilla.pe
blogs.antartec.com/opensource
slideshare.net/juaneladio