Hypertext dan Multimedia - reezeki2011.files.wordpress.com · 2.Video dan Audio 3.Komputasi,...

Hypertext danMultimedia

• Merupakan dokumen nonsekuensial dan nonlinear

• Terdiri dari beberapa halaman dan ada satu set link untuk menghubungkan dengan halaman yang lain

• Biasanya terdiri dari materi statis seperti text, diagram statis dan fotograf

PengerPenger--tian tian

HyperHyper--texttext

• Contoh pembuka halaman yang seperti membaca buku yang melaju kedepan atau kebelakang halaman dan kehalaman berikut

Text / Text / Linear Linear TextText

this is textor is ithypertextonly linkscan tell




page 1 page 2 page 3 page 4


• Hypertext – Tidak hanya lurus dalam membuka halaman web

• Merupakan struktur taklinear• Terdiri blok-blok(page) dari teks (halaman)• Sambungan antara halaman-halaman

menciptakan suatu jaringan• alur mengikuti para pemakaiHyperHyper--

texttext





home

bookmark

external link





back link

Perbedaan antara linear teks dan hypertext• Linier Text

• Hypertext





page 1 page 2 page 3 page 4






home

bookmark

external link





back link

1. Animasi2. Video dan Audio3. Komputasi,

intelligence dan interaksi

Sistem Sistem HyperHyper--

texttext

• Animasi adalah istilah yang diberikan untuk penambahan gerakan untuk gambar, mem-buat mereka memindahkan dan melakukan perubahan

• Contoh animasi dalam sebuah antarmuka adalah dalam bentuk jam.


texttext1. 1.

AnimasiAnimasi

Menggunakan animasi dan Video• Berpotensial sepenuhnya dengan alat

bantu– Sangat cocok digunakan pada TV dan arcade

games• Tetapi...

– Bagaimana memanfaatkan secara penuh dari berbagai kemungkinan untuk media

– Berbeda dari antarmuka standar– Technologi ini memerlukan pengalaman yang

cukup untuk menggunakannya• Jadi,...

– Harus banyak belajar dari pembuat film,dramatis, seniman kartun, seniman-seniman, para penulis


texttext1. 1.

AnimasiAnimasi


texttext2.2.

Video Video dan dan

AudioAudio

Media didominasi menggunakan video atau audio video atau bahan sebagai bagian dari sistem hypertext apakah itu untuk pendidikan atau hiburan


texttext3.3.

KompuKompu--tasi, tasi, IntelIntel--

egensi egensi dan dan

IteraksiIteraksi

Dengan menggunakan hipermedia lebih interaktif dibandingkan dengan menggunakan hypertextContoh : sebuah teka-

teki di situs atau satu bentuk 2D rublik's kubus yang dapat bermain secara online

•Pada Komputer–Sistem Help

•Pada web–Link pada web page

•On the move–WAP

PenerapPenerap--an an

TeknoTekno--logi logi

HyperHyper--texttext

• Rapid Prototyping• Help dan Dokumentasi• Edukasi dan e-learning• Kolaborasi dan

Komunitas• E-commerce

Area Area Aplikasi Aplikasi HyperHyper--mediamedia

• Sistem hiperteks + media tambahan

• Ilustrasi-ilustrasi, foto-foto, video dan bunyi

• Links/hotspots bisa di dalam media

• Bidang dari gambar-gambar • Waktu dan lokasi-lokasi di dalam

video• Istilah yang juga digunakan utk

audio/video yang sederhana

HyperHyper--media media

merupamerupa--kankan

• Peta– Memberikan struktur secara keseluruhan– Menunjukan lokasi yang sekarang

• Rute rekomendasi– kiasan perjalanan keliling perjalanan

atau bus yang dipandu – alur linier melalui struktur tak linear

• Level acces– Ringkasan dalam progressive

• Dukungan untuk mencetak– Linearisasi untuk isi, link balik ke

awal/asal

Membuat Membuat Navigasi Navigasi

Yang Yang MudahMudah

• Mengunjungi kembali– hub and spoke’ access – click-back-click-back– Banyak halaman yang dikunjungi kembali– ‘back’ is 30% pada seluruh navigasi– Tetapi mutli langkah untuk kembali– Tanda buku dan disenangi agar dapat dikunjungi lagi

• Sambungan yang mendalam– bookmarks dan sambungan luar – yang berada

didalam site– Apakah site dapat menjelaskan sendiri? Apa itu site

? Berada dimana?

• Seperti isi roti tetapi apa kandungan di dalamnya?

• Kerangka (Frames)– Sulit untuk boomark, search and link to– Tetapi satu alasan untuk menggunakan ini (see

/e3/online/frames/)

History, History, BookBook--marks, marks,

etcetc

Teknologi WEB

• web technology (Teknologi web)

–Bagaimana teknologi web itu bekerja

• web content (isi Web)–Web static : tidak terjadi

pembaharuan gambar dan isi

–Web dynamic: adanya interaksi dan aplikasi pada web

PengerPenger--tian WEBtian WEB

Dalam Komputer Aplikasi yang instal dalam kom-puter

dilengkapi dengan sistem help CD or DVD Berdasarkan Hypermedia

Dalam Web Nyata ada dimana-manaDibanyak negara, sangat dekat dan

bebas dalam mengakses internet Tidak hanya di website, banyak aplikasi

dilengkapi dengan webbase aplikasi

TeknoTekno--logi logi PengirimaPengirima

nn

• System yang dipakai– Mobile phone, PDA dan Laptop

• Pengiriman– CD-ROM or DVD (like desktop)– cached content (e.g. AvantGo)– WiFi access points or mobile phone

networks– WAP – for mobile phone, tiny web-like

pages

• Petunjuk alamat/langsung di iklankan

TeknoTekno--logi logi PengirimaPengirima

nn

• Prototipe Cepat– Membuat langsung melalui storyboard– Mengandung interaksi links

• Help and documentation– Membiarkan isi hirarki, pencarian kata kunci

atau telusur (Browser)– Butuh waktu untuk belajar

• Apa yang anda kehendaki ketika anda menginginkan informasi

• Teknik manualnya

– kata-kata teknis yang terhubung dengan suatu definisi di suatu daftar kata

– hubungkan antara mesin dengan fotocopy yang sama

Area Area AplikasiAplikasi

eClass (formerly Classroom 2000)

an ordinary lecture?an ordinary lecture?

slides, pen marks, slides, pen marks, video are ‘captured’video are ‘captured’

... available later ... available later through web interfacethrough web interface

Protocols Protocols dandanbrowsersbrowsersWEB servers WEB servers dandan clientsclientsNetworkingNetworking

TeknoTekno--logi logi WEBWEB

the ‘web’ the ‘web’ –– protocols protocols dandanstandardstandard HTTP HTTP –– untuk membawa informasi untuk membawa informasi didi

internet internet HTML, XML HTML, XML dandan graphics formats graphics formats

untuk isiuntuk isi browsers browsers untuk melihat hasiluntuk melihat hasil……. …….

plus plugplus plug--insins changing usechanging use MenginisialMenginisialisasiisasi rreesetset PPemerintahemerintahanan, , komersilkomersil, , hiburanhiburan, ,

iklaniklan, , komunitaskomunitas challengeschallenges KKelebihan informasielebihan informasi

Dasar Dasar WEBWEB

Distribusi dalam Distribusi dalam Web Web :: Dari mesin yang berbeda yang jauh Dari mesin yang berbeda yang jauh

mengelilingi duniamengelilingi dunia Halaman di simpan dalamHalaman di simpan dalam serversservers Browsers (the clients) Browsers (the clients) meminta meminta suatusuatu

halamanhalaman Internet dapat mengirim dan Internet dapat mengirim dan

menerima halamanmenerima halaman tersebuttersebut

syuh how gtw syuh how gtw hsio i ert ag tyhsio i ert ag tyghn ty we ghtyghn ty we ghtychdi qw oatyfchdi qw oatyfwet dfla ght awet dfla ght a




web client (browser)web client (browser) web server (stores pages)web server (stores pages)

user clicks linkuser clicks linkGET /e3/authors.html HTTP/1.1GET /e3/authors.html HTTP/1.1

server sends page backserver sends page back

browser sends requestbrowser sends request

communicate with HTTPcommunicate with HTTPsyuh how gtw syuh how gtw hsio i ert ag tyhsio i ert ag tyghn ty we ghtyghn ty we ghtychdi qw oatyfchdi qw oatyfwet dfla ght awet dfla ght a

browser displays itbrowser displays it


server finds pageserver finds page

syuh how gtw syuh how gtw hsio i ert ag tyhsio i ert ag tyghn ty we ghtyghn ty we ghtychdi qw oatyfchdi qw oatyfwet dfla ght awet dfla ght a syuh how gtw syuh how gtw

