Dakwamine

Étiquette : html

  • Balisage audio et video HTML5

    J’ai créé une page pour tester les balises <audio> et <video> ici : Test des balises <audio> et <video> de HTML5.

    Je vais petit à petit voir la progression des implémentations des différents navigateurs sur ces sources témoins. À l’heure actuelle, Internet Explorer ne gère aucune de ces deux balises, les autres navigateurs gèrent l’audio avec plus ou moins de réussite et le support de la vidéo n’est pas trop mal non plus, malgré l’obligation d’avoir deux versions différentes d’une même vidéo pour assurer la compatibilité du contenu entre Chrome, Firefox, Opera et Safari. Il y a également, dans le code source de l’article de la page, une vidéo en ogv. C’est la même que celle en ogg avec une extension différente.

  • PHP/HTML : Lecteurs vidéo Youtube et Blip XHTML

    Vous avez le code source ici : Lien vers le code

    Il s’agit d’un script PHP qui permet de sélectionner le bon lecteur en fonction de la plateforme. Par exemple, sur Flash, le player Blip va être un <video> tandis que sur PC et autres, il s’agira d’un <object> contenant un lecteur Flash.

    Le code HTML généré est valide XHTML 1.0 Strict avec un contenu de type text/html (je ne sais pas ce que ça donne avec application/xhtml+xml). Il va de soi que la partie <video> n’est pas validable. Mais cette balise ne se trouve dans le code que lorsque la vidéo est lue depuis un iPhone, iPod ou iPad, et il s’agit de la seule manière disponible d’avoir des vidéos dans Safari Mobile.

    Le script PHP fonctionne sur 5.3.0, mais il est simple de ne prendre qu’une seule partie du script pour correspondre à vos besoins, notamment des versions inférieures de PHP.

    Encore une chose, si vous êtes en HTML 4 ou 5, vous pouvez utiliser les <iframe> par défaut de Youtube et Blip. Mais attendez-vous à ne plus avoir le contrôle sur les changements de lecteurs, ni sur la justesse du marquage HTML.

    J’ai juste un dernier mot sur le sujet, je ne sais pas si le bout de code est compatible avec la nouvelle version du player de Youtube, celui en noir.

  • T&A — Un site superbe pour vous donner une autre approche du CSS

    *UPDATE* 08 août 2011
    Edition : précision dans le dernier paragraphe que les enfants pouvaient être flottants ou pas.

    Je voulais vous présenter ce blog que j’ai découvert récemment : http://matthewjamestaylor.com/ . Il y a de nombreuses petites astuces pour régler vos problèmes de colonnes à hauteur visuelle égale ou de positionnement du footer en bas de la fenêtre, entre autres.

    Les ajouts dans le HTML sont relativement négligeables, surtout si c’est pour avoir une compatibilité ascendante, parfois jusqu’à IE5.5, et sans Javascript !

    Par exemple, je me suis inspiré de cet article pour créer mes colonnes à hauteur visuelle égale des pages d’articles du prochain site de Fuu-Doh! : http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths.

    Concernant ce blog, j’ai presque la même approche du design de site en largeur pleine. Cela me fait plaisir de savoir que des gens essaient de lutter contre la tentation de la facilité avec les largeurs fixes. 🙂

    Pour finir, voici l’enseignement principal que j’en ai tiré : un élément flottant prendra toujours la hauteur de ses enfants, qu’il soit flottant ou pas…

    ps : Non, mon blog n’est pas un bon exemple de ce que j’aime vraiment 😛

  • Fuu-Doh! compatible IE6… ?

    Circonspect

    Bon, ok, je reviens sur une ancienne parole que je me suis fixé. Je vais faire un petit effort pour essayer de faire quelque chose de pas trop cassé sur Internet Explorer 6 concernant le nouveau site de Fuu-Doh!.

    Ce vieux navigateur ne représente désormais qu’une part relativement infime du marché des navigateurs, surtout dans les pays dont la population est ciblée par le site, en l’occurrence, la France et les pays francophones occidentaux.

    Nostalgique

    J’ai fait de nombreux choix techniques au départ comme l’utilisation du XHTML 1.0 Strict (en type text/html) et l’encodage ISO-8859-15. Il s’est avéré que ce n’était pas, selon moi, le meilleur choix si j’envisageais de maintenir aisément le site dans les années qui viennent. Je suis assez rapidement passé à l’Unicode UTF-8 pour l’encodage, bien plus international que l’ISO-8859-15, et j’ai finalement abandonné le XHTML 1.0 Strict au profit du HTML 5.

    Pragmatique

    Le HTML 5, même s’il est encore en draft (brouillon), permet, contrairement au XHTML, l’utilisation de ces bons vieux <iframe>, très utiles pour l’intégration dynamique des vidéos par exemple, laissant le choix à Blip ou Youtube de sélectionner le lecteur qui correspond à la plateforme sur laquelle le site est ouvert (j’utilisais des <object> ou des <video> selon la valeur de $_SERVER[‘HTTP_USER_AGENT’] pour intégrer mes vidéos avant, en XHTML).

    J’ai même récemment remis à plat le design complet du site, visuellement plus simple et plus pratique que le précédent, passant d’un site à largeur statique (980 px de largeur) à une page qui prend toute la largeur de la fenêtre, pour le plus grand plaisir des possesseurs d’écrans larges.

    Prudent

    Et donc, tous ces revirements m’ont fait réfléchir à nouveau sur mon choix du non-support de IE6. Au final, je pense que même si je ne vais pas officiellement faire le support de ce navigateur, je vais essayer de faire quelque chose de correct avec, autant que possible, dans le respect des normes et des syntaxes.

    Par contre, n’espérez pas que je vais faire le support d’IE5.5 ni d’autres navigateurs anciens ou très peu utilisés. J’ai déjà assez de travail pour contourner les bugs d’IE6. 🙂

    Formel

    Voici une liste non exhaustive de navigateurs que je décrète officiellement supportés par le prochain site de Fuu-Doh! :

    • Sur PC / Windows
      • Internet Explorer 9
      • Firefox 4
      • Opera 11
      • Apple Safari 5.0.3
      • Google Chrome 12
    • PC / Linux (Ubuntu)
      • Firefox 4
    • Safari sur iPhone et iPad

    La liste peut vous paraître courte mais je n’ai pas d’autres navigateurs ou plateformes actuellement sous la main pour pouvoir tester rapidement (à part IE6 auquel j’accède par le XP Mode de Microsoft Windows 7 Professional). J’envisagerai le support d’autres navigateurs au cas par cas, dès la fin de la production du site.

  • font-family par défaut des balises <input/>

    Juste un petit billet pour dire que le texte contenu dans les balises <input/> aurait de base un font-family dépendant de l’OS. Si vous voulez un font-family particulier, il vous faudra le redéfinir explicitement sur la balise elle-même, sur son id ou sa class (elle ne prend pas en héritage le font-family de son parent).

    input{font-family:nom_de_la_police;}

  • Petite note concernant les DOCTYPE

    Ne jamais oublier de mettre un DOCTYPE dans une page web et toujours vérifier qu’elle est complète ET correcte.

    J’étais en train de naviguer sur un site web lorsque j’ai remarqué que le centrage du site ne fonctionnait pas sur Internet Explorer 8. J’ai mis en place mes solutions gagnantes pour le centrage du futur site de fuu-doh.com dans l’outil de débogage intégré à l’explorateur (touche F12 pour votre information).

    Hélas, malgré mes nombreuses tentatives, cela n’avait pas fonctionné. Puis j’ai remarqué que la syntaxe n’était pas du XHTML, mais apparemment du HTML 4.0 Transitional. Ce n’est pas un mal en soi, j’ai juste dû m’habituer à ces horribles balises en majuscules. Puis j’ai sauvegardé en local cette fameuse page pour aller plus loin dans le débogage en supprimant tout ce qui n’était pas nécessaire, en ne laissant qu’un seul <div> à centrer. En vain.

    À ce moment là, je n’avais plus comme solution que de changer la page de HTML 4.0 Transitional vers XHTML. Et là, ça fonctionne ! Alors, en fait, ce n’est pas grâce au XHTML que cela avait fonctionné. Lorsque j’ai relu la version précédente, le DOCTYPE était… incomplet. Il manquait le lien vers la page du DTD situé sur le site w3.org . Ainsi, le fait de n’avoir que ça :

    … va empêcher le bon traitement de certaines fonctionnalités de la page, notamment le CSS et le fameux margin-left:auto et margin-right:auto qui centrent le contenu. Alors que le DOCTYPE suivant active de nouveau ces fonctionnalités particulières :

    En espérant rendre service aux rares malheureux développeurs de sites web qui sont tombés dans ce piège.