W3C et SWF (Flash) pas commode !!!

GraphiqueDesign

GraphiqueDesign

Membre expert
Club iGen
9 Septembre 2007
1 315
41
60
Ouagadougou/Burkina Faso
www.graphiquedesign-bf.com
... Bonjour à vous.

... Je cherche depuis 2 heures comment faire passer la validation W3C à une page comportant un bandeau SWF. J'ai trouvé des solutions sur le net qui proposent de n'utiliser qu'une balise Object, Embed n'étant reconnu par W3C.

... Or, entre temps est sorti le problème avec IE qui bloque les animations Flash contourné par différentes solutions dont celle que propose DreamWeaver avec son fameux script AC_RunActiveContent.js et le code d'intégration du SWF dans la page est:

<td colspan="7" bgcolor="#CCEDFA"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','500','height','82','src','bando','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','bando' ); //end AC code
</script><noscript><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="500" height="82">
<param name="movie" value="bando.swf" />
<param name="quality" value="high" />
<embed src="bando.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="82"></embed>
</object></noscript></td>

... Du coup, je ne trouve aucune solution et la page ne peut être validée par la W3C.
... Je sais, c'est pas grave mais je suis de nature assez curieux, alors si quelqu'un peut m'aider à comprendre ... merci.
 
... Alors si ça peut en intéresser certain, c'est bien ce que je disais précédemment (oui je sais, je parle tout seul), suffit effectivement de virer la balise "embed" pour que ça passe le test de validation WC3.

... Est-elle aujourd'hui encore indispensable, cette balise ???
... C'était quoi déjà, la balise perso de NetsCape ???
... Y a t'il d'autres parades moins agressives ???

Merci pour vos avis ;o)))
 
Perso la validation avec des technos type Flash... heu, accessibilité, hein, ergonomie, ha... bon bref. D'ailleurs la validation te sert à quoi exactement ?

Sinon je n'utilise que la librairie SwfObject, qui permet de passer outre la protection DirectX sous IE (enfin ça marche presque à tous les coup)...:siffle: ;)
 
Mouaip moi je plussoie momo... Valider du flash par le w3c, alors que ça ne respecte aucune de ses recommandations, je ne vois pas bien l'intérêt. Déjà que de base le perfectionnisme vis à vis du w3c pour des choses qui n'ont pas la moindre importance, j'en vois pas bien l'intérêt...
 
momo-fr a dit:
Perso la validation avec des technos type Flash... heu, accessibilité, hein, ergonomie, ha... bon bref. D'ailleurs la validation te sert à quoi exactement ?
Cliquez pour agrandir...

... c'est le client qui la réclame !!!

momo-fr a dit:
Sinon je n'utilise que la librairie SwfObject, qui permet de passer outre la protection DirectX sous IE (enfin ça marche presque à tous les coup)...:siffle: ;)
Cliquez pour agrandir...

... oui je connais les différentes manières de contourner le problème des DirectX, autant utiliser celle qui est implémentée dans mon DreamWeaver. Mais effectivement ça marche parfaitement, par contre, faut effectivement virer la balise "embed" du code.

Merci à vous tous !!!
 
Pochtroi a dit:
Une solution je crois: tu fais un rechercher/remplacer de "strict" par "transitional"... je crois que ça passe... :D
Cliquez pour agrandir...

... de toute façon, je monte toutes mes pages en transitional, strict me paraît un peu trop sec, franchement !!!
 
grumff a dit:
Mouaip moi je plussoie momo... Valider du flash par le w3c, alors que ça ne respecte aucune de ses recommandations, je ne vois pas bien l'intérêt. Déjà que de base le perfectionnisme vis à vis du w3c pour des choses qui n'ont pas la moindre importance, j'en vois pas bien l'intérêt...
Cliquez pour agrandir...

... C'est quand même un peu naze ton propos là ;o))) d'abord tu ne valides pas ton Flash mais la page et le code donc qui l'héberge. Ensuite, un bandeau promo Flash sur le site commercial de mon client, je ne pense pas là pouvoir dire que ça n'a aucune importance, sur le plan marketing en tout cas. Mais bon, vais lui proposer le gif animé et je te raconterai comment il m'aura chassé de sa boite !!!!!!

... Merci grumff ;o)
 
gloup gloup a dit:
Edit : ah oui, tu utilises des tableaux pour la mise-en-page, c'est pas bien. ;)
Cliquez pour agrandir...

... Hello gloup gloup ;o)

... Oui je sais, c'est pas bien, je sais ...
... Mais dans la vraie vie, c'est pas évident de basculer dans le 100% CSS en claquant des doigts, faut être un peu réaliste. Il est indéniable que mon code évolue sans cesse mais de là a virer les tables, je ne suis pas prêt. De plus, le webDesign que souhaite encore aujourd'hui mes clients n'est, à mon avis, pas adapté au 100% CSS. Laissons également le temps aux mentaliyés d'évoluer. La majeure partie des sites commerciaux du web sont encore aujourd'hui montés dans des table, même si les CSS prennent de plus en plus d'importance.
 
