Avainsana: rajapintaintegraatio

Kehys-Art Seinäjoki

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

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

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

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

AVA Finland -konserni

AVA Finland -konsernin sivustouudistuksessa usealle toimialasivustolle luotiin yhtenäinen, raikas ja moderni ilme. Ilmeen suunnittelusta vastasi Graafinen toimisto Serian Tomi. Samalla sivustot tuotiin WordPress-julkaisualustalle.

Toimialasivustot toteutettiin WordPressin multisite-ominaisuudella. Yksittäiset sivustot käyttävät kaikki samaa teemaa, jonka värimaailman ja logot asiakas voi itse määritellä sivustokohtaisesti WordPressin ohjausnäkymässä. Kaikki sivustot esittelevä landing-sivu pidettiin erittäin yksinkertaisena.

Tässä projektissa otin ensimmäistä kertaa työn alle kevyen ”page builderin”, jonka avulla asiakas voi itse luoda alasivujen ilmeen WordPressin ohjausnäkymässä sitä varten luoduista moduleista eli sisältöosioista. Sivulle voi siis valita asetettavaksi esimerkiksi otsakekuvaa, artikkelisyötettä, henkilöstön jäseniä, lomaketta, Facebook-feediä tai Google-karttaa. Moduleita lisätä ja poistaa, ja raahailla halumaansa järjestykseen helposti. Järjestely perustuu Advanced Custom Fields -lisäosan joustavan sisällön hyödyntämiseen. Se onnistuikin yli odotusten, ja olen käyttänyt tätä lähestymistapaa jatkossa.

Henkilöstövuokraukseen keskittyvää toimialasivustoa varten loin uuden räätälöidyn sisältötyypin työpaikkailmoitusten syöttämiseen. Sen avulla työpaikkojen kategorisointi onnistuu helposti paikkakuntakohtaisesti.

Suorituskyvyn optimointia silmälläpitäen kyselyjen ja lisäosien määrä on jälleen minimoitu, ja sivustolla käytetään pääasiassa vektorimuotoisia, kevyitä SVG-logoja. Sellainen toistuu itse asiassa toimialasivustoilla etusivun otsakekuvan taustalla, huomasitko? Kuvaan uppoava kolmikirjaiminen ”AVA” jakaa otsakekuvan kolmeen itsenäiseen alueeseen omine taustakuvineen.

Sivustolle integrointiin myös Facebook-feedit ja niiden ulkoasu räätälöitiin vastaamaan muuta ilmettä.

Ulkoasukoodin tekniikan osalta tämä lienee ensimmäinen projektini pitkään aikaan, missä en ole pohjannut Foundationiin. Otin pohjalle testiin Digitoimisto Duden Air -starter-teeman ja muokkasin siitä sopivan kokonaisuuden. Responsiivisuus on totetettu siis Jeet-gridillä ja höystetty tarvittavilta osin flexboxilla.

Kiitos AVAn Takulle, Sakulle ja Mirvalle sekä Serian Tomille!

AVA Finland -konsernin sivustouudistuksessa usealle toimialasivustolle luotiin yhtenäinen, raikas ja moderni ilme. Ilmeen suunnittelusta vastasi Graafinen toimisto Serian Tomi. Samalla sivustot tuotiin WordPress-julkaisualustalle. Toimialasivustot toteutettiin WordPressin multisite-ominaisuudella. Yksittäiset sivustot käyttävät… Lue artikkeli ”AVA Finland -konserni” kokonaan »

avaprorent.fi
AVA Finland -konserni

Yhteinen Etelä-Pohjanmaa

Etelä-Pohjanmaan sote- ja maakuntauudistuksen uudistetulla sivustolla voi seurata uudistuksen alueellista valmistelua.

Projektin johtamisesta vastasi tamperelainen viestintätoimisto Kumu Communications, jonka kanssa minun on ollut ilo tehdä yhteistyötä aiemminkin.

Ensimmäisessä yhteisessä palaverissa elokuussa 2017 linjattiin projektin tavoitteet ja uuden sivuston ulkoasu asiakkaan tekemien ulkoasuhahmotelmien pohjalta. Uusittu kokonaisuus otettiin käyttöön paria kuukautta myöhemmin.

Vanha sivusto oli toteutettu WordPressin multisite-ominaisuudella kahdeksi eri sivustoksi eri sote- ja maakuntauudistuksen kohderyhmille. Uudistuksessa sivustot yhdistettiin uuden ”Yhteinen Etelä-Pohjanmaa” -otsikon alle.

Uudistuksessa sosiaalinen media sai sivustolla aiempaa paremman näkyvyyden. Hashtagin #uusiep Twitter- ja Facebook-feedit upotettiin sivustolle suoraan virallisista rajapinnoista Digitoimisto Duden rakentamien lisäosien avulla.

Rakensin sivuston ulkoasun koodin kannalta täysin uusiksi käyttäen Foundation-frameworkkia pohjalla. Vanha tuttu värimaailma säilyi ennallaan. Kiinnitin erityistä huomiota suorituskykyyn; kyselyjen ja lisäosien määrä on minimaalinen, ja sivusto latautuukin Seinäjoen kaupungin omalta, Seravon ylläpitämältä palvelimelta todella nopoeasti.

Kiitos Kumun Sanna Saarikankaalle, Etelä-Pohjanmaan Liiton Hanna Rantalalle ja Etelä-Pohjanmaan sote-projektin Miska Kaihlamäelle hienosti sujuneesta projektista!

Etelä-Pohjanmaan sote- ja maakuntauudistuksen uudistetulla sivustolla voi seurata uudistuksen alueellista valmistelua. Projektin johtamisesta vastasi tamperelainen viestintätoimisto Kumu Communications, jonka kanssa minun on ollut ilo tehdä yhteistyötä aiemminkin. Ensimmäisessä yhteisessä palaverissa… Lue artikkeli ”Yhteinen Etelä-Pohjanmaa” kokonaan »

uusiep.fi
Yhteinen Etelä-Pohjanmaa