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! 😀
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 float – clear (CSS Position)
Jeg fortsatte å eksperimentere med FLOAT og CLEAR under CSS Position. Her har det gule elementet blitt satt til float, right:
Det gule står fortsatt med float, right, men det blå har fått økt bredde fra 200 px til 712 px (som er størrelsen på kontaineren, her usynlig fordi jeg ikke har laget noen border rundt):
Fortsatt samme som forrige bilde, men har i tillegg satt container-elementet (boksen rundt som ikke synes her) til clear, both.
Da legger den brede blå seg pent under den gule:
Her har jeg tilbakestilt størrelsen på det blå til 200px og er tilbake til utgangspunktet. Men har satt både gult (a) element og rosa (b) element til float, right:
Samme som ovenfor, men her er alle tre elementene satt til float, right:
På forrige bilde flyter alle tre elementene ovenfor eller utenfor kontaineren, og dermed kollapser denne. Dette er ikke synlig her, men for å hindre dette kan man sette kontaineren selv til clear. Her har jeg satt kontaineren til clear, left. Fordi jeg ikke har border på kontaineren må det vises i DreamWeaver: (Den stiplede linjen er kontaineren,og den er igjen tilbake rundt elementene).
En annen måte å unngå at kontaineren kollapser er å lage line break og en ny css-rule .clear som legger til et usynlig element i kontaineren. Dette har jeg ikke testet så mye ut denne gang, men skal prøve det senere.
CSS position
Denne gangen skulle vi bruke CSS-dokumentet fra forrige øvelse og plassere de tre <p>-taggene fra en vertikal til en horisontal plassering. Vi skulle sette bredde på div-taggen og på p-taggene, og øve på position absolute, position relative og float right.
Det kom masse ekstra kode når jeg skulle sette på border sist, og jeg prøvde å gjøre det omigjen og fikk det plutselig til denne gangen, med riktig kode. Her er koden:
Og slik ble det riktig:
Endret teksten og satte div-tagger på hvert avsnitt, samt satte bredden på hver av dem til 200px:
Satte inn bakgrunnsfarge, men selv om hver setning/hvert avsnitt nå hadde fått egne div-tagger (#paragraf-a, #paragraf-b, #paragraf-c) så var jo p-taggene fortsatt kodet med grå bakgrunn.
Fjernet den grå bakgrunnsfargen på p-taggene:
Testet ut ABSOLUTE POSISTION, denne er med 215 px til venstre og 10px fra toppen:
ABSOLUTE POSISTION, med 215 px til venstre og 68px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 5px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 20px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 68px fra toppen:
ABSOLUTE POSISTION, med 215 px til venstre og MINUS 65px fra toppen:
Der stod den gule og den blå endelig likt på linje på toppen.
CSS – Box model
I denne oppgaven skulle vi jobbe med CSS utenfor det enkle nettstedet vi har jobbet med hittil. Vi skulle åpne et nytt HTML dokument og legge inn tre valgfrie <p>-tagger. Vi skulle legge de tre taggene inn i en valgfri div-tagg. Så skulle vi lage et nytt CSS stylingdokument hvor vi gave <p>-taggen følgende styling:
margin:15px
padding: 5px
background-color: #999
border: thin-solid: #000
Så skulle vi teste siden i en nettleser og lage en printscreen og skrive på box-modellens innhold. Innholdet er her: innhold (teksten) + padding (med grå bakgrunn) + margin.
Testet i Internet Explorer (med tekstforklaring):
I Firefox:
Hmm… Trodde egentlig «border: thin-solid: #000» skulle bety at jeg fikk en tynn svart ramme rundt boksene på alle de grå feltene <p>-taggene, men det fikk jeg ikke. Har refreshet og lagret hundre ganger, men det fortsetter å være uten ramme…
Jeg hadde skrevet «border: thin-solid: #000;» manuelt inn i CSS-dokumentet. Det var tydeligvis feil. Da jeg gikk inn via DreamWeaver dobbeltklikket på CSS-dokumentet og fikk opp boksen for CSS-rules, og her valgte «border», «thin» og «solid» så fikk jeg endelig svart ramme rundt boksene. Men CSS dokumentet fikk masse ekstra linjer… hmmf! Slik:
Det var da en fryktelig lang remse med kode i forhold til den første. Lurer på hvorfor det ikke virket bare med «border: thin-solid: #000;» ??
Slik ble det i hvertfall til slutt:
Adobe Dreamweaver – CSS
Vi skulle jobbe videre med CSS på den enkle nettsiden som vi har laget i Notepad og Dreamweaver. Med CSS skulle vi legge til forskjellige bakgrunnsfarger i div-tag boksene som jeg har definert i HTML dokumentet. Deretter skulle vi utheve et av ordene som gjentar seg på nettsiden. Dette kunne være farge, font, størrelse, bold osv. Så skulle vi legge en tynn border som er sort og solid på et av tag elementene på nettsiden.
Jeg har tidligere prøvd å legge forskjellige bakgrunnsfarger på div-tag boksene, og fikk til på alle bortsett fra på sidebar. Jeg fikk tips på forumet at det sikkert skyldtes at jeg hadde skrevet «sidebar» i HTML og «SideBar» i CSS. Det må være helt likt overalt. Fikk endret dette nå, og ble riktig. Koden er altså casesensitive, den gjør forskjell på stor og liten bokstav, så det er viktig at det er 100% identisk. Greit å vite!
Hadde noe tull med at bildene ikke kom frem, men fant til slutt ut at url’en eller stien til bildet viste stien på min pc, og ikke stien på serveren! Det må den selvfølgelig gjøre. Når jeg endret det kom det fint fram.
Prøvde også med andre farger på bokser og tekst.
Så skulle vi fremheve et ord. Jeg ville fremheve ordet HTML ved å gjøre det bold, i rød farge, med gul bakgrunn. HTML og CSS er helt nytt for meg så jeg måtte lete, prøve og feile temmelig lenge før jeg fikk det til. Først ble det avsnitt før og etter HTML = fant ut at jeg hadde brukt «class» med p-tag, det var jo klart! Så Prøvde jeg å flytte den til før og etter setningen, men da ble så klart hele setningen rød og gul. Tilslutt fant jeg «span class» tag’en som kunne brukes til å settes inn foran og bak det ene ordet jeg ville fremheve! Hurra! Da virket det!
Men jeg fikk det ikke til å virke i overskriften. Sannsynligvis kan man ikke kode «class» i h1-overskrifter?
Lurer også på om jeg har gjort det riktig ved å kode inn span class foran ordet som jeg skulle fremheve, hver gang det dukker opp, i HTML-dokumentet. Det er jo ikke særlig effektivt. Man må inn og kode for hvert ord. Det som er bra er at ved å endre CSS’en skifter alle disse pre-kodede ordene samtidig. Men man må inn og gjøre en jobb i HTML’en først. Det ville vært mer logisk om man kunne kode ett sted i HTML at hver gang det kom et ord med kombinasjonen av bokstavene «html» så skulle det betyr «class so and so», og så dersom det stod i CSS’en hvordan «class so and so» skulle se ut, ut så ville man slippe fra det med å kode kun en gang i HTML. Men det er sikkert ikke slik?
Jeg la til slutt en tynn svart ramme (border) på «sidebar». Dette elementet er allerede ganske mørkt grå, men ser du godt etter så ser du rammen.
Gry Monica's hjørne 
Kommentarene