Keeping the “App” out of the Classroom with HTML5

Eric CoopeyComputer Science PhD Student

• Educational Technologies: new hardware, software, interfaces for teaching and learning

• Focus on STEM (science, technology, engineering, and math) subjects, from K to primary to secondary through university

• Special emphasis on creativity in engineering, on documentation of student work (the process), and on collaboration

Goals

1. Provide insight into developing and supporting educational technology

2. Convince you to use HTML5 instead of native Apps (or Java/Flash)

3. Discuss several new features supported by HTML and mobile operating systems

InterLACE• Interactive Learning And

Collaboration Environment• Support class-wide

collaboration and documentation of student work

• NSF funded project focused on collaborative learning in high school physics

Iterative Participatory Design

• Engage high school physics teachers and their students as both designers and beta testers

• Before choosing a platform or even writing 1 line of code – Observed teachers in their classrooms and their

use of technology– Host regular Professional Development sessions to

allow teachers to influence design

Apple and Google both recently announced 50 billion App downloads

Strike 1 – Resource Analysis

Post Analysis

Post Analysis

Strike 2 - Updates

• Time consuming, frustrating, confusing• Cannot “force” an app to update– Must maintain legacy API’s– How to integrate new features without breaking old

installs

Strike 2 - Updates

School policies and practices are even worse!– Who updates iOS?• “IT team, but essentially no one” (several)• “not sure, think I’m supposed to”

– What account do you use for downloading apps?• “don’t know”• “personal account”• “randomly determined”

– Who updates specific apps? • Same as iOS, “essentially no one”

Strike 3 – What Can’t HTML5 Do?

• HTML5 makes it possible to perform formerly “native” activities from web based platforms– So why put up with all the constraints and

hassles?• Native does some things better– Monetization (if that’s your thing)– Performance (eh)– “Rich User Experience” (ha)– Access to hardware i/o streams (alternatives…)

HTML5 is….

• New HTML standards for working with advanced objects like svg, canvas, files, etc– Javascript– CSS– HTML

• Catchphrase to signify major browser capability upgrades (except IE)

• Reduces the need for plug-ins

Native App Functionality in HTML5

Two main activities that nearly drove us to create a native app1. Sketching– Claims of “works on iPad” highly dubious

2. Capture Image– How to get images off an iPad

Mobile Device Sketch

• Months of downloading, testing, tweaking, and frustration

• Finally a winner! Rapheal.js• SVG based sketch that with a few minor

tweaks (thanks GitHub) works on any device, and any browser (except IE)

Scalable Vector Graphics

• “App” uses native libraries (bad) or Open GL (better but complicated)

• SVG - Defines shapes, lines, locations in XML format– Works in any browser

<path style="stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; -moz-user-select: text;" fill="none" stroke="#000000" d="M94,58L95,60L95,63L95,71L95,82L95,130L95,150L95,168L95,186L97,207L109,289L110,305L112,318L114,329L119,363L120,371L121,377L122,383L124,388L125,393L125,395L125,397L125,399L125,401L125,403L125,405L125,408L125,410L125,412L125,414L125,415L125,415L117,420L118,420L120,420L126,420L137,420L152,420L178,420L203,420L230,420L252,421L279,422L311,422L338,422L358,422L390,422L410,422L431,421L453,420L472,419L489,418L504,417L513,416L528,414L535,414L541,412L549,411L558,409L565,408L574,407L583,406L621,406L629,406L632,406L635,406L637,406L638,406L640,406L639,405L638,404L636,403L633,401L627,398L622,394L616,387L610,381L606,377L602,374L599,371L598,370L596,369L596,370L596,371L597,373L599,374L604,377L613,382L621,387L627,394L631,398L635,402L638,405L639,406L639,407L636,407L633,408L630,410L626,413L622,415L618,417L616,419L614,420L613,422L611,424L609,425L607,426L606,428L605,428L604,430L604,431L602,431" stroke-opacity="1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path style="stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; -moz-user-select: text;" fill="none" stroke="#008000" d="M139,402L140,402L143,402L150,402L156,402L164,402L172,402L178,402L188,402L195,402L203,402L211,403L218,405L226,406L233,406L241,406L250,406L260,405L264,404L272,403L280,401L310,394L320,390L332,385L345,381L360,374L375,366L391,357L403,348L416,340L426,332L436,326L444,320L452,315L461,308L473,293L486,269L490,262L494,256L498,243L502,228L505,214L522,153L523,145L525,136L526,128L526,123L527,116L528,110L529,104L529,101L529,100L528,101L524,106L520,114L495,144L493,145L493,146L496,143L501,135L507,125L511,119L514,113L516,110L516,109L518,108L519,107L520,106L521,105L522,104L523,102L524,102L525,102L525,102L528,102L530,102L533,103L537,105L543,114L546,120L548,126L549,131L550,136L551,140L552,144L554,147L555,151L555,154L556,156L557,159L557,160L558,160" stroke-opacity="1" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>

Working with Images - iOS• Impossible to access file

browser or camera from web pages– Major limitation for education

• HTML Input Type=“file”• Android and iOS > 6

Mobile Images – Not Perfect

• Unless you hold device just right (button to the right, landscape mode)

• Working on ways to rotate and crop

Hardware I/O

I want to get data from a piece of hardware, like a temperature or pressure sensor

Working with Sensors

Wireless Internet

enabled device

View information and results in

browser

Program in browser via

visual languages

Communication via HTTP using XML / JSON

Add Touch

“My website works great…just not on tablets”

Look for extensions to existing libraries– https://github.com/joshgerdes/jquery.ui.touch

$("[id^=draggable]").draggable({ handle: "p", stack: "div", autoHide: true

}).addTouch()

Add Touch – Not for the Squeamish• Add “event listeners” to existing events to

enable touch device compatibility– touchstart – touchmove – touchend – touchcancel

Questions

• Eric.Coopey@tufts.edu• interlace@tufts.edu• Links to anything I have mentioned today– https://interlace.k12engineering.com/interlace/in

dex.php/site/page?view=acknowledge

Demo Time

http://bit.ly/webcoop• Password: psu