Revision as of 06:37, 29 September 2007

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.

Implémentations

Voir les implémentations, et exemples de documents de bonnes IU :

Miffy insère un carré vert dans le document pour représenter la présence d'un microformat.
Quelques scripts Greasemonkey utilisent un iframe séparé pour le contenu microformaté.
D'autres scripts Greasemonkey insèrent une icône dans la ligne à l'intérieur de la page
Tails Export (extension Firefox) peut afficher et exporter quelques microformats.

Lignes de Conduite de Design

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

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. Voici quelques-unes que j'ai présenté 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 utiliser un ensemble similaire d'icônes.

Défis

Chris Messina : "Quels types de solutions pouvons-nous monter qui soient en un clic seulement ?"
Andy Mabbett : Comment pouvons-nous les rendre accessibles aux personnes ayant (par exemple) des déficiences visuelles ?
Alex Faaborg : Mozilla a reçu des demandes de reporters 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 ?

Portabilité Réseau Social

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

Intégration Navigateur

A partir de brainstorms de photos d'écrans pour travailler sur les plugins, il y a beaucoup de choses en cours concernant l'intégration avec le navigateur du support des microformats.

Photos Ecrans

Maquettes Conceptuelles de Détection de Microformat dans Firefox 3

Plugins

La page implémentations microformats a quelques scripts Greasemonkey.
http://greasemonkey.makedatamakesense.com/callto_tel/ de Scott Reynen
Tails Export (extension Firefox) par Robert de Bruin.
Jon Hicks a écrit a user une feuille de style pour les navigateurs Mac qui met en valeur les données hCard et hCalendar.

Planning & Discussion

Discussion de la détection de microformat detection dans Firefox 3
brainstorming Interface Utilisateur sur le Wiki Mozilla
Le wiki Camino a une page ou le futur support des microformats est en train d'être discuté et organisé.

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

@@ Line 1: / Line 1: @@
 <h1> Interface Utilisateur </h1>
 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.
@@ Line 6: / Line 5: @@
 == Implémentations ==
-Voir les [[implementations-fr|implémentations]], et exemples de documents de bonnes IU à partir de là et d'ici.
+Voir les [[implementations-fr|implémentations]], et exemples de documents de bonnes IU :
 * [[Miffy-fr|Miffy]] insère un carré vert dans le document pour représenter la présence d'un microformat.
 * Quelques scripts [[Greasemonkey-fr|Greasemonkey]] utilisent un iframe séparé pour le contenu microformaté.
@@ Line 23: / Line 22: @@
 == Portabilité Réseau Social ==
-Pourquoi chacun des sites communautaires de réseau social vous oblige à :
+Voir la page séparée [[social-network-portability-fr|portabilité du réseau social]].
-* re-saisir toutes vos informations de profil personnel (nom, email, date de naissance, URL, etc.)
-* ajouter à nouveau tous vos amis
-?
-Au lieu de cela, voyons quelques suggestions d'interface utilisateur pour les sites afin de simplifier l' ''importation'' ou même mieux de ''s'abonner à'' :
-* votre [[hcard-fr|hCard]] à partir de votre URL (blog, profil d'un autre service, etc.)
-* votre liste de contacts [[xfn-fr|XFN]], connaissances, amis etc. à nouveau à partir de votre URL (blog, etc.)
-Suggestions et discussions concrètes :
-* Jeremy Keith : [http://adactio.com/journal/1209/ Twittering] : <blockquote><p>Voici ce que je veux : quand je vais sur le dernier site de réseau social à la mode, je veux qu'il me demande mon URL. Puis il peut s'en aller et charger ma [[hcard-fr|hCard]] et ma liste [[xfn-fr|XFN]]. Un formulaire pré-rempli pour mes détails et une liste pré-remplie de contacts potentiels peut ensuite m'être présentée.</p></blockquote>
-* Derek Featherstone : [http://www.boxofchocolates.ca/archives/2006/11/21/solving-problems-with-social-networking Solving problems with social networking]
-* Jeremy Keith : [http://adactio.com/journal/1212/ More thoughts on portable social networks]
-* Glenn Jones : [http://www.glennjones.net/Post/820/Microformatsandportablesocialnetwork.htm Microformats and portable social network]
-* Velvetsarah a [http://www.velvet.id.au/2006/11/23/portable-social-networks/ posté une photo d'écran et un brainstorm] sur la manière dont un site pourrait gérer les contacts qualifiés XFN.
-[http://www.velvet.id.au/2006/11/23/portable-social-networks/ http://www.velvet.id.au/out/wp-content/uploads/2006/11/picture-9.png]
-=== Portabilité Réseau Social FAQ ===
-*''[http://openid.net/ OpenID] ne résoud-il pas le problème de resaisir tout votre profil d'information personnel ?''
-** Non il ne fait pas ça. OpenID est fondamentalement le fait de prouver à un site que vous possédez ou contrôler une autre URL particulière. Rien de plus. Tout le truc profil est en plus et même alors l'ensemble de propriétés spécifiques n'est pas spécifié dans OpenID.  C'est là où [[hcard-fr|hCard]] entre en jeu.  hCard spécifie un vocabulaire d'information de profil (nom, email, anniversaire, URL etc.) basé sur vCard. Et en fait c'est tout ce dont vous avez besoin pour résoudre le problème "re-saisir toute votre information de profil" pour les sites publics - pas besoin d'authentifier des URLs publiques via OpenID, lisez les simplement et parsez leurs hCard(s).
 == Intégration Navigateur ==
 A partir de brainstorms de photos d'écrans pour travailler sur les plugins, il y a beaucoup de choses en cours concernant l'intégration avec le navigateur du support des microformats.
@@ Line 53: / Line 32: @@
 * [http://ben-ward.co.uk/journal/microformats-ui/ Ben Ward: Microformats dans les Navigateurs Web] <br /> [http://ben-ward.co.uk/journal/microformats-ui/ http://ben-ward.co.uk/res/posts/uf-web-browser/autodiscovery.png]
 * [http://blog.wilsonet.com/archives/2006/04/30/microformats-in-flock/ Microformats dans Flock] <br /> [http://blog.wilsonet.com/archives/2006/04/30/microformats-in-flock/ http://blog.wilsonet.com/mockups/Flock/Flock-PickContacts_thumbnail.png]
+* [http://glazkov.com/blog/margin-marks/ Margin Marks UI Concept], [http://flickr.com/photos/dglazkov/sets/72157601860335196/ Margin Marks Comps on Flickr]
 === Plugins ===
 * La page [[implementations-fr|implémentations]] microformats a quelques scripts Greasemonkey.
 * http://greasemonkey.makedatamakesense.com/callto_tel/ de Scott Reynen
@@ Line 67: / Line 46: @@
 == 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.
@@ Line 73: / Line 51: @@
 === 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 ==
+* [[hcard-user-interface-fr|hCard-interface-utilisateur]]
+* [[data-portability-fr|portabilité des données]]
+* [[social-network-portability-fr|portabilité-du-réseau-social]]