Por lo general, al editar una página web utilizamos una herramienta de edición específica como Adobe Dreamweaver, CoffeeCup, Bluefish o una de las otras herramientas de desarrollo. Pero, ¿qué pasa si solo estamos haciendo una lluvia de ideas o si queremos probar algo en una página en vivo? Podríamos hacer una copia de la página en nuestra herramienta de elección y jugar con eso. O podríamos hacerlo dentro de nuestro navegador web. Este tutorial le mostrará cómo editar una página web en su navegador.
Conocido como Herramientas de desarrollo, Firefox llama a la característica Inspect Element mientras que Chrome la llama Inspect. De cualquier manera, es una forma para que el navegador eche un vistazo detrás del brillo de su diseño y eche un vistazo al código que lo impulsa. Esta característica es bastante conocida y se usa mucho. Lo que no es tan conocido es la capacidad de realizar cambios en ese código sobre la marcha.
Cualquier cambio que realice no se guardará y no afectará en vivo. Si no desea cargar la página en su herramienta de desarrollador, esta es una buena forma de experimentar.
Edite cualquier página web en su navegador
Dreamweaver y herramientas como esta tienen un emulador de navegador incorporado que simula cómo se verá un diseño en diferentes navegadores. Por buenos que sean, no siempre son exactos y, a menudo, al iniciar un sitio, a menudo se ve que lo que se veía fantástico en su herramienta de desarrollador se ve ligeramente diferente en un navegador independiente.
Por lo general, iniciaría el sitio en un servidor web interno y lo probaría en un navegador antes de iniciarlo en vivo solo por esta razón. Si una página ya está activa o simplemente desea probar algo, no es necesario copiarla y cargarla en su herramienta de desarrollo, simplemente puede usar la Herramienta de desarrollo del navegador.
Yo uso Firefox, así que te mostraré cómo usar eso. Sin embargo, Chrome es muy parecido.
- Abra una página web con la que quiera experimentar en su navegador.
- Haga clic derecho en cualquier lugar de la página y seleccione Inspeccionar.
Debería ver que su página se divide en dos con un nuevo panel que aparece en la parte inferior con algo de código. Este código es la fuerza impulsora de la página que seleccionó. Se puede acceder a diferentes elementos de página desde las pestañas en la parte superior de la pestaña inferior. Por ejemplo, vemos Inspector, Consola, Depurador, Editor de estilos, etc. en Firefox.
Si pasa el cursor sobre las líneas en el panel inferior, verá diferentes partes del resaltado de la página web. La línea de código en la que se encuentra durante el resaltado es el código que influye en esa parte de la página.
- Si quieres jugar con el aspecto de la página, prueba Style Editor.
- Si quieres jugar con el funcionamiento de la página, prueba la consola o la accesibilidad.
- Si desea eliminar errores o resolver un problema, use la consola o el depurador
El rendimiento es útil para el SEO en el sitio, pero la memoria, la red y el almacenamiento no se usan tanto.
Recuerde, puede perder el tiempo dentro de las Herramientas para desarrolladores tanto como desee y no afectará el sitio. Solo se realizan cambios en la forma en que se muestra la página en su navegador individual, no afecta el sitio web en sí. Una vez que cierra la herramienta, todos los cambios se pierden.
Hacer cambios a una página
Ahora que sabe que puede cambiar lo que quiera sin afectar el sitio web real, divirtámonos un poco. Encuentre un elemento en la página que le gustaría editar. Puede cambiar una fuente, un color de fuente, una imagen de fondo o lo que quiera. Para este ejemplo, voy a cambiar el color de fuente del titular del banner.
- Haga clic derecho en el elemento exacto que desea cambiar y seleccione Inspeccionar.
- Resalte la línea con 'título' o 'H1' para que el texto quede resaltado en el panel superior.
- Navegue a la izquierda dos paneles y encuentre el color de fuente.
- Cambie el valor a algo diferente o seleccione el punto de color para usar un selector.
Su cambio aparecerá dinámicamente cuando termine el cambio. Puede cambiar el color, el tamaño, la fuente, el fondo y todo lo relacionado con la fuente. No puede guardar el trabajo, pero sus cambios permanecerán para esa sesión.
Puede cambiar todo lo relacionado con la página, lo cual es ideal si tiene una idea y desea verificarla rápidamente antes de iniciar todas sus aplicaciones de desarrollo. Todo lo que tiene que hacer es recordar qué cambios realizó y dónde no puede guardarlos aquí. Deberá tomar una captura de pantalla o registrar los cambios y replicarlos dentro de sus herramientas de desarrollador para que se adhiera.
Editar una página web en su navegador es una buena manera de experimentar o jugar con las páginas. También es una buena manera de aprender un poco sobre el desarrollo web sin tener que comprar herramientas costosas para desarrolladores. Ahora ya sabes cómo, ¡ve y diviértete!
