Programma corso web design

Programma del corso di web design

Aggiornato a: gennaio 2023.

Il web e gli standard

Impostazione di un sito web in locale e remoto e configurazione FTP. 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. Utilizzo di software per l’editing del codice come Dreamweaver o Pinegrow. Utilizzo di software gratuiti per l’editing come Brackets. Software per FTP e funzione integrata di Dreamweaver.

Il linguaggio HTML

Storia del linguaggio HTML e evoluzione. Prime nozioni e fondamenti di sintassi.

Il linguaggio HTML e la sua evoluzione. Differenze tra 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. Controllo della semantica e degli errori con gli outliner HTML5.

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 e verifica del codice. Distinzione tra contenuto e aspetto grafico 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. Cascata e ereditarietà delle proprietà CSS. Combinatori CSS. 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. Classi, pseudo-classi, 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).

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. Test sui dispositivi. Cenni a Flexbox e Grid (vedi lezioni successive).

CSS designer di Dreamweaver e di Pinegrow

Editare il codice CSS con software di design avanzati come Adobe Dreamweaver CC 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.

Design avanzato. Flexbox CSS e Grid.

Design di alto livello con proprietà Float, Flex e Grid layout. 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). Flexbox CSS. Flex container e flex items. Concetto di asse main e asse cross. Proprietà flex per il contenitore (flex container). Proprietà flex per i contenuti (flex items). Creazione di un layout responsive con le proprietà flexbox. Layout responsive a colonne con le proprietà Grid.

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.

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.

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.

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.

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. Google Search Console. 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 – Installazione

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 – Temi e contenuti

Blog, e-commerce. Modifica dei temi con l’editor integrato e con Dreamweaver.

Collegare i social network. Installazione dei plugin più importanti. Modificare i temi con i CSS e con Dreamweaver. Temi per e-commerce. Gestire i contenuti. Editore a blocchi di WordPress.

WordPress 3 – Creare un tema

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 – Test e verifica

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.