HTML5, Kampen i browseren

Ikke kun en vigtig teknologi – men kampen i browseren

Forkortet udgave af oplæg holdt for DIAG marts 2012

"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-moedeMandag den 5. marts 2012

Hvorfor tale om HTML5?

HTML og web før, nu og fremover

Datastrategi og overlevelsei det 21. århundrede.

Go do’s og diskussion




Den næste times tid







Først...

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.

“

Vic Gundotra, Google Engineering vice president and developer evangelisthttp://blogs.ft.com/fttechhub/2009/07/app-stores-are-not-the-future-says-google/#axzz1oFH4iSh2

Google: Browseren bliver den foretrukne platform - af økonomiske grunde.

Ray Valdes, Research VP, Gartnerhttp://www.gartner.com/id=1862015

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 standards...

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, CEO, Applehttp://www.apple.com/hotnews/thoughts-on-flash/

Steve Jobs 2010: Apple går med web standards.

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.

“

John R. Rymer, Senior Analyst, Forresterhttp://blogs.forrester.com/john_r_rymer/12-01-24-embracing_the_open_web_the_technologies_you_need_to_know

Forrester: Det åbne web er ikke et spørgsmål om nørderi - det er fremtiden.

5 grunde til at HTML5 er vigtig

Device ExplosionBehov for standarder

1

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

Device ExplosionBehov for standarder

1

Det mobile internet vokser voldsomt - nødvendigheden af fælles standarder på tværs af devices lige så.

Opbakning fra de store spillere

2

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

Et rigtfeatureset

3

HTML5 tilbyder kontrol over video, lyd og grafik på et Flash-lignende niveau.

Kompatibel66%

Inkompatibel34%

Aktuel kompatibilitet

Support framodernebrowsere

4

Browser-supporten er ganske god. IE har haltet bagefter, men med IE9 er Microsoft på omgangshøjde.

IE 841%

Firefox34%

IE 613%

IE 712%

Inkompatible browsere


4



4Safari24%

Firefox46%

Opera4%

Chrome26%

Kompatible browsere


Desktop/Laptop

Enkelt, fælles standardLogikken flyttes til frontend

5

Klienten håndterer mere - bla. responsive design ift. skærmstørrelse.

Desktop/LaptopTablet


5


Desktop/LaptopTabletSmartphone


5


Desktop/Laptop

Enkelt, fælles standard

5

Et website kan tilpasse sig brugsscenarier og være både website og...

Desktop/LaptopTablet


5

- redskab på tablets...

Desktop/LaptopTabletSmartphone


5

- og smartphones.






Et tilbageblik...

PauseMen for at forstå HTML5 må vi se tilbage på hvad webben var engang og skal blive til.

HyperTextMarkupLanguage<tag> Indhold </tag>

Ethvert webdokument...

Er defineret af HTML

Ethernet

World Wide Web (HTTP)

Internet Protocol (IP)

TCP

Browser

HTMLBilleder CSS JS

HTML er ikke en netværksteknologi som sådan, men et opmarkeringsformat. Men på mange måder definerer HTML world wide web.

HTML er den kode, der knytter forskellige ressourcer sammen i noget, vi kan genkende som dokumenter.

www

HTML

behov

Som med al teknologi er HTML født 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å, hvordan vi opfatter WWW og ved at kigge på HTMLs udvikling kan vi gisne om, hvad WWW er om få år.

HTML 2.0 HTML 3.2

HTML 4.0HTML 4.01

HTML5

XHTML 1.0

XHTML 2.0

XHTML 1.1

XHTML 1.2

Web som dokumenthåndtering

Kommercielle websites

Rich websitesFlash

Datadrevne sites

iPhone

Google

Web som appsWeb som kommunikation Web som OSWeb som marketing

Web 2.0 CloudKomplekse webservices

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

Historien om HTML er historien om WWW. Fra lange videnskabelige dokumenter hos CERN til komplekse applikationer i skyen.

1995 1997 1998 1999 2001 2005 2007 20122002 2003 2004 2006 2008 2009 2010 20111995 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.

1995 1997 1998 1999 2001 2005 2007 20122002 2003 2004 2006 2008 2009 2010 20111995 2013 2014 2015 2016

Verdens første HTML-dokument findes stadig...

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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>

HTML var inspireret af SGML - Standard Generalized Markup Language - men blev aldrig en integreret del af den standard. Men ligesom SGML handlede HTML om struktur - ikke om formattering.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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>Det primære mål var at dele dokumenterne op i blokke, så de

blev mere læselige, og også læselige for maskiner.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

<a href=”http://server.com/document.html”> Bla </a>

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...

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

<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> <p font-face=”Arial” font-color=”#000000”> Bla bla bla bla bla bla bla bla bla bla bla </p> </body></html>

Velkommen til vores hjemmeside

Men der gik ikke mange år, så var det ikke nok med struktur. Det handlede nu ikke længere om at formidle viden i lange dokumenter, men at skabe små oplevelser - online visitkort. HTML 4.0 gav mulighed for font-formattering, animerede giffer, blinkende tekst. Det gav en rodet kode og...

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