Je dirais plutôt que les nouveaux sites qui sortent sont tous en css, mais tu as déjà la démarche d'utiliser de plus en plus les css, c'est bien. Comme tu dis, il faut prendre le temps de tout ingurgiter. ;)
 
GraphiqueDesign a dit:
... c'est le client qui la réclame !!!



... oui je connais les différentes manières de contourner le problème des DirectX, autant utiliser celle qui est implémentée dans mon DreamWeaver. Mais effectivement ça marche parfaitement, par contre, faut effectivement virer la balise "embed" du code.

Merci à vous tous !!!
Cliquez pour agrandir...

et il a raison IE n etant toujours pas w3 tu lui dis pas dIE :p
 
tatouille a dit:
et il a raison IE n etant toujours pas w3 tu lui dis pas dIE :p
Cliquez pour agrandir...

... woah tatouille, je suis ok mais c'est un vaste débat là !!!
... Me retrouver au chômage ne fait pas vraiment partie de mes objectifs. De toute façon, la validation W3C n'est vraiment pas compliquée en soi, même avec des tableaux imbriqués dans des tableaux eux-même imbriqués, des spacer.gif dans tous les coins, des shim.gif en pagaille, sans oublier le Flash et autres gâteries tant appréciées ici en Afrique.

... Initialement, ma question portait donc effectivement sur la validation W3C car mon client l'exige dans son cahier de charge. Finalement, on trouve assez facilement les parades afin de rendre tout cela correct.

... Par contre, lors de ces recherches j'ai commencé à m'interresser, je ne te le cache pas, à la mise en page gérée par les CSS mais là, présentement, je ne vois pas encore comment appliquer cela à mon travail. Il est vrai qui si aujourd'hui je fais de plus en plus appel au CSS pour de l'enrichissement typographique, afin d'éviter au maximum l'usage des spacer.gif ou pour personnaliser certaines puces ou fond de cellule avec des images répétées, je ne me vois pas assembler les 25 découpes d'image devant former l'interface de mon site avec les CSS. Le 100% CSS, est-ce vraiment adapté à tous les types de site ???

... Par contre, peut être peux tu m'aider sur un petit problème que je n'arrive pas à solutionner. ... Je m'intéresse particulièrement à un menu vertical CSS/JS qui visiblement à l'air de fonctionner correctement sur IE. Maintenant le problème est que je n'arrive pas à l'avoir en position ouvert au chargement de la page. Supposons que je veuille que le menu3 soit déployé au chargement de la page3, j'ai essayé avec les display sur yes, j'ai également essayé de bidouiller la commande onload mais rien n'y fait.

... Et pourtant je sais que c'est possible ... mais ... mais ...

Voila le tutoriel en question:
http://css.alsacreations.com/Constr...oulant-en-CSS-et-XHTML-vertical-et-horizontal

... J'en ai vu d'autres + faciles à gérer mais malheureusement pas compatible avec IE. Oubien ca existe ailleurs ??? Une piste ???

... D'avance, un gros merci à vous !!!
 
Un vilain hack rapide mais qui fonctionne c'est de réécrire une partie de la fonction montre (je reprends ton probleme du sous menu 3):
Bloc de code: 
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
else {
var e = document.getElementById('smenu3');
e.style.display='block';
}
}
Apres tu rajoutes sur ta premieres balise dt :
Bloc de code: 
<dt onclick="javascript:montre('menu');"><a href="#">Menu 1</a></dt>

Attention ce n'est pas la solution, mais ca devrait te donner une idée de comment fonctionne la fonction montre et comment elle interagit avec les styles.
 
GraphiqueDesign a dit:
... Par contre, peut être peux tu m'aider sur un petit problème que je n'arrive pas à solutionner. ... Je m'intéresse particulièrement à un menu vertical CSS/JS qui visiblement à l'air de fonctionner correctement sur IE. Maintenant le problème est que je n'arrive pas à l'avoir en position ouvert au chargement de la page. Supposons que je veuille que le menu3 soit déployé au chargement de la page3, j'ai essayé avec les display sur yes, j'ai également essayé de bidouiller la commande onload mais rien n'y fait.
Cliquez pour agrandir...

Un display ne se met pas à yes, pour masquer un élément c'est "none" et pour l'afficher tu le mets à vide : element.style.display='';
C'est la valeur par défaut, ça fait bizarre mais c'est pourtant bien ça qu'il faut indiquer.
 
