Isa Maria Sozzi -DOL ESERCITAZIONE 1 Selezionare un sito esistente di buon impatto grafico e costruito professionalmente e individuare tipo di font utilizzati, uso del colore, immagini, layout Cercherò di descrivere la grafica del sito dedicato alla formazione dei docenti in base al D.L.59 sul portale Puntoedu http://puntoeduri.indire.it/formazionedl59. In questo sito si trovano molti materiali per guidare gli insegnanti (dalla scuola dell'infanzia alle medie inferiori) nell'applicazione della legge di riforma Moratti, per quanto riguarda l'organizzazione scolastica e la funzione tutoriale (area generale-innovazione), l'introduzione dell'informatica e dell'inglese. Non sono previste attività di formazione tecnica, ma solo sulla metodologia e la didattica. L'accesso avviene tramite nickname e password stabiliti da Indire, che vengono costantemente monitorati ad ogni accesso di pagina, impedendo o rendendo difficile ai meno esperti la consultazione off-line dei contenuti Io ho l'accesso ai contenuti dell'area informatica, in quanto tutor di un corso in presenza, il layout è comunque simile per tutte le aree. Dal portale puntoedu si accede all'home page specifica, dove avviene la procedura di login.
Dall'home-page si entra nella pagina di scelta dell'area. Qui predominano i toni del verde Infine si entra nella pagina di sintesi di ogni area, per poi accedere ai singoli contenuti (circa un centinaio), attraverso una pagina riassuntiva per argomento. Dalla barra è possibile passare alle sottosezione, cui si è abilitati, cioè: • la classe virtuale per la comunicazione sincrona (chat) e asincrona (forum) coi corsisti del corso in presenza • il portfolio dei propri elaborati/crediti • l'help • il registro riservato al tutor per la validazione dei lavori inviati sulla piattaforma e la segnalazione delle assenze ecc. Le pagine dei singoli contenuti sono tutte strutturate allo stesso modo, anche se in alcune i contenuti sono erogati tramite file flash. Ogni contenuto viene avviato a tutto schermo, senza barre del browser. Anche il processo di chiusura è governato da un pulsante interno javascript. In caso di difficoltà nel caricamento o di disconnessione bisogna ricorrere al Task Manager di Windows o simili. Si può carica una sola pagina alla volta, usando il comando per aprire la pagina successiva in un'altra finestra, appare un messaggio di errore. Non ci sono variazioni nella visualizzazione con impostazioni diverse dello schermo o con browser. differenti, perché ben 9/10 del codice della pagina e il foglio di stile collegato sono destinati a codificare tutti i parametri. Appaiono solo lievi differenze nelle sfumature di colore, dovute alle diverse palette e tipo di monitor.
Isa Maria Sozzi -DOL
L'immagine fotografa la prima pagina di un contenuto. Predominano i toni dell'azzurro, comuni anche alle pagine interne. Il layout è definito tramite tabelle annidate, con allineamento centrato, larghe 750 px. In alto si trova la barra di navigazione generale, costruita tramite tabelle. Contengono le immagini per il ritorno alla pagina generale e la chiusura del contenuto. In basso è presente un'altra immagine che “incornicia” i contenuti. La parte centrale è formata da una tabella al 100%, con sfondo bianco, che ne contiene un'altra di 730 px. Il colore di sfondo, tramite foglio di stile, è #78AFB0. Il titolo è contenuto in un'altra tabella larga 600 px, con bordi di 2 px bianchi, colore di sfondo #B2DDDE. Il testo è formattato con font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif grandezza di 16px grassetto in colore #026169. I contenuti sono formattati con font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif, grandezza di 11px, interspazio di 16px e colore nero. I titoletti hanno grandezza di 12 px. Avviando l'attività si visualizzano le pagine interne di contenuto. Anche qui la formattazione del layout è del tutto simile alla pagina di entrata. Solamente la tabella del corpo centrale è suddivisa in due colonne. Nella colonna di sinistra, tramite un elenco puntato (con carattere grassetto e pallini, tutto in bianco), si può navigare nelle 4-6 pagine del contenuto. In genere sono presenti poche immagini (quasi sempre una per pagina), oltre quelle comuni all'interfaccia, scelte tra riproduzioni artistiche e comunque con tonalità di colore ben armonizzate con lo sfondo. Si trovano sempre nella colonna a destra, con allineamento destro o sinistro, in genere alternato tra una pagina e l'altra. Hanno dimensioni variabili, ma la maggior parte è di circa 320x240 px. Il formato più usato è jpg, mentre pulsanti, immagini per la navigazione e schemi sono gif. Non sono presenti gif animate, anche perché una decina di contenuti sono erogati in flash. Sono presenti alcuni filmati, specie nelle parti flash, da scaricare a parte (dimensioni notevoli, formato non adatto allo streaming), ma io ho avuto tempi lunghi anche con una connessione ADSL e ho dovuto trovare da sola il codec adatto alla visualizzazione, perché nella pagina non è
Isa Maria Sozzi -DOL presente nessuna nota! La cosa è comune ad altre pagine, come la chat (necessita java runtime installato), i contenuti in flash (visualizzatori). Le uniche indicazioni riportano al sito di Adobe per scaricare l'ultima versione del Reader, per leggere alcuni allegati. In ogni pagina si trovano uno o al massimo due paragrafi, con allineamento a bandiera. L'eventuale spazio verticale tra contenuti leggermente diversi per significato è ottenuto con <BR>. La mia impressione, durante la prima navigazione, è stata di un sito gradevole, uniforme e quindi facilmente navigabile e “riposante”. Poi, ripensandoci, mi sono sorti dubbi sulla sua usabilità. In particolare le dimensioni dei caratteri mi sono sembrate piccole e impossibili da modificare da browser. Inoltre, all'interno dei contenuti, i link già visitati vengono visualizzati con la formattazione del testo normale, rendendo difficile un nuovo accesso ai contenuti. Mancando la barra di stato non si sa mai, al passaggio de mouse, se il link porti ad una pagina esterna al sito oppure no, costringendo a clickare alla cieca.