SlideShare a Scribd company logo
1 of 38
Download to read offline
DR. GLEARNING FOR
    FIREFOX OS
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
WHO WE ARE
●
    Juan Luis Suárez
●
     @suarez_juanluis
●
    Director of the CulturePlex Lab




               Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013   3
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
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   5
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   6
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
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
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
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
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
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
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 OS




Dr. 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 was only WebKit compliant
    native browser components for mobile phones




               Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013   19
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
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
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
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
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
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
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
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
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
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
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
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   31
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
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
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 Lab
       Western University, London, ON

  FirefoxOS App Day – Toronto 2012
   Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013   38

More Related Content

Similar to Dr. Glearning for FirefoxOS

Open intents Aggregating Apps
Open intents Aggregating AppsOpen intents Aggregating Apps
Open intents Aggregating AppsFriedger Müffke
 
Use open source software to develop ideas at work
Use open source software to develop ideas at workUse open source software to develop ideas at work
Use open source software to develop ideas at workSammy Fung
 
Will Postgres Live Forever?
Will Postgres Live Forever?Will Postgres Live Forever?
Will Postgres Live Forever?EDB
 
Applying the Unix Philosophy to Django projects: a report from the real world
Applying the Unix Philosophy to Django projects: a report from the real worldApplying the Unix Philosophy to Django projects: a report from the real world
Applying the Unix Philosophy to Django projects: a report from the real worldFederico Capoano
 
Mozilla: Bukan Sekadar Peramban
Mozilla: Bukan Sekadar PerambanMozilla: Bukan Sekadar Peramban
Mozilla: Bukan Sekadar PerambanBenny Chandra
 
Meet Firefox OS and WebFWD @ ITPreneur Universitas Padjadjaran
Meet Firefox OS and WebFWD @ ITPreneur Universitas PadjadjaranMeet Firefox OS and WebFWD @ ITPreneur Universitas Padjadjaran
Meet Firefox OS and WebFWD @ ITPreneur Universitas PadjadjaranFauzan Alfi Agirachman
 
Firefox OS Perspective
Firefox OS Perspective Firefox OS Perspective
Firefox OS Perspective ankitgadgil
 
The *on-going* future of Perl5
The *on-going* future of Perl5The *on-going* future of Perl5
The *on-going* future of Perl5Vytautas Dauksa
 
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris.
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris. OpenPaas Collaboration Platform. OW2con'15, November 17, Paris.
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris. OW2
 
Software Freedom and Open Source Community
Software Freedom and Open Source CommunitySoftware Freedom and Open Source Community
Software Freedom and Open Source CommunitySammy Fung
 
Introductory session flutter festival
Introductory session   flutter festivalIntroductory session   flutter festival
Introductory session flutter festivalApoorveGoyal2
 
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...GIS in the Rockies
 
Open source educational technologies for teaching and learning
Open source educational technologies for teaching and learningOpen source educational technologies for teaching and learning
Open source educational technologies for teaching and learningKimera Richard
 
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hung
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hungMozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hung
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hungVu Hung Nguyen
 
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...FIWARE
 

Similar to Dr. Glearning for FirefoxOS (20)

Open intents Aggregating Apps
Open intents Aggregating AppsOpen intents Aggregating Apps
Open intents Aggregating Apps
 
L10n mozmycampus-uum
L10n mozmycampus-uumL10n mozmycampus-uum
L10n mozmycampus-uum
 
Use open source software to develop ideas at work
Use open source software to develop ideas at workUse open source software to develop ideas at work
Use open source software to develop ideas at work
 
FLOSS development
FLOSS developmentFLOSS development
FLOSS development
 
Will Postgres Live Forever?
Will Postgres Live Forever?Will Postgres Live Forever?
Will Postgres Live Forever?
 
Applying the Unix Philosophy to Django projects: a report from the real world
Applying the Unix Philosophy to Django projects: a report from the real worldApplying the Unix Philosophy to Django projects: a report from the real world
Applying the Unix Philosophy to Django projects: a report from the real world
 
Mozilla: Bukan Sekadar Peramban
Mozilla: Bukan Sekadar PerambanMozilla: Bukan Sekadar Peramban
Mozilla: Bukan Sekadar Peramban
 
Flutter festival ppt
Flutter festival ppt Flutter festival ppt
Flutter festival ppt
 
Meet Firefox OS and WebFWD @ ITPreneur Universitas Padjadjaran
Meet Firefox OS and WebFWD @ ITPreneur Universitas PadjadjaranMeet Firefox OS and WebFWD @ ITPreneur Universitas Padjadjaran
Meet Firefox OS and WebFWD @ ITPreneur Universitas Padjadjaran
 
Firefox OS Perspective
Firefox OS Perspective Firefox OS Perspective
Firefox OS Perspective
 
The *on-going* future of Perl5
The *on-going* future of Perl5The *on-going* future of Perl5
The *on-going* future of Perl5
 
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris.
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris. OpenPaas Collaboration Platform. OW2con'15, November 17, Paris.
OpenPaas Collaboration Platform. OW2con'15, November 17, Paris.
 
webbrowsers-160920132858.pptx
webbrowsers-160920132858.pptxwebbrowsers-160920132858.pptx
webbrowsers-160920132858.pptx
 
Software Freedom and Open Source Community
Software Freedom and Open Source CommunitySoftware Freedom and Open Source Community
Software Freedom and Open Source Community
 
Introductory session flutter festival
Introductory session   flutter festivalIntroductory session   flutter festival
Introductory session flutter festival
 
Web browsers
Web browsersWeb browsers
Web browsers
 
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...
2015 FOSS4G Track: What is Free and Open Source Software for Geospatial Appli...
 
Open source educational technologies for teaching and learning
Open source educational technologies for teaching and learningOpen source educational technologies for teaching and learning
Open source educational technologies for teaching and learning
 
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hung
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hungMozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hung
Mozilla l10n-presentation-saigon barcamp-2011-nguyen-vu-hung
 
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...
FIWARE Wednesday Webinars - Performing Big Data Analysis Using Cosmos With Sp...
 

Recently uploaded

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 

Recently uploaded (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 

Dr. Glearning for FirefoxOS

  • 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: MOOC's explosion Dr. Glearning for FirefoxOS, FirefoxOS Apps Day - Toronto, 2013 5
  • 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 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 OS Dr. 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 ← Couldn't 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