Gå videre til hovedindholdet

Semantiske kort

Semantiske kort er et designkoncept til udvikling af moderne, responsivt webdesign, som indeholder metadata, som søgemaskiner som Google og sociale medier som Pinterest kan læse og afkode. Kort sagt: design for mennesker, medier og maskiner.

Konceptet er baseret på kort, cards, rektangulære felter på skærmen, der indeholder en afgrænset mængde indhold som for eksempel tekst, billeder, links eller felter til brugerinput. Kort formidler typisk information om et bestemt emne, funktion eller opgave. Det kan være oplysninger om et produkt i en webshop, en teaser for en nyhed på et sportssite, et indlæg i en blog, eller en login-formular på et socialt medie. Kort kan gøres interaktive ved hjælp af faneblade, links, knapper med videre. De kan realisere "harmonikaer", indhold der kan foldes ind og ud, pop-op-vinduer og lignende.

Kort er uhyre populære i moderne responsivt webdesign, idet de kan præsenteres fleksibelt i forskellige medier. På en almindelig computerskærm kan de for eksempel vises i rækker og kolonner, mens de på mobiltelefon kan placeres under hinanden i en række, der kan rulles.

Kort har yderligere den fordel, at de understøttes i flere webdesign-biblioteker, såkaldte frameworks, fx W3.CSS og Bootstrap 4, og er et fremherskende designmønster i mange af de templates, dvs. skabeloner, som er lavet med disse frameworks. Kort kan også udarbejdes og organiseres ved hjælp af grid-funktionen i CSS.

Du kan læse mere om webdesign med kort i denne guide eller i denne bog.

Den bærende ide i semantiske kort som koncept er, at kortdesign og semantisk opmærkning, altså et korts underliggende metadata, bør "følges ad". Rationalet er at sikre, at der er en høj grad af overensstemmelse mellem det, en bruger præsenteres for på en webside og de oplysninger, som gøres tilgængelige for søgemaskiner, sociale medier og lignende. Et slogan kunne være noget i retning af: visuel struktur følger semantik, og semantik følger visuel struktur.

Mere konkret er ideen videre, at et semantisk kort bør, så vidt det er muligt, afspejle en primær semantisk type (= kategori eller klasse) fra schema.org, det "sprog" som Google og andre søgemaskiner kan læse og afkode. Det bør endvidere forsynes og opmærkes, dvs kodes, med oplysningstyper fra det skema, der gælder for den pågældende type. Tanken er her, at schema.org's skemaer kan anvendes som et slags planlægningsværktøj til at specifcere, hvilke typer information en bestemt slags semantisk kort kan indeholde.

Semantiske kort kan opmærkes med schema.org i inline-dataformater som RDFa og Microdata.

Eksempler på semantiske kort og deres implementering (i templates) i et framework som W3.CSS eller Bootstrap 4 vil blive givet her på sitet hen ad vejen.

Du kan læse mere om semantiske kort her på sitet: