003434-0053

International Baccalaureate
Extended Essay








To what extent can the HTML5 markup
language dominate the
mobile application development
paradigm?



Yuhan Song

Computer Science
Dulwich College Beijing
February 2014

Candidate Number: 003434-0053

Advisor: Mr. Richard Hawkins

Abstract Word Count: 253
Main Essay Word Count: 3990



1
003434-0053
!"#$%&'$

This exlended essay's ob|eclive is lo invesligale lhe caabiIilies of HTML5
marku Ianguage as lhe main mobiIe aIicalion deveIomenl aradigm. The
invesligalion is carried oul by exIoring lhe slrenglhs and lhe veaknesses of HTML5
aIicalionrogrammingmelhod,andsuggeslingossibIesoIulionslocrealelhemosl
comalibIe, slreamIined and lruslvorlhy mobiIe aIicalion deveIomenl aradigm.
HTML5markuIanguageislhemoslrecenlversionoflheHTML5markuIanguages,
andilisbeingusedbymanyaIicaliondeveIoersdueloil'sviderangeofbrovser
suorl lhal doesn'l require any Iugins, vhich is very advanlageous for mobiIe
aIicalion deveIomenl. Hovever, nol aII aradigms are erfecl, and HTML5 has ils
ovn veaknesses lhal hinder lhe deveIoers from crealing lruIy funclionaI mobiIe
aIicalions.IirslIy,lheessayIooksallhegeneraIhisloryoflheInlerneldeveIomenl,
lhen idenlihes lhe benehls lhe HTML5 deveIomenl aradigm brings lo mobiIe
aIicalion deveIomenl. The benehls moslIy incIude olimizalion for mobiIe devices,
considering lheir Iimiled bauery caacily and lheir unique fealures lhal lhe slandard
ersonaI comulers don'l have. Aflervards, lhe Iimilalions of HTML5 deveIomenl in
mobiIe aIicalion deveIomenl are idenlihed, and lhese Iimilalions mainIy incIude
aseclssuchassecurilyissues,rivacyissues,userinlerfaceanduserexerienceissues
and erformance issues. Desile lhe Iimilalions of lhe HTML5, il is raidIy being
slandardized by many brovser comanies and reIevanl organizalions. HTML5 |usl
needs more lime lo ass for lhe lechnoIogy lo be slandardized and soIidihed, lhen
HTML5-based mobiIe aIicalions viII be abIe lo fuIIy rea ils benehls and dominale
lhemobiIeaIicaliondeveIomenlaradigm.
)*%+ ,*-.$/ 012



2
003434-0053
3&"45 *6 ,*.$5.$#

7.$%*+-'$8*.99999999999999999999999999999999:
,<&.=8.= )5" !''5## >.?8%*.@5.$9999999999999999AA99:
3%5.+ *6 )5" B#&=59999999999AA99999999999AA999AA1
3%5.+ *6 $<5 C5D$ E5.5%&$8*. )5" F5?54*G@5.$A999999999999AH
I3JK19999999999999999999999999999999A999H
7.$%*+-'$8*.99999999999999999999999999999H
F55G5% 8.$* I3JK19999999999999999999999999AAL
!+?&.$&=5# *6 I3JK199999999999999999999999A9999MN
O*8.$ !P%8"-$5# *6 I3JK19999999999999999A999999AMN
Q*R5%6-4 S5&$-%5# *6 I3JK1999999999999999999999AM0
T85RG*%$999999999999999999999999999AM0
J5+8& U-5%85# V,WW2X999999999999999999999AAM2
Y%85.$&$8*. V,WW2X99999999999999999999999M2
E5*4*'&$8*. !Q7999999999999999999999999M:
YZ8.5 >?5.$# &.+ !GG48'&$8*. ,&'<5999999999999AA99M:
K8@8$&$8*.# *6 I3JK1999999999999999999999999999AM1
B#5% >DG5%85.'5 &.+ B#5% 7.$5%6&'5 VB[ &.+ B7X9999999999999M1
Q5%6*%@&.'599999999999999999999999999999MH
,*.#8#$5.'\ &.+ ,*@G&$8"848$\99999999999999999999AAM]
W5'-%8$\ &.+ Q%8?&'\9999999999999999999999999AML
,*.'4-#8*.99999999999999999999999999999999AML
^8"48*=%&G<\9999999999999999999999999999999AA0N
3
003434-0053
7.$%*+-'$8*.
Changing Web Access Environment

The beginning of lhe veb slarled vilh an academic urose. Hovever, il Ialer
combined vilh an commerciaI urose, and exerienced a raid grovlh, and nov lhe
vebisusedinaImoslaIIaseclsofourdaiIyIives.IlhasaImoslbecomeanecessilyin
our Iives, aIong vilh eIeclricily, valer, road, lransorlalion, elc. There is no doubl in
sayinglhallhelermsWebandlheInlernelarebeingusedinlerchangeabIybecause
lhevebisbeingusedinmanydierenlheIds.

