Avainsana: <span>wordpress</span>

Tampereen ammattikorkeakoulun opiskelijakunta (Tamko)

19.8.2020 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 ammattikorkeakoulun opiskelijakunta (Tamko)” kokonaan »

tamko.fi

Asuntoliigan Asiakastieto-integraatio

14.7.2020 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

Kehys-Art Seinäjoki

17.4.2020 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!

kehysart.fi

Tampereen Kesäyliopiston Hellewi-rajapintaintegraatio

2.4.2020 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

Business Design HUG

22.11.2019 Portfolio Web

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

Woittola

3.10.2019 Portfolio Web

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