Upload
dangdieu
View
226
Download
0
Embed Size (px)
Citation preview
• 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
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?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
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
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
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
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
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
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
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
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
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
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
server sends server sends whole stackwhole stackusing WAP using WAP
protocolprotocol
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
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
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
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
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
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
navigation within stack fastnavigation within stack fast
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
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
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
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
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
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
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
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
(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
user’s machineuser’s machineweb serverweb server
script / Javascript / Javarunning in clientrunning in client
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
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
(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
user’s machineuser’s machineweb serverweb server
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
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
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
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
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
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