Dette var gøy! Og enda bedre, klasseliste-appen min virker!
(Du kan laste den ned til mobilen din HER)

Med utgangspunkt i phonegapmalen i dreamweaver har jeg bygget opp en app som stilmessig passer inn med annet Ifdefagskolen matriell. I appen er en liste over alle i klassen min (inkludert lærerne).

Om man trykker et navn åpnes en side med kontaktinformasjonen til personen.

Trykker man deretter på telefonummere åpnes “telefon vinduet” på telefonen. Om man har trykker på mailadressen (og man har mail på tellefonen) åpnes “skrive mail vinduet”. Linken til bloggen åpner ( ja du gjettet det) bloggen.

Jeg har også laget en Application Splash og et Application Icon:

Vi skal prøve å lage en app med PhoneGap i Dreamweaver CS5.5, jeg tenkte at jeg skulle lage en app som skal inneholde foto og kontaktinformasjonen til alle i klassen. Først må jeg laste ned en trial på Dreamweaver CS5.5, fordi jeg bare bare CS5, og da har ikke Dw støtte for PhoneGap og jQuery Mobile.

Da var jeg ferdig med nettsiden! Litt på overtid men det får gå fint ( jeg så en liten gylden mulighet til å fikse opp i de siste tingene da fremvisningen på skolen ikke kom så langt som til min oppgave og derfor ble forskjøvet frem til imorgen ).

Jeg slet en stund med slideshowet for å få det til å se ut som, og oppføre seg, som jeg ville. Jeg valgte å gå vekk fra å ha en kort info tekst i tekstfeltet i slideshowet, og istede bare skrive “overskriften”. Dette gjore jeg fordi jeg følte det ble litt mye å lese og litt kort tid å lese det på. Om brukeren ønsker å lese mer om det som vises i slideshowet, har jeg gjort det slik at om man trykker på bildet blir man ført til den siden infoen står på. Kodene jeg har brukt for å lage slideshowet fant jeg her.

Bildegalleriet under PR-siden har jeg laget ved å bruke Shadowbox-js. Jeg valgte denne løsningen da bildene på denne siden skal være store i størrelsen slik at presse og arrangøren kan hente ned bilde om de skulle trenge det. Shadowbox-js viser bildene i en tilpasset størrelse på skjermen, men den kutter ikke med på filstørrelsen om man kopierer bildene den viser.

Jeg har brukt en god del tid på å finne “den rette fonten” til overskriftene. Kvalitetene jeg så etter var at den skulle være en fyldig sans seriff med et hint av lekenhet. Av praktiske grunner var det også veldig viktig for meg at fonten hadde æ, ø og å. Jeg landet på en font som heter Boulder.

For å få nettleserne til å kunne vise denne fonten måtte jeg embedde den i siten min. Dette gjorde jeg ved å bruke @font-face koden i CSS.

Det har vært veldig lærerikt og artig å jobbe med denne siden, og jeg må si jeg er ganske så fornøyd med utfallet

Da har jeg fått laget de fleste elementene (knapper til menyen, footerbilde, bakgrunnsbilde, bakgrunnsgradient, logobakgrunn), og kodet dem på plass. Ble litt styr da jeg ville plassere knappene i menyen jevnt utover inne i div tagen “meny”, men jeg fant ut at det gikk fint om jeg lagde en egen css-rule under #meny, og kalte den #meny img, så jeg kunne definere verdiene på knappene der. Veldig greit

Et annet “problem” jeg støtte på, var at Firefox ikke ville vise avrundede hjørner. Dette fikset jeg ved å legge til ekstra koder som Firefox forstår der jeg har rundet hjørnene. Det samme måtte jeg gjøre der jeg har lagt til “inner shadow”.

Apropos runde hjørner, hadde jeg et lite dilemma angående bildene som vises på siden. Jeg føler bildene ikke passet helt inn i helheten når hjørnene var “ubehandlet”. Samtidig føler jeg siden fikk et altfor barnslig uttrykk om jeg satte verdiene til at hjørner ble som resten. Løsningen ble en ørliten border-radius på 5px. Nå føler jeg bildene passer med resten uten at det ser teit ut.

Ellers har jeg laget alle undersidene, og plassert inn en del av teksten og bildene som skal være på dem.  Jeg har også linket alle linkene til sine respektive mål.

Det som står igjen nå er:

• lage slideshowet som skal gå på noen av sidene
• lage thumbnails til bildegalleri
• lage bildegalleri
• lage kontaktskjema
• finne en passende font til overskriftene
• legge inn resterende bilder og tekst

Etter mye frem og tilbake i illustrator har jeg nå kommet frem til et design jeg er fornøyd med. Jeg mener selv jeg har funnet en løsning som står i stil til stikkordene jeg skrev ned i startfasen av oppgaven. Jeg har ikke laget mockup av undersiden da disse kommer til å se mye ut som forsiden bare med annet innhold.

Hovedfargene jeg har valgt er:

Etter å ha lett rundt på nettet etter andre “klovnesider”, kom jeg frem til at det ikke var mye positiv inspirasjon å hente der. Jeg snakket med Knut om hva han kunne se for seg, og deretter satte jeg igang med skissingen. Det som i utgangspunktet skulle vært thumbnail-skisser ente opp med å bli noe jeg har valgt å kalle “Mix and Match-skisser”. Alle stedene det er tegnet en regnbue med sort bakgrunn, er det meningen at det skal være et foto.
De ble seendes slik ut:
 

Denne oppgaven ble levert ut onsdag 28. september, og jeg har jobbet jevnt og trutt (hver dag) med oppgaven siden da. Jeg har dog ikke oppdatert bloggen så ofte som jeg burde, men har skrevet notater hele veien. Planen er nå å legge ut noen blogginnlegg som oppdaterer prosessen frem til nå, og deretter blogge mer jevnlig.

Oppgaven går ut på at jeg skal benytte kodespråkene HTML og CSS for å bygge opp en fungerende nettside. Hvem/ hva siden er for, og hvordan den er utformet bestemmer jeg selv. Det skal være minst fire linker til andre sider (helst undersider).

Så hvem/ hva skal jeg lage side for?
Jeg begynte med å lage en forslagliste. Deretter lagde jeg en liten oversikt over de forskjellige forslagenes positive og negative sider. Jeg valgte tilslutt å jobbe med en nettside for min onkel, Klovnen-Knut. Jeg valgte dette fordi jeg føler det vil være bra for meg å jobbe mot en reel “kunde” som kan komme med innspill og ønsker om den (fiktive) nye nettsiden. Her er den nåværende nettsiden hans.

Tanker om den nye nettsiden. 

• Få inn mer farger, men siden skal ikke fremstå som glorete
• Et litt humoristisk uttrykk, men mest profesjonelt 
• Barnlig, men ikke barnslig
• Laget et slideshow (med bilder og tekst) i form av en banner
• Lage et galleri med store bilder for nedlastning

Oppgavetekst
“I denne oppgaven skal du lage en illustrasjon i Photoshop hvor du benytter deg av flest mulig av teknikkene vi hadde vært i gjennom. Du kan også gjøre deler av arbeidet i Illustrator. Lag en skisse/tegning og skann den inn eller finn arbeid direkte i programmet. Du kan benytte deg av bildearkiver, foto, tegninger, mønstre, teksturer, brushes, styles og annet, for til slutt ende opp med en illustrasjon over temaet Steampunk. Du kan lage noe organisk eller “mekanisk” eller en blanding av begge, og ha med tekst om det passer.”

Jeg valgte å gå ut i fra et bilde meg og Michelle tok av min lillesøster, Ibis, i forbindelse med en reklame for Herskap og Tjenere. På bildet står Ibis og holder tomlene bak selene på kjolen, og det ga meg ideen om at jeg kunne lage en slags Steampunk-musikk-ryggsekk på henne. Med utgangspunkt i det begynte jeg å samle inn bilder til et lite Steampunk-bilde-bibliotek.

I photoshop har jeg brukt en hel haug Layer Masks og Adjustments Layers, samt en del Dodge og Burn Tool (som jeg litt for seint lærte at jeg kan bruke på en ikke-destruktiv måte, men det går greit ). Jeg har også tegnet/malt inn detaljer og skygger der jeg har følt det var passende. Det ferdige resultatet er en kollasj av rundt om 20 bilder ( hvor av noen er “lånt-uten-tillatelse”, så jeg håper det går greit for deg som eier de respektive bildene  o.0  ).

For å få litt kjenskap til maleverktøyene i Photoshop fikk vi utlevert et oppgavehefte hvor man gjennom å følge teksten ledes gjennom hvordan Derek Lea (som har skrevet boken som oppgaven er hentet fra) går frem for å fargelegge en skissetegning. Dette er hvordan min “kopi” ble:

Denne opppgaven gikk ut på at vi skulle finne minimum fem bilder og sette dem sammen til et postkort i Photoshop. I tillegg skulle vi legge til to linjer med tekst hvor minst et av disse skulle tilegnes layer style. Vi skulle også lage et poststempel i Illustrator.