Mobile apps met HTML, CSS en Javascript

WebApps zijn apps die in de browser van een mobile device draaien en ontwikkeld worden m.b.v. HTML, CSS en Javascript. Dit in tegenstelling tot native apps, die specifiek ontwikkeld zijn voor het iOS, Android of Windows besturingssysteem. Daarnaast zijn er nog zgn. hybride apps, die wel m.b.v. HTML, CSS en Javascript ontwikkeld worden, maar gebruik maken van verschillende native mogelijkheden van het mobile besturingsysteem.

WebApps versus Native Apps

Het grootste voordeel van een WebApp is het gebruik van web-technieken en mede daardoor veel lagere ontwikkelkosten. Facebook maakt gedeeltelijk gebruik van WebApp.

Dit kun je zien als een vorm van hybride Apps. Zie meer hierover: (https://download.cnet.com/news/facebook-rolls-out-progressive-web-app-hybrid-of-a-mobile-app-and-a-mobile-website/). In 2013 werd React, open source, dat voordien voor instagram en delen van Facebook gebruikt was: Facebook has open sourced React, its JavaScript library for building reactive user interfaces, used to build the Instagram website as well as portions of the Facebookwebsite.

Maar even los daarvan is de meest gebruikte huidige versie van Facebook een Native App voor iOs en Android.

Een Native App moet zowel voor iOS, Android als Windows ontwikkeld worden, heeft meer tijd nodig voor de ontwikkeling en vraagt om andere, meestal duurdere developers. Maar het staat dus wel in de betreffende appstores.

Enkele nadelen van WebApps zijn dat ze bijna altijd een internet verbinding nodig hebben, dat ze langzamer zijn dan native apps en ze kunnen meestal geen gebruik maken van specifieke mobile functionaliteit, zoals push-berichten, camera, enz.

Wel kan een WebApp meestal doorontwikkeld worden naar een hybride app.

WebApp versus Website

Het verschil van een (web-) app ten opzichte van een website kan gezien worden als het verschil tussen iets doen en iets lezen/bekijken.

Een website presenteert in eerste instantie content, terwijl een applicate de mogelijkheid geeft om iets te doen met content of iets te creëeren. Denk hierbij aan bijv, het spelen van een game, het ordenen van data, het bewerken van tekst of afbeeldingen e.d.

In deze training houden we ons dus bezig met WebApps en het creëren daarvan m.b,v HTML, CSS, Javascript en eventueel extra libraries of frameworks. Wel zullen we de interface op een dusdanige manier construeren dat het uiterlijk t.a.v. een native app nauwelijks zal verschillen.

 

Studieprogramma Apps en WebApps

1 WebApp Basics

  • wat is een webapp
  • webapp, progresive webapp, hybride app, native app
  • een basic webapp

2 Het Ontwerp en de user interface

  • ui prototyping
  • iOs en Android user interface guides
  • views, layout, content, actions en interaction
  •  iOs bars, views, controls, enz.
  • Android layouts, look-and-feel, text, buttons. enz.

3 Enkele frameworks

  • jQuery mobile, Ratchet, OnsenUI, Framework7, JQT, enz.
  • Phonegap, Appcelerator, enz.
  • Quickview iOs native

3 Basis constructie

  • HTML setup
  • CSS
  • Javascript

4 M.b.v. een framework

  •  template setup
  •  pages en navigatie
  •  Javascript

5 De Functionaliteit

  • componenten
  • animatie

6 Data en content

  • content
  • formulieren
  • data weergave

7 Thema aanpassingen

  • aanpassingen in CSS
  • icons

8 Puntjes op de i

  • events
  • optimalisatie
  • Progressive Web Apps