Suunnilleen hyvää web-sivuston toteutusta

Ostin itselleni kesällä Packard Bell laptopin. Moni saattaa mielessään kysyä: miksi ihmeessä? Packard Belliltä löytyi 12 tuuman kannettava, missä ominaisuudet ja hinta tuntui järkevältä. Kilpailevat tuotteet olivat poikkeuksetta noin 200 euroa kalliimpia, eikä ominaisuudet kuitenkaan olleet merkittävästi parempia.

Uuden tuotteen ostajalle on tietenkin tuttua se, että tuote pitää, tai sen voi, rekisteröidä valmistajan järjestelmiin. Tämän pitäisi parantaa mm. takuukäsittelyä, jne. Enpä ole vielä koskaan mitään rekisteröinyt valmistajalle, joten nyt ajattelin kokeilla. Päädyin Packard Bell:in sivustolle mikä oli melkein suomenkielinen.

Itse rekisteröintisivu oli noin päällisin puolin ihan siisti ja järkevä, mutta kun sivua alkoi tarkastella hieman, huomasin kuinka puolittainen toteutus itseasiassa olikaan. Harvemmin kaupallisiin tarkoituksiin tehdyllä sivulla on näin paljoa virheitä. Katso kuva alla:

1. sivun vasen navigointipalkki on enkoodattu eri merkistöllä kuin muu sivusto. Tästä johtuen navigointilinkeissä menee skandinaaviset merkit sekaisin.
2. kielivalinnassa on sana "Finnish" kirjoitettu väärin (Finish = loppu, maali, lopeta).
3. Etuliitevaihtoehdot ovat Herra ja Fru
4. Täytettävien kenttien joukossa on mystiset: Sähköposti, vahvista ja sähköpostiosoite. hmm... Pitääköhän tuohon täyttää sähköpostiosoite kolme kertaa?
5. Maavalikossa maat ovat listattuina englanninkielisinä (tämä tosin on aika tyypillinen virhe). Suomi ei ole suomenkielellä: Finland.
6. Lomakkeen päätteeksi käyttäjää kehoitetaan sujuvalla hollanninkiellellä(?): Klik op de knop Verzenden hieronder om door te gaan naar de downloadpagina voor leuke snufjes.

Miksei aina voi olla .... tiistai?

On jäänyt kirjoittaminen väliin taas joksikin aikaa. Eikä mutteri.com:iakaan ole juuri muutettu. Tällä viikolla tuli tehtyä pieniä käytettävyysparannuksia - ja adsense testejä. Siirsin hakemistonäkymässä yhden vaakamainosyksikön torniksi tuotteiden rinnalle. Lisäksi pienensin hieman navigaation fontteja, sekä eriytin tuotelistaa hieman muusta sivustosta. Ja tänään, ehkä suurimpana (työmääräisenä) muutoksena oli png muotoisten kuvien taustan muuttaminen läpinäkyvästä oikeaksi väriksi. Tämä viimeinen värimuutos ei suurimmalle osalle käyttäjiä näy mitenkään, sillä IE 7+ ja Firefox ovat osanneet käsitellä PNG:n läpinäkyvyyden oikein. Mutta IE 6 ja sitä aikaisemmat ovat näyttäneet tuon läpinäkyvän värin valkoisena. Ei tuokaan mikään tragedia ole ollut, mutta sivusto on ollut amatöörimäisemmän näköinen IE6- selaimilla kuin muuten.

Sivuston käyttäjien selainjakauma on mielenkiintoinen. Firefox käyttäjiä on noin 50% ja IE käyttäjiä noin 50%. IE käyttäjistä vain reilu 30% käyttää IE 6:tta. Yli 60% IE käyttäjistä surffailee IE 7 -versiolla. IE 5 osuus on vain 3%.

Vaikka kehitysmielessä olenkin viettänyt hiljaiseloa mutteri.com:in suhteen, olen kuitenkin kokoajan seurannut mitä sivustolla tapahtuu. Viime kesästä hieman poiketen, heinäkuu oli piirun verran hiljaisempi kuin kesäkuu, mutta ei mitenkään merkittävissä määrin. Mainostuloja (siis rahaa, millä saan katettua hosting kustannukset) tuli kuitenkin kutakuinkin muiden kuukausien malliin.

Käyttötilastoja selaillessani olen tehnyt mielenkiintoisen havainnon siitä miten ihmiset käyttäytyvät viikon sisällä. Kenellekään tuskin tulee yllätyksenä jos sanon, että viikonloppuna surffataan vähemmän kuin arkipäivinä. Johtopäätös voisi olla, että ihmiset surffaavat paljon työpaikoiltaan. Tosin, myös arki-iltaisin käyttäjiä tuntuu riittävän. Käyttö kasvaa lauantaista eteenpäin tasaisesti aina tiistaille saakka. Tiistai on lähes joka viikon huippupäivä. Tiistaista eteenpäin käyttäjämäärät alkavat laskea tasaisesti aina lauantaille saakka, kunnes sama ilmiö toistuu uudestaan - eli käyttö alkaa kasvaa tasaisesti. Eikä lauantain ja tiistain ero ole mikään ihan pieni. Tiistaisin kävijöitä on noin 50% enemmän kuin lauantaisin. Eli jos lauantaina käyttäjiä 100, on niitä tiistaina 150.

Kuten aikaisemmin mainitsin, on mutteri.com stabiloitunut, eikä merkittäviä muutoksia ole suunnitteilla (ellei joku sitten pyydä jotain mielenkiintoista). Mutta stabiloituminen ei suinkaan ole näkynyt käytön vähentymisenä, vaan päin vastoin. Mutteri.com käyttö on kasvanut vakaasti ja tällä hetkellä kiireisimpinä päivinä saattaa 200 kävijän raja rikkoitua. Keskiarvo lienee jossain 150 kävijän nurkilla. Jokainen kävijä käy noin neljällä sivulla käyntinsä yhteydessä. Palveluun on tullut kokoajan uusia ilmoituksia ja ilmoittajia. Mitään räjähdysmäistä kasvupyrähdystä ei kuitenkaan ole tapahtunut, eikä luultavasti ole tapahtumasa jatkossakaan - joten homma jatkunee tasaisen kasvun mallilla loppuvuoden.

Nyt tietenkin, jos jollain on loistava idea miten saada mutteri.com viraaliksi - ja käyttäjämäärät kasvamaan räjähdysmäisesti: ideoita otetaan kiitollisena vastaan :D

Fedora no-more 9

Vihdoin tuli aika päivittää käyttöjärjestelmä kotikoneessani. Olen ajanut Fedora Core 6 paketilla varmaan lähemmäs kaksi vuotta. Ei ole ollut kiire päivittämään, kun kaikki on toiminut ongelmitta. Nyt kuitenkin tuntui siltä, että olisin valmis päivitykseen. Kuvittelin myös, että jakelupaketit olisivat aikuistuneet siten, ettei päivitys olisi aina hermoja repivä ja kärsivällisyyttä koetteleva taistelu. Niinpä odottelin rauhassa uutta Fedora Core 9 paketti (FC9). Noin viikko sitten tuo odottaminen FC9 vihdoin julkaistiin. Olin jo aikasemmin ladannut FC8 paketin ja yrittänyt päivittää FC6:n, mutta jostain syystä tuo DVD ei suostunut päivittämään FC6:tta FC8:aan.

Poltettuani uuden paketin DVD:lle lähdin taisteluun intoa puhkuen. Kaikki meni sujuvasti, joskin hitaanlaisesti. Päivitys ei kysellut minulta juuri mitään vaan muutamilla valinnoilla rupesi tekemään työtä käskettyään. Niinpä vihdoin ruudulle ilmestyi odottamani ilmoitus: päivitys on nyt valmis, käynnistä tietokoneesi uudelleen. Ei muuta kuin restart ja kaikki olisi taas hyvin - vähän paremmin kuin ennen. Mutta sitten alkoivat taas ne perinteiset ongelmat. Kuinka ollakaan X serveri ei käynnistynyt. Ruudulle tuli pitkä lista erikoisia virheitä mistä en tajunnut halaistua sanaa. Niinpä poistin xorg.conf tiedoston, ja käynnistin xserverin uudestaan. Nyt käynnistyi - hienoa - tosin vain 800x600 resoluutiolla. Niinpä suunnistin ensimmäisenä muuttamaan resoluutiota. Vaan kuinka ollakaan - 800x600 oli paras resoluutio mitä tarjolla oli.

Ryhdyin selvittelemään miten saisin resoluution kohdalleen. Muutaman tunnin luettuani ja etsittyäni tulin siihen tulokseen, että ongelma on siinä, ettei nvidialla ole draiveria mikä sopisi xserveriin mikä FC9:ssä oli... hmm. Ja ilmiesesti FC9 xorg onkin beta versio, eikä nvidia tule betaan draiveria tekemään.

Nyt tulikin hätä käteen. Eihän tietokonetta voi 800x600 resoluutiolla käyttää. Lisäksi FC9:ssä on hieno automaattinen resoluution arvaus, mikä ei tee lainkaan uutta xorg.conf tiedostoa (jota olisin voinut muuttaa käsin jotta saisin paremman resoluution aikaiseksi). Onneksi olin aikanaan ottanut varmuuskopioita xorg.conf tiedostosta, joten pääsin puukottamaan ja kokeilemaan. Tein varmasti parikymmentä erilaista testiä kunnes löysin konfiguraation millä sain aikaiseksi 1680x1050 resoluution.

Nyt, noin vuorokausi päivityksen aloittamisen jälkeen voin valita näytön resoluutioksi oikean, mutta valitettavasti joudun tekemään sen käsin joka käynnistyksen jälkeen, sillä tuo F9:n automaattinen konfiguraatio ajaa aina tuon xorg.conf tiedoston oletusarvon yli.

Sen lisäksi että TAAS näytön saaminen kohdalleen kesti vain 24 tuntia, tuntuu ikkunointi olevan verrattain epävakaa. xserveri on jäätynyt ja kaatunut muutaman kerran. Lisäksi näyttää, että systeemissä on vielä paljon konflikteja siksi, että siellä on paljon FC6 ohjelmia ilman FC9 päivityksiä.

Mitä siis opin: seuraavaksi siirrän kaiken oman datan erillisille partitiolle. Sen jälkeen aletaan suunnittelemaan Kubuntun 8.04 version asentamista. Olen käytellyt sitä virtuaalikoneessa jonkin verran ja kokemukset virtuaalikoneesta ovat olleet vain positiivisia.

Pitää myöntää, että FC9 on selvästi FC6:tta näyttävämpi. Mutta eipä sitä eye-candy paljon lohduta kun suurin osa ajasta menee ihan perusongelmien ratkomiseen.

Kirottu DIV

Ei antanut luonto periksi ja jättää sitä DIV ongelmaa, mistä eilen kerroin, paikoilleen. Niinpä mietin miten homman voisi helposti ratkaista. Selailin webiäkin, mutta ihan heti ei silmään sattunut suoraa ratkaisua ongelmaan. Siispä siitä tuskin on haittaa jos kerron miten ongelman ratkaisin...

Ongelma oli siis se, että kun määrittelet DIV elementille leveyden ja sen lisäksi vaikka padding, margin tai border -ominaisuuden, niin Firefox lisää nuo ominaisuuksien leveydet DIV elementin "ulkopuolelle" ja Internet Explorer laskee ne DIV elementiin sisään. Esimerkkinä siis: jos määrittelet DIV elementin jonka leveys on 200 pikseliä ja haluat, että elementin sisällä oleva teksti on 5 pikselin päässä elementin reunasta (padding 5 pikseliä) niin Firefoxilla tuon alkuperäisen DIV elementin todellinen leveys on 200 + 5 + 5 pikseliä, mutta Internet explorer pitää DIV elementin leveyden 200 pikselissä. Olen yhä sitä mieltä, että IE:n tapa käsitellä leveyttä on järkevämpi.

Minullapa oli siis DIV elementti joka oli määritelty näin (tyyli tietenkin CSS filessä, mutta esimerkissä html:n seassa).

<DIV STYLE='width:200px;padding:5px;'>tässä sitten varsinainen sisältö</DIV>

Muuten tuo oli hyvä, mutta itse elementin leveys oli itseasiassa 210 pikseliä firefoxissa. Niinpä tuon sai korjattua helposti pienellä nesting-järjestelyllä.

<DIV STYLE='width:200px;padding:none;border:none;margin:none;'>
<DIV STYLE='padding:5px;'>tässä sitten varsinainen sisältö</DIV>
</DIV>

Ja lopputuloksena tulee 200 pikseliä leveä DIV molemmilla selaimilla, sekä 5 pikselin rako tekstin ja DIV -elementin reunan välillä.

Helppoa, mutta turhaa ja turhauttavaa.

Helpotusta Internet Explorer testaukseen Linuxissa

Tämänpäivän temppujen seurauksena päätin taas perehtyä hieman enemmän miten saisin Internet Explorerin pyörimään Linuxissa.

