HYPERTEXT, MULTIMEDIA, THE WORLD WIDE WEB (WWW)

(1)

BAB - XXI

HYPERTEXT, MULTIMEDIA,

THE WORLD WIDE WEB

(WWW)

By. Alan Dix, Janet Finlay,

Gregory D. Abowd, Russell

Beale

(2)

• _{Membahas tentang}

hyperteks, multimedia dan

The World Wide Web

21.1.

21.1. Pendahul

Pendahul

uan

(3)

• _{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. Penger

Penger--tian

tian

Hyper

Hyper--text

text

(4)

• _{Contoh pembuka halaman yang}

seperti membaca buku yang melaju

kedepan atau kebelakang halaman

dan kehalaman berikut

Text /

Linear

Text

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

page 1

page 2

page 3

page 4

this is text

or is it

hypertext

only links

can tell

(5)

• 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 pemakai

Hyper

Hyper--text

text

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

home

bookmark

external

link

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

back link

(6)

Perbedaan antara linear teks dan hypertext

• Linier Text

• Hypertext

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

page 1

page 2

page 3

page 4

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

home

bookmark

external link

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

this is text

or is it

hypertext

only links

can tell

back link

(7)

1. Animasi

2. Video dan Audio

3. Komputasi,

intelligence dan

interaksi

Sistem

Hyper

Hyper--text

text

(8)

• _{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

Hyper

Hyper--text

text

1.

1. Animasi

Animasi

(9)

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

Hyper

Hyper--text

text

1.

1. Animasi

Animasi

(10)

Sistem

Hyper

Hyper--text

text

2.

2. Video

Video

dan

Audio



Media didominasi

menggunakan video

atau audio video atau

bahan sebagai bagian

dari sistem hypertext

apakah itu untuk

pendidikan atau

hiburan

(11)

Sistem

Hyper

Hyper--text

text

3.

3. Kompu

Kompu--tasi,

tasi,

Intel

Intel--egensi

egensi

dan

Iteraksi



Dengan menggunakan

hipermedia lebih

interaktif dibandingkan

dengan menggunakan

hypertext



Contoh : sebuah

teka-teki di situs atau satu

bentuk 2D rublik's kubus

yang dapat bermain

(12)

• Pada Komputer

–

_{Sistem Help}

• Pada web

–

Link pada web

page

• On the move

–

_WAP

Penerap

Penerap--an

an

Tekno

Tekno--logi

logi

Hyper

Hyper--text

text

(13)

• _{Rapid Prototyping}

• _{Help dan Dokumentasi}

• _{Edukasi dan e-learning}

• _{Kolaborasi dan}

Komunitas

• _E-commerce

Area

Aplikasi

Hyper

Hyper--media

media

(14)

• 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

Hyper

Hyper--media

media

merupa

merupa--kan

kan

(15)

• 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

Navigasi

Yang

Mudah

(16)

• 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,

Book

Book--marks,

marks,

etc

(17)

• _{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

Penger

Penger--tian WEB

tian WEB

(18)



Dalam Komputer



Aplikasi yang instal dalam kom-puter

dilengkapi dengan sistem help



CD or DVD Berdasarkan Hypermedia



Dalam Web



Nyata ada dimana-mana



Dibanyak negara, sangat dekat dan

bebas dalam mengakses internet



Tidak hanya di website, b

anyak aplikasi

dilengkapi dengan webbase aplikasi

Tekno

Tekno--logi

logi

Pengirima

n

(19)

• 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

Tekno

Tekno--logi

logi

Pengirima

n

(20)

• 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 deng

an suatu

definisi di suatu daftar kata

–

hubungkan antara mesin dengan fotocopy yang sama

Area

Aplikasi

(21)

eClass

(formerly Classroom 2000)

an ordinary lecture?

slides, pen marks,

video are ‘captured’

... available later

(22)



Protocols dan

browsers



WEB servers

dan clients



Networking

Tekno

Tekno--logi

logi

WEB

(23)



the ‘web’ – protocols dan

standard



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

WEB

(24)



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 ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

web client (browser)

web server (stores pages)



user clicks link

GET /e3/authors.html HTTP/1.1



server sends page back



browser sends request

communicate with HTTP

syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a



browser displays it



server finds page

syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf

wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

WEB

Servers

dan

Clients

(25)



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

Network

(26)

send

receive

time

bandwidth

how much

latency

how long

jitter

how variable

Band

Band--width,

width,

Latency,

dan

Jitter

(27)



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

Implikasi

(28)



Network delays terlalu lambat !



Feedback – pikirkan:



Sesuatu yang telah terjadi



Apa yang telah terjadi



Feedthrough between users:



Hardware – tidak bisa

menghidari jaringan

user

interface

immediate

feedback

semantic

feedback

environment

Feed

Feed--back &

back &

Feed

Feed--through

through

(29)

syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet 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 ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

server sends

whole stack

using WAP

protocol

syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

navigation within stack fast

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 ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a syuh how gtw hsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

WAP

WAP –

–

WEB on

The

Phone

(30)

1. The message &

the medium

2. Text, graphics,

icon, movies &

sound

Isi WEB

Statis

(31)



“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

Message

& The

Medium

(32)

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. Text

(33)



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.

Graphics

(34)



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.

Graphics

(ctd)

(35)

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. Icon

(36)



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) page

loads

user’s machine

web server

movie plays

(ii) user

watches

2.d.

Movie &

Sound

(37)



what happens where



technology and security



local interaction, search



remote & batch generation



dynamic content

Isi WEB

Dinamis

(38)



Hal yang mempengaruhi

Desain arsitek :



feedback



Melihat hasil dari yang telah

ada



feedthrough



Melihat hasil dari orang lain

a.

What

happens

where

(39)

Dimana terjadinya ??

client



applets , Flash, JavaScript &

DHTML

server



CGI scripts, Java servlets ,

JSP, ASP, PHP, etc,

another machine



author’s machine, database

server, proxy

people



socio-technical solutions

b.

Techno

Techno--logy

logy

(40)



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.

Techno

Techno--logy

logy

(41)



Memperbaiki isinya



use Java applets, Flash,

JavaScript+DHTML



rapid feedback



only local, no feedthrough



Selanjutnya apa yang kita harus

lakukan lagy ??

(i) page

loads once

user’s machine

web server

script / Java

running in client

(ii) user

interacts

locally

c.

Local

Inter

Inter--action

action

(at client)

(42)

Contoh :



_{… TO DO … …}

coin race uses

JavaScript

dancing histograms

are a Java applet

(43)



Menciptakan indek yang off-line



lookup cepat ketika dibutuhkan

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

c.

Search /

Pencari

Pencari--an

an

(ii) search

results returned

user’s machine

web server

web page with

text field for

search words

CGI script

looks up

words in

index

(i) user fills

field in form

index file

pre-computed

(44)



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.MoveFirst

While Not query.EOF

Print #1, "<p>" & query("Name") & " ” & query("Address")

query.MoveNext

Wend

Close #1

query.Close

d.

Batch

Genera

Genera--tion

tion

(45)



indexable, secure



slower turn-around

d.

Batch

Genera

Genera--tion

tion

(iii)

server returns

generated

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

(46)



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.

Isi

Dinamis