Unobtrusive Javascript: pseudo & real

Lunedì 2 Aprile, 2007

In questo Post vorrei analizzare l'uso di script unobtrusive dal punto di vista del Web Designer. Normalmente, infatti, uno script non intrusivo è tale nei confronti del navigatore finale! Ma può esserlo anche per il Web Designer?

Unobtrusive Javascript dal punto di vista del Web Designer
Mettendoci nei panni di un Web Designer potremmo identificare due categorie di unobtrusive Javascript: true unobtrusive Javascript pseudo unobtrusive Javascript.

Entrambe le categorie, tuttavia, non sono completamente non intrusive (sempre dal punto di vista del Web Designer). Un reale e completo unobtrusive Javascript non dovrebbe richiedere nessun intervento nella pagina Web, ma questo è - per ora - sostanzialmente impossibile. L'operazione minima richiesta durante l'installazione di uno script è comunque l'inserimento dell'inclusione dello script stesso! Viene dunque ammessa tale operazione che - effettivamente - non costringe il Web Designer ad apportare modifiche straordinarie alla struttura della pagina. Il semplice posizionamento dell'inclusione dello script all'interno del Tag head può essere quindi considerato non intrusivo.

Il true unobtrusive Javascript
Gli script di questo tipo sono quelli che richiedono la sola inclusione dello script unobtrusive e non pretendono nessun'altra operazione! Script di questo tipo sono, ad esempio (il solito e citatissimo), Snap. Una volta inserito il codice di inclusione il Web Designer non deve svolgere nessuna operazione ulteriore, in quanto lo script di Snap opera su Tag standard.

Gli pseudo unobtrusive Javascript
Questi si differenziano dai precedenti in quanto richiedono una taggatura ulteriore per funzionare correttamente. Esempi di questo tipo sono i Control.Tabs di Ryan Johnson o la libreria per gli slideshow Lightbox JS. Quest'ultima soluzione, ad esempio, richiede l'inserimento nel Tag A dell'attributo rel per identificare i link che devono essere modificati. Lightbox JS, in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous. Come indicato sul sito di Lightbox JS, l'inclusione dello script deve essere di questo tipo:

HTML:
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>

I link che puntano ad unìimmmagine che si vuole visualizzare con il sistema Lightbox JS devono essere scritti in questo modo:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Inoltre per identificare un gruppo di immagini, per aggiungere la capacità di scorrere avanti e indietro le immagini, i Tag A devono essere impostati nel modo seguente:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

La necessità di tali costrizioni risulta evidente; non esiste un modo semplice per distinguere un elemento link (Tag A) da un'altro. In prarticolare non è possibile capire quale elemento il Web Designer vuole visualizzato in un modo o in un'altro. Dev'essere necessariamente il Web Designer ad identificare in qualche modo i Tag e i loro comportamenti. Sono quindi richieste - intrusive - del tutto comprensibili, che non sminuiscono affatto l'utilità e le potenzialità di questi script. Comportano solo un dettaglio maggiore e qualche riga di codice in più al Web Designer.

È interessante, comunque, il doppio aspetto dell'unobtrusive Javascript, analizzato sia dal punto di vista dell'utente finale sia dal punto di vista Web Designer.

Post correlati

Accessibilità e Usabilità: unobtrusive Javascript

Martedì 27 Marzo, 2007

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 a leggere... »

Post correlati

Adobe Apollo Alpha Release

Lunedì 19 Marzo, 2007

Finalmente Adobe ha rilasciato la versione Alpha di Apollo. Siamo ancora lontani dalla versione finale, tuttavia è possibile verificare alcune delle sue funzionalità grazie ai Demo delle applicazioni (file .air) proposte online. L'installazione (Apollo runtime) di questa Alpha pesa circa 6Mb - per Windows. I Demo (Apollo sample applications) non arrivano a pesare nemmeno 600Kb. Dopo aver installato il runtime di Apollo nulla sembrerà cambiato sul vostro PC (non viene aggiunto nessun link sul desktop o sulla barra delle applicazioni), nonostante abbiate installato - di fatto - il nuovo browser di Adobe! Vedi Web2.0: Adobe ci prova con Apollo? 

