Corso Web Design

Programma del Corso Web Design

156 ore di corso in diretta

• Grafica per il web 15 ore

  • 
    Gli strumenti di Photoshop
  • L'interfaccia e l'area di lavoro
  • Creazione di nuovi documenti nei diversi formati per la stampa e il web
  • Studio della risoluzione per stampa, fotografia e web
  • Dimensione e ricampionamento immagini
  • I formati di esportazione (jpg, png, gif, tiff, pdf, psd)
  • Cenni sulla teoria dei colori: principali differenze tra metodo rgb e cmyk
  • Regolazione delle immagini attraverso l'uso di istogrammi e le curve
  • I livelli
  • Strumenti di selezione e di scontorno
  • Tecniche di selezione perfetta, creazione delle maschere e rifinitura dei bordi
  • Uso di Correzione colore
  • Strumenti di fotoritocco ed editing di immagini
  • Strumenti di testo
  • Livello regolazione bianco e nero
  • Livello regolazione bianco e nero su metodo di fusione luminosità
  • Livello di regolazione tonalità / saturazione / luminosità
  • Livello di regolazione Soglia
  • Filtro, polvere e graffi
  • Sfocatura
  • Maschera di Contrasto
  • Strumento righello e ritaglio in prospettiva
  • Automatizza > Photomerge
  • Oggetto avanzato vettoriale e interazione tra Photoshop e Illustrator
  • Creazione di un pennello e impostazioni pennelli
  • Opzioni dei pennelli
  • Creazione di un pattern con effetto di continuità (filtro > altro > sposta)
  • Metodo di colorazione digitale e metodi di fusione dei livelli
  • Effettistica e Color Correction:
    • Lavorare in modo non distruttivo sulle immagini
    • Nozioni di tipografia e composizioni tipografiche per web

• UI/UX design30 ore

  • 
    Ricerca e Analisi del progetto
  • Individuazione del briefing e del problema da risolvere
  • 
    Concept
  • Generare idee e validarle. Ovvero, come risolvere il problema e come organizzare la struttura dell'applicativo
  • Architettura delle informazioni - IA
  • Tree test per validazione Architettura Informazioni
  • Analisi funzionale basica
  • Concetto di UCD (user centered design process)
  • Eventuale Card sort e lavoro con penna e matita per un brainstorming
  • Prime bozze / idee realizzate su carta
  • 
    Design
  • Rendere reale il concept ideato
  • Studio e definizione dei componenti Web
  • Studio e posizionamento dei contenuti e dei componenti all'interno dell'applicativo
  • Censimento dei componenti web esistenti, approfondendone le caratteristiche, le dimensioni, l'aspetto e la funzionalità
  • Google Material
  • Bbc Gel Styleguide
  • Creazione di un Wireframe per approvazione di un applicativo
  • Concetto di User Interface - UI
  • Comunicazione Visuale dell'applicativo
  • Colori
  • Creazione di un'interfaccia grafica pixel perfect, personalizzazione del wireframe approvato
  • Responsività e concetto di risoluzione relativa alla proporzione rispetto alla viewport
  • Typography
  • Gerarchia degli elementi grafici
  • Accessibilità tenendo conto dei font e colori per persone disabili. Simulazioni on line
  • 
    Testing
  • Usabilità e Accessibilità
  • SPLIT TEST + AB test + PREFERENCE TEST
  • Concetto di testing sull'utente finale. Come migliorare l'applicativo tramite feedback
  • Simulazione della consegna dell'interfaccia dell'applicativo ad un ipotetico reparto di sviluppo web
  • Software per la fase di Design:
    • Adobe Illustrator, Adobe Photoshop. Eventuale valutare XD e Sketch.
  • Formato finale: Interfaccia pixel perfect in formato immagine + file sorgente + PDF per mostrare il lavoro al cliente
  • 
    Digital Styleguide e consegna
  • Creazione di una guida di stile multipagina per l'applicativo realizzato, dove viene illustrato il layout dell'applicativo e ogni singolo componente utilizzato
  • Creazione di un layout grafico per impaginare la guida
  • Redazione di un indice dei contenuti e illustrazione dei singoli componenti utilizzati all'interno della guida
  • Coerenza di linguaggio sia testuale che visivo
  • Simulazione della consegna del manuale digital ad un ipotetico reparto di sviluppo web