ThereusedlobeaquolelhalsaidWebisalechnoIogydeveIoedforICs,and
onIyvilhICscanoneaccesslheWeb.ObviousIy,lhevebhasbeendeveIoedusinga
IC, and for lhe asl 20 years, vebsiles vere onIy accessibIe lhrough lhe usage of
comulers.IvenifausergainedorlabiIilybyusingIalolhalvasconnecledvilha
vireIessnelvork,suchaslheWiIi,rinciaIIylheuserrequiredacomulerhardvare
louselheWeb.

Hovever,asmenlionedinlheMoore'sLav
#
,ever-imrovingITlechnoIogyhas
1
aIIoved us lo deveIo a device lhal hls in one's hand, yel can yieId a overfuI
erformanceasslrongasICs.Slarlingvilhlheinlroduclionoflhesmarlhones,Web's
informalion lransferred nol onIy lo lhe ICs bul aIso lo many olher orlabIe devices,
evenlolheleIevisionslhalusedloserveasingIeurose.

Nev devices vilh Inlernel access viII conlinue lo be deveIoed, and veb
accessibiIily is becoming a more concerning loic. DeveIoing individuaI veb
environmenl for aII of lhose devices are nearIy imossibIe. Iven if ve assume lhal il's
ossibIe,ilshnanciaIcoslviIIrovelobeveryinecienl.

4

Moores law is a story that was included in Intels Founder, Gordon Moores thesis, stating that the computers
1
performance will double every 18 months.
003434-0053
Nev veb lechnoIogies are galhering auenlion lo address lhe issue. The veb is
abIe lo resenl informalion vilhoul being reslricled by lhe oeraling syslem of lhe
devices,lhereforeilcanlransfervarielyofinformalionlodierenldevices.Novislhe
limevhenlhevebcanacluaIIyachieveuniversaIaccesslolheinformalion.

3%5.+ *6 )5" B#&=5

Today,lhelermInlernelandWebarebeingusedinlerchangeabIy.Hovever,
slriclIy seaking, lhose lvo vords mean dierenl lhings. Inlernel is a lye of a
communicalion lechnoIogy, vhiIe Web is a lechnoIogy lhal has been eslabIished
lhrough lhe use of lhe Inlernel. There have been many services lhal uliIized lhe
Inlernel, such as lhe ImaiI (1971), ITI (1971), usenel (1979), Goher (1991), and more.
Novadays,mosloflheserviceshavebeencombinedlolheHTTIservice.

Iven afler lhe eslabIishmenl of lhe HTTI service, vebsiles vere sliII Iimiled lo
basiceIemenls,suchaslexl,images,andmaybesomeaudiohIes.Thisvasbecauselhe
Iack of funclionaIilies of lhe rimilive version of HTML. HTML acluaIIy is |usl a
marku Ianguage, meaning lhal aII il does is lo organize informalion inlo dierenl
seclions, an resenl lhem. The acluaI design eIemenls and funclions come from
dierenl scrils such as }avaScril and add-ons such as Adobe IIash. Afler lhe
inlroduclion of }avascril and CSS in 1996 vas vhen HTML received some more
varielyoffunclionlhallheoriginaIHTMLdidn'lrovide.

The conlinuous deveIomenl of HTML marku Ianguage, CSS and A}AX
2
evenluaIIy broughl changes lo lhe lrend of veb usage. If vebsiles vere simIy for
shoving informalion in lhe asl, nov il's aII aboul inleraclive aIicalions (Rich
Inlernel AIicalions), and HD videos. Rich Inlernel AIicalions became a recenl
lrend,asiloersfunclionaIilieslhalarecIoserloDeskloaIicalions,excellhereare
evidenl conveniences such as lhem being accessibIe from any devices vilh an Inlernel
conneclion.
5

AJAX (Asynchronous Javascript and XML) is a subset of javascript. Ajax is way for the client-side browser to
2
communicate with the server (for example: retrieve data from a database) without having to perform a page refresh.
003434-0053

3%5.+ *6 $<5 C5D$ E5.5%&$8*. )5" F5?54*G@5.$

Day by day, more mobiIe devices are enelraling lhe consumer eIeclronics
markel.InMay2013,56%oflhevorIdouIalionovnedasmarlhone,and15%oflhe
lolaI inlernel lrac came from a mobiIe Ialform. This number is groving raidIy
everyday, and by lhe end of 2013, lhe lolaI number of smarlhones in lhe vorId viII
overlakelhenumberoflolaIouIalionoflhevorId.

AIlhoughmoslvebsilescanbevievedonsmarlhones,moslvebsilesareoled
for Desklo comulers, lherefore lhe vebsiles are oflen ledious lo inleracl on mobiIe
devices vilh signihcanlIy smaIIer screens. In order lo foIIov lhe raid grovlh of
consumer mobiIe eIeclronics markel, veb deveIoers are highIy inleresled in
deveIoingmobiIe-friendIyvebsiles.

