Capire le Nuove Tecnologie un prodotto multimediale Istituto Comprensivo di Gambolò Corso di Formazione Capire le Nuove Tecnologie Creare un prodotto multimediale modulo 8 Francesca Rebuffi

Dal testo all’ipertesto OBIETTIVI Dal testo all’ipertesto Il concept del progetto L’organizzazione dei contenuti: flowchart e layout grafico L’organizzazione delle attività: storyboard e planning Indicazioni di Web Design

Accesso lineare alle informazioni. DAL TESTO ALL’IPERTESTO: definizione LIBRO TRADIZIONALE Statico: oggetto completamente definito nel contenuto e nella struttura. Accesso lineare alle informazioni. Scarsa interattività. IPERTESTO Dinamico: oggetto capace di modellarsi in base alle scelte dell’utente, di essere completato e ampliato nel tempo con elementi multimediali Accesso non sequenziale che consente di reperire in modo veloce le informazioni e decidere il livello di approfondimento. Possibilità d’interazione e scambio comunicativo bidirezionale.

@ All’interno di un ipertesto esistono tre tipologie di DAL TESTO ALL’IPERTESTO: COLLEGAMENTI All’interno di un ipertesto esistono tre tipologie di collegamenti = link Collegamenti di navigazione Pulsanti Avanti/Indietro Torna alla Home Page Pagina Informazioni Mappa del Sito Collegamenti di approfondimento Link attribuiti ad una singola parola (hot word) o frase che rimanda a una pagina particolare Collegamenti esterni Permette di collegarsi facendo click ad un sito Internet Inserisci >> Collegamento Ipertestuale @

Ipertesto Multimediale = Ipermedia DAL TESTO ALL’IPERTESTO: IPERMEDIA Ipertesto Multimediale = Ipermedia Alcuni collegamenti sono attribuiti ad elementi non testuali: - immagini; - animazioni; - suoni; - brani musicali; - video/filmati.

Il nostro Natale Entra DAL TESTO ALL’IPERTESTO: esempio È ora di preparare l’albero di Natale: - fai click sul vaso per far comparire l’albero; - ora posiziona le palline facendo click al centro dell’albero: conta…quante palline hai messo? - adesso bisogna mettere la stella: fai click sulla punta dell’albero per proseguire.

...il nostro Natale Raccontiamo... Disegniamo... Cantiamo… DAL TESTO ALL’IPERTESTO: esempio Raccontiamo... Disegniamo... Cantiamo… ...il nostro Natale

Racconto di Natale Il nostro spettacolo è stato bellissimo!!! DAL TESTO ALL’IPERTESTO: esempio Racconto di Natale Il nostro spettacolo è stato bellissimo!!! Abbiamo iniziato con un tradizionale canto di Natale… …poi è arrivato Babbo Natale e ci ha portato tanti regali e caramelle.

DAL TESTO ALL’IPERTESTO: esempio Disegno di Natale Ecco un bellissimo disegno che rappresenta Babbo Natale che, proprio durante la nostra festa è venuto a trovarci!!!

Canzone di Natale www.johnlennon.com DAL TESTO ALL’IPERTESTO: esempio So this is Christmas and what have you done another year over a new one just begun and so this Xmas I hope you have fun the near and the dear one the old and the young. A merry merry Christmas and happy New Year let's hope it's a good one without any fear. And, so this is Christmas (war is over) for weak and for strong (if you want it) for rich and the poor ones(War is over now) the road is so long and so happy Christmas for black and for white for the yellow and red ones let's stop all the fight. A merry merry Christmas and happy New Year let's hope it's a good one without any fear. And, so this is Christmas and what have we done another year over a new one just begun and, so happy Christmas we hope we have fun the near and the dear one the old and the young. A merry merry Christmas and happy New Year let's hope it's a good one without any fear. (War is over if you Want it war is over now) Canzone di Natale www.johnlennon.com Vuoi ascoltare la canzone? Fai click qui...

Scrivici... @ Scuola Materna di Gambolò - Tromello Dalle insegnanti DAL TESTO ALL’IPERTESTO: esempio Questo Ipertesto è stato realizzato da: Scuola Materna di Gambolò - Tromello Dalle insegnanti nome cognome, nome cognome, nome cognome Si ringrazia per la collaborazione il maestro Gigi © 2002/2003 Scrivici... @

www.nike.com Just do it agire re-agire “farlo e basta!” DA DOVE SI PARTE? IL CONCEPT DEL PROGETTO Il concept è la creatività prima della creatività: un’idea riassumibile in una frase, capace di generare un universo di cui questa frase è la promessa, la metafora comunicativa e di struttura. www.nike.com Just do it agire re-agire “farlo e basta!”

- il target dell’utente; - gli obiettivi del progetto; STESURA DEL CONCEPT Prima di organizzare i contenuti e il lavoro di sviluppo, è necessario definire: - il target dell’utente; - gli obiettivi del progetto; - la metodologia di sviluppo - la descrizione delle singole parti/sezioni - la valenza comunicativa delle scelte cromatiche, del layout, dei collegamenti, etc... Schema utile per la stesura del documento Concept in formato .doc

