Perdorimi i Multimedias ne Web

Slides:



Advertisements
Similar presentations
What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
Advertisements

Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets.
CNIT 132 – Week 9 Multimedia. Working with Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each.
INF Web Design Using Multimedia on the Web Video - Part 1.
XP 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial 8.
Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
Using HTML 5.  HTML 5 uses a standard method to embed audio into Web pages.  Prior to HTML 5, browser plug-ins or separate applications such as Windows.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
Contents MULTIMEDIA –Audio –Video –Animation –PDF.
XP Tutorial 8New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and.
Algjebra Relacionale & SQL
HTML 5 Tutorial Chapter 3 Video. Video HTML 5.0 provides a standard for showing video. Using the element we can easily embed video within our web page.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
HTML Structure & syntax
Chapter 2 Markup Language By : Madam Hazwani binti Rahmat
HTML Advanced: HTML 5 With Adaptations by Dilvan Moreira.
Using Multimedia on the Web
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Chapter 9 HTML 5 Video and Audio
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
HTML Advanced: HTML 5.
Chapter 4: HTML5 Media - <video> & <audio>
Audio and Video on the Web
Learn HTML Basics Lesson No : 10
Web Design and Development
Lenda : Kontabiliteti Financiar
SHMU-2 VUSHTRRI Punim Seminarik Lënda:Informatikë Tema:Kartela Grafike
JavaScript Leksion 4.
Arkitektura baze e aplikacioneve web Hyrje ne PHP
Playing Audio (Part 2).
Fletet e Stiluara ne Kaskade (Cascading Style Sheets - CSS)
Audio and Video Chapter 10.
Abetarja e Web-it, HTML Leksion 1.
TIK 12 – Prof. Blerand Koshi
Marrja e te inputit te perdoruesit
Essentials of Web Pages
Android.
Funksionet ne PHP PhD, MS, Under Leksion 8.
HTML5 Media.
Client-Side Internet and Web Programming
Insertimi i audiove/videove
Formatet e skedareve grafike dhe teknikat e kompresimit
TIK 12 – Prof. Blerand Koshi
Vendosja e prapavijes (Background)
Punoi:RREZON MIKULLOVCI
JavaScript Leksion 8.
Universiteti AAB Programi: PSIKOLOGJI STATISTIKE T-testi Për grupet e pavarura Për grupet e varura Dr.sc. Merita Shala.
Basic HTML and Embed Codes
Menaxhimi i perdoruesve dhe grupeve
SH-M-U-2 Kl.9/4 Valon Ibishi Lënda:Informatikë Tema:Programi Excel Arsimtar:Muhamer Ujkani Vushtrri,2014.
Variablat dhe Funksionet
I Love my family!!!.
Working with Multimedia
Perpunimi i stringjeve
SH.M.U 2 Vushtrri Sistemet operative te Winows XP Muhamer Ujkani
Format ne HTML/XHTML Leksion Jan-19.
Targetimi i elementeve specifike
Degëzimet.
Pertemuan 1b
TIK 12 – Prof. Blerand Koshi
TIK 11 – Prof. Blerand Koshi
Pertemuan 1 Desain web Pertemuan 1
TIK 12 – Prof. Blerand Koshi
Portet e kompjuterit Erza Ajeti IX-2
Hyperlinks, Images, Comments, and More…
SMART TOURISM ENHACEMENT PROJECT
Presentation transcript:

Perdorimi i Multimedias ne Web Leksion 6

Imazhet dhe Multimedia ne Web Aftesia per te perfshire imazhet dhe forma te tjera te multimedias ka ndihmuar ne rritjen e popullaritetit te Web-it. Skedaret e imazheve dhe te multimedias jane shume me te medhenj se skedaret HTML dhe kerkojne me teper kohe per t’u download-uar ne browser. Perpara se te shtohen imazhe dhe skedare te tjere te multimedias ne nje website, duhet te dini cila eshte audienca e sitit dhe se si e aksesojne ata internetin. Per shembull, nje site qe aksesohet nga perdorues te pajisjeve wireless, si psh telefona celulare, nuk duhet te permbajne shume skedare grafike per arsye te shpejtesise se ulet te lidhjes dhe hapesires se vogel te pamjes ne ekran.

