Wykorzystanie HTML 5 do prezentacji treści multimedialnych

(1)

Ćwiczenie nr 1:

Wykorzystanie HTML5 do prezentacji treści multimedialnych

Opracowanie: mgr inż. Karolina Marciniuk mgr inż. Karol Lisowski mgr inż. Marcin Szykulski

1. WPROWADZENIE

Celem ćwiczenia jest zapoznanie się z możliwościami oferowanymi przez standard HTML5 w zakresie prezentowania treści multimedialnych. Dotyczy to zarówno osadzania dźwięku i klipów wideo, jak i sposobów modyfikowania prezentacji kodu poprzez kaskadowe arkusze stylów CSS3 i języki skryptowe.

2. WYMAGANE UMIEJĘTNOŚCI PRZED WYKONANIEM ĆWICZENIA

W ramach przygotowania do laboratorium zalecane jest przyswojenie wiedzy zawartej w następujących źródłach. Sumienne przygotowania do ćwiczenia zapewni bezproblemowe wykonanie wymaganych zadań i pozytywną ocenę. Poniżej znajduje się spis istotnych umiejętności, a także odnośniki do miejsc gdzie znajdują się niezbędne informacje.

- Podstawowa znajomość języka HTML5(również wcześniejsze wersje standardów). Wymagana jest znajomość podstawowych znaczników HTML (<html>, <head>, <body>, <nav>, <header>,...)

- Znajomość schematów pisania arkuszy styli, metody osadzania w dokumencie html, różnice między oznaczeniem id a class ("#", ".")

- Przydatne kursy znajduje się na stronach:

 http://www.kurshtml.edu.pl/html/zielony.html

 http://www.kurshtml.edu.pl/css/przykazania_webmastera,dobre_praktyki.html  http://www.w3schools.com/html/default.asp

 http://www.w3schools.com/css/default.asp

- Podstawowa znajomość języka JavaScript i frameworku JQuery. Szczególnie w przypadku działania <canvas>

 http://learn.jquejry.com/

 http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

KATEDRA SYSTEMÓW MULTIMEDIALNYCH

LABORATORIUM

(2)

3. O HTML i CSS

HTML to język znaczników służący do opisu struktury i prezentacji różnorodnej treści w Internecie. HTML5 to piąta wersja standardu, który pierwotnie został opracowany w 1990 roku zaś w 1997 ustandaryzowano poprzednią, czwartą wersje HTML4. Motywacją do wprowadzenia HTML5 była potrzeba ujednolicenia sposobu wyświetlania plików HTML w różnych przeglądarkach oraz kwestia standardu obsługiwanego przez urządzenia mobilne.

CSS to z kolei język służący do opisu wyglądu prezentowanych treści. W miarę rozwoju wydajności komputerów osobistych i przepustowości łącza internetowego coraz większą wagę zaczęto przywiązywać do wyglądu stron. Zaczęto osadzać coraz więcej grafik, animacji i elementów multimedialnych.

Standard HTML5 dostarcza specjalnych znaczników związanych z treścią umieszczone¡ wewnątrz nich. Przykładowo są to:

-section, article: wskazują na to, że umieszczona w środku treść jest dłuższym tekstem (najczęściej wewnątrz tych znaczników zawarta jest główna część zawartości strony internetowej);

- header, footer, nav: znaczniki wewnątrz których znajduje się kod określający zawartość nagłówka, stopki oraz menu (w przypadku kilku połączonych ze sobą stron internetowych)

- video, audio: znaczniki pozwalające w prosty sposób dodawać treści multimedialne.

Dodatkowo w HTML5 możliwe jest stworzenie prostej animacji na bazie znacznika

(3)

4. Zadania do wykonania:

4.1. Dodanie spersonalizowanych znaczników

W znaczniku o id intro, należy dodać dwa dodatkowe znaczniki, każdy spersonalizowany w inny sposób. Wykorzystując funkcje w załączniku A. Dokładną specyfikacje wyglądu poda prowadzący na początku zajęć. Pamiętaj by wygląd edytować w pliku *.css

4.2. Umieszczanie treści multimedialnych na stronie internetowej

Z wykorzystaniem wcześniej wspomnianych znaczników w łatwy sposób można osadzić na stronie film lub plik dźwiękowy z prostym odtwarzaczem. Pliki dodaj w obszarach film i

music. Wymiary odtwarzaczy definiuj w *.css.

A. Wykorzystanie znacznika <video>

Szczegółowe informacje na temat użycia tego znacznika znaleźć można pod adresem http://www.w3schools.com/html/html5_video.asp. A przykładowe użycie pokazuje poniższy kod:

Your browser does not support the video tag.

</video>

B. Wykorzystanie znacznika <audio>

Szczegółowe informacje na temat użycia tego znacznika znaleźć można pod adresem http://www.w3schools.com/html/html5_audio.asp. A przykładowe użycie pokazuje poniższy kod:

Your browser does not support the audio tag.

</audio>

4.3. Animacje wewnątrz znacznika <canvas>

Na podstawie dostępnych pól strony dodaj pole extra analogicznie do info, filmy, itd. Dobierz odpowiedni kolor tła. W polu extra dodany zostanie znacznik canvas w którym należy narysować cztery kształty zadane przez prowadzącego.

Poniżej przestawiony zostanie przykład użycia. Szczegółowe wyjaśnienie znajduje się pod adresem http://www.w3schools.com/html/html5_canvas.asp. W wybranym miejscu w ciele strony umieszczamy następujący kod:

Rezultatem będzie pojawienie się bloku 300px na 250px w wybranym miejscu na stronie. Kolejnym krokiem będzie wykonanie rysunku, przykładowy prosty kod JavaScript:

