Kaleidoskopia
Enniriinan henkilökohtainen oppimisympäristö
Facebook Twitter Last.FM Delicious Flickr

helmikuu 2010 Archives

Muutaman päivän takainen uutinen helsinkiläiskahvilan tietomurrosta on yksi niistä esimerkeistä, johon tietämättömyys ja välinpitämättömyys tietotekniikkaa kohtaan johtaa.

Yrityksissä saattaa olla vanhentunutta tekniikkaa käytössä useimpien vuosien takaa. Kyseisessä tapauksessa tietoja oli kertynyt jo 5 vuoden takaa. Pelkästään vanhentunut tekniikka ei selitä tietomurtoa vaan välinpitämättömyys on suurin syy. Jos virus- ja haittaohjelmatarkistukset olisi tehty kahvilan koneille tarpeeksi usein, ei välttämättä tällaista ongelmaa olisi syntynyt. Heti kun kone kytketään Internetiin, riski kaiken maailman roskaohjelmista kasvaa eksponentiaalisesti. Eikö yrityksille löydy muka vieläkään mitään ohjeistusta, mitä pitää ottaa huomioon?!

"Tietojen pitkää tallennusaikaa saattaa selittää asentajayhtiön todennäköisesti vahingossa päälle jättämä oletusasetus. Kahvilayrityksessä ei tiedetty asiakkaiden korttitietojen tallentumisesta palvelimelle." (Aamulehti)

Tällaisia mokia ei saisi sattua. Kyllä asentajayhtiöllä pitäisi olla jonkinlainen checklist käytössään, ettei oletusasetuksia satu jäämään vahingossakaan päälle. Missä myöskin luuraa väliajoin tehtävät tarkistukset? Ylläpito näyttänyt puuttuvan kokonaan. Tässä näyttänee riittäneen serverin ylläpidoksi vanha kunnon "kunhan on pystyssä".

Lisää aiheesta:

Olen päivittänyt sivuilleni HOPS-osioon tietoja kurssista PHP-ohjelmointi ja liittänyt sinne harjoitustyöni ja esimerkkitehtäviä, joita tein kyseisellä kurssilla.

Kauhukseni huomasin myös, että sivustojen ulkoasut -sivulla ei ollutkaan sisältöä. Olen nyt lisännyt sinne muutaman työnnäytteeni ja lisää on tulossa, kunhan vain löydän kuvat koneeltani.

Blogiin on myös ilmestynyt "widget", jossa näkyy uusimpia uutisia Digitodaysta. Digitoday on suomalainen uutissivusto, jolla on Internetiin ja tekniikkaan keskittyviä uutisia. Ehkäpä tuosta bongaa vielä jonkin uutisaiheen, josta voi sitten bloggailla. :)

Olen päättänyt asentaa sivustolleni kuvagallerian valokuvilleni. Ehkä myös sivustojen ulkoasut siirtyvät sinne, tiedäpä häntä vielä. Minulla on aikaisempia kokemuksia muutamista gallerioista, mutta ylitse muiden nousee Coppermine Photo Gallery.
Keskittää voi monellakin tapaa, mutta miten otetaan huomioon esimerkiksi eri resoluutioiden käyttäjät. Kun käyttäjän resoluutio voi olla 1280 tai vaikkapa vain 800 pikseliä leveä. Keskittämisen voi esimerkiksi tehdä määrittämällä elementeille tarkat koordinaatit joissa ne ovat, mutta tällä tavalla voidaan ottaa vain yksi resoluutio huomioon kerrallaan. Center-tagi on vanhentunutta koodia, sitäpaitsi se keskittää kaiken, myös tekstin!

Esimerkissäni sisältö on "kääritty" erilliseen diviin, joka keskitetään tietynlevyisenä. Olen käyttänyt tätä tekniikkaa esimerkiksi näillä sivuilla.

...
<body>
<div id="wrapper">
Sisältö tähän
</div>
</body>
...

Tämän jälkeen css-muotoiluihin lisätään seuraava kohta:

div#wrapper{
    width:600px;
    margin:0 auto;}

Esimerkissä divin leveys on siis 600 pikseliä. Yhtä hyvin voidaan käyttää prosentteja esim. 80%, jolloin divi venyy tarvittaessa resoluution mukaan. Tämä voi kuitenkin olla ongelmallinen esimerkiksi laajakuvanäyttöjen kanssa. Se rikkoo hyvin helposti ulkoasun yhtenäisyyden ja kompaktin olemuksen.

Selaimen rullauspalkki vie noin 20 pikseliä oikeasta laidasta, joten suositeltu maksimileveys wrapperille olisi 780 pikseliä.
Kanssapelettäjäni Timo Kallio tuo blogikirjoituksessaan esille selainten välisiä eroja CSS-muotoilujen tulkinnassa.

Aikaisemmin esimerkiksi Internet Explorer 6 on ollut vastahakoinen tulkitsemaan muotoiluja samalla tavalla kuin muut selaimet. Aikaisemmin myöskään virheet HTML:ssä eivät ole hetkauttaneet IE:n tulkintaa. Sittemmin ero on tasoittunut ja nykyään myös Internet Explorer pyrkii tulkitsemaan muotoiluja samalla tavalla kuin esimerkiksi Firefox ja Opera.

Vielä Internet Explorer tuntuu kuitenkin olevan hukassa varsinkin välistyksissä (padding & margin). Lisäksi joillain elementeillä on automaattisesti tietynlaisia välistyksiä, jotka eroavat muiden selainten käyttäytymisestä. Esimerkiksi p-elementissä teksti sijoittuu väljemmälle alueelle IE:ssä kuin Firefoxissa ja Operassa. Tämä voi luoda ongelman, jos tahdotaan saavuttaa prikulleen samannäköinen tulos eri selaimilla.

Jotta voidaan lähteä välistysten kera puhtaalta pöydältä IE:n, Firefoxin ja Operan kanssa, voidaan CSS-muotoiluissa käyttää universaalia valitsinta *. Tämä valitsin vaikuttaa jokaiseen elementtiin sivulla, ellei sille ole jo määritelty jotakin muuta tyyliä itse.

*{
    margin:0;
    padding:0;}

Tämä pieni pätkä muotoiluja CSS-tyylissä resetoi kaikkien sivulla olevien elementtien välistykset ja antaa mahdollisuuden aloittaa heti alusta samoilla lähtökohdilla.