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

Un commento a: “Unobtrusive Flash Objects”

  1. getAvatar 1.0 Domenica 11 Novembre, 2007 alle 16:14
    undolog » Blog Archive » Aprile 2008: addio all’attivazione dell’ActiveX per Flash ha detto:

    [...] Nel tempo, tuttavia, sono state introdotte tutta una serie di scorciatoie per evitare questa fastidiosa richiesta, scorciatoie ufficiali (proposte ad esempio dalla stessa Macromedia per Flash e da Apple per QuickTime) e non ufficiali (SWFObject o UFO, ad esempio - vedi anche Unobtrusive Flash Objects).Secondo Microsoft gli sviluppatori non dovranno modificare nulla ad aprile 2008 nei “vecchi” siti che utilizzavano scorciatoie, tuttavia è bene dare un’occhiata al blog di Internet Explorer per i casi particolari. [...]

Lascia un commento

TAG XHTML permessi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Usa <pre> per racchiudere codice