WEBP – Avslutning

Imorgen er leverings fristen for eksamen for 2.semester: nettsted. Dette blir antakeligvis min siste post dette semesteret. Jeg har nå tatt en siste gjennomgang av nettsiden, cd og cd-cover, rapport og oppdatert fremdriftsplan. Kommer til å få noen til å lese gjennom rapporten og deretter gjøre eventuelle forandringer. Ellers er planen å presentere de ferdige produktene for kunden, og forhåpentligvis ende opp med en positiv og god følelse over det hele.

Imorgen skal jeg navngi filene etter Noroffs retningslinjer, og levere på Moodle. Deretter er planen å feire bursdag (12.juni) og nyte sommerferien med sol og varme! Jeg reiser 3 uker til USA og kommer til å opprette en egen blogg for dette, legger inn link til dette senere i dette innlegget, så kan de som vil følge meg der. Her er et kart over dit jeg skal:

Tilslutt ønsker jeg å presentere noen av de siste beslutninger som er tatt i henhold til produksjonen av nettsiden:

Kontakt (contact) side er kuttet ut siden det kun besto av en e-post adresse, dette er derimot lagt til i footer, med en link som fører brukeren direkte til en ny-mail side. Dette er kanskje ikke så lett å finne ved første øyekast, men flere som har testet ut nettstedet har merket seg dette ved å klikke seg rundt på nettstedet. Dessuten var det ønskelig at e-post/contact kunne forekomme på alle sider. Ved å benytte denne linken kan brukere/kunder sende forespørsler direkte til eieren og garantert få et raskt svar.

Stockists siden ble lagt til underveis i prosessen og var ikke en idé fra starten. Her kommer det mer informasjon senere. Kunden ønsket dette for kundene sine, siden produktene kan kun bli kjøpt via andre web-butikker, eller via direkte kontakt med kunden. Her vil det senere bli lagt til et kart eller tekst med de fem verdensdelene og derfra delt inn i land som selger Steel Feather produkter.

Filer/templates som har blitt forandret i kodingen er footer.php, header.php, sidebar.php, content-page.php og style.css. Jeg har lært at man kan bruke /* beskrivelse av hva koden betyr eller gjør */ for å skape en mer oversiktlig koding som det er enklere å gå tilbake til og forstå senere.

– Fredriftsplanen er noe forandret på grunn av at jeg var nødt til å reinstallere WordPress og starte på nytt 23.05. Fremdriftsplanen er justert og oppdatert, og innholder gode aktivitetsbeskrivelser for hver dag jeg har jobbet med dette prosjektet. Jeg har itillegg brukt noe lengre tid på research og produksjon enn først planlagt, derfor ble jeg ikke ferdig til datoen jeg opprinnelig hadde satt, tirsdag 06.06.12.

Her er screenshots av hver page/side brukeren kommer til via hovedmenyen på nettsiden. Dette legger jeg ved så lærere ved Noroff kan se hvordan nettsiden så ut idag for meg og hvordan sidene ser ut for dem når de går gjennom prosjektet mitt. På denne måten kan de sammenligne, og forsikre seg om at jeg ikke har gjort noen forandringer etter innleverinsfristen:

Første bildet er av hjemmeside til Steel Feather, hovedsiden. Videre på menyen kommer brukeren til en side som beskriver bakgrunnen til produktet og hvor de blir laget.

Tredje side fra menyen fører brukeren til en beskrivelse om produktet, samt bilder. Videre på menyen finner man en side med et galleri med 25 bilder som viser detaljer i produktet, arbeidere, maskiner og eieren av merkevaren, dette for å øke troverdigheten.

Femte siden fra hovedmenyen fører brukeren til bloggen til Steel Feather, hvor kunden vil oppdatere med nyheter om produkter etc. Videre kommer man til en side som ikke er helt klar enda, men som vil vise hvor man kan få kjøpt Steel Feather jeans og produkter.

De to siste sidene fra menyen fører til to sosiale medier Steel Feather benytter seg av. Her kan kunder og brukere som ikke kjenner merket lese mer om Steel Feather, og andres kommentarer til produktet.

Og tilslutt, linken til Steel Feathers hjemmeside:

www.steel-feather.com

Ønsker alle medstudenter og andre som følger bloggen, en riktig god og velfortjent sommerferie! Oppdateringer om hva jeg skal til høsten kommer etterhvert.

– Annette B. D.

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.

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.