- \n
- Cet \u00e9cosyst\u00e8me d\u2019applications va \u00e0 terme se substituer aux programmes install\u00e9s sur votre machine, sur le “desktop” en s’appuyant ostensiblement sur le Cloud Computing.<\/li>\n
- Le march\u00e9 de la cr\u00e9ation de site a toutes les chances d’\u00eatre litteralment atomis\u00e9, lamin\u00e9 par l’apparition de ces nouvelles plate-formes. Le paradigme n’est plus d’avoir un site sous un CMS ou pas, la priorit\u00e9 est d’avoir une API capable de se greffer \u00e0 toutes ses plates-formes existantes et futures qui font du navigateur, le logiciel \u00e0 tout faire et l’interface unique pour atteindre l’utilisateur final, en somme le nouveau syst\u00e8me d’exploitation de la prochaine d\u00e9cennie.<\/b><\/li>\n<\/ol>\n
Pour se familiariser avec le Cloud Computing, vous pouvez vous reporter \u00e0 un de nos pr\u00e9c\u00e9dents articles qui traite de la menace \u00e9cologique que peut constituer le cloud computing mais en pr\u00e9sente aussi les avantages.<\/i><\/p>\n
- \n
- Ecologie, HTML5, Flash, cloud computing – Un aper\u00e7u de l\u2019impact \u00e9cologique de la soci\u00e9t\u00e9 de l\u2019information<\/a><\/li>\n<\/ul>\n
Cr\u00e9er un extension<\/h4>\n
La premi\u00e8re chose \u00e0 faire est de cr\u00e9er ce que google nomme un
manifest file<\/code> qui sera une sorte de descriptif de ce que votre webapp sera. Un classique en programmation. Par analogie, pour ceux d’entre vous qui connaissent le d\u00e9veloppement de module sous Drupal par exemple cela \u00e9quivaut au fichier.info<\/code> <\/p>\nIl existe deux variables importantes \u00e0 retenir : elles doivent imp\u00e9rativement \u00eatre pr\u00e9sentes dans votre fichier “manifest” au format
.json<\/code><\/b><\/p>\n\n“web_url”
\nSpecifies the page that the browser shows when a user launches the app.<\/p>\n“urls”
\nSpecifies the starting URLs of all other web pages that are in the app. In this example, both http:\/\/mysubdomain.example.com\/page1.html and http:\/\/mysubdomain.example.com\/subdir\/page2.html would be in the app. You don’t need to specify the URLs for included files or for assets such as images. Currently, the domain name must be followed by at least one character (“\/”).<\/p>\n<\/blockquote>\nPour information, dans un fichier
.json<\/code>, vous \u00eates en javascript, vous pouvez donc placer des commentaires pour expliciter votre code.<\/p>\n\r\n\/* ceci est une premi\u00e8re fa\u00e7on de faire un commentaire *\/\r\n\/\/ ceci est une deuxi\u00e8me fa\u00e7on de faire un commentaire\r\n\r\n<\/pre>\n
La version du JSON effectivement publi\u00e9e, cette fois-ci sans les commentaires.<\/b>
\nC’est un pr\u00e9-requis pour publier sur la plate-forme.<\/p>\n\r\n\t{\r\n\t "name": "3wdoc Test App 1",\r\n\t "description": "3WDOC Studio will come soon !",\r\n\t "version": "0.0.0.1",\r\n\t "icons": {\r\n\t "128": "3wdoc_128.png"\r\n\t },\r\n\t "app": {\r\n\t "urls": [\r\n\t "http:\/\/www.3wdoc.com\/"\r\n\t ],\r\n\t "launch": {\r\n\t "web_url": "http:\/\/www.3wdoc.com\/"\r\n\t }\r\n\t }\r\n\t}\r\n<\/pre>\nLe fichier image
3wdoc_128.png<\/code><\/b>
\n![\"3wdoc\"](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/3wdoc_128.png\")
<\/p>\nCharger votre extension<\/H4>
\nPour cela, il suffit de vous rendre dans le panneau des extensions de Google Chrome. Cette acc\u00e8s se trouve g\u00e9n\u00e9ralement \u00e0 droite de la barre d’adresse et est symbolis\u00e9 par une cl\u00e9 anglaise.<\/b> Vous acc\u00e9dez au panneau des extensions de Google Chrome et vous choisissez de cliquer sur le boutonCharger l'extension non empaquet\u00e9e<\/code><\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_load_1.jpg\")
<\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_load_2.jpg\")
<\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_load_3.jpg\")
<\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_load_4.jpg\")
<\/p>\nEmpaqueter votre extension<\/H4>
\nVous acc\u00e9dez au panneau des extensions de Google Chrome et vous choisissez de cliquer sur le boutonEmpaqueter l'extension<\/code>.<\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_load_0.jpg\")
<\/p>\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_pack_1.jpg\")
<\/p>\nIl faut s\u00e9lectionner le r\u00e9pertoire contenant votre extension<\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_pack_2.jpg\")
<\/p>\nUne fois l’op\u00e9ration termin\u00e9e, vous poss\u00e9dez deux fichiers
.pem<\/code> et.crx<\/code><\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_extension_pack_3.jpg\")
<\/p>\nL’extension de fichier
.crx<\/code> est une extension li\u00e9e au navigateur Google Chrome. Ce fichier est une sorte de fichier d’archive. Il n’est utile que si vous publiez votre extension en utilisant le Chrome Developer Dashboard ou encore lorsque vous souhaitez distribuer une version non-public, par exemple, pour les testeurs alpha de votre fichier.crx<\/code>.
\nQuant au fichier.pem<\/code>, il contient la cl\u00e9 priv\u00e9e, qui vous sera utile pour les mises \u00e0 jour ult\u00e9rieures de votre webapplication sur Chrome Webstore.<\/p>\nSource : http:\/\/code.google.com\/chrome\/extensions\/packaging.html<\/a><\/i><\/p>\n
Cr\u00e9er une webapp<\/h4>\n
C’est l’\u00e9tape suivante, elle consiste essentiellement \u00e0 faire un fichier zip de votre r\u00e9pertoire. Deux choses importantes avant de vous lancer dans l’envoie de votre fichier
.zip<\/code> contenant votre web application Google Chrome Webstore.<\/b><\/p>\n- \n
- Il est important d’enlever l’ensemble de vos commentaires du fichier
.json<\/code> qui sert de base \u00e0 votre webapplication. C’est ce fichier qui sera plac\u00e9 sur la plate-forme Google Chrome Webstore.<\/li>\n- Il faut pour publier votre webapp que le nom de domaine attach\u00e9 \u00e0 votre webapp soit v\u00e9rifi\u00e9 par Google. C’est \u00e0 dire que Google s’assure que vous \u00eates bien le titulaire de ce nom de domaine.<\/li>\n<\/ol>\n
Un mode de v\u00e9rification possible pour attester de la propri\u00e9t\u00e9 du domaine : Il vous suffit d’ins\u00e9rer une balise meta dans le fichier index de votre site<\/b><\/p>\n
\r\n<meta name="google-site-verification" content="a_jk_98-anKDojGPC9t9JKcHEs8mjqH4oVsPvB-Plls" \/>\r\n<\/pre>\n
Faire sa page sur le Google Chrome Webstore<\/h4>\n
Il faut se rendre ensuite cette adresse, dans le tableau de bord que met \u00e0 votre disposition Google :
\nhttps:\/\/chrome.google.com\/webstore\/developer\/dashboard<\/code><\/p>\nIl faudra ensuite au minimum choisir une langue et envoyer au moins une capture d’\u00e9cran de votre application. La taille de l’image doit faire
400x275<\/code> en pixels.<\/p>\nSi vous souhaitez personnaliser plus encore cette page, vous pouvez ajouter un en-t\u00eate sp\u00e9cifique de la taille suivante
570x275<\/code> en pixels.<\/p>\nN’oubliez pas d’enlever les commentaires du fichier
.json<\/code><\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_store_1.jpg\")
<\/p>\nN’oubliez pas de faire valider votre nom de domaine au pr\u00e9alable<\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_store_2.jpg\")
<\/p>\nQuelques personnalisation possibles de votre page : une capture d’\u00e9cran de votre application en
400x275<\/code> pixels<\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_store_3.jpg\")
<\/p>\nQuelques personnalisation possibles de votre page : un en-t\u00eate sp\u00e9cifique de
400x275<\/code> pixels<\/b>
\n![\"Google,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2011\/03\/chrome_store_4.jpg\")
<\/p>\nQuelques vid\u00e9os<\/h4>\n
4 vid\u00e9os plut\u00f4t synth\u00e9tiques sur des points essentiels pour cr\u00e9er une bonne webapp sur le Google Chrome Webstore.<\/p>\n
- \n
- VIDEO 1 – Une bonne introduction au d\u00e9veloppement sur le coeur applicatif des google app. C’est en python forc\u00e9ment !<\/li>\n
- VIDEO 2 – Une r\u00e9ponse essentielle \u00e0 la question mais qu’est qu’une web app ?<\/li>\n
- VIDEO 3 – Les gestes qui sauvent pour cr\u00e9er sa premi\u00e8re extension pour Chrome !<\/li>\n
- VIDEO 4 – Pas \u00e0 pas la derni\u00e8re \u00e9tape de publication d’une web app sur le Google Chrome Webstore<\/li>\n<\/ol>\n
VIDEO 1 – Developing and deploying an application on Google App Engine<\/b>
\n<\/p>\nVIDEO 2 – Chrome Web Store – What’s a web app?<\/b>
\n<\/p>\nVIDEO 3 – Google Chrome Extensions: How to build an extension<\/b>
\n<\/p>\nVIDEO 4 – How to upload your webapp to the chrome webstore : 5 mn<\/b>
\n<\/p>\nEn savoir plus<\/h2>\n
- Tutorial: Getting Started
\n\t\thttp:\/\/code.google.com\/intl\/fr-FR\/chrome\/webstore\/docs\/get_started_simple.html<\/a><\/li>\n- Formats: Manifest Files\t
\n\t\t\thttp:\/\/code.google.com\/chrome\/extensions\/manifest.html<\/a><\/li>\n- Un aper\u00e7u sur le format JSON
\n\t\thttp:\/\/www.xul.fr\/ajax-javascript-json.html<\/a><\/li>\n- How To Create Your Own Chrome Web Apps
\n\t\thttp:\/\/www.vikitech.com\/2398\/create-chrome-web-apps<\/a><\/li>\n- Get Started with the GWT SDK
\n\t\thttp:\/\/code.google.com\/intl\/fr-FR\/webtoolkit\/gettingstarted.html<\/a><\/li>\n- CRX Package Format
\n\t\thttp:\/\/code.google.com\/chrome\/extensions\/crx.html<\/a><\/li>\n- Samples of webapp provided by Google
\n\t\thttp:\/\/code.google.com\/chrome\/extensions\/samples.html<\/a><\/li>\n- Create your own Google Chrome web apps
\n\t\thttp:\/\/tekkidd.tumblr.com\/post\/2646163763\/create-your-own-google-chrome-web-apps<\/a><\/li>\n- Un benchmark des meilleurs applications selon Mashable, 10 Chrome Web Apps to Check Out
\n\t\thttp:\/\/mashable.com\/2010\/12\/07\/chrome-web-apps-roundup\/<\/a><\/li>\n- Hosted Apps
\n\t\thttp:\/\/code.google.com\/intl\/fr-FR\/chrome\/apps\/docs\/developers_guide.html<\/a><\/li>\n- Les plus r\u00e9centes “success stories” sur les applications r\u00e9ussies sur la plate-forme Chrome
\n\t\thttp:\/\/www.google.com\/intl\/en\/landing\/chrome\/webstore\/create\/success-stories.html<\/a><\/li>\n- Le tableau de bord pour le d\u00e9veloppement. Indispensable.\t
\n\t\t\thttps:\/\/chrome.google.com\/webstore\/developer\/dashboard<\/a><\/li>\n- Mozilla : Web Applications, l’autre \u00e9cosyst\u00e8me d’applications. Attention, c’est de l’Open Source pure jus…
\n\t\thttps:\/\/apps.mozillalabs.com\/<\/a><\/li>\n- Le Chrome Webstore de google
\n\t\thttps:\/\/chrome.google.com\/webstore<\/a><\/li>\n- Chrome Web Store : ajoutez des fonctions \u00e0 votre navigateur Chrome
\n\t\thttp:\/\/www.memoclic.com\/1692-google-chrome\/13325-chrome-web-store.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Le cercle vertueux suscit\u00e9 par l’App Store d’Apple a fait des \u00e9mules quant \u00e0 son mod\u00e8le de cr\u00e9ation et de distribution d’applications sur le Web.… <\/p>\n
- Tutorial: Getting Started
- Il faut pour publier votre webapp que le nom de domaine attach\u00e9 \u00e0 votre webapp soit v\u00e9rifi\u00e9 par Google. C’est \u00e0 dire que Google s’assure que vous \u00eates bien le titulaire de ce nom de domaine.<\/li>\n<\/ol>\n
- Il est important d’enlever l’ensemble de vos commentaires du fichier
- Ecologie, HTML5, Flash, cloud computing – Un aper\u00e7u de l\u2019impact \u00e9cologique de la soci\u00e9t\u00e9 de l\u2019information<\/a><\/li>\n<\/ul>\n