Portfolio – 4.semester

At the end of each semester, we collect the mandatory tasks in a Portfolio for assessment and grading. You should present the tasks specified below, from your 4th semester, in a website. This website should be designed so that it conveys how you are as a designer. The site must contain links to all the mandatory assignments specified below in the list, and a link to your reflective diary.
– Oblig.05 Illustration/Photo
– Oblig.06 Person, product and natural light
– Oblig.07 Title Sequence
– Oblig.08 Interactive infographic website
– WordPress blogg (dagbok)

Til mappevurderingen for 4.semester, mitt siste semesteret, skal jeg lage en webside hvor jeg samler alle de obligatoriske oppgavene som er utført dette semesteret. Jeg kommer til å inkludere en link til denne bloggen, og eventuelt noen læringsaktiviteter eller skisser. Både de gamle versjonene og de nye skal leveres, og hva som er forandret skal beskrives i en rapport. Nå skal jeg først jobbe med tilbakemeldingene jeg har fått fra Noroff, og forbedre de fire oppgavene jeg har levert dette semesteret. Deretter skal jeg beskrive hva som er forandret og gå gjennom rapporter. Tilslutt skal jeg designe og programmere en webside.

Jeg begynte med å bruke ABC metoden, for å tvinge hjernen til å tenke på alle bokstavene i alfabetet og komme med idéer, tanker og innspill til oppgaven. Videre jobbet jeg med å finne et passende domene navn. Mens jeg jobbet med dette, sjekket jeg også hvilke navn som var ledige. Jeg ønsket helst å opprettet et .com domene til porteføljen.
img002img003

Videre jobbet jeg med skisser, og skisserte wireframe, sitemap og layout for nettsiden. Jeg ønsket fokus på bilder, og gjerne med en slider/galleri funksjon. Jeg har studert fotografi tidligere, og føler dette er en god måte å representere meg selv som designer. Skissene er til god hjelp når jeg senere skal lete etter et theme som passer mine idéer. Themes som ble vurdert til oppgaven vises samlet under. Navnene på disse themes er Twenty thirteen, Virtue, Vantage, Customizr, Responsive, WP creativix, Polaroids, Hatch og Photolistic.
img001themes

Domene navnet jeg valgte å gå for ble studioannette.com. Dette navnet ble valgt fordi det er lett å huske og si, samt fordi mitt spesialfelt er fotografi og da passer det å bruke studio i navnet. Jeg ønsker å kunne bruke denne nettsiden i fremtiden til å vise arbeider jeg har utført for kunder, og henvise nye kunder til denne siden for mer informasjon.

Videre ble WordPress lastet ned, og themet Customizr. Dette themet passet best til det designet som var ønskelig å oppnå for porteføljen. Her kan man fokusere på bilder og en presentasjon av dette. Med dette themet kan jeg bruke en slider på hovedsiden, og derfra henvise brukeren til de aktuelle sidene for mer informasjon om hver enkelt oppgave. Jeg har opprettet et child theme, og gjort forandringer i php scriptspråk, html og css for å tilpasse nettsiden for å oppnå et ønskelig resultat.

Nedenfor ønsker jeg å vise litt av prosessen med nettsiden og slideren.
prosess

Det finnes et WordPress symbol i meny og footer, som er en link hvor brukeren blir sendt direkte til min reflekterte dagbok. Det finnes også et Facebook symbol i meny og footer, som er en link til min facebookside. Videre finner brukeren alle de fire obligatoriske oppgavene i menyen, og en slider på hovedsiden med et utsnitt av hver enkelt oppgave. Jeg har valgt fargen rosa, siden dette er min favoritt. Sammen med rosa har jeg valgt fargen grå, siden de passer godt sammen.

For å komme direkte til porteføljen min, trykk på denne linken: www.studioannette.com

– Annette B. D.

WEBP – Child Theme

De siste dagene har jeg jobbet med å forstå og teste ut hva Child Theme er og hva jeg kan gjøre med det. Jeg har forstått at det er svært nødvendig hvis man ønsker å forandre noe på design og oppsett, på temaet man allerede har valgt. Først gikk jeg gjennom en del videoer, tok notater og følte meg klar til å teste dette ut i praksis.

– Åpnet cPanel, gikk inn i wp-content mappen, deretter Themes. Derfra valgte jeg new folder, hvor jeg skrev inn et nytt navn på et theme.
–  Åpnet Adobe Dreamweaver, nytt css dokument, og byttet ut det som trengtes ut i fra eksempelet fra WordPress.org sine sider, her.

Videre var det svært viktig at man linket child themet til parent themets stylesheet, altså @import url. Ellers ville ikke nettstedet bli stylet i det hele tatt, og jeg måtte bygd det opp fra bunn, noe som selvfølgelig er en mulighet..
– Test 1; jeg logget inn på wordpress sine sider og gikk til themes. Der fant jeg IKKE mitt child theme, og fant senere ut at det sto beskrevet nederst på siden at themet var ødelagt. Jeg skjønte ingenting, og visste ikke hva jeg kunne gjøre for å fikse det eller hva som var lurt i dette tilfelle.
Deretter bestemte jeg meg for å prøve å lage child theme av Twentyeleven themet (siden mange viser eksempler på dette, og jeg tenkte at hvis jeg ikke klarte det nå måtte det være noen alvorlige feil noe sted). Etter en del sletting og ny opprettelse logget jeg igjen inn og denne gangen kom child themet mitt opp. Det var en stor lettelse.Videre brukte jeg et bilde fra kunden som screenshot, som fungerer som et lite bilde/ikon som symboliserer (child) themet mitt.

Jeg har allerede lest/sett og blitt inspirert/motivert av mange nettsider, og noe av det jeg kommer til å fokusere på fremover er fonttype. Kunden ønsker faktisk at menyen skal fungere som individuelle knapper, og disse knappene skal være bilder med valgt tekst/font. Kunden ønsker en spesiell font, som representerer selskapet og produktene. Har prøvd å finne ut av hvordan man kan lage en meny bestående av klikkbare-bilder, men det virker svært komplisert i forhold til plassering og brukervennlighet. Dette er noe jeg kommer tilbake til i senere blogg-innlegg.

Her er noen gode kilder med mange gode tips til wordpress og child theme:
tips1 
tips2
tips3 

Jeg har lært en del nytt om file permissions, som jeg ønsker å dele med andre. Utifra wordpress.org, her, er det slik at directories (mapper) skal ha permissions 755 eller 750, og files (filer) skal ha permissions 644 eller 640. Det er svært viktig at wp-config filen har permission 600, på grunn av sikkerhet og fare for hacking.

Allerede henger jeg litt etter fremdriftsplanen, og merker at det er mye nytt og mye som tar tid siden jeg må sette meg godt inn i det. Jeg ønsker å forstå hva jeg gjør, og hvorfor, og at det ikke skal oppstå for mange problemer og feil underveis. Den tekniske biten er svært krevende, og særlig når jeg føler jeg ikke har noe pensum fra Noroff å støtte meg mot. Men jeg har funnet og kommer til å bruke mange av de gode kildene jeg har så langt.

– Annette B. D.

WEBP – Research 3

Research er en veldig viktig del i idéutviklings fasen. Det en en grundig og systematisk  måte man bruker for å finne og granske ny viten, samtidig som man øker kunnskapene. Jeg har i tidligere blogg-innlegg skrevet en del om litterær research, og i dette innlegget vil jeg fokusere på research via internett. Jeg har så langt funnet mange gode og inspirerende internettkilder, disse ønsker jeg å dele med dere, samtidig som jeg ønsker å dokumentere denne delen av oppgaven.

Inspirerende og gode kilder for wordpress etc:
– Her har jeg funnet mye inspirasjon og motivasjon. Har sett og gått gjennom utallige mange websider, og testet ut brukervennligheten, design og navigasjon. Dette har absolutt vært nødvendig for å selv tenke ut løsning til denne oppgaven, og hva som skal bli vektlagt og hva som skal utelukkes. Jeg har funnet en del gode kilder til hvordan man lager et Child Theme, og disse kommer jeg til å følge nøye i prosessen fremover.

http://www.flickr.com/photos/splat/sets/981332/

http://www.webcreme.com/

http://welovewp.com/

http://sixrevisions.com/wordpress/beautiful_wordpress_designs/

http://kreativ1.no/artikkel/447/kom-igang-med-wordpress

http://bothack.wordpress.com/2006/09/17/how-to-create-a-wordpress-template-in-5-minutes/

http://www.side2.no/livsstil/article2807228.ece

http://themeshaper.com/2009/04/17/wordpress-child-theme-basics/

http://www.webdesignerdepot.com/2011/12/creating-your-first-wordpress-child-theme/

Favoritter, når det gjelder layout og design av nettsider:
– De utvalgte nettsidene presentert nedenfor var sider som gjorde et godt inntrykk på meg, og som var lette å ta i bruk. Førsteinntrykket var svært godt, både design og teknisk, og etterhvert navigasjonen, samt brukervennligheten. De inneholder få, men nødvendige elementer, og en god typografi som passer godt til stilen. Keep it simple!

http://studio8169.com/

http://www.nemethinteractive.com/#/home

http://glasscoatphotobooth.com/

http://themischiefco.com/

http://thewoman.ro/

http://www.myownbike.de/

http://www.uniform.no/ (min absolutt favoritt)

Videoer:
– Nedenfor er en liste over noen videoer jeg har sett og kommer til å bruke videre i prosessen fremover. De handler om wordpress, og child theme, noe jeg skal jobbe nøye med for å forstå og gjennomføre til denne oppgaven.

http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/

http://css-tricks.com/video-screencasts/26-designing-for-wordpress-part-two/

http://css-tricks.com/video-screencasts/27-designing-for-wordpress-part-three/

http://www.youtube.com/watch?v=xUjHtm3vcw8&feature=relmfu

http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

Andre nyttige linker:
– Tilslutt ønsker jeg å legge ved andre nyttige og gode internettkilder, som jeg absolutt kommer til å benytte ved senere anledninger. Her er det tips og triks til koding av html og css, samt info om Photoshop, Php, Child themes, Filezilla etc.

http://codex.wordpress.org/Editing_wp-config.php

https://api.wordpress.org/secret-key/1.1/salt/

http://codex.wordpress.org/Child_Themes

http://codex.wordpress.org/Pages

http://filezilla-project.org/

http://psd.tutsplus.com/

http://w3schools.com/

http://php.net/

Nå har jeg mange kilder å gå utifra, både litterære og fra internett. I dagene fremover skal jeg jobbe videre med idéutvikling, og lage flere analoge og digitale skisser. Jeg skal itillegg finne og bruke et anbefalt webhotell, laste ned wordpress, themes, child theme etc. Jeg er fortsatt litt usikker på hvordan jeg skal ordne mappestukturen min nå som jeg jobber med et nettsted med egen domene. Dette og andre spørsmål/problemer er noe jeg skal jobbe med for å forstå og utføre riktig.