Differenze fra XHTML e HTML5

Cosa è l'HTML

L’HTML è un linguaggio di mark-up e serve a descrivere la struttura gerarchica di un documento. Lo fa utilizzando dei tag che racchiudono le informazioni. I tag servono a descrivere il significato semantico del contenuto racchiuso. I tag possono racchiudere altri tag, in questo modo viene definita la struttura gerarchica del documento da cui si ricava una struttura ad albero. Le regole di base su come utilizzare i tag, quali attributi possono avere e quali tag possono racchiudere, sono parti delle specifiche di HTML5. La maggior parte dei browser interpreta l’HTML anche se non scritto in maniera del tutto corretta.

Cosa è il CSS

Il CSS è il linguaggio che definisce la formattazione dei documenti HTML. Nasce appositamente per separare la formattazione dal documento contenente la struttura e favorire riuso e pulizia del codice. Il CSS può essere contenuto all’interno del file HTML in determinati tag, può essere scritto inline oppure secondo quella che è la pratica più comune può essere scritto all’interno di file appositi che poi vengono linkati all’interno del documento principale. Spetterà poi al browser interpretare il codice CSS e formattare il documento in maniera corretta.

HTML5 e semantica

In HTML5 la semantica viene stabilita a priori e diviene standard condiviso. HTML5 e ampiamente supportato dai browser, ma per i browser più datati può essere d'aiuto sondare il supporto di una data funzionalità:
Chi viene da studi umanistici sa che la semantica è quella branca della linguistica che studia il significato delle parole, nel nostro caso la semantica è riferita ai che si spogliano di ogni implicazione stilistica e di formattazione.
Per la costruzione del layout all'inizio si utilizzavano le tabelle, ma è una modalità obsoleta, la sostituzione di queste con i
ha migliorato di molto la situazione, i designer si facevano però facilmente prendere la mano nidificando in maniera compulsiva
neutri che, grazie a div id e div class, sono richiamati dai selettori CSS.

Differenza fra XHTML e HTML5

Con Balsamiq ho realizzato due wireframe:

XHTML


HTML5

Riassumendo:

  • HTML è l’acronimo di Hyper Text Markup Language
  • Non è un linguaggio di programmazione, e non possiede quindi i costrutti logici della programmazione
  • È un linguaggio di mark-up per ipertesti
  • È lo standard utilizzato per la creazione di Pagine Web

Risorse:

Learning Object e SCORM

XERTE strumento per la creazione di Learning Object

SCORM

Lo SCORM - "Shareable Content Object Reference Model" (Modello di Riferimento per gli Oggetti di Contenuto Condivisibile) è tecnicamente un "modello virtuale" (reference model), cioè una raccolta di specifiche tecniche che consente, primariamente, lo scambio di contenuti digitali in maniera indipendente dalla piattaforma.

Al momento attuale le ultime specifiche dello standard sono relative alla versione 1.3 (detto anche SCORM 2004) anche se il più utilizzato rimane ancora lo scorm 1.2. La specifica SCORM 2004 ha subito diverse revisioni e miglioramenti. La revisione più recente è la quarta (4th edition).

Un oggetto SCORM è un insieme di file impacchettati secondo uno standard riconosciuto per la realizzazione di learning object. Il modulo di attività SCORM consente l'utilizzo di pacchetti in formato .zip basati sugli standard SCORM e AICC.

In genere il contenuto di un pacchetto viene visualizzato su diverse pagine, con la possibilità di navigarle. E' possibile impostare il pacchetto per visualizzare il contenuto in finestre pop up, con l'indice dei contenuti, con i pulsanti di navigazione, eccetera. Gli oggetti SCORM possono anche presentare delle domande i cui risultati saranno memorizzati nel registro del valutatore.

È possibile usare attività SCORM per:
  1. Presentare contenuti multimediali ed animazioni
  2. Valutare le attività degli studenti

Installazione

EasyPHP: dedicato ai sistemi Windows, è un ambiente di sviluppo web-database del tipo WAMP [WAMP] che permette di far eseguire un server web basato sull’interprete PHP. EasyPHP [EPHP] non è un semplice software, ma un ambiente che comprende un server web Apache, un server MySQL, un interprete di script PHP e un amministratore di database MySQL dotato di una interfaccia grafica chiamata phpMyAdmin, che permette di gestire gli utenti, l’avvio e lo spegnimento dei server. Tutte queste componenti sono installate contemporaneamente e forniscono la possibilità di sviluppare in locale siti web in PHP, infatti il server Apache crea automaticamente di default un dominio virtuale raggiungibile dall’indirizzo localhost.

