5568 sujets

Sémantique web et HTML

Bonjour,

Je suis en train de réaliser un site et j'aimerai si possible éviter
l'utilisation d'IFRAME.

La seule réelle utilité que j'ai à me servir d'une iframe, c'est simplement
par rapport à l'animation Flash qui permet la navigation générale. Sans
IFRAME, l'animation se recharge à chaque nouvelle ouverture de page, ce qui
fait un effet de clignotement qui n'est pas terrible d'un point de vue
esthétique.

Pour le moment, j'ai simplement trouvé, la solution de l'IFRAME

En me rendant sur ce site http://www.katiemelua.com/index2.html et en
enregistrant la source, je me suis rendu compte qu'il utilisait également
des iframes, mais que celle ci ne créait pas d'ascenseur et était extensible
automatiquement. J'ai essayé de reproduite le même code, sans obtenir le
résultat voulu.

Est-ce que quelqu'un connait-il une petite astuce pour y arriver à quelque
chose de semblable ?

Voici globalement les zones de mon site


Je souhaite donc rendre la zone de texte extensible en fonction de la
longueur des pages sans avoir l'apparition d'ascenseur et s'en avoir mon
animation Flash qui s'exécute et clignote à chaque ouverture de page

Merci beaucoup upload/12438-zones.gif
Modifié par ArnoC (22 May 2007 - 14:09)
ArnoC a écrit :
Je souhaite donc rendre la zone de texte extensible en fonction de la
longueur des pages sans avoir l'apparition d'ascenseur

Pour ça c'est simple, il suffit de faire un bloc de contenu sans hauteur spécifiée...

ArnoC a écrit :
et s'en avoir mon animation Flash qui s'exécute et clignote à chaque ouverture de page

Là c'est plus compliqué. Si tu ne recharges pas l'animation Flash, c'est que tu ne recharges pas la page principale mais juste un élément de contenu (via une iframe, une frame ou encore via du contenu inséré en Ajax). Et si tu ne recharges pas la page principale, tu gardes la même URL dans la barre d'adresse. Donc toutes tes « pages » ont la même URL. Donc tu vas à l'encontre du principe 1 document web = 1 URL, et ça c'est problématique pour l'accessibilité et pour le référencement de tes pages.

Si en plus tu as un menu en Flash, tu cumules les handicaps.

