Herramientas de desarrollo en Firefox para la web abierta
-
Upload
juan-eladio-sanchez-rosas -
Category
Technology
-
view
2.644 -
download
0
description
Transcript of Herramientas de desarrollo en Firefox para la web abierta
![Page 1: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/1.jpg)
Herramientas de desarrollo para la Web Abierta
![Page 2: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/2.jpg)
¿Qué es Mozilla?
![Page 3: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/3.jpg)
¿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.
![Page 4: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/4.jpg)
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.
![Page 5: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/5.jpg)
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
![Page 6: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/6.jpg)
Herramientas Firefox Desktop● No 'programar' en Firefox, ¿o si?● Herramientas de apoyo a la construcción de
sitios web
![Page 7: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/7.jpg)
¿Firebug?
Firebug
![Page 8: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/8.jpg)
Toneladas de herramientas
Mozilla Hacks & Herramientas – Desarrollador web – Obtener más
![Page 9: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/9.jpg)
Información de la página● Herramientas - Información de la página
![Page 10: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/10.jpg)
Ver código fuente● Herramientas - Desarrollador web
● Ver código fuente de la página
![Page 11: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/11.jpg)
Consola web● Herramientas
– Desarrollador web● Consola web
![Page 12: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/12.jpg)
Consola de errores● Herramientas – Desarrollador web
– Consola de errores
![Page 13: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/13.jpg)
Borrador (Scratchpad)● Herramientas - Desarrollador web
– Borrador
![Page 14: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/14.jpg)
Experimentando con el Borrador● https://gist.github.com/2145830/● https://github.com/neonux/LiveScratchpad
![Page 15: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/15.jpg)
Inspeccionar● Herramientas - Desarrollador web
● Inspeccionar
![Page 16: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/16.jpg)
Inspeccionar - InfoBar● Selección de propiedades específicas
![Page 17: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/17.jpg)
Inspeccionar - Desactivar resaltado● Para evitar confusión al modificar estilos
– Atenuar la página– Mostrar información del nodo
![Page 18: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/18.jpg)
Inspeccionar - Vista HTML
![Page 19: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/19.jpg)
Inspeccionar - Vista 3D (Tilt)
![Page 20: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/20.jpg)
Inspeccionar – Vista de reglas
![Page 21: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/21.jpg)
Inspeccionar – Vista computada
![Page 22: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/22.jpg)
Inspeccionar – Vista de diseño *
![Page 23: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/23.jpg)
Editor de estilos
![Page 24: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/24.jpg)
El futuro de las herramientas● https://wiki.mozilla.org/Features/DevTools
![Page 25: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/25.jpg)
Depurador *
![Page 26: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/26.jpg)
Vista de diseño adaptable *
![Page 27: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/27.jpg)
Futuras publicaciones de Firefox
Firefox (Estable), Aurora y Mobilefirefox.com/channel
![Page 28: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/28.jpg)
Eso era en Firefox POR DEFECTO● ¿y que hay allá afuera?
![Page 29: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/29.jpg)
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)
![Page 30: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/30.jpg)
Pixlr Grabber
![Page 31: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/31.jpg)
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
![Page 32: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/32.jpg)
Firebug● Inspeccionar código● Modificar estilo y estructura● Depurar código JavaScript● Analizar uso de red y desempeño● Extender con más complementos
![Page 33: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/33.jpg)
CodeBurner for Firebug● Ofrece material de referencia para HTML y
CSS● Opciones concentradas en panel Reference● Provee información complementaria en
otros paneles
![Page 34: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/34.jpg)
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
![Page 35: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/35.jpg)
Más extensiones● ColorZilla● FireFTP● Open With● ShowIP● PassiveRecon● User Agent RG
![Page 36: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/36.jpg)
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
![Page 37: Herramientas de desarrollo en Firefox para la web abierta](https://reader033.fdocuments.mx/reader033/viewer/2022051313/5482bdc6b4af9fa50d8b48aa/html5/thumbnails/37.jpg)
Mozilla Perú
/mozillaperu