Ajax-työkalupakit. Eero Anttila. Helsinki Pro gradu -tutkielma HELSINGIN YLIOPISTO. Tietojenkäsittelytieteen laitos

Koko: px
Aloita esitys sivulta:

Download "Ajax-työkalupakit. Eero Anttila. Helsinki 23.5.2007. Pro gradu -tutkielma HELSINGIN YLIOPISTO. Tietojenkäsittelytieteen laitos"

Transkriptio

1 Ajax-työkalupakit Eero Anttila Helsinki Pro gradu -tutkielma HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos

2 HELSINGIN YLIOPISTO HELSINGFORS UNIVERSITET Tiedekunta/Osasto Fakultet/Sektion Laitos Institution Matemaattis-luonnontieteellinen tdk Tietojenkäsittelytieteen laitos Tekijä Författare Eero Anttila Työn nimi Arbetets titel Ajax-työkalupakit Oppiaine Läroämne Tietojenkäsittelytiede Työn laji Arbetets art Pro gradu -tutkielma Tiivistelmä Referat Aika Datum Sivumäärä Sidoantal liitesivua Viime vuosina on ruvettu hyödyntämään JavaScriptiä entistä enemmän WWW-selaimissa sovellusten käytettävyyden parantamiseen. Valitettavasti selaimet käyttäytyvät eri tavoin ja sisältävä usein myös virheitä. Ongelman ratkaisemiseksi voidaan käyttää Ajax-työkalupakkia, joka abstrahoi selaimen tarjoaman rajapinnan samalla tavalla kuin C-kielessä kirjastot abstrahoivat käyttöjärjestelmän. Ajax-kirjasto tarjoaa käyttöliittymäkomponentteja, efektejä sekä työkalut tapahtumien käsittelyyn ja asynkronisten pyyntöjen lähettämiseen. Koska työkalupakkeja on yli 40, voi sopivan löytäminen omiin tarpeisiin olla vaikeaa. Tässä tutkielmassa vertailun kohteena oli kolme Ajax-työkalupakkia: Dojo Toolkit, Yahoo UI ja Google Web Toolkit. Jokaisella työkalupakilla tehtiin kolme eri harjoitusta: automaattinen hakukentän täydennys, päivämääränvalitsin ja automaattinen lomakkeen tarkistus. Harjoituksista kirjattiin koodirivien ja tiedostojen määrä, suorituskykytiedot sekä ajankäyttö eri asioihin. Tulosten perusteella tultiin siihen tulokseen, että Google Web Toolkit soveltuu parhaiten raskaiden Ajax-sovellusten toteuttamiseen, Yahoo UI keveiden ja Dojo Toolkit näiden kahden välimaastoon. ACM Computing Classification System (CCS): C.2.6 [Internetworking] D.2.8 [Metrics] D.3.2 [Language Classifications] H.5.2 [User Interfaces] Avainsanat Nyckelord Ajax, JavaScript, Dynamic Web Säilytyspaikka Förvaringställe Kumpulan tiedekirjasto, sarjanumero C- Muita tietoja

3 i Sisällys 1 Johdanto Ajax ja dynaamisten web-sivujen toteutus Staattiset web-sivut ja tyyliohjeet Dynaamisten web-sivujen toteutustekniikoita Asynkroniset palvelupyynnöt Ajax-tekniikka Ajaxille vaihtoehtoiset tekniikat Ajax-työkalupakit Ajax-arkkitehtuurien yleiskuvaus Nimiavaruudet ja pakkaukset Dokumentointi Kehitysympäristö Käyttöliittymäkomponentit Tapahtumien hallinta Ajax I/O Vertailun ulkopuolelle jääneet työkalupakit Arviointi ja vertailumenetelmät Ohjelmistoprosessin vaiheet ja niihin liittyvät mitat Harjoitukset Tuotetun koodin mittaus Tuotettujen sovellusten vertailu käyttäjän näkökulmasta Vertailun tulokset Sovellusrungon kuvaus Käyttöliittymäkomponenttien toimivuus Sovellusten vertailu Prosessien vertailu...46

4 ii 5.5 Johtopäätökset työkalupakkien soveltuvuuskohteista Yhteenveto...54 Lähteet...57 Liitteet 1 Muistiinpanot Dojo Toolkitin harjoituksista 2 Muistiinpanot Yahoo UI:n harjoituksista 3 Muistiinpanot Google Web Toolkitin harjoituksista 4 Palvelinpään koodi automaattiselle lomakkeen tarkistukselle 5 Dojo Toolkit -harjoituksen koodi 6 Yahoo UI -harjoituksen koodi 7 Google Web Toolkit -harjoituksen koodi

5 1 1 Johdanto Vuonna 1989 Tim Berners-Lee esitteli HTML (Hypertext Markup Language) -kielen Internetin julkaisukieleksi. Kieltä käytettiin fysiikan tieteellisten kirjoitusten esittämiseen CERN:ssä (Organisation Européen pour la Recherche Nucléaire). Kieli tarjosi tekstin peruselementit, kuten otsikot ja kappaleet, sekä mahdollisuuden viitata käytettyyn lähteeseen hyperlinkillä [RLA98]. Mahdollisuus tehdä linkkejä toisella palvelimella sijaitsevaan dokumenttiin oli vallankumouksellista. Tästä alkoi HTML:n kehitys. Tähän päivään asti Internetin käyttäjien määrä on kasvanut räjähdysmäisesti. Sekä selainten että standardien kehitys on ollut jatkuvaa. Alun perin HTML-kielellä esitettiin lähinnä artikkeleita ja muita tekstejä, joita päivitettiin käsin. Kielen lähtökohtana oli, että dokumentti sisältää ainoastaan loogisen rakenteen, kuten otsikot, kappaleet ja listat. Näin kukin selain esittää sisällön omalla tyylillään tai käyttäjä voi määritellä itselleen mieluisan tyylin. Dokumenteissa saattoi esiintyä kuvia, jotka liittyivät lähinnä tekstiin, mutta niitä ei käytetty ulkoasuun. Ajan myötä myös yritykset innostuivat tekemään sivuja Internetiin. Pian koettiin tarvetta määritellä ulkoasu siten, että sivu näyttäisi samalta kaikille käyttäjille. Sivulla haluttiin esimerkiksi käyttää yrityksen omia värejä selaimen oletusvärien sijaan. Tämä johti HTML:n laajentumiseen. Kieleen tuotiin mukaan muotoilua kuvaavia elementtejä, kuten fontin ominaisuudet, värit ja tasaus. Tämä tosin rikkoi alkuperäisen HTML:n ideologian toimia ainoastaan sisällön kuvaajana. Tämän seurauksena otettiin myöhemmin käyttöön tyyliohjeet, joilla sisältö ja muotoilu saatiin pidettyä toisistaan erillään. Pian myöskään staattiset, käsin päivitettävät sivut eivät enää riittäneet. Yritykset halusivat esimerkiksi julkaista verkossa päivittäisiä uutisia. Tätä varten tarvittiin kieli palvelinpäähän [Atk99, FKB01]. Sen avulla sivun latauksen yhteydessä voitiin sisältö generoida automaattisesti esimerkiksi tietokannan sisällöstä [Fra99]. Sivuille tuotiin myös lisää vuorovaikutteisuutta tarjoamalla lomakkeita. Niillä käyttäjä pystyi esimerkiksi hakemaan tietoa avainsanoilla ja syöttämään yritykselle henkilötietoja. Alkuaikoina sivut olivat lähinnä kirjan tyyppisiä: sivuilla tarjottiin sisällysluettelo, josta päästiin lukuihin ja selain tarjosi mahdollisuuden palata navigointihistoriassa taaksepäin ja tallentaa kirjanmerkkejä. Nykyään monet sivut muistuttavat enemmän sovelluksia kuin dokumentteja: on karttasovelluksia, lipunvarausjärjestelmiä, arkistointisovelluksia ja keskustelusivuja. Paluunappi ja kirjanmerkki ovat tällaisille sovelluksille vieraita käsitteitä, jotka selain kuitenkin edelleen tarjoaa. Tämä

6 2 aiheuttaakin paljon ongelmia nykyaikaisissa verkkosovelluksissa. HTML-kieltä ei alun perin ollut tarkoitettu siihen mihin sitä nykyään käytetään. Tätä ongelmaa on pyritty helpottamaan erilaisilla palvelinpään sovelluskehyksillä, jotka tarjoavat helpomman tavan tehdä dynaamisia WWW-sovelluksia. Myöhemmin mukaan tulivat selainpään kielet, kuten Java-sovelmat sekä Flash- ja ActiveX-sivut [All02, Rob07]. Näillä saatiin sivuille lisää dynaamisuutta ja näyttävyyttä animaatioilla ja erilaisilla käyttöliittymäkomponenteilla. Näin sivuista saatiin työpöytäsovellusten kaltaisia. Sivuilla on kuitenkin tyypillisesti ollut ongelmina työpöytäsovelluksiin verrattuna hitaus ja rajoitettu käytettävyys. Nyt sovelluskehittäjät ovat luopuneet näistä kielistä ja palanneet tekemään WWWsovelluksia jo 1990-luvulla kehitetyllä JavaScript-kielellä [ECM99], koska sillä tehdyt sivut ovat paljon kevyempiä. JavaScript tarjoaa mahdollisuuden muokata WWW-sivun sisältöä dynaamisesti lataamatta sivua uudestaan palvelimelta. (Tosin) alkuvaiheessa kieltä käytettiin tosin lähinnä lomakkeiden kenttien kohdistamiseen, ponnahdusikkunoiden avaamiseen ja huomautusruutujen näyttämiseen, vaikka se on todellisuudessa kunnollinen ohjelmointikieli. Periaatteena on ollut pitkään, että sivun pitää toimia myös ilman JavaScriptiä, koska kaikki selaimet eivät välttämättä tue sitä tai se on kytketty selaimesta pois päältä tietoturvasyistä. Nykyään selainten tietoturva on parantunut, samoin kuin niiden yhteensopivuus, ja lähes kaikki selaimet tukevat JavaScriptiä. Vasta viime aikoina on kiinnostuttu dynaamisten sivujen tarjoamista eduista, vaikka JavaScript on ollut käytössä jo yli kymmenen vuotta. Tästä hyvänä esimerkkinä ovat Googlen tuotteet, joista tunnetuimmat lienevät Gmail [Gma06] ja Google Maps [Goo06]. Gmail-postiohjelmassa esimerkiksi vastaanottajan osoitekenttään kirjoitettaessa näytetään ne syötetyllä merkkijonolla alkavat yhteystiedot, jotka löytyvät osoitekirjasta. Näistä voidaan valita haluttu hiirellä tai näppäimistöllä. Tämä toiminto on toteutettu hakemalla osoitekirjan tiedot valmiiksi piiloon selaimelle. Näin käyttöliittymää pystytään päivittämään käymättä turhaan palvelimella. Google Maps -karttaohjelmassa taas karttaa on mahdollista siirtää hiirellä, jolloin puuttuvat karttapalaset noudetaan palvelimelta sitä mukaa, kun niitä tarvitaan. Koko sivua ei siis koskaan tarvitse ladata uudestaan. Edellä mainitut esimerkit mahdollistaa niin sanottu Ajax (Asynchronous JavaScript and XML) -tekniikka [Gar05]. Tekniikka tarjoaa mahdollisuuden tehdä palvelinkutsuja JavaScript-koodista käsin, jolloin selaimen näkymää pystytään päivittämään palvelimelta lataamatta uudestaan koko sivua. Tekniikalla voidaan myös toteuttaa

