Le slides della presentazione fatta per The Diligence il 24 marzo 2014.
Mostro due dei problemi che abbiamo riscontrato e di come li abbiamo risolti nella realizzazione del sito di Evoluzioen Telematica
1. RESPONSIVE WEB DESIGN
& SPA
Alcune soluzioni che abbiamo adottato nella
realizzazione del sito di Evoluzione Telematica
2. 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.»
3. ABOUT ME
• Developer @ Evoluzione Telematica srl
• Tech enthusiast
• Papercut survivor
collaalessandro
+AlessandroColla
http://www.evoluzionetelematica.it
http://bettercoderwannabe.blogspot.it
4. 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
5. COSA ABBIAMO USATO
ASP.NET MVC5 + NHibernate
jQuery
Greensock
collaalessandro +AlessandroColla #TheDLive
6. 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
7. 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
8. 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
10. 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
11. 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 diventa
www.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
12. 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
13. AJAX E GLI URL
Aaron Gustafson fa l'esempio della nocciolina M & M's
(http://www.alistapart.com/articles/understandingprogressiveenhancement/)
collaalessandro +AlessandroColla #TheDLive
14. 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
15. 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
16. AJAX E GLI URL
http://caniuse.com/#search=pushstate
collaalessandro +AlessandroColla #TheDLive
17. AJAX E GLI URL
IE 8.0 è ancora la versione più usata, tra gli IE, sul nostro sito
collaalessandro +AlessandroColla #TheDLive
18. 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
19. 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
20. 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