Making websites with a flavour

Maat: px
Weergave met pagina beginnen:

Download "Making websites with a flavour"

Transcriptie

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 Communication Technology Academiejaar Stageplaats Stagementor Stagebegeleider : Syntetik : Hans Mortelmans : Marijn Verspecht

2 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.

3 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.

4 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.

5 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)

6 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 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

7 Inhoudstafel Voorwoord... 2 Samenvatting... 3 Verklarende woordenlijst... 4 Afkortingenlijst... 5 Inleiding Tools Sublime Text Chrome DevTools CodeKit Transmit Adobe Photoshop CS Windows Mobiele Syntetik site Inleiding Analyse Uitwerking Eerste uitvoering Correctie uitvoering Terra Nova Provincie Antwerpen Inleiding Analyse Beschrijving Skeleton Sitemap Uitwerking Start Internet Explorer Overzicht Opvolging Syntetik case: mobiele site stad Antwerpen Inleiding Beschrijving Uitwerking Animaties Scalable Vector Graphics Internet Explorer Facebook Open Graph Afwerking... 40

8 5 JIM Mobile Parallax scrolling website Inleiding Uitwerking Landingspagina Inleiding Beschrijving Uitwerking Syntetik case: JIM Mobile Inleiding Beschrijving Uitwerking Conclusie Links... 50

9 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 https://developers.google.com/chrome-developer-tools/ 3 Tools 9

10 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 Tools 10

11 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 Mobiele Syntetik site 11

12 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 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 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

13 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 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 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 adres in de footer. Mobiele Syntetik site 13

14 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 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

15 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). &#8226 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 Mobiele Syntetik site 15

16 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 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 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 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

17 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 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 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 Mobiele Syntetik site 17

18 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 Mobiele Syntetik site 18

19 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 Mobiele Syntetik site 19

20 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

21 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 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 Terra Nova Provincie Antwerpen 21

22 Figuur 17: het grid systeem van Skeleton 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 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 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 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 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 Kalender pagina Deze pagina bevat een kalender met alle evenementen van Terra Nova. Terra Nova Provincie Antwerpen 22

23 3.4 Uitwerking 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

24 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 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

25 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 IE 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

26 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 Terra Nova Provincie Antwerpen 26

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.

Om het Elektronica thema te installeren gaat u naar Theme Store in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden. Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: 1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina

Nadere informatie

Van Dreamweaver CS4 naar CS5

Van Dreamweaver CS4 naar CS5 Danny Devriendt Van Dreamweaver CS4 naar CS5 Beknopte overstapgids www.wwwsoft.be Bijlage gratis te downloaden bij Basiscursus webdesign Dreamweaver CS4 WWW-Soft GCV 2010 www.wwwsoft.be CS5 Nieuw in Dreamweaver

Nadere informatie

Swhite bvba Frankrijklei 104 bus 3.1 2000 Antwerpen. support@flux.be flux.be. Flux webdesign. Versie 1.0.2

Swhite bvba Frankrijklei 104 bus 3.1 2000 Antwerpen. support@flux.be flux.be. Flux webdesign. Versie 1.0.2 Swhite bvba Frankrijklei 104 bus 3.1 2000 Antwerpen support@flux.be flux.be Flux webdesign Versie 1.0.2 Inhoudstafel 1. Inleiding... 3 2. Starten... 3 3. Menu... 4 4. Pagina s... 5 4.1. Bewerk de pagina...5

Nadere informatie

HTML5 & Webdesign. Ontwerp cover: Graficelly, Reeuwijk-Brug. N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2

HTML5 & Webdesign. Ontwerp cover: Graficelly, Reeuwijk-Brug. N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2 Ontwerp cover: Graficelly, Reeuwijk-Brug N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2 Eerste druk 2016 Instruct, Postbus 38, 2410 AA Bodegraven Behoudens uitzondering door de wet gesteld

Nadere informatie

Voordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com

