Kategoria — web-kehitys

Päivitys 20.9.2010: Älä hanki VPS:ää iFuse Hostingilta.

Muutto pakotti ajattelemaan koti-linuxilla pyörivien nettisivujen kohtaloa. Serverin ylläpito on välillä ollut työlästä, eikä luotettavuuskaan ole ollut liian hyvä. Ja muutossa kone on viikon verran pois netistä, joten jokin vaihtoehto oli keksittävä.

Päädyin hankkimaan virtuaalipalvelimen iFuse hosting -firmalta briteistä. Käytännössä omistan siis virtuaalisen tietokoneen, jossa on 256 megaa muistia, ja joka pyörittää Ubuntua.

VPS, eli virtual private server on täysin itse ylläpidettävä. Palvelimella ei ole valmiina mitään, ja kaikista asennuksista ja konfiguraatioista on vastuussa itse. Käyttöjärjestelmän voi tarvittaessa jyrätä jos mokailee tarpeeksi.

Palvelin maksaa 10 puntaa kuussa, mikä on siedettävissä. En tiedä vielä miten pitkälle 256 megaa muistia riittää, ainakin Apachen konfiguraatioita oli viilattava toimimaan paremmin pienemmällä muistimäärällä.

Virtuaalipalvelimia on nykyään kohtuullisen hyvin saatavilla, mutta niiden vertailu on hankalaa. Web Hosting Talk -foorumilta löytyy käyttäjien arvioita ja ohjeita.

Suomessa hinnat tuntuivat lähtevän 30€:sta ylöspäin. Kansainvälisille markkinoilla hyvä vaihtoehto näyttäisi olevan SliceHost, jolla on kaikista hostausfirmoista selkeimmät sivut. Firman kaikki palvelimet vain ovat jenkeissä, jolloin pingi Suomeen kasvaa vähän liian suureksi.

IFuse Hostingilla on kätevä help desk netissä, jossa tuntuu olevan aina joku päivystämässä. Valitettavasti apua on joutunut myös kysymään pari kertaa, esimerkiksi aluksi palvelimelle ei saanut ollenkaan SSH-yhteyttä. Muuten homma on pelannut hyvin.

Google pääsi otsikoihin kun hakutuloksissa väitettiin jokaisen sivun olevan haitallinen käyttäjän tietokoneelle, eikä hakutulokseen tarjottu suoraa linkkiä. Vika saatiin korjattua nopeasti, ja lopputuloksena lähinnä havaittiin miten vaikeaa on käyttää nettiä ilman Googlea.

Google Mapsissa on sen sijaan ollut ongelma, jota ei ole korjattu yhtä nopeasti. Karttoja voi liittää omille sivuillensa (eng. embed), jolloin kartta toimii samaan tapaan kuin se toimisi Google Maps-palvelussa. Tämä on esimerkiksi yrityksille kätevä tapa näyttää missä firma sijaitsee.

Kartan ominaisuuksiin kuuluu, että kartan tyypin voi valita normaalin kartan, satelliittikuvan tai maastokartan väliltä:

Ulkopuolisille sivuille liitetyssä kartassa karttatyypin valintanapit ovat kuitenkin lyhennetty muotoon “Kartta – la – Maas”. Wtf?

Pohdin useamman päivän miten sana “satelliitti” on saatu lyhennettyä muotoon “la”. Maasto -> Maas on vielä jotenkin ymmärrettävissä, mutta la:sta ei voi mitenkään johtaa satelliittia. Asia selvisi lopulta kun näin englanninkielisen kartan lyhennökset:

Englanninkielisessä kartassa Satellite on lyhennetty “Sat”. Suomenkielinen lyhennös on saatu kääntämällä englannin lyhennös. Sanan merkitys vain on kadonnut matkalla ja käännös on ilmeisesti tehty Sat (Saturday) -> la (lauantai).

Tällä hetkellä ainoa tapa kiertää käännösongelma on käyttää Google Maps APIa ja liittää kartta javascriptillä.

(Sitä en tiedä miksi Helsinki on englanninkielisessä kartassa kirjoitettu portugaliksi Helsínquia.)

