1 Cursus Dreamweaver 01/01/2004 Voor updates, achtergrondinformatie, voorbeelden en download: Bezoek Cursus Dreamweaver pagina 1/362 Inleiding Deze ...
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Cursus Dreamweaver 01/01/2004
Voor updates, achtergrondinformatie, voorbeelden en download: Bezoek http://www.ideabox.be/webdesign
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 1/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Inleiding Deze cursus wordt volledig gratis op internet aangeboden. Je mag deze cursus gebruiken, afdrukken of doorsturen naar anderen als één geheel. Het overnemen van teksten is niet toegelaten. Bezoek regelmatig de website (http://www.ideabox.be/webdesign/) voor updates, achtergrondinformatie, voorbeelden en download.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 2/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Inhoudstabel
Inhoudstabel ________________________________________ 3 Inleiding tot webdesign ________________________________ 4 CSS style sheets _____________________________________ 7 Gebruik van lettertypes _______________________________ 11 Gebruik van afbeeldingen _____________________________ 15 Beheer van domeinnamen _____________________________ 18 Usability: richtlijnen voor een bruikbaardere website ________ 22 Niet vraag gericht ___________________________________ 25 Vraag gericht _______________________________________ 25 Webhosting ________________________________________ 27 Technologieën om in het oog te houden __________________ 33
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 3/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Inleiding tot webdesign Onderdelen van een webpagina Een webpagina bestaat uit 3 onderdelen: • Tekst • Afbeeldingen (geluid, video, animatie) • Opmaak Tekst en opmaak worden samen opgeslagen in een HTML-bestand dat eenvoudig herkenbaar is aan de extensie .htm of .html. Afbeeldingen worden in een apart bestand opgeslagen, meestal van het GIF of JPEG formaat. In de HTML code wordt dan een referentie naar de correcte afbeelding gelegd zodat de webbrowser weet waar hij de afbeelding moet vinden om in de pagina te voegen. Het is dus belangrijk dat we bij het verplaatsen (bvb publicatie) van een webpagina steeds zowel de HTML-bestanden als de afbeeldingen verplaatsen.
HyperText Markup Language HTML is geen programmeertaal maar een opmaak taal. D.w.z. dat het een set codes bevat die een webbrowser vertellen hoe een pagina moet worden opgemaakt. Om een stuk tekst in het vet te zetten bijvoorbeeld gebruiken we deze code:
deze tekst is vet HTML code staat steeds tussen twee haakjes < en > en komt bijna altijd in een paar voor: de begin- en de sluit-tag.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 4/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Webeditors en WYSIWYG HTML-code kan men in principe met de hand schrijven. Elke tekstverwerker is daar bruikbaar voor. Webeditors kunnen echter helpen om sneller HTML-code te schrijven en met minder fouten. Veel gebruikt zijn WYSIWYG editors. Dat zijn programma’s die de eindgebruiker een zeer visuele opmaakmogelijkheid geven. Het programma schrijft zelf de nodige HTML-codes om de gewenste opmaak te bekomen. Enkele populaire WYSIWYG webeditors zijn Microsoft Frontpage, Macromedia Dreamweaver en Adobe Golive. Microsoft Frontpage is onderdeel van MS Office en sluit zeer nauw aan bij de andere Office programma’s. Wie met MS Word kan werken kan met Frontpage een eenvoudige website in elkaar zetten. Frontpage heeft een eenvoudige leercurve en is gericht op snel resultaat. http://www.microsoft.com/frontpage/ Macromedia Dreamweaver is een populair pakket bij professionele webbuilders. Het programma is zowel voor Windows als voor MacOS beschikbaar. Dreamweaver sluit nauwer aan bij grafische opmaak pakketten en heeft een veel moeilijkere leercurve. http://www.macromedia.com/software/dreamweaver/ Adobe Golive integreert perfect met de andere Adobe producten en is een geduchte concurrent van Dreamweaver. Het is eveneens een zeer professionele designomgeving. http://www.adobe.com/products/golive/main.html Webeditors schrijven HTML-bestanden (= HTML-code + tekst). Dit wil zeggen dan men nog steeds op een grafisch programma aangewezen is om de website van een grafische opmaak te voorzien.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 5/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Verschillen in weergave Een belangrijk gevolg van het gebruik van HTML-codes is dat een website er op elke computer iets anders uit kan zien. HTML-codes vertellen de webbrowser immers hoe het een en het ander op het scherm moet verschijnen. Maar het is uiteindelijk de computer van de bezoeker van de site die de HTML-codes correct moet lezen, interpreteren, en uitvoeren. Het weergave van een webpagina is afhankelijk van: • • • • •
Het platform van de bezoeker: Windows, Linux, MacOS De webbrowser: Internet Explorer, Netscape, Opera Het formaat van het scherm: 640x480, 800x600, ... De beschikbare technologieën: java, javascript, Flash, plug-ins Het aantal kleuren dat het scherm kan weergeven
Als webbuilder moeten we er steeds naar streven onze webpagina’s voor zo veel mogelijk internetgebruikers beschikbaar te maken ongeacht de computer die ze gebruiken. Daarom is het heel belangrijk om de site te testen op verschillende configuraties.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 6/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
CSS style sheets Inleiding Style sheets (CSS) is een extra set opmaakcodes die aan HTML worden toegevoegd om de webdesigner een betere controle te geven over de weergave van tekst(blokken) op de pagina.
Implementatie CSS codes kunnen op drie verschillende plaatsen in een website worden geïmplementeerd: • • •
In een apart .css document In de hoofding van de webpagina In een specifieke HTML-tag
In een apart .css document In dit geval wordt er een bestand aangemaakt dat meestal de naam style.css draagt. In dit document worden alle stylecodes geschreven. Via de HTML-tag is het dan mogelijk om dit style.css bestand aan een of meerdere HTML pagina’s te linken. De omschreven stijlen in het CSS document zijn nu beschikbaar in het HTML bestand. Het grote voordeel van deze aanpak is dat één set met stijldefinities de stijlen in verschillende webpagina’s, of zelfs de hele website, aanstuurt. Het is dus mogelijk om de stijl van de volledige website ingrijpend te veranderen door aanpassingen te maken in dit ene CSS bestand. Het is niet ondenkbaar dat we voor verschillende webbrowsers (Netscape, Internet Explorer, Opera), verschillende platformen (Windows, MacOS, Linux) en zelfs verschillende toestellen (PC, NetBox, WAP GSM, PDA ...) een verschillend CSS- bestand gaan gebruiken om op deze manier de weergave van de webpagina’s aan te passen aan de mogelijkheden van de client.
In de hoofding van de webpagina Wanneer de CSS stijlen alleen maar binnen één webpagina noodzakelijk zijn is het mogelijk om deze informatie in de tag van het HTML document te schrijven. De stijlen zijn dan binnen de volledige webpagina beschikbaar.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 7/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Voorbeeld: CSS tags in de tag van een HTML document:
Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> In een specifieke HTML-tag Tenslotte is het ook mogelijk om CSS tags toe te voegen aan één bepaalde HTMLtag binnen een webpagina. Alleen de tekst die tussen deze specifieke tag staat zal van de stijlen gebruik kunnen maken. Tussen deze drie implementatie-niveau’s is er een vastgelegde hiërarchie:
Style.css < style in < style in tag Toch is het niet wenselijk om stijlinformatie op verschillende niveau’s weg te schrijven binnen één website. De kans op conflicterende stijlinformatie wordt dan te groot. Kies liever meteen voor een style.css document waarin alle stijlinformatie wordt weggeschreven.
Twee soorten tags
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 8/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Er zijn twee manieren waarop we stijlinformatie aan een webpagina kunnen toevoegen: • •
Door het herdefiniëren van bestaande HTML-tags Door het aanmaken van nieuwe style-classes
Herdefiniëren van bestaande HTML-tags Traditionele HTML-tags zeggen vrij weinig over de manier waarop informatie op het scherm moet worden weergegeven. De tag
bijvoorbeeld zegt dat de inbegrepen tekst een Hoofding 1 is. Die is in principe groter dan een
of Hoofding 2. Hoe zo’n H1 tekst er precies moet uitzien, welk lettertype, vet of niet, welk formaat ... vertelt de HTML code niet. Het is de webbrowser op de client die dit zal bepalen. Het is dus niet ondenkbaar dan de ene webbrowser een H1 titel groter zal maken dan de andere. Door gebruik te maken van CSS codes kunnen we de weergave van deze H1-tag echter beter gaan controleren en de webbrowser opleggen hoe die exact moet worden weergegeven. Via CSS codes herdefiniëren we dus de bestaande HTML-tags zoals
door er een set van opmaakregels (font, size, color, weight, theocratieën, background ...) aan te koppelen. Wanneer we deze HTML tags nu binnen de webpagina gaan gebruiken worden ze exact weergegeven zoals opgegeven in de CSS codes. Wanneer we op deze manier de -tag gaan herdefinieren zal alle tekst binnen de webpagina op deze manier worden weergegeven. Tenzij een andere HTML of CSS tag dat anders vastlegt. Voorbeeld: herdefinitie van de bestaande
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 9/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Aanmaken van nieuwe style-classes Een tweede manier om CSS informatie aan tekstblokken toe te voegen is door zelf nieuwe CSS-tags of -classes aan te maken. We verzinnen daarvoor zelf een naam voor de tag (bvb “grotetitel”) en koppelen daaraan opnieuw een set van opmaakregels (font, size, color, weight, theocratieën, background ...). Belangrijk in de naamgeving van deze CSS classes is dat ze steeds moeten beginnen met een punt en geen spaties mogen bevatten. Zijn de classes beschikbaar binnen de webpagina (via een link naar het style.css document of de style codes in de -tag) dan kunnen we deze classes op een bestaande HTML tag gaan toepassen. Alle tekst binnen deze doel-tag zal de opmaak van de classe krijgen. Voorbeeld: een eigen style-classe:
.titelgroot { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #0033FF; } Meer informatie en links over CSS http://www.ideabox.be/webdesign/css.html
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 10/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Gebruik van lettertypes Er zijn verschillende zaken waarop u moet letten bij het gebruik van lettertypes op webpagina’s.
Beschikbare lettertypes Wanneer een webeditor een HTML-code schrijft voor het gebruik van een lettertype, wordt er enkel een referentie gelegd naar de naam van dat font. Dit wil zeggen dat een bezoeker van een website de tekst alleen maar in dat bewuste lettertype zal kunnen zien wanneer dat font ook effectief beschikbaar is op zijn computer. Wanneer u dus zeer exotische lettertypes gaat gebruiken op een webpagina, dan is het mogelijk dat die niet beschikbaar zijn op de computer van de bezoeker van uw website. Zijn webbrowser zal dan op zoek gaan naar een alternatief lettertype dat hij wel ter beschikking heeft om de tekst weer te geven. U kan deze gang van zaken beïnvloeden door zelf in de HTML code twee alternatieve lettertypes voor te stellen. Zie hoofdstuk CSS voor meer informatie.
tekst Letters in afbeeldingen Wenst u toch een speciaal lettertype te gebruiken, bijvoorbeeld voor titels, dan kan dat door woorden als afbeeldingen te maken in een grafisch programma. De tekst, in het door u gekozen lettertype, wordt dan omgezet in een afbeelding waardoor zij zoals gewenst op het scherm van de bezoeker verschijnt. Het nadeel van deze aanpak is dat het veel meer tijd vraagt om deze titels aan te maken of aanpassingen in de tekst te maken aangezien u elke keer een volledig nieuwe afbeelding moet aanmaken. Gebruik ook geen afbeeldingen voor te grote stukken tekst aangezien de site dan zeer traag wordt.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 11/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Letters in Flash Wanneer u over een database gestuurde website beschikt is het niet eenvoudig om dynamische tekst zomaar in een afbeelding te gieten in het gewenste formaat. Macromedia Flash kan hier een laatste uitweg bieden. Net als HTML gebruikt Flash immers de lettertypes die op de clientcomputer beschikbaar zijn om teksten in een bepaald font weer te geven. Flash beschikt echter over de capaciteit om een lettertype in de flash-file te embedden, waardoor het ook kan worden gebruikt wanneer het niet op de computer van de bezoeker van de website beschikbaar is. In combinatie met het feit dat er een mogelijkheid is om dynamisch tekst vanuit een database (via HTML, XML of LoadVars) door te geven aan de Flash-file, kan deze dynamische tekst toch worden getoond in het gewenste lettertype.
Leesbare lettertypes Net zoals bij de opmaak van teksten voor print is het niet wenselijk om meer dan 3 verschillende lettertypes te gebruiken op dezelfde pagina. Het is ook heel waarschijnlijk dat u hetzelfde font uniform over de hele site gaat gebruiken. Een CSS (style sheet) kan u daarbij helpen. Omdat een webpagina per definitie op het scherm wordt gelezen is het belangrijk om zeer duidelijke letters te gebruiken. Gebruikerstesten hebben uitgewezen dat de leesbaarheid van een lettertype een rechtstreekse invloed heeft op de snelheid waarmee iemand een tekst van het scherm kan lezen en de hoeveelheid die hij ervan zal onthouden. Verdana wordt steeds naar voren geschoven als het meest leesbare lettertype voor op het scherm. Arial is een goed alternatief.
Grootte van letters CSS (style sheets) laten de webdesigner toe het formaat van de letterts uit te drukken in pixels, punten of centimeters. Hou er rekening mee dat sommige computersystemen niet in staat zijn zeer kleine letters op een duidelijke manier op het scherm weer te geven. Over het algemeen zijn letters van een formaat 10 tot 12 punten voldoende leesbaar op elk scherm. Sommige websites bieden de bezoeker de mogelijkheid om zelf het formaat van de letters te kiezen. Ook in de instellingen van de webbrowser kan de gebruiker een standaard formaat voor de letters op alle pagina’s die hij bekijkt instellen. Hou daar rekening mee. Het is niet ondenkbaar dat de layout van een webpagina helemaal
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 12/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN onderuit gaat wanneer de bezoeker plots de webbrowser instelt op een letterformaat van 250%. Testen is de boodschap.
Printbare pagina’s Veel internetgebruikers hebben de gewoonte om webpagina’s met veel tekst af te drukken om ze zo rustig te kunnen lezen. Webbrowsers proberen dan op verschillende manieren de webpagina te herschikken zodat die op een A4 pagina past. Achtergrond afbeeldingen worden bij het afdrukken niet weergegeven en zeer brede tabellen worden danig herschreven. Druk de gemaakte pagina’s zelf eens af bij wijze van test. Steeds meer websites kiezen ervoor om een “printbare” versie van hun inhoud ter beschikking te stellen. Dezelfde tekst wordt dan op een sobere manier gepresenteerd zonder onnodige afbeeldingen of navigatiesysteem. Wanneer de inhoud van de website database gedreven is, is het een kleine moeite om een extra template te voorzien die de inhoud van de site in een sober “printable” formaat op het scherm geeft. Vergeet op deze pagina ook niet duidelijk eventuele copyright informatie en de URL van de website te vermelden. Eventueel kan naast of onder een artikel een icoontje van een printertje worden geplaatst waarachter een javascript zit dat de bewuste webpagina meteen afdrukt.
Portable Document Format Hoe dan ook is de webbuilder steeds gebonden aan een aantal onzekerheden (platform, schermformaat, beschikbare lettertypes, flash plugin ...) die een invloed hebben op de manier waarop zijn creatie op het scherm verschijnt. Voor grote brokken tekst die bedoeld zijn om te worden afgedrukt, kan worden uitgeweken naar het PDF-formaat van Adobe. Dit bekende bestandsformaat wordt wereldwijd gebruikt voor het verspreiden van digitale documenten. Heel wat DTP en tekstverwerkers zijn in staat teksten in dit formaat op te slaan. De voordelen van PDF: •
•
Acrobat Reader, het programma om PDF-bestanden te lezen, is gratis verkrijgbaar op de website van Adobe en reeds aanwezig op miljoenen internetcomputers. De Acrobat Reader is bovendien beschikbaar voor zowat elk denkbaar computerplatform.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 13/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN •
•
• •
Gebruikers van de website kunnen geen aanpassingen maken aan PDF documenten die ze downloaden. Iets wat wel mogelijk is met MS Word documenten. Indien gewenst kan de verspreider zelfs vermijden dat men teksten uit een PDF-bestand kan knippen en plakken in een ander programma. Het is mogelijk om PDF-documenten op basis van hun inhoud te doorzoeken. PDF-documenten worden exact zo weergegeven als ze door de designer in elkaar zijn gezet. Bovendien zijn ze zeer geschikt voor de printer. Zoals de designer het heeft gemaakt, zo komt het uit de printer van de client.
Wanneer er PDF-documenten op de website worden aangeboden is het interessant om een link naar de Adobe-site te voorzien waar men de PDF reader kan downloaden. Geef bij elke link naar een PDF-bestand ook aan dat het om een niet-HTML bestand gaat en zeg ook hoe groot het is. PDF bestanden met veel afbeeldingen kunnen zeer groot worden.
Meer informatie en links http://www.ideabox.be/webdesign/fonts.html
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 14/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Gebruik van afbeeldingen Digitaal formaat Er zijn verschillende formaten waarin een computer een grafisch beeld als een computerbestand kan opslaan. BMP, GIF, JPEG, EPS, PICT zijn maar enkele voorbeelden. Belangrijk is dat u op een website enkel de formaten GIF en JPEG kan gebruiken. Beide formaten hebben hun specifieke eigenschappen en toepassingen: Het GIF formaat: • Kan slechts 256 kleuren per afbeelding bevatten • Kan een transparante achtergrond hebben • Is ideaal voor kleine icoontjes • Is ideaal voor logo’s en andere afbeeldingen met weinig kleuren Het JPEG formaat: • Kan tot 16,7 miljoen kleuren bevatten • Kan geen transparante achtergrond hebben • Kan extra compressie gebruiken wat het bestand kleiner maakt maar de beeldkwaliteit aantast • Is ideaal voor grote afbeeldingen met veel kleuren • Wordt steeds gebruikt voor foto’s Afmetingen De afmeting van een afbeelding wordt bij websites uitgedrukt in “pixels”, niet in centimeters. Een gemiddeld computerscherm is 800 pixels breed en 600 pixels hoog. Zorg er dus voor dat uw afbeeldingen zeker niet groter zijn dan dat, omdat ze anders niet op één scherm passen en de gebruiker moet “scrollen” om de volledige afbeelding te kunnen zien. Meestal zal u afbeeldingen niet veel groter dan 250 tot 300 pixels willen maken. Let er bij het vergroten of verkleinen van afbeeldingen steeds op dat u de verhouding hoogte op breedte niet wijzigt, anders vervormt de afbeelding.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 15/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Afbeeldingen bewerken Om afbeeldingen of foto’s te bewerken (vergroten, verkleinen, stukken uit knippen ...) hebt u een apart grafisch programma nodig. Voor Windows raden we Paint Shop Pro aan. Gratis proefversie op http://www.jasc.com - $99 aankoop Voor Macintosh gebruikers is Graphic Converter een goede oplossing. Gratis proefversie op http://www.lemkesoft.de/us_index.html - $30 aankoop Beide programma’s zijn ook in staat om afbeeldingen in andere grafische formaten te openen en te converteren naar het GIF of JPEG formaat.
Vergroten en verkleinen van afbeeldingen Vaak zal u uw afbeeldingen moeten vergroten of verkleinen. Het is daarbij belangrijk dat u dat NIET doet in de Webeditor, maar dat u uw afbeelding eerst verkleint in een grafisch programma (Paint Shop pro, Graphic Converter, Photoshop ...), de verkleinde afbeelding opnieuw opslaat, en die aan uw webpagina toevoegt. U zal merken dat wanneer u afbeeldingen te veel vergroot, de individuele pixels zichtbaar worden en de afbeelding er “geblokt” gaat uitzien. Wanneer u afbeeldingen inscant, probeer ze dan meteen te scannen op het formaat dat u nodig hebt. Foto’s van een digitale camera zal u bijna altijd moeten verkleinen voor ze op de website kunnen. Indien u over een grote hoeveelheid afbeeldingen beschikt die allemaal verkleind moeten worden, beschikken zowel Paint Shop Pro als Graphic Converter over een “batch” functie om veel afbeeldingen in één klik om te zetten.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 16/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Beeldbanken en copyright U kan niet zomaar afbeeldingen van andere websites plukken en ze op uw eigen site gebruiken. Toch zijn er verschillende, al dan niet gratis, beeldbanken die u via het internet kan raadplegen om afbeeldingen te zoeken die bij uw website passen: http://www.gettyimages.com/ - foto’s, meestal te koop http://www.corbis.com/ - foto’s, maastal te koop http://www.animationfactory.com/ - animaties, gratis http://dir.yahoo.com/Business_and_Economy/Shopping_and_Services/Ph otography/Stock_Photography/Royalty_Free/ - links naar gratis foto’s http://gallery.yahoo.com/ - zoekmotor voor afbeeldingen http://dgl.microsoft.com/ - clip art en icoontjes van Microsoft http://www.barrysclipart.com/ - clip art en icoontjes http://www.imagestation.com/ - gedeelde beeldbanken van Sony Meer informatie en links http://www.ideabox.be/webdesign/afbeeldingen.html
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 17/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Beheer van domeinnamen Inleiding De domeinnaam is de unieke identificatie, zowel op technisch als op marketing vlak, van elke website. Een correcte registratie en een correct beheer van dit asset is dan ook van levensbelang voor het voortbestaan van de website. Structuur van een domeinnaam Het adres van een website bestaat uit 3 delen: • Het sub-domein, meestal www. • De domeinnaam, het gedeelte tussen de twee punten • Het top-level, het laatste gedeelte, .be bijvoorbeeld
Top-levels De organisatie ICANN is verantwoordelijk met het beheer van top-levels. Elk land beschikt over een top-level domeinnaam die bestaat uit de officiële ISO code van het land: BE voor België, NL voor Nederland, UK voor het Verenigd Koninkrijk ... Daarnaast werden er voor de VS verschillende andere top-levels gemaakt: • .COM voor commerciële bedrijven • .ORG voor non-profit organisaties • .NET voor netwerken • .GOV voor Amerikaanse overheidsdiensten Er bestaat ook een top-level .NATO en er is een top-level .EU in de maak voor bedrijven in de Europese Unie. In 2001 werden ook nog nieuwe top-levels, waaronder .NAME (voor particulieren), .BIZ (voor bedrijven), .SHOP (voor webwinkels), .INFO ... ,gemaakt die over de daarop volgende jaren beschikbaar worden/werden. In elk land is er een organisatie die een centraal register beheert van alle domeinnamen op basis van het top-level van dat land. In België was dat tot 2001 het departement computerwetenschappen van de KULeuven. Vandaag is dat de vzw DNS.be. Elke land stelt eigen regels op basis waarvan een organisatie een domeinnaam mag registreren. Er zijn aparte organisaties voor de registratie van .COM, .ORG, .NET en .BIZ. In principe kan iedereen een domeinnaam op basis van dit top-level registreren.
Domeinnaam
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 18/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Het middenste gedeelte van het adres van een website is de eigenlijke domeinnaam. Deze kan maximaal 64 karakters bevatten en mag niet bestaan uit vreemde tekens. Letters met leestekens (ë, è, à ...) zijn sinds enkele jaren wel mogelijk.
Subdomein Wanneer u eenmaal een registratie van een domeinnaam, bijvoorbeeld mijnbedrijf.be hebt gedaan bent u in principe onbeperkt in het aantal subdomeinamen dat u aanmaakt: • intranet.mijnbedrijf.be • klanten.mijnbedrijf.be • mail.mijnbedrijf.be • .... Elke subdomein kan staan voor een andere server waar andere informatie of diensten te vinden zijn.
Registratie van domeinnamen in België De registratieprocedure voor een domeinnaam is in elk land anders. Sinds 2001 is in België een systeem op basis van agenten van toepassing. Het beheer van de centrale database met domeinnamen berust bij de vzw DNS.be waarin verschillende belangrijke internetproviders vertegenwoordigd zijn. Als bedrijf of particulier kan u echter geen registratie doen rechtstreeks bij de vzw DNS.be. Daarvoor kunt u terecht bij een van de agenten. Zo’n 300 bedrijven (banken, IT firma’s en internetproviders) zijn agent van DNS en kunnen een domeinnaam registreren. Om agent te mogen zijn moeten ze een minimaal quotum per jaar halen. Sinds juni 2002 betaalt een agent 6€ per jaar per geregistreerde domeinnaam aan de vzw DNS.be. De agenten zijn vrij in het hanteren van prijzen naar de eindklant toe. De prijzen die agenten hanteren liggen tussen de 10€ en de 150€ per jaar per domein. De website Tarieven.be (http://www.tarieven.be) biedt vergelijkende tabellen aan. Sinds 2001 werden alle beperkingen op wie welke domeinnamen mag registreren opgeheven. Er werd wel een klachtenprocedure voorzien via dewelke men onrechtmatig geregistreerde domeinnamen kan terug eisen. Sinds oktober 2002 is het ook toegelaten om domeinnamen te verhandelen in België.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 19/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Registratie van niet Belgische domeinnamen Veel bedrijven bereiden hun internationale expansie voor door domeinnamen in andere landen te registreren. Sommige internationale agenten zoals Register.com (http://www.register.com) geven de mogelijkheid om tientallen domeinnamen in verschillende landen tegelijk te registreren. De prijzen variëren van land tot land.
Domain Name Servers Het systeem van domeinnamen (DNS) geeft webbrowsers de mogelijkheid om, wanneer de gebruiker een URL intikt, de juiste website te contacteren. Dit is een redelijk complex systeem. Alle internetproviders en veel grote bedrijven met een eigen internet infrastructuur beschikken over DNS-servers. Deze server zijn in staat een URL om te zetten in het overeenkomstige IP-adres. Elke computer (server of client) die op het internet is aangesloten wordt geïdentificeerd door zo’n IP adres (bijvoorbeeld 200.100.225.99). Op basis van dit adres is het mogelijk informatie (e-mails, webpagina’s, bestanden ...) van de ene internetcomputer naar de andere te sturen. Wanneer een gebruiker een URL in de webbrowser ingeeft zal deze de DNS server van de internetprovider contacteren om het overeenkomstige IP-adres te vinden. Men spreekt van “lookup”. Met een speciaal programma is het ook mogelijk om een “reverse lookup” te doen waarbij men de domeinnaam krijgt die bij een IPadres hoort. Met dit IP-adres kan de webbrowser de juiste server contacteren. Het is echter vaak zo dat er meerdere websites op één server staan. Daarom zal de server ook over een lijst beschikken van alle domains van de sites die op zijn harde schijf staan. Wanneer een client een bepaalde URL opvraagt weet de server dus in welke directory hij de bestanden van deze site moet gaan zoeken. DNS servers copieëren dagelijks hun data naar elkaar. Om een nieuwe domeinnaam in de servers te krijgen heeft men een “authorative domeinserver” nodig. Dat is één server die het centrale beheer van uw naam op zich neemt. Alleen deze server, meestal van uw internet provider of uw DNS-agent, kan de instellingen van uw domeinnaam wijzigen. De andere DNS-servers kunnen alleen maar deze gegevens overnemen. In het centrale register van vzw DNS.be wordt bij de registratie van uw domeinnaam de adressen van de authoritive nameservers opgenomen. Op deze servers wordt ingesteld op welk IP-adres uw website te vineden is. Op de server met dat IP-adres staat in welke directory de bestanden van uw site staan.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 20/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Meer informatie http://www.dns.be http://www.tarieven.be http://www.register.com http://www.domeindokter.be http://www.iana.org/cctld/cctld-whois.htm http://news.yahoo.com/fc?tmpl=fc&cid=34&in=tech&cat=domain_names_and_re gistration
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 21/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Usability: richtlijnen voor een bruikbaardere website Inleiding Usability is de studie van de bruikbaarheid. Niet alleen websites maar ook software, en alle mogelijk andere instrumenten die op een of andere manier met de mens in interactie treden, kunnen op hun bruikbaarheid worden getest. Gebruikerstesten zijn vaak de enige echte objectieve manier om de bruikbaarheid van een website te meten en te verbeteren. Op basis van gebruikerstesten werden een aantal algemene regels opgesteld die door steeds meer webdesigners worden gevolgd. Over de geldigheid van sommige regels valt zeker te discussiëren. Een veel gehoorde opmerking is dat usability weinig ruimte laat voor creatief design van de webdesigner uit. De bedoeling is uiteraard om een goede middenweg te vinden tussen een grafisch aantrekkelijke en creatieve maar toch duidelijke en bruikbare website.
Uniforme vormgeving Een uniforme vormgeving is zowat het belangrijkste item dat een set webpagina’s bindt tot één website. Door het hanteren van een eenduidige huisstijl wordt een website herkenbaar voor gebruikers. Daarnaast zorgt een eenvormige structuur ervoor dat de gebruiker deze structuur gewoon zal worden en er steeds beter zal mee leren werken. Webdesigners stuiten op veel tegenstand van gebruikers wanneer ze een website van een nieuwe “look” voorzien. Over het algemeen zien we dan dat de gebruikers de eerste dagen beduidend meer tijd nodige hebben om de juiste zaken te vinden op de aangepaste website.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 22/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Vaste paginastructuur Steeds vaker hanteren websites een min of meer vaste paginastructuur die over verschillende websites heen terug komt:
• • • • •
Logo: links bovenaan, is link naar de homepage Zoekfunctie: rechts bovenaan, één veld met de toets “zoek” er achter Toolbar met links naar help en contactpagina: onder of boven de zoekfunctie Hoofdnavigatie: links Contextuele navigatie die afhangt van de inhoud van de pagina: rechts
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 23/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Navigatie De navigatie is het belangrijkste instrument waarmee de gebruiker zich door de website beweegt. Duidelijkheid, eenduidigheid, uniformiteit en bruikbaarheid staan hier dus centraal. Een navigatie staat steeds op dezelfde plaats op de pagina. Alle onderdelen staan samen. Ideaal bestaat ze uit niet meer dan 7 tot 10 rubrieken. Alle rubrieken zijn zichtbaar. Openklappende menu’s vormen een enorme drempel voor gebruikers. Bovendien zijn dan niet alle items zichtbaar. De items bestaan uit duidelijke termen. Marketing termen of termen die bedoeld zijn om de gebruiker te “teasen” zijn uit den boze. De gebruiker moet meteen zien wat er zich onder het item zou bevinden.
Tekst Tekst wordt ideaal weergegeven in een donkere kleur op een witte of lichte achtergrond. Links, en alleen links, zijn onderlijnd zodat ze herkenbaar zijn. Verdana, 10 punten is het beste lettertype voor gebruik op een scherm. Arial, 12 punten is een goed alternatief.
Taalkeuze In België verwachten gebruikers zich bij het binnen komen van een website aan een taalkeuzescherm. Dit scherm bevat een logo, een tagline en de keuze van de talen. Elke taal wordt weergegeven in die taal (“Nederlands”, “Français”, “English”). Vlagjes worden beter niet gebruikt. De taalkeuze kan worden opgeslagen in een cookie zodat een bezoeker bij een tweede bezoek meteen op de juiste taalversie terecht komt. In dat geval moet elke andere pagina wel opnieuw een taalkeuze bevatten. Gepositioneerd onder het logo, op basis van de ISO codes van de talen: NL, EN, DE, FR ...
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 24/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Informatiestructuur De informatiestructuur van de website geeft een platte grond van de beschikbare informatie weer. Het is belangrijk dat deze structuur vraaggericht is en geen reflectie is van hoe de organisatie achter de website zichzelf ziet. Een typisch voorbeeld zijn de websites van steden en gemeenten.
Niet vraag gericht • • • • • • • • •
Woordje van de burgemeester Schepencollege Gemeenteraad Burgerlijke stand Dienst leefmilieu Sportdienst Jeugddienst Dienst stedenbouw Secretariaat
Vraag gericht • • • • • • •
Informatie voor nieuwe inwoners Verkeer en mobiliteit Cultuur en ontspanning Werken en studeren Jeugd Toerisme Beleid en politiek
Eventueel kan het vraagpatroon van de gebruikers uit gebruikerstesten, enquêtes en/of analyse van de populaire pagina’s op de website, worden afgeleid. De informatie structuur wordt zichtbaar gemaakt via: • De navigatie • Een sitemap • Een “pad in de site” of broodkruimels (“home > hoofdcat. > subcat > pagina”)
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 25/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Mythe 1: gebruikers scrollen niet graag Het is een veel gehanteerd argument dat webpagina’s slechts één scherm lang mogen zijn omdat gebruikers niet graag zouden scrollen. Dat is niet waar. Een pagina kan 3 tot 6 schermen lang zijn. Horizontaal scrollen is niet gebruikelijk. Het is echter wel belangrijk dat men op het eerste scherm (“above the fold”) duidelijk maakt dat er iets meer te zien is lager op de pagina. Dit kan bvb door een kader of foto zo te plaatsen dat die de “fold” net kruist.
Mythe 2: elke pagina moet binnen 2 clicks bereikbaar zijn Op basis van dit argument werden onmogelijk grote en complexe navigatiesystemen ontwikkeld die veel te veel keuzes en opties presenteren aan de gebruiker. De internetgebruiker heeft er niets op tegen om een paar keer te klikken voor hij zijn doel bereikt. Het is echter wel belangrijk dat hij bij elke klik het gevoel heeft dat hij een stap dichter bij dat doel is gekomen.
Taalgebruik Correct taalgebruik is uiteraard een vereiste. Een webpagina kan iets informeler dan een brief maar het is geen aanleiding om een turbotaaltje te gaan gebruiken. Let er ook op dat bij een meertalige website alle onderdelen vertaald worden. Typisch vergeet men bij het vertalen van een webpagina TITLEtags, of bijschriften van afbeeldingen. Ook de feedbackpagina die men te zien krijgt na bvb het versturen van een contactformulier moet in de juiste taal worden weergegeven.
Testen De enige manier om usability problemen te identificeren binnen een website is testen, testen en nog eens testen. Geef een gebruiker de opdracht iets te zoeken op de website en observeer hoe dat gebeurt en waar het fout gaat. Meer informatie en links http://www.ideabox.be/webdesign/accessibility.html
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 26/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Webhosting Het kiezen van een goede oplossing voor het hosten van een website maakt deel uit van de creatie van een succesvolle internetaanwezigheid. Er zijn verschillende oplossingen op de markt beschikbaar en er zijn heel wat zaken die in overweging moeten worden genomen bij het kiezen van een leverancier van webhosting diensten. Verschillende oplossingen. De verschillende op de markt aangeboden oplossingen vallen uit elkaar in een aantal belangrijke categorieën: • • • •
Shared hosting (gedeelde hosting) Virtual private server (eigen virtuele server) Dedicated hosting (eigen server) Housing of co-location (onderbrengen)
Shared hosting Via deze oplossing delen verschillende websites eenzelfde webserver. Ze krijgen elk een eigen deeltje van de harde schijf toegewezen waarbinnen de verschillende bestanden worden opgeslagen. Via een systeem van virtual servers is de webserver in staat om een bezoeker de juiste webpagina’s voor te schotelen. Het grootste voordeel van shared hosting is de prijs. Verschillende klanten dekken immers de kost van de webserver en de connectie naar het internet. Het nadeel is dat het aantal aangeboden opties zoals databases, scripttalen, beveiligde omgeving voor de verwerking van credit card nummers vaak beperkt zijn. Shared hosting is ideaal voor kleinere websites die vooral uit statische HTML pagina’s bestaan. De meeste websites worden onder deze formule op het web gezet. De prijzen voor sharded hosting schommelen in Europa rond 20€ per maand afhankelijk van de exacte specificaties (e-mail, andere extra’s, aantal MB, trafiek ...)
Virtual private server Ook met deze formule worden verschillende klanten op een machine samen gebracht. Ze hebben echter toegang tot een soort van webbased control panel dat hen toelaat hun deel van de webserver in hoge mate zelf te configureren. Denken we bijvoorbeeld aan het activeren van Frontpage-extensies, het aanmaken van e-mail boxen of het raadplegen van serverstatistieken.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 27/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Virtual private server is een ideale oplossing voor kleinere websites met specifieke eisen. Ook meer technisch aangelegde webbuilders kunnen op deze manier meer controle uitoefenen op de omgeving waarin hun website terecht komt.
Dedicated hosting Bij dedicated hosting huurt de klant een webserver van het hosting bedrijf. Deze server staat exclusief ter beschikking van de klant. Het hosting bedrijf zorgt, afhankelijk van het contract, voor een minimale of uitgebreide support op het vlak van hardware, besturingssysteem en/of software. Het hosting bedrijf zal vaak een beperkt aantal eigen configuraties voor dedicated hosting voorstellen waaruit de klant dan kan kiezen. Daarna heeft de klant volledige controle over deze machine voor installatie van extra software (bvb databases of scripttalen) en een of meerdere websites. Via een remote oplossing (bvb Terminal Services in het geval van een dedicated Windows 2000 Server) heeft de klant toegang tot zijn machine voor beheer. Een degelijke kennis van serverbeheer is vereist om voor deze oplossing te kiezen. Het grootste voordeel van dedicated hosting is dat de klant een volledige machine voor eigen gebuikt heeft. Hij heeft dan ook de mogelijkheid om, via virtual servers, meerdere websites van op deze machine te bedienen. Ook het aanbieden van e-mail en andere diensten is, mits installatie van de juiste software, mogelijk. Dedicated hosting wordt vaak gekozen voor websites met zeer veel bezoekers en of zeer specifieke eisen. Professionele webbuilders hebben vaak een eigen dedicated server waarop ze de websites van verschillende klanten kwijt kunnen. Het is mogelijk om meer dan 200 websites op een dedicated server te zetten. Afhankelijk van het gekozen platform en het dataverkeer op de webserver beginnen de prijzen voor dedicated hosting rond 100€ per maand.
Co-location of housing Via deze oplossing voorziet de klant zijn eigen hardware die in het datacenter van de hosting provider wordt geplaatste. De provider voorziet alleen maar stroom en netwerkconnectie. De klant staat volledig in voor beheer van de hardware, besturingssysteem en software. In veel gevallen kan een apart support contract worden afgesloten bvb voor het herstarten van de server na een fatale crash. Co-location is interessant wanneer u over eigen serverhardware beschikt en u zelf de volledige controle en verantwoordelijkheid wilt dragen.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 28/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Verschillende platformen
In combinatie met een hostingplan dient vaak ook een platform te worden gekozen. Niet alle providers bieden alle platformen aan. De belangrijkste mogelijkheden zijn: • •
Windows Linux/unix
Windows servers staan over het algemeen bekend voor: • • •
Eenvoudig beheer Duurder wegens zware licentiekosten Meer beheerstaken voor updating en patching
Linux servers worden over het algemeen gezien als: • • •
Iets moeilijker in beheer wegens het gebrek aan een grafische interface Lichter voor de hardware en minder duur wegens een gratis of goedkoop besturingssysteem Minder last van beveiligingsproblemen
Een goedkoop platform dat recent opgang kent onder kleine webbuilders is de Cobalt Raq. Dit kleine toestel bevat een aangepaste versie van Linux en is volledig afgesteld op eenvoudige webhosting. De administratie gebeurt via een webbased interface die toegankelijk is via een webbrowser.
Factoren die de keuze beïnvloeden Er zijn verschillende factoren die de keuze van een hosting provider beïnvloeden: • • • • • • • •
Platform Netwerk connectie Extra diensten en uitbreidingen Support en SLA Dataverkeer Betrouwbaarheid Fysieke locatie Prijs
Platform Voor shared hosting paketten kan u niet altijd het platform kiezen. Is dat wel het geval dan hangt dat vaak nauw samen met de extra opties die op elk platform worden aangeboden zoals PHP op Linux of ASP op Windows. Voor dedicated hosting hangt het platform vaak af van uw eigen technische kennis en de omgeving waarbinnen uw websites zelf werden ontwikkelt. Gaat u voornamelijk statische websites voor kleine klanten hosten dan is een Cobalt Raq het overwegen waard.
Netwerk connectie
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 29/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Elke hosting provider is op een of meerdere manieren verbonden met het web. Hoe sneller de connectie van de provider hoe sneller uw eigen website toegankelijk zal zijn. Er zijn verschillende tools om de snelheid van het netwerk te testen. Gebruik daarvoor de eigen website van het hosting bedrijf en test op verschillende uren en dagen.
Extra diensten en uitbreidingen Vooral bij shared hosting bent u gebonden aan de extra’s die het hostingbedrijf wil aanbieden: e-mail boxen, databases, scripttalen. Ook wanneer u deze zaken niet op korte termijn nodig heeft kan het nuttig zijn de upgrade mogelijkheden en bijhorende prijzen te zoeken. Als dedicated hostingklant zijn extra’s zoals een firewall of een dagelijkse backup van alle bestanden op uw webserver naar een andere machine interessante opties die u onmiddellijk of later nodig kan hebben.
Support en SLA Als uw website een kritisch onderdeel van uw onderneming is, is een degelijke support belangrijk. Vaak hebt u de mogelijkheid om naast de standaard support (bvb het herstarten van de webserver na een crash) extra support aan te kopen voor het besturingssysteem, applicaties of andere technische problemen. De snelheid waarmee men uw probleem kan oplossen is uiteraard van levensbelang. Vaak worden voorwaarden in een Service Level Agreement gegoten. Daarin verbindt de hosting partner zich ertoe de website bvb 99,8% van de tijd in de lucht te houden. Deze SLA’s worden belangrijker naarmate uw webapplicatie kritischer wordt.
Dataverkeer De belangrijkste kost van een hostingprovider is zijn dataverkeer. Dat is het aantal Gb gegevens dat bezoekers van uw website opvragen en dat dus via het netwerk van de hostingprovider wordt verzonden. De provider zal immers zijn netwerkleveranciers moeten betalen op basis van het aantal Gb verkeer dat wordt doorgegeven. In een standaard contract voor zowel shared als dedicated hosting wordt vaak een aantal Gb dataverkeer per maand voorzien. Wanneer uw website veel bezoekers trekt of grote downloads aanbiedt, kan u dataverkeer bijkopen of upgraden naar een duurder hostingplan. Het moeilijke is dat u bij het lanceren van een nieuwe website vaak niet weet hoeveel data u zal versluizen en dus hoe hoog uw hostingfactuur exact zal zijn. Kies daarom voor een flexiebel plan waar u eenvoudig kan upgraden. Meestal voorziet de hostingpartner een systeem waarlangs u het gebruikte dataverkeer continu in het oog kan houden. Grijp op tijd in wanneer het verkeer te sterk stijgt.
Betrouwbaarheid In de relatief jonge internetsector is het belangrijk om een betrouwbare hosting partner te vinden die veel klanten heeft en waarvan u zeker bent dat hij nog een
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 30/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN tijdje zal bestaan. U wilt immers niet terecht komen in een situatie waar het hosting bedrijf van de ene dag op de andere verdwijnt en zijn servers worden afgesloten. Voorzie eventueel een backup oplossing waarmee u uw website snel opnieuw in de lucht kan brengen.
Fysieke locatie Gezien het wereldwijde karakter van het internet is de fysieke locatie van uw webserver minder belangrijk. Het is mogelijk dat uw website op een server in de US even snel, zo niet sneller, bereikbaar is dan in een Belgisch datacenter. Wenst u een nauw contact met het hosting bedrijf dan is het echter geen slecht idee om voor een Belgische of Europese oplossing te kiezen.
Prijs Prijs is een niet onbelangrijk deel van het verhaal. Webbuilders, die zelf vaak slechts reseller zijn van een ander hosting bedrijf, zijn vaak een dure oplossing. Niet oninteressant om te weten is dat de hosting prijzen in de UK en de US over het algemeen lager liggen dan in België. Laat kwaliteit en betrouwbaarheid echter steeds primeren in deze zeer competitieve sector.
Zelf reseller worden
Gaat u websites voor klanten bouwen, dan is het interessant om ze ook de hosting van de website aan te bieden. Uw kant hoeft dan niet opzoek naar een tweede leverancier. Bovendien creëert u terugkerende inkomsten en kan u een betere controle behouden over de klant. U hoeft hiervoor echter geen eigen webhosting infrastructuur op te zetten. Veel hostingbedrijven bieden een reseller-programma aan waarbij u hun hosting pakketten aan uw eigen klanten kan doorverkopen. Voel u daarbij vrij in de prijssetting. Trekt u op deze manier meerdere klanten aan en bent u technisch aangelegd, dan kan u opteren voor het huren van een dedicated server waarop u dan al uw klanten een plaatsje geeft. Denk er dan wel aan dat u nu zelf verantwoordelijk bent voor het in de lucht houden van de websites.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 31/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN Meer informatie
http://www.rackspace.com - hosting provider in US en UK die o.a. dedicated servers onder het Linux en Windows platform aanbieden. Beschikt eveneens over een reseller-programma. http://www.hostbasket.com - Belgische hosting provider die zowel shared als dedicated oplossingen voorziet onder Windows en Linux. Beschikt eveneens over een reseller-programma. http://www.nomonthlyfees.com - US provider die enkel virtual private server oplossingen heeft onder Linux. Beschikt eveneens over een reseller-programma. http://servers.yahoo.com - Yahoo biedt hostingoplossingen aan op basis van Cobalt Raq. http://www.hostsearch.com - Hostsearch geeft toegang tot een database met technische informatie en prijzen van verschillende hosting providers. http://www.epinions.com/inet-Web_Hosting-All - reviews en ratings van webhosting providers.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 32/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Technologieën om in het oog te houden Inleiding Er worden continu nieuwe technologieën ontwikkeld die de webdesigner kunnen helpen bij het ontwikkelen van webapplicaties. Enkele belangrijke trends:
XML eXtensible Markup Language is een flexiebel formaat om data op een gestructureerde manier op te slaan en/of door te sturen. Een XML document bestaat uit een set van op voorhand vastgelegde tags die de inbegrepen data definieren. Voorbeeld:
<xml> <cursussen plaast=”syntra-leuven”> <cursus>Dreamweaver <cursus>Frontpage <cursus>Flash XML schema’s worden op verschillende plaatsen ontwikkeld om informatie tussen verschillende internetgeconnecteerde computers uit te wisselen. Zie verder WebDAV, RSS en Web services.
WebDAV WebDAV is een protocol op basis van HTTP en XML dat gebruiker toe laat om bestanden op een gemeenschappelijke schijf te delen via HTTP. Het protocol omvat o.a. de nodige mogelijkheden voor versioning en locking zodat twee gebruikers niet op hetzelfde moment hetzelfde document kunnen openen. WebDAV wordt ondersteund door de meeste recente besturingssystemen: WebFolders in Windows 2000, iDisk in MacOS X. Ook Dreamweaver kan gebruik maken van WebDAV om een website remote te beheren met verschillende gebruikers van op verschillende locaties.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 33/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN RSS RSS is een XML formaat dat zowat de standaard aan het worden is voor het verspreiden van nieuwsberichten en headlines via het web. Steeds meer nieuwssites en weblogs bieden hun headlines in dit formaat aan. RSS kan niet alleen gelezen worden door nieuwe webapplicaties die de headlines willen gebruiken. Er zijn ook een aantal desktop programma’s op de markt die de gebruiker toelaten om verschillende RSS feeds te verzamelen en zo een persoonlijk nieuwsoverzicht op te stellen.
Web services Bij de ontwikkeling van software wordt vaak gebruik gemaakt van componenten. Dit zijn vaste stukken code die een bepaalde functie uitvoeren: bijvoorbeeld het opbouwen van een user interface, het encrypteren van een stuk tekst of het valideren van een paswoord. Ontwikkelaars kunnen hun nieuwe programma’s dan laten gebruik maken van deze bestaande componenten zodat ze de code voor deze functies niet meer opnieuw moeten schrijven. De zelfde gedachtegang ligt aan de basis van web services. Het gaat hier echter niet alleen over het uitbesteden van functies aan een ander stuk code maar ook diensten: het opzoeken van een telefoonnummer, het uitvoeren van een zoekopdracht op internet, het verzenden van een sms bericht, het valideren van een credit card nummer, het opzoeken van een postcode van een gemeente. Een tweede belangrijke verschil is dat een webapplicatie een web service kan aanspreken over HTTP van op een andere server. Applicatie en web service hoeven met andere woorden niet eens op dezelfde server te staan of binnen hetzelfde netwerk te liggen. Web services maken gebruik van HTTP en XML om informatie met elkaar uit te wisselen. Dat doen ze via het SOAP protocol. De voordelen van web services zijn legio: • • •
Iedereen concentreert zich op zijn core business Snellere ontwikkeling van webapplicaties De “component” moet maar op één server worden onderhouden
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 34/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN XHTML XHTML is de nieuwe generatie HTML codes die de komende jaren waarschijnlijk een sterke opgang zullen maken. XHTML is volledig compatibel met het XML formaat. Zo hebben alle tags, ook , en
een afsluit tag. XHTML maakt ook in grote mate gebruik van CSS codes om de weergave van de inhoud van de HTML pagina’s vast te leggen. XHTML in de HTML pagina’s beperkt zich dan opnieuw tot het vastleggen van de structuur van de informatie. Dreamweaver is in staat om XHTML compatibele code te schrijven.
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 35/36
CURSUS MACROMEDIA DREAMWEAVER HTTP://WWW.IDEABOX.BE/WEBDESIGN
Updates, aanvullingen en aanpassingen Updates, aanvullingen en aanpassingen op deze cursus worden beschikbaar gesteld op dit adres: http://www.ideabox.be/webdesign
Cursus Dreamweaver – www.ideabox.be/webdesign – pagina 36/36