open (mobile) web app development
on Firefox OS

Dr. Sabin Buraga
Faculty of Computer Science, UAIC – Iasi, Romania
www.pu...
❄❄❄

Internet
(Web)

open
mobile web
application
development web app = interaction + code + data
❄❄❄

Internet
(Web)

open
mobile web
application
development web app = interaction + code + data
client-side and/or server...
❄❄❄

Internet
(Web)

open
mobile web
application
development web app = interaction + code + data
client-side and/or server...
web project

open
mobile web
application
development

management
Web Project
Manager

development

content (data)

Program...
(re)using software
open source software licenses
www.tldrlegal.com/browse
(re)using data/content

creativecommons.org
(linked) open datadatahub.io
+

+

=



so, I want to use/develop a mobile web app
by using open standards…
“HTML5 should not be considered as a whole.
You should cherry-pick the technology
that suits the solution to your problem....
+

+

mark-ups
(vocabulary)
+
standardized
JavaScript APIs

=


+

+

candidate W3C recommendation
(6 August 2013)
www.w3.org/TR/html5/

=


actual support for various HTML5 technologies
caniuse.com
www.w3.org/standards/techs/js#w3c_all
HTML5 in the mobile web context
mobilehtml5.org
www.w3.org/Mobile/
Firefox OS
application

+

+

=


Firefox OS
application

+

+

=



built by using
HTML, CSS & JavaScript
available Firefox OS apps: marketplace.firefox.com
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
.
│
favicon.ico
│
index.html
│
install.html
│
manifest.webapp
│
offline.appcache
├───css
│
app.css
│
install-button.css
├─...
Firefox OS
system

+

+

=


Firefox OS
system

+

+

=



Gaia – user interface
Firefox OS
system

+

+

=



