We introduceren een nieuw abonnement: nu kun je alle cursussen onbeperkt inzien voor een bedrag van 60 euro. Aangezien veel mensen twee cursussen kopen, is dit een stuk leuker, je kunt dan voor ongeveer dezelfde prijs gewoon alles zien. En dat voor 5 jaar lang!
Dit past in ons voornemen om van Dreambits een platform te maken waar je een compleet pakket aan cursussen op het gebied van webdesign kunt vinden: vanaf de allereerste stappen op het gebied van HTML en CSS, tot geavanceerde onderwerpen als CSS Grid en Flexbox , de moderne CSS layout modules. Maar ook design met Photoshop en Illustrator voor het web en Javascript horen in dit rijtje. Dit jaar hebben we al nieuwe cursussen gemaakt voor WordPress, CSS in WordPress en een nieuwe basiscursus CSS. Binnenkort volgt een nieuwe cursus HTML.
Waarom nieuwe cursussen voor HTML en CSS?
Dat heeft verschillende redenen. Allereerst zijn deze cursussen alweer uit 2015. De inhoud is nog wel actueel, maar het oogt hier en daar een beetje verouderd door het gebruik van de editor. Daarbij willen we de cursussen nu meer modulair maken en daarom zijn CSS en HTML gescheiden. Mensen kunnen dan enkel leren wat ze nog niet kennen of waar ze behoefte aan hebben. Tegelijkertijd houden we in ons achterhoofd dat mensen het complete pakket willen doornemen, en daarom maken we de cursussen zo dat ze helemaal op elkaar aansluiten. Daarbij willen we de cursussen liever niet te lang maken. We streven naar cursussen van maximaal twee uur video, en afzonderlijke video’s niet langer dan drie minuten (maar dat lukt niet altijd, sommige onderwerpen hebben nu eenmaal net iets meer tijd nodig)
Op dit moment is het all-in-one abonnement nog niet beschikbaar, neem contact op als je interesse hebt!
De volgende nieuwe cursus is CSS Basis. We hebben ervoor gekozen om dit los te trekken van HTML, en voor CSS aparte cursussen te maken. Dit maakt de cursussen compacter. Deze cursus is 2 uur lang en leert je de basis van CSS.
Na het doornemen weet je wat CSS is, hoe je het kan toepassen in webpagina’s, alsmede de belangrijkste eigenschappen voor tekst, kleuren achtergronden, lijsten, links, tabellen, en je leert hoe je eenvoudig zelf Google fonts kunt gebruiken in je site.
Ook leer je alle basis eigenschappen van CSS layout: inline- en block elementen, het zogenaamde box-model van CSS, positionering van elementen door absolute, relatieve, fixed, sticky positionering en “float”, elementen zwevend maken.
Daarnaast leer je de basis van Media Queries, om inhoud aan te passen aan schermgrootte.
Na deze cursus ben je klaar voor het grote werk: de nieuwste CSS modules op het gebied van layout: Flex Layout en CSS Grid. Deze laatste twee cursussen staan op de planning voor volgend jaar, 2020.
We hebben een update gereed voor de WordPress cursus. Deze is bijgewerkt voor de nieuwe blokeditor, “Gutenberg”. Alle video’s waarin de oude editor een rol speelt zijn aangepast.
Daarnaast is de cursus ook geheel aangepast op het nieuwe werken met WordPress, die het gevolg is van deze ontwikkeling: het is nu niet meer nodig om enkel voor de layout je thema te kiezen. Met Gutenberg kun je zelf de layout aanpassen, met gebruik van plugins voor de editor. Deze bieden uitbreiding van de bestaande blokken, waardoor het mogelijk wordt om allerlei layout elementen zelf in te voegen.
Na een eerste kritische houding zijn we nu erg enthousiast over de nieuwe editor: uitgebreide zware thema’s zullen steeds minder nodig zijn. Je zult ook minder plugins nodig hebben.
Zeer binnenkort zal onze cursus geupdtaed worden, dan volgt meer nieuws.
Nieuwe cursus: leer in één uur hoe hoe je CSS gebruikt in WordPress. CSS gebruiken geeft de optie om elk thema wat betreft kleuren, lettertypes en ander uiterlijk vorm te geven naar je eigen wensen.
CSS kan er ook voor zorgen dat je site sneller blijft, want je hoeft wellicht minder plugins te gebruiken, omdat je zelf meer aanpassingen kunt maken.
Flex is een nieuwe layout module in CSS, die eindelijk het maken van layouts makkelijk maakt. Er zijn allerlei CSS eigenschappen beschikbaar om rijen of kolommen te maken en de onderdelen onderling uit te lijnen en te schalen. Het werkt als volgt: je maakt van een element een flex container met de eigenschap display:flex. Alle directe kinderen worden nu flex-items. Er zijn verschillende eigenschappen voor de container en voor de flex-items mogelijk.
Simpel een indeling in kolommen maken
Als voorbeeld hier een van de meest simpele toepassingen: 3 even brede kolommen maken.
We maken nu in CSS van de section een flex container. De items krijgen flex:1, wat (kort uitgelegd) betekent dat ze allemaal even groot worden.
section { display:flex; } div { flex:1; }
Dit is alles wat nodig is om een pagina met drie kolommen te maken. Er is nu nog niets te zien, daarvoor geven we de items (de div elementen) een achtergondkleur, en zetten we er iets in, dat we centreren. Ook geven we de flex-container (het section element) een hoogte, 300pixels.
In Flexbox zijn geen instrumenten ingebouwd voor marge of padding, dat doen we dus met de bekende CSS eigenschappen. De complete CSS ziet er dan als volgt uit:
De kolommen zullen nu meeschalen met het scherm, ze zullen altijd altijd het complete scherm vullen, hoe groot of klein dat ook wordt. En standaard nemen ze al de complete hoogte van de container in beslag, alle kolommen even hoog dus! Flex zal in principe altijd alle flexitems op één rij houden, maar ze kunnen dan wel eens erg smal worden. Om dat te voorkomen, kun je een minimum breedte aangeven voor de items, en de container aangeven dat er wrap mag optreden, waardoor items die niet passen op een volgende rij komen. Vervolgens zijn er dan nog mogelijkheden om de overgebleven ruimte te verdelen, waardoor je alles perfect kunt uitlijnen, op verschillende manieren, zoals gecentreerd, rechts, links, en verdeeld over de pagina met dezelfde tussenruimte.
Volop mogelijkheden, dus, waar we later zeker op terug zullen komen. Een cursus Flexbox zit ook in de planning.
Dat moet toch niet zo lastig zijn? Dat zou je inderdaad denken, maar als je iets langer met HTML/CSS bezig bent, weet je dat dat wel zo is. Vreemd genoeg is daar nooit iets voor ingebouwd. Sowieso het maken van lay-outs is nooit een sterk punt geweest, omdat de oorspronkelijke uitvinders van HTML iets wilden maken voor het uitwisselen van tekstbestanden, met hyperlinks. Ze hebben er nooit bij stilgestaan dat men later iets met vormgeving zou willen.
Afijn, dit heeft er toe geleid dat er tot voor enkele jaren niets was waarmee je dat makkelijk kunt doen, zonder kunstgrepen of dingen gebruiken waarvoor ze niet zijn gemaakt. (Een tabel bijvoorbeeld). Tot Flexbox kwam.
Flexbox
Volledig: CSS Flexibele Box Layout Module is een nieuwe module die speciaal voor layout is gemaakt. Nou ja nieuw, er is wel bijna 10 jaar aan gewerkt, maar het resultaat is best goed!
In ieder geval is verticaal centreren heel simpel geworden: om dat te doen maak je van een element een flexbox container, en plaats je er iets in dat je centreert (horizontaal, en ook vertikaal!) met margin:auto;
Wist je dat je tegenwoordig super simpel kolommen kunt maken? Eén regeltje CSS is voldoende. Bijvoorbeeld twee kolommen definieer je op een HTML element door aan te geven in de CSS: columns:2; zo simpel is het. Alles in deze kolom zal dan in twee even brede kolommen gezet worden, en de kolommen zullen even hoog zijn.
Dit is gedefinieerd in de CSS Multi-Column Layout Module van het W3C. Het is een uitbreiding op block layout mode en wordt ondersteund door alle moderne browsers, en zelfs IE 10 en 11.
Aantal kolommen
Hoe werkt het? Stel, je hebt een div element met hierin een paar koppen en verschillende paragrafen. Het is voldoende om aan de div de volgende CSS regel mee te geven:
div {
column-count:2
}
Dit zal er toe leiden dat alle inhoud van de div altijd in twee kolommen wordt weergegeven. Maar, natuurlijk leidt dit tot problemen op bijvoorbeeld telefoons, waar je dit niet zult willen. Lees verder!
Kolom breedte
Naast het aantal kolommen kun je echter ook een breedte van de kolommen opgeven. Deze zal echter niet absoluut gelden, maar is een aanduiding voor de “optimale” breedte van een kolom. Als er meer ruimte is, zullen er meer kolommen worden gemaakt, bij minder ruimte minder. Bij het opgeven van enkel een breedte, zal het aantal kolommen responsive worden aangepast!
div {
column-width:20em;
}
Aantal en breedte samen
Je kunt echter ook breedte en aantal samenvoegen. Neem de volgende CSS regel:
div {
column-count:3;
column-width:20em;
}
Er zullen nu drie kolommen worden weergegeven die steeds breder worden op grote schermen. Wanneer er echter niet meer voldoende breedte is, zal het aantal kolommen gereduceerd worden om zoveel mogelijk de gewenste breedte te benaderen. Perfect responsive, zonder media queries!
Kolom marge en rand
Daarnaast biedt de specificatie nog de mogelijkheid om de ruimte tussen kolommen aan te passen met column-gap, en een lijn tussen de kolommen te plaatsen met column-rule. Deze laatste werkt hetzelfde als borders: er kan een soort worden opgegeven, een breedte en een kleur.
Bijvoorbeeld:
div {
columns: 3 20em;
column-gap:50px;
column-rule: thin solid grey;
}
Het resultaat en alle code kun je hier bekijken:
https://codepen.io/zomtek/pen/xQOgXZ
In deze video zie je hoe je ZONDER het gebruik van een plugin je WordPress site tweetalig kunt maken. Maar waarom zou je dat willen? Daar zijn toch wel plugins voor? Ja, dat klopt, maar een plugin heeft als nadeel dat je altijd maar dat kan doen, wat in de plugin zit. Je wordt gedwongen zo te werken. Tevens maakt het gebruik van veel plugins je site ook langzamer, ze zijn niet altijd compatibel met de rest en ze vormen een potentieel risico voor hackers. Het voordeel van zelf doen, is dat je alles exact kan doen zoals jij wilt, met de mogelijkheden en op de manier die jij wilt. Niets meer, niets minder.
Zeer binnenkort, bij de lancering van WordPress 5, krijgt het programma een nieuwe editor. Dit zal een grote verandering teweeg brengen in de manier waarop je werkt.
De editor is het hart van het programma: hier maak je immers je content, de teksten en afbeeldingen ga je hier plaatsen. De nieuwe editor, met de naam “Gutenberg”, gaat het werken met WordPress echter drastisch veranderen. Het gaat namelijk niet enkel om het invoeren van tekst. In drie stappen zal Gutenberg WordPress omvormen naar een moderne, intuïtieve omgeving waar je naast teksten ook de vormgeving van je pagina aan kunt passen.
Focus op blokken
Een aantal blokken van de editor
Had je vroeger een leeg vlak als editor, nu kies je een blok, zoals een kop, paragraaf of afbeelding. Idee is, dat je de focus beter bij dat ene onderdeel kunt houden. En dat de content ook dichterbij blijft. Het invoegen van een afbeelding bijvoorbeeld is een stuk intuïtiever: je ziet meteen de opties, zoals uitlijning en onderschrift toevoegen. Je sleept zelfs een afbeelding gewoon vanuit je desktop de editor in!
Opties onder handbereik
Via een uitklapmenu heb je allerlei opties van een blok onder handbereik:
blok opties
Je kunt blokken dupliceren, naar boven of onder schuiven, maar je kunt ook nog rechtstreeks HTML invoegen. Dit zet het blok wel om naar een HTML-blok, wat in principe hetzelfde werkt als de klassieke editor.
De meest opmerkelijke actie is hier: “Voeg toe aan herbruikbare blokken”: je kunt nu dus content maken die je in andere berichten of pagina’s makkelijk weer invoegt. Dit maakt het kopieren en plakken van stukken inhoud van de ene naar de andere pagina een stuk eenvoudiger.
Nieuwe blokken
Maar dit brengt in feite nog niets nieuws, op een andere manier doen we dit nu ook. Gutenberg gaat echter verder, en maakt bijvoorbeeld het invoegen van externe content makkelijker:
externe content toevoegen
Via “nieuw blok invoegen” krijg je de optie om vanuit talloze sociale media platformen content toe te voegen. Dit kan nu weliswaar ook, maar dit werkt via ene moeilijk te vinden optie die verre van voor de hand liggend is. Met de nieuwe editor ligt het allemaal onder handbereik.
Makkelijk content invoegen
Blokken invoegen kun je vanaf verschillende plaatsen, zoals bovenin links van het scherm. In onderstaande afbeelding zie je de verschillende categorieën.
Allereerst zullen de blokken die je meest gebruikt, bovenin worden verzameld. We hebben nu de algemene blokken gezien, en de categorie “insluitingen”. Maar er is meer. Via “opmaak” kun je nu eenvoudig kolommen toevoegen aan je bericht, en via “widgets” verwijzingen naar de nieuwste berichten of bericht-categorieën.
De toekomst
Dit is nog maar stap één van het project Gutenberg. De bedoeling is, dat in fase twee het maken van pagina templates mogelijk wordt (de verschillende lay-outs voor pagina’s die je nu in de meeste templates enkel bij “pagina’s zult aantreffen), en in fase drie het maken van complete site lay-outs.
Bedenkingen
Zijn er ook bedenkingen? Jawel, die heb ik zeker. KIjk maar eens naar deze afbeelding:
Bij het bewerken van een blok krijg je aan de rechter kant van het scherm allerlei opties om het blok te bewerken. Zo kun je de grootte van het lettertype aanpassen, kleuren toevoegen voor de achtergrond, enzovoorts…
Dit is natuurlijk heel handig en maakt het makkelijk voor iedereen, maar…. is dit wel de juiste werkwijze? Dit is wat we noemen “inline opmaak”, dus opmaak recht op een stuk tekst. In de laatste 15 jaar hebben we nu juist een ontwikkeling gezien die het scheiden van content en opmaak tot grootste goed heeft verheven, en niet zonder reden! Als een editor nu mensen gaat verleiden om “makkelijk” opmaak toe te gaan passen op afzonderlijke blokken, dan gaan we weer terug naar af!
Want stel bijvoorbeeld dat je de tekstgrootte van je berichten eigenlijk iets groter wilt hebben, en je gaat dat hier bij elke paragraaf in elk bericht zo instellen, wat dan als je dat later aan wilt passen? Dan moet je dat bij elk bericht weer aan gaan passen? Dat zou ons terug brengen naar 1997! Het zet ook de deur wagenwijd open voor allerlei aanpassingen op gebruikers niveau die je eigenlijk helemaal niet wilt. Zoals dit blok, met grotere tekst en oranje achtergrond. Heel makkelijk te doen nu, maar lelijk en compleet in strijd met de opmaak van de rest van de site…
Het is goed om de minder technisch onderlegde gebruiker mogelijkheden te bieden, maar het moet wel gebeuren met de bestaande “beste praktijk richtlijnen” voor ogen! Dus wat we hier zien is wel een bron van zorg.
De komende tijd gaan we alle mogelijkheden van de editor nader bekijken en zul je hier ook video’s van terug zien, hou het in de gaten!
De afgelopen tijd heb ik de laatste hand gelegd aan de cursus WordPress. In 48 video’s worden in ongeveer twee en een half uur alle onderdelen van WordPress getoond, vanaf de verschillende manieren van installatie tot het gebruiken van plugins en themas.
In de loop van deze maand zal de cursus beschikbaar komen.
Hier alvast een voorproefje: hoe maak je vanaf het dashboard snel een concept bericht:
WordPress is het meest gebruikte CMS systeem, een systeem waarbij je zonder kennis van de bekende opmaak- en programmertalen een website kunt maken. Vanwege zijn eenvoud is het razend populair, ongeveer een derde van alle websites is gemaakt met WordPress.
Plugins
Het systeem bevat vanuit de basis enkel de hoogst noodzakelijke elementen. Hierdoor blijft het overzichtelijk en levert het snelle websites op. Voor meer functionaliteit kun je dan zogemaamde ‘plugins’ installeren, vanuit WordPress zelf.
Lay-outs
Wil je een ander uiterlijk, dan zijn er duizenden gratis lay-outs toe te voegen. Maar ook vele betaalde ‘themes’ die boordevol functionaliteit zitten. Met dat laatste moet dan wel weer worden opgepast, want veel van de betaalde thema’s zijn zo volgestouwd dat je site er merkbaar langzamer van wordt.
Ondersteuning is te vinden op wordpress.org, deze is zeer uitgebreid maar kan wel snel wat technisch worden. Indien dat het geval is, dan kun je via een simpele zoekactie op Google meestal snel antwoord vinden op je vragen.