• HTML5 e CSS3 30 ore

  • 
    Il linguaggio HTML
  • Introduzione al linguaggio HTML
  • Sintassi di base
  • Concetto di tag, attributo e valore
  • Problemi di compatibilità tra browser
  • HTML e l'accessibilità delle pagine web
  • La formattazione del documento web - i paragrafi e la titolazione
  • Gli elenchi puntati e numerati
  • I collegamenti ipertestuali
  • Inserire immagini in un documento web
  • I formati grafici per il web
  • La realizzazione delle tabelle
  • Il Tag IFRAME per incorporare contenuti web esterni al proprio sito (Youtube, Google Maps, Vimeo, Facebook, etc.)
  • Risorse utili e casi pratici
  • 
    HTML5 semantico
  • Introduzione all'HTML5 e differenze con HTML4.01
  • La sintassi HTML5
  • Il supporto dei browser
  • Fallback e Polyfill per gestire retrocompatibilità dei browser
  • I nuovi TAG e gli attributi introdotti in HTML5
  • Elementi Header e Footer
  • Elementi Section e Article
  • La navigazione semantica con l'elemento Nav
  • Elementi Aside e Figure
  • Integrare Facebook all’interno del proprio sito Web
  • Open Graph Protocol
  • Risorse utili e casi pratici
  • 
    Le form e la multimedialità con HTML5
  • Creazione dei Form (moduli)
  • Analisi ed utilizzo dei campi form HTML
  • Le novità introdotte per le form in HTML5
  • I tag AUDIO e VIDEO e i loro attributi
  • I formati audio e video supportati
  • Progettare video per tutti i device
  • Risorse utili e casi pratici
  • 
    I fogli di stile CSS
  • Introduzione ai fogli di stile CSS
  • Separare lo stile dai contenuti
  • Le regole della sintassi CSS
  • Differenti tipologie di fogli di stile: fogli di stile in linea, incorporati, esterni, importati
  • Analisi degli stili principali: gli stili del testo, gli stili per lo sfondo
  • Utilizzare le Classi e le pseudoclassi CSS
  • ID univoco
  • Caso pratico: realizzazione di una barra di navigazione complessa
  • Le immagini in Background
  • Il box Model CSS tradizionale
  • Tre proprietà speciali: display, float e clear
  • Il Layout Fisso
  • Il Layout Fluido o Liquido a due e tre colonne
  • Il Layout elastico per adattare il proprio sito a differenti risoluzioni e dimensioni del monitor
  • Impostare un CSS Reset
  • La proprietà @font-face
  • I nuovi formati per i font: Woff e Woff2, SVG
  • Utilizzare i colori rgba e la proprietà opacity
  • La proprietà box-sizing
  • Arrotondare i bordi dei box
  • Le proprietà CSS3 per ombreggiare Box e Testi
  • Le pseudoclassi introdotte dai CSS3
  • Risorse utili e casi pratici
  • 
    Le Media Queries CSS
  • Riconoscere un dispositivo mobile
  • Definire i breakpoint con le Media Queries CSS3
  • Impostare Script e Markup HTML per un progetto "responsive"
  • Ottimizzare un layout per smartphone - impostare il breakpoint a 480px
  • Ottimizzare un layout per tablet - impostare il breakpoint a 768px
  • Lavorare per il desktop - impostare il breakpoint a 1024px
  • Orientare lo schermo: Landscape e Portrait
  • Il meta tag 'Viewport'

