Come confezionare una semplice pagina HTML nella PirateBox – #loptis

Clicca qui per scaricare la versione in PDF.


Questo è il terzo dei tutorial che corredano le PirateBox.

localizzazione della cartella destinata ad ospitare i contenuti nella piratebox: ovvero PirateBox/SharedIntendiamoci, la PirateBox può essere utilizzata semplicemente copiando i propri contenuti nella cartella PirateBox/Shared della penna USB. Ma esistono altre possibilità, vediamone alcune.

1. Opzione minima

Vuoi usarla e basta. Bene:

  1. Preparo i contenuti nel mio computer e li trasferisco nella cartella PirateBox/Shared della penna USB – smonto correttamente la penna: mai tirare fuori una penna USB senza averla prima smontata con il sistema operativo, quale esso sia!
  2. Attivo la PirateBox come descritto nel primo tutorial.
  3. Dico ai presenti (classe, conferenza…) di cercare la rete wireless PirateBox – Share freely e caricare la pagina http://piratebox.lan (inutile cliccare qui: tornereste su questa pagina, a meno che non abbiate una PirateBox accesa nei pressi…)

Poi usare… lezione, seminario o quello che è…

Breve nota sugli strumenti di editing

Prima di affrontare le prossime opzioni, occorre ricapitolare qualche informazione sugli strumenti di editing, ovvero gli strumenti che consentono di lavorare sui testi, generalmente parlando. I più non vedranno il problema: c’è Word! Invece il problema c’è. I word processor sono nati per svolgere i compiti tipici di un ufficio, non a caso i pacchetti software che li includono hanno nomi tipo QualcosaOffice. Per un word processor, un documento non è solo un testo, ma anche un insieme di istruzioni su come quel testo debba apparire. E mentre il testo che voi avete scritto è codificato in modo universale all’origine – l’avete scritto in italiano, che è uno “standard” riconosciuto! – e magari è codificato in modo universale anche dal punto di vista informatico – se l’avete scritto in formato testo piano, per esempio salvandolo con codifica UTF-8 – non è altrettanto universale se lo producete con un word processor. Infatti, il file che questo produrrà, sarà codificato in un modo specifico di quel word processor. Non è detto che quel modo andrà bene per un altro word processor: la famosa questione della compatibilità.

Certo, se chiedo al word processor di esportare il documento in formato HTML, è probabile che lo farà, ma bisogna vedere come lo fa. In ogni caso chiariamo subito che Word non è il più adatto allo scopo. Ma allarghiamo un po’ l’orizzonte, descrivendo le varie categorie di strumenti dal punto di vista di colui che vuole produrre un documento scritto in HTML.

  • Editori di testo – Esempio: Blocco note di Windows. Gli editori di testo veri e propri scrivono solo testo, niente grafica, niente formattazione, niente di niente. Li cito perché è da lì che si parte. Ho visto programmatori geniali usare solo il Blocco note.
  • Editori di codice sorgente – Anche questi scrivono solo testo ma sono dotati di numerosi strumenti che facilitano la scrittura del codice, spesso per una grande varietà di linguaggi diversi. Non sono word processor di serie B, anzi, spesso sono software estremamente potenti e complessi. In un certo senso sono editori che “conoscono” la sintassi dei linguaggi di programmazione e di codici di markup (come quello di HTML). Non producono testi formattati graficamente. per adoprarli si deve fare la fatica di conoscere un po’ di codice. Basta poco ma è pur sempre una fatica in più, tuttavia ci si trova nella condizione di controllare totalmente quello che succede. Ogni volta che vuoi fare qualcosa di più, ti devi solo accollare la fatica di vedere come si fa, e in rete si trova quasi sempre subito come si fa. E quando hai visto come si fa, sei entrato in possesso di una conoscenza universale, come avere imparato a scrivere una cosa in una lingua parlata in tutto il mondo, una conoscenza che potrai spendere in qualsiasi altra occasione. Meno comodità ma più libertà.
  • Editori HTML di tipo WYSIWYG – Questi sono editori che appaiono come un word processor, ma sono orientati alla produzione di pagine Web. L’acronimo WYSIWYG vuole dire What You See Is What You Get: quello che vedi è quello che ottieni. In realtà non è sempre del tutto vero. Ti risparmiano l’impegno di lavorare direttamente con il codice, ma ti obbligano ad accettare le loro logiche e non è sempre del tutto vero che il risultato sarà quello che stai vedendo mentre editi. In questo caso, ogni volta che vuoi fare qualcosa di più, devi imparare come si fa in quel sistema e talvolta anche se si può fare.  Certo, anche in questo caso avrai acquisito una conoscenza in più, ma non sarà altrettanto universale, bensì specifica di quel sistema. Se cambierai editore dovrai rivedere il tutto.  Più comodità ma meno libertà.
  • Word Processor – Non sono editori HTML perché non sono dotati di strumenti che facilitano la scrittura di testi HTML, ma alcuni di essi consentono di aprire, editare (come fosse un qualsiasi altro documento) e salvare i file HTML. Questo vuol dire che tu scrivi una pagina come hai sempre fatto, infiorettandola con tutti gli abbellimenti che vuoi, poi quando chiedi di salvare in formato HTML, il sistema produce un file codificato in HTML. Lo fa anche Word, ma introducendo una quantità di codice esagerata. Pessimo. Invece la versione HTML prodotta da Write di LibreOffice è discreta. Siamo sempre nell’ambito di più comodità ma meno libertà. Tuttavia, se il codice HTML prodotto dal word processor è più facilmente leggibile, tu avrai una maggiore possibilità di andare a vedere se c’è qualcosa che non ti torna. Mi sono documentato e ho fatto un po’ di prove: LibreOffice ci offre un compromesso accettabile. La seconda opzione che stiamo per vedere è basata su questa soluzione.

Se qualcuno vuole sbirciare in una lista dei sistemi di editing esistenti, può andare a vedere questa pagina che ho adattato da wikipedia.

In ultimo, esistono anche numerosi servizi web che offrono l’opportunità di testare il codice. Giusto a titolo di esempio, uno è questo.

2. Opzione facile

Una soluzione relativamente semplice, e ai nostri fini sufficientemente efficace, può essere appunto quella di usare il word processor Write, che fa parte della suite di applicazioni per ufficio LibreOffice. I vantaggi sono i seguenti:

  • Lo sanno usare tutti: chi usa Word non può non sapere usare Write. L’ho verificato inserendo l’obbligo di usarlo per scrivere i compiti, nelle classi di informatica a medicina: quattrocento studenti hanno scaricato LibreOffice e l’hanno usato senza problemi
  • Carica i documenti codificati in HTML e li salva producendo un codice relativamente pulito
  • Esiste per tutte le piattaforme: Windows, Mac OSX, Linux
  • È scaricabile e legalmente utilizzabile da chiunque, inoltre costa 0 €

È veramente facile. Puoi usare come punto di partenza questo semplice file: AAA-INDICE.html. Lo potrai anche prendere dalla penna USB che riceverai, è lo stesso. Lo carichi in Write, lo modifichi come desideri, poi lo (ri)copi nella cartella PirateBox/Shared della penna.

Vediamo ora qualche aspetto particolare che potrebbe tornare utile a qualcuno.

Write, sebbene si comporti come qualsiasi word processor, ti consente in qualsiasi istante di vedere il codice HTML. Non solo, volendo puoi anche continuare a editarlo nella versione con il codice in chiaro. Ecco come si fa a passare alla versione con il codice HTML in chiaro [Utile nota aggiunta da Claude: August 28, 2014 at 3:54 pm]:

pulsante per passare al codice html
Il pulsante per passare alla versione con codice HTML in chiaro è evidenziato dal cerchio verde. Clicca l’immagine per vederla meglio.

Ecco come appare il codice:

come appare la pagina in codice HTML
Sempre nel cerchio verde il pulsante per tornare alla versione grafica.

