Planning

We hebben na de meeting met onze begeleider een volledige planning uitgewerkt. We konden gebruik maken van de reeds gewerkte uren om correcte schattingen te maken. Hieronder kan je de planning bekijken. Deze planning geldt per persoon. Dit betekent dus 2 frameworks elk, wat het totaal brengt op 4 frameworks die we gaan vergelijken.

Planning thesis

Met deze planning kunnen we dus in totaal 4 mobiele HTML5 frameworks vergelijken. Jammer genoeg zien we geen mogelijkheid om 5 of 6 frameworks te vergelijken. Hieronder volgt de Gantt-grafiek die onze planning nog concreter maakt.

Planning Thesis

Feedback presentatie

De laatste departementale deadlines voor de thesis van 2012 zijn achter de rug.  In de vorige posts kan u de presentaties terugvinden die we hebben gegeven.  In deze blogpost hebben we gereflecteerd over de feedback die we kregen.

Het voorlopig grootste probleem met onze huidige status is de lijst van vergelijkingscriteria die we zullen hanteren om onze mobiele HTML5 frameworks te vergelijken.  De methodologieën die we in de literatuur vonden, stonden nog niet op punt en moeten meer worden uitgewerkt.  De lijst die door Bert werd voorgesteld bleek concreter en zullen we gebruiken als startpunt.  De lijst bevat volgende criteria:

  • Cost
  • Access to hardware and device API’s
  • Performance
  • Learning curve
  • Productivity
  • UI
  • Tools, debugging and testing
  • Customization
  • (Future) Support

Verder kregen we de vraag van Capgemini om de POC ook te implementeren als native applicatie.  Aangezien wij webapplicaties vergelijken, is dit voor ons niet interessant. We hebben ook niet echt een baseline om onze frameworks mee te vergelijken. We zouden een implementatie van de POC in ‘pure’ HTML5,  dus zonder gebruik te maken van mobiele HTML5 frameworks,  kunnen doen om bijvoorbeeld performantie te berekenen.  Daarnaast zouden we ook de UI zelf moeten programmeren in CSS en dat is dan weer niet aan de orde.

We kijken graag ook verder en zijn al op zoek gegaan naar HTML5 frameworks die in aanmerking komen om te worden vergeleken.  Momenteel staan The M-Project en Kendo UI Mobile  op ons verlanglijstje.  Het eerste vooral omdat het het MVC patroon combineert met jQuery Mobile. Het laatste omdat het de native look-and-feel van iOS en Android weet te mimieken. Zo zal de weblayout op een Android apparaat er anders uitzien als de weblayout op een iPhone. Daarnaast heeft ook Lungo recentelijk onze aandacht getrokken.

Vragen en opmerkingen zijn altijd welkom.

Update week 8

Na onze deadline van 4 november zijn we begonnen met de implementatie van de POC. Afgelopen weekend werd ook de backend vrijgegeven zodat onze POC ook echt functioneel zal kunnen werken. Tijdens de implementatie zullen we een logboek bijhouden welke problemen we hebben tegengekomen en hoe we die concreet hebben aangepakt. Deze logboeken kunnen op de volgende links worden bekeken:

Daarnaast kan de code bekeken worden op GitHub op de volgende link: http://tinyurl.com/HTMobieL

Update week 6

Na onze conference call op donderdag, hebben we de voorgestelde POC (over het delen van documenten) herbekeken.

We kwamen er achter dat deze POC niet de kern van onze thesis bevat, namelijk het vergelijken van HTML5 frameworks die hoofdzakelijk bestaan ​​uit UI-elementen.

We hebben wat onderzoek gedaan over de haalbaarheid van het huidige voorstel voor de POC. We vonden dat zowel de toegang tot de camera en het bestandssysteem in  HTML5 nog niet overal wordt ondersteund. Push notificaties via Web Sockets ligt ergens in het midden:

We zouden daarom graag een app hebben die de volgende dingen bevat:

  • form elements (zoals date pickers)
  • form validation
  • lay-out
    • responsive design
    • pagina’s (header, content en footer)
    • dialogs
    • navigatie en menu’s
    • tooltips, meldingen, …
  • werkbalken, knoppen, icoontjes
  • canvas en afbeeldingen (zoals taartdiagrammen)
  • beeld, video en audio

Daarnaast zijn we nu ook bezig met het schrijven van onze literatuurstudie. We hebben ook een geraamte opgesteld hoe we beide ons framework in de tekst zullen voorstellen, zodat we eenzelfde structuur hebben en toch apart kunnen schrijven.

