You are currently browsing the monthly archive for March 2012.

I denne oppgaven skulle vi lære å bruke grids til å lage en nettside.  Vi skulle først skisse 6 analoge eller digitale skisser og teste ut symmetrisk-, asymmetrisk layout og en kombinasjon av begge.  En av skissene skulle velges og det skulle lages en wireframe og deretter skulle siden lages i Dreamweaver.

Jeg skisset først, men fant så ut at jeg måtte vite mer om hvordan grid systems for web fungerte.  Så jeg lette litt på internet og kom over et gridsystem som var kalt “960 Grid System”.  960 Grid System er utarbeidet av Nathan Smith og er basert på 12, 16 eller 24 kolonner.  Jeg åpnet Photoshop og lastet ned 24 grid systemet og satt igang med wireframen.  Det gikk greit og jeg brukte slice til å lagre de forskjellige boxene for web.  Alt gikk greit til jeg skulle lage siden i Dreamweaver, men der fikk jeg ikke CSS kodene som kom med 960 Grid systemet.  Så jeg sloss med dette i 2-3 dager før jeg ga opp og begynte på nytt.  Det var likevel ikke helt bortkastet, for Nathan Smith har regnet ut hvor bred hver kolonne er med 5px marg på  hver side. Så når jeg laget siden var det bare å bruke de målene. Dermed slapp jeg å regne ut hvor lang hver box måtte være for å få alt til å gå opp i riktig bredde.

Jeg forkastet den første siden jeg laget, for den ble altfor tung og kompakt.  I en av HTML/CSS bøkene jeg har fant jeg en god løsning på layout med grid, der siden blir laget med boxer i forskjellig bredde, noen for tekst/bilder og noen blanke.  Deretter kunne jeg lage et background image for #container elementet der det ser ut som om layouten er laget med kolonner i forskjellig bredde.  Istedenfor å slice hver enkelt bit fra photoshop importerte jeg bakgrunns bilde helt.  Så når tekst og bilder var lagt på plass, ser det ut som om det er laget med kolonner.

Layouten er en blandig av symmetrisk og asymmetrisk.  Det er det som appelerer mest til meg, og det gjør det enklere å jobbe med bilder og tekst som er vanskelig å skalere slik at boksene blir like på høyre og venstre side av siden.

Jeg fant at det å jobbe med grids var veldig enkelt i forhold til å jobbe med plassering av de forskjellige boksene og kolonnene.  Alt jeg behøvde å gjøre, var å bruke Nathan Smiths mål, legge boksene i rader fra venstre mot høyre, bruke Clear both og så legge neste rad.  Videre fant jeg ut at det å være uhyggelig nøyaktig med wireframen er viktig.  For å gjøre det enklere å plassere bilde og tekst i samme boksen, er det lettere å lage en boks for bildet og en boks for teksten og plassere dem tett vedsiden av hverandre.  Dermed ser det ut som en boks med bilde og tekst.

For å lage en luftigere layout med whitespace og god plassering av ting og tang, brukte jeg  det gyldne snitt for å regne ut bredden på venstre “colonnen” og “content area”.  Tallene passet jo ikke helt, men da tilpasset jeg det bare til den bredden som var nærmest i mål i 960 grids.

Siden jeg har laget har en fast bredde på 960 px.  Det hadde jo vært en fordel om den var flytende.  Jeg rakk ikke å gjøre det med denne siden, men jeg har lest meg frem til at dersom jeg regner alt om til em verdier, vil siden være flytende, og jeg kan bruke de samme målene og bare dele dem på 16 px, som er standard størrelse på fonten installert.  Da får jeg alle verdiene i em.  Men, det får vente til neste uke.

Her er linken til siden:

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/web2/html/uke-27/uke-27-3.html

 

 

Advertisements

Nå er oppgaven levert, og det skal bli deilig med noen dager fri før neste økt.  Har funnet ut at vi bare har begynt å skrape litt i overflaten i forhold til hva Flash har å tilby, og at man må være pinlig nøyaktig når man skriver kodene i AS.  Programmet sier relativt raskt i fra dersom noe er feil, men det er ikke alltid så lett å finne feilen likevel.  I denne oppgaven har jeg forsøkt utallige metoder og løsninger for å få alt til å fungere sammen, men det har ikke vært så lett.  Er likevel litt fornøyd med det endelige resultatet, og håper at det vil oppføre seg ordentlig når lærerne skal teste det ut.  Men, jeg må innrømme at jeg har min tvil om akurat det.

Vel oppgaven er nå levert og det er ikke så mye mer å gjøre med det.

Og her er linkene til nettstedet og til Flash galleriet:

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/html/

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/ny-oblig-08/html/oblig08-ny.html

 

Selv om denne oppgaven var morsom å lage, begynner Flash nå å bli skikkelig frustrerende.  Har jobbet i en uke for å finne riktige koder for å få flash galleriet til å spille av slik jeg ønsker uten hell, og nå begynner jeg å bli temmelig frustrert i og med den skal leveres i morgen.  Selv de enkleste tingene virker nå som temmelig uoverkommelige og ingenting virker ordentlig.  Når jeg tror jeg har fått det til, oppstår en annen feil. Når den er rettet, kommer det en ny, og slik har de siste 5 dagene gått.  Er nå egentlig klar for å kaste både pc og flash i veggen og gi opp.  Men får vel forsøke å komme gjennom de siste timene før levering.

Uansett, her er bilen med easing og lyd:

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/html/learning-activities-2.html

 

I denne uken skulle vi lage tre animasjoner:

1: En shape tween animasjon der vi skulle lage en flash animasjon hvor geometriske former omformes til navet vårt.

2.  En animasjon av en klokke med en pendel, ved hjelp av classic tween.  Pendelsen rotasjon fra en side til den andre skulle være ett sekund.

3.  En classic tween av en bil som forflytter seg fra A til B og har en myk start og en myk stopp.

Jeg laget i tillegg en film til der jeg brukte Motion tween til å få bilen til å kjøre på en humpete veg.

http://elevarbeid.webstudent.no/dmk1_nettstudier/anne_nygard/html/learning-activities-2.html