Your SlideShare is downloading. ×
0
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Google Gadgets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google Gadgets

2,420

Published on

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

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
2,420
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1.  
    • 2. Google Gadgets David Aubespin 31 mai 2007
    • 3. Agenda
      • Introduction aux Google Gadgets
      • Cr éation
      • Techniques
      • Questions
    • 4. Introduction aux Google Gadgets
      • Un soupçon de XML sur un peu de DHTML
      • Mini pages web : HTML, Javascript, CSS, Flash
      • Une mani ère simple de mettre vos applications à la portée de millions d’utilisateurs
      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 >
    • 5. Introduction aux Google Gadgets Exemples
    • 6. Introduction aux Google Gadgets
      • iGoogle
      • Sites web
      • Google Desktop
      • Mac OS X Dashboard
      • Windows Vista Sidebar
      • IBM WebSphere Portal
      O ù les trouve-t-on ?
    • 7. iGoogle
    • 8. Sites Web
    • 9. Google Desktop
    • 10. Mac OS X Dashboard
    • 11. IBM WebSphere Portal
    • 12.  
    • 13. Croissance des Google Gadgets > 800 millions gadgets vus / semaine
    • 14. Structure d’un Gadget
      • <?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>
      <?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
    • 15. Pr éférences Utilisateur
      • Permettez à vos utilisateurs de configurer votre Gadget
      • Plusieurs types de données à votre disposition:
        • Cases à cocher
        • Menus déroulants
        • Textes, entiers, booléens
        • Listes
      • Utilisez le type de donn ées “ hidden ” pour sauver des états dans votre Gadget
      <UserPref name=“etat” datatype=“hidden” default_value=“0” />
    • 16. Agenda
      • Introduction aux Google Gadgets
      • Cr éation
      • Techniques
      • Questions
    • 17. Cr éation
      • Créons un Gadget ensemble en 5 minutes
      • Page d’accueil : www.google.fr/apis/gadgets
      30 secondes !
    • 18. Cr éation De nombreuses API ! Analytics Dynamic Height Tabs MiniMessages Flash
    • 19. Cr éation
      • Ajouter <Require feature=“…”/> dans la d éclaration de votre Gadget:
      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>
    • 20. Agenda
      • Introduction aux Google Gadgets
      • Cr éation
      • Techniques
      • Questions
    • 21. Technique 1 : Int égrer des objets Flash
      • Traditionnel :
      <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
    • 22. Technique 2: Analytics & Statistiques
      • Le nombre de visites est directement accessible depuis le r épertoire de Gadgets :
      • www.google.fr/ig/directory
      • Pour profiter des fonctionalit és de Google Analytics, 2 lignes de plus !
      • <Require feature=&quot; analytics &quot;/> <script> _IG_Analytics (&quot;UA-00000&quot;, &quot;/mongadget&quot;);</script>
    • 23. Technique 3 : Chargement de contenu distant
      • Charger du contenu distant est puissant, pratique et facile!
        • Texte/HTML, XML, flux RSS/Atom
        • Cach é par défaut pour éviter la surcharge des serveurs
        • Parser RSS/Atom g énérant du JSON
    • 24. Technique 3 : Chargement de contenu distant
      • 3 m é thodes disponibles :
      • _IG_FetchFeedAsJSON(url, callback, entries, summaries) R écupère des flux RSS/Atom. Retourne a simple objet JSON :
        • Exemples
          • Par flux : URL, Titre, Description, Lien, Auteur
          • Par entr ée : Titre, Lien, R ésumé , Date
      • _IG_FetchXmlContent(url, callback) R écupère du contenu XML. Retourne un objet XML.
        • Utile pour r écupérer des flux XML au format non-standard
        • Extraction manuelle de toute donn ée
      • _IG_FetchContent(url, callback) R écupère du contenu . Retourne du texte.
        • Utile pour r écupérer et analyser du HTML
    • 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
    • 26. Technique 4 : Iñtэrиâtiônàl ï sдtiøn
      • Support de plusieurs langages avec une seule impl émentation
      • L’annuaire est classé par langue, vos Gadgets sont donc utilisés à travers plusieurs pays
      • Définissez les langages à supporter, Google s’occupe de charger celui qui convient
      <?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
    • 27. Technique 5 : Sauvegarde d’ état
      • Exemple : Simple Notes Gadget
      • Cr éation et sauvegarde de notes dans iGoogle
      • Donne le choix de la couleur de fond à l’utilisateur
    • 28. Technique 5 : Sauvegarde d’ état
      • <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>
      • <Module>
      • <ModulePrefs title=&quot;Note&quot; height=&quot;80&quot;>
      • <Require feature=&quot;setprefs&quot;/>
      • </ModulePrefs>
      • <UserPref name=&quot;text&quot; default_value=&quot;Type text here.”
      • datatype=&quot;hidden&quot;/>
      • <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;/>
      • </UserPref>
      • <Content type=&quot;html&quot;><![CDATA[
      • <script>
      • function save() {
      • var prefs = new _IG_Prefs();
      • prefs.set(&quot;text&quot;, _gel(‘note’).value);
      • }
      • </script>
      • <style>
      • #container {
      • background-color: __UP_color__;
      • text-align: center;   padding:6px;
      • }
      • </style>
      • <div id=container>
      • <div><textarea id=&quot;note&quot;/>__UP_text__</textarea></div>
      • <input type=&quot;button&quot; value=&quot;Save Note&quot; onclick=&quot;save()&quot; />
      • </div>
      • ]]></Content>
      • </Module>
    • 29. Technique 6 : Caching
      • Quelques faits :
        • Google cache tous les fichiers XML des gadgets
        • Google cache toutes les requ êtes faites via les méthodes _IG_Fetch…()
        • Le trafic g énéré par les gadgets est consid érable (Gadget Date & Time reçoit actuellement 156 millions de vues/semaine)
      • Un probl è me demeure :
        • Les gadgets int ègre souvent des ressources externes telles que des images, des objets Flash, etc.
        • Les serveurs d’h ébergement n’ont pas toujours la capacité de gérer ce nouveau flot de requêtes
      • Solution :
        • Utilisation des m éthodes de l’ API pour cacher toutes les ressources !
          • _IG_GetImage(url) - Retourne une image depuis le cache
          • _IG_GetImageUrl(url) - Retourne l’URL pour utiliser une image depuis le cache
          • _IG_GetCachedUrl(url) - Retourne l’URL pour utiliser une ressource depuis le cache
    • 30. Technique 6 : Caching
      • Images
      • Flash
      <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>
    • 31. Distribution 1: Bouton Google
      • Ajoutez des boutons Google sur vos blogs ou sites web
      • Cr é ez des boutons sp éciaux et modifiez l’URL pour ajouter des instances pr éconfigurées de votre gadget
      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
    • 32. Distribution 2
      • www.google.fr/ig/submit
      • Ajoutez vos gadgets à l’annuaire de iGoogle
        • Cr é ez des ic ônes et images captivantes
        • Fournissez des d étails précis (metadata)
    • 33. Distribution 3
      • Testez vos gadgets sous diff érents browsers
      • Envoyez vos gadgets à vos amis pour favoriser le bouche-à-oreille
    • 34. Pour en savoir plus…
      • Documentation de l’API Google Gadgets www.google.fr/apis/gadgets
      • iGoogle www.google.fr/ig
      • Annuaire Google Gadgets www.google.fr/ig/directory
      • Classement des cr éateurs de Gadgets www.google.fr/ig/authors
      • Groupe de discussion (en anglais) http://groups.google.com/group/Google-Gadgets-API
      • FAQ / Knowledge Base code.google.com/support/bin/topic.py?topic=10027
      • Instructions de distribution de Google www.google.fr/webmasters/gadgets/guidelines.html
    • 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.”
      • Newsweek Magazine, The Year Of The Widget
    • 36. Agenda
      • Introduction aux Google Gadgets
      • Cr éation
      • Techniques
      • Questions
    • 37.  

    ×