Kootut selitykset

Eli miksi nämä sivut ovat sellaiset kuin ovat.

Sivuston tarkoitus on edistää maailman Teppo-tietoutta. Annan sen osoitteen satunnaisille tapaamilleni ihmisille, ja he voivat käydä täällä tutustumassa minuun ja viihtymässä pelien parissa. Seuraavalla tapaamisella he toivottavasti ajattelevat hiukan myönteisemmin minusta. Olen jo painanut yhteen t-paitaani verkko-osoitteen...

Tärkein suunnittelutavoite on ollut standardinmukainen koodi, jotta sivut varmasti toimivat kaikissa tulevissakin selaimissa. Y2K-ongelmasta opittiin, että koodi saattaa elää pitkään. Niinpä olen ajatellut sivuston koko elinkaarta enkä nykyhetkeä, kun olen päättänyt millä selaimilla sen tulee näkyä. Olen validoinut sivuja ahkerasti kehitystyön lomassa, eikä niiden koodista pitäisikään löytyä yhtään virhettä, paitsi sivuilta, joilla on flash-sisällän vuoksi EMBED-tagi.

Taaksepäin yhteensopivuuden olen testannut Explorer 4:ään ja Netscape 6:een asti. Jos kyseessä olisi portaali tms. yrityksen sivut, saattaisin tilanteesta riippuen tehdä niistä useammilla selaimilla toimivat. Nämä ovat kuitenkin minun sivuni, ja alan harrastajana olen halunnut kokeilla moderneja tekniikoita. Sivuilla on kosmeettisia eroja eri selaimia käytettäessä, eli yleisesti ottaen sivut näkyvät sitä oikeammin mitä uudempi selain on kyseessä.

Navigator 4 erityisesti on ongelmallinen selain, ja huokaisen helpotuksesta, kun se tulevaisuudessa katoaa ihmisten koneilta. Tätä kirjoittaessa NN 4:llä on neljän prosentin osuus selaimista maailmanlaajuisesti. Olettaisin että osuus on Suomessa pienempi. Ikävä kyllä NN 4 elää vielä jonkin aikaa.

Koodissa on joitain "omituisuuksia". Joskus olen määritellyt saman asian sekä css:llä että attribuuteilla. Jossain on turhan tuntuisia DIV-tageja, epävalidilla sivulla on DTD, jne. jne. Yleensä näihin kuitenkin on joku syy, joka paljastuu, kun poistaa omituisuuden ja testaa sivua useilla selaimilla tai ajaa sen validaattorin läpi.

Olen jostain kurinpidollisesta syystä halunnut käyttää 4.01 strict DTD:ia. Se vaatii käyttämään tyylimäärittelyjä muotoilutagien sijaan, ja niin olen tehnytkin. Ainoa mitä en saa toimimaan strictissä ilman huteria javascript-kikkailuja on target="_blank", joten sitä käyttäville sivuille olen laittanut transitional DTD:n.

Joidenkin mielestä linkin aukeaminen uuteen ikkunaan on pahasta, mutta minusta sille on oma käyttönsä. Esimerkiksi näillä sivulla oleva shakkikello nollautuisi, jos sen käyttöohje aukeaisi samaan ikkunaan. Toiseksi, jos kuvasta saa suuremman version klikkaamalla sitä, se on hyvä avata uuteen ikkunaan, tai muuten sivulle palaaminen vaatii uuden odottelun. Jotka muuta väittävät, omistavat ilmeisesti nopean Internet-yhteyden. Pelkästä kuvastahan ei koskaan mennä muualle kuin taaksepäin. Odottelua helpompaa on sulkea uusi ikkuna.

Haluaisin käyttää kirjasimena Verdanaa, koska se on suunniteltu nimenomaan ruudulta luettavaksi. Siinä näyttääkin olevan esim. e-kirjaimen "häntä" kaukana luupista, jolloin muoto on ilmava ja selkeä. Verdana on kuitenkin kookkaampaa kuin saman kokoiseksi määritelty muu kirjasin. Haluaisin kompensoida Verdanan kokoeroa määrittelemällä leipätekstin kooksi 0.85em, mutta jos käyttäjällä ei olekaan Verdanaa asennettuna koneelleen, teksti kävisi turhan pieneksi.

Periaatteessa 1em on se koko, jonka käyttäjä on säätänyt selaimestaan tekstin kooksi. Ei ole sopivaa mennä mestaroimaan käyttäjän valintaa, hänellähän saattaa olla omia syitään, kuten heikkonäköisyys. Yleensä selaimissa on oletuksena Times, eivätkä käyttäjä tai sivuntekijä voi säätää joka kirjasimelle omaa kokoa.

