Oblig 06 – Enkelt nettsted

OPPGAVE:

For å oppnå en grunnleggende forståelse for HTML og CSS skal dere i denne oppgaven bygge opp et enkelt HTML nettsted som er stylet med CSS.

Nettstedet skal bestå av følgende elementer:

– Index side (Fremstille nettstedets innhold)

– 3 undersider med følgende tema:

– a. Historisk oversikt HTML og CSS (en kort skriftlig og visuell fremstilling: den visuelle fremstillingen kan gjerne være en collage eller en illustrasjon)

– b. Design på nett: linker til gode og mindre gode nettsider, hver link skal begrunnes

– c. Din egen erfaring med bruk og design av nettsteder.

PROSJEKTPLAN:

FREMDRIFTSPLAN:

PROBLEMSTILLING:

*Hvem er målgruppen og hva er konseptet?

Jeg tenker at målgruppen for dette nettstedet er de andre studentene på MMD, som er på samme linje som meg når det gjelder HTML og CSS. Det er også disse som med størst sannsynlighet vil finne siden og være interessert i å se hvordan jeg har løst oppgaven. Jeg er selv alltid nysgjerrig på å se hvordan andre elever har løst oppgaven. Vi utveklser inspirasjon til hverandre, og vi kan på dette enkle nettstedet lære noe oppbyggingen av HTML og CSS og historien bak, samt gode og mindre gode design på nettet. Siden er selvsagt også for eventuelle andre personer som måtte være interessert, som familie, venner, tanter og onkler og osv.

Hva ønsker jeg at brukerne skal gjøre på websiden min?

Jeg ønsker at brukerne skal finne lett frem etter det de søker og lett navigere seg frem og tilbake på alle nettsidene. Jeg vil at de skal finne innholde interessant og forstå innholdet. Jeg vil at de skal få et inntrykk som gjør at det sjøl blir inspirerte til sin evt oppgave, og få et flott visuelt inntrykk. Samtidig vil jeg at Brukeropplevelsen skal påvirkes av to ting: Det visuelle uttrykket og navigasjonsstrukturen.

Hva ønsker jeg med websiden min?

Jeg vil brukervennlige løsninger, og et design etter min stil og selvsagt et design som inspirerer andre. Navigasjon skal være lett tilgjengelig på alle undersider og Indexside. Den skal være lett å se og være på samme plass hele tiden. Jeg ønsker at nettsiden skal ha en flott sidestruktur, være stilren og inneholde få farger og være minimalistisk som mulig. Websiden skal være tiltrekkende for andre brukere, og være den siden som andre brukere vil oppsøke til evt sin oppgave. Ingress må være flytende og lesbart og Bidene må ha god optimaloppløsning. Jeg vil lage et design som holder seg innenfor regler om hva som skal til for å lage et brukervennlige nettside.

Hva skal være budskapet mitt?

Jeg vil ha en webside som først og fremst vise frem innholdet på en god måte, slik at budskapet på hver side kommer tydelig frem uten for mange distraksjoner på siden.Ønsker og at designet er såpass interessant at leseren får lyst til å bruke tid på å utforske siden enda mer enn bare Indexsiden.Siden skal være enkel å navigere seg rundt på slik at man lett kan finne frem til det man er mest interessert i å lese.
Nøkkelord til budskap: Minimalistisk, Tema, stilrent, frisk,fargerik og moderne.

Hva er mine mål ?

Gi websiden et seriøst og attraktivt design slik at brukeren stoler på meg. Jeg må få den viktigste informasjonen lett synlig og kun presentere relevant informasjon. Jeg må tilby et godt oppdatert innhold og benytte et språk som er tilpasset målgruppen min. Websiden må være tydelig, klikkbart og lett å få øye på, samt Lage en enklest mulig prosess for å oppnå hvert mål. Websiden skal gi medelever og andre personer som arbeider på samme linje som Mmd eller lignende en mulighet til raskt kunne finne faktastoff om CSS OG HTML, samt raskt finne linker til gode og mindre gode nettsider.

STRATEGI:

Jeg satte meg opp en strategiskisse slik at arbeidsprosessen går rett føre seg.Her er hva jeg kom opp med:

