PRODUKTION OG WORKFLOW

Transkript

1 PRODUKTION OG WORKFLOW

2 INTERN PROJEKTSTYRING PRODUKTION OG WORKFLOW Majken Cramer, Hovedforløb 2 Aarhus Tech, september 2012 HVAD GÅR OPGAVEN UD PÅ JULI Jeg har stået for projektstyringen på intranettet og design til hjemmeside til SubClub PRO samt opsætning af layout i form af HTML og CSS i vores CMS system. HVAD ER MIT BIDRAG Jeg har stået for de løbende statusopdateringer på projektet, idéudvikling, opsætning af design i Photoshop samt opsætning af i HTML i DreamWeaver. Jeg har sparret med min chef om det endelige design løbende og jeg har ligeledes været i tæt samarbejde med min programmør, der har stået for modul- og funktionsprogrammering. VALG AF PROGRAM Til designprocessen har jeg, naturligvis, brugt Adobe Photoshop, da dette program er pixel-baseret, og dermed understøtter den måleenhed, der benyttes til digitale produktioner. Til HTML-kodning har jeg brugt Adobe DreamWeaver, da dette program kan vise både kode og layout på samme tid - det giver en god fornemmelse af det endelig udseende. Vi skriver ikke i HTML 5 til denne opgave, da vi stadig vil sikre os, at koden kan læses af ældre browsere. Grafiker og lignende gemmes til web i korrekt farverum (RGB) og opløsning (72 ppi). Alle filerne komprimeres mest muligt, der gør den færdige hjemmeside nemmere og hurtigere at indlæse i browseren. Vores interne projektstyring starter med et planlægningsmøde om mandagen, hvorefter alle opgaver oprettes på intranettet. Vi har alle et personligt login, hvor vi kan se hvilke opgaver vi hver især har under de forskellige projekter. Det er også muligt at se en liste over alle opgaver på projektet. Vi opdaterer løbende vores status på de enkelte opgaver og melder dem procentmæssigt færdige. GRAFISK UDTRYK Idéudvikling med skitser. Forskellige udtryk blevet afprøvet i Photoshop og gennemgået i samråd med min chef. Det vigtigste var at skabe et brugervenligt, indbydende og enkelt design, hvor der blev lagt vægt på virksomhedens medlemsfordele. TYPOGRAFI. Der var allerede lavet diverse tryksager for SubClub PRO, hvor Univers blev brugt. Jeg undersøgte muligheden for brug af denne skrift og det lykkedes at downloade skriften som webfont. BILLEDER. SubClub PROs identitet omfatter en række figurer, som også skulle bruges online. Derudover er indentiteten billedfattig og der skabes et visuelt udtryk gennem typografien. FARVER. Jeg har valgt en neutral farveskala - hvid, sort og grå som de primære farver. En frisk og organisk limegrøm bruges som signalfarve og blikfang. KODNING AF HTML OG CSS KOMPOSITION. Til denne opgave har jeg arbejdet med frie rammer, hvor tekst og elementer ikke står i kasser / faste rammer. Der er et fast baggrundsbillede med nogle af figurerne og logoet. Selve indholdet ligger stadig inden for de 980 px, så jeg sikrer at alt indhold vises på 1024 x 768 px (standardopløsning). I bunden har jeg lagt en footer, der går fra kant til kant og understøtter de frie rammer. Forsiden består af et firmalogo øverst til venstre, de forskellige figurer i højre og venstre side, en hovedmenu (plads til sekundær menu oven over ved udvidelse), et banner med skiftende budskaber, forhandlersøgning og rabataftaler (medlemsfordele). Forsiden kommer, som udgangspunkt, til at bestå af forskellige moduler til styring af dynamisk indhold. Undersiden består af en indholdszone til tekst samt en højrestillet zone, hvor eventuelle undermenuer og opfordringer til brugerne vil blive vist. MODULOPBYGNING. Til opbygningen af forsideskabelonen er der oprettet en zone til slideshowet på 760 x 350 px, en zone til rabataftaler på 320 px og en zone til forhandlersøgning på ligeledes 320 px. Disse zoner er tilgengængelige i editoren, hvorimod baggrund, logo, menuer og footer ligger i sidens HTML-skabelon (back-enden). Til opbygning af undersidens skabelon er der oprettet en zone til indhold (overskrifter og brødtekt) på 480 px i bredden og en zone til info og opfordringer til brugerne på 180 px i bredden. USABILITY. For at sikre, at brugerne af hjemmesiden får det optimale ud af brugen, arbejder vi med brugervenlighed på forskellige niveauer. Processen består af fem stadier. 1: Hvor nemt er det for brugeren at danne sig overblik første gang de besøger siden? 2: Hvor hurtigt kan brugeren navigere rundt og bruge de forskellige funktioner? 3: Hvor hurtigt lærer brugeren siden at kende igen ved et genbesøg? 4: Hvor mange og hvilke fejl / udfordringer opstår ved brug af siden og hvordan løser vi dem? 5: Er brugeren tilfreds med funktioner og navigering på siden? Vi tester selv vores webproduktioner og forsøger at opfører os som førstegangsbrugere. Vi beder ligeledes kunden om at teste / gennemgå hjemmesiden for at sikre at alle funktioner virker optimalt og ikke melder fejl. Ved webshops tester vi hele købs- og betalingsprocessen igennem, ved online booking tester vi formularen og sørger for at brugerne udfylder alle de nødvendige oplysniger gennem en validering inden oplysningerne sendes etc. BROWSERKOMPATIBILITET. Generelt benytter vi et sikkert og kompatibelt HTML-sprog for at sikre, at alle browsere (IE 6-9, Firefox, Chrome, Safari, Oprah etc.) kan vise og tyde indholdet rigtigt på siderne. Det betyder, at vi endnu ikke er gået over til ren HTML 5, men bruger istedet HTML 4.01, der er en gren under HTML 5, da W3.org ville give en valideringsfejl af siden pga. editoren i vores CMS system. Derudover tager vi også hensyn til forskellige platforme, og derfor bruger vi nu Jacascript (jquery) til dynamiske elementer (fx. et forsidebanner), da bl.a. iphones og ipads ikke understøtter Flash. Vi tester altid hjemmesiden efter endt opsætning på forskellige platforme og i forskellige browsere. Også med usability i baghovedet. Internettet er heldigvis ret tilgivende, så skulle der være en fejl, kan det ofte hurtigt og nemt rettes modsat en tryksag. MIN PROCESBESKRIVELSE Projektet oprettes på intranettet og alle briefes om deres bidrag til opgaven. Deadlines for opgaverne sættes og tidsforbruget fordeles i kalenderen. Herefter startede jeg på min idéudvikling, mock-ups og udkast til designet. Der var en løbende sparring med min chef om indhold og funktioner på siden. Som regel laver vi kun en forside i starten, kunden skal blot have et indblik i stilen, og efter godkendelsen designes en underside og de ørige funktioner designes til programmøren. Grafikker til bl.a. menu, links, logo, baggrund etc., skæres ud fra Photoshop og alt (afstand til de forskellige elementer) måles op. De to skabeloner til forside og underside bygges op i HTML og der laves CSS-regler i form af fonte. Derefter implementeres de færdige koder i CMS systemet - sidens opgivelser er færdige og alt indhold skal lægges ind. Nogle gange ønsker kunden selv at oprette sider og indhold, og i andre tilfælde varetager vi den opgave. Alle billeder, tekster, moduler og funktioner lægges ind i editoren og siden gennemgås og testes inden vi sender et demo-link til kunden. Når kunden har godkendt siden, og eventuelle rettelser er lavet, bliver hjemmesiden lagt online. Designprocessen tog ca. en arbejdsdag og HTML-opsætningen tog tre. EN KVALITETSVURDERING RESULTAT. Denne opgave har været ret udfordrende for mig på mange områder, da jeg ikke arbejder med HTML i hverdagen, og derfor er det en stor omstilling at skulle kode en hjemmeside fra bunden. Taget alt i betragtning, og med hjælp fra udleveret undervisningsmateriale og min kollega, er resultatet blevet tilfredsstillende. Det tager lidt tid, at komme ind i en flydende arbejdsgang, men jeg forstår, hvad jeg laver og kan se logik i koderne, og det hjælper.

