Oppgave 6 - Lage en blogg med Appshed

I denne oppgaven skulle vi lage en app som presenterer en kulturbedrift, et prosjekt, en utstilling eller lignende. Denne appen skulle lages i en netttjeneste kalt Appshed, som er helt gratis for alle.

Jeg valgte å lage en app for Rockeklubben i Porsgrunn, med oversikt over nyheter, bilder, konsertprogram og kontaktinfo. Jeg startet først med å grovt skissere hvordan jeg ønsket å ha appen, og gikk i gang med arbeidet da denne var klar.

Appshed har gjort mye av jobben på forhånd, som f.eks layout, noe som gjør denne utviklingen mye enklere for brukeren av Appshed. Først laget jeg alle fanene med navna jeg ville ha, og i den typen faner jeg ville ha dem i. Deretter begynte jeg å legge inn tekst/bilder i de forskjellige fanene og formaterte dette slik jeg ville ha det.

Etter at alt av innhold var på plass i hver fane, begynte jeg å prøve meg frem på hvordan designet skulle bli, og endte med dette:

Klikk her for å se resultatet av mitt arbeid med Appshed!

Jeg synes Appshed er et veldig fint program å lage app i, men jeg antar i bunn av dette blir det ikke generert Android eller IOS programmeringspråk, men HTML5, noe som gjør dette til en ikke helt "ekte" app. Men allikavel en flott og enkel måte å lage app på om man ikke er så flink til å programmere, men heller vil tenke mer på design-delen.

Arbeidsprosessen med oppgave 4 - Bloggdesign

Jeg startet med headeren. Jeg hadde en veldig gammel bloggheader jeg hadde laget tidligere, og brukte denne som mal med tanke på målene. Det eneste som var på den var bildet (vector) av meg, som jeg tidligere har laget i Adobe Illustrator. Jeg la deretter til litt tekst på begge sider av header, og la også til en vector av en gitar. Da dette var gjort, og jeg så den passet fint til bloggen, så var denne ferdig.

Neste del av prosessen var å finne et bakgrunnsbilde som passet med det litt mørke designet jeg har valgt. Har ikke laget dette bildet selv, men har passet på at jeg bruker et bildet som er kreditert fotografen som har tatt dette/passet på at jeg har brukt bilder som er lovlige å bruke.

Font-typen jeg bruker gjevnt over hele bloggen er Calibri, en font jeg synes passer veldig bra inn. Har også endret på alle linkenes farger. Blå linker funket ikke med mitt design, så jeg valgte å ha alle disse sorte. Designet mitt er relativt mørkt, men jeg synes dette passer bra med mine interesser, så valgte å ha det slik.

Fagformidling i webdesign

I dette innlegget skal jeg forklare litt om prosessen min når jeg laget min første hjemmeside (oppgave 3) i kurset Web- og Informasjonsdesign. 

Oppgaven sa at jeg skulle lage en nettside hvor jeg skal presentere meg selv og min hobby. Nettsiden skulle inneholde minimum 4 sider som linker til hverandre,  alle sidene skulle inneholde bilder og  ting skulle settes i div-er. Og når nettsiden med kriterier var ferdig, skulle den lastes opp på mitt område på høgskolen server.


1. Det første jeg begynte med på denne oppgaven var i skissere på ark hvor jeg ville ha de forskjellige div-ene, hvor meny-linkene skulle være og litt grovt om fargevalg.


2. Jeg brukte programmet Adobe Dreamweaver CC, og dette programmet lager HTML-skjelettet automatisk når man velger å lage et nytt HTML-dokument. Når dette skjelettet var oppe, begynte jeg å legge inn alle div-er jeg skulle ha, med tilhørende ID på hver av dem. Samt. at jeg la til en egen tag for hvert bilde jeg på forhånd visste hvor skulle plasseres. Når dette hva gjort, hadde jeg da en slags mal på hvordan alle fire sidene skulle se ut.

3. Etter dette opprettet jeg et CSS-dokument og linket alle de fire HTML-sidene til denne, og da var det bare å begynne å redigere på hver div slik jeg ville ha dem; Noen runde hjørner, størrelse og plassering på de forskjellige div-ene, fargevalg, hover-effekt m.m.

4. Når jeg hadde det sånn halvveis ferdig, begynte jeg å legge ut tekst og bilder der jeg ville ha dem, og justerte størrelse og plassering på dette i CSS-dokumentet. Jeg har ikke laget mye galleri før, så for at en skulle kunne se bildene i orginal størrelse, laget jeg rett og slett en HTML-side til hver av bildene med en tilbake-knapp på. Og etter en del justeringer ble jeg fornøyd, og siden var ferdig :)

Trykk her for å se resultatet av denne prosessen.