Hipertekstas, multimedia ir platusis pasaulinis voratinklis (world-wide web)

1

• Hipertekstas, multimedia ir platusis pasaulinis
  voratinklis (world-wide web)

2
Hipertekstas, multimedia ir pasaulinis platusis
voratinklis

• suprantant hiperteksta
• - tekstas išvengia tiesiškumo, žodžiu ir
  puslapio
• objektu paieška
• navigacija hipererdveje
• web technologija
• kaip visa tai veikia
• web turinys
• statinis nekintantys paveikslai ir tekstas
• dinaminis saveika ir taikomosios programos webe

3
Suprantant hiperteksta

• Kas yra hiper?
• Turtingas turinys grafika, audio, video,
  skaiciavimai ir saveika

4
Tekstas

• Primetama skaitytojui griežta tiesine seka
• Autoriaus idejos, kas yra geriausia
• Dažnai geros -) bet ne visada!

5
Hipertekstas ne tik tiesine seka

• Ne tiesine struktura
• teksto blokai (puslapiai)
• ryšiai tarp puslapiu sukuria tinkla
• vartotojai pasirenka savo kelius informacijos
  paieškai

6
Hipermedia ne tik tiesine seka

• hiperteksto sistemos papildoma terpe
• iliustracijos, fotografijos, video ir garsas
• ryšiai/svarbi info gali buti terpeje
• paveiksleliuose
• laikas ir vieta video informacijoje
• taip pat vadinama multimedia
• šis terminas taip pat naudojamas primityviausiai
  audio/video informacijai

7
animacija

• paveiksleliams pridedamas judesys
• daiktams kurie kinta laike
• skaitmenininis ciferblatas sekundes uždegamos
  viena paskui kita
• analoginis ciferblatas rodykles judejimas
  laikrodyje
• progreso ir padeties atvaizdavimui
• mirksintis žymeklis teksto ivesties vietoje
• užimti kursoriai (stiklinaite, laikrodis)

8
animacija

• mokymui
• leisti studentams stebeti reiškinius ...jiems
  idomius ir malonius, bet taip pat ir kitus
• duomenu vizualizacijai
• staigius ir sklandžius pokycius
  daugiadimensiniuose duomenyse, naudojant
  animuotus, spalvotus paviršius
• sudetingos molekules ir ju saveika lengviau
  supran-tama, kuomet jos yra sukamos ir matomos
  ekrane
• animuotiems personažams
• žyniai ir pagalba

9
video ir audio

• dabar autoriui nesunku tai realizuoti
• yra irankiai redaguoti garsa video ir
  informacijos irašymas i CDs DVDs
• nesunku patalpinti web puslapiuose
• standartiniai formatai (QuickTime, MP3)
• pakankamai dideli informacijos kiekiai, bet
  nesunkiai valdomi
• atmintis OK rankose laikomi MP3 grotuvai,
  planšetes
• bet kartais ilgesnis perkelimo laikas
• labai tiesinis
• sunku prijungti ryšius, geriau juos realizuoti
  kaip mažus atskirus klipus ar fona

10
audio problemos

• formatai
• Neapdoroti garso pavyzdžiai
• milžiniški naudojami mikšeriavimui ir
  redagavimui
• MIDI
• tik su grojamais garsais
• MP3
• naudoja psichoakustika kaip girdi ausis

11
Naudojant animacija ir video

• Potentcialiai galingi irankiai
• laimejimai televizijoje ir žaidimuose
• bet
• kaip panaudoti visas tokios terpes galimybes
• skiriasi nuo standartiniu sasaju
• ši technologija bus labai vertinga kuomet mes
  turesime daugiau patirties
• todel
• reikia mokytis iš filmu kureju, scenaristu,
  artistu, dramos teorijos ir tt.

12
skaiciavimai, intelektas ir saveika

• kompiuteriai?? ne tik rodo daiktus ... juos daro
• pavyzdžiai
• paieška HCI knygos web puslapis
• ne tik uždaviniai, turinio lenteles, bet taip pat
  kitokios info paieška
• saveika
• iterptos taikomosios programos (pvz, puzzle)
• taikymas
• e-komercijos puslapiai siulo daiktus, kuriuos
  galima pirkti

