Communication - Historique des versions

Xtof le 24 juin 2022 à 06:55

2022-06-24T06:55:35Z

Xtof : Aider Marion à faire sa page contact.

2022-03-02T05:31:18Z

Aider Marion à faire sa page contact.

Xtof le 9 avril 2018 à 16:40

2018-04-09T16:40:58Z

Xtof le 22 juin 2016 à 20:39

2016-06-22T20:39:24Z

Voir les modifications

Xtof fr : /* Exemples IndieWeb */

2016-06-22T20:08:21Z

Exemples IndieWeb

Xtof fr : /* Comment */

2016-06-22T20:07:15Z

Comment

Xtof fr : /* Cas d'Usages Supplémentaires */

2016-06-22T20:05:58Z

Cas d'Usages Supplémentaires

Xtof fr : /* Cas d'Usages Supplémentaires */

2016-06-22T20:05:44Z

Cas d'Usages Supplémentaires

Xtof : Page créée avec « 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 car... »

2016-06-22T17:04:47Z

Page créée avec « 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 car... »

Nouvelle page

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]]''

{{stub-fr}}

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 ==
=== 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.

=== Ajouter une carte de contact ===
Placez une [[h-card-fr|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 <samp>/contact</samp> séparée sur votre site Web, par exemple sur vous.exemple.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 :
* http://tantek.com/2014/120/b1/markup-people-focused-mobile-communication

Pour des exemples, [[#Exemples_IndieWeb|voir en-dessous]].

== Pourquoi ==
Voir :
* <cite>[http://tantek.com/2013/338/b1/people-focused-mobile-communication-experience Toward A People Focused Mobile Communication Experience]</cite>

== Exemples IndieWeb ==
Les membres de la communauté IndieWeb faisant ça
=== Tantek ===
{{t}} 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'[[2014|IndieWebCamp 2014]])
* 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}}). 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>
var addtohome = addToHomescreen({
maxDisplayCount: 1,
detectHomescreen: "hash"
});
</script>
</nowiki></code></blockquote>

=== Tim Owens ===
[[User:Timowens.io|Tim Owens]] a réglé une belle page de comm indie sur http://timowens.io/contact/ depuis le 2014-10-11 (à [[2014/Cambridge|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 ===
[[User:Werd.io|Ben Werdmuller]] utilisait les icônes pour lier vers un petit ensemble pratique de moyens pour le contacter sur sa page d'accueil [http://werd.io/ werd.io]. (2014-...-...?)

== Projets ==
=== Lets Talk ===
'''<dfn>[http://userscripts.org/scripts/show/408847 Let's Talk]</dfn>''' est un script utilisateur qui affiche les [[h-card]]s 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 <kbd>/contact</kbd> de quelqu'un) devrait avoir trois boutons :

<pre>
[txt] [call] [video]
</pre>
(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

<pre>
(Connexion) (s'il n'est pas déjà connecté avec indieauth)
[ aire de message texte ]
(Envoyer)
</pre>
(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 [[push notification|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 [[push notification|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)
*# have already gotten [[Micropub]] authorization from the sender at sign-in time
*# use Micropub to private publish the message as a private outgoing message on the sender's website
*# the sender's site saves the message at a private permalink
*# and sends a IndieWeb private message from their site to the recipient's site
*# the recipient's website saves a copy of the private message at a private permalink
*# 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)

* <kbd>/txt</kbd> and/or <kbd>/sms</kbd> - 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.)
* <kbd>/call</kbd> - redirects to a FaceTime (audio) URL, or tel: URL, or provides a WebRTC start call UI.
* <kbd>/facetime</kbd> - 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 :

<div style="border:.5em solid gray;float:left">[[File:mobile-personal-home-icons-folders-ios7.jpg]]<br/>[[File:2013-346-tantek-home-posts.jpg]]</div><br style="clear:both"/>

==== 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.

<div style="border:.5em solid gray;float:left">[[File:mobile-personal-home-contact-ios7.jpg]]<br/>[[File:2013-346-tantek-home-posts.jpg]]</div><br style="clear:both"/>

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

<div style="border:.5em solid gray;float:left">[[File:mobile-personal-home-icons-folders-mockup.jpg]]<br/>[[File:2013-346-tantek-home-posts.jpg]]</div><br style="clear:both"/>

'''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.

<div style="border:.5em solid gray;float:left">[[File:mobile-personal-home-contact.jpg]]<br/>[[File:2013-346-tantek-home-posts.jpg]]</div><br style="clear:both"/>

=== 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.

"[http://updates.html5rocks.com/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android Web App install banners]" may be one way of improving this UX, but it requires that your comms page be / have:
* [[HTTPS]]
* have a [[web app manifest]][http://updates.html5rocks.com/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android] (see [https://github.com/GoogleChrome/samples/tree/gh-pages/app-install-banner sample manifest])
** short_name
** 144x144 png icon with explicit mime type of image/png
* a [[service worker]][http://www.html5rocks.com/en/tutorials/service-worker/introduction/] registered on the site, e.g. see the [https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js simple custom offline page example]

Limites :
* The user must visit your site "twice over two separate days during the course of two weeks."[http://updates.html5rocks.com/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android]
** 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 ===
When communicating from one indieweb user to another, how do you authenticate that the person you are communicating with is actually the person you think it is? This applies to [[messaging]] in general.

(This use-case is a stub and should be expanded)

Lors de la communication d'un utilisateur indieweb à un autre, comment voulez-vous authentifier que la personne avec qui vous communiquez est en fait la personne que vous pensez être ? Cela vaut pour la [[messaging-fr|messagerie]] en général.

(Ce cas est une ébauche et devrait être développé)

== Articles ==
Articles sur quelques-uns des défis de communication basée sur les personnes :
* <span class="h-cite"><time class="dt-published">2013-11-18</time> <span class="p-publisher">WIRED</span>: <cite class="p-name">[http://www.wired.com/2013/11/canwetalk/ Can We Talk?]</cite> by <span class="p-author h-card">Mat Honan</span>. <span class="u-url">http://www.wired.com/2013/11/canwetalk/ </span></span>

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

* <span class="h-cite"><time class="dt-published">2014-04-30</time> <span class="p-author h-card">Tantek Çelik</span>: <cite class="p-name">[http://tantek.com/2014/120/b1/markup-people-focused-mobile-communication Markup For People Focused Mobile Communication]</cite></span>
* <span class="h-cite"><time class="dt-published">2014-03-25</time> <span class="p-author h-card">Tantek Çelik</span>: <cite class="p-name">[http://tantek.com/2014/084/b1/urls-people-focused-mobile-communication URLs For People Focused Mobile Communication]</cite></span>
* 2014-03-19 Ben Werdmüller: [http://werd.io/2014/seeking-an-indieweb-alternative-to-google-voice Seeking an #indieweb alternative to Google Voice]
* <span class="h-cite"><time class="dt-published">2014-03-08</time> <span class="p-author h-card">Tantek Çelik</span>: <cite class="p-name">[http://tantek.com/2014/067/b2/mockups-people-focused-mobile-communication Mockups For People Focused Mobile Communication]</cite></span>
* <span class="h-cite"><time class="dt-published">2014-03-08</time> <span class="p-author h-card">Tantek Çelik</span>: <cite class="p-name">[http://tantek.com/2014/067/b1/building-blocks-people-focused-mobile-communication Building Blocks For People Focused Mobile Communication]</cite></span>
* <span class="h-cite"><time class="dt-published">2013-12-04</time> <span class="p-author h-card">Tantek Çelik</span>: <cite class="p-name">[http://tantek.com/2013/338/b1/people-focused-mobile-communication-experience Toward A People Focused Mobile Communication Experience]</cite></span>

== Voir aussi ==
* [[homepage-fr|homepage]]
* [[icon-fr|icône]]
* [[mobile-fr|mobile]]
* [[messaging-fr|messagerie]]

@@ Ligne 1 : / Ligne 1 : @@
 {{stub-fr}}
-<q>Cette page a démarré sur [[iwc:communication]]<ref>ELle migrera sur [[iwc:communication-fr]] pour façonner un premier essai de carte de visite en ligne pour [[Marion]] -{{xtof}}</ref>.
+<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>.

@@ Ligne 176 : / Ligne 176 : @@
 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 [[messaging-fr|messagerie]] en général.
-(Ce cas d'usage est une ébauche et devriat être développé)
+(Ce cas d'usage est une ébauche et devrait être développé)
 == Articles ==

@@ Ligne 1 : / Ligne 1 : @@
-Cette page a démarré sur [[iwc:communication]] et migrera sur [[iwc:communication-fr]] pour façonner un premier essai de carte de visite en ligne.
+{{stub-fr}}
 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 ==
+== Comment faire ==
 === 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.
 === Ajouter une carte de contact ===
-Placez une [[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.
+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 ===
-Posez cette h-card sur une page <samp>/contact</samp> séparée sur votre site Web, par exemple sur vous.exemple.com/contact avec :
+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.
 # En option : montrer conditionnellement/cacher les moyens de vous contacter en fonction de :

@@ Ligne 1 : / Ligne 1 : @@
-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 [[iwc:communication]] et migrera sur [[iwc:communication-fr]] pour façonner un premier essai de carte de visite en ligne.
@@ Ligne 36 : / Ligne 34 : @@
 {{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]])
-* 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>
+* 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>
 var addtohome = addToHomescreen({
@@ Ligne 66 : / Ligne 64 : @@
 (screenshot/maquette demandée !)
-Peut-être activé/désactivé selon la connexion, l'heure de la journée, le statut du sommeil, etc.
+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 :

@@ Ligne 34 : / Ligne 34 : @@
 Les membres de la communauté IndieWeb faisant ça
 === Tantek ===
-{{t}} 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'[[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]])
 * 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>
@@ Ligne 46 : / Ligne 46 : @@
 === Tim Owens ===
-[[User:Timowens.io|Tim Owens]] a réglé une belle page de comm indie sur  http://timowens.io/contact/ depuis le 2014-10-11 (à [[2014/Cambridge|IndieWebCamp Cambridge]]) comprenant :
+[[User:Timowens.io|Tim Owens]] a réglé une belle page de comm indie sur http://timowens.io/contact/ depuis le 2014-10-11 (à [[2014/Cambridge|IndieWebCamp Cambridge]]) :
 * affiche une instruction animée "Add to Homescreen" en menu déroulant lors du premier chargement.

@@ Ligne 174 : / Ligne 174 : @@
 == Cas d'Usages Supplémentaires ==
 === Authentification ===
-When communicating from one indieweb user to another, how do you authenticate that the person you are communicating with is actually the person you think it is? This applies to [[messaging]] in general.
+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 [[messaging-fr|messagerie]] en général.
-(This use-case is a stub and should be expanded)
+(Ce cas d'usage est une ébauche et devriat être développé)
 == Articles ==