Op deze site wordt elders veel aandacht besteed aan het gebruik van MS Agent, voor het oproepen van spraaksynthese in allerlei situaties. Ook op htm of webpagina's, die je zoals altijd natuurlijk ook offline kunt gebruiken en toepassen.
Maar je kunt veel meer doen met htm en de verschillende nieuwere versies daarvan (dhtml en xml) en de programmeertaal java die ook binnen de webbrowser te gebruiken is. Je hebt daar wel een javamachine nodig, Java Runtime Environment (heb je die? check het hier).
In de toekomst draait waarschijnlijk een groot deel van onze programmatuur vanuit de toepassing, die we op dat moment vanuit internet gebruiken.
Als ik goed zou kunnen programmeren, zou ik een programma als Clicker geheel namaken binnen een webbrowser; dat is technisch mogelijk.
Maar we houden het betrekkelijk simpel.
We beginnen met een slideshow.
Tip: je bekijkt deze presentatie het beste in de schermresolutie 1024x768. Je leest hier (QuickResolution) hoe je makkelijk je beeldscherminstellingen verandert.
In de dieren slide show gebruik ik een heel scala van technieken om een pagina op te tuigen. Door verschillende technieken in verschillende combinaties te gebruiken creëer je een heleboel variaties.
variatie1: vanzelf van de ene pagina naar de volgende of niet?
Het browsen door de pagina's gaat automatisch door een slide show tag:
<META HTTP-EQUIV="Refresh" CONTENT="20;URL=p2.html">
Deze tag moet boven aan de pagina in de zogenaamde header; content bepaalt het aantal secondes dat de pagina blijft staan; url geeft de naam van de volgende pagina aan, die in dezelfde map moet staan.
Toepassing: een gesproken boek, een instructie, of als de bediening erg moeilijk gaat; er zijn allerlei situaties te bedenken, waarin dit heel handig is. Dit lijkt erg op een automatische Powerpoint show met als dit verschil dat je met webpagina's veel meer grapjes en trucjes uit kunt halen; je kunt allerlei mogelijkheden van java (een programmeertaal) gebruiken; ook de vormgeving is makkelijker zelf te bepalen. De tiny mp3 speler maakt het mogelijk het gecomprimeerde mp3 formaat te gebruiken, wat bij de al gauw grote geluidsbestanden erg belangrijk is. Tot slot zijn htm pagina's ook systeem onafhankelijk (zowel door Macs, Linux, etc.) te gebruiken.
variatie 2: laat je één, geen of meerdere geluiden horen
variatie 3: laat je geluid horen via spraaksynthese of laat je echte geluidsbestanden horen
variatie 4: welk bestandsformaat gebruik je, wav, mp3, au of welke?
Spraaksynthese gebruik ik uitgebreid in de logica quiz. Hier gaan we "echte" geluidsbestanden gebruiken.
Het valt je hopelijk op straks in de eerste olifantpagina, dat je twee geluiden hoort via verschillende codes met verschillende bestandsformaten respectievelijk wav en mp3. Je hoort eerst olifant zeggen (wav) en daarna een mp3 bestand van een brullende olifant, dat gespeeld wordt door de TinyMp3 player (zie de Mp3 Space Show voor meer hierover)
Het eerste geluid wordt opgeroepen door een embed tag:
<EMBED SRC="olifant.wav" HIDDEN="TRUE" AUTOSTART="TRUE" MASTERSOUND></EMBED>
Het commando AUTOSTART="TRUE zorgt ervoor dat het geluid direct geladen wordt en niet tegelijk klinkt met het mp3 bestand.
Op de vossenpagina laat ik door het snel achter elkaar laden van twee pagina's eerst "rode" en daarna "vos" horen met een embed tag. zo kun je nog meer geluiden achter elkaar laten laden (horen).
variatie 5: creëer je je effect met één of meerder pagina's
Op andere pagina's zoals de berenpagina kun je zelf kiezen of je een geluid wilt horen de code ziet er als volgt uit:
<EMBED SRC="bear.wav" width="144" height="70" AUTOSTART="false"
variatie 6: hoor je het geluid vanzelf of moet je het via een knop activeren?
De AUTOSTART="false" zorgt ervoor dat het geluid aangezet moet worden; dat is van belang als je meerdere geluiden tegelijk wil embedden zoals op de rode vos (5) en de tijgerpagina (10).
Je kunt ook nog kiezen of je het geluid 'één keer wil laten horen als je het aangezet hebt of dat het blijft afspelen.Code: LOOP="true" of LOOP="false".
variatie 7: hoor je het geluid éénmaal of blijft het spelen (loop)?
Je kunt met evenveel gemak een filmpje embedden zoals op de girafpagina (6); code:
<EMBED src=giraf.avi width=540 height=720 loop="false" playeveryframe="false" autoplay="true" controller="true">
variatie 8: gebruik je plaatjes, filmjes en/of tekst?
Het controller="true" betekent dat je een bedieningspaneeltje te zien krijgt waarmee je het filmpje aan en uit kunt zetten.Niet:controller="false".
variatie 9: kun je de media zelf bedienen of niet (pauzeren, herhalen, stopzetten); is er een bedieningspaneel ?
Op de leeuwenpagina laat ik twee plaatjes achter elkaar laden; de tijd dat die zichtbaar zijn en hoeveel plaatjes zijn makkelijk aan te passen.
variatie 10: laat je één visueel element op één pagina zien of meerdere op één pagina?
variatie11: tegelijk (naast of onder elkaar) of na elkaar (slideshow)?
Tot slot
Bij het bekijken van de slideshow is het mooi een full window modus te gebruiken zodat er geen afleidende adres- of taakbalken of knoppen te zien zijn. Het nadeel hiervan kan zijn dat je je als surfer enigszins gevangen voelt in het getoonde; de navigatieknoppen zijn immers niet meer te zien; bedenk dat je altijd binnen Internet Explorer het actieve venster kunt sluiten met Alt+F4.
variatie 12: wat laat je van de browser zelf zien (volledig venster)?
Code:
<script>
<!--
/*Full screen window opener script: Written by JavaScript Kit (www.javascriptkit.com) More free scripts here*/
function winopen(){
var targeturl="p1.htm"
newwin=window.open("","","scrollbars")
if (document.all){
newwin.moveTo(0,0)
newwin.resizeTo(screen.width,screen.height)
}
newwin.location=targeturl
}
//-->
</script>
Er is ook een andere fullscreen optie; deze opent zélf bij het laden van de pagina het vergrote venster. Dat kun je hier bewonderen. In dit tweede voorbeeld zit geen blauwe bovenbalk. Je kunt dit venster alleen sluiten met Alt+F4. Code:
<SCRIPT LANGUAGE="javascript">
<!--
window.open("p1.htm",
"big", "fullscreen=yes");
//-->
</SCRIPT>
Beide scripts worden onmogelijk gemaakt door een pop-up-blocker; als je er een gebruikt stel hem dan even buiten werking; vaak kan dat door de Ctrl toets ingedrukt te houden tijdens het openen van de link.
variatie 13: bouw je bedieningselementen in de webpagina zelf?
Dit slaat op de bediningselementen die je via javascripts in je pagina kunt bouwen; dit wordt hier op enkele pagina's gebruikt;over de bediening tijdens het browsen elders meer; maar het wordt ook hier toegepast; je ziet twee grijze knoppen; die doen hetzelfde als de vooruit en achteruit knop van je browser; de terug knop is met een sneltoets te bedienen: Alt+r.
Huiswerk: bekijk eens hoe ik de mogelijkheden in de komende 10 pagina's gevarieerd heb toegepast.
Nu wordt het toch wel de hoogste tijd om mijn huisvlijt eens te gaan bekijken: