Undolog.com

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...

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...

Scegliere la tecnologia da usare nello sviluppo di una Web Application è di vitale importanza, per non ritrovarsi nei guai subito dopo. Il tipo di Web Application, le sue caratteristiche di funzionamento, sono il primo punto da prendere in considerazione per poter scegliere il FrameWork e le tecnologie correlate.
Ho spesso discusso sull’efficacia di script Javascript nei confronti di tecnologie diverse come Adobe Flash o Java. Tuttavia è bene sottolineare un aspetto importante spesso sottovalutato: l’accesso al DOM. Javascript, in questo caso, è il candidato (per non dire il solo) prediletto per questo tipo di operazione.

Strumenti con Snap, ad esempio, funzionano su un semplicissimo meccanismo: quando la pagina HTML è caricata (e dopo aver inserito il caricamento dello script Javascript) viene eseguita una scansione della pagina HTML e aggiunto un nuovo codice in punti particolari. Nel caso specifico di Snap vengono identificati tutti i link a pagine esterne (o interne nella configurazione dell’ultimo rilascio), i TAG <A> per indenderci. Questi vengono modificati in modo tale che al passaggio del mouse si apra una finestra di anterpima del link (vedi questo stesso Blog per un esempio).

Non solo Snap ma molti altri script Javascript fanno praticamente la stessa cosa. Ultimamente questa tecnica si è largamente diffusa grazie alla libreria Prototype, che mette a disposizione tutta una serie di metodi (come il famoso $ o doppio-dollaro $$ – vedi Prototype: l’uso del doppio dollaro ($$)) sia per rintracciare che modificare – al volo – gli elementi di una pagina HTML.

Muoversi all’interno del DOM HTML è dunque compito specifico di Javascript. Storicamente, tra l’altro, Javascript fu introdotto proprio per leggere e scrivere i contenuti di una pagina HTML.
Se ad esempio volessimo fare alcune modifiche ad una pagina HTML tramite Adobe Flash, ci aggorgeremmo – o presto o tardi – di essere costretti ad invocare una funzione Javascript. Il nuovo ActionScript 3.0, ad esempio, mette a disposizione una classe (ExternalInterface) adatta a tale scopo. Una volta (nelle precedenti versioni di ActionScript) si usava il comando getURL() – oggi sostituita dalla migliore flash.net.navigateToURL() – o fscommad() per chiamare una funzione Javascript:

Inoltre:

The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded.

Notate quel “desktop application” che tanto ricorda Apollo!

Oggi, grazie a ExternalInterface, è possibile invocare una funzione Javascript in modo quantomeno più pulito (questa classe permette una gestione notevolmente più efficace rispetto a getURL(), come ad esempio il passaggio di parametri):

Cosa possiamo concludere quindi? Tra tutti i vari framework e librerie disponibili l’analisi iniziale del progetto che si vuole realizzare rimane di fondamentale importanza. Sbagliare questa fase può compromettere seriamente le successive fasi di qualsiasi progetto Web2.0. Javascript, quindi, vince su tutti quando si deve interagire con il DOM.

Continua...

Con l’ultimo rilascio di Prototype, Andrew e Christophe hanno velocizzato e migliorato la funzione ‘doppio dollaro’  ($$ utility), la quale permette di selezionare un elemento specificando il selettore (praticamente tutti i selettori supportati dalle specifiche CSS3).

L’utilità di questa funzione va ben oltre la popolare $, che può essere utile ma, in fin dei conti, non svolge nessuna operazione degna di nota. L’utility ‘doppio dollaro’ ($$) invece permette davvero di selezionare qualsiasi tipo di elemento, fornendo ottimi strumenti per filtrare gli elementi nel DOM.

Vediamo alcuni esempi ripresi dal sito ufficiale:

Il punto di forza, tuttavia, risiede nella possibilità di escludere alcuni elementi in favore di altri, ad esempio:

Ancora più interessante è:

