WEBP – Nav Bar, page, page title, permalink,

En navigasjons meny må være enkel å bruke og lett å forstå for brukere som skal benytte seg av nettsiden. 1. Hvor er jeg? 2. Hvor har jeg vært? 3. Hvor kan jeg gå? Under viser jeg noen eksempler på hvordan en nav bar/meny kan se ut og hva en nav bar er:

http://www.w3schools.com/css/css_navbar.asp

W3schools er en side jeg alltid benytter når jeg trenger en oppdatering på hva noe er og hva jeg kan gjøre med det. På nettsiden finnes det mange eksempler, og man kan selv prøve de ut. Dette synes jeg er veldig lærerikt og gir mye kunnskap.

Først hadde jeg planer om å bytte ut farger i nav baren og gi de ulike effektene forskjellige farger; 1. den statiske grafikken som vises når pekeren ikke er over knappen, 2. grafikken som vises når pekeren er over knappen, 3. grafikken som vises når pekeren klikker på knapper, 4. et område som er mottakelig for perkerbevegelse, ikke synlig grafikk.
Jeg startet med å jobbe med hvilke farger som passet sammen, og som passet til kunden. Deretter begynte jeg å tenke å hvilke fonter som ville passe. Jeg benyttet moodboardene fra tidligere innlegg til dette.

Senere spurte jeg hva kunden syntes om denne idéen, og vi diskuterte nok engang hvilke sider som var nødvendige til nettstedet. Nå kom vi frem til at de ulike sidene skulle være: Front (istedenfor Home) – innholde et bilde samt noe innledende tekst om merket, About eller Story – hvordan Steel Feather ble til, hvordan det lages, Made in Japan, om denim etc, Collection (istedenfor Products) – bilder og beskrivelse om produktet/produktene, Lookbook (istedenfor Gallery) – bilder av maskiner, fabrikker, arbeidere, detaljer, inspirasjon etc. Alle bilder skal være merket med en Steel Feather logo, News – blogg innlegg, fungere som kommunikasjon, oppdatere ang. produkter, kontakter, legge ut bilder og tekst, Stockists – hvor man kan få kjøpt Steel Feather jeans, dette vil bli oppdatert senere og Contact – side med kontakt informasjon.

Etter en del research på konkurrentenes nav barer forklarer kunden at han ønsker en nav bar med fonten som blir benyttet i logoen, altså fonten LHF Indian Script 2. Dette mener jeg kun fører til problemer dersom dette er en kjøpt font, og ingen har denne installert på sine maskiner. Den eneste løsningen blir å lage små bilder med fonten og titler som linker til sidene. Dette er ikke noe jeg har vært borti før, og jeg trodde på dette tidspunktet at dette var umulig. Her er noen screenshot av konkurrentenes menyer:

Det siste eksempelet viser mer eller mindre hvordan kunden ønsker at nav baren skal være. Her har vedkommende brukt en font og laget bilder av dette, hvor man kan klikke seg videre til de ulike sidene.

Dette har vært et stort og krevende prosjekt for meg, og fra første tanke om at dette ikke er mulig til at jeg nå har fått det til har vært en lang prosess. Her er noen kilder jeg har benyttet og sammenlignet for denne delen av prosessen, samt hvordan jeg skal legge til og benytte knapper til sosiale medier:

http://diythemes.com/thesis/rtfm/replace-wp-menu-text-links-image-sprites/

http://www.wpbeginner.com/plugins/how-to-add-custom-menu-images-in-wordpress/

http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/

http://letsbuildwebsites.com/social-media-buttons/

http://tutorialspot.wordpress.com/2011/05/22/how-to-add-social-media-buttons-to-your-wordpress-blog/

http://devilsworkshop.org/how-to-add-images-inside-wordpress-3-0-custom-menu/

Her er et bilde av hvordan nav baren først så ut etter en del testing av farger. Vi kom frem til at hvit tekst mot svart bakgrunn er det beste for lesbarheten, samtidlig som det i tillegg er stor kontrast.

Først testet jeg størrelse på font og kom frem til at 38 pt var det mest optimale for nav baren og lesbarheten på fonten. Dette gjorde jeg i Photoshop, passet på at alle titler var plassert på samme sted og lagret i hvit farge med transparency– lagret som .png

Deretter lastet jeg opp bildene i cPanel, i images mappen. Videre logget jeg inn på WordPress, under Dashboard, Appearance -> menus. På venstre side kan man velge noe som heter Custom links – fyll inn URL (permalink til siden) og deretter label (koden <img src=»…»>), samt title attribute. Det var en prøvelse å få til navigation label riktig hver gang. Her er et eksempel på hvordan home linken ser ut:

Dette gjorde jeg til alle sidene og knappene som nav baren består av, totalt 8 stk. Slik ser resultatet ut:

Denne linken har jeg benyttet angående permalinker, altså URL til hver individuelle side og innlegg. Dette er noe man finner under Dashboard i wordpress, under Settings -> Permalink.

http://codex.wordpress.org/Using_Permalinks : » %postname% A sanitized version of the title of the post (post slug field on Edit Post/Page panel). So “This Is A Great Post!” becomes this-is-a-great-post in the URI.»

Videre har jeg prøvd å funnet ut av hvordan man blir kvitt page title under hver side. Eksempel: en side heter About og under menyen i det hvite feltet står det About som overskrift. Dette ønsket jeg ikke, jeg ønsket å kunne skrive egne overskrifter, og velge font på disse.

http://www.creativeworld.com.au/blog/web-design/how-to-remove-the-page-title-from-your-wordpress-homepage/

http://wordpress.org/support/topic/twentyeleven-hideremove-page-title

http://voodoopress.com/playing-with-fonts-on-a-twentyeleven-child-theme/

Da var det mest krevende tekniske delen av prosessen over. Neste innlegg vil bli om fotografering, redigering og plugins.

– Annette B. D.

Oblig.08 – Ferdig

Idag er innleveringsdagen for obligatorisk oppgave 08 – Flash. Igår klarte jeg heldigvis og ordne opp i problemene som oppsto ved integrering av fotogalleri og banner til mitt enkle nettsted. Jeg fryktet det kom til å bli vanskelig, og det var akkurat det som skjedde.

Først gikk jeg igjennom fotogalleriet; sjekket at alt var på plass og slik jeg ønsket. Deretter eksporterte jeg FLA filen til en SWF fil, altså en komprimert fil. Lagret denne filen i samme mappe som banneret. Jeg åpnet banneret i Flash, sjekket at animasjonen fortsatt fungerte og at alt var på plass. Deretter åpnet jeg Action Script vinduet og kodet riktig URL i parentesene, slik som vist under.

Jeg eksporterte denne til en SWF fil, og lagret i samme mappe som galleriet. Videre åpnet jeg Adobe Dreamweaver, index siden. Her importerte jeg banneret og la den inn nederst på siden. Jeg hadde allerede lagt til fotogalleriet i en egen Flash mappe, så denne var det bare å laste opp. Etter en del forsøk på å teste ut resultatet på mitt enkle nettsted, kom denne meldingen opp ved å klikke på banneret:

Noe var altså feil i kodingen til banneret eller plasseringen i mappene. Jeg prøvde meg frem; forandret kodingen, forandret mappeplassering, forandret filnavn etc. Den samme meldingen kom fortsatt opp. Etter mange timer begynte jeg å bli veldig frustrert, og da jeg spurte om hjelp på forumet til Noroff følte jeg meg både dum og fortvilet når jeg ikke skjønte forslagene de kom med. Uansett, etter mye fortvilelse greide jeg det tilslutt. Jeg lagret banneret som SWF på nytt, med et annet filnavn, la det til i Dreamweaver med en annen tittel, og lastet opp på nytt. Problemet var mest sannsynlig at filnavn og tittel var det samme, når jeg forandret dette var problemet løst.

Nå håper jeg virkelig at alt fungerer slik jeg ønsker, og at det fungerer likt på alle maskiner. For å komme til hovedsiden på mitt enkle nettsted hvor banneret er plassert, klikk her.

Banneret ser slik ut, og er allerede halvveis i animasjonen i denne printscreenen. Jeg har lagt til en svart ramme på banneret og sidene i fotogalleriet, for å skille de fra nettstedet og for å skape en bedre helhet i designet.

For å komme direkte til Flash fotogalleri, bruk denne linken, her.

Først kommer du til hovedside 1, som viser forsiden til fotoessayet og galleriet med fotografi, tittel og rammer. Deretter kommer du til hovedside 2, som viser titler til hvert bilde, samt tittel med tekst til fotogalleriet. Jeg håper teksten er med på å veilede brukeren til å forstå hva de ulike knappenes funksjon er. Dette er noe jeg har brukt mye tid på å få til, og for å forstå hvordan det fungerer anbefaler jeg å sjekke det ut. Fra denne siden kommer brukeren til selve galleriet, hvor knapper blir brukt for å ta brukeren tilbake eller videre i fremvisningen, eller tilbake til hovedside 2.

En annen viktig ting til denne oppgaven er rapporten, som teller 20%. Jeg legger mye arbeid i rapporten, det er veldig viktig for meg at denne fremstår profesjonelt og at den reflekterer min prosess og arbeidsmetode, samt idé og utvikling. Her kan jeg bruke litteratur og leksjoner fra Noroff som kilder, og begrunne mine valg. Hva har jeg lært? Hvordan har jeg lært det? Hvorfor? Hva har jeg gjort og hvordan?

Dette er noe jeg prøver å svare på i rapporten. I rapporten følger jeg et oppsett gitt av Noroff, hvor det starter med en innledningsdel, deretter en del om research og arbeidsprosess, videre en del om designvalg, så en del med egenevaluering og konklusjon, og tilslutt kildehenvisning og referanser. For de som ønsker å lese rapporten, totalt 10 sider, bruk linken under.

Rapport Oblig.8

– Annette B. D.