Tag archieven: HTML

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 →

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 →

Web Development

Stop misbruik van je contactformulier

4 reacties

Aan het begin van elke dag liep ik met een plastic zakje om mijn hand door mijn mailbox om alle poep van de spambots op te ruimen. Dat was ik allang zat, maar een hek om mijn mailveldje plaatsen, daar kwam het niet van. Tot ik toevallig iets las over verborgen invoervelden, honingpotten en invultijden. Dat werkt. Ik kan weer met blote handen in mijn inbox graaien. Stop misbruik van je contactformulier! (Foto hierboven: Mathyas op Unsplash.)

Spambots: dol op contactformulieren

Als je na het invullen van mijn contactformulier op verzenden klikt, wordt het verwerkt door een eenvoudig PHP-script. Dat haalt alle velden op, filtert de kwaadaardige code eruit en stuurt vervolgens jouw bericht naar mijn e-mailadres. Helaas zijn spambots dol op contactformulieren. In razend tempo vullen ze elk veld in dat ze tegenkomen en sturen het de wijde wereld in.
Lees verder Stop misbruik van je contactformulier →

Boek van de maand, Uit het boek, Webdesign

Handboek HTML5 en CSS3: afspraken over webtalen

Een reactie plaatsen

Handboek HTML5 en CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3. Dit voorproefje behandelt de afspraken voor de webtalen – HTML5 en CSS – waarmee websites en andere webtoepassingen worden gemaakt. Een interview met Peter Doolaard vind je HIER. De twee eerdere voorproefjes uit het boek HIER en HIER.(H.F.)

Afspraken over webtalen

Sinds 1994 wordt geprobeerd lijn te brengen in de talen waarmee websites (en andere webtoepassingen) worden gemaakt. Die talen zijn onder meer HypertextMarkup Language (HTML) en Cascading Style Sheets (CSS). Daarvoor is het World Wide Web Consortium, kortweg W3C, opgericht. In verschillende werkgroepen overleggen browserfabrikanten zoals Microsoft, Google, Mozilla enOpera. Omdat W3C ook allerlei andere webstandaarden beheert, vindt u onder de leden ook bedrijven als Nokia, Rabobank Nederland, Walt Disney Company en Motion Picture Association of America. Het doel van bijvoorbeeld de werkgroep Web Platform is afspraken maken over hoe een auteur in een webdocument aangeeft dat iets een hyperlink, een kop of een opsomming is, en hoe een browser daarmee zou moeten omgaan.
Lees verder Handboek HTML5 en CSS3: afspraken over webtalen →

Boek van de maand, Interviews

Dirkjan van Ittersum: ‘Men haalt lang niet alles uit WordPress wat er inzit!’

2 reacties

wordpress-boekenDirkjan van Ittersum – de auteur van ‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’ – werkt sinds 1997 als journalist voor radio, internet en allerlei magazines. Als hoofdredacteur was hij verantwoordelijk voor het telecomvakblad Connexie. Ook schreef hij honderden artikelen voor ICT-uitgaven als PC-Active, PCM, Computer Idee, Digitaalgids van de Consumentenbond, InCT en nog vele andere. Op BNR Nieuwsradio is hij regelmatig te horen als nieuwslezer. Ankeiler Media is zijn bedrijf en hij levert van daaruit tekst, audio en video voor print, web en radio. Veelal dus over ICT, telecom en nieuwe media. En over WordPress, waarover hij voor Van Duuren Media in totaal drie boeken schreef. Computercreatief sprak met Dirkjan over zijn boeken, over het optimaliseren van een WordPress-site en over de kennis die je nodig hebt voor het zelf maken van thema’s en het opzetten van een webwinkel.
De twee boeken van Dirkjan van Ittersum worden tot 1 augustus 2016 door de uitgever voor een speciale bundelprijs aangeboden: van €48,90 voor €29,95!  De bestelpagina vind je HIER.
Lees verder Dirkjan van Ittersum: ‘Men haalt lang niet alles uit WordPress wat er inzit!’ →

Boek van de maand

‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’

Terzijde Een reactie plaatsen

‘WordPress-thema’s bouwen’ en ‘Een webwinkel met WordPress’

wordpress-boekenElke maand besteden we speciale aandacht aan een boek uit het fonds van Van Duuren Media. Deze maand gaat het om twee boeken rond het thema WordPress. De boeken van de maand februari zijn twee boeken uit de CMS Development Library: WordPress-thema’s bouwen en Een webwinkel met WordPress van auteur Dirkjan van Ittersum. Op het blog zullen wat voorproefjes uit de boeken verschijnen en er komt een interview met de auteur over de boeken, over het opzetten van een webwinkel, het zelf maken van WordPress-thema’s en over de krachtige mogelijkheden van WordPress.

Deze twee boeken worden tot 1 augustus 2016 door de uitgever voor een speciale bundelprijs aangeboden: van €48,90 voor €29,95!  De bestelpagina vind je HIER.

Het boek CMS Development Library: WordPress-thema’s bouwen behandelt het zelf ontwerpen en maken van een WordPress-thema.  Een WordPress-thema bevat de vormgeving van een WordPress-site en de technische uitvoering daarvan middels HTML, CSS en PHP. Dirkjan van Ittersum loodst je in het boek door alle valkuilen en problemen met het maken van een thema heen.

Dat je met behulp van WordPress ook een webwinkel kan opzetten weten niet veel mensen. In het boek CMS Development Library: Een webwinkel met WordPress legt een prima basis voor je e-commercesite. Met de juiste plug-ins ben je snel klaar voor de verkoop van zowel fysieke als digitale producten. Dit boek toont stap voor stap hoe de plug-in WooCommerce je WordPress-site omvormt tot een geavanceerde webwinkel. Inclusief uitleg over het accepteren van iDEAL-betalingen.