SlideShare uma empresa Scribd logo
1 de 45
Baixar para ler offline
Wednesday, 12 September 12   1
OHAI




Wednesday, 12 September 12          2
@TOFUMATT AND @ZALUN




Wednesday, 12 September 12              3
MAKE SOMETHING REAL
                       FOR FIREFOX OS WITH
                      MOZILLA APP TEMPLATES



Wednesday, 12 September 12                    4
FIRST,
                             we’ll need a phone




Wednesday, 12 September 12                        5
EMULATING FIREFOX OS

     • Download                 and install B2G emulator (95MB)

     • Checkout                gaia project (200MB)

     • Create                profile (50MB)

     • Run               $> b2g -profile /Users/{user}/gaia/profile




Wednesday, 12 September 12                                          6
B2G + GAIA




Wednesday, 12 September 12   7
STANDARD WEBDEV TOOLS
                             MAKE USE OF THEM




Wednesday, 12 September 12                      8
INSPECTOR

Wednesday, 12 September 12               9
3D VIEW

Wednesday, 12 September 12             10
RESPONSIVE VIEW

Wednesday, 12 September 12                     11
WEB CONSOLE

Wednesday, 12 September 12                 12
JSFIDDLE DRAFT FEATURE

Wednesday, 12 September 12                      13
X-TAGS:
                    BUILDING
                     BLOCKS




Wednesday, 12 September 12     14
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
                             •   panel




Wednesday, 12 September 12                                                 15
MANY OTHER TOOLS...




Wednesday, 12 September 12                         16
PRE-APP SUBMISSION

     • Write                 your app

     • Create  Manifest
        check it on http://appmanifest.org

     • Host   the app somewhere
        for github $> volo ghdeploy




Wednesday, 12 September 12                   17
http://marketplace.mozilla.org/developers




Wednesday, 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 THAT




Wednesday, 12 September 12                   21
Wednesday, 12 September 12   22
MANY MOVING PARTS




Wednesday, 12 September 12                       23
• 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 template



Wednesday, 12 September 12                24
Wednesday, 12 September 12   25
APP TEMPLATES




Wednesday, 12 September 12                   26
• Standard                App Stub

     • 2D              Game Template

     • Server                Template




Wednesday, 12 September 12                27
APP STUB


     • Appcache                          (App
        works offline)

     • iOS,              FirefoxOS, etc.

     • Responsive                Design

     • Works                 with volo



Wednesday, 12 September 12                      28
WEBGAMESTUB


     • Animation                Loop

     • Canvas                + JS

     • Desktop                + Mobile

     • Keyboard,                Mouse, and
        Gamepad



Wednesday, 12 September 12                   29
SUTTHISAN สุทธิสาร


     • node.js               + express

     • Common                 use cases

     • Deploy                on Heroku

     • Includes               App Stub



Wednesday, 12 September 12                30
VOLO
                       Web app package and deploy management




Wednesday, 12 September 12                                     31
VOLO
                     It does all this awesome stuff OMG!!!1♥♥♥




Wednesday, 12 September 12                                      32
ONE-STEP DEPLOY

Wednesday, 12 September 12                     33
COMPRESS ASSETS

Wednesday, 12 September 12                     34
CREATE MANIFESTS

Wednesday, 12 September 12                      35
SHOW ME THE MONEY




Wednesday, 12 September 12                       36
BORING

Wednesday, 12 September 12            37
MUCH COOLER

Wednesday, 12 September 12                 38
NOT JUST GAMES

Wednesday, 12 September 12                    39
BUILT IN
                         A DAY




Wednesday, 12 September 12         40
TELEPONG
                             Two contributors in one afternoon




Wednesday, 12 September 12                                       41
YOU CAN DO THIS

Wednesday, 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-apps




Wednesday, 12 September 12                                     45

Mais conteúdo relacionado

Semelhante a Make something real for Firefox OS with Mozilla app templates

How AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use MagnoliaHow AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use Magnoliabkraft
 
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike RoyReplacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike Royhannonhill
 
Brand Engagement and the Future of the Interface
Brand Engagement and the Future of the InterfaceBrand Engagement and the Future of the Interface
Brand Engagement and the Future of the InterfaceAmber Case
 
Cloud Foundry Bootcamp
Cloud Foundry BootcampCloud Foundry Bootcamp
Cloud Foundry BootcampAlvaro Videla
 
Lanesse meeting Eye amsterdam
Lanesse meeting Eye amsterdamLanesse meeting Eye amsterdam
Lanesse meeting Eye amsterdamVincent Everts
 
Keeping responsive into the future by Chris mills
Keeping responsive into the future by Chris millsKeeping responsive into the future by Chris mills
Keeping responsive into the future by Chris millsCodemotion
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsMidori Connolly
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5C4Media
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsKyle Oba
 
Performance for Product Developers
Performance for Product DevelopersPerformance for Product Developers
Performance for Product DevelopersMatthew Wilkes
 
Adapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureAdapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureChris Mills
 
Migrando do App Engine para o Heroku
Migrando do App Engine para o HerokuMigrando do App Engine para o Heroku
Migrando do App Engine para o HerokuFilipe Ximenes
 
Ultrapassando o ABC do Scrum
Ultrapassando o ABC do ScrumUltrapassando o ABC do Scrum
Ultrapassando o ABC do ScrumIgor Macaubas
 
component: ruby gems for the browser
component: ruby gems for the browsercomponent: ruby gems for the browser
component: ruby gems for the browserTimothy Oxley
 
Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Arik Fraimovich
 

Semelhante a Make something real for Firefox OS with Mozilla app templates (20)

TRNK Presentation
TRNK PresentationTRNK Presentation
TRNK Presentation
 
How AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use MagnoliaHow AngryNerds Convinced Atlassian to Use Magnolia
How AngryNerds Convinced Atlassian to Use Magnolia
 
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike RoyReplacing Wordpress with Cascade Server (where possible) by Mike Roy
Replacing Wordpress with Cascade Server (where possible) by Mike Roy
 
Brand Engagement and the Future of the Interface
Brand Engagement and the Future of the InterfaceBrand Engagement and the Future of the Interface
Brand Engagement and the Future of the Interface
 
Cloud Foundry Bootcamp
Cloud Foundry BootcampCloud Foundry Bootcamp
Cloud Foundry Bootcamp
 
Lanesse meeting Eye amsterdam
Lanesse meeting Eye amsterdamLanesse meeting Eye amsterdam
Lanesse meeting Eye amsterdam
 
Keeping responsive into the future by Chris mills
Keeping responsive into the future by Chris millsKeeping responsive into the future by Chris mills
Keeping responsive into the future by Chris mills
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting Professionals
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5
 
living drupal
living drupalliving drupal
living drupal
 
iOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode StoryboardsiOS Prototyping with Xcode Storyboards
iOS Prototyping with Xcode Storyboards
 
Performance for Product Developers
Performance for Product DevelopersPerformance for Product Developers
Performance for Product Developers
 
Adapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureAdapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the future
 
Migrando do App Engine para o Heroku
Migrando do App Engine para o HerokuMigrando do App Engine para o Heroku
Migrando do App Engine para o Heroku
 
Node jsworkshop
Node jsworkshopNode jsworkshop
Node jsworkshop
 
Ultrapassando o ABC do Scrum
Ultrapassando o ABC do ScrumUltrapassando o ABC do Scrum
Ultrapassando o ABC do Scrum
 
component: ruby gems for the browser
component: ruby gems for the browsercomponent: ruby gems for the browser
component: ruby gems for the browser
 
Firefoxos bcndevcon
Firefoxos bcndevconFirefoxos bcndevcon
Firefoxos bcndevcon
 
Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)Why not to use Rails? (actually it's when not to use Rails)
Why not to use Rails? (actually it's when not to use Rails)
 
100% JS
100% JS100% JS
100% JS
 

Último

Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 

Último (20)

Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 

Make something real for Firefox OS with Mozilla app templates