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 ...
Web Abierta●    Publicar contenidos y aplicaciones para la web    en estándares abiertos.●    Implementar los estándares w...
La experiencia del desarrolladorAprender      Construir                              Publicar             Documentación, N...
Herramientas Firefox Desktop●    No programar en Firefox, ¿o si?●    Herramientas de apoyo a la construcción de    sitios ...
¿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...
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 FirefoxFirefox (Estable), Aurora y Mobile       firefox.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...
Pixlr Grabber
Web Developer●    Menú y barra de    herramientas                 –   Resaltar componentes    –   Desactivar componentes  ...
Firebug●    Inspeccionar código●    Modificar estilo y estructura●    Depurar código JavaScript●    Analizar uso de red y ...
CodeBurner for Firebug●    Ofrece material de referencia para HTML y    CSS●    Opciones concentradas en panel Reference● ...
YSlow●    Analiza sitios web●    Y sugiere formas de mejorarlos●    Reglas basadas en    –   Best Practices for Speeding U...
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...
Mozilla Perú/mozillaperu
Upcoming SlideShare
Loading in …5
×

Herramientas de desarrollo en Firefox para la web abierta

2,276 views
2,113 views

Published on

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.

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

No Downloads
Views
Total views
2,276
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Herramientas de desarrollo en Firefox para la web abierta

  1. 1. Herramientas de desarrollo para la Web Abierta
  2. 2. ¿Qué es Mozilla?
  3. 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. 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. 5. La experiencia del desarrolladorAprender Construir Publicar Documentación, Noticias e InformaciónTutoriales Heramientas Librerías Servidores Cursos Firefox Desktop Herramientas Marketplaces Balas de plata Firefox Mobile Editores, Servicios IDEs Firefox OS
  6. 6. Herramientas Firefox Desktop● No programar en Firefox, ¿o si?● Herramientas de apoyo a la construcción de sitios web
  7. 7. ¿Firebug?Firebug
  8. 8. Toneladas de herramientas Mozilla Hacks & Herramientas –Desarrollador web – Obtener más
  9. 9. Información de la página● Herramientas - Información de la página
  10. 10. Ver código fuente● Herramientas - Desarrollador web ● Ver código fuente de la página
  11. 11. Consola web● Herramientas – Desarrollador web ● Consola web
  12. 12. Consola de errores● Herramientas – Desarrollador web – Consola de errores
  13. 13. Borrador (Scratchpad)● Herramientas - Desarrollador web – Borrador
  14. 14. Experimentando con el Borrador● https://gist.github.com/2145830/● https://github.com/neonux/LiveScratchpad
  15. 15. Inspeccionar● Herramientas - Desarrollador web ● Inspeccionar
  16. 16. Inspeccionar - InfoBar● Selección de propiedades específicas
  17. 17. Inspeccionar - Desactivar resaltado● Para evitar confusión al modificar estilos – Atenuar la página – Mostrar información del nodo
  18. 18. Inspeccionar - Vista HTML
  19. 19. Inspeccionar - Vista 3D (Tilt)
  20. 20. Inspeccionar – Vista de reglas
  21. 21. Inspeccionar – Vista computada
  22. 22. Inspeccionar – Vista de diseño *
  23. 23. Editor de estilos
  24. 24. El futuro de las herramientas● https://wiki.mozilla.org/Features/DevTools
  25. 25. Depurador *
  26. 26. Vista de diseño adaptable *
  27. 27. Futuras publicaciones de FirefoxFirefox (Estable), Aurora y Mobile firefox.com/channel
  28. 28. Eso era en Firefox POR DEFECTO● ¿y que hay allá afuera?
  29. 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. 30. Pixlr Grabber
  31. 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. 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. 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. 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. 35. Más extensiones● ColorZilla● FireFTP● Open With● ShowIP● PassiveRecon● User Agent RG
  36. 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. 37. Mozilla Perú/mozillaperu

×