Web Audio Video Expweb Sample

2008

Web, video, audio: webquests ontwerpen

1|Page Bart Bonamie – Geert Bonamie Canakkale Onsekiz Mart University – Universiteit Gent

INHOUDSTAFEL DEEL 1: OVER WEBQUESTS .............................................................................................................................................. 1 INLEIDING .............................................................................................................................................................................. 1 Doelstellingen ................................................................................................................................................................... 1 Voorkennis ........................................................................................................................................................................ 1 WEBQUESTS: WAT, WAAROM EN HOE ................................................................................................................................... 1 Wat? .................................................................................................................................................................................. 1 Waarom? ........................................................................................................................................................................... 1 Hoe? .................................................................................................................................................................................. 3 Een paar voorbeelden: ...................................................................................................................................................... 4 Evalueren van andere webquests ...................................................................................................................................... 5 DE STRUCTUUR VAN WEBQUESTS ........................................................................................................................................... 6 Inleiding ............................................................................................................................................................................ 6 Taak .................................................................................................................................................................................. 6 Uitwerking......................................................................................................................................................................... 6 Bronnen ............................................................................................................................................................................. 7 Evaluatie ........................................................................................................................................................................... 7 Conclusie........................................................................................................................................................................... 8 Optioneel: Lerarenpagina ................................................................................................................................................. 8 DEEL 2: HET MAKEN VAN DE WEBQUEST................................................................................................................... 9 VOORBEREIDEND WERK ....................................................................................................................................................... 10 Een strategie ................................................................................................................................................................... 10 Wat is een Website? ........................................................................................................................................................ 10 Principes van Website–navigatie .................................................................................................................................... 11 Aandachtspunten voor goed leesbare teksten ................................................................................................................. 13 AANMAKEN VAN DE SITE IN FRONTPAGE ............................................................................................................................. 15 Stap 1: Maak via de sjablonen een “Persoonlijke Website” aan.................................................................................... 15 Stap 2: Pas de namen aan van de pagina’s..................................................................................................................... 19 Stap 3: Maak bijkomende pagina’s aan en voeg ze toe aan de site ................................................................................ 23 Stap 4 (optioneel): hoe zit het met de knoppen bij websites met meerdere niveau’s? ..................................................... 25 GESTALTE GEVEN AAN DE SITE IN FRONTPAGE ................................................................................................................... 30 Invoeren van tekst ........................................................................................................................................................... 30 Invoeren van links ........................................................................................................................................................... 30 Invoeren van afbeeldingen .............................................................................................................................................. 33 Werken met Opmaakstijlen : toepassen en Aanpassen.................................................................................................... 38 AANMAKEN VAN DE SITE IN EXPRESSION WEB .................................................................................................................... 40 Stap 1: Maak via de sjablonen een “Persoonlijke Website” aan.................................................................................... 40 Stap 2: Voeg pagina’s toe en pas de namen aan ............................................................................................................. 40 Stap 3: pas de knoppen aan in de navigatierij en footer ................................................................................................. 41 Stap 4 (optioneel): Sidebar aanpassen............................................................................................................................ 42 GESTALTE GEVEN AAN DE SITE IN EXPPRESSION WEB ........................................................................................................ 43 Invoeren van tekst ........................................................................................................................................................... 43 Invoeren van links ........................................................................................................................................................... 43 Invoeren van afbeeldingen .............................................................................................................................................. 44 De kracht van CSS .......................................................................................................................................................... 45 ONLINE ZETTEN.................................................................................................................................................................... 46 De website comprimeren in een zipfile ........................................................................................................................... 46 Gratis Webhosting........................................................................................................................................................... 46 DEEL 3: WERKEN MET AUDIO– EN VIDEOBESTANDEN ........................................................................................ 51 AUDIO BEWERKEN MET AUDACITY ...................................................................................................................................... 52 Basisbegrippen digitale audio......................................................................................................................................... 52 Audacity: het opstartscherm ........................................................................................................................................... 52

B. & G. Bonamie

Basisfuncties ................................................................................................................................................................... 53 Veel Voorkomende taken ................................................................................................................................................. 58 VIDEO’S MAKEN MET WINDOWS MOVIEMAKER ................................................................................................................... 69 Voorbereiding: verzamelen materiaal ............................................................................................................................ 69 Movie Maker: importeren foto’s & ruwe montage.......................................................................................................... 71 Video–effecten toevoegen ................................................................................................................................................ 76 Video–overgangen instellen tussen twee clips ................................................................................................................ 77 Titels invoegen ................................................................................................................................................................ 79 Achtergrondmuziek of Voice–over invoegen ................................................................................................................... 82 Film afwerken ................................................................................................................................................................. 84 INTEGRATIE VAN AUDIO EN VIDEO IN DE WEBQUEST ............................................................................................................ 86 Audio in de webquest ...................................................................................................................................................... 86 Uitbreiding van de mogelijkheden: Podcasts met Odeo ................................................................................................. 88 Video in de wbequest....................................................................................................................................................... 92 Uitbreiding van de mogelijkheden: Online videos in Youtube ........................................................................................ 96 APPENDICES ........................................................................................................................................................................ 98 APPENDIX A: RUBRIEK TER EVALUATIE ............................................................................................................................... 99 APPENDIX B: INSTALLATIE VAN LAME_ENC.DLL ............................................................................................................... 102 Windows installatie ....................................................................................................................................................... 102 MacOS installatie.......................................................................................................................................................... 102

