Syksy MATHM Johdatus hypermediaan (3 op) Luentorunko. 1 Käytännön järjestelyt. Mitä on hypermedia?

Transkriptio

1 MATHM Johdatus hypermediaan (3 op) Syksy 2009 Luentorunko Jaakko Salonen, Ilkka Kaikuvuo, Jukka Huhtamäki & Ossi Nykänen MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 1

2 0 Käytännön järjestelyt MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 2

3 Kurssin yleistiedot Luenoitsija: Jaakko Salonen (vastaanotto: ke 15-16) Yhteystiedot: Huone: TD310, Hypermedialaboratorio Luennot: keskiviikko ja torstai (TB104) Harjoitukset: ma 12-14, ti 10-12, ke 10-12, to (SB204) Harjoitusassistentti: Viljami Peltola Kotisivu: Tiedottaminen: Opintojakson kotisivut ovat kurssin pääasiallinen tiedotus- ja materiaalinjakokanava Helpotat kurssin seuraamista tilaamalla kotisivujen tiedotteet itsellesi joko RSS-uutistenlukijaan tai suoraan sähköpostiin katso ohjeet kotisivuilta MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 3

4 Suositeltavat esitiedot Suositeltavana esitietona on opintojakso OHJ-1010 Tietotekniikan perusteet. Erityisesti seuraavista perustaidoista on kurssilla hyötyä: Linux perusteet (mm. tiedosto-oikeuksien määrittäminen) Tiedostojen siirtäminen SSH:lla Internetin ja tietoverkkojen toimintaperiaatteiden ymmärtäminen Jos oma osaaminen askarruttaa, perusteista tuttujen taitojen kertaaminen ei ole pahitteeksi kurssin aluksi! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 4

5 Miten tämä kurssi liittyy muihin hypermedian opintoihin? MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 5

6 Opintojakson sisältö ja suorittaminen Opintojaksolla perehdytään hypermedian perusteisiin ja sen tekemisen eri osa-alueisiin. Osansa saavat hypermedian ja tietokoneen käytön teoriat, ohjelmistot, Internet, WWW ja HTML, standardit, käytännöt sekä sovellutukset, seuraavien pääkokonaisuuksien kautta: 1.Hypermedian peruskäsitteet 2.HTML ja rakenteinen merkkaus 3.CSS ja tyylien määrittely 4.Multimedia. Kuvan ja äänen esittäminen webissä 5.Videokuva ja videomateriaalin käyttö webissä 6.Hypermedian laadulliset piirteet HUOM! Opintojaksolla käsitellään siis myös asioita, joita perus-html-koodari ei välttämättä koe tarvitsevansa. Kaikki käsiteltävä asia ei myöskään ole luonteeltaan teknistä. Tämä on suoraa seurausta yllä olevasta. Opintojakson tavoitteena on peruskäsitteiden ja -taitojen omaksuminen. Idealistisena tavoitteena on aiheen kartoittaminen siten, että opintojaksolla muodostuisi perusta, jonka varassa asioihin voi tutustua yksityiskohtaisemmin siinä vaiheessa kun asioita pitää oikeasti tehdä ja osata. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 6

7 Kurssiin kuuluu Luennot viikoittain Viikkoharjoitukset toisesta viikosta alkaen Ilmoittautuminen POP:ssa Pienimuotoinen harjoitustyö (ohjeistetaan erikseen) Tentti MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 7

8 Viikkoharjoitukset ja harjoitustyö Viikkoharjoitukset Alkavat toisella viikolla. Viikkoharjoituksissa käydään läpi soveltavasta näkökulmasta kurssin asioita. Kulloisenkin viikon harjoitukseen osallistumisesta saa yhden porkkanapisteen. Harjoitustyö Harjoitustyössä sovelletaan viikkoharjoituksissa opittuja asioita ja työstetään niiden perusteella tehtävänannonmukaisesti web-sisältöä Harjoitustyö ajoittuu kurssin loppupuoliskolle ja se ohjeistetaan erikseen myöhemmin. Alustava aikataulu harjoitustyön palautukselle on tenttiviikon loppuun mennessä. Suurimman hyödyn saat kuitenkin kun teet työn ennen kurssin tenttiä! Harjoitustyöstä voi saadaan maksimissaan 3 porkkanapistettä Älä säikähdä: harjoitustyön ei ole tarkoitus olla iso tai työläs! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 8

9 Tentti Tentti koostuu neljästä kuuden pisteen tehtävästä. Maksimipisteet siis 24, Varsinaista tenttikirjaa ei ole vaan kysymykset pohjautuvat luennoilla ja harjoituksissa käytyihin asioihin ja esiteltyihin teemoihin. Tehtävistä kaksi teoria- ja kaksi soveltamispainotteisia. Tyypillisiä tehtävätyyppejä: Määrittelytehtävä: määrittele käsitteitä kurssin aihepiiriin liittyen. Painotuksena vastausten oikeellisuus ja täsmällisyys Esseevastaus: kirjoita annetusta aiheesta perusteltu ja pohdiskeleva, yhtenäinen teksti. Esseessä ilmaisutavalla on muita tehtävätyyppejä suurempi painoarvo. Tekniset täsmäkysymykset: tarkasti määritelty kysymys, johon tulee vastata annetun tekniikan puitteissa. Pisteytyksessä kriteerinä vastauksen tekninen oikeellisuus. Tekninen sovellustehtävä: MATHM JOHDATUS HYPERMEDIAAN (syksy 2009) 9

10 Arvosanan muodostuminen Arvosanat tentistä määräytyvät seuraavasti (maksimipisteet=24): 0 (hylätty): alle 12 pistettä 1 (välttävä): vähintään 12 pistettä 2 (tyydyttävä): vähintään 14 pistettä 3 (hyvä): vähintään 16 pistettä 4 (erittäin hyvä): vähintään 19 pistettä 5 (kiitettävä): vähintään 22 pistettä Porkkanapisteillä hyväksytyn tentin arvosanaa voi korottaa seuraavasti: [Lopulliset pisteet] = [Tentin raakapisteet] + [Porkkanapisteet] / 2 Esimerkkejä: 14 pistettä tentistä, 1 porkkanapiste: 4+1/2=14,5 pistettä -> ei korotusta arvosanaan 2 15 pistettä tentistä, 3 porkkanapistettä: 15+3/2=16,5 pistettä -> arvosanaksi nousee 3 19 pistettä tentistä, 6 porkkanapistettä: 19+6/2=22 pistettä -> arvosanaksi nousee 5 MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)10

11 Aineistoa verkossa Kurssilla ei ole erityistä kurssikirjaa. Opiskelussa kannattaa ensisijaisesti tukeutua verkkolähteisiin; ei ole yhtä yksittäistä kirjaa, josta kaikki asiat voisi kattavasti löytää. Opintojakson kotisivujen sisältö ja linkit ovat ensiarvoisen tärkeitä Kurssin kannalta keskeisinä asioina voidaan pitää HTML:ää ja CSS:ää, joiden kotisivuilla on runsaasti tietoa (toisinaan melko hankalalukuisessa muodossa) HTML Home Page - CSS Home Page - Opiskelussa kannattaakin tukeutua HTML- ja CSS-oppimateriaaleihin, esim. W3Schools - Joka tarjoaa itseopiskelumateriaalia W3C:n teknologioista huomattavan lukijaystävällisessä muodossa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)11

12 Kysymyksiä? MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)12

13 1.1 Hypermedian historia, kehitys ja tulevaisuudenkuvia MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)13

14 Memex (1945) Vuonna 1945 Vannevar Bush esittää ajatuksen koneesta, jolla voisi hallita suuria dokumenttiaineistoja perustuen mikrofilmaukseen Elektronisesti kirjastoon yhdistetty Memex pystyisi näyttämään kirjoja ja filmejä sekä automaattisesti seuraamaan viitteitä teosten välillä Keskeisenä motivaationa on nykykirjastojen ero ihmisen mielen toimintaan: When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome. Having found one item, morever, one has to emerge from the system and re-enter on a new path. The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughs, in accordance with some intricate web of trails carried by the celss of the brain MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)14

15 Demo: Memex Todellisuudessa Memexiä ei koskaan rakennettu, mutta Bushin visioinnin perusteella sen toimintaa pystyttiin mallintamaan (demo Memexin toiminnasta) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)15

16 Xanadu (1960) Ted Nelson perustaa Xanadu-projektin, tavoitteenaan luoda tietokoneverkko yksinkertaisella käyttöliittymällä: "A user interface should be so simple that a beginner in an emergency can understand it within ten seconds." Vuonna 1965 Nelson ottaa käyttöön hypertekstin käsitteen Xanadu kuitenkin tavoittelee paljon enemmän: Sen ytimenä toimiva tietorakenne on yksinkertainen ja pystyy automaattisesti hoitamaan mm. versioinnin ja digitaalisten käyttöoikeuksien hallinnan. Järjestelmää ei aikakaudellaan saada koskaan valmiiksi (demo Memexin toiminnasta) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)16

17 Hypertext Editing System ja FRESS ( ) Ensimmäiset toimivat hypertekstijärjestelmät saatiin tehtyä vasta myöhemmin Brownin yliopistossa toteutetut HES ja sen seuraajaa FRESSiä ajettiin IBM-keskustietokoneen muistilohkolla. Molemmissa järjestelmissä käyttäjä pystyi luomaan dokumenttien välille hyperlinkkejä, joiden perusteella dokumenteissa pystyi navigoimaan MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)17

18 Aspen Movie Map (1978) Hypertekstin ajatus jalkautui myöhemmin myös Multimediaan Vuosien 1978 ja 1979 vaihteessa työryhmä kuvaa Aspenin kaupungin keskustaa gyroskooppisesti vakautetulla pysähdyskuvakameralla, kartoittaen kuvasarjoiksi alueen keskustan kaduista. Kuvasarjat digitoidaan ja viedään näytinlaitteelle, jossa kosketusnäyttöä käyttäen voi virtuaalisesti navigoida Aspenin keskustassa MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)18

19 1980-luku Vasta 80-luvulla visionnit muuttuvat suuremmalle yleisölle käytännöllisiksi hypermedia-sovelluksiksi: Telos Software Filevision OWL Guide (1982) Apple HyperCard (1987) Macromedia Director (1989) Järjestelmien yhteisenä piirteenä on tiedon assosiatiivinen, epälineaarinen jäsennys: Hyperlinkit yhdistelevät dokumentteja ja niiden osi eri tasoisten asiayhteyksien (assosiaatioiden) avulla, mahdollistaen suoraviivaisesta jäsennyksestä poikkeavan (epälineaarisen) navigoinnin. Yhteistä on myös se, että kaikki järjestelmät ovat ohjelmisto- tai laitteistoriippuvia: tieto on saatavilla vain kyseisessä ympäristössä eikä siten helposti siirrettävissä esimerkiksi laitteelta toiselle. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)19

20 WWW ( ) Laiteriippuvuus oli kuitenkin laajempaan käyttöön kohtuuton rajoitus Fyysikoilla ympäri maailmaa oli tarve jakaa dataa riippumatta käytetyistä laitteista tai niiden ohjelmistoista. Maaliskuussa 1989 fyysikko Tim Berners-Lee, ehdottaa toteuttavaksi "suurta hypertekstijärjestelmää tyypitetyillä linkeillä" [3]. Vastaanotto ehdotukselle on nuivaa - Berners-Lee käynnistää toteutustyön lopulta itse MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)20

21 WWW (1991) Vuonna 1991 Berners-Lee julkistaa hankkeesta tietoja alt.hypertext-uutisryhmään: The WorldWideWeb (WWW) project aims to allow all links to be made to any information anywhere. [...] The WWW project was started to allow high energy physicists to share data, news, and documentation. We are very interested in spreading the web to other areas, and having gateway servers for other data. Collaborators welcome! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)21

22 WWW (1991) Palvelinten määrä lähtee melkein välittömästi kasvuun: Vuonna 1993 palvelimia on noin 200 Vuoden 1995 lopussa sivustoja on noin 100,000 Kasvu vuodessa on parhaillaan noin 2100 prosenttia [3] Palvelinten määrää on vaikea arvioida vuonna 2009 web-palvelimia voidaan kuitenkin arvioida olevan satoja miljoonia MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)22

23 WWW > Memex Nykyaikaisiin web-sovelluksiin verrattuna Vannevar Bushin visioima Memex tuntuu auttamattoman kömpelöltä. Google, Bing ja muut hakukoneet indeksoivat web-sisältöjä luoden yksinkertaisen hakukäyttöliittymän miljardeihin hyperlinkitettyihin web-sivuihin. Englanninkielisessä Wikipedia-tietosanakirjassa on noin 3 miljoonaa keskenään tehokkaasti ristiinlinkitettyä artikkelia eri aiheista. Amazon-verkkopalvelun kautta voi ostaa tuhansia ellei satojatuhansia tuotteita suoraan verkosta. Palvelu osaa jopa suositella henkilökohtaisesti juuri sinulle sopivia tuotteita. Myös multimedia-sisältöjen jakelu ja lähettäminen ovat helpottuneet. YouTube-videopalvelussa lähes kuka tahansa voi lisätä videoita, keskustella videoista sekä linkittää videoita keskenään muodostaen videoiden välille Memexin tavoin assosiatiivisia polkuja Tietoa voidaan yhdistellä myös palveluiden välillä. Tällä tavoin toimii esimerkiksi paikallisuutisia eri lähteistä kokoava EveryBlock.com MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)23

24 Lopuksi Mutta minkälaisia ovat tulevaisuuden verkkopalvelut ja web-sivustot? Entä selaimet? Paljonko webin käyttö tulee maksamaan? Tuleeko web pysymään jatkossakin avoimena? Mitä tietoja minusta on jatkossa saatavilla webistä? Kuinka ja millä arvoilla webin kehitystä ja kasvua ohjataan? Sisältöjen ja palveluiden kehityksen myötä myös web kehittyy Kehitys vaatii myös webin perusteknologioiden ja standardien kehittämistä ja uudistamista..kaikki kehitys ei myöskään välttämättä ole positiivista: tietyssä mielessä huolestuttavaa on myös web-sisällön ja -palveluiden keskittyminen yksittäisille, yhä merkittävämmille toimijoille. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)24

25 1.2 Internet, WWW ja HTTP MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)25

26 Internet: verkkojen verkko Internet on verkkojen verkko: se koostuu pienemmistä yhteen liitetyistä verkoista. Organisaation sisäinen tietoliikenne tapahtuu yleensä paikallisen lähiverkon avulla. Lähiverkon osista voidaan erottaa työasemat, palvelimet, verkkosovittimet sekä kaapelointijärjestelmä (tms. siirtotie). Lähiverkot yhdistetään keskenään reitittimillä. Yksittäinen tietokone voi toimia yhtä aikaa sekä työasemana, palvelimena että reitittimenä, mikäli siinä on riittävästi verkkosovittimia. Usein nämä tehtävät jaetaan kuitenkin fyysisesti eri laitteille (mieti miksi!) Lähiverkot yhdistyvät alueverkkoihin, jotka liittyvät keskenään yhteen valtakunnallisiin verkkoihin. Maailmanlaajuiseen verkkoon kytkeydytään globaalien tietoyhteyksien kautta (esim. Otaniemestä Tukholmaan). MUU INTERNET ALUE- VERKKO LÄHI- VERKKO MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)26

27 Intranet ja verkon työnjaon perusratkaisu: asiakas/palvelin-malli Asiakas/palvelin-mallissa verkon palvelut ja merkittävä osa tiedosta on keskitetty tiettyjen palvelinkoneiden hoidettavaksi Hyötynä saadaan tietoturvan, tiedon varmistamisen, päivittämisen ja tehtävien automatisoinnin helppous sekä tietoturvan ja käytön valvonnan perusratkaisut Toinen (harvinaisempi) malli on ns. peer-to-peer -malli, jossa koneet tapauskohtaisesti toimivat sekä palvelimina että asiakkaina Huomattava osa Internetin & Webin toiminnoista rakentuu asiakas/palvelin-mallin varaan luonteenomaista sovellusten hajautunut luonne ja yhtäaikaiset käyttäjät MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)27

28 Demo: Tiedon kulku Internetissä Tutkitaan, miten tieto kulkee Internetissä Tapoja VisualRoute ( ) Windows shell: tracert Mistä google.fi löytyy? Entä iceland.is? MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)28

29 Kuka omistaa Internetin? Mikään yksittäinen organisaatio ei yksin omista Internetiä Internetin kehitystä ja toimintaa valvovat erilaiset organisaatiot, kuten The Internet Society (ISOC). Mutta: Internet ei pyöri pelkästä hyväntekeväisyydestä: viime kädessä se pysyy toiminnassa, koska sen aktiivinen ylläpitäminen ja rakentaminen on toimijoille taloudellisesti kannattavaa. Rahan virtaus auttaa ymmärtämään myös Internetin rakennetta: Pienasiakkaat (yksittäiset kuluttajat, pk-yritykset) hankkivat nettiyhteytensä Internet-operaattorilta, joka maksaa kansallisia runkoverkkoja ylläpitäville teleoperaattoreille yhteyksien käytöstä. Teleoperaattori ostaa edelleen kaistaa globaaleista verkoista. Isommissa organisaatioissa lähiverkko saattaa olla suoraan yhteydessä runkoverkkoon. Orgaanisessa kasvussa Internetin rakenne on muotoutunut sellaiseksi, että jokainen osapuoli hyötyy. (Mielenkiintoinen näkökulma myös tutkimuksellisesti!) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)29

30 Internet verkkoon liittyminen - IP ja DNS Jokaisella Internetin isännällä (host eli verkkoon liitetty tietokone) on yksikäsitteinen Internet-osoite eli IP-osoite: IP:ssä osoite on 32-bittinen, esim , Osoitteet jakaa kansainvälinen NIC (Network Information Center) Verkkaisesti yleistyvä IPv6 laajentaa osoiteavaruuden 128-bittiin DNS (Domain Name System) eli selväkieliset Internet-osoitteet Hierarkkinen nimipalvelujärjestelmä, joka muuntaa nimiä IP-osoitteiksi Nimijärjestelmää ylläpidetään tasoittain, muunnos alkaa juurinimipalvelimelta: Suomessa nimipalveluista (.fi-loppuiset osoitteet) vastaa Viestintävirasto Esimerkki: matriisi.ee.tut.fi fi ~ Suomen ISO-maakoodi (ns. top level domain, TLD) ee.tut ~ TUT-organisaation (hierarkinen) tunnus (oma nimipalvelu) matriisi ~ isäntäkoneen nimi MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)30

31 Internet-palvelut Internet-palvelu on Internetissä toimivan isäntäkoneen palveluna tarjoama sovellus....arkisessa kielenkäytössä Internet-palvelu voi tarkoittaa ihan eri asiaa! Yksi isäntäkone voi tarjoata useita Internet-palveluja. Esimerkkejä palveluista: FTP-palvelu: tiedostojen siirty tietokoneiden välillä HTTP-palvelu: hypertekstin siirtopalvelu HTTPS-palvelu: hyperktestin siirtopalvelu salatulla yhteydellä SQL: Structured Query Language -tietokantayhteys Internet-palvelut yksilöidään porttinumeroiden perusteella. Tyypillisimmille palveluille on määritelty oletusportti. Oletusporteissa palveluja ajava isäntäkone voisi tarjota esimerkiksi seuraavat palvelut: HTTP-palvelu portissa 80 SSL-salattu HTTP-palvelu portissa 443 MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)31

32 World Wide Web (WWW) WWW on Internet-palveluiden varaan rakentuva metaverkko, joka WWWhypertekstin ohella tarjoaa integroidun graafisen käyttöliittymään verkon palveluihin erityistä selainohjelmaa käyttäen Näkymä Webiin rakentuu perusmuodossaan HTML-dokumenttien varaan, jotka tekstin ohella liimaavat yhteen mm. - lomakkeita ja objekteja (esim. kuvat, äänet ja sovelmat), Internet-palveluja (esim. sähköposti ja FTP) ja aitoja WWW-palveluja (CGI, Servlets, PHP, ), -...tarjoten siten saumattoman pääsyn WWW-palvelujen äärelle (esim. etäkomento tai näkymä tietokantaan) URIviittaus IP-osoite IP-osoite N WWW-palvelin WWW-asiakas MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)32

33 Web-hyperavaruuden perusta: URL-osoitteet Osoittamisen idea on resurssien yksikäsitteinen sijainti Internet-verkossa Perustana ns. URL-osoitteet (Uniform Resource Locators) Rakenne: protokolla://palvelin/hakemisto/tiedosto protokolla: http, https, telnet, ftp, gopher (muita: mailto, news, javascript, ) palvelin: HTTP-palvelinkoneen nimi (esim. matriisi.ee.tut.fi) hakemisto: WWW-dokumentin suhteellinen sijainti WWW-palvelimen dokumenttihakemistossa tiedosto: WWW-dokumentin tiedostonimi Osoitteet hierarkkisia, esim. Hakemisto ja tiedosto-osa voivat kokonaan puuttua tai ne saattavat olla mielivaltaisia HTTP-palvelinohjelman asetukset, unix-linkit, kehystekniikat, dynaamiset palvelut, index.html -tiedosto, yms. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)33

34 Tiedostojen jakaminen web-palvelimella WWW-palvelinkoneen HTTP-palvelinohjelman asetuksissa valittu alihakemisto näkyy siis WWW-dokumenttihakemistona. WWW-kotisivut ovat tämän käyttäjä- tai järjestökohtaisia dokumenttihakemiston alihakemistoja ja niissä majailevia tiedostoja WWW-sivujen tekeminen on periaatteeltaan erittäin yksinkertaista luodaan oma alihakemisto jonnekin WWW-dokumenttihakemistoon (esim. unixissa tyyliin mkdir ~/public_html, chmod a+rx ~/public_html) sisältömateriaali esim. HTML-, CSS- ja JPG-tiedostoina (cp * ~/public_html) lukuoikeuksien antaminen kaikille käyttäjille (chmod a+rx ~/public_html/*) WWW-dokumentin osoitteen kertominen muille (ks. WWW-palvelimet (esim. Apache) ovat varsin monipuolisia ohjelmistoja, mahdollistaen erilaisten ohjelmien suorittamisen palvelupyyntöjen yhteydessä (mm. skriptien ajaminen HTTP-pyynnön yhteydessä, uudelleenohjaukset ja linkitykset resursseihin) Demo: Kokeillaan tiedostojen jakamista web-palvelimella MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)34

35 Selain Tyypillisimmin asiakasohjelmisto on selain, mutta myös botit (esim. Google hakubotti) ja muut ohjelmat voivat toimia Internet-palveluissa asiakkaina Käyttäjälle selainohjelma tarjoaa useita helpotuksia webin käyttöön: Graafisen käyttöliittymän käyttäjälle ja yhtenäisen esityksen WWW-dokumentista Yhtenäisen käyttöliittymän eri protokollia hyödyntävään tietoliikenteeseen Apuohjelmia käyttäjälle navigointiin (usein myös kommunikointiin jne.) Teknisen alustan WWW-dokumenttiin sisältyville ohjelmille (esim. Java, Javascript) Kanavan tiedostojen käsittelyyn lokaalin koneen ohjelmilla sekä yhteyden verkon ja lokaalin koneen välillä (esim. tiedostojen siirto) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)35

36 HTTP eli kuinka tiedot siirtyvät web-palvelimelta selaimelle Hypertekstidokumenttien perustana on Hypertext Transfer Protocol (HTTP) -protokolla ja Internetissä sijaitseva HTTP-palvelinten verkosto kukin näistä WWW-palvelimista sisältää dokumenttihakemiston, jossa sijaitsevat tiedostot näkyvät osana Webiä perusmuodossaan idea on se, että HTTP-palvelimet välittävät em. julkaistuja tiedostoja näitä pyytäville asiakkaille Kuvien, äänien ja videokuvan siirtämiseen käytetään standardeja, de facto -sopimuksia ja MIME-koodauksia : GIF, JPEG, WAV, AVI, MPEG,... Käyttöliittymän ja tiedon integroinnin puitteet tarjoaa asiakaspäässä suoritettava selainohjelma (esim. Internet Explorer/Mozilla/Opera/Apple Safari/Lynx) Webissä näkyvien tiedostojen, tai yleisemmin, resurssien, sijainti (nimi) verkossa, esitystapa ja linkitys on yhteisesti sovittu Selain eli WWW-asiakas (tai agentti) pyytää WWW-palvelimelta tiedostoja ja osaa esittää ne hyperdokumenttina. Selain toteuttaa esim. linkityksen, dokumentteihin upotetut sovellukset ja paljon muuta. MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)36

37 Demo: Yksittäisen tiedoston hakeminen palvelimelta yli Kuvatiedoston noutaminen osoittesta Asiakas (selain) Otetaan yhteys palvelimeen example.com, porttiin 80 Lähetetään HTTP pyyntö GET /~jaakko/kuva.jpg HTTP/1.1 (Huom: kaksi rivinvaihtoa) Käsitellään vastaus HTTP/1.1 OK pyyntö suoritettiin onnistuneesti Palvelin (example.com) Palvelin kuuntelee TCP-porttin 80 tulevia pyyntöjä ja avaa uuden TCP-yhteyden kutsun saapuessa Vastataan HTTP-pyyntöön HTTP/1.1 OK Content-Type: image/jpeg Content-Length: (kuvatiedoston sisältö) TCP yhteys asiakkaaseen suljetaan, ellei pyynnön mukana erikseen toivota yhteyden säilyttämistä (Connection: Keep-Alive) MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)37

38 Web-sisältöjen yhdistely HTML:n avulla Tiedon yhdistely web-palvelimissa tapahtuu pääasiassa HTML-kielen avulla HTML (HyperText Markup Language) on tekstimuotoon kirjoitettava, rakenteinen merkkauskieli, jolla voi luoda useista web-resursseista (kuvista, videoista, jopa toisisista HTML-sivuista) tehtyjä koosteita HTML:n voidaan myös luoda viittauksia (=hyperlinkkejä) toisaalla oleviin webresursseihin Yksinkertainen (ja epätäydellinen) esimerkki, joka kokoaa yhdeksi web-sivuksi tekstikappaleen ja kaksi kuvatiedostoa: <p>tämä teksti näkyy leipätekstinä selaimessa.</p> <img src= kuva1.jpg /> <img src= /> <p>lisää kuvia löytyy <a href= >Flickeristä</a></p> MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)38

39 Demo: HTML-sivun avaaminen palvelimelta Tallennetaan em. yksinkertainen HTML-esimerkki palvelimelle tiedostoksi index.html Tutkitaan mitä tapahtuu, kun selaimella avataan ks. sivu Montako HTTP pyyntöä selain tekee palvelimelle? Onnistuuko kaikkien sisältöjen lataus? Mitä selain jättää lataamatta? MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)39

40 Lopuksi Yksittäisten tiedostojen siirtäminen ja jakaminen web-palvelimella on yllättävänkin helppoa Tiedostojen jakaminen kavereiden kesken web-palvelimella onnistuu melko vaivattomasti HTML näyttää päällisin puolin helpolta ja näppärältä. Sen käytännön soveltaminen voi ainakin paikoin olla todella haastavaa. Tästä on kuitenkin hyvä jatkaa! MATHM JOHDATUS HYPERMEDIAAN (syksy 2009)40