Desarrolloweb conMozillaFirefoxJuan Eladio Sánchez RosasMozilla Perú
¿Desarrollo web con Firefox?• Bueno, no exactamente “programar” con Firefox.• Herramientas de análisis, diseño, construcci...
Tiempo Cero• Elegir 5 sitios web que les gustaría analizar • Y dejarlos abiertos en pestañas • NO Hi5, Hotmail, páginas de...
Herramientas de Firefox• Herramientas • Información de la página
Herramientas de Firefox• Herramientas – Desarrollador web • Consola web
Herramientas de Firefox• Herramientas – Desarrollador web • Inspeccionar
Herramientas de Firefox• Herramientas – Desarrollador web • Borrador
Herramientas de Firefox• Herramientas – Desarrollador web • Código fuente
Herramientas de Firefox• Herramientas – Desarrollador web • Consola de errores
Wappalyzer• Detecta qué herramientas emplea una web • Content Management Systems    (Wordpress, Joomla, Drupal)  • Sistema...
ScreenGrab• Guardar una página web (o parte de ella) como imagen
Web Developer• Menú y barra de herramientas • Desactivar componentes        • Resaltar componentes • Cookies              ...
Firebug• Inspeccionar código• Modificar estilo y estructura• Depurar código JavaScript• Analizar uso de red y desempeño• E...
CodeBurner for Firebug• Ofrece material de referencia para HTML y CSS• Opciones concentradas en panel Reference• Provee in...
YSlow• Analiza sitios web• Y sugiere formas de mejorarlos• Reglas basadas en • Best Practices for Speeding Up Your Web Sit...
Más extensiones                  • ColorZilla                  • FireFTP                  • Open With                  • S...
Desarrollo web conMozilla Firefox          Mozilla Perú          mozilla.pe          www.facebook.com/mozillaperu         ...
Upcoming SlideShare
Loading in...5
×

Desarrollo web con Mozilla Firefox

3,317

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,317
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desarrollo web con Mozilla Firefox

  1. 1. Desarrolloweb conMozillaFirefoxJuan Eladio Sánchez RosasMozilla Perú
  2. 2. ¿Desarrollo web con Firefox?• Bueno, no exactamente “programar” con Firefox.• Herramientas de análisis, diseño, construcción, mantenimiento de sitios web.
  3. 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. 4. Herramientas de Firefox• Herramientas • Información de la página
  5. 5. Herramientas de Firefox• Herramientas – Desarrollador web • Consola web
  6. 6. Herramientas de Firefox• Herramientas – Desarrollador web • Inspeccionar
  7. 7. Herramientas de Firefox• Herramientas – Desarrollador web • Borrador
  8. 8. Herramientas de Firefox• Herramientas – Desarrollador web • Código fuente
  9. 9. Herramientas de Firefox• Herramientas – Desarrollador web • Consola de errores
  10. 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. 11. ScreenGrab• Guardar una página web (o parte de ella) como imagen
  12. 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. 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. 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. 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. 16. Más extensiones • ColorZilla • FireFTP • Open With • ShowIP • PassiveRecon • User Agent Switcher
  17. 17. Desarrollo web conMozilla 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×