Compatibilité

[Maks]

Un article interessant sur ce qui nous attend avec le HTML 5 et le Xhtml 2 : http://xhtml.com/fr/future/x-html-5-versus-xhtml-2/

[Sephi-Chan]

Oui j'étais tombé dessus, et je dois reconnaître que ça m'avait bien plus, même les trucs qu'ils jugent pas cool, qui en fait ne me dérangent pas quand on voit ce que ça permet de faire.

Exemple : Ne pas utiliser <a> ne me dérange pas puisqu'on peut placer l'attribut href partout !
Perdre <img> au profit de <object> non plus.

Ce qu je ne comprends pas, par contre, c'est le cas de la balise <figure>, qui permet de légender un média (image ?)

Code :

<figure>
     <legend>Credit: Media Inc., 2007</legend>
     <img src="smith.jpg" alt="Photo: J. Smith" />
</figure>

On ne pourrait pas se servir de ça qu'avec un doctype X/HTML 5 ?


Sephi-Chan

[Maks]

Ceux sont des spécifications qui datent de février 2007, tout peut encore changer. Pour <legend> soit ça sera fait par le CSS soit ça sera directement ajouté.
Sinon pour les balises object et l'attribut href c'est une très bonne idée. Ce qu'ils ont trouvé pas cool c'est le fait de garder <a> et <img /> comme valides ceux qui peut prêter à confusion.

[naholyr]

Pour que l'ajout du javascript ne gêne pas l'accessibilité, il faut que ce ne soit qu'un ajout. Le fait que, si un évènement retourne false, le comportement par défaut de l'objet est alors ignoré aide énormément à ça.

1 : le choix du type de terrain
Tu stockes le terrain "courant" dans une variable de session côté serveur. Et pour changer le terrain courant, on clique sur un lien <a href="map.php?action=change_outil&outil=foret"> pour placer des forets, etc...
Tu insèreras par la suite le javascript en ajoutant la fonction qui va bien dans l'entête de ta page, et tu ajouteras simplement un évènement sur tes liens : onclick="change_outil('foret'); return false;".

2 : la modification d'une case de ta map
Au départ tu fais sans Javascript, c'est à dire que chaque case est cliquable avec un lien <a href="map.php?action=change_case&case=x,y"> qui modifie la case de la map «temporaire».
Même principe, tu vas simplement ajouter la fonction qui va bien dans l'entête, et ajouter un évènement onclick="change_case(x,y)".

3 : l'enregistrement de la map
Même principe hein, on va pas la refaire en boucle

Au final tu as à chaque étape commencé par faire ta page sans javascript, et tu as ensuite ajouté du javascript dégradable (dégradable parce qu'il n'est que facultatif pour le bon fonctionnement de la page). Celui qui n'a pas javascript activé pourra utiliser ta page en «mode dégradé» (chaque action entraîne un refresh de la table, old school quoi ), les autres auront tout le confort.

On peut même aller plus loin avec des librairies comme prototypeJS qui grâce à des sugars comme document.getElementsByClassName et addEventObserver permettent de ne pas ajouter de "onclick" ou autre, mais simplement d'ajouter ces contrôleurs «à la volée» au chargement de la page, selon la classe du lien par exemple. Mais c'est l'étape d'après

[joshua]

j'essaie au plus possible de ne mettre que du css pour eviter les effets de bords du javascript... mais parfois c'est pas possible