Da var eksamen over, og med den også skoleåret.  Oppgaven er levert og kunden har en oppegående nettside.  Blir rart å ikke ha ukentlige oppgaver eller en oblig hengende over hodet fremover, men det skal bli godt med litt ferie også.

Jeg laget en nettside for Næss Frisør og du kan se resultatet her:  http://www.ness-frisor.no

Ha en riktig god sommer alle sammen!

Advertisements

Da er mappen levert, så nå er det bare å vente på bedømmelsen.  Skal nå nyte en helg uten skole og feire min manns 50 års dag, før eksamen begynner på mandagen.

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

 

Det første møtet med WordPress var ikke så veldig moro.  Alle php filene og flere CSS filer for samme theme gjorde at jeg følte det som om jeg var sluppet ut på dypt vann uten å kunne svømme.  Men etter å ha lastet opp filer, slettet og lastet opp hele wordpress på nytt, begynte ting å falle så smått på plass.

Etter en del frem og tilbake valgte jeg et theme som hadde store muligheter for endringer og tilpassinger uten å måtte endre på kodene i filene.  Det var da enkelt å style nettsiden slik jeg ville ha den med farger, heading, logo, bilder og innhold.  Jeg laget headingen i photoshop og logoen i illustrator og lastet dem opp på wordpress.  Jeg lette rundt på nettet for å finne bilder og tekst  jeg kunne bruke, og lot bildene bestemme fargene på nettsiden, for å trekke alt sammen.

For å få til kontakt oss siden, la jeg inn en plugin, for at besøkende kan legge igjen kontakt informasjon og beskjeder.  Det å legge inn en plugin var veldig enkelt, og den hadde mange tilpasningsmuligheter både i design og funksjon.

Jeg brukte et par dager for å finne ut hvordan jeg skulle slette comments boksen som var lagt inn på hver side.  Jeg lette gjennom hver eneste fil i hele themet, men fant ikke ut av det.  Til slutt gikk jeg inn på themets forfatters nettside og søkte i formum der, og fant ut at det var så enkelt som bare det. Alt jeg behøvde å gjøre var å gå inn på pages og fjerne haken i en boks .  Det var altså ikke noe nødvendig å endre på noen koder i filene.

Ellers fant jeg  at wordpress var enkel å bruke og enkel å tilpasse.  Ved å legge inn statiske sider der man ikke ønsker at besøkende skal være interaktive, kan man designe sidene slik at de ikke ser ut som en blogg.  Det er fullt mulig å endre på tekst og bilder og å ha en “blog” side der man legger ut informasjon e.l.

WordPress har også en codex der man kan finne all informasjon man trenger om wordpress, selv om ikke alt var så enkelt å forstå.  Det som var litt tungvint var at man måtte logge seg inn på nytt med et annet passord og brukernavn for å få tilgang til all dokumentasjonen.

Nå er det bare å overlevere brukerrettighetene til en annen.  Håper det går greit.

Og her er linken til regnskapsfirmaet:

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

 

 

 

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

 

 

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

 

Flash er kjempe gøy.  Jeg gjorde faktisk denne oppgaven to ganger, men den første ble litt utenfor temaet, da jeg ble bitt av animasjons basillen og fikk alt til å bevege seg.  Ikke helt det oppgaven gikk ut på, så jeg laget en ny.

Jeg valgte formprinsippene balanse, bevegelse, enhet/helhet og proporsjon.  Som bilder valgte jeg noen blomster bilder jeg har tatt tidligere.  Å lage knappene for å kunne bevege seg fra scene til scene var ikke så vanskelig. Det som var viktig var å holde tungen rett i munnen og ikke få noen skrivefeil i action script.  Men programmet sier jo ifra hvor feilen ligger, så det også gikk greit.

Jeg la en transparent knapp over hvert av bildene på hovedsiden, ga hver knapp et instance navn og la inn koden i action script.  På hver av de fire bilde sidene la jeg inn en knapp som går tilbake til hovedsiden.

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

 

I disse to oppgavene skulle vi først lage to komposisjoner på hver sin scene og deretter lage knapper slik at det er mulig å bevege seg mellom de to scenene.

Den ene scenen skulle ha harmoni mellom typografi og elementene, den andre skulle ha kontrast.  Vi skulle egentlig lage statiske scener og legge ut jpeg av dem her, men jeg ble tatt litt av bølgen Flash og har derfor laget dem som animasjoner.

I den første scenen har jeg laget harmoni mellom typografi og elementer i at ordene og formen på dem harmonerer med scenen de forflytter seg på.  I den andre scenen har jeg brukt de samme ordene og typografien, men i en scene som er kontrast både i farger, form og hastighet.

Her er linken:

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

 

I denne aktiviteten skulle vi lage 3 ulike grafiske symboler, ett enkelt utformet movie clip symbol, samt gjøre avataren om til et button symbol.

Jeg laget først de tre grafiske symbolene. Tegnet dem med tegne verktøyene og valgte Modify og convert to symbol. Der ga jeg hvert symbol et navn med gfc foran.

Jeg laget så movie clip symbolet på samme måten.  Jeg laget alle elementene i forskjellige lag. Deretter la jeg inn 25 key frames.  Jeg flyttet litt på pupillene i øynene og la inn nye 25 key frames, og gjentok dette en gang til. Deretter valgte jeg Create Shape Tween. 

Avataren hentet jeg inn på scenen og konverterte den til et knappe symbol.  Jeg endret fargen på håret i over, down og hit.

Til slutt la jeg alle over på en scene og testet det ut.

For å ha gjort det før jeg setter igang med flash oppgaven – oblig08, la jeg flash filen inn på nettstedet vi laget i Oblig06.  Det gikk veldig greit.  Jeg gikk inn i Dreamweaver og la til en mappe som jeg kalte Assets.  Da det var SWF filen jeg trengte, brukte jeg litt tid på å finne ut hvor den var.  Fant ut at den automatisk ble lagret når man testet ut filen i Publish prewiev-Flash.

Jeg markerte stedet jeg ville legge flash filen inn i index siden, valgte insert media og swf og valgte SWF filen fra assets mappen.  Jeg ga den et navn, og vips var den plassert på siden.   Jeg har ikke fått den til å virke i firefox men den spiller i IE.  Er nok mer å lære rundt denne biten, men det får komme etterhvert.

Her er linken:

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