Archive pour le mot-clef ‘HTML’

Qu’est-ce qu’un bon écran sur internet?

Dimanche 21 septembre 2008

Ceux qui me connaissent le savent: je suis passionné d’Internet. Je suis très intéressé par les technologies qui tournent autour de la partie la plus visible de l’iceberg, l’écran.

Internet est un réseau qui favorise le partage de l’information, permet l’accés à de nombreux services directement depuis son domicile (je pense notamment à la réservation de billet de train ou la banque à dstance), mais c’est surtout un réseau accessible à tous.

Ainsi les écrans se doivent d’être pensés pour un usage par tous… Ce qui n’est pas facile, ils doivent être:

  • Suffisamment clair pour permettre d’identifier en un coup d’oeuil le contenu principal de la page, le menu, la publicité…
  • Suffisamment simple pour offrir une navigation aisée, y compris à des personnes ignorant tout des technologies sous-jacentes ou à de personnes souffrant de handicap (voilà une partie de la population qui est trop souvent oubliée),
  • Suffisamment dynamique pour fluidifier la navigation (par exemple, permettre le rafraîchissement de zones de l’écran), ou satisfaire les plus technophiles des visiteurs,
  • Suffisamment souple pour permettre un affichage correct sur la quasi totalité des navigateurs du marché quelque soit la résolution ou la plateforme d’exécution (windows, macintosh, windows mobile, iphone…).

Je pense que pour remplir un maximum de critères il faut penser l’écran par couches successives:

  • Tout d’abord, une page internet, c’est du texte. Ce texte est décrit à l’aide de la syntaxe HTML. Il faut donc utiliser les bonnes balises pour décrire le contenu que l’on souhaite afficher (c’est-à-dire en fonction de leur sens sémantique et non pour le rendu graphique qu’elles offrent). De cette manière, quelqu’un qui utilise un navigateur texte, ou à synthèse vocale, pourra lire la page… et la comprendre sans avoir besoin de couleurs ou d’animation. De plus, le HTML doit être valide (c’est le minimum).
  • Il faut utiliser sans modération les styles (css). Cela permet de définir une charte graphique (taille, couleur, positionnement). Ce style ne doit pas être trop chargé, l’usage des feuilles de style permet d’uniformiser l’apparence du site et d’en simplifier la maintenance. Comme c’est un standard, l’affichage de la page est correct sur une grande majorité des navigateurs (toutefois, il faudra parfois l’adapter à certains navigateurs pour garder le site utilisable). De plus, le nom des styles utilisés doit être évocateur (utiliser encars_publicitaire au lieu bloc_bleu_police_12pt_vert_gras), de cette manière, les personnes lisant le html, ont une information supplémentaire pour le comprendre (et si la publicité venait à être écrite en rouge, le style à toujours un nom valide).
  • Ajouter du dynamisme à la page à l’aide de javascripts non intrusifs (c’est à dire, non indispensable pour l’utilisation de la page), ou grâce à des composants de type flash ou silverlight (si un de ces  composants offrent une fonctionnalité clé, alors une alternative “moins sexy” doit être offerte au personnes ne pouvant pas accèder à se contenu). Par exemple, un tableau HTML peut-être remplacé à la volé par widget histogramme écrit en flex, ou un menu HTML peut être rendu pliable/dépliable grâce à un composant javascript.
  • Il peut aussi être envisageable d’offrir des comportements évolués pour un sous-ensemble de navigateur, d’adapter la taille des images en fonction du média d’affichage (imprimante, téléphone, ordinateur…). Ces  comportements ne doivent impérativement pas être indispensable pour utiliser la page. Par exemple, un site sur mobile doit fonctionner pour tous les mobiles, cependant, s’il est affiché depuis un iPhone (téléphone à la mode en ce moment), il peut offrir des comportements évolués non disponible sur windows mobile ou androïd.

Avant de commencer à penser la couche de présentation, il est indispensable de se former sur les standards du web: visiter le site du W3C. Vous aurez accès à toutes les recommandations pour l’internet, l’internet mobile…