Questo, in pratica, trova tutti i TAG A con l’attributo href che inizia con ‘#’ ma non prende in considerazione quelli che sono uguali a ‘#’ solamente. In altre parole vengono ignorati i links che non puntato ad un valido ID!
Questa eccezionale caratteristica del ($$) ha ispirato Tobie Langel per creazione di un semplicissimo script (disarmante) in grado di aggiungere un simpatico effetto di scroll quando all’interno di una stessa pagina HTML ci si sposta per Anchors, con la tecnica – appunto – href=”#”.
Per un Demo clicca qui.

Continua...

Una questione trascurata nell’ambito del Web2.0 è la protezione del codice sorgente. In un ottica Open Source, dove il Web2.0 trova nella beta la sua massima espressione, condividere e far partecipare la comunità lascia sicuramente in secondo piano questioni legate alla protezione del codice sorgente. Ricordiamo, infatti, che gli script Javascript vengono scaricati all’interno del browser dal Web Server, come file testuali, quindi totalmente visibili all’utente finale.
Mentre il codice Server è protetto per definizione (è impossibile accedere al codice di una pagina PHP tramite il protocollo HTTP del browser, salvo i rari casi di malfuzionamento del Web Server), il codice client potrebbe essere soggetto ad un Reverse Engineering.

Esiste tuttavia una semplice protezione ideata, ai suoi esordi, per dimuire la dimensioni degli script Javascript; oggi diventati veri e propri framework in alcuni casi.
Esistono infatti applicativi e siti Web che permettono di comprimere (crunch) il codice Javascript, ma non solo. Questa caratteristica, in modalità diversa, può essere applicata anche al codice HTML e ai fogli di stile CSS. Il codice Javascript, in particolare, oltre ad essere compresso può essere nascosto, ottenendo così una protezione del codice (a vista) tale da rendere più articolata la procedura di Reverse Engineering.

Le differenze tra HTML, CSS e Javascript sono importanti e sostanziali. Mentre la compressione di pagine HTML e fogli di stile può solo agire sull’eliminazione di caratteri inutili o superflui, come ‘a capo’, ‘spazi doppi’, ecc…, Javascript è un linguaggio di programmazione che può quindi eseguire uno speciale codice per decomprimere se stesso.

JavascriptCompressor.com è un servizio gratuito, utilizzabile online, che permette di comprime un codice sorgente Javascript. Le opzioni lo rendono estremamente versatile, garantendo al contempo l’oscuramento del codice.

Esempio, codice di partenza:

Codice con compressione semplice:

Encoding normale:

Ovviamente questo è un esempio, con codici piccoli comprimere non ha davvero molto senso, si rischi di peggiorare le cose e basta (a meno che non siate interessati esclusivamente all’oscuramento del codice a vista).

MemTronic Cruncher Compressor è anch’esso un servizio online (come il precedente funzionano anche in modalità offline) parzialmente gratuito, nel senso che alcune funzioni sono disponibili solo nella versione a pagamento (come la funzione Obfuscade). Rispetto al precedende servizio dovrebbe offrire maggiori prestazioni e sicurezza nel crittaggio del codice. Io li uso indistintamente, a seconda dei casi.

Peterbe.com non permette di comprimere Javascript (salvo che elimando spazi e ‘a capo’), ma propone un compressor per HTML, CSS e XHTML. Io, ad esempio, lo uso per comprimere i fogli di stili.

A meno di usare algoritmi particolari di crunching, che tuttavia appesantirebbero l’elaborazione dei dati, è sempre possibile eseguire un Reverse Engineering del codice, anche quello compresso. O presto o tardi, infatti, il codice originale deve essere inviato all’interprete del browser, il quale lo riconosce (per ora) solo in chiaro. In un futuro, con nuove versioni dei browser, questo impedimento potrebbe essere superato. Sarebbe infatti vantaggioso se venisse implementata, all’interno dei browser, una qualche tecnologia in grado di accettare codice Javascript pre-compilato, in binario per intenderci (caso mai crittato). In questo modo si abbatterebbero i tempi di download degli script, consentendo una naturale protezione dal Reverse Engineering e, non ultimo, maggior performance a livello di esecuzione degli script.

Continua...

