Kun sokea ulkoasuun kajosi

Olen töissä päässyt tekemään meidän hankkeen verkkosivuja. Samalla on pitänyt opetella hieman php:ta, koska sivut on WordPress-pohjaiset (kuten nämä omanikin…). Tähän saakka olen lähinnä vältellyt php:n käyttöä, mutta yllättävästi se on alkanut tuntua ihan mukavalta.

Sokkona verkkosivuja koodatessa ulkoasuasiat on ehkä ymmärrettävästi hieman haastavampia. Kyllähän sen ulkoasunkin pystyy vääntämään, kunhan vaan tietää, mitä pitää tehdä. Oma visuaalinen käsityskykyni ei kuitenkaan ihan riitä aina hahmottamaan, että miten monta pikseliä marginaalia pitäisi olla missäkin välissä, joten näkeviä silmiä ehdottomasti tarvitaan apuna.

Saan siis työkavereilta kommentteja tyyliin ”otsikon ja yläreunan väliin pitää saada lisää tilaa”, tai ”no nyt tossa kohtaa on ihan liikaa tyhjää”. Sitten yritän keksiä, että minkäköhän kokoinen marginaali siellä mahtaa tällä hetkellä olla… On tullut kaiveltua aika paljon CSS-tiedostoja, jotta saisin nykyiset tyylimääritykset selville. Sitten, kun ei ollutkaan mitään määritetty otsikon ylämarginaaliksi, pitikin etsiä googlesta oletusarvoja.

Nyt joku kysyy, että miksen katso voimassa olevia tyylejä inspektorista. No niinpä!

Tänään, kun taas väänsin sivuille (vielä julkaisematonta) ominaisuutta, keksin viimein, miten pystyn katsomaan ne voimassa olevat tyylimääritykset selaimesta. Ei ollut kuulkaa helppoa. Mutta näytän teille, miten se onnistuu Safarilla ja VoiceOverilla.

Tässä vaiheessa tiesin jo tarkkaan, mitä tehdä. Esimerkiksi tiesin, mikä inspektorin kolmesta ”tab”-painikkeesta pitää valita ja tiesin suunnilleen, miten (hiton) paljon pitää siirtyä eteenpäin, että pääsen sinne, mihin haluan. Ihan ekalla kerralla ei onnistunut näin sujuvasti.

Minulta menee siis noin kaksi minuuttia siihen, että saan katsottua yhden käyttöliittymäelementin voimassaolevista tyyleistä pari arvoa. Esimerkiksi juuri marginaalien kanssa täytyy sitten pitää mielessä, että kuinka monta pikseliä sitä oli missäkin suunnassa, jotta voi verrata marginaalin määrää muiden sivuilla olevien elementtien vastaaviin. Lopulta saattaa olla hatara käsitys siitä, minkä kokoisia välejä sivulla on.

P.s. Oli muuten aika vaikeaa kuvata näyttökaappausvideo niin, että siihen saa koneen äänet mukaan. SoundFlower ei toiminut minulla, sillä videoidessa ei pystynyt samaan aikaan monitoroimaan ääntä ja minun oli kuitenkin kuultava ruudunlukuohjelman puhe… Onneksi Loopback antoi myös monitoroida. Seuraavalla kerralla voisin muistaa sen suoraan, mitä ohjelmaa tähän käytin.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *