HTML – 2 – Gli strumenti #linf14

Gli strumenti per lavorare con i documenti HTML sono due: uno per la composizione e uno per la visualizzazione. I documenti HTML si visualizzano con il navigatore (browser) delle pagine Web: Firefox (tutti i sistemi), Chrome (tutti i sistemi), Chromium (Linux), Internet Explorer (Windows), Safari (Mac), Opera (Linux) sono i più comuni. Per comporre i documenti HTML ci vuole un editore di testo, che è una cosa diversa da un word processor, tipo Write di LibreOffice o OpenOffice, Word di MS Office.

Tocchiamo la cosa con mano – scrivo le istruzioni per Windows, che è il sistema più diffuso. Crea da qualche parte nel tuo sistema una cartella per fare gli esercizi, vai in Avvio (pulsante in basso a sinistra con la “bandiera” di Windows), scrivi Blocco note (Notepad) e premi Invio (chi ha il Mac deve aprire il programma Textedit e porlo nel modo Testo, non RTF, c’è un’apposita voce di menu). Parte così l’editore di testo standard di Windows. Con il Blocco note così aperto scrivi il testo “pippo” – giusto questi 5 caratteri, senza l’Invio, salva il file dandogli il nome pippo.txt nella cartella che avevi creato. Apri quindi il tuo Word processor preferito – non importa quale – poi scrivi lo stesso testo “pippo”, senza premere Invio, e salva nella medesima cartella il file con il nome pippo.docx o pippo.odt o quello che vuoi, a seconda del word processor che hai usato. A questo punto abbiamo scritto la stessa identica cosa in due modi diversi, giusto? Guardando nella cartella che contiene tali file, confronta la dimensione dei file, cliccando con il tasto destro del mouse sul nome, poi scegliendo la voce Proprietà in fondo al menu volante che si sarà aperto. Io l’ho fatto in questo momento ed ho ottenuto 5 byte per il file pippo.txt e 11417 byte per pippo.docx!

Anche per chi non ha chiari i concetti di codifica dei caratteri (chi vuole può provare a chiarirsi le idee leggendo questo articolo) la relazione fra la lunghezza del file pippo.txt e il numero di caratteri che compongono il testo pippo è evidente: sono ambedue 5. È sempre confortante quando le cose tornano. Potete verificare aggiungendo qualche carattere e vedere che succede. Perché invece la lunghezza del file pippo.docx è enormemente maggiore? La bellezza di 11417 bye per avere scritto esattamente lo stesso testo di 5 lettere!

Ebbene, è proprio qui la differenza: un editore di testo lavora solo sui caratteri del testo e solo quelli scrive sul file, il word processor invece ti consente di lavorare sui medesimi caratteri ma si aspetta che tu definisca anche come debba apparire il testo, ecco perché tutti quei comandi sulla formattazione di caratteri, paragrafi, pagine ecc. Tutte informazioni che da qualche parte devono pur stare e che, nell’esempio che abbiamo appena fatto, stanno in quei 11417 – 5 = 11412 byte. Non importa che non si sia specificato nulla scrivendo pippo con Word, lui scrive comunque nel file tutte le informazioni, anche se queste sono tutte di default, ovvero quelle ovvie, che non si sta a specificare. Come dire che i word processor nei file scrivono testo e metatesto mentre gli editori di testo scrivono solo il testo. I Word processor ti fanno vedere il testo come dovrebbe apparire nella versione finale – WYSIWYG: What You See Is What You Get, quello che vedi è quello che ottieni – mentre lo componi. Lavorando invece con gli editori di testo, per esempio con file HTML (ma esistono anche altre codifiche simili), siamo noi che scriviamo il metatesto sotto forma di comandi HTML frammisti al testo vero e proprio. Poi per vedere il risultato dobbiamo vedere il file con un navigatore.

Esistono anche software di tipo WYSIWYG per lavorare in HTML ma si tratta di software complessi utilizzati da chi produce siti Web. Non è il nostro caso, perché noi siamo invece interessati a sporcarci un po’ le mani, per i motivi elencati nell’Introduzione. Va anche detto che ci sono anche professionisti che preferiscono lavorare con gli editori di testo, per avere il controllo completo del codice prodotto. Sì, perché questo è un po’ il problema dei software WYSIWYG: tanto più si accetta la comodità quanto più si deve anche accettare che il software prenda delle decisioni al nostro posto, e non è sempre detto che queste siano quelle che noi preferiamo. Anche Word e i suoi simili, fra le mille cose che possono fare, possono anche leggere file HTML e scriverli ma lo fanno creando un codice HTML molto arzigogolato e per nulla ottimale – questo articolo (in inglese) analizza un po’ il problema.

Anche qui possiamo sperimentare di persona con un esercizio. Apri nel tuo navigatore questa semplice pagina. La struttura si commenta da sola: l’ho scritto nel più semplice ancorché sintatticamente corretto dei modi. È il momento di imparare un’altra cosa: Quando guardi una pagina Web tu ne puoi vedere anche il codice! In tutti i navigatori e in tutti sistemi si può visualizzare con una semplice combinazione di tasti: Ctrl-u con Windows e Linux e Mela-u con il Mac. Se confronti il testo con il suo codice inizi a farti un’idea di come funzioni la codifica HTML. Naturalmente, le pagine “vere” hanno un codice molto più complicato, puoi provare con questo stesso documento, che mi sto comunque sforzando di scrivere in maniera semplice pur ottenendo una qualità del testo che mi pare buona. Bene, puoi salvare nella solita cartella di lavoro il codice HTML che hai appena visualizzato con la combinazione Ctrl-u, e dopo avere fatto un clic sulla finestra per essere sicuro che sia quella attiva, utilizzando quest’altra combinazione di tasti: Ctrl-s (Mela-s per il Mac). Appare così la classica finestra di dialogo che ti consente di scrivere il file dove vuoi e con il nome che vuoi. Una volta fatto questo, vai nel tuo word processor (Word o altro) e apri tale file. Fin qui nulla di diverso dal solito, dovresti vedere il documento come lo hai visto nel navigatore. Le cose si complicano quando provi a salvare il file dandogli un altro nome (comando Salva con nome): il nuovo file è molto più grande, se lo apri con l’editore di testo ci trovi una marea di codice che prima non c’era e non solo, è apparsa anche una cartella che contiene altri file! È il modo di gestire i documenti HTML di Word – da dimenticare se ti interessa il controllo su ciò che fai.

