firefoxos bcndevcon

Wednesday December 19 12

Hello My name is Alina MierlusCommunity organizer geek loves the web

alina_mierlus - contact[at]alinamierlus[dot]com - alinamierluscom



1998Wednesday December 19 12

1998 - IIWednesday December 19 12


STATE OF INNOVATIONWednesday December 19 12


PARTICIPATIONWednesday December 19 12

NOW - BIGGER STRONGERWednesday December 19 12



Firefox OS formally known as the Boot to Gecko (B2G) project was launched to enable the Open Web as a platform for mobile devices Wersquore making innovation possible by driving the development of new Web standards



VIDEO - MOZILLA STORYWednesday December 19 12

INNOVATIONS

exploring the potential of web tech and social


TOOLSfor everyone to create experiment and learn how

the web works


PROGRAMSWednesday December 19 12

EVENTSWednesday December 19 12

Bringing the Open Web to Mobile Devices

FIREFOX OS


Firefox OS - Components


GONK GECKO

GAIA


GONKWednesday December 19 12

Lower level operating system consisting of a Linux kernel and HAL (Hardware Abstraction

Layer)

Possibility to expose anything from the hardware to Gecko


GECKOWednesday December 19 12

The application runtime The rendering engine in Firefox for HTML5 CSS amp

JavaScript Implements a number of APIs


GAIAWednesday December 19 12


The user interface built entirely by HTML5 amp Open Web APIs


Using HTML5 CSS and JavaScript together with a number of APIs to build apps and customize the UI


Web APIs



1 AreWeMobileYet

httparewemobileyetcom



2 Wiki

httpswikimozillaorgWebAPI


A Few Web APIs


WEBTELEPHONY


WEBSMS


BATTERY STATUS API (W3C)


CONTACTS API


SETTINGS API


FIREFOX OS - test itTECHNICAL RESOURCES DEMOS AND MORE


FIREFOX OS


1 Website

httpwwwmozillaorgb2g


2 FAQ

httpwwwmozillaorgb2gfaq



3 httpjoshcarpentercaBoot-to-Gecko

UX ConceptWednesday December 19 12


4 httpopenwebdevicecom

Open Web Device (OWD)Wednesday December 19 12


5 httpwikimozillaorgB2G

WikiWednesday December 19 12


FIREFOX OSDevelopment Environment


TECHNICAL DOCUMENTATION


1 httpgithubcommozilla-b2gB2G

GitHubWednesday December 19 12


2 httpsdevelopermozillaorgenMozillaBoot_to_Gecko

Mozilla Developer Network Wednesday December 19 12


QUESTIONS ISSUES BUG TRACKING


1 httpgroupsgooglecomgroupmozilladevb2gtopics

Discussion ForumWednesday December 19 12

2 httplistsmozillaorglistinfodev-b2g

Mailing ListWednesday December 19 12

3 httpircmozillaorgb2g

IRCWednesday December 19 12

4 httpsbugzillamozillaorgbuglistcgiquicksearch=b2g

BugzillaWednesday December 19 12

5 httpsgithubcommozilla-b2gB2Gissues

GitHub IssuesWednesday December 19 12

TESTING FIREFOX OS


FIREFOX OS SIMULATORhttpsaddonsmozillaorgen-usfirefox

addonfirefox-os-simulator


FIREFOX NIGHTLY




DEVICE ALTERNATIVES


1 Flash onto Android

httpdevelopermozillaorgen-USdocsMozillaBoot_to_Gecko

B2G_build_prerequisites


2 Emulator

httpdevelopermozillaorgenMozillaBoot_to_GeckoUsing_the_B2G_emulators


3 Desktop Build

httpdknitewordpresscom20120718desktop-builds-now-

available-for-firefox-os


5 Run

1 Download desktop builds

2 Checkout Gaia

3 Set environment variables

4 Create profile



httpftpmozillaorgpubmozillaorgb2gnightlylatest-mozilla-central


2 Checkout Gaia

git clone gitgithubcommozilla-b2ggaia



In gaia directorymake profile


4 Create profile

GAIA = PATH_TO_GAIA_REPOSITORY

GAIA_DOMAIN = gaiamobileorg


5 Run

pathtob2g -profile ~gaiaprofile


Web Apps from Mozilla




HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg

CSS3 Semantics Connectivity Offline amp Storage Multimedia Performance amp Integration 3D Graphics amp Effects