7 3 monipuolisia käyttöliittymäkomponentteja, animaatioita ja vaikkapa raahaustoiminto (drag and drop). Lyhyessä ajassa on markkinoille kehitetty useita erilaisia Ajax-työkalupakkeja (Ajax Toolkit). Niiden tarkoituksena on tarjota ohjelman kirjoittajalle mahdollisuus toteuttaa dynaamisia sivuja korkealla, selainriippumattomalla tasolla. Työkalupakkeja on jo yli 40 [Aja06]. Osa niistä on JavaScript-kirjastoja, osa sovelluskehyksiä Javalle tai muille kielille ja osa kokonaan omia kieliä. Monet yritykset ovat kiinnostuneet Ajaxia hyödyntävistä sovelluksista sen takia, että ne eivät vaadi asennusta asiakkaan koneille, koska ne toimivat selaimessa, joka löytyy jokaisen koneelta. Päivityksiä tarvitsee tehdä vain palvelimelle, jolla sovellusta ajetaan, ja ohjelmaa voidaan käyttää miltä koneelta hyvänsä. Google on esimerkiksi julkaissut selaimessa toimivan toimistosovelluspaketin, joka sisältää taulukkolaskennan, kirjoitusohjelman, sähköpostin ja kalenterin. Jopa dokumentitkin tallentuvat verkkoon, mikä vähentää entisestään CD-levyjen ja muistikorttien käyttöä. Yleisesti Ajaxia hyödyntävien projektien haasteena on kuitenkin uuden tekniikan ja kielen omaksuminen sekä sopivan Ajax-työkalupakin löytäminen suuresta valikoimasta. Lisäksi Ajax-työkalupakeista ei toistaiseksi ole vielä tehty tutkimuksia. Tämän pro gradu -tutkielman tavoitteena on vertailla eri Ajax-työkalupakkeja ja arvioida niiden soveltuvuutta ohjelmistoyritys Solitalle (www.solita.fi). Sovelluskehyksistä keskitytään Yahoo UI (YUI) [Yah06], Dojo Toolkit [Doj06] sekä Google Web Toolkit (GWT) [GWT06] -työkalupakkien esittelyyn ja vertailuun. Nämä ovat valittu niiden suosion ja ominaisuuksien perusteella sekä siksi, että ne soveltuvat myös yhteen Spring-sovelluskehyksen kanssa [ArA05], joka on laajasti käytössä Solitassa. Esimerkkisovelluksen käyttö on vertailussa välttämätöntä, sillä työkalupakki ei yksin tee mitään, vaan se tarvitsee ympärilleen jonkin toteutuksen. Vertailun pohjana käytetään jo toteutettua Työntekijä-Osasto-sovellusta. Tätä sovellusta on tarkoitus laajentaa tarpeellisilla Ajax-ominaisuuksilla kullakin työkalupakilla. Ominaisuudet tulevat olemaan dynaaminen lomakevalidointi, hakufiltteri sekä päivämääränvalitsin. Tavoitteena on myös antaa yritykselle tietoa siitä, millä työkalupakilla kannattaa tulevaisuutta ajatellen tehdä web-sovelluksia ja mihin käyttökohteisiin eri työkalupakit soveltuvat parhaiten. Tyypiltään tämä pro gradu -tutkielma on puoliksi kirjallisuuskatsaus ja puoliksi ohjelmointia sekä mittausta. Luvussa 2 käsitellään staattisten ja dynaamisten WWW-sivujen perusasioita, jotka muodostavat pohjan sen jälkeen käsiteltävälle Ajax-tekniikalle. Tämän jälkeen esitellään vielä Ajaxille vaihtoehtoiset tekniikat. Luvussa 3 esitellään tutkielmassa

8 4 vertailtavat työkalupakit ja niiden arkkitehtuurit. Luvussa 4 tutustutaan prosessille ja lopputulokselle käytettäviin arviointimenetelmiin. Luvussa 5 vertaillaan työkalupakeilla tehtyjä esimerkkisovelluksia sekä itse ohjelmointiprosessia. Luvun lopussa kerrotaan vertailujen johtopäätökset. Luku 6 on yhteenveto. Esimerkkisovellusten muistiinpanot sekä koodit ovat liitteenä (Liitteet 1-7).

9 5 2 Ajax ja dynaamisten web-sivujen toteutus WWW-sivut ovat melko tuore asia, ja standardien ja selainten kehitys on ollut huimaa. WWW-sivujen alkuperäinen idea oli esittää tietoa Internetissä hypertekstimuodossa eli dokumentissa oli linkkejä toisiin dokumentteihin. Tämän lisäksi sivuille sai tehtyä myös perusmuotoilut, kuten otsikoinnin ja kappalejaon. Ensimmäinen graafinen WWW-selain, Mosaic [NCS93] julkaistiin vuonna Tästä alkoi kiivas selainvalmistajien välinen markkinakilpailu. Tuohon aikaan sivujen tarkoituksena oli lähinnä esittää staattista sisältöä. Mosaicin julkaisua seuraavana vuotta julkaistiin ensimmäinen Netscape Navigator [PfB95], josta tuli markkinoiden suosituin selain ja joka säilytti asemansa pitkään. Edelleen vuotta myöhemmin markkinoille tuli ensimmäinen Internet Explorer (IE) [RoS99]. Tuohon aikaan selaimissa ei vielä ollut tukea tyyliohjeille eikä JavaScriptille [ECM99]. Niistä ajoista kehitystä on kuitenkin tapahtunut paljon. Standardeja ja suosituksia on ohjannut ja kehittänyt W3C (World Wide Web Consortium) [W3C06]. Selainvalmistajat ovat kehittäneet selaimia näiden standardien ja suositusten perusteella, tosin vaihtelevalla menestyksellä. Esimerkiksi tälläkään hetkellä markkinoiden yleisin selain, Internet Explorer 6 ei tue virheettömästi W3C:n määrittelemiä standardeja. Tästä on seurannut se, että kehittäjät ovat joutuneet tekemään epästandardeja sivuja, jotta ne toimisivat tällä selaimella. W3C-standardien laiminlyöminen taas on johtanut siihen, että sivut näkyvät väärin muilla standardeja tukevilla selaimilla, kuten Mozillalla [Wei06]. Nykyään kolme suosituinta selainta ovat Internet Explorer, Firefox ja Opera. Firefoxin ydin pohjautuu Mozillaan, joka taas pohjautuu Netscapeen. Tässä luvussa esitellään tärkeimmät Ajaxin taustalla vaikuttavat WWW-standardit (HTML, CSS, XMLHttpRequest, JavaScript) sekä Ajaxille vaihtoehtoiset tekniikat (Java applet, Flash). 2.1 Staattiset web-sivut ja tyyliohjeet HTML (Hypertext Markup Language) kehitettiin 1990-luvun alussa Internetin julkaisukieleksi [BeC93]. Alun perin HTML tuki ainoastaan hyperlinkkejä ja yksinkertaista muotoilua. Vasta myöhemmin kieleen tuli tuki taulukoille, lomakkeille ja kuville, joilla sisällöstä saatiin monipuolisempaa. Vielä myöhemmin tuli tuki tyyliohjeille, sivujen dynaamisuudelle ja erilaisille liitännäisille (plug-in), joista enemmän seuraavassa luvussa.

10 6 Ensimmäinen kunnollinen Internetiin tarkoitettu hypertekstikieli HTML 2.0 [BLC95] julkaistiin 90-luvun puolivälissä, mutta vasta vuonna 2000 siitä tuli kansainvälinen standardi. Viimeisin versio HTML 4.01 [HTM99] julkaistiin vuoden 1999 lopulla. Ensimmäinen XML-pohjainen (Extensible Markup Language) merkkauskieli XHTML 1.0 [Pem00] julkaistiin vuonna Tähän saakka WWW-sivuja on kehitetty jommalla kummalla edellä mainituista kielistä, mutta XHTML on syrjäyttämässä HTML:n. XHTML on XML-muodossa, joka on kurinalaisempi kuin tavallinen HTML. XML on hyvin määritelty eli se ei salli lomittaisia elementtejä, auki jääviä elementtejä, eikä attribuuttien arvoja ilman lainausmerkkejä. Lisäksi se tulkitsee suuret ja pienet kirjaimet erikseen ja vaatii dokumenttityypin määrittelyn (Document Type Definition, DTD). XML:n etuna on syntaksin helpompi tarkistus ja kielen monipuolinen käyttömahdollisuus esimerkiksi mobiililaitteissa. Alun perin HTML oli tarkoitettu vain sisällön esitystä varten, mutta käyttäjien tarve tehdä muotoiltuja sivuja laajensi kieltä. Sivuista tuli tämän johdosta raskaita ladata ja ylläpitää [RLA98]. Tämän ongelman ratkaisemiseksi kehitettiin tyyliohje (Cascading Style Sheet, CSS), jonka tarkoituksena on erottaa sisältö muotoilusta. Sen ensimmäinen versio (CSS level 1) [CSS96] julkaistiin vuonna 1996, ja se on tällä hetkellä yleisimmin käytössä. Siitä paranneltu CSS2 julkaistiin joulukuussa 1997, mutta esimerkiksi Internet Explorer 6 ei tue sitä. Viimeisimmän tyyliohjeen version, CSS3:n [ErB01] kehitys aloitettiin vuonna 1998, ja se on yhä kehitteillä. Käytettäessä tyyliohjeita tyylimääritykset on mahdollista antaa erillisessä tiedostossa, liittää dokumentin alkuun tai tuoda elementtien sisälle style-attribuutilla (ks. Listaus 2.1). Näistä ensimmäinen vaihtoehto on paras, koska silloin koko sivuston tyyli on helppo yhtenäistää yhdessä paikassa. Erillisten tyyliohjeiden etuna ovat myös omat tyylit näyttö- ja tulostusesitykselle. Keskimmäinen ja viimeinen vaihtoehto soveltuvat käytettäväksi silloin, kun muotoilumääritys on erikoistapaus. HTML-koodi pysyy selkeänä ja luettavana pitämällä tyylimuotoilut erillään sisällöstä, jolloin muotoilua kontrolloidaan vain yhdestä paikasta. Tämä parantaa myös esteettömyyttä (accessibility) näkö- ja kuulorajoitteisille sekä mobiililaitteiden käyttäjille. Listauksessa 2.2 on annettu esimerkki hyvästä ja huonosta tavasta tehdä HTMLkoodia. Esimerkissä tulostetaan otsikko suurella punaisella ja kappale pienellä, jossa on lisäksi korostettu sana. Vasemmanpuoleisessa listauksessa on käytetty <center>-, <font>- ja <b>-elementtejä, jotka eivät sinänsä kerro mitään tekstin loogisesta sisällöstä. Tyyli ja sisältö ovat sekoitettu samaan rakenteeseen, eikä merkkaus ole kuvailevaa. Tällainen HTML-koodin tyyli on jäänne ajoilta ennen tyyliohjeita. Oikeanpuoleisessa, hyvän tavan mukaisessa listauksessa, muotoilu on pidetty erillään

