Communication

De Mi caja de notas

Révision datée du 22 juin 2016 à 20:05 par Xtof fr (discussion | contributions) (→‎Cas d'Usages Supplémentaires)

Dans le contexte indieweb cette page a démarré sur iwc:communication et migrera après traduction sur iwc:communication-fr pour façonner un premier essai de carte de visite

Cette page a démarré sur communication


Cet article est une débauche. Vous pouvez m’aider à l'améliorer.


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

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

Placez une h-card sur votre page d'accueil avec des liens vers les moyens avec lesquels vous souhaitez être contacté, dans votre ordre de préférence.

Ajouter une interface de contact

Mettez cette h-card sur une page /contact séparée sur votre site Web, par exemple sur vous.exemple.com/contact avec :

  1. des icônes facilement reconnaissables/cliquables pour chaque lien vers un moyen de vous contacter.
  2. En option : montrer conditionnellement /cacher les moyens de vous contacter en fonction de :
  3. * le navigateur du terminal / OS
  4. * 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

portrait Tantek Çelik experime avec 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) comprenant :

  • 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 les icônes pour lier vers un petit ensemble pratique de moyens pour le contacter 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é/désactivé 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 :

    1. Soumettre le message au serveur Indie Web du destinataire
    2. 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)

    1. webaction pour envoyer un message direct
    2. géré par le gestionnaire indie-config de l'expéditeur déjà enregistré
    3. le propre site de l'expéditeur affiche une UI de confirmation en popup pour envoyer ce message au destinataire
    4. Le site de l'expéditeur enregistre le message à un permalien privé
    5. Et envoie un message privé IndieWeb à partir de son site vers le site du destinataire
    6. Le site web du destinataire enregistre une copie du message privé sur un permalien privé
    7. 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)

    1. have already gotten Micropub authorization from the sender at sign-in time
    2. use Micropub to private publish the message as a private outgoing message on the sender's website
    3. the sender's site saves the message at a private permalink
    4. and sends a IndieWeb private message from their site to the recipient's site
    5. the recipient's website saves a copy of the private message at a private permalink
    6. the recipient's IndieWeb server sends a push notification to the recipient's currently active client devices (e.g. mobile, laptop).

So people can txt you without ever leaving the web, or depending on a 3rd party site/intermediary/service/addressing system.

Fallback:

  • without IndieAuth sign-in, fallback to a page of existing services
    • sms, FB Messenger, Gtalk, email, Twitter DM

Boutons appel et vidéo

[call] + [video] -> initiate a WebRTC call (e.g. Firefox Hello) with only-voice or video+voice accordingly

  • assuming your client browser supported that
    • if not, it can fall back to a page of existing services
      • FaceTime, Skype, etc.

Ideally the mechanism for an audio call, while in-progress, could allow the caller and/or callee to opt-in to allowing for video, and if both did so, the audio call would be upgraded to audio+video.

Verb redirect URLs

Might be convenient to setup a few redirect URLs (perhaps even as a building block of said 3 button UI)

  • /txt and/or /sms - redirects to an SMS: URL for you, or provides a simple SMS txting UI (similar to such UIs on mobile apps like iMessage, Google Hangouts etc.)
  • /call - redirects to a FaceTime (audio) URL, or tel: URL, or provides a WebRTC start call UI.
  • /facetime - redirects to a FaceTime (video) URL to make a video call

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 expanded

When a viewer taps the Contact icon folder it expands as follows, and then the viewer can tap the mode of messaging/communicating they want to use to contact me which immediately opens a new message (txt, FB Messenger, G+ Hangouts, AIM IM), or starts a new call (FaceTime, Skype), or Twitter new direct message window. Directly to communicating - bypassing all comm app home page / activity distractors.

The one change I'd make from these mockups are some of the labels. All of the labels should be verbs, not nouns, indicating the action the user wants to take and thus reinforcing their intention.

E.g. "Messages" should be "txt message", "Messenger" should be "FB message", "Hangouts" should be "GTalk", and the rest seem to read fine as verbs.



iOS6 mockups

Original prototypes done in iOS6, probably not worth implementing, but may contain interesting UI ideas nonetheless:



Contact expanded

The one change I'd make from these mockups are some of the labels. All of the labels should be verbs, not nouns, indicating the action the user wants to take and thus reinforcing their intention.

E.g. "Messages" should be "txt message", "Messenger" should be "FB message", "Hangouts" should be "GTalk", and the rest seem to read fine as verbs.



Improving Install Experience

Currently sites have to use a convoluted script to attempt to prompt the user to add their comms page to the home screen AKA install it.

"Web App install banners" may be one way of improving this UX, but it requires that your comms page be / have:

Limites :

  • The user must visit your site "twice over two separate days during the course of two weeks."[3]
    • This fails to address the use-case of meeting in person and exchanging contact (web) addresses and expecting it to be one-click "installable" upon loading the page *once*

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 :

Articles concernant la recherche et la résolution de communication personnelle basée sur indieweb :

Voir aussi

Récupérée de « https://ducamp.me/index.php?title=Communication&oldid=1809 »