Différences entre versions de « Communication »
De Mi caja de notas
m |
|||
| (2 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | + | {{stub-fr}} | |
| − | |||
| − | |||
| − | |||
| − | + | <q>Cette page a démarré sur [[iwc:communication]] | |
La '''<dfn>communication</dfn>''' dans le contexte de l'indieweb fait référence à l'utilisation de votre site personnel comme un point de départ et un moyen potentiel pour que les personnes vous <dfn>contactent</dfn>. | La '''<dfn>communication</dfn>''' dans le contexte de l'indieweb fait référence à l'utilisation de votre site personnel comme un point de départ et un moyen potentiel pour que les personnes vous <dfn>contactent</dfn>. | ||
| − | == | + | == Comment faire == |
=== Faites de votre page d'accueil un écran d'accueil amical === | === Faites de votre page d'accueil un écran d'accueil amical === | ||
Ajoutez un [[icon-fr|icône]] pour votre site personnel afin que les autres puissent ajouter votre site à leurs écrans d'accueil sur leurs appareils. | Ajoutez un [[icon-fr|icône]] pour votre site personnel afin que les autres puissent ajouter votre site à leurs écrans d'accueil sur leurs appareils. | ||
=== Ajouter une carte de contact === | === Ajouter une carte de contact === | ||
| − | + | Déposez [[h-card-fr|h-card]] sur votre page d'accueil avec des liens vers les moyens avec lesquels vous souhaitez être contacté.e, dans votre ordre de préférence. | |
=== Ajouter une interface de contact === | === Ajouter une interface de contact === | ||
| − | Posez cette h-card sur une page <samp>/contact</samp> séparée sur votre site Web, par exemple sur | + | Posez cette h-card sur une page <samp>/contact</samp> séparée sur votre site Web, par exemple sur princesse.com/contact avec : |
# des icônes facilement reconnaissables/cliquables pour chaque lien vers un moyen de vous contacter. | # des icônes facilement reconnaissables/cliquables pour chaque lien vers un moyen de vous contacter. | ||
# En option : montrer conditionnellement/cacher les moyens de vous contacter en fonction de : | # En option : montrer conditionnellement/cacher les moyens de vous contacter en fonction de : | ||
| Ligne 36 : | Ligne 33 : | ||
{{t}} expérimente un prototype sur tantek.com/contact depuis le 2014-11-18 (et précédemment contact.html depuis 2014-06 lors de l'[[2014|IndieWebCamp 2014]]) | {{t}} expérimente un prototype sur tantek.com/contact depuis le 2014-11-18 (et précédemment contact.html depuis 2014-06 lors de l'[[2014|IndieWebCamp 2014]]) | ||
* affichage conditionnel du bouton Facetime seulement pour iOS et MacOS (en date du 2014-10-11 à [[2014/Cambridge|IndieWebCamp Cambridge]]) | * affichage conditionnel du bouton Facetime seulement pour iOS et MacOS (en date du 2014-10-11 à [[2014/Cambridge|IndieWebCamp Cambridge]]) | ||
| − | * instruction menu déroulant "Add to Homescreen" lors du premier chargement (en date du 2014-10-29 à W3C TPAC - vérifiée sur l'iPad d'{{hober}}). | + | * instruction menu déroulant "Add to Homescreen" lors du premier chargement (en date du 2014-10-29 à W3C TPAC - vérifiée sur l'iPad d'{{hober}}). Beaucoup de violon, mais voici le code utilisant la [http://cubiq.org/add-to-home-screen bibliothèque "Add to Home Screen" de Matteo] qui fonctionnait : <blockquote style="white-space:pre"><code style="background:none"><nowiki><script src="/addtohome.min.js"></script> |
<script> | <script> | ||
var addtohome = addToHomescreen({ | var addtohome = addToHomescreen({ | ||
| Ligne 66 : | Ligne 63 : | ||
(screenshot/maquette demandée !) | (screenshot/maquette demandée !) | ||
| − | Peut-être | + | Peut-être activée/désactivée selon la connexion, l'heure de la journée, le statut du sommeil, etc. |
Les trois boutons se comporteraient comme suit : | Les trois boutons se comporteraient comme suit : | ||
Version actuelle datée du 24 juin 2022 à 06:55
Cet article est une débauche. Vous pouvez m’aider à l'améliorer.
Cette page a démarré sur iwc:communication
La communication dans le contexte de l'indieweb fait référence à l'utilisation de votre site personnel comme un point de départ et un moyen potentiel pour que les personnes vous contactent.
Comment faire
Faites de votre page d'accueil un écran d'accueil amical
Ajoutez un icône pour votre site personnel afin que les autres puissent ajouter votre site à leurs écrans d'accueil sur leurs appareils.
Ajouter une carte de contact
Déposez h-card sur votre page d'accueil avec des liens vers les moyens avec lesquels vous souhaitez être contacté.e, dans votre ordre de préférence.
Ajouter une interface de contact
Posez cette h-card sur une page /contact séparée sur votre site Web, par exemple sur princesse.com/contact avec :
- des icônes facilement reconnaissables/cliquables pour chaque lien vers un moyen de vous contacter.
- En option : montrer conditionnellement/cacher les moyens de vous contacter en fonction de :
- * le navigateur du terminal / OS
- * Votre heure de la journée / interruptibilité
Pour avoir des instructions de balisage détaillées, voir :
Pour des exemples, voir en-dessous.
Pourquoi
Voir :
Exemples IndieWeb
Les membres de la communauté IndieWeb faisant ça
Tantek
Tantek Çelik expérimente un prototype sur tantek.com/contact depuis le 2014-11-18 (et précédemment contact.html depuis 2014-06 lors de l'IndieWebCamp 2014)
- affichage conditionnel du bouton Facetime seulement pour iOS et MacOS (en date du 2014-10-11 à IndieWebCamp Cambridge)
- instruction menu déroulant "Add to Homescreen" lors du premier chargement (en date du 2014-10-29 à W3C TPAC - vérifiée sur l'iPad d'Modèle:Hober). Beaucoup de violon, mais voici le code utilisant la bibliothèque "Add to Home Screen" de Matteo qui fonctionnait :
<script src="/addtohome.min.js"></script> <script> var addtohome = addToHomescreen({ maxDisplayCount: 1, detectHomescreen: "hash" }); </script>
Tim Owens
Tim Owens a réglé une belle page de comm indie sur http://timowens.io/contact/ depuis le 2014-10-11 (à IndieWebCamp Cambridge) :
- affiche une instruction animée "Add to Homescreen" en menu déroulant lors du premier chargement.
Précédents exemples
Ben Werdmuller
Ben Werdmuller utilisait des icônes pour faire un lien vers un petit ensemble pratique de moyens de contacts sur sa page d'accueil werd.io. (2014-...-...?)
Projets
Lets Talk
Let's Talk est un script utilisateur qui affiche les h-cards dans un format standard. Quand vous allez sur le site web de quelqu'un, Let’s Talk vous présente en un coup d'oeil comment les contacter et quelles méthodes de contact ils préfèrent. Voir https://snarfed.org/2014-03-10_lets-talk-userscript pour plus de détails.
Brainstorming
UI trois boutons
Idéalement une UI de contact indieweb (par ex. la page /contact de quelqu'un) devrait avoir trois boutons :
[txt] [call] [video]
(screenshot/maquette demandée !)
Peut-être activée/désactivée selon la connexion, l'heure de la journée, le statut du sommeil, etc.
Les trois boutons se comporteraient comme suit :
bouton Txt
[txt] button -> révèle une UI d'entrée de message texte
(Connexion) (s'il n'est pas déjà connecté avec indieauth) [ aire de message texte ] (Envoyer)
(screenshot/maquette demandés !)
Cliquer le bouton (Envoyer) devrait :
Au minimum :
- Soumettre le message au serveur Indie Web du destinataire
- Le serveur IndieWeb du destinataire enverrait un notification push vers les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).
Mieux (avantage : le site de l'expéditeur conserve une copie du message)
- webaction pour envoyer un message direct
- géré par le gestionnaire indie-config de l'expéditeur déjà enregistré
- le propre site de l'expéditeur affiche une UI de confirmation en popup pour envoyer ce message au destinataire
- Le site de l'expéditeur enregistre le message à un permalien privé
- Et envoie un message privé IndieWeb à partir de son site vers le site du destinataire
- Le site web du destinataire enregistre une copie du message privé sur un permalien privé
- Le serveur IndieWeb du destinataire envoie une notification push sur les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).
Même mieux (avantage : pas besoin d'UI de confirmation supplémentaire en popup)
- ont déjà obtenu l’autorisation Micropub de l'expéditeur lors de la connexion dans le temps
- utilise Micropub pour publier en privé le message comme un message sortant privé sur le site Web de l'expéditeur
- le site de l'expéditeur enregistre le message sur un permalien privé
- et envoie un message privé IndieWeb de son site vers le site du destinataire
- le site Web du destinataire enregistre une copie du message privé sur un permalien privé
- le serveur de IndieWeb du destinataire envoie une notification push vers les périphériques clients actuellement actifs du destinataire (par exemple mobile, ordinateur portable).
Par conséquent on peut vous texted sans même quitter le web, ou selon le site/intermédiaire/service/système d’adressage tiers.
Repli :
- Sans IndieAuth connectez-vous, repliez vers une page de services existants
- SMS, FB Messenger, Gtalk, email, Twitter DM
Boutons appel et vidéo
[call] + [video] -> initier un appel WebRTC (par ex. Firefox Hello) avec de la voix seule ou vidéo + voix selon
- supposant que le navigateur de votre client supporte ça
- si non, il peut se replier vers une page de services existants
- FaceTime, Skype, etc.
- si non, il peut se replier vers une page de services existants
Idéalement, le mécanisme pour un appel audio pourrait permettre à l'appelant et/ou l’appelé à faire un opt-in pour permettre la vidéo, et si les deux ont fait, l'appel audio serait mis à niveau vers audio + vidéo.
URLs de redirection
Ce pourrait être pratique de configurer quelques URLs de redirection (peut-être même sous forme de bloc de construction des 3 boutons d’UI)
- /txt et/ou /sms - redirige vers un SMS : URL pour vous, ou fournit une UI simple de SMS text (similaire aux UIs équivalentes sur des apps mobiles comme iMessage, Google Hangouts etc.)
- /call - redirige vers une URL FaceTime (audio), ou tel : URL, ou fournit une UI d’appel de départ WebRTC.
- /facetime - redirige vers URL FaceTime (vidéo) pour produire un appel vidéo.
Maquettes
page accueil iOS7
Voici quelques maquettes sur la façon dont vous pourriez présenter une barre de haut niveau pour la communication, la collaboration et d'autres options familières à un utilisateur iOS 7 iPhone / iPod :
Contact élargi
Quand un lecteur tape l’icône du dossier Contact elle se dilate comme suit, puis le lecteur peut exploiter le mode de messagerie/communication qu'il souhaite utiliser pour me contacter ce qui ouvre immédiatement un nouveau message (txt, FB Messenger, G + Hangouts, AIM IM), ou lance un nouvel appel (FaceTime, Skype), ou une nouvelle fenêtre Twitter de message direct. Directement vers la communication - en contournant tous les distracteurs des apps de communication page d'accueil / d'activité.
Le seul changement que je ferais sur ces maquettes sont quelques-unes des étiquettes. Toutes les étiquettes doivent être des verbes, pas des noms, indiquant l'action que l'utilisateur veut produire et renforçant ainsi son intention.
Par exemple. "Messages" devraient être « texter un message", "Messenger" devrait être "message FB", "Hangouts" devrait être "GTalk", et le reste semble bien se lire sous forme de verbes.
Maquettes iOS6
Les prototypes originaux faits dans iOS6, ne valant probablement pas la peine d’être mis en oeuvre, mais pouvant contenir des idées d'interface intéressantes :
Améliorer Installer Expérience
Actuellement les sites doivent utiliser un script alambiqué pour tenter de demander à l'utilisateur d'ajouter sa page comms à l'écran d'accueil à savoir l’installer.
"Web App installer des bannières" peut être un moyen d'améliorer cette UX, mais il faut que votre page de comms soit/ait :
- HTTPS
- Supporte un manifeste web app [1] (voir échantillon manifeste)
- nom court
- icône 144x144 png avec mime type explicite d'image/png
- Un service worker [2] enregistré sur le site, par exemple voir la page d'exemple simple et personnalisée hors-ligne
Limites :
- L'utilisateur doit visiter votre site "deux fois sur deux jours séparés au cours des deux semaines.» [3]
- Cela ne répond pas au cas d'utilisation de rencontrer en personne et d’échanger des adresses de contact (web) et à s’attendre à être "installable" en un clic lors du chargement de la page.
Cas d'Usages Supplémentaires
Authentification
Au moment de communiquer d'un utilisateur indieweb à un autre, comment authentifiez-vous que la personne avec qui vous communiquez est effectivement la bonne personne à laquelle vous pensez ? Ceci s'applique à la messagerie en général.
(Ce cas d'usage est une ébauche et devrait être développé)
Articles
Articles sur quelques-uns des défis de communication basée sur les personnes :
- WIRED: Can We Talk? by . http://www.wired.com/2013/11/canwetalk/
Articles concernant la recherche et la résolution de communication personnelle basée sur indieweb :
- : Markup For People Focused Mobile Communication
- : URLs For People Focused Mobile Communication
- 2014-03-19 Ben Werdmüller: Seeking an #indieweb alternative to Google Voice
- : Mockups For People Focused Mobile Communication
- : Building Blocks For People Focused Mobile Communication
- : Toward A People Focused Mobile Communication Experience