Innhold

Introduksjon

Når vi lager websider har vi innhold vi ønsker å presentere, og vi har mange muligheter når det gjelder måten innholdet skal presenteres på. Et viktig virkemiddel er strukturering av innholdet, altså hvordan de ulike bitene med informasjon plasseres i forhold til hverandre.

For å oppnå den strukturen vi ønsker kan vi velge mellom fire ulike metoder:

Sekvensiell design
De ulike bitene med informasjon kommer fortløpende etter hverandre. Denne leksjonen er laget med bruk av denne metoden.
Frames
Når frames benyttes vil det brukeren ser på skjermen bestå av to eller flere separate websider som har fått tildelt sin plass. It's Learning bruker denne teknikken.
Tabeller
Vi har med HTML mulighet for å lage tabeller. Dette er opprinnelig laget for å presentere data i tabellform, men kan også brukes til å styre hvor på websiden ulike biter med data skal befinne seg.
Struktur med CSS-stilsett ("tableless design")
Cascading Style Sheets (CSS) kan brukes for å få finmasket kontroll med utseendet til en webside. Foruten å brukes til å sette utseende på skrift, farger m.m., kan CSS også brukes til å plassere elementer der vi ønsker å ha dem på websiden. Gir resultat som er veldig likt bruk av tabeller.

De ulike metodene kan gjerne brukes samtidig for å oppnå ulike ting. Alle websider bruker for eksempel i ulik grad sekvensiell design -- innholdet inne i en celle i en tabell ligger normalt sekvensielt. Et annet eksempel er It's Learning som bruker frames, men også har behov for å strukturere innholdet innenfor hver frame ved hjelp av tabeller.

Vi skal ta for oss de ulike metodene og si noe om styrker og svakheter med dem.

Sekvensiell design

HTML ble opprinnelig laget som en måte å publisere vitenskaplige rapporter på. Slike rapporter består av en sekvensiell rekke med data i form av overskrifter, brødtekst og figurer. På samme måte som vitenskaplige rapporter, er det mange former for data som fint kan presenteres på denne måten, slik som leksjonen du nå leser.

Denne måten å strukturere innholdet på har mange fordeler:

Det er lett å orientere seg -- de aller fleste er godt kjent med strukturen overskrift-avsnitt.
Utskrifter blir veldig lik det vi ser på skjermen -- strukturen forblir den samme
Det enkelt å lage denne type websider, og HTML-koden blir liten og ukomplisert, med fordeler for nedlastingstid og prosessering i nettleseren. Det er også enkelt for nettleseren å først vise den delen av informasjonen vi først vil lese, nemlig toppen av siden.
Websidene tilpasser seg lett ulike nettlesere, mobile enheter, hjelpemidler for blinde og svaksynte, og så videre

Vi kunne sikkert listet opp mange andre positive sider ved denne måten å strukturere innholdet på, kanskje kommer du selv på noen? Hvorfor bruker ikke alle derfor denne metoden? Dette skyldes naturligvis at for mange formål så klarer vi ikke å oppnå det vi ønsker uten å ha mulighet til å plassere ut biter med informasjon på en friere måte. Aviser, firmanettsider og mange andre ønsker å kunne legge opp informasjonen på websiden på helt andre måter. For webbaserte applikasjoner slik som læringsplattformen It's Learning er det vanskelig å få til et bra design uten å kunne plassere ut informasjonsbiter på en fri måte.

Frames (rammer)

Bruk av frames, eller rammer på norsk, er en teknikk hvor vi lar en webside i realiteten bestå av flere separate websider som blir tildelt sin del ("frame" / "ramme") av skjermflaten. Dette betyr at ting som skjer inne i én ramme i utgangspunktet ikke påvirker de andre. Vi kan for eksempel scrolle inne i en av rammene uten at de øvrige rammene forsvinner ut av skjermbildet, eller innholdet i en ramme kan endre seg som følge av at brukeren klikker på en lenke mens innholdet i de øvrige rammene forblir det samme. For den som lager websiden kan det være arbeidsbesparende å ha menyer og lignende i egne rammer, fordi det da ikke er nødvendig å vedlikeholde menyen på alle websidene de inngår på.

En vanlig måte å benytte rammer på, er slik It's Learning gjør. Det vil si at man har en toppmeny i én ramme, en meny til venstre i én ramme og en innholdsramme til høyre. Når man bruker rammer kan man bestemme at dersom brukeren klikker på en lenke i én av rammene, skal innholdet som skjuler seg bak lenka vises i en annen ramme. Dette blir typisk brukt når man har en menyramme og en innholdsramme.

Skissen nedenfor illustrerer hvordan rammer brukes for å lage en webside. Som vi ser refereres det i index.html til tre andre html-filer: menyvindu.html, toppvindu.html og hovedvindu.html. Til sammen gir disse fire filene resultatet som ses nederst i illustrasjonen.

Kildekoden til index.html ser slik ut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<frameset cols="15%,85%" border="0">
  <frame src="menyvindu.html" />
  <frameset rows="100,100%">
    <frame src="toppvindu.html" />
    <frame src="hovedvindu.html" />
  </frameset>
</frameset>
</html>

Til enkelte applikasjoner har rammer noe for seg, men teknikken har mange ulemper. Fordi man kan få til mye av det samme med mange færre ulemper ved hjelp av tabeller eller CSS og script på serversiden blir rammer i dag lite brukt til annet enn spesielle formål. For eksempel bruker mange webbaserte epostlesere, slik som Microsoft Exchange sin Outlook Web Access, fordi disse applikasjonene har et grensesnitt hvor dette er nyttig.

Noen av de viktigste ulempene med rammer er:

Forholdet mellom URL i nettleseren og innhold på skjermen ødelegges -- vanskeliggjør lenking og lagring av bokmerker
Back-, forward- og reload-funksjonene i nettleseren fungerer ikke lenger slik brukeren forventer
Utskrifter blir som regel ikke slik brukeren hadde ønsket
Skjermen brukes opp av "unødvendige" rammer med menyer, samt scrollbars. Dette ser man lett i It's Learning
Ulike nettlesere håndterer rammer ulikt
Det er vanskelig å få websider med rammer til å se pene ut

Vi bruker ikke mer tid på rammer i dette kurset, men dersom du ønsker å prøve det i praksis kan du finne mye hjelp på nettet, for eksempel på denne siden.

Tabeller

En skulle kanskje tro at tabeller på websider kun var elementer slik som dette:

Kjønn	Fornavn	Etternavn
Mann	Ola	Nordmann
Kvinne	Kari	Nordmann

Dersom man tenker seg litt om så forstår man at dersom rammen (linjene) i tabellen fjernes, så går det an å bruke tabeller til å strukturere innhold, slik som i dette eksemplet:

Fotball er gøy

Noen tribuner er hyggeligere enn andre. Dette er en av dem.	Selv på toppnivå i Norge spilles noen kamper i gymsal.

Kildekoden til tabellen ovenfor ser slik ut:

<table bgcolor="#FFFF99" width="500" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2" align="center"><h3>Fotball er g&oslash;y</h3></td>
  </tr>
  <tr>
    <td align="center"><img src="hjemmebane.jpg" width="200" height="150" alt="Hjemmebane" /></td>
    <td align="center"><img src="gymsal.jpg" width="200" height="150" alt="Gymsal" /></td>
  </tr>
  <tr>
    <td align="center">Noen tribuner er hyggeligere enn andre. Dette er en av dem.</td>
    <td align="center">Selv p&aring; toppniv&aring; i Norge spilles noen kamper i gymsal.</td>
  </tr>
</table>

For de aller fleste formål er det behov for å ha denne type kontroll med strukturen når en webside skal lages. Siden tabellmuligheten finnes i HTML og er såvidt fleksibel som den er, så brukes den på veldig mange websider. Når man skal designe en websiden med bruk av tabeller så kan det lønne seg å skissere den på papir først, så man ser hvordan tabellen bør bygges opp. Ved hjelp av attributter som colspan og rowspan kan man få til mye -- se kildekoden til eksemplet. Dersom man får behov for et mer komplekst oppsett kan tabeller nøstes inne i tabellceller -- altså at man oppretter et nytt tabell-element inne i et td-element.

