blog

Vestiges d’un CSS Guru

Catégorie : Best Of

Billet

Netvibes I’m leaving you

J’ai toujours été fan de Netvibes. Ce fut ma première expérience Ajax. L’interface customizable m’avait bluffée. J’ai rapidement adopté Netvibes en tant que page d’accueil. Les widgets mails étaient un argument de poids : consulter ses boites mails en un seul endroit. Rapidement, j’ai intégré d’autres widgets, qu’ils proviennent de Netvibes (bloc-notes, météo, calendrier…) ou de tiers (Digg, del.icio.us, YouTube…). Mais j’ai surtout utilisé Netvibes comme lecteur de flux RSS, ce qui m’a amené à l’adorer, puis à le quitter.

Netvibes : méga lecteur de flux RSS

Par “méga”, je parle de quantité de flux. En effet, il est très facile d’ajouter des flux RSS : non seulement pas 1 par 1, mais groupes par groupes. Netvibes fonctionne par onglets et l’on pouvait (parce que je ne le retrouve plus) télécharger des onglets entiers remplis de flux RSS (onglets proposés par les utilisateurs). Je me retrouvais avec une douzaine d’onglets, parlant de Web Design, de E-Commerce, de Jeux Vidéo, de Sport, d’Interface, de Photo… C’était la quantité, et souvent la qualité.

Je me retrouvais avec des tonnes de flux RSS, répartis entre divers onglets. Beaucoup de contenu intéressant, peu de temps pour les lire. Netvibes n’offre par défaut que le titre d’un élément du flux (il faut cliquer pour obtenir le contenu). Je me fiais donc à ce titre pour savoir quel contenu lire.

Productivité décroissante

Au fil du temps, je perdais beaucoup de temps à lire mes flux RSS (alors que j’en avais supprimé une bonne moitié). Les 2 éléments qui causaient cette lenteur étaient :

  1. l’Interface
  2. le JavaScript

Naviguer à travers les onglets est devenu fastidieux : il n’y a pas de ligne directrice visuelle pour lire les flux sans perte de temps. On vérifie à l’oeil que chaque bloc n’a pas de nouvel élément, et si oui, on lie le titre, et éventuellement on lit le contenu. Cette non mise en avant du contenu est problématique parce qu’un titre en dit souvent très peu (et les titres racoleurs ne m’attirent guère). Résultat : je passais potentiellement à côté de contenu intéressant.

Autre point sensible : le temps de chargement. Et oui : Firefox + JavaScript = lenteur. Même si c’est moins vrai avec FF3, ça reste pénalisant pour un site qui utilise autant de JS que Netvibes. L’interface est très jolie mais est-ce bien ce que l’on demande d’un flux RSS ?

Vers Google Reader

On m’a initié à ce concurrent qui n’en est pas vraiment un puisque l’équivalent de Netvibes chez Google, c’est iGoogle. Tiens : Google a 2 lecteurs de flux RSS ? Oui, et c’est là d’où venait mon problème.

Google Reader est un vrai lecteur de flux RSS : l’emphase est mise sur le contenu. La mise en forme est basique, l’interface est très pratique (j’adore l’utilisation du scroll), le moteur est rapide.

iGoogle et Netvibes peuvent être utilisés comme lecteur de flux RSS, mais leur atout principal sont les widgets, la personnalisation, les fonctionnalités riches.

Alors me direz-vous, pourquoi est-ce que j’utilisais Netvibes comme lecteur de flux ? Tout simplement parce que tout s’y prête :

  • à chaque flux RSS disponible sur un site on trouve ce logo
  • Firefox propose lui même dans sa liste déroulante Netvibes comme lecteur de flux
  • lorsqu’on veut “Ajouter du contenu” sur Netvibes, un élément principal est l’ajout de flux (avec possibilité d’importer un fichier OPML)

C’était mon erreur : utiliser Netvibes pour une fonctionnalité non optimisée.

Que faire avec Netvibes ?

Si j’aimais assez les widgets, je l’utiliserais encore. Mais ils me sont trop peu utiles. C’est juste une préférence personnelle et je comprends que certains apprécient ces multiples widgets.

Je pense néanmoins que la fonctionnalité la plus intéressante (et une des plus récentes) est la page publique Netvibes. Je l’ai découvert par le biais du Vanksen Group : comparez la page Netvibes avec le site “normal”.

Non seulement le design est nettement plus intéressant sur Netvibes, mais le contenu l’est aussi! La page publique Netvibes permet pour une entreprise d’afficher très facilement son actualité, sa personnalité, ses préférences. Tout ceci est très facile à gérer étant donné la nature dynamique des widgets (par exemple, uploadez une photo sur Flickr, elle s’affichera sur votre page Netvibes).

Cette page publique permet d’apparaître “moderne” et ouvert, surtout si l’entreprise travaille dans le secteur du web. C’est facile, joli et intéressant.

Conclusion

La nature même de Netvibes m’a amené à ne plus l’utiliser. La beauté du site et l’expérience fournie m’éloignaient du contenu, seul élément important chez les flux RSS.

Netvibes est sans doute trop élaboré pour n’être qu’un “simple” lecteur. Il peut faire beaucoup plus et c’est dans ce domaine là qu’il excelle.

Billet

Histoire d’un redesign

Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

  • bbxcloud
    Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
  • bbxland
    Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
  • bbxrevision
    Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

  • la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
  • arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
  • les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
  • la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
  • la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
  • une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion 😉 ).

Billet

Launchy : le meilleur raccourci du monde

( Cela fait longtemps que je voulais poster cet article pour vous parler d’un logiciel que j’utilise depuis 1 an environ et qui est une vraie perle. Attention, vous risquez de devenir accro! )

Un problème incessant que l’on rencontre fatalement lorsqu’on utilise un ordinateur tous les jours est la prolifération des raccourcis en tout genre. Je parle ici des icônes de raccourcis que l’on trouve notamment sur le Bureau mais aussi dans la barre de Lancement rapide ou bien dans le menu Démarrer. Elles sont pratiques pour atteindre rapidement un dossier, un fichier ou même une URL. L’utilisation la plus fréquente reste celle de lancer un programme.

Mais voilà, étant victime de son succès, ces raccourcis se multiplient au rythme des installations de programme, et le Bureau devient une mosaique illisible d’icônes en tout genre. Et le temps passé à trouver une icône accroît exponentiellement. Il y a des solutions “artisanales” comme par exemple ranger par dossiers et sous-dossiers le menu Démarrer, ou organiser dans l’espace les icônes du Bureau. Mais à terme, il y aura des limites, et la mise en place même de cette organisation est coûteuse en temps et en effort.

Voici donc la solution : Launchy.

Launchy, keystroke launcher

Il s’agit en fait d’un lanceur d’applications (mais pas seulement), tout léger et tout simple. Il démarre en même temps que Windows (sans que vous le voyez) et pour le lancer, il suffit de faire Alt + Espace, et il apparaîtra.

Son interface consiste en :

  • une zone de saisie
  • une icône (associée à un texte)
  • un menu déroulant (qui apparaît dans certains cas)

Comment ça marche ?

Après l’avoir lancé, vous tapez le nom du logiciel que vous voulez lancer, et vous faites “Entrée”. Et voilà!

Où va-t-il chercher ?

Par défaut, Launchy indexe les fichiers .ink (raccourcis) existants dans le menu Démarrer, et aussi les favoris internet (Firefox et IE). Donc en tapant un mot, il cherchera dans ses endroits là. Vous pouvez bien sûr lui demander d’indexer d’autres fichiers (mp3, doc, pdf…) et d’autres dossiers. Il suffit de le configurer dans les options.

Favori sous Launchy

Configuration de l'indexation

Le menu déroulant

Si au moment de taper le nom de votre programme ce dernier n’apparaît pas, attendez 2 sec et un menu déroulant apparaîtra. Choisissez le bon raccourci et faites Entrée.

Menu déroulant Launchy

Launchy apprend tout seul !

Vous aurez remarqué que si vous ne tapez qu’une seule lettre, Launchy vous propose déjà une liste de raccourcis. Sachez que si vous voulez par exemple d’associer la rechercher “f” au logiciel Firefox mais qu’en tapant “f” Launchy vous propose d’abord le logiciel Flash, et bien choisissez Firefox dans le menu déroulant et la prochaine fois que vous taperez “f”, Launchy vous proposera directement Firefox !

Changer un raccourci dans Launchy

Bien sûr, cette astuce marche aussi pour les requêtes de plus d’une lettre. Mais il est pratique (car encore plus rapide) de faire des raccourcis d’une seule lettre. Pour ma part, ça donne :

  • f pour Firefox
  • p pour Photoshop
  • i pour Illustrator
  • + pour Notepad++
  • w pour Winamp…

