Your SlideShare is downloading. ×
  • Like
Dr. Glearning for FirefoxOS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Dr. Glearning for FirefoxOS

  • 1,725 views
Published

Talk given in the FirefoxOS Apps Day in Toronto

Talk given in the FirefoxOS Apps Day in Toronto

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,725
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DR. GLEARNING FOR FIREFOX OS
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. AND EVERYTHING WENT GOOD Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 13
  • 14. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 14
  • 15. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 15
  • 16. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 16
  • 17. UNTIL THAT...Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 17
  • 18. UNTIL FIREFOX OSDr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 18
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 34
  • 35. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 35
  • 36. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 36
  • 37. FIREFOX OS DR. GLEARNING Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 37
  • 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