Inleiding webdesign. Websites zijn er niet zomaar. Iemand heeft ze bedacht en gemaakt en er moeten ook mensen zijn die het willen gebruiken.

Transcriptie

1 Inleiding Webdesign

2 Inleiding webdesign Dit is een algemene inleiding over het maken van websites en wat daarbij allemaal komt kijken. De onderwerpen worden kort aangestipt omdat deze inleiding is gebaseerd op een les van vijftig minuten. Er valt over de meeste zaken veel meer te vertellen. Websites zijn er niet zomaar. Iemand heeft ze bedacht en gemaakt en er moeten ook mensen zijn die het willen gebruiken. Hoe lang bestaat het Internet al? - Al in 1969 bestond er een systeem dat universiteitsnetwerken en later ook militaire netwerken met elkaar verbond. - In 1974 werd de term "Internet" voor het eerst gebruikt. - In 1983 is een nieuwe techniek ontwikkeld, het zogenaamde Internet Protocol en dat was het begin van het Internet in de huidige technische vorm. - In 1991 werd door klikbare aan elkaar gekoppelde pagina's het Internet geschikt gemaakt voor het grote publiek. - Vanaf 1995 raakte het Internet ingeburgerd. Het huidige Internet bestaat in 2011 dus twintig jaar. Niet iedereen kan zich meer voorstellen dat iemand twintig jaar geleden nog het telefoonboek pakte om een telefoonnummer op te zoeken, tegenwoordig gebruik je de online versie. Of wat dacht je van een vuistdik spoorboekje met de dienstregeling van de trein. Nu kijk je gewoon op Van statische naar interactieve websites De eerste jaren waren er alleen statische websites. Dat zijn websites waarop informatie staat die niet verandert. Tegenwoordig is bijna alles interactief. Dat betekent dat je bijvoorbeeld via een formulier een bericht kunt achterlaten of zelf foto's en filmpjes kunt plaatsen. Netwerksites De bekendste interactieve sites zijn netwerksites. - Hyves bestaat sinds 2004 en heeft in 2011 ongeveer 9 miljoen gebruikers. Dat zijn voornamelijk jongeren, hoewel ook Hyves steeds meer zakelijk wordt ingezet. - You Tube bestaat sinds 2005 en wordt ook het meest bezocht door jongeren, maar ook dit wordt wel zakelijk ingezet, bijvoorbeeld door het plaatsen van een filmpje waarop iemand een presentatie geeft. - Linkedin is een zakelijk netwerk met vooral volwassen gebruikers - Facebook is de grootste netwerksite met wereldwijd meer dan 500 miljoen gebruikers, waarvan ruim 4 miljoen in Nederland. - Twitter bestaat sinds 2006.Het is een berichtenservice waarop mensen berichten van maximaal 140 tekens plaatsen over waarmee ze zich bezighouden. - Wikipedia is een online encyclopedie waarin iedereen gegevens kan wijzigen. Wat komt er kijken bij het maken van een goede website? Iedereen kan een website maken, maar bij het maken van een goede website komt veel meer dan je op het eerste gezicht denkt. Als je een brood kunt bakken ben je nog geen bakker, als je kunt koken ben je nog geen kok en als je kunt schrijven ben je nog geen journalist. Dat geldt ook voor webdesign. Er moet rekening worden gehouden met: De Doelgroep Voordat je begint moet je je afvragen waarover je website gaat. Is het bijvoorbeeld een website over je hobby of wil je iets verkopen? 2

