D27: XHTML i CSS. Introducció als estàndards i accessibilitat web

Els estàndards i els objectes a la web.

Actualment, a més a més de text i imatges, es troben sovint video, so o interactius a les pàgines web. Aquests continguts, independentment del format, s'identifiquen com a objectes. L'etiqueta que els representa és, per tant, object.

<object>...</object>

Els objectes depnedran sempre d'un connector (plug-in) per a ser reproduits correctament al navegador. Un exemple generalitzat de l'ús de connectors és el reproductor d'arxius .swf, més conegut per "Flash Player" o reproductor d'arxius flash. El fet de no terni-ho instal·lat al navegador, farà impossible la visualtizació d'arxius flash. Un altre exemple és el cas de les activitats JClic, que requereixen del connector de la màquina virtual de Java, sense el qual no és possible la seva execució.

El W3C recomana l'ús de l'element object per a encastar (embed) aquests objectes, declarant, dins de l'element object, de quin tipus es tracta per mitjà de l'atribut type, que indicarà al navegador quin és el tipus de connector que ha d'utilitzar, la seva ubicació amb l'atribut data, així com els paràmetres de l'objecte amb els seus respectius valors. Veieu un exemple:

<object type="application/x-shockwave-flash" data="prova.swf" width="550" height="450">
	<param name="quality" value="high" />
	<p class="atencio">No tens el connector de Flash! instal·lat al navegador</p>
</object>

Obriu l'arxiu objectes.html. Veureu que conté el mateix objecte encastat diverses vegades, cada una amb un mètode diferent. Proveu el funcionament d'aquests objectes en més d'un navegador. Disortadament, i com segurament ja heu descobert, el codi vàlid no funciona en tots els navegadors. Aquesta és una altra de les discussions obertes a la que diferents autors han anat proposant diferents solucions més o menys vàlides i funcionals per als navegadors més estesos.

Després de veure el primer mètode utilitzat a l'exemple, es passarà a mostrar els altres dos.

Método Twice-Cooked

Aquest mètode fa servir eines d'edició web, com las versions antigues del Macromedia Dreamweaver, per a encastar un objecte flash al document web. La majoria d'autors coincideixen en que aquest mètode utilitza un codi massa llarg i complicat:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
	width="550" height="450" id="movie" align="">
	<param name="movie" value="prova.swf">
	<embed src="prova.swf" quality="high" width="550"
	height="450" name="movie" align="" 
	type="application/x-shockwave-flash"
	plug inspage="http://www.macromedia.com/go/getflashplayer"> 
</object>

Aquest codi, segons Patrick Griffiths, autor de The Best Practice Guide to XHTML and CSS, és a rather ugly block of code vomited up by someone at Macromedia many moons ago i, en paraules de Drew McLellan, autor de l'article Flash Satay: Embedding Flash While Supporting Standards, és a bit of a monster. Opinions que es pot dir que no necessiten de traducció per entendre el seu significat.

Aquest codi no és vàlid, segons el W3C, degut, principalment, a l'ús de l'etiqueta embed, que no pertany a cap estàndard.

L'etiqueta embed va néixer de la mà dels desenvolupadors del navegador Netscape, davant la necessitat de reproduir arxius flash, però, l'objete embed no forma part dels estàndards, per la qual cosa és millor oblidar-se d'ell.

Métode Satay

El métode Satay respecta els estàndards, tal com s'ha vist al primer exemple, pel fet d'eliminar l'etiqueta embed i clarificar enormement el codi utilitzat:

<object type="application/x-shockwave-flash" data="prova.swf" width="550" height="450">
	<param name="movie" value="prova.swf" />
	<param name="quality" value="high" />
	<img src="flash.png" width="230" height="100" alt="Imagen en reemplazo de flash" />
</object>

Té, però, el problema de que l'Internet Explorer no reconeix l'streaming, i, per tant, la pàgina web no estarà carregada fins que no s'hagi completat la descàrrega de l'arxiu flash. Aquest fet pràcticament no es nota quan els arxius flash són petits, però, podeu imaginar què passa amb pel·lícules, fragments de video o jocs interactius.

Algunes solucions

Drew Mclellan, autor del mètode Satay, proporciona una solució al problema de l'streaming: crear un arxiu flash, al que anomena contenidor de la pel·lícula, i que obliga a carregar la pel·lícula que es vol reproduir. en tractar-se d'un arxiu d'una sola instrucció a la seva arrel o primer fotograma:

_root.loadMovie(_root.path,0)

la càrrega serà instantània i executarà qualsevol pel·lícula que es posi a la variable path. Veieu el resultat, on c.swf és l'arxiu flash contenidor:

<object type="application/x-shockwave-flash"	data="c.swf?path=prova.swf" 
	width="550" height="450">
	<param name="movie" 
	value="c.swf?path=prova.swf" />
	<img src="flash.png" width="230" height="100" alt="Imagen en reemplazo de flash" />
</object>

Aquesta solució té el desaventage d'utilitzar un segon arxiu, el contenidor per a la càrrega del què es vol visualitzar. Segons l'autor, no és la millor solució, però sí que és pràctica.

El mètode Hixie

El mètode Hixie resol el problema de l'streaming del mètode Satay. Es basa en la necessitat del navegador IEXplorer de comptar amb la informació dels següents atributs: classid i codebase, atributs que, d'altra banda, inhabilita la reproducció de l'arxiu per a altres navegadors com el Mozilla Firefox:

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="300" height="120">
    <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
    <param name="quality" value="high">

    <param name="bgcolor" value="#FFFFFF">
   </object>

La solució passa per un hack: utilitzar l'expressió condicional Si no ets l'IExplorer, fes tal cosa expressada de la seguent manera:

<!--[if !IE]> <-->
   Contingut no llegit per l'IExplorer
<!--> <![endif]-->

Dins del condicional s'afegeix el codi que s'ha utilitzat al començament d'aquesta pràctica:

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="550" height="450">
    <param name="movie" value="prova.swf"> 
    <param name="quality" value="high">

    <param name="bgcolor" value="#FFFFFF">
    <!--[if !IE]> <-->
<object type="application/x-shockwave-flash" data="prova.swf" width="550" height="450">
	<param name="quality" value="high" />
	<p class="atencio">No tens el connector de Flash! instal·lat al navegador</p>
</object>
    </object>
    <!--> <![endif]-->
   </object>

Conclusió:

Cap dels mètodes existents és perfecte, en termes rigurosos d'aplicació dels estàndards. Ara per ara, els mètodes Satay i Hixon són els que, comúnment, es fan servir per a la inclusió d'objectes del tipus flash als documents web. Decidiu vosaltres quin és el mètode que utilitzareu, sempre i quan el mètode triat sigui vàlid!.

Tornar a l'inici de la pràctica