Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

En introduksjon til moderne webdesign med webstandarder UniK 2005-03-10 Kjell Magne Fauske www.fauskes.net.

Liknende presentasjoner


Presentasjon om: "En introduksjon til moderne webdesign med webstandarder UniK 2005-03-10 Kjell Magne Fauske www.fauskes.net."— Utskrift av presentasjonen:

1 En introduksjon til moderne webdesign med webstandarder UniK 2005-03-10 Kjell Magne Fauske www.fauskes.net

2 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

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

4 Et historisk tilbakeblikk I •I begynnelsen (1990-1993) 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

5 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 –,,,,

6 Et historisk tilbakeblikk III •The World Wide Web Consortium (W3C) stiftes (1994) –Lager anbefalinger/standarder for WWW •Den store Nettleserkrigen (1994-1998) –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

7 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

8 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

9 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

10 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

11 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} +

12 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

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

14 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 tags431226 CSS bg-images1111 Browsers supported2Most modern HTML file size40 KB39 KB15 KB File size reduction-3%62% Hentet fra Throwing tables out the window http://stopdesign.com/articles/throwing_tables/

15 En nærmere titt på koden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Universitetsstudiene på Kjeller | Redesign test 1.Regler for formateringskoden 2.Tegnsett 3.Link til eksternt stilark 1 2 3

16 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

17 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

18 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

19 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)

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

21 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

22 Hvordan komme i gang •Bruk XHTML •Sørg for at koden validerer –http://validator.w3.org/http://validator.w3.org/ •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

23 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

24 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)

25 Nettsteder •Developing With Web Standards Recommendations and best practices – http://www.456bereastreet.com/lab/developing_with_web_standards/ http://www.456bereastreet.com/lab/developing_with_web_standards/ •The css-discuss Wiki – http://css-discuss.incutio.com/ http://css-discuss.incutio.com/ •A List Apart – http://www.alistapart.com http://www.alistapart.com •WestCiv’s CSS tutorial – http://www.westciv.com/style_master/academy/css_tutorial/ http://www.westciv.com/style_master/academy/css_tutorial/ •CSS Zen Garden – http://www.csszengarden.com http://www.csszengarden.com

26 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

27 Noen spørsmål?


Laste ned ppt "En introduksjon til moderne webdesign med webstandarder UniK 2005-03-10 Kjell Magne Fauske www.fauskes.net."

Liknende presentasjoner


Annonser fra Google