XAMPP: l’acronimo sta per “X:Cross-platform A:ApacheHTTP Server M:MySQL P:Php P:Perl”, è una piattaforma software gratuita costituita da Apache HTTP Server, il database MySQL e tutti gli strumenti necessari per supportare i linguaggi di programmazione Php e Perl [Perl]. È rilasciato sotto la GNU General Public License ed oltre ad essere gratuita è caratterizzata da un approccio user friendly. È stata sviluppata da Kay ‘Oswald’ Seidler e Kay Vogelgesang . Può essere eseguita su tutti i sistemi operativi, da Windows a Sun Solaris passando da Mac OS X e senza dimenticare GNU/Linux.

MAMP: Il suo acronimo significa ”M:Mac OS X A: Apache M:MySQL P:Php o Perl o anche Python” [Python], le componenti sono le stesse dei due software precedenti e svolgono esattamente le stesse funzioni. MAMP è rilasciato in due versioni, la prima con il nome di MAMP con licenza GNU General Public License, mentre la seconda è una versione commerciale con il nome di MAMP PRO [MPRO].

Strumenti per la creazione di oggetti SCORM

Di seguito vengono, dunque, esaminati e confrontati, mettendo in luce rispetto ad ognuno vantaggi e svantaggi, i seguenti software:
  • eXe eLearning: XHTML e HTML5 Editor open source;
  • Xerte project: XML e HTML5 editor open source;
  • Microsoft LCDS: Learning Content Development System free;
  • CourseLab: free e commerciale;
  • Adobe Captivate: soluzione completa commerciale Adobe.

Xerte

Xerte è uno strumento open source sviluppato dall'Università di Nottingham per la creazione di Learning Object

  1. Ottima alternativa ai software closed source come Adobe Captivate
  2. Obiettivo è quello di creare un un Learning Object (un “oggetto d’apprendimento”)
  3. Xerte Online Toolkit era inizialmente oriento a Flash, fortunatamente oggi i contenuti vengono convertiti in HTML5

Unità digitali o learning object?

  1. Unità digitali e learning object sono sempre risorse digitali, nel nostro caso orientate all’apprendimento.
  2. Una unità digitale è qualsiasi risorsa che scaturisca dal format e dallo storyboard.
  3. Il learning object è un’unità digitale ma ha delle caratteristiche che eredità alla programmazione ad oggetti che sono:
    • Granularità: deve riguardare un preciso e circoscritto obiettivo didattico;
    • Autoconsistenza: non deve far riferimento a risorse esterne;
    • Riusabilità: deve poter essere utilizzato anche in contesti diversi:
    • Adattabilità: deve potersi adattare a vari contesti e modalità di fruizione;
    • Aggregabilità: deve potersi collocare all’interno di moduli digitali;
    • Descrizione: deve avere metadati.
  4. Un learning object è costituito quindi da contenuti + metadati

Creiamo il nostro primo L.O.

Inizieremo a creare un semplice L.O. contenente testo, immagini e suoni. Nel processo esploreremo le basi dell'interfaccia Xerte Online Toolkits e i passaggi necessari per creare e condividere il L.O.



L’area progetti sarò vuota, se si è invece creato precedentemente oggetti o cartelle di apprendimento, saranno nel pannello My Projects: il luogo dove è possibile organizzare, modificare e condividere i progetti creati. I modelli per creare nuovi progetti si trovano nel pannello Project Templates. Il modello che useremo inizialmente è chiamato Xerte Online Toolkit.

A destra nell'area di Project Templates si potrà scegliere il ”modello di progetto” inteso come base per un determinato L.O. con caratteristiche specifiche:
  1. Xerte Online Toolkit
    Un modello flessibile per la creazione di oggetti di apprendimento interattivo (detto anche XOT).
  2. Bootstrap Template
    Un modello responsivo per la distribuzione di contenuti a tutti i device.
  3. Decision Tree Template
    Un modello per presentare una serie di domande per raggiungere una soluzione a un problema.
Dopo aver scelto il modello su cui lavorare fare clic su Crea progetto e apparirà una finestra popup come mostrato di seguito.