hsio i ert ag tyhsio i ert ag tyghn ty we ghtyghn ty we ghtychdi qw oatyfchdi qw oatyfwet dfla ght awet dfla ght a

WEB WEB Servers Servers

dan dan ClientsClients

QoS (quality of service)QoS (quality of service) bandwidthbandwidth Berapa banyak informasi yang Berapa banyak informasi yang

disampaikan dalam satuan detikdisampaikan dalam satuan detik latencylatency Seberapa lama data dapat Seberapa lama data dapat

disampaikandisampaikan(delay)(delay) jitterjitter Konsistensi dari delayKonsistensi dari delay

reliabilityreliability Beberapa message dapat hilangBeberapa message dapat hilang

… … perlu untuk di kirim ulangperlu untuk di kirim ulang … … dapat dapat menambah waktu menambah waktu jitterjitter

connection setconnection set--upup Butuh untukButuh untuk ‘handshake’ ‘handshake’ untuk untuk startstart

NetworkNetwork

sendsend

receivereceive

timetime

bandwidthbandwidthhow muchhow much

latencylatencyhow longhow long

jitterjitterhow variablehow variable

BandBand--width, width,

Latency,Latency,dandanJitterJitter

bandwidth bandwidth waktu untukwaktu untuk menmen--downloaddownload e.g. 100K image: 1 sec e.g. 100K image: 1 sec –– broadband, 18 broadband, 18

secs secs –– 56K modem56K modem Menyimpan gambar dalam Menyimpan gambar dalam appropriate appropriate

format and sizeformat and size Menggunakan kembali gambarMenggunakan kembali gambar

connection timeconnection time Satu file besar lebik baik di pecah menjadi Satu file besar lebik baik di pecah menjadi

filefile--file file kecilkecil latency latency pikirkan tentang timbal pikirkan tentang timbal

balikbalik/feedback/feedback dapat menjadi lambatdapat menjadi lambat

Desain Desain ImplikasiImplikasi

Network delays Network delays terlalu lambatterlalu lambat ! ! Feedback Feedback –– pikirkanpikirkan:: SSesuatu esuatu yang yang telah terjaditelah terjadi AApa yang telah terjadipa yang telah terjadi Feedthrough between users:Feedthrough between users: Hardware Hardware –– tidak bisa tidak bisa

menghidari jaringanmenghidari jaringan

user interface

immediatefeedback

semantic feedback

environment

FeedFeed--back & back & FeedFeed--

throughthrough




very small screenvery small screen scrolling painful scrolling painful small ‘pages’small ‘pages’ GSM connection slow GSM connection slow big chunksbig chunks

WML (wireless markWML (wireless mark--up language)up language) content delivered in ‘stacks’ of ‘cards’content delivered in ‘stacks’ of ‘cards’ cards are the ‘pages’ the user viewscards are the ‘pages’ the user views but navigation within the stack fastbut navigation within the stack fast

errata: book says stacks of ‘notes’, cards is correcterrata: book says stacks of ‘notes’, cards is correct







server sends server sends whole stackwhole stackusing WAP using WAP

protocolprotocol













navigation within stack fastnavigation within stack fast




server stores ‘stacks’ of cardsserver stores ‘stacks’ of cards

N.B. larger screens N.B. larger screens and faster and faster connections mean connections mean WML giving way to WML giving way to small HTML pages small HTML pages







WAP WAP ––WEB on WEB on

The The PhonePhone

1.1.The message The message &&ththe e mediummedium

2.2.Text, graphics, Text, graphics, icon, movies icon, movies &&soundsound

Isi WEB Isi WEB StatisStatis

“content is king”“content is king” Biasanya dalam Biasanya dalam .com era … .com era …

the message …the message ………….………. Yang sesuai untuk pendengar,Yang sesuai untuk pendengar, tepat tepat

waktuwaktu, , dapat dipercayadapat dipercaya , …., …. Secara umum pesan harus dibaca Secara umum pesan harus dibaca !!

the medium … pada hthe medium … pada halaman alaman &&situs desainsitus desain good design good design bad designbad design

1. The 1. The Message Message

& The & The MediumMedium

text Gaya textGaya text Gaya yang biasa Gaya yang biasa ddi pakaii pakai: underline, bold, : underline, bold,

italicitalic Untuk spesifik fontUntuk spesifik font, , banyak variatif banyak variatif

berdasarkan flatformberdasarkan flatform masingmasing--masingmasing cascading style sheets (CSS) for fine cascading style sheets (CSS) for fine

controlcontrol… … Perhatikan browser lama dan Perhatikan browser lama dan

