MyCashflow blogi

Miska kirjoitti 31.3.2009 kategoriaan Interface-merkkaus avainsanoilla helper Interface tagit Interface-merkkaus: 0

Yksi mahdollinen käyttökohde helper-attribuutille

Aina Interface-komentojen oletustulostus ei ole sitä mitä haluat. Silloin voit komennon helper-attribuutilla kutsua helper-tiedostoa, joka sisältää haluamasi listauksen yksittäisen elementin tulostuksen. Tallenna helper-tiedosto html-muodossa MyCashflow-teeman hakemistoon, ja ota helper käyttöön asettamalla helper-attribuutti haluamallesi komennolle. Helper-attribuutti toimii suurimmassa osassa Interface-komentoja, joilla listataan jotain, kuten nosto- ja tuotelistoissa, sekä tuoteryhmänavigaatiossa.

Kuinka helper-attribuutti toimii?

Helper-attribuutin toimintaperiaate on yksinkertainen. Kun helper-tiedostoa kutsutaan listaukselle, niin tiedoston sisältöä käytetään listauksen yksittäisen elementin tulostuksena. Helper-tiedosto käyttäytyy kuten listauksen yksittäinen elementti käyttäytyisi, eli esimerkiksi {Products(helper:'listhelper')} komennolla navhelper.html tiedoston sisältö vastaa yhtä tuotelistan tuotetta ja tiedoston sisällä toimivat kaikki komennot, jotka toimivat tuotekortissakin.

Käytännön esimerkki helper-tiedoston käytöstä

Lähtöasetelma

Käymme tässä läpi kuvitteellisen kaupan etusivun toteuttamisen helper-attribuuttia hyödyntäen. Alkuasetelmana toimii kauppa, jossa tulee olemaan kolme päätuoteryhmää, joilla ei tule olemaan alakategorioita.

Kaupan tilaaja haluaisi nostaa jokaisesta päätuoteryhmästä yhden suosituimman, uusimman ja itse määräämänsä tuotteen etusivulle. Lisäksi asiakas on toivonut, että tuotteista näytetään nimen ja kuvan lisäksi lyhyt kuvaus ja ostaminen olisi mahdollista suoraan etusivulta. Tuotteet ovat sen laatuisia, ettei niillä ole variaatioita eikä varastosaldoja.

Esimerkissä käytetyt tiedostot

Helper-demon ulkoasusuunnitelma

Esimerkissä käytetyt tiedostot saat haettua tästä ja itse toimiva demo löytyy täältä. Alla olevassa oppaassa on selvennetty lähinnä Interface-komentojen ja -attribuuttien toimintaa, joten itse css- ja html-osaaminen täytyy löytyä lukijalta ennestään. Tyylitiedostoa on kommentoitoitu kuitenkin selkeyden vuoksi tavanomaista enemmän niiltä osin kuin se on nähty tarpeelliseksi.

Suunnitelma

Kauppiaan toiveiden pohjalta kaupan etusivun suunnitteleminen on hyvin suoraviivainen prosessi. Tarkoituksena on jakaa sisältöalue kolmeen palstaan, joista jokaisessa on ylhäällä tuoteryhmän nimi, kuva ja esittelyteksti, joiden alle tuotteet listataan allekkain. Ohessa kuva luonnoksesta, jonka pohjalta toteuttaminen aloitetaan.

Tuotenostoja jokaisesta tuoteryhmästä

Koko etusivu tulee toimimaan {Categories} komennon sisällä, jotta saisimme tulostettua etusivun tuotteet tuoteryhmittäin. Päätuoteryhmät saamme listattua etusivulle {Categories(levels:1,helper:'maincategories')} komennolla, jossa levels-attribuutti rajaa tulostettavien tuoteryhmätasojen määrän yhteen ja kutsumme komennolle helper-tiedostoa “maincategories.html”. Tämän helper-tiedoston sisällä voimme sitten käyttää kaikkia tuotelistanäkymässä käytettäviä komentoja. Otamme mukaan tuoteryhmän fiiliskuvan: {CategoryImage}; kuvauksen: {CategoryDescription}; sekä tarvittavat tuotenostot: {CategoryNewProducts}, {CategoryTopSellers} ja {CategoryHotPicks}.

Limit-attribuutti

Kaikilla tuotenostokomennoilla käytämme attribuuttia limit: 1, joka rajaa listauksen vain yhteen tuotteeseen, sekä kutsumme komennoille “featuredproducts.html” nimisen helper-tiedoston, joka vastaa kaikkien tuotteiden tulostuksesta. Tämän helper-tiedoston sisällä toimivat kaikki tuotekorttinäkymässäkin toimivat komennot, joten voimme helposti toteuttaa asiakkaan toiveen lyhyen kuvauksen ja ostotoimintojen tuomisesta etusivulle tämän helperin avulla.

Type-attribuutti

Lisäksi komennoilla on hyvä käyttää type-attribuutilla arvoa ‘normal’, koska tuotenostot listataan oletuksen ‘list’ arvoa käyttäen, joka tulostaa tuotteet <ul>-elementin sisään <li>-elementteinä, jolloin helperiä käyttäessä listattavat tuotteet tulostettaisiin edelleen <ul>-elementin sisään ja tässä tapauksessa emme sitä halua.

Tuotteiden yksilöinti classes-attribuutilla

Lisäksi tuotteiden erottamiseksi toisistaan käyttämme tuotelistakomennoilla classes-attribuuttia, jonka avulla saamme jokaisen tuotteen sitovalle div-elementille tulostettua halutun luokkanimen ilman, että jokaiselle listalle tarvitsee tehdä omaa helper-tiedostoa. Tämän luokkanimen perusteella sitten voimme muuttaa tuotteen värejä ja taustakuvia tyylitiedostossa. Mikäli tulostaisimme yhdellä komennolla kolme tuotetta peräkkäin, joista jokaiselle haluamme eri luokkanimen, se onnistuisi myös erottamalla eri luokkanimet toisitaan pystyviivalla: classes:'Eka|Toka|Vika'.

Tuoteryhmän tiedot ja nostot tulostava categories.html -helper kokonaisuudessaan alla. Tiedosto tallennetaan teema-hakemiston juureen.

<div class="Col">
  <div class="CategoryIntro">
    <h2><a href="{CategoryURL}">{CategoryName}</a></h2>
    <a href="{CategoryURL}" class="CategoryImage">{CategoryImage}</a>
    <div class="CategoryDescription">{CategoryDescription}</div>
  </div>
  {CategoryTopSellers(type:'normal',helper:'featuredproduct',classes:'Wanted',limit:1)}
  {CategoryHotPicks(type:'normal',helper:'featuredproduct',classes:'Featured',limit:1)}
  {CategoryNewProducts(type:'normal',helper:'featuredproduct',classes:'Fresh',limit:1)}
</div>

Yhdeksän tuotteen voimanlähteenä yksi helper-tiedosto

Luomme yksittäisen tuotteen näkymän helper-attribuutilla kutsumamme featuredproduct.html-tiedoston sisälle. Tämän tiedoston sisällä olisi mahdollista käyttää kaikkia samoja komentoja kuin täydessä tuotekorttinäkymässä, joten mahdollisuuksia olisi rajattomasti, mutta pitääksemme etusivun selkeänä käytämme niistä tässä vain muutamaa.

Ensimmäisenä teemme koko komeuden ympärille <div>-elementin jolle luokkanimeksi tulostetaan tuoteluokat {ProductClass} komennolla. Koska haluamme tehdä ulkoasun kaikkien taiteen sääntöjen mukaan, tulostamme tuotetiedot ennen tuotekuvaa ja vasta sen jälkeen tulostamme tuotekuvan sekä <span>-elementin tuotteen ns. avainsanaa varten.

Voisimme hoitaa kuvan tulostamisen {ProductListImage} komennolla, joka tulostaa tuotekuvan käyttäen tuotekuvan “lista” kokoasetusta, eikä kuvaa ympäröivä linkki osoita isoon versioon kuvasta, vaan tuotekorttinäkymään. Emme kuitenkaan tee näin, koska haluamme tuotelinkin sisälle muutakin kuin pelkän tuotekuvan.

Teemme tuotekuvan linkin itse käyttäen {ProductUrl} komentoa, joka tulostaa käsiteltävän tuotteen osoitteen ja tämän linkin sisälle tulostamme kuvan ilman linkkiä ja oikeassa koossaan seuraavalla komennolla: {ProductImage(link:'false',imagesize:'list')}. Lisäksi linkin sisään tulee vielä <span>-elementti, jonka sisään tulostamme :after-pseudoelementin ja content-ominaisuuden avulla tuotteen avainsanan.

Enää tarvitsemme tuotteen hinnan ja koriin lisäämisen. Teemme tuotteen alaosaan näitä toimintoja varten koko tuotteen leveydelle div-elementin, joka saa taustavärinsä tuotteen luokkanimen perusteella, jolloin tuotteiden erottaminen toisistaan helpottuu. Käytämme täällä tuotteen raakaa hintakomentoa {ProductPrice}, joka tulostaa vain myyntihinnan ilman valuuttamerkkiä. Lisäksi tulostamme ostotoiminnot {ProductBuy} komennolla, josta piilotamme kaiken muun paitsi “Lisää ostoskoriin” -napin.

Helper-tiedoston featuredproduct.html sisältö näyttää lopulta tältä:

<div class="{ProductClass}">
  <div class="ProductInfo">
    <h3><a href="{ProductUrl}">{ProductName}</a></h3>
    {ProductShortDesc}
  </div>
  <a href="{ProductUrl}" class="ProductImage">
    {ProductImage(link:'false',imagesize:'list')}
    <span class="ProductTag"><!--[if IE]>{ProductPrice}<![endif]--></span>
  </a>
  <div class="ProductFooter">
    <p class="ProductPrice">{ProductPrice}<span class="Currency">&euro;</span></p>
    {ProductBuy}
  </div>
</div>

Loppusanat

Näin olemme käyneet läpi helper-attribuutin toimintaa, kutsumalla tuoteryhmille helper-tiedoston ja sen sisältä kutsuneet uuden helper-tiedoston tuotelistoille. Tämän avulla saamme täyden kontrollin siihen, kuinka haluamme tulostaa tuoteryhmät ja niiden tiedot, saamme tulostettua suoraan tuoteryhmiin ryhmäkohtaisia tuotelistoja, sekä hallitsemme yksittäisen tuotteen näkymää listassa. Lisäksi olisimme voineet tulostaa alakategorioita {SubCategories} komennolla, jolle myös on mahdollista kutsua helper, joten sinnekin olisi voinut rakentaa omanlaisensa näkymän.

Jos olet lukenut tänne asti, sinulle on varmaan jo selvää, että mahdollisuudet helper-tiedostoa käytettäessä ovat rajattomat. Luonnollisesti me työskentelemme täällä ahkerasti tehdäksemme vielä toistaiseksi mahdottomasta mahdollista ja tulemme lisäämään jatkossa helper-attribuutin muihinkin komentoihin, jolloin kontrolli kaupan ulkoasuun paranee entisestään.

Miska kirjoitti 17.3.2009 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Ladattavat teemat template-tiedostot: 0

Uudet ladattavat teemat ja Interface-rajapinnan päivitykset

Tänä aamuna nakkasimme linjoille uusimmat ladattavat teemat, eli oletusulkoasun ja demokaupan ulkoasun. Teemojen näkyvät muutokset ovat kohtalaisen vähäisiä, mutta kehittäjän kannalta erittäin hyödyllisiä. Uudet Interface-komennot nimittäin helpottavat teemojen käyttöönottoa ja organisointia huomattavasti.

Theme, eli teeman nimi

Uusi {Theme} komento tulostaa aktiivisen teeman kansion nimen, joten uudet teemat saat käyttöösi, kun vain lataat tiedostot omaan kansioonsa kaupan alla ja aktivoit teeman.

Helper-komento, ei siis komennon attribuutti

Lisäksi tuliterä ja paljon toivottu {Helper(file:’header’)} komento on nyt täällä ja mikä apu se onkaan! Oheinen komento kutsuu teeman hakemistosta helper.html-tiedoston ja sisällyttää sen template-tiedostoon. Komennolla on vain attribuutti file ja se on pakollinen. Mikäli tiedostoa ei löydy tai attribuuttia ei ole annettu, komento ei palauta mitään.

Width- ja height-attribuutit kuvilla

Kuvia tulostavat Interface-komennot ovat saaneet laajalla rintamalla avukseen width- ja height-attribuutit, joten hallinnassa määritetyt kuvakoot eivät enää ole ainoat kokovaihtoehdot käytössäsi. Voit siis käyttää samaa kuvaa vaihtelevasti eri kokoisena, mikäli hallinnan kokovaihtoehdot loppuvat kesken. Attribuutteihin syötetään koko pikseleinä, ilman hipsukoita: {ProductImage(width:480,height:360)}. Tällä hetkellä attribuutteja tukevat seuraavat komennot:

• Logo
• ProductImage
• ProductThumbnails
• ProductListImage
• CategoryImage

Oma 404-virheilmoitus nyt käytettävissäsi

Lisäsimme myös erittäin hyödyllisen valinnaisen template-tiedoston, 404.html:n. Tiedosto on juuri sitä mitä nimi antaa ymmärtää, eli tiedostoa käytetään, mikäli pyydettyä sivua ei kaupan alta löydy. Oheisten ladattavien teemojen 404-sivuille tulostetaan ilmoitus ja hakulomake, jolla haluamaansa sivua voi etsiä, mutta se ei suinkaan ole ainoa vaihtoehto, sillä tiedostossa toimivat samat komennot kuin kaupan yleisessä sivupohjassa.

Lataa uudet MyCashflow ulkoasuteemat:

• Oletusulkoasu
• MyCashflow demokaupan ulkoasu

Ismo kirjoitti 23.1.2009 kategoriaan Interface-merkkaus Verkkokaupan kehittäminen avainsanoilla Keskimääräinen tilaus Konversio Neljä vipua Verkkokaupan kehittäminen: 0

Case Pahis: Ostotapahtuman suunnittelu

Suunnittelimme syyskuun aikana Pahis.fi -verkkokaupan uudistuksen. Tässä artikkelissa kerron ostotapahtuman suunnittelusta ja filosofiastamme sen takana.

Ensin ladataan akut täyteen energiaa

Ensimmäisessä vaiheessa ostotapahtumaa tärkeintä on saada asiakas haluamaan tuotetta niin paljon kuin mahdollista. Mitä enemmän asiakas tuotetta haluaa, sen enemmän hänellä on energiaa viedä tilaustapahtuma loppuun saakka. Mikäli energiaa ei ole tarpeeksi, ostotapahtuma jää helposti kesken.

Asiakkaan on vaikea haluta tuotetta jota hän ei löydä

Jotta asias löytäisi haluamansa tuotteen, tuotteiden esillepano ja tuotevalikoiman helppo selattavuus ovat ensiarvoisen tärkeitä asioita. Ulkoasun ja käyttöliittymän merkitystä on vaikea tässä korostaa liikaa. Miska teki hyvää työtä ulkoasun uudistuksen kanssa. Uusi ilme on vanhaa selkeämpi ja helppokäyttöisempi. Se myös tuo tuotteet paremmin esille. Visuaalinen tyyli on kuitenkin sama ja kauppa on selkeästi tunnistettavissa edellisen version isoveljeksi. Edellisen version päävalikko, joka lähti vuosien varrella rönsyilemään liikaa, on korvattu paremmalla jaottelulla. Yleensä 6-8 kohtaa päävalikossa maksimi, koska ihmisen kyky jäsennellä suurempia määriä on rajallinen.

Pyri minimoimaan asiakkaan riskit

Olennaista verkkokaupassa on myös poistaa asiakkaan tunne siitä, että ostaminen on samalla riski. Mitä se tarkoittaa käytännössä? Pahis Kauppahuone myy vaatteita, joten yksi olennainen kysymys asiakkaan mielessä on: “sopiiko tämä tuote minulle?”. Riskin tunnetta voi poistaa lisäämällä tuotetietoihin mittataulukon sekä toisaalta tarjoamalla selkeää tietoa palautus- ja vaihtomahdollisuuksista. Varmasti monen verkkokaupan kohdalla asiakkaan mieleen nousee myös kysymys: “voiko tähän yritykseen luottaa?”. Suunnittelimme kaikilla sivuilla näkyvän alatunnisteen, joka sisältää kattavasti tietoa palvelusta ja maksutavoista, toimitustapa mainoksen, yrityksen viralliset tiedot sekä linkit toimitusehtoihin ja  asiakaspalveluun. Alatunniste viestii, että homma toimii ja palvelu pelaa.

Ostoskoriin uutta elämää

Kun asiakas on lisännyt ostoskoriin yhden tuotteen, toisen tuotteen lisäämisen kynnys laskee dramaattisesti. Lisätuotteet  luonnollisesti nostavat tilauksen arvoa ja se näkyy suoraan verkkokaupan liikevaihdossa. Keskimääräinen tilauksen arvo on yksi verkkokaupan neljästä vivusta, jotka vaikuttavat verkkokaupan tulokseen. Lisäsimme ostoskorisivulle tuotelistaukset parhaiksi arvioiduista, myydyimmistä ja uusista tuotteista.

Aivan sivun loppuun lisäsimme vielä “Valmiina tilaamaan?” otsikon ja linkin kassalle. Otsikon alla kerrotaan uudelleen nopeista toimituksista, turvallisista maksutavoista sekä kehotetaan tekemään tilaus heti. Heti kehotuksen jälkeen toistetaan kassalinkki. Kohderyhmää sopivasti puhutteleva teksti auttaa osaltaa lisäämään energiaa ennen kassalle siirtymistä.

Pahis.fi ostoskori-sivun "Siirry kassalle" -kehotus

Tilaustapahtuma

Tähän saakka tarkoituksena on saada asiakas haluamaan tuotetta ja käyttöön voi ottaa kaikki internetin suomat markkinoinnilliset keinot. Asiakkaaseen on pyrittävä siirtämään mahdollisimman paljon energiaa tulevaa tilausprosessia varten. Tilaaminen muuttaa pelin hengen, koska se on pelkkää kitkaa: täytyy kirjoittaa osoitteita, valita toimitus- ja maksutavat, kaivaa verkkopankkitunnukset esille… Ajateltavaa on ihan tarpeeksi, joten on syytä poistaa kaikki ylimääräiset asiat, jotka eivät ole tilaamisen kannalta oleellista. Tuoteryhmien tilalle laitoimme “Takaisin ostoksille” linkin. Kaikki tuotenostot ja mainostus poistettiin. Nyt asiakkaan on helppo keskittyä tilaamaan, kun ruudulla näkyvät ainoastaan ostotoiminnot.

Ismo kirjoitti 26.10.2008 kategoriaan Interface-merkkaus: 0

Flash 10 päivitys “rikkoo” tiedostojen hallinnan

Reilu viikko sitten julkaistu Flash 10 päivitys sisältää muutoksen, joka “rikkoo” MyCashflow’n tiedostojen hallinnan. Lähetä tiedostoja -nappi ei avaa listaa tiedostoista, koska Flashin uusien tietoturvakäytäntöjen mukaan tiedostoselainta ei voi avata Flashin ulkopuolelta. Etsimme ongelmaan pikaista korjausta. Ennen kuin sopiva ratkaisu löytyy, ongelman voi kiertää seuraavilla tavoilla:

1. Jos olet kumppanimme tai sinulla on maksullinen versio kaupasta, pyydä asiakaspalvelustamme SFTP-tunnukset tiedostojen hallintaa varten.
2. Päivitä alaspäin Flash 9 versioon Käytä selaimena Firefoxia

Tiedostojen lähetysongelma koskee ainoastaan tiedostojen hallintaa ja Flash 10 version IE7:n käyttäjiä. Esimerkiksi tuotekuvien lähetys toimii edelleen normaalisti riippumatta selaimen tai Flashin versiosta.

Ilmoitamme tässä artikkelissa asiaan liittyvistä päivityksistä, kun niitä tulee.

Päivitys 26.10.2008 klo 17:20

Tiedostojen hallinta toimii nyt kaikilla Macin selaimilla ja Windowsin alla Firefoxilla. Windowsin IE7 selaimella on edelleen ongelmia.

Ismo kirjoitti 16.9.2008 kategoriaan Interface-merkkaus Yleinen: 0

Kumppaniohjelma mainostoimistoille ja www-suunnittelijoille

Päivitimme eilen kotisivujamme ja julkaisimme samalla mainostoimistoille ja www-suunnittelijoille tarkoitetun kumppaniohjelman. Tarjoamme kumppaneillemme provision myynnistä, markkinointitukea sekä vinkkejä Interface-rajapinnan tehokkaaseen hyödyntämiseen.

Verkkokauppojen toteuttaminen on teille tuottoisaa liiketoimintaa

MyCashflow’n kumppanina voit toimittaa asiakkaallesi verkkokauppaprojektin MyCashflow-palvelua hyödyntäen. Laskutat asiakasta työstäsi oman hinnastosi mukaisesti, jonka lisäksi saat reilun provision kuukausimaksusta. Interface-rajapintaa käyttäen ulkoasun suunnittelu on helppoa: ulkoasu rakennetaan tutuilla HTML/CSS-tiedoistoilla, Interface-tageilla ja omalla suosikkieditorilla.

MyCashflow verkkokaupan toteuttaminen ei vaadi ohjelmointiosaamista, ohjelmistoasennuksia eikä uuden “ulkoasun-luonti-systeemin” opettelua. Helpon ja nopeasti opittavan periaatteen vuoksi työn tuottavuus on huipussaan ja projektien katteet kohdallaan.

Pysy ajantasalla

Kumppanikirjeemme pitää sinut ajantasalla Interface-rajapinnan päivityksistä ja hyödyntämismahdollisuuksista. Ongelmien sattuessa autamme ja neuvomme nopeasti sähköpostitse.

Tukea markkinointiisi

Kumppanina pääset esille kotisivuillamme ja suosittelemme sinua potentiaalisille asiakkaille. Aika ajoin esittelemme kumppaneitamme myös uutiskirjeessä ja blogissa.

Liity kumppaniksi

Liity kumppaniksemme heti täyttämällä kumppanihakemus. Käsittelemme hakemuksesi noin vuorokauden kuluessa.

Ismo kirjoitti 18.6.2008 kategoriaan Automaattiset päivitykset Interface-merkkaus: 0

Automaattiset päivitykset: Asiakkaiden vienti Exceliin, tilausraportit kirjanpitäjälle…

Julkaisimme juuri pienen päivityksen, jossa oli mukana seuraavaa:

• Tilausraportit kirjanpitäjälle. Mene hallintatyökalun Tilaukset sivulle ja hae tilausraportti haluamaltasi aikaväliltä käyttäen oikean reunan hakulomaketta. Tämä oli yksi eniten toivottuja päivityksiä ja olemme iloisia, kun saimme sen valmiiksi.
• Mahdollisuus hakea asiakkaat Excel-tiedostona. Mene hallintatyökalun sivulle Asiakkaat ja valitse oikeasta laidasta linkki Lataa Excel-tiedostona
• Pieniä muutoksia Interface-rajapinnassa. Mm. tuoteryhmä valikossa, {Categories}, ensimmäinen elementti saa FirstNavigationItem -luokkanimen ja viimeinen LastNavigationItem. Esimerkiksi pyöristysten tekeminen valikkoon helpottuu nyt huomattavasti.

Muutokset tulivat automaattisena päivityksenä kaikkiin MyCashflow-kauppoihin versiosta riippumatta.

Miska kirjoitti 17.6.2008 kategoriaan Interface-merkkaus: 0

Uusin oletusteema ja demokaupan ulkoasu

Siitä alkaa olla jo puoli vuotta, kun paketoimme alkuperäisen oletusulkoasun ja laitoimme jakoon. Sen jälkeen oletusteemaan on tullut useita korjauksia ja pientä hienosäätöä, joten tässä on uusin versio oletusulkoasusta tutkittavaksi tai verkkokauppaprojektisi pohjalle.

Lisäksi laitamme nyt jakoon demokaupan ulkoasun, koska sitä meiltä on paljon kyselty ja toivottu mahdollisuutta käyttää sitä omassa verkkokaupassa. Teema on hieman karsittu versio suoraan MyCashflow’n demokaupasta, joten aivan suoraan tämä ei ole käytettävissä oman verkkokauppasi ulkoasuna. Tätäkin pakettia saa käyttää ja muokata täysin vapaasti omissa verkkokauppaprojekteissa.

• Oletusteema
• Demokaupan ulkoasu

Ismo kirjoitti 16.5.2008 kategoriaan Interface-merkkaus: 1

Kysy Interface-rajapinnasta

Olemme hyvää vauhtia uudistamassa Interface-rajapinnan dokumentaatioa, joten nyt on hyvä esittää mieltä askarruttavia kysymyksiä. Siispä jos joku tuntuu epäselvältä templateissa, komennoissa, helpereissä, teeman käyttöönotossa tai muussa ulkoasun tekemiseen liittyvässä, niin heitä meille kysymyksesi. Otamme kaikki kysymykset ja kommentit huomioon suunnittelussa ja sisällöntuotannossa.

Ismo kirjoitti 15.5.2008 kategoriaan Interface-merkkaus: 0

Avania: Suunnittelijan näkökulmasta yksinkertainen ja helppo

Avania Consulting sai päätökseen MyCashflow-verkkokauppaohjelman pilottiprojektin, Ompelutalon verkkokaupan.

Pilottiprojektin yhtenä tavoitteena oli tutustua Interface-rajapintaan:

“Verkkokaupan suunnittelijan näkökulmasta MyCashflow on varsin yksinkertainen ohjelmisto. Ulkoasun tekeminen ja vieminen palveluun on asiansa osaavalle helppoa.”

Pilottiprojekti jatkuu vielä kesän ja syksyn ajan, jonka aikana seurataan verkkokaupan käyttöä, toimintaa ja menestystä. Odotamme innolla lopullista tuomiota.

Miska kirjoitti 7.4.2008 kategoriaan Interface-merkkaus: 2

HTML-lomake gridiin tyylillä. Täysi mahdottomuusko?

Kun Internetin tulevista trendeistä käydään keskustelua, monesti nousee esiin yksi vakio: rivirekisteri, eli baseline grid. Tätä onkin jo kiitettävästi opittu käyttämään tekstielemettien kanssa, mutta entäpä nettilomakkeet?

Lomakkeet ovat usein web-designerin painajainen. Lomakkeiden ongelmana on ensinnäkin se, että ne ovat tiukasti sidottu joko suoraan käyttöjärjestelmään tai selaimeen, jolloin lähtökohdat ja lopputulokset ovat monesti hyvinkin vaihtelevia. Tämä johtuu yksinkeraisesti vain siitä, että CSS2.1 luonnoksessa ei ole määritelty, kuinka lomake-elementtejä täytyisi pystyä muotoilemaan ja tässä tapauksessa lopputulos voi olla mitä vain.

Usein onkin parempi, ettei lomakkeita yritettäisi muotoilla kovin radikaalisti, koska se aiheuttaa helposti vain paljon uusia ongelmia. Lisäksi käyttäjät ovat jo hyvin tottuneet oman selaimensa lomakkeiden oletusulkoasuun, niin miksi sitä pitäisi lähteä muuttamaan? Jos lomake ei muistuta enää lomaketta, niin käyttäjä hämmentyy ja turhautuu hyvin nopeasti sen täyttämiseen. Tämä muodostuu helposti vakavaksi ongelmaksi esimerkiksi verkkokaupan kassoilla, jos käyttäjä päättäkin jättää tilaamisen kesken.

Siksi olenkin jo tovin kehitellyt mahdollisimman yksinkertaista lomakepohjaa, joka antaisi hyvät lähtökohdat luoda lomakkeita nopeasti ja tehokkaasti, samalla jättäen suunnittelijalle mahdollisimman paljon liikkumavaraa. Ajatuksena oli myös, että lomakkeet säilyttäisivät hyvän vertikaalisen rytmin ja jos vain mahdollista; pysyisivät rivirekisterissä. Mutta juuri edellä mainituista seikoista johtuen lomakkeiden rivirekisterissä pysyminen täydellisesti kaikissa selaimissa on utopiaa.

Esimerkit ja itse tiedostot

Nyt kun olen sopivasti pehmittänyt teidän päänne, niin mennään itse asiaan. Valmistelin kahden palstan demon, jossa on kolme eri lomakevariaatiota. Kaikki variaatiot käyttävät tarkalleen samaa merkkausta, joka on MyCashflow’n kassatapahtuman ensimmäisestä vaiheesta.

Demon pitäisi pysyä rivirekisterissä Windows-selaimilla, mutta Linux- ja Mac-selaimilla select-elementti aiheuttaa toistaiseksi pienen heiton. Lisäksi textarea-elementin koon määritys cols ja rows attribuuteilla.

Ja tässä vielä linkki itse demoon, sekä kaikki esimerkkitiedostot pakattuna.

Jälkisanat ja kiitokset niille joille kunnia kuuluu

Näiden lomakkeiden ensimmäiset askeleet on otettu jo joskus vuoden 2007 alussa, kun törmäsin ensimmäistä kertaa Uni-Form nimiseen lomakkeistopohjaan, jota pidin hieman liian vaikeaselkoisena ja monimutkaisena omaan käyttööni. Nykyisellään voitte lähinnä enää huomata joitain yhtäläisyyksia merkkauksessa.

Jossain välissä vuotta 2007 apuun tuli nerokas Eric Meyerin tyylien nollaus, joka jättää lomakkeet täysin koskemattomiksi. Näiden lomakkeiden mukana tuleva base.css -tiedosto pitää sisällään Ericin nollauksen, PiE:n clearfixin, sekä perusmuotoilut tavallisille tekstielementille. Tekstimuotoilut lainaavat puolestaan joitain osia ja ajatuksia Blueprintin css-kirjastolta.

Ensisijaisesti tämä kirjasto on tarkoitettu MyCashflow-verkkokaupan suunnittelun apuvälineeksi, mutta jos koet tämän paketin hyödylliseksi omissa projekteissasi, niin ei sen käyttöä kielletäkään.