user-interface-fr: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(trbasricd)
m (Reverted edits by VarroLalli (Talk) to last version by Brian)
Line 1: Line 1:
roldeldom
<h1> Interface Utilisateur </h1>
<h1> Interface Utilisateur </h1>
{{TOC-right}}
{{TOC-right}}


Il y a eu récemment beaucoup de très bonnes idées d'interfaces-utilisateurs et des suggestions pour travailler sur les microformats.  Cette page sert à rassembler et documenter de façon à ce que nous puissions être inspirés et itérer sur les travaux des autres.
Il y a eu récemment beaucoup de très bonnes idées d'interfaces-utilisateurs et des suggestions pour travailler sur les microformats.  Cette page sert à rassembler et documenter de façon à ce que nous puissions être inspirés et itérer sur les travaux des autres.


== lignes de conduite de design ==
== lignes de conduite de design ==
Ce sont quelques lignes de conduite suggérées par [http://blog.mozilla.com/faaborg/ Alex Faaborg], un designer d'expérience utilisateur chez Mozilla à destination des designers Web et les développeurs :  
Ce sont quelques lignes de conduite suggérées par [http://blog.mozilla.com/faaborg/ Alex Faaborg], un designer d'expérience utilisateur chez Mozilla à destination des designers Web et les développeurs :  
* Design fondé sur des actions, pas sur les données. Un bouton qui dit "Envoyer vers le Calendrier" est considérablement plus utilisable qu'un bouton vert qui dit simplement "hCalendar".
* Design fondé sur des actions, pas sur les données. Un bouton qui dit "Envoyer vers le Calendrier" est considérablement plus utilisable qu'un bouton vert qui dit simplement "hCalendar".
* Utiliser des images iconiques plutôt que des acronymes. En plus d'être plus descriptif, elles se localisent mieux. En voici quelques-unes que j'ai présentées dans différentes conférences : [http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/fundamentalTypesStatic.jpg_large.jpg microformat icons]. Elles sont encore très préliminaires. Mozilla sortira probablement tout le travail de source pour nos icônes microformats sous une licence creative commons durant le lancement de Firefox 3. Ceci permettra aux designers Web d'intégrer les icônes à l'intérieur de leurs sites et les autres navigateurs Web peuvent considérer d'utiliser un ensemble similaire d'icônes.
* Utiliser des images iconiques plutôt que des acronymes. En plus d'être plus descriptif, elles se localisent mieux. En voici quelques-unes que j'ai présentées dans différentes conférences : [http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/fundamentalTypesStatic.jpg_large.jpg microformat icons]. Elles sont encore très préliminaires. Mozilla sortira probablement tout le travail de source pour nos icônes microformats sous une licence creative commons durant le lancement de Firefox 3. Ceci permettra aux designers Web d'intégrer les icônes à l'intérieur de leurs sites et les autres navigateurs Web peuvent considérer d'utiliser un ensemble similaire d'icônes.


== défis de design  ==
== défis de design  ==
* Chris Messina : "Quels types de solutions pouvons-nous monter qui soient en un clic seulement ?"
* Chris Messina : "Quels types de solutions pouvons-nous monter qui soient en un clic seulement ?"
* Alex Faaborg : Mozilla a reçu des demandes de journalistes travaillant dans les grands médias (Wired et Business Week) qui voulaient couvrir les microformats dans les articles traitant du futur du navigateur Web, mais ils ont ensuite fait marche arrière parce qu'ils pressentaient que le terme "microformats" ne séduirait que les développeurs et pas le lecteur moyen. Ces types d'articles généraux ont besoin de se reconcentrer sur l'expérience utilisateur et non sur la technologie sous-jacente, mais quel terme devraient utiliser les reporters pour décrire la fonctionnalité générale ?
* Alex Faaborg : Mozilla a reçu des demandes de journalistes travaillant dans les grands médias (Wired et Business Week) qui voulaient couvrir les microformats dans les articles traitant du futur du navigateur Web, mais ils ont ensuite fait marche arrière parce qu'ils pressentaient que le terme "microformats" ne séduirait que les développeurs et pas le lecteur moyen. Ces types d'articles généraux ont besoin de se reconcentrer sur l'expérience utilisateur et non sur la technologie sous-jacente, mais quel terme devraient utiliser les reporters pour décrire la fonctionnalité générale ?
** Je pense que nous devrions nous accrocher au terme "microformats" jusqu'à ce que quelqu'un puisse trouver un meilleur terme qui ne "séduise pas uniquement que les développeurs". Remarquez que nous devrions éviter les termes qui sont soit surchargés, ou diluent les concepts, ou sont simplement juste une autre forme de jargon. [[User:Tantek|Tantek]]
** Je pense que nous devrions nous accrocher au terme "microformats" jusqu'à ce que quelqu'un puisse trouver un meilleur terme qui ne "séduise pas uniquement que les développeurs". Remarquez que nous devrions éviter les termes qui sont soit surchargés, ou diluent les concepts, ou sont simplement juste une autre forme de jargon. [[User:Tantek|Tantek]]


== portabilité réseau social ==
== portabilité réseau social ==
Voir la page séparée [[social-network-portability-fr|portabilité du réseau social]].
Voir la page séparée [[social-network-portability-fr|portabilité du réseau social]].


== intégration navigateur ==
== intégration navigateur ==
A partir des visions en passant par les photos d'écrans de brainstorms, les plugins fonctionnels jusqu'aux implémentations en cours de livraison, il y a beaucoup de choses en cours concernant l'intégration avec le navigateur du support des microformats.
A partir des visions en passant par les photos d'écrans de brainstorms, les plugins fonctionnels jusqu'aux implémentations en cours de livraison, il y a beaucoup de choses en cours concernant l'intégration avec le navigateur du support des microformats.


=== actuellement ===
=== actuellement ===
* <del>Le navigateur [[Flock-fr|Flock]] est livré avec un support intégré des microformats.</del> - non confirmé à cette heure  -- Chris Messina.
* <del>Le navigateur [[Flock-fr|Flock]] est livré avec un support intégré des microformats.</del> - non confirmé à cette heure  -- Chris Messina.
* Le plugin [[Operator-fr|Operator]] ajoute la détection de microformats et l'intégration à [[Firefox-fr|Firefox]] version 1.5-2, [[Netscape Navigator-fr|Netscape Navigator]] versions 9 et [[Flock-fr|Flock]] 1.0 <br /> [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ http://notizblog.org/wp-content/uploads/2007/10/micro-netscape.png]
* Le plugin [[Operator-fr|Operator]] ajoute la détection de microformats et l'intégration à [[Firefox-fr|Firefox]] version 1.5-2, [[Netscape Navigator-fr|Netscape Navigator]] versions 9 et [[Flock-fr|Flock]] 1.0 <br /> [http://notizblog.org/2007/10/21/operator-unter-navigator-90/ http://notizblog.org/wp-content/uploads/2007/10/micro-netscape.png]
* Un [[Safari-fr|plugin microformats Safari]] a été implémenté (requiert OSX10.5) basé sur la maquette de Jon Hicks : <br /> [http://microformats.org/wiki/safari http://farm3.static.flickr.com/2309/2036669631_6e99870645.jpg]
* Un [[Safari-fr|plugin microformats Safari]] a été implémenté (requiert OSX10.5) basé sur la maquette de Jon Hicks : <br /> [http://microformats.org/wiki/safari http://farm3.static.flickr.com/2309/2036669631_6e99870645.jpg]


=== bientôt ===
=== bientôt ===
* [[Firefox-fr|Firefox]] version 3.0 a un support similaire à l'intégration d'Operator. Voir la page [[Firefox-fr|Firefox]] pour les détails.  
* [[Firefox-fr|Firefox]] version 3.0 a un support similaire à l'intégration d'Operator. Voir la page [[Firefox-fr|Firefox]] pour les détails.  


=== vision ===
=== vision ===
<span style="float:left">[http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/informationBroker.jpg]</span>Navigateur Web comme un Broker d'Information - partie d'un [http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ billet de blog d'Alex Faaborg sur Microformats - Les Types Fondamentaux]<br style="clear:both" />
<span style="float:left">[http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ http://people.mozilla.com/~faaborg/files/20061213-fundamentalTypes/informationBroker.jpg]</span>Navigateur Web comme un Broker d'Information - partie d'un [http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/ billet de blog d'Alex Faaborg sur Microformats - Les Types Fondamentaux]<br style="clear:both" />


=== en général ===
=== en général ===
Le support navigateur pour les microformats consiste en général en trois choses :  
Le support navigateur pour les microformats consiste en général en trois choses :  
# Détecter automatiquement la présence de microformats sur une page
# Détecter automatiquement la présence de microformats sur une page
# Les parser en un ensemble de microformats pour cette page (en maintenant de préférence leurs relations relatives peut-être à l'intérieur d'une structure en arbre)
# Les parser en un ensemble de microformats pour cette page (en maintenant de préférence leurs relations relatives peut-être à l'intérieur d'une structure en arbre)
# Faire quelque chose d'utile avec eux.
# Faire quelque chose d'utile avec eux.


=== faire quelque chose d'utile===
=== faire quelque chose d'utile===
Faire quelque chose d'utile pourrait être l'une ou toutes ces choses :
Faire quelque chose d'utile pourrait être l'une ou toutes ces choses :
* '''Interface Utilisateur''' : Indiquer la présence de microformats et fournir à l'utilisateur une interface utilisateur supplémentaire pour les actions communes à prendre avec ces microformats.
* '''Interface Utilisateur''' : Indiquer la présence de microformats et fournir à l'utilisateur une interface utilisateur supplémentaire pour les actions communes à prendre avec ces microformats.
* '''API''' : Fournir une API (extensions DOM sur l'objet "document" ?) pour accédér à ces microformats pour les développeurs d'extensions de navigateurs.
* '''API''' : Fournir une API (extensions DOM sur l'objet "document" ?) pour accédér à ces microformats pour les développeurs d'extensions de navigateurs.
* '''Cache''' : cacher cet ensemble/arbre de microformats analysés avec les URL/Titre/date-accès de la page dans l'"Historique" de navigation navigateur ou même le cache de la page, et puis utiliser cet ensemble d'objets pour différents usages d'auto-remplissage et autres améliorations aux fonctionnalités existantes des navigateurs.
* '''Cache''' : cacher cet ensemble/arbre de microformats analysés avec les URL/Titre/date-accès de la page dans l'"Historique" de navigation navigateur ou même le cache de la page, et puis utiliser cet ensemble d'objets pour différents usages d'auto-remplissage et autres améliorations aux fonctionnalités existantes des navigateurs.


=== indiquer la présence de microformats ===
=== indiquer la présence de microformats ===
Les navigateurs peuvent indiquer la présence de microformats à plusieurs niveaux.
Les navigateurs peuvent indiquer la présence de microformats à plusieurs niveaux.
* une ou plusieurs icônes
* une ou plusieurs icônes
** soit une icône générique microformats ou,  
** soit une icône générique microformats ou,  
** une icône pour chaque type de microformat présent
** une icône pour chaque type de microformat présent
** dans la barre d'outils, dans la barre de pied de page, ou peut-être dans les marges de la page
** dans la barre d'outils, dans la barre de pied de page, ou peut-être dans les marges de la page
* un curseur spécial au moment du survol  
* un curseur spécial au moment du survol  
** Voir [http://wiki.mozilla.org/ContentHandling:User_Interface/Preferences_Microformats mozilla wiki: ContentHandling:User Interface/Preferences Microformats]
** Voir [http://wiki.mozilla.org/ContentHandling:User_Interface/Preferences_Microformats mozilla wiki: ContentHandling:User Interface/Preferences Microformats]


Discussion et maquettes / <span id="Screen_Shots">screenshots</span> pour indiquer la présence de microformats :
Discussion et maquettes / <span id="Screen_Shots">screenshots</span> pour indiquer la présence de microformats :


* [http://blog.mozilla.com/faaborg/2007/02/04/microformats-part-4-the-user-interface-of-microformat-detection/ Maquettes Conceptuelles de Détection Microformat dans  Firefox 3]
* [http://blog.mozilla.com/faaborg/2007/02/04/microformats-part-4-the-user-interface-of-microformat-detection/ Maquettes Conceptuelles de Détection Microformat dans  Firefox 3]
* [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats in Web Browsers] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
* [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats in Web Browsers] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps sur Flickr] <br /> [http://glazkov.com/blog/margin-marks/ http://farm2.static.flickr.com/1098/1323814472_819bdd6373_m.jpg]
* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps sur Flickr] <br /> [http://glazkov.com/blog/margin-marks/ http://farm2.static.flickr.com/1098/1323814472_819bdd6373_m.jpg]


=== Outils de Publication ===
=== Outils de Publication ===
Exemples et idées d'outils pour publier des microformats dans les outils CMS.
Exemples et idées d'outils pour publier des microformats dans les outils CMS.
* [http://www.undergroundwebdesigns.com/tinyMCE-hcard-plugin.html tinyMCE hcard plugin]
* [http://www.undergroundwebdesigns.com/tinyMCE-hcard-plugin.html tinyMCE hcard plugin]
* [http://www.undergroundwebdesigns.com/tinyMCE-hcalendar-plugin.html tinyMCE hcalendar plugin]
* [http://www.undergroundwebdesigns.com/tinyMCE-hcalendar-plugin.html tinyMCE hcalendar plugin]
* [http://matthewlevine.com/projects/hcard-wizard hcard wizard]
* [http://matthewlevine.com/projects/hcard-wizard hcard wizard]


Ce serait agréable de disposer d'un bookmarklet que vous pourriez juste presser sur une portion de texte sélectionnée dans une aire de texte ou un éditeur WYSIWYG pour transformer une hcard avec juste FN, et ne pas avoir à remplir de formulaire. Bien que cela ne nous donne pas une information riche, c'est vraiment facile et ne crée pas trop de charge de travail supplémentaire.
Ce serait agréable de disposer d'un bookmarklet que vous pourriez juste presser sur une portion de texte sélectionnée dans une aire de texte ou un éditeur WYSIWYG pour transformer une hcard avec juste FN, et ne pas avoir à remplir de formulaire. Bien que cela ne nous donne pas une information riche, c'est vraiment facile et ne crée pas trop de charge de travail supplémentaire.


=== Interface utilisateur supplémentaire ===
=== Interface utilisateur supplémentaire ===
Quelques exemples d'interfaces-utilisateur supplémentaires pour les actions communes à prendre avec les microformats trouvés dans les pages, groupés par microformat spécifique. Remarquez que la plupart de ces actions devraient pouvoir être applicables à toutes les instances du microformat sur la page en une fois (par exemple exporter tous les contacts), ou pour une sélection d'instances (par exemple exporter les contacts sélectionnés), ou juste pour une instance spécifique (par exemple exporter contact XYZ.)
Quelques exemples d'interfaces-utilisateur supplémentaires pour les actions communes à prendre avec les microformats trouvés dans les pages, groupés par microformat spécifique. Remarquez que la plupart de ces actions devraient pouvoir être applicables à toutes les instances du microformat sur la page en une fois (par exemple exporter tous les contacts), ou pour une sélection d'instances (par exemple exporter les contacts sélectionnés), ou juste pour une instance spécifique (par exemple exporter contact XYZ.)


* [[hcard-fr|hCard]] - voir [[hcard-user-interface-fr#Interfaces_utilisateur_supplémentaires|Interfaces-utilisateur supplémentaires]]
* [[hcard-fr|hCard]] - voir [[hcard-user-interface-fr#Interfaces_utilisateur_supplémentaires|Interfaces-utilisateur supplémentaires]]
* [[hcalendar-fr|hCalendar]]
* [[hcalendar-fr|hCalendar]]
** "Ajouter au calendrier" (convertit les événements hCalendar en vEventes iCalendar (.ics) et les passe sur l'OS pour les ouvrir/incorporer automatiquement  l'intérieur de l'application locale de calendrier préférée par l'utilisateur).
** "Ajouter au calendrier" (convertit les événements hCalendar en vEventes iCalendar (.ics) et les passe sur l'OS pour les ouvrir/incorporer automatiquement  l'intérieur de l'application locale de calendrier préférée par l'utilisateur).
** ajouter à gCalendar, Yahoo Calendar, Upcoming, Eventful (etc.)
** ajouter à gCalendar, Yahoo Calendar, Upcoming, Eventful (etc.)
** "S'abonner au calendrier" - construit et passer sur une URL de conversion (par ex en utilisant X2V, ou en ajoutant un préfixe à l'URL vers la page en cours (ou pour l'événement spécifique en utilisant un identifiant fragment) avec webcal://feeds.technorati.com/events/ ) et la passer sur l'OS pour faire que l'OS passe l'URL sur l'application locale de calendrier préférée de l'utilisateur pour que cette application puisse s'abonner.
** "S'abonner au calendrier" - construit et passer sur une URL de conversion (par ex en utilisant X2V, ou en ajoutant un préfixe à l'URL vers la page en cours (ou pour l'événement spécifique en utilisant un identifiant fragment) avec webcal://feeds.technorati.com/events/ ) et la passer sur l'OS pour faire que l'OS passe l'URL sur l'application locale de calendrier préférée de l'utilisateur pour que cette application puisse s'abonner.
** exporter sous texte/ [[csv-fr|comma-separated-variables]] (CSV) pour permettre l'édition, le tri et / ou l'importation à l'intérieur de feuilles de calcul / bases de données, etc. (ou concaténation vers fichier existant).
** exporter sous texte/ [[csv-fr|comma-separated-variables]] (CSV) pour permettre l'édition, le tri et / ou l'importation à l'intérieur de feuilles de calcul / bases de données, etc. (ou concaténation vers fichier existant).
*[[adr-fr|adr]]
*[[adr-fr|adr]]
** exporter une vCard, soit en faisant apparaître un nom, ou en utilisant l'emplacement texte par défaut
** exporter une vCard, soit en faisant apparaître un nom, ou en utilisant l'emplacement texte par défaut
** l'exporter sous text/ CSV comme au-dessus
** l'exporter sous text/ CSV comme au-dessus
** trouver sur une carte choisie par l'utilisateur
** trouver sur une carte choisie par l'utilisateur
** trouver les images, l'hôtel et restaurant les plus proches... en utilisant le site choisi par l'utilisateur
** trouver les images, l'hôtel et restaurant les plus proches... en utilisant le site choisi par l'utilisateur
** voir aussi [[hcard-user-interface-fr#Interfaces_utilisateur_supplémentaires|Interfaces-utilisateur supplémentaires]]
** voir aussi [[hcard-user-interface-fr#Interfaces_utilisateur_supplémentaires|Interfaces-utilisateur supplémentaires]]




*[[geo-fr|Geo]]
*[[geo-fr|Geo]]
** trouver sur une carte du choix de l'utilisateur
** trouver sur une carte du choix de l'utilisateur
** trouver des photos, l'hôtel le plus proche, le restaurant le plus proche, etc. en utilisant un site du choix de l'utilisateur
** trouver des photos, l'hôtel le plus proche, le restaurant le plus proche, etc. en utilisant un site du choix de l'utilisateur
** exporter sous un fichier [[KML]]/ [[GPX]] ; ou concaténer vers un fichier existant
** exporter sous un fichier [[KML]]/ [[GPX]] ; ou concaténer vers un fichier existant
** exporter sous texte/CSV comme ci-dessus
** exporter sous texte/CSV comme ci-dessus
** envoyer (dans un format adéquat) via bluetooth vers un terminal GPS.
** envoyer (dans un format adéquat) via bluetooth vers un terminal GPS.


* [[hreview|hReview]]
* [[hreview|hReview]]
**Si l'item est un livre, chercher dans les sites de librairies du choix de l'utilisateur
**Si l'item est un livre, chercher dans les sites de librairies du choix de l'utilisateur
**Si l'item est un livre, générer des COinS ou tout autre marquage de citation standard
**Si l'item est un livre, générer des COinS ou tout autre marquage de citation standard
**Si l'item est un livre, film/ DVD, CD, etc., chercher parmi le(s) sites marchands du choix de l'utilisateur
**Si l'item est un livre, film/ DVD, CD, etc., chercher parmi le(s) sites marchands du choix de l'utilisateur


Line 100: Line 99:


* [[hatom-fr|hAtom]]
* [[hatom-fr|hAtom]]
** laisser l'utilisateur s'abonner à la page sous une série de hentrys hAtom
** laisser l'utilisateur s'abonner à la page sous une série de hentrys hAtom
*** challenges à garder en tête :
*** challenges à garder en tête :
**** what if user goes to permalink of a blog post and that has just one static hentry - does subscribe make sense? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
**** what if user goes to permalink of a blog post and that has just one static hentry - does subscribe make sense? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
**** or if user goes to an archive page which just has a set of static hentry items - again, how does subscribe help? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
**** or if user goes to an archive page which just has a set of static hentry items - again, how does subscribe help? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
Line 107: Line 106:




Discussion et maquettes / photos-écrans d'interface-utilisateur supplémentaire pour les microformats (quelques screenshots sont uniquement disponibles sur les liens de destination, cliquez dessus svp).
Discussion et maquettes / photos-écrans d'interface-utilisateur supplémentaire pour les microformats (quelques screenshots sont uniquement disponibles sur les liens de destination, cliquez dessus svp).
* [http://blog.wilsonet.com/archives/2006/04/30/microformats-in-flock/ Microformats dans Flock]
* [http://blog.wilsonet.com/archives/2006/04/30/microformats-in-flock/ Microformats dans Flock]
* NetNewsWire [http://flickr.com/photos/factoryjoe/454706107/in/photostream/ détecte] et puis [http://flickr.com/photos/factoryjoe/454705203/ convertit les données hcard et hcalendar] dans les entrées de fils :<br />[http://flickr.com/photos/factoryjoe/454705203/ http://farm1.static.flickr.com/183/454705203_33f9b8d7c6_o.png]
* NetNewsWire [http://flickr.com/photos/factoryjoe/454706107/in/photostream/ détecte] et puis [http://flickr.com/photos/factoryjoe/454705203/ convertit les données hcard et hcalendar] dans les entrées de fils :<br />[http://flickr.com/photos/factoryjoe/454705203/ http://farm1.static.flickr.com/183/454705203_33f9b8d7c6_o.png]
* [http://www.hicksdesign.co.uk/journal/a-proposal-for-a-safari-microformats-plugin Jon Hicks: Proposition pour un plugin Microformats Safari]
* [http://www.hicksdesign.co.uk/journal/a-proposal-for-a-safari-microformats-plugin Jon Hicks: Proposition pour un plugin Microformats Safari]


== implémentations ==
== implémentations ==
Voir [[implementations-fr|implémentations]], et documentez les exemples de bonnes interfaces utilisateurs ici à partir d'ici et là-bas.
Voir [[implementations-fr|implémentations]], et documentez les exemples de bonnes interfaces utilisateurs ici à partir d'ici et -bas.


=== plugins ===
=== plugins ===
Line 121: Line 120:
=== scripts utilisateur Greasemonkey ===
=== scripts utilisateur Greasemonkey ===
* http://greasemonkey.makedatamakesense.com/callto_tel/ de Scott Reynen
* http://greasemonkey.makedatamakesense.com/callto_tel/ de Scott Reynen
* Quelques scripts [[Greasemonkey-fr|Greasemonkey]] utilisent un iframe séparé pour le contenu microformaté.
* Quelques scripts [[Greasemonkey-fr|Greasemonkey]] utilisent un iframe séparé pour le contenu microformaté.
* D'autres scripts [[Greasemonkey-fr|Greasemonkey]] insèrent une icône dans la linge à l'intérieur de la page.
* D'autres scripts [[Greasemonkey-fr|Greasemonkey]] insèrent une icône dans la linge à l'intérieur de la page.


===boutons navigateurs===
===boutons navigateurs===
* [[Miffy-fr|Miffy]] insère un carré vert dans le document pour représenter la présence d'un microformat.
* [[Miffy-fr|Miffy]] insère un carré vert dans le document pour représenter la présence d'un microformat.


=== Feuilles de style utilisateur CSS===
=== Feuilles de style utilisateur CSS===
* Jon Hicks a écrit [http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css a user une feuille de style pour les navigateurs Mac] qui met en valeur les données hCard et hCalendar.
* Jon Hicks a écrit [http://www.hicksdesign.co.uk/journal/highlight-microformats-with-css a user une feuille de style pour les navigateurs Mac] qui met en valeur les données hCard et hCalendar.


=== planning & discussion ===
=== planning & discussion ===
*[http://wiki.mozilla.org/Microformats Discussion de la détection de microformat detection dans Firefox 3]
*[http://wiki.mozilla.org/Microformats Discussion de la détection de microformat detection dans Firefox 3]
*[http://wiki.mozilla.org/Microformats/UE/ideas brainstorming Interface Utilisateur sur le Wiki Mozilla]
*[http://wiki.mozilla.org/Microformats/UE/ideas brainstorming Interface Utilisateur sur le Wiki Mozilla]
* Le [http://wiki.caminobrowser.org/Development:Planning:Microformats wiki Camino a une page] ou le futur support des microformats est en train d'être discuté et organisé.
* Le [http://wiki.caminobrowser.org/Development:Planning:Microformats wiki Camino a une page] ou le futur support des microformats est en train d'être discuté et organisé.


== langages de balisage plus simples ==
== langages de balisage plus simples ==
Il existe beaucoup de [[wiki-formats-fr|wiki-formats]] qui tentent de faciliter la publication de balisage sémantique, souvent avec des ponctuations textuellement décoratives.
Il existe beaucoup de [[wiki-formats-fr|wiki-formats]] qui tentent de faciliter la publication de balisage sémantique, souvent avec des ponctuations textuellement décoratives.


Parce que ces langages plus simples de syntaxe sont quelque chose pour lesquelles les *utilisateurs* sont attendus pour la saisie, ce sont des interfaces-utilisateurs.
Parce que ces langages plus simples de syntaxe sont quelque chose pour lesquelles les *utilisateurs* sont attendus pour la saisie, ce sont des interfaces-utilisateurs.


=== extension markdown pour hCalendar ===
=== extension markdown pour hCalendar ===
Voir [http://article.gmane.org/gmane.text.markdown.general/2027 Markdown and the hCal microformat] qui propose une extension pour le langage de balisage Markdown afin de capturer et représenter la sémantique 'event' du hCalendar dans un formulaire éditable par un humain.
Voir [http://article.gmane.org/gmane.text.markdown.general/2027 Markdown and the hCal microformat] qui propose une extension pour le langage de balisage Markdown afin de capturer et représenter la sémantique 'event' du hCalendar dans un formulaire éditable par un humain.


== voir aussi ==
== voir aussi ==
Line 147: Line 146:
* [[mobile-fr|mobile]]
* [[mobile-fr|mobile]]
* [[hcard-user-interface-fr|hCard-interface-utilisateur]]
* [[hcard-user-interface-fr|hCard-interface-utilisateur]]
* [[data-portability-fr|portabilité des données]]
* [[data-portability-fr|portabilité des données]]
* [[social-network-portability-fr|portabilité-du-réseau-social]]
* [[social-network-portability-fr|portabilité-du-réseau-social]]

Revision as of 20:56, 4 January 2009

Interface Utilisateur

Il y a eu récemment beaucoup de très bonnes idées d'interfaces-utilisateurs et des suggestions pour travailler sur les microformats. Cette page sert à rassembler et documenter de façon à ce que nous puissions être inspirés et itérer sur les travaux des autres.

lignes de conduite de design

Ce sont quelques lignes de conduite suggérées par Alex Faaborg, un designer d'expérience utilisateur chez Mozilla à destination des designers Web et les développeurs :

  • Design fondé sur des actions, pas sur les données. Un bouton qui dit "Envoyer vers le Calendrier" est considérablement plus utilisable qu'un bouton vert qui dit simplement "hCalendar".
  • Utiliser des images iconiques plutôt que des acronymes. En plus d'être plus descriptif, elles se localisent mieux. En voici quelques-unes que j'ai présentées dans différentes conférences : microformat icons. Elles sont encore très préliminaires. Mozilla sortira probablement tout le travail de source pour nos icônes microformats sous une licence creative commons durant le lancement de Firefox 3. Ceci permettra aux designers Web d'intégrer les icônes à l'intérieur de leurs sites et les autres navigateurs Web peuvent considérer d'utiliser un ensemble similaire d'icônes.

défis de design

  • Chris Messina : "Quels types de solutions pouvons-nous monter qui soient en un clic seulement ?"
  • Alex Faaborg : Mozilla a reçu des demandes de journalistes travaillant dans les grands médias (Wired et Business Week) qui voulaient couvrir les microformats dans les articles traitant du futur du navigateur Web, mais ils ont ensuite fait marche arrière parce qu'ils pressentaient que le terme "microformats" ne séduirait que les développeurs et pas le lecteur moyen. Ces types d'articles généraux ont besoin de se reconcentrer sur l'expérience utilisateur et non sur la technologie sous-jacente, mais quel terme devraient utiliser les reporters pour décrire la fonctionnalité générale ?
    • Je pense que nous devrions nous accrocher au terme "microformats" jusqu'à ce que quelqu'un puisse trouver un meilleur terme qui ne "séduise pas uniquement que les développeurs". Remarquez que nous devrions éviter les termes qui sont soit surchargés, ou diluent les concepts, ou sont simplement juste une autre forme de jargon. Tantek

portabilité réseau social

Voir la page séparée portabilité du réseau social.

intégration navigateur

A partir des visions en passant par les photos d'écrans de brainstorms, les plugins fonctionnels jusqu'aux implémentations en cours de livraison, il y a beaucoup de choses en cours concernant l'intégration avec le navigateur du support des microformats.

actuellement

  • Le navigateur Flock est livré avec un support intégré des microformats. - non confirmé à cette heure -- Chris Messina.
  • Le plugin Operator ajoute la détection de microformats et l'intégration à Firefox version 1.5-2, Netscape Navigator versions 9 et Flock 1.0
    micro-netscape.png
  • Un plugin microformats Safari a été implémenté (requiert OSX10.5) basé sur la maquette de Jon Hicks :
    2036669631_6e99870645.jpg

bientôt

  • Firefox version 3.0 a un support similaire à l'intégration d'Operator. Voir la page Firefox pour les détails.

vision

informationBroker.jpgNavigateur Web comme un Broker d'Information - partie d'un billet de blog d'Alex Faaborg sur Microformats - Les Types Fondamentaux

en général

Le support navigateur pour les microformats consiste en général en trois choses :

  1. Détecter automatiquement la présence de microformats sur une page
  2. Les parser en un ensemble de microformats pour cette page (en maintenant de préférence leurs relations relatives peut-être à l'intérieur d'une structure en arbre)
  3. Faire quelque chose d'utile avec eux.

faire quelque chose d'utile

Faire quelque chose d'utile pourrait être l'une ou toutes ces choses :

  • Interface Utilisateur : Indiquer la présence de microformats et fournir à l'utilisateur une interface utilisateur supplémentaire pour les actions communes à prendre avec ces microformats.
  • API : Fournir une API (extensions DOM sur l'objet "document" ?) pour accédér à ces microformats pour les développeurs d'extensions de navigateurs.
  • Cache : cacher cet ensemble/arbre de microformats analysés avec les URL/Titre/date-accès de la page dans l'"Historique" de navigation navigateur ou même le cache de la page, et puis utiliser cet ensemble d'objets pour différents usages d'auto-remplissage et autres améliorations aux fonctionnalités existantes des navigateurs.

indiquer la présence de microformats

Les navigateurs peuvent indiquer la présence de microformats à plusieurs niveaux.

Discussion et maquettes / screenshots pour indiquer la présence de microformats :

Outils de Publication

Exemples et idées d'outils pour publier des microformats dans les outils CMS.

Ce serait agréable de disposer d'un bookmarklet que vous pourriez juste presser sur une portion de texte sélectionnée dans une aire de texte ou un éditeur WYSIWYG pour transformer une hcard avec juste FN, et ne pas avoir à remplir de formulaire. Bien que cela ne nous donne pas une information riche, c'est vraiment facile et ne crée pas trop de charge de travail supplémentaire.

Interface utilisateur supplémentaire

Quelques exemples d'interfaces-utilisateur supplémentaires pour les actions communes à prendre avec les microformats trouvés dans les pages, groupés par microformat spécifique. Remarquez que la plupart de ces actions devraient pouvoir être applicables à toutes les instances du microformat sur la page en une fois (par exemple exporter tous les contacts), ou pour une sélection d'instances (par exemple exporter les contacts sélectionnés), ou juste pour une instance spécifique (par exemple exporter contact XYZ.)

  • hCard - voir Interfaces-utilisateur supplémentaires
  • hCalendar
    • "Ajouter au calendrier" (convertit les événements hCalendar en vEventes iCalendar (.ics) et les passe sur l'OS pour les ouvrir/incorporer automatiquement l'intérieur de l'application locale de calendrier préférée par l'utilisateur).
    • ajouter à gCalendar, Yahoo Calendar, Upcoming, Eventful (etc.)
    • "S'abonner au calendrier" - construit et passer sur une URL de conversion (par ex en utilisant X2V, ou en ajoutant un préfixe à l'URL vers la page en cours (ou pour l'événement spécifique en utilisant un identifiant fragment) avec webcal://feeds.technorati.com/events/ ) et la passer sur l'OS pour faire que l'OS passe l'URL sur l'application locale de calendrier préférée de l'utilisateur pour que cette application puisse s'abonner.
    • exporter sous texte/ comma-separated-variables (CSV) pour permettre l'édition, le tri et / ou l'importation à l'intérieur de feuilles de calcul / bases de données, etc. (ou concaténation vers fichier existant).
  • adr
    • exporter une vCard, soit en faisant apparaître un nom, ou en utilisant l'emplacement texte par défaut
    • l'exporter sous text/ CSV comme au-dessus
    • trouver sur une carte choisie par l'utilisateur
    • trouver les images, l'hôtel et restaurant les plus proches... en utilisant le site choisi par l'utilisateur
    • voir aussi Interfaces-utilisateur supplémentaires


  • Geo
    • trouver sur une carte du choix de l'utilisateur
    • trouver des photos, l'hôtel le plus proche, le restaurant le plus proche, etc. en utilisant un site du choix de l'utilisateur
    • exporter sous un fichier KML/ GPX ; ou concaténer vers un fichier existant
    • exporter sous texte/CSV comme ci-dessus
    • envoyer (dans un format adéquat) via bluetooth vers un terminal GPS.
  • hReview
    • Si l'item est un livre, chercher dans les sites de librairies du choix de l'utilisateur
    • Si l'item est un livre, générer des COinS ou tout autre marquage de citation standard
    • Si l'item est un livre, film/ DVD, CD, etc., chercher parmi le(s) sites marchands du choix de l'utilisateur
  • hAtom
    • laisser l'utilisateur s'abonner à la page sous une série de hentrys hAtom
      • challenges à garder en tête :
        • what if user goes to permalink of a blog post and that has just one static hentry - does subscribe make sense? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
        • or if user goes to an archive page which just has a set of static hentry items - again, how does subscribe help? wouldn't it be better if the default subscribe verb in that context subscribed to the blog home page?
        • possible solution: using a combination of rel-home and rel-archive (one of several already widely deployed valeurs rel existantes in WordPress and other outils de blogging), it may be possible to identify the home page of a blog from a post permalink or archive page, or vice versa, and thus enable a smarter "subscribe to this blog" functionality.


Discussion et maquettes / photos-écrans d'interface-utilisateur supplémentaire pour les microformats (quelques screenshots sont uniquement disponibles sur les liens de destination, cliquez dessus svp).

implémentations

Voir implémentations, et documentez les exemples de bonnes interfaces utilisateurs ici à partir d'ici et là-bas.

plugins

  • Extension Operator pour Firefox
  • Tails Export (extension Firefox) par Robert de Bruin peut afficher et exporter quelques microformats.

scripts utilisateur Greasemonkey

boutons navigateurs

  • Miffy insère un carré vert dans le document pour représenter la présence d'un microformat.

Feuilles de style utilisateur CSS

planning & discussion

langages de balisage plus simples

Il existe beaucoup de wiki-formats qui tentent de faciliter la publication de balisage sémantique, souvent avec des ponctuations textuellement décoratives.

Parce que ces langages plus simples de syntaxe sont quelque chose pour lesquelles les *utilisateurs* sont attendus pour la saisie, ce sont des interfaces-utilisateurs.

extension markdown pour hCalendar

Voir Markdown and the hCal microformat qui propose une extension pour le langage de balisage Markdown afin de capturer et représenter la sémantique 'event' du hCalendar dans un formulaire éditable par un humain.

voir aussi