logo_thumb_frontend-dev

Front-End Developer Starter KIT

LIVELLO:

PRINCIPIANTE

DURATA:

8 ore

PREREQUISITI:

Il partecipante deve conoscere superficialmente almeno un linguaggio di programmazione.

OVERVIEW:

Negli ultimi anni lo sviluppo front-end è diventato sempre più complesso, il numero di strumenti, librerie e tecnologie disponibili cresce a vista d’occhio ed è sempre più complesso per i neofiti iniziare ad approcciarsi a questo mondo: HTML, CSS/Less/Sass, Javascript, SVG, HTML5 Canvas, AngularJS, React, Gulp, Bower, Npm, Git sono solo alcune delle centinaia di strumenti che gli sviluppatori web devono conoscere per poter scegliere con cognizione di causa le tecnologie, le librerie e i tool più appropriati per ogni progetto.

OBIETTIVI FORMATIVI:

Il corso nasce dalle innumerevoli domande effettuate nelle diverse community italiane e durante le nostre sessioni di training e si pone come obiettivo quello di fornire le nozioni fondamentali e le linee guida indispensabili per affrontare la carriera di sviluppatore web senza sprechi di tempo concentrando l’attenzione solo sui concetti fondamentali.

Tutti gli esempi del corso utilizzano plain Javascript, senza l’ausilio di jQuery, al fine di poter applicare i concetti in qualunque contesto e prepararsi all’utilizzo di framework come AngularJS o React.

CONOSCENZE IN USCITA:

In questo corso viene fornito un punto di partenza per principianti e sviluppatori web alle prime armi allo scopo di introdurre i seguenti argomenti:

  • CSS & SASS: apprendere gli strumenti e le tecniche principali per la creazione di layout moderni (ad es. FlexBox); comprendere le selezioni CSS; applicare dinamicamente stili e classi via Javascript; usare pre-processor e molto altro.
  • Javascript: gestione e trattamento dati (array e object in dettaglio); variabili, scope e concetto di closures; manipolazione del DOM;
  • Javascript animations: tecniche, metodologie e utilizzo di librerie Javascript per la creazione di animazioni ed “effetti speciali” in Javascript, CSS e HTML
  • HTML5 Canvas e SVG: veloce panoramica ed alcuni esempi in HTML5 Canvas e SVG sfruttando diverse librerie Javascript per dimostrare la libertà espressiva e creativa che questi strumenti permettono di ottenere
  • riga di comando (CLI): utilizzare e prendere confidenza con Nodejs, npm, bower, git e altri strumenti utilizzati da riga di comando
  • MATERIALE DIDATTICO:

    Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

    IL PROGRAMMA:

    CSS, LAYOUT DINAMICI e RESPONSIVI
    Gli strumenti essenziali che ogni web developer dovrebbe conoscere:

    • Breve panoramica sul metalinguaggio HTML5 e sullo styling in CSS
    • approfondimento sulle differenti tipologie di selezione del DOM in CSS
    • utilizzo di inline style e classi css
    • posizionamento e visibilità elementi: position, float, display
    • utilizzo FlexBox per disporre e allineare gli elementi
    • creazione di layout di applicazioni e componenti responsivi (mobile, web, desktop)
    • introduzione a Bootstrap e ai framework CSS in generale che, pur non essendo utilizzati durante il corso, sono strumenti fondamentali da padroneggiare per realizzare siti ed applicazioni Web.

    JAVASCRIPT: LE FONDAMENTA
    Una breve panoramica dei costrutti, degli strumenti fondamentali e dei problemi più comuni che giornalmente sono affrontati dagli sviluppatori web durante l’utilizzo del linguaggio Javascript:

    • variabili, scope e concetto di closure
    • array e oggetti
    • espressioni condizionali
    • iterazione su collezioni
    • operatori logici

    MANIPOLAZIONE DOM in JAVASCRIPT
    Per creare componenti e applicazioni dinamiche è fondamentale apprendere la gestione e la manipolazione del DOM:

    • selettori Javascript e CSS
    • manipolazione del DOM: aggiungere, modificare ed eliminare elementi dinamicamente
    • dynamic styling (class e inline style): argomento a cui sarà dato ampio spazio, dato che sono tecniche utilizzate anche in AngularJS, React o in qualunque altro framework al fine di animare, visualizzare e migliorare il look & feel dei componenti
    • Breve overview su jQuery
    • integrazione con il server, utilizzo di servizi REST e operazioni CRUD
    • Creazione layout dinamici e responsivi in CSS e Javascript

    ANIMAZIONI in JAVASCRIPT e CSS

    • Animazioni in puro CSS
    • Utilizzare Javascript e CSS per creare animazioni dinamiche e interattive
    • Effetti “wow” e animazioni DOM utilizzando la famosa libreria GSAP TweenMax by GreenSock.
    • GSAP Timeline: creare animazioni adatte all’advertising (ad es. banner e sequenze animate di testi, immagini ed elementi del DOM controllati via Javascript)

    HTML5 Canvas e SVG

    Queste due tecnologie forniscono allo sviluppatore una sorta di “tela vuota” su cui disegnare grafica 2D bitmap (nel caso di HTML5 Canvas) e vettoriale (nel caso di SVG) e rappresentano due strumenti fondamentali per superare i limiti del DOM e avere totale libertà espressiva nella creazione di animazioni, infografiche interattive, charts e componenti data-driven, videogiochi, icone, elementi creativi dal look & feel anche molto creativo e originale.
    Gli argomenti richiederebbero diverse giornate per essere debitamente approfonditi ma durante questa giornata saranno illustrati i concetti fondamentali delle tecnologie e le librerie più utilizzate con semplici esercizi ed esempi pratici. Saranno brevemente introdotte librerie quali D3.js, CreateJS e SnapSvg.

    TOOL DA RIGA DI COMANDO (CLI)
    Al giorno d’oggi è indispensabile avere dimestichezza con la riga di comando perchè la maggior parte delle librerie e degli strumenti indispensabili per lo sviluppo front-end sono distribuiti ed utilizzati tramite la piattoforma NodeJS. Durante il corso utilizzeremo quindi i seguenti strumenti al fine di acquisire dimestichezza e di essere indipendente per futuri utilizzi:

    • NodeJS e npm: gestione dipendenze tools
    • Github: versionamento del codice
    • Bower: gestione dipendenze lato client
    • Brevissima introduzione a Gulp e ai processi di automazione

    LESS/SASS
    Tra i vari tool da riga di comando utilizzeremo anche i preprocessor per gestire i file CSS:

    • configurare l’ambiente di lavoro (CLI)
    • compilare i css
    • utilizzare le variabili
    • includere files
    • panoramica sulle funzionalità principali: nested, mixins e altro ancora.

    Le sessioni del corso saranno illustrate su sistema operativo OSX ma gli stessi concetti naturalmente sono applicabili su computer con OS Windows.

    TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

    HTML5, CSS, SASS/LESS, Javascript, GSAP Tweenmax, HTML5 Canvas/CreateJS, SVG/D3.js, jQuery, Bootstrap, SnapSVG, Bower, npm, Gulp