Corso: WebDesign , online Topcorsi Benevento

Il corso di Web Design si propone l'obiettivo di fornire una panoramica, il più possibile completa, al mondo del design di pagine web. All'interno del corso vengono trattate tutte le principali tematiche legate al mondo del web design, partendo dai concetti di usabilità, navigabilità ed accessibilità, passando per le tecniche di gestione dei colori e delle immagini. Superata l'introduzione teorica, si passa subito all'aspetto pratico del lavoro di web-designer dedicando ampio spazio alla gestione dei caratteri tipografici (attraverso il servizio Google Font) e delle icone (per le quali viene proposto il servizio Fontello), elementi essenziali per qualificare e personalizzare la grafica di una pagina web.
Il corso prosegue fornendo ai propri lettori un'ampia infarinatura di Javascript/jQuery relativamente alla gestione di diversi effetti grafici (fade, slide, zoom) nonché di diversi strumenti quali tooltip, overlay ed ancore di scorrimento.
La parte centrale del corso è interamente dedicata alla creazione di design table-less mediante la fondamentale tecnica del responsive design: il percorso didattico è strutturato partendo da una prima lezione teorica per poi dirigersi subito verso aspetti pratici del design: al lettore, infatti, vengono proposti tre differenti esempi relativi alla creazione di altrettanti 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 così a gestire tutti gli aspetti fondamentali di queste pagine-tipo.
Due ampie lezioni sono poi dedicate 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 dedicata alla gestione "grafica" della cookie law, con consigli pratici sulla stilizzazione della "barra di avviso" diventata, per legge, elemento costante nel design di ogni sito web italiano.

Sommario lezioni del corso Web Design

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

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

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

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"

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

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

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

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

Tutorial, creazione di un layout responsive boxed
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

Tutorial, creazione di un layout responsive fluido
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

Tutorial, creazione di un layout responsive single page (o one page website)
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

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

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

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

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

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

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