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

Google +1

On commence avec le bouton +1 de google.

Votre mission est la suivante: En parallèle, vous étudiez le document suivant, et vous ajoutez à 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

Votre mission est la suivante: En parallèle, vous étudiez le document suivant, et vous ajoutez à la page main.php le bouton like de votre choix.

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

Twitter tweet Button

Votre mission est la suivante: En parallèle, vous étudiez le document suivant, et vous ajoutez à 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. 

Votre mission est la suivante: En parallèle, vous étudiez le document suivant, et vous ajouter à la page main.php le bouton share de votre choix.

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

Facebook recommend

Le boutton share de google+ permet de partager simplement votre page sur le réseau social. 

Votre mission est la suivante: En parallèle, vous étudiez le document suivant, et vous ajouter à la page main.php le bouton share de votre choix.

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

Objectif pour le projet

 

Pour aller plus loin

D'autres plugins de réseaux sociaux existent:

Pour facebook, c.f., https://developers.facebook.com/docs/plugins/

Pour google+, c.f., https://developers.google.com/+/web/

Pour twitter, c.f., https://dev.twitter.com/

Pour Linkedin, c.f., http://developer.linkedin.com/plugins

Pour reddit, c.f., http://fr.reddit.com/buttons/

etc. etc. etc. 

Nous allons découvrir ce que sont les métadonnées, leur formats, utilisations. (microdata, microformats, RDFa)   on va regarder comment se connecter avec Facebook ou Google+, récupérer les données personnelles, publier au nom de quelqu'un. Resources

Twitter: https://dev.twitter.com/Facebook: https://developers.facebook.com/Google: https://developers.google.com/  https://support.google.com/webmasters/?hl=fr  

Ajout de métadonnées sur le site Permet d'afficher plus d'info lorsque le site est partagé

Twitter cards: https://dev.twitter.com/cards

En savoir plus sur le référencement et la présentation de votre site dans les résultats de recherche Google 

Parcourez les document à propos de "Extraits enrichis (microdonnées, microformats, RDFa)". 

Votre mission est la suivante: En parallèle, vous étudiez les documents suivants, et vous ajoutez à la page main.php de votre application des métadonnées schema.org pour applications logicielles.

Le document principal est le suivant: https://support.google.com/webmaster...fr#topic=21997.

• lisez chaque page de la section Présentation. https://support.google.com/webmaster...ef_topic=21997 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.
• gardez juste à l'esprit que vous allez utiliser l'outil de test des données structurées de google pour tester vos métadonnées. https://support.google.com/webmaster..._topic=1088473
• lisez la page du Type d'extraits enrichis qui nous intéresse pour l'application pictionnary asynchrone: balisage schema.org pour les applications logicielles. https://support.google.com/webmaster..._topic=1088474. Gardez juste à l'esprit qu'il existe d'autres recommandations pour les personnes (votre page web perso), et autres.
• Consignes de google relatives aux extraits enrichis: https://support.google.com/webmaster...ef_topic=21997

google outil de test des données structurées

http://www.google.com/webmasters/tools/richsnippets

ajouter différents les bases du développement d'une application HTML5, et développer une application similaire à l'application Draw Something, compatible avec le web mobile.

Cette partie va durer 3 séances de 3h. 

On développe la base de votre premier projet à rendre, l'application Pictionnary Ansynchrone.
Si vous faites proprement tout ce qui est demandé ici, vous aurez au moins 6/20 au projet.

Concepts abordés:

• Formulaire d'inscription/connexion HTML5,
• adaptation au web mobile,
• élément canvas
• exportation d'un canvas en image
• format d'échange JSON

Technologies utilisées:

Prenez l'habitude d'utiliser les outils de développement de votre navigateur pour étudier le DOM, les échanges réseau, le javascript, le CSS, ...