Een website bouwen en onderhouden (MacBeurs 2010)

104
EEN WEBSITE BOUWEN EN ONDERHOUDEN

description

Workshop gegeven door Stijn Janssen en Tom Claus van Inventis op 21 november 2010 op de MacBeurs in Genk.

Transcript of Een website bouwen en onderhouden (MacBeurs 2010)

Page 1: Een website bouwen en onderhouden (MacBeurs 2010)

EEN WEBSITE BOUWEN EN ONDERHOUDEN

Page 2: Een website bouwen en onderhouden (MacBeurs 2010)

STIJNJanssen

2

Page 3: Een website bouwen en onderhouden (MacBeurs 2010)

TOMClaus

3

Page 4: Een website bouwen en onderhouden (MacBeurs 2010)
Page 5: Een website bouwen en onderhouden (MacBeurs 2010)

•Webdesign

•Webdevelopment

• Zoekmachine Optimalisatie (SEO)

• Email Marketing

•Webhosting & domeinnamen

INVENTIS

5

Page 6: Een website bouwen en onderhouden (MacBeurs 2010)

PORTFOLIO

6

Page 7: Een website bouwen en onderhouden (MacBeurs 2010)

EEN WEBSITE BOUWENEN ONDERHOUDEN

7

Page 8: Een website bouwen en onderhouden (MacBeurs 2010)

•Wie heeft een eigen website?

•Wie maakt zijn eigen website?

•Wie is er wekelijks bezig met zijn website?

8

Page 9: Een website bouwen en onderhouden (MacBeurs 2010)

•Waar rekening mee houden

•Dingen die je zeker moet vermijden

• Hoe kan je bezoekers aantrekken

• Hoe laat ik mijn website leven

WAT GA JE LEREN?

9

Page 10: Een website bouwen en onderhouden (MacBeurs 2010)

• Snelcursus webdesign/webdevelopment

• Hoe op nr. 1 in Google

• Hoe je slapend rijk kan worden

WAT GA JE NIET LEREN?

10

Page 11: Een website bouwen en onderhouden (MacBeurs 2010)

Ik wil een website, wat nu?

Page 12: Een website bouwen en onderhouden (MacBeurs 2010)

Of laten bouwen?

BOUWEN

12

Page 13: Een website bouwen en onderhouden (MacBeurs 2010)

DOELEN STELLENBouwen

13

Page 14: Een website bouwen en onderhouden (MacBeurs 2010)

•Wat wil ik bereiken?

•Wat doet de concurrentie?

•“Bezint eer ge begint”

•Voorbeeld

14

Page 15: Een website bouwen en onderhouden (MacBeurs 2010)

DE BROWSERBouwen

15

Page 16: Een website bouwen en onderhouden (MacBeurs 2010)

•> 5 besturingssystemen

•> 10 layout engines

•> 70 browsers

16

Page 17: Een website bouwen en onderhouden (MacBeurs 2010)

•Mac, Windows, Linux

•Safari, Chrome, Firefox, Internet Explorer

•WebKit, Gecko, Trident

17

A-GRADE

Page 18: Een website bouwen en onderhouden (MacBeurs 2010)

18

Page 19: Een website bouwen en onderhouden (MacBeurs 2010)

TOEGANKELIJKHEIDBouwen

19

Page 20: Een website bouwen en onderhouden (MacBeurs 2010)

20

Page 21: Een website bouwen en onderhouden (MacBeurs 2010)

21

MAAR OOK

•Mobiele toestellen

• Gebruiksvriendelijkheid

• Zoekmachinevriendelijk

• Tijdsintensief

Page 22: Een website bouwen en onderhouden (MacBeurs 2010)

MOBIELBouwen

22

Page 23: Een website bouwen en onderhouden (MacBeurs 2010)

23

Page 24: Een website bouwen en onderhouden (MacBeurs 2010)

•Noodzakelijk?

•Native of Web?

•Andere platformen!

24

Page 25: Een website bouwen en onderhouden (MacBeurs 2010)

• jQTouch

• jQuery Mobile (beta)

• Sencha Touch

MOBILE FRAMEWORK

25

Page 26: Een website bouwen en onderhouden (MacBeurs 2010)

OPBOUWBouwen

26

Page 27: Een website bouwen en onderhouden (MacBeurs 2010)
Page 28: Een website bouwen en onderhouden (MacBeurs 2010)
Page 29: Een website bouwen en onderhouden (MacBeurs 2010)
Page 30: Een website bouwen en onderhouden (MacBeurs 2010)
Page 31: Een website bouwen en onderhouden (MacBeurs 2010)
Page 32: Een website bouwen en onderhouden (MacBeurs 2010)
Page 33: Een website bouwen en onderhouden (MacBeurs 2010)
Page 34: Een website bouwen en onderhouden (MacBeurs 2010)

• Buzzword

• 2020

• geen CSS3

HTML5

30

Page 35: Een website bouwen en onderhouden (MacBeurs 2010)

HTML5 Boilerplate

31

Page 36: Een website bouwen en onderhouden (MacBeurs 2010)

• Plugin

• Technische kennis nodig

•Duur

• Uitgebreid

FLASH

32

Page 37: Een website bouwen en onderhouden (MacBeurs 2010)

• Javascript Framework

•Open Source

• Lage drempel

• Enorm veel resources, plugins, tutorials, ...

JQUERY

33

Page 38: Een website bouwen en onderhouden (MacBeurs 2010)

DON’TBouwen

34

Page 39: Een website bouwen en onderhouden (MacBeurs 2010)

• Verouderd

• Performance

• iframe

• Enkel als er geen andere oplossing is!

FRAMES

35

Page 40: Een website bouwen en onderhouden (MacBeurs 2010)
Page 41: Een website bouwen en onderhouden (MacBeurs 2010)
Page 42: Een website bouwen en onderhouden (MacBeurs 2010)
Page 43: Een website bouwen en onderhouden (MacBeurs 2010)

• Animated GIF

• Storend, afleidend

• Vaak gebruikt voor reclame

BEWEGENDE BEELDEN

37

Page 44: Een website bouwen en onderhouden (MacBeurs 2010)
Page 45: Een website bouwen en onderhouden (MacBeurs 2010)
Page 46: Een website bouwen en onderhouden (MacBeurs 2010)

HIT COUNTER

• Geen meerwaarde

• Enkel voor jezelf

39

Page 47: Een website bouwen en onderhouden (MacBeurs 2010)

• Geen meerwaarde

• Irritant

• Copyright

ACHTERGRONDGELUID

40

Page 48: Een website bouwen en onderhouden (MacBeurs 2010)

• Vaak in plain-text

• Ideaal voor spambots

• Hexadecimaal encoderen

E-MAILADRESSEN

41

Page 49: Een website bouwen en onderhouden (MacBeurs 2010)

E-MAILADRESSEN

[email protected]

info@inventis.be

42

Page 50: Een website bouwen en onderhouden (MacBeurs 2010)

SPLASH

• Bijna geen meerwaarde

• Extra klik voor de bezoeker

43

Page 51: Een website bouwen en onderhouden (MacBeurs 2010)
Page 52: Een website bouwen en onderhouden (MacBeurs 2010)

•Dode pagina

• Verwarrend voor de bezoeker

• Slechte SEO

404

45

Page 53: Een website bouwen en onderhouden (MacBeurs 2010)

46

Page 54: Een website bouwen en onderhouden (MacBeurs 2010)

http://www.clubpenguin.com/404

47

Page 55: Een website bouwen en onderhouden (MacBeurs 2010)

• Alles wat hierop staat mag je niet gebruiken!http://leejoo.nl/

• Een voorbeeld van alle fouten die je kan makenhttp://cmdshiftdesign.com/ilovesmekitty/

• Je e-maildres encoderenhttp://www.nikhef.nl/pub/computing/MailSpamstop.php

NUTTIGE LINKS

48

Page 56: Een website bouwen en onderhouden (MacBeurs 2010)

ONDERHOUDEN

49

Page 57: Een website bouwen en onderhouden (MacBeurs 2010)

NIEUWE CONTENTOnderhouden

50

Page 58: Een website bouwen en onderhouden (MacBeurs 2010)

•Verse vernieuwende teksten

•Blog

•Foto’s

•Blijf interessant en vernieuwend

51

Page 59: Een website bouwen en onderhouden (MacBeurs 2010)
Page 60: Een website bouwen en onderhouden (MacBeurs 2010)
Page 61: Een website bouwen en onderhouden (MacBeurs 2010)
Page 62: Een website bouwen en onderhouden (MacBeurs 2010)
Page 63: Een website bouwen en onderhouden (MacBeurs 2010)
Page 64: Een website bouwen en onderhouden (MacBeurs 2010)
Page 65: Een website bouwen en onderhouden (MacBeurs 2010)
Page 66: Een website bouwen en onderhouden (MacBeurs 2010)

Onderhouden

FEEDS

54

Page 67: Een website bouwen en onderhouden (MacBeurs 2010)

•RSS

• iCal

•Publiceer naar Facebook

•Publiceer naar Twitter

55

Page 68: Een website bouwen en onderhouden (MacBeurs 2010)
Page 69: Een website bouwen en onderhouden (MacBeurs 2010)
Page 70: Een website bouwen en onderhouden (MacBeurs 2010)
Page 71: Een website bouwen en onderhouden (MacBeurs 2010)
Page 72: Een website bouwen en onderhouden (MacBeurs 2010)
Page 73: Een website bouwen en onderhouden (MacBeurs 2010)

SEOOnderhouden

58

Page 74: Een website bouwen en onderhouden (MacBeurs 2010)

• Verse Teksten

•Duplicate Content

• Geen Copy/Paste

• Unieke Links

