Maat: px
Weergave met pagina beginnen:

Download "http://www.ardeco.be/cursus/materiaal/webdesign/dynamisc..."

Transcriptie

1 Kris Merckx voor en Voor meer info over software: COMPUTERKIT Algemene inleiding + 1. Internetprotocollen + 2. Websites, FTP en Browsers + 3. Websites en HTTP + 4. HTML-editors en WYSIWYG-HTML-editoren + 5. DYNAMISCHE WEBSITES + 6. Content Management + Hypertext transfer protocol (in depth...) + 1. Internetprotocollen en het wereldwijde web + 2. Hypertext Transfer Protocol + 1. Standaardprotocol + 2. MIME voor het verzenden van multimedia via het web + 3. HTTP is statusloos + 4. HTTP-methodes + 5. Samenstelling van een URL + HTML, statische pagina's + 1. HTML-tags + 2. Metagegevens + 1. headsectie en Dublin Core + 2. Zoekrobots zijn niet te misleiden + 3. robots.txt + 4. Problemen met framespagina's + 5. Brugpagina's (doorways) + 6. Code swapping + 7. Cloaking + 8. de KEI-index + Interactie in statische pagina's + 1. Scripttalen en programmeertalen + 1. Het einde van HTML + 2. Compileren of interpreteren + 3. Volg de spelling- en de spraakkunstregels Javascript of Java? + 1. Het verschil tussen JavaScript en Java + 2. Java is straffe koffie Wat is JavaScript? + 3. Flash en Director + Vorm en inhoud scheiden + 1. Klassieke opmaak + 2. Cascading Style Sheets + 3. XML: Extended Markup Language + 1. XHTML + 2. Formuleer uw eigen tags + 3. Kenmerken van XML + 4. XML in samenwerking + 1. XML, CSS en XSL + 2. XML en Javascript + 3. XML en Flash + 4. SMIL + 5. MathML + 6. Scalable Vector Graphics + Dynamic HTML en DOM + 1. Wat is DHTML? + 2. Browsers en DHTML + 3. Document Object Model + 1 van :21

2 7. 8. Dynamische pagina's + 1. Wat zijn dynamische webpagina's? + 2. Toepassingen + 3. Hoe beginnen we eraan? + 1. Technieken + 2. Informatie uitwisselen tussen pagina's + 3. Informatie uitwisselen met GET en POST + 4. Gegevens bewaren met sessies en cookies + 5. Wachtwoordbeveiliging + 4. Gegevensverwerking + 1. Databanken + Databanktypes + Structuren + Opslag van gegevens in een databank + Voorbeelden + 2. Content Management Systemen + Gegevens tonen + Gegevens toevoegen + Mappen en bestanden maken + Gebruikersbeheer + WYSIWYG-editors + Gegevens aanpassen + Gegevens verwijderen + 3. Bestanden lezen + 4. Een online bestandenverkenner + Interessante boeken en software + 1. Algemene inleiding ^ 1.1 Internetprotocollen^ Het internet ondersteunt meerdere protocollen voor gegevensoverdracht. Het Transfer Protocol (FTP) voorziet in een constante verbinding. Die verbinding wordt beëindigd als er zich een fout voordoet bij de transfer, als er een time-out optreedt op de server of als de gebruiker de verbinding verbreekt. Men noemt dit een state-maintaining-verbinding. Het http-protocol dat door webbrowsers wordt gebruikt is stateless. Als u in de adresbalk van uw browser een URL van een website opgeeft, stuurt de browser een aanvraag naar de server. Als de browser de opgehaalde bestanden (HTML-pagina s, foto s, swf-bestanden, Java-applets) ontvangen heeft, verbreekt de server de verbinding. Telkenmale de surfer op een hyperlink naar een nieuw bestand klikt, wordt er opnieuw een verbinding aangemaakt. 1.2 Websites, FTP en Browsers ^ Webontwikkelaars gebruiken FTP-programma s voor het doorsturen van bestanden naar hun webruimte op een webserver. Via een gebruikersnaam en wachtwoord krijgen ze toegang tot de bestanden op de server. Zo n programma toont een lijst van de bestanden op de server en een lijst met de lokale bestanden. Via eenvoudige drag and drop -mogelijkheden kan je bestanden tussen beide verplaatsen. Men spreekt van uploaden bij het doorsturen van bestanden naar de server en van downloaden in het geval van het binnenhalen van bestanden naar de clientcomputer. voorbeeld van een FTP-programma: smartftp, WSftp, Filezilla (een opensourceprogramma) Naast http is bij de gewone internetgebruiker vooral het SMTP - of simple mail transfer protocol in gebruik 2 van :21

3 Browsers Internet Explorer is momenteel de meest gebruikte browser doordat hij is ingebakken in het Windowsbesturingssysteem. Jarenlang deed Internet Explorer een nek-aan-nekrace met Netscape, maar die strijd is in het nadeel van die laatste beslecht. Mozilla is de opensource-variant van Netscape. Daarnaast wint ook Opera aan belang. Op KDE-Linuxdesktops zwaait Konqueror de plak. Apple bracht recentelijk de browser Safari op de markt, gebaseerd op de Konquerorbroncode. Minder bekend: de tekstgebaseerde browser Lynx, Omniweb 1.3 Websites en HTTP ^ Het meest gebruikte internetprotocol is momenteel zonder twijfel het HyperText Transfer Protocol, kortweg HTTP. Browsers zoals Netscape, Konqueror of Internet Explorer maken gebruik van het HTTP-protocol. Dit is de manier waarop jan en alleman het internet ook kent: het bezoeken van websites via browsers. Webpagina s zijn opgemaakt in HTML hetzij hypertext markup language, een basisopmaaktaal die enkel beschrijft hoe een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden niet in het bestand opgenomen, maar gelinkt. De term hypertext verwijst naar de mogelijkheid om hyperlinks op te nemen waardoor de HTML een soort van metataal wordt met verwijzingen naar andere teksten of bronnen. 1.4 HTML-editors en WYSIWYG-HTML-editoren. ^ Voor het ontwerpen van HTML-pagina s kan je gebruik maken van een standaard teksteditor zoals Windows Notepad. HTML-pagina s bevatten platte ASCII- of UNICODE-tekst. M.a.w. als je HTML-codes intikt in een tekstverwerker zoals Wordpad, MS Word of Corel WordPerfect, dan zal die naast HTML ook RichText-opmaakcodes wegschrijven. Daarom zijn de meeste moderne tekstverwerkers ook voorzien van een mogelijkheid om opgemaakte tekstdocumenten te converteren naar HTML. ASP is de servertoepas sing van de Active Desktop, waardoor server en client tot een dynamisch geheel moesten verweven worden door ActiveX-toepassingen. De meeste webdesigners maken echter gebruik van een WYSIWYG-editor zoals Macromedia Dreamweaver of Adobe Golive waarin ze naast een codevenster voor het ingeven van HTML, Javascript, Vbscript ook beschikken over een WYSIWYG-venster (What you see is what you get) waarin ze hun pagina s net zoals in een tekstverwerker kunnen samenstellen. In het oog houden: NVU (een opensource afgeleide van Netscape Composer) HTML-editors: FirstPage 2000 met een uitgebreide set Javascripts en DHTML-templates 1.5 DYNAMISCHE WEBSITES ^ Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen, aan te passen en/of te verwijderen. Daarom is zeer snel de nood ontstaan om websites te kunnen koppelen aan databanken. HTML voorziet echter niet in die mogelijkheid. Daarom zijn er doorheen de jaren zowel commerciële als gratis toepassingen ontwikkeld voor databankgestuurde websites. Meest gebruikt is zonder twijfel PHP in een combinatie met een Linux- of UNIX-server en een MySQLdatabank. Grotere toepassingen maken gebruik van een Oracle-databank en of CGI-toepassingen geschreven in C of Perl. Ook Microsoft kon niet te na blijven en ontwikkelde met die doeleinden voor ogen ASP oftewel Active Server Pages. 1.6 Content Management ^ Tal van PHP- en ASP-sites beschikken over een systeem van content management (CMS). De 3 van :21

4 mogelijkheid tot het online wijzigen, invoeren en verwijderen van gegevens op de website biedt immers heel wat voordelen. Daar de klant zijn eigen site op vrij eenvoudige wijze kan beheren, bespaart dit niet alleen tijd, maar op langere termijn ook geld. Bovendien krijgt de webontwikkelaar meer ademruimte om te werken aan nieuwe projecten én een werkend content managementsysteem kan heel snel geïmplementeerd worden op een andere site. 2. Hypertext Transfer Protocol (in depth...) ^ 2.1 Internetprotocollen en het wereldwijde web ^ In de inleiding hebben we het al kort over HTTP gehad. In dit hoofdstuk zullen we het wat verder uitdiepen. Protocollen zijn regels die een standaard vormen voor de communicatie tussen computers. HTTP is het protocol voor gegevenstransport over het world wide web. Servers en browsers gebruiken http om hypermedia (webdocumenten) te vervoeren via internet. In feite zijn het de HTTP-servers en clientbrowsers die het world wide web vormen. We moeten dan ook goed opletten welke terminologie we gebruiken. Het WWW is een onderdeel van het internet maar niet het internet zelf. Het WWW werd begin jaren '90 ontwikkeld door Tim Berners Lee en Robert Caillou. Zij zijn de grondleggers van de meest populaire computertoepassing tot nog toe: het web. Bedoeling was een vlotte gegevensuitwisseling tussen diverse systemen, platformen en computers op het internet mogelijk te maken. Onder internet verstaan we aldus de wereldwijde verzameling van servers en clients die via netwerken tot een reusachtig grid zijn verbonden. Op het internet zijn diverse protocollen gangbaar: Protocol poortnummer hypertext transfer protocol (http) 80 file transfer protocol (ftp) 21 simple mail transfer protocol (smtp) 25 trivial file transfer protocol (tftp) 69 gopher protocol 70 telnet protocol 23 finger protocol 79 Daarnaast kennen we nog: peer to peer IRC enz. De basis van dit alles wordt gevormd door TCP/IP (transfer control protocol en internet protocol). OPMERKING Wie beweert dat Linux geen toekomst heeft, zit fout. Een groot deel van de webservers werkt op Linux of UNIX. Google is de Linux-killerapp. Heel de zoekmachine draait op duizenden Linuxcomputers. 2.2 Hypertext Transfer Protocol ^ Standaardprotocol ^ Om tot een goed inzicht te komen in de werking van het WWW is een basiskennis van HTTP onontbeerlijk. Zoals hierboven reeds vermeld, is http een leveringsmechanisme voor afbeeldingen, 4 van :21

5 grafische bestanden, video, geluid, hypertekst en andere gegevens op het web. De ontwikkelaars van het web realiseerden zich niet dat HTTP de ruggengraat zou gaan vormen van een groot aantal commerciële toepassingen. Om aan de groeiende vraag naar veiligheidsstandaarden tegemoet te komen, ontwikkelde Enterprise Integration Technologies in 1994 het Secure Hyptertext Transfer Protocol (SHTTP). Niettemin is HTTP nog steeds het standaardprotocol van het web. Als je over het web surft, wisselt uw browser berichten uit met webservers door middel van HTTP. Elke keer als u op een hyperlink klikt in een webdocument om van de ene bron naar de andere te gaan, gebruikt uw browser HTTP om toegang te krijgen tot de server waarop de bron zich bevindt die u wilt ophalen Als u dus op een hyperlink klikt, gebruikt de browser de URL van de koppeling om de server ervan op te zoeken. De server ontvangt de aanvraag, zoekt het document en verstuurt het naar de browser De server (de host van de URL, dus niet uw internetprovider!) verbreekt de verbinding Technische versie: Clientbrowser verstuurt de aanvraag voor een document naar de server waarop het document gehost is: De vraag bestaat uit 3 delen: de http-methode (hierover later meer), de URL van het document, de http-versie: GET /default.asp HTTP/1.1 De browser verstuurt bijkomende informatie (header) over zichzelf (kan uitgeschakeld worden in sommige browsers) vb. het browsertype, het besturingssysteem, de bestandtypes die de browser kan weergeven... User-Agent: Mozilla:4.05(WinNT; I) Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */* De server reageert daarop met een http-header die de volgende informatie bevat: de http-versie, de statuscode en een bevestiging van ontvangst HTTP/ OK Vervolgens stuurt de server headerinformatie over zichzelf Een windowsserver: HTTP/ OK Server: Microsoft-IIS/5.0 Date: Tue, 02 Mar :13:08 GMT X-Powered-By: ASP.NET Connection: Keep-Alive Content-Length: 3945 Content-Type: text/html Set-Cookie: ASPSESSIONIDQQQQSATT=KLFDCPHBMOHFFAHNMMIFOBHB; path=/ Cache-control: private Een Unixserver: HTTP/ OK Date: Tue, 02 Mar :14:13 GMT Server: Apache/ (Unix) mod_gzip/ a mod_perl/1.28 SLASH_LOG_DATA: shtml X-Powered-By: Slash X-Fry: No, no, I was just picking my nose. Connection: close Content-Type: text/html; charset=iso Als het verzoek van de client succesvol was, verstuurt de server de gevraagde data naar de client. De verbinding wordt verbroken. Wil je graag de HTTP-header van jouw site lezen: De server reageert niet altijd succesvol op de request van de client vb. als de server gecrasht is, als het document niet meer op de server staat, als de site verhuisd is... Dan stuurt de server een andere statuscode die in de browser wordt weergegeven met een foutmelding. 5 van :21

6 The page cannot be found The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please try the following: If you typed the page address in the Address bar, make sure that it is spelled correctly. Open the home page, and then look for links to the information you want. Click the Back button to try another link. HTTP File not found Internet Information Services Technical Information (for support personnel) More information: Microsoft Support Een overzicht van alle statuscodes: Op Apacheservers (Unix, Linux) kan je de foutpagina's ondervangen met je eigen foutpagina's. De instructies voor die "custom error pages" kan je opnemen in het bestand ".htaccess" in de rootmap van je website. Op Windowsservers is dit ook mogelijk mits enige aanpassing in het bestand "global.asa" op de server. Een enkele verbinding van request tot en met antwoordpaar noemen we een http-transactie MIME voor het verzenden van multimedia via het web ^ Bij het ontstaan van het web was het enkel mogelijk om tekstgegevens door te geven. Er was geen standaard voor het uitwisselen van multimedia. Bovendien konden enkel teksten die opgemaakt waren in VS-ASCII worden doorgestuurd. Multipurpose Internet Mail Extensions (MIME) is een technische specificatie voor de overdracht van multimediabestanden (afbeeldingen, geluid, tekst, video...) via internetmail. Een MIME-bericht bevat 2 onderdelen: 1. een header met informatie over het bestand dat volgt: Bestandstype Subtype (voorbeelden) Application (toepassing) msword, wordperfect, pdf... Audio (geluid) aiff, x-pn-realaudio Image (afbeelding) jpeg, tiff, gif, png... Message (bericht) RFC822 Multipart digest, form-data, header-set, mixed Text HTML, iuls, plain, richtext, tab-separated-values Video avi, mpeg, quicktime Voorbeeld van MIME-header: Content-type: application/msword 6 van :21

7 2. Het eigenlijke bestand (entity body) Zoals je hogerop hebt kunnen lezen, stuurt de client in zijn header een overzicht mee van de MIME-indelingen die door de browser kunnen weergegeven worden. Als de client de ontvangen gegevens niet kan weergeven, dan kan hij eventueel een insteekmodule (plugin) downloaden waarmee de inhoud van het document weergegeven kan worden. vb. Macromedia Flash-plugin, Macromedia Shockwave-plugin, SVG-viewer, VRML-viewer HTTP is statusloos ^ In tegenstelling tot FTP (zie inleiding) is HTTP statusloos d.w.z. dat er voor elke URL die u aanvraagt via de adresbalk van uw browser een verbinding dient gemaakt de worden. Eens de server het gevraagde bestand heeft doorgestuurd, verbreekt de server de verbinding met de respectievelijke browser. HTTP gebruikt dus een TCP/IP-verbinding die slechts één transactie lang open blijft. Als de browser de webpagina of het html-bestand ontvangt, moet de pagina gelezen en weergegeven worden. Dit proces noemen we het "parsen" of "renderen" van het document. Netscape en Mozilla gebruiken hiervoor de Gecko-engine, Konqueror en Safari de KTML-engine. Bij de parsing komt de browser verwijzingen naar andere bestanden (zoals afbeeldingen enz.) in het bestand tegen. In de eerste HTTP-versies moest ook hier telkens een nieuwe verbinding met de hostserver worden aangemaakt wat steeds leidde tot vertraging bij het aanleveren en weergeven van de gegevens op de clientbrowser. Wilde men dit vermijden dan moest de browser in zijn "header" de vraag "Connection: Keep Alive" sturen naar de server. Vanaf HTTP 1.1 blijft de verbinding echter standaard open tot ook alle gelinkte bestanden zijn binnengehaald. Pas daarna verbreekt de browser of de server de verbinding. Voordelen: http kan meerdere 'gelijktijdige' aanvragen van clienten verwerken want de transactie met die ene client is afgesloten. De webprogrammeurs moeten allerlei kunstgrepen uitvoeren om informatie van de clients te bewaren (vb. ingevulde gegevens in een webformulier) Ze maken gebruik van sessies en cookies om gegevens van clients te bewaren HTTP-methodes ^ Elke HTTP-transactie begint met een aanvraag. Er zijn verschillende manieren of methodes om die aanvraag in te dienen. Elke methode bestaat uit 3 delen: de soort de URL van het document de http-versie Bijvoorbeeld: GET / HTTP/1.1 Host: Connection: close Accept-Encoding: gzip Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.mspowerpoint, application/vnd.ms-excel, application/msword, application/x-shockwaveflash, */* Accept-Language: en-us,nl-be;q=0.5 User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; CHWIE_BE70) Web-Sniffer/1.0.5 (web-sniffer.net) Referer: Controleer de request die uw browser verstuurt naar de door u ingegeven URL: 7 van :21

8 sniffer.net/ In het bovenstaande voorbeeld gebruikten we de HTTP-methode GET. Dat is de standaardmethode die een browser gebruikt bij het opvragen van een URL of een bestand. De server reageert met de statuscode, de headers van de MIME-berichten en de gevraagde gegevens. Met de methode HEAD vragen we enkel de HEADER van een webdocument op, dus niet de ENTITY BODY. Dit is zinvol als we informatie willen over de aanmaakdatum, het bestandstype of de grootte van het webdocument, het servertype... De methode POST richt zich op een serverprogramma vb. een CGI-script, een ASP- of PHP-pagina... die dan bijvoorbeeld gegevens doorstuurt om toe te voegen aan een databank. "Information from a form using the GET method is appended onto the end of the action URI being requested. Your CGI program will receive the encoded form input in the environment variable QUERY_STRING. The GET method is used to ask for a specific document - when you click on a hyperlink, GET is being used. GET should probably be used when a URL access will not change the state of a database (by, for example, adding or deleting information) and POST should be used when an access will cause a change. Many database searches have no visible side-effects and make ideal applications of query forms using GET. The semantics of the GET method changes to a "conditional GET" if the request message includes an If-Modified-Since header field. A conditional GET method requests that the identified resource be transferred only if it has been modified since the date given by the If-Modified-Since header. " (Bron: /HTTP/Request.html) De query of de zoekopdracht die de client meestuurt in de URL is opgesteld in het URL-encodedformat. vb. /../img_upload/conferentie/artifort_bridge-tulip.jpg&cat=conferentie& SortBy=fileName&daysOld=-1&searchText=&Page=1 Meer info over HTTP-methodes: Meer info over het URL-encoded-format:?? Samenstelling van een URL ^ <soort>:<soortspecifiek gedeelte> De volledige syntaxis voor een http-url is: <http://<host>:<poort>/<pad>?<zoekgedeelte> Zoals hierboven reeds vermeld, is de query in het zoekveld achter de URL opgesteld in het URL-encoded-format. Maar uiteindelijk geldt dat ook voor de ganse URL. Let er dus bij de naamgeving van webdocumenten steeds op dat u geen spaties of vreemde tekens gebruikt. In URL-encoded-format worden spaties bijvoorbeeld vervangen door % HTML, statische pagina's ^ 3.1 HTML-tags ^ Webpagina s zijn opgemaakt in HTML hetzij hypertext markup language, een basisopmaaktaal die enkel beschrijft hoe een pagina er moet uitzien. Afbeeldingen, applets en dies meer, worden niet in het bestand opgenomen, maar gelinkt. De term hypertext verwijst naar de mogelijkheid om hyperlinks op te nemen waardoor de HTML een soort van metataal wordt met verwijzingen naar andere teksten of bronnen. 8 van :21

