Programma analitico d'esame. Versione

Transcript

1 Programma analitico d'esame Versione

2 Programma analitico d esame EIPASS Web Il percorso didattico prevede cinque moduli d esame. Ai fini del conseguimento della certificazione, il candidato dovrà, per ciascun esame, raggiungere un numero di risposte esatte superiore o pari al 75%. Nella esplicitazione del presente programma, ciascun modulo è stato suddiviso il moduli secondari (o sottomoduli) al fine di consentire una più efficace analisi del percorso da parte del candidato. I moduli, a loro volta, prevedono i cosiddetti campi di intervento, vale a dire gli ambiti operativi al cui interno in candidato dovrà acquisire, sviluppare o consolidare specifiche competenze. I campi di intervento, infine, si concretizzano in una serie di prestazioni valutabili, costituite da operazioni richieste al candidato all interno di ciascun modulo d esame per la valutazione delle sue competenze. Nella premessa esplicitata sono elencati in forma generale, per ciascun modulo, gli ambiti in cui il candidato dovrà cimentarsi al fine di superare il rispettivo esame. Tali ambiti sono a loro volta precisati nel campo denominato Argomento, che accompagna ciascun settore oggetto di valutazione. Si precisa, infine, che ciascun modulo rappresenta uno specifico ambito di competenze e che, fatte salve le interconnessioni fra i vari settori ai fini della determinazione del livello complessivo teorico e strumentale nel campo dell I.T. e dell I.C.T., ciascun candidato potrà decidere di sostenere gli esami operando scelte non sequenziali fra i moduli a sua disposizione. Elenco moduli d esame 1. Normativa e disposizioni sull accessibilità dei siti Web 2. Creare un sito Web: layout grafico e architettura informativa 3. Gestione dei contenuti: creazione e ottimizzazione dei file multimediali 4. Funzioni avanzate: dal sito vetrina al carrello di e commerce 5. Pubblicazione, gestione e aggiornamento di un sito Web Pagina 2 di 31

3 Modulo 1 Normativa e disposizioni sull accessibilità di siti web Obiettivo del modulo Il modulo intende accertare nel candidato il livello di possesso dei contenuti circa gli standard internazionali e la normativa italiana per l accessibilità dei siti Web. In particolare, il candidato dovrà mostrarsi in grado di: Delineare il panorama degli standard internazionali presentando il lavoro del World Wide Web Consortium (W3C), e in particolare del gruppo di lavoro Web Accessibility Initiative (WAY), soffermandosi sulle versioni 1.0 e 2.0 delle Web Content Accessibility Guidelines (WCAG). Delineare il quadro di riferimento della normativa italiana che recependo, fra l altro, le direttive dell Unione Europea e le WCGA 1.0 ha promulgato la Legge 4/2004 Disposizioni per favorire l accesso dei soggetti disabili agli strumenti informatici. Descrivere cosa si intende per accessibilità, sapere quali sono gli attori coinvolti e averne chiari scopi e finalità. Descrivere i 22 requisiti individuati nell Allegato A del Decreto Ministeriale 8 luglio 2005 che devono essere sottoposti a verifica tecnica per valutare l accessibilità di un sito Web. Descrivere le metodologie proposte nell Allegato A e nell Allegato B del Decreto Ministeriale 8 luglio 2005 attraverso le quali è possibile procedere alla verifica tecnica e soggettiva dei siti Web. Pagina 3 di 31

