Make something real for Firefox OS with Mozilla app templates
-
Upload
piotr-zalewa -
Category
Technology
-
view
1.266 -
download
3
Transcript of Make something real for Firefox OS with Mozilla app templates
![Page 1: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/1.jpg)
1Wednesday, 12 September 12
![Page 2: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/2.jpg)
OHAI
2Wednesday, 12 September 12
![Page 3: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/3.jpg)
@TOFUMATT AND @ZALUN
3Wednesday, 12 September 12
![Page 4: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/4.jpg)
MAKE SOMETHING REAL FOR FIREFOX OS WITH
MOZILLA APP TEMPLATES
4Wednesday, 12 September 12
![Page 5: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/5.jpg)
FIRST,we’ll need a phone
5Wednesday, 12 September 12
![Page 6: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/6.jpg)
EMULATING FIREFOX OS
•Download and install B2G emulator (95MB)
•Checkout gaia project (200MB)
•Create profile (50MB)
•Run $> b2g -profile /Users/{user}/gaia/profile
6Wednesday, 12 September 12
![Page 7: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/7.jpg)
B2G + GAIA
7Wednesday, 12 September 12
![Page 8: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/8.jpg)
STANDARD WEBDEV TOOLSMAKE USE OF THEM
8Wednesday, 12 September 12
![Page 9: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/9.jpg)
INSPECTOR
9Wednesday, 12 September 12
![Page 10: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/10.jpg)
3D VIEW
10Wednesday, 12 September 12
![Page 11: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/11.jpg)
RESPONSIVE VIEW
11Wednesday, 12 September 12
![Page 12: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/12.jpg)
WEB CONSOLE
12Wednesday, 12 September 12
![Page 13: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/13.jpg)
JSFIDDLE DRAFT FEATURE
13Wednesday, 12 September 12
![Page 14: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/14.jpg)
X-TAGS: BUILDING BLOCKS
14Wednesday, 12 September 12
![Page 15: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/15.jpg)
X-TAGS
• accordion • actionbar • alert-popup • autosuggest • date-time-picker • dialog-prompt • dialog-toast • dragbox • dropdown-menu
• flipbox • grid-list • index-scroller• list-view• map• mediaquery• modal • overlay • pager • panel
• select-list• shiftbox• slidebox• slider• tabbox• time-picker-analog• toggle-switch• toggler • search-list
15Wednesday, 12 September 12
![Page 16: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/16.jpg)
MANY OTHER TOOLS...
16Wednesday, 12 September 12
![Page 17: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/17.jpg)
PRE-APP SUBMISSION
•Write your app
•Create Manifestcheck it on http://appmanifest.org
•Host the app somewhere for github $> volo ghdeploy
17Wednesday, 12 September 12
![Page 18: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/18.jpg)
http://marketplace.mozilla.org/developers
18Wednesday, 12 September 12
![Page 19: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/19.jpg)
IN STORE!
19Wednesday, 12 September 12
![Page 20: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/20.jpg)
OK, SO HOW DO I BUILD IT?!
20Wednesday, 12 September 12
![Page 21: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/21.jpg)
WE’VE THOUGHT OF THAT
21Wednesday, 12 September 12
![Page 22: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/22.jpg)
22Wednesday, 12 September 12
![Page 23: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/23.jpg)
MANY MOVING PARTS
23Wednesday, 12 September 12
![Page 24: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/24.jpg)
•Appcache and web app manifests
•Asset management
•Responsive design
•Server to host an app
•Gaming template
•Payment API
• iOS Compatibility
•Modular JavaScript
•App-specific libraries
•Kitchen sink?
24Wednesday, 12 September 12
![Page 25: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/25.jpg)
25Wednesday, 12 September 12
![Page 26: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/26.jpg)
APP TEMPLATES
26Wednesday, 12 September 12
![Page 27: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/27.jpg)
•Standard App Stub
•2D Game Template
•Server Template
27Wednesday, 12 September 12
![Page 28: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/28.jpg)
•Appcache (App works offline)
• iOS, FirefoxOS, etc.
•Responsive Design
•Works with volo
APP STUB
28Wednesday, 12 September 12
![Page 29: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/29.jpg)
•Animation Loop
•Canvas + JS
•Desktop + Mobile
•Keyboard, Mouse, and Gamepad
WEBGAMESTUB
29Wednesday, 12 September 12
![Page 30: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/30.jpg)
•node.js + express
•Common use cases
•Deploy on Heroku
• Includes App Stub
SUTTHISAN สุทธิสาร
30Wednesday, 12 September 12
![Page 31: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/31.jpg)
Web app package and deploy management
VOLO
31Wednesday, 12 September 12
![Page 32: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/32.jpg)
It does all this awesome stuff OMG!!!1♥♥♥VOLO
32Wednesday, 12 September 12
![Page 33: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/33.jpg)
ONE-STEP DEPLOY
33Wednesday, 12 September 12
![Page 34: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/34.jpg)
COMPRESS ASSETS
34Wednesday, 12 September 12
![Page 35: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/35.jpg)
CREATE MANIFESTS
35Wednesday, 12 September 12
![Page 36: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/36.jpg)
SHOW ME THE MONEY
36Wednesday, 12 September 12
![Page 37: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/37.jpg)
BORING
37Wednesday, 12 September 12
![Page 38: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/38.jpg)
MUCH COOLER
38Wednesday, 12 September 12
![Page 39: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/39.jpg)
NOT JUST GAMES
39Wednesday, 12 September 12
![Page 40: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/40.jpg)
BUILT INA DAY
40Wednesday, 12 September 12
![Page 41: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/41.jpg)
TELEPONGTwo contributors in one afternoon
41Wednesday, 12 September 12
![Page 42: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/42.jpg)
YOU CAN DO THIS
42Wednesday, 12 September 12
![Page 43: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/43.jpg)
NOW GO MAKEAWESOME APPS!
43Wednesday, 12 September 12
![Page 44: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/44.jpg)
QUESTIONS?
44Wednesday, 12 September 12
![Page 45: Make something real for Firefox OS with Mozilla app templates](https://reader031.fdocuments.in/reader031/viewer/2022020217/55527889b4c905b4598b4916/html5/thumbnails/45.jpg)
THANKS!http://tinyurl.com/mozcamp-apps
45Wednesday, 12 September 12