HTML – 2 – I miei strumenti e il laboratorio online #linf14

Scrive Gabriella, nel forum IUL:

Sono curiosa di conoscere quale editor ha utilizzato il prof. perchè l’html è pulito e il blog [sito] http://iamarf.ch/ è bello chiaro. Aprendo il codice vedo che ha utilizzato un foglio di stile CSS per definire l’impaginazione, ma non riesco ad individuare con cosa sia stato generato.

Rispondo qui perché la questione è interessante e si presta ad un paio di considerazioni. La prima.

La mia regola è questa: usare lo strumento minimo che consente di conseguire l’obiettivo significativo. Se vogliamo è un corollario delle regole di scrittura di Orwell. Anche con gli strumenti: il superfluo rischia d’esser dannoso.

Nello specifico della domanda di Gabriella, per scrivere i file HTML e CSS uso quasi solo Vim, un editore di testo derivato dallo storico editore vi per Unix, che risale al 1976! Quindi scrivo tutto “a mano”. Inoltre faccio larghissimo uso del copia-incolla, una virtù fondamentale di chiunque scriva frammenti di codice, di qualsiasi tipo. In questo un editore di testo puro ma sofisticato può essere molto utile. La questione è il controllo e, conseguentemente la libertà: sapere esattamente cosa stai facendo. Al contrario, se usi un sistema WYSIWYG (ciò che vedi è ciò che ottieni) tutto sembra molto più facile ma in certe situazioni puoi impazzire perché il sistema non fa quello che che vuoi. Copia-incolla che può essere fra propri frammenti di codice ma anche da codice scritto da altri di cui ci si fidi, sia dal punto di vista tecnico che etico.

Per esempio, i caratteri stilistici delle pagine che vi sto proponendo (per ora in http://iamarf.ch e http://iamarf.ch/iul) li ho tratti dal sito di un mio caro amico: Istituto di Cultura Italiana (in Tbilisi). Mi limito a citarlo perché la sua storia meriterebbe un romanzo piuttosto che un post, malgrado il fatto che abbia la metà dei miei anni. Tommaso è un letterato ma è anche un raffinato autore di software, tanto fuori dalla corrente quanto geniale. Ha realizzato siti web complessi utilizzando solo il Blocco note di Windows. Apprezzo la nitidezza delle sue soluzioni grafiche anche, e forse soprattutto, perché riflettono l’etica limpida che ispira il suo pensiero e le sue azioni. Competenza e visione etica di cui in un paese come il nostro nessuna delle istituzioni che conosco saprebbe che farsene, purtroppo. Infatti ora è in Georgia e pare che si trovi bene.

 

La seconda considerazione attiene a ciò che sto cercando di fare con il server http://iamarf.ch, perché anche questo è emerso nel forum IUL e anche questo può essere di interesse generale.

L’insegnamento che sto tenendo nella Italian University Line si chiama “Laboratorio Informatico” ma il contesto è quello di un’università telematica. Come può essere quindi un laboratorio online? Per di più quando ci ritroviamo…

nozionismo, didattica trasmissiva, classi “pollaio” in Italia, contro learning by doing, costruttivismo e “classi laboratorio” (digitalmente aumentate) in Europa

… come ha scritto Paolo Ferri oggi in Agenda Digitale. Come fare dunque questa cosa? Risposta: facendo (per davvero) cose molto semplici e comunicando molto: – cura della comunità di pratica. Fuori dai piedi tutto ciò che è orpello o sovrastruttura inutile. Invece, varietà di strumenti e soluzioni, alle basi, dritti ai concetti fondanti.

HTML dunque, un po’ di CSS, un brandello di Javascript, forse, giusto per avere un’idea di come sono architettate le cose. Poi altra roba. Non ci interessa la competenza del tecnico – queste persone fanno gli insegnanti – ci interessa la familiarità con la Macchina, la percezione di cosa c’è sotto i bottoni colorati, la capacità di intervenire un po’ più consapevolmente dentro l’editore di un forum, di un blog o di un wiki. La consapevolezza di poter costruire e non solo consumare. Consapevolezza che si potrebbe insegnare anche ai giovani, invece di comprare loro app.

HTML manipolato con editori di testo e visualizzato sul browser del proprio computer: un laboratorio magnifico – tentativi, imparare facendo. Ma così facendo manca ancora la dimensione corale del laboratorio. Ecco che serve un luogo dove “attaccare al muro” i propri lavori per poi discuterli insieme: http://iamarf.ch/iul. Un luogo dove ciò che scrivi è ciò che vedi, non ciò che vedi è ciò che ricevi.

Allo stesso tempo un luogo dove anche l’arrovellìo del docente sia visibile – il laboratorio. Qui si tratta di convertire il marasma di informazioni, frammentato negli anni, dalla forma blog in una più organica. Una sorta di libro in divenire anche se il sottoscritto non scriverà mai un libro, giusto per mostrare quello che si può fare e come si può fare, semplicemente. Ecco quindi che nel medesimo laboratorio andiamo condensando i vari testi sparsi qua in un capitolo introduttivo su HTML: http://iamarf.ch. In tre diverse forme la cui essenza è determinata dallo scopo:

  1. HTML con disegno massimamente chiaro e accessibile, per essere frugato sullo schermo del computer – il regno del link;
  2. EPUB per la lettura su ebook di vario genere, tablet ecc. – testo che si adatta allo schermo sempre diverso – smartphone, tablet, e-reader – come fosse liquido in un recipiente;
  3. PDF per la lettura su carta – pagine “fotografate” per essere riportate sulla carta.

Gli esercizi HTML semplici ma senza limiti vengono poi riportati nel blog. Da qui la trovata di rendere visibili anche dall’esterno i blog che i partecipanti della IUL possono aprire nel loro ambiente. Anzi, da oggi è anche possibile commentare i post dall’esterno. È un fatto notevole: di solito tutto ciò che è istituzionale è chiuso dalle nostre parti. Che succede dunque se si riporta quel codice HTML in un ambiente di pubblicazione, come il blog? Va sempre tutto bene? Oppure no? Occasioni di riflessione, approfondimento, elementi di doma della Macchina.

Forse ci verranno altre idee ma il principio è lo stesso: poca teoria ma applicata tutta, molto dialogo. Non sarà mai come un laboratorio vero ma forse lo sarà di più di tutti quelli veri che non ci sono.


Regole di Orwell per la scrittura efficace.

  1. Non usare mai metafore, similitudini, o figure retoriche che vanno per la maggiore nella stampa.
  2. Non usare mai parole lunghe dove ce ne potrebbe stare una corta.
  3. Se puoi eliminare una parola mantenendo intatto il significato, eliminala.
  4. Non usare mai il modo passivo dove puoi usare anche l’attivo.
  5. Non usare una frase straniera, parola scientifica o di gergo se conosci una parola di uso comune che esprime lo stesso concetto.
  6. Infrangi queste regole prima di scrivere qualcosa di ridicolo.

Torna indietro

6 thoughts on “HTML – 2 – I miei strumenti e il laboratorio online #linf14

  1. Manuela Raso ha detto:

    Cara Gabriella,
    per esperienza ti posso dire che la maggior parte degli editor di siti web, sporcano un po’ il codice HTML (ad esempio FrontPage della Microsoft). Personalmente anch’io non uso strumenti e preferisco lavorare a mano utilizzando strumenti come il buon vecchio blocco note di Windows: quando lavoro ad una pagina web uso uno strumento per crearla velocemente (se non ho tempo) e poi la riapro e ripulisco il codice di tutto quello che non mi piace, oppure lo modifico come voglio io perchè spesso questi strumenti “fanno quello che vogliono loro” ed a me piace che il computer “faccia quello che voglio io”!
    Un altro modo per verificare la bontà del proprio codice HTML e farlo validare. Validare significa che il codice rispetta tutta una serie di regole che lo rendono compatibile anche con browser/strumenti (tipo lettori vocali) per ipovedenti/non vedenti. Il modo migliore per verificare se il proprio codice è validato e cioè accessibile a tutti è passarlo sotto la W3C, che rappresenta lo standard internazionale:
    https://validator.w3.org/
    Le prime volte che l’ho utilizzato mi ha generato una marea di errori che io stessa ho pensato “ma come diavolo ho fatto?”. Poi impari e soprattutto ti organizzi con pagine standard vuote da compilare velocemente, con codice “pulito”.
    Un altro trucco sono appunto i fogli di stile che ti permettono di separare il “contenuto” (la pagina) dal contenitore (le caratteristiche della pagina). Sono divertenti perchè la pagina rimane quella e puoi modificare il modo di vederla semplicemente modificando il foglio di stile. Inoltre ti permette di costruire interi siti senza preoccuparti dell’aspetto finale, che potrai modificare a tuo piacimento, anche alla fine, senza dover correggere ogni singola pagina (pensa quanto temp si risparmia!)
    La mia “bibbia” per quello che riguarda lo standard HTML e CSS è il sito
    http://www.w3schools.com/
    E’ una specie di megadizionario online di tutto quello che concerne la scrittura per il web. Oltre a “corsi” veri e propri hai anche la possibilità di verificare online attraverso dei box “Try it yourself” quello che stai imparando: è proprio il caso del “Learning-by-doing”. Io lo utilizzo anche con i miei ragazzi e lo trovano stimolante e divertente. Unico neo è la lingua inglese (per chi ne mastica poco): però è un inglese pulito, semplice, asciutto e tecnico, quindi abbastanza semplice da capire.

  2. nilocram ha detto:

    Ciao Andreas, grazie per i tuoi post sempre ricchi di stimoli.

    Qualche settimana fa ho tradotto “Vim per gli esseri umani” (https://medium.com/@23cose/vim-per-gli-esseri-umani-24519ed5d22f) un articolo di Vincent Jousse sulla sua esperienza di scrivere un manuale sull’editor Vim, passando dal copyright alle Creative Commons.

    Forse l’articolo potrebbe interessarti e magari si potrebbe pensare insieme ai tuoi studenti e ai tuoi follower a una traduzione collaborativa di qualche pezzo del manuale.

    Buon lavoro

    Roberto

    1. Andreas ha detto:

      Grazie mille: scaricato, flattrato e contribuito.

      Mi garberebbe contribuire alla traduzione ma le tipologie di studenti che ho io sono lontane da Vim. Però tengo a mente… 🙂

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...