9 Voorbeeld van een html-pagina <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>titel van de pagina</title> </head> <body> mijn tekst <br> <b>vette tekst</b> <br> <i>schuingedrukte tekst</i> <br> <b><i>schuingedrukte en vette tekst</i></b> <br> <i><b>schuingedrukte en vette tekst</b></i> <br> <br> <img src="mijnafbeelding.jpg" alt="mooie foto" width=100 height=150> </body> </html> Selecteer en kopieer de bovenstaande tekst in een leeg kladblokdocument en sla het op in HTML-formaat. Bekijk de uitvoer in een browser. In de headsectie van het document wordt meta-informatie over het document weggeschreven (keywords, author, title, description ) waardoor zoekrobots of databases makkelijk een bepaalde pagina of website kunnen vinden. De eigenlijke opmaak van de webpagina wordt weggeschreven in de body van het html-document tussen te begin- en eindtags <body> en </body>. Ook opmaakcodes als vetgedrukt en schuingedrukt staan tussen een begin- en eindtag. Vetgedrukt of bold (<b>...</b>) <b>vette tekst</b> Schuingedrukt of italic <i>schuingedrukte tekst</i> Willen we twee opmaakkenmerken m eegeven, dan moeten we tags embedden of insluiten. Zoals u merkt, kan dat op twee manieren: <b><i>schuingedrukte en vette tekst</i></b> <i><b>schuingedrukte en vette tekst</b></i> Browsers interpreteren foutieve html-codes vaak toch op de juiste manier. Ook de onderstaande foutieve code zal bijvoorbeeld toch op de juiste manier worden weergegeven. <i><b>schuingedrukte en vette tekst</i></b> HTML is een afgeleide en vereenvoudigde versie van SGML (standard generalized markup language) dat de opmaak van documenten beschrijft. Meer informatie en een uitgebreide handleiding over HTML vindt u op De specificaties van HTML zijn opgesteld door het W3C (het World Wide Web Consortium), een organisatie van onafhankelijken en vertegenwoordigers uit softwarefirma's. Momenteel zit HTML aan versie 4 en de taal zal en kan niet meer verder ontwikkeld worden. Wat is hiervan de oorzaak? Het grote nadeel van HTML is dat het opmaak en inhoud door elkaar haalt. De langverwachte opvolger XML moet dit euvel verhelpen. Inhoud en opmaak worden over verschillende documenten gescheiden. Bijvoorbeeld: het XML-document (extended markup language) bevat de inhoud, een XSL-bestand bevat de opmaakgegevens zoals gekozen lettertype, achtergrondkleur enz. Een 9 van :21

10 aanpassing aan de style sheet (=stijlsjabloon) zal de lay-out van alle gekoppelde pagina's meteen wijzigen zonder dat we daarvoor aan de inhoud van de pagina's hoeven te raken. (XML maakt het mogelijk dat een gebruiker zijn eigen tags formuleert. XSL, een bestand waarin de opmaak van de verschillende onderdelen van een webpagina wordt weggeschreven.) Een vergelijking van SGML en XML vind je op Voorlopig bestaat er een tussenoplossing: XHTML werd ontwikkeld als overgang tussen HTML en XML. XHTML hanteert een veel strengere syntaxis. Het dient gezegd dat ook binnen klassieke HTML reeds gebruik kan gemaakt worden van stijlsjablonen in de vorm van CSS (Cascading Style Sheet). Een overzicht van alle HTML-tags vindt u op 3.2 Metagegevens ^ headsectie en Dublin Core ^ In de headsectie van een HTML-document kan je naast de titel ook METADATA opnemen. Dat zijn paginaoverschrijdende tags die bijvoorbeeld door zoekrobots worden gelezen bij het cachen of bezoeken van uw site. Wilt u op uw website de juiste bezoekers krijgen en uiteraard ook veel bezoekers, dan is een weloverwogen keuze van de metadata van zeer groot belang. Klassiek raadt men webontwikkelaars aan om vooral voor de nodige keywords te zorgen. Door de talloze misbreuken op dat vlak, zijn er nog maar weinig zoekrobots die met de keywords rekening houden. Google bijvoorbeeld list wel de METADATA onder DESCRIPTION, naast de alt-attributen bij afbeeldingen en de tekst van de pagina zelf. Niet alle zoekrobots gaan op dezelfde manier tewerk. Bovendien veranderen de spiders ook vaak hun zoekalgoritme zodat misleiding eerder moeilijk is. Een groep ontwikkelaars met de welluidende naam "Dublin Core" hebben specificaties ontwikkeld wat betreft METATAGS. Hun richtlijnen zijn goedgekeurd door het W3C Een klein voorbeeld van Dublin Core-metatags: KLIK Een tutorial over het gebruik van metatags in het algemeen: /metatags.html Zoekrobots zijn niet te misleiden ^ Zoekrobots zijn moeilijk te misleiden. Het eindeloos herhalen van zoektermen in commentaarregels of metatags is niet meer zinvol. De meeste zoekrobots negeren die informatie en webmasters die daarin iets te ver gaan, besparen zich beter de moeite. Vaak worden zulke pagina's gewoon genegeerd en zelfs niet gelist. Zoekrobots als Google houden over het algemeen zelfs weinig rekening met de metatags "keywords". De Googlebot slaat vooral de titel van de webpagina op en de informatie die in het attribuut "alt" van een afbeeldingstag is opgeslagen. Het verbergen van "keywords" in "alts" is dus wel -voorlopig dan toch nog- zinvol. <img src="foto.jpeg" alt="walt disney, mickey mouse, donald duck, tekenfilm" title="de tekenfilmsite"> *In het attribuut "alt" kan de webmaster een alternatieve slagzin noteren die moet getoond worden als de afbeelding om een of andere reden niet kan weergegeven worden. Internet Explorer toont die informatie ook als tooltiptekst als je met de muis over de afbeelding beweegt. Andere browsers doen dit niet. Wil je ook daar het zelfde effect bereiken, dan kan je best ook het attribuut "title" toevoegen. 10 van :21

11 Last but not least: spiders zijn allergisch voor pagina's die maandenlang ongewijzigd blijven robots.txt ^ Zoekrobots houden geen rekening met de specifieke eisen van de webmaster. Zij listen vaak zonder meer de bestanden in de rootmap van je website. Ook andere MIME-types als HTML worden gelist. Google bijvoorbeeld toont ook Worddocumenten, PDF's, WordPerfectdocumenten, Powerpointbestanden enz. en biedt daar vaak zelfs een HTML-versie van aan. Denk dus niet dat je zulke bestanden veilig kan afsluiten van de surfer. Toch bestaat er een manier om spiderbots doelbewust de toegang tot bepaalde mappen of bestanden te verhinderen. Plaats in de rootmap van je site het bestand "robots.txt". De meeste spiderbots houden rekening met de "toegangsrechten" die je hierin opneemt. Met de onderstaande regels geef je alle robots het recht om alle bestanden op je website te listen. User-agent: * Disallow: De onderstaande regels sluiten alle robots overal van uit: User-agent: * Disallow: / Met de onderstaande regels sluit je alle robots uit van de mappen "images" en "cgi/bin": User-agent: * Disallow: /cgi-bin/ Disallow: /images/ Je kan ook verhinderen dat een specifieke robot je site kan listen: User-agent: Roverdog Disallow: / In het onderstaande voorbeeld verhinderen we de googlebot het bestand cheese.htm op te nemen in zijn listing: User-agent: googlebot Disallow: cheese.htm Meer uitleg en tutorials vind je op Ook in de metatags van een webpagina kan je de robots aansturen: /markup/metatags.html Een lijst van de zoekrobots: Contactadressen en zoekrobots: Problemen met framespagina's ^ Bovendien houden ze geen rekening met framespagina's. En dit is soms erg problematisch. Tal van sites slaan met behulp van Javascript informatie over de gebruiker tijdelijk op in een bovenliggend frame van een webpagina. Doordat zoekmachines standaard niet noodzakelijk het totale frame listen. De bezoekers komen via de zoekmachine op een enkel frame terecht waardoor het Javascript niet meer functioneert. Een voorbeeld: - De pagina "index.html" bestaat uit twee frames d.w.z. twee afzonderlijke webpagina's: top.html - deze pagina is slechts 1 pixel hoog en wordt door de surfer niet opgemerkt. Hierin wordt een lijst van de producten bewaard die de surfer in zijn online winkelwagentje heeft opgeslagen winkel.html - deze pagina krijgt de surfer te zien. Hierbinnen kan de bezoeker zijn producten kiezen Google list enkel "winkel.html", met het gekende gevolg. 11 van :21