• Javascript e jQuery 18 ore

  • 
    Il linguaggio JavaScript
  • Introduzione a JavaScript
  • Sintassi di base
  • Variabili e tipi
  • I blocchi condizionali if e switch
  • Gli operatori logici
  • Gli array
  • I cicli for e while
  • Oggetti principali del browser gestiti tramite JavaScript: window, document, location, history
  • Le funzioni in JavaScript
  • 
    Javascript e il DOM
  • Il DOM (Document Object Model): elementi, attributi, nodi testuali
  • Funzioni per l'interazione con il DOM
  • Manipolare gli stili CSS e il contenuto degli elementi con Javascript e DOM: le proprietà style e innerHTML
  • Gli eventi in JavaScript
    • onload, onclick, onsubmit, onscroll, ecc...
    • eventi del mouse (il double click, move, key press, ecc...)
    • Il metodo addEventListener()
  • 
    Le librerie jQuery
  • Introduzione alle librerie jQuery
  • Inglobare in una pagina web le librerie jQuery
  • L'operatore $ e la sintassi di base jQuery: selettori, attributi, classi e metodi base
  • Le funzioni html(), text(), css()
  • Manipolazione degli elementi della pagina e dei CSS: le funzioni append() e appendTo()
  • Effetti e Animazioni: spostare e animare gli oggetti della pagina
  • Le funzioni hide(), show(), fadeIn(), fadeOut(), animate()
  • Realizzare siti web "one page" con effetti di menu a scorrimento
  • I plugin jQuery per realizzare effetti d'animazione

• Responsive Web Design + CSS Flexbox + CSS Grid15 ore

  • 
    Il Responsive Web Design
  • I principali browser per dispositivi mobili (Safari, Mozilla Firefox, Google Chrome)
  • Da un layout multicolonne ad un layout monocolonna
  • Realizzare layout elastici a griglie fluide
  • Introduzione al 'Responsive Design'
  • Riconoscere un dispositivo mobile
  • Orientare lo schermo: Landscape e Portrait
  • Il meta tag 'Viewport'
  • Stili per il mobile: layout, dimensioni, font
  • Stili per il mobile: la navigazione
  • I 3 approcci per un layout Responsive: Desktop First, Mobile First, Content First
  • 10 regole da rispettare per realizzare un layout responsive
  • Strumenti per i test, siti web di riferimento
  • 
    CSS Flexbox
  • CSS Flexbox, i principi di base
  • Creare griglie monodimensionali
  • Display:flex
  • La proprietà justify-content per allineare gli item di un FlexBox
  • Le proprietà flex-direction, flex-wrap e flex-flow
  • La proprietà shorthand degli item del flexbox: FLEX
  • Differenze tra la proprietà width e la proprietà flex-basis
  • Creare colonne affiancate con la stessa altezza
  • Modificare l'ordine degli item di un flexbox
  • Nidificare i Flexbox
  • Caso pratico: realizziamo una barra di menu orizzontale con i FlexBox
  • Risorse utili e casi pratici
  • Appendice: Utilizzare Flexbox e CSS Grid insieme
  • 
    CSS Grid
  • Introduzione a CSS Grid
  • Definire una griglia
  • Creare griglie bidimensionali con grid-template-columns e grid-template-rows
  • Utilizzare le percentuali e il metodo css repeat()
  • Utilizzare l'unità di misura Fractional Units
  • Posizionare gli elementi della griglia
  • Utilizzare grid-template-areas e grid-area per definire zone della griglia
  • max-content, min-content, minmax()
  • Cambiare l'ordine di posizionamento degli elementi della griglia
  • Creare layout con griglie nidificate
  • Esempio pratico: Realizziamo un Fluidly Responsive Grid senza l'ausilio di Breakpoints e delle Media Query
  • Risorse utili e casi pratici

