WEBDESIGN met Wordpress
CVO Tervuren-Hoeilaart 2015-2016 sem 1 1
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
2
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)
3
Hoofdstuk 1: INLEIDING Internet HTML Webdesign
4
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?
5
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
6
INTERNET Technische basis (Adressering op Internet)
Naamgeving
wereldwijd uniek
interNIC coördineert naamgeving Systematische naamopbouw 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
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) 7
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.jpg
8
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? 9
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 (NetscapeMS) standaardisering: www.w3c.org (HTML1.0 > 2.0 > 3.2 > 4.01 > 5.0 ) 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
10
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
11
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
12
HTML HTML-code Structuur van de opdrachten
Tags in paren
Deze tekst wordt cursief weergegeven.Vanaf hier verschijnt de tekst weer normaal.
Deze tekst wordt cursief weergegeven. Vanaf hier verschijnt de tekst weer normaal.
Uitzondering: alleenstaande tags Hier is er geen sprake van een
afsluitende tag. Hier is er geen sprake van een afsluitende tag.
Nesting
Deze koptekst is op deze positie cursief weergegeven.
Deze koptekst is op deze positie cursief weergegeven.
Twee basistypes -
tekst: bijv. … ankers: … (hyperlinks)
13
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
14
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 
15
HTML HTML-code
Basis van een webpagina Drie containers Titel van de webpagina Inhoud van de pagina 16
HTML HTML-lessen
www.handleidinghtml.nl
www.homepagemaken.nl/htmlcursus/lessenoverzicht.php
17
Webdesign 3 aspecten webdesign
Technische” benadering
Cognitief-ergonomische benadering
HTML, kennis (WYSIWYG) editor(s), CMS systemen navigatie, schermindeling, tekstopmaak
Artistieke benadering
kleurgebruik, vormgeving, aantrekkelijkheid,…
18
Webdesign De 10 geboden 1.
Bereid eerst een structuur voor
2.
Zet waardevolle inhoud op de pagina’s Test de site vooraf en tijdens De eerste indruk is (alles)bepalend Gebruik technologie met verstand (keuze !!!!) Bied keuzes, bewust en onbewust Design met mate en intelligentie Een heldere en consistente navigatie Webdesign is dynamisch en proactief En vooral niet…
3. 4. 5. 6. 7. 8. 9. 10.
bijv.: vermijd drukke achtergronden die de tekst in de voorgrond moeilijk leesbaar maken, …
19
Bereid eerst een structuur voor
Ontwerp site
stroomdiagram van inhoud + navigatie Bedrijf X
Wie zijn we ?
Onze produkten
Contacteer ons
Verdelers gezocht
braadpannen ketels
steakmessen
20
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…)
21
Test de site vooraf en tijdens
taalfouten ?(laten nalezen!) alle links werken ? schikking ok ? algemeen uitzicht ? weergave op populaire browsers ?
22
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 ?
23
Bied keuzes, bewust en onbewust
alle info toegankelijk maken vanaf de homepagina (bvb. voorgerechten,hoofdschotels, nagerechten, tips & trucs…) zorg voor overzichtelijkheid
24
Design met mate en intelligentie
niet teveel afleidingen (muziek…) een ontwerp kan snel saai worden kostprijs van design ? makkelijk wijzigbaar ?
25
Een heldere en consistente navigatie
gelijkvormige menu’s zelfde terugkerende structuur eventueel een “sitemap” vb. www.cvoth.be
26
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 !
27
En vooral niet…
http://thebiguglywebsite.com
http://jayj.dk/grim/
http://www.angelfire.com/uglinesstothemax/index.ht ml
28
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
29
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
30
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
31
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
32
CMS-systeem kiezen Een overzicht van de top 14 CMS systemen : http://www.cubrid.org/blog/devplatform/comprehensive-overview-of-top-14-contentmanagement-systems/
CMS systemen uittesten :
http://www.opensourcecms.com/
33
Voordelen Wordpress
WordPress is een “gratis” content management systeem (het is ontwikkeld door Matthew Mullenweg, maar wordt door een flinke groep ontwikkelaars ondersteund)
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
34
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 laadt 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
35
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
36
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
37
Officiële Wordpress site Oefening : Bezoek enkele website die met Wordpress gemaakt zijn.
Welke vind je erg geslaagd, welke minder ? Waarom ?
http://wordpress.org/ (doorklikken op Showcase)
Ook : http://nl.wordpress.org (in het Nederlands)
38
Wordpress : 2 mogelijkheden 1.
2.
Op www.wordpress.com een account maken en op de online versie meteen starten Op www.wordpress.org de software downloaden en bij je eigen provider installeren
39
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
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
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
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
1ste mogelijkheid: AMPPS webserver op je PC
Waarom ? testdoeleinden Surf naar www.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
1ste mogelijkheid: AMPPS webserver op je PC
51
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
Wordpress installeren op AMPPSserver
53
Wordpress installeren op AMPPSserver
54
Wordpress installeren op AMPPSserver
55
Wordpress installeren op AMPPSserver
56
2e mogelijkheid :Eigen webserver op je PC: Instantwordpress installeren Ga naar www.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
57
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
InstantWP.exe starten
59
InstantWP : taal vh Dashboard -> Nederlands
60
InstantWP : taal vh Dashboard -> Nederlands
61
H3 Werken met WordPress : Dashboard
Admin-bar : zwart Inloggen : ketkroket.co.nf/wp-admin
62
Dashboard
63
Wordpress blogs zoeken Bvb. Blogs over koken
64
Oefening : Wordpress instellingen Ga naar p.31-35 in het boek Doe de algemene instellingen 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
Oefening : Wordpress instellingen
66
Oefening : Wordpress instellingen
67
Gebruikersrollen
Beheerder
Redacteur
Alle rechten Enkel jezelf beheerder maken 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
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
Tip
Werk met Chrome of Firefox Opgelet : InstantWP werkt enkel met IE Zet tabs open
70
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
H4 Themes
wordpress.org/extend/themes
72
H4 Themes
73
H4 Themes
74
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 WPthemes)
75
H4 Themes
Oefening : lees bij plugins op www.smashingmagazine.com het artikel:
76
H4 Themes
Oefening : bezoek de webpagina van het theme NeueGrafik
77
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
Commerciële themes
www.wpremix.com (75$) www.woothemes.com (2 stuks aan 70$) www.diythemes.com (Thesis 87$) www.themeforest.net marktplaats voor aanbieders; aparte WP-sectie (60€/stuk) www.elegantthemes.com (35€/jaar)
79
Theme op maat
Uniek design wordpress.startpagina.nl
80
Themes installeren 1.
2.
Downloaden in zip-formaat Dashboard ,Weergave,Thema’s
81
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
Berichten 1.
2. 3.
Categoriën maken om je berichten een logische indeling te geven-> deze komen later in de zijbalk terecht Instellingen doen voor berichten (=posts=artikels) Voorbeelddata vanuit installatie verwijderen
83
Berichten ; Categoriën instellen
Om je berichten een logische indeling te geven
Wij kozen ervoor dat deze slugs niet voorkomen in onze permalinks->mag leeg blijven
84
Categoriën instellen
85
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
Instellen voor berichten schrijven
87
Instellen voor berichten: geen reacties!
88
Instellen voor berichten schrijven
Check de nodige gegevens bij je provider, maak een nieuw e-mailadres aan speciaal hiervoor !!
89
Instellingen van GMail
90
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
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
Waar foto’s halen ?
Vanop het web opgelet : copyright wetgeving ! Zelf maken (kwaliteit ?!) http://www.onextrapixel.com/2013/09/20/10-topproviders-of-stock-images-a-useful-and-fresh-list/
93
Foto’s bewerken
Via de ingebouwde mogelijkheden van WP Met een fotobewerkingsprogramma
Photoshop (€€€)
gratis:
Gimp Photofiltre : http://photofiltre.free.fr Paint.net
94
Oefening : Photofiltre Download en installeer Photofiltre (Engelse versie http://photofiltre.free.fr/frames_en.htm ) Neem versie 7.1.2 Lessen PF : www.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
Photofiltre : header maken
96
Photofiltre : header maken 960 px = typische waarde voor schermbreedte -> de hoogte zou dan ongeveer een 200-tal px moeten worden
Via RMK, crop image de afbeelding bijsnijden.
97
Photofiltre : header maken
• Kies een lettertype (liefst schreefloos !), kies een grootte, typ de tekst en klik op OK. • Verschuif deze tekst met de pijltjestoetsen !
98
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
Berichtvenstermaat aanpassen
100
Extra werkbalk voor opmaak
101
Extra werkbalk voor opmaak
102
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
Werken met afbeeldingen
104
Werken met afbeeldingen:bijlagepagina
105
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.com
106
Werken met afbeeldingen: bewerken
107
Afbeeldingen bewerken:Mediabibliotheek
Komen op geen enkele pagina of bericht voor.
108
Afbeeldingen bewerken:
109
Afbeeldingen bewerken:
110
Fotogalerij toevoegen Oefening : Zoek 6 foto’s die met jouw onderwerp te maken hebben (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
Media instellingen
Bij Instellingen, Media kan je instellen hoe groot de thumbnails van een fotogalerij dienen te zijn
112
Tip: foto’s in batch herschalen
113
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
Video toevoegen
115
Oefening :Video downloaden 1.
2. 3. 4. 5. 6.
7. 8.
Zoek een video op (Youtube, Vimeo …) Surf naar clipconverter.cc Plak daar de URL van de video Kies een formaat voor omzetting Zet enkel de eerste 10 seconden om ! Download de omgezette video Plaats deze in een nieuw bericht op je site Toon het resultaat aan de leerkracht
116
Video in bericht
Maak nieuw bericht Klik Media toevoegen Kies het in te voegen filmpje
Kies hoe je wil invoegen
117
Video in bericht
118
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
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
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
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
Oef: Statische pagina als homepage
Maak een pagina als statische pagina(Welkom), voeg deze pagina toe aan je menu
123
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
Menu’s
125
Menu’s : Testpagina 5 toevoegen
126
Menu’s : Testpagina 5 toevoegen
verslepen naar wens
127
Menu’s : Testpagina 5 toevoegen
128
Menu’s
129
Oefening : menu maken
Maak een soortgelijke menustructuur :
KMI : een link naar www.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
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
Menu’s
132
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
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
Widgets
Plugin “Links” zit nu standaard in WP 3.8.1
135
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
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
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: 2de widgetgebied homepagina
138
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
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
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
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
142
Oef.3
Waarvoor dient de plugin “Download monitor”? Goed alternatief op Akismet : Growmap Anti Spambot Plugin Installeer (indien je wenst) de plugin “Really simple Facebook Twitter share buttons” Gebruik deze plugin om op elke pagina snelkoppelingen te zien naar Facebook en Twitter
143
Oef.4
Maak een pagina met naam “Contact” Plaats deze pagina in je hoofdmenu Installeer de plugin “Contact Form”(van Bestwebsoft) Geef een e-mailadres in waarnaar het formulier moet worden opgestuurd Plak de nodige code in de pagina “Contact” Hoe kan je dit formulier aanpassen ?
144
Oef. 4 : settings Contact Form
145
Oef. 4 : settings Contact Form
146
Oef. 4 : settings Contact Form
147
Oef. 4 : settings Contact Form
148
Oef. 4 : settings Contact Form
149
Oef. 4 : settings Contact Form
150
Een plugin om de footer tekst aan te passen
151
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, …)
152
Oef.6
Zoek een goede plugin om tabellen in WP te voegen
153
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 :
154
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 :
155
Oef.6 : oplossing 3 Installeer “TinyMCE Advanced”, klik Instellingen en sleep de knoppen voor tabellen naar de knoppenbalk:
156
Oef.6 : oplossing 3
Kolombreedte aanpassen met knop ‘Tabelcel eigenschappen’ (3de van links) TIP : geef tabelbreedte in % (totaal moet 100% zijn)
157
FORMULIEREN
158
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.asp
159
Verwerken van de gegevens
1. 2.
gegevensverwerking = opzoeking in een database, wegschrijven in een database, uploaden van bestanden, versturen via email,... gegevensverwerking kan gebeuren: client-side : Javascript, VBScript server-side : ASP, ASP.net, PHP… (je hostingprovider moet dit wel ondersteunen!)
160
“Client-side” vs “Server-side”
161
Formulieren maken
via HTML (verwerking is moeilijk) via een plugin : Contact Form 7, … op websites :
ZOHO Creator creator.zoho.com (max. 1000 records) Google Docs (je hebt een Gmail adres nodig)
162
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”
163
Formulieren maken : oef. Google Forms Installeer plugin “Google Forms” Kies Add new Google Form Geef het URL in van het gepubliceerde Google Form (je moet daarvoor het live formulier weergeven :
164
Formulieren maken : oef. Google Forms
165
Formulieren maken : oef. Google Forms
Om naar die Confirm URL pagina te gaan ter bevestiging !! 166
Formulieren maken : oef. Google Forms
167
Nog een nuttige plugin :
Disable comments (door Samir Shah :om commentaarmogelijkheid weg te nemen bij posts of pagina’s of media)
168
Onderhoud : WP update
169
Onderhoud : thema update
170
WP Backup maken
Backup nodig van :
WP database Alle gegevens
Noodzakelijk : een eenvoudig proces Vele plugins beschikbaar
171
Oefening : WP Backup maken
• 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 172
Oefening : WP Backup maken
Hoe de backup terugzetten (restore) ?
http://www.mikeyd.com.au/2011/10/26/restoringwordpress-from-a-backup-to-dropbox-using-cpanel-andphpmyadmin/
173
FTP-client installeren
Filezilla (zowel voor Win als Mac !) Download en installeer Filezilla
174
Host voor Wordpress kiezen
bvb. 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
175
Gratis hostingprovider
176
Gratis hostingprovider Gratis domeinnaam van de vorm : www.jouwkeuze.co.nf Eerst een hostingplan kiezen , dan in het controlepaneel , register free domains
177
Gratis hostingprovider
178
Gratis hostingprovider
179
Gratis hostingprovider
180
Gratis hostingprovider
181
Gratis hostingprovider:domeinnaam
182
Gratis hostingprovider:database Klik eerst op Database manager in het dashboard van biz.nf
183
Gratis hostingprovider 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.
184
FTP-account
185
FTP-account: gegevens voor Filezilla
186
FTP-sessie in Filezilla starten
187
FTP-sessie in Filezilla : verbinding !
188
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)
189
Wordpress installeren
Downloaden (nl.wordpress.org) Uitpakken in map op je PC
190
Wordpress installeren Openen in Wordpad
191
Wordpress installeren Invullen in Wordpad
192
Wordpress installeren
plakken
193
Wordpress installeren
194
Wordpress installeren :wp-config.php
Engelstalige tutorials
http://wp.tutsplus.com/tutorials/security/conqueringthe-wp-config-php-file-11-good-practices
http://www.noupe.com/wordpress/mastering-wpconfig-php-tips-tricks-and-tweaks-74001.html
195
Wordpress installeren op webserver
196
197
198
199
Hoofdstuk 8: Hyperlinks en navigatie
200
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)
201
Veiligheid
Akismet of Growmap Anti Spambot Plugin (gratis) WP Security scan (p131)
202
Backup
Wp-db-back-up (Austin Matzko) Wordpress backup to Dropbox (p136)
203
SEO optimalisatie
p. 145 Plugin : yoast.com (p. 146)
204
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 205
InstantWP migreren naar hostingprovider 1.
Ga naar je Dashboard en installeer de plugin “Duplicator” ; Activeer deze plugin.
206
InstantWP migreren naar hostingprovider 2.
Maak een nieuw duplicaat door in het menu Duplicator, Packages, tab Create New te klikken (vul een nota in) en klik op Next, na de scan klik je op de knop Build :
207
InstantWP migreren naar hostingprovider Je bekomt een Archive-pakket en een installer-pakket. Klik op de tab Packages :
3.
Sla zowel het Installer-pakket als het Archivepakket(zip) op je Bureaublad op (door erop te klikken).
208
InstantWP migreren naar hostingprovider 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). Deze 2 bestanden staan nu op je bureaublad : 4.
209
InstantWP migreren naar hostingprovider 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 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) 4.
210
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)
211
InstantWP migreren naar hostingprovider 6.
Vul onderstaand scherm in en klik op Test connection.
212
213
InstantWP migreren naar hostingprovider 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). 6.
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). 214
InstantWP migreren naar hostingprovider
215
InstantWP migreren naar hostingprovider Installeer eventueel All In One WP Security & Firewall. Deze plugin is gelijkaardig aan iThemes Security maar instellingen zijn eenvoudiger.
219
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.
220
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 221
Stap 2 : Kopie van hele WP-map
222
Stap 3: backup van je MySQL Database
223
Stap 3: backup van je MySQL Database
224
Stap 3: backup van je MySQL Database
225
Stap 3: backup van je MySQL Database
226
Stap 4: WP op nieuw domein installeren • 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
227
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.
228
Stap 5 : de site overzetten Via PHPMyAdmin alle tabellen verwijderen uit de nieuwe database
229
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
230
URL van je site in de tabel wp_options (of die met je eigen prefix) wijzigen naar de nieuwe domein URL
231
Bij Instellingen -> Algemeen -> Adres van je WordPress site wijzigen
232
Installeer de plugin:
http://wordpress.org/extend/plugins/search-andreplace/ 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.
233
Scripting
234
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
235
Scripting Soorten scripts Er zijn twee mogelijkheden: 1. Client-side scripting
2.
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
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 236
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 : <script language=“JavaScript”> hier komt het script in een extern bestand (.js) waarnaar verwezen wordt in de html: <script language="JavaScript1.2" src="../scripts/slide.js">
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 !!! 237
Publiceren Hoe promoot ik mijn website?
Een voortreffelijk artikel hierover: http://www.jorislange.nl/portfolio/artikelen/zoekrobots.html
238
