blog

Vestiges d’un CSS Guru

Catégorie : Multimédia

Statut

Parce que Wat.tv appartient à TF1, il est utilisé comme lecteur vidéo par défaut de ce dernier (pour les directs notamment) et d’Eurosport (propriété de TF1 aussi). Mais ce copinage est néfaste pour les deux chaînes de télé : le lecteur Wat.tv est de loin le plus lent que je connaisse (plus lent que Vimeo, c’est dire…). Ou lorsque la raison d’un copain est plus forte que la raison tout court.

Billet

Lecteur de PDF exportable, par Google

Le blog non officiel Google Operating System a découvert une feature cachée de Google Docs, à savoir la possibilité d’avoir un lecteur de PDF dans sa page web, grâce à Google Docs.

En fait, c’est une iframe qui pointe vers Google Docs, avec en paramètre de l’url et bien l’adresse du fichier PDF.

<iframe src="http://docs.google.com/gview?url=http://www.adobe.com/devnet/livecycle/articles/lc_pdf_overview_format.pdf&embedded=true" style="width:500px; height:400px;" frameborder="0"></iframe>

Billet

L’iPhone n’aime pas les podcasts

A voir les podcasts gérés par iTunes, on pourrait croire que l’iPhone/iPod sait bien les gérer aussi. Mais non.

Une petite liste de désagréments :

  • les chapitres des podcasts n’apparaissent pas en entier
  • pas de Cover Flow pour les podcasts
  • on ne peut regarder le contenu d’un podcast sans le lancer automatiquement
  • lorsqu’un podcast se termine et passe au suivant, la liste des chapitres ne se rafraichît pas (mais le titre oui)
  • le Shuffle (déjà très ennuyeux par défaut) ira piocher dans les albums mais ne passera pas par les podcasts

C’est peut-être le format spécial des podcasts qui les rendent si peu pratiques. J’espère que le firmware 3.0 corrigera ces défauts, qui ne me semblent pas insurmontables.

Billet

Prototype de l’interface de Firefox 3.2

firefox-32

Information Architects (les auteurs de l’excellent Web Trend Map) ont réalisé un mockup de ce que pourrait être l’interface d’un prochain Firefox. Ils avaient déjà été consultés en 2000 pour les débuts de Firefox et ils avaient annoncés: “Onglets”. Aujourd’hui, ils disent “Oubliez les onglets!”

“Forget Tabs!”

Les indispensables onglets du navigateur (introduits en 2000 par Opera 4) seraient dépassés. A priori, leur utilité décroit à partir de 8 onglets ouverts, notamment à cause de leur hétérogénéité (il y a peu souvent un lien entre deux onglets). L’organisation se ferait par dossiers.

J’avoue être peu enthousiaste à cette disparition des onglets parce que j’ai une forte tendance à en ouvrir beaucoup simultanément. Par exemple, je suis actuellement à 18 onglets et tous me sont utiles. Peut-être pas en même temps, mais sur une période d’une heure, je les visite tous.

Navigateur = Système de fichiers multimédia

Le navigateur est davantage un système d’exploitation qu’une application d’affichage des données.

Le web n’a pas arrêté d’évoluer et aujourd’hui, on y retrouve les mêmes éléments que sur un ordinateur personnel: applications (mail, management, utilitaires, jeux), multimédia (vidéo, photo, musique), documents (word, excel, powerpoint), communication… Je balance un peu en vrac les différents domaines mais vous voyez l’idée. On peut faire énormément en ouvrant uniquement son navigateur. Et si le cloud computing se démocratise, ça ne saurait que se confirmer.

Avec cette idée en tête, Information Architects voit Firefox gérer le web comme iTunes gère la musique. Le logiciel s’occupe de tout organiser et l’internaute n’a plus qu’à trouver facilement ce qu’il cherche, d’une manière ou d’une autre. Le but est d’accéder le plus rapidement possible à ce que l’on veut.

Ceci reste un prototype, une approche radicale qui change totalement l’utilisation d’un navigateur. A tester.

Billet

Guitar Hero en JavaScript

Par l’ami Bouctoubou, j’ai découvert un jeu très surprenant : JavaScript Rock Star. Ce qui est surprenant, ce n’est pas le gameplay mais plutot la technologie utilisée. La jouabilité est encore à revoir mais c’est néanmoins ludique. Utilisez les touches A,S,D,F et G pour taper respectivement les “notes” rouge, orange, jaune, verte et bleue. Une prouesse est d’avoir parfaitement synchronisé la vidéo Youtube au jeu. Une belle pub pour jQuery.

Billet

Trucs sympas du web part 02

Trucs sympas du web part 02

Quelques trucs intéressants et/ou drôles dénichés par ci-par là. On parlera ici :

  • de design foireux
  • de proposition de mariage
  • de montagnes russes mortelles
  • de bibliothèque
  • et bien sûr, de Portal !

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