3 Het is ook belangrijk te weten voor wie een website is bedoeld. Een website kan bijvoorbeeld zijn gericht op jongeren, ouderen, mensen met een bepaalde interesse of mensen met een bepaalde ziekte. Voor jongeren zal je anders schrijven dan voor ouderen. De Lay Out Dat geldt ook voor de Lay Out. Zelfs binnen een bepaalde doelgroep kunnen smaken verschillen. Kijk maar eens naar het verschil tussen de website van Takens in Balkbrug en die van de Leeren Lampe in Raalte ( Schermgroottes Niet ieder computerscherm is even groot, er bestaan veel verschillende schermgroottes. Vroeger waren de meeste schermen 600*480 pixels, nu meestal 1024*768 pixels*. Bovendien zijn websites tegenwoordig op mobiele telefoons te bekijken. Hiervoor worden vaak aparte websites gemaakt omdat het anders wel heel klein wordt. Bovendien worden mobiel vaak ander zaken opgezocht. Mobiele sites beginnen vaak met de letter m, dus bijvoorbeeld Een website moet voor alle beeldschermen goed zichtbaar zijn. Dat kan op twee manieren: De website heeft een vaste maat De website heeft het formaat van het kleinste scherm. Op grotere schermen is ruimte rondom de website. Soms is dit leeg, maar er kunnen ook figuren in staan. Het is in ieder geval iets wat niet onmisbaar is voor de website. Een voorbeeld hiervan is deze website is zowel horizontaal als verticaal gecentreerd. Een ander voorbeeld is Deze is alleen horizontaal gecentreerd en loopt door naar beneden met een scrollbar aan de rechterkant. Een website mag alleen horizontaal scrollen, maar niet verticaal! Schalen Je kunt een website laten meeschalen met de grootte van het beeldscherm. de website blijft dan altijd beeldvullend. Voorbeelden hiervan zijn en Browsers Er bestaan verschillende browsers. De meest gebruikte is nog steeds Internet Explorer (IE), maar steeds meer mensen gebruiken Firefox. Ook worden Opera, Safari en Google Chrome gebruikt. Het probleem is dat de verschillende browsers de code van een website niet altijd op dezelfde manier interpreteert. Vooral IE6 interpreteert de code wel eens anders dan de andere browsers. Om dit op te lossen bestaan er bepaalde codes die IE anders aansturen. Vindbaarheid Als je een website hebt gemaakt en op het Internet hebt geplaatst moet deze natuurlijk wel worden gevonden. Hiervoor worden verschillende methodes toegepast: Dat wordt ook wel SEO (Search Engine Optimalisation) genoemd. - Meldt de website aan bij verschillende zoekmachines zoals Google, Ilse en Altavista. - Meldt de website aan bij startpagina's over het onderwerp van de website. Een website over webdesign kun je bijvoorbeeld aanmelden bij - Schrijf goede webteksten. Teksten op websites worden namelijk anders gelezen dan teksten op papier. De teksten moeten bijvoorbeeld veel korter en to the Point zijn, lezers van de pagina haken anders snel af. Het is goed om kopjes te gebruiken. - In de HTML-code waaruit een website is opgebouwd wordt ook rekening gehouden met de vindbaarheid door het gebruik van bepaalde tags. Zet de koptekst bijvoorbeeld tussen <h1> en </h1>. Ook wordt gebruik gemaakt van zogenaamde Metatags In de html-code. Hierin kan een beschrijving van je website en een aantal zoekwoorden staan, maar de 3

4 meningen verschillen of een site hierdoor beter wordt gevonden. Het is ieder geval goed een metatag met de beschrijving van je website op te nemen omdat Google deze tekst bij de resultaten laat zien. - Ook de naam van de site is belangrijk. Geef je website een naam die bij het onderwerp past en gebruik bij lange namen die uit twee woorden bestaan geen underscore(_) maar een liggend streepje (-). Google ziet het dan als twee aparte woorden. Als je bijvoorbeeld een website over paarden hebt, wil je dat je website wordt gevonden als er wordt gezocht op het woord "paard". Het is dan goed dat dit woord ook in de titel van je website staat. Ontwikkelingen De ontwikkelingen op het internet gaan razendsnel. Denk maar eens aan de interactieve websites, mobiel Internet, nieuwe browsers, andere coderingen, digitale nieuwsbriefsystemen en allerlei Twittertoepassingen. Zelf een website maken? Het vorige klinkt allemaal erg ingewikkeld, maar je kunt best zelf een website maken. Dat kan met een kant-en-klaar systeem of een weblog, maar je kunt ook helemaal zelf een website maken. Kant en klare systemen: Als je begint kun je bijvoorbeeld gebruik maken van kant en klare systemen zoals: Het nadeel hiervan is dat je, net als bij Hyves en Facebook, vastzit aan bepaalde vaste stramienen en dat het er niet zo professioneel uitziet. Weblogs Je kunt ook eenvoudig een weblog maken. Een weblog is een website waarop regelmatig nieuwe bijdragen verschijnen en waarbij het nieuwste bericht bovenaan verschijnt. Er wordt eigenlijk een logboek bijgehouden met informatie die een blogger wil delen met zijn publiek. Meestal gaat het om tekst, maar het kan ook gaan om foto's, video's (vlog) of audio (podcast). Op een weblog kan meestal ook een reactie worden geplaatst. Twitter is eigenlijk ook een soort bloggen (microbloggen) waarbij je maar 140 karakters kunt gebruiken. Zelf maken Het leukste is helemaal zelf een website te maken, je kunt die dan precies zo maken als je zelf wilt. Hoe doe je dat? Als je naar de broncode van een willekeurige website kijkt zie je daar de code waaruit die website is opgebouwd. De broncode vind je in de meeste browsers via beeld > bron of iets wat daarop lijkt. De code die je waarschijnlijk ziet, lijkt erg ingewikkeld, maar gelukkig is de basiscode van een HTML-website minder ingewikkeld. Die ziet er zo uit: <html> <head> <title>titel</title> </head> <body> Hier staat de eigenlijke website </body> </html> Je ziet dat de code een "geneste structuur heeft. De code begint met <html> en eindigt met </html>, waarbij / einde betekent. Binnen de html komt eerst de zogenaamde head. Hierin staan allerlei zaken voor de aansturing van de website, zoals een link naar een css-bestand dat de Lay Out van de website regelt. Ook de titel staat binnen de head. Het is belangrijk 4

5 deze titel in te vullen omdat die linksboven in je browser verschijnt. Na de head volgt de body, waarin de code van de eigenlijke website staat. Wat heb je nodig om een website te maken? kladblok of een editor Je kunt de code van een website in kladblok schrijven. dat staat op vrijwel iedere computer. De meeste mensen gebruiken een editor. Hiermee kun je direct zien hoe de website er ongeveer uitziet. Dat wordt ook wel WYSIWYG (What You See Is What You Get) genoemd. Je kunt eventueel een gratis editor downloaden zoals First page ( Een domein De code die op je computer staat moet natuurlijk op het Internet worden geplaatst. De pagina die je in kladblok of in een editor hebt gemaakt plaats je op je domeinruimte. Dat is een stukje van een server waarop meerdere website staan. Vaak heeft je provider domeinruimte voor je beschikbaar waarop je je website kunt plaatsen. Is je provider bijvoorbeeld xs4all, zonnet of KPN, vraag dan eens na of ze die mogelijkheid hebben. Anders kun je bij een hostingbedrijf een domein en hosting aanvragen Een ftp programma Om je bestanden op de server te plaatsen heb je een ftp-programma nodig. Je kunt bijvoorbeeld filezilla ( downloaden. Hiermee sleep je eenvoudig je bestanden van je PC naar de server. Denk na over wat je op het Internet zet. Je mag bijvoorbeeld niet zomaar foto's van anderen gebruiken. Op veel foto's zit auteursrecht. Een fotograaf verdient zijn brood met het verkopen van foto's aan kranten of tijdschriften en dan is het niet leuk dat iemand zijn foto van het Internet haalt en gebruikt zonder ervoor te betalen. Dat komt erg vaak voor, bijvoorbeeld bij foto's van bekende voetballers. Vaak nemen deze fotografen dan een gespecialiseerde advocaat in de arm om betaald te krijgen voor een foto. Dat was ook het geval bij een foto van Bokito, de aap die enkele jaren geleden uit zijn verblijf in een dierentuin ontsnapte. Kijk ook uit met het plaatsen van privégegevens. Een leuk You Tube filmpje daarover staat hier: Wat kun je er dan wel opzetten? - Informatie over je hobby sport e.d. - Een webshop - Zelfgemaakte foto's Advertenties Met een persoonlijke homepage zul je niet veel adverteerders trekken omdat je homepage waarschijnlijk niet gaat over een onderwerp dat goedbetalende advertenties aantrekt te weinig bezoekers heeft om aantrekkelijk te zijn voor adverteerders. Je zult er zeker niet rijk van worden. Vooral grote websites zoals Google.com of hyves.com zijn aantrekkelijk voor adverteerders vanwege de hoge bezoekersaantallen. Je kunt gebruikmaken van Google Adsense, maar dat levert meestal maar een paar cent per klik op. Bovendien zal er met weinig bezoekers ook niet veel op de advertenties worden geklikt. Je mag nier zelf op je advertenties klikken. Google gebruikt slimme software om fraude te voorkomen. In het ergste geval kun je je eigen account en verdiende geld kwijt raken. 5

6 Woordenlijst Browser computerprogramma om webpagina's te kunnen bekijken. css Cascading StyleSheets Een manier om de vormgeving voor een serie webpagina's in één keer vast te leggen. Domein Naam in het Domain Name System (DNS), het naamgevingssysteem op internet. Meestal is in de domeinnaam een persoon, bedrijf of thema te herkennen. Dynamische website Een website die iedere keer anders kan zijn. ftp filetransfer protocol Een systeem om bestanden op het internet te plaatsen. Hostingbedrijf Een aanbieder van webruimte, HTML Hypertext Markup Language een opmaaktaal voor de specificatie van documenten, voornamelijk bedoeld voor het Internet. Internet Een de hele aarde omspannend openbaar netwerk van computernetwerken. Metatags Informatie die bovenaan in een HTML-document staat, zoals een korte beschrijving van de pagina en enkele steekwoorden. Netwerksite Een website die gebruikers een profiel laat aanmaken, die ze vervolgens kunnen koppelen aan de profielen van anderen binnen hun sociaal netwerk. Pixel Een punt op het beeldscherm van de computer of in een digitaal beeld. Het woord pixel is een samentrekking van de twee eerste lettergrepen van het Engelse picture element. Resolutie Veelvoud van pixels op een beeldscherm. Hoe meer pixels beschikbaar zijn, hoe scherper het beeld is. Statische website Een website waaraan niets verandert. SEO Search Engine Optimalisation of zoekmachineoptimalisatie. het geheel aan activiteiten bedoeld om een webpagina hoog te laten scoren in de zoekresultaten van een zoekmachine. Weblog 6

7 een website waarop regelmatig nieuwe bijdragen verschijnen en waarbij het nieuwste bericht bovenaan verschijnt. Webtekst Een tekst speciaal geschreven voor het internet. Wysiwig What You See Is What You Get Dat wat je zelf in toevoegt is op dezelfde manier op de website te zien. Zoekmachine Een instrument waarmee je informatie kan opzoeken op het internet. 7