Toistaiseksi ainoa "järkevä" tapa on ollut asentaa Windows virtuaalikoneeseen (innotek VirtualBox tai VMWare) mutta mielestäni tuo käyttöjärjestelmän tuoma overhead on liikaa. En minä halua ajaa Windowsia virtuaalikoneessa vain siksi että haluan testata web sivuni toimivuuden IE:llä.

Nyt ei onneksi edes tarvitse (jos on valmis rikkomaan Microsoftin IE:n asentamiseen liittyviä lakitekstejä). On muuten mielenkiintoista, että IE on ainoa valtaselaimista joissa tämmöinen ehto on ohjelman lakiteksteissä. Eli Microsoft kieltää asentamasta IE:tä muihin kuin Windows käyttöjärjestelmän omaaviin tietokoneisiin. Jos uskoisin salaliittoihin, olisi tässä helppoa nähdä yksi salaliitto. Ensin M$ ajaa IE:n suosituimmaksi selaimeksi samalla kun se niputetaan osaksi käyttöjärjestelmää. Tämänjälkeen M$ sotkee HTML standardit tuomalla omia tulkintojaan ja laajennoksiaan, minkä seurauksena liian moni sivustojentekijä haksahtaa M$ ansaan. Omien tulkintojen seurauksena joutuu sivustojen tekijät tekemään sivuistaan pahimmillaan rinnakkaisia versioita, ja parhaimmillaan testaamaan ne Firefoxin lisäksi IE:llä. Mutta IE:llä ei voi testata käyttämättä MS Windows käyttöjärjestelmää - joten jokainen lainkuuliainen webkoodari joutuu hankkimaan MS Windowsin - ainakin testikäyttöön. Onneksi web-ohjelmoijien keskuudessa tämänkaltainen lainkuuliaisuus on aika alhainen. Voi jopa olla, että tämänkaltaiset rajoitteet edesauttavat piratismia...

Ainiin... olihan minulla joku oikeakin juttu kirjoitettavana. Eli löysin ohjelman nimeltä IEs 4 Linux. Ohjelman on tehnyt tatanka.com.br. Sivuilta löytyy helpot ohjeet siitä miten IE 6 saadaan asennettua eri linux jakelupaketteihin. Alla esimerkki miten homma tehtiin Fedora 6 -pakettiin. (juu, tiedän että FC6 on jo vanha, mutta en ole saanut aikaiseksi päivittää...).

• Avataan terminaali root -käyttöoikeuksilla ja asennetaan wine ja cabextract.

yum -y install wine*
yum -y install cabextract

• kirjaudutaan pois root -tunnuksilta ja asennetaan IEs 4 Linux normaaleilla käyttäjätunnuksilla

wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.targ.gz
tar zxvt ies4linux-latest.tar.gz
cd ies4linux-*
./ies4linux

HUOM: yllä wget ja web osoite tulevat samalle riville terminaalissa. Ne rivittyvät blogissa omille riveilleen taittoteknisistä syistä.

Ja siinä se, sitten vain asennusikkunan ohjeita noudattaen valitaan mikä tai mitkä versiot asennetaan ja laitetaanko käynnistysikoni työpöydälle tai/vai/ja käynnistysvalikkoon.

DIV elementit, firefox ja internet explorer

Olen tunnetusti huono ihminen mitä tulee sivujen suunnitteluun. Teen koodin puhtaasti linux ympäristössä, ja koska minulla on Windows käytössä vain töissä, jää IE:llä testaaminen usein retuperälleen. Niinpä tälläkin kertaa.

Olen viimeaikoinen hieronut tuota palkkatieto.net palvelua uuteen kuosiin. Sivuille on lisätty uusia toiminnallisuuksia ja, kuten arvata saattaa, on ulkoasu taas kerran muutettu. Taas voi vain sanoa, että uusi on varmaan paras ikinä. Syyllistyin taas perisyntiini, ja suunnittelin sivuista pääosin mustan-harmaan-valkoiset. Se on minulle tuttua ja turvallista - värisokea kun olen.

Sitten itse ongelmaan, jäin tänään kotiin tekemään töitä. Siitä johtuen oli hieman enemmän aikaa, joten ehdin katsomaan miltä tuo palkkatieto näyttää IE:llä katsottuna... Ja huonoltahan se näytti. Navigaatio oli ihan kuralla ja sivuelementit hyppivät vähän minne sattuu. Mistä näin, aloin miettimään? Ongelmahan oli tietenkin se, että olin nykytyyliin tehnyt sivujen asettelut DIV -elementtiä käyttäen. (Taisin aiheesta jossain välissä jo muutaman sanan kirjoittaa). DIV -elementti on ihan mukava ja kätevä. Kun hommasta pääsee liikkeelle, voi sillä korvata taulukot aika pienellä vaivalla. Ja etuna pitäisi olla nopeampi renderöinti selaimissa. Tiedä siitä sitten, mutta näin olen nyt jokatapauksessa tehnyt.

Ongelmaksi syntyikin se, miten eri selaimet käsittelevät DIV elementtiä ja siihen liitettyjä padding, margin ja border -ominaisuuksia. Siinä missä FireFox on sitä mieltä, että DIV elementin koon lisäksi määritellyt padding, margin ja border -ominaisuudet lisätään elementin kokoon, käsittelee Internet explorer elementin niin, että kyseiset arvot lasketaan DIV -objektin sisään.

Eli, jos määrittelet DIV elementille leveyden 200 pikseliä ja lisäksi padding -arvoksi 10 pikseliä, näyttää Firefox kyseisen DIV elementin 220 pikseliä leveänä, mutta Internet Explorer näyttää sen 200 pikseliä leveänä. Enpä tiedä kumpi on oikeassa standardin mukaan (jos standardi ottaa tähän mitään kantaa), mutta IE:n tapa käsitellä tuntuu johdonmukaisemmalta ja helpommalta hallita.

Oli totuus mikä oli, niin koodaajan pitää siis huomioida miten eri selaimet soveltavat padding, margin ja border -ominaisuudet eri objekteihin. Tämän voi kiertää aika helposti HTML+CSS tempuilla, mutta minä en tässä vaiheessa ole viitsinyt siihen hommaan ruveta. Niinpä sivustoni näyttää nyt IE:llä rumemmalta kuin Firefoxilla. Pienten korjailujen jälkeen sain sen kuitenkin taas käytettävään kuntoon myös IE:llä.

Loppukaneetiksi mainitaan vielä se, että firefox hyväksyy CSS:ssä määritetyn border-bottom:1px; mutta IE vaatii, että tuo määritetään border-bottom-width:1px; Onneksi jälkimmäinen toimii myös Firefoxilla.

Uusien vierailijoiden arvoitus

Taisinpa löytää syyn siihen, miksi pääsiäisen jälkeen tuli yhtäkkiä reilusti uusia vierailijoita. Kuten muutama viikko sitten kirjoitin, heti pääsiäisen jälkeen mutteri.com:iin ilmestyi jopa 50% enemmän kävijöitä kuin normaalisti. En löytänyt tähän oikeastaan mitään selitystä, paitsi että kävijämäärät olivat kasvaneet juuri hakukoneiden kautta tulevassa liikenteessä.

Tänään selailin gmailin spam laatikkoa (harvemmin luen niitä viestejä jotka automaattisesti spam:in joukkoon ajautuvat). Löysin roskapostien seasta kuitenkin vestin webinfo.fi -palvelulta. Olen joskus ilmoittanut mutteri.com:in webinfon hakemistoon. He lähestyivät minua maaliskuun lopulla sähköpostilla missä kertoivat, että olivat ohjanneet uusia kävijöitä mutteri.com:iin. Webinfo.fi oli tehnyt jotain minkä seurauksena mutteri.com oli noussut googlen hakutilastoissa sijalle yksi hakutermein: nettikirppis verkkokauppa ja myy tavarat netissä. Tämä muutos oli tehty juuri tuossa pääsiäisen jälkeen, ja viesti oli lähetetty minulle samana päivänä kun käyttäjämäärät olivat nousseet 50%.

Oli tuossa heillä tietenkin omakin koukku: googletettaessa noilla hakutermeillä tulee ensimmäiseksi osumaksi webinfo.fi:n sivu missä linkitetään mutteri.com:ia. Eli osumat eivät ole suoraan mutteri.com:iin vaan webinfon kautta. Haittaako tuo minua? Ei ainakaan tässä vaiheessa kun jokainen uusi kävijä on arvokas - riippumatta miten he mutteri.com:in löytävät.

PS: kutsu ystävä -toimintoa on taas käytetty... siitähän on tulossa varsinainen hitti, sitä on käytetty jo kuusi kertaa.