B. & G. Bonamie

AANMAKEN VAN DE SITE IN FRONTPAGE STAP 1: MAAK VIA DE SJABLONEN EEN “PERSOONLIJKE WEBSITE” AAN In deze eerste stap maken we een website aan en tonen we hoe je best de standaardteksten kunt verwijderen. 1. Ga naar Bestand > Nieuw en kies in het rechterpaneel onder “Nieuwe website” voor “meer sjablonen”.

FIG. 6 KIES IN HET RECHTERPANEEL HET TYPE DOCUMENT DAT U WIL AANMAKEN 2. Voer een locatie in waar je de site wil bewaren. In ons geval plaatsen we de website op C:\Webquest. Dubbelklik vervolgens op het type “Persoonlijke Website”.

FIG. 7 VOER EEN LOCATIE IN ...

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 16

FIG. 8 ... EN SELECTEER HET TYPE PERSOONLIJKE WEBSITE EN BEVESTIG MET OK.

3. U krijgt een aantal dialoogboxen te zien, en zonder dat u zich ook maar van iets hebt hoeven aan te trekken, wordt een kant–en–klare website aangemaakt met een startpagina en een vijftal andere pagina’s: aboutme, favorite, feedback, interest & photo. Merk het verschil op tussen het startpagina– icoon en de iconen die voor andere pagina’s worden gebruikt.

FIG. 9 DE STRUCTUUR VAN DE NET AANGEMAAKTE PERSOONLIJKE WEBSITE 4. Dubbelklik op de startpagina, index.htm zodat we kunnen zien hoe de site er eigenlijk visueel is opgemaakt. De index.html wordt in een tweede tabblad centraal op uw scherm geopend (zie Fig. 10). Merk ten andere de fijne stippellijntjes op: dit wijst erop dat de hele pagina eigenlijk is opgebouwd aan de hand van tabellen. Willen we de informatie wijzigen, of anders structureren, dan zullen we hier rekening mee moeten houden.

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 17

FIG. 10 ZO ZIET DE STARTPAGINA VAN ONZE SITE ER AANVANKELIJK UIT.

Laten we even stilstaan bij de structurele elementen die deze pagina opbouwen. Bovenaan bevindt zich een grote witte rechthoek met “Welkom op mijn website” erin: dit is de header van de site, die ook wel eens met de naam topbanner of topbar wordt aangeduid. Aan de linkerkant hebben we een kolom met een aantal knoppen: Start, Info over mezelf, Interesses, Favorieten, … Deze kolom noemen we de navigatiekolom. Centraal op het scherm, waar de inhoud van de pagina’s wordt afgebeeld, bevindt zich de body. Helemaal onderaan, maar niet zichtbaar op Fig. 10 bevindt zich de footer, met opnieuw snelkoppelingen naar de verschillende pagina’s van deze site.

Opgelet! Er kan wat verwarring ontstaan met betrekking tot de term “body”: het is immers ook een html– tag! Als je de code van een webpagina bekijkt, dan zie je dat die bestaat uit twee grote stukken: het HOOFD (aangeduid met –tags) en de BODY (aangeduid met –tags). De inhoud van de –sectie bevat allerlei rand–informatie over de webpagina in kwestie: titel, metadata, … De –sectie bevat alles wat visueel zichtbaar is op het scherm: niet enkel het centraal gelegen deel van de pagina (eveneens “body”genoemd), maar ook de header, navigatiekolom, footer, etc. . De “BODY” uit Fig. 10 die oranje is ingekleurd, verwijst naar alles wat tussen de body–tags staat en zal als dusdanig de volledige zichtbare pagina selecteren, en niet enkel het centrale deel, zoals je misschien zou verwachten!

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 18

5. Om onze startpagina van inhoud te voorzien gaan we eerst en vooral de bestaande inhoud moeten wissen. Plaats uw cursor ergens in de eerste paragraaf en klik daarna op aan de linkerbovenkant van de pagina (zie Fig. 11). Dit selecteert voor ons enkel de inhoud van het centrale schermdeel. 6. Druk op de DELETE–toets om de selectie te wissen en plaats uw cursor ergens in het centrale body–deel van de pagina (Fig. 12)

FIG. 12 VIA DELETE IS ALLE OORSPRONKELIJKE INFORMATIE GEWIST

FIG. 11 KLIK OP OM HET CENTRALE DEEL VAN DE PAGINA TE SELECTEREN.

7. We zijn klaar om alles in te voeren wat we op de startpagina van onze webquest willen. In dit geval gaan we een welkom–boodschap ingeven, al kun je natuurlijk meteen ter zake komen. Hoe je precies op een goede manier afbeeldingen invoert, dat wordt later in dit boek behandeld. Momenteel gaan we enkel pure tekst invoeren.

