Web-julkaisemisen opas, luku 2 Reseptit: Miten luon Web-sivujen kokonaisuuden, ja muuta vaativampaa:

Vuorovaikutusta: lomakkeet (forms)

Sisällys

Tarvitaanko vuorovaikutusta?

Web kokonaisuudessaan on vuorovaikutteinen väline. Web-sivuilla vierailija valitsee itse, poistuuko hän sivulta saman tien, miten hän sitä lukee, katselee tai kuuntelee ja seuraako hän sivulla olevia linkkejä. Vierailija voi myös säädellä sitä, miten hän sivun näkee, esimerkiksi muuttamalla selaimen asetuksia ja ikkunan kokoa.

Mutta vuorovaikutteisuus eli interaktiivisuus tarkoittaa Webistä puhuttaessa yleensä vielä jotain muuta, esimerkiksi sitä, että käyttäjän toimenpiteet voivat olennaisesti muuttaa sivun sisältöä taikka suorastaan vaikuttavat Webin ulkopuoliseen todellisuuteen (esim. tavaran tilaaminen, kameran ohjaaminen, tietokannan sisällön muuttaminen). Tyypillisesti tämä tehdään nykyisin JavaScriptillä tai (joskus) Javalla taikka sitten lomakkeilla. Tässä luvussa käsittelemme lomakkeita, koska ne ovat varmin tapa tarjota lisämahdollisuuksia vuorovaikutteisuuteen. Lisäksi todellisuuteen vaikuttaminen hoituu yleensä parhaiten juuri lomakkeiden kautta, kun taas esimerkiksi JavaScript on lähinnä selaimen sisällä leikkimistä.

Martti Rahkilan kirjoitus Interaktiivisuuden toteuttamistekniikat WWW:ssä luonnehtii monipuolisesti sekä palvelin- että selainpohjaisia vuorovaikutteisuuden välineitä. Tässä oppaassa käsitellään niistä vain muutamia tavallisimpia.

Vuorovaikutteisuuden ei kuitenkaan pitäisi olla itsetarkoitus. Sillä pitäisi olla jotain mielekästä merkitystä käyttäjälle, oli se sitten hupia tai hyötyä

Palautteen saaminen (antaminen)

Aloitamme sellaisesta vuorovaikutuksen muodosta, joka tuntuu usein olevan kovin tärkeä aloitteleville sivuntekijöille mutta jonka merkitys käyttäjille ei ole niinkään selvä: sivuntekijä haluaa sivuillaan kävijöiltä palautetta - kehuja, haukkuja, kommentteja, kehitysehdotuksia.

Miksi kukaan antaisi palautetta?

Jos haluat saada palautetta sivuistasi, muista ensimmäiseksi, että sivuillasi vierailevien kannalta on kyse palautteen antamisesta. Se merkitsee heille ajankäyttöä ja vaivaa, josta tuskin kukaan heille maksaa. Tuskin sinullakaan on varaa maksaa siitä heille. Lisäksi monet, jotka haluavat antaa palautetta, oppivat nopeasti, että kovin usein siihen tulee vastaukseksi jotain tylyä, jopa haistattelua. Ja vaikkei tulisikaan, on masentavaa nähdä, että jopa rakentava ja perusteltu kehitysehdotus, jonka toteuttaminen veisi vain vähän aikaa, jää vaille huomiota, tai ainakin vaille vaikutusta.

Muista siis, että olet pyytämässä, etten sanoisi kerjäämässä palautetta. Haluat jotain, jonka saaminen on sinulle paljon tärkeämpää kuin sen antaminen on niille, joilta sitä haluat. Aneleva saati ruikuttava asenne ei silti kannata.

Keskeisintä on

Annatko vaikutelman, että palaute vaikuttaa?

Jos sivusi sisältö on jonkun mielestä hyvä ja sen aihepiiri tärkeä, hän luultavasti toivoisi sivusi kehittyvän vielä paremmaksi. Erityisesti hän voisi toivoa itseään varten lisäyksiä ja muita samoista asioista kiinnostuneita varten korjauksia ja selvennyksiä. Onko hänelle syytä olettaa, että palaute johtaisi sellaiseen? Tärkeintä on, uskooko hän, että saattaisit todella päivittää sivujasi. Tämä riippuu mm. siitä, miten paljon niillä nyt on vanhentunutta asiaa tai tuoreiden asioiden puutetta.

Sekava rakenne, huolimaton kielenkäyttö ja epätarkkuudet asiatiedoissa ovat myös viestejä: jos sivua ei alun perinkään ole tehty kokosydämisesti, onko syytä olettaa, että niistä myöhemminkään kannetaan huolta?

