Categoriearchief: Webdesign

Plug-ins in WordPress: Geen reactiespam met Akismet

Handboek WordPress 5Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress.
Dit voorproefje behandelt het werkend krijgen van Akismet, de plug-in die je tegen reactiespam kan beschermen. Eerdere voorproefjes (over het maken van een blogpost met Gutenberg vind je HIER en HIER. (H.F.)

Meegeleverde plug-ins

WordPress wordt standaard geleverd met twee plug-ins: Hello Dolly en Akismet. De eerste is een tikje nutteloos, maar de tweede is erg belangrijk. Geen reactiespam met Akismet.

Geen reactiespam met Akismet

De plug-in Akismet is wel nuttig. U bent ermee beschermd tegen spammers die de reactiemogelijk op de site misbruiken om hun berichten over blauwe pillen of andere ongein te plaatsen. Het in gebruik nemen van de plug-in is wel even een werkje, maar met dit stappenplan moet het lukken:

1. De eerste stap begint – uiteraard – met het activeren van de plug-in. In het scherm met geïnstalleerde plug-ins vindt u de link Activeren direct onder de naam van de plug-in. De plug-in is weliswaar geactiveerd, maar u moet nog een Akismet-account hebben om daadwerkelijk spam tegen te houden.

Geen reactiespam met Akismet
De plug-in is geactiveerd, maar u moet nog een account
aanmaken bij Akismet.

2. Een klik op de grote knop met de tekst Akismet account activeren leidt u naar een pagina waar u kunt kiezen tussen het verkrijgen van een nieuwe Akismet-sleutel of het invullen van een sleutel – mocht u die al hebben. Van dat laatste gaan we niet uit, dus u kiest voor de eerste optie Je APIsleutel verkrijgen. U wordt geleid naar een pagina van Akismet, waar opnieuw een link u uitnodigt om een Akismet API key te verkrijgen.

Geen reactiespam met Akismet
Een Akismet-sleutel verkrijgt u op de site van Akismet zelf.

3. Een klik op die link leidt naar een pagina waar u zich kunt aanmelden met uw e-mailadres, gebruikersnaam en wachtwoord.

4. Kies op de volgende pagina Personal bij een persoonlijke site of Get plus bij een zakelijke site. Wij kiezen hier Personal.

5. Een pagina verder wordt u gevraagd hoeveel u over hebt voor de antispammaatregelen van Askimet. Wanneer u de dienst alleen maar wilt proberen, is nul euro een prima bedrag. Zet het schuifje helemaal naar links en klik Continue. Als u de dienst vaak gebruikt, is het betalen van een bedrag zeker het overwegen waard.

6. Op de volgende pagina verschijnt de API-sleutel. Kopieer de code en keer terug naar uw WordPress-site.

Geen reactiespam met Akismet
Voer de API-sleutel in op uw WordPress-site.

7. Plak de code in het vakje (zie afbeelding 8.14) en klik op Verbinden met API-sleutel.

8. De site is beschermd. Pas op deze pagina zo nodig nog instellingen aan.

Geen reactiespam met Akismet
Operatie geslaagd: uw site wordt beschermd door een
werkende Akismet-sleutel.

Vue.js – het nieuwe JavaScript-framework

In de webwereld is het frontend vakgebied een hot topic. Steeds meer bedrijven en organisaties kiezen ervoor hun frontend gescheiden te ontwikkelen van het backend. Zo kan het backend zich concentreren op authenticatie, API’s en datavoorziening, terwijl het frontend kan profiteren van compacte en lichtgewicht webapplicaties die op elke device draaien. Vaak wordt gekozen voor Angular of React als frontend framework, om niet telkens het wiel opnieuw te hoeven uitvinden. Maar sinds enige tijd is ook Vue.js een steeds vaker gekozen alternatief.

vue.js
De vue-homepage..

Vue.js is evenals React en Angular een frontend framework. Dit betekent dat in één geïntegreerde omgeving wordt voorzien in alle eisen waaraan een moderne webapplicatie moet voldoen. Denk aan zaken als webcomponenten, databinding, routing, state management en communicatie met het backend via http. Het gebruik van losse bibliotheken zoals jQuery, knockout, mobx (voor state management) en andere is vaak niet meer nodig. Alles is al beschikbaar in het framework. Het ene framework biedt out-of-the-box iets meer (Angular), het andere framework iets minder (React), maar daar staat dan weer meer keuzevrijheid tegenover. Vue.js biedt wat dat betreft een tussenweg. Er zijn standaard bibliotheken voor routing en state management, maar het is niet verplicht ze te gebruiken. Lees verder Vue.js – het nieuwe JavaScript-framework

Een WordPress-blog beveiligen

WordPressHet Computer Creatief-blog draait op WordPress. Waarom? Omdat het zo makkelijk op te zetten is. Het is eenvoudig zelf te installeren – zeker met behulp van het Handboek WordPress 5 – en anders kan je provider/hoster je meestal wel helpen met het installeren van WordPress. De basis van WordPress staat dan voor je klaar. Het is nu aan jezelf om het niet al te ingewikkeld te maken en de boel veilig op slot te zetten voor de hackers uit de buitenwereld. Hoe kun je een WordPress-blog beveiligen?

WordPress-blog beveiligen

Als je een kale installatie hebt van WordPress dan ben je er nog eigenlijk niet. Het is van belang dat je een veilige installatie hebt. Vanmorgen zag ik in het Activiteitenlog van dit blog dat er door drie onbekenden pogingen waren gedaan om in te loggen. Die pogingen mislukten omdat de boel bij ComputerCreatief goed dichtgetimmerd is. Daarvoor moet je eigenlijk twee belangrijke onderdelen aanpassen: je inlognaam en wachtwoord en zorgen dat de aanvallers na een paar pogingen om in te loggen worden buitengesloten. Lees verder Een WordPress-blog beveiligen

Handboek WordPress 5: De visuele editor gebruiken – 2

Handboek WordPress 5Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress. We beginnen de voorproefjes met de beschrijving van de nieuwe visuele editor Gutenberg, de opvolger van de ‘klassieke’ editor. Dit is deel 2 van het gebruik van de visuele editor: Afbeeldingen toevoegen. Deel 1 vind je HIER. (H.F.)

Afbeeldingen toevoegen

Er zijn meerdere mogelijkheden om een afbeelding toe te voegen aan een bericht. We zagen al even de mogelijkheid om een beeld inline toe te voegen aan een tekstblok. Die optie biedt weinig mogelijkheden om de positie van het beeld te bepalen en is daarom van beperkt nut. Veel beter is het om de afbeelding als blok toe te voegen. Er zijn drie opties: afbeelding, omslagafbeelding en galerij. We bespreken ze in de volgende paragrafen.

Bestandsformaten voor afbeeldingen

Voor beelden kunt u de bestandsformaten JPG, GIF en PNG gebruiken. Al deze bestandsformaten maken gebruik van compressie. Ze tasten de kwaliteit dus enigszins aan, maar daardoor zijn de bestanden wel veel kleiner en verschijnen ze sneller op het scherm. Ieder bestandsformaat heeft voor- en nadelen. Lees verder Handboek WordPress 5: De visuele editor gebruiken – 2

Handboek WordPress 5: De visuele editor Gutenberg gebruiken

Handboek WordPress 5Deze maand besteden we extra aandacht aan WordPress én het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress. We beginnen de voorproefjes met de beschrijving van de nieuwe visuele editor Gutenberg, de opvolger van de ‘klassieke’ editor. (H.F.)

De visuele editor gebruiken

Bij het schrijven van het bericht gebruikt u de visuele editor Gutenberg. Dit is de opvolger van de ‘klassieke editor‘ die werd gebruikt in vorige versies van WordPress. Het werken met Gutenberg is even wennen, maar de logica erachter wordt snel duidelijk.

TIP • Heimwee naar de klassieke editor? Wie niet kan zonder de klassieke editor van WordPress, heeft de mogelijkheid om die (voorlopig) te blijven gebruiken. De editor is beschikbaar als plug-in. In hoofdstuk 8 gaan we aan de slag met plug-ins. Daar bespreken we ook de plug-in ‘Klassieke editor’. In dit hoofdstuk gebruiken we de nieuwe Gutenberg-editor, die in komende edities van een steeds belangrijker rol gaat spelen.

Een blok toevoegen

Centraal in Gutenberg staan blokken. Zie het als bouwblokken waarmee u een bericht opbouwt. Een bouwblok kan iets simpels zijn als een paragraaf, maar ook een foto met tekst erin of een YouTube-video. Het gaat als volgt: Lees verder Handboek WordPress 5: De visuele editor Gutenberg gebruiken

De maand van…

De maand van WordPress 5

Handboek WordPress 5WordPress ontwikkelt zich in rap tempo. De vorige editie van het Handboek WordPress verscheen in 2016 toen WordPress 4.4 actueel was. Er is veel veranderd. Zeker het laatste jaar dankzij de introductie van Gutenberg, de nieuwe editor van WordPress. Maar er zijn ook tal van andere, minder zichtbare verbeteringen doorgevoerd waardoor het werken met WordPress makkelijker en veiliger is geworden. Hoog tijd dus voor een update van dit handboek: Handboek WordPress 5.
Deze maand besteden we daarom extra aandacht aan het Handboek WordPress 5. We praten (weer) met schrijver Dirkjan van Ittersum. Deze keer over de vernieuwingen in WordPress 5 en de mogelijkheden van WordPress. We laten je kennis maken met het boek door wat voorproefjes uit het boek op dit WordPress-blog (Computer Creatief) te plaatsen. Daarnaast vertellen we over onze eigen ervaringen met WordPress.

Identificeer gebruikte webtechnologieën met Wappalyzer

In mijn vorige column over frameworks werd gesproken over de populaire JavaScript-frameworks React, Angular en VueJS. Hierin werd ook gezegd dat het voor de eindgebruiker eigenlijk niet uitmaakt welk framework wordt gebruikt. Als de website maar gebruikersvriendelijk en duidelijk is. Maar voor ons als developers kan het wel degelijk interessant zijn. Soms willen we gewoon graag eens bekijken hoe een bepaalde pagina werkt, welke lettertypen op een pagina zijn gebruikt, of er misschien een CMS is ingezet (en zo ja, welke?) en of gebruik wordt gemaakt van cloudopslag. Toegegeven, dat zijn allemaal nerdy zaken, maar als webontwikkeling je werk of je hobby is, is het toch interessant om te weten. Maar hoe kom je daar als developer nu eenvoudig achter? Met Wappalyzer!

Bron weergeven

Van oudsher hebben alle browsers de optie om de broncode van een pagina te tonen. Dit werkt via het menu, de sneltoets F12, of via de rechtermuisknop en de optie Bron Weergeven, Show Source of vergelijkbaar. Echter, moderne frameworks en CMS’en proberen de code te comprimeren en optimaliseren, zodat de website zo min mogelijk bandbreedte verbruikt en zo snel mogelijk te laden is. Zelfs een minimalistische pagina als Google.nl gebruikt deze techniek en is op deze wijze zo goed als onleesbaar (en in ieder geval onbruikbaar) voor de ontwikkelaar. Lees verder Identificeer gebruikte webtechnologieën met Wappalyzer

Front-end frameworks: keuze te over

Jarenlang bestond het vak van webdesigner uit het kunstig aan elkaar knopen van HTML- en CSS-pagina’s. Het was voldoende om de basiscommando’s te kennen en over enige designvaardigheden te beschikken. Voor animaties en al-dan-niet gehate ‘splash-pages’ was Adobe Flash de aangewezen tool. Als er lastig JavaScript geprogrammeerd moest worden, waren de bibliotheek jQuery en typische developersfora als stackoverflow.com meestal voldoende om de schijn op te houden dat u wist waar u mee bezig was. Tenminste, tot een jaar of vijf geleden… Nu heb je de keuze uit verschillende front-end frameworks: React, Angular en VueJS.

Front-end frameworks

Na het verschijnen van jQuery zat de populariteit van JavaScript duidelijk in de lift, terwijl de ooit populaire plug-ins Adobe Flash (en in het verlengde daarvan ook Microsoft Silverlight) een stille dood stierven doordat Steve Jobs ze eigenhandig van de iPad wist te weren. Alle inhoud van websites moest sinds ongeveer medio 2010 worden vormgegeven met de standaardtechnieken HTML, CSS en JavaScript. De rol van het programmeren van Flash- en Silverlight-applicaties werd overgenomen door JavaScript. Lees verder Front-end frameworks: keuze te over

De Wet van de IJssalon

Voor het opzetten en ontwerpen van een website of app heb je o.a. een informatie-architectuur en een navigatie-structuur nodig. Aan de hand daarvan kan je als ontwerper gaan nadenken over de knoppen en menu’s die er zoal moeten komen. Je komt daarbij veel goedbedoelde raadgevingen tegen. Bijvoorbeeld: ‘je mag niet meer dan drie keuzes bieden; men moet niet meer dan drie maal hoeven doorklikken’ en meer van dat soort dogma’s. Nou, als je dat zou aanhouden dan zou een website of app idealiter niet méér dan 3 x 3 x 3 = 27 brokken inhoud kunnen bieden ? Lijkt mij stug…
Wat zijn dan wèl goede aanbevelingen?

Gebruikers van websites en apps willen tijdens het navigeren graag aan de winnende hand zijn. Daarom mag je gebruikers tijdens hun zoektocht gerust wat verder laten dóórklikken, zolang ze maar de bevestiging ervaren dat ze naderen wat ze zoeken. Maak het hen dus makkelijk, door hooguit 4 à 5 keuzes te vermelden waar men misschien even over moet nadenken. Òf door opsommingen van opties te bieden die eenduidig verwoorden en/of verbeelden wat men zoekt. Lees verder De Wet van de IJssalon

Het web, 30 jaar later

Als u de internetberichtgeving iets aandachtiger dan normaal hebt gevolgd, dan zal het u niet ontgaan zijn. Deze week dertig jaar geleden, om precies te zijn op 12 maart 1989, deed de Engelsman Tim Berners-Lee, werkzaam bij kernonderzoeksinstituut CERN in Zwitserland een voorstel aan zijn meerdere waarvan hij nog niet kon bevroeden dat het de wereld zou veranderen. In een eenvoudig paper met de droge titel “Information Management” stelde hij een techniek voor waarmee wetenschappers informatie met elkaar konden uitwisselen om zo beter zicht te houden op hun steeds groter wordende projecten.

Enkele jaren later, rond 1991 was een systeem geboren dat hij WorldWideWeb noemde (alle woorden aan elkaar geschreven). Zeker, er waren al netwerken van talloze aan elkaar gekoppelde computers, universiteiten, wetenschappers en militairen hadden al jarenlang toegang tot e-mail, en zelfs de eerste emoji’s waren al geboren. Maar een manier om die informatie in de vorm van documenten en visueel met elkaar te delen bestond nog niet. De rest is geschiedenis, zoals dat zo mooi heet. Lees verder Het web, 30 jaar later