Een website bouwen en onderhouden (MacBeurs 2010)

Post on 16-May-2015

683 views 0 download

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)

EEN WEBSITE BOUWEN EN ONDERHOUDEN

STIJNJanssen

2

TOMClaus

3

•Webdesign

•Webdevelopment

• Zoekmachine Optimalisatie (SEO)

• Email Marketing

•Webhosting & domeinnamen

INVENTIS

5

PORTFOLIO

6

EEN WEBSITE BOUWENEN ONDERHOUDEN

7

•Wie heeft een eigen website?

•Wie maakt zijn eigen website?

•Wie is er wekelijks bezig met zijn website?

8

•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

• Snelcursus webdesign/webdevelopment

• Hoe op nr. 1 in Google

• Hoe je slapend rijk kan worden

WAT GA JE NIET LEREN?

10

Ik wil een website, wat nu?

Of laten bouwen?

BOUWEN

12

DOELEN STELLENBouwen

13

•Wat wil ik bereiken?

•Wat doet de concurrentie?

•“Bezint eer ge begint”

•Voorbeeld

14

DE BROWSERBouwen

15

•> 5 besturingssystemen

•> 10 layout engines

•> 70 browsers

16

•Mac, Windows, Linux

•Safari, Chrome, Firefox, Internet Explorer

•WebKit, Gecko, Trident

17

A-GRADE

18

TOEGANKELIJKHEIDBouwen

19

20

21

MAAR OOK

•Mobiele toestellen

• Gebruiksvriendelijkheid

• Zoekmachinevriendelijk

• Tijdsintensief

MOBIELBouwen

22

23

•Noodzakelijk?

•Native of Web?

•Andere platformen!

24

• jQTouch

• jQuery Mobile (beta)

• Sencha Touch

MOBILE FRAMEWORK

25

OPBOUWBouwen

26

• Buzzword

• 2020

• geen CSS3

HTML5

30

HTML5 Boilerplate

31

• Plugin

• Technische kennis nodig

•Duur

• Uitgebreid

FLASH

32

• Javascript Framework

•Open Source

• Lage drempel

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

JQUERY

33

DON’TBouwen

34

• Verouderd

• Performance

• iframe

• Enkel als er geen andere oplossing is!

FRAMES

35

• Animated GIF

• Storend, afleidend

• Vaak gebruikt voor reclame

BEWEGENDE BEELDEN

37

HIT COUNTER

• Geen meerwaarde

• Enkel voor jezelf

39

• Geen meerwaarde

• Irritant

• Copyright

ACHTERGRONDGELUID

40

• Vaak in plain-text

• Ideaal voor spambots

• Hexadecimaal encoderen

E-MAILADRESSEN

41

E-MAILADRESSEN

info@inventis.be

info@inventis.be

42

SPLASH

• Bijna geen meerwaarde

• Extra klik voor de bezoeker

43

•Dode pagina

• Verwarrend voor de bezoeker

• Slechte SEO

404

45

46

http://www.clubpenguin.com/404

47

• 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

ONDERHOUDEN

49

NIEUWE CONTENTOnderhouden

50

•Verse vernieuwende teksten

•Blog

•Foto’s

•Blijf interessant en vernieuwend

51

Onderhouden

FEEDS

54

•RSS

• iCal

•Publiceer naar Facebook

•Publiceer naar Twitter

55

SEOOnderhouden

58

• Verse Teksten

•Duplicate Content

• Geen Copy/Paste

• Unieke Links

TEKSTEN

59

60

60

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

61

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

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

63

BACKLINKS

• Links van andere websites naar jouw toe

• Pagerank

•Websites met hogere pagerank die link = beter

• Scoren met kernwoorden

64

SYMANTIEK

• H1, H2, H3 voor titels

• Volgorde = belangrijk

• P voor inhoud teksten

•Overzicht H2 met Link

• Tabellen = enkel voor data

65

AFBEELDINGEN

• Google Image Search

• Alt-tag = belangrijk

• Beknopte omschrijving

• Title-tag soms ook van belang

66

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

</a>

67

CONTENT IS KINGUSER GENERATED CONTENT IS KEY

Onderhouden

68

•Laat bezoekers het werk doen !

•Reacties

•Omgaan met negatieve reacties

•Nooit verwijderen

•Votings, reviews, tips,...

•Wikipedia

69

Onderhouden

MODERNE MEDIA

71

• Stukjes tekst met specifiek informatie

• Titel

• SEO

• Facebook ?!

META TAGS

72

73

DELEN...

•Delen op Facebook

•Delen op Twitter

•Delen op ....

•Maak het gebruikers gemakkelijk

• Gebruik herkenbare logo’s en knoppen

74

VOORUITSTREVEND

• Facebook 5 jaar geleden ?

• Reacties

• Like

• Login

• Twitter

• Flickr

•Wat zal de toekomst brengen?

75

STATISTIEKENOnderhouden

78

• Google Analytics

• Niet enkel pageviews

• Klik events

• Bounce-rate

• Trechters

• InSite Statistieken

• Reinvigorate

• Real-time statistieken79

WAT ZEKER ONTHOUDENEen website bouwen en onderhouden

80

DUS...

•“Bezint eer ge begint”

•De browser is je vriend

• jQuery is beter dan Flash

•Geen beperkingen

81

DUS...

•Blijf vooruitstrevend

•Content is king, user generated content is key

•Houd SEO altijd in het achterhoofd

•Meten is weten!

82

Een website bouwen en onderhouden

Q&A

83

MEER WETEN?

• Inventis.be

•@stijnj

•@WebRaider

•MacBar

84

Een website bouwen en onderhouden

BEDANKT!

85