En introduksjon til moderne webdesign med webstandarder UniK Kjell Magne Fauske

Innhold •Hva er webdesign? •Et historisk tilbakeblikk •Hva er webstandarder? •Hvorfor bruke webstandarder? •Hvordan komme i gang med webstandarder •Ulemper med webstandarder •Hvor du kan lære mer •Eventuelle spørsmål

Hva jeg mener med webdesign NettleserWebserver HTTP Script Database •PHP •JSP •ASP •CGI •(X)HTML •CSS •Javascript • Parametere • Skjema • Cookies • Grafikk • Eksterne filer Webdesign

Et historisk tilbakeblikk I •I begynnelsen ( ) var HTML et enkelt og stilrent formateringsspråk •Bestod kun av elementer for å beskrive strukturen i et dokument –Avsnitt, overskrifter, lister og hyperlinker •Sa ingen ting om hvordan det skulle vises på skjerm

Et historisk tilbakeblikk II •Mosaic kom og var den første grafiske nettleseren. En revolusjon var i gang •En enorm vekst i antall nettsider. Brukerne begynte å kreve mer kontroll over hvordan sidene så ut •Stadig nye presentasjonselementer snek seg inn i HTML –,,,,

Et historisk tilbakeblikk III •The World Wide Web Consortium (W3C) stiftes (1994) –Lager anbefalinger/standarder for WWW •Den store Nettleserkrigen ( ) –IE og Netscape prioriterte ny, proprietær funksjonalitet fremfor stabilitet og standarder. –HTML gikk fra å være et strukturelt språk til å bli et presentasjonsspråk •Versjonsproblemet

Et historisk tilbakeblikk IV •Webstandarder på fremmarsj –The Web Standards Project (WaSP) stiftes (1998). Presser IE og Netscape til bedre støtte for webstandarder. •Internet Explorer stagnerer –Ingen ny funksjonalitet eller feilretting siden 2001 –Bremser den positive utviklingen •Nye nettlesere tar markedsandeler –Mozilla, Firefox, Opera, Safari

Hva er webstandarder? •Et sett av teknologier og anbefalinger etablert av W3C og andre organisasjoner •Brukes for å lage, tolke og presentere web-basert innhold Web- standarder StrukturOppførselPresentasjon • HTML • XHTML • XML • ECMAScript • DOM • CSS1 • CSS2

Tittel Overskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser Underoverskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu Et eksempel

Struktur Tittel Overskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser Underoverskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu

Struktur + presentasjon Tittel Overskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser Underoverskrift Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu h1 { color:blue; text-align:center; font-family:"Broadway"; } h2, h3 { color:red} +

Hvorfor bruke webstandarder? •Enklere utvikling og vedlikehold –Innhold og presentasjon kan skilles •Mindre formateringskode –Raskere nedlasting –Sparer båndbredde •Økt tilgjengelighet •Høyere ranking i søkemotorer

Eksempel: •Har gjort et enkelt redesign av UniKs fremside. –OriginalOriginal –Ny versjon med webstandarderNy versjon med webstandarder •Kodestørrelsen redusert med nesten 70%

Microsoft.com ( mai 2004) •Beregnet at MS kunne spare 924 GB i båndbredde hver dag •Dette blir 932 terabytes i året Current Design (IE/Win) Current Design (other) Makeover Tables used40360 Spacer gifs35760 Total tags CSS bg-images1111 Browsers supported2Most modern HTML file size40 KB39 KB15 KB File size reduction-3%62% Hentet fra Throwing tables out the window

En nærmere titt på koden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Universitetsstudiene på Kjeller | Redesign test 1.Regler for formateringskoden 2.Tegnsett 3.Link til eksternt stilark 1 2 3

XHTML •En reformulering av HTML 4 i XML •Har strengere regler og er mer konsistent enn HTML •De fleste tagger for presentasjon er fjernet. F.eks, •Både bakover- og fremoverkompatibelt •Egner seg for enheter som mobiltelefoner, PDA, leselister, søkemotorer

Regler for XHTML •Alle tagger og attributter skal skrives med små bokstaver: – link •Alle attributter skal ha hermetegn – •All tagger skal lukkes. –.. – •Alle < og & tegn må kodes – Urmaker Jensen & Sønn – Ser at x < y og z > u

Cascading Style Sheets (CSS) •En enkel mekanisme for å legge stiler på webdokumenter –Fonter, farger, mellomrom –Posisjon, bredde, bakgrunn, layout … •Enklere og mer fleksibelt enn gammeldags HTML •Gjør det mulig å skille presentasjon fra innnhold

CSS •Et stilark består av et sett av regler for hvordan utvalgte elementer skal vises •En regel består av to deler: –En velger (selector) –Deklareringer (declaration), som igjen består av : •Egenskap (property) •Verdi (value)

Eksempel på et stilark •En liste, mange muligheterEn liste, mange muligheter

CSS trenger ikke være kjedelig •OriginalOriginal •Contempo fineryContempo finery •GeoCites 1996GeoCites 1996 •Luna XPLuna XP •Invasion of the body switchersInvasion of the body switchers

Hvordan komme i gang •Bruk XHTML •Sørg for at koden validerer – •Fokuser på innhold, struktur og semantikk. Ikke på hvordan siden skal se ut •Ikke bruk tabeller til layout •Tenk på at sidene skal være tilgjengelig for alle

Ulemper med webstandarder •Tvinger deg til å være strukturert og nøyaktig •Opplæring er nødvendig •Internet Explorer støtter ikke alle standarder og har en del feil –Nødvending med hacks for å komme rundt enkelte problemer •Layout med CSS kan være vanskeligere enn å bruke tabeller •Man begynner å irritere seg over dem som ikke bruker webstandarder

Bøker •Designing with web standards. Jeffrey Zeldman (2003) •Cascading Style Sheets, The Definite Guide. Eric A. Meyer (2004) •Web Standards Solutions. Dan Cederholm (2004)

Nettsteder •Developing With Web Standards Recommendations and best practices – •The css-discuss Wiki – •A List Apart – •WestCiv’s CSS tutorial – •CSS Zen Garden –

Oppsummering •Gjør Internet en tjeneste: Bruk webstandarder! •Webstandarder er ikke vanskelig •Still krav til leverandører av nettsider •Ikke nøl med å klage på dårlig markup •Velg en moderne og sikker nettleser som støtter alle webstandarder

Noen spørsmål?