Volendo si può saltare da una versione all’altra anche attraverso il menu:

come andare alla versione in codice HTML attraverso il menu

Per preparare l’indice commentato, è importante saper comporre un link. Vediamo come si fa in LibreOffice usando l’apposito pulsante:

come inserire un link

E qual è la corrispondente voce di menu:

fare un link attraverso il menu

Infine, come esempio di una normale operazione di editing, supponiamo di voler aggiungere una lista al documento. Mostro qui solo la parte di testo su cui lavoriamo e evidenzio con il rettangolo verde la parte aggiunta:

aggiungo una lista al documento

E vediamo come è venuto il codice corrispondente:

come è venuto il codice della lista

Ecco, questo esempio server anche a vedere cosa intendo con “codice pulito”: più o meno quello che avrei scritto a mano.

In ultimo, non sarebbe male andare a leggersi la pagina che ho chiamato Semplice pagina HTML che si autodescrive, pensata per chi sceglie la terza opzione, quella “manuale”. In particolare per quanto riguarda la corretta costruzione dei link che puntano alle risorse nella PirateBox – il link precedente punta all’inizio del documento, se preferisci invece andare direttamente alla sezione sui link, clicca qui.

3. Opzione “manuale”

Questo metodo consiste nel lavorare direttamente sul codice HTML del  file AAA-INDICE.html.

Se ti interessa avere il controllo completo di come appare il documento e un po’ meno l’aspetto grafico, allora questo è il tuo metodo. Dovrai essere disposto a impegnarti un po’ di più nell’editarlo, ma avrai forse meno grane, ovvero, ti accontenti di pochi effetti speciali ma sei sicuro di ottenere quello che vuoi.

Se invece ti piace giocare con ricche opzioni di formattazione grafica, quali quelle offerte nei sistemi di word processing, oppure non ti va di mettere le mani in un po’ di codice HTML, allora probabilmente è più adatta l’opzione precedente.

Per rivedere o ripassare i rudimenti di HTML, puoi utilizzare i materiali predisposti in questa sorta di kit di preparazione. Ci trovi la pagina sui rudimenti di HTML, la lista degli editori per HTML e un file AAA-INDICE.html.

X. Opzione vuota

Tu potresti avere delle idee migliori. Le metteremo qui.

Conclusione

Con questo terzo tutorial dovresti essere già in grado di preparare i contenuti per la tua PirateBox. È vero, salvo casi particolari, non ce l’hai ancora – conto di farle arrivare a tutti i partecipanti iscritti fino ad ora entro la fine di settembre. Tuttavia, i contenuti e l’indice commentato possono essere preparati tranquillamente prima. Quando avrai la PirateBox si tratterà semplicemente di riversare il tutto nella cartella PirateBox/shared della penna USB.

3 thoughts on “Come confezionare una semplice pagina HTML nella PirateBox – #loptis

  1. Claude Almansi says:

    Grazie Andreas: molto chiaro.

    Solo una cosa a proposito di LibreOffice: quando si lancia il programma, appare una scelta delle varie cose che si possono fare con le sue varie applicazioni, e per Write, questa scelta comprende soltanto “Testo”, cioè la versione di Write dove non puoi vedere la sorgente. Di solito scelgo quell’opzione “Testo”, poi da lì faccio File > Nuovo > Documento HTML, che fa quel che dici tu, con la possibilità di vedere e modificare la sorgente.

    Poi per chi fosse anche tentato di adoperare Documento HTML di Write per preparare un post di blog, copiando la sorgente in quella dell’editore del blog: purtroppo a volte (con WordPress ad es) quegli editori di blog mantengono i ritorni a capo della sorgente come se ci fosse un tag di ritorno a capo, con risultato brutto. Quindi se si vuol far questo, occorre togliere tutti quei ritorni a capo – ci sono varie applicazioni per farlo in un colpo: ad es. uso quella online http://www.textfixer.com/tools/remove-line-breaks.php .

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...