(4)

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d"); ctx.fillStyle = "#00A308"; ctx.beginPath();

ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath();

ctx.fill();

</script>

Proszę zapoznać się z możliwościami prezentowania innych kształtów oraz modyfikacji ich wyglądu na wspomnianej stronie.

Wprowadzanie animacji dla rysowanych przedmiotów polega na zaprogramowaniu zmian położenia poszczególnych elementów. Najprostszy sposób prezentacji to wyświetlanie poklatkowe. Wykorzystuje się do tego celu funkcję setInterval, która powoduje cykliczne wywołanie zadanej funkcji (w tym przypadku rysującej) z wybranym odstępem czasowym.

c=document.getElementById("myCanvas"); ctx=c.getContext("2d"); return setInterval(draw, 10); } function draw() { ctx.clearRect(0,0,300,300); ctx.beginPath();

ctx.arc(x, y, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); x += dx; y += dy; } init(); </script>

4.4. Wykorzystanie JQuery, 0bsługa przycisku

W celu użycia JQuery należy dodać w nagłówku strony HTML-owej odpowiednią bibliotekę: <head> ... <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> ... </head>

Należy napisać funkcje, która spowoduje ukrycie informacji o jednym z wykonujących ćwiczenie. Kliknięcie na div spowoduje ukrycie (wybrać akcje z tabeli poniżej). Dodać przycisk wywołujący powrót diva.

(5)

Dodać dodatkowy przycisk powodujący start wcześniej stworzonej animacji.

Proste animacje:

pojawienie się: $("p1").show("fast"); znikanie: $("p2").hide( 500 ); rozsuwanie się: $("p3").slideDown( 600 );

zsuwanie się: $("p4").slideUp( 600 ); fade in: $("p5").fadeIn( 600 ); fade out: $("p6").fadeOut( 600 );

Informacje o działaniu i możliwościach: http://learn.jquery.com/effects/intro-to-effects/

4.5. Import zewnętrznych czcionek.

Coraz częściej na stronach zamieszczane są zewnętrzne czcionki. Wspomaga to znacząco wygląd i indywidualność strony. Funkcje wywołującą umieszczamy w css, podając nazwę i lokalizację plików (różne formaty dla poszczególnych przeglądarek). Kod prezentuje się następująco:

@font-face {

font-family: '{nazwa wywoławcza czcionki';

src: url('{ścieżka do formatów z rozszerzeniem}'); font-weight: normal;

font-style: normal; }

Czcionkę zastosuj w nagłówku strony.

4.6. Dodawanie grafik

Dodaj na stronie trzy fotografie, mogą być znalezione w sieci, lub te zlokalizowane w folderze img. W kodzie css znajdziesz już gotowe klasy do ich formatowania. Dodaj dodatkową transformację wywoływaną poprzez najechanie na grafikę myszką.

(6)

ZAŁĄCZNIK A Kaskadowe arkusze stylów CSS

CSS w wersji trzeciej zawiera sporo udogodnień i nowych funkcjonalności. Na laboratorium poruszone zostaje jedynie kilka wybranych, przestudiowanie pozostałych poleca się za pośrednictwem strony http://www.w3schools.com/css3/default.asp.

Zaokrąglanie rogów:

div {

background: #B5E3FF;

border: medium solid red;

border-radius: 10px 10px 10px 10px } Cień pod elementem: div { box-shadow: 5px 5px 5px #FF0000; } Cień pod tekstem: h1 { text-shadow: 5px 5px 5px #FF0000; } Transformacje 2D: przesuwanie: div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari & Chrome */

- o -transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */

}

obracanie:

div {

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari & Chrome */ - o -transform: rotate(30deg); /* Opera */

-moz-transform: rotate(30deg); /* Firefox */

}

skalowanie:

div {

transform: scale(2,4);

-ms-transform: scale(2,4); /* IE 9 */

-webkit-transform: scale(2,4); /* Safari & Chrome */ - o -transform: scale(2,4); /* Opera */

-moz-transform: scale(2,4); /* Firefox */

}

skrzywianie:

div {

transform: skew(30deg,20deg);

-ms-transform: skew(30deg,20deg);/* IE 9 */

-webkit-transform: skew(30deg,20deg);/* Safari & Chrome */

- o -transform: skew(30deg,20deg);/* Opera */ -moz-transform: skew(30deg,20deg);/* Firefox */

} macierzowa: div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); );/* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari & Chrome */

(7)

Opera */

}

Za co odpowiadają poszczególne wartości?

Animowana zmiana właściwości elementu: div { width:100px; height:100px; background:red; transition:width 2s;

-moz-transition:width 2s; Firefox */

-webkit-transition:width 2s; Safari & Chrome */

- o -transition:width 2s; /* Opera */ }

div:hover {

width:300px; }

Przydatne:

Jeżeli chcesz poćwiczyć zachowanie konkretnego elementu, bez osadzania w całej stronie skorzystaj na przykład z: jsfiddle.net lub, codepen.io . Wprowadzasz jedynie edytowane znaczniki i ich formatowanie, nie musisz osadzać css, ani js.

W praktyce, pisanie dokładnego htmla i css odchodzi już trochę w zapomnienie, często Front-End Developerzy kody piszą w Haml i SCSS, lub SASS

(Syntactically Awesome Stylesheets) wykorzystujące głownie język Ruby (ale również PHP i C). Pliki te muszą być przekonwertowane do języka widzianego przez przeglądarki czyli html, i css. SASS to przede wszystkim łatwiejsze, szybsze i bardziej logiczne

zagnieżdżanie: CSS SASS .foo p { font-size: 12px; } .foo small { font-size: 10px; } .foo small:hover { color: blue; } .foo { p { font-size: 12px; } small { font-size: 10px; &:hover { color: blue; } } } http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css