• SEO12 ore

  • 
    Introduzione alla Search Engine Optimization
  • Come funzionano i motori di ricerca
  • Storia ed evoluzione dei motori di ricerca
  • 
    SEO Best Practice
  • Introduzione agli algoritmi dei motori di ricerca
  • Caffeine
  • Panda: l'elemento di svolta per i contenuti
  • Penguin e i link
  • Hummingbird, Pigeon e Mobile
  • 
    Elementi Fondamentali della SEO: On page Optimization
  • Introduzione alla on-page SEO
  • Meta Data e Meta Tags
  • Title Tags
  • Meta Description e Meta Keyword
  • Ottimizzazione delle URL
  • Come utilizzare gli Heading Tags
  • Creare e ottimizzare contenuti unici
  • 
    SEO Tecnico: fondamenti
  • Introduzione alla Google Search Console
  • Il file sitemap.xml
  • Il file robots.txt
  • Codice di Errore comuni e come risoverli
  • I Redirects
  • Pagine 404: best Practice
  • 
    Presentazione di Google Analytics
  • Perché l'analisi dei dati digitali
  • Come funziona Google Analytics
  • Configurazione di Google Analytics
  • Come configurare le viste con i filtri
  • 
    Il layout di Google Analytics
  • Imparare a utilizzare Google Analytics
  • Comprendere i rapporti Panoramica
  • Comprendere i rapporti completi
  • Come condividere i rapporti
  • Come configurare dashboard e scelte rapide
  • 
    Rapporti di base
  • Rapporti Pubblico
  • Rapporti Acquisizione
  • Rapporti Comportamento

• WordPress + WooCommerce 36 ore

  • 
    Introduzione a WordPress
  • Cos'è e come funziona WordPress
  • Installazione e configurazione
  • I temi di WordPress e la loro organizzazione gerarchica
  • La struttura di base di un tema di WordPress
  • Le cartelle di base, la cartella wp-content e le sue sottocartelle Themes e Plugins
  • I file indispensabili (style.css, index.php)
  • Il Pannello di Amministrazione
  • 
    Creare un blog con WordPress
  • Installazione di un tema di base (free o premium) e modifica automatizzata dei parametri (font, colori, immagini)
  • Inserimento e Modifica di Articoli (Post)
  • Inserimento e Modifica di Pagine e Menu
  • Estendere le funzionalità di base di WordPress con i componenti già disponibili nel tema (Widgets)
    • Il box di ricerca
    • L'elenco delle categorie degli articoli
    • Il calendario con gli articoli mensili
    • La photo gallery
  • 
    I plugin di WordPress
  • Cosa sono i plugin
  • I plugin già installati nel tema di WordPress
  • Aggiungere nuovi plugin
    • Il plugin Yoast per la SEO
    • Il plugin Fancybox per creare Photo Gallery e Slide Show
    • Il plugin WPML per i contenuti multilingua
  • 
    Personalizzare un tema di WordPress
  • Modicare le regole css del foglio di stile del tema di WordPress (style.css)
  • Realizzare un tema child custom con la ridefinizione (o realizzazione ex novo) del foglio di stile e degli elementi strutturali del tema (header, footer, sidebar)
  • Aggiungere funzionalità javascript/jQuery custom
  • 
    WordPress: la struttura di un tema
  • La struttura di un tema, file e cartelle
  • Analisi dei file principali: index.php, style.css, functions.php
  • Analisi degli altri file: header.php, footer.php, single.php...
  • Theme Customizer: che cos’è e da dove si gestisce
  • 
    Sviluppo di un tema da zero
  • Ideazione e sviluppo di un layout di base
  • L’inizio di tutto: nuova cartella e style.css
  • Il file index.php e functions.php
  • Funzioni di base: thumbnail, screen size, supporto ai tipi di post...
  • Stili, script e librerie: wp_enqueue_script() e wp_enqueue_style()
  • Stili di base (reset, etc)
  • Integriamo la base con header e footer  (get_header() e get_footer())
  • Le posizioni menu: come crearle
  • I menu: richiamarli nel front-end con wp_nav_menu()
  • 
    Il loop
  • Cos’è il loop e come si gestisce
  • Il loop dentro index.php
  • Visualizzazione dei contenuti: the_title(), the_content(), the_excerpt()...
  • 
    Post e pagine
  • Creazione di single.php e di page.php
  • Visualizzazione dei contenuti
  • 
    Archivi
  • Creazione di category.php e tag.php
  • Il loop negli archivi
  • Altri archivi: author.php, etc...
  • 
    Sidebar
  • Cosa sono le posizioni sidebar e come funzionano
  • Creazione di posizioni sidebar con register_sidebar()
  • Richiamare le sidebar nel frontend, dynamic_sidebar()
  • 
    Studio avanzato del loop
  • WP_Query() e le sue potenzialità
  • Custom loop in pagine o post singoli
  • 
    Theme Customizer
  • Informazioni strutturali e creazione di customizer.php
  • Aggiunta sezioni e impostazioni
  • Come ricavare le impostazioni inserite con get_theme_mod()
  • Esempi ed esercitazioni
  • 
    Finalizzazione e testing
  • È tutto ok? Ce lo dice il WordPress Theme Check Plugin
  • Validazione markup con il w3c Validator
  • 
    Creare e gestire un eCommerce con WordPress: il plugin WooCommerce
  • Installare e configurare il plugin WooCommerce
  • Aggiungere/Modificare categorie e prodotti
  • Gestire il modulo di ricerca e la scelta dei prodotti
  • Il carrello della spesa
  • Gestire ordini e fatturazione
  • La modalità di pagamento tramite Paypal
  • Gestire le spedizioni
  • Realizzare un eCommerce multilingua

