TETRA HTML5. 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

TETRA HTML5 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

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

Projectverloop

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 0248.015.142, met rekeningnummer BE59 3900 9658 0026.

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

● Hybride app ○ geïnstalleerd op het toestel ○ HTML5, CSS en JavaScript ○ native container ■ web-to-native abstractie laag ●

accelerometer, gps, camera, file system, ...

● 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

● 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

●

Alternatieven (premium) ○ AppMobi ○ Appcelerator ○ Nomad ○ Icenium ○ …

● Custom native bridge

● Vlot scrollen essentieel ● Scrolling benchmarking script ○ https://github.com/natduca/scrollbench.js ○ meting van gemiddelde framerate en aantal frames onder het gemiddelde ■

indicatie van de stabiliteit

○ fysieke scroll ter vergelijking

● Test omgeving ○ PhoneGap (2.9.0) ○ Xcode (4.6.3) ○ Eclipse ADT (22.0.1) ● iOS ○ iPad 3 (6.1.3)

● Android ○ Samsung Galaxy Tab 2 (4.0.3) ○ HTC Desire C (4.0.3) ● Mobiele browser ○ iOS: Safari ○ Android: Android Browser

● 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

● Scrolling benchmark 1 ○ PhoneGap applicatie & mobiele website ■

HTML5 en jQuery Mobile

■

Pagina lengte: 227428px

■

Aantal DOM nodes: 13861


HTML zonder CSS

■


■




■

vereenvoudigd DOM

■


■




■

sterk vereenvoudigd DOM

■


■


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

Optimalisatie ● Hardware Acceleratie ○ CSS translate3d transform ■

transform: translate3d(0,0,0);

■

GPU rendering

● Content reflow vermijden ○

berekening positie en dimensies ■

belastend voor processor

● 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

○ Dynamische toevoegingen aan DOM minimaliseren ○ CSS shadows en CSS gradients vermijden

● Uitgebreid verslag ○ http://html5explored. org/knowledgebase/performantie/hybride-appsproof-of-concept/

Pilootprojecten ● Projecten in samenwerking met gebruikersgroep ○ projectvoorstellen ingediend ■

specifieke topics

■

uitbreidingen mogelijk

● 1 jaar ○ code en inzichten worden gedeeld

● UGent ○ Dobco Medical Systems ■

second opinion webapplicatie

○ Wijs ■

mobiele festival webapplicatie

● PXL ○ Showroomr i.s.m. Yappa ○ ?Win8 app

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

● HTML5 ○ Canvas ○ WebGL ○ Websockets ○ WebRTC

● Versie 0.0.1

Master

Slave

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

● WebGL ○ visualisatie DICOM ○ conversie pixeldata naar een WebGL textuur ○ windowing/levelling met shaders ●

16bit (65536 grijswaarden) naar 8 bit (256 grijswaarden)

● Websockets ○ Realtime ○ Standaard ○ view sharing ■ event synchronisatie ■ (binaire) data transport/synchronisatie ○ performantie

● WebRTC ○ data & view sharing ■ peer to peer ■ experimenteel

● Architectuur concepten

event synchronisatie via websockets

canvas synchronisatie via websockets met data url

Canvas synchronisatie via websockets door streaming van binaire data

Canvas synchronisatie via WebRTC datachannels

Scherm deling via WebRTC GetUserMedia

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

● HTML5 ○ semantics ○ audio/video/media ○ offline ○ connectivity ○ geolocation

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

● Audio/Video/Media ○ embedding media ■ nieuwe tags en attributen ■ streaming media ○ media upload ■ file api ■ device api

● Offline ○ appcache ■ functionaliteit zonder internet verbinding ○ local storage ■ tijdelijke opslag data

● Connectivity ○ web sockets ○ real-time data en events ■ tijdslijn met activiteiten gebruikers

● Geolocation ○ positie bepaling van de gebruikers ■ zoek gebruikers in de buurt ■ analytics ■ ... ○ masterproef toeristische gids in HTML5

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

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

TETRA HTML5. 4de gebruikersgroepvergadering 4 oktober 2013, Hasselt

Recommend Documents