Voordelen: Nadelen: Benodigdheden: Programma s: Google Web Designer. Photoshop. Sublime (HTML-editor) Websites: Tinypng.com Google Web Designer Voordelen: Sneller en makkelijker. Banners kunnen worden afgespeeld op telefoons (flash kan dit niet). Het vervangen van plaatjes kan zonder het programma op te starten. Meer FPS dan

Nadere informatie

ONTWERPEN VAN INTERACTIEVE PRODUCTEN

ONTWERPEN VAN INTERACTIEVE PRODUCTEN ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

ActiveBuilder Handleiding

ActiveBuilder Handleiding ActiveBuilder Handleiding Auteur: TalkActive I/S Datum: Juli 2004 Versie: R. 1.01 Taal: Nederlands Copyright 2004 - Talk Active alle rechten voorbehouden. Inhoud: 1. INTRODUCTIE...2 2. SNEL STARTEN...3

Nadere informatie

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag:

Naam stagiair: Nick Swaerdens. Klas: 3IV2. Praktijkopleider: Jordy Pouw. Stagebegeleider: Ron Spitse. Stage periode tweede verslag: Nick Swaerdens 3IV2 10 / 06 / 2015 Naam stagiair: Nick Swaerdens Klas: 3IV2 Praktijkopleider: Jordy Pouw Stagebegeleider: Ron Spitse Stage periode tweede verslag: 2 april 2015 10 juni 2015 Inlever datum:

Nadere informatie

SMART- Leerdoel Mathijs de Bok Emotion - RMM42

SMART- Leerdoel Mathijs de Bok Emotion - RMM42 SMART- Leerdoel Mathijs de Bok Emotion - RMM42 Inhoudsopgave 1.0 Inhoudsopgave 1 1.0 Inleiding 2 1.1 Algemeen 2 1.2 Mijn leerdoelen 2 2.0 Beschrijving leerdoel 2 3 2.1 Responsive 3 2.2 Up- to- date HTML&CSS

Nadere informatie

Content Management Systeem Specifieke modules van het Steenstra CMS 2011

Content Management Systeem Specifieke modules van het Steenstra CMS 2011 Content Management Systeem Specifieke modules van het Steenstra CMS 2011 2. Overzicht en specificering van additionele modules Naast de basis implementatie is het Steenstra CMS systeem uit te breiden met

Nadere informatie

Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012

Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Positie en flow Boxes, block-level en inline elements: Ieder HTML-element wordt, als het ware, als een omkaderd block-

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014

Nadere informatie

Inhoud. Installatie. Functies

Inhoud. Installatie. Functies Inhoud Installatie Functies Instellingen Achtergrond Blokken, knoppen Korting Footer Header, left column Main navigation Modules Price categories, Producten Text Contact 3 4 5 5 6 7 8 9 10 11 12 13 14

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

Inhoud van de website invoeren met de ContentPublisher

Inhoud van de website invoeren met de ContentPublisher Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.

Nadere informatie

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.6 Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Digitale vormgeving 2014 2015. Wordpress deel 1

Digitale vormgeving 2014 2015. Wordpress deel 1 Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...

Nadere informatie

Umbraco Gebruikershandleiding

Umbraco Gebruikershandleiding Umbraco Gebruikershandleiding Aan de slag gaan met Umbraco 1.1 Aanmelden Umbraco is een web publishing systeem dat gemakkelijk te gebruiken is door de gebruikers en heeft geen hoge hard- en software vereisten.

Nadere informatie

Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B

Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een

Nadere informatie

Handleiding Lay-outs bewerken voor LogiVert 5

Handleiding Lay-outs bewerken voor LogiVert 5 Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.

Nadere informatie

WEBSITE SCAN Vrijblijvend advies

WEBSITE SCAN Vrijblijvend advies WEBSITE SCAN Vrijblijvend advies IBAN: NL57ABNA0479025207 Inleiding: Wij hebben uw website op diverse facetten geanalyseerd en hier een bondig rapport voor geschreven. Door het uitvoeren van onderstaande

Nadere informatie

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0

Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Mixed Emotions Digitaal Functioneel ontwerp Datum: 3 april 2014 - Onze referentie: MEO.001-01 - Versie: v1.0 Inhoudsopgave Inhoudsopgave Inleiding 2 3 1. Achtergrond 4 2. Structuur 5 3. Inhoud Mixed Emotions

Nadere informatie

HTML Editor: tabellen en hyperlinks

HTML Editor: tabellen en hyperlinks LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij

Nadere informatie

R E S P O N S I V E Documentatie 1

R E S P O N S I V E Documentatie 1 R E S P O N S I V E Documentatie 1 Inleiding Theme Delta Responsive: speciaal ontwikkeld voor uw lifestyle webshop! Het Delta Responsive Theme is speciaal ontwikkeld voor lifestyle webshops. Een strakke

Nadere informatie

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm:

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm: CMS Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 7 Een link toevoegen... 8 Een afbeelding toevoegen... 10 Foto s plaatsen op de fotopagina... 12 Media...

Nadere informatie

SportCTM 2.0 Startscherm trainer

SportCTM 2.0 Startscherm trainer SportCTM 2.0 Startscherm trainer Inloggen Webapplicatie Via inlog.dotcomsport.com kun je in inloggen op de webapplicatie van het SportCTM. Wij adviseren onderstaande browsers Windows: Internet Explorer,

Nadere informatie

M I K E R U B I O K E R N T A A K

M I K E R U B I O K E R N T A A K M I K E R U B I O E X A M E N 2 0 1 4 K E R N T A A K 2 1 Inhoudsopgave Inventarislijst...03 Begeleidt Uitbestedingen...05 Logboek Back-ups...07 Protocol & Bestaden...09 Testplan...11 Website...15 Applicatie...18

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM

Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken

Nadere informatie

Handleiding: Rapportages Publicatiedatum: 12 mei 2010 (versie 1.0) Pagina 1 van 22 pagina s. Handleiding Rapportages

Handleiding: Rapportages Publicatiedatum: 12 mei 2010 (versie 1.0) Pagina 1 van 22 pagina s. Handleiding Rapportages Pagina 1 van 22 pagina s. Handleiding Rapportages Pagina 2 van 22 pagina s. Inhouds Opgave Rapportages... 3 Rapportdefinities... 4 Importeren & Exporteren... 5 Bedrijfslogo aanpassen... 8 De rapport editor

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

1click updatemodule. Hoe bereiken? U kunt uw CMS eenvoudig bereiken door vlak achter uw domeinnaam /cms te plaatsen. Bv. www.uwsite.be/cms.

1click updatemodule. Hoe bereiken? U kunt uw CMS eenvoudig bereiken door vlak achter uw domeinnaam /cms te plaatsen. Bv. www.uwsite.be/cms. 1click updatemodule Introductie 1Click Light is wat men in de termen van het vak noemt een CMS of Content Management System. Wanneer we dit letterlijk vertalen betekent dit Inhoud Beheer Systeem. Kort

Nadere informatie

Sophie van Solinge 77524 CMS32

Sophie van Solinge 77524 CMS32 Sophie van Solinge 77524 CMS32 1 Opdracht 1 Drupal Wordpress Joomla Case 1 De groenteboer op de hoek, heeft grootse plannen voor zijn zaak. Omdat er in de omgeving veel verzorgingstehuizen zijn en de inwoners

Nadere informatie

Toelichting release notes. 22 mei 2014

Toelichting release notes. 22 mei 2014 Toelichting release notes 22 mei 2014 1 2 Toelichting release notes Error! Unknown document property name. 22 mei 2014 Inleiding release notes Dit document beschrijft de belangrijkste en meest zichtbare

Nadere informatie

01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer

01/05. Websites Nederland over. Mobile marketing. Whitepaper #03/2013. Mabelie Samuels internet marketeer 01/05 Websites Nederland over Mobile marketing Mabelie Samuels internet marketeer 02/05 Mobile marketing Kunt u zich uw eerste mobiele telefoon nog herinneren? Die van mij was een Motorola, versie onbekend,

Nadere informatie

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules

Release notes Argo 7. Interactieve LMS interface. Nieuwe interface voor lesmodules Release notes Argo 7 Argo 7 heeft een interactief web design. Het is optimaal afgestemd op de grote diversiteit aan computerbeeldschermen, van grootbeeld desktops en notebooks tot tablets en smart phones.

Nadere informatie

JCI Tielt. Website JCI-Tielt. Handleiding website

JCI Tielt. Website JCI-Tielt. Handleiding website JCI Tielt Website JCI-Tielt Handleiding website tomputor 1-5-2015 Inhoud Intro... 3 Browsers... 3 Algemeen... 4 1. Wijzigen pagina... 4 Aanmelden... 4 Beveiligingsniveaus... 4 Website als bezoeker... 5

Nadere informatie

Online Marketing. Door: Annika Woud ONLINE MARKETING

Online Marketing. Door: Annika Woud ONLINE MARKETING Online Marketing Door: Annika Woud 1 Inhoudsopgaven 1 Wat is online marketing? 2 Hoe pas je online marketing toe op een website? Hoe pas je het toe? SEO Domeinnaam HTML Google Analytics Advertenties op

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Toetsmatrijs Web Markup

Toetsmatrijs Web Markup Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML,

Nadere informatie

Publishing & Printing Company B.V.

Publishing & Printing Company B.V. STAPPENPLAN WEBSITE Versie 1.3 Publishing & Printing Company B.V. Weth. Sangersstraat 38 (0)46-437 73 11 KVK 140.41959 6191 NA Beek web@pp-company.nl BTW NL 0085.52.861.B01 Algemene voorwaarden www.pp-company.nl

Nadere informatie

HetSchoolvoorbeeld.nl

HetSchoolvoorbeeld.nl HetSchoolvoorbeeld.nl maakt websites voor het onderwijs die u zelf met het bekroonde en gebruiksvriendelijke programma Word- Press inhoudelijk kunt beheren. De vakkundigheid van het team van HetSchoolvoorbeeld.nl

Nadere informatie

Modular Development. Een App in Facebook. Dennis van der Oost CMD2D 0822118. Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1.

Modular Development. Een App in Facebook. Dennis van der Oost CMD2D 0822118. Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1. Modular Development Een App in Facebook Dennis van der Oost CMD2D 0822118 Module: CMDDEV01-7 Docent: Eric Mahieu Eindverslag v.1.0 Inhoudsopgave - Inleiding - Concept omschrijving - Technisch onderzoek

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407 Project plan Erwin Hannaart Sander Tegelaar 61849 62407 I4C2 I4C1 1 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten,

Nadere informatie

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous 2006-2007 Inhoudsopgave 1 2 1.1 Programmeertaal PHP5..................... 2 1.2 MySQL database......................... 3 1.3 Adobe Flash...........................

Nadere informatie

Leereenheid Webdesign

Leereenheid Webdesign Leereenheid Webdesign INLEIDING Deze leereenheid leert je een eenvoudige website opbouwen. Vervolgens passen we dit toe op webquest. VOORKENNIS Elementaire kennis van Web 2.0 is vereist. LEERDOELEN LEERDOELEN

Nadere informatie

MobiDM Partner Handleiding 4.8

MobiDM Partner Handleiding 4.8 MobiDM Partner Handleiding 4.8 Deze MobiDM handleiding bekijkt de mogelijkheden voor de partner binnen de MobiDM Portal. Version: x.x Pagina 1 Index Introductie 2 Help-bestanden & Tooltips 2 Filteren van

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

STAGE VERSLAG LVB NETWORKS

STAGE VERSLAG LVB NETWORKS STAGE VERSLAG LVB NETWORKS Stagiair : Praktijkopleider : Stagebegeleider : Periode : Inlever Datum : Michael Scherpenisse Jeffrey van Draanen Bert de Boer 1 2 April, 2015 Opmerking Beoordeling stageverslag:

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

Toelichting release notes. 23 oktober 2014

Toelichting release notes. 23 oktober 2014 Toelichting release notes 23 oktober 2014 2 Toelichting release notes 23 oktober 2014 Inleiding release notes Deze week ontvangen jullie de release notes waarin onder meer twee nieuwe Paddlets, verschillende

