Il laboratorio nel computer #loptis

Clicca qui per scaricare una versione in pdf

Nel post precedente vi avevo chiesto di fare l’esercizio di scrivere un link in un commento. Avevo fatto anche un po’ il gradasso dicendo che non c’è nemmeno la rete di salvataggio perché una volta pubblicato non lo potete modificare! Meglio così, bisogna stare proprio attenti… 🙂

Affermazione non sbagliata – senza rete di salvataggio si è effettivamente costretti a una maggiore attenzione. Tuttavia manca la possibilità di fare un po’ di esercizio nell’intimità della propria stanza, per così dire. È vero. Cogliamo allora l’occasione per fare una cosa che ci serve ma anche per accorgerci come in alcune parti del nostro computer – ignorate o ritenute di interesse marginale – si nascondano invece delle potenzialità interessanti.

Faccio il discorso per Windows, secondo la legge della maggioranza. Per gli utenti di Mac OSX o Linux non dovrebbe essere difficile estrapolare. Comunque, se ci sono problemi chiedete lumi commentando. Eventualmente facciamo un video, ma aspettiamo la necessità.

L’idea, banale, è questa: fate prima questo esercizio – e i prossimi analoghi – in una pagina locale. Esempio: avete provato a scrivere il link al post precedente e non funziona. Bene, create una pagina HTML sul vostro computer e scrivetelo lì, giocandoci letteralmente, aggiungendo e togliendo per capire cos’è che non va.

Per fare questo usate l’editore di testo di Windows, il Blocco note (Notepad). Non usate Word e nemmeno Write di LibreOffice. Non è sadismo. È che i word processor possono prendere iniziative sgradite quando si scrive codice.

Il Blocco note si apre con Avvio -> Accessori -> Blocco note. Nella pagina bianca che si è aperta scrivete il vostro testo in HTML, tipo

Poi salvate in un file che piazzate da qualche parte nel vostro disco rigido. Una buona idea potrebbe essere quella di creare una cartella per raccogliere questi esercizi. Attenzione però: il Blocco note vi proporrà un nome che finisce con .txt: NO! Se scrivete per esempio solo il nome del file – come siamo abituati a fare – tipo pippo, poi vi ritroverete con un file pippo.txt. non va bene, perché l’estensione del nome del file (quella dopo il punto: .txt) determina vari comportamenti del sistema operativo. Scrivete invece per esteso pippo.html.

Ora, aprite la cartella che contiene il vostro file e fate doppio-click sul suo nome: si aprirà il browser che vi mostrerà la pagina che avete creato. Ci dovrebbe essere il vostro link. Non rimane che provarlo. Se c’è qualcosa che non va saltate alla finestra del Blocco note, che sarà rimasta aperta sul file, dove potete leggere il codice, rifletterci, modificarlo, tornare sulla finestra del browser, ricaricare la pagina (per esempio con la combinazione di tasti Ctrl-r) e vedere il risultato.

Ecco, questa sequenza di operazioni è esattamente quella che eseguono gli sviluppatori di software, reiterate volte, per provare e correggere qualsiasi tipo di codice, saltabeccando fra la finestra dove si manipola il codice e quella dove si vede l’effetto. E non pensiate che usare Notepad sia roba da poco. Ho conosciuto coders geniali scrivere cose mostruose con il solo Blocco note. È il pensiero che conta, molto più dello strumento – spero che qualcuno si senta a casa 🙂

Probabilmente risolverete da soli gli eventuali problemi, ma non è detto che vada sempre così. Se non ne venite a capo, allora è giunto il momento di illustrare il proprio problema alla comunità, non solo all’insegnante: la discussione del problema può servire a altri. Tuttavia i commenti ai post non sono adatti perché WordPress.com – ma anche tutti gli altri servizi – manipola il codice, principalmente per motivi di sicurezza – ne riparleremo – e, in moti casi strappa via tutta la parte che ritiene incriminata. Così succede che quando io vado a vedere il codice del commento per dirvi cos’è che non va, spesso non posso risalire al problema. Ci vuole un altro strumento, eccolo: http://piratepad.net/code-lab-loptis. È un servizio web che fornisce un editore di testo per lavori da fare in cooperazione. Usato tantissimo dagli hacker per sviluppare software, ma mi sono reso conto anche per lavori didattici. Nel cMOOC #ltis13 avevamo usato questo: http://piratepad.net/code-lab. Dateci un’occhiata per vedere come.

Bene, usate quindi http://piratepad.net/code-lab-loptis per scriverci dentro il codice e tutte le considerazioni che ritenete opportuno, scrivete in calce al testo anche il vostro nome e avvertite in un commento qui, affinché tutti, me compreso, possano andare a vedere – dare una mano.