13
perteikimo technologija

• kompiuteryje
• pagalbos sistemos instaliuotos kietuose diskuose
  su taikomosiomis programomis
• CD-ROM ir DVD su hipermedijos baze
• Webe
• realiai visur esanti!
• daugelyje šaliu jau netoli iki universalios
  interneto prieigos
• ne tik web puslapiai!
• pvz. daugelis taikomuju programu turi savo
  dokumentacija webe
• ir ateinancios

14
Ateinancios perteikimo technologijos

• platformos
• Mobilus telefonai, PDAs, nešiojami kompiuteriai
• perteikimas
• CD-ROM ir DVD
• WiFi prieeigos taškai ar mobiliu telefonu tinklai
• WAP (Wireless Application Protocol) mobiliems
  telefonams, puslapio dydžio tinklalapiai
• turinys kas ir kur
• turistu gidai, reklama su nuorodomis

15
Taikymo sritys

• Greitas prototipu kurimas
• sukuria parengiamuosius maketus
• naturalaus dydžio saveikos naudojant ryšius
• Pagalba ir dokumentacija
• leidžia organizuoti hierarchini turini, raktine
  paieška arba peržiura
• mokymasis kaip tik dabar
• pateikiu ko tu nori
• (pvz. technine instrukcija kopijavimo aparatui)
• techniniai žodžiai sujunti su ju apibrežimais
  specialiu terminu žodyne
• ryšiai su panašiais kopijuokliais

16
Taikymo sritys

• lavinimas
• animacija ir grafika leidžia studentams matyti
  vykstancius procesus
• garsas sukuria atmosfera ir diagramos gali buti
  stebimos, kuomet klausomasi ju aiškinimo
• ne tiesine struktura leidžia studentams
  studijuoti norimais tempais
• e-mokymas
• leidžia mokytis bet kur, ne klaseje !!
• pvz e-klase

17
eClass (anksciau vadinosi Classroom 2000)
Eiline paskaita?
18
Informacijos radimas

• pradingimas hipererdvejestruktura ir
  navigacijaistorija ir žymekliaiindeksai,
  direktorijos ir paieška

19
Pradingimas hipererdveje

• netiesine struktura
• labai galinga
• bet potencialiai paini
• du nepradingimo aspektai
• pažinimas ir turinys
• fragmentuota (ne pilna) informacija nera
  integralumo painiava
• navigacija ir struktura
• Hiperryšiai leidžia judeti per struktura kur aš
  esu?
• ne lengvi sprendiniai
• bet geras dizainas padeda!

20
Projektuojant struktura

• idejos strukturai
• veiklu ir procesu uždaviniu analize
• esami aprašymai arba egzistuojancios strukturos
• einant netiesiškumo keliu
• pranešimas ir organizacijos paprasciausia
  struktura
• hipertekstas daugybines strukturos
• problemos su panašia medžiaga, nesuderinamumai ir
  tt.
• persidengianciu strukturu ryšiai labai svarbus
• pedsakas
• palik karštas demeles ryšiams, nurodant kur jie
  veda

21
Kuriant lengvesne navigacija

• žemelapiai
• pateik strukturos apžvalga
• parodyk dabartine pozicija jus esate cia
• rekomenduojami maršrutai
• kelione su vadovu
• tiesinis kelias per netiesine struktura

22
Istorija, žymekliai ir tt.

• atnaujinta peržiura
• daugybe pakartotinai peržiuretu puslapiu
• back yra 30 visu peržiuros operaciju
• taciau daugiažingsne grižimo atgal peržiura ir
  peržiuros istorija vartojama reciau
• žymekliai ir favoritiniai puslapiai naudojami
  atnaujintai peržiurai po ilgesnio laiko
• gilus ryšiai
• žymekliai ir išoriniaiai ryšiai nukreipti i
  puslapio vidu
• ar puslapiai patys save aiškina? Koks puslapis?
  Kur šiame puslapyje?

23
indeksai, direktorijos ir paieška

• indeksas
• padeda surasti pagalba, dokumentacija ir dargi
  knygas
