Noah

Jeg har alltid vært fascinert av å ta svarthvitt-bilder i stedet for bilder i farge. Mange tenker nok at det er gammeldags og kjedelig, men jeg liker det fordi det ofte kan fremheve motivet. Her er noen tips for å ta gode svarthvitt-bilder.

Ta bildene i farger. Dette gir deg mye mer kontroll på hvordan sluttresultatet blir. I Camera Raw kan du for eksempel velge hvor mørke og lyse ulike farger blir når du gjør bildet om til svarthvitt. Det er noen utfordringer ved å ta bildene i farger, så man er nødt til å prøve å se for seg hvordan det blir i svarthvitt.

 Dersom kameraet ditt kan ta bilder i RAW-format, er det det beste. Ofte kan man ha en svarthvitt-innstilling som gjør at du ser bildet i svarthvitt etter du har tatt det, mens selve fila er i farger når du overfører den senere. Da kan man se hvordan det faktisk blir.

 Bruk kontraster. Store kontraster ser ofte veldig bra ut i svarthvitt. Det kan ofte hjelpe til med å fremheve hovedmotivet, og høye kontraster gjør at det er et større skille mellom de ulike fargetonene. Da kan man få frem mye man ellers ikke ville lagt merke til.

 Ta bilder av ulike teksturer og former. Å ha ulike dybder og former på motivet blir ofte veldig spennende i svarthvitt. At det ikke er noen farger fremhever nemlig det særegne, og vi legger mer merke til smådetaljer. Mønster med store kontraster seg også ofte bra ut.

 Bruk lav ISO. Høy ISO kan bli brukt bevisst som et virkemiddel i noen tilfeller, eller kun fordi det er nødvendig, men det lønner seg ikke når det kommer til svarthvitt-foto. Spesielt ikke hvis du går for et clean uttrykk med store kontraster.

 Vær dramatisk. Rediger med et mål om at sluttresultatet skal se mer dramatisk ut enn et bilde i farger ville vært. Gjør highlights lysere, shadows mørkere, og lek med over- og undereksponering - ofte kan det være nøkkelen til hvordan sluttresultatet blir. Bruk curves og levels, og lek deg frem - små endringer kan gjøre de store forskjellene.

Da jeg var 11, fant jeg ut at jeg skulle begynne å ta bilder av blomster. Jeg tok hundretalls av bilder på én kveld, og alle er helt like, med helt lik vinkel. Etter den gangen har jeg heldigvis utforsket mye mer, og funnet ut av hva som faktisk funker. Her er noen tips.

 Ikke ta bilder ovenfra og ned. Det er kjedelig, og er sånn vi ser blomstene hele tiden. Ta heller bilder fra undersiden og opp, eller fra siden. Ta kanskje ikke med hele blomsten i det hele tatt, og eksperimenter masse. Blomster er så mye mer enn bare blader. Selvfølgelig kan du også da bilder fra denne vinkelen, men sørg da for at du gjør det bevisst; for eksempel med en helt svart bakgrunn, slik at blomstene virkelig kommer frem.

 Få med minst mulig av bakgrunnen. Ofte, særlig hvis man tar bilder av potteplanter, kan bakgrunnen være distraherende. Prøv derfor å få med minst mulig av den. Du trenger ikke noe fancy lerret, men vær bevisst på hva som kommer med.

 Lek med lys, sol og skygger.  Det kan få frem sider med plantene man ikke vanligvis ser, og kan gjøre det mer spennende for øyet. Dersom du vil fjerne skygger i og rundt blomsten, kan du bruke en reflektor.

 Bruk en makrolinse! Makrolinsene kan fokusere subjekter som er veldig nærme, og man får da tatt bilde av flere detaljer vi vanligvis ikke legger merke til. Dersom du virkelig vil satse på blomster, planter insekter og andre små ting, er det verdt å investere i en.

... er noe av det mest utfordrende man kan gjøre. De forstår ikke hva vi sier, og gjør for det meste som de vil selv. Det aller enkleste er nok å ta bilder av sovende dyr, men det blir ikke det mest spennende. Her er noen tips som gjør det enklere å ta bilde av your furry friends.

Vær tålmodig. Dette er forsåvidt ikke et tips som har så mye med kameraet å gjøre, men det er fortsatt viktig. Tilbring mye tid med dyret du skal ta bilde med det blir trygg på deg, og regn med å bruke en god del tid. Vær alltid klar med kameraet, for du vet aldri når det perfekte øyeblikket kommer!

 Lær deg hvordan du får oppmerksomheten til dyret. Om det enten er ved å rope, plystre, eller spille av dyrelyder fra en app. Å vite hvordan dyret reagerer på ulike ting, kan være nøkkelen til de bra bildene.

 Ha med en assistent. Å både ta bildene og holde dyrets oppmerksomhet der du vil ha den samtidig, er utfordrende. Derfor kan det være lurt å ha med seg en assistent som kan gjøre dette for deg.

 Fokuser på øynene, akkurat som når du tar bilder av mennesker. Prøv å være på samme nivå som dyret, altså ganske langt nede. Å ta bilder ovenfra og ned er kjedelig, og noe de fleste har sett utrolig mange ganger før. Prøv kanskje til og med å ta undervinklede bilder.

 Ha god tilgang på lys, enten naturlig lys hvis du er ute (eller har veldig god tilgang på det inne), eller en blits. Husk å ikke peke blitsen på hovedmotivet.

 Bruk høy lukkertid, særlig hvis du skal ta bilder av dyret i aktivitet. Dyr er som sagt uforutsigbare, og det skal ikke mye til før bildet er så ufokusert at det blir ubrukelig.

Nå skal jeg vise hvordan man kan kode en dropdown meny ved hjelp av CSS og javascript (og selvfølgelig HTML). Det er en slags rullgardin meny, som har en hovedknapp. Når man trykker på knappen, dukker det opp flere knapper/linker under.

Jeg har fulgt denne tutorialen, men kommer til å forklare mer hvordan de ulike kodene fungerer med hverandre: https://www.w3schools.com/howto/howto_js_dropdown.asp

HTML

Først går jeg gjennom HTML-kodingen som skal være på plass. Dette er kodene vi bruker: 

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Tittel</button>     <div id="myDropdown" class="dropdown-content">       <a href="#">Home</a>       <a href="#">About</a>       <a href="#">Works</a>     </div> </div> 

Den første <div>-beholderen er der for å ramme inn menyen. Den har en klasse som vi bruker til å style beholderen i CSS-kodene.

<Button>-definerer at det er en knapp som kan klikkes på. Onclick="myFunction()" refererer til funksjonen som er definert i javascripten. Her igjen er det en klasse som bestemmer hvordan knappen skal se ut. Tittel er rett og slett det som står på knappen. Vi bestemmer at dette er alt innholdet i knappen ved å skrive </button>. <button> er altså kommandoen, mens resten som er innenfor de to første klammene refererer til andre atributter.

Etter dette kommer det en ny <div>-beholder. Denne har både en ID og en klasse. Begge disse refererer til atributter, der utseende og/eller funksjonen til innholdet blir bestemt av CSS- og/eller javascript-koder. Forskjellen er at en ID kun kan gjelde én beholder, mens en klasse kan brukes flere ganger. 

"MyDropdown" refererer til en funksjon som er bestemt med javascript. "dropdown-content" refererer til CSS-koder i stilsettet. Innholdet i denne div-beholderen er linker i menyen. #-en erstattes av en URL man vil brukeren skal refereres til. Vi avslutter beholderen ved å skrive </div>.

**Til slutt **avslutter vi hele beholderen med </div>. Det er viktig å holde styr på når en <div>-beholder begynner og slutter, særlig fordi de ofte inneholder andre <div>-beholdere. Dersom man ikke avslutter der man skal, vil attributtene til den <div>-beholderen fortsette å gjelde for innholdet utenfor. Derfor er det lurt å skrive inn både <div> og </div> med en gang, og heller jobbe innenfor de to hele tiden.

Nå ser menyen slik ut:

CSS

Nå skal vi se på hvordan vi kan bestemme utseende til menyen ved å skrive inn CSS-koder. Dette er kodene vi bruker: 

/* Dropdown knapp */ .dropbtn {    background-color: #099; width: 150px;    color: white;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer; }

/* Dropdown knappen når man holder musepekeren over knappen/fokuserer */ .dropbtn:hover, .dropbtn:focus {    background-color: #399; }

/* <div>-beholderen som inneholder menyen */ .dropdown {    position: relative;    display: inline-block; }

/* Innholdet i menyen som er skjult med mindre man holder musepekeren over */ .dropdown-content {    display: none;    position: absolute;    background-color: #f9f9f9;    min-width: 100%;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; font-family: Arial, Helvetica, sans-serif; }

/* Linkene i menyen */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/* Fargen på linkene i menyen endres når du holder musepekeren over */ .dropdown-content a:hover {background-color: #f1f1f1}

/* Vis dropdown menyen (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ .show {display:block;}

 Det som er innenfor /* og */ er hjelpekommentarer, og vil ikke ha noe å si på hvordan menyen vil se ut.

.dropbtn er en klasse. Dette definerest av punktumet før navnet. Dette er klassen som brukes til å bestemme hvordan menyknappen skal se ut. Det meste i denne klassen er ganske selvforklarende, så jeg skal ikke gå gjennom alle attributtene. Color-referer til fargen til fonten. Padding er hvor mye luft innholdet skal ha rundt seg, og cursor bestemmer rett og slett hvordan musepekeren skal se ut når du kommer borti knappen. Her er det en pointer, som er den lille, hvite hånda som peker. Det kan hjelpe brukeren til å skjønne at det er noe man kan klikke på.

  .dropbtn:hover, .dropbtn:focus bestemmer hvordan knappen skal se ut når man fører musepekeren over eller når man fokuserer på den. Ved å putte et komma mellom for eksempel to klasser, eller en klasse med ulike tilstander (:hover og :focus), kan vi gi de likt utseende. Her er det bestemt at knappen skal få en litt annen farge når man holder musepekeren over eller fokuserer.

.dropdown er klassen til selve <div>-beholderen som inneholder hele menyen. Position bestemmer hvordan beholderen skal forholde seg til andre elementer. Fordi den er relative, vil den forholde seg til det punktet den hadde vært dersom vi ikke hadde lagt inn left, right, top eller bottom-verdier. Display sier noe om et element synes og om hvordan den synes. Inline-block bestemmer at beholderen ikke skal ha et linjeskift, men at man fortsatt kan bestemme både høyden og bredden til elementet. Et vanlig inline-element ville brukt så lite plass som mulig, mens et block-element ville brukt så stor plass som mulig.

.dropdown-content bestemmer hvordan innholdet i menyen skal se ut. Display: none; bestemmer at beholderen ikke synes. Dette kan vi endre med Javascript. Position: absolute; bestemmer at innholdet skal forholde seg til andre elementer. Her er det dropdown-knappen. Min-width: 100% betyr at innholdet har en bredde som er 100% av det knappen er, altså like bred. Box-shadow bestemmer rett og slett at elementet skal ha en skygge. Z-index bestemmer hvilken rekkefølge elementer skal være i dersom de overlapper hverandre.

 .dropdown-content a bestemmer utseende til linkene i menyen. .dropdown-content a:hover bestemmer utseende til linkene når man fører musepekeren over.

 .show {display:block;} bruker vi i javascripten. Vi legger denne til .dropdown-content når brukeren klikker på menyknappen, og det gjør at linkene under knappen dukker opp.

Menyen ser nå slik ut:

 JAVASCRIPT

Når vi trykker på knappen nå, skjer det ingenting. Dette skal vi endre ved å bruke javascript. Javascript legger til ulike funksjoner, som gjør at noen elementer reagerer om vi for eksempel trykker på et annet. Dette er kodene vi bruker:

  /* Når leseren trykker på knappen, veksles ved med å vise og skjule menyen */ function myFunction() {    document.getElementById("myDropdown").classList.toggle("show"); }

// Menyen lukkes om leseren trykker utenfor window.onclick = function(event) {  if (!event.target.matches('.dropbtn')) {

   var dropdowns = document.getElementsByClassName("dropdown-content");    var i;    for (i = 0; i < dropdowns.length; i++) {      var openDropdown = dropdowns[i];      if (openDropdown.classList.contains('show')) {        openDropdown.classList.remove('show');      }    }  } }

  Igjen er det mellom /* og */, og det etter // kommentarer som ikke har noen virkning på selve kodingen.

Den første funksjonen gjør at menyen vises når brukeren trykker på menyknappen. Her refererer vi til .show-klassen. Funksjonen heter myFunction, og det var den vi refererte til tidligere i HTML-kodene. I tillegg ser vi at ID-en myDropdown også dukker opp, som vi også brukte i HTML-kodene.

  Til slutt det en kommando som sier at menyen lukkes når brukeren klikker utenfor menyen. Vi legger også inn en kode som gjør at javascripten gjenkjenner når brukeren har trykket på menyknappen slik at menyen er åpen.

Nå er menyen ferdig, og ser slik ut:

Lys er det viktigste virkemiddelet innen fotografering. Det er selve forutsetningen for at et bilde skal bli til, og det er derfor viktig å vite hvordan man skal håndtere lyset. Det finnes noen regler, men generelt er det enkleste å leke med lyset selv.

Naturlig Lys

Det naturlige lyset brukes i hovedsak når man fotograferer utendørs. Da har både været og tidspunkt mye å si.

 Ved sollys er hovedutfordringen at lyset er veldig hardt. Da får man for eksempel harde skygger i ansikter. Da kan man oppsøke skygge for å mykne lyset, eller utnytte det harde lyset for å skape interessante linjer og kontraster i bildet. Da kan man for eksempel leke med retningen til lyset og skygger. 

Ved regn er det aller viktigste å holde utstyret, og eventuelt motivet, tørt.

Overskyet vær er det beste for å ta bilder med naturlig lys. Da er ikke lyset for hardt, og skyggene blir ikke like harde.

I tillegg til været, er det lurt å tenke over når på døgnet man fotograferer. Når sola står høyest, vil man naturligvis få de hardeste skyggene og lyset, mens det er mykere tidligere og senere på dagen. I noen tilfeller er det også lurt å fotografere i skumringstiden, det vil si i timen før sola står opp eller etter den har gått ned, da lyset er spesielt mykt og har en blå temperatur.

Det er alltid lurt å ha opp en reflektor, slik at du lett kan lysne opp skyggepartier eller mykne opp skyggene.

Uansett er det viktig å planlegge godt i forveien ved fotograferinger utendørs. Følg med på værmeldinger i forkant, og lag lister over utstyret du skal ha med.

Kunstig Lys

Kunstig lys er alt av lys som ikke kommer fra sola; taklamper, lys fra biler og lyktestolper. I studio bruker man ulike lamper og blitser for å få lyset slik man vil ha det. Nå skal vi se på tre klassiske måter man kan lyssette et motiv på i studio.

Rembrandt-lys

Dette lyset er kjennetegnet ved at halve ansiktet til modellen er opplyst, i tillegg til en trekant på kinnet på den halvdelen som er skyggelagt. Det brukes en softboks på hovedlyset, som plasseres på skrått mot modellen (ca. 45 grader). Høyden til lyset justeres sånn at det går over nesa, slik at trekanten dukker opp på det motsatte kinnet.

Metoden er oppkalt etter maleren Rembrandt, som selv skal ha brukt denne lyssettingen på sine modeller.

Butterfly-lys

Dette lyset kjennetegnes ved at en sommerfugl-liknende skygge legger seg under modellens nese, og blir ofte brukt i forbindelse med magasinforsider. Dette er fordi lyset er rettet på modellens panne forfra, som gjør at det er ganske flatt. Da utjevner man for eksempel rynker. Man kan velge selv om man vil bruke for eksempel en softboks, eller om man vil bruke en reflektor eller et utfyllingslys for å mykne harde skygger.

Splittet lys

Nå skal jeg vise hvordan man kan lage GIFs som beveger seg. For å lage det  trenger du først bildene som skal være ulike frames. Som eksempel bruker jeg en blomst som blir mindre og større. Da har jeg laget en bakgrunn som er den samme hele tiden, mens jeg har lagret selve blomsten i 5 ulike størrelser.

Velg file > scripts > load files into stack. Velg deretter "Browse" og velg de filene du skal gjøre om til en GIF.

Velg deretter "Window" og velg "Timeline". Da vil et panel dukke nederst i vinduet.

Siden vi skal lage GIFen vår basert på frames og ikke et movie clip, velger vi det i midten av panelet. Dersom det ikke står der frafør, kan du trykke på den lille pilen til høyre for å få valgmuligheter.

Øverst til høyre i timelinen er det et ikon som ser slik ut:

Trykk på det, og velg deretter "Make frames from layers"

De ulike bildene vi skal bruke har nå dukket opp i timelinen. GIFen vi skal lage skal gå i en evig loop, derfor markerer vi alle bildene og velger "forever" nederst til høyre. Når vi har alle bildene markert, velger vi også at hver frame skal vare i 0,1 sekunder. Det velger du ved å trykke på den lille pila der det står hvor lenge framen skal vare.

Siden jeg vil bruke de samme bildene på nytt i omvendt rekkefølge, velger jeg å opprette 5 nye frames. Disse er transparente. På de ulike framesene velger jeg et og et bilde som skal være synlig. Dette gjør jeg så de går i stigende rekkefølge.

For å lagre den, velger jeg file > save for web. Deretter velger jeg at den skal være en GIF, før jeg trykker på "Save".

Dette er den ferdige GIFen:

Nå skal jeg vise hvordan man kan lage en minimalistisk kalender ved hjelp av tabeller i InDesign. Man kan lage kalenderen slik man selv liker det best, og man slipper også å bruke masse penger på en kalender man kanskje slutter å bruke etter en stund.

Åpne InDesign, og velg "Document" under kolonnen som sier "Create New"

Deretter får du dette valgpanelet opp. Kalenderen jeg lager er i A4-format, men du kan også bruke A3 dersom du vil ha en større kalender. Jeg lar antall kolonner forbli 1, og endrer margene til 18 mm. Til slutt legger jeg til en bleed på 3 mm. Dette er ikke nødvendig om man ikke har utfallende bilder, men det er greit å legge inn tilfelle man ombestemmer seg underveis.

Jeg skriver inn "Jan2018" og legger det teksten i høyre hjørne, akkurat innenfor margene. Jeg har valgt fonten "Bebas Neu" som man enkelt kan laste ned. Jeg har også laget to nye swatches (farger). Dette kan man enkelt gjøre ved å trykke på "New Swatch" nederst i swatches panelet. Overskriften min er på 150 pt.

Slik går jeg frem for å lage en tabell. Siden vi skal ha en måned, velger jeg 5 rader og 7 kolonner, i tillegg til 1 header-rad. Det er der ukedagene skal stå.

Når jeg trykker OK, ser det slik ut:

Nå skal vi få tabellen til å se litt finere ut. Da åpner jeg først table-panelene ved å gå inn på window -> tools & tables og velge tables. Da vil du få frem Table, Table Styles og Cell Styles opp på siden. For å style tabellen vår, trykker vi på "New Table Style" nederst i panelet.

Først velger jeg å ta bort borden rundt selve tabellen, for å skape en mer luftig layout. Deretter velger jeg å la de horisontale linjene være dashed i stedet for å være rette linjer, igjen for å skape luft.

Da ser det slik ut:

Nå er tabellen penere å se på, men vi må lage cellene litt større. Det gjør vi ved å markere cellene med tekstmarkøren, gå inn på table-panelet, og dra verdien til høyre opp til 20 mm, slik:

Til slutt skriver jeg inn datoer og ukedager, og plasserer tabellen på midten. Da ser det slik ut:

Plassen under kan brukes som en selv vil. Man kan for eksempel la den være blank, og heller plassere post-it lapper med informasjon, handlelister etc når man har printet den ut. Jeg har valgt å lage en Gjøremålsliste og legge til et bilde av noen planter. 

Nå kan du eksportere kalenderen din og printe den ut, henge den opp et sted, og fylle den inn som du vil. For å eksportere den trykker du på file -> eksporter. Velg hvor du vil lagre det. Deretter kommer det opp et valgpanel, der du foreksempel kan velge å ta med skjæremerker eller ikke ("crop marks" under "marks and bleeds".

Mitt sluttresultat ser slik ut:

Det gylne snitt Det gylne snitt, som også blir kalt tredelsregelen, handler først og fremst om å skape et bilde som ikke er statisk. For å enkelt finne det gylne snitt, kan man dele motivet opp i ni like deler. Hovedmotivet plasseres i et av de fire punktene der linjene møtes. 

Plankestien går gjennom det gylne snitt.

Innramming For å få føre blikket til hovedmotivet i bildet, kan man også ramme inn hovedmotivet med et annet element i bildet. Dette kan for eksempel være en dør eller et vindu. Det skaper både dybde, fører blikket til hovedmotivet, og gjør det mulig å fortelle flere historier; et innenfor rammen, og et utenfor. 

Buen rammer inn motivet.

Linjeføringer Ulike linjer i et bilde kan for eksempel trekke oppmerksomheten mot hovedmotivet i bildet, eller skape bevegelse i bildet. Linjene kan også hjelpe til med å dele opp bildet, og gi det er tydelig tyngdepunkt. Som fotograf letter man selv etter linjene i omgivelsene rundt seg, og de kan være i f. Eks. Stier eller veier, trær, hus eller strømledninger.

Man har et endeløst utvalg av linjer i ulike retninger, men dette er noen av de:

Vertikale linjer Vertikale linjer, som for eksempel trær, manifesterer ofte en tyngde i bildet. De gir ofte et inntrykk av makt eller en sterk kraft.

Horisontale linjer Horisontale linjer brukes for eksempel ofte i landskapsbilder, og gir bildet balanse og harmoni. Bilder med sterke horisontale linjer er ofte beroligende å se på, og kan ofte skape en slags avslutning.

Diagonale linjer Det er de diagonale linjene som ofte skaper spenning og bevegelse i bilder. De kan brukes på ulike måter og også blandes sammen, slik at bildet blir dynamisk.

S-linjer S-linjene kan for eksempel være en vei i et dalføre, og skaper ofte en følelse av harmoni.

Lukkertid, ISO og blenderåpning er de tre ulike tingene på kameraet vi kan stille på for å justere hvor mye lys som treffer kameraets sensor. For å kunne få riktig eksponering på bilder, er det lurt å vite hva som er forskjellen mellom dem.

ISO: 320

ISO: 1600

ISO

ISO står for International Organisation for Stanardization. Denne verdien bestemmer hvor følsom kameraets sensor er for lys. Hver gang man stiller opp ISO-verdien, blir den doblet. Når ISO-verdien er høy, er sensoren med sensitiv for lys, og trenger derfor mindre lys.  Høyere ISO benyttes blant annet i situasjoner dersom man ikke vil bruke blitz. Bekostningen er at bilder med høy ISO blir kornete, og vil også begynne å bli uskarpe. Derfor er det gunstig å holde ISOen på en lavere verdi med mindre man ønsker effekten.

Hvor høy ISO-verdi du kan ha før bildet blir kornete varierer fra kamera til kamera. Et dyrere kamera med bedre sensor vil kunne ta eksponeringer med en høyere verdi uten at det blir kornete, enn et kamera med dårligere sensor.

Blenderåpning: f/22

Blenderåpning: 1/3.5

Blenderåpning Når man justerer blenderåpningen, justerer man hvor mye lys som slippes inn gjennom linsen i løpet av en eksponering. I tillegg justerer blenderåpningen dybdeskarpheten i bildet.

Vi måler blenderåpninger som f, og noen kameraer kan for eksempel kunne variere fra en blenderåpning på f/1,8 til f/22. En lav blenderåpning på f. Eks. f/2,8 slipper linsen inn mye lys, og dybdeskarpheten synker. Øker du blenderåpningen, slipper man inn mindre lys, og dybdeskarpheten øker.

Lukkertid: 1/125

Lukkertid: 1/20

Lukkertid

Lukkertiden justerer hvor lenge en eksponering varer, og dermed hvor lenge det skal slippes lys inn gjennom linsa. Lukkertiden måles i sekunder, tiendedeler, hundredeler og tusendeler.

Når man bruker lang lukkertid, blir objekter i bevegelse uklare, mens man med kort lukkertid kan "fryse" ting i bevegelse og få klare bilder. Lang lukkertid brukes ofte for å fokusere på disse bevegelsene, og det brukes da stativ for at alt rundt som står stille også skal stå klart.

Jeg har vært heldig, og fått lage logo til yrkesmessa i Lier!

Nå er nettsiden live under urlen http://www.cactusub.no/!

Det har vært en morsom periode med mye jobbing, og en del plunder på slutten, men det har vært skikkelig lærerikt og skikkelig gøy.

Nettsiden er veldig enkel, og jeg har valgt å ha hvit som hovedfarge. Designet er enkelt og elegant, noe jeg ville fordi vi vil fronte produkter som ser elegante og enkle ut. I tillegg vil jeg unngå at eventuelle farger på nettsiden ser svært ulike ut fra nettleser til nettleser, da dette kan bli støy for leseren, og gjøre siden mye vanskeligere å optimalisere for alle.

Man scroller minst mulig, slik at man ser alt man trenger med en gang man kommer inn på siden. Undersidene må man scrolle litt på, som selvfølgelig kunne vært bedre, men jeg synes det er akseptabelt å måtte scrolle litt på noen av sidene.

Generelt er jeg fornøyd, men det er et par ting jeg ville forandret på. Her er de:

På “Om oss” siden har ikke tittelen samme marg som brødteksten. Dette er noe jeg er klar over, og prøvde å forandre på, men det var ikke mulig slik jeg har satt opp siden. Jeg kommer likevel til å se mer på det senere, og forsøke å få den satt på riktig sted.

I tillegg, på sidene der det er tekst i slidene, “dyttes” tekstboksen litt nedover når man blar videre. Det er også en ting jeg har prøvd å fikse på, men jeg har ikke funnet noen løsning på dette. Det er litt irriterende fordi jeg ikke tenkte at det skulle være sånn, men jeg synes dog ikke det er for forstyrrende.

Noen av bildene på “Galleri” siden slider heller ikke like fint. Det kan hende jeg fjerner et par bilder for å fikse problemet.

Jeg lastet opp nettstedet via one.com og FTP. One.com er da serveren min, og det er der domenet mitt er registrert. FTP står for file transfer protocol, og er en måte å føre over filer til servere. På denne måten har jeg ført over alle filene jeg har jobbet med, slik at de kommer opp når man går inn på domenet.

De siste dagene har jeg slitt litt med å få opp nettsiden, fordi jeg ikke helt skjønte hvordan man skulle gjøre det. Det var mange filer jeg ikke visste hvor skulle, og jeg prøvde også å få opp nettsiden med wordpress i stedet for ftp, fordi jeg først ikke fikk det til å fungere. Wordpress var dog begrensende, og siden jeg ikke har kodet siden min etter wordpress sine maler, funket det ikke.

Etter mye strev fant jeg ut at det var en enkel mappe som var i veien i ftp-mappa mi, som rett og slett forhindret siden fra å gå live. Når jeg fjernet denne, var alt som det skulle.

I dag fant jeg ut at jeg vil ha galleriet så stort at det fyller hele skjermen. Man må da scrolle litt ned for å se hele bildet, som ikke er ideelt, men det er bedre enn alternativet.

Slideren jeg bruker gjør at jeg ikke kan gi bildet en spesifikk høyde, og dersom bildet (feks. et høydebilde) ikke er like bredt som vinduet, fester det seg automatisk til venstre. Jeg har prøvd å overskrive kommandoene fra script-filene, men jeg har ikke funnet noen løsning enda. Da synes jeg det er bedre å måtte scrolle litt, enn å ha uregelmessige hvite flekker på nettsiden som varierer fra bilde til bilde.

Jeg er nå 99% ferdig, alt jeg skal gjøre er å få på plass alle bildene i galleriet og evt. gå over alt for å gjøre noe småpuss. Før jeg setter inn bildene, må jeg optimalisere de i photoshop, slik jeg tidligere har nevnt.

I dag har jeg endelig fått skrevet teksten til “tjenester”-siden. Dette er en tekst som skal informere kundene våres om det vi kan tilby, samtidig som det skal framstille oss i best mulig lys. Jeg synes det er litt vanskelig å skrive sånn tekster, og jeg vet ikke helt hvor mye jeg skal inkludere. Derfor skal jeg høre med de andre i bedriften om hva de hører.

Jeg har også satt inn noen testbilder i galleriet. Dette er bare testbilder, siden jeg skal spørre de andre i bedriften om de har noen bilder som kan være der. Jeg har ikke optimalisert bildene enda, men det skal jeg gjøre. Det er viktig å optimalisere bilder, slik at det tar kortest mulig tid å laste de opp på nettsiden for de som leser. Da lagrer man bildet som en så liten fil som man kan i forhold til størrelsen, slik at nettleseren ikke trenger å laste inn unødvendig mye informasjon.