Crea tu web desde el navegador

MARACAIBO TECH MEETUP | 06, MAYO, 2017
Sobre mí

Soy Miguel Useche
Trabajo como
Desarrollador web y profesor de la UNET

En Mozilla
TechSpeaker, Redes Sociales, Traducción y mas.

Twitter
@skatox @mozillaVe

2
Contenido

➔ Problemas al desarrollar web.
➔ Firefox Developer Edition.
➔ Las herramientas de desarrollo.
➔ Recomendaciones
➔ Ejemplos de uso

3
¡Comencemos!
Algunos problemas actuales al desarrollar web

Muchos
dispositivos,
distintos
tamaños de
pantallas y
múltiples
navegadores.

5
Algunos problemas actuales al desarrollar web

Editores con
retraso
tecnológico y
con poca
interactividad
con el
navegador

6
Algunos problemas actuales al desarrollar web

Muchas librerías de
JS existentes

7
Algunos problemas actuales al desarrollar web

Problemas de
conectividad

8
¿Se identifican?
Solución:
¡Usa tu navegador!
Firefox: Edición para Desarrolladores
El inspector ( Ctrl + Shift + I o clic e Inspeccionar)

12
Toma capturas de la página

13
Visualiza JSON

14
Editores de JS y CSS

Scratchpad:
Editor de JS

Editor de
Estilos

15
Información sobre propiedades CSS

● Requiere conexión

16
Simula dispositivos y velocidad

Prueba los distintos @media-query
que crees y cómo funcionan tus
aplicaciones en conexiones móviles

17
Crea animaciones CSS

18
Mallas CSS

Las mallas CSS es una
nueva forma de declarar
mallas (grids) en la web
¡sin usar frameworks!

19
Recomendaciones

● Escribe el código CSS y JS directamente en el
navegador y mira los resultados en tiempo real.
● ¿Sin acceso a un dispositivo? ¡Simúlalo!
● ¿Ya hiciste una página? Depúrala con el navegador.
● Asegura que tu sitio funcione en varios
navegadores.
● Utiliza las versiones de desarrolladores o de
prueba para conocer antes los cambios de la web.

20
Extensiones para DevTools

● AngularJS Inspector
● Ember Inspector
● DevTools Tweaks
● DevTools Prototyper
● React DevTools
● Axe DevTools (Accessibility)
● WAVE Accessibility Extension
● FireQuery
● Event Listener Tab
● Performance Analyser

21
¡Gracias!

Mozilla Venezuela
Twitter @mozillaVe
Website mozillavenezuela.org.ve
Facebook fb.com/mozillavenezuela

22
¿Preguntas?

Sign up to vote on this title
UsefulNot useful