Artikel top billede

(Foto: Computerworld)

Html 5 her og nu

Den næste udgave af html får større og større udbredelse.
Vi viser, hvad man kan bruge lige nu.

Af Redaktionen, 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.

Webudviklere har laver html4.01-kompatible sider i næsten ti år. Men nu har vi omsider fået en brugbar erstatning for denne aldrende standard. Html 5 er officielt ved startsnoren. Der er dukket stykkevis support op i de seneste webbrowsere i de senere år.

Hvordan ser morgendagens webside ud? Den kommer til at minde meget om nutidens webside. Hovedformålet med html 5 er at lave et opmarkeringssprog, der kan understøtte udviklingen af webapplikationer. Det betyder, at funktionalitet, som vi kender fra Ajax, Java og applikationsplatforme som Google Gears og Adobe AIR, bliver indbygget direkte i browserens Document Object Model. Lad os se på de elementer, nogle browsere allerede understøtter og finde eksempler, som man kan afprøve lige nu.

Et tomt lærred

I øjeblikket er den mest understøttede nye funktion tagget <canvas>, Med implementeringer i Firefox, Opera og Safari gør <canvas> det muligt at indsætte grafikelementer i websider. Den opretter en beholder til scripting af vectorbilleder, bitmaps, video og endda 3D ved hjælp af JavaScript. Den tilføjer en række koordinater, faconer og animationer til siden, og man kan beskrive den som noget nær en letvægtsudgave af Flash i html.

Det er dog kompliceret at kode manuelt, og vi har døjet med at finde specifikke authoring-værktøjer på trods af, af <canvas> er en ret moden tag. Biblioteker, ja, men ingen kodeværktøjer. Elementet <canvas> konkurrerer med Shockwave Flash og (i mindre grad) med SVG (Scalable Vector Graphics) om at fange interaktionsudviklernes opmærksomhed.

Nogle kodefolk har dog lavet en samling af inspirerende eksempler, der er værd at se på. Besøg www.tinyurl.com/6wls8y, hvor du kan se nogle enkle eksempler.

Nem video

Der er masser af modsigelser i html 5. I versionen xhtml 1.1 (den nyeste xhtml-implementering af html 4.01) er elementet <embed> røget ud. Selv tagget <img> syntes at være på vej ud til fordel for den generiske <object>. Html 5 vender op og ned på det ved ikke blot at genindføre <embed>, det lancerer også <video> og <audio>. Man kan finde vordende understøttelse af <video>, begyndende i Safari 3.1 og Firefox 3.1.

Indtil Flash-baserede metoder blev almindelige, var det noget af et mareridt at indsætte inline-video i websider. Det var en kompleks blanding af <object> og <embed>; man kunne kun undgå faldgruberne ved at satse på medieafspillere på forskellige systemer. Tagget <video> er lige så nem at bruge som elementet <img> – som man kan se i dette hypotetiske kodeeksempel:

<video src=”sample.mov”

Autoplay>Indhold for browsere, der ikke ikke understøtter videotag her.</video>

Downlod Firefox 3.1 og se den magiske <video> i aktion på www.mozbox.org/jdll/video.

Lokalt lager

Internet Explorer 8 vælger og vrager mellem de html 5-elementer, den vil understøtte. Hvor alle andre browserudviklere har prioriteret <canvas> højt, staser IE8 på lokalt lager og session-lager. Firefox 2 og WebKit (safaris opensource-renderingsengine) understøtter også protokollen.

Sådan virker det: Det lokale lager gør det muligt at indstille og gemme parrede variabler med et navn og en værdi. Begge kan skrives af brugeren. Vi har allerede noget af den funktionalitet med cookies, men både lokalt lager og session-lager er endeløse.

Hvis man skriver en form, der kræver flere input fra brugere over adskillige sider, kan man bruge lokalt lager til at sætte fart i processen i stedet for at skulle døje med at læse og skrive til en database mellem siderne. Se et konkret eksempel på det hos www.tinyurl.com/crggfo.

Træk og slip

Træk og slip-funktionalitet er ikke længere en ny og spændende mulighed på websider, takket være AJAX-grænseflader som Dojo Toolkit (www.dojotoolkit.org). Html 5 har træk-events indbygget, og der er allerede delvis understøttelse i de seneste udgaver af Internet Explorer, Firefox og Safari.

Det ville være glimrende at have en enkelt beholder ved navn <drag>, men sådan fungerer html 5’s træk og slip desværre ikke. I stedet er der et kompliceret api til at trække objekter med en række DOM-events og handlinger, der er tilgængelige i JavaScript. Vi får måske alligevel brug for JavaScript-frameworks og -biblioteketer. Man kan se en simpel demo af træk og slip-systemet på www.tinyurl.com/dx6qyw.