Toistaiseksi olen kiertänyt ongelman siirtämällä Verdanan kirjasinlistan viimeiseksi. Ensimmäisenä listalla on Arial, koska siinä kirjaimet eivät ole niin lähekkäin kuin Helveticassa.

Olen lukenut eri www-gurujen mietteitä siitä miten fonttikoot tulisi määritellä. Nämä ohjeet ovat usein keskenään ristiriitaisia, ja kaikissa niissä on omat ongelmansa. Väitän että ei ole olemassakaan täydellistä, kaikille sopivaa tapaa määrätä fonttikoko. Kysymys on vain siitä minkä kompromissin haluaa valita. Minun tapauksessani kompromissi on se, etten voi käyttää Verdanaa.

Erään koulukunnan mukaan tekstin leveyttä ei pidä rajoittaa, koska käyttäjä tekee sen säätämällä ikkunaa. Ihmisen on vaikea lukea tekstiä, jos se kulkee leveänä laidasta laitaan, ja kokemukseni mukaan ihmiset eivät säädä ikkunaansa tekstin leveyttä säätääkseen. Olen siis määritellyt kappaleiden leveydeksi 28em. Kirjojen palstanleveydet ovatkin tyypillisesti 9-11 cm. Senttimetrit ovat kuitenkin huonohko tapa määritellä elementtien kokoja, koska selaimilla ei näytä olevan tietoa monitorin dpi-luvusta.

Paikoitellen olen rikkonut erästä www-taittamisen sääntöä, nimittäin jotkut sivut ovat leveämpiä kuin toiset. Sille ei nyt mahda mitään, koska shakkikello ja iskulauseita on alun perin suunniteltu itsenäisiksi sivuiksi, ja ne ovat luonteeltaan vaakasuoria sisältäjä. Espanjareissuni-sivulla oli alun perin peräti kolme palstaa, mutta kun liitin sen tähän uusimpaan leiskaan, siirsin kuvat omalta palstalta tekstin joukkoon. Ainakin sivut mahtuvat 800 pikseliä leveälle 15 tuuman monitorille, mikä tätä kirjoittaessa on yleisin käytössä oleva monitorityyppi. Seuraavaksi yleisin onkin jo isompi.

Jos käyttäjällä on javascript päällä, niin navigoinnissa sen linkit eteen, millä sivulla ollaan, ilmestyy pieni kultainen kuula. Linkki on silti toimiva, mitä voi pitää pienenä kauneusvirheenä. Ongelmallisempi tilanne on silloin, jos käyttäjällä ei ole javascriptiä, ja kuulaa ei ilmaannu. Olen käyttänyt www-editorin include-toimintoa navigoinnin luomiseen. Näin minun pitää tehdä muutos vain yhteen tiedostoon, jos haluan muuttaa navigointia näillä n. 90 sivulla, joissa navigointiosuus on sama. Jos haluaisin poistaa linkityksen samalle sivulle, minun pitäisi editoida erikseen jokaista sivua. Voisihan sen kerran tehdä, mutta sitten kun teen muutokseen navigointiin, sama rumba olisi edessä uudestaan ja uudestaan!

Yhteystietosivulla sähköpostiosoitteeni on esitetty kuvana eikä tekstinä. Tämä siksi, jotta osoitteeni ei päätyisi roskapostia lähettäville kepuliyrityksille. Jotkut ohjelmat osaavat etsiä kirjaimia kuvista, joten olen muuntanut kuvaa viidellä tavalla:

1. Taustalla on tekstiä hämäykseksi. Teksti on harmaalla, jottei se haittaisi ihmislukijaa.
2. Osoite on kirjoitettu vinoon.
3. Osoitteen kirjaimissa on värivaihteluita.
4. Osoitteen läpi kulkee valkoinen viiva, joka rikkoo kuviota, mutta ihminen hahmottaa kirjaimet siitä huolimatta.
5. Kuva on jaettu kahteen vierekkäiseen kuvaan.

Kuudentena keinona voisin vielä käyttää jotain todella erikoista kirjasinta.

Yhteydenottolomakkeessa on kuitenkin osoite tekstinä HTML-koodin joukossa. Se on kuitenkin eri osoite. Jos siihen alkaa tulla roskapostia, ohjaan ne suoraan roskikseen ja vaihdan sivulle uuden osoitteen. Varsinaiselle osoitteelle tuollaista ei mielellään tekisi, koska ihmisillä saattaa olla se tallennettuna sähköpostiohjelmiinsa, mutta lomakkeessa se ei haittaa.

