PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

Transcript

1 PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale del Web Designer. Durante il corso lo studente potrà apprendere le tematiche inerenti la progettazione di template grafici per tutti i dispositivi, la loro realizzazione e il montaggio. Le tematiche verranno affrontate con un occhio sempre attento a quegli aspetti della comunicazione e delle tecnologie che costituiscono un arricchimento fondamentale per i professionisti della Rete. Prerequisiti Nessun prerequisito particolare a parte un buon utilizzo di Internet. Obiettivi Realizzare e gestire siti web di piccole e medie dimensioni, avvalendosi degli strumenti e delle metodologie di analisi più di frequente utilizzati dai professionisti del settore. MODULO ADOBE PHOTOSHOP CS5 Unità didattica 1 - Grafica bitmap ed introduzione all utilizzo di photoshop Concetti fondamentali di Photoshop Immagini bitmap e grafica vettoriale Dimensioni e risoluzione delle immagini Unità didattica 2 - Uso degli strumenti Uso delle palette principali modificare le dimensioni e la risoluzione di un immagine metodi modelli di colore e conversioni tra i metodi di colore uso degli strumenti di selezione i tracciati di ritaglio la modalità maschera veloce Unità didattica 3 - La gestione del colore Colori singoli e quadricromia modalità colore: CMYK e RGB creazione e modifica dei colori Data Rev. 01/08/12 Motivo rev.: prima emissione REV. N.: 0 ED. N.: 0 Pag. 1 di 5

2 Unità didattica 4 - Creazione e gestione dei testi La palette carattere Formattazione dei testi Impaginare un testo Creare effetti sui testi Unità didattica 5 - Uso dei livelli I livelli e le loro proprietà La gestione dei livelli Modificare i livelli Le maschere di livello Gli stili di livello Unità didattica 6 - La trasparenza Applicare le impostazioni di trasparenza Modificare l opacità agli oggetti grafici Applicare un contorno sfocato Creazione di un ombra esterna MODULO HTML/CSS CON ADOBE DREAMWEAVER CS5 Unità Didattica 1 - Introduzione al web Come funziona il web? Modello client/server Differenze tra linguaggi di markup e linguaggi di programmazione Unità didattica 2 - Elementi di HTML HTML, dalla nascita al HTML5 Editor HTML, Adobe Dreamweaver CS5 Pannelli e barra delle proprietà in Dreamweaver Struttura di base del HTML, elementi di blocco e inline Tag principali in HTML: html, head, body ecc.. Creazione di una pagina HTML Modalità di visualizzazione dei documenti di lavoro in Dreamweaver Definizione attributi e panoramica attributi principali del HTML Data Rev. 01/08/12 Motivo rev.: prima emissione REV. N.: 0 ED. N.: 0 Pag. 2 di 5

3 Caricare i file su un server remoto: il protocollo ftp Impostare un sito in locale e in remoto con Dreamweaver Caricare, cancellare e spostare file in remoto e locale Unità didattica 3 - Inserire contenuti Come creare collegamenti ipertestuali, il tag a (link, ancore e mailto ) Differenze tra collegamenti assoluti e relativi Inserire le immagini, il tag img Creazione di liste, i tag ul, ol e li I formati immagine per il web Costruzione di una tabella, i tag table, tr,td Frame e iframe, incorporare una pagina HTML dentro l'altra Unità didattica 4 - I metadati e l'indicizzazione Definizione metadati Il Doctype, definizione e utilizzo Il tag head Inserire Title, description e keywords nelle pagine il tag meta Unità didattica 5 - I CSS e la formattazione delle pagine HTML Introduzione ai CSS e regole principali per la formattazione del testo Inserire CSS in linea Classi e id CSS interni alla pagina (tag style e selettori) I fogli di stile esterni, vantaggi e limitazioni Associare un foglio di stile esterno ad una pagina HTML Le pseudoclassi, in particolare :link, :visited, :hover Formattare i link tramite le pseudoclassi Unità didattica 6 - Impaginare in HTML Metodi superati di impaginazione (tabelle, frame) Il box model (padding, bordi e margini) Le regole float e clear. Realizzare un layout tramite css e i tag div Data Rev. 01/08/12 Motivo rev.: prima emissione REV. N.: 0 ED. N.: 0 Pag. 3 di 5

4 Unità didattica 7 - Realizzazione e manutenzione di un sito Realizzazione di un semplice sito, struttura HTML e veste grafica Messa online del sito Creazione di modelli in Dreamweaver e i vantaggi del loro uso Creazione aree modificabili Associare i modelli alle pagine HTML MODULO REALIZZARE TEMPLATE GRAFICI PER DISPOSITIVI MOBILI Layout a griglia fissa, fluidi e responsive Analisi del sito: definire il target Analisi dei contenuti Scegliere una paletta di colori e i font più adatti Definire un layout per ogni tipo di dispositivo (smartphone, tablet e desktop) Lavorare con una griglia: vincoli e vantaggi Gli stili del Web Design Pensare un sito moderno: il Flat Design MODULO HTML/CSS AVANZATO Scrivere codice semantico Lavorare con unità di misura relative: percentuali ed em Conoscere i dispositivi: risoluzione dichiarata ed effettiva Definire i breakpoint tramite le media query Impaginare tramite una griglia css Data Rev. 01/08/12 Motivo rev.: prima emissione REV. N.: 0 ED. N.: 0 Pag. 4 di 5

5 Utilizzare e personalizzare la griglia di Bootstrap Costruire menù mobile Transizioni e animazioni con il css3 MODULO ANIMAZIONI CON JQUERY Cos è jquery Da Javascript a jquery Importare jquery nelle pagine html I metodi e la sintassi Manipolare la pagina html Effetti e animazioni semplici Animazioni e widget avanzati con jquery UI Data Rev. 01/08/12 Motivo rev.: prima emissione REV. N.: 0 ED. N.: 0 Pag. 5 di 5