Nadere informatie

Talk Nerdy To Me 16-05-2012 NHL. Responsive Webdesign. Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com

Talk Nerdy To Me 16-05-2012 NHL. Responsive Webdesign. Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com Talk Nerdy To Me 16-05-2012 NHL Responsive Webdesign Maarten van de Voorde mr10.nl Jan-Wessel Hovingh waxle.com 1.1 Waarom is webdesign voor mobiel gebruik onvermijdelijk? in 2010 was er 600% groei in

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

SportCTM 2.0 Sporter

SportCTM 2.0 Sporter SportCTM 2.0 Sporter APP Inloggen Dotcomsport heeft ter ondersteuning van de dagelijkse praktijk ook een APP ontwikkeld, om data invoer te vereenvoudigen. Deze APP ondersteunt de onderdelen; Agenda (invoer

Nadere informatie

Handleiding HBO GO V.2

Handleiding HBO GO V.2 Handleiding HBO GO V.2 Inhoudsopgave: Inhoudsopgave 2 Ophalen HBO GO Ipad applicatie in de App Store. 3 Ophalen HBO GO Android Tablet applicatie in de Google Play Store.. 4 HBO GO Registreren en Inloggen..

Nadere informatie

Documentatie gereedschapbeheer android applicatie. GB Inspect. Handleiding Gereedschapbeheer android applicatie GB Inspect - 1

Documentatie gereedschapbeheer android applicatie. GB Inspect. Handleiding Gereedschapbeheer android applicatie GB Inspect - 1 GB Inspect Handleiding Gereedschapbeheer android applicatie GB Inspect Datum: 10 september 2014 Behorende bij app versie 1.1.5-1 1. Inleiding De Gereedschapbeheer.nl app is bedoeld voor het inspecteren

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

PDF-WORKFLOW. Hogeschool Gent 2e kan grafische en reclame vormgeving Departement KASK academiejaar 2002-2003

PDF-WORKFLOW. Hogeschool Gent 2e kan grafische en reclame vormgeving Departement KASK academiejaar 2002-2003 PDF-WORKFLOW Hogeschool Gent 2e kan grafische en reclame vormgeving Departement KASK academiejaar 2002-2003 1.0 Wat is PDF? Portable Document Format Is het standaard formaat voor het uitwisselen van belangrijke

Nadere informatie

Grote Beer 123 3067 TR Rotterdam

Grote Beer 123 3067 TR Rotterdam Persoonlijke gegevens Geboortedatum Burgerlijke staat Nationaliteit Rijbewijs Robert de Pijper 01031982 Ongehuwd Nederlandse Ja Adres Postcode Woonplaats Grote Beer 123 3067 TR Rotterdam Telefoon Email

Nadere informatie

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen.

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Wat is sitebuilder Site Builder is een uiterst gebruiksvriendelijk en zeer uitgebreid product waarmee u snel een eigen praktijkwebsite kunt

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

CMS Template Handleiding

CMS Template Handleiding CMS Template Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 6 Een link toevoegen... 7 Een afbeelding toevoegen... 9 Foto s plaatsen op de fotopagina...

Nadere informatie

Website Inhoud Beheerder

Website Inhoud Beheerder Beknopte handleiding: Website Inhoud Beheerder Hieronder treft u de handleiding aan van de Website Inhoud Beheerder gebaseerd op Plone. Pagina 1 van 21 Inhoudsopgave Basis Pagina 3 Nieuwe pagina Pagina

Nadere informatie

1 BUSINESS INTERNET SUPPORT

1 BUSINESS INTERNET SUPPORT Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet

Nadere informatie

Interactive media Developer (IMD) In samenwerking met House of Media

Interactive media Developer (IMD) In samenwerking met House of Media Interactive media Developer (IMD) In samenwerking met House of Media Interactive Media Developer (IMD) DPS-producties maken (interactieve magazine app) epub s vervaardigen (e-book of e-magazine?) 3 dagen

Nadere informatie

- Plan Zo kun je een. website bouwen!

- Plan Zo kun je een. website bouwen! - Plan Zo kun je een website bouwen! BoekjeHoeKanJeEenWebsiteBouwen.i1 1 8-7-2008 17:23:14 BoekjeHoeKanJeEenWebsiteBouwen.i2 2 8-7-2008 17:23:15 In dit boekje staat de uitgebreide versie van hoe je een

Nadere informatie

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR WELKOM AGENDA Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting INTRODUCTIE Peter Kassenaar;

Nadere informatie

Algemene WordPress Handleiding uitleg basics Karin de Wit Design

Algemene WordPress Handleiding uitleg basics Karin de Wit Design Inhoudsopgave Inhoudsopgave... 2 Algemene informatie... 3 Introductie... 4 Inloggen bij WordPress... 5 Introductie in het dashboard... 6 Berichten en pagina's... 8 Bericht Categorieën... 8 Nieuw Bericht...

Nadere informatie

Juni 2013 OKRA HANDLEIDING TREFPUNTSITES. wendy.dekeyzer@okra.be

Juni 2013 OKRA HANDLEIDING TREFPUNTSITES. wendy.dekeyzer@okra.be Juni 2013 OKRA HANDLEIDING TREFPUNTSITES wendy.dekeyzer@okra.be Opbouw trefpuntsite... 3 Startpagina... 3 Over OKRA... 7 Activiteiten... 8 Lid worden... 9 Contact... 10 Foto s... 11 Hoe starten?... 12

Nadere informatie

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding HetSchoolvoorbeeld 2.1 Websites Social media Mediawijsheid Grafisch ontwerp Handleiding HetSchoolvoorbeeld 2.1 Pagina 1 Inhoud 1 Opbouw van

Nadere informatie

Bij problemen of vragen omtrent de login gegevens, kan er contact worden opgenomen met de webmaster bij Lannoo.

Bij problemen of vragen omtrent de login gegevens, kan er contact worden opgenomen met de webmaster bij Lannoo. Jean-Baptiste de Ghellincklaan 13, Bus 301 9051 Gent +32/497.52.61.20 www.misterduke.be Manual: Aanmaak Event/ Expo : Lannoocampus-Academie.nl 1. Inloggen CMS Via http://www.lannoocampus-academie.nl/beta/cms

Nadere informatie

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast

SELECTEER EEN PAGINA TEMPLATE EN HOOFD VOOR DE PAGINA: Selecteer, in de PAGINA ATTRIBUTEN module rechts naast OPMAKEN VAN BERICHTEN EN PAGINA S ONE PAGER Berichten en pagina s worden op dezelfde wijze opgemaakt. Voor het opmaken van een bericht ga je in het navigatiemenu (afbeelding rechts) naar BERICHTEN > NIEUW

Nadere informatie

HANDLEIDING DOIT BEHEER SYSTEEM

HANDLEIDING DOIT BEHEER SYSTEEM HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde

Nadere informatie

FAQ. Responsive Design. Auteur Tim Ariesen Serviceteam Fulfilment Allrounder Datum 20-03-2014 Versie 1.0

FAQ. Responsive Design. Auteur Tim Ariesen Serviceteam Fulfilment Allrounder Datum 20-03-2014 Versie 1.0 FAQ Responsive Design Auteur Tim Ariesen Serviceteam Fulfilment Allrounder Datum 20-03-2014 Versie 1.0 Inhoudsopgave Pagina 1. Wat is responsive design? 3 2. Wat is er toegevoegd aan onze mono werkomgeving?

Nadere informatie

Websitecursus deel 2 CSS

Websitecursus deel 2 CSS Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website

Nadere informatie

Whitepaper. E-mail design best practices

Whitepaper. E-mail design best practices Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

Documentatie WD32. Christine van Woensel M32

Documentatie WD32. Christine van Woensel M32 Documentatie WD32 Christine van Woensel M32 Ontwerpkeuzes per device resolutie Desktop (1025 1600px & 769 1024px): Tablet (481 768px): Smartphone (321 480px & tot 320px): Algemeen: Alle ontwerpen voor

Nadere informatie