Accertarsi di avere installato X-Ray Goggles

Ogni volta che si visita una pagina web di cui si vuole esaminare gli elementi che la compongono per poi rielaborarla in base alla propria creatività, fare clic sul pulsante X-Ray Goggles sulla barra dei segnalibri e iniziare a modificarla.

Ispezionare gli elementi

Dopo aver attivato X-Ray Goggles ci si accorgerà che, al passaggio del puntatore del mouse, la sezione della pagina sottostante verrà evidenziata da un riquadro vivacemente colorato.

Questi riquadri rappresentano gli elementi della pagina web. Facendo clic su uno dei riquadri, verrà attivato l'editor di codice in cui sarà possibile modificare l'elemento apportando le proprie variazioni.

Iniziare la personalizzazione

A seconda del tipo di elemento selezionato, si possono eseguire diverse forme di personalizzazione.

Modificare il testo

Selezionare un blocco di testo e, nell'editor di codice, modificare il testo originale in base alle proprie esigenze. Nel pannello principale, in alto nella pagina, verrà visualizzata un'anteprima delle modifiche apportate.

Sostituire un'immagine

Tutte le immagini utilizzano il tag <img> nel proprio codice HTML. È possibile osservare che a ogni tag <img> corrisponde l'indirizzo URL in cui al momento è archiviata l'immagine.

È possibile sostituire l'immagine originale con una a propria scelta. È sufficiente aprire una nuova scheda del browser e cercare l'immagine che si vuole utilizzare, fare clic su di essa con il tasto destro del mouse e selezionare Copia indirizzo immagine.

Per vedere la nuova immagine nell'anteprima è sufficiente sostituire nell'editor di codice l'URL dell'immagine originale con quello appena copiato.

Modificare un collegamento ipertestuale

È possibile far puntare i collegamenti ipertestuali verso qualunque destinazione si desideri.

Tutti i collegamenti ipertestuali iniziano con il tag <a href=" seguito dall'URL a cui punta il collegamento. Per modificare il link di destinazione, cambiare l'URL contenuto tra le virgolette a doppio apice. È anche possibile modificare quello che viene chiamato "anchor text" (detto anche testo di ancoraggio o testo del link), ovvero il testo visualizzato al posto dell'indirizzo del link (ma ad esso associato) che anticipa al visitatore il contenuto della pagina di destinazione. Questo particolare testo è spesso visualizzato con un carattere (font) sottolineato di colore blu.

Confermare e pubblicare

Se si è commesso un errore, per rimediare, è possibile fare clic sul pulsante Cancel posizionato a destra dell'editor di codice.

Quando si è soddisfatti delle modifiche apportate, premere il pulsante verde Update per vedere come compare la pagina.

Per pubblicare il proprio lavoro, premere il tasto p sulla tastiera oppure il pulsante Publish sulla barra laterale destra.

Se si è registrati e si è effettuato l'accesso in teach.mozilla.org, la personalizzazione di Goggles, una volta pubblicata, sarà disponibile nella pagina "Your Projects" e verrà messo a disposizione un URL per condividere il progetto con gli amici.