O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

HTML5, Kampen i browseren

3.446 visualizações

Publicada em

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.

Publicada em: Negócios

HTML5, Kampen i browseren

  1. 1. Ikke kun en vigtig teknologi – men kampen i browserenForkortet udgave af oplæg holdt for DIAG marts 2012
  2. 2. "CIOen 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, Accenturehttp://www.computerworld.dk/art/214160/derfor-gaar-cio-en-en-gylden-fremtid-i-moedeMandag den 5. marts 2012
  3. 3. Den næste times tid Go do’s og diskussionHvorfor tale om HTML5? Datastrategi og overlevelse i det 21. århundrede. HTML og web før, nu og fremover
  4. 4. Først... Go do’s og diskussionHvorfor tale om HTML5? Datastrategi og overlevelse i det 21. århundrede. HTML og web før, nu og fremover
  5. 5. “ 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
  6. 6. “ Dont 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...
  7. 7. “ 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/
  8. 8. “ 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
  9. 9. 5 grunde tilat HTML5 er vigtig
  10. 10. 1DeviceExplosionBehov forstandarder Mange devices - mange skærmstørrelser. Fælles GUI- standarder er et must, og pt. leverer browseren denne fælles platform.
  11. 11. 1DeviceExplosionBehov forstandarder Det mobile internet vokser voldsomt - nødvendigheden af fælles standarder på tværs af devices lige så.
  12. 12. 2Opbakningfra de storespillere For første gang bakker alle de store spillere op. Mere eller mindre i hvert fald.
  13. 13. 3Et rigtfeatureset HTML5 tilbyder kontrol over video, lyd og grafik på et Flash-lignende niveau.
  14. 14. Aktuel kompatibilitet 4Support framoderne Inkompatibelbrowsere 34% Kompatibel 66% Browser-supporten er ganske god. IE har haltet bagefter, men med IE9 er Microsoft på omgangshøjde.
  15. 15. Inkompatible browsere 4 IE 7 12%Support fra IE 8moderne IE 6 41%browsere 13% Browser-supporten er Firefox ganske god. IE har haltet 34% bagefter, men med IE9 er Microsoft på omgangshøjde.
  16. 16. Kompatible browsere 4 SafariSupport fra 24% Chromemoderne 26%browsere Opera 4% Firefox Browser-supporten er 46% ganske god. IE har haltet bagefter, men med IE9 er Microsoft på omgangshøjde.
  17. 17. 5Enkelt, fællesstandardLogikken flyttestil frontend Desktop/LaptopKlienten håndterermere - bla.responsive design ift.skærmstørrelse.
  18. 18. 5Enkelt, fællesstandardLogikken flyttestil frontend Tablet Desktop/LaptopKlienten håndterermere - bla.responsive design ift.skærmstørrelse.
  19. 19. 5Enkelt, fællesstandardLogikken flyttestil frontend Smartphone Tablet Desktop/LaptopKlienten håndterermere - bla.responsive design ift.skærmstørrelse.
  20. 20. 5Enkelt, fællesstandard Desktop/LaptopEt website kan tilpassesig brugsscenarier ogvære både websiteog...
  21. 21. 5Enkelt, fællesstandard Tablet Desktop/Laptop- redskab på tablets...
  22. 22. 5Enkelt, fællesstandard Smartphone Tablet Desktop/Laptop- og smartphones.
  23. 23. Et tilbageblik... Go do’s og diskussionHvorfor 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.
  24. 24. HyperTextMarkupLanguage <tag> Indhold </tag>
  25. 25. Ethvertwebdokument...
  26. 26. Er defineret af HTML
  27. 27. Browser Billeder HTML CSS JSHTML er den kode, World Wide Web (HTTP) HTML er ikke ender knytter forskellige netværksteknologi TCPressourcer sammen i som sådan, men etnoget, vi kan Internet Protocol (IP) opmarkeringsformat.genkende som Men på mange måderdokumenter. Ethernet definerer HTML world wide web.
  28. 28. HTML Som med al teknologi er HTML fødtwww 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.
  29. 29. 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.1HTML 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.
  30. 30. 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.
  31. 31. 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...
  32. 32. 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.
  33. 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> 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.
  34. 34. 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>
  35. 35. 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
  36. 36. 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.
  37. 37. 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>
  38. 38. 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.
  39. 39. 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.
  40. 40. 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.
  41. 41. 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 ø
  42. 42. 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
  43. 43. 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.
  44. 44. 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.
  45. 45. 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.
  46. 46. 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.
  47. 47. 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
  48. 48. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015HTML5 går skridtet videre fra <div>...</div>tidligere versioner og gør detendnu nemmere for enmaskine at afkode struktur og <div>...</div>semantik i dokumentet...Hvor HTML4 ikke bekymrede <div>...</div>sig om indholdet i <div>...</div>dokumentets forskelligeafsnit....
  49. 49. 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 gladefor. <footer>...</footer>
  50. 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> <article>...</article>Google kan hermed vurdere, <footer>...</footer>hvilke elementer, der erinteressante at indeksere, oghvilke der ikke er.
  51. 51. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 Udseende CSS3 Struktur HTML5HTML5 er dog ikke kun HTML.HTML5 kan betragtes som entreenighed, hvor HTML’en udgørrygraden. CSS fortæller browseren,hvordan det hele skal sættesvisuelt sammen og Javascript virker JAVASCRIPT Interaktionind på HTML’ens Domain ObjectModel, transformerer, beregner oghenter og sender data til HTML’en.
  52. 52. 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.
  53. 53. 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015GoogleChrome’s AppStore er eteksempel på atsoftware flytterud i skyen.Browserenbliver måskedet nye OS ogapplikationerlever påwebben.
  54. 54. 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 StorageLocal Computin g Windows Azure Cloud g Computin
  55. 55. 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 EnterpriseLocal Computin g Storage es Mainfram
  56. 56. Digital produktudvikling Go do’s og diskussionHvorfor tale om HTML5? Datastrategi og overlevelse i det 21. århundrede. HTML og web før, nu og fremover
  57. 57. Oplevet ydelse Digital serviceKerneydelse 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.
  58. 58. Digital forretningsudvikling bliverlige så vigtig en del af Oplevetvirksomhedens strategi, somudvikling af kerneydelsen. ydelseOg digital forretningsudviklingkræver kendskab til frontend - fordet er her gummiet møder vejen. Digital serviceKerneydelse Diffentierer Engagerer Genererer data Digital forretnings udviklin g
  59. 59. Franske Withings er i færd med atkuppe markedet for hjemme-helseprodukter ved at tilbydeintegrerede løsninger, der er fødtind i webben.
  60. 60. Withings første produkt -badevægten - er ikke bare etfysisk produkt...
  61. 61. - men er et fysisk produkt koblet tilen sky af digitale services, som igenkobler produkt og oplevelse til detsociale web.
  62. 62. $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.
  63. 63. Hvad så nu? Go do’s og diskussionHvorfor tale om HTML5? Datastrategi og overlevelse i det 21. århundrede. HTML og web før, nu og fremover
  64. 64. 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å...
  65. 65. 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, dahårdt koblet løsning. data er forankret dybt i organisationen. ManglendeEn 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
  66. 66. 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 medhå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
  67. 67. Forretning Digital produktudvikling Rich HTML5 clients Kundeservice KAOS Best-of-breed Agilitet Social Media Dag-til-dag ændringer AppsMarketing 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
  68. 68. Staff-up Frontend-udviklere m/ backend-forståelse Rich HTML5 clients Webanalytikere Best-of-breed Digitale konceptudviklere Social Media User Experience designere AppsMarketing 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.
  69. 69. Afrunding Go do’s og diskussionHvorfor tale om HTML5? Datastrategi og overlevelse i det 21. århundrede. HTML og web før, nu og fremover
  70. 70. HTML5 definerer et nyt, stærkt webparadigme
  71. 71. 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.
  72. 72. 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.
  73. 73. Er HTML5 af strategisk betydning? Giver begrebet digital produktudvikling mening? Har I en “give data-back” strategi? Hvem er dendigitale 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?
  74. 74. Mads Gustafsen Klaus Silberbauer Tak Managing Director Creative Directormads.gustafsen@thinkdigital.dk klaus.silberbauer@thinkdigital.dk 31 64 01 00 31 64 01 01

×