4 ARGOMENTO CAMPO DI INTERVENTO PRESTAZIONE VALUTABILE 1.0 Normativa e Standard Gli standard internazionali a. Il World Wide Web Consortium (W3C discriminare e descrivere principi ispiratori, organizzazione dei gruppi di lavoro e obiettivi dichiarati. b. La Web Accessibility Initiative (WAI descrivere caratteristiche e ruoli del gruppo di lavoro del W3C che si occupa specificatamente del tema dell accessibilità. c. Descrivere e commentare la versione 1.0 delle Web Content Accessibility Guidelines (WCAG) rilasciate nel 1999: articolazione delle linee guida, i relativi punti di controllo (checkpoints) e i livelli di priorità assegnati. d. Descrivere e commentare la versione 2.0 delle Web Content Accessibility Guidelines (WCAG) rilasciate nel 2008: i 4 principi ispiratori, l articolazione nelle linee guida, i relativi criteri di successo (success criteria) e i livelli di conformità ( A, Doppia A e Tripla A ) La normativa italiana a. Descrivere e argomentare i contenuti relativi alla Legge 9 gennaio 2004, n.4 (Legge Stanca), che recepisce le WCAG 1.0 e promulga le "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici". b. Descrivere e argomentare il DPR, 1 marzo 2005, n.75 e, nello specifico, definire criteri, principi e modalità che determina. c. Descrivere il Decreto Ministeriale 8 luglio 2005; in particolare, definire i requisiti da sottoporre a verifica presentati nell Allegato A. d. Descrivere e argomentare i contenuti della proposta di aggiornamento della Legge 4/2004 in base alle WCAG Accessibilità: concetti di base Definizioni di base a. Fornire una definizione esaustiva del concetto di Accessibilità, partendo da quanto espresso nella Legge 4/2004. b. Spiegare cosa si intende per Tecnologie assistive, partendo da quanto espresso nella Legge 4/2004. Pagina 4 di 31

5 c. Spiegare cosa di intende per fruibilità, partendo da quanto espresso nel DPR, 1 marzo 2005, n. 75. d. Identificare, in base alla Legge 4/2004, i Soggetti erogatori e definire gli obblighi per l accessibilità che devono soddisfare. e. Spiegare come, in base a quanto espresso nel DPR, 1 marzo 2005, n. 75, si articola il processo di valutazione, prevedendo sia una verifica tecnica che una verifica soggettiva. 1.2 Requisiti di accessibilità per i siti Web Tecnologie di base a. Spiegare cos è una grammatica formale, perché è necessario adottarne una e cosa implica tale adozione nella generazione del codice. (requisito 1) b. Spiegare cosa si intende per frame e a quali condizioni ne è consentito l uso. (requisito 2) c. Spiegare cosa si intende per fogli di stile (CSS), perché e come devono essere impiegati. (requisito 11) d. Spiegare perché è necessario e cosa significa linearizzare una tabella utilizzata a scopo di impaginazione. (requisito 13) Alternative testuali a. Spiegare cosa di intende per Alternativa testuale, qual è la sua funzione, e quando si deve prevedere. (requisito 3) b. Spiegare perché nei moduli (form) è necessario associare in maniera esplicita le etichette ai rispettivi controlli e come devono essere posizionate. (requisito 14) c. Spiegare quando e come è necessario garantire un alternativa testuale equivalente per un filmato o una presentazione multimediale. (requisito 18) d. Spiegare come impostare correttamente un link ipertestuale: testo, destinazione, ecc. (requisito 19) Colori, contrasti, animazioni a. Spiegare come deve essere utilizzato correttamente il colore. (requisito 4) b. Spiegare come gestire correttamente oggetti e scritte lampeggianti o in movimento. (requisito 5) Pagina 5 di 31

6 c. Spiegare come rendere distinguibile il contenuto informativo agendo sui contrasti di colore e/o i livelli sonori (nel caso di parlato). (requisito 6) Contenuti particolari a. Spiegare come devono essere impostate le mappe immagini. (requisiti 7 e 8) b. Spiegare come devono essere utilizzate e impostate le tabelle di dati. (requisiti 9 e 10) c. Spiegare come devono essere gestiti script, applet e altri oggetti di programmazione. (requisiti 15, 16 e 17) Fruizione a. Spiegare cosa si intende per layout fluido ed elastico e spiegare quali vantaggi comporta. (requisito 12) b. Spiegare quali accorgimenti occorre adottare nel caso sia previsto un intervallo di tempo predefinito per l esecuzione di un azione. (requisito 20) c. Spiegare quali accorgimenti occorre adottare per la navigazione fra le pagine: skip link, distanze, ecc. (requisito 21) Siti non accessibili a. Spiegare come gestire le pagine di siti esistenti che non possono rispettare i requisiti dell accessibilità. (requisito 22) 1.3 Valutazione di un sito web Verifica tecnica a. Illustrare l articolazione della Metodologia per la verifica tecnica proposta nell Allegato A del Decreto Ministeriale 8 luglio 2005: Verifica della correttezza del codice anche mediante sistemi di validazione automatica e semi automatica; Esame delle pagine con varie versioni di diversi browser in vari sistemi operativi; Verifica dei contrasti in base agli algoritmi previsti; Redazione di un rapporto conclusivo. b. Analizzare alcuni dei più noti programmi di valutazione assistita. Pagina 6 di 31

7 1.3.2 Verifica Soggettiva a. Illustrare l articolazione della Metodologia per la verifica soggettiva proposta nell Allegato B del Decreto Ministeriale 8 luglio 2005: Analisi da parte di un esperto di fattori umani; Costituzione di un gruppo di valutazione; Esecuzione dei task da parte del gruppo di valutazione; Valutazione dei risultati ed elaborazione del rapporto conclusivo. b. Descrivere i criteri di valutazione su cui si basa la verifica soggettiva Esiti della valutazione a. Spiegare a cosa corrispondono il primo e il secondo livello di accessibilità. b. Spiegare a cosa corrispondono il primo, secondo e terzo livello di qualità. c. Descrivere la procedura per poter esporre il Logo attestante il possesso del requisito di accessibilità conforme al livello di qualità raggiunto. Pagina 7 di 31

8 Modulo 2 Creare un sito Web: layout grafico e architettura informativa Obiettivo del modulo Il modulo intende accertare nel candidato il livello di competenze possedute in ordine all utilizzo di una applicazione mirata alla creazione di siti Web per l impostazione di un nuovo progetto sia a livello di definizione dei parametri di base, che a livello di creazione del layout grafico e di articolazione della struttura informativa. In particolare, il candidato dovrà mostrarsi in grado di: Impostare un nuovo progetto definendo tutti i parametri necessari. Valutare i tipi di sicurezza applicabili. Definire l aspetto grafico di un sito Web utilizzando un template predefinito e personalizzandone adeguatamente Intestazione (header) e Piè di Pagina (footer). Definire l aspetto grafico di un sito Web creando un template personalizzato. Creare la struttura ad albero di un sito Web (Mappa) inserendo Pagine e Livelli e articolandole in maniera opportuna per ottenere un menu di navigazione funzionale. Lavorare sulle proprietà delle Pagine e dei Livelli di un sito Web in modo da ottenere risultati grafici e di navigazioni particolari. Impostare i parametri necessari (tag e Sitemap) per ottenere la corretta indicizzazione di un Sito Web da parte dei Motori di Ricerca. Predisporre un sito Web per poter attivare gli strumenti messi a disposizione da Google Webmaster Central, oltre che un servizio di statistiche di accesso al sito (es. Google Analytics). Pagina 8 di 31

9 ARGOMENTO CAMPO DI INTERVENTO PRESTAZIONE VALUTABILE 2.0 Gestione del progetto Operazione di base a. Creare un nuovo progetto di sito Web. b. Aprire un progetto di sito Web già esistente. c. Duplicare e rinominare opportunamente un progetto di sito Web Impostazioni generali a. Definire parametri generali del progetto, quali: Titolo, Autore e Indirizzo URL del sito Web. b. Definire parametri generali per l indicizzazione del sito Web sui Motori di Ricerca, quali: Descrizione e Parole chiave. c. Attivare il codice di verifica per Google Webmaster Central. d. Impostare il codice per l attivazione di un servizio di statistiche di accesso al sito Web (es. Google Analytics). e. Creare e collegare il file Sitemap.xml utile per l indicizzazione dei sito Web sui Motori di Ricerca. 2.1 Definizione del layout grafico Utilizzo di template preimpostati a. Scegliere un template grafico preimpostato idonea al sito Web che si intende realizzare. b. Applicare il modello grafico preimpostato scelto al progetto di un sito Web Utilizzo di template personalizzato a. Scegliere di utilizzare un template grafico personalizzato per procedere nella realizzazione del progetto in corso. b. Creare un template grafico personalizzato utilizzando immagini appositamente preparate per impostare: Sfondo della pagina; Intestazione; Menu (verticale o orizzontale); Contenuto della pagina; Piè di Pagina; Sfondo del Piè di Pagina. Pagina 9 di 31

10 c. Impostare correttamente le dimensioni e i margini degli elementi che compongono il template in modo da ottenere un risultato funzionale e armonico. d. Creare un template in cui lo Sfondo della pagina si ridimensiona automaticamente in base alla finestra del Browser e rimane fisso durante lo scorrimento dei contenuti di pagina. e. Applicare il template grafico creato al progetto del sito Web in corso. 2.2 Personalizzazione del template utilizzato Personalizzazione dell Intestazione (header) e del Piè di Pagina (footer) del template scelto a. Inserire un testo (es. titolo del sito): formattarlo; applicare degli effetti; definire dimensioni e posizione. b. Inserire un immagine (es. logo aziendale): gestirne la trasparenza e la visualizzazione di una seconda immagine su passaggio del mouse; applicare degli effetti; definire dimensioni e posizione. c. Inserire un animazione Flash: gestirne la trasparenza; definire dimensioni e posizione. d. Inserire uno SlideShow: comporre la lista delle immagini; impostare gli effetti di visualizzazione e movimento per ciascuna immagine; definire per quali pagine del sito Web ciascuna immagine dovrà essere visualizzata; attivare l avvio automatico; attivare la visualizzazione in ordine casuale delle immagini; definire dimensioni e posizione. e. Inserire del Codice HTML personalizzato: inserire degli snippet (es. data e ora attuali); definire dimensioni e posizione. f. Inserire un Campo di Ricerca: attivare la ricerca sui contenuti rilevanti del sito Web; personalizzare la grafica e la formattazione del campo, dell etichetta e del pulsante; definire dimensioni e posizione. g. Associare un collegamento ipertestuale su testi, immagini singole e immagini appartenenti a uno SlideShow, inseriti nell Intestazione o nel Piè di Pagina. Pagina 10 di 31

11 h. Gestire l ordine di visualizzazione degli elementi inseriti nell Intestazione o nel Piè di Pagina portandoli in primo o secondo piano rispetto agli altri. 2.3 Creazione della Mappa di un sito Web Operazioni di base a. Distinguere tra Pagina, Livello e Separatore. b. Inserire una nuova Pagina, un nuovo Livello o un nuovo Separatore, articolando una struttura con più livelli di indentazione. c. Rinominare opportunamente Pagine e Livelli ai fini di una corretta composizione del menu di navigazione del sito Web. d. Spostare in posizioni diverse Pagine, Livelli e Separatori già inseriti all interno della Mappa. e. Tagliare, Copiare e Incollare una Pagina all interno della Mappa del progetto stesso o fra Mappe di progetti diversi Proprietà della Pagina a. Rendere una pagina inserita nella Mappa non visibile sul menu di navigazione pur lasciandola collegata internamente. b. Associare ad una Pagina inserita nella Mappa parametri utili per l indicizzazione sui Motori di Ricerca, quali: titolo esteso; descrizione; parole chiave. c. Associare ad una Pagina inserita nella Mappa un icona da affiancare alla voce corrispondente nel menu di navigazione. d. Fare in modo che l immagine di sfondo di una Pagina inserita nella Mappa sia diversa da quella prevista dal template grafico utilizzato per il sito Web. e. Fare in modo che l immagine di sfondo utilizzata per il contenuto di una Pagina inserita nella Mappa sia diversa da quella prevista dal template grafico utilizzato per il sito Web. f. Modificare l estensione con cui viene salvato il file relativo a una Pagina. Pagina 11 di 31

12 g. Impostare alcuni parametri riferiti alla Pagina importanti per la creazione del file Sitemap.xml, quali: frequenza di aggiornamento e priorità dei contenuti. h. Inserire del Codice HTML in una Pagina, in posizioni diverse a seconda dello scopo: Prima del tag <HTML>, Prima del tag </HEAD>, All'interno del tag <BODY>, Prima del tag </BODY>, Dopo il tag </BODY> Proprietà del Livello a. Fare in modo che nel menu di navigazione non vengano visualizzate le voci relative alle Pagine contenute in un Livello. b. Inserire un collegamento ipertestuale sulla voce del menu di navigazione corrispondete a un Livello della Mappa. c. Associare un icona alla voce del menu di navigazione corrispondete a un Livello della Mappa. Pagina 12 di 31

13 Modulo 3 Gestione dei contenuti: creazione e ottimizzazione dei file multimediali Obiettivo del modulo Il modulo intende accertare nel candidato il livello di competenze possedute in ordine all utilizzo di una applicazione mirata alla creazione di siti Web per la produzione delle pagine e la gestione dei contenuti multimediali che in essa possono essere inseriti (testi, immagini, animazioni, video, suoni, ecc.). In particolare, il candidato dovrà mostrarsi in grado di: Impostare adeguatamente la griglia di impaginazione di una pagina in modo da poter inserire e presentare adeguatamente tutti i contenuti previsti. La struttura di un sistema operativo nei dettagli. Inserire testi e tabelle dati nella pagina, saper fare le formattazioni necessarie e creare dei link ipertestuali.il significato di processo e la gestione dei processi in un sistema operativo. Modificare, ottimizzare e salvare in un formato opportuno le immagini; inserirle all interno della pagina e gestirne proprietà e attributi necessari per l indicizzazione sui Motori di Ricerca.Il concetto di sistema operativo on line. Inserire Animazioni Flash in una pagina gestendo eventuali file allegati necessari per la loro corretta riproduzione. Inserire Video e Suoni all interno di una pagina, gestirne la riproduzione e associare gli attributi necessari per l indicizzazione sui Motori di Ricerca. Creare una Galleria di immagini e video in Flash o in JavaScript e inserirla all interno di una pagina. Creare un modulo per la raccolta di dati, gestire i metodi di invio tramite e mail e inserirlo all interno della pagina. Creare una pagina che presenta attraverso opportune schede parte o tutti i prodotti che potranno essere acquistati attraverso lo store online legato al sito Web. Inserire all interno della pagina una porzione di codice HTML scritto manualmente, copiato da altri fonti o disponibile come widget preconfezionata. Pagina 13 di 31

14 ARGOMENTO CAMPO DI INTERVENTO PRESTAZIONE VALUTABILE 3.0 Creazione di una pagina Web Griglia di impaginazione a. Definire la griglia di impaginazione dei contenuti aggiungendo/togliendo righe e colonne. b. Impostare manualmente la larghezza delle colonne. c. Disporre un contenuto all interno di una cella della griglia di impaginazione. d. Disporre un contenuto in modo che occupi più celle adiacenti della griglia di impaginazione Margini e Stili della cella a. Impostare i margini esterni ed interni di una cella della griglia di impaginazione b. Creare uno sfondo sfumato o colorato per una cella della griglia di impaginazione. c. Utilizzare un immagine come sfondo per una cella della griglia di impaginazione d. Definire colore e spessore dei bordi di una cella della griglia di impaginazione. e. Inserire un titolo/didascalia per una cella della griglia di impaginazione. 3.1 Inserimento di testi e tabelle nelle pagine di un Sito Web Inserimento di testi a. Inserire del testo tramite digitazione o attraverso le funzioni Taglia, Copia e Incolla richiamabili mediante mouse e comandi rapidi da tastiera. b. Formattare il testo come richiesto: modifica dimensioni, font, colori, allineamenti, elenchi puntati. c. Inserire un immagine all interno del testo e definirne la disposizione. d. Creare un link ipertestuale su una o più parole selezionate. Pagina 14 di 31

15 e. e. Attivare un effetto di rollover definendo modalità, direzione e velocità di scorrimento Inserimento di tabelle a. Inserire una tabella definendo il numero di righe e di colonne di cui si deve comporre. b. Inserire i dati all interno delle celle della tabella. c. Formattare il testo come richiesto: modifica dimensioni, font, colori, allineamenti, elenchi puntati. d. Modificare l aspetto della tabella come richiesto: unire/dividere celle, colori dello sfondo e dei bordi della tabella. e. Inserire un immagine all interno di una cella e definire la disposizione del testo attorno ad essa. f. Creare un link ipertestuale su una o più parole selezionate. g. Attivare un effetto di rollover definendo modalità, direzione e velocità di scorrimento. 3.2 Modifica e salvataggio delle immagini Modifica delle immagini a. Aprire un immagine con un apposito editor grafico. b. Ritagliare un immagine settando, tramite le misure, l area da ritagliare c. Ruotare e capovolgere (orizzontalmente o verticalmente) un immagine. d. Modificare, in base a come richiesto, gli indici di luminosità e contrasto. e. Modificare, in base a come richiesto, gli indici di intensità, tonalità e saturazione. f. Applicare filtri ed effetti grafici a un immagine Salvataggio delle immagini a. Salvare un immagine precedentemente modificata nel formato più adatto al contesto di utilizzo. Pagina 15 di 31

16 b. Scegliere il formato di salvataggio in base a una determinata compressione. 3.3 Inserimento delle immagini nelle pagine di un Sito Web Inserimento delle immagini a. Inserire nella pagine di un sito Web un immagine salvata in locale sul PC o già pubblicata in Internet. b. Associare un titolo e un testo alternativo all immagine inserita in una pagina di un sito Web Visualizzazione delle immagini a. Impostare uno zoom sull immagine inserita in una pagina di un sito Web. b. Attivare la possibilità di spostare manualmente o automaticamente l immagine inserita in una pagina di un sito Web in modo da portare in primo piano un particolare. c. Attivare la visualizzazione di un navigatore per la gestione dello zoom e dello spostamento su un immagine inserita in una pagina di un sito Web Ottimizzazione attributi delle immagini a. Aggiungere l immagine inserita in una pagina alla Sitemap del sito Web. b. Associare attributi come il titolo, la descrizione e la posizione geografica a un immagine inserita in una pagina di un sito Web. c. Associare all immagine inserita nella pagina di un sito Web la URL del file di licenza che ne regolamenta l utilizzo. 3.4 Inserimento di Animazioni Flash nelle pagine di un Sito Web Inserimento Animazioni Flash a. Inserire nella pagine di un sito Web un Animazione Flash salvata in locale sul PC o già pubblicata in Internet. b. Associare un testo alternativo a un Animazione Flash inserita in una pagina di un sito Web. c. Impostare la larghezza e l altezza di un Animazione Flash inserita in una pagina di un sito Web. Pagina 16 di 31

17 d. Specificare quale versione del Player deve essere richiesta per la corretta visualizzazione dell Animazione Flash inserita in una pagina di un sito Web. e. Fare in modo che lo sfondo dell Animazione Flash inserita in una pagina di un sito Web sia trasparente Gestione dei file collegati alle Animazioni Flash a. Allegare all Animazione Flash inserita in una pagina di un sito Web la lista dei file necessari per la sua corretta visualizzazione. b. Specificare il percorso relativo alla pubblicazione dei file Flash su server. 3.5 Inserimento di Video/Suono nelle pagine di un Sito Web Inserimento Video/Suono a. Inserire nella pagina di un sito Web un Video/Suono salvato in locale sul PC già pubblicato in Internet. b. Associare un testo alternativo a un Video/Suono inserito in una pagina di un sito Web. c. Impostare la larghezza e l altezza di un Video/Suono inserito in una pagina di un sito Web. d. Gestire la visualizzazione e l aspetto della barra dei controlli per la riproduzione di un Video/Suono inserito in una pagina di un sito Web Ottimizzazione attributi dei Video/Suoni a. Aggiungere il Video/Suono inserito in una pagine alla Sitemap del sito Web. b. Associare attributi obbligatori come il titolo, la descrizione breve, l immagine di anteprima, a un Video/Suono inserito in una pagina di un sito Web. c. Associare attributi facoltativi come la categoria, le parole chiave, la data di pubblicazione, la durata e l idoneità per un pubblico minorenne, a un Video/Suono inserito in una pagina di un sito Web. Pagina 17 di 31

18 3.6 Inserimento di Gallerie nelle pagine di un Sito Web Inserimento Galleria a. Inserire nella pagina di un sito Web una Galleria in Flash composta di immagini e video. b. Inserire nella pagina di un sito Web una Galleria in JavaScript composta di immagini e video. c. Per le gallerie in Flash, impostare parametri come: dimensioni, miniature, barra controlli, avvio automatico, riproduzione in ordine casuale, colonna sonora. d. Per le gallerie in JavaScript, impostare parametri come: miniature, visualizzazione su click dell immagine ingrandita Composizione Galleria a. Creare la lista di immagini che compongono la galleria inserita in una pagina di un sito Web. b. Aggiungere un video alla lista di immagini che compongono la galleria inserita in una pagina di un sito Web. c. Modificare l ordine dei file che compongono la galleria inserita in una pagina di un sito Web. d. Impostare un collegamento ipertestuale su un immagine/video di una galleria inserita in una pagina di un sito Web. e. Associare un effetto di comparsa a un immagine di una galleria inserita in una pagina di un sito Web. f. Associare una descrizione a un immagine di una galleria inserita in una pagina di un sito Web. g. Definire l aspetto grafico delle miniature di una galleria inserita in una pagina di un sito Web. 3.7 Inserimento di Moduli per l invio di e mail nelle pagine di un Sito Web Inserimento Modulo invio e mail a. Inserire nella pagina di un sito Web un modulo per la raccolta dei dati e l invio degli stessi tramite e mail. b. Distinguere fra le varie tipologie di campi e utilizzarli correttamente in base alla domanda che si deve fare. Pagina 18 di 31

19 c. Creare il modulo invio e mail attraverso l inserimento dei campi opportuni. d. Definire gli attributi di un campo e, in particolare, renderne obbligatoria la compilazione Definizione modalità di invio dei dati a. Impostare l invio per e mail dei dati raccolti attraverso il modulo inserito in una pagina di un sito Web. b. Impostare l invio a un Database dei dati raccolti attraverso il modulo inserito in una pagina di un sito Web. c. Impostare l invio ad un file dei dati raccolti attraverso il modulo inserito in una pagina di un sito Web. d. Impostare l invio anche di una e mail di conferma all utente che ha compilato un modulo inserito in una pagina di un sito Web. e. Attivare il controllo anti spam Captcha per un modulo inserito in una pagina di un sito Web Impostazioni grafiche del Modulo di invio e mail a. Per le etichette dei campi, impostare: font, colori e disposizione rispetto al campo. b. Per i campi, impostare: colori di testo, sfondo e bordi sia nello stato normale che su selezione. c. Per i pulsanti Invio e Reset, impostare: colori di testo, sfondo e bordi, oltre che un eventuale immagine di sfondo. d. Per la descrizione e la validazione dei campi, impostare: icona, modalità di visualizzazione dei messaggi. 3.8 Inserimento di un Elenco Prodotti nelle pagine di un Sito Web Inserimento Elenco Prodotti a. Creare in una pagina di un sito Web un elenco di prodotti che potranno essere acquistati tramite il carrello di e commerce associato. b. Definire il layout delle singole schede prodotto: disposizione immagini e descrizione, dimensioni, colori, font, margini. Pagina 19 di 31

20 c. Inserire all interno delle schede prodotto elementi quali: il prezzo, il campo per la definizione della quantità da acquistare, il collegamento ipertestuale sull immagine, il pulsante acquista. 3.9 Inserimento di Codice HTML e Widgets nelle pagine di un Sito Web Inserimento Codice HTML a. Inserire nella pagina di un sito Web una porzione di codice HTML scrivendolo tramite editor apposito. b. Inserire nella pagina di un sito Web una porzione di codice HTML copiata da una fonte esterna. c. Associare un foglio di stile da collegare alla pagina del sito Web in cui è stata aggiunta manualmente una porzione di codice HTML. d. Allegare i file necessari perché il codice HTML inserito manualmente in una pagina di un sito Web funzioni correttamente Inserimento Widgets a. Inserire una widget (es. Like Button di Facebook) all interno di una pagina di un sito Web. b. Configurare i parametri della widget inserita in una pagina di un sito Web al fine di personalizzarla. Pagina 20 di 31

21 Modulo 4 Funzioni avanzate: dal sito vetrina al carrello di e commerce Obiettivo del modulo Il modulo intende accertare nel candidato il livello di competenze possedute in ordine all utilizzo di una applicazione mirata alla creazione di siti Web per la definizione di Stili e Modelli che concorrono a definire la personalizzazione del layout grafico, oltre che per l impostazione di strumenti avanzati che concorrono a trasformare un sito Web in uno strumento di lavoro professionale. In particolare, il candidato dovrà mostrarsi in grado di: Definire l aspetto grafico dei menu di navigazione di un sito Web, al fine di renderlo esteticamente piacevole oltre che funzionale. Impostare Stili e Modelli da applicare a testi, finestre richiamate su collegamento per la visualizzazione di immagini e documenti (ShowBox), ToolTip legate a collegamenti ipertestuali e campi dei form, e mail inviate dal sito Web. Creare una Pagina di Benvenuto che, in fase di apertura del sito Web, venga visualizzata prima della Home Page. Creare un sito Web multi lingua, sfruttando la Pagina di Benvenuto per permettere all Utente di scegliere la lingua di consultazione che preferisce fra quelle disponibili. Impostare la visualizzazione di un messaggio pubblicitario, definendone contenuti, effetti e collegamenti. Creare e personalizzare un Blog attraverso il quale poter pubblicare Articoli e ricevere commenti da parte dei lettori. Creare un Feed RSS associato al sito Web per la diffusione di contenuti. Impostare un area riservata del sito Web e gestirne l accesso mediante la creazione di Gruppi e Utenti con specifici permessi. Creare un carrello di e commerce collegato al sito Web gestendone tutti gli aspetti salienti, fra cui: la composizione del catalogo prodotti, la definizione dei metodi di pagamento e spedizione, l articolazione del modulo d ordine. Pagina 21 di 31

22 ARGOMENTO CAMPO DI INTERVENTO PRESTAZIONE VALUTABILE 4.0 Impostazione dello Stile dei menu di navigazione Definizione dello stile del Menu Principale a. Definire lo stile delle voci di menu, definendo: larghezza, margini e distanze, oltre che font, dimensione e allineamento per i testi. b. Definire lo stile delle voci di menu nei diversi stati (attiva e su passaggio del mouse/pagina corrente), definendo: colore di sfondo, testo e bordo, immagine di sfondo. c. Personalizzare l aspetto delle voci di menu, definendone forma, aspetto e bordo tridimensionali. d. Fare in modo che il menu di navigazione scorra insieme ai contenuti delle pagine del sito Web, in modo da rimanere sempre visibile Definizione dello stile del Menu a Comparsa a. Predisporre la visualizzazione del Menu di Comparsa in un unica colonna o, in alternativa, su più colonne b. Definire lo stile del Menu a Comparsa definendo: larghezza, margini e, nel caso di disposizione su più colonne, numero di voci per ciascuna colonna, oltre che font, dimensione e allineamento per i testi. c. Prevedere un effetto di visualizzazione per il Menu a Comparsa (per es, dissolvenza o scorrimento). d. Definire lo stile delle voci di menu nei diversi stati (attiva e su passaggio del mouse) e dei separatori, definendo: colore di sfondo, testo e bordo, immagine di sfondo, icona del punto elenco. e. Personalizzare l aspetto delle voci di menu, definendone forma, aspetto e bordo tridimensionali Definizione dello stile del Menu di Pagina a. Attivare la visualizzazione di un Menu di Pagina. b. Definire lo stile del Menu di Pagina definendo: posizione (a destra o sinistra della pagina), larghezza, margini, distanza tra i pulsanti, oltre che font, dimensione e allineamento per i testi, colore e spessore dei bordi. Pagina 22 di 31

23 c. Definire lo stile delle voci di menu nei diversi stati (attiva e su passaggio del mouse/pagina corrente), dei separatori e delle linee di separazione, definendo fattori come i colori e le icone del punto elenco. 4.1 Impostazione di Stile e Modelli Definizione degli stili per i testi a. Impostare uno stile per il Titolo di Pagina, definendo: se deve essere visualizzato, colori, font, dimensioni, allineamento, margini. b. Impostare uno stile per il Percorso della Pagina (navigazione a briciole di pane), definendo: se deve essere visualizzato, colori, font, dimensioni, allineamento, margini. c. Impostare uno stile per il Testo della Pagina, definendo: colore, font, dimensioni, allineamento. d. Impostare uno stile per i collegamenti ipertestuali nei 3 stati (attivo, su passaggio del mouse, visitato), definendo: colori, sottolineatura, immagine puntatore Definizione dello stile della finestra in cui vengono visualizzati su collegamento immagini e documenti (ShowBox) a. Impostare lo stile della finestra ShowBox, definendo: effetto di comparsa, colore dello sfondo interno/esterno, opacità dello sfondo, ombra. b. Impostare il bordo della finestra ShowBox, definendo colore e spessore. c. Impostare lo stile del testo visualizzato nella finestra ShowBox, definendo: font, dimensioni, allineamento e colore Definizione dello stile delle ToolTip a. Impostare lo stile delle ToolTip, definendo: posizione rispetto al link o al campo della form a cui sono associate, effetto di comparsa, colore dello sfondo, fattore dello smusso per gli angoli arrotondati, visualizzazione di un ombra, presenza della freccia nell immagine del baloon. b. Impostare il bordo delle ToolTip, definendo colore e spessore. c. Impostare lo stile del testo visualizzato nelle ToolTip, definendo: font, dimensioni, allineamento e colore. Pagina 23 di 31

24 4.1.4 Definizione degli stili da applicare alle e mail inviate dal sito a. Impostare la struttura delle e mail, definendo: il colore dello sfondo esterno/interno, il colore e lo spessore del bordo. b. Prevedere l inserimento di un immagine (per es. logo aziendale), definendo: file da utilizzare, allineamento, posizione, larghezza. c. Impostare lo stile del contenuto del messaggio, definendo: colore, font e dimensione del testo. d. Prevedere delle Note a Piè di Pagina, definendo: colore, font e dimensione del testo oltre che allineamento, posizione e contenuto. 4.2 Impostazione di una Pagina di Benvenuto e scelta della lingua di consultazione Impostazione Pagina di Benvenuto a. Attivare la visualizzazione di una Pagina di Benvenuto prima della Home Page. b. Definire lo sfondo della Pagina di Benvenuto: colore, immagine, disposizione e allineamento delle immagini. c. Inserire come contenuto della Pagina di Benvenuto un immagine, un animazione Flash, un Video o un qualsiasi altro elemento (tramite codice HTML personalizzato). d. Associare alla Pagina di Benvenuto un suono in ingresso. e. Impostare un tempo prefissato per la visualizzazione della Pagina di Benvenuto, allo scadere del quale viene attivato automaticamente il collegamento alla Home Page del sito Web Impostazione della scelta della lingua di consultazione a. Prevedere la visualizzazione nella Pagina di Benvenuto dei pulsanti per permettere all utente la scelta della lingua di consultazione del sito Web. b. Creare la lista delle lingue disponibili, specificando per ciascuna lingua: nome, immagine (per es. bandiera), cartella su Server o URL del sito corrispondente. c. Fare in modo che cliccando su un pulsante corrispondente a una lingua cambi di conseguenza la lingua in cui vengono presentati i contenuti di un sito Web. Pagina 24 di 31

25 4.2.3 Gestione della lingua di un sito Web a. Associare correttamente la lingua a un sito Web, in modo che corrisponda a quella in cui vengono presentati i contenuti. b. Gestire i testi che vengono inseriti automaticamente in base alla lingua impostata per i contenuti del sito Web. 4.3 Gestione di messaggi pubblicitari Visualizzazione di messaggi pubblicitari a. Creare un messaggio pubblicitario che venga visualizzato sull angolo superiore destro della pagina del sito Web (effetto PagePeel), con definizione di: immagine da utilizzare, animazione e dimensioni. b. Creare un messaggio pubblicitario che venga visualizzato in un riquadro in sovrimpressione rispetto alla pagina del sito Web, con definizione di: immagine da utilizzare, posizione del riquadro, effetto di visualizzazione. c. Creare un messaggio pubblicitario che venga visualizzato su barra orizzontale, con definizione di: immagine da utilizzare, posizione, colore di sfondo Definizione opzioni per i messaggi pubblicitari a. Associare alla visualizzazione di un messaggio pubblicitario la riproduzione di un suono. b. Impostare sul messaggio pubblicitario un collegamento a una pagina del sito Web. 4.4 Creazione e gestione di un Blog Creazione di un Blog a. Aprire un Blog impostando parametri generali quali: titolo e descrizione. b. Creare un nuovo Articolo (post) specificando: titolo, data di pubblicazione, autore, categoria, tag associati, contenuto e descrizione breve. c. Collegare a un Articolo un file audio o video. d. Associare a un Articolo le fonti e impostare correttamente i link ai relativi siti di riferimento. e. Gestire la possibilità di abilitare o meno i commenti per uno specifico Articolo. f. Fare in modo che i contenuti di un Blog vengano automaticamente diffusi anche attraverso un apposito Feed RSS. Pagina 25 di 31

26 g. Collegare il Blog al sito Web attraverso un apposita voce nel menu di navigazione del sito stesso Definizione delle struttura della pagina di un Blog a. Aggiungere e configurare il pulsante AddThis per la condivisione dei contenuti su Internet. b. Inserire un blocco laterale in cui visualizzare la lista degli articoli recenti, impostandone il numero massimo da visualizzare. c. Inserire un blocco laterale in cui visualizzare l elenco delle Categorie attive, impostandone il numero massimo da visualizzare. d. Inserire un blocco laterale in cui visualizzare la lista degli articoli ordinati per mese, impostandone il numero massimo da visualizzare. e. Inserire un blocco laterale in cui visualizzare la Nuvola delle Categoria attive o dei Tag utilizzati negli Articoli. f. Inserire un blocco laterale in cui visualizzare l elenco dei Siti Amici (con link ipertestuale sulle diverse voci). g. Inserire un blocco laterale in cui visualizzare la plug in di Facebook. h. Personalizzare lo stile grafico di qualsiasi blocco di contenuto inserito nella pagina di un Blog: font, colori, margini, immagini di sfondo Gestione dei commenti al Blog a. Consentire l inserimento dei Commenti per gli Articoli del Blog impostandone la scrittura su Server (tramite PHP). b. Attivare un controllo anti spam (Captcha) sulla scrittura dei Commenti. c. Fare in modo che i Commenti inseriti vengano pubblicati immediatamente o, in alternativa, solo dopo approvazione. d. Impostare una e mail di notifica per la ricezione di nuovi Commenti. Pagina 26 di 31

27 4.5 Creazione e gestione di Feed RSS Creazione di un Feed RSS a. Aprire un Feed RSS impostando parametri generali, quali: titolo, immagine associata e descrizione. b. Creare un nuovo feed specificando: titolo, data di pubblicazine, contenuti, pagina collegata. 4.6 Creazione area riservata e gestione accessi Gestione degli accessi a. Creare un gruppo Amministratori e uno o più Gruppi Utente. b. Creare un nuovo Utente e attribuire i relativi permessi di accesso: Username e Password. c. Creare un Alias per l inserimento di uno stesso Utente all interno di diversi Gruppi Creazione di un area del sito riservata b. Impostare una pagina del sito come protetta e definire da quali Gruppi o da quali Utenti potrà essere visualizzata. b. Prevedere e definire una pagina per la richiesta di Login e Password. 4.7 Creazione di un carrello e commerce Definizione Catalogo Prodotti a. Aggiungere un nuovo prodotto all interno del catalogo, gestendo parametri quali: nome/codice; descrizione; link alla pagina di presentazione; costo; iva; peso. b. Organizzare in categorie omogenee i prodotti inseriti in un catalogo. c. Associare al prodotto un immagine singola o una galleria di immagini che lo presentino adeguatamente. d. Prevedere delle varianti (per es. di taglia o di colore) per un prodotto inserito a catalogo. e. Attivare degli sconti quantità per un prodotto inserito a catalogo. f. Importare un catalogo prodotti da un file preesistente di Microsoft Excel (file csv) Impostazione metodi di pagamento e spedizione a. Impostare uno o più metodi di spedizione tra cui l utente potrà scegliere. Pagina 27 di 31

28 b. Attribuire a ciascun metodo di spedizione attivato un costo fisso, un costo variabile in base all ammontare totale dell ordine o un costo variabile in base al totale del peso delle merci ordinate. c. Impostare uno o più metodi di pagamento posticipato (per es. bonifico bancario) tra cui l utente potrà scegliere. d. Impostare uno o più metodi di pagamento immediato (per es. PayPal, Carta di Credito) tra cui l utente potrà scegliere Definizione modulo d ordine a. Predisporre il Modulo d Ordine in modo che contenga tutti i campi necessari per permettere l evasione dell ordine stesso (inclusa fatturazione e eventuale recapito pacco). b. Predisporre l invio dei dati tramite una e mail di riepilogo d ordine che deve essere ricevuta dal gestore del carrello. c. Predisporre l invio al cliente di una e mail di conferma dell ordine che includa il riepilogo dell ordine, l indicazione del metodo di spedizione scelto e le istruzioni necessarie per effettuare il pagamento, sempre in base alla scelta fatta Definizione Opzioni dello store a. Impostare la valuta e il metodo di visualizzazione dei prezzi: raggruppamento cifre, posizione del simbolo della valuta, cifre decimali. b. Impostare la gestione dell IVA sullo store. c. Impostare l accettazione solo degli ordini che raggiungono un importo minimo specificato. d. Personalizzare l aspetto dei pulsanti necessari per aggiungere o rimuovere un prodotto nel carrello. Pagina 28 di 31

29 Modulo 5 Pubblicazione, gestione e aggiornamento di un sito Web Obiettivo del modulo Il modulo intende accertare nel candidato il livello di competenze possedute in ordine all utilizzo di una applicazione mirata alla creazione di siti Web per la pubblicazione online, tramite motore FTP integrato, di quanto realizzato, oltre che per la gestione di un backup e per l esportazione/importazione del progetto su computer diversi. In particolare, il candidato mostrarsi in grado di: Utilizzare un motore FTP per impostare correttamente la connessione con il Server e procedere alla pubblicazione online del sito Web realizzato. Gestire cartelle e file su Server. Effettuare la pubblicazione su Server dell intero sito Web, dei soli aggiornamenti o dei soli Articoli aggiunti sul Blog o sul Feed RSS. Effettuare la pubblicazione su disco del sito Web, in modo da poter aver una copia su PC dei file che verranno pubblicati su Server e poter, eventualmente, procedere alla modifica manuale del codice prima dell esportazione online. Effettuare l esportazione del progetto in un unico file compresso, in modo da poterlo trasferire su un altro computer o gestire una copia di backup del lavoro fatto. Importare un progetto precedentemente creato su un computer diverso per procedere alla creazione di un sito Web. Pagina 29 di 31

30 ARGOMENTO CAMPO DI INTERVENTO PRESTAZIONE VALUTABILE 5.0 Esportazione del sito Web su Internet tramite motore FTP Connessione al Server a. Scegliere il tipo di protocollo (FTP, SFTP SSH, FTPS FTP) e impostare i parametri necessari per stabilire la connessione con il Server: indirizzo FTP, Login, Password. b. Sfruttare alcuni parametri opzionali per la connessione al Server: cartella di destinazione, porta, numero di connessioni simultanee, FTP attivo/passivo, compressone gzip. c. Impostare l esportazione di tutti i file relativi a un sito Web. d. In caso di aggiornamento di un sito Web, impostare l esportazione dei soli file modificati dopo l ultima esportazione. e. In caso di Blog e Feed RSS, impostare l esportazione solamente degli Articoli aggiunti dopo l ultima esportazione Operazioni sul Server a. Navigare fra le cartelle presenti su Server e, all occorrenza, ricaricarne il contenuto. b. Visualizzare il contenuto delle cartelle su Server in modalità Lista o Dettagli. c. Portare a termine operazioni di gestione come: creare una nuova cartella, eliminare un file o una cartella, rinominare un file. d. Caricare e scaricare un singolo file su Server Notifiche sui Social Network a. Al termine della pubblicazione online, prevedere la segnalazione a Google del file Sitemap.xml aggiornato del sito Web. b. Al termine della pubblicazione online, prevedere la pubblicazione di un aggiornamento di stato sulla propria pagina su Facebook per segnalare l avvenuta pubblicazione. c. Al termine della pubblicazione online, prevedere la pubblicazione di un tweet sulla propria pagina su Twitter per segnalare l avvenuta pubblicazione. Pagina 30 di 31

31 5.1 Salvataggio e pubblicazione Esportazione del sito su disco a. Esportare il sito Web in modo che i file generati vengano salvati all interno di una cartella specificata su disco locale. b. Visualizzare i file generati dall esportazione e aprirli con un editor per, eventualmente, modificare manualmente il codice Esportazione del progetto a. Esportare il sito Web in modo da generare un file di progetto, salvato all interno di una cartella specificata su disco locale. b. Archiviare il file di progetto ottenuto dall esportazione come copia di backup Importazione del progetto c. Spostare il file di progetto ottenuto dall esportazione su un secondo computer, diverso da quello sul quale si è lavorato. d. Importare un file di progetto in modo da poter portare avanti la creazione di un sito Web da un computer diverso. Pagina 31 di 31