Web fundamentals Webdesign 17. januar 2008 Monica Strand Webdesign 17. januar 2008 1 Web design Fagområdet Web design inneholder flere disipliner Grafisk design Informasjonsdesign Brukergrensesnittdesign HTML, stilark og grafisk produksjon Skripting og programmering Multimedia Webdesign 17. januar 2008 2 Frontend vs. Backend Frontend refererer til de aspekter av designprosessen som dukker opp eller relaterer seg direkte til nettleseren. Grafisk design Brukergrensesnittdesign i Informasjonsdesign ettersom det vedrører brukerens erfaring med nettstedet Nettstedproduksjon, inkludert HTML dokumenter, stilark og JavaScript Backend referer til de programmer og skript som jobber på serveren for å gjøre websidene dynamiske og interaktive Informasjonsdesign vedrørende hvordan informasjon er organisert på serveren Forms prosessering Databaseprogrammering Content management systems Serverside web programmer (Perl/CGI, PHP, ASP, JSP, Ruby on Rails, Java ++ Webdesign 17. januar 2008 3 1
Web relaterte programmeringsspråk Web relaterte programmeringsspråk ordnet etter økende kompleksitet (X)HTML Stilark JavaScript/DOM skripting Serversideskripting XML Java Webdesign 17. januar 2008 4 Webdesign lagene Strukturlaget Innholdet i dokumentet (X)HTML Presentasjonslaget Hvordan innholdet presenteres visuelt CSS Atferdslaget Interaktivitet i siden Skriptene (JavaScript, PHP, etc) Webdesign 17. januar 2008 5 (X)HTML HTML = HyperText Markup Language Språket man bruker for å lage websider XHTML = extensible HTML Forskjellen er strengere regler. Dere skal klbruke (X)HTML når dere lager websider (X)HTML er ikke et programmeringsspråk, men et markeringsspråk (X)HTML brukes for å beskrive innhold Webdesign 17. januar 2008 6 2
CSS CSS = Cascading Style Sheets Fortelle hvordan innholdet skal se ut Brukes også for å presentere utseende på innholdet i andre medier enn web/skjerm (print, mobiltelefoner) Kan gjøre endringer på utseende til store mengder dokumenter via ett stilark Webdesign 17. januar 2008 7 JavaScript/DOM skripting Er ikke beslektet med Java (til tross for navnet) Brukt for å legge til interaktivitet og handling/oppførsel til websider Sjekker om forms får gyldig innhold Bytte ut stiler på et element, eller et helt nettsted Hjelpe nettleseren til å huske informasjon om brukeren til neste gang de besøker sidene Mest brukt til å manipulere elementer på en webside eller funksjonene til nettleservinduet DOM = Document Object Model referer til den standardiserte listen av websideelementer som kan nås og manipuleres ved hjelp av JavaScript Webdesign 17. januar 2008 8 Serversideprogrammering For å få mer avansert funksjonalitet og fleksibilitet Dynamisk generering av websider Nødvendig di for for eksempel: CMS Handlevogner Mailinglister Gjestebøker Webdesign 17. januar 2008 9 3
XML XML = extensible Markup Language Ikke et språk i seg selv heller et sett med strenge regler for utvikling av andre markeringsspråk Lager egne tag er for å beskrive innholdet i et dokument eks: <cd navn><lagringssted><samlingsnummer> XHTML, RSS (Really Simple Syndication), RDF (Resource Description Framework) Site Summary, SVG (Scalable Vector Graphics, MathML, GML Webdesign 17. januar 2008 10 Java Overkill for de fleste nettsteder Webdesign 17. januar 2008 11 Internet vs. Web Internett er et nettverks av sammenkoblede datamaskiner Ingen eier internett Samarbeissystem med standarder og regler Formålet er å dele informasjon Web = World Wide Web En av måtene informasjon kan ble delt på internett Dokumenter kan linkes sammen via hyperlenker Former et gedigent spinedelvev av sammenkoblet inoformasjon Webdesign 17. januar 2008 12 4
Historien om theweb The Web ble funnet opp i et partikkelfysikklaboratorium ved CERN i 1989 Tim Berners Lee foreslo et system for informasjonsstyring ved hjelp av hypertekst Tim Berners Lee og Robert Cailliau lanserte en prototyp i begynnelsen kun for tekst I 1992 fantes det kun 50 web servere totalt i verden NCSA Mosaic den første grafikk nettleseren lansert i 1992 Den pågående utviklingen av the Web overvåkes av W3C (World Wide Web Consortium) Webdesign 17. januar 2008 13 Server Serveren er programvaren som ligger på de datamaskinene som utgjør internett. Servere tillater datamaskinene å kommunisere med andre datamaskiner Server programvaren venter på spørsmål etter informasjon, finner informasjonen og sender den så fort som mulig Mest vanlige server programvarene er Apache og Microsoft Internet Information Services (IIS) Webdesign 17. januar 2008 14 Serverside vs. klientside Forteller hvilken maskin som gjør prosesseringen. Klientside programmer kjører på brukerens maskin Serverside programmer bruker prosesseringskapasiteten på serveren Webdesign 17. januar 2008 15 5
URL Hvert eneste dokument på weben har sin egen unike adresse URL URL = Uniform Resource Locator URI = Uniform Resource Identifier (mer teknisk k korrekt) http://www.vindil.no/adidascup/index.php http://www.hig.no/imt/bachelor Webdesign 17. januar 2008 16 Plattformer Forskjellige OS håndterer fonter, formes, mediespillere forskjellig Ulike nettlesere tolker HTML og CSS forskjellig Oppkoblingshastighet Vindusstørrelse og skjermoppløsning Skjermer og farger Know Your Audience Webdesign 17. januar 2008 17 Exercise 4 1 Exercise 4 2 Exercise 4 3 Exercise 4 4 Oppgave 3 Test Yourself til kap. 4 Webdesign 17. januar 2008 18 6