Clicky

Errores validación W3C en URL y flash

Categoría: Internet (Tutoriales y trucos)
Visitas: 12812

Error W3C cannot generate system identifier for general entity "fg"

Error W3C Attribute "src" exists, but can not be used for this element.

Puesto a la (árdua) tarea de migrar de Joomla! 1.0.x a Joomla 1.5.15, sobre todo teniendo el temor de perder visitantes debido al cambio en las URLs, tema del que hablaré cuando lo realice -cruzo los dedos-, he decidido también que las nuevas páginas pasen la validación del W3C .

Algunos de los errores que salen al pasar el validador del W3C no son debidos a nosotros mismos, sino que son de códigos que nos facilitan otras webs para insertar objetos en nuestras páginas: vídeo (Youtube), animaciones en Flash (banners publicitarios por ejemplo), javascripts (el motor de búsqueda personalizado de Google para no ir más lejos) o sencillamente URLs que están mal escritas, símbolos de unión (&) o "ampersands" mal colocados (FeedCount, gráfico dinámico que nos facilita FedBurner para mostrar la circulación, suscriptores, a nuestros feeds).

El error de validación del FeedCount de FeedBurner se produce, al menos en mi caso, a que el editor de Joomla! que utilizo "limpia" la codificación original que pudieran traer los códigos y los traduce. Me explico, en este caso en particular cambia "&" por "&" (no tener en cuenta las comillas " ").

Feed Vista al Mar

 El código que se nos proporciona desde la cuenta de FeedBurner para insertar este pequeño gráfico animado de arriba (en la pestaña Publicize y en la columna izquierda FeedCount),  es el siguiente:

<p><a href="http://feeds.feedburner.com/vistaalmar"><img src="http://feeds.feedburner.com/~fc/vistaalmar?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>

Que no tiene problemas en pasar la validación HTML, pero... al pegarlo y salvarlo en el módulo de Joomla! el editor como he dicho antes nos cambia el código a:

<p><a href="http://feeds.feedburner.com/vistaalmar"><img src="http://feeds.feedburner.com/~fc/vistaalmar?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a></p>

eliminando la parte final de &amp; y dejando sólo el símbolo "&". Este último código ya no pasa la validación del W3C para el doctype XHTML 1.0 Transitional saltando una docena de errores y el mismo número de avisos (warnings), este es el primero :

cannot generate system identifier for general entity "fg"

"¦burner.com/~fc/vistaalmar?bg=99CCFF&fg=444444&anim=1&label=marinos" height="2

como vemos se marca en rojo la "f" inmediatamente posterior al primer ampersand (&). La forma de corregirlo es poniendo la codificación del símbolo HTML (entidad) que le corresponde: &amp;  en los dos lugares en que está -los marco en rojo-, como teníamos en el primer código, que nos quedaría de nuevo así (ponemos también un texto en el atributo alt=""):

<p><a href="http://feeds.feedburner.com/vistaalmar"><img src="http://feeds.feedburner.com/~fc/vistaalmar?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="Feed Vista al Mar" /></a></p>

El módulo de Joomla! donde lo tengamos se debe guardar directamente (no aplicar y luego guardar). Además os recomiendo que guardéis una copia en algún archivo de vuestro PC por si tenéis que abrir de nuevo el módulo (aunque claro siempre queda la posibilidad de venir a esta página a copiarlo...).

Voy a ver otro error bastante comentado y analizado en internet como es la validación de objetos insertados en flash. El ejemplo más claro es Youtube, pero lo dejaré para otra ocasión ya que el método que he empleado para "salvar el examen" del W3C ha sido empleando un plugin para Joomla!, y no modificando directamente el código que nos da Youtube para los vídeos.

En este caso es un pequeño banner o recuadro en flash que facilita Greenpeace con la imagen de unos delfines en movimiento, este:

El código original es el siguiente:

<object type="application/x-shockwave-flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="145" height="145">
<param name="movie" value="http://oceans.greenpeace.org/assets/flashes/dolphinbanner150x150"/>
<param name="quality" value="high"/>
<embed src="/http://oceans.greenpeace.org/assets/flashes/dolphinbanner150x150" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="145" height="145">
</embed>
</object>

Los errores que marca el W3C (hasta diez) empiezan por uno así:

Attribute "src" exists, but can not be used for this element.

"¦"quality" value="high"/> <embed src="http://oceans.greenpeace.org/assets/flas

Al final del mensaje de error nos dan este consejo: "Si ha recibido este error cuando se utiliza el elemento <embed> para incorporar elementos Flash en una página Web, vea el tema Preguntas frecuentes sobre Flash válido.

El último enlace nos lleva a un página con un mensaje que no dice mucho:

¿Cómo puedo incluir flash válidado en páginas web (X)HTML?

Muchas herramientas de edición de Flash recomiendan, o utilizan, el uso del elemento <embed> para incluir animaciones flash o aplicaciones en páginas Web. <embed>, no obstante, fue parte de una versión estándar de HTML, y esta práctica produce el marcado no válido.

Hay muchas técnicas para incorporar flash en páginas web válidas. Una de las más famosas es la técnica de Flash Satay.


El Método Satay que recomiendan aquí parece que está obsoleto (el enlace envía a una página de "A List apart" con una entrada de fecha 9 de noviembre de 2002 titulada "Flash Satay: Embedding Flash While Supporting Standards", cuyo autor es Drew McLellan). Yo lo he probado y desde luego no me ha dado resultado. Para no extenderme, ni andarme por las ramas, al final dí con dos páginas (una en inglés: "How to correctly insert a Flash into XHTML" y otra en español: "Flash Válido (mejor que flash satay") que llevan a una solución parecida, que se arregla modificando el código de arriba para dejarlo así:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
data="http://oceans.greenpeace.org/assets/flashes/dolphinbanner150x150" width="145" height="145">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="145" height="145">
<param name="movie" value="http://oceans.greenpeace.org/assets/flashes/dolphinbanner150x150" />
<!--><!--dgx-->
<param name="loop" value="true" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
<p>Para ver la imagen necesitas el Flash plugin.</p>
<p><a href="http://www.macromedia.com/go/getflashplayer/">Download Macromedia Flash Player</a></p>
</object>
<!-- <![endif]-->

Marco los elementos que son comunes en uno y otro código. El más importante a conservar es es archivo .swf que contiene  la animación en flash, en este caso una URL: http://oceans.greenpeace.org/assets/flashes/dolphinbanner150x150 , pero que puede ser también cualquier archivo flash guardado en vuestro servidor.

Como estas dos páginas informan perfectamente del método empleado, os remito a ellas para profundizar en el tema. Una salvedad que hago, es que yo lo he probado en Joomla! 1.0.15 y en Joomla 1.15.15 (ojo que la numeración de las últimas versiones es muy parecida), en la versión más antigua funciona perfectamente en Internet Explorer (tanto IE7 con windows XP, como IE8 con Windows 7), no así en Firefox, pero intentaré averiguar porqué. En Joomla 1.5.15 funciona en los dos navegadores y sistemas operativos.

La única diferencia que creo puede afectar es que en esta última versión de Joomla! tengo puesta la etiqueta <script type="text/javascript" defer="defer" /> y en el antiguo no. En los dos post de arriba que dan este código explican más ampliamente el tema.