Upload
dodiep
View
235
Download
1
Embed Size (px)
Citation preview
BAB - XXIHYPERTEXT, MULTIMEDIA,
THE WORLD WIDE WEB (WWW)
By. Alan Dix, Janet Finlay, By. Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Gregory D. Abowd, Russell
BealeBeale
• Membahas tentang hyperteks, multimedia dan The World Wide Web
21.1.21.1.PendahulPendahul
uanuan
• 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
21.2.21.2.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
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
page 1 page 2 page 3 page 4
this is textor is ithypertextonly linkscan tell
• 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
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
home
bookmark
external link
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
back link
Perbedaan antara linear teks dan hypertext• Linier Text
• Hypertext
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
page 1 page 2 page 3 page 4
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
home
bookmark
external link
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
this is textor is ithypertextonly linkscan tell
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.
Sistem Sistem HyperHyper--
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
Sistem Sistem HyperHyper--
texttext1. 1.
AnimasiAnimasi
Sistem Sistem HyperHyper--
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
Sistem Sistem HyperHyper--
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
• 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?
slides, pen marks, video are ‘captured’
... available later through web interface
Protocols danbrowsersWEB servers dan clientsNetworking
TeknoTekno--logi logi WEBWEB
the ‘web’ – protocols danstandard HTTP – untuk membawa informasi di
internet HTML, XML dan graphics formats
untuk isi browsers untuk melihat hasil…….
plus plug-ins changing use Menginisialisasi reset Pemerintahan, komersil, hiburan,
iklan, komunitas challenges Kelebihan informasi
Dasar Dasar WEBWEB
Distribusi dalam Web : Dari mesin yang berbeda yang jauh
mengelilingi dunia Halaman di simpan dalam servers Browsers (the clients) meminta suatu
halaman Internet dapat mengirim dan
menerima halaman tersebut
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
web client (browser) web server (stores pages)
user clicks linkGET /e3/authors.html HTTP/1.1
server sends page back
browser sends request
communicate with HTTPsyuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
browser displays it
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
server finds page
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a syuh how gtw
hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
WEB WEB Servers Servers
dan dan ClientsClients
QoS (quality of service) bandwidth
Berapa banyak informasi yang disampaikan dalam satuan detik
latency Seberapa lama data dapat disampaikan(delay)
jitter Konsistensi dari delay
reliability Beberapa message dapat hilang
… perlu untuk di kirim ulang … dapat menambah waktu jitter
connection set-up Butuh untuk ‘handshake’ untuk start
NetworkNetwork
send
receive
time
bandwidthhow much
latencyhow long
jitterhow variable
BandBand--width, width,
Latency,Latency,dandanJitterJitter
bandwidth waktu untuk men-download e.g. 100K image: 1 sec – broadband, 18 secs – 56K
modem Menyimpan gambar dalam appropriate format and size Menggunakan kembali gambar
connection time Satu file besar lebik baik di pecah menjadi file-file kecil
latency pikirkan tentang timbal balik/feedback dapat menjadi lambat
Desain Desain ImplikasiImplikasi
Network delays terlalu lambat ! Feedback – pikirkan: Sesuatu yang telah terjadi Apa yang telah terjadi Feedthrough between users: Hardware – tidak bisa
menghidari jaringan
user interface
immediatefeedback
semantic feedback
environment
FeedFeed--back & back & FeedFeed--
throughthrough
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
very small screen scrolling painful small ‘pages’ GSM connection slow big chunks
WML (wireless mark-up language) content delivered in ‘stacks’ of ‘cards’ cards are the ‘pages’ the user views but navigation within the stack fast
errata: book says stacks of ‘notes’, cards is correct
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
server sends whole stackusing WAP
protocol
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
navigation within stack fast
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
server stores ‘stacks’ of cards
N.B. larger screens and faster connections mean WML giving way to small HTML pages
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
WAP WAP ––WEB on WEB on
The The PhonePhone
1.The message &the medium
2.Text, graphics, icon, movies &sound
Isi WEB Isi WEB StatisStatis
“content is king” Biasanya dalam .com era …
the message …………. Yang sesuai untuk pendengar, tepat
waktu, dapat dipercaya , …. Secara umum pesan harus dibaca !
the medium … pada halaman &situs desain good design bad design
1. The 1. The Message Message
& The & The MediumMedium
text Gaya text
Gaya yang biasa di pakai: underline, bold, italic Untuk spesifik font, banyak variatif berdasarkan flatform
masing-masing cascading style sheets (CSS) for fine control
… Perhatikan browser lama dan perbaharui ukuran font
warna …sering kali di salah gunakan!
Posisi Mudah .. left, right justified atau centred Dirancang dengan DHTML … tetapi disesuaikan dengan
flatform… screen size
Mathematics … Untuk matematik mem-butuhkan font khusus dan, layout, …
2.a. Text2.a. Text
Gunakan dengan hati hati … Ukuran file dan waktu download
harus dipertimbangkan Dipengaruhi oleh ukuran, warna dan
format file Backgrounds/latar belakangnya
Menambah kecepatan proses caching – menggunakan gambar
yang sama progressive formats:
Gambar muncul dengan resolusi rendah dan terlihat lebih jelas
2.b. 2.b. GraphicsGraphics
Format JPEG – untuk foto Menggunakan kompresi tinggi GIF untuk gambar lebih tajam Menggunakan kompresi lebih tinggi PNG mendukung untuk web
bases Pada penggunaan actionnya Animated gifs untuk animasi
yang mudah Image maps untuk gambar yang
di click
JPEG quality=20
2.b. 2.b. Graphics Graphics
(ctd)(ctd)
icons On the web hanya dalam
bentuk gambar kecil for bullets, decoration or to link to other pages lots available!
design … Seperti halnya dalam setiap antar muka Butuh untuk di mengerti Mendesain berdasarkan koleksi…
Dalam perbaikan suatu tanda dari ketidak lengkapan yang tidak bisa
dipisahkan dari web
2.c. Icon2.c. Icon
Masalahnya Ukuran dan downloadnya Mungkin membutuhkan plug-ins khusus Suara tidak terlalu buruk dengan compact formats (MIDI)
streaming video Dimainkan ketika di download
Dapat digunakan untuk ‘broadcast’ radio atau TV
(i) pageloads
user’s machineweb server
movie playssyuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
(ii) userwatches
2.d. 2.d. Movie & Movie & SoundSound
what happens where technology and security local interaction, search remote & batch generation dynamic contentIsi WEB Isi WEB
DinamisDinamis
Hal yang mempengaruhiDesain arsitek : feedback Melihat hasil dari yang telah ada
feedthroughMelihat hasil dari orang lain
a.a.What What
happens happens wherewhere
Dimana terjadinya ??client applets , Flash, JavaScript &
DHTMLserverCGI scripts, Java servlets ,
JSP, ASP, PHP, etc,another machine author’s machine, database
server, proxypeople socio-technical solutions
b.b.TechnoTechno--
logylogy
Untuk komputasi Kode dan data ditempatkan
pada tempat yang sama!
Masalah yang sering terjadi Data – butuh untuk di aman
kan Web server – butuh diaman
kan melalui mesin Mesin klien biasa lebih buruk
tingkat keamanannya
b.b.TechnoTechno--
logylogy
Memperbaiki isinya use Java applets, Flash,
JavaScript+DHTML rapid feedback only local, no feedthrough Selanjutnya apa yang kita harus
lakukan lagy ??
(i) pageloads once
user’s machineweb server
script / Javarunning in client
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
(ii) userinteractslocally
c.c.Local Local InterInter--action action
(at client)(at client)
Contoh :
… TO DO … …
coin race usesJavaScript
dancing histogramsare a Java applet
Menciptakan indek yang off-line lookup cepat ketika dibutuhkan
see http://www.hcibook.com/e3/search/
c.c.Search / Search / PencariPencari--
anan
(ii) searchresults returned
user’s machineweb server
web page withtext field for
search words
CGI scriptlooks upwords inindex(i) user fills
field in form
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
index filepre-computed
Menjadi lambat karena banyak variasi data Perbaharui pusat data local Secara periodik mengganti halaman dan upload
many technologies C, Java,
HyperCard, Visual Basic
Set db = openDatabase("C:\test.mdb");sql = "select Name, Address from Personnel;"Set query = db.OpenRecordset(sql)Open "out.html" For Output As #1
Print #1, "<h1>Address List</h1>"query.MoveFirstWhile Not query.EOFPrint #1, "<p>" & query("Name") & " ” & query("Address")query.MoveNext
Wend
Close #1query.Close
d.d.Batch Batch
GeneraGenera--tiontion
indexable, secureslower turn-around
d.d.Batch Batch
GeneraGenera--tiontion
(iii) server returnsgenerated
pages
(ii) pages copied to web server
via ftp
(i) pages generated off-line from
database
user’s machine web server third machine
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
syuh how gtw hsio i ert ag tyghn ty we ghtychdi qw oatyfwet dfla ght a
generated pages
really ‘active’ web pages … Data selalu diperbaharui dan
siap di sajikan dalam web presentasi Banyak seperti: CGI, applet-
JDBC update web form/interface -> server
script -> update db e.g. book theatre seats
e.e.Isi Isi
DinamisDinamis