Laboration - Multimedia med HTML5
Sofia Berglund
Innehållsförteckning
Målsättning .......................................................................................................................................................................... 3
Teori ....................................................................................................................................................................................... 3
Material ................................................................................................................................................................................. 3
Grov beskrivning av arbetet ......................................................................................................................................... 3
Genomförande .................................................................................................................................................................... 3
Multimediaobjekt 1: video-taggen................................................................................................................................. 3
Multimediaobjekt 2: audio-taggen ................................................................................................................................ 5
Fördjupningsuppgift ........................................................................................................................................................ 7
Multimediaobjekt 3: interaktiv karta........................................................................................................................... 7
Multimediaobjekt 4: rita med SVG ................................................................................................................................. 8
Reflektion ........................................................................................................................................................................... 10
Källor .................................................................................................................................................................................... 11
Målsättning
Denna laborations utförs av studenten Sofia Berglund inom kursen Produktion av webb
och multimedia vid Umeå Universitet, vårterminen 2016. Laborationen syftar till att ge
studenten grundläggande kunskaper i hur man kan skapa multimediaobjekt med
HTML5.
Teori
Inför laborationens start har föreläsningar getts kring ämnet av Karin Fahlkvist. Wc3schools har används för att öva, innan och under laborationens gång.
Material
Denna laboration genomförs via verktyget Dreamweaver.
Grov beskrivning av arbetet
Laborationen går ut på att skapa två multimediaobjekt för G-nivå samt två extra
multimediaobjekt för VG-nivå. Tanken är att dessa objekt ska appliceras på webbsidan
för ”The Ulrikz” vilken Sofia agerar programmerare för inom kursen. I det skedet som
denna laboration lämnas in har dock kodningen av sidan inte inletts, sidan befinner sig i
ett HiFi-stadie. Detta resulterade i lösningen att HTML5-objekten i denna laboration inte
placeras i sitt slutgiltiga sammanhang, de utgör dock en webbsida med de koder som
senare kommer att användas för att få in multimedia på den slutgiltiga sidan. Utifrån
projektledarens direktiv i projektet för ”The Ulrikz” finns inga speciella riktlinjer på vad
dessa objekt bör vara, objekten har därmed skapats utifrån LoFi-prototypen samt
genom en dialog med produceraden för projektet, Alekzandra.
Avgränsning
Enligt laborationens specifikation ska denna laboration länka till de webbsidor där
objekten används. Då projektet som tidigare nämnt i nuläget är i ett HiFi-stadie är detta
därmed inte möjligt, då det inte finns någon färdig HTML-sida. Vid behov kompletteras
denna information vid ett senare skede.
Genomförande
Under denna rubrik visas tillvägagångssättet för G-nivån.
Multimediaobjekt 1: video-taggen
HTML5-elementet som infogar video var given utifrån LoFi, det första elementet blir
alltså video-taggen. Vid tidpunkt för laborationen fanns varken de rätta bilderna eller
filmerna att tillgå, så det som är inlagda är bara för test och därmed inte perfekta i
storlek. När denna kod sedan ska användas i den slutgiltiga sidan är det enkelt att byta
ut filmklipp och bilder.
Bildtext: video-rutor från LoFi
Ovan ses den tänka placeringen av videorutorna utifrån gruppens LoFi-prototyp. Denna
ligger till grund för koden i denna del av laborationen.
Bildtext: video-tag på HTML-sida
På föregående sida ses video-rutorna hämtade från denna laborations HTML-sida.
Bildtext: video-kod
Koden bygger likt bilden ovan på <video>. Inom denna sätts en höjd och en bredd på
klippet som ska spelas upp. Alla kontroller som finns automatiskt: ljud, storskärm,
spolning och play behövs och dessa får därmed ligga kvar. Enligt wc3-schools1 är mp4
det enda filformatet som stöds av samtliga webbläsare, detta väljs därmed men
kompletteras även med texten att webbläsaren inte stödjer ifall det skulle bli något fel.
En ändring sker är att poster läggs till efter controls. Detta skapar möjligheten i att lägga
en valfri stillbild som en ”poster” över videon innan användaren trycker play. Denna
kommer på den slutgiltiga webbplatsen att visa en bild från spelningen.
Koden upprepas sedan på samtliga filmer som läggs in, med ändring av hämtad fil för
film och bild.
Div med id ”liten” har satts runt <video>, denna har satts runt samtliga videos för att
styra placeringen av filmerna. I stilmall har ”liten” fått padding för att skapa mellanrum
och float:left för att de ska flyta upp brevid varandra. En klass med clear:both har satts
efter två videos för att skapa ett avbrott i hur rutorna flyter upp.
Multimediaobjekt 2: audio-taggen
På inrådan av produceraren i projektet ska ett ljudklipp ligga under headern på
startsidan, multimediaobjekt två bli därmed audio-taggen.
1
http://www.w3schools.com/html/html5_video.asp 2016-02-27 10:50
Här placeras ljud
Bildtext: tänkt placering av ljudklipp på Lo-Fi
Ovan ses den tänka placeringen av ljud på webbplatsen startsida, under headern.
Bildtext: ljudspelare i HTML-sida
Ovan ses hur ljudspelaren placerats ut på laborationens HTML-sida. En fiktiv header har
gjorts för att se till att placeringen kommer att fungera. Även ljudklippet är ett testklipp
som sedan kommer att bytas ut till den slutgiltiga sidan.
Bildtext: koden för audio-taggen
Då MP3 enligt WC3-schools2 stöds av samtliga webbläsare behövs inget annat filformat
och ljudfilen har enligt koden ovan endast infogats i mp3-format. Texten kring att
webbläsaren inte stödjer ligger dock ändå där ifall det skulle bli något strul. Taggen har
likt video-taggen kvar samtliga automatiska funktioner såsom ljudvolym och
play/pause. En modifiering har gjorts, klippet loopas. Detta ifall användaren trycker på
play, då kommer låten att spelas igen när den är klar. Detta för att ifall användaren har
klickat play har den visat att den vill lyssna, autoplay var inget alternativ då detta kan
uppfattas som störigt.
För att placera spelaren mitt under headern har div:en ”ljud” skapat en box som ljudet
ligger i. Div:en ”spelare” styr själva spelaren. I stilmallen ges ”spelare” padding och ”ljud”
ges en bredd på 100%.
Fördjupningsuppgift
Under denna rubrik skapas ytterligare två multimediaobjekt för chans till VG.
Multimediaobjekt 3: interaktiv karta
Efter diskussion med övriga projektmedlemmar bestäms det att en karta över ställen
bandet spelar på ska placeras under listan med alla turnédatum, för att ge en tydlig
överblick för användaren.
Här placeras kartan
Bildtext: placering av karta i LoFi
Ovan ses den tänkta placeringen, utifrån gruppens LoFi-prototyp.
2
http://www.w3schools.com/tags/tag_audio.asp 2016-02-26 10:47
Bildtext: karta i HTML-koden
På bilden ovan ses en testversion av slutresultatet. Då texten kring vilka de exakta
datumen för spelningarna kommer från LoFi vilken endast innefattade två spelplatser
sätts de in fler inför skapandet av den slutgiltiga sidan. Stjärnorna i kartan visar de
ställen bandet spelar på, i dagsläget Åre och Öland, dessa har placerats ut genom att
spara i Google. Kartan har sedan i ett sökläge på ”Sverige” bäddats in genom iframe likt
koden nedan.
Bildtext: inbrännande av karta via iframe
Det var första gången jag bäddade in en karta via iframe, första tanken var att använda
<embed>-taggen men iframe fungerade väldigt bra. Koden har hämtats från Googles
inbäddningsfunktion och i detta skede inte redigerats vidare då höjden och bredden
passade för denna laboration. Möjligtvis kan detta behöva justeras inför skapandet av
den slutgiltiga sidan. Inbäddande gör att kartan blir interaktiv vilket är fördelaktigt för
användaren, så att den kan zooma och dra sig runt.
Multimediaobjekt 4: rita med SVG
Det sista multimediaobjektet i denna laboration blev efter layout-överläggning med
produceraren i detta projekt något som knyter ihop sidan nertill. Lösningen blev en SVGritning.
Här placeras SVG-ritningen
Bildtext: del av komposition
Ovan ses den tänkta placeringen av objektet, på gruppens komposition. Tanken är att
sidan ska få ett tydligt slut och kännas enhetlig.
Bildtext: objekt ritat med SVG
Ovan ses ett objekt ritat i SVG placerat på laborationens HTML-sida, skapad med koden
nedan.
Bildtext: kod till SVG-ritningen
Koden inleds med att själva SVG-ytan, ritytan, får sin storlek. Därefter sätts
startpunkterna för objektet, siffor för hur rundade hörnen ska vara samt bredd och höjd
på själva objektet. Objektet fylls sedan med blå, får en linje i svart samt en opacitet på
0.3 för att inte bli för skarp. En text sätts in för att visas för webbläsare som inte stödjer
inline SVG. Detta objekt har skapats genom att testa olika värden, själva förståelsen är
hämtad från föreläsning samt wc3-schools3.
Reflektion
Jag tycker att denna laboration var lärorik. Någon som kändes väldigt svårt var att den
skulle skickas in samma dag som HiFi, när kodningen alltså inte börjat ännu, medan det i
labb-specifikationen stod att man skulle ”hänvisa till webbsidorna”.
En annan svårighet var att jag vid ett flertal tillfällen påpekat för min projektledare att
jag vill ha VG och därmed vill kunna sätta in fyra multimediaobjekt på sidan, så att
planeringen och kraven bör stödja detta. Detta är tyvärr något som ignorerats vilket lett
till att jag vid denna laboration fått kontakta gruppmedlemmarna, och förhandlat in
objekt. Detta hade varit roligare ifall jag via kravspecifikationen fått styrning kring detta.
Jag tycker även att det var svårt att bedöma exakt vad som räknas som HTML5
multimedia samt vilken svårighetsnivå det bör vara på objekten. Jag har tagit objekt jag
tycker passar på sidan, det passade inte att lägga in större saker såsom ett spel eller
exempelvis en boll som rullar in. Min förhoppning är att dessa objekt är tillräckligt.
Avslutningsvis konstaterar jag att det finns väldigt mycket att göra i HTML5 gällande
multimedia. Även ifall jag på denna sida bara använt en del har detta ändå gett en vidare
förståelse för vad man kan göra.
3
http://www.w3schools.com/html/html5_svg.asp 2016-02-27 10:35
Källor
http://www.w3schools.com/tags/tag_audio.asp Hämtad: 2016-02-26 10:47
http://www.w3schools.com/html/html5_svg.asp Hämtad: 2016-02-27 10:35
http://www.w3schools.com/html/html5_video.asp Hämtad: 2016-02-27 10:50
