En hjemmeside er et dokument på World Wide Web, en tjeneste på Internettet der blev udviklet omkring 1990. På daværende tidspunkt blev der gjort flere forsøg på at udvikle et system, hvor forskellige dokumenter kunne referere til hinanden. Bl.a. Tim Berners-Lee fra det europæiske institut for partikelfysik CERN, som udviklede et system bestående af:
- en server, hvor brugerne kunne have deres dokumenter liggende på.
- en browser, så det var muligt at se dokumenterne.
- en editor der gjorde det muligt at lave dokumenter.
Et hjemmesidedokument består af kode, der kaldes HTML (Hyper Text Markup Language). HTML-koden beskriver bl.a. skrifttype, skriftstørrelse, billeder samt links til andre dokumenter. På de fleste hjemmesider kan du se koden fra browserens menupunkt Vis -> Kilde . Prøv at se koden for dette dokument du er ved at læse lige nu, det ser temmelig kryptisk ud, men heldigvis kan forskellige programmer generere HTML-kode, så brugeren er fri for at huske alle de mystiske koder.
Der er mange måder at strukturere udviklingsforløbet for en hjemmeside. I dette oplæg foreslås at arbejdsgangen deles op i tre dele, en analysedel, en designdel og selv implementeringen. Metoden kan sammenlignes med et byggeprojekt. Analysedelen varetages af arkitekten, hvis opgave det er at svare på, hvad der skal bygges. Designdelen er ingeniørens opgave og giver svar på, hvordan byggeriet udføres. Implementeringsdelen udføres af håndværkeren, som realiserer selve byggeriet. I oplægget er der en række ideer til, hvordan hjemmesideudviklingen kan gribes an, men det er op til udvikleren selv, at fravælge og tilvælge metoder, der foreslås i dette oplæg.
Første gang du laver et website, kan du afprøve dine ideer på et af de gratis steder. Fx. er det muligt at oprette gratis hjemmesider på skysite.dk, www.webyen.dk og www.123hjemmesider.dk, hos din Internetudbyder er det sandsynligvis også muligt at oprette en hjemmeside, hvor du kan afprøve nogle ideer, inden du bruger penge på et webhotel.
I dette oplæg betegnes det enkelte dokument (inkl. billeder, links, video, lyd etc.) som en hjemmeside, mens alle hjemmesider knyttet til et domæne kaldes for et website.
Analyse
Nedenfor er opremset nogle af de overvejelser, det er hensigtsmæssigt at foretage i større eller mindre omfang, når man skal finde ud af, hvad ens website skal indeholde.
- Målgruppedefinition - hvem henvender dit website sig til? Med en definition af målgruppen bliver det nemmere at fastholde den røde tråd. Substansen i et website afhænger af om målgruppen er familie og venner, kunder, medlemmer af en forening eller en helt anden gruppe.
- Website-kategorisering – i forlængelse af målgruppedefinition kan det af samme årsag være hensigtsmæssigt, at gøre sig nogle tanker om hvilken type website der skal udvikles. Er det et website der skal promovere produkter, er det et privat website eller er det et website i foreningsmiljøet?
- Disposition omfattende tidsplan og arbejdsdeling – opgaveformulering, uddelegering af opgaver og milepæle hjælper til, at udviklingsforløbet ikke løber af sporet.
- Skitse – lav et udkast til lay-out samt oversigt over hierarki af undersider.
- Inspiration fra andre lignende websites – hvorfor genopfinde den dybe tallerken, genbrug gerne andres gode ideer.
- Metoder – overvej arbejdsmetoder der skal anvendes i udviklingsforløbet, fx. top-down, bottom up, prototyping, vandfaldsmetode ...
- Indsamle materiale - links og illustrationsmateriale bør indsamles i rigelige mængder. Indsamlet materiale bør være aktuelt, informativt og relevant.
- Bestem i hvilket omfang weblog, RSS-feeds, podcast, debatforum, Youtube, gæstebog, facebook og lignende skal anvendes.
Design
I designdelen udskiftes arkitektkasketten med ingeniørkasketten. Med udgangspunkt i skitsen udarbejdet i analysedelen uddybes, hvordan dit website skal realiseres. Lay-out skal præciseres, vær særlig opmærksom på, hvordan funktionalitet, interaktivitet samt hjælp/fejlfinding udføres. Sammenfattende understøtter et godt design:
- Vedligeholdelsesvenlighed.
- Modularitet.
- Kort accesstid – fx. max. 50 kb pr.side.
- At budskabet er klart, tydeligt og ensartet.
- Sprogbrug afpasset målgruppe.
- Simpel teknik.
- Dynamiske og interaktive faciliteter.
Webdesign handler om at formidle information på en måde, der på afgørende punkter adskiller sig fra traditionelle medier. Websites understøtter interaktiv informationsformidling samt adgang til al information på internettet. Et godt webdesign er kendetegnet ved, at det er nemt og hurtigt at finde information.
Implementering
Nu er beskrevet, hvad og hvordan dit website skal laves. Håndværkerne skal tilkaldes og alle hjemmesiderne skal genereres i et website, som lægges ud på World Wide Web. Det er muligt at formidle et budskab på en ny og revolutionerende måde, World Wide Web er:
- Et multimedieværktøj der udover at formidle text, kan formidle grafik, billeder, video, lyd etc.
- nem adgang til information. Ved hjælp af. links er det nemt at surfe rundt på Internettet og tilegne sig viden fra alle andre hjemmesider.
- Udover HTML så anvendes også værktøjerne scripts, PHP, ASP, flash, CSS o.lign.
For at lave HTMLdokumenter skal der tilføjes HTML-koder til det oprindelige dokument, hvorefter det kan vises i en browser. Se figur 1.
Figur 1 : I dette afsnit gennemgås hvordan du udfører trin II og III.
Det er muligt, og kan til tider også være nødvendigt, at skrive HTMLkoder direkte ind i sit dokument i en simpel editor, som fx. Notesblok uden brug af hjælpemidler. Men det er besværligt og ressourcekrævende med stor sandsynlighed for mange fejl. Heldigvis findes værktøjer, som gør det noget nemmere at lave et HTMLdokument.
Kompozer er en WYSIWYG-editor (WYSIWYG = What You See Is What You Get), dvs. en arbejdsplads til et dokument, hvor det brugeren skriver, bliver vist som det præsenteres i en browser. Mens der arbejdes med dokumentet, kan editorens værktøjer anvendes og det vil være muligt umiddelbart at se, hvordan ændringer præsenteres i en browser. Markeres en del af texten til at være fed, så vises den umiddelbart fed. Markerer du, at der skal være et link, så vises der et link etc. Til sidst gemmes dokumentet som et HTMLdokument med alle dets koder og instruxer.
Trellian, WebPage, Dreamweaver, Amaya og FrontPage er andre eksempler på WYSIWYG-editorer. Det kan også være nødvendigt at anvende andre programmer under udviklingen af et HTMLdokument, fx. programmer til billedbehandling, tegninger, animationer, database, online programafvikling etc.
Til sidst skal dokumentet lægges ud på nettet. Dokumentet gemmes på den server, hvorfra ens website er tilgængeligt. For at overføre dokumenter fra ens egen computer til serveren skal man have et filoverførselsprogram, jeg anvender CuteFtp, men stifinder i Windows kan også bruges.
Figur 2 : Der anvendes adskillige programmer til udviklingen af en hjemmeside.
HTML – et exempel
HTML består af instruktioner, der definerer, hvordan browsere skal præsentere et givent dokument. Texten til en hjemmeside er i princippet en lang sekvens af tegn, brudt op af koder, der bestemmer, hvor der skal være linieskift, mellemrum, kursiv, spalter, formularer og meget, meget mere.
Men den vigtigste egenskab ved HTML er, at du kan surfe på internettet. Med et enkelt klik på musen er du i stand til at springe fra en hjemmeside til en anden, uanset hvor i verden den befinder sig. Med hjemmesider lavet i HTMLkode har du nem adgang til enorme mængder information.
Koden for et link kan se sådan her ud:
<A HREF="http://www.astronomibladet.dk">Astronomibladet</A>
Prøv at gå ind på en hjemmeside, vælg Kilde... fra menupunktet Vis og prøv om du kan finde koden til et link.
Som minimum består en hjemmeside af følgende koder :
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Exemplet fortæller browseren, at nu indlæses et dokument skrevet i HTML-kode, i headeren er der ingen information om dokumentet. Og i body-delen er der hverken skrevet text, indsat billeder eller anden information som browseren skal gengive.
I det følgende kan du se et dokument anvende forskellige HTML-koder. I højremargenen beskriver jeg i kommentarkoder, hvad der sker undervejs <!-- dette er kommentarkode -->.
Ovenstående exempel vil i en browser komme til at se sådan ud :
For overskuelighedens skyld har jeg forsimplet koden, fx. er udeladt hvordan HTML håndterer æ, ø og å. Vil du se den rå HTMLkode, så gå ind på hjemmeside, i browseren klikker du på Vis og vælg Kilde fra menubjælken.
Her kan du få mer viden om html:
www.dina.kvl.dk/~sestoft/databehandling/html1.html
www.html.dk
http://www.echoecho.com/dk/htmlbasics01.htm
Noget om CSS
CSS (Cascading Style Sheets) understøtter udvikling af hjemmeside-layout. Hjemmesidens udseende struktureres og gøres ensartet med CSS. Style Sheets er ikke en del af html-standarden, men et værktøj der letter vedligeholdelsen af hjemmeside-layoutet. Med stilark eller CSS-skabeloner defineres, hvordan hele dokumentet skal se ud.
Fonte, skriftstørrelse, indsættelse af billedmateriale, marginer og meget mere kan styres med Style Sheet. CSS kan styre en del af et dokument, et helt dokument eller flere dokumenter. Det er især når CSS anvendes ved flere dokumenter, at det bliver et stærkt redskab.
Hvis CSS anvendes på en del af et dokument, så tilføjes CSS-kode til <P>koden. <P>koden er en HTML-kommando og definerer et afsnit. Følgende exempel på CSS-kode sikrer ensartet font, farve og position: <P STYLE="font-family: skrifttype; color: farve; margin-top: position">
Hvis en skabelon skal gælde for et helt dokument, erklæres CSS-koden i dokumentets header efter følgende syntax :
<STYLE TYPE=TEXT/CSS>
font-family {skrifttype}
color {farve}
margin-top {position}
</STYLE>
Hvis den samme skabelon skal anvendes til flere dokumenter oprettes en fil, hvis indhold overholder følgende syntax :
font-family {skrifttype}
color {farve}
margin-top {position}
Dokumenterne der skal anvende skabelonen, skal have følgende link :
<LINK REL=STYLE TYPE=TEXT/CSS SRC=sti> sti angiver, hvor skabelonen skal hentes fra.
Her kan du finde mere viden om CSS:
http://www.html.dk/tutorials/css/
http://www.w3.org/Style/
Noget om PHP
Ganske kort fortalt så er PHP et open source programmeringssprog, der er meget anvendt til udvikling af web-applikationer. Det kan afvikles på mange forskellige platforme og er et "serverside" sprog. D.v.s at koden afvikles på serveren, inden den sendes til klienten, i modsætning til f.eks. Javascript, der afvikles af klienten.
PHP ligner c-kode, hvilket illustreres med følgende tre eksempler.
Eksempel på sekventiel kontrolstruktur:
<?php
echo ”Hello world”;
?>
Eksempel på selektiv kontrolstruktur:
<?php
if condition {
print ”Betingelse er sand”;
}
else {
print ”Betingelse er falsk”;
}
?>
Eksempel på iterativ kontrolstruktur:
<?php
$count = 10;
while ($i < $count) {
$i++;
echo ”$i . – gennemløb”;
}
?>
Her kan du få mere at vide om php:
www.phpartikler.dk/
lacweb.dk/phpweb/index.htm
www.udvikleren.dk/PHP/Article.aspx/340/
Noget om javascript
Hvor PHP og ASP afvikles på serveren, så afvikles javascript på klienten, dvs. på brugerens computer. Javascript er et objektorienteret sprog, der bla. omfatter objekter tilknyttet til HTML-elementer. Nedenfor vises eksempel på kode i javascript, som omfatter en if-sætning og en løkke. I eksemplet kaldes objektet document og metoden write.
if (condition) {
document.write("Sand betingelse")
}
else {
document.write("Falsk betingelse")
};
count=10;
i=1;
while (i<count)
{
i++;
document.writeln(i);
document.writeln(" gennemløb ");
};
Du kan få mere at vide om java her:
www.udvikleren.dk/Java/Article.aspx/344/
www.udvikleren.dk/JavaScript/Article.aspx/100/
www.w3schools.com/js/default.asp
Noget om Flash
Flash teknologen er en populær metode til at tilføje animation, interaktivitet og lignende. Flash understøtter vektorgrafik, hvilket er en effektiv matematisk måde at præsentere grafik. Ofte vil grafik blive præsenteret bedre og fylde mindre end andre metoder til at præsentere grafik. Desuden er det nemt at udvikle Flash, da brugeren ikke behøver at have kendskab til programmering.
Du kan få mere at vide om flash her:
http://www.echoecho.com/dk/flash.htm
http://www.w3schools.com/flash/flash_intro.asp
http://www.designstart.dk/help.php
CMS
Ovenfor er gennemgået de værktøjer, der anvendes i udviklingen af et website. Mange vælger at bruge et CMS. Content Management System (CMS) er et værktøj, som samler og integrerer de forskellige www-teknologier på den ene side og på den anden side skaber en brugergrænseflade, der gør det så let for brugeren som muligt at generere et website.
Der findes mange forskellige bud på CMS, her links til nogle af dem:
http://moski2.net/
www.joomla.org/
http://sitemagic.dk/
http://php.opensourcecms.com/
Afslutning
Nu er dit website forhåbentlig færdigt, lagt op på serveren og tilgængeligt for alle på Internettet. Men husk det skal vedligeholdes. Ofte forekommer mindre fejl, som skal rettes. Desuden skal det opdateres jævnligt, så det færdige website hele tiden opfylder kravene til aktualitet, relevans og informationsværdi. I en virksomhed eller forening bør der være en person eller arbejdsgruppe, som er ansvarlig for opdateringen af det enkelte website.
Her kan du få mere at vide om website-udvikling:
www.webdesign101.dk
lacweb.dk
www.udvikleren.dk
www.designstart.dk
Oprettet februar 2011,
sidst opdateret februar 2011.