Eigenlijk zijn er geen nieuwe punten voor vanavond.
Youtube embedding:
http://google.about.com/od/youtube/ss/embed-share-YouTube-videos.htm
woensdag 14 maart 2012
woensdag 7 maart 2012
les11
Vanavond de een na laatste bijeenkomst
SEO
Search Enigine Optimization
Wat is SEO?
Zoekmachineoptimalisatie (Engels: search engine optimization of SEO[1])
is een onderdeel van zoekmachinemarketing en kan worden gedefinieerd als het geheel aan activiteiten bedoeld om een webpagina hoog te laten scoren in de organische zoekresultaten van een zoekmachine.
Dit is een vak appart waar complete bedrijven in zijn gespecialiseerd, je begrijpt dat wij hier niet alle over dit onderwerp kunnen behandelen.
Maar je kan als hobby WEBdesigner nog best wel wat maatregelen nemen om hoger in de rankings te komen.
Er zijn 3 gebieden waar optimalisatie mogelijk is:
In het algemeen geldt dat zoekmachineoptimalisatie een drietal analysegebieden beslaat:
Optimalisatie van OnPage - / OnSite factoren (de structuur, inhoud en techniek op een website)
Het meeste hebben we al gedaan. We gebruiken CSS, geen frames en geen Javascript/flash navigatie.
Wat andere tips:
-Gebruik van trefwoorden in de url en domeinnaam
-Gebruik van trefwoorden in de titel van een pagina (iedere unieke pagina een eigen unieke titel)
-Beperkte paddiepte in een URL, bij voorkeur maximaal 3 folders diep
Maximalisatie van externe backlinks (ook wel link building genoemd)
Probeer jou site zoveel mogelijk gelinkt te hebben vanaf andere sites. Dus registreer je bij overkoepelende vak organen, verenigingen, forums etc.
Trefwoordanalyse
het ontdekken van interessante trefwoorden, het bepalen van het zoekvolume op die trefwoorden en het analyseren van de hoeveelheid, kwaliteit en autoriteit van concurrerende pagina's voor die trefwoorden.
-Gebruik van trefwoorden in heading tags
-Gebruik van trefwoorden in de paginanaam van een URL
-Gebruik van trefwoorden in de "ALT"-tag van afbeeldingen
-Plaats trefwoorden in de META tags
Uitgebreide tips:
Goede titels zijn goud waard
Van alle elementen op een pagina steekt er een met kop en schouders boven de andere uit: de TITLE-tag. Een goede titel vertelt de zoekmachines waar de pagina over gaat, en zoekmachines tonen de titel ook als linktekst bij de zoekresultaten.
Met een goede titel kan je twee vliegen in een klap slaan: u verhoogt de vindbaarheid van uw pagina en u vergroot de kans dat een bezoeker juist uw pagina bezoekt! Vergelijk maar eens:
Untitled Page
en:
Goedkope printercartridges vindt u bij Jansen, de printercartridge-specialist!
Zorg er voor dat elke pagina een eigen, unieke titel heeft die precies aangeeft waar die pagina over gaat.
5 tips voor goede titels
Spreek de taal van de gebruiker
Het heeft weinig zin om de site te optimaliseren voor termen ("rijwielhersteller") als de doelgroep iets heel anders gebruikt ("fietsenmaker").
Ga daarom niet alleen uit van eigen intuïtie, maar brainstorm met anderen (liefst ook met enkele leden van de doelgroep) over de "beste" termen.
Truukjes zijn uit den boze
Sommige SEO-"specialisten" gebruiken technieken die door zoekmachines uitdrukkelijk verboden worden, zoals:
"verborgen text" (bv. witte letters op een witte achtergond)
"doorway pages" (pagina's vol trefwoorden die alleen zijn bedoeld voor de zoekmachines)
"bedrieglijke redirects" (de bezoeker wordt snel doorgestuurd naar een andere pagina)
"cloaking" (zoekmachines krijgen heel andere content te zien dan menselijke bezoekers).
Handleiding SEO:
GOOGLE SEO tools
Meldt de site aan bij Google:
Nog meer SEO tips
Site helemaal over SEO
SEO
Search Enigine Optimization
Wat is SEO?
Zoekmachineoptimalisatie (Engels: search engine optimization of SEO[1])
is een onderdeel van zoekmachinemarketing en kan worden gedefinieerd als het geheel aan activiteiten bedoeld om een webpagina hoog te laten scoren in de organische zoekresultaten van een zoekmachine.
Dit is een vak appart waar complete bedrijven in zijn gespecialiseerd, je begrijpt dat wij hier niet alle over dit onderwerp kunnen behandelen.
Maar je kan als hobby WEBdesigner nog best wel wat maatregelen nemen om hoger in de rankings te komen.
Er zijn 3 gebieden waar optimalisatie mogelijk is:
In het algemeen geldt dat zoekmachineoptimalisatie een drietal analysegebieden beslaat:
Optimalisatie van OnPage - / OnSite factoren (de structuur, inhoud en techniek op een website)
Het meeste hebben we al gedaan. We gebruiken CSS, geen frames en geen Javascript/flash navigatie.
Wat andere tips:
-Gebruik van trefwoorden in de url en domeinnaam
-Gebruik van trefwoorden in de titel van een pagina (iedere unieke pagina een eigen unieke titel)
-Beperkte paddiepte in een URL, bij voorkeur maximaal 3 folders diep
Maximalisatie van externe backlinks (ook wel link building genoemd)
Probeer jou site zoveel mogelijk gelinkt te hebben vanaf andere sites. Dus registreer je bij overkoepelende vak organen, verenigingen, forums etc.
Trefwoordanalyse
het ontdekken van interessante trefwoorden, het bepalen van het zoekvolume op die trefwoorden en het analyseren van de hoeveelheid, kwaliteit en autoriteit van concurrerende pagina's voor die trefwoorden.
-Gebruik van trefwoorden in heading tags
-Gebruik van trefwoorden in de paginanaam van een URL
-Gebruik van trefwoorden in de "ALT"-tag van afbeeldingen
-Plaats trefwoorden in de META tags
Uitgebreide tips:
Goede titels zijn goud waard
Van alle elementen op een pagina steekt er een met kop en schouders boven de andere uit: de TITLE-tag. Een goede titel vertelt de zoekmachines waar de pagina over gaat, en zoekmachines tonen de titel ook als linktekst bij de zoekresultaten.
Met een goede titel kan je twee vliegen in een klap slaan: u verhoogt de vindbaarheid van uw pagina en u vergroot de kans dat een bezoeker juist uw pagina bezoekt! Vergelijk maar eens:
Untitled Page
en:
Goedkope printercartridges vindt u bij Jansen, de printercartridge-specialist!
Zorg er voor dat elke pagina een eigen, unieke titel heeft die precies aangeeft waar die pagina over gaat.
5 tips voor goede titels
Spreek de taal van de gebruiker
Het heeft weinig zin om de site te optimaliseren voor termen ("rijwielhersteller") als de doelgroep iets heel anders gebruikt ("fietsenmaker").
Ga daarom niet alleen uit van eigen intuïtie, maar brainstorm met anderen (liefst ook met enkele leden van de doelgroep) over de "beste" termen.
Truukjes zijn uit den boze
Sommige SEO-"specialisten" gebruiken technieken die door zoekmachines uitdrukkelijk verboden worden, zoals:
"verborgen text" (bv. witte letters op een witte achtergond)
"doorway pages" (pagina's vol trefwoorden die alleen zijn bedoeld voor de zoekmachines)
"bedrieglijke redirects" (de bezoeker wordt snel doorgestuurd naar een andere pagina)
"cloaking" (zoekmachines krijgen heel andere content te zien dan menselijke bezoekers).
Handleiding SEO:
GOOGLE SEO tools
Meldt de site aan bij Google:
Nog meer SEO tips
Site helemaal over SEO
woensdag 8 februari 2012
Les 9
We hebben gezien dat we met CSS en HTML pagina's en sites netjes kunnen opmaken. Maar als we iets interactiefs willen doen hebben we al snel JavaScript of Flash nodig.
JavaScipt kan vrij ingewikkeld zijn, maar gelukkig is er de Jquery library.
Dit is een verzameling voorgebakken functies (fades, database gerelateerd, grafisch) die betrekkelijk eenvoudig aan te roepen zijn.
Je hebt daarvoor de Jquery library nodig, die je hier kunt downloaden.
http://jquery.com/
Deze plaats je in de root van je site.
Vervolgens roep je in je pagina de jquery library aan:
Nu heb je binnen deze pagina de beschikking over de Jquery functies.
Het gaat te ver om echt diep in Jquery te duiken, maar als je echt het maximale er uit wilt halen raad ik je aan om deze site eens goed te bestuderen:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Of gewoon deze videocursus te volgen:http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
Hier wat voorbeeld die je met Jquery kan bereiken:
http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/
Enkele tutorials:
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
Motiongallery.js
http://sixrevisions.com/javascript/free_javascript_image_galleries/
JavaScipt kan vrij ingewikkeld zijn, maar gelukkig is er de Jquery library.
Dit is een verzameling voorgebakken functies (fades, database gerelateerd, grafisch) die betrekkelijk eenvoudig aan te roepen zijn.
Je hebt daarvoor de Jquery library nodig, die je hier kunt downloaden.
http://jquery.com/
Deze plaats je in de root van je site.
Vervolgens roep je in je pagina de jquery library aan:
Nu heb je binnen deze pagina de beschikking over de Jquery functies.
Het gaat te ver om echt diep in Jquery te duiken, maar als je echt het maximale er uit wilt halen raad ik je aan om deze site eens goed te bestuderen:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Of gewoon deze videocursus te volgen:http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
Hier wat voorbeeld die je met Jquery kan bereiken:
http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/
Enkele tutorials:
http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
Motiongallery.js
http://sixrevisions.com/javascript/free_javascript_image_galleries/
woensdag 1 februari 2012
Les8
Vanavond gaan we niets nieuws doen...sorry.
Wat we wel gaan doen is even stilstaan bij de ontwerpen die er zijn gemaakt (althans ik hoop dat jullie we aan de slag zijn gegaan)
Ook gaan we verder sleutelen aan de voorbeeld site van verleden week.
We gaan namelijk kijken hoe we het ontwerp vanuit Fireworks in Dreamweaver kunnen gaan bewerken.
Verder gaan we werken aan ons ontwerp en zal ik jullie daar bij begeleiden.
Van Fireworks naar Dreamweaver:
Je hebt dus je pagina('s) geexporteerd als CSS en images en gechekt of alles er nog zo uit ziet als in Fireworks.
Als alles klopt kun je nu beginnen met het maken van de overige pagina's.
Stel je hebt een pagina index.html.......de vormgeving van deze pagina komt terug in alle pagina's van je site.
Sla die index pagina dan net zo vaak op onder andere namen.....zodat je straks voor elke knop een pagina hebt met een andere naam.
Vervolgens kun je nu met dreamweaver de inhoud van die pagina's vormgeven/opmaken.
Als de inhoud op de verschillende pagina's nou er veel afwijkt......bijvoorbeeld plaatjes die iedere keer op andere plekken staan, is het verstandiger om voor elk plaatje een andere fireworks pagina aan te maken en die te exporteren.
Mocht je het prettiger vinden om in Fireworks dingen te plaatsen, kun je ook gewoon je pagina's daar kopieren en onder andere namen exporteren.
Wat we wel gaan doen is even stilstaan bij de ontwerpen die er zijn gemaakt (althans ik hoop dat jullie we aan de slag zijn gegaan)
Ook gaan we verder sleutelen aan de voorbeeld site van verleden week.
We gaan namelijk kijken hoe we het ontwerp vanuit Fireworks in Dreamweaver kunnen gaan bewerken.
Verder gaan we werken aan ons ontwerp en zal ik jullie daar bij begeleiden.
Van Fireworks naar Dreamweaver:
Je hebt dus je pagina('s) geexporteerd als CSS en images en gechekt of alles er nog zo uit ziet als in Fireworks.
Als alles klopt kun je nu beginnen met het maken van de overige pagina's.
Stel je hebt een pagina index.html.......de vormgeving van deze pagina komt terug in alle pagina's van je site.
Sla die index pagina dan net zo vaak op onder andere namen.....zodat je straks voor elke knop een pagina hebt met een andere naam.
Vervolgens kun je nu met dreamweaver de inhoud van die pagina's vormgeven/opmaken.
Als de inhoud op de verschillende pagina's nou er veel afwijkt......bijvoorbeeld plaatjes die iedere keer op andere plekken staan, is het verstandiger om voor elk plaatje een andere fireworks pagina aan te maken en die te exporteren.
Mocht je het prettiger vinden om in Fireworks dingen te plaatsen, kun je ook gewoon je pagina's daar kopieren en onder andere namen exporteren.
dinsdag 24 januari 2012
Les 7
We hebben nu nog 6 lessen te gaan.
Les7
Nog wat CSS
En een Slice oefening
Les8
SEO
en terug naar Dreamweaver.
Les 9 t/m 12 werken aan de site
FTP
Nu hebben we een vormgeving wat doen we er nu mee:
-we gaan in Fireworks de boel slicen en/of indelen in rechthoeken.
Huh?
Ok.....in de laatste les hebben we gekeken naar de kracht van CSS en geleerd dat CSS tegenwoordig gewoon standaard is.
Wel nu......in CSS deel je je pagina's in rechthoekige containers genaamd DIV's.
Wat is een DIV?
Div staat voor de afkorting division, het is eigenlijk een bijzondere paragraaf.
Het is fijn om een pagina of textvlak precies te positioneren of bijvoorbeeld iets een bepaalde grote mee te geven.
Met div's kun je gedeeltes van je pagina namen geven, die je later kunt gebruiken in bijvoorbeeld CSS of JavaScript.
Vroeger werd een opmaak in tabellen gemaakt.....tegenwoordig dus met DIV's
Tabellen zijn namelijk bedoelt om Data mee weer te geven en niet als vormgevings gereedschap.
CSS wordt van boven naar beneden opgebouwd. Dus je begint bij de Header van de pagina en eindigt met de footer.
Om Fireworks te laten weten dat je een Div wil, plaats je om de desbetreffende ruimte een rechthoek (mag onzichtbaar)
Als je wilt dat Fireworks voor jou DIV’s aanmaakt, moet je die DIV markeren met behulp van een rechthoek. Deze rechthoek hoeft niet perse zichtbaar te zijn, hij moet wel een naam hebben. Deze naam wordt later namelijk de naam van de DIV.
Filmpje
Nog een tutorial:
http://www.adobe.com/devnet/fireworks/articles/smart_css.html
http://layersmagazine.com/fireworks-cs4-css-export.html
Regels:(plak word doc hier)
-Probeer je ontwerp zoveel mogelijk op te delen in rijen en colommen
-Zorg dat slices en DIVrechthoeken elkaar niet overlappen.
-In het filmpje zagen we dat het geven van namen aan de rechthoeken HEEL belangrijk is.
De rechthoeknamen worden namelijk netjes mee ge-exporteerd.
-Alle plaatjes dienen in slices te worden geplaatst.
Alle regels
Hieronder het een en ander nog eens heel duidelijk uitgelegd.
http://www.adobe.com/devnet/fireworks/articles/smart_css.html
Voor iedereen die zelf CSS coding wil leren, hier is een goede tutorial.
http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout
Resume van Adobe (BELANGRIJK)
Huiswerk: maak de vormgeving van je site af, dan kunnen we die gaan exporteren naar HTML en CSS. Daarna kunnen we ons bezig gaan houden met de inhoud van de site.
Les7
Nog wat CSS
En een Slice oefening
Les8
SEO
en terug naar Dreamweaver.
Les 9 t/m 12 werken aan de site
FTP
Nu hebben we een vormgeving wat doen we er nu mee:
-we gaan in Fireworks de boel slicen en/of indelen in rechthoeken.
Huh?
Ok.....in de laatste les hebben we gekeken naar de kracht van CSS en geleerd dat CSS tegenwoordig gewoon standaard is.
Wel nu......in CSS deel je je pagina's in rechthoekige containers genaamd DIV's.
Wat is een DIV?
Div staat voor de afkorting division, het is eigenlijk een bijzondere paragraaf.
Het is fijn om een pagina of textvlak precies te positioneren of bijvoorbeeld iets een bepaalde grote mee te geven.
Met div's kun je gedeeltes van je pagina namen geven, die je later kunt gebruiken in bijvoorbeeld CSS of JavaScript.
Vroeger werd een opmaak in tabellen gemaakt.....tegenwoordig dus met DIV's
Tabellen zijn namelijk bedoelt om Data mee weer te geven en niet als vormgevings gereedschap.
CSS wordt van boven naar beneden opgebouwd. Dus je begint bij de Header van de pagina en eindigt met de footer.
Om Fireworks te laten weten dat je een Div wil, plaats je om de desbetreffende ruimte een rechthoek (mag onzichtbaar)
Als je wilt dat Fireworks voor jou DIV’s aanmaakt, moet je die DIV markeren met behulp van een rechthoek. Deze rechthoek hoeft niet perse zichtbaar te zijn, hij moet wel een naam hebben. Deze naam wordt later namelijk de naam van de DIV.
Filmpje
Nog een tutorial:
http://www.adobe.com/devnet/fireworks/articles/smart_css.html
http://layersmagazine.com/fireworks-cs4-css-export.html
Regels:(plak word doc hier)
-Probeer je ontwerp zoveel mogelijk op te delen in rijen en colommen
-Zorg dat slices en DIVrechthoeken elkaar niet overlappen.
-In het filmpje zagen we dat het geven van namen aan de rechthoeken HEEL belangrijk is.
De rechthoeknamen worden namelijk netjes mee ge-exporteerd.
-Alle plaatjes dienen in slices te worden geplaatst.
Alle regels
Hieronder het een en ander nog eens heel duidelijk uitgelegd.
http://www.adobe.com/devnet/fireworks/articles/smart_css.html
Voor iedereen die zelf CSS coding wil leren, hier is een goede tutorial.
http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout
Resume van Adobe (BELANGRIJK)
Huiswerk: maak de vormgeving van je site af, dan kunnen we die gaan exporteren naar HTML en CSS. Daarna kunnen we ons bezig gaan houden met de inhoud van de site.
woensdag 18 januari 2012
Les 6
CSS
CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Het betekent allemaal hetzelfde in ieder geval.
Wat is CSS?
http://nl.wikipedia.org/wiki/Cascading_Style_Sheets
Minicursus CSS
http://www.webmasterstart.nl/css/wat-is-css.html
Alles over CSS
http://www.w3schools.com/css/css_intro.asp
Redenen om CSS te gebruiken:
1. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft.
2. CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is.
3. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden.
CSS kan op 3 manieren worden gebruikt
Effect van CSS op een site.....deze site laat zien hoe je vormgeving totaal veranderd kan worden met behulp van CSS:
http://www.csszengarden.com/
Hoop gedoe?
Werk netjes in Fireworks......en het meeste wordt voor je gedaan:
http://layersmagazine.com/fireworks-cs4-css-export.html
http://www.smartwebby.com/free_tutorials/CSS_website_design_guide/adobe_fireworks_CS4_tutorials/fireworks_website_design.asp http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Het betekent allemaal hetzelfde in ieder geval.
Wat is CSS?
http://nl.wikipedia.org/wiki/Cascading_Style_Sheets
Minicursus CSS
http://www.webmasterstart.nl/css/wat-is-css.html
Alles over CSS
http://www.w3schools.com/css/css_intro.asp
Redenen om CSS te gebruiken:
1. Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft.
2. CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is.
3. De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden.
CSS kan op 3 manieren worden gebruikt
Effect van CSS op een site.....deze site laat zien hoe je vormgeving totaal veranderd kan worden met behulp van CSS:
http://www.csszengarden.com/
Hoop gedoe?
Werk netjes in Fireworks......en het meeste wordt voor je gedaan:
http://layersmagazine.com/fireworks-cs4-css-export.html
http://www.smartwebby.com/free_tutorials/CSS_website_design_guide/adobe_fireworks_CS4_tutorials/fireworks_website_design.asp http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
woensdag 11 januari 2012
les 5
Typografie
Typografie is dus tekstuele vormgeving.
Daarbij let een typograaf op (van wiki):
Voor verschillende doeleinden, gebruik je andere lettertypen.
Enkele begrippen:
Voorbeelden van slechte typografie.
Kunst met Typografie:
Typografie in vogelvlucht
Typografische annimaties:
Pulp Fiction
Fear Loathing
Algemene regels omtrent typografie en leesbaarheid.
http://www.usabilityweb.nl/2005/05/typografie-en-leesbaarheid/
Check ook ff de links onderaan.
http://www.computerfaq.be/website-maken/10-typografie-regels-voor-webdesigners/
Vroeger ging dit binnen HTML, echter was dit allemaal zeer beperkt.
Tegenwoordig wordt dit vastgelegd in CSS.
Waarover volgende week meer.
Typografie omvat het zetten, drukken en vormgeven van teksten, voor functionele en esthetische doeleinden.
Typografie dient rekening te houden met het medium en doel van de geschreven teksten. Deze stellen verschillende eisen voor leesbaarheid en opvallendheid.
Typografie dient rekening te houden met het medium en doel van de geschreven teksten. Deze stellen verschillende eisen voor leesbaarheid en opvallendheid.
Typografie is dus tekstuele vormgeving.
Daarbij let een typograaf op (van wiki):
- de zetbreedte (regellengte): de breedte van een tekstblok of kolom. De typograaf let daarbij op het maximum aantal tekens of woorden per regel. Bij een tekst met te lange regels moet het oog van de lezer namelijk een te grote afstandssprong maken van het eind van de regel naar het begin van de volgende. In het algemeen worden maxima gehanteerd van gemiddeld ca. 85 tekens (inclusief spaties en leestekens) of van gemiddeld twaalf woorden.
- de diverse lettergroottes (corpsen) en -soorten. Door een combinatie daarvan (naast onder andere kleurgebruik) kan de typograaf de diverse tekstelementen visueel onderscheidend maken en daarmee de inhoudelijke hiërarchie goed visualiseren en ordenen. Letterfamilies bestaan uit diverse lettersoorten, meestal minimaal :
-romein (normaal)
-vet
-cursief
-vet-cursief.
Er zijn ook uitgebreide letterfamilies, die dan bijvoorbeeld als extra lettersoort vet-cursief, halfvet, extra vet, versmald en verbreed hebben. - de interlinie: het wit tussen twee regels.
- de regelafstand: de grootte van de letter (het corps) opgeteld bij de grootte van de interlinie. (Voorbeeld: corps 10 punt + 4 punt interlinie geeft een regelafstand van 14 punt.)
- de spatie-breedte: het wit (de ruimte) tussen twee woorden.
- het gebruik van initialen = al dan niet sier-kapitaal van een groter corps aan het begin van een hoofdstuk, in een andere (traditioneel rode) kleur.
- het gebruik van kapitalen (hoofdletters), kleine kapitalen en onderkast (kleine letters als deze)
- de letterspatiëring: het wit tussen de letters onderling
- de gebruikte letterfamilie(s) (lettertypen).
- de leestekens
- de verhoudingen tussen de marges rond het tekst-blok
- het vaste (verticale) tussenwit (bij meerdere kolommen)
- het bijeenblijven van inhoudelijke 'eenheden'
Voor verschillende doeleinden, gebruik je andere lettertypen.
-Krant is vaak gedrukt in een schreef letter (Times New Roman)
-Op een scherm leest een schreefletter niet prettig, omdat het dan lijkt alsof de letters aan elkaar vast gegroeid zijn. Dus een schreeflose letter voor het scherm (Arial, Tahoma)......
-Een poster mag opvallend zijn en kan dus gebruik maken van de vreemdste lettertypen.
Typography filmpje:
Typografie volgens de Wiki.
Een pagina kan worden onderverdeeld in kolommen en een kolom in paragrafen.
Enkele begrippen:
Kerning
Kerning (overhang in het nederlands) is visueel aanpassen van de witruimte tussen twee letters.
Voorbeeld van slechte kerning
Tracking:
Tracking is de algehele horizontale spatiëring van een stuk tekst. Met tracking beïnvloed je de densiteit van een tekst in de breedte.
Leading is interlinie:
Wat regels voor goede typografie en prettige leesbaarheid:
-Lange zetregels zijn overbodig en ongewenst. Lange zinnen zijn vermoeiend voor de ogen. gebruik kolommen
-Zorg voor voldoende contrast met de achtergrond.
-Wees zuinig met KAPITALEN (hoofdletters). Lezen irritirend
-Zorg voor duidelijke verschillen in Titels, subtitels en het artikel zelf.
-Gebruik niet teveel (liefst 1) font per pagina.
-Vermijdt zo veel mogelijk het centreren van complete stukken tekst.
Regels zijn er om gebroken te worden.......dus als het smaakvol gedaan wordt....
Voorbeelden van slechte typografie.
Kunst met Typografie:
Typografie in vogelvlucht
Typografische annimaties:
Pulp Fiction
Fear Loathing
Algemene regels omtrent typografie en leesbaarheid.
http://www.usabilityweb.nl/2005/05/typografie-en-leesbaarheid/
Niet alle fonts zijn beschikbaar op elke computer. Aangezien de browser gebruik maakt van de op de clientmachien aanwezige fonts, is het dus zaak om standaard (web safe) fonts te gebruiken
http://www.stoerebinken.net/kennisbank/typografie/web-safe-fonts
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Het is tegenwoordig wel mogelijk om de gebruiker een font te laten downloaden, maar gebruikersvriendelijk is dat niet. De meeste gebruikers willen immers helemaal niet iets downloaden voordat men een pagina mag/kan lezen. Tevens zit er op fonts ook copyright.
Check ook ff de links onderaan.
http://www.computerfaq.be/website-maken/10-typografie-regels-voor-webdesigners/
Meer over typografie
http://ilovetypography.com/
Em?
http://en.wikipedia.org/wiki/Em_%28typography)
Vroeger ging dit binnen HTML, echter was dit allemaal zeer beperkt.
Tegenwoordig wordt dit vastgelegd in CSS.
Waarover volgende week meer.
Abonneren op:
Posts (Atom)