Internetsivujen tekeminen on helppoa, kuin heinän teko!

Kysymys kuuluu, oletko kokeillut?

He-hei sinä tee-se-itse-mies tai -nainen, olet siis vakuuttunut siitä, että osaat itsekin yhdet kotisivut vääntää Yritystä pitääkin olla ja oppia ikä kaikki, ennen kuin kuitenkaan pidät itseäsi web-guruna ajattelin latistaa intoasi vähän

Mutta miksi ihmeessä lukisin tätä yhtään eteenpäin, kun netti on täynnä valmiita palveluita sivustojen tekemiseen? Virheoletus numero 1. Sanotaan nyt näin, että Rautiasta ei niin hyviä työkaluja saa, että ne rakentaisivat talon puolestasi. Jos selailet “valmiilla” työkaluilla tehtyjä esimerkkisivustoja, muista että niitä ei suinkaan ole tehnyt se tyyppi, joka aamukahvista virkistyneenä päätti ruveta websuunnittelijaksi, ne ovat ammattilaisten tekemiä.

No mutta onhan niitä WYSIWYG-editoreita, jopa ilmaisiakin, jotka huolehtivat koodista, kun itse saan keskittyä graafiseen suunnitteluun ja sisällön tuottamiseen. Virheoletus numero 2. Koodia kyllä tulee, mutta se on usein sotkuista, joka haittaa sekä käytettävyyttä, että etenkin hakukoneita. No mutta…
Lue eteenpäin, niin tiedät miksi.

Netti on pullollaan oppaita www-sivujen tekemiseen, joka on sekä hyvä että huono asia. Lähdekriittisyyttä vaaditaan rutkasti ja kykyä erotella jyvät akanoista – ehkä voin auttaa hieman.

Monessa oppaassa sanotaan, että opiskelu on helppoa ja hauskaa ja olet muutamassa viikossa master-tason tietäjä. Tämä ei tietenkään pidä paikkaansa. Se on helpompaa jos sen osaa, hauskaa jos siitä hommasta tykkää, mutta muutamassa viikossa et tule oppimaan, kuin pintaraapaisun internetsivujen tekemisestä. Ehkä opit kuukaudessa perusteet yhdestä ohjelmointikielestä, ehkä kyllästyt parissa päivässä, se on hyvin pitkälti sinusta itsestä kiinni.

Yhdellä ohjelmointikielellä ei voi saada kaikkea (tai oikeastaan paljon mitään). Ohjelmointikieliä on pitkä lista, mutta kaikkia ei tietenkään tarvitse osata läpikotaisin. Hyvä on jos ymmärtää monia kieliä, mutta ehkä järkevämpää on keskittyä niihin joita tarvitsee ja opetella ne kunnolla. Yleisiä kieliä ovat mm. HTML, CSS, JavaScript, PHP ja SQL-kielet. Just, sepä kiva, mutta mitäs niillä? Noh avaan tätä vähän, HTML:llä tehdään sivun rakenne, JavaScriptillä ja PHP:llä luodaan sivustolle dynaamisuutta. SQL-kielillä pelataan tietokantojen puolella, jotka toimivat tietovarastona. CSS:llä määritellään tyylit (graafinen ulkoasu) jne.

Olen tehnyt kotisivut ja testannut ne selaimessa, kaverillakin toimivat hyvin, se on siinä! …tai sitten ei. Kaikista kielistä tulee uusia versioita, selaimet ja käyttöjärjestelmät uudistuvat (vanhojen roikkuessa mukana pitkään), näyttöjen resoluutiot vaihtelevat, laitteita ja yhteysnopeuksia on laidasta laitaan. Näin ollen yksi sivuversio ei palvele kaikkia kävijöitä tasapuolisesti, vaan jos halutaan palvella isompaa ryhmää, tulee tehdä ehdollisia sivu-/tyyliversioita eri ryhmille. Testaa, testaa ja testaa ja muista testauttaa muilla, se on oleellisen tärkeää. Ja ole valmis vastaanottamaan kritiikkiä, sitä tulee, toivottavasti.

Pääasia että tekee hyvännäköistä jälkeä, muulla ei niin väliä. Juu ei. Internetissä grafiikalla tai sen puuttumisella on merkittävä rooli. Grafiikalla saa aikaan hyvää ja huonoa, selvä se – kuva tunnetusti kertoo enemmän, kuin ne kuuluisat tuhat sanaa, niin hyvässä kuin huonossakin. Yhtä oikeaa tapaa toteuttaa www-sivuston graafinen ulkoasu ei ole, vääriä tapoja lienee vieläkin useampia. Hyvännäköinen sivusto houkuttelee kävijöitä, kun taas visuaalisesti ruma tai hankalasti käytettävä sivu karkoittaa kävijät helposti. Pitää tietää mitä tekee, mutta yhtä tärkeää on se miten sen tekee, itseasiassa on mahdollista tehdä samannäköinen sivusto väärin ja oikein.