Elementi <img> Elementi <img> ne HTML perdoret per te shtuar imazhe ne dokumentet HTML Elementi <img> eshte nje tag bosh. Dy atribute qe kerkohen te perdoren jane: src – Percakton pathin e skedarit te imazhit – ky path mund te jete absolut ose relativ. alt – Percakton nje tekst qe do te shfaqet ne vend te imazhit, nese browseri nuk mund t’i shfaqe imazhet. <img src="myimage.gif" alt="Alternate text for my image" />

Krijimi i linqeve me imazhe Per te perdorur elementin <img> si nje link: Vendoseni tagun <img> brenda nje tagu <a> <a href=”newpage.html”> <img src=”myimage.gif” alt=”Click on this image” /> </a> Web browser-at vendosin vete nje kornize blu rreth imazhit per ta identifikuar ate si nje objekt te klikueshem. Per ta hequr kete kornize blu, mund te perdorni elementin <style>: <style type="text/css"> img { border: none; } </style>

Shembull <html> <head> <title>Sample Image as a Link</title> </head> <body> <p> This Web page contains a linked image file: </p> <a href="newpage.html"> <img src="rose.bmp" alt="Click here" width="96" height="96"/> </a> <p>Isn't this fun?</p> </body> </html>

Shembull – Web Browser

Puna me Multimedian Bandwidth (gjeresia e kanalit) eshte nje mase e sasise se te dhenave qe mund te dergohen permes nje kanali komunikimi ne çdo sekonde. Gjeresia e kanalit duhet te merret ne konsiderate kur punojme me multimedia ne nje Web site. Multimedia mund te shtohet ne nje faqe Web ne dy menyra te ndryshme: Media e jashtme (External media) eshte nje file audio ose video qe mund te aksesohet nepermjet nje linku. Kjo menyre eshte e pershtatshme per nje gjeresi kanali te vogel Media e brendeshme (Inline media) vendoset brenda nje faqeje Web si nje objekt i ngulitur (embedded object)

Puna me Multimedian Inline media External media

Lidhja me nje klip Audio Shtimi i linqeve per klipe audio

Ngulitja (embedding) i nje klipi Audio Nje objekt i ngulitur (embedded object) eshte nje klip media, skedar, program, ose objekt tjeter qe mund te ekzekutohet ose te shihet nga brenda nje faqeje web. Browserat kane nevoje per plug-in-et e pershtatshem ne menyre qe te ekzekutojne objektet e ngulitura.

Ngulitja e nje klipi Audio Per te ngulitur nje klip audio ose video, perdorni elementin embed: <embed src=“url” width=“value” height=“value” autostart=“type” /> Ku url eshte vendndodhja e objektit, atributet width dhe height percaktojne gjeresine dhe gjatesine e objektit ne pixel, dhe type eshte ose true (per te filluar te luhet nje klip automatikisht kur ngarkohet faqja) ose false (per te filluar klipin manualisht).

Lidhja me nje klip Video Ndiqet e njejta procedure si ajo per t’u lidhur me nje klip audio. Kujdes: Duhet te perfshini informacion rreth madhesise se secilit skedar video, ne menyre qe perdoruesit te mund te vendosin nese duan ta marrin klipin apo jo.

Ngulitja e nje klipi Video Perdorni te njejtin element embed siç e perdoret per te ngulitur nje klip audio. Ketu duhet te percaktoni nje burim per nje klip video me ane te atributit src dhe permasat e klipit me atributet height dhe width

Mos-Suportimi i elementeve te ngulitur Nese deshironi te suportoni browsera me te vjeter mund te perdorni elementin noembed Ky element siguron nje menyre per te suportuar browsera te vjeter qe nuk njohin elementet e ngulitur.

Mos-Suportimi i elementeve te ngulitur Per te siguruar nje permbajtje tjeter ne vend te objekteve te ngulitur, per browserat qe nuk i suportojne ato, perdorni kodin: <embed attributes /> <noembed> alternate content </noembed> ku alternate content eshte permbajtja qe shfaqet nga browsera qe nuk i suportojne objektet e ngulitur.

Krijimi i nje Marquee (tende) me Internet Explorer Per te krijuar nje kuti me tekst qe leviz, mund te perdorni elementin marquee <marquee attributes>content</marquee> Ku attributes eshte nje ose disa nga atributet e elementit marquee dhe content eshte permbajtja e faqes, teksti qe shfaqet ne kutine marquee.

Puna me elementin Object Elementi object eshte elementi i pergjithshem per çdo objekt, permbajtja e te cilit ruhet ne nje skedar te veçuar nga faqja Web aktuale: Imazhe te brendshme Klipe audio Klipe video Aplete programi Dokumente te tjere HTML

HTML5: Video Deri tani, nuk ka pasur nje standart per shfaqjen e videove ne nje faqe web. Sot, shumica e videove shfaqen nepermjet nje plugin-i (si Flash). Megjithate, jo te gjithe browserat kane te njejtet plugine. HTML5 percakton nje menyre standarte per te perfshire videot, duke perdorur elementin video.

Aktualisht, ka 3 formate video qe suportohen per elementin video: HTML5: Video Aktualisht, ka 3 formate video qe suportohen per elementin video:

HTML5: Video <!DOCTYPE HTML> <html> <body> <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> </body> </html>

HTML5: Video Shembulli perdor nje skedar Ogg, dhe do te punoje ne Firefox, Opera dhe Chrome. Per te bere qe video te punoje ne Safari dhe versione te ardheshme te Chrome, duhet te shtojme nje skedar MPEG4 dhe WebM. Elementi video lejon qe te vendosen disa skedare video te ndryshem si source, me ane te elementit source. Browseri do te perdore formatin e pare qe njeh:

HTML5: Video <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>

HTML5: Video

HTML5: Audio Deri tani, nuk ka pasur nje standart per te luajtur audio ne nje faqe web. Sot, shumica e audiove luhen nepermjet nje plugin-i (si Flash), ashtu si videot. HTML5 percakton nje menyre standarte per te perfshire audiot, duke perdorur elementin audio. Elementi audio mund te luaje skedare me tinguj, si muzika ose rrjedha te tjera audio.

Aktualisht, ka 3 formate qe suportohen per elementin audio: HTML5: Audio Aktualisht, ka 3 formate qe suportohen per elementin audio:

HTML5: Audio <!DOCTYPE HTML> <html> <body> <audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> </body> </html>

HTML5: Audio Shembulli perdor nje skedar Ogg, dhe do te punoje ne Firefox, Opera dhe Chrome. Per te bere qe audio te punoje ne Safari, duhet te shtojme nje skedar MP3 ose Wav. Elementi audio lejon qe te vendosen disa skedare audio te ndryshem si source, me ane te elementit source. Browseri do te perdore formatin e pare qe njeh.

HTML5: Audio <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

HTML5: Audio

Keshilla te perdorimit te Multimedias Kur shtoni multimedia, perdorni nje shumellojshmeri formatesh media, ne menyre qe te gjithe perdoruesit te mund te aksesojne formatet qe ata mund te perdorin. Vendosni madhesine e skedarit ne linqet per ne skedare te medhenj, ne menyre qe t’i njoftoni perdoruesit qe perdorin lidhje me gjeresi kanali te vogel.

Keshilla te perdorimit te Multimedias Mos perdorni klipe multimedia ne faqet tuaja Web derisa te siguroheni qe perdoruesit do t’i aksesojne faqet permes nje lidhjeje me shpejtesi te larte. Mos shtoni klipe media derisa te siguroni nje metode qe perdoruesit te mund ta ndalojne luajtjen e klipeve, ose nese nje klip luhet automatikisht, duhet te luhet vetem nje here, ne menyre qe te mos bezdisen perdoruesit.

Keshilla te perdorimit te Multimedias Eshte praktike e mire qe te specifikohen dy atributet height dhe width per nje imazh, audio ose video, sepse nese vendosen ato paraprakisht, hapesira qe kerkohet per nje imazh rezervohet kur ngarkohet faqja. Po te mos vendosen keto atribute, browser nuk do dije madhesine e imazhit (apo audios ose videos) dhe ne kete menyre do te ndryshoje layout i faqes gjate ngarkimi.

Pyetje???