HYPERTEXT, MULTIMEDIA, THE WORLD WIDE WEB (WWW)

BAB - XXI HYPERTEXT, MULTIMEDIA, THE WORLD WIDE WEB (WWW)

By. Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale

• Membahas tentang hyperteks, multimedia dan 21.1. Pendahul The World Wide Web uan

• Merupakan dokumen nonsekuensial dan nonlinear • Terdiri dari beberapa 21.2. halaman dan ada satu set PengerPengerlink untuk menghubungkan tian dengan halaman yang lain Hyper-Hyper • Biasanya terdiri dari materi text statis seperti text, diagram statis dan fotograf

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

Text / Linear Text page 1

this is text or is it hypertext only links can tell

page 2


page 3


page 4



HyperHypertext

• 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 bookmark home this is text or is it hypertext only links can tell





back link

external link




Perbedaan antara linear teks dan hypertext

• Linier Text page 1


page 2

page 3



page 4 this is text or is it hypertext only links can tell


• Hypertext bookmark home this is text or is it hypertext only links can tell





back link

external link




Sistem Hyper-Hyper text

1. Animasi 2. Video dan Audio 3. Komputasi, intelligence dan interaksi

• Animasi adalah istilah yang diberikan untuk penambahan gerakan untuk gambar, membuat mereka memindahkan Sistem dan melakukan perubahan Hyper-Hyper text • Contoh animasi dalam sebuah 1. antarmuka adalah dalam Animasi bentuk jam.

Menggunakan animasi dan Video • Berpotensial sepenuhnya dengan alat bantu – Sangat cocok digunakan pada TV dan arcade games

Sistem • Tetapi... Hyper-Hyper – Bagaimana memanfaatkan secara penuh dari berbagai kemungkinan untuk media text – Berbeda dari antarmuka standar 1. – Technologi ini memerlukan pengalaman yang cukup untuk menggunakannya Animasi • Jadi,... – Harus banyak belajar dari pembuat film, dramatis, seniman kartun, seniman-seniman, para penulis

 Media

Sistem Hyper-Hyper text 2. Video dan Audio

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

 Dengan

Sistem Hyper-Hyper text 3. Kompu-Kompu tasi, Intel-Intel egensi dan Iteraksi

menggunakan hipermedia lebih interaktif dibandingkan dengan menggunakan hypertext  Contoh : sebuah tekateki di situs atau satu bentuk 2D rublik's kubus yang dapat bermain secara online

• Pada Komputer –Sistem Help PenerapPenerapan Tekno-Tekno logi Hyper-Hyper text

• Pada web –Link pada web page

• On the move –WAP

Area Aplikasi Hyper-Hyper media

• Rapid Prototyping • Help dan Dokumentasi • Edukasi dan e-learning • Kolaborasi dan Komunitas • E-commerce

• Sistem hiperteks + media tambahan • Ilustrasi-ilustrasi, foto-foto, video dan bunyi Hyper-- • Links/hotspots bisa di dalam Hyper media media merupa-- • Bidang dari gambar-gambar merupa kan • Waktu dan lokasi-lokasi di dalam video • Istilah yang juga digunakan utk audio/video yang sederhana

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

• Rute rekomendasi

Membuat – kiasan perjalanan keliling perjalanan atau bus yang dipandu Navigasi – alur linier melalui struktur tak linear Yang • Level acces Mudah – Ringkasan dalam progressive

• Dukungan untuk mencetak – Linearisasi untuk isi, link balik ke awal/asal

• Mengunjungi kembali – – – – –

History, Book-Book marks, etc

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

• web technology (Teknologi web) –Bagaimana teknologi web itu bekerja

• web content (isi Web) PengerPengertian WEB

–Web static : tidak terjadi pembaharuan gambar dan isi –Web dynamic: adanya interaksi dan aplikasi pada web

 Dalam Komputer  Aplikasi yang instal dalam kom-puter dilengkapi dengan sistem help  CD or DVD Berdasarkan Hypermedia

