1 WEBDESIGN met Wordpress CVO Tervuren-Hoeilaart 2015-2016 sem 1.

Presentatie over: "1 WEBDESIGN met Wordpress CVO Tervuren-Hoeilaart 2015-2016 sem 1."— Transcript van de presentatie:

1 1 WEBDESIGN met Wordpress CVO Tervuren-Hoeilaart 2015-2016 sem 1

2 2 Doelstellingen van de cursus Wat je na deze cursus kan:  (de structuur van) een webpagina ontwerpen  basiselementen voor opmaak gebruiken  beeld, geluid, video en animatie invoegen  hyperlinks maken  formulieren ontwerpen en gebruiken  plugins en widgets gebruiken  scripts gebruiken  een weblog of website onderhouden, beveiligen en publiceren

3 3 Hoe gaan we het doen?  Algemene inleiding: Internet, HTML, Webdesign  Theorie: webdesign  Praktijk: Wordpress Opdracht(en) eigen aan het lesthema Eigen webproject met verwerking lesthema(‘s)

4 4 Hoofdstuk 1: INLEIDING Internet HTML Webdesign

5 5 INTERNET Technische basis Schakeltechniek  Internet: “kind van Amerikaanse Defensie” Waarom?  Pakketgeschakeld netwerk (  Circuitgeschakeld)  Internet: open netwerkarchitectuur (netwerk)protocol: communicatiespelregels tussen computers (verbinding, transport, gegevensinterpretatie) Internet: platformonafhankelijk dankzij TCP/IP Kunnen Macintosh-computers en PC’s op het Internet met elkaar communiceren?

6 6 INTERNET Technische basis Addressering op Internet  Communicatie met het Internet: elk domein heeft een IP-adres nodig  IP-adres syntax 195.21.129.34  195.21=domein  129.34=specifieke computer binnen het domein (=host) lastig te onthouden ->woordelijke naamgeving

7 7 INTERNET Technische basis (Adressering op Internet)  Naamgeving wereldwijd uniek  interNIC coördineert naamgeving  Systematische naamopbouw  www.teddy.com www.teddy.com.com = landcode of sectorcode (.be.edu.gov …) teddy.com = verwijst naar het domein www = computer binnen het domein (webserver)  Zelfs elk bestand heeft dus een unieke locatie! www.teddy.com/catatlogus/nachtberen/art1234.jpg www.teddy.com/catatlogus/nachtberen/art1234.jpg wereldwijd bekend  dankzij Domeinnaamservers (DNS-servers) Kun je via het Internet nog een weblocatie bereiken als de DNS ervan is uitgevallen? (zie ook centralops.net)

8 8 INTERNET Diensten op het Internet  Diensten webpagina’s (zie verder) bestandsoverdracht computerbediening op afstand : telnet,… elektronische post  Dienstenoverkoepelende adressering: URL aanduiding dienstenprotocol (=communicatieprotocol)  http: webpagina’s  ftp: bestandsoverdracht een domeinnaam eventueel een bestandslocatie (padnaam en bestandsnaam)  vb: www.teddy.com/catalogus/nachtberen/art1234.jpgwww.teddy.com/catalogus/nachtberen/art1234.jpg

9 9 INTERNET HET WORLD WIDE WEB Netwerkgebaseerde hypertekst  Hypertekst (eerder hypermedia): elektronische documenten die onderling met elkaar verbonden zijn middels verwijzingen.  Webserver->-> web-cliënt (bvb. IE)  WORLD WIDE WEB  Web site = internetlocatie = verzameling webpagina’s van een bepaald domein welkompagina = home page, startpagina  Internet: geen hiërarchie, dus aanwending van zoekmachines rubrieksystemen Zijn het Internet en het world wide web synoniemen?

10 10 HTML Algemeen  Geboortejaar: 1990 (CERN)  HTML: Hypertext Markup Language protocol: http opmaaktaal die de afzonderlijke bestanddelen van een webpagina beschrijft voordeel: eenvoudige en handig (beginners en gevorderden!) nadelen en oplossingen:  verschillen tussen verschillende browsers (Netscape  MS)  standaardisering: www.w3c.org (HTML1.0 > 2.0 > 3.2 > 4.01 > 5.0 )www.w3c.org  uitgekiende opmaakopdrachten ontbreken  stijlbladen  initieel niet bedoeld voor multimedia en continu binnenstromende informatie  uitbreidingen HTML, insteekmodules (platformafhankelijk->onafhankelijk), scripting, Java, Active X, …  Nieuwe invalshoek: XHTML

11 11 XHTML De toekomst  XHTML EXtensible HyperText Markup Language  opvolger van HTML 4.01  een mix tussen HTML en XML(Extensible Markup Language)  strengere en schonere versie van HTML

12 12 HTML Webpagina’s maken en bewerken  Kladblok  HTML-editors: automatiseren van het coderen  WYSIWYG-editors (Frontpage, …)  Andere: Word, MS Office (bijv. Powerpoint,…) Voordelen WYSIWIG  intuïtieve grafische gebruikersinterface  resultaat is direct zichtbaar  controleert de geldigheid van de code  geldigheid van links en verwijzigingen worden automatisch gecontroleerd

13 13 HTML HTML-code Structuur van de opdrachten  Tags in paren Deze tekst wordt cursief weergegeven. Vanaf hier verschijnt de tekst weer normaal.  Uitzondering: alleenstaande tags Hier is er geen sprake van een afsluitende tag.  Nesting Deze koptekst is op deze positie cursief weergegeven.  Twee basistypes - tekst: bijv. … - ankers: … (hyperlinks)

14 14 HTML HTML-code Opbouw van opdrachtregels  Tags zijn niet hoofdlettergevoelig Deze tekst wordt cursief weergegeven. is hetzelfde als Deze tekst wordt cursief weergegeven.  Een of meerdere opdracht regels Deze regel bevat meerdere tags is hetzelfde als Deze regel bevat meerdere tags

15 15 HTML HTML-code Waarden toekennen aan tags Deze koptekst is rechts uitgelijnd Deze koptekst is rechts uitgelijnd. ALIGN is de opdracht RIGHT is het sleutelwoord OPGELET:  Gebruik geen spaties (mogelijke browserproblemen)  Bestandsnamen moeten tussen dubbele aanhalingstekens

16 16 HTML HTML-code Basis van een webpagina Drie containers Titel van de webpagina Inhoud van de pagina

17 17 HTML HTML-lessen  www.handleidinghtml.nl www.handleidinghtml.nl  www.homepage- maken.nl/htmlcursus/lessenoverzicht.php www.homepage- maken.nl/htmlcursus/lessenoverzicht.php

18 18 Webdesign 3 aspecten webdesign  Technische” benadering HTML, kennis (WYSIWYG) editor(s), CMS systemen  Cognitief-ergonomische benadering navigatie, schermindeling, tekstopmaak  Artistieke benadering kleurgebruik, vormgeving, aantrekkelijkheid,…