Asensin WordPressiin kokeeksi Yawaspin, eli Yet Another WordPress Anti Spam Pluginin. Palikan pitäisi estää botteja jättämästä kommentteja muuttamalla kommenttikenttien nimiä ja lisäämällä kommenttiformiin näkymättömiä kenttiä, joiden täyttäminen narauttaa botin.

Jos kommenttien jättämisessä on ongelmia, lähettäkää postia oiva.eskola@gmail.com. Osa kommenteista saattaa muutenkin jäädä tarkistettaviksi ennen julkaisua, varsinkin jos kommentti sisältää yli kaksi linkkiä.

Kävin Adobe User Groupin tapaamisessa, jossa oli setä Adobe Nordicista kertomassa mitä uutta Adoben Creative Suite 4:ssä oikein on.

Kaikesta päätellen CS4:ssä on keskitytty parantamaan workflowta ja jätetty uudet ominaisuudet hiukan vähemmälle. Olen yleensä käyttökokemuksen puolella, joten uudistukset kuulostivat lupaavilta.

CS4:n workflow-uudistuksista monet tuntuivat itsestäänselvyyksiltä, siltä että jonkin tietyn tehtävän voi nyt tehdä ei-typerästi. Softan uuden version julkaisu tuntuu olevan vähän skitsofreenistä puuhaa. “Hei, meidän vanhassa ohjelmassa oli kaikki nämä asiat todella huonosti, mutta nyt ne on korjattu! Ostakaa meidän hyvää softaa!”
[Lue lisää →]

Nettiselaimia on tottunut pitämään melko muuttumattomina ohjelmina, niin tekniikaltaan kuin käyttöliittymiltään. Ero esimerkiksi Netscapen ja Firefoxin käyttöliittymien välillä ei ole niin suuri.

(Firefoxin käyttöliittymän muuttumattomuuteen on voinut osaltaan vaikuttaa se, että sen on pitänyt olla vaihtoehto, johon IE:n käyttäjät uskaltavat vaihtaa.)

Teknistä kehitystä on tapahtunut selainten renderöijissä, jotka ovat hiljalleen lähestyneet standardeja. Nykyään eri selainten uusimmat versiot jopa piirtävät HTML-sivuja lähes samalla tavalla.

Viime aikoina on kuitenkin näkynyt paljon pohdintaa nettiselaimen perimmäisestä olemuksesta ja selaimen käyttämisestä. Varsinkin Google ja Mozilla Labs ovat kunnostautuneet tulevaisuuden selainkokemuksen suunnittelussa.

[Lue lisää →]

Eilinen LivePlace-demo näyttäisi toteutuessaan tuovan netin 3d-meiningit uudelle vuosituhannelle. Kolmiulotteisuutta on kuitenkin käytetty jo jonkin verran esimerkiksi markkinoinnissa. Jaamo on koonnut esimerkkejä Flashia käyttävistä 3d-sovelluksista.

Kolmiulotteisia palveluita  mietittäessä kannattaa vakavissaan harkita, mitä lisäarvoa kolmas ulottuvuus palveluun tuo.

Tästä olen hyvin samaa mieltä. Flash 9:llä tehdyt 3d-jutut ovat yleensä rupuisen näköisiä, mutta saattavat silti nykiä vähänkään heikommalla koneella. Tämä väkisinkin heikentää käyttäjäkokemusta, vaikka 3d muuten olisi hienoa ja ihmeellistä. Monesti esimerkiksi pseudo 3d:llä saataisiin paremman näköistä jälkeä aikaan.

Fi-domainin varaaminen on helppoa ja hauskaa, ja prosessi onnistuu suurin piirtein näin:

