Andra filtyper på en webbsida

Transkript

1 Andra filtyper på en webbsida Syftet med denna text och övning är att synliggöra problemen med bristande standardisering av hantering av olika typer av mediafiler på webben och att skapa en egen testplats för denna typ av filer och problem/lösningar. Utifrån resultatet bör studenten sedan kunna bygga vidare på sin testplats, ta rätt på mer om olika filformat och sätt att skeppa dessa på webben så att det passar en målgrupp och ett syfte. I vanliga fall består en webbsida av en textfil med ändelsen.htm eller.html, några gif, jpg eller png-bilder och kanske några ytterligare textfiler i form av externa stylesheets eller script. Om man blandar in andra filtyper ökar osäkerheten om användarens webbläsare kan hantera dessa filer eller om användaren annars har lämpliga hjälpprogram installerade i sin dator. Därför har man ännu större anledning än vanligt att testa sina sidor på olika sätt om man infogar andra filtyper på sin webbsida. Tyvärr har också Internet Explorer och Netscape/Mozilla Firefox valt delvis olika metoder för att hantera olika filtyper, t.ex. vid inbäddning och uppspelning av olika mediatyper. Den här övningen går ut på att testa några olika varianter på detta. Meningen är att du lägger ut slutresultatet på din webbplats och kollar med olika webbläsare och datorer vad som fungerar och hur det fungerar, både i datorsal och hemifrån. Länka till några olika filtyper från en webbsida med hjälp av <a href>-taggen 1. Börja med att skapa ett nytt xhtml-dokument från din mall eller skriv själv om du behöver träna. 2. Skriv en lämplig rubrik t.ex. "Testa filtyper". Glöm inte att ge sidan en titel. 3. Det enklaste sättet att erbjuda en fil av vilken typ som helst är att bara länka till den. Du har antagligen redan gjort denna typ av länkar till dina övningar från introkursen. Gör annars varsin länk till 3 filer: - en Acrobat pdf-fil, - en wordfil - photoshopfil (psd-format). Skriv vid varje länk vilken typ av fil det rör sig om och hur stor filen är Välj visningsläge detaljerad lista/details för att se filstorlek. Se också till att din dator visar filändelser Medieteknik Södertörns högskola, Huddinge Anne Diedrichs, , anne.diedrichs@sh.se 1(6)

2 4. Om du inte har några färdiga filer tillverkar du snabbt några testsidor. Pdf-filen åstadkommer du genom att i valfritt program välja att "skriva ut" till Acrobat Distiller eller Adobe PDF. Spara din sida och alla filerna i en ny mapp filtyper i mappen webbrot. 5. För att spara tid senare när det blir många filer bör du undvika att ha en fil med namnet index i just mappen filtyper. Då kan du bara fylla på med filer i mappen och snabbt hitta alla genom att skriva in adressen 6. Testa i olika webbläsare vad som händer när du klickar på länkarna. Beroende på hur väl integrerat formatet är med webbläsaren kan det hända allt ifrån att filen öppnas direkt i webbläsarfönstret till att filen laddas ner till användarens dator men sen inte kan öppnas alls. Skillnaden mellan pdf-formatet och word och photoshop är bl.a. just att programmet för att läsa dessa filer är gratis nedladdningsbart. Men rent tekniskt går det ju utmärkt att skicka vad som helst som kan digitaliseras över nätet. Problemet är bara att veta eller styra vad som händer när användaren sen tar emot filen. 7. Lägg ut din sida på din publika webbplats. Glöm inte att övriga filer ska med. Du väljer själv om du vill lägga allt i samma mapp eller ordna på annat sätt. Men kopian på servern måste alltid se exakt likadan ut för att allt ska fungera. Vi fortsätter med att länka till ljud Exempelfiler finns på K: kurser eller i vår ftp-mapp på student.ktd.sh.se. Hämta alla dessa och lägg i din mapp filtyper Använd gärna andra filer om du vill. Leta t.ex. efter material på nätet som du kan använda t.ex. ljudfiler genom att söka på podsafe eller Creative Commons. OBS att allt sånt material sällan är helt fritt, utan vissa villkor är förbundna med användandet 8. Gör tre vanliga länkar till olika ljudfiler. En mp3-fil, en Real Audio (.ra) och en midifil (.mid). Spara och testa. Om användaren har flera "mediaspelare" installerade i sin dator kan användaren ofta själv styra i vilket program en viss filtyp (=filändelse) ska öppnas genom att i förväg "associera" en viss filtyp med ett visst program. (testa om du vill My Computer, tools, folder options, filetypes )( =Den här datorn, verktyg, mappalternativ, filtyper?) 9. Real Audio-filer kan "luras" att börja spela innan de är färdigladdade. Då använder man en minimal textfil med ändelsen.ram som metafil/pekarfil. Öppna en ny textfil. Skriv bara den fullständiga adressen till filen som ska spelas t.ex Spara textfilen som pekarfil.ram. Gör en ny länk från din sida till pekfilen. Spara och kolla. Jämför uppspelningen mellan att länka direkt till ra-filen eller låta länken gå till pekarfil.ram I själva verket är skolans nätverk så snabbt att du nog inte märker nån skillnad eller att det verkar tvärtom. Men det är ju det som denna övning går ut på, att upptäcka 2(6)