Prodotto Multimediale STESURA DEL CONCEPT: aree concettuali Area Formativa Area Documentativa Prodotto Multimediale Area Istituzionale

Indicazioni utili per costruire la diapositiva con il Flowchart L’ORGANIZZAZIONE DEI CONTENUTI: FLOWCHART Il flowchart individua la disposizione delle sezioni che compongono il prodotto multimediale e evidenzia le modalità di navigazione e i collegamenti tra le diverse sezioni. È necessario definire sempre un PUNTO D’INGRESSO chiamato home page, preceduta da una Welcome Page (facoltativa) che introduce in modo più “coreografico” l’ipertesto; queste due pagine possono essere collegate anche tramite un link posizionato su un elemento grafico particolare o dalla scritta Entra. È necessario rappresentare tutte le sezioni dell’ipertesto, evidenziando in particolare i collegamenti tra le “pagine”, tralasciando i collegamenti interni (hotwords). Indicazioni utili per costruire la diapositiva con il Flowchart

LIBRO TRADIZIONALE IPERTESTO Copertina Welcome Page Indice Home page DAL TESTO ALL’IPERTESTO: definizione LIBRO TRADIZIONALE IPERTESTO Copertina Welcome Page Indice Home page Capitoli - Testi Pagine Interne Immagini Animazioni audio - video Bibliografia Biografia dell’autore Pagine di approfondimento Glossario

Welcome Page Il Nostro Natale Informazioni Home Page Raccontiamo… L’ORGANIZZAZIONE DEI CONTENUTI: FLOWCHART Welcome Page Il Nostro Natale Informazioni Home Page Raccontiamo… Disegniamo… Cantiamo... Raccontiamo Disegniamo Cantiamo

Obiettivi e metodologia Flowchart- Mappa del Sito: “L’Isola che non c’è” Peter Pan’ Story La nostra Scuola Programmazione 01/02 Home page Obiettivi e metodologia Immagine Mappa Web School Content Gruppi di Lavoro Mappa del Progetto Anno di Formazione Gruppo 1 Gruppo 2 Gruppo 3 Gruppo 4

Flowchart: “L’Isola che non c’è” Home page

Mappa del Progetto Flowchart: “L’Isola che non c’è” Immagine Mappa

Gruppi di Lavoro Gruppo 1 Gruppo 2 Gruppo 3 Gruppo 4 Flowchart: “L’Isola che non c’è” Gruppi di Lavoro Gruppo 1 Gruppo 2 Gruppo 3 Gruppo 4

Organizzazione grafica di diversi elementi, tra i quali: L’ORGANIZZAZIONE DEI CONTENUTI: Layout grafico delle sezioni Organizzazione grafica di diversi elementi, tra i quali: - testo (uniformità di carattere e dimensione) - immagini - barra di navigazione - scelte cromatiche dei link, delle parole importanti (titoli, nomi propri, etc...)

Pagina precedente HOME Pagina successiva L’ORGANIZZAZIONE DEI CONTENUTI: Layout grafico delle sezioni Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire. pippo@ciao.com Pagina precedente HOME Pagina successiva

Pagina precedente HOME Pagina successiva HOME L’ORGANIZZAZIONE DEI CONTENUTI: Layout grafico delle sezioni Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire. pippo@ciao.com Pagina precedente HOME Pagina successiva HOME

@ << HOME >> L’ORGANIZZAZIONE DEI CONTENUTI: Layout grafico delle sezioni Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire, Testo da inserire Testo da inserire. @ << HOME >>

- numero delle immagini - risorse testuali - link esterni da segnalare L’ORGANIZZAZIONE DELLE ATTIVITÀ: STORYBOARD Lo storyboard è il documento che contiene la descrizione dettagliata del prodotto multimediale. - numero delle pagine - numero delle immagini - risorse testuali - link esterni da segnalare Contiene inoltre la descrizione di ogni pagina: - formato del testo e fonte - numero delle immagini e formato - scelte cromatiche - annotazioni dell’autore Indicazioni utili per la stesura dello Storyboard in formato .doc

E-MAIL: pippo@ciao.com !!da inserire in ogni pagina!! L’ORGANIZZAZIONE DELLE ATTIVITÀ: STORYBOARD TESTO: digitalizzato in formato .doc da inserire in formato Times New Roman 10 corsivo IMMAGINI: 3 digitalizzate da ridurre con cornice nera di spessore 2,5 pt E-MAIL: pippo@ciao.com !!da inserire in ogni pagina!! LINK: sempre blu sottolineate BARRA DI NAVIGAZIONE da posizionare in basso al centro: << pag precedente in rosso; << pag successiva in verde; icona HOME da inserire sempre al centro

attività/risorse umane/tempo/totale L’ORGANIZZAZIONE DELLE ATTIVITÀ: PLANNING Dopo aver definito lo storyboard è possibile redigere il planning delle attività che mette in relazione: attività/risorse umane/tempo/totale Indicazioni utili per la stesura del Planning in formato .xls