Soluessee. Kirjoittajat Annamari Aalto, Titta Savolainen, Tina Uusitalo.

Verkkosivujen rakentaminen step-by-step

Tämän soluesseen tarkoituksena on esitellä selkeästi välttämättömät vaiheet verkkosivujen rakentamiseksi itse valmiin alustan avulla. Monelle kynnyksenä on aiheeseen liittyvä sanasto sekä näiden termien merkitys rakennusprosessissa. Usein myös kuvitellaan, että tarvitsee osata koodausta rakentaakseen verkkosivut. Nykyaikana nämä seikat eivät kuitenkaan ole kynnyksenä sille, ettei kuka tahansa voisi rakentaa verkkosivuja. Toki mitä enemmän aiheeseen perehtyy, sitä monipuolisempia ratkaisuja saa aikaiseksi. Esittelemme kuitenkin nyt tarvittavat askeleet siihen, kuinka nettisivut voi aloittelijana tehdä hyödyntämällä valmiita alustoja kuten WordPress tai Squarespace.

Verkkotunnus eli domain

Verkkotunnus on verkkosivujen yksilöity verkko-osoite. Samannimistä osoitetta ei siis voi olla kenelläkään muulla käytössä yhtäaikaisesti. Verkkotunnuksen loppuosa on kuitenkin mahdollista rekisteröidä eri päätteillä, esim. .fi, .com, .org, .net. Verkkotunnuksen hinta riippuu valitusta päätteestä. (Nebula Oy, 2018). Yrityksellä voi siis esimerkiksi olla ostettuna verkkotunnus esimerkki.fi, mutta jokin toinen taho voi silti ostaa tunnuksen esimerkki.com niin halutessaan. Yritys voi kuitenkin ostaa itselleen tunnuksen useilla eri päätteillä. (Website Builder Expert, 2018).

Voi siis olla tarpeellista ostaa useampi verkkotunnus, mikäli on mahdollista, että asiakkaasi kirjoittavat osoitteesi väärin tai hakevat sitä eri päätteellä. Esimerkiksi yrityksesi osoite on www.esimerkki.fi. Asiakkaasi kuitenkin saattavat etsiä sitä kirjoittamalla www.esimerkki.com, www.esi-merkki.com tai www.esimerkki.net. Voit siis ostaa nämä domainit ja ohjata niihin kohdistuvan liikenteen oikealle sivustollesi www.esimerkki.fi. Asiakkaalle tämä näyttää siltä, että hän on heti saapunut oikeaan paikkaan.

Fi-loppuisten domainien saatavuuden voi tarkistaa Viestintäviraston sivuilta: https://www.viestintavirasto.fi/fiverkkotunnus/fi-verkkotunnuksenhankkiminen/fi-verkkotunnushaku.html (Viestintävirasto. 2016). Kun olet löytänyt itsellesi mieluisan domainin, täytyy se käydä ostamassa yksityiseltä palveluntarjoajalta. Domainin voi ostaa itselleen vähintään vuodeksi kerrallaan ja monissa paikoissa sen voi uusia automaattisesti. Palveluntarjoajia on satoja erilaisia sillä ne ovat yksityisiä tahoja. Domainin hinta vuodessa on muutama kymmenen euroa. Mikäli nettisivut tekee jonkin alustan, kuten WordPressin kautta, sinne luodaan automaattisesti oletus-domain, joka on muotoa esimerkki.wordpress.com. Tämä domain on maksuton. On siis suositeltavaa maksaa muutama kymppi vuodessa, jolloin domainin saa muotoon esimerkki.com ilman WordPressiä.

Ostamalla verkkotunnuksen saat siis vasta osoitteen verkkosivuillesi. Sinulla on kotiosoite kuten talolla, mutta seuraavaksi tarvitset tontille itse talon, jonka täytät huonekaluilla eli sisällöllä. On siis hankittava palvelin tai webhotelli, jossa verkkosivujesi tiedostot säilytetään ja jonka avulla verkkosivut näkyvät sivuston vierailijoille.

Webhotelli

Verkkosivusi tarvitsee säilytystilaa palvelimelta eli paikan johon ne on tallennettu. Käytännössä palvelimet sijaitsevat fyysisesti näitä varten kyhätyissä laitteistoissa jossain päin maailmaa. Tämä on kuitenkin kallista ja vaatii teknistä osaamista, joten helpompaa on useimmille hyödyntää valmiita palveluntarjoajia, jotka hoitavat tämän osaamisen puolestasi. Näitä palveluntarjoajia kutsutaan webhotelleiksi. (Ahonen, Mikael. 2015). Tunnettuja webhotelleja ovat esim. Radicenter, FastComet ja Webhotelli.fi.

