Rivolto a
Privati
Livello
Base
Modalità
Online
Per chi è il Corso e cosa tratta
Superata l'introduzione teorica, si passa subito all'aspetto pratico del lavoro di web-designer, concentrando l'attenzione sugli elementi essenziali per caratterizzare e personalizzare la grafica di una pagina web dedicando ampio spazio alla gestione dei caratteri tipografici (attraverso il servizio Google Font) e delle icone (per le quali viene proposto il servizio Fontello).
Il corso fornisce 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, fornendo consigli pratici sulla stilizzazione della "barra di avviso" diventata, per legge, elemento costante nel design di ogni sito web italiano.
Il corso di Web Design è rivolto a chiunque desideri intraprendere la carriera di web-designer, in particolar modo, è pensato per offrire a chi già conosce il linguaggio HTML e CSS un approccio, vasto e completo, circa l'aspetto grafico delle pagine web affrontando argomenti come la scelta dei colori, dei font, delle icone nonché la realizzazione dei più moderni layout.
Il corso fornisce 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, fornendo consigli pratici sulla stilizzazione della "barra di avviso" diventata, per legge, elemento costante nel design di ogni sito web italiano.
Il corso di Web Design è rivolto a chiunque desideri intraprendere la carriera di web-designer, in particolar modo, è pensato per offrire a chi già conosce il linguaggio HTML e CSS un approccio, vasto e completo, circa l'aspetto grafico delle pagine web affrontando argomenti come la scelta dei colori, dei font, delle icone nonché la realizzazione dei più moderni layout.
Offerta: Prezzi, Costi e condizioni
| 1 studente | € 49 cad. |
E' possibile acquistare il corso in diverse modalità:
Easy (49 Euro)
Questa modalità permette di fruire del corso e dei servizi ad esso collegati (area download, quaderno appunti, quiz...) per 30 giorni.
Tutor (109 Euro)
Questa modalità comprende l'accesso al corso per 30 giorni e l'assistenza di un tutor che potrà essere contattato in caso di dubbi o difficoltà.
Certificate (129 Euro)
Questa modalità consente di fruire del corso per 60 giorni, comprende l'assistenza di un tutor e la spedizione di un attestato di partecipazione che dimostri la frequentazione del corso online da parte dell'utente.
Extra (139 Euro)
Questa modalità offre l'accesso al corso per 90 giorni, comprende l'assistenza di un tutor durante la fruizione del servizio e la spedizione di un attestato di partecipazione finale.
Easy (49 Euro)
Questa modalità permette di fruire del corso e dei servizi ad esso collegati (area download, quaderno appunti, quiz...) per 30 giorni.
Tutor (109 Euro)
Questa modalità comprende l'accesso al corso per 30 giorni e l'assistenza di un tutor che potrà essere contattato in caso di dubbi o difficoltà.
Certificate (129 Euro)
Questa modalità consente di fruire del corso per 60 giorni, comprende l'assistenza di un tutor e la spedizione di un attestato di partecipazione che dimostri la frequentazione del corso online da parte dell'utente.
Extra (139 Euro)
Questa modalità offre l'accesso al corso per 90 giorni, comprende l'assistenza di un tutor durante la fruizione del servizio e la spedizione di un attestato di partecipazione finale.
Tutti i prezzi si intendono IVA esclusa.
Programma del Corso
-
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 network
- 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
Obiettivi del Corso
Il corso si prefigge l'obiettivo di fornire solide conoscenze sul mondo del design di pagine web. Al termine del percorso didattico, pertanto, il discente sarà in grado di realizzare pagine web dal look moderno e accattivante.