11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

Ce sujet fait suite à mon sujet précédent ("instruction GetElementById quand Javascript désactivé"), mais j'ai préféré le traiter séparément.

En fait, la désactivation de Javascript (par exemple sous FireFox ou Opera) inhime même l'accès au fichier Javascript indiqué dans l'instruction


<script type="text/javascript" src="Fichier_Javascript.js"></script>


de l'en-tête.

Ce qui fait qu'un code aussi minimal que


window.onload = function () {alert('Bonjour')};


placé dans le fichier javascript ne fonctionne pas !!!

Comment peut-il être alors question de Javascript non intrusif quand même l'accès au fichier Js externe est bloqué ?
(I am completely upset !)
Salut,

Le javascript non intrusif est le fait de faire du code javascript qui ne soit pas contenu dans le code html du type:

<a onclick="function(...)">


Quand une personne désactive le javascript c'est qu'elle n'en veut pas...Donc c'est normal que ,quelque soit le javascript , intrusif ou non, il ne s'exécute pas .
Merci de ta réponse

J'avais bien compris que le Javascript non intrusif consistait à éviter du code js dans le html.

Mais je pensais naïvement que Javascript pouvait être utilisé uniquement via le fichier js externe et que la désactivation de Js ne s'appliquait qu'au code contenu dans le html.

Snif !
cadbor a écrit :
Merci de ta réponse

J'avais bien compris que le Javascript non intrusif consistait à éviter du code js dans le html.

Mais je pensais naïvement que Javascript pouvait être utilisé uniquement via le fichier js externe et que la désactivation de Js ne s'appliquait qu'au code contenu dans le html.

Snif !


Non...J'imagine la galère des gens qui ne veulent pas de javascript ^^
Bonjour
Javascript ou Css n'agissent qu'en surcouches rajoutées : on peut donc, volontairement ou pas, s'en passer.
Un site de qualité propose donc un contenu intégralement accessible et utilisable sans l'un et/ou sans l'autre. Concevoir un projet web (une page, un site complet, même une appli) normalisé c'est proposer un flux Html se suffisant à lui-même, par dessus lequel Javascript rajoute des facilités (événementielles ou autres) et Css une certaine mise en forme.
Si la consultation/l'utilisablilité d'un site dépend de la présence impérative de l'un ou de l'autre on s'expose à des déboires de ce genre.
Donc le mieux à faire c'est de construire en premier son projet en pur Html, et quand il est abouti et fonctionnel on rajoute les couches Css et Js pour le rendre plus agréable, plus ergonomique, plus dynamique,etc.
Un Js non-intrusif c'est pas tant l'externaliser (fichier .js) que ne pas compter sur lui pour que tout fonctionne. A la limite, du Js *100% DANS Html* mais n'obérant pas l'utilisation est préférable à un Js externe mais 100% obligatoire pour pouvoir utiliser le site.
Arsene a écrit :

Donc le mieux à faire c'est de construire en premier son projet en pur Html, et quand il est abouti et fonctionnel on rajoute les couches Css et Js pour le rendre plus agréable, plus ergonomique, plus dynamique,etc.
Un Js non-intrusif c'est pas tant l'externaliser (fichier .js) que ne pas compter sur lui pour que tout fonctionne. A la limite, du Js *100% DANS Html* mais n'obérant pas l'utilisation est préférable à un Js externe mais 100% obligatoire pour pouvoir utiliser le site.


Merci de cette mise en ordre. Je comprends maintenant beaucoup mieux ce que doit être l'apport du Javascript et comment il doit être placé par rapport à la page html.

Pour ma part, a posteriori donc, je vais ajouter pour chaque utilisation des instructions Javascript "intégrées" (onclick="document.getElementById.style.display='block' ; " , onclick="parent.window.Nom_iframe.location='Page_html' ;" ...) une partie permettant de naviguer dans le site lorsque Javascript est désactivé.

Par exemple, pour faire apparaître par clic un bloc div positionné, l'instruction sera


<a href="Page_appelée_qd_js_désactivé.html" target = "_parent" 
onclick = "document.getElementById('id_du_div').style.display='block' ; 
return false;">Indication_du_lien</a>


où Page_appelée_qd_js_désactivé.html est une page recopiant la page courante et affichant le bloc div.

La gêne pour le visiteur est semble-t-il acceptable (page intégralement rechargée au lieu du bloc div apparaissant immédiatement).
De mon côté, cette solution demande de dupliquer la page avec le bloc div affiché. C'est acceptable aussi, quoiqu'un peu plus lourd à gérer.