Tekno-logi TeknoPengirima n

 Dalam Web  Nyata ada dimana-mana  Dibanyak negara, sangat dekat dan bebas dalam mengakses internet  Tidak hanya di website, banyak aplikasi dilengkapi dengan webbase aplikasi

• System yang dipakai – Mobile phone, PDA dan Laptop

• Pengiriman

Tekno-logi TeknoPengirima n

– 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

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

• Help and documentation Area Aplikasi

– 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

eClass (formerly Classroom 2000) an ordinary lecture?

... available later through web interface slides, pen marks, video are ‘captured’

Protocols dan Tekno-logi TeknoWEB

browsers WEB servers dan clients Networking

 the ‘web’ – protocols dan standard  HTTP – untuk membawa informasi di

Dasar WEB

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

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

WEB Servers dan Clients

mengelilingi dunia  Halaman di simpan dalam servers  Browsers (the clients) meminta suatu halaman  Internet dapat mengirim dan menerima halaman tersebut  server finds page

 browser sends request

 user clicks link

GET /e3/authors.html HTTP/1.1 syuh syuhhow howgtw gtw hsio hsioi iert ertag agtyty ghn ghntytywe weghty ghty chdi chdiqw qwoatyf oatyfsyuh how gtw wet wetdfla dflaght ghtaahsio i ert ag ty ghn ty we ghty chdi qw oatyf wet dfla ght a

communicate with HTTP

 server sends page back

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

 browser displays it

web client (browser)

web server (stores pages)

 QoS (quality of service)  bandwidth  Berapa banyak informasi yang disampaikan dalam satuan detik

 latency  Seberapa lama data dapat disampaikan(delay)

 jitter  Konsistensi dari delay

Network

 reliability  Beberapa message dapat hilang … perlu untuk di kirim ulang … dapat menambah waktu jitter

 connection set-up  Butuh untuk ‘handshake’ untuk start

BandBandwidth, Latency, dan Jitter

bandwidth how much

latency how long

send

receive time

jitter how variable

 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

Desain Implikasi

 Satu file besar lebik baik di pecah menjadi file-file kecil

 latency  pikirkan tentang timbal

balik/feedback dapat menjadi lambat

 Network delays terlalu lambat !  Feedback – pikirkan:  Sesuatu yang telah terjadi  Apa yang telah terjadi

FeedFeedback & Feed-Feed through

 Feedthrough between users:  Hardware – tidak bisa

menghidari jaringan interface

user immediate feedback semantic feedback

environment

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

 very small screen  scrolling painful  small ‘pages’  GSM connection slow  big chunks

 WML (wireless mark-up language)  content delivered in ‘stacks’ of ‘cards’

WAP – WEB on The Phone

 cards are the ‘pages’ the user views  but navigation within the stack fast

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

server sends whole stack using WAP protocol navigation within stack fast

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




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

1.The message &

Isi WEB Statis

the medium 2.Text, graphics, icon, movies & sound

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

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

1. The waktu, dapat dipercaya , ….  Secara umum pesan harus dibaca ! Message & The Medium  the medium … pada halaman & situs desain

 good design  bad design

 Gaya text  Gaya yang biasa di pakai: underline, bold, italic  Untuk spesifik font, banyak variatif berdasarkan flatform

text masing-masing

 cascading style sheets (CSS) for fine control

… Perhatikan browser lama dan perbaharui ukuran font  warna …sering kali di salah gunakan!

 Posisi

2.a. Text

 Mudah .. left, right justified atau centred  Dirancang dengan DHTML … tetapi disesuaikan dengan

flatform…  screen size

 Mathematics … Untuk matematik mem-

butuhkan font khusus dan, layout, …

 Gunakan dengan hati hati …  Ukuran file dan waktu download

harus dipertimbangkan  Dipengaruhi oleh ukuran, warna dan format file  Backgrounds/latar belakangnya