3 INTERN PROJEKTSTYRING PROJEKTER. Hver mandag morgen gennemgår vi de kommende og igangværende projekter. De nye projekter bliver oprettet på intranettet og opgaverne fordeles. En beskrivelse af projektet og kunden påføres (fig. 1-2). De enkeltstående opgaver oprettes med en beskrivelse, opgaveansvarlig, tidsforbrug, deadline og mulighed for statusændring (fig. 3-4). INTRANET INTERN PROJEKSTYRING Opgaverne fordeles i vores kalender (fig. 5-6). Hvert projekt har en samlet oversigt over opgaver og de ansvarlige. Vi ændrer løbende status på opgaverne, så vi har et overblik over projektet. Når en opgave er færdig og afsluttet, bliver statusbaren grøn

4 GRAFISK UDTRYK FØR OG EFTER. Første store billede var den originale side, det andet er mit endelige redesign (fig. 5). 1 UDKAST DESIGN OG UDTRYK

5 KODNING AF HTML 1 SKABELONER. Forsidens og undersidens opsætning består primært af forskellige zoner, hvor sidens indhold skal placeres. Forsiden indholder en zone kaldet TOP til topbanneret, der skal være 760 px i bredden. Dette antal pixels skal fordeles i tre kolonner på 250 px med luft imellem disse tre kolonner på 5 px (fig. 1). Denne fordeling brugers fordi vores CMS system indeholder nogle standardafsnit, der bygger på 3 kolonner til tekst og billeder, som kan indsættes i en zone, og derfor skal disse afsnit have en formatering med luft mellem kolonnerne - denne formatering behøver ikke være lige fordelt. HTML KODNING OPSÆTNING AF SKABELONER I en tabel placeres den skillelinje som en grafik, der adskiller topbanneret og det øvrige indhold. Derefter oprettes zonen til rabataftalerne kaldet HØJRE på 320 px, fordelt over tre kolonner på 100 px med 10 px luft. Ligeledes laves den venstre zone til forhandlersøgning kaldet VENSTRE på nøjagtigt samme måde. Cellen imellem disse to zoner får en afstand på 120 px (fig. 2). 2 Til undersidens skabelon skal der være endnu en skillelinje mellem indhold og undermenuen. Derfor er denne grafik placeret som baggrund i et div-tag, der har fået en position på 539 px (x-position) og 0 px (y-position). Zonerne til overskriften og indholdet oprettes med en bredde på 500 px, og zonerne til højremenuen og brugerinfo oprettes med en bredde på 180 px. Her imellem oprettes en celle med en bredde på 81 px. Zonen til menuen har en topmargin på 140 px, der sørger for korrekt placering i forhold til brødteksten og en bundmargin på 20 px, der giver luft ned til infozonen. Teksten LÆS OGSÅ har også en bundmargin på 10 px, der giver luft ned til undermenupunkterne (fig. 2). HTML ISTEDET FOR LOGO. SubClub PROs logo skal have en bestemt placering lige over baguettet, og derfor har jeg brugt en negativ margin (-220 px) for at skubbe logo et uden for hjemmesidens indeholdszone, der kun har en bredde på 760 px. Det betyder, at logo et og sidens bredde tilsammen giver de 980 px, som er max. bredden for en side, da den skal kunne vises på en PC med en standardopløsning på 768 x 1024 px. 3 SIDENS OMGIVELSER. For at kunne placere og styre elementer uden for sidens indhold, her kaldet [page], oprettes der en tabel med en højde og bredde på 100%, hvor baggrundsbilledet placeres. I en anden celle placeres kontaktoplysninger og links til easynet s egen side, også kaldet en footer (fig. 3).

