dr. glearning for firefoxos
Post on 09-May-2015
1.790 Views
Preview:
DESCRIPTION
TRANSCRIPT
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 2
DR. GLEARNING FORFIREFOX OS
Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae
The CulturePlex LabWestern University, London, ON
FirefoxOS App Day – Toronto 2012
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 3
WHO WE ARE● Juan Luis Suárez
● @suarez_juanluis● Director of the CulturePlex Lab
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 4
WHO WE ARE● Javier de la Rosa
● versae● versae● Computer Scientist and
Humanist
● CulturePlex Lab Member
● CulturePlex
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 5
A BIT OF HISTORY● October 2011: ai-class.com
● March 2012: Coursera
● April 2012: MOOC's explosion
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 6
A BIT OF HISTORY● Old and new MOOC's:
– Don't have mobile interfaces
– Don't have different kind of activities
– Don't talk the students' language
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 7
A BIT OF HISTORY● But also:
– Force students to be on the screen
– Force students to follow a specific rythm
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 8
A BIT OF HISTORY● September 2011: First commit of Dr. Glearning
● February 2012: First beta version
● December 2012: Release for Android and iOS
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 9
WHAT IS DR. GLEARNING?● An educational app to do your homework and test
yourself by playing for the next level
● Teachers prepare their question according to six types of activities (so far)
● Activities are automatically graded
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 10
HOW DOES DR. GLEARNING WORK?
DEMO
http://drglearning.com/client/
WEBSITE
http://www.drglearning.com/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 11
UNDER THE HOOD● Server-side (web):
– Nginx + uwsgi + Python
– Django: course creation
– TASTYPIE: REST interface
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 12
UNDER THE HOOD● Client-side (phones):
– HTML5
– Sencha Touch 2 (MVC)
– Apache Cordova / Adobe PhoneGap
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 13
AND EVERYTHING WENT GOOD
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 14
UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 15
UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 16
UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 17
UNTIL THAT...
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 18
UNTIL FIREFOX OS
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 19
WHY?● Sencha Touch relies heavily on WebKit
● Sencha Touch is designed for mobile phones
● Until a week ago, there was only WebKit compliant native browser components for mobile phones
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 20
WHAT COULD WE DO?● Hack Sencha Touch
– SenchaFox: https://github.com/Martin1982/SenchaFox
● Translate specific Webkit CSS rules to Gecko
– Nightmare
● Port the whole application to a different technology
– Gecko compliant, of course
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 21
OUR STACK● jQuery Mobile for interface and interaction
– WebKit and Gecko compatible
– http://jquerymobile.com/
● lawnchair for storage
– Tiny and framework agnostic
– http://brian.io/lawnchair/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 22
OUR STACK● handlebars for templating
– Powerful and simple semantic templates
– http://handlebarsjs.com/
● Jed for i18n
– Gettext style
– http://slexaxton.github.com/Jed/
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 23
FIREFOX OS DR. GLEARNING● All Firefox OS apps are HTML5 apps
● Not all HTML5 apps are Firefox OS apps
● Two types FirefoxOS apps:
– Hosted
– Packaged
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 24
FIREFOX OS DR. GLEARNING● Packaged
– Ideal for self-contained apps
– Ideal for off-line apps
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 25
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– POST, PUT and DELETE HTTP verbs (REST)● Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 26
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– POST, PUT and DELETE HTTP verbs (REST)● Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin Not a good idea!←
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 27
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– POST, PUT and DELETE REST verbs● Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin Not a good idea!←
● Workaround 2: Add parameters to XHR objects (MozAnon, MozSystem, etc)
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 28
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– POST, PUT and DELETE REST verbs● Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin Not a good idea!←
● Workaround 2: Add parameters to XHR objects (MozAnon, MozSystem, etc) Hard to test, bad support in simulator←
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 29
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– POST, PUT and DELETE REST verbs● Workaround 1: Enable Cross Origin Resource Sharing (CORS)
server-side for any origin Not a good idea!←
● Workaround 2: Add parameters to XHR objects (MozAnon, MozSystem, etc) Hard to test, bad support in simulator←
● Workaround 3: Use JSONP and emulate everything through a GET request Not very RESTful, but works←
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 30
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– Third party APIs (e.g., Google APIs)● Workaround: Content Security Policy
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 31
FIREFOX OS DR. GLEARNING● Problems of Packaged Apps
– Third party APIs (e.g., Google APIs)● Workaround: Content Security Policy Couldn't make it work←
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 32
FIREFOX OS DR. GLEARNING● Hosted
– Ideal for third-party API dependant apps
– Ideal for on-line apps
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 33
FIREFOX OS DR. GLEARNING● App served at app.drglearning.com by Nginx
● webapp.manifest file served withContent-Type: application/x-web-app-manifest+json
{ "name": "Dr Glearning", "description": "The Mobile Game Learning Platform.", "launch_path": "/index.html", "icons": { "128": "/resources/images/ic_launcher.png" }, "developer": { "name": "CulturePlex Lab.", "url": "http://www.cultureplex.ca" }}
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 34
FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 35
FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 36
FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 37
FIREFOX OS DR. GLEARNING
Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 38
THANKS!Questions?
Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae
The CulturePlex LabWestern University, London, ON
FirefoxOS App Day – Toronto 2012
top related