Keskustelu: Nettisivujen teko: Nykyaikaisten web-sivustojen tekeminen

Haluaisin oppia tekemään nykyaikaisia web-sivustoja. Tarvisin tietoa, että millä ohjelmilla ammattilaiset tekevät nykypäivänä websivuja... Itse olen hiukan tehnyt php ja html pohjalla (itse kirjoittanut koodia). Eli diveillä rakennellut sivuja tyylitiedostoa hyväksi käyttäen. Onko tämä täysin väärä ja vanhentunut tapa? Niin ja leiskat olen tehnyt InDesignellä... Eli apuja kaivataan mm seuraaviin kysymyksiin:

1. Pitääkö minun hakeutua jonnekin koulutukseen websivujen suhteen (jos, niin minne?), vai onnistuuko vaan opettelemalla?
2. Miten kuvat saa skaalautumaan myös näytön koon mukaan (ja puhelinten)
3. Mistä löytyy web sivustojen rakentamisesta hyviä oppaita (miel. suomeksi)?

1. Onnistuu opettelemalla. Esim. Ohjelmointiputka.net:n keskustelupalstalta saa hyviä neuvoja. Osa neuvoista voi olla enemmän kehittyneille webikoodareille, osa neuvoista on helpompi.

2. Tapoja on monia, osa käyttäjistä käyttää prosentuaalisia mittoja, osa erillisiä css-tiedostoja. Paras avainsana googlehakuun lienee "responsiivinen ulkoasu".

3. Foorumeilta kyselemällä ja etsimällä löytyy paljon hyviä neuvoja. Suomeksi on tällä alalla turha oppaita etsiä, paras keino on hakukoneilla etsiminen, eikä ohjeet/oppaat yleensä ole sijoitettuna mitenkään yhdeen paikkaan, vaan omatoimisuutta ja aiheeseen perehtymistä homma tulee vaatimaan. Eri niksejä yhdistelemällä ja asian ymmärtäminen auttaa huomattavasti.

1. Opettele englantia ja totuttele lukemaan englanninkielistä teknistä materiaalia.
2. Unohda from scratch -projektit. Kaikki käyttävät kymmenittäin valmiita kirjastoja.
3. Opettele ensin tekemään koodi oikein, mieti vasta sitten tuollaisia yksityiskohtia kuin skaalautuvat kuvat.

Elikä siis. Ensimmäinen osa on tietysti opetella koodaamaan. Nyt ei puhuta ohjelmointikielen syntaksista vaan sivistyneen koodin tekemisestä ja kirjastojen käytöstä. Jos haluat koodata php:llä, niin silloin kannattaa tutusta esimerkiksi Symfonyyn, Zend Frameworkiin tai vaikka Laraveliin. Lisäksi on tärkeää ymmärtää php:n best practiset eli PSR-standardit.

Gui-puolella erityisesti protoiluun on Bootstrap hyvä kehys. Sillä saa aikaan näyttävät sivut pienellä vaivalla. Silloin voi keskittyä toiminnallisen koodin kirjoittamiseen css-taiton tuskailun sijaan.

Sitten kun backend-puoli alkaa olla hallussa, niin voi ruveta miettimään js-härpäkkeitä. Näin päin lähtisin itse tekemään.

P.S. Linkkejä ei ole, koska googlettaminen on yksi avaintaidoista.

Palvelinpään matskusta olen The Alchemistin kanssa eri mieltä. PHP-puolella frameworkit kuten Symfony, Zend ja Laravel voivat olla melkoinen beast lähteä liikkeelle.

Toki tämä tietysti siitä riippuu kuinka paljon on kokemusta palvelinpään koodista, mutta kokonaiset frameworkit jättäisin myöhemmälle ellei ole jo pohjalla jonkinlaista ymmärrystä aiheesta.

Sen sijaan aloittaisin ruohonjuuritasolta. Ihan aluksi vaikka se että erottelet palvelinpään koodin ja gui-koodin omiin kokonaisuuksiinsa yms.

PHP:llä jos koodaat, hyvää yleismatskua löytyy mm. http://www.phptherightway.com/

Bootstrapin lisäksi kannattaa tsekata http://html5boilerplate.com/

Javascript-puolella kirjastot ovat pääsääntöisesti paljon minimalistisempia, joten on vaikea ymmärtää, milloin kannattaisi käyttää mitäkin tai mitä asioita ei kannata lähteä käsin tekemään. Php-kehyksellä kun opettelee tekemään asiat oikein, niin siitä saa hyviä vinkkejä myös myöhemmin client-koodin tekemiseen ja organisointiin. Muuten koodaus menee siihen, että kaikki on purkkapaskaa sekä selaimessa että palvelimella.

Yksi näkökulma opettelemiseen on myös se, että millä tasolla haluaa asioita tehdä. Sinänsä ohjelmoinnin, CSS:n ja HTML:n perustaidot on helppo omaksua (eli kirjoittaa rakenteellisesti toimivaa koodia), mutta haasteet syntyvät näiden oikeaoppisesta käytöstä - etenkin kun joissakin asioissa on hyvinkin paljon eri tapoja lähestyä sitä ja eri tavoilla on omat etunsa ja haittansa. Mielipiteiden sekamelskasta ja Googlen hakutuloksista voi löytyä paljon ristiriitaistakin tietoa ja webiä koskevalla tiedolla on taipumus vanhentua nopeasti, vaikka esimerkiksi CSS:n perusteet ovat pysyneet jatkuvasti samana.

Sitten on toki se osaamisen tason mittari: kuinka tarkasti haluaa oikeasti ymmärtää sitä, miten asiat toimivat, ja mitkä asiat haluaa osata syvällisemmin. Pidemmän päälle erikoistuminen tiettyihin asioihin on hyödyllistä erityisesti työllistymisen kannalta. Toisaalta on myös erittäin tärkeää tehdä vähän kaikkea, jotta syntyy kokonaiskuva vaatimuksista. Erikoistuminen syö aikaa järkyttävästi: se on hirveä määrä kokeilua, lukemista, omien ja muiden mielipiteiden kyseenalaistamista sekä oman ymmärryksen luontia.

Yksi asia joka kannattaa huomioida on se, että monesti PHP:ta / backendiä pääsääntöisesti tekevät tietyllä tasolla vähättelevät CSS:n ja HTML:n osaamista ja pitävät niitä kovin yksinkertaisina. Totuus on kuitenkin aika pitkälle toista, erityisesti nyt kun CSS-taitto on saavuttamassa pisteen, jolloin kellutukseen pohjautuvasta asettelusta voidaan luopua vaikka kokonaan. Eli mitä enemmän paneudut backendiin (PHP:hen) tai "puhtaaseen" ohjelmointiosaamiseen, niin sitä todennäköisemmin päädyt tilanteeseen, että HTML ja CSS evvk.

1. Tee mahdollisimman paljon eri asioita, mutta älä silti keskity ihan kaikkeen kerralla. Keskity yksityiskohtiin kun tuntuu siltä, ettei perusteissa ole enää hirveästi opeteltavaa, tai jos jokin asia alkaa häiritä.

2. "Purkkapaska" ei opiskelun alussa haittaa, mutta on tärkeä tiedostaa se, että asiat voi tehdä paremmin ja pyrkiä tekemään ne paremmin. Kopioi toisten koodia, mutta selvitä itsellesi, miksi se toimii. (Harmittavan moni vain kopioi koodia ja sitten menee sormi suuhun kun se ei toimikaan omalla sivulla.)

3. Pyri erittelemään asiat selkeästi toisistaan. Esimerkiksi: älä kirjoita HTML:n tulostusta heti sekaisin tietokantakutsujen jälkeen. Älä kirjoita JavaScriptiä HTML:n sekaan. Älä käytä CSS:n tyylimäärityksiä HTML:n seassa vaan pidä ne omassa tiedostossaan.

4. Ohjelmoinnin opiskelu ja oikean mentalitentin saavuttaminen vie aikaa. Minkä tahansa asian kunnollinen omaksuminen vie vähintään noin 10 vuotta aikaa.

5. Erityisesti työelämän kannalta ohjelmointi on kuitenkin muutakin kuin koodin kirjoittamista. Toisten kirjoittamaa koodia on tärkeä oppia ymmärtämään ja lukemaan. Yksi hyvä tapa oppia itse lisää on yrittää ratkaista muiden ongelmia esim. foorumeilla tai käydä katsomassa ongelma Stack Exchangesta mutta olla lukematta vastauksia ja selvittää ratkaisu kokeilemalla ja tekemällä itse.

Eli paljon pitkäjänteistä itseopiskelua ja jatkuvaa kiinnostusta asiaan. Aloittaa vaan rohkeasti jostakin, ottaa tavoitteeksi vaikka omat kotisivut omalla yksinkertaisella CMS:llä, niin alkaa nopeasti tulla eteen yksittäisiä haasteita ratkottavaksi. Ensin tekee vaikka puhtaasti HTML:llä ja sitten alkaa miettiä, miten sisällön saa eroteltua jonkinlaiseen tietokantaan, sitten miettii kirjautumisen ja lopulta sisällön muokkaamisen tietokannassa. Toteuttaa vaikka ensin ilman mitään frameworkiä ja tutustuu eri ongelmiin (tietoturva, tiedon filtteröinti, merkistö/Unicode...), ja sitten koettaa toteuttaa koko touhun uudelleen käyttäen jotakin PHP frameworkiä.

Mutta tämä on vain yksi tapa. Ei ole yhtä oikeaa tapaa edetä.

Merri kirjoitti:

Yksi näkökulma opettelemiseen on myös...
...
...yhtä oikeaa tapaa edetä.

Tällaisia vastauksia Ohjelmointiputkassa saisi olla enemmänkin :)

Kun vastaan tulee ongelma, jota et pysty ratkaisemaan, älä jää siihen kiinni hamaan tappiin asti. Päätä saa toki hakata seinään ihan urakalla, mutta jossakin vaiheessa voi olla hyvä myöntää itselleen, että ongelma ei ole ratkennut kohtuullisella vaivalla. Tee silloin jotain muuta, vaihda projekti toiseen, tee yleensäkin sitä, mikä kiinnostaa eniten juuri sillä hetkellä.

Varsinkin alkutaipaleella huomaat kehittyväsi todella nopeasti. Jo puolen vuoden päästä saatat huomata, että olet ratkaissut mahdottoman ongelmasi miettimättä sitä yhtään.