Continua a leggere... »

Post correlati

Net Software

Venerdì 2 Marzo, 2007

È successo alla TV di trasformarsi in Net TV, come già era successo alla Radio di diventare Net Radio, per non parlare della musica! Ora, come anticipato in altri Post, è ufficiale anche per il Software di trasformarsi a breve in Net Software!

Adobe, che come sappiamo ha da poco acquisito Macromedia, ufficializza le Web Application - del Web 2.0 - in vere e proprie RIA (Rich Internet Applications) con l'annuncio di voler portare sul Web il noto software di fotoritocco Photoshop. È recente l'accordo tra Adobe e Photobucket per rendere disponibile online una tecnologia per l'editing e il remix video. Grazie alla nuova tecnologia sviluppata per Flash 9, con ActionScript 3.0, Adobe punta in alto, anticipando che entro sei mesi sarà disponibile online una versione di Photoshop basata, appunto, su tecnologia Flash.

Effettivamente le nuove potenzialità di ActionScript 3.0 (che coinvolgono progetti come Flex e Apollo - vedi anche Web2.0: Adobe ci prova con Apollo e Ajax: Rich Internet Application) lo rendono il candidato perfetto per l'implementazione di vere RIA sul Web. Ajax, dal canto suo, si vede spodestato dal suo trono in questo nuovo scenario. Nonostante gli innumerevole Framework Ajax, alcuni di ottimo livello, prodotti nel corso di questi ultimi anni, Flash garantisce un'ambiente più evoluto e semplice da manipolare. Inoltre parliamo di uno dei Plugin più diffuso al mondo: Flash ha infatti alle spalle qualche anno in più rispetto ad Ajax e derivati.

Inoltre risulta ovvio che Adobe scelga Flash, essendo oramai lui il produttore. Tuttavia ci sono da considerate questioni tecniche che possono - ad oggi - essere risolte in modo armonico unicamente ricorrendo a tecnologie come quella Flash. Dando uno sguardo al nuovo ActionScript 3.0 ci si rendo subito conto delle enormi possibilità di sviluppo che offre questa nuova piattaforma. Lo standard ECMA del linguaggio e i nuovi oggetti messi a disposizione dal Framework, permettono di arrivare ad un livello di dettaglio impensabile con le precedenti versioni di Flash: una su tutte, ad esempio, la possibilità di accedere ai dati Bitmap di un'immagine caricata da disco!

L'attacco da parte di Adobe sembra svolgerersi quindi su due fronti distinti che hanno in comune la tecnologia Flash (che ricordiamo ha da sempre la capacità di interagire attivamente con il browser e quindi con Javascript lato Client e Scripting lato Server).

Il primo attacco avviene dall'esterno, sul versante browser, dove la tecnologia Apollo si propone di fatto come alternativa ai Kernel usuali delle diverse piattoforme oggi disponibili (Windows, Mac OS, Linux, ecc...); usare Adobe Apollo, quindi, al posto del browser per ottenere prestazioni e applicazioni (vere e proprie RIA) impensabili, aggirando così le incompatibilità tra Internet Explorer, FireFox e compagnia. Inoltre Apollo garantisce una piattaforma unica di sviluppo, al pari di Javascript-Ajax, ma senza i problemi di compatibilità. Quest'ultimo punto è uno scacco notevole a tecnologie come Ajax che ancora oggi soffrono enormemente delle questioni legate alla compatibilità tra browser; non dimentichiamo, inoltre, tutta la questione legata alla resa (rendering) grafica dei CSS!

L'altro attacco avviene direttamente dall'interno, colpendo i Framework Ajax con la carta Flash. L'elemento vincente in questa strategia risiede nell'uso di Flash, della tecnologia Flash, che trova applicazione sia in Flex, sia in Apollo, sia in versione standalone come già siamo abituati a vedere (semplici file SWF per intenderci)! Non c'è dubbio che tale scenario è estremamente invitante per gli sviluppatori, Web e non. Ciò che realizzo in Flash diventa immediatamente riusabile in vari modi, senza costringermi a modificare una sola riga di codice e, inoltre, senza preoccuparmi della compatibilità!

