Responsive Web Design & Single Page Application
-
Upload
alessandro-colla -
Category
Technology
-
view
261 -
download
0
description
Transcript of Responsive Web Design & Single Page Application
RESPONSIVE WEB DESIGN & SPAAlcune soluzioni che abbiamo adottato nella realizzazione del sito di Evoluzione Telematica
THE DILIGENCE
«Una community italiana di crowd-learning. Vogliamo fare in modo che le persone possano aggregarsi per apprendere o approfondire un argomento di interesse comune.»
ABOUT ME
• Developer @ Evoluzione Telematica srl
• Tech enthusiast
• Papercut survivor
collaalessandro
+AlessandroColla
http://www.evoluzionetelematica.it
http://bettercoderwannabe.blogspot.it
L’OBIETTIVO
Fruibile a partire dallo smart phone fino al pc desktop
Eye candy come se piovessero
Url che non facessero venire un eritema al nostro SEO
collaalessandro +AlessandroColla #TheDLive
COSA ABBIAMO USATO
ASP.NET MVC5 + NHibernate
jQuery
Greensock
collaalessandro +AlessandroColla #TheDLive
RESPONSIVE DESIGN
Termine coniato da Ethan Marcotte (http://alistapart.com/article/responsive-web-design)
Lo scopo è creare un sito facilmente navigabile e leggibile da dispositivi eterogenei
Di norma l’approccio è mobile-first(Luke Wroblewski http://www.lukew.com/ff/entry.asp?933)
Pensare bene al layout prima di cominciare
Comporta molto tempo la realizzazione
collaalessandro +AlessandroColla #TheDLive
COSA SI USA PER FARE RWD
CSS3 media query: stili diversi in base alla larghezza del viewport
Griglie flessibili: elementi con unità relative (percentuali ed EM)
Immagini flessibili: dimensioni diverse in base al layout ed ai dispositivi
Il calcolo di Marcotte: Target / Context = Result
collaalessandro +AlessandroColla #TheDLive
SINGLE PAGE APPLICATION
Tutto in una pagina
Lo scopo è fornire un’esperienza d’uso più fluida
Si riduce il traffico e il tempo di caricamento
collaalessandro +AlessandroColla #TheDLive
TUTTO BELLO…PASSIAMO AI PROBLEMI
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
Non c’è più l’url completo: <a href="#su-misura" >Su misura</a>
I tasti avanti e indietro non funzionano più
Senza javascript non va neanche a spingerlo
Ciao ciao crawler
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
https://developers.google.com/webmasters/ajax-crawling/
Diciamo al crawler di usare l'Ajax crawling scheme
www.evoluzionetelematica.it/#su-misura diventawww.evoluzionetelematica.it/#!su-misura
Il crawler elabora www.evoluzionetelematica.it?_escaped_fragment_=su-misura
Server side si deve gestire la richiesta e caricare la pagina giusta var urlFragment = Request["_escaped_fragment_"];
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
Progressive enhancement FTW!
Termine coniato da Steve Champeon al SXSW (in Texas roba da nerd) nel 2003.
Si era tutti arenati sul graceful degradation: tutto gira sull'ultimo browser. Poi a martellate (togliendo funzioni con JS) si degradava per i vecchi browser. Il classico PITA
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
Aaron Gustafson fa l'esempio della nocciolina M & M's(http://www.alistapart.com/articles/understandingprogressiveenhancement/)
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
Url classico: <a href="/su-misura" >Su misura</a>
Aggancio del javascript ai tag <a>
Lato server gestisco se richiesta Ajax o meno
$("body").on('click', 'a:not([href^=http], [href^=#], [class^=tel], [class^=mailto])', function (e) { e.preventDefault(); if ($(e.currentTarget).attr('href')) $.Ajax({ url: $(this).attr('href'), success: function (data) { /* elaboro data */ } }); });
if (Request.IsAjaxRequest()) return Json(model, JsonRequestBehavior.AllowGet);return View(model);
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
I bottoni avanti e indietro continuano a non funzionare
history.pushState to the rescue!(https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history)
collaalessandro +AlessandroColla
success: function (data) { /* gestione di data */ history.pushState(data, "Su Misura", "su-misura");}$(document).ready(function () { window.addEventListener('popstate', function (event) { /* gestione di data */ }, false);});
#TheDLive
AJAX E GLI URL
http://caniuse.com/#search=pushstate
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
IE 8.0 è ancora la versione più usata, tra gli IE, sul nostro sito
collaalessandro +AlessandroColla #TheDLive
AJAX E GLI URL
Chrome ha qualche problemino con il popState
"The problem is well-known — Chrome and Firefox treat that popstate event differently. While Firefox doesn't fire it up on the first load, Chrome does. "(http://stackoverflow.com/questions/6421769/popstate-on-pages-load-in-chrome)
"...This is behaving as designed...Firing popstate after onload is as designed...“(https://code.google.com/p/chromium/issues/detail?id=63040)
collaalessandro +AlessandroColla #TheDLive
IMMAGINI FLESSIBILI
Si usano per evitare di inviare ad uno smartphone immagini di 4mb
Vanno a braccetto con le Fluid Images(http://unstoppablerobotninja.com/entry/fluid-images/)
Il difficile è sapere, lato server, quale immagine inviare.
collaalessandro +AlessandroColla #TheDLive
IMMAGINI FLESSIBILI
Si usa un cookie per salvare la larghezza dello schermo e il DevicePixelxRatio
Lato server si intercettano le richieste di immagini
Si fornisce l’immagine giusta in base al valore nel cookie
Non è il silver bullet!
collaalessandro +AlessandroColla #TheDLive
IMMAGINI FLESSIBILI E ASP.NET MVC
Cookie
IHttpHandler
collaalessandro +AlessandroColla
<handlers> <add name="FlexibleImagesHandlerJpg" path="*.jpg" verb="GET" type="FlexibleImages.FlexibleImagesHandler" /></handlers>
<script>document.cookie = 'screenResolution=screenWidth=' + screen.width + '&devicePixelRatio=' + window.devicePixelRatio + '; Path=/';</script>
#TheDLive
RIFERIMENTI
Designing with Progressive Enhancement (Todd Parker, Patty Toland, Scott Jehl e Maggie Costello Wachs)
Responsive Web Design(Ethan Marcotte)
Calcolo di Marcotte: http://alistapart.com/article/fluidgrids
Responsive Design Workflow(Stephen Hay)
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement(Aaron Gustafson e Jeffrey Zeldman)
collaalessandro +AlessandroColla #TheDLive
GRAZIE! E PASSIAMO ALLE DOMANDE
collaalessandro +AlessandroColla #TheDLive