headershadow

Latest Blogposts

Hoe maak je een tooltip in jQuery?

tooltip laten verschijnen met jQueryWanneer een gebruiker over bijvoorbeeld een link of afbeelding gaat met zijn muis dan verschijnt er een heel eenvoudige vorm van een tooltip.

Deze versie heeft echter weinig tot geen mogelijkheden om er wat mee te doen.

Tooltips kun je goed gebruiken als informatiegereedschap. In deze tutorial wil ik een tooltip maken met behulp van jQuery, die extra informatie biedt bij bijvoorbeeld een link.

Title attribuut

Om het eenvoudig te houden maken we gebruik van het title attribuut. Het voordeel is dat mensen die JavaScript niet gebruiken toch ook de extra informatie kunnen zien.

Nadeel van het title attribuut is het niet of onvoldoende kunnen gebruiken van HTML in de tooltip. Daar zijn dan weer andere oplossingen voor.

Voordeel is natuurlijk dat je los kunt gaan met het stijlen van je tooltip dus we gaan maar eens aan de slag.

De css en html code

De link wordt met de volgende html code in je website geplaatst:

HTML templates kopen?

We gaan nu eerst stijl toevoegen aan de tooltip. Die we als class maar even de naam ‘tooltip’ geven.

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #ffed8a;
  width: 200px;
  padding: 2px 6px;
}

Je ziet dat de tooltip absoluut wordt gepositioneerd. Standaard is de tooltip met deze CSS code natuurlijk niet zichtbaar. We moeten dus een hover functie maken zodat bij het over de link gaan met je muis, de tooltip wel verschijnt.

Lees verder »

Karel Geenen, Online marketing advies

Karel Geenen, getrouwd en trotse vader van een zoontje, begon in 2001 met een webwinkel. Deze webwinkel heeft hij niet meer, maar hij heeft de nodige ervaring opgedaan. Hij heeft wel de website die zijn naam draagt: KarelGeenen.nl. Daarnaast is hij eigenaar van online marketing bureau ‘Yargon’.

Karelgeenen.nl en Yargon

De website karelgeenen.nl is uitgegroeid tot een platform over online marketing, inclusief cursussen.

Logo YargonYargon is een bureau waar inmiddels 15 mensen zich dagelijks bezig houden met websites online te laten groeien.

De bezoekers niet vergeten!

Scoren in Google is niet heel erg eenvoudig, de concurrentie is ‘moordend’. Volgens Karel zijn er wel wat pijnpunten: “Bij scoren in Google is het probleem dat webmasters in het begin meestal Google voorop stellen en men de bezoekers vergeet. Hierdoor krijg je meestal een onnatuurlijke website wat uiteindelijk niet resulteert in hoge posities in Google.”

Cursus zoekmachine optimalisatie

Om mensen te helpen, beter te scoren in Google heeft Karel een cursus ontwikkeld. “In mijn cursus leer ik je precies wat zoekmachine optimalisatie is en waar je op moet letten. Stap voor stap (de cursus is in hapklare modules opgebouwd) leer je hoe je zoekmachine optimalisatie moet toepassen.” vertelt Karel.

“Nog belangrijker, je leert ook waarom je dingen wel of niet moet doen. Met deze kennis wordt beslissingen maken in de toekomst ook veel eenvoudiger en loop je niet het risico verkeerde beslissingen te nemen waardoor je bijvoorbeeld gestraft wordt door Google.”

Het doel van de cursus is om de cursist te leren wat zoekmachine optimalisatie is en hoe hij of zij dit kan toepassen op de eigen website zodat men hoog gaat scoren in Google.

Speerpunten

Karel GeenenVoor Karel zijn er wel een paar speerpunten waarmee hij zich wil onderscheiden: “De persoonlijke ondersteuning (je kunt mij op elk moment van de dag vragen stellen die ik direct voor je beantwoord).”

“We leren alleen maar white-hat technieken. Door het volgen van onze cursus loopt je niet het risico om bijvoorbeeld gestraft te worden door Google (en daarmee ook alle bezoekers te verliezen).”

Levenslang toegang

Tenslotte is er het feit dat je levenslang toegang krijgt tot de cursus, dus ook na het behalen van het eindexamen. Dit betekent dat je ook de updates (die bijna wekelijks worden doorgevoerd) gratis blijft ontvangen.

Karel vertelt verder: “We hebben al een flink aantal reacties binnen van enthousiaste cursisten. Zo is er bijvoorbeeld een cursist die de bezoekersaantallen (uit Google) al zag verdrievoudigen op slechts 2 maanden tijd.”

Hou je aan de regels

Hij heeft ook nog wel een tip voor mensen die zich verdiepen in zoekmachine optimalisatie:
“Houd je aan de regels! Google wordt steeds slimmer en het verkeerd optimaliseren kan gevaarlijke gevolgen hebben.”

Meer informatie over de cursus Zoekmachine optimalisatie »

Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

Een website bestaat vaak uit meerdere kolommen. In deze tutorial wil ik je laten zien hoe je een webpagina maakt die bestaat uit 4 kolommen. Deze kolommen hebben een flexibele breedte, afhankelijk van de breedte van het beeldscherm. Let op, ik heb de webpagina niet responsive gemaakt.

Foto portfolio of kranten ‘look’

De 4 kolommen website zie je vaak terug bij websites die het uiterlijk van een krant weergeven of bij een website waar je een foto portfolio in wilt maken. Dat laatste gaan we dan ook oppakken.

Om dit te bewerkstelligen zul je ten eerste een webpagina moeten opzetten die bestaat uit een header en vier divs om de kolommen mee te gaan maken. Ook moeten we een achttal afbeeldingen hebben die we er in gaan plaatsen.
Lees verder »

WordPress Website opzetten voor beginners

Ben je nieuw op het gebied van websites bouwen? Duizelt alle informatie die je op deze en andere websites kunt vinden? Een duidelijk stappenplan in het opzetten van een website is dan wel gemakkelijk en handig.

Je kunt twee kanten op. Ga je jezelf toespitsen op het leren van de techniek, of wil je juist een website om datgene waar je goed in bent voor het voetlicht zetten.

HTML en CSS leren?

De eerste optie is goed als je precies wilt weten hoe alles werkt. Je leert eerst HTML en CSS en gaat daarna steeds een stapje verder. Heel handig en het kan je hopen geld besparen. Je bent namelijk de eerste niet die iemand anders moet inhuren om iets aangepast te krijgen in een door een webdesigner gemaakte website.

WordPress?

De andere mogelijkheid is WordPress. Door met WordPress te gaan werken sla je de technische stappen voor een groot deel over. Niet dat je daar niets aan hebt, maar je kunt eerst je website neerzetten en je dan, op je gemak gaan verdiepen in de techniek. Maar je website staat.

Een eenvoudig stappenplan WordPress

1. Selecteer een domeinnaam
2. Leg de domeinnaam vast
3. Installeer WordPress in 5 minuten
4. Selecteer een WordPress layout
5. Pas je WordPress layout aan, naar je wensen

5 stappen

Deze 5 stappen zijn nodig bij een simpele persoonlijke website tot een uitgebreide zakelijke website. Net wat jij nodig hebt.

Alle stappen zien er eenvoudig uit en ze zijn het in feite ook. Je moet net weten hoe je dit moet doen.

Hoe bepaal je een goede domeinnaam en hoe gaat dat met vastleggen?

Hoe zit dat precies met die fameuze 5 minuten installatie?

Waar vind je de beste layout voor je WordPress website?

Hoe pas je de layout en de website achter de schermen nu eigenlijk aan?

wordpress trainingVeel vragen die ik beantwoord in mijn WordPress training. Gemaakt voor beginners, goed te volgen voor iedereen die een volgende stap wil maken. Bijvoorbeeld van een blogspot website naar een eigen website.

Video training

Voor elke stap zijn er video’s gemaakt. Alles komt duidelijk zichtbaar in beeld. Mocht je ergens vastlopen dan stuur je een mail en dan proberen we samen de oplossing te vinden.

En het mooiste van alles is dat je een domeinnaam en de webruimte al niet meer hoeft te regelen. Dat heb ik alvast voor je gedaan. Heb je daar geen omkijken meer naar.

Deze training kost slechts 97 euro. Je hebt dan levenslang toegang tot de cursus. Daarnaast heb je een jaar lang de domeinnaam en de hosting tot je beschikking.

Naar de WordPress training »

CSS selectors, de familie

In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.

We gebruiken hiervoor een simpele html opzet.

uitleg-css-familie

Ancestor

Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.

Descendent

Descendent – (afstammeling): Een tag in een tag is een afstammeling. In de afbeelding is <body> de afstammeling van <html>.

Tegelijkertijd is <p> een afstammeling van en <body> en <html>.

Parent

Parent – (ouder (in de vorm van vader of moeder)): Een parent is de meest directe stamvader (ancestor). In ons voorbeeld is de <html> tag dus Parent van <body> en <head>, maar niet van alle andere tags.

De <p> tag is de parent van de <em> tag.

Child

Child – (kind): Logischerwijs is dit de benaming voor de tag die direct gerelateerd is aan de voorgaande tag. <h1> en <p> zijn children van <body>. <em> is geen kind van <body> omdat deze onder de <p> valt.

Sibling

Sibling – (broer/zus): Tenslotte heb je de sibling. Deze kun je zien als broer of zus van een andere tag. In ons voorbeeld zijn <h1> en <p> siblings. Evenals <body> en <head>.

Pseudo classes voor links

De meest bekende en gebruikte pseudo classes zijn die voor links. Er zijn vier varianten om een link vorm te geven.

a:link – hiermee wordt de link geselecteerd die nog niet bezocht is en de muis gaat niet over de link heen.

a:visited – Dit is een link waar al eerder een bezoek aan is gebracht. Je kunt een bezochte link dus al informatie meegeven.

a:hover – Hiermee kun je de link voorzien van een mouseover effect. Bijvoorbeeld door een tabblad te voorzien van een andere kleur als je er met de muis over gaat.

Dit effect mag je overigens ook gebruiken voor andere elementen dan een link. Je kunt bijvoorbeeld een paragraaf laten oplichten, zoals ik hieronder laat zien.

Dit is een testparagraaf, ga er eens over met je muis…
Dit is gedaan met de volgende stijl:
p.over {border: 1px solid black;}
p.over:hover {background-color: #333; color: #FFF;}

a:active – Op het moment dat een bezoeker daadwerkelijk klikt kun je ook nog activiteit laten plaats vinden. Bijvoorbeeld het veranderen van kleur.

:first-letter en :first-line

Vervolgens zijn er de twee pseudo elementen :first-letter en :first-line. Je kunt al wel raden waar deze voor bedoeld zijn. Wanneer je de eerste letter van een paragraaf anders wilt vormgeven dan normaal, gebruik dan :first-letter. Wil je de hele eerste regel bijvoorbeeld vetgedrukt hebben in een paragraaf, dan gebruik je :first-line. Dit pas je op dezelfde manier toe als het voorbeeld hierboven met de :hover functie.

In het volgende artikel ga ik het hebben over een volgende rij met pseudo selectors zoals :before en :after.

Dit is het tweede deel van vier artikelen over CSS selectors

Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog