12 Johdanto seittiohjelmointiin

Transkriptio

1 Seuraavaksi tarkastelemme aidon WWW-ohjelmoinnin perusteita. Tarkoituksena ei ole vankan WWW-ohjelmoinnin oppiminen, vaan lähinnä eri ratkaisumallien esittely, jotta ohjelmoinnin perusperiaatteet tulisivat läpikäydyiksi ( näkemys ja tulevien opintojen perusta). WWW-ohjelmointia voi TTY:llä yksityiskohtaisemmin opiskella eri näkökulmista esim. kursseilla Seittiohjelmointi ja Hypermedian ohjelmointi. Dynaamisen, käyttäjät tunnistavan tai helposti ylläpidettävän WWW-hypermedian tekeminen edellyttää ohjelmointityötä. WWW:n asiakas-palvelin -mallista johtuen WWW-ohjelmointi suuntautuu kahteen erityyppisen ohjelmointiympäristöön - asiakas: WWW-selaimet (selaimen skriptiohjelmointi; esim. ECMAScript, sovelmien (applet) ohjelmointi; käytännössä Javalla, komponenttiohjelmointi; esim. ActiveXkehittimellä, selainlaajennusten (plug-in) ohjelmointi; esim. C++:lla) - palvelin: WWW-palvelimet (CGI-ohjelmointi, Java-ohjelmointi; esim. Servletit, erilaisiin WWW-moduuleihin perustuva ohjelmointi, esim. PHP, yleinen palvelinohjelmointi, esim. Java/C/Python/Perl-kieliset palvelinohjelmat) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 279 Ohjelmoinnin perusperiaatteet purevat tietenkin kaikkialla (suunnittelun ja dokumentoinnin merkitys, ohjelmien jako moduuleihin tai luokkiin, kehitysympäristön std-luokkien & rajapintojen käytön opettelu, jne.) Eri menetelmät vaativat kuitenkin erityisosaamistaan. Esimerkiksi WWWselainohjelmien erot sekä selainten jatkuva kehitystyö yhdistettynä heikkoon dokumentaation on tehnyt asiakaspään ohjelmoinnista käytännössä työlästä (eri selainten/selainversioiden erityispiirteet pitää tietää kohtuutarkkaan). Erikoisia pulmia aiheuttavat selainten päivityksistä aiheutuvat muutokset (se mikä toimii tänään ei ehkä toimikaan huomenna!) Nyrkkisääntö on kutakuinkin se, että asiakaspään ohjelmointi painottuu käyttöliittymäohjelmointiin ja tietoliikenteen asiakasohjelmointiin, palvelinpään ohjelmointi puolestaan prosessinhallintaan ja esim. tietokantojen käyttöön WWW-ohjelmoinnin peruspiirteitä - asiakkaiden ohjelmistot ja verkkoyhteys vaihtelevat (selaimet, nopeus) - samanaikaisia asiakkaita voi olla useita (käyttäjien tunnistaminen, tiedon lukitseminen, rinnakkainen prosessointi, käyttöliittymässä tapaht. muutokset) - Internet on avoin ja laaja järjestelmä (tietoturvakysymykset, kansainvälisyys) - taustalla tiiviit kytkennät Internet- & WWW-määrityksiin ja ohjelmistoihin MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 280 HTML-lomakkeet ja CGI-ohjelmointi Luonteva tapa aloittaa ohjelmointi on keksiä käyttöä HTML-lomakkeille. Eräs tapa on käyttää palvelimen CGI (Common Gateway Interface)-rajapintaa Esimerkki: minilaskin joka laskee yhteen kokonaislukuja <title>minilaskin CGI/PERL</title> <form action=" method="get"> <input type="text" name="lukua"> + <input type="text" name="lukub"><br> <input type="submit" value="laske"> <input type="reset" value="tyhjennä"> </form> Toiminta: selain lukee input-kenttien arvot talteen ja submit-napin painalluksella lähettää koodatut tiedot count.cgi-nimiselle (URL) ohjelmalle palvelimella Palvelimella (HTTP-palvelimen cgi-ajo-oikeuksin varustettu) ohjelma count.cgi käynnistetään pyynnön johdosta ja se vastaanottaa koodatut tiedot (GET ympäristömuuttuja/post stdin) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 281 #! /usr/bin/perl # HTTP-otsikko jotta stdout välittyy selaimelle oikein # voisi olla myös esim. text/plain tai image/gif printf "Content-type:text/html\n"; printf "\n"; printf "<title>cgi-ohjelman vastaus</title>\n"; # Kirjoitetaan näkyville asiakkaasta saatavia tietoja # (HTTP-palvelin kerää tiedot) printf $ENV{'REMOTE_HOST'."<br>"; printf $ENV{'REMOTE_ADDR'."<br>"; printf "[".$ENV{'QUERY_STRING'."]<br>"; # Luetaan koodatut numerot (oletetaan syötteen muoto oikeaksi), # lasketaan ja tulostetaan vastaus (URL:ssa + erottelee parametrit, # % koodaa erikoismerkit heksoina) $ENV{'QUERY_STRING' =~ /(\d+)[^\d]+(\d+)/; $v = $1 + $2; printf "<b>yhteenlaskun vastaus on ".$v."</b>"; Ohjelma tekee jotain ja tulostaa stdouttiin tekstiä joka lähetetään takaisin asiakkaalle Esimerkki: Ajo koneelta pc.tut.fi ( ) syötteillä 3 ja 6 tuottaa tuloksen: MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 282