2.b. Graphics  Menambah kecepatan proses  caching – menggunakan gambar

yang sama  progressive formats:  Gambar muncul dengan resolusi rendah dan terlihat lebih jelas

 Format  JPEG – untuk foto JPEG quality=20  Menggunakan kompresi tinggi

2.b. Graphics (ctd)

 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

 On the web hanya dalam bentuk gambar kecil

icons  for bullets, decoration

 or to link to other pages  lots available!

2.c. Icon

 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

 Masalahnya  Ukuran dan downloadnya  Mungkin membutuhkan plug-ins khusus  Suara tidak terlalu buruk dengan compact formats (MIDI)

 streaming video  Dimainkan ketika di download

2.d. Movie & Sound

 Dapat digunakan untuk ‘broadcast’ radio atau TV

web server user’s machine movie plays

(ii) user watches

(i) page loads

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

Isi WEB Dinamis

 what happens where  technology and security  local interaction, search  remote & batch generation  dynamic content

 Hal yang mempengaruhi

Desain arsitek :  feedback a. What happens where

 Melihat hasil dari yang telah ada

 feedthrough  Melihat hasil dari orang lain

Dimana terjadinya ?? client  applets , Flash, JavaScript & DHTML

server b. Techno-Techno logy

 CGI scripts, Java servlets , JSP, ASP, PHP, etc,

another machine  author’s machine, database server, proxy

people  socio-technical solutions

 Untuk komputasi  Kode dan data ditempatkan

pada tempat yang sama! b. Techno-Techno logy

 Masalah yang sering terjadi  Data – butuh untuk di aman

kan  Web server – butuh diaman kan melalui mesin  Mesin klien biasa lebih buruk tingkat keamanannya

web server user’s machine script / Java running in client

(ii) user interacts locally

c. Local Inter-Inter action (at client)

(i) page loads once

syuh how gtw hsio i erthow ag tygtw syuh ghn ty we ghty hsio i erthow ag gtw ty syuh chdi qwtyoatyf ghn we hsio i ertghty ag ty wetchdi dfla ght a ghty ghnqw tyoatyf we wet dflaqw ght a chdi oatyf wet dfla ght a

 Memperbaiki isinya  use Java applets, Flash, JavaScript+DHTML  rapid feedback  only local, no feedthrough  Selanjutnya apa yang kita harus lakukan lagy ??

Contoh : dancing histograms are a Java applet

 … TO DO … …

coin race uses JavaScript

web server

user’s machine

(i) user fills field in form

web page with text field for search words

(ii) search results returned

CGI script looks up words in index

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

index file pre-computed

c. Search /  Menciptakan indek yang off-line Pencari--  lookup cepat ketika dibutuhkan Pencari see http://www.hcibook.com/e3/search/ an

 Menjadi lambat karena banyak variasi

data  Perbaharui pusat data local  Secara periodik mengganti halaman dan upload

 many technologies  C, Java,

d. Batch Genera-Genera tion

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, "
Address List
" query.MoveFirst While Not query.EOF Print #1, "
" & query("Name") & " ” & query("Address") query.MoveNext Wend Close #1 query.Close

user’s machine

(iii) server returns generated pages

d. Batch Genera-Genera tion

web server syuh how gtw hsio i erthow ag tygtw syuh ghnhsio ty we ghty i ert ag gtw ty syuh how chdi qwtyoatyf ghn hsio iwe ertghty ag ty wetchdi dflaqw ghtoatyf a ghn ty we ghty wet dflaqwght a chdi oatyf wet dfla ght a

generated pages

third machine

(ii) pages copied

(i) pages generated

to web server via ftp

off-line from database

 indexable, secure  slower turn-around

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

siap di sajikan dalam web

 presentasi

e. Isi Dinamis

 Banyak seperti: CGI, applet-

JDBC

 update  web form/interface -> server

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

HYPERTEXT, MULTIMEDIA, THE WORLD WIDE WEB (WWW)

Recommend Documents

Address List