Wednesday, 12 September 12   1
OHAIWednesday, 12 September 12          2
@TOFUMATT AND @ZALUNWednesday, 12 September 12              3
MAKE SOMETHING REAL                       FOR FIREFOX OS WITH                      MOZILLA APP TEMPLATESWednesday, 12 Sept...
FIRST,                             we’ll need a phoneWednesday, 12 September 12                        5
EMULATING FIREFOX OS     • Download                 and install B2G emulator (95MB)     • Checkout                gaia pro...
B2G + GAIAWednesday, 12 September 12   7
STANDARD WEBDEV TOOLS                             MAKE USE OF THEMWednesday, 12 September 12                      8
INSPECTORWednesday, 12 September 12               9
3D VIEWWednesday, 12 September 12             10
RESPONSIVE VIEWWednesday, 12 September 12                     11
WEB CONSOLEWednesday, 12 September 12                 12
JSFIDDLE DRAFT FEATUREWednesday, 12 September 12                      13
X-TAGS:                    BUILDING                     BLOCKSWednesday, 12 September 12     14
X-TAGS                             •   flipbox     •   accordion                                •   select-list            ...
MANY OTHER TOOLS...Wednesday, 12 September 12                         16
PRE-APP SUBMISSION     • Write                 your app     • Create  Manifest        check it on http://appmanifest.org  ...
http://marketplace.mozilla.org/developersWednesday, 12 September 12                                   18
IN STORE!Wednesday, 12 September 12      19
OK, SO HOW DO I BUILD IT?!Wednesday, 12 September 12                  20
WE’VE THOUGHT OF THATWednesday, 12 September 12                   21
Wednesday, 12 September 12   22
MANY MOVING PARTSWednesday, 12 September 12                       23
• Payment API     • Appcache and   web app manifests     • iOS Compatibility     • Asset management     • Modular JavaScri...
Wednesday, 12 September 12   25
APP TEMPLATESWednesday, 12 September 12                   26
• Standard                App Stub     • 2D              Game Template     • Server                TemplateWednesday, 12 S...
APP STUB     • Appcache                          (App        works offline)     • iOS,              FirefoxOS, etc.     • Re...
WEBGAMESTUB     • Animation                Loop     • Canvas                + JS     • Desktop                + Mobile    ...
SUTTHISAN สุทธิสาร     • node.js               + express     • Common                 use cases     • Deploy              ...
VOLO                       Web app package and deploy managementWednesday, 12 September 12                                ...
VOLO                     It does all this awesome stuff OMG!!!1♥♥♥Wednesday, 12 September 12                               ...
ONE-STEP DEPLOYWednesday, 12 September 12                     33
COMPRESS ASSETSWednesday, 12 September 12                     34
CREATE MANIFESTSWednesday, 12 September 12                      35
SHOW ME THE MONEYWednesday, 12 September 12                       36
BORINGWednesday, 12 September 12            37
MUCH COOLERWednesday, 12 September 12                 38
NOT JUST GAMESWednesday, 12 September 12                    39
BUILT IN                         A DAYWednesday, 12 September 12         40
TELEPONG                             Two contributors in one afternoonWednesday, 12 September 12                          ...
YOU CAN DO THISWednesday, 12 September 12                     42
NOW GO MAKE                             AWESOME APPS!Wednesday, 12 September 12                   43
QUESTIONS?Wednesday, 12 September 12                44
THANKS!                             http://tinyurl.com/mozcamp-appsWednesday, 12 September 12                             ...
Upcoming SlideShare
Loading in...5
×

Make something real for Firefox OS with Mozilla app templates

