Saimaan ammattikorkeakoulu Tekniikka Lappeenranta Tietotekniikan koulutusohjelma Viestinnän suuntautumisvaihtoehto

Saimaan ammattikorkeakoulu
Tekniikka Lappeenranta
Tietotekniikan koulutusohjelma
Viestinnän suuntautumisvaihtoehto
Viljo Värtö
Lieksan kaupunkikeskusyhdistyksen
sivut HTML5-tekniikalla
Opinnäytetyö 2012
internet-
Tiivistelmä
Viljo Värtö
Lieksan kaupunkikeskusyhdistyksen internetsivut HTML5-tekniikalla, 42 sivua
Saimaan ammattikorkeakoulu
Tekniikka Lappeenranta
Tietotekniikka
Viestintä
Opinnäytetyö 2012
Ohjaaja: Lehtori Yrjö Utti, Saimaan ammattikorkeakoulu
Tämän opinnäytetyön aiheena oli toteuttaa internetsivut HTML5-tekniikalla
Lieksan kaupunkikeskusyhdistys ry:lle. Yhdistys tarvitsee sivustoa toimintansa
esittelyyn, tapahtumista tiedottamiseen sekä yleiseen näkyvyyteen internetissä.
Työn tavoitteena oli tehdä asiakkaan toiveiden mukaiset, helppokäyttöiset ja
modernit verkkosivut, käyttäen nykyaikaisia tekniikoita ja menetelmiä.
Sivuston teko aloitettiin puhtaalta pöydältä, koska yhdistyksellä ei ollut aikaisempia verkkosivuja. Sivusto ja sen toiminnot toteutettiin HTML5merkintäkielellä sekä muilla suosituilla web-ohjelmoinnin tekniikoilla. Sivustolle
tehtiin helppokäyttöinen sisällönhallinta, kuvagalleria, logo sekä animoituja elementtejä.
Sivuston toteuttamisen lisäksi työssä tutustuttiin HTML5:n mukanaan tuomiin
uusiin ominaisuuksiin sekä, kuinka nämä ominaisuudet toimivat eri verkkoselaimilla.
Työn tuloksena saatiin aikaiseksi tavoitteiden mukainen verkkosivusto Lieksan
kaupunkikeskusyhdistys ry:lle. Asiakas oli tyytyväinen sivuston ulkoasuun ja
sisällönhallinnan helppokäyttöisyyteen.
Asiasanat: Internet-sivut, helppokäyttöisyys, HTML5, PHP, MySQL, jQuery
2
Abstract
Viljo Värtö
HTML5 website for the registered association of Lieksan kaupunkikeskusyhdistys, 42 pages
Saimaa University of Applied Sciences
Technics Lappeenranta
Information-technology
Communications
Bachelor´s Thesis 2012
Instructor: Mr. Yrjö Utti, Teacher
The purpose of this bachelor’s thesis was to create a HTML5 website for the
registered association of Lieksan kaupunkikeskusyhdistys. They needed the
website for presenting their operation, providing information about upcoming
events and gaining visibility on the internet. The goal was to create an easy to
use website that would meet the requirements set by the client, using modern
web-development techniques and methods.
The work was started from scratch because the association didn’t have any existing website. The website and its functions were made using HTML5 with other popular web-development techniques. The functions that were created for
the website included easy to use content management system, image gallery,
logo and animated elements.
In addition, this thesis introduces the new features of HTML5 and the way these
features work in different web-browsers.
The result of this thesis was a dynamic website that met the requirements set
by the client Lieksan kaupunkikeskusyhdistys. The client was pleased with the
build content management system and its userfriendliness.
Keywords: Website, ease of use, HTML5, PHP, MySQL, jQuery
3
Sisältö
Käsitteet ............................................................................................................ 5
1 Johdanto ......................................................................................................... 7
1.1 Asiakas..................................................................................................... 7
1.2 Tavoite ..................................................................................................... 7
1.3 Työtavat ................................................................................................... 8
2 Työkalut ja tekniikat ........................................................................................ 9
2.1 HTML5 ................................................................................................... 10
2.1.1 Multimedia (video ja ääni) ................................................................ 11
2.1.2 Grafiikka .......................................................................................... 13
2.1.3 Sovellukset ...................................................................................... 15
2.1.4 Rakenne .......................................................................................... 16
2.1.5 HTML-lomakkeet ............................................................................. 20
2.2 CSS3...................................................................................................... 21
2.3 jQuery .................................................................................................... 22
2.4 PHP........................................................................................................ 23
2.5 MySQL ................................................................................................... 23
2.6 TinyMCE ................................................................................................ 23
2.7 Sublime Text 2 ....................................................................................... 25
2.8 Adobe Photoshop ja Illustrator ............................................................... 27
2.9 Selaimet ................................................................................................. 27
3 Suunnittelu ja toteutus .................................................................................. 28
3.1 Asiakkaan toiveet ................................................................................... 29
3.2 Ulkoasu .................................................................................................. 29
3.3 Logo ....................................................................................................... 31
3.4 Sivukartta ............................................................................................... 32
3.5 Sisällönhallinta ....................................................................................... 34
3.6 Tietokanta .............................................................................................. 34
3.7 Käyttöympäristö ..................................................................................... 35
4 Ratkaisun esittely.......................................................................................... 36
4.1 Skaalautuva rakenne.............................................................................. 36
4.2 Tekstisisällön lisäys ja muokkaus ........................................................... 38
4.3 Kuvagalleria ........................................................................................... 38
5 Yhteenveto ja Pohdinta ................................................................................. 40
Kuvat ............................................................................................................... 41
Taulukot........................................................................................................... 41
Kaaviot ............................................................................................................ 41
Lähteet ............................................................................................................ 42
4
Käsitteet
Adobe Flash-Player
Adobe Flash-Player on ohjelma multimediasisällön
näyttämiseen internetsivuilla.
Ajax
Asynchronous Javascript and Xml. Joukko websovelluskehityksen tekniikoita vuorovaikutteisten websovellusten kehittämiseen.
cPanel
cPanel on www-palvelimen hallintaohjelmisto, joka tarjoaa graafisen käyttöliittymän palvelimen asetusten sekä tiedostojen ja tietokantojen hallintaan.
CSS
Cascading Syle Sheets. Tyyliohje, jolla vaikutetaan
sivuston ulkoasuun, kuten väreihin, fontteihin ja elementtien asetteluun.
DOM
Document Object Model. Ohjelmointirajapinta, joka
mahdollistaa HTML-dokumenttien sisällön muokkauksen.
Dynaaminen
Dynaamisuus verkkosivuilla tarkoittaa reagointia käyttäjän toimintoihin. Esimerkiksi sisällön lataaminen tietokannasta kun käyttäjä painaa nappia.
HTML
HyperText Markup Language. Yleisesti internet-sivujen
tekemiseen käytetty kuvauskieli.
HTML-elementti
HTML-elementit ovat palasia, joista verkkosivut rakentuvat.
JavaScript
Komentosarjakieli, jota käytetään lisäämään verkkosivuille dynaamista toiminnallisuutta.
jQuery
Kaikille selaimille tarkoitettu ilmainen, avoimen lähdekoodin JavaScript-kirjasto.
MP4
Mpeg-4. Applen kehittämä tiedostoformaatti joka voi
sisältää kuvan ja äänen lisäksi myös tekstityksen.
MySQL
Avoimen lähdekoodin relaatiotietokantojen hallintajärjestelmä.
5
Ogg
Avoimen standardin tiedostoformaatti, joka voi sisältää
kuvan ja äänen lisäksi myös tekstityksen.
PHP
PHP: Hypertext Preprocessor. Palvelinpohjainen ohjelmointikieli, jota käytetään dynaamisten verkkosivujen
luomiseen.
Renderöidä
Muuntaa digitaalinen tieto näytölle sopivaan esitysmuotoon.
Standardi
Jonkin organisaation määritelmä siitä, miten jokin asia
tulisi tehdä.
SVG
Scalable Vector Graphics. Kaksiulotteisen vektorigrafiikan kuvauskieli
Syntaksi
Ohjelmointikielen syntaksi on kokoelma sääntöjä, joiden perusteella kielen oikeaoppiset lauseet muodostuvat.
XML
Extensible Markup Language. XML-kieli on rakenteellinen kuvauskieli, joka auttaa jäsentämään laajoja tietomassoja selkeämmin
W3C
World Wide Web Consortium on kansainvälinen yritysten ja yhteisöjen yhteenliittymä, joka ylläpitää ja kehittää WWW:n standardeja ja suosituksia.
WebM
Googlen kehittämä avoimen standardin tiedostomuoto
kuvalle ja äänelle HTML5-videoita varten.
Web-ohjelmointi
Internetiin ladattavan sisällön kehitystyö.
WWW
World Wide Web on internetverkossa toimiva hajautettu hypertekstijärjestelmä.
WYSIWYG-editori
What You See Is What You Get. Editorissa muokattava
sisältö näyttää hyvin samanlaiselta kuin lopputulos.
6
1 Johdanto
Tässä opinnäytetyössä käydään läpi dynaamisen eli vuorovaikutusta sisältävän
verkkosivun toteuttaminen käyttäen HTML-merkintäkielen (HyperText Markup
Language) uusimman version, HTML5:n, tarjoamia ominaisuuksia ja toimintoja
yhdessä muiden web-ohjelmoinnin tekniikoiden kanssa. Web-ohjelmoinnilla tarkoitetaan internetiin ladattavan sisällön, kuten verkkosivujen, kehitystyötä.
Sivusto tehdään Lieksan kaupunkikeskusyhdistys ry:lle, jolla ei omaa verkkosivua vielä ole. Yhdistys tarvitsee sivuston järjestämistään tapahtumista ja
tilaisuuksista tiedottamiseen sekä yleiseen näkyvyyteen verkossa.
1.1 Asiakas
Opinnäytetyön asiakas on vuonna 2008 perustettu Lieksan kaupunkikeskusyhdistys ry. Yhdistyksen tavoitteena on Lieksan kaupungin vetovoimaisuuden kehittäminen. Sen toimintaan kuuluu erilaisten tapahtumien ja tilaisuuksien järjestäminen. Tunnettuja tapahtumia ovat esimerkiksi Lieksan vaskiviikko, Hämärän
kaupan ilta sekä Pielisen Messut. Jäseninä yhdistyksellä on Lieksan kaupungin
alueella toimivia yrityksiä ja yksityishenkilöitä.
1.2 Tavoite
Työn tavoitteena on tehdä tyylikäs ja helppokäyttöinen verkkosivusto nykyaikaisia menetelmiä ja tekniikoita käyttäen. Helppokäyttöisyys pitää sisällään mahdollisimman yksinkertaisen sisällön hallinnan, jonka käytön tulee onnistua ilman
laajempaa tietoteknistä osaamista. Sisällön hallinnalla tarkoitetaan mahdollisuutta lisätä, muokata ja poistaa sivuston elementtejä, kuten artikkeleita ja kuvia.
Asiakkaan asettamia tavoitteita sivuston ominaisuuksista ja toiminnoista ovat:
helppokäyttöinen kuvagalleria, muokattavat artikkelit usealla sivulla, mahdollisuus mainoksille, tyylikäs ja lämmin ulkoasu sekä helppokäyttöisyys.
7
1.3 Työtavat
Työtä tehdään noudattamalla yksinkertaistettua ohjelmistokehityksen vesiputousmallia (Kuva 1.1), jota on vielä muunneltu verkkosivuston kehitystyöhön
paremmin sopivaksi.
Määrittely
Suunnittelu
Toteutus
Testaus
Ylläpito
Kuvio 1.1. Ohjelmistotuotannon vesiputousmalli.
Määrittelyvaiheessa kartoitetaan sivuston vaatimukset eli mitä toimintoja ja ominaisuuksia sivustolle halutaan ja miten niiden on tarkoitus toimia. Suunnitteluvaiheessa suunnitellaan, miten ja millä tekniikoilla määritellyt ominaisuudet ja
toiminnot saadaan toteutettua. Testausvaiheessa sivustoa käytetään eri selaimilla sekä laitteilla ja etsitään ja korjataan mahdollisia vikoja ja eroavaisuuksia sivuston toiminnassa riippuen käytetystä selaimesta/laitteesta. Ylläpito tarkoittaa valmiin tuotteen parannus- ja korjaustoimenpiteitä ja pitää sisällään testausvaiheen läpäisseiden vikojen korjaamisen sekä käytettävyyden parantamisen. Toteutusvaihetta on muokattu tämän työn tarpeisiin niin, että toteutetaan
yksi tai useampi prototyyppi asiakkaan arvioitavaksi ja tehdään muutoksia/korjauksia asiakkaan toiveiden mukaan.
Työssä käytetään seuraavia web-ohjelmoinnin tekniikoita: HTML5-merkintäkieli,
CSS-tyyliohjekieli (Cascading Style Sheets), PHP-komentosarjakieli (PHP Hypertext Preprocessor), MySQL-relaatiotietokantaohjelmisto (Structured Query
Language), JavaScript-komentosarjakieli, jQuery JavaScript-kirjasto.
8
2 Työkalut ja tekniikat
Opinnäytetyön tekemiseen on valittu tuttuja ja turvallisia web-ohjelmoinnin tekniikoita ja työkaluja, jotta työskentely olisi mahdollisimman sujuvaa ja tehokasta.
Ainoana verrattain uutena tekniikkana esitellään HTML5. Kaikki työssä käytetyt
työkalut ja menetelmät ovat ilmaisia, avoimen lähdekoodin sovelluksia ja tekniikoita, lukuun ottamatta Adoben kuvankäsittelyohjelmistoja sekä koodin kirjoittamiseen käytettävää Sublime Text 2 -koodieditoria. Kuvassa 2.1 on nähtävissä
kokonaiskuva siitä, kuinka tässä luvussa esiteltävät tekniikat toimivat yhteistyössä verkkosivulla.
Kuva 2.1. Tekniikat verkkosivulla
9
Tyypillinen verkkosivusto koostuu HTML-tiedostoista, CSS-tyyleistä sekä toiminnallisuutta lisäävästä JavaScriptistä ja PHP:stä. Palvelimella sijaitsevat
HTML-tiedostot on kirjoitettu HTML-merkintäkielellä. HTML-tiedostot pitävät sisällään sivustolle tulevat elementit ja niiden määrittelyt. Sivuston värit, fontit ja
elementtien asettelu määritellään CSS-tyylitiedostossa, joka yhdistetään linkillä
HTML-tiedostoon. Sivustolle SVG-muodossa lisätyt graafiset elementit, kuten
logot, pysyvät tarkkana ja terävänä vaikka niitä suurennettaisiin tai pienennettäisiin.
Kun verkkosivulle halutaan lisätä jotain toiminnallisuutta, kuten automaattisesti
vaihtuvia kuvia, napin painalluksesta kokoa muuttavaa tekstiä tai eri elementtien
animointia, voidaan se toteuttaa JavaScriptin avulla. Nykyajan verkkosivuilla on
tapana käyttää perinteisen JavaScriptin sijaan jotain JavaScript-kirjastoa, kuten
jQueryä.
PHP:n avulla sivustolla tehdään paljon erilaista käyttäjälle näkymätöntä toimintaa. Esimerkiksi sivuston tekstit voivat sijaita palvelimen tietokannassa, josta ne
haetaan sivulle PHP:n avulla ennen kuin sivusto lähetetään käyttäjän selaimelle.
2.1 HTML5
HTML5 on internet-sivujen tekemiseen käytetyn standardin HTML-kielen uusin
versio. Sen tarkoituksena on muun muassa parantaa kielen suorituskykyä ja
yhteensopivuutta uusien multimediasisältöjen (video, animaatio, ääni) kanssa,
mahdollistaa sovellusten kehittäminen useille eri laitteille sekä tehdä näyttävien
dynaamisten sivustojen kehittämisestä helpompaa.
Alun perin HTML5:n odotettiin tulevan standardiksi vuonna 2022, mutta WWWstandardeja (World Wide Web) ylläpitävä ja kehittävä W3C (World Wide Web
Consortium) päätti aikaistaa standardointiprosessia vuoden 2014 loppupuolelle.
W3C:n mukaan nopeammat ja pienemmät päivitykset standardiin ovat järkevämpi vaihtoehto kuin pitkä kehityskaari. Standardiin sisällytetään vain ne ominaisuudet, jotka on jo todettu vakaiksi ja otettu käyttöön eri selaimissa. Vielä
kehityksen alla olevat ominaisuudet lisätään standardiin päivityksen myötä
myöhempänä ajankohtana. (1.)
10
Vaikka HTML5 ei olekaan vielä virallinen standardi, uusimmat nettiselaimet tukevat jo suurta osaa HTML5:n toiminnoista ja tuettavien ominaisuuksien määrä
kasvaa aina uusien selainversioiden myötä.
Tähän opinnäytetyöhön HTML5-tekniikka on valittu sen ajankohtaisuuden takia.
HTML5 on kovaa vauhtia kasvattamassa suosioitaan web-ohjelmoinnissa sekä
esimerkiksi web-pohjaisissa mobiilisovelluksissa. Lisäksi HTML5-osaaminen on
hyödyllinen ja kysytty taito työmarkkinoilla.
2.1.1 Multimedia (video ja ääni)
Video ja ääni ovat tärkeitä elementtejä nykyajan verkkosivuilla, mutta ennen
HTML5:tä niiden lisääminen sivuille on ollut vaikeaa.
HTML5:stä löytyy natiivi tuki ääni- ja videotiedostoille, mikä tarkoittaa sitä, että
videon ja äänen toistamiseen ei tarvita erillisiä lisäosia selaimeen, kuten esimerkiksi Adobe Flash-player -sovellusta.
Vaikka Flash onkin vielä suosituin tapa upottaa videoita ja ääntä verkkosivuille,
on se pikkuhiljaa menettämässä suosiotaan. Päällimmäinen syy suosion hiipumiseen on se, että suurin osa mobiililaitteista kuten älypuhelimista ja tableteista
ei pysty toistamaan Flash-pohjaista sisältöä.
HTML5:n mukanaan tuomat ominaisuudet mahdollistavat sen, että sivuston
multimediasisältö näkyy kaikille käyttäjille selaimesta ja käytetystä päätelaitteesta riippumatta.
Video
HTML5 määrittelee uuden elementin, joka kuvaa standardin tavan upottaa videon/elokuvan verkkosivulle: video-elementin.
Esimerkki video-elementin käytöstä:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
11
Video-elementin attribuutit eli ominaisuudet width (leveys) ja height (korkeus)
määrittelevät videon koon leveys- ja korkeussuunnassa ja attribuutti controls
(ohjaimet) lisää videoon ohjauspainikkeet, kuten toisto, tauko ja äänenvoimakkuus. Source-elementti (lähde) sisältää linkin palvelimelle ladattuun videoon
sekä videotiedoston formaatin eli tiedostomuodon. Video-elementtiin on mahdollista lisätä sama video eri formaatissa source-elementin avulla. Selain toistaa
videon, jonka formaatin se ensimmäisenä tunnistaa.
Tällä hetkellä video-elementti tukee kolmea eri videoformaattia: Applen kehittämä MP4 (Mpeg-4), Googlen kehittämä WebM ja avoimen standardin Ogg. Taulukossa 2.1 näkyy suosituimpien verkkoselaimien tukemat videoformaatit
Selain
MP4
WebM
Ogg
Internet Explorer 9
KYLLÄ
EI
EI
Firefox 4.0
EI
KYLLÄ
KYLLÄ
Google Chrome 6
KYLLÄ
KYLLÄ
KYLLÄ
Apple Safari 5
KYLLÄ
EI
EI
Opera 10.6
EI
KYLLÄ
KYLLÄ
Taulukko 2.1. Selaimien tukeman videoformaatit.
Taulukosta selviää, että jos halutaan varmistaa videon näkyvyys kaikissa selaimissa, on se lisättävä sivulle vähintään kahdessa eri formaatissa.
Ääni
HTML5 määrittelee uuden elementin, joka kuvaa standardin tavan upottaa äänitiedostoja verkkosivulle: audio-elementin.
Esimerkki audio-elementin käytöstä:
<audio controls="controls">
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
</audio>
Attribuutti controls (ohjaimet) lisää sivulle ohjauspainikkeet kuten: toisto, tauko
ja äänenvoimakkuus. Source-elementti sisältää linkin palvelimelle ladattuun äänitiedostoon sekä tiedoston formaatin. Audio-elementtiin on mahdollista liittää
12
sama äänitiedosto eri formaatissa source-elementin avulla. Selain käyttää tiedostoa, jonka formaatin se ensimmäisenä tunnistaa.
Tällä hetkellä audio-elementti tukee kolmea eri audioformaattia: yleisesti käytössä oleva häviöllinen äänenpakkausmenetelmä MP3 (MPEG-1 Audio Layer
3), Microsoftin ja IBM:n standardoima Wav (Waveform Audio File Format) ja
avoimen standardin Ogg. Taulukosta 2.2 selviää eri selaimien tukemat audioformaatit.
Selain
MP3
Wav
Ogg
Internet Explorer 9
KYLLÄ
EI
EI
Firefox 4.0
EI
KYLLÄ
KYLLÄ
Google Chrome 6
KYLLÄ
KYLLÄ
KYLLÄ
Apple Safari 5
KYLLÄ
KYLLÄ
EI
Opera 10.6
EI
KYLLÄ
KYLLÄ
Taulukko 2.2. selaimien tukemat audioformaatit.
Taulukosta selviää, että äänitiedosto on lisättävä sivulle vähintään kahdessa eri
formaatissa, jos haluaa sen toimivan kaikissa selaimissa.
2.1.2 Grafiikka
Ennen HTML5:tä, kehittäjien oli käytettävä joko JavaScriptiä tai CSS-tyylejä
animaatioiden ja visuaalisten efektien luomiseen verkkosivuille tai turvauduttava
lisäosien kuten Flashin käyttöön. HTML5 tuo kolme uutta tapaa tuottaa verkkosivuille kaksi- ja kolmiulotteista grafiikkaa sekä animaatioita: SVG (Scalable
Vector Graphics), canvas-elementti ja CSS3.
SVG
HTML5:ssä on natiivi tuki SVG grafiikalle. SVG on XML-merkintäkielellä (Extensible Markup Language) tehtyjen kaksiulotteisten vektorikuvien kuvauskieli. Se
perustuu W3C:n kehittämään avoimeen kuvatiedostostandardiin. SVG:tä käytetään staattisen ja dynaamisen vektorigrafiikan näyttämiseen verkkosivuilla.
SVG:llä toteutettujen kuvien ja animaatioiden etuja perinteisiin kuvaformaatteihin verrattuna ovat skaalautuvuus: kuvia voi tarkentaa ja suurentaa eikä kuvanlaatu kärsi, kuvia voi luoda ja muokata millä tahansa tekstieditorilla, kuvia voi
13
tulostaa korkealaatuisen millä resoluutiolla tahansa, kuvat on mahdollista pakata pieneen tilaan laadun kärsimättä. (2.)
Esimerkiksi kuvan 2.2 mukaisen ympyrän piirtäminen SVG-tekniikalla tapahtuu
seuraavasti:
<svg>
<circle cx="60" cy="60" r="40" stroke="black"
stroke-width="2" fill="green" />
</svg>
Kuva 2.2. SVG-tekniikalla piirretty ympyrä.
Ympyrä piirretään käyttämällä circle-elementtiä. cx ja cy määrittelevät ympyrän
keskipisteen koordinaatit ja r ympyrän säteen. Stroke-määrittelyt viittaavat ympyrän reunan väriin ja paksuuteen ja fill ympyrän täyttöväriin.
Canvas-elementti
Canvas on bittikartta eli kuvapisteistä muodostuva elementti, jolle voidaan dynaamisesti tuottaa kuvia, animaatioita ja peligrafiikkaa.
Canvas-elementin avulla verkkosivulle saadaan luotua tyhjä piirtoalue, johon on
mahdollista piirtää grafiikkaa esimerkiksi JavaScriptiä käyttäen. Canvas sisältää
valmiita metodeja muotojen, kuten ympyröiden ja neliöiden piirtämiseen, gradienttien eli liukuvärien tekoon, tekstien ja fonttien renderöintiin, pikseleiden eli
kuvapisteiden manipulointiin sekä canvas-elementin sisällön tallentamiseen tiedostoon. (3.)
Esimerkiksi kuvan 2.3 mukaisen kolmion piirtäminen canvas-elementille JavasScriptin avulla tapahtuu seuraavasti:
14
<canvas id="pohja" width="200" height="200" ></canvas>
<script>
var pohja = document.getElementById("pohja")
var konteksti = pohja.getContext("2d");
konteksti.moveTo(20,10);
konteksti.lineTo(150,10);
konteksti.lineTo(20,80);
konteksti.lineTo(20,10);
konteksti.strokeStyle= "#f00";
konteksti.stroke();
</script>
Kuva 2.3. Canvas-elementille piirretty kolmio.
Tyhjälle canvas-elementille piirtäminen tapahtuu koordinaattien avulla. Komento
moveTo siirtää kursorin kohtaan josta piirtäminen aloitetaan, ja komento lineTo
kertoo koordinaatit, johon viiva piirretään.
2.1.3 Sovellukset
Web-sovellukset ovat ohjelmia, jotka toimivat käyttäjän koneen sijasta internetissä. Tyypillisiä web-sovelluksia ovat erilaiset sähköpostiohjelmat, kalenterit,
verkkokaupat, sanakirjat ja hakukoneet.
HTML5 tuo mukanaan useita ominaisuuksia helpottamaan web-sovellusten kehittämistä. Näitä ominaisuuksia ovat esimerkiksi: paikallinen tiedon tallentaminen, paikallinen tiedostojen hallinta, paikallinen SQL-tietokanta, sovellusten välimuisti, JavaScript-”työntekijät” sekä palvelinpyynnöt.
Web Storage
HTML5:n ansiosta verkkosivut voivat tallentaa tietoa käyttäjän selaimeen. Aikaisemmin tähän tarkoitukseen käytettiin evästeitä (Cookies). Evästeihin verrattuna Web Storage on parempi niin nopeuden kun tietoturvallisuudenkin kannalta.
Web Storageen tallennettua tietoa ei myöskään haeta evästeiden tapaan jokai-
15
sella palvelinpyynnöllä vaan ainoastaan pyydettäessä. Web Storagen hyötyjä
on myös mahdollisuus tallentaa suuria määriä tietoa hidastamatta verkkosivun
käyttöä. (4.)
Application Cache
HTML5 Application Cache on sovellusten välimuisti, joka mahdollistaa websovellusten ja sivustojen tallentamisen selaimen välimuistiin. Selaimen välimuistiin tallentamisella tarkoitetaan verkkosivun lataamista käyttäjän kovalevylle.
Välimuistiin tallentaminen mahdollistaa web-sovelluksen tai sivuston käytön ilman internetyhteyttä, nopeuttaa sivuston latautumista sekä vähentää palvelimen kuormitusta.
Application Cachen käyttöönottaminen tapahtuu lisäämällä verkkosivun html
tagin sisälle attribuutti manifest:
<!DOCTYPE HTML>
<html manifest="esimerkki.appcache">
...
</html>
Jokainen sivu, jossa manifest-attribuutti on määritelty, tallennetaan välimuistiin.
Manifest-tiedoston suositeltu tiedostopääte on ”.appcache”. Manifest-tiedosto
on tavallinen tekstitiedosto, joka kertoo selaimelle, mitä tallennetaan ja mitä ei
tallenneta välimuistiin. (5.)
Web Workers
Web Worker on JavaScript, jota ajetaan sivuston taustalla ilman että sivuston
toiminta hidastuu. Kun verkkosivuilla ajetaan komentosarjoja eli scriptejä, sivusto lakkaa vastaamasta käyttäjän pyyntöihin ja toimintoihin, kunnes scripti on
suoritettu. Web Workerin avulla mahdollisesti raskas JavaScript voidaan ajaa
verkkosivun taustalla vaikuttamatta sivuston toimivuuteen mitenkään. (6.)
2.1.4 Rakenne
HTML5:n määrittelydokumentti esittelee monta uutta elementtiä kuvaamaan
verkkosivun ja sen osien rakennetta (7). Uusien elementtien tehtävänä on tarjota sivun eri osille, kuten navigaatio, sivupalkki, otsikko, artikkeli ja alapalkki,
16
oma elementti ja näin selkeyttää sivun rakennetta sekä helpottaa samantyylisten elementtien muotoilua. Kuvassa 2.4 on nähtävillä tyypillisen verkkosivun
rakenne toteutettuna HTML5-elementeillä. Uusien elementtien esittelyn lisäksi
joitain vähänkäytettyjä ja turhiksi todettuja elementtejä on poistettu kokonaan.
Kuva 2.4. Verkkosivun rakenne HTML5-elementeillä.
Header-elementti
Header- eli otsikko-elementtiä käytetään tyypillisesti sivuston artikkelien otsikkolohkon rajaamiseen tai sivun alkuosassa, jolloin se voi sisältää esimerkiksi sivun
pääotsikon ja tietoa sivustosta. Header-elementtiä voi käyttää myös sivuston
navigaation tai logon esittämiseen. Sivulla voi olla useita header-elementtejä.
Footer-elementti
Footer-elementtiä (alatunniste) käytetään kertomaan lisätietoja sivun tietystä
osiosta. Footer-elementti voi esimerkiksi sijaita sivun alaosassa ja sisältää tieto-
17
ja kopiosuojauksesta, sivun tekijästä, yhteystietoja, ynnämuuta. Sivulla voi olla
useita footer-elementtejä.
Nav-elementti
Nav-elementti kuvaa sitä osaa verkkosivusta, joka sisältää linkkejä sivun osiin
tai muihin sivuihin: navigaatiota. Sivun kaikkia linkkejä ei ole tarkoitus laittaa
nav-elementin sisään vaan pelkästään ne linkit, jotka ovat olennaisia sivun navigaation kannalta.
Article-elementti
Article-elementti (artikkeli) kuvaa sitä osaa verkkosivusta, joka sisältää itsenäistä sisältöä, kuten keskustelupalstan viesti, blogikirjoitus, uutisartikkeli, käyttäjän
kirjoittama kommentti tai mikä tahansa muu itsenäinen osa sisältöä. Itsenäisellä
sisällöllä tarkoitetaan sisältöä, joka on ymmärrettävissä, vaikka se julkaistaisiin
erillään sivuston muusta sisällöstä.
Esimerkki article-, header- ja footer-elemetin yhteiskäytöstä:
<article>
<header>
<h1>Artikkelin Otsikko</h1>
<p>Julkaistu 27.10.2012</p>
</header>
<p>Artikklein sisältö voi olla mitä vaan itsenäistä
sisältöä uutisista blogiposteihin</p>
<footer>
<p>Footer-elementin sisään voidaan laittaa tietoja
artikkelin kirjoittajasta</p>
</footer>
</article>
Section-elementti
Section-elementti (osa) kuvaa sitä osaa verkkosivusta, joka sisältää otsikoitua
sisältöä, johon article-elementin käyttö ei olisi sopivaa. Sitä voidaan käyttää
esimerkiksi jakamaan article-elementin sisältö kappaleisiin.
Esimerkki article- ja section-elementin yhteiskäytöstä:
18
<article>
<h1>Intro</h1>
<p>Alkusanat</p>
<section>
<h2>Ensimmäinen kappale</h2>
<p>Tekstiä…</p>
</section>
<section>
<h2>Toinen kappale</h2>
<p>Tekstiä…</p>
</section>
</article>
Aside-elementti
Aside-elementti (sivuhuomautus) kuvaa sitä osaa verkkosivusta, joka koostuu
sisällöstä, joka sivuaa sivulla käsiteltyä aihetta. Tällainen sivuava sisältö voi olla
esimerkiksi käsiteltyyn aiheeseen liittyvät mainokset, kuvat, lainaukset tekstistä,
lisätietoja aiheesta sisältävä sivupalkki ja linkit. Kuvassa 2.5 on nähtävillä esimerkki aside-elementin käytöstä article- ja section-elementtien yhteydessä.
Kuva 2.5. Verkkosivun article-elementti.
19
Div-elementti
Div-elementillä ei ole mitään määriteltyä käyttötarkoitusta vaan sitä käytetään
silloin, kun muiden elementtien (article, section, aside, ynnä muut) käyttö ei ole
sopivaa. Useimmiten div-elementtiä käytetään säiliönä elementeille, joille halutaan asettaa tiettyjä CSS-tyylejä.
2.1.5 HTML-lomakkeet
HTML5 tuo mukanaan uusia ominaisuuksia ja syöte-elementtejä HTMLlomakkeiden tekoa ja käsittelyä varten. Uusia ominaisuuksia ovat uudet lomakkeiden syötetyypit (input type), joiden avulla käyttäjältä pyydettyjen syötteiden
sisältö on tarkemmin määriteltävissä. Uusia syötetyyppejä ovat esimerkiksi: väri
(color), päivämäärä ja aika (date, time), sähköpostiosoite (email) ja numero
(number). Kuvassa 2.6 on nähtävillä uusi päivämäärä (date) syötetyyppi, joka
lisää syötekenttään kalenterin päivämäärän valintaa varten.
Kuva 2.6. Päivämäärä syötetyyppi.
Uusia lomakkeiden ja syötetyyppien ominaisuuksia ovat esimerkiksi: vaadittu
(required), automaattitäydennys (autocomplete) ja esimerkkiarvo (placeholder).
Lisäämällä lomakkeen syötekenttään ominaisuus ”required”, tarkistetaan sen
sisältö ennen lomakkeen lähetystä eteenpäin. Jos kenttään syötetty arvo ei vastaa sen syötetyyppiä, pyydetään käyttäjää kirjoittamaan syöte uudelleen. Kuvassa 2.7 käyttäjä on syöttänyt sähköpostiosoitteensa väärin, joten lomakkeen
lähettämin keskeytyy ja käyttäjää pyydetään tarkistamaan kenttään kirjoitettu
arvo.
20
Kuva 2.7. Sähköpostikentän tarkistus.
Lisäämällä syötekenttään ominaisuus ”autocomplete”, muistaa kenttä edellisinä
kertoina syötetyt arvot. Ominaisuudella ”placeholder” kentässä näkyy valmiina
esimerkki kenttään sopivasta arvosta.
2.2 CSS3
CSS eli Cascading Style Sheets on tyyliohjekieli, jota käytetään kuvaamaan
merkintäkielellä kirjoitettujen dokumenttien ulkoasua ja muotoilua. Sen yleisin
käyttökohde on HTML-elementtien sommittelun, muotoilun ja ulkoasun määrittely. CSS3 on CSS-tyyliohjekielen kolmas revisio.
CSS on suunniteltu ensisijaisesti mahdollistamaan verkkosivuston sisällön erottamisen sen ulkoasusta. Ulkoasulla tarkoitetaan värejä, fontteja, muotoiluja sekä elementtien asettelua ja kokoa. Tämä sisällön ja tyylin erottaminen selkeyttää sivun rakennetta, mahdollistaa tiettyjen elementtien tarkan muotoilun sekä
tekee saman ulkoasun käytön usealla sivulla helpoksi. CSS-tyylien avulla on
myös mahdollista määritellä sivustolle erilainen ulkoasu sen katselemiseen käytetyn laitteen ja sen näytön koon mukaan. Esimerkiksi sivuston raskaita elementtejä kuten kuvia/animaatioita voidaan CSS-tyylien avulla määritellä piilotettaviksi, jos sivustoa katsellaan puhelimella.
CSS:n syntaksi eli lauserakenne on yksinkertainen ja helppo oppia. Yhden tyylisäännön perussyntaksi on seuraavanlainen:
valitsin { ominaisuus: arvo; }
Esimerkiksi jos halutaan nav-elementin tekstin olevan lihavoitua ja kokoa 16,
voidaan tehdä seuraavanlainen tyylimäärittely:
nav { font-weight: bold; font-size: 16px; }
21
Valitsin nav kertoo, että tyyliä käytetään kaikkiin nav-elementteihin. Aaltosulkeiden sisällä olevat määrittelyt erotetaan toisistaan puolipisteillä. Yksi määrittely
koostuu ominaisuudesta ja sille annettavasta arvosta.
2.3 jQuery
jQuery on ilmainen, avoimen lähdekoodin JavaScript-kirjasto, jonka tarkoituksena on helpottaa JavaScriptin käyttöä verkkosivuilla. jQueryn valtteja ovat keveys, nopeus ja helposti ymmärrettävä syntaksi, mikä tekeekin siitä maailman
suosituimman JavaScript-kirjaston. jQuery on yhteensopiva kaikkien selainten
kanssa.
jQueryn syntaksi on suunniteltu helpottamaan DOM-elementtien (Document
Object Model) käsittelyä, animaatioiden tekoa, toimintojen hallintaa ja Ajaxsovellusten (Asynchronous JavaScript and XML) kehittämistä. Lisäksi jQuery
tarjoaa kehittäjille mahdollisuuden rakentaa kirjastoon liitännäisiä. Liitännäiset
mahdollistavat toimiviksi havaittujen ratkaisuiden käyttämisen useissa eri projekteissa sekä niiden jakamisen verkossa. jQueryn liitännäisiä ovat esimerkiksi
erilaiset kuvagalleriat, animaatiot, efektit, valikot, sekä navigaatiot. (8.)
Verkkosivuille jQueryn saa käyttöön lisäämällä sivun lähdekoodiin linkin joko
sivuston omalle palvelimelle ladattuun tai esimerkiksi Googlen tai Microsoftin
palvelimella sijaitsevaan jQuery-tiedostoon.
Esimerkki jQueryn käyttöönotosta:
<script src="jquery.js"></script>
tai
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2
/jquery.min.js"></script>
Ensimmäisessä koodiesimerkissä on lisätty linkki sivuston juurihakemistossa
olevaan jquery.js-tiedostoon ja toisessa esimerkissä linkki viittaa Googlen palvelimella sijaitsevaan tiedostoon.
22
Jotta varmistetaan sivuston toimivuus myös tilanteessa, jossa Googlen palvelimella sijaitseva jQuery päivittyy uudempaan versioon ja linkki lakkaa toimimasta, on sivustolla aina hyvä olla myös linkki paikalliseen jQuery-tiedostoon.
2.4 PHP
PHP on yleiskäyttöinen avoimen lähdekoodin ohjelmointikieli, joka on alun perin
suunniteltu web-ohjelmointiin, kuten dynaamisten verkkosivujen toteuttamiseen.
PHP on palvelinpohjainen ohjelmointikieli, mikä tarkoittaa sitä, että koodi suoritetaan palvelimella käyttäjän koneen sijaan. Tämän ansiosta käyttäjän ei tarvitse asentaa koneelleen mitään vaan PHP toimii selaimesta ja käyttöjärjestelmästä riippumatta samalla tavalla. Koska verkkosivulla oleva PHP-koodi suoritetaan
palvelimella ennen kuin se lähetetään käyttäjän selaimeen, ei PHP:llä kirjoitettua koodia näe sivuston lähdekoodista.
Verkkosivustoilla PHP:tä käytetään useimmiten tietokantatoimintoihin, kirjautumistoimintoihin ja sivuston sisällön muotoilemiseen ennen selaimelle lähetystä.
2.5 MySQL
MySQL on maailman suosituin avoimen lähdekoodin relaatiotietokantojen hallintajärjestelmä. Se on yleisimmin käytetty järjestelmä tiedon tallentamiseen
verkkosivuilla. MySQL järjestelmää käyttää moni tunnettu verkkopalvelu kuten
Google, Wikipedia, YouTube, Facebook ja Twitter. Suurin osa palvelintilaa tarjoavista webhotelli-palveluista sisältää tuen MySQL-tietokannoille.
Tyypillinen MySQL-tietokanta koostuu useasta taulusta, jotka ovat yhteydessä
toisiinsa. Taulut koostuvat tietueista, joiden tyyppi vastaa niihin tallennettavaa
tietoa: teksti, luku, merkkijono, päivämäärä, ja aika Tietokannasta sekä haetaan
että poistetaan, muokataan ja tallennetaan tietoa käyttämällä kyselyitä. Kysely
on yleensä muotoa: taulu johon kysely kohdistetaan, tietueet joita kysely koskee
ja kyselyä tarkentavat parametrit.
2.6 TinyMCE
TinyMCE (Tiny Moxiecode Content Editor) on alustariippumaton, avoimen lähdekoodin, web-pohjainen WYSIWYG-editori (What You See Is What You Get),
23
joka tarkoittaa sitä, että editorissa muokattava sisältö näyttää hyvin samanlaiselta kun lopputulos. (9.)
TinyMCE:llä on mahdollista muuttaa HTML-tekstialue tai joku muu HTMLelementti muokattavaksi sisällöksi. Siitä löytyy HTML-muotoilutyökalut, kuten
lihavointi, kursivointi, alleviivaus, listat, jäsentely sekä kuvien ja videon lisääminen tekstin sekaan ja paljon muuta. Eri muokkaustyökalujen määrän voi määritellä sivu- ja elementtikohtaisesti. Kuvassa 2.8 näkyy TinyMCE-editori ja sen
kaikki muotoilutyökalut.
Kuva 2.8. TinyMCE-editori.
Suurinta osaa kuvassa näkyvistä työkaluista ei normaali käyttäjä tule koskaan
tarvitsemaan, ja siksi onkin hyvä, että pystytään asettamaan näkyville vain ne
työkalut, joita käyttäjä tarvitsee.
24
2.7 Sublime Text 2
Sublime Text 2 on nopea ja laajasti muokattavissa oleva koodieditori, joka tukee
yli neljääkymmentä eri ohjelmointikieltä. Sublime Text 2:sta löytyy useita ominaisuuksia, jotka helpottavat ja nopeuttavat koodin kirjoittamista:
-
Minimap. Esikatselu kirjoitetusta koodista ja mahdollisuus siirtyä valittuun
kohtaa klikkaamalla.
-
Mahdollisuus valita ja muokata useita kohtia koodista samanaikaisesti.
-
Runsaasti pikanäppäimiä ja mahdollisuus asettaa omia.
-
Muokattava ulkoasu: värit, fontit, tekstin koko.
-
Tehokkaan hakuominaisuudet.
-
Makrot eli ohjelmoitavat komentosarjat ja valmiit koodinpätkät.
-
Tiedostojen rinnakkaiseditointi.
-
Laaja valikoima lisäosia.
Yksi esimerkki Sublime Text 2 ulkoasun muokattavuudesta on sen syntaksinkorostuksen väriteemat. Erilaisia väriteemoja löytyy oletuksena 22 kappaletta ja
niitä on mahdollista ladata lisää. Kuvassa 2.9 on nähtävillä neljä erilaista värivaihtoehtoa CSS-tyyliohjekielen syntaksinkorostukselle.
Kuva 2.9. Syntaksinkorostuksen värivaihtoehtoja CSS-tyyliohjekielelle.
25
Kuvassa näkyy kaksi tummalla taustalla ja kaksi vaalealla taustalla olevaa väripohjaa. Tumma tausta rasittaa vähemmän silmiä hämärässä tilassa työskenneltäessä kun taas vaalea voi olla parempi kirkkaassa ympäristössä. Taustan lisäksi fontin väri voi olla joko pehmeän pastellinsävyinen tai hyvin silmille hyppäävän kirkas.
Kuvassa 2.10 on nähtävillä Sublime Text 2:sta löytyvä koodin esikatselu, joka
sijaitsee koodieditorin oikeassa laidassa. Esikatselun avulla on nopea siirtyä
koodin eri osioiden välillä.
Kuva 2.10. Koodin esikatselukartta.
Väriteemojen, lisäosien, ja muokattavien pikanäppäimien ansiosta Sublime Text
2 on muokattavissa omia mieltymyksiään vastaavaksi. Ja jos siitä oletuksena
puuttuu jokin ominaisuus, on suuri mahdollisuus, että joku on tehnyt tästä ominaisuudesta lisäosan ladattavaksi.
26
2.8 Adobe Photoshop ja Illustrator
Photoshop on Adobe Systemsin kehittämä kuvankäsittelyohjelma, joka sisältää
kattavat ominaisuuden piirtämiseen, kuvien manipulointiin sekä 3D-grafiikan
tekoon.
Adobe Illustrator on ohjelma vektorigrafiikan piirtämiseen, joka on kehitetty digitaalisen grafiikan kuten logojen ja typografian tuottamiseen.
2.9 Selaimet
Selaimet ovat tietokoneohjelmia, joilla voidaan katsella ja käyttää verkkosivuja
sekä muuta internetistä löytyvää sisältöä. Suosituimpia selaimia ovat Google
Chrome, Mozilla Firefox, Microsoft Internet Explorer, Opera Software Opera ja
Apple Safari. Kaaviossa 2.1 on nähtävillä selainten markkinaosuuksien muutokset neljän vuoden ajalta.
Selainten markkinaosuudet 10.2008 - 10.2012
70%
60%
50%
IE
Firefox
40%
Chrome
Safari
30%
Opera
Other
20%
10%
0%
Kaavio 2.1. Selainten markkinaosuudet 2008 - 2012. (Tiedot: statscounter.com)
Kaaviosta näkyy selvästi, kuinka Internet Explorer on menettänyt tasaisesti
markkinaosuuttaan Google Chromelle sen tultua markkinoille syyskuussa 2008.
Syitä Internet Explorerin suosion laskulle ovat sen huono tuki uusille tekniikoille,
kuten HTML5, tietoturvaongelmat sekä heikko muokattavuus.
27
Tässä opinnäytetyössä HTML5 on tärkeässä osassa, joten kunkin selaimen tuki
HTML5-standardille on selvitetty käyttämällä html5test.com-sivuston tarjoamaa
testiä. Testi selvittää, kuinka suurta osaa HTML5:n ominaisuuksista ja toiminnoista selain tukee, ja antaa tämän perusteella pisteitä. Pisteiden avulla on hyvä
vertailla selaimia ja niiden eri versioita toisiinsa. Kaaviosta 2.2 on nähtävissä
suosituimpien selainten saamat pisteet HTML5-testistä.
Selainten saamat pisteen html5test.com testistä
500
450
434
374
400
372
Chrome 22
350
319
Opera 12
300
Firefox 16
250
200
138
150
Safari 5
Internet Explorer 9
100
50
0
Chrome 22
Opera 12
Firefox 16
Safari 5
Internet
Explorer 9
Kaavio 2.2. Selainten saamat pisteet html5test.com – testistä.
Kaaviosta selviää, että Internet Explorer 9:n HTML5-tuki on selvästi moderneja
selaimia jäljessä. HTML5:n ominaisuuksia käytettäessä onkin varauduttava siihen, etteivät nämä ominaisuudet toimi halutulla tavalla Internet Explorerselaimella.
3 Suunnittelu ja toteutus
Sivuston suunnittelu aloitettiin pitämällä palaveri Lieksan kaupunkikeskusyhdistyksen yhteyshenkilön kanssa. Palaverissa ideoitiin alustavasti sivuston ulkonäköä ja toimintoja sekä keskusteltiin siitä, kuinka paljon on mahdollista toteuttaa
kiireellisessä kahden kuukauden aikataulussa.
28
3.1 Asiakkaan toiveet
Aloituspalaverin pohjalta syntyneet ideat otettiin käsittelyyn yhdistyksen sisäisessä palaverissa, jossa saatiin aikaan kevyt vaatimusmäärittely eli lista sivustolle halutuista ominaisuuksista ja toiminnoista:
-
Kuvaesitys: mahdollista avata kattamaan koko näytön.
-
Yhdistyksen jäsenten nimet esillä etusivulla.
-
Helposti päivitettävät sisältöelementit: ajankohtaista, jäsenet, faktat.
-
Mahdollisuus laittaa sivustolle mainoksia tarpeen tullen.
-
Lieksan perustaja Pietari Brahe jotenkin esillä.
-
Tyylikäs ulkoasu ja lämpimät värit.
-
Sivut: Etusivu, Lieksa fakta, Jäsenet, Linkit, Palaute, Arkisto, Kuvagalleria.
Tärkeimmiksi ominaisuuksiksi mainittiin kuvaesitys ja helppo päivitettävyys. Mikään listatuista ominaisuuksista ei vaikuttanut liian vaikealta tai aikaa vievältä
toteuttaa, joten listan pohjalta oli hyvä aloittaa sivuston ulkoasun ja toimintojen
suunnittelu.
3.2 Ulkoasu
Asiakas toivoi sivustolle tyylikkään ulkoasun ja lämpimät värit, joten mitään suuria rajoitteita suunnittelulle ei ollut. Ulkoasua lähdettiin suunnittelemaan käyttäen
apuna yhdistykseltä saatua kuvamateriaalia ja listaa halutuista ominaisuuksista.
Rakenne
Ensimmäiseksi suunniteltiin sivuston perusrakenne eli elementtien asettelu sivulla. Elementtien asettelusta tehtiin neljä mallipohjaa, joista asiakas sai valita
mieleisensä (Kuva 3.1). Valitun asettelumallin HTML5-elementit ovat: header,
aside, article, nav ja footer (kuva 3.2). Näitä rakenne-elementtejä ympäröivät
muotoilusta vastuussa olevat div-elementit. Asiakkaalle ilmoitettiin, että asettelumalleissa käytetyt värit ja fontit oli valittu vain havainnollistamaan tulevaa sisältöä ja ne olisi vaihdettavissa toiveiden mukaisiksi.
29
Kuva 3.1. Asiakkaan valitsema asettelumalli.
Kuva 3.2. Asettelumallin HTML5-elementit.
Sivuston rakenteesta tehtiin hyvin joustava muutoksille. Elementtien kokoa on
helppo muokata myöhemmässäkin kehitysvaiheessa ja niitä on mahdollista lisätä tai poistaa tarpeen tullen.
30
Värit ja Fontit
Sivuston värit valittiin asiakkaan toiveiden mukaan. Asiakkaalle tehtiin seitsemän erilaista lämpimistä väreistä koostuvaa värimallia sekä tyhjä pohja, johon
oli mahdollisuus joko yhdistellä värejä muista pohjista tai vaikka valita kaikki
värit itse.
Sivuston väreiksi valittiin: vaalea vihreä, oranssi, sekä vaalea harmaa (Kuva
3.3.).
Kuva 3.3. Sivustolle valitut värit.
Sivuston fontiksi otsikkoihin valittiin Open Sans sans-serif ja teksteihin Helvetica
Neue sans-serif.
3.3 Logo
Lieksan kaupunkikeskusyhdistyksellä ei ole virallista logoa vaan yhdistyksen
tunnuksena on käytetty Pietari Brahea. Pietari Brahe haluttiin sivustolle jotenkin
esille, joten siitä päätettiin tehdä logo. Logoa lähdettiin tekemään asiakkaan
lähettämästä Pietari Brahen patsaan kuvasta (kuva 3.4).
31
Kuva 3.4. Pietari Brahen patsas.
Kuva muutettiin Adobe Illustrator -ohjelmalla vektorigrafiikaksi. Logosta tehtiin
kaksi versiota: mustavalkoinen ja harmaasävyinen (kuva 3.5).
Kuva 3.5. Harmaasävyinen ja mustavalkoinen logo.
Logot tallennettiin SVG-formaattiin, jotta niitä voisi käyttää monessa eri koossa
ilman, että tiedostokoko kasvaisi tai laatu kärsisi. Harmaasävyinen logo asetettiin sivuston vasempaan alareunaan taustakuvaksi ja mustavalkoista logoa oli
tarkoitus käyttää sivuston otsikossa.
3.4 Sivukartta
Sivusto koostuu seitsemästä navigaatiossa näkyvästä sisältösivusta sekä sisäänkirjautumissivusta.
32
Etusivu
Etusivulla tiedotetaan ajankohtaisista asioista sekä tulevista tapahtumista. Etusivun alaosassa on animaatio, jossa pyörii yhdistyksen jäsenten nimet.
Muokattavia elementtejä ovat ajankohtaiset asiat, yhteystiedot sekä jäsenluettelo.
Lieksa-fakta
Lieksa-fakta sivulla on yleistä tietoa Lieksasta.
Jäsenet
Jäsenet-sivulla esitellään yhdistyksen jäsenyritykset ja henkilöt.
Linkit
Linkit-sivu sisältää Lieksaan liittyviä hyödyllisiä linkkejä.
Palaute
Palaute-sivulla on mahdollista lähettää yhdistykselle palautetta.
Kuvagalleria
Kuvagalleriassa on nähtävillä kuvia Lieksasta sekä yhdistyksen järjestämistä
tapahtumista. Kuvia on mahdollista selata nuolinäppäimillä ja avata kattamaan
koko ruudun klikkaamalla tai painamalla enter-näppäintä.
Kirjautumisen jälkeen on mahdollista lähettää kuvia, joko selaa painikkeella tai
raahaamalla ja pudottamalla kuva selainikkunaan.
Admin
Admin-sivu on sisällönhallintaan kirjautumista varten. Sivulla kysytään käyttäjätunnusta ja salasanaa, jonka jälkeen käyttäjän on mahdollista muokata sivujen
sisältöä sekä lähettää kuvagalleriaan kuvia.
33
3.5 Sisällönhallinta
Sivuston sisällönmuokkaamisen haluttiin olevan mahdollisimman helppoa ja
onnistuvan ilman laajempaa tietoteknistä osaamista. Mikään valmis sisällönhallintaohjelmisto ei sopinut asiakkaan tarpeisiin, sillä sisällön muokkaamisen täytyi onnistua suoraan sivustolta eikä erillisen hallintaosion kautta kuten useissa
valmiissa ratkaisuissa.
Sivuston sisällönhallinta toteutettiin TinyMCE-editorin ja MySQL-tietokannan
yhteistyöllä. Kaikki sivuston muokattava sisältö on tallennettuna MySQLtietokantaan, josta se ladataan sivulle PHP:n avulla. Sivustolle kirjautumisen
jälkeen jokaisen muokattavan sisältöelementin yhteyteen lisätään nappi, jota
painamalla kyseisen elementin sisältö avautuu muokattavaksi TinyMCEeditoriin. Kun halutut muokkaukset on tehty, painetaan tallenna-painiketta ja
muutokset päivittyvät tietokantaan.
3.6 Tietokanta
Sivuston sisällönhallintaa varten tehtiin tietokanta, joka koostuu yhdeksästä taulusta. Jokaista sivuston sisältösivua varten tehtiin oma taulu, johon kunkin sivun
muokattava sisältö tallennetaan ja josta se haetaan sivustolle. Tämän lisäksi
kuvagalleriaan ladattujen kuvien tietojen sekä mainoselementtien sijaintien tallentamista varten tehtiin omat taulut (kuva 3.6).
Kuva 3.6. Sivuston tietokannan taulut.
34
3.7 Käyttöympäristö
Palvelintila sivustolle hankittiin INT2000-webhotellipalvelusta. INT2000 on
vuonna 2000 toimintansa aloittanut webhotellipalvelu, joka tarjoaa sopivia palvelupaketteja niin suurten kuin pientenkin yritysten sekä yksityishenkilöiden tarpeisiin.
Sivustoa
varten
valittuun
palvelupakettiin
kuuluu:
cPanel-
hallintaohjelmisto, PHP-tuki, MySQL-tietokanta, 20 sähköpostilaatikkoa sekä
2.5 gigatavua levytilaa. Sivustolle rekisteröitiin verkko-osoite: lieksankaupunkikeskusyhdistys.fi. Sivuston käyttöympäristö on esitelty kuvassa 3.7.
Kuva 3.7. Käyttöympäristö
Kehittäjä hallitsee sivuston tiedostoja ja tietokantaa sekä sähköpostitilejä ja palvelimen asetuksia cPanel-ohjelmiston avulla. Ylläpitäjä lisää ja muokkaa sivuston sisältöä, kuten kuvia ja tekstejä sivuston hallintaan kirjautumalla. Käyttäjä
katselee sivuja valitsemallaan selaimella.
35
4 Ratkaisun esittely
Kun sivuston ulkoasu ja toiminnot oli saatu valmiiksi, sivusto siirrettiin palvelimelle asiakkaan nähtäväksi ja kokeiltavaksi. Lieksan kaupunkikeskusyhdistyksen hallitus oli tyytyväinen sivuston ulkoasuun ja toimintaan. Uuden sivuston
ulkoasu on nähtävissä kuvassa 4.1. Sivustolle saatiin toteutettua kaikki asiakkaan toivomat ominaisuudet yhtä lukuun ottamatta. Aikataulusyistä mahdollisuutta mainoselementtien lisäämiseen tulevaisuudessa ei ehditty toteuttaa.
Ominaisuus luvattiin kuitenkin lisätä sivulle tulevaisuudessa.
Kuva 4.1 Sivuston ulkoasu.
Kuvassa näkyy ”yhteystiedot”-kentän yläpuolella oleva kuva-animaatio, vihreällä
pohjalla oleva ”jäsenet”-animaatio, joka käy läpi listaa yhdistyksen jäsenistä,
sekä mustavalkoinen logo otsikkopalkissa ja harmaasävyinen logo sivuston
taustakuvana.
4.1 Skaalautuva rakenne
Sivustolle toteutettiin CSS3:n ominaisuuksien avulla skaalautuva rakenne, mikä
tarkoittaa sitä, että sivuston elementtien koko ja sijainti mukautuu käytettävän
päätelaitteen näytön tai selainikkunan koon mukaan. Kuvassa 4.2 on nähtävillä
sivuston asettelu alle 800 kuvapistettä leveässä näytössä.
36
Kuva 4.2. Sivuston ulkoasu kapealla näytöllä.
Kuten kuvasta näkyy, sivuston elementtien asettelu mukautuu kapeaan näyttöön sopivaksi järjestelemällä elementit päällekkäin. Myös osa kuvista piilotetaan.
Skaalautuvan rakenteen ansiosta sivustoa on hyvä selata mobiililaitteila, koska
sisältö mahtuu leveyssuunnassa kokonaan näyttöön ja ”zoomaamiselle” ei ole
tarvetta.
37
4.2 Tekstisisällön lisäys ja muokkaus
Sivuston tekstisisältö on tehty helposti muokattavaksi TinyMCE-editorin avulla.
Sisäänkirjautumisen jälkeen käyttäjä ohjataan etusivulle, jossa ilmoitetaan, että
on mahdollista muokata sivun sisältöä tai kirjautua ulos.
Sivun jokaisen muokattavan elementin alapuolelle ilmestyy sisäänkirjautumisen
jälkeen ”muokkaa”-painike, jota painamalla elementin sisältö avautuu TinyMCEeditoriin (kuva 4.3). Muokkausten jälkeen ”tallenna”-painike päivittää sisällön
tietokantaan.
Kuva 4.3. Muokattava elementti.
TinyMCE-editorin muokkaustyökaluiksi on valittu perinteiset tekstin lihavointi-,
kursivointi-, ja alleviivaustyökalut sekä työkalut otsikoiden ja tekstikappaleiden,
kuvien, listojen sekä erikoismerkkien lisäämiseen.
4.3 Kuvagalleria
Sivuston kuvagallerian toteuttamiseen ei päätetty käyttää mitään valmista ratkaisua vaan se tehtiin alusta loppuun itse. Kuvagalleriaan on sisäänkirjautumisen jälkeen mahdollista lähettää kuvia. Lähetettävä kuva valitaan selaa painikkeella ja lähetetään palvelimelle painamalla ”lähetä”-painiketta. Kuva pienenne-
38
tään lähetettäessä kokoon 1280x800 kuvapistettä ja siitä tehdään myös
100x100 kuvapisteen pikkukuva kuvien selausta varten. Kuvassa 4.4 on nähtävillä sivuston kuvagalleria.
Kuva 4.4. Kuvagalleria
Gallerian kuvia on mahdollista selata joko klikkaamalla hiirellä pikkukuvia tai
nuolinäppäimillä. Jos käytössä on Google Chrome- tai Mozilla Firefox -selain,
valittu kuva on myös mahdollista avata kattamaan koko näytön klikkaamalla sitä
hiirellä tai painamalla ”enter”-näppäintä.
39
5 Yhteenveto ja pohdinta
Tämän opinnäytetyön tavoitteena oli toteuttaa moderni ja helppokäyttöinen internetsivusto Lieksan kaupunkikeskusyhdytys ry:lle ja samalla tutustua nykyaikaisiin web-ohjelmoinnin tekniikoihin.
Halusin oppia työtä tehdessä jotain uutta ja siksi päätin käyttää sivuston pohjana HTML5-tekniikkaa. Halusin myös käyttää sivuston toimintojen toteuttamiseen
tutun PHP-ohjelmointikielen lisäksi jQueryä, jonka käyttöä minun on pitkään
ollut tarkoitus opetella.
Työ toteutettiin todella nopealla aikataululla puolentoista kuukauden aikana.
Tänä aikana raporttia kirjoitettiin ja sivustoa koodattiin rinnakkain 8—10 tuntia
päivässä, mikä toi omat haasteensa työskentelylle. Kun esimerkiksi sivuston
teko pysähtyi odotettaessa ohjeita ja materiaaleja asiakkaalta, ei raportinkaan
kirjoittamiseen ollut materiaalia.
Tiukasta aikataulusta huolimatta työ saatiin valmiiksi ja tehty internetsivusto
vastasi sille asetettuja tavoitteita sekä asiakkaan toiveita. Sivustolle toteutettiin
helppokäyttöinen sisällönhallinta, moderni ulkoasu, kuvagalleria sekä erilaisia
animoituja elementtejä. Kehitettävääkin jäi, sillä kuvagallerian on tulevaisuudessa tarkoitus lisätä toiminnot kuvien poistamiselle, kuvien esitysjärjestyksen
muuttamiselle sekä usean kuvan yhtäaikaiselle lähettämiselle. Myös mahdollisuus mainoselementtien lisäämiseen sivustolle jäi tulevaisuudessa toteutettavien asioiden listalle.
Työtä tehdessä opin paljon uutta HTML5:stä sekä jQuerystä ja tulen käyttämään kyseisiä tekniikoita myös tulevissa verkkosivuprojekteissani.
40
Kuvat
Kuva 1.1. Ohjelmistotuotannon vesiputousmalli, s. 8
Kuva 2.1. Tekniikat verkkosivulla, s.9
Kuva 2.2. SVG-tekniikalla piirretty ympyrä, s. 14
Kuva 2.3. Canvas-elementille piirretty kolmio, s.15
Kuva 2.4. Verkkosivun rakenne HTML5-elementeillä, s. 17
Kuva 2.5. Verkkosivun article-elementti, s. 19
Kuva 2.6. Päivämäärä syötetyyppi, s. 20
Kuva 2.7. Sähköpostikentän tarkistus, s. 21
Kuva 2.8. TinyMCE-editori, s. 24
Kuva 2.9. Syntaksinkorostuksen värivaihtoehtoja CSS-tyyliohjekielelle, s. 25
Kuva 2.10. Koodin esikatselukartta, s. 26
Kuva 3.1. Asiakkaan valitsema asettelumalli, s. 30
Kuva 3.2. Asettelumallin HTML5-elementit. s.30
Kuva 3.3. Sivustolle valitut värit, s. 31
Kuva 3.4. Pietari Brahen patsas, s. 32
Kuva 3.5. Harmaasävyinen ja mustavalkoinen logo, s. 32
Kuva 3.6. Sivuston tietokannan taulut, s. 34
Kuva 3.7. Käyttöympäristö, s. 35
Kuva 4.1 Sivuston ulkoasu, s. 36
Kuva 4.2. Sivuston ulkoasu kapealla näytöllä, s. 37
Kuva 4.3. Muokattava elementti, s. 38
Taulukot
Taulukko 2.1. Selaimien tukemat videoformaatit, s. 11
Taulukko 2.2. Selaimien tukemat audioformaatit, s. 12
Kaaviot
Kaavio 2.1 Selainten markkinaosuudet 2008–2012, s.24
Kaavio 2.2. Selainten saamat pisteet html5test.com-testistä, s. 25
41
Lähteet
1. Muropaketti.com: W3C: HTML 5 viralliseksi suositukseksi 2014.
http://muropaketti.com/w3c-html-5-viralliseksi-suositukseksi-2014.
Luettu 20.10.2012.
2. Wikipedia.org: Scalable Vector Graphics.
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics. Luettu 25.10.2012.
3. W3schools.com: HTML5 Canvas.
http://www.w3schools.com/html/html5_canvas.asp. Luettu 25.10.2012.
4. W3schools.com: HTML5 Web Storage.
http://www.w3schools.com/html/html5_webstorage.asp. Luettu 26.10.2012.
5. W3schools.com: HTML5 Application Cache.
http://www.w3schools.com/html/html5_app_cache.asp. Luettu 26.10.2012.
6. W3schools.com: HTML5 Web Workers.
http://www.w3schools.com/html/html5_webworkers.asp. Luettu 28.10.2012.
7. W3C HTML Working Group: HTML5 specification.
http://www.w3.org/TR/html5/. Luettu 29.10.2012.
8. Wikipedia.org: jQuery.
http://en.wikipedia.org/wiki/Jquery. Luettu 1.11.2012.
9. Tinymce.com: TinyMCE.
http://www.tinymce.com/. Luettu 2.11.2012.
42