Google Gadgets

3,013 views

Published on

Présentation Google Gadgets par David Aubespin au Google Developer Day de Paris

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,013
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Google Gadgets

    1. 2. Google Gadgets David Aubespin 31 mai 2007
    2. 3. Agenda <ul><li>Introduction aux Google Gadgets </li></ul><ul><li>Cr éation </li></ul><ul><li>Techniques </li></ul><ul><li>Questions </li></ul>
    3. 4. Introduction aux Google Gadgets <ul><li>Un soupçon de XML sur un peu de DHTML </li></ul><ul><li>Mini pages web : HTML, Javascript, CSS, Flash </li></ul><ul><li>Une mani ère simple de mettre vos applications à la portée de millions d’utilisateurs </li></ul>Que sont-ils ? <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=“Test Gadget&quot; /> <Content type=&quot;html”><![CDATA[ <b>Bonjour à tous ! </b> ]]></Content> </Module >
    4. 5. Introduction aux Google Gadgets Exemples
    5. 6. Introduction aux Google Gadgets <ul><li>iGoogle </li></ul><ul><li>Sites web </li></ul><ul><li>Google Desktop </li></ul><ul><li>Mac OS X Dashboard </li></ul><ul><li>Windows Vista Sidebar </li></ul><ul><li>IBM WebSphere Portal </li></ul>O ù les trouve-t-on ?
    6. 7. iGoogle
    7. 8. Sites Web
    8. 9. Google Desktop
    9. 10. Mac OS X Dashboard
    10. 11. IBM WebSphere Portal
    11. 13. Croissance des Google Gadgets > 800 millions gadgets vus / semaine
    12. 14. Structure d’un Gadget <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li><ModulePrefs title=”My First Gadget&quot; </li></ul><ul><li>description=&quot;This gadget prints hello world.&quot; </li></ul><ul><li>height=&quot;50&quot; </li></ul><ul><li>author=&quot;Daniel L.&quot; </li></ul><ul><li>author_email=&quot;my.email@gmail.com&quot; </li></ul><ul><li>author_location=&quot;Madrid, Spain&quot; </li></ul><ul><li>category=&quot;tools&quot; /> </li></ul><ul><li><UserPref name=&quot;Color&quot; datatype=&quot;string&quot; default_value=&quot;red&quot; /> </li></ul><ul><li><UserPref name=&quot;Toggle&quot; datatype=&quot;bool&quot; default_value=&quot;true&quot; /> </li></ul><ul><li><UserPref name=&quot;Locations&quot; datatype=&quot;list&quot; /> </li></ul><ul><li><Content type=&quot;html&quot;><![CDATA[ </li></ul><ul><li><b style=&quot;color: red&quot;>hello world!</b> </li></ul><ul><li>]]></Content> </li></ul><ul><li></Module> </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=”My First Gadget&quot; description=&quot;This gadget prints hello world.&quot; height=&quot;50&quot; author=&quot;Daniel L.&quot; author_email=&quot;my.email@gmail.com&quot; author_location=&quot;Madrid, Spain&quot; category=&quot;tools&quot; /> <UserPref name=&quot;Color&quot; datatype=&quot;string&quot; default_value=&quot;red&quot; /> <UserPref name=&quot;Toggle&quot; datatype=&quot;bool&quot; default_value=&quot;true&quot; /> <UserPref name=&quot;Locations&quot; datatype=&quot;list&quot; /> <Content type=&quot;html&quot;><![CDATA[ <b style=&quot;color: red&quot;>hello world!</b> ]]></Content> </Module> Pr éférences utilisateur Contenu du gadget Gadget meta-data
    13. 15. Pr éférences Utilisateur <ul><li>Permettez à vos utilisateurs de configurer votre Gadget </li></ul><ul><li>Plusieurs types de données à votre disposition: </li></ul><ul><ul><li>Cases à cocher </li></ul></ul><ul><ul><li>Menus déroulants </li></ul></ul><ul><ul><li>Textes, entiers, booléens </li></ul></ul><ul><ul><li>Listes </li></ul></ul><ul><li>Utilisez le type de donn ées “ hidden ” pour sauver des états dans votre Gadget </li></ul><UserPref name=“etat” datatype=“hidden” default_value=“0” />
    14. 16. Agenda <ul><li>Introduction aux Google Gadgets </li></ul><ul><li>Cr éation </li></ul><ul><li>Techniques </li></ul><ul><li>Questions </li></ul>
    15. 17. Cr éation <ul><li>Créons un Gadget ensemble en 5 minutes </li></ul><ul><li>Page d’accueil : www.google.fr/apis/gadgets </li></ul>30 secondes !
    16. 18. Cr éation De nombreuses API ! Analytics Dynamic Height Tabs MiniMessages Flash
    17. 19. Cr éation <ul><li>Ajouter <Require feature=“…”/> dans la d éclaration de votre Gadget: </li></ul>Utilisation d’une API <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs …> <Require feature=&quot;tabs&quot;/> <Require feature=&quot;flash&quot;/> <Require feature=&quot;dynamic-height&quot;/> <Require feature=&quot;minimessage&quot;/> <Require feature=&quot;analytics&quot;/> <Require feature=&quot;setprefs&quot;/> <Require feature=&quot;drag&quot;/> <Require feature=&quot;grid&quot;/> <Require feature=&quot;sharedmap&quot;/> </ModulePrefs> <Content…/> </Module>
    18. 20. Agenda <ul><li>Introduction aux Google Gadgets </li></ul><ul><li>Cr éation </li></ul><ul><li>Techniques </li></ul><ul><li>Questions </li></ul>
    19. 21. Technique 1 : Int égrer des objets Flash <ul><li>Traditionnel : </li></ul><OBJECT classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&quot; WIDTH=&quot;550&quot; HEIGHT=&quot;400&quot; id=&quot;myMovieName&quot;><PARAM NAME=movie VALUE=”http://flashvideo.swf&quot;><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src=”http://flashvideo.swf&quot; quality=high bgcolor=#FFFFFF WIDTH=&quot;550&quot; HEIGHT=&quot;400&quot; NAME=&quot;myMovieName&quot; ALIGN=&quot;&quot; TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;http://www.macromedia.com/go/getflashplayer&quot;></EMBED></OBJECT> _IG_EmbedFlash (‘http://flashvideo.swf’, container, { width: 550, height: 400, }); Google Gadgets API: HTML complexe, difficile à maintenir Une ligne de Javascript, compatibilit é entre browsers
    20. 22. Technique 2: Analytics & Statistiques <ul><li>Le nombre de visites est directement accessible depuis le r épertoire de Gadgets : </li></ul><ul><li>www.google.fr/ig/directory </li></ul><ul><li>Pour profiter des fonctionalit és de Google Analytics, 2 lignes de plus ! </li></ul><ul><li><Require feature=&quot; analytics &quot;/> <script> _IG_Analytics (&quot;UA-00000&quot;, &quot;/mongadget&quot;);</script> </li></ul>
    21. 23. Technique 3 : Chargement de contenu distant <ul><li>Charger du contenu distant est puissant, pratique et facile! </li></ul><ul><ul><li>Texte/HTML, XML, flux RSS/Atom </li></ul></ul><ul><ul><li>Cach é par défaut pour éviter la surcharge des serveurs </li></ul></ul><ul><ul><li>Parser RSS/Atom g énérant du JSON </li></ul></ul>
    22. 24. Technique 3 : Chargement de contenu distant <ul><li>3 m é thodes disponibles : </li></ul><ul><li>_IG_FetchFeedAsJSON(url, callback, entries, summaries) R écupère des flux RSS/Atom. Retourne a simple objet JSON : </li></ul><ul><ul><li>Exemples </li></ul></ul><ul><ul><ul><li>Par flux : URL, Titre, Description, Lien, Auteur </li></ul></ul></ul><ul><ul><ul><li>Par entr ée : Titre, Lien, R ésumé , Date </li></ul></ul></ul><ul><li>_IG_FetchXmlContent(url, callback) R écupère du contenu XML. Retourne un objet XML. </li></ul><ul><ul><li>Utile pour r écupérer des flux XML au format non-standard </li></ul></ul><ul><ul><li>Extraction manuelle de toute donn ée </li></ul></ul><ul><li>_IG_FetchContent(url, callback) R écupère du contenu . Retourne du texte. </li></ul><ul><ul><li>Utile pour r écupérer et analyser du HTML </li></ul></ul>
    23. 25. Technique 3 : Chargement de contenu distant <div id=&quot;container&quot;></div> <script> function callback(response) { // Bouche sur chaque entr ée et génère le HTML à insérer var html = new Array(); for (var n = 0; n < response.Entry.length; n++) { var entry = response.Entry[n]; html.push('<a href=&quot;' + entry.Link + '&quot;>' + entry.Title + '</a>' + '<div>' + entry.Summary + '</div>'); } _gel('container').innerHTML = html.join('<hr>'); } // R écupère 3 entr é es du flux Atom Google News France avec les r ésumés _IG_FetchFeedAsJSON(&quot;http://news.google.fr/?output=atom&quot;, callback, 3, true); </script> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <feed version=&quot;0.3&quot; xml:lang=”fr&quot; xmlns=&quot;http://purl.org/atom/ns#&quot;> <generator>NFE/1.0</generator> <title>Google News France</title> … </feed> news.google.fr?output=atom
    24. 26. Technique 4 : Iñtэrиâtiônàl ï sдtiøn <ul><li>Support de plusieurs langages avec une seule impl émentation </li></ul><ul><li>L’annuaire est classé par langue, vos Gadgets sont donc utilisés à travers plusieurs pays </li></ul><ul><li>Définissez les langages à supporter, Google s’occupe de charger celui qui convient </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <messagebundle> <msg name=“title”> Titre </msg> <msg name=“hello”> Bonjour, Monde </msg> </messagebundle> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <messagebundle> <msg name=“title”> 題名 </msg> <msg name=“hello”> こんにちは世界 </msg> </messagebundle> <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <Module> <ModulePrefs title=“ MSG_title &quot;> <Locale lang=“fr” messages=“fr.xml” /> <Locale lang=“ja” messages=“ja.xml” /> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ MSG_hello ]]> </Content> </Module> fr.xml ja.xml hello.xml
    25. 27. Technique 5 : Sauvegarde d’ état <ul><li>Exemple : Simple Notes Gadget </li></ul><ul><li>Cr éation et sauvegarde de notes dans iGoogle </li></ul><ul><li>Donne le choix de la couleur de fond à l’utilisateur </li></ul>
    26. 28. Technique 5 : Sauvegarde d’ état <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li><ModulePrefs title=&quot;Note&quot; height=&quot;80&quot;> </li></ul><ul><li><Require feature=&quot;setprefs&quot;/> </li></ul><ul><li></ModulePrefs> </li></ul><ul><li><UserPref name=&quot;text&quot; default_value=&quot;Type text here.” </li></ul><ul><li>datatype=&quot;hidden&quot;/> </li></ul><ul><li><UserPref name=&quot;color&quot; display_name=&quot;Color” default_value=&quot;#ffffcc&quot; datatype=&quot;enum&quot;>  <EnumValue display_value=&quot;Yellow&quot; value=&quot;#ffffcc&quot;/>  <EnumValue display_value=&quot;Blue&quot; value=&quot;#e5ecf9&quot;/>  <EnumValue display_value=&quot;Green&quot; value=&quot;#e0eee0&quot;/> </li></ul><ul><li></UserPref> </li></ul><ul><li><Content type=&quot;html&quot;><![CDATA[ </li></ul><ul><li><script> </li></ul><ul><li>function save() { </li></ul><ul><li>var prefs = new _IG_Prefs(); </li></ul><ul><li>prefs.set(&quot;text&quot;, _gel(‘note’).value); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><style> </li></ul><ul><li>#container { </li></ul><ul><li>background-color: __UP_color__; </li></ul><ul><li>text-align: center;   padding:6px; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li><div id=container> </li></ul><ul><li><div><textarea id=&quot;note&quot;/>__UP_text__</textarea></div> </li></ul><ul><li><input type=&quot;button&quot; value=&quot;Save Note&quot; onclick=&quot;save()&quot; /> </li></ul><ul><li></div> </li></ul><ul><li>]]></Content> </li></ul><ul><li></Module> </li></ul>
    27. 29. Technique 6 : Caching <ul><li>Quelques faits : </li></ul><ul><ul><li>Google cache tous les fichiers XML des gadgets </li></ul></ul><ul><ul><li>Google cache toutes les requ êtes faites via les méthodes _IG_Fetch…() </li></ul></ul><ul><ul><li>Le trafic g énéré par les gadgets est consid érable (Gadget Date & Time reçoit actuellement 156 millions de vues/semaine) </li></ul></ul><ul><li>Un probl è me demeure : </li></ul><ul><ul><li>Les gadgets int ègre souvent des ressources externes telles que des images, des objets Flash, etc. </li></ul></ul><ul><ul><li>Les serveurs d’h ébergement n’ont pas toujours la capacité de gérer ce nouveau flot de requêtes </li></ul></ul><ul><li>Solution : </li></ul><ul><ul><li>Utilisation des m éthodes de l’ API pour cacher toutes les ressources ! </li></ul></ul><ul><ul><ul><li>_IG_GetImage(url) - Retourne une image depuis le cache </li></ul></ul></ul><ul><ul><ul><li>_IG_GetImageUrl(url) - Retourne l’URL pour utiliser une image depuis le cache </li></ul></ul></ul><ul><ul><ul><li>_IG_GetCachedUrl(url) - Retourne l’URL pour utiliser une ressource depuis le cache </li></ul></ul></ul>
    28. 30. Technique 6 : Caching <ul><li>Images </li></ul><ul><li>Flash </li></ul><img id=&quot;goImg&quot; src=&quot;&quot; width=100 height=150 /> <script> _gel(&quot;goImg&quot;).src = _IG_GetImageUrl(&quot;http://domainA.com/go.gif&quot;); </script> <div id=&quot;container&quot;></div> <script> var cacheUrl = _IG_GetCachedUrl(“http://mydomain.com/flashvideo.swf”); _IG_EmbedFlash(cacheUrl, ‘container’, { width: 300, height: 250 }); </script>
    29. 31. Distribution 1: Bouton Google <ul><li>Ajoutez des boutons Google sur vos blogs ou sites web </li></ul><ul><li>Cr é ez des boutons sp éciaux et modifiez l’URL pour ajouter des instances pr éconfigurées de votre gadget </li></ul>http://fusion.google.com/add?moduleurl=datetime.xml &up_color=pink http://fusion.google.com/add?moduleurl=datetime.xml &up_color=red http://fusion.google.com/add?moduleurl=datetime.xml
    30. 32. Distribution 2 <ul><li>www.google.fr/ig/submit </li></ul><ul><li>Ajoutez vos gadgets à l’annuaire de iGoogle </li></ul><ul><ul><li>Cr é ez des ic ônes et images captivantes </li></ul></ul><ul><ul><li>Fournissez des d étails précis (metadata) </li></ul></ul>
    31. 33. Distribution 3 <ul><li>Testez vos gadgets sous diff érents browsers </li></ul><ul><li>Envoyez vos gadgets à vos amis pour favoriser le bouche-à-oreille </li></ul>
    32. 34. Pour en savoir plus… <ul><li>Documentation de l’API Google Gadgets www.google.fr/apis/gadgets </li></ul><ul><li>iGoogle www.google.fr/ig </li></ul><ul><li>Annuaire Google Gadgets www.google.fr/ig/directory </li></ul><ul><li>Classement des cr éateurs de Gadgets www.google.fr/ig/authors </li></ul><ul><li>Groupe de discussion (en anglais) http://groups.google.com/group/Google-Gadgets-API </li></ul><ul><li>FAQ / Knowledge Base code.google.com/support/bin/topic.py?topic=10027 </li></ul><ul><li>Instructions de distribution de Google www.google.fr/webmasters/gadgets/guidelines.html </li></ul>
    33. 35. “ If 2006 was all about social networks, user-generated content and YouTube, then it’s a fair bet that 2007 will be about further personalizing life online.” <ul><li>Newsweek Magazine, The Year Of The Widget </li></ul>
    34. 36. Agenda <ul><li>Introduction aux Google Gadgets </li></ul><ul><li>Cr éation </li></ul><ul><li>Techniques </li></ul><ul><li>Questions </li></ul>

    ×