Hyvännäköinen ja oikein tehty sivu on on hyvä sivu. Ei ihan niinkään, painoarvo on kuitenkin sisällöllä. Sivuston sisältö tulee miettiä ennen, kuin sivuja ruvetaan tekemään. Auttavia kysymyksiä ovat mm. mitä, kenelle ja miksi. Myös sisällön järjestely on tärkeää, järjestys tulisi olla pakko tietää, hyvä tietää ja lopuksi kiva tietää.

No se optimointi on ainakin ihan sanahelinää – nörttien välistä viisastelua. Siltä se tosiaan voi kuulostaa, mutta sivustojen optimointi on oikeasti tärkeää. Se kulkee koko prosessin mukana, sivujen suunnittelusta palvelimen valintaan ja sivuston julkaisuun asti sekä mahdollisesti vielä sen jälkeenkin. Optimointia on kuvien optimointi webiä varten, puhtaan koodin kirjoittaminen ja pakkaaminen, tietokannan järkevä suunnittelu ja toteuttaminen, välimuistin käyttö sekä monet muut asiat.

Sitten kun olet sisäistänyt kaiken ja valaistunut (edes himmeästi), voit harkita niiden “valmiiden” ohjelmien/palveluiden käyttöä – jos se suinkaan on enää mielekästä

Lisää luettavaa ja työkaluja web-suunnittelijoille ja -kehittäjille

Internetsivuja

Google hakukone

http://www.google.fi
Aivan ehdon työkalu…noh kenelle vain ;D Opettele “Googlaamisen” jalo taito, jos haluat löytää internetistä ylipäätän mitään. Voit toki käyttää muitakin hakukoneita, ei se rikos ole

Webdesigner Depot

http://www.webdesignerdepot.com/
Hyviä ohjeita websuunnittelijoille grafiikasta tekniikoihin ja hyviin käytäntöihin.

WDL – Web Design Blog

http://webdesignledger.com/
Inspiraatiota, tutoriaaleja ja kaikkea siltä väliltä – tekijöiltä tekijöille.

WebAppers

http://www.webappers.com/
WebAppers blogin tarkoituksena on esitellä internet-ohjelmia vapaan lähdekoodin maailmasta päivittäin. Hyviä apuja ja kikkoja (mutta opetellaan ne perusteet ensin )

Yahoo! Developer Network

http://developer.yahoo.com/performance/rules.html
Paljon asiaa sivuston optimoimisesta – nopeus on valttia! (plus se säästää aikaa ja rahaa)

Markup Validation Service

http://validator.w3.org/
Tarkista koodisi oikeellisuus (HTML, XHTML, jne). Tämä on näppärä työkalu, mutta tuloksen tutkiminen vaatii hieman kriittisyyttä.

W3C CSS Validation Service

http://jigsaw.w3.org/css-validator/
Tarkista tyylitiedostojesi oikeellisuus – samanlainen validaattori, kuin edellinen, mutta CSS-koodille.

Text Fixer – Online-työkaluja webmastereille ja web-kehittäjille

http://www.textfixer.com/html/compress-html-compression.php
Online-työkalu koodin pakkaamiseen, käytä jos haluat, mutta tee varmuuskopio alkuperäisestä tiedostosta.

Google Analytics – Sivuston seurantatyökalu

http://www.google.fi/analytics/index.html
Google Analytics on yritystason verkkoanalyysiratkaisu, joka antaa tarkkoja tietoja verkkosivuston liikenteestä ja markkinoinnin tehokkuudesta.

Google Webmaster Tools – Työkalu hakukoneoptimointiin

www.google.com/webmasters/tools/
Työkalu mm. hakukoneoptimointiin (HUOM! Hakukoneoptimointi ei ole jotakin, mitä tehdään kerran, se elää ja sen mukana on elettävä.)

DomainToolsin Hakukoneselain – netti hakukoneen silmin

http://www.domaintools.com/seo-browser/
Tämän vekkulin pikkuapurin avulla, näet miltä nettisivusi näyttävät hakukoneen silmin. Saat myös hakukonepisteet ja ehdotuksia, joilla teet sivustosi paremmin hakukoneiden löydettäväksi.

Ilmaisia ohjelmia web-kehittäjille

Ubuntu – Linux ihmisille

