Web-suunnittelijan työkalupakki koostuu tietokoneesta, sen ohjelmistoista sekä web-sovelluksista. Ajattelinkin hieman valottaa, millaisilla laitteistoilla ja ohjelmistoilla web-sunnittelua ja siihen liittyviä oheistoimintoja tehdään. Tässä artikkelissa käsitellään Macin ohjelmistoja, mutta osasta on olemassa myös Windows-versiot.

Laitteistot

Työskentelykoneena hyrrää 27-tuumainen iMac, jossa pääasiallisena käyttöjärjestelmänä on OS X Lion. Koneeseen on asennettu myös Windows 7 Bootcampin ja Parallels-virtualisointiohjelmiston kautta toimivaksi, jotta työn alla olevat sivustot saadaan testattua myös Windows-ympäristössä.

Lisäksi työkalupakista löytyy myös Windows XP:llä varustettu läppäri, iPad sekä älypuhelin. Näillä välineillä saadaan sivustot testattua kattavasti erilaisissa ympäristöissä ja laitteissa. Lisäksi suurinäyttöisellä läppärillä ja mokkulalla voidaan järjestää nopeita käytettävyystestejä testihenkilöiden luona.

Ulkoisen verkkolevyn avulla on järjestetty varmuuskopioinnin ensimmäinen taso. Toisesta tasosta vastaa pilvipalveluna hankittu varmuuskopiointi, joka siis tallentaa tiedot netin yli turvalliselle palvelimelle.

Ohjelmistot ja web-sovellukset

Kuten arvata saattaa, web-suunnittelija työkalupakkiin mahtuu jos jonkinmoisia ohjelmistoja ja web-sovelluksia.

Stylizer

Stylizer on CSS:n muokkaamiseen tarkoitettu ohjelma, joka hakee vertaistaan. Sen avulla sivuston CSS-tyylien muokkaaminen on todella helppoa. Hieman harmaita hiuksia aiheuttaa Mac-version ajoittainen epävakaus, mutta Windows-käyttäjillä ei näitä ongelmia pitäisi olla. Tutustumisen arvoinen ehdottomasti. Kannattaa myös käydä läpi tutoriaalit, jotta Stylizeristä saa kaiken irti.

http://www.skybound.ca/

Coda

Luonnollisesti web-suunnittelija täytyy koodata sekä hallita FTP-yhteyksiä palvelimiin. Macin Coda on tähän hommaan erinomainen valinta. Se sisältää FTP-yhteysohjelman sekä sivustokohtaiset asetukset. Ominaisuudet eivät lopu tähän ja suosittelenkin tutustumaan ohjelmistoon tarkemmin.

http://www.panic.com/coda/

Jing

Jing on korvaamaton lyhyiden kuvaruutuvideoiden eli screencastien tekemiseen. Jingin avulla on todella helppoa tehdä nopea opasvideo asiakkaalle ja lähettää se Jingin palvelimelle sekä lähettää linkki videoon. Viiden minuutin aikaraja on tiukka, mutta pidempien videoiden katseleminenkin on hieman tuskallista, joten aikaraja pakottaa tiivistämään asian sopivan pituiseksi. On huomattavan helppoa näyttää asiakkaalle nopeasti lyhyen videon avulla, kuinka esimerkiksi lisätään uusi tuote verkkokauppaan, verrattuna siihen, että ohjeet kirjoittaisi.

http://www.techsmith.com/jing/

Wunderlist

Wunderlist on ehkä paras todo-listan hallintaohjelmisto, joka sisältää mm. eri laitteiden välisen synkronoinnin. Esimerkkitapaus: lounastauolla asiakas soittaa ja antaa työtehtävän, joka merkitään puhelimen Wunderlist-sovelluksella työlistalle. Uusi tehtävä synkronoituu tietokoneen Wunderlist-sovellukseen ja lounastauolta palatessa ei tarvitse pelätä unohtaneensa jotain tärkeää.

http://www.6wunderkinder.com/wunderlist/

Skitch

Skitch on erinomainen kuvankaappausohjelmisto Macille. Sillä on helppo rajata kaapattava osa työpöydästä ja tehdä kaappauksen jälkeen kuvaan tekstilisäyksiä tai esimerkiksi piirtää nuolia ja muita merkintöjä. Lisäksi kuvan voi jakaa näppärästi netissä, jolloin esimerkiksi asiakkaalle voi lähettää siihen linkin, jos ei halua jostain syystä lähettää kuvaa sähköpostitse.

http://skitch.com/

MAMP

MAMP on Macille tarkoitettu valmis paketti web-palvelimen ylläpitämiseksi Macilla. Erinomainen, kun haluaa testailla erilaisia julkaisujärjestelmiä ja verkkokauppaohjelmistoja. Sisältää Apachen, PHP:n ja MySQL:n.

http://www.mamp.info/en/index.html

FocusWriter

