Mappeinnlevering web 2.semester
Mappeinnlevering 2. semester var en obligatorisk innlevering der vi skulle samle alle de obligatoriske oppgavene fra dette semesteret (web/digital) på en nettside som skulle inneholde linker til alle oppgavene. Det var valgfritt om vi laget nettsiden i HMTL eller Flash. I tillegg til obligatoriske oppgaver kunne vi valgfritt også legge til læringsaktiviteter / andre arbeider. Mappen skulle designes på en måte som representerer meg som designer.
Her er min digitale mappeinnlevering for 2. semester multimediedesign:
Jeg har kalt den ”Digital portefolio” og den inneholder link til følgende obligatoriske oppgaver fra 2.semester:
- Obligatorisk oppgave 06 – Enkelt nettsted
- Obligatorisk oppgave 07 – Fotoessay (PDF-format)
- Obligatorisk oppgave 08 – Fotoessay (Flash webside basert på fotoessayet i oppgave 07)
- Obligatorisk oppgave 08 – Flash interaktivt banner
- Læringsaktivitet: WordPress nettside www.brunmark.no (jeg gjorde denne i 2.semester i stedet for læringsaktiviteten ”Regnskapsfirma”.
- Læringsaktivitet: Lysbruk i portretter de siste 1000 år (Research + PDF)
- Diverse foto tatt i løpet av studiet som ligger på min Flickr-konto.
Valg av teknisk løsning for mappeinnlevering:
Presentasjonen kunne være i HTML eller Flash og jeg valgte HTML fordi jeg nettopp har jobbet med to Flash-prosjekter i obligatorisk oppgave 08, og trenger mer øvelse i HTML. En annen grunn er at Flash ikke støttes av alle typer devices (f.eks iPad) så det er sannsynligvis viktigere å lære seg HTML enn Flash.
Jeg har for første gang laget en nettside 100% i Photoshop og klippet den opp ved å bruke funksjonen ”slices” og ”save for web and devices”. Det var mye enklere enn jeg trodde, ikke noe stress med alle boksene div’ene som legger seg feil og hopper rundt, slik det gjerne blir når man skal lage en nettside ved å begynne å kode HTML og CSS på et blankt dokument. (Obligatorisk oppgave 06 Enkelt nettsted er bygget på den måten)
Designvalg for mappe:
Jeg er en person som liker sans seriff skrifter best, gjerne geometriske, og gjerne tynne. Jeg liker ren, enkel design, men den må ikke være for kjedelig, kontraster og skarpe farger må få bryte opp, der må være dynamikk. Jeg liker også røffe, scruffy finisher, som for eksempel på fotoessayet/fotogalleriet.
Denne mappepresentasjonen har mange av disse elementene i seg, så jeg vil si at den representerer meg ganske godt som designer. Bakgrunnsbildet er et makrobilde jeg tok av boblene i colaglasset mitt, men jeg synes det ligner på aliens. Jeg liker jordfarger og skarpe farger i kontrast mot svart. Jeg er glad i å fotografere og synes svart er fint som ramme for foto men også ellers i design. Sjakkbrettruter har jeg alltid likt, når jeg var liten ønsket jeg meg svart-hvitt sjakkrutete kjøkkengulv når jeg ble stor. 🙂
Skisser mappepresentasjon:
Arbeid med digital mappe i Photoshop (screenshot):
Arbeid i Dreamweaver (screenshot):
Deilig å ha levert inn mappa mi, da er det bare prosjekteksamen igjen! 😀
Obligatorisk oppgave 08 – Fotogalleri Flash – forbedret versjon
I denne obligatoriske oppgaven (08) skulle vi lage et Flash fotogalleri fra bildene vi tok i obligatorisk oppgave 07 Fotoessay. I tillegg skulle vi lage et Flash banner som skulle plasseres på Enkelt nettsted (obligatorisk oppgave 06) og ved å klikke på dette banneret skulle man komme til Fotoessayet. I forbindelse med mappeinnlevering for 2.semester, har jeg jobbet med å forbedre oppgave 08.
Interaktivt banner i flash
Her er et bilde av det gamle banneret:
Og her et bilde av det nye:
Jeg har tegnet om igjen de tre grafiske elementene, koppen, saksen og kammen med en mer nøyaktig strek og med tynnere stroke. Jeg har valgt å gjøre bakgrunnen lys grå fordi jeg synes det gamle versjonen var veldig skrikende i kontrast mot den svarte nettsiden. Den nye lysegrå ser faktisk hvit ut mot det svarte, men er ikke like skarp å se på.
Se den nye versjonen av banneret nederst på Enkelt nettsted (ny versjon): http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
Den gamle versjonen av banneret kan du se nederst på gammel versjon av enkelt nettsted: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html
Fotogalleri
Kritikken jeg fikk for det første fotogalleriet mitt var at det var forskjellig stil på banner og galleri. På banneret hadde jeg f.eks tegnede elementer, disse var ikke å finne i fotogalleriet.
Noen skisseidéer til ny utforming av fotogalleriet
I den nye versjonen av fotogalleriet har jeg integrert koppen, saksen og kammen i nederste del av galleriet (footer). De fungerer samtidig som ”hjem” knapp; ved å klikke på dem kommer man tilbake til forsiden.
Jeg har lagt en rad med thumbnails (små kvadratiske versjoner av alle de seks bildene) i footer, ved å klikke på disse kommer man til den store versjonen av bildet. Det ligger også usynlige fremover og bakover-knapper helt til høyre og helt til venstre nederst i de store bildene (rett over den svarte footeren). Disse blir synlige ved mouseover, og man kan klikke fremover eller bakover eller hele veien rundt.
Link til obligatorisk oppgave 08 Fotogalleri (ny versjon):
http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/flash/Fotogalleri_ny_2012.swf
(Til sammenligning, her er den gamle versjonen: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/Flash/Fotogalleri_03_oldversion.swf )
Ny versjon av hjemmesiden i WordPress
Fordi en hun kjente hadde en webside med samme template, ville hun gjerne bytte. Derfor byttet jeg til et annet WordPress theme på siden hennes www.brunmark.no.
Jeg har tatt noen screenshots av det nye utseendet av websiden (på noen av dem er bildet øverst «klippet i biter», dette skyldes at bildene rulerer). Websiden ser nå slik ut:
Har laget hjemmeside i WordPress
Som en øvelse til prosjekteksamen og for å hjelpe en venninne, har jeg laget en hjemmeside i WordPress. Hun har nettopp sluttet i jobben og begynt som frilansjournalist, og hun trengte en hjemmeside for å presentere seg selv og hva hun kan tilby.
Her er noen screenshots fra hjemmesiden – banneret i topp rulerer i tre versjoner:
Og her er en link til siden: www.brunmark.no
Enkelt nettsted – the end
Strevde fortsatt med å få til plasseringen av elementene, og startet på nytt igjen med et nettsted med navnet ”PlanB” fordi jeg tenkte at om ikke jeg får tid til å lage et skikkelig fint nettsted, så kan jeg i det minste ha et i bakhånd, et enkelt et, som var min PlanB.
Men etter god hjelp fra lærerne på forumet fikk jeg det etter hvert til likevel. Viktig å ha styr på hvilke div’er som er inni hvilke andre div’er og hvor store disse er. Det var også et godt tips å gjøre seg ferdig med byggeklossenes plassering, før man begynner med styling. Lettere å se sammenhengen da.
Jeg valgte å fjerne det hvite fra skissene mine slik at bakgrunnen ble helt svart og endret bittelit i plassering av f.eks menyen, men ellers er det ferdige resultatet nesten som på skissen.
Men jeg må si at dette har vært litt av en reise! Jeg har lært masse av den, og synes min ”PlanB”-nettside ikke ble så verst likevel tilslutt for å være en begynner slik som meg!
Endelig versjon ”PLAN B” websiden:
Live versjonen av nettsiden finner du her: http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html
T H E E N D ! 🙂
Enkelt nettsted episode 3
Begynte å skisse igjen. Var ikke fornøyd med utseendet på siden, samt kranglet med posision, float, osv. Lekte med nye varianter av den grønne websiden, men begynte igjen å tenke på skarpe farger mot svart bunn. Her er nye skisser:
Nye skisser i Illustrator:
Kjedelig? Tja. Kanskje på tide å ta fram igjen sommerfuglen? Denne?
(Ny variant av dem gamle, snudd på gradient blant annet).
Og noen slike?
Sommerfugldesign på websidene:
Men hva har egentlig sommerfugler med webdesign, HTML og CSS å gjøre? Det ble litt feil. Så jeg bestemte meg for å knipse noen bilder selv og bruke disse. Bildet av meg selv manipulerte jeg med Adobe Photoshop Lightroom slik at det ble sjøgrønt og lilla, og fargene i designet ovenfor plukket jeg opp herfra med teardrop-verktøyet i Illustrator.
Valgte dermed å manipulere bildene jeg tok slik a de også ble litt sånn ”aged” og med lilla, grønne og gule toner.
Dette bildet illustrerer at HTML er et ”markup language”. Dermed en gul marker. Logisk, eller hva?
Dette bildet skal vise en wireframe skisse, hvordan man planlegger byggeklossene til en webside:
Til forsidebilde valgte jeg et bilde jeg selv tok i vinter, av noen tørre strå foran et nettinggjerde med snøen i bakgrunnen. Jeg manipulerte bildet slik at det fikk en nydelig turkisgrønn farge. Bildet skal selvfølgelig illustrere ”nettet”, med det nettinggjerdet (”wire fence” på engelsk, ikke langt unna ”wire frame”) 🙂
Enkelt nettsted episode 1
Denne oppgaven er nok den jeg har brukt lengst tid på av alle de obligatoriske oppgavene på multimediestudiet. Jeg begynte i januar-februar på læringsaktivitetene for webdesign som enkel HTML og CSS og jeg påbegynte allerede da Enkelt nettsted med ideer og skisser.
Her er en av de første ideskissene:
Hadde lyst å lage en dekorativ CSS fordi CSS er selve designet til websiden, selve stylingen. Den skulle være på mørk bakgrunn (svart, mørk grå eller grå) slik at den på en måte lyste. Her er noen forsøk i Illustrator:
Skisset litt mer og tenkte litt på hvor mange kolonner jeg skulle ha osv. Her er noen skisser:
Så testet jeg skissene røft i Illustrator:
Begynte å leke med en annen slags illustrasjon:
Og så prøvde jeg det ut på skissen i Illustrator med forskjellige farger. Kanskje grått var kjedelig?
Dette var i februar. Deretter ble det travelt på jobb og det ble umulig for meg å studere ved siden av i en periode. Hverdagen hang ikke sammen, så her ble det en lengre pause i arbeidet.
CSS font og farger
Som en fortsettelse av forrige oppgave skulle vi lage en separat tekstfil og kalle den index_CSS.css, og linke den inne i HTML-dokumentet i <head>-området. Denne tekstfilen skulle vi deretter kode med enkel CSS slik at skriften skiftet og fargen på skriften skiftet. Her er litt utprøving med CSS font og farger. CSS er helt nytt for meg, og veldig gøy å se hvor lett det skifter – magisk!
CSS-kode for rød overskrift <h1< i Verdana:
Slik så det ut i nettleseren:
Skiftet til grønn Times New Roman overskrift, kode og nettleser:
Jeg gjorde om innledningen en ingress ved å gjøre den bold, ved å bruke <b> og </b> i HMTL-dokumentet.
Så ville jeg prøve i forandre selve teksten i dokumentet til samme farge i CSS, det vil si all tekst som var innenfor paragraf-klammer <p> og </p>. Jeg fikk til de fleste tekstbolkene, men den delen av teksten som var med kulepunkter, ville den ikke farge grønn! Selv om jeg sørget for <p> og </p> foran og bak de tre setningene med kulepunkter. Jeg synes dette er litt merkelig, er det noen som vet hvorfor? Hva kunne jeg har gjort annerledes?
Se kode i HTML og CSS, samt skjermbilder. (Ps. Det første dokumentet index.html som opprinnelig ble laget i Notepad måtte åpnes i ett nytt program for å bli redigerbart, og jeg valgte Dreamweaver. Det er første gang jeg har brukt Dreamweaver, så det er temmelig spennende! 🙂
CSS:
Nettleser:
HTML i to deler:
Tar gjerne tips om hvorfor CSS ikke forstår <p>taggene når der er <li> tagger også…?
Ny versjon
Laget en ny versjon av HTML og CSS’en. Først fjernet jeg p-taggene foran og bak li-taggene, de var visst overflødige. P betyr «paragraph» og li betyr «list», så jeg trengte ikke begge. Når det var gjort skjedde det ikke noe før jeg hadde definert at «li» skulle ha fargen grønn i CSS’en. Som det var kodet før, stod det kun at «p» skulle være grønn. Slik ble HMTL og CSS riktig:
Da ble all tekst grønn i browseren som jeg hadde tenkt:
Gry Monica's hjørne 
Kommentarene