Kesäkampanjamme on jälleen käynnistynyt

Saat hintaetua 4.6.-16.8. runsaasta kurssivalikoimasta – tutustu tarkemmin ehtoihin ja kursseihin täältä!

 

Search

Webin tekeminen ei ole helppoa – Bye bye Adobe Muse

Adobe ilmoitti 26.3.2018, että Muse tuotteen kehittäminen ja tuki loppuu. Bye Bye. Jotenkin tämä oli jo aavistettavissa ja vaikka kaikkeni yritinkin hyväksyäkseni Musen, niin silti aina epäilin sen tulevaisuutta. Miksikö? Koska tiedän miten verkkosivuja oikeasti tehdään ja mitä siihen liittyy. Lue Adoben ilmoitus Musen kehittämisen päättymisestä täältä.

Olen ollut tietotekniikka-alalla riittävän pitkään, että muistan vastaavia yritelmiä kuin Muse ajalta ennen nykyistä webbiä. Tulin alalle jo 80-luvulla ja olen nähnyt tähän päivään mennessä yhtä jos toistakin.

Historiaa

90-luvulla puhuttiin ja intoiltin paljon ns. neljännen sukupolven ohjelmointi- ja kehitystyökaluista. Innokkaimmat näkivät silloin, kuinka koodarit käyvät tarpeettomiksi kun jokainen toimistotyöntekijäkin alkaa  itse kokoamaan tarpeisiinsa toimivan sovelluksen vedä-ja-pudota tyyppisesti sovelluskehittimessä. Ei toteutunut.

Webin tekemisessä oli välissä oma vaiheensa kun käytettiin MS Frontpage ohjelmaa tai Adoben Dreamweaveriä ja sen graafisia työkaluja. Sivuja yritetettiin rakentaa valmiita paloja sijoittelemalla ja vaikuttamalla niiden ominaisuuksiin. Työ oli hidasta ja mahdollisuudet sivuston muokkaamiseen rajalliset. Optimoinnista, responsiivisuudesta ym. ei ollut tietoakaan. Näistä välineistä on luovuttu, tekniikka ei toteutunut. Dreamweaver on toki vielä olemassa ja on ihan ok työkalu mutta sisältää suurimman osan turhaa. Koodieditorina se menettelee mutta koodaamiseen on tarjolla parempiakin työkaluja.

Katosivatko koodarit – Ei. Eivätkä katoa, sellaista voi ennustaa vain, jos ei ymmärrä miten sovellukset ja esim. verkkosivut toimivat. Nyt on vuosi 2018 ja koodin kirjoittamisen taito on entistä tärkeämpää.

Sitten syntyi Adobe Muse

Adoben Muse on taitto-ohjelma, joka julkaisee sisällön verkkosivuksi. Eli Muse on HTML generaattori. Ei sen kummenpaa. Muse tuottaa HTML ja CSS koodia, koska se on se mitä selaimet ymmärtävät. Ajatus oli, että graafikoiden ei tarvitsisi opetella koodia vaan voisivat tuottaa verkkosivuja kuten InDesignilla julkaisuja. Ihan kiva ajatus, mutta ei se vaan oikein toiminut, mistä osoituksena se, että Adobe sen lopettaa.

Kaiken takana on ollut väärä asenne. On ajateltu, että voisi siirtyä uudelle sektorille opettelematta uutta. Että graafikon ei tarvitsisi opetella koodia ja että työkalu voisi tehdä kaiken koodin. Jos haluaa siirtyä webdesigneriksi tulee opetella sen alan tekniikat!

Webin tekeminen ei ole välinelaji. Työkalu ei tee verkkosivuja – ihminen tekee

Millä webbiä tehdään, työkalut ja alustat

Jotta voisi ymmärtää työkaluja ja verrata niitä keskenään, pitäisi ymmärtää miten verkkosivut toimivat. Siitä riippumatta millä ja miten verkkosivut tehdään ovat ne aina vain HTML, CSS ja JavaScript koodia. Sisältö (sivun sisältörakenne) toteutetaan aina HTML koodilla. Kaikki sivun ulkonäköön liittyvä määrittely; sisällön asemointi, typografia, responsiivisuus, värit, efektit ym. tehdään CSS tyyleillä. Sivun toiminnallisuudesta vastaa JavaScript. Nämä kaikki ovat tekstiä! Niiden tuottamiseen ei tarvita sen kummallisempaa työkalua. Verkkosivujen tekemiseen siis tarvitaan vain tekstieditori. Niin, ja tietenkin tietty määrä osaamista.

Verkkosivujen tekniikka ja toteutukset eivät ole työkaluriippuvaisia vaan perustuvat standardeihin. Minkä aloitat yhdellä työkalulla, voit viimeistellä tai muokata toisella. Koska kaikki on vain tekstiä.