3 att under vissa omständigheter sker en sak, annars en helt annan Tänk på att när du väl spelat/hämtat en fil ligger den i datorns cacheminne för att spelas upp direkt nästa gång. Eftersom vi här länkar till samma fil på två olika sätt kan man behöva tömma cacheminnet för att kunna göra en likvärdig bedömning av de två sätten att länka till en realaudio-fil. I IE: välj tools, Internet options, clear history. Ev. måste du även välja temp internet files, delete files. Leta upp motsvarande funktion i övriga webbläsare. Infoga ljud på sidan t.ex. som bakgrundsljud 11. Ibland vill man att ljudet spelas upp direkt utan att man behöver klicka på en länk. Gör en ny xhtml-sida där vi provar direkt uppspelning. Skriv en rubrik på sidan t.ex. "testar att spela mp3". Det blir många testsidor så det kan vara bra att man enkelt ser vilken sida man befinner sig på. Gör också en länk från den förra sidan till den nya testsidan så du från en enda sida hittar till alla dina testsidor. 12. Ljud kan "infogas" direkt på sidan på lite olika sätt. Det finns eg. bara en enda tagg <object> som är standardiserad att använda för att infoga t.ex. ljud eller video. Men tyvärr används denna tagg inte på ett korrekt sätt av Internet Explorers äldre versioner. Därför använder man istället den av Netscape skapade <embed> eller allra helst båda i kombination! Internet explorer stödjer att spela bakgrundsljud med taggen <bgsound> men detta stöds inte av någon annan webbläsare. 13. Vi börjar med att testa embed för att få en känsla för hur det funkar. Skriv <embed src="radio.mp3" width="300" height="40"></embed>. Spara och kolla i webläsare. Höjd och bredd anger hur stor plats du ger till spelaren och dess kontroller på sidan, prova dig fram. Vid ljudfiler har man ofta låga värden för height, för att bara visa själva kontrollerna eller t.o.m. 0 pixlar för både höjd och bredd för att gömma kontrollerna helt =bakgrundsljud. Prova det. Tyvärr har den ostandardiserade taggen embed ett flertal lika ostandardiserade attribut. Prova att infoga autostart="false" och loop="true". Se till att ha kontrollerna synliga så du kan starta uppspelningen. Om du vill fördröja ljudet prova loopdelay="ms" (antal millisekunder). Infoga för övrigt embed-taggen sist på sidan om det gäller ett bakgrundsljud utan synliga kontroller. Då skrivs sidan ut även om det går långsamt att ladda ljudet. 14. Vi testar object-taggen genom att vi återanvänder html-sidan från förra övningen. Välj "Spara som ", döp filen t.ex. till testaobject.htm. Ändra rubriken, ta bort embedtaggen och skriv: <object data="colombia.mid" type="audio/midi" width="200" height="16" autostart="true"> text som visas om stöd för objecttaggen saknas </object>. Testa, bör fungera i t.ex Mozilla dock antagligen inte i Internet explorer. Eller nåt annat beroende på aktuell version Fler MIME-typer är audio/mpeg och audio/x-pn-realaudio om du vill testa att göra samma med övriga musikfiler. 3(6)

