WEBDESIGN met Wordpress. CVO Tervuren-Hoeilaart sem 1

Transcriptie

1 WEBDESIGN met Wordpress CVO Tervuren-Hoeilaart sem 1 1

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 2

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) 3

4 Hoofdstuk 1: INLEIDING Internet HTML Webdesign 4

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? 5

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

7 INTERNET Technische basis (Adressering op Internet) Naamgeving wereldwijd uniek internic coördineert naamgeving Systematische naamopbouw = 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! 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

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: 8

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? 9

10 Geboortejaar: 1990 (CERN) HTML: Hypertext Markup Language protocol: http HTML Algemeen 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: (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

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 11

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 12

13 HTML HTML-code Structuur van de opdrachten Tags in paren <I>Deze tekst wordt cursief weergegeven.</i>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<br> afsluitende tag. Hier is er geen sprake van een afsluitende tag. Nesting <H1>Deze koptekst <I> is op deze positie </I> cursief weergegeven.<h1> Deze koptekst is op deze positie cursief weergegeven. Twee basistypes - tekst: bijv. <i> </I> - ankers: <A> </A> (hyperlinks) 13

14 HTML HTML-code Opbouw van opdrachtregels Tags zijn niet hoofdlettergevoelig <I>Deze tekst wordt cursief weergegeven.</i> is hetzelfde als <i>deze tekst wordt cursief weergegeven.</i> Een of meerdere opdracht regels <H1>Deze regel bevat <I>meerdere</I> tags</h1> is hetzelfde als <H1> </H1> Deze regel bevat <I>meerdere</I> tags 14

15 HTML HTML-code Waarden toekennen aan tags <H1 ALIGN=RIGHT>Deze koptekst is rechts uitgelijnd</hi> Deze koptekst is rechts uitgelijnd. ALIGN is de opdracht RIGHT is het sleutelwoord OPGELET: Gebruik geen spaties (mogelijke browserproblemen) Bestandsnamen moeten tussen dubbele aanhalingstekens <IMG SRC= > 15

16 Basis van een webpagina HTML HTML-code Drie containers <HTML> <HEAD> Titel van de webpagina </HEAD> <BODY> Inhoud van de pagina </BODY> </HTML> 16

17 HTML HTML-lessen

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

19 1. Bereid eerst een structuur voor Webdesign De 10 geboden 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, 19

20 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

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 ) 21

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

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? 23

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

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

26 Een heldere en consistente navigatie gelijkvormige menu s zelfde terugkerende structuur eventueel een sitemap vb. 26

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! 27

28 En vooral niet ml 28

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 29

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 30

31 Voordelen Met WYSIWYG-editor maken 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

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 32

33 CMS-systeem kiezen Een overzicht van de top 14 CMS systemen : CMS systemen uittesten : 33

34 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

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

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 36

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 37

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

39 Wordpress : 2 mogelijkheden 1. Op een account maken en op de online versie meteen starten 2. Op de software downloaden en bij je eigen provider installeren 39

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 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 1ste mogelijkheid: AMPPS webserver op je PC Waarom? testdoeleinden Surf naar 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

45 1ste mogelijkheid: AMPPS webserver op je PC 51

46 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

47 Wordpress installeren op AMPPSserver 53

48 Wordpress installeren op AMPPSserver 54

49 Wordpress installeren op AMPPSserver 55

50 Wordpress installeren op AMPPSserver 56

51 2 e mogelijkheid :Eigen webserver op je PC: Instantwordpress installeren Ga naar 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

52 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

53 InstantWP.exe starten 59

54 InstantWP : taal vh Dashboard -> Nederlands 60

55 InstantWP : taal vh Dashboard -> Nederlands 61

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

57 Dashboard 63

58 Wordpress blogs zoeken Bvb. Blogs over koken 64

59 Oefening : Wordpress instellingen Ga naar p 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 adres hebben! 65

60 Oefening : Wordpress instellingen 66

61 Oefening : Wordpress instellingen 67

62 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

63 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

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

65 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

66 H4 Themes wordpress.org/extend/themes 72

67 H4 Themes 73

68 H4 Themes 74

69 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 (soms gratis WPthemes) 75

70 H4 Themes Oefening : lees bij plugins op het artikel: 76

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

72 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

73 Commerciële themes (75$) (2 stuks aan 70$) (Thesis 87$) marktplaats voor aanbieders; aparte WP-sectie (60 /stuk) (35 /jaar) 79

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

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

76 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

77 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

78 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

79 Categoriën instellen 85

80 Categoriën instellen Oefening : 1. Maak de 5 categoriën zoals in het boek op p 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

81 Instellen voor berichten schrijven 87

82 Instellen voor berichten: geen reacties! 88

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

84 Instellingen van GMail 90

85 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

86 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

87 Waar foto s halen? Vanop het web opgelet : copyright wetgeving! Zelf maken (kwaliteit?!) 93

88 Foto s bewerken Via de ingebouwde mogelijkheden van WP Met een fotobewerkingsprogramma Photoshop ( ) gratis: Gimp Photofiltre : Paint.net 94

89 Oefening : Photofiltre Download en installeer Photofiltre (Engelse versie ) Neem versie Lessen PF : 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

90 Photofiltre : header maken 96

91 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

92 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

93 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

94 Berichtvenstermaat aanpassen 100

95 Extra werkbalk voor opmaak 101

96 Extra werkbalk voor opmaak 102

97 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

98 Werken met afbeeldingen 104

99 Werken met afbeeldingen:bijlagepagina 105

100 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 106

101 Werken met afbeeldingen: bewerken 107

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

103 Afbeeldingen bewerken: 109

104 Afbeeldingen bewerken: 110

105 Fotogalerij toevoegen Oefening : Zoek 6 foto s die met jouw onderwerp te maken hebben ( 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

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

107 Tip: foto s in batch herschalen 113

108 Video toevoegen Opgelet copyright! Gewoon een link plaatsen : Bvb: kwtk8 (OPGELET! Je moet de hyperlink verwijderen!) -> bezoeker komt op Youtube terecht 114

109 Video toevoegen 115

110 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

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

112 Video in bericht 118

113 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