SlideShare uma empresa Scribd logo
1 de 59
Baixar para ler offline
PUBLISHING TO THE
CHROME WEB STORE
PUBLISHING A .COM SITE AS A CHROME APP
AGENDA

PART 1 - BASIC CONCEPTS
PART 2 - FIRST-TIME ACCOUNT SETUP
PART 3 - PREPARING TO PUBLISH
PART 4 - PUBLISHING, UPGRADING, AND TRACKING
PART 5 - RESOURCES

!2
PART 1 - BASIC CONCEPTS

!3
1. IN A NUTSHELL
Chrome App = Zip file (Manifest + Icon) + Screenshots +
Promotional Images + Detailed Description + Settings!
It can be as simple as a link to an existing website or web app!
Or, it can be as complex as a full-blown offline-capable,
server-independent HTML5/CSS3/JS app!
Chrome Web Store Apps can be available to all, or restricted to
your Google Apps domain, or to Trusted Testers only!
Note: Publishing an app is heavy on graphics/illustration skills

!4
2.A. ADVANTAGES - NAMING

Can disconnect your App Name from a .com Domain!
Users don’t load your .com site, they go to their Apps list!
Users can refer your app to friends by its App Name!
Your Chrome app shows up on Google search results

!5
2.B. ADVANTAGES - DISTRIBUTION
Benefits from increasing ChromeOS, Chrome browser users!
Increasing users with Google Apps or Google Accounts!
Because they Install your app in Chrome, they don’t have to
memorize your URL!
Google takes care of tracking interest in your app!
Google can take care of the financial transaction (subscription)!
If Google likes your app, they can add it to a collection, or feature
it close to the top (more impressions)

!6
2.C. ADVANTAGES - TECHNOLOGY

Helps increase your percentage of Chrome users!
Past a threshold you can evolve your code to use the latest and
greatest in web technologies (HTML5, CSS, ...)!
Can take advantage in Notifications, which originally is in
ChromeOS, but is making its way to Windows and Mac OS X

!7
3. KINDS OF CHROME APPS
Hosted Apps - Served from your web server!
Zip contains a Manifest + Icon!
“A Chrome App is just a Link”!
Packaged Apps - Self-contained, doesn’t need to hit any web
server!
Zip contains Manifest + Icon + HTML5/CSS3/JS/other files!
Packaged Apps can reference content of its Zip file!
This presentation focuses on Hosted Apps!
!8
4. SUBSCRIPTION TIERS
Free, One-Time, Monthly, Yearly!
Can use your own custom payment, or Chrome Web Store
Payments service (5% fee)!
US Pricing Tiers:!
$1.99, $2.99, $3.99, $4.99, $5.99, $6.99, $7.99, $8.99, $9.99,
$14.99, $19.99, $24.99, $29.99, $34.99, $39.99, $44.99, $49.99,
any value up to $1000!
https://developers.google.com/chrome/web-store/docs/pricing

!9
5. VISIBILITY OPTIONS

There are Four visibility options:!
1. All Chrome Web Store users!
2. Chrome users with [YourDomain] account or people with
the link!
3. Chrome Web Store users with a [YourDomain] account!
4. Trusted Testers (Requires app to be Unpublished)

!10
6. PUBLISHING WORKFLOW
1. Setup Google Account used for publishing to the Chrome store!
2. Produce and Upload the Zip!
3. Produce and Upload Screenshots!
4. Produce and Upload Promotional tile images!
5. Detailed Description, Regions, Pricing, Visibility!
Tip: Give yourself at least half a day. The “Produce” parts of
Steps 2, 3, and 4 take a long time

!11
PART 2 - FIRST-TIME
ACCOUNT SETUP

!12
1. PICK A GOOGLE ACCOUNT
Decide on a Google Account to create the app with!
For a Hosted app, this account must go to Google WebMaster
Tools and verify control of the domain:!
https://support.google.com/webmasters/answer/34592?hl=en!
You can transfer account ownership ($5 fee) !
https://support.google.com/chrome_webstore/contact/
dev_account_transfer

!13
2. PAY THE ONE-TIME FEE
1. Go to the Chrome Developer Dashboard!
https://chrome.google.com/webstore/developer/dashboard!
2. If you need a Visibility option of All, you need to pay this onetime $5 fee to verify your account!
Chrome Developer Dashboard > Pay this fee now

!14
PART 3 - PREPARING TO
PUBLISH

