DR. GLEARNING FOR    FIREFOX OS
DR. GLEARNING FOR    FIREFOX OS Juan Luis Suárez, Javier de la Rosa        @suarez_juanluis, @versae             The Cultu...
WHO WE ARE●    Juan Luis Suárez●     @suarez_juanluis●    Director of the CulturePlex Lab               Dr. Glearning for ...
WHO WE ARE●    Javier de la Rosa●     versae●     versae●    Computer Scientist and    Humanist●    CulturePlex Lab Member...
A BIT OF HISTORY●    October 2011: ai-class.com●    March 2012: Coursera●    April 2012: MOOCs explosion              Dr. ...
A BIT OF HISTORY●    Old and new MOOCs:    –   Dont have mobile interfaces    –   Dont have different kind of activities  ...
A BIT OF HISTORY●    But also:    –   Force students to be on the screen    –   Force students to follow a specific rythm ...
A BIT OF HISTORY●    September 2011: First commit of Dr. Glearning●    February 2012: First beta version●    December 2012...
WHAT IS DR. GLEARNING?●    An educational app to do your homework and test    yourself by playing for the next level●    T...
HOW DOES DR. GLEARNING WORK?                             DEMO     http://drglearning.com/client/                          ...
UNDER THE HOOD●    Server-side (web):    –   Nginx + uwsgi + Python    –   Django: course creation    –   TASTYPIE: REST i...
UNDER THE HOOD●    Client-side (phones):    –   HTML5    –   Sencha Touch 2 (MVC)    –   Apache Cordova / Adobe PhoneGap  ...
AND EVERYTHING WENT GOOD   Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013   13
UNTIL THAT...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 FIREFOX OSDr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013   18
WHY?●    Sencha Touch relies heavily on WebKit●    Sencha Touch is designed for mobile phones●    Until a week ago, there ...
WHAT COULD WE DO?●    Hack Sencha Touch    –   SenchaFox: https://github.com/Martin1982/SenchaFox●    Translate specific W...
OUR STACK●    jQuery Mobile for interface and interaction    –   WebKit and Gecko compatible    –   http://jquerymobile.co...
OUR STACK●    handlebars for templating    –   Powerful and simple semantic templates    –   http://handlebarsjs.com/●    ...
FIREFOX OS DR. GLEARNING●    All Firefox OS apps are HTML5 apps●    Not all HTML5 apps are Firefox OS apps●    Two types F...
FIREFOX OS DR. GLEARNING●    Packaged    –   Ideal for self-contained apps    –   Ideal for off-line apps                 ...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   POST, PUT and DELETE HTTP verbs (REST)        ●            W...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   POST, PUT and DELETE HTTP verbs (REST)        ●            W...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   POST, PUT and DELETE REST verbs        ●            Workarou...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   POST, PUT and DELETE REST verbs        ●            Workarou...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   POST, PUT and DELETE REST verbs        ●            Workarou...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   Third party APIs (e.g., Google APIs)        ●            Wor...
FIREFOX OS DR. GLEARNING●    Problems of Packaged Apps    –   Third party APIs (e.g., Google APIs)        ●            Wor...
FIREFOX OS DR. GLEARNING●    Hosted    –   Ideal for third-party API dependant apps    –   Ideal for on-line apps         ...
FIREFOX OS DR. GLEARNING●    App served at app.drglearning.com by Nginx●    webapp.manifest file served with    Content-Ty...
FIREFOX OS DR. GLEARNING  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
THANKS!        Questions?Juan Luis Suárez, Javier de la Rosa       @suarez_juanluis, @versae            The CulturePlex La...
Upcoming SlideShare
Loading in …5
×

Dr. Glearning for FirefoxOS

2,140 views

Published on

Talk given in the FirefoxOS Apps Day in Toronto

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,140
On SlideShare
0
From Embeds
0
Number of Embeds
1,299
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dr. Glearning for FirefoxOS

  1. 1. DR. GLEARNING FOR FIREFOX OS
  2. 2. DR. GLEARNING FOR FIREFOX OS Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae The CulturePlex Lab Western University, London, ON FirefoxOS App Day – Toronto 2012 Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 2
  3. 3. WHO WE ARE● Juan Luis Suárez● @suarez_juanluis● Director of the CulturePlex Lab Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 3
  4. 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 4
  5. 5. A BIT OF HISTORY● October 2011: ai-class.com● March 2012: Coursera● April 2012: MOOCs explosion Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 5
  6. 6. A BIT OF HISTORY● Old and new MOOCs: – Dont have mobile interfaces – Dont have different kind of activities – Dont talk the students language Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 6
  7. 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 7
  8. 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 8
  9. 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 9
  10. 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 10
  11. 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 11
  12. 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 12
  13. 13. AND EVERYTHING WENT GOOD Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 13
  14. 14. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 14
  15. 15. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 15
  16. 16. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 16
  17. 17. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 17
  18. 18. UNTIL FIREFOX OSDr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 18
  19. 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 19
  20. 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 20
  21. 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 21
  22. 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 22
  23. 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 23
  24. 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 24
  25. 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 25
  26. 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 26
  27. 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 27
  28. 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 28
  29. 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 29
  30. 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 30
  31. 31. FIREFOX OS DR. GLEARNING● Problems of Packaged Apps – Third party APIs (e.g., Google APIs) ● Workaround: Content Security Policy ← Couldnt make it work Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 31
  32. 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 32
  33. 33. FIREFOX OS DR. GLEARNING● App served at app.drglearning.com by Nginx● webapp.manifest file served with Content-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 33
  34. 34. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 34
  35. 35. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 35
  36. 36. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 36
  37. 37. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 37
  38. 38. THANKS! Questions?Juan Luis Suárez, Javier de la Rosa @suarez_juanluis, @versae The CulturePlex Lab Western University, London, ON FirefoxOS App Day – Toronto 2012 Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 38

×