ScorenMetWebsites
Download
Report
Transcript ScorenMetWebsites
Scoren met websites
Bouw zelf een digitaal visitekaartje
Een website
is een map met een verzameling
bestanden in die onderling gelinkt zijn.
Mogelijke bestanden in een website:
• Webpagina’s:
•
•
•
•
Stylesheets:
Afbeeldingen:
Multimedia:
Scripts:
htm of html-bestanden (statisch)
php of asp-bestanden (dynamisch)
css-bestanden (opmaak)
jpg- of png-bestanden
filmpjes en geluidsbestanden
java en ajaxscripts (o.a. klapmenu’s)
NB: scripts zijn niet noodzakelijk voor een mooie website
Een website
in de browser bekijken
de browser zoekt op het ingetikte adres naar
het index bestand:
•
•
index.htm of index.html meestal statische pagina’s
index.php of index.asp maken scripting en database
mogelijk
de homepage van een website heet dan ook
altijd “index”. Let op de kleine letters, want dat
doet de webserver ook!
NB: scripts zijn niet noodzakelijk voor een mooie website
Een website – afspraken
houd je aan de volgende afspraken als je
een website bouwt:
• bestandsnamen zijn altijd in kleine letters, dus niet “Index.html “
en wel “index.html”, niet “Stijl.CSS” wel “stijl.css” en ook niet
“Roel.jpg”, maar wel “roel.jpg”
• bestandsnamen bevatten nooit spaties, niet “cv wim.html” en
wel “cv-wim.html” of “cvwim.html”
• bestandnamen geven een hint over de inhoud en zijn kort
• bestanden zijn niet te groot, want niet iedereen heeft een snelle
verbinding. Weet wat je doelgroep voor spullen heeft!
Een website – doel en doelgroep
bouw je nooit voor jezelf, je bouwt hem
voor anderen
Dus voordat je begint te bouwen denk je na
over:
•
•
•
•
•
WAT je wilt bereiken
bij WIE je dat wilt bereiken
WAAROM je dat wilt bereiken
HOE je dat denkt te kunnen bereiken
BEPAAL wat je zelf goed/slecht vindt aan websites, want dat doe
je dan natuurlijk in jouw website misschien ook/zeker niet!!
Een webpagina - usability
gebruiksvriendelijk maken == snel
verwerkbaar maken
Een paar tips rond usability
• gebruik donkere letters op een lichte achtergrond (goed contrast)
• gebruik een schreefloze letter, zoals “Verdana” of “Tahoma” voor
de lopende tekst (sneller te verwerken door de hersenen)
• voor de koppen kun je wel een schreefletter gebruiken zoals
“Bookman Old Style” of “Georgia”, maar “Arial” is ook een prima
letter voor koppen
• Maak een logische indeling, houd daarbij rekening met hoe
mensen een website bekijken…
Een webpagina - usability
eye-tracking
Hoe roder hoe langer gekeken
Ogen schieten heen en weer over
specifieke delen van de pagina op
zoek naar informatie
Een webpagina
bestaat uit html-code, tekst en links
Links op een webpagina wijzen naar:
•
•
•
•
•
Webpagina’s:
Stylesheets:
Afbeeldingen:
Multimedia:
Scripts:
htm, html, php of asp-bestanden
css-bestanden
jpg- of png-bestanden
filmpjes en geluidsbestanden
javascripts, phpscripts, ajaxscripts
NB: scripts zijn niet noodzakelijk voor een mooie website
HTML-code
de webbrowser vertaalt de tags in de
html-code naar een leesbare pagina
Standaard HTML-code in elk web-pagina:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>de-zichtbare-titel-van-de-pagina</title>
6: <link rel="stylesheet" type="text/css" href= "stylesheet.css" />
7: </head>
8: <body>
9: De zichtbare inhoud van de webpagina (tekst, plaatjes, links, …)
10: </body>
11: </html>
NB: Klik snel door naar de volgende pagina voor de uitleg!
HTML-code
uitleg per regel code
1: <!Doctype…>definitie van het soort bestand: helpt de browser de html te snappen.
Zie het als een voordeel dat jij het niet hoeft te snappen!
2: <html>
html-tag:
start html-pagina
3: <head>
head-tag:
hiertussen staan metagegevens over de inhoud
4: <meta …>
meta-tag:
zegt iets over de pagina
5: <title>
title-tag:
wat je hier invult geeft de browser bovenin weer
6: <link …>
link-tag:
koppelt het stylesheet
7: </head>
einde-head-tag
8: <body>
body-tag:
start van het zichtbare deel van de pagina
9: Alles wat tussen de body-tags staat, zie je als je de webpagina in een browser bekijkt
10: </body>
einde body-tag:
einde van het zichtbare deel
11: </html>
eind html-tag:
einde html-pagina
Werken in de splitview
"Split" toont tegelijkertijd de html-code en
hoe de webpagina eruit komt te zien:
HTML-code
Preview
NB: hier is dreamweaver gebruikt, dit is ook mogelijk in sharepoint
META-TAGs
staan in tussen de <head></head> tags
en zeggen iets over de pagina zelf
Belangrijke tags in onzichtbaar deel webpagina:
•
•
•
•
•
•
Paginatitel (verschijnt in tabblad): <title>paginatitel</title>
Informatie over de auteur:
<meta name="author" … />
Informatie over de inhoud:
<meta name="description"… />
Informatie voor zoekmachines: <meta name="robot" … />
Link naar stylesheet:
<link rel="stylesheet" … />
Link naar javascript:
<link rel="javascript" … />
NB: tags in het niet zichtbare deel bevatten meta-informatie
Tekst-TAGs
herken je aan <begin> en </eind> haken
en geven basisinformatie over de opmaak
Belangrijke tags in zichtbaar deel webpagina:
•
•
•
•
•
•
•
De pagina zelf:
Koppen:
Paragrafen:
Tabellen:
Lijsten:
Links
Afbeeldingen:
<body></body>
<h1></h1>, <h2></h2>, <h3></h3>
<p></p>
<table><tr>rij<td>cel</td></tr></table>
<ul></ul> of <ol></ol>, <li>list-item</li>
<a href="pagina-waar-je-naar-linkt"></a>
<img src="pad-naar-het-plaatje"/>
NB: tags in het zichtbare deel bevatten standaard opmaakkenmerken
De opmaak-TAG <div></div>
gebruik je om de pagina in te delen met
divisions
Divisions zijn rechthoekige vlakken:
• waarvan je de linker bovenhoek, breedte en hoogte definieert in
een stylesheet
• die elk specifieke plaatseigenschappen krijgen
• die je over elkaar heen kunt laten vallen
• die je binnen andere divisions kunt gebruiken
Je kunt <body></body> (= alles wat je ziet in de
browser) zien als de grootst mogelijke division,
met de linker bovenhoek op (0,0), een breedte
van 100% en een hoogte van 100%
NB: verderop komen we terug op het gebruik van divs en stylesheets
Afbeeldingen
zijn altijd losse bestanden die in de map
met de website moeten staan.
Bijzonderheden:
• In tegenstelling tot bijvoorbeeld in een worddocument is een
afbeelding nooit een onderdeel van een webpagina.
• Op de webpagina staat een verwijzing (een link) naar het
afbeeldingsbestand. Dat vind je in de html terug als:
<img src="pad-naar-het-plaatje-in-de-webmap" … />
• Afbeeldingen herken je aan de bestandsnaam:
naam-afbeelding.jpg of naam-afbeelding.png
• Afbeeldingen moet je bewerken, op maat maken, in een apart
programma, zoals adobe photoshop of paint shop pro
NB: afbeeldingen staan altijd in een submap van de webmap!!!
Afbeeldingen
veelgemaakte fouten met afbeeldingen
• de afbeelding is geen onderdeel van de website en is daardoor
onzichtbaar: zet afbeeldingen eerst in een map in je website (= als
“webmap/images”), voeg de afbeelding daarna toe op de pagina
• het pad naar de afbeelding is niet relatief, waardoor de link naar
de afbeelding zoekt naar een plaats waar niet gezocht mag
worden: maak het pad relatief (= als “images/naam.jpg”)
• de afbeelding is te groot en laadt daardoor erg langzaam: maak de
afbeelding eerst op maat (= wat je gebruikt op de pagina) met een
programma om afbeeldingen te bewerken
• het bestandstype is niet leesbaar voor de browser en verschijnt
daardoor niet: gebruik het juiste bestandstype (= .jpg, .png of .gif)
Stylesheets
zijn losse bestanden die de definities van
de opmaak van de webpagina’s bevatten.
Groot voordeel
Alle opmaak staat op één plek, site heel makkelijk aan te passen
Standaardcode in elk stylesheet:
@charset "utf-8";
/* CSS Document */
Deze code geeft aan de browser door welke tekenset gebruikt
wordt , zodat de browser weet hoe om te gaan met speciale tekens
zoals: ë, à, ü, ", ", $, &.
Stylesheets & tekst-TAGs
Je kunt allerlei opmaakeigenschappen
definiëren voor elke mogelijk tekst-TAG.
Een voorbeeld:
H1 {font-family:
font-size:
font-weight:
color:
}
P {font-family:
font-size:
color:
}
Arial, sans-serif;
16px;
bold;
#c00;
Verdana , sans-serif;
11px;
#000;
het lettertype voor
kop-1 is Arial, of
sans-serif, 16px groot
vet en donkerrood
het lettertype voor de
tekst in een paragraaf
is verdana, sans-serif
11px groot en zwart
Je kunt ook meer tags combineren, door ze met een komma
ertussen voor de eerste accolade te zetten, zoals in:
P, TD {font-family: Verdana;}
(<TD> is de tag voor een tabelcel)
NB: zie www.w3c.org, www.w3cschools.com voor de mogelijkheden
Stylesheets – classes
een class definiëert voor verschillende
tags herbruikbare opmaakkenmerken.
Een voorbeeld van een classdefinitie
.lichtblauw
{font-family: tahoma, sans-serif;
font-weight: bold;
color: #00ccff;
text-decoration: none;
}
In de pagina kun je nu bij elke TAG de class toevoegen. In dit
voorbeeld is de class aan de linktag (<a>)gekoppeld:
<p>Het voorbeeld op deze slide gaat over het gebruik van een class
waarmee je <a href="waar-je-naartoe-linkt" class="lichtblauw"> de
link in de tekst</a> opmaakt</>
En de link ziet er zo uit in de tekst op de webpagina:
Het voorbeeld op deze slide gaat over het gebruik van een class waarmee je de link in de tekst opmaakt
NB: een class kun je aan verschillende TAGs koppelen
Stylesheets: tekst-TAGs vs classes
De stijl van een tekst-TAG geldt altijd voor
die tag, tenzij je er een class aan koppelt
Als dit in je stylesheet staat:
H1 {font-family: Arial, font-weight: bold; font-size:
16px;color: #000;}
.lichtblauw {color: #0cf;}
En je gebruikt in je html alleen
<h1>Dan ziet kop 1 er zo uit</h1>
Dan ziet kop 1 er zo uit
Gebruik je in je html echter
<h1 class="lichtblauw">Dan ziet kop 1 er zo uit</h1>
Dan ziet kop 1 er zo uit
NB: met een class kun je het uiterlijk van meer TAGs veranderen
Stylesheets – id’s (#)
Een id is als een class, die je maar een
keer kunt gebruiken op een pagina.
Een voorbeeld:
#container {position: relative; top: 1%; min-height: 440px; width: 880px;
background-color: #EEE; color: #C00; font-family: tahoma,
sans-serif; font-size: 11 px; margin: auto; padding: 15px;
vertical-align:top;
}
Deze code creëert een vlak op de pagina dat in de breedte gecentreerd is.
Om de code te gebruiken moet je op de webpagina een division
<div></div> maken. Aan die division koppel je het id.
In de htmlcode op de webpagina komt daarvoor het volgende te staan
<div id="container">Dit is het vlak van de code hierboven.</div>
Dat zie er in de browser zo uit
Stylesheets – id’s (#)
Voorbeeld in de browser
Beoordeling - usability
voldoet de website aan de theorie wat
betreft opmaak en gebruikersgerichtheid
Opmaak
•
•
•
•
lettertype
kleurgebruik
gebruik afbeeldingen
vlakverdeling
Gebruiksgerichtheid
• doel en doelgroep helder
• logische navigatiestructuur
• makkelijk verwerkbare teksten op doel en doelgroep
toegesneden
Beoordeling - techniek
werkt de website technisch goed en staat
deze op een server
Techniek
• alle links werken feilloos
• de afbeeldingen verschijnen snel en altijd
• het menu werkt feilloos
Server
• de website staat op de eduwebserver of op een andere
serverruimte
• de link naar de website werkt (mag eigen domeinnaam zijn)
Beoordeling - verantwoording
zijn de keuzes en uren verantwoord in een
kort rapport
Rapport
• keuzeverantwoording (o.a. kleuren, lettertype, vlakverdeling,
gebruikte software)
• in bijlage een urenverantwoording