1 Making websites with a flavour Project aangeboden door Benoît Blancquaert voor het behalen van de graad van Bachelor in de New Media and Communicati...
Project aangeboden door Benoît Blancquaert voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar 2012-2013 Stageplaats Stagementor Stagebegeleider
: Syntetik : Hans Mortelmans : Marijn Verspecht
Voorwoord Ik ben Benoît Blancquaert, laatstejaarsstudent New Media and Communication Technology aan de Hogeschool West-Vlaanderen te Kortrijk. Van alle takken die NMCT biedt, heb ik gekozen om me te specialiseren in front-end webdevelopment. Ik heb mijn stage volbracht bij Syntetik, gelegen in het centrum van Antwerpen. Syntetik is een creatief webdesign bureau dat verschillende diensten aanbiedt, o.a. internet marketing, webdesign en webdevelopment. Mijn keuze is gevallen op Syntetik, omdat ik in die sector verder wil werken. Deze stage is dus de ultieme kans voor mij om veel ervaring op te doen. Daarbovenop is het een leuke en creatieve omgeving om te werken. In dit rapport deel ik mijn stage ervaringen. Dit bevat de zaken die ik geleerd heb vanuit mijn projecten, evenals de problemen en oplossingen. Verder licht ik natuurlijk mijn projecten toe, waaraan ik hard heb gewerkt. Dit rapport is tevens ook interessant voor mensen met interesse in webdevelopment en webdesign. Graag zou ik nog Hans Mortelmans, Nicolas Deslé en Marit Ginevro bedanken voor de geboden kans en de toffe samenwerking tijdens mijn stage.
Samenvatting Tijdens mijn stageperiode heb ik verschillende opdrachten gekregen. Buiten een aantal alledaagse opdrachten, had ik vooral grote projecten. Hieronder vindt u een beknopte samenvatting voor elk project.
Mobiele variant voor de Syntetik website Mijn eerste project was een nieuwe mobiele site voor Syntetik ontwikkelen. Deze mobiele site draagt de huisstijl van Syntetik. Mijn eerste oplossing was de huidige mobiele site aanpassen, die enkel bestond uit de contactgegevens van het bedrijf. Maar na een korte tijd besefte ik dat deze oplossing veel beperkingen had. De juiste oplossing was een mobiele site creëren die de huisstijl had van de desktop site.
Ontwikkeling front-end voor nieuwe Terra Nova website Mijn tweede project was al meteen een stuk groter: de front-end maken voor de nieuwe Terra Nova website. Het design werd gemaakt door Hans en mijn taak was om daarmee een responsive website te creëren. Terra Nova is een organisatie van de provincie Antwerpen die tijdens de zomer activiteiten voor jong en oud organiseert.
Syntetik case: Stad Antwerpen Ik heb voor Syntetik ook een case gemaakt die de nieuwe mobiele site van de stad Antwerpen presenteert. Dit is ideaal als extra portfolio en reclame voor mijn stageplaats. Deze case is een one-page website die informatie bevat over het ontwikkelingsproces van de mobiele site.
JIM Mobile Tijdens mijn stageperiode heb ik veel opdrachten van JIM Mobile afgewerkt. Zo heb ik een landingspagina gemaakt voor de huidige website van JIM Mobile, maar ook een parallax scrolling site. Daarnaast heb ik ook een Syntetik case gemaakt over de samenwerking met JIM Mobile.
Verklarende woordenlijst Contentmanagementsysteem: Een contentmanagementsysteem of CMS is software, meestal een webapplicatie, die het mogelijk maakt eenvoudig, zonder veel technische kennis, documenten en andere zaken op het internet te plaatsen. Dreams & Creations: Dreams & Creations is een creatief online bureau, gelegen in Gent. Zij creëren websites en mobiele applicaties. ExpressionEngine: ExpressionEngine of EE is een Contentmanagementsysteem die programma’s ontwikkelt in PHP. EE is bekend door zijn om eenvoudig gebruik. One-page webdesign: Bij een one-page website staat alle content onder elkaar. Het is één lange pagina waar gebruikers doorheen moeten scrollen. Daarom bevatten ook veel one-page websites parallax scrolling. Parallax scrolling website: Een interactieve website waarbij afbeeldingen op de achtergrond langzamer dan afbeeldingen op de voorgrond aan het oog voorbijgaan. Hierbij wordt ook de illusie van diepte gecreëerd. Pinchen: In- en uitzoomen met de vingers wordt ook wel pinchen genoemd. U plaats uw duim en wijsvinger in de natuurlijke houding. Vervolgens beweegt u uw vingers uit elkaar om in te zoomen en naar elkaar toe om uit te zoomen. Responsive webdesign: Als een website responsive is, heeft deze site één lay-out die bedoelt is voor zowel desktop, tablets en smartphones. Dezelfde content wordt weergegeven, maar met een aangepast design. Een reponsive design is ook vaak gebaseerd op een fluid grid. Een fluid grid is een CSS grid die het mogelijk maakt om alle objecten op uw webpagina in relatieve breedtes en posities te plaatsen. Swipen: De vinger horizontaal of verticaal vegen over het touchscreen, om zo te bijvoorbeeld te navigeren. Syntaxiskleuring: Syntaxiskleuring, ook syntax highlighting of accentuering genoemd, is een vaak voorkomende optie bij teksteditors. Dit is een functie dat code in verschillende kleuren en lettertypes weergeeft volgens welke taal het geschreven is. Viewport: De viewport is het gebied in een webbrowser waar een webpagina wordt getoond. Dit is niet gelijk aan de schermresolutie van een toestel.
Afkortingenlijst I. II. III. IV. V. VI. VII. VIII.
CMS: Contentmanagementsysteem (zie ook verklarende woordenlijst) CSS: Cascading Style Sheets, is een opmaaktaal waarmee je een webpagina kan visueel kan vormgeven. DOM: Document Object Model, definieert de logische structuur van HTML, XHTML en XML documenten FTP: File Transfer Protocol HTML: HyperText Markup Language, is een opmaaktaal voor het schrijven de structuur van een webpagina. IE: Internet Explorer PSD: PSD is een bestandsformaat van Adobe Photoshop. RWD: Responsive Webdesign (zie ook verklarende woordenlijst)
Inleiding Syntetik1 is een creatief online bureau dat verschillende diensten aanbiedt, waaronder internet marketing, webdesign en webdevelopment. Hun projecten worden gemaakt in opdracht van overheden, adverteerders, reclamebureaus en communicatieagentschappen. Syntetik is gelegen in hartje Antwerpen. Het bedrijf is officieel opgericht in 2007. Syntetik is het creatieve brein achter de projecten, hun partner Dreams & Creations2 zorgt voor het eerder technische werk. In de beginjaren had Syntetik veel project-based klanten zoals Coke Zero, Mercedes, NMBS, IKEA, Yakult en VLAM, omdat ze vooral werkten met reclamebureaus. Dit lijstje werd in de loop der jaren aangevuld met klanten zoals JIM Mobile en Provincie Antwerpen. Toen ik op zoek moest gaan naar een stage heb ik verschillende vacatures overlopen. Wanneer ik de advertentie zag van Syntetik, vond ik me er direct zelf in terug. Eenmaal ik hun website zag, was ik overtuigd. Het creatieve aspect van Syntetik heeft zeker een meerwaarde voor mij. Ik ben echt tevreden over mijn stage en heb er veel uit geleerd.
Over Hans Mortelmans - interface designer (1963) Hans studeerde af als fotograaf aan de Academie voor Schone Kunsten te Antwerpen. Later herschoolde hij zich tot new media designer. Hij leerde enorm veel als art director bij Expanded Media en Boondoggle. Kort daarna startte hij zijn eigen bureau, genaamd Syntetik.
Nicolas Deslé - interface & flash designer (1978) Nicolas heeft Bachelor in Reclame en Communicatie op zak en heeft daarna een postgraduaat behaald in Multimedia. Na zijn studies begon Nicolas als freelancer voor Telenet en diverse reclamebureaus. Nicolas is nu medeeigenaar van Syntetik, samen met Hans.
Marit Ginevro - consultant & business developer (1974) Marit studeerde behaalde het diploma Communicatiewetenschappen aan de Vrije Universiteit te Brussel. Zij werkt nu als consultant en business developer voor Syntetik en externe partijen.
1 Tools De volgende programma’s zijn mijn dagdagelijkse tools als webdeveloper. Ik zal elke tool een korte beschrijving geven.
1.1 Sublime Text 2 Sublime Text 21 is een teksteditor die bij veel webdevelopers geliefd is. Het programma heeft een minimalistische werkomgeving. Het werkt snel en heeft enorm veel uitzonderlijke features, die andere teksteditors niet hebben. Zo kan u bijvoorbeeld meerdere cursors gebruiken om verschillende lijnen gelijktijdig aan te passen. Sublime kent voldoende programmeertalen en geeft zo elke taal de juiste Syntaxiskleuring. Als gebruiker kan u het programma helemaal naar eigen hand zetten, want het bevat erg veel plug-ins en kleurenschema’s.
1.2 Chrome DevTools Chrome DevTools2 of Developer Tools is standaard aanwezig in de webbrowser Google Chrome. Met deze tool kan u de DOM structuur bekijken en live aanpassen. Zo kan u de CSS opmaak bekijken en aanpassen van een gekozen element. U kan ook alle bronnen (mappen en bestanden) van een website bekijken. Verder biedt DevTools u een consolevenster dat logs weergeeft. Deze functies van DevTools heb ik enorm veel gebruikt tijdens mijn stageperiode.
1.3 CodeKit CodeKit3 is hét Zwitsers zakmes voor een webdeveloper. Deze app draait op de achtergrond en controleert de bestanden van de website die ik bouw. Het kan JavaScript, Less, Sass en andere talen compileren, en geeft mij foutmeldingen en waarschuwingen. CodeKit herlaadt ook automatisch de browser wanneer ik bestanden zoals de CSS aanpas. Zo kan ik gemakkelijk code schrijven, opslaan en het resultaat meteen in werkelijkheid zien. Deze applicatie kan ook bestanden verkleinen (minifyen) en afbeeldingen comprimeren voor het web.
1.4 Transmit Transmit1 is een FTP-client voor Mac. Met deze tool plaats ik mijn projecten op een webruimte. That’s it, that’s all.
1.5 Adobe Photoshop CS6 Photoshop is waarschijnlijk het meest bekende programma van het Adobe pakket. Photoshop is een grafisch programma om digitaal beeldmateriaal te bewerken. Op mijn stage wordt Photoshop vooral gebruikt om wireframes te creëren. Ik gebruik het programma om wireframes grondig te analyseren wanneer ik een site ontwikkel, maar ook om afbeeldingen te exporteren voor het web.
1.6 Windows Omdat veel stageprojecten ook moeten werken op Internet Explorer versie 7 (IE7) en hoger, was het nodig dat ik mijn Windows machine meenam naar mijn stageplaats. Deze computer heeft als besturingssysteem Windows 8 en bezit 2 virtuele machines. Eén machine voor IE7 en één voor IE8. Ik gebruik ook IETester2 om snel een site te checken in Internet Explorer. IETester is een webbrowser die websites kan renderen in verschillende versies van Internet Explorer.
2 Mobiele Syntetik site 2.1 Inleiding Op de eerste dag van mijn stage heb ik de opdracht gekregen om de huidige mobiele site van mijn stagebedrijf in een nieuw kleedje te steken.
2.2 Analyse Ik kreeg volledige vrijheid in het maken van de website. Daarbij was brainstorming wel een noodzaak. Ik heb ook research gedaan naar mobiele sites van andere reclamebureaus zoals Prophets1 (Antwerpen), firstborn2 en Big Spaceship3. De vorige mobiele site van Syntetik bestond enkel uit de contactgegevens van het bedrijf. Als startopdracht mocht ik eens nadenken wat de mogelijkheden zijn voor een vernieuwende site die de oude vervangt. Dit is dus vooral research werk: nagaan wat past en niet past in een mobiele site en kijken welke content van de huidige desktop site belangrijk is op de mobiele site, maar ook het integreren van gestures voor een goede user experience.
2.3 Uitwerking Niet alleen de front-end, maar ook het design maken was mijn taak voor de nieuwe mobiele site van Syntetik. Daarom was één van mijn eerste acties wireframes maken.
2.3.1 Eerste uitvoering Na verschillende wireframes, zowel op papier als digitaal, had ik het idee om de huidige mobiele site aan te passen, zodat men door de werken van Syntetik kan swipen. De huidige site was toen een pagina met het logo en de contactgegevens. Deze pagina blijft bestaan, maar nu kan u de pagina helemaal verslepen zodat men op een nieuwe pagina terechtkomt. Zo kan de gebruiker gemakkelijk navigeren door het portfolio van Syntetik.
Figuur 2: eerste concept
Al vlug zag ik dat deze website een beperkte lay-out had. Het design zit zo in elkaar dat een gebruiker alleen kan swipen en niet kan scrollen naar beneden. De pagina bevat dus slides, die even hoog en breed zijn zoals de viewport van de webbrowser. Zo kan de site weinig content bevatten, wat hier niet ideaal is.
2.3.2 Correctie uitvoering Na deze eerste uitvoering waren Hans en Nicolas akkoord dat er een betere oplossing bestond. Nicolas en ik hebben dan samen naar een beter idee gezocht. Wij zijn allebei tot een akkoord gekomen dat we een site willen in de huisstijl van de desktop site.
Mobiele Syntetik site
12
2.3.2.1 Huisstijl De mobiele site heeft dus de huisstijl van de huidige desktop site. Hiermee blijft niet alleen de kleuren, maar ook de structuur deels behouden. De mobiele site heeft ook een introductietekst. Deze tekst is alleen wat korter, zodat er meer plaats kan worden gemaakt voor de navigatie. Zo staat de navigatie net niet helemaal in de viewport van de browser, van bijvoorbeeld een iPhone 4.
Figuur 3 en 4: het nieuwe design van de mobiele site
Samenvatting van de structuur: 1. fixed header; 2. introductietekst; 3. navigatie; 4. footer. 2.3.2.1.1 Fixed header De zwarte balk met het Syntetik logo blijft altijd in beeld. Dit logo bevat een hyperlink naar de homepagina. De header bevat ook een uitschuifbaar menu, zodat gebruikers altijd kunnen navigeren door de werken van Syntetik. 2.3.2.1.2 Footer De footer bevat de contactgegevens van het bedrijf. Als er gedrukt wordt op het telefoonnummer, wordt automatisch naar het nummer van Syntetik gebeld. Hetzelfde geldt voor het drukken op het emailadres in de footer.
Mobiele Syntetik site
13
De Google Maps coördinaten van Syntetik worden geopend wanneer u klikt op het adres. Van daaruit kan u een routebeschrijving krijgen.
Figuur 5: HTML structuur van de footer
2.3.2.2 Portfolio De mobiele site bevat de projecten van Syntetik. Eens u een project gekozen hebt vanuit de navigatie, komt u terecht op een pagina van het gekozen project. De eyecatcher van deze pagina is de slider. Deze bevat verschillende foto’s van het werk. Daaronder bevindt zicht een korte beschrijving.
Figuur 6 en 7: mobiele weergave van de portfolio van Syntetik
Mobiele Syntetik site
14
2.3.2.2.1 Slider De HTML slider met foto’s is gemaakt met Swipe1. Swipe is een JavaScript touch slider. De HTML structuur voor Swipe moet overeenkomen met onderstaande foto. De structuur moet een
element bevatten, met daarin een ongeordende lijst. Elk
element in de lijst is een slide. In mijn voorbeeld bevatten deze slides telkens een element. De navigatie van de slider bevindt zich in het
element met ID ‘slidernav’. Dit is een lijst met bullet points (rondjes). • is het HTML nummer voor een bullet point.
Figuur 8: de nodige HTML structuur voor Swipe
De initialisatie van de slider gebeurt pas wanneer de DOM structuur van de pagina geladen is. Na het laden van de pagina worden alle functies in de document.ready() functie opgeroepen, zoals de init() functie. In de init() functie wordt de slider aangemaakt.
Figuur 9: de motor van Swipe
1
http://swipejs.com
Mobiele Syntetik site
15
2.3.2.2.2 Swipe in detail Swipe heeft enkele optionele parameters, waarmee u de slider kunt aanpassen. Enkele voorbeelden van parameters zijn: 1. de snelheid van een overgang; 2. het aantal seconden een slide in beeld blijft; 3. vanaf welke slide er wordt gestart. Swipe heeft ook een callback functie. Deze wordt afgevuurd op het einde van een animatie. Bijvoorbeeld wanneer de overgang van slide 1 naar slide 2 is voltooid. Zo kan ik de navigatie updaten met de callback functie. De navigatie updaten doe ik met de jQuery removeClass() en addClass() functies. Het list item dat overeenkomt met de actieve slide krijgt een klasse, die via CSS een ander kleur heeft. Zo heeft het
element van de actieve slide een ander kleur dan de andere bullets. 2.3.2.3 Navigatie De navigatie is verwerkt in de header van de website. Deze komt tevoorschijn wanneer er wordt gedrukt op het woord “menu”. Deze vorm van navigatie wordt ook toggle navigation genoemd en wordt momenteel veel gebruikt in mobiele en responsive websites. 2.3.2.3.1 Absolute positionering De navigatie heeft een absolute positionering, relatief tot de wrapper. Een element met een absolute positionering leeft met andere woorden op een compleet andere planeet. Deze wordt horizontaal gepositioneerd met de CSS eigenschappen left of right, en verticaal met top of bottom. Absoluut gepositioneerde elementen worden verwijderd van de normale document flow. De andere elementen gedragen zich alsof de absolute gepositioneerde elementen niet bestaan. Dit zorgt er wel voor dat elementen elkaar kunnen overlappen. 2.3.2.3.2 Toggle Navigation De navigatie staat standaard net uit de viewport. Dit komt door de negatieve right waarde dat gelijk is aan de breedte van de navigatie. Wanneer er gedrukt wordt op “menu”, moet de navigatie in beeld komen. Maar hier komt het leuke: Wanneer er wordt gedrukt op “menu” start de beweging, maar er is geen continue animatie die loopt van het begin naar het einde toe. Er is enkel maar een korte animatie op het einde van de beweging. In praktijk wordt de navigatie verplaatst van zijn startpositie naar de right waarde -30px. Dit gebeurt zonder enige vorm van animatie. Op dat moment staat de navigatie in beeld, maar niet volledig. Daarna wordt van -30px naar 0px geanimeerd. Dit volledige proces is zo kort dat het menselijk oog deze twee bewegingen ziet als één vloeiende beweging is.
Mobiele Syntetik site
16
De beweging gebeurt door het DOM element van de navigatie CSS klasses te geven. Deze klasses bevatten de absolute positionering van de beweging. Eerst krijgt het element de klasse slideFast en meteen daarna de klasse slideIn. De klasse slideIn bevat de beweging in de vorm van een CSS transitie.
Figuur 10: de CSS opmaak voor de toggle animatie
2.3.2.3.3 Waarom niet één beweging? U kan zich de vraag stellen: waarom niet gewoon één geanimeerde beweging? Ik doe dit gekend trucje voor een betere performantie, want dit is heel belangrijk voor mobiele devices. Smartphones hebben namelijk minder rekenkracht dan een computer of laptop. En met dit klein trucje kan ik 90% van de beweging zonder animatie doen. Dit allemaal zonder het menselijk oog dit beseft. 2.3.2.3.4 Waarom CSS3 transities? Ik gebruik op de mobiele site CSS3 transities ipv jQuery animations. Dit doe ik opnieuw voor een betere performantie. CSS3 animaties zijn namelijk sneller dan JavaScript plug-ins. Ze zijn hardware accelerated door de grafische processor van een toestel, JavaScript animaties niet. De syntax van een CSS3 transitie is eenvoudig. De eerste parameter is de CSS eigenschap die u wilt animeren. Dit kan bijvoorbeeld left of backgroundcolor zijn. W3C1 heeft een lijst2 met alle eigenschappen die geanimeerd kunnen worden. De volgende parameters zijn de tijdsduur en de soort ease. Als soort ease heeft u de keuze uit: • linear; • ease; • ease-in; • ease-out; • ease-in-out. 1 2
U heeft natuurlijk niet zo veel keuze uit snelheidsveranderingen als andere plug-ins. Maar dankzij de cubic-bezier() functie kunnen veel eases worden nagemaakt. Ceaser1 is zo een online tool die eases namaakt met de cubicbezier() functie en die code weergeeft. De laatste parameter uit de syntax van de CSS is de vertraging. De waarde kan, zoals de tijdsduur parameter, geschreven worden in seconden of milliseconden. Dit is een optionele parameter.
Figuur 11: syntax van een CSS3 transitie
Figuur 12: online tool Ceaser
1
http://matthewlein.com/ceaser/
Mobiele Syntetik site
18
2.3.2.3.5 Hammertime Het opvangen van het klik event op de knop “menu” deed ik eerst met jQuery. Dit werkte en ging vlot wanneer ik het testte lokaal op mijn computer. Maar op een smartphone reageerde dit enorm traag. Na wat research heb ik een JavaScript plug-in gevonden die touch gestures kan uitlezen, genaamd Hammer.js1. Dit is een JavaScript library die multi-touch gestures zoals swipen, draggen en pinchen ondersteunt. Ik gebruik deze plug-in voor het tab event en het doet wat het moet doen: meteen reageren wanneer er gedrukt wordt op een DOM element.
Figuur 13: screenshot van de website Hammer.js
Via Hammer.js geef ik de navigatie de juiste CSS klasses, zoals ik dit zou doen met een gewone click()2 functie.
2.3.2.3.6 Check besturingssysteem In de portfolio van Syntetik bevindt zich de "Doe de Voorhammenizer” app. Een applicatie gemaakt voor de Antwerpse schepen van Onderwijs Robert Voorhamme. Via deze applicatie kunnen gebruikers de bril van Voorhamme zelf opzetten en een gepaste slogan kiezen. Deze app is gemaakt voor Android en iPhone. Net daarvoor check ik of gebruiker de pagina bekijkt met een Android of een iPhone. Ik pas de HTML van de pagina aan naargelang het soort toestel. Als het een Android is moet de gebruiker de app kunnen downloaden via de Google Play Store, bij een iPhone vanuit de App Store. Het scannen van een besturingssysteem doe ik door gebruik te maken van het Navigator object. Dit object bevat informatie over de browser. Dit object bevat verschillende properties: • appCodeName; • appName; • appVersion; • cookieEnabled; • onLineBoolean; • platform; • userAgent. Ik gebruikt de userAgent eigenschap. Deze eigenschap bevat dat de user agent string van de huidige browser. Dit is één lange string met informatie over de browser. Via deze waarde check ik of de gebruiker een Android of een iPhone heeft.
Figuur 15: syntax van de user agent string
Figuur 16: functie die de HTML aanpast adhv de user agent string
De HTML aanpassen doe ik het liefst met de jQuery after() functie. Deze plaatst de gepaste Android of iPhone HTML string op de pagina, na een geselecteerd DOM element.
Mobiele Syntetik site
20
3 Terra Nova Provincie Antwerpen 3.1 Inleiding Als tweede project mocht ik meewerken aan de nieuwe website voor Terra Nova1. Mijn taak in het volledige proces is de front-end zijde ontwikkelen. Terra Nova is een organisatie van de Provincie Antwerpen die elke zomer activiteiten organiseert voor jong en oud. Voor het seizoen van start gaat heeft hun site een update nodig. De nieuwe site is visueel helemaal anders en de key feature van dit project is dat de site responsive is. De backend wordt geschreven door de vaste partners van Syntetik: Dreams & Creations. Zij maken gebruik van ExpressionEngine2 als backend. De Terra Nova site zal ook meer gebruik maken van sociale media, zoals Instagram. Mijn taak was om eerst een demo pagina te ontwikkelen, dit was de home pagina. Zo kon na de wireframes, de demo site worden voorgesteld aan de mensen van Terra Nova.
3.2 Analyse Het hoofdingrediënt van dit project is responsive webdesign, afgekort RWD. Hiermee zal Terra Nova hun gebruikers op meerdere toestellen kunnen aanspreken. Daarom heb ik eerst research gedaan omtrent RWD frameworks. De vraag was of ik zelf iets zou schrijven, of ik gebruik zou maken van een quasi waterdicht framework. Ik heb gekozen voor het laatste en heb Skeleton gevonden.
3.3 Beschrijving 3.3.1 Skeleton Skeleton3 is een responsive framework dat bestaat uit enkele CSS bestanden. Het werkt met een grid systeem van zestien kolommen die zich downsized naar kleinere vensters, tablets en smartphones. Het is een variant op het 960px4 grid systeem. Dit framework zorgt ervoor dat de productietijd van een project sneller verloopt. De documentatie is goed, maar eigenlijk heeft u die niet zo veel nodig, omdat het gebruik redelijk straightforward is.
3.3.2 Sitemap Om een beter overzicht te krijgen hoe de structuur is van de nieuwe Terra Nova website, zal ik van elke pagina de functie kort en bondig uitleggen. 3.3.2.1 Home pagina Op de home of index pagina vindt u een overzicht van alle opkomende evenementen die Terra Nova aanbiedt. Deze pagina bevat ook de contactinfo en een lijst met de recentste nieuwsberichten. 3.3.2.2 Foto pagina De foto pagina bevat foto’s van verlopen evenementen die afkomstig zijn van Flickr. Deze foto’s komen van het Flickr account van Terra Nova. Op deze pagina staan alle fotoalbums – worden ook sets genoemd op Flickr – met steeds een albumcover. De cover verwijst u door naar een nieuwe pagina met alle foto’s van het gekozen album. Op die pagina bevindt zich een beschrijving van het album, alsook andere albumcovers van andere evenementen. 3.3.2.3 Nieuws pagina Op deze pagina vindt u alle nieuwsberichten die worden gepost door Terra Nova. Dit zijn previews van de nieuwsberichten. Via deze preview wordt u doorverwezen naar een nieuwe pagina met het volledige bericht. 3.3.2.4 Locatie pagina Op de locatie pagina krijgt u een Google Maps kaart met alle locaties van de gekozen provincie. Dit zijn de locaties van de evenementen. 3.3.2.5 Kalender pagina Deze pagina bevat een kalender met alle evenementen van Terra Nova.
Terra Nova Provincie Antwerpen
22
3.4 Uitwerking 3.4.1 Start Het design van de home pagina kreeg ik via een PSD file van Hans. Deze pagina heb ik dus eerst opgezet in HTML. Ik ben begonnen met mijn mappen en bestanden te organiseren en heb daarna Skeleton geïmplementeerd in mijn project. De structuur van Skeleton bevat 3 CSS bestanden: base.css, skeleton.css en layout.css. 1. Skeleton.css is de basis van Skeleton. In dit bestand is de volledige grid structuur gedefinieerd in klasses, met media queries 2. Base.css bevat een reset. Dit is nodig omdat elke browser zijn eigen default CSS heeft. Het gebruik van zo’n CSS reset zorgt ervoor dat elke browser zijn stijlen worden gereset naar null. Dit vermijdt crossbrowser problemen in een project. Verder bevat deze CSS een gedeelte dat de elementen een basis opmaak geeft. 3. Layout.css bevat mijn code. Dit is de opmaak voor elke Terra Nova pagina. Deze pagina bevat ook de nodige media queries.
Figuur 18: de CSS stylesheets die worden gebruikt voor de Terra Nova website
Alle pagina’s krijgen volgende structuur: een zijbalk en een content gedeelte. Elke pagina heeft altijd een zijbalk met de navigatie en nieuwsberichten. Daarnaast heeft een pagina één groot deel (klasse main) die specifiek bedoeld is voor die pagina zelf. Elke pagina bevat ook een header en een footer met contactgegevens.
Figuur 19: algemene HTML structuur
Terra Nova Provincie Antwerpen
23
De Terra Nova website heeft een block lay-out. Hiermee bedoel ik dat elk stukje content, is het nu de navigatie, evenementen of de recentste nieuwsberichten, in een blok gevormd is. Dit is ook eigen aan veel responsive designs.
Figuur 20 en 21: screenshots van de responsive lay-out
3.4.2 Internet Explorer Eens deze pagina correct oogde in de meest moderne browsers, ben ik gestart met de ontwikkeling voor Internet Explorer. Ik ben begonnen met mij te specificeren op IE7 (versie 7 van IE), want eens het er goed uitziet voor IE7, zal de ontwikkeling makkelijker zijn voor de nieuwere versies van Internet Exporer. Via onderstaande code krijgt de tag van een pagina een bepaalde klasse. Deze klasse is gelijk aan de versie van Internet Explorer en wordt gegeven wanneer de pagina wordt geopend met een versie van deze webbrowser .
Figuur 22: de tag krijgt klasses naargelang de versie van Internet Explorer
Daarna wordt gekeken welke versie Internet browser heeft, door de klasse naam te bekijken die de HTML tag heeft. Zo krijgt de pagina een extra CSS file specifiek voor de versie van Internet Explorer.
Terra Nova Provincie Antwerpen
24
Figuur 23: de pagina krijgt naargelang de browser een extra CSS stylesheet
Het CSS bestand voor een IE browser bevat niet veel lijnen code. Veel zaken van de originele CSS waren dus al correct, maar bepaalde zaken moesten toch goed gezet worden omdat: 1. IE7 niet weet wat een inline-block element is; 2. de CSS eigenschap ‘background-size’ niet wordt ondersteund door IE7; 3. IE7 en IE8 verschillende CSS pseudo-elementen zoals “:before” en “:after” niet kennen; 4. media queries worden niet geondersteund door IE7 en IE8.
3.4.3 Overzicht Onderstaande foto’s geven een overzicht weer van de verdere Terra Nova pagina’s.
Figuur 24 en 25: de foto- en nieuwspagina van Terra Nova
Terra Nova Provincie Antwerpen
25
Figuur 26 en 27: de locatie- en nieuwspagina van Terra Nova
3.5 Opvolging De evenementen die Terra Nova aanbiedt worden verkocht via een afzonderlijke site. Deze verkoop gebeurt via Ticketmatic1. Dit is een website waar u online tickets kan kopen voor een groot aantal evenementen. Na de betaling worden de tickets zelf afgedrukt door de gebruikers. Zo moet de gebruiker dus niet te wachten op de post, maar ontvangt hij/zij de tickets meteen. De workflow van Ticketmatic heeft 4 eenvoudige stappen: 1. kies op de bestelpagina het gewenst aantal tickets; 2. geef uw persoonlijke gegevens in; 3. betaal via een veilige betaalmethode; 4. als de betaling in orde is kan u uw tickets dadelijk uitprinten. Mijn taak in dit proces was om de pagina van Ticketmatic te skinnen via CSS, zodat die de huisstijl heeft van de Terra Nova site. In principe dus niets aanpassen aan de HTML, of toch zo weinig mogelijk.
1
http://www.ticketmatic.com
Terra Nova Provincie Antwerpen
26
Onderstaande afbeelding toont de structuur van de Ticketmatic site. Elke pagina is een stap in het koopproces.
Figuur 28: Mappenstructuur van de Ticketmatic site
Het design van de Ticketmatic site met de Terra Nova skin is gemaakt door Hans. De pagina’s werden mij geleverd in PSD bestanden. Het design is straightforward, maar toch zag ik dan al dat de HTML zou moeten worden aangepast.
3.5.1 Overview pagina Ik heb besloten om de overview pagina eerst te skinnen. Meteen zag ik dat de HTML en vooral de CSS van Ticketmatic een grote rommel waren. Gelukkig zorgt Google DevTools ervoor dat wanneer u een element selecteert, u ziet waar de CSS code precies geschreven staat. Zo kan u alles gemakkelijk aanpassen of overschrijven. Dit is een simpele taak, maar het feit dat er verwacht wordt dat alles wordt geskind met CSS maakt het moeilijker. Bij sommige zaken kon ik niet anders dan af en toe eens een span tag toevoegen of een klasse geven aan een element. Onderstaande foto toont de overview pagina waar gebruikers kunnen kiezen tussen verschillende tickets en die bestellen. De pagina heeft een tabel met daarin de data van de tickets.
Figuur 29: de overview pagina bevat een tabel met de tickets
Terra Nova Provincie Antwerpen
27
De laatste cel in een rij heeft maar één <span> element en volgens de wireframes moeten meerdere regels worden opgemaakt. Het feit dat de data van deze cel zich bevindt in één element, kan ik niet elke regel opmaken. Nu volgt een voorbeeld waar ik de HTML heb moeten aanpassen: ik heb een <span> element moeten toevoegen, om zo elke regel te kunnen opmaken. Zonder deze <span> tag kon de middelste regel (bv: viola da gamba) niet in het zwart worden gekleurd. Op bovenstaande foto (figuur 29) hebben de eerste 2 rijen een extra <span> tag. Deze aanpassing was kinderspel, maar ik toon aan de gegeven HTML van Ticketmatic op verschillende plaatsten moest worden aangepast, zodat de wireframes overeen kwamen met de HTML. 3.5.1.1 Overzicht Onderstaande foto’s geven een overzicht van hoe de Ticketmatic pagina’s er nu uitzien met de Terra Nova skin.
Figuur 30 - 33: overzicht van de Ticketmatic pagina’s
Terra Nova Provincie Antwerpen
28
4 Syntetik case: mobiele site stad Antwerpen 4.1 Inleiding Syntetik wil een case hebben die één van hun werken presenteert naar de buitenwereld toe. Dit is ideaal als extra portfolio en reclame voor hen. Ik zal twee cases maken voor Syntetik. De eerste is die van stad Antwerpen en hun nieuwe mobiele site. Deze case is een website die informatie bevat over het ontwikkelingsproces van de mobiele site.
4.2 Beschrijving De website heeft one-page design die grote blokken tekst bevat. Deze blokken tekst zijn de onderdelen of de stappen in het verhaal van de case. De tekst in het eerste blok is dus de eerste stap, het concept. Wanneer de bezoeker meer naar onder scrolt, komt hij/zij meer stappen van het proces tegen. Het laatste blok tekst is dus het eindresultaat. De site bevat animaties die worden gestart wanneer de gebruiker bij een bepaald punt is. Bij 4 van de 6 blokken tekst behoort een animatie. Deze animatie start steeds wanneer de gebruiker bij de bijhorende stap is. Het design is gemaakt door Nicolas en ik ontwikkel de front-end. Ik krijg dus de wireframes in PSD-formaat en zet deze om naar HTML. De site zelf hoeft niet responsive te zijn, maar wel te werken op Internet Explorer versie 7 en hoger. Onderstaande figuren tonen het Photoshop wireframe.
Figuur 34: wireframe in Photoshop
Syntetik case: mobiele site stad Antwerpen
29
Figuur 35 en 36: wireframes en overzicht van de pagina in Photoshop
4.3 Uitwerking De eerste stap in dit proces is het slicen: de wireframe van de case omzetten naar HTML. Deze stap was relatief kort, omdat de site maar 1 pagina bevat. De structuur bevat de HTML, CSS en JavaScript bestanden. Mijn site heeft drie CSS bestanden. Elk heeft zijn eigen doel: 1. een CSS bestand met de basis opmaak; 2. een CSS bestand met de opmaak voor Internet Explorer 7; 3. een reset CSS.
Figuur 37: mappenstructuur voor de Syntetik case
Syntetik case: mobiele site stad Antwerpen
30
De reset CSS stript de standaard opmaak van een browser. Dit zorgt ervoor dat ik kan beginnen met een propere start. De hoofdstructuur van de HTML bestaat uit een main
met daarin een wrapper
die gecentreerd is. De wrapper heeft een grid breedte van 925px. Elk stap in de case is een
die telkens een eigen ID heeft en een gemeenschappelijke CSS klasse bevat. Zo kan ik het aantal lijnen CSS opmaak reduceren. Volgende foto bevat de HTML structuur van de eerste stap.
Figuur 38: de hoofdstructuur van de HTML pagina
Syntetik case: mobiele site stad Antwerpen
31
4.3.1 Animaties Eens de HTML in orde was, was de eerste stap kijken naar de animaties. Vier secties van de pagina bevatten een animatie. De animatie van een bepaalde sectie wordt gestart wanneer die in beeld is. Dit wordt bepaald via een scrollpunt. De vier secties zijn: 1. Concept – eerste stap 2. Details – vierde stap 3. Code – vijfde stap 4. Product – laatste stap 4.3.1.1 Tweenmax Alle animaties op de website zijn gemaakt met de JavaScript TweenMax plugin van Greensock.
Figuur 39: de syntax van TweenMax
De TweenMax functie is straightforward. Eerst definieert u welk DOM element geanimeerd moet worden. In dit voorbeeld heb ik gewerkt met jQuery voor het selecteren van een DOM element, wat eigenlijk gelijk is aan een lijn CSS selectoren. Na het kiezen van een element, kan u kiezen hoelang de animatie moet duren. De tijdsduur is geschreven in seconden. Daarna schrijf ik de parameter met de CSS opmaak voor de animatie. Dit is de eindopmaak voor het geselecteerd element. In dit voorbeeld krijgt een element een opmaak die de absolutie positie op top 0 zet. Als de beginpositie van het element de waarde top 100 heeft, dan zal deze in twee seconden geanimeerd worden naar top 0. Dit voorbeeld heeft maar één CSS lijn (top:0;), maar in principe kunnen er meerdere lijnen worden geschreven. Na het schrijven van de CSS opmaak wordt de soort beweging of ease gedefinieerd. Dit voorbeeld heeft als beweging Bounce.easeOut. Deze beweging laat een element bewegen naar de eind CSS opmaak en daarna een twee keer terug laten botsen. Dit lijkt goed op een basketbal effect. Een meer basis animatie is de Sine.easeIn of Sine.easeOut. Bij een easeIn wordt vloeiend gestart en onmiddellijk gestopt. Bij een easeOut wordt een animatie onmiddellijk gestart en stopt die vloeiend. Naast bovenstaande parameters hebt u ook nog: • delay • onComplete • paused • yoyo • … •
Syntetik case: mobiele site stad Antwerpen
32
Met de onComplete parameter kan u een functie afvuren wanneer de animatie op zijn einde is. De yoyo parameter zorgt er dan weer voor dat een animatie in een oneindige lus wordt gezet.
Figuur 40: een ander code voorbeeld waar TweenMax wordt gebruikt
4.3.1.2 Typewriter animatie De sectie op de website met als titel “Code” bevat ook een animatie: een typewriter animatie van een stukje HTML code in een teksteditor. Ik heb besloten om de teksteditor na te maken in HTML, zodat ik de tekst kan animeren. 4.3.1.2.1 Structuur van de teksteditor De structuur van de teksteditor in HTML bevat: • een
met de legende; • een
met de code.
Figuur 41: de case bevat een geanimeerde teksteditor dat gemaakt is met HTML en CSS
De hoofdstructuur van deze teksteditor bestaat uit twee
elementen. Deze twee nodes bevatten voor elke lijn in de teksteditor een
element. Deze
elementen hebben krijgen de juiste padding, zodat de indenting overeen komt met die van een echte teksteditor.
Syntetik case: mobiele site stad Antwerpen
33
Figuur 42: HTML structuur van de teksteditor die ik namaak
Elk woord in de tekst is omringd door een <span> element. Deze heeft een klasse die de tekst de juiste kleur geeft, zoals het moet bij code highlight syntaxing. 4.3.1.2.2 De animatie met TweenMax De typewriter animatie is opnieuw gemaakt met de TweenMax plug-in. Deze animatie zorgt ervoor dat een tekst, letter per letter, in beeld wordt gebracht. De functie is gelijkaardig aan de functie van de andere animatie met TweenMax, maar ipv de CSS opmaak te veranderen, verander ik nu de tekstinhoud. Er kan opnieuw een bepaalde ease worden gedefinieerd. De beweging easIn zorgt ervoor dat de woorden eerst traag en dan op constante snelheid in beeld worden gebracht.
Figuur 43: TweenMax kan ook tekst animeren
TweenMax heeft wel volgende plug-in nodig, vooraleer een tekst te kunnen animeren:
Figuur 44: de online link van de extra plug-in voor TweenMax
4.3.1.3 Afvuren animaties De animatie van een sectie wordt steeds geanimeerd wanneer deze sectie in beeld is. Dit moment is voor elke animatie anders en dit definieer ik door gebruik te maken van de jQuery method scrollTop(). Deze methode geeft de verticale positie van de scrollbar weer voor een geselecteerd element. Dit volledige proces zorgt voor een unieke webpagina en een leuke user experience.
Syntetik case: mobiele site stad Antwerpen
34
Ik gebruik het jQuery scroll event waarmee ik een functie kan afvuren wanneer er wordt gescrold. In deze functie wordt de scrollTop() gecheckt. Als de scrollTop een bepaalde waarde of hoger heeft wordt de animatie gestart. Elke sectie van de case heeft logischerwijs een andere scrollwaarde. Volgend voorbeeld bevat een stukje code voor een sectie die als scrollTop() waarde 1900 of hoger heeft. Eens die waarde bereikt is kan de animatie worden gestart.
Figuur 45: jQuery scroll event
4.3.2 Scalable Vector Graphics De case wou ik zo performant mogelijk maken, en daarom had ik het idee om bepaalde foto’s te vervangen door vectorafbeeldingen, maw SVG’s. Scalable Vector Graphics, afgekort SVG, is een XML bestandsformaat voor vectorafbeeldingen.
Figuur 46: XML code van een SVG afbeelding
4.3.2.1 Waarom SVG gebruiken? Het gebruik van SVG afbeeldingen ten opzichte van gewone afbeeldingsformaten heeft heel wat voordelen: • kleinere bestandgrootte; • schaalt tot elke grootte zonder kwaliteitsverlies; • ziet er super scherp uit op Retina schermen; • mogelijkheid om afbeelding te animeren; • mogelijkheid om filters te gebruiken. Enorm kleine afbeeldingen vervang je best niet door een SVG, omdat een vector-based afbeelding met een kleine afmeting pixelachtig overkomt.
Syntetik case: mobiele site stad Antwerpen
35
4.3.2.2 Vector exporteren als SVG Een SVG aanmaken doe ik vanuit een Adobe Illustrator bestand. Eerst zorgt u er voor dat uw artboard in Illustrator gecropt is tot de hoeken van uw afbeelding. Als u deze stap niet doet zal de SVG afbeelding hoogstwaarschijnlijk veel nutteloze witruimte bevatten. De volgende stap is dan op de vector op te slaan als SVG. In deze stap kan u in principe niets verkeerd doen. Eens de SVG is opgeslagen, kan u ook de code bekijken door de SVG te openen met een teksteditor. 4.3.2.3 SVG in een HTML pagina SVG bestanden plaatsen op een HTML pagina kan in een , <embed>,