Joka sivulla on copyright-muistutus. Se ei ole lain mukaan tarpeen, vaan minulla on muutenkin automaattisesti oikeudet väsäämiini teksteihin ja grafiikkaelementteihin. Olen kuitenkin halunnut muistuttaa käyttäjiä siitä, ettei sivujen ulkoasua tai sisältää pidä mennä suoraan kopioimaan.

Sivun lopussa ei enää ole nuolta, jota klikkaamalla pääsee takaisin alkuun. Olen sitä mieltä, että tuollaiset nuolet ovat turhia, koska ikkunan rullausjana hoitaa saman asian.

Sivuhistoria

Ensimmäinen koskaan tekemäni kotisivu oli vain tekstitiedosto, jossa oli nimeni ja yhteystietoni. Hämmästyttävää kyllä se oli lähes validi HTML-sivu, sillä aika harva tagihan loppujen lopuksi on pakollinen. Ryhdyin siitä sitten vähitellen lisäämään muotoilutageja ja sisältää. Harrastuspohjalta syntyi kotisivu, jossa näkyy monenlaisia amatöörimäisyyksiä, mm. häiritsevää taustakuvaa tekstin alla. Koira on karikatyyrinen muotokuvani.

Ryhdyin opiskelemaan verkkoviestintää media-assistentin ammattitutkintoa varten Turun kristillisessä opistossa. Olin ominpäin opetellut 3D-mallinnusta, joten halusin näyttää mihin pystyn tekemällä etusivun, jossa tausta oli yhtä yhtenäistä kuvaa. Hain visuaalisen ilmeen Amarillo-ravintoloista, joissa on keltaista rapattua seinää, tummaa puuta ja hämyvaloja. Linkkien alla olevien puukuvioiden oli tarkoitus olla sälekaihtimia, mutta niistä tulikin koon vuoksi lähinnä lautoja ikkunan eteen. Neonvalon rikkinäinen P-kirjain on animoitu gif, joka rakeisuutensa vuoksi hieman erottuu taustasta. Myös tekstit ovat omia elementtejään, ja ne keskittyvät javascriptin avulla, kun käyttäjä muuttaa ikkunan kokoa. Huomaa, että tämä sivu keskittyy myös pystysuunnassa!

Tässä vaiheessa teimme paljon erilaisia harjoitustöitä, ja ajattelin, että niiden ulkoasu saakin poiketa toisistaan, jotta pääsen kokeilemaan erilaisia juttuja.

Opintojen loppusuoralla kyselin ihmisten kommentteja sivuistani, ja aika moni halusi niille yhtenäisen ilmeen ja vähemmän grafiikkaa. Jotkut kyllä pitivät niistä sellaisinaankin. Tein kuitenkin uuden, äärimmilleen yksinkertaistetun leiskan, joka olisi nopea ladata ja toimisi melkoisella varmuudella useimmissa selaimissa. Vihreä-keltainen värimaailma ei ole otettu vanhoista Meritan sivuista, vaan hain jonkinlaista rauhallista efektiä. Lopputulos on kyllä rauhallisuuden lisäksi hiukan masentava.

Lopulta ollaan tultu tähän sivumalliin, jota nyt luette. Aikaisemmin olen tehnyt joko kuivan toimivia sivuja, tai graafista ilotulitusta, mutta nyt halusin hypätä valtavirtaan ja käyttää grafiikkaa juuri sopivasti. Halusin saada aikaiseksi omanlaiseni ilmeen, mutta kuitenkin optimoida grafiikan niin, ettei se hidasta latausaikoja.

Yhdistin sisällän henkilökohtaisilta sivuiltani ja koulun harjoitustöistä, ja suunnittelin ulkoasun hakien innoitusta suomalaisilta pelisaiteilta. Nehän ovat usein kuin julkaisun ja koneen välimuotoja. Taulukkorakenteen oli määrä olla monimutkaisempi, mutta edes uusimmat selaimet eivät osanneet piirtää sitä oikein. Itse asiassa Macintoshin IE 5.1 piirtää väärin joitain sellaisia asioita, jotka 5.0 jo hallitsi, ja sama tilanne on NN 6.2:n ja 6.1:n välillä.

Viimeisin parannus saittiin on sen lyhyt ja rimmaava osoite teppo.tv. Com ja net olivat jo varattuja, ja fi-päätettä jaetaan vain yrityksille, yhteisöille ja presidenttiehdokkaille. Name-pääte vaatisi kaksiosaisen domainin tyyliin www.teppo.pihlajamaki.name, ja org ei kuulosta hyvältä. Kyselin sitten muutamalta tytöltä kumpi olisi coolimpi, teppo.info vai teppo.tv, ja yksimielinen vastaus oli tv. Se on kaikkialla maailmassa tunnistettu lyhenne, ja tarkoittaa ikään kuin Tepon tv-kanavaa. Uskoisin että tulevaisuudessa televisio on yleisin selauslaite, ja tv-domainpäätteet tulevat ihmisille tutuiksi tilt.tv ja ruokala.tv kaltaisten ohjelmien myötä. Hyvä uutinen Tuvalun saarivaltiolle, jolle ko. päätteiden myyminen on jo suurin tulonlähde!