Se volete altre informazioni su PiratePad, compresi un paio di video, andate a leggere questo post.

Infine, una volta che siete riusciti a far funzionare come volete il codice, comunque l’abbiate fatto, con o senza aiuto, tornate qui e piazzatelo in un commento, a questo o al precedente post, fa lo stesso.

77 pensieri riguardo “Il laboratorio nel computer #loptis”

  2. Stavo provando ad usare il linguaggio HTML (per esempio inserire una tabella nel blog in wordpress come suggerisce w3school) ma non trovo la possibilità di visualizzazione “testo/visuale”. Ho fatto diversi tentativi… ma proprio non capisco.

    Rispondi

        1. Ho capito. Per scrivere un post in WordPress.com, si può passare da due vie. Quella che hai usato te, passa dalla voce a destra in alto “Nuovo articolo”, che apre una finestra pop-up (volante), sovrapposta alla pagina, che tu hai mostrato nel tuo blog… e che io non ho mai usato! Per questo non capivo… 😀

          Quella finestra è comoda ma non offre tutte le possibilità, fra cui l’opzione testo-visuale.

          L’altra via, che definirei canonica, passa dalla voce di menu in alto a sinistra, con l’icona del pianeta terra, che per te – credo – si chiama “ansaldimariarita”, una volta cliccata si apre un menu a cascata dove la prima voce, “Bacheca” è quella da cliccare. Ecco, ciò che si apre è il vero quadro di comando del tuo blog, che puoi esplorare con calma. Intanto, nella fila di voci a sinistra, trovi anche “Articoli” e da lì “Aggiungi nuovo”. Bene, a quel punto sei allo screenshot che ti ho indicato nel commento precedente.
          Facci sapere, e non preoccuparti delle “figure”, le cattive figure le fa chi non ci prova 🙂

          Rispondi

    1. Questo link Maria, lo dovresti correggere, come ti ho scritto anche nel blog:

      Questo invece va riaggiustato: dovresti togliere tutta la parte dell’indirizzo che inizia da wp-admin… fino in fondo. Questo perché quella parte di indirizzo porta al tuo spazio privato di amministrazione del blog. Invece l’indirizzo pubblico è questo: http://mariab72.wordpress.com

      Rispondi

  6. mi meraviglio sempre più , del modo in cui si può utilizzare questo strumento creando delle cose che non avrei mai immaginato un giorno esserne capace . grazie prof . confesso che ho provato e riprovato ho capito gli errori e adesso mi sento molto più sicura , anche se ci sono stati dei momenti di sconforto.

    Rispondi

  7. Scopro con sorpresa l’ultilizzo di notepad (semplice,base,elementare) per la costruzione di cose complicate come i codici html. Al primo tentativo ho sbagliato a rinominare il file (salvato dentro una cartella) scrivendo ( blog.html. -con il punto finale), tolto il punto (blog.html) l’icona del file è diventata attiva (tutta bianca) cliccando due volte si apre la pagina (con mio grande stupore).

    Rispondi

    2. Ecco infatti, si potrebbe dire: scoprire che il computer è una macchina molto più manipolabile di quello che si pensa, certo, bisogna faticare un po’, ma si faticava anche in prima elementare, no? 🙂

      Rispondi

      1. Vero, e quando lo scopri ti si apre pian piano un mondo che non avevi mai notato. E ti accordi di quante cose puoi fare tu da solo senza intermediari di sorta (le varie creazioni guidate che a volte invece che guidarti ti mandano in strade sconosciute)

        Rispondi

  8. Confermo,che salvando su una cartella posta sul dekstop, la magia non è riuscita. Salvando sempre in htlm, tutti i file, ma nella cartella di sistema (documenti), tutto si apre come una meraviglia. Vorrei capire perchè. Ritento.

    Rispondi

    1. Ci sono riuscita. E’ la stessa cosa. ripetendo la procedura, il risultato è stato positivo anche in una cartella sul dekstop.Avrò sbagliato qualcosa, forse non avevo messo nome.htlm.

      Rispondi

      1. Stavo seguendo il flusso dei tuoi commenti, domandami se era più utile intervenire o aspettare gli sviluppi 🙂
        Bene così. Sì, l’estensione del nome del file – ciò che viene dopo il punto, .txt .doc ecc. – è importante per questi sistemi perché serve loro a decidere cosa fare del file.

        Rispondi

        1. Prof, ho provato, ho fallito…mi sono persa…ma alla fine ho capito tantissime cose che non sapevo, scoprendo windows 8, per me una bomba. Capisco che risulto pesante, perche’ voglio trovare subito la soluzione. E poi rileggendo bene…non si capisce quello che volevo dire!!! Quando vivo queste crisi…meglio che sbatto, cado e mi rialzo. Ho poi compiuto altre esercitazioni…forse troppe!!! circa 15!!!ed e’ andata benissimo!!! Mi ero “avvitata” su me stessa. Non le dico come mi sono sentita dopo. …benissimo. Il mio nuovo pc e’ un i5 della Lenovo, quello della pubblicita’ martellante!…con una serie di app inserite e un meccanismo apparentemente piu’ complesso, ma oggi ho capito che facilita questo tipo di sperimentazione. Domani mi dedico ai post successivi. Alcuni passaggi mi sono noti e soprattutto di corrente utilizzo. Grazie dell’attenzione. Mariantonietta.

          Rispondi

  9. Bene , ci sono riuscita. Saltava un passaggio fondamentale. Il file veniva salvato correttamente in htlm, ma poi sotto c’era “tutti i file”. Si è aperto, perchè io lo avevo scelto con Crhome. Ho creato una cartella sul dekstop “Esercizi Iamarf 2 e già per due volte è andato bene.
    Riprovo la costruzione di un link qui e adesso, il Blog di Mariantonietta. Proviamo?

    Rispondi

  10. Curiosità preziosa, quando mi dice di salvare (Windows 8) sotto a destra , in un menu’ a tendina mi da 4 opzioni, codifica: ANSI, UNICODE, Big-endian Unicode e UTF-8. Non lo avevo mai notato prima con windows xp!! Comunque non riesco a salvare htlm, mi dice “tutti i file”.

    Rispondi

    1. La questione dell’encoding si complica rapidamente appena si tenta di approfondirla. Conseguenza diretta della Torre di Babele – troppi caratteri da rappresentare a fronte di una matrice culturale americana.

      Per esprimere le informazioni gli umani disegnano – stampano – figurine che chiamano caratteri. Il computer mastica solo sequenze di 0 e 1. La codifica (encoding) è il dizionario necessario per poter memorizzare e gestire nelle macchine digitali i nostri caratteri: ad ogni carattere deve corrispondere una e una sola sequenza di 0 e 1.

      Il contesto culturale nel quale si è sviluppata questa roba è quello scientifico americano. La lingua inglese ha agevolato lo sviluppo iniziale della codifica perchè nella sua ortografia non appaiono gli accenti. Ecco perchè la prima codifica, la tabella ASCII (American Standard Code for Information Interexchange) richiedeva solo 7 bit, con i quali si possono rappresentare 128 oggetti (2 alla 7), quindi 128 caratteri, perfettamente adeguati per rappresentare tutto ciò che serve per scrivere in inglese – lettere, numeri, punteggiatura e vari caratteri speciali – parentesi e altro. Questi non bastavano però per qualsiasi altra lingua – ogni altra lingua europea ha i suoi accenti, per non parlare delle lingue che usano alfabeti o sistemi di origine non latina.

      La tabella ASCII fu quindi estesa per comporre l’ANSI table (American National standards Institute). In pratica l’estensione ha comportato l’aggiunta di un solo bit, utilizzando così un byte per carattere (8 bit), e raddoppiando la capacità: ogni volta che si aggiunge un bit si raddoppia: 2 alla 8 dà 256 possibilità. Così è stato possibile rappresentare i principali caratteri accentati delle lingue europee, soprattutto francese, spagnolo, tedesco, italiano. Ma con un byte di più non si può fare – rimane fuori la grande maggioranza delle lingue del mondo.

      E così è comparsa la codifica UNICODE, che associa un numero univoco ad ogni carattere. Attualmente sono stati codificati oltre 100000 caratteri per 100 alfabeti. Il numero identificato da UNICODE può essere poi accomodato in vari modi in una sequenza di byte. Lo standard che va per la maggiore si chiama UTF-8.

      All’atto pratico, per le piccole prove che facciamo qui, la codifica ANSI dovrebbe andare bene. Se uno si dovesse trovare a editare file HTML complessi e con simboli strani, allora UTF-8 è la scelta giusta. Ma allora sarebbe opportuno usare un editore di testo più adatto, come per esempio Notepad++.

      Qualche altra notizia in un vecchio post: Codice Codifica Complessità.

      Rispondi
  11. Pingback: Servizi di scrittura collaborativa e un primo progetto – #loptis « Laboratorio Online Permanente di Tecnologie Internet per la Scuola – #loptis

  12. Le osservazioni di dueappunti e maupao mi sono state utilissime, seguendo le loro indicazioni le prove hanno avuto effetti positivi: ho copiato il codice in blocco note, ho salvato in html, ho riaperto cliccando due volte e magia, magia ho ritrovato il testo scritto, cliccando con il tasto destro, apri con blocco note, ho ritrovato il codice.
    bene ora continuano le prove!
    Grazie a tutti
    Giusi

    Rispondi

  15. Ho provato a utilizzare il Blocco note: funziona! Che bello imparare anche queste cose! La cassetta degli attrezzi piano piano si riempie di strumenti preziosi e inesplorati. Grazie

    Rispondi

  18. Ecco, ho scritto sul pad di Pirates, un link di prova e qualche considerazione.
    Praticamente serve per scrivere in modo collaborativo?
    Ma se devo provare il codice cosa faccio?
    Copio e incollo su bloc notes quanto scritto sul Pad?
    Credo mi sfugga qualcosa.
    Comunque Interessante! Molto.

    Rispondi

    1. Adesso dirò una cosa che metterà in luce tutta la mia ignoranza ma …
      è molto simile a google drive?
      Solo che è nato molto prima? e senza utilizzare i servizi google (utilizzo solo se ho un account google, giusto?)
      Vebbé se non c’entra proprio niente chiedo venia.
      Ciao

      Rispondi

          1. Cioé … Google drive è più evoluto e ha l’immediatezza di lavorare subito sul contenuto (in questo, lavorare in modo immediato al contenuto mi sembrano analoghi, in verità, così a prima vista) ma il Pad ha il vantaggio di non richiedere autorizzazioni e rigistrazioni varie.
            Per lavorare insieme sul Pad dobbiamo accedere semplicemente all’indirizzo specifico contemporaneamente o in modo asincrono.
            E’ l’indirizzo URL ad essere specifico e condiviso, non l’utente. E’ così?

            Rispondi

            1. yes, proprio così. E il pad è molto più essenziale: non gestisce le immagini, dal punto di vista della formattazione ha poche funzionalità. Per contro ha il colore dell’utente che mi piace molto e la sessione di chat contemporanea

              Rispondi

              1. Ora è tardino ma una volta magari proviamo!
                Però mi rimane il problema di come verificare se il codice funziona oppure no … copio e incollo?
                Magari proviamo con il Pad e la chat contemporanea … ora èun po’ tardi e domani si lavora!!
                🙂
                Grazie Paolo!!

                Rispondi

    2. Facciamo un po’ d’ordine.

      In generale, in qualsiasi situazione in cui uno scrive codice – scrittura di software vero e proprio di ogni tipo, C, Java, Javascript, PHP, scrittura di pagine HTML, scrittura con word processore sofisticati come LaTeX, per le formula matematiche; inssoma in tutti i casi – ha sempre

      due oggetti sotto il naso:

      1. un editore di testo dove si legge il codice in chiaro, con tutti i comandi esplicitamente visibili
      2. una finestra dove si sperimenta l’effetto e dove non si devono vedere i codici, ma l’effetto che si vuole ottenere

      Nel caso della scrittura di codice HTML:

      1. nel Blocco note si manipolano i codici esplicitamente
      2. nel browser si osserva come viene la corrispondente pagina web

      Lavorando non c’è bisogno di tirare in ballo un file txt.

      Allora, se tu fai doppio click su pippo.html parte il browser che ti mostra quella pagina HTML, e così deve essere.

      Se tu vuoi aprie pippo.html per lavorare sul codice, non puoi fare doppio click evidentemente, sennò parte il browser, appunto. Devi aprire il Blocco note, poi con il menu File->Apri ti vai a cercare il file pippo.html e allora ti apparirà con il codice.

      Ma quando hai fatto, non c’è bisogno che tu chiuda il Blocco note, perché se devi ricorreggere ti tocca riaprilo. Lascialo pure aperto e salta fra il Blocco note e il browser avanti e indietro, per esempio con la combinazione di tasti Alt-Tab.

      Rispondi

      1. Vediamo se ho capito:
        1 – scrivi il codice nel Blocco note.
        2 – Salvo con estensione .html
        3 – apro il file con il browser per vedere come appare la pagina.
        4 – Se continuo a lavorare “saltello” tra il Blocco note (codice in chiaro) e il browser (visibile l’effetto del codice).
        5 – Se chiudo il lavoro posso riaprire successivamente il file.hmtl da Blocco note funzione “apri” e trovo il codice in chiaro ( si dice così?)

        Sì, fare il doppio salvataggio .html e .txt appare inutile.
        Grazie!!!

        Rispondi

  19. wow! Che spettacolo … funziona.
    Se salvo il file creato in bloc notes con estensione .html tuttavia si apre automaticamente il browser che legge l’html e quindi perdo comunque l’informazione del codice.
    Capito, capito … salvo anche una copia identica ma con estensione .txt in modo da poterla modificare eventualmente in futuro.
    Ecco! Ho un laboratorio contenente i file in html e una copia con codice visibile in txt per pasticciarci un po’ … seguendo le lezioni.
    Grazie Andreas!!

    Non ho capito però se devo inserire di nuovo il link qui. Non credo. Nel primo commento funzionava … comunque sono molto contenta.

    Rispondi

      1. Sai che non ci riesco?
        Con il tasto destro mi pemette di scegliere solo i browser che ho installato ma non trovo nemmeno con sfoglia il Bloc notes?
        Al momento lascio le due versioni con le due estensioni … certo il tuo metodo sarebbe più comodo.
        A presto!!

        Rispondi

  20. Interessanti scoprire l’essenzialità degli strumenti che permettono di creare. Ora per noi si tratta di un piccolo codice, ma che ti rende consapevole della forza che è dentro la conoscenza di come sono fatte tutte le pagine che scorrono sotto i nostri occhi.
    Per tornare a noi, sperimento la scrittura del link per segnalare il wiki di WiildOs e la mappa di chi sta provando ad utilizzare la lavagna libera.

    Rispondi

    1. I link funzionano ambedue e il primo punta effettivamente al wiki di WiildOs, ma il secondo punto alla home del servizio web di crowdmapping (che non conoscevo 😉 ) e non alla mappa di chi usa la lavagna libera, cioè manca roba all’indirizzo.

      Rispondi

          1. Il collegamento che non funzionava l’ho realizzato utilizzando la funzione di risposta ai commenti nell’area wordpress. (spero di essermi spiegato) Ero sicuro di aver fatto le cose per bene, ma probabilmente wordpress ci mette il suo zampino.

            Rispondi

          2. Ma se rileggi il post vedi che è proprio in casi simili che occorre andare a usare il pad: http://piratepad.net/code-lab-loptis. Vai lì Paola e scrivi il codice che avevi scritto in questi commenti.

            Perché, come ho scritto nel post, wordpress nei commenti manipola il codice e io non posso così vedere cosa è successo.

            Quindi:

            1. vai in http://piratepad.net/code-lab-loptis
            2. scrivi il codice, commenta come vuoi e firma con il tuo nome
            3. avvertimi qui di avere fatto questo
            4. a quel punto io potrò leggere il codice e qui ti dirò qual è il problema
            Rispondi

            1. Gent. Prof. Formiconi,
              ho seguito le sue indicazioni e ho scritto il codice su PiratePad…spero di venirne a capo…sono davvero curiosa di sapere dove ho sbagliato!
              grazie
              Paola Belli

              Rispondi

  22. In effetti io avevo scritto tutto su word e poi copiato qui. Ora ho seguito le indicazioni del Prof. ed ho usato Blocco note. Ha funzionato: apertura di firefox con il link creato, click sul link e si è aperto il blog. Perfetto. Ora provo a scriverlo qui. blog di Maria Rita

    Rispondi

  24. A proposito di “…Tuttavia i commenti ai post non sono adatti perché WordPress.com – ma anche tutti gli altri servizi – manipola il codice, principalmente per motivi di sicurezza…” (grassetto mio):

    è successa una cosa strana su Diigo: vedi la discussione Problema con i tag HTML nelle citazioni e nei commenti ai segnalibri che avevo iniziato in merito il 2 novembre. Cioè Diigo aggiungeva tag HTML ad es intorno a un URL per trasformarlo in link, però invece i segni <, > e ” nei tag venivano mostrati tali quali anziché agire sul testo. Se si cliccava su edit, quei caratter apparivano nella loro forma di codice (UTF-8 mi pare di ricrdare). Bastava rifare i tag in modalità edit, e il testo appariva normale, ma era un po’ una rottura di scatole.

    La cosa ancora più strana è che dopo qualche giorno i nuovi tag hanno ricominciato a funzionare correttamente da sé. Cosa sarà successo prima?

    Rispondi

    1. Sono andato provare, giusto per capire bene. In effetti ora questo problema non c’è. Sai, dietro a tutti questi cosi ci sono degli staff che aggiornano e sviluppano, come tu ben sai essendo piuttosto addentro nelle faccende di Amara. Succede che ogni tanto qualcosa sfugga loro di mano e che ci mettano qualche tempo a rimediare. C’è parecchia complessità dentro a questa roba: tocchi qualcosa qui e non t’avvedi subito che si disarticola qualcosa là…

      Rispondi

Lascia un commento