On turha luvata, että päivität sivujasi; teot ja niiden tulokset puhuvat. Wittgensteinia hyvin vapaasti mukaillen voimme sanoa: on asioita, joita ei kannata sanoa, koska sanottuina niitä ei uskota; niiden pitää näkyä.

Vaaditko palautteen antajaa mukautumaan sinun ehtoihisi?

Mitä tulee palautteen antamisen tekniikkaan, niin olennaistahan on, miten lähettäjä haluaa (ja voi) kirjoittaa. Kun kerran Internetistä on kysymys, niin on yleensä kohtuullista olettaa, että lähettäjä voi käyttää meiliä (sähköpostia) ja usein myös haluaa käyttää sitä. Se on melkoisen vaivatonta, ainakin verrattuna siihen vaivaan, mikä itse palautteen kirjoittamisessa on.

Kirjoita sivullesi meiliosoitteesi, mieluiten hypertekstiallekirjoitukseen, mutta joka tapauksessa niin, että se on helppo löytää. Tämä on paljon olennaisempaa kuin mitkään palautelomakkeet, "vieraskirjat" sun muut.

Kuitenkin näkee paljon sivuja, joilla on vain palautelomake! Usein vielä sellainen, joka toimii silloin kun sattuu, ns. mailto:-lomake.

Käyttäjällä voi olla ihan omat syynsä käyttää omaa meiliohjelmaansa, sotkematta Web-selainta tähän asiaan. Ja tällöin käyttäjä haluaa voida ottaa suoraan sivulta osoitteen. Esimerkkejä syistä:

Meiliosoitteen on syytä olla sivulla näkyvissä, ei vain niin sanotussa mailto-linkissä niin, että näkyvä teksti on vain "lähetä palautetta" tai jotain vastaavaa. Sellainen linkki toimii vaivatta vain, jos käyttäjä haluaa käyttää selaimeensa liitettyä meiliohjelmaa. Mutta hänen selaimeensa ei ehkä ole liitetty mitään meiliohjelmaa tai selaimeen liitetty meiliohjelma on hänestä ominaisuuksiltaan ala-arvoinen.

Palveluosoitteet esille

Jos kyse on yrityksen, laitoksen, yhdistyksen tms. sivustosta, on suositeltavaa, että käytössä on ainakin joukko RFC 2142:n mukaisia palveluosoitteita, esim. support@alue tuotetukea varten. Tämän lisäksi voi toki olla suomenkielisille havainnollisempia synonyymeja, esim. tuki@alue. Huomattakoon myös, että RFC 2142:n mukaan osoitteiden www@palvelin ja webmaster@palvelin tulisi molempien toimia (synonyymisina).

Palautelomake

Usein sivuntekijät valittavat, että heidän meilitse saamistaan palautteista ei ilmene, mitä sivua palaute koskee. Tätä ongelmaa sitten yritetään ratkaista liittämällä mailto-linkkiin jokin viritelmä, joka asettaisi viestiin sopivan otsikon (teknisesti: Subject-otsakkeen), joka sitten kertoisi sivuntekijälle, mitä sivua asia koskee. Mutta ei ole mitään luotettavaa tapaa liittää mailto-linkkiin rakennetta, joka asettaisi otsikon. Sen sijaan on mahdollista kirjoittaa sivulle meiliosoitteen lisäksi erityinen palautelomake.

Seuraavassa on hyvin yksinkertainen palautelomake:

<form action="http://www.tipjar.com/cgi-bin/generic"
 method="post">
<p>
<input type="hidden" name="mailto" value="jkorpela@cs.tut.fi">
<input type="hidden" name="subject" value=
 "Kommentteja Web-julkaisemisen oppaasta">
Tällä lomakkeella voit lähettää Jukka Korpelalle
(<code>jkorpela@cs.tut.fi</code>) yleisiä kommentteja
<i>Web-julkaisemisen oppaasta</i>:<br>
<textarea name="mail" rows="3" cols="50">
Kommentteja Web-julkaisemisen oppaasta:
</textarea>
<br>
Lähettäjän meiliosoite (toivottava):
<input type="text" name="mailfrom" size="30">
<br>
<input type="submit" value="Lähetä">
</p>
</form>

Tämä näkyy selaimessasi seuraavanlaisena. Huomioi, että esitysasuun vaikuttaa mm. se, millainen tyylisäännöstö liittyy tähän dokumenttiin. Lomake ei toimi, koska näin tehty lomake on liian altis ns. lomakespämmäykselle. (Voit täyttää ja lähettää lomakkeen, mutta tällöin saat vain selaimeen näkyviin, millaisessa muodossa tiedot lähtisivät palvelinskriptille, joka voisi toimittaa ne eteenpäin.)