!15
1. FOLDER STRUCTURE
Since you will relase many
versions over time, it’s a
great idea to structure your
folders well.!
To the right is a starting
point that can handle
multiple versions!
Folders are in green!
Substitute [string] with your
app’s values

[Project Folder]
Builds
yyyymmdd
[appname]dev
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional920x680al440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
[appname]prod
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
yyyymmddhhmm-appname.zip

!16
2. PRODUCE THE REQUIRED FILES

For a Hosted app, you need to provide the following:!
1. A Zip file containing a manifest.json file, and an icon.png!
2. Five (5) Screenshots!
3. Three (3) Promotional images

!17
2.A. ZIP FILE STRUCTURE
The zip file contains a folder,
which contains two files!
The manifest.json file
defines the app (name,
description, version, urls,
permissions, etc)!
Zip the folder in Prod, and
upload the zip in a later step!
Dev - see Slide 37

[Project Folder]
Builds
yyyymmdd
[appname]dev
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional920x680al440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
[appname]prod
[appname]
manifest.json
icon.png
Screenshot1...Screenshot5.jpg
Promotional440x280.jpg
Promotional920x680.jpg
Promotional1400x560.jpg
yyyymmddhhmm-appname.zip

!18
MANIFEST.JSON FILE
The Manifest file defines
your app!

{

Modify everything in green!
Increment your version and
upload it to CWS when:!
A. manifest is updated!
B. hosted app changes!

"name": "imgExpress",
"short_name": "imgExpress",
"description": "Photo processing tool",
"version": "0.0.0.1",
"manifest_version": 2,
"app": {
"urls": [
"http://www.imgExpressApp.com/"
],
"launch": {
"web_url": "http://www.imgExpressApp.com/",
"container": "panel",
"height": 650,
"width": 1280
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"unlimitedStorage",
"notifications"
]

We will now cover
highlighted variables in
detail
}
http://developer.chrome.com/extensions/manifest.html
!19
VERSION NUMBERS
Versions must be > 0 and < 65535!
Versions follow the format: n down to n.n.n.nnnn!
Can be a “1” down to “0.0.0.1234”!
Must increment version when something in manifest.json file
changes!
Version changes trigger autoupdate (see link for subtleties)!
http://developer.chrome.com/extensions/autoupdate.html

!20
URLS

These are the pages that will be granted permissions requested
in the permissions section!
Must begin with http, https, or *!
Do not include port numbers!
Chrome uses Begins With matching (has an implicit * at the
end)

!21
WEB_URL

This is the absolute URL that Chrome will load upon launch!
This is the landing page you want the user to end up when
they run your Hosted app

!22
CONTAINER STYLES
A container is where your app’s UI runs!
There are two options:!
1. tab (default)!
2. panel - new window without navigation, no omni bar

!23
PERMISSIONS
Available Permissions for Hosted apps:!
background - runs in the background after login and until user quits Chrome!
clipboardRead - required if you use document.execCommand(‘paste’)!
clipboardWrite - required if you use document.execCommand(‘copy’) or
document.execCommand(‘cut’), especially Hosted apps.!
geolocation - allows app to use HTML5 Geolocation API without prompting!
notifications - Allows app to use HTML5 Notification API without calling
checkPermission()!
unlimitedStorage - Bumps up your app’s storage limit from 5MB to
Unlimited (for SQL DB and application cache)!
http://developer.chrome.com/extensions/declare_permissions.html

!24
MEDIA FILES
Most users will decide to Install your app based on either your Icon,
Screenshots, or Promotional images!
When sizes are specified, you must upload at exactly those sizes!
Simple tools to make these:!
OS Built-in Print Screen - take screenshots!
Keynote or PowerPoint - Make promotional images!
GIMP - Make icons and crop/resize screenshots and promotional
images!
Workflow: Screenshot > Keynote > GIMP > {PNG, JPG}!
https://developers.google.com/chrome/web-store/docs/images
!25
ICON
This is displayed in two situations:!
A. When the user goes to their installed apps!
B. When you don’t have any approved Promotional images!
Steps to create an Icon!
1. Create a baseline icon that’s 96x96 pixels!
2. Create another icon (PNG) that’s 128x128 pixels with Transparency,
then paste the 96x96 in the center of this 128x128!
TIP: You can use GIMP to make this

!26
2.B. SCREENSHOTS
These are shown in a carousel when they look at your app’s
details!
You need at least one, and can have up to five!
Must be 1280x800 (exact, cannot deviate)!
Could be 640x400, but better to produce higher-resolution!
Could show the entire screen or zoom in to some functions!
Tip: Your screenshots should tell a story

!27
SAMPLE SCREENSHOT

!28
2.C. PROMOTIONAL IMAGES
Represents your app in the app wall!
Three Promotional image sizes:!
1. 440x280 - small tile (required)!
2. 920x680 - large tile!
3. 1400x560 - Marquee!
On the Chrome Store’s app wall, the system picks one of these
images to display your app to prospective users!
Tip: Submit promotional images in all three sizes
!29
PROMOTIONAL IMAGES
Google recommends the following:!
Avoid text.!
Make sure your image works even when shrunk to half size.!
Assume the image will be on a light gray background.!
Use saturated colors if possible; they tend to work well.!
Avoid using a lot of white and light gray.!
Fill the entire region.!
Make sure the edges are well defined.!
https://developers.google.com/chrome/web-store/docs/images#promo

!30
920x680

440x280

1400x560

SAMPLE PROMOTIONAL IMAGES BY GOOGLE
!31
PROMOTIONAL IMAGES ON CWS

1400X560

920X680
440X280
!32
3. SITE MODIFICATIONS
Make it easy for existing site users to convert to Chrome app
users, put an icon/link in a good spot!
Steps:!
1. Go here for icons:!
https://developers.google.com/chrome/web-store/branding!
!

2. Then link the icon to your (future) Chrome app’s page from
the Chrome Web Store
!33
EXAMPLES

Links to: https://chrome.google.com/webstore/detail/
imgexpress/gdiiemjihjdlbgmpapglfmhjgddkacig
!34
4. CHANGES FOR PAID APPS

If you’re going to have some parts of your site be designated as
a paid section of your Chrome app, you should lock it down in
the most transparent way possible!
Typically use Google Account authentication

!35
5. DEV TESTING

Once you have all the files produced, you should test it out before publishing to
the Chrome Web Store!
Follow these steps on your computer’s Chrome browser:!
1. From Chrome, go to this address chrome://extensions/!
2. Click the Developer mode checkbox on top!
3. Click the Load unpacked extension… button!
4. Select the folder containing your manifest and icon!
5. Go here: chrome://apps/ (or new Tab, click apps)!
6. Click on your app’s icon

!36
THE HARD PART IS OVER!!!

!37
PART 4 - PUBLISHING,
UPGRADING, AND
TRACKING

!38
1. CREATE APP SKELETON

These are the steps to create the initial part of your app!
1. Go to the Chrome Developer Dashboard!
https://chrome.google.com/webstore/developer/
dashboard!
2. Click the “Add new item” button!
3. Upload your Zip file

!39
2. ENTER DETAILED DESCRIPTION
The Detailed Description is a plain text field that holds up to
16,000 characters!
When a user looks at your app from the Chrome store, the
Detailed Description appears in two places:!
1. Overview tab - to the right of the screenshot carousel!
2. Details tab - this is the main highlight!
Tip: Keep it interesting yet factual, and to the point.

!40
3. UPLOAD AN ICON

Upload the same icon PNG file contained in your zip

!41
4. UPLOAD SCREENSHOTS

Upload all the screenshots you made!
Tip: Upload them one at a time, in the proper sequence

!42
5. UPLOAD PROMOTIONAL
IMAGES

Click “Upload new image” for each size, and upload the
corresponding Promotional image!
Tip: Click “Preview my promotional tiles” to see how it looks
so far

!43
6. LINK TO YOUR WEBSITE
From the drop-down, pick the domain that your app goes to!
If it’s not there, add it via Google WebMaster tools!
https://www.google.com/webmasters/tools/home?hl=en

!44
7. PICK A CATEGORY

Figure out what Category you want to
place your app under!
Sorry, you cannot pick Popular!

!45
8. PICK YOUR PRICING
Click the Change pricing button

!46
9. PICK YOUR SALES REGIONS
Pick which country’s Chrome Web Store can see your app

!47
10. ENTER GOOGLE ANALYTICS
Enter your Google Analytics ID!
At the very least, you will see these on Google Analytics:!
1. those who go to your app’s details page!
2. Installs!
For Packaged Apps, you can hit the Analytics JS API!
http://developer.chrome.com/apps/analytics.html

!48
11. SET APP VISIBILITY
This sets Visibility from a Domain perspective!
Set to All to make it visible to anyone!
Set to Chrome Web Store users with a [domain] account to only
make it visible to those in your Google Apps domain

!49
12. OTHER

Set the Language, OpenID, and Mature content fields as
appropriate

!50
13. PREVIEW

When you’ve filled out all the appropriate fields, go through
them one more time!
Click the Preview button at the bottom

!51
14. PUBLISH
If it looks good, click on the Publish link

!52
15. DONE

Your part is done!!!!
Now you wait. Google will review your Promotional images,
and do some other processing.

!53
UPGRADING
You can change majority of values related to your Chrome app!
To change, simple modify the values or upload a new version
of the file!
Increment your Version when:!
A. Modified your manifest.json file!
B. You made changes to your app on the server-side!
Changes take a few minutes before they go into effect

!54
TRACKING
Google tracks the following for you:!
1. Weekly Users - How many still have it installed for the week (Total
Installs - Total Uninstalls)!
2. Impressions (Daily) - How many times did a user browse the
Chrome Web Store and your app came into view that day!
https://groups.google.com/a/chromium.org/forum/#!msg/
chromium-apps/WKLVaktnzxs/I1oi3D4NXRIJ!
3. Installations (Daily) - How many installed it that day!
4. Star Ratings and +1s on your app details page

!55
PART 5 - RESOURCES
1. RESOURCES
This presentation: http://goo.gl/7kO15T!
Important Links:!
https://chrome.google.com/webstore/developer/dashboard!
https://developers.google.com/chrome/web-store/docs/get_started_simple!
https://developers.google.com/chrome/apps/docs/developers_guide!
https://developers.google.com/chrome/web-store/docs/images!
http://developer.chrome.com/extensions/manifest.html!
http://developer.chrome.com/extensions/declare_permissions.html!
Next Evolution: Packaged Apps!
https://docs.google.com/presentation/d/1EmexDf1ZgZ-2fG5tsjFdLjhv_AhLAwWNl0szDKMs2g/edit?pli=1#slide=id.p

!57
ABOUT THE IMGEXPRESS APP
Objective:!
Reduce Image File Sizes while maintaining good Image Quality!
Avg. 80% - 90% Reduction from camera-generated JPEG!
Operations:!
Resize, Auto-Enhance, Watermark, Compress!
Use Cases:!
Make sites load faster from smaller image payloads!
Reduce file size of documents/presentations containing screenshots or pictures!
https://chrome.google.com/webstore/detail/imgexpress/
gdiiemjihjdlbgmpapglfmhjgddkacig
2. CONTACT

Gerard Cordero!
Email: gerard@OptimizedPrime.com!
G+: https://plus.google.com/+GerardCordero!
Twitter: @GerardCordero

!59

Mais conteúdo relacionado

Destaque

Representation and stereotypes
Representation and stereotypesRepresentation and stereotypes
Representation and stereotypesShannWebb
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1AimeeBar
 
Julioballen ingles
Julioballen inglesJulioballen ingles
Julioballen ingles91362291
 
Storyboard ---the-truth
Storyboard ---the-truthStoryboard ---the-truth
Storyboard ---the-truthShannWebb
 
FilmInstitutional
FilmInstitutionalFilmInstitutional
FilmInstitutionalShannWebb
 
PlanningTheShoot
PlanningTheShootPlanningTheShoot
PlanningTheShootShannWebb
 
Design Business and Innovation
Design Business and InnovationDesign Business and Innovation
Design Business and Innovationbweaver8
 
время денег вебинар центра м арт 2013
время денег вебинар центра м арт 2013время денег вебинар центра м арт 2013
время денег вебинар центра м арт 2013Maria Fabricheva
 
Finding library resources en 1602
Finding library resources en 1602Finding library resources en 1602
Finding library resources en 1602ljackso2
 
Risk Managers: How to Create Great Stress Tests (and How to Not)
Risk Managers: How to Create Great Stress Tests (and How to Not)Risk Managers: How to Create Great Stress Tests (and How to Not)
Risk Managers: How to Create Great Stress Tests (and How to Not)Daniel Satchkov
 
Android Development Primer - GDG Los Angeles
Android Development Primer - GDG Los AngelesAndroid Development Primer - GDG Los Angeles
Android Development Primer - GDG Los AngelesGerard
 
Android Wear Code Lab
Android Wear Code LabAndroid Wear Code Lab
Android Wear Code LabGerard
 
Best Work so far. - Story-telling Photography.
Best Work so far. - Story-telling Photography.Best Work so far. - Story-telling Photography.
Best Work so far. - Story-telling Photography.ShannWebb
 
Formal elements
Formal elementsFormal elements
Formal elementsShannWebb
 
British film ~ stoker
British film ~ stokerBritish film ~ stoker
British film ~ stokerShannWebb
 

Destaque (18)

Representation and stereotypes
Representation and stereotypesRepresentation and stereotypes
Representation and stereotypes
 
Horror
HorrorHorror
Horror
 
Evaluation Question 1
Evaluation Question 1Evaluation Question 1
Evaluation Question 1
 
Julioballen ingles
Julioballen inglesJulioballen ingles
Julioballen ingles
 
Storyboard ---the-truth
Storyboard ---the-truthStoryboard ---the-truth
Storyboard ---the-truth
 
FilmInstitutional
FilmInstitutionalFilmInstitutional
FilmInstitutional
 
PlanningTheShoot
PlanningTheShootPlanningTheShoot
PlanningTheShoot
 
Bijay CV
Bijay CVBijay CV
Bijay CV
 
Design Business and Innovation
Design Business and InnovationDesign Business and Innovation
Design Business and Innovation
 
время денег вебинар центра м арт 2013
время денег вебинар центра м арт 2013время денег вебинар центра м арт 2013
время денег вебинар центра м арт 2013
 
Question 2
Question 2Question 2
Question 2
 
Finding library resources en 1602
Finding library resources en 1602Finding library resources en 1602
Finding library resources en 1602
 
Risk Managers: How to Create Great Stress Tests (and How to Not)
Risk Managers: How to Create Great Stress Tests (and How to Not)Risk Managers: How to Create Great Stress Tests (and How to Not)
Risk Managers: How to Create Great Stress Tests (and How to Not)
 
Android Development Primer - GDG Los Angeles
Android Development Primer - GDG Los AngelesAndroid Development Primer - GDG Los Angeles
Android Development Primer - GDG Los Angeles
 
Android Wear Code Lab
Android Wear Code LabAndroid Wear Code Lab
Android Wear Code Lab
 
Best Work so far. - Story-telling Photography.
Best Work so far. - Story-telling Photography.Best Work so far. - Story-telling Photography.
Best Work so far. - Story-telling Photography.
 
Formal elements
Formal elementsFormal elements
Formal elements
 
British film ~ stoker
British film ~ stokerBritish film ~ stoker
British film ~ stoker
 

Último

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 

Último (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 

Publishing to the Chrome Web Store

  • 1. PUBLISHING TO THE CHROME WEB STORE PUBLISHING A .COM SITE AS A CHROME APP
  • 2. AGENDA PART 1 - BASIC CONCEPTS PART 2 - FIRST-TIME ACCOUNT SETUP PART 3 - PREPARING TO PUBLISH PART 4 - PUBLISHING, UPGRADING, AND TRACKING PART 5 - RESOURCES !2
  • 3. PART 1 - BASIC CONCEPTS !3
  • 4. 1. IN A NUTSHELL Chrome App = Zip file (Manifest + Icon) + Screenshots + Promotional Images + Detailed Description + Settings! It can be as simple as a link to an existing website or web app! Or, it can be as complex as a full-blown offline-capable, server-independent HTML5/CSS3/JS app! Chrome Web Store Apps can be available to all, or restricted to your Google Apps domain, or to Trusted Testers only! Note: Publishing an app is heavy on graphics/illustration skills !4
  • 5. 2.A. ADVANTAGES - NAMING Can disconnect your App Name from a .com Domain! Users don’t load your .com site, they go to their Apps list! Users can refer your app to friends by its App Name! Your Chrome app shows up on Google search results !5
  • 6. 2.B. ADVANTAGES - DISTRIBUTION Benefits from increasing ChromeOS, Chrome browser users! Increasing users with Google Apps or Google Accounts! Because they Install your app in Chrome, they don’t have to memorize your URL! Google takes care of tracking interest in your app! Google can take care of the financial transaction (subscription)! If Google likes your app, they can add it to a collection, or feature it close to the top (more impressions) !6
  • 7. 2.C. ADVANTAGES - TECHNOLOGY Helps increase your percentage of Chrome users! Past a threshold you can evolve your code to use the latest and greatest in web technologies (HTML5, CSS, ...)! Can take advantage in Notifications, which originally is in ChromeOS, but is making its way to Windows and Mac OS X !7
  • 8. 3. KINDS OF CHROME APPS Hosted Apps - Served from your web server! Zip contains a Manifest + Icon! “A Chrome App is just a Link”! Packaged Apps - Self-contained, doesn’t need to hit any web server! Zip contains Manifest + Icon + HTML5/CSS3/JS/other files! Packaged Apps can reference content of its Zip file! This presentation focuses on Hosted Apps! !8
  • 9. 4. SUBSCRIPTION TIERS Free, One-Time, Monthly, Yearly! Can use your own custom payment, or Chrome Web Store Payments service (5% fee)! US Pricing Tiers:! $1.99, $2.99, $3.99, $4.99, $5.99, $6.99, $7.99, $8.99, $9.99, $14.99, $19.99, $24.99, $29.99, $34.99, $39.99, $44.99, $49.99, any value up to $1000! https://developers.google.com/chrome/web-store/docs/pricing !9
  • 10. 5. VISIBILITY OPTIONS There are Four visibility options:! 1. All Chrome Web Store users! 2. Chrome users with [YourDomain] account or people with the link! 3. Chrome Web Store users with a [YourDomain] account! 4. Trusted Testers (Requires app to be Unpublished) !10
  • 11. 6. PUBLISHING WORKFLOW 1. Setup Google Account used for publishing to the Chrome store! 2. Produce and Upload the Zip! 3. Produce and Upload Screenshots! 4. Produce and Upload Promotional tile images! 5. Detailed Description, Regions, Pricing, Visibility! Tip: Give yourself at least half a day. The “Produce” parts of Steps 2, 3, and 4 take a long time !11
  • 12. PART 2 - FIRST-TIME ACCOUNT SETUP !12
  • 13. 1. PICK A GOOGLE ACCOUNT Decide on a Google Account to create the app with! For a Hosted app, this account must go to Google WebMaster Tools and verify control of the domain:! https://support.google.com/webmasters/answer/34592?hl=en! You can transfer account ownership ($5 fee) ! https://support.google.com/chrome_webstore/contact/ dev_account_transfer !13
  • 14. 2. PAY THE ONE-TIME FEE 1. Go to the Chrome Developer Dashboard! https://chrome.google.com/webstore/developer/dashboard! 2. If you need a Visibility option of All, you need to pay this onetime $5 fee to verify your account! Chrome Developer Dashboard > Pay this fee now !14
  • 15. PART 3 - PREPARING TO PUBLISH !15
  • 16. 1. FOLDER STRUCTURE Since you will relase many versions over time, it’s a great idea to structure your folders well.! To the right is a starting point that can handle multiple versions! Folders are in green! Substitute [string] with your app’s values [Project Folder] Builds yyyymmdd [appname]dev [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional920x680al440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg [appname]prod [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg yyyymmddhhmm-appname.zip !16
  • 17. 2. PRODUCE THE REQUIRED FILES For a Hosted app, you need to provide the following:! 1. A Zip file containing a manifest.json file, and an icon.png! 2. Five (5) Screenshots! 3. Three (3) Promotional images !17
  • 18. 2.A. ZIP FILE STRUCTURE The zip file contains a folder, which contains two files! The manifest.json file defines the app (name, description, version, urls, permissions, etc)! Zip the folder in Prod, and upload the zip in a later step! Dev - see Slide 37 [Project Folder] Builds yyyymmdd [appname]dev [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional920x680al440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg [appname]prod [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg yyyymmddhhmm-appname.zip !18
  • 19. MANIFEST.JSON FILE The Manifest file defines your app! { Modify everything in green! Increment your version and upload it to CWS when:! A. manifest is updated! B. hosted app changes! "name": "imgExpress", "short_name": "imgExpress", "description": "Photo processing tool", "version": "0.0.0.1", "manifest_version": 2, "app": { "urls": [ "http://www.imgExpressApp.com/" ], "launch": { "web_url": "http://www.imgExpressApp.com/", "container": "panel", "height": 650, "width": 1280 } }, "icons": { "128": "icon_128.png" }, "permissions": [ "unlimitedStorage", "notifications" ] We will now cover highlighted variables in detail } http://developer.chrome.com/extensions/manifest.html !19
  • 20. VERSION NUMBERS Versions must be > 0 and < 65535! Versions follow the format: n down to n.n.n.nnnn! Can be a “1” down to “0.0.0.1234”! Must increment version when something in manifest.json file changes! Version changes trigger autoupdate (see link for subtleties)! http://developer.chrome.com/extensions/autoupdate.html !20
  • 21. URLS These are the pages that will be granted permissions requested in the permissions section! Must begin with http, https, or *! Do not include port numbers! Chrome uses Begins With matching (has an implicit * at the end) !21
  • 22. WEB_URL This is the absolute URL that Chrome will load upon launch! This is the landing page you want the user to end up when they run your Hosted app !22
  • 23. CONTAINER STYLES A container is where your app’s UI runs! There are two options:! 1. tab (default)! 2. panel - new window without navigation, no omni bar !23
  • 24. PERMISSIONS Available Permissions for Hosted apps:! background - runs in the background after login and until user quits Chrome! clipboardRead - required if you use document.execCommand(‘paste’)! clipboardWrite - required if you use document.execCommand(‘copy’) or document.execCommand(‘cut’), especially Hosted apps.! geolocation - allows app to use HTML5 Geolocation API without prompting! notifications - Allows app to use HTML5 Notification API without calling checkPermission()! unlimitedStorage - Bumps up your app’s storage limit from 5MB to Unlimited (for SQL DB and application cache)! http://developer.chrome.com/extensions/declare_permissions.html !24
  • 25. MEDIA FILES Most users will decide to Install your app based on either your Icon, Screenshots, or Promotional images! When sizes are specified, you must upload at exactly those sizes! Simple tools to make these:! OS Built-in Print Screen - take screenshots! Keynote or PowerPoint - Make promotional images! GIMP - Make icons and crop/resize screenshots and promotional images! Workflow: Screenshot > Keynote > GIMP > {PNG, JPG}! https://developers.google.com/chrome/web-store/docs/images !25
  • 26. ICON This is displayed in two situations:! A. When the user goes to their installed apps! B. When you don’t have any approved Promotional images! Steps to create an Icon! 1. Create a baseline icon that’s 96x96 pixels! 2. Create another icon (PNG) that’s 128x128 pixels with Transparency, then paste the 96x96 in the center of this 128x128! TIP: You can use GIMP to make this !26
  • 27. 2.B. SCREENSHOTS These are shown in a carousel when they look at your app’s details! You need at least one, and can have up to five! Must be 1280x800 (exact, cannot deviate)! Could be 640x400, but better to produce higher-resolution! Could show the entire screen or zoom in to some functions! Tip: Your screenshots should tell a story !27
  • 29. 2.C. PROMOTIONAL IMAGES Represents your app in the app wall! Three Promotional image sizes:! 1. 440x280 - small tile (required)! 2. 920x680 - large tile! 3. 1400x560 - Marquee! On the Chrome Store’s app wall, the system picks one of these images to display your app to prospective users! Tip: Submit promotional images in all three sizes !29
  • 30. PROMOTIONAL IMAGES Google recommends the following:! Avoid text.! Make sure your image works even when shrunk to half size.! Assume the image will be on a light gray background.! Use saturated colors if possible; they tend to work well.! Avoid using a lot of white and light gray.! Fill the entire region.! Make sure the edges are well defined.! https://developers.google.com/chrome/web-store/docs/images#promo !30
  • 32. PROMOTIONAL IMAGES ON CWS 1400X560 920X680 440X280 !32
  • 33. 3. SITE MODIFICATIONS Make it easy for existing site users to convert to Chrome app users, put an icon/link in a good spot! Steps:! 1. Go here for icons:! https://developers.google.com/chrome/web-store/branding! ! 2. Then link the icon to your (future) Chrome app’s page from the Chrome Web Store !33
  • 35. 4. CHANGES FOR PAID APPS If you’re going to have some parts of your site be designated as a paid section of your Chrome app, you should lock it down in the most transparent way possible! Typically use Google Account authentication !35
  • 36. 5. DEV TESTING Once you have all the files produced, you should test it out before publishing to the Chrome Web Store! Follow these steps on your computer’s Chrome browser:! 1. From Chrome, go to this address chrome://extensions/! 2. Click the Developer mode checkbox on top! 3. Click the Load unpacked extension… button! 4. Select the folder containing your manifest and icon! 5. Go here: chrome://apps/ (or new Tab, click apps)! 6. Click on your app’s icon !36
  • 37. THE HARD PART IS OVER!!! !37
  • 38. PART 4 - PUBLISHING, UPGRADING, AND TRACKING !38
  • 39. 1. CREATE APP SKELETON These are the steps to create the initial part of your app! 1. Go to the Chrome Developer Dashboard! https://chrome.google.com/webstore/developer/ dashboard! 2. Click the “Add new item” button! 3. Upload your Zip file !39
  • 40. 2. ENTER DETAILED DESCRIPTION The Detailed Description is a plain text field that holds up to 16,000 characters! When a user looks at your app from the Chrome store, the Detailed Description appears in two places:! 1. Overview tab - to the right of the screenshot carousel! 2. Details tab - this is the main highlight! Tip: Keep it interesting yet factual, and to the point. !40
  • 41. 3. UPLOAD AN ICON Upload the same icon PNG file contained in your zip !41
  • 42. 4. UPLOAD SCREENSHOTS Upload all the screenshots you made! Tip: Upload them one at a time, in the proper sequence !42
  • 43. 5. UPLOAD PROMOTIONAL IMAGES Click “Upload new image” for each size, and upload the corresponding Promotional image! Tip: Click “Preview my promotional tiles” to see how it looks so far !43
  • 44. 6. LINK TO YOUR WEBSITE From the drop-down, pick the domain that your app goes to! If it’s not there, add it via Google WebMaster tools! https://www.google.com/webmasters/tools/home?hl=en !44
  • 45. 7. PICK A CATEGORY Figure out what Category you want to place your app under! Sorry, you cannot pick Popular! !45
  • 46. 8. PICK YOUR PRICING Click the Change pricing button !46
  • 47. 9. PICK YOUR SALES REGIONS Pick which country’s Chrome Web Store can see your app !47
  • 48. 10. ENTER GOOGLE ANALYTICS Enter your Google Analytics ID! At the very least, you will see these on Google Analytics:! 1. those who go to your app’s details page! 2. Installs! For Packaged Apps, you can hit the Analytics JS API! http://developer.chrome.com/apps/analytics.html !48
  • 49. 11. SET APP VISIBILITY This sets Visibility from a Domain perspective! Set to All to make it visible to anyone! Set to Chrome Web Store users with a [domain] account to only make it visible to those in your Google Apps domain !49
  • 50. 12. OTHER Set the Language, OpenID, and Mature content fields as appropriate !50
  • 51. 13. PREVIEW When you’ve filled out all the appropriate fields, go through them one more time! Click the Preview button at the bottom !51
  • 52. 14. PUBLISH If it looks good, click on the Publish link !52
  • 53. 15. DONE Your part is done!!!! Now you wait. Google will review your Promotional images, and do some other processing. !53
  • 54. UPGRADING You can change majority of values related to your Chrome app! To change, simple modify the values or upload a new version of the file! Increment your Version when:! A. Modified your manifest.json file! B. You made changes to your app on the server-side! Changes take a few minutes before they go into effect !54
  • 55. TRACKING Google tracks the following for you:! 1. Weekly Users - How many still have it installed for the week (Total Installs - Total Uninstalls)! 2. Impressions (Daily) - How many times did a user browse the Chrome Web Store and your app came into view that day! https://groups.google.com/a/chromium.org/forum/#!msg/ chromium-apps/WKLVaktnzxs/I1oi3D4NXRIJ! 3. Installations (Daily) - How many installed it that day! 4. Star Ratings and +1s on your app details page !55
  • 56. PART 5 - RESOURCES
  • 57. 1. RESOURCES This presentation: http://goo.gl/7kO15T! Important Links:! https://chrome.google.com/webstore/developer/dashboard! https://developers.google.com/chrome/web-store/docs/get_started_simple! https://developers.google.com/chrome/apps/docs/developers_guide! https://developers.google.com/chrome/web-store/docs/images! http://developer.chrome.com/extensions/manifest.html! http://developer.chrome.com/extensions/declare_permissions.html! Next Evolution: Packaged Apps! https://docs.google.com/presentation/d/1EmexDf1ZgZ-2fG5tsjFdLjhv_AhLAwWNl0szDKMs2g/edit?pli=1#slide=id.p !57
  • 58. ABOUT THE IMGEXPRESS APP Objective:! Reduce Image File Sizes while maintaining good Image Quality! Avg. 80% - 90% Reduction from camera-generated JPEG! Operations:! Resize, Auto-Enhance, Watermark, Compress! Use Cases:! Make sites load faster from smaller image payloads! Reduce file size of documents/presentations containing screenshots or pictures! https://chrome.google.com/webstore/detail/imgexpress/ gdiiemjihjdlbgmpapglfmhjgddkacig
  • 59. 2. CONTACT Gerard Cordero! Email: gerard@OptimizedPrime.com! G+: https://plus.google.com/+GerardCordero! Twitter: @GerardCordero !59