Dakwamine

Catégorie : Technologies

  • 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 😛

  • T&A — Bug de l’élément qui revient à la ligne alors que les largeurs définies en pourcentage de tous les éléments sont correctes (IE6)

    Bon, je me suis dit que je devrais être un peu plus bavard concernant mes astuces et recherches dans la programmation web. Et Virtools, peut-être aussi, mais pas tout de suite… sauf si vous êtes justement à la recherche d’une solution à un problème de Virtools, auquel cas, je me ferais un plaisir de vous répondre (gratuitement bien sûr).

    Je vais commencer par un petit bug étrange dans Internet Explorer 6 qui fait qu’un élément semble clignoter quand on redimensionne en largeur la fenêtre, alors qu’en fait, l’élément se balade entre sa bonne position et une position plus en bas de la page. Cela est dû, probablement, à un problème d’arrondi, surtout si le width est défini en pourcentage.

    Par exemple, width:50%; sur une fenêtre à largeur impaire, 351px par exemple, va donner une taille de 126px dans IE6 au lieu de 125.5px. Ce qui pousse l’élément flottant au-delà de la fenêtre, et donc le fait descendre dans la page.

    Après mes tests, j’ai deux colonnes, l’un à width:50%;, l’autre à width:49.9999%;. Et cela suffit pour que IE6 ne fasse plus chier à ce sujet.

    Évidemment, il va rester ce 0.0001% qui va se balader en trop on ne sait où. Mais vu que, dans mon cas, j’ai deux colonnes qui devaient être à 50% à la base (et donc ils prennent 100% de la largeur), cela fait que le prochain élément visuel dispose forcément de la propriété clear:both|left|right; pour annuler le flottement des éléments qui suivent.

  • 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;}

  • Classe PHP : underscore en premier caractère

    Formel

    Ici, je ne parlerai pas de l’utilisation du caractère underscore « _ » dans le cadre d’un nommage de type Camel-truc d’une classe, non pas parce que ce n’est pas intéressant, mais… non, en fait, je m’en fiche (pas d’utilité, personnellement).

    Petit rappel

    J’ai rédigé ce petit billet pour rappeler aux arpenteurs du net et développeurs PHP que le nom d’une classe peut débuter soit par une lettre, soit un underscore, comme le dit ce paragraphe de la page de description de la syntaxe d’une classe :

    Le nom de la classe peut être quelconque à condition que ce ne soit pas un mot réservé en PHP. Un nom de classe valide commence par une lettre ou un underscore, suivi de nombres ou de lettres ou d’underscores. Si on devait l’exprimer sous forme d’expression régulière, il s’agirait de [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*.

    Je n’avais pas trouvé l’info tout de suite, mais aucun site n’en faisait référence, ce qui ne m’a pas trop aidé. Il faut croire que personne ne songe à nommer des classes PHP avec un underscore en premier caractère… En tous cas, cela m’est très utile pour différencier mes classes, le underscore représentant un comportement alternatif. Vous comprendrez lorsque je mettrai en ligne mon modèle de conception de site.

  • Verdict sur les extensions lightbox testées : OK

    Il y a quelques jours, j’annonçais le test des modules d’extension pour avoir l’effet Lightbox sur mon blog.

    Le seul problème concerne l’ouverture des images par l’iPhone (pas testé sur d’autres appareils portables). Au lieu d’apparaître au milieu de l’écran, l’image se retrouve tout en haut de la page, aux bonnes dimensions certes. Pour s’accommoder de ce problème, il suffit d’ouvrir le lien dans une autre page pour l’avoir en plein écran, donc sans le lightbox.

  • Test d’une extension lightbox pour WordPress

    Entre deux sessions de composition d’une musique pour Fuu-Doh! (Vereen est d’ailleurs super exigeant, je le hais XD), j’ai installé hier une extension de WordPress permettant d’afficher les images dans un lightbox. Il y avait déjà cette fonctionnalité autrefois sur mon blog, mais je l’ai retiré à cause de la vétusté du script, n’ayant pas réussi à retrouver sur le site des extensions de WordPress.org une version à jour.

    Pour l’instant, les extensions que j’utilise pour réintroduire cet effet visuel ont l’air de fonctionner parfaitement. Pour ceux que ça intéresse, l’effet combine deux extensions :

    1. Shadowbox.js, qui contient le javascript principal ;
    2. Add LightBox & Title, qui permet d’ajouter automatiquement à la lecture un paramètre dans le contenu des articles pour activer l’effet.

    Ces extensions ont été installées sans problème sur WordPress 3.1. Mais comme d’habitude, prenez toujours vos précautions en pensant à sauvegarder vos bases de données et sites pour éviter les crashs (cela m’est déjà arrivé pendant une mise à jour d’une extension, résultant en un blocage non résoluble).

  • Test de l’USB3 via la carte fille ASUS U3S6

    Il est assez rare que j’enchaîne les articles de cette manière sur mon blog. Mais ce n’est pas parce que c’est rare que cela n’arrive jamais !

    J’ai acquis lors de la journée précédente une carte fille ASUS U3S6. Cette carte a la particularité d’ajouter deux ports USB 3.0 ainsi que deux ports SATA III (6Gbits/s) à un PC disposant d’un port PCI Express x4.

    Je dois vous dire que j’ai acheté cet article sans avoir pu m’assurer qu’il allait fonctionner car je ne savais pas que la référence du produit était U3S6. Bon, sur ce coup là, c’est moi qui ai fait le noob. Par contre, j’ai quand même cherché cette carte sur le site d’ASUS, et je ne l’ai pas trouvé avant mon achat. Finalement, il était rangé dans la partie des accessoires, dans la rubrique carte mères, alors que je m’attendais à une rubrique accessoires directement. Un peu étrange comme logique de rangement, selon mon point de vue. D’ailleurs, dans cette rubrique accessoires, il y a des articles assez insolites tels qu’une sorte de carte riser qui permet de dédoubler le nombre de ports PCI Express 2.0 x16, pour un total de 4 (le ROG Xpander), mais qui semble ne fonctionner que sur quelques cartes mères ASUS (en tous cas, je n’ai pas envie de tester un quad-SLI).

    Voici les détails techniques apparaissant sur le site web d’ASUS (spécifications complètes sur le site du fabricant) :

    Spécifications techniques de la carte ASUS U3S6
    Internal Connectors 2 x SATA 6Gb/s ports support of up to 2 SATA disk drives.
    Backward compatible with SATA 3Gb/s and SATA 1.5Gb/s hard disk drives.
    External Connectors 2 x USB 3.0 ports.
    Backward compatible with USB 2.0/1.1 interface.
    Interface PCI Express x4 interface
    Compatible with PCI Express x4, x8, and x16 slots
    Configuration Supported AHCI Mode
    Operating Systems Supported Windows 7/Vista/XP 32/64bit
    Features True SATA 6Gb/s & USB 3.0: Native support PCIe Gen2 bandwidth
    Support Hot Plug function
    Support Native Command Queuing (NCQ)
    Accessories 2 x Serial ATA 6Gb/s cables
    1 x Support CD
    1 x User manual
    Form Factor 4.8”x 3” (12.2cm x 7.6cm)

    L’information qui m’intéressait était celle qui concernait les ports PCI Express compatibles avec la carte. Ainsi, la carte est en train de fonctionner sur ma carte mère Gigabyte GA P55M-UD2 sur le 2ème port PCI Express x16 (le grand port qui fonctionne en x4 au final). Et le résultat, en ce qui concerne l’USB 3.0, est plutôt convaincant.

    À ce sujet, j’ai pu tester les différences de débit entre une connexion d’un disque dur Lacie Rikiki USB 3.0 1TB sur un port USB 2.0 et un port USB 3.0.

    Avantage pour l’USB3.0. Au niveau du temps de copie d’un gros fichier de 1.23Go vers le disque externe, l’USB 3.0 permet un transfert de 23 secondes alors que l’USB 2.0 le fait en 42 secondes. Mais je me demande si la nature même du disque SAMSUNG SpinPoint HM100UI embarqué dans le Rikiki ou bien son contrôleur de disque ne fausse les résultats.

  • 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.