N.B. Se questa finestra non viene visualizzata, è possibile visualizzare un messaggio nella parte superiore della finestra del browser per chiedere se si desidera abilitare i popup.
Questa è la finestra Project Editor dove è possibile aggiungere pagine e contenuti all’oggetto di apprendimento.
  1. Il pannello a sinistra consente di inserire, copiare, eliminare e organizzare pagine. 

  1. Il pannello centrale è dove compilare i moduli per popolare e configurare il L.O. e ogni sua pagina.
  2. Il pannello a destra vi è un elenco di proprietà opzionali che variano in base al modello scelto.

Pannello centrale su template XOT


L.O. Tipologie di pagina

  • Le tipologie di pagina sono raggiungibili tramite il menu inserisci simboleggiato da:
  • Inserisci > Testo > Title Page
  • Inserisci > Media > Graphics and Sound
Ogni tipologia di pagina ci consente diverse opzioni, ad esempio una tipologia Media consente il Magnifer.
  • Mentre ci spostiamo sopra ogni tipologia di pagina viene visualizzata un'anteprima utile e un riepilogarne il fine.

Pubblicazione

  • Intendiamo pubblicare (salvare) le nostre modifiche e lavorare sulle proprietà del file in modo che altri possano vedere il nostro L.O.
  • N.B. Per impostazione predefinita tutti i L.O. sono riservati finché non saranno cambiati in modalità ”pubblico”.
  • Fare clic su Pubblica per salvare le modifiche più recenti. Quindi Chiudi la finestra del Project Editor per tornare al nostro spazio di lavoro iniziale.
  • Con il nostro L.O. selezionato nel pannello My Projects fare clic su Proprietà, la finestra delle proprietà darà diverse opzioni in base al modello precedentemente scelto (XOT o bootstrap).
  1. Il nome del progetto, un link e con relativo iframe per condividere il nostro L.O. che per impostazioni de default è privato.
  2. Fare clic sulla scheda Accesso: Per rendere pubblico il L.O. abbiamo bisogno di modificare le proprietà di accesso. 

Con "Esporta” l’oggetto di apprendimento viene esportato per renderlo disponibile per altri ambienti esterni a Xerte oppure può essere importato in una nuova istanza di Xerte. Di default l'opzione Usa Javascript (HTML5) è già spuntata.
  1. Esporta per distribuzione. Contiene solamente i file necessari per importare l'oggetto in un sistema VLE senza tracciamento SCORM, per la sua condivisione tramite CD o chiavetta USB, o per importarlo in un'altra installazione Xerte.
  2. Esporta per distribuzione SCORM: pacchetto autosufficiente secondo lo standard SCORM 1.2 oppure 2004. 

Decision Tree Template

  1. Il Decision Tree Template consente di creare una struttura da seguire mediante “decisioni”. Consente quindi di creare un percorso che può essere utilizzato per far seguire all'utente un percorso condizionale. Può anche essere utilizzato per sviluppare storie a ramificazione o altre attività interattiva che fanno uso di “decisioni”.
  2. Oltre ad essere un template lo troviamo anche in: Interactivity > Decision Tree.
  3. L’Obiettivo è quello di trovare una soluzione ad un problema rispondendo una serie di domande.

Prima di iniziare è importante avere chiaro l’aspetto del tuo albero di decisione ed è opportuno iniziare con matita e carta; si noti che:
  1. Per Xerte, ogni Step è una raccolta di opzioni, all’interno delle quali l'utente ne sceglie una.
    • Per Xerte un Risultato è il punto finale al quale le opzioni giungono.
    • Un Information Step non include una scelta, ma porta ad un altro Step o Risultato.
    • Una Opzione può inviare gli utenti a qualsiasi altro Step o Risultato.
    • Più Opzioni possono portare allo stesso Step o Risultato.
  2. Xerte richiede un ID univoco per ogni Step e Risultato. Questi dovrebbero essere brevi, senza spazi. Anche gli ID dovrebbero essere individuati durante la fase di storyboard in modo da poterle identificare facilmente quando si costruisci l'albero decisionale. 

Esempio di mappa decisionale ad albero






Software libero a scuola, insisto!