There are severaI veb lechnoIogies lo choose from, lhal are caabIe of crealing
Rich Inlernel AIicalions, and olimize for mobiIe devices. The mosl common
examIesareAdobeIIash,MicrosoflSiIverIighl,andHTML5combinedvilhA}AXand
CSS.AIlhoughlhereisanongoingdisuleonvhichlechnoIogyislhemoslaroriale
one, mosl of lhe veb deveIoers are oling for HTML5 for severaI reasons lhal
oulveighlheolhervebdeveIomenllechnoIogies.

I3JK1
7.$%*+-'$8*.

HTML is a WorId Wide Web's marku Ianguage. Il vas originaIIy vriuen lo
semanlicaIIy describe scienlihc documenls, hovever lhe design changed overlime lo
adallodierenllyesofdocumenls.

Over lhe lime, lhere has been many versions of HTML, and unliI nov, il has
conlinuousIy been udaled. In 1991, Sir Tim erners-Lee crealed lhe hrsl HTML
6
003434-0053
marku Ianguage, and he roosed dozens of HTML marku lags lhal couId be used
for vebsile deveIomenl. In 1995, lhe IITI (Inlernel Ingineering Task Iorce) udaled
lheHTMLloHTML2.0,hovevervasdisconlinuedinSelember1996.In1997}anuary,
lhehrslHTMLvasreIeasedbylheW3C(WorIdWideWebConsorlium),vhichisnov
lhemaininlernalionaIslandardsorganizalionforlheWorIdWideWeb(WWW).

The more advanced version of HTML, HTML4.01 vas reIeased on December
1999,andHTML4vasusedunliIlheHTML5vasreIeasedafevyearsago.TheHTML5
is lhe mosl recenl version of lhe HTML marku Ianguage, and il sliII isn'l done
deveIoingyel.

HTML5 is considered lo be one of lhe besl HTML marku Ianguage lo dale,
becauseofilsabiIilylovorkvilhlheCSS3(CascadingSlyIeSheels)inorderlocrealea
highIyfunclionaIandvisuaIIyIeasingvebsiles.

These changes did nol occur oul of novhere. IreviousIy, HTML vas a marku
Ianguage vilh a cIienl-server slruclure, vhere lhe user requesled an aclion lo lhe
server, lhen lhe server resonded and disIayed lhe resonse on lhe user's screen.
IreviousversionsofHTMLhadnorobIemsvilhlransferringslalicdocumenls.

Hovever as lime assed, lhe veb slarled lo evoIve from slalic documenls inlo
dynamic rograms, and muIlimedia comonenls vere aded, such as movie hIes and
music hIes. Conlenls of lhe veb grev a vider base, and lhe characlerislics of lhe veb
changedfromdocumenlalionslofuIIydynamicandinleracliverograms.

Inconlrarylolhedesireforchangeinveb'scharaclerislics,lheHTMLIanguage
vas slabIe al HTML4.01, vhich vasn'l lhe besl marku Ianguage lo suorl lhe
dynamic aIicalion slruclures. To come u vilh a beuer HTML version, lhe MoziIIa
Ioundalion, AIe and Oera Soflvare |oined logelher lo creale lhe WHATWG
3
logelher.
7

The three companies decided to create the new HTML version without adhering to the pre-existing W3C
3
conventions, and named it the Web Hypertext Application Technology Working Group.
003434-0053

The HTML5 vas originaIIy nol lhe slandard convenlion of lhe W3C. Hovever
afler lhe XHTML 2.0
#
deveIomenl exerienced deIays and comalibiIily issues, Tim
4
erners-Lee decIared lhe XHTML 2.0 ro|ecl as a faiIure, and acceled lhe HTML5 as
lheirnevslandardconvenlion.

The mosl noliceabIe fealure of HTML5 is lhe dynamic aIicalion environmenl.
The iniliaI ro|ecl codename for HTML5, vebAIicalion 1.0, aIready imIies lhe
uIlimale nalure of lhe HTML5 marku Ianguage. Hovever an imorlanl facl lo
consider is lhal aII of lhe changes are laking in lo consideralion of ils originaI goaI:
UniversaIAccess.

F55G5% 8.$* I3JK1

HTML5 is a marku Ianguage for conslrucling dala slruclures. Conslruclion of
ecienl dala slruclure is needed for uid communicalion belveen many dierenl
devices oul in lhe vorId and lhe source. HTML5 has brand nev lags for more concise
descrilionsandfunclionaIilies,vhiIeedilingsomeoflhelagslocorrecllheirusage.

A nev Conlenl ModeI vas crealed for lhe HTML5, vhich is shovn in lhe
diagrambeIov:
!"#$%& () *+,-. /012&12 ,03&4
.
8

XHTML 2.0 was an attempt to create a more comprehensive and organized data structure by implementing the XML
4
technology in the HTML markup language, led by Tim Berners-Lee and the W3C.

"HTML5." 3.2.5 Content Models . W3C, n.d. Web. 03 Jan. 2014. <http://www.w3.org/TR/2011/WD-
5
html5-20110525/content-models.html>.
003434-0053
TheConlenlModeIcalegorizeslheeIemenlsinlermsoflheircharaclerislicsand
lheir funclionaIilies. Dierenl lags can hl inlo muIliIe calegories, as lhey are
calegorizedinlermsoflheirfunclionaIiliesanduroses.


Iurlhermore,HTML5inlroducedbrandnevlagslhalvouIdeIiminalelheneed
of exlernaI Iugins. There vere more lhan 30 nev lags added lo lhe HTML5, and lhe
mosl nolabIe lags incIude lhe <video> lag, vhich eIiminales lhe need for Adobe IIash
Content Model Tags
Content Group Purpose of the Element Examples
Flow Content Fundamental elements that
are used in the body of the
documents and applications
<article>, <section>, <object>,
<script>
Heading Content De!nes the header of the
page or a paragraph
<h1>, <h2>, <hgroup>
Sectioning Content De!nes the scope of the
header and the footer;
categorizes the content
elements
<article>, <aside>, <nav>,
<section>
Phrasing Content The actual text of the
document, or the content
that is inserted in the
document; the elements that
markup the text in the
document
<em>, <span>, <strong>,
<img>, <input>
Embedded Content Imports other resources and
languages into the document
<img>, <iframe>, <video>,
<canvas>
Interactive Content Contents speci!cally for user-
interaction
<a>, <button>, <textarea>
Metadata Content Sets the behavior and the
presentation of the
document, and handles the
relationship of the document
with other documents.
<meta>, <title>, <link>
9
003434-0053
IuginforvideoIayback,lhe<audio>lag,vhichaIIovednaliveaudioIayvilhinlhe
brovser, lhe <canvas> lag, vhich aIIoved users lo drav veclor images naliveIy in lhe
brovser.

HTML5 aIso removed revious lags lhal vouId've degraded lhe vebsile
accessibiIily, and lhese lags incIude fealures such as <frame>, vhich crealed a
comIicaledandunnaluraIslruclureinlhevebsilebycrealinganHTMLframevilhin
lhe HTML hIe, <aIel> vhich crealed a robIem of deveIoers bIindIy imorling
aIels from exlernaI sources, requiring users lo dovnIoad counlIess exlernaI Iugins
fromvarioussources.ThisvasaserioussecurilylhreallomanyInlernelusers,assome
oflheIuginsrequiredforlheaIelsverenolvirus-free,andnolaIIoflheIuginson
lheinlernelcouIdbecheckedformaIiciouscodes.

!+?&.$&=5# *6 I3JK1
O*8.$ !P%8"-$5# *6 I3JK1

There vere severaI nev auribules lhal have been added lo lhe HTML5 marku
Ianguage. The nev auribules have rimariIy been vriuen for aIicalions. These
auribules are eseciaIIy usefuI in enhancing usabiIily of veb conlenls on muIliIe
devices.ThefoIIovingIislshovslhenevauribulesinlheHTML5.

_'*.$5.$5+8$&"45
contenteditable auribule aIIovs lhe conlenl lo be ediled. NormaIIy, lhe eIemenls
suchas<>arenoledilabIe.Hovever,iflheyaredecIaredascontenteditable,lhe
eIemenlcanbeediledbylheuser.

_'*[email protected]
contenteditable auribule aIIovs a <menu> eIemenl lo be shovn vhen lhe righl-
mousecIickislriggered.ThisaIIovsusersloseIeclsecihcaclionslhalcanbeaIied
lolheeIemenls.

10
003434-0053
_+%&==&"45
draggableauribuleaIIovseIemenlslobedragged.TheshereoflhisaclionincIudes
vilhin lhe brovser and oulside of lhe brovser, such as lhe Desklo. This auribule
aIIovsuserslocarryoulinleracliveaclionvilhlheeIemenlsonlheHTMLage.

_<8++5.
hidden auribule aIIovs eIemenls lo be hidden from lhe HTML slruclure. IreviousIy,
lhedisIayorvisibiIilyroerlieshadlobechangedlohideaneIemenl.Hovever,lhe
CSSonIychangeslheaearanceoflheeIemenl,nollheslruclureilseIf.

_#G544'<5'`
spellcheckauribulechecksforseIIingerrorsandgrammarerrors,vhenlheeIemenl
hascontenteditableauribuleenabIedforlheeIemenl.ThisauribuleunderIineslhe
incorreclvords/hrases/senlencesinred.

_+&$&
data auribule aIIovs cuslom dala lo be slored rivaleIy lo lhe age or aIicalion, as
an auribulevaIue. IreviousIy lhis auribule vas nol aIIoved lo be used in lhe revious
HTMLversions,hoveverinHTML5lhedeveIoerscanuseallheirdiscrelion.

_%*45
roleauribuleindicalesvhallheroIesoflheeIemenlsare.The!a7!(AccessibIeRich
InlernelAIicalions)isaslandaIoneslandardoflheWebAccessibiIilyInilialive.ARIA
isaconvenlioncrealedinorderloincreaselheaccessibiIilyoflheaIicalions.Irevious
HTMLdidn'lhaveamelhodloindicalelheurosesoflheeIemenls.lheroleaimslo
soIvelhalissue.

_8$5@#'*G5
itemscope auribule heIs indicale lhe semanlic dala heId in order lo idenlify lhe
heId's dala lye and lhe dala aulomalicaIIy. NormaIIy, human had lo idenlify lhe
meaning of lhe conlenls in lhe HTML hIe. Microformal is a semanlic marku lhal
11
003434-0053
aIIovs nol lhe HTML slruclure, bul lhe conlenls informalion lo be idenlihed
aulomalicaIIy.

Q*R5%6-4 S5&$-%5# *6 I3JK1

AIIs are lhe edeslaI for aIicalions. The AIIs aIIov an HTML5 age lo have
addilionaI funclions lhal may change lhe age inlo a aIicalion. HTML5 AIIs are
arlicuIarIy advanlageous in lhe nexl generalion veb deveIomenl environmenl as
more and more eoIe are ossessing mobiIe devices. HTML5 aIicalions can oer
high comalibiIily lo aII mobiIe devices, vhich eIiminales lhe need lo deveIo nalive
asforeachoflhemobiIeoeralingsyslems.TheseAIIsviIIaIIovlheHTML5ages
lohavehighcomalibiIilyacrossvariousmobiIedevices,bulloaIsohavelheessenliaI
funclions lo acl as a fuIIy funclionaI aIicalion. HTML5 is aIso knovn lo be very
versaliIe.IlcanuseaddilionaICSS(CascadingSlyIingSheel)isaIsoaoverfuIvaylo
crealeamobiIeaIicalion.

T85RG*%$
Vievorl mela lag aIIovs lhe deveIoers lo ad|usl lhe vidlh of lhe vebsile
accordinglolhesizeoflhedevice'sscreen.TheVievorlmelalaglackIesmanyoflhe
issues lhal lhe deveIoers face vhen deveIoing a aIicalion for muIliIe mobiIe
devices.DierenlmobiIedeviceshavedierenlscreenresoIulions,hysicaIscreensize,
and di, lherefore il is imossibIe lo creale one veb age lhal hls aII devices vilhoul
lheuseoflheVievorlmelalags.

The code segmenl is an examIe of a vievorl mela lag. Il aIIovs lhe vebsile's
vidlh lo malch lhe device's device-vidlh. Il viII creale an eecl lhal is shovn in lhe
diagramsonlhenexlage:

12
<meta name=viewport content=width=device-width, initial-
scale=1>
003434-0053

!"#$%& 5) 6&70%& 813 972&% 2:& ;"&<=0%2 ">=4&>&1282"01
?

J5+8& U-5%85# V,WW2X
Media Queries aIIov lhe CSS slyIe lo dier for dierenl lyes of devices by
idenlifying severaI informalion aboul lhe mobiIe device, such as screen vidlh, screen
heighl, orienlalion, and resoIulion. y using such crileria, deveIoers can increase lhe
accessibiIilyoflheirvebsilesbycaleringsecihcaIIylolhedevices'environmenl.

ThiscodesegmenloflheaCSShIecaIIsforexeculionvhenlhemaximumvidlh
of lhe screen size of lhe device is al Ieasl 800x vide. This aIIovs lhe CSS hIe lo
dislinguish belveen mobiIe and desklo devices, aIIoving lhe deveIoer lo oer lhe
besllyeofvebexeriencedeendingonlhelyeofdevicelheuseruses.

Y%85.$&$8*. V,WW2X
The CSS aIso has a fealure lo hgure oul lhe user's orienlalion on a device,
aIIovinglhedeveIoersloroducevebagesinbolhorlrailandIandscaemodefor
enhancedusabiIilyandaccessibiIily.

13

Kumar, Sushil. "Code." Sushilworld. Sushil Kumar, n.d. Web. 21 June 2013. <http://www.sushilworld.com/code>.
6
@media screen and (max-width: 800px){}
003434-0053
The foIIoving code imIemenls cerlain arl of lhe CSS hIe onIy if lhe screen
orienlalionoflhedeviceisinorlrailmode.

E5*4*'&$8*. !Q7
One overfuI AII of HTML5 is lhe geoIocalion AII. This AII is arlicuIarIy
overfuIasilaIIovsdeveIomenlofaIicalionslhalarebasedonlheuser'sIocalion,
suchasaGISnavigaliona,oravealherforecasla.

ConsideringlhelrendoflheroIiferalionofmobiIedevices,manyusersarenov
viIIing lo use lheir mobiIe devices such as smarlhones as lheir ersonaI assislance,
lhal leIIs lhe roules lo deslinalions, currenl vealher of lhe currenl Iocalion. The
geoIocalionAIIaIIovslhedeveIoerslogellhereciseIocalionoflheuseranduselhe
IocaliondalalorovideusefuIserviceslolheusers.

YZ8.5 >?5.$# &.+ !GG48'&$8*. ,&'<5
Mosl mobiIe devices uliIize mobiIe nelvorks such as lhe 3G nelvork or lhe 4G
LTInelvork.AIlhoughlhesenelvorklechnoIogiesoerfaslInlernelaccesslouserson
lhe move, because of lhe lechnicaI range Iimilalions of lhe saleIIile lovers, lhere are
Iaces vhere lhese nelvorks mighl be unavaiIabIe. This is a crilicaI issue lo lhe users,
eseciaIIyvhenlheusersareusingaIicalionloerformalask.