Gecko
data rendering & processing
via open Web standards
(HTML + CSS + JS + SVG + WebGL + …...
Firefox OS
system

+

+

=



Gonk
Linux libraries & kernel
be curious & inquisitive

learn

(read + experiment + ask + reuse)


make & show

(design, code, prototypes, demos,…)

...
for details, visit
http://profs.info.uaic.ro/~stefan.negru/studentprojects/
local Firefox events – 2013

organized by Dr. Sabin Buraga (FII, UAIC)
and Andreea Popescu (Mozilla rep.)
*
with a little ...
open mobile Web development – resources
tinyurl.com/cliw-devel
photos

flickr.com/photos/96641033@N05/
presentations & prizes for best student projects
be curious & inquisitive

learn

(read + experiment + ask + reuse)


make & show

(design, code, prototypes, demos,…)

...


+

+

=



useful resources for Firefox OS developers
(docs, examples, help, communities,…)
developer.mozilla.org/docs...
open (mobile) web app development
on Firefox OS

good luck!
Dr. Sabin Buraga
Faculty of Computer Science, UAIC – Iasi, Rom...
Upcoming SlideShare
Loading in …5
×

Sabin Buraga: Open (mobile) web app development on Firefox OS

3,075 views

Published on

Several aspects regarding (mobile) web application development on Firefox OS platform; a presentation prepared for "Computer Science at the Castle" Summer School (Macea, Arad, 2013) and updated for "Winter Web Workshop" event (Iasi, 2013): http://tinyurl.com/www-infoiasi

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,075
On SlideShare
0
From Embeds
0
Number of Embeds
797
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sabin Buraga: Open (mobile) web app development on Firefox OS

  1. 1. open (mobile) web app development on Firefox OS Dr. Sabin Buraga Faculty of Computer Science, UAIC – Iasi, Romania www.purl.org/net/busaco
  2. 2. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data
  3. 3. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data client-side and/or server-side
  4. 4. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data client-side and/or server-side
  5. 5. web project open mobile web application development management Web Project Manager development content (data) Programmer/ Software Engineer(s) Domain Expert Designer(s)/ HCI Engineer Business Expert
  6. 6. (re)using software open source software licenses www.tldrlegal.com/browse
  7. 7. (re)using data/content creativecommons.org (linked) open datadatahub.io
  8. 8. + + =  so, I want to use/develop a mobile web app by using open standards…
  9. 9. “HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” Remy Sharp
  10. 10. + + mark-ups (vocabulary) + standardized JavaScript APIs = 
  11. 11. + + candidate W3C recommendation (6 August 2013) www.w3.org/TR/html5/ = 
  12. 12. actual support for various HTML5 technologies caniuse.com www.w3.org/standards/techs/js#w3c_all
  13. 13. HTML5 in the mobile web context mobilehtml5.org www.w3.org/Mobile/
  14. 14. Firefox OS application + + = 
  15. 15. Firefox OS application + + =  built by using HTML, CSS & JavaScript
  16. 16. available Firefox OS apps: marketplace.firefox.com
  17. 17. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib
  18. 18. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib HTML5 document structured content + interaction
  19. 19. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib HTML5 document structured content + interaction <!DOCTYPE html> <html> <head manifest="offline.appcache"> <meta charset="utf-8" /> <title>My App</title> <meta name="description" content="..."/> <link rel="stylesheet" href="css/app.css"/> </head> <body> <!-- provided content --> <section>...</section> <!-- battery indicator --> <div id="indicator">...</div> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"> </script> </body> </html>
  20. 20. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib CSS styles + images
  21. 21. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib CSS styles + images html { background-image: url(../img/pattern.png); } /* responsive Web design */ @media only screen and (max-width : 768px) { #indicator { border: 2px solid #999; text-align: center; ... } }
  22. 22. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib JavaScript code can use certain HTML5 APIs & Firefox OS APIs – WebAPI developer.mozilla.org/docs/WebAPI
  23. 23. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib ... // creating via DOM a <canvas> element var canvas = document.createElement ('canvas'); var ctx = canvas.getContext ('2d'); canvas.width = game.width * blocksize; canvas.height = game.height * blocksize; canvas.id = 'game-canvas'; ... // drawing the current game level ctx.fillStyle = 'rgb (0, 0, 0)'; ctx.font = '2em sans-serif'; ctx.fillText ('Level: ' + (game.levelidx + 1), canvas.width - blocksize, canvas.height + 1); ... excerpt from a JavaScript app implementing a game
  24. 24. Firefox OS system + + = 
  25. 25. Firefox OS system + + =  Gaia – user interface
  26. 26. Firefox OS system + + =  Gecko data rendering & processing via open Web standards (HTML + CSS + JS + SVG + WebGL + …)
  27. 27. Firefox OS system + + =  Gonk Linux libraries & kernel
  28. 28. be curious & inquisitive  learn (read + experiment + ask + reuse)  make & show (design, code, prototypes, demos,…)  achieve (experience, badges, prizes, status)  compete (…oh, so many opportunities)  help others
  29. 29. for details, visit http://profs.info.uaic.ro/~stefan.negru/studentprojects/
  30. 30. local Firefox events – 2013 organized by Dr. Sabin Buraga (FII, UAIC) and Andreea Popescu (Mozilla rep.) * with a little help from their friends Firefox 18 launch January 2013 Firefox OS app day March 2013 Summer Web 2013 + Design Jam Iasi #2 May 2013 Firefox OS Hackathon July 2013 Winter Web Workshop December 2013 *Alecsandru Grigoriu, Stefan Negru & Victor Porof (…and others)
  31. 31. open mobile Web development – resources tinyurl.com/cliw-devel
  32. 32. photos flickr.com/photos/96641033@N05/
  33. 33. presentations & prizes for best student projects
  34. 34. be curious & inquisitive  learn (read + experiment + ask + reuse)  make & show (design, code, prototypes, demos,…)  achieve (experience, badges, prizes, status)  compete (…oh, so many opportunities)  help others
  35. 35.  + + =  useful resources for Firefox OS developers (docs, examples, help, communities,…) developer.mozilla.org/docs/Mozilla/Firefox_OS http://firefoxos.info/ http://buildingfirefoxos.com/
  36. 36. open (mobile) web app development on Firefox OS good luck! Dr. Sabin Buraga Faculty of Computer Science, UAIC – Iasi, Romania www.purl.org/net/busaco

×