Blocco note per Windows e Textedit per Mac non sono gli unici editori di testo. Ve ne sono tanti e anche molto sofisticati, pensati proprio per chi scrive software. Vedere in questa pagina per avere un’idea di quanti ce ne sono! Se dovessi dare un’indicazione: Notepad++ per Windows e TextWragler per Mac mi sono sembrati ottimi, avendo avuto occasione di usarli entrambi. Ma non vi sono pareri assoluti in queste cose, le opinioni si sprecano. La cosa migliore è provarne alcuni e rimanere con quello che ci sembra meglio. Una caratteristica che quasi tutti questi editor più sofisticati hanno è la colorazione sintattica (evidenziazione sintattica, syntax highlighting), vale a dire l’uso dei colori per differenziare gli elementi di un certo tipo di codice. Una cosa semplice ma di grande utilità quando si deve rovistare in codici lunghi e complessi, ma non solo.

A questo punto potrebbe essere venuto il momento di esercitarsi un po’, provando qualche variante intorno all’esempio semplice visto, soprattutto con lo scopo di sperimentare l’uso degli strumenti. Proponiamo due metodi e vi invitiamo a sperimentare entrambi, nella successione sotto indicata.

1. Nel laboratorio a casa
   È semplice. Scrivi la tua pagina HTML con Blocco note o un altro editore di testo che ti sei divertito a scaricare e salvala con un nome che abbia estensione html, ad esempio, se vuoi chiamare il file pippo, quando lo salvi specifica il nome pippo.html. Così ci si assicura che il sistema operativo tratti correttamente il file in rapporto al suo contenuto. Poi apri il navigatore (Firefox, Chrome o quello che vuoi) e nel suo menu seleziona File->Apri… sì perché nel navigatore si possono tranquillamente caricare anche file HTML che si trovano sul proprio computer e non solo in Internet! Nella finestra di selezione del file vai a cercare quello che hai appena salvato e caricalo. Se ti sembra di dover cambiare qualcosa, torna nell’editore di testo, fai i cambiamenti, risalva il file e poi ricaricalo nel navigatore: in quest’ultimo si può dire di ricaricare una pagina anche con la combinazione di comandi Ctrl-r in Windwos e Mela-r nel Mac. È molto probabile che tu debba seguire questa sequenza reiterate volte prima che tu ti ritenga soddisfatto. Se vuoi velocizzare il workflow puoi divertirti a fare come fanno i professionisti, che toccano il meno possibile il mouse; ad esempio la sequenza Sono nell’editore e salvo il file -> Vado nel browser -> Ricarico il file nel Browser -> Torno nell’editore si può realizzare tutta sulla tastiera: Ctrl-s -> Alt-Tab -> Ctrl-r -> Alt-Tab e così via. Questo perché Alt-Tab consente di saltare ciclicamente da un’applicazione all’altra, fra quelle aperte. La prima che offre con il primo Alt-Tab che fai ti riporta all’ultima che avevi visitato, quindi se ripeti più volte il comando, salti avanti e indietro fra le ultime due applicazioni aperte. Se invece ne hai molte e vuoi scorrere alle altre devi tenere premuto il tasto Alt e battere successive volte il tasto Tab.
   Quando sarai soddisfatto del risultato finale, mandami – per ora via email – il tuo file ed io lo caricherò nel mio server in maniera che lo si possa mostrare a tutti.
2. Nel blog della IUL
   Probabilmente hai già aperto il tuo blog nell’ambiente IUL. Se non l’hai ancora fatto aprilo ora. In ogni caso inviami l’indirizzo URL del blog (per esempio il mio è http://www.iuline.it/ambiente/blog/iamarf/, il tuo sarà qualcosa del tipo http://www.iuline.it/ambiente/blog/qualcosadituo/. Se per caso hai già un altro blog e vuoi usare quello va bene lo stesso. Poi vi insegnerò un modo per tenere traccia di tutti questi blog. Ora però continuiamo l’esercizio. Apri l’editore di testo sulla pagina HTML che hai scritto nella prima parte. Evidenzia tutto e copiala nella clipboard – ti sto dicendo di fare il famoso copia/incolla – Con la combinazione Ctrl-c oppure con la voce di menu Modifica->Copia. Poi loggati nell’ambiente IUL, vai al tuo blog: http://www.iuline.it/ambiente/blog/qualcosadituo/. Inizia la scrittura di un nuovo post. Nella finestra di editing che si apre, selezionate l’icona <> che si trova sinistra. Si apre così una finestra intitolata Source code, ecco, lì dentro copia il tuo codice, con la combinazione Ctrl-v oppure con la voce di menu Modifica->Incolla. Salva e guarda il risultato. Ci potrebbero essere delle differenze rispetto al primo esercizio. Può essere normale. Non ci impazzire, le discuteremo insieme.