Salvatore Paone: 2018

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:

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale.

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:

Presentare contenuti multimediali ed animazioni
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

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

Unità digitali o learning object?

Unità digitali e learning object sono sempre risorse digitali, nel nostro caso orientate all’apprendimento.
Una unità digitale è qualsiasi risorsa che scaturisca dal format e dallo storyboard.
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.

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:

Xerte Online Toolkit
Un modello flessibile per la creazione di oggetti di apprendimento interattivo (detto anche XOT).
Bootstrap Template
Un modello responsivo per la distribuzione di contenuti a tutti i device.
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.

Il pannello a sinistra consente di inserire, copiare, eliminare e organizzare pagine.

Il pannello centrale è dove compilare i moduli per popolare e configurare il L.O. e ogni sua pagina.
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).

Il nome del progetto, un link e con relativo iframe per condividere il nostro L.O. che per impostazioni de default è privato.
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.

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.
Esporta per distribuzione SCORM: pacchetto autosufficiente secondo lo standard SCORM 1.2 oppure 2004.

Decision Tree Template

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”.
Oltre ad essere un template lo troviamo anche in: Interactivity > Decision Tree.
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:

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.

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.

Salvatore Paone

Conoscenza digitale in ambito storico-artistico

Non soltanto Fake News

10 tipi di disinformazione

Differenze fra XHTML e HTML5