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.

Logo jQueryPersonalmente, 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

16 commenti » Scrivi un commento

  1. Cioè praticamente non hai spiegato nulla, ma più che altro è perchè non vuoi svelare i misteri XD

    • Beh in realtà non sapevo cosa indicare di più. La struttura del codice dipende strettamente dal template che si vuol realizzare. Sono disponibilissimo a “svelare” (è già tutto nel codice in fin dei conti) come ho risolto io certi problemi, serve qualcosa in particolare? 🙂
      Ciao,
      Emanuele

  2. Sto custodendo queste tue lezioni per il momento più opportuno! Per i consigli più dettagliati magari passiamo alle consulenze private 🙂

    • No problem… quel poco che so non ho problemi a condividerlo! La tua prima mossa dovrebbe essere comunque una: lasciare Blogspot! 😛
      Fossi stato al tuo posto avrei preferito WordPress.com …e comunque per un utente “avanzato” quale sei tu, secondo me, potevi pensar bene di partire direttamente con WordPress su un dominio personale! 🙂
      Ciao,
      Emanuele

  3. In effetti la tentazione c’è stata più volte, ma fino ad ora non ho voluto perderci troppo tempo. Quando ho iniziato l’ho fatto per gioco e per l’esigenza di scrivere, e quindi sono stato poco attento alla forma, e poi ero quasi all’asciutto di conoscenze nel campo che pian piano stanno crescendo per la passione che hanno stimolato. Insomma, vedremo….

    • Si beh l’immaginavo. Anch’io quando iniziai nel 2003 mi registrai su Splinder quasi per gioco. Ancora di blog non se ne parlava minimamente, c’era questo “nuovo gioco” che si sposava bene con il mio desiderio di scrivere. Anch’io sono migrato successivamente e rispetto ad adesso il gioco fu persino più duro: importai tutti i post a manina, adesso tra XML e script già pronti è molto più semplice effettuare un trasloco!
      Ciao,
      Emanuele

    • Ehm, Gioxx, non hai letto probabilmente che tutte le persone a cui piace “un sacco” questo tema devono versare 50€ sul mio c/c. Giustificando la tua sbadataggine ti invio via e-mail il numero di conto… 😎
      Cosa ti piace in particolare?!? 🙂
      Ciao,
      Emanuele

  4. Ah, grazie per l’utente Avanzato! Ora ho anche scoperto che Roberta sta passando a WordPress e mi sta venendo l’invidia!

    • Roberta passa a WordPress?! Wow! Non lo sapevo mica! 😀
      In realtà credo sia una cosa che voleva fare da tempo… bene, bene… WordPress è impareggiabile! 🙂
      Riguardo a te, sei un ingegnere, devi essere per forza un utente “avanzato”! 😛
      Ciao,
      Emanuele

  5. Indiscrezioni che mi sono arrivate da Facebook…
    Beh, in quel senso dovrei essere un bel pò avanzato…anche se non è detto.

    • Beh è ovvio che esistono ingegneri incapaci di aprire un blog persino su splinder, però in linea di massima una mentalità con approccio scientifico dovresti averla. E questa dovrebbe aiutare…
      E poi diamine, php, html, javascript… manco fosse una testata nucleare! 😀
      Ciao,
      Emanuele

  6. Innanzitutto ben tornato online, se ne sentiva la mancanza! 🙂
    In realtà non mi fa paura andare ad imparare un pò di html o di php, figurati, quanto il tempo necessario per rimettere tutto a nuovo….

    • Beh si, il tempo è veramente impressionante. Puoi esser pratico, avere i giusti strumenti ma poi ogni singolo aspetto va scelto con calma e con cura. E si scopre che… o si scende a compromessi, oppure ci vogliono realmente le giornate da 48 o 56 ore! 🙂
      Ciao,
      Emanuele

  7. Manu: è “fresco”. Sembra una motivazione idiota ma ispira davvero l’estate calda e assolata messa a tacere solo dall’ombra di quell’albero che hai scelto di sfruttare nell’header. Pace & tranquillità vengono da se! 🙂

Lascia un commento

I campi richiesti sono marcati con *.


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.