ANALYSE:

Jeg valgte enkelt å greit å Analysere meg selv, slik at jeg fikk en slags oversikt over hva jeg kan og ikke gjøre, hvordan et jeg kan løse eller gjøre det. Se her:

FAKTA OM WEB:

Enkle fakta om web:

Ulike begreper web`en kan ha:

Ulike typer nettsider:

Dette var lærerikt. Nå vet jeg vertfall at det er informasjonsnettside jeg skal lage. Så jeg må lage Websiden troverdig,sjenrøs og pålitelig, samt tiltrekkende.

BRAINSTORM MAP:

Under denne prosessen lot jeg blyantet flyte fritt rundt på papiret som den ville, og overraskende nok så kom det mye ned på papiret som jeg ikke hadde tenkt i det hele tatt. Slik ble resultatet:

INSPIRASJON Moodboard

Jeg har tatt utgangspunkt fra minimalistiske websider som inspirerer meg.
Alle gir inntrykk for at de er godt gjennomtenkt med både stil,tema og visuellt utrykk som gir et originalt og sterk formspråk. Det er dette jeg vil prøve å ta tak i, i min prosess.
Noen ganger er noen websider litt anonyme, selv om alt det andre er på plass, så jeg vil selv
gi en presentasjon av meg selv som personen som står bak websiden.

MINDMAP 1 av 3 trinn:

Jeg valgte å gå litt mer inn på minmap med menyer og bakgrunn, for å se hvilke ideer jeg kunne få før skisse prosessen. Jeg sliter enda med om dette skal ha et grafisk visuelt utrykk eller satse på typografi og minimalistisk.
Ut i fra noen av ordene valgte jeg å skisse dem, som en 3 trinns prosess:

Her har jeg fokusert på Bakgrunn,sidebar og header: 2 av 3:

Fokusert på meny/navbar: 3 av 3 trinn prosessen

Ja,er sikker på at jeg har fått flere ideer enn hva jeg hadde før jeg startet. Denne 3-trinns prosessen funket greit, men kan ikke se for meg det helheten på designet enda,bare når det kommer til detajler. Under frimerkeskissing får jeg nok det avklart.

MÅL JEG HAR SATT MEG:

-kommunisere visuelt med typografi,form og farge,animasjon?
-Siden skal være enkel
-Linkene skal være synlige
-Overskrifter og titler skal være tydelige om hva innholdet handler om
-Siden skal ha en fin struktur og orden
-Ikke tillate meg å mer enn 2 hovedfarger og 2 tillegsfarger.
-prøve å få til noe unikt på en av undersidene
-undersidene skal være linket med tag_blank
-Ha gode avsnitt mellom ingress
-ha god kunnskap om filer og ha lik størrelse på design bildene
-mappeinnholdet må være sortert
-testing i Dreamweaver må skje hver gang etter noe er endret,vil ikke overlate noe til tilfeldighetene
-sidene skal testet i firefox og ikke explore
-sidene må være tiltrekkene slik at brukeren ikke trykker seg inn på noen andres sider.
-Ha helhet i alle sidene.
-forholde meg til 2 typografier,men tykkelse og kursiv kan varieres etter behov,samt uthevet.
-Minimalistisk,men samtidig et moderne og tøft uttrykk
-inneholde Logo

FRIMERKESKISSING

INDEX:

Jeg begynte med å skisse Index siden, og tok med meg det jeg synes fungerte best i 3 trinn prosessen,slik ble det:

Det ble raske skisser, og blir gjort mer nøye i analoge skisser i Illustrator.

UNDERSIDER:

PHUuUuUu…. Det er mang måter å løse oppgaven på ser jeg. Først blir jeg bestem at ååå den kan jeg gå videre med, og så blir eg fort usikker igjen. Jeg er også redd for at noen av skissene kan hindre meg teknisk, men som jeg sier til meg selv så kan alt teknisk løses. Jeg syns jeg har komt opp med noen gode skisser her,som jeg vil ta med meg videre til analog skisse utkastene. Først så vil jeg lage Sitemap for nettsiden, slik vi har lært i tideligare aktiviteter.

SITEMAP:

En heilt enkel og greit sitemap. Vi fikk jo opplyst i oppgaven hvordan nettsidens innhold skulle bygges opp, her er nettstedets oppbygging. ( Jeg har forresten endret på CSS OG HTML siden, der er det ikke link til kildehenvisninger,da jeg fant ut at jeg tok dette med i videoen, jeg lagde i senere tid)
Index siden er hovedsiden/rooten, og så har vi 3 undersider som inneholder ulike materialer.

WIREFRAME ANALOG SKISSER-

Disse gjorde jeg helt enkle for å se hvilket av dem jeg ville jobbe videre med. Analog skissene har jeg tatt i utgangspunkt fra frimerkeskissene på papir. Nå kunne jeg se hva som fungerte og ikke fungerte. Jeg vil prøve meg å gå videre med nr 4 til Index siden. Da denne virker minimalistisk, samt stilren og vil fokusere på formspråk enn grafisk løsning.

Jeg gikk videre med nr 4 ,og laget en litt mer detaljert Wireframe:

Jg likte denne veldig godt og vil gå videre med den i Adobe Dreamweaver, jeg er ikke helt sikkert på hvordan undersidene vil bli enda så må sette meg ned å skisse wireframe der også.

ANALOG WIREFRAME SKISSER-UNDERSIDER.

Jeg ville gå for nr 6 og 5 her,slik at det står i litt stil til Index siden. Jeg vil ha en helhetlig side,slik at inntrykket til brukerene blir bra. Nå er jeg klar til å begynne å lage det gunnleggende i Dreamweaver.

DREAMWEAVER fundamentet:

Jeg har ikke begynt å Designe enda, har bare prøvd meg ut, for å teste mine kunnskaper med koder. Neste ting å gjøre er å lage presentasjonwireframe,før jeg begynner skikkelig å jobbe i Dreamweaver. Deretter er det å legge til Div tag og Logo/Header. Logo og elementer må jeg prøve å skisse i Photoshop.

WIREFRAME PRESENTASJON INDEX:

Index siden er hovesiden og er parents for alle undersider. Her vil jeg skrive litt om hva undersidene inneholder,og ta med siste arbeid,slik at de får et inntrykk eller en forventing om hva de får se på de andre sidene.

WIREFRAM PRESENTASJON- HTML & CSS:

Jeg har skreve tidligare at jeg ville komme opp med noe unikt, og da ble det å lage en video. Jeg har et ptogram som heter Windows moviemaker til å lage filmen, og må nok laste ned ett convertertings programm for å endre filformatet slik at det blir visst på Internett. Samtidig må jeg finne ut hvilket filformat som er det mest brukte på Internett.
Ellers har jeg valgt å ta opp menyen helt øverst siden jeg følte det passet bedre i og med at videoen vil ta stor plass,og vil dempe utrykket litt.

WIREFRAME PRESENTASJON- DESIGN:

Her vil jeg seperere ingressen i to kolloner som går vertikalt nedover. venstre kolonne skal inneholde bilder til gode og mindre gode design på nett,samt en begrunnelse og link til nettstedet. Høyre siden vil lette opp intrykket litt med typografi og mine favoritt design uten ingress under. Dette for å få en litt grafisk visuell inntrykk på siden.

WIREFRAME PRESENTASJON- ERFARING:

Erfaring siden slet jeg litt med. Men valgte også å dele contenten opp i 2 kolonner hvor venstre kolonne beskriver min erfaring gjennom arbeidsprosessen og høyre kolonne beskriver personen bak nettstedet. Vil også legge til signaturen min siden beskrivelsen er personlig. Legger også til link til wordpressen.

Alle sidene skal være midtstillte, og ha armslag rundt seg.

ELEMENTER:

Jeg har testet ut elementer til Nettsiden min, til både Index og undersider, som jeg utarbeidet i Photoshop. Jeg har også prøvd elementene i browser via Local datamaskinen,og såg at det var noen jeg måtte endre på. Ellers er jeg fornøyd med fargevalget, og er fast bestemt på å kun holde meg til få Hovudfarger og områdefarger. Vil nødig skape for mye forrstyrelser på nettsiden,så det er disse fargene jeg skal forholde meg til:

PROBLEMSTILLINGER JEG HAR HATT UNDERVEIS I DREAMWEAVER:

1:

-Jeg har ikke fått strukturert mappene og sider, (se til høyre i files-panelet)
-I inseert-panelet har jeg ikke fått til Bakgrunnen enda.
-Har ikke fått til å flytte Logo opp til Headlinen.
-Vett ikke enda hvordan jeg skal få til runde hjørner.

2

-Her har jeg fått til å rotet med margin og padding i insert tag`en og låste meg fast på hva jeg egentlig hadde gjort,da jeg forsøkte å midtstille siden.

3

-Her trodde jeg at jeg hadde løst problemet å midtstille siden ved å ordne på margin fra left and right til 140 px. Helt til jeg last opp siden i browser og endret på tørrelsen i webleseren. Da var jeg tilbake til null igjen når jeg såg at alle elemntene ble flyttet til hytt å pine.

4

-I desperate forsøk med å få siden til å være på midten uavhengig av webleserens størrelse ble bare alt enda mer kluss. Prøvde å endre bakgrunn ved å laste opp image i bakgrunn på insertpanelen under div tagen container header som jeg laget meg. Men da ble det bare slik…..

5

– Fikk problemer med at webadresses som vi fikk tilsendt ikke funket hos meg. Jeg passet på å skrive både små og store bokstaver som filene hadde. Lærereren hjalp meg med å fikse dette første gangen. Det samme skjedde i en seinere periode og klarte da å fikse det selv etter 6 timer…

6

-Etter som jeg utviklet mine kunnskaper og fikk mer forståelser for programmet,jobbet jeg enda mer raskere enn 2 knop båt. Det neste problemet jeg fikk var at det nye designet ikke viste i Nettleseren etter at jeg hadde endret det. ( Ikke via datamaskinen,men via url adressen) Jeg løste problemet selv til syvende og sist. Problemet var at jeg ikke hadde lagt inne filene på nytt ifra files-panelet til remote.servere. (dette kunne hun damen i FTP – html leksjonen OPPLYST OM)

7

– Dette problemet har vært det aller største! Det er å få vist videoen via url adressen og ikke bare via local. Jeg må ha omtrent lastet opp videoen 20 ganger før jeg virkelig fikk det til. Jeg er litt usikker på hva jeg gjorde rett den 20`ende gangen. Men jeg forsikret meg verfall om: at jeg hadde fjernet alt det gamle
: Scripts mappen ble loadet opp med 2 filer i.
: Videoen ble plassert i image mappen.
: en fil havnet i root mappen.
: Oppdaterte med å linka opp det meste på nytt på remote serveren

KONKLUSJON:

Jeg har lært mye av meg selv i løpet av denne perioden, og å beholde tolmodigheten på plass i svarte stunder har ikke vært lett. Det har vært kunnskapsrikt å lære seg et nytt program, nye koder og scripting. Jeg er glad for at vi har hatt en sånn oppgave, selv om dette er en av de oppgavet jeg har GRUET meg mest til i skoleåret. Nå kan jeg ta lærdommen min videre og hjelpe eks. søsteren min til å designet en webside til hennes malerier etter endt skoleår. Det er kjekt å kjenne til og kunne slike ting, selv det er
vanskeligt.

Det som har vært det kjekkeste i arbeidsprosessen er å jobbe med designet i
Dreamweaver og opprette koder. Det mindre kjekkere har vært oppsettet av designet og struktureringen av koder.

Jeg er og fornøyd med organiseringen av kodene i Html, og har tatt å benytte meg av
Logisk innrykk får å få en lett oversikt over hvilke elementer som er inneholdt hvor. Det gjorde det enklere å finne feil, og også enklere å flytte på deler av dokumentet.

LINK:
Enkel nettsted
http://elevarbeid.webstudent.no/dmk1_nettstudier/helga_westerheim/index_24.html

Rapport:

MMD_06_Helga_Westerheim_RPRT01_121012_001