Mozilla no es un navegador, es una fundación global dedicada a mantener el poder de la Web en las manos de las personas. Es así como cuenta con múltiples equipos, uno de los cuales se dedica exclusivamente al desarrollo de nuevas herramientas para hacer más fácil y divertida la construcción de web sitios y aplicaciones. 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 parte o como complementos de Firefox, así como otros recursos desarrollados por diversos equipos en Mozilla.

1. Herramientas de desarrollo para
la Web Abierta

2. ¿Qué es Mozilla?

3. ¿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.

4. 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.

5. La experiencia del desarrollador
Aprender Construir Publicar
Documentación, Noticias e Información
Tutoriales Heramientas Librerías Servidores
Cursos Firefox Desktop Herramientas Marketplaces
Balas de plata Firefox Mobile Editores, Servicios
IDEs
Firefox OS

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

7. ¿Firebug?
Firebug

8. Toneladas de herramientas
Mozilla Hacks & Herramientas –
Desarrollador web – Obtener más

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

10. Ver código fuente
●
Herramientas - Desarrollador web
●
Ver código fuente de la página

11. Consola web
●
Herramientas
– Desarrollador web
●
Consola web

12. Consola de errores
●
Herramientas – Desarrollador web
– Consola de errores

13. Borrador (Scratchpad)
●
Herramientas - Desarrollador web
– Borrador

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

15. Inspeccionar
●
Herramientas - Desarrollador web
●
Inspeccionar

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

17. Inspeccionar - Desactivar resaltado
●
Para evitar confusión al modificar estilos
– Atenuar la página
– Mostrar información del nodo

18. Inspeccionar - Vista HTML

19. Inspeccionar - Vista 3D (Tilt)

20. Inspeccionar – Vista de reglas

21. Inspeccionar – Vista computada

22. Inspeccionar – Vista de diseño *

23. Editor de estilos

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

25. Depurador *

26. Vista de diseño adaptable *

27. Futuras publicaciones de Firefox
Firefox (Estable), Aurora y Mobile
firefox.com/channel

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

29. 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)

30. Pixlr Grabber

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

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

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

34. 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

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

36. 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

37. Mozilla Perú
/mozillaperu