Designet af denne webside

Baggrunden kort

Det startede egentligt som simpelt tidsfordriv. Vi havde købt os et domæne til mail, men jeg ville lige prøve at lave en forside til dette, og derfor begyndte jeg jo at rode med FrontPage.

Det gik rigtig hurtigt med at lave en lille side til vores domæne, og jeg var egentligt ret stolt af mig selv over at jeg mestrede denne disciplin, men så kig det galt. Jeg havde samtidigt installeret Firefox for at prøve denne som browser, og da jeg af nysgerrighed forsøgte at åbne siden med en anden browser end Microsofts Internet Explorer - så var det ikke sjovt længere. Det viste sig jo, at det var umuligt at lave en side i FrontPage, som jeg havde forestillet mig den skulle se ud, og så opnå det samme resultat i alle browsere.

Stædig som jeg er søgte jeg i diverse nyhedsgrupper og på hjemmesider på nettet for at finde årsagen til min fejl, men jeg fandt ikke noget entydigt. Jeg fandt dog, at jeg ikke kunne gennemskue de koder, som jeg havde genereret med FrontPage, og jeg besluttede mig derfor for at skrotte programmet og kastede mig de efterfølgende mange aftener over HTML-programmering og webdesign. Dette site er produktet af disse mange og lange aftener, og på denne side vil jeg ridse nogle af min mest interessante erfaringer op.

1. stadie: FrontPage

Som nævnt ovenfor, så var mit første stadie ud i webdesign Microsoft FrontPage. Det er absolut heller ikke noget dårligt stadie: Det er nemt at gå til, du kan lave en masse i en fart, og det forudsætter ikke nogen dybere forståelse for HTML. Jeg fik lavet nemt lavet den første hjemmeside, som du kan se her: Det første SkoustNET (virker bedst i Internet Explorer). Noget af det geniale ved FrontPage er, at man hurtigt opnår gode visuelle effekter så som skygger og gradienter på farverne. Det er et rent tegn og skriv program i stil med de øvrige i Officepakken, og kender man dem, så kommer man hurtigt i gang.

Problemet ved FrontPage er, at det laver en masse kode. En del af denne kode virker uigennemskuelig og rodet, og hvad værre er, en del af denne kode er Microsoft kode. Sidstnævnte kendes kun af Microsoft Internet Explorer, og gav således anledning til min store irritation.

2. stadie. HTML

Da jeg erkendte, at jeg var nødt til at forstå koderne for at finde fejlene på mine sider var der kun en vej. FrontPage blev skrottet til fordel for Notepad, og jeg kastede mig over de fremragende tutorials på HTML.dk. Det er hårdt arbejde, og det er helt fra grunden. Det medførte selvfølgelig, at alt det smarte var væk, til gengæld havde jeg fuldstændig kontrol over hvad der skete på siden. (Når koderne fungerede, som jeg forventede.)

Da det giver mig en mærkelig tilfredsstilledelse at gør det svært for mig selv, valgte jeg at skrive siderne i den seneste version af HTML, som er benævnt Extensible HyperText Markup Language (XHTML) udgave 1.0 i en såkaldt strict DTD opsætning. Det vil sige, at der er en lang række regler, som skal overholdes, og der må blandt andet ikke anvendes rammer, som jeg havde gjort tidligere i FrontPage. Til gengæld, burde alle browsere kunne forstå siderne og fortolke dem ens. Læs mere om de forskellige standarder på HTML.dk.

Når man har tastet en side i XHTML kan man benytte en validator til at checke koderne. World Wide Web Consortium (W3C), som er den organisation, som fastsætter netop standarderne for HTML, XHTML og de øvrige sprog, leverer en sådan validator. Når teksterne efter et par forsøg er blevet rettet til, og således overholder alle standarder, kan man få et lille billede som dette til venstre, som bekræfter standarden, og så er alle glade.

3. stadie. CSS

Når man nu har givet afkast på alle de grafiske hjælpemidler i Frontpage samt hjælpen fra rammerne til at styre opsætningen, så er man rimelig klar til at lære noget nyt, og svaret var oplagt: Cascading Style Sheets (CSS). CSS giver mulighed for centralt at definere en række layout og opsætningsmæssige forhold på sitet. Det vil sige, at man i en fil kan ændre alle farver, placeringer og skrifttyper med mere. Den centrale placering bevirker ikke alene, at det er nemt at opdatere layoutet, den gør også siderne meget mere overskuelige, da alle de mærkelige koder er renset ud og ligger ét sted væk fra tekstindholdet. Endelig giver CSS også mulighed for at anvende forskellige layouts på forskellige medier så som skærm og printer. Det er genialt!

I lighed med XHTML kan man benytte en validator fra W3C til at kontrollere sin CSS. Denne test resulterer i et lille billede, som bekræfter koden, når man efter en del forsøg har fået luset fejlene ud vel at mærke.

4. stadie. SSI

Da vores websted nåede op på omkring 20 sider mødte næste problem, og heldigvis også næste løsning. Det er temmelig frustrerende at rette en lille detalje i sidefoden, når sidefoden er beskrevet på samtlige sider. Med introduktionen af XHTML 1.0 strict var det jo ikke længere tilladt at bruge rammer til at lade menuer og sidefødder være statiske for et websted. Svaret fandt jeg heldigvis i næste tutorial på HTML.dk: Server Side Includes (SSI). Det er smart. SSI gør det muligt at opnå alt det smarte, som rammerne kunne, men på et endnu lavere plan, idet selv mindre kodestumper, som hyppigt anvendes kan isoleres i enkelte filer og placeres centralt.

Efter denne opdagelse blev alle siderne omdøbt fra .htm til .shtml. Dette er nødvendigt for at få serveren til at gennemføre SSI på siderne inden disse afvikles til klienterne. Desværre var jeg lidt for hurtigt ude, for meget kort efter ramte næste stadie.

5. stadie. ASP

Det går lynende hurtigt, og kort efter at jeg havde fået øjnene op for server side operationer fandt jeg en problemstilling, som netop kunne løses af serveren. Vi har på fællesområdet en side om den kommende Skanderborg festival, og på denne side skulle der jo i god stil være en nedtælling, som fortalte hvor mange dage der var til, at vi skulle skabe os helt vildt ude i en skov. Det var jo lige en opgave for serveren, så alle sider gennemgik atter en ny omdøbning fra .shtml til .asp hvilket står for Active Server Pages.

ASP giver jo nærmest utallige muligheder med webstedet, da man nu kan indlægge diverse programstumper og scripts på siderne, og der er således indhold nok til at fordrive aftnerne det næste års tid med at finde ud af alt dette.

Næste stadie???

Det er så her, at jeg er nået til. Der er ikke nogen tvivl om, at der kommer flere stadier på min erfaring med webdesign. Det er hyggeligt at arbejde med, og jeg finder det ganske afstressende efter en travl dag, at nørde med et nyt projekt.

Jeg kunne umiddelbart forestille mig, en række emner, som skal undersøges nærmere:

• Det kunne være inkludering af database i webstedet
• Eventuelt lidt eksperimenter med ASP.NET
• En nærmere undersøgelse af RSS-feeds.
• Hele grafikområdet har også vist sig interessant, så Photoshop skal måske gennemgås nærmere.
• Flash og animeret GIF???

Der er nok at gå i gang med, og samtidigt skal weber-grillen jo også passes her henover sommeren, så nu må vi se, hvad fremtiden bringer i nørd-hjørnet

Opfølgning pr. 1. oktober.

Nu har siden så snart kørt i et halvt års tid, og det er blevet til mange opfølgninger. Jeg har fået tilføjet RSS-feeds, som nævnt i listen ovenfor, og jeg arbejder pt. på at få lavet en gæste bog i en integreret database. Dagen i dag er gået med at rette fejl på siderne. Det viser sig jo, når man har lavet mange tilføjelser uden at validere siderne, at der sniger sig mange fejl ind. Senest har jeg haft en masse bøvl med image-mappet på forsiden. Jeg kunne ikke få det til at virke i Firefox. Det viste sig, at FF ikke kunne fortolke attributten map, når denne blev defineret med id. FF ville have den defineret med name. Det giver jo et dilemma, da XHTML ikke anvender name, kun id. Kompromisset blev, at anvende begge attributter, hvilket blev godkendt af begge browsere...

Opfølgning pr. 13. oktober.

Så er gæstebogen næsten færdig. Du finder den under gæsteområdet.

Der er lige lidt bøvl med at få skriverettigheder i databasen, men ellers er der jo ingen ben idet.

Lidt gode links til webdesign.

• HTML.dk er en uundværlig side til at lære alt det grundlæggende og finde spændende artikler om webdesign og HTML.
• Hjemmesideskolen en god side med mange gode ideer og vejledninger.
• W3schools.com En engelsk side i stil med HTML.dk, men med noget mere forskelligt indhold.
• W3C indeholder samtlige standarder. Her er læsestof til 146 år.