Tag archieven: Peter Doolaard

CSS, Web Development, Webdesign

Het boxmodel van CSS

Een reactie plaatsen

Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Lees verder Het boxmodel van CSS →

CSS, HTML, JavaScript, Web Development, Webdesign

Maak een schakelaar met CSS en HTML

Een reactie plaatsen

Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML →

CSS, Web Development, Webdesign

Specificiteit in CSS, zo werkt het

Een reactie plaatsen

Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

Lees verder Specificiteit in CSS, zo werkt het →

CSS, Web Development, Webdesign

Leer werken met nieuwe pseudoklassen van CSS

Een reactie plaatsen

Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS →

HTML, Web Development, Webdesign

Emoji als favicon

Een reactie plaatsen

Sinds kort ondersteunen alle moderne browsers SVG als bestandsformaat voor favicons. Een bijwerking is dat je nu ook emoji’s als SVG-favicon kunt gebruiken. (Opfrisser: een favicon is het pictogram in een browsertab of op het homescreen van je telefoon.) Nou is een emoji in de browsertab niet een heel serieuze toepassing.  De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken.

Browsertab met emoji als favicon.
De emoji als favicon in Firefox op Windows.

Lees verder Emoji als favicon →

CSS, HTML, Web Development, Webdesign

Toveren met CSS Grid Layout

Een reactie plaatsen

CSS is de opmaaktaal voor websites en -apps. Met de bundel van drie boeken uit de Web Development Library over die onderwerp leer je alle mogelijkheden, waardoor je veel betere websites ontwerpt. In het boek CSS 3 van Doolaard en Kassenaar leer je werken met CSS-selectors, maateenheden, het box-model, kleurmodellen en meer. De vele oefeningen maken het tot een perfect (zelf-)studieboek. Ben je de basis voorbij? In CSS Flexbox & Grid Layout helpt Peter Doolaard je met het maken van lay-outs voor webpagina’s met Flexible Box Layout en CSS Grid Layout. Deze technieken zijn bedoeld om op een intuïtieve manier complete webpagina’s, apps en onderdelen van de gebruikersinterface in te delen. Met het boek Bootstrap 4 van Peter Kassenaar kunnen niet-designers hun websites snel op consistente en eenvoudige manier opmaken, terwijl ‘echte’ designers hun hart kunnen ophalen aan de vele mogelijkheden die het framework biedt om het naar eigen wens in te stellen. Vergroot je CSS-expertise en bestel deze drie boeken samen voor een voordelige prijs. Hieronder vind je een voorbeeld over het werken met CSS: Toveren met CSS Grid layout van de hand van Peter Doolaard.(H.F.)

Toveren met CSS Grid layout

Hoe bouw je met dezelfde HTML-codebasis een website met vier gezichten? Je leest het in dit artikel waarin we de website rollingstone.com namaken. De lay-out van deze website varieert van één tot vier kolommen waarbij de inhoud steeds net even anders wordt gepresenteerd. CSS Grid Layout en de nieuwe optie subgrid zorgen voor de magie.

Lees verder Toveren met CSS Grid Layout →

Interviews, Webdesign

Peter Doolaard: ‘Er is eigenlijk geen goede wysiwyg-editor voor websites’

1 reactie

HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In de zesde, bijgewerkte editie van het Handboek HTML en CSS leer je met beide webtalen werken. Je leert eerst hoe je de content markeert met HTML. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt van dit handboek daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken. We spraken in met Peter Doolaard, de auteur van het boek over de doelgroep van het boek en het nog steeds ontbreken van een goede wysiwyg-editor voor websites.
Lees verder Peter Doolaard: ‘Er is eigenlijk geen goede wysiwyg-editor voor websites’ →

Boek van de maand, Webdesign

Handboek HTML5 & CSS3, 4e editie

Terzijde Een reactie plaatsen

Handboek HTML5 & CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Het is geschreven door Peter Doolaard, die naast zijn boeken over HTML en CSS ook (mede)auteur is van o.a. het ExpertHandboek Windows 10. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3.

Van alle technieken voor het maken van webpagina’s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML geen webpagina’s en zonder CSS blijft het een kale boel. In deze vierde, bijgewerkte editie van dit handboek leer je omgaan met beide webtalen. Je leert eerst hoe je de content markeert met HTML zodat de paginastructuur klopt. Daarna maak je de onderdelen op de pagina op met CSS. Het uitgangspunt daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

Besturingssystemen, Computers, Windows, Windows 10

VoorIntekenPrijs: Het Complete Boek Windows 10, 2e editie

Een reactie plaatsen

De eerste editie van Het Complete Boek Windows 10 was in december 2015 het boek van de maand. De nog steeds actuele voorproefjes uit de 1ste editie die we op dit blog publiceerden kun je HIER,  HIER en HIER vinden. Nu is er een tweede editie met bijvoorbeeld alle informatie over de Jubileumupdate van eind vorige jaar.

Het Complete Boek: Windows 10, Tweede editie is geheel in kleur uitgevoerd en is bijgewerkt voor de Jubileumupdate; dankzij het AUB-programma word je op de hoogte gehouden van nieuwe ontwikkelingen en updates. Het door de wol geverfde auteursteam gaat in op de nieuwe en leuke mogelijkheden die dit krachtige besturingssysteem biedt. Je wordt volledig bijgepraat over oude en nieuwe functies. Een interview met Peter Doolaard, een van de auteurs van het boek, vind je HIER.
Dit uitgebreide boek kun je t/m 23 februari reserveren voor €39,99 in plaats van €49,99. Het boek verschijnt omstreeks 27 februari.

Bewaren

Besturingssystemen, Boek van de maand, Interviews, Software, Windows, Windows 10

Peter Doolaard: ‘De manier waarop in Windows 10 systeemherstel werkt, vind ik een van de goede vernieuwingen’

Een reactie plaatsen

windows10Het boek van de maand Het Complete Boek Windows 10 is geschreven door een auteurscollectief bestaande uit Peter Doolaard, Peter Kassenaar, John Vanderaart, Erwin Olij en Bob van Duuren. Peter Doolaard schreef de update van het boek van Windows 8.1 naar Windows 10. ComputerCreatief ging bij Peter op bezoek in zijn landelijk gelegen boerderij vlakbij Schoonhoven, om te praten over Het Complete Boek Windows 10 en over de belangrijke vernieuwingen en veranderingen in Windows 10.

Het boek is nogal een pil met in totaal 720 pagina’s! Hoe werken jullie samen aan zo’n dik boek?
Peter Doolaard: ‘Het is een dik, prestigieus boek geworden, met alles wat je over Windows 10 wilt weten. De eerste versie van het boek behandelde Windows 7 en vanaf dat moment is het boek steeds bijgewerkt. We schrijven het niet telkens van de grond af opnieuw, er is een deel van Windows dat op dezelfde manier blijft werken. Er is altijd één van de auteurs van het team die de update maakt en dat was ik deze keer. Vorige keer heeft Erwin Olij het gedaan. Peter Kassenaar heeft zijn Handboek Windows 10 en dat zit hier voor een deel in. De eerste acht hoofdstukken in ‘Het Complete Boek Windows 10’ zijn het werk van Peter Kassenaar en de twintig andere hoofdstukken zijn voor het grootste deel van mij. John Vanderaart heeft ooit een stuk over beveiliging en over netwerken geschreven, ik heb voor Het Complete BoekWindows 7 het hele netwerkdeel herschreven op basis van zijn informatie. En van Erwin Olij en Bob van Duuren bevat ons boek stukken uit ‘Ontdek Windows 10’ en ‘Leer je zelf Snel Windows 10’. Die boeken zijn oppervlakkiger dan dit complete boek, dus zijn die onderdelen flink aangevuld.’
Lees verder Peter Doolaard: ‘De manier waarop in Windows 10 systeemherstel werkt, vind ik een van de goede vernieuwingen’ →

Besturingssystemen, Boek van de maand, Windows, Windows 10

Het Complete Boek Windows 10

Terzijde Een reactie plaatsen

Het Complete Boek Windows 10

windows10Elke maand besteden we speciale aandacht aan een nieuw boek uit het fonds van Van Duuren Media. Het boek van de maand december is Het Complete Boek Windows 10 van het auteursteam bestaande uit Peter Doolaard, Peter Kassenaar, John Vanderaart, Erwin Olij en Bob van Duuren. Op het blog zullen we wat voorproefjes uit het boek geven en er komt een interview met Peter Doolaard over het boek, met tips over het gebruik van het menu Start in Windows 10, het beheren van bestanden en het werken met de nieuwe browser Edge…

Met de komst van Windows 10 slaat Microsoft meer dan ooit een nieuwe weg in: het besturingssysteem is niet alleen gratis voor gebruikers van Windows 7 en 8, maar het wordt ook gaandeweg bijgewerkt. Een compleet besturingssysteem als Windows 10 vraagt om een compleet boek. Het Complete Boek: Windows 10 is geheel in kleur uitgevoerd en het door de wol geverfde auteursteam gaat in op de nieuwe en leuke mogelijkheden die dit krachtige besturingssysteem biedt. U wordt volledig bijgepraat over oude en nieuwe functies. Meer informatie over het boek vind je HIER.