Normalment per editar una pàgina web utilitzem una eina d’edició específica com Adobe Dreamweaver, CoffeeCup, Bluefish o una de les altres eines de desenvolupament. Però, què hi ha si tanmateix una pluja d’idees o volem provar alguna cosa en una pàgina en directe? Podríem fer una còpia de la pàgina en la nostra eina de tria i jugar amb això. O ho podríem fer dins del nostre navegador web. Aquest tutorial us mostrarà com editar una pàgina web al vostre navegador.
Es coneix com a Eines per a desenvolupadors, Firefox truca a la funció Inspectar l'element mentre que Chrome l'anomena Inspeccionar. De qualsevol forma, és una manera perquè el navegador faci una ullada al darrere del disseny del seu disseny i faci una ullada al codi que el condueix. Aquesta característica és força coneguda i s’utilitza molt. El que no és tan conegut és la possibilitat de fer canvis sobre aquest codi.
Qualsevol canvi que realitzeu no es desarà i no afectarà en directe. Si no voleu carregar la pàgina a l'eina de desenvolupador, es tracta d'una manera adequada d'experimentar.
Editeu qualsevol pàgina web del vostre navegador
Dreamweaver i eines com aquest tenen un emulador integrat de navegador que simula com es veurà un disseny en diferents navegadors. Per molt bons que són, no sempre són exactes i sovint trobeu en llançar un lloc que el que sembla fantàstic a la vostra eina de desenvolupador es veu lleugerament diferent en un navegador autònom.
Normalment, llançarà el lloc en un servidor web intern i provaria en un navegador abans de llançar-lo en directe només per aquest motiu. Si una pàgina ja està en directe o només vol provar alguna cosa, no cal copiar-la i carregar-la a l'eina de desenvolupament, només podeu fer servir l'eina de desenvolupador del navegador.
Utilitzo Firefox, així que us ensenyaré com utilitzar-ho. Tot i això, Chrome és el mateix.
- Obriu una pàgina web amb la qual voleu experimentar al navegador.
- Feu clic amb el botó dret a qualsevol lloc de la pàgina i seleccioneu Inspeccionar.
Hauríeu de veure la vostra pàgina dividir-se en dos amb un panell nou que apareix a la part inferior amb algun codi. Aquest codi és el fil conductor de la pàgina que heu seleccionat. Hi ha accessibles diferents elements de les pàgines a la part superior de la pestanya inferior. Per exemple, veiem Inspector, consola, depurador, editor d’estil, etc. al Firefox.
Si publiqueu el cursor sobre les línies del panell inferior, podreu veure diferents parts de la pàgina web. La línia de codi on us heu destacat és el codi que influeix en aquesta part de la pàgina.
- Si voleu jugar amb la imatge de la pàgina, proveu l'Editor d'estil.
- Si voleu reproduir-vos amb el funcionament de la pàgina, proveu Consola o Accessibilitat.
- Si voleu eliminar els errors o solucionar un problema, utilitzeu Consola o Depurador
El rendiment és útil per a SEO en lloc, però la memòria, la xarxa i l'emmagatzematge no s'utilitzen tant.
Recordeu-vos que us podeu confondre amb les eines per a desenvolupadors tant com vulgueu i això no afectarà el lloc. Qualsevol canvi només es faci en la manera com es mostra la pàgina al vostre navegador individual i no afecta el lloc web en si. Un cop tanqueu l’eina, tots els canvis es perdran.
Fer canvis a una pàgina
Ara ja saps que pots canviar qualsevol cosa que t’agradi sense afectar el lloc web real, divertim-nos una mica. Cerqueu un element a la pàgina que vulgueu editar. Podeu canviar un tipus de lletra, un color de lletra, una imatge de fons o qualsevol cosa que vulgueu. Per aquest exemple, canviaré el color del tipus de lletra del títol de la pancarta.
- Feu clic amb el botó dret a l'element exacte que voleu canviar i seleccioneu Inspeccionar.
- Ressalteu la línia amb "title" o "H1" de manera que el text es ressalta al panell superior.
- Desplaceu-vos a les dues capçaleres de l’esquerra i cerqueu el color de la lletra.
- Canvieu el valor a quelcom diferent o seleccioneu el punt de color per utilitzar un selector.
El canvi apareixerà de forma dinàmica quan finalitzeu el canvi. Podeu canviar el color, la mida, el tipus de lletra, el fons i tot el que es refereix al tipus de lletra. No podeu desar el treball, però els canvis es mantindran per a la sessió.
Podeu canviar tot sobre la pàgina que sigui ideal si teniu una idea i voleu comprovar-la ràpidament abans de crear totes les aplicacions de desenvolupament. Tot el que heu de fer és recordar quins canvis heu fet i, com no podreu desar-los aquí. Haureu de fer una captura de pantalla o enregistrar els canvis i replicar-los a les eines de desenvolupador per deixar-lo enganxat.
Editar una pàgina web al navegador és una forma adequada d’experimentar o reproduir-lo amb pàgines. També és una bona manera d’aprendre una mica sobre desenvolupament web sense haver de comprar eines de desenvolupadors cares. Ara ja sabeu com, aneu a jugar!