• selektyvus neišsamus žodžiu lapas yra naudojamas
• direktorijos
• Webe indeksu skaicius yra milžiniškas! Todel
  reikalinga rankine paieška
• web paieškos priemones
• slinkimas webo nurodanciais ryšiais iš
  puslapio i puslapi
• sukuria pilna žodžiu indeksa
• žiuri i indeksa, kai yra ivedami raktiniai
  žodžiai puslapio radimui

24
Kompleksine paieška

• labai daug puslapiu vienam žodžiui reikia
  labiau selektyvios paieškos
• logine (Boolean) paieška
• jungia žodžius su logika pvz. variklis AND NOT
  automobilio
• jungia strukturas
• Google naudoja gausuma ieinanciu ir išeinanciu
  ryšiu puslapiu klasifikacijai
• rekomenduojancios sistemos
• naudoja kitu žmoniu pasirinkimus, kad padetu
  kitiems žmonems

25
Ieškant mokslines literaturos

• specialus portalai ir paieškos
  tinklalapiai pvz. citeseer ltciteseer.nj.nec.com
  gt
• straipsniu paieškai
• skenuoja straipsnius bibliografijai
• visa tai naudoja nustatant citavimo indeksus

citavimo indeksai nuo naujausiu i senesnius
bibliografijos nuo senesniu i naujesnius laike
26
web technologijos ir problemos

• protokolai ir peržiuros programos
• web serveriai ir klijentai
• tinklai

27
web pagrindai

• web protokolai ir standartai
• HTTP perkelti informacijai internete
• HTML, XML ir grafikos formatai turiniui
• Peržiuros programos - rezultatu matymui bei
  elementarus programos elementai (plug-ins
  Adobe_Flash_Player,)
• keiciant naudojima
• pradžioje tik tyrimams (CERN dideles energijos
  fizika)
• dabar korporaciniams reikalams, valstybiniams,
  komercijai bei pasilinksminimams, reklamai,
  bendruomenei
• iššukiai
• dingimas hipererdveje, informacijos perteklius

28
web serveriai ir klijentai

• web yra išplites
• skirtingos mašinos visame pasaulyje
• puslapiai saugomi serveriuose
• peržiuros programos (kijentai) prašo puslapiu
• siunciami iš ir i internetu

? vartotojas aktyvuoja ryši
GET /e3/authors.html HTTP/1.1
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
? browser atskleidžia puslapi
web serveris (saugo puslapius)
web klijentas (browser)
29
Tinklo problemos laiko problemos

• QoS (paslaugos kokybe quality of service)
• juostos plotis
• kiek info per sekunde
• gaižties laikas
• kiek tai trunka (užlaikymas)
• virpejimas (jitter)
• kaip pastovus yra užlaikymas laike
• patikimumas
• kai kurios žinutes yra prarandamos reikia jas
  pakartoti
• jungimo startavimas
• reikia pasisveikinti, kad startuoti (handshake
  to start)

30
Juostos plotis, gaižties laikas, virpejimas
Juostos plotis kiek daug
Gaižties laikas, kaip ilgai
siuntimas
gavimas
laikas
Virpejimas, kaip varijuoja
31
Projektavimo patarimai

• Juostos plotis ? galvok apie atsisiuntimo laika
• pvz. 100K vaizdas 1 sec placiajuostis, 18 secs
  56K modemas
• išsaugok grafika atitinkamuose formatuose ir
  dydžiuose
• pakartotinai naudok ta pacia grafika
• lieka browser tarpineje atmintineje (cache) po
  pirmo prisisiuntimo
• Jungimo laikas
• vienas didelis failas geriau negu keletas mažu
• Gaižties laikas ? galvok apie grižtama ryši

32
Grižtamas ryšys ir tiesioginis ryšys

• tinklo užlaikymai letina, todel
• grižtamas ryšys galvok
• tiesioginis lokalus grižtamas ryšys atsitiko
  kažkas
• letesnis semantinis grižtamas ryšys - kas
  atsitiko
• Tiesioginis ryšys tarp vartotoju
• reikalaujantis pastangu negalime apeiti tinklo

33
WAP webas telefone

