Vinterbilder!

Noen flere bilder fra bilturen. Norge er utrolig vakkert!

3 bilder fra en reise på en mobil enhet

Obligatorisk Oppgave 06

Rapport

Research

I løpet av de årene jeg har benyttet PC flittig har jeg sett ganske mange nettsteder og nettsider, men jeg har aldri tenkt noe særlig over design og koding av sidene. Så første steg på veien var å titte på design, koding og nyttige funkjoner nettsteder har. En del av oppgaven var jo å se på bra og mindre bra nettsteder, og dette gjorde jeg i løpet av denne fasen av oppgaven. Jeg følte ikke at jeg ble spesielt klok på koding mens jeg gjorde dette, mye av det jeg så på var rett og slett ganske uforståelig på grunn av min daværende lille kunnskap om tags. Men i løpet av de tre ukene ble det etter hvert enklere å skjønne hva som er hva, hvordan HTML og CSS fungerer og strukturen på ting.

Jeg har brukt mye tid på å lære alt det grunnleggende av koding i både HTML og CSS. Nå skjønner jeg godt hvordan det skal gjøres, men tror kanskje det trengs litt mer øvelse for å få til noe skikkelig spennende innen webdesign. Men det grunnleggende innen koding føler jeg at jeg mestrer nå!

Til slutt i research fasen min samlet jeg all den informasjonen jeg ville ha på nettstedet mitt, da i hovedsak de 10 nettstedene jeg har linket til og den historiske oversikten over HTML og CSS. Personlig erfaring følte jeg at det var bedre å skrive etter at jeg hadde begynt med design på nettstedet mitt, slik at jeg faktisk hadde litt.. erfaring. J

Planlegging

Etter å ha samlet informasjon, lært litt mer om HTML og CSS og sett på eksisterende nettsteder for å finne ut av hva som er bra å gjøre og hva som helst bør unngås, skisset jeg ned noen wireframes til nettstedet jeg skulle produsere. Jeg valgte hovedsaklig denne ”boks-layouten” fordi jeg synes slike nettsteder ser oversiktlig og pene ut selv. Men også fordi den gir god funksjonalitet til design. For eksempel kan man være kreativ med bakgrunn, header og elementer rundt boksen uten at hovedinnholdet mister fokus og oversiktlighet. Layouten gir også gode printermuligheter om det skulle være ønskelig for brukeren.

Deretter strukturerte jeg all teksten jeg ville ha med på nettstedet i Word for å ha oversikt selv og for å gjøre det enklere for meg selv senere. Jeg brukte enkel formatering i Word og prøvde å importere dette til Dreamweaver. Det gikk stort sett bra, men litt omformatering ble det i Dreamweaver. Jeg byttet for eksempel ut en del ”</br>-tags” med ”<p>-tags” istedet for å skape litt luft og bedre flyt i teksten.

Deretter opprettet jeg en template til mappestruktur for meg selv. Templaten ser slik ut:

website

• css
• img
• js
• mov
• source (spesielt ikon)
• swf
• text

Når jeg opprettet mappestrukturen var det ikke med tanke på akkurat dette nettstedet, men mer på webdesign generelt. Derfor er det flere undermapper i templaten min enn det som trengs til denne oppgaven, men de er det jo bare å slette! Jeg lagde en generell mappestruktur i tilfelle jeg vil lage flere websider i framtiden, og da er det greit å forholde seg til ett oppsett istedet for å skifte fra oppgave til oppgave. Navngivningen er betydningsfull for både meg og andre som skulle øsnke å se i mappen og inneholder det meste du finner på et nettsted: css, bilder, java script, filmer, flash og tekst filer. Source filen, som jeg har angitt med et annet ikon enn de andre mappene, er mappen hvor jeg laster opp all informasjonen til nettstedet før jeg begynner med produksjon. Den gir meg oversikt over alt innholdet og alle elementene jeg har på siden på en enkel måte. Denne filen slettes før folderen lastes opp på en webserver.

Da var mappestrukturen på plass og så var det å organisere seg i Dreamweaver. Jeg opprettet en ny site og linket til mappestrukturen og bildefolderen i den. Deretter opprettet jeg de fire .html sidene som skulle være på nettstedet, la til tekst på hver enkelt side og sjekket og oppdaterte til riktige tags på alle elementene. Jeg la også til lister for å samle relevant informasjon. På index siden er det en ”unordered list” på oversikten over hva som befinner seg på nettstedet. På links siden organiserte jeg informasjonen i en ”definition list”.

