Corso Front End Developer

Programma del Corso Front End Development

• HTML5 e CSS3 36 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'

• GIT Video On Demand6 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

• Algoritmi e strutture dati Video On Demand10 ore

  • 
    La programmazione del calcolatori: modalità logiche per la risoluzione di problemi software
  • 
    Differenza tra algoritmi e programmi
  • 
    I diagrammi di flusso (flow charts): traduzione visiva della logica per la risoluzione di un programma
  • 
    Tipi di dati: numerici, stringhe, booleani, array, oggetti
  • 
    La programmazione strutturata e le strutture dei dati
  • Sequenze di istruzioni
  • Istruzioni condizionali (if..else, switch case)
  • Istruzioni iterative (cicli For / While / for ... each)
  • Il principio di Jacopini-Bohm (evitare l'uso del GoTo)
  • 
    La programmazione procedurale: risoluzione dei problemi "dal generale al particolare". Il concetto di funzione e il passaggio dei parametri
  • Funzioni iterative
  • Funzioni ricorsive
  • 
    Case studies sulla ricorsione
  • Calcolo del fattoriale
  • Lista dei file, cartelle e sottocartelle
  • Lista dei nodi/sottonodi nella struttura DOM di una pagina web
  • 
    Case studies: alcuni esempi di algoritmi di utilizzo comune
  • Calcolo della somma dei primi N numeri
  • Calcolo della serie Fattoriale
  • Calcolo della serie di Fibonacci
  • Ordinamento di un Array: il Bubble sort
  • Trovare il minimo e il massimo in un insieme di valori
  • Ricerca di un elemento in un insieme: la ricerca dicotomica
  • Pile e Code (LIFO / FIFO)
  • Strutture dinamiche complesse: Alberi, Grafi e reti di dati complesse
  • 
    Dalla programmazione strutturata procedurale alla programmazione ad oggetti (OOP - Object oriented programming): cenni
  • 
    I "pattern" della programmazione nelle web application
  • Singleton
  • Factory
  • MVC (Model - View - Controller)

• JavaScript30 ore

  • 
    Introduzione a JavaScript
  • Le regole di base della sintassi
  • I tipi di dato primitivi: stringhe e numeri
  • Uno strumento di lavoro indispensabile: la console del Browser
  • Introduzione alle variabili
  • Il concetto di funzione
  • I controlli condizionali if/else
  • I dati booleani
  • Introduzione agli array
  • Il ciclo for e il concetto di contatore
  • Le funzioni parametriche e il "return" di valori
  • 
    JavaScript e i tag HTML: il DOM
  • Introduzione al DOM
  • Il concetto di oggetto
  • Gli oggetti window e document
  • Metodi e proprietà
  • Il metodo getElementById()
  • Alcuni metodi e proprietà che permettono a JavaScript di manipolare il codice HTML: innerHTML, style, getAttribute, setAttribute, ecc...
  • Il metodo querySelector()
  • Il metodo querySelectorAll() e il concetto di nodeList
  • "Manipolare" un gruppo di elementi HTML grazie ai nodeList e al ciclo for()
  • L'oggetto location
  • 
    Gli eventi in JavaScript
  • Introduzione agli eventi
  • L'evento window.onload
  • L'evento per antonomasia: click()
  • Il concetto di funzione anonima
  • Il parametro event delle funzioni e il metodo preventDefault()
  • Gli eventi scroll e resize
  • Il metodo addEventListener()

• La libreria jQuery Video On Demand12 ore

  • 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
    • LightBox, Colorbox, FancyBox, JCarousel: realizzare slider, sfogliare immagini, effetti di dissolvenza, photo gallery
    • Effetto "parallax"
    • Realizzare "social wall" responsive con la libreria Masonry

• Javascript Avanzato | ECMAScript 6 18 ore

  • 
    Richiami sul concetto di variabile: scope globale e scope locale
  • 
    Concetti avanzati di programmazione in Javascript
  • Funzioni built-in di Javascript (filter, map, find, indexOf, splice, slice)
  • Funzioni con numero di argomenti variabile, l'oggetto arguments
  • Funzioni anonime
  • Funzioni ricorsive
  • Funzioni annidate e Closure
  • Callback: Funzioni passate come argomento
  • Funzioni immediatamente eseguibili (IIFE)
  • 
    JavaScript OOP - La programmazione ad oggetti in Javascript
  • Gli oggetti in Javascript: oggetti predefiniti ed oggetti custom
  • I concetti principali di javascript OOP
  • Classi e Oggetti, Prototype
  • Ambiti di visibilità: public, private, protected, static
  • Proprietà e Metodi
  • I paradigmi della OOP in Javascript: Incapsulamento, ereditarietà
  • 
    ECMAScript 6 (ES6) - Nuove caratteristiche
  • Nuovi modi per le dichiarazioni: Let / Const
  • Arrow function (=>)
  • 
    Programmazione asincrona: nuove caratteristiche ES6
  • Promise
  • API Fetch
  • Async/Await
  • 
    TypeScript
  • Introduzione a TypeScript
  • Tipi di Dati (number, string, array, boolean, any)
  • Proprietà e Metodi
  • Le classi in TypeScript
  • Ereditarietà
  • Interfaces, Classe astratte

• AJAX, XML e JSON 18 ore

  • 
    Far lavorare il codice in modalità asincrona
  • Introduzione ad AJAX (Asyncronous Javascript and XML)
  • L'interazione asincrona client - server (HTML - PHP): come aggiornare una pagina web senza ricaricarla
  • L'oggetto HTTPRequest: il processo e gli step di interazione client-server asincrono
  • Query asincrone: interazione con DB esterni MySql
  • 
    JQUERY e AJAX
  • Il processo di comunicazione asincrono tramite Jquery: la funzione $.ajax(), i suoi parametri e la metodologia d'uso
  • Introduzione a XML (eXtensible Markup Language)
  • Il documento XML - Struttura, formattazione, validazione
  • Il formato di dati JSON (Javascript Object Notation)
  • Gestire le risposte in formato testo e HTML
  • Gestire le risposte in formato XML tramite PHP, Javascript e DOM
  • Gestire le risposte in formato JSON tramite PHP, Javascript e DOM
  • Eseguire script js in modalità asincrona
  • Case studies

• UI/UX design Video On Demand15 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
  • 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

• Responsive Web Design 30 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
  • 
    Organizzare i contenuti in modalità responsive
  • Realizzare immagini responsive con il tag PICTURE
  • Caricamento condizionale delle immagini di sfondo con i CSS
  • Realizzare immagini responsive con la libreria JQuery Picture
  • Caricare dati esterni con la libreria Ajax Include
  • Realizzare video elastici e responsive
  • Gestire snippet di codice condizionale con javascript
  • Risorse utili e casi pratici
  • Rendere una tabella di dati responsive
  • Realizzare una TabMenu in modalità responsive
  • Ridurre il peso delle pagine visualizzate dai dispositivi mobili
  • Creare sprite CSS per aumentare le performance del proprio sito web
  • Utilizzare Web Icon Font
  • Il formato di file Data URIs per la rappresentazione di icone
  • Rendere i menù di navigazione responsive
  • Gestire layout responsive con la Tecnica off-canvas
  • Realizzare Slide Gallery Responsive con effetto Parallax
  • Risorse utili e casi pratici
  • 
    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
  • 
    CSS SASS
  • 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

• La libreria Boostrap Video On Demand6 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

• Angular 36 ore

  • 
    Generalità su Angular
  • Applicazioni web client/server, lo stack MEAN (Mongo DB, Express, Angular, Node.js)
  • Getting started: il set up dell'ambiente Angular, il CLI (Command Line Interface)
  • Costruzione, compilazione ed esecuzione di un nuovo progetto di un'applicazione Angular
  • 
    Anatomia di un'applicazione Angular
  • Moduli
  • Componenti
  • Selettori
  • Template
  • 
    I "Componenti" di Angular
  • La sintassi Typescript
  • Il Template e la rappresentazione visiva dell'interfaccia utente
  • Il binding di Angular tra i dati dell'applicazione e il layout
  • Applicazioni "mono component" ed applicazioni "multi component"
  • 
    Le direttive in Angular
  • Direttive strutturali (NgIf, NgFor, NgSwitch)
  • Direttive di attributo (NgStyle, NgClass)
  • 
    Gestire gli eventi in Angular
  • Sintassi
  • Alcuni gestori di evento (click, submit, keydown etc)
  • 
    Passaggio dei dati tra Component e Template: il Binding in Angular
  • Interpolazione
  • Event Binding
  • Property Binding
  • Doppio Binding
  • Le Template Reference Variables
  • 
    Angular FrontEnd
  • Installare ed utilizzar Angular Material
  • 
    Applicazioni Master - Detail
  • Passaggio dei dati tra Component parent e Component Child
  • I Decorator @Input e @Output
  • 
    Le Form in Angular
  • L'approccio Template Driven legato al controllo dei markup della form
  • Il modulo FormsModule e le direttive per la validazione dei dati (NgValid, NgTouched, NgDirty, etc)
  • 
    I Service in Angular
  • I Service come classi condivise tra più Component
  • La Dependency Injection: Il meccanismo di "Iniezione" del Service nei Component dell'applicazione
  • Case Study: accesso a web services esterne tramite un Angular Service
  • 
    Il Routing in Angular
  • le Single Page Application
  • La gestione delle rotte di un'applicazione
  • L'oggetto Router e la metodologia per creare / navigare tra le varie "rotte"
  • 
    Richieste http Ajax in Angular
  • Get Request e Post Request
  • Utilizzo di Promises e Observables: la richiesta e la ricezione delle risposte
  • Case Study: realizzazione di un'applicazione web client server in Angular con utilizzo di un DB esterno
  • 
    Il deploy di un'applicazione Angular

• Seminari e Workshop 20 ore

  • 
    I seminari e i workshop sono in corso di aggiornamento...
  • Trovare lavoro è un lavoro: CV, LinkedIn e molto altro
  • Lavorare come freelance: partita iva o start up?
  • Marketing & Comunicazione digitale
  • Introduzione alla SEO
  • Google e gli annunci a pagamento: Google Ads
  • Teoria del colore e lettering
  • Video Content Marketing
  • Social media communication & influencer marketing
  • ...

Tutoring e laboratori pratici durante tutto il corso+80 ore