Heureusement, mon site n'utilise que des instructions intégrées et n'appelle pas de fonctions Javascript proprement dites (en dehors des fonctions de survol MM_swapImage et MM_swapImgRestore placées par Dreamweaver, qui peuvent être remplacées par du code css).
cadbor a écrit :
De mon côté, cette solution demande de dupliquer la page avec le bloc div affiché. C'est acceptable aussi, quoiqu'un peu plus lourd à gérer.

Juste un bémol : fais gaffe quand même de ne pas te retrouver avec des centaines de pages dupliquée car les moteurs de recherche vont pas apprécier. Soit ajoutes les page doublons à ton fichier robots.txt, soit utilises la balise <noscript> pour indiquer le besoin de javascript, ou moins sémantiquement correct, pour émuler ton div.

Pour éviter d'avoir deux fois le contenu de ton div dans ton code html, tu pourrais même utiliser js pour transférer le contenu du <noscript> dans le <div> en question quand js est activé

Ou alors arrange toi pour que le div soit ouvert par defaut et js le masque juste ... ce qui semble être la solution la plus appropriée Smiley lol
Modifié par webdesign-fr (14 Aug 2009 - 23:53)
Salut,

tout cela est bien compliqué. Il suffit comme le disait Arsene d'écrire une page simple en html et de laisser le soin à JavaScript de surcharger le code s'il est activé. Un fonctionnement simple pour ce qui est des css est décrit ici. Par ailleurs c'est une très bonne idée d'utiliser un fichier externe car non seulement le code html n'en est que plus lisible mais en plus le fichier en question restera dans le cache du navigateur et optimisera les temps de réponse.

Articles à lire :
* Comment bien coder en Javascript.
* La gestion des événements en JavaScript.
Modifié par Heyoan (15 Aug 2009 - 12:04)
Bonjour

Merci pour ces indications que malheureusement mon niveau technique actuel ne me permet de comprendre que très partiellement.

Pour ce qui est du site que je suis en train de réaliser, la question de la duplication des pages est peut-être simplifiée dans la mesure où la page contenant les blocs div est une page graphique transformée en page Web par tranchage. Le tableau Web est donc exclusivement composé d'images.

Seuls les blocs div (6 au total, dont celui comportant les mentions légales) appelés par clic sur des images — et se superposant à la page de fond — contiennent du texte en quantité réduite. (Je me suis astreint à ne pas utiliser d'ascenseurs de façon à limiter drastiquement le contenu des blocs div.). La duplication des pages pour le cas où Javascript est désactivé me semble donc applicable et correspond à mes possibilités techniques.

Une seconde page, construite elle aussi à partir du tranchage d'une base graphique, contient un cadre gauche (défini par un iframe) listant une série d'items et un cadre droit (lui aussi défini par un iframe) dans lequel s'affiche la page correspondant à l'item sélectionné.

J'ai initialement programmé les liens du cadre gauche à l'aide de l'instruction


onClick="parent.window.Cadre_droit.location='Page correspondant à l'item sélectionné.html' "


qui, je m'en suis rendu compte par la suite, ne fonctionne pas lorsque Javascript est désactivé.

Ici, la duplication, pour le cas où Javascript est désactivé, consistera à appeler la page entière (dont toutes les cellules-images auront déjà été chargées, donc contenues dans le cache du navigateur), le remplissage du cadre droit étant réalisé par l'instruction html


<iframe name="Cadre_droit" scrolling="no" ... src="Page correspondant à l'item sélectionné.html">


La programmation d'un lien du cadre gauche sera donc :


<a href="Page complète correspondant à la sélection appelée quand Javascript est désactivé" 
onClick="parent.window.Cadre_droit.location='Page correspondant à l'item sélectionné.html' ;
return false;">


Dans cette approche, la page correspondant à l'item sélectionné n'est pas dupliquée. Seule change la façon de remplir le cadre droit qui contient cette page.

La technique de la duplication me semble donc là-aussi applicable.


Maintenant, si vous pouvez me proposer une solution plus élégante ou moins fastidieuse, et qui me soit techniquement accessible, je suis preneur. Smiley biggrin
cadbor a écrit :
Maintenant, si vous pouvez me proposer une solution plus élégante ou moins fastidieuse, et qui me soit techniquement accessible, je suis preneur. Smiley biggrin
Eh bien oui... mais il faudrait juste tout revoir ! Smiley biggrin

Cette façon de faire à base de TABLE et d'IFRAME est obsolète depuis déjà longtemps, de même que l'utilisation d'images "en tranches". Pour te donner une idée de la façon "moderne" de faire tu pourrais jeter un coup d'oeil à Construire un site sans tableaux et à Réalisation d'un design complet (XHTML / CSS) en 5 étapes.

Et encore une fois ta page devrait fonctionner complètement sans JavaScript ni css. Il n'y a donc aucun intérêt à dupliquer les pages ou le contenu (au passage double travail). Concernant les frames je t'invite à lire ce post. Elles sont parfaitement inutiles et posent en plus problème alors qu'un simple menu convient tout à fait...

Mais bon, pour être passé par là je sais que cela demande du temps de changer complètement sa façon de concevoir des sites. Cela dit ça n'est vraiment pas insurmontable et ça peut même être très plaisant. Smiley cligne


Edit: après relecture de ton post je me rends compte que tu n'utilises peut-être pas de tableau de mise en page mais comme tu parlais de "tranches" il est bien possible que tu utilises tes éléments DIV comme des TD (typiquement en leur donnant une hauteur height alors que généralement on les laisse s'étirer en fonction de leur contenu).
Modifié par Heyoan (15 Aug 2009 - 13:40)
Heyoan a écrit :
Eh bien oui... mais il faudrait juste tout revoir ! Smiley biggrin

