Making websites with a flavour 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. CMS: Contentmanagementsysteem (zie ook verklarende woordenlijst) II. CSS: Cascading Style Sheets, is een opmaaktaal waarmee je een webpagina kan visueel kan vormgeven. III. DOM: Document Object Model, definieert de logische structuur van HTML, XHTML en XML documenten IV. FTP: File Transfer Protocol V. HTML: HyperText Markup Language, is een opmaaktaal voor het schrijven de structuur van een webpagina. VI. IE: Internet Explorer VII. PSD: PSD is een bestandsformaat van Adobe Photoshop. VIII. RWD: Responsive Webdesign (zie ook verklarende woordenlijst)
Inleiding Syntetik 1 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 & Creations 2 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 http://www.syntetik.be 2 http://www.dreamsandcreations.be
Inhoudstafel Voorwoord... 2 Samenvatting... 3 Verklarende woordenlijst... 4 Afkortingenlijst... 5 Inleiding... 6 1 Tools... 9 1.1 Sublime Text 2... 9 1.2 Chrome DevTools... 9 1.3 CodeKit... 9 1.4 Transmit... 10 1.5 Adobe Photoshop CS6... 10 1.6 Windows... 10 2 Mobiele Syntetik site... 11 2.1 Inleiding... 11 2.2 Analyse... 11 2.3 Uitwerking... 12 2.3.1 Eerste uitvoering... 12 2.3.2 Correctie uitvoering... 12 3 Terra Nova Provincie Antwerpen... 21 3.1 Inleiding... 21 3.2 Analyse... 21 3.3 Beschrijving... 21 3.3.1 Skeleton... 21 3.3.2 Sitemap... 22 3.4 Uitwerking... 23 3.4.1 Start... 23 3.4.2 Internet Explorer... 24 3.4.3 Overzicht... 25 3.5 Opvolging... 26 4 Syntetik case: mobiele site stad Antwerpen... 29 4.1 Inleiding... 29 4.2 Beschrijving... 29 4.3 Uitwerking... 30 4.3.1 Animaties... 32 4.3.2 Scalable Vector Graphics... 35 4.3.3 Internet Explorer... 37 4.3.4 Facebook Open Graph... 38 4.3.5 Afwerking... 40
5 JIM Mobile... 41 5.1 Parallax scrolling website... 41 5.1.1 Inleiding... 41 5.1.2 Uitwerking... 42 5.2 Landingspagina... 44 5.2.1 Inleiding... 44 5.2.2 Beschrijving... 44 5.2.3 Uitwerking... 44 5.3 Syntetik case: JIM Mobile... 45 5.3.1 Inleiding... 45 5.3.2 Beschrijving... 45 5.3.3 Uitwerking... 46 Conclusie... 49 Links... 50
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 2 1 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 DevTools 2 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 CodeKit 3 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 http://www.sublimetext.com 2 https://developers.google.com/chrome-developer-tools/ 3 http://incident57.com/codekit/ Tools 9
1.4 Transmit Transmit 1 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 IETester 2 om snel een site te checken in Internet Explorer. IETester is een webbrowser die websites kan renderen in verschillende versies van Internet Explorer. 1 http://panic.com/transmit/ 2 http://my-debugbar.com/wiki/ietester Tools 10
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 Prophets 1 (Antwerpen), firstborn 2 en Big Spaceship 3. 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. Figuur 1: wireframes 1 http://www.prophets.be 2 http://www.firstborn.com 3 http://www.bigspaceship.com Mobiele Syntetik site 11
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 Swipe 1. Swipe is een JavaScript touch slider. De HTML structuur voor Swipe moet overeenkomen met onderstaande foto. De structuur moet een <div> element bevatten, met daarin een ongeordende lijst. Elk <li> element in de lijst is een slide. In mijn voorbeeld bevatten deze slides telkens een <img> element. De navigatie van de slider bevindt zich in het <div> 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 <li> 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. W3C 1 heeft een lijst 2 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 http://www.w3.org 2 http://www.w3.org/tr/css3-transitions/#properties-from-css- Mobiele Syntetik site 17
U heeft natuurlijk niet zo veel keuze uit snelheidsveranderingen als andere plug-ins. Maar dankzij de cubic-bezier() functie kunnen veel eases worden nagemaakt. Ceaser 1 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.js 1. 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. Figuur 14: CSS animatie met behulp van Hammer.js 1 http://eightmedia.github.io/hammer.js/ 2 http://api.jquery.com/click/ Mobiele Syntetik site 19
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; online Boolean; 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 Nova 1. 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 ExpressionEngine 2 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 Skeleton 3 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 960px 4 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. 1 http://terranova.provant.be 2 http://ellislab.com/expressionengine 3 http://www.getskeleton.com 4 http://www.960.gs Terra Nova Provincie Antwerpen 21
Figuur 17: het grid systeem van Skeleton 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 <html> 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 <html> 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 Ticketmatic 1. 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