Vediamo un po’ di HTML – #loptis

Clicca qui per scaricare una versione in pdf

Insistiamo un po’ con l’HTML. Non per sviluppare siti web ma per essere più autonomi. Per familiarizzare in un modo più “letterario” con la Macchina. Per non terrorizzarsi qualora incontrassimo qualche altro tipo di codice – nei wiki per esempio, che useremo. E perché no, per pavoneggiarsi con i nativi digitali, in realtà quasi sempre molto incompetenti, meri cliccatori compulsivi – per favore non chiamateli nativi digitali dice Paolo Attivissimo, brillante giornalista esperto di tecnologie informatiche e bufale mediatiche – ha ragione, e noi dobbiamo sviluppare una familiarità con il mezzo che ci consenta di superare la loro di familiarità, dal fiato corto – dovevamo andare a fare il nostro mestiere di educatori nel cyberspazio, no?  Ma anche per riconoscere la genialità dove questa appare – ho conosciuto coders adolescenti tanto geniali quanto misconosciuti a scuola; e come facciamo a ravvisare quella genialità lì, se non abbiamo la più pallida idea di cosa ci sia sotto a tutti quei click?

Bene, nel video che segue si fanno tre esempi di come la manipolazione del codice consenta di ampliare le possibilità dell’editore visuale per scrivere i post nel servizio di blogging:

  1. soluzione di un piccolo problema di editing, inerente al grassetto che si estende dove non si vorrebbe – uno dei tanti problemi che possono emergere con i sistemi WYSWYG – ciò che vedi ciò che ottieni… ma non sempre
  2. come comporre un sottoelenco, che l’editore visuale non consente di fare
  3. come inserire una tabella, che l’editore visuale non consente di fare

Nel video si mostra anche come consultare la W3School, una preziosa risorsa per imparare l’HTML e molto altro ancora.

Vi propongo di esplorare i tag che potete usare quando scrivete i post nei vostri blog. Elenco qui di seguito un sottoinsieme di tag che quasi sicuramente potete usare nei post…

immagine di vari codici HTML

e il loro effetto…

grassetto

anche questo è grassetto

corsivo (italic)

anche questo è corsivo (italic)

Titolo livello 1

Titolo livello 2

Titolo livello 3

Titolo livello 4

Titolo livello 5
Titolo livello 6
  • questo
  • codesto
  • quello
  1. questo
  2. codesto
  3. quello

Un link

Un’immagineSmiley face

A proposito di tag, Martina aveva scritto in http://piratepad.net/code-lab-loptis/:

Usando Bloc notes il browser legge qualunque frase anche se non è marcata con <p> di paragrafo. Mi aspettavo di non visualizzare sul browser nessuna scritta senza tag. Boh!

Il blocco note non c’entra in questo. Accadrebbe lo stesso con qualsiasi altro editore. La questione è inerente alla natura dello standard HTML, che è permissivo, vale a dire che cerca comunque di mostrare il testo, anche se la codifica HTML non è perfetta. Ad esempio, anche se mancano i tag che designano i paragrafi: <p> e </p>. Provate a vedere la differenza scrivendo delle frasi con e senza tag <p> e </p>.

Qui trovate la lista dei tag HTML che funzionano in WordPress.com. Non ho trovato qualcosa di simile per Blogger, forse la troverà qualcuno di voi. Gli arditi e i curiosi possono andare a vedere e studiare le caratteristiche dei vari tag nella W3Schools.

Nei commenti ai post si possono usare solo alcuni di questi tag, link, grassetto e corsivo, essenzialmente. Due riferimenti a riguardo: uno e due.

Per fare una vera “esperienza HTML” potete usare il laboratorio domestico: computer, browser e Blocco note. Aggiungetevi la W3Schools, un pizzico di curiosità, ardimento quanto basta e potete andare già molto lontano. Avete un problema che riguarda, che so, la scrittura di una tabella? Andate in W3Schools, trovate la sezione dedicata alle tabelle HTML, cercate di capire ciò che vi interessa, copiate in un file i pezzi di codice di esempio e iniziate a cambiare questo o quello, verificando passo passo: ipotizzare, provare, correggere e via così iterando.