Perché insistere:
1. Software libero è consapevolezza.
Ci si lamenta spesso di quanto i ragazzi oggi usino App, Rete, tablet senza avere la minima cognizione degli strumenti che sono diventati parte integrante delle loro giornate. L'open source aiuta a comprendere come nascono i software, come si evolvono e quanto siano necessarie conoscenze, competenze, impegno per usarli al meglio.
2. Software libero è libertà digitale.
Non possiamo permetterci di crescere i ragazzi nutrendoli con programmi e app che danno assuefazione e che non consentono loro una vera scelta dello strumento migliore da usare. Tanto per fare un esempio: se i ragazzi in classe useranno solo Microsoft Office cresceranno pensando che Excel sia sinonimo di foglio di calcolo e non sapranno utilizzare altro che quello.
3. Software libero è collaborazione.
Spiegare come nasce un progetto open source significa far comprendere l'importanza del lavorare insieme, unire le forze, collaborare per veder crescere un progetto comune. Software libero non è individualismo ma lavoro collettivo.
4. Software libero è condivisione.
Lo scambio di conoscenze e competenze è uno dei valori più forti alla base del software libero. Il mettere in comune una cosa che si conosce al fine di trovare nella comunità qualcuno che possa arricchirci con qualcosa che non sappiamo è una delle opportunità più grandi che i ragazzi dovranno saper cogliere in futuro.
5. Software libero è inclusione.
L'adozione di open source a scuola non può riuscire senza un'adeguata formazione di insegnanti e studenti, in un processo di inclusione che non lascia indietro gli insegnanti “meno digitali”, gli studenti che hanno un pc vecchio e non hanno un tablet di ultima generazione, i genitori che hanno così l'opportunità di “digitalizzare” i ragazzi senza spendere un patrimonio.
6. Software libero è creatività.
Per questa ragione è sufficiente riportare le parole di Renzo Davoli dell’Università di Bologna: “Occorre ripensare all'intero processo educativo: non possiamo permetterci di perdere la creatività delle giovani generazioni; è un tesoro troppo prezioso. In tutto questo il software libero c'entra”. C'entra proprio perché programmazione è creatività e vedere il codice scritto da altri e sforzarsi di trovare soluzioni che possano migliorarlo sviluppa la creatività.
7. Software libero è educazione.
Educare alla legalità è un bisogno primario, soprattutto a scuola. Avere in aula multimediale software pirata come purtroppo spesso accade nelle scuole non è certo il miglior modo di dare il buon esempio.
8. Software libero è risparmio.
Questa che alcuni potrebbero immaginare come la ragione primaria non è invece la più importante. Lo diventa nel momento in cui i fondi risparmiati in acquisto di licenze di software proprietari si reinvestono in formazione per studenti, genitori e insegnanti.
9. Software libero è rispetto delle norme.
Essendo la scuola una pubblica amministrazione, anche questa dovrebbe rispettare le norme contenute nel Codice dell'Amministrazione Digitale e in particolare quella che impone di scegliere, a parità di qualità, software in riuso o libero rispetto al proprietario. Norma spesso disattesa, purtroppo, si sa.
10. Software libero è coraggio.
Insegnare ai ragazzi il coraggio della libertà di essere liberi, di poter scegliere una strada diversa da quella che magari segue, in modo insensato, la massa è fondamentale.

jQuery, un mondo in una libreria

Cosa è jQuery?

