Responsive Design Web App con HTML5 e CSS3

Realtime Apps con AngularJS e Firebase
18 aprile 2017
Sviluppare applicazioni web in AngularJS
18 aprile 2017
Frontend Development

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