FIG. 13 VOER EEN WELKOMTEKST IN

Oefening Wis nu zelf de inhoud van de andere standaardpagina’s van de net aangemaakte site.

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 19

STAP 2: PAS DE NAMEN AAN VAN DE PAGINA’S In deze stap gaan we de namen van de html–pagina’s wijzigen en er tevens voor zorgen dat de knoppen in de linkernavigatiekolom en de footer worden aangepast. We gaan ook demonstreren hoe je het makkelijkst een bijkomende pagina kunt aanmaken. 1. Zorg ervoor dat u links op uw scherm het mappenoverzicht voor u hebt. Als dat niet zo is, ga dan naar Beeld > Mappenlijst, of gebruik de toetsencombinatie ALT–F1. 2. We zien op de visuele weergave van de index–pagina dat de knoppen als volgt zijn geordend: linksbovenaan de navigatiekolom zien we “Info over mezelf”, vervolgens “Interesses”, gevolgd door “Favorieten”, “Fotocollage” en tenslotte “Feedback”. Hoewel je later de volgorde van deze knoppen makkelijk kunt wijzigen, toch ligt het eigenlijk voor de hand dat we pagina’s dan ook best als volgt kunnen aanpassen. Zo verschijnen ze meteen in de juiste volgorde!

ORIGINELE

NAAM

NIEUWE NAAM

ABOUTME.HTM

INLEIDING.HTM

INTEREST.HTM

TAAK.HTM

FAVORITE.HTM

UITWERKING.HTM

PHOTO.HTM

BRONNEN.HTM

FEEDBACK.HTM

EVALUATIE.HTM

TABEL 3 PAS DE NAMEN AAN VOLGENS DIT OVERZICHT

Merk op dat we vooralsnog geen pagina “conclusie.htm” hebben. Geen nood: zo meteen tonen we aan hoe je best een pagina bijmaakt. 3. Om nu de naam van “aboutme.htm” aan te passen selecteer je de pagina in het mappenoverzicht, en druk je de functietoets F2 in. Andere manieren om hetzelfde te bereiken: een “trage dubbelklik” of rechtsklikken op de paginanaam en kiezen voor “naam wijzigen.

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 20

FIG. 14 WIJZIG DE NAAM VIA RECHTSKLIKKEN EN "NAAM WIJZIGEN" OF VIA DE FUNCTIETOETS F2

Tip Vermijd het aanmaken van pagina’s via Bestand > Nieuw > Lege pagina, of via het icoon rechtsbovenaan op de werkbalk (zie Fig. 15). Dit zal een werkelijk volledig lege pagina aanmaken, die qua layout helemaal niet overeenstemt met de rest van de website en waar je vervolgens nog alle knoppen, headers, footers,… zelf manueel zou moeten invoegen.

FIG. 15 NIEUWE PAGINA AANMAKEN? TOCH MAAR BETER NIET OP DEZE MANIER!

4. Als je klaar bent, dan zou alles er moeten uitzien zoals in Fig. 16.

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 21

FIG. 16 ALLE PAGINA'S ZIJN HERNOEMD

Dit is een noodzakelijke stap, die echter weinig visuele meerwaarde blijkt te hebben. De knoppen op de index–pagina zijn immers nog altijd bij het oude gebleven! Dat is natuurlijk juist –aan die knoppen gaan we trouwens in de volgende stap meteen iets doen–, maar dat neemt niet weg dat het altijd aan te raden valt om uw webpagina’s zo efficiënt mogelijk te benoemen. 5. De knoppen dus. Die gaan we aanpassen in de navigatieweergave van de site. Klik op het tabblad Website en vervolgens onderaan op “Navigatie” (zie Fig. 17). Rechtsklik met de cursor op de tekst “Welkom op mijn website” en vervang het door een titel naar keuze. In ons geval kiezen we kortweg voor “De Stad” (Fig. 18).

B. & G. Bonamie

2. Het maken van de webquest

Aanmaken site Frontpage

Pagina | 22

FIG. 18 DE WELKOM–BOODSCHAP IS VERVANGEN DOOR DE TITEL "DE STAD "

FIG. 17 DE INHOUD VAN DE KNOPPEN PAS JE AAN IN DE NAVIGATIEWEERGAVEN VAN DE WEBSITE

Op dezelfde manier kunnen we alle andere pagina’s in deze navigatieweergave aanpassen. Dit is waar het schema van Tabel 3 opnieuw zijn nut bewijst: had je dit niet, dan was het nu misschien moeilijk geweest om te weten hoe je precies alle pagina’s had hernoemd! Verander nu de oude labels door de nieuwe. Als je klaar bent, dan zou het er als volgt moeten uitzien.

FIG. 19 ALLE KNOPPEN ZIJN HERNOEMD.

Klik het tabblad “index.htm” aan et voilà: alle knoppen zijn netjes aangepast, en alles staat meteen in dejuiste volgorde!

B. & G. Bonamie