Make something real for Firefox OS with Mozilla app templates

1,587 views

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,587
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
20
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

×