04 Grafisk produktionsforståelse Design og koding af steentrae.dk 24 Svendeprøveportfolio
Steentrae.dk Responsivt website med CMS I forlængelse af min Grafisk design-del, har jeg her valgt at fokusere på workflowet, produktionsdelen og kodningen af Steentrae.dk. Det er relevant i forhold til, at jeg selv har stået for hele produktet fra koncept til færdigt og fungerende produkt. Helt fra starten var det et krav, at siden skulle være responsiv, da de fleste i Mathias omgangskreds og netværk nærmere bruger deres smartphone end en computer. Ligeledes vil han promovere siden en del gennem Facebook, hvorfra den tage sig godt ud - uanset, om man kommer fra sin Macbook eller gamle mobiltelefon med lille skærm. Målet og læringsdelen i siden for mig var, at jeg ville gøre det muligt for Mathias selv at opdatere siden, smide nye projekter op og rette til i sit CV. Da Mathias ikke forstår sig på HTML og CSS, måtte jeg smide et CMS henover her i form af Concrete5. LAVET FOR Steentræ / Mathias Steen Rasmussen PRODUKT Responsivt website med CMS PRODUCERET Oktober 2015 nu Svendeprøveportfolio 25
Design Photoshop Kodning HTML & CSS Responsiveness media queries CMS Concrete5 Designet er udført på baggrund af hurtige håndskitser, et moodboard og wireframe udført i Photoshop (se Grafisk design-delen). Sitet er først og fremmest kodet i Brackets som helt basal HTML og stylet med CSS. Jeg har brugt HTML5 og CSS3, da det er de seneste webstandarder. HTML5 giver bl.a mere ekspressiv frihed, standardiserer elementer og hjælper ift. søgemaskineoptimering. CSS3 har jeg brugt, da det tilfører muligheden for media queries (som er nødvendigt for at have særskilte, responsive layouts), flerspaltelayout, nye selektorer og meget andet. For at kunne se lækker ud på alle tænkelige platforme, og fordi Mathias gerne vil kunne vise siden frem på sin ipad for evt. fremtidige arbejdsgivere, gjorde jeg siden responsiv vha. media queries. Media queries ligger som forskellige break points, der definerer, hvornår layoutet på siden ændres. Som eksempel kan nævnes, at layoutet går fra 4 spalter til 1 spalte, når siden vises på en telefon, og at headeren ombrydes, så menuen kommer under logoet i stedet for i højre side. Endemålet var, at Mathias selv skulle være i stand til at opdatere siden, sit CV, lægge nye projekter op og rette i den, som han lyster, uden nogen kendskab til HTML og CSS. Jeg valgte systemet Concrete5, da det er et fuldblods-cms (ulig eks. Wordpress), det er relativt let, velintegreret og meget fleksibelt. Den mest brugbare funktion i forhold til redigering er dog nok, at man kan udføre in context editing; altså, at Mathias kan rette på sidens indhold mens han ser det live - uden kendskab til et kompliceret system. 26 Svendeprøveportfolio
Concrete5-siden er bygget op af tre forskellige PHP-filer, som er kædet sammen. De er kodet i hånden, og her følger en beskrivelse af de forskellige elementer. Header.php Dette er sidens header. Den inkluderer ting som metadata (eks. sidens navn og karatersæt), indlæsning af scripts, Concrete5-menu og sidens header (inkluderer logo og navigation). header.php Uddrag fra header.php (tal refererer til linjetal i koden) 8 Specificerer sidens viewport, og at brugeren ikke skal have mulighed for at skalere siden 9 Link til CSS-fil PHP-delen gør den i stand til at finde filen på serveren 14-17 Loader Concrete5 s redigeringsmenu ind, hvis der er logget en bruger på systemet 25 Body-tag, som markerer sidens start 28 HTML5-tag et <header>, som markerer start på headeren 31 Logoet hentes ind som SVG, skalerbar vektorgrafik 34 Navigationen hentes ind fra Concrete5 s database Default.php Dette er blot én af tre sidetyper. Denne definerer, at siden har hovedindhold i 3 spalter og en sidebar i højre side. De andre er full.php (hovedindhold i 4 spalter) og left_sidebar.php (sideindhold i venstre side og 3 spalters hovedindhold). Uddrag fra default.php (tal refererer til linjetal i koden) 2 Filen header.php loades ind 4-21 HTML5 tags definerer sidens semantiske opbygning. <main> er der, hvor al hovedindhold ligger. <article> er et tag, som kan indeholde alt indhold <section> er en bid indhold, som er relateret 7 <section> med classen span_3_of_4 definerer en sektion, der går over 3 spalter 23 Filen footer.php loades ind Footer.php Footer.php indeholder sidens bund og slutning på HTML en. Uddrag fra footer.php (tal refererer til linjetal i koden) 1 HTML5-tag et <footer> er starten på footeren 3-15 footer_left og footer_right er venstre og højre del 20 Påkrævet Concrete5-element hentes ind default.php footer.php Svendeprøveportfolio 27
Uddrag fra min CSS3 Loader fonten Founders Grotesk ind på siden. Den ligger i formatet.woff, som er egnet til web og bliver importeret i 5 udgaver. Dette siger, at alle p-tags (tekstafsnit) har en skriftstørrelse på 1.4 em (sat i forhold til font-size på body-tag et, som er 16 px) og maks. må være 550 px bred, for at give et pænt skriftsnit uden for mange tegn pr. linje. h1-tags (som er indsat i både main, article, og sections) har samme punktstørrelse som brødteksten, men til gengæld et kraftigere snit (font-weight: 600). Navigationen (menuen) i headeren floater til højre, kører samme skriftstørrelse som resten af siden, semi-bold, og har lidt negativ margen i toppen for at flugte med logoet. Min footer har en tekstfarve, der er grå (color: #999999), en mindre skriftstørrelse (0.8 em) og en margen i toppen, som lægger afstand til indholdet i main. Denne lille bid fortæller, at på alle links skal teksten skifte til den blå farve, vi udvalgte tidligere, når cursoren holdes henover. Dette viser mit gridsystem, bestående af 4 spalter. De ligger som classes, der i mit tilfælde ligger på sections på siden. Bredden på spalterne defineres i procent, baseret på margenen sat i nedenstående. Spalterne (.col) floater til venstre og har defineret en procentuel margen i top og bund på hver 1 %, samt 2,5 % i venstre side. Derudover vises, at der på den første af sin slags på siden, ikke skal være nogen venstremargen. Dette er de forskellige breakpoints, jeg har på siden (indholdet er her redigeret ud). De viser, hvornår layoutet ændres, alt afhængig af vindues- eller skærmstørrelsen, og er defineret ved media queries. Min media query ved en lille skærm (max. 480 px), som viser, at alle spalter skal gå i fuld bredde (så 2, 3 og 4 spalter bliver til 1) og at menuen i toppen skal have en anelse luft. 28 Svendeprøveportfolio
Indholdsstyring i Concrete5 Noget af det smarte ved Concrete5 er, at man kan redigere i al indhold og tekst direkte på siden, rent grafisk, frem for at gå i kontrolpanelet og rette (som i eks. Wordpress). Screenshot et ovenfor viser, at man kan redigere i blokken, som så kan behandles i Concrete5 s egen editor. Ligeledes kan man indsætte nye elementer på siden. Oprettelse af nye sider/projekter Når man er logget ind på siden, er det let at tilføje nye undersider og projekter. Screenshot et her viser, hvordan man tilføjer et nyt projekt til portfolien. Mathias kan således, uden nogen kendskab til kode, indtaste projektets detaljer samt tilføje billeder. Projektet kommer så automatisk til at ligge på undersiden Projekter. Svendeprøveportfolio 29