4 Infoga och länka till rörlig bild och ljud Microsoft har ändrat på object-taggen, så om den ska funka i Internet explorer så måste den skrivas på ett annat sätt. Vi lämnar ljudfilerna och provar att infoga en flashfil.swf på detta sätt. Spara din testsida under ett annat namn igen och ändra objecttaggen enligt följande (du kan klippa och klistra från filen testaflash.txt som du hittar på samma ställe som övriga filer.) <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" s/flash/swflash.cab#version=5,0,0,0" width="100" height="100"><param name="movie" value="flash.swf"> <param name="quality" value="high"> </object> 15. Flash är ett vektorbaserat format, kan du förstora visningen utan att resultatet blir taggigt? 16. Gör också en helt vanlig länk till flashfilen eller klicka på den direkt i din mapp filtyper i webbläsaren. Vektorer var det ja. 17. En snabb test att inbädda video med <embed> Vi väljer t.ex. en.avi-fil från en digitalkamera. Du ser ovan under ljudfiler hur du ska skriva embed-taggen. Tänk på att välja större yta för att se något av filmen. Antagligen blir bilden förvrängd om du inte fått till rätt mått. Prova att helt ta bort height och width, det kan ge rätt storlek? 18. Snart dags för examen i mediaskolan. Spara din sida som quicktime.htm. Vi ska följa det nuvarande rekommenderade sättet att infoga ljud eller video genom att använda både Microsofts version av object-taggen och innanför den använda den ostandardiserade embed-taggen. Även de som vill följa webbstandard måste ibland böja sig för realiteter Klipp och klistra från testaquicktime.txt men tänk efter vad du gör. Eller hämta på nätet hos Apple Hämta en.mov-fil som du kan testa med eller använd en egen. Så här ser koden ut: <object classid="clsid:02bf25d5-8c17-4b23-bc80- D3488ABDDC6B" width="320"height="256" codebase=" <param name="src" value="filnamn.mov"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed src="filnamn.mov" width="320" height="256" autoplay="true" controller="true" pluginspage=" </embed> </object> 20. I denna kod anges inte bara vilken film som ska visas och hur, utan även var webbläsaren kan hämta programvara om nödvändigt. Anpassa måtten om det behövs. Här fungerar de angivna måtten lite annorlunda, du kan inte blåsa upp 4(6)

5 filmen men väl råka beskära den om du anger för liten yta. Om du helt tar bort måtten blir resultatet olika i webbläsarna och antagligen inte bra. Prova att ändra attribut (i båda taggarna!) så filmen inte startar automatiskt. Trots att koden ser krånglig ut kan du nog leta upp var du bestämmer om filmen ska börja spela av sig själv? Ändra om du vill till "false". Obs att detta anges både i object-taggen och embed-taggen, alltså 2 gånger i ovanstående kod. För att få bra resultat (=många webbläsare fungerar) måste du alltså använda både en object-tagg och en embed-tagg, nästlade i varandra. Och object-taggen bör, för att underlätta för Internet Explorer, innehålla några mycket långa och krångliga attribut som kallas classid och codebase och har olika värden beroende på filtyp 21. Vill du bädda in en wmv-fil skriver du t.ex.: <object id="mediaplayer" width="320" height="286" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" type="application/x-oleobject" codebase=" er/en/nsmp2inf.cab#version=6,4,7,1112"> <param name="filename" value="dinfilm.wmv"> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <embed type="application/x-mplayer2" src="dinfilm.wmv" name="mediaplayer" width="320" height="286" autostart="true"></embed> 22. Resultatet är OK, fungerar kanske lite olika i olika webbläsare, men ganska många windowsdatorer visar ung. som vi tänkt oss. Och en Mac utrustad med nya videospelaren VLC? 23. Om du istället vill infoga en fil av någon annan typ så kan du leta efter classid för den filtypen på nätet. Ovanstående koder är t.ex. hämtade för Quicktime hos Apple för Flash hos Adobe Krångligt? Jaadå. Ut och leta och klipp och klistra och testa, testa, testa sen om det verkligen funkar under olika förutsättningar. Eller håll till godo med Youtube 5(6)

6 Varför överhuvudtaget bädda in och inte bara länka? 24. Skapa nu en vacker och informativ miljö på sidan runt din "filmruta". Vitsen med att bädda in filer på sidan är ju bl.a. att du själv kan bestämma filmens omgivning och inte hänvisas till att titta på en extern spelares gränssnitt. 25. Se också till att alla testsidor ligger ute på Internet så du kan titta på dem från andra datorer. Gör länkar från dagens första sida till alla dina testsidor så du enkelt hittar dem från en annan dator. Gör då också en sista länk direkt till filmen du just bäddat in med en vanlig <a href>-tagg. Kanske bör man istället för att bädda in filmen helt enkelt länka till den? Du testar och du avgör svaret. 6(6)