Dit artikel gaat verder in op het artikel "Video op je website? Zet je bestanden om naar Flash!". De vorige keer hebben we besproken hoe je je bestanden eenvoudig kunt omzetten naar Flash-bestanden, de voordelen waren onder andere het kleine formaat en de verspreiding van Flash bij internetters. In dit artikel zullen we een videospeler bespreken die (bijna) altijd zal werken, goed nieuws toch?

Met FLV player van Jeroen Wijering (inderdaad, een Nederlander ;-)) kun je je flv-videobestanden afspelen op je website, met een aantal geweldige functies!

Wat zijn dan de voordelen van deze speler?

Veel videospelers laten een zwart vlak zien totdat iemand op de play-knop klikt. Met FLV-player kun je een afbeelding tonen als de speler op standby staat, wat je bezoekers een indruk geeft wat ze kunnen verwachten van het filmpje.

Een ander voordeel is dat FLV player het bestand laadt terwijl je het filmpje bekijkt. Dat betekent dat je niet eerst superlang hoeft te wachten voordat het filmpje ingeladen is, maar dat het meteen begint.

En wat ik persoonlijk echt geweldig vind is de fullscreen-functie! Met een druk op de knop kunnen je bezoekers de online video op volledig scherm bekijken. Super toch?

Zo gebruik je FLV player!

Download FLV player hier: http://www.jeroenwijering.com/?item=JW_FLV_Player en pak het zip-bestand uit. Je ziet nu een boel bestanden, maar je hebt alleen de volgende nodig: flvplayer.swf, swfobject.js en natuurlijk je eigen videobestand en afbeelding. Kopieer deze bestanden naar je website-locatie en ga als volgt te werk:

• Open de pagina waar de video in moet komen in je html-editor.
• Plaats tussen < head> en < /head> de volgende code:

<script
type="text/javascript" src="swfobject.js"
mce_src="swfobject.js"></script>

•  Plaats vervolgens tussen < body> en < /body> op de plaats waar de video moet komen de volgende code:

<p id="player1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash
Player</a> to see this player.</p>
<script type="text/javascript">
var s1 = new SWFObject("flvplayer.swf","single","300","170","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","video.flv");
s1.addVariable("image","preview.jpg");
s1.write("player1");
</script>

•  Hernoem video.flv en preview.jpg in dit stukje code naar jouw eigen bestanden.
• Sla het bestand op.
• Upload nu alle betrokken bestanden naar je server.
• Nu kun je op je eigen website het resultaat bekijken!

Veel succes en geniet ervan! ;-)

In de serie FireFox-plugins is het nu de beurt aan 'Firebug'. Deze plugin is bedoeld voor internet-programmeurs die regelmatig moeten debuggen.

Om deze plugin te installeren, kies je uit het menu 'Extra' de optie 'Add-ons' en klik je rechtsonder op 'Extensies verkrijgen'. Je komt dan op de site van Mozilla met bovenin een zoekvenster. Typ hier 'Firebug' en klik op 'Zoeken'.

Er is een grote groene installatieknop waarmee je (vanuit FireFox) de plug-in kunt installeren. Herstart na installatie FireFox en controleer in het menu 'Extra' -> 'Firebug' of de plugin geactiveerd is.

Als mensen mij vragen om advies bij een XHTML-/CSS-probleem, grijp ik altijd meteen naar Firebug om te kijken wat ze gedaan hebben. Ik surf naar de pagina en rechts-klik op het probleem-onderdeel. Onder aan het uitklapmenu staat een optie 'Inspect Element' waarmee je de html-code en de bijbehorende CSS-code naast elkaar ziet.

Als je op een html-tag links klikt, dan zie je rechts alle CSS-code die erop van toepassing is. Het leuke is hier dat alleen de CSS getoond wordt die hoort bij de geselecteerde tag. Zelfs de CSS-code die door andere code wordt overschreven (dit is duidelijk door een streep door de code). Ook zie je meteen van welk CSS-document de code komt - dit scheelt een hoop zoekwerk en voorkomt dat je iets over het hoofd ziet.

Firebug zal waarschijnlijk ook in de smaak vallen bij javascript-programmeurs omdat Firebug de mogelijkheid biedt om de DOM te inspecteren (de boom met alle elementen waaruit een pagina bestaat). Javascript-programmeurs moeten ook beslist eens de Venkman Javascript Debugger proberen.

Net als bij 'Web Developer' kun je bij Firebug zien hoeveel ruimte een tag/block in beslag neemt. Ga gewoon met je muis over de tags in de html-weergave en het bijbehorende blok zal blauw geaccentueerd worden in de pagina-weergave.

Als je deze plugin eenmaal gebruikt, snap je niet hoe anderen zonder kunnen!

Bijna iedereen heeft er weleens mee te maken: je hebt een heleboel te vertellen op je site, maar moet je die informatie nou allemaal bij elkaar gaan plaatsen op je website? Een deel van die informatie is immers misschien alleen voor een deel van je bezoekers interessant. Wat dan fijn zou zijn, is dat een bezoeker zelf kan bepalen of hij die extra informatie wil lezen.
We hebben een handig script voor je dat je hiervoor kunt gebruiken. Je kunt in het extra venstertje gewoon wat tekst zetten of een html-pagina laten openen die je dan maakt in de maten zoals je die hebt aangegeven in het script.

