Selaimella ylläpidettävän verkkosivuston suunnittelu ja toteutus

Koko: px
Aloita esitys sivulta:

Download "Selaimella ylläpidettävän verkkosivuston suunnittelu ja toteutus"

Transkriptio

1 Ville Hokkanen & Marko Myyryläinen Selaimella ylläpidettävän verkkosivuston suunnittelu ja toteutus Opinnäytetyö Tietojenkäsittelyn koulutusohjelma Huhtikuu 2008

2 KUVAILULEHTI Opinnäytetyön päivämäärä Tekijä(t) Ville Hokkanen & Marko Myyryläinen Koulutusohjelma ja suuntautuminen Tietojenkäsittelyn koulutusohjelma Nimeke Selaimella ylläpidettävän verkkosivuston suunnittelu ja toteutus Tiivistelmä Opinnäytetyömme tavoitteena on luoda www-sivusto, jonka ylläpidon avuksi suunnittelemme ja luomme www-sisällönhallintajärjestelmän. Ylläpitotyökalujen tulee olla helppokäyttöisiä, jotta www-sivuston päivitys onnistuu helposti myös ilman erityistä ohjelmointiosaamista. Työssä selvitämme sisällönhallintajärjestelmän luomisessa käytettäviä eri tekniikoita ja muita vaihtoehtoisia tapoja sisällönhallintaan. Pääpaino on kuitenkin omien ylläpitotyökalujen rakentamisessa ja dynaamisen www-sisällön tuottamisessa. Työn teoriaosuudessa kerromme sisällönhallintajärjestelmien tarpeellisuudesta ja niissä käytetyistä tekniikoista. Kerromme kuinka näiden tekniikoiden avulla voidaan toteuttaa räätälöity sisällönhallintajärjestelmä. Toteutetun suunnitelman ja sovelluksen pohjana on järjestelmän helppokäyttöisyys. Esittelemme toteutetut ylläpitotyökalut ja niiden vaikutuksia asiakkaalle näkyvään www-sivustoon. Työmme lopputuloksena saimme toteutettua toimeksiantajalle uuden www-sivuston ylläpitojärjestelmineen. Ylläpitotyökalujen avulla www-sivustolla on helppo välittää ajan tasalla olevaa tietoa asiakkaille. Tulevaisuudessa toimeksiantajalla on halu laajentaa järjestelmää verkkokaupan ja extra-netin avulla. Asiasanat (avainsanat) WWW-sivut, sisällönhallinta, käytettävyys, ylläpito, internet Sivumäärä Kieli URN 40 s. + liitt. 29 s. Suomi URN:NBN:fi:mamkopinn Huomautus (huomautukset liitteistä) Ohjaavan opettajan nimi Jukka Selin Opinnäytetyön toimeksiantaja Mikkelin Autotarvike Oy

3 DESCRIPTION Date of the bachelor's thesis May 9, 2008 Author(s) Ville Hokkanen & Marko Myyryläinen Degree programme and option Business information technology Name of the bachelor's thesis Planning and building a webpage updatable with a browser Abstract The aim of our bachelor s thesis was to plan and create a website and a www content management system to update this site. The updating tools had to be easy-to-use so that it would be possible to update the website even without special programming skills. We studied different techniques used when creating content management systems and other alternative ways to control the content. The main goal was to build our own tools for updating and to create dynamic www content. The theoretical part of the study dealt with the necessity of the content management systems and techniques used in them. We explained how a custom-made content management system could be built with these techniques. The created plan and application highlighted the convenience of the system. We introduced the created updating tools and their effects from the user s viewpoint. Finally, we made a new updatable website for our client. This website is easy to update with the updating tools. In the future the client wants to expand the system with an online store and extranet. Subject headings, (keywords) webpages, content management, usability, maintenance, the internet Pages Language URN 40 p. + app. 29 p. Finnish URN:NBN:fi:mamkopinn Remarks, notes on appendices Tutor Jukka Selin Bachelor s thesis assigned by Mikkelin Autotarvike Oy

4 SISÄLTÖ 1 JOHDANTO SISÄLLÖNHALLINTAJÄRJESTELMÄ Miksi www-sisällönhallintajärjestelmä? Staattinen web-dokumentti Dynaaminen web-dokumentti Erilaisia sisällönhallintajärjestelmiä Dynaamisen tietokantapohjaisen verkkosivun luominen JavaScript HTML-lomakkeet PHP MySQL CSS Sähköpostin lähetys KÄYTETTÄVYYS Käytettävyys yleensä Www-sivun käytettävyys Verkkosivujen ylläpito ja käytettävyys Editori WYSIWYG Ylläpitotyökalut Käytettävyystestin suunnittelu MIKKELIN AUTOTARVIKE OY:N PÄIVITETTÄVÄ VERKKOSIVUSTO Mikkelin Autotarvike Oy Käytettävien tekniikoiden valinta Internetsivuston suunnittelu Sivustokokonaisuuden laajuus Sivuston ulkoasu ja CSS-tyylipohjat Tietoturva Ylläpitotyökalut Tietokannat Käytettävyystesti... 35

5 4.7 Luovutus PÄÄTÄNTÖ LÄHTEET... 39

6 1 JOHDANTO 1 Opinnäytetyömme tarkoituksena on tutkia internetsivustojen päivitettävyyttä ja käytettävyyttä eri tekniikoilla. Opinnäytetyöhömme liittyvänä kehittämistyönä toteutimme www-sivut ja niiden ylläpitotyökalut Mikkelin Autotarvike Oy:lle. Verkkosivujen ylläpitotyökaluista käytetään myös nimitystä sisällönhallintajärjestelmä. Järjestelmän avulla ylläpitäjän on helppo muuttaa ja päivittää sivustolla olevaa sisältöä. Sivuston ylläpitäjät eivät enää nykyisin ole editorilla html-koodia kirjoittavia ohjelmoijia, vaan sisällönhallintajärjestelmien avulla sivuston tietoja voi muokata myös ohjelmoinnista tietämättömät henkilöt. Työmme toimeksiantaja Mikkelin Autotarvike Oy on perinteikäs varaosamyymälä Mikkelin keskustassa, mikä kuuluu valtakunnalliseen Osaset varaosa-ketjuun. Heillä ei ollut aiemmin minkäänlaisia omia www-sivuja. Mikkelin Autotarvike Oy:llä on tavoitteena saada kaikenlaista ajankohtaista ja monipuolista informaatiota sekä mainontaa internetiin. Sivut toimisivat uutena markkinointikanavana ja tarjoaisivat uusia mahdollisuuksia asiakaskontakteihin ja myynnin lisäämiseen. Sisällönhallintajärjestelmän avulla uusien mainosten ja ilmoitusten teko tulisi olla helppoa ja nopeaa. Uudet ajan tasalla olevat mainokset saavat sivulla kävijän uudelleenkin sivustolle. Opinnäytetyössämme esittelemme ensin sisällönhallintajärjestelmän idean. Käymme läpi eri vaihtoehtoja www-sisällönhallintajärjestelmän hankintaan, mutta työn painopiste on omien ylläpitotyökalujen rakentamisessa sekä dynaamisen sisällön tuottamisessa. Lisäksi yksi keskeinen teema työssämme on www-sivun ylläpidon käytettävyys. Sisällönhallintajärjestelmässä käytettävää ohjelmointikieltä ja tekniikoita työssä käydään läpi yleisellä tasolla. Esittelemme vain työssä tarvitsemiamme tekniikoita. Työssä pyrimme havainnollistamaan toimeksiantajalle luotavan työn avulla, kuinka toteutetaan helposti muokattavissa olevat www-sivustot päivitystyökaluilla. Toteutettavan sisällönhallintajärjestelmän helppokäyttöisyyttä varmistamme toteuttamalla käytettävyystestin ennen työkalujen käyttöönottoa. Opinnäytetyömme empiirinen osuus käsittelee aihetta toteutuksen näkökulmasta ja keskitymmekin kuvaamaan kehittelemiämme päivitystyökaluja ja niiden vaikutusta sivuston ulkoasuun ja sisältöön.

7 2 SISÄLLÖNHALLINTAJÄRJESTELMÄ 2 Sisällönhallintajärjestelmä on erilaisten työkalujen kokonaisuus, joiden avulla voidaan hallita www-sivuilla näytettävää sisältöä. WWW-sisällönhallintajärjestelmästä puhuttaessa nähdään käytettävän myös muita nimityksiä, kuten julkaisujärjestelmä tai wwwjulkaisujärjestelmä tai lyhyesti CMS (Content Management System). Työkalut helpottavat käyttäjää ja tarjoavat mahdollisuuden muokata www-sivun sisältöä ilman erityistä ohjelmointiosaamista. Sisällönhallinnassa keskeinen tehtävä on sivupohjien määrityksillä, jonka yhteyteen lisätään erilaisia päivitettäviä tietoja. Sisällönhallinta sisältää tietokoneiden tiedostot, kuvamateriaalit, sähköiset asiakirjat, www-sivujen sisällön ja mahdollisen interaktiivisen muun sisällön. Viime vuosina organisaatiot ovat pyrkineet ratkaisemaan verkkopalvelujensa tiedon hallintaa tietotekniikkayritysten tarjoamien integroitujen sisällönhallintajärjestelmien avulla. Ohjelmat sisältävät tehokkaita työkaluja, sisällöntuotannon, päivitysten ja ylläpidon sekä julkaisemisen prosesseja varten. Tekniset ratkaisut tukevat kerran tallennetun tiedon hallintaa sen elinkaaren eri vaiheissa. (Kauhanen-Simanainen 2003, ) Erilaiset hallintajärjestelmät tarjoavat mahdollisuuden dynaamisen www-sivu sisällön luomiseen ja muokkaamiseen. Sivuilla olevan tiedon jatkuva päivittäminen ja muokkaus ovat yleistäneet tarvetta tällaisille hallintatyökaluille. Näiden avulla päivittäminen on saatu nopeammaksi ja kuluttajille tarjotaan enemmän ajan tasalla olevaa tietoa. Staattisen eli muuttumattoman tiedon muokkaus vaatii aina enemmän ohjelmointikoodiin perehtymistä ja ymmärrystä eri tekniikoista. Sisällönhallintajärjestelmän avulla toteutetut dynaamiset www-sivut käyttävät palvelimen tietokantaa tiedon tallennukseen. Luotujen työkalujen avulla käyttäjä muokkaa tietokannassa olevaa dataa ja kun tietokantaa päivitetään, näkyvät muutokset välittömästi julkaistulla sivulla. Dynaaminen sivusto luodaan tallentamalla kaikki muutettavissa oleva tieto tietokantaan ja pysyvä tieto kirjoitetaan HTML-kielellä muun koodin joukkoon.

8 2.1 Miksi www-sisällönhallintajärjestelmä? 3 Sisällönhallintajärjestelmä tarjoaa hyötyjä niin käyttäjälle kuin koko yritykselle. Sen tarjoamat mahdollisuudet ovat lähes rajattomat. Www-sivujen sisällöstä vastaava henkilö voi järjestelmän avulla suoraan muokata sivuston tietoja, jolloin tieto saadaan esille halutun kaltaisena. Tieto säilyy muuttumattomana ja yritys saavuttaa kustannussäästöjä, kun oman it-väen tarve vähenee. Sisällönhallintajärjestelmän suurimmat kustannukset syntyvät sen rakentamis-, ja käyttöönottovaiheessa, kun taas säästöjä syntyy ylläpitokustannuksissa. Päivittäminen on järjestelmän avulla myös nopeaa ja antaa mahdollisuuden entistä useammin tapahtuvaan sivustojen muokkaukseen. Sisällönhallinnan avulla pystytään myös varastoimaan dataa sekä poistamaan turhat ja kenties vanhentuneet tiedot järjestelmästä. (Boiko 2005, 100.) Näiden asioiden mahdollistamiseksi sisällönhallintajärjestelmä sisältää seuraavat alla olevat asiat. Se tarjoaa sisällölle tallennuspaikan, joka voi olla palvelin ja tietokanta sekä erilliset sisällönhallintajärjestelmän hallintatyökalut. Ennalta määritetyt toimenpiteet julkaistavan tiedon saattamiseksi julkaisukuntoon. Lisäksi laitteiston tulee olla yhteydessä ohjelmistoon sekä muihin vaadittaviin järjestelmiin. (Boiko 2005, ) Yrityksen kannattaa harkita www-sisällönhallintajärjestelmän hankkimista, jos sivuston sisällön määrä on huomattava ja sisällöntuottajien määrä suuri. Muita syitä hankintaan voi olla usein sisältöön tehtävät muutokset ja hallittavien julkaisujen määrä. Boiko (2005, 113) tarkentaa, ettei mikään yksittäinen syy pelkästään edellytä sisällönhallintajärjestelmän hankintaa vaan tarve hankinnalle syntyy suuremman hyödyn tavoittelusta. (Boiko 2005, 113.) Lisäksi Robertson (2002) mainitsee artikkelissaan, että www-sisällönhallintajärjestelmälle tulisi asettaa mieluummin liikaa vaatimuksia kuin liian vähän. Tärkeimpinä mainitaan päivitettävyyden nopeus ja järjestelmän käytettävyys. (Robertson 2002.)

9 2.1.1 Staattinen web-dokumentti 4 Perinteiset web-dokumentit on tehty staattisiksi eli muuttumattomiksi siinä mielessä, että niiden muuttaminen vaatii tekijänsä toimia. Dokumenttien muuntaminen sisältää yleensä erikseen oman työvaiheen, jossa useimmiten ohjelmoija itse, siirtää muutetut tiedostot internetiin web-palvelimen kautta. Kokonaisuutena voidaan puhua webjulkaisemisesta. Näiden staattisten web-dokumenttien muuttaminen voi olla pahimmillaan todella hankalaa ja työlästä. Tämän kaltaiset julkaisut antavat käyttäjälle vähän mahdollisuuksia vaikuttaa esitettyyn tietoon. Staattiset web-dokumentit soveltuvatkin parhaiten tilanteisiin, joissa päivitettävää on harvoin eikä monimuotoisia vuorovaikutusmahdollisuuksia tarvita. (Rantala 2005, 3.) Staattisten web-dokumenttien etu on niiden nopea latautuminen, koska tietoja ei haeta erillisestä tietokannasta. Dokumentit itsessään sisältävät kaiken näytettävän tiedon. Rajoituksena staattisille www-sivuille voidaan mainita niiden joustamattomuus ja skaalautumattomuus. Jopa satoja sivuja sisältävän www-sivuston ylläpito voi olla erittäin työlästä ja pitkäveteistä, koska tiedot joudutaan päivittämään jokaiselle sivulle erikseen. (Boiko 2005, 75.) Dynaaminen web-dokumentti Web-dokumentit sisältävät nykyisin yhä enemmän muuttuvaa tietoa. Käyttäjän kannalta dokumentteihin on pystyttävä hakemaan muuttuvaa sisältöä esimerkiksi tietokannasta sen perusteella, mitä käyttäjä juuri sillä hetkellä haluaa nähdä. Lisäksi sivuilla halutaan näyttää ajan tasalla olevaa tietoa eli viimeisintä mahdollista tietoa. Näiden vuoksi web-dokumenttien täytyy olla helposti päivitettäviä. Perinteisin staattisin webdokumenttien avulla tämä ei ole mahdollista. (Rantala 2005, 4.) Yllämainittujen tarpeiden vuoksi, webin alkuperäistä staattista luonnetta on kehitetty ja viety eteenpäin eri tekniikoin. Onkin syntynyt erilaisia tekniikoita, joilla webdokumentit voidaan luoda osittain tai kokonaan dynaamisesti. Jos pääsääntöisesti dynaamisesti luotu web-sivusto on rakennettu jotain tiettyä sovellusaluetta varten, voidaan puhua web-sovelluksista. Nämä web-sovellukset koostuvat yleisesti useista PHPskripti kokonaisuuksista. Web-sovellukset toimivat pääsääntöisesti käyttäjän vuoro-

10 5 vaikutuksesta, joten puhutaan myös interaktiivisista web-sivustoista. Usein sivujen sisältö koostuu kuitenkin staattisten sekä dynaamisten tietojen kombinaatiosta sekä erilaisista tekniikoista. (Rantala 2005, 4 5.) Tällaisten www-dokumenttien hallintaan on kehitetty erilaisia www-sisällönhallintajärjestelmiä. Hallintajärjestelmän työkalujen avulla luodaan www-sivuja, jotka näyttävät sivujen sisällön ennalta määrätyllä tavalla. Näissä dynaamisuus on usein hyvinkin pitkälle vietyä ja staattista sivuilla on ainoastaan navigointimahdollisuudet ja asettelu. (Boiko 2005, 76.) 2.2 Erilaisia sisällönhallintajärjestelmiä Dynaamisten www-sivujen hankintaan on käyttäjälle tarjolla useita eri vaihtoehtoja. Hallintajärjestelmän voi hankkia itselleen joko turvautumalla valmiiseen ohjelmistoratkaisuun, pyytämällä räätälöidyn ratkaisun markkinoilla jo olevista tuotteista tai tekemällä se itse (Robertson 2006). Oman uuden järjestelmän kokonaan luomiseen on avuksi tarjolla kaupallisista www-editoreista esim. Macromedia Dreamweaver ja Microsoftin FrontPage. Lisäksi avoimeen lähdekoodiin perustuvat sisällönhallintajärjestelmät Joomla! ja MODx. Tarjolla on myös runsaasti eri it-alan yrityksiä, jotka tarjoavat sisällönhallintaratkaisuja joko valmiina tai räätälöitynä pakettina. Valmiit järjestelmät ovat verrattavissa valmiisiin talopaketteihin, joiden arkkitehtuurin räätälöinti on enää hienosäätöä. Www-sisällönhallintajärjestelmän rakenteet ja formaatit ovat valmiita, mutta muutoksia voidaan tehdä käytettäviin väreihin, kuviin sekä tietysti sisältöön. Esitettävälle tiedolle on valmiina paikka, koko ja ulkoiset määrittelyt eli rakenteellinen arkkitehtuuri on jo olemassa. (Kauhanen-Simanainen 2003, 116.) Sisällönhallintajärjestelmän luominen www-sivuille on aikaa vievää ja sen kehityksessä on hallittava monia eri ohjelmointikieliä (PHP, JavaScript, MySQL, HTML). Www-hallintajärjestelmän kehityksen yhteydessä luodaan myös uudet www-sivut, ellei niitä jo ole entuudestaan. Itse rakennetun hallintajärjestelmän etuina on, että voidaan tarkasti yksilöidä päivitystyökalujen sisältö ja toiminnot. Näin tehtynä sivu koostuukin pienistä elementeistä, jotka yhdessä rakentavat yhden kokonaisuuden. Nämä taas yhdessä luovat koko sivuston.

