Modificare un sito web online in tempo reale

Se sei un aspirante webmaster, o semplicemente se vuoi giocare a cambiare la grafica di un sito non tuo, agendo direttamente online senza dover installare alcun programma aggiuntivo sul tuo pc, allora sei capitato nel post giusto.

Infatti, al giorno d'oggi è possibile modificare un sito online, in tempo reale, direttamente dal browser nel quale lo si sta guardando.
Vediamo subito come fare e che browser utilizzare.

Come modificare un sito web online in tempo reale

Per poter cambiare lo stile grafico di un sito internet in tempo reale, apri il tuo browser di fiducia e digita l'indirizzo del sito web che vuoi editare.

Attualmente, l'operazione che andrò a spiegarti è possibile tramite diversi browser, tra cui: internet explorer, opera, firefox, chrome.
Per gli altri browser comunque, è sicuramente possibile installare dei componenti aggiuntivi per poter fare queste cose.

A prescindere dal browser utilizzato, la procedura è sempre la stessa:

1. Posizionarsi con il mouse sopra l'elemento del sito da modificare
2. Cliccare con il tasto destro e scegliere l'opzione: analizza elemento (firefox), ispeziona (chrome), esamina elemento (explorer), ispeziona elemento (opera).

Facciamo dunque finta di voler modificare un sito da firefox, clicchiamo con il tasto destro sopra l'elemento desiderato e scegliamo la voce analizza elemento.

Sotto in basso alla finestra del browser, si aprirà una sorta di nuova finestra operativa, divisa in più tab.
A sinistra ci sarà il codice html da modificare a mano, mentre a destra ad esempio, ci sarà la sezione inerente ai fogli di stile.

Quindi potrai decidere se agire direttamente nell'html del sito, aggiungendo volendo anche nuove righe di codice, oppure andare a modificare i fogli di stile, cosa decisamente più semplice.

Facciamo ad esempio finta di voler cambiare il colore della testata del mio sito web.
Dovrò posizionarmi su di esso con il mouse, cliccare con il destro e vedere come si chiama la classe css usata in questo caso.
Nel mio esempio specifico si chiamerà #header, ed io dovrò semplicemente cambiare il codice esadecimale attuale, con uno nuovo a mio piacimento, nell'attributo background.
Quindi, più nel dettaglio, andrò a cambiare:
background: #2c4584;
con
background: #FF00FF;
Per ottenere questo discutibile risultato:

Grazie a questa opzione ormai integrata su quasi tutti i browser, sarà possibile cambiare i css in tempo reale ad un sito, vedendo a video immediatamente il risultato.

Questa cosa è molto utile primo perchè possiamo farlo su qualsiasi sito internet anche non nostro, andando a modificare una pagina web senza avere le credenziali d'accesso del server che la ospita (ovviamente la modifica effettuata verrà vista solo da noi e sparirà una volta chiuso il browser).
Poi perchè può essere molto utile per testare un sito web senza doverci di fatto mettere mano, da qualsiasi pc o luogo in cui ci si trovi, senza bisogno di aver con sé i propri strumenti di sviluppo, ma solo tramite la conoscenza dell'html.

Ovviamente, più sei bravo con l'html ed i fogli di stile, e più modifiche riuscirai a fare in tempo reale sul sito web analizzato dal browser.
Infine volendo, potresti anche decidere di salvarti il codice html o css che hai appena generato online dal tuo browser, per poterlo riutilizzare in seguito, caricandolo online e rendendo effettive le modifiche al sito.

Un'ulteriore utilizzo di questa procedura per modificare un sito dal browser, è quella a scopi umoristici.
Infatti, potresti ad esempio aprire il sito dell'Ansa, modificare una notizia cambiandone il titolo e mettendo la foto di un tuo amico, e poi chiamarlo davanti al tuo pc per fargli prendere un colpo :)