FocusWriter on sovellus paljon kirjoittavalle. Sen tarkoitus on poistaa häiriötekijät kirjoittamisen tieltä. Näet näytölläsi esimerkiksi vain mustan taustan ja vihreää tekstiä. Yksinkertaista, mutta tehokasta.

http://gottcode.org/focuswriter/

Evernote

Evernote on osoittautunut lähes korvaamattomaksi tiedonvarastointipalveluksi. Aina kun törmään mielenkiintoiseen sivustoon tai artikkeliin tallennan sen Evernoteen selaimen lisäosan avulla. Voin tallentaa joko pelkän artikkelin, koko sivun sisältöineen tai vain pelkän osoitteen. Evernoteen voi myös tallentaa omia tekeleitä tekstin ja kuvien muodossa. Jokaiselle varastoitavalle tiedolle voidaan asettaa hakusanoja ja esimerkiksi selaimen lisäosa kertoo Google-hakua tehtäessä, mikäli hakusanoilla löytyy jotain Evernotestakin. Työpöytäsovelluksella tiedon hakeminen on helppoa.

http://www.evernote.com/

LastPass

LastPass helpottaa elämää suunnattomasti. Se tallentaa kirjautumistunnukset kaikille haluamillesi web-sivustoille ja luo tarvittaessa turvalliset salasanat, joita ei tarvitse itse painaa mieleen. Ainoa mitä sinun täytyy muistaa, on LastPassin oma salasana, joka kannattaakin laittaa superhyväksi.

https://lastpass.com/

Oletusselain: Chrome

Oletusselaimena on Googlen Chrome. Se on nopea ja varsin minimalistinen sisältäen kuitenkin tärkeänä ominaisuutena Developer Toolsit, joilla sivustojen koodia ja toimintaa on helppo tarkastella. Lisäksi Chromen Incognito-tila mahdollistaa esimerkiksi usean käyttäjätilin samanaikaisen käyttämisen samassa web-palvelussa. Saman ajaa toki myös eri selainten käyttö.

Kun mukaan heitetään pari lisäosaa, on soppa valmis:

  • Clip to Evernote -lisäosan avulla on helppo tallentaa tärkeitä sivustoja ja artikkeleita Evernoteen.
  • Color Pickin avulla voi napata haluamansa värin miltä tahansa sivustolta ja viedä sen vaikka kuvankäsittelyohjelmistoon.
  • Stylebot antaa muokata minkä tahansa sivuston CSS-koodia ja tallentaa sen, joten ei enää liian pieniä fonttikokoja suosikkisivustoillasi.
  • Screen Capturen avulla on helppo ottaa koko sivun pituisia kuvakaappauksia.
  • Web developer -lisäosan avulla on helppo testata sivuja esimerkiksi ilman CSS-koodia tai kuvia.
  • Window Resizer tekee sivustojen testaamisen eri kokoisia näyttöjä varten helpoksi. Tämä on tärkeää etenkin 27-tuumaisella iMacilla työskennellessä…

Reeder

Jos luet paljon blogeja, Reeder on pakkohankinta. Se on paras RSS-syötteiden lukemiseen tarkoitettu sovellus, johon olen törmännyt.

http://reederapp.com/mac/

Dropbox

Tiedostojen jakaminen on helppoa, kun siihen on oikeat työvälineet ja Dropbox on tähän hommaan paras ratkaisu. Kun Dropboxin vieläpä yhdistää AirDropper-nimiseen web-palveluun, joka mahdollistaa asiakkaille tiedostojen lähettämisen suoraan koneelleni, ei tule enää kuuloonkaan häslätä CD-levyjen ja muistitikkujen kanssa.

Dropboxin avulla on myös helppo synkronoida tiedostoja eri laitteiden välillä. Nappaa kuva puhelimellasi ja se on napin painalluksella tietokoneellasi.

https://www.dropbox.com/
https://airdropper.com/

TweetDeck

TweetDeck on minun valintani Twitter- ja Facebook-tilien hallintaan. TweetDeckistä löytyy niin erillinen työpöytäsovellus kuin selaimeen asennettava lisäosaversiokin. Jos sinulla on esimerkiksi useita Twitter-tilejä, TweetDeck on hyvä valinta myös sinulle.

http://www.tweetdeck.com/

Paymo

Paymo on työajanseurantapalvelu, jonka avulla on helppo pysyä kärryillä eri projekteihin käytetystä työajasta. Paymon webhallinta voi olla tarpeisiin nähden jopa ylimitoitettu, mutta ajanseurantapalveluna ja -ohjelmistona Paymo on varteenotettava. Paymon työpöytäwidget esimerkiksi katkaiseen niin halutessasi ajan laskemisen, jos koneella ei vähään aikaan tee mitään.

http://www.paymo.biz/

Lopuksi

Tässä jutussa käytiin läpi joitain web-suunnittelijoiden käyttämiä työkaluja. Työkaluja löytyy toki monenlaisia, eivätkä nämä tietenkään ole kaikkien mielestä parhaita vaihtoehtoja. Näiden avulla työnteosta tulee kuitenkin parhaimmillaan tehokasta ja vaivatonta.