blog

Vestiges d’un CSS Guru

Billet

5 bonnes pratiques CSS

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

  1. Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
  2. Bien notifier qu’un lien est en display:block
  3. Ajouter un background-color avec le background-image
  4. Utiliser le position:relative en dernier recours
  5. Mettre un id au body

Lire la suite →

Billet

thesixtyone : une aventure musicale

the sixty one : a music adventure

Je vous présente mon dernier site musical préféré : thesixtyone

Le concept

C’est une sorte de jeu où l’utilisateur (nous) peut gagner et attribuer des points à des morceaux de musique, ces derniers étant proposés par nous aussi. On écoute les chansons (au moins 1 minute avant de pouvoir donner des points), et si on aime bien, on “bump“, ce qui augmente le score de la chanson. Au départ, on ne peut “bumper” qu’une seule fois, mais au fur et à mesure que notre “level” augmente, on peut bumper plusieurs fois la même chanson Un Digg-like pourrait-on dire, mais Digg n’a pas inventé le vote (comme diraient les Diggers eux-même…).

“Un jeu ? C’est pas sérieux comme site alors !” me direz-vous. Je ne pense pas que vous soyez si bornés: le contenu musical du site est très intéressant… Une particularité étant que l’on peut s’inscrire en tant qu’auditeur ou en tant qu’artiste. Dans ce dernier cas, on pourra uploader nos propres morceaux, et ainsi les faire découvrir à la communauté.

Le contenu musical

On y trouve beaucoup d’indie et alter rock, de l’électro, de la pop, du hip hop…

Il y a des artistes connus :

  • Daft Punk
  • Arcade Fire
  • Feist
  • Nada Surf
  • Radiohead
  • Klaxons

Il y a surtout énormément de remixes (écoutez le “1,2,3,4” de Feist remixé par Van She) et de reprises (Radiohead qui reprend le Headmaster Ritual des Smiths !!!). Chaque jour offre son lot de nouveautés.

Sur la page d’accueil, il y le Rack, petit panel de chansons d’artistes intéressants mais inconnus. Ils sont mis en évidence pour que les auditeurs y jettent un coup d’oeil, et ça fait gagner des points.

Fonctionnalités

L’interface est claire et pratique. Il y a une utilisation intéressante d’Ajax qui permet beaucoup de fonctionnalités :

  • on peut lancer la lecture d’un morceau et naviguer sur le site sans que la chanson ne s’arrête
  • des infos bulles s’affichent régulièrement en bas à droite de l’écran pour nous informer sur notre compte, nos points, de nouveaux artistes, des infos sur le morceau qu’on écoute (ex: “C’est Jack Johnson que l’on entend ici” alors que c’est le morceau de quelqu’un d’autre)
  • acheter les morceaux
  • créer sa playlist facilement

Bref, du contenu intéressant, généré par les utilisateurs, de la très bonne musique, et des fonctionalités sympas : thesixtyone me ravit.

Billet

Prémices du HTML 5

Ca faisait quelques temps que je voulais en parler. Cela fait suite à cet article de “A List Apart” : A Preview of HTML 5, dont ce post est entièrement inspiré.

Voici donc des infos sur le HTML 5. Cela correspond aussi au XHTML 5 (à la différence que ce dernier est exprimé en XML, ce qui apporte son lots de variations), qui passerait de la version 1.1 à la version 5 (et coller à celle du HTML). Bien évidemment, tout ceci n’est pas encore clairement défini, ce sont juste des versions alpha (et encore) développées par le W3C et le WHATWG.

Structure d’une page

Pour l’instant, les balises existantes définissent des titres, des paragraphes, des liens, des emphases, des abbréviations… Mais lorsqu’il est question d’établir les grandes parties d’une page, on doit se tourner vers l’inévitable balise générique : <div> (qui amènera l’horrible expression “coder en div”), balise qui ne signifie et ne représente rien. Que ce soit le header, le footer ou la sidebar, n’ayant pas autre chose sous la main, on utilise des <div> par défaut, auxquelles on applique des id spécifiques.

