Firefoxos bcndevcon

Hello. My name is Alina Mierlus.
Community organizer, geek, loves the web

@alina_mierlus - contact[at]alinamierlus[dot]com - alinamierlus.com

Wednesday, December 19, 12

1998

1998 - II

2001

STATE OF INNOVATION

2003

PARTICIPATION

NOW - BIGGER, STRONGER

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


VIDEO - MOZILLA STORY

INNOVATIONS

exploring the potential of web tech. and social


TOOLS
for everyone to create, experiment and learn how
the web works


PROGRAMS

EVENTS

FIREFOX OS

Bringing the Open Web to Mobile Devices

Firefox OS - Components


GONK GECKO

GAIA


GONK

Lower level operating system, consisting of a
Linux kernel and HAL (Hardware Abstraction
Layer).

Possibility to expose anything from the
hardware to Gecko.


GECKO

The application runtime. The rendering
engine in Firefox for HTML5, CSS &
JavaScript. Implements a number of APIs.


GAIA

The user interface, built entirely by HTML5 &
Open Web APIs.


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


Web APIs


http://arewemobileyet.com

AreWeMobileYet?

https://wiki.mozilla.org/WebAPI

Wiki

A Few Web APIs


WEBTELEPHONY


WEBSMS


BATTERY
STATUS API
(W3C)


CONTACTS API


SETTINGS API


FIREFOX OS - test it!
TECHNICAL RESOURCES, DEMOS, AND MORE...


FIREFOX OS


http://www.mozilla.org/b2g/

Website

http://www.mozilla.org/b2g/faq/

FAQ

http://joshcarpenter.ca/Boot-to-
Gecko

UX Concept

http://openwebdevice.com

Open Web Device (OWD)

http://wiki.mozilla.org/B2G

Wiki

FIREFOX OS
Development Environment


TECHNICAL DOCUMENTATION


http://github.com/mozilla-b2g/B2G

GitHub

https://developer.mozilla.org/en/
Mozilla/Boot_to_Gecko

Mozilla Developer Network

QUESTIONS, ISSUES, BUG TRACKING


http://groups.google.com/group/
mozilla.dev.b2g/topics

Discussion Forum

http://lists.mozilla.org/listinfo/
dev-b2g

Mailing List

http://irc.mozilla.org
#b2g

IRC

https://bugzilla.mozilla.org/
buglist.cgi?quicksearch=b2g

Bugzilla

https://github.com/mozilla-b2g/
B2G/issues

GitHub Issues

TESTING FIREFOX OS


FIREFOX OS SIMULATOR
https://addons.mozilla.org/en-us/ﬁrefox/
addon/ﬁrefox-os-simulator/


FIREFOX NIGHTLY


DEVICE ALTERNATIVES


http://developer.mozilla.org/en-US/
docs/Mozilla/Boot_to_Gecko/
B2G_build_prerequisites/

Flash onto Android

http://developer.mozilla.org/en/Mozilla/
Boot_to_Gecko/Using_the_B2G_emulators

Emulator

http://dknite.wordpress.com/
2012/07/18/desktop-builds-now-
available-for-ﬁrefox-os/

Desktop Build

1. Download desktop builds

2. Checkout Gaia

3. Set environment variables

4. Create proﬁle

5. Run


http://ftp.mozilla.org/pub/
mozilla.org/
b2g/nightly/latest-mozilla-central/

Download desktop builds

git clone git://github.com/mozilla-b2g/
gaia

Checkout Gaia

# In gaia directory
make proﬁle

Set environment variables

GAIA = PATH_TO_GAIA_REPOSITORY

GAIA_DOMAIN = gaiamobile.org

Create proﬁle

/path/to/b2g -proﬁle ~/gaia/proﬁle

Run

Web Apps from Mozilla


HTML5 & FRIENDS


http://webplatform.org/
http://developer.mozilla.org/en-US/
learn/html5

CSS3 / Semantics / Connectivity / Offline &
Storage / Multimedia / Performance &
Integration / 3D, Graphics & Effects /
Device Access (+ Tons of other cool tools &
resources)

Learn HTML5 (MDN)

http://www.openwebdevice.com/
partners/

Basic HTML5 Guidelines (OWD)

GAIA UI BLOCKS


https://wiki.mozilla.org/Gaia/
Design/BuildingBlocks

Wiki

https://github.com/mozilla-b2g/
Gaia-UI-Building-Blocks

Future home of code

https://github.com/telefonicaid/
Gaia-UI-Building-Blocks

Test bed of code

http://telefonicaid.github.com/Gaia-
UI-Building-Blocks/index.html

Webpage with working code

FIREFOX OS
Writing Apps, Mozilla Marketplace


An initiative to bring App
experiences — built using
HTML5 standards and open
technologies (HTML, CSS & JS)
— 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
1. HTML5, CSS, & Javascript

2. Create an app manifest ﬁle

3. Publish/install the app


https://developer.mozilla.org/apps

Develop Web App

Reuse any existing web site/app 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.


https://developer.mozilla.org/en/
Apps/Manifest

App Manifest

http://appmanifest.org/

The Manifest Checker

{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"locales": {
"es": {
"description": "¡Acción abierta emocionante del desarrollo del Web!",
"developer": {
"url": "http://es.mozillalabs.com/"
}
},
"it": {
"description": "Azione aperta emozionante di sviluppo di fotoricettore!",
"developer": {
"url": "http://it.mozillalabs.com/"
}
}
},
"default_locale": "en"
}


http://marketplace.mozilla.org/
developers/

App Submission Hub

http://groups.google.com/forum/?
fromgroups#!forum/
mozilla.dev.webapps

Discussion Forum

http://lists.mozilla.org/listinfo/
dev-webapps

Mailing List

http://irc.mozilla.org
#openwebapps

IRC

And finally...


Thanks to @cyberdees (Desigan Chinniah) and
@pfinette (Pascal Finette)

for ideas and materials I used for this presentation


Hello. My name is Alina Mierlus.
Community organizer, geek, loves the web

Questions? Thanks!
@alina_mierlus @mozilla @mozillacat


Firefoxos bcndevcon

Recomendados

Recomendados

Más contenido relacionado

Similar a Firefoxos bcndevcon

Similar a Firefoxos bcndevcon (20)

Último

Último (20)

Firefoxos bcndevcon