Fordeler med bruk av tabeller:

Enkelt å bruke for de som kan HTML
Intuitiv måte å strukturere innhold på, spesielt hvis man lager en kladd på papir
Utprøvd teknkologi -- lett å finne hjelp, samt at man kan se på andres kildekode for tips

Ulemper med bruk av tabeller:

Strider mot tankegangen at innhold og presentasjon skal skilles
Ikke mulig å bruke på websider som oppdateres dynamisk i nettleseren (Ajax)
HTML-koden kan bli kompleks dersom man får behov for å nøste tabeller inni tabeller.
WYSIWIG-verktøy slik som FrontPage og Dreamweaver har tradisjonelt laget tildels meget kompleks HTML-kode som følge av dette, men de har blitt bedre med årene.
Enkelte problemer med at nettlesere tegner opp tabeller ulikt, gjelder spesielt Internet Explorer 6 og tidligere, som oppfører seg ulikt andre nettlesere
Byr på problemer for håndholdte enheter, hjelpemidler for blinde og svaksynte og lignende -- de klarer ikke å brekke om websidene på riktig måte og det er vanskelig å vite hva som er det virkelige innholdet på websiden

NB: Mikrofonen min sluttet å fungere når jeg skulle lage oppdatert video for CS5, denne er derfor med CS4 inntil videre. Det er ikke store forskjeller mellom versjonene.

Se video om tabelldesign i Dreamweaver.

Se kildekoden brukt i eksemplet.

Struktur med CSS ("tableless design")

For mange formål er det hensiktsmessig å foreta et klart skille mellom innhold og presentasjon. Cascading Style Sheets (CSS) er et virkemiddel som kan brukes for å flytte presentasjon ut av HTML-dokumentet og inn enten i hodefeltet på HTML-dokumentet, eller kanskje aller helst inn i egne CSS-filer. Dette er du sikkert kjent med fra for eksempel faget Webdesign. De fleste bruker imidlertid CSS mest til å formattere skrift, setter farger og lignende. Med CSS har vi imidlertid også muligheten til å plassere innhold på websiden, tilsvarende som vi kan med bruk av tabeller.

Vi kommer tilbake til CSS og tableless design senere i kurset og tar derfor kun med oss fordeler og ulemper med teknologien sammenlignet med tabeller.

Fordeler:

Klart skille mellom presentasjon og innhold -- gir stor grad av fleksibilitet, er prinsippielt ryddigere
Fleksibel spesifikasjon av strukturen -- vi er ikke bundet til rader og kolonner slik vi er med tabeller, men har mulighet til å plassere objekter akkurat der vi ønsker. CSS lar oss også bruke ulike former for plassering relativt til andre objekter istedenfor å gi objektene statisk plassering.
HTML-dokumentet blir mye enklere, siden det kun skal bestå av innhold (iallefall nesten)
Kan brukes når vi ønsker dynamisk oppdatering av nettsiden i nettleseren (Ajax)
Lettere for håndholdte enheter, hjelpemidler for blinde og svaksynte og lignende, da innholdet ligger "rent" i HTML-dokumentet og det i motsetning til med tabeller er mulig å maskinelt tolke CSS-koden og gjøre noe fornuftig med den

Ulemper:

Komplekst å forstå og jobbe med, man må forholde seg til flere filer og to ulike språk (HTML og CSS)
Ulike nettlesere presenterer koden ulikt og man må derfor foreta grep for å håndtere disse ulikhetene

En kan si at "konkurransen" mellom bruk av tabeller og tableless design på mange måter er en kamp mellom "vi tar det vi har og holder det enkelt" og "gjør vi det helt korrekt så blir det veldig fleksibelt og vi sparer oss for mye trøbbel". Dette er et scenario som historien, ikke minst datahistorien, er fullt av. Tabeller har lenge vært dominerende, mens tableless design er nykommeren. Hva som vil være den mest brukte metoden om ti år vil historien vise.

