Tunneling e proxy server per Ajax e non solo

Lunedì 10 Dicembre, 2007

A causa della sua capacità di comunicare con il server, l’oggetto XmlHttpRequest (XHR), usato nella tecnologia Ajax (acronimo di Asynchronous JavaScript and XML, la cui pronuncia dovrebbe essere “egiacs” anche se noi italiani preferiamo “aiacs”), ha un blocco di protezione che gli impedisce di eseguire richieste esterne al dominio in cui opera. Questa protezione è necessaria per impedire Injection Javascript (tecniche di “iniezione” di codice estremamente pericoloso con lo scopo di violare il sistema) di svariato tipo, con l’obiettivo ultimo di “irrompere” nel sistema.
Questo limite è oggi tenuto in seria considerazione e si sta pensando, in qualche modo, di risolverlo - direttamente nell’oggetto XmlHttpRequest - senza pregiudicare la sicurezza (vedi anche: Third proposal for cross-site extensions to XMLHttpRequest ).

Comunque sia la situazione oggi è la seguente:

XHR

Continua a leggere… »

Post correlati

Fullscreen in Flash dal browser

Martedì 30 Ottobre, 2007

Flash ha sempre supportato la modalità a schermo interno (fullscreen) sia nel Player stand-alone che nel proiettore. Questa modalità ancor oggi viene pienamente supportata e non ha subito modifiche. Adobe ha invece recentemente introdotto la possibilità di attivare il fullscreen direttamente nei filmati visualizzati nel browser. È stata introdotta una nuova e semplice funzionalità ActionScript che lavora sia con i player stand-alone che con i player browser. Per rendere il fullscreen fuzionante bisogna operare anche lato HTML, aggiungendo un nuovo parametro allowFullScreen nei TAG <object> ed <embed>. Tutto il resto è demandato al motore interno di Flash.
Questa nuova funzionalità ha comunque alcune restrizioni che bisogna conoscere, prima tra tutte l'uso del Flash Player versione 9.0.28.0 o superiore. Inoltre, ricapitolando:

  • Sul Browser dev'essere installata la versione del Player 9.0.28.0 o superiore
  • I developer devono aggiungere un nuovo parametro allowFullScreen nei Tag <object> e <embed>. Questo parametro è impostato normalmente a false e non permette il fullscreen. Per permettere il fullscreen bisogna esplicitamente impostarlo a true.
  • Un Box di dialogo verrà mostrato quando si entra in modalità fullscreen e indicherà all'utente come uscire da tale modalità. Questo Box sarà visibile per pochi secondi, passati i quali scomparirà da solo.
  • L'attivazione del fullscreen da ActionScript può avvenire solo in risposta di un click del mouse o tramite la pressione di un tasto, qualsiasi altra modalità verrà ignorata in ActionScript 2.0 e scatenera una eccezione throw in ActionScript 3.0.
  • Durante la modalità di fullscreen non è possibile utilizzare la tastiera. L'utente finale non può quindi inserire o modificare testi. L'unica risposta alla tastiera è riservata alla combinazione di tasti usata per uscire dalla modalità di fullscreen (la pressione del tasto ESC)

Codice ActionScript

Il codice necessario per impostare il fullscreen è semplicissimo e sfrutta l'oggetto Stage discusso su questo Blog in StageExt Class: filmati ridimensionabili in Flash:

Actionscript:
  1. Stage["displayState"] = "fullScreen";

Continua a leggere... »

Post correlati

Note sul testing e debug in Adobe Flash

Giovedì 11 Ottobre, 2007

Una considerazione, ovvia ma sottovalutata, durante lo sviluppo di applicazioni in Adobe Flash: la differenza tra il Player utilizzato per il testing all'interno dell'IDE Flash e l'oggetto (ActiveX o EMBED) usato dal nostro browser. Chi possiede la versione "Macromedia" Flash MX (la versione 8 per intenderci, ma questo discorso in realtà vale per qualsiasi versione di Flash...) quando sviluppa un filmato e lo prova all'interno dell'IDE Flash manda in esecuzione il Player legato al pacchetto di sviluppo. Quando poi si pubblica il filmato sulla rete e lo si "prova" con il Player Flash del browser si potrebbero riscontrare alcune - sostanziali - differenze!

image image

 

Continua a leggere... »

Post correlati

Unobtrusive Flash Objects

Martedì 10 Aprile, 2007

L'inserimento di oggetti (in particolare Flash Objects) all'interno delle pagine Web è diventato ultimamente un'attività spesso stressante. In altri Post abbiamo già affrontato l'argomento di come rilevare Flash ed inserirlo nelle pagine in modo appropriato. Dato che abbiamo parlato di tecniche Unobtrusive, vi segnalo due noti script in grado di rilevare (ed eventualmente installare) ed inserire oggetti Flash in una pagina, in modo assai afficiente e poco intrusivo: SWFObject e UFO.
Entrambi gli script offrono in sostanza le stesse caratteristiche e un funzionamento identico. L'approccio è quello che sostituire tramite Javascript un determinato TAG con il contenuto Flash. Come sappiamo questo procedimento elimina il problema dell'attivazione dell'oggetto Flash imposto da Internet Explorer, tuttavia implica che Javascript sia attivato sul target-browser.
Entrambi gli script non fanno uso di librerie esterne, come Prototype.js ad esempio. La differenza più importante tra i due è che SWFObject va chiamato quando il TAG da sostituire è già stato caricato nella pagina, modalità non propriamente Unobtrusive. Ecco uno stralcio di codice che mostra la sequenza di chiamata:

HTML:
  1. <div id="flashcontent">
  2. <strong>You need to upgrade your Flash Player</strong>
  3. This is replaced by the Flash content.
  4. Place your alternate content here and users without the Flash plugin or with
  5. Javascript turned off will see this. Content here allows you to leave out <code>noscript</code>
  6. tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
  7. </div>
  8. <script type="text/javascript">
  9. // <![CDATA[
  10. var so = new SWFObject("so_tester.swf", "sotester", "300", "300", "9", "#FF6600");
  11. so.addVariable("flashVarText", "this is passed in via FlashVars for example only"); // this line is optional, but this example uses the variable and displays this text inside the flash movie
  12. so.write("flashcontent");
  13. // ]]>
  14. </script>

UFO, invece, permette un'approccio decisamente più in linea con i classici script Unobtrusive. La sostituzione del TAG avviene in modalità trasparente, senza abbligare sequenze di caricamento, come mostrato nell'esempio qui sotto:

HTML:
  1. <title>Unobtrusive Flash Objects (UFO) | Sample page</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <script type="text/javascript" src="ufo.js"></script>
  4. <script type="text/javascript">
  5. var FO = { movie:"test8.swf", width:"300", height:"120", majorversion:"12", build:"0", xi:"true" };
  6. UFO.create(FO, "ufoDemo");
  7. </script>
  8. </head>
  9. <div id="ufoDemo">
  10. <p>Replacement content</p>
  11. <p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none;" /></a></p>
  12. </div>
  13. </body>

Nel codice sorgente dello script di UFO, infatti, si nota immediatamente l'uso - più appropriato - di un evento che attente il caricamento completo della pagina prima di eseguire la sostituizione; approccio quindi estremamente più consono a script non intrusivi.

Post correlati

Dove Javascript vince

Sabato 17 Marzo, 2007

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:

Actionscript:
  1. getURL("javascript:miaFunzione()");

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):

Actionscript:
  1. /* calls the external function "addNumbers"
  2. passing two parameters, and assigning that function's result
  3. to the variable "result" */
  4. var param1:uint = 3;
  5. var param2:uint = 7;
  6. var result:uint = ExternalInterface.call("addNumbers", param1, param2);

JavaScript:
  1. <script><!--
  2.     // adds two numbers, and sends the result back to ActionScript
  3.     function addNumbers(num1, num2) {
  4.         return (num1 + num2);
  5.     }
  6. // --></script>

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.

Post correlati