6 IMPLEMENTERING AF HTML SKABELONER. Når HTML-koden til forsidens og undersidens skabeloner er lavet færdige i Dream- Weaver, skal koderne implementeres i vores CMS system. Under Layout vælges fanen Sideskabeloner og der oprettes nye skabeloner til henholdsvis forsiden og undersiden. Skabelonerne navngives, som senere vil blive brugt til at vælge skabelontype til hjemmesidens indholdsider. Koderne fra HTML dokumentet kopieres og indsættes (fig. 1-2). HTML KODNING OPSÆTNING AF SKABELONER 1 2 Under HTML afsnittet er ligeledes muligt at indsætte en alternativ kode for en printvenlig version. Man kunne vælge at udlade visse elementer, fx. billeder, logo, undermenuer etc., og kun printe den rene tekst på siden. Dette er en funktion, som kunden frit kan tilvælge og der vil blive sat et printikon på siden. GENERELLE INDSTILLINGER. Under første fane Sideindstillinger oprettes indstillinger, der er generelle for hele siden - uanset sideskabelon. Det betyder, at disse alle indstillinger og elementer vil blive vist på alle sider på hjemmesiden (fig. 3). 3 4 Her indstilles bl.a. den generelle kolonnebredde og luften imellem (3 x 250 px + 2x 5 px = 760 px), der indsættes nogle specifikke META-tags (java script, jquery, css stylesheets, meta-tags etc.), som vil blive placeret i headeren. Der vælges en doctype, vi bruger her HTML 4.01 Transitional, som er en gren under HTML 5, da W3.org ellers ville give en valideringsfejl af siden pga. editoren i vores CMS system. Der vælges en baggrundsfarve (#FFFFFF) samt justering af alt indhold på hjemmesiden - her har jeg valgt en centeret justering. HTML ISTEDET FOR LOGO. CMS systemet indeholder funktionen Indsæt logo, hvor der er mulighed for at vælge / uploade et logo og tilvælge en justering, men da SubClubs logo skal have en speciel placering, lavede jeg en specifik HTML-kode for denne placering (fig. 3). Denne HTML-kode indsættes under afsnittet HTML ISTEDET FOR LOGO og der linkes til et billede eller grafik i billedmappen på serveren (fig. 4). 5 SIDENS OMGIVELSER. Her placeres alt uden for selve hjemmesiden, herunder baggrundsbilledet og footeren. I en tabel lægges alle kontaktoplysninger ind og der oprettes tomme celler mellem hver af de forskellige oplysninger for at skabe luft. Bredden på disse celler blev på 42 px efter at have afprøvet forskellige afstande og tjekket resultatet online (fig. 5).

7 OPSÆTNING I CMS SYSTEMET 1 2 WEBFONTE. Der findes en række forskellige standardfonte til brug på internettet, herunder Verdana, Helvetica, Arial, Tahoma, Lucida Sans etc. Man kan dog generere det, der kaldes webfonte. Denne type af fonte gør det muligt at bruge andre fonte end de standarder, der allerede findes. Farver, skydning og linkeffekter vælges også her (fig. 1-2). For at lave en normal skrifttype om til en webfont, kan man benytte hvor man uploader en eller flere skrifttyper, og med mindre de skrifte er beskyttet af copyright, omdannes de til et webfontkit, der indeholder en række CSS-filer, SVG-filer og JS-filer. Disse filer implementeres i de eksisterende HTML / CSS koder. Til denne opgave er der brugt tre versioner af Univers LT Std: en light, og en bold (brødtekst) og en condensed (overskrift). CMS SYSTEMET OPSÆTNING AF INDHOLD OG CSS 3 4 OPRET SIDE. Der oprettes en ny side i systemet, der navngives. Der vælges en skabelontype, fx skabelon-forside (fig. 4). De forskellige zoner til tekst og billeder oprettes (fig. A). En tekst markeres i editoren og via en dropdown vælges en font, som tidligere er oprettet i systemet (fig. 5). FILER. Billeder, filer til download (PDF) og grafikker kan uploades på serveres via Filer (fig. 3), via en FTP-adgang (ved mange filer) eller via et pop-up vindue, der fremkommer i editoren når funktionen Indsæt billede vælges (fig. 6). Der kan også tilvælges forskellige linkfunktioner på billedet. 5 6 Det er altid muligt at skifte visningen i editoren mellem grafik / tekst og HTML-koder (fig. 7-8). 7 8 A

8

9