Le conseil que j'aurais à te donner serait donc :
1 - Ne pas faire de menu en Flash, ou au minimum travailler la question des contenus alternatifs pour Flash (exemple : un menu HTML simple « remplacé » par le menu Flash via SWFobject... pas idéal, mais c'est déjà ça).
2 - Accepter le changement de document web, donc la disparition de la page en cours et chargement d'une page complète (le « vide » graphique pouvant être très court avec un site bien fait), et laisser de côté les frames et iframes (les utiliser pour des questions de confort visuel est à priori un mauvais calcul).

Voilà, désolé pour cette réponse qui n'ira sans doute pas dans la direction que tu aurais voulue. Smiley cligne
Bonjour,

Merci pour ta réponse

J'ai résolu en grande partie mon problème, en intégrant une iframe qui s'ajuste en fonction du contenu voici le résultat sur ce site http://www.ekotec.fr.

Cependant, il reste un hic qui se produit régulièrement sous IE (très rarement, il n'y a pas vraiment ce problème, c'est étrange). En fait, lorsque l'on clique sur un lien, la zone comporant le contenu s'agrandit, elle s'aggrandit de clic en clic Smiley smile Je n'ai pas du tout de problème sous Firefox, que faire pour y remédier svp ? Voici mon code

Merci pour votre aide


DANS LA PAGE CONTENANT L'IFRAME

<script type="text/javascript">
function adjustIFrameSize (iframeWindow) {
if (iframeWindow.document.height) {
var iframeElement = document.getElementById
(iframeWindow.name);
iframeElement.style.height = iframeWindow.document.height + 'px';
iframeElement.style.width = iframeWindow.document.width + 'px';
}
else if (document.all) {
var iframeElement = document.all[iframeWindow.name];
if (iframeWindow.document.compatMode &&
iframeWindow.document.compatMode != 'BackCompat')
{
iframeElement.style.height =
iframeWindow.document.documentElement.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.documentElement.scrollWidth + 5 + 'px';
}
else {
iframeElement.style.height =
iframeWindow.document.body.scrollHeight + 5 + 'px';
iframeElement.style.width =
iframeWindow.document.body.scrollWidth + 5 + 'px';
}
}
}
</script>



<iframe id="contenu" name="contenu" src="accueil.html" marginwidth="0" marginheight="0" align="middle" scrolling="Auto" frameborder="0" width="715"> <br />
Sorry your browser does not support Iframes. ekotec.fr makes extensive use of iFrames througout the site. In order to view it properly please update your browser.<br />
We recommend <a href="http://www.microsoft.com/downloads/searchdl.asp?" target="_blank">IE 5+</a> for both Mac and PC. Thanks!</font></iframe>


DANS LES PAGES DEVANT ETRE AFFICHES DANS LES IFRAMES


</SCRIPT>

</head>

<body onload="if (parent.adjustIFrameSize)
parent.adjustIFrameSize(window);MM_preloadImages('images/vignette-devis-2.gif')"
>
<script type="text/javascript">



POUR EMPECHER LE REFERENCE A INSERER DANS LES PAGES DEVANT ETRE AFFICHES DANS LES IFRAMES

<SCRIPT LANGUAGE="JavaScript">
<!--
if (parent.frames.length < 1)
{
document.location.href = 'http://www.ekotec.fr/index.html';
nom_iframe = "http://www.ekotec.fr/actualites.html";
}
//-->
</SCRIPT>

J'ai également attaché à ma page principal deux fichiers javascript qui comportent les codes suivants

ieupdate.js
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects.outerHTML = theObjects.outerHTML;
}


iframessi.js
/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["maincontent"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all Smiley iframeids : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
Juste une petite remarque : ta technique de l'i-frame présente toujours le problème d'url dont parlait florent, et d'un (à mon avis plus grave dans le cadre d'un site pro) autre qui est lié : Celà ne permet pas au site d'être référencé correctement dans les moteurs de recherches.

Dans l'idéal, je te conseillerais de refaire ta bannière flash en javascript : les fondus entre les images et les menus déroulants sont tout à fait faisables, du moins pour les navigateurs récents (pour les plus vieux, il faudra se passer de transparence).

Tu peux aussi te poser la question de savoir si cette bannière animée apporte quelquechose. perso je la trouve gênante : je n'arrive pas à me concentrer sur le texte que je suis en train de lire, si il y a un gros contenu animé 100px plus haut.



Vala vala. Après si ça correspond à la demande d'un client ou que tu trouve que la bannière flash apporte quelquechose et est mieux en flash, l'i-frame est en effet la solution la plus simple.
Bonsoir,
J'ai lu quelque part qu'on pouvait référencer les pages des iframes via un petit script java.

@+ Smiley cligne
@rno
@ArnoC

Merci d'éditer ton post pour présenter lisiblement ton code à l'aide de [code ] et [/code ] (sans espaces).
@rno a écrit :
Bonsoir,
J'ai lu quelque part qu'on pouvait référencer les pages des iframes via un petit script java.

@+ Smiley cligne
@rno


Attention, certains moteurs n'utilisent pas le Javascript (Java/javascript ce n'est pas la même chose).
@rno a écrit :
Oops, mon clavier a fourché !
Je voulais dire javascript

À priori, il ne me semble pas que les moteurs interprètent le Javascript. Il me semble aussi que les moteurs sont tout à fait capables d'indexer le contenu d'un site construit avec des frames (du moins si on évite les imbrications de frames, peut-être). Le principal problème de référencement vient du fait que les pages sorties en résultats du moteur de recherche seront des pages internes, donc des morceaux de sites (exemple : un contenu sans en-tête et sans menu).

Le script Javascript sert alors à rediriger les utilisateurs qui arrivent directement sur ces pages vers une page complète du site. C'est une rustine, mais c'est déjà ça.