Sankaritarinoita ICT:n pioneereista
Joinex nostaa framille kuvakampanjassaan erilaisia ICT:n pioneereja, sankareita ja uranuurtajia.
Joinex nostaa framille kuvakampanjassaan erilaisia ICT:n pioneereja, sankareita ja uranuurtajia.
Joinex uudisti brändiään lähtökohtina päivittää ilme 2020-luvulle, luoda kiinnostavat verkkosivut ja tuoda suuremmalle yleisölle esiin se, mitä Joinex todella on. Uudistuksen perustan luo Joinexin jo olemassa oleva yrityskulttuuri.
Viime vuosisadalla alkoi kulttuurimme visualisoituminen, kun uusien medioiden, kuten elokuvan, tv:n ja internetin, myötä kuvien määrä moninkertaistui. Nykypäivänä kuviin keskittyvän sosiaalisen median arkistumisen myötä jokainen henkilöbrändää itseään tietoisesti tai tiedostamatta somepresenssillään.
Yritykset eivät ole muutoksen mukana tuomista vaatimuksista irrallisia, vaan myös yritysten tulee tuottaa visuaalisesti miellyttävää ja laadukasta sisältöä ollakseen uskottavia. Siksi myös Joinex halusi kirkastaa visuaalista ilmettään ja laajemmin brändiään, mikä näkyy konkreettisimmin verkkosivujen uudistuksena.
Visuaalisen ilmeen merkitys on yleisesti ottaen helppo ymmärtää, koska ilme näkyy selkeästi ulospäin esimerkiksi verkkosivuilla ja markkinoinnissa. Joinexinkin tarve uudistua lähti nimenomaan verkkosivujen tyylistä ja logosta, jotka oli saatava vastaamaan orastavan 2020-luvun tarpeita.
Visuaalinen ilme on kuitenkin vain yksi brändiä rakentava tekijä, ja itse brändi on logoa ja iskulausetta paljon laajempi asia. Brändi on kaikkea sitä mitä yritys todella tekee, kuten toimintatapoja, arvoja, visioita, työkulttuuria ja tuotteita. Siksi kirkastaakseen visuaalista ilmettä tulee olla selvillä siitä, mitä oikein halutaan kirkastaa.
Brändäykseen suhtaudutaan yhä paikoitellen varauksella – ja ihan ymmärrettävästi. Brändäys on tarkoittanut pitkään sliipattuja stock-kuvia ja ylhäältä päin asetettuja strategioita, joissa luetellaan arvoja, joiden takana yhteisön tulee seisoa. Monesti kuulee puhuttavan brändin luomisesta, mikä on omiaan vahvistamaan mielikuvaa siitä, että brändi luodaan tyhjästä sen sijaan että se ilmentäisi jotain aitoa.
Aidoimpaankin brändiin liittyy käytännössä aina jotain keinotekoista, sillä brändin rakentamisessa on kyse niiden asioiden valitsemisesta, joita halutaan korostaa: mitkä arvot ovat meille tärkeimpiä tai mikä luo arvoa asiakkaiden silmissä? On kuitenkin eri asia, valitaanko brändiä rakentavat tekijät tyhjästä vai jo olemassa olevan kulttuurin pohjalta. Joinexin brändiuudistuksessa lähdimme liikkeelle konkreettisista asioista; siitä millaisia ovat Joinexin toimintatavat ja työkulttuuri.
Aloitimme prosessin nimeämällä millaisten arvojen takana Joinex seisoo ja miten ne näkyvät arjessa. Ydinarvoiksi tunnistimme inhimilliset arvot, jotka eivät vanhene: palvelun, luottamuksen ja rehellisyyden. Sen vastapainona arvostamme myös kovaa teknologiaosaamista ja innovatiivista propellipäähenkeä. Käytännössä arvot näkyvät rentona, matalahierarkisena työkulttuurina, jossa on tilaa erilaisille ihmisille ja ajatuksille. Arvot ovat myös osa jokaisen työnkuvaa, meillä jokainen on myös asiakaspalvelija eikä palvelua ole erotettu omaksi segmentikseen.
Joinexin uudistunut brändi rakentuu vahvemmin jo olemassa olevan yrityskulttuurimme pohjalle. Brändi ei kuitenkaan tule valmiiksi ulkoasumuutoksen myötä, vaan se on jatkuvaa kehittämistä ja kehittymistä. Jokainen työyhteisön jäsen tuo kulttuuriin jotain omaa persoonallaan, minkä vuoksi kulttuuri, ja samalla brändi, kasvaa ihmisten mukana. Hyvä henki syntyy sisältä ja näkyy ulos – ja aidoista asioista on helppo viestiä.
Ne jo aiemmin mainitut sliipatut stock-kuvat tuntuvat nykypäivän hektisen verkkosisällön joukossa falskeilta. Sen sijaan ollaan kiinnostuttu persoonallisesta, erikoisesta ja autenttisesta. Siksi Joinexin verkkosivuista haluttiin luoda sekä visuaalisesti kiinnostava sekä informatiivinen kokonaisuus, joka sisältää ja jossa voi jakaa yhä monipuolisemmin tietoa siitä, millainen yritys Joinex todella on.
Uudet tiedonjaon kanavat, kuten sosiaalisen median sivut ja blogi, ovat konkreettinen teko arvostamamme teknologiaosaamisen ja innovatiivisuuden puolesta. Mitä useamman ihmisen tieto saavuttaa, sitä otollisempi maaperä luodaan uusille ideoille ja keksinnöille. Juttusarjan seuraavassa osassa keskityn tarkemmin siihen, miten verkkosivujen sisältö rakennettiin tukemaan brändiä.
Or should one say “React still so hot”? Onhan se kuitenkin julkaistu jo 6 vuotta sitten – 29. toukokuuta 2013.
React on tapa rakentaa käyttöliittymiä. React tekee käyttöliittymien rakentamisen helpoksi pilkkomalla jokaisen sivun paloiksi. Näitä paloja kutsutaan komponenteiksi.
React -komponentti on pala koodia, joka kuvaa jotain tiettyä osaa sivusta. Jokainen komponentti on JavaScript -funktio, joka palauttaa palan koodia, joka puolestaan kuvaa osaa verkkosivusta.
Sivu siis muodostuu Reactilla siten, että näitä funktioita kutsutaan ja kasataan tietyssä järjestyksessä, ja näytetään tuo järjestys käyttäjälle.
React on JavaScript -kirjasto, joka käyttää JSX-syntaksia (JavaScript XML). React ei itsessään vaadi JSX:n käyttöä, eli sitä olisi mahdollista kirjoittaa suoraan JavaScriptinä, mutta useimmat kokevat JSX:n käytön hyödylliseksi. Yleisesti ottaen kukaan täysjärkinen ei kirjoita Reactia ilman JSX:ää.
Komponentit siis sallivat käyttöliittymän erottelun itsenäisiin ja uudelleen käytettäviin lohkoihin. Komponentteja voidaan luoda funktioiden lisäksi “ES6 class:ia” käyttämällä. Lisätietoa ES6 luokista: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes.
Props on lyhenne sanasta “Properties”. Propseja käytetään tiedonvälitykseen komponenttien välillä. Perusidea propseissa on se, että voit kirjoittaa yksittäisen komponentin, jota voidaan käyttää useassa eri paikassa sovellustasi. ”Parent” -komponetti, voi antaa sen sisällä olevalle ”Child”-komponentille propsit. ”Child”-komponentti voi siis sijaita myös eri tiedostossa kuin ”Parent”-komponentti. Periaatteessa propsit auttavat kirjoittamaan uudelleenkäytettävää koodia.
Reactin yksi ainoita tiukkoja sääntöjä on se, että luokkien tai funktioiden ei ole koskaan tarkoitus muokata omia propsejaan suoraan. Sen sijaan, että propsien arvoa muutettaisiin, muutetaan tilan arvoa eli ”State”. Tästä tarkemmin seuraavassa kappaleessa.
Tila initialisoidaan luokan konstruktorissa. Konstruktori on ainoa paikka, missä tilan arvo voidaan asettaa suoraan ilman siihen tarkoitettua setState()-funktiota tai hook:ia.
Sovelluksen tila voidaan siis päivittää käyttämällä setState()-funktiota tai State hook:ia käyttämällä. State hook:stä lisätietoa löytyy: https://reactjs.org/docs/hooks-state.html
Tässä oli lyhyehkö katsaus Reactin perusteisiin, joiden on tarkoitus antaa lukijalle pientä näkemystä Reactin käytöstä teoriatasolla. Teille, joita React kiinnostaa enemmän ja haluatte käytännön esimerkkejä tai harjoituksia, voin suositella Helsingin yliopiston tarjoamaa Full Stack MOOC -kurssia. Kurssin sisältö on laaja ja tarjoaa hyvät perustaidot moderniin websovelluskehitykseen.
https://joinex.fi/react-hooks-react-blogi-part-2/
https://fullstackopen.com/osa1/reactin_alkeet
https://reactjs.org/docs/getting-started.html
https://reactjs.org/docs/introducing-jsx.html
https://reactjs.org/docs/state-and-lifecycle.html
https://medium.com/@thinkwik/why-reactjs-is-gaining-so-much-popularity-these-days-c3aa686ec0b3
Fujitsu Technology Solutions – Jakeluketjun hallintaa
Käyttöliittymän suunnittelu on helppoa. Aluksi.
Kaikki lähtee asiakkaan ideasta, jossa käyttäjälle on kaavailtu uusia mahdollisuuksia. Kokenut koodari hahmottelee ajatusta hetken päässään, piirtelee karkeita kulkukaavioita siitä, mitä dataa kulkee minnekin, ja avaa lopulta koodieditorin. Käyttöliittymä ottaa muotoaan, mutta hetken päästä edessä on jokin seuraavista tilanteista:
Sorrun omassa työssäni valitettavan usein näihin tilanteisiin johtavaan ylimielisyyteen. Kuvittelen hahmottavani käyttöliittymään tarvittavat elementit ja niiden väliset vuorovaikutukset riittävän hyvin. Kuitenkin löydän itseni aina asettelemasta lomakkeiden virhe-elementtejä ja muita helposti unohdettavia komponentteja paikoilleen.
Sitten näytän lopputulosta asiakkaalle ja kaikki menee uusiksi.
Monen odottamattoman lisäyksen ja korjauksen jälkeen on alkuperäinen visio usein hämärtynyt ja koodipohja nopeiden korjausten jäljiltä hutera. Refaktorointiin palaa aikaa ja energiaa, eikä voi olla ajattelematta, miksi taas kerran jätti suunnittelun väliin.
Suunnittelun mieltää usein liian raskaana prosessina. Toteutettava käyttöliittymä on kuitenkin yksinkertainen ja vastaavia on tullut tehtyä jo monia. Näkymiä ei vaivauduta piirtämään paperille, hitaasti aukeavan kuvankäsittelyohjelman käynnistämisestä puhumattakaan. Jonkinlaisista leiskoista olisi tietysti apua, kunnes niiden implisiittisiä interaktioita pitää alkaa erittelemään asiakkaalle.
Kevyeeseen suunnitteluun on onneksi olemassa työkaluja — sellaisia, joilla käyttöliittymien prototyyppauksesta on oikeasti hyötyä itselle, omalle tiimille ja asiakasinteraktiolle. Käsittelen tässä kirjoituksessa ilmaista Adobe XD ohjelmaa, joka on käytettävissä sekä Windows että MacOS laitteilla. Samat periaatteet pätevät varmasti sen kilpailijoihin, kuten Sketch, inVision ja Figma.
Adobe XD:llä työskentelyn tuloksena on käyttöliittymän interaktiivinen prototyyppi, jonka voi lähettää asiakkaalle arvioitavaksi tai kehittäjätiimille työn tueksi. Tein esimerkkinä kolmesta näkymästä koostuvan pyöräkaupan. Sen arviointiversiota voi kokeilla niin kuin se olisi valmis sovellus. Painikkeet johtavat oikeisiin näkymiin ja siirtymät ovat ainakin havainnollistavassa muodossa paikoillaan. Kehittäjäversiosta ilmenee mm. käytetyt värit, fontit, kuvat ja näkymien väliset siirtymät.
Kullanarvoista prototyypeissä on asiakkaan mahdollisuus kommentoida niitä täsmällisesti. Jos painikkeen väri häiritsee, asiakas voi kiinnittää siihen merkin ja ilmaista huolensa lyhyesti tekstillä. Enää ei tarvitse murehtia siitä, kuinka olette pitkään puhuneet samasta asiasta eri nimillä tai eri asioista samalla nimellä. Merkki näyttää täsmällisesti mistä on kyse.
Konkreettinen prototyyppi poistaa omista ajatusprosesseista ”näyttääköhän tämä hyvältä” vaiheen. Keskittymisen voi ohjata ratkaisemaan miten asiat toteutetaan eikä miltä ne näyttävät toteutettuna. Kun tietää mihin on menossa, koodia menee merkittävästi vähemmän hukkaan.
Seuraavassa Adobe XD artikkelissa sukelletaan sovelluksen perusteisiin ja opetellaan käyttöliittymän prototyypin luomista käytännössä!