Xopus è un editor XML (HTML) in WYSIWYG mode funzionante all’interno del browser. L’avevo già notato qualche tempo fa, grazie ad un articolo uscito su Ajaxian. Ne parlo ora in quanto rimane un’interessante proposta nel panorama web2.0/editor. È un’esperienza interessante! Xopus è sviluppato davvero bene (con supporto italiano), con un’ottima implementazione del menu contestuale, anche se ancora non pienamente cross-browser; alla attuale release 3.1 è supportato solo Microsoft Internet Explorer (versione 6 e 7) tuttavia gli sviluppatori hanno promesso quanto prima una versione compatibile almeno con Firefox (il 1 febbraio è stata rilasciata in alpha la versione 3.1.1 compatibile in Firefox 2.0+).

Come già discusso altrove, la questione della compatibilità (il cross browser) attraverso i browser, rallenta e penalizza lo sviluppo di strumenti che, anche non ricorrendo a tecnologie particolari come Applet Java o Adobe Flash, potrebbero portare un notevole contributo alla Comunità! Conttibuto impedito – alla fine – dalle inutili lotte interne degli attuali produttori di browser: IE, Firefox, Opera, Mozilla, Safari, … !

Visionando i demo si intravede anche qualcosa in più del semplice editor HTML, per dirla in parola povere. Xopus propone infatti sia la struttura classica dell’editor, sia funzioni avanzate sullo stile di Microsoft Word. È possibile, infatti, inserire all’interno della pagina veri e propri oggetti intelligenti che rispondono a determinate caratteristiche, rendendo Xopus un caso particolare.

Come indicato sul sito:

Xopus is a good solution for any business that has a back-end content management system and a front-end publishing-system and therefore two systems which use the same information. To structure that information, to make both ends meet, is therefore a must.

Poete guardate il video dimostrativo che introduce le avanzate caratteristiche di editing. Inoltre potete provare direttamente una demo.

Continua...

È disponibile online la versione Alpha 2 di Firefox 3.0, nome in codice Gran Paradiso. Tra le novità annunciate (la versione definitiva è attesa per fine 2007) troviamo la possibilità di utilizzare il browser in modalità off-line. Tutto questo ricorda Adobe Apollo che, nonostante non si presenti come browser, ne evoca i tratti essenziali.

Continua...

Abbiamo parlato spesso dell’uso delle Web Application (del Web2.0) e di come il mercato del software si stia spostando online per applicazioni normalmente installate sulla nostra macchina. Ultimo importante segnale quello di Adobe (vedi Net Software) che vuole rilasciare – o sta iniziando a rilasciare – una serie di software in modalità online.

Oggi vi propongo uno strumento davvero eccezionale, Weebly, che si propone di realizzare un sito direttamente online, con tanto di dominio (tuoweb.weebly.com) e strumenti per l’editing davvero interessanti. Vedi video demo qui sotto. 

L’idea, ovviamente, non è nuova, ma l’approccio di Weebly mostra in modo evidente perchè a breve avere Adobe Photoshop online sarà davvero un passo avanti. Oltre alla semplicità d’uso questo servizio offre strumenti di editing interessanti, come lettori RSS, inserimento di Mappe Google, inserimento di Video (da varie fonti) e altro. L’uso di Ajax e DHTML (Dynamic HTML) è davvero per sfruttato, il che rende il lavoro di editing davvero semplice e alla portata di tutti.
Il punto interessante, a mio avviso, è che quando si inserisce un’immagine è possibile attivare un piccolo editor per effetuare operazioni varie come Crop - ritaglio - e Resize – ridimensionamento.

We just rolled out a couple of new features: You can now Edit, Crop, Resize, Enhance and Adjust your pictures in the new integrated Snipshot image editor, we’ll present a warning (but allow you to continue) if you are using an unsupported browser, we released some small updates to the themes, and a couple other small changes & fixes.

Il nodo fondamentale risiede qui. A breve strumenti come Weebly potranno avvalersi di editor di immagini come Adobe Photoshop, il che renderà l’attività di Web Design Online al pari dell’editing tradizionale.
Ovviamente questa è sola una parte di quello che potrebbe accadere; editor Video, Audio  e Testo avanzati sono i prossimi ad entrare prepotentemente online!

Continua...

È 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!

Continua...

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...