jQuery è una libreria di funzioni (framework) javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework fornisce metodi e funzioni per gestire al meglio aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall'interprete javascript del browser. Come Includere jQuery al proprio progetto?

 

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script> (si noti che il tag <script> dovrebbe essere all'interno della sezione <head>). Per ottenere la libreria: http://jquery.com/download/
Da notare che: 
  1. Production version - questa versione è per il vostro sito web di produzione il codice è minimizzato e compresso;
  2. Development version - versione di sviluppo e di test, il codice è facilmente leggibile;
  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi locali:

<head> 
 <script src="jquery-1.12.0.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>  

Con percorsi remoti:

<head> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 <script src="mioscript.js"></script> 
</head>   

Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento (Leggere qui per maggiori dettagli).    

 

Qual è la sintassi di base? 

$(selector).action()  
  1. Il $ per definire jQuery 
  2. Un (selector) per "query (trovare)" elementi HTML 
  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato 

 Per esempio:

  • $(selector).action();
  • jQuery(‘p’).css(‘color’, ‘blue’);
  • $(‘p’).css(‘color’, ‘blue’);
  • $(this).hide();
  • $("p").hide();
  • $(".test").hide();
  • $("#test").hide();
Ovvero: selettore, azione, parametri.  

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.
Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.
    1. http://code.jquery.com/jquery-1.12.0.min.js
    2. http://code.jquery.com/ui/1.11.3/jquery-js
    3. http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-css
      In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

      Se invece usiamo il CDN di Google: 

      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  

       

      Cosa sono i Widget di jQuery UI?

      Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.
      jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.
      • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.
      • Autocomplete: suggerisce parole mentre l'utente sta scrivendo.
      • Button: inserisce pulsanti personalizzabili
      • Datepicker: Visualizza un calendario
      • Dialog: visualizza finestre di dialogo personalizzabili
      • Menu: crea menu nidificabili.
      • Progressbar: consente di visualizzare un indicatore di stato
      • Slider: Visualizza diapositive accessibili tramite tastiera
      • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.
      • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.
      • Tooltip: mostra informazioni addizionali.

       

      Come inserisco un accordion?

      <div id="accordion"> 
        <h3><a href="#">Primo headerheader</a></h3> 
        <div>First contenuto</div> 
        <h3><a href="#">Secondo header</a></h3> 
        <div>Secondo contenuto</div> 
      </div> 

      A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget
      $("#accordion").accordion(); 
      L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:
      • active : (selettore, jQuery, elemento DOM, numero, booleano – 'first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.
      • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.
      • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.
      Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

      Come inserisco un tabulatore?

      <div id="tabs"> 
       <ul> 
        <li><a href="#fragment-1"><span>Uno</span></a></li> 
        <li><a href="#fragment-2"><span>Due</span></a></li> 
        <li><a href="#fragment-3"><span>Tre</span></a></li> 
       </ul> 
       <div id="fragment-1"> 
        <p>Testo 1</p> 
       </div> 
       <div id="fragment-2"> 
        <p>Testo 2</p> 
       </div> 
       <div id="fragment-3"> 
        <p>Testo 3</p> 
       </div> 
      </div> 

      A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $("#tabs"). tabs (); 

      Cosa è il Themeroller/temi di jQuery UI

      la struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.
      Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.
      N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

      Cosa sono i Plugin jQuery? 

      In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:
      1. Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin
      2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.
      Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

      Come integro il plugin Colorbox?

       <link rel="stylesheet" href="colorbox.css" /> 
       <script src="../jquery.colorbox-min.js"></script> 
      Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.

      Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel="gipso"
      per poi utilizzare il selettore di attributi di jQuery per trovari tali immagini. $(document).ready(function(){ 
       //Examples of how to assign the Colorbox event to elements 
       $(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, }); 
       $(".flora").colorbox(); 
      });
               
      Nel prossimo post presentrò jQuery Mobile.

      Design, Strumenti e Processi colloborativi per il Web Design

      Strumenti e approcci all'interno di un workflow collaborativo

      Mi ricordo, ancora imberbe, un designer che impostava a 1024px o a 960px sull’asse orizzontale il proprio spazio di lavoro destinato al web e ricordo come il layout venisse concepito come un oggetto statico, l’influenza di un approccio ancora prettamente cartaceo era evidente. Eravamo a cavallo fra i due secoli e la nostra formazione ci faceva ragionare in A4. Da quel giorno, fortunatamente o sfortunatamente, molta acqua è passata sotto i ponti, i designer hanno iniziato a pensare, già dal wireframe, ad un nuovo approccio fluido e i nuovi software di wireframing, prototipizzazione e mockup ci hanno affidato strumenti software totalmente nuovi: Balsamiq Mockups, Axure RP Pro, Sketch 3 per citare i primi tre, degni di nota, che mi vengono in mente.


      Il wireframe viene considerato un documento a bassa-fedeltà, in parole povere non è altro che una bozza del lavoro che verrà svolto. Può essere considerato come lo scheletro del front-end dell’applicazione web, dove viene assicurata la giusta posizione dei blocchi principali del contenuto, una corretta struttura delle informazioni e descritte le principali interazioni utente-interfaccia.

      Il Wireframe ha la funzione di:

      • comunicare l’idea iniziale del progetto;
      • focalizzare l’attenzione solo su architettura e contenuti;
      • evitare le “distrazioni” della parte grafica;
      • comunicare i bloccchi/contenuto;
      • essere event. alla base di un successivo prototipo.
      La produzione di un wireframe deve coinvolgere le diverse figure del team: web project manager, sviluppatore, designer, copywriter... e può servire anche in fase di test di usabilità, oltre che nel momento in cui si sottopone al cliente la struttura prima che prenda forma attraverso grafica e codice. In questa fase il lavoro in team è fondamentale; non coinvolgere tutte le parti in causa durante questa fase iniziale potrebbe avere ripercussioni sull'intero sviluppo: tempo, soldi, qualità.


      Prototipo

      Produrre un prototipo, solitamente successivo al wireframe, è estramamente utile, rappresenta, secondo me, il mezzo più potente in fase di testing e documentazione in quanto questo genere di elaborato rappresenta il vero prototipo del sito (realizzato solitamete in HTML/CSS/JS) e permette all’utente di testare l’esperienza di navigazione. Il prototipo serve anche a validare specifiche fattibilità tecniche.

      Prototipi condivisi come antidoti al vicolo cieco

      La prototipazione, fatta bene, è un processo impegnativo ma fondamentale, serve a validare specifiche fattibilità tecniche e a costringere le diverse figure di un team alla concretezza del prodotto evitando così di ritornare a considerare eventuali variazioni che possano portare a vicoli ciechi. Frizzi e lazzi vengono facilmente additati.

      Mockup

      Il mockup è una rappresentazione del prodotto realizzato con il più alto livello di dettaglio e fedeltà possibile. Presa la struttura definitiva del wireframe vengono inseriti le parti visual. Un mockup serve a rendere l’idea del progetto finale rappresentando nel dettaglio i vari contenuti e le funzionalità base dell’applicazione web in maniera statica. I mockup rappresentano il modello più comprensibile e più vicino al prodotto finale.
      Il designer può partire dal mockup come elemento di riferimento dello sviluppo?
      Dipende dalle competenze del designer. Mi è capitato durante la fase di sviluppo di lavorare su mockup ottimi, pensati e strutturati in maniera multi-device. Inutile dire che può capitare, ancora oggi, di tornare a cavallo dei due secoli: accozzaglie visual prive di pensiero critico riguardo alla responsività e all'ergonomia del prodotto sono problematiche ancora cogenti. In questi casi accompagnare il designer su un tool di wirefreming non è tempo perso.
      Ho notato come sia a livello commerciale, sia in ambito accademico, si sia affermato Balsamiq Mockups un valido tool grafico per sviluppatori, designer e progettisti che permette di "schizzare" interfacce utente e schermate (wireframe) per siti web e applicazioni con elementi dal look "sketchy" (abbozzato). I prodotti finali possono essere esportati in formato PNG, PDF o XML.


      Anche Axure RP Pro consente wireframe a bassa e alta fedeltà, oltre che a prototipi navigabili: Axure RP Pro è senz’altro fra le migliori soluzioni; di questo software si apprezza soprattutto la velocità e facilità con cui permette di eseguire i wireframe e di convertirli in prototipi interattivi navigabili. La gestione drag&drop degli oggetti rende immediato l'utilizzo nella progettazione incentrata alla costruzione di UI per diversi device.


      Discorso a parte va fatto per Sketch, l’applicazione sviluppata da Bohemian Coding, che sta velocemente prendendo piede tra i designer come alternativa ai più celebri software Adobe. Photoshop non è di certo nato per progettare UI. Il software Adobe, usato dalla quasi totalità dei designer è, come suggerisce il nome, un editor di foto e immagini. Successivamente, grazie alla sua potenza e alla varietà delle sue funzioni, è stato adattato/declinato a strumento per la progettazione web. Grande/piccola pecca di Sketch: è disponibile unicamente per Mac OS.


      Il "Design for all" e il disastro dell'inclusione scolastica

      Mi sono stancato di sentir parlare di “Design for all”, quell’etichetta terminologica ab/usata da chi tratta tematiche relative all’accessibilità e all’usabilità; il termine “Design for all” inizia ad apparire frequentemente sui testi specialistici, nei convegni attinenti alla pubblica istruzione e al patrimonio culturale. Si tratta di un termine dal fascino anglosassone che anch’io ho frequentemente utilizzato ma, solo oggi, con grave ritardo, mi rendo conto come questa etichetta terminologica sia superficiale e contraddittoria.
      Mi riferisco soprattutto, ma non solo, alla scuola pubblica; gli istituti specializzati per ragazzi non vedenti, ad esempio, sono stati chiusi da decenni, sbandierando il vessillo politico dell’integrazione e dell’eguaglianza fra i ragazzi. Questi istituti fornivano personale specializzato, sussidi didattici adeguati e la possibilità di confrontarsi continuamente con altri ragazzi affetti dalla stessa minorazione visiva, ma comportavano lo sradicamento del ragazzo non vedente o ipovedente dall'ambiente sociale in cui era nato e la pressoché totale assenza di confronto con i coetanei normovedenti. Dal 1976 i bambini non vedenti ed ipovedenti sono stati inseriti nelle “scuole comuni”, si sono così ritrovati scaraventati in aule cosiddette “normali” dove possono convivere forme di disabilità diversissime fra di loro.
      Un compito non facile ha coinvolto: insegnanti, famiglie, associazioni, architetti… spesso con un’ottica troppo monografica, priva di vere linee guida.
      Ciò a cui abbiamo assistito è la naturale evoluzione che passa da Louis Braille alla consapevolezza della disabilità fisica dovuta allo scempio della prima guerra mondiale. Il tema dell’invalidità e delle disabilità acquista nel primo dopoguerra rilevanza sociale e di conseguenza economica, politica e culturale.
      Mi chiedo: è possibile che lo studente non vedente abbia le stesse necessità dello studente affetto da sordità? Per non parlare delle eterogenee problematiche fatte rientrare nell'ambito dell'amplissimo spettro autistico, problematica che coinvolge migliaia di famiglie e che non ha niente a che fare con le cinematografiche sindromi di Asperger. Per rispondere alle esigenze della singola disabilità ci vogliono competenze specifiche e mezzi specifici. Gli insegnanti, mi chiedo, ricevono le attività formative di aggiornamento professionale e gli strumenti necessari? Continuo a farmi domande: l’insegnante di sostegno deve quindi essere un tuttologo, con un bagaglio di risorse metodologiche e strumentali/digitali pressoché infinite? La scuola fornisce le adeguate strumentazioni digitali all’insegnante di sostegno, specifiche per quella determinata disabilità? 
      Ogni intervento serio, di vero sostegno ai ragazzi e alle famiglie, deve tenere conto della specificità e dell’unicità della Persona. Per rispondere alle esigenze della singola disabilità ci vogliono competenze specifiche e risorse specifiche; ci sono?
      Ho la sensazione che il mondo della progettazione digitale stia facendo gli stessi errori; qual è la figura specializzata nell’accessibilità informatica? Stiamo anche noi informatici cercando un tuttologo? Chi si occupa di deficit visivo e di ipovisione effettua ‘Scenari di envisioning’ prima di rilasciare una web application o un software per la didattica? Avete mai navigato i cosiddetti siti accessibili “a norma” di alcune province, comuni, università pubbliche?
      Se di "Design for all" si vorrà continuare a parlare dovremo trovare un modo di concepire il digitale affrontando la progettazione e la comunicazione calandola sulle diversità, NON sulla globalità e sull’omologazione; di quello che doveva essere il nuovo umanesimo digitale facciamone il vessillo dell’inclusione sociale e quindi culturale e economica delle nuove generazioni.
      La nostra generazione ne sarà capace? Sarà capace di preparare questo terreno ai nostri figli? L’evolversi delle pratiche sull’accessibilità e sull’usabilità in ambito digitale hanno bisogno di investimenti in infrastrutture e device di ultima generazione; ma la realtà stride con queste mie ridicole affermazioni: strutture fatiscenti, degradate e non a norma che i vigili del fuoco dovrebbero dichiarare inagibili, aule pollaio che le ASL dovrebbero chiudere, carenze croniche di impianti ed attrezzature, mancanza di aule speciali, laboratori, ausili tecnologici, informatizzazione, carta igienica, mancanza di impianti ed attrezzature sportive, gravi carenze igienico-sanitarie, non esistenza di mense, assenza di servizi e vera accessibilità delle strutture.
      Possiamo, dopo queste premesse, avere una visione minimamente applicabile di ‘Design for all’? Ogni tentativo produrrà, nei migliori dei casi, la frustrazione di tutti gli attori in campo: famiglie, docenti, insegnanti di sostegno…e, dei nostri figli!
      Solo oggi, con gravissimo ritardo, mi rendo conto che parlare di “Design for all” sia, oltre che superficiale e contraddittorio, ridicolo.

      Non soltanto Fake News

      10 tipi di disinformazione Fonte: EAVI Media Literacy for Citzenship https://eavi.eu/infographics-and-guides/