bab - xxi hypertext, multimedia, the world · pdf file• hypertext – tidak hanya...

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




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

• 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




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


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




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







server sends whole stackusing WAP

protocol













navigation within stack fast




server stores ‘stacks’ of cards

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







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



(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


script / Javarunning in client




(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


web page withtext field for

search words

CGI scriptlooks upwords inindex(i) user fills

field in form


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




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

bab - xxi hypertext, multimedia, the world · pdf file• hypertext – tidak hanya...

Documents