Hoe ga je te werk?

1) Plaats onderstaand script tussen de < HEAD> en de < /HEAD> van je broncode:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function win() {
msg=window.open("","msg","height=200,width=200,left=80,top=80");
msg.document.write("<html><title>Windows!</title>");
msg.document.write("<body bgcolor='white' onblur=window.close()>");
msg.document.write("<center>De inhoud van het extra venstertje komt dan
hier te staan. Op deze manier kun je de bezoeker van extra informatie
voorzien.</center>");
msg.document.write("</body></html><p>");
}
// End -->
</script>

De inhoud van het extra venstertje bepaal je uiteraard zelf door de tekst "De inhoud van...." aan te passen naar je eigen tekst. Mocht je een groter venster nodig hebben dan kun je simpelweg de maten aanpassen bij 'height' en 'width'.

Als je gebruik wilt maken van een html-pagina dan moet je het volgende aanpassen: bij "window.open" zet je in plaats van ("","msg","height=200,width=200,left=80,top=80"); de code ("page.html","","height=200,width=200,left=80,top=80").

2) Plaats onderstaande code tussen de < BODY> en de < /BODY> van je broncode:

<a
href="javascript:win();" mce_href="javascript:win();"window.status=''; return

Zo'n extra venster zal niet worden geblokkeerd door een popup-blocker. Het wordt namelijk handmatig geopend doordat de bezoeker op een daarvoor bestemde link drukt. Een popup-blocker werkt dus alleen bij automatisch geopende popups.

Succes!

JP(E)G is een bestandsformaat voor grafische (fotografische) informatie dat het mogelijk maakt om beelden van hoge kwaliteit in betrekkelijk kleine bestanden te bewaren door het toepassen van compressietechniek. JPG-bestanden zijn bijvoorbeeld foto's die je maakt met je digitale camera of afbeeldingen die je op het internet vindt. Naast GIF en PNG is het een van de bekendste en meest gebruikte afbeeldingssoorten.

De naam van de JPG- of JPEG-indeling staat voor 'Joint Photographic Experts Group', de oorspron-kelijke naam van het comité dat de standaard heeft ontwikkeld.

JPG is een compressiemethode met verlies. De minder belangrijke onderdelen van de afbeelding worden verwijderd op basis van de manier waarop het menselijk oog de afbeelding waarneemt. Omdat JPG een compressiemethode met verlies is, gaan bij elke bewerking gegevens verloren. Het meest zichtbare effect is dat de kwaliteit van een afbeelding afneemt bij elke bewerking die je met een bewerkingsprogramma uitvoert.

Een JPG/JPEG-bestand is te herkennen aan de extensie '.jpg' of '.jpeg'.

Laat ik beginnen met uitleggen wat een webdirectory is. Een webdirectory is een verzameling van links, onderverdeeld in categorieën en/of subcategorieën. Zo kun je bijvoorbeeld een hoofdcategorie 'Internet' hebben met daarin een subcategorie 'browsers'. Binnen deze subcategorie staan dan links naar diverse websites gerelateerd aan internetbrowsers.

Je kunt bij de meeste directory's gratis je link toevoegen. De link kan automatisch worden toegevoegd of de link wordt pas toegevoegd na handmatige controle van de website op relevantie. De webmaster kan je vragen om een link terug te plaatsen op je eigen site. Een webdirectory is dus één van de manieren om meer bezoekers op je website te krijgen. Enkele voorbeelden van grote webdirectory's zijn:

- http://www.dmoz.org
- http://directory.google.com
- http://dir.yahoo.com

Zo'n webdirectory kun je op je eigen website zetten. Hieronder ga ik je uitleggen hoe je zo'n web-directory kunt downloaden.

Laten we eens gaan kijken naar eSyndicat directory-software. eSyndicat biedt zowel een gratis versie (eSyndiCat 1.6 Omega) als een betaalde versie aan. We gaan hier de gratis versie downloaden en installeren.

Je kunt de software downloaden via http://www.esyndicat.com/. Om de software te kunnen downloa-den, moet je je eerst registreren op de website. Hier moet je een gebruikersnaam bedenken en je email-adres opgeven. Ook moet je hier een domeinnaam ingeven en de code overtypen die je in het captcha-plaatje ziet staan. Ten slotte klik je op 'register' om de registratie te voltooien.

Je ontvangt nu een email met daarin je wachtwoord. Nu kun je inloggen en de software downloaden. Als je ingelogd bent, klik je in de menubalk op 'Downloads'. Hier staat te lezen dat je pas de software kunt downloaden als je een domeinnaam hebt toegevoegd. Dat kun je doen door op de link 'click here' in de tekst te klikken.

Vervolgens klik je op de knop 'Add Domain'. Er verschijnt een invulveld. Je vult je domeinnaam (inclusief de www.) in en klikt op de knop 'Add Domain'. In de domeinlijst onder aan de pagina verschijnt nu de versie die je moet betalen. Deze versie willen we niet gebruiken. Klik daarom in het menu in de linker zijbalk op 'Download'.

Nu zie je ook de gratis versie eSyndiCat 1.6 [Omega] staan. Klik in dezelfde regel op 'download' en sla het zip-bestand op op je harde schijf. In het vervolgartikel gaan we de software installeren en configureren. Kun je niet wachten, dan mag je gerust het een en ander al gaan uitproberen.

Tot de volgende keer!