sunnuntai 24. huhtikuuta 2011

Pientä viilausta ulkoasuun

Sivustakatsoja.com (Vuodatus.net) muistelua:

Kuten tarkkaavaisimmat kävijät ovat ehkä havainneet, on blogini ulkoasu kokenut pienenpienen muutoksen. Tähän oli syynä se, että kyllästyin vanhan blogipohjani harmauteen, vaikka muuten olikin ihan kiva blogipohja. Olisinhan minä voinut kyseisen blogipohjan väritystä lähteä myöskin muuttelemaan, mutta sitten taas ajattelin, että kun kerran uudistetaan ulkoasua, niin tehdään se sitten kunnolla. Näin, vaikka alkuvuodesta vielä sanoinkin, että tuskin tulen uudistamaan ulkoasua tänä vuonna, mutta niin vain siinä kävi, että jotain uutta teki mieli ja tällainen siitä nyt tuli. Toivottavasti ei ole ihan hirveä. En kuitenkaan pitänyt blogin ulkoasun uudistamisen kanssa mitään kiirettä, vaan ajatus lähti kehittymään ehkä tuossa reilu kuukausi sitten, mutta tuolloin vielä ajattelin uudistusten läpiviemisen vievän useammankin kuukauden, mutta ihan niin kauan tässä ei kuitenkaan mennyt. Tämä viikko on ollut aktiivisemman kehitystyön viikko ja välillä on ollut hyvin vaikeaa lopettaa koodaamista (täällä Vuodatuksessa siis muokataan blogipohjia koodinäkymässä), mutta aiempina viikkoina olen saattanut jotain pientä tehdä, jos olen löytänyt aikaa esimerkiksi niillä ruokatunneilla kun ei ole ollut arvostelua kirjoitettavana. Tiedän, että se, mitä kerron seuraavissa kappaleissa, ei ole kaikille kovinkaan mielenkiintoista luettavaa, mutta minun on vain päästävä purkautumaan johonkin tästä prosessista, koska se oli kuitenkin tietyllä tavalla raskas.

Opiskelin joskus 90-luvun lopussa itsenäisesti html-kieltä vähäsen, koska silloin jokaisella tietokonenörtillä tuntui olevan omat kotisivut ja pitihän mullakin sitten sellaiset olla, vaikka hyvin alkeelliset olivatkin ulkonäöltään. No, vuosien vieriessä en löytänyt mitään käyttöä niille vähäisillekään taidoille ja nyt kun aloitin tämän uuden ulkoasun suunnittelun (valmiin blogipohjan pohjalta), niin hädin tuskin muistin mitään komentoja ja varmasti muistin vain linkki- ja rivinvaihtokoodin; lisäksi nämä blogipohjat käyttävät myös css-koodia, josta minä en ollut edes perillä etukäteen. Niinpä mulla olikin aina backup toisessa ikkunassa, kun väänsin tätä ulkoasua osittain leikkaa ja liima -periaatteella, mutta samalla kokeile ja (epä)onnistu -metodilla. Toisin sanoen koodissa oli paljon kohtia, joista en tiennyt, mitä ne tekevät, joten lähdin rohkeasti vain kokeilemaan kaikenlaista. Samaten jos tiesin, mitä minun olisi muutettava, niin oikean paikan löytäminen vei toisinaan oman aikansa. Jos en osunut oikeaan, niin uusi yritys; toisinaan yksittäisen tyydyttävän koodiratkaisun löytymiseen meni aikaa jopa tunteja. Minulla oli aika valmis kuva etukäteen siitä, millaisen ulkoasun haluan (värejä lukuun ottamatta) ja niinpä ihan tyhjästä ei tarvinnut sitä koodia lähteä muuttelemaan. Ihan kaikkea haluamaani en osannut muokata kuntoon, mutta tämä ulkoasu vastaa aika lähelle sitä, mitä lähdin hakemaankin.

Jos prosessista jotain sanoisi, niin ihan ensin heitin otsikkoruutuun tuon kuvan (se piti alun perin olla vain kerran ja oikealla puolella blogin otsikkoa) sekä lähes kaikki background-image -koodit muutin toisistaan hyvin poikkeaviksi värikoodeiksi (Google oli ystäväni tässä suhteessa). Kuvan perusteella lähdin tekemään erilaisia kokeiluja ja alunperin ajattelin kyllä hieman tummempia sävyjä koko blogiin, mutta mustavalkokuva ei oikein istunut siihen, vaan olisi vähän niin kuin jäänyt vieläkin hämärämmäksi. Minulla oli hetken aikaa eräs (tumma) Disney-tausta, mutta ensinnäkään se ei sopinut tuon kuvan viereen kovinkaan hyvin ja se ei tietenkään ollut koko sivun kokoinen, mikä aiheutti saman taustakuvan näkymistä moneen kertaan, joten luovuin siitä. Olisin saanut sen aika hyvin peittoon, jos olisin saanut oikeanpuoleisen palkin jatkumaan yhtä pitkälle kuin itse postilaatikon eli tämän vasemmanpuoleisen valkotaustaisen palkin, mutta tämä ei pitkän googlettelun perusteella ole kauniilla tavalla mahdollista, varsinkin kun postilaatikkopalkin pituus vaihtelee jokaisen kirjoituksen jälkeen edes vähän. Palkkien yläosan sain sentään yhteensovitettuna eli alkamaan samasta kohdasta.

Tajusin sitten jossain vaiheessa, että tarvitsen noinkin mustan kuvan vastapainoksi nimenomaan haaleita värejä ja niinpä kokeilin blogin taustaväriksi ensin hyvin vaaleaa vaaleanpunaisen sävyä, mutta se ei istunut ihan niin hyvin kuin olin toivonut, joten tämä vaalensininen sävy oli sitten heti toisena mielessä; no, taisin muutamaa sävyä kokeilla ennen kuin löysin tämän. Tämän sinisen sävyn löydettyäni aloin sitten käymään läpi muita laatikoita ja alun perin piti otsikkolaatikkokin olla värillinen, mutta luovuin siitä syistä, joita mainitsen seuraavassa kappaleessa. Olin tehnyt tietoisen päätöksen siitä, että itse postilaatikkopalkin taustaväri olisi valkoinen, koska pidän vain mustaa valkoisella -tyylistä, mitä blogikirjoituksiin tulee. Sitten vääntämään tuo oikean palkin väri kuntoon ja oranssi ei suinkaan ollut selviö, vaan kokeilin monia muitakin eri värejä (keltainen, punainen, vihreä) ennen kuin päädyin oranssiin, joka istuikin ihan kivasti. Alun perin piti värjätä kommentointinapit toisenvärisiksi, mutta koska niiden taustavärit olivatkin itse asiassa kuvia, niin ei käynytkään niin helposti. Vaihdoin kyllä kuvan väriksi, mutta sillon napista tuli ihan epämuodostunut, joten luovuin siitä. Nyt blogissa olevat napit itse asiassa on "pöllitty" toisesta valmiista blogipohjasta, koska tämän muokkaamani blogipohjan omat napit olivat liian tummia. Viime yönä piti sitten tehdä viimeiset värimuutokset eli harmaiden kommentointilaatikoiden tilalle piti saada jotain muuta ja tämä piti tehdä nimenomaan yöllä, koska a) en ollut lainkaan varma, mistä kohdin koodia sitä väriä piti muuttaa, joten siinä olisi voinut mennä enemmänkin aikaa ja koska  b) kommentointilaatikot sisältäviä sivuja ei päässyt katsomaan esikatselutilassa (siinä vain etusivu), joten jos halusin päästä käsiksi näihin laatikoihin vaivihkaa, niin minun piti tehdä se keskellä yötä, kun piti julkaista vähäksi aikaa tämä blogipohja ja se oli parasta tehdä silloin, kun liikennettä oli mahdollisimman vähän. Tein periaatepäätöksen, että saman värin eri sävyjä en käyttäisi eri puolilla blogia, mutta kommenteissa jouduin vähän tinkimään tästä, koska minusta vain oli paras ratkaisu, että kommenttilaatikko ja kommentinkirjoituslaatikko olivat melkein samaa sävyä, kun samaan "kastiin" kuuluivat kuitenkin. Viime yönä myös vaihdoin oranssiboksn fonttien värejä sekä poistin turhan kuvakkeet kuukausien edestä. Tuo keltainen "väliviiva" oli alun perin harmaa, joten sekin piti muuttaa. Senkin olisi saanut "pois" heittämällä se valkoiseksi (koodia, jolla sen olisi saanut oikeaoppisesti pois, en osannut muokata), mutta toisaalta se myös sopi siihen mielestäni sen verran hyvin, että annoin. Alalaidassa se on kyllä vähän ikävän näköinen.

Huomaatteko tuon kolon oikeassa yläkulmassa? Ensin yritin saada tuon kuvan sopimaan siihen otsikkolaatikon viereen, mutta en saanut sitä siihen haluamallani tavalla, joten päätin sijoittaa sen tuohon paikalle, jossa tuo oikeanpuoleinen kuvakin on. Alun perin minun piti suunnitella blogin otsikkokenttäänkin oma värinsä niin nimelle kuin taustallekin, mutta sitten kun oikeastaan viimeisten ratkaisujen joukossa keksin sijoittaa toisen kuvan otsikkolaatikon vasemmallekin puolelle (tämä sen jälkeen, kun opin, kuinka helposti se käy), niin ajattelin, että otsikkolaatikko näytti hienommalta ilman ylimääräisiä värimuutoksia. Tuo otsikon fonttikin syntyi aivan loppuvaiheilla. Mitä tulee sitten siihen, että otsikkolaatikko ei ole kiinni tuossa postilaatikkopalkissa, johtuu vain siitä, että vahingossa onnistuin irrottamaan ensimmäisen jälkimmäisestä ja kun lopputulos näytti hyvältä, päätin antaa sen olla.

Tuosta kuvasta sanottakoon sen verran, että kyseisenlaista kuvaa haaveilin jo ensimmäiseen blogipohjaani, mutta minun taitoni piirtämisen saralla jää Paintin tasolle ja siinäkin hyvin huonosti piirtämiseen, joten kerroin eräällä foorumilla, minkälaisen kuvan haluan (minulla oli hyvin alkeellisen mallikuva) ja hän osasi tehdä juuri sellaisen kuvan minulle, kuin mistä minä tykkään, joten jos hän lukee tätä, niin suuret kiitokseni hänelle. Sanoin niissä antamissani ohjeissanikin, että hän saa nimensä/nimimerkkinsä näkyviin johonkin, jos vain haluaa.

Yksi niin sanottu ylimääräinen muutos, minkä sain sitten aikaan, oli nuo saamani blogitunnustukset tuonne oikeaan laitaan. Olisin saanut ne jo aiempaan blogipohjaan, mutta silloin olin liian laiska ruvetakseni miettimään sitä, miten ne sinne saisin, mutta nyt kun muutenkin koodia vääntelin, niin menivät sitten siinä samalla (vanhassa ulkoasussa nyt kun kokeilin, niin näyttivät siinä aika ankeilta). Ei siinä, että itse blogitunnustusten saamiseen olisi tarvittu tippaakaan koodia, mutta jotta sain nuo tekstit paikoilleen tuossa koossa ja tuolla rivivälillä, piti minun tehdä se koodinäkymässä. Tämä oli se ihan vihoviimeinen temppu, joten kaiken muun jälkeen siinä ei kauan nokka tuhissut, varsinkin kun ne vanhat taidot sieltä yli kymmenen vuoden takaa palautuivat vähitellen mieliini. Myönnän toki, että kävin "koodivarkaissa" tiinasen blogissa ja otin sen lähdekoodista mallia, miten kuvia täytyy käsitellä koodinäkymässä niin, että ne näkyisivät sitten siellä sivupalkissa; toivottavasti ei pahastu ;) .

Vielä lopuksi sanottakoon, että päivitin tuon Leffablogilistani siltä osin, että poistin sieltä blogit, joihin ei ole kirjoitettu yli puoleen vuoteen ja lisäsin joitakin uusiakin listalle. Lisäksi muutin yhden leffablogin osoitteen, kun se oli tässä matkan varrella vaihtunut ja samalla pistin listalle ainakin yhden blogin, jota olen seurannut jo vuosia, mutta jota en ollut aiemmin pistänyt listalle, koska se on käsitellyt (ja käsittelee edelleen) vähän muitakin juttuja kuin pelkästään leffoja. Pari Blogilistan kautta löytynyttä (minulle) uutta tuttavuutta kuitenkin jätin edelleen pois ihan siitä syystä, että ne ovat käsitelleet vieläkin enemmän muita kuin leffa-aiheita, joten täysverisiksi leffablogeiksi ei niitä voi kutsua.

Tämä ulkoasu ei ole kuitenkaan ihan täysin valmis, vaan vieläkin on joitakin pikkujuttuja, mitä voin lähteä korjailemaan, jos aikaa ja halua riittää, mutta tällä hetkellä ne ovat ongelmia, joihin en tiedä ratkaisua, enkä tiedä, tulenko niihin koskaan sellaisia löytämäänkään, mutta ainakin pohdinnan alla ovat. Tämä niin sanottu to do -lista sisältää ainakin seuraavat asiat.

- Kommenttinapit vasempaan reunaan. Tein blogipohjaa uusimmalla Firefoxilla, joka on pääasiallinen selaimeni, ja kaikki näytti hyvältä, eli kommenttinapit olivat vasemmassa reunassa, mutta sitten kävin kokeilemassa IE8:lla ja uusimmalla Operalla ja niillä oikeanpuoleinen kommenttinappi oli keskellä, eikä suinkaan toisen vieressä vasemmassa reunassa. Tämä on ongelma myös alkuperäisessä blogipohjassa, jota en siis ollut muuttanut yhteen. Monilla muilla blogipohjilla (kuten edellisessä käyttämässäni) samanlaiset kommenttinappiratkaisut näyttivät kaikilla kokeilluilla selaimilla oikein. Niinpä muokkasin suosimallani kokeile ja (epä)onnistu -metodilla koodia niin, että kaikilla kolmella selaimella bloginapit ovat samassa paikassa, joskin keskellä. Asiasta olen informoinut Vuodatus.netin tukihenkilöä ja jos hän ei keksi siihen ratkaisua, niin voi olla, ettei tämä muutu, mutta tämä on vielä tällä hetkellä tärkeyslistan kärkipäässä.

- Huomasin tarkistaa asian vasta tämän viestin lähetettyäni, mutta näköjään otsikkopalkki pienenee ja otsikko menee kuvien päälle, kun ikkunaa pienentää, joten täytyy tässä vielä katsella, josko saisi siihen jotain muutosta aikaan. Tämä käsittääkseni voi vaikuttaa näkyvyyteen pienemmillä näytöillä, joten olisihan se kiva saada kuntoon.

- Näköjään omien sivujen kohdalla valkoinen ja oranssi palkki eivät ala samasta kohtaa, mutta ainakaan tähän hätään minulla ei ole ratkaisuehdotusta siihen, mutta jos joskus intoudun taas vääntämään koodia, niin mitä jottei voisi yrittääkin saada sitä kuosiin. Kyseisiä sivuja käytetään kuitenkin sen verran vähän (kai), etten näe suurta kiirettä asialle. Voi olla, että jossain vaiheessa pyrin pyytämään viisaampia apuun asiassa.

- Täytyy jossain vaiheessa tutkia, josko saisi keltaiset "väliviivat" pois tuolta alareunasta niin, että muualta ne eivät häviäisi, mutta jos en, niin voi olla, että on edessä niiden poisto kokonaan valkoista väriä käyttäen.

- Viimeisenä aina silloin tällöin varmaan pohdin tuota oranssin palkin pituuden yhteensopivuutta postilaatikkopalkin kanssa, mutta koska siihen ei ole tähänkään mennessä keksitty kunnon ratkaisua, voi olla, ettei siihen ole kelvollista ratkaisua, mutta ainakin mietinnän alla on.

Mutta joo, saa kommentoida ja rutista. Jos käytätte jotain muita selaimia kuin Operaa, Firefoxia ja IE:tä, niin kertokaa toki, jos on jotain ongelmia, mutta voi olla, että minun vastaukseni tulee vain olemaan se, että käyttäkää sitten mieluummin jotain noista kolmesta, kun olette täällä, sillä en varmasti takaa sitä, että minä vähillä taidoillani onnistuisin löytämään oikean ratkaisun. Chromen voisin periaatteessa ladata koneelle, jos se tuottaa jotain ongelmia ja muut käyttämäni selaimet eivät ongelmia näe. Safarinkin näköjään saa Windows-koneille (asia, joka selvisi minulle sekunti sitten tätä kappaletta kirjoittaessani), joten senkään lataus ei ole sitten poissa suljettu. Mitä tuossa koodinvääntelyn ohessa isoja html help -foorumeita kuikuilin, niin Safari kuulemma käyttäytyy toisinaan vähän oudosti kohdatessaan "peruskoodeja", joten tiedä sitten.

Ei kommentteja:

Lähetä kommentti