Responsive Design Web App con HTML5 e CSS3

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