Desarrollo web con Mozilla Firefox

Desarrollo web con Mozilla FirefoxJuan Eladio Sánchez RosasMozilla Perú

¿Desarrollo web con Firefox?

• Bueno, no exactamente “programar” con Firefox.

• Herramientas de análisis, diseño, construcción, mantenimiento de sitios web.

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

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)

• 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)

ScreenGrab

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

Web Developer

• Menú y barra de herramientas

• Desactivar componentes

• Cookies

• CSS (estilos)

• Formularios

• Imágenes

• Información

• Resaltar componentes

• Tamaño de ventana

• Herramientas adicionales

• Código fuente

Firebug

• Inspeccionar código

• Modificar estilo y estructura

• Depurar código JavaScript

• Analizar uso de red y desempeño

• Extender con más complementos

CodeBurner for Firebug

• Ofrece material de referencia para HTML y CSS

• Opciones concentradas en panel Reference

• Provee información complementaria en otros paneles

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

Más extensiones

• ColorZilla

• FireFTP

• Open With

• ShowIP

• PassiveRecon

• User Agent Switcher

Desarrollo web conMozilla Firefox

Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru

Juan Eladio Sánchez Rosasjesanchez(a)mozilla.peblogs.antartec.com/opensourceslideshare.net/juaneladio