Corso Web Design

Webdesign e Responsive Design dei siti Web

Il corso online Webdesign prevede quantomeno una conoscenza di base dell'HTML e dei CSS. Senza dar comunque nulla per scontato, vengono toccate tutte le tematiche legate al design delle pagine Web, partendo dai concetti di usabilità, navigabilità ed accessibilità, passando per le tecniche di gestione dei colori e delle immagini. Dopo un'ampia panoramica sui principali colori del Web e dei caratteri speciali HTML, si passa alla pratica esaminando sistemi di creazione di utility basate su HTML5 e CSS3, nonchè alla creazione di icone personalizzate per arricchire i contenuti delle proprie pagine. Al lettore viene fornita, qualora assente, un'infarinatura su Javascript e jQuery, volte alle esigenze del Webdesigner, quindi si dedica ampio spazio al design table-less ed al responsive design, partendo da una lezione teorica, quindi facendo tre esempi pratici do approfondimento di creazione di un layout: boxed, fluido e "one page". Oltre a disegnare la homepage, viene spiegato come gestire le pagine di categoria di un ipotetico sistema di news, di una fotogallery e di una videogallery, imparando a gestire tutti gli aspetti fondamentali di queste pagine-tipo. Ampio spazio è dedicato anche alla gestione dei form e della creazione dei principali form-tipo che vengono utilizzati su di un sito: la casella di ricerca, il modulo dei contatti, il form di registrazione e quello di login. Il corso si conclude con una lezione sulla cookie law, con consigli pratici sulla stilizzazione della "barra di avviso".

Lezioni 17 lezioni testuali, suddivise in 118 argomenti
Immagini 230 immagini didattiche / illustrative
Download 35 risorse extra da scaricare
Servizi quiz, quaderno appunti, assistenza1 ed attestato finale2
Docente Luca Ruggiero
  1. E' prevista nelle mod. Tutor, Certificate ed Extra
  2. E' previsto nelle mod. Certificate ed Extra

Prezzi ed Info del corso Web Design

Modalità Easy
Corso (accesso base per 30 gg)
39 €
Modalità Tutor
Corso + Tutor (30 gg)
109 €
Modalità Certificate
Corso + Tutor (60 gg) + Attestato
129 €
Modalità Extra
Corso + Tutor (90 gg) + Attestato
139 €
N.B. I prezzi si intendono IVA esclusa
Acquista

