sabin buraga: open (mobile) web app development on firefox os

36
open (mobile) web app development on Firefox OS Dr. Sabin Buraga Faculty of Computer Science, UAIC – Iasi, Romania www.purl.org/net/busaco

Upload: sabin-buraga

Post on 12-May-2015

2.605 views

Category:

Technology


4 download

DESCRIPTION

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

TRANSCRIPT

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

open (mobile) web app developmenton Firefox OS

Dr. Sabin BuragaFaculty of Computer Science, UAIC – Iasi, Romania

www.purl.org/net/busaco

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

open mobile web application

development

Internet(Web)

web app = interaction + code + data

❄ ❄❄

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

open mobile web application

development web app = interaction + code + data

client-side and/or server-side

Internet(Web)

❄ ❄❄

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

open mobile web application

development web app = interaction + code + data

client-side and/or server-side

Internet(Web)

❄ ❄❄

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

open mobile web application

development

web project

management

Web Project Manager

development

Programmer/Software

Engineer(s)

Designer(s)/HCI Engineer

content (data)

Domain Expert

Business Expert

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

(re)using software

open source software licenseswww.tldrlegal.com/browse

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

creativecommons.org(linked) open datadatahub.io

(re)using data/content

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

so, I want to use/develop a mobile web appby using open standards…

+ + =

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

“HTML5 should not be considered as a whole. You should cherry-pick the technology

that suits the solution to your problem.”Remy Sharp

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

+ + =

mark-ups(vocabulary)

+standardized

JavaScript APIs

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

+ + =

candidate W3C recommendation(6 August 2013)

www.w3.org/TR/html5/

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

actual support for various HTML5 technologies

caniuse.comwww.w3.org/standards/techs/js#w3c_all

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

HTML5 in the mobile web context

mobilehtml5.orgwww.w3.org/Mobile/

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

+ + =

Firefox OSapplication

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

+ + =

Firefox OSapplication

built by usingHTML, CSS & JavaScript

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

available Firefox OS apps: marketplace.firefox.com

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

.│ 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

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

.│ 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 documentstructured content

+ interaction

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

.│ 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

<!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>

HTML5 documentstructured content

+ interaction

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

.│ 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

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

.│ 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

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;...

}}

CSS styles + images

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

.│ 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 codecan use certain HTML5 APIs& Firefox OS APIs – WebAPI

developer.mozilla.org/docs/WebAPI

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

.│ 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> elementvar 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 levelctx.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

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

+ + =

Firefox OSsystem

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

+ + =

Firefox OSsystem

Gaia – user interface

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

+ + =

Firefox OSsystem

Geckodata rendering & processing

via open Web standards(HTML + CSS + JS + SVG + WebGL + …)

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

+ + =

Firefox OSsystem

GonkLinux libraries & kernel

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

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

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

for details, visit http://profs.info.uaic.ro/~stefan.negru/studentprojects/

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

local Firefox events – 2013organized by Dr. Sabin Buraga (FII, UAIC)

and Andreea Popescu (Mozilla rep.)with a little help from their friends*

Firefox 18 launchJanuary 2013

Firefox OS app day March 2013

Summer Web 2013 + Design Jam Iasi #2

May 2013

Firefox OS HackathonJuly 2013

Winter Web WorkshopDecember 2013

*Alecsandru Grigoriu, Stefan Negru & Victor Porof (…and others)

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

open mobile Web development – resourcestinyurl.com/cliw-devel

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

photosflickr.com/photos/96641033@N05/

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

presentations & prizes for best student projects

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

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

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

+ + =

useful resources for Firefox OS developers(docs, examples, help, communities,…)

developer.mozilla.org/docs/Mozilla/Firefox_OShttp://firefoxos.info/

http://buildingfirefoxos.com/

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

open (mobile) web app developmenton Firefox OS

good luck!

Dr. Sabin BuragaFaculty of Computer Science, UAIC – Iasi, Romania

www.purl.org/net/busaco