- desværre blev mulighederne udnyttet til grænsen. Folket ville have formattering og effekter - ikke blot struktur.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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 </p> <p> Bla bla bla bla bla bla bla bla bla bla bla </p> </body></html>

Cascading Stylesheet trak formatteringen ud af dokumentet og afhjalp problemet med den blandede opmarkering og formatteringskode.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

Websitet som en ø

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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 ø

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

Websitet som en del afworld wide web

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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

‘Rich’SimpeltBagudkompatibeltSemantisk

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

- bl.a. fordi HTML5 er:

<div>...</div>

<div>...</div>

<div>...</div>

<div>...</div>

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

HTML5 går skridtet videre fra tidligere versioner og gør det endnu nemmere for en maskine at afkode struktur og semantik i dokumentet...

Hvor HTML4 ikke bekymrede sig om indholdet i dokumentets forskellige afsnit....

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

<header>...</header>

<video>...</video>

<article>...</article>

<footer>...</footer>

- indfører HTML5 nye tags, der giver semantisk mening. Det er søgemaskinerne glade for.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

<header>...</header>

<video>...</video>

<article>...</article>

<footer>...</footer>Google kan hermed vurdere, hvilke elementer, der er interessante at indeksere, og hvilke der ikke er.

JAVASCRIPT

HTML5

CSS3

Struktur

Udseende

Interaktion

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 2012 2013 2014 2015

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 ind på HTML’ens Domain Object Model, transformerer, beregner og henter og sender data til HTML’en.

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.

1995 1997 1998 1999 2000 2004 2006 20112001 2002 2003 2005 2007 2008 2009 20101996 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.

FrontendLocal Storage

Local Computing

Windows Azure Cloud

Computing

Cloud Storage

Webben kan allerede nu betragtes som en computer - frontend leveres af browserteknologier og regnekraft og storage findes hos en buket af udbydere.

FrontendLocal Storage

Local Computing

Mainframes

Enterprise Storage

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.





Digital produktudvikling

Kerneydelse

DigitalserviceDiffentiererEngagererGenererer data

Oplevet ydelse

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.

Kerneydelse

DigitalserviceDiffentiererEngagererGenererer data

Oplevet ydelse

Digital forretningsudvikling

Digital forretningsudvikling bliver lige så vigtig en del af virksomhedens strategi, som udvikling af kerneydelsen.

Og digital forretningsudvikling kræver kendskab til frontend - for det er her gummiet møder vejen.

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.

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

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

$20

$1

$0.0

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.






Hvad så nu?

10 x 10 x 10Det 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å...

Enterprise ITSikkerhedStabilitetCode freezeLegacy

ForretningDigital produktudviklingKundeserviceAgilitetDag-til-dag ændringer

Monolitisk, hårdt koblet løsning. En silo støbt i beton.

KAOS

PRINCE II

Digital forretningsudvikling stoppes i dag i mange virksomheder af rigide “data-siloer”. Forretningen kan ikke operere på data eller bruge dem aktivt, da data er forankret dybt i organisationen. Manglende lagdeling gør det umuligt at drive forretning på data og at udvikle datadrevne services til forbrugerne.


Monolitisk, hårdt koblet løsning. En silo støbt i beton.


KAOS

PRINCE II

En datastrategi, der kan sikre muligheden for at forretningen kan bruge frontend fuldt ud til at levere digitale ydelser til forbrugeren starter med at sikre lagdeling.IT skal facilitere forretningens behov for data, men sikre sig, at de to paradigmer (IT og web) kan leve side om side.


DB2UNIX

ORACLEERP/CRM

Rich HTML5 clientsBest-of-breed

Social MediaApps

Marketing automation

CMS / PORTALER

API API


WEBSERVICES

XML / JSON

KAOS

PRINCE II

API’er der sikrer at smartclients og operationelle systemer (CMS / Marketing automation) kan tilgå data skal implementeres. Det er for sent at starte, når forretningens behov viser sig.

DB2UNIX

ORACLEERP/CRM

Rich HTML5 clientsBest-of-breed

Social MediaApps

Marketing automation

CMS / PORTALER

Staff-upFrontend-udviklere m/ backend-forståelseWebanalytikereDigitale konceptudviklereUser Experience designere

Agile processerFrontend-forståelseSOA

KompetenceudviklingAPI API

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.




Go do’s og diskussionGo do’s og diskussion

Afrunding

HTML5 definerer et nyt, stærkt webparadigme

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.

4 go do’s1. 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.

Giver begrebet digital produktudvikling

mening?

Er HTML5 af strategisk betydning?

Har I en “give data-back” strategi?

Hvem er den digitale udfordrer i

din branche? ...og hvad vil du gøre ved det?

Har I en frontend-strategi? Eller er

teknologivalg op til den enkelte indkøber?

TakMads Gustafsen

Managing Director

[email protected] 64 01 00

Klaus SilberbauerCreative Director

[email protected] 64 01 01

Business

HTML5, Kampen i browseren