Verkkokauppaopas

Verkkokaupan perustaminen on Avanian ydinosaamista. Klikkaa tästä ja lue lisää!

Lukijoiden suosimat verkkokauppa-alustat

Kirjoittanut Janne on 22.11.2014

Vuoden 2010 kesäkuusta saakka sivustolla on pyörinyt kysely lukijoiden suosimista verkkokauppa-alustoista. Muistin yhtäkkiä kyseisen kyselyn olemassaolon ja ajattelin, että olisi mukava nähdä mitkä alustat ovat lukijoiden joukossa suosittuja. Tässä siis kyselyn tulokset. Huomatkaa, että osa mainituista verkkokauppa-alustoista on jo kuopattu (esimerkiksi Wosbee). Lisäksi kannattaa muistaa, että tulokset kertovat vain ja ainoastaan tämän blogin lukijoista ja […]

lue lisää

Kotimainen vs. ulkomainen verkkokauppa

Kirjoittanut Janne on 27.04.2009

Parempi puoliskoni shoppaili männäviikolla tuotteita sekä ulkomaisesta että kotimaisesta verkkokaupasta. Samanaikaisten tilausten ansiosta ostotapahtumien ja palvelun vertaileminen tuli ikään kuin luonnostaan. Vertailun tuloksissa suomalainen verkkokauppa hävisi palvelussa ja ostotapahtuman kokonaisuudessa sata nolla.

lue lisää

Verkkokaupparatkaisut suomalaiselle kauppiaalle

Kirjoittanut Janne on 26.02.2009

En löytänyt mistään kattavaa listaa, josta selviäisi suomalaiselle verkkokauppiaalle sopivia verkkokaupparatkaisuja, joten ajattelin listata ratkaisut tähän juttuun. Tarkoitus on päivittää listaa ajan myötä, joten lukijoilta toivotaan kommentteja listan sisällöstä. Rajaavaksi tekijäksi valitsin valmiin mahdollisuuden suomalaisten maksutapojen lisäämiseksi verkkokauppaan.

lue lisää

Stylizer – CSS-editointia tyylillä

Kirjoittanut Janne 25.11.2009

Web-suunnittelu on monivaiheinen prosessi, jota suoraviivaistamalla moni suunnittelija pystyisi säästämään suuren sylillisen työaikaa. Prosessissa on usein puuduttavan yksitoikkoisia vaiheita, jotka poistamalla monen suunnittelijan elämänlaatu paranisi suuresti.

Usein web-suunnittelu etenee jokseenkin tätä rataa:

  1. Tehdään HTML-koodit jollain koodieditorilla (joku hullu saattaa käyttää notepadiakin)
  2. Tallennetaan HTML-tiedosto
  3. Siirretään HTML-tiedosto palvelimelle ftp-ohjelmalla
  4. Tehdään CSS-koodit
  5. Tallennetaan CSS-tyylitiedosto
  6. Siirretään CSS-tiedosto palvelimelle ftp-ohjelmalla
  7. Avataan sivu Firefoxiin ja tarkistetaan lopputulos
  8. Avataan sivu IE:hen ja tarkistetaan lopputulos
  9. Avataan sivu IE6:een (tai IETester) ja tarkistetaan lopputulos

Tämän jälkeen aloitetaan lähes päättymätön looppi kohtien 4-9 välillä ja joskus jopa kohtien 1-9 välillä, jotta sivuston ulkoasu saadaan hiottua kuntoon. Jokaisessa syklissä ei tietenkään jaksa tarkistaa tilannetta aivan kaikilla selaimilla, joten työskentelyn lopussa törmää hyvin suurella todennäköisyydellä ongelmiin ainakin IE6:n tapauksessa. Hommaan liittyy siis huomattava määrä vaiheita, jotka poistamalla suunnittelija pystyisi säästämään elämänsä aikana rutkasti työaikaa.

Stylizer

Törmäsin muutama viikko sitten täysin sattumalta CSS-editoriin nimeltään Stylizer, joka tarjosi 14 päivän maksuttoman kokeilujakson. Odotukset eivät itseasiassa olleet kovin korkealla, koska erilaisia, toinen toistaan huonompia editoreita on tullut testattua jonkin verran aikojen saatossa.

Parin viikon testijakson jälkeen Stylizer lopetti toimimasta täydellä teholla ja olin aivan hukassa. Ohjelma oli onnistunut nipistämään monta tuskaista rutiinivaihetta pois työprosessistani. Paluuta menneeseen ei ollut, joten ei auttanut kuin ostaa 59 euron hintainen lisenssi.

Siinä missä esimerkiksi Dreamweaver mahdollistaa sekä HTML-koodin että CSS-koodin muokkaamisen, Stylizer keskittyy siis ainoastaan CSS-koodin muokkaamiseen. Mutta se ei haittaa, sillä se tekee CSS-muokkaamisesta vaivatonta.