Redigerbart indhold

Her har vi omsider redigerbart indhold, og det bliver understøttet af Opera. Safari, Firefox 3 og Internet Explorer. Man kan gå imod den herskende tendens i html 5 vedrørende komplekse DOM-extensions med et forrygende api, og redigerbart indhold lader sig nemt implementere som en henførbar værdi:

<div contenteditable=”true”>

Man kan redigere denne sektion!

</div>

DOM-elementet har yderligere funktioner, der omfatter en stavekontrol, som bliver kaldt meget enkelt frem:

<dic contentaditable=”true”>

<p spellcheck=”true”>Pas på, hvad du skriver her</p>

</div>

Man kan se flere eksempler på DOM-funktioner på www.tinyurl.com/dzsy99.

Forms 2.0

Web Forms 2.0 tilfører snarere end genopfinder brugen af forms i html. Web Forms 2.0 udvider mulighederne med forms med mere specifikke attributter.

Funktionaliteten blev oprindelig anbefalet som en bolt-on til xhtml 1.1, men nu er den inddraget i html og omfatter extensions til de fleste attributter, herunder dataverifikation, interaktiv tilføjelse af felter og forud udfyldte forms ved hjælp af xml-data.

De nye formprotokoller kom først i Internet Explorer 6, og de tilføjer også semantisk navngivning til formelementer, hvilket allerede burde være standard for udviklere. Opera 9 har en fuld implementering af Web Forms 2.0, men Firefox har kun delvis understøttelse.

Ulempen ved denne nye funktion er, at Web Forms 2.0 ikke svarer nøjagtig til den nuværende html 5-formsanbefaling, og der er derfor to versioner på gaden i forskellige grader af implementering. Man kan finde en komplet Web Forms-testsuite på www.olav.dk/wf2/demo.

Semantisk indhold

Til sidst er der en række nye strukturelle elementer, der gør det muligt at definere en sides komponentdele mere effektivt. Det gør det nemmere at ramme dele af siden med scripting, der bruger DOM. Det gør den også med tilgængelig for maskiner via browser-extensions, skærmlæsere eller alternative enheder.

Det betyder også, at tilrettelæggelsen af en side med css bliver nemmere. De elementer hedder <section>, <article>, <aside>, <header>, <footer>, <nav> og <dialogue>. Man kan derfor opmarkere en navigationsbjælke således:

<nav>

<a href=”http://(www.example.com/”>Links Go Here</a>

</nav>

Selv om disse elementer ikke udtrykkelig bliver understøttet af den eksisterende generation af browsere, kan man bruge css til at style de elementer, der er opmarkeret på denne måde, fordi de er parate som xml-blokke. Når man vil gøre det, skal man inddrage ”display:block” i style-deklarationen.

Her er noget pudsigt: Der findes to konkurrerende versioner af html: (x)html 5 og xhtml 2. Xhtml 2 er beskåret og strømlinet og står for en helt anden holdning til opmarkering af sider end html 5, som det ser ud i øjeblikket.

Hvor html 5 lige nu tilføjer mere komplekse integrerede elementer, der understøtter specifikke former for interaktiv adfærd, afviser xhtml 2 alle html 4.01’s medieopmærkning til fordel for modulære, brugerdefinerede indholdsbeholdere.

Begge standarder gør det muligt at skabe mere dynamisk indhold, men de bagvedliggende filosofier er helt forskellige.

Hvem vinder? I betragtning af, at kun få udviklere har taget det spartanske og modulære xhtml 1.1 til sig (det, der kommer tættest på xhtml 2), satser vi på html 5.

Dit første stop for lettilgængelige oplysninger om html 5 er wikien WHATWG (http://wiki.whatwg.org). WHATWG står for Web Hypertext Application Technology Working Group, og selv om webstandarderne stadig er under opsyn af World Wide Web Consortium (www.w3.org), er html 5 denne udbrydergruppes værk.

WHATWG bliver styret af en gruppe browserproducenter, navnlig Apple, Mozilla og Opera. Det er intet tilfælde, at det er de firmaer, der står bag de fjerde-, tredje- og næstbedst placerede browsere på nettet. De siger, at de har været utilfredse med den retning, Html har bevæget sig i under World Wide Web Consortium ledelse. Derfor har de fundet sammen for at lave en ny version af dette opmarkeringssprog. Det forklarer de meget forskellige retninger, html 5 og xhtml har bevæget sig i.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]

Det skal du bruge...

[/themepacific_accordion_section]
[/themepacific_accordion]