Dankzij de interviews zullen we ook zeker aandacht besteden aan de volgende puntjes die belangrijk zijn bij de keuze van een framework, met name:

  • marktadoptie: wie gebruikt het al?
  • toekomstgericht: welk bedrijf zit er achter het framework?
  • support: een bug moet snel kunnen worden opgelost
  • aanpasbaarheid: hoe gemakkelijk kan je componenten aanpassen/toevoegen?
  • ondersteuning voor devices: enkel onderseuting voor iOS en Android of ook andere platformen?
  • performantie: performantie kan bijvoorveeld verschillen tussen de platformen onderling
  • documentatie: bijvoorbeeld liefst voorbeeldcode in de documentatie
  • tools: goede tools die onder andere code completion voorzien

Features POC

Om tot een proof-of-concept (POC) te komen, moeten we eerst bepalen welke features deze allemaal moet bevatten. Dit zorgt er voor dat we de kern van onze thesis, een uitvoerige vergelijking van mobiele HTML5 frameworks, niet over het hoofd zien. Daarnaast dient onze POC in een business context relevant te zijn.

Wij stellen een POC voor die van toepassing is voor restaurants. Er bestaan al talloze applicaties die makkelijk toelaten restaurants te zoeken (in je omgeving,  op basis van voorkeur, …) die we verder kunnen uitbreiden. Een eerste uitbreiding is een beoordelingssysteem waar gebruikers reviews kunnen lezen en schrijven, maar ook dat is niet nieuw. Vele van de applicaties die deze diensten aanbieden voorzien ook een API.  Hier worden er enkele toegelicht.

Een andere uitbreiding voor de ‘restaurant’-app is een verbinding met Groupon. Deze site biedt verschillende kortingsbonnen aan die binnen een beperkte tijd,  zolang de voorraad strekt, kunnen worden gekocht. Hier kunnen ook deals voor restaurants gevonden worden. Ook Groupon biedt een API aan voor developers die de data van Groupon kunnen aanspreken.

Daarnaast kunnen we ook toelaten om specifiek naar gerechten te zoeken. Een site als FoodSpotting zou ons daarbij kunnen helpen. Gebruikers kunnen foto’s van gerechten op een 2D map zien samen met het restaurant dat het serveert. Je kan dan als gebruiker de kortste route vanaf je huidige locatie tot de gewenste restaurant berekenen.  Natuurlijk zou het ook mogelijk zijn om zelf foto’s van gerechten te delen met anderen.

Een te overwegen optie zou de weergave van restaurants zijn in augmented reality (AR). Er bestaan enkele recente HTML5/JavaScript frameworks. Voorbeelden van zo’n frameworks zijn Wikitude en JSarToolkit.

  • Multimedia:  camera
  • Offline & Storage:  offline beschikbaar maken
  • Performance & Integration:  XHR
  • Semantics:  menu’s annoteren met microformat/microdata
  • CSS3:  responsive design
  • 3D,  Graphics & Effects: AR
  • Connectivity:  promoties pushen naar clients

HTML5 features

Voor onze Proof-of-Concept is het belangrijk dat zoveel mogelijk features van HTML5 benut worden.  Hieronder volgen de 8 belangrijkste focuspunten die HTML5 beoogt:

  • Multimedia:  de nieuwe video en audio tags maken het mogelijk audio- en geluidsfragmenten te embedden zonder third party plugins.  De noodzaak van de Flash plugin voor video applicaties wordt vaak in vraag gesteld.
  • Offline & Storage:  Mobiele devices en hun onstabiele connectiviteit in acht genomen voorziet HTML5 offline opslag in de cache (in plaats van cookies),  lokale opslag in de browser en een file API om bestanden te manipuleren.
  • Performance & Integration:  Web workers maken het mogelijk om langdurige Javascript taken in de achtergrond uit te voeren zodat web applicaties dynamische en snel blijven.
  • Semantics:  Een hele hoop nieuwe tags verzorgen meer semantiek binnen webpagina’s.  Ze zorgen voor een gebruiksvriendelijke aanpak voor zowel programeur als gebruiker.  Het gebruik van e-readers en search engine optimization zijn daarbij twee belangrijke factoren.
  • CSS3:  Hand-in-hand met HTML5 laat het toe pagina’s meer op te maken en uit te breiden met effecten.  Verschillende formaten van mobiele devices en een dynamische oriëntatie verplichten ook het dynamisch layouten van webpagina’s.
  • 3D,  Graphics & Effects:  De nieuwe canvas tag in samenwerking met enkele lijnen Javascript blijkt enorm krachtig.  Tekeningen en animaties waren nog nooit zo simpel zelf te programmeren.
  • Connectivity:  Web sockets en server-side events kunnen data naar clients pushen om een meer efficientere connectiviteit te garanderen.
  • Device Access: Webapplicaties kunnen meer en meer device-aware features benutten zoals native applicaties dat kunnen.  Het beste voorbeeld momenteel is de Geolocation API die je huidige locatie kan achterhalen met behulp van de ingebouwde GPS.

——

Reference

[1]: HTML5:  the missing manual,  Matthew MacDonald, 2011
[2]: HTML5 Poster