Til slutt i planleggingsfasen lagde jeg bilder og andre sideelementer. Jeg har ikke vektlagt innovativ og flott design i denne oppgaven, da dette ikke var hovedmålet med oppgaven. Men jeg har lagd enkle illustrasjoner og elementer til siden for at designet jeg har valgt skulle fungere. Hadde oppgaven handlet om design ville det nok ha sett litt annerledes ut…

Teknisk Utførelse

Da var planleggingen over, jeg har all informasjonen jeg vil ha strukturert og klar og jeg har en generell anelse om hva jeg er ute etter layoutmessig. Nå er det bare å sette igang!

Det første jeg gjorde var å linke de fire sidene slik at de henger sammen. Jeg sjekket at det fungerte i Firefox og fortsatte med CSS.

Så opprettet jeg et nytt CSS dokument og knyttet det til alle de fire sidene mine og satte igang med styling.

For informasjon som skal være likt i hele dokumentet stylet jeg <body> taggen, det gjør det lett for meg å gjøre store endringer. Informasjonen jeg ville skulle være lik på alle sidene er:

• font familien
• font fargen
• bakgrunnsbildet
• tekst posisjon

For å gi elementer på sidene egen styling har jeg delt opp siden i 4 ID bokser: #navigasjon, #ingress, #mainContent og #contentBox. Nå er det enkelt for meg å forandre stilen på disse elementene akkurat slik jeg vil ha de uten at det berører de andre elementene på siden.

Jeg har også stylet header tags <h1> og <h2> individuelt slik at de skiller seg ut fra resten. Siden jeg vil at alle <h1> og <h2> taggene skal se like ut på alle sidene slipper jeg å legge til noen ID eller class på disse elementene. Slik vil nettidene mine ha konsistente header tags og skape helhet på nettstedet.

For å forenkle navigasjon på siden har jeg brukt CSS på linkene. Før du trykker på noe som helst skal de ha den oransje fargen som bakgrunnen har, på sider du har besøkt vil de skifte farge til en lys gråblå, om du muser over en link skifter den farge til hvit med en svart boks rundt og om du trykker på en link vil den blinke rødt i et sekund for å indikere at du nå skifter side. Dette gjør det enklere for brukeren å holde oversikt over hva som foregår.

#contentBox fant jeg en fin tutorial på for å lage. Du tegner en ”AP div” direkte inn i dokumentet og drar teksten du vil ha med i den inn i boksen. For å duplisere effekten på de andre sidene la jeg til div taggen med ”wrap around selection”. Jeg har stylet denne boksen slik at den er sentrert og skaleres med nettleseren du benytter. Da vil den passe på de fleste skjermer uten noen problemer!

Det foregikk en del prøving og feiling før jeg fikk CSSen til å fungere slik jeg ville, men det ble til slutt. Deretter la jeg til bilder og andre elementer på nettstedet og testet resultatet i nettleseren igjen. Endelig var siden klar til å lastes opp på FTP serveren!

The Grand Finalé

Etter at jeg hadde lastet opp filen på FTP serveren og testet at det fungerer var det bare å skrive rapport igjen! Og det har jeg nå også gjort.. Men jeg synes disse tre ukene har vært utrolig lærerike og spennende. Det har vært veldig gøy å jobbe med HTML og CSS. J I alle fall når man har Dreamweaver… Det gjør livet mye lettere!

Link til siden

Margrét, HTML og CSS

CSS – Position

Det jeg har gjort her er å legge til en div id på alle paragrafelementene mine slik at de kan styres separat. Jeg la til absolute verdier på alle taggene, og skjønte ikke helt hvorfor den under ikke hoppet opp slik det sto forklart i HTML leksjonen. Men fant ut av at det skjer bare hvis du flytter f. eks. den midterste p taggen med absolute og lar de andre to forbli “static”.  Om jeg forandrer på det slik det sikkert er tenkt i oppgaven blir det seende slik ut:

Med relative positioning flytter du bare elementet relativt til posisjonen det har statisk i dokumentet. Så om jeg da velger å flytte den midterste taggen min vil den nederste taggen framdeles holde samme posisjon fordi den relative taggen er en del av dokumentet enda.

Her er en print screen av de tre elementene med float tatt i bruk. Den øverste taggen har statisk positioning, den midterste taggen har float:right, og den nederste taggen har clear:both.

Obligatorisk Oppgave 06 – 5 Bra Nettsteder

http://www.ungarbage.com/

Oversiktlig, lett tilgjengelig informasjon og en ganske nyttig side!

http://ellislab.com/

Pen, informativ og enkelt navigerbar.

http://business-paper.dk/cms.ashx/login

Fine farger! Skjønner hva den dreier seg om med en gang og lett å finne fram til det du er ute etter.

http://carfreaks.net/

Lekkert design, informativ, enkel å navigere.

http://www.theconsult.com/

Ryddig og oversiktlig med enkelt og pent design.

Obligatorisk Oppgave 06 – 5 Dårlige Nettsteder

http://www.dokimos.org/ajff/

Ja.. Ord kan ikke beskrive hvor dårlig dette nettstedet er. Ikke klikk på linken om du har epilepsi!

http://www.thomasedison.org/main.htm

Merk: Dette er en side om informasjon og oppfinnelser. Men til tross for dette har de gjort alt de kan for å gjemme informasjonen! For det første er det en flash side, de fleste browsere støtter riktignok flash og de fleste maskiner kan kjøre det i dag, men det funker ikke for alle. Når du kommer inn på siden spiller i grunn ingen rolle, den er totalt forvirrende uansett. Umulig å lese mye av skriften, om det går an å navigere denne spiralen er jeg usikker på. Fant i alle fall ikke ut av det.

http://yvettesbridalformal.com/

Hun er kanskje flink til å designe kjoler, men websider er absolutt ikke hennes sterke side.

http://www.lingscars.com/

Dette er faktisk et seriøst firma i USA! De gjør det visst ganske bra også. Men de burde kanskje investere litt i webdesign..

http://www.cafeintl.net/

I grunn et stilig konsept, men ikke så bra gjennomført. Musikken som er lagt til på siden er plagsom, men det går heldigvis an å skru den av. Siden hadde fungert mye bedre om de hadde oppdatert menyene med en web vennlig font slik at det går an å lese det som står uten å måtte klikke på alt.

Obligatorisk Oppgave 06 – HTML & CSS Historie

HTML er et utviklingsspråk. Det tar aldri lang tid før nye standarer og spesifikasjoner blir utviklet for å gjøre det enklere å lage penere og mer effektive nettsider.

HTML 1.0

HTML 1.0 er den første versjonen av HTML lansert. Det var ikke så mange webutviklere på denne tiden, og språket var veldig begrenset. Du kunne ikke gjøre mye annet enn å få en enkel tekst publisert på internett. Men bare dette gjorde folk oppspillt på den tiden.

HTML 2.0

HTML 2.0 inkluderte alt fra de originale 1.0 spesifikasjonene, men tilføyde noen nye egenskaper. HTML 2.0 var standaren innen webdesign helt til januar i 1997 og definerte mange av egenskapene for HTML.

HTML 3.0

Stadig flere mennesker hadde begynt å ta i bruk HTML nå, og selv om de tidligere standarene hadde mange nyttige egenskaper for Webmasters (som de ble kalt), ville de ha flere muligheter og tags å jobbe med for å forbedre utseende på nettsidene sine.

Og nå ble det trøbbel..  Netscape var den klare ledende aktøren innen WebBrowsere med sin browser kalt Netscape Navigator. For å blidgjøre HTML forfatterne introduserte de ”proprietary tags”  og attributer i Netscape Navigator. Disse nye egenskapene ble kalt ”Netscape extension tags”. Dette skapte store problemer når andre browsere forsøkte å gjenskape disse taggene slik at de ikke ble hengende igjen, men de greide ikke å få browserne sine til å vise informasjonen på samme måte som Netscape Navigator. Som betydde at om du utviklet siden din med Netscape Ets, ville den se annerledes ut i andre browsere. Dette førte til forvirring og irritasjon.

På denne tiden utviklet en HTML arbeidsgruppe, ledet av Dave Raggett, et nytt HTML utkast, HTML 3.0. Det introduserte mange nye og forbedrede funksjoner for HTML, og lovet større muligheter for webdesign. Men desverre brukte browserne utrolig lang tid på å implementere de nye forbedringene, noen ganger la de bare til noen få og lot andre bli utelatt. Noe av dette skyldes størrelsen av overhalningen, og derfor ble HTML 3.0 spesifikasjonene forlatt.

Heldigvis bemerket utviklerne seg dette og videre versjoner ble utviklet i etapper, slik at det ble enklere for browsere å oppdatere seg.

HTML 3.2

Browsere fortsatte å utvikle egene tags, og det var tydelig at en standard måtte settes. For dette formålet ble World Wide Wev Consortium (W3C) grunnlagt i 1994 for å standarisere språket og utvikle det i den riktige retningen. Deres første lansering var en kode kalt WILBUR som senere ble til HTML 3.2. Dette var en ned tonet versjon av de eksisterende standarene som utelot mange av de store stegene framover til senere versjoner. De fleste av tagsene som ble introdusert i Netscape ble ikke med i denne versjonen. HTML 3.2 ble fort anerkjent og ble den nye standaren i januar 1997, og i dag støtter de aller fleste browsere denne standaren helt.

HTML 4.01

HTML 4.0 var en stor utvikling av alle HTML standarene, og den siste gjennomkjøringen av klassisk HTML. Tidlig i utviklingfasen hadde  den navnet COUGAR. Det fleste av de nye funksjonene introdusert med denne standaren stammer fra HTML 3.0 spesifikasjonene, samt oppdateringer av gamle tags, fokus på globalisering, og støtte for HTMLs nye presentasjonsspråk Cascading Style Sheets (CSS).

HTML 4.0 ble anbefalt av W3C i desember 1997 og ble den offisielle standaren i april 1998. Mocrosoft oppdaterte browseren sin Internet Explorer med den nye standaren og har fantastisk støtte til nesten alle de nye taggene og attributtene. Til sammenlikning hadde Netscape store problemer med å implementere HTML 4.0 og standard CSS i sin Navigator 4.7. Moderne browsere er derimot en enorm forbedring.

Når HTML 4.0 hadde vært lansert en stund ble det revisert og fikk rettet opp små feil. Den endelige versjonen av spesifikasjonen ble HTML 4.01.

XHTML 1.0

Ved starten av det 21. århundret ga W3C ut sin spesifikasjon for XHTML og anbefalte denne. Siden 26. januar 2000 har dette vært en standard på lik linje med HTML 4.01. XHTML er et markeringsspråk som følger XML-standaren istedet for SGML som HTML bygger på. Forskjellen fra HTML er at XHTML er et mer fleksibelt språk og har strengere syntaksregler enn HTML.

HTML5

Etter HTML 4.01 og XHTML 1.0 ble utviklerne avsporet med et nytt utkast til XHTML 2. På samme tid begynte smarte webutviklere å legge til nye funksjoner på websider og webbrowsere. Veien XHTML 2 gikk begynte å se både kjedelig  og urealistisk ut og det var tydelig at en ny tilnermingsmåte trengtes.

Det var på denne tiden at pragmatiske webteknologi tilhengere, browser programmerere og spesifikasjon forfattere begynte å lage noe på egen hånd, uten de vanlige W3C utviklerne. De kalte seg selv Web Hypertext Application Technology Working Group (WHATWG) og utviklet en ny spesifikasjon. Etter litt sjelesøkin bestemte W3C seg for at HTML alikevel var fremtiden. XHTML 2 ble avsluttet og HTML5 ble den nye spesifikasjonen som alle burde benytte.

HTML5 er lagd for webdesign både nå og i framtiden. Dette er spesifisasjonen vi sannsynligvis vil jobbe med det neste tiåret, så utviklingsprosessen er relativt treig og gjennomtenkt. Mange av egenskapene er de gamle kjente, men det vil også bli mange nye elementer, attributter og egenskaper introdusert.

CSS

Cascading Style Sheets(CSS): er et språk som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur og semantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS. Stilinformasjonen kan integreres i selve dokumentet eller skilles ut som en egen fil med endelsen .css. Et ubegrenset antall dokumenter kan peke til og styres av  samme .css-fil, noe som er styrken i CSS: Ved å endre på en fil, kan man endre fargebruk, bakgrunnsbilder osv. I alle dokumenter som peker til CSS-filen.

Den første versjonen av CSS ble lagt fram av Håkon Wium Lie i 1994. Han videreutviklet senere språket sammen med Bert Bos, og i dag er det W3Cs CSS Working Group, hvor Lie og Bos begge er medlemmer, som oppdaterer CSS spesifikasjonen.

Med versjon 2 av CSS kom medietyper med inn i spesifikasjonen. Medietyper gjør det mulig å definere ulik stil for det samme dokumentet avhengig av hvor og hvordan det blir brukt.

Box Model

Dreamweaver – Wireframe

Jeg var i grunn litt usikker på akkurat hva det var vi skulle gjøre i denne oppgaven, men jeg har i alle fall lagd en wireframe til Wombat siden min og satt opp siden på nytt i Dreamweaver. Jeg så igjennom video leksjonene, og det ser ut til at vi skal videreutvikle dette i neste uke! Så foreløpig ser det slik ut:

Sitemap

Lackadaisy Sitemap

Grandpeople Sitemap

Razer Sitemap