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

Le document principal est le suivant: 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 un bouton like

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

Améliorer 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, ...