{"id":5603,"date":"2009-03-30T09:20:54","date_gmt":"2009-03-30T07:20:54","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=5603"},"modified":"2016-05-17T12:34:51","modified_gmt":"2016-05-17T10:34:51","slug":"costruire-un-tema-gli-effetti-speciali","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2009-03-30\/costruire-un-tema-gli-effetti-speciali\/","title":{"rendered":"Costruire un tema: gli effetti speciali."},"content":{"rendered":"

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

Le persone pi\u00f9 attente avranno sentito sicuramente parlare di parole<\/em> come DOM<\/a>, AJAX<\/a>, JavaScript<\/a>, XML<\/a> e cos\u00ec via.<\/p>\n

Nuove forme e linguaggi<\/strong> usati per presentare una pagina all’utente finale. Le informazioni sono sempre pi\u00f9 spesso svincolate dal documento finale<\/strong> vero e proprio (il file.html\/php\/asp<\/em> che verr\u00e0 generato) e vengono servite in base a ci\u00f2 che richiede l’utente<\/strong> in maniera sempre pi\u00f9 “trasparente”.<\/p>\n

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

Su un blog, le potenzialit\u00e0 di questa tecnica sono infinite<\/strong>. Dall’inserimento dinamico dei commenti, alla visita dei post del blog in maniera pi\u00f9 rapida a tante altre diavolerie<\/em> che ci si pu\u00f2 inventare.<\/p>\n

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

Vediamo dunque come si pu\u00f2 inserire qualche “effetto speciale” in maniera semplice e rapida<\/strong>.<\/p>\n

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

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

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

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

Ecco perch\u00e9 ho cercato qualche benchmark<\/a> 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<\/strong>.<\/p>\n

L’efficienza del framework \u00e8 strettamente legata<\/strong> all’interprete javascript integrato nel browser, cos\u00ec anche in questo caso sar\u00e0 bene dare un’occhiata alle statistiche<\/strong> per capire quali browser siano quelli pi\u00f9 diffusi tra i nostri lettori. Se qualche settimana mi ero concentrato sulla risoluzione del monitor<\/a>, questa volta il software usato ha una rilevanza fondamentale.<\/p>\n

Con un sorprendente 49%, Firefox risulta il browser maggiormente utilizzato<\/strong> per accedere al mio blog (a seguirlo c’\u00e8 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<\/strong> che caratterizzano questo browser opensource.<\/p>\n

Potete testare l’efficienza di 5 framework (MooTools 1.2<\/a>, JQuery 1.2.6<\/a>, Prototype 1.6.0.2<\/a>, YUI 2.5.2 Selector beta<\/a>, Dojo 1.1.1<\/a>) direttamente sul vostro browser<\/strong> effettuando questo test<\/a>.<\/p>\n

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

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

Infine, quando vi cimentate nella costruzione di un template non dimenticate mai<\/strong> di testare ci\u00f2 che create su pi\u00f9 browser<\/strong>. Sono stato fermo un paio di giorni nel tentare di risolvere un conflitto tra un plugin di WordPress<\/em> per l’highlight del codice scritto nei post e il javascript che si occupa dell’effetto di zoom delle immagini<\/strong>: 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.<\/p>\n

Questo post in realt\u00e0 ha ben poco di pratico (che per ovvi motivi dipende da ci\u00f2 che si vuol creare<\/em>) ma racconta la mia esperienza<\/strong> 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. \ud83d\ude42<\/p>\n

Si continua Gioved\u00ec…<\/p>\n

Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[524,725,726,84,758,756,724,87,497,753,752,754,529,490,491,757,526,23,528,493,727,755],"class_list":["post-5603","post","type-post","status-publish","format-standard","hentry","category-internet","tag-accessibilita","tag-ajax","tag-benchmark","tag-browser","tag-debug","tag-dojo","tag-dom","tag-firefox","tag-javascript","tag-jquery","tag-mootools","tag-prototype","tag-siti-web","tag-tema","tag-template","tag-testing","tag-user-experience","tag-web","tag-web-design","tag-wordpress","tag-xml","tag-yui"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=5603"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5603\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=5603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=5603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=5603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}