Comme en ce moment je m'amuse avec prototype et scriptaculous, je me suis amusé avec le code du didacticiel. Et j'ai obtenu un truc (imparfait) qui devrait fonctionner avec tous les navigateurs compatibles avec proto, et qui a l'avantage de virer les onclick des tags dt (et fonctionne avec le truc du ssmenu3 affiché) :
Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" 
src="scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function initializejs(event){
    myShow($('smenu3')); // cache tous les dd sauf smenu3 puisqu'on le passe
    $$('dt').each(function(s){s.observe('click',deploy)}); // on observe les click sur les dt
}
function deploy(event){ // un dt a été cliqué
    var elt = event.element().next('dd'); //récupere le prochain dd
    myShow(elt,true); // invoque myShow
}
function myShow(){
    if($A(arguments)[1]) { // on a passé true donc on applique des effets whizzy
        var lastelt = $$('dd').find(function(elt){return elt.visible()}); // qui est visible?
        if (lastelt) new Effect.BlindUp(lastelt);// si quelqu'un on le cache
        if ($A(arguments)[0]) new Effect.BlindDown($(arguments)[0]);// si l'elt passé est défini
        }
    else {
        $$('dd').invoke('hide'); // on a pas passé true, on cache tout le monde
        if ($A(arguments)[0]) $A(arguments)[0].show(); //on montre smenu qui a été passé
    }
}
document.observe('dom:loaded',initializejs);// à peu pres equivalent à window.onload
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>

<dl id="menu">

		<dt><a href="#">Menu 1</a></dt>
			
		<dt>Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt>Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt>Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
	
</dl>

<div id="mentions">Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Retour / Back</a></div>

</body>
</html>
Il faut que prototype.js , scriptaculous.js et effects.js soient dans le meme dossier que le code précédent. (tu peux tout télécharger là
 
grumff a dit:
Un display ne se met pas à yes, pour masquer un élément c'est "none" et pour l'afficher tu le mets à vide : element.style.display='';
C'est la valeur par défaut, ça fait bizarre mais c'est pourtant bien ça qu'il faut indiquer.
Cliquez pour agrandir...

grumff, tu as trop raison même sur ce coup là, chapeau !!!!
Merci ;o)
 
Je me réponds pour corriger un truc sur le code précédent en cas de clic sur un élément déjà révélé :
Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" 
src="scriptaculous.js?load=effects"></script>
<script type="text/javascript">
<!--
function initializejs(event){
    myShow($('smenu3')); // cache tous les dd sauf smenu3 puisqu'on le passe
    $$('dt').each(function(s){s.observe('click',deploy)}); // on observe les click sur les dt
}
function deploy(event){ // un dt a été cliqué
    var elt = event.element().next('dd'); //récupere le prochain dd
    myShow(elt,true); // invoque myShow
}
function myShow(){
    if($A(arguments)[1]) { // on a passé true donc on applique des effets whizzy
        var lastelt = $$('dd').find(function(elt){return elt.visible()}); // qui est visible?
        if (lastelt) new Effect.BlindUp(lastelt);// si quelqu'un on le cache
        if ($A(arguments)[0] && ($A(arguments)[0] != lastelt)) new Effect.BlindDown($(arguments)[0]);// si l'elt passé est défini
        }
    else {
        $$('dd').invoke('hide'); // on a pas passé true, on cache tout le monde
        if ($A(arguments)[0]) $A(arguments)[0].show(); //on montre smenu qui a été passé
    }
}
document.observe('dom:loaded',initializejs);// à peu pres equivalent à window.onload
//-->
</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
dl#menu {
width: 15em;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray;
}
dl#menu li {
text-align: center;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>

<dl id="menu">

		<dt><a href="#">Menu 1</a></dt>
			
		<dt>Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt>Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt>Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>
				</ul>
			</dd>
	
</dl>

<div id="mentions">Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal">Retour / Back</a></div>

</body>
</html>
Ca fait un menu accordéon, bon désolé pour le HS, mais je voulais corriger (meme si ca n'intéresse que moi :-/ )

edit :
NB:
- il faut charger proto et scripty mais à mon avis, les bénéfices qu'ils procurent (notamment pour proto le unified event handling) dépassent les inconvénients de la surcharge (apres tout, il est toujours possible de zipper les scripts).
- je soupconne qu'avec un peu de taf, on pourrait convertir le script en un one-liner, cela dit, là il est lisible et simple. Et je manque d'experience avec proto.
 

Sujets similaires

T
ajouter un .swf quand on fait un site en "dossier local"
Réponses
1
Affichages
2K
Développement web
koeklin
K
A
Comment faire fonctionner mon swf dans ma page html ?
Réponses
4
Affichages
4K
Développement web
miz_ici
miz_ici
roodin
Intégration vidéo flv sur Dreamweaver
Réponses
3
Affichages
2K
Création vidéo
Fmparis
F
A
Problème Flash video avec Dreamweaver
Réponses
1
Affichages
2K
Développement web
momo-fr
momo-fr
biomechanical
site full flash en plein écran...
Réponses
3
Affichages
3K
Développement web
pb88081
pb88081
Haut Bas
Back