ࡱ > Q S N O P bjbj22 : Pk Pk [ ( c c p p p 8 p Oq ^ 3r 9v ( av av av y V { l z{ 8 K { y y { { Ұ c c av av Ұ Ұ Ұ { % c 8 av av Ұ { Ұ Ұ f 0 ц p P H D L D 0 Ұ 0 Ұ 0 { { { X p p ) : Webdesign CONTACT _Con-447415271 \c \s \l Aart Jan Bergshoeff Het internet Internet (het world wide web) is een wereldwijd netwerk van computers. Als je twee computers naast elkaar heb staan wil je al gauw dat er gegevens van de ene naar de andere overgezet kunnen worden. Om dat te doen worden de computers via de ethernetkaart (netwerkkaart) verbonden. De computers praten dan met elkaar via een afgesproken taal (een protocol). Helaas liggen er geen ethernetkabels tussen alle huizen. Maar er liggen wel overal telefoondraden of tv-kabels! Via deze draden kan je een wereldwijd netwerk leggen. Het computersignaal moet dan wel vertaald worden naar een telefoon- of tvkabel-signaal. Dat doet de modem. Modem staat voor modulator-demodulator, ofwel coderen-decoderen. De taal (protocol) die hierbij gebruikt wordt heet HTTP (HyperText Transfer Protocol). Vandaar dat web-adressen altijd beginnen met HYPERLINK "http://www" http://www. WWW staat voor world wide web. Daarachter tik je dan de domeinnaam met een toplevel-domein erachter (aartjan.nl of .com etcetera). Als er mapjes (directories) staan kun je daar naar toe door een slash te tikken gevolgd door de mapnaam, of de naam van het document: http://www.aartjan.nl/index.htm Een Homepage of website De homepage is de eerste pagina van een website, de openingspagina dus. Het is een bestandje dat altijd index.htm heet en op een webserver staat. De HTML-code (Hyper Text Markup language) die in het bestandje staat wordt ingelezen, vertaald en opgemaakt getoond door de web-browser (Explorer). HTML: HyperText Markup Language Met HTML kan je tekst ordenen en structureren door middel van code. Je kunt aangeven dat iets Kop 1 is of Kop 2 (er zijn 6 kop-niveaus), waar een paragraaf begint en eindigt, of er een genummerde of ongenummerde opsomming is en of een woord nadruk krijgt of nog meer nadruk. Er zijn er nog een aantal, maar echt veel meer zijn er niet en dit zijn de belangrijkste. De basis-HTML kun je in een middag leren. In het html-bestand staan teksten, plaatjes en links naar andere paginas (andere html-bestanden). Er kunnen bestanden in de pagina staan zoals audio en video. Die bestanden kunnen overal op internet staan. Het webadres van het plaatje of pagina moet je dan volledig overnemen ( HYPERLINK "http://www" http://www etc). Meestal zet je de gebruikte bestanden gewoon op je eigen server. Elke pagina bestaat uit een apart html-bestand, en de plaatjes staan er in een apart mapje bij. CSS (Cascading Style Sheets) De HTML-taal is niet heel geschikt voor visuele opmaak zoals kleur, lettertype, marges en inspringers et cetera; dat doe je met CSS (Cascading Style Sheets). Deze css (opmaakdefinitie) zet je in een los bestandje op de server, het liefst ook in een apart mapje. Servers en hostingproviders Een webserver is een computer die 24 uur per dag aanstaat en verbonden is met internet. Bedrijven die zulke servers hebben staan noem je hosting-providers. Jouw site staat dan te gast op hun server, zij zijn je host. Een voorbeeld van zon provider is HYPERLINK "http://www.protagonist.nl" www.protagonist.nl of HYPERLINK "http://www.ladot.nl" www.ladot.nl of webreus.nl Je zou zelf ook een server thuis neer kunnen zetten. Die moet dan 24 uur per dag aanstaan, een vast ip-nummer hebben, server-software genstalleerd hebben en een snelle upload-verbinding hebben. Je kunt voor voor weinig geld je site bij een hostingprovider neerzetten. Kijk op HYPERLINK "http://www.internetten.nl" www.internetten.nl om er een te zoeken. Ook bij je eigen internet-provider kun je meestal een site neerzetten. Kijk in de specificaties van jouw internet-aanbieder. Access(toegang)-provider Een access provider verzorgt de toegang tot internet. Xs4all, planet, zonnet, wanadoo et cetera. Deze providers bieden je meestal bij het abonnement ook gratis een aantal Megabyte op hun server aan waar jij je homepage neer kan zetten. In de online help van de providers vindt je vaak uitgebreide hulp. Domeinnamen, ip-nummers Elke aangesloten modem (en bijbehorende computer) heeft een publiek ip-nummer, bijv. 80.89.239.20. Je kan door het intikken van dat nummer in je browser contact maken met die modem of computer. Maar het is veel handiger om een naam te gebruiken, zoals HYPERLINK "http://www.aartjan.nl/"aartjan.nl. Die naam moet dan door wel vertaald worden naar je echte ip-nummer. Dat doen de DNS-servers (Dynamic Name Servers, er staan er een paar in Nederland). Het is belangrijk om een goede domeinnaam te hebben. Kijk bij een provider of bij de SIDN.nl of je gewenste domeinnaam nog vrij is. Een domeinnaam kun je registreren bij vrijwel elke provider en kost zon 10 euro per jaar. FTP: file transfer protocol: uploaden Via het ftp-protocol kun je uploaden: jouw files op de webserver zetten. In een ftp-programma zie je 2 vensters: de bestanden op jouw eigen computer, en de bestanden op de server. Bestanden die klaar zijn sleep je van jouw computer naar de server. Dreamweaver heeft een ingebouwd ftp-programma (zie Remote Web site). Je hebt 3 gegevens nodig om in te kunnen loggen (kijk in je papieren van je provider: De naam van de server (bijv websites.xs4all.nl/~jenaam) Je login-naam (voor ftp soms anders dan voor je mail) Je password (ook voor ftp soms anders dan voor je mail) Als het niet werkt: zet passive ftp aan en/of check al je firewalls Downloaden Downloaden betekent: bestanden van internet naar je eigen computer overbrengen. Een bezoek aan een website is eigenlijk ook downloaden: de bestanden die je bekijkt staan dan (tijdelijk) op je eigen computer. Zoek via Google > afbeeldingen eens naar een bepaald plaatje. Download dit plaatje met rechtsklik > save target. Download een hele webpagina (of zelfs een hele site) in Explorer via File (Bestand) > save as. Statistieken Het analyseren van de website-statistieken kan interessante informatie opleveren. Je weet dan waar de bezoekers van de website vandaan komen, wat ze bekijken en misschien zelfs waarom ze weggaan. En hoe komen deze bezoekers eigenlijk op de website terecht? Welke zoekwoorden typen ze in? Algemene uitleg statistieken: HYPERLINK "http://www.microsoft.com/netherlands/ondernemers/ondernemen_verkoop_en_marketing/internet/statistieken.aspx" \l "4" http://www.microsoft.com/netherlands/ondernemers/ondernemen_verkoop_en_marketing/internet/statistieken.aspx - 4 Voorbeeld statistieken: HYPERLINK "http://www.ladotstats.nl" http://www.ladotstats.nl Klik op Premium en dan op demo. Probeer alles uit. Bijna elke hostingprovider geeft zulke statistieken. Hoe wordt je gevonden: Google en zoekmachines Je website moet goed gevonden kunnen worden, en goed gendexeerd (doorzocht en gecategoriseerd) kunnen worden. Dit begint een echte wetenschap te worden: SEO, search engine optimization. Bedrijven hebben er groot belang bij om hoog in de zoekresultaten te komen. Een zoekmachine (search engine) zoals Google zoekt dagelijks het internet af en indexeert alle nieuwe paginas die het vindt. Het recept van Google is geheim en wordt voortdurend aangepast, maar er zijn wel enkele tips te formuleren: Zorg dat er naar je site gelinkt wordt vanaf relevante toonaangevende sites Neem in je site links op naar belangrijke relevante sites Zet belangrijke keywords vooral ook regelmatig in de echte, leesbare tekst,een kopniveau1 telt daarbij zwaarder dan een paragraaf. Zet de allerbelangrijkste keywords zo mogelijk in de titelbalk Gebruik geen framesets, want dan vindt een zoekmachine misschien een apart frame in plaats van de totale site Gebruik geen Flash, een zoekmachine kan dan de inhoud niet (of moeilijk) indexeren Extra zoektip: zoeken in een lange pagina kan altijd met Ctrl-F (Apple-F) Zoek-functionaliteit toevoegen aan de website Er is een gratis, open source mogelijkheid: HYPERLINK "http://search.mnogo.ru" http://search.mnogo.ru Een goede programmeur kan deze gratis zoekfunctionaliteit toevoegen aan een site, zoals op HYPERLINK "http://www.mediamatic.net/" http://www.mediamatic.net/ is gedaan. Betaald kan het uiteraard ook: HYPERLINK "http://www.google.com/enterprise" http://www.google.com/enterprise Hoe maak je een website, en wat is Dreamweaver Een website is HTML-code die door een browser wordt ingelezen/vertaald. HTML-code kun je met elk tekstprogramma maken zoals Notepad, Word etc. Dreamweaver is een voorbeeld van een wysiwyg html editor: what yousee is what you get: je ziet niet alleen de code maar ook het voorbeeld. Je kan het voorbeeld meteen wijzigen. andere software: Frontpage (niet zo goed in stylesheets) Een website is meestal gemaakt in HTML, maar soms in Flash, een andere code. Flash: voordelen Cross browser, cross platform Met geluid (en nu ook video), goed en snel Snelle vloeiende animaties HYPERLINK "http://www.hoving.com/startpage.html" Werkt ook goed via trage modem Oneindig scalable (vector) Totale controle over typografie, mooi en flitsend HYPERLINK "http://www. blitzds.com/" Interactieve presentaties HYPERLINK "http://www.becominghuman.org/" Flash: nadelen Je weet niet of de bezoeker de (juiste) plugin heeft Wachten voordat je kan beginnen Shockwave of Flash? Nog meer plugins Browser-backbutton en bookmark werkt niet Toegankelijkheid: letters kun je niet vergroten, spraakondersteuning ontbreekt Google (e.a.) vind je niet of doorzoekt je niet Tip: gebruik stukjes Flash binnen HTML Waarom ziet dezelfde site er soms anders uit? Dezelfde HTML-code kan er anders uitzien in verschillende browsers en op verschillende systemen. En er zijn ook grote monitoren en kleine, waar de rechter- en onderkant van de site buiten beeld kan vallen (en er scrollbalken ontstaan) Er zijn zelfs browsers die alleen tekst laten zien, zonder de plaatjes (Lynx). Hier moet je rekening mee houden. De grootste browser is Explorer (90%), de grootste nieuweling is Firefox (10%), verder zijn er Safari, Opera, Netscape, Lynx, Mozilla. Cijfers over HYPERLINK "http://www.thecounter.com/stats"internetgebruik Plug-ins Plugins zijn programmas die extra functionaliteit toevoegen aan de browser. Flash, altijd de nieuwste (Macromedia, Adobe) Shockwave, nieuwste (Macromedia, Adobe) Quicktime 7 (Apple) Windows Media Player (Microsoft) RealOne player (real.com, zoek de gratis versie) Acrobat Reader (om pdfs te tonen, eventueel direct in de browser) Javascript /Java (voor interactieve scripting. Javascript zit bijna altijd wel op alle browsers, maar Java niet meer) HTML HyperText Markup Language HTML is ontwikkeld om de inhoudelijke structuur van een tekst weer te geven; om tekst te ordenen met behulp van code. Het is niet zo geschikt voor visuele opmaak; dat gebeurt via de stylesheets (CSS). De browser kan mede de vormgeving bepalen, bijvoorbeeld als de browser een telefoon of voorlees-software is. De organisatie die de standaardisatie van HTML regelt is het World Wide Web Consortium (W3c) HYPERLINK "http://www.w3c.org" http://www.w3c.org. Een goede site om HTML en CSS te leren is HYPERLINK "http://handleidinghtml.nl/" http://handleidinghtml.nl/ HTML bestaat uit elementen en attributen. Gebruik daar bij voorkeur kleine letters (dat is in de nieuwe standaard XHTML zelfs verplicht). Elementen De belangrijkste elementen voor tekststructuur zijn:
Heading1. Wordt gebruikt voor koppen. H1 t/m H7 Alles wat tussen deze tags staat wordt een Kop 1 Paragraph. Einde paragraaf. Harde return ofwel enterDeze tekst lijnt rechts.
Dit is een voorbeeld van een verouderd en afgekeurd attribuut, want alle visuele opmaak gebeurt niet meer in de html maar via het stylesheet (de css). Attributen gebruik je dus niet meer voor visuele vormgeving, maar wel voor alle andere specificaties van een element, of voor het aanroepen van een css-stijl:Deze paragraaf wordt opgemaakt volgens de definitie van .rechtslijnend in het stylesheet. (De punt ervoor geeft aan dat dit een class is.)