TETRA HTML5. 3de gebruikersgroepvergadering 3 juni 2013, Gent

Transcriptie

1 TETRA HTML5 3de gebruikersgroepvergadering 3 juni 2013, Gent

2 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

3 Agenda Update rond Web3D CMS in HTML5 vs Unity Rondvraag: hybride apps WP5: Pilootprojecten Varia & broodjeslunch

4 Projectverloop

5 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

6 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)

7 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

8 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

9 Online-Offline Offline web technologie HTML5 Application caching code assets Web storage data bestanden

10 Online-Offline Offline web technologie Minder geschikt voor stand-alone webapps Bedoeld om "downtime" op te vangen Geavanceerde caching

11 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

12 Online-Offline POC functionaliteiten Single page application met RESTful API backend CRUD bewerkingen Asynchroon Responsive design Schaalbaar Online-offline Data synchronisatie

13 Online-Offline POC technologieën Opmaak Twitter Bootstrap Logica en data Full javascript stack Backbone.js Node.js & Express MongoDB & Mongoose

14 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)

15 Online-Offline POC bedenkingen Appcache essentieel voor offline webapplicatie mime-type text/cache-manifest (te) betrouwbaar offline applicatie debuggen is verwarrend

16 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

17 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

18 Online-Offline POC online demo, artikel en broncode org/knowledgebase/offline/html5-online-offline-proofof-concept/

19 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

20 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

21 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

22 Native Camera Native Camera - Android device moeilijkheden Memorylek Foto s verkleinen Eigen map Opslaan foto s Enkel mogelijk op Android

23 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

24 Native Camera Native Camera - fotoalbum aanspreken Fotoalbum aanspreken Alle versies vergelijkbaar Web applicaties HTML5 Tussenmenu

25 Native Camera Native Camera: CPU- en geheugengebruik Native Android Laagste gebruik Phonegap CPU veel hoger op Android Geheugen ongeveer gelijk

26 Native Camera Native Camera: CPU- en geheugengebruik Web applicaties HTML5 Veel geheugen nodig CPU enkel op Android aan de hoge kant Winnaar: Native Android

27 Features video en audio DEMO Synchronisatie Ondertiteling Advertenties Vragen plaatsen tijdens afspelen Manipulatie video Netwerk: htmlvijf Wachtwoord: htmlvijf IP-adres server:

28 Web3D CMS&Editor: Probleemstelling (1) Voor klassieke 2D webapplicaties genoeg tools zodat ook niet IT-ers content kunnen beheren en aanmaken (CMS)

29 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

30 Web3D - WebGL Performance Drivers Browser Verschillende frameworks Three.js kuda CubicVR Geen plug-in nodig verschillende type objecten inladen

31 Web3D - WebGL Word ondersteund door Google chrome FireFox Safari Opera Internet Explorer Mits IEWebGL Plug-in!!!! FireFox Android Blackberry Browser Snelste browser Google Chrome

32 Web3D - Unity3D Voordelen: Collision detection Nadelen: Webplayer plugin Threading

33 Web3D - Unity3D Wordt ondersteund door: Google chrome FireFox Safari Opera Internet Explorer

34 Web3D - WebGL 27 tafel objecten laden 3 seconden 130 MB geheugen 14 verschillende objecten 4 seconden 64 MB geheugen

35 Web3D - Unity3D 27 tafel objecten laden 3 seconden 2MB geheugen extra 14 verschillende objecten 11 seconden 7MB geheugen extra

36 Leap Motion Besturing met hand beweging Demo Flying Dj Nokia leap

37 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

38 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

39 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

40 HTML5 vandaag HTML5 vs. Native Gebruikerservaring Native wint Performantie Native wint Verdienmodellen Native wint Cross platform ontwikkeling HTML5 wint

41 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

42 HTML5 vandaag HTML5 vs. Native Veiligheid Native wint Winnaar: Native 6/9

43 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

44 Onderzoek Hybride apps Mogelijkheden Beperkingen Feedback? Mobiele platformen Inventarisatie Mogelijkheden rond HTML5 Pilootprojecten Voorstellen?

45 Tot slot Gebruikersgroepvergadering september PXL Datum? Vragen?