gen. 15 2011

Incloure un vídeo de youtube en una web i continuar validant amb XHTML strict

Category: Disseny Web,Usabilitat i Accesibilitatadmin @ 11:00 pm

Tenim el bon costum de realitzar les pàgines complint les normes d’accessibilitat (mínim les automàtiques). Però moltes vegades ens trobem que ens cal incloure un vídeo de youtube a una pàgina web.

Si utilitzem el procediment típic (OBJECT and EMBED syntax | Flash)  per inserir els vídeos de youtube:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/ipzR9bhei_o"></param><embed src="http://www.youtube.com/v/ipzR9bhei_o" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

ens donarà 2 alertes: discarding unexpected </param> i <embeded> is not approved by W3C

Per sol·lucionar aquests problema tenim l’opció d’utilitzar el petit fitxer (3,2 KB) de javascript AC_RunActiveContent.js (Publishing Adobe Flash content using an Active Content HTML template )

<div id="video">
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" >AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
7,0,0,0','width','425','height','344','src','http://www.youtube.com/v/ipzR9bhei_o','quality','high',
'bgcolor','#00000','name','youtube','allowscriptaccess','sameDomain','pluginspage'
,'http://www.macromedia.com/go/getflashplayer','movie','http://www.youtube.com/v/ipzR9bhei_o' );</script>
</div>

Amb aquest codi ja la pàgina ja passaria les comprovacions de validació automàtica.

Si voleu anar més enllà, podeu utilitzar els controls de reproducció de youtube accessibles Accessible YouTube player controls.

Es tracta d’un javascript de 9,5 KB que permet controlar el reproductor amb el teclat. A més, la pàgina també passa els controls de validació automàtica.

<script type="text/javascript" src="bin/swfobject.js"> </script>
<script type="text/javascript">
(function(){
var a = {};
a.videoid = 'ZojdZGkojas';
a.width = '480';
a.height = '385';
a.duration = '4:15';
a.HTMLid = 'wrapper';
a.path = 'bin/flashcontrols.swf';
var flashvars = {HTMLid:a.HTMLid, videoid:a.videoid, height:a.height, width:a.width, duration:a.duration};
var params = {allowFullScreen: 'true'};
swfobject.embedSWF(a.path, a.HTMLid, a.width, a.height, '9', null, flashvars, params, null);
})();
</script>
<div id="wrapper"></div>

Tags: ,


maig 12 2009

Javascript a WordPress

Category: Disseny Webadmin @ 6:56 pm

Per incloure el Comptador de l’alliberament de Fedora hem hagut d’utilitzar javascript. Per incloure javascript a wordpress cal instalar 2 plugins, anem a explicar-ho pas a pas:

  1. Anar a la web http://www.ooso.net/inline-js i descarregar el plugin Inline Javascript Plugin
  2. Descomprimir i pujar al directori del vostre servidor wp-content/plugins
  3. Anar al vostre panell de control i activar el plugin
  4. Per poder utilitzar aquest plugin, cal que asigneu a l’usuari “unfiltered_html” i per poder fer això cal que instal·leu el segon plugin anomenat Role Manager
  5. Descarregar aquest plugin, descomprimir i pujar al directori del vostre servidor wp-content/plugins i activar des de el vostre panell de control.
  6. Aneu a Users, roles i marqueu “unfiltered_html” per l’usuari.

Un cop fet això, ja podeu incloure javascript als vostres posts, tan sols cal que obriu el tag [ inline] i el tanqueu amb  [ /inline]

Tags: ,