Tällä lomakkeella voit lähettää Jukka Korpelalle (jkorpela@cs.tut.fi) yleisiä kommentteja Web-julkaisemisen oppaasta:

Lähettäjän meiliosoite (toivottava):

Lomakkeessa on piilokentässä (hidden field) vastaanottajan osoite. Tämä on melko tavallinen mutta ei itsessään turvallinen järjestely. Tyypillisesti palvelinskriptit, joilla voidaan lähettää viesti sähköpostitse, on tehty sellaisiksi, että niillä voidaan lähettää vain joihinkin ennalta määrättyihin osoitteisiin.

Lomakkeen perusidea HTML:ssä yleisesti on seuraava: Lomake antaa selaimelle ohjeen muodostaa käyttöliittymä, jonka kautta käyttäjä voi kirjoittaa tekstiä tai antaa muuta dataa. Lomakkeen rakenne määrää, minkätyyppisiä kenttiä käyttöliittymä sisältää. Lomakkeeseen liittyy myös action-määrite, joka kertoo selaimelle, mihin osoitteeseen sen tulee lähettää käyttäjältä saatu data jonkinlaista käsittelyä varten. Tämä osoite (URL) viittaa palvelimessa toimivaan ohjelmaan tai skriptiin, jota voidaan kutsua palvelinskriptiksi (server-side script). Palvelinskripti voidaan ohjelmoida tekemään hyvin monenlaisia asioita; yksi vaihtoehto on, että se vain lähettää datan meilitse johonkin osoitteeseen. Palvelinskriptiä voidaan myös käyttää muutenkin kuin lomakkeiden kautta.

Palautelomakkeen tekemistä harkittaessa kannattaa ensisijaisesti selvittää, tarjoaako oma palveluntarjoajasi käyttöösi sopivan palvelinskriptin (jota usein kutsutaan erään käytetyn teknisen piirteen takia CGI-skriptiksi). Ota huomioon, että käytettävät kenttien nimet (kuten edellä olevassa esimerkissä mailto, subject, mail ja mailfrom) ovat palvelinskriptistä riippuvia joten lue käyttöohje huolella. Esimerkiksi jos palveluntarjoajasi on Jippii, löydät sen Web-sivuilta selkeän suomenkielisen ohjeen lomakkeiden tekemisestä, josta ilmenee, mitä kenttien nimiä Saunalahden palvelinskriptin yhteydessä käytetään.

Jos palveluntarjoajasi ei tarjoa sellaista peruspalvelua kuin helppokäyttöinen palvelinskripti lomakedatan toimittamiseksi annettuun meiliosoitteeseen, sinun täytyy harkita muita vaihtoehtoja. Ks. lisätietoja sivulta How to use HTML forms. (Esim. edellä olevissa esimerkkilomakkeissa käytetään TipJarin ilmaista palvelua. Ilmaisuuteen kuuluu, että palvelu voidaan lopettaa koska tahansa ja että mukana on mainoksia. Lisäksi viesti käy kääntymässä turhan kaukana, jos esim. joku Suomesta lähettää sinulle palautetta.)

Lomakkeen rakenne ja kentät

Lomakkeen yleinen rakenne on seuraavanlainen:

<form action="palvelinskripti" method="post">
<p>
lomakkeen kenttiä, ynnä selitystekstejä ym.
</p>
</form>

Kenttien joukossa on syytä olla lähetyskenttä eli input type="submit" -kenttä, koska vain se takaa, että käyttäjä voi lähettää lomakkeen. Muita mahdollisia kenttiä ovat

Asetusnappia kutsutaan yleisemmin nimellä valintaruutu, joka onkin kuvaavampi, koska kyse on pienestä neliöstä.

Hyvä suomenkielinen esitys lomakkeista on Jyväskylän yliopiston tietotekniikan approbatur-opintojen aineiston osa WWW-lomakkeet. Tarkempia tietoja löytyy mm. erilaisista englanninkielisistä lomaketutoriaaleista.

Seuraavassa on esimerkki palautelomakkeesta, jolla pyritään "lypsämään" käyttäjältä arviointeja. Ihmiset ovat usein valmiimpia vastaamaan, kun he voivat yksinkertaisesti valita vaihtoehdoista, "antaa arvosanoja". Lomakkeen HTML-koodi on melko sotkuinen, ja se on tuotettu esiprosessorilla, kuten kannattaa tehdä sivut, joilla hyvin samantapaiset rakenteet toistuvat.

