Partie 2: Web sémantique et Web Social

De $1

Version de 13:39, 16 Avr 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

Les objectifs n° 1 et 2 devraient durer environ deux séances de 3h en tout. Il y a beaucoup de lecture, beaucoup de choses à découvrir et à apprendre, et vous appliquerez à l'application Pictionnary Asynchrone. Soyez attentifs et curieux !

L'objectif n°3 (en cours de rédaction) devrait durer deux séances de 3h, il s'agit de permettre à l'utilisateur de se connecter via Facebook, et du coup d'accéder à et d'utiliser ses données personnelles.

"Celui qui contrôle les métadonnées contrôle le web" F. Gandon

Nous allons découvrir et ajouter des plugins simples de réseaux sociaux pour l'application pictionnary. Nous allons également découvrir ce que sont les méta-données (balises méta, microdata, microformats, RDFa). Leurs formats, leur utilisation par les réseaux sociaux et les machines.

Pour le moment, je vous demande de vous concentrer sur les Microdonnées (=microdata). Et de ne pas trop regarder en détail les microformats ni RDFa.

Attention, les sites google, facebook, twitter, devront accéder à la page pour récupérer les méta-données et personnaliser les posts. Vous devrez donc au choix:

Google +1

On commence avec le bouton +1 de google. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php un bouton +1

https://developers.google.com/+/web/+1button/?hl=fr

 

Facebook Like

Un autre moyen d'interaction simple avec les réseaux sociaux est le bouton like de Facebook. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton like de votre choix.

https://developers.facebook.com/docs...s/like-button/

 

Twitter tweet Button

 
Le bouton tweet de Twitter est une transition entre les fonctionnalités très simples de +1 et like, et le partage de la page. Il permet d'inviter l'utilisateur à envoyer un tweet, et vous choisissez le contenu du tweet par défaut. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton tweet de votre choix.

https://dev.twitter.com/docs/tweet-button

Google+ share

Le boutton share de google+ permet de partager simplement votre page sur le réseau social. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton share de votre choix.

https://developers.google.com/+/web/share/

Facebook share

Le boutton share de google+ permet de partager simplement votre page sur le réseau social. En parallèle, vous étudierez le document suivant, et vous ajouterez à la page main.php le bouton share de votre choix.

https://developers.facebook.com/docs.../share-button/

Meta-données pour les machines: exemple des moteurs de recherche

Lisez chaque page de la présentation des méta-données par google. Ne vous égarez pas avec les hyperliens. Vous devez juste découvrir l'existance des trois formats de métadonnées qu'on peut inclure dans une page html, et découvrir schema.org. Nous y reviendrons.
https://support.google.com/webmaster...ef_topic=21997

Etudiez plus en détail le document suivant, qui décrit le format des microdonnées, et le vocabulaire schema.org. 
http://www.alsacreations.com/article...emantique.html

On sait que Google comprend les méta-données qui décrivent les applications logicielles. Ajoutez donc à la page main.php des microdonnées schema.org opur décrire vote application.
https://support.google.com/webmaster..._topic=1088474

Utilisez l'outil de test des données structurées de google pour tester vos métadonnées, et voir comment s'afficherait la page main.php dans les résultats google.
https://support.google.com/webmaster..._topic=1088473

Méta-données pour le web social: améliorer les fonctionnalités de partage sur les réseaux sociaux.

Google, Facebook et Twitter utilisent des méta-données de la page pour améliorer leur plugin de partage de page. Nous allons découvrir comment les utiliser.

Open Graph pour Facebook 

On transforme notre page en objet riche pour Facebook à l'aide du protocole Open Graph, et Facebook peut alors personnaliser l'extrait de la page lorsqu'elle est partagée.

La page suivante décrit ce que Facebook peut utiliser
https://developers.facebook.com/docs...ins/checklist/

La page suivante décrit comment ajouter les méta-données.
http://ogp.me/

Vous pouvez tester vos méta-données ici:
https://developers.facebook.com/tools/debug/

Méta-données pour Twitter Cards

Twitter aussi utilise des méta-données de la page pour que le contenu partagé soit plus intéressant. Personnalisez l'extrait qui s'affiche lorsque la page main.php est tweetée.

La page suivante décrit ce que Twitter peut utiliser
https://dev.twitter.com/cards

Méta-données pour Google + share

Idem pour Google+, personnalisez l'extrait qui s'affiche lorsque la page main.php est partagée.
https://developers.google.com/+/web/snippet/

Travail à faire pour le projet Pictionnary Asynchrone

L'utilisateur doit pouvoir:

  • partager l'application à travers les boutons sur la page main.php, et les extraits partagés sont personnalisés à l'aide de méta-données pour google+, facebook et twitter.
  • partager un dessin lorsqu'il a fini de dessiner: lorsqu'il valide le dessin, un cadre s'affiche, il remercie l'utilisateur d'avoir joué, et lui propose de partager son dessin, et les extraits partagés sont personnalisés à l'aide de méta-données pour google+, facebook et twitter.

Vous devez créer un lien dans votre header vers une about.php, qui vous décrit vous en tant que développeur (schema.org/Person). Vous y ajouterez des fonctionnalités de partage sur les réseaux sociaux.

Pour aller plus loin

D'autres plugins de réseaux sociaux existent:

Connexion avec Facebook

(En cours de rédaction)

On va regarder comment se connecter avec Facebook ou Google+, récupérer les données personnelles, publier au nom de quelqu'un.