perbaharui ukuran fontperbaharui ukuran font warna …sering kali warna …sering kali di salah gudi salah gunakan! nakan!

PPosisiosisi MudahMudah .. left, right justified atau centred.. left, right justified atau centred Dirancang dengan Dirancang dengan DHTML … DHTML … tetapi tetapi

disesuaikan dengan flatformdisesuaikan dengan flatform… … screen sizescreen size

Mathematics … Mathematics … Untuk matematik memUntuk matematik mem--butuhkan font khusus danbutuhkan font khusus dan, layout, … , layout, …

2.a. Text2.a. Text

Gunakan dengan hati hatiGunakan dengan hati hati …… Ukuran fileUkuran file dan waktu download dan waktu download

harus dipertimbangkanharus dipertimbangkan Dipengaruhi oleh ukuranDipengaruhi oleh ukuran,, warnawarna dan dan

format fileformat file Backgrounds/latar belakangnyaBackgrounds/latar belakangnya

Menambah kecepatan prosesMenambah kecepatan proses caching caching –– menggunakan gambar menggunakan gambar

yang samayang sama progressive formats:progressive formats: Gambar muncul dengan resolusi rendah Gambar muncul dengan resolusi rendah

dan terlihat lebih jelasdan terlihat lebih jelas

2.b. 2.b. GraphicsGraphics

FormatFormat JPEG JPEG –– untuk fotountuk foto Menggunakan kompresi tinggi Menggunakan kompresi tinggi GIF GIF untuk gambar lebih tajamuntuk gambar lebih tajam Menggunakan kompresi lebih tinggi Menggunakan kompresi lebih tinggi PNG PNG mendukung untuk web mendukung untuk web

basesbases Pada penggunaan actionnyaPada penggunaan actionnya Animated gifsAnimated gifs untuk animasi untuk animasi

yang mudahyang mudah Image mapsImage maps untuk gambar yang untuk gambar yang

di clickdi click

JPEG quality=20JPEG quality=20

2.b. 2.b. Graphics Graphics

(ctd)(ctd)

icons On the web On the web hanya dalam hanya dalam

bentuk gambar kecilbentuk gambar kecil for bullets, decorationfor bullets, decoration or to link to other pagesor to link to other pages lots available!lots available!

design … design … Seperti halnya Seperti halnya dalam setiap antar mukadalam setiap antar muka Butuh untuk di mengertiButuh untuk di mengerti Mendesain berdasarkan koleksiMendesain berdasarkan koleksi……

Dalam perbaikanDalam perbaikan suatu tanda dari ketidak lengkapan yang suatu tanda dari ketidak lengkapan yang

tidak bisa dipisahkan dari webtidak bisa dipisahkan dari web

2.c. Icon2.c. Icon

MasalahnyaMasalahnya Ukuran danUkuran dan downloadnya downloadnya Mungkin membutuhkan Mungkin membutuhkan plugplug--insins khususkhusus Suara tidak terlalu burukSuara tidak terlalu buruk dengan compact dengan compact

formats (MIDI)formats (MIDI) streaming videostreaming video Dimainkan ketika di downloadDimainkan ketika di download Dapat digunakan untukDapat digunakan untuk ‘broadcast’ radio ‘broadcast’ radio

atau TVatau TV

(i) page(i) pageloadsloads

user’s machineuser’s machineweb serverweb server

movie playsmovie playssyuh how gtw syuh how gtw hsio i ert ag tyhsio i ert ag tyghn ty we ghtyghn ty we ghtychdi qw oatyfchdi qw oatyfwet dfla ght awet dfla ght a



(ii) user(ii) userwatcheswatches

2.d. 2.d. Movie & Movie & SoundSound

what happens wherewhat happens where technology and securitytechnology and security local interaction, searchlocal interaction, search remote & batch generationremote & batch generation dynamic contentdynamic contentIsi WEB Isi WEB

DinamisDinamis

Hal yang mempengaruhiHal yang mempengaruhiDesain arsitek Desain arsitek :: feedback feedback Melihat hasil dari yang telah Melihat hasil dari yang telah adaada

feedthroughfeedthroughMelihat hasil dari orang lainMelihat hasil dari orang lain

a.a.What What

happens happens wherewhere

Dimana terjadiDimana terjadinya nya ????clientclient applets , Flash, JavaScript & applets , Flash, JavaScript &

DHTMLDHTMLserverserverCGI scripts, Java servlets , CGI scripts, Java servlets ,

JSP, ASP, PHP, etc,JSP, ASP, PHP, etc,another machineanother machine author’s machine, database author’s machine, database

server, proxyserver, proxypeoplepeople sociosocio--technical solutionstechnical solutions

b.b.TechnoTechno--

logylogy

Untuk komputasiUntuk komputasi Kode dan data ditempatkan Kode dan data ditempatkan

pada tempat yang samapada tempat yang sama!!

MasalahMasalah yang sering terjadiyang sering terjadi Data Data –– butuh untuk di aman butuh untuk di aman

kankan Web server Web server –– butuh diaman butuh diaman

kan melalui mesinkan melalui mesin Mesin klien biasa lebih buruk Mesin klien biasa lebih buruk

tingkat keamanannytingkat keamanannyaa

b.b.TechnoTechno--

logylogy

Memperbaiki isinyaMemperbaiki isinya use Java applets, Flash, use Java applets, Flash,

JavaScript+DHTMLJavaScript+DHTML rapid feedback rapid feedback only local, no feedthroughonly local, no feedthrough Selanjutnya Selanjutnya apa yang kita harus apa yang kita harus

lakukan lagylakukan lagy ????

(i) page(i) pageloads onceloads once


script / Javascript / Javarunning in clientrunning in client




(ii) user(ii) userinteractsinteractslocallylocally

c.c.Local Local InterInter--action action

(at client)(at client)

Contoh :

… TO DO … …… TO DO … …

coin race usescoin race usesJavaScriptJavaScript

dancing histogramsdancing histogramsare a Java appletare a Java applet

Menciptakan indek yang offMenciptakan indek yang off--line line lookup cepat ketika dibutuhkanlookup cepat ketika dibutuhkan

see http://www.hcibook.com/e3/search/see http://www.hcibook.com/e3/search/

c.c.Search / Search / PencariPencari--

anan

(ii) search(ii) searchresults returnedresults returned


web page withweb page withtext field fortext field for

search wordssearch words

CGI scriptCGI scriptlooks uplooks upwords inwords inindexindex(i)(i) user fillsuser fills

field in formfield in form


index fileindex fileprepre--computedcomputed

Menjadi lambat karena banyak variasi Menjadi lambat karena banyak variasi datadata Perbaharui pusat data localPerbaharui pusat data local Secara periodik mengganti halaman dan Secara periodik mengganti halaman dan

uploadupload many technologiesmany technologies C, Java, C, Java,

HyperCard, HyperCard, Visual BasicVisual Basic

Set db = openDatabase("C:Set db = openDatabase("C:\\test.mdb");test.mdb");sql = "select Name, Address from Personnel;"sql = "select Name, Address from Personnel;"Set query = db.OpenRecordset(sql)Set query = db.OpenRecordset(sql)Open "out.html" For Output As #1Open "out.html" For Output As #1

Print #1, "<h1>Address List</h1>"Print #1, "<h1>Address List</h1>"query.MoveFirstquery.MoveFirstWhile Not query.EOFWhile Not query.EOFPrint #1, "<p>" & query("Name") & " ” & query("Address")Print #1, "<p>" & query("Name") & " ” & query("Address")query.MoveNextquery.MoveNext

WendWend

Close #1Close #1query.Closequery.Close

d.d.Batch Batch

GeneraGenera--tiontion

indexable, secureindexable, secureslower turnslower turn--aroundaround

d.d.Batch Batch

GeneraGenera--tiontion

(iii)(iii) server returnsserver returnsgeneratedgenerated

pagespages

(ii)(ii) pages copied pages copied to web server to web server

via ftpvia ftp

(i)(i) pages generated pages generated offoff--line from line from

databasedatabase

user’s machineuser’s machine web serverweb server third machinethird machine




generated generated pages pages

really ‘active’ web pages …really ‘active’ web pages … Data selalu diperbaharui dan Data selalu diperbaharui dan

siasiapp di sajikan dalam webdi sajikan dalam web presenpresentasitasi Banyak sepertiBanyak seperti: CGI, applet: CGI, applet--

JDBCJDBC updateupdate web form/interface web form/interface --> server > server

script script --> update db> update db e.g. book theatre seatse.g. book theatre seats

e.e.Isi Isi

DinamisDinamis

Hypertext dan Multimedia - reezeki2011.files.wordpress.com · 2.Video dan Audio 3.Komputasi,...

Documents

Transcript of Hypertext dan Multimedia - reezeki2011.files.wordpress.com · 2.Video dan Audio 3.Komputasi,...