Tällä lomakkeella voit esittää oman arviosi Web-julkaisemisen oppaan ensimmäisestä osasta (Jambalaya: Miten teen Web-sivun) ja auttaa kehittämään sitä edelleen. Arvioi kukin kohta sekä ymmärrettävyyden kannalta (helppo/ei vaikea eikä helppo/vaikea) että laajuuden kannalta, siis onko asiasisältö tarpeisiisi liian suppea, sopivanlaajuinen vai liian laaja. Lisäksi voit esittää lisäystoivomuksesi eli kirjoittaa, mitä kohdan aihepiiriin kuuluvaa asiaa siinä pitäisi myös käsitellä (tai käsitellä laajemmin).

Kohtaymmärrettävyyslaajuus Lisäystoive
Teksti Webiin
Rakennetta mukaan (HTML)
Dokumentin kirjoittaminen
Otsikoilla ojennukseen
Linkkejä peliin
Näkyminen netissä
Kuvia putkeen
Tietoa taulukoihin
Tekstiä monenlaista

Vapaamuotoisia lisäkommentteja:

Halutessasi voit antaa meiliosoitteesi:

Hakulomakkeen tekeminen

Helpoin tapa tehdä sivullesi hakutoiminto, jolla voi etsiä tietoja sinun sivuiltasi (tai esimerkiksi yhdestä Web-palvelimesta) on tehdä lomake, joka käyttää hyväksi jotain yleistä hakupalvelua. Seuraava lomake käyttää AltaVistaa siten, että haku rajataan sivuihin, joiden URLit alkavat määrätyllä merkkijonolla, eli käytännössä yhteen sivustoon.

Haku Jukka K. Korpelan sivustosta. Kirjoita hakusanasi tekstinsyöttökentässä olevan merkkijonon perään, ei sen tilalle:

Jukka K. Korpelan sivuston suomenkielinen pääsivu sisältää myös vastaavan lomakkeen, joka käyttää Google-järjestelmää.

Näillä tavoilla löytyy tietenkin vain sellaisia sivuja, jotka ovat indeksoituneet hakupalvelun tietokantaan. Eräissä hakupalveluissa on kuitenkin kohtuullisen laaja ja melko usein päivittyvä suomalaisten (Suomessa, tarkemmin sanoen .fi-domainissa, sijaitsevien) sivujen tietokanta.

Vaativampaan käyttöön tarvitaan vaativampia menetelmiä. Jos halutaan palvelu, joka hakee esimerkiksi jostakin palvelimesta niin, että haku ottaa huomioon kaikki siinä olevat sivut tuoreeltaan, täytyy itse tehdä hakupalvelu, joka indeksoi ne sivut niin usein kuin halutaan. Käytännössä yleensä riittää hankkia ja asentaa jokin yleiskäyttöinen ohjelmisto tähän tarkoitukseen. Tämä on kuitenkin webmasterin eikä tavallisen sivuntekijän heiniä.

Edellä kuvattujen mahdollisuuksien välimuotona on sellaisten palvelujen kuin Atomz käyttö. Niissä ideana on, että sivuston tekijä voi pyytää palvelua indeksoimaan hänen sivunsa, ja omille sivuille voi sitten panna hakulomakkeen, joka etsii sivuja palvelun tietokannasta.

Mitä muuta lomakkeilla voisi tehdä

Voisi sanoa, että edellä kuvatut lomakkeiden käyttömahdollisuudet antavat vasta hyvin suppean kuvan asiasta. Lomakkeilla voi tehdä hyvin paljon muutakin kuin helpottaa palautteen lähettämistä ja tarjota käyttöön hakutoimintoja. Esimerkiksi ilmoittautumisen johonkin tilaisuuteen, tuotteiden tilaamisen, tietokannan ylläpidon taikka äänestämisen voisi käyttöliittymän osalta hoitaa lomakkeilla.

Mutta toisaalta kuten edellä kuvattiin, lomake ei itsessään ole muuta kuin eräänlainen käyttöliittymän kuvaus. Lomakkeen tekeminen on yleensä helpoin osa asiaa; varsinainen vaikeus on palvelinskriptin löytäminen tai tekeminen ynnä asentaminen ja testaaminen. Niinpä tarkastelemmekin tätä aihepiiriä vasta seuraavan osan luvussa Palvelinskriptit.

Tässä kohdassa oli aiemmin maininta FlashBase-palvelusta, jolla saattoi tehdä tiedonkeruulomakkeita hyvin helposti. Valitettavasti tämä(kin) ilmaispalvelu on poistumassa eikä enää ota uusia käyttäjiä. Tiedonanto asiasta suositteli kokeilemaan seuraavia vaihtoehtoja: ActiveSpace, BitLocker ja FormSite. Niistä vain viimeksi mainittu näyttäisi olevan enää toiminnassa. Yleisesti kannattaa muistaa, että se, joka tarjoaa ilmaispalveluja, voi lopettaa ne milloin tahansa.