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

1. EEN WEBSITE BOUWEN
EN ONDERHOUDEN

2. STIJN
Janssen
2

3. TOM
Claus
3

5. • Webdesign
• Webdevelopment
• Zoekmachine Optimalisatie (SEO)
• Email Marketing
• Webhosting & domeinnamen
INVENTIS
5

6. PORTFOLIO
6

7. EEN WEBSITE BOUWEN
EN ONDERHOUDEN
7

8. •Wie heeft een eigen website?
•Wie maakt zijn eigen website?
•Wie is er wekelijks bezig met zijn website?
8

9. • 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

10. • Snelcursus webdesign/webdevelopment
• Hoe op nr. 1 in Google
• Hoe je slapend rijk kan worden
WAT GA JE NIET LEREN?
10

11. Ik wil een website, wat nu?

12. Of laten bouwen?
BOUWEN
12

13. DOELEN STELLEN
Bouwen
13

14. •Wat wil ik bereiken?
•Wat doet de concurrentie?
•“Bezint eer ge begint”
•Voorbeeld
14

15. DE BROWSER
Bouwen
15

16. •> 5 besturingssystemen
•> 10 layout engines
•> 70 browsers
16

17. •Mac,Windows, Linux
•Safari, Chrome, Firefox, Internet Explorer
•WebKit, Gecko,Trident
17
A-GRADE

18. 18

19. TOEGANKELIJKHEID
Bouwen
19

20. 20

21. 21
MAAR OOK
• Mobiele toestellen
• Gebruiksvriendelijkheid
• Zoekmachinevriendelijk
• Tijdsintensief

22. MOBIEL
Bouwen
22

23. 23

24. •Noodzakelijk?
•Native of Web?
•Andere platformen!
24

25. • jQTouch
• jQuery Mobile (beta)
• SenchaTouch
MOBILE FRAMEWORK
25

26. OPBOUW
Bouwen
26

34. • Buzzword
• 2020
• geen CSS3
HTML5
30

35. HTML5 Boilerplate
31

36. • Plugin
• Technische kennis nodig
• Duur
• Uitgebreid
FLASH
32

37. • Javascript Framework
• Open Source
• Lage drempel
• Enorm veel resources, plugins, tutorials, ...
JQUERY
33

38. DON’T
Bouwen
34

39. • Verouderd
• Performance
• iframe
• Enkel als er geen andere oplossing is!
FRAMES
35

43. • Animated GIF
• Storend, afleidend
• Vaak gebruikt voor reclame
BEWEGENDE BEELDEN
37

46. HIT COUNTER
• Geen meerwaarde
• Enkel voor jezelf
39

47. • Geen meerwaarde
• Irritant
• Copyright
ACHTERGRONDGELUID
40

48. • Vaak in plain-text
• Ideaal voor spambots
• Hexadecimaal encoderen
E-MAILADRESSEN
41

49. E-MAILADRESSEN
info@inventis.be
info@&#
105;nven&#11
6;is.be
42

50. SPLASH
• Bijna geen meerwaarde
• Extra klik voor de bezoeker
43

52. • Dode pagina
• Verwarrend voor de bezoeker
• Slechte SEO
404
45

53. 46

54. http://www.clubpenguin.com/404
47

55. • Alles wat hierop staat mag je niet gebruiken!
http://leejoo.nl/
• Een voorbeeld van alle fouten die je kan maken
http://cmdshiftdesign.com/ilovesmekitty/
• Je e-maildres encoderen
http://www.nikhef.nl/pub/computing/MailSpamstop.php
NUTTIGE LINKS
48

56. ONDERHOUDEN
49

57. NIEUWE CONTENT
Onderhouden
50

58. •Verse vernieuwende teksten
•Blog
•Foto’s
•Blijf interessant en vernieuwend
51

66. Onderhouden
FEEDS
54

67. •RSS
•iCal
•Publiceer naar Facebook
•Publiceer naarTwitter
55

73. SEO
Onderhouden
58

74. • VerseTeksten
• Duplicate Content
• Geen Copy/Paste
• Unieke Links
TEKSTEN
59

75. 60

76. ≠
≠
60

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

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

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

80. BACKLINKS
• Links van andere websites naar jouw toe
• Pagerank
• Websites met hogere pagerank die link = beter
• Scoren met kernwoorden
64

81. SYMANTIEK
• H1, H2, H3 voor titels
• Volgorde = belangrijk
• P voor inhoud teksten
• Overzicht H2 met Link
• Tabellen = enkel voor data
65

82. AFBEELDINGEN
• Google Image Search
• Alt-tag = belangrijk
• Beknopte omschrijving
• Title-tag soms ook van belang
66

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

84. CONTENT IS KING
USER GENERATED CONTENT IS KEY
Onderhouden
68

85. •Laat bezoekers het werk doen !
•Reacties
•Omgaan met negatieve reacties
•Nooit verwijderen
•Votings, reviews, tips,...
•Wikipedia
69

89. Onderhouden
MODERNE MEDIA
71

90. • Stukjes tekst met specifiek informatie
• Titel
• SEO
• Facebook ?!
METATAGS
72

91. 73

92. DELEN...
• Delen op Facebook
• Delen opTwitter
• Delen op ....
• Maak het gebruikers gemakkelijk
• Gebruik herkenbare logo’s en knoppen
74

93. VOORUITSTREVEND
• Facebook 5 jaar geleden ?
• Reacties
• Like
• Login
• Twitter
• Flickr
• Wat zal de toekomst brengen?
75

97. STATISTIEKEN
Onderhouden
78

98. • Google Analytics
• Niet enkel pageviews
• Klik events
• Bounce-rate
• Trechters
• InSite Statistieken
• Reinvigorate
• Real-time statistieken
79

99. WAT ZEKER ONTHOUDEN
Een website bouwen en onderhouden
80

100. DUS...
•“Bezint eer ge begint”
•De browser is je vriend
•jQuery is beter dan Flash
•Geen beperkingen
81

101. DUS...
•Blijf vooruitstrevend
•Content is king, user generated content is key
•Houd SEO altijd in het achterhoofd
•Meten is weten!
82

102. Een website bouwen en onderhouden
Q&A
83

103. MEER WETEN?
•Inventis.be
•@stijnj
•@WebRaider
•MacBar
84

104. Een website bouwen en onderhouden
BEDANKT!
85