1,292

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,292
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Make something real for Firefox OS with Mozilla app templates

  1. 1. Wednesday, 12 September 12 1
  2. 2. OHAIWednesday, 12 September 12 2
  3. 3. @TOFUMATT AND @ZALUNWednesday, 12 September 12 3
  4. 4. MAKE SOMETHING REAL FOR FIREFOX OS WITH MOZILLA APP TEMPLATESWednesday, 12 September 12 4
  5. 5. FIRST, we’ll need a phoneWednesday, 12 September 12 5
  6. 6. EMULATING FIREFOX OS • Download and install B2G emulator (95MB) • Checkout gaia project (200MB) • Create profile (50MB) • Run $> b2g -profile /Users/{user}/gaia/profileWednesday, 12 September 12 6
  7. 7. B2G + GAIAWednesday, 12 September 12 7
  8. 8. STANDARD WEBDEV TOOLS MAKE USE OF THEMWednesday, 12 September 12 8
  9. 9. INSPECTORWednesday, 12 September 12 9
  10. 10. 3D VIEWWednesday, 12 September 12 10
  11. 11. RESPONSIVE VIEWWednesday, 12 September 12 11
  12. 12. WEB CONSOLEWednesday, 12 September 12 12
  13. 13. JSFIDDLE DRAFT FEATUREWednesday, 12 September 12 13
  14. 14. X-TAGS: BUILDING BLOCKSWednesday, 12 September 12 14
  15. 15. X-TAGS • flipbox • accordion • select-list • grid-list • actionbar • shiftbox • index-scroller • alert-popup • slidebox • list-view • autosuggest • slider • map • date-time-picker • tabbox • mediaquery • dialog-prompt • time-picker-analog • modal • dialog-toast • toggle-switch • overlay • dragbox • toggler • pager • dropdown-menu • search-list • panelWednesday, 12 September 12 15
  16. 16. MANY OTHER TOOLS...Wednesday, 12 September 12 16
  17. 17. PRE-APP SUBMISSION • Write your app • Create Manifest check it on http://appmanifest.org • Host the app somewhere for github $> volo ghdeployWednesday, 12 September 12 17
  18. 18. http://marketplace.mozilla.org/developersWednesday, 12 September 12 18
  19. 19. IN STORE!Wednesday, 12 September 12 19
  20. 20. OK, SO HOW DO I BUILD IT?!Wednesday, 12 September 12 20
  21. 21. WE’VE THOUGHT OF THATWednesday, 12 September 12 21
  22. 22. Wednesday, 12 September 12 22
  23. 23. MANY MOVING PARTSWednesday, 12 September 12 23
  24. 24. • Payment API • Appcache and web app manifests • iOS Compatibility • Asset management • Modular JavaScript • Responsive design • App-specific libraries • Server to host an app • Kitchen sink? • Gaming templateWednesday, 12 September 12 24
  25. 25. Wednesday, 12 September 12 25
  26. 26. APP TEMPLATESWednesday, 12 September 12 26
  27. 27. • Standard App Stub • 2D Game Template • Server TemplateWednesday, 12 September 12 27
  28. 28. APP STUB • Appcache (App works offline) • iOS, FirefoxOS, etc. • Responsive Design • Works with voloWednesday, 12 September 12 28
  29. 29. WEBGAMESTUB • Animation Loop • Canvas + JS • Desktop + Mobile • Keyboard, Mouse, and GamepadWednesday, 12 September 12 29
  30. 30. SUTTHISAN สุทธิสาร • node.js + express • Common use cases • Deploy on Heroku • Includes App StubWednesday, 12 September 12 30
  31. 31. VOLO Web app package and deploy managementWednesday, 12 September 12 31
  32. 32. VOLO It does all this awesome stuff OMG!!!1♥♥♥Wednesday, 12 September 12 32
  33. 33. ONE-STEP DEPLOYWednesday, 12 September 12 33
  34. 34. COMPRESS ASSETSWednesday, 12 September 12 34
  35. 35. CREATE MANIFESTSWednesday, 12 September 12 35
  36. 36. SHOW ME THE MONEYWednesday, 12 September 12 36
  37. 37. BORINGWednesday, 12 September 12 37
  38. 38. MUCH COOLERWednesday, 12 September 12 38
  39. 39. NOT JUST GAMESWednesday, 12 September 12 39
  40. 40. BUILT IN A DAYWednesday, 12 September 12 40
  41. 41. TELEPONG Two contributors in one afternoonWednesday, 12 September 12 41
  42. 42. YOU CAN DO THISWednesday, 12 September 12 42
  43. 43. NOW GO MAKE AWESOME APPS!Wednesday, 12 September 12 43
  44. 44. QUESTIONS?Wednesday, 12 September 12 44
  45. 45. THANKS! http://tinyurl.com/mozcamp-appsWednesday, 12 September 12 45
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×