Device Access (+ Tons of other cool tools amp resources)

httpdevelopermozillaorgen-USlearnhtml5



2 Basic HTML5 Guidelines (OWD)

httpwwwopenwebdevicecompartners



GAIA UI BLOCKS


1 Wiki

httpswikimozillaorgGaiaDesignBuildingBlocks



2 Future home of code

httpsgithubcommozilla-b2gGaia-UI-Building-Blocks


3 Test bed of code

httpsgithubcomtelefonicaidGaia-UI-Building-Blocks


4 Webpage with working code

httptelefonicaidgithubcomGaia-UI-Building-Blocksindexhtml




FIREFOX OSWriting Apps Mozilla Marketplace



An initiative to bring App experiences mdash built using HTML5 standards and open technologies (HTML CSS amp JS) mdash across all your devices


Web apps are apps built using standard Web technologies They work in any modern Web browser

and can be developed using your favorite tools

The Open Web apps project proposes some small additions to existing sites to turn them into apps that

run in a rich fun and powerful computing environment

These apps run on desktop browsers and mobile devices and are easier for a user to discover and launch than Web

sites




Develop Web App using HTML5 CSS amp Javascript1

Create an app manifest file2

Publishinstall the app3


1 Develop Web App

httpsdevelopermozillaorgapps


Reuse any existing web siteapp or develop from scratch with open web standards

Utilize HTML5 features such as localStorage offline manifest IndexedDB and access Web APIs for more

options

Responsive web design for adapting to varying resolutions and screen orientation




2 httpsdevelopermozillaorgenAppsManifest

App ManifestWednesday December 19 12

3 httpappmanifestorg

The Manifest CheckerWednesday December 19 12


version 10 name MozillaBall description Exciting Open Web development action icons 16 imgicon-16png 48 imgicon-48png 128 imgicon-128png developer name Mozilla Labs url httpmozillalabscom installs_allowed_from [] appcache_path cachemanifest locales es description iexclAccioacuten abierta emocionante del desarrollo del Web developer url httpesmozillalabscom it description Azione aperta emozionante di sviluppo di fotoricettore developer url httpitmozillalabscom default_locale en


httpmarketplacemozillaorgdevelopers

4 App Submission HubWednesday December 19 12


5 httpgroupsgooglecomforumfromgroupsforummozilladevwebapps


6 httplistsmozillaorglistinfodev-webapps


7 httpircmozillaorgopenwebapps






And finally




Thanks to cyberdees (Desigan Chinniah) andpfinette (Pascal Finette)

for ideas and materials I used for this presentation



Questions Thanksalina_mierlus mozilla mozillacat



alina_mierlus - contact[at]alinamierlus[dot]com - alinamierluscom
















INNOVATIONS




the web works





FIREFOX OS




GONK GECKO

GAIA




Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally
























INNOVATIONS




the web works





FIREFOX OS




GONK GECKO

GAIA




Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally











the web works





FIREFOX OS




GONK GECKO

GAIA




Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally













FIREFOX OS




GONK GECKO

GAIA




Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally












GONK GECKO

GAIA




Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally












Layer)













Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally




















Web APIs



1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally











1 AreWeMobileYet




2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally











2 Wiki



A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










A Few Web APIs


WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










WEBTELEPHONY


WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










WEBSMS




CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally












CONTACTS API


SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










SETTINGS API




FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally












FIREFOX OS


1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










1 Website



2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










2 FAQ



































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










































TESTING FIREFOX OS





FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally













FIREFOX NIGHTLY




DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally












DEVICE ALTERNATIVES






2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally














2 Emulator



3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










3 Desktop Build




5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










5 Run


2 Checkout Gaia


4 Create profile





2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally













2 Checkout Gaia






4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally













4 Create profile




5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










5 Run







HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally














HTML5 amp FRIENDS


1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










1 Learn HTML5 (MDN)

httpwebplatformorg










GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally















GAIA UI BLOCKS


1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally










1 Wiki







3 Test bed of code


















sites








1 Develop Web App





options

























And finally














3 Test bed of code


















sites








1 Develop Web App





options

























And finally

























sites








1 Develop Web App





options

























And finally
















1 Develop Web App





options

























And finally












options

























And finally
































And finally










firefoxos bcndevcon

Health & Medicine