HTML5 er ikke kun en vigtig teknologi, men symbolet på den digital kamp, virsomheder skal kæmpe i browseren. Webben smelter sammen med produktet og fremover skal forretnings- og produktudviklingen ske både fysisk og digitalt. Foredrag holdt for DIAG-medlemmer mart 2012 og justeret til Slideshare-brug.

1. Ikke kun en vigtig teknologi
– men kampen i browseren
Forkortet udgave af oplæg holdt for DIAG marts 2012

2. "CIO'en har nu muligheden for at
træde et skridt op og sætte et
afgørende spor på hele forretningen.
En fremsynet CIO kan virkelig drage
fordel af det nye it-landskab og
bidrage med helt nye måder for
forretningen at tjene penge på og nye
måder at bygge relationer med
kunderne,"
Gavin Michael. Global CTO, Accenture
http://www.computerworld.dk/art/214160/derfor-gaar-cio-en-en-gylden-fremtid-i-moede
Mandag den 5. marts 2012

4. Den næste times tid
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover

5. Først...
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover

6. “ We believe the web has won and over
the next several years, the browser, for
economic reasons almost, will become
the platform that matters and certainly
that’s where Google is investing.
Google: Browseren bliver
den foretrukne platform - af
Vic Gundotra, Google Engineering vice president and
økonomiske grunde.
developer evangelist
http://blogs.ft.com/fttechhub/2009/07/app-stores-are-not-the-future-says-google/
#axzz1oFH4iSh2

7. “ Don't bet against the Web. Open
standards have carried the day for a
decade, and are likely to continue to
do so...
Gartner: Du kan ikke vinde
over webben og web
Ray Valdes, Research VP, Gartner
http://www.gartner.com/id=1862015
standards...

8. “
The mobile era is about low power devices, touch interfaces
and open web standards – all areas where Flash falls short.
The avalanche of media outlets offering their content for
Apple’s mobile devices demonstrates that Flash is no longer
necessary to watch video or consume any kind of web
content ...
New open standards created in the mobile era, such as
HTML5, will win on mobile devices (and PCs too).
Steve Jobs 2010: Apple går
med web standards.
Steve Jobs, CEO, Apple
http://www.apple.com/hotnews/thoughts-on-flash/

9. “
The open Web isn’t some “geek-a-demic” tech-fest — it
wasn’t born of developers, by developers, and for
developers. It is a technology wave spawned by the
need to more fully engage and delight an increasingly
demanding customer base. Welcome to your new Web
platform; we advise actively engaging in the open Web
technologies now.
Forrester: Det åbne web er
ikke et spørgsmål om
John R. Rymer, Senior Analyst, Forrester
nørderi - det er fremtiden.
http://blogs.forrester.com/john_r_rymer/12-01-24-
embracing_the_open_web_the_technologies_you_need_to_know

10. 5 grunde til
at HTML5 er vigtig

11. 1
Device
Explosion
Behov for
standarder
Mange devices - mange
skærmstørrelser. Fælles GUI-
standarder er et must, og pt.
leverer browseren denne fælles
platform.

12. 1
Device
Explosion
Behov for
standarder
Det mobile internet vokser
voldsomt - nødvendigheden
af fælles standarder på tværs
af devices lige så.

13. 2
Opbakning
fra de store
spillere
For første gang bakker alle
de store spillere op. Mere
eller mindre i hvert fald.

14. 3
Et rigt
featureset
HTML5 tilbyder kontrol over
video, lyd og grafik på et
Flash-lignende niveau.

15. Aktuel kompatibilitet
4
Support fra
moderne Inkompatibel
browsere 34%
Kompatibel
66%
Browser-supporten er
ganske god. IE har haltet
bagefter, men med IE9 er
Microsoft på omgangshøjde.

16. Inkompatible browsere
4
IE 7
12%
Support fra IE 8
moderne IE 6 41%
browsere 13%
Browser-supporten er
Firefox ganske god. IE har haltet
34% bagefter, men med IE9 er
Microsoft på omgangshøjde.

17. Kompatible browsere
4
Safari
Support fra 24%
Chrome
moderne
26%
browsere
Opera
4%
Firefox Browser-supporten er
46% ganske god. IE har haltet
bagefter, men med IE9 er
Microsoft på omgangshøjde.

