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
• [email protected]• [email protected]• 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