Cómo editar en vivo un sitio con la herramienta de desarrollo web de Firefox

¿Su sitio se vería mejor si el logotipo se moviera cinco píxeles a la derecha o tuviera un fondo azul? ¿Agregar un borde o sombras a las imágenes en sus publicaciones destacadas las haría resaltar más? Los navegadores modernos como Firefox vienen con herramientas de desarrollo web que le permiten inspeccionar el funcionamiento interno de un sitio y realizar ediciones en vivo, viendo los resultados en tiempo real.

En este tutorial, aprenderá a utilizar las herramientas de desarrollo web de Firefox para editar en vivo cualquier sitio.

Nota: Este tutorial se aplica a la mayoría de los navegadores, incluidos Chrome, Opera y Safari.

Conozca las herramientas de desarrollo web

Las herramientas de desarrollo web de Firefox son un conjunto completo de herramientas, desde mostrar todos los elementos DOM hasta poder medir su velocidad. Para este tutorial solo necesita las herramientas «Inspector» y «Editor de estilos».

Inicie Firefox y visite cualquiera / su sitio. Desde el menú de hamburguesas de Firefox (en la parte superior derecha de forma predeterminada), elija «Desarrollador web -> Editor de estilo» o presione el botón Cambio + F7 combinación en su teclado.

Live Edit Site con Firefox Launch Style Editor

El panel de desarrollador web de Firefox aparecerá en un lado de su ventana, generalmente en la parte inferior. Puede cambiar su posición haciendo clic en el botón de tres puntos en la parte superior derecha del panel y eligiendo «Dock to Right / Left» o «Separate Window».

Sitio de edición en vivo con ventana separada de Firefox

Nota: Este tutorial no le muestra cómo codificar HTML y CSS. Puede aprender los conceptos básicos aquí.

Inspeccionando el elemento

Para poder afectar el aspecto de un elemento, debe poder identificarlo. Haga clic en el primer botón de su barra de herramientas o presione Ctrl + Cambio + C en su teclado para habilitar el modo selector de elementos.

Sitio de edición en vivo con selector de elementos de Firefox

Mueva el mouse por el sitio para ver los diferentes elementos de la página web resaltados. Junto a ellos, verá su identificador principal flotando en una ventana emergente.

Sitio de edición en vivo con Firefox Elegir logotipo

Cuando haces clic en un elemento, se seleccionará en la pestaña Inspector de las Herramientas de desarrollo.

Sitio de edición en vivo con Firefox Inspector

Cuando encuentre el elemento que desea modificar, haga clic con el botón derecho en su entrada en el Inspector de herramientas de desarrollo y seleccione en la ventana emergente que aparece: «Copiar -> Selector de CSS».

Sitio de edición en vivo con el selector de copias de Firefox

Inicie su edición en vivo

Con el Selector de CSS de su elemento copiado en el portapapeles, vuelva a la pestaña Editor de estilo en la ventana Herramientas de desarrollo. Haga clic en el botón «+» en la parte superior izquierda para «Crear y agregar una nueva hoja de estilo al documento».

Live Edit Site con Firefox New Stylesheet

Pegue su selector de CSS dentro de la nueva hoja de estilo en blanco. Agregue un espacio, seguido de un conjunto de llaves de apertura y cierre.

Live Edit Site con Firefox Paste Selector

En CSS, la apariencia de un elemento se define primero «apuntándolo» usando un identificador como ese Selector de CSS, luego agregando algunas reglas que afectan su apariencia, agrupadas dentro de corchetes. Todo lo que se coloca entre las llaves de apertura y cierre afecta al «elemento de destino».

Por ejemplo, si agrega la siguiente regla:

Esto ocultará a la vista el elemento donde se usa. Probablemente sea la forma más fácil de saber que está apuntando al elemento correcto en su página. Si desaparece, era, de hecho, el que deseaba, y puede eliminar esta regla para probar otras. Si no desapareció, es hora de volver al Inspector y seleccionar algo diferente.

Sitio de edición en vivo con Firefox Cambiar el color de fondo

No le mostraremos cómo codificar CSS aquí, pero puede jugar con algunas de las reglas populares como:

Notará que el elemento del sitio cambia a medida que agrega reglas a la hoja de estilo CSS.

Como nota final, recuerde que no se guarda nada. Si le gusta cómo se ven sus ajustes, copie su código en algún lugar, en un archivo TXT o en su aplicación favorita para tomar notas, para que usted o un diseñador / desarrollador puedan agregarlo a la hoja de estilo de sus sitios para que los cambios sean permanentes. Si necesita aprender sobre CSS, consulte algunos juegos en línea que lo ayudarán a dominar la habilidad.

Categorías PC

Deja un comentario