11 2.3 Dynaamisen tietokantapohjaisen verkkosivun luominen 6 Nykyään yritykset haluavat hyödyntää www-sivujaan tehokkaammin. Www-sivustolla vierailijat halutaan ottaa entistä paremmin huomioon. Heille halutaan lisätä vuorovaikutteisuutta sekä mahdollisuuksia vaikuttaa näytettävään sisältöön. Sivuilla käytetään paljon informaatiota, joka on tallennettuna tietokantoihin. Ohjelmoijan näkökulmasta on tarjolla paljon erilaisia tekniikoita, joilla päästään käsiksi tietokantoihin ja muuttamaan niiden sisältöä. Seuraavaksi esitellään joukko erilaisia menetelmiä, joilla voidaan luoda dynaaminen verkkosivu. Lisäksi toiminnallisuutta ja vuorovaikutteisuutta voidaan lisätä kiinteästi eri tavoin JavaScript Yleisesti JavaScript-koodia käytetään verkkosivustoilla lisäämään toiminnallisuutta. Käytetyin tapa käyttää sitä ovat toiminnot, joita HTML-kielellä ei pysty tekemään. JavaScriptiä voi ajaa tavallisen HTML-koodin joukossa, mutta ohjelmat täytyy kirjoittaa HTML-koodin HEAD-elementtiin seuraavasti: <script language= text/javascript > document.write( hello world!\n ); </script> // tulostetaan tekstiä JavaScript elementin attribuutteja voidaan myös muuttaa HTML:n HEADelementissä. Tällöin ohjelmaa voidaan kutsua muutetuilla arvoilla myöhemmin koodissa. JavaScriptiä käytetään yleisesti luomaan ponnahdusikkunoita, jotka voidaan SCRIPT-elementissä käskeä avautumaan halutunlaisesti. Seuraavassa esimerkissä ponnahdusikkunalle on asetettu ikkunan koko, sijainti ja ulkomuoto:

12 7 <HEAD> <script type="text/javascript"> function popupikkuna(url) { window.open(url,'name','height=510,width=820, top=50, left=100, resizable=yes, menubar=no, toolbar=no, scrollbar=yes'); } // määritellään ponnahdusikkunan attribuutteja </script> </HEAD> <BODY> <a href="javascript:popupikkuna('esimsivu.html')">siirry esimerkkisivustolle</a> // linkki avataan erillisessä ikkunassa JavaScript parametreilla </BODY> HTML-lomakkeet Www-lomakkeista pyritään tekemään mahdollisimman yksinkertaisia, jotta niissä esitetty informaatio tulisi helpommin ymmärretyksi. Sivustot sisältävät lomakkeiden lisäksi muita graafisia elementtejä, kuten kuvia, mainoksia yms. Kuitenkin nämä elementit tulisi sijoittaa lomakkeiden ulkopuolelle, jotta käyttöliittymä pysyy selkeänä ja tarkoituksenmukaisena. Yksinkertainen ja karu lomake on usein parempi ratkaisu kuin korea ja täyteen ahdettu. (Peltomäki 1998, 522.) Tietoturvasyistä HTML-lomakkeiden käsittelyyn ja lähettämiseen kannattaa kiinnittää huomiota. Toisena vaihtoehtona tietojen eteenpäin lähettämiseen on GET-metodi, mutta se ei ole käytännöllistä eikä nykyään turvallista. Siinä lomakkeen tiedot lähetetään eteenpäin sivuston URL-osoitteessa, mikä ei ole käytännöllistä esim. salasanojen lähettämisessä. Parempi tapa lähettää tietoja, on käyttää POST-metodia. Siinä tiedot lähetetään käyttäjältä piilossa, jolloin niitä ei pysty kukaan näkemään selän takaa. Tällöin ei myöskään URL-osoitteen pituus rajoita lähetettyjen tietojen määrää. Seuraavassa esimerkissä on luotu yksinkertainen lomake, jonka avulla käyttäjän etunimi ja sukunimi lähetetään POST-metodin avulla rekisterisivuston käsiteltäväksi.

13 8 <FORM name= esim method= POST action= rekisteri.html > Etunimi: <BR> <INPUT type= text name= etunimi size=15> <BR> Sukunimi: <BR> <INPUT type= text name= sukunimi size=15> <BR> <INPUT type= submit name= submit value= Lähetä tiedot > </FORM> PHP PHP on avoimen lähdekoodin ohjelmointikieli, jota käytetään apuna dynaamisten verkkosivustojen luomiseen. Yleisin tapa käyttää PHP:tä, on sivuston tietojen liittäminen tietokantaan. Tällä tavoin sivustolla vierailevalle saadaan näkyville aina viimeiseksi päivitetty tieto ilman lähdekoodin muokkaamista. PHP erotetaan muusta HTMLkielestä PHP-tageilla, joiden sisään itse PHP-koodi kirjoitetaan. <?php echo hello world! ;?> PHP-koodia ei pysty näkemään sivuston lähdekoodista, joten se on myös turvallinen tapa liittää sivusto tietokantaan. Näin salasanat ja käyttäjätunnukset eivät tule muiden tietoon. Yllä olevassa esimerkissä lähdekoodissa näkyy vain echo-metodin sisällä oleva teksti hello world!. Tavallinen käyttäjä ei tätä erota muusta lähdekoodista, vaan se näyttää tavalliselta HTML-koodilta. PHP:llä voidaan myös suorittaa laskutehtäviä ja ottaa tietoja talteen eri muuttujiin. (Heinisuo 2007, s ) $muuttuja = 12; $lasku = $muuttuja + 34;

14 2.3.4 MySQL 9 MySQL on ilmainen laajasti käytetty SQL-tietokannan hallintajärjestelmä. MySQLtietokannan päälle voidaan rakentaa useilla eri ohjelmointikielillä tietokantaa hallinnoiva ohjelmalogiikka. PHP on yksinkertainen tapa lähestyä MySQL-rajapintaa ja se onkin laajasti käytetty yhdistelmä. Meyers (2005) mainitsee artikkelissaan LAMPyhdistelmän olevan yhä suuremmassa suosiossa eri yritysten keskuudessa. LAMP koostuu avoimen lähdekoodin ohjelmista, joihin kuuluu Linux-käyttöjärjestelmä, Apache-palvelinohjelma, MySQL-tietokanta sekä PHP, Pearl tai Python ohjelmointikieli. LAMP-yhdistelmän kasvava suosio yrityksissä johtuu siitä, että se on ilmainen ja erittäin luotettava johtaviin kaupallisiin yhdistelmiin verrattuna. (Meyers 2005.) MySQL käyttää yleistä SQL-kieltä suorittaessaan lausekkeita tietokannoissa. Yksinkertaiset SQL-toiminnot ovat helppo oppia ja näillä tuleekin usein toimeen varsin hyvin. Yleisimmät tavat käyttää SQL-lausekkeita verkkosivustoilla, on tietojen haku, tallennus, muutos ja poisto. Tietojen haku tapahtuu SELECT-toiminnolla, josta Hovi (2004, 27) huomauttaa sen tarvitsevan vähintään SELECT- ja FROM-osat. Jotkut tietokantaohjelmistot, mukaan lukien MySQL, eivät FROM määrettä tarvitse, mutta tämä auttaa täsmentämään hakuja suurista tietomääristä. (Hovi 2004, 27.) Alla esimerkki SQL-kielen SELECT-hausta. SELECT etunimi, sukunimi FROM henkilo WHERE etunimi LIKE Matti ORDER BY sukunimi // Haettavat määreet // Haettavan taulun nimi // Rajaa haettavat arvot // Lajittelee arvot sukunimen mukaan PHP sisältää valmiit olioluokat tietokantoihin liittymiseen ja niiden käsittelyyn. Näiden lausekkeiden käyttö on helppoa, kunhan hallitsee perusteet. Kirjoitusvirheiden välttämiseksi ja mahdollisten muutosten sattuessa, on paras tapa kirjoittaa tietokannan avaamiseen tarvittava koodi erilliseen PHP-tiedostoon. Tämä on helppo liittää koodin joukkoon tarvittaessa PHP:n include-toiminnon avulla. Jos salasana tai käyttäjätunnus muuttuu, on yksinkertaisempaa vaihtaa se yhdestä tiedostosta kuin jokaisesta tiedos-

15 tosta, joita saattaa olla jopa satoja. Alla olevassa esimerkissä on esitelty tapa liittyä MySQL-tietokantaan. 10 $yhteys=mysql_connect("localhost","user","password"); // Määritellään muuttujaan tietokannan avaamiseen tarvittavat tunnukset ja salasanat mysql_select_db("database",$yhteys) or die ("Tietokantaan ei saada yhteyttä. Yritä hetken kuluttua uudelleen linkki"); // Avataan yhteys tietokantaan aiemmin määritellyillä tunnuksilla. Jos yhteyttä ei jostain syystä saada, siitä huomautetaan käyttäjälle or die komennon jälkeen tulevalla koodilla CSS CSS-tyylipohjilla (Cascading Style Sheets) voidaan luoda visuaalisesti paremman näköisiä verkkosivustoja kuin pelkällä HTML-koodilla. HTML-elementit luovat sivustolle laatikoita, joiden parametreja voidaan muokata CSS:n avulla. Vaikkakin joitain parametreja voidaan muokata myös HTML-koodin seassa, on parempi tapa määritellä ne CCS:n avulla jos niitä käytetään useamman kerran. Myös CSS-koodia voidaan kirjoittaa suoraan HTML-tiedoston HEAD-elementin sisään, mutta yleisimmin käytetty tapa on liittää CSS-tyylimäärittelyt mukaan erillisestä tiedostosta. Alla olevassa esimerkissä on tapa, jolla CSS:n avulla voidaan muokata taulukkojen parametreja..oma_table {border: 1px solid; border-top: opx; color: black; font-family: verdana; } // Määritellään oma olio, jonka parametreja muokataan // Määritellään taulukon reunat // Taulukon yläreunassa ei ole viivaa // Viivan väri on musta // Taulukossa käytetty fontti Holzschlag (2004, 210) mainitsee, että parhaan mahdollisen lopputuloksen aikaansaamiseksi on kiinnitettävä erityistä huomiota eri selaimiin. Kaikki selaimet eivät tue CSS:n kaikkia ominaisuuksia, joten joskus joudutaan turvautumaan koodin hakkerointiin, eli soveltamaan koodia tavalla, johon sitä ei ole alun perin tarkoitettu. Näin ollen

16 on tärkeää testata sivuston toimivuutta eri selaimilla tyylien määrittelyn aikana. (Holzschlag 2004, 210.) Sähköpostin lähetys Sähköpostin lähettämiseen internetsivujen kautta on eri tapoja. Piensivustoilla yleisin tapa on käyttää HTML-kielen MAILTO-funktiota. Tämän avulla vierailija voi lähettää postia määriteltyyn osoitteeseen, jos hänellä on käytössään sähköpostiohjelma (esim. Microsoft Office Outlook, Mozilla Thunderbird). Tämä ei kuitenkaan aina ole paras mahdollinen tapa, sillä yhä useammalla kotikäyttäjällä on käytössään vain webpohjainen sähköpostiosoite. Esimerkki MAILTO-funktion käytöstä: <a href= >Lähetä postia!</a> Käyttäjälle yksinkertaisempi ja nopeampi tapa lähettää postia, on käyttää PHP-kielen MAIL-funktiota. Tällä tavalla sivustoille täytyy rakentaa lomake, jonka tiedot lähetetään PHP-sivulle MAIL-funktion käsiteltäväksi. Ongelmana tässä ratkaisussa on kuitenkin se, että jos käyttäjälle jätetään mahdollisuus kirjoittaa käsin oma osoitteensa, ei se välttämättä ole oikea joko virhepainallusten tai tahallisesti väärän osoitteen takia. Etuna kuitenkin on se, että käyttäjän ei tarvitse turvautua eri ohjelmiin sähköpostin lähettämisessä, vaan hän voi hoitaa sen suoraan internetsivustolta. Seuraavassa on esimerkki MAIL-funktion käytöstä lomakkeelta saatujen tietojen perusteella: $to = // vastaanottajan osoite $aihe=$_post["aihe"]; // viestin otsikko $viesti=$_post["viesti"]; // viesti $lahettaja=$_post["lahettaja"]; // vierailijan sähköpostiosoite $from_header = "From: $lahettaja"; // asetetaan vierailijan osoite lähettäjän tiedoiksi mail($to, $aihe, $viesti, $from_header); // viesti lähetetään mailfunktiolla vastaanottajalle. suluissa mail-funktion tarvitsemat tiedot.

17 3 KÄYTETTÄVYYS 12 Internetsovellusten käytettävyyteen panostetaan aiempaa enemmän, sillä tietokoneita käyttävät nykyään myös tavalliset käyttäjät, toisin kuin pari vuosikymmentä sitten. Kasvavan ja tietoteknisiltä taidoiltaan vaihtelevan käyttäjäkunnan kannalta käytettävyydestä tulee sivuston menestyksen ja kävijäkunnan kasvamisen edellytys. Yksinkertainen sivusto hyvällä käytettävyydellä on parempi kuin monimuotoinen huonolla käytettävyydellä. Erilaisilla käytettävyystesteillä kartoitetaan sovellusten ongelmakohtia sekä arvioidaan sen onnistumiskriteerien täyttymistä. Pienehköjä käytettävyystestejä voidaan tehdä sovelluksen eri kehitysvaiheissa, mutta yleensä varsinainen testi järjestetään ennen sovelluksen käyttöönottovaihetta. 3.1 Käytettävyys yleensä Internet-sivujen käytettävyyttä on pitkään tutkinut tanskalainen Jakob Nielsen. Monet artikkelit tituleeraavat hänet maailman parhaaksi käytettävyyden tuntijaksi. Hänen laatimansa kolumnit ja kirjat käsittelevät suurimmaksi osaksi internet-sivujen käytettävyyttä. Hänen laatimaansa Nielsenin listaa on sovellettu käytettävyyden saralla useiden vuosien ajan. Nielsenin kymmenkohtaisesta listasta (liite 6) voidaan poimia viisi pääkohtaa, jonka perusteella hän määrittelee käytettävyyden. Muistettavuus: Käyttäjää pyritään auttamaan mahdollisimman paljon, jotta hänen ei tarvitse rasittaa muistiaan tarpeettomasti. Syötekenttiin on hyvä laittaa malliesimerkkejä, joiden pohjalta käyttäjän on helppo päätellä mitä hänen tulisi kirjoittaa. Myös mahdolliset numeeristen syötteiden raja-arvot ja yksiköt tulisi antaa käyttäjälle, jotta vältytään virhesyötteiltä. Sivuston eri välilehtien sisällön tulisi löytyä sivulta samasta kohdasta, jotta käyttäjän ei tarvitse etsiä painikkeita ja muuta sisältöä siirryttyään eri välilehdelle.

18 13 Sivuston kieli: Sivustolla tulisi käyttää käyttäjän omaa äidinkieltä ja aiheeseen liittyvää termistöä. Kieltä voi myös käyttää sopivien metaforien avulla, joista käyttäjän on helppo päätellä mitä kulloinkin tarkoitetaan. Esimerkiksi roskakori ja kansio ovat vakiintuneita termejä, joita tulisi käyttää. Virhetilanteet: Mahdollisten virhetilanteiden esittämisen tulisi olla selkeää ja ymmärrettävää. Virheilmoitusten tulisi olla kohteliaita eikä niiden tulisi syyllistää käyttäjää tai asettaa hänen älykkyyttään kyseenalaiseksi. Käyttäjää tulee ohjata mahdollisuuksien mukaan ratkaisemaan virhetilanteet ilman, että tarvitsee turvautua ohjekirjoihin. Ohjelmistoa suunniteltaessa on otettava huomioon virhetilanteiden välttäminen. Apu ja palaute: Sivuston tulee olla helppokäyttöinen, jotta käyttäjä suoriutuu tehtävistään ilman ohjeita. Useimmat käyttäjät eivät ikinä lue ohjeita, mutta aputoimintojen tulee kuitenkin olla helposti saatavilla. Käyttäjälle tulee antaa välitöntä palautetta tehtyjen toimintojen jälkeen, jotta hän tietää onko jokin asia onnistunut vai ei. Käyttäjän tulee olla myös koko ajan selvillä siitä mitä kulloinkin ollaan tekemässä ja mitä seuraavaksi tulee tehdä. Navigointi: Käyttäjälle tulee tarjota selkeät poistumistiet eri toiminnoista, jotta hän innostuu kokeilemaan eri asioita. Tarjolla tulee olla myös navigointia helpottavia oikoteitä ja linkkejä, joista pääsee vaivattomasti haluamaansa toimintoon. (Nielsen 1993, ) Yleensä ennen sovellusten käyttöönottoa järjestetään tuleville käyttäjille tai vertailuryhmälle käytettävyystesti. Testin avulla tutkitaan sovelluksen mahdolliset epäloogisuudet ja virheet, joita ohjelmiston tekijä ei itse havaitse. Testiolosuhteet pyritään luomaan mahdollisimman autenttiseksi, jolloin mm. testihenkilön stressitaso ja luonnollisuus vastaa todellisuutta. Testihenkilölle annetaan tehtäviä, jotka hänen tulisi ohjelmiston avulla suorittaa taitojensa mukaan. Yleensä testin päätteeksi testihenkilö arvioi erillisen kaavakkeen avulla ohjelmistoa. Loppupalautelomake voidaan laatia Nielsenin listan mukaisesti.

19 3.2 Www-sivun käytettävyys 14 Otsikoinnit Jokaisella sivulla tulisi olla oma sivua kuvaava otsikkonsa. Hyvä otsikko kertoo kävijälle sivun sisällöstä paljon ja hän näkee välittömästi mitä sivu sisältää. Toimiva otsikko tulisi olla vähintään kaksi tekstikokoa suurempi muuta tekstiä. Yleensä huomion kiinnittämiseksi voidaan käyttää muusta tekstistä erottuvaa väriä, kuitenkin hyvän maun rajoissa. Hakemistopolku Hyväksi havaittu navigoinnin apukeino on hakemistopolku, joka on ollut pitkään käytössä käyttöjärjestelmäpuolella. Internetsovelluksissa hakemistopolun nimet ovat linkkejä, joista pääsee navigointipuussa taaksepäin. Esimerkiksi: Etusivu > Tuotteet > Erikoistuotteet > Tuote Hakemistopolkua käyttämällä saavutetaan muutamia hyötyjä. Käyttäjä tietää aina missä päin sivustoa hän on. Tämä on tärkeää jos käyttäjä saapuu jollekin sivuston alasivuista etusivun sijaan. Se myös auttaa käyttäjää ymmärtämään sivuston hierarkiaa ja rakennetta. Käyttäjä voi myös hypätä useamman askeleen kerrallaan hakemistopolussa. Hakemistopolun tulisi aina näyttää todellinen hierarkia sen sijaan, että se näyttäisi polun, jota kautta kävijä on sivulle saapunut. Navigointi Sivuston navigointia voidaan pitää itsestäänselvyytenä, mutta siinä täytyy kiinnittää huomiota muutamiin seikkoihin. Navigointilinkkien tulisi erottua selkeästi taustastaan. Yleensä pelkkä tekstivärin muuttaminen ei riitä. Tulee myös kiinnittää huomiota, että linkkien nimet vastaavat sijaintisivun otsikointia täydellisesti. Linkit Linkkien tulisi kertoa kävijälle, mihin siitä pääsee ja linkkinimi ei saa olla harhaanjohtava. Käyttäjä todennäköisimmin klikkaa linkkiä, jos sen nimi on kuvaava. Pelkän "Klikkaa tästä!" -nimen käyttöä tulisi välttää. Nimen tulisi myös mahdollisuuksien mukaan vastata kohdesivun otsikointia.

20 15 Sivustorakenne Yhdenmukaisuus on toimivan sivustorakenteen edellytys. Kävijän tulisi voida käyttää sivustoa yhdellä alasivulla oppimallaan tavalla. Sivustorakennetta suunniteltaessa on vältettävä liian erikoista rakennetta, sillä kävijät ovat tottuneet perinteiseen kolmipalstaiseen malliin. Tässä mallissa navigointilinkit, sisältö ja mahdollinen lisäsisältö pysyvät omalla palstallaan sivustolla navigoidessa. Tämä helpottaa kävijää oppimaan sivuston rakennetta ja eri tehtävät sujuvat nopeammin. Edistyminen Tehtävän edistyminen kertoo kävijälle missä ostoprosessin tai varausprosessin vaiheessa hän kulloinkin on. Edistymistä kuvaavan palkin tai polun tulisi olla helposti havaittavissa ja sen ympärillä tulisi olla tyhjää tilaa. Edistymisestä tulisi käydä ymmärrettävästi ilmi mitä kulloinkin ollaan tekemässä ja sitä tulisi korostaa. Edistymisen eri vaiheet tulisi numeroida tai muuten kertoa edistymisen tilanne kävijälle. Sivuston otsake Sivuston otsakerivillä sijaitsevan otsikon tulisi olla lyhyt ja kuvaava. Lyhyestä otsakkeesta näkee nopeasti, millä sivustolla kullakin hetkellä ollaan. Myös tehtäväriville pienennetyistä selaimista näkee helposti selaimessa olevan sivuston. Jos käytetään muutamaa sanaa pidempää otsaketta, tulisi ensimmäisten sanojen olla kaikkein tärkein, sillä kävijä muodostaa sisällöstä kuvan ensimmäisten silmäiltyjen sanojen perusteella. Tämä helpottaa selaushistoriaa ja suosikkeja selatessa tunnistamaan kulloisenkin sivuston. Hakukoneiden haut tuottavat paremmin hakuja sivustolle, jonka otsake on hakusanoja täsmäävä. Sivukartta Sivukartan merkitys suurella sivustolla on kävijälle tärkeä. Se kertoo sivuston hierarkian ja mitä löytyy kunkin linkin takaa. Yleensä kävijä turvautuu sivukarttaan viimeisenä oljenkortena, jos hän ei ole löytänyt haluamaansa tietoa selaamalla tai etsimällä hakutuloksista. Tästä syystä sivukartan tulee olla selkeä, tiivis ja kuvastaa sivuston todellista rakennetta.

21 16 Iskulause Iskulause on yleensä sivuston logon alapuolella sijaitseva lyhyt kuvaus. Sen tulee olla selittävä ja mahdollisimman selvästi ymmärrettävissä oleva. Kuitenkaan siinä tulisi välttää markkinointipuheita. Iskulauseen tulisi olla vain muutaman sanan mittainen, sillä kävijä yleensä selailee eri sivustoja nopeasti ennen kuin löytää haluamansa. Lyhyt ja ytimekäs iskulause kiinnittää kävijän huomion paremmin kuin pitkä ja vaikealukuinen teksti. (10 ways to orientate users on your site 2007.) 3.3 Verkkosivujen ylläpito ja käytettävyys Valmiiksi tuotettu ja julkaistu www-sivusto vaatii tietenkin päivittämistä ja ylläpitoa. Harsu (2003, 77) mainitsee kirjassaan ylläpidolle neljä syytä: virheiden korjaaminen, uuteen ympäristöön mukauttaminen, uusien toimintojen lisääminen ja ylläpidettävyyden parantaminen. Karkeammin jaoteltuna voidaan puhua tiedon lisäämisestä tai korjaamisesta. Ennen korjausta tai lisäystä on ohjelmakoodista löydettävä kohta, johon muutos tehdään. Perinteisin keinoin jollakin editorilla tehdyt lisäykset ja muutokset voivat aiheuttaa ongelmia aiemmin toimineessa ohjelmassa. Tavallista onkin, että virheen löytyminen ja sen korjaaminen aiheuttaa aaltomaista muutostarvetta myös muuhun ohjelmakoodiin. Tällaista tilannetta kutsutaan väreilyvaikutukseksi. (Harsu 2003, 77.) Internet on interaktiivinen media, joka vaatii omistautumista toimiakseen hyvin. Sivuja on uudistettava ja kehitettävä uusien asiakkaiden saamiseksi tai muuten kävijöiden informoimiseksi. Ylläpitotehtävien ympärillä työskentelevät tietävät mitä muutosten tekeminen vaatii ja kuinka työlästä se voi olla. Muutosten tekoon on päivittäjällä valittavanaan erilaisia vaihtoehtoja. Sivusto voi olla yhteydessä erillisiin päivitystyökaluihin tai muutokset on tehtävä perinteisin tavoin, koodia käsin muokkaamalla. Seuraavassa on esiteltynä erilaisia vaihtoehtoja www-sivujen päivittämiseen käytettävyyden kannalta.

22 3.3.1 Editori 17 Ohjelmointia osaavat henkilöt käyttävät www-sivujen tekoon ja päivittämiseen paljon erilaisia tekstieditoreja. Työkaluksi käyvät kaikki editorit, joilla on mahdollisuus tallentaa tiedosto.htm- tai.html-muotoon. Suosituimpia www-sivujenteko-ohjelmia on Windowsin yksinkertainen Muistio-ohjelma, joka on itse asiassa tarkoitettu tekstin kirjoittamiseen. HTML-koodi on merkkipohjaista ohjelmointikieltä, eli se koostuu ASCII-merkistöstä. Ei ole siis olemassa estettä HTML-koodin kirjoittamiselle pelkän Muistio-ohjelman avulla. Muistio-ohjelma ei itsessään sisällä mitään HTML-koodin kirjoittamista avustavia toimintoja, joten kirjoitusvirheiden mahdollisuus kasvaa suuresti. (Keränen 2000, 18.) Editorilla tapahtuvaa www-sivujen muokkausta ei voi suositella kuin edistyneemmille tekijöille. Sivustokokonaisuudet sisältävät usein tuhansia rivejä koodia, joten niiden muokkaus ja päivittäminen tällaisen editorin avulla on todella työlästä, ellei jopa mahdotonta. Jos ylläpitäjä on eri henkilö kuin www-sivujen tekijä, voi sivuston muokkaus olla editorilla hankalaa, koska ylläpitäjän on ymmärrettävä toisen kirjoittamaa HTML-koodia. Tällöin koodin kommentoinnin sekä erillisten dokumentointien merkitys korostuu huomattavasti. Verkkosivujen ohjelmakoodin muokkaamiseen on tarkoitettu myös tekstipohjaisia html-editoreja. Nämä editorit säästävät kirjoitustyötä ja helpottavat komentojen muistamisessa. Näillä työskenneltäessä kirjoitusvirheet karsiutuvat myös pois koodista. Www-sivujen tekstin ja HTML-elementtien muokkaus tapahtuu editorin koodiikkunassa. Editorit eivät näytä sivua visuaalisessa muodossa, kuten WYSIWYG- ohjelmat, vaan koodin lopputulosta tarkastellaan edelleen selaimen avulla. Editori osaa kuitenkin merkitä HTML-elementit muusta tekstistä poikkeavalla värillä, mikä helpottaa oman koodin kirjoittamista sekä muiden tuottaman koodin ymmärtämistä. (Keränen 2000, 19.) Tietokantapohjaisten www-sivustojen ylläpito ja kirjoittaminen pelkän tekstieditorin avulla on kuitenkin hankalaa. Useimmat editorit näyttävät muut koodikielet kuin HTML pelkästään eri värillä, eivätkä pysty erottelemaan siitä mitään sisältöä.

23 3.3.2 WYSIWYG 18 Työskentely WYSIWYG- tyyppisellä ohjelmalla tapahtuu muokkaamalla sivun visuaalista näkymää. Muutokset tekstissä tai esimerkiksi taulukoiden leveydessä on heti näkyvissä ruudulla. Tunnetuimpia WYSIWYG-ohjelmia ovat Microsoftin FrontPage, Dreamweaver sekä ilmaisista ohjelmista Nvu. (Keränen 2000, ) Tämän tyyppiset ohjelmat ovat erityisen soveltuvia HTML-ohjelmointia aloitteleville. Näillä editoreilla saadaan aikaan www-sivuja todella nopeasti ja yksinkertaisesti. Ohjelman avulla tehdyn www-sivun tekeminen ei vaadi HTML-ymmärrystä lainkaan, mutta tiedostojen muokkauksessa saattaa tulla ongelmia. Käytettävyyttä nimittäin hankaloittaa editorin mahdollisesti tuottama ylimääräinen HTML-koodi. Ylimääräisellä koodilla tarkoitetaan toiminnallisuuteen vaikuttamatonta tekstiä. Tämä on ongelmallisiksi silloin, jos koodia halutaan muokata myöhemmin tekstieditorilla tai jollain muulla WYSIWYG-editorilla. Kun puhutaan WYSIWYG- editorilla tehdyistä www-sivuista ja niiden päivittämisestä, ei voida puhua hyvästä käytettävyydestä. Ohjelmointitaitoja tarvitaan edelleen melko paljon, kuten editorilla tapahtuvassa päivittämisessäkin. WYSIWYG-editorit tarjoavat helpotusta HTML-koodin kirjoittamiseen, mutta dynaamisen www-sivun rakentamiseen tarvittavien PHP sekä JavaScript koodipätkien kirjoitukseen ei apua yleensä ole saatavilla. Tämänkaltaiset editorit ovat enemmän tarkoitettu aloittelevien kotikoodaajien kotisivujen tekoon kuin alan ammattilaisten www-julkaisuihin Ylläpitotyökalut Kuten nimikin kertoo, ovat tämän tyyppiset ohjelmat rakennettu juuri ylläpitoa helpottaviksi työkaluiksi. Edellä mainitut tavat ovat hyviä, mutta juuri ylläpidon ja käytettävyyden kannalta hankalia. Ylläpitotyökalut tarjoavat mahdollisuuden luoda wwwsivuston sisältöä ilman, että käyttäjän tarvitsee tietää HTML-ohjelmoinnista mitään. Tämä jo itsessään tarjoaa täysin uuden ulottuvuuden www-sivujen päivittämiseen. Sisällön tuottaja voi siis suoraan lisätä tai muokata sisältöä eikä päivittämiseen tarvita ylimääräisiä välikäsiä, kuten ohjelmoijaa. Päivittäminen on nopeaa ja helppoa. Lopputulos on www-sivuilla aina halutunlainen, jos ylläpitotyökalujen rakenne on tehty toi-

24 19 mivaksi. Muutokset ja poistot on myös helppo suorittaa ilman pelkoa, että poistaa toiminnallisuuteen vaikuttavia asioita. Rakenteelliset muutokset, toiminnallisuuden lisäys sekä staattisen tiedon muokkaus vaatii kuitenkin aina ohjelmointiosaamista. Kuitenkin jos www-sivun omistaja on myös ylläpitäjä, työkalut tarjoavat käyttäjälle vähän hyötyjä, sillä ylläpitotehtävät hoituvat helposti myös editorin avulla. Henkilö tuntee oman ohjelmakoodin ja rakenteen, joten muutoskohdat on helppo löytää. Erilaisia Www-sivuston ylläpitotyökaluja on saatavilla internetistä suunnaton määrä. Niiden käyttöönottamisessa on kuitenkin omat haasteensa. Hyödynnettäessä vapaasti saatavilla olevaa koodia on ohjelmoijan ymmärrettävä sen rakenne ja komponentit erityisen hyvin. Näitä valmiita komponentteja yhdistettäessä omiin sivustoihin, on koodia muokattava aina jonkin verran, joten ohjelmointitaidot ovat tarpeen. Muiden tekemät työkalut sisältävät myös riskin ja niiden toimimattomuus tai erilaiset ongelmat voivat ilmetä vasta kun järjestelmä on otettu käyttöön. Asiaa tutkimalla ja internetiä selailemalla ovat tällaiset työkalut kuitenkin varteenotettava vaihtoehto pienen wwwsivuston ylläpidon tueksi. 3.4 Käytettävyystestin suunnittelu Ammattimaisessa web-suunnittelussa erilaisten testien järjestämisestä on tullut oleellinen osa suurempaa projektia. Tämä auttaa suunnittelijoita ja ohjelmoijia ohjelmiston hienosäätämisessä ja saatujen palautteiden pohjalta jatkokehitys helpottuu. Myös tarpeeksi varhainen virheiden ja epäloogisuuksien huomaaminen on tärkeää ennen kuin niiden korjaaminen aikataulun puitteissa on liian myöhäistä. Testattavien valinta Testin tulokset ovat yhtä hyvät kuin henkilöt joita testataan. Tästä syystä testihenkilöiksi tulisikin valita loppukäyttäjän kaltaisia henkilöitä. Oman yrityksen sisäisiä testihenkilöitä tulisi välttää, sillä heillä yleensä on suurempi tietämys ohjelmiston toimintalogiikasta kuin ulkopuolisilla henkilöillä. Testihenkilöitä hakiessa voi turvautua testihenkilöitä tarjoavaan yritykseen, joka etsii annettujen kriteerien perusteella sopivia henkilöitä. Testihenkilöitä hakiessa ei kuitenkaan hakijoille tulisi antaa yrityksen tietoja, jotta tieto ei vaikuta hakijoiden mielipiteisiin ja hakijoiden laatuun.

25 20 Testin käynnistäminen Ennen testin aloittamista on tärkeää, että testihenkilön annetaan sopeutua testiympäristöön rauhassa. Testin onnistumisen kannalta on oleellista, että testihenkilö käyttäytyy samankaltaisesti kuin hän käyttäisi sivustoa kotonaan tai töissä. Testihenkilölle tulee antaa selkeät ohjeet suoritettavista tehtävistä ymmärrettävällä kielellä. Mahdolliset testihenkilöllä allekirjoitettavat lomakkeet tulee olla lyhyitä ja selkeitä ja niistä tulee käydä ilmi, että testissä saatuja tietoja voidaan käyttää testituloksien esittämisessä. Aloittaessa testiä tulee testihenkilö totuttaa testiympäristönä toimivaan wwwsivustoon. Hänelle tulee antaa tarvittavat tiedot sivustolle pääsemiseksi ja aikaa selata sivustoa. Näin toimittaessa testihenkilö saa uskoa itseensä ja vakuuttuu siitä, että hän ei ole se jota testataan. Tehtävät Aseta testihenkilön testattavaksi asioita, jotka ovat olennaisia uudella sivulla, kuten tuotteiden osto, laskujen maksaminen tai yhteydenotto. Kysy myös testihenkilön mielipiteitä jatkotehtävistä, sillä niistä saattaa saada ideoita uusiin sivuston toimintoihin. Tehtäville kannattaa antaa taustatarina, jotta testihenkilön mielenkiinto ja motivaatio pysyvät korkealla. Pelkkä yhteystietojen etsiminen ei ole niin mielekästä sen sijaan, että kuvitellun tapauksen seurauksena tulee ottaa yhteyttä tiettyyn tahoon tapauksen ratkaisemiseksi. Testikäyttäytyminen On tärkeää muistaa, että testin kohteena on www-sivusto eikä testin suorittaja. Myös testihenkilön kanssa kommunikointia tulee välttää testin aikana, jotta mahdolliset vinkit tai elekieli ei muuta testin tuloksia. Jos testihenkilö ei pysty suoriutumaan jostakin tehtävästä, tee heille selväksi, että se ei ole heidän syynsä. Testin jälkeen Kerää testin jälkeen mahdollisimman paljon palautetta ja testihenkilön mielipiteitä sivustosta. Usein testihenkilöillä saattaa olla ideoita jatkokehityksestä ja muun toiminnallisuuden parantamisesta. Testihenkilöltä on myös hyvä kysyä mitä hän muistaa sivustosta ja sen rakenteesta. Selkeät muistikuvat kertovat hyvästä ja loogisesta rakenteesta. (8 guidelines for usability testing 2006.)

