Julkaisun toteutuksesta

Miten julkaisu on toteutettu

Lähtökohtinani oli löytää nettijulkaisun tekoon välineet, joilla voidaan tuottaa erilaisille laitteille skaalautuva julkaisu ja toisaalta minimoida julkaisun työmäärä ja kustannukset.

Nettiä käytetään nykyisin monenlaisilla laitteilla. Mobiililaitteiden, kännyköiden ja tablettien käyttö nettijulkaisujen lukuvälineenä on kasvanut hurjaa vauhtia. Jäin eläkkeelle vuoden 2017 lopulla ja aloin tutkia nettijulkaisujen toteutuksen nykytilaa. HTML5- ja CSS3-julkaistukset ja JavaScript-kielen kehitys ovat tuoneet paljon uusia ominaisuuksia ja mahdollisuuksia nettijulkaisujen tekemiseen. Mobiililaitteiden käytön kasvu on puolestaan tuonut uusia vaatimuksia nettijulkaisujen toteuttamiseen.

Tämän päivän trendi nettijulkaisussa on responsiivisuus, yksinkertaistettuna sillä tarkoitetaan mukautuvuutta. Responsiivisesti toteutettu sivusto tunnistaa käytettävän laitteen ja mukauttaa julkaisun ulkoasun, sisällön ja erilaiset toiminnallisuudet automaattisesti käytettävän laitteen mukaan, joten sivujen toteuttaminen erikseen erilaisille laitteille on tarpeetonta.

Bootstrap takaa responsiivisuuden

Kehittyneet web-julkaisun ominaisuudet vaativat sisällöntuottajalta laajempaa osaamista, mutta onneksi uusien ominaisuuksien hyödyntämiseen löytyy paljon hyviä ja ilmaisia apuvälineitä. Hyödyllisin ja merkittävin apuväline on Twitterin kehittämä Bootstrap. Se sisältää laajan tyylikirjaston sekä ison joukon JavaScript-toimintoja, joilla sivujen skaalautuvuus erilaitteille toteutuu ilman erityisiä toimenpiteitä.

Bootstrapin on ilmainen avoimen lähdekoodin ohjelmisto ja sen toiminnallisuus lähtee Mobile First -filosofiasta eli Bootstrap on suunniteltu ensisijaisesti mobiilikäytön tarpeita silmällä pitäen. Bootstrap sisältää kaikki web-julkaisujen toteutuksessa tarvittavat yleiset ja erikoisemmatkin elementit.

Bootstrapiin on saatavilla tuhansittain kustomoituja html- ja css-komponetteja. Netistä löytyy Bootstrapiin perustuvia sekä ilmaisia että maksullisia, erilaisiin tarpeisiin räätälöityjä valmiita sivustopohjia ja myös editoreita, joilla sivustoja voidaan muokata. Bootstrapista käytän versioita 3.37.

Muita työkaluja

Kokeilin joitakin tyylipohjia ja editoreita, mutta havaitsin, että useimmat valmisratkaisut soveltuvat aika suppeiden sivustojen tarpeisiin. Lisäksi minulla oli ennestään aiemmin työkaluilla tehtynä jo yli 300 nettisivua. Päädyinkin käyttämään julkaisun muokkaamiseen, BlueGriffon ja Notepad++ -editoreita. Enimmäkseen käytän Notepad++, koska olen huomannut BlueGriffonin välillä sotkevan koodia niin, että julkaisun ulkoasua ei vastaa toivottua.

Notepad++ on osoittautunut myös oivalliseksi välineeksi vanhojen nettisivujen konvertointiin. Sillä pystyy muuttamaan tiettyjä ominaisuuksia tai laajojakin osia kerralla vaikka kuinka monesta nettisivusta. Lisäksi sillä voi helposti toteuttaa esimerkiksi merkistömuutokset. Aiemmat sivuni perustuivat ISO-8859-1 merkistöön, nyt kaikki sivut käyttävät UTF-8 merkistöä. ISO-8859-1 tunsi vain 256 merkkiä, kun taas UTF-8 mahdollistaa yli 100000 merkin käyttämisen. UTF-8 on yksi Unicode-standardin variaatio. Käytännössä se helpottaa erikoismerkkien käyttöä nettisivujen julkaisussa. Lukijalle se ei näy muuten kuin nettisivuilla tekstissä esittää erikoisempiakin merkkejä.

Toinen merkittävä avoimeen lähdekoodiin perustuva web-julkaisun apuväline on JS Foundationsin tuottama jQuery. Se on nopea, pieni ja monipuolinen javascript-kirjasto, joka on suunniteltu helpottamaan nettijulkaisun navigointia, hallitsemaan julkaisun elementtejä, luomaan efektejä ja animaatioita jne. jQuery tarjoaa yhdenmukaisen toiminnallisuuden eri valmistajien selaimissa (Firefox, Chrome, Edge, Internet Explorer jne). Olen hyödyntänyt jossain määrin myös jQuerya.

Bootstrapin Glyphicons-fonttien lisäksi olen käyttänyt Font Awesome ja Google Fonts -fonttikirjastoja. Julkaisuni perusfontiksi valitsin Googlen Open Sans -fontin. Kuvia olen käsitellyt pääosin Gimp-ohjelmalla. Valokuvia olen käsitellyt myös Canonin Digital Photo Professional -ohjelmalla. Myös joitain muitakin ohjelmia olen satunnaisesti käyttänyt kuvien käsittelyyn.

Julkaisuni haku-toiminnon olen toteuttanut Googlen tarjoamalla täsmähaulla. Tämä palvelu käyttää yleisesti tunnettua Googlen hakualgoritmia, mutta kohdistaa haun vain julkaisuni sisältöön. Haku on salamannopea, kuten Googlen yleinen hakukin. Käytän julkaisussani myös Google Maps -karttapalvelua ja Google Analytics-palveluja julkaisun käytön analysointiin.

Julkaisun rakenteen oikeellisuuden testaukseen olen käyttänyt pääosin World Wide Web konsortion (W3C) Markup Validation ja CSS Validation palveluja. Lisäksi olen testannut julkaisun ominaisuuksia Google Chrome, Firefox, Internet Explorer ja Edge-selaimilla. Olen myös hyödyntänyt selaimiin sisältyviä validointipalveluja. Olen käyttänyt aina selainten uusimpia versioita. Olen käyttänyt myös Googlen mobiilisoveltuuvuustesti ja Chrome DevTools -työkaluja. Mobiilitestaukseen olen käyttänyt myös Mobilizer-testityökalua, jolla voi testata nettisivujen toimivuutta erilaisilla mobiililaitteilla. Satunnaisemmin olen käyttänyt muitakin testausvälineitä.

Näillä välineillä asettamani tavoitteet erilaisille laitteille skaalautuvasta julkaisusta ja julkaisun helppoudesta sekä kustannusten minimoinnista näyttävät toteutuvan hyvin. Oma aikansa meni tietysti tähän kaikkeen perehtyessä. Pyrin vielä kartoittamaan vaihtoehtoja editoreiden osalta. Näillä välineillä olen kuitenkin päässyt hyvin alkuun. Olen pyrkinyt pitämään julkaisun rakenteen yksinkertaisena. Tällä varmistun myös siitä, että julkaisu toimii yhdenmukaisesti eri selaimilla.