Työkaluja koodin kirjoittamiseen

Verkkosivujen tuottamiseksi tarvitset vain koodauskäyttöön tarkoitetun tekstieditorin. Ei muuta. Editorin on hyvä osata värikoodata eri merkkaus- tai ohjelmointikielien koodi niiden kieliopin, syntaksin, mukaan sekä tarkistaa koodin oikeellisuus ja osoittaa virheet. Koodin tuottamista avustaa myös koodiehdotukset, joita työkalu voi tarjota eli täydentää koodia. Tällaisia editoreja ovat mm. Brackets (https://brackets.io), Atom (https://atom.io), Visual Studio Code (https://code.visualstudio.com/), Sublime Text (https://www.sublimetext.com/) ja pitkä lista muita.

Editorin valinta on henkilökohtainen valinta. Käyttäköön kukin minkä hyväksi kokee. Jos työkalu tarjoaa tarvittavat ominaisuudet, se on täydellinen.

Sisällönhallinta- ja julkaisujärjestelmät

Suurin osa uusista verkkosivuista tehdään käyttäen jotain sisällönhallintajärjestelmää, jolla sisällön tuotanto tapahuu suoraan selaimessa ja sivuston rakenne ja ulkoasu tulee sisällönhallintajärjestelmän tarjoamana. Sisällönhallintajärjestelmien markkinaosuuksissa WordPress on tällä hetkellä kirkkaassa johdossa. Tilastointitavasta ja tilastoon sisällytetyistä sisällönhallinta- ja julkaisujärjestelmistä riippuen WordPressin osuus on 50 – 70% luokkaa. Ja osuus on vain kasvussa. Drupal ja Joomla ovat muutaman viime vuoden aikana olleet lievässä laskussa, mutta se ei ole osoitus niiden huonommuudesta. Sisällönhallintajärjestelmä tulisi valita sivuston tarpeiden mukaan.

Julkaisujärjestelminä pidän tässä kirjoituksessa valmiita palveluita, joihin voi luoda tilin ja alkaa toteuttamaan omaa verkkosivuaan suoraan selaimessa. Nämä ”kotisivukone” -tyyppiset ratkaisut perustuvat valmiiseen julkaisujärjestelmään, jossa käyttäjä voi valita järjstelmän omista ulkoasumalleista ja sisältöelementeistä haluamansa ja niiden avulla koota sivun. Niissä on omat hyvät puolensa kuten helppo käyttöönotto mutta samalla niissä on omat rajoitteensa. Tällaisia ovat mm. Weebly (https://www.weebly.com/) ja Wix (https://www.wix.com/). Mutta näidenkin kanssa toiminnot on rajattu vain tarjolla oleviin vaihtoehtoihin ja raja voi tulla yllättäen vastaan.

Visuaalisuus vai toiminnallisuus

Valmiit julkaisujärjestelmät markkinoivat itseään näyttävillä ulkoasuilla mutta websuunnittelu on paljon muutakin kuin ulkoasua. Kärjistäen olisi sama jos suunnittelisi taloa käyttäen apunaan ainoastaan Tikkurilan värikarttaa. Sivuston suunnittelun tulee lähteä sisällöstä, tarkoituksesta, kohderyhmästä ja tavoitteesta. Näiden perusteella päätetään mitä ja miten toteutetaan. Mainitsen jälleen kerran – Kyse ei ole työkalusta eikä ongelma ratkea pyytämällä työkalua tekemään sivusto. Muse lankesi tähän ansaan. Ajateltiin, että verkkosivuja voi toteuttaa pelkkään sisältöön ja ulkoasuun keskittyen. Koodia ei tarvinnut nähdä, eikä siihen oikein voinut vaikuttaakaan. Koodi tuli Musen generoimana eikä kaikki koodi ole samanarvoista.

Mitä verkkosivujen tuotannossa tulee huomioida

Puuttumatta verkkosivujen koko suunnittelu- ja toteutusprosessiin, listaan asioita, joissa Muse ei pärjännyt.

Sivuston mobiiliystävällisyys ja suorituskyky

Tätänykyä tulee kaikki sivustot tehdä kaikissa päätelaitteissa toimiviksi. Responsiivisuus on paljon enemmän kuin pelkästään näyttöruudun koon perusteella tapahtuvaa sisällön asemointia. Se on sisällön suunnittelua, tarpeiden ennakointia, käyttötilanteiden mukaista suunnittelua, suorituskyvyn optimointia, verkkoyhteyksien huomioimista ym. Kyseessä on hyvin tekninen asia, johon Musen käyttäjä ei voi paljonkaan vaikuttaa. Musen tuottama koodi on taasen sellaista, että sen jälkeenpäin tapahtuva optimointi olisi työläämpää kuin kaiken tekeminen ensin kerralla kunnolla. Siis itse koodaten.

Sivuston sisällön ylläpito ja muokkaus

Asiakkaille sivustoja tehtäessä, haluaa asiakas pääsääntöisesti mahdollisuuden ylläpitään sisältöä itse. Webissä mikään ei ole pysyvää vaan sisältö elää ja muuttuu ajan kuluessa. Musessakin saattoi mahdollistaa sisällön muokkauksen asiakkaalle, mutta vain olemassa olevaan sisältöön. Asiakas ei voi tehdä uusia sivuja tai sisältöelementtejä sivuille samoin kuin esimerkiksi WordPressissä voi.

Toiminnallisuudet

Museen on saatavilla, tosin rajoitetusti, lisäosia, joilla voidaan toteuttaa tiettyjä verkkosivujen toimintoja. Laajennettavuus on kuitenkin hyvin alkeellista verrattuna vaikkapa WordPress lisäosien määrään ja mahdollisuuteen muokata koodia itse.

Mitä sitten pitäisi osata, että voi tehdä verkkosivuja?

Tähän tarvitaan perustekniikoiden ymmärrys. Vaatimuksena on HTML ja CSS -perusteet sekä ymmärrys siitä miten web toimii; miten verkkosivut latautuvat, miten selaimet käyttäytyvät ja eri tekniikoiden roolit. HTML -merkkauskieli sisältää vajaa 150 elementtiä. Hyvin pitkälle pääsee, jos ymmärtää ja muistaa niistä vaikka puolet. CSS:n avulla toteutetaan verkkosivun ulkoasu. Siinä on vähän enemmän opettelemista, mutta jos ymmärtää toiminnan selviää jälleen kohtuullisella osaamisella. Asiat ovat opittavissa kohtuullisessa ajassa. Kahden päivän tehokas kurssi antaa riittävät eväät aloittaa. Nämä tekniikat ja webin toimintamalli olisi syytä hallita vaikka ei aikoisikaan tuottaa sivuja itse HTML -koodia kirjoittamalla vaan esimerkiksi WordPressin valmisteemoja käyttäen.

Tekniikan ymmärtäminen on edellytys minkä tahansa asian tekemiselle, jos sen halutaa tehdä hyvin.

Valitettavan usein kuulen sanonttavan, että ei voi osata kaikkea. Jokaisen tulisi keskittyä vahvuuksiinsa, eikä designer voi osata koodia tai ettei koodari ymmärtäisi designin päälle. Kaikki tuo on silkkaa puppua! Parhaat web-maailman designerit ovat myös yleensä koodin huippuosaajia.  Eli tee itsellesi palvelus ja ala opiskella webin tekniikoita. Verkkosivut tehdään nyt ja vielä pitkälle tulevaisuudessa koodia kirjoittaen ja vaikka käyttäisit toisen tekemää valmista koodia on sinun silti ymmärrettävä sitä. Webbiä ei tehdä työkalulla vaan osaamisella.

Mihin Musen käyttäjien kannattaisi nyt keskittyä

En voi liiaksi korostaa tätä – opettele koodin perusteet! HTML ja CSS ”turisti-italian tasolla” riittää alkuun. Tee harjoitussivuja ja sivustoja paikallisesti omalla koneellasi, älä odota voivasi harjoitella asiakasprojektilla. Kun hallitset perusteet, tutustu WordPressin käyttöön. WordPressin ekosysteemi on laaja ja kehittyy jatkuvasti. Siten sille uskaltaa ennustaa pitkää tulevaisuutta. Muista, että WordPressin helppoudesta osa on vain näennäisen helppoa. Asioita saa aikaiseksi, mutta ne olisi silti voinut tehdä paremmin erityisesti tietoturvan ja tulevaisuuden ylläpidon kannalta.

Lyhyesti:

  1. Opettele HTML ja CSS perusteet
  2. Opettele WordPress ylläpidon ja sivustojen suunnittelun perusteet
  3. Valitse käyttöösi hyvä valmisteema, jonka käytön opettelet kunnolla
  4. Harjoittele – Paljon

Mitä Muse sivustoille ja Muselle nyt tapahtuu?

En voi tietää. Adobe ei ole kertonut tästä meillekään yhtään sen enempää kuin mitä on julkisuudessa tiedottanut. Tosiasia on vain, että Muse tulee katoamaan. En lähtisi enää tekemään sillä yhtään uutta toteutusta, sillä kuolevan tuotteen varaan ei kannata rakentaa. Kauanko Muse on saatavilla, mitä tapahtuu nykyisille sivuille, säilyykö Muse tuotteena vaikka tuki ja kehitys loppuukin. Näihin vastausta tulee etsiä Adobelta.