Aggiornamento del Presentation Layer di un Web Application Framework Introduzione del Responsive Web Design nel Framework Quix Davide Setti Dipartimento.

Presentazione sul tema: "Aggiornamento del Presentation Layer di un Web Application Framework Introduzione del Responsive Web Design nel Framework Quix Davide Setti Dipartimento."— Transcript della presentazione:

1 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

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

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

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

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

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

7 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

8 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

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

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

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

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

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

14 Bootstrap Framework 10/12/2014 Responsive Web Design

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

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

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

18 Bootstrap 10/12/2014 Responsive Web Design

19 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

20 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

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

22 Conclusioni 10/12/2014 Responsive Web Design

23 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

24 Conclusioni Responsive 10/12/2014 Responsive Web Design

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

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