TETRA HTML5. 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

Transcriptie

1 TETRA HTML5 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

2 Agenda WP1: Administratie WP3 & WP4: Proof-of-Concept en performantietesten WP5 & WP6: Valorisatie en pilootprojecten Varia & broodjeslunch

3 Projectverloop

4 Integratie HoGent - UGent Integratieclausule Deze overeenkomst, met alle erin vervatte rechten en plichten, wordt van rechtswege en met ingang vanaf 1 oktober 2013 overgedragen van de HoGent naar de Universiteit Gent, overeenkomstig artikel 17, 2 van het Decreet d.d. 13 juli 2012 betreffende de integratie van de academische hogeschoolopleidingen in de universiteiten, zoals gepubliceerd in het Belgisch Staatsblad. De Universiteit Gent is een openbare instelling met rechtspersoonlijkheid ingevolge het Bijzonder decreet d.d. 26 juni 1991 betreffende de Universiteit Gent en het Universitair Centrum Antwerpen (zoals later gewijzigd), vertegenwoordigd door de rector, met bestuurszetel te 9000 Gent, Sint-Pietersnieuwstraat 25, met ondernemingsnummer , met rekeningnummer BE

5 Hybride Apps Performantie Overhead bridge (vb. PhoneGap) en UIWebview Browser engine Applicatie code niet gecompileerd

6 Hybride app geïnstalleerd op het toestel HTML5, CSS en JavaScript native container web-to-native abstractie laag accelerometer, gps, camera, file system,...

7 Voordelen hybride app 1 codebase voor alle platformen toegang tot native api s verspreiding via de app stores Nadelen hybride app performantie afhankelijk van de browser(engine) minder goede gebruikerservaring

8 PhoneGap open source verzameling van platform specifieke frameworks en build scripts ondersteuning voor vrijwel alle platformen installatie platform specifieke IDE s en SDK s is vereist PhoneGap Build, cloud based alternatief

9 Alternatieven (premium) AppMobi Appcelerator Nomad Icenium Custom native bridge

10 Vlot scrollen essentieel Scrolling benchmarking script meting van gemiddelde framerate en aantal frames onder het gemiddelde indicatie van de stabiliteit fysieke scroll ter vergelijking

11 Test omgeving PhoneGap (2.9.0) Xcode (4.6.3) Eclipse ADT (22.0.1) ios ipad 3 (6.1.3)

12 Android Samsung Galaxy Tab 2 (4.0.3) HTC Desire C (4.0.3) Mobiele browser ios: Safari Android: Android Browser

13 Metingen gemiddelde frames per seconde ideaal 60 FPS aantal geregistreerde frames dropped frames geregistreerde frames onder gemiddelde FPS stabiliteit ((Aantal Frames Dropped Frames)/Aantal Frames)*100

14 Scrolling benchmark 1 PhoneGap applicatie & mobiele website HTML5 en jquery Mobile Pagina lengte: px Aantal DOM nodes: 13861

15

16 Scrolling benchmark 2 PhoneGap applicatie & mobiele website HTML zonder CSS Pagina lengte: px Aantal DOM nodes: 13861

17

18 Scrolling benchmark 3 PhoneGap applicatie & mobiele website HTML5 en jquery Mobile vereenvoudigd DOM Pagina lengte: 82222px Aantal DOM nodes: 5024

19

20 Scrolling benchmark 4 PhoneGap applicatie & mobiele website HTML5 en jquery Mobile sterk vereenvoudigd DOM Pagina lengte: 10419px Aantal DOM nodes: 652

21

22 Inzichten Scroll Performantie nooit evenaring van native scrollen Android beter bij een hybride app (Webview) low-end problematisch ios mobiele browser beter duidelijk verband met complexiteit DOM en CSS

23 Optimalisatie Hardware Acceleratie CSS translate3d transform transform: translate3d(0,0,0); GPU rendering Content reflow vermijden berekening positie en dimensies belastend voor processor

24 Best practices DOM nodes minimaliseren diep geneste HTML DOM structuren vermijden CSS transformaties gebruiken CSS animaties en transities gebruiken Vaste hoogtes en breedtes gebruiken Afbeeldingen of assets die gebruikt worden in CSS preloaden

25 Dynamische toevoegingen aan DOM minimaliseren CSS shadows en CSS gradients vermijden Uitgebreid verslag org/knowledgebase/performantie/hybride-appsproof-of-concept/

26 Pilootprojecten Projecten in samenwerking met gebruikersgroep projectvoorstellen ingediend specifieke topics uitbreidingen mogelijk 1 jaar code en inzichten worden gedeeld

27 UGent Dobco Medical Systems second opinion webapplicatie Wijs mobiele festival webapplicatie PXL Showroomr i.s.m. Yappa?Win8 app

28 Pilootproject Dobco Medical Systems Second opinion DICOM-viewer webapplicatie in HTML5 DICOM beelden bekijken en analyseren realtime view sharing, meting en annotaties voor second opinion

29 HTML5 Canvas WebGL Websockets WebRTC

30 Versie Master Slave

31 Canvas weergave en verwerking hi-res.png afbeeldingen scrollen door sequence zoom, annotaties en metingen relatieve dimensies

32 WebGL visualisatie DICOM conversie pixeldata naar een WebGL textuur windowing/levelling met shaders 16bit (65536 grijswaarden) naar 8 bit (256 grijswaarden)

33 Websockets Realtime Standaard view sharing event synchronisatie (binaire) data transport/synchronisatie performantie

34 WebRTC data & view sharing peer to peer experimenteel

35 Architectuur concepten event synchronisatie via websockets canvas synchronisatie via websockets met data url

36 Canvas synchronisatie via websockets door streaming van binaire data Canvas synchronisatie via WebRTC datachannels

37 Scherm deling via WebRTC GetUserMedia

38 Pilootproject Wijs Interactieve webapplicatie voor een muziekfestival focus op mobiel gebruik native app look and feel gebruik van louter HTML5 componenten

39 HTML5 semantics audio/video/media offline connectivity geolocation

40 Semantics relevante tags correct gebruik boilerplate code en snippets worden beschikbaar gesteld

41 Audio/Video/Media embedding media nieuwe tags en attributen streaming media media upload file api device api

42 Offline appcache functionaliteit zonder internet verbinding local storage tijdelijke opslag data

43 Connectivity web sockets real-time data en events tijdslijn met activiteiten gebruikers

44 Geolocation positie bepaling van de gebruikers zoek gebruikers in de buurt analytics... masterproef toeristische gids in HTML5

45 Showroomr App om grondplan te visualiseren Grondplan dynamisch aanpasbaar en aanvulbaar met extra info (video, tekst,...) Hulp opvragen en locatie delen/opvragen Toepassing op Impermo, maar uitbreidbaar naar Kristalpark Lommel

46 Windows 8 apps Framework van Microsoft om HTML+JS om te zetten naar native code in Windows 8