Tekemiäni sivuja

Sivuillani saatoin tehdä kokeiluluontoisia pikkunäppäriä sivuja ja harjoitustöitä. Jotkut niistä käyttivät Flashia, jotkut DHTML:a. Käytin valmiita aliohjelmakirjastoja, joita parantelin itse, mutta silti ko. sivuja oli mahdotonta saada toimimaan aivan kaikissa selaimissa ja käyttöjärjestelmissä.

Nettitemppu
Kiehtovaan sisältään ei välttämättä tarvita javascriptiä ja flashia... 2002 keväällä televisiossa pyöri mainos, jossa oli sama temppu. Herääkin kysymys kuka keksi sen ensin? Kun näin sen taikatemppukirjassa, world wide webiä ei ollut olemassakaan. Pari vuotta sitten näin jonkun toteuttaneen sen nettisivulla, mistä hoksasin sen sopivan nettiin. Temppu oli sivuillani vuosia ennen kuin kyseinen mainos alkoi ilmestyä. Idea ei siis alun perin ole minun, eikä myöskään ko. mainoksen tekijöiden. Ihmeellinen yhteensattuma (?) on, että mainoksessa on arvoiltaan samat kortit kuin alkuperäisellä sivullani, ja ne ovat vielä samassa järjestyksessäkin, eli jätkä, kunkku, rouva, rouva ja jätkä. Kun yksi kortti on poistettu, jäljellä on jätkä, jätkä, rouva ja rouva. Nyttemmin olen laittanut uudet kortit ja vaihdoin samalla niiden arvot.

Hauvapeli
Vihje: jos haluat voittaa hauvan, tarkkaile kuinka se pelaa ja tee samalla tavalla. Voittava pelitapa on melko yksinkertainen. Peli ei toimi ainakaan Macin IE 5 -selaimessa, johtuen juuri tuosta DHTML tilanteesta.

Iskulauseita (Nyt jo poistettu Flashin poistumisen vuoksi)
Tekstit ovat peräisin City-lehden artikkelista, mutta ne lienevät Internet-folklorea, sillä olen tavannut joitain niistä aikaisemminkin. Grafiikka on nopeasti hutaistua "South park"-tyyliä. Tehtävänmäärittelyssä muistaakseni oli määrätty käyttämään animoitua näppäintä.

Painoindeksi (poistettu, koska painoindeksin painorajat olivat erilaisia eri maissa)
Melko yksinkertainen palvelu, mutta niin vain City-lehden sivutkin pyytävät maksua vastaavasta laskutoimituksesta! IE:ssä tulos tulee tekstinä sivulle, mutta NN:ssä onkin tekstikenttä.

Shakkikello (Nyt jo poistettu Flashin poistumisen vuoksi)
Tämä shakkikello ei liity mihinkään harjoitustehtävään, vaan tein sen omaksi ilokseni. Olin alun perin ajatellut siitä freeware-ohjelmaa. Siinä oli toki huijausmoodi, oli mahdollista salaa laittaa oma kello kulkemaan hitaammin.

Taidegalleria
3D-mallinnuksella saa kätevästi tehtyä kaikenlaisia käyttöliittymäelementtejä. Tällä sivulla on kuitenkin aikaisemmin tekemiäni kuvateoksia.

Haikueditori
Meidän piti kirjoittaa kirjallisen viestinnän tunnilla haikuja. Niissähän on tarkkaan määrätty kuinka monta tavua kullakin rivillä on, mutta suomen tavutus on mahdottoman vaikeaa. Päätin siis tehdä tällaisen sivun, joka tavuttaa runon ja kertoo onko se haiku. Olihan se helpompaa kuin opetella tavuttamaan itse.

Pelisali (Nyt jo poistettu Flashin poistumisen vuoksi)
"Etsi viisi eroavaisuutta kahden kuvan väliltä"-peli. Kaikki alkoi siitä, kun entinen tyttöystäväni vei minut baariin pelaamaan näitä pelejä. Olin ajatellut, ettei niin yksinkertaisille ole kysyntää, mutta ne ovatkin aika suosittuja. Ei kolmiulotteisuutta, ei toimintaa, ei tekoälyä.