Har du planer om å skaffe deg en blogg eller et nettsted? Jeg kan gjøre jobben for deg! Hva det koster og om prosessen kan du lese i det neste innlegget.
Før du går videre dit kan det være lurt å få en viss forståelse av hva et nettsted er. Det er ikke nødvendig å forstå alt jeg skriver under her, men skum gjennom og se om du ikke snapper opp en ting eller to. 🙂
Du har sannsynligvis lang erfaring i å besøke nettsteder, men har ingen erfaring i å lage nettsider. Kanskje har du surfa rundt på Internett i årevis uten å tenke over hvorfor ting ser ut som de gjør. Nå skal du få lære:
- forskjellen på dynamiske og statiske nettsteder
- hvorfor vi skiller design og innhold
- viktigheten av god arkitektur og navigasjon
- hva ei nettside består av
Et nettsted kan bestå av alt fra en statisk nettside eller to – omtrent som et visittkort, til mange tusen dynamiske nettsider – slik som nettaviser. Felles for dem alle er at de består av en rekke koder som bestemmer henholdsvis utseende (CSS) og innhold (HTML).
Alle nettsteder ligger på domener. Domenet mitt heter altern.no. Har du en bedrift er det lurt å skaffe deg ditt eget domene og bruke en epostadresse med domenenavnet. Skal du derimot «bare» blogge – dele dine tanke med verden, kan du bli med i et bloggfelleskap, f.eks.:
Dynamisk vs. statisk
Dynamiske bruker CMS
Dynamiske nettsteder er i stadig forandring, slik som nettaviser. Nye artikler legges til og havner øverst på forsida, og dytter eldre saker nedover. Dynamiske nettsteder er som regel laget ved hjelp av en publiseringsløsning, såkalt CMS (Content Management System).
Det finnes dyre publiseringsløsninger og det finnes løsninger som er gratis og basert på delekultur. De lages på dugnad og brukerne bidrar gjerne i videreutviklingen av dem. Selv har jeg mest erfaring med disse to publiseringsløsningene, begge gratis:
Dynamiske nettsteder har alt innholdet liggende i databaser, mens en mal bestemmer utseendet. Publiseringsløsningen henter tekst m.m. fra databasen og legger det ut på nettstedet slik løsningen og malen bestemmer at det skal ligge.
Publiseringsløsningen gjør at du og evt. kolleger kan redigere nettstedet i nettleseren fra hvor som helst i verden, bare du har en nettilgang. Løsningen er imidlertid litt dyrere enn et statisk nettsted fordi du ikke bare trenger et webhotell, men også en database. Unntaket er om du dropper eget domene og dermed utgiften med eget webhotell.
Statiske lagres lokalt
Statiske nettsteder forandres sjelden – i hvert fall ikke like ofte som dynamiske. Et statisk nettsted er laget på en pc/mac og lastes opp på et webhotell for at det skal bli synlig for verden. Du trenger ikke leie database på webhotellet, så statiske sider er billigere enn dynamiske om du har ditt eget domene.
For å lage et statisk nettsted trenger du bare tre ting:
- Programvare til å lage nettsidene i. Jeg bruker Adobes Dreamweaver, men Notisblokk funker også.
- Et registrert domene og et webhotell.
- Et ftp-program til å laste filene opp på webhotellet. Dreamweaver har ftp innebygget.
Nettstedet kan bare oppdateres ved å lagre filer lokalt og laste filene opp på nett med ftp, du kan ikke redigere i nettleseren.
Design og innhold
I moderne nettutvikling er designet og innholdet skilt fra hverandre. La meg vise deg hvordan.
Se selv – HTML alene er kjedelig!
En nettside kan faktisk lages med kun bruk av Notisblokk/Notepad på pc’en. Prøv selv, det er ganske moro!
- Åpne Notisblokken (vindustast + r, skriv notepad og tast enter)
- Lim inn følgende tekst:
[code language=»html»]
<html>
<head>
<title>Min test</title>
</head>
<body>
<h1>Dette er min test</h1>
<p>Dette er et avsnitt. <strong>Dette er en uthevet tekst.</strong><p>
<p>Dette er andre avsnitt. </p>
<h2>Her kommer en underoverskrift/mellomtittel</h2>
</body>
</html>
[/code] - Lagre fila som test.html
- Finn fila og åpne den i en nettleser
Gratulerer, du har laget din første nettside! Gøy, ikke sant? Likevel, resultatet blir jo unektelig litt kjedelig når vi bare bruker HTML-koder. Her trengs det farger og bilder – det skal CSS hjelpe oss med!
Tre språk: HTML, CSS og PHP
HTML (HyperText Markup Language) er koden, språket, som gjør at du kan lese tekst og se bilder på Internett. Kodeelementene avgjør om et avsnitt er en overskrift eller brødtekst, om et ord skal være en lenke, uthevet eller vanlig tekst, om nettsida består av bare tekst eller også bilder.
Alle kodeelementer har en start, og en slutt angitt med skråstrek /, og innholdet er mellom disse to:
[code language=»html»]
<h1>Overskriften på sida er angitt med h1 for heading 1</h1>
<p>Første avsnitt. Normale avsnitt står med ’p’ for paragraph.</p>
[/code]
CSS (Cascading Style Sheets) er språket som bestemmer utseendet på nettsida, f.eks. farge på bakgrunn, hvordan lenker utheves etc.
PHP er et programmeringsspråk. PHP kan hente informasjon ut av en database og generer HTML-kode basert på denne informasjonen. PHP kan også generere HTML-kode uten database.
Design og innhold separert
Et nettsted består av design og innhold. Designet er definert i CSS-filer som bygges inn/lenkes til i nettsidene og/eller direkte i den enkelte nettside. Designet er gjerne likt på hele nettstedet.
Designet bør være responsivt, dvs. at designet tilpasses til det den som besøker nettstedet bruker: Stor pc, nettbrett, stor eller liten mobiltelefon.
Fordi innholdet og designet er separert kan man endre designet på et nettsted totalt – uten at innholdet forsvinner eller må redigeres.
CSS Zen garden viser hvor kult dette faktisk er, klikk deg gjerne inn på nettstedet deres og bli inspirert av alle de forskjellige designene.
Arkitektur og navigasjon
Et nettsted kan være fullt av nyttig informasjon, men samtidig totalt meningsløst hvis ingen finner informasjonen de søker. Med god arkitektur og fornuftig navigasjon sikrer du at dine besøkende finner det de skal.
Informasjonsarkitektur er det å strukturere informasjonen slik at den blir lett tilgjengelig for både mennesker og søkemotorer m.m. Det er brukerens behov – altså dem som besøker ditt nettsted – som er det viktigste: Hvordan kan vi gruppere og strukturere informasjonen slik at brukerne raskest mulig finner det de leter etter og/eller det som er nyttig/underholdende for dem?
Arkitektur henger altså sammen med målgruppa/målgruppene og formålet med nettstedet – hva ønsker vi at brukerne skal finne og gjøre på nettstedet?
Struktur på nettsida
Hvordan vi strukturer informasjonen på den enkelte nettsida er viktig. Ved å følge nettstandardene for HTML og CSS sikrer vi at alle – også blinde som surfer nettet med hjelp av leselist – lett finner fram.
Dette innebærer bl.a. å bruke h2 (overskrift 2), h3, h4 osv. for mellomtitler i en artikkel/innlegg, ikke bare utheve dem med <b> eller <strong>. Strukturen på en artikkel skal altså være (med tekstavsnitt og bilder innimellom):
- h1 – overskrift/tittel på saken
- h2 mellomtittel
- evt. h3 mellomtittel
- evt. h3 mellomtittel
- h2 mellomtittel
- evt. h3 mellomtittel
- evt. h3 mellomtittel
- h2 mellomtittel
En annen viktig standard å følge for at nettstedet ditt skal være i henhold til reglene for universell utforming er å alltid gi bilder en alternativ tekst, altså en beskrivelse som vises om bildet ikke vises.
Struktur på nettstedet
Å strukturere et nettsted kan sammenlignes med å flytte inn på et kjøkken: Å plassere ting som er «i slekt» sammen gjør det lettere å finne det du trenger. Plasserer du kjeler i tre forskjellige skap og samtidig blander dem med bakeboller, matvarer og såpe blir det vanskelig for både deg selv og gjester å finne tilbake – hva ligger hvor?
På et statisk nettsted innebærer dette å putte filer som hører sammen i samme mappe, og filer som ikke hører sammen med disse i andre mapper. På en blogg som denne handler det om å plassere innleggene i ulike kategorier og gi dem stikkord, slik at det går raskt å finne beslekta innlegg.
Navigasjon
Intern navigasjon på et nettsted kan skje på fem måter:
- Meny(er) og snarveier
- Nettstedskart
- Brødsmuler
- Søk
- Interne lenker
Meny
Standard plassering av menyer er i toppen, og i venstre og høyre sidefelt. Menyen kan ha ett eller flere nivå. Se f.eks. Dansesonen der vi har to «snarvei-menyer» i toppen, og en vertikal hovedmeny med to nivåer i venstre felt.
Strukturen i en slik hovedmeny gjenspeiler ofte strukturen på nettstedet (inndeling i mapper/kategorier), men er ikke nødvendigvis helt likt.
Nettstedskart
På Dansesonens nettsted har jeg også valg å plassere et nettstedskart i foten. Det er spesielt nyttig når man surfer på små telefoner og raskt vil finne og hoppe til andre relevante sider. Et slikt kart er det mulig å generere automatisk i WordPress – da gjelder det å ha strukturert sidene/innleggene sine på en god måte.
Brødsmuler
Som i eventyret om Hans og Grete legger vi en «sti av brødsmuler» på nettstedet, for å vise brukeren hvor hun er og hvordan hun kan gå bakover. Stien ligger gjerne mellom toppen og innholdet, se eksempel på Liv lagas nettsted. Hjem> Arbeid og meninger > Høringer > Høring om faglige krav
Søk
Større nettsted bør ha en søkefunksjon. Standard plassering av søkeboksen er oppe i høyre hjørne. På Internett gjelder det ofte å følge konvensjonene – det er ikke som i kunsten der man søker å unngå klisjer. Å ikke følge klisjene gjør at dine gjester ikke finner det de leter etter.
Et eksempel på hvor dårlig det er mulig å gjøre det er It’s learnings hjelpesider. Der er søkeboksen gjemt helt nederst i venstre hjørne! Den synlige søkeboksen på toppen søker bare etter ord på siden du befinner deg på, ikke etter relevante sider på hele nettstedet.
Interne lenker
Når man skriver tekst til en artikkel/side/innlegg er det lurt å spørre seg: Har vi andre relevante saker om dette temaet jeg bør henvise til? Hvis ja, lenk i teksten!
Ei nettsides oppbygging
Hode og kropp
Ei nettside har et hode (angitt med <head>) og en kropp (<body>). I hodet står kode som brukeren aldri ser, bort sett fra tittelen på sia (står oppe i venstre hjørnet i nettleseren). I hodet angis det hvilke(n) CSS-fil som styrer designet på sida, hvilke tegnkoding (utf eller Western) som er brukt, hvilken HTML-standard som følges m.m.
I kroppen står selve innholdet på sida: teksten, bildene, hva som er overskrift, normale avsnitt, punktlister osv. Kroppen kan være bygget opp av flere faste elementer.
Faste elementer
Alt som er felles på mer enn én side bør ligge i separate filer som inkluderes i selve side-fila. Det gjør vedlikeholdet av nettstedet mye enklere og sikrer at sidene på nettstedet alle inneholder den samme menyen osv. Slike faste elementer er:
- deler av hodeinnholdet
- topp: bilde, navn, logo og søkefelt etc.
- meny(er)
- bunn (kontaktinfo) etc.
- evt. andre elementer i sidefelt, slik som Facebook-boks
På dynamiske nettsteder kan du redigere disse faste elementene når du er logget inn som administrator. De ligger plassert et annet sted enn innholdet som er suverent for den enkelte side/artikkel/innlegg.
Med PHP er inkludering lett. Det gjør at også statiske sider kan ha faste elementer som bare oppdateres ett sted og dermed blir redigert likt på alle sidene.
Oppsummering
Kjennetegn ved dynamiske nettsteder:
- oppdateres ofte og gjerne av flere personer
- oppdateres i nettleseren
- bruker en publiseringsløsning og en database
- består ofte av svært mange nettsider
Kjennetegn ved statiske nettsteder:
- oppdateres sjeldnere og normalt kun fra én pc/mac
- bruker ftp
- består ofte av få nettsider
Design og innhold er separert for å enkelt kunne endre utseendet på nettstedet uten å måtte redigere innholdet. Innholdet er kodet med HTML, evt. med PHP som lager HTML-kode, mens designet er kodet med CSS.
Innholdet på nettstedet og den enkelte nettside må struktureres godt slik at alle besøkende finner det de skal raskt. Fornuftig bruk av navigasjonsmulighetene er også viktig.
Ei nettside består av et usynlig hode og en synlig kropp. Kroppen er normalt delt inn i faste elementer som er de samme på alle nettsidene på det nettstedet, og innhold som er unikt for dén sida.
Jeg håper denne informasjonen var nyttig for deg og at du nå vil hyre meg til å lage nettstedet/bloggen din! Sjekk lenkene under: