Corso Web Design

Webdesign e Responsive Design dei siti Web

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 stio web italiano.

1. E' prevista nelle mod. Tutor, Certificate ed Extra
2. E' previsto nelle mod. Certificate ed Extra

Prezzi ed Info del corso Web Design

A chi è rivolto

Il corso di Web Design è rivolto a chiunque desideri intraprendere la carriera di web-designer. Il corso, in particolar modo, è pensato per offrire a chi già conosce il linguaggio HTML e CSS un approcio, 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.

Prerequisiti

Per la frequentazione del corso di Web Design è necessario avere già delle conoscenze di base dei linguaggi HTML e CSS, in caso contrario è fortemente consigliato frequentare il corso HTML ed il corso CSS in quanto propedeutici all'apprendimento delle tecniche di web-design oggetto del corso

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 dovrà essere in grado di realizzare pagine web dal look moderno ed accattivante.

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 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
10. 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
11. 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
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

Domande frequenti sul corso Web Design

• Qual'è la durata del corso Web Design?
  Il corso Web Design può essere fruito on-line 7 giorni su 7, 24 ore su 24 senza alcun vincolo di orario. Il Corso sarà accessibile dal momento dell'avvenuto pagamento per il tempo previsto dalla modalità prescelta.
• Come funziona il corso Web Design?
  Una volta attivato, potrai accedere alle lezioni del corso e potrai utilizzare gli strumenti di ausilio didattico (come, ad esempio, l'evidenziatore ed il quaderno appunti) nonché accedere all'area di download del corso. Al termine del corso Web Design potrai eseguire un quiz di autovalutazione per verificare qual'è il tuo grado di apprendimento della materia.
• Riceverò un attestato per la frequentazione del corso Web Design?
  Sì! L'attestato di partecipazione al corso Web Design viene riconosciuto a tutti gli utenti che acquistano il corso nelle modalità certificate o extra.
• L'attestato del corso Web Design è riconosciuto in ambito accademico?
  L'attestato del corso Web Design è un documento privato che certifica la partecipazione ad un percorso didattico on-line. Il corso Web Design, come tutti i nostri corsi, è riconosciuto in ambito privato e presso alcune Università potrebbe essere considerato valido per l'ottenimento di crediti formativi.
• Dopo aver frequentato il corso Web Design mi aiuterete a trovare lavoro?
  Non siamo un'agenzia di collocamento, ma non è infrequente che le aziende ci chiedano i nominativi dei nostri studenti per assunzioni e/o stage formativi. Ogni volta che ne abbiamo la possibilità, pertanto, segnaliamo sempre i nostri studenti.
• In che modo il corso Web Design può aiutare la mia carriera lavorativa?
  Il corso Web Design, come tutti gli altri corsi on-line di MRW Corsi, è finalizzato a formare nuovi professionisti del mercato digitale. Se studierai e ti impegnerai a fondo, siamo sicuri che il corso Web Design ti fornirà nuove competenze che potranno essere apprezzate dal mercato del lavoro. L'attestato del corso Web Design, inoltre, rappresenta una prestigiosa documentazione che potrai allegare al tuo curriculum.

Informazioni sul docente

Luca Ruggiero

Classe 1978, diplomato in ragioneria ad indirizzo informatico nel 1996, ho iniziato ad appassionarmi al Web alle soglie del nuovo millennio grazie ad un corso di formazione come agente di vendita nel comparto IT, nel quale ho fatto conoscenza con le basi dello sviluppo Web e con l'HTML. Successivamente ho avuto una breve esperienza in un'azienda nella quale ho imparato le basi dell'SQL, applicandolo sul DBMS Oracle. Ho poi lavorato per sette anni in un'azienda di informatica nella quale ho operato come sviluppatore Web, Desktop e come sistemista, frequentando al contempo corsi di XML e SOAP, Oracle, Java, Linux, .NET Framework, ASP ed ASP.NET.
Parallelamente ho continuato la mia formazione, sia teorica che pratica, verso la mia vera grande passione: Internet; allo scopo ho quindi approfondito l'HTML ed imparato i linguaggi CSS, Javascript e jQuery, AJAX, XML, ASP, PHP ed SQL oltre che tecniche di Webdesign, gestione database (MS Access prima MySQL poi) e sicurezza dei sistemi Web.
Amo la didattica, principalmente grazie alle esperienze di collaborazione con portali online specializzati del settore IT come HTML.it prima e MrWebmaster.it poi. Nel 2013 ho suggellato il mio rapporto con la divulgazione di contenuti entrando a far parte dell'Ordine dei giornalisti pubblicisti.