http://www.ubuntu-fi.org/
Helppokäyttöinen Linux-käyttöjärjestelmä, voit ladata sen ilmaiseksi netistä, polttaa CD/DVD-levylle ja asentaa koneeseesi – ja se on jopa ihan suositeltavaa (kirjoittajan oma lisäys).

Gimp – Monipuolinen ohjelma kuvien käsittelyyn

http://www.gimp.org/
Kuvankäsittelyohjelma Linux-maailmasta. Gimp on valmiiksi asennettuna useissa Linuxin jakeluversioissa, niin myös Ubuntussa. (Toimii parhaiten Linuxissa – omakohtaisia kokemuksia).

Aptana – Koodarin vasen käsi

http://www.aptana.com/
Raflaava otsikko on kirjoittajan omaa käsialaa, satun pitämään tästä ohjelmasta. Aptanan saa erillisenä ohjelmana tai lisäosana Eclipseen. Erinomainen ohjelma koodin kirjoittamiseen.

Xampp – jokapojan palvelinympäristö testaamiseen

http://www.apachefriends.org/en/xampp.html
X eli kaikille käyttöjärjestelmille ja pakettiin kuuluu Apache, MySQL, PHP sekä Perl. Muista turvallisuus!

Firefox internetselain – koe web, niin kuin se on tarkoitettu

http://www.mozilla-europe.org/fi/
Firefox-selain – paras internetselain (saattaa olla kirjoittajan oma mielipide )

FileZilla – Tiedostot palvelimelle nopeasti ja turvallisesti

http://filezilla-project.org/
FTP-ohjelma tiedostojen siirtämiseen palvelimelle. On suositeltavaa käyttää tätä tai vastaavaa FTP-ohjelmaa, joka on siihen suunniteltu, eikä editoreiden omia “ominaisuuksia”.

Lisäosia (ainakin Firefoxiin)

Web Developer työkalupalkki

http://chrispederick.com/work/web-developer/
Web-kehittäjän työkalupalkki. Tämä näppärä apuri lisää selaimeen työkalupalkin, jossa on selkeä käyttöliittymä ja erittäin käteviä ominaisuuksia sivuston testaamiseen eri olosuhteissa (JavaScript päälle/pois, CSS-tyylit päälle/pois jne.). Ehdottoman suositeltava lisäosa web-ohjelmoijan selaimeen.

Firebug – näe koodi livenä ja sörki sitä mielin määrin

https://addons.mozilla.org/en-US/firefox/addon/firebug/
Todella kätevä työkalu, jonka avulla selaimesi muuttuu reaaliaikaiseksi koodieditoriksi. Voit editoida mitä tahansa sivua, testata ja tutkia CSS:ää, HTML:ää sekä JavaScriptiä lennosta. Web-kehittäjälle aivan must-työkalu.

YSlow – apuja nihkeille sivuille

https://addons.mozilla.org/en-US/firefox/addon/yslow/
YSlow analysoi web-sivuja ja niiden nopeutta (tai hitautta) ja antaa vinkkejä miten tehdä sivustosta nopeampi. Ehdotukset perustuvat Yahoo!:n tehokkaiden sivujen sääntöihin/suosituksiin.

FireFTP – Siirrä tiedostot palvelimelle selaimen avulla

https://addons.mozilla.org/en-US/firefox/addon/fireftp/
Lisäosa, joka mahdollistaa tiedostojen siirtämisen palvelimelle FTP:n kautta
(FTP = File Transfer Protocol – Tiedostonsiirtoprotokolla). Tämä on näppärä työkalu moneen äkkinäiseen, mutta suosittelen käyttämään FileZillaa tiedostojen siirtämiseen, jos se suinkin on mahdollista.

Palvelimelle asennettavia julkaisujärjestelmiä

WordPress.org

http://wordpress.org/
Hyvä peruspohja moneen äkkinäiseen.

Drupal

http://drupal.fi/
Alusta vähän isommille. Suomessa Drupalia käyttävät mm. YLE, Uusi Suomi, Nelonen, Nokia Siemens Networks, Infoworld, Obaman hallinto, Nokia, France24 ja monet muut. Lähde: drupal.fi

Concrete5

http://www.concrete5.org/
Taipuisa järjestelmä vaativiin tarpeisiin.

Kyllä, hyvä huomio, Joomla! puuttuu listasta – se ei ole vahinko.

Loppusanat

Noh, tässä tuli sanottua… ei vielä mitään. Mutta ehkä jollekin heräsi kipinä, toisella nousi karvat pystyyn – Molempi parempi.

Tuntuuko että jotakin tärkeää jäi sanomatta, löysitkö tekstistä virheitä vai ketuttaako ihan muuten vaan? Kommentoimalla voit vaikuttaa (ehkä).