Om Björns studiewebb

Denna webbplats, Björns studiewebb, har utvecklats som en inlämningsuppgift på kursen Interaktiv WWW-hantering (avslutad höstterminen 2000). Nedan följer dokumentationen av webbplatsen. Namnet Björns studiewebb kommer sig av att jag började utveckla webbplatsen för inlämningsuppgiften och att jag idag använder den för att sammanfatta nya saker jag lär mig.

(010429) Underhåll av webbplatsen har fortsatts efter kursens slut! Tillägg i denna hemsida har markerats med datum inom parentes då det skedde (som detta stycke).

(070124) I november 2006 publicerade jag min privata webbplats på adressen www.kiltedviking.net. På webbplatsens startsida finner ni min e-postadress. (E-postadressen har tagits bort från denna webbplats alla hemsidor för att undvika skräppost [SPAM] samt då den bevisligen ändras ibland, d.v.s. jag har gjort det lättare för mig att ändra e-postadress.)

På denna sida beskrivs

Syfte

Syftet med webbplatsen är att sprida information om HTML-kod och JavaScript. Detta val har gjorts utifrån två kriterier: inlämningsuppgift att skapa en webbplats och mitt eget sätt att studera.

  1. Inlämningsuppgiften innebär att man ska skapa en webbplats med motiverad design och syfte.
     
  2. Det sätt som passar mig att studera är att skriva sammanfattningar med egna ord. Och att utveckla en webbplats som förklarar innehållet på kursen är en form av sammanfattning. Samtidigt så finns det inte ett bättre medium att sammanfatta webbtekniker på än på hemsidor. Därmed kan exempel testas direkt genom att klicka på en länk till en hemsida med HTML- och/eller JavaScript-kod i.

Tillägg till syfte

(010429) Efter avslutad kurs (höstterminen 2000) har jag beslutat att fortsätta utveckla denna webbplats. Som tillägg till webbplatsen syfte tänker jag använda webbplatsen för att sammanfatta det jag lär mig om nya teknologier och för att förklara/ge exempel åt studenter (på kurser jag undervisar på) om hur dom ska gå tillväga. Underhållet av webbplatsen sker när jag får lust/tid eller har behov av att förstå/förklara något nytt.

| Till början på denna sida |

Innehåll

Webbplatsen innehåller beskrivningar av HTML- och JavaScript-kod. I samband med beskrivningarna finns oftast en länk till en exempelhemsida med visar hur det som beskrivits tar sig ut. Observera att din webbläsare avgör resultatet och du bör fundera på att titta på hemsidan i några olika webbläsare och/eller versioner av webbläsare för bäst förståelse.

(010429) Tillägg av innehåll kommer ske då behövligt men begränsas till webbrelaterade teknologier.

(010708) Innehållet har begränsats till att främst förklara hur de olika teknikerna fungerar. D.v.s. jag ger verktygen men (oftast) inte hur verktygen kan kombineras för att ge resultatet som önskas. I de fall då jag har några åsikter om design, och jag har fått min teori bekräftad, så ger jag mig in på att försöka motivera detaljer som har med design att göra.
Orsaken till detta är att jag inte är någon vidare bra designer - Björns studiewebb är designad för att vara stilren men har blivit ganska tråkig layoutmässigt.

| Till början på denna sida |

Målgrupp

Webbplatsen är främst avsedd för mina egna studier. Men jag har förhoppningar om att andra besökare som vill lära sig skapa hemsidor ska kunna få användning av min webbplats.

(010429) Även studenter på kurser jag undervisar på ska kunna använda webbplatsen för att hitta exempel (och/eller länkar till fler exempel) på hur man löser saker relaterade till deras projekt.

| Till början på denna sida |

Utformning av webbplatsen

Många av de val som gjorts vad gäller utformning av denna webbplats har gjorts med utgångspunkt från de krav som inlämningsuppgiften har på webbplatsen. Jag har t.ex. valt att basera webbplatsen på ramar då det ingår i uppgiften att använda sig av ramar. Ramar kan vara ett kraftfullt verktyg för att skapa en webbplats som är enkel att navigera på. Nackdelen med ramar är att man inte kan skapa ett "bokmärke/favorit" till en hemsida en bit ner i hierarkin utan endast till själva "ramsidan". Därför har jag gjort separata ramsidor för underwebbarna, bl.a. HTML och JavaScript.

För att inte få för länga textrader har jag använt mig av tabeller för att begränsa längden på texten. Om allt fungerar som jag tänkt mig så ska inte hemsidan (menyn och informationssidan) vara bredare än 600 punkter, vilket jag har förhoppningar om ska passa på de flesta skärmar. Jag använder mig av menyn till vänster som en marginal (om än färgad och inte vit).

(010429) En del underwebbar kommer få en ny utformning utan ramar. Planer finns även på att eventuellt forma om de underwebbar som idag (010429) har ramar.

(080613) Underwebbar kommer få en ny utformning utan ramar med design baserad enbart på stilmallar (CSS), d.v.s. ut åker (X)HTML-tabellerna. :-)

Utvecklingsprocessen

Efter att jag funnit ett syfte med webbplatsen satte jag mig ner och skissade på hur hierarkin för webbplatsen skulle fungera.

[ BILD som visar hierarkin ]

Och eftersom jag hade två (idag) distinkta underdelar - HTML och JavaScript - så bestämde jag mig för att bryta ut dem så att de fick en egen hierarki. Därmed fick jag en ganska platt hierarki vilket gjorde det praktiskt att använda ramar.

Jag har använt mig av Microsoft FrontPage 2000 för att generera kod som jag var osäker på hur den fungera (ser ut). Därefter har jag klippt in eller skrivit av koden i mina dokument.

(010429) Numera används FrontPage 2000 (och Visual InterDev 6) för produktion/underhåll av hemsidorna för att snabba upp processerna. Bägge programvaror tillåter att man redigerar HTML-koden direkt (vilket sker ganska ofta) på ett enkelt sätt. Bl.a. sker hanteringen av datum, som sida sist redigerades på, automatiskt. Mina försök att använda JavaScript för detta datum falerade då Netscape Navigator och Microsoft Internet Explorer representerade datum på olika sätt. Netscape Navigator var för övrigt inte 2000-säkert och visade 100 istället för 00.

Test av webbsidor har skett i både Internet Explorer 5.0/5.5 och Netscape Navigator 4.08/4.75 då jag lever i tron om att dessa versioner av webbläsare är dominerande på Internet.

(070124) Numera använder jag främst programmet Crimson Editor för att redigera mina hemsidor. Redigering sker därmed främst som kod.

Menyer

För att skapa punkterna i menyerna används två GIF-bild som pilar (Röd pil pekande till höger och Röd pil pekande till vänster). Bilderna innehåller endast två färger - den genomskinliga och den röda (#FF0000). Tanken med pilar som visas framför länken (och pekar till höger) kommer visa hemsidan i ramen till höger om menyn och pilar som visas efter länken kommer öppna en av "underwebbarna" (vilket byter ramsida). De länkar där pilen pekar till vänster återvänder till startsidan ("startwebben").

(010610) I de hemsidor som har fått ny design, utan ramar, så betyder pilen framför, och som pekar till höger, att det är en länk inom hemsidan. De andra placeringarna (och riktningar) av pilarna har samma betydelse.

Typografi

För att styra typografin på hemsidor har jag valt att använda Cascading Style Sheets (CSS) istället för taggen <FONT>. På detta sätt gör jag kod mer lättläst då jag separerar innehåll från design. All CSS-kod har placerats i en fil med namnet STILMALL.CSS och länkas in i alla mina HTML-dokument.

(010610) Hemsidor med den nya designen använder istället filen GUL.CSS som placerats i mappen STILAR (tillsammans med filen STIL.CSS).

Valet att använda Verdana som typsnitt har gjorts då detta typsnitt tar sig ganska väl ut på skärmen (dock inte lika bra i utskrift).

(010610) Exempelkod ges stilmallen "kod" eller "kodlangre" för att ändra typsnittet till ett typsnitt med fast teckenbredd (t.ex. Courier New) i hopp om att koden ska bli lättare att läsa.

Färgval

Färgvalet (rött och gult) har använts för symbolisera färgerna i flaggan för mitt ursprungliga landskap. Både den gula och den röda färgen bör vara "webbsäkra" (Siegel[98]) då de kodats som #FFFF66 resp. #FF0000.

Användandet av horisontella linjer

Jag har använt mig av horisontella linjer längst ner på hemsidorna för att visa var informationen på hemsidorna tar slut. Under dessa horisontella linjer har jag placerat dokumentinformation så som namnet på skaparen av dokumentet samt datum då hemsidan redigerades sist.

Detta har jag gjort mot de påpekande som framgår av litteraturen på kursen (Siegel[98]).

(010610) Numera har jag även börjat använda horisontella linjer för att skilja olika avsnitt i sidor åt. På detta sätt hoppas jag att det ska bli lättare att uppfatta de olika avsnitten på sidor som är lite längre (kanske längre än vad dom borde vara).

Icke-användandet av SSI (050507)

Server-Side Includes (SSI) är något som kan underlätta uppdatering av webbplatser. Bland annat kan kod, gemensam för flera webbsidor, inkluderas för att slippa behöva upprepa den i flera sidor. Att slippa behöva upprepa kod innebär att vi endast behöver ändra på ett ställe när koden ändras. Även datum som webbsidor sist uppdaterades kan hanteras automatiskt. Bägge dessa funktioner kräver att webbsidor tolkas (eng. parsed) av en webbserver (som stödjer SSI).

Valet att inte använda SSI (utom på en webbsida :-) i Björns studiewebb har gjorts för att webbplats ska kunna "surfas" utan en webbserver (d.v.s. laddas ner lokalt). Men i en webbsida (för nerladdning av denna webbplats) har SSI använts för att automatiskt kunna hantera datum som ZIP-fil skapades. På så sätt slipper jag uppdatera denna enda webbsida varje gång jag packar webbplatsen i ZIP-fil. :-)

