Avainsana: <span>javascript</span>

Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)

Tampereen ammattikorkeakoulun opiskelijakunta (Tamko) on opiskelijalähtöinen edunvalvoja, joka pitää huolen siitä, että opiskelijoiden ääni kuuluu.

Kumu Communicationsin kanssa päästiin pitkästä aikaa tekemään yhdessä projektia. Kumu veti projektia, määritteli asiakkaan kanssa kohderyhmät jne. Sivuston ulkoasun suunnitteli Tanja Ritvanen. Minä toteutin WordPress-teeman ja integraatiot. Yhteyttä pidettiin projektin edetessä Kumun Slackissä.

Sivusto suunniteltiin täyttämään saavutettavuusstandardin WCAG 2.0 AA-taso, ja toteutuksen edetessä varmistin teknisen saavutettavuuden sekä WebAIMin WAVE-palvelulla että Chromeen asennettavan aXe-lisäosan avulla. Sivusto täyttää kriteerit teknisen saavutettavuuden osalta, ja sisällöntuottamisessa on apuna sekä ennaltamääritellyt saavutettavat väriyhdistelmät että muutama räätälöity lohkotyyppi WordPressin lohkomuokkaimelle.

Sivujen muokkauskokemus nojaa kokonaan WordPressin uuteen Gutenberg-lohkoeditoriin, joka on ottanut huimia askeleita eteenpäin. Sisäänrakennettuja lohkoja muokattiin projektia varten, ja muutama oma lohko tehtiin vain Tamkolle. Lohkojen ulkoasu on muokkauspuolella mahdollisimman identtinen julkisen puolen kanssa.

Opiskelijaravintola Campusravitan ruokalista integroitiin osaksi etusivua. Ruokalistan saa JSON-syötteenä ruokatuotantopalvelu Jamixin pilvestä. Ruokalista tallennetaan WordPressin välimuistiin eli transienttiin, jolloin vältetään useat rajapintakyselyt.

Etusivun someseinä toteutettiin Taeggien palvelun avulla; Taeggieen voi määritellä halutut sosiaalisen median tilit, ja palvelu tarjoaa niistä aggregoidun JSON-syötteen, joka luetaan ja muotoillaan asiakkaan tyylein ja värein.

Kiitos Kumun Elina ja Auli, Tanja sekä Tamkon Katriina, Jenni & Emmi! Mahtava projekti!

Tampereen ammattikorkeakoulun opiskelijakunta (Tamko) on opiskelijalähtöinen edunvalvoja, joka pitää huolen siitä, että opiskelijoiden ääni kuuluu. Kumu Communicationsin kanssa päästiin pitkästä aikaa tekemään yhdessä projektia. Kumu veti projektia, määritteli asiakkaan kanssa… Lue artikkeli ”Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)” kokonaan »

tamko.fi
Tampereen ammatti­korkea­koulun opiskelija­kunta (Tamko)

Asuntoliigan Asiakastieto-integraatio

Asuntoliiga.fi on asuntosijoittamisesta ja asuntomarkkinoista kiinnostuneiden oma yhteisö.

Valakia Interactive suunnitteli ja toteutti uudet WordPress-pohjaiset verkkosivut.

Toteutin sivustolle integraation Asiakastiedon järjestelmään; Asiakastiedon tunnukset voi tallentaa osaksi Asuntoliigan jäsenyystiliä, ja toteuttamani lisäosa muodostaa linkin, jolla pääsee kirjautumaan sisään Asiakastiedon järjestelmään automatisoidusti. Tämä helpottaa Asiakastiedon palveluiden hyödyntämistä ja vähentää virhemahdollisuuksia vähentäen tarvetta syöttää tunnuksia useaan palveluun.

Kirjautumislinkin muodostamista varten lisäosa määrittää SHA-512 -tarkistussumman ja muut tarvittavat parametrit.

Ellei ole vielä Asiakastiedon asiakas, on mahdollista tehdä sopimus suoraan lisäosan tarjoamalla lomakkeella.

Sivustolla on oma jäsenyyspuoli MemberPressillä toteutettuna, ja toiminto lisättiin uudeksi välilehdeksi osana sen intranet-tyyppistä näkymää.

Kiitos Asuntoliigan Mikko ja Asiakastiedon Jaakko & Jussi ja Valakian Mika hienosta projektista. Tsemppiä Asuntoliigalle!

Asuntoliiga.fi on asuntosijoittamisesta ja asuntomarkkinoista kiinnostuneiden oma yhteisö. Valakia Interactive suunnitteli ja toteutti uudet WordPress-pohjaiset verkkosivut. Toteutin sivustolle integraation Asiakastiedon järjestelmään; Asiakastiedon tunnukset voi tallentaa osaksi Asuntoliigan jäsenyystiliä, ja toteuttamani… Lue artikkeli ”Asuntoliigan Asiakastieto-integraatio” kokonaan »

asuntoliiga.fi
Asuntoliigan Asiakastieto-integraatio

Business Design HUG

Business Design HUG on ystäväni Yukakon uusi yritys, joka auttaa brändejä kansainvälistymään ja yrityksiä pääsemään Japanin markkinoille.

Yukako itse on käsityöläinen ja hänen ensimmäiset edustamansa brändit ovat myös tekstiilialan toimijoita. Lähdin suunnittelemaan siis näyttävää etusivua, jossa asiakkaiden värikkäät kuosit ja promokuvat pääsisivät framille. Etusivun kuvaseinään ladataan satunnainen otos promokuvia.

Muu sivusto on minimalistinen ja käsittelee itse palveluita sekä brändejä. Myöhemmin on tulossa myös blogi. Sisältö on tarjolla aluksi sekä englanniksi että japaniksi.

Teknisen toteutuksen osalta brändit ovat oma räätälöity sisältötyyppinsä, jonka tietoja pääsee täydentämään ACF:llä luoduilla kentillä. ACF:ää käytetään myös tuottamaan etusivun hero-kuvan sisältö. Isot kuvat ladataan vasta muun sisällön jo latauduttua, joten tuntuma pysyy reippaan vauhdikkaana. Lisäosien määrä on erittäin pieni (Polylang monikielisyyteen, ACF sisältökentille), eikä ulkoisia riippuvuuksia integroitua lazysizes-skriptiä lukuunottamatta ole.

Domo arigato, Yukako!

Business Design HUG on ystäväni Yukakon uusi yritys, joka auttaa brändejä kansainvälistymään ja yrityksiä pääsemään Japanin markkinoille. Yukako itse on käsityöläinen ja hänen ensimmäiset edustamansa brändit ovat myös tekstiilialan toimijoita…. Lue artikkeli ”Business Design HUG” kokonaan »

businessdesignhug.fi
Business Design HUG

Woittola

Woittola on perinteikäs pohjalainen hoiva-alan huonekalujen maahantuontiin myyntiin erikoistunut yritys.

Uuden WordPress-pohjaisen sivuston tavoitteena oli luoda edustettuja tuotteita esittelevä sivusto verkkokauppamaisesti, ilman verkkokaupan ostotoimintoja. Woittolan edellinen sivusto oli myös WordPress-alustalla, käyttäen valmisteemaa.

Visuaalisessa suunnittelussa lähdin jälleen ”kuvat edellä”, koska edustetuista tuotteista on hyviä kuvia saatavilla. Olemassaoleva logo väritettiin uusin sävyin ja otettiin mukaan luonnollisesti SVG-vektorikuvana.

Sivuston saavutettavuuteen kiinnitin erityistä huomiota. Sivusto täyttää lähes täysin WCAG (eli Web Content Accessibility Guidelines) AA-tason vaatimukset, mukaanlukien tarjouspyynnön ponnahdusikkuna (integroitu A11y-dialog). Saavutettavuutta testasin Chrome-selaimeen asennettavalla axe-lisäosalla.

Harmikseni en löytänyt saavutettavuusvaatimuksia täyttävää selattavaa kuvagalleriaa, joten PhotoSwipe-kirjaston avulla toteutettu tuotekohtainen galleria on valitettavasti saavutettava vain osittain (fokus ei näppäimistöllä selatessa pysy avautuvan gallerian sisällä). Tätä täytyy tutkia lisää.

Kokeilin tässä projektissa ensimmäistä kertaa CSS-muuttujien hyödyntämistä (CSS custom properties) SASS-muuttujien sijaan. Homma pelasi todella hienosti, ja aioin käyttää tätä lähestymistapaa tulevissa projekteissa.

Kiitos hienosta projektista, Sami!

Woittola on perinteikäs pohjalainen hoiva-alan huonekalujen maahantuontiin myyntiin erikoistunut yritys. Uuden WordPress-pohjaisen sivuston tavoitteena oli luoda edustettuja tuotteita esittelevä sivusto verkkokauppamaisesti, ilman verkkokaupan ostotoimintoja. Woittolan edellinen sivusto oli myös WordPress-alustalla,… Lue artikkeli ”Woittola” kokonaan »

woittola.fi
Woittola

LABeauty

Hius- ja hyvinvointipalveluita tarjoava jurvalainen LABeauty aloitti toimintansa maaliskuussa 2019. Yrittäjänä toimii perheystävämme Seliina Niemistö. Hiusklinikka tarjoaa apua hiustenlähtöön ja hiuspohjaongelmiin. Laboratoriossa voidaan suorittaa laaja-alaisia tutkimuksia ja näytteenottopalveluita. Parturi-kampaamo Mirvan puolella tarjolla ovat parturi-kampaamopalvelut.

Toteutin yritykselle WordPress-teeman käsityönä. Sivuston modulaarinen toteutus pohjautuu jälleen kerran Advanced Custom Fields -lisäosan avulla toteutettuhin joustavan sisällön osioihin. Alustin sivustoa varten kahdeksan erilaista sisältöelementtiä päätasolla palstoitusta varten ja niiden sisältö on mahdollisuus rakentaa palikoista kuten wysiwyg-editori, Facebook-feedi, kartta, lomake ja karuselli.

Tilaajan näkökulmasta verkkosivujen toteutus oli todella sujuvaa valmiin designin pohjalta, eikä kompromisseja tarvittu missään vaiheessa. Kaiken lisäksi aikataulu piti hyvin. Sain nähtäväkseni juuri tilauksen mukaiset sivut ja todella hyvän ohjeistuksen sivujen päivitykseen. Mikko oli tehnyt helposti ymmärrettävät sisältöelementit WordPressiin ja kirjallisen ohjeen lisäksi kävimme konkreettisesti läpi ominaisuuksia. Uskon, että näillä ohjeilla sivuston päivittäminen onnistuu hyvin itseltänikin, mutta jos eteen tulee kysymyksiä, tiedän Mikon osaavan vastata. Olen kaiken kaikkiaan äärimmäisen tyytyväinen saamaani tuotteeseen ja palveluun ja suosittelen Mikrogramma Designia kaikille, jotka tähtäävät räätälöityyn verkkosivutoteutukseen.
Seliina Niemistö / yrittäjä, LABeauty

Sivujen ulkoasun suunnittelijaksi Seliina oli valinnut Veera Anttilan. Sain Veeralta valmiit suunnitelmat sekä desktoppiin että mobiiliin ohjeistuksineen. Veera teki myös kaikki kuvankäsittelytyöt. Mukavaa yhteistyötä uuden ihmisen kanssa!

Työskentely Mikrogamma Designin kanssa sujui erinomaisesti. Useamman vuoden alakokemuksella rohkenen sanoa, että Mikko on ehdottomasti yksi parhaista koodariyhteistyökumppaneista. Pedantti ja tehdään-mitä-luvataan asenne työhön on yksi ehdoton vaatimus kun valikoin niitä, joiden kanssa yhteistyötä teen ja Mikolta tätä löytyy.

Sivusto toteutui prikulleen suunnitelmien mukaan ja missään vaiheessa työnjälkeen ei tarvinnut puuttua. Aion käyttää Mikon palveluita jatkossakin ja suositella häntä myös kontakteilleni.

Veera Anttila / Design VA

Etusivun otsikkokuvassa käytin pientä kikkaa, sillä kuva häipyy täysin läpinäkyväksi (fade to transparent) alalaitaa kohti. Tämä onnistui käyttämällä kuvaan SVG-ominaisuuksia linearGradient ja mask:

<linearGradient id="alphaLinear" x1="0" x2="0" y1="0" y2="1">
  <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
  <stop offset="40%" stop-color="#FFFFFF" stop-opacity="0%" />
  <stop offset="100%" stop-color="#000000" stop-opacity="100%" />
</linearGradient>

<mask id="Mask">
  <rect x="0" y="0" width="100%" height="100%" fill="url(#alphaLinear)" />
</mask>

Onnea matkaan Seliina!

Hius- ja hyvinvointipalveluita tarjoava jurvalainen LABeauty aloitti toimintansa maaliskuussa 2019. Yrittäjänä toimii perheystävämme Seliina Niemistö. Hiusklinikka tarjoaa apua hiustenlähtöön ja hiuspohjaongelmiin. Laboratoriossa voidaan suorittaa laaja-alaisia tutkimuksia ja näytteenottopalveluita. Parturi-kampaamo Mirvan… Lue artikkeli ”LABeauty” kokonaan »

labeauty.fi
LABeauty