Artikel top billede

(Foto: Computerworld)

Koden til fremtidens internet er klar til brug

Fremtidens internet tager form. Den nye HTML-standard, version 5, ligger klar og kan allerede benyttes i de eksiste-rende browsere, selv om den ikke er endelig godkendt. Men hvorfor ikke kaste sig ud i det nye? Her får du en introduktion til HTML5 og andre websprog.

Af Michell Cronberg, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Bag ved alle internetsider gemmer der sig en HTML-kode. Der har været arbejdet på en opdatering til den gode, gamle HTML 4.01 i snart 10 år. Først uden for standardiseringsorganisationen W3C (World Wide Web Consortium) i en mindre organisation kaldet WHATWG (Web Hypertext Application Technology Working Group) bestående af blandt andet Apple, Mozilla og Opera og senere i parløb med W3C.

Oprindeligt var planen, at HTML5 først skulle frigives langt ude i fremtiden (2022), men pres fra mange sider har fået WC3 til at ændre planerne og allokere flere ressourcer, så standarden kan blive færdig. Ifølge ’Plan 2014’ skal HTML5 splittes op i en HTML 5.0 til endelig frigivelse i slutningen af 2014 og HTML 5.1 til frigivelse i 2016. Det gøres blandt andet ved at trække flere HTML5-elementer ud i mindre moduler, og frigive disse senere.

Det er vigtigt, at standarden bliver færdig set ud fra både et politisk og juridisk synspunkt, men set fra udviklernes og brugernes syns-punkt har en frigivelse reelt ikke den store betydning. Det meste af HTML5 er allerede implementeret i de store browsere (både desktop og mobil), og det er i realiteten bare at dykke ned og hente guldet. Men hvad er der så i skattekisten mærket med HTML5?

Bedre semantik

HTML5 tilføjer flere nye opmærkninger (tags). Der er en del semantiske opmærkninger, der har til formål at beskrive en HTML-side – herunder opmærkninger som header (samling af overskrifter), nav (beskrivelse af en menu), section og article (opdeling af en side) samt footer. De nye semantiske opmærkninger bruges til at give et bedre overblik, samt gør det nemmere at arbejde med siden programme-ringsmæssigt.

Der findes også nye opmærkninger, der decideret tilføjer browsere en helt ny funktionalitet. Eksempelvis giver både video- og audio-opmærkningerne mulighed for at afspille video og lyd og overflødiggør med tiden plugins som eksempelvis Flash og Silverlight. Såvel video som audio kan styres både af indbyggede afspillere og gennem et JavaScript API. De store browsere kan i dag alle håndtere video og audio, men det kan fortsat være lidt en jungle at finde et videoformat, som virker i alle browsere på alle platforme.

Nye kontroller til formularer

HTML5 indeholder en del nye forskellige kontroller til formularer. Tidligere har det for eksempel kun været muligt at benytte en standard tekstboks, men HTML5 tilføjer ”specifikke” tekstbokse, så der eksempelvis kan vælges datoer på en kalender, farver på en farvepalet eller tal på en slider.

Der er ligeledes tekstbokse relateret til numre og e-mail-adresser, og input kan valideres automatisk. Ved hjælp af et JavaScript API kan valideringen udbygges yderligere, og CSS kan sørge for selv at give kontroller samt fejlmeddelelser det ønskede udseende. Nogle browsere er meget langt med implementeringen af de nye form-elementer, men der er en del, som fortsat hænger noget i bremsen.

Online og offline

Et af de problemer man i dag har med at udvikle mobile løsninger til afvikling i en browser er offlinesupport. Når telefonen falder af nettet, dør applikationen. I HTML5 bliver dette løst ved hjælp af forskellige nye JavaScript API’er, der gør det muligt at gemme data på brugerens lokale maskine.

En applikation, der eksempelvis bruges til at aflæse fra en vandmåler dybt nede i en kælder, kan dermed persistere data lokalt på tele-fonen og synkronisere med serveren, når applikationen mærker den er på nettet igen.

Alle de nyeste browsere giver mulighed for at gemme data tidsubegrænset (local storage) og inden for en session (session storage), og browserne har forskellige grænser for, hvor meget data der gemmes for hvert domæne. Flere af browserne (herunder Chrome) har dog i skrivende stund flere sikkerhedshuller, som gør det muligt at fylde brugerens disk op med data uden dennes viden.

HTML5 stiller forskellige JavaScript API’er til rådighed, som giver mulighed for at få informationer fra det underliggende operativsy-stem. Eksempelvis kan man med File API arbejde med filer, som brugeren stiller til rådighed for applikationen (eksempelvis via træk og slip, der også er åbnet mulighed for). Således kan en

HTML5-applikation behandle data fra en tekstfil som eksempelvis en XML- eller kommasepareret fil. Yderligere er det ved hjælp af et geolokaliseringsobjekt nemt at få en længde- og breddegrad, hastighed samt højde, og det åbner naturligvis en masse muligheder for mobile HTML5-applikationer. Såvel File- som geolokaliserings-API’erne er sup-porterede i alle browsere i dag bortset fra enkelt mobile browsere.

Genvej til fuld duplex

Kommunikation mellem browser og server er traditionelt sket ved hjælp af den simple http-protokol (request og response), og det har skabt en del forskellige kreative løsninger, når der eksempelvis i HTML og JavaScript skulle kodes en chat-applikation, som egentlig kræver live-kommunikation.

HTML5 indeholder en ny mulighed for at skabe ægte to-vejs- og fuld duplex-kommunikation mellem browser og server. Det åbner en masse muligheder for nye typer af applikationer, fordi serveren nu kan pushe data ned i browseren uden at denne behøver foretage en forespørgsel.

Kommunikationen sker ved hjælp af et nyt JavaScript API kaldet WebSockets og er allerede implementeret i de store desktop-browsere. Der er kun nogle få mobile browsere som endnu ikke supporterer WebSockets.

JavaScript er enkelttrådet, hvilket er et problem i ”browser-applikationer”, som skal gøre en masse ting samtidig. Sproget indeholder forskellige asynkrone metoder, men kode kan i praksis ikke afvikles på samme tid. Derfor indeholder HTML5 såkaldte web works, som giver mulighed for at afvikle kode i tråde for sig selv. Det giver blandt andet mulighed for at rendere grafik eller foretage komplekse beregninger, mens hovedtråden holder styr på brugerfladen. Web Workers er som WebSockets allerede implementeret i alle browsere bortset fra enkelte mobile browsere.

Fuldt blus på grafikken

Endelig er HTML udvidet kraftigt, når det handler om at skabe grafik. Der er implementeret en stor SVG-motor, som via opmærkninger samt JavaScript kan skabe en dynamisk, skalerbar og vektorbaseret brugerflade. Det bliver i dag blandt andet brugt til at skabe interaktiv datavisualisering.

Yderligere kan et nyt objekt, kaldet Canvas, bruges til at skabe lynhurtig dynamisk grafik udelukkende ved hjælp af JavaScript. Canvas-objektet er kraftigt nok til at skabe imponerende spil og animationer. Såvel SVG som Canvas er allerede i samtlige browsere og vil sikkert med tiden udfylde hullerne efter den døende Flash-teknologi.

HTML 5.x er med andre ord en stor skattekiste med masser af muligheder for at skabe nye, effektive applikationer, der afvikles direkte i browseren – og især de mobile browsere åbner en masse muligheder for nye forretningsmuligheder.

Meget af HTML5 er i realiteten en stor samling nye JavaScript API’er, der stilles til rådighed som en ny skinnende værktøjskasse for arkitekter og udviklere. Men det er paradoksalt, at JavaScript oprindeligt slet ikke er skabt til at drive store applikationer, og med den nye værktøjskasse bliver afhængighe-den af JavaScript endnu større.

Det lægger pres på ECMA, som arbejder på den næste version af ECMAScript (version 6), hvor blandt andet klasser og moduler skulle blive introduceret, og de store spillere i markedet arbejder også på nye programmeringssprog relateret til webbet. Det er ikke tilfældigt, at der inden for de sidste par år er introduceret sprog som TypeScript (Microsoft) og Dart (Google).

Oprindelig bestod HTML af opmærkninger, som udover at beskrive selve indholdet også til en vis grad kunne fortælle en browser, hvordan indholdet skulle vises. I moderne HTML-design lader man så vidt muligt opmærkningerne udelukkende beskrive indholdet og den indbyrdes sammenhæng, og man benytter en anden standard kaldet CSS (Cascading Style Sheets) til at fortælle browseren, hvordan indholdet skal se ud.

CSS er – ligesom HTML – en WC3-standard, der beskriver, hvordan en browser skal vise HTML-elementer (placering, font, farver med videre), og den er i skrivende stund i version 2.1 frigivet i en endelig version i 2011. Der er efterfølgende frigivet nogle få nye CSS 3-moduler.

JavaScript bruges til at udvikle dynamiske internetsider. Det er oprindeligt et fortolket programmeringssprog (scriptsprog) skabt af Brendan Eich, da denne arbejdede for Netscape (nu Mozilla) i midten af 1990’erne. Sproget er funktionelt og objektorienteret og er implementeret i samtlige moderne browsere.

JavaScript er, i modsætning til både HTML og CSS, ikke en W3C-standard, men er specificeret af ECMA og kaldes derfor for ECMAScript. Den sidste version er 5.1 fra 2011, og den er implementeret i nyere browsere i forskellige tilpassede versioner – men alle er kompatible med ECMAScript.

Organisationen W3C (World Wide Web Consortium) med Tim Berners-Lee i spidsen har stor betydning for de kommende versioner af HTML og CSS. Den består af omkring 300 større og mindre virksomheder og organisationer, som betaler et årligt gebyr for at sidde med i udvalg, hvor fremtiden for webbet diskuteres – herunder nye versioner af HTML, CSS, http osv.

W3C fremlægger nye standarder i forskellige versioner – fra Working Draft (WD), som er ideer, der arbejdes konkret på, over Candidate Recommendation (CR), til Proposed Recommendation (PR) og slutteligt en endelig frigivelse som en W3C Recommendation.

Der er mange forskellige browsere, og det spiller en stor rolle for implementeringen af nye HTML- og CSS features. Af de store kan nævnes Microsoft Internet Explorer, Mozillas Firefox, Googles Chrome, Apples Safari og den norske Opera.

De tre sidstnævnte er i en eller anden form baseret på samme renderingsmotor kaldet WebKit og har derfor samme udgangspunkt. Microsoft og Mozilla er uafhængige af de andre browsere med de fordele og ulemper, de nu giver. Samtlige nævnte browsere har både desktop- og mobile-versioner.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]

Fakta: Værd at vide om HTML

[/themepacific_accordion_section]
[/themepacific_accordion]