11 7 sisällöstä ja merkkaus on kuvailevaa: otsikko on aina <h[1-5]>, eikä esimerkiksi <span class="h1">. Listatyyppinen data on aina <ul> tai <ol>, ja <table> on tarkoitettu ainoastaan taulukkosisältöiselle datalle. Korostusta varten on parempi käyttää elementtiä <strong>, joka kuvaa korostusta, kuin elementtiä <b>, joka ilmaisee pelkästään lihavointia. Kun sivu toteutetaan oikealla tavalla, sen ulkoasun päivittäminen on paljon helpompaa, sillä sisältöön ei tarvitse puuttua. Samoin sisällön tekeminen on helpompaa, koska koodi on luettavampaa ja lyhyempää, eikä muotoiluun tarvitse ottaa kantaa. <html><head> <link rel="stylesheet" type="text/css" href="tyyli.css" /> </head><body> <h1>otsikko</h1> </body></html> <html><head> <style> h1 { color:red; </style> </head><body> <h1>otsikko</h1> </body></html> <html><head></head> <body> <h1 style="color:red">otsikko</h1> </body></html> Listaus 2.1: Tyylimäärittely erillisellä tiedostolla, style-elementillä ja style-attribuutilla Vaikka ensimmäisen tyyliohjestandardin julkaisemisesta on kulunut jo kymmenen vuotta, sen käyttö on usein vielä hyvin vajavaista. Internetissä näkee vielä paljon sivustoja, joissa muotoilu on tehty HTML-elementtien sekaan, kuten Googlen etusivulla (http://www.google.fi). Toisaalta myös oikein tehtyjä sivustoja löytyy, kuten Wikipedia (http://fi.wikipedia.org). Huono tapa <center> <font size="+2" color="red">otsikko</font> </center> <font size="-1"> Tämä on <b><font size="0"> kappale</font></b> </font> Listaus 2.2: Kaksi tapaa tehdä tyylimuotoilu Hyvä tapa h1 { font-size:large; text-align:center; color:red; p { font-size:small; strong { font-size:normal; <h1>otsikko</h1> <p>tämä on <strong>kappale</strong></p> 2.2 Dynaamisten web-sivujen toteutustekniikoita Dynaamisia ja vuorovaikutteisia sivuja varten tarvittiin tekniikka selain- ja palvelinpään väliseen kommunikointiin. Ensimmäisenä markkinoille tuli Common Gateway Interface (CGI) [McC93, Gun96] vuonna Sen avulla selain voi välittää

12 8 dataa palvelimella suoritettavalle ohjelmalle, joka suorituksen jälkeen palauttaa sivun. CGI-ohjelmien tekoon suosituin kieli on edelleen Hypertext Preprocessor (PHP) [Atk99]. Vasta paljon myöhemmin markkinoille tuli JavaServer Pages (JSP) [FKB01] -sivut, jotka ovat nykyään hyvin suosittuja. Tällä tekniikalla tuotetuilla sivustoilla muutokset sivuilla kuitenkin edellyttävät joka kerta uuden sivun lataamista palvelimelta. Sivun dynaamisuus voidaan myös toteuttaa selaimessa, jolloin sivun näkymää voidaan muuttaa lataamatta palvelimelta uutta sivua. JavaScript toi tähän mahdollisuuden. Yleensä melkein kaikki WWW-sivujen kehittäjät osaavat tehdä JavaScriptillä lomakekentän kohdistuksen tai ponnahdusikkunan avaamiseen, mutta eivät tiedä, että JavaScript on kuitenkin kunnollinen funktionaalinen oliomainen kieli, jolla on jopa toteutettu selaimessa toimiva käyttöjärjestelmä [Adl05, MWH06]. JavaScriptin syntaksi muistuttaa C-kieltä. Kielessä ei ole tyyppejä, vaan kaikki muuttujat säilytetään hajautustauluissa. Kieli tukee perintää prototyyppiolion kautta. Javan kaltaisesti kaikkien prototyyppien yliluokkana on Object-prototyyppi. Koodia on helppo muokata ajon aikana, koska ohjelmaa tulkitaan suoraan lähdekoodista. Toisaalta ennen suoritusta ei ohjelmallisesti voida tarkistaa muita kuin syntaksivirheitä. JavaScriptillä ei ole juurikaan yhteyttä Javaan, vaan sen nimi valittiin lähinnä markkinointisyistä. Viimeisin kielen määrittely (versio 1.5) on vuodelta 1999 (ECMA-262 Edition 3). Ladatessaan sivun selain luo HTML-lähdekoodista Document Object Model -olion (DOM) [ABC98]. Tämä on sivua kuvaava malli, jota JavaScript osaa tulkita ja muuttaa. Malli sisältää HTML-elementtejä vastaavia objekteja ja niiden kenttiä ja funktioita. Esimerkiksi listauksessa 2.3 sivun hakukenttään päästään käsiksi polulla document.forms.haku.sana. Tässä document on DOM-puun juurielementti, forms on taulukko, joka sisältää sivun kaikki lomakkeet, haku viittaa lomakkeen nimeen ja sana viittaa kyseisen lomakkeen tiettyyn kenttään. DOM tarjoaa JavaScriptille mahdollisuuden muokata dynaamisesti sivun sisältöä. Tyyliohjeisiin pääsee JavaScriptillä suoraan käsiksi, mutta kätevämpää on muokata elementille annettuja tyyliattribuutteja mydiv.style.background="gray" tai tyyliluokkia mydiv.classname="codeblock". JavaScriptiä käytetään siis sivun sisällön ja muotoilun dynaamiseen muokkaamiseen. JavaScriptiä voi joko liittää HTML-merkkauksen sekaan, dokumentin alkuun <script>-elementin sisään tai erilliseen tiedostoon, johon viitataan HTML-sivulta. Listauksessa 2.3 on esitetty kaksi tapaa liittää sivulle JavaScript-koodia. Molemmissa on täsmälleen sama toiminnallisuus. Selaimen ladattua sivun JavaScript-koodi

13 9 kohdistaa hakukentän ja asettaa kuvalle napsaus-kuuntelijan, joka lähettää lomakkeen. Hyvän tavan mukaista on ohjelmoida JavaScript-koodi erilleen HTML-koodista, kuten oikealla puolella listausta nähdään. Koodi on luettavampaa ja JavaScriptiä ei turhaan tarvitse ladata, vaan se voidaan hakea välimuistista. Voi myös olla mahdollista, että selain ei tue JavaScriptiä tai se on kytketty pois päältä. Sivustolle olisikin hyvä tarjota toiminnallisuus myös ilman JavaScriptiä, mikäli käyttäjinä on sellaisia, joilla se ei toimi. Tällaisesta piirteestä käytetään termiä esteettömyys (accessibility). Esteettömiä sivuja tarvitsevat esimerkiksi sokeat, heikkonäköiset ja hakukoneet. Sisällön on oltava semanttisesti korrektia, ja sen on toimittava ilman JavaScriptiä, tyylejä ja kuvia. Näyttäviäkin sivustoja on mahdollista toteuttaa näin [GiS05, StD04]. Tuki selaimille ilman JavaScriptiä voidaan tarjota laittamalla vaihtoehtoinen sisältö <noscript>-elementin sisälle. Toinen vaihtoehto on antaa käyttäjän valita, ladataanko sivusta JavaScript-versio vai tavallinen. Näin on tehty esimerkiksi Gmailissa [Gma06]. Valitettavasti suurimmassa osasta verkkosivuja näitä seikkoja ei ole otettu huomioon [IvM05]. Huono tapa <body onload="document.forms.haku.sana.focus()"> <form name="haku" action="hae.jsp"> <input type="text" name="sana"/> <img id="nappi" src="hae.gif" onclick="document.forms.haku.submit()"/> </form> </body> Listaus 2.3: Kaksi tapaa tuoda sivulle dynaamisuutta Hyvä tapa window.onload = function() { document.forms.haku.sana.focus(); document.getelementbyid( "nappi").onclick = function() { document.forms.haku.submit(); <body> <form name="haku" action="hae.jsp"> <input type="text" name="sana"/> <img id="nappi" src="hae.gif"/> </form> </body> Ensimmäisen kerran JavaScript oli mukana Netscape 2.0B3 -selaimessa, joulukuussa Internet Explorerin yhteydessä erehdytään usein puhumaan JavaScriptistä, vaikka tarkoitetaan Microsoftin omaa JScriptiä [Jsc06]. JScriptissä on joitakin eroavaisuuksia JavaScriptiin, vaikka kielet muistuttavat hyvin paljon toisiaan. JavaScript tunnetaan myös nimellä ECMAScript [ECM99]. 2.3 Asynkroniset palvelupyynnöt Perinteisesti selain lataa sivun palvelimelta HTTP-protokollalla [BFF95, FIG99], minkä jälkeen koko selaimen näkymä päivitetään palvelimelta saadulla datalla. XMLHttpRequest (XHR) [Kes06] on JavaScript-olio, joka pystyy kutsumaan palvelinta itsenäisesti. Saatu vastaus otetaan haltuun JavaScript-koodissa, ja se voidaan esimerkiksi antaa jonkin HTML-elementin sisällöksi tai tallentaa muuttujaan.

14 10 Kutsu sallitaan vain sille palvelimelle, jolta sivu on ladattu. XHR-kutsu voi olla synkroninen tai asynkroninen, mutta useimmat työkalupakit tukevat vain asynkronista kutsua, koska tällöin käyttöliittymä ei lukkiudu kutsun ajaksi, vaan siirto tapahtuu taustalla. Listauksessa 2.4 on esimerkki tyypillisestä asynkronisesta kutsusta palvelimelle. Ensin luodaan uusi ilmentymä XHR-objektista. Objektin nimi vaihtelee selaimesta riippuen. Tämä esimerkki toimii Firefoxilla. Alustuksen jälkeen asetetaan muuttujiin kutsuttava osoite ja sivun kohde-elementti. Tämän jälkeen määritellään takaisinkutsufunktio, jossa palvelimelta saatu vastaus asetetaan kohde-elementin sisällöksi. Lopuksi selain lähettää palvelimelle GET-tyyppisen kutsun. Palvelimelta saatu vastaus käsitellään takaisinkutsufunktiossa, jossa se asetetaan kohde-elementin sisällöksi. Sisällön asettamisen sijaan voitaisiin myös kutsua jotain funktiota palvelimelta saaduilla arvoilla tai ajaa palvelimelta saatu JavaScript-koodi. Vaikka luokan nimi onkin XMLHttpRequest, niin sen sisältämän datan ei välttämättä tarvitse olla XML-muotoista. Usein käytettyjä muotoja ovat XML-kielen lisäksi teksti, JavaScript ja JavaScript Object Notation (JSON). var xhr = new XMLHttpRequest(); var url = "list.jsp?id=123" var targetdiv = document.getelementbyid("mainlist"); xhr.open("get", url, true); xhr.onreadystatechange = function() { if (xhr.readystate == 3) { targetdiv.innerhtml = xhr.responsetext; xhr.send(); Listaus 2.4: XMLHttpRequest esimerkki JSON [Jso07] on kätevä muoto tietorakenteille, koska se vie vähemmän tilaa kuin XML-muoto ja koska se evaluoituu suoraan JavaScriptin objektiksi. Objekti voi sisältää listoja ja assosiatiivisia taulukoita (map), jotka ovat nimi-arvo-pareja. Näitä voi olla myös sisäkkäin. Listauksessa 2.5 henkilot-muuttujaan on tallennettu lista henkilöistä, joille on syötetty ika, kaupunki ja lapset assosiatiivisessa taulukossa. Lapset on esitetty vuorostaan listana. Sijoituksen jälkeen henkilön tietoja päästään lukemaan suoraan pistenotaatiolla. JSON-muotoa voidaan käyttää selaimen ja palvelimen välillä kommunikointiin molempiin suuntiin. Eri palvelinpään ohjelmointikielille, kuten Javalle on olemassa kirjastoja, joilla saadaan muunnettua oliot JSON-merkkijonoksi ja toisin päin [Jso07]. XHR:n käyttö vähentää tarvetta koko sivun uudelleenlataamiselle, mikä puolestaan vähentää tietoliikenteen määrää ja palvelinkuormaa. Sivujen käyttö nopeutuu ja niistä saadaan monipuolisempia.

15 11 var henkilot = { "pekka":{ "ika":25, "kaupunki":"helsinki", "lapset":["liisa","matti","petri"], "jussi":{ "ika":25, "kaupunki":"turku", "lapset":["anna","satu","harri","keijo"] ; var pekan_lasten_maara = henkilot.pekka.lapset.length; var jussin_kaupunki = henkilot.jussi.kaupunki; Listaus 2.5: Esimerkki JSON-objektista Alun perin Microsoft kehitti XHR:n Internet Explorerille, mutta myöhemmin myös muut selaimet ovat alkaneet tukemaan sitä, tosin hieman erilaisella syntaksilla. XHR on yksi Ajax-tekniikan peruspilareista. 2.4 Ajax-tekniikka Asynchronous JavaScript and XML (Ajax) [Gar05] on ohjelmointitekniikka, joka mahdollistaa vuorovaikutteisten, työpöytäsovellusten näköisten WWW-sovellusten toteuttamisen. Termillä tarkoitetaan edellä mainittujen XHTML-, CSS- ja XHRtekniikoiden käyttöä JavaScriptin avulla. Tyypillisiä Ajaxilla toteutettavia verkkosovellusten vuorovaikutteisuutta ja käytettävyyttä parantavia käyttöliittymätoimintoja ovat esimerkiksi raahaus, välilehdet, yksittäisten ruutujen päivitys ja animaatiot [Pau05]. Tunnetuimpia Ajaxiin perustuvia sovelluksia ovat Googlen tuotteet, kuten Gmail, Google Maps ja Google Suggest. Nämä sovellukset on toteutettu Googlen omalla työkalupakilla (Google Web Toolkit), joka on tässä tutkielmassa yhtenä vertailukohteena. Kuvassa 2.1 on esimerkki Gmail-postiohjelman eräästä Ajax-toiminnallisuudesta. Kun käyttäjä alkaa kirjoittamaan osoitekenttään vastaanottajan nimeä, aukeaa alapuolelle lista syötetyillä kirjaimilla alkavista osoitteista. Sen sijaan, että avattaisiin uusi ikkuna osoitetiedoille, näytetäänkin suodatettu laatikko samalla sivulla, minkä sisältö on jo ladattu etukäteen piiloon. Toisin sanoen aina ei edes tarvitse lähettää kutsua palvelimelle, vaan selainkin voi varastoida tietoa.

16 12 Kuva 2.1: Ajaxia hyödyntävä Gmail Toinen hyvä esimerkki Ajax-sovelluksesta on Google Maps. Perinteisissä karttasovelluksissa käyttäjä on joutunut lataamaan kokonaan uuden sivun nähdäkseen viereisen karttapalan. Tämä on hidasta ja kömpelöä, esimerkiksi jos käyttäjä haluaisi kohdistaa karttapalan juuri tiettyyn kohtaan. Google Mapsissa (ks. Kuva 2.2) karttaa pystyy raahaamaan hiirellä. Puuttuvat palat haetaan palvelimelta vasta siinä vaiheessa, kun niitä tarvitaan tai jo vähän etukäteen. Kuvasta saa lennossa satelliittinäkymän ja sitä pystyy tarkentamaan ja loitontamaan. Osoitekenttään kirjoitettaessa ohjelma ehdottaa paikkoja, joita käyttäjä on hakenut aikaisemmilla kerroilla. Kuva 2.2: Ajaxia hyödyntävä Google Maps Perinteisen WWW-sovellusmallin ja Ajax-mallin eroa voidaan myös havainnollistaa kutsukaaviolla. Kuva 2.3 esittää perinteistä kutsuketjua, jossa jokainen käyttäjän toiminto lataa kokonaan uuden sivun [FiT02]. Tämä koetaan usein rasittavaksi

17 13 varsinkin hitailla tai ruuhkaisilla verkkoyhteyksillä. Käyttäjä ei voi myöskään hyödyntää lataukseen kuluvaa aikaa millään tavalla. käyttäjän toiminnot käyttäjän toiminnot käyttäjän toiminnot Asiakas Aika datan siirto datan siirto datan siirto datan siirto Palvelin palvelinpään prosessointi palvelinpään prosessointi Kuva 2.3: Webin perinteinen, synkroninen kutsuketju [Gar05] Ajaxin mallissa palvelinkutsut ovat asynkronisia, joten ne pystytään ajamaan taustalla. Kuvassa 2.4 tätä kuvataan kolmen eri kerroksen välisellä kommunikoinnilla. Ylimpänä kerroksena ovat selaimen käyttöliittymä ja käyttäjän toiminnot. Alimpana kerroksena on palvelin, josta tieto haetaan. Väliin jää Ajax-kerros, jonka tehtävänä on käsitellä käyttäjän syötteet, palvelinkutsut, vastaukset palvelimelta ja päivittää käyttöliittymä. Kun käyttäjä lähettää pyynnön, Ajax-kerros toimittaa sen palvelimelle ja käsittelee sieltä saadun vastauksen. Sillä aikaa käyttäjä voi suorittaa muita toimintoja, koska selain ei lukkiudu odottamaan vastausta palvelimelta. Vastauksen tultua Ajax-kerros käsittelee sen ja päivittää käyttöliittymän. Näin palvelinpään laskentaan ja tietoliikenteeseen kulunut aika saadaan paremmin hyödynnettyä. Toisaalta tämä voi myös kuormittaa palvelinta paljon enemmän, sillä käyttäjä pystyy lähettämään useita palvelinkutsuja samanaikaisesti [TAW03]. Toisaalta käyttäjän syötteistä aiheutuvasta näkymän muuttumisesta ei aina lähde kutsua palvelimelle, kuten kuvan 2.1 esimerkissä syötettäessä vastaanottajan osoitetta. Ajax-ohjelmointiin sisältyy runsaasti haasteita [Smi06]. XHR, tyyliohjeet ja JavaScript eroavat joiltakin osin eri selaimissa. Kirjainmerkkejä on hankala saada toimimaan, jos sisäisten latausten takia sivun osoite ei koskaan muutu. Samasta syystä myös paluutoiminto on monimutkaista toteuttaa. Lisäksi JavaScriptistä puuttuu suurille ohjelmistoille tarpeellisia ominaisuuksia, kuten periytyminen ja pakkaushierarkiat.

18 14 Asiakas Selaimen käyttöliittymä Käyttäjän toiminnot Ajax-koodi Asiakaspään prosessointi syöte tuloste syöte tuloste syöte tuloste syöte tuloste Aika datan siirto datan siirto datan siirto datan siirto datan siirto datan siirto datan siirto datan siirto Palvelin palvelinpään prosessointi palvelinpään prosessointi Kuva 2.4: Ajaxin asynkroninen kutsuketju [Gar05] Näihin ongelmiin ratkaisun tuo Ajax-työkalupakki, joka tarjoaa korkeamman tason rajapinnan ohjelmointiin sekä selainriippumattomat valmiit funktiot. Työkalupakkeja on kuitenkin kymmeniä ja sopivan valinta voi olla vaikeaa. Luvussa 4 esitellään Solitalle kolme varteenotettavaa vaihtoehtoa. palvelinpään palvelinpään prosessointi prosessointi Tekniikan tuoreuden vuoksi eletään myös eräänlaista kuplavaihetta. Kirjoja aiheesta on julkaistu lyhyessä ajassa lukuisia [CPJ06, Eic06, GGA06, Mah06, ScA06]. Olisi myös hyvä miettiä, tarvitseeko ohjelman toimia selaimessa, vai onko sovellus parempi toteuttaa esimerkiksi Java Web Start -ohjelmana (ks. luku 2.5). 2.5 Ajaxille vaihtoehtoiset tekniikat Selainten vuorovaikutteisuutta on yritetty parantaa muilla tekniikoilla jo ennen Ajaxia. Ensimmäisenä markkinoille tuli sovelma (Java applet). Se on selaimessa suoritettava Java-ohjelma. Toimiakseen sovelma tarvitsee kuitenkin asennetun Javan virtuaalikoneen sekä selaimen, joka tukee sitä. Sovelman etuja ovat tuki useimmille selaimille, turvallisuus ja vuorovaikutteiset ohjelmat. Sovelmien kanssa on myös ongelmia. Kaikilla käyttäjillä ei ole oikeuksia asentaa suoritukseen tarvittavaa virtuaalikonetta, joten käyttäjäkunta jää rajalliseksi. Virtuaalikoneen asentaminen on hidasta. Sovelmien kanssa on myös paljon yhteensopivuusongelmia eri virtuaalikoneiden versioiden kanssa. Esimerkiksi Firefox-selaimella sovelman korkeuden asettaminen samaksi kuin selaimen korkeus toimii huonosti. Lisäksi ohjelmat ovat raskaita suorittaa [Rob07]. Adobe Flash (aikaisemmin Macromedia Flash) [All02] on vektorigrafiikkaan, animointiin ja multimediaan käytetty ohjelma. Flashista tuli sen julkaisun (1996) jälkeen suosittu väline animaation ja vuorovaikutteisuuden lisäämiseen WWW-

19 15 sivuille. Se pyrki tehokkaampana ja monipuolisempana ratkaisuna korvaamaan Java sovelman. Sitä käytetään paljon mainoksiin, videokuvan tuomiseen WWWkomponentteihin ja joskus myös kokonaisten sivustojen tekemiseen. Sekä Java-sovelmilla että Flash-sivuilla on yhteisiä huonoja puolia. Ne vaativat liitännäisen asentamisen, johon kaikilla käyttäjillä ei ole mahdollisuutta. Lisäksi niissä eivät toimi paluunappi, sivuhistoria eivätkä kirjanmerkit. Hakukoneet ja tekstinlukijat eivät myöskään osaa lukea näillä tekniikoilla tehtyjä sivuja. Sun Microsystems on tuonut aivan toisenlaisen lähestymistavan vuorovaikutteisuudelle ja käytettäville WWW-sovelluksille. Tekniikan nimi on Java Web Start [Sri07]. Siinä ideana on, että selainta ei käytetä lainkaan, vaan sivulla tarjotusta yhdestä linkistä asennetaan sovellus jouhevasti omalle koneelle. Lisäksi ohjelma osaa päivittää verkosta itsensä jokaisen käynnistyksen yhteydessä. Myös OpenXUP [YBC06] tarjoaa vaihtoehtoisen lähestymisen monipuolisten ja vuorovaikutteisten verkkosovellusten toteuttamiseen hyödyntäen XUP (Extensible User Interface Protocol) -protokollaa. Protokolla on SOAP (Simple Object Access Protocol) -pohjainen [YuB05], ja sitä käytetään käyttöliittymän tapahtumien lähettämiseen sekä verkosta saatujen päivitysten noutamiseen. XUP tarjoaa mallin, joka yhdistää perinteisten työpöytäsovellusten ja verkkopohjaisten palveluiden käyttöliittymäparadigmat. Käyttöliittymää on mahdollista päivittää osa kerrallaan, joten käyttäjä ei joudu kärsimään hitaista vasteajoista. Molempien tekniikoiden ehkä merkittävimpänä etuna on eri tavalla käyttäytyvistä selaimista eroon pääseminen. Sovellusten kehittäminen on huomattavasti helpompaa, kun kaiken voi tehdä yhdellä kielellä. Lisäksi sovelluksiin saa enemmän toimintoja kuin Ajax-sovelluksiin. Tulisikin aina punnita, tarvitseeko sovelluksen todella toimia selaimessa vai kelpaako omalle koneelle helposti asentuva erillinen sovellus.

20 16 3 Ajax-työkalupakit Työkalupakki käsitteenä sekoitetaan usein sovelluskehykseen (framework) ja kirjastoon (library), vaikka kyse on eri asioista. Sovelluskehys tarjoaa rakenteen ohjelmistolle ja sisältää kirjastoja. Tyypillisesti ohjelman kontrolli on sovelluskehyksellä (Hollywood-periaate), joka kutsuu itse toteutettuja komponentteja. Tästä esimerkkinä mainittakoon Spring Framework, jota on käytetty tämän tutkielman esimerkkisovelluksessa [ArA05]. Kirjasto on joukko funktioita tai luokkia ja metodeita, joiden tarkoituksena on tehdä yksittäisen ongelman ratkaiseminen helpommaksi korkean tason rajapintojen avulla. Kirjasto ei sisällä sellaisenaan ajettavia ohjelmia [ScA06]. Työkalupakki on joukko kirjastoja ja työkaluohjelmistoja, joilla hoidetaan jokin kokonaisuus, kuten käyttöliittymä. Ajax-työkalupakki siis tarjoaa työkalut Ajaxtekniikan hallitsemiseen. Kirjastojen lisäksi työkalupakki voi sisältää esimerkiksi uuden tyylin ohjelmoida korkeammalla tasolla [Doj06] tai jopa kokonaan eri kielellä [CLW06]. Työkalupakki ei kuitenkaan koskaan tarjoa ohjelman ydintä, kuten sovelluskehys. Selaimissa on lukuisia pieniä eroavaisuuksia ja virheitä. Esimerkiksi Internet Explorer 7 -selaimesta puuttuu getelementsbytagname -funktio, joka kuitenkin löytyy kaikista muista selaimista. Tapahtumien käsittely sekä XHR-pyyntöjen muoto ei ole myöskään sama Internet Explorerissa ja Firefoxissa. Tällaisia eroja ja virheitä on joskus hyvinkin vaikea tunnistaa. Ajax-työkalupakin tarkoituksena on helpottaa Ajaxsovelluksen kehitystä. Se abstrahoi selaimen tarjoaman rajapinnan omalla rajapinnallaan tarjoten ohjelmoijalle uudet suunnittelumallit. Työkalupakki abstrahoi selaimet samalla tavalla kuin C-kielen kirjastot käyttöjärjestelmän [Res06]. Ajax-työkalupakki tarjoaa yleensä työkalut grafiikan, tapahtumien, JavaScriptin ja XHR-kutsujen käsittelyyn. Se tarjoaa myös joukon valmiita käyttöliittymäkomponentteja (widget) sekä kehitysvaiheen testausympäristön. Kiinnostus tekniikkaan on kasvanut räjähdysmäisesti ja Ajax-työkalupakkeja on julkaistu jo yli 40 kappaletta. Nämä voidaan jakaa karkeasti kolmeen eri ryhmään. Pelkällä JavaScriptillä toteutettuja työkalupakkeja ovat esimerkiksi Dojo, YUI, Prototype, Rico ja MochiKit. Näille lähtökohtana on tarjota kehittäjälle joukko JavaScript-funktioita yleisimpien toimintojen toteuttamiseen. Lisäksi JavaScriptkieleen voidaan keinotekoisesti tuoda uusia ominaisuuksia, kuten perintä ja pakkaukset. Puhtaiden JavaScript-toteutusten etuna on riippumattomuus palvelinpään

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen

Lisätiedot

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000

Lisätiedot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

T-111.361 Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot T-111.361 Hypermediadokumentin laatiminen -Ohjelmointi Peruskäsitys www-ohjelmoinnin kentästä Tekniikat interaktiivisuuden toteuttamiseen tekniikat tekniikat Tietokannat Juha Laitinen TKK/TML juha.laitinen@hut.fi

Lisätiedot

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010 WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi

Lisätiedot

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari

JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti

Lisätiedot

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML Järjestelmäarkkitehtuuri (TK081702) Ajax 2000-luvun alkuvuosina selainsotien rauhoituttua ohjelmistotalot alkoivat kehittää selainten luoman uuden ohjelmointiympäristön käyttötapoja. Syntyi AJAX (Asynchronous

Lisätiedot

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa

WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa WWW ja tietokannat WWW-sivut HTML-kielellä esitettyä hypertekstiaineistoa tekstiä, kuvia, hyperlinkkejä Staattiset sivut kirjoitettu kerran, muuttaminen käsin ongelmana pysyminen ajantasalla Ylläpito hankalaa,

Lisätiedot

Tikon Web-sovellukset

Tikon Web-sovellukset Toukokuu 2015 1 (11) Tikon Web-sovellukset Toukokuu 2015 2 (11) 1 Johdanto... 3 2 Silverlight sovellukset... 3 2.1 Windows... 3 2.1.1 Microsoft Silverlight... 3 2.1.2 Tablet-laitteet... 4 2.1.3 Selaimet...

Lisätiedot

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli. HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

PÄIVITÄ TIETOKONEESI

PÄIVITÄ TIETOKONEESI PÄIVITÄ TIETOKONEESI SAMPOLAN KIRJASTO TIETOTORI Sammonkatu 2 33540 Tampere 040 800 7816 tietotori.sampola@tampere.fi PÄIVITÄ TIETOKONEESI 2(16) Sisällys 1. Mihin päivityksiä tarvitaan?... 3 1.1. Windowsin

Lisätiedot

Arkkitehtuurikuvaus. Ratkaisu ohjelmistotuotelinjan monikielisyyden hallintaan Innofactor Oy. Ryhmä 14

Arkkitehtuurikuvaus. Ratkaisu ohjelmistotuotelinjan monikielisyyden hallintaan Innofactor Oy. Ryhmä 14 Arkkitehtuurikuvaus Ratkaisu ohjelmistotuotelinjan monikielisyyden hallintaan Innofactor Oy Ryhmä 14 Muutoshistoria Versio Pvm Päivittäjä Muutos 0.4 1.11.2007 Matti Eerola 0.3 18.10.2007 Matti Eerola 0.2

Lisätiedot

Uutisjärjestelmä. Vaatimusmäärittely. Web-palvelujen kehittäminen. Versio 1.3

Uutisjärjestelmä. Vaatimusmäärittely. Web-palvelujen kehittäminen. Versio 1.3 Uutisjärjestelmä Vaatimusmäärittely Versio 1.3 Sisällys 1 Muutoshistoria... 4 2 Viitteet... 4 3 Sanasto... 4 3.1 Lyhenteet... 4 3.2 Määritelmät... 4 4 Johdanto...5 4.1 Järjestelmän yleiskuvaus... 5 4.2

Lisätiedot

Tikon Web-sovellukset

Tikon Web-sovellukset Marraskuu 2014 1 (9) Tikon Web-sovellukset Marraskuu 2014 2 (9) 1 Johdanto... 3 2 Windows... 3 2.1 Microsoft Silverlight... 3 3 Tablet-laitteet... 4 4 Selaimet... 5 4.1 Yleiset asetukset (kaikki selaimet)...

Lisätiedot

6 XML-työkalut 1. 6 XML-työkalut

6 XML-työkalut 1. 6 XML-työkalut 6 XML-työkalut 1 6 XML-työkalut XML:n periaatteiden tutustumisen jälkeen on helpompi tutustua XML-dokumenttien käsittelyyn ja katseluun suunniteltuja työkaiuja. XML:n yleistymisen pahin pullonkaula on

Lisätiedot

Järjestelmäarkkitehtuuri (TK081702) Web Services. Web Services

Järjestelmäarkkitehtuuri (TK081702) Web Services. Web Services Järjestelmäarkkitehtuuri (TK081702) Standardoidutu tapa integroida sovelluksia Internetin kautta avointen protokollien ja rajapintojen avulla. tekniikka mahdollista ITjärjestelmien liittämiseen yrityskumppaneiden

Lisätiedot

CT50A2601 Käyttöjärjestelmät Androidin ja Symbianin vertailu Seminaarityö

CT50A2601 Käyttöjärjestelmät Androidin ja Symbianin vertailu Seminaarityö CT50A2601 Käyttöjärjestelmät Androidin ja Symbianin vertailu Seminaarityö 0349955 Pekka Hyvärinen 0342194 Joonas Heikelä 0327708 Miro Temonen 0350122 Sami Tuominen Yleistä Seminaarityö osa kurssia Käyttöjärjestelmät

Lisätiedot

Alkuraportti. LAPPEENRANNAN TEKNILLINEN YLIOPISTO TIETOJENKÄSITTELYN LAITOS CT10A4000 - Kandidaatintyö ja seminaari

Alkuraportti. LAPPEENRANNAN TEKNILLINEN YLIOPISTO TIETOJENKÄSITTELYN LAITOS CT10A4000 - Kandidaatintyö ja seminaari LAPPEENRANNAN TEKNILLINEN YLIOPISTO TIETOJENKÄSITTELYN LAITOS CT10A4000 - Kandidaatintyö ja seminaari Alkuraportti Avoimen lähdekoodin käyttö WWW-sovelluspalvelujen toteutuksessa Lappeenranta, 30.3.2008,

Lisätiedot

MITÄ JAVASCRIPT ON?...3

MITÄ JAVASCRIPT ON?...3 JavaScript MITÄ JAVASCRIPT ON?...3 YLEISTÄ JAVASCRIPTIN SYNTAKSISTA...3 KÄSKYSANAT JA MUUT VARATUT SANAT...3 MUUTTUJIEN, FUNKTIOIDEN JA LUOKKIEN NIMISSÄ...3 HTML-TAGEIHIN VIITTAAVISSA METODINIMISSÄ...3

Lisätiedot

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista

Lisätiedot

Tekninen suunnitelma - StatbeatMOBILE

Tekninen suunnitelma - StatbeatMOBILE Tekninen suunnitelma - StatbeatMOBILE Versio Päivämäärä Henkilö Kuvaus 1.0 13.12.2013 Pöyry Alustava rakenne ja sisältö 1.1 22.12.2013 Pöyry Lisätty tekstiä ilmoituksiin, turvallisuuteen ja sisäiseen API:in

Lisätiedot

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi?

Internetin hyödyt ja vaarat. Miten nettiä käytetään tehokkaasti hyväksi? Internetin hyödyt ja vaarat Miten nettiä käytetään tehokkaasti hyväksi? Linkit Chrome https://www.google.com/intl/fi/chrome/browser/ Firefox http://www.mozilla.org/fi/ Opera http://www.opera.com/fi Vertailu

Lisätiedot

Tietosuoja-portaali. päivittäjän ohje

Tietosuoja-portaali. päivittäjän ohje Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan

Lisätiedot

Tämä ohje on laadittu Mozilla Firefoxin asetuksille versiossa 27.0.1

Tämä ohje on laadittu Mozilla Firefoxin asetuksille versiossa 27.0.1 Mozilla Firefox 17.2.2014 Tämä ohje on laadittu Mozilla Firefoxin asetuksille versiossa 27.0.1 Mac- käyttäjille suunnattuja erityishuomioita ohjeen lopussa. Selaimesta on aina suositeltavaa käyttää uusinta

Lisätiedot

Android ohjelmointi. Mobiiliohjelmointi 2-3T5245

Android ohjelmointi. Mobiiliohjelmointi 2-3T5245 Android ohjelmointi Mobiiliohjelmointi 2-3T5245 Mikä on Android? Linux kernelin päälle rakennettu, Googlen kehittämä sovelluspino mobiilisovelluksiin Erillinen versio puhelimelle ja taulutietokoneille

Lisätiedot

1 www-sivujen teko opetuksessa

1 www-sivujen teko opetuksessa RäsSe, Tekniikka/Kuopio Sivu 1 1 www-sivujen teko opetuksessa 1.1 Yleistä Mitä materiaalia verkkoon? Tyypillisesti verkossa oleva materiaali on html-tiedostoja. Näitä tiedostoja tehdään jollakin editorilla

Lisätiedot

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus

582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus 582203 Tietokantasovellus (4 op) - Web-sovellukset ja niiden toteutus Sisältö Mikä on web-sovellus? Selaimen rooli web-sovelluksessa Palvelimen rooli web-sovelluksessa Aineistopyynnöt Tiedon välittäminen

Lisätiedot

VERKON ASETUKSET SEKÄ WINDOWSIN PÄIVITTÄMINEN

VERKON ASETUKSET SEKÄ WINDOWSIN PÄIVITTÄMINEN VERKON ASETUKSET SEKÄ WINDOWSIN PÄIVITTÄMINEN Tämän harjoituksen tarkoituksena on varmistaa verkon asetukset sekä päivittää Windows käyttäen Windows Update -palvelua. Dokumentin lopussa on palautettava

Lisätiedot

ISACA Finland 24.1.2008 OWASP 24.1.2008. The OWASP Foundation. Timo Meriläinen Antti Laulajainen. http://www.owasp.org

ISACA Finland 24.1.2008 OWASP 24.1.2008. The OWASP Foundation. Timo Meriläinen Antti Laulajainen. http://www.owasp.org ISACA Finland 24.1.2008 Timo Meriläinen Antti Laulajainen 24.1.2008 Copyright The Foundation Permission is granted to copy, distribute and/or modify this document under the terms of the License. The Foundation

Lisätiedot

DXL Library ja DXL-kielen olemus. Pekka Mäkinen Pekka.Makinen@softqa.fi SoftQA Oy http/www.softqa.fi/

DXL Library ja DXL-kielen olemus. Pekka Mäkinen Pekka.Makinen@softqa.fi SoftQA Oy http/www.softqa.fi/ DXL Library ja DXL-kielen olemus Pekka Mäkinen Pekka.Makinen@softqa.fi SoftQA Oy http/www.softqa.fi/ DOORS extension Language DXL on DOORSin laajennuskieli, jolla voidaan kehittää lisätoiminnallisuutta.

Lisätiedot

Näin rakennat mielenkiintoiset nettisivut

Näin rakennat mielenkiintoiset nettisivut Näin rakennat mielenkiintoiset nettisivut Ajattele ennen kuin toimit Ei kannata lähteä suinpäin nettisivuja rakentamaan. Hyvin suunniteltu on enemmän kuin puoliksi tehty. Muuten voi käydä niin, että voit

Lisätiedot

Paavo Räisänen. WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys. www.ohjelmoimaan.net

Paavo Räisänen. WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys. www.ohjelmoimaan.net Paavo Räisänen WampServer palvelimen asennus ja käyttö Eclipsen kanssa, sekä ensimmäinen FTP yhteys www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa ja levittää ei kaupallisissa tarkoituksissa.

Lisätiedot

Lumon tuotekirjaston asennusohje. Asennus- ja rekisteröintiohje

Lumon tuotekirjaston asennusohje. Asennus- ja rekisteröintiohje Lumon tuotekirjaston asennusohje Asennus- ja rekisteröintiohje 1. Sisältö 1. Asennuspaketin lataaminen 4 2. Zip-tiedoston purkaminen ja sovelluksen asentaminen 4 3. Sovelluksen rekisteröiminen 7 4. Sisällön

Lisätiedot

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus

Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 4 2 ULKOASU... 5 2.1

Lisätiedot

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely. XML prosessointi Miten XML dokumentteja luetaan ja kirjoitetaan XML prosessori lukee ja välittää XML dokumentin sovellukselle. Se sisältää entieettikäsittelijän (mahdollisesti) XML jäsentimen Sovellus

Lisätiedot

KYMENLAAKSON AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma / Tietoverkkotekniikka. Joni Korjala APACHE WWW-PALVELIN Seminaarityö 2012

KYMENLAAKSON AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma / Tietoverkkotekniikka. Joni Korjala APACHE WWW-PALVELIN Seminaarityö 2012 KYMENLAAKSON AMMATTIKORKEAKOULU Tietotekniikan koulutusohjelma / Tietoverkkotekniikka Joni Korjala APACHE WWW-PALVELIN Seminaarityö 2012 SISÄLLYS 1 JOHDANTO 3 2 WWW-PALVELIMEN TOIMINTA 4 3 OMINAISUUDET

Lisätiedot

Ohjeita informaation saavutettavuuteen

Ohjeita informaation saavutettavuuteen Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea

Lisätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla 1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.

Lisätiedot

Selaimen asetukset. Toukokuu 2014 1 (7) Selaimen asetukset. 1994-2014 Tikon Oy. All rights reserved.

Selaimen asetukset. Toukokuu 2014 1 (7) Selaimen asetukset. 1994-2014 Tikon Oy. All rights reserved. Toukokuu 2014 1 (7) Selaimen asetukset Toukokuu 2014 2 (7) 1 Johdanto... 3 2 Windows... 3 3 Selaimet... 3 3.1 Yleiset asetukset (kaikki selaimet)... 3 3.1.1 Zoom-asetus... 3 3.1.2 Pop-up Blocker... 3 3.2

Lisätiedot

Oma kartta Google Maps -palveluun

Oma kartta Google Maps -palveluun TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,

Lisätiedot

Pertti Pennanen DOKUMENTTI 1 (5) EDUPOLI ICTPro1 29.10.2013

Pertti Pennanen DOKUMENTTI 1 (5) EDUPOLI ICTPro1 29.10.2013 Virtualisointi Pertti Pennanen DOKUMENTTI 1 (5) SISÄLLYSLUETTELO Virtualisointi... 2 Virtualisointiohjelmia... 2 Virtualisointitapoja... 2 Verkkovirtualisointi... 2 Pertti Pennanen DOKUMENTTI 2 (5) Virtualisointi

Lisätiedot

EMVHost Online SUBJECT: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT COMPANY: EMVHost Online Client sovelluksen käyttöohje AUTHOR: DATE: 15.03.

EMVHost Online SUBJECT: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT COMPANY: EMVHost Online Client sovelluksen käyttöohje AUTHOR: DATE: 15.03. EMVHost Online SUBJECT: COMPANY: COMMENTS: AUTHOR: EMVHOST ONLINE CLIENT - AUTOMAATTISIIRROT NETS OY EMVHost Online Client sovelluksen käyttöohje NETS OY DATE: 15.03.2011 VERSION: 1.0 1 SISÄLLYS SISÄLLYS...

Lisätiedot

Kieliversiointityökalu Java-ohjelmistoon. Ohje

Kieliversiointityökalu Java-ohjelmistoon. Ohje Kieliversiointityökalu Java-ohjelmistoon Ohje 2/6 SISÄLLYSLUETTELO 1 YLEISTÄ OHJELMASTA... 3 2 PÄÄ-IKKUNA...4 3 YLÄVALIKKO... 4 3.1 TIEDOSTO... 4 3.2 TOIMINTO... 4 3.3 ASETUKSET... 5 3.4 OHJE... 5 4 VÄLILEHDET...5

Lisätiedot

TermBase NET versio 1.0.1. (Beta)

TermBase NET versio 1.0.1. (Beta) TermBase NET versio 1.0.1. (Beta) Sulautettu sanasto- ja termikanta OHJEET TÄRKEÄÄ: Copyright M. Tuittu, 2005 Kaikki oikeudet pidätetään. TermBase NET on toteutettu java -tekniikalla. Java and all Java-based

Lisätiedot

Taustaa. CGI-ohjelmointi

Taustaa. CGI-ohjelmointi Taustaa CGI-ohjelmointi CGI = Common Gateway Interface Hyvin yksinkertainen ja helppo tapa toteuttaa dynaamisuutta ja interaktivisuutta htmldokumentteihin Kehitetty tiedon siirtoon palvelimen ja asiakasselaimen

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT

MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa

Lisätiedot

Visma Approval Center. Versiosaate 1.3

Visma Approval Center. Versiosaate 1.3 Visma Approval Center Versiosaate 1.3 Visma Approval Center - Versiosaate 1.3 Kaikkia koskettavat kehitykset Muutokset käyttöliittymän välilehdissä Tarkastajat ja hyväksyjät näkevät ylävalikon jatkossa

Lisätiedot

Järjestelmäarkkitehtuuri (TK081702) Avoimet web-rajapinnat

Järjestelmäarkkitehtuuri (TK081702) Avoimet web-rajapinnat Järjestelmäarkkitehtuuri (TK081702) SOA yleistyvät verkkopalveluissa Youtube Google... Avaavat pääsyn verkkopalvelun sisältöön. Rajapintojen tarjoamia tietolähteitä yhdistelemällä luodaan uusia palveluja,

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

206 Verkkosivun tuottaminen finaalitehtävät

206 Verkkosivun tuottaminen finaalitehtävät TAITAJA2013 Finaalitehtävä 1 (6) 206 Verkkosivun tuottaminen finaalitehtävät YLEISTÄ -lajin finaalitehtävissä kilpailijat päivittävät ennakkoon julkaistuna finaalitehtävänä olleen Ekoripe tmi luontoyrittäjän

Lisätiedot

Soveltuvuustutkimus Lifebelt-ohjelman ideologian käytettävyydestä olioorientoituneeseen

Soveltuvuustutkimus Lifebelt-ohjelman ideologian käytettävyydestä olioorientoituneeseen Soveltuvuustutkimus Lifebelt-ohjelman ideologian käytettävyydestä olioorientoituneeseen ohjelmointiin Jukka Talvitie Valvoja: Professori Jorma Jormakka Paikka: TietoEnator oyj Ongelma Ideologia Lifebelt

Lisätiedot

SALITE.fi -Verkon pääkäyttäjän ohje

SALITE.fi -Verkon pääkäyttäjän ohje SALITE.fi -Verkon pääkäyttäjän ohje Sisältö 1 Verkon pääkäyttäjä (Network Admin)...3 2 Verkonhallinta...3 2.1 Navigointi verkonhallintaan...3 2.2 Sivustot...3 2.1 Sivustojen toiminnot...4 2.3 Sivuston

Lisätiedot

Copyright Observis Oy All rights reserved. Observis Oy Ville Kanerva, CTO Heikki Isotalus, COO Datasta tietoa

Copyright Observis Oy All rights reserved. Observis Oy Ville Kanerva, CTO Heikki Isotalus, COO Datasta tietoa Observis Oy Ville Kanerva, CTO Heikki Isotalus, COO Datasta tietoa Platform Tuotekehityksen haasteita ja ratkaisuja Haaste: Massiivisten tietomäärien hallinta Ratkaisu: Pilvipalvelun skaalautuvuus Haaste:

Lisätiedot

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU

,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU ,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten

Lisätiedot

Office 2013 - ohjelmiston asennusohje

Office 2013 - ohjelmiston asennusohje Office 2013 - ohjelmiston asennusohje Tämän ohjeen kuvakaappaukset on otettu asentaessa ohjelmistoa Windows 7 käyttöjärjestelmää käyttävään koneeseen. Näkymät voivat hieman poiketa, jos sinulla on Windows

Lisätiedot

Sisällys Clerica Web-sovellusten käytön aloittaminen 2

Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Sisällys Clerica Web-sovellusten käytön aloittaminen 2 Kirjautuminen järjestelmään 2 Myyntilaskut 2 Ostolaskujen käsittely 4 Uuden laskun syöttö 6 Palkkailmoituslomake 8 Palkkailmoituksesta kopio 9 Henkilötietojen

Lisätiedot

Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja.

Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja. RUUTU DYNAAMINEN SPOTTI TEKNISET OHJEET Versio 1.0 Yleistä Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja. Dynaamiset spotit ovat flash mainoksia, jotka mahdollistavat

Lisätiedot

Purot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu 24.10.2012

Purot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu 24.10.2012 Purot.net Wiki Tutkielma Paavo Räisänen Centria Ammattikorkeakoulu 24.10.2012 Sisällysluettelo 1: Esittely 2: Perustaminen 3: Uuden sivun luonti 4: Kuvien lisääminen 5: Linkin lisääminen 6: Lopuksi 1:

Lisätiedot

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta. 3 HTML ja XHTML Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

Lisätiedot

Viva-16. Käyttöohje. 1.4.2009 Veikko Nokkala Suomen Videovalvonta.com

Viva-16. Käyttöohje. 1.4.2009 Veikko Nokkala Suomen Videovalvonta.com Viva-16 Käyttöohje 1.4.2009 Veikko Nokkala Sisällysluettelo Sisällysluettelo... 2 Ohjelmisto käyttöliittymä... 3 Asentaminen... 3 Käyttöönotto... 3 Katselu... 6 Tallennus... 8 Toistaminen... 9 Selain käyttöliittymä...

Lisätiedot

Johdatus rakenteisiin dokumentteihin

Johdatus rakenteisiin dokumentteihin -RKGDWXVUDNHQWHLVLLQGRNXPHQWWHLKLQ 5DNHQWHLQHQGRNXPHQWWL= rakenteellinen dokumentti dokumentti, jossa erotetaan toisistaan dokumentin 1)VLVlOW, 2) UDNHQQHja 3) XONRDVX(tai esitystapa) jotakin systemaattista

Lisätiedot

Testidatan generointi

Testidatan generointi Testidatan generointi Anu Ahonen Kevät 2008 Tämä työ on tehty Creative Commons -lisenssin alla Työn tarkasti 9.4.2008 Jouni Huotari (JAMK/IT) 1 SISÄLTÖ 1 TYÖN LÄHTÖKOHDAT JA TOTEUTUS...2 2 TESTIDATAN GENEROINTI

Lisätiedot

SUOMEN KUNTALIITTO RY

SUOMEN KUNTALIITTO RY Karttaliittymä Versio: 18.10.2011 Julkaistu: 27.10.2011 Voimassaoloaika: Toistaiseksi Sisällys 1 Johdanto... 2 1.1 Suosituksen tausta... 2 1.2 Suosituksen rakenne... 2 2 Soveltamisala... 2 3 Lyhenteet...

Lisätiedot

Webforum. Version 14.4 uudet ominaisuudet. Viimeisin päivitys: 2014-12-6

Webforum. Version 14.4 uudet ominaisuudet. Viimeisin päivitys: 2014-12-6 Webforum Version 14.4 uudet ominaisuudet Viimeisin päivitys: 2014-12-6 Sisältö Tietoja tästä dokumentista... 3 Yleistä... 4 Yleistä & hallinnointi... 5 Dokumentit... 5 Perättäinen tarkistus- ja hyväksymisprosessi...

Lisätiedot

HTML5 Tutkielma Centria ammattikorkeakoulu 5.10.2012 Paavo Räisänen

HTML5 Tutkielma Centria ammattikorkeakoulu 5.10.2012 Paavo Räisänen HTML5 Tutkielma Centria ammattikorkeakoulu 5.10.2012 Paavo Räisänen Sisällysluettelo: 1: Esittely 2: Uusia ominaisuuksia 2.1: Canvas elementti 2.2: Video ja ääni 2.3: Lomakkeet 2.3.1: Ajanilmaus 2.3.2:

Lisätiedot

pikaohje selainten vianetsintään Sisällysluettelo 17. joulukuuta 2010 Sisällysluettelo Sisällys Internet Explorer 2 Asetukset Internet Explorer 8:ssa

pikaohje selainten vianetsintään Sisällysluettelo 17. joulukuuta 2010 Sisällysluettelo Sisällys Internet Explorer 2 Asetukset Internet Explorer 8:ssa 1 Sisällysluettelo 17. joulukuuta 2010 Sisällysluettelo Sivu Sisällys Internet Explorer 2 Asetukset Internet Explorer 8:ssa mozilla firefox 4 Asetukset Mozilla Firefox 3:ssa Yleisiä ongelmia 6 Selainten

Lisätiedot

HSMT J2EE & EJB & SOAP &...

HSMT J2EE & EJB & SOAP &... HSMT J2EE & EJB & SOAP &... Ville Leppänen HSMT, c Ville Leppänen, IT, Turun yliopisto, 2011 p.1/15 Missä mennään... 1. Johdanto (1h) 2. Säikeet (2h) 3. Samanaikaisuudesta (2h) 4. Hajautetuista sovelluksista

Lisätiedot

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla

BLOGGER. ohjeita blogin pitämiseen Googlen Bloggerilla BLOGGER ohjeita blogin pitämiseen Googlen Bloggerilla Sisältö Blogin luominen... 1 Uuden blogitekstin kirjoittaminen... 4 Kuvan lisääminen blogitekstiin... 5 Lisää kuva omalta koneelta... 6 Lisää kuva

Lisätiedot

SQL Buddy JAMK Labranet Wiki

SQL Buddy JAMK Labranet Wiki Page 1 of 9 SQL Buddy JAMK Labranet Wiki Sisällysluettelo Yleistä SQL Buddy:sta kotisivu :http://sqlbuddy.com/ SQL Buddy on kevyt hallintatyökalu MySQL-tietokannalle. Järjestelmävaatimukset Serverin vaatimukset

Lisätiedot

Harjoitus 3 Antti Hartikainen

Harjoitus 3 Antti Hartikainen Harjoitus 3 Antti Hartikainen s1300760 DP13S3A 2. Suunnitellaan ja asennetaan työasema yrityskäyttöön: a. Virtual Box guest additions (selvitä netistä mikä tämä on) b. Office työkalut (valitse itse sopivin

Lisätiedot

Ajax selainpohjaisten sovellusten laatimisessa. Nico Hiort af Ornäs

Ajax selainpohjaisten sovellusten laatimisessa. Nico Hiort af Ornäs TEKNILLINEN KORKEAKOULU Tietotekniikan osasto Tietotekniikan tutkinto-ohjelma Ajax selainpohjaisten sovellusten laatimisessa Kandidaatintyö Nico Hiort af Ornäs Ohjelmistotekniikan laboratorio Espoo 2008

Lisätiedot

Haaga-Helia/IltaTiko ict2tcd005: Ohjelmiston suunnittelutaito 1/7 Anne Benson. Tällä opintojaksolla käytämme VS:n kolmen kokonaisuuden luomiseen:

Haaga-Helia/IltaTiko ict2tcd005: Ohjelmiston suunnittelutaito 1/7 Anne Benson. Tällä opintojaksolla käytämme VS:n kolmen kokonaisuuden luomiseen: Haaga-Helia/IltaTiko ict2tcd005: Ohjelmiston suunnittelutaito 1/7 Microsoft SQL käyttö Yleistä VisualStudiosta Tällä opintojaksolla käytämme VS:n kolmen kokonaisuuden luomiseen: - sovellushallintaan -

Lisätiedot

Testausautomaation mahdollisuudet käyttöliittymän testauksessa. Anssi Pekkarinen 5.11.2015

Testausautomaation mahdollisuudet käyttöliittymän testauksessa. Anssi Pekkarinen 5.11.2015 Testausautomaation mahdollisuudet käyttöliittymän testauksessa Anssi Pekkarinen 5.11.2015 Agenda Kustannustehokkaan testausautomaation tekemiseen vaikuttavat tekijät Käyttöliittymätestauksen haasteet Uudet

Lisätiedot

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE

HAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö

Lisätiedot

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted)

Mikä on WordPress? itse ylläpidettävä (self-hosted) WordPress.com: ilmainen 3. osapuolen ylläpitämä pilvipalvelu (Cloud-hosted) WordPress.com Mikä on WordPress? Tällä hetkellä maailman suosituin ns. julkaisujärjestelmä (CMS) Rakennettu blogialustaksi, nykyään myös muussa käytössä ilmainen ns. avoimen lähdekoodin julkaisujärjestelmä

Lisätiedot

PAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN

PAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN SAK:N PAIKALLISJÄRJESTÖJEN NETTIPALVELUT s. 1/7 PAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN RAKENNE Paikallisjärjestöjen omille sivuille pääsee suoralla osoitteella, joka on muotoa www.sak-paikalliset.fi/paikkakunta

Lisätiedot

Verkkokirjoittaminen. Anna Perttilä Tarja Chydenius

Verkkokirjoittaminen. Anna Perttilä Tarja Chydenius Verkkokirjoittaminen Anna Perttilä Tarja Chydenius 1 Suosi lyhyttä tekstiä 2 Kenelle kirjoitat 3 Helpota lukijan työtä; lajittele tekstisi 3.1 Otsikot 3.2 Johdanto 3.3 Väliotsikot 3.4 Pääteksti 4 Linkit:

Lisätiedot

UpdateIT 2010: Editorin käyttöohje

UpdateIT 2010: Editorin käyttöohje UpdateIT 2010: Editorin käyttöohje Käyttäjätuki: Suomen Golfpiste Oy Esterinportti 1 00240 HELSINKI Puhelin: (09) 1566 8800 Fax: (09) 1566 8801 E-mail: gp@golfpiste.com Sisällys Editorin käyttöohje...

Lisätiedot

Internet-pohjaisen oppimisympäristön laadinta. Luento 3

Internet-pohjaisen oppimisympäristön laadinta. Luento 3 Internet-pohjaisen oppimisympäristön laadinta Luento 3 Aiheena tänään Toteutustekniikoista yleisesti Selainriippumattomuudesta Hot Potatoes -ohjelmasta JavaScriptin perusteista 31.01.2013 IPOPPLA 2 Toteutustekniikoista

Lisätiedot

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3

1 Yleistä Web-editorista... 3. 1.1 Web-editori -dokumentin luominen... 3. 2 Pikatoimintopainikkeet... 3. 2.1 Tallenna... 3 Web-editori 2 Optima Web-editori -ohje Sisällysluettelo 1 Yleistä Web-editorista... 3 1.1 Web-editori -dokumentin luominen... 3 2 Pikatoimintopainikkeet... 3 2.1 Tallenna... 3 2.2 Peru / Tee uudelleen...

Lisätiedot

Fiscal Media Server STD ohje

Fiscal Media Server STD ohje Fiscal Media Server STD ohje 1. Johdanto 2. Ohjelmien käyttöoikeudet 3. Fiscal Media Server STD 4. Ongelmia käyttöönotossa 5. Esimerkkejä 1. Johdanto Nämä ohjeet ovat tarkoitettu Fiscal Media Server STD

Lisätiedot

Pedacode Pikaopas. Java-kehitysympäristön pystyttäminen

Pedacode Pikaopas. Java-kehitysympäristön pystyttäminen Pedacode Pikaopas Java-kehitysympäristön pystyttäminen Pikaoppaan sisältö Pikaoppaassa kuvataan, miten Windowstyöasemalle asennetaan Java-ohjelmoinnissa tarvittavat työkalut, minkälaisia konfigurointeja

Lisätiedot

STS Uuden Tapahtuma-dokumentin teko

STS Uuden Tapahtuma-dokumentin teko STS Uuden Tapahtuma-dokumentin teko Valitse vasemmasta reunasta kohta Sisällöt. Sisällöt-näkymä Valitse painike Lisää uusi Tapahtuma 1 Valitse kieleksi Suomi Välilehti 1. Perustiedot Musta reunus kieliversioneliön

Lisätiedot

Asiointipalvelun ohje

Asiointipalvelun ohje Asiointipalvelun ohje Yleistä 1. Kirjautuminen 2. Yhteystiedot 3. Vastaustavan valinta 1. Yleistä 2. Palkkatietojen lataaminen tiedostosta 4. Lomake 1. Yleistä 2. Linkit ja vastaajan tiedot 3. Lomakekäsittely

Lisätiedot

Sähköpostitilin käyttöönotto

Sähköpostitilin käyttöönotto Sähköpostitilin käyttöönotto Versio 1.0 Jarno Parkkinen jarno@atflow.fi Sivu 1 / 16 1 Johdanto... 2 2 Thunderbird ohjelman lataus ja asennus... 3 3 Sähköpostitilin lisääminen ja käyttöönotto... 4 3.2 Tietojen

Lisätiedot

Ylläpito-ohje. Matematiikan oppifoorumi. Carl Johansson Jukka Kariola Outi Marttila Helena Venäläinen Sampsa Virtanen. Ohjaaja.

Ylläpito-ohje. Matematiikan oppifoorumi. Carl Johansson Jukka Kariola Outi Marttila Helena Venäläinen Sampsa Virtanen. Ohjaaja. Matematiikan oppifoorumi Ylläpito-ohje Carl Johansson Jukka Kariola Outi Marttila Helena Venäläinen Sampsa Virtanen Ohjaaja Jukka Eskola Ohjelmistotuotantoprojekti 17.12.1999 HELSINGIN YLIOPISTO Tietojenkäsittelytieteen

Lisätiedot

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14

Sisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14 Ylläpitäjän ohje Sisältö Ylläpitäjän ohje... 1 Yleistä... 3 Vinkkejä ylläpitäjälle... 3 Osoitteet... 3 Internet-selain ja Flash-laajennus... 3 Julkinen sivunäkymä ja ylläpitonäkymä eri välilehdissä...

Lisätiedot

Tikon Ostolaskujenkäsittely/Web-myyntilaskutus versio 6.4.0

Tikon Ostolaskujenkäsittely/Web-myyntilaskutus versio 6.4.0 Toukokuu 2014 1 (11) Tikon Ostolaskujenkäsittely/Web-myyntilaskutus versio 6.4.0 Päivitysohje Toukokuu 2014 2 (11) Sisällysluettelo 1. Tehtävät ennen versiopäivitystä... 3 1.1. Ohjelmistomuutosten luku...

Lisätiedot

KÄYTTÖOHJE. Servia. S solutions

KÄYTTÖOHJE. Servia. S solutions KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet

Lisätiedot

Visual Basic -sovelluskehitin Juha Vitikka

Visual Basic -sovelluskehitin Juha Vitikka Visual Basic -sovelluskehitin Helsinki 30.10.2000 Seminaari HELSINGIN YLIOPISTO Tietojenkäsittelytieteen laitos Visual Basic sovelluskehitin Seminaari: Ohjelmistotuotantovälineet Tietojenkäsittelytieteen

Lisätiedot

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje

Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja. Julkaisujärjestelmän ohje Sähköisen Markkinoinnin Koulutus Kotisivutyöpaja Julkaisujärjestelmän ohje 2014 2 PM-Julk aisujärjestelmän perusohjeet Julkaisujärjestelmän käyttöönotto Julkaisujärjestelämän avulla voit itsenäisesti muokata

Lisätiedot

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,

Lisätiedot

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat

Sen jälkeen Microsoft Office ja sen alta löytyy ohjelmat. Ensin käynnistä-valikosta kaikki ohjelmat Microsoft Office 2010 löytyy tietokoneen käynnistävalikosta aivan kuin kaikki muutkin tietokoneelle asennetut ohjelmat. Microsoft kansion sisältä löytyy toimisto-ohjelmistopakettiin kuuluvat eri ohjelmat,

Lisätiedot

Käyttöohje. Versiohistoria: 1.0 7.5.2003 1. versio Mari 1.1 9.5.2003 Kommenttien perusteella korjattu versio

Käyttöohje. Versiohistoria: 1.0 7.5.2003 1. versio Mari 1.1 9.5.2003 Kommenttien perusteella korjattu versio Otus- projektinhallintatyökalu Käyttöohje Versiohistoria: 1.0 7.5.2003 1. versio Mari 1.1 9.5.2003 Kommenttien perusteella korjattu versio Mari Tampere 9. toukokuuta 2003 Kimmo Airamaa, Andreas Asuja,

Lisätiedot

3.11.2010. Web-sisällönhallintajärjestelmät. Sisältö. Mitä on web-sisällönhallinta?

3.11.2010. Web-sisällönhallintajärjestelmät. Sisältö. Mitä on web-sisällönhallinta? Sisältö Mitä on web-sisällönhallinta? Tausta ja tavoitteet Käytännön prosessi Yleisesti Keskeiset ominaisuudet Sisällönhallintajärjestelmän valitseminen ja käyttöönotto Wordpress Joomla! Drupal Yhteenveto

Lisätiedot

1 Yleistä Kooste-objektista... 3. 1.1 Käyttöönotto... 3. 2 Kooste-objektin luominen... 4. 3 Sisällön lisääminen Kooste objektiin... 4. 3.1 Sivut...

1 Yleistä Kooste-objektista... 3. 1.1 Käyttöönotto... 3. 2 Kooste-objektin luominen... 4. 3 Sisällön lisääminen Kooste objektiin... 4. 3.1 Sivut... Kooste 2 Optima Kooste-ohje Sisällysluettelo 1 Yleistä Kooste-objektista... 3 1.1 Käyttöönotto... 3 2 Kooste-objektin luominen... 4 3 Sisällön lisääminen Kooste objektiin... 4 3.1 Sivut... 5 3.2 Sisältölohkot...

Lisätiedot