TETRA HTML5 3de gebruikersgroepvergadering 3 juni 2013, Gent
Agenda ● WP1: Administratie ● WP6: Valorisatie ● WP3 & WP4: Proof-of-Concept en performantietesten ○ Voorstelling online-offline POC ○ HTML5 vandaag, een stand van zaken ○ Toelichting performantietesten van de camera en het gebruik van kaarten in HTML5 vs Native ○ Features video en audio
Agenda ○ Update rond Web3D CMS in HTML5 vs Unity ○ Rondvraag: hybride apps ● WP5: Pilootprojecten ● Varia & broodjeslunch
Projectverloop
WP6: Valorisatie en disseminatie ● 4 voorstellen ingediend vanuit gebruikersgroep ○ Dobco ○ Otoconsult (2x) ○ Sense4Taste ● 1 intern voorstel HoGent ○ Bouwen van toeristische gids ● Voorlopig: 3 studenten op HTML5 ● Nog voorstellen welkom ICT-project PXL
PXL ICT-Project ● Onderdeel 3de jaar prof. Bachelor Toegepaste informatica. ● Groepen van 8 à 10 AON, SNB en SWM-studenten. ● Voorstellen vanuit bedrijfswereld en indien gekozen samen met mensen van het bedrijf (2 à 3 wekelijks)
Online-Offline Mobiele (r)evolutie
● Meer mobiele toestellen verkocht dan PC's ● Mobiel internet wordt belangrijker dan vast internet Offline gebruik grootste uitdaging voor het mobiele web
● Beschikbaarheid en toegankelijkheid WIFI ● Dekkingsgraad mobiele netwerken ● Beperkte bandbreedte
Online-Offline Native
● Geïnstalleerd op een specifieke cliënt ● Kan onafhankelijk functioneren zonder internetverbinding Webapplicatie
● Draait op een webserver en wordt benaderd met de ●
webbrowser Onbruikbaar zonder internetverbinding
Online-Offline Offline web technologie
● HTML5 ○ Application caching ■ code ■ assets ○ Web storage ■ data ■ bestanden
Online-Offline Offline web technologie
● Minder geschikt voor stand-alone webapps ● Bedoeld om "downtime" op te vangen ● Geavanceerde caching
Online-Offline POC uitgangspunten
● Onderzoeken HTML5 offline technologie ○ mogelijkheden ○ beperkingen
● Eenvoudige webapplicatie ○ notities maken, opslaan, bewerken en verwijderen zowel online als offline ○ notities synchroniseren met server
Online-Offline POC functionaliteiten
● ● ● ● ● ● ●
Single page application met RESTful API backend CRUD bewerkingen Asynchroon Responsive design Schaalbaar Online-offline Data synchronisatie
Online-Offline POC technologieën
● Opmaak ○ Twitter Bootstrap
● Logica en data ○ Full javascript stack ■ Backbone.js ■ Node.js & Express ■ MongoDB & Mongoose
Online-Offline DEMO
● Xcode iOS simulator ○ ○ ○ ○ ○ ○ ○
webapplicatie bezoeken in browser webapplicatie toevoegen aan home screen data invoeren en bewerken internetverbinding verbreken data invoeren en bewerken internetverbinding herstellen synchronisatie demonstreren (chrome dev tools)
Online-Offline POC bedenkingen
● Appcache ○ essentieel voor offline webapplicatie ○ mime-type text/cache-manifest ○ (te) betrouwbaar ■ http://alistapart.com/article/application-cacheis-a-douchebag ○ offline applicatie debuggen is verwarrend
Online-Offline POC bedenkingen
● Web Storage ○ Local storage: cross-browser compatibel ■ enkel strings ■ synchroon (en performantie issues) ■ 5MB (2,5MB UTF16!) ○ Web SQL wordt niet meer ondersteund ○ IndexedDB experimenteel maar veel potentieel
Online-Offline POC bedenkingen
● Data synchronisatie ○ ○ ○ ○
zeer complex gegeven (nog) geen standaard oplossing online-offline detectie problemen mobile first strategie ■ data persistent bewaren op cliënt ■ dual storage
Online-Offline POC online demo, artikel en broncode
● http://html5notes.eu01.aws.af.cm ● http://html5explored. org/knowledgebase/offline/html5-online-offline-proofof-concept/
● https://github.com/Hogent/html5-online-offline-poc
GPS ● Ophalen GPS-coördinaten ● Native Android, Phonegap, pure HTML5 ○ Vergelijkbare resultaten snelheid
● Web applicaties HTML5 ○ Veel sneller ○ Enkel Android Browser traag
● Winnaars: Opera Mobile en Google Chrome
Google Maps Google Maps - snelheid
● Tekenen van de map ● Native Android ● ● ●
○ Map sneller geladen Phonegap, pure- en Web applicaties HTML5 ○ Iets trager als native Android Winnaar: Native Android GPS + Google Maps ○ Winnaar: Opera Mobile en Google Chrome
Google Maps Google Maps + GPS: CPU- en geheugengebruik
● Native Android ● ● ●
○ Laagste gebruik Phonegap en pure HTML5 ○ Beide testen hoger gebruik Web applicaties HTML5 ○ Enkel Android Browser meer CPU gebruik ○ Google Chrome geheugen = native Android Winnaars: Native Android en Google Chrome
Native Camera Native Camera - Android device moeilijkheden
● Memorylek ●
○ Foto’s verkleinen Eigen map ○ Opslaan foto’s ○ Enkel mogelijk op Android
Native Camera Native Camera - foto maken
● Miniem verschil tussen alle versies ● Native Android en Android browser ● ●
○ ImageView Web applicaties HTML5 ○ Geen ondersteuning Opera Mobile ○ Direct aanspreken camera enkel Google Chrome Winnaar: Google Chrome
Native Camera Native Camera - fotoalbum aanspreken
● Fotoalbum aanspreken ●
○ Alle versies vergelijkbaar Web applicaties HTML5 ○ Tussenmenu
Native Camera Native Camera: CPU- en geheugengebruik
● Native Android ○ Laagste gebruik
● Phonegap ○ CPU veel hoger op Android 4.1.2 ○ Geheugen ongeveer gelijk
Native Camera Native Camera: CPU- en geheugengebruik
● Web applicaties HTML5 ○ Veel geheugen nodig ○ CPU enkel op Android 2.3.6 aan de hoge kant
● Winnaar: Native Android
Features video en audio ● DEMO
● ● ●
○ Synchronisatie ○ Ondertiteling ○ Advertenties ○ Vragen plaatsen tijdens afspelen ○ Manipulatie video Netwerk: htmlvijf Wachtwoord: htmlvijf IP-adres server: 192.168.137.1
Web3D CMS&Editor: Probleemstelling (1) Voor klassieke 2D webapplicaties genoeg tools zodat ook niet IT-ers content kunnen beheren en aanmaken (CMS)
Web3D CMS&Editor: Probleemstelling (2) • 3D content aanmaken => specialist • Voor framework is dit logisch • Maar niet om een simpele stoel te verzetten
• Bij huidige tools zijn bewerkingsmogelijkheden beperkt • Enkel op vooraf bepaalde plaatsen • Enkel tekst en afbeeldingen • Buiten de 3D wereld
Web3D - WebGL ● Performance ●
● ●
○ Drivers ○ Browser Verschillende frameworks ○ Three.js ○ kuda ○ CubicVR Geen plug-in nodig verschillende type objecten inladen
Web3D - WebGL ● Word ondersteund door
●
○ Google chrome ○ FireFox ○ Safari ○ Opera ○ Internet Explorer Mits IEWebGL Plug-in !!!! ○ FireFox Android ○ Blackberry Browser Snelste browser ○ Google Chrome
Web3D - Unity3D ● Voordelen: ○ Collision detection
● Nadelen: ○ Webplayer plugin ○ Threading
Web3D - Unity3D ● Wordt ondersteund door: ○ ○ ○ ○ ○
Google chrome FireFox Safari Opera Internet Explorer
Web3D - WebGL ● 27 tafel objecten laden ●
○ 3 seconden ○ 130 MB geheugen 14 verschillende objecten ○ 4 seconden ○ 64 MB geheugen
Web3D - Unity3D ● 27 tafel objecten laden ●
○ 3 seconden ○ 2MB geheugen extra 14 verschillende objecten ○ 11 seconden ○ 7MB geheugen extra
Leap Motion ● Besturing met hand beweging ● Demo ○ Flying ○ Dj ○ Nokia leap
HTML5 vandaag ● Sterk geëvolueerd maar nog lange weg te gaan ● Overstap naar HTML5 voor mobiele ervaring nog steeds lastig door beperkingen ○ (mobile) browser fragmentatie ○ vindbaarheid ○ toegankelijkheid en beschikbaarheid native device features ○ push berichten ○ performantie
HTML5 vandaag ● HTML5 enterprise mislukkingen ○ Facebook debacle ○ Linked-in kiest eerst resoluut voor HTML5, jaar later opnieuw native
● HTML5 enterprise succes verhalen ○ Succesvolle HTML5 apps van Financial Times en The Guardian ○ HTML5 apps van Burberry en Guess
HTML5 vandaag ● HTML5 succes afhankelijk van context ○ Facebook en Linked-in ■ data driven ●
performantie problemen
○ Financial Times, The Guardian, Burberry en Guess ■ content en presentatie
HTML5 vandaag ● HTML5 vs. Native ○ Gebruikerservaring ■ Native wint ○ Performantie ■ Native wint ○ Verdienmodellen ■ Native wint ○ Cross platform ontwikkeling ■ HTML5 wint
HTML5 vandaag ● HTML5 vs. Native ○ Fragmentatie ■ Native en HTML5 ongeveer gelijk ○ Expertise ■ HTML5 wint ○ Distributie ■ HTML5 wint ○ Toegang tot native features en innovaties ■ Native wint
HTML5 vandaag ● HTML5 vs. Native ○ Veiligheid ■ Native wint
Winnaar: Native 6/9
HTML5 vandaag ● Evolutie ○ Hybryde apps ■ Best of both worlds ○ Opkomst mobiele platformen ■ standaard HTML5 ondersteuning ● ● ●
Chrome OS Firefox OS Tizen (Intel, Samsung, NEC, Panasonic, ...)
○ Webapp stores ○ HTML5 desktop apps
Onderzoek ● Hybride apps ○ Mogelijkheden ○ Beperkingen ○ Feedback?
● Mobiele platformen ○ Inventarisatie ○ Mogelijkheden rond HTML5
● Pilootprojecten ○ Voorstellen?
Tot slot ● Gebruikersgroepvergadering september ○ PXL ○ Datum?
● Vragen?