L’Internet doit rester ouvert à tous!

Pourquoi les sites pour iPhone sont une absurdité!

Lundi 28 juillet 2008

Je vois de plus en plus souvent apparaître des sites “Optimisé pour iPhone” ou bien “Designé pour iPhone”. Je ne comprends pas pourquoi

Depuis plusieurs années une armée d’utilisateurs, et plus particulièrement de développeurs web, s’élèvent contre Internet Explorer. Ils nous expliquent qu’il faut laisser les utilisateurs choisir le navigateur qu’ils souhaitent utiliser, etc…

Ils ont raison! Il n’y a rien de plus énervant que d’arriver sur un site qui ne s’affiche pas correctement car il n’a pas été conçu pour le navigateur avec lequel on l’affiche. L’importance donnée à IE, a poussé les utilisateurs à s’éloigner fortement des standards HTML pour aller vers un HTML spécifique à IE rendant ainsi l’utilisation de ce navigateur indispensable pour aller sur internet.

Firefox commence à percer (part de marché de 20%…), Opéra se développe lui aussi… Plus tous ceux que l’on ne site pas car peu répandu (je pense notamment au navigateur à synthèse vocal, navigateur texte, … Et tous les navigateurs permettant aux personnes souffrant d’un handicap d’accéder à internet). L’utilisation de multiple navigateur pousse les développeurs à appliquer les standards du Web (XHTML, CSS, JavaScript… non intrusif). Concevoir un site en respectant ces standards, ce n’est pas développer un site pour un navigateur donné, mais offrir un site qui aura une apparence correcte sur l’ensemble des navigateurs du marché (dans leur dernière version). Bien sur, pour un affichage parfait sur un navigateur donné (IE, Firefox, Opéra, Lynx…), il faudra parfois s’éloigner un peu des standards pour introduire dans le code quelques réglages plus fins…

Le web mobile commence à apparaître et on y voit se développer des pratiques que l’on combat sur le web normal. Si un site a été développé en respectant les standards avec des tailles relatives (ou au besoin, une feuille de style spécifique au media d’affichage, ie. appareils mobiles, ordinateur, imprimante…), alors le site s’affichera correctement sur la majorité des téléphones ou autres appareils portables! Alors qu’un site développé pour iPhone, pour IE mobile, etc… ne s’affichera correctement que sur l’iPhone (voir ne s’affichera pas sur d’autres appareils).

Certes le forfait apparu avec l’iPhone ont boosté le web mobile, mais ce n’est pas une raison pour oublier les terminaux fonctionnant sur Symbian, Android, Windows mobile…

Safari va-t-il devenir le prochain Internet Explorer en appliquant tous ce qu’on lui a reproché?

Google Doctype

Lundi 26 mai 2008

Google est décidément partout en ce moment! Après avoir sorti Google Health, le moteur de recherche s’intéresse maintenant à la santé des pages HTML.

Google Doctype se veut être un guide de référence (wiki) dans lequel on y trouve des articles sur:

  • Les balises HTML
  • Le javascript et plus particulièrement la manipulation DOM
  • Les CSS (Avec notamment les hacks les plus connus pour assurer une compatibilité sur tous les navigateurs… ce qui est assez utile!)

J’ai eu plusieurs fois l’occasion de réaliser des sites internet… Ainsi, Je me suis plusieurs fois heurté à des problèmes de compatibilité CSS entre les navigateurs ou j’ai eu à chercher de l’aide sur JavaScript, les standards… Il manquait vraiment un site de synthèse qui rassemble toute l’information!

Pour l’instant le projet n’en est qu’à ses balbutiements, mais il contiendra certainement rapidement tous les articles nécessaire pour faire un site web respectueux des standards et fonctionnant sur la grande majorité des navigateurs.

Bref, avec tout ça, même mon manager sera capable de faire un site web… Si si (Et c’est pas peu dire)! ;) (Spécial dédicace si tu me googlises, lol)