What You Will Learn!
- Comprensione dei vantaggi nell'usare immagini in formato svg rispetto ai formati raster (png,jpeg,gif,webp ecc.) nelle pagine web.
- Capacità di modificare e personalizzare immagini svg preesistenti tramite tool online gratuiti e Adobe Illustrator
- Acquisizione dei concetti e dei tag e attributi di svg che ti consentiranno di creare immagini svg da zero. Creazione di immagini svg da zero tramite software.
- Includere le immagini svg nelle tue pagine html. Rendere interattive parti delle immagini tramite css e javascript. Rendere elastiche e responsive immagini svg
- Alla fine del corso sarai in grado di costruire un Icon System (è l'equivalente di uno sprite per le immagini classiche).
- Acquisirai le skills per diversificare le tue pagine web da quelle "uniformate" costruite con Bootstrap animando immagini svg in Css,con SMIL e/o con Javascript
- Altre abilità che acquisirai in questo corso: creazione di patterns da usare nel tuo layout ,uso dei filtri, clipping e masking , typographic lookup e altro...
- Il tutto sarà trattato in maniera pratica, learning by doing, senza trascurare la teoria che c'è dietro. Ci saranno molti esempi pratici che implementeremo live
- Acquisire le conoscenze tecniche per diventare creativi, cioè pensare ad una feature grafica ed implementarla in autonomia
Description
SVG esiste dal 1998 ma solo da poco ha pieno supporto nei browsers. Quindi è un formato grafico maturo per il web che ti consentirà di creare animazioni ed effetti meravigliosi e molto altro.
Il corso è un mix tra teoria e pratica (con tantissimi esempi pratici ) ed ha come target principale gli sviluppatori web.
Contenuti del corso
Usare software per creare grafica svg
Usare tag svg per creare grafica svg
Modalità di inclusione di immagini svg in una pagina web: peculiarità e differenze
Modificare parte di un'immagine svg in javascript e in css
Rendere le immagini svg scalabili e responsive
Creare un Icon System in SVG
Ottimizzare immagini svg
Animazioni SVG native con SMIL, animare SVG con css e con javascript
Clip,path,filtri,typographic-lookup, pattern
Quasi tutte le spiegazioni teoriche sono corredate da almeno un esercizio esemplificativo con un approccio didattico improntato sul learning by doing mixato anche con spiegazioni teoriche dettagliate.
Ci sono anche molti esercizi/progettini sfidanti e formativi per gli studenti per testarsi e mettersi alla prova e diventare creativi al termine di quasi ogni sezione
About me
Il mio nome è Nicola Ciaco e sono un ingegnere informatico e un web developer incentrato principalmente sul frontend. Appassionato da sempre di tecnologia e informatica, insegno anche tematiche di sviluppo web in maniera professionale per un'azienda. Sia se sei un principiante di svg sia se hai delle conoscenze più avanzate sulle tematiche trattate il corso è perfetto per te.
Who Should Attend!
- Sviluppatori web, front-end web developer , web designer, aspiranti sviluppatori web in formazione anche da autodidatta con conoscenze base di Html e Css