TEKSTEN

59

Page 75: Een website bouwen en onderhouden (MacBeurs 2010)

60

Page 76: Een website bouwen en onderhouden (MacBeurs 2010)

60

Page 77: Een website bouwen en onderhouden (MacBeurs 2010)

<link rel="canonical" href="http://www.domain.com/product.php?item=swedish-fish" />

61

Page 78: Een website bouwen en onderhouden (MacBeurs 2010)

INTERNE LINKS

• Links tussen verschillende pagina’s op je website

• Scoren op kernwoorden

•Niet meer dan 1x linken per keyword

•Niet meer dan 10 links

62

Page 79: Een website bouwen en onderhouden (MacBeurs 2010)

<a href=‘http://www.domain.com’>kernwoord</a>

63

Page 80: Een website bouwen en onderhouden (MacBeurs 2010)

BACKLINKS

• Links van andere websites naar jouw toe

• Pagerank

•Websites met hogere pagerank die link = beter

• Scoren met kernwoorden

64

Page 81: Een website bouwen en onderhouden (MacBeurs 2010)

SYMANTIEK

• H1, H2, H3 voor titels

• Volgorde = belangrijk

• P voor inhoud teksten

•Overzicht H2 met Link

• Tabellen = enkel voor data

65

Page 82: Een website bouwen en onderhouden (MacBeurs 2010)

AFBEELDINGEN

• Google Image Search

• Alt-tag = belangrijk

• Beknopte omschrijving

• Title-tag soms ook van belang

66

Page 83: Een website bouwen en onderhouden (MacBeurs 2010)

<a href=‘http://www.domain.com’><img src=‘afbeelding.png’ alt=‘beschrijving’ title=‘titel van foto’ />

</a>

67

Page 84: Een website bouwen en onderhouden (MacBeurs 2010)

CONTENT IS KINGUSER GENERATED CONTENT IS KEY

Onderhouden

68

Page 85: Een website bouwen en onderhouden (MacBeurs 2010)

•Laat bezoekers het werk doen !

•Reacties

•Omgaan met negatieve reacties

•Nooit verwijderen

•Votings, reviews, tips,...

•Wikipedia

69

Page 86: Een website bouwen en onderhouden (MacBeurs 2010)
Page 87: Een website bouwen en onderhouden (MacBeurs 2010)
Page 88: Een website bouwen en onderhouden (MacBeurs 2010)
Page 89: Een website bouwen en onderhouden (MacBeurs 2010)

Onderhouden

MODERNE MEDIA

71

Page 90: Een website bouwen en onderhouden (MacBeurs 2010)

• Stukjes tekst met specifiek informatie

• Titel

• SEO

• Facebook ?!

META TAGS

72

Page 91: Een website bouwen en onderhouden (MacBeurs 2010)

73

Page 92: Een website bouwen en onderhouden (MacBeurs 2010)

DELEN...

•Delen op Facebook

•Delen op Twitter

•Delen op ....

•Maak het gebruikers gemakkelijk

• Gebruik herkenbare logo’s en knoppen

74

Page 93: Een website bouwen en onderhouden (MacBeurs 2010)

VOORUITSTREVEND

• Facebook 5 jaar geleden ?

• Reacties

• Like

• Login

• Twitter

• Flickr

•Wat zal de toekomst brengen?

75

Page 94: Een website bouwen en onderhouden (MacBeurs 2010)
Page 95: Een website bouwen en onderhouden (MacBeurs 2010)
Page 96: Een website bouwen en onderhouden (MacBeurs 2010)
Page 97: Een website bouwen en onderhouden (MacBeurs 2010)

STATISTIEKENOnderhouden

78

Page 98: Een website bouwen en onderhouden (MacBeurs 2010)

• Google Analytics

• Niet enkel pageviews

• Klik events

• Bounce-rate

• Trechters

• InSite Statistieken

• Reinvigorate

• Real-time statistieken79

Page 99: Een website bouwen en onderhouden (MacBeurs 2010)

WAT ZEKER ONTHOUDENEen website bouwen en onderhouden

80

Page 100: Een website bouwen en onderhouden (MacBeurs 2010)

DUS...

•“Bezint eer ge begint”

•De browser is je vriend

• jQuery is beter dan Flash

•Geen beperkingen

81

Page 101: Een website bouwen en onderhouden (MacBeurs 2010)

DUS...

•Blijf vooruitstrevend

•Content is king, user generated content is key

•Houd SEO altijd in het achterhoofd

•Meten is weten!

82

Page 102: Een website bouwen en onderhouden (MacBeurs 2010)

Een website bouwen en onderhouden

Q&A

83

Page 103: Een website bouwen en onderhouden (MacBeurs 2010)

MEER WETEN?

• Inventis.be

•@stijnj

•@WebRaider

•MacBar

84

Page 104: Een website bouwen en onderhouden (MacBeurs 2010)

Een website bouwen en onderhouden

BEDANKT!

85