Non esiste il mobile web, il tablet web, la web tv o il desktop web. È sempre lo stesso web, solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario.
Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design.
Prerequisiti
Questo corso è pensato per web developer e web designer interessati alla progettazione, creazione e deploy di applicazioni web che siano fruibili su qualsiasi schermo utilizando un approccio responsive con HTML5 e CSS3. Per fruire del corso in maniera proficua, il partecipante dovrà avere familiarità con l’uso di HTML e CSS.
Obiettivi formativi
Questo corso è un concentrato di teoria e pratica.
Sono molti gli argomenti che verranno toccati e non riguardano solo il codice ma anche l’ergonomia delle interfacce, l’usabilità e la User Experience. Al termine del corso il discente avrà gli strumenti e le conoscenze necessarie per affrontare e scegliere quali tecniche, framework e tools per le web app dovranno girare su diversi dispositivi. Ecco alcune delle nozioni che il partecipante apprenderà durante questo workshop:
- Progettare interfacce grafiche e layout per diversi dispositivi
- Realizzare mockups e wireframes
- Scegliere gli strumenti giusti nella fase di progettazione
- I tag semantici di HTML5
- Le media queries dei CSS3
- Impostare l’architettura e la logica JavaScript
Programma
- Progettazione di una web app
- Cenni all’architettura d’informazione
- Realizzazione dei mockup, wireframes e visuals
- Le griglie
- Matrici di supporto dei browser per HTML5 e CSS3
- Struttura di una pagina HTML5
- Il DOCTYPES
- Come cambia l’approccio alla scrittura del markup
- Gestire il character encoding
- Creare una struttura di pagina usando i tag:
- section
- header
- footer
- nav
- article
- Usare gli elementi block semantici: aside, figure, and dialogue
- Detect del supporto del browser ad HTML 5 on Modernizr
- A cosa servono i Microdata
- I nuovi HTML5 Forms
- Usare gli input types
- Problematiche della built-in validation per i nuovi input type
- Applicare CSS ai form
- Le media queries
- Scrivere condizioni con le media queries
- I Breakpoints
- I framework: cenni a Bootstrap e Foundation
- Usare i Web Fonts
- Architetture di logica Javascript
- Javascript, quale framework scegliere?
- User Interface Design Patterns