Tomiligale,soIve,andminimizelhisrobIem,aIicalioncacheisusedloaIIov
lhe HTML5 age lo conlinue funclioning even vhen lhe device is ohine. The
!GG48'&$8*. ,&'<5 useslhecachemanifeslloidenlifyvhichresourcesoflhevebage
lo cache for ohine access. Then, |usl by inserling a lag lhal oinls lo lhe manifesl hIe,
lhevebageviIIbecachedbylhebrovserandviIIbeavaiIabIeforohineusage.
14
@media screen and (orientation: portrait){}
<html manifest="example.appcache">
...
</html>
003434-0053

TherearelhreeadvanlageslousingaIicalioncacheinaIicalions.

MA YZ8.5 "%*R#8.=/ Users are abIe lo brovse lhe vebage and inleracl vilh lhe a
even vhen ohine. MobiIe devices connecled on mobiIe nelvorks are rone lo
frequenl disconneclion deending on lhe Iocalion of lhe mobiIe nelvork signaI
lovers, lherefore lhe usage of lhe aIicalion cache viII ensure lhal lhe a
conlinueslovorkinbadconneclivilysilualions.
0A WG55+/ Users exerience increased brovsing seed as lhe resources are Ioaded
slraighlfromlheIocaIdisk,ralherlhanfromlhenelvork.AIicalioncacheaIIovs
devices lo uliIize lhe nelvork conneclion Iess frequenlIy, vhich reduces bauery
usageoflhemobiIedevice.
2A a5#8485.'5/ Users viII sliII be abIe lo use lhe aIicalion even vhen lhe acluaI
vebageisexeriencinglechnicaIdicuIlies,aslheaIicalionresourcesareslored
IocaIIyonlhemobiIedevice.ThedeviceviIIconlinuelouselheresourcesfromlhe
IocaIslorageunliIlheissuesoflheaIicalionareresoIved.

K8@8$&$8*.# *6 I3JK1

Desile aII lhe greal funclions lhal imroves accessibiIily on mobiIe devices,
HTML5 is sliII an incomIele marku Ianguage sliII under deveIomenl. As a resuIl,
lhere are Iimilalions in deveIoing a aIicalion vilh HTML5 lhal may hinder lhe
deveIomenl rocess. Oflen, using aIlernalive deveIomenl melhods, such as Adobe
IIash, Microsofl SiIverIighl, and nalive aIicalion deveIomenl couId be more
advanlageouslhanHTML5mobiIeaIicaliondeveIomenl.

B#5% >DG5%85.'5 &.+ B#5% 7.$5%6&'5 VB[ &.+ B7X

HTML5 mobiIe aIicalions Iack lhe access lo many usefuI funclions lhal lhe
naliveaIicalionssuorl.ThesefunclionsincIudeassigninguniquefunclionaIilieslo
hysicaIbuuonsandlriggersoflhemobiIesyslem,suchaslhevoIumeconlroIbuuons,
15
003434-0053
nalive nolihcalion suorl, and vidgel suorl for cerlain mobiIe oeraling syslems.
AIlhough nalive aIicalion deveIomenl cannol be direclIy comared vilh HTML5
aIicaliondeveIomenl,lhesefunclionaIilycomonenlsarecruciaIlovardsaavIess
mobiIe exerience, as lhey heI users receive vilaI informalion eecliveIy and erform
lasks uenlIy. The user exerience couId be hindered by lhe Iack of b-8+ suorl of
conlroIIing geslures, eseciaIIy lhe muIli-louch geslures, vhich lhe nalive aIicalions
suorlexcelionaIIy.

AnolherissueislhalvhendeveIoersuseHTML5aslheiraIicalionIalform,
lhe user exerience (UX) viII dier signihcanlIy from aIicalions lo aIicalions.
Hovever in order for lhe aIicalions lo have universaI aeaI for a broad range of
usersusingabroadrangeofIalforms,iliscruciaIlhallhediversilyofuserexerience
doesn'l confuse lhe users by forcing lhem lo Iearn muIliIe UX idioms. These UX
idiomsmayincIudeduralionoflhelouchonlhelouchscreenlocaIIanolionsmenu,
orlhedireclionoflhesvielolriggercerlainaclions.

Q5%6*%@&.'5

HTML5 aIicalions are rone lo oorer erformance and bauery usage due lo
IackofaccessloadequalehardvarecaabiIilies.HardvarecomonenlslhaliniliaIizes
GIU acceIeralion and muIlilhreading are oflen inaccessibIe using an HTML5
aIicalion yel, caused by lhe Iack of AIIs lhal suorl lhese hardvare fealures. This
rovides HTML5 aIicalions vilh Iimiled erformance comared lo nalive
aIicalions.Oflen,deveIoersmuslvrilemoreIinesofcodesandusemoreresources
in order lo achieve a funclionaIily lhal vilh a nalive a, can be achieved by vriling
Iess Iines of codes and using Iess resources. This somelimes increases lhe bauery
consumlionoflhemobiIedevice,vhichcanbecruciaIforauser.




