Airlune : exemples d'applications graphiques en HTML 5

Bonjour,

Je vous invite à découvrir le site : -http://airlune.free.fr

Ce site expérimental contient de nombreux exemples d'applications graphique en HTML 5 "pur" (elles ne s'exécutent que dans votre navigateur).

Les pages sont suffisamment structurées pour faire l'objet d'une adaptation rapide au XHTML dans le cadre d'une évolution à venir. Tout le site fonctionne avec les navigateurs implémentant les objets Canvas, à savoir : Firefox, IceWeasel, Chrome, Opera, Safari et IE10,

Si vous vous formez au Javascript et au HTML 5, n'hésitez pas à vous inspirer du code source entièrement accessible, celui-ci est relativement bien lisible et bien indenté.

A vos claviers !

Cordialement,
Modifié par Stéphanie W. (02 Nov 2013 - 22:50)

Bonjour et bienvenu,

En tout honnêteté si tu n'avais pas décris ton site avant et si j'avais ouvert cette page sans savoir ce que c'était, je serais partie sans demander mon reste. Ça bouge de partout et il est impossible d'identifier au premier coup d'oeil le "but" du site. Au niveau de la navigation c'est pareil, l'icone de "retour en arrière" n'est vraiment pas claire.

Jackdev a écrit :

Si vous vous formez au Javascript et au HTML 5, n'hésitez pas à vous inspirer du code source entièrement accessible, celui-ci est relativement bien lisible et bien indenté.

NON ! Non, et encore non. Je suis navrée, mais tu ne peux pas dire aux gens de s'inspirer de ton code source alors que tu codes en tableaux, avec de la balise center et oublies le doctype. Je suis désolée, mais là, non. Je ne sais pas ce qu'il en est du JS, mais pour ce qui est du HTML5, je te conseil de revoir le code source de tes pages et les valider avant de proposer aux gens de s'en inspirer. Validation de la première démo: 10 erreurs.

Je suis peut-être un peu dure et je m'en excuse, mais on ne peut pas proposer à des gens de s'inspirer d'un tel code sur un forum qui fait la promotion des bonnes pratiques.

Un petit effort pour faire correspondre tes démos aux standards HTML5 de 2013 ?

Bonjour Stéphanie W,

Et pourtant, il tourne ! C'est vrai qu'il n'y a pas de doctype, quant au codage à base de tableaux avec de la balise center, c'est quand même archi-standard et cela permet au contenu des pages de s'aligner automatiquement quelque soit la taille du navigateur, même lorsqu'il redimensionné en cours de route par l'utilisateur, mais si tu as d'autres techniques à préconiser, je me ferai une joie de revoir cette implémentation. On est d'accord, ce n'est pas encore du XHTML, et c'est promis, quand j'aurai le temps je soumettrai toutes les pages au validateur.

Ce qui est intéressant, ce sont surtout les animations en Javascript basées sur les objets Canvas du HTML 5 et la possibilité d'accéder facilement à leur code source embarqué dans les pages HTML. J'ai tout écrit avec un simple éditeur de texte, il faut bien reconnaître qu'il est assez laborieux de développer sans compilateur.

Que penses-tu de la nouvelle animation http://airlune.free.fr/Exp13/Html5Exp13.html ? Il me semble qu'on arrive aux limites du contexte 2d des objets Canvas. Il faudra bientôt passer au contexte Webgl, mais celui-ci n'est pas encore implémenté dans tous les navigateurs, alors que l'idée était aussi de pouvoir exécuter ces programmes en Javascript sur un maximum de plate-formes.

A++

Bonjour Jackdev,

Alors:

Jackdev a écrit :

Et pourtant, il tourne ! ...

ça tourne ne veut pas dire que c'est correct... .. sache que les navigateurs "interprètent" ton code et donc "autorisent" plus ou moins une marge d'erreur...

Jackdev a écrit :

quant au codage à base de tableaux avec de la balise center, c'est quand même archi-standard

Euh archi-standard... je dirai absolument plus depuis l'HTML 4.01!!! la balise center d'ailleurs n'est même plus supportée depuis!

Y a un truc que je comprends pas c'est quand tu dis:

Jackdev a écrit :

Les pages sont suffisamment structurées pour faire l'objet d'une adaptation rapide au XHTML dans le cadre d'une évolution à venir.

Pourquoi coder en HTML5 pour "évoluer vers l'XHTML"? l'HTML5 est la dernière évolution de l'HTML... donc pourquoi ne pas rester en HTML5? Ensuite tu dis que la page est suffisamment structurée pour le passage en XHTML... l'XHTML(frameset / transitional / strict) ne supporte pas la balise center et oblige le DOCTYPE ce qui fait défaut à ton exemple dont la sémantique est complètement à revoir. Pour le côté "responsive" de ta page, les CSS est là pour t'aider! sinon tu as aussi les framework tels que Bootstrap qui peuvent t'aider à adapter ton contenu aux différents supports...

Bref je suis désolé mais je suis tout aussi dur que Stéphanie W., tu ne peux pas proposer aux internautes de suivre ton exemple alors que seul le code Js est valide (mis à part qu'il n'est même pas commenté).. Je te conseillerai sincèrement de revoir tes normes HTML 5 et non XHTML car si tu cibles les personnes qui apprennent l'HTML5 comme tu le dis, la base est que ta page soit en HTML5 valide.

Pour ce qui est du contenu "pur" il est vrai que tes animations sont assez sympa

Bonjour Peter-L,

Ce site est surtout un laboratoire pour explorer les possibilités de la balise Canvas qui est exclusivement disponible en HTML 5, on peut difficilement se passer du Javascript pour dessiner ce qu'on veut. L'enrobage, je suis d'accord, c'est du vieux HTML, qui toutefois est toujours correctement interprété par la majorité des navigateurs (S'ils ne continuent pas à interpréter le HTML antérieur à la version 4, de nombreux sites ne fonctionneront plus, et ils vont perdre des parts de marché).

Certes, il n'y a pas de commentaires dans le code en Javascript, mais celui-ci est en clair et bien indenté, ce qui est déjà gentil de ma part. En tout cas, il y a ce qu'il faut pour qui veut comprendre le fonctionnement des méthodes et propriétés de l'objet Canvas disponibles sous contexte 2d : moveTo(), lineTo(), stroke(), fillText(), strokeText(), fill(), createLinearGradient(), addColorStop(), fillStyle, stokeStyle, DrawImage, getImageData().

D'autre part, en effet, ces pages ne font appellent à aucun fichier CSS et c'était fait exprès au départ afin que le code soit condensé en seul fichier, mais tu as raison, je pourrais utiliser des CSS pour éliminer quelques redondances. En revanche les styles sont définis en en-tête de chaque page, grâce à la balise style, ce qui produit le même effet :

<style type="text/css">
.cltd0{
font-family:Arial, Helvetica, sans-serif;
}
</style>

Bref, vous me poussez à modifier rapidement mes pages pour en faire du pur HTML 5, ce qui est une bonne chose, mais je vous avoue que ce qui m'a vraiment intéressé, c'était l'écriture des animations, au fait, que penses-tu de la dernière : http://airlune.free.fr/Exp13/Html5Exp13.html ? Ce qui est plaisant, c'est aussi de savoir qu'elle tourne (comme les autres) sous divers navigateurs : IceWeasel, Firefox, IE10, Safari, Chrome et Opera, et sous divers systèmes : Max OSX, Linux, Solaris, Windows, IOS, Android, en fait sur la plupart des ordinateurs du monde. Bien sûr il vaut mieux disposer d'une machine assez rapide, car tous les calculs sont réalisés en Javascript, et le dessin des faces est assez gourmand en CPU.

Voilà voilà,
A++

Jackdev a écrit :
en fait sur la plupart des ordinateurs du monde. Bien sûr il vaut mieux disposer d'une machine assez rapide, car tous les calculs sont réalisés en Javascript, et le dessin des faces est assez gourmand en CPU.

Et bien non. Tout le monde n'a pas un ordi rapide, tout le monde n'a pas un navigateur moderne, et les smartphones sont carrément à la torture.
Faire joujou, c'est une chose, mais de là à se proposer à des apprenant, sans pédagogie, ni explication, ni commentaire dans le code ... Sans parler du fait que la prise en charge d'HTML5 et js ne dépendent pas de l'OS. Dire que ça passe sur Solaris ou autre est un non sens.
Modifié par Hikingyo (29 Nov 2013 - 21:41)

Un peu de patience, d'années en années, ça tournera sur de plus en plus de bécanes, et tous les navigateurs implémenteront le HTML 5 dans sa totalité, quelque soit l'OS.

A+++

Jackdev a écrit :
Un peu de patience, d'années en années, ça tournera sur de plus en plus de bécanes, et tous les navigateurs implémenteront le HTML 5 dans sa totalité, quelque soit l'OS.

Je me réjouis! Avec des <blink>, des <marquee>, des <small>, des bgcolor et d'autres <center>! ça va être la fête à la saucisse!

Oui, déjà que c'est l' bazar, on est barré pour une bonne indigestion. Si ça continue, je vais me remettre au C++.