1. Rekisteröidy viestintäviraston fi-verkkotunnuspalveluun
2. Posti tuo fyysisen salasanalistan 1-3 työpäivän kuluessa
3. Verkkotunnuksen varaamista varten tarvitset vähintään kaksi nimipalvelinta, jotka kertovat mihin IP-osoitteeseen uuden verkkotunnuksen liikenne ohjataan. Hyvä, ilmainen nimipalvelinpalvelu löytyy esimerkiksi xname.org:sta. Alla esimerkki nimipalvelimen virittämisestä paulaminni.fi-domainille:
   • (Rekisteröidy xname.orgiin)
   • 
     Luo uusi zone
   • 
     nimipalvelimiksi voi antaa ns0.xname.org. ja ns1.xname.org. Muista liittää nimen loppuun piste. Myös ns2.xname.org. on olemassa ja sitä voi käyttää edellisten lisäksi.
   • 
     A-recordiin tulee domainin nimi (taas loppupisteen kanssa) ja IP-osoite, jossa oma palvelin sijaitsee.
     
   • 
     Jos haluat osoitteen toimivan myös www-alkuosan kanssa, lisää ‘www’ CNAME-osioon. CNAMEa voi käyttää jos haluaa useampia alidomaineita, jotka vievät samaan IP-osoitteeseen kuin A-record.
4. Xnamen nimipalvelimien päivittymisessä menee 1-2 tuntia. Tämän jälkeen voit varata domainin viestintäviraston palvelussa. Nimipalvelimet voi syöttää lomakkeeseen ilman IP-osoitetta. Xnamen nimipalvelinten IP-osoitteet löytyvät kuitenkin FAQ:sta jos niitä tarvitsee.
5. Viestintäviraston omat nimipalvelimet päivittyvät myös noin tunnissa parissa, jonka jälkeen domainin pitäisi toimia.
6. ???
7. Profit.

Sivuston siirtäminen uudelle palvelimelle

Vanhan sivuston ohjaaminen uudelle palvelimelle on lähes triviaalia, ja vastaus löytyy jälleen kerran Wikipediasta. Homma onnistuu (esimerkiksi) käyttämällä .htaccess-tiedostoa vanhan sivuston juuressa:

RewriteEngine On

RewriteCond %{HTTP_HOST} ^.*oldwebsite\.com$ [NC]
RewriteRule ^(.*)$ http://www.preferredwebsite.net/$1 [R=301,L]

Käyttäjän yrittäessä päästä vanhalle sivulle palvelin vastaa sivun sijaitsevan uudessa osoitteessa. Käyttäjän selain on fiksu ja siirtyy automaattisesti uuteen osoitteeseen.

Ylläolevassa koodissa 301 on HTTP-vastauskoodi, joka tarkoittaa, että sivusto on siirtynyt lopullisesti uuteen osoitteeseen. Tämän koodin ansiosta esimerkiksi Google osaa nähdä uuden ja vanhan sivuston samana. Jonkin ajan kuluttua Google ei enää näytä linkkejä vanhalle sivustolle.

Älä tee näin

Viime viikolla tehty paulaminni.fi-domainin varaaminen ja sivuston siirtäminen sujui hyvin, lukuun ottamatta sivustolla ollutta RSS-syötettä. Syötteen yksittäisten artikkelien tunnisteina oli käytetty kunkin artikkelin alkuperäisen HTML-version osoitetta. Kun domain muuttui, myös tunnisteet muuttuivat, ja kaikki syötteen artikkelit näkyivät lukijaohjelmille uusina artikkeleina. Opetus: käytä RSS-syötteessä muuttumattomia tunnisteita (doh).

Olen tullut asiakasprojektien kanssa seuraavanlaiseen tulokseen: virheiden korjaamisessa 90% ajasta kuluu virheen löytämiseen ja ongelman toistamiseen. 10% ajasta kuluu itse bugin korjaamiseen

Koodaajia voi syyttää huonoista virheilmoituksista, mutta bugiraportit ovat usein ihan suhteettoman epäselviä. “Nappi ei toimi” (toimii kokeiltaessa ihan hyvin), “erikoismerkit eivät toimi” (toimivatpas), “väri on väärä” (mikähän väri sen pitäisi olla?) jne, jne.

Vaatii aikamoista munkitusta, että löytää juuri sen oikean virheen, ja keksii miten homman pitäisi asiakkaan mielestä toimia.

Ei tämä sinänsä ole (välttämättä, kokonaan) asiakkaan vika. Koodaaja ja asiakas vain lähestyvät samaa projektia hyvin eri suunnista ja käyttävät usein eri terminologiaa.

Kannattaa pitää mielessä, että asiakkaan lähettämän virheraportin taustalla on yleensä jokin todellinen virhetilanne. Vaikka bugiraportissa mainittu toiminto toimisikin täydellisesti.

Perjantain jälkeen alkaa kesäloma, joka taitaa tulla ihan tarpeeseen . Tiedossa on mökkeilyä ympäri Suomea ja toivottavasti vähän vähemmän aikaa netissä.

Tein Paulan korusivuille RSS-syötteen uusista koruista. Syöte on tässä tapauksessa yksinkertainen PHP-skripti, joka hakee kannasta uusimmat korut ja liittää mukaan tarvittavat metatiedot.

Toteutuksessa oli hyötyä seuraavista linkeistä:
RSS 2.0 spesifikaatio
Feed Validator
RSS Wikipediassa
[Lue lisää →]

Keräsin aikaisemmin yhteen muutamia suomenkielisiä HTML ja CSS -ohjeita. Englannintaitoisille voin kuitenkin suositella Veerlen listaa oppaista. Mukana on perustelut web-standardien käytölle ja linkit HTML ja CSS -tutoriaaleihin, sekä muutama keino bugien etsimiseen.

Viime viikolla työskentelin pääasiassa Paulan korusivujen uudistamisen parissa. Alkuperäinen sivu oli melko askeettinen ja nopeasti tehty:

Uuden sivun suunnittelussa lähtökohtina oli:

• Korujen saaminen paremmin esille
• Myytävien korujen erottaminen myydyistä
• Navigaation parantaminen

Vanhan sivun ulkoasussa oli paljon toivomisen varaa. Uudessa päädyin lopulta hyvin pelkistettyyn layouttiin, jossa itse korut ovat pääosassa. Kokeilin aluksi asettaa neljä korua vierekkäin samalle riville, mutta vähensin määrän lopulta kolmeen, jotta yksittäisiin koruihin olisi helpompi keskittyä.

Navigaatiosta tuli samalla kaksitasoinen, jossa korut on jaoteltu ensin myytäviin ja myytyihin (galleria) ja tämän lisäksi eri korutyyppeihin (kaulakorut, korvakorut ja rannekorut). Navigaatiota voisi vielä parantaa, en ole aivan varma näkyykö valittu sivu tarpeeksi selkeästi. Navigaatiota voisi helpottaa käyttämällä esimerkiksi bread crumbeja.
[Lue lisää →]

Tänään 9.4. vietetään CSS Naked Day:tä, minkä takia sivulta on poistettu kaikki css-muotoilu. Toivottavasti muistan vaihtaa takaisin…

Päivitin WordPressin versioon 2.5 ja muokkasin samalla blogin käyttämää templatea. Ideana oli lisätä kaikki yhden postin tagit sivun keywords-metatagin sisään. Eli esimerkiksi tämän sivun html:ssä lukee:

<meta name=”keywords” content=”HTML, keywords, PHP, seo, tags, wordpress” />

En tiedä miten paljon hakukoneet katsovat sivujen avainsanoja, mutta tuskin siitä haittaakaan on.
[Lue lisää →]

Aki Björklund kirjoittaa elastisen em-taiton kuolevan uusien selainversioiden (FF3, IE7) zoomausominaisuuksien myötä. Elastinen taitto on siis se tekniikka, missä kaikki layoutin mitat määritellään suhteessa fontin perusyksikköön (em).

Kieltämättä ihan hyvä uutinen, sillä tarkkojen pikselimittojen määrittäminen em:nä on melko työlästä. Ja yleensä leiska kuitenkin hajoaa jotenkin kun fonttikokoa suurennetaan. (Osaamiskysymys kaiketi, en ole kunnolla perehtynyt siihen miten homma pitäisi hoitaa.)

Mutta jos em-taitto kuolee, mikä on se tapa miten nettisivut pitäisi taittaa? Raa’asti vain pikselimittoja käyttämällä?