16
003434-0053
,*.#8#$5.'\ &.+ ,*@G&$8"848$\

OneoflhemainauracliveoinlabouldeveIoingavebaIicalionislhalilcan
beaccessedfromaviderangeofdevices,buleseciaIIylhefacllhal*.5deveIomenl
rocess can serve a greal range of devices. Thal being said, bolh deveIoers and lhe
usersfaceconsequencesinlermsofconsislencyandcomalibiIily.

HTML5 currenlIy is sliII vorking in rogress, vhich means lhal lhere are no
dehnilive rogramming slandards lo crealing lhe aIicalions. In nalive aIicalion
and olher Rich Inlernel AIicalions (RIAs, incIuding Adobe IIash and Microsofl
SiIverIighl) deveIomenl rocedure, deveIoers can easiIy debug lheir as using lhe
mobiIe OS emuIalors lo lesl for errors and comalibiIily issues for vide range of
oeralingsyslems.SincelhereareonIyfevma|ormobiIeoeralingsyslemslodeveIo
for, nalive aIicalion comalibiIily is rareIy an issue lhal can be hxed easiIy, and for
AdobeIIashandMicrosoflSiIverIighl,asimIeIugincanoeraIIIalformsvilhlhe
samefealures.

The aIicalion comalibiIily is delermined by lhe veb brovsers of lhe mobiIe
devices. CurrenlIy, lhere is a huge diversily vilhin lhe brovser and runlime
environmenl. There are al Ieasl hve ma|or brovsers lhal are mainslream, and lhey aII
oerdierenlHTML5comalibiIily,accordinglolheirovnvebslandards.DeveIoers
oflen exerience lroubIe making decisions vhen deveIoing lheir aIicalions, as lhey
musl be conslanlIy avare of vhich brovsers suorl vhich funclionaIilies. This is
rareIyarobIemfornaliveandRIAdeveIoers,aslheyaredeveIoingaIicalionsfor
eachoeralingsyslems.Onlheolherhand,lhevhoIeuroseofbuiIdingaaIicalion
is lo eIiminale lhe need for muIliIe deveIomenl rocess for dierenl OS Ialforms,
andlhecomalibiIilyissuesareabigobslacIeforlheHTML5aIicaliondeveIomenl.




17
003434-0053
W5'-%8$\ &.+ Q%8?&'\

ComaredlolhereviousversionsoflheHTMLrolocoIs,lheHTML5incIudes
more fealures and conlroI over lhe eIeclronic devices. HTML5 can gain more conlroI
over lhe device's resources, such as lhe GIS Iocalion and IocaI dala slorage. Hovever,
lhe increased caabiIilies of HTML5 changes lhe auack modeI of lhe cyber-criminaIs,
givinglhemnevoorluniliesloexIoillheenhancedfealures.

Olher funclionaIilies lhal have been added in HTML5, such as lhe cross-origin
resource sharing (CORS). This funclionaIily aIIovs a veb server's resources lo be
accessed by a vebage from anolher domain, and is arlicuIarIy usefuI vhen
aggregalingmuIliIeconlenlfromdierenlvebdomains.ThisimIieslhalcommands,
eseciaIIy vriuen in }avaScril, can nov requesl resources from dierenl domains,
vhichimmedialeIygranlsaccessermissionlolheserver.Cyber-criminaIscanuselhe
CORSfealurelogainaccessloaserverandexIoillheaIicalion.

,*.'4-#8*.
ThroughlheinvesligalionoflheusageofHTML5IalforminmobiIeaIicalion
deveIomenl, HTML5 roved lo be lhe Ianguage lhal conlains a series of adalalions
eseciaIIy geared lovards mobiIe devices. Considering lhe facl lhal lhere are more
smarlhones in lhe vorId lhan lhe vorId's lolaI ouIalion, crealing a aIicalion for
mobiIe devices became a Iarge markel, and lo suorl lhe broadesl range of lhese
mobiIe devices, HTML5's funclionaIilies and brand nev AIIs vere very usefuI in
makinglheaIicalionaccessibIe.

There is no doubl lhal lhere is no olher Ialform lhal can dominale lhe mobiIe
aIicalion deveIomenl Iandscae over HTML5 due lo ils oulslanding olimizalion
lovards mobiIe devices and lhe disconlinualion of a ma|or comelilor, Adobe IIash's
mobiIe devices suorl. Hovever, HTML5 aIso had ils avs in lerms of erformance,
consislency, user exerience and user inlerface, and securily. Therefore, aIlhough
18
003434-0053
HTML5 is increasingIy dominaling lhe mobiIe aIicalion deveIomenl aradigm, il
sliIIisanevoIvingIanguagelhalisyellobecomeslabIelosuorllhebroadeslrangeof
mobiIedevicesavaiIabIe.

Il is ossibIe lo lackIe lhe issues lhal arise in HTML5 based mobiIe aIicalion
deveIomenl. To do lhis, deveIoers musl combine muIliIe lechniques lo address lhe
issue by using an aIlernalive rogramming melhod. Crealing an hybrid aIicalion is
one vay of lackIing lhe user exerience issue. DeveIoers can embed lhe HTML5
aIicalions inlo a nalive aIicalion lhal gives lhe fuII user exerience and user
inlerface access lo lhe users. To resoIve lhe erformance degradalions, lhe veb
runlimesareconslanlIybeingudaled,vhichissuIyingenougherformanceover
for ma|orily of lhe mobiIe aIicalions. Il is imorlanl lo nolice lhal mosl mobiIe
aIicalionsdonolrequirelhesameerformanceasaDeskloIC.

TheresloflherobIemssuchassecurilyandcomalibiIilycanonIybesoIvedas
lheHTML5slandardsbecomemoresoIid,vilh|oinleorlsfromW3Cassocialionand
Inlernel rovser comanies. y soIidifying lhe HTML5 slandards and imIemenling
lhem in lhe ma|or brovsers, users viII be abIe lo exerience more slandardized
exeriencevilhHTML5mobiIeaIicalions,andaIsolhedeveIoersviIIbeabIelouse
aIIlheavaiIabIeAIIsandfunclionaIiliesloushlheirmobiIeaslolhemaximum.As
lhe slandards are becoming more soIid, lhe W3C and reIevanl cyber-securily
organizalions musl conlinuousIy invesl lheir lime and eorl in crealing more secure
slrucluremorelheHTML5aIicalions,andlhesecurilyviIIonIygelbeuervilhlime.
In concIusion, HTML5 is fuIIy caabIe of dominaling lhe mobiIe aIicalion
deveIomenl aradigm, bul requires a bil more lime and eorl from reIevanl
organizalionsloslandardizelheIanguage.





19
003434-0053
^8"48*=%&G<\
ArandiIIa,RacheI."WebDesignHislory:IromTheeginning."1slvebdesigner.
1slvebdesigner,2011.Web.24Sel.2013.<hu://vvv.1slvebdesigner.com/
design/veb-design-hislory-from-lhe-beginning/>.
Heburn,Aden."Infograhic:2013MobiIeGrovlhSlalislics+DigilaIuzzIog."
Infograhic:2013MobiIeGrovlhSlalislics+DigilaIuzzIog.DigilaIbuzzIog,
1Ocl.2013.Web.02Aug.2013.<hu://vvv.digilaIbuzzbIog.com/
infograhic-2013-mobiIe-grovlh-slalislics/>.
}angra,ShaiIesh."Sludy+Iun."Sludy+Iun.N..,29Mar.2013.Web.26}uIy2013.<hu://
sludynfun.vordress.com/2013/03/29/|query-vs-a|ax-vs-|avascril/>.
Lee,Chrisloher."WhereHaveAIIlheGohersGone`WhylheWebealGoherinlhe
auIeforIrolocoIMindShare."WhereHaveAIIlheGohersGone`Whylhe
WebealGoherinlheauIeforIrolocoIMindShare.UniversilyofMichigan,
25Ar.2008.Web.09Ieb.2014.<hu://vvv.iIs.unc.edu/caIIee/
goheraer.hlm>.
Mahemo,MichaeI."HTML5vsNalive:TheMobiIeADebale."-AResourcefor
OenWebHTML5DeveIoers.N..,3}une2011.Web.15Ar.2013.<hu://
vvv.hlmI5rocks.com/en/mobiIe/nalivedebale/>.
MuIIins,Roberl."RiseOfHTML5ringsWilhIlSecurilyRisks."NelvorkComuling.
NelvorkComuling,24}an.2012.Web.01}une2013.<hu://
vvv.nelvorkcomuling.com/nexl-gen-nelvork-lech-cenler/rise-of-hlmI5-
brings-vilh-il-securily-ri/232500303>.
"ConlainerIormal."WhalIs`Weboedia,n.d.Web.12}an.2014.<hu://
vvv.veboedia.com/TIRM/C/conlainer_formal.hlmI>.
"HTML5."3.2.5ConlenlModeIs.W3C,n.d.Web.09Ieb.2014.<hu://vvv.v3.org/
TR/2011/WD-hlmI5-20110525/conlenl-modeIs.hlmI>.
"TheHisloryoflheWeb."-W3CWiki.W3C,28}uIy2011.Web.09}an.2014.<hu://
vvv.v3.org/viki/The_hislory_of_lhe_Web>.
"UsinglheVievorlMelaTagloConlroILayoulonMobiIerovsers."MoziIIa
DeveIoerNelvork.MoziIIaDeveIoerNelvork,29Ocl.2013.Web.15Nov.
20
003434-0053
2013.<hus://deveIoer.moziIIa.org/en-US/docs/MoziIIa/MobiIe/
Vievorl_mela_lag>.
"WebDeveIomenl/TheHisloryoflheInlernel."-Wikibooks,OenooksforanOen
WorId.N..,Dec.-}an.2013.Web.12Ocl.2013.<hu://en.vikibooks.org/viki/
Web_DeveIomenl/The_hislory_of_lhe_Inlernel>.

21