Webdesign: HTML Tips & News


	De tweede serie HTML tips en trucs die aanvullende informatie bij het boek Webdesign & HTML in de Praktijk geven, vindt u op deze webpagina. De meest recente tips staan hier.

TIP 1 Virtual Reality ontwikkelingen
Apple is de uitvinder van de 'QuickTime Virtual Reality' beelden. Dank zij deze techniek kan een ruimtelijke weergave van een object of een omgeving in een 'filmpje' worden weergegeven. Op de speciale QuickTime VR web site van Apple vindt u diverse voorbeelden. Op een speciale 'Developers' pagina staat uitgebreide technische uitleg over het produceren van QTVR's die inline in webpagina's bekeken kunnen worden. Voorwaarde is wel dat men de 'QuickTime VR Components' in de plug-in folder van Netscape of Microsoft Internet Explorer heeft geïnstalleerd.
Overigens zijn er nog veel meer bedrijven die drie-dimensionale technieken op basis van gefotografeerde objecten ontwikkelen. Microsoft heeft voorbeelden van zijn technologie on-line staan op carpoint.msn.com . Voorwaarde is wel dat men de (recent) verschenen 3.0 versie van de Internet Explorer for Windows gebruikt.
Een tweede alternatief wordt door de firma Omniview op het web gepresenteerd. Hiervoor moet men wel eerst de PhotoBuble Viewer downloaden.
De nieuwste ontwikkeling is van de OLiVR Corporation; zij bieden (net als Microsoft) de mogelijkheid om de VR-films te 'streamen'. Op hun -erg fraaie- OLiVR website vindt u meer info over het produktieproces.

TIP 2 Zoek jezelf!
De indrukwekkende AltaVista search-engine ('zoekrobot' is zo typisch Nederlands) van Digital biedt een interessante optie voor diegene die willen weten hoeveel webpagina's naar een specifieke site verwijzen. Typ in plaats van 'www.mysite.com' de URL van uw keuze in en plak deze zin in het zoek-venster van AltaVista.

link:http://www.mysite.com -host:http://www.mysite.com

Vervolgens krijgt u een inventarisatie van alle externe links naar de opgegeven URL volgens de vertrouwde opmaak van AltaVista. Het 'min'-teken is belangrijk en mag niet weggelaten worden.

TIP 3 Browser Wars
Met deze akelige typering wordt de strijd tussen Netscape en Microsoft aangeduid. De hoofdprijs is uiteraard de hegemonie op het Internet (lees World Wide Web). De wapens zijn de nieuwste 3.0 versies van respektievelijk de Navigator en de Internet Explorer. De gevolgen voor de web designers zijn ook niet misselijk; elke nieuwe beta-versie van beide programma's introduceert weer een nieuwe reeks HTML tags met bijbehorende attributen. Voor een compleet overzicht van alle nieuwe tags kan men het beste naar de websites van beide kemphanen gaan. Toch zijn er een paar die ik hier apart wil vermelden omdat ze betrekking hebben op het boek.

De <MULTICOL>-tag is een uitvinding van Netscape om eenvoudig tekstkolommen te maken. Vergelijk dat maar eens met de moeizame tabel-oplossing die tot nu toe de enige optie was voor de HTML-ers. Met een paar logische codes kan men een tekstgedeelte opdelen. Het aantal 'cols' dient opgegeven worden evenals de afstand tussen de kolommen (de 'gutter'). Deze is standaard op de waarde '10' ingesteld. Het 'width'-attribuut is een oude bekende. Een voorbeeld van de code ziet er als volgt uit:

<MULTICOL cols=2 gutter=10 width=100%> Tekst </MULTICOL>

De <SPACER>-tag maakt het mogelijk om een witruimte te definiëren. Vergelijk dit maar met de moeizame '1 x 1 pixel transparante GIF'-methode.

Een inspringer maken kan voortaan met de html-code:

<SPACER type=horizontal size=30>

Het attribuut 'type' is er in twee uitvoeringen: 'vertical' en 'horizontal'. De 'size' geeft het aantal pixels weer dat vrijgehouden wordt. De <SPACER>-tag heeft geen eind-code.

