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
Scrolling benchmark 2 PhoneGap applicatie & mobiele website HTML zonder CSS Pagina lengte: 508166px Aantal DOM nodes: 13861
Scrolling benchmark 3 PhoneGap applicatie & mobiele website HTML5 en jquery Mobile vereenvoudigd DOM Pagina lengte: 82222px Aantal DOM nodes: 5024
Scrolling benchmark 4 PhoneGap applicatie & mobiele website HTML5 en jquery Mobile sterk vereenvoudigd DOM Pagina lengte: 10419px Aantal DOM nodes: 652
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