Your SlideShare is downloading. ×
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Herramientas de desarrollo en Firefox para la web abierta
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Herramientas de desarrollo en Firefox para la web abierta

1,899

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 …

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
1,899
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 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. 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 FirefoxFirefox (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

×