Avantages

  • gratuit
  • open source
  • léger
  • (ultra) rapide
  • joli (différents skins sont disponibles)
  • recherche très facile (vous pouvez même trouver des logiciels dont vous aviez oublié l’existence sur votre pc…)
  • apprentissage

Inconvénients

  • addictif (vous essaierez de faire Alt + Espace sur n’importe quel pc)
  • bureau tout vide
  • plus d’excuse lorsque vous ne trouverez pas le bon logiciel

Il y aura éventuellement un temps d’adaptation mais il est vraiment très court. Je ne peux plus me passer de ce logiciel qui s’avère être celui que j’utilise le plus.

Billet

Le web design ce n’est pas que du graphisme

Après une année (ou presque) passée dans le monde professionnel du web design en tant que novice encore en rodage, je me pose encore la question : c’est quoi être web designer ? J’utilise cette dénomination parce que c’était celle de la formation que j’ai suivie, et qu’elle correspond aux 2 principaux aspects de mon travail : intégration et graphisme.

Intégration : l’écriture du code (X)HTML et des feuilles de styles (CSS) associées.
Graphisme : création de visuels, animés ou non, sous Photoshop, Illustrator, Flash…

A ce stade, j’ai d’ores et déjà inclus autre chose que du graphisme dans la notion de “web design” : l’intégration. En effet, coder c’est du web design aussi, et correspond en l’occurrence à la moitié de mon travail.
Cela peut prêter à confusion. On se dit “design = graphisme” et donc que le “web design” se résumerait au “graphisme sur le web”. Mais “to design”, c’est concevoir, penser, réaliser les sites web. Comme le résume très bien l’article Wikipedia :

Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web.

Lire la suite →

Billet

Mein Führer, I can walk !

Dr Strangelove

L’autre soir, envie de regarder un film. Je regarde dans les dvd que j’ai. Tiens, “Dr Strangelove“. Ca faisait longtemps. Le revoir a conforté son statut de chef d’oeuvre. Pour ceux qui ne connaîtraient pas, voici l’histoire en bref : un général américain parano et patriote, à la tête d’une base américaine, lance une attaque nucléaire contre la Russie, sans aucune concertation. Le président des Etats-Unis, alerté, rassemble l’état-major militaire pour résoudre en urgence ce problème. Entre-temps, les bombardiers américains filent droit sur le territoire russe. Commence alors le compte à rebours…

Dr Strangelove est un film sur la guerre, mais plus particulièrement une comédie sur la guerre. On assiste à un véritable de théâtre de l’absurde, totalement ancré dans son temps. Malgré cet humour noir très présent, le discours du film reste très sérieux. Ceci vient surtout de la précision historique que Kubrick a apporté au scénario, entre le processus d’attaque ou la réunion des dirigeants. Peter Sellers, qui joue ici 3 rôles (bien) différents, est flamboyant.

Il faut voir l’histoire comme un problème évident de communication (l’annonce ou non de l’existence du “doomsday device”) où la stratégie illogique de suicide indirect est le principal moteur. La population n’est pas vu comme des humains mais comme des chiffres, qui ne représentent que des paramètres dans les décisions de guerre, et permettent ainsi à une minorité d’assouvir ses désirs personnels. L’humour omniprésent illustre cette grande farce qui même si elle fait sourire, condamne allègrement le raisonnement délirant de la classe dominante.

Je ne saurais en dire davantage. Il vaut mieux le voir (si ce n’est déjà fait) pour en tirer toutes les leçons. Et éclater de rire.

Billet

Firefox 3 sera le meilleur navigateur internet ?

Quelques jours après la sortie de la version beta d’Internet Explorer 8, Mozilla a sorti une version beta de Firefox 3. Qu’en est-il de cette nouvelle version du navigateur favori des web designers ? Quelles sont les nouveautés ? Mais surtout : est-ce que les gros défauts de Firefox 2 (notamment l’utilisation de mémoire) ont été gommés ?

Interface

L’interface de Firefox m’a toujours plu, car elle est sobre mais fonctionnelle. La version 3 apporte son lot de nouveautés, plus ou moins intéressantes.

Bouton “Précédent” grossi

Ca saute aux yeux. Personnellement, j’utilise plutôt le raccourci clavier mais pour les fans de la souris, c’est un détail très pratique, conséquence de l’utilisation plus importante de ce bouton par rapport au bouton “Suivant”.

Barre d’adresses enrichie

Sous FF2, elle offrait déjà l’url et le titre de la page. De plus, elle mettait en premier les sites les plus visités. Avec FF3 s’ajoutent la favicon et une icône si elle est dans les favoris, avec en prime un design plus pratique pour bookmarker directement un site.

Gestion des favoris

Elle s’est bien développée. Les favoris seront gérés comme une mini-base de données, avec moteur de recherche, historique, gestion des tags… Les plugins de favoris ne seront plus nécessaires.

Performances

Mémoire

C’est le gros point noir de Firefox 2 : il utilise énormément de mémoire, sans compter celle que les plugins utilisent. Les développeurs ont beaucoup travaillés dessus. Stuart Parmenter, un développeur de Mozilla, explique comment ils sont arrivés petit à petit à gagner en performances. Le test consistait à ouvrir 29 pages dans 30 fenêtres, et ceci, 11 fois d’affilée, en fermant au fur et à mesure les fenêtres pour en garder 30 ouvertes à chaque instant. A la fin, une seule fenêtre restait ouverte pour voir si les navigateurs (ici FF2, FF3 Beta et IE7) récupéraient de la mémoire.

Graphique performances Firefox 3

On voit que IE7 n’arrive pas à récupérer de la mémoire, même en laissant une seule fenêtre ouverte. Et on voit que le maximum qu’atteint FF3 est moins grand que ce que FF2 obtient au final.

N’oublions pas Safari et l’excellent Opera, qui ont été testés dans cet article et dont résulte ce graphique. Firefox 3 reste le plus performant.

Javascript

Le Javascript est omniprésent (notamment avec l’AJAX) que ses performances sont primordiales aussi. Là aussi, FF3 est le plus rapide.

Performances Javascript

Utilisation

Un navigateur se doit aussi de respecter l’internaute, et d’améliorer son expérience.

Sécurité

Ce n’est pas le point faible de FF2 mais mieux vaut prévenir que guérir. FF3 inclura un outil pour avoir directement des informations sur les sites qu’on visite, et aura un outil anti-phishing plus performant.

Firefox 3 et le Phishing

Standards du Web

En tant que web designer, cela nous intéresse. Au test Acid 3 (plus bas dans la page), FF3 s’en sort remarquablement.

Firefox 3 : Test Acid 3

Firefox semble devancer largement ses concurrents, et on espère que les plugins seront rapidement mis à jour, parce que c’est pour moi le point fort de Firefox.

MAJ : Safari est lui aussi en phase de beta test mais n’était pas inclus dans les résultats ci-dessus, faute de tests. Plus d’informations dans les commentaires ci-dessous.

Billet

Synchroniser ses favoris Firefox sur plusieurs ordinateurs avec Foxmarks

UPDATE : Foxmarks s’appelle désormais XMarks

UPDATE 2 : XMarks n’existe plus ! Il faut utiliser Firefox Sync.

Il y a quelques mois je cherchais un outil pour synchroniser mes bookmarks Firefox entre mon pc à la maison et celui au travail. Je voulais que chaque ajout, modification ou suppression sur un ordinateur se répercute sur l’autre. J’avais alors testé 4 outils :

Je me retrouvais donc à utiliser le plugin de del.icio.us mais vraiment par défaut d’avoir mieux. Parce que del.icio.us fonctionne avec des tags, et en uploadant mes favoris, cela a généré automatiquement des tags à gogo, ce qui a foutu un bordel pas possible au final. Il y avait notamment le tag “barre personnelle” sur tous mes favoris… Génial…

La semaine dernière, je me dis que j’allais retenter le plugin Foxmarks, et j’arrive enfin à me connecter! J’installe le module sur les deux pc. Résultat : la synchronisation marche parfaitement.

Foxmarks

La démarche à suivre est très simple:

  • Il vous faut un compte sur Foxmarks (gratuit)
  • La première synchro demande soit de garder les favoris du serveur et ceux du pc, soit l’un des deux
  • Une icône en bas à droite de la fenêtre Firefox affiche le statut de Foxmarks (“prêt”, “en cours de synchronisation”, “nouveaux favoris à synchroniser”, “un problème est survenu”…)
  • Je vous conseille d’activer la synchronisation automatique, qui permet de récupérer au démarrage et “silencieusement” les derniers favoris du serveur
  • Ensuite, activez aussi la synchro à la fermeture (et de décocher la case “d’abord demander”), histoire de ne rien perdre en partant.

Finies les sessions de copier-coller de favoris. Foxmarks marche exactement comme je le voulais.

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

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