TIP 4 Browsers en marge-verschillen
Mocht u zich ook wel eens afgevraagd hebben hoe het toch komt dat een perfekt uitgelijnde webpagina op een andere computer of browser plots 'verschoven' is, dat volgt hier een verklaring. De Amerikaanse webdesigner David Siegel, bekend van de originele High Five-website, heeft ontdekt dat een aantal browsers de begin-afstanden van de afbeeldingen verschillend interpreteren. Een typisch voorbeeld is de Microsoft Internet Explorer 2.0 for Windows. Deze browser verplaatst het voorgrond-beeld 20(!) pixels neerwaarts en 10 pixels naar rechts. De oudere Windows Netscape 1.2 versie is nog erger want die verschuift het achterliggende beeld (de Background-illustratie die in de <BODY> is gedefinieerd) met 10 pixels naar links! Hierdoor verdwijnen de eerste tien pixels uit beeld. De nieuwere Netscape-browsers - 2.0 en hoger - hebben een verschuiving van 8 pixels in zowel horizontale als vertikale richting (zie bijgaande afbeelding)

Er bestaat een mogelijkheid om de 'verschuiving' te blokkeren, dit functioneert echter alleen in de Internet Explorer browser van Microsoft vanaf versie 2.0 (Windows en Macintosh). Door de attributen LEFTMARGIN en TOPMARGIN toe te voegen en een waarde '0' mee te geven, krijgt de webpagina de standaard verschuiving van 8 pixels in beide richtingen. De syntax ziet er als volgt uit:

<BODY BACKGROUND="backgr.gif" LEFTMARGIN=0 TOPMARGIN=0>

TIP 5 Digitale ActiveX certificaten
De opkomst van Microsoft's ActiveX is niet te stuiten. Deze van OLE afstammende specificatie is het antwoord van Microsoft op het Java-succes. Het interessante aan ActiveX is het enorme potentieel van deze specificatie aangezien de 'installed base' van Microsoft's programmeeromgevingen gigantisch is. Volgens een bericht van Microsoft is het straks ook mogelijk in Visual Basic (versie 5 komt deze herfst) ActiveX-en te maken.

Volgens de augustus '96 uitgave van 'The Red Herring', een must om te lezen voor iedereen die de interactie tussen de financiële en technische wereld dierbaar is, zijn er momenteel wereldwijd 1.600.000 professionele 'developers' van Visual Basic en 1.100.000 C/C++ ontwikkelaars tegenover 15.000 Java ontwikkelaars.

Opmerkelijk aan het concept is dat een ActiveX digitaal geidentificeerd kan worden door Verisign. Deze certificaten hebben als doel om de herkomst van een programma te identificeren. Ze garanderen bijvoorbeeld dat het ActiveX-programma van Jeroen Ritmeijer komt en dat het programma niet veranderd is sinds Jeroen Ritmeijer het op het net heeft gezet. Als u wilt zien welk programma hiermee bedoeld wordt, dient u naar de ActiveX pagina van Jeroen te gaan.

TIP 6 Beeld onzichtbaar inladen
Ook deze tip is gerelateerd aan ActiveX. Er bestaat namelijk een zogenaamde 'Preloader' ActiveX. Deze zorgt ervoor dat een afbeelding die op een 'volgende' webpagina staat, alvast in de cache van de computer geladen wordt. Als men vervolgens naar de pagina gaat, zal de afbeelding razendsnel weergegeven worden. Heel handig, maar hoe moet dat dan in Netscape zult u zich afvragen, want ActiveX is (vooralsnog) 'Internet Explorer-only'. Jeroen Ritmeijer kwam met de oplossing: Je kunt in Netscape een plaatje op een pagina inladen, met een breedte en hoogte van 1, zodat het wel geladen wordt, maar niet zichtbaar is. Als je dan verwijst naar een plaatje op de volgende pagina staat het er in één keer. De HTML-code ziet er als volgt uit

<IMG src="plaatje" border=0 width=1 height=1>

Het bewijs? Bekijk maar eens hoe snel deze GIF-animatie ingelezen is...

TIP 7 TrueType versus PostScript fonts
De controverse tussen de TrueType en de PostScript fonts is door het Web weer aktueel geworden. De reden: de leesbaarheid van letters. Menigeen realiseert zich niet dat de juiste instelling van de 'Preferences' in de browsersoftware een belangrijke factor is voor plezierig websurfen. In de praktijk blijkt ook dat TrueType lettertypen veel beter geschikt zijn voor (beeld)schermweergave dan de PostScript fonts.

Microsoft, de 'beschermheer' van TrueType-lettertypen helpt de acceptatie van deze fontstandaard door online gratis fonts beschikbaar te stellen op zijn website. De lettertypen Arial, Times New Roman, Comic Sans en Courier maken deel uit van een 'webfont-pack' die in aparte Windows en Macintosh-versies beschikbaar zijn.

Persoonlijk zweer ik echter bij het lettertype 'New Century Schoolbook' van Adobe. Dit font heeft een schitterende schermweergave en drukt ook fraai af.

TIP 8 Targets en vensters
Een simpele toevoeging aan een hyperlink zorgt ervoor dat de webbrowser gedwongen wordt om de 'gelinkte' pagina in een apart, nieuw te openen venster te tonen. De syntax is heel eenvoudig; voeg het attribuut TARGET="mm_window" toe aan de hyperlink-code. Een voorbeeld link ziet er dan zo uit:

<A TARGET="mm_window" HREF="http://www.kentie.com>Take me home</A>

TIP 9 Search-engines helpen
De droom van elke webdesigner is natuurlijk om nummer 1 te zijn als men naar een relevant steekwoord zoekt bij de bekende search-engines van AltaVista, Lycos, Hotbot, Excite en Webcrawler. Deze websites heten niet voor niets 'search-engines'; ze zoeken automatisch het hele web af op zoek naar relevante steekwoorden en onderwerpen.

U kunt de search-engines een handje helpen door tussen de <HEAD> en </HEAD> een zogenaamde 'Meta'-beschrijving van de web-pagina of site op te nemen. Om de scoringskans van deze website te verhogen heb ik op de homepage de volgende meta-teksten opgenomen. Een beschrijving (description) in woorden en een opsomming van steekwoorden (keywords) waarnaar gezocht zou kunnen worden.

<META Name="description" Content="Web design web site! A website which shows the graphic designs, tips & tricks and hyperlinks depicted in the Dutch book 'Webdesign & HTML in de Praktijk'.">

<META Name="keywords" CONTENT="webpage design, website design, www design, java, shockwave, HTML, GIF animation, graphic design, java script, www content">

En vergeet ook niet om een goede 'titel' aan de homepage te geven, aangezien die tekst in de 'bookmarks'-lijst terehtkomt.

TIP 10 Aandacht trekken met GIF animatie

Bij de eerste aflevering van de Webdesign tips & trucs is veel aandacht besteed aan GIF Animatie-technieken. Met behulp van de programma's GifBuilder voor de Macintosh of GIF Construction Set voor Windows kan men GIF-animaties maken.
Voor het maken van 'advertising-banners' is deze techniek uitermate geschikt. Op succesvolle Amerikaanse websites, zoals de ultieme Internet nieuwsbron C|Net, staan sponsorvermeldingen van diverse makelij. Deze zogenaamde 'banners' zijn meestal 460 x 55 pixels groot. Door een animatie-element aan de tekening toe te voegen zal de online-lezer, die meestal niet zo geinteresseerd is in al die extra plaatjes, toch de informatie tot zich nemen. Voorwaarde is wel dat de GIF-animatie enige creativiteit uitstraalt. De illustratie die de promotie van het boek Webdesign & HTML in de Praktijk moet bevorderen verwijst naar de website van Boeknet, een informatie- en verkoop boekensite op het Web. Daar kan het boek ook on-line besteld worden door naar de auteursnaam of de titel van het werk te zoeken.