Sommario lezioni del corso Web Design

  1. Il Webdesign, ovvero disegnare per il Web
    • Il Webdesign e la figura professionale del Webdesigner
    • Differenza tra layout e template
    • I linguaggi da conoscere
    • Usabilità, navigabilità ed accessibilità
    • Percezione psicologica dei colori nelle pagine Web
    • Formati e risoluzione delle immagini per il Web
    • La tecnica del CSS Reset
  2. Colori e caratteri speciali per il Web
    • Tavolozza dei colori esadecimali
    • Nomi dei colori HTML e Standard X11
    • Ottimizzare i codici esadecimali: da 6 a 3 caratteri
    • Tool online di conversione RGB/HEX ed HEX/RGB
    • Gestione dei colori, delle trasparenze e dei gradienti coi CSS
    • Tabella dei caratteri speciali HTML, Unicode ed Entity
    • Esempio: impostazione di copyright e marchio registrato
    • Esempio: mini previsione meteo
    • Esempio: box dell'oroscopo
    • Esempio: messaggio di successo ed errore con X di chiusura
  3. Font personalizzati con Google Fonts
    • Introduzione a Google Fonts
    • Importare uno o più font nelle proprie pagine
    • Esempio di impostazione di un font per i titoli
    • Esempio di impostazione di un font per i testi del sito
    • Importare i font di Google direttamente via CSS
  4. Icone personalizzate con Fontello
    • Introduzione a Fontello
    • Scelta delle icone e download di Fontello
    • Importare Fontello nelle proprie pagine
    • Esempio: citazione giornalistica
    • Esempio: icone per i social netwoek
    • Esempio: box delle previsioni meteo
    • Esempio: il bottone "aggiungi al carrello"
  5. Javascript e jQuery per il Webdesign, parte 1
    • Premesse generali
    • Introduzione a Javascript ed a jQuery
    • Effetto fade con jQuery
    • Effetto slide con jQuery
    • Effetto fade con Javascript e CSS3
    • Effetto slide con Javascript e CSS3
    • Animazioni con jQuery
  6. Javascript e jQuery per il Webdesign, parte 2
    • Animazioni con Animate.css
    • Tooltip coi CSS
    • Zoom su immagini con jQuery Zoom
    • Overlay con jQuery Lightbox
    • Overlay personalizzato coi CSS e Javascript (o jQuery)
    • Icona "torna ad inizio pagina", versione jQuery
    • Icona "torna ad inizio pagina", versione Javascript
  7. Elementi strutturali di un sito Web
    • Struttura di base di un sito Web
    • Il corpo della pagina ed il "container" principale
    • Header
    • Menu
    • Sidebar
    • Content
    • Footer
    • Elementi micro-strutturali
  8. Layout table-less e Responsive Design
    • Layout table-less, ovvero "senza tabelle"
    • La tecnica del Responsive Design
    • CSS3 @media query e supporto dei browser
    • Cenni su Bootstrap
  9. Tutorial, creazione di un layout responsive
    • Introduzione
    • Anteprima del progetto
    • Le immagini per il progetto
    • I font di Google e le icone di Fontello
    • I file esterni
    • Struttura HTML
    • Il foglio di stile di base
    • Il foglio di stile di stile responsivo
    • Le funzionalità jQuery
  10. Tutorial, creazione di un layout responsive
    • Introduzione
    • Anteprima del progetto
    • Le immagini per il progetto
    • I font di Google e le icone di Fontello
    • I file esterni
    • Struttura HTML
    • Il foglio di stile di base
    • Il foglio di stile di stile responsivo
    • Le funzionalità jQuery
  11. Tutorial, creazione di un layout responsive
    • Introduzione
    • Anteprima del progetto
    • Le immagini per il progetto
    • I file esterni
    • Struttura HTML di base
    • Intestazione e menu
    • Il billboard ed il riepilogo delle pagine
    • Il box coi link di riepilogo
    • I contenitori delle pagine
    • Focus sulla pagina dei contatti e sul form-mail
    • Il footer del sito
    • Il foglio di stile di base
    • Il foglio di stile di stile responsivo
    • Le funzionalità Javascript
  12. Focus sui menu di navigazione
    • Introduzione
    • Il menu del sito: la tecnica HTML
    • Stilizzazione di base del menu
    • Rendere responsivo il menu
    • Lo script per la gestione mobile del menu
  13. Design delle pagine interne, parte 1
    • Introduzione
    • Struttura HTML e CSS del sito di esempio
    • Disegnare la copertina di un giornale online
    • Disegnare l'elenco dei contenuti testuali
    • Pagina di lettura di una notizia / articolo / post
  14. Design delle pagine interne, parte 2
    • Disegnare la thumbnail di una fotogallery
    • Pagina di visualizzazione di una fotogallery
    • Disegnare la thumbnail di una videogallery YouTube
    • Pagina di visualizzazione di un video di YouTube
  15. Design ed accessibilità dei form
    • Introduzione
    • Accessibilità dei form
    • Stilizzare i form secondo i principi del box model
    • Radio e chechbox personalizzati
    • Aggiungere effetti CSS3
    • Stilizzazione del contenitore del form
  16. Esempi di design dei form-tipo di un sito
    • Introduzione
    • Disegnare il form di ricerca
    • Disegnare il box dei commenti
    • Disegnare il form dei contatti
    • Disegnare il form di iscrizione al sito
    • Disegnare il form login
  17. Design della barra di avviso dei cookie
    • Introduzione alla cookie law
    • Creazione e stilizzazione della barra di avviso
    • Inserire la barra nel layout boxed
    • Inserire la barra nel layout a pagina unica
    • Inserire la barra nel layout fluido