Webhotellit tarjoavat erilaisia paketteja, joiden sisällön perusteella voit valita mitkä ovat sinulle tarpeelliset ominaisuudet. Näitä ovat mm. verkkotunnus,  sähköpostilaatikko, tietokantoja, hallintapaneeli sekä tietysti palvelintila. Jos kuitenkin olet ostanut verkkotunnuksen jo erikseen, voit useimmista webhotellista valita paketin ilman sitä. Riippuen verkkosivuillasi samalla hetkellä tapahtuvasta vierailijamäärästä sinulla voi olla tarve ostaa enemmän palvelintilaa, jotta verkkosivusi eivät kaatuisi liiasta asiakas virrasta. Myös suuri määrä kuvia ja videoita voi vaatia lisää tilaa. Sinun ei kuitenkaan aloittaessasi tarvitse pakettia valitessa tietää tarkalleen tarvitsemaasi tilan määrää, sillä voit ostaa myöhemmin lisää tilaa tarpeesi mukaan tai vain tilapäiseen tarpeeseen. (Huusko, Lauri. 2016).

Millä tehdä?

Nettisivuja voi tehdä usealla eri tavalla. Vaihtoehtoina on kirjoittaa koodi itse tai tehdä sivut jollain alustalla kuten WordPressillä, joka ei vaadi koodaustaitoja. Jos kirjoitat koodin itse, saat tehtyä tismalleen sellaiset sivut kuin haluat, mutta toisaalta monen suusta kuulee kritiikkiä “miksi keksiä pyörää uudelleen”, jos sivut voi rakentaa alustojen avulla. Alustat ovat ohjelmia, joiden avulla nettisivuja voi rakentaa muun muassa visuaalisten “page buildereiden” avulla.

Mikäli päätät koodata sivut itse, tarvitsen jonkin editoriohjelman, jonne kirjoitat koodin. Periaatteessa koodin voit kirjoittaa vaikka suoraan Notepadilla, mutta jokin tähän tarkoitukseen tarkoitettu editoriohjelma helpottaa koodaamista, sillä se muun muassa ilmoittaa virheistä koodissa. Tällaisia editoreja ovat muun muassa Brackets tai NetBeans. Nämä ohjelmat saa ladattua netistä ja asennettua omalle koneelle.

Ohjelmointikieli nettisivujen tekemiseen on HTML, jolla tuotetaan rakenne ja tekstit sivustolle. CSS-kielellä luodaan sivujen graafinen ilme kuten muun muassa fontit, värit jne. Javascript-kielellä taas saa ohjelmoitua toiminnallisuuksia nettisivuille kuten esimerkiksi yhteydenottolomakkeen. Nämä kielet voidaan kirjoittaa kaikki eri tiedostoihin tai vaihtoehtoisesti yhteen ja samaan tiedostoon. Mikäli ne kirjoitetaan eri tiedostoihin, luodaan kaikki tiedostot samaan kansioon, jolloin editori pystyy käyttämään niitä rinnakkain. Myös nettisivujen kuvat ladataan samaan kansioon. Erittäin kattavia ohjeita HTML-, CSS- ja JavaScript-kielten oppimiseen löytyy muun muassa osoitteesta https://www.w3schools.com/ . Jos koodin kirjoittaa itse, koodi täytyy validoida, eli tarkastaa virheiltä, ja tarkastaa sen toimivuus eri selaimilla. Koska mobiililaitteiden ja tablettien käyttö on nykyisin todella laajaa, kaikkien sivujen tulee nykyään olla myös responsiivisia, eli skaalautua eri kokoisiin näyttöihin sopiviksi.

Kuva 1: Verkkosivun skaalautuvuus (kuvakaappaus).

Aloittelijalle on huomattavasti helpompaa ja nopeampaa tehdä nettisivut valmiin alustan avulla. Ehdottomasti suosituin on WordPress. On huomioitavaa, että WordPressistä on kaksi erilaista versiota. WordPress.org ja WordPress.com. Näiden eroavaisuuksista voi lukea lisää täältä: http://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/

Useimmat alustat ovat hyvin käyttäjäystävällisiä, ja pienen tutustumisen jälkeen näiden kanssa sivujen julkaiseminen sujuu yleensä vaivatta. Kuvassa 2 on koottuna tällä hetkellä kansainvälisesti suosituimpia alustoja.

Kuva 2: Mening, Robert. 2018.

Alustapalvelun heikkous on se, että olet myös jatkossa aina kiinni tässä palvelussa ja sivujesi sisällön siirtäminen muualle on työlästä. Kannattaa siis harkita haluaako lähteä rakentamaan sivuja lainkaan tälläiseen palveluun.

