¿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.
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».
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.
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.
Cuando haces clic en un elemento, se seleccionará en la pestaña Inspector de las Herramientas de desarrollo.
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».
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».
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.
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:
display: none;
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.
No le mostraremos cómo codificar CSS aquí, pero puede jugar con algunas de las reglas populares como:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
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.