introduction-fr: Difference between revisions
mNo edit summary |
m (→Evolution du Web Design: typo) |
||
Line 24: | Line 24: | ||
=== Evolution du Web Design === | === Evolution du Web Design === | ||
Au commencement (1990), il y avait le [http://www.w3.org/MarkUp/ HTML], et il convenait bien. Il était simple, minimal | Au commencement (1990), il y avait le [http://www.w3.org/MarkUp/ HTML], et il convenait bien. Il était simple, minimal et utilisé pour baliser sémantiquement les données visibles de l'utilisateur (texte) et les partager sur le World Wide Web. | ||
Ensuite vint la [http://en.wikipedia.org/wiki/Browser_wars guerre des navigateurs] (1994-1999) qui vit les éditeurs dominants de navigateurs ''took their turns'' en introduisant des étiquettes "innovantes" pour la | Ensuite vint la [http://en.wikipedia.org/wiki/Browser_wars guerre des navigateurs] (1994-1999) qui vit les éditeurs dominants de navigateurs ''took their turns'' en introduisant des étiquettes "innovantes" pour la présentation, donnant aux auteurs/designers typiques du web ce qu'ils voulaient : un semblant de contrôle sur la présentation de leurs pages web. Le résultat : [http://www.w3.org/TR/REC-html32 HTML 3.2] "standardisa" ces innovations "defacto" en terme de présentation. | ||
L'introduction de [http://www.w3.org/TR/REC-CSS1 CSS1] (1996) et le semantiquement plus riche [http://www.w3.org/TR/REC-html40/ HTML4] (1998) apportèrent une lueur d'espoir, mais ce n'est que des années plus tard (2000-2001), avec l'introduction d'implémentations pleinement conformes (ou presque) à CSS1/HTML4 (IE5/Mac, IE6/Windows, Netscape 6) que l'usage par les "web designers" de CSS dans leurs pages web, devint possible en pratique. Les leaders au sein des communautés commencèrent à furieusement adopter et promouvoir CSS (même s'il fallait en passer par [http://www.tantek.com/log/2004/07.html#ie5macbandpass un] [http://tantek.com/CSS/Examples/boxmodelhack.html "hack"] [http://www.tantek.com/CSS/Examples/midpass.html ou] [http://tantek.com/CSS/Examples/highpass.html deux]) et l'efficacité et l'amélioration de la productivité que leur apportait la séparation de la présentation et du balisage, resta néanmoins le fait d'une petite minorité agissante. | L'introduction de [http://www.w3.org/TR/REC-CSS1 CSS1] (1996) et le semantiquement plus riche [http://www.w3.org/TR/REC-html40/ HTML4] (1998) apportèrent une lueur d'espoir, mais ce n'est que des années plus tard (2000-2001), avec l'introduction d'implémentations pleinement conformes (ou presque) à CSS1/HTML4 (IE5/Mac, IE6/Windows, Netscape 6) que l'usage par les "web designers" de CSS dans leurs pages web, devint possible en pratique. Les leaders au sein des communautés commencèrent à furieusement adopter et promouvoir CSS (même s'il fallait en passer par [http://www.tantek.com/log/2004/07.html#ie5macbandpass un] [http://tantek.com/CSS/Examples/boxmodelhack.html "hack"] [http://www.tantek.com/CSS/Examples/midpass.html ou] [http://tantek.com/CSS/Examples/highpass.html deux]) et l'efficacité et l'amélioration de la productivité que leur apportait la séparation de la présentation et du balisage, resta néanmoins le fait d'une petite minorité agissante. | ||
Line 32: | Line 32: | ||
L'introduction de la version "redesignée" 100% CSS de "Wired News", et le superbe [http://csszengarden.com/ CSS Zen Garden] (2002-2003) marquèrent le "tipping point" du CSS. Avec la présentation claire et évidente de la beauté visuelle et de la pleine créativité, il apparut soudain comme une évidence aux designers du monde entier, ils réalisèrent que c'était là le futur du "web design". Les balisages à des fins de présentation par <code><FONT></code>, <code><TABLE></code>, et <code>spacer.gif</code> furent laissé de côté par tous les web designers qui se respectaient, et qui découvrirent la flexibilité presque infinie des <code><div></code>, <code><span></code>, et de l'attribut 'class'. Quelques uns dans la communauté commencèrent même à adopter quelques uns des éléments les plus sémantiques du HTML: <code><p></code>, <code><h1></code>...<code><h6></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><em></code>, <code><strong></code>. Les leaders au sein de la communauté s'exercèrent aux limites sémantiques du HTML4 strict (experimenté avec XHTML) et documentèrent [http://www.simplebits.com/publications/solutions/ les "best practices"]. | L'introduction de la version "redesignée" 100% CSS de "Wired News", et le superbe [http://csszengarden.com/ CSS Zen Garden] (2002-2003) marquèrent le "tipping point" du CSS. Avec la présentation claire et évidente de la beauté visuelle et de la pleine créativité, il apparut soudain comme une évidence aux designers du monde entier, ils réalisèrent que c'était là le futur du "web design". Les balisages à des fins de présentation par <code><FONT></code>, <code><TABLE></code>, et <code>spacer.gif</code> furent laissé de côté par tous les web designers qui se respectaient, et qui découvrirent la flexibilité presque infinie des <code><div></code>, <code><span></code>, et de l'attribut 'class'. Quelques uns dans la communauté commencèrent même à adopter quelques uns des éléments les plus sémantiques du HTML: <code><p></code>, <code><h1></code>...<code><h6></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><em></code>, <code><strong></code>. Les leaders au sein de la communauté s'exercèrent aux limites sémantiques du HTML4 strict (experimenté avec XHTML) et documentèrent [http://www.simplebits.com/publications/solutions/ les "best practices"]. | ||
Alors que la communauté se mit à suivre rapidement les traces qu'ils avaient marquées, les leaders commencèrent à se heurter aux limites du (X)HTML | Alors que la communauté se mit à suivre rapidement les traces qu'ils avaient marquées, les leaders commencèrent à se heurter aux limites du (X)HTML sémantique. D'autres ''subcultures'' essayaient de réécrire le monde dans leur(s) propre(s) language(s) (<abbr title="Resource Description Framework">[http://www.w3.org/RDF/ RDF]</abbr>, [[plain-xml|"plain" XML]], <abbr title="Scalable Vector Graphics">[http://www.w3.org/TR/SVG/ SVG]</abbr>), sans toutefois avoir beaucoup d'impact sur le World Wide Web, qui exigeait des données présentables aux humains, compatibles avec les navigateurs que les gens utilisaient déjà. [http://en.wikipedia.org/wiki/Social_software Le "Social Software"] et les [http://en.wikipedia.org/wiki/Blogs Blogs], écrits par cette nouvelle génération de "web designers" et de programmeurs, commencèrent à décoller. | ||
Des "patterns" naturels émergèrent de la façon dont les gens utilisaient les systèmes de blogs, en mettant des choses sous forme de listes, par exemple des listes d'autres bloggueurs (connues sous le nom de "blogrolls"), et les annotant avec des informations representant les types de rapports, tels que "ai rencontré", "amis", "famille", etc. Le premier microformat, <abbr title="XHTML Friends Network">[http://gmpg.org/xfn/ XFN]</abbr>, | Des "patterns" naturels émergèrent de la façon dont les gens utilisaient les systèmes de blogs, en mettant des choses sous forme de listes, par exemple des listes d'autres bloggueurs (connues sous le nom de "blogrolls"), et les annotant avec des informations representant les types de rapports, tels que "ai rencontré", "amis", "famille", etc. Le premier microformat, <abbr title="XHTML Friends Network">[http://gmpg.org/xfn/ XFN]</abbr>, fût conçu de façon à correspondre à ces comportements, et [http://tantek.com/log/2003/12.html#L20031215t0830 introduit dans la communauté des bloggueurs] (2003-2004), qui l'adopta en quelques semaines. Le [http://gmpg.org GMPG] fut formé en tant que "home" pour XFN, et documenta quelques [http://gmpg.org/principles principes de design] clés, plus tard adoptés pour les microformats. La notion clé, que le (X)HTML semantique pouvait être étendu, avait été introduite et acceptée par la communauté. | ||
En comprenant, en utilisant, et en combinant les briques du (X)HTML | En comprenant, en utilisant, et en combinant les briques du (X)HTML sémantique, ainsi qu'en statuant que le (X)HTML sémantique pourrait être étendue de façon valide ''via'' de nouvelles valeurs "rel", "meta name" et "class values", définies dans des profiles (X)HTML dans le [http://gmpg.org/xmdp format XMDP], la communauté commença à concevoir et développper de nombreux microformats supplémentaires (2004-2005). Des "patterns" supplémentaires émergèrent de la communauté des blogueurs, et chaque aggrégat de comportement humain entraîna la conception de microformats simples et adaptables pour répondre à ses besoins. Les contrats de licenses Creative Commons devinrent populaires et [[rel-license-fr|rel-license]] fut proposé. "Outlines" et listes : [[xoxo-fr|XOXO]]. Contact info : [[hcard-fr|hCard]]. Calendriers et évènements [[hcalendar-fr|hCalendar]]. | ||
En faisant usage de ces toutes nouvelles briques, les communautés oeuvrant dans le "web design" et l'architecture informationnelle n'étaient plus dès lors limitées par la sémantique prédéfinie du HTML4 (elles n'avaient plus non plus à faire de compromis entre présentation "humaine" et facilité d'édition, ce dont d'autres tentatives | En faisant usage de ces toutes nouvelles briques, les communautés oeuvrant dans le "web design" et l'architecture informationnelle n'étaient plus dès lors limitées par la sémantique prédéfinie du HTML4 (elles n'avaient plus non plus à faire de compromis entre présentation "humaine" et facilité d'édition, ce dont manquaient fortement d'autres tentatives ). 2005 pourrait bien être l'année où les microformats devinrent l'"étape suivante" de l'évolution du web. | ||
=== L'Attrait de la Simplicité === | === L'Attrait de la Simplicité === |
Revision as of 19:04, 28 June 2006
Introduction aux Microformats
En rapport : presse, présentations, podcasts, lectures suggérées, testimoniaux
Que sont les Microformats ?
Les microformats sont les "dictionnaires" du contenu sémantique XHTML. Ils ont pour objet de codifier le contenu HTML riche-en-information couramment utilisé, de telle façon à ce que le contenu sémantique puisse être extrait par une machine. En bref, ils sont la manière la plus simple d'architecturer des données (ou formats de données) destinés à être réutilisés sur le Web.
Pourquoi les Microformats
Pourquoi en sommes-nous venus aux microformats?
En bref, les microformats sont la convergence d'un certain nombre de tendances :
- une étape à venir logique dans l'évolution du "web design" et l'architecturage de l'information.
- une façon pour les éditeurs autonomes de publier eux-mêmes une information plus riche, sans devoir s'en remettre à des services centralisés.
- la reconnaissance du fait que les efforts "traditionnels" en matière de métadonnées ont soit échoué, soit pris tellement de temps pour engranger une quelconque adoption, qu'une nouvelle approche était nécessaire
- une façon d'utiliser le (X)HTML pour les données (data).
Evolution du Web Design
Au commencement (1990), il y avait le HTML, et il convenait bien. Il était simple, minimal et utilisé pour baliser sémantiquement les données visibles de l'utilisateur (texte) et les partager sur le World Wide Web.
Ensuite vint la guerre des navigateurs (1994-1999) qui vit les éditeurs dominants de navigateurs took their turns en introduisant des étiquettes "innovantes" pour la présentation, donnant aux auteurs/designers typiques du web ce qu'ils voulaient : un semblant de contrôle sur la présentation de leurs pages web. Le résultat : HTML 3.2 "standardisa" ces innovations "defacto" en terme de présentation.
L'introduction de CSS1 (1996) et le semantiquement plus riche HTML4 (1998) apportèrent une lueur d'espoir, mais ce n'est que des années plus tard (2000-2001), avec l'introduction d'implémentations pleinement conformes (ou presque) à CSS1/HTML4 (IE5/Mac, IE6/Windows, Netscape 6) que l'usage par les "web designers" de CSS dans leurs pages web, devint possible en pratique. Les leaders au sein des communautés commencèrent à furieusement adopter et promouvoir CSS (même s'il fallait en passer par un "hack" ou deux) et l'efficacité et l'amélioration de la productivité que leur apportait la séparation de la présentation et du balisage, resta néanmoins le fait d'une petite minorité agissante.
L'introduction de la version "redesignée" 100% CSS de "Wired News", et le superbe CSS Zen Garden (2002-2003) marquèrent le "tipping point" du CSS. Avec la présentation claire et évidente de la beauté visuelle et de la pleine créativité, il apparut soudain comme une évidence aux designers du monde entier, ils réalisèrent que c'était là le futur du "web design". Les balisages à des fins de présentation par <FONT>
, <TABLE>
, et spacer.gif
furent laissé de côté par tous les web designers qui se respectaient, et qui découvrirent la flexibilité presque infinie des <div>
, <span>
, et de l'attribut 'class'. Quelques uns dans la communauté commencèrent même à adopter quelques uns des éléments les plus sémantiques du HTML: <p>
, <h1>
...<h6>
, <ol>
, <ul>
, <li>
, <em>
, <strong>
. Les leaders au sein de la communauté s'exercèrent aux limites sémantiques du HTML4 strict (experimenté avec XHTML) et documentèrent les "best practices".
Alors que la communauté se mit à suivre rapidement les traces qu'ils avaient marquées, les leaders commencèrent à se heurter aux limites du (X)HTML sémantique. D'autres subcultures essayaient de réécrire le monde dans leur(s) propre(s) language(s) (RDF, "plain" XML, SVG), sans toutefois avoir beaucoup d'impact sur le World Wide Web, qui exigeait des données présentables aux humains, compatibles avec les navigateurs que les gens utilisaient déjà. Le "Social Software" et les Blogs, écrits par cette nouvelle génération de "web designers" et de programmeurs, commencèrent à décoller.
Des "patterns" naturels émergèrent de la façon dont les gens utilisaient les systèmes de blogs, en mettant des choses sous forme de listes, par exemple des listes d'autres bloggueurs (connues sous le nom de "blogrolls"), et les annotant avec des informations representant les types de rapports, tels que "ai rencontré", "amis", "famille", etc. Le premier microformat, XFN, fût conçu de façon à correspondre à ces comportements, et introduit dans la communauté des bloggueurs (2003-2004), qui l'adopta en quelques semaines. Le GMPG fut formé en tant que "home" pour XFN, et documenta quelques principes de design clés, plus tard adoptés pour les microformats. La notion clé, que le (X)HTML semantique pouvait être étendu, avait été introduite et acceptée par la communauté.
En comprenant, en utilisant, et en combinant les briques du (X)HTML sémantique, ainsi qu'en statuant que le (X)HTML sémantique pourrait être étendue de façon valide via de nouvelles valeurs "rel", "meta name" et "class values", définies dans des profiles (X)HTML dans le format XMDP, la communauté commença à concevoir et développper de nombreux microformats supplémentaires (2004-2005). Des "patterns" supplémentaires émergèrent de la communauté des blogueurs, et chaque aggrégat de comportement humain entraîna la conception de microformats simples et adaptables pour répondre à ses besoins. Les contrats de licenses Creative Commons devinrent populaires et rel-license fut proposé. "Outlines" et listes : XOXO. Contact info : hCard. Calendriers et évènements hCalendar.
En faisant usage de ces toutes nouvelles briques, les communautés oeuvrant dans le "web design" et l'architecture informationnelle n'étaient plus dès lors limitées par la sémantique prédéfinie du HTML4 (elles n'avaient plus non plus à faire de compromis entre présentation "humaine" et facilité d'édition, ce dont manquaient fortement d'autres tentatives ). 2005 pourrait bien être l'année où les microformats devinrent l'"étape suivante" de l'évolution du web.
L'Attrait de la Simplicité
- Les microformats sont un effort simple qui a séduit de nombreuses personnes frustrées par des efforts complexes par le passé. On peut voir là un parallèle avec REST dans le monde des "web services", par exemple voyez cette comparaison des microformats et de REST. Regardez le REST wiki pour plus d'information à propos de REST. Microformats et microprotocoles en rapport.
- Voir aussi : Web Services et le Dilemnme des Innovateurs par Justin Leavesley
Pages en rapport
- Les interviews et articles de presse sont aussi une bonne introduction.
- Voir les présentations microformats pour plus de recul et un contenu d'introduction sur microformats.
- Ecoutez les podcasts à propos des microformats.
- Plus de lecture suggérée
- Ainsi vous voulez implémenter les microformats ?
Articles
- Digital Web Magazine: Microformats Primer de Garrett Dimon
- An Extra SIDE to Web Standards Based Design - How Semantic Information Design Ethics (SIDE) et quelques techniques facilement disponibles peuvent aider le web à guérir, par Jon Tan. Vori aussi son billet sur CSS Zen Garden "Leggo my ego".
- Andrew D. Hume a écrit un billet de blog "introducing microformats" et un autre sur les microformats utilisables.
- Pratique des Microformats avec hCard de Drew McLellan
- introduction à hCard par Jesse Skinner
- grand billet de blog de Shaun Shull sur la façon dont les microformats affectent l'optimisation de moteur de recherche.
- Blog Business Summit : les Microformats en Anglais Clair : "the Promise of Simple Business to Business Data Exchange" par Steve Broback
Références diverses
Ce sont divers liens/articles en rapport avec l'introduction que je n'ai pas encore réussi à incorporer à cette heure. Vous pourriez les trouver d'intérêt. - Tantek
- Data First vs. Structure First
- Tantek dit : A bien des égards, c'est véritablement *bien* pire que ce qu'annonce le billet. Le programmeur "typique" aime littéralement passer bien plus de temps à se soucier de designer la structure pour la recherche de structure, que des données et même encore moins, des données du "vrai monde" (des comportements actuels, etc.) De ce fait nous avons pris l'amure directement opposée avec les microformats au moment de regarder à résoudre un problème.
- Zéro, définir le problème du vrai monde. Si vous ne pouvez pas faire ça, alors arrêtez.
- Un, regardez l'usage dans le vrai monde (données).
- Deux, quels sont les précédents standards que les gens utilisent vraiment aujourd'hui ? S'il y en a plus d'un, alors penchez-vous vers ceux qui ont la meilleure adoption.
- Et uniquement une fois que ces deux premiers sont faits, nous nous soucions de prêter attention aux standards théoriques, ceux qui ont été inventés (soit par des individus ou des comités) mais n'ont pas connu beaucoup d'adoption s'ils en ont même eu une.
- Tantek dit : A bien des égards, c'est véritablement *bien* pire que ce qu'annonce le billet. Le programmeur "typique" aime littéralement passer bien plus de temps à se soucier de designer la structure pour la recherche de structure, que des données et même encore moins, des données du "vrai monde" (des comportements actuels, etc.) De ce fait nous avons pris l'amure directement opposée avec les microformats au moment de regarder à résoudre un problème.
- 2000-03-21 Dan Connolly sur l'information consommable par l'humain : (gras ajouté)
- I believe that one of the best ways to transition into RDF, if not a long-term deployment strategy for RDF, is to manage the information in human-consumable form (XHTML) annotated with just enough info to extract the RDF statements that the human info is intended to convey. In other words: using a relational database or some sort of native RDF data store, and spitting out HTML dynamically, is a lot of infrastructure to operate and probably not worth it for lots of interesting cases. We all know that we have to produce a human-readable version of the thing... why not use that as the primary source?