Scoren met websites Bouw zelf een digitaal visitekaartje.

25
Scoren met websites Bouw zelf een digitaal visitekaartje

Transcript of Scoren met websites Bouw zelf een digitaal visitekaartje.

Page 1: Scoren met websites Bouw zelf een digitaal visitekaartje.

Scoren met websites

Bouw zelf een digitaal visitekaartje

Page 2: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een websiteis een map met een verzameling bestanden in die onderling gelinkt zijn.

Mogelijke bestanden in een website:• Webpagina’s: htm of html-bestanden (statisch)

php of asp-bestanden (dynamisch)• Stylesheets: css-bestanden (opmaak)• Afbeeldingen: jpg- of png-bestanden• Multimedia: filmpjes en geluidsbestanden• Scripts: java en ajaxscripts (o.a. klapmenu’s)

NB: scripts zijn niet noodzakelijk voor een mooie website

Page 3: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een websitein 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

Page 4: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een website – afsprakenhoud 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!

Page 5: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een website – doel en doelgroepbouw 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!!

Page 6: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een webpagina - usabilitygebruiksvriendelijk 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…

Page 7: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een webpagina - usabilityeye-tracking

Hoe roder hoe langer gekeken

Ogen schieten heen en weer over specifieke delen van de pagina op zoek naar informatie

Page 8: Scoren met websites Bouw zelf een digitaal visitekaartje.

Een webpaginabestaat uit html-code, tekst en links

Links op een webpagina wijzen naar:• Webpagina’s: htm, html, php of asp-bestanden• Stylesheets: css-bestanden• Afbeeldingen: jpg- of png-bestanden• Multimedia: filmpjes en geluidsbestanden• Scripts: javascripts, phpscripts, ajaxscripts

NB: scripts zijn niet noodzakelijk voor een mooie website

Page 9: Scoren met websites Bouw zelf een digitaal visitekaartje.

HTML-codede 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!

Page 10: Scoren met websites Bouw zelf een digitaal visitekaartje.

HTML-codeuitleg 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 bekijkt10: </body> einde body-tag: einde van het zichtbare deel11: </html> eind html-tag: einde html-pagina

Page 11: Scoren met websites Bouw zelf een digitaal visitekaartje.

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

Page 12: Scoren met websites Bouw zelf een digitaal visitekaartje.

META-TAGsstaan 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

Page 13: Scoren met websites Bouw zelf een digitaal visitekaartje.

Tekst-TAGsherken je aan <begin> en </eind> haken en geven basisinformatie over de opmaakBelangrijke tags in zichtbaar deel webpagina:• De pagina zelf:<body></body>• Koppen: <h1></h1>, <h2></h2>, <h3></h3>

• Paragrafen: <p></p>

• Tabellen: <table><tr>rij<td>cel</td></tr></table>

• Lijsten: <ul></ul> of <ol></ol>, <li>list-item</li>

• Links <a href="pagina-waar-je-naar-linkt"></a>

• Afbeeldingen: <img src="pad-naar-het-plaatje"/>

NB: tags in het zichtbare deel bevatten standaard opmaakkenmerken

Page 14: Scoren met websites Bouw zelf een digitaal visitekaartje.

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

Page 15: Scoren met websites Bouw zelf een digitaal visitekaartje.

Afbeeldingenzijn 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!!!

Page 16: Scoren met websites Bouw zelf een digitaal visitekaartje.

Afbeeldingenveelgemaakte 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)

Page 17: Scoren met websites Bouw zelf een digitaal visitekaartje.

Stylesheetszijn losse bestanden die de definities van de opmaak van de webpagina’s bevatten.Groot voordeelAlle 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: ë, à, ü, ", ", $, &.

Page 18: Scoren met websites Bouw zelf een digitaal visitekaartje.

Stylesheets & tekst-TAGsJe kunt allerlei opmaakeigenschappen definiëren voor elke mogelijk tekst-TAG.

Een voorbeeld:H1 {font-family: Arial, sans-serif; het lettertype voor font-size: 16px; kop-1 is Arial, of font-weight: bold; sans-serif, 16px groot color: #c00; vet en donkerrood}P {font-family: Verdana , sans-serif; het lettertype voor de font-size: 11px; tekst in een paragraaf color: #000; 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

Page 19: Scoren met websites Bouw zelf een digitaal visitekaartje.

Stylesheets – classeseen 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

Page 20: Scoren met websites Bouw zelf een digitaal visitekaartje.

Stylesheets: tekst-TAGs vs classesDe stijl van een tekst-TAG geldt altijd voor die tag, tenzij je er een class aan koppeltAls 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

Page 21: Scoren met websites Bouw zelf een digitaal visitekaartje.

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

Page 22: Scoren met websites Bouw zelf een digitaal visitekaartje.

Stylesheets – id’s (#)Voorbeeld in de browser

Page 23: Scoren met websites Bouw zelf een digitaal visitekaartje.

Beoordeling - usabilityvoldoet de website aan de theorie wat betreft opmaak en gebruikersgerichtheidOpmaak• lettertype• kleurgebruik• gebruik afbeeldingen• vlakverdeling

Gebruiksgerichtheid• doel en doelgroep helder• logische navigatiestructuur• makkelijk verwerkbare teksten op doel en doelgroep

toegesneden

Page 24: Scoren met websites Bouw zelf een digitaal visitekaartje.

Beoordeling - techniekwerkt 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)

Page 25: Scoren met websites Bouw zelf een digitaal visitekaartje.

Beoordeling - verantwoordingzijn de keuzes en uren verantwoord in een kort rapport

Rapport• keuzeverantwoording (o.a. kleuren, lettertype, vlakverdeling,

gebruikte software)• in bijlage een urenverantwoording