| Till början på denna sida |

"Replikering" av webbplatsen (010505)

Denna webbplats har "replikerats" (kopierats) till flera webbservrar för att kunna utnyttja olika egenskaper på de olika webbservrarna.

För närvarande finns dessa hemsidor på följande adresser (inom []-parenteser visas vilka teknologier som fungerar just på denna webbserver)

  • http://www.kiltedviking.net/se/www/ - detta är min officiella/ordinarie webbplats och är därför bäst uppdaterad (dock fungerar inte exempel servlets/JSP).
  • http://www.eki.mdh.se/personal/bpn01/www/ - en version från 2006 finns här (jag jobbar inte längre för högskolan så jag förväntar mig att denna version kommer försvinna inom kort).

(050306) Jag har inte varit vidare aktiv på andra webbservrar än den med min officiella webbsida, d.v.s. antalet servrar med "repliker" (eller uppdaterade sådana) har minskat. :-(

Litteraturförteckning

Nedan är några av de böcker jag använt mig av för att utveckla denna webbplats (Björns studiewebb).

  • Keith[05]: DOM Scripting with JavaScript and Document Object Model, Jeremy Keith, Friends of ED, 2005.
  • Siegel[98]: Killer Web Sites - Hur du skapar de bästa webbplatserna, David Siegel, Prentice Hall, 1998.
  • Tittel[98]: Hip Pocket Guide to HTML 4, Ed Tittel, m.fl., IDG Books, 1998.
  • York[07]: Beginnin CSS: Cascading Style Sheets for Web Design, 2nd Edition, Richard York, Wiley Publishing (Wrox), 2007.

| Till början på denna sida |

Om mig (070124)

Se min webbplats, www.kiltedviking.net, för information om mina intressen (och kort introduktion av mig samt min CV). (Mitt fulla namn är Björn Gustaf David Persson om ni undrar vad G:et och D:et gör i mitt namn längst ner på alla hemsidor. Dessa har lagts till för att, förhoppningsvis, göra mitt namn lite mer unikt - det fanns t.ex. fyra Björn Persson i Eskilstunas telefonkatalog. :-)

| Till början på denna sida |

Observera! (010524)

Denna webbplats är inte byggd 100% på vetenskaplig grund! Det kan m.a.o. finnas sakfel och antaganden utan vetenskaplig förankring. Sakfelen försöker jag åtgärda då jag lär mig mer om teknologin (eller efter påpekanden från andra). All kod har dock provkörts och fåtts att fungera under Windows NT4/2000/XP/2003. Antaganden är oftast mina egna och behöver inte reflektera min (tidigare) arbetsgivares samt kan ändras då jag lär mig mer och/eller får mer erfarenhet.

Webbplatsens hemsidor innehåller beskrivningar om hur teknologierna används och fungerar. Hemsidorna använder jag för att sammanfatta och dokumentera det jag (än så länge?) lärt mig om dessa teknologier samt för att förklara och ge exempel till studenter, på kurser jag undervisar, om hur de ska gå tillväga.

Eftersom webbplatsen "replikerats" till flera webbservrar så fungerar inte alla exempel på alla webbservrar då de eventuellt inte stödjer alla teknologier.

| Till början på denna sida |