Poi, una volta ottenuto un certo tipo di risultato, potete provare a trasferire il codice in un post del vostro blog per vedere che succede: di solito succede quello che vi aspettate, altre volte invece no. È normale: i servizi web accettano le proposte ma vogliono avere l’ultima parola. Ad esempio può succedere che una tabella che io ho codificato correttamente in maniera da avere un doppio bordo esterno, una volta piazzata in un post perda il doppio bordo. Questo potrebbe dipendere dal tema che, per uniformare la rappresentazione ad un certo criterio estetico, altera il codice. Uno può decidere quante energie spendere per risolvere il problema – lascio perdere, non mi importa molto – provo un tema che non mi alteri il bordo – lascio perdere la tabella e scelgo un altro sistema per rappresentare i dati…

Ultima cosa. Se qualcuno vuole mostrare a tutti come viene bella la propria pagina, oppure vuole illustrare un problema, per comunicarlo agli altri può copiare il codice nel pad http://piratepad.net/code-lab-loptis/ oppure in un nuovo pad – basta che comunque ce lo comunichi con un commento a questo post.

42 pensieri riguardo “Vediamo un po’ di HTML – #loptis”

  1. Pingback: Nativi digitali, ne siamo certi? | Antomaestra7

  2. D’accordissimo con Attivissimo. Tutto vero.
    La mia riflessione è sul significato che diamo al termine “nativi digitali”. Si riferisce, sì ai nati e cresciuti all’ombra di schermi interattivi, ma forse anche questo significato si è evoluto e non si raccorda più con la conoscenza degli elementi tecnici della Rete… Mi piace pensare a stili di apprendimento partecipativo/digitale (ludico, orientato all’espressione di sé, alla personalizzazione e alla condivisione costante di informazione (sharing) con i pari (peering).

    Rispondi
  3. Pingback: “Il mito dei nativi digitali” | Antomaestra7

  5. bene ,mi sono divertita a giocare con i tag html creando ,spostando ecc.. molto interessante .Ho lavorato sia nel post che nella pagina del blocco note senza problemi …..speriamo di continuare cosi

    Rispondi

  6. Provo a inserire il codice in un post e vedere cosa accade :
    e accade per due volte la magia della trasformazione in testo, la terza volta, non va così. Per stasera mi accontento.
    Nel blog ho lasciato traccia delle prove…
    La matassa pian piano si dipana.
    Grazie
    Giusi Po

    Rispondi

  11. PS Quel che mi colpisce (col senno di poi) nel tuo video è una forte analogia tra la codifica dell’elenco e quella della tabella. Perciò come hai annidato un sottoelenco al punto 2 dell’elenco principale, si potrebbe annidare una sottotabella dentro qualsiasi elemento (dato, cella) della prima tabella, no?

    Beh in un blog forse non sarebbe il caso: i blog fanno già fatica a presentare decentemente tabelle semplici, come dicevi nel post precedente, però l’idea è piacevole lo stesso.

    Rispondi

    1. Ciò che ti ha colpita è una caratteristica fondamentale del mondo del codice: l’incapsulamento di funzionalità in oggetti che puoi combinare come vuoi con altri oggetti espressioni di altre funzionalità. Alla fin fine le architetture che funzionano alla base questa idea.

      Rispondi

  12. Altro vantaggio della modalità HTML: consente di ripulire i copia/incolla.

    Un tempo eravamo Anna Veronese, Luca Mascaro ed io scrivevamo un blog, e ci scambiavamo i testi via e-mail in testo semplice per la rilettura reciproca. Una volta, come al solito, copio dall’ultimo e-mail la versione definitiva, la incollo nell’editor, faccio un minimo di formattazione, pubblico…

    Caos totale, non solo nel post incriminato ma in tutto il blog: cancellati diversi post precedenti, anche dei due altri, post rimanenti in disordine. Passato il primo panico, guardo la sorgente: ci sono un mucchio di script che di solito non c’erano. Cancello l’ultimo post incasinante, tutto torna normale. Ricomincio. ma questa volta incollo l’email prima in modalità HTML per ripulirlo, lo ricopio, passo in modalità editore di testo, lo rincollo lì, ecc. Questa volta funziona.

    Poi gli altri mi hanno spiegato che anche se l’email era in testo semplice, siccome lo avevo aperto sul web, selezionando il testo avevo probabilmente incluso dei codici fuori dall’email stesso. Comunque sia, da allora passo sempre i copia-incolla dalla lavatrice della modalita HTML prima di adoperarli…

    Rispondi

    1. E’ lo stesso che fare copia e incolla sul Bloc notes? Per togliere qualunque formattazione di solito faccio così …
      Forse non ho capito come usare la lavatrice?
      Mi interessa molto però.

      Rispondi

      1. Esatto: è proprio la stessa cosa – solo che essendo pigra non mi piace cambiare strumento: così posso fare tutto nel browser – a volte uso addirittura la finestra di ricerca in cima a destra per i bucati piccoli 😀

        Rispondi

  14. Quando parla il Prof, diventa tutto accessibile, sembra tutto facile e a me torna la voglia di pasticciare con il codice. A dire il vero ogni tanto ci riprovo ma essendo distratta, i risultati scarseggiano. Quando non risolvo, prendo qualche alunno, che non chiamo nativo digitale ma che è in grado di scrivere codice, e mi faccio aiutare. Nel nostro piccolo, un centro di formazione professionale, abbiamo deciso di non essere e di non allevare “polli da batteria” e proviamo a lavorare in tale senso. Codice, sistemi operativi diversi e qualche linguaggio di programmazione. Dallo scorso anno, per abitare i loro mondi, accogliendo le suggestioni di Andreas, abbiamo introdotto l’uso dei social network. Certo non è una passeggiata ma i ragazzi reagiscono con entusiasmo alle proposte, spesso sorprendendoci con le loro soluzioni. Le resistenze, quelle difficili da superare, le incontriamo con gli adulti…
    Colgo l’occasione per fare una domanda: come mai lo stesso codice viene letto in modo diverso dai vari browser? Cerco di spiegarmi meglio, se sbaglio a scrivere qualcosa Firefox lo rileva subito e si vedono gli errori, intrnet explorer, invece, legge comunque.

    Rispondi

    1. Perché i vari browser sono molto diversi fra loro. La varietà di comportamento dei browser è l’incubo di chi scrive le pagine web. Se vuoi diffondere le tue pagine “nel mercato” devi controllare che tutti i browser che ci sono a giro facciano effettivamente quello che vuoi tu con il tuo codice. Per inciso, Internet Explorer è il più inviso alla maggior parte degli sviluppatori perché spesso tende ad andare fuori dello standard condiviso. È anche il peggiore sotto il profilo della sicurezza. Ci sono buoni motivi tecnici e etici per preferire Firefox.

      Rispondi

      1. Grazie! Ora non uso più Internet Explorer ma quel fatto mi aveva incuriosito e me lo ricordo perchè, convinta di aver scritto un codice che funzionava, sono incappata subito in una bella delusione.

        Rispondi

        1. Ho fatto due o tre incursioni sui link sopraindicati e lasciato delle orme del mio passaggio.
          Inoltre ho ripubblicato questo articolo, l’ennesimo di Andreas, con la seguente premessa:

          Una premessa.
          Se qualcuno li sta leggendo, e non è obbligatorio, vi spiego quale è lo scopo della pubblicazione di questi articoli sui codici HTML :
          darci la consapevolezza che si possono fare attivamente delle scelte su cosa e come si pubblica; e che l’informatica deve essere ragionamento e non mera ripetizione, magari veloce di gesti di comando di un programma che qualcuno ha progettato.
          Entrare un pochino in questo mondo vi permette la verifica anche delle vostre capacità gestione, comprensione e controllo di quanto state facendo.
          Buon lavoro

          Ciao
          Costantino

          Rispondi

  16. 1) Interessante l’articolo di Paolo Attivissimo Per favore non chiamateli nativi digitali… tristemente vero.
    Tutti (inclusa la sottoscritta) trattati come meri consumatori … a quelli del software libero … aiutooooo!
    2) ma che differenza c’è allora tra il tag e oppure tra e ?… l’effetto è lo stesso visivamente … si tratta solo di una sorta di “dialetti” che dicono la stessa cosa oppure c’è sotto qualcosa d’altro? Scelgo a caso oppure c’è qualche sottile differenza che mi permette di utilizzarli in contesti e per scopi differenti?

    Davvero interessante e ricco di stimoli questo corso … grazie Andreas!

    Rispondi

    1. Scusate … nel corpo del testo precedente ho citato i tag “i” e “em” così come “b” e “strong” ed è successo un pasticcio nel post.
      Chiedevo semplicemente quali criteri usare per scegliere “i” o “em” visto che l’effetto visivo è lo stesso.
      Ora non metto ma le “…” così non doveri fare danni … vediamo cosa succede con Post Comment!

      Rispondi

      1. Incredibile … i simboli di maggiore e minore usati per identificare i tag non vengono visualizzati nel post … evidentemente non li avevo mai usati … possibile che non me ne sia mai accorta? [evidentemente, sì]
        La frase finale nel post precedente era:
        Ora non metto (simbolo di maggiore e minore) ma le “…” ecc. ecc.
        Meglio che vada a pasticciare un po’ nel mio laboratorio personale in modo da non fare altri danni e arrecare disturbo!
        Ma … sbagliando si impara, no?! 🙂
        Più che uno sbaglio una scoperta!!

        Rispondi

  17. …uso wordpress per il sito della scuola e blog della classe, mi diverto a costruire pagine usando l’interfaccia, ma stasera ho voluto provare a seguire le indicazione del professore e inserire immagini, link, tabelle! Ho trovato delle difficoltà ma le preziose istruzioni del professore e W3School mi hanno permesso di riuscire nel mio intento! Userò la visualizzazione Text per capirne di più quando inserisco i dati nel blog! grazie 😉

    Rispondi
  18. Pingback: Aggiungo un link | luciapp64

  19. Grazie per la segnalazione della scuola W3School. Credo che, con calma, andrò a guardare un po’ di cosette, soprattutto, oltre che per l’html, anche per altri linguaggi.
    Sempre più interessante e coinvolgente questo corso.

    Rispondi

      1. Interessante quell’articolo, ma cerca un po’ il pelo sull’uovo: W3 lo possono usare tutti, è l’abbreviazione di World Wide Web. Cioè non è come se l’avessero chiamata W3CSchools.

        E in effetti, laddove l’articolo italiano dice: “ignora le richieste di rettifica sul nome da parte dei membri del W3C” la fonte inglese dice: “Members of the W3C have asked W3Schools to explicitly disavow any connection in the past, and they have refused to do so. ” (membri del W3C hanno chiesto in passato a W3Schools di negare esplicitamente qualsiasi connessione [col ], e [quelli di W3Schools] hanno rifiutato di farlo), che non è la stessa cosa. E nella pagina About Copyright di W3Schools, in realtà la differenza è chiara: “All pages and graphics on this web site are the property of the company Refsnes Data.”

        Subito sotto, però, c’è anche una frase sorprendente: “Pages, code or other content from W3Schools may not be redistributed or reproduced in any way, shape, or form without the written permission of Refsnes Data.” (Pagine, codice o altro contenuto da W3Schools non possono essere ridistribuiti o riprodotti in qualsiasi modo o forma senza l’autorizzazione scritta di Refsnes Data).

        Quella sì è una cavolata madornale: poiché il codice insegnato da W3Schools è libero, loro non hanno il diritto di restringerne l’uso. È come le condizioni di servizio dell’applicazione Wolfram|Alpha di Stephen Wolfram: “If you make results from Wolfram|Alpha available to anyone else, or incorporate those results into your own documents or presentations, you must include attribution indicating that the results and/or the presentation of the results came from Wolfram|Alpha.” (Se rendi i risultati ottenuti con Wolfram|Alpha disponibili a chiunque, o li incorpori nei tuoi documenti o nelle tue presentazioni, devi indicare che i risultati e/o la loro presentazione vengono da Wolfram|Alpha.) e ti fornisce addirittura un modello per le citazioni corrette. Così se “rendo disponibile ad altri” che “2+2=4”, dovrei aggiungere in nota:
        “Wolfram Alpha LLC. 2013. Wolfram|Alpha.
        http://www.wolframalpha.com/input/?i=2%2B2 (access December 3, 2013).”

        … e alla stessa stregua, ogni volta che faccio una tabella usando la pagina di esercitazione delle W3Schools come Andreas mostra nel video, dovrei precisare:
        “Refsnes Data. 2013. Refsnes Data. http://www.w3schools.com/html/html_tables.asp (access December 3, 2013)” ???

        E se non preciso, quelli lì mi fanno causa per milioni, forse?

        Rispondi

        2. si, alcune considerazioni sono discutibili. Quello che ho preso dalla lettura è stato il tipo di approccio verso le risorse che ci sono in rete. Privilegiare le risorse che arrivano dall’utenza (wiki, spazi di lavoro collaborativi…) piuttosto che le informazioni calate dall’alto. Penso che sia importante che la conoscenza possa circolare il più possibile, solo così possono crescere

          Rispondi

Lascia un commento