Blog Image

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

Form formating

HTML & CSS Posted on 30 jan, 2017 16:19:11

Formulieren zijn lastig om netjes te formatteren. Niet alle velden zijn even lang en/of hoog.
Een oplossing zou kunnen zijn om de lengte van de verschillende velden even groot te houden zonder het aantal characters te beperken. De gebruiker ziet enkel een “window” van zijn input, maar ons formulier ziet er wel netjes uit.
Deze oplossing is niet echt aanvaardwaar, UX, is en blijft een van de belangrijkste factoren waar we rekening mee houden als we onze user-interface ontwerpen.

We moeten dus naar andere oplossingen kijken, CSS transformaties bijvoorbeeld.
de code achter deze link geeft een voorbeeld van een mogelijke elegante oplossing voor ongelijke input-velden.
Laat eens weten wat jullie hiervan vinden



Article versus Section

HTML & CSS Posted on 16 jun, 2016 15:10:37

Een groot deel van de vragen die opduiken op forums, StackOverflow
,Twitter , e.d., in verband met HTML5, gaan over het gebruik van “<article>”
of “<section>

Heel vaak is het antwoord “geen van beiden, gebruik <div>“.

Deze twee HTML5 tags, article
of section,
zijn niet zo gemakkelijk
om te gebruiken omdat ze ons dwingen om
na te denken over wat we aan het schrijven zijn en de manier waarop we onze
inhoudgaan presenteren.

We moet nadenken op een manier die we nog niet eerder hadden
bij het opmaken van een HTML-pagina. En terwijl dit een goede zaak, het vereist
wel inspanning.

<div>

Als je gewoon een deel van je site wil stijlen, zonder dat
de ingesloten elementen een structurele link met elkaar hebben, gebruik dan <div> .

<section>

Een sectie is een
generiek deel van een document of toepassing.

Een deel, in deze context, is een thematische groepering van
inhoud, meestal met een titel.

Laten we als voorbeeld een krant nemen.

Een krant is opgedeeld in verschillende secties: een sectie
binnenland, een sectie buitenland, een sport-sectie, cultuur pagina’s ,…. .

Elk van deze secties staan op zichzelf en bestaan uit een
aantal artikels.

<article>

Een article is specifiek deel van een sectie in die zin dat
het een een op zichzelf staand (self-contained) deel van een document, pagina, applicatie of website is.

Dus met behulp van de bovenstaande kranten analogie zal de sport-sectie,
enkel artikels bevatten die over sport gaan maar die volledig op zichzelf staan
(self-contained).

Nesting

Om alles nog wat ingewikkelder te maken mag je “<article>” en “<section>” zoveel nesten als je wil. Voor HTML5 is het
allemaal om het even

Voorbeeld:

<section>

<h1>Sport</h1>

<article>

<h1>Voetbal</h1>

<section>

<h3>Antwerp</h3>

</section>

<section>

<h3>Anderlecht</h3>

</section>

</article>

</section>

Conclusie

“<article>” of
“<section>” dwingen ons om na
te denken over de onderlinge samenhang van de verschillende onderdelen van onze
web-paginas.

Indien er geen hiërarchisch verband is tussen de
verschillende onderdelen kan je werken met enkel secties, met enkel
artikels ofwel gebruik je gewoonweg <div>.