Tutto questo, a mio avviso, è un'importante passo avanti, una svolta di proporzioni notevoli che coinvolge anche il mondo dei giochi e del Marketing. Ne parleremo ancora prossimamente, statene certi!

Post correlati

WinSnap e TaskSwitchXP: 2 software da avere

Venerdì 23 Febbraio, 2007

Due software gratuiti da avere assolutamente, per l'utilità e per come sono stati sviluppati. Complimenti alla ntwind software che sul sito propone anche altri interessanti tools.

WinSnap permette di catturare lo schermo e porzioni del PC ma, finalmente, con tutte le opzioni di un grabber professionale. Sul sito potete scaricare sia la versione free (gratuita) che quella a pagamento. Le sue caratteristiche lo rendono davvero unico e da sviluppatore mi complimento con gli autori per l'ottima qualità del prodotto.
L'installazione è semplice e rapida. Il prodotto è estremamente leggero e non infastidisce il sistema. L'interfaccia utente è ben sviluppata e permette di configurare WinSnap in tutte le sue parti. È possibile catturare (grabbarel'intero schermo, un'applicazione, finestre attive, area client della finestra, menu contestuali (ottimo), porzioni personalizzate dello schermo. La caratteristica più interessante è che WinSnap mantiene la trasparenza dei bordi quando si cattura una finestra, vedi bordi arrotondati delle Window.
Inoltre è possibile applicare alcuni effetti su quello che si è catturato; colorazione (scala di grigi, seppia, negativo), ombreggiatura (in basso, in alto, bordo), altre come l'aggiunta del bordo, applicazione di una filigrana personalizzata, rotazione dell'immagine e il ridimensionamento! Insomma per chi ha necessità di congelare qualcosa sullo schermo è il prodotto ideale.

TaskSwitchXP è un replacement del comando ALT+TAB di Windows. Sostituisce in modo nettamente superiore il PowerToys di Microsoft che, in confronto, è proprio bruttino (inoltre la versione Microsoft funziona anche male con qualche bugs!).
Anche questo prodotto è perfetto nella sua ideazione, ottime personalizzazioni ed estrema efficenza. TaskSwitchXP è completamente gratuito e dopo l'installazione viene eseguito all'avvio della macchina, ma nonostante ciò rimane trasparente e leggero per il sistema.
Oltre a mostrare un'ottima anteprima dei Task su cui si vuole passare (dividendo istanze da applicazioni - molto utile in alcuni casi ), permette anche di ridurre le finestre di Windows direttamente nella TrayIcon.

Post correlati

Web2.0: Adobe ci prova con Apollo?

Martedì 13 Febbraio, 2007

Apollo è il nome in codice (per ora) di un ambizioso progetto Adobe destinato al mondo  RIA (Rich Internet Applications) e Web2.0, Ajax compreso. A qualcuno ricorda Macromedia Contribute, a qualcun'altro Macromedia Central. C'è, altresì, chi vede in Apollo la mera unione -  o possibilità - di far convivere elementi Flash e PDF (cosa tra l'altro già fattibile con Flash Paper)!

Continua a leggere... »

Post correlati

Web Developer 1.1.3

Giovedì 1 Febbraio, 2007

Chris Pederick rilascia la nuova versione di Web Developer, comodo add-on per FireFox ed altri browser, che insieme a FireBug rende la vita degli sviluppatori Web migliore.
Segnalo questa release per le sue ottime novità rispetto alla versione predente. Le icone della toolbar sono state ridisegnate, ora molto più efficaci. È stato aumentato il numero di funzioni disponibili sui menu, come un comodo magnify in tempo reale, rules e linee guida, possibilità di editare l'HTML. Da installare quanto prima...

Post correlati