Vous n'êtes pas connecté. Connexion
|
|
Page perso de Maxime Lefrançois > LPSIL IDSE - Web Multimédia / Web Sémantique > Partie 2: Introduction au Web sémantique et Web Social > Partie 2.1: "Celui qui contrôle les métadonnées contrôle le web" F. Gandon
Partie 2.1: "Celui qui contrôle les métadonnées contrôle le web" F. GandonDe $1Table des matières
ObjectifNous 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 +1On 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 LikeUn 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 ButtonLe 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.
Google+ shareLe 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. Facebook shareLe 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. Meta-données pour les machines: exemple des moteurs de rechercheLisez 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. Etudiez plus en détail le document suivant, qui décrit le format des microdonnées, et le vocabulaire schema.org. 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. 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. 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 FacebookOn 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 La page suivante décrit comment ajouter les méta-données. Vous pouvez tester vos méta-données ici: Méta-données pour Twitter CardsTwitter 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 Méta-données pour Google + shareIdem pour Google+, personnalisez l'extrait qui s'affiche lorsque la page main.php est partagée. Travail à faire pour le projet Pictionnary AsynchroneL'utilisateur doit pouvoir:
Facebook met en cache l'image de la page que vous essayez de partager. Pour vider le cache et mettre à jour l'image, réexecutez le débugger Open Graph de Facebook à l'adresse https://developers.facebook.com/tools/debug/ c.f., http://stackoverflow.com/questions/1...-select-images Le tag og:image utilisé par facebook ne veut apparemment pas de dataurl, donc vous devrez enregistrer à l'avance un fichier image (.png par exemple) sur le serveur, et renseigner son url dans le tag og:image. Le code PHP pour faire celà est le suivant: file_put_contents($chemin, base64_decode($data)); 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 loinD'autres plugins de réseaux sociaux existent:
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |