INTERAKTIIVINEN VERKKOYHTEISÖPALVELU Riku Eskelinen Opinnäytetyö tammikuu 2008 Luonnontieteiden ala Datanomi Mäntän seudun koulutuskeskus
2 Tiivistelmä Mäntän seudun koulutuskeskus Luonnontieteiden alan perustutkinto Datanomi RIKU ESKELINEN Interaktiivinen verkkoyhteisöpalvelu Opinnäytetyö 11 sivua Tammikuu 2008 Opinnäytetyön tavoitteena oli tuottaa Internet-selaimessa toimiva tosiaikainen verkkoyhteisöpalvelu, jonka kautta palvelun käyttäjät voivat tutustua vieraisiin maihin, kieliin, kulttuureihin ja ihmisiin. Opinnäytetyö tehtiin tekijän omiin tarpeisiin hänen omalle palvelimellensa ja sille annettiin nimi KServer Cultural Exchange, lyhyemmin KSCX. Opinnäytetyössä painotettiin työn yhteensopivuutta sekä käytettävyyttä riippumatta siitä, millaisin välinein käyttäjä sivustoa selaa. Näiden syiden takia työ noudattaa Internet-määrityksiä. Työn tarkoituksena on mahdollistaa kanssakäyminen erikulttuuristen ja -kielisten ihmisten kanssa ilmaiseksi ajasta riippumatta.
3 SISÄLLYS TIIVISTELMÄ 2 1 JOHDANTO 4 2 ALUSTAMINEN 5 3 OHJELMISTOT JA TIEDOSTOMUODOT 6 4 WEBSTANDARDIT 7 4.1 Noudattamisen ongelmat 7 5 PALVELUN NIMI JA LOGO 8 5.1 Nimi 8 5.2 Logo 8 6 PALVELUN OSOITE 9 7 SAAVUTETTAVUUS 10 7.1 Webstandardit 10 7.2 Väritysteemat 10 7.3 Grafiikaton selaus 10 7.4 Pikanäppäimet 11 7.5 Yhteneväisyys 11
4 1 JOHDANTO Opinnäytetyön idea oli syntynyt jo aiemmin, mutta sille ei ollut olemassa vielä käytännön toteutusta. Tarve interaktiiviselle verkkoyhteisöpalvelulle erityisesti suomalaisen ja saksalaisen nuorison mielestä oli olemassa, joten työn toteuttaminen oli motivoivaa. Tekniset puitteet palvelimineen ja ohjelmistoineen olivat jo olemassa tekijän omalla KServer-palvelimella, jonne lopullinenkin palvelu on toteutettu. Työ on yksi KServerin palvelukokonaisuutta, johon kuuluu useita muita interaktiivisia palveluita. Työn eräs perusperiaatteista on käytettävyys: palvelua halutaan tarjota käyttäjän tilanteesta riippumatta. Tämä tarkoittaa lähinnä käyttöjärjestelmä- ja selainriippumattomuutta. Lisäksi palvelu on teoriassa käännettävissä mille tahansa kielelle.
5 2 ALUSTAMINEN Ennen kuin työtä voitiin aloittaa, täytyi sille luoda puitteet. Käytännössä tämä tarkoitti uuden kansion luontia palvelimen julkisiin kansioihin ja uuden tietokantakäyttäjän ja -taulun luontia. Tämän lisäksi piti hankkia tarvittava kehitysohjelmisto. Palvelu on toteutettu pääosin Linux-työpöytäjärjestelmässä (Kubuntu Linux 7.10) webkehitykseen tarkoitetulla Quanta Plus -ohjelmalla, joka on saatavilla ilmaiseksi Internetistä Linux-järjestelmille.
6 3 OHJELMISTOT JA TIEDOSTOMUODOT Työn käyttämällä KServer-palvelimella oli valmiiksi asennettuna Apache2- webpalvelin, PHP:n 1 5-version hypertekstin esisuorittaja ja siihen useita kirjastoja sekä MySQL 2 -tietokantapalvelinohjelmisto. Palvelu on kirjoitettu PHP-ohjelmointikielellä (tiedostopääte.php), joka mahdollistaa dynaamisten websivujen luomisen. PHP käyttää hyväkseen siihen asennettua MySQL-kirjastoa, jonka avulla on mahdollista käyttää kyseistä tietokantapalvelinta muuttuvien tietojen hallintaan; sekä GD2-grafiikkakirjastoa, jonka avulla PHP-ympäristö kykenee muokkaamaan ja muutoin käsittelemään grafiikkaa ja kuvia. Asiakkaalle sivusto toteutetaan nykyaikaisella XHTML-muotoilukielellä 3, joka mahdollistaa helpon siirrettävyyden muillekin kuin tavallisille tietokoneille, kuten matkapuhelimille ja muille mobiililaitteille. Luotu XHTML-koodi ei itsessään sisällä sivujen tyylimääritteitä (värit, sijainnit, kirjasimet yms.), vaan ne tuodaan erillisestä CSS-tyylitiedostosta 4, minkä takia uusien ulkoasuteemojen käyttöönotto on mahdollista. Näin esimerkiksi kännyköiden ja muiden pienten kannettavien laitteiden (nk. handheld-laitteiden) rajattu näytön koko voidaan käyttää mahdollisimman tehokkaasti käyttäen erityisesti ko. laitetta varten suunniteltua teemaa. 1 PHP: Hypertext Preprocessor 2 SQL: Structured Query Language. MySQL on tätä kieltä käyttävä tietokantapalvelinohjelmisto 3 XHTML: Extensible Hypertext Markup Language 4 CSS: Cascading Style Sheets
7 4 WEBSTANDARDIT W3C eli World Wide Web Consortium kehittää useita laajalti hyväksyttyjä webmääritteitä eli -standardeja. Opinnäytetyö käyttää näistä kahta: XHTMLmuotoilukieltä ja CSS-tyylimäärittelykieltä. Jotta mahdollisimman monella olisi mahdollisuus käyttää palvelua, ei siitä haluttu tehdä riippuvaista mistään tietystä selaimesta tai muusta käyttöympäristöstä. Paras tapa toteuttaa sellainen riippumattomuus on käyttää webstandardeja. Kaikki palvelun sivut ovat oletuksena täysin standardinmukaista XHTML:ää ja CSS:ää. Standardien käyttämisellä on myös muita etuja. Esimerkiksi CSS-muotoilutiedostoa voidaan varsin yksinkertaisin toimenpitein muokata niin, että se vaikuttaa koko sivustoon. Tämän ansiosta esimerkiksi käyttäjän omat tyylimäärittelyt ovat mahdollisia. 4.1 Noudattamisen ongelmat Valitettavasti valtaselaimista 5 yksi, Microsoft Internet Explorer, ei vielä hallitse kunnolla käytettyjä XHTML- ja CSS-määrityksiä. Sen takia sillä sivustoa katsellessa sivuston ulkoasu ei vastaa sitä, mitä kehittäjä on ajatellut. Selain ei ilman sitä varten kirjoitettua yhteensopivuustilaa suostuisi näyttämään sivua millään tavalla. Millään muulla testatuista selaimista ei ole ollut ongelmia sivun mallinnuksessa. 5 Valtaselaimet tarkoittavat tässä Mozilla Firefoxia, Microsoft Internet Exporeria, Operaa ja Konqueria.
8 5 PALVELUN NIMI JA LOGO Koska iskevä nimi ja selkeä logo ovat osa toimivaa ja laadukasta palvelua, tälle työlle haluttiin mieleenpainuva ja helposti muistettava nimi ja logo. 5.1 Nimi Ensimmäisenä mietittyä nimeä kehiteltäessä haluttiin sen olevan kansainvälinen, helposti ymmärrettävissäoleva, KServerin tunnettuutta kasvattava ja kertova. KServer Cultural Exchange tuli valituksi, sillä se vastasi parhaiten annettuja vaatimuksia. Nimi on kuten useat KServerin palveluiden nimistä melko pitkä, jonka takia siitä käytetään lyhenteitä, kuten KServerCX tai KScX. Lyhenteen X-kirjain tulee amerikkalaiseen tapaan lyhennetystä ex-alkuisesta sanasta ( X lausutaan englanniksi ex ). Lyhenteitä pohtiessa sai alkunsa myös palvelun logo. 5.2 Logo Logon (kuvassa) haluttiin olevan selkeä, mieleenpainuva ja kiinteä osa palvelun nimeä. Sen haluttiin olevan selkeä myös silloin, kun tarkkaa versiota ei voida käyttää (kuten joissakin kannettavissa laitteissa). Logon väritys johtuu ensimmäisen Fire-teeman punaoranssi-keltaisesta värityskaavasta. Sen varjo luo syvyysvaikutelmaa nostaa sen pohjasta. Tällöin sen KUVA 1. KServer Cultural Exchangen CXlogo käyttö osana muutenkin paljon syvyysvaikutelmaa käyttävää sivustoa on luontevaa. Logo myöskin erottuu niin vaaleasta kuin tummemmastakin pohjasta.
9 6 PALVELUN OSOITE Palvelulle haluttiin antaa sellainen Internet-osoite, että se selkeästi olisi osa KServeriä mutta silti uniikki toimintonsa. Palvelun kehittämisvaiheessa osoite oli www.kserver.dy.fi/cx, mutta saadun palautteen takia se muutettiin lyhyempään cx.kserver.dy.fi -muotoon. Kun webosoite alkaa muulla kuin www. :llä, on osoitteen syöttö automaattisella täytöllä varustettuun selaimeen helppoa, sillä selaimen sivuhistoriassa on yleensä useita www -alkuisia osoitteita ja sen syöttäminen tuottaa pitkän listan sivustoista, kun taas cx -alkuisia osoitteita ei varmasti kovin montaa sivuhistoriassa ole. Tämän ansiosta käyttäjä voi siirtyä palveluun nopeasti.
10 7 SAAVUTETTAVUUS Palvelua halutaan tarjota kelle tahansa Internetin käyttäjälle riippumatta niistä puitteista, joita hän käyttää. Tällaisen järjestelmän suunnittelu ja toteutus on monimutkaisempaa kuin tietylle yhdennäköiselle kohderyhmälle. 7.1 Webstandardit Kuten luvussa 4 on mainittu, palvelu on täysin yhteensopiva yleisesti tuettujen standardien kanssa (XHTML ja CSS). Tällöin palvelu ei ole sidoksissa mihinkään tiettyyn selaimeen, vaan mikä tahansa standardeja noudattava selain tuottaa samannäköisen sivuston. 7.2 Väritysteemat Palvelussa on pyritty käyttämään hillittyjä väriteemoja, jotta esimerkiksi punavihersokeille voitaisiin taata yhtäläinen mahdollisuus käyttää palvelua. Tämän lisäksi käytetyn teematekniikan ansiosta on mahdollista tehdä erityisiä korkean kontrastin 6 teemoja. Tällaisille ei kuitenkaan löydetty tarvetta palvelun testausvaiheessa. 7.3 Grafiikaton selaus Mikäli käyttäjä ei voi tai ei halua nähdä kuvia palvelua käytettäessä esimerkiksi sokeuden tai selaimen rajoittuneisuuden takia, kuvat on korvattu standardinmukaisesti niinkutsutulla alt-tekstillä, eli tekstillä joka esitetään grafiikan paikalla jos sitä ei voida tai haluta esittää. Tämä tarkoittaa käytännössä sitä, että esimerkiksi sokealla on mahdollisuus käyttää palvelua puhesyntetisaattoriohjelmiston 7 avulla. Tai jos käyttäjä käyttää tekstipohjaista selainta (kuten ELinks), hän voi sitäkin käyttää niin että sisältö on edelleen tajuttavissa. 6 Kontrasti eli värierottuvuus: se, kuinka hyvin osat erottuvat taustasta väritykseltään. 7 Puhesyntetisaattoriohjelmisto: ohjelmisto joka tuottaa koneellisesti tekstistä puhetta.
11 7.4 Pikanäppäimet Palvelu käyttää myös niin kutsuttua AccessKey-toiminnallisuutta, jonka avulla palvelun linkeissä voidaan navigoida pikanäppäimin. Näppäinyhdistelmä koostuu linkin alleviivatusta kirjaimesta sekä selainkohtaisesta AccessKeynäppäinyhdistelmästä. Esimerkiksi Mozilla Firefoxissa palvelun etusivulle voidaan siirtyä näppäinyhdistelmällä Alt+Shift+H 8. Konqueror-selaimessa vastaava toiminta saavutetaan painamalla Ctrl,H 9. 7.5 Yhteneväisyys Sivusto on suunniteltu niin, että riippumatta käyttäjän sijainnista sivustolla sen rakenne säilyy. Näin halutaan välttää käyttäjän eksymistä sivustolle, ja kaikkien saatavillaolevien toimintojen selkeää näkyvyyttä valikoissa. Kaikkien elementtien paikat ovat erikseen määriteltävissä teemassa, mutta samassa teemassa kaikkien sivujen elementit sijaitsevat samoilla paikoilla. 8 Alt+Shift+H: Näppäinyhdistelmä, jossa muokkaajanäppäimet Alt ja Shift pidetään alaspainettuina, painetaan H-näppäintä ja vapautetaan kaikki näppäimet. 9 Ctrl,H: Näppäinyhdistelmä, jossa painetaan ensin Ctrl, vapautetaan se ja painetaan sen jälkeen H-näppäintä.