Vedremo in questa fase come realizzare in modo rapido e gratuito un sito web e la guida che segue vi condurrà passo passo alla realizzazione di una struttura di un sito di un Centro Territoriale di Sostegno. I contenuti testuali, immagini e filmati saranno di esempio. Per la struttura di navigazione si prenderà come esempio ciò che attualmente è presente nei siti attualmente disponibili dei Centri Nuove Tecnologie e Disabilità del Piemonte:

• CTS – Verbano Cusio Ossola
• CTS – Biella
• CTS – Cuneo
• CTS – Novara
• CTS – Torino

---

Nota sull’accessibilità dei siti web realizzati con Google Site

Vista la brevità del corso non si daranno dettagli in merito all’accessibilità dei siti creati con Google Sites, di cui potrò poi in successive lezioni (anche on-line) dare supporto, in ogni caso si tenga in conto che il 14 settembre 2011 Google ha annunciato la serie di aggiornamenti per rendere le sue applicazioni più accessibilialla comunità dei non vedenti ed ipovedenti. Per Google Docs e Google Sites sono state inserite nuove scorciatoie da tastiera e migliorato notevolmente il supporto agli screen reader (JAWS e ChromeVox) per gli utenti non vedenti.

Per tutti i dettagli sui miglioramenti seguite il link: Improved Accessibility in Google Docs and Sites

Pagina di riferimento sull’accessibilità: Making Google Accessible

---

Ippotizziamo che il gruppo di lavoro si trovi nella seguente condizione:

• pochissimi fondi economici per la realizzazione di un sito
• tempi di produzione brevi (supponiamo meno di 3 ore) 🙂
• tempi di implementazione sito scarsi
• poche o nulle le competenze di programmazione html
• nessun software specifico per la realizzazione di un sito
• tantissima documentazione da rendere pubblica
• necessità di fare rete con altri centri
• condividere istantaneamente in ogni luogo con ogni tipo di dispositivo l’informazione (documenti, presentazioni, form, calendarie, ecc…)
• rapidità di comunicazione

Supponiamo inoltre che l’idea di progetto iniziale della home page preveda una struttura a colonne dove:

• sull’estrema sinistra sia disposto e ben visibile un blocco  menù di navigazione,
• seguito da un blocco in cui viene messo ben in mostra l’orario di ricevimento del centro e i recapiti (telefono, fax, e-mail)
• e successivamente un’area link agli altri centri del Piemonte
• e successivamente altri blocchi

La parte centrale del sito sarà suddivisa in due colonne in cui disporremo:

• area news
• evento in evidenza
• video della settimana importante
• calendario appuntamenti
• feed rss a sito importante
• altro

La struttura della home page avrà la seguente disposizione di massima, che potrà essere variata dinamicamente, nella grafica e nella disposizione dei blocchi in ogni momento.

Si tenga in conto che per le altre pagine si possono scegliere blocchi informativi disposti in altre zone della pagina.

Partiamo con la realizzazione!

Nel caso in cui voi desiderate accedere a Google Sites al di fuori del dominio vocescuola.org potete procedere come segue:

Andata su www.google.it e fare click su “Altro” ed andate in “Altro Ancora”

Selezionate, dall’elenco di tutti i prodotti Google, Sites:

Verrete reindirizzati sulla pagina principale:

L’accesso diretto alla pagina precedente è: http://www.google.it/sites

Se siete studenti del corso e non possedete un account Google, o ne create uno, oppure accedete seguendo il link:

https://www.google.com/a/cpanel/vocescuola.org/

In questo caso la prima pagina che vi verrà mostrata sarà:

Inserirete l’utente e la password che vi verrà consegnato, e poi un click su “Sign in“, vi verrà mostrata la pagina:

Selezionate Sites per creare i vostri siti.

Al primo avvesso vi apparirà un’interfaccia in lingua inglese, cambiamo la lingua facendo click sul pulsante in alto a destra a forma di ingranaggio e selezioniamo: “Users settings”

Nella pagina che vi si presenta, nella sezione Language, selezionate: “Italiano”

Selezionate il Time Zone relativo all’Italia:

Fate click su “SAVE” per confermare  le modifiche, verrete inoltrati sull’interfaccia di inizio creazione siti in lingua italiano.

Un click su “CREA” per incominciare a costrui il vostro sito.

 

Da “Sfoglia galleria per altri modelli” potete accedere alla lista dei temi grafici che potete assegnare al vostro sito, per questo corso procederemo in altro modo, una volta terminato il corso potrete accedere a questa funzionalità.

In “assegna un nome al tuo sito:” inserite il nome del vostro sito, ad Esempio: Centro nuove tecnologie e disabilità, all’interno del campo “Posizione del sito” google vi propone come ultima parte dell’url, il nome del sito appena assegnato eliminando spazi e accentate, ma potete variare a vostro piacimento il testo, io per brevità ho scelto “cts-torino” (voi scegliete ad esempio un nome che reca anche la vostra provincia).

 

 

Fate un click su “Seleziona un tema“, si aprirà una lista di temi grafici per il vostro sito, per ora scegliete il primo “Iceberg”, vi mostrerò più avanti come cambiare il tema al sito che si sta realizzando.

 

Aprite ora il pannello “Altre opzioni”

Ed inserite in “Categorie del sito” la categoria di appartenenza del vostro sito, nel nostro caso “scuola, formazione, tecnologie, disabilità” e in “Descrizione del sito” la descrizione breve della vostra attività, io per brevità ho inserito nuovamente il titolo del sito.

Successivamente dovrete stabilire a chi è visibile il vostro sito:

• solo alle persone che hanno un account nel dominio vocescuola.org (questa voce ovviamente non comparirà se avete un vostro account personale gmail)
• solo alle persone specificate

 

Per ora lasciate la visibilità ai soli utenti di vocescuola.org

Ora potete fate click sul pulsante “CREA” che trovate in alto alla vostra pagina

 

Apparirà la pagina di un sito vuoto:

Incominciamo a creare le pagine:

• Chi siamo
• Dove siamo
• Formazione CTS
• News
• Documenti

Fate click sul pulsante “Nuova pagina” in alto:

Si aprirà la pagina di configurazione della nuova pagina web, in essa inserite il nome della pagina, asciate come modello di pagina: “Pagina web” e poi click su crea:

Appena salvate si aprirà la pagina Chi siamo pronta per essere editata, dovreste riconoscere una pulsantiera simile a quella di un Word Processor:

Per ora non inserite nessun contenuto, procederemo in un secondo momento, fate click su “SALVA” in alto a destra e allo stesso modo create le pagine Dove siamo e Formazione CTS:

Inseriamo ora le pagine News e Documenti.
La pagina News è assimilabile ad un blog, ovvero una serie di annunci, mentre la pagina Documenti è una lista di file. Procediamo come per le pagine precedenti, però questa volta scegliamo per la pagina News il modello: Annunci

Sarà creata una pagina da cui potrete generare nuovi post (nuove news ordinate per giorno ed ora di pubblicazione), per ora non create nessun post salvate.

Creiamo la pagina Documenti selezionando come modello “Schedario”

Ottenendo la pagina che segue, anche in questo caso aggiungeremo contenuti più avanti. Salvate la pagina.

Aggiungiamo ora un blocco testo sotto la sezione che raccoglie i link alle pagine del sito dove inserire contatti telefonici, e-mail e orari di ricevimento al pubblico del centro.

Fate click sul link “Modifica barra laterale” e nella pagina che segue click sul pulsante in basso: “Aggiungi un elemento alla barra laterale“:

Si aprirà una finestra da cui dovrete scegliere “Testo” facendo click su “Aggiungi”

Nella pagina di configurazione verrà aggiunto: “Casella di testo”

Click su modifica per aggiungere il testo desiderato, inserendo il “Titolo” del blocco ed il “Contenuto“, ok per confermare.

“SALVA” (1) nella pagina di configurazione e poi click sul link: “Centro nuove tecnologie per la disabilità” (2)

Procediamo allo stesso modo per aggiungere un blocco di testo che contiene i link a siti di interesse, per ora aggiungerò solo i link dei siti dei CTS del Piemonte:

Prima di procedere con l’inserimento dei contenuti, diamo un po’ di colore al sito variandone la grafica generale ed il font del titolo del sito.

Dal pusante “Altro” in alto selezionate “Gestisci sito”

Selezionate la voce di menù “Temi” ultima voce in basso a sinistra e selezionate un tema diverso io ho selezionato: “Casa sull’albero”

Prima di impostare il tema come definitivo potrete vedere l’anteprima premendo sul pulsante “Anteprima” in alto. Click su “SALVA” e tornate al sito.

Variamo ora il font del titolo del sito.

Sempre in “Altro” -> “Gestisci sito” andate in “Colori e caratteri” penultimo link a sinistra:

Dai parametri di configurazione selezionate la sezione “Carattere del titolo del sito” un click su “Personalizzato” e selezionate il font che più vi piace, io ho selezionato: “Bad Script”

vedrete subito il preview

Salvate e tornate al sito.

Nella prossima lezione vedremo come inserire i contenuti all’interno delle pagine web create.