19 19 Webdesign De 10 geboden 1. Bereid eerst een structuur voor 2. Zet waardevolle inhoud op de pagina’s 3. Test de site vooraf en tijdens 4. De eerste indruk is (alles)bepalend 5. Gebruik technologie met verstand (keuze !!!!) 6. Bied keuzes, bewust en onbewust 7. Design met mate en intelligentie 8. Een heldere en consistente navigatie 9. Webdesign is dynamisch en proactief 10. En vooral niet… bijv.: vermijd drukke achtergronden die de tekst in de voorgrond moeilijk leesbaar maken, …

20 20 Bereid eerst een structuur voor  Ontwerp site stroomdiagram van inhoud + navigatie Bedrijf X Wie zijn we ? Verdelers gezocht Contacteer onsOnze produkten braadpannen ketels steakmessen

21 21 Zet waardevolle inhoud op de pagina’s !  Informatieverzameling projectmanager verzamelt digitale informatie indien groot project dan kan men werken met paginaspecimens gegevens worden éénduidig en georganiseerd verzameld Wat is mijn publiek?(kinderen,sporters…)

22 22 Test de site vooraf en tijdens  taalfouten ?(laten nalezen!)  alle links werken ?  schikking ok ?  algemeen uitzicht ?  weergave op populaire browsers ?

23 23 Gebruik technologie met verstand  zijn de programma’s om de site te maken betaalbaar ?  zijn ze handig in gebruik, ingewikkeld ?  zijn ze duurzaam, zullen ze binnen x jaar nog bestaan ?  zullen meerdere personen inhoud toevoegen aan de site ?

24 24 Bied keuzes, bewust en onbewust  alle info toegankelijk maken vanaf de homepagina (bvb. voorgerechten,hoofdschotels, nagerechten, tips & trucs…)  zorg voor overzichtelijkheid

25 25 Design met mate en intelligentie  niet teveel afleidingen (muziek…)  een ontwerp kan snel saai worden  kostprijs van design ?  makkelijk wijzigbaar ?

26 26 Een heldere en consistente navigatie  gelijkvormige menu’s  zelfde terugkerende structuur  eventueel een “sitemap”  vb. www.cvoth.bewww.cvoth.be

27 27 Webdesign is dynamisch en proactief  regelmatig up to date houden! (bv. datums, opendeurdag… )  nieuwe foto’s, berichten…  anticiperen : bv. opendeurdag reeds op voorhand op de site !

28 28 En vooral niet…  http://thebiguglywebsite.com http://thebiguglywebsite.com  http://jayj.dk/grim/ http://jayj.dk/grim/  http://www.angelfire.com/uglinesstothemax/index.ht ml http://www.angelfire.com/uglinesstothemax/index.ht ml

29 29 Keuze van tool om site te maken 3 mogelijkheden : 1. Met HTML, CSS zelf schrijven 2. Met WYSIWYG-editor maken 3. Met CMS-systeem maken

30 30 Met HTML zelf schrijven  Voordelen vrijer in het bepalen van uiterlijk controle over elk aspect van je website HTML is relatief eenvoudig te leren  Nadelen er kan veel tijd in gaan zitten HTML is beperkt in mogelijkheden, je moet ook op een goed niveau met CSS, JavaScript en PHP werken

31 31 Met WYSIWYG-editor maken  Voordelen geen kennis van HTML nodig je kunt snel online zijn met een eenvoudige website  Nadelen hebt meestal niet overal invloed op leveren vaak slechtgeschreven code op, of overbodige code

32 32 Met CMS-systeem maken  Voordelen Je hoeft geen kennis van HTML te hebben Zeer gebruiksvriendelijk Zowel voor eenvoudige als complexe sites geschikt Snel online Er zijn voor de grote CMS-en veel (gratis) thema's beschikbaar  Nadelen gebonden aan mogelijkheden en onmogelijkheden van het gekozen CMS regelmatig onderhoud, bvb updaten van het CMS en bijbehorende plugins

33 33 CMS-systeem kiezen  Een overzicht van de top 14 CMS systemen : http://www.cubrid.org/blog/dev- platform/comprehensive-overview-of-top-14-content- management-systems/  CMS systemen uittesten : http://www.opensourcecms.com/

34 34 Voordelen Wordpress WordPress is een “gratis” content management systeem (het is ontwikkeld door Matthew Mullenweg, maar wordt door een flinke groep ontwikkelaars ondersteund) WordPress Miljoenen weblogs en websites maken gebruik van WordPress. Een heel toegankelijk content management systeem (iedereen kan ermee werken). Door middel van Themes (thema’s) is de opmaak van pagina’s aan te passen.Er zijn duizenden gratis WordPress Themes te vinden op het internet Er is een grote “community” aan gebruikers die ervaring en hulp delen

35 35 Voordelen Wordpress Er zijn talloze Plugins beschikbaar die allerlei functies aan het weblog toevoegen De scripts en codering van WordPress is erg licht en zorgt dat de website snel laadtwebsite WordPress is altijd up-to-date (te houden), beveiligingslekken worden door de community snel gedicht en gelanceerd Als standaard is WordPress ontzettend SEO-vriendelijk en met de juiste Plugins en instellingen, sta je al snel hoog in de zoekmachines

36 36 Voordelen Wordpress Er zijn met WordPress heel eenvoudig koppelingen te maken met de sociale media platforms (Facebook, Twitter …) Wordpress volgt de w3c-standaarden (zodat je blog of site op alle browsers (ook in de toekomst) goed zal weergegeven worden

37 37 Nadelen Wordpress Beveiliging kan een probleem opleveren -> regelmatig updaten nodig Geen rechtstreekse technische ondersteuning bij Wordpress zelf (wel bij kleine bedrijven die Wordpress ondersteuning bieden) Minder geschikt om toe te passen in heel grote organisaties

38 38 Officiële Wordpress site Oefening : Bezoek enkele website die met Wordpress gemaakt zijn. Welke vind je erg geslaagd, welke minder ? Waarom ? http://wordpress.org/http://wordpress.org/ (doorklikken op Showcase) Ook : http://nl.wordpress.orghttp://nl.wordpress.org (in het Nederlands)

39 39 Wordpress : 2 mogelijkheden 1. Op www.wordpress.com een account maken en op de online versie meteen startenwww.wordpress.com 2. Op www.wordpress.org de software downloaden en bij je eigen provider installerenwww.wordpress.org

40 Wordpress.com  Je bent heel snel aan het werk  Je hebt geen te grote eisen op vlak van functionaliteiten en design  Steeds gratis  Vast aan aantal standaard templates (kleine aanpassingen mogelijk), mits betaling toch meer aanpassingen  Beperkt aantal plugins te gebruiken  Geen eigen plugins mogelijk 40

41 Wordpress.com  Max 35 gebruikers  Video is mits betaling mogelijk  Advertenties op je blog/site  Overbrengen van je blog of site naar wordpress.org (zelf gehost systeem) naderhand is mogelijk !! 41

42 Oefening (facultatief)  Ga naar p.18 in het handboek  Ga naar nl.wordpress.com  maak een gratis account op wordpress.com  Kies een goed blogadres (blogadres.wordpress.com)  Volg de richtlijnen van het boek  Deze account kan dienen om een en ander uit te proberen  Wij zullen kiezen voor een eigen installatie van Wordpress (via software op wordpress.org) 42

43 Wordpress.org  Webserver (provider of eigen server op je PC)  Domeinnaam (bvb. cvoth.be)  PHP 5.2.4 ondersteuning (of hoger)= server-side scripttaal  MySql 5.0 of hoger  mod_rewrite Apache-module  FTP-client op je PC  Fotobewerkingsprogramma  Wordpress software (nu 4.3) 43

44 1 e mogelijkheid :Eigen webserver op je PC  Waarom ? testdoeleinden  Surf naar www.usbwebserver.net/downloads/handleiding.pdf www.usbwebserver.net/downloads/handleiding.pdf  Lees deze handleiding  Ga naar http://www.usbwebserver.net/nl  Kies bovenaan Download  Klik op Download USBWebserver V8.6Download USBWebserver V8.6  Pak het bestand uit op je PC (of op een USB-stick)  Start de server : usbwebserver.exe 44

45 1 e mogelijkheid :Eigen webserver op je PC 45

46 1 e mogelijkheid :Eigen webserver op je PC Root dir: Door op deze knop te klikken wordt de Root map geopend. In deze map moeten alle bestanden van uw website staan (wij plaatsen daar Wordpress) Localhost: Nu word uw standaard browser geopend met localhost. In de browser kunt U nu, de door U in de rootmap geplaatste website, bekijken. PHPMyAdmin: Met deze knop word phpmyadmin geopend, hier kunt U databases aanmaken en beheren. De standaard inlog gegevens staan onder het inlog scherm. 46

47 Installatie usbwebserver op je PC 1. Download UsbWebserver en bewaar het op je pc Download 2. Pak de zipfile van UsbWebserver uit in een directory die je zelf handig vindt, bvb. c:\TestSite (of USB-stick!) 3. In c:\TestSite vind je nu 7 directories en 1 bestand 4. Start c:\TestSite\usbwebserver.exe 5. In het venster dat verschijnt, klik op 'Localhost' 6. Als het OK is, zie je nu een welkomstbericht. UsbWebserver is nu goed in werking. 47

48 Installatie Wordpress: stap 1 1. Download WordPress en bewaar dit bestand Download 2. Verwijder de directory c:\TestSite\root 3. Pak de zipfile van WordPress uit in c:\TestSite\root. Het resultaat moet zijn dat je een directory c:\TestSite\wordpress hebt 4. Hernoem c:\TestSite\wordpress naar c:\TestSite\root 5. Druk op F5 in je browser om te verversen -> Je ziet nu een WordPress-bericht dat je een configuratiebestand moet maken. 48

49 Installatie Wordpress: stap 2 1. Klik op 'Nu configuratiebestand aanmaken' 2. Je krijgt nu een welkomstbericht. Druk op 'Lets go' 3. Je krijgt nu een invulscherm. Vul deze 3 dingen in: Database: test User name: root Password: usbw 4. De andere twee zijn al goed. Druk op submit 5. Je ziet nu een bevestiging dat de database gevonden is. Druk nu op 'Run the install' Je zit nu in de installer van WordPress 49 WP Installer

50 1ste mogelijkheid: AMPPS webserver op je PC  Waarom ? testdoeleinden  Surf naar www.ampps.comwww.ampps.com  Ga naar Downloads (kies Win of Mac OSX)  Sla het installatiebestand op  Start de installatie en doorloop de standaard stappen  Start de webserver (knoppen PHP en MySQL) 50

51 1ste mogelijkheid: AMPPS webserver op je PC 51

52 Wordpress installeren op AMPPSserver  Op de ampps server staan vele “installatiescripts”  Surf naar: localhost/ampps  Klik op Blogs, Wordpress  Klik dan op de blauwe knop Install 52

53 Wordpress installeren op AMPPSserver 53

54 Wordpress installeren op AMPPSserver 54

55 Wordpress installeren op AMPPSserver 55

56 Wordpress installeren op AMPPSserver 56

57 2 e mogelijkheid :Eigen webserver op je PC: Instantwordpress installeren 57  Ga naar www.instantwp.comwww.instantwp.com  Kies Download Now en sla het bestand op waar je de WP-installatie wil gebruiken (bvb. je USB-stick)  (Zet nu eventueel even je antivirusprogramma uit)  Start het programma InstantWP.exe en kies een map waarin je WP wil installeren  klik op de Install knop -> Instant WP wordt geïnstalleerd

58 InstantWP kenmerken  Instant WordPress is volledig “portable” en draait vanuit de map waarin het geïnstalleerd werd.  Instant WordPress kan dus op een USB-stick geïnstalleerd worden en draait dan vanop die stick.  De map waarin je Instant WordPress installeert kan worden herbenoemd en Instant WordPress zal dan op dezelfde wijze van daaruit functioneren -> je kan meerdere installaties op je PC (of USB-stick) plaatsen ! 58

59 InstantWP.exe starten 59

60 InstantWP : taal vh Dashboard -> Nederlands 60

61 InstantWP : taal vh Dashboard -> Nederlands 61

62 H3 Werken met WordPress : Dashboard  Admin-bar : zwart  Inloggen : ketkroket.co.nf/wp-admin 62

63 Dashboard 63

64 Wordpress blogs zoeken Bvb. Blogs over koken 64

65 Oefening : Wordpress instellingen  Doe de algemene instellingen (uur, datumnotatie, titel …)  Doe de commentaar instellingen  Stel permalinks in (p.32)  Maak één extra gebruiker aan, geef deze als rol redacteur OPGELET : deze moet een eigen e-mailadres hebben ! 65

66 Oefening : Wordpress instellingen 66

67 Oefening : Wordpress instellingen 67

68 Gebruikersrollen  Beheerder Alle rechten Enkel jezelf beheerder maken  Redacteur beheert enkel de inhoud van je site kan berichten en commentaren van anderen wijzigen of verwijderen  Auteur Kan berichten schrijven, activeren Kan enkel eigen geplaatste inhoud wijzigen 68

69 Gebruikersrollen  Schrijver Kan bericht schrijven maar niet activeren Een beheerder of redacteur moet tussenkomen om de berichten te activeren -> controle (censuur?) van inhoud  Abonnee Een lid van je site/blog Nuttig als je hebt ingesteld dat alleen geregistreerde gebruikers reacties mogen geven 69

70 Tip  Werk met Chrome of Firefox  Opgelet : InstantWP werkt enkel met IE  Zet tabs open 70

71 H4 Themes  theme = template  = verzameling bestanden -> waar komt wat te staan, kleuren, lettertypes …  Standaard themes : twenty ten, twenty eleven …  Nu : twenty fifteen  Types : gratis, premium (€), op maat (€€) 71

72 H4 Themes  wordpress.org/extend/themes 72

73 H4 Themes 73

74 H4 Themes 74

75 H4 Themes  Gratis themes op Wordpress-site : veilig, gecontroleerd, voldoen aan minimumeisen, vrij van malcode  OOK : onveilige gratis themes !  Deze installeren een soort virus op je site  www.smashingmagazine.com (soms gratis WP- themes) www.smashingmagazine.com 75

76 H4 Themes  Oefening : lees bij plugins op www.smashingmagazine.com het artikel: www.smashingmagazine.com 76

77 H4 Themes  Oefening : bezoek de webpagina van het theme NeueGrafik 77

78 Commerciële themes  Support (vragen…)  Goede documentatie,handleidingen  Eenvoudig aan te passen  Goed grafisch ontwerp  Check eerst wat anderen (online)over een theme zeggen  Terms & conditions 78

79 Commerciële themes  www.wpremix.com (75$) www.wpremix.com  www.woothemes.com (2 stuks aan 70$) www.woothemes.com  www.diythemes.com (Thesis 87$) www.diythemes.com  www.themeforest.net marktplaats voor aanbieders; aparte WP-sectie (60€/stuk) www.themeforest.net  www.elegantthemes.com (35€/jaar) www.elegantthemes.com 79

80 Theme op maat  Uniek design  wordpress.startpagina.nl 80

81 Themes installeren 1. Downloaden in zip-formaat 2. Dashboard,Weergave,Thema’s 81

82 Themes  Via de link Live voorbeeld kan je je site/blog bekijken met het nieuwe thema  Kies het Twenty Twelve thema en activeer het  Kijk na wat je zoal kan aanpassen (is afhankelijk van de bouw van het thema)  Aanpassen is steeds mogelijk : kennis HTML, CSS, PHP nodig 82

83 Berichten 1. Categoriën maken om je berichten een logische indeling te geven-> deze komen later in de zijbalk terecht 2. Instellingen doen voor berichten (=posts=artikels) 3. Voorbeelddata vanuit installatie verwijderen 83

84 Berichten ; Categoriën instellen  Om je berichten een logische indeling te geven 84 Wij kozen ervoor dat deze slugs niet voorkomen in onze permalinks->mag leeg blijven

85 Categoriën instellen 85

86 Categoriën instellen Oefening : 1. Maak de 5 categoriën zoals in het boek op p.44 2. Verander de naam van de catergorie “Geen categorie” in “Nieuws” 3. Maak 3 berichten in 3 verschillende categorieën en geef ook telkens een tag (trefwoord) 4. Bekijk de berichten op je website om te zien of je de categorieen ziet 86

87 Instellen voor berichten schrijven 87

88 Instellen voor berichten: geen reacties! 88

89 Instellen voor berichten schrijven 89 Check de nodige gegevens bij je provider, maak een nieuw e-mailadres aan speciaal hiervoor !!

90 Instellingen van GMail 90

91 Bericht = Post = Artikel ≠ Pagina  Bericht=post=artikel : komt bovenaan te staan in “blogformaat”, horen bij een categorie  Pagina : een webpagina die soms ook via het menu bereikbaar is  Tags = trefwoorden (kan op gezocht worden)  Afbeeldingen (verkleinen via image resizer, powertools…), voor onze gratis hosting max. 2MB per afbeelding !  Lorem ipsum (dummy tekst): nl.lipsum.com 91

92 Tags - Categoriën  Categorieën soort van hoofdstukken van je site/blog Meestal slechts enkele Hiërarchische structuur Vbn: honden, katten,konijnen…  Tags Trefwoorden Zoals indexpagina’s van boek Tientallen tot honderden Vbn: golden retriever, herkomst, stamboom, ziektes… 92

93 Waar foto’s halen ?  Vanop het web opgelet : copyright wetgeving !  Zelf maken (kwaliteit ?!)  http://www.onextrapixel.com/2013/09/20/10-top- providers-of-stock-images-a-useful-and-fresh-list/ http://www.onextrapixel.com/2013/09/20/10-top- providers-of-stock-images-a-useful-and-fresh-list/ 93

94 Foto’s bewerken  Via de ingebouwde mogelijkheden van WP  Met een fotobewerkingsprogramma Photoshop (€€€) gratis: Gimp Photofiltre : http://photofiltre.free.frhttp://photofiltre.free.fr Paint.net 94

95 Oefening : Photofiltre  Download en installeer Photofiltre (Engelse versie http://photofiltre.free.fr/frames_en.htm ) http://photofiltre.free.fr/frames_en.htm Neem versie 7.1.2 Lessen PF : www.oudje.nl/pf/index_67.htmlwww.oudje.nl/pf/index_67.html  Probeer een foto te bewerken : grootte (aantal pixels), bijsnijden, filters toepassen (menu Filter, RMK…)  Probeer (met knop T) een text toe te voegen op een afbeelding  Toon het resultaat aan de lkr. 95

96 Photofiltre : header maken 96

97 Photofiltre : header maken 97 960 px = typische waarde voor schermbreedte -> de hoogte zou dan ongeveer een 200-tal px moeten worden Via RMK, crop image de afbeelding bijsnijden.

98 Photofiltre : header maken 98 Kies een lettertype (liefst schreefloos !), kies een grootte, typ de tekst en klik op OK. Verschuif deze tekst met de pijltjestoetsen !

99 Eerste bericht  Dashboard, Berichten, Nieuw bericht  Geef titel op  Lang bericht : Opslaan als concept !  Kies categorie, tags (= keywords ; zelfstandige naamwoorden of werkwoorden)  Eventueel : Lees meer functie 99

100 Berichtvenstermaat aanpassen 100

101 Extra werkbalk voor opmaak 101

102 Extra werkbalk voor opmaak 102

103 Werken met afbeeldingen  Plaats cursor op plaats voor afbeelding  Klik op knop “Media toevoegen”  Even wachten voor upload !  Vul Titel en Alt-tekst in (-> beter voor zoekmachines)  Eventueel onderschrift (=caption) 103

104 Werken met afbeeldingen 104

105 Werken met afbeeldingen:bijlagepagina 105

106 Werken met afbeeldingen: afmeting  Meestal 1200 pixels breed genoeg ! DUS : EERST verkleinen met een fotobewerkingsprogramma !  WP zal elke foto in 3 formaten uploaden  WP upload wel ook het volledige formaat → plaatsverspilling op hostingruimte TIP : gratis foto’s op www.pixabay.comwww.pixabay.com 106

107 Werken met afbeeldingen: bewerken 107

108 Afbeeldingen bewerken:Mediabibliotheek 108 Komen op geen enkele pagina of bericht voor.

109 Afbeeldingen bewerken: 109

110 Afbeeldingen bewerken: 110

111 Fotogalerij toevoegen Oefening :  Zoek 6 foto’s die met jouw onderwerp te maken hebben (www.pixabay.com)www.pixabay.com  Maak een nieuw bericht en plaats deze 6 foto’s als fotogallerij hierin  Ga het resultaat bekijken  Verander de volgorde van de foto’s 111

112 Media instellingen  Bij Instellingen, Media kan je instellen hoe groot de thumbnails van een fotogalerij dienen te zijn 112

113 Tip: foto’s in batch herschalen 113

114 Video toevoegen  Opgelet copyright !  Gewoon een link plaatsen : Bvb: http://www.youtube.com/watch?v=L9-YSL kwTk8 (OPGELET ! Je moet de hyperlink verwijderen !) -> bezoeker komt op Youtube terecht 114

115 Video toevoegen 115

116 Oefening :Video downloaden 1. Zoek een video op (Youtube, Vimeo …) 2. Surf naar clipconverter.cc 3. Plak daar de URL van de video 4. Kies een formaat voor omzetting 5. Zet enkel de eerste 10 seconden om ! 6. Download de omgezette video 7. Plaats deze in een nieuw bericht op je site 8. Toon het resultaat aan de leerkracht 116

117 Video in bericht  Maak nieuw bericht  Klik Media toevoegen  Kies het in te voegen filmpje  Kies hoe je wil invoegen 117

118 Video in bericht 118

119 Media bibliotheek  Lijst van alle foto’s,video’s, geluiden Gerangschikt per type Je kan filteren op periode van invoeren Zoekfunctie Gebruik logische namen en titels (ook beter voor zoekmachines)  Je kan vanuit berichtvenster een afbeelding meermaals gebruiken  Op tijd opruimen van ongebruikte media ! (via link : Permanent verwijderen) 119

120 Statische pagina’s (=Pagina’s)  titel, body tekst, foto’s …  geen deel van chronologische stroom  geen categorieën, geen tags  kunnen hiërarchie hebben (je kan pagina’s onder een andere pagina onderbrengen door die pagina “hoofd” te maken 120

121 Statische pagina’s (=Pagina’s) Pagina-attributen:  Hoofd - Je kunt de pagina's in hiërarchieën onderbrengen (nesten). Bvb. een “Over mij” pagina met daaronder de pagina's “Levensverhaal” en “Mijn hond”. Geen limieten op het aantal niveau's.  Template - Sommige thema's hebben aangepaste templates voor bepaalde pagina's met extra functies of aangepaste lay-outs. Als dit het geval is, vind je deze in dit dropdown menu. 121

122 Statische pagina’s (=Pagina’s) Pagina-attributen: Volgorde - Pagina's zijn standaard op alfabetische volgorde gesorteerd (waarde 0) Je kan hier je eigen volgorde kiezen door een nummer in te voeren (1 voor de eerste enz.). Opmerking : schakel het geven van reacties eventueel uit voor pagina’s ! 122

123 Oef: Statische pagina als homepage  Maak een pagina als statische pagina(Welkom), voeg deze pagina toe aan je menu 123

124 Oef: Statische pagina als homepage  Je kan voor deze pagina ook het sjabloon standaard kiezen (bij de pagina attributen) -> er is dan ook op je startpagina een rechter sidebar 124

125 Menu’s 125

126 Menu’s : Testpagina 5 toevoegen 126

127 Menu’s : Testpagina 5 toevoegen 127 verslepen naar wens

128 Menu’s : Testpagina 5 toevoegen 128

129 Menu’s 129

130 Oefening : menu maken  Maak een soortgelijke menustructuur :  KMI : een link naar www.kmi.bewww.kmi.be  CULINAIR ITALIË : een link naar deze categorie (of één van jouw categorieën)  Hoe verander je het infolabel bij een menu-item? 130

131 Eén van de menu items als blog  Maak een categorie met bvb.naam “Nieuws”  Plaats deze categorie in je menu  Telkens je dan een nieuw nieuwsbericht wil posten doe je dat in de categorie “Nieuws” -> dit komt dan bovenaan bij de berichten die men bekomt door klikken op “Nieuws” in het menu  Je hebt dan een blog onder één menu-item gemaakt 131

132 Menu’s 132

133 Menu’s in andere thema’s  Niet alle thema’s ondersteunen het simpelweg “verschuiven” van menu –items (dit verschuiven werkt pas wanneer het vinkje is aangevinkt !)  Voor die thema’s moet je telkens je een nieuwe pagina maakt, opgeven welke pagina het hoofd hiervan is (in attribuut:Hoofd) 133

134 Widgets  Stukje software om bv. de “sidebar” te vullen  Bvb. Links naar andere sites (blogroll)  Overzicht vd. categorieën  Archief  Zoekfunctie  Overzicht nieuwste berichten  Overzicht recentste reacties  Een kalendertje  … 134

135 Widgets 135 Plugin “Links” zit nu standaard in WP 3.8.1

136 Oefening 1 : Widgets Ga naar Dashboard, Weergave, Widgets Breng in de sidebar van je thema volgende widgets aan :  Een kalender Waarvoor dient dit ?  Een tagwolk Waarvoor dient dit ? 136

137 Oefening 2 : Widgets Ga naar Dashboard, Weergave, Widgets Breng in de sidebar van je thema volgend widget aan :  Een lijstje met handige links met linkcategorie “Handige links”: Weerbericht (www.kmi.be) Verkeer (www.verkeercentrum.be) Nieuws (news.google.be) Beurs (www.beursduivel.be) 137

138 Widgets  Via Dashboard, Weergave, Widgets  Volgens thema : één of meerdere sidebars of plaatsen om widgets te zetten  Twenty-twelve thema: hoofd sidebar (rechts) Indien homepage= een statische pagina :  Linksonder: 1ste widgetgebied homepagina  Rechtsonder: 2 de widgetgebied homepagina 138

139 Widgets : oefening 3  Plaats een tekstwidget in de Hoofdpagina sidebar van je website (geef wat relevante tekst in).  Verwijder het widget “Recente reacties”  Verwijder het widget “Meta” 139

140 Plugins  Voegen functies toe aan je WP-site  =klein programma op WP  Soms hoort er een Widget bij, want je moet de nieuwe mogelijkheid ergens kunnen tonen (plaatsen) 140

141 Oef.1  Installeer de plugin “Styles” (van Brainstorm media) en ook de plugin “Styles:Twenty Twelve” en activeer hen beide  Waarvoor dienen deze plugins ?  Maak enkele aanpassingen aan je site/blog  Bekijk het resultaat 141

142 Oef.2  Installeer Google Analytics (kies de versie van Joost de Valk)  Check voor de installatie enkele Details over deze plugin (is hij nog geschikt voor de huidige WP versie …?)  Activeer de plugin  Initialiseer het gebruik van Google Analytics op https://www.google.com/analytics/, link Aanmelden https://www.google.com/analytics/ 142

143 Oef.2 143

144 144

145 Info over gebruik Google Analytics  https://moz.com/blog/absolute-beginners-guide-to- google-analytics https://moz.com/blog/absolute-beginners-guide-to- google-analytics 145

146 Oef.3  Waarvoor dient de plugin “Download monitor”?  Goed alternatief op Akismet : Growmap Anti Spambot Plugin  Installeer (indien je wenst) de plugin “Social share buttons” of een alternatief hierop  Gebruik deze plugin om op elke pagina snelkoppelingen te zien naar Facebook en Twitter 146

147 Oef.4 : Contactformulier  Maak een pagina met naam “Contact”  Plaats deze pagina in je hoofdmenu  Installeer de plugin “Contact Form 7”  Geef een e-mailadres in waarnaar het formulier moet worden opgestuurd  Plak de nodige code in de pagina “Contact”  Test het formulier uit 147

148 Oef.4  Pas het standaardformulier aan zodat het resultaat er zo uitziet, zorg ook voor het sturen van ALLE door de bezoeker ingevulde gegevens ! 148

149 Oef. 4 : instellingen Contact Form 7 149 Het adres waar de reacties moeten toekomen

150 Oef. 4 : instellingenContact Form 7 150 Zelf typen ! De opgegeven codes gebruiken om de ingevoerde gegevens weer te geven !

151 Oef. 4 : instellingen Contact Form 7 151 Zelf typen Cursor plaatsen en klikken

152 Oef. 4 : instellingen Contact Form 7 152

153 Een plugin om de footer tekst aan te passen 153

154 154 TABELLEN : Definitie en nut  tabellen = een bijzonder krachtig opmaakmiddel  tabellen bestaan uit verschillende elementen: horizontale rijen verticale kolommen cellen (waar rijen en kolommen kruisen)  tabelopmaak mogelijk voor: elke afzonderlijk element (bijv. celopvulling,... ) voor de tabel als geheel (bijv. uitlijning, rand, …)

155 Oef.6  Zoek een goede plugin om tabellen in WP te voegen 155

156 Oef.6 : oplossing 1 Installeer “Easy table” met code : [table caption="Prijzentabel" width="400" colwidth="50|100|50" colalign="left|left|center"] periode,prijs/week,prijs/dag laagseizoen, "€" 800,"€" 180 middenseizoen,"€" 1000,"€" 200 hoogseizoen,"€" 1300,"€" 250 [/table] resultaat : 156

157 Oef.6 : oplossing 2 Installeer “Ultimate TinyMCE”, klik Instellingen en activeer de knop voor tabellen : Ga naar een pagina of bericht en gebruik de knop om een tabel in te voegen : 157

158 Oef.6 : oplossing 3 Installeer “TinyMCE Advanced”, klik Instellingen en sleep de knoppen voor tabellen naar de knoppenbalk: 158

159 Oef.6 : oplossing 3  Kolombreedte aanpassen met knop ‘Tabelcel eigenschappen’ (3 de van links)  TIP : geef tabelbreedte in % (totaal moet 100% zijn) 159

160 160 FORMULIEREN

161 161 Inleiding formulieren  om informatie aan de bezoeker te vragen  formulierelementen kunnen gewone tekstinhoud, opmaak en speciale formuliercontrols bevatten  bezoekers vullen gegevens in en versturen ze  de gegevens worden dan verwerkt vb. www.ivobrugge.be/Cursusweb/html4/formulieren.aspwww.ivobrugge.be/Cursusweb/html4/formulieren.asp

162 162 Verwerken van de gegevens  gegevensverwerking = opzoeking in een database, wegschrijven in een database, uploaden van bestanden, versturen via email,...  gegevensverwerking kan gebeuren: 1. client-side : Javascript, VBScript 2. server-side : ASP, ASP.net, PHP… (je hostingprovider moet dit wel ondersteunen!)

163 163 “Client-side” vs “Server-side”

164 164 Formulieren maken  via HTML (verwerking is moeilijk)  via een plugin : Contact Form 7, …  op websites : ZOHO Creator creator.zoho.com (max. 1000 records)creator.zoho.com Google Docs (je hebt een Gmail adres nodig)

165 165 Formulieren maken : oef. Google Docs  Maak een Gmail account aan  Log in op je Gmail, kies als app : Google Drive  Kies maken, Formulier  Ontwerp je formulier  Ga naar Bestand, Insluiten  Plak de iframe code in je pagina waar het formulier moet komen (in het stuk text) NADEEL : veel Google disclaimers onderaan formulier OPLOSSING : plugin “Google Forms”

166 166 Formulieren maken : oef. Google Forms  Installeer plugin “Google Forms”en kies Add new Google Form  Ga naar de formulierontwerppagina en kies “Formulier verzenden”

167 167 Formulieren maken : oef. Google Forms

168 168 Formulieren maken : oef. Google Forms Om naar die Confirm URL pagina te gaan ter bevestiging !!

169 169 Formulieren maken : oef. Google Forms

170 Nog een nuttige plugin :  Disable comments (door Samir Shah :om commentaarmogelijkheid weg te nemen bij posts of pagina’s of media) 170

171 Onderhoud : WP update 171

172 Onderhoud : thema update 172

173 WP Backup maken  Backup nodig van : WP database Alle gegevens  Noodzakelijk : een eenvoudig proces  Vele plugins beschikbaar 173

174 Oefening : WP Backup maken 174 Installeer en activeer bovenstaande plugin (van Michael De Wildt) Maak een gratis Dropbox account Ga naar de instellingen van WPB2D Geef bij Backup Settings toelating (autorization) tot je Dropbox start bij Backup Monitor een backup

175 Oefening : WP Backup maken 175  Hoe de backup terugzetten (restore) ? http://www.mikeyd.com.au/2011/10/26/restoring- wordpress-from-a-backup-to-dropbox-using-cpanel-and- phpmyadmin/

176 FTP-client installeren  Filezilla (zowel voor Win als Mac !)  Download en installeer Filezilla 176

177 Host voor Wordpress kiezen  bvb. www.one.com …www.one.com  Oefening : ga na of One een geschikte host zou zijn ? Kostprijs ?  Oefening : zoek een goede gratis hosting provider die geschikt is voor Wordpress !!  Oefening : maak een account aan bij deze gratis hosting provider 177

178 Gratis hostingprovider 178

179 Gratis hostingprovider  Gratis domeinnaam van de vorm : www.jouwkeuze.co.nf  Eerst een hostingplan kiezen, dan in het controlepaneel, register free domains 179

180 Gratis hostingprovider 180

181 Gratis hostingprovider 181

182 Gratis hostingprovider 182

183 Gratis hostingprovider 183

184 Gratis hostingprovider:domeinnaam 184

185 Gratis hostingprovider:database 185 Klik eerst op Database manager in het dashboard van biz.nf

186 Gratis hostingprovider 186 Er zijn nog geen data overgebracht naar de webruimte, dus surfen naar ketkroket.co.nf levert onderstaande pagina. We moeten nu Wordpress installeren op de gratis webruimte.

187 FTP-account 187

188 FTP-account: gegevens voor Filezilla 188

189 FTP-sessie in Filezilla starten 189

190 FTP-sessie in Filezilla : verbinding ! 190

191 Overzicht  Hosting account bij biz.nf gemaakt met : Gebruikersnaam, passwoord (om in te loggen op het dashboard van biz.nf) Domeinnaam (eventueel subdomein(en)): bv. ketkroket.co.nf FTP hostnaam, FTP username, FTP password (om in te loggen met Filezilla) Databasegegevens (database name, database username, database password) 191

192 Wordpress installeren  Downloaden (nl.wordpress.org)  Uitpakken in map op je PC 192

193 Wordpress installeren Openen in Wordpad 193

194 Wordpress installeren Invullen in Wordpad 194

195 Wordpress installeren 195 plakken

196 Wordpress installeren 196

197 Wordpress installeren :wp-config.php  Engelstalige tutorials http://wp.tutsplus.com/tutorials/security/conquering- the-wp-config-php-file-11-good-practices http://www.noupe.com/wordpress/mastering-wp- config-php-tips-tricks-and-tweaks-74001.html 197

198 Wordpress installeren op webserver 198

199 199

200 200

201 201

202 Wordpress thema aanpassen  basiskennis nodig van HTML en CSS  een editor nodig (zoals notepad++) of plugin WP Editor (Beljamin Rojas)  handig hulpmiddel : Firebug (op Firefox)  Child theme maken is nodig, anders zullen wijzigingen bij een update vh thema verloren gaan 202

203 Child theme maken  Ga naar map waar wp thema’s staan en maak daar een map met naam : themanaam-child 203

204 Child theme maken  Maak in deze map themanaam-child een bestand aan (met bv. het kladblok) met onderstaande inhoud, en sla het op met naam style.css 204 Aangepaste CSS-code t.o.v. gewone thema

205 Wordpress thema aanpassen  basiskennis nodig van HTML en CSS Nederlands : http://www.handleidinghtml.nl/ www.webontwikkelaar.nl/css/cursus Engels : www.htmldog.com www.codecademy.com 205

206 Oefening :  Installeer de plugin Firebug in Firefox (  Surf naar www.cvoth.be en probeer de titel lettergrootte op 20px te zettenwww.cvoth.be  Probeer de tekst van het menu wit te zetten (#fff)  Probeer de achtergrondkleur van het vakje “zoek” op groen te zetten  Zoek met een zoekrobot een manier om in de voettekst (footer.php) die vermelding “Ondersteund door Wordpress” weg te krijgen 206

207 Footer aanpassen : credits weghalen  Zet in deze map themanaam-child een aangepaste versie van bestand footer.php aan (met bv. het kladblok of via de plugin WP Editor) 207 Aangepaste CSS-code t.o.v. gewone thema

208 Footer aanpassen : credits weghalen 208 In de plaats gekomen van

209 209 Hoofdstuk 8: Hyperlinks en navigatie

210 210 HYPERLINKS Soorten links – Links waarheen?  Links binnen dezelfde pagina = blad-wijzers (=bookmarks, anchors, ankers)  Links naar een andere pagina van je site  Links naar het begin of einde van je pagina  Links naar bestanden Als het een eigen bestand is: zorg ervoor dat het aan de huidige website is toegevoegd !Waarom?  Links naar WWW-adressen  Links naar e-mailadressen  Links naar andere Internetadressen (bijv. FTP)

211 Veiligheid  Akismet  of Growmap Anti Spambot Plugin (gratis)  WP Security scan 211

212 Backup  Duplicator  Wordpress backup to Dropbox 212

213 SEO optimalisatie  Plugin : Yoast SEO  Google Analytics by Yoast 213

214 Nuttige plugins  P3 Profiler Meet met de P3 profiler welke plugins de meeste impact hebben op je laadtijd !  Broken link checker Check bij livegang of alle links op je website nog wel werken. Mis je niks, zijn alle externe pagina’s nog bereikbaar? Je krijgt een mailtje als een link niet meer werkt. 214

215 InstantWP migreren naar hostingprovider Overzicht van de procedure 1. InstantWP starten en de plugin “Duplicator” installeren 2. Een Archive-pakket maken van de InstantWP installatie 3. Archive-pakket en installer op je bureaublad opslaan 4. Een MySQL database maken op je webserver 5. Het archive- en installerpakket via FTP naar je webserver overbrengen 6. Naar de installer surfen en het pakket op je webserver installeren 7. Je WP-website beveiligen na de migratie 215

216 InstantWP migreren naar hostingprovider 1. Ga naar je Dashboard en installeer de plugin “Duplicator” ; Activeer deze plugin. 216

217 InstantWP migreren naar hostingprovider 2. Maak een nieuw duplicaat door in het menu Duplicator, Packages, knop Create New te klikken (vul een naam in) en klik op Next, na de scan klik je op de knop Build : 217

218 InstantWP migreren naar hostingprovider Je bekomt een Archive-pakket en een installer-pakket. Klik op de link All Packages : 3. Sla zowel het Installer-pakket als het Archive- pakket(zip) op je Bureaublad op (door erop te klikken). 218

219 InstantWP migreren naar hostingprovider 4. Sla zowel het Installer-pakket als het Archive-pakket (zip) op je Bureaublad op (door één voor één erop te klikken en te kiezen voor Opslaan als). Deze 2 bestanden staan nu op je bureaublad : 219

220 InstantWP migreren naar hostingprovider Deze 2 bestanden moet je via een FTP-sessie overkopiëren naar de juiste map van jouw webserver. (Dit is dikwijls de root map van jouw domein, dus gewoon de eerste map op jouw domein) Je gebruikt hiervoor een FTP-client (bv. Filezilla) 220

221 InstantWP migreren naar hostingprovider 5. Surf naar de plaats waar deze 2 bestanden staan : Achter Requirements moet staan :Pass (dan is aan alle voorwaarden voldaan) 221

222 InstantWP migreren naar hostingprovider 6. Vul onderstaand scherm in en klik op Test connection. 222

223 223

224 InstantWP migreren naar hostingprovider 6. Vervolg : Als alles OK is krijg je het bericht : Validation succesfull. Klik dan op de knop Run Update (de eigenlijke installatie van jouw WP-website gebeurt nu op jouw webruimte). Verwijder nu uit de WP-root map volgende 2 bestanden : install.php install-data.sql Dit kan je doen met Filezilla (klik op de bestanden met de RMK en kies Verwijderen). 224

225 InstantWP migreren naar hostingprovider 225

226 7. InstantWP vlak na migratie beveiligen 1. Wijzig de administratornaam (die is nu “admin” vanuit InstantWP) Installeer daarvoor de plugin “Admin renamer extended” van Ramon Fincken en activeer deze plugin. Klik op de knop Settings en kies een nieuwe naam voor de administrator ! Onthoud deze naam. 2. Wijzig de “Unieke Sleutels” in je wp-config.php file met de plugin “Update Unique Keys” (Brian Passavanti). Opgelet : na het wijzigen vd. Sleutels moet je uitloggen en terug inloggen op je Wordpress. 226

227 Update alle URL’s  Installeer de plugin “Velvet Blues Update URLs” en activeer (dit w in principe reeds gedaan door Duplicator)  Kies in menu Extra, Update URLs en vul in: 227

228 7. InstantWP migratie beveiligen 3. Wijzig het administrator passwoord (is in principe al gedaan bij Duplicator) Ga in je Dashboard naar Gebruikers, Je Profiel en vul daar een nieuw wachtwoord in (dit wachtwoord was immers “password” in de InstantWP installatie op onze USB-stick) 4. Beveilig je site met de “iThemes Security” plugin. Ga naar het Security menu (links in Dashboard). Kies voor “Your table prefix should not be wp_” en kies een andere tabel prefix. Kies dan “Your WordPress header is showing too much information...” en los dit probleem op door aan te vinken “Remove Wordpress generator meta tag”. 228

229 InstantWP migreren naar hostingprovider Installeer eventueel All In One WP Security & Firewall. Deze plugin is gelijkaardig aan iThemes Security maar instellingen zijn eenvoudiger. 229

230 ALTERNATIEVE METHODE : Site migreren naar andere hostingprovider Er zijn 3 lokaties betrokken : 1. De oude hostingprovider (vb. ketkroket.co.nf) 2. Jouw eigen PC 3. De nieuwe hostingprovider (vb. www.jouwdomein.be) Vooraleer te beginnen moet je ALLE technische info en paswoorden kennen van beide hostingproviders. 230

231 Site migreren naar andere hostingprovider De methode is ook goed om je domeinnaam te veranderen, wil je alleen van provider wisselen, laat dan alleen de domeinnaam wijzigen achterwege… 1. Verwijder statistiek plugins (bvb. Google Analytics) 2. Maak een reservekopie van je hele WP installatiemap 3. Maak een backup van je MySQL Database via het control panel van je hostingprovider, liefst via PHPmyAdmin en download die backup naar de harde schijf van je PC. 4. WP op nieuw domein installeren 231

232 Stap 2 : Kopie van hele WP-map 232

233 Stap 3: backup van je MySQL Database 233

234 Stap 3: backup van je MySQL Database 234

235 Stap 3: backup van je MySQL Database 235

236 Stap 3: backup van je MySQL Database 236

237 Stap 4: WP op nieuw domein installeren 237 Zorg voor een nieuw domein en bijbehorende hosting met een MySQL Database (bvb. one.com) Installeer daar een schone nieuwe versie van WordPress via de normale installatie procedure, en gebruik daarbij dezelfde WordPress tabel naam als je oude site! Meestal zal die wp_ zijn. Dit is van belang in verband met de import die je later gaat doen. Opgelet: in deze presentatie koos ik : wp2100_ Controleer of alles naar behoren werkt

238 Stap 5 : de site overzetten  Kopieer alle bestanden van je oude site via FTP naar je nieuwe site, behalve je wp-config.php bestand!! Want je gaat naar een nieuwe database toe!  Via PHPMyAdmin moet je nu alle tabellen verwijderen uit de nieuwe database (Verwijder/Drop)  OPGELET:nu eerst het sql bestand openen met Wordpad en CREATE DATABASE `report_wrdp1` DEFAULT CHARACTERSET latin1 COLLATE latin1_swedish_ci; USE `report_wrdp1`; verwijderen. De wijziging Bewaren.  Importeer nu de backup van je oude MySQL database via de importfunctie van PHPMyAdmin. 238

239 Stap 5 : de site overzetten Via PHPMyAdmin alle tabellen verwijderen uit de nieuwe database 239

240 Verdere stappen  Na de import moet je nog wat wijzingen aanbrengen: URL van je site in de tabel wp_options (of die met je eigen prefix) wijzigen naar de nieuwe domein URL Verhuizing afronden  Inloggen op je nieuwe site met je oude inlog gegevens! Tenslotte heb je nu weer je oude site terug.  Bij Instellingen -> Algemeen -> Adres van je WordPress site wijzigen  Plugins nalopen en indien noodzakelijk paden updaten naar de nieuwe URL (Bijvoorbeeld bij DB-Manager)  Controleren of de site en alle berichten goed te bereiken zijn en de layout klopt.  Installeer de plugin: http://wordpress.org/extend/plugins/search-and-replace/ en zoek daarmee naar alle oude URLs en laat die wijzigen naar je nieuwe URL! Dit zorgt ervoor dat echt alle oude verwijzingen omgaan naar je nieuwe domein. Optioneel  Als dat goed werkt, dan kun je nu op de oude site een 301 redirect plaatsen in je.htaccess file zodat alle verkeer nu omgeleid wordt naar de nieuwe site. Bijvoorbeeld:  redirect 301 / http://example.com  De / zorgt ervoor dat alles door gestuurd wordt naar je nieuwe domein naam, in dit geval http://example.com  En natuurlijk direct een goede backup maken van je nieuwe site inclusief je database 240

241 URL van je site in de tabel wp_options (of die met je eigen prefix) wijzigen naar de nieuwe domein URL 241

242 Bij Instellingen -> Algemeen -> Adres van je WordPress site wijzigen 242

243 Installeer de plugin:  http://wordpress.org/extend/plugins/search-and- replace/  zoek daarmee naar alle oude URLs en laat die wijzigen naar je nieuwe URL! Dit zorgt ervoor dat echt alle oude verwijzingen omgaan naar je nieuwe domein. 243

244 244 Scripting

245 245 Scripting Definitie en doel  aanvulling op HTML (statische pagina's, informatie aanbieden) -> scripts = programmeertalen die extra functionaliteit toevoegen aan een webpagina die door HTML niet wordt geboden, dus INTERACTIVITEIT  kunnen enkel uitgevoerd worden door het programma waarvoor ze geschreven zijn (web browser) programma's geschreven in een ‘echte’ programmeertaal

246 246 Scripting Soorten scripts Er zijn twee mogelijkheden: 1. Client-side scripting wordt op de machine van de client uitgevoerd (bijvoorbeeld: Java, Javascript, Flash) interactief maken van je website: bijvoorbeeld iemands naam laten invoeren en deze gebruiken verder in de pagina vaak kopieerbaar 2. Server-side scripting wordt op de machine van de server uitgevoerd (bijvoorbeeld: Perl, CGI, PHP, ASP) bijvoorbeeld om gegevens uit een database weer te geven (denk aan zoekmachines, winkelwagentjes, …) nooit kopieerbaar

247 247 Scripting Javascript  ≠ java (want java is een ‘echte’ programmeertaal)  bestaat als client side en als server side script  werkt in alle browsers  waar staat het script ? rechtstreeks in de html : hier komt het script in een extern bestand (.js) waarnaar verwezen wordt in de html:  voor meer info (zeker lezen Overzicht, Les 1 en Les 2) http://www.mijnhomepage.nl/javascript/index.php  goede bron voor scripts http://javascript.internet.com Kopiëren (en bewerken) nu maar !!!

248 248 Publiceren Hoe promoot ik mijn website? Een voortreffelijk artikel hierover: http://www.jorislange.nl/portfolio/artikelen/zoekrobots.html