torsdag den 28. november 2013

HTML: Torsdag, individuel opgave.

Vi har fået udleveret en opgave der omhandler en mindre introduktion til HTML5. Vi har fået 2 individuelle opgaver som består af en video-afspiller og de funktioner man kan lave med den. Efter det skal vi lege med at lave et canvas.


Takket være w3schools.com har jeg fundet disse informationer som er rigtig gode at have ved hånden ved senere arbejde, da det ikke er alle filtyper der virker i alle browsere (såsom .ogg der ikke virker i IE - det kommer vi til senere).

Efter at have kigget på og ændret i
det kode vi er blevet givet (fjerne controls og autoplay, som ja, fjerner funktionerne controls og autoplay i browseren) skal vi forklare hvad 4 forskellige attributter gør. Jeg har valgt src, autoplay, loop og controls.

src: som når vi skal linke til et billede eller en baggrund kan HTML5 søge efter et link til en video. For at få video-playeren til at virke skal du udfylde feltet med en gyldig video-fil, som .ogg. Derudover er der to måder at kalde filen på, enten attributten "src" eller elementet "source". Attributten har dog prioritete over elementet og vil "overskrive" det hvis begge er til stede.

autoplay: kort fortalt sætter man videoafspilleren til at autospille når brugeren går ind på sitet med videoen. Autoplay er en boolean attribut. Derudover står der at det er anbefalet til web-koderen at bruge denne attribut istedet for at lave scripts til at starte autoplay - foruden at undgå at bruge autoplay og hellere lade brugeren selv bestemme hvornår  videoen skal afspilles.

loop: loop er også en boolean attribut der simpelthen sætter mediet (videoen i dette tilfælde) til at starte forfra når filen er færdig med at afspille. Hvis dit video-element har en "current media controller" har loop ingen funktion/er ikke aktiv.

controls: controls er også en boolean attribut. Hvis controls er til stede i koden, betyder det at web-koderen ikke har sat et færdigt control-script op og gerne selv vil definere hvad controls der skal være. Hvis controls attributten er til stede i koden vil det fremvise en user interface for brugeren når brugeren kommer ind på sitet med medie-elementet. Der er standard funktioner, såsom "start/stop", "video/medie-længde", "lydniveau" og "fullscreen". Det er muligt at ændre på, tilføje og fjerne andre funktioner.

Vi skulle teste playeren i forskellige browsere, og Internet Explorer understøtter ikke .ogg filer. Derfor er det svært at bedømme om deres medieplayer er pænere, selvom det umildbart virker fint at se på. Chrome's version er også meget simpel men føles meget stor og klodset. Personligt kunne jeg bedst lide Firefox's version, da den er simpel og transparent når du laver mouse-over.

Vores sidste selvstændige opgave bestod i at lege med "canvas" elementet. Du kan lave alle mulige former og farver med Canvas elementet, som også kan bruges til at rendere grafik, grafer og andet, meget hurtigt og direkte på hjemmesiden. Vi skulle tjekke i 3 forskellige browsere, om det virkede men også om der var nogle forskellige på den viste grafik.
I mit tilfælde: Nej. Alle browsere viste det samme og havde samme farve i de tre forskellige. Det eneste jeg stødte på var at IE, som altid, skulle brokke sig eller være bange for hele verdenen - "Jeg har blokeret dette script, vil du ha jeg viser det alligevel?" Ja tak, IE, helst. "OK SÅ" og intet problem.
Jeg kan dog læse mig frem til at der er forskelle på browserne og hvad canvas elementet kan vise endnu, og det er forståeligt da vi kun er i begyndelsen af implementeringen af html5 i alle browsere.

Ingen kommentarer:

Send en kommentar