1
1 Johdanto
Tämän päivän surffailu verkossa eroaa huomattavasti siitä, mitä se oli vielä reilu kymmenen vuotta sitten, kun tavallisilla ihmisillä oli ensimmäistä kertaa mahdollisuus siihen tutustua. Kehitys on ollut nopeaa ja yhä monipuolisempia, monimutkaisempia ja visuaalisesti rikkaampia sivuja ilmestyy jatkuvasti.
Websivut voidaan jakaa karkeasti kahteen päätyyppiin: staattisiin ja dynaamisiin sivuihin. Staattisten sivujen sisältö pysyy aina samana, kun taas dynaamisilla sivuilla voidaan näyttää eri sisältöä riippuen vaikka vierailijan selaimesta, kansallisuudesta, vierailuajankohdasta tai käyttäjästatuksesta (rekisteröitynyt käyttäjä / satunnainen vierailija).
Staattiset sivut luodaan HTML- ja CSS-kielillä ja dynaamisuus rakennetaan näiden päälle käyttäen esimerkiksi JavaScript- ja PHP-kieliä.
JavaScriptia käytetään, kun halutaan sivujen ja käyttäjän välille suoraa vuorovaikutteisuutta, kuten esimerkiksi navigointivalikon aukaisu, kun käyttäjä vie hiiren osoittimen valikon päälle. PHP:tä tarvitaan, kun halutaan käsitellä esimerkiksi tietokantoja ja kaavakkeita.
Nykyaikaiset web-palvelut muistuttavat yhä enenevissä määrin selainikkunassa toimivia ohjelmia. Palvelut rakentuvat monesta kerroksesta alkaen usein tietokannasta, johon käyttäjä tekee hakuja web-sivun toimiessa rajapintana käyttäjän ja tietokannan välillä. Kaikki tämä on toteutettavissa kaikkine välivaiheineen ilmaisilla tekniikoilla.
Alunperin tämän työn oli tarkoitus kertoa vain web-sivujen tyylistä vastaavasta CSS-kuvauskielestä, joten se on tässä esityksen selvässä pääosassa. Tähän esitykseen liittyy myös suoraan web-sivu, johon on sisällytetty suullisen esityksen tukena ollut Power Point-tyylinen diaesitys, sekä tämä kyseinen kirjallinen osuus. Tarkemmat ohjeet työhön tutustumiseen löytyvät kyseiseltä sivulta, joko osoitteesta http://koti.mbnet.fi/juke82/lopputyo2007/ tai vaihtoehtoisesti oheiselta CD-levyltä.
2
2 MySQL
Yhä useampi websivu tänä päivänä on periaatteessa vain eräänlainen hakukone, jolla tehdään hakuja sivuston tietokantaan. Tietokannat ovat kirjastoja, jotka voivat sisältää kuvia, videoita, ääntä, yhteystietoja, reseptejä, kaupan varastosaldoja ja oikeastaan ihan mitä tahansa sisältöä, mikä voidaan muuntaa digitaaliseen muotoon. Yleisellä tasolla tietokannan ei välttämä tarvitse olla edes digitaalinen. Esimerkiksi paperinen kalenteri tai puhelinluettelokin ovat tietokantoja.
Erittäin suosittu web-sivujen tietokantaratkaisu on PHP-ohjelmointikielen ja MySQL-tietokannan yhteiskäyttö. Sekä PHP, että MySQL ovat ilmaisia, nopeita, toimiviksi todettuja ja hyvin pitkälle alustariippumattomia. Kummallekin on myös maksullisia ja maksuttomia vaihtoehtoja, mutta edellä luetelluista syistä nämä ovat nykyään käytetyimpiä.
Tarkemmin sanottuna MySQL ( My Structured Query Language ) on relaatiotietokanta. Relaatiotietokannassa tieto on jaettu useisiin tauluihin, joissa on rivejä ja soluja. Taulut voivat olla sidoksissa toisiinsa monella tavalla. Esimerkiksi sivustolla voi olla tietokanta rekisteröityneistä käyttäjistä. Nämä käyttäjät on listattu yhteen tietokannan tauluun, jossa on käyttäjän nimi, ikä, yhteystiedot ja puhelinnumero. Tästä taulusta voidaan muodostaa toinen taulu jossa listataan vaikka kaikki Tampereella asuvat henkilöt, joiden ikä on yli 15 vuotta. Edellisessä taulussa yhdistyy kolme taulua: "ikä", "paikkakunta" ja "henkilön nimi".
MySQL:n loi vuonna 1995 suomalainen Michael "Monty" Widenius yhdessä ruotsalaisen David Axmarkin kanssa. MySQL:n ensimmäinen versio julkaistiin 1996 ( MySQL, Wikipedia ). Eräitä merkittävimpiä MySQL:n päälle rakennettuja palveluja ovat mm. Wikipedia, Yahoo! ja Google. Nykyään MySQL:n jatkokehityksestä vastaa Ruotsalainen MySQL AB.
Perinteisesti MyQSL:ää operoidaan oletuksena komentoriviltä, mutta nykyään tähän on tarjolla myös graafiset työkalut nimeltään MySQL GUI Tools. MySQL-tietokantaa voidaan hallita myös Internetin yli esim. ilmaisella phpMyAdmin ohjelmalla, joka on ohjelmoitu PHP:llä ja jota käytetään selaimella.
3
3 PHP
Kun käyttäjä ottaa selaimellaan yhteyttä websivun taustalla toimivaan tietokantaan, nämä tietokantahaut välitetään useimmiten ohjelmointikielellä nimeltään PHP ( PHP: Hypertext Preprocessor). PHP on C(++)-kieltä muistuttava palvelinpuolen ohjelmointikieli, joka on käytännössä näkymätön käyttäjälle. Yleensä ainoa asia, mistä käyttäjä näkee että sivuilla on käytetty PHP:tä on osoitteen perässä näkyvä .php-pääte.
.php-pääte kertoo myös palvelinohjelmistolle, että kyseinen tiedosto tulee käsitellä PHP-kääntäjässä. Kääntäjä suorittaa ohjelmakoodin ja rakentaa lopputuloksena käyttäjälle näkyvän lopullisen sivun. Vierailijalle näkyvästä lähdekoodista ei voi nähdä itse PHP-koodia, vaan pelkän lopputuloksen, kuten vierailijan pyytämän tietokantahaun tuloksen. Erotuksena tavanomaisiin ohjelmointikieliin, kuten vaikka C++-kieleen, PHP-koodi käännetään aina vasta tarvittaessa.
Tietokantojen ja kaavakkeiden käsittely on ehkä tärkein PHP:n käyttötapa, mutta se taipuu myös paljon muuhunkin. Useimmat nykyaikaiset sivut näkyvät loppukäyttäjälle vain yhtenä sivuna, kuten esimerkiksi www.esimerkki.fi/index.php, mutta todellisuudessa sivu on voitu rakentaa useammasta osasivusta, joita voidaan käyttää uudestaan niin kyseisellä sivulla, kuin muillakin sivuilla. Mm. sivun navigointi on voitu toteuttaa omana (X)HTML-tiedostonaan, joka voidaan sitten lisätä jokaiselle sivulle yhdellä lyhyellä PHP-koodin pätkällä:
<?php include("navigointi.html"); ?>
Listaus 1. Sivun navigoinnin sisällyttäminen sivuun
Sivun tekijä voi edellisellä tekniikalla koota sivunsa kuten palapelin ja lopputulos näkyy loppukäyttäjälle kuin se olisi vain yksi sivu. Tämä vähentää suuresti ylimääräistä työtä tilanteessa, jossa esimerkiksi em. navigointiin lisätään vaikka uusi linkki. Jos navigointi olisi toteutettu omana XHTML-koodinaan jokaiselle sivulle erikseen, täytyisi myös uusi linkki lisätä jokaiselle sivulle. Tämä olisi hyvin suuritöinen ja virhealtis tapa toimia. PHP-tekniikalla sivun tekijän tarvitsee lisätä uusi linkki vain kerran navigointi.html-tiedostoonsa ja se näkyy kaikilla sivuilla samalla tavalla.
4
4 JavaScript
Toisin kuin PHP, JavaScript on asiakaspuolen ohjelmointikieli. Tämä tarkoittaa sitä, että JS-koodi on nähtävissä selaimella, joka myöskin hoitaa koodin tulkitsemisen. Vaikka nimestä voisi muuta päätellä JavaScript-kielellä on hyvin vähän tekemistä Sun Microsystem:in kehittämän Java-ohjelmointikielen kanssa. Yhtäläisyydet rajoittuvat käytännössä C-ohjelmointikieltä muistuttavaan syntaksiin, eli "kielioppiin".
JavaScriptin kehitti selaimestaankin tuttu Netscape. Netscapen Navigator 2.0B3 (1995) oli myös ensimmäinen tätä teknologiaa tukenut selain (JavaScript, Wikipedia).
JavaScriptiä voidaan käyttää esimerkiksi vierailijan selaimen tunnistukseen, ponnahdusikkunoiden avaamiseen ja sivun reaaliaikaiseen reagointiin käyttäjän tekemisten perusteella. Mm. monilla websivuilla näkyvät, hiirellä laukaistavat ponnahdusvalikot on toteutettu usein JavaScriptiä käyttäen.
Juuri selaintunnistus on ehkä suosituin JavaScriptin käyttötapa tällä hetkellä. Vaikka HTML- ja CSS-koodin pitäisi näkyä kaikissa selaimissa samalla tavalla, näin ei kuitenkaan käytännössä koskaan ole ollut, vaan kaikilla selaimilla ja jopa selainten eri versioilla on ollut omat buginsa ja erikoisuutensa. Aiheesta myöhemmin lisää luvussa 6.
JavaScriptin tilanne nykypäivänä on jokseenkin ristiriitainen. Nykyään yhä useammat web-palvelut käyttävät hyödykseen nk. AJAX-tekniikkaa (Asynchronous JavaScript and XML), jolla voidaan pitää yhteyttä palvelimen ja käyttäjän lataaman sivun välillä ilman, että käyttäjän täytyy ladata sivua uusiksi jokaisen muutoksen jälkeen. Tämä mahdollistaa yhä dynaamisempien ja saumattomampien palveluiden rakentamisen. Toisaalta yhä useammat käyttäjät sulkevat selaimistaan koko JavaScriptin pois käytöstä sen raskauden tai tekniikan mahdollistamien hyökkästen pelossa.
Web-sivun suunnittelijan onkin tärkeä muistaa tämä asia ja tehdä sivuistaan teknisesti alaspäin skaalautuvia. Seuraavassa esimerkissä varsinainen ohjelmaosuus on piilotettu HTML:n kommenttien sisään, jotta se ei häiritsisi selaimia, jotka eivät tue tai joista on kytketty pois käytöstä JavaScript:
5
<html>
<head>
<script language="JavaScript">
<!-- Koodi piilotetaan, jos selain ei käytä JavaScriptiä
function temp(form)
{
var f = parseFloat(form.DegF.value, 10);
var c = 0;
c = (f - 32.0) * 5.0 / 9.0;
form.DegC.value = c;
}
// Piilotus loppuu -->
</script>
</head>
<body>
<FORM>
<h2>Fahrenheitit Celsius-asteiksi:</h2>
Anna lämpötila Fahrenheitteina:
<INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15>
<p>
Paina tätä nappia laskeaksesi lämpötilan:
Celsius-asteina:
<INPUT NAME="calc" VALUE="Laske" TYPE=BUTTON
onClick=temp(this.form)>
<p>
Lämpötila Celsius-asteina:
<INPUT NAME="DegC" READONLY SIZE=15>
</FORM>
</body>
</html>
Listaus 2. Yksinkertainen, selaimessa toimiva Fahrenheit/Celsius-muunnin ( How does JavaScript work, Howstuffworks )
6
5 XHTML
Yhä enemmän nykyaikaiset websivut tehdään XHTML:n (eXtensible Hypertext Markup Language) pohjalle. XHTML eroaa vanhasta HTML:stä vain hieman. Suurimpana erona vanhempaan HTML:ään on kaiken sisällön muotoiluun liittyvän poistaminen syntaksista ja näin kielestä on saatu helpommin luettavaa, sekä ylläpidettävää. Oikeastaan voidaan sanoa, että XHTML on yksikertaistettua HTML:ää.
XHTML:ssä kaikki tagit, kuten esim.pääotsikolle varattu <h1>, täytyy aina sulkea käytön jälkeen vastaavalla sulkukutagilla </h1>:
<h1>Pääotsikko</h1>
Listaus 3. Pääotsikon merkitseminen XHTML:llä
XHTML noudattaa W3C:n XML (eXtensible Markup Language)-määritystä. W3C on riippumaton organisaatio, joka kehittää monia web-sivuilla käytettäviä kuvaus- ja ohjelmointikieliä. XHTML 1.0:sta on olemassa kolme eri tasoista määritystä, jotka eroavat toisistaan "tiukkuuden" mukaan: Frameset, Transitional ja Strict. Tämä esitys on laadittu käyttäen XHTML 1.0 Strict-määritystä, joka on 1.0 standardin tarkin muoto. Uusin versio XHTML-kielestä tällä hetkellä on XHTML 1.1, josta on siivottu viimeisetkin sisällön muotoiluun liittyvät osat.
<div class="sivunumero">1</div>
<p><em>1 Johdanto</em></p>
<p>
Tämän päivän surffailu verkossa eroaa huomattavasti siitä, mitä se oli...
</p>
Listaus 4. Ote XHTML-koodista tämän esityksen alusta
7
6 CSS
Jatkuva verkkosivujen kehitys ja monipuolistuminen tuovat haasteita ja ongelmia sivujen suunnittelijoille. Vähäisin näistä ei varmastikaan ole sivujen visuaalisesta ilmeestä huolehtiminen.
Nykyaikaisten websivujen muotoilu on toteutettu tekniikalla joka tunnetaan nimellä CSS. CSS:llä onnistuu kaikki sivujen ulkoasuun liittyvä kirjasimen koon ja värin muuttamisesta aina koko sivun taittoon asti.
HTML:n alkuperäinen tarkoitus oli toimia tieteellisten julkaisujen pohjana kertomassa selaimelle mitä sisältöä näytetään. 90-luvun puolen välin tienoilla, kun Internet alkoi yleistymään kansan keskuudessa, heräsivät myös yritykset. Aluksi lähes kaikki WWW -sivut näyttivät samoilta: Harmaa tausta, musta teksti, siniset linkit ja ehkä muutama kuva. Yhtä sivustoa ei oikein voinut erottaa toisesta. Tämä oli tietenkin iso ongelma yrityksille, jotka halusivat suurimman mahdollisuuden näkyvyyden omille sivuilleen.
"Hätäratkaisuna" HTML:ään aloitettiin lisäämään sisällön muotoiluun tarkoitettuja komponentteja. Tämä oli ongelmallista, sillä HTML:ää ei oltu suunniteltu alunperin tähän tarkoitukseen. Alunperin yksinkertaisesta ja johdonmukaisesta kielestä tuli nopeasti hyvin vaivalloista ja vaikeasti luettavaa. Ongelmat vain jatkoivat kasvamistaan, kun WWW-sivut monipuolistuivat.
Yksityishenkilön pitämä WWW -sivu voi olla yksittäinen HTML -tiedosto, mutta yritysten sivut muodostuvat lähes poikkeuksetta kymmenistä, joskus jopa sadoista, alisivuista. Koska jok'ikisen tekstinpätkän, linkin, taulukon ja listan muotoilu piti tehdä yksitellen, kasvoivat sivujen ylläpitokustannukset koko ajan. Myös sivujen latautuminen hidastui. Modeemiyhteyksien aikana tämä oli iso ongelma.
Käytössä oli myös paljon selainkohtaisia laajennuksia websivujen muotoiluun, jotka olivat omiaan lisäämään sekaannusta ja ongelmia sivujen suunnittelussa.
Herrat nimeltään Håkon Wium Lie ja Bert Bos toivat ongelmaan ratkaisun nimeltään CSS. Cascading Style Sheets eli kaskadiset ( portaittaiset ) tyylisivut kertovat selaimelle miten sivun sisältö tulee näyttää. Suurin ero aikaisempaan, HTML-koodissa tehtyyn tapauskohtaiseen muotoiluun oli mahdollisuus vaikuttaa koko sivuston ulkoasuun pienimmillään vain yhdellä käskyllä.
8
<style type="text/css">
.punainen {color: red;}
</style>
<p>Tämä teksti on oletusvärillä.</p>
<p class="punainen">Tämä teksti on punaista.</p>
Listaus 5. Tekstin värin muuttaminen CSS:n avulla
Edellinen esimerkki näyttää web-sivulla seuraavalta:
Tämä teksti on oletusvärillä.
Tämä teksti on punaista.
Useimmiten CSS koodi on sijoitettuna omaan .css-päätteiseen tiedostoonsa, mutta se voidaan sijoittaa myös suoraan HTML tiedoston sisälle <style type="text/css"> tagilla. Tähän työhön liittyvällä verkkosivulla on toimittu jälkimmäisellä tavalla.
Nykyään tuorein virallinen versio CSS:stä on 2.1 ja sen jatkokehittelystä vastaa World Wide Web Consortium, eli W3C.
6.1 Taulukko- vs. CSS -taitto
Lähihistoriassa erittäin suosittu ja jokseenkin vielä tänä päivänäkin yleinen tapa toteuttaa websivun layout, eli taitto, on ollut niin kutsuttu taulukkotaitto. Siinä sivun eri osat on sijoitettu HTML <table> elementin sisään. Tällä tavoin sivu voidaan jakaa osiin, joita voidaan hallinnoida kuten Exel -taulukon soluja.
Taulukkotaiton suosio johtuu kahdesta syystä. Aiemmin se oli oikeastaan ainoa vaihtoehto toteuttaa esim. moneen kolumniin jaettuja sivuja järkevästi. Toinen syy on sen näennäinen yksinkertaisuus.
9
Taulukkotaitosta tulee ongelmallista, kun sivut kasvavat ja monipuolistuvat. Taulukon solut eivät voi olla korkeampia, kuin niiden viereiset solut tai leveämpiä, kuin ylä- ja alapuoliset solut. HTML-koodista muodostuu helposti myös tarpeettoman vaikealukuista. Tämä vaikeuttaa ja hidastaa sivujen tekoa, ylläpitoa sekä päivittämistä. Tällä tekniikalla syntyy usein myös tyhjiä soluja, koska niiden määrä riviä kohden täytyy aina olla sama.
Seuraavassa esimerkissä on esitellään CSS- ja taulukkotaiton eroa. Sivun tekijä haluaa otsikon vasempaan yläreunaan ja varsinaisen tekstin tämän alapuolelle oikealle.
10
Taulukkotaitto:
<table>
<tr>
<td><h1>Otsikko</h1></td>
<td>solu 1.2</td>
</tr>
<tr>
<td>solu 2.1</td>
<td><p>Sisältö</p></td>
</tr>
</table>
CSS -taitto:
CSS:
.sisalto {
float: right;
clear: both;
}
XHTML:
<h1>Otsikko</h1>
<p class="sisalto">Sisältö</p>
Listaus 6. Taulukko- ja CSS-taiton ero
11
Kumpikin edellä esitetty vaihtoehto näyttää valmiilla sivulla jotakuinkin tältä:
Otsikko (1.1) |
solu 1.2 |
| solu 2.1 |
Sisältö (2.2) |
Kuva 1. Edellä esitettyjen mallien lopputulos
Yllä kuvattu tilanne on aikalailla karrikoitu esimerkki, mutta se osoittaa aikasemmin mainitsemani taulukkotaiton ongelman hyvin: myös turhat, tyhjiksi jäävät solut 1.2 ja 2.1 on luotava, jotta taulukosta tulee "täydellinen". Jo näinkin lyhyestä esimerkistä pystytään helposti havaitsemaan, kuinka paljon vähemmän rakenteellista koodia tarvitsee kirjoittaa käyttäessä CSS -taittoa.
Taulukkotaiton ongelma on myös joustamattomuus. Normaalisti web-sivuja on selailtu vain tavallisilta pöytätietokoneilta, mutta yhä kasvavissa määrin surffailu esim. mobiililaitteilla lisääntyy. Kännykän pieni näyttö ei ole omimpiaan esittämään suurta määrää sisältöä vaakatasossa, joten usein sivuja joutuu vierittämään sivusuunnassa. Tämä tekee sivujen lukemisesta erittäin hankalaa ja epäkäytännöllistä.
CSS-pohjaisella taitolla pystytään helpommin ottamaan huomioon erilaiset laitteet, joita ihmiset käyttävät surffaukseen. Web-sivun tekijä voi jopa tehdä oman erillisen tyylisivun vain mobiilitteille.
6.2 Varjoja paratiisissa
Tosin aina ei CSS-pohjainen taittokaan ole pelkkää hattaraa ja vaahtokarkkeja. W3C:n suositukset ovat joskus tulkinnanvaraisia ja tämän johdosta kaikki selaimet eivät näytä samaa asiaa aina yksi yhteen. Myöskin selainkohtaiset bugit aiheuttavat harmaita hiuksia web-suunnittelijoille.
12
Suurin murhe web-suunnittelijan näkökulmasta tällä hetkellä on Microsoftin Internet Exlporer 6 -selain. IE6 ilmestyi vuonna 2001 samaan aikaan Windows XP-käyttöjärjestelmän kanssa ja se sisälsi runsaasti bugeja ja virheitä CSS:n käsittelyssä. Vuoden 2001 jälkeen selaimeen ei ole saatu kuin muutama tietoturvapäivitys kaikkien muiden toimintojen jäädessä joka kerta entiselle tolalleen. Ongelmaa vielä korostaa IE6:n ylivoimaisesti suurin markkinaosuus selaimissa, joka tosin on pikkuhiljaa korjaantumassa vaihtoehtoisten selainten, kuten Firefoxin ja Operan vallatessa asemia ja ihmisten tietoisuuden kasvaessa Internet Explorer:n lukuisista tietoturva-aukoista.
19.10.2006 julkaistiin IE7 ( Internet Explorer 7 for Windows XP Available Now, IEBlog ), joka korjasi suuren osan IE6:n räikeimmistä vioista CSS:n käsittelyssä, mutta koska kyseinen selain ei ole saatavilla muille alustoille, kuin Windows XP SP2:n ja Vista:n laillisille kopioille, ei sekään tuo suurempaa helpotusta sivujentekijöille vielä pitkään aikaan.
6.3 Selaintuki
Vuonna 1996 julkaistu Microsoftin Internet Explorer 3 oli ensimmäinen kaupallinen selain, joka tuki CSS:ää. Hieman myöhemmin perässä seurasi Netscape Navigator 4.0 ja vuonna 1998 Opera 3.5 (LIE, BOS. Cascading Style Sheets, designing for the Web 1999: luku 20). Ensimmäisen "selainsodan" voitettuaan, ja periaatteessa täydellisen markkinaosuuden Netscapelta vallattuaan, IE:n kehitys hidastui kaikilta osin. Tämän jälkeen Windows-puolella parhaan CSS-tuen tarjoavan selaimen tittelistä on kilpaillut hyvin tasaväkisesti Opera ja Firefox. Nykyinen Netscape Navigator on rakennettu Firefoxin selainmoottorin päälle, joten näillä selaimilla ei ole eroa CSS:n käsittelyssä.
Kesäkuussa 2006 julkaistu Opera 9.0 oli ensimmäinen Windows:lla toimiva selain, joka läpäisi ACID2-testin ( Acid2 Browser Test, The Web Standards Project ). ACID2-testi, joka myös tunnetaan "maailman vaikeimpana hymiönä", mittaa selaimen kykyä käsitellä oikeamuotoista HTML- ja CSS-koodia. Firefox:n arviolta joskus vuonna 2007 ilmestyvän version 3.0 on luvattu myös läpäisevän testin. Microsoft on ilmoittanut, että se ei koe testin läpäisemistä tärkeäksi tavoitteeksi ja täten IE7 ei testiä läpäise.
13
6.4 CSS:n käyttö esityksissä
Vuonna 1998 ilmestynyt CSS 2.0 toi mukanaan uuden omainaisuuden kieleen: laitekohtaiset tyylisivut. Tämä tarkoittaa sitä, että sivut voidaan näyttää eri tavalla riippuen siitä, millä laitteella niitä katsellaan. Erilaisia laitteita voivat olla esimerkiksi tavallinen työpöytä PC, mobiililaite kuten kännykän ruutu tai videoprojektori. Myöskin sivun tulostettavalle versiolle pystytään asettamaan omat tyylinsä.
Opera on lisännyt selaimeensa toiminnon, joka vaihtaa sivulla käytettävän tyylitiedoston normaaliversiosta projektoriversioon jos sellainen on tarjolla. Tämä mahdollistaa Microsoftin Power Point-esitysten kaltaisten esitysten sisällyttämisen suoraan websivuihin. Opera kutsuu tätä ominaisuutta nimellä Opera Show. Tätä ominaisuutta on käytetty myös tähän työhön liittyvässä diaesityksessä.
.sivunvaihto {
page-break-after: always;
}
h1 {
vertical-align: middle;
text-align: center;
margin-left: -2cm; /* Sisennys pois */
font-size: 20pt;
font-weight: bold;
}
h2 {
margin: 1em 2em 1em 0;
}
Listaus 7. Ote kirjallisen osuuden muotoilusta vastaavasta CSS-koodista
14
7 Tästä työstä
Tämä juuri lukemasi kirjallinen osa on siis vai yksi kolmannes koko lopputyöstäni. Kaksi muuta osaa ovat diaesitys ja websivu. Nämä kaikki on sisällytetty yhteen XHTML-dokumenttiin kuvat mukaan lukien. Työ on toteutettu käyttäen XHTML- ja CSS-kieliä.
XHTML:n versioksi valitsin 1.0 Strict:n mahdollisimman hyvän selaintuen takaamiseksi myös tulevaisuudessa. CSS:stä on käytetty sekaisin versioita 1-3. Koodin validius (standardinmukaisuus) on tarkaskastettu W3C:n tarjoamilla tarkistustyökaluilla Internetin välityksellä.
Kuvat on saatu sisällytettyä tiedostoon käyttämällä data: URI-tekniikkaa (Data: URI scheme, Wikipedia). Tekniikan etuna on tiedoston siirrettävyys, sillä nyt kuvien osoitetta ei tarvitse muokata dokumentin vaihtaessa paikkaa, vaan ne seuraavat aina mukana. Selkeä haittapuoli tässä tekniikassa on lähdekoodin sotkeentuminen vaikealukuiseksi. Olen pyrkinyt välttämään ylimääräisiä kuvia ja niitä ei täten löydykkään varsinaisen XHTML-koodin sisältä vaan ne kaikki on sijoittettu lähdekoodin alkupuolelle CSS-osioon.
15
8 Arvioiva päätäntä
Suurimmaksi vaikeudeksi tämän työn tekemiseen muodostui työkalujen puute. Erilaisia HTML- ja CSS-työkaluja kyllä löytyy satoja, jos ei tuhansia, mutta tämänlaisen yhdistelmäesityksen laatimiseen niitä ei vielä ole olemassa. Täten koko työ tuli laadittua, kuvat pois lukien, Windowsin Muistiolla ( Notepad ). Tästä syystä mm. kannen muotoilu, sisällysluettelon asettelu ja sivunumerot oli koodattava alusta loppuun käsityönä, mihin kului huomattavan paljon aikaa. CSS 3 on tuomassa paljon apua kirjallisten tuotosten muotoiluun, kuten helpon sivunumeroinnin sekä sisällysluettelossa näkyvät pisteviivoituksen, mutta työ on vielä pitkälti kesken, eikä selaintuki ole vielä kummoinen. Toisaalta diaesityksen laatiminen sekä nettisurffaajalle ensimmäisenä näkyvän sivun osuuden tekeminen oli suoraviivaista ja helppoa vapaamman asemoinnin johdosta.
Ennen tämän työn aloittamista MySQL ja JavaScript olivat suhteellisen tuntemattomia alueita minulle ja opinkin niistä paljon. Myöskin osaamiseni XHTML:n ja CSS:n osalta syveni. Olisin halunnut testata tätä työtä eri selaimilla ja eri käyttöympäristöissä mahdollisiman hyvän yhteensopivuuden takaamiseksi eri alustoilla, mutta tähän ei aika yksinkertaisesti riittänyt.
Aihepiirin laajennuksen pelkästä CSS:stä koin tarpeelliseksi, koska pelkäsin suullisesta esityksestä tulevan liian kuivaa kuunneltavaa. Rajanveto oli kuitenkin hankalaa, mitä kaikkea sisällyttää esitykseen, ja lopulta päätin olla menemättä MySQL:ää syvemmälle. Esim. Apache-palvelinohjelmisto olisi ansainnut oman osansa esityksestä.