26 4 MIKKELIN AUTOTARVIKE OY:N PÄIVITETTÄVÄ VERKKOSIVUSTO 21 Opinnäytetyöhömme liittyvänä kehittämistyönä teemme ylläpitotyökaluilla päivitettävät internetsivut Mikkelin Autotarvike Oy:lle. Tavoitteenamme on tehdä mahdollisimman yksinkertainen ja nopeasti päivitettävissä oleva kokonaisuus, jotta toimeksiantajan ei tarvitse osata ohjelmointikieltä. Luovutettavan sivustokokonaisuuden toimiva käytettävyys varmistetaan työntekijöillä tehtävällä käytettävyystestillä. 4.1 Mikkelin Autotarvike Oy Mikkelin Autotarvike Oy on Mikkelissä toimiva perinteikäs varaosa- ja autotarvikeliike. Tauno Rehn perusti yrityksen jo vuonna 1965 vanhaan graniittitaloon Hallituskadulle. Nykyiselle paikalle Porrassalmenkatu 33:een yritys siirtyi vuonna Vuonna 2006 yritys siirtyi liiketoimintakaupalla nykyisten kauppiaiden hoidettavaksi, jolloin yrityksen vanha nimi, Mikkelin Autotarvike T. Rehn Ky, vaihtui nykyiseen muotoon. Yritys on toiminut alusta saakka autovaraosien tukku- ja vähittäiskauppiaana ja 1990-luvuilla mukana oli myös autojen piirimyynti- ja korjaamotoimintaa. Mikkelin Autotarvike Oy kuuluu osana valtakunnalliseen Osaset-ketjuun. (Haapea 2007.) Yhteys Mikkelin Autotarvike Oy:hyn syntyi, kun he tarjosivat Mikkelin ammattikorkeakoulun opiskelijoille päivitettävän verkkosivuston ohjelmointia projektina. Projekti aloitettiin alkusyksystä 2007 ja työn valmistumisen alustavana tavoitteena oli loppukevät Aihe kiinnosti erityisesti jatkossa mahdollisesti muissa töissä hyödynnettävien päivityskomponenttien osalta. Nykyaikana verkkosivustojen päivitettävyys on tärkeä osa sivuston kokonaisuutta, joten tekniikoiden osaaminen ja ymmärtäminen on hyödyllistä nyt ja tulevaisuudessa. Ensimmäisen palaverin aikana saatujen tietojen perusteella kävi ilmi, että projektin laajuus mahdollistaisi opinnäytetyön aiheesta, sillä yrityksellä ei ole ennestään omia verkkosivuja. Toteutettavan sivuston yleisilmeen tulee mukailla Osaset-ketjun teemaa. Sivuston etusivulle laitetaan päivitettäviä mainoksia, tarjouksia ja muuta ajankohtaista tietoa. Tällä tavalla asiakas saadaan vierailemaan sivustolla useamman kerran, jolloin asiakkaan kiinnostus liikettä kohtaan säilyy ja ajankohtaisin tieto liikkeen tapahtumista saadaan välitettyä. Ensimmäisten tapaamisten perusteella laadimme määrittelydoku-

27 22 mentin (liite 2), joka työn edetessä tarkentui vaatimusmäärittelydokumentiksi (liite 1). Dokumentit helpottivat rakennettavan järjestelmän sisällön ymmärtämistä. Näin oli alusta asti selvää, mitä työ tulee sisältämään. Henkilökunnan tietotekninen kokemattomuus ja toiveet antoivat työllemme yhdeksi päätavoitteeksi päivitystyökalujen helppokäyttöisyyden. Näin käytettävyydestä tuli opinnäytetyöhömme yksi sen tutkimusongelmista. Työtä päätettiin lähteä toteuttamaan alustavasti prototyyppimallin mukaan, jolloin toimeksiantaja näkee mihin suuntaan ulkoasu kehittyy ja voi antaa muutosehdotuksia. Jatkossa tapaamisia päätettiin pitää tarpeen tullen ja yhteydenpitovälineenä toimi sähköposti, jonka avulla myös mahdolliset materiaalit ja ehdotukset välitetään perille. 4.2 Käytettävien tekniikoiden valinta Mikkelin Autotarvike Oy oli rekisteröinyt käyttöönsä fi-päätteisen domainin (www.mikkelinautotarvike.fi). Käyttöönsä toimeksiantaja oli valinnut kotisivutilaa Osaset-ketjun omalta palvelimelta, jolla olisi kovalevytilaa käytettävissä alustavasti noin 10 Mt. Tämä asetti työllemme aiempaa suurempia rajoitteita sisällön suhteen. Kuitenkaan emme puuttuneet tähän rajoitukseen kirjaimellisesti, koska toimeksiantaja pystyisi mahdollisessa ongelmatilanteessa siirtämään sivuston suuremmalle palveluntarjoajalle. Palvelimen tukea selvitettäessä työ päätettiin toteuttaa ilmaisilla ohjelmointivälineillä. Palvelimella on tuki uusimmille PHP- ja MySQL tekniikoille, joita myös päätimme käyttää. Meillä on myös aiempaa kokemusta molemmista ohjelmointikielistä, joten valinta tuntui luonnolliselta ja uusien ohjelmointiongelmien ratkaiseminen oli helpompaa. Nämä kaksi tekniikkaa yhdistettiin HTML-kielen avulla ja ulkoasun tyyli rakennettiin CSS-tyylimäärittelyn avulla. Asiakkaalle näkyvillä sivuilla käytettiin myös JavaScript-kieltä lisäämään toiminnallisuutta.

28 4.3 Internetsivuston suunnittelu 23 Aloittaessamme työn tekemisen syksyllä 2007 teimme ensimmäisen karkean suunnitelman etusivusta piirtämällä sen paperille. Suunnitelman siirsimme sähköiseen muotoon käyttämällä notepad tekstinkäsittelyohjelmaa, paint piirustusohjelmaa ja yksinkertaista html-kieltä. Etusivun suunnitelmasta kävi ilmi päivitettävät elementit ja niiden sijainti. Näin tiedettiin alustavasti mitä päivitystyökaluja etusivun asettelussa tarvitaan. Lisäksi muiden staattisten elementtien sijainti ja koko päätettiin. Toimeksiantaja halusi etusivulla olevan mainoksia, tarjouksia, kuukauden tuotteita ja ajankohtaisia tapahtumia, joiden avulla pyrittiin vuorovaikutteisuuteen asiakkaan kanssa. Sivuston perusrakenne päätettiin toteuttaa taulukoiden avulla. Sivun yläosassa omassa taulukossaan on yrityksen logo, yhteystiedot sekä linkit eri välilehdille. Sivuston tulisi mukailla Osaset-ketjun yleisilmettä, joten tällainen rakenne muodostui näistä lähtökohdista. Sivun keskiosassa sijaitsee ajankohtaiset uutiset sekä sen alapuolella kauppiaan tarjous. Nämä elementit ovat päivitettävissä erillisellä päivitystyökalulla. Reuna-alueille jätettiin tilaa kuukauden tuotteille ja ketjun mainoskuville. Toimeksiantaja halusi omanlaisensa mainoskuvan, jossa on vaihtuvia kuvia. Tämä päätettiin toteuttaa flash-animaationa. Sivuston kävijämäärää haluttiin tarkkailla, joten sivun alareunaan toteutettiin kävijälaskuri. Sivulle lisättiin päivämäärä ja viikonpäivä, kuten Osaset ketjun sivustolla. Lisäksi halusimme, että asiakas näkee sivustolla olevan ajantasalla olevaa tietoa. Tämän vuoksi oikeassa yläreunassa on esillä päivämäärä, jolloin sivusto on viimeksi päivitetty. Sivuston toimivuuden ja ulkoasun kannalta oli tärkeää, että etusivu näyttäisi mahdollisimman samannäköiseltä eri selaimissa. Jo heti alusta lähtien testasimme sivuston toimivuutta eri selaimilla. Eniten käytimme testaamiseen Mozilla Firefox sekä Internet Explorer selainta, koska ne ovat ylivoimaisesti eniten käytettyjä selaimia. Eniten ongelmia ulkoasun suhteen aiheutti IE selain mm. miten kuvat näkyvät kävijälle oikein. IE selaimella oli myös ongelmia CSS tyylipohjien kuvakoon määrittelyjen kanssa.

29 4.3.1 Sivustokokonaisuuden laajuus 24 Sivustoa tehtäessä kokonaisuutta piti koko ajan tarkkailla, jotta se ei pääse laajenemaan liian suureksi. Toimeksiantajan visiot eivät kohdanneet aikataulua eivätkä realismia. Meidän täytyi selvittää todelliset resurssit ja priorisoida toteutettavat elementit. Toimeksiantaja halusi päivitettäväksi lähes kaiken jokaiselta välilehdeltä. Tässä on mietittävä päivitettävyydestä saavutettuja etuja suhteessa käytettyihin työtunteihin. Esim. onko tarvetta päivittää tuotteet ja palvelut välilehden tuotekategorioita, kuten varaosat. Varaosamyynti tuskin varaosamyymälän valikoimista koskaan katoaa. Työssä keskityimme työkaluihin, joista on eniten hyötyä ja joita tullaan myös käyttämään. Aikataulun ja laajuuden vuoksi jouduimme hylkäämään joitain ideoita. Toimeksiantajan mielessä oli toteuttaa nyt tai tulevaisuudessa verkkokauppa sekä extra-net osana sivustoa. Koska sivusto piti luoda tyhjältä pöydältä, ei aikataulu antanut periksi näiden suurien komponenttien tekemiseen. Lisäksi työmme keskittyy sisällönhallintajärjestelmään ja päivitettävyyden helppokäyttöisyyteen, jolloin verkkokauppa tai extra-net olisi kasvattanut työmääräämme liian suureksi. Jokaisen komponentin tekeminen olisi vaatinut vähintään yhtä paljon aikaa ja ne olivat hyvin erilaisia. Jokaisesta olisi voinut saada oman opinnäytetyön Sivuston ulkoasu ja CSS-tyylipohjat Sivuston välilehtien nimet ja sisältö päätettiin yhdessä toimeksiantajan kanssa. Välilehdillä on staattista sekä päivitettävää tietoa, joten niiden suunnitteluun käytettiin paljon aikaa. Välilehtien nimeämisessä ja sisällön kokoamisessa käytimme apuna muitten ketjun varaosaliikkeiden kotisivuja. Sivuston ulkoasun luonnissa käytimme apuna CSS tyylipohjaa. Koska tarkoituksena oli tehdä ulkoasusta Osaset ketjun tyylin mukainen, käytimme samaa fonttia (Verdana) ja samankaltaisia ulkoasumäärittelyjä sivustolla. Sivuston navigointilinkkien efektit luotiin myös CSS tyylimäärittelyjen avulla. Kursorin vienti linkin päälle muuttaa linkin väriä ja lihavointia. Muilta osin käytimme sivustolla omia tyyliin sopivia määrittelyjä.

30 25 Tyylipohjan avulla määrittelimme myös mainoksissa käytettävien kuvien maksimileveyden. Ulkoasun kannalta on tärkeää, että kuvat ovat oikean kokoisia, jolloin yleisilme säilyy suunnitellun kaltaisena. Käytettäville kuville määritetty leveys on 500 pikseliä, joka päivittäjän on myös otettava huomioon. Tämä tarkoittaa sitä, että kuvia on mahdollisesti muokattava oikeaan kokoon ennen niiden käyttöä. Vaikka CSS huolehtii kuvan sovittamisesta oikeaan kokoon, ei se kuitenkaan muuta kuvan todellista kokoa. Käytettäessä suurta kuvaa sivun lataaminen hidastuu tarpeettomasti suhteessa pienempään kuvaan, vaikka lopputulos näyttäisikin samalta. Etusivu Etusivu koostuu kolmesta pääkohdasta. Ylimpänä sivulla on ajankohtaisia tapahtumia. Tämän alla sijaitsee kauppiaan tarjous, jonka tarkoituksena on herättää sivustolla vierailevan mielenkiinto. Kuukauden tuotteet ovat listattuna oikeaan reunaan ja ne aukeavat erilliseen popup ikkunaan. Popup-ikkuna on määritelty avautumaan hieman vasemmasta yläkulmasta keskemmälle. Näissäkin mainoksissa käytettäville kuville on määritelty ohjelmassa yleisesti käytetty standardikoko. Liian suuri tai pieni kuva pakotetaan oikean mittaiseksi, jotta ikkuna näyttää halutunlaiselta. Käytettävyyttä ajatellen ikkunassa on myös JavaScriptillä toteutettu ikkunan sulkeva linkki. Kaikkiin näihin etusivulla oleviin muuttuviin tietoihin teimme erilliset päivitystyökalut. Näiden työkalujen avulla tiedon lisäys, poisto tai muuttaminen on mahdollista ja helppoa.

31 26 KUVA 1. Tuotteet & Palvelut Tuotteet ja palvelut välilehti sisältää suuren määrän tuotteita ja osan merkeistä, joita Mikkelin Autotarvike Oy:ssä on myytävänä. Sivuilla on lyhyt kuvaus tuotealueesta sekä joitakin PDF-tiedostoja tuotteista. Tiedostot ovat pääsääntöisesti jonkin tuotemerkin tuotekuvastoja. Toimeksiantajan pyynnöstä toteutimme työkalut, joilla sivuille voidaan lisätä ja poistaa PDF-tiedostoja. Kävijällä on näin mahdollisuus saada heti lisätietoa tuotteista, eikä näin ollen tarvitse mennä maahantuojan sivuilta sitä etsimään. Huoltokumppanit Välilehdellä näkyy Mikkelin Autotarvike Oy:n yhteistyökorjaamot Mikkelin lähialueilla. Korjaamot kuuluvat Autofit-ketjuun, joka tekee yhteistyötä Osaset-ketjun kanssa. Toimeksiantajalla on mahdollisuus muuttaa myös näitä tietoja tekemiemme päivitystyökalujen avulla.

32 27 Maahantuojat Tämä välilehti sisältää tietoa maahantuojista, joiden kanssa Mikkelin Autotarvike Oy tekee yhteistyötä. Maahantuojan nimi tai tuotemerkki toimii myös linkkinä heidän kotisivuille. Sivulla on maahantuojan logo sekä lyhyt kuvaus yrityksen tuotekategoriasta. Sivun tiedot eivät ole päivitettävissä työkalujen avulla, koska mielestämme tämän sivun tietojen muuttaminen ei ole kovinkaan tärkeää eikä yleistä. Myymälä Välilehti sisältää lyhyen yritysesittelyn Mikkelin Autotarvike Oy:stä. Lisäksi sivun alareunasta löytyy yrityksen organisaation henkilöstön esittely. Sivulta kävijä löytää suoran puhelinnumeron tavoittelemalleen henkilölle. Rekrytointi Toimeksiantajan mielestä rekrytointi välilehti oli erityisen tärkeä osa sivustoa. Välilehdellä olisi tarkoitus ilmoittaa avoimista työpaikoista sekä myöhemmin etsiä kesätyöntekijöitä. Avointen työpaikkojen tilannetta voidaan päivittää työkaluilla. Sivulla on myös linkki yhteydenotto-sivulle, josta voidaan lähettää työhakemus sähköpostitse. Yhteydenotto Tämä on oleellinen osa vuorovaikutteisuutta, johon sivustoilla pyrittiin. Lomakkeella voi laittaa liitteettömiä sähköpostiviestejä yrityksen yleiseen sähköpostiin. Lomake vaatii lähettäjältä sähköpostiosoitteen, viestin aiheen sekä itse viestin. Jonkin tiedon puuttuessa lomake antaa palautteen puuttuvasta tiedosta eikä viestiä lähetetä. Tarvittavien tietojen löytyessä ohjelma lähettää viestin eteenpäin PHP:n send-toiminnon avulla. Toimeksiantajan tavoite oli, että asiakkaat voivat pyytää tarjouksia ja kysyä lisää tuotteista.

33 28 KUVA 2. Yhteydenottolomake Tietoturva Toimeksiantajan pyynnöstä kaikki sivustolla olevat sähköpostiosoitteet kirjoitettiin Tilalle laitettiin (a)-merkkiyhdistelmä, joka Tällä toimenpiteellä mahdolliset internetissä liikkuvat sähköpostikerääjä-robotit eivät pysty hyödyntämään näitä osoitteita roskapostin levittämistarkoitukseen. Päivityssivusto on suojattu käyttäjätunnuksella ja salasanalla. Sivusto löytyy erillisen osoitteen takaa, joka on ainoastaan toimeksiantajan tiedossa. Sisäänkirjautumisen jälkeen voidaan vanha salasana vaihtaa turvallisemmaksi. Vaihdon yhteydessä lomakkeelle pitää syöttää vanha salasana ja uusi salasana kahteen kertaan virhepainallusten välttämiseksi. Ohjetoiminnoissa on mainittu, että salasanassa on syytä käyttää suuria ja pieniä kirjaimia sekä numeroita sekaisin. Tämä lisää salasanan turvallisuutta ja se on vaikeampi arvata.

