1 / 28

Keeping the “App” out of the Classroom with HTML5

Keeping the “App” out of the Classroom with HTML5. Eric Coopey Computer Science PhD Student. Educational Technologies: new hardware, software, interfaces for teaching and learning.

yuri-lowery
Download Presentation

Keeping the “App” out of the Classroom with HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Keeping the “App” out of the Classroom with HTML5 Eric Coopey Computer Science PhD Student

  2. 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

  3. Goals • Provide insight into developing and supporting educational technology • Convince you to use HTML5 instead of native Apps (or Java/Flash) • Discuss several new features supported by HTML and mobile operating systems

  4. 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

  5. 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

  6. Apple and Google both recently announced 50 billion App downloads

  7. Strike 1 – Resource Analysis

  8. Post Analysis

  9. Post Analysis

  10. 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

  11. 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”

  12. 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…)

  13. 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

  14. Native App Functionality in HTML5 Two main activities that nearly drove us to create a native app • Sketching • Claims of “works on iPad” highly dubious • Capture Image • How to get images off an iPad

  15. 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)

  16. 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

  17. <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"/>

  18. 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

  19. Mobile Images – Not Perfect • Unless you hold device just right (button to the right, landscape mode) • Working on ways to rotate and crop

  20. Hardware I/O I want to get data from a piece of hardware, like a temperature or pressure sensor

  21. Working with Sensors Communication via HTTP using XML / JSON

  22. 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()

  23. Add Touch – Not for the Squeamish • Add “event listeners” to existing events to enable touch device compatibility • touchstart • touchmove • touchend • touchcancel

  24. Questions • Eric.Coopey@tufts.edu • interlace@tufts.edu • Links to anything I have mentioned today • https://interlace.k12engineering.com/interlace/index.php/site/page?view=acknowledge

  25. Demo Time http://bit.ly/webcoop • Password: psu

More Related