Suosittelemme kuitenkin jollakin alustalla tekemistä varsinkin alkuvaiheessa, jos omien sivujen toimivuutta ja tarpeellisuutta haluaa testata halvalla. Näihin on useimmiten myös helppoa lisätä muun muassa verkkokauppa ja teknistä tukea on saatavilla. Esimerkiksi WordPressiin voi lisäksi lisätä omaa koodia, jolloin niistä voi rakentaa hyvinkin kustomoidut sivut. WordPressin etuja on myös sen suosittuus, jolloin erilaisiin ongelmiin löytyy runsaasti apuja ja ratkaisuja muun muassa YouTubesta.

WordPress on siis alusta, jonne sivustosi rakennetaan. Muokattavuus on helppoa, sillä voit ostaa valmiita teemoja eli jonkun valmiiksi suunnittelemia ja koodaamia ulkoasukokonaisuuksia. Tällöin sinun ei tarvitse lähteä luomaan sivuston rakennetta tyhjästä vaan voit valita omaa silmääsi miellyttävän valmiin ratkaisun. (Yrityksen-perustaminen.net. 2018).

Teemoja löytyy maksuttomia ja maksullisia. Hankittuasi teeman, se asennetaan parilla napin painalluksella. Sitten sitä voi vielä itse muokata, jos niin haluaa. Parhaat paikat teemojen etsimiseen on WordPressin oma ilmainen teemahakemisto, Themeforest ja Creativemarket.

WordPressin yksi ominaisuus on sen helppo muokattavuus. Saatavilla on erilaisia lisäosia (eng. plugins), ja tällä tavoin sivuille voi lisätä muun muassa verkkokaupan. Lisäosia on saatavilla lähes mihin tahansa tarpeisiin. Suuri osa lisäosista on ilmaisia, mutta myös maksullisia löytyy.

Mitä muuta tulisi huomioida

Nettisivujen suunnittelussa täytyy muistaa huomioida tietoturva. Nykypäivänä nettisivujen tulisi olla SSL/TLS-salatut, koska salaus on mahdollista toteuttaa ilmaiseksi ja vain pienellä vaivannäöllä käyttäen esim. Let’s Encrypt -palvelua. Salaus on erityisen tärkeää jos sivustolla on lomakkeita, joiden kautta lähetetään tietoa. Huomaat onko nettisivu salattu kun osoitekentän alussa on “https://”, jos kirjainten päällä on punainen viiva tarkoittaa se, että salaus on heikko tai osa sivustosta ei ole salattu. (Hari-WebDesign. 2018)

SEO:n eli hakukoneoptimoinnin tarkoitus on saada lisää kävijöitä verkkosivustolle. Tällä tarkoittaa verkkosivujen nostamista hakutuloksissa haluttuja hakusanoja käytettäessä. Ilman hakulauseeseen liittyvää sisältöä, nettisivusi ei tule pääsemään korkealle hakutuloksissa kyseisellä haulla, joka tarkoittaa, että sivusi ei saa kävijöitä hakukoneista kyseisellä lauseella tai sanalla. Yleisesti ihmiset eivät mene googlen ensimmäistä sivua pidemmälle, joten muista panostaa myös tähän sivuja tehdessäsi. (Suomen Digimarkkinointi Oy. 2018)

Lähteet:

Ahonen, Mikael. Kotisivuopas. 7.4.2015. Blogi. Luettu 29.4.2018. https://mikaelahonen.com/fi/blog/kotisivuopas/

Suomen Digimarkkinointi Oy. 2018. Blogi. Luettu 29.4.2018.

https://www.digimarkkinointi.fi/blogi/mita-hakukoneoptimointi-seo-on

Hari-WebDesign. 2018. Nettisivut ja tietoturva. Luettu 28.4.2018. https://www.hari-kotisivut.fi/tietopankki/tietoturva

Huusko, Lauri. Miten valitsen webhotellin WordPress-sivustolleni? 6.8.2016. Luettu 29.4.2018. https://www.laurihuusko.fi/wordpress/miten-valitsen-webhotellin-wordpress-sivustolleni/

Mening, Robert. 2018. How to Make a Website. Luettu 29.4.2018. https://websitesetup.org/

Nebula Oy. 2018. Yleistä verkkotunnuksista. Luettu 27.4.2018. https://www.nebula.fi/ohjeet/yritysten-verkkosivut/verkkotunnukset/yleista-verkkotunnuksista

Viestintävirasto. 2016. Fi-verkkotunnushaku. Luettu 27.4.2018.  https://www.viestintavirasto.fi/fiverkkotunnus/fi-verkkotunnuksenhankkiminen/fi-verkkotunnushaku.html

Website Builder Expert. 2018. What is a Domain Name? See our ABC Guide to Domain Names for Beginners. Luettu 29.4.2018 https://www.websitebuilderexpert.com/what-is-a-domain-name-beginners-guide/

Yrityksen-perustaminen.net. 2018. Kotisivut uudelle yritykselle. Luettu 29.4.2018. https://yrityksen-perustaminen.net/kotisivut-yritykselle/