34 4.4 Ylläpitotyökalut 29 Päivitystyökaluja suunniteltaessa oli tärkeää yksinkertaisuus ja helppokäyttöisyys. Koska päivitystyökalut näkyvät vain ylläpitäjälle, tyyleihin ja hienoon ulkoasuun ei kiinnitetty erityistä huomiota. Päivitystyökaluista tehtiin kauttaaltaan samankaltaisia, jolloin oppiminen ja niiden käyttäminen on helpompaa. Navigoinnissa pyrittiin siihen, että käyttäjä tietää koko ajan mitä hän on tekemässä. Tietojen lisääminen ja poistaminen ovat ulkoasullisesti samankaltaisia ja löytyvät samoista paikoista. Kirjautuminen Sivuston päivitystyökalut löytyvät erillisen url-osoitteen takaa, eikä se ole tavallisen käyttäjän tiedossa. Jos käyttäjä ei ole kirjautunut palveluun, ohjautuu hän kirjautumissivulle mennessään mille tahansa päivitysvälilehdelle. Tällä estetään asiattomien pääsy päivityssivustolle. Kirjautumissivulla käyttäjältä kysytään käyttäjätunnus ja salasana. Kirjautumistiedot tallennetaan sessio-muuttujaan, jolloin palvelu tietää käyttäjän olevan kirjautuneena sisään. Kirjautumisen jälkeen käyttäjä pääsee päivitystyökalujen päävalikkoon. Päävalikko Päävalikon linkit on jaettu selkeyden vuoksi kolmeen osaan. Ylimpänä ovat etusivun päivitettävät elementit, seuraavana eri välilehtien päivityssivut sekä alareunassa olevat ohjeet, salasanan muutos ja uloskirjautuminen. Päävalikko on selkeä josta käyttäjän on helppo aloittaa tarvittavat toimenpiteet. Ajankohtaista Käyttäjä voi tällä työkalulla lisätä etusivulle uuden ajankohtaisen tapahtuman. Lomake on tehty käyttämällä html:n form-elementtiä. Käyttäjältä kysytään tapahtuman otsikko, sekä tarkempaa informaatiota otsikon alle. Käyttäjän on mahdollista lisätä html tyylejä tekstin joukkoon, jolloin tekstistä voi korostaa haluttuja asioita. Sivun alareunaan on lisätty valmiita html koodeja, jotka helpottavat kokematonta käyttäjää. Käyttäjä voi kätevästi kopioida leikepöydälle haluamansa koodin ja lisätä sen tekstin joukkoon. Selitteeseen voi laittaa myös linkin sivulla oleviin pdf tiedostoihin esimerkiksi uusi tuotekuvasto erilaisista työkalusarjoista.

35 30 Päivityspainikkeen painamisen jälkeen tiedot tallentuvat SQL lausekkeiden avulla tietokantaan. Jos joku syötettävä tieto puuttuu, antaa ohjelma välittömän palautteen puuttuvasta tiedosta ja pyytää siirtymään takaisin. Onnistuneen päivityksen jälkeen ohjelma ilmoittaa, että kanta on päivitetty ja siirtää käyttäjän päävalikkoon. Vanhojen tietojen poistotyökalu löytyy ajankohtaista sivun poisto painikkeen takaa. Sivulla on näkyvillä vanhojen aiheiden otsikot ja niiden tietokannassa olevat id numerot. Käyttäjä voi poistaa näitä aiheita helposti syöttämällä kenttään poistettavan otsikon id numeron ja painamalla poista nappia. Tiedon poisto tapahtuu erillisen sivun kautta, mutta käyttäjä ohjataan välittömästi takaisin. Näin poistot näkyvät reaaliajassa ja ovat käyttäjän kannalta mahdollisimman helppoja ja turvallisia käyttää. Käyttäjälle on tarjolla oikopolku takaisin päävalikkoon poiston yhteydessä. Kauppiaan tarjous Tämän työkalun avulla käyttäjä voi vaihtaa uuden tarjouksen etusivulle. Päivityslomake on rakennettu myös formin avulla. Syötettävien tietojen avulla annetaan mainokselle otsikko, selite-teksti, hinta ja kuva. Päivitä-painikkeella tiedot tallentuvat tietokantaan edellisen mainoksen päälle MySQL:n update-lausekkeella. Tarjoukseen voi myös halutessaan lisätä html-tyylejä. Pääkohtien korostamiseksi on määritelty valmiiksi muutamia tyylikorostuksia ja asetteluja. Otsikko on lihavoitu, hinta on asetettu kuvan oikealle puolelle ja se on väriltään punainen. Aiemman mainoksen päälle tallentaminen oli loogisin vaihtoehto toteuttaa tarjouksen päivitys, sillä vanhoja mainoksia ei haluttu käytettävän uudestaan. Mainoskuvan lataamisessa tuli ottaa huomioon eräitä seikkoja. Käyttäjällä tulee olla valmiina sopivan kokoinen kuva, joka käyttäjän pitää hakea koneeltaan selaa-painikkeella. Tarvittavien tietojen syöttämisen jälkeen päivitetään tiedot tietokantaan. Ohjelma hakee edellisen mainoksen tiedot ja poistaa kuvan myös fyysisesti unlink-toiminnon avulla. Tämä vapauttaa serverillä olevaa tilaa muuhun käyttöön. Seuraavaksi ohjelma tutkii ladattavan kuvan tiedot. Jos kuva ei ole ennalta määrätyn kokoinen (alle 5Mt), se ei ole kuvatiedosto tai siinä on jotain muuta vikaa, tietojen päivitys keskeytetään eikä tietokantaan tehdä muutoksia. Käyttäjä ohjataan takaisin tietojen syöttölomakkeelle virheellisen kuvatiedoston takia. Kuvan ollessa oikeanlainen ohjelma tutkii onko kaikki syötetyt tiedot annettu. Tämän jälkeen tiedot päivitetään MySQL tietokantaan update-

36 lausekkeella, jolloin myös kuva kopioidaan ja siirretään fyysisesti serverille määritettyyn kansioon. 31 Päivityslomakkeella voi myös poistaa kokonaan kauppiaan tarjouksen. Tällöin tiedot päivitetään tyhjillä arvoilla. Tämän seurauksena etusivulla kauppiaan tarjous jää tyhjäksi. Kuukauden tuote Tämän työkalun avulla voidaan lisätä kauppiaan tarjouksen kaltaisia mainoksia. Erona kuitenkin, että tarjouksia voi olla useita. Päivitettäessä syötettävät arvot ovat otsikko, selite-teksti, hinta ja kuva. Näistä etusivulla on näkyvissä otsikko ja hinta. Näistä otsikot toimivat linkkinä erilliseen popup-ikkunaan, jossa näkyvät myös muut tiedot tuotteesta. Ladattaessa kuvaa ohjelma toimii kuten kauppiaan tarjousta päivitettäessä. Erona tähän on kuitenkin se, että kuvaa ei päivitetä vanhan päälle, vaan se lisätään uutena tietona. Tällöin on mahdollista, että kuukauden tuotteita voi olla useita. Etusivulla näkyvät tuotteet ovat niiden lisäämisjärjestyksessä, uusin ylimpänä. Vanhojen tuotteiden poisto tapahtuu, kuten ajankohtaista tapahtumien poisto, id-numeron avulla. Osaset.com linkkikuva Toimeksiantaja halusi työkalun, jonka avulla voidaan päivittää etusivulla oleva kuvalinkki osaset.com tuotekatalogiin. Koska katalogi uusitaan kerran vuodessa, linkkikuvaan täytyy saada oikea kansikuva oikeine vuosilukuineen. Päädyimme laittamaan sivuille linkkikuvan osaset-ketjun yhteiseen katalogiin, vaikka toimeksiantaja halusi alun perin meidän toteutettavan vastaavanlaisen varaosaluettelon. Päivitettäessä kuvaa on muistettava, että kuva on kooltaan reuna-alueelle sopiva. Uuden katalogin kuva tallentuu edellisen päälle, jolloin vanha kuva poistetaan myös fyysisesti. Kuten kaikissa ladattavissa kuvissa, on myös tämän kuvan nimeämisessä otettava huomioon skandit. Näitä merkkejä käytettäessä kuvan nimeämisessä tapahtuu virhe eikä ohjelma löydä kuvaa tietokannasta. Myös välilyönnin käyttö aiheuttaa saman virheen.

37 32 Avoimet työpaikat Rekrytointi-välilehdelle toimeksiantaja halusi päivitettävän tekstikentän, jossa olisi mahdollista ilmoittaa avoimista työpaikoista. Päivitystyökalun avulla voidaan päivittää uusi työpaikkatilanne vanhan tiedon päälle. Päivityslomakkeella on yksinkertainen tekstikenttä, johon tiedot syötetään. Päivitä-painikkeella hyväksytään muutokset ja tallennetaan tiedot tietokantaan update-lausekkeella. Huoltokumppanit Yksi toteutuksen kannalta haasteellisimpia osia oli huoltokumppaneiden päivittäminen. Koska huoltokumppanit halutaan luetella paikkakunnittain, on uuden lisääminen oikeaan paikkaan vaikeaa. Idea tietojen päivittämiseen html-koodin avulla lähti toimeksiantajalta. Hänen tietotekninen osaamisensa ja kiinnostuneisuutensa asiasta mahdollisti tämän ratkaisun. Tässä ratkaisussa on kuitenkin vaarana se, että päivitystyökalusta tulee liian vaikeakäyttöinen. Työkalusta pyrittiin tekemään helppokäyttöisempi havaintoesimerkkien avulla. Huoltokumppanit päivityssivu toteutettiin formin avulla, jossa on yksi suuri tekstikenttä. Tämä sisältää päivitettävän huoltokumppanit-sivun html-koodin. Formin koodin muokkaamista helpottamaan on tehty erilaisia esimerkkejä ja liitettäviä koodin osia. Tekstikentän oikealla puolella on näkyvillä koodi siinä muodossa, jossa se näkyy loppukäyttäjälle. Päivittäessä tämä koodi myös päivittyy, jolloin muutokset näkyvät välittömästi. Ylitsepääsemättömän tai vaikeasti ratkaistavan ongelman sattuessa käyttäjän on mahdollista palauttaa alkuperäiset arvot, joissa ei ole uusia tehtyjä muutoksia. Käyttäjää kehotetaankin varmuuskopioimaan uudet tiedot tämän varalta. Päivitys päätettiin toteuttaa tällä tavalla, koska tietoja ei päivitetä usein ja toimeksiantajan taidot käytettävyystestin perusteella riittävät hyvin työkalun käyttöön. Pdf:n lataus Toimeksiantaja halusi mahdollisuuden ladata pdf-tiedostoja tuotteet ja palvelut välilehdelle. Näin asiakkailla on mahdollisuus saada lisätietoa myytävissä olevista tuotemerkeistä. Tiedostojen lataamiseen tarvittavan koodin kirjoittaminen tuntui aluksi haasteelliselta. Pdf-tiedotojen lataaminen kuitenkin toimii pohjimmiltaan kuten kuvan lataaminen. Erona kuitenkin, että ohjelma tuli saada tunnistamaan ladattu tiedosto pdf-tiedostoksi kuvan sijaan.

38 33 Pdf-tiedosto tuli voida ladata eri kategorioiden alle. Toteutimme kategorian valinnan linkkiluettelona, josta pääsee tiedostojen lataamiseen. Jokaisen linkin loppuosassa lähetetään kategorian nimi id-toiminnon avulla, josta seuraavan sivun lomake ottaa sen käyttöönsä. Lomakkeella käyttäjältä kysytään otsikkoa pdf-tiedostolle. Tämä otsikko näkyy sivustolla linkin nimenä, josta vierailija voi ladata tiedoston omalle koneelleen. Käyttäjää myös pyydetään hakemaan pdf-tiedosto lomakkeelle selaapainikkeen avulla. Onnistuneen päivityksen jälkeen käyttäjä saa palautetta onnistumisesta ja hänet ohjataan takaisin päivitysohjelmiston etusivulle. Pdf-tiedostojen poisto tapahtuu samalla tavalla kuin kuukauden tuotteiden poisto. Erona tähän on kuitenkin se, että käyttäjän tulee ensin valita kategoria, jonka jälkeen poistamiseen päästään käsiksi päivityslomakkeen alla olevasta painikkeesta. Tämän jälkeen näkyvillä on lista, jossa näkyy tiedostojen otsikot ja niiden id-numerot. Tiedoston voi poistaa syöttämällä id-numero tekstikenttään ja painamalla poistopainiketta. Tulokset näkyvät heti reaaliajassa. Ohjeet Toimeksiantaja halusi päivityssivuille selkeät ohjeet työkalujen hallintaan (liite 3). Ohjeiden tuli olla riittävän yksityiskohtaiset, jotta ylläpitäjänä voi myös toimia henkilö, joka ei ole aiemmin tutustunut päivitystyökalujen toimintaan. Ohjeet sisältävät jokaisen työkalun toiminnan esimerkkeineen. Salasanan vaihto Salasanan vaihdon toteuttaminen oli melko yksinkertaista, kuten myös sen käyttäminen. Käyttäjän tulee syöttää vanha salasana ylimpään kolmesta tekstikentästä ja uusi salasana kahteen alimpaan. Tämän jälkeen ohjelma tutkii, onko vanha salasana sama kuin tietokannassa oleva ja ovatko uudet salasanat yhteneviä keskenään. Onnistuneesta vaihdosta käyttäjä saa palautetta ja hänet ohjataan eteenpäin. Jos salasanat eivät täsmää, käyttäjä ohjataan samalle sivulle ja lomakkeen alapuolella ilmoitetaan virheellisistä salasanoista. Tämä teksti saadaan aikaiseksi tallentamalla salasanan oikeellisuus sessio-muuttujaan. Onnistuneen salasanan vaihdon yhteydessä sessio-muuttuja tyhjennetään. Alla on esimerkki salasanojen tarkistuskoodista.

39 if (empty ($_SESSION['salasanavirhe2'])) { print('syötä salasana ja uusi salasana kahteen kertaan!'); } else { print('salasana tai uusi salasanapari virheellinen!'); } Tietokannat Sisällönhallintajärjestelmän keskeinen periaate on, että internetsivustolla olevat tiedot haetaan tietokannasta, joten jokaisella toiminnolla täytyy olla yhteys tietokantaan. Teimme yhteen tiedostoon (db_open.php) allaolevan koodin, jota kutsutaan kaikilla php-sivuilla. Näin vältytään turhalta koodin kirjoittamiselta ja jatkossa tietokannan käyttäjätietojen muuttaminen on helpompaa. <?php $yhteys=mysql_connect("localhost","user","password"); mysql_select_db("database",$yhteys) or die ("Tietokantaan ei saada yhteyttä. Yritä hetken kuluttua uudelleen linkki");?> Yhteys tietokantaan luodaan mysql_connect funktiolla. Suluissa määritellään serverin osoite, käyttäjätunnus ja tietokannan salasana. Mysql_select_db funktiolla valitaan tietokanta ja luodaan siihen yhteys. Mikäli yhteyttä tietokantaan ei pystytä luomaan, or die -komento keskeyttää sivuston lataamisen ja näyttää vierailijalle suluissa olevan tekstin. Tässä esimerkissä käyttäjää kehotetaan päivittämään sivu uudelleen tarjolla olevasta linkistä. Sivustokokonaisuudessa käytimme 11 eri tietokantaa. Kannat eivät kuitenkaan muodosta keskenään minkäänlaista yhteyttä. Jokainen kanta muodostaa oman kokonaisuutensa, joten ne ovat varmatoimisia käyttäjän kannalta.

40 4.6 Käytettävyystesti 35 Ennen varsinaista valmiin sivuston luovutusta suunnittelimme ja toteutimme järjestelmän tuleville käyttäjille käytettävyystestin (liite 4). Testin järjestäminen oli oleellista, jotta tiedetään, onko järjestelmä tarpeeksi helppokäyttöinen. Ohjelmoija osaa käyttää omaa järjestelmäänsä yleensä ongelmitta, joten mahdolliset virhetilanteet ja epäloogisuudet jäävät usein huomaamatta. Käytettävyystestiin valitsimme keskeisiä päivitystehtäviä ja joitain hieman harvemmin käytettyjä, joista jotkut ovat hieman vaativampia käyttää. Testiin oli varattu aikaa 30 minuuttia henkilöä kohden, joka oli testin kannalta riittävä. Ennen varsinaista testiä päätimme järjestää muutaman koetestin. Koetestiin osallistui yksi koulumme oppilas sekä tietoteknisiltä taidoiltaan varsinaista ohjelmiston käyttäjäryhmää samalla tasolla oleva henkilö. Näin saimme luotettavampaa ja monipuolisempaa tietoa testin vaikeustasosta ja sen hyödyllisyydestä. Molemmat suoriutuivat annetuista tehtävistä kiitettävästi. Tämä valoi uskoa ohjelmaamme kohtaan. Itse testissä on 13 tehtävää, joihin kuuluu mm. salasanan vaihto, tarjousten päivitystä ja tuotteiden poistoa. Ensimmäisenä vuorossa ollut toimitusjohtaja Kimmo Haapea suoriutui annetuista tehtävistä kiitettävin tuloksin, eikä hänen tarvinnut turvautua ns. oljenkorsiin tehtävässään. Häneltä saimme myös positiivista palautetta ohjelman käytettävyydestä. Toisena testin tehnyt myyntisihteeri Sari Sopanen joutui kysymään paikoin apua, sillä hänellä ei ole paljoakaan kokemusta vastaavista järjestelmistä. Pikaisen konsultoinnin jälkeen hän kuitenkin suoriutui muista vastaavista tehtävistä ongelmitta. Viimeisenä vuorossa ollut kauppias Jukka Kuitunen suoriutui tehtävästä loppuun saakka vaikka ongelmilta ei vältyttykään. Hänellä ei ole paljoa kokemusta tietokoneista yleensäkään, joten perustoiminnotkin olivat ongelmallisia. Hän kuitenkin suoriutui annetuista tehtävistä pikaisen opastuksen jälkeen. Palautelomakkeen rakensimme soveltaen Jakob Nielsenin laatimaa listaa käytettävyydestä (liitteet 5 ja 6). Eri elementtien ja mahdollisten virhetilanteiden tulee olla selkeitä ja helppoja käyttää. Näitä asioita kysyttiin palautelomakkeella, jonka jokainen täytti testin jälkeen. Palautteen pisteytyksen toteutimme rastitettavilla neliöillä, joita oli parillinen määrä. Tämä sen takia, että neutraalia vastausta ei saada aikaiseksi, vaan pa-

