Différences entre versions de « Home »
De Mi caja de notas
m (→À Propos) |
m (→Commentaire) |
||
| (8 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 15 : | Ligne 15 : | ||
__TOC__ | __TOC__ | ||
| − | == | + | == Comment == |
Qu'est-ce qui devrait figurer sur la page d'accueil de votre site indie web ? | Qu'est-ce qui devrait figurer sur la page d'accueil de votre site indie web ? | ||
=== À Propos === | === À Propos === | ||
| Ligne 51 : | Ligne 51 : | ||
* une [[iwc:blogroll|blogroll]] | * une [[iwc:blogroll|blogroll]] | ||
| − | == IndieWeb | + | == Exemples IndieWeb == |
| − | === | + | === Pages d'Accueil Simples === |
| − | + | Quelques exemples indieweb intéressants de page d'accueil avec une simple information de contact/à propos (par exemple, [[iwc:hcard-fr|h-card]]), cartes ou emplacements, statut live IM, etc. - cela vaudrait probablement la peine de développer et documenter chacune d'elles : | |
| − | * http://scottbullard.com/ - | + | * http://scottbullard.com/ - liens vers téléphone/e-mail avec plus sur http://scottbullard.com/more.html |
| − | * http://www.jaredhanson.net/ - live | + | * http://www.jaredhanson.net/ - statut de MI live sur la hCard de Jared |
| − | * http://npdoty.name/ - | + | * http://npdoty.name/ - carte en arrière-plan centrée sur son emplacement actuel |
| − | * | + | * l'ancienne page de adactio.com (avant-2012) |
| − | + | Ce blog et son post le plus récent : | |
* http://ebdesign.se/ | * http://ebdesign.se/ | ||
| − | + | Cela et les posts de blog occasionnels : | |
* http://aralbalkan.com/ | * http://aralbalkan.com/ | ||
| − | + | La page d'accueil de bear https://bear.im a une [[iwc:h-card|hCard]] super simple et fait un lien vers le [[iwc:h-feed|hFeed]] et une page "About" plus conséquente. | |
| − | === | + | === Flux de Mises à Jour === |
| − | + | Tout cela et la plupart de contenu qu'ils posent en ligne sous forme de flux : | |
| − | + | Exemples composites de flux avec des posts complets : | |
* http://tantek.com/ | * http://tantek.com/ | ||
| − | * http://adactio.com/ ( | + | * http://adactio.com/ (fin 2012+) |
| − | + | Flux de résumés de posts : | |
| − | * {{voxpelli}} http://voxpelli.com/ – | + | * {{voxpelli}} http://voxpelli.com/ – flux des derniers titres de blog |
| − | + | Flux avec seulement les noms/titres des posts | |
* {{bear}} https://bear.im/bearlog | * {{bear}} https://bear.im/bearlog | ||
| − | + | Flux séparés : | |
* http://aaronparecki.com/ | * http://aaronparecki.com/ | ||
| − | * {{voxpelli}} http://voxpelli.com/ – | + | * {{voxpelli}} http://voxpelli.com/ – liens vers des flux séparés pour les signets et les interactions sociales |
| − | == | + | == Brainstorming Page Personnelle == |
Things which could go on homepages which aren’t currently implemented, or are underimplemented. Sometimes there is an intent to implement. | Things which could go on homepages which aren’t currently implemented, or are underimplemented. Sometimes there is an intent to implement. | ||
| Ligne 96 : | Ligne 96 : | ||
I might be adding links to /me (my profile page) and /about (about the site, license info, powered by, hosted at, etc.) to my homepage. --[[User:Sandeep.io|Sandeep Shetty]] | I might be adding links to /me (my profile page) and /about (about the site, license info, powered by, hosted at, etc.) to my homepage. --[[User:Sandeep.io|Sandeep Shetty]] | ||
| − | === | + | === Fonctionnalités de Connexion === |
| − | + | Une fois connecté sur votre propre site, il pourrait être utile d'avoir : | |
| − | * [[reader]] - | + | * un [[reader-fr|lecteur]] - lecteur intégré afffichant les posts des autres que vous suivez |
| − | ** | + | ** exemples à trouver dans les silos une fois connecté sur la page d'accueil : [[Facebook]], [[Twitter]], [[Tumblr]] - tableau de bord connecté |
| − | === | + | === Croquis === |
| − | + | J'ai fait quelques croquis/brainstorming [https://github.com/Taproot/design/blob/master/homepage-brainstorming.jpg here] --[[User:Waterpigs.co.uk|Waterpigs.co.uk]] 14:32, 18 June 2013 (PDT) | |
| − | === Webmention | + | === Webmention vers page personnelle === |
| − | [[ | + | Les [[iwc:webmentions|webmention]]s envoyées directement vers les pages personnelles pourrient servir un certain nombre de cas d'utilisation : |
| − | * [[notification]] | + | * [[iwc:notification|notification]] de la [[iwc:person-mention|mention-personne]] (comme une @-mention indieweb) sur un post quelque part ailleurs |
| − | * [[invitation]] | + | * [[iwc:invitation|invitation]] à un [[iwc:event|événement]] indie |
| − | * notification | + | * notification d'un nouveau [[iwc:message|message]] reçu |
| − | * | + | * permettre à d'autres personnes de vous taguer dans les photos ou les pots |
| − | == | + | == Exemples de Silos == |
| − | + | Les silos ne vous donnent pas accès techniquement à leurs pages d'accueil, mais ils fournissent généralement quelque chose ressemblant à une page d'accueil, les plus souvent un chemin (pas à la racine), et ils appellent ça un profil. Même s'ils devraient vraiment fournir des [[subdomain|sous-domaine]]s au lieu de chemins de profil. | |
=== Twitter === | === Twitter === | ||
| − | + | Par exemple, [[iwc:Twitter|Twitter]] vous permet de personnaliser votre page de profil avec : | |
| − | * [[icon]] - | + | * [[iwc:icon|icône]] - téléversement (min/max resolution/bytes?) |
| − | * [[header image]] - | + | * [[iwc:header image|image de bandeau d'en-tête]] - téléversement (min/max resolution/bytes ?) |
| − | * [[bio]] - 160 | + | * [[iwc:bio|bio]] - champ de texte de 160 caractères, @ et # auto-lié. |
| − | * [[website]] - auto- | + | * [[iwc:website|site web]] - URL auto-liée |
| − | * [[location]] - ??? character text field. | + | * [[iwc:location|emplacement]] - ??? character text field. |
== Articles == | == Articles == | ||
| − | Articles | + | Articles et posts concernant le design de page d'accueil et ses fonctionnalités : |
* <span class="h-cite"><time class="dt-published">2013-12-04</time> <span class="p-author h-card">[http://tantek.com 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> | * <span class="h-cite"><time class="dt-published">2013-12-04</time> <span class="p-author h-card">[http://tantek.com 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> | ||
| Ligne 131 : | Ligne 131 : | ||
* [[2012/UK/Demos]] - specifically, General discussion / UX thoughts. | * [[2012/UK/Demos]] - specifically, General discussion / UX thoughts. | ||
| − | == | + | == Voir aussi == |
| − | * [[about]] | + | * [[iwc:about|à propos]] |
| − | * [[icon]] | + | * [[iwc:icon|icône]] |
| − | * [[payment]] | + | * [[iwc:payment|paiement]] |
| − | * [[webmention]] | + | * [[iwc:webmention|webmention]] |
Version actuelle datée du 10 juin 2016 à 16:01
En chantier : Cette page a démarré sur iwc:home. Au stade de l'étude, la traduction sera déposée une fois terminée sur iwc:home-fr
🏠
Votre page d'accueil vous représente sur le web, généralement placée à la racine et en haut de votre domaine, elle affiche votre nom et une représentation icônique souvent marquée avec une h-card.
Pourquoi
Toutes les raisons du pourquoi et plus encore.
Utilisez votre domaine personnel pour posséder votre identité sur le web.
En rendant votre page d'accueil plus utile, vous vous sentirez plus motivés pour partager votre URL plutôt qu'un simple nom d'utilisateur sur Twitter ou toute autre profil sur un silo.
Comment
Qu'est-ce qui devrait figurer sur la page d'accueil de votre site indie web ?
À Propos
Votre page d'accueil devrait contenir certaines informations basiques vous concernant :
- nom
- icône / photo de profil
- les liens de communication (aim: mailto: tel: etc. voir [1] pour un premier brainstorming d'UI à ce sujet)
- autre à propos / contact information, par ex.
- Liens vers URLs de profils sur les silos, emplacement approximatif , mini-bio, catégories/mots-clés
- marqués avec h-card (voir indiewebify pour vérifier et valider)
- support-connexion-web
- Des liens rel-me vers vos autres identités sur le web
Votre page d'accueil est l'URL que vous partagez avec des personnes, par conséquent il est utilse de la régler avec :
- role - bref résumé de ce que vous êtes/faites
- découverte de ce que vous avez d'autre sur votre site
- Votre heure locale
- Vu la dernière fois (dernier checkin/post d'emplacement)
- événements à venir
- projets en cours
- confidentialité - confidentialité de diffférents types, par ex. cookies ou tracker d'analytics
Flux
Puis, il est populaire d'avoir :
Voir le Flux des Mises à Jour en dessous pour quelque inspiration.
Si vous voyez un flux de posts récents sur votre page personnelle, il peut être aussi utile d'afficher une petite interface de navigation pour vos archives.
Plus : archive navigation.
Avant
Parmi les bloggers des années 2000 (les dinoblogueurs), il était populaire d'avoir aussi sur votre page personnelle :
- une blogroll
Exemples IndieWeb
Pages d'Accueil Simples
Quelques exemples indieweb intéressants de page d'accueil avec une simple information de contact/à propos (par exemple, h-card), cartes ou emplacements, statut live IM, etc. - cela vaudrait probablement la peine de développer et documenter chacune d'elles :
- http://scottbullard.com/ - liens vers téléphone/e-mail avec plus sur http://scottbullard.com/more.html
- http://www.jaredhanson.net/ - statut de MI live sur la hCard de Jared
- http://npdoty.name/ - carte en arrière-plan centrée sur son emplacement actuel
- l'ancienne page de adactio.com (avant-2012)
Ce blog et son post le plus récent :
Cela et les posts de blog occasionnels :
La page d'accueil de bear https://bear.im a une hCard super simple et fait un lien vers le hFeed et une page "About" plus conséquente.
Flux de Mises à Jour
Tout cela et la plupart de contenu qu'ils posent en ligne sous forme de flux :
Exemples composites de flux avec des posts complets :
- http://tantek.com/
- http://adactio.com/ (fin 2012+)
Flux de résumés de posts :
- Modèle:Voxpelli http://voxpelli.com/ – flux des derniers titres de blog
Flux avec seulement les noms/titres des posts
Flux séparés :
- http://aaronparecki.com/
- Modèle:Voxpelli http://voxpelli.com/ – liens vers des flux séparés pour les signets et les interactions sociales
Brainstorming Page Personnelle
Things which could go on homepages which aren’t currently implemented, or are underimplemented. Sometimes there is an intent to implement.
- payment links/buttons
- local weather/daylight (extra context)
- people I’ve mentioned recently
- tags I’ve used recently
- actions like subscribe, contact, add to address book
- latest comments
I might be adding links to /me (my profile page) and /about (about the site, license info, powered by, hosted at, etc.) to my homepage. --Sandeep Shetty
Fonctionnalités de Connexion
Une fois connecté sur votre propre site, il pourrait être utile d'avoir :
- un lecteur - lecteur intégré afffichant les posts des autres que vous suivez
Croquis
J'ai fait quelques croquis/brainstorming here --Waterpigs.co.uk 14:32, 18 June 2013 (PDT)
Webmention vers page personnelle
Les webmentions envoyées directement vers les pages personnelles pourrient servir un certain nombre de cas d'utilisation :
- notification de la mention-personne (comme une @-mention indieweb) sur un post quelque part ailleurs
- invitation à un événement indie
- notification d'un nouveau message reçu
- permettre à d'autres personnes de vous taguer dans les photos ou les pots
Exemples de Silos
Les silos ne vous donnent pas accès techniquement à leurs pages d'accueil, mais ils fournissent généralement quelque chose ressemblant à une page d'accueil, les plus souvent un chemin (pas à la racine), et ils appellent ça un profil. Même s'ils devraient vraiment fournir des sous-domaines au lieu de chemins de profil.
Par exemple, Twitter vous permet de personnaliser votre page de profil avec :
- icône - téléversement (min/max resolution/bytes?)
- image de bandeau d'en-tête - téléversement (min/max resolution/bytes ?)
- bio - champ de texte de 160 caractères, @ et # auto-lié.
- site web - URL auto-liée
- emplacement - ??? character text field.
Articles
Articles et posts concernant le design de page d'accueil et ses fonctionnalités :
Related Sessions
- 2012/UK/Demos - specifically, General discussion / UX thoughts.