WEB DESIGN Excel With Business

WEB DESIGN

© 2012 Excel With Business

WEB DESIGN

HOOFDSTUK 1 Anatomie van een Website

1.0 Introductie

W

ebsites zijn een integraal onderdeel geworden van ons dagelijks leven. Velen van ons bekijken bepaalde sites voordat we het bed uitkomen. Wellicht om te zien welke impact het weer op onze kledingkeuze zal hebben. Om vervolgens door te gaan met het doorzoeken van het web tot we weer in slaap vallen in de nacht. Naast het bekijken van het weer houden we ons ook bezig met het versturen van e-mails, tv kijken, onderzoeken, werken, spelletjes spelen, beslissen wat voor middagmaaltijd, dromen, aanwijzingen verkrijgen en honderden andere taken allemaal met behulp van talloze websites. Pas op het moment dat je zelf je eigen website wilt creëren begin je na te denken wat het proces inhoudt. Dit hoofdstuk begint met het behandelen van dit onderwerp door de anatomie van een website nader toe te lichten.

1.1 Het web en haar browsers Ook al gebruiken de meesten van ons de woorden internet en web door elkaar, ze zijn toch twee verschillende “plaatsen” in het computernetwerk. De term internet, werd als eerst begin jaren 70

bedacht, toen verschillende academische instellingen een manier creëerden om middelen te delen voornamelijk op tekst gebaseerd - elektronisch. Ongeveer 20 jaar later ontwikkelde Tim Berners een set van technologieën, waarmee de middelen in staat werden gesteld om zich te verbinden via een serie links in de documenten. Dit werd bekend als het World Wide Web of web in het kort. In 1993 kwamen mensen bij het “National Center for Supercomputing Applications” (NCSA) met een manier om deze documenten weer te geven door een standaard grafische interface, die eenvoudig te begrijpen was en zelfs nog gemakkelijker te gebruiken is. Officieel werd dit Mosaic genoemd, dit kleine stuk software wordt verantwoordelijk gehouden voor het populair maken van het web en het leggen van het fundament voor webbrowsers zoals wij die kennen. In feite bestaan alle moderne browsers uit bepaalde karakteristieken - zoals de beruchte terug knop - van die eerste browser. Bekijk de History of the internet middelen op de website van Internet Society om meer te weten te komen: http://www.internetsociety.org// internet-51/history-internet

Figuur 1-1: : Deze schermafbeelding laat een webpagina zien in Mosaic, de eerste grafische webbrowser De schermafbeelding is afkomstig van: http://en.wikipedia.org/wiki/File:NCSA_Mosaic.PNG.

2


WEB DESIGN


Moderne webbrowsers Als we een website ontwikkelen, ontwikkelen we in essentie voor de browser - beide in termen van de eindgebruiker en de gebruikte software. De meest populaire en moderne browsers zijn Internet Explorer (IE) van Microsoft, Firefox en Google Chrome, waarbij elke browser in mei 2012 een marktaandeel heeft van ongeveer 25 %. Bekijk http://en.wikipedia.org/wiki/Usage_ share_of_web_browsers voor details en bijgewerkte statistieken. Op verschillende keren tijdens de afgelopen twee decennia was er een enkele browser, die over een aanzienlijk marktaandeel beschikte; op een gegeven moment was het Netscape Navigator en uiteindelijk domineerde IE. Door de toename van mobiele apparaten en de entree van Google is de superioriteit van Microsoft echter gestaag geslonken in de markt. Aangezien browsers erg integraal zijn aan web design, zullen we dit meer in detail bespreken in Hoofdstuk 7: Ontwerpen voor Schermen.

1.2 Links en URL’s Zoals je weet, is het web opgebouwd op basis van links tussen verschillende stukjes informatie. De basistaal die in feite gebruikt wordt om websites te creëren wordt HTML genoemd, wat staat voor Hypertext Markup Language. Terwijl het woord hypertext wellicht een beetje buitenaards klinkt, verwijst het echter naar het feit dat de inhoud gelinkt is naar iets anders. Als er gelinkt wordt naar webpagina’s, dan moeten we weten wat het adres is van de gelinkte pagina. De officiële terminologie voor dit adres is uniform resource locator, ofwel URL (uitgesproken door de letters U-R-L) in het kort. URL’s starten met http:// en eindigen normaal gesproken met iets zoals .com of .org. Denk aan het adres voor het vinden van de kenmerken van de nieuwste iPad op de Apple website: http://www.apple.com/ipad/features/.

Scheme Het eerste onderdeel van een URL wordt scheme genoemd (eerder aangeduid als een protocol). Dit vertelt de browser welke interface er gebruikt moet worden om toegang tot het adres te krijgen. De

3

Figuur 1-2: Alle moderne webbrowsers vertonen het webadres van de pagina aan de bovenkant van het browser venster.

meest gebruikte schemes voor het bekijken van de webpagina’s zijn HTTP en HTTPS. HTTP staat voor hypertext transfer protocol. HTTPS is hetzelfde, alleen geeft de s aan het einde aan dat er een veilige verbinding plaatsvindt.

Domein In het Apple adres, is apple.com het onderdeel van het adres - dat het domein wordt genoemd - dit helpt te identificeren welke computer de pagina’s herbergt. Wij zullen dit nader bespreken in Hoofdstuk 2: Hosting en Domeinen.

Pad De rest van het adres - /ipad/features/ - is het pad naar de exacte locatie van de informatie die getoond wordt. Hoewel de schuine strepen in tegengestelde richting wijzen in vergelijking met wat is weergegeven in het webadres in Figuur 1-2, blijft de intentie toch hetzelfde: ze geven de mappenstructuur in het computersysteem, waar doorheen wordt gebladerd aan. In het geval van de Windows machine, Users (Gebruikers), wwillard, Documents (Documenten) en Samples zijn allemaal mappen op de computer. Deze schermafbeelding laat de inhoud zien van de map Samples. Dit is een enkel bestand genaamd sample01.docx. In het geval van de iPad webpagina kan de werkelijke inhoud van de pagina gevonden worden in de map features, die zich bevindt in de ipad map.

1.3 Servers Nu we de structuur van een eenvoudig webadres hebben geïdentificeerd is de logische vraag: Waar


WEB DESIGN


bevinden deze bestanden zich eigenlijk? Geloof het of niet, webpagina’s zijn opgeslagen of kunnen opgeslagen worden op een computer, net als de computer die je nu gebruikt om deze site te bekijken. Het belangrijkste is dat de computer ook aangesloten moet zijn op het internet en aangewezen moet zijn als een webserver. Dit betekent dat de computer is ingesteld op verzoeken voor het ontvangen van bestanden en vervolgens op deze verzoeken te antwoorden door het juiste bestand te verzenden. Als je een webadres typt, in een webbrowser en Enter klikt, dan stuurt je computer een bericht om de gevraagde informatie te vinden. Het domein gedeelte van het adres geeft de eerste aanwijzing waar te kijken. De Internet Corporation for Assigned Names and Numbers (ICANN) zorgt voor het beheer van de centrale domeinendatabase en zorgt ervoor dat alle adressen uniek en te identificeren zijn. Het ICANN register, vertelt het numerieke adres van de server, dat geassocieerd is met elk specifiek domein, die op zijn beurt weer aangeeft waar de bestanden voor dat domein gevonden kunnen worden. Om te helpen de relatie te verduidelijken, stel dat het adresboek op je mobiele telefoon de centrale database was voor de registratie van domeinnamen. Als je, je moeder zou willen opbellen, dan zou je wellicht ‘moeder’ typen in het adresboek. Wanneer je de lijst vindt en op Bellen klikt, dan zal je telefoon ‘moeder’ kruisverwijzen met het bijbehorende telefoonnummer en je oproep op een juiste manier dirigeren. Webadressen werken ongeveer op dezelfde manier om de juiste webserver te vinden voor het opslaan van een site-inhoud.

Bij het opzetten van een nieuwe website zal je moeten beslissen op welke server je inhoud zich zal huisvesten. We zullen dit verder bespreken in Hoofdstuk 2: Hosting en Domeinen.

1.4 Pagina’s en Sites Wanneer je een bepaalde website opent, dan bekijk je de aangewezen bestanden op de server, of het nou een tekst, afbeeldingen, audio, video of een combinatie van beide is. Over het algemeen zien we deze inhoud als pagina’s, ook al wordt het niet weergegeven in dezelfde formaat, vorm of manier als een geprinte pagina. Desondanks wordt de term webpagina gebruikt om de weergegeven inhoud in een webbrowser te beschrijven nadat het bestand geladen is, zelfs als je moet scrollen om alle inhoud te bekijken. Dus ook al zijn ze niet helemaal nauwkeurig, de termen ‘pagina’ en ‘bestand’ worden meestal toch gebruikt als synoniemen met betrekking tot websites. Bekijk de schermafbeelding hieronder van een pagina op de NY Times website. Het adres toont het domein (nytimes.com) gevolgd door een hele reeks mappen (pages en education) en dan de naam van het bestand dat wordt weergegeven: index.html.

Figuur 1-5: De NY Times website wordt getoond om te helpen de relatie tussen de mappen en bestanden op een website uit te leggen.

4


WEB DESIGN De bestandsnaam op deze pagina - index. html - vertelt ons dat het de belangrijkste pagina is, in de omsluitende map (education). Indien we in feite ‘index.html’ verwijderen aan het einde van het webadres en dan Enter klikken, dan zou de pagina hetzelfde zijn. Dit komt doordat de meeste webservers standaard zijn opgezet om te zoeken naar een pagina met de titel ‘index’ (dat wil zeggen ook als er geen bestandsnaam is opgegeven in het webadres).


Figuur 1-6: Deze schermafbeelding toont nannydee. com vanuit het perspectief van de gebruiker, waarbij er gebruik gemaakt wordt van de browser Google Chrome.

Dit betekent dat wanneer je google.com invoert, in de adresbalk van je browser dat er eigenlijk wordt gezocht naar het standaard bestand in de wortel of bovenste map op de daarvoor bestemde ruimte van de webserver. Opmerking: Hoewel de meeste servers op zoek gaan naar ‘index’ als de standaard startpagina’s in elke folder, kan de extensie zelf variëren. Als de meerderheid van de pagina’s van een site gebouwd zijn met basis HTML, dan zal de extensie naar alle waarschijnlijkheid .html zijn. Mocht de site haar pagina’s echter vormen in een andere webtaal zoals PHP, dan zal die extensie gebruikt worden (.php).

5

Figuur 1-7: Hier zien we de nannydee.com startpagina vanuit het perspectief van de ontwikkelaar gebruikmakend van Adobe Dreamweaver.


WEB DESIGN


Laten we eens een kijkje nemen bij een voorbeeldsite - vanuit zowel het zicht van de gebruiker als die van de ontwikkelaar. Als een gebruiker nannydee.com bezoekt dan zal hij waarschijnlijk niet al teveel nadenken over het werkelijke bestand achter de schermen. Maar als we het bestand nu bekijken vanuit het perspectief van de ontwikkelaar, dan kunnen we een beter inzicht en begrip krijgen in de anatomie van een website. Figuur 1-7 toont de startpagina van nannydee.com bekeken in het programma Adobe Dreamweaver. In de linker bovenhoek van de schermafbeelding kun je het tabblad Bestanden zien, die alle HTMLbestanden laat zien die gebruikt worden voor de nannydee.com website. De pagina index.html is speciaal geselecteerd in de lijst, aangezien dat het bestand is dat wordt weergegeven.

1.5 Webpublicatie talen Bij het leren over het ontwerpen van een website moeten we veel gesprekken hebben over dingen zoals coderen en opmaaktalen. Als je gaat zitten om een brochure of een visitekaartje te ontwerpen, dan zou je waarschijnlijk gebruik maken van een paginaindeling programma om dit te bewerkstelligen. Aangezien het programma veel werk voor je uit handen neemt, is er maar heel weinig ‘zwaar werk’ nodig. Hoewel het waar is dat er enkele mooie belangrijke webpublicatie hulpmiddelen zijn die weinig coderen vereisen, is het niet altijd zo eenvoudig als het lijkt. Laten we eens terug kijken op de geschiedenis van webpublicatie om ons te helpen dit beter te laten begrijpen. Zoals we al eerder hebben geleerd was de eerste populaire grafische webbrowser Mosaic. Deze werd begin jaren 90 gelanceerd door het NCSA. Voordat het mogelijk werd gemaakt had Tim Berners-Lee veel slapeloze nachten om een eenvoudige manier te ontwikkelen om inhoud te publiceren op het nieuwe World Wide Web. Er waren meerdere mogelijkheden om inhoud te publiceren op een enkele computer, maar de vraag was hoe dit efficiënt en effectief gedaan kon worden op mondiale schaal. Hij besloot het raamwerk te gebruiken van een van de populaire desktop publicatie modules: SGML. In feite pakte hij het concept van paren bestaande uit tags (dit wordt gebruikt om te vertellen wanneer iets begint en wanneer iets eindigt), evenals specifieke

6

tags voor functies zoals de titels, paragrafen, koppen en lijsten. In de volgende code bijvoorbeeld, de openings tag (
) geeft de browser de opdracht om een nieuwe paragraaf te beginnen, terwijl de afsluitende tag (
) aangeeft waar die paragraaf moet stoppen.
Dit is een paragraaf met tekst.

Deze simpele tekst-tags waren geweldig, maar er ontbraken twee belangrijke attributen: links en afbeeldingen. Berners-Lee maakte vanwege zijn academische en onderzoek achtergrond gebruik van zijn netwerk en zocht feedback van onder andere zo veel mogelijk programmeurs om de oplossing te vinden voor tags bestemd voor links en afbeeldingen. Hij moedigde het soort samenwerking aan dat zou leiden tot het open source karakter van een groot deel van het internet waar we vandaag de dag van genieten. In de jaren sinds de introductie ging HTML inderdaad zo snel door zoveel iteraties dat Tim en veel anderen de noodzaak beseften van een set van universele standaards. In 1994 werd het World Wide Web Consortium (W3C) opgericht om dat gat op te vullen. Met vertegenwoordigers van bedrijven, instellingen en organisaties vanuit de hele wereld onderhoudt de W3C de webpublicatie standaards voor het globale internet. Bezoek http://www.w3c.org om meer te leren over wat velen het webpublicatie bestuurslichaam noemen.

