Aymeric Jacquet, Me, Myself and I…

Teasing pour le prochain exercice

Version « simple » de l’exercice :

Version « compliquée » :

En fait le deuxième niveau, c’est parce que je viens enfin de réussir à réaliser ce que je voulais.

Pour rappel, il s’agit ici d’exercice HTML/CSS (avec un peu d’image aussi), sans une once de javascript.

Voila donc ce qui vous attend pour le prochain exercice, Avec une version simple et une version pour les « cadors ». ;)

Aymeric Jacquet

17 réponses à “Teasing pour le prochain exercice”

  1. Là j’ai pas tout compris :-))

    S’agit il de « générer » un comportement utilisateur hystérique ?

    Ou bien de « gérer » un comportement utilisateur hystérique ?

    Si’l s’agit de générer alors là ça va vraiment être rigolo hihihi…

  3. <Mode Laurent Denis>Grmbl. CSS pas faits pour ça. Mauvaise accessibilité. Utilisez donc du Javascript au lieu de perdre du temps à des bêtises.</Mode Laurent Denis>

    Mais comme c’est un exercice et qu’il est entendu que l’on n’utilisera pas de tels enfantillages « pour de vrai » (n’est-ce pas ?), on va s’amuser un peu. ;)

  4. Je suis tout à fait d’accord avec Florent…

    … Pour générer des comportements utilisateurs hystériques ben javascript ya pas mieux LOL

    cui cui suis parti ;-)

  6. C’est peut-être accessible dans un certain nombre de contextes d’utilisation, mais ça bloquera probablement dans d’autres. Je suppose que la solution envisagée doit être « moyennement accessible », mais certainement pas optimale.

  7. Petite précision,

    mes commentaires n’en étaient pas vraiment mais plutôt du grand n’importe quoi ;-)

    Art dans lequel j’excelle :-))

    Concernant l’accessibilité, et plus sérieusement cette fois.

    On sait que l’utilisation d’images en css à la place d’un texte pose facilement de sérieux problèmes et s’agit donc d’être très vigilant.

    Seulement voilà pour être vigilant, encore faut il affronter la chose elle même.

    Ce sujet court beaucoup ces derniers temps et l’ambiance est au « n’y pensez même pas » sur un mode de plus en plus catégorique et quasi normatif surtout quand on y rajoute des pseudos considérations « sémantiques » qui n’ont au passage rien à voir avec cette affaire.

    Donc vas y Aymeric, ce sera intéressant de travailler là dessus.

  8. En cas de désactivation des images par l’utilisateur, en cas de non chargement des images (lenteur du serveur), en cas de non chargement des images par un navigateur spécifique (exemple : un terminal mobile), en cas de désactivation des couleurs de fond (ce qui désactive aussi les images de fond), etc.

    Les techniques de remplacement d’image posent nécessairement des problèmes d’accessibilité. Celle qui utilise text-indent est une des moins pires, mais conserve quelques problèmes. Lorsqu’une image présente une information (en particulier lorsque l’image porte un texte), celle-ci, pour être aussi accessible que possible, doit être une image de contenu, présente dans le code HTML et avec une alternative textuelle pertinente.

    La raison en est simple : c’est la configuration standard, décrite par les spécification (élément img avec attribut alt), et donc celle à laquelle les différents outils d’accès au contenu (navigateurs graphiques ou non, lecteurs d’écran, navigateurs pour terminaux mobiles, aides logicielles…) s’adapteront pour offrir à leurs utilisateurs le meilleur accès possible au contenu.

    Les techniques de remplacement d’images sont sous-optimales car elles se basent sur des contextes d’utilisation particulier : la technique du display: none marche parfaitement pour un utilisateur « lambda » de navigateur graphique sur un ordinateur conventionnel. Si on prend en compte un deuxième type d’utilisateur (les aveugles utilisateurs de lecteurs d’écran), on bannira le display: none problématique pour utiliser plutôt un text-indent un le positionnement absolu. Du coup on est content : on a pensé à deux utilisateurs-type différents, qui auront tous les deux accès au contenu. Mais comme on a triché avec la logique des langages HTML et CSS pour arriver à nos fins, il y a forcément des cas d’utilisation où ça ne passera pas. Tout simplement parce qu’on a conçu l’accessibilité comme une somme de réponses spécifiques à des problèmes particuliers, ce qu’elle n’est pas.

    Ah oui, à propos de Javascript également : je n’avais pas réfléchi au problème du chargement d’une librairie-couteau suisse. Quand j’ai eu moi-même recours aux techniques de remplacement d’images via CSS, c’était surtout parce que ça m’épargnait l’apprentissage de Javascript, argument que l’on retrouve souvent sur les forums d’Alsacréations (aux côtés de « Javascript çayleumal »). Il me semble que si l’on connait un peu Javascript on peut tout simplement coder ses propres fonctions pour ce type d’effets, sans recourir à toute une librairie, et réutiliser ces fonctions perso de projet en projet. Cela représente donc un investissement en temps acceptable… la seule chose demandant un investissement conséquent étant l’apprentissage des rudiments de Javascript.

    Je précise que je n’ai pas encore fait cet apprentissage (faut que je m’y mette, hé !).

  9. Je vais me permettre de rebondir un peu sur vos commentaires.

    A propos de Javascript : Je suis d’accord sur le fait que l’on puisse réaliser quelque chose de plus fluide en javascript, mais bien souvent au prix de l’installation d’une bibliothèque lourde et d’un code d’ »application » en général aussi lourd. A la phrase : « pourquoi le faire comme ça alors qu’on peut le faire en javascript ? » Je repondrai : « pourquoi le faire automatiquement en javascript si on peut s’en passer ? »

    De plus, ce type de construction peut permettre une alternative honorable en cas de désactivation de javascript.

    A propos d’accessibilité : La source de ce que vous voyez, c’est une liste non ordonnée de liens, ni plus ni moins, ça fonctionne à la souris, ça fonctionne au clavier, ça se lit sans problèmes avec jaws. certes, il y a manipulation du flux HTML mais pas forcément pire qu’autre chose. Le seul problème que l’on pourrait soulever, c’est le positionnement des textes hors écran (via text-indent) qui peut poser problème en cas de désactivation des images.

  10. clb56 a écrit :
    « Ce sujet court beaucoup ces derniers temps et l’ambiance est au « n’y pensez même pas » sur un mode de plus en plus catégorique et quasi normatif »

    Si tu penses aux interventions sur ce sujet de Laurent Denis et moi-même sur Alsa, c’est vrai que ça a été assez catégorique et « normatif ».

    Un peu d’exaspération de sa part et un peu de zèle de la mienne, je suppose.

  12. Je savais bien que j’allais réussir à t’appâter Vinch.

    A propos d’accessibilité, vous connaissez mon point de vue sur le sujet, on peut faire « accessible » sans aller dans l’ultraspécialisation qui n’aboutira qu’à un ras le bol général des acteurs du web.

  15. Oui, j’ai loupé le précédent… et là je m’accroche pour revenir dans la course ! ;)

    J’ai un début de solution mais mes fichiers ne vont pas être valides, ça m’ennuie. Comme tu dis, attendons. :)

  17. Exactement ça JulienA, en fait c’est ce script qui m’a donné envie de tester un « équivalent » en pur html/css. Mais il faut bien avouer que l’on arrivera jamais à un rendu aussi fluide qu’avec l’usage de javascript.