Handleiding Bloggen met WordPress Fontys Economische Hogeschool Tilburg SCH / LND, november 2013
Inhoud 1
Terminologie van het bloggen
2
De eerste stappen
3
Een oefenblogpost invoeren
4
Redactionele organisatie
5
Checklist
1
Terminologie van het bloggen Blog Het woord ‘blog’ is een verkorting van ‘weblog’, oftewel een dagboek op het internet. Oorspronkelijk werden vooral de echt typische dagboek sites ‘blog’ genoemd. De vorm van een soort dagboek bleek ook goed te werken om nieuws te brengen of nieuwe kennis te delen. Een blog is eigenlijk een internetsite waar constante vernieuwing centraal staat. blogpost Een (we)blog is een website die hoofdzakelijk bestaat uit een serie artikelen met een specifieke publicatiedatum. Die artikelen noemen we blogposts of posts, of berichten. ankeilers Kenmerkend is ook dat op de homepage en op archiefpagina’s kleine inleidingen (ankeilers of intro’s) van de verschillende blogposts te lezen zijn. Als je hier op doorklikt krijg je een pagina waarop één blogpost helemaal te lezen is. Sidebar en Een typisch blog heeft een opmaak in twee kolommen. De kern staat in de linkerkolom, die widgets doorgaans twee derde van de pagina beslaat. De smallere kolom daarnaast heet de sidebar. Die staat vol met kleine blokjes, waar bijvoorbeeld verwijzingen naar andere blogs of een twitterfeed in staan. Zo’n blokje noemen we een widget. CMS, frontend WordPress biedt je een Content Management Systeem (CMS). Dat betekent dat je de inhoud en backend ook via het internet kan aanpassen. Wat de lezer ziet noemen we het frontend van het CMS. Als je een blogpost wil schrijven of het systeem op een andere manier wilt onderhouden, dan doe je dat op speciaal daarvoor gemaakte webpagina’s, die alleen met een wachtwoord toegankelijk zijn. We noemen dit het backend. Je moet voor het backend inloggen met een wachtwoord.
Frontend: www.nieuwemedialab.nl
Backend: www.nieuwemedialab.nl/wp-admin
Rollen en In het backend krijg je de rol van ‘author’. Een rol is afgestemd op jouw taak op de site. Omdat rechten je een bepaalde rol krijgt, heb je bepaalde rechten wel, en andere rechten niet. Als je meer rechten hebt, dan kan je meer en ziet het backend er ook ingewikkelder uit. Omdat we allerlei rechten van je hebben afgepakt kunnen we ook voorkomen dat je bijvoorbeeld een blogpost van iemand uit een andere klas per ongeluk weggooit. Je docent heeft een andere rol op de site. Hij / zij heeft meer rechten, om bijvoorbeeld het werk van iedereen in te kunnen zien. Hoe dat in de praktijk werkt, dat merk je nog wel. Maar het idee van rollen en rechten is een principe dat je moet begrijpen, omdat het in heel veel complexere websites terugkeert.
2
De eerste stappen 1. Inloggen en een eerste oriëntatie Er is al een account voor je gemaakt op nieuwemedialab.nl. a. Log in op www.nieuwemedialab.nl/wp-admin. Je kan ook op de homepage inloggen en vervolgens op ‘dashboard’ klikken. Je kan je gebruikersnaam of je e-mailadres gebruiken om in te loggen. Je gebruikersnaam is je studentnummer. Het wachtwoord is ‘welkom’. Met je Fontys e-mail kan je je wachtwoord opvragen als je het zelf veranderd hebt, maar niet meer weet in wat. Je hoofdmenu ziet er uit zoals hier rechts. Het belangrijkste wat je doet op dit blog is blogpostjes schrijven, aanpassen, opmaken en nog beter maken. En dat doe je allemaal onder het menu Berichten. Onder het menu Profiel kan je je eigen gegevens aanpassen. De startpagina waar je op staat heet je Dashboard. Daar staat een overzicht van het aantal blogposts, een overzicht van bezoekcijfers en een blokje met bezoekcijfers die worden gemeten door Google Analytics. b. Probeer op het dashboard om de volgorde van de blokjes te veranderen door er mee te slepen. c. Ga naar Profiel. Voeg eerst een foto van jezelf toe, bijvoorbeeld van je twitter of linkedin account d. Het is een goede gewoonte om je werk op internetsites goed te beschermen met een wachtwoord. Het is misschien een beetje denkbeeldig dat iemand gaat proberen om onder jouw naam dingen te doen die je niet wilt, maar je kan maar beter het zekere voor het onzekere nemen. Ga naar je wachtwoord (password) en pas dat aan in iets wat jij kan onthouden. e. Zet Turn on/off Social Author Bio op ‘on’. Voeg twitter, linkedin en andere profielen toe. Onderaan de pagina zie je een blokje staan met hoe jouw profiel er uit ziet als je zometeen een blogpost publiceert. f.
Klik op de button
om je nieuwe profielgegevens op te slaan.
2. Een eerste oefentekst We gaan nu even wat onzin invoeren om de werking van WordPress te verkennen a. Ga in het menu onder Berichten naar Nieuw Bericht. b. Tik als titel in ‘eerste blogpost van (naam)’ c. Tik in ‘dit is een vette tekst’. d. Maak het woord ‘vette’ vet met de knop B e. Klik op het tabblad HTML. Je ziet nu de broncode van de tekst in HTML. Dit is voor de meeste toepassingen niet erg belangrijk. Als je wat verder wilt komen met internet is het toch handig om een beetje HTML te begrijpen. Voor nu is het genoeg dat je even weet waarom dat tabblad er zit. Ga weer terug naar het WYSIWYG tabblad.
3
f.
Behalve Bold zitten er nog veel meer knopjes die in de basis lijken op wat je vanuit Word kent. Experimenteer een beetje met de knopjes. Tik nog wat meer tekst en probeer die met verschillende knoppen op te maken. Hieronder zie je wat toelichting over welke knop waarvoor is.
3. Categorieën instellen: a. Met de optie Categorieën kan je bepalen waar je bericht terugkomt in het menu van de site. Voorlopig zijn we echter nog wat aan het experimenteren. We gebruiken daarvoor de categorie zandbak. De regels voor de zandbak zijn je lang geleden al bijgebracht: iedereen mag er spelen, maar niet gaan huilen als er iemand op je kasteeltje gaat staan. Alles wat je hier doet wordt vroeg of laat weer weggegooid, zodat de site niet volloopt met rare rommel. Zet voor het stukje wat je nu tikt de categorie dus op zandbak. De stukjes in de zandbak kan je niet in het menu terugvinden, maar wel als je direct intikt www.nieuwemedialab.nl/zandbak. b. Voordat we echt aan de slag gaan nog een kleinigheidje: de scherminstellingen. Dat is een menu dat naar beneden klapt als je de button rechtsboven aanklikt. Zorg dat de volgende hokjes aangevinkt staan.
4
4. Opslaan en publiceren We gaan nu kijken hoe het opslaan van een document werkt in WordPress a. Klik rechts op Save om de kladversie op te slaan. Doe dit telkens opnieuw als je zo meteen echt aan de slag gaat, anders worden je wijzigingen niet opgeslagen! b. Klik op Voorbeeld om te kijken hoe je stuk er voor gebruikers (frontend) uitziet. c. Als je nu ook nog op Publiceren zou klikken, dan pas staat het document echt live. Maar dat doen we niet, want het is maar een kladje. Klik dus op Naar de prullenbak verplaatsen om deze blogpost weg te gooien.
Het werkt niet! De site www.nieuwemedialab.nl is geen Facebook ofzo. De software voor Wordpress is aan elkaar geplakt door duizenden vrijwilligers die kleine stukjes geprogrammeerd hebben. Er staan geen beheerders dag en nacht klaar om de boel te onderhouden. De site wordt in wat uurtjes tussendoor onderhouden. Ongeveer zoals dat werkt bij de MKB instellingen waar veel van jullie komen te werken. Wen er maar alvast aan als je iets met websites gaat doen: er gaat wel eens wat fout en problemen oplossen hoort er bij. Pagina’s laden soms niet in één keer goed, zeker niet achter een slechte internet verbinding. Je pagina verversen helpt vaak goed. Een goede tactiek om kleine probleempjes op te lossen is ook vaak om het nog eens te proberen op een andere browser. Als de voorkant van de site er uit ligt, mail dan onmiddellijk met
[email protected] en zet er een paar uitroeptekens bij, dan proberen we dat snel op te lossen. Meldt op dat adres ook problemen met je gebruikersgegevens, als je bijvoorbeeld in een verkeerde groep zit.
5
Een oefenblogpost invoeren 5. Nu gaan we een echte tekst invoeren. We gebruiken hiervoor een tekst over personal branding, die in Word al helemaal af is. Als je zelf gaat schrijven is het een mogelijkheid om ook eerst in Word je tekst te maken, en deze daarna pas in te voeren in WordPress. Je kan ook direct in WordPress werken. Dat laatste scheelt werk, maar kan ook wat verwarrend zijn als je nog niet veel ervaring hebt met Wordpress. a.
b. c.
d.
Open het document ‘WordPress-oefening-plattetekst’. Je kan dat document vinden onder het kopje ‘handleiding’ op het Dashboard van je backend. Dit is de tekst die je over gaat zetten van Word naar WordPress. Open in WordPress een nieuwe blogpost met Nieuw bericht. Kopieer eerst de titel van Word naar WordPress. Nu gaan we de rest van de tekst kopiëren. Selecteer in Word de hele tekst, behalve dan de titel en het onderste stuk (onder de streep) waar een stuk HTML code staat. Maar let op: plak het niet direct in het witte vak in WordPress. Er worden dan allerlei codes uit Word meegekopieerd, en dan wordt het een zooitje. Gebruik het knopje zoals je dat hier links in de kantlijn ziet. Klik er op en plak je tekst in het scherm wat je dan krijgt en klik vervolgens op de button Invoegen. Na de tekst ‘Eerst even de minder spannende resultaten:’ staan drie alinea’s achter bulletpoints (in goed Nederlands ‘ongenummerde opsomming’). Verwijder de bulletpoints die je uit Word hebt meegekopieerd, en vervang deze door bulletpoints uit WordPress, door de tekst te selecteren en op het knopje zoals in de kantlijn te drukken
6. Links plaatsen: Een blog heeft over het algemeen geen bronnenlijst, maar alle bronnen die je gebruikt zijn ingelinkt in de tekst. Zelfs als je naar een boek verwijst kan je dat doen met behulp van een internetlink. Doe dit grondig als je zo je eigen tekst gaat schrijven. In de tekst die je hebt gekregen staan heel veel links, maar zoals het er nu staat zijn die erg rommelig. Het is de bedoeling om telkens de links ‘achter’ een bepaalde tekst te zetten waar de lezer dan op kan klikken. a. Zoek in de tekst waar een URL staat, alleen het gedeelte binnen de { } haken. b. Knip de URL weg met Ctrl-X c. Selecteer de tekst waar je de link achter wil plaatsen en klik op de linkbutton (zie kantlijn) d. Je krijgt nu een schermpje waarin je de link kan plakken (Ctrl-V). Je kan nu kiezen of je de link wil openen in een nieuw venster, of in het zelfde venster. In het laatste geval verdwijnt dus bij het lezen de tekst van de blogpost. Bepaal zelf hoe je dat wilt. Klik op Add Link om het schermpje weer te sluiten. Let op: er staat al een http:// tekst. Plak jouw link daaroverheen, in plaats van daarachter, anders krijg je http://http://. e. Verwijder de eventueel overgebleven {} haken. f. Probeer nog een stuk of drie links goed op hun plek te zetten (of alle 14 als je perfectionist bent).
6
7. Plaatjes: Let op, het werken met plaatjes in WordPress is niet zo heel erg gebruiksvriendelijk. Er kan veel, maar je moet er een beetje mee experimenteren voordat je weet waar alle opties zitten, en dan nog gaan er soms kleine dingen fout. Even geduld dus. En als je onderstaande stappen precies volgt moet het goed gaan. a. Zet je cursor op de juiste plek in de tekst, voor ‘De grappigste student ‘. Dat is niet de alinea die over de Google resultaten van Jasper Degreef gaat, maar anders past het niet goed. b. Boven de tekst-editor staat na de tekst Uploaden / Toevoegen de plaatjesbutton (zie kantlijn) die je gebruikt om nieuwe plaatjes toe te voegen. Klik hier op en ga naar Mediabibliotheek. Zoek naar het plaatje ‘Googleresultaten’. Klik achter het plaatje op Tonen. c. Selecteer Volledige Grootte, anders krijg je een heel klein plaatje d. Klik op Invoegen in bericht om het plaatje in je verhaal op te nemen. e. Het plaatje staat nu nog niet helemaal goed. Klik op het plaatje en vervolgens op het icoontje Afbeelding bewerken (zie rechts).
Op het eerste tabblad selecteer je onder Uitlijning ‘right’. Het plaatje komt nu rechts in de tekst te staan. Maak het plaatje kleiner (60%) Klik op het tabblad Geavanceerde Instellingen en pas de volgende velden aan. Hierdoor plakt het plaatje niet helemaal aan de tekst vast de tekst.
Klik onderaan op de button Bijwerken
8. Zelf een plaatje zoeken en toevoegen: Het plaatje in de vorige oefening zat al in de bibliotheek. Als je zelf een blogpostje gaat schrijven, dan moet je ook zelf je plaatjes verzamelen. Vaak zullen dat plaatjes van het internet zijn. Het is dan handig als je weet hoe je schermfoto’s kan maken. Op je computer zit een PrtScn (printscreen) functie, waarmee je zo’n schermfoto kan maken. Op een windows computer kan je die vervolgens plakken in Paint, of misschien heb je zelf wel een beter programma als Photoshop. Het bestand wat je in paint maakt moet je dan weer opslaan, voordat je het kan toevoegen in WordPress. Een makkelijke manier om screenshots te maken van Internetsites is het programma Fireshot. Dat programma is oorspronkelijk gemaakt als een zogenaamde Add-On voor de browser Firefox (vandaar dat ‘Fire’). Maar er is ook een versie voor Internet Explorer (IE) of Google Chrome. Je vindt deze gratis programma’s onder http://screenshotprogram.com/fireshot/fireshot_pro.php. Als je dat geïnstalleerd hebt komt er een fireshot button te staan in een balk bovenin je browser waarmee je een schermfoto maakt. Je moet zelf even uitvogelen hoe het verder werkt. We gaan nu het plaatje van de site van Dominique Scholten toevoegen. a. Ga naar http://www.vads.nl, maak een schermfoto en sla die op als bestand.
7
b. Druk in je WordPress post opnieuw achter Upload/Insert op de Add an image button. c. Klik op Select file en voer het plaatje in. d. Kijk nu zelf hoe je de instellingen wilt. Je kan onder Caption weer een onderschrift invullen. Onder Link URL kan je een link naar www.vads.nl toevoegen. Onder Edit image kan je het plaatje nog bewerken. Druk uiteindelijk op Insert into post en kijk naar het resultaat. Werk eventueel bij met Edit Image als je nog niet tevreden bent. 9. Ankeilers: hoe verschijnt jouw blogpost op overzichtspagina’s? Als je een blogpost publiceert gebeuren er twee dingen. Ten eerste wordt de pagina waarop de blogpost zelf staat openbaar. Die staat onder een link met deze vorm. http://www.nieuwemedialab.nl/archives/1757. Dat gaat natuurlijk niemand zomaar vinden. Er komt daarom ook een verwijzing naar je blog op de overzichtspagina’s met alle blogposts uit een bepaalde categorie. Je ziet je blogpost daar nog niet als je deze niet hebt gepubliceerd. Je kan ook niet gemakkelijk naar een proefversie kijken. Je gebruikt dan de zandbak a. Stel als categorie voor je blogje in ‘zandbak’ en publiceer je blog. Kijk of je je blog terug kan vinden onder www.nieuwemedialab.nl/zandbak. Zet daarna je bericht weer terug op ‘kladversie’ met het dropdown menuutje in het blokje ‘publiceren’. Waarschijnlijk zie je alleen nog maar de titel van je blog, of een willekeurig begin. Om precies de goede tekst op de overzichtspagina’s te krijgen gebruiken we de optie ‘samenvatting’, die je onderaan je pagina vindt. We noemen deze tekst ook wel een ankeiler.
b. Voor je proefblog gebruiken we gewoon de hele eerste alinea als ankeiler. Kopieer deze naar het veld Samenvatting. c. Er moet nu nog een plaatje bij op de voorkant. Onderaan de rechter kolom staat een blokje Uitgelichte afbeelding. Klik daar op Uitgelichte afbeelding instellen. Selecteer in de bibliotheek het plaatje dat je wilt gebruiken en klik op tonen. Bij alle opties van het plaatje staat onderaan ‘Als uitgelichte afbeelding gebruiken’. Klik daarop en sluit het plaatjesscherm. d. Controleer in de zandbak of het er allemaal goed uitziet.
8
10. Video plaatsen Het YouTube filmpje van Guido plaatsen gaat zo: a. Ga op de goede plaats in de tekst staan. Klik op de videobutton b. Plak de link naar het YouTube tussen de twee codes. Vergeet niet om een breedte van 500 pixels op te geven, anders zie je geen filmpje. Als het goed is ziet het er zo uit: [video w="500" h="undefined"] http://www.youtube.com/watch?v=KHtq_Guvx5M[/video] c. Verwijder eventuele overgebleven tekst van de oorspronkelijke verwijzing. Controleer frontend of het werkt
11. HTML in je blogpost plakken We gaan nu het spelletje van Robbie in de tekst plaatsen. Dat is een HTML code. Een beetje technisch dus. Let op, dit gaat wellicht niet bij iedereen goed, maar het is wel grappig om te proberen. a) Als je in een klaslokaal zit, zet eerst je geluid uit! b) Ga naar het tabblad HTML, en zoek naar de tekst <Screenshot of HTML code Robbie Hageman> c) Vervang deze tekst door de HTML code die je onderaan het Word document vindt. d) Staat je geluid uit? Kijk met preview naar het resultaat.
12. Tags Tags zijn een manier om door de site heen te zappen, onafhankelijk van de indeling in categorieën. Ze worden ook opgenomen in de tagcloud die je op de voorpagina ziet. P l a a t s a ls tags de merken die je noemt, de platforms en middelen die dat merk gebruikt, en de theorieen die je bespreekt. Bijvoorbeeld: Puma, Facebook, zoekmachinemarketing, Location Based Media. Je kan je tags één voor één invoeren, of meerdere tegelijk met een komma ertussen. Als je klikt op ‘Choose from the most used tags’ kan je aansluiten bij tags die andere gebruiken.
9
Redactionele organisatie De basis heb je nu onder de knie. Nu moet je zelf aan de slag met het schrijven van je eigen blogpost. Hier volgen verschillende specifieke onderwerpen die belangrijk zijn om alles zo mooi mogelijk te maken en het te laten werken om met alle studenten samen op één internetsite te publiceren. Redactioneel stappenplan Als je voor een internetsite werkt bij een professionele organisatie, dan is het niet zomaar een kwestie van een stukje maken en dat op het web plaatsen. Je moet ook anderen naar je werk laten kijken. Bij ons gaat dat in verschillende stappen. 1. Kladversie: Je maakt een eigen kladversie. Daarna 2. Feedback svp: Je stuurt je eerste versie door naar je groepsleden voor feedback. Die maken kleine aanpassingen en zetten er commentaar onder. 3. Feedback klaar: Je verbetert je werk op basis van de kritiek van anderen. 4. Nakijken svp: Je stuurt je werk naar je docent. Die gaat het nakijken. 5. Nagekeken: Je verbetert zaken die je docent heeft aangegeven. Als je docent heeft aangegeven dat het echt nog niet goed genoeg is, dan zet je de status weer terug op ‘nakijken svp’. 6. Publiceer: Eindelijk ben je klaar, en kan je je postje met de wijde wereld delen. Je moet zelf bijhouden waar je bent door de status van je postje in het blokje Publiceren telkens aan te passen. Als je een postje van iemand anders hebt nagekeken zet je die op ‘Feedback klaar’. Stuur wel even een mailtje als je feedback wilt. Rond de inleverdatum kijkt de docent zelf naar welke blogposts op ‘nakijken svp’ staan, maar als je vroeg of veel te laat bent met inleveren, dan moet je ook je docent even een mailtje sturen. Editorial comments Als je feedback geeft op het werk van anderen, kan je die invoeren onder Editorial comments. Die optie staat onder je tekst invoervak, in de middenkolom. Die opmerkingen zijn alleen in het backend te zien. Gebruik deze functie, want je docent wil ook echt zien dat jullie elkaars werk kritisch hebben bekeken. Dit wordt meegewogen in de beoordeling. Social media marketing Tot slot. Je blog staat online. Je hebt er misschien zelfs al een cijfer voor gekregen. Toch nog eventjes reclame maken voor je eigen werk! Ga naar het front-end en zoek je eigen stuk op. Aan de bovenkant en de onderkant van de pagina kan je met deze knopjes je werk delen met de rest van de wereld.
10
Checklist voor inleveren eigen blogpost
Is je blogpost interessant? Zou je het zelf willen lezen? Heb je gebruik gemaakt van de begrippen die je in dit vak geleerd hebt? Zit het basis idee van de cursus goed verwerkt in je verhaal? Enerzijds technologische vooruitgang, en anderzijds de vraag of dat nou echt tot verandering leidt? Heeft je blogpost een aansprekende titel? Het overschrijven van de geweldige titels van de opdrachtomschrijving geldt als een zwaktebod. Doe vooral ook niet ‘blogpost van Pietje’ ofzo. Heb je de categorieën goed ingesteld? (zie opdracht 3) Heb je een ankeiler tekst ingevoerd onder samenvatting en is die tekst geschikt om mensen aan te sporen je stukje echt te gaan lezen? (zie opdracht 9) Heb je een ‘Uitgelichte afbeelding geselecteerd? (zie opdracht 9) Heb je gecontroleerd of de ankeilers er goed uitzien op de categorie pagina’s? (zie opdracht 9) Heb je niet allerlei rare opmaakcodes uit Word meegekopieerd? (zie opdracht 5) Heb je je eigen profielgegevens bijgewerkt (zie opdracht 1) Heb je alle bronnen die je hebt gebruikt in de tekst ingelinkt en alle teksten die je letterlijk hebt overgenomen tussen aanhalingstekens gezet? (Zo niet dan heet dat plagiaat en krijg je problemen met de examencommissie!) (zie opdracht 6) Heb je van alle nieuwe media uitingen die worden besproken plaatjes opgenomen, staan die plaatjes op de goede plaats in de tekst, loopt de tekst er goed omheen en heb je een margin om de plaatjes heen gezet, zodat ze niet aan de tekst vastplakken? (zie opdracht 7 en 8) Heb je je stukje laten lezen door anderen, en is hun commentaar ook te zien in de editorial comments? Heb je je bericht voorzien van tags (zie opdracht 12)
11
12