• Labai mažas ekranas
• prasukimas skausmingas ? maži puslapiai
• GSM jungimas letas ? dideli gabaleliai
• WML (wireless mark-up language)
• turinys pateikiamas kaip kortu stirtos
• kortos yra puslapiai, kuriuos vartotojas mato
• navigacija viduje stirtos yra greita

navigacija viduje stirtos greita
serveris saugo kortu stirtas
34
statinis web turinys

• aplinka ir pranešimas
• tekstas, grafika, filmai ir garsas

35
pranešimas ir aplinka

• turinys yra karalius
• fraze paimta iš dot.com, taciau dažnai
  ignoruojama
• pranešimas turinys turi buti
• tinkamas auditorijai, savalaikis, patikimas , .
• pagrindinai vertas skaityti!
• aplinka puslapio ir svetaines kurimas
• geras dizainas esminis vartotoju
  pritraukimui bet negali paslepti blogos
  medžiagos!
• blogas dizainas gali reikšti, kad gera medžiaga
  niekada nebus matoma
• spausdinama!

36
tekstas

• teksto stilius
• bendri stiliai yra universalus serif, sans,
  fixed, bold, italic
• specifiniai šriftai taip pat naudojami, bet
  varijuoja atskirose platformose
• kaskaduojami stiliaus puslapiai geresnei
  kontrolei bet reiketu saugotis senesniu
  peržiuros programu ir fiksuoti šrifto dydžius
• spalvos dažnai piktaudžiaujama!
• pozicionavimas
• paprastai .. kairinis, dešininis, išlygintas arba
  centruotas
• precizinis pozicionavimas su DHTML bet
  saugokites skirtingu platformu
• ekrano dydis
• matematika reikia specialaus šrifto, išdestymo,
  arghhhh

37
grafika

• naudok atsargiai
• N.B. failo dydis ir perkelimo laikas šis
  paveikslas 1000 teksto žodžiu
• veikiamas dydžio, spalvu skaiciaus, failo formato
• fonai kartais apsunkina skaityma
• kaip pagreitinti
• trumpalaikes atmintines naudojimas
  atkartojantis tos pacios grafikos naudojimas
• progresyvus formatai
• vaizdas parodomas žemesnes skiriamosios gebos ir
  atrodo aiškesnis

38
grafika

• formatai
• JPEG nuotraukoms
• didesnis suspaudimas, bet lossy
• igyja artefacts
• GIF aštresniems kraštams
• informacijos neprarandantis suspaudimas
• PNG palaikomas šiandienos peržiuros programu
• ir veika
• animuoti gifs paprastoms animacijoms
• vaizdu žemelapiai vaizdams kuriuos butu galima
  aktyvuoti paspaudimu

JPEG quality20
39
ikonos

• Webe maži objektai
• ženkliukams, dekoracijai
• ryšiams su kitais puslapiais
• ju gausybe!
• dizainas kaip ir bet kuri sasaja
• turi buti suprantama
• projektuojama kaip kolekcija kuri turi derintis
• rekonstrukcija
• ženklas tinklalapio budingo nepakankamumo
• arba akivaizdus ne darbas

40
web spalvos

• kiek daug spalvu?
• PC monitoriai milijonai 24 bitai pikseliui
  bet tokia pat spalva gali atrodyti skirtingai
• N.B. paprastai naudojami tik 7296 dpi
• senesni kompiuteriai, PDAs, telefonai
• gal but tik 16 bits arba 8 bits pikseliui 256
  spalvos
• arba dargi pilka skale
• spalvu paletes
• naudinga naudoti 256 spalvas
• skirtingi pasirinkimai, bet Netscape labiausiai
  naudojamos 216 spalvos
• kiekvienas GIF vaizdas turi savo palete naudoja
  greitam perkelimui

41
filmai ir garsas

• problemos
• dydis ir perkelimas kaip ir grafikai, taciau
  dar sudetingiau!
• gali reiketi specialiu programu (plug-ins)
• su garsu nera taip blogai, egzistuoja keletas
  kompaktišku formatu (MIDI)
• sruvenantis video
• rodomas perkelimo metu
• gali buti panaudotas placiajuostei radio arba TV

42
dinaminis web turinys

