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.

9.1 Layoutstiler – CURB – Digitale skisser

Siden jeg benyttet programmet Adobe InDesign til utarbeidelsen av magasinet, utført forrige semester, ønsket jeg denne gangen å jobbe i Adobe Photoshop. Jeg startet med å opprette et dokument på størrelsen 1366 x 768 px, og deretter forandret grid etter ønske.

Over ser dere noen eksempler over hvordan grid kan se ut, og hvordan det brukes for å finne midten av dokumentet, samt for nøyaktig plassering av andre elementer. La ved logoen til CURB-magasin, siden dette blir benyttet i alle mine digitale skisser.

Jeg startet med å lage noen wireframes, for deretter å plassere de ulike elementene jeg har valgt til hovedsiden der hvor det var ønskelig. Selve logoen og menyens plassering var jeg veldig sikker på, men for de andre elementene måtte jeg prøve en del ulike layoutstiler, og plassering, samt størrelse på elementene.

Av alle de digitale skissene og wireframes foretrekker jeg det første eller det siste forslaget. Fra de analoge skissene til de digitale har jeg erfart at jeg jobbet med for mange elementer i noen av de analoge skissene. Det er viktig at en hovedside til et nettsted fremstår ryddig og oversiktlig. Nå gjenstår det å velge en av mine to favoritter, samt produsere siden som en html fil og få layouten opp på mitt enkle nettsted.

– Annette B. D.

9.1 Layoutstiler – CURB – Skisser

Dette semesteret skal du utarbeide layout for CURB magasinet sin hovedside på nettet. Dere skal bruke de samme elementene som ble brukt til det trykte magasinet, se her. Følgende krav er satt til aktiviteten:
– Minimum 6 analoge eller digitale skisser. Test ut layoutstilene; symmetrisk, asymmetrisk og kombinasjon.
– Velg en av skissene.
– Lage en wireframe av denne skissen, hvor en grid skal brukes som hjelpemiddel.
– Utarbeid det ferdige designet i Photoshop eller InDesign.
– Produser dette som en HTML fil, bruk CSS til layout.
– Legg opp nettsiden i en egen mappe med navn: aktiviteter, på deres ftp server og begrunn valg av layout og design på din reflekterte dagbok.

CURB magasinet er et fiktivt magasin som blir brukt i øvelser til utarbeidelse av layout. Se mitt ferdige eksempel til det trykte magasinet, her. Dette ble utført forrige semester, og dette semesteret skal jeg jobbe videre med CURB-magasinet, samt elementene jeg har valgt. Dette virker som en ganske krevende oppgave, spesielt tids – og design messig. Grid er et svært viktig hjelpemiddel i layout, både for trykk og web. Gjennom denne aktiviteten skal jeg erfare hvordan grid blir brukt i arbeid for web.

Hittil har jeg lest alle HTML-leksjoner om grid, og brukt gode, relevante linker for grid for videre lesing. Jeg har brukt tid på å gå gjennom HTML og CSS, ved å se tilbake på tidligere oppgaver og leksjoner. Nå er første punkt i oppgavens krav utført; skisser. Jeg valgte å starte med analoge skisser, og det ble totalt 12 stk. Det fungerer bedre for meg å ha mange forslag, for deretter å oppnå et bedre resultat. Her er skissene som er utarbeidet til denne oppgaven, hvor plassering og form har blitt vektlagt:

Videre kommer jeg til å lage noen digitale skisser, og se hvordan de ulike forslagene fra de analoge skissene fungerer. Det forslaget jeg synes fungerer best, er det jeg kommer til å jobbe videre med. Først må jeg lage en wireframe, og deretter begynne arbeidet med layout (og grid som hjelpemiddel) i Photoshop eller InDesign.

– Annette B. D.

Oblig.08 – Banner prosess

Nå begynner banneren, som skal reklamere for fotogalleriet, å bli ferdig. To dager før innlevering gjenstår det å gå igjennom Flash arbeidene mine, ferdigstille rapporten og få integrert banneren på mitt enkle nettsted, samt laste opp fotogalleriet. Jeg er veldig spent på om jeg klarer å få til dette på første eller andre forsøk, og gleder meg til å få alt på plass, samt vise dere hva jeg har jobbet med i 5 uker.

Banneren skal inneholde en enkel animasjon. Jeg har valgt å lage en animasjon av en bukse/jeans som blir brettet, og har jobbet med fire hovedstadier i animasjonen. Disse tegningene har jeg tatt prinscreens av, så dere kan se hvordan buksen ser ut i de ulike stegene. Først en tegning av en jeans i full lengde og bredde, bakfra. Deretter en tegning av en jeans som er brettet til den ene siden, hvor det andre «beinet» ligger bak. Videre en tegning i prosessen som viser hvordan buksen ser ut idet den blir foldet en gang. Den siste tegningen viser hvordan en jeans ser ut når den er ferdig brettet, kompakt og plassbesparende.

 

Jeg har brukt veldig lang tid på å utvikle disse fire stadiene i animasjonen, og det har vært svært krevende å bruke Adobe Flash sine tegneverktøy. Jeg har allerde gjort noen forandringer til tegningene for å forenkle de enda mer. Etter mye jobbing med å tegne og finpusse på buksene har jeg laget et movie clip. Jeg har brukt en blå farge i stroke for å illustrere hvilken farge jeansen har. Jeg startet med å velge Create Shape Tween mellom de fire tegningene, og laget en animasjon på tilsammen 10 sek. Videre jobbet jeg med plassering av shape hints, altså hint man kan legge til for å få mer kontroll over animasjonen. Problemet mitt var at mellomposisjonene fra det ene stadiet til det andre ble helt feil, og absolutt ikke slik jeg hadde tenkt det. Jeg prøvde videre, og jobbet svært lenge med å få tweeningen slik jeg ønsket. Resultatet ble greit nok for å være nybegynner, men jeg følte meg veldig usikker på om dette kom til å bli godkjent.

Min eneste mulighet for å rette opp i animasjonen var rett og slett å starte på nytt, men jeg hadde fortsatt mine fire stadier å arbeide etter. Jeg opprettet et movie clip, startet med det første stadiet, og forandret tegningen i hver enkelt ramme. Deretter fortsatte jeg med å legge inn 2 sek pause, for deretter å jobbe videre med det andre stadiet, samt gradvis forandre tegningen. Arbeidet fortsatte med pause, steg 3, lage forandringer i 24 frames, pause, steg 4, pause. Animasjonen min ble 10 sek denne gangen også, men selve animasjonene kun 1 sek hver, med 2 sek pause/hold. Jeg har jobbet utrolig presist og vært nøyaktig med plassering, samt hvordan jeg har laget animasjonen. Mye tid er blitt brukt til å gå gjennom og rette opp animasjonen, og jeg føler selv jeg er mer tilfredsstillt ved dette resultatet.

På scenen skrev jeg inn tekst som skal brukes på banneren, og la til jeans animasjonen min. Måtte jobbe nøyaktig med plassering her også, og hvordan de ulike elementene skulle stå i forhold til hverandre. Tilslutt la jeg til en effekt på fotoessayets tittel for å få banneren mer interessant, en Clockwise rotasjon, som skal gjenta seg 2 ganger i sekundet. Utfordringen var å få dette til å stoppe akkurat i det animasjonen starter.

Jeg har valgt å benytte de samme fargene på animasjon og tekst som i fotogalleriet, for å skape en helhet og følelse av at alt henger sammen. For å få banneren til å fungere som en knapp/peker har jeg opprettet et button symbol og laget en knapp som er like stor som banneren, altså 640 px x 320 px. Knappen er usynlig og har kun innhold på Hit- stadiet. Fra banneren skal brukeren kunne trykke og komme direkte til fotogalleriet. Se printscreen under for hvordan banneren ser ut i scenen, det lyse blå laget illustrerer knappen.

– Annette B. D.

Oblig.08 – Galleri prosess

Nå begynner fotogalleriet mitt å bli ferdig, har jobbe veldig intenst med det i mange dager i strekk. Siden det ikke er så lett å vise prosessen min her på bloggen har jeg tatt printscreen av hvordan hver scene i galleriet mitt ser ut. Tilsammen har jeg laget 8 scener, og når jeg tilslutt laster dette opp på mitt enkle nettsted, skal det være mulig å klikke seg fra scene til scene og tilbake til hovedsiden. Alt fungerer som det skal i programmet, og jeg er veldig spent på om alt vil fungere på mitt enkle nettsted. Jeg kommer til å laste opp galleriet mot slutten av denne uken, så frem til da kan dere ta en titt på disse printscreens.

Dette er hovedside nr. 1, altså den første siden brukeren vil komme til fra banneren som reklamerer for dette fotogalleriet. Nederst til venstre er alle lagene jeg har opprettet og jobbet med, og til høyre er alle symbolene jeg har jobbet med til fotogalleriet. På denne hovedsiden presenterer jeg forsiden til fotogalleriet, med tittelen på fotoessayet og et fotografi av et objekt som betyr mye for personen som er med i fotoessayet.

Dette er hovedside nr. 2, siden man kommer til fra hovedside nr. 1. Denne siden har jeg jobbet veldig grundig med, og utforsket, samt eksperimentert med ulike funksjoner man kan legge til på symbolene/knapper. Det har vært svært krevende å få til koding for Action Script riktig, men etter mye retting er alt på plass og slik jeg ønsker det. Tilsammen ble det 76 linjer med koding, et utsnitt kan du se i eksempelet nedenfor.

Den ene funksjonen gjør at du kan se små versjoner av bildene i fotogalleriet ved å holde pilen over bilde titlene/navnene. En annen funksjon gjør at brukeren kommer tilbake til den opprinnelig siden, altså slik det ser ut i eksempelet for hovedside 2. Den siste funksjonen er at brukeren kan klikke seg videre fra en av bilde titlene/navnene og komme til selve galleriet, hvor bildene blir vist på hver sin side.

Dette er siden man kommer til ved å klikke på bilde nr. 1 på hovedside 2, altså det første bildet fra fotoessayet. Her har jeg jobbet i flere lag, og vært svært nøyaktig med plassering av alle elementer på scenen. Denne siden inneholder et fotografi med en grå ramme i midten, en knapp på høyre side hvor brukeren kan komme videre til neste bilde og en logo nederst som fører brukeren tilbake til hovedside 2. Logoen har jeg laget selv i Flash, og det er denne jeg kommer til å jobbe med og bruke til banneren.

Dette er bilde nr. 2 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen på forrige side/scene, eller fra hovedside 2. Her har jeg også et fotografi med en grå ramme i midten, en knapp på høyre side hvor brukeren kan komme videre til neste bilde og en logo nederst som fører brukeren tilbake til hovedside 2. I tillegg til disse har jeg lagt til en knapp på venstre side hvor brukeren kan komme tilbake til forrige bilde.

Dette er bilde nr. 3 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her har jeg lagt til de tre samme knappene som på forrige side, en tilbake/forrige-knapp, en neste-knapp og en hovedside-knapp. Siden dette fotografiet er vertikalt/portrett har jeg igjen jobbet svært nøyaktig med plasseringen av bilde og ramme, samt andre elementer.

Dette er bilde nr. 4 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er de samme knappene lagt til, nøyaktig på samme plass som de andre horisontale/landskaps fotografiene.

Dette er bilde nr. 5 i fotoessayet, som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er de samme knappene lagt til, på nøyaktig samme plass som blant annet forrige side.

Dette er bilde nr. 6 i fotoessayet, altså det siste bildet som brukeren kommer til ved å klikke på neste-knappen fra forrige side/scene, eller fra hovedside 2. Her er kun tilbake/forrige-knapp og hovedside-knapp lagt til. Siden dette er det siste bildet i dette galleriet skal ikke brukeren kunne gå videre, her stopper fremvisningen. Fotografiet og rammen har blitt plassert nøyaktig på samme plass som det andre vertikale/portrett fotografiet (bilde nr. 3).

Til fotogalleriet mitt har jeg jobbet svært grundig med plasseringen av elementene jeg har brukt, og benyttet hjelpelinjer, rutenett og linjal i programmet som veiledning. Jeg har vært nøye med navngivning av elementer (instance name), og å låse lag jeg ikke jober med for at ikke noe skal forsyve seg. Som font til tekst/titler har jeg brukt Copperplate, som er en serif font designet av Frederic W. Goudy, og som er både lettleselig og brukervennlig.

Hver scene har et eget Actions lag, hvor jeg har lagt inn koding i et eget vindu til knappene jeg bruker og den funksjonen de skal ha. Knappene har jeg laget enkle, slik at brukerne skal forstå hvor de skal klikke og hva knappenes funksjon er. Til knappene (< og >) har jeg brukt en stroke størrelse på 10, mens til rammene en stroke størrelse på 5. Dette har jeg gjort fordi knappene må være synlige og brukervennlige, mens rammene ikke trenger denne funksjonen siden de ikke er klikkbare. Rammene har jeg laget for å skape en helhet i designet, og fordi fotografiene skal være fokuset på siden/scenen, samt at fargene skal komme bedre frem. I designet av layout har jeg benyttet gjentakelse i farger, hvor fargene jeg bruker er svart, blå og grå. Dette er farger som også går igjen i fotografiene.

– Annette B. D.