<<< Torna al programma generale
Programma del master in web design: DREAMWEAVER CC, online
-
Il web e gli standard
Impostazione di un sito web in locale e remoto e configurazione FTP su Dreamweaver. Discussione su internet e sui princìpi del web design.
Internet e W3C. Differenze tra linguaggi di descrizione e linguaggi di programmazione. File, cartelle e relazioni con un sito web. Conoscere i browser per la navigazione. Gestione attraverso il pannello file. Percorsi assoluti e relativi. File locali e file remoti. Interfaccia di Dreamweaver . Vista codice, progettazione, dal vivo. Codice dal vivo e funzione esamina di Dreamweaver. Connessione FTP con Dreamweaver. Server di prova per siti web dinamici.
-
Il linguaggio HTML
Storia del linguaggio HTML e evoluzione. Prime nozioni e fondamenti di sintassi.
Il linguaggio HTML e la sua evoluzione. Differenze tra HTML4, XHTML e HTML5. Creare e salvare una pagina HTML. Creare la home page di un sito web. Zone del codice di servizio e per i contenuti. Tag html, head e body. Tag per il testo e tag contenitori. Tag semantici in HTML5. Creare un link verso una pagina, un’URL, una mail, un’ancoraggio con nome. Salvataggio e anteprima con i browser.
-
Il linguaggio CSS
Storia del linguaggio CSS e sua evoluzione. Prime nozioni e fondamenti di sintassi.
Storia del linguaggio CSS. Standard e accessibilità di un sito web. Indipendenza dai dispositivi e siti web responsive. Siti web “table-less”. Velocità di caricamento delle pagine. Velocità di modifica e manutenzione di un sito web con i CSS. Motori di ricerca e indicizzazione dei contenuti. Utilizzare gli standard W3C. Distinzione tra contenuti e aspetto grafico o formattazione di una pagina.
-
Design con i CSS e prime regole
Prime nozioni di sintassi CSS: proprietà e selettori. Descrizione di base e impostazioni prime regole CSS di un layout di una pagina web.
Sintassi delle regole CSS. Proprietà, valori e selettori. Stili CSS incorporati, fogli di stile esterni ed importati. Creare un file foglio di stile CSS. Applicare le regole CSS ai tag HTML attraverso l’uso dei selettori. Design di una pagina web con i CSS. Tecnica del reset di Eric Meyer e discussione sul suo utilizzo. Tecniche di formattazione di base. Selettori per tipo di elemento. Cenni alle classi, pseudo-classi e agli identificatori univoci. Proprietà CSS per il testo. Il colore in HTML e in CSS. Colorare il testo, i link e lo sfondo di elementi HTML.
-
Box model CSS
Proprietà del box model e prime impostazioni grafiche.
Box model e proprietà CSS correlate. Larghezza e altezza, larghezza minima e altezza minima. Bordi CSS. Margini interni ed esterni (margin e padding). Overflow. Proprietà CSS display. Elementi in linea e a livello di blocco. Unità di misura per i caratteri e per le dimensioni dei box. Tag div e contenitori HTML5. Inserimento di immagini e formattazione CSS. Gestire immagini di sfondo. Posizionamento statico e cenni ai posizionamenti relativi, assoluti e fissi (argomenti trattati in seguito).
-
CSS designer di Dreamweaver e di Pinegrow
Editare il codice CSS con software di design avanzati come Adobe Dreamweaver CC 2018 e Pinegrow.
I vantaggi di utilizzare un editore come Dreamweaver. Differenze con l’editore di Pinegrow. Concetto di produttività e creatività per un sito web. Gestire i fogli stile con le media queries nel CSS Designer. Origini, oggetto multimediale, selettori e proprietà con il CSS Designer.
-
Responsive web design
Utilizzo delle media queries CSS e layout responsive adattabili a tutti i dispositivi.
Attributo media. Tipi di media e media queries. Media features. Orientamento verticale e orizzontale per smartphone e tablet. Gestire i fogli stile con le media queries. Media queries in CSS. Media queries in Dreamweaver.
-
Design avanzato
Design di alto livello con proprietà Float e Flex. Selettori avanzati CSS.
Concetto di flusso degli elementi HTML. Normale flusso degli elementi. Proprietà float. Float left e right. Contornare un elemento con il testo. Proprietà clear. Clear left, right e both. Pseudo-classi e pseudo-elementi. Interruzione del float con pseudo-elementi e contenuti generati (:after e :before). Cenni alla proprietà Flex.
-
Navigazione (menu)
Creare un menu di navigazione, ottimizzato per tutti i dispositivi.
Relazione tra elenchi puntati (o numerati) e menu di navigazione. Menu verticali e orizzontali. Menu a un livello e menu a più livelli (a tendina). Menu con i pulsanti ed utilizzo delle pseudo-classi. Menu flottanti e menu fissi.
-
Posizionamenti CSS
Posizionamenti statici, relativi ,assoluti e fissi. Layout design avanzato.
Posizionamento statico. Posizionamento relativo e proprietà z-index. Blocchi con posizionamento assoluto. Posizionamento fisso. Tecniche avanzate di posizionamento con i CSS.
-
Approfondimento sulle nuove versioni CSS
CSS2, CSS3 e moduli CSS4.
Selettori di attributo e attributo multipli. Pseudo-classi :nth-child, :nth-of-type. Pseudo-classi :first-child e :first-of-type. Pseudo-classe :not e :empty. Pseudo-elementi :first-line, :first-letter, :before e :after. Contenuti generati in CSS e proprietà content. Selettori combinatori. Combinatori di adiacenza, figlio, di discendenza e di precedenza. Specificità delle regole a cascata. Direttiva !important. Moduli CSS4
-
Transizioni e trasformazioni
Transizioni, trasformazioni ed effetti in linguaggio CSS.
Trasformazioni CSS. Trasformazioni scala, ruota, trasla, distorci. Applicare trasformazioni multiple. Modificare l’origine della trasformazione di un elemento. Transizioni CSS3. Proprietà, durata e temporizzazione. Utilizzo delle transizioni con Dreamweaver . Implementazione sui browser.
-
Webfont e caratteri, Google WebFont e ®TypeKit
Gestione dei font per i siti web. Design avanzato.
Selettori di attributo e attributo multipli. Pseudo-classi :nth-child, :nth-of-type. Pseudo-classi :first-child e :first-of-type. Pseudo-classe :not e :empty. Pseudo-elementi :first-line, :first-letter, :before e :after. Contenuti generati in CSS e proprietà content. Selettori combinatori. Combinatori di adiacenza, figlio, di discendenza e di precedenza. Specificità delle regole a cascata. Direttiva !important.
-
Form e moduli
Moduli per l’invio di email, protezione password in Php. Design dei form con i fogli stile CSS.
Il linguaggio dinamico. Differenza tra linguaggi lato server e linguaggi lato client. Hypertext Preprocessor o Php. Utilizzo e diffusione del linguaggio Php. Installare un form in Php con controllo dei campi, delle variabili e pagine di ringraziamento. Protezione di una pagina con password sicura in Php. Formattazione CSS di un form e dei tag correlati. Applicazione delle transizioni e degli effetti sui form.
-
Gallerie e slideshow, framework Bootstrap e video
Utilizzo di javascript e jQuery per creare gallerie. Layout con Bootstrap e gestione file video.
Cos’è javascript e cos’è jQuery. Scaricare le librerie. Installare librerie jQuery in un sito web. Strumenti per sviluppatori sui browser. Document Object Model (DOM). Selezionare elementi. Eventi e azioni semplici per comprendere le basi. Installare una galleria fotografica lightbox con jQuery. Installare uno slideshow jQuery. Utilizzare la funzione animate per le animazioni. Bootstrap integrato con Dreamweaver. Componenti bootstrap e layout predefiniti.
-
SEO e web marketing
Indicizzazione sui motori di ricerca, statistiche, strumenti per i webmaster. Princìpi di web marketing: campagne sui motori di ricerca e sui social network.
I motori di ricerca. Google. Gestire ed organizzare i contenuti di un sito web per la corretta indicizzazione sui motori. Creare una mappa del sito in XML. Metatag e title. Tecniche da evitare. Redirect 301. Google Analytics e strumenti per i webmaster. Google Adwords e campagne pubblicitarie mirate. Sfruttare bene i social network. Campagne e contenuti virali. Campagne a pagamento di Facebook. Controllo ed utilizzo delle statistiche per ottimizzare i contenuti.
-
WordPress 1
Introduzione al CMS (Content Management System). Installazione della piattaforma online.
Piattaforma CMS WordPress. Differenze tra WordPress e Joomla. Installazione online e in locale. Collegare WordPress al database mySql. Bacheca di WordPress. Temi, plugin e widget.
-
WordPress 2
Blog, e-commerce. Modifica dei temi con l’editor integrato e con Dreamweaver.
Collegare i social network. Installazione dei plugin più importantiModificare i temi con i CSS e con Dreamweaver. Temi per e-commerce. Creare un social network con Buddypress.
-
WordPress 3
Creare un tema in locale e gestione con MAMP.
Creare i file php che compongono il tema (header, index, sidebar, footer, page, single, search, 404). Creare il file “function.php”. Creare i menu del tema. Funzione custom logo. Creare il file “style.css”. Corrispondenza tra css e attributi html del tema.
-
WordPress 4
Versioni responsive e fase di test.
Verifica e correzioni delle versioni responsive. Creazione della versione “full-width” (senza sidebar) del tema. Verifica di tutte le funzionalità e eventuali correzioni. Aggiunta del codice e delle pagine per WooCommerce.