Herramientas de desarrollo para la Web Abierta

¿Qué es Mozilla?

¿Qué es Mozilla?

Comunidad global que considera que Internet debe ser un bien para

beneficio de la humanidad, para lo que es clave promover su apertura e

innovación.

Web Abierta● Publicar contenidos y aplicaciones para la web

en estándares abiertos.● Implementar los estándares web de los cuales

dependen contenidos y aplicaciones.● Acceso y contenido de usuario, código,

aplicaciones web, implementaciones.

La experiencia del desarrollador

Aprender Construir Publicar

Documentación, Noticias e Información

Tutoriales

Cursos

Balas de plata

Heramientas Firefox Desktop

Firefox Mobile

Firefox OS

Librerías

Herramientas

Editores, IDEs

Servidores

Marketplaces

Servicios

Herramientas Firefox Desktop● No 'programar' en Firefox, ¿o si?● Herramientas de apoyo a la construcción de

sitios web

¿Firebug?

Firebug

Toneladas de herramientas

Mozilla Hacks & Herramientas – Desarrollador web – Obtener más

Información de la página● Herramientas - Información de la página

Ver código fuente● Herramientas - Desarrollador web

● Ver código fuente de la página

Consola web● Herramientas

– Desarrollador web● Consola web

Consola de errores● Herramientas – Desarrollador web

– Consola de errores

Borrador (Scratchpad)● Herramientas - Desarrollador web

– Borrador

Experimentando con el Borrador● https://gist.github.com/2145830/● https://github.com/neonux/LiveScratchpad

Inspeccionar● Herramientas - Desarrollador web

● Inspeccionar

Inspeccionar - InfoBar● Selección de propiedades específicas

Inspeccionar - Desactivar resaltado● Para evitar confusión al modificar estilos

– Atenuar la página– Mostrar información del nodo

Inspeccionar - Vista HTML

Inspeccionar - Vista 3D (Tilt)

Inspeccionar – Vista de reglas

Inspeccionar – Vista computada

Inspeccionar – Vista de diseño *

Editor de estilos

El futuro de las herramientas● https://wiki.mozilla.org/Features/DevTools

Depurador *

Vista de diseño adaptable *

Futuras publicaciones de Firefox

Firefox (Estable), Aurora y Mobilefirefox.com/channel

Eso era en Firefox POR DEFECTO● ¿y que hay allá afuera?

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)

Pixlr Grabber

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 Sitehttp://developer.yahoo.com/performance/rules.html

● Integrado a Firebug

Más extensiones● ColorZilla● FireFTP● Open With● ShowIP● PassiveRecon● User Agent RG

Bonus● Estudio: Situación de los desarrolladores

web en el Perú 2012● http://www.slideshare.net/juaneladio/estudi

o-situacin-de-los-desarrolladores-web-en-el-per-2012

Mozilla Perú

/mozillaperu