een website bouwen en onderhouden (macbeurs 2010)

104
EEN WEBSITE BOUWEN EN ONDERHOUDEN

Upload: inventis-web-architects

Post on 16-May-2015

685 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

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