Semesteroppgave – Webside #3

Jeg har nå fått toppmenyen til å highlighte etter hvor man er på siden, så nå fungerer det både der og i navigasjonsprikkene på siden. Så nå har jeg totalt tre mulige navigasjonsmetoder, prikkene til høyre, menyen på toppen, og pilene som ligger i tekstfeltet. Jeg har også fått linket logoen, slik at den tar deg til toppen av siden om du ikke befinner deg der allerede.

I helgen har jeg jobbet med å lage en lightbox fra scratch og en knapp som beveger seg med jQuery. Jeg har også brukt css3 for å lage knappen med gradients. Jeg ville ha den i orange for at den skulle komplementere den blå siden, og skille seg ut slik at man ser den godt. Lightboxen viser en liten side hvor jeg har skrevet litt om formålet til websiden, kort om hvordan den er laget med mer. Jeg har også fått alle bildene til å scrolle i forhold til hverandre, og på de illustrasjonene hvor jeg har andre elementer enn rommet og hovedkarakteren, så er de i et eget lag og scroller i forhold til bildet og resten av siden. Som feks i stage 1 så beveger de orange og blå “ballene” i forhold til hverandre og i forhold til resten. Det eneste unntaket er i den siste illustrasjonen, der er det hovedkarakteren som beveger seg.

Ellers har jeg fortsatt noen småjusteringer på selve siden som jeg kommer til å fikse idag (som å få hovedkarakteren i siste bildet til å bevege seg mer), samt legge til et favicon. Etter et spørsmål fra Wictor angående angående farger på bakgrunnen på teksten, og teksten, testet jeg ut hvordan det ville vært med en lys grå/hvit med sort tekst på, i motsettningen til hvordan jeg har hatt det (sort med hvit tekst på). Jeg syntes ikke det fungerte så veldig bra, og siden ble mye blassere med engang. Legger opp noen screenshots for å vise forskjellen:

Original

Med sort på gjennomsiktig hvit

Jeg har jobbet en del med mappestrukturen, også har jeg ryddet litt opp i kodene, kommentert der jeg føler det har vært nødvendig, og ellers bare sett etter feil. Siden fungerer nå i et vertikalt format, og jeg er veldig fornøyd med hvordan resultatet har blitt. Jeg har snakket litt med Wictor angående vertikalt vs. hotisontalt, og med tanke på hvordan siden har blitt nå, og at jeg har jobbet veldig med å finjustere alle innstillingene på siden til å fungere korrekt, så kommer jeg til å la den være som den er nå. Jeg er mest fornøyd med at jeg har klart å få ting til å fungere uten andre eksterne plugins, jeg har jo selvfølgelig benyttet med av eksterne ressurser som bøker og tutorials for å få til kodebiten. Alle linkene og bøkene jeg har brukt i løpet av perioden kommer jeg til å oppgi som referanser i den endelige innleveringen.

Jeg kommer nå videre til å jobbe med en profilmanual for siden, også har jeg tenkt å lage en enkel nettside for mappeinnleveringen. Grunnen til at jeg vil det kontra en feks pdf-fil, er at jeg blant annet kommer til å ha et videoklipp med i mappeinnleveringen. Jeg tenkte derfor at det er lettere å se igjennom arbeidene på samme sted, uten å måtte klikke seg frem og tilbake i forskjellige eksterne linker. Profilmanualen derimot tenker jeg at jeg leverer som et pdf-dokument, kanskje jeg skal eksportere den som en swf fra inDesign, jeg må nesten se hvordan det blir til slutt.

Om du vil kikke på siden slik den ser ut nå, kan du klikke HER

Semesteroppgave – Webside #2

Jeg jobber fortsatt med kodingen av siden, jeg har lagd to forskjellige versjoner nå hvor jeg tester litt forskjellig. Alt er lokalt enn så lenge siden jeg ikke er ferdig med noe, og jeg venter med å laste opp siden til den faktisk fungerer som jeg vil. Foreløpig har jeg fått den ene versjonen til å scrolle horisontalt (nesten knirkefritt), men der har jeg ikke parallax scroll enda, mens den andre siden går vertikalt og har en parallax scroll effekt. Ingenting er finpusset på, og jeg håper at jeg skal få “kombinert” de to utgavene og få det til å fungere.

Akkurat nå styrer jeg til med å få hovedmenyen på toppen til å lyse opp etter som man scroller til de forskjellige delene av siden, letter sagt enn gjort! Igår fikk jeg iallfall til å highlighte den aktive linken med å kalle på den i jQuery, så det er jo et lite framskritt. Problemet er at om jeg trykker på noen av de andre navigasjonene, eller scroller meg videre istedenfor å klikke med videre i hovedmenyen, så går den aktive linken bort. Målet for idag er hovedsaklig å få menyen til å fungere, ellers blir det å legge opp til de resterende bildene. Vi begynner jo og nærme oss slutten av semesteren, og jeg merker at jeg er litt stresset. Derfor har jeg tenkt at om jeg ikke skulle klare å få siden til å gå horisontalt, så skal den iallfall fungere i vertikalt format. Det blir jo selvfølgelig ikke helt det jeg hadde håpet på, så jeg skal absolutt jobbe for at det skal bli som jeg tenkte. Det kommer vel mest ann på tiden.

Semesteroppgave – Webside #1

De siste dagene har jeg jobbet med koding av websiden, jeg har kommet litt på vei og har jobbet mest med HTML og CSS biten av siden, men jeg har klargjort for jQueryen ved å linke til de filene som trengs fra Google sine servere. Grunnen til at jeg linker til Google sine jQuery filer istedenfor å laste de ned lokalt og ha dem på min egen server, er fordi at siden ikke blir så tung når ikke alt må ligge på serveren. Det som også er bra er om de som er inne og ser på siden feks har vært inne på en annen side som også linker til det samme jQuery biblioteket. Da har den filen allerede fått lagret seg i cachen til browseren, og siden vil laste seg raskere.  Enn så lenge jobber jeg lokalt med siden og satt opp mappestrukturen, så det er ikke så mye å se på enda. Jeg har også prøvd meg litt med jQuery, mest for å teste at ting er linket ordentlig, men også fordi jeg syntes det er veldig spennedes!

Logoforslag SensoCure

Vi har alle fått i oppgave om å lage et logoforslag for selskapet SensoCure, som har kommet med en revolusjonerende ny biosensor som bare er en millimeter i diameter, og måler blodgjennomstrømming både før, under og etter en operasjon. Med tiden kan den også brukes til andre kroppsrelaterte målinger hvor den kan feks sjekke hvordan det går med et transplantert organ.

Her er mitt forslag:

 Jeg har brukt fonten Corbel, og lillafargen har en CMYKverdi på: 63, 74, 30, 12. Jeg har prøvd å tenke i en minimalistisk retning, med få elementer og farger. Selve symbolet er en S og en C kombinert. Grunnen til at jeg har valgt det som mitt symbol, er at jeg ikke ville låse meg for mye i det at sensoren måler blodgjennomstrømning, siden bruksområdene mest sannsynlig vil forandre seg med tiden og ekspandere. Jeg ville derfor holde det stilrent, med et logoelement som tar utgangspunkt i selve navnet. Lilla har jeg valgt fordi det er en farge som står for gode avgjørelser, rolighet og nobilitet. Jeg tenker at dette er et medisinsk instrument som kommer til å være det beste innenfor sitt felt, samtidig som det skaper trygghet (rolighet) for pasienten, og kan føre til gode avgjørelser for helsen.

Semesteroppgave – Tutorials

Jeg har de siste dagene konsentrert meg om tutorials om JavaScript, og har også begynt å se en tutorial på jQuery som er et JavaScript bibliotek. Jeg har derfor ikke jobbet noe videre med siden min, men det skal jeg begynne med så fort jeg har fått en litt større forståelse for hva disse programmeringsspråkene faktisk går ut på. Jeg kommer ikke til å bli en reser i JavaScript i denne omgangen, men har som mål å forstå de grunnleggende tingene og være istand til å kunne kode det jeg trenger på siden min. Planen videre er å se litt flere tutorials (fra lynda.com hvor jeg har kjøpt et medlemskap), og så begynne kodingen av siden.

Sånn jeg ser det nå, kommer jeg først til å kode alt i HTML og CSS, og få det til å fungere som en vanlig webside. Etter det kommer jeg til å bruke jQuery til å kode inn den interaktiviteten jeg skal ha. jQuery er som sagt et såkalt JavaScript bibliotek, og er på en måte en enklere form for JavaScript. Det er et av de mest populære bibliotekene som blir brukt idag, og er kjent som the write less, do more library. Jeg kommer altså til å linke til dette biblioteket på HTMLsiden min, og lage et javascriptdokument hvor jeg koder inn den jQueryen jeg trenger. Jeg har altså ikke tenkt å bruke plugins for å få den effekten jeg vil ha, men prøve å kode mest mulig selv. Jeg håper at jeg skal få dette til, og har som mål å bli “ferdig” med å kode siden innen søndag 3. juni.