18. 5
Enkelt, fælles
standard
Logikken flyttes
til frontend
Desktop/Laptop
Klienten håndterer
mere - bla.
responsive design ift.
skærmstørrelse.

19. 5
Enkelt, fælles
standard
Logikken flyttes
til frontend
Tablet Desktop/Laptop
Klienten håndterer
mere - bla.
responsive design ift.
skærmstørrelse.

20. 5
Enkelt, fælles
standard
Logikken flyttes
til frontend
Smartphone Tablet Desktop/Laptop
Klienten håndterer
mere - bla.
responsive design ift.
skærmstørrelse.

21. 5
Enkelt, fælles
standard
Desktop/Laptop
Et website kan tilpasse
sig brugsscenarier og
være både website
og...

22. 5
Enkelt, fælles
standard
Tablet Desktop/Laptop
- redskab på tablets...

23. 5
Enkelt, fælles
standard
Smartphone Tablet Desktop/Laptop
- og smartphones.

24. Et tilbageblik...
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover
Men for at forstå
Pause
HTML5 må vi se
tilbage på hvad
webben var engang
og skal blive til.

25. HyperTextMarkupLanguage
<tag> Indhold </tag>

26. Ethvert
webdokument...

27. Er defineret af HTML

28. Browser
Billeder HTML CSS JS
HTML er den kode, World Wide Web (HTTP) HTML er ikke en
der knytter forskellige netværksteknologi
TCP
ressourcer sammen i som sådan, men et
noget, vi kan Internet Protocol (IP) opmarkeringsformat.
genkende som Men på mange måder
dokumenter. Ethernet definerer HTML world
wide web.

29. HTML
Som med al teknologi er HTML født
www og formet af nogle behov. HTML
definerer på mange måder, hvad vi
oplever som World Wide Web, og
når behovene ændrer HTML, så
ændrer WWW sig. Det giver igen
anledning til nye idéer som afføder
nye behov, og så fremdeles.
Derfor er HTML et godt billede på,
behov hvordan vi opfatter WWW og ved
at kigge på HTMLs udvikling kan vi
gisne om, hvad WWW er om få år.

30. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
XHTML 1.0
XHTML 1.1
HTML 2.0 HTML 3.2
XHTML 1.2 XHTML 2.0 HTML5
HTML 4.0
HTML 4.01
Kommercielle websites Web 2.0 iPhone Komplekse webservices Cloud
Rich websites
Flash
Datadrevne sites
Google
Web som
Web som kommunikation Web som marketing Web som apps Web som OS
dokumenthåndtering
Historien om HTML er historien om WWW. Fra lange videnskabelige
dokumenter hos CERN til komplekse applikationer i skyen.

31. 1995 1995 1997 1998 1999 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016
Html blev defineret af Tim Berners Lee i 1992. som arbejdede på CERN. Han fandt ud af, at
det var smart at bruge dette opmarkeringssprog til at holde styr på videnskabelige
dokumenter, som flød rundt på computerne på hans arbejdsplads. I 1995 blev HTML 2.0 en
standard.

32. 1995 1995 1997 1998 1999 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016
Verdens første HTML-dokument findes stadig...

33. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
<html>
<body>
<h1>
Theory On The Universe
</h1>
<p>
Bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<p>
Bla bla bla bla bla bla bla bla bla bla bla
</p>
<p>
Bla bla bla bla bla bla bla bla bla bla bla
</p>
</body>
HTML var inspireret af SGML - Standard Generalized Markup Language -
</html>
men blev aldrig en integreret del af den standard. Men ligesom SGML
handlede HTML om struktur - ikke om formattering.

34. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
<html>
<body>
<h1>
Theory On The Universe
</h1>
<p>
Bla bla bla bla bla bla bla bla bla bla bla bla
</p>
<p>
Bla bla bla bla bla bla bla bla bla bla bla
</p>
<p>
Bla bla bla bla bla bla bla bla bla bla bla
</p>
</body>
Det primære mål var </html> dokumenterne op i blokke,
at dele så de
blev mere læselige, og også læselige for maskiner.

35. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Fremfor alt handlede det om at dele dokumenter. Den allervæsentligste feature i html er netop
HYPERLINKET: A (for Anchor). Linket gjorde muligt at opmarkere tekst, som så blev klikbart.
Brugeren af dokumentets browser ville ved klik hente det dokument, der linkedes til - fra den
URL, som var anført i linkets HYPERreference: href...
<a href=”http://server.com/document.html”> Bla </a>

36. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Velkommen til vores hjemmeside
<html>
<body background-color=”#ffffff”>
<h1 font-face=”Times New Roman” font-size=”3” font-
color=”#ff0000”>
<b>Velkommen til vores hjemmeside </b>
</h1>
<p font-face=”Arial” font-color=”#000000”>
Bla bla <b>bla bla bla</b> bla bla <i>bla</i> bla bla bla bla
</p>
Men der gik ikke mange år,font-color=”#000000”> struktur. Det handlede nu ikke
<p font-face=”Arial” så var det ikke nok med
længere om at formidlebla bla i lange bla bla bla
Bla bla bla bla viden bla bla dokumenter, men at skabe små oplevelser -
</p>
online visitkort.
HTML</body> mulighed for font-formattering, animerede giffer, blinkende tekst. Det
4.0 gav
</html> kode og...
gav en rodet

37. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
- desværre blev mulighederne udnyttet til grænsen. Folket ville have
formattering og effekter - ikke blot struktur.

38. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
CSS
body { background-color:#fff; }
h1 { font:24pt ”Times New Roman”; color:#f00; }
p { font:12pt; ”Times New Roman”; color:#f00; }
<html>
<body background-color=”#ffffff”>
<h1>
Velkommen til vores hjemmeside
</h1>
<p>
Bla bla <b>bla bla bla</b> bla bla <i>bla</i> bla bla bla bla
Cascading Stylesheet trak formatteringen ud af dokumentet og afhjalp
</p>
problemet med den blandede opmarkering og formatteringskode.
<p>
Bla bla bla bla bla bla bla bla bla bla bla
</p>
</body>
</html>

39. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Men en ny “breed” af webdesignere kom til. De, der før havde arbejdet med print og
film. Og ligesom man i starten af 1900-tallet ikke havde fantasti til at forestille sig
biler, der ikke lignede hestevogne, begyndte man for alvor at forlange, at webben
skulle ligne print og film.

40. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Flash sites blev uhyre populære. De så godt ud og tilbød en lille filmisk oplevelse.
Men de var ikke en del af det åbne web som sådan. Søgemaskinerne havde svært ved
at indeksere dem, og desværre var brugervenligheden på de fleste af dem elendig.

41. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
I dette eksempel lancerede man f.eks en ny type likør på et typisk kampagnesite i
Flash, men bekymrede sig ikke om, om likøren indgik i opskrifter på verdens største
cocktail-sites eller fandtes på Google.

42. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Mange websites blev øer -
helt frakoblet resten af www.
Godt så det ud - men ikke
mange besøgende kom forbi.
Websitet som en ø

43. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
To bevægelser tegnede sig:
De, der så websitet som en
selvstændig produktion og
de, der så websitet som en
del af et hele.
Websitet som en ø Websitet som en del af
world wide web

44. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Rich Media Web Standards
Og teknologivirksomhederne valgte - mere eller mindre - også side. Proprietært eller åbne
standarder. Efter at Google begyndte at definere webbens økonomi baseret på links var det
tydeligt, at det åbne paradigme gav mest mening.

45. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Steve Jobs gav dog Flash - og
andre proprietære
browserteknologier -
dødstødet med sine Thoughts
On Flash i 2010. Apple vil
aldrig understøtte Flash på
sine mobile devices, sagde
Jobs.

46. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Adobe meldte i 2011 ud, af
Flash for mobil var dødt - der
vil ikke ske mere udvikling. Til
gengæld er Adobe-redskaber
til HTML5 på vej. Bl.a. Adobe
EDGE. Flash-teknologi lever
videre på desktop-browseren
og form af FLEX og AIR.
Men vi spår ikke Flash en stor
fremtid isoleret til
desktoppen. Det mobile
paradigme fører an, og der er
få eller ingen grunde til at
udvikle i Flash.

47. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
HTML5 har været været på
vej fra kulisserne fra 2004.
Ikke fra W3C i første omgang,
men fra WHATWG, som er en
sammenslutning af
browserproducenter. Selvom
HTML5 ikke er en færdig
standard er det helt sikkert, at
webben vil handle om HTML5
de næste år.

48. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
- bl.a. fordi HTML5 er:
‘Rich’
Simpelt
Bagudkompatibelt
Semantisk

49. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
HTML5 går skridtet videre fra <div>...</div>
tidligere versioner og gør det
endnu nemmere for en
maskine at afkode struktur og
<div>...</div>
semantik i dokumentet...
Hvor HTML4 ikke bekymrede
<div>...</div>
sig om indholdet i <div>...</div>
dokumentets forskellige
afsnit....

50. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
<header>...</header>
<video>...</video>
- indfører HTML5 nye tags,
der giver semantisk mening. <article>...</article>
Det er søgemaskinerne glade
for. <footer>...</footer>

51. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
<header>...</header>
<video>...</video>
<article>...</article>
Google kan hermed vurdere, <footer>...</footer>
hvilke elementer, der er
interessante at indeksere, og
hvilke der ikke er.

52. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Udseende
CSS3
Struktur
HTML5
HTML5 er dog ikke kun HTML.
HTML5 kan betragtes som en
treenighed, hvor HTML’en udgør
rygraden. CSS fortæller browseren,
hvordan det hele skal sættes
visuelt sammen og Javascript virker JAVASCRIPT Interaktion
ind på HTML’ens Domain Object
Model, transformerer, beregner og
henter og sender data til HTML’en.

53. Fra dokument til applikation
Med CSS og JS handler HTML5 om mere, end blot struktur. HTML har
ændret sig fra et opmarkeringssprog til en applikationsplatofrm.

54. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015
Google
Chrome’s App
Store er et
eksempel på at
software flytter
ud i skyen.
Browseren
bliver måske
det nye OS og
applikationer
lever på
webben.

55. Webben kan allerede nu betragtes
som en computer - frontend leveres
af browserteknologier og regnekraft
og storage findes hos en buket af
udbydere.
Frontend
Local Storage Cloud Storage
Local Computin
g
Windows Azure Cloud
g
Computin

56. Hvor cloud-computing og cloud-
storage ikke kan betragtes som
modent på enterprise-niveau, så er
frontend. Interfacet går altså mellem
enterprise-løsninger og smart-
clients i brugerens browser.
Frontend
Local Storage Enterprise
Local Computin
g Storage
es
Mainfram

57. Digital produktudvikling
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover

58. Oplevet
ydelse
Digital
service
Kerneydelse Diffentierer
Engagerer
Genererer data
Digitale services er vigtigere end
nogensinde. Et brand, der ikke kan
tilbyde værdiskabende, digitale
services er ikke til stede i browseren
eller i det sociale web. Nike, Danske
Bank, Starbucks er i blandt dem, der
satser på digital forretning.

59. Digital forretningsudvikling bliver
lige så vigtig en del af Oplevet
virksomhedens strategi, som
udvikling af kerneydelsen.
ydelse
Og digital forretningsudvikling
kræver kendskab til frontend - for
det er her gummiet møder vejen.
Digital
service
Kerneydelse Diffentierer
Engagerer
Genererer data
Digital
forretnings
udviklin g

60. Franske Withings er i færd med at
kuppe markedet for hjemme-
helseprodukter ved at tilbyde
integrerede løsninger, der er født
ind i webben.

61. Withings første produkt -
badevægten - er ikke bare et
fysisk produkt...

62. - men er et fysisk produkt koblet til
en sky af digitale services, som igen
kobler produkt og oplevelse til det
sociale web.

63. $0
.0
$1
$20
Udover at være nyskabende og
elegant er det også en fantastisks
forretningsmodel, hvor de marginale
omkostninger går mod nul på de
services, som der integreres til.
Dette produkt forbedres løbende,
efterhånden som tredjepart udvikler
deres services.

64. Hvad så nu?
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover

65. 10 x 10 x 10
Det tager 10 mand 10 måneder og 10 millioner.
Typisk IT udviklingsparadigme hos mange større virksomheder
Kan danske IT-tunge virksomheder gøre det
samme som Withings?
Ikke med dette paradigme. Virksomheder skal
ændre den måde, de bruger data på...

66. Forretning
Digital produktudvikling
Kundeservice KAOS
Agilitet
Dag-til-dag ændringer
Digital forretningsudvikling stoppes i dag i mange
virksomheder af rigide “data-siloer”. Forretningen
Monolitisk, kan ikke operere på data eller bruge dem aktivt, da
hårdt koblet løsning. data er forankret dybt i organisationen. Manglende
En silo støbt i beton. lagdeling gør det umuligt at drive forretning på
data og at udvikle datadrevne services til
forbrugerne.
Enterprise IT
Sikkerhed
Stabilitet PRINCE II
Code freeze
Legacy

67. Forretning
Digital produktudvikling
Kundeservice KAOS
Agilitet
Dag-til-dag ændringer
En datastrategi, der kan sikre muligheden for at
forretningen kan bruge frontend fuldt ud til at
Monolitisk, levere digitale ydelser til forbrugeren starter med
hårdt koblet løsning. at sikre lagdeling.
En silo støbt i beton. IT skal facilitere forretningens behov for data, men
sikre sig, at de to paradigmer (IT og web) kan leve
side om side.
Enterprise IT
Sikkerhed
Stabilitet PRINCE II
Code freeze
Legacy

68. Forretning
Digital produktudvikling
Rich HTML5 clients Kundeservice KAOS
Best-of-breed Agilitet
Social Media
Dag-til-dag ændringer
Apps
Marketing automation
API’er der sikrer at smartclients og operationelle
CMS / PORTALER systemer (CMS / Marketing automation) kan tilgå
data skal implementeres. Det er for sent at starte,
XML / JSON
når forretningens behov viser sig.
API API WEBSERVICES
DB2
UNIX
ORACLE
Enterprise IT
ERP/CRM Sikkerhed
Stabilitet PRINCE II
Code freeze
Legacy

69. Staff-up
Frontend-udviklere m/ backend-forståelse
Rich HTML5 clients Webanalytikere
Best-of-breed Digitale konceptudviklere
Social Media User Experience designere
Apps
Marketing automation
CMS / PORTALER
API API Kompetenceudvikling
Agile processer
DB2 Frontend-forståelse
UNIX SOA
ORACLE
ERP/CRM Organisationsændringer vil følge. En virksomhed,
der vil kaste sig ud i digital forretningsudvikling,
og som forstår nødvendigheden af at tilbyde
digitale services via browseren skal tænke som et
start-up.

70. Afrunding
Go do’s og diskussion
Hvorfor tale om HTML5?
Datastrategi og overlevelse
i det 21. århundrede.
HTML og web før, nu
og fremover

71. HTML5 definerer et nyt,
stærkt webparadigme

72. CMS / PORTALER
API API
Ét rigt interface til alle enheder. Uanset brand og OS.
Kampen om differentiering og marked bliver en kamp i browseren.
Forretningen skal tænke digitalt og agilt - forberedelserne starter nu.

73. 4 go do’s
1. Tag stilling til frontend - hvordan har den betydning for mit
brand, min ydelser og min organisation?
2. Kortlæg hvordan IT kan være med til at understøtte det nye
webparadigme, som beskrevet i dag.
3. Identificér forretningskritiske data og gør dem tilgængelig for
forretning og marketing.
4. I har en IT strategi. Tilføj en digital strategi, der beskriver
brugen af eksisterende data til forbedring af produkt, service
og markedsføring.

74. Er HTML5 af strategisk
betydning?
Giver begrebet
digital produktudvikling
mening?
Har I en “give
data-back” strategi?
Hvem er den
digitale udfordrer i
din branche?
...og hvad vil du Har I en frontend-
gøre ved det? strategi? Eller er
teknologivalg op til den
enkelte indkøber?

75. Mads Gustafsen Klaus Silberbauer
Tak
Managing Director Creative Director
mads.gustafsen@thinkdigital.dk klaus.silberbauer@thinkdigital.dk
31 64 01 00 31 64 01 01