Script på klienten og serveren

Som du sikkert er kjent med kan vi både på klienten og serveren lage script for å innføre dynamikk på websiten vår. I dette kurset vil vi i hovedsak jobbe med script på serversiden, mens vi i denne leksjonen prøver oss litt med dynamikk på klientsiden.

Script på klienten (JavaScript)

Kort oppsummert kan vi kjøre script på klienten, altså i nettleseren, ved hjelp av et scriptspråk som nettleseren støtter. Alle fullverdige nettlesere støtter JavaScript, men man skal være klar over at dette ikke er tilfelle med nettlesere laget for mobiltelefoner. Enn så lenge er det slik at de fleste nettlesere på mobiltelefoner enten mangler JavaScript-støtte i sin helhet eller har en mangelfull implementasjon. Internet Explorer kan i tillegg til JavaScript også kjøre VBScript, og en del webbaserte applikasjoner benytter dette. De er da enten kun kompatible med Internet Explorer, eller så er samme eller begrenset funksjonalitet implementert i JavaScript for andre nettlesere.

Script på klientsiden blir i hovedsak brukt for å kontrollere brukergrensesnittet, men det er en klar trend mot at mer logikk legges ut i klienten, noe som ofte kalles Ajax. Dette endrer rollefordelingen mellom klient og server på web. Tradisjonelt består webben av en tjener som sender ferdigformattert kode til en nettleser som tegner opp skjermbilder som følge av dette. Med ajax nærmer man seg den tradisjonelle klient-tjener-modellen, hvor man har en tykk klient som mottar data fra tjeneren, behandler disse og er selv ansvarlig for å bygge opp skjermbildet.

I Dreamweaver følger det med et rammeverk, Spry, for å lage ajax-applikasjoner.

NB: Mikrofonen min sluttet å fungere når jeg skulle lage oppdatert video for CS5, denne er derfor med CS4 inntil videre. Det er ikke store forskjeller mellom versjonene.

Se video om JavaScript og Spry i Dreamweaver.

Se kildekoden brukt i eksemplet.

Dersom du ønsker å lære mer JavaScript enn det vi tar opp i dette faget anbefaler vi at du ser på w3schools' fritt tilgjengelige JavaScript-skole.

Script på serveren

I dette faget skal vi jobbe mest med script på serversiden. Dette innebærer at vi på webserveren kan lage logikk slik at websidene oppfører seg som skjermbilder i en applikasjon. Når brukeren utfører en handling på skjermbildet (websiden), for eksempel fyller inn i et tekstfelt og trykker på en knapp, sendes handlingen til webseveren som behandler forespørselen og sender et nytt skjermbilde (webside) til nettleseren. Dersom vi bruker ajax vil webserveren utveksle data istedenfor skjermbilder (websider) med klienten.

Det finnes mange alternative scriptspråk som kan brukes på serversiden, slik som ASP/VBscript, ASP.NET, PHP, Java (JSP m.m.), og så videre. Siden scripttolkeren på webserveren sender ferdig HTML (eller data i tilfelle ajax) til klienten, trenger ikke nettleseren vi bruker ha noen som helst form for støtte for de ulike scriptspråkene -- den får bare HTML-kode fra serveren på samme måte som om vi brukte statiske websider.

I dette faget bruker vi Microsoft-teknologi på serversiden, med IIS og ASP, samt høynivåløsningen Sharepoint. Vi kommer tilbake til dette i senere leksjoner.

Gi oss tilbakemelding!

Savner du noe? Synes du gjennomgangen av et emne var dårlig? Var noe spesielt bra?

Vi vil vite det! Kontakt oss og gi oss tilbakemelding. Vi bruker din tilbakemelding til å gjøre Webteknikker enda bedre.

Webdesign 2 - Strukturer på web, scriptteknologi