Kuten alla olevasta kuvasta näkyy, Stylizer näkyy vasemmalla selainikkuna ja oikealla tyylitiedot. Kun ohjelman selaimeen lataa jonkin www-sivun, lataa se automaattisesti kaikki sivuun liittyvät tyylitiedostot, jotka tulevat näkyviin listaksi oikeaan ylänurkkaan. Kuvan selainkuva näyttää siniseltä, koska elementtivalitsimellä on tehty valinta yhteen yläosan linkkiin.

stylizer-screen

Stylizer CSS-editori

Välilyöntiä painamalla saa selainikkunaan elementtivalitsimen, jolla saa näppärästi näkyviin elementtiin liittyvät tyylimääritykset.

Uusien elementtikohtaisten tyylien määrittäminen käy näppärästi valitsemalla elementtivalitsimella haluamansa elementin selaimesta, klikkaamalla haluamansa valitsimet valituiksi ja klikkaamalla lopuksi Make rule -painiketta. Tämän jälkeen voi siirtyä säätämään kyseisen elementin tyylitiedot kohdilleen. Tyylimuutokset näkyvät välittömästi ohjelman selainikkunassa. Stylizer tukee Firefoxia ja IE:tä ja siinä pystyy avaamaan näppärästi molemmat selaimet eri välilehtiin.

Kun tyylit on määritelty ja ne näyttävät hyvältä ohjelman selaimessa on aika painaa ctrl-s ja tiedosto tallennetaan automaattisesti palvelimelle, kunhan on määrittänyt ftp-yhteyden ja tiedostopolun oikein.

IE6

Pienenä puutteena joudun edelleen tarkistamaan tilanteen erikseen IETesterillä IE6:sta varten, sillä ohjelmisto ei ilmeisesti sitä tue. En ole tosin varman kuinka homma menee, jos koneessa ei ole muita IE-versioita kuin IE6. Mutta hei, IE6 taitaa olla jo kahdeksan vuotta vanha selain, joten joku roti hommaan. Ainoa syy miksi se on vielä hengissä on se, että web-suunnittelijat ovat jaksaneet tehdä sille sivuista oman version, eikä IE6-käyttäjien ole tarvinnut päivittää selaimiaan. Okei, osa ei osaa päivittää selaintaan, mutta heidänkin lapset tai viimeisteään lastenlapset osaavat. Niissä yrityksissä, joissa IE6 on vielä käytössä, ainoa syy päivittämättä jättämiseen on se, että sivut edelleen toimivat sillä. Tilanne muuttuisi kyllä välittömästi, kun tyytymättömät työntekijät urputtaisivat riittävästi toimimattomista sivustoista käyttötukeen. Onneksi tilanne alkaa jo näyttämään paremmalta ja kyseinen selain alkaa pikkuhiljaa hautautumaan muumioituneena sinne minne se kuuluukin eli historian lehdille. Olen itse kuluttanut lukemattomia tunteja korjaamalla ja selvittämällä IE6:een liittyviä ongelmia. Mittani alkaa olla täynnä, kuten varmaan huomaa.

Säästöä työajassa

Sitten takaisin asiaan eli Stylizer. Oma työni nopeutuu ainakin merkittävästi, kun osa vaiheista jää kokonaan pois. Alkuvaiheen HTML-vaiheet teen edelleenkin Programmer’s Notepadilla ja heitän palvelimelle WinSCP-ohjelmalla. Siirto hoituu automaattisesti tallentamalla.

Alla nykyinen suunnitteluprosessini:

  1. Tehdään HTML(/PHP)-koodi Programmer’s Notepadilla
  2. Tallennetaan HTML-tiedosto (sirtyy palvelimelle samalla)
  3. Avataan sivu Stylizerin selaimella ja muokataan CSS-tyylit kohdilleen (lopputulos näkyy heti silmieni edessä Firefoxilla ja yhden klikin kautta IE:llä)
  4. Tallennetaan tyylitiedosto (siirtyy automaattisesti palvelimelle)
  5. Tarkistetaan sivun ulkoasu IE6:lla

En tiedä välittyykö tämän tekstin kautta ajansäästö, mutta voin oman kokemukseni perusteella sanoa, että työaikaa ja hermoja säästyy rutkasti.

Toki samankaltaiseen lopputulokseen saattaa päästä muillakin ohjelmistoilla, kuten Firefoxin lisäosalla Firebugilla ynnä muilla. Firebugille on edelleen oma käyttönsä ja sitä tarvitsen myös usein, mutta senkin käyttö on vähentynyt Stylizer myötä selvästi.

Kertokaapa te, arvon lukijat, omista työskentelytavoistanne ja käyttämistänne ohjelmistoista.

Aihealue: www-suunnittelu.

Avania on oululainen verkkokaupan ja Internet-palveluiden asiantuntija.

Kirjoittaja: Janne Kuntola. Seuraa Jannen Google+ profiilia

Jätä kommentti