Transcript Document

Hipertekstas, multimedia ir
platusis pasaulinis voratinklis
(world-wide web)
Hipertekstas, multimedia ir
pasaulinis platusis voratinklis
• suprantant hipertekstą
- tekstas išvengia tiesiškumo, žodžių ir
puslapio
• objektų paieška
– navigacija hipererdvėje
• web technologija
– kaip visa tai veikia
• web turinys
– statinis: nekintantys paveikslai ir tekstas
– dinaminis: sąveika ir taikomosios programos web’e
Suprantant hipertekstą
Kas yra hiper?
Turtingas turinys: grafika, audio, video,
skaičiavimai ir sąveika
Tekstas
• Primetama skaitytojui griežta tiesinė
seka
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
• Autoriaus idėjos, kas yra geriausia
• Dažnai geros :-)
… bet ne visada!
this is text
or is it
hypertext
only links
can tell
Hipertekstas – ne tik tiesinė seka
• Ne tiesinė struktūra
– teksto blokai (puslapiai)
– ryšiai tarp puslapių sukuria tinklą
– vartotojai pasirenka savo kelius informacijos
paieškai
žymelė
pradžia
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
grįžtamas
išorinis
ryšys
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
Hipermedia – ne tik tiesinė seka
• hiperteksto sistemos+ papildoma terpė
– iliustracijos, fotografijos, video ir garsas
• ryšiai/svarbi info gali būti terpėje
– paveikslėliuose
– laikas ir vieta video informacijoje
• taip pat vadinama multimedia
– šis terminas taip pat naudojamas primityviausiai
audio/video informacijai
animacija
• paveikslėliams pridedamas judesys
– daiktams kurie kinta laike
• skaitmenininis ciferblatas – sekundės uždegamos
viena paskui kitą
• analoginis ciferblatas – rodyklės judėjimas
laikrodyje
– progreso ir padėties atvaizdavimui
• mirksintis žymeklis teksto įvesties vietoje
• užimti kursoriai (stiklinaitė, laikrodis)
animacija
– mokymui
• leisti studentams stebėti reiškinius ...jiems įdomius ir
malonius, bet taip pat ir kitus
– duomenų vizualizacijai
• staigius ir sklandžius pokyčius daugiadimensiniuose
duomenyse, naudojant animuotus, spalvotus paviršius
• sudėtingos molekulės ir jų sąveika lengviau suprantama, kuomet jos yra sukamos ir matomos ekrane
– animuotiems personažams
• žyniai ir pagalba
video ir audio
• dabar autoriui nesunku tai realizuoti
– yra įrankiai redaguoti garsą & video ir informacijos
įrašymas į CDs & DVDs
• nesunku patalpinti web puslapiuose
– standartiniai formatai (QuickTime, MP3)
• pakankamai dideli informacijos kiekiai, bet
nesunkiai valdomi
– atmintis OK … rankose laikomi MP3 grotuvai,
planšetės
– bet kartais ilgesnis perkėlimo laikas
• labai tiesinis
– sunku prijungti “ryšius”, geriau juos realizuoti kaip
mažus atskirus klipus ar foną
audio problemos
• formatai
– Neapdoroti garso pavyzdžiai
• milžiniški … naudojami mikšeriavimui ir
redagavimui
– MIDI
• tik su grojamais garsais
– MP3
• naudoja psichoakustiką – kaip girdi ausis
Naudojant animaciją ir video
• Potentcialiai galingi įrankiai
– laimėjimai televizijoje ir žaidimuose
• bet …
– kaip panaudoti visas tokios terpės galimybes
– skiriasi nuo “standartinių” sąsajų
– ši technologija bus labai vertinga kuomet mes
turėsime daugiau patirties
• todėl …
– reikia mokytis iš filmų kūrėjų, scenaristų, artistų,
dramos teorijos ir tt.
skaičiavimai, intelektas ir
sąveika
• kompiuteriai??
ne tik rodo daiktus ... juos daro
• pavyzdžiai:
– paieška –HCI knygos web puslapis
• ne tik uždaviniai, turinio lentelės, bet taip pat kitokios
info paieška
– sąveika
• įterptos taikomosios programos (pvz, puzzle)
– taikymas
• e-komercijos puslapiai siūlo daiktus, kuriuos galima
pirkti
perteikimo technologija
• kompiuteryje
– pagalbos sistemos instaliuotos kietuose diskuose su
taikomosiomis programomis
– CD-ROM ir DVD su hipermedijos baze
• Web’e
– realiai visur esanti!
• daugelyje šalių jau netoli iki universalios interneto
prieigos
– ne tik web puslapiai!
• pvz. daugelis taikomųjų programų turi savo
dokumentaciją web’e
• … ir ateinančios …
Ateinančios perteikimo
technologijos
• platformos
– Mobilūs telefonai, PDAs, nešiojami kompiuteriai
• perteikimas
– CD-ROM ir DVD
– WiFi prieeigos taškai ar mobilių telefonų tinklai
– WAP (Wireless Application Protocol) – mobiliems
telefonams, puslapio dydžio tinklalapiai
• turinys – kas ir kur
– turistų gidai, reklama su nuorodomis
Taikymo sritys
• Greitas prototipų kūrimas
– sukuria parengiamuosius maketus
– naturalaus dydžio sąveikos naudojant ryšius
• Pagalba ir dokumentacija
– leidžia organizuoti hierarchinį turinį, raktinę paiešką
arba peržiūrą
– mokymasis kaip tik dabar
• pateikiu ko tu nori
(pvz. techninė instrukcija kopijavimo aparatui)
– techniniai žodžiai sujunti su jų apibrėžimais specialių
terminų žodyne
– ryšiai su panašiais kopijuokliais
Taikymo sritys
• lavinimas
– animacija ir grafika leidžia studentams matyti
vykstančius procesus
– garsas sukuria atmosferą ir diagramos gali būti
stebimos, kuomet klausomasi jų aiškinimo
– ne tiesinė struktūra leidžia studentams studijuoti
norimais tempais
– e-mokymas
• leidžia mokytis bet kur, ne klasėje !!
• pvz e-klasė
eClass
2000)
(anksčiau vadinosi Classroom
Eilinė paskaita?
... Kita info bus galima
per web sąsają vėliau
skaidrės, žymekliai,
video yra
‘įtraukiami’
Informacijos radimas
pradingimas hipererdvėje
struktūra ir navigacija
istorija ir žymekliai
indeksai, direktorijos ir paieška
Pradingimas hipererdvėje
• netiesinė struktūra
– labai galinga …
– bet potencialiai paini
• du nepradingimo aspektai
– pažinimas ir turinys
• fragmentuota (ne pilna) informacija – nėra integralumo
… painiava
– navigacija ir struktūra
• Hiperryšiai leidžia judėti per struktūrą – kur aš esu?
• ne lengvi sprendiniai
– bet geras dizainas padeda!
Projektuojant struktūrą
• idėjos struktūrai
– veiklų ir procesų uždavinių analizė
– esami aprašymai arba egzistuojančios struktūros
• einant netiesiškumo keliu
– pranešimas ir organizacijos paprasčiausia struktūra
– hipertekstas – daugybinės struktūros
• problemos su panašia medžiaga, nesuderinamumai ir
tt.
• persidengiančių struktūrų ryšiai labai svarbūs
• pėdsakas
– palik karštas dėmeles ryšiams, nurodant kur jie veda
Kuriant lengvesnę navigaciją
• žemėlapiai
– pateik struktūros apžvalgą
– parodyk dabartinę poziciją – jūs esate čia
• rekomenduojami maršrutai
– kelionė su vadovu
– tiesinis kelias per netiesinę struktūrą
Istorija, žymekliai ir tt.
• atnaujinta peržiūra
– daugybė pakartotinai peržiūrėtų puslapių
– ‘back’ yra 30% visų peržiūros operacijų
– tačiau daugiažingsnė grįžimo atgal peržiūra ir
peržiūros istorija vartojama rečiau
– žymekliai ir favoritiniai puslapiai naudojami
atnaujintai peržiūrai po ilgesnio laiko
• gilūs ryšiai
– žymekliai ir išoriniaiai ryšiai – nukreipti į puslapio
vidų
– ar puslapiai patys save aiškina? Koks puslapis? Kur
šiame puslapyje?
indeksai, direktorijos ir paieška
• indeksas
– padeda surasti pagalbą, dokumentaciją ir dargi
knygas
– selektyvus: neišsamus žodžių lapas yra naudojamas
• direktorijos
– Web’e indeksų skaičius yra milžiniškas! Todėl
reikalinga rankinė paieška
• web paieškos priemonės
– ‘slinkimas’ web’o nurodančiais ryšiais iš puslapio į
puslapį
– sukuria pilną žodžių indeksą
– žiūri į indeksą, kai yra įvedami raktiniai žodžiai puslapio
radimui
Kompleksinė paieška
• labai daug puslapių vienam žodžiui …
reikia labiau selektyvios paieškos
• loginė (Boolean) paieška
– jungia žodžius su logika: pvz. ‘variklis AND NOT
automobilio’
• jungia struktūras
– Google naudoja gausuma įeinančių ir išeinančių ryšių
puslapių klasifikacijai
• rekomenduojančios sistemos
– naudoja kitų žmonių pasirinkimus, kad padėtų
kitiems žmonėms
Ieškant mokslinės literatūros
• specialūs portalai ir paieškos tinklalapiai:
pvz. citeseer <citeseer.nj.nec.com>
– straipsnių paieškai
– skenuoja straipsnius bibliografijai
– visa tai naudoja nustatant citavimo indeksus
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
bibliografijos nuo senesnių
į naujesnius laike
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
citavimo indeksai nuo
naujausių į senesnius
web technologijos ir problemos
protokolai ir peržiūros programos
web serveriai ir klijentai
tinklai
web pagrindai …
• ‘web’ – protokolai ir standartai
– HTTP – perkelti informacijai internete
– HTML, XML ir grafikos formatai turiniui
– Peržiūros programos - rezultatų matymui bei elementarūs
programos elementai (plug-ins Adobe_Flash_Player,)
• keičiant naudojimą
– pradžioje tik tyrimams (CERN – didelės energijos fizika)
– dabar korporaciniams reikalams, valstybiniams, komercijai
bei pasilinksminimams, reklamai, bendruomenei
• iššūkiai
– dingimas hipererdvėje, informacijos perteklius
web serveriai ir klijentai
• web yra išplitęs
–
–
–
–
skirtingos mašinos visame pasaulyje
puslapiai saugomi serveriuose
peržiūros programos (kijentai) prašo puslapių
siunčiami iš ir į internetu
 serveris ieško
 vartotojas aktyvuoja ryšį
 browser siunčia užklausą
puslapio
GET /e3/authors.html HTTP/1.1
syuh
syuhhow
howgtw
gtw
hsio
hsioi iert
ertag
agtyty
ghn
ghntytywe
weghty
ghty
chdi
chdiqw
qwoatyf
oatyf syuh how gtw
wet
wetdfla
dflaght
ghtaa hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
Komunikuoja per HTTP
 serveris grąžina puslapį
syuh how gtw
hsio i ert ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
syuhsyuh
howhow
gtw gtw
hsiohsio
i ert iag
erttyag ty
ghn ghn
ty wetyghty
we ghty
chdichdi
qw
syuh
oatyf
gtw
qwhow
oatyf
wet wet
dfla
hsio
ght
i ert
aght
aga ty
dfla
ghn ty we ghty
chdi qw
syuh
oatyf
how gtw
wet dfla
hsio
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
 browser atskleidžia puslapį
web klijentas (browser)
web serveris (saugo puslapius)
Tinklo problemos – laiko problemos
• QoS (paslaugos kokybė quality of service)
– juostos plotis
• kiek info per sekundę
– gaižties laikas
• kiek tai trunka (užlaikymas)
– virpėjimas (jitter)
• kaip pastovus yra užlaikymas laike
– patikimumas
• kai kurios žinutės yra prarandamos
… reikia jas pakartoti
– jungimo startavimas
• reikia pasisveikinti, kad startuoti (‘handshake’ to start)
Juostos plotis, gaižties laikas,
virpėjimas
Juostos plotis –kiek daug
Gaižties laikas,
kaip ilgai
siuntimas
gavimas
laikas
Virpėjimas, kaip varijuoja
Projektavimo patarimai
• Juostos plotis  galvok apie atsisiuntimo laiką
– pvz. 100K vaizdas 1 sec – plačiajuostis, 18 secs – 56K modemas
– išsaugok grafiką atitinkamuose formatuose ir
dydžiuose
– pakartotinai naudok tą pačią grafiką
• lieka browser tarpinėje atmintinėje (cache) po pirmo
prisisiuntimo
• Jungimo laikas
– vienas didelis failas geriau negu keletas mažų
• Gaižties laikas  galvok apie grįžtamą ryšį
Grįžtamas ryšys ir tiesioginis ryšys
• tinklo užlaikymai lėtina, todėl …
• grįžtamas ryšys – galvok:
– tiesioginis lokalus grįžtamas ryšys – atsitiko kažkas
– lėtesnis semantinis grįžtamas ryšys - kas atsitiko
• Tiesioginis ryšys tarp vartotojų:
– reikalaujantis pastangų – negalime apeiti tinklo
interface
user
im mediat e
feedback
semantic
feedback
environment
WAP – web’as telefone
• Labai mažas ekranas
– prasukimas skausmingas  maži ‘puslapiai’
– GSM jungimas lėtas  dideli gabalėliai
• WML (wireless mark-up language)
– turinys pateikiamas kaip ‘kortų stirtos’
– kortos yra ‘puslapiai’, kuriuos vartotojas mato
– navigacija viduje stirtos yra greita
syuh
syuh how
how gtw
gtw
hsio
hsio ii ert
ert ag
ag ty
ty
ghn ty
ty we
we ghty
ghty
syuh how gtw
ghn
chdi
syuh
oatyf
how
hsio i ert ag ty
chdi qw
qw
syuh
oatyf
how gtw
gtw
wet dfla
dfla
hsioght
ght
ert
ag ty
ty
ghn ty we ghty
wet
hsio
ii ert
aa ag
ghn
ty
we
ghty
chdi qw
syuh
oatyf
how gtw
ghn ty we ghty
chdi qw
qw
syuh
oatyf
how gtw
hsioght
i ert
a ag ty
chdi
syuh
oatyf
how
gtw wet dfla
wet
dfla
hsio
ght
i
ert
a
ag
ty
ghn
ty
we ghty
wet dfla
hsio
ghti ert
a ag ty
ghn ty
ty we
we ghty
ghty
chdi qw
syuh
oatyf
how gtw
ghn
chdi
wet dfla
hsio
ghti ert
a ag ty
chdi qw
qw oatyf
oatyf
wet dfla
dfla ght
ght aa
ghn ty we ghty
wet
chdi qw oatyf
wet dfla ght a
serveris siunčia visą stirtą
naudodamas WAP protokolą
navigacija viduje stirtos greita
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
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
N.B.(nota bene –
gerai įsidėmėk)
didesni ekranai ir
greitesnis sujungimas reiškia WML
suteikia kelią prie
mažų HTML puslapių
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
ghti ert
a 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
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
ghti ert
a 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
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
ghti ert
a ag ty
ghn ty we ghty
chdi qw oatyf
wet dfla ght a
serveris saugo kortų stirtas
statinis web turinys
aplinka ir pranešimas
tekstas, grafika, filmai ir garsas
pranešimas ir aplinka
• “turinys yra karalius”
– frazė paimta iš dot.com, tačiau dažnai ignoruojama
• pranešimas … turinys turi būti
– tinkamas auditorijai, savalaikis, patikimas , ….
– pagrindinai vertas skaityti!
• aplinka … puslapio ir svetainės kūrimas
– geras dizainas – esminis vartotojų pritraukimui
… bet negali paslėpti blogos medžiagos!
– blogas dizainas – gali reikšti, kad gera medžiaga niekada
nebus matoma
– spausdinama!
tekstas
• teksto stilius
– bendri stiliai yra universalūs: serif, sans, fixed, bold, italic
– specifiniai šriftai taip pat naudojami, bet varijuoja atskirose
platformose
– kaskaduojami stiliaus puslapiai geresnei kontrolei
… bet reikėtų saugotis senesnių peržiūros programų ir fiksuoti
šrifto dydžius
– spalvos … dažnai piktaudžiaujama!
• pozicionavimas
– paprastai .. kairinis, dešininis, išlygintas arba centruotas
– precizinis pozicionavimas su DHTML … bet saugokitės skirtingų
platformų …
– ekrano dydis
• matematika … reikia specialaus šrifto, išdėstymo, … arghhhh
grafika
• naudok atsargiai …
– N.B. failo dydis ir perkėlimo laikas …
šis paveikslas = 1000 teksto žodžių
– veikiamas dydžio, spalvų skaičiaus, failo formato
– fonai … kartais apsunkina skaitymą
• kaip pagreitinti
– trumpalaikės atmintinės naudojimas – atkartojantis
tos pačios grafikos naudojimas
– progresyvūs formatai:
• vaizdas parodomas žemesnės skiriamosios gebos ir
atrodo aiškesnis
grafika
• formatai
– JPEG – nuotraukoms
• didesnis suspaudimas, bet ‘lossy’
• įgyja ‘artefacts’
– GIF aštresniems kraštams
JPEG quality=20
• informacijos neprarandantis suspaudimas
– PNG palaikomas šiandienos peržiūros programų
• ir veika
– animuoti gifs paprastoms animacijoms
– vaizdų žemėlapiai vaizdams kuriuos būtų galima
aktyvuoti paspaudimu
ikonos
• Web’e maži objektai
– ženkliukams, dekoracijai
– ryšiams su kitais puslapiais
– jų gausybė!
• dizainas … kaip ir bet kuri sąsaja
– turi būti suprantama
– projektuojama kaip kolekcija kuri turi derintis …
• rekonstrukcija
– ženklas tinklalapio būdingo nepakankamumo
– arba akivaizdus ne darbas
web spalvos
• kiek daug spalvų?
– PC monitoriai – milijonai – 24 bitai pikseliui
… bet tokia pat spalva gali atrodyti skirtingai
• N.B. paprastai naudojami tik 72–96 dpi
– senesni kompiuteriai, PDAs, telefonai …
• gal būt tik 16 bits arba 8 bits pikseliui … 256 spalvos
• arba dargi pilka skalė
• spalvų paletės
– naudinga naudoti 256 spalvas
– skirtingi pasirinkimai, bet Netscape labiausiai naudojamos
216 spalvos
– kiekvienas GIF vaizdas turi savo paletę – naudoja greitam
perkėlimui
filmai ir garsas
• problemos
– dydis ir perkėlimas… kaip ir grafikai, tačiau dar
sudėtingiau!
– gali reikėti specialių programų (plug-ins)
– su garsu nėra taip blogai, egzistuoja keletas kompaktiškų
formatų (MIDI)
• sruvenantis video
– rodomas perkėlimo metu
– gali būti panaudotas plačiajuostei radio arba TV
web serveris
vartotojo kompas
Rodomas
filmas
(i)
(ii) vartotojas
žiūri
Puslapiai perkeliami
syuh how gtw
syuh
hsio
i erthow
ag tygtw
syuh
how
i ert
ag gtw
ty
ghnhsio
ty
we
ghty
hsio
iwe
ertghty
ag ty
ghn
chdi
qwtyoatyf
ghn
ty
we
wetchdi
dflaqw
ghtoatyf
a ghty
chdi
oatyf
wet
dflaqw
ght
a
wet dfla ght a
dinaminis web turinys
kas atsitinka, kur
technologija ir saugumas
lokali sąveika, paieška
nutolusi & paketinė generacija
dinaminis turinys
aktyvus web
• web vaikystėje
– statiniai puslapiai … daugiausia tekstas
– keletas tinklų sąsajų (ftp, gopher)
– panaudojamumas… lengva – vienas paprasčiausias
modelis
• dinaminis turinys
– Koks modelis/metafora ???
• pasyvūs puslapiai ar aktyvi sąsaja
• kiekvienas vedė skirtingam vartotojo supratimui
– nėra lengvų atsakymų!
Kas atsitinka, kur?
• architektūrinis dizainas yra apie tai kas kur
atsitinka
• tai veikia:
– grįžtamą ryšį
• stebint savo veikos rezultatus
– tiesioginį perdavimą
• stebint kitų asmenų veikas
– taip pat veikia diegimo kompleksiškumą bei
aptarnavimą
vartotojo požiūris
• kas kinta?
– terpės srautas, pristatymas, turinys
• kas keičia?
– automatiškai, svetainės autorius, vartotojas
– kiti vartotojai – tiesioginis perdavimas
• kaip dažnai?
– pokyčių greitis: dienos, mėnesiai, sekundės
technologija
kur tai vyksta
klijentas
• applets , Flash, JavaScript & DHTML
serveris
• CGI (Common Gateway Interface) scripts (mažos
programėlės), Java servlets (Java programming
language class) , JSP, ASP, PHP, etc,
kita mašina
• autoriaus mašina, duomenų serveris, įgaliota
mašina
žmonės
• socio-techniniai sprendimai
saugumas
• skaičiavimai
– kodas ir duomenys toje pačioje vietoje!
• problema
– duomenys – turi būti saugūs
– web serveris – saugi mašina
– klijento mašina dargi labiau saugi
… ir tinklai!
lokali sąveika (pas klijentą)
web serveris
vartotojo mašina
(ii) vartotojas są-
kodas / Java
paleidžiamas
pas klijentą (ii)
(i)
puslapiai
numetami vieną kart
syuh how gtw
syuh
hsio
i erthow
ag tygtw
syuh
how
i ert
ag gtw
ty
ghnhsio
ty
we
ghty
hsio
iwe
ertghty
ag ty
ghn
chdi
qwtyoatyf
ghn
ty
we
chdi
qw
oatyf
wet dfla ght a ghty
chdi
oatyf
wet
dflaqw
ght
a
wet dfla ght a
veikauja llokaliai
•
•
•
•
•
fiksuotas turinys
naudoja Java applets, Flash, JavaScript+DHTML
privalumai: greitas grįžtamas ryšys
trūkumai: tik lokalus, nėra perdavimo
po sąveikos … kas grąžins atgal ??
paieška
user’s machine
(i) user fills
field in form
web page with
text field for
search words
(ii) search
results returned
web server
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
• sukuria indeksus autonominiu būdu
• greita informacijos paieška
see
http://www.hcibook.com/e3/search/
automatinis generavimas
• dilema;
– rankinis menas … veda į web sąstingį!!
– todėl reikia duomenų bazėmis valdomų svetainių
• vaikystėje ad hoc (a solution designed for a
specific problem or task), dabar daug įrankių
• pasirinktys:
– client-end applet arba Flash prieeiga nutolusiai DB
– server-end CGI valdomas per web formas (ribotas
UI- user interface)
• hibridiniai sprendiniai
– CGI generuoti puslapiai gali turėti JavaScript etc.
– JavaScript gali ‘rašyti’ web puslapius labai lengvai!
Java applet & JDBC (Java
Database Connectivity)
web server
user’s machine
Java applet
JDBC
accesses
database
• privalumai : interaktyvi DB prieiga
• trūkumai: juostos plotis, saugumas
CGI script prisijungia duomenų
bazę
web server
user’s machine
(i) request
to server
(iii) server returns
CGI
script
syuh how gtw
hsiosyuh
i erthow
ag tygtw
ghnhsio
tysyuh
we
ghty
i erthow
ag ty
gtw
chdighn
qw
hsio
tyoatyf
we
i ertghty
ag ty
wetchdi
dfla
ght
a ghty
ghnqw
ty oatyf
we
wet
chdi
dflaqw
ghtoatyf
a
wet dfla ght a
(ii) CGI script
generated
pages
accesses database
using SQL/JDBC
generated
pages
• privalumai: šiuolaikis, naudoja egzistuojančias
duomenų bazes
• trūkumai: nėra proxy (tarpinis serveris)/index
draugiškumo
paketinis generavimas
• lėtai kintantiems duomenims
– atnaujina lokalinę duomenų bazę
– periodiškai generuoja puslapius ir perdavimą
• daug technologijų
– 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
Paketinis web puslapių generavimas
user’s machine
(iii) server returns
generated
pages
web server
syuh how gtw
hsiosyuh
i erthow
ag tygtw
ghnhsio
tysyuh
we
ghty
i erthow
ag ty
gtw
chdighn
qw
hsio
tyoatyf
we
i ertghty
ag ty
wetchdi
dfla
ght
a ghty
ghnqw
ty oatyf
we
wet
chdi
dflaqw
ghtoatyf
a
wet dfla ght a
generated
pages
third machine
(ii) pages copied
(i) pages generated
to web server
via ftp
off-line from
database
• privalumai: indeksuojami, saugūs
• trūkumai: lėtas apsisukimas
Dinaminis turinys
• realiai ‘aktyvūs’ web puslapiai …
– duomenys atnaujinami kai tik pateikiami web’e
• pateikimas
– bet kokia iš anksčiau žinomų priemonių: CGI, appletJDBC
• atnaujinimas
– web forma/sąsaja -> server script -> atnaujina DB
• Pvz spektaklio vietų užsakymas
• problemos
– autentiškumas ir sugumas
– daugkartinės operacijos susijusios su ‘back’ klavišu
– teisingas žingsnis/kontrolė – ar reikalingas žmogus
cikle?
n-tier architecture (client-server architecture in
which presentation, application processing, and data management
functions are logically separated.)
HTML
JSP
web
server
•
•
•
JEB
XML
enterprise
server
JDBC
database
vienas ar daugiau tarpinių sluoksnių
‘verslo logika’ sluoksniuoe
web standarto komponentai ir protokolai
JavaServer Pages (JSP) is a technology that helps software developers create dynamically generated web pages based on HTML, XML, or
other document
To generate the page the servlets connect to Java Enterprise Beans (JEB) on an enterprise server. These are components
that encapsulate 'business logic'.
JDBC is a Java-based data access technology