12 Voor dit veelvoorkomend probleem biedt Javascript een oplossing: <script language="javascript"> <!-- if (top.location==self.location){ top.location.href="index.html"; //--> </script> Brugpagina's (doorways) ^ Trefwoorden zijn niet alles. "Zoekrobots trekken tegenwoordig ook de kaart van de semantiek (betekenisleer). Concreet betekent dat dat ze in jouw webpagina's een bepaald thema proberen te vinden. Zodra iemand een zoekterm intikt die (binnen hetzelfde semantische veld) nauw bij dat thema aansluit, zal je pagina automatisch een hogere rangschikking in de resulterende lijst innemen. Een voorbeeld: draait je pagina rond tuinbouw, dan weet de bot dat tot die pagina oo begrippen zoals "rotstuin", "planten", "bloemen", "vijver" enzovoort behoren. Staan die trefwoorden effectief op je site, dan heeft je pagina recht op een hogere rangschikking. Ideaal zijn zoveel mogelijk verschillende begrippen uit hetzelfde betekenisveld. Anderzijds neem je het best niet te veel trefwoorden op éénzelfde pagina op - anders komt de optimale densiteit in het gedrang." (Bron: NVU Business Publications Ik heb een website - Zoekrobotica: in Computermagazine, 2003) Webdesigners bouwen daarom brugpagina's of doorways. Dit zijn pagina's die een beknopte hoeveelheid trefwoorden rond een bepaald thema bevatten. Via een "metarefresh" schakelt de pagina dan automatisch door naar een voor de surfer aantrekkelijker pagina. Een te snelle refresh wordt door de zoekrobots echter evenzeer afgestraft. <meta http-equiv="refresh" content="1";url=" startpagina.html"> Code swapping ^ Een andere techniek bestaat erin je brugpagina te vervangen door de echte pagina vanaf het moment dat de zoekrobot je pagina heeft gelist. Maar ook hier schuilt een addertje onder het gras. Als een zoekrobot opnieuw je pagina bezoekt en op de misleiding stuit, krijg je een slechtere rangschikking Cloaking ^ Omdat browsers maar ook zoekrobots werken via het HTTP-protocol en onderliggend via TCP/IP kan je van elke bezoeker de USER_AGENT en het IP-adres opvragen. Op die manier beschik je over de mogelijkheid om afhankelijk van de bezoeker een op maat geschreven gepaste pagina te tonen. Deze techniek noemen we cloaking. Op dynamische pagina's is dit snel op te lossen met een script (Perl, PHP, ASP...). Je moet er wel voor zorgen dat je je steeds bedient van een up-to-date lijst van IP-adressen en USER_AGENT-benamingen van de zoekrobots. Want als bots zoals Google op de cloakingtechniek stuiten...! Voor meer informatie: de KEI-index^ Veel keywords zijn veek te algemeen. Het is echter ook niet evident om de juiste keywords voor je site te kiezen. Best werk je met een KEI-index (Keyword Effectiveness Index): voor een optimaal trefwoord koppelt die een hoge populariteit aan een lage concurrentie. Hoe hoger de KEI-waarde, 12 van :21

13 des te beter je trefwoord. Een aantal online tools kunnen een handje helpen: Interactie in statische pagina's ^ 4.1 Scripttalen en programmeertalen^ Het einde van HTML^ HTML is geen programmeertaal. HTML beschrijft hoe de webpagina er moet uitzien. Het is dus een zeer eenvoudige opmaaktaal en dat is misschien precies de oorzaak van haar succes. Iedereen kan de taal zonder al te veel inspanningen leren én de browsers staan fouten toe! Bij een klassieke programmeertaal zijn afwijkingen of fouten niet toegestaan. HTML heeft daardoor echter ook heel wat beperkingen. Het maken van links en hyperlinks is zowat de enige interactie die je met zuivere HTML aan een webpagina kan toevoegen. Met versie 4 zijn we dan ook aan de laatste HTML-versie gekomen. De taal wordt niet verder doorontwikkeld. Alhoewel het stopzetten van een ontwikkeling in de computerwereld gelijk staat met het sterven van een stille dood, denken we dat het gebruik van HTML nog niet meteen gaat stoppen. Immers, er bestaan heel wat andere manieren om interactie en dynamiek aan je pagina toe te voegen Compileren of interpreteren? ^ Een webpagina of een volledige website biedt niet dezelfde uitgebreide mogelijkheden als een klassiek computerprogramma. Ingewikkelde rekenintensieve toepassingen, grafische technieken enz. zijn niet mogelijk. Met HTML is het bijvoorbeeld niet mogelijk om een rekenblad te 'programmeren' en een HTML-Photoshop behoort ook niet tot de mogelijkheden. Een klassieke toepassing wordt geprogrammeerd in duizenden regels code in een of andere programmeertaal (vb. C, C++, Fortran, Cobol...). Computers kennen doorgaans slechts 2 toestanden nl. "aan" of "uit" en verstaan enkel lange reeksen van nullen of enen die door de processor worden uitgevoerd. Om het voor mensen wat leesbaarder te maken zijn programmeertalen ontwikkeld. Dit zijn talen die wat meer op mensentaal lijken. Bijvoorbeeld het klassieke "Hello World" in C: #include <stdio.h> int main(void) { puts("hello World!"); return 0; Vooraleer we een programma kunnen gebruiken, moeten we het compileren d.w.z. een compiler zet de programmeercodes om in de door de processor uit te voeren machinetaal. Of: een compiler maakt een voor de computer uitvoerbaar (op Windows: executable *.exe) programma. Klassieke webpagina's worden niet gecompileerd maar gewoonweg naar de clientbrowser verzonden en daar door de browser gerenderd. Het is echter wel mogelijk om een programmascript in een webpagina op te nemen. Bijvoorbeeld: <script language= "Javascript"> hier komt het script </script> 13 van :21

14 Een script wordt niet gecompileerd maar geïnterpreteerd door een module in de browser of een module op de server. Of het script gaat niet door een compiler maar door een interpreter die het script interpreteert en daarna uitvoert. Uiteraard blijven de mogelijkheden veel beperkter dan bij een klassiek programma. En dat is maar goed ook want een online script moet niet dezelfde systeemtoegang- en mogelijkheden krijgen als een softwareprogramma Volg de spelling- en de spraakkunstregels...^ De European Computer Manufacturers Association (ECMA) werd in 1961 opgericht met als doel de "standardization of information and communication systems". ECMAScript is een standaard scripttaal voor het web, ontwikkeld in een samenwerking met Netscape en Microsoft. De officiële ECMA-262-standaard moet ervoor zorgen dat er wat meer samenhang is tussen de webscriptimplementaties van Netscape, Microsoft en andere. ECMA-262 is in grote lijnen gebaseerd op Netscapes Javascript. Brendan Eich ontwierp de scripttaal Javascript en Netscape 2.0 was de eerste browser die Javascript ondersteunde. Microsoft ontwikkelde een eigen implementatie onder de naam Jscript en nam het voor het eerst op in Internet Explorer 3.0. "The development of this Standard started in November The first edition of this ECMA Standard was adopted by the ECMA General Assembly of June That ECMA Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April The ECMA General Assembly of June 1998 approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC The current document defines the third edition of the Standard and includes powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation of forthcoming internationalisation facilities and future language growth. Work on the language is not complete. The technical committee is working on significant enhancements, including mechanisms for scripts to be created and used across the Internet, and tighter coordination with other standards bodies such as groups within the World Wide Web Consortium and the Wireless Application Protocol Forum." (bron: Meer informatie: Veel scripttalen van latere oorsprong volgen de ECMA-262-standaard. Actionscript in Macromedia Flash is bijvoorbeeld een implementatie van ECMA-script. Macromedia's highend-multimediatool Director had tot voor kort enkel zijn eigen scripttaal Lingo aan boord. Vanaf versie MX 2004 is er ook Javascriptondersteuning in opgenomen. Dit wijst nog maar eens op de populariteit van Javascript en ECMA-script en een webontwikkelaar kan dus ook niet zonder enige kennis van Javascript. 4.2 Javascript of Java? ^ Het verschil tussen JavaScript en Java ^ JavaScript is geen Java! Kort gezegd is het verschil dat JavaScript een scriptingtaal is en Java een programmeertaal. Java is, omdat het een programmeertaal is, een stuk moeilijker te leren dan JavaScript. "Dat er veel verwarring is over de begrippen JavaScript en Java is goed te begrijpen. Niet alleen de namen zijn verwarrend, ook de geschiedenis van de beide talen is nauw met elkaar verbonden. JavaScript is namelijk ontstaan toen Java populair werd. Da taal Java is ontwikkeld door Sun Microsystems. In 1995 werd Java heel populair, maar doordat de taal zo ingewikkeld was, waren er maar weinig mensen die er goed mee om konden gaan. Het bedrijf Netscape zag dat er behoefte was aan een taal met veel van de mogelijkheden van Java, maar die wel eenvoudig te leren was en die verder direct door de browser uitgevoerd kon worden. In de tweede helft van 1995 begonnen Netscape en Sun een samenwerking die de creatie van 14 van :21

15 JavaScript tot gevolg had. JavaScript heette eerst "Mocha" en later werd het "Livescript" genoemd. Toen de samenwerking tussen Netscape en Sun eenmaal een feit was, ontstond de uiteindelijke naam: JavaScript." (Bron: Java is straffe koffie... ^ Toch is ook Java inzetbaar op het web. Java is als programmeertaal een vreemde eend in de bijt. de bedoeling van Sun Microsystems was om een programmeertaal te ontwikkelen waarvan de programma's zonder meer op elk computerplatform kunnen uitgevoerd worden. Bij programmeertalen als C en C++ moet een programma voor elk besturingssysteem afzonderlijk worden gecompileerd en vaak moeten ook hele stukken programmacode worden aangepast om ze op verschillende systemen (vb. MacOS, Windows...) te laten werken. Een Javacompiler vertaalt de programmacode naar bytecode en dus niet naar machinetaal. Die bytecode kan uitgevoerd worden door een soort van virtuele machine, de Java Virtual Machine (of Runtime Environment), die op zijn beurt de bytecode vertaalt naar voor de computer begrijpelijke instructies. Voor elk besturingssysteem bestaat er uiteraard zo'n JVM. Zo'n JVM kan ook opgeroepen worden door een browser en aldus krijgen we de mogelijkheid om Javaprogramma's in de browser uit te voeren. Zulk een Java-webprogramma noemen we een applet en kan opgenomen worden in een webpagina. <applet codebase="http://www.myweb.com/webcam/" code="tincam.class" width=320 height=240> <param name="refresh" value="5"> <param name="picture" value="tincam.jpg"> </applet> Om Java-applets te schrijven hebben we een geïntegreerde ontwikkelomgeving (IDE: Integrated Development Environment) nodig. Een IDE bestaat uit de volgende onderdelen een java-editor een compiler een JVM Voorbeelden van IDE's: JBuilder van Borland Visual J++ van Microsoft Visual Café van Symantec Kawa van TekTools JDeveloper van Oracle Java Workshop van Sun Visual Age van IBM Bluette van Tucows Wat is JavaScript? ^ JavaScript is dus een scriptingtaal. Er bestaat client-side en server-side JavaScript. Client-side JavaScript wordt direct uitgevoerd via de browser van de bezoeker. We zetten het in om onze webpagina's interactief te maken. Voorbeelden van mogelijke toepassingen: controle of een formulier is ingevuld controle schermresolutie om de surfer naar een aangepaste pagina te sturen een "rollover"-effect op een foto of link van :21

16 We verwijzen u voor een beperkte tutorial en de mogelijkheden van client-side JavaScript door naar onze Javascriptcursus. Server-side JavaScript wordt uitgevoerd door een server waarna het resultaat wordt teruggestuurd naar de browser van de bezoeker. Met server-side Javascript kunnen we onze site "dynamisch" maken. Hierover later meer. 4.3 Flash en Director ^ Flash is een commercieel product van de firma Macromedia. Versie 1 verscheen onder de naam "Future Splash Player", en maakte het mogelijk tijdlijn-gebaseerde vectoranimaties te maken. Het voordeel tegen pixelplaatjes is dat vectorafbeeldingen zonder kwaliteitsverlies kunnen vergroot worden en dat de bestandsomvang zeer klein blijft. Na de overname door Macromedia groeide het succes van Flash gestaag als een middel om animaties op websites mogelijk te maken. Voordien werden (en dat is eigenlijk nog altijd zo) enkel geanimeerde gifafbeeldingen standaard ondersteund door de browsers. Willen we dat onze browser flashanimaties weergeeft, dan dienen we de Flashplugin (=insteekmodule) te installeren. Voor Internet Explorer is de plugin een ActiveXmodule, op Mac/Apple is de Flashplayer/plugin een Javamodule en aldus ook stukken trager in de weergave. Een aantal browsers op het Linuxplatform loopt wat achter wat betreft de ondersteuning van de nieuwste Flashplayers omdat de firma Macromedia zelf geen players voor dat platform ontwikkelt. Veel mensen verwarren de Flashplayer (=plugin voor Flash) met de Shockwaveplayer (eveneens van Macromedia). Deze laatste is een plugin voor de weergave van "films" en "animaties/programma's" gemaakt met de multimediatool Macromedia Director. De verwarring is begrijpelijk omdat het exportformaat dat Flash voor het web gebruikt de extensie "swf" meekrijgt wat staat voor "shockwave flash". Ondertussen is Flash (MX) uitgegroeid tot een RAD (rapid application development)-tool in de aard van Visual Basic. Met Flash is het mogelijk om naast animaties ook spelletjes, programma's, databankapplicaties enz. te ontwikkelen. Flash kan geïntegreerd worden met de dynamische serverscripttaal Coldfusion, maar even goed met ASP, PHP en XML. Sinds versie MX (6) is het ook mogelijk films op te nemen in een flashpresentatie. Ondersteuning voor MP3 is al langer aanwezig. Flashfilms kunnen op een server samenwerken met de Flash Communication Server: "Macromedia Flash Communication Server MX 1.5 provides a complete development and deployment platform for including shared audio, video and live data in your websites and Rich Internet Applications. Multi-way and multi-user video, audio and data streaming lets developers quickly create features such as streaming video, online webcam chat communities, live event broadcasts, and more to their websites." (Bron: VOORBEELDEN VAN SITES IN FLASH Vorm en inhoud scheiden ^ 5.1 Klassieke opmaak ^ 16 van :21

17 In HTML staan de inhoud en de opmaakgegevens door elkaar. Dat is bijzonder lastig als je nadien de lay-out van je webpagina's wil wijzigen. We geven een voorbeeld: <table width="80%" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="51%" bgcolor="#996633"><font face="arial, Helvetica, sans-serif"> Dit is de eerste tabelcel</font></td> <td width="49%" bgcolor="#99cc66"><div align="center"><font face="arial, Helvetica, sans-serif"> Dit is de tweede tabelcel</font></div></td> </tr> <tr> <td bordercolor="#9900cc" bgcolor="#996699"><font face="courier New, Courier, mono"> Dit is de derde tabelcel</font></td> <td bordercolor="#993399" bgcolor="#999999"><div align="right"><font face="times New Roman, Times, serif"><strong><em> Dit is de vierde tabelcel</em></strong></font></div></td> </tr> </table> In het bovenstaande voorbeeld zijn de opmaakgegevens zoals lettertype, vet, schuin, uitlijning, achtergrondkleur, lettergrootte enz. met de eigenlijke tekst en tabel vermengd. Bovendien zie je dezelfde kenmerken meerdere malen opnieuw opduiken. Als we de bovenstaande code in een HTML-pagina opnemen zien we enkel een tabel met twee kolommen en twee rijen. Je kan je al voorstellen wat een uitgebreide webpagina aan HTML-tags zal bevatten! 5.2 Cascading Style Sheets ^ Met CSS of Cascading Style Sheets kunnen we opmaakgegevens in een extern bestand opslaan. Met behulp van dat bestand kunnen we bepalen hoe tabellen, alinea's, teksten, links, de achtergrond, browserelementen enz. er moeten uitzien. In het onderstaande voorbeeld definiëren we hoe een tabelcel ("td") moet opgemaakt worden: td { font-size:12px; FONT-FAMILY: verdana, arial, sans-serif; text-align:justify; font-style:normal; color:#000000; padding-left:15px; Je merkt wellicht dat de notatie van CSS erg op de Javascriptnotatie lijkt. Het bovenstaande voorbeeld geeft de indruk dat we geen onderscheid kunnen maken tussen tabelcellen onderling m.a.w. dat alle tabelcellen er gelijk gaan uitzien. Maar ook dit probleem kan verholpen worden met CSS. We kunnen namelijk verschillende "klassen" definiëren. Standaard zien de tabelcellen eruit zoals in het bovenstaande voorbeeld, maar we kunnen een klasse met de naam "white" definiëren op de volgende manier: td.white { background:#ffffff; color:#808080; text-align:left; font-style:normal; font-family:verdana, Arial, Serif; font-size:11px; padding-top:15px; Willen we de standaard klasse gebruiken geven in HTML enkel "<td...>" op. Willen we de klasse "white" gebruiken, dan voegen we de volgende code aan onze tags toe "<td class='white'...>". 17 van :21

18 We slaan al deze gegevens op in het externe bestand met als naam bijvoorbeeld "extern.css". Als we dit opmaakbestand willen gebruiken in een webpagina moeten we in de headsectie van het document de regel "<link href="http://www.ardeco.be/css/extern.css" rel="stylesheet" type="text/css"> " toevoegen. Interessante links: XML: Extended Markup Language ^ XHTML ^ De meeste browsers interpreteren slordige HTML-code toch op de juiste manier. Hogerop hebben we reeds vermeld dat HTML niet verder wordt doorontwikkeld. Bedoeling is HTML te vervangen door XML oftewel extensible Markup Language. XHTML werd speciaal ontwikkeld om de overgang tussen HTML en XML minder zwaar te maken. XHTML is daarom al een veel strictere opmaaktaal dan HTML. We sommen de wijzigingen even voor u op: Alle tags en attributen moeten in kleine letters staan. Alle XHTML elementen moeten afgesloten worden. Alle attribuutwaarden moeten gequote worden. Het id-attribuut vervangt het name-attribuut. Het script-element moet een type-definitie krijgen. Documenten moet overeenkomstig de XML-regels opgesteld worden. XHTML krijgt nog enkele verplichte bijkomende elementen. XHTML biedt de volgende voorbeelden tegenover HTML: Aangezien het web in de toekomst steeds meer op XML gebaseerd zal zijn is de eenvoudigste manier om de overstap te maken om te beginnen je pagina's in geldige XHTML code te schrijven. Voor XHTML is een schone en logische code vereist. Hierdoor krijg je als het goed is compactere pagina's met minder fouten. XHTML zorgt ervoor dat webpagina's geschikter worden voor draadloze apparaten, slechtzienden/blinden en dat er minder problemen zullen zijn met de weergave in verschillende browsers. Voor meer info, en /xhtml11_dtd.html In dit bestek is het ook interessant om de Doc Type Definitions eens van naderbij te bestuderen: DTD Formuleer uw eigen tags ^ De toekomst heet XML. Tot nog toe gebruiken de meeste computerapplicaties hun eigen bestandstypes. MS Word bijvoorbeeld slaat zijn documenten op met de extensie *.doc. Dat bestandstype is gesloten d.w.z. dat men enkel via "reverse engineering" achter de specificaties van dat bestandstype kan komen. Andere bestandstypes zijn open bijvoorbeeld het*.rtf-formaat is gedocumenteerd en door iedereen te integreren. Hetzelfde geldt voor tal van bitmapbestandstypes zoals *.JPEG en *.TIFF. HTML-bestanden zijn doorgaans als pure tekstdocumenten opgeslagen in UNICODE- of ASCII-formaat. "ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as 'a' or 18 van :21

19 or an action of some sort. ASCII was developed a long time ago and now the non-printing characters are rarely used for their original purpose. Below is the ASCII character table and this includes descriptions of the first 32 non-printing characters. ASCII was actually designed for use with teletypes and so the descriptions are somewhat obscure. If someone says they want your CV however in ASCII format, all this means is they want 'plain' text with no formatting such as tabs, bold or underscoring - the raw format that any computer can understand. This is usually so they can easily import the file into their own applications without issues. Notepad.exe creates ASCII text, or in MS Word you can save a file as 'text only'" (Bron: Gegevens opslaan in ASCII houdt in dat je de gegevens ook makkelijk tussen diverse computersystemen kan uitwisselen. Een zogenaamd *.txt-bestand bevat platte tekst en zogenaamde ASCII-codes. Voor niet-westerse taalsystemen is er UNICODE ontwikkeld. Nadeel van veel tekstformaten (*.rtf, *.doc, *.wpd, *.HTML...) is dat ze opmaak en gegevens vermengen. Bekijk maar eens de inhoud van een RTF-bestand. XML moet aan die impasse een einde maken. Dankzij het op SGML gebaseerde XML moeten bestanden universeel uitwisselbaar worden. Nog belangrijker is dat ze een strict onderscheid maken tussen vorm en inhoud. Voor een handleiding verwijzen we u door naar: Kenmerken van XML ^ XML is het toverwoord dat bestandsuitwisseling programma- en platformonafhankelijk moet maken. In de industriële wereld moet deze opmaaktaal EDI aflossen. Electronic Data Interchange. Dat is een internationale reeks afspraken die het uitwisselen van gegevens tussen verschillende soorten bedrijven moest mogelijk maken. Zoals je hierboven reeds hebt vernomen heeft XML een aantal voordelen ten opzichte van HTML. Een voorbeeld van een XML-bestand. Je kan je eigen tags definiëren De namen van tags zijn hoofdlettergevoelig (case-sensitive) d.w.z. dat een openings- en een sluittag eenvormig moeten zijn Een XML-document voldoet aan strakke regels Je kan een verwijzing opnemen naar een DTD (document type deifnition) d.i. een apart bestand waarin is opgenomen welke elementen in je XML-document moeten of kunnen voorkomen. Een DTD bepaalt de "grammatica" van je XML-bestand Een XML-bestand is een soort van "stamboom" waarin elk onderdeel een "element" is. Elementen en tags moeten goed "genest" worden. <?xml version="1.0" encoding="iso "?> <!DOCTYPE bibliotheek SYSTEM "bib1.dtd"> <bibliotheek> <boek> <titel> Mijn eerste boek</titel> <uitgever> Standaard </uitgever> <auteur> Jan Jansens </auteur> <paginas> 300 </paginas> </boek> <boek> <titel> Mijn tweede boek</titel> <uitgever> Kluwer </uitgever> <auteur> Jan Pieters </auteur> <paginas> 320 </paginas> </boek> <boek> <titel> Mijn derde boek</titel> <uitgever> Kluwer </uitgever> <auteur> Jan Pieters </auteur> <paginas> 320 </paginas> </boek> <boek> <titel> Mijn vierde boek</titel> <uitgever> Kluwer </uitgever> <auteur> Jan Pieters </auteur> 19 van :21

20 <paginas> 320 </paginas> </boek> </bibliotheek> 5.4 XML in samenwerking ^ XML, CSS en XSL ^ Als je een XML-bestand opent in een browser krijg je de ruwe XML-data te lezen. Er is natuurlijk niets van opmaak te bemerken. Daarvoor moeten we onze toevlucht nemen tot een stijlsjabloon zoals CSS of XSL. We maakten reeds kennis met CSS en een CSS-stijl op een XML-bestand toepassen is een fluitje van een cent. We maken een CSS-bestand met bijvoorbeeld de naam "stijl.css" voegen simpelweg de volgende regel toe aan ons XML-bestand: <?xml-stylesheet href="stijl.css" type="text/css"?> We hoeven in het XML-bestand nu geen "klassen" meer op te maken. Via CSS spreken we de diverse "nodes" en "objecten" in het XML-bestand rechtstreeks aan. In de toekomst zal de CSS-standaard opgevolgd worden door XSL, extensible Style Language. Zoals het begrip "extensible" (=uitbreidbaar) laat vermoeden hebben we hier veel meer controle over de opmaak van de pagina's. XSL lijkt ook veel meer op een programmeertaal. Ze maakt het mogelijk dat we XML-gegevens filteren, sorteren enz. Een variant van XSL is XSL-FO die zal ingezet worden voor geformatteerde pagina's in bijvoorbeeld DTP-programma's. Op de volgende manier kunnen we een XSL-stylesheet opnemen in het XML-bestand. <?xml-stylesheet href="stijl.xsl" type="text/css"?> Het XSL-bestand ziet er zo uit: <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/tr/wd-xsl"> <xsl:template> <xsl:for-each select="bibliotheek/boek"> <h1> <xsl:value-of select="titel"/> </h1> <h2> <xsl:value-of select="auteur"/> </h2> <b> <xsl:value-of select="uitgever"/> </b><br/> <i> <xsl:value-of select="paginas"/> </i> </xsl:for-each> </xsl:template> </xsl:stylesheet> XML en Javascript ^ De ondersteuning voor XML laat nog vaak te wensen over bij veel browsers. In Internet Explorer is het bijvoorbeeld mogelijk om XML-gegevens in een webpagina in te lezen met behulp van Javascript. Microsoft voorziet ook in die mogelijkheid door het opnemen van Active X-controls in een webpagina. Het onderstaande voorbeeld beantwoordt aan de vooropgestelde standaarden van het W3C. <html> <head> 20 van :21

6. De sitemap of stamboom van uw website

6. De sitemap of stamboom van uw website 6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen,

Nadere informatie

1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld.

1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld. Module 4 programmeren 1.Noem de vijf categorieën waarin programmeertalen kunnen worden ingedeeld en geef van elke categorie één voorbeeld. Machinecode Assembleertalen: assembly Hogere programmeertalen:

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

HTML. Media. Hans Roeyen V 3.0 Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...

Nadere informatie

Titel: flashvars.html

Titel: flashvars.html Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie

Nadere informatie

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen.

OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen. OPDRACHTKAART MM-05-03-01 Het World Wide Web Voorkennis: Geen. Intro: Deze opdracht gaat over de belangrijkste mogelijkheid van het internet: het surfen op het World Wide Web. Deze opdracht beschrijft

Nadere informatie

HTML krijgt een standaard opmaak van de browser

HTML krijgt een standaard opmaak van de browser 1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te

Nadere informatie

Les C-04 Programmeren

Les C-04 Programmeren Les C-04 Programmeren 4.1 Programmeertalen In les B-03 is uitgelegd hoe de processor van een moderne computer geprogrammeerd dient te worden: programmacode wordt omgezet in assemblercode, die vervolgens

Nadere informatie

Zonnepanelen Hoe krijg je de data op je website?

Zonnepanelen Hoe krijg je de data op je website? Zonnepanelen Hoe krijg je de data op je website? Beste website-bezoeker, Omdat ik al heel wat vragen kreeg over het gedeelte zonne-energie op mijn website, heb ik besloten om de werkwijze die ik gevolgd

Nadere informatie

Syllabus Zelf een website bouwen. Artheos

Syllabus Zelf een website bouwen. Artheos Syllabus Zelf een website bouwen Artheos Helma de Boer Artheos Webdiensten & Office Support www.artheos.nl 2012 Inhoud Syllabus Zelf een website bouwen H1 De techniek van een website... 3 1.1 Browser en

Nadere informatie

Web building basis: HTML. Karel Nijs 2008/09

Web building basis: HTML. Karel Nijs 2008/09 Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building

Nadere informatie

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1 Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet

Nadere informatie

Module V - XML. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005) V 1

Module V - XML. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005) V 1 Module V - XML Extensible Markub Language is een eenvoudig en flexibel text-formaat voor de opslag van data. Het is een meta opmaak (markup) taal voor de beschrijving van gestructureerde gegevens. De stukjes

Nadere informatie

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!

Nadere informatie

Thinking of development

Thinking of development Thinking of development Netwerken en APIs Arjan Scherpenisse HKU / Miraclethings Thinking of Development, semester II 2012/2013 Agenda voor vandaag Netwerken Protocollen API's Opdracht Thinking of Development,

Nadere informatie

Joomla! en SEO: De basis elementen van SEO. Richard Bruning

Joomla! en SEO: De basis elementen van SEO. Richard Bruning Joomla! en zoekmachines : De basis elementen van SEO Richard Bruning Joomla! out of the box CMS Hoe doeltreffend is Joomla out of the box voor U als website eigenaar? Ontmoet Tux, onze opdrachtgever voor

Nadere informatie

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden

Nadere informatie

HTML Editor: de eerste stappen

HTML Editor: de eerste stappen LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor

Nadere informatie

Google Maps op uw site

Google Maps op uw site Google Maps op uw site 1. Ga naar maps.google.com en voer het gezochte adres in. 2. Klik op de knop Zoeken in Maps. 3. U kan naar de gewenste positie zoomen en kiezen voor de satellietweergave of de gewone

Nadere informatie

Instellingen voor het publiceren opgeven

Instellingen voor het publiceren opgeven 289 Aanvulling hoofdstuk 9 i.p.v. blz. 289 tot en met 308 Instellingen voor het publiceren opgeven Voordat u webpagina s kunt publiceren, moet u eerst de instellingen voor het publiceren opgeven. Anders

Nadere informatie

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.

Nadere informatie

Y.S. Lubbers en W. Witvoet

Y.S. Lubbers en W. Witvoet WEBDESIGN Eigen Site Evaluatie door: Y.S. Lubbers en W. Witvoet 1 Summary Summary Prefix 1. Content en structuur gescheiden houden 2. Grammaticaal correcte en beschrijvende markup 3. Kopregels 4. Client-

Nadere informatie

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1 Schrijven voor het web 1TIN Internettechonologie 2003-2004 les 02 1 Verschillen met gewone teksten niet noodzakelijk sequentieel lezen webpagina globaal lezen (geen details) beantwoorden aan doel van bezoek?

Nadere informatie

Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat.

Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat. Een website maken met ZIMPLIT. Geen kennis van html nodig. www.acc.dds.nl/lesonline/zimplit/ Download Zimplit handleiding pdf Download de Zimplit bestanden Zimplit CMS Handleiding Zimplit is een CMS (content

Nadere informatie

Webs.hogent.be Persoonlijke home/webdirectory voor personeel en studenten

Webs.hogent.be Persoonlijke home/webdirectory voor personeel en studenten Webs.hogent.be Persoonlijke home/webdirectory voor personeel en studenten Inleiding Als personeelslid of student aan de beschikt u over de mogelijkheid om 100 MB aan data centraal op onze servers te plaatsen.

Nadere informatie

Gebruikershandleiding voor: Beperkte Password protectie met JavaScript

Gebruikershandleiding voor: Beperkte Password protectie met JavaScript Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login

Nadere informatie

Programmeren: Visual Basic

Programmeren: Visual Basic PETERSTUYVESANT COLLEGE INFORMATICA 2009-2010 Programmeren: Visual Basic Algemene Kennis: 01. Programmeren Programmeren is het schrijven van een computerprogramma, een concrete verzameling instructies

Nadere informatie

NVU-Workshop. Websites bouwen met Nvu. Henk Stoop - Docent Website design - HkeyDesigns - HCC WG Website design - KBO WG ICT-Adviseur

NVU-Workshop. Websites bouwen met Nvu. Henk Stoop - Docent Website design - HkeyDesigns - HCC WG Website design - KBO WG ICT-Adviseur Websites bouwen met Nvu Voorbeeld websites Hkey-Designs Manders mondhygieniste Slaapadvies Sterrenburg Werkplan Henk Stoop - Docent Website design - - HCC WG Website design - KBO WG ICT-Adviseur Workshop:

Nadere informatie

Inhoud leereenheid 1. Internet en het World Wide Web. Introductie 15. Leerkern 15. Zelftoets 26. Terugkoppeling 27

Inhoud leereenheid 1. Internet en het World Wide Web. Introductie 15. Leerkern 15. Zelftoets 26. Terugkoppeling 27 Inhoud leereenheid 1 Internet en het World Wide Web Introductie 15 Leerkern 15 1 Webapplicaties en web apps 15 2 Hoe werkt het web 17 2.1 Dubbelklikken op een HTML-bestand 17 2.2 URL in de adresbalk 17

Nadere informatie

Het beheren van mijn Tungsten Network Portal account NL 1 Manage my Tungsten Network Portal account EN 14

Het beheren van mijn Tungsten Network Portal account NL 1 Manage my Tungsten Network Portal account EN 14 QUICK GUIDE C Het beheren van mijn Tungsten Network Portal account NL 1 Manage my Tungsten Network Portal account EN 14 Version 0.9 (June 2014) Per May 2014 OB10 has changed its name to Tungsten Network

Nadere informatie

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Welkom in de wondere wereld van websites met WordPress.

Welkom in de wondere wereld van websites met WordPress. Welkom in de wondere wereld van websites met WordPress. Alsjeblieft, dit kleine WordPress woordenboekje is voor jou. Want als je voor het eerst een website met WordPress gaat maken kom je misschien woorden

Nadere informatie

WordPress in het Kort

WordPress in het Kort WordPress in het Kort Een website maken met Wordpress. In minder dan één uur online! Inclusief installatie van een thema en plugins Alle rechten 2013, Rudy Brinkman, BrinkhostDotCom, http://www.brinkhost.nl

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald

Nadere informatie

Website beoordeling zonetelechargement.com

Website beoordeling zonetelechargement.com Website beoordeling zonetelechargement.com Gegenereerd op Juli 23 2015 10:12 AM De score is 47/100 SEO Content Title zone-telechargement.com 520: Web server is returning an unknown error Lengte : 71 Let

Nadere informatie

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.6 Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Greet Verhelst 2011-2012. In het volgende scherm log je in met je gebruikersnaam of e-mailadres en paswoord.

Greet Verhelst 2011-2012. In het volgende scherm log je in met je gebruikersnaam of e-mailadres en paswoord. Greet Verhelst 2011-2012 1 Registreren Surf naar http://www.wikispaces.com Indien je reeds een wiki-member bent klik je op Sign In. In het volgende scherm log je in met je gebruikersnaam of e-mailadres

Nadere informatie

HTML voor nieuwsbrieven

HTML voor nieuwsbrieven Voorwaarden en specificaties HTML voor nieuwsbrieven HTML e mails zoals wij die versturen, voldoen aan een aantal richtlijnen voor een optimale verzending en aflevering van nieuwsbrieven. Op advies van

Nadere informatie

De mogelijkheden van XML voor de langdurige bewaring van digitale documenten. DAVID studiedag 30 nov 2000

De mogelijkheden van XML voor de langdurige bewaring van digitale documenten. DAVID studiedag 30 nov 2000 De mogelijkheden van XML voor de langdurige bewaring van digitale documenten DAVID studiedag 30 nov 2000 Prof. Jan Engelen, Steven Depuydt K.U.Leuven - ESAT Onderzoeksgroep Document Architecturen Waarom

Nadere informatie

Html: stramien en tekst

Html: stramien en tekst 1 Html: stramien en tekst De belangrijkste punten van hoofdstuk 1 X X Laat de bestandsnaam van een webpagina eindigen op.html. XX Begin een webpagina met de juiste document type declaration (doctype).

Nadere informatie

De plug-in is heel eenvoudig te installeren met een setup-programma. Waarna je een aantal menu opties in het tools menu er bij krijgt.

De plug-in is heel eenvoudig te installeren met een setup-programma. Waarna je een aantal menu opties in het tools menu er bij krijgt. Plsqldoc Genereer je documentatie Beeklaan 444 2562 BK Den Haag www.darwin-it.nl info@darwin-it.nl KvK 27283780 ING 65.35.40.663 Technical Architect Net als (vrijwel) elke ontwikkelaar vind ik het documenteren

Nadere informatie

Hoe met Windows 8 te verbinden met NDI Remote Office (NDIRO) How to connect With Windows 8 to NDI Remote Office (NDIRO

Hoe met Windows 8 te verbinden met NDI Remote Office (NDIRO) How to connect With Windows 8 to NDI Remote Office (NDIRO Handleiding/Manual Hoe met Windows 8 te verbinden met NDI Remote Office (NDIRO) How to connect With Windows 8 to NDI Remote Office (NDIRO Inhoudsopgave / Table of Contents 1 Verbinden met het gebruik van

Nadere informatie

Leeftijdcheck (NL) Age Check (EN)

Leeftijdcheck (NL) Age Check (EN) Leeftijdcheck (NL) Age Check (EN) [Type text] NL: Verkoopt u producten die niet aan jonge bezoekers verkocht mogen worden of heeft uw webwinkel andere (wettige) toelatingscriteria? De Webshophelpers.nl

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Welkom in de wondere wereld van websites met WordPress.

Welkom in de wondere wereld van websites met WordPress. Welkom in de wondere wereld van websites met WordPress. Alsjeblieft, dit kleine WordPress woordenboekje is voor jou. Want als je voor het eerst een website met WordPress gaat maken kom je misschien woorden

Nadere informatie

Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop

Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop Web Application Security Hacking Your Way In! Peter Schuler & Julien Rentrop 1 Agenda Injection Cross Site Scripting Session Hijacking Cross Site Request Forgery #1 OWASP #2 top 10 #3 #5 Bezoek www.owasp.org

Nadere informatie

WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online

WEBDESIGN. html tags. Neem de grondbeginselen van html door via de online cursus op de informaticasite of via instruct-online WEBDESIGN html tags HTML is de taal waarop internetsites gebaseerd zijn. Bij het onderdeel webdesign maken we gebruik van een van de bovenstaande webeditors die ons helpen bij het (automatisch) creëren

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

De 9lives Webdesign informatie sticky

De 9lives Webdesign informatie sticky De 9lives Webdesign informatie sticky Hoe maak ik een eigen website? Een eigen site maken kan op verschillende manieren, de ene al wat beter dan de andere. Veel gebruikers beginnen met een WYSIWYG-editor,

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Firewall van de Speedtouch 789wl volledig uitschakelen?

Firewall van de Speedtouch 789wl volledig uitschakelen? Firewall van de Speedtouch 789wl volledig uitschakelen? De firewall van de Speedtouch 789 (wl) kan niet volledig uitgeschakeld worden via de Web interface: De firewall blijft namelijk op stateful staan

Nadere informatie

Bestaat er serieus onderwijs in het maken van websites?

Bestaat er serieus onderwijs in het maken van websites? Bestaat er serieus onderwijs in het maken van websites? InGrUnDes, onderzoek naar InformationGridUnitDesign door Hans Frederik 12 april 2006 www.alexisbv.nl Agenda Vraagstelling Kaders Onderzoek Kwalificatieprofielen

Nadere informatie

Websites & Zoekmachines

Websites & Zoekmachines Zoekmachines, Wat en Hoe... 2 Wat is een Zoekmachine?... 2 Hoe werkt het?... 2 Meldt Je Site Aan... 3 Meta-data... 3 Links naar je site... 3 De grote 3... 3 Hoe aanmelden?... 3 Wachttijd na aanmelding...

Nadere informatie

Implementatie van een HTTP-server mbv sockets

Implementatie van een HTTP-server mbv sockets Implementatie van een HTTP-server mbv sockets Computernetwerken deel 2 2008-2009 Een socket is het eindpunt van een netwerkverbinding. Als tussen twee computers een TCP-verbinding wordt opgezet, kunnen

Nadere informatie

Bitrix Site Manager gebruikershandleiding BureauZuid

Bitrix Site Manager gebruikershandleiding BureauZuid Bitrix Site Manager gebruikershandleiding BureauZuid Introductie Deze gebruikershandleiding geeft gedetailleerde basisinformatie over hoe te werken met Bitrix Site Manager. Deze handleiding is bedoeld

Nadere informatie

WEB DESIGN. 2012 Excel With Business

WEB DESIGN. 2012 Excel With Business 1.0 Introductie Websites 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

Nadere informatie

Zo maak je een website! Copyright: Roel Grit, auteur Wolters-Noordhoff en Unieboek

Zo maak je een website! Copyright: Roel Grit, auteur Wolters-Noordhoff en Unieboek Website maken 1/7 Zo maak je een website! Copyright: Roel Grit, auteur Wolters-Noordhoff en Unieboek Dit document mag gratis gebruikt worden bij de volgende boeken van Roel Grit: Informatiemanagement Zo

Nadere informatie

De Kleine WordPress Handleiding

De Kleine WordPress Handleiding Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

Internet. Wat is het internet? initiatie. Senioren K.U.Leuven. Computers die met elkaar verbonden zijn, elkaar kunnen verstaan, dezelfde taal spreken,

Internet. Wat is het internet? initiatie. Senioren K.U.Leuven. Computers die met elkaar verbonden zijn, elkaar kunnen verstaan, dezelfde taal spreken, Internet initiatie Senioren K.U.Leuven maart 2008 ICT-Kantoor Dienst Administratieve informatieverwerking Wat is het internet? Computers die met elkaar verbonden zijn, elkaar kunnen verstaan, dezelfde

Nadere informatie

Technische nota AbiFire5 Rapporten maken via ODBC

Technische nota AbiFire5 Rapporten maken via ODBC Technische nota AbiFire5 Rapporten maken via ODBC Laatste revisie: 29 juli 2009 Inhoudsopgave Inleiding... 2 1 Installatie ODBC driver... 2 2 Systeeminstellingen in AbiFire5... 3 2.1 Aanmaken extern profiel...

Nadere informatie

Documentatie. InstantModules Q42. Versie 1.1

Documentatie. InstantModules Q42. Versie 1.1 Documentatie InstantModules Q42 Versie 1.1 Inhoudsopgave Inhoudsopgave... 2 Voor gebruikers... 3 InstantComment... 3 InstantTagging... 5 Voor webmasters... 9 InstantComment... 9 InstantTagging... 11 Voor

Nadere informatie

Handleiding voor Zotero versie 2.0

Handleiding voor Zotero versie 2.0 Handleiding voor Zotero versie 2.0 Michiel Wolda De handleiding voor Zetero is geschreven voor de lezers van het boek Deskresearch: Informatie selecteren, beoordelen en verwerken: tweede editie (Van Veen

Nadere informatie

IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke

IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke IcarOS maakt het mogelijk op een veilige manier bestanden en informatie online uit te wisselen. IcarOS biedt een eenvoudige en gebruiksvriendelijke interface waarmee u meteen aan de slag kan. Zonder enige

Nadere informatie

Een ASP.NET applicatie opzetten. Beginsituatie:

Een ASP.NET applicatie opzetten. Beginsituatie: Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.

Nadere informatie

Internet_html.doc 1/6

Internet_html.doc 1/6 Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).

Nadere informatie

Chapter 4. eenvoudige webserver opzetten

Chapter 4. eenvoudige webserver opzetten Chapter 4. eenvoudige webserver opzetten Table of Contents 4.1. overzicht... 44 4.2. software beheren op Linux... 44 4.3. vi... 45 4.4. html... 45 4.5. apache2... 45 4.6. twee extra websites op de apache

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

Zo kan je linken maken tussen je verschillende groepen van gegevens.

Zo kan je linken maken tussen je verschillende groepen van gegevens. 1 1. Entity Reference Entity Reference zal ook een onderdeel zijn van Drupal 8. Het is een module van het type veld. Het is een heel krachtige module die toelaat om referenties te maken tussen verschillende

Nadere informatie

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous 2006-2007 Inhoudsopgave 1 2 1.1 Programmeertaal PHP5..................... 2 1.2 MySQL database......................... 3 1.3 Adobe Flash...........................

Nadere informatie

De 3 bovenstaande worden onderhouden door mensen beheerd Dus meer kwaliteit dan machine

De 3 bovenstaande worden onderhouden door mensen beheerd Dus meer kwaliteit dan machine Internet Sheet 1 Goed zoeken - Wat, waar en hoe je moet zoeken Startpagina's - Verzamel pagina en woord onderhouden door personen. ( Redactueren ) Direcotries - Is een verzamelen pagina met structuur doormiddel

Nadere informatie

Lijst van meest gebruikte browsers van 2009: Fire Fox, Internet Explorer 6, 7 & 8, Chrome en Safari

Lijst van meest gebruikte browsers van 2009: Fire Fox, Internet Explorer 6, 7 & 8, Chrome en Safari 404 Not Found Een 404.html staat voor een pagina welke niet gevonden kan worden op de server. Hierbij wordt niet aangegeven of dit tijdelijk of permanent is. Oorzaak kan zijn dat een bepaalde pagina is

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.

Nadere informatie

WordPress Handleiding

WordPress Handleiding Algemene Informatie Disclaimer: Bij het samenstellen van dit boek is de grootst mogelijke zorg besteed aan de juistheid van de opgenomen informatie. Wij kunnen echter niet verantwoordelijk gesteld worden

Nadere informatie

beginnen met bloggen (kleine workshop Wordpress)

beginnen met bloggen (kleine workshop Wordpress) beginnen met bloggen (kleine workshop Wordpress) Een weblog is van oorsprongeen lijstje linktips met een stukje tekst. Oorspongvan het weblog Jorn Barger is an American blogger, best known as editor of

Nadere informatie

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Opdracht Dynamische Webapplicaties: HTML5

Opdracht Dynamische Webapplicaties: HTML5 INLEIDING HTML5 is sinds kort de nieuwe standaard voor het maken van webpagina s. Deze nieuwe versie van de welgekende HTML (HyperText Markup Language) biedt voor het eerst de mogelijkheid om video en

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

Introductie. Wat is HTML?

Introductie. Wat is HTML? Introductie Wat is HTML? Hypertext Markup Language (HTML) is de taal van het World Wide Web. Elk document op het web is geschreven in HTML en alle onderdelen - zoals de opmaak van documenten, koppelingen,

Nadere informatie

Veel gestelde vragen nieuwe webloginpagina

Veel gestelde vragen nieuwe webloginpagina Veel gestelde vragen nieuwe webloginpagina Op deze pagina treft u een aantal veel gestelde vragen aan over het opstarten van de nieuwe webloginpagina http://weblogin.tudelft.nl: 1. Ik krijg de melding

Nadere informatie

Nieuws & RSS in DotNetNuke

Nieuws & RSS in DotNetNuke Nieuws & RSS in DotNetNuke Intro terminologie DNN content modules Feed modules Voorbeelden Nieuws op je website Doelen Publiceren unieke eigen content (bijv. overheid) Agregatie van nieuws rondom een thema

Nadere informatie

Handleiding wordpress

Handleiding wordpress Handleiding wordpress Wordpress versie 3.0.4 Handleiding versie 1.1 Auteur Website Geert Hoekzema www.geerthoekzema.nl www.geerthoekzema.nl geert@geerthoekzema.nl 1 Inhoudsopgave Inleiding... 3 Beginnen

Nadere informatie

Mach3Framework 5.0 / Website

Mach3Framework 5.0 / Website Mach3Framework 5.0 / Website Handleiding Mach3Builders Inhoudsopgave 1 Inloggen...5 1.1 Ingelogd blijven...6 1.2 Wachtwoord vergeten...7 2 Applicatie keuzescherm...8 2.1 De beheeromgeving openen...9 3

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Website beoordeling seo.sololaki.com

Website beoordeling seo.sololaki.com Website beoordeling seo.sololaki.com Gegenereerd op Februari 19 2016 17:13 PM De score is 66/100 SEO Content Title SEO Analyzer Lengte : 12 Perfect, uw title tag bevat tussen de 10 en 70 karakters. Description

Nadere informatie

13-10-08. Presentatie Digitaal Materiaal

13-10-08. Presentatie Digitaal Materiaal 13-10-08 Presentatie Digitaal Materiaal 1. Introductie 2. Archief bestanden 3. Document bestanden 4. Internet gerelateerde bestanden 5. Beeld bestanden 6. Geluid + Bewegend Beeldmateriaal 7. Tips 1. Introductie

Nadere informatie

Handleiding Lay-outs bewerken voor LogiVert 5

Handleiding Lay-outs bewerken voor LogiVert 5 Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.

Nadere informatie

Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5. Handleiding Beheer Standaard Website

Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5. Handleiding Beheer Standaard Website Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5 Handleiding Beheer Standaard Versie Datum Opmerkingen 0.1.2 29-01-09 Note opgenomen op pagina 7 over subpagina's en weergave in menu structuur. 0.1.3 02-02-09

Nadere informatie

Handleiding Content Management Systeem

Handleiding Content Management Systeem Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne

Nadere informatie

Icoon/Icon Betekenis Description. Change scheduling Online. Gaat offline op (datum/tijd) Online. Going offline on (date/time)

Icoon/Icon Betekenis Description. Change scheduling Online. Gaat offline op (datum/tijd) Online. Going offline on (date/time) Algemeen/General Gepubliceerd maar gewijzigd Published but changed Meer acties op geselecteerde content More actions on selected content Gepubliceerd en niet gewijzigd Published and not changed Terugdraaien

Nadere informatie

WordPress Handleiding

WordPress Handleiding WordPress Handleiding Inhoud Inhoud Inleiding De voordelen van WordPress De basis van uw CMS Front-end / back-end De WYSISWYG-editor Paginabeheer Een nieuwe pagina toevoegen Een pagina te bewerken Mediabeheer

Nadere informatie

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving

Nadere informatie

Figuur 1 HTML-pagina opvragen

Figuur 1 HTML-pagina opvragen Inleiding In figuur 1 vraagt een host naar een HTML-pagina die in de Web-server is opgeslagen. De Web-server leest deze pagina van de hard disk en stuurt de desbetreffende pagina naar de host. harddisk

Nadere informatie