DESIGN & WEB THEORIE Hoofdstuk 1: Vorm en Afmeting 1.1 Uitgangspunt voor elk onderwerp Als je een ontwerp gaat maken moet je in de eerste plaats met twee dingen rekening houden: 1. De vorm van je ontwerp, dus vierkant, langwerpig, rond, zeshoek etc. 2. De afmeting, dus hoe groot het wordt.
1.2 Zijn Vorm en Afmeting al vastgesteld? Hoe de opmaak moet worden, is vaak van tevoren al bekend. Denk maar aan een envelop: het adres moet op de goede plek staan en je kan 'm langs de boven- of zijkant dichtvouwen. TNT post wordt er niet blij van als je een envelop ontwerpt waarbij het adres op de achterkant moet staan! Als je iets ontwerpt dat geprint moet worden is het handig om de papierformaten te kennen. Deze zijn overal ter wereld bekend, bestudeer de afbeelding met A0 t/m A8. Als je goed kijkt, zie je dat A4 hetzelfde is als 2x een A3-tje. Een A5 is een half A4-tje, etc. We rekenen altijd in mm.
1.3 Printen Waarmee ga je het straks printen en waarop? Wat kan deze printer eigenlijk? Wat zijn de (on)mogelijkheden? Belangrijk daarbij is: 1. het aantal kleuren 2. het aantal DPI (dots per inch) 3. de marges (= zijn de randjes wit aan de buitenranden van het papier)De printer kan de marges niet printen hou het randje dus leeg in je ontwerp. De meeste inkjet printers hebben inktcartridges (patronen) voor 3 kleuren, en een zwarte. Veel moderne consumenten printers hebben twee patronen voor zwart. Een daarvan is dan voor zwarte tekst, en de andere (grotere) voor zwarte vlakken in bijvoorbeeld een afbeelding. Zo raakt je zwarte inkt niet al te snel op.
Facts 50% van een inkjet cartridge bestaat uit water. De rest is pigment en chemica liën.
De retail van inkt kost meer dan de meeste vlo eistoffen op aarde, inclusief olie!
De kosten van ee n inkt zijn ongeveer € liter HP 1785,-
1.4 Kleurruimte Grafische bestanden kunnen op dus verschillende manieren hun kleuren vastleggen. Dit noemen we de kleur-ruimte, ofwel color space De vier kleuren die printers kunnen maken zijn: • CYAN (cyaan, een soort blauw) • MAGENTA (een soort roze/rood) • YELLOW (geel) • KEY (zwart) Alle andere kleuren die gedrukt worden zijn dus mengkleuren van deze vier. Dit noemen we CMYK, het is de standaard de drukkerswereld. Het beeldscherm Voor beeldschermen geldt dat ze als basis slechts drie kleuren kennen: • RED (rood) • GREEN (groen) • BLUE (blauw)
SOORTEN RESOLUTIES 1.5 Resolutie
Afbeeldingsresolutie
Een beeld is opgebouwd uit puntjes, ofwel “dots”. Iedere dot is dus of rood, of groen, of blauw. Alle andere kleuren zijn ook hier mengkleuren.
Beeldschermresolu>e Hoe scherp een beeldscherm het beeld weergee@ noemen we de resolu+e. We drukken beeldschermresolu>e uit in pixels. In de eerste hel@ van 2012 was 1280x1024 pixels een gangbare resolu>e voor computers. 1200x800 is dan breedbeeld, de hoogte is dan naar verhouding kleiner dan de breedte.
Beeldschermresolutie
AIeeldingsresolu>e Foto’s en aIeeldingen hebben ook een eigen resolu>e. Deze drukken we uit in dpi, ofwel dots per inch. Dit betekent hoeveel beeldpuntjes er op een inch (2,54 cm) passen. 1. AIeeldingen die voor beeldscherm gemaakt zijn (web, in programma’s, etc.) hebben al+jd een resolu+e van 72 dpi. 2. AIeeldingen die voor drukwerk bedoeld zijn moeten 300 dpi zijn. Je ziet dat de a7eeldingsresolu+e voor afdrukken hoger moet zijn. Als je een aIeelding van 72 dpi opblaast (uitvergroot) zul je zien dat deze lelijk en korrelig wordt. Bij een aIeelding van 300 dpi is dit minder. Hoe hoger het aantal dpi’s, hoe groter de a7eelding op je beeldscherm wordt. Hieronder zie je een voorbeeld van dit verschijnsel.
300 dpi, 109 mm x 152 mm (A6)
72 dpi, 109mm X 152 mm (A6)
1287 pixels X 1795 pixels
431 pixels X 309 pixels
1.6 Financiën Financiën zijn geldzaken. Daarbij kun je je het volgende afvragen: Wat kost dat nou? Is groter en duurder echt beter? Hoeveel heeft de klant ervoor over? Maken wij er dan winst of verlies op! Een standaard vorm is veel goedkoper dan een ingewikkelde, omdat het papier speciaal gesneden moet worden.
1.7 Het Esthetisch Aspect Het woord “esthetisch” betekent eigenlijk “wat over het algemeen als mooi wordt beschouwd”. Hoe mooi zijn de vorm en de afmeting van je ontwerp? Maak je een agenda, dan is het wel belangrijk dat de vorm niet te groot en niet te klein is. Maar ze zijn niet allemaal even groot! Hoe groot is nog handig? Passen de tekst en de plaatjes er dan ook goed in? Als ik een nieuwe stoel ontwerp, dan vindt men die vaak niet mooi als ie vijf poten heeft. Een kip met een blauwe snavel is ook niet esthetisch.
Hoofdstuk 2: Koppen en tekstblokken 2.1 Evenwicht en Harmonie In een goed ontwerp maak je een evenwicht tussen de verschillende elementen. Het moet een gevoel van harmonie oproepen, het gevoel dat zegt: het klopt! Om dit te bereiken, moet je de elementen goed plaatsen. We gaan kijken naar verschillende manieren om een kop te plaatsen op papier. Welke stemming roept het op?
2.2 Uitlijnen Het links of rechts uitlijnen, of het centreren van de kop of tekst, heeft een groot effect. Je kan een woord ook horizontaal, verticaal of met een golfje vormgeven. Kijk maar eens naar deze voorbeelden.
2.3 Evenwicht en effect
2.4 Grootte
Als je een kop combineert met een afbeelding of een tekstblok, moet de kop in evenwicht zijn met het papierformaat en de andere elementen. Het ontwerp zorgt dan voor een optimaal effect bij de lezer
Je kunt de grootte, de hoek en de richting van de elementen veranderen om de elementen onderling in evenwicht te brengen.
Hoofdstuk 3: Lettertypes 3.1 Soorten lettertypes Er zijn vele duizenden lettertypes, maar we verdelen ze onder in maar twee groepen: 1. tekstletters 2. fantasieletters Het belangrijkste verschil is de grootte: de fantasieletters zijn niet leesbaar / bruikbaar onder een grootte van ongeveer 14-punts. Tekstletters vormen het grootste deel van de tekst en worden dan gebruikt in 8-14 punts grootte.
3.2 Met en zonder schreef Een lettertype met schreef (Engels:serif fonts) herken je aan de kleine horizontale streepjes aan de uiteinden. Schreefloze lettertypes (sans-serif fonts) zijn moeilijker te lezen dan die met schreef. Daardoor zijn ze meer geschikt voor een wat kortere tekst. Ook worden ze gebruik bij wat minder zakelijke teksten. Boeken en dergelijke worden meestal in serif uitgegeven. Het oog heeft steun aan de schreefjes onderaan de letters, als er lange regels tekst op papier staan.
3.3 Hoogte en Breedte Bij sommige lettertypes is elke letter even breed, zoals bij Courier en Consolas. We noemen dat fixed-width of monospaced. Dat is handig bij bijvoorbeeld programmeerwerk. Als letters van hetzelfde font een andere breedte hebben, noemen we dat variable width of proportioneel. Dan neemt bijvoorbeeld de 'i' minder ruimte in beslag dan de 'm'. De meeste fonts zijn proportioneel.
3.4 Effect van het lettertype op de lezer
LETTERTYPE
De keuze van het juiste lettertype heeft flinke gevolgen voor de lezer. Voor het gevoel dat hij erbij krijgt. Het is de kunst het gevoel en het lettertype op elkaar af te stemmen. Een tekst die voor bejaarde lezers bedoeld is zou het beste een groot, klassiek lettertype met schreefletters krijgen. Een tekst voor jongeren mag een vlotte letter voor kopjes hebben. Een kleine lettergrootte straalt zelfvertrouwen uit. Sommige lettertypes kunnen ook als saai of standaard overkomen, wat tot gevolg kan hebben dat de lezer sneller de aandacht verliest.
3.5 Variaties en aanpassingen Je kunt extra variatie aanbrengen in een lettertype door: • Een normale, vette (bold), cursieve (schuin, italic) of vet-cursieve lettersoort. • De interlinie of regelafstand, de witte ruimte tussen twee regels (line-spacing) • Letter-spatiëring: de witte ruimte tussen twee letters.
Hoofdstuk 4: Kleur 4.1 Kleurpsychologie Kleur heeft veel effect op degene die het ontwerp bekijkt. Bestudeer de afbeelding hiernaast eens om te zien wat verschillende kleuren kunnen uitstralen. Weet je trouwens waarom de meeste logo’s van fast-food ketens rood met geel zijn, zoals McDonald’s en Burger King? Geel wekt eetlust op en rood staat voor snelheid. De kleur geel is ook de meest intense kleur die er bestaat. Hij valt dus onwijs op! De combinatie geel-blauw zie je vaak in combinatie met goedkope, betaalbare winkelketens als IKEA en Lidl.
4.2 Kleuren combineren Als je de ene kleur naast de andere zet, kun je een aantal effecten oproepen: • harmonie: kies kleuren die dicht bij elkaar op de kleurencirkel liggen. • spanning: kies kleuren die tegenover elkaar op de kleurenkaart liggen.
4.3 Contrast •Veel contrast is witte letters op een zwarte achtergrond. •Weinig contrast is gele letters op een witte achtergrond. Contrast heeft een direct effect op de leesbaarheid.
4.4 Plaats in de ruimte
4.5 Warm en koud
Een lichtere kleur geeft het •Heel belangrijk is of een ontwerp warm of koud aanvoelt. effect van dichterbij, terwijl een Warmere kleuren hebben meer rood. donkerder kleur het effect van •Koudere kleuren meer blauw. verder weg geeft. Door de pijlen en woorden in dit logo wordt dat nog eens versterkt.
4.6 Effectwoorden
Met kleur kun je woorden een extra effect geven. Bekijk de vier voorbeelden daarvan hieronder eens.
Hoofdstuk 5: Grafische bestanden 5.1 Native en non-native In de IT zijn er ontzettend veel verschillende soorten grafische bestanden. Deze kunnen we onderverdelen in twee groepen: native en non-native (universeel). Native Een native bestand kun je alleen openen met het bijbehorende programma. Bijvoorbeeld, een bestand met lagen dat in Photoshop gemaakt is, wordt een PSD bestand. Non-native Een non-native bestand is een bestand dat je met alle programma’s kunt openen. Een JPG is een afbeelding die je ook met andere programma’s en op andere apparaten kunt openen. Als je van een PSD een JPG maakt verlies je wel alle informatie over lagen en bewerkingen.
5.2 Bestandstypes die je moet kennen Native File Formats • • •
PSD : Adobe Photoshop AI : Adobe Illustrator XCF : Gimp
Universele grafische formaten • • • •
JPG: Geschikt voor foto's PNG: Altijd geschikt behalve voor foto's, kan transparant zijn. GIF: De voorloper van PNG, kan ook transparant zijn. BMP: Typisch Windows, niet voor internet geschikt.
Vector formaat •
SVG: Vectortekeningen.
Er zijn ook belangrijke verschillen in kwaliteit tussen grafische bestandstypes. Dit heeft vooral te maken met compressie. Dit leer je bij ITTL in klas 4.
Hoofdstuk 6: Het web staat voor Yet Another Hierarchical Officious Oracle. Yahoo is volgens diverse bronnen vandaag de dag nog steeds de vaakst bezochte pagina op het internet. In october van 1994 lanceert president Bill Clinton whitehouse.gov, de Amerikaanse regering gaat dus online!
6.1 Geschiedenis van het web Het gaat hier te ver om een uitvoerige geschiedenis van het wereldwijde web te geven. We beperken ons daarom tot een aantal hoogtepunten die voor jullie belangrijk zijn.
1991 Tim Berners-Lee startte de nieuwsgroep alt.hypertekst. De technische mogelijkheid voor internet werd al eerder ontwikkeld door het Amerikaanse leger. Hij was de eerste die documenten via “hypertekst” aan elkaar linkte.
1993 De broncode van Internet wordt door Tim Berners-Lee vrijgegeven. Iedereen mag en kan er nu gebruik van maken. In hetzelfde jaar wordt HTML ontwikkeld. Dit is de programmeertaal voor webpagina’s die jullie later in IT klas 3 gaan leren.
1994 De zoekmachine Yahoo! wordt gebouwd door David Filo en Jerry Yang, twee studenten van de Stanford University. Hij heette oorspronkelijk “Jerry’s Guide to the World Wide Web”. De naam Yahoo
1995 Amazon.com wordt gelanceerd, Amazon was de eerste grote online winkel waar je o.a. kleding, cd’s meubels, electronica, etc. kunt kopen. Amazon bestaat nog steeds! Ook komt Microsoft in 1995 met het programma Internet Explorer, een programma waarmee je op het web kunt surfen.
1998 Google opent zijn eerste kantoortje in een garage in Californie.
1999 MySpace wordt gestart en is de eerste sociale netwerksite. MySpace heeft zo’n 100 miljoen gebruikers. Het is de voorloper van Hyves en Facebook. Vandaag de dag wordt MySpace vooral door bands, muzikanten, fotografen en nerds gebruikt.
2000 In het jaar 2000 bestaan er zo’n 20 miljoen websites.
2004 In 2004 bedacht Mark Zuckerberg de vriendensite “The Facebook”. Aanvankelijk konden alleen studenten van
Harvard College lid woorden, later voegden ook andere Amerikaanse universiteiten zich toe. In december 2004 had Facebook (ze lieten het woordje “The” vallen omdat dat beter klonk) al 1 miljoen leden. In 2007, drie jaar later, telde Facebook 50 miljoen gebruikers. Over het ontstaan van Facebook is een ontzettend leuke film gemaakt, die heet “The Social Network”. Warm aanbevolen om te kijken!
2005 YouTube wordt gelanceerd. Een online platform waarop iedere internetgebruiker video’s kan bekijken en zelf kan uploaden. YouTube is een van de eerste WEB 2.0 voorbeelden. Hier breekt een nieuw tijdperk voor het internet aan.
2008 Facebook komt met een Nederlands platform. Wereldwijd heeft Facebook zo’n 100 miljoen gebruikers. Het aantal is dus sinds 2007 verdubbeld. Als je geïnteresseerd bent moet je op Wikipedia eens opzoeken hoeveel leden Facebook nu heeft. Wikipedia is een wereldwijde encyclopedie die door de gebruikers gevuld wordt met informatie. Hele knappe mensen controleren bij Wikipedia of de door gebruikers geplaatste informatie relevant is, en of het wel klopt. Het idee voor Wikipedia ontstond al in het jaar 2000. In 2008 waren er al 10 miljoen artikelen geplaatst.
6.2 De overgang naar Web 2.0 Vanaf 2006 wordt het web steeds interactiever. Er duiken diverse online diensten op die het mogelijk maken om zelf websites, blogs en wiki’s te beheren. Ook worden vriendensites Hyves en Facebook steeds algemener. Bijna iedereen doet er aan mee. Of je nu YouTube, Wordpress, bol.com, eBay, Amazon, Tumblr, StumbleUpon, Flipboard, Instagram, Spotify, Twitter, What’s-App of Ping gebruikt… je bent een gebruiker van WEB 2.0. Met WEB 2.0 bedoelen we het nieuwe internet, het internet waarop de gebruikers zelf gemakkelijk informatie kan plaatsten, van commentaar kan voorzien en kan delen met vrienden. Voor 2005 was het web vooral een eenrichtingsverkeer omgeving. Je kon er dingen op opzoeken en eraf halen, maar zelf sites bouwen was alleen weggelegd voor een kleine groep mensen. Als we de term WEB 2.0 gebruiken, dan bedoelen we dus dat het internet interactief is. Iedere gebruiker kan stukjes bijdragen aan het internet. Door te Liken, een blog te starten, foto’s te delen, afspeellijsten op YouTube te maken, je mening te geven op een forum, etc. Meer over online diensten vind je in hoofdstuk 6.4.
6.3 Meerdere platforms Het internet wordt met de komst van smartphones ook mobiel. Dat betekent dat mensen online (op het web) kunnen wanneer ze willen. In 2009 komt Apple met de iPad en IOS, het besturingssysteem voor draagbare apparaten, en komen er tablets van diverse merken op de markt. Android is een besturingssysteem dat op apparaten van diverse fabrikanten kan draaien. Bijvoorbeeld Samsung, Sony, etc. Anno 2012 is iedereen met een smartphone of tablet 24 uur per dag online! Dit alles betekent dat, wanneer je een website gaat bouwen, je rekening moet houden met het feit dat hij op verschillende apparaten moet werken. Hij moet er dus ook netjes uitzien op allerlei verschillende beeldschermen. Het ontwikkelen voor een brede groep apparaten noemen we “cross-platform” ontwikkelen.
• •
Creditcard Paypal (een soort online bankrekening) iDeal
DE PROFIELSITE
Op een profielsite kun je lid worden en vrienden toevoegen. Je kunt je eigen • profielpagina maken met informatie en foto’s over jezelf. Je kunt berichtjes achterlaten bij vrienden en HET BLOG mensen uitnodigen voor Het woordje blog is een evenementen. De bekendste verbastering van “weblog”. Een log of logboek is een soort zijn Facebook, Hyves en MySpace. van dagboek waarin men bijhoudt wat je hebt gedaan. HET FORUM Een blog is dus een online dagboek. Je herkent een blog Een forum is een omgeving doordat er altijd redelijk korte waar mensen kunnen berichten onder elkaar staan. discussiëren over een We kunnen die miljoenen onderwerp dat hen Het nieuwste bericht staat websites die er bestaan altijd bovenaan, daaronder de interesseert. Veel gamers onderverdelen in gebruiken ook forums om op een na nieuwste. Er staat verschillende categorieën. Het ook vaak een datum boven het over games te praten, is goed om te weten met wat fotografen hebben forums bericht van wanneer het voor soort site je te maken over lenzen en apparatuur en geplaatst is. Op een blog vind hebt als je op Internet zoekt. je ook vaak categorieën die je mensen die een Skoda hebben kunnen met andere kunt aanklikken. DE INFORMATIEVE Skodarijders praten en ervaringen uitwisselen. SITE Je kunt gratis een blog Forums zijn een hele handige Dit soort websites hebben bouwen op Wordpress.com, manier om antwoord op je vaak vaste content (inhoud) Blogger, web-log.nl, etc. Ook vragen te krijgen en mensen die op een vaste plaats staat. Tumblr is een gratis blog met gelijke interesses te Websites van consumenten dienst. Hier kun je echter ontmoeten. producten zijn een mooi alleen foto’s en korte tekst voorbeeld van informatieve plaatsen. Het is een soort sites. Denk bijvoorbeeld aan light-versie van Wordpress. Sony.nl. Natuurlijk zijn er ook informatieve sites die bedoeld Veel websites gebruiken de zijn om iets van te leren, techniek van bloggen voor Howstuffworks.com is daar andere doeleinden. Op een mooi voorbeeld van. geenstijl.nl kun je humoristische artikelen lezen over zaken die in het nieuws DE WEBWINKEL zijn. Op digitanis.com vind je Webwinkels zoals Amazon.com, wehkamp.nl en het blog van meneer Tanis. Hij bol.com herken je meteen. Je gebruikt de blogsoftware om kunt zoeken op categorie of op huiswerk, opdrachten en uitleg voor zijn leerlingen trefwoord. Je kunt artikelen online te zetten. in je winkelmandje plaatsen en online afrekenen zodat de gekochte spullen thuis worden bezorgd. Gangbare manieren om online te betalen zijn:
6.4 Verschillende soorten websites
6.5 Locaties; Hoe werkt het internet? Het internet is eigenlijk het grootste netwerk van computers ter wereld. Een netwerk is een verzameling computers/apparaten die met elkaar verbonden zijn. Dit kan door middel van snoeren of draadloos. Stel jezelf alle computers ter wereld voor en probeer tussen al deze apparaten een lijn te trekken. Je krijgt dan een bijna oneindig spinnenweb! Dat noemen we het internet, ofwel het wereldwijde web (WWW). Een website wordt altijd ergens gehost. We zeggen vaak, “dat staat op Internet”. We bedoelen dan eigenlijk dat die website, of die bestanden, ergens ter wereld op een PC staan. Het internet maakt het mogelijk om die informatie te bekijken. De PC waarop een website draait noemen we de server. Google is op dit moment ’s werelds grootste zoekmachine. Alle informatie die Google heeft staat ook ergens opgeslagen, namelijk op een server. Google heeft verschillende server parks in de wereld. Als je iets opslaat op Dropbox, dan staat dat dus op computers van Dropbox. Die computers, servers, staan ergens in een gebouw, ergens op de wereld. De werkelijke locatie van onze bestanden of de informatie de we raadplegen weten we in de praktijk niet eens.
Hierboven zie je een klein deel van Google’s server ruimte. Hieronder zie je op de wereldkaart de server parks van Google.
6.6 Wat is de Cloud? De laatste jaren hoor je veel over Cloud Computing. Met de cloud (wolk) bedoelen we een plek op internet waar jouw data opgeslagen staat. Data kan zijn: je PowerPoints, Wordbestanden, Spreadsheets, agenda, adresboek, etc. Meestal staan deze zaken op je eigen PC of laptop. Als je ze dan ergens anders wilt gebruiken, bijvoorbeeld op school, dan moet je ze meenemen op een USB-stick of iets dergelijks. Als je zorgt dat jouw data in “de cloud” staat, dan kun je er vanaf de meeste apparaten met Internetverbinding gewoon bij. De afbeelding hieronder geeft schematisch weer wat de cloud is.
DE CLOUD
3.5 Variaties en aanpassingen Je hebt in deze reader geleerd over de verschillende soorten websites, wat internet precies is en diensten. Vaak als we voor school dingen opzoeken gebruiken we Google. Onthoud dat informatie niet “op Google” staat, maar op een website die Google gewoon weet te vinden. Websites worden altijd door mensen gemaakt, en mensen maken fouten. Niet alle informatie die je op het web vindt is dus betrouwbaar! Wikipedia is een encyclopedie die door haar gebruikers gevuld is met informatie. Die is nooit 100% betrouwbaar.
Bij cloud computing staat de informatie dus niet meer op je apparaat, maar is “in de wolk” opgeslagen. Je kunt de wolk Algemene tips voor het zoeken en gebruiken van informatie op ook vanaf andere apparaten bereiken. Je bent dus niet meer internet: afhankelijk van je eigen pc •Raadpleeg altijd meerdere bronnen thuis. Als meerdere bronnen hetzelfde antwoord geven op jouw Een heel bekend voorbeeld van zoekvraag, dan is die informatie betrouwbaarder. •Wat is het belang van de maker van de site? Cloud Computing is Dropbox. Op de Canon website zul je alleen maar lezen hoe geweldig Ook de ELO die we op school Canon camera’s zijn. Als je op kieskeurig.nl de reacties van gebruiken is een soort van echte gebruikers leest krijg je een eerlijker beeld. cloud. •Rechten - wiens eigendom is het? Als je plaatjes, foto’s, muziek, filmpjes gebruikt voor je werk of school, bedenk dan wie het heeft gemaakt. Vermeld altijd de bron van de gebruikte informatie. Je mag niet zomaar alle data kopieren. Als je wilt voorkomen dat je beschuldigd wordt van plagiaat, gebruik dan rechtenvrije muziek en foto’s. •Rechtenvrij materiaal Op YouTube kun je niet zomaar meer bekende muziek onder je eigen filmpjes zetten. Je krijgt dan bericht van YouTube dat je materiaal hebt gebruikt waarvan jij niet de rechten bezit. Kijk eens op icompositions.com voor rechtenvrije muziek. Ook plaatjes en foto’s mag je niet zomaar overnemen, op istockphoto.com kun je plaatjes vinden die je wel mag gebruiken tegen betaling.
