Webdesign 2: introductie

Thomas Byttebier
thomas.byttebier@gmail.com
@bytte

Inhoud webdesign 2
• HTML5 & CSS3
• CSS positionering
• CSS best practices
• CSS advanced
• Flexible web design
• Beautiful semantic forms

Belangrijke begrippen voor
elke webdesigner

<h1 style="color:red">
Vandaag is rood
</h1>

<strong>
Belangrijkste titel
</strong>

<h1>Belangrijkste titel</h1>
!
Veel beter zo—
hou HTML & CSS gescheiden
h1 { color:red; font-weight:bold; }
!
pagina.html
layout.css

<head>
<link rel="stylesheet"
href="layout.css">
</head>
!
Gebruik externe stylesheets—
plaats nooit CSS in je HTML

<font>
<center>
<strike>
<u>
…
!
Voorbeelden van
verouderde elementen

align="left"
background="f.jpg"
bgcolor="red"
border="0"
nowrap
…
!
Voorbeelden van
verouderde attributen

<HTML> of <html>
<br> of <br />
<h1 class=belangrijk> of
<h1 class="belangrijk">
…
!
Syntax = spellingsregels
“conventie over hoe je HTML schrijft”

<HTML>
<h1 class=belangrijk>
<li>Dit is een list-item
<li>Dit is het volgende list-item
<br>
…
!
HTML

<html>
<h1 class="belangrijk">
<li>Dit is een list-item</li>
<li>Dit is het volgende list-item</li>
<br />
…
!
XHTML

Je doet het best zo:
• Gebruik de XHTML syntaxregels
• Blijf altijd consequent
• Valideer je syntax veelvuldig

“De semantiek is een wetenschap die
zich bezighoudt met de betekenis van
symbolen, woorden en zinnen.”
—Wikipedia

<p>
<ul>
<em>
<strong>
<h1>
<h2>
<blockquote>
<form>
…
!
Elke HTML-tag heeft een specifieke
betekenis—maak er gebruik van!

<p>
Deze HTML is goed.
</p>
!
<p>
Deze <abbr title="Hypertext
Markup Language">HTML</abbr>
is beter.
</p>
!

<p>
Jantje zag eens hangen:<br>
- pruimen<br>
- appelen<br>
- bananen
</p>
!
<p>
Jantje zag eens hangen:
</p>
<ul>
<li>pruimen</li>
<li>appelen</li>
<li>bananen</li>
</ul>
!

<p>
Thomas vertelde ons:
“Semantische code is belangrijk.”
</p>
!
<p>
<cite>Thomas</cite> vertelde ons:
<q>Semantische code is belangrijk.</q>
</p>
!

Door semantische code te schrijven,
maak je de betekenis van je tekst
bekend. Software kan hierop inspelen
en je website gebruiksvriendelijker
maken.

• Snellere laadtijden
• Makkelijker te onderhouden code
• Goede weergave in elke browser
• Ook in toekomstige browsers
• Goede weergave in andere
omstandigheden (mobiel,
screenreaders, tekstbrowsers…)
• Betere score in zoekresultaten
• We dragen bij tot een beter internet!

Aangeraden voor elke
webdesigner
Net iets minder belangrijk
maar desalniettemin ten zeerste

Start elke site met een
duidelijke mappenstructuur
1
(En gebruik altijd dezelfde!)

Map- en bestandsnamen
• Geen spaties
• G**n spéciàle t€ken$
• Alles kleine letters
• Altijd
• Overal
• Always, everywhere

Afbeeldingen
• jpg, png of gif
• zoek het beste bestandsformaat
• optimaliseer elke afbeelding
• pas het formaat aan
• bestandsnaam: zie vorige

Gebruik web safe fonts
of duidelijke webfonts
5

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam euismod et lectus non
dapibus. In sed feugiat turpis. Maecenas ac
ligula eu massa scelerisque lacinia.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
Nullam id quam eros. Morbi egestas
pharetra lorem vel molestie. Nullam
pharetra risus vel dui malesuada pharetra.
Fusce viverra tempus elit, eget sollicitudin
ligula laoreet eu. Nulla condimentum, tellus
ut rhoncus pretium, massa justo sollicitudin
mi, vel interdum tellus orci eget turpis.
Fusce congue elit id dolor aliquet, ac
ultricies justo placerat. Pellentesque
bibendum ligula sed dictum vehicula. Sed
vestibulum, massa a malesuada suscipit,
risus elit iaculis augue, vel pellentesque
purus massa in eros.
Morbi mauris sem, volutpat nec eleifend
rutrum, elementum volutpat nisl.
Accumsan, rutrum magna et, posuere ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
euismod et lectus non dapibus. In sed feugiat turpis. Maecenas ac
ligula eu massa scelerisque lacinia.Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Nullam id quam
eros. Morbi egestas pharetra lorem vel molestie. Nullam pharetra
risus vel dui malesuada pharetra. Fusce viverra tempus elit, eget
sollicitudin ligula laoreet eu. Nulla condimentum, tellus ut rhoncus
pretium, massa justo sollicitudin mi, vel interdum tellus orci eget turpis.
Fusce congue elit id dolor aliquet, ac ultricies justo placerat.
Pellentesque bibendum ligula sed dictum vehicula. Sed vestibulum,
massa a malesuada suscipit, risus elit iaculis augue, vel pellentesque
purus massa in eros.
Morbi mauris sem, volutpat nec eleifend rutrum, elementum volutpat
nisl. Morbi congue mi ut enim facilisis, non molestie leo ultrices.
Curabitur at imperdiet ante, a volutpat nibh. Fusce sagittis diam nec
lectus sodales, sed imperdiet est condimentum. Etiam id dui volutpat,
mattis justo a, placerat sem. Curabitur sodales luctus vulputate.
Mauris vel dapibus est. Nulla interdum adipiscing magna, vitae
gravida magna dapibus a.Vestibulum consectetur posuere nisi, id
congue erat mattis in. Duis cursus leo at ornare consectetur. Nullam
dictum est ornare, iaculis ante gravida, ultricies massa. Integer.

Ontwerp voor verschillende
schermresoluties
6

voor januari 2014 — http://www.w3counter.com/globalstats.php

Ontwerp voor
verschillende apparaten
7

voor augustus 2014 — http://www.w3counter.com/globalstats.php

Test met verschillende
browser, versies & apparaten
8

Onmisbare software
voor elke webdesigner

Interessant leesvoer
voor elke webdesigner

Webdesign 2: introductie

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a Webdesign 2: introductie

Semelhante a Webdesign 2: introductie (10)

Mais de Thomas Byttebier

Mais de Thomas Byttebier (8)

Webdesign 2: introductie