41 36 laute painottuu joko negatiiviseksi tai positiiviseksi. Saatu palaute oli varsin positiivista ja testin suorittajien mielestä järjestelmä oli onnistunut ja helppokäyttöinen heidän tarpeisiinsa nähden. 4.7 Luovutus Kun työkaluja ja sivuston toimivuutta oli testattu mielestämme tarpeeksi, päätimme toimeksiantajan kanssa päivämäärän, jolloin sivusto siirrettäisiin palvelimelle. Operaatio päätettiin suorittaa toimeksiantajan tiloissa, koska Osaset-ketjun ylläpitämälle serverille ei ole pääsyä ulkopuolelta. Asensimme toimeksiantajan koneelle tiedostojen siirtoon tarvittavan ohjelman (FileZilla). Tämän ohjelman avulla voidaan ottaa yhteys verkon yli ftp-tiedostonsiirtoa varten. Serverin ylläpitäjään oltiin yhteydessä puhelimitse, koska hänen täytyi luoda käyttäjätili tietokantaan mihin tiedot tallennettaisiin. MySQL-tietokantojen lisäämiseen tarvittavaa ohjelmistoa ei myöskään ollut saatavilla, joten ylläpitäjän täytyi laittaa PHPMy- Admin ohjelmisto meidän saataville. Tämän ohjelman avulla MySQL-kantojen lisääminen ja muokkaaminen ovat verkon yli helppoa ja lisääminen onnistuikin vaivattomasti. Ylläpitäjältä saimme selville henkilön yhteystiedot, joka yhdistäisi sivuston IPosoitteen oikeaan Domain-nimeen. Sivusto näkyisi oikealla domain-nimellä parin päivän viiveellä, joten päätimme toteuttaa ensimmäisen päivityksen viikonlopun jälkeen yhdessä toimeksiantajan kanssa. Sivusto näkyi verkossa halutusti, joten oletimme kaiken olevan kunnossa päivitystä varten. Päivitys ei kuitenkaan onnistunut, joten päättelimme vian olevan serverillä. Pikaisen puhelinsoiton jälkeen kaikki kuitenkin saatiin kuntoon, kun puuttuvat käyttäjäoikeudet oli luotu. Sivuston julkaiseminen oli molemmille ensimmäinen laatuaan ja molemmilla oli hieman ennakkoluuloja onnistumisen suhteen. Koodin korjaukselle ja hienosäädölle olimme varanneet useamman päivän aikaa, mutta kaikki toimi hienosti ja työ luovutettiin aikataulussa.

42 5 PÄÄTÄNTÖ 37 Www-sivustojen kehittyneisyys, sisällön määrä, ylläpidettävyys sekä käyttäjien vaatimukset ovat lisänneet viime vuosina tarvetta sisällönhallinnalle. Wwwsisällönhallintaa halutaan yksinkertaistaa ja mielellään siten, että muutoksia voidaan tehdä ilman ohjelmointiteknistä taustaa. Sivustojen ylläpitoon ja sisällön muokkaukseen on tarjolla paljon erilaisia vaihtoehtoja. Usein ylläpitotyökalujen hankintaan on selkeitä syitä, kuten opinnäytetyömme toimeksiantajan tapaus osoittaa. Toimeksiantajamme halusi helposti päivitettävän www-sivuston, jonka sisällön muokkauksesta voi huolehtia nopeasti muiden töiden ohella. Yrityksillä on suuri haaste saada www-sivuilla vieraillut asiakas palaamaan sivustolle. Sivustolla tulee näyttää ajan tasalla olevaa tietoa, joten jo etusivulta on käytävä ilmi, että saatavilla on uutta informaatiota. Täten jo sivustoa suunniteltaessa on kiinnitettävä entistä enemmän huomiota sisällön rakenteeseen. Asettelussa huomioidaan, mikä tieto on staattista eli muuttumatonta ja mikä taas dynaamista eli muuttuvaa. Opinnäytetyön osana toteutetut järjestelmät olivat sopivan haastavia ja mielenkiintoisia toteuttaa. Koulussa oppimiemme tietojen pohjalta valitsemiemme ohjelmointikielien käyttö tuntui luontevalta. Molemmat tekijöistä on käyttänyt valittuja PHP- ja MySQL-tekniikoita aiemmissa pienemmissä projekteissa, mutta nyt pääsimme toteuttamaan suuremman kokonaisuuden. Ohjelmointityö oli opettavaista ja aikaansaamamme ohjelmakoodi on hyödynnettävissä myös tulevaisuudessa. Sisällönhallintajärjestelmät ovat yleistyneet viime vuosina merkittävästi, mutta opinnäytetyön teoriaosuudessa käsittelemistämme www-sisällönhallintajärjestelmistä on kuitenkin saatavilla melko vähän suomenkielistä kirjallisuutta. Aihetta sivutaan monissa teoksissa esiteltäessä tietokantapohjaisia www-sivuja tai puhuttaessa dynaamisesta web-ohjelmoinnista. Verkkoartikkeleissa ja ulkomaisissa teoksissa sisällönhallintaa käsitellään kattavammin kuin kotimaisessa alan kirjallisuudessa. Päivitystyökalujen sekä www-sivuston julkaisun jälkeen ylläpitovastuu on siirtynyt toimeksiantajalle. Sivuilla tapahtuneista vähäisistä muutoksista päätellen uuden markkinointikanavan käyttöönotto ja luodun järjestelmän tarjoamia mahdollisuuksia ei ole

43 38 vielä täysin sisäistetty. Kuitenkin toimeksiantajan selkeät suunnitelmat www-sivuston laajennuksesta sisältämään kauppapaikka sekä extranet antavat uskoa, että tekemästämme työstä saavutetaan tulevaisuudessa vielä suurtakin hyötyä.

44 LÄHTEET ways to orientate users on your site Päivitetty elokuu Luettu guidelines for usability testing Päivitetty huhtikuu Luettu Boiko, Bob Content management bible. Indianapolis: Wiley publishing Inc. Haapea, Kimmo Toimitusjohtaja. Mikkelin Autotarvike Oy. Haastateltu Harsu, Maarit Ohjelmien ylläpito ja uudistaminen. Jyväskylä: Gummerus Kirjapaino Oy. Heinisuo, Rami, Rauta, Ilkka PHP ja MySQL: Tietokantapohjaiset verkkopalvelut. Helsinki: Gummerus Kirjapaino Oy. Holzschlag, Molly E HTML and web design secrets. Indianapolis: Wiley Publishing, Inc. Kauhanen-Simanainen, Anne Informaatioarkkitehtuuri. Helsinki: Edita Prima Oy. Keränen, Vesa, Lamberg, Niko, Penttinen, Jukka Verkkojulkaisun hallinta. Jyväskylä: Tummavuoren kirjapaino Oy. Meyers Michelle This week in open source. Päivitetty Luettu Nielsen, Jakob WWW-suunnittelu. Jyväskylä: Gummerus Kirjapaino Oy.

45 Nielsen Jakob Usability Engineering. Boston: Academic Press. 40 Nielsen, Jakob, Tahir, Marie Kotisivun suunnittelu: Näin teet vetävimmät websivut. Helsinki: Edita Prima Oy. Peltomäki, Juha WWW-ohjelmointi. Jyväskylä: Gummerus Kirjapaino Oy. Rantala, Ari Web-ohjelmointi. Porvoo: WS Bookwell. Robertson, James How to evaluate a content management system. Päivitetty Luettu Robertson, James Separate desing and the CMS. Päivitetty Luettu

46 LIITE 1(1). Vaatimusmäärittely VAATIMUSMÄÄRITTELY Case: Mikkelin Autotarvike Oy 1. ESIPUHE Tämä on Mikkelin Autotarvike Oy:n toimeksiannon johdosta toteutetun wwwsisällönhallintajärjestelmän sekä sen avulla luotavan www-sivuston laadintaan tehty vaatimusmäärittely. Toteutettavasta opinnäytetyön osasta vastaavat Mikkelin ammattikorkeakoulun tietojenkäsittelyn opiskelijat Marko Myyryläinen ja Ville Hokkanen. 2. JOHDANTO Toteutettava järjestelmä on selaimella käytettävä www-sisällönhallintajärjestelmä, jonka avulla muokataan samalla toteutettavaa www-sivustoa. Päivitystyökalut on tarkoitettu Mikkelin Autotarvike Oy:n käyttöön, joiden avulla he hallitsevat omia wwwsivuja. Järjestelmän avulla hoidetaan helposti www-sivujen päivitystä. Päivitystyökalujen toimet kohdistuvat ennalta määriteltyihin elementteihin. Järjestelmässä tulee olla ylläpitäjälle työkalut haluamiensa elementtien hallintaan. Työkalujen avulla kauppiaan on helpompi tarjota www-sivulla vierailevalle henkilölle ajan tasalla olevaa informaatiota. Toteutettava www-sivusto on varaosaketjun ilmeeseen sopiva ja vierailijalle mielenkiintoinen, informoiva ja selkeä. Järjestelmästä ei tarvitse olla yhteyksiä muihin järjestelmiin. 3. SANASTO Vierailija: Www-sivuston peruskäyttäjä, joka tulee katsomaan sivuston sisältöä. Ylläpitäjä: Päivitystyökalujen avulla www-sivustoa ylläpitävä henkilö, joka on Mikkelin Autotarvikkeen työntekijä. Hän hallinnoi www-sivustolla näytettävää sisältöä. MySql: Käytettävä tietokantapalvelin Apache ja PHP: WWW-palvelinohjelmisto johon on asennettuna PHP-laajennus.

47 4. KÄYTTÄJÄN VAATIMUKSET LIITE 1(2). Vaatimusmäärittely Luotavaa www-sivustoa tulee voida ylläpitää erillisten päivitystyökalujen avulla www-selaimessa. Luotavan järjestelmän tulee ottaa huomioon se, että päivittäjällä ei tarvitse olla erillistä ohjelmointiosaamista. Luotavien päivitystyökalujen tulee tarjota kuitenkin monipuolisia muokkausmahdollisuuksia etusivun näkymään. Työkalujen tulee tarjota ylläpitäjälle mahdollisuus erilaisten mainosten luomiseen ja poistoon sekä ennalta sovittujen sisältöelementtien muokkaukseen. Luotavan www-sivuston tulisi toimia mielenkiinnon herättäjänä ja vuorovaikutteisuuteen pyrkivänä viestinnän apuvälineenä. Päivitystyökalujen ja www-sivuston tulee toimia käytön kannalta riittävän nopeasti ja luotettavasti. Päivitystyökalujen tulee olla niin helppokäyttöisiä ja ohjeistavia, että sen käyttö on mahdollista ilman erillistä koulutusta ja erityisosaamista. 5. JÄRJESTELMÄARKKITEHTUURI Luotavan www-sivuston tulee näyttää samanlaiselta yleisimmissä selaimissa MS Explorerissa sekä Mozilla Firefox-selaimessa. Www-sivujen muokkaukseen toteutettavat päivitystyökalut ovat vain ylläpitäjien saavutettavissa. Työkalut käyttävät www-sivujen muokkaukseen palvelimella olevaa tietokantaa. Vierailijalla on pääsy ainoastaan palvelimella oleviin www-sivuihin. Luotavat kokonaisuudet tulevat toimimaan Osaset-ketjun omalla palvelimella, jossa on tuki uusimmille PHP sekä MySql-tekniikoille

48 Seuraava kaavio havainnollistaa järjestelmäarkkitehtuuria. LIITE 1(3). Vaatimusmäärittely 6. JÄRJESTELMÄVAATIMUKSET - Vierailija voi www-sivustolla lähettää sähköpostia yritykselle haluamastaan aiheesta. - Ylläpitäjä voi järjestelmän avulla ylläpitää niitä www-sivuston osia, joita yrityksen tarvitsee päivittää. - Päivitystyökaluihin tulee liittää käyttäjälle ohjeet ohjelmien käytöstä. - Ylläpitäjän tulee voida lisätä html-tyylejä www-sivuilla näytettävän tekstin joukkoon. - Ylläpitotyökalujen avulla www-sivuille tulee voida lisätä tekstiä, kuvia sekä PDF-tiedostoja. - Www-sivuston pitää aueta vierailijalle riittävän nopeasti.

49 7. JÄRJESTELMÄN KEHITYS JATKOSSA LIITE 1(4). Vaatimusmäärittely Toteutettavan www-sivustoon tulee voida jatkossa liittää kauppapaikka sekä extra-net. Lisäksi järjestelmän tulee olla helposti ylläpidettävä.

50 MÄÄRITTELY Case: Mikkelin Autotarvike OY LIITE 2(1). Määrittely Tässä liitteessä käydään läpi opinnäytetyömme empiiristä osuutta määrittelyn sekä suunnittelun kannalta. Esittelemme työlle asetettuja vaatimuksia ja kerromme kuinka työ eteni vaiheittain kohti loppua. Määrittelyraportti on osa Mikkelin Ammattikorkeakoululle toteuttamaa opinnäytetyötä, jonka toimeksiantajana toimi Mikkelin Autotarvike Oy. Tekijät: Marko Myyryläinen & Ville Hokkanen 1. Johdanto Työmme tarkoituksena on toteuttaa uudet www-sivut Mikkelin Autotarvike Oy:lle. Sivujen päivittämistä helpottamaan olisi tarkoitus rakentaa erilliset työkaluohjelmat, joiden avulla sivuston tietojen muokkaus ja hallinta olisi mahdollista. Www-sivujen muokkaukseen tarkoitetuista työkaluista käytämme myös nimitystä wwwsisällönhallintajärjestelmä. Työstä erottuu siis selkeästi kaksi suurempaa kokonaisuutta: ylläpitäjän avuksi toteutettavat päivitystyökalut sekä maailmalle näkyvä Mikkelin Autotarvike Oy:n www-sivusto. Määrittelydokumentin jatkossa puhutaankin ylläpitäjästä ja vierailijasta. Ylläpitäjä: Henkilö, jolla on sisäänpääsy www-hallintajärjestelmään käyttäjätunnuksen ja salasanan avulla. Ylläpitäjä muokkaa Mikkelin Autotarvikkeen www-sivuja hallintatyökalujen avulla. Vierailija: Www-sivujen peruskäyttäjä, joka vierailee Mikkelin Autotarvikkeen sivustolla. Www-sivuston päivittämisestä vastaisi Autotarvikkeen työntekijöistä ennalta valitut henkilöt muiden töidensä ohessa. Toteutettavan sivuston tarkoituksena on herättää kävijän mielenkiinto erilaisin ajankohtaisin tarjouksin ja mainoksin. Sivuston tulisi pyrkiä vuorovaikutukseen vierailijan kanssa. Parhaassa tapauksessa www-sivuston avulla luodaan uusia asiakkuuksia ja saadaan lisä yhteydenottoja. Toteutettava projekti tarjoaa yrittäjälle uuden kontaktipinnan potentiaalisiin asiakkaisiin.

51 LIITE 2(2). Määrittely Järjestelmästä ei tarvitse olla yhteyksiä muihin järjestelmiin. Luotavaan wwwsivustoon tulee voida tulevaisuudessa liittää internet-kauppapaikka sekä extra-net palvelu. 2. Käyttäjän vaatimukset Toteutettavia päivitystyökaluja käytetään www-selaimella ja joiden avulla ylläpitäjä voi muokata www-sivujen sisältöä ilman, että hänen tarvitsee ymmärtää enempää ohjelmoinnista. Järjestelmän tulee toimia käytön kannalta riittävän nopeasti ja luotettavasti, sillä www-sivuston ylläpitämisestä huolehditaan muiden töiden ohessa. Wwwpäivitystyökalut rakennetaan juuri tiettyä toimintoa varten, tarkasti määrättyyn kohtaan sivustossa. Tarkoituksena ei ole luoda kokonaisvaltaista wwwsisällönhallintajärjestelmää, jonka avulla pystytään muokkaamaan kaikkea sisältöä. Lopulliset päivitystyökalut soveltuvat siis ainoastaan kyseiselle www-sivustolle. Etusivun tarkoituksena on olla mielenkiinnon herättäjä ja sen sisältö koostuu useista päivitettävistä elementeistä. Etusivun muokkausmahdollisuudet on oltava selkeät ja monipuoliset. Luotavan järjestelmän tulee tarjota käyttäjälle mahdollisuus uusien tarjousten ja mainosten luomiseen sekä ajankohtaisten tietojen lisäämiseen. Wwwsivuille lisättävät ja muokattavat tiedot olisivat teksti-muotoista, mutta myös kuvia sisältäviä tarjouksia. Luonnollisesti erilaiset mainokset sekä ajankohtaista tiedot on pystyttävä poistamaan. Järjestelmässä tulee pystyä lisäämään tuotteet ja palvelutsivulle myös PDF-tiedostoja, jotka tarjoavat lisätietoa myytävä olevista tuotteista. Kaikkiin muokattavissa oleviin teksti-tietoihin (ajankohtaista, tarjoukset jne.) pitää voida lisätä HTML-tyylejä tekstin joukkoon. Näin on mahdollista jäsennellä tekstiä ja korostaa haluttuja yksityiskohtia. HTML-koodia ei tarvitse kirjoittaa käsin, eikä sen ymmärrystä suuremmin vaadita, sillä sen lisääminen tapahtuu Windowsista tutulla leikkaa-liitä- periaatteella. Tietoturvallisuuden vuoksi päivitystyökalusivulle ei saa päästä suoraan Mikkelin autotarvikkeen etusivulta, vaan käyttäjätunnuksella ja salasanalla toisesta www-osoitteesta. Salasanoja ja käyttäjätunnuksia tulee pystyä myös vaihtamaan. Toteutettavan www-sivuston tyyli tulee mukailla Osaset-ketjun yleisilmettä. Lisäksi järjestelmän tulisi olla riittävän helppokäyttöinen, jotta ilman koulutusta tai ohjelman esittelyä olisi mahdollista muokata www-sivuja päivitystyökalujen avulla.

52 LIITE 2(3). Määrittely Ohjelman käytön helpottamiseksi ohjelmaan tulisi sisällyttää käyttöohjeet. Sivuston kävijämääriä haluttiin myös tarkkailla, joten kävijälaskuri tulisi myös toteuttaa sivustolle. 3. Järjestelmävaatimukset Järjestelmä on selainpohjainen ja sen tulee toimia sekä MS Explorer, että Mozilla Firefox-selaimilla. Palvelimen tulee tukea uusimpia PHP sekä MySql-tekniikoita, sekä siellä on oltava riittävästi tilaa PDF ja kuvatiedostoille. Toteutettava järjestelmä tulee liittää jo olemassa olevaan domainiin - Ylläpitäjän täytyy kirjautua käyttäjätunnuksella ja salasanalla wwwsisällönhallintajärjestelmään. Käyttäjätunnukset ja salasanat eivät ole henkilökohtaisia. - Ylläpitäjällä tulee olla mahdollisuus muuttaa käyttäjätunnusta ja salasanaa. - Ylläpitäjän tulee voida järjestelmän avulla ylläpitää www-sivuille toteutettavaa ajankohtaista palstaa. - Järjestelmän avulla ylläpitäjä voi muokata etusivulla olevaa kauppiaan tarjousta. Sisältää tekstiä ja kuvatiedoston. - Järjestelmän avulla ylläpitäjä voi ylläpitää etusivulla olevaa kuukauden tuotteet osiota. Sisältää tekstiä sekä kuvatiedoston. - Järjestelmän avulla voi lisätä ja poistaa PDF-tiedostoja www-sivujen Tuotteet ja palvelut välilehdelle. - Vierailija voi katsella kuukauden tuotteita. Tiedot avautuvat erilliseen ikkunaan. - Vierailijan on voitava ottaa yhteyttä sähköpostitse suoraan www-sivulta. Yhteyden oton toiminnolla on pystyttävä kysymään tarjouksia, antamaan palautetta jne. - Ylläpitäjä voi vaihtaa Osaset.com tuoteluettelon kuvaa. - Ylläpitäjä voi muokata huoltokumppanit välilehteä. - Ylläpitotyökalujen tulee olla helppokäyttöinen ja nopeasti omaksuttava. - Toteutettavan www-sivuston tulee avautua vierailijalle nopeasti.

53 LIITE 2(4). Määrittely 4. Käyttötapaukset (USE CASE) Koko järjestelmän käyttötapauskaavio: Kuvatiedostot (K) Ylläpitäjä voi päivittää etusivun tarjouksessa käytettävää kuvaa ja lisäämällä ja poistamalla kuukauden tuotteet osion sisältämiä kuvia. Sivustolla käytettävien kuvien koko rajataan (alle 5 Mt). Lisäksi ohjeisiin tulee lisätä selkeät ohjeet käytettävien kuvien leveydestä ja korkeudesta. Käyttämättömät kuvat on pystyttävä poistamaan palvelimelta. Kuvien lisäykseen tulee tehdä tarkistuksia tiedoston oikeellisuudesta, ennen kuin ohjelma kopioi sen ja siirtää palvelimelle.

54 LIITE 2(5). Määrittely Käyttötapauksen nimi: WWW-sivusto Käyttötapauksen koodi: KT1 Toimija: Vierailija Alkutilanne: Vierailija ottaa selaimellaan yhteyden sivustoon. Sanallinen kuvaus: Vierailijalla on mahdollisuus katsella www-sivuston sisältöä. 1. Mene www-sivustolle 2. Sivuston selaus - Etusivu (Ajankohtaiset tiedot, kauppiaan tarjous sekä kuukauden tuotteet) - Tuotteet ja palvelut (Voi ladata linkkiä painamalla koneelleen halutun PDFtiedoston.) - Huoltokumppanit (Huoltokumppaneiden tiedot) - Maahantuojat (Linkkejä) - Myymälä (Yhteystiedot) - Rekrytointi (Työpaikkatilanne) - Yhteydenotto (Yrityksen sähköposti vastaanottaa www-sivustolta lähetetyt sähköpostit. Lomakkeella pitää voida antaa palautetta, kysyä tarjouksia sekä hakea työpaikkaa. Vierailija voi ottaa yhteyttä yritykseen erillisen yhteydenotto lomakkeen avulla). 3. Sivustolta poistuminen Käyttötapauksen nimi: WWW-päivitys Käyttötapauksen koodi: KT2 Toimija: Ylläpitäjä Alkutilanne: - Sanallinen kuvaus: Sivuston ylläpitäjä voi kirjautua järjestelmään, josta ylläpidetään Mikkelin Autotarvikkeen www-sivuja. 1. Mene kirjautumiseen 2. Anna kirjautumistiedot (tunnus ja salasana) 3. Kirjaudu järjestelmään

55 LIITE 2(6). Määrittely Käyttötapauksen nimi: Ajankohtaista Käyttötapauksen koodi: KT3 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Ylläpitäjällä mahdollisuus lisätä ja poistaa ajankohtaisia tietoja. Ajankohtaisten tietojen ei tarvitse olla muokattavissa, mutta ne voi jättää kokonaan tyhjäksi. Vierailija ainoastaan pystyy lukemaan näkyvillä olevat ajankohtaiset asiat. - Lisäys - Poisto 1. Mene ajankohtaista lisäykseen 1. Mene ajankohtaista poistoon 2. Syötä tarvittavat tiedot 2. Valitse poistettavan tiedon numero 3. Tallenna tiedot 3. Poista Käyttötapauksen nimi: Kuukauden tuotteet Käyttötapauksen koodi: KT4 + K Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Ylläpitäjällä tulee olla mahdollisuus lisätä ja poistaa kuukauden tuotteet tietoja. Vierailija voi katsella kuukauden tuotteiden tietoja, jotka avautuvat linkkiä painamalla erilliseen popup-ikkunaan. - Lisäys - Poisto 1. Mene kuukauden tuotteet lisäykseen 1. Mene kuukauden tuotteet poistoon 2. Syötä tuotteen tiedot ja kuva 2. Valitse poistettavan tuotteen numero 3. Tallenna tiedot 3. Poista

56 LIITE 2(7). Määrittely Käyttötapauksen nimi: Osaset.com tuoteluettelo Käyttötapauksen koodi: KT5 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Ylläpitäjän on voitava päivittää etusivulla oleva linkkikuva aina uuden katalogin ilmestyttyä. 1. Mene Osaset.com tuoteluettelo muokkaukseen 2. Lataa uusi kuva 3. Tallenna Käyttötapauksen nimi: Huoltokumppanit Käyttötapauksen koodi: KT6 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Www-sivustolla olevat huoltokumppanit sivuston sisältöä on pystyttävä muokkaamaan mahdollisten yhteistyökumppani muutosten johdosta. Sivun tietoihin tulee pystyä lisäämään myös HTML-tyylejä. Sivun päivityssivulle tulee toteuttaa myös alkuperäisten tietojen palautus toiminto siltä varalta, jos ylläpitäjä saa sotkettua sivun tiedot, eikä onnistu korjaamaan tilannetta. - Muokkaus - Palautus 1. Mene huoltokumppanit muok- 1. Mene huoltokumppanit muokkaukseen kaukseen 2. Palauta alkuperäiset tiedot 2. Muokkaa tekstiä 3. Tallenna 3. Tallenna

57 LIITE 2(8). Määrittely Käyttötapauksen nimi: Avoimet työpaikat Käyttötapauksen koodi: KT7 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Vierailijalle on näkyvissä tämänhetkinen työpaikkatilanne. Ylläpitäjän pitää voida päivittää tekstialuetta, jossa ilmoitetaan mahdollisista avoimista työpaikoista. 1. Mene avoimet työpaikat muokkaukseen 2. Syötä tiedot 3. Tallenna Käyttötapauksen nimi: Salasananvaihto Käyttötapauksen koodi: KT8 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Tietoturvan vuoksi ylläpitäjän tulee voida vaihtaa salasanaa ja käyttäjätunnusta. 1. Mene salasanan muutokseen 2. Syötä tiedot 3. Tallenna

58 LIITE 2(9). Määrittely Käyttötapauksen nimi: Tuotteet ja palvelut PDF-tiedostot Käyttötapauksen koodi: KT9 Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Ylläpitäjän tulisi voida lisätä www-sivuille tuotteet ja palvelut kohtaan oikean tuoteryhmän alapuolelle myynnissä olevien tuotteiden PDF-esitteitä. Ennen PDF:n lisäystä ohjelman olisi varmistettava tiedoston oikeellisuus. Lisättäville PDF:lle on oltava myös kokorajoitus sekä niitä tulee pystyä poistamaan sivuilta. - Lisäys - Poisto 1. Mene tuotteet ja palvelut muok- 1. Mene tuotteet ja palvelut muokkaukseen kaukseen 2. Valitse kategoria, josta PDF poistetaan 2. Valitse kategoria, johon PDF lisätään 3. Syötä tiedot PDF:stä ja hae tiedosto 3. Valitse poistettava PDF 4. Poista 4. Tallenna tiedot Käyttötapauksen nimi: Kauppiaan tarjous Käyttötapauksen koodi: KT10 + K Toimija: Ylläpitäjä Alkutilanne: Ollaan kirjautuneena järjestelmään Sanallinen kuvaus: Etusivun keskeinen elementti on päivitettävä kauppiaan tarjous. Ylläpitäjä voi päivittää tarjousta, muuttamalla kuvaa, hintaa sekä tuotteen tietoja. Tarjous tulee voida jättää myös tyhjäksi. Kauppiaan tarjouksia ei tarvitse voida lisätä. 1. Mene kauppiaan tarjoukseen 2. Syötä tarjouksen tiedot ja kuva 3. Tallenna tarjous

59 5. Käyttöliittymä LIITE 2(10). Määrittely Kuvakaappauksia päivitystyökalujen toiminnasta sekä niiden vaikutuksesta Mikkelin Autotarvike Oy:n www-sivustoon. KUVA 1. Päivityssivulle kirjautuminen KUVA 2. Päivityssivun etusivu

60 LIITE 2(11). Määrittely KUVA 3. Ajankohtaista päivityssivu KUVA 4. Ajankohtaista www-näkymä

61 LIITE 2(12). Määrittely KUVA 5. Kauppiaan tarjouksen päivitys KUVA 6. Kuukauden tuotteen poisto

62 KUVA 7. Avointen työpaikkojen päivitys LIITE 2(13). Määrittely

63 KUVA 8. Avoimet työpaikat www-näkymä LIITE 2(14). Määrittely

64 KUVA 9. Huoltokumppaneiden päivitys LIITE 2(15). Määrittely

65 LIITE 2(16). Määrittely KUVA 10. PDF-tiedostojen päivitys KUVA 11. PDF-tiedoston lisäys

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

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

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

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

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

NETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen NETTISIVUOHJE SISÄLTÖ 2 JULKAISUJÄRJESTELMÄ tietoa WordPress julkaisujärjestelmästä perustoiminnot (kirjautuminen, asetukset) 6 MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen

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

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

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

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

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

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

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

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN

KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN KESKUSTANUORTEN NETTISIVUT- OHJEITA PIIRIYLLÄPITÄJÄLLE 1. KIRJAUTUMINEN -Mene osoitteeseen keskustanuoret.fi/user - Kirjoita saamasi käyttäjätunnus ja salasana - Klikkaa yllä olevaa piirisi logoa niin

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

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE

VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.

Lisätiedot

Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen

Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen Kameraseura CMS -julkaisujärjestelmän käyttöohje kerhosivujen päivitykseen effective content management made simple. Kameraseura ry 1 Terminologia Tässä ohjeistuksessa käytetyt termit julkaisujärjestelmä,

Lisätiedot

KYMP Webmail -palvelu

KYMP Webmail -palvelu KYMP Webmail -palvelu Sisältö 1. Kirjautuminen... 3 2. Viestin merkinnät... 4 3. Viestien lukeminen... 4 Viestiin vastaaminen... 4 Viestin välittäminen edelleen / uudelleen ohjaus... 5 4. Viestin kirjoittaminen...

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

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

www.kotisivukone.fi Pikaopas kotisivujen tekoon

www.kotisivukone.fi Pikaopas kotisivujen tekoon Kotisivut helposti! www.kotisivukone.fi Pikaopas kotisivujen tekoon Näin Kotisivukone toimii Kun olet avannut kotisivut Kotisivukoneella, tulet helppokäyttöiseen ylläpitotilaan ja voit heti aloittaa kotisivujen

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

ejuttu ohjeet kuinka sitä käytetään.

ejuttu ohjeet kuinka sitä käytetään. ejuttu ohjeet kuinka sitä käytetään. 1. Artikkelin lisääminen a. Kirjaudu sisään b. Lisää sisältöä c. Artikkeli i. Lisää pääkuva 1. Pääkuvalle kuvateksti ii. Anna artikkelille otsikko iii. Ingressi-kenttään

Lisätiedot

Ohjeistus yhdistysten internetpäivittäjille

Ohjeistus yhdistysten internetpäivittäjille Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton

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

CMS Made Simple Perusteet

CMS Made Simple Perusteet CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi

Lisätiedot

Written by Administrator Monday, 05 September 2011 15:14 - Last Updated Thursday, 23 February 2012 13:36

Written by Administrator Monday, 05 September 2011 15:14 - Last Updated Thursday, 23 February 2012 13:36 !!!!! Relaatiotietokannat ovat vallanneet markkinat tietokantojen osalta. Flat file on jäänyt siinä kehityksessä jalkoihin. Mutta sillä on kuitenkin tiettyjä etuja, joten ei se ole täysin kuollut. Flat

Lisätiedot

Sähköposti ja uutisryhmät 4.5.2005

Sähköposti ja uutisryhmät 4.5.2005 Outlook Express Käyttöliittymä Outlook Express on windows käyttöön tarkoitettu sähköpostin ja uutisryhmien luku- ja kirjoitussovellus. Se käynnistyy joko omasta kuvakkeestaan työpöydältä tai Internet Explorer

Lisätiedot

Moodle-oppimisympäristö

Moodle-oppimisympäristö k5kcaptivate Moodle-oppimisympäristö Opiskelijan opas Sisältö 1. Mikä on Moodle? 2. Mistä löydän Moodlen? 3. Kuinka muokkaan käyttäjätietojani? 4. Kuinka ilmoittaudun kurssille? 5. Kuinka käytän Moodlen

Lisätiedot

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun

NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun NetEazer informaatiojärjestelmä www- palvelujen sisällönhallintaan ja julkaisuun OpenSpace NetEazer julkaisujärjestelmä on täydellinen informaatiojärjestelmä nykyaikaisten wwwpalvelujen sisällöntuotantoon.

Lisätiedot

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA

KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA Ohjeistuksessa käydään läpi kuvan koon ja kuvan kankaan koon muuntaminen esimerkin avulla. Ohjeistus on laadittu auttamaan kuvien muokkaamista kuvakommunikaatiota

Lisätiedot

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE

VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:

Lisätiedot

Wilman pikaopas huoltajille

Wilman pikaopas huoltajille Wilman pikaopas huoltajille Vehmaan kunnan Vinkkilän koulussa on käytössä sähköinen reissuvihko Wilma, joka helpottaa tiedonvaihtoa kodin ja koulun välillä. Wilman kautta huoltajat seuraavat ja selvittävät

Lisätiedot

Uutiskirjesovelluksen käyttöohje

Uutiskirjesovelluksen käyttöohje Uutiskirjesovelluksen 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 2 Sisällys Johdanto... 1 Päänavigointi...

Lisätiedot

Joomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta.

Joomla pikaopas. Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta. Joomla pikaopas Yksinkertainen opas, jossa neuvotaan esimerkkisivuston teko Joomla julkaisujärjestelmällä vaihe vaiheelta. Paavo Räisänen www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida, tulostaa

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

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

Seutudokumenttien pä ivittä misohje

Seutudokumenttien pä ivittä misohje Seutudokumenttien pä ivittä misohje Kirjautuminen sisällönhallinta-työkaluun Käytä ylläpidossa Firefox-selainta. Käyttäjätunnukset Käy rekisteröitymässä osoitteessa www./kirjaudu kohdassa Rekisteröidy.

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

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

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

Wordpress- ohje nettisivujen laadintaan

Wordpress- ohje nettisivujen laadintaan Wordpress- ohje nettisivujen laadintaan Leo Suomela 2 / 13 Sisältö 1 Johdanto... 3 2 Aloitusnäkymä... 3 3 Ohjausnäkymä... 4 4 Sivujen lisäys... 6 5 Etusivun määritys... 9 6 Teeman muokkaus... 13 3 / 13

