You are currently browsing the monthly archive for January 2012.

I denne oppgaven skulle vi finne 10 nettsteder som er ulike i :

Innhold: nettstedets budskap og innhold i forhold til det.

Navigasjon:  Hvordan klikker de seg rundt på sidene

Oppbygging/design:  Hvordan siden er bygget opp med tanke på design (wireframe)

1. www.wspa-international.org/

Innhold/budskap:  WSPA står for World Sosciety for Protecting Animals, og er en nettside der det jobbes for å redde dyr i nød.  Budskapet kommer tydelig frem med både bilder og tekst, samt oppfrodringer til å donere penger eller delta på underskrifts kampanjer i land der dyr er lite verdsatt.

Navigasjon:  Det er plassert en navigasjons bar i venstre kolonne, med links til de andre sidene på nettstedet.  Det er i tillegg plassert et søke felt i høyre kolonne, der man kan søke innen nettstedet.  I tillegg er det linker til administrasjons sider helt øverst over logo feltet og nederst i footeren.

Oppbygging/design:  Nettsiden er enkelt oppbygget med tre vertikale kolonner, horisontal header og footer.  Fargene er holdt i lyse grått og alle viktige “knapper”, samt header er i orange.  Det gjør det lett å finne det man søker.

www.matoppskrift.no/

Innhold/budskap: Dette er en nettside med matoppskrifter, og det kommer tydelig frem gjennom bilder og tekst.

Navigasjon:  Siden har navigasons knappene horisontalt under header feltet.  Når man kommer til en ny side, får man en navbar i venstre kolonne der man kan klikke seg videre til neste level.  Siden har både intern søke felt og Google søke felt.

Oppbygging/design:  Det er ikke så lett å se hvor mange kolonner nettstedet har, da det varierer noe fra side til side.  Når man kommer til oppskriftene har de relativt liten plass på venstre side, mens mye reklame og linker til andre ting opptar mye av resten av siden.  På forsiden er også reklame dominerende, med et bredt reklamefelt plassert over heading feltet og også i høyre kolonnen.  Logoen er tydelig og plassert på venstre side av heading feltet.  Bakgrunnsfargen er hvit og tekst samt nav bar knappene er farget, noe som gir et rent intrykk.

www.seduce.no

Innhold/budskap:  Seduce selger klær og ascessories.  Dette kommer tydelig frem med både bilder og tekst.

Navigasjon: Siden har en oversiktlig hovedside med navigasjonsbar i venstre kolonne.  Alle bildene er til å klikke på og delt inn i hoved kategorier. Dette er gjennomført gjennom hele nettsiden.   Den har et søkefelt for interne søk.  videre har den lett oversiktlig link til handlekurv i venstre side av heading feltet.

Oppgygging/design: Nettstedet har en gjennomført struktur som er ryddig og oversiktlig.  Bildene er tydelige og hovedsiden har sterke farger.  Det består av 5 kolonner totalt. På produkt sidene er igjen navbaren i venstre kolonnen. De neste 4 kolonnene har bilder av produktene.  På hodedsiden er hoved delen slått sammen i et felt med horisontale skiller på produkt bilder/bilde linker.  Logoen er plassert i headingens venstre side.

www.realestate.com.au/buy

Innhold/budskap:  Jeg må innrømme at jeg ikke er helt sikker på budskapet på denne nettsiden.  url henviser til realestate, men jeg har mer følelse at det er et slags directory for realestate.

Navigasjon:  Nettstedets hovedside har en navigasjonsbar med knapper rett under heading feltet.  Det er videre en navigasjonsbar i venstre kolonne, samt tekst linker i øvre og nedre delen av header feltet.  Bilder og tekst i innholds feltet i midten er klikkbare, men fører noen ganger til andre nettsteder og noen ganger underliggende sider i nettstedet.  Det er søkemoterer flere steder, både på hovedsiden og når du klikker på linker.

Oppbygging/design:  Hovedsiden har et horisontal heading felt øverst, deretter et veldig bredt søkefelt, der man kan spesifisere hva man leter etter.  Resten av siden er delt inn i en venstre kolonne med navbar og informasjon, et tekstfelt i midten, der hoved innholdet er og en bred høyre kolonne for reklame.

www.hasbro.com/littlepetshop/en_us/

Innhold/budskap:  Det er ingen tvil overhodet om at dette er en nettside med leker/ting for barn.  Den er fargerik og har illustrasjoner av figurene/lekene, samt video snutter fra spill og video med musikk.

Navigasjon:  Siden har en navigasjons bar med knapper øverst i headingen.  Den har også linker til video, leker eller spill litt lenger nede på siden, og så et felt til med navigasjonsknapper nesten nederst.  Likevel føler jeg at det var vanskelig å finne frem, og at man må vite hva man er på jakt etter på denne siden.

Oppbygging/design:  På grunn av et urolig design syntes jeg ikke det var så lett å se hvordan byggeklossene er satt sammen.  Det virker som om den er bygget opp med flere horisontale lag, der noen av dem igjen er delt inn i små kolonner.

www.petsathome.com

Innhold/budskap:  Dette er en nettside som selger ting og tang til kjæledyr.  Da det er foto av dyr over hele forsiden, levner det ingen tvil om hva denne siden vil formidle.

Navigasjon: Siden har en horisontal navbar øverst rett under heading feltet.  Knappene skifter farge når man klikker på dem, og det kommer opp en dropdown meny med underliggende sider som tilhører den enkelte knappen.  Videre er det klikkbare linker på alle bilder og bokser på hoved siden.  Når du kommer til en ny side, er det en brødsmule sti øverst under headingen som forteller deg hvor du er.  Nederst i footeren, er det linker til informasjon om nettstedetm, som privacy poliscy, shipping info o.l.

Oppbygging/design: Siden er en salgsside, så produkter står i fokus på hovedsiden med gule buttons angående produkter på salg, slik at det er lett å kjøpe disse produktene.  Siden har hvit bakgrunn og navbar knapper i forskjellige farger.  På tross av alle tilbudene på hovedsiden, er det likevel et ren og tiltalende design.

www.buy.com

Innhold/budskap:  Buy er et nettsted som selger mange forskjellige produkter.  Det er mange bilder av produkter på hovedsiden, og den har et sitemap litt lenger ned på siden, der alle produktene er listet, noe som gjør det enkelt å forstå innholdet på nettstedet.

Navigasjon:  Det er plassert to horisontale navbars øverst under headingen.  I den øverste navbaren vises en dropdown meny når man klikker på knappene.  Det er i tillegg plassert en søk boks vedsiden av navbarene på høyre side. Når  du kommer inn på en ny side, ligger det en navbar på venstre side der man kan velge produkter relatert til den siden.  Enkel og grei navigasjon.

Oppbygging/design:  Designmessig likner buy.com Amazone i oppbygging.  Det er flere nivåer som etterhvert bringer deg til handlekurv og checkout.  På tross av mange produkter, virker hovedsiden ryddig og strukturert.  Den er på hvit bakgrunn og det er brukt rødt for å utheve det som er viktig for å lede kunden til å komme raskt til f.eks tilbuds varer.  Under sidene er ryddig oppbygget, med tydelige bilder av varene og enkel navigering videre.

www.fysiot.no/norwegian-physiotherapists

Innhold/budskap:  Dette er en informasjons side for Norske Fysioteraputers Forbund.  Sidene har mye tekst og lite annet å hvile øynene på enn tekst.  Siden har en stor og veldig tydelig logo, forstår man med en gang at det er en side om fysioterapi.

Navigasjon:  Det er plassert en navbar øverst på siden samt under headingen, samt en søkeboks på høyre side av heading feltet. Det er også lagt inn et brødsmule felt rett under navbaren.  Navbar knappene viser en dropdow meny når de blir klikket på.  Nå de underliggende sidene, kommer det opp en vertikal navbar i venstre kolonne med sider som er relatert til den man er på.

Oppbygging/design:  Siden har et veldig rent og enkelt design.  Den er bygget opp av heading, navbar, venstre kolonne, innholds felt og footer, og er likt bygget opp på alle sidene.  fargene er hvit, grå og lyse blå.

www.polymerclaycentral.com/

Innhold/budskap:  Dette er faktisk en av de ledende sidene på nettet om polymer clay.  Likevel syntes jeg det er litt merkelig, for den er så utrolid rotete av utseende.  Om det ikke var fordi det står Polymer clay central øverst, så kan man ikke finne ut ved første øyekast at det er en side om polymer clay.  Headingen/logoen til siden ser mer ut som en reklame boks enn en heading.

Navigasjon:  Nettstedet har navbar plassert i venstre kolonne, men den begynner ikke før under foldelinjen, noe som igjen gjør siden vanskelig å fostå.  Hoved tekst feltet har horisontale felt med klikkbar tekst, men jeg syntes at det også ser ut som reklame.  Det er også plassert en liten navbar horisontalt rett under heading feltet.

Oppbygging/design: Jeg synes dette nettstedet har et utrolig rotete og kaotisk utseende.  Selver headingen ser ut som reklame, det er plassert et reklamefelt rett over headinge også, som er med på å forsterke inntrykket.  De horisontale feltene i hoved tekst feltet ser også ut som reklame, og det er plassert mange forvirrende bokser over navbaren i venstre kolonne og i høyre kolonne.  Når man klikker seg til en annen side, endrer ofte både navbar og farger på designet seg, noe som gjør meg usikekr på om jeg fortsatt er på det samme nettstedet.  Enkelt ord er uthevet enten med store og fete bokstaver eller med en annen farge, men det er ingen helhet, da det er brukt forskjellig font fra felt til felt. Siden har klart definerte venstre og høyre kolonner, men alt annet virker sammenflytende og ustrukturert.

www.oswd.org/

Innhold/budskap:  Dette er et nettsted som designer templates for websider.  All tekst og bilder på siden referer til design, så budskapet er klart.

Navigasjon:  Linker til about us, sitematp osv er plassert helt øverst til høyre på siden.  Navbaren er plassert i venstre kolonne og forblir uforandret når man går inn på underliggende sider.  Navigasjonen er enkel og grei og lett å bruke.

Oppbygging/design:  Nettstedet har en tiltalende design der farger er brukt til å utheve enkelte ting.  Den virker ryddig og strukturert, samtidig som den er bruker vennlig.  Det er bygget opp med en venstre kolonne og et stort tekst felt som igjen er delt opp i 4 kolonner.  Siden har et heading felt, men det er ikke klart definert som horisontalt, men virker som om det består av flere elementer, og inneholder logo samt informasjon.

Advertisements

 

I disse to oppgavene skulle vi dele opp index.html filen i head og body element, lage en css side kalt index.css og linke den til index.html siden.

Deretter skulle vi legge inn font og farger på paragraf og header tekst elementene og teste det ut i en nettleser.

Jeg syntes det var greit å jobbe med Notepad.  Det var enkelt å se både html filen og css filen og å sjekke det ut i en nettleser, og det var enkelt å rette opp feilene med en gang.

Det å bruke id til å style siden gjorde det enkelt å lage css filen, og å få det ønskede utseende.  Å skifte font og farge på teksten og headingene var også veldig enkelt i css.  Det som var vanskelig var å finne feilen når noe ble galt.  Det var veldig lett å glemme et tegn, eller å snu <>.

Notepad var enkel å forholde seg til også fordi alle kodene/taggene fikk farge dersom de var riktige.  En annen farge betød at det var noe galt enten med den taggen eller den før/etter.

Når jeg hadde laget siden, flyttet jeg den til en annen mappe og det var ikke noe lurt. Da ble alle linkene feil og jeg måtte lage dem på nytt.  Så jeg forstår viktigheten av å ha alt på et sted og i riktige mapper.  Det å være strukturert og ryddig er viktig.  Det å bruke css gjør det mulig å lage en nettsides layout akurat hvordan man vil ha den.  Men, det er mye jobb og mange koder som må brukes både i html og css.  Det er lett å finne kodene man trenger på internet, men ikke så lett å alltid vite hvor de må skrives inn i dokumentet, så det blir mye prøving og feiling.

 

Jeg fant at det var relativt enkelt å lage denne siden.  Den største tekniske utfordringen jeg traff på var når jeg skulle ta en print screen av sidene.  Jeg har knappen på tastaturet, men den virket ikke. Brukte massevis av tid på å forsøke å finne ut hvorfor, men ga til slutt opp.  Brukte istedenfor snipping tool.

Den andre utfordringen var jo å få alt riktig. Det var veldig lett å glemme et tegn og så ble alt helt galt.

Det å følge rekkefølgen med hvilken tag som skal stå først og avsluttes først er også av og til en utfordring, men jeg har lært at de må avsluttes i motsatt rekkefølge enn de startet.  En dame sa en gang at html kan sammenliknes med å putte mange boller inni hverandre.  Du starter med de største og bollene bli mindre og mindre ettersom du putter dem oppi. Når du skal ta dem ut igjen begynner du innerst med de minste og fjerner dem en og en til du står igjen med den ytterste, største bollen.