Aggiornamento del Presentation Layer di un Web Application Framework Introduzione del Responsive Web Design nel Framework Quix Davide Setti Dipartimento Ingegneria Enzo Ferrari Universita degli Studi di Modena e Reggio Emilia

Introduzione Analisi di una problematica Esplorare una nuova tecnologia Introdurre la nuova tecnologia nel Framework aziendale 10/12/2014 Responsive Web Design

Visualizzazione su dispositivi eterogenei 10/12/2014 Responsive Web Design

Visualizzazione su dispositivi eterogenei 10/12/2014 Responsive Web Design

Visualizzazione su dispositivi eterogenei 10/12/2014 Responsive Web Design

Responsive Architecture Responsive Web Design Responsive Architecture Responsive Web Design Persone Struttura Pagina Web Device 10/12/2014 Responsive Web Design

Responsive Web Design Approccio classico Approccio responsive Richiesta Riconoscimento dispositivo Invio pagina responsive Invio pagina specifica Adattamento al dispositivo 10/12/2014 Responsive Web Design

Responsive Web Design Approccio classico Approccio responsive 50px 16% Griglia flessibile Basata sulle proporzioni Non sempre ottimale su dispositivi piccoli Griglia a dimensioni fisse Visualizzazione costante su tutti i dispositivi Esperienza ridotta sui dispositivi grandi 10/12/2014 Responsive Web Design

Responsive Web Design Mobile First Desktop First 10/12/2014

CSS2.1 Media Query media type screen braille print tty embossed 10/12/2014 Responsive Web Design

Media Query media type: screen 10/12/2014 Responsive Web Design

CSS3 Media Query media feature width height aspect-ratio orientation color resolution 10/12/2014 Responsive Web Design

media query Media Query media type media feature 10/12/2014 Responsive Web Design

Bootstrap Framework 10/12/2014 Responsive Web Design

Bootstrap Open Source Mobile First 10/12/2014 Responsive Web Design

Bootstrap Navbar Toolbar Tabs Paginatori Pannelli Altri ancora… 10/12/2014 Responsive Web Design

Bootstrap < 768px 768px ≤ < 992px 992px ≤ < 1200px 1200px ≤ xs sm < 768px 768px ≤ < 992px md lg 992px ≤ < 1200px 1200px ≤ 10/12/2014 Responsive Web Design

Bootstrap 10/12/2014 Responsive Web Design

Standard e modelli aziendali Framework Quix Progetti Framework Applicazioni Esperienza genera Tempo Funzioni base fornisce definisce Standard e modelli aziendali 10/12/2014 Responsive Web Design

Restyling Framework RWD 10/12/2014 Responsive Web Design Modello statico Applicazione RWD alle pagine predefinite Analisi della struttura delle pagine Inserimento nel codegenerator RWD 10/12/2014 Responsive Web Design

Conclusioni Responsive @media 10/12/2014 Responsive Web Design

Conclusioni 10/12/2014 Responsive Web Design

Maggior valore economico Conclusioni Maggiori tempi di sviluppo Platea di utenza ampia Maggiore preparazione sviluppatori Maggior valore economico +20-50% 10/12/2014 Responsive Web Design

Conclusioni Responsive 10/12/2014 Responsive Web Design

Sviluppi Futuri RWD @media ? ? ? media query level 3 10/12/2014 Responsive Web Design

Grazie dell’attenzione 10/12/2014 Responsive Web Design