Lisätiedot

1. ASIAKKAAN OHJEET... 2. 1.1 Varauksen tekeminen... 2. 1.2 Käyttäjätunnuksen luominen... 4. 1.3 Varauksen peruminen... 4

1. ASIAKKAAN OHJEET... 2. 1.1 Varauksen tekeminen... 2. 1.2 Käyttäjätunnuksen luominen... 4. 1.3 Varauksen peruminen... 4 1. ASIAKKAAN OHJEET... 2 1.1 Varauksen tekeminen... 2 1.2 Käyttäjätunnuksen luominen... 4 1.3 Varauksen peruminen... 4 1.4 Omien tietojen muokkaaminen... 5 1.5 Salasanan muuttaminen... 5 2. TYÖNTEKIJÄN

Lisätiedot

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA. Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi.

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA. Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi. Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi. Tunnuksia jakavat Punomo.fi:n ylläpitäjät. Kun olet kirjautunut, blogin OHJAUSNÄKYMÄ

Lisätiedot

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi

Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Lyhyt ohje Ning-verkoston hallinnoimiseksi ja muokkaamiseksi Valtti Valmis tutkinto työelämävalttina, Jenni Kaisto Sisältö NÄKYMÄ SISÄÄNKIRJAUTUESSA... 1 NINGIN HALLINNOINTI JA MUOKKAUS... 3 KOJELAUTA...

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

Asiakas ja tavoite. Tekninen toteutus

Asiakas ja tavoite. Tekninen toteutus Asiakas ja tavoite Heikieli on vuonna 2015 perustettu yhden hengen asiantuntijayritys, joka tarjoaa käännös- ja oikolukupalveluita englannista ja saksasta suomeksi. Freelance-kääntäjiä on Suomessa paljon,

Lisätiedot

Ylläpitoalue - Etusivu

Ylläpitoalue - Etusivu Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut

Lisätiedot

Web-sisällönhallintajärjestelmät

Web-sisällönhallintajärjestelmät Web-sisällönhallintajärjestelmät Sisältö Mitä on web-sisällönhallinta? Tausta ja tavoitteet Käytännön prosessi Web-sisällönhallintajärjestelmät Yleisesti Keskeiset ominaisuudet Sisällönhallintajärjestelmän

Lisätiedot

Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje

Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje Sonera Viestintäpalvelu VIP VIP Laajennettu raportointi Ohje Sisällysluettelo VIP Laajennettu raportointi... 3 Luo raportti Laajennetun raportoinnin työkaluilla... 4 Avaa Laajennettu raportointi... 4 Valitse

Lisätiedot

FrontPage 2000 - Näkymät

FrontPage 2000 - Näkymät FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava

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

Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä:

Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä: Linux-harjoitus 6 Harjoituksen aiheena on tietokantapalvelimen asentaminen ja testaaminen. Asennetaan MySQL-tietokanta. Hieman linkkejä: http://www.mysql.com/, MySQL-tietokantaohjelman kotisivu. http://www.mysql.com/doc/en/index.html,

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

PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET

PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET Suomen partiolaiset Finlands scouter ry 04/2013, muokattu 02/2015 Tämä ohje on tarkoitettu Suomen Partiolaisten hallinnoimien projektisivustojen sisällöntuottajille

Lisätiedot

Monikielinen verkkokauppa

Monikielinen verkkokauppa Monikielinen verkkokauppa Monikielinen verkkokauppa Monikielisen verkkokaupan luomisessa pitää Multiple Languages lisämoduuli olla aktivoituna. Klikkaa valikosta Features -> Apps Management -> näkyviin

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

Oppilaan opas. Visuaaliviestinnän Instituutti VVI Oy. Versio 0.2 (2008-01-21)

Oppilaan opas. Visuaaliviestinnän Instituutti VVI Oy. Versio 0.2 (2008-01-21) Oppilaan opas Visuaaliviestinnän Instituutti VVI Oy Versio 0.2 (2008-01-21) Versio Päivämäärä Kuvaus 0.1 2005-01-16 Ensimmäinen versio. 0.2 2008-01-21 Korjattu kuvatiedostojen maksimiresoluutio ja muutamia

Lisätiedot

Hallintaliittymän käyttöohje

Hallintaliittymän käyttöohje Hallintaliittymän käyttöohje 1. Yleisiä huomioita Hallintaliittymän käyttöä helpottavia yleisiä huomioita: - Käytä listanäkymien hakukentissä kentän vieressä olevaa hakunappia, älä enter-näppäintä. - Älä

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

Blogger-blogin käyttöönotto ja perusasiat Bloggerista & bloggauksesta

Blogger-blogin käyttöönotto ja perusasiat Bloggerista & bloggauksesta 1 Blogger-blogin käyttöönotto ja perusasiat Bloggerista & bloggauksesta Blogi on yhden tai useamman kirjoittajan verkkosivu tai -sivusto, jonka kautta voidaan julkaista omia kirjoituksia perinteisten julkaisukanavien

Lisätiedot

Ristijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran

Ristijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran Ohjeet. Sivu 1/7 Tämä ohje on tarkoitettu Ristijärven metsästysseuran jäsenille. Ohjeen tarkoitus on opastaa kuinka seuran jäsenet saavat Jahtipaikat.fi verkkosivustolla olevan metsästyskartta sovelluksen

Lisätiedot

Wordpress. Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun

Wordpress. Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun Wordpress Bloggaamisen perusteet tekniset minimitoimet, joilla pääset alkuun Mikä alusta käyttöön? Tarjolla on runsaasti eri bloggausalustoja Blogger ja Wordpress ovat suosituimmat ilmaiset blogialustat

Lisätiedot

TIETOKANTOJEN PERUSTEET OSIO 14 MARKKU SUNI

TIETOKANTOJEN PERUSTEET OSIO 14 MARKKU SUNI TIETOKANTOJEN PERUSTEET OSIO 14 MARKKU SUNI Tavoite: Suunnitella käyttäjien tarvitsemat turvallisuusmekanismit ja säännöt. Toisin sanoen: tehdä tietokannasta turvallinen ja luotettava. Muistutus: Tietokanta

Lisätiedot

www.kotisivukone.fi Pikaopas kotisivujen tekoon

www.kotisivukone.fi Pikaopas kotisivujen tekoon Kotisivut helposti! www.kotisivukone.fi Pikaopas kotisivujen tekoon Näin Kotisivukone toimii Kun olet kirjautunut sisään kotisivuillesi, tulet helppokäyttöiseen ylläpitotilaan ja voit heti aloittaa kotisivujen

Lisätiedot

www.kotisivukone.fi Pikaopas kotisivujen tekoon

www.kotisivukone.fi Pikaopas kotisivujen tekoon Kotisivut helposti! www.kotisivukone.fi Pikaopas kotisivujen tekoon Näin Kotisivukone toimii Kun olet avannut kotisivut Kotisivukoneella, tulet helppokäyttöiseen ylläpitotilaan ja voit heti aloittaa kotisivujen

Lisätiedot

opiskelijan ohje - kirjautuminen

opiskelijan ohje - kirjautuminen opiskelijan ohje - kirjautuminen estudio on Edupolin kehittämä e-oppimisympäristö koulutusryhmän verkkoalustana perinteisen luokkaopetuksen tukena. etäopiskelussa ja -opetuksessa kotoa tai työpaikalta.

Lisätiedot

Perustietoja Mietoisten kyläportaalista... 2. Yhdistyksen ylläpitäjän kirjautuminen... 2. Yhdistyksen etusivun muokkaaminen... 2

Perustietoja Mietoisten kyläportaalista... 2. Yhdistyksen ylläpitäjän kirjautuminen... 2. Yhdistyksen etusivun muokkaaminen... 2 Mietoisten kyläportaalin käyttöohjeet alasivujen ylläpitäjille Päivitetty 8.4.2011 Sisältö Perustietoja Mietoisten kyläportaalista... 2 Yhdistyksen ylläpitäjän kirjautuminen... 2 Yhdistyksen etusivun muokkaaminen...

Lisätiedot

SeaMonkey pikaopas - 1

SeaMonkey pikaopas - 1 SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston

Lisätiedot

OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN

OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN Koulutusteknologian perusopinnot Digitaalinen portfolio oppimisen tukena 2010 Essi Vuopala 1. BLOGIN LUOMINEN Mene osoitteeseen http://www.wordpress.com

Lisätiedot

Tapahtumakalenteri & Jäsentietojärjestelmä Ylläpito

Tapahtumakalenteri & Jäsentietojärjestelmä Ylläpito Tapahtumakalenteri & Jäsentietojärjestelmä Ylläpito Henri Kinnunen, Seppo Tompuri, Tero Malkki, Matti Heiskanen, Tommi Rönkönharju, Tuomas Valkeapää Sisällysluettelo 1. Alkusanat.2 2. Asennusohje..2 3.

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

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

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

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014 Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina

Lisätiedot

Office_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö

Office_365_loppukäyttäjän ohje. 15.5.2015 Esa Väistö Office_365_loppukäyttäjän ohje 15.5.2015 Esa Väistö 2 Sisällysluettelo Kuvaus... 3 Kirjautuminen Office_365:een... 3 Valikko... 4 Oppilaan näkymä alla.... 4 Opettajan näkymä alla... 4 Outlook (Oppilailla)...

Lisätiedot

tervetuloa internetiin:

tervetuloa internetiin: Tässä osassa opit rakentamaan omat kotisivut lisäämään tekstiä ja kuvia valitsemaan teeman liittämään taustan kotisivuille Toinen osa antaa apua kotisivujen rakentamisessa yhdistyksen tai kerhon käyttöön.

Lisätiedot

Meeting Plannerin käyttöohje

Meeting Plannerin käyttöohje Meeting Plannerin käyttöohje Näytteilleasettaja & Yhteistyökumppani Sisällysluettelo Näytteilleasettajat ja yhteistyökumppanit... 2 Sisään kirjautuminen... 2 Järjestelmän etusivu... 2 Peruskäyttäjien näkymät...

Lisätiedot

Talotietojen päivittäminen

Talotietojen päivittäminen Talotietojen päivittäminen www.seurantalot.fi-sivustolle Pikaohje seurantalojen omistajayhdistyksille 17.6.2015 Suomen Kotiseutuliitto 1 Ohjeen sisältö Palveluun kirjautuminen s. 3 Talosivu s. 4 Tietojen

Lisätiedot

Yksityiskohtaiset ohjeet. TwinSpacen käyttäminen

Yksityiskohtaiset ohjeet. TwinSpacen käyttäminen Yksityiskohtaiset ohjeet TwinSpacen käyttäminen Profiilin päivittäminen...3 Opettajien ja vierailijoiden kutsuminen TwinSpaceen...4 Oppilaiden kutsuminen TwinSpaceen...7 Blogin lisääminen TwinSpacen Harjoituksiin...10

Lisätiedot

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA

Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Prologi Blogi voidaan määritellä verkkosivustoksi, johon yksi ihminen tai tietty ryhmä tuottaa ajankohtaista sisältöä. Blogi mahdollistaa omien ajatusten

Lisätiedot

Tässä ohjeessa käydään läpi sosiaalisen median verkkopalveluiden lisätoimintojen lisääminen verkkosivuillesi.

Tässä ohjeessa käydään läpi sosiaalisen median verkkopalveluiden lisätoimintojen lisääminen verkkosivuillesi. SOSIAALINEN MEDIA Tässä ohjeessa käydään läpi sosiaalisen median verkkopalveluiden lisätoimintojen lisääminen verkkosivuillesi. FACEBOOK Facebook mahdollistaa useiden erilaisten Social plugins -toimintojen

Lisätiedot

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4

Lisätiedot

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita

Lisätiedot

Tämän ohjeen avulla pääset alkuun Elisa Toimisto 365 palvelun käyttöönotossa. Lisää ohjeita käyttöösi saat: www.elisa.fi/toimisto365-ohjeet

Tämän ohjeen avulla pääset alkuun Elisa Toimisto 365 palvelun käyttöönotossa. Lisää ohjeita käyttöösi saat: www.elisa.fi/toimisto365-ohjeet Elisa Toimisto 365 Pääkäyttäjän pikaopas 02/2015 Tämän ohjeen avulla pääset alkuun Elisa Toimisto 365 palvelun käyttöönotossa. Lisää ohjeita käyttöösi saat: www.elisa.fi/toimisto365-ohjeet Kirjautumalla

Lisätiedot

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.

Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Sisäänkirjauduttuasi näet palvelun etusivulla helppokäyttöisen hallintapaneelin. Vasemmassa reunassa on esillä viimeisimmät tehdyt muutokset

Lisätiedot

v4.0 Palvelukuvaus 1.11.2014

v4.0 Palvelukuvaus 1.11.2014 v4.0 Palvelukuvaus 1.11.2014 - 2-5 Internetsivustopaketti nettihelmi nettihelmi on Avaimet käteen Internetsivusto ratkaisu. Palvelu sisältää laadukkaan graafisen ulkoasun nettihelmi perussivupohjaan ja

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

NETTISIVUJEN PÄIVITYS OHJEET versio 1.1

NETTISIVUJEN PÄIVITYS OHJEET versio 1.1 1/7 Sisällysluettelo: YLEISOHJEET 1 HALLINTA 1 Hallinnan etusivu 2 Uutiset 3 Luo uusi uutinen 3 Luo uusi uutiskuva 4 Muokkaa vanhoja uutisia 4 Kuvagalleriat 4 Kalenteri 5 Joukkue 5 Pelaajat 5 Ottelut 6

Lisätiedot

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut.

Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut. Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa,

Lisätiedot

Kyvyt.fi eportfolion luominen

Kyvyt.fi eportfolion luominen Kyvyt.fi eportfolion luominen Portfolion tekeminen koostuu kolmesta vaiheesta: 1 Yksittäisten portfolio-sivujen luominen 2 Sivujen liittäminen yhteen sivustoksi - eportfolioksi 3 Katseluoikeuksien antaminen

Lisätiedot

Webkoulutus 10.11.2012

Webkoulutus 10.11.2012 Webkoulutus 10.11.2012 Yleistä kotisivuista Ohjelma Lions liiton ohjeet websivuista Kotisivut Lions-liiton palvelimella Kotisivujen pohjamateriaali Kompozer ohjelma ja sen käyttö 10.11.2011 DC Mika Mustonen

Lisätiedot

SÄHKÖPOSTIOHJE Mikkelin ammattikorkeakoulu

SÄHKÖPOSTIOHJE Mikkelin ammattikorkeakoulu SÄHKÖPOSTIOHJE Mikkelin ammattikorkeakoulu 1 Ohjeen nimi Vastuuhenkilö Sähköpostiohje Järjestelmäasiantuntija Antero Istolainen Voimaantulo 19.02.2013 Päätös Muutettu viimeksi 11.02.2014 Tarkistettu viimeksi

Lisätiedot

Tiedonhallinnan perusteet. Viikko 1 Jukka Lähetkangas

Tiedonhallinnan perusteet. Viikko 1 Jukka Lähetkangas Tiedonhallinnan perusteet Viikko 1 Jukka Lähetkangas Kurssilla käytävät asiat Tietokantojen toimintafilosofian ja -tekniikan perusteet Tiedonsäilönnän vaihtoehdot Tietokantojen suunnitteleminen internetiä

Lisätiedot

Tietokannan luominen:

Tietokannan luominen: Moodle 2 Tietokanta: Tietokanta on työkalu, jolla opettaja ja opiskelijat voivat julkaista tiedostoja, tekstejä, kuvia, linkkejä alueella. Opettaja määrittelee lomakkeen muotoon kentät, joiden kautta opiskelijat,

Lisätiedot

Luo mediaopas Tarinatallentimella

Luo mediaopas Tarinatallentimella Luo mediaopas Tarinatallentimella 2015 Tarinatallennin Tarinatallentimella voi helposti luoda mediaoppaita käytettäväksi älypuhelimilla. Sen avulla rakennat erilaisia kokonaisuuksia helposti ja hallitset

Lisätiedot

Työsähköpostin sisällön siirto uuteen postijärjestelmään

Työsähköpostin sisällön siirto uuteen postijärjestelmään Työsähköpostin sisällön siirto uuteen postijärjestelmään edupori.fi/office 365 3.10.2013 Porin kaupunki ATK Tuki Sisällys Johdanto... 2 Edupori.fi sähköpostin määrittäminen Office 365:n Outlook-ohjelmaan

Lisätiedot

Nettisivujen Päivitysohje

Nettisivujen Päivitysohje Hämeenlinnan rauhanyhdistys ry Nettisivujen Päivitysohje Ohje päivitetty 18.7.2012 Hallintapaneeli Kirjautuminen nettisivujen hallintaan Hallintapaneeliin päästään kirjautumaan klikkaamalla linkkiä nettisivujen

Lisätiedot

ohjeita kirjautumiseen ja käyttöön

ohjeita kirjautumiseen ja käyttöön ohjeita kirjautumiseen ja käyttöön Kirjautumisesta Opiskelijat: kirjaudu aina tietokoneelle wilmatunnuksella etunimi.sukunimi@edu.ekami.fi + wilman salasana Opettajat: kirjaudu luokan opekoneelle @edu.ekami.fi

Lisätiedot

Maastotietokannan torrent-jakelun shapefile-tiedostojen purkaminen zip-arkistoista Windows-komentojonoilla

Maastotietokannan torrent-jakelun shapefile-tiedostojen purkaminen zip-arkistoista Windows-komentojonoilla Maastotietokannan torrent-jakelun shapefile-tiedostojen purkaminen zip-arkistoista Windows-komentojonoilla Viimeksi muokattu 5. toukokuuta 2012 Maastotietokannan torrent-jakeluun sisältyy yli 5000 zip-arkistoa,

Lisätiedot