2 pc.tut.fi [lukua=3&lukub=6] Yhteenlaskun vastaus on 9 Huomioita: - CGI-ohjelma on kirjoitettu Perl-ohjelmointikielellä (ts. CGI ei ole ohjelmointikieli vaan rajapinta) - CGI-ohjelman tuloste on HTML-tekstiä - ohjelman ajo tehtiin kertakutsuna; ts. syöte ajo tuloste - lomakkeen tiedot koodattiin GET-metodissa mukaan URI-tunnisteeseen ( - lomakkeen tietojen koodauksen purkaminen on tarpeen (tähän on valmiita ratkaisuja) - jos Perl-skriptin koodirivi $v = $1 + $2; olisi kirjoitettu muodossa $v = eval($1 + $2); olisi ohjelmassa selvä tietoturva-aukko HTML-lomakkeiden ohjelmointi JavaScriptillä Vastaava laskuohjelma voidaan toteuttaa myös asiakaspäässä esim. JavaScriptillä seuraavasti : <title>minilaskin JS</title> <script language="javascript"> <!-- function laske(a,b) { return 1.0*a+1.0*b; --> </script> <form> <input type="text" name="lukua"> + <input type="text" name="lukub"> = <input type="text" name="ans"><br> <input type="button" value="laske" onclick="ans.value=laske(lukua.value,lukub.value);"> <input type="reset" value="tyhjennä"> </form> CGI-toteutukset toimivat käytännössä huomattavasti varmemmin kuin JS-toteutukset MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 283 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 284 HTML:n lomake-elementit HTML 4.01 version mukaiset lomakkeet voivat sisältää seuraavantyyppisiä elementtejä - erilaisia painikkeita (myös omalla grafiikalla) - valintaruutuja (checkbox) - radiopainikkeita (radiobutton) - valikoita - tekstin syöttökenttiä (yksi- tai monirivisiä, myös salasanan syöttökenttä(password)) - piilotettuja kenttiä (esim. muuttujien taltioimiseen HTTP on tilaton protokolla) - tiedoston valintanappulan (toteuttaa myös valintadialogin tiedoston upload-toimintoa varten) - lomakkeen kentät tyhjentävän reset-nappulan Lomakkeiden käyttäminen vaatii aina ohjelmointia (HTML:n ulkopuolella) XHTML ja lomakkeet XHTML sisältää käytännössä kaikki HTML4:n lomake-elementit Suositus XHTML:n sanaston modularisoinnista nostaa seuraavat lomake-elementit keskeiseen asemaan (ts. ne sisältyvät Basic Forms Moduleen): - form - input ( text password checkbox radio submit reset hidden ) - label - select - option - textarea Erityisesti pois marginaalisina elementteinä jäävät esim. - input (image) - button (omaa grafiikkaa sis. nappulat), MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 285 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 286

3 PHP Pienten (joskus myös suurten) WWW-ohjelmien kirjoittaminen on toisinaan kätevintä seuraavalla idealla: - HTML-tiedostoon (osaksi merkkausta) upotetaan elementinomainen prosessointiohje, joka sisältää WWW-palvelinpäässä suoritettavan ohjelman tai skriptin - kun WWW-asiakas (selain) pyytää sivua, WWW-palvelin suorittaa skriptit ja sijoittaa näiden tulostaman tekstin osaksi HTML-dokumenttia, joka sitten lähetetään asiakkaalle (jos tuloksena on HTML-sivu näkyy se selaimessa ongelmitta) - jos ja kun skriptillä on muita vaikutuksia (esim. tiedostojen kirjoittaminen, tietokannan käsittely jne.), palvelin hoitaa myös ne pyynnön yhteydessä (tai välittää sopiville moduuleille edelleen suoritettaviksi) - tehtävästä huolehtiva WWW-palvelin (tai sen moduuli) voi jäsentää myös tietoliikenteessä liikkuvaa tietoa helposti käsiteltävään muotoon ja esim. piilottaa tilattoman HTTP-yhteysmuodon rajoituksia (tarjoamalla esim. mekanismin session tallettamiseen [esim. evästeiden avulla]) jne. Eräs tällainen (suosittu, ilmainen) ns. template-kieli on PHP MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 287 PHP:n käyttö PHP voidaan ottaa käyttöön esim. Apache-WWW-palvelinohjelman moduulina (asentaminen riippuu käyttöjärjestelmästä NT/Unix/Linux) PHP:n syntaksi muistuttaa suuresti Perliä (ja siten osin C:tä ja siten Javaa) Ohjelmointikielen perusrakenteiden ohella PHP:n (4) voima on sen sisältämien funktioiden määrä, esim. - tuttu syntaksi & säännönmukaiset lausekkeet - yksinkertainen olio-ohjelmointi - tiedostojenkäsittely - sessionhallinta, matalan tason soketti-ohjelmointi - eri tietokantojen käsittely SQL-kielellä - dynaamiset kuvat, jne. Parasta on se, että asiakaspään ei tarvitse tietää PHP:stä mitään Perus-PHP:n päälle on myös rakennettu sovelluskohtaisia kirjastoja MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 288 Esimerkki Toteutetaan taas minilaskin-lomake joka laskee kokonaisluvut yhteen: <title>minilaskin JS</title> <?php $v=$lukua+$lukub;?> <form action="<?php print $PHP_SELF;?>" method="get"> <input type="text" name="lukua" value="<?php print $lukua;?>"> + <input type="text" name="lukub" value="<?php print $lukub;?>"> = <input type="text" name="ans" value="<?php print $v;?>"><br> <input type="submit" value="laske"> <input type="reset" value="tyhjennä"> </form> Huomioita: - lomakkeen action-kentässä viittaus lomakkeeseen itseensä ($PHP_SELF) - yo. koodi ei ole HTML:ää, mutta prosessoinnin tulos on (joskaan ei validia sellaista) - muuttujien käsittely! (PHP purkaa lomakkeen muuttujien koodauksen automaattisesti) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 289 Esimerkki tiedostojen käsittelystä Toteutetaan astetta monimutkaisempi PHP-ohjelma, joka tulostaa attribuuttina annetun tiedoston <title>tiedoston tulostaminen</title> <h1>pfile</h1> <p>työhakemistosta löytyvät seuraavat tiedostot:</p> <pre> <?php system('ls -al');?> </pre> <p>kirjoita tulostettavan tiedoston nimi:</p> <form action="<?php print $PHP_SELF;?>" method="get"> <input type="text" name="fn" value="<?php print $fn;?>"> <input type="submit" value="tulosta"> </form> <?php if (preg_match("/[^\w\.\-]/",$fn,$arr)) { print "Virhe tiedoston nimessä: hakemistoviittaukset tms. eivät ole sallittuja!"; exit; MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 290

4 if (!file_exists($fn)) { print "Virhe: tiedostoa $fn ei löydy!"; exit; print "<p>tulostus:</p><pre>\n"; $fp = fopen($fn,"r"); while(! feof($fp)) { $s = fgets($fp, 1024); $s = preg_replace("/\</","<",$s); print $s; fclose($fp); print "</pre>\n";?> Huomioita: - lauserakenteet - tiedostonkäsittely, system-funktion käyttö, - PHP-funktioiden nimeämiskäytäntö (ei paketteja tms.) Java Java on C/C++-tyyppinen olio-ohjelmointikieli joka soveltuu hyvin WWW-ohjelmointiin - kansainvälisyyden huomiointi: Unicode, kansainvälistäminen (i18n): käyttöliittymien tekstit ja muut resurssit, tekstin suunta, päivämäärät yms. - suoraviivaiset välineet Internet-ohjelmointiin ja ohjelmien hajauttamiseen, rajapintoja tietokantojen käyttöön, tietoturvamallit yms. - aito olio-ohjelmointi (oikea perintä & kapselointi, paketit, rajapinnat) - laaja ja hyvin dokumentoitu luokkakirjasto, runsaasti rajapintatoteutuksia - yleisesti käytössä (sovelmien tuki on pulmallinen [selainsodat]) Java-ohjelmat käännetään tavukoodiksi, jota ajetaan Java-virtuaalikoneessa (valmis tavukoodi siirtyy alustalta toiselle) Runsaasti ilmaisia työkaluja & ohjelmointioppaita saatavilla Useita eri versioita (läh. 1.0 / 1.1 / 1.2=Java 2 / 1.5=Java 5 + laajennuksia [Swing]) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 291 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 292 Java-ohjelmia on mahdollista kirjoittaa kehittyneen IDE:n (Integrated Development Environment) tukemana ilman tietoa sovellusten yksityiskohdista (vrt..net/delphi); usein Java-ohjelmat kuitenkin kirjoitetaan tekstimuodossa (esim. emacs) ja käännetään skriptin avulla (esim. Apache Ant/GNU Make). WWW-ohjelmoinnin näkökulmasta Javalla tehdään kolmenlaisia ohjelmistoja - sovellukset (täysverinen Java-ohjelma) - sovelmat eli appletit (selaimessa tms. rajoitetun oikeuksin ajettava ohjelma) - servletit (CGI-tyyppisesti palvelinpäässä ajettavia Java-ohjelmia) Kaikki Java-ohjelmat kirjoitetaan samalla tavalla olio-ohjelmoinnin perusfilosofian mukaisesti Java-ohjelman tyyppi määräytyy sen luokan mukaan, josta oma ohjelma peritään - sovellus voidaan periaatteessa kirjoittaa ilman perintää (tällöin piilotettu oletusperintä Object-luokasta) - perus-sovelma peritään Applet-luokasta - perus-servletti peritään HttpServlet-luokasta Jokainen ohjelmatyyppi toteuttaa tarvittavat (perityt) metodit ja rajapinnat MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 293 Esimerkki: Java-sovelma Kirjoitetaan minimalistinen Java-sovelma (Java 1.1) joka laskee kaksi lukua yhteen ja näyttää vastauksen Java-ohjelma on varsin lyhyt (huom!: vaatii toimiakseen virtuaalikoneen & kirjastot ajettuna vaatii enemmän tilaa kuin tavukoodin 1.5 kb!): import java.awt.*; import java.awt.event.*; import java.applet.*; public class calc extends Applet implements ActionListener { TextField ta = new TextField(5); TextField tb = new TextField(5); TextField tc = new TextField(5); Button b = new Button("Laske"); MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 294

5 public void init() { b.addactionlistener( this); add( ta); add( new Label( "+")); add( tb); add( new Label( "=")); add( tc); add( b); public void actionperformed( ActionEvent ae) { int v = (new Integer(ta.getText())).intValue() + (new Integer(tb.getText())).intValue(); tc.settext((new Integer(v)).toString()); Sovelman upottaminen HTML-dokumenttiin: <applet code="calc.java" width="300" height="200"> </applet> Huomioita: - luokkien käyttö (AWT:n monimutkaisuus), kielen kielioppi, roskienkeruu, vahva tyypitys - luokkasidonnaisuus (kaikki perustietotyyppejä lukuun ottamatta toimii luokkien varassa) - jämerä ohjelmointimalli: 5min hack-spagetti-hack -ohjelmointi ei Javalla oikeastaan edes onnistu tästä on sekä hyötyä että haittaa (protoilun pulmat) - kehitysvälineet (javac, javadoc) Java-ohjelmointi edellyttää - Internet-tekniikoiden & olio-ohjelmoinnin perusteiden tuntemusta - Java-tietotyyppien & -luokkakirjastojen hallintaa - javadoc-muotoisen dokumentaation sisälukutaitoa - selkeää etukäteissuunnittelua: lyhytnäköinen (lue: hän-joka-ei-luokkia-suunnittele) Java-ohjelmoija kirjoittaa sovelluksen nopeasti solmuun ja tuloksena on vielä pahempaa spagettia kuin esim. PHP-koodi MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 295 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 296 Oikea väline WWW-ohjelmointiin? WWW-ohjelmointiin ei ole yhtä ainoaa oikeaa tekniikkaa Tekniikan valintaan vaikuttavat esimerkiksi - sovelluksen koko ja monimutkaisuus - tekijätiimin koko ja osaaminen - sovelluksen kohderyhmän käytössä olevat ohjelmistot ja laitteet - sovelluksen kohderyhmän osaamistaso ja tottumukset Palvelintekniikoiden kärjistetty suuruusjärjestys: - CGI: Python/Perl => palautelomake, vieraskirja - template-kielet: PHP/JSP/ASP => portaali, verkkokauppa - sovelluspalvelimet: J2EE(JBOSS/BEA WebLogic)/ColdFusion => sähköinen liiketoiminta, Web Services, intra- ja ekstranetit Mitä tuntemattomampi asiakas sitä vähemmän sovelluslogiikkaa voidaan sijoittaa selaimeen (JavaScript, Java-sovelmat, Active-X, pluginit)! MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 297 Tarve ohjelmointiin: mukautuva hypermedia Samaan tapaan kuin esim. navigointia helpottava kalansilmänäyttö muuttuu navigoinnin myötä, myös varsinainen asiasisältö voidaan (periaatteessa) mukauttaa käyttäjän tarpeiden mukaisesti Mukautuvalla (adaptive) hypermedialla tarkoitetaan tilannetta jossa esim. - hypertekstin linkkejä piilotetaan tai näytetään käyttäjän navigointihistorian/navigointistrategian/toiveiden mukaisesti - solmuihin lisätään osia tai niitä piilotetaan - hypertekstiin luodaan dynaamisesti uusia karttoja (tms. näkymiä) - myös osa sisällöstä tuotetaan dynaamisesti, jne. Käyttäjälle (lukijalle) välitettävän informaation tarkoituksenmukainen määrä on mitä ilmeisimmin käyttäjäkohtaista niinpä mielekäs aktiivinen mukauttaminen edellyttää jotain tietoa käyttäjästä. Tiedon keruumekanismeja: - suorat kysymykset (Mitä haluat tehdä/nähdä? Mitä osaat?) - epäsuora päättely (esim. päättely navigointihistorian/tehtävien perusteella) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 298

6 Mukautuvuuden tekninen toteutus tarvitsee taustalle käyttäjästä kertovan tietorakenteen eli käyttäjämallin ja mekanismin hypertekstin mukauttamiseen Rikas hypertekstirakenne Käyttäjämalli Käyttäjälle esitettävä hyperteksti Perusratkaisu (koska helppo toteuttaa!) käyttäjämallinnukseen on ns. overlay-mallien käyttö (hypertekstin graafiin merkitään informaatiota käyttäjästä, esim. tietääkö esitiedot/milloin lukenut/ymmärsikö/mitä haluaisi tietää/jne.) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 299 Esimerkki mukautuvan sovelluksen toteuttamisesta: - toteutetaan yksi mahdollisimman rikas hyperteksti - mallinnetaan käyttäjiä suhteessa tähän (esim. rikkaan semanttisen verkon avulla overlay-periaatteella [verkon rakenne ~ hypertekstin rakenne]) - alustetaan käyttäjämalli stereotyyppien noviisi/peruskäyttäjä/ekspertti avulla esim. lyhyen alkukyselyn tms. perusteella; päivitetään käytön myötä - linkkejä ja solmujen yksityiskohtia (mukautuvat elementit) näytetään mukautuvasti - epäsuora päättely tehdään käyttäjän lokitietojen perusteella; vaikeasti pääteltävät asiat kysytään suoraan käyttäjiltä epäsuoran päättelyn sijaan - päähuomio on näkymien ja karttojen mukauttamisessa Sisällön todellinen mukauttaminen edellyttää astetta järeämpien tekoälytekniikoiden tapauskohtaista käyttöä (esim. tietämyskantoja, joista tietoa julkaistaan hypermediasovellukseen) näissä taas törmätään tekoälytieteiden ongelmiin (tiedon esittäminen, kontekstin tunnistaminen, jne.) Toteutus vaatii sovelluskohtaisia ratkaisuja & ohjelmointia, ts. valmiita, yleisesti käytössä olevia alustoja ei prototyyppisovelluksia (esim. ELM ART, ks. lukuun ottamatta juuri ole MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 300 Lopuksi Monipuolisen hypermedian toteuttaminen edellyttää väistämättä työn automatisointia - rutiinitehtävät siirretään ihmiseltä tietokoneen vastuulle - tietokone on tyhmä, joten tieto on kuvattava täsmällisesti W3C:n Semanttinen Web tarjoaa keinot tiedon kuvaamiseen: - Resource Description Framework (RDF): resurssien ominaisuuksien kuvaileminen - Web Ontology Language (OWL): käsiteverkkojen (ontologia) täsmällinen kuvaaminen ohjelmallisen päättelyn (infer) tueksi Mukautuvan hypermedian ohella ohjelmointikielten avulla voidaan toteuttaa monikanavajulkaisemisen idea - erilaisten näkymien tekeminen samasta tietosisällöstä: mahdollistaa esimerkiksi laiteriippumattomien ja saavutettavien versioiden kustannustehokkaan toteuttamisen Käytännössä monikanavajulkaiseminen ja mukautuva hypermedia ovat pelkästään erilaisia lähestymistapoja samaan asiaan: monikanavajulkaisemisen avulla voidaan toteuttaa käyttäjän, käyttötilanteen tai päätelaitteen perusteella mukautuvia sovelluksi MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 301 Tietokoneet käsittelevät tietoa tiedostojen muodossa Tietokoneiden yhteydessä dokumentilla tarkoitetaan tiedosto(je)n avulla esitettävää asiakokonaisuutta, joka jäsennetään kokonaisuudeksi joko käyttäjän tai tietoa käsittelevän ohjelmiston näkökulmasta Jokaiseen dokumenttiin liittyy - sisältö, rakenne ja esitystapa (enemmän tai väh. toisiinsa sekoittuneina) Tietokoneiden tapauksessa nämä voidaan teknisesti erottaa (ainakin osittain) toisistaan, esim. seuraavasti 1) dokumentin sisältö kirjoitetaan suomen kielellä ja esitetään tekstimuotoisena 2) dokumentin looginen rakenne (otsikot, kappaleet, lainaukset, ) merkataan HTMLelementeiksi HTML-merkkauksen avulla 3) dokumentin ulkoasu (esitystapa) valitaan määrittelemällä em. elementeille ulkoasu esim. CSS-sääntöjen muodossa, WYSIWYG-tyyliin formatointiohjeina tai jätetään kokonaan dokumenttia esittävän ohjelman huoleksi MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 302

7 Esimerkki: HTML-dokumentti Seuraava dokumentti koostuu kolmesta tiedostosta esim.html (sisältö & rakenne), kuva.gif (dokumenttiin upotettu kuva) ja esim.css (ulkoasun määrittely): tiedosto esim.css body { background-color: white; h1 { color: black; font-size: 20px; font-weight: bold; p { color: blue; font-size: 12px; tiedosto esim.html: <html> <head> <title>moi maailma</title> <link rel="stylesheet" type="text/css" href="esim.css"> </head> <body> <h1>esimerkki</h1> <p> <img src="kuva.gif"> Dokumenttien kirjoittaminen on oikeastaan aika helppoa.</p> </body> </html> Dokumentit, tiedon mallintaminen ja esittäminen Karkeasti sanottuna: dokumentti on väline tiedon esittämiselle. Dokumentti (käsitteellinen kokonaisuus) voi teknisesti tosin olla esitettynä useassa tiedostossa, tietokannassa tai jopa tietokoneohjelman sisällä tulostusohjeina Tieto-käsitteen hankaluuteen ei tässä yhteydessä ole syytä syvällisemmin puuttua - tiedon akseli: tietämys - tieto - informaatio - data - kohina - klassinen näkemys ~ "tieto on perusteltu tosi uskomus" (tämä näkemys on yleisesti liian rajoittava [mitkä asiat oikeasti ovat tosia?]) - käytännöllinen näkemys ~ tieto on tavalla tai toisella merkityksellistä informaatiota (tässä taas ei oteta kantaa totuuteen, vaan yhteys käyttöön) Tiedon esittäminen perustuu johonkin tiedon esitysmuotoon ja on siten sidoksissa tietyn kuvausmenetelmän käyttöön Tiedon kuvausmenetelmiä on olemassa lukuisia erilaisia ja eritasoisia, esim. - käsitekartat, semanttiset verkot, predikaattilogiikka, formaalit teoriat, ER-diagrammit, UML-kaaviot, HTML, XML, CSS, XSL, MathML, SMIL, SVG, RDF MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 303 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 304 Kuvausmenetelmä valitaan sen perusteella, mistä tiedon piirteistä ollaan kiinnostuneita ja mitä tiedolla halutaan tehdä Esimerkki kakkureseptin erityyppisistä esitysmuodoista Erilaisten kuvausmenetelmien välillä voidaan löytää seuraavat ääripäät: - tiedon kuvaaminen tai jäsentäminen asiasisällön itsensä näkökulmasta ~ tiedon käsitteellinen rakenne ([content]) - tiedon kuvaaminen tai merkkaaminen asiasisällön esittämisen näkökulmasta ~ tiedon esitysrakenne ([presentation]) Esimerkki: kakkureseptin rakenteen kuvailu - taso 1: käsiterakenteen käsitteisiin ja relaatioihin liittyvien sopimusten esittäminen - taso 2: tiedon tiedostoksi koodaamiseen (elementtien rakenne ja sisältö) liittyvien sopimusten esittäminen - tämän lisäksi sama asia voidaan vielä kertoa välillisesti jonkin yleisen tekstin esitysrakenteen puitteissa (esim. muunnoksen tuloksena) Sisällön ymmärtävän lukijan näkökulmasta em. kolme tapaa voivat hyvinkin välittää saman tiedon, mutta esim. tietokoneiden näkökulmasta tiedon eri esitysrakenteet ovat hyvinkin erilaisia idea tiedon jäsentäminen kakkuresepti Kakkuresepti? osa on ainekset resepti TIETO IHMISEN MIELESSÄ osa valmistusohje tiedon mallintaminen tiedon esittäminen tai tiedosta kertominen otsikko ainesosa resepti resepti luku kplotsikko työvaihe kpl TIETO TIETOKONEESSA luettavissa oleva dokumentti MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 305 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 306

8 Esimerkki: matemaattisen kaavan x + a / b kuvailu MathML-merkkauskielellä: tapa 1: käsitteellinen merkkaus ([content]): <apply><plus/> <ci>x</ci> <apply><times/> <ci>a</ci> <apply> <power/><ci>b</ci><cn>-1</cn> </apply> </apply> </apply> tapa 2: esittämiseen liittyvä merkkaus ([presentation]): <mrow> <mi>x</mi> <mo>+</mo> <mrow> <mi>a</mi> <mo>/</mo> <mi>b</mi> </mrow> </mrow> Tieto ja metatieto Tieto-käsitteeseen liittyy läheisesti metatiedon käsite. Metatiedolla tarkoitetaan tietoa tiedosta Tieto ja metatieto ovat suhteellisia, informaation käytöstä riippuvia käsitteitä Tietojenkäsittelyssä metatiedolla tarkoitetaan annetun tieto-objektin tietyn kiinteän mallin mukaista kuvausta (vrt. luettelokortti) kirja lomake luettelokortti Metatietoa on kärjistetysti kahdenlaista: tiedon semanttiseen kuvailuun & luokitteluun liittyvää metatietoa (esim. tämä on muistio ) ja tiedon esitysrakenteeseen liittyvää rakenteellista metatietoa (dokumentin rakenneosia ovat "otsikko, leipäteksti ja kuva") MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 307 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 308 Esimerkki metatiedosta: RDF ja Semanttinen Web RDF (Resource Description Framework) on W3C:n Semanttisen Webin perusta Semanttisen Webin tavoitteena on tiedon esittäminen yhteensopivasti siten, että se on ihmisten lisäksi myös tietokoneiden käsiteltävissä RDF:n ideana on kuvailla tietoa ns. lausumien avulla: lausumat koostuvat resurssista, resurssille määriteltävästä ominaisuudesta ja ominaisuudelle annettavasta arvosta TIETO: KOODAUS: tekijä MALLINNUS: mailto:jukka.huhtamaki@tut.fi hmp:index.html dc:creator mailto:jukka.huhtamaki@tut.fi RDF-lausumista muodostuu graafi, jonka perusteella voidaan tehdä esimerkiksi hakuja ja ohjelmallista päättelyä (infer) Dokumentteihin sisältyy useantyyppistä tietoa Dokumentteihin liittyy oikeastaan siis aina useita eritasoisia ja -tyyppisiä koodauksia, esim. - sisällön koodaus (suomen kielen sanojen kirjoittaminen ASCII-merkkeinä, kuvien esittäminen bittikarttoina tai vektorigrafiikkana) - rakenteen koodaus (elementtien alku- ja lopputagit HTML:n mukaisesti) - ulkoasun koodaus (esim. elementtien ulkoasun määrittäminen CSSformatointiominaisuuksien mukaisesti) - toiminnallisuuden koodaus (esim. linkin seuraaminen, skriptit, ) joihin puolestaan saattaa sisältyä omia koodauksia, rakenteita & yms. sopimuksia, joista ei dokumentin yhteydessä välttämättä erikseen mainita (esim. suomen kielen kielioppi & dokumenttiin sisältyvien objektien koodaus, HTML-kielioppi, kuvien pakkaus, skriptien syntaksi, jne.) Tietokoneiden myötä dokumentteihin voi siis liittyä myös toiminnallisuutta (esim. linkin seuraaminen, animaatiot & dokumenttiin upotettavat ohjelmat) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 309 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 310

9 Tiedon kuvaaminen tekstimuodossa (tietokoneet) Erityyppiset tiedon esitystavat voidaan yleensä palauttaa tekstimuotoon Esimerkki: kakkureseptin käsitteellisen rakenteen palauttaminen logiikkaan part-of( ainesosa, resepti) part-of( valmistusohje, resepti) is-a( kakkuresepti, resepti) Esimerkki: reseptin tiedon esitysrakenteen palauttaminen XML-säännöiksi: <!ELEMENT resepti (ainesosa+, työvaihe+)> <!ATTLIST resepti nimi CDATA #IMPLIED> <!ELEMENT aineosa ()> <!ELEMENT työvaihe ()> Sääntöjä noudattava dokumentti voisi olla esim. seuraavanlainen <resepti nimi="suklaakakku"> <aineosa>jauhoja 3 desiä</aineosa> <aineosa>loput aineet</aineosa> <työvaihe>sekoita osat keskenään</työvaihe> <työvaihe>paista uunissa 200 asteen lämmössä</työvaihe> </resepti> MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 311 Käytännön suunnittelussa eri näkökulmien tulisi tukea toisiaan - aluksi tietoa analysoidaan & jäsennetään, jotta tiedettäisiin mistä on kyse - tämän jälkeen tieto mallinnetaan käytännöllisten tietorakenteiden muodossa, jotta tiedettäisiin mitä tietoa sovelluksessa esitetään ja miten? - lopuksi näistä tietorakenteista voidaan sitten rakentaa erilaisia esityksiä (minkälainen hyperdokumentti asiasta kertomiseen tai asian näyttämiseen tarvitaan?) Eli aluksi mietitään mitä halutaan esittää, sitten suunnitellaan minkälaisten tietorakenteiden varaan tieto rakentuu ja lopuksi valitaan missä muodossa asiat (lukijalle) esitetään Huom!: jos tiedon X esitysrakenne valitaan sen perusteella, miten asiasisältö esitettäisiin esim. HTML-sivuna, esitysvaiheessa hukataan (abstraktia) tietoa: - kirjoittaja saattaa (ainakin kirjoitusvaiheessa) ymmärtää tai muistaa mistä oli kyse, mutta myöhemmin dokumenttia lukiessa idea on rivien välissä; konkreettisena pulmana tiedon koneellisen käsittelyn hankaloituminen - ratkaisu: tiedon esittämiseen käytetään riittävän rikkaita kuvausmenetelmiä (esim. XML-pohjaisia sanastoja, joista tieto muunnetaan HTML-muotoon tarvittaessa) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 312 Automaattisen tietojenkäsittelyn idea Koska tietokoneet eivät ymmärrä koodatun datan merkitystä, pitää tiedon esitystapa valita käytössä olevien käsittelymenetelmien ehdoilla Keskeinen idea on ATK:n tuominen osaksi informaation käsittelyprosessia pelkän informaation tallettamisen sijaan ohjelmallinen käsittely siirrettävyys keskitetty ylläpito sovellukset ja käyttö Tiedon esitysrakenteista: hierarkkiset rakenteet Tiedon intuitiivisista esitysrakenteista tärkeimpiä ovat kurssilla jo aikaisemmin esitellyiksi tulleet graafit ja puut Juurelliset puut ovat havainnollisuutensa ansiosta erityisen käyttökelpoisia pienten hierarkkisten dokumenttirakenteiden esittämisessä (esim. HTML) Esimerkki: Yksinkertaisen HTML-dokumentin eri osat voidaan kätevästi jäsentää dokumentin rakennepuun (eli jäsennyspuun) avulla seuraavasti: informaatio, tieto ja näkemykset esittäminen tiedon sähköinen esitystapa salaus pakkaus varmennettavuus Tavoite: tietokone = (10 3 euroa maksava) muistilehtiö & lipasto tietokone = tiedon hallintajärjestelmä Keskeinen virhe on luulla, että tieto on (yleisesti) käyttökelpoisessa muodossa kunhan se vain jotenkin saadaan tietokoneelle koodattua (tavoitteet?!) head title Esimerkki html class="example" body h1 Johdanto p Tämä on tyypillinen HTML-dokumentti MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 313 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 314

10 Sama dokumentti näyttää HTML-koodattuna esim. seuraavalta: <html> <head> <title>esimerkki</title> </head> <body class="example"> <h1>johdanto</h1> <p>tämä on tyypillinen HTML-dokumentti.</p> </body> </html> Paitsi analysoida ja jäsentää annettuja dokumentteja, merkattujen puurakenteiden avulla voidaan intuitiivisesti myös määritellä dokumenttiluokkia Esimerkki: Seuraava ELM-puudiagrammi määrittelee yksinkertaisen dokumenttiluokan geneerisen elementtirakenteen (XML DTD yhteensopivasti) resepti + * ainesosa työvaihe Vastaava (vaikeampilukuinen?) XML dokumentin tyyppimääritys olisi muotoa <!ELEMENT resepti (ainesosa+, työvaihe*)> <!ELEMENT ainesosa ()> <!ELEMENT työvaihe ()> On syytä huomata, että sama asiasisältö voidaan esittää useita erilaisia dokumenttirakenteita käyttämällä Esimerkki: Kotisivuilta löytyvä asia voidaan kertoa HTML-dokumenttina siten, että käytetään monipuolisesti eri HTML-elementtejä (esim. h1, h2, p & address) tai siten, että sama asia kuvataan sanallisesti yhden ainoan p-elementin sisällä Dokumentin rakenteisuuden mitta on dokumenttiin koodattujen rakenne-elementtien runsaus eli granulariteetti - suuri granulariteetti eli pienet rakeet ~ rikas rakenne - pieni granulariteetti eli suuret rakeet ~ yksinkertainen (köyhä) rakenne Jos dokumentin rakenne on valittu systemaattisesti, sisällön merkitystä kuvaillen, parantuvat mahdollisuudet tiedonkäsittelyn automatisointiin tiedon arvo kasvaa (suurta tietomäärää voidaan hallita pienellä käsityön määrällä) MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 315 MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 316 Dokumenttirakenteiden määrittely (Rakenteisten) dokumenttien ja tietorakenteiden käytön yhteydessä (hypermediaan liittyviä) keskeisiä kysymyksiä ovat: - miten tietorakenne se-ja-se on määritelty? Ts., millaisia kaikki sovelluksen oikeantyyppiset tietorakenteen ovat? - kuinka dokumentista voidaan valita ankkurin kohteita dokumentin rakenneelementtien nimiä tai (yksityiskohtaisia rakenteitakaan) tuntematta? Rakenteisten dokumenttien, esim. HTML-merkkauksella merkityn tekstitiedoston tapauksessa vastaava kysymys on: miten todella tiedämme, että esim. dokumentti <title>esimerkki</title> <h1>kappaleotsikko</h1> <p>tämä kappale on oikein muodostettu</p> on oikein muodostettu, mutta seuraava dokumentti ei ole? <title>esimerkki</title> <h1>kappaleotsikko<p></h1> Tämä kappale on oikein muodostettu</p> MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 317 Vastaus piilee tavassa, jolla tietorakenne (dokumenttirakenne) määritellään; määrittelyn on oltava luonteeltaan sellainen, että se tarjoaa täsmällisen kuvauksen (tai mallin) kaikista sallituista tietorakenteista Edellä eräs tällainen kuvaustapa on edellä esitetty ELM-puudiagrammi, joka täsmällisesti luonnehti kaikkia resepti-tyyppisiä rakenteisia dokumentteja: DOKUMENTIN TYYPPIMÄÄRITTELY DOKUMENTTILUOKAN KÄSITE ainesosa MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 318 resepti + * työvaihe Tietokoneet eivät kuitenkaan operoi kuvilla, vaan merkkijonoilla (eikä em. puudiagrammien avulla ole mahdollista määritellä kaikkia tietorakenteita) Yleisessä tapauksessa, kun halutaan täsmällisesti luonnehtia tai poimia tietorakenteita viittausten avulla, tietorakenteet assosioidaan merkkijonoiksi joiden rakenteen käsittely tietokoneilla on tehokasta (ja johon löytyy valmiiksi määritelmiä ja tuloksia) Tällöin viime kädessä päädytään (formaalien) kielten käsitteisiin; idea on, että määriteltävän tietorakenteen malli vastaa kielen määrittelyä ja mallin mukaiset tietorakenteet vastaavat kielen yksittäisiä sanoja.

11 Formaaleista kielistä Pyrittäessä kieliopillisesti yksikäsitteisiin kieliin päädytään ns. formaalisten kielten käsitteisiin; tavoitteena on tällöin lähinnä (kohdekieleen liittyvän) kielenkäytön ja päättelyn täsmentäminen Koska kielet ovat sanojen joukkoja, käytetään kielille tuttuja joukko-opin merkintöjä ja operaatioita (sisältyminen, yhdiste, leikkaus, komplementti jne.) Kieliin liittyviä peruskäsitteitä: aakkosto (merkistö), sana, tyhjä sana λ, kielioppi Äärellisen kielen ilmoittaminen onnistuu aina periaatteessa kielen sanat luettelemalla - äärettömille kielille tämä ei ilmeisestikään onnistu Esimerkki: eräs kieli aakkostossa Σ={a,b,c on joukko L={a, ab, aaab, bab, ba Äärettömän formaalin kielen L ilmoittaminen voidaan tehdä usein eri tavoin (oleellisesti ominaisuusmääreiden tai tuottolausekkeiden avulla): - esim. säännöllisen lausekkeen avulla (jos L säännöllinen) - yleisessä tapauksessa kielen ilmoittaminen on usein tarkoituksenmukaista tehdä kielen sanat tuottavan kieliopin avulla MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 319 Lopuksi Hypermedian perusteiden keskeisin tavoite on pyrkiä määrittelemään hypermedian käsite ja esitellä keskeisimmät aiheeseen liittyvät periaatteet ja ideat; nyt tavoitteen pitäisi olla saavutettu Toinen keskeinen tavoite on oppia tekemään (käsin) käyttöliittymän näkökulmasta laadukasta WWW-hypermediaa Tulevilla teknisesti suuntautuneilla hypermediaan liittyvillä kursseilla on yksi keskeinen tavoite; nyt käsin tehtävän toteutustyön automatisointi. Tämä edellyttää osaamista sekä tietosisällön mallintamisen että erilaisten ohjelmallisten toteutustekniikoiden alueilla Laadukkaan hypermedian keskiössä on käyttäjä, jolle pyritään tarjoamaan tämän tavoitteiden, toiveiden ja mieltymysten mukaista sisältöä käyttäjälle parhaalla mahdollisella tavalla sopivassa muodossa => pelkkä tekninen osaaminen ei yksin riitä Kurssin suorittaminen alkaa olla tenttiä vaille valmis. Kiitokset kaikille osallistujille sekä erityiset kiitokset niille opiskelijoille, jotka ovat panostaneet kurssiin enemmän kuin mitä minimivaatimukset edellyttävät mukava huomata, että näitä löytyy kurssilta mukava määrä MATHM HYPERMEDIAN PERUSTEET (syksy 2006) 320