Avainsana: <span>rajapintaintegraatio</span>

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

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
Portfolio Web

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

Kehys-Art Seinäjoki
Portfolio Web

Seinäjokelaisen kehys- ja taidetarvikeliike Kehys-Artin sivuston uudistus pohjautui tarpeeseen korvata valmisteemalla toteutettu, aikaisemman omistajan alullepanema ulkoasu uudella, minimalistisella ilmeellä. Samalla vaihdettiin webhotellin palveluntarjoajaa, ja uusi koti löytyi jälleen Shellit.orgista.

Sivuston sisältö päätettiin toteuttaa yhden sivun turvin ja projektin budjetti pidettiin tarkoituksella niukkana. Tätä silmälläpitäen valitsin toteutustavaksi täysin WordPressin uuteen visuaaliseen lohkoeditoriin, Gutenbergiin, pohjautuvan toteutuksen. Kevyen perusteeman päälle toteutin Gutenbergin sisäänrakennetuilla lohkoilla eli visuaalisilla rakennuspalikoilla kevyen kokonaisuuden, johon nostettiin asiakkaan logosta korostusvärit.

Sivuston muokkauskokemus lohkoeditorissa on visuaalisesti yksi yhteen julkisen puolen kanssa; samat välistykset ja marginaalit, kirjasimet ja koot, värit yms. Näitä varten tein lohkoeditoriin räätälöidyt väripaletit ja kirjasinkokovalinnat. Lisäksi editoriin ladataan käyttöön sama tyylitiedosto kuin julkisellekin puolelle.

Sivuston suoristuskyvyn takaamiseksi tein muutaman perusratkaisun; logo on SVG-muodossa ja kirjasin on myös natiivi Arial, ei siis ulkoisia riippuvuuksia. Kuvat ladataan laiskasti (lazy loading), ja se onkin ainoa toiminnallinen lisäosa sivustolla. Sivusto onkin varsin nopea ja saa Google PageSpeed Insights -testissä täydet 100 pistettä. Kuvien kokoja en vielä osannut Gutenbergin osalta räätälöidä, tuossa ja muissa sen uusissa aspekteissa riittää opeteltavaa.

Instagram-kuvien automatisoituun hakemisteen toteutin kevyen rajapintaintegraation Instagram Basic Display APIa hyödyntäen. Sen avulla saadaan tuoreimmat Instagram-kuvat haettua sivulle automaattisesti.

Kiitos projektista ja onnea uusille sivuille, Eija-Tiina!

Seinäjokelaisen kehys- ja taidetarvikeliike Kehys-Artin sivuston uudistus pohjautui tarpeeseen korvata valmisteemalla toteutettu, aikaisemman omistajan alullepanema ulkoasu uudella, minimalistisella ilmeellä. Samalla vaihdettiin webhotellin palveluntarjoajaa, ja uusi koti löytyi jälleen Shellit.orgista. Sivuston… Lue artikkeli ”Kehys-Art Seinäjoki” kokonaan »

kehysart.fi
Kehys-Art Seinäjoki

Tampereen Kesäyliopiston Hellewi-rajapintaintegraatio
Portfolio Web

Tampereen Kesäyliopiston sivusto uusittiin kokonaan Myynninmaailman toimesta. Uusitulle, edelleen WordPress-pohjaiselle sivustolle haluttiin tuoda koulutustarjonta osaksi sivuston omaa sisältöä. Koulutustarjonta on syötetty Hellewi-järjestelmään, jonka tarjoamasta rajapinnasta se saadaan ulos JSON-muodossa. Tätä varten rakensimme alihankintana yhdessä Valakia Interactiven WordPress-spesialistin, Mika Aution, kanssa integraation rajapintaan.