W3C standaards De W3C schrijft dus de webpublicatie standaards en de browser bedrijven schrijven de software om deze standaards te vertolken en daarmee de inhoud op een juiste manier weer te geven. Dat klinkt allemaal vrij duidelijk toch? Was dat maar zo... Er zijn verschillende soorten standaards voorgesteld sinds begin jaren 90, maar de twee belangrijkste standaards voor webpublicatie zijn HTML en CSS. HTML wordt gebruikt om het raamwerk te ontwikkelen voor elke webpagina en vervolgens wordt CSS - Cascading Style Sheets - gebruikt om het ‘mooi te maken’. Om wat specifieker te zijn, © 2012 Excel With Business

WEB DESIGN


HTML zorgt voor de structuur van de inhoud terwijl CSS het vormgeeft. Laten we even in het kort kijken naar de code die gebruikt wordt voor de nannydee.com website om te zien hoe HTML en CSS samenwerken om de pagina’s te structureren en vorm te geven.

In dit voorbeeld hebben we overzicht van de twee belangrijkste secties van de code - een die de primaire structuur bepaald en een die de vormgeving bepaald voor de inhoud in die structuur.

HTML5 De huidige officiële HTML-standaard is HTML 4,

Figuur 1-8: Wanneer de code wordt bekeken in Dreamweaver Code View, dan zien we zowel HTML (voor structuur) en CSS (voor stijl) gebruikt om de nannydee.com startpagina te creëren.

7


WEB DESIGN


deze versie werd de grondlegger in 1997. De langverwachte HTML5 werd uitgebracht als een ‘proefversie’ in 2008 en sinds mei 2012 wordt deze versie nog steeds geclassificeerd als ‘nog in ontwikkeling’ door W3C. Browser ontwikkelaars zijn echter al sinds 2008 bezig om hulpmiddelen te bouwen die de laatste set van standaards moeten overbrengen. Deze beweren het volgende te zijn; gebruiksvriendelijker, efficiënter, eenvoudiger vertaald over de verschillende platformen en beter in staat om multimedia weer te geven. Het neemt normaal gesproken jaren in beslag voordat er een nieuwe set van standaards geschreven is. En een paar jaar om het allemaal officieel te maken met browsers voor de ondersteuning. In de tussentijd worden er nog steeds nieuwe standaards geschreven en worden nieuwe browsers verder ontwikkeld. Het is een oneindige cyclus die ons webontwikkelaars constant op onze tenen laat staan.

Het duurde enige tijd voordat de eerste HTML-spec was goedgekeurd voor de W3C om ook een groep op te richten om CSS waar te nemen. De groep bracht tijd door met het creëren van richtlijnen voor web-uitgevers om de relatie tussen HTML en CSS te verduidelijken. Dus om dit in het kort te herhalen, de focus van HTML ligt op de wijze van hoe de inhoud van een pagina te structureren, terwijl CSS zorg draagt voor de stijl. Als we dit zouden vertalen naar bijv. de woningbouw toe, dan zou je kunnen zeggen dat HTML gebruikt wordt om de muren te bouwen, terwijl CSS verantwoordelijk is voor de verf en decoratie. Beide zijn unieke en belangrijke aspecten van webpublicatie, die samenwerken om de pagina’s te creëren die wij ontwerpen. Hoofdstuk 6: Inleiding tot CSS zal verder uitleggen hoe CSS onze webpagina inhoud vormgeeft. .

Wat betekent dit allemaal voor jou? Wanneer we een nieuwe website creëren dan moeten we beslissen welke set standaards we moeten gebruiken en voor welke browsers het ontwikkeld moet worden in verband met de compatibiliteit. We moeten ook bereid zijn om de site te onderhouden en bij te werken als het nodig is wanneer er nieuwe standaards en browsers beschikbaar komen. We zullen hier nader op ingaan in Hoofdstuk 5: Inleiding tot HTML

CSS In de begindagen van webpublicatie waren er weinig opties voor het stijlen van de tekst en de opties die wel bestonden bevonden zich in de HTML zelf. Ontwerpers waren voor het overgrote deel alleen in staat om bepaalde kleuren en lettertypen te veranderen. In het begin konden we niet eens de grijze achtergrondkleur van een pagina wijzigen. Maar gaandeweg toen het web steeds meer aan populariteit had gewonnen, toonden steeds meer mensen interesse in het hebben van een betere controle over de stijl van webpagina’s.

volgende

8

Hoofdstuk 2 Hosting en Domeinen


WEB DESIGN Excel With Business

Recommend Documents