• kas atsitinka, kur
• technologija ir saugumas
• lokali saveika, paieška
• nutolusi paketine generacija
• dinaminis turinys

43
aktyvus web

• web vaikysteje
• statiniai puslapiai daugiausia tekstas
• keletas tinklu sasaju (ftp, gopher)
• panaudojamumas lengva vienas paprasciausias
  modelis
• dinaminis turinys
• Koks modelis/metafora ???
• pasyvus puslapiai ar aktyvi sasaja
• kiekvienas vede skirtingam vartotojo supratimui
• nera lengvu atsakymu!

44
Kas atsitinka, kur?

• architekturinis dizainas yra apie tai kas kur
  atsitinka
• tai veikia
• grižtama ryši
• stebint savo veikos rezultatus
• tiesiogini perdavima
• stebint kitu asmenu veikas
• taip pat veikia diegimo kompleksiškuma bei
  aptarnavima

45
vartotojo požiuris

• kas kinta?
• terpes srautas, pristatymas, turinys
• kas keicia?
• automatiškai, svetaines autorius, vartotojas
• kiti vartotojai tiesioginis perdavimas
• kaip dažnai?
• pokyciu greitis dienos, menesiai, sekundes

46
technologija

• kur tai vyksta
• klijentas
• applets , Flash, JavaScript DHTML
• serveris
• CGI (Common Gateway Interface) scripts (mažos
  programeles), Java servlets (Java programming
  language class) , JSP, ASP, PHP, etc,
• kita mašina
• autoriaus mašina, duomenu serveris, igaliota
  mašina
• žmones
• socio-techniniai sprendimai

47
saugumas

• skaiciavimai
• kodas ir duomenys toje pacioje vietoje!
• problema
• duomenys turi buti saugus
• web serveris saugi mašina
• klijento mašina dargi labiau saugi
• ir tinklai!

48
lokali saveika (pas klijenta)

• fiksuotas turinys
• naudoja Java applets, Flash, JavaScriptDHTML
• privalumai greitas grižtamas ryšys
• trukumai tik lokalus, nera perdavimo
• po saveikos kas gražins atgal ??

49
paieška

• sukuria indeksus autonominiu budu
• greita informacijos paieška
• see http//www.hcibook.com/e3/search/

50
automatinis generavimas

• dilema
• rankinis menas veda i web sastingi!!
• todel reikia duomenu bazemis valdomu svetainiu
• vaikysteje ad hoc (a solution designed for a
  specific problem or task), dabar daug irankiu
• 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 tureti JavaScript
  etc.
• JavaScript gali rašyti web puslapius labai
  lengvai!

51
Java applet JDBC (Java Database Connectivity)

• privalumai interaktyvi DB prieiga
• trukumai juostos plotis, saugumas

52
CGI script prisijungia duomenu baze

• privalumai šiuolaikis, naudoja egzistuojancias
  duomenu bazes
• trukumai nera proxy (tarpinis serveris)/index
  draugiškumo

53
paketinis generavimas

• letai kintantiems duomenims
• atnaujina lokaline duomenu baze
• periodiškai generuoja puslapius ir perdavima
• daug technologiju
• 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, "lth1gtAddress
Listlt/h1gt" query.MoveFirst While Not query.EOF
Print 1, "ltpgt" query("Name") "
query("Address") query.MoveNext Wend Close
1 query.Close
54
Paketinis web puslapiu generavimas

• privalumai indeksuojami, saugus
• trukumai letas apsisukimas

55
Dinaminis turinys

• realiai aktyvus web puslapiai
• duomenys atnaujinami kai tik pateikiami webe
• pateikimas
• bet kokia iš anksciau žinomu priemoniu CGI,
  applet-JDBC
• atnaujinimas
• web forma/sasaja -gt server script -gt atnaujina DB
• Pvz spektaklio vietu užsakymas
• problemos
• autentiškumas ir sugumas
• daugkartines operacijos susijusios su back
  klavišu
• teisingas žingsnis/kontrole ar reikalingas
  žmogus cikle?

56
n-tier architecture (client-server architecture
in which presentation, application processing,
and data management functions are logically
separated.)

• vienas ar daugiau tarpiniu sluoksniu
• 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