Le HTML 5 corrigera tout ça. On aura droit à des nouvelles balises très utiles :

  • header
  • nav
  • article
  • section
  • aside
  • footer

La structure d’une page pourra ressembler à ceci :

<body>
  <header>Bienvenue</header>
  <nav>Accueil - A Propos - Contact</nav>
  <article>
    <section>
      Prémices du HTML 5
    </section>
  </article>
  <aside>Catégories</aside>
  <footer>bbxdesign 2008</footer>
</body>

Plus léger et plus lisible. Il faut noter que dans sa syntaxe, une balise <article> pourra regrouper plusieurs balises <section>, ces dernières correspondants à des sous-parties d’un article.

L’intérêt n’est pas seulement pour l’intégrateur du site, mais aussi au niveau des moteurs de recherches. A l’heure actuelle, un moteur ne peut en aucun cas savoir que différentes parties existent dans une page. Il ne peut pas hiérarchiser ou utiliser ces parties.
Ces véritables balises de page pourront le permettre. Ensuite, libre alors aux moteurs de les interpréter à leur façon.

Question accessibilité, ces balises seront très utiles. La page étant bien hiérarchisée, on pourra facilement naviguer et sauter des parties, aller d’une section à une autre… Il suffira d’adapter les outils à cette nouvelle structure.

Balises Multimédia Audio et Vidéo

Lorsqu’il s’agit d’audio ou de vidéo dans les pages web, on pense tout de suite et exclusivement au lecteur Flash. Il s’est imposé par sa légèreté, ses fonctionnalités (streaming, multimédia…), son design. C’est tout simplement le seul moyen de partager de l’audio et de la vidéo facilement, avec des unités de contrôle, et une grande rapidité.

HTML 5 proposera une alternative grâce à ses balises <video> et <audio>. Par exemple, pour la vidéo on pourra définir :

  • la source
  • les dimensions
  • l’image de preload
  • le type de fichier
  • des contrôles

Bref, ça sera le strict minimum, histoire d’avoir la possibilité de lire des fichiers multimédia sans passer par Flash (surtout lorsqu’on ne le maîtrise pas).

D’autres nouvelles balises

Un petit tour sur le site du W3C permet de connaître quelques autres nouvelles balises qui vont venir enrichir le panel :

  • <dialog> : pour une conversation
  • <meter> : pour des unités de mesure
  • <time> : pour l’heure
  • <datagrid> : une représentation intéractive d’une arborescence ou de données tabulaires
  • <output> : pour définir le résultat d’un processus, par exemple celui d’un script

La liste des balises (et des attributs) s’agrandit pour mieux nous aider en tant que développeurs (facilité, flexibilité, lisibilité) mais aussi en tant qu’utilisateurs (accessibilité, intéraction, simplicité).

Sources :  A Preview of HTML 5 , HTML 5 differences from HTML 4

Billet

Génial tour de magie : les couleurs des cartes changent

Mmh, un énième tour de magie avec des cartes. Banal me direz-vous ? N’en soyez pas si sûr. Regardez la vidéo d’abord, puis lisez la suite.

Spoiler :
[spoiler]Et oui, vous l’aurez remarqué, ça n’a rien à voir avec la couleur des cartes, mais plutôt celle de tout le reste. J’avoue ne pas l’avoir remarqué du tout, mon attention étant focalisée (et c’est le but) sur la réalisation du tour, qui n’est en finalement pas un.[/spoiler]

Billet

Panorama de New York en QTVR

Panorama de Times Square

Vous connaissez le QuickTime Virtual Reality, plus connu sous son sigle : QTVR. C’est un format d’image où l’on peut regarder à 360° dans tous les sens. J’avais déjà expérimenté quelques fichiers de ce type mais celui-ci est le plus bluffant que j’ai pu rencontrer : Times Square à 360°. L’auteur a ajouté du son pour agrémenter l’illusion.

Admirez la qualité de l’image, sa fluidité. Vous pouvez librement vous déplacer avec la souris, zoomer avec Shift et dézoomer avec Ctrl. On s’y croirait.