24 ore di video lezioni (on demand)

• La libreria Boostrap6 ore

  • 
    Bootstrap: il framework CSS/JS
  • Responsive bootstrap
  • Bootstrap per il mobile
  • Elementi di bootstrap
    • CSS di base e avanzato
    • Componenti JS (Accordion, Tabs, Tooltips, Popover, Carousel...)
  • Personalizzazione di bootstrap
  • Temi
  • Componenti aggiuntivi di terze parti

• CSS SASS4 ore

  • 
    Installare Sass e Compass
  • Usare SASS
  • Lavorare con Sass e Compass da riga di comando
  • Impostare un progetto Sass
  • Lavorare con i partial files
  • Dichiarare variabili
  • Nesting, Extend, Placeholders e Mixins
  • Media Queries CSS3 avanzate con Sass
  • CSS3 semplificati con Compass

• Responsive HTML Email 4 ore

  • 
    I Layout di base per Email Responsive
  • Introduzione
  • I principali client di posta elettronica: limiti e punti di forza
  • Le Best Practices per la realizzazione di layout per Email e Newsletter
  • Ritorniamo al 1995: lavorare con le tabelle
  • Centrare le Email
  • Aggiungere stili in linea CSS per il testo
  • Regole di stile CSS Email-Friendly
  • 
    Aggiungere Contenuti al nostro Layout
  • Attributi HTML vs regole di stile CSS
  • Header efooter della mail
  • 
    Gestione dei Links e delle Immagini
  • Convertire i percorsi dei link e delle immagini in URL assoluti
  • Lo stile dei Links
  • Gli stili per le immagini
  • 
    Testare la Mail e la Newsletter realizzata
  • Test e debug in differenti clients di posta elettronica
  • Risoluzione dei principali problemi per Outlook.com, Gmail, Yahoo! Mail, iOS Mail, Outlook 2007/2010

• I video HTML5 4 ore

  • 
    Introduzione ai video in HTML5
  • TAG Video VS iFrame: pubblicare contenuti video in una pagina web
  • I video in modalità responsive
  • Le API JavaScript del TAG Video
  • JavaScript e i metodi play, pause, currentime, ecc...
  • Gestire la riproduzione video con gli eventi (scroll, click, ecc...)
  • Video Background: inserire un video come sfondo di una pagina web

• GIT 6 ore

  • 
    Introduzione al versioning: lavorare in team in una web application
  • 
    Software per installazione/ utilizzo di web application
  • Composer
  • Vagrant
  • Git Hub
  • 
    Introduzione a Git ed ai sistemi di versioning (software per il controllo di versione distribuito)
  • Repository esterni (NPM - Node Package Manager)
  • CLI (Command Line Interface)
  • Installazione di GIT
  • 
    I progetti GIT
  • Inizializzazione e configurazione di un progetto Git
  • Clonare un progetto GIT ed aggiungere componenti
  • Repository remoti: GIT HUB e suo utilizzo
  • 
    Branches: ramificare un progetto GIT
  • Creare un nuovo branch
  • Operazioni sui branches: navigazione, merge, commit