5568 sujets

Sémantique web et HTML

Bonjour à tous !

J'ai ajouté la déclaration :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Aucun problème avec Firefox et Safari (IE ? Je n'ai que la version 5.5 pour Mac)

Lorsque j'ai voulu modifier celle-ci par la déclaration Doctype suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Firefox a grignoté une bonne partie de mon site. En revanche, dans Safari, il s'affiche parfaitement. Je suis obligée de revenir à l'entête de départ !

Avez-vous une idée du pourquoi...

Merci !
Sinon si tu n'avais pas de doctype, ton navigateur était en mode quirk et calculait la place des éléments différemment.
Bonjour Patidou,

Mon site n'est toujours pas en ligne, quelques réajustements à effectuer.
Je peux inclure une capture et le code si besoin est ?
Je viens de vérifier dans l'onglet général de Firefox... le navigateur est en mode de "respect des standards".

Il y a quelque temps, j'avais tapé la même déclaration Doctype... ça n'avait pas buggué !
Donc voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>figueline</title>
<meta name="description" content="Le portfolio de figueline : graphismes, photomontages et bien d'autres choses encore !">
<meta name="keywords" content="figueline, portfolio, graphisme, graphismes, graphics, photomontage, photomontages, montage photo, photos, peinture, abstractions, flash,">
<meta name="robots" content="index, follow" />
<meta name="language" content="fr" />
<meta name="distribution" content="global" />
<meta name="geography" content="France">
<meta name="expires" content="never">
<meta name="revisit-after" content="7 days">
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="js/AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css" media="screen">
	*{ 
		margin-left:20px;
		margin-right:20px;
		margin-top:70px;
		padding:0;
		overflow:hidden;
	}
	
	* {outline: none;}
	
	body{
		background: #000000;
	}
</style>


</head>
<body>
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'preview',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'preview',
			'bgcolor', '#000000',
			'name', 'preview',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'preview',
			'salign', ''
			); //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=9,0,0,0" width="100%" height="100%" id="preview" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="movie" value="preview.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#000000" />
  <embed src="preview.swf" quality="high" bgcolor="#000000" width="100%" height="100%" name="preview" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
</body>
</html>
upload/26703-Accueil.jpg

L'image rognée dans Firefox : manque... une partie du menu et du texte !
Je ne comprends pas bien la règle css avec le sélecteur universel (astérisque), ça impacte tous les éléments de ta page. Je ne sais pas non plus à quoi sert le script.

Amha tu devrais donner une hauteur et une largeur à ton anim flash, quitte à la centrer. Le code flash n'est pas valide, voici un code correct.

P.S. : c'est vraiment dommage de faire ça en flash, c'est inaccessible et ce n'est pas référencé par les robots indexeurs. D'agrès la capture d'écran, ça devrait pouvoir se faire facilement en html + css.
Patidou a écrit :

P.S. : c'est vraiment dommage de faire ça en flash, c'est inaccessible et ce n'est pas référencé par les robots indexeurs. D'agrès la capture d'écran, ça devrait pouvoir se faire facilement en html + css.

Salut Patidou,
d'après ce que j'avais compris Google (au minimum) indexe à présent les textes non vectorisés présents dans un swf (et les liens depuis pas mal de temps déjà) mais sans l'avantage de la sémantique HTML.
Il ne faut pas se fier à cette page ! C'est un portfolio dynamique avec tout ce que cela comprend...

Je vais revoir le code... j'ai déjà apporter certaines modif. Quant à l'accessibilité, c'est un sujet ô combien sensible et contreversé. Cela dit, des efforts sont faits :

Voici un site qui mise sur l'accessibilité : http://www.jkrowling.co.uk/
Ben moi je saurai jamais si il mise sur l'accessibilité... Mon navigateur rejette les pop ups (et j'en suis bien content, il m'en laisse quelques unes filtrer mais pas trop) donc j'ai pas le droit de naviguer sur le site... Accessible éventuellement, je sais pas si ce genre de blocage compte, mais pratique abslument pas !
Les "pop-up" sont assez pénibles, je l'avoue. Pour ce qui est de l'accessibilité... ledit site est assez bien fait... de quoi s'inspirer.

Je suis en train de faire une version de mon site en html ! Cela dit, pour le full site, il existe un panneau "Accessibilité" ! Je vais quand même tenter de créer un zoom ou tout autre pour augmenter la taille du texte !

Merci à tous !
figueline a écrit :
Je suis en train de faire une version de mon site en html !

Bienvenue dans le Web de 1999. Smiley smile

figueline a écrit :
Je vais quand même tenter de créer un zoom ou tout autre pour augmenter la taille du texte !

Ce n'est pas une technique d'accessibilité. Le zoom est géré nativement par les navigateurs web.
Je pensais à une "augmentation" voire une diminution de la taille du texte : A+ A-. Je suis à la recherche d'un tuto !!

Quant à la navigation, faut-il utiliser l'attribut "Accesskey" "Tabindex" ? C'est du tout nouveau pour moi !!!!!!
figueline a écrit :
Je pensais à une "augmentation" voire une diminution de la taille du texte : A+ A-. Je suis à la recherche d'un tuto !!

Cette fonctionnalité est implémentée nativement par bon nombre de navigateurs, à commencer par Internet Explorer et Firefox (depuis la version 3.0 de Firefox, il faut sélectionner zoom texte seulement dans Affichage > Zoom pour agrandir uniquement la taille du texte). Si tu veux implémenter les boutons A+ et A-, tu peux le faire en JavaScript (je ne connais pas de tutoriel à ce sujet, toutefois).
figueline a écrit :
Quant à la navigation, faut-il utiliser l'attribut "Accesskey" "Tabindex" ? C'est du tout nouveau pour moi !!!!!!

Il n'est pas obligatoire d'utiliser les attributs accesskey et tabindex. D'ailleurs, l'attribut tabindex peut poser des inconvénients en cas de mise à jour (cf. cet article sur ce site). Quant à l'attribut accesskey, il s'agit d'un essai non transformé et d'un grand échec de l'accessibilité du Web, si bien que les WCAG 2.0 ne l'évoquent plus dans ses techniques, de même que le référentiel Accessiweb depuis sa version 2.0.

Bref, si tu n'utilises pas ces attributs, ce ne sera pas grave.

Ce qu'il importe dans la navigation, c'est de respecter une cohérence (emplacement des menus de navigation), une sémantique (utilisation du couple ul / li pour un menu de navigation, en attendant HTML 5 et son élément nav) et de faciliter la navigation (ajout de liens d'évitement permettant un accès direct à une partie de la page : pratique pour ceux qui surfent avec leur mobile Smiley cligne ). Pour le reste, tu peux consulter la thématique navigation du référentiel Accessiweb.
figueline a écrit :
(IE ? Je n'ai que la version 5.5 pour Mac)

Pour information, la dernière version d'IE pour Mac est la 5.2.3, sortie en juin 2003 et il s'agit d'un navigateur décédé (son développement a été arrêté en 2003 et il n'est plus téléchargeable depuis janvier 2006). Bref, tu peux facilement oublier IE Mac, contrairement à IE sous Windows. Smiley smile
Modifié par Victor BRITO (12 Jun 2010 - 17:29)
Merci pour toutes ces infos.
Exact, pour IE, j'ai la version 5.2... j'ignore pourquoi j'ai avancé 5.5 !!!