Cette façon de faire à base de TABLE et d'IFRAME est obsolète depuis déjà longtemps, de même que l'utilisation d'images "en tranches".

[...]

Concernant les frames je t'invite à lire ce post. Elles sont parfaitement inutiles et posent en plus problème alors qu'un simple menu convient tout à fait...

Mais bon, pour être passé par là je sais que cela demande du temps de changer complètement sa façon de concevoir des sites. Cela dit ça n'est vraiment pas insurmontable et ça peut même être très plaisant. Smiley cligne


Edit: après relecture de ton post je me rends compte que tu n'utilises peut-être pas de tableau de mise en page mais comme tu parlais de "tranches" il est bien possible que tu utilises tes éléments DIV comme des TD (typiquement en leur donnant une hauteur height alors que généralement on les laisse s'étirer en fonction de leur contenu).


Merci tout d'abord de ces conseils de fond !

Concernant d'abord le tranchage et les iframe :

Les tableaux correspondant aux différentes pages ont été générés automatiquement par Illustrator en fonction des éléments que j'ai tranchés et qui doivent contenir des liens ou des pages html (dans le cas des cadres gauche et droit).

Les deux iframes "Cadre_gauche" et "Cadre_droit" me sont nécessaires pour y afficher des pages html (page de menu dans le cadre gauche, page de contenu dans le cadre droit). (Comment autrement afficher une page html dans une cellule de tableau ?)


Pour ce qui est des div :

Travaillant sur des documentations électroniques volumineuses, complexes, contenant un grand nombre de copies d'écran ou de figures explicatives et nécessitant un important niveau de précision, j'utilise couramment des popups complémentaires : une page contient les seules informations principales, les informations complémentaires étant affichées par des popups que l'utilisateur ouvre selon ses besoins. (Le libellé des liens est rédigé de façon à ce que l'utilisateur sache d'emblée ce que contient le popup.)

Cette approche permet d'éviter des pages longues, difficiles à lire, pour lesquelles il faut en permanence jouer de la molette de la souris. (Je m'astreins à ce qu'une page ne dépasse pas la hauteur d'un écran 19 pouces, ou au maximum à ce qu'elle nécessite qu'une seule action de molette.)
Elle permet aussi d'éviter de subir des ruptures de lecture continuelles en commutant sur une nouvelle page à chaque clic. (L'utilisateur reste toujours sur la page courante.)

J'ai repris cette philosophie pour mon site : des textes principaux courts, complétés brièvement par des div-popups minutieusement positionnés et dimensionnés — avec une hauteur fixe, ce qui m'oblige à me faire violence en limitant drastiquement la longueur du texte — que le visiteur ouvre s'il le désire (avec des libellés de liens qui indiquent explicitement le contenu du popup).

J'ai d'autre part délibérément choisi de ne pas utiliser de menu (mon seul menu est celui affiché lors du survol du logo et permettant de revenir à l'une des pages précédentes)


Pour ce qui est de la façon de concevoir le site :

Je dois impérativement terminer ce site avant la fin du mois de façon à pouvoir entreprendre une action commerciale soutenue dès la rentrée. (Je travaille à mon compte.)

Je n'ai donc pas la possibilité de revoir de fond en comble la conception du site. Ce qui m'importe maintenant, c'est qu'il fonctionne correctement le plus rapidement possible, que Javascript soit activé ou non, .

Lorsque le site sera enfin en ligne, j'envisagerai dans un deuxième temps la façon d'en optimiser le code ou la conception technique, en conservant toutefois mon approche des popups complémentaires qui, en quelque sorte, est ma marque de fabrique et à laquelle je tiens.


Donc, maintenant, je trace ! (La partie utilisant les fonctions "Javascript intégrées" fonctionne entièrement. Il me faut maintenant réaliser le complément pour le cas où Js est désactivé.) Smiley biggrin
Modifié par cadbor (15 Aug 2009 - 15:01)