Come promesso ecco qualche esempio concreto di unobtrusive Javascript, strumento davvero potente e versatile se usato a dovere. Sul sito/Blog di Ryan Johnson è possibile scaricare due esempio davvero ottimi di unobtrusive Javascript:
Ryan Johnson, nei suoi script, fa uso della libreria Prototype, come molti del resto. Ha scritto anche alcune estensioni relativamente alla Prototype, poi introdotte – in forma diversa – nell’ultima versione della libreria.
Usare Prototype per illustrare il funzionamento di codice unobtrusive Javascript è generalmente più comodo – come vedremo più avanti, tuttavia ecco un primo esempio grezzo che non richiede nessuna librerie esterna. Cominciamo ricordando che il concetto che sta alla base del unobtrusive Javascript è quello di partire da una qualsiasi pagina HTML (standard e non necessariamente scritta da noi – altro importantissimo punto di forza) e sfruttare Javascript per apportare alcune modifiche.
Schematimamente il concetto è quello di eseguire una funzione che analizza il codice HTML, attraversa quindi il DOM e in punti particolare aggiunge o modifica funzionalità. Normalmente si sfruttano due metodi per eseguire codice Javascript al caricamento di una pagina: il primo è quello che non racchiudere il codice in nessuna funzione e quindi lasciare che il browser esegua immediatamente il codice caricato nel punto in cui compare la chiamata:
Stesso risultato lo si ottiene includendo il codice:
Tuttavia quando si deve operare sul DOM di una pagina si presuppone che essa si a completamente caricata, cioè che tutti i TAG della pagina sia presenti e disponibili per essere rintracciati. Così la soluzione migliore diventa quella di essere sicuri che la pagina sia completa. Ciò è possibile agganciandosi all’evento onload del TAG body ad esempio, che viene rilasciato quando il caricamento della pagina è completo.
1
2
3
| window.onload = miafunzione;
// oppure, che è lo stesso
window.onload = function() { alert("Hello"); } |
Da evitare, ovviamente, la soluzione canonica che definirla intrusiva sarebbe un eufemismo:
1
| <body onload="miafunzione()"> |
Altra tecnica, più rozza e ugualmente intrusiva (in quanto costringerebbe l’utente finale a posizionare il codice in un punto particolare), è quella di inserire il nostro script alla fine del documento, prima della chiusura del Tag body; tecnica oramai obsoleta e usata in rari casi (vedi Google Analytics!).
Ancora meglio è usare il metodo qui sotto:
1
2
3
4
5
6
7
| if (window.addEventListener) {
window.addEventListener("load", miafunzione, false);
} else if (window.attachEvent) {
window.attachEvent("onload", miafunzione);
} else {
window.onload = createSubMenus;
} |
Anche questo frammento di codice non è racchiuso in una funzione. Esso aggiungerà un event listener per l’evento load della finestra, richiamando la nostra funzione miafunzione(). I browser moderni, come FireFox ad esempio, useranno la funzione addEventListener() definita nella specifica DOM Level 2, mentre Internet Explorer userà la sua funzione proprietaria attachEvent(). Tuttavia non siamo ancora alla perfezione: in questa maniera, infatti, si rimpiazzeranno tutti gli – eventuali – eventi onload creati da altri script, il che non è proprio “non intrusivo”.
Per risolvere rapidamente la questione, che per via dei diversi comportamenti dei browser sarebbe quantomeno complicata da esporre qui, conviene usare libreirie come Prototype che forniscono un’elengantissimo metodo per superare il problema:
1
| Event.observe(window, 'load', function() { alert("Hello"); } ); |
La sintassi è davvero ovvia e spettacolare! Il vantaggio, per chi non lo avesse capito, è quello di poter scrivere:
1
2
| Event.observe(window, 'load', function() { alert("Hello 1"); } );
Event.observe(window, 'load', function() { alert("Hello 2"); } ); |
Al caricamento della pagina verrà mostrato prima l’alert “Hello 2″ e poi l’alert “Hello 1″. In pratica si carica in modo FILO (First Input Last Output) un stack, garantendo comunque l’esecuzione di tutti gli eventi agganciati al load del documento, esattamente quello che si voleva ottenere. In questo modo una pagina può caricare – virtualmente – infiniti unobtrusive Javascript che si agganciano alla load del documento.
Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un esempio che possiamo commentare (vedi anche Prototype: l’uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scaricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice:
1
2
3
4
5
6
7
8
| <p><a href="#capitolo1">Vai al capitolo 1 </a></p>
<p> </p>
<p> </p>
.... un bel po' di <p> </p> .... giusto come esempio
<h1 id="capitolo1">Capitolo 1 </h1> |
Includete nella pagina:
1
2
3
4
5
6
7
8
9
10
11
12
| <script src="prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="scriptaculous-js-1.7.0/src/effects.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript1.2">
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element) {
element.observe('click', function(event) {new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
bindAsEventListener(element))
})
})
</script> |
Grazie all”uso di Event.observe() e alla funzione doppio-dollaro ($$) è possibile modificare in modo semplice il comportamento del classico anchor. In questo caso viene agganciata una nuova funzione al caricamento della pagina HTML. Quando scatta l’evento load vengono rintracciati nel DOM tutti i link (Tag <A>) con l’href che inizia con cancelletto (#, escludendo quello con solo cancelletto!). A questi elementi viene agganciata una funzione all’evento click, similmente a quanto fatto con la load del documento. A questo punto entra in gioco Scriptaculous che produce un effetto di scroll verso l’elemento punatato dal nostro link – modificato!
Continua...
Permettere agli utenti di interagire con una pagina Web ha prodotto negli ultimi anni un notevole aumento nell’uso di script lato client: codice Javascript in grado di rispondere e manipolare in tempo reale tutta una serie di informazioni. Il Web2.0 è la massima espressione di questa capacità di interazione, dove l’utente finale – il navigatore -partecipa attivamente alla costruzione e all’evoluzione del sito Web, interagendo con esso e contribuendo personalmente. Si parla quindi di User-Generated Content (o UGC – contenuto generato dagli utenti) che vede il “navigatore” sicuramente meno passivo!
Per realizzare questa interazione, per permettere quindi all’utente finale di aggiungere il suo contributo, sono state sviluppate una serie di tecniche che hanno modificato l’aspetto e il comportamento delle pagine Web (statiche sino ad oggi, mentre adesso simili alle tradizionali applicazioni dei Desktop) negli ultimi anni. Modificare il contenuto di una pagina, inviare dei file, dare il proprio voto ad un video o a un documento, registrarsi o modificare i propri dati, sono solo alcune delle operazioni richeste in tanti servizi (2.0 beta) presenti sul Web.
Continua...
Il servizio XFruits, che uso su questo Blog per la versione in PDF, si arricchisce di un nuovo e interessante strumento: VocalFruit.
Ora i nostri feed rss possono essere ascoltati.
Il nuovo servizio è disponibile per gli utenti registrati con un credito iniziale di 100 vocals. In realtà mi sono dovuto registrare nuovamente, piccolo mistero, tuttavia l’ho provato e funziona davvero bene.
Probabilmente la scelta dei crediti dipende dal costo della tecnologia usata per lo speaker, quindi deduco che potrebbe presto diventare a pagamento! Sul sito le informazioni sono ancora relativamente poche, a dire il vero, ma l’idea sembra interessante.
Per adesso sono disponibili le lingue Inglese, Francese e Spagnolo, per l’Italiano temo si dovrà aspettare un po’ (al limite non lo faranno mai, come spesso accade). Le caratteristiche del servizio permettono di utilizzare la sintesi vocale generata, a partire dei feed rss, sul Web o sul nostro sito, sul cellulare o su un lettore MP3.
Continua...
Come aggiornamento e scambio di opinioni, ecco la lista dei Plugin per WordPress utilizzati in undolog.com:
- Akismet 1.8
Noto a tutti, in quanto preinstallato su tutte le versione di WordPress, è il Plugin più importante in quanto proteggio dallo spam indiscriminato
- Feedburner Feed Replacement 2.2
Se siete registrati su FeedBurner, ridirigere i vostri feed direttamente su FeedBurner.com
- Get Recent Comments 1.5.4
Permette di elencare gli ultimi commenti ai vostrio Post, abbastanza configurabile e ben fatto
- Google Sitemaps 2.7.1
Vitale per l’indicizzazione sui motori di ricerca e in particolare su Google: creare il file sitemap.xml – ottimamente configurabile
- iG:Syntax Hiliter 3.5
Se avete necessità di inserire codice (C, C++, Assembly, ActionScript, PHP, Ruby, Javascript … emolto altro) questo Plugin è davvero fantastico.
- Math Comment Spam Protection 2.0
Permette di proteggere i commenti da Spam indesiderato. Inserisce una domanda matematica, del tipo: quanto fa 1+3? Io l’ho travato abbastanza utile, almeno fino adesso.
- Reinvigorate 1.0
Questo può interessare solo a chi è registrato al servizio di statistiche Web Reinvigorate.
- Ultimate Tag Warrior 3.141592
Permette di inserire i TAG (etichette) nei Post e nelle Pagine di WordPress. È uno dei più famosi, immagino. Simpatico il numero di versione che è, evidentemente, il valore del pi-greco!
- WP-PageNavi 2.03
Aggiunge una nuova navigazione nelle pagine, permettendo di muoverso all’interno dei Post in maniera più efficiente; con tasto di ‘inizio’, ‘fine’ e pagine numerate!
- WP-PostRatings 1.05
Gestione delle votazioni a stelline. Diffuso, ottimo da configurare, con tanto di statiche dei più votati e dei Post che hanno ricevuto più voti. Non è vitale ma può risultare simpatico.
- WP-PostViews 1.02
Mostra i Post più visti. Questo è utile come statistica interna e personale. Da avere…
- WP-UserOnline 2.06
Mostra gli utenti in linea, quasi in presa diretta. Utile, in alcune situazioni e simpatico da vedere!
Commentate e suggerite…;)
Continua...
Magnetk e Joyent hanno creato Slingshot, un tool che permette ad una applicazione Rails di funzionare offline! Contemporaneamente è stata rilasciata la Alpha 3 di Gran Paradiso, ovvero FireFox 3, anch’esso pronto a sfidare questa nuova frontiera dell’offline. Possiamo affermare senza esagerazione, almeno da quanto si legge sulla rete, che è iniziata una vera e propria competizione che vede schierati Adobe Apollo, FireFox 3 e nuovi contendenti come Slingshot.
Slingshot, tuttavia, si propone di far sviluppare (o portare) applicazioni Rails direttamente sul Desktop e di farle girare in modo “semplice e trasparente“;
Joyent Slingshot allows developers to deploy Rails applications that work the same online and offline (with synchronization) and with drag into and out of the application just like a standard desktop application.
Per una dimostrazione di Slingshot vedi il filmato Quicktime.
Non esiste, quindi, una vera e proprio diretta concorreza tra Slingshot e Apollo. Quest’ultimo, infatti, ha in definitiva un target diverso, come indicato da Wikipedia 
“A cross-OS runtime that allows developers to employ their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop Rich Internet Applications.”
Interessanti – invece - sono le caratteristiche di FireFox 3 (come gli Animated PNG – APNG), che si pone in maniera diversa dalle soluzioni sopra esposte.
La caratteristica che condividono i contendenti, quindi, è questa nuova tendenza a lavorare – o a permettere di lavorare – offline! È curioso che questo interesse sia esploso quasi all’improvviso, in un momento storico che vede la rete al centro di molti interessi. Inoltre, proprio in questi ultimi anni, la diffusione della banda larga ha portato gli utenti a rimanere continuamente connessi in rete, un cordone ombellicale impensabile sino a pochi anni fa; l’era del Dial-Up è ormai finita.
Proprio questa necessità di connessione perpetua ha dato il via alla generazione 2.0 (web2.0), al contributo sociale di tutti in quanto tutti connessi. L’offline è, nonstante tutto questo, un esigenza tecnica, non un cambio di tendenza. Probabilmente è di sicuro interesse poter investire su tecnologie di questo tipo. Il Wireless, molto probabilmente, dominerà nel prossimo futuro, ma a differenza di un cavo potrebbe essere maggiormente soggetto a improvvisi mancamenti (!
Poter lavorare sconnessi ha evidentemente tutta una serie di vantaggi che – come spesso accade – oggi non riusciamo nemmeno a vedere chiaramente.
Continua...
Come avrete notato ho dato qualche ripulita al Blog, sia a livello grafico che a livello di strumenti e Plugin. Dato che Snap ha recentemente aggiunto alcune configurazioni, ho eliminato l’anteprima direttamente dal link! Per ottenere l’anteprima bisogna passare con il mouse sopra l’iconcina snap che appare in alto a destra. Inoltre ho impostato l’anteprima in modalità “large”, così si vede meglio!
Continua...
Dopo essermi iscritto a MyToons, ho voluto provare alcune funzioni di sharing. Ecco come si presenta il codice embed:
Continua...
Ultimi Commenti
Giovambattista Fazioli: @ale: Come indicato @Kevin vedi sul repo di GitHub: https://github.com/gfazioli/Ch roma-Key
Giovambattista Fazioli: @Kevin: See https://github.com/gfazioli/Ch roma-Key
Kevin: Very nice example – would like to see the .fla too!
Ludovica: Ciao! Ti spiego il mio dubbio. Quando scrivo un post non inserisco immagini nell’articolo (se così...
Marco: ciao @Giovambattista Fazioli, grazie per tutte le delucidazioni di questa ottima guida. Avrei un quesito da...