Rajapinnan tietojen hakemista varten rakensin ensin vaaditun JWT-autentikaation PHP-pohjaisena. Tietomassa haetaan rajapinnasta tietyin väliajoin ja WordPressin transientteja eli sisäänrakennettua välimuistijärjestelyä hyödynnetään laajasti tämän massan ja siitä jatkojalostettujen listojen, kuten koulutustarjonnan navigaation ja yksittäisten kurssien tietojen tallentamiseen. Lisäksi toteutettiin laajennettu kurssien haku rajapinnan mahdollisuuksia hyödyntäen.

Koko toteutus tukee myös monikielisyyttä, eli kaikki näyttötekstit ja myös rajapintakutsut ovat kielivalintariippuvaisia eli lokalisoitavissa .

Hellewin takana olevalla Wildfrost Oy:llä on mainio Microsoft Teams -kanava, josta saimme runsaasti tukea. Lisäksi heidän rajapintadokumentaationsa on hyvällä tasolla. Kiitos Risto Hietala ja Perttu Tikka!

Tampereen Kesäyliopiston sivusto uusittiin kokonaan Myynninmaailman toimesta. Uusitulle, edelleen WordPress-pohjaiselle sivustolle haluttiin tuoda koulutustarjonta osaksi sivuston omaa sisältöä. Koulutustarjonta on syötetty Hellewi-järjestelmään, jonka tarjoamasta rajapinnasta se saadaan ulos JSON-muodossa. Tätä… Lue artikkeli ”Tampereen Kesäyliopiston Hellewi-rajapintaintegraatio” kokonaan »

tampereenkesayliopisto.fi
Tampereen Kesäyliopiston Hellewi-rajapintaintegraatio

Suomen Yrittäjäopiston Wilma-rajapintaintegraatio
Portfolio Web

Suomen Yrittäjäopisto (SYO) on valtakunnallinen koulutus- ja asiantuntijaorganisaatio. SYO sai uudistetut, WordPress-pohjaiset sivut, jotka suunnitteli ja toteutti seinäjokinen BSTR – luova markkinointitoimisto. Lue lisää uudistuksesta SYOn blogista.

Autoin BSTR:ää luomaan rajapintaintegraation Visman tarjoamaan Wilma-koulutuskalenteriin. Wilman rajapintaa käyttäen haetaan kurssien tiedot osaksi SYO:n omien sivujen sisältöä. Julkisesta rajapinnasta tieto saadaan JSON-muodossa, ja se välimuistitetaan WordPressin tietokantaan (transient). Tällöin erilaiset, räätälöidyllä PHP-pohjaisella toteutuksella muodostettavat listaukset latautuvat nopeasti. Ellei tietoja ole välimuistissä, ne haetaan uudelleen Ajax-kutsulla rajapinnasta.

Listausten helppoa luomista ja muokkausta varten toteutin WordPressin ohjausnäkymän käyttöliittymän Shortcake-rajapintaa hyödyntäen. Lyhytkoodeja (shortcode) ei siis tarvitse osata muodostaa manuaalisesti.

BSTR:n web-kehittäjä Kaisa on ollut mukana kuukausittaisissa WordPress-tapaamisissa Seinäjoella alusta asti, ja sitä kautta olemme tutustuneet toistemme osaamiseen. Kiitos BSTR ja Kaisa tehtävänannosta ja yhteistyömahdollisuudesta. Onnea uusille sivuille, Suomen Yrittäjäopisto!

Suomen Yrittäjäopisto (SYO) on valtakunnallinen koulutus- ja asiantuntijaorganisaatio. SYO sai uudistetut, WordPress-pohjaiset sivut, jotka suunnitteli ja toteutti seinäjokinen BSTR – luova markkinointitoimisto. Lue lisää uudistuksesta SYOn blogista. Autoin BSTR:ää luomaan… Lue artikkeli ”Suomen Yrittäjäopiston Wilma-rajapintaintegraatio” kokonaan »

syo.fi
Suomen Yrittäjäopiston Wilma-rajapintaintegraatio

Suomen riistakeskus
Portfolio Web

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi

Yhteyshenkilönä riistakeskuksen puolelta toimi viestintäsuunnittelija Tero Kuitunen. Hän on tuttu jo monen vuoden ajalta, toimiessaan entisessä tehtävässään Riista-lehden päätoimittajana (toteutin lehden sivut urani alkupuolella).

Sivusto sisältää satoja alasivuja ja artikkeleita neljällä eri kielellä. Lisäksi sivustolla on monia räätälöityjä toimintoja kuten koulutus- ja yhteystietohakuja. Näitä toimintoja on alunperin laadukkaasti toteuttanut H1 (nykyinen Zeeland Family).

Tein ulkoasusuunnitelman ja toteutuksen itse. Keskiössä olivat kauniit kuvat, ajankohtaiset uutiset ja tärkeät nostot sisällöstä. Toteutus on jälleen asiakkaankin näkökulmasta modulaarinen, eli toteutetuista sisältöelementeistä voi rakentaa haluamiaan ulkoasuja helposti. Olemassaolevat toiminnot säilytettiin, muotoilut uudelleenrakentaen.

Olin jo pitkään halunnut tehdä jotain fullscreen design -periaatteella; elementit täyttävät ruudun laidasta laitaan isollakin resoluutiolla, ja silti sivusto mukautuu hienosti myös mobiiliin. Valu Digitalin toimari on kirjoittanut hyvin fullscreen designista. Tässä siis oli oiva projekti ottaa käyttöön koko ruutu.

Uutuutena sivustolle integroitiin ennakoiva hakumoottori AddSearchin avulla. Tämä korvaa WordPressin oman hakumoottorin ja mahdollistaa esimerkiksi hakutulosten painottamisen. Hakumoottori indeksoi sekä pääsivuston että Riistainfon ja näyttää hakutuloksia ristiin kummastakin. Tulokset tulevat salamannopeasti jo parilla alkukirjaimella esikatselukuvan kera — kokeile hakua ihmeessä!

Sisältöä sivustolle haetaan useista rajapinnoista, kuten Oma Riista -palvelun rajapinnasta (metsästyskiintiöt) sekä Viidakkomonitorin mediaseurantatuloksista.

Valu Digital vastasi sivuston kanssa lähes käsi kädessä julkaistun Riistainfon suunnittelusta ja toteutuksesta. Sivustojen ulkoasua pyrittiin yhtenäistämään yhdessä Valun asiantuntijoiden kanssa, jotta ne näyttäisivät mahdollisuuksien mukaan saman toimijan sisarsivustoilta.

Suomen riistakeskuksen riista.fi-sivusto palvelee metsästäjiä ja kaikkia riista-asioista kiinnostuneita. Merkittävän osan sivuston sisällöstä on oltava kansalaisten saatavilla helposti  ja ajan tasaisena.

Tätä taustaa vasten ajatus sivuston uudistamisesta aiheutti meissä tiettyä hermostuneisuutta, joka kuitenkin karisi nopeasti projektin käynnistyttyä. Kaikki eteni aikataulussa ja myös matkan varrella ilmaantuneet ideat toteutettiin leppoisassa ilmapiirissä.

Saimme haluamamme, ilman turhia sydämentykytyksiä.

Tero Kuitunen

Kiitos Suomne riistakeskuksen väelle; Terolle, Mirjalle ja Klausille. Jatketaan tästä kehitystyötä eteenpäin!

 

Suomen riistakeskuksen sivustouudistusta lähdettiin suunnittelemaan joulukuussa 2017 starttipalaverilla keskustoimistolla Helsingin Tapanilassa. Tavoitteena oli tehdä sivustosta käytettävämpi rakenteellisesti, modernisoida ulkoasua ja tuoda uutisia ja muita tärkeitä toimintoja näkyvämmäksi Yhteyshenkilönä riistakeskuksen puolelta… Lue artikkeli ”Suomen riistakeskus” kokonaan »

riista.fi
Suomen riistakeskus