Vedere il codice di un sito web

Vedere il codice di un sito web è una delle pratiche più comuni fra i designer. Tutti i browser moderni offrono la possibilità di analizzare la struttura di una pagina web in due modi: dal codice sorgente o attraverso i Developer Tools.

Vedere il codice di un sito attraverso la sorgente della pagina

Proviamo ad andare sul sito creativecode.it…
A questo punto, come avete avuto modo di vedere nelle scorse lezioni, il server ci invia una serie di files HTML, CSS e Javascript.

Man mano che il browser scarica dati dal server, andrà a montare la struttura del documento HTML assieme al foglio di stile ed i vari script. Al termine del processo vedremo il rendering completo della pagina.

A questo punto, possiamo decidere di visualizzare tutto il codice che compone la homepage.

  • Clicchiamo con il tasto destro del mouse su un punto qualsiasi della pagina;
  • Selezioniamo la voce “Visualizza sorgente pagina” (CTRL + U);

La finestra che si aprirà corrisponde letteralmente alla radiografia della pagina web. Testi, immagini, video, bottoni, form e tutto quello che possiamo trovare navigando in una pagina, deve essere scritto qui.

  • Cerchiamo nel codice il titolo della guida che è in evidenza su Creative Code attivando la funzione di ricerca del Browser con CTRL+F;

Chrome ci evidenzia in giallo la stringa ricercata. Questa stringa, nel contesto del codice, non è nient’altro che il contenuto di un elemento HTML che descrive il formato di un titolo.

Anche se analizzeremo nelle prossime lezioni la sintassi degli elementi HTML, possiamo già osservarne la forma attraverso i Developer Tools

Vedere il codice di un sito con l’ispeziona elemento di Google

I Developer Tools sono gli strumenti che gli sviluppatori utilizzano in fase di implementazione di un sito web.

Accediamo alla Chrome Developer Tools facendo nuovamente click con il tasto destro del mouse sulla pagina e selezioniamo questa volta l’opzione Ispeziona.

Quello che appare in basso è il pannello degli elementi della Developer Tools. Possiamo notare fin da subito delle affinità con la scheda che ci mostrava il codice sorgente della pagina.

Se proviamo a portare il cursore su alcune righe di codice, possiamo riscontrare tuttavia delle differenze con la visualizzazione cruda e scarna del codice sorgente. In base alla riga evidenziata con il passaggio del mouse, il browser mostra un riquadro nella pagina che è relativo al contenuto descritto da quella porzione di codice.

Vedere il codice di un sito web attraverso questo sistema è una necessità per i designer, perché permette di analizzare attentamente il sito e di effettuare delle prove di editing che accelerano il flusso di lavoro.

Developer Tools: Il Cursore di Selezione

Possiamo vedere il codice di un sito dalla developer tools in modo ancora più efficiente, utilizzando l’apposito cursore di selezione. Questo speciale cursore può essere attivato facendo click sulla prima icona a sinistra del pannello. Con questo strumento non facciamo altro che invertire la funzione del mouse in modo da poter evidenziare l’elemento dalla pagina alla relativa riga di codice.

Editare il contenuto dalla Developer Tools

Adesso non ci resta che provare a modificare la pagina a nostro piacimento! Selezioniamo il titolo di una guida sul sito di Creative Code di modo che il browser possa mostrarci la relativa riga di codice. A questo punto possiamo modificare il contenuto di questo elemento facendo doppio click sul titolo mostrato nella finestra dei Developer Tools.

[immagine]

Come vedete, adesso siete liberi di modificare il titolo originale della guida. Non dimenticate di millantare cotale prodezza mostrando il risultato ad amici e parenti, rimarranno quasi sicuramente shockati da ciò che hanno appena visto! 😀

Ovviamente non è cosi semplice modificare i contenuti di una pagina. 😛 Sapreste spiegare il perché? Pesateci per un attimo, non è così strano se si conosce il reale funzionamento di un sito web.

Ci siete arrivati?

È abbastanza scontato, non possiamo pensare che questo genere di intervento sul codice possa realmente influire nella versione reale del sito fintanto che le modifiche sono state effettuate dal browser e quindi lato client.  Perciò, pur essendo liberi di manipolare i dati in nostro possesso, non possiamo inviare tali modifiche al server.

Ciò che vediamo nel browser, effettivamente, non è che una copia di dati scaricati dal server e montati nel nostro browser. Dalla nostra finestra siamo liberi di fare ciò che vogliamo con il sito web perché tutte le modifiche che possiamo fare saranno visibili solo nella nostra copia del sito.

Tutta la magia svanirà quando invieremo una nuova richiesta al server, aggiornando la pagina. Le nostre modifiche saranno perse e… il trucco svelato (shh, potete anche non dirlo a nessuno).

Nella prossima lezione parleremo del linguaggio HTML e scopriremo le evoluzioni che ha compiuto nell’arco degli anni, allo scopo di conoscere le figure e le organizzazioni principali che dettano la linea su come deve o dovrà essere internet. 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *