Costruire un tema: gli effetti speciali.

Le pagine web, negli ultimi anni, sono cambiate considerevolmente. Se negli anni ’90 la magia consisteva nel realizzare pagine divise in frame e tramite questi aggiornare solo alcune porzioni di pagina, adesso pensare a cose simili metterebbe i brividi a chiunque.

Le persone più attente avranno sentito sicuramente parlare di parole come DOM, AJAX, JavaScript, XML e così via.

Nuove forme e linguaggi usati per presentare una pagina all’utente finale. Le informazioni sono sempre più spesso svincolate dal documento finale vero e proprio (il file.html/php/asp che verrà generato) e vengono servite in base a ciò che richiede l’utente in maniera sempre più “trasparente”.

A farla da padrona in tutto questo è l’AJAX, che riesce a recuperare in background informazioni dal server senza necessariamente dover aggiornare l’intera pagina (un esempio eccellente è il frontend web di GMail, il servizio di posta elettronica di Google).

Su un blog, le potenzialità di questa tecnica sono infinite. Dall’inserimento dinamico dei commenti, alla visita dei post del blog in maniera più rapida a tante altre diavolerie che ci si può inventare.

Quando iniziai lo sviluppo del template, in realtà, avevo pensato di rendere tutto il più “interattivo” possibile. Pian piano però, sia per mancanza di tempo, sia per mancanza di capacità ho dovuto rivedere la scelta. Non ho mai scritto nulla in AJAX e usarlo comporta delle difficoltà da superare e problemi con cui scontrarsi che non sapevo gestire. E’ possibile fare caching di pagine in AJAX? E la gestione delle statistiche come avviene? Molti software di statistiche, infatti, non riescono a monitorare le richieste di pagine in AJAX perché risultano trasparenti. Così, per non rinviare ad oltranza la stesura del template, ho ridimensionato la scelta senza comunque eliminare del tutto ciò che avevo in mente. Ero più che consapevole che la famigerata user-experience di cui parlo sempre passava anche da qui e non dai tecnicismi (o sofismi) quali la disposizione del testo o la grandezza dei caratteri.

Vediamo dunque come si può inserire qualche “effetto speciale” in maniera semplice e rapida.

Innanzitutto ho iniziato a cercare il miglior framework (la “base di appoggio”) per le mie necessità. Volevo inserire qualche elemento dinamico e sapevo che erano già state implementate tantissime funzioni pronte all’uso.

Non sapendo valutare il framework in sé (non ne avevo mai utilizzato nessuno fin ora e ne esistono sia di gratuiti che a pagamento) ho orientato la mia scelta seguendo quella “del popolo della rete”, privilegiando i framework secondo due fattori: velocità d’esecuzione nel browser e diffusione.

La prima caratteristica, nella scelta di un framework rappresenta infatti – secondo me – uno degli aspetti che fanno la differenza. E’ vero che il framework può risultare più o meno potente, più o meno facile da sfruttare, più o meno leggero da caricare, più o meno elegante nella stesura del codice ma… alla fine ciò che importa all’utente finale è sicuramente la rapidità con cui il sistema funziona, la velocità con cui riesce a caricare la pagina e ricevere le informazioni che stava cercando.

Quante  volte d’altronde siete scappati da una pagina che perdeva ore per caricarsi? Io da questo punto di vista ho una pazienza di pochissimi secondi. Diciamo che non arrivo neanche a 30.

Ecco perché ho cercato qualche benchmark che potesse darmi una risposta. E’ pur vero che per piccole funzioni la differenza di tempo d’esecuzione risulta quasi infima ma, come dico sempre, sono le sfumature a dare vita ai colori e l’attenzione verso le piccole cose rende un’esperienza piacevole, un’esperienza da riprovare.

L’efficienza del framework è strettamente legata all’interprete javascript integrato nel browser, così anche in questo caso sarà bene dare un’occhiata alle statistiche per capire quali browser siano quelli più diffusi tra i nostri lettori. Se qualche settimana mi ero concentrato sulla risoluzione del monitor, questa volta il software usato ha una rilevanza fondamentale.

Con un sorprendente 49%, Firefox risulta il browser maggiormente utilizzato per accedere al mio blog (a seguirlo c’è IE – 41%, Safari – 3,5%, Chrome – 2,43%, Opera – 2,20%) e questo dato fa tanto piacere considerati in vantaggi in sicurezza e aderenza agli standard che caratterizzano questo browser opensource.

Potete testare l’efficienza di 5 framework (MooTools 1.2, JQuery 1.2.6, Prototype 1.6.0.2, YUI 2.5.2 Selector beta, Dojo 1.1.1) direttamente sul vostro browser effettuando questo test.

Personalmente, dopo aver provato Mootools, son tornato sui miei passi (e perso qualche giorno di lavoro) preferendo jQuery (che è anche il framework scelto da WordPress per gli effetti usati nel pannello di amministrazione) per la sua diffusione e per l’innumerevole presenza di guide e script pronti: volendo fare un paragone, JQuery mi è sembrato il Firefox dei framework javascript.

Ecco dunque la seconda chiave di scelta: la diffusione. Il grande utilizzo di uno strumento comporta la possibilità di confronto con un maggior numero di utenti che, nel vero spirito di condivisione avrà sicuramente incontrato o chiesto aiuto per problemi simili ai nostri.

Infine, quando vi cimentate nella costruzione di un template non dimenticate mai di testare ciò che create su più browser. Sono stato fermo un paio di giorni nel tentare di risolvere un conflitto tra un plugin di WordPress per l’highlight del codice scritto nei post e il javascript che si occupa dell’effetto di zoom delle immagini: funzionava su tutti i browser (provato Firefox, Chrome, Opera, Safari) ma non su IE 6/7. Se inserivo l’uno, non andava l’altro e viceversa.

Questo post in realtà ha ben poco di pratico (che per ovvi motivi dipende da ciò che si vuol creare) ma racconta la mia esperienza e le scelte effettuate durante i mesi precedenti l’arrivo di questo nuovo template che han portato alla realizzazione delle barre dell’header e del footer a scomparsa e dell’animazione presente nelle voci della sidebar. 🙂

Si continua Giovedì…

Emanuele