Jamboo's Webs and Blogs - XHTML e CSS

Corsi su Drupal: nuova edizione (a.s. 2009/2010)

Wed, 29 Apr 2009 19:15:58 +0200

Una Piattaforma WEB per la Scuola con Drupal
un potente CMS Open Source

Risorse, Strumenti e Soluzioni

Circolare dell'Ufficio Scolastico Provinciale di Mantova
Prot. n° 3051/C24a del 16 marzo 2009
OGGETTO: Piano provinciale di formazione per le Tecnologie dell’informazione e per la comunicazione nelle scuole (attività al 30.06.09).

Preleva la circolare [pdf 42KB] dell'U.S.P. di Mantova

Area Web: formazione per l’analisi, la progettazione e la realizzazione di siti web accessibili e dinamici.

Sede del corso: CeRT-TIC - I.T.C. A. Pitentino – via T. Tasso, n. 5 Mantova

Orario delle lezioni frontali: dalle ore 15:00 alle ore 18:00
giorno della settimana: giovedì.

Date delle prime 6 lezioni: 23 aprile, 7/14/21/28 maggio e 4 giugno.

La partecipazione è riservata prevalentemente al personale Docente, Amministrativo e Tecnico delle Scuole statali della Provincia di Mantova.

Progetto e attività di formazione a cura di Mario Varini
Direttore sga I.C. di Castellucchio
EUCIP IT Administrator certified AICA-USR Lombardia
Tutor C progetto ForTic USR Lombardia
E-tutor progetto ForTutor USR Lombardia
Esperto di Accessibilità dei siti web scolastici
Formatore nel progetto Porteapertesulweb USR Lombardia

Il corso sarà tenuto in modalità blended (60 ore distribuite in tre moduli e 40 ore di esercitazioni ed attività di formazione on line).
Prerequisiti richiesti ai corsisti: abilità nell'uso del computer: elaborazione testi, navigazione su Internet, utilizzo della posta elettronica, installare e disinstallare programmi, operazioni su file e cartelle).

Accedi al corso

Scuola, accessibilità e comunicazione web: Giornata aperta sul web 2009

Tue, 28 Apr 2009 21:51:46 +0200

Per maggiori informazioni accedi al sito Porteapertesulweb(link esterno).

Data

11 maggio 2009

Luogo

IT Gentileschi,via Natta, 11 - Milano (MM1 Lampugnano)

Registrazione

Per partecipare all'evento è necessario compilare l'apposito modulo di registrazione (link esterno al sito dell'USR Lombardia).

L’Ufficio Scolastico per la Lombardia organizza la Giornata aperta sul web 2009, in programma lunedì 11 maggio 2009 presso l’auditorium dell’Istituto Gentileschi di via Natta 11 a Milano.

L’evento sarà un’occasione per riflettere sul ruolo della scuola in tema di e-inclusion, con particolare riferimento alla diffusione del “pensiero accessibile”, alla luce dei nuovi orientamenti europei e nazionali in materia e dei percorsi promossi dalle scuole aderenti alla comunità di pratica Porte aperte sul web, attiva dal 2003 sul territorio lombardo e aperta alla partecipazione di scuole di tutte le regioni.

Tra gli interventi, alle ore 12:00 Mario Varini (Direttore sga dell'I.C. di Castellucchio MN) e Daniela Floriduz (coordinatrice lista Docenti - UICI) parleranno di Atomi e gomitoli: alla ricerca del buon senso nel web di tutti.

Il pomeriggio sarà dedicato a 11 Workshop tematici (siti scolastici, navigazione al buio, matematica accessibile, documentazione digitale, temi accessibili per Drupal e Plone, ma anche web 2.0, formazione a distanza a scuola e dall’ospedale, radiotv sul web, progetto One laptop per child) aperti anche alla partecipazione degli studenti.

Ai miei allievi suggerisco Il Workshop B3 (dalle ore 16:00 alle ore 17:15): Drupal insieme, tavola rotonda tecnica per docenti webmaster. Coordina Mario Varini, dedicato ai webmaster di siti scolastici che già utilizzano Drupal.

Per maggiori informazioni consultare il programma con le sintesi aggiornate degli interventi (link esterno).

jamboo

Scrivere per il web

Sun, 26 Apr 2009 13:40:54 +0200

Quando si parla di creare un sito per il Web, si pensa soprattutto alla progettazione e alla realizzazione dell’aspetto grafico. Si dimentica spesso che anche la tipografia, ovvero la tecnica della disposizione dei caratteri, ha un valore visivo, e non solo verbale: infatti il lettore prima scansiona le forme nella pagina e poi eventualmente decide di leggere il contenuto. In questo senso l’utente stabilisce quasi inconsciamente se approcciare la lettura del testo o meno in base alla convenienza e l’attrazione del testo, ovvero secondo la sua “usabilità.”

Le stesse tecniche e convinzioni della tipografia che sono applicate per la stampa vengono adottate anche per Internet, però il risultato finale, come viene reso il testo, è diverso poiché diverso è il mezzo usato. Per quanto riguarda riviste e giornali, il testo è reso minimamente a 1200 dpi (dots per inch), mentre lo schermo può mostrarlo a 72-o 96-dpi. Per questo motivo alcuni font sono più o meno adatti per essere letti sullo schermo o stampati su carta. Ad esempio alcuni font come Times, Times Roman, Helvetica, Arial sono stati propriamente creati per la stampa, mentre altri, come Verdana, Georgia, Times New Roman, Geneva and New York, sono stati ottimizzati per essere più leggibili sullo schermo.

Alcune modalità di navigazione

Sun, 26 Apr 2009 13:39:05 +0200

Le barre di navigazione sono molto comuni nei siti web. Esse forniscono il meccanismo principale attraverso cui gli utenti sfogliano un sito, quindi l’apparenza di una barra di navigazione stabilisce la mappa concettuale dell’utente necessaria per capire come un sito è organizzato. In altri termini una barra navigazionale è un sommario dell’intera organizzazione del sito. Stabilire quali elementi includere nella barra di navigazione è un m0mento critico nel processo di design.

Troppi link creano confusione, pochissimi link rendono i percorsi più lunghi rallentandone la navigazione. Tipicamente gli utenti hanno bisogno di arrivare da qualunque punto essi si trovano sulla Home Page, su qualunque pagina si trovi prima della pagina corrente e sulla prima pagina della sezione corrente. Secondo il tipo di compito gli utenti hanno anche bisogno di accedere alla pagina successiva o alla pagina precedente secondo una sequenza.

Navigazione minima

Nella sua forma minima, una mappa del sito o una Home Page può contenere collegamenti a tutte le pagine del sito, e ciascuna pagina necessita di un solo link (il link Home per tornare indietro).

Come sviluppare una architettura

Sun, 26 Apr 2009 13:36:31 +0200

I due approcci principali per sviluppare una iniziale architettura di un sito web sono quello che va dal basso verso l’alto e quello che va dall’alto verso il basso.

Nella struttura dall’alto verso il basso si parte dalla definizione di categorie principali, individuando per ogni categoria delle sottocategorie. Se consideriamo ad esempio un sito che appartenga al genere della poesia, possiamo individuare come categorie principali le voci Poeti, Poesie, ecc. Possiamo suddividere la categoria Poeti in Paese, Periodo storico o Nomi, mentre possiamo suddividere la categoria Poesie in Sonetti, Versi liberi, Canzoni ecc. così procedendo fino a quando non riteniamo di avere tutti gli argomenti di cui abbiamo bisogno. Partiamo quindi da un livello di categoria alto scendendo giù verso l’unità minima di informazione.

Nella struttura dal basso verso l’alto, invece, avviene il processo inverso. Si parte dal raccogliere tutto il materiale che si ha a disposizione per poi successivamente determinare come questo materiale si può raggruppare. Si parte, dunque, dall’unità minima di informazione salendo su verso categorie alte.

Il processo di sviluppo di una architettura

Sun, 26 Apr 2009 13:35:13 +0200

Per delineare l’architettura di un sito web è necessario raccogliere tutto il materiale di cui si è in possesso e organizzarlo secondo una struttura che aiuti l’utente a navigare efficientemente. Per far ciò è utile esporre le informazioni che si hanno a disposizione in un sito non in linea o un diagramma che avrà la funzione di guidare lo sviluppo del sito. Questo processo deve basarsi sull’analisi dei requisiti del sito, le relazioni inerenti al contenuto e l’analisi dell’utente target.

Alcune tappe fondamentali dell’architettura dell’informazione sono:

La valutazione del contenuto;
La creazione e valutazione del nucleo della struttura;
L’aggiunzione di vie secondarie più brevi, di link ridondanti e pagine di supporto;
Lo sviluppo e valutazione di una barra di navigazione e di indizi orientativi;

La valutazione del contenuto

È necessario identificare i pezzi di contenuto del sito web è realizzare quali informazioni si posseggono e quali informazioni sono necessarie all’utente, cercando di specificare e creare i contenuti mancanti. È inoltre importante valutare la qualità e la completezza del proprio contenuto.

Il contenuto, l'espressione e la forma del genere

Sun, 26 Apr 2009 13:32:19 +0200

Un visitatore del web può riconoscere il genere di un sito web dal suo contenuto, ma il riconoscimento attraverso il solo contenuto potrebbe costare più tempo del riconoscimento attraverso l’espressione e la forma. È un dato di fatto che l’espressione e la forma sono riconosciute a livello di processi sensoriali più immediati rispetto al contenuto. La densità del testo o elementi che lampeggiano possono ad esempio essere captati dalla nostra mente attraverso il semplice sguardo, un processo più semplice della lettura. Il contenuto testuale, di contro, implica l’attivazione di processi più profondi e complicati che riguardano il livello semantico. Analizzare il significante occupa più tempo del solo guardare. Ne risulta che gli utenti afferrano il genere del sito web valutando la sua espressione e la sua forma, e il contenuto testuale serve successivamente a correggere o a perfezionare il loro giudizio iniziale. Un sito web è più al centro dell’utente quanto più il suo contenuto, la sua espressione e la sua forma siano compatibili tra di loro.

Letture: Information Architecture

Sun, 26 Apr 2009 13:14:02 +0200

Richard Saul Wurman coniò il termine “Information Architecture” (architettura dell’informazione) per la prima volta nel 1975 e definì se stesso un “architetto dell’informazione” (frontwheeldrive.com 2002). L’architettura dell’informazione si riferisce alla struttura o all’organizzazione di un sito web e specialmente a come le singole pagine siano relazionate tra loro. Coinvolge fattori come l’analisi e la pianificazione del contenuto, l’organizzazione della pagina, le etichette, le tecniche di ricerca e la creazione della navigazione. I principi dell’architettura dell’informazione sono radicati nella creazione di banche dati e nel ricupero dell’informazione con forti influenze provenienti dai campi dell’HCI (Human-Computer Interaction), della scienza libraria, delle tecniche di scrittura e della psicologia (organizzazione di concetti e categorie).

Raramente esiste una singola organizzazione logica dell’informazione, e anche se ce ne fosse una sola questa potrebbe non essere quella adatta all’utente. La stessa informazione può assumere svariate strutture logiche secondo come le persone la pensano, ne parlano o la usano. Una organizzazione dell’informazione psicologica o basata sull’uso, riconosce i limiti della mente umana come la capacità della memoria e la necessità di assimilare informazioni attraverso blocchi sequenziali e ben definiti.

Calendario delle esercitazioni in auto formazione

Sat, 25 Apr 2009 15:37:36 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Date consegna esercitazioni modulo 1

7 maggio 2009
Da doc a html - esercizio n.1 [ore 1]
http://www.mariovarini.it/drupal/contenuto_conversioni_es_1
14 maggio 2009
Da doc a html - esercizio n.2 [ore 1]
http://www.mariovarini.it/drupal/contenuto_conversioni_es_2
21 maggio 2009
CSS - come formattare un articolo [ore 1]
http://www.mariovarini.it/drupal/certic_contenuto_css_1
28 maggio 2009
CSS - layout a 3 colonne [ore 1]
http://www.mariovarini.it/drupal/certic_contenuto_css_2
30 giugno 2009
Checklist per l'accessibilità [ore 2]
http://www.mariovarini.it/drupal/checklist_per_laccessibilit
31 luglio 2009
Checklist per l'usabilità [ore 2]
http://www.mariovarini.it/drupal/usabilit

Date consegna esercitazioni modulo 2

Letture: Interactive Dialogue Model

Sat, 25 Apr 2009 11:49:19 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

[La seguente lettura fa parte dei materiali di studio utilizzati durante i corsi D.O.L. - Politecnico di Milano a.s. 2007/2008]

Nota - Integrare la lettura con la navigazione nei seguenti link:

Navigare nella sezione “Collection” del sito della National Gallery di Washington ( www. - nga.gov ) e identificare 2 single topics e 1 multiple topic.
Navigare nel sito Munch und Berlin ( www.munchundberlin.org ) e identificare almeno due relazioni semantiche e mostrare i link sulla pagina che permettono di attivarle.
Navigare nel sito Munch und Berlin ( www.munchundberlin.org ) e identificare almeno due group of topic e mostrare le due schermate corrispondenti.

L'information Architecture: Pagine e strutture, la progettazione logica

Introduzione a I.D.M.

L’information architecture gerarchica ha dei vantaggi (efficiente organizzazione di contenuti – se in numero limitato) e degli svantaggi (rigidità della navigazione e non flessibilità all’aumentare della quantità di materiale da organizzare); al contempo, l’approccio puramente ipertestuale ha da parte sua dei vantaggi (supporto alla navigazione più “libera”, per associazione e percorsi trasversali) e degli svantaggi (rischio di disorientamento e confusione per il lettore).

CSS: Layout a 3 colonne - esercizio n.2

Sat, 25 Apr 2009 03:40:18 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Utilizzo dei fogli di stile 2

Ore di autoformazione: 1

Consegna esercitazione: entro il 28 maggio 2009

Modalità di consegna: realizzare la pagina proposta, inserire contenuti minimi e trasmetterla in un file zip unitamente a eventuali immagini e fogli di style correlati.

Materiali: Scarica lo zip d'esempio.:

[documentazione ed esempi a cura di http://www.constile.org ]

In questo esercizio vedremo come realizzare un layout a tre colonne sfruttando il posizionamento assoluto invece della proprietà float. Attraverso tre diversi CSS, col medesimo codice XHTML, otterremo tre diversi tipi di layout: a larghezza prefissata, liquido con colonne laterali di larghezza prefissata, completamente liquido.

CSS - Come formattare un articolo - esercizio n.1

Sat, 25 Apr 2009 03:35:23 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Utilizzo dei fogli di stile 2

Ore di autoformazione: 1

Consegna esercitazione: entro il 28 maggio 2009

Modalità di consegna: realizzare la pagina proposta, inserire contenuti minimi e trasmetterla in un file zip unitamente a eventuali immagini e fogli di style correlati.

Materiali: Scarica lo zip d'esempio.:

[documentazione ed esempi a cura di http://www.constile.org ]

In questo esercizio vedremo come formattare l'articolo mostrato nella pagina di esempio rivolgendo particolare attenzione ai paragrafi, alle immagini e alle citazioni.

Esercitazioni

Wed, 22 Apr 2009 19:16:56 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Per gli esercizi proposti vengono riconosciute numero 8 ore on-line

Scrivere codice XHTML e CSS pulito e validato è di fondamentale importanza. Quando vi troverete a gestire veramente il sito della vostra scuola, vi accorgerete che la totalità dei documenti che vi saranno consegnati per la pubblicazione dovrà essere convertita in HTML e vi accorgerete pure che l'operazione non sarà per voi indolore! Se non conoscete e mettete in atto i rudimenti del codice in breve tempo vi troverete ad avere a che fare con un sito con grosse difficoltà di distribuzione dell'informazione: pagine pesanti piene di codice proprietario ed inutile e inaccessibili ai disabili psicosisici e tecnologici.

Da doc a html - esercizio n.2

Wed, 22 Apr 2009 18:57:01 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Scrittura di codice XHTML

effettuare la conversione da file .doc a .htm senza l'utilizzo di editor html (Es. Dreamweaver)

Validare il documento.htm sul w3c

Consegna esercitazione: trasmettere il file cognome_nome_12.htm (via email a Mario Varini): entro il 14 maggio 2009

Ore di autoformazione: 1

Contenuti dell'esercizio

Tabelle
Struttura del documento (Titoli, sottotitoli, testo ecc.)
Formattazione caratteri
Uso di caratteri speciali: & è é à ò ù ì * ^ < > ... (amp)
Acronimi

Da doc a html - esercizio n.1

Wed, 22 Apr 2009 18:47:04 +0200

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Scrittura di codice XHTML

Effettuare la conversione da file .doc a .htm senza l'utilizzo di editor html (Es. Dreamweaver)

Validare il documento .htm sul w3c

Consegna esercitazione: trasmettere il file cognome_nome_11.htm (via email a Mario Varini): entro il 7 maggio 2009

Ore di autoformazione: 1

Contenuti dell'esercizio

Elenchi puntati
Elenchi numerati
Struttura del documento (Titoli, sottotitoli, testo ecc.)
Formattazione caratteri
Uso di caratteri speciali: & è é à ò ù ì * ^ < > ... (amp)

Jamboo's Webs and Blogs - XHTML e CSS

Corsi su Drupal: nuova edizione (a.s. 2009/2010)

Una Piattaforma WEB per la Scuola con Drupalun potente CMS Open Source

Accedi al corso

Scuola, accessibilità e comunicazione web: Giornata aperta sul web 2009

Data

Luogo

Registrazione

Scrivere per il web

Alcune modalità di navigazione

Navigazione minima

Come sviluppare una architettura

Il processo di sviluppo di una architettura

La valutazione del contenuto

Il contenuto, l'espressione e la forma del genere

Letture: Information Architecture

Calendario delle esercitazioni in auto formazione

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Letture: Interactive Dialogue Model

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

L'information Architecture: Pagine e strutture, la progettazione logica

Introduzione a I.D.M.

CSS: Layout a 3 colonne - esercizio n.2

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

CSS - Come formattare un articolo - esercizio n.1

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Esercitazioni

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Da doc a html - esercizio n.2

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Da doc a html - esercizio n.1

Una Piattaforma WEB per la Scuola con Drupal un potente CMS Open Source

Una Piattaforma WEB per la Scuola con Drupal
un potente CMS Open Source