Kotisivun teko » Kotisivujen toteutus
Kotisivujen toteutus
Ohjeet aloittelijalle: WYSIWYG-editorit
Vaikka parhaaseen lopputulokseen pääseekin kirjoittamalla kotisivut tekstieditorilla käyttäen (X)HTML-kieltä, voi kotisivuja tehdä myös tietämättä HTML-koodista mitään. Netissä on lukuisia ns. WYSIWYG-editoreja, joiden avulla kuka tahansa HTML:stä tietämätön voi tehdä www-sivuja.
WYSIWYG-editorilla tehty www-sivu on yhä se sama HTML-kielellä tehty sivu, kuin minkä voisi tehdä käsin kirjoittamalla HTML-koodia. WYSIWYG-editorilla kotisivun tekijän ei kuitenkaan tarvitse itse osata HTML-kieltä, koska editori kirjoittaa HTML-koodin käyttäjän puolesta. Kotisivun tekijä voi käyttää sivujen tekoon editorin graafista käyttöliittymää. Hän voi muokata sivua siinä muodossa kuin se tulee todennäköisesti näkymään nettiselaimessa.
Kuvankaappaus WYSIWYG-editorista Macromedia Dreamweaver MX. Kuvassa valitaan maalatulle tekstille fontin väriä.
Sivuille voi lisäillä erilaisia kuvia ja painikkeita helposti parilla hiiren klikkauksella. Jos haluat esim. lisätä kuvan, voit vain valita valikosta tyyliin Lisää...kuva ja voit siirtää kuvan juuri siihen paikkaan minne haluat eikä sinun täydy välttämättä ymmärtää html-koodista yhtään mitään. Tekstin koon ja värin muuttaminen käy myös helposti erilaisista valikoista ja paneeleista. WWW-sivun teko on vähän kuin Microsoft Wordin dokumentin tekoa. WYSIWYG-editori huolehtii HTML-kielen vaikeuksista puolestasi. Saattaa kuulostaa helpolta ja hauskalta. Sen kuin lätkii kuvia ja tekstiä sinne tänne. Helppoa kuin mikä ja editori hoitaa HTML-kielen kirjoituksen. Jee. Miksi ihmeessä siis vaivautua kirjoittamaan HTML-kieltä käsin?
WYSIWYG-editorit eivät kuitenkaan ole läheskään täydellisiä. Itse asiassa monet itseään WYSIWYG-editoriksi väittävät ohjelmat ovat täyttä roskaa. Ne eivät aina tuota läheskään validia HTML-koodia. Tämä aiheuttaa monia ongelmia varsinkin siinä, miten selaimet näyttävät sivun. Sivu ei aina näy ollenkaan sillä lailla kuin se näkyy WYSIWYG-editorin ikkunassa. Lisäksi kun sivua muokkaa, saattaa HTML-koodiin jäädä turhaa merkkausta tyyliin <strong></strong><em>Tekstiä</em>. Strong-tägit ovat siis tässä tilanteessa aivan turhat. Paremmissa WYSIWYG-editoreissa on ns. HTML-koodin siivoaja, jonka ajamalla se poistaa pahimmat sotkut HTML-koodista, mutta kaikkea nämäkään eivät osaa tehdä.
Sivuista näkee kyllä yleensä aika selvästi, onko ne kirjoitettu käsin vai käyttäen WYSIWYG-editoria. Käsin kirjoitetut sivun HTML-koodi on selkeästi luettavaa kun taas WYSIWYG-editorin lähdekoodi on paljon sekavampaa. WYSIWYG-editorien ongelmana on myös se, että ne ovat melko raskaita ohjelmia ja syövät paljon muistia. Aivan kaikkein vanhimpiin tietokoneisiin WYSIWYG-editorit eivät siis sovi kovin hyvin. Tekstieditorit taas ovat kevyitä ja pyörivät lähes koneessa kuin koneessa.
HTML-kielen opettelu olisi siis kannattavaa. Se ei tosiaankaan ole kovin vaikeaa ja sen opettelu on myös palkitsevaa. Jo HTML-kielen peruselementeillä kuten otsikkotägeillä (h1, h2, h3...), kappaleenvaihdolla (p) ja paksunnoksella (strong) pärjää pitkälle. CSS-tyyliohjeiden opettelulla saakin tehtyä sivuistaan jo hyvin näyttävät. CSS-tyyliohjeetkaan eivät ole kovin monimutkaisia ja jo hyvin yksinkertaisella CSS-koodilla pärjää jo pitkälle.
Hyviä WYSIWYG-editoreja on harvassa ja vielä harvemmassa on hyviä ilmaisia WYSIWYG-editoreja. Ilmaisista WYSIWYG-editoreista mainitsemisen arvoinen on lähinnä avoimeen lähdekoodiin perustuva KompoZer (NVU:n jälkeläinen), joka on saatavilla niin Windowsille, Linuxille kuin Macintoshille. Muut ilmaiset WYSIWYG-editorit ovat melkoista roskaa. Maksullisia WYSIWYG-editoreja saa mm. suomalaisista verkkokaupoista kuten Verkkokauppa.comista.
Maksullisista WYSIWYG-editoreista parhain on ehdottomasti Adobe Dreamweaver (entinen Macromedia Dreamweaver). Dreamweaverin hinta on tosin tavalliselle kuluttajalle melkoisen suolainen (n. 500 euroa). Dreamweaver on lähes standardi niiden ammatikseen sivuja tekevien keskuudessa, jotka (jostain syystä) käyttävät WYSIWYG-editoreja. Ohjelma on erittäin monipuolinen, mutta silti melko helppokäyttöinen. Sivuston ulkoasun päivitystä helpottaa Dreamweaverin ns. sivupohja (engl. template), jota päivittämällä Dreamweaver päivittää automaattisesti kaikki tiettyä sivupohjaa käyttävien sivujen ulkoasun.
Ohjeet edistyneemmille: HTML-koodia käsin
Kuvankaappaus tekstieditorista Notepad++. Huomaa kuinka editori värjää HTML-koodia, jolloin teksti ja HTML-koodi erottuvat.
Jos osaat hiukankin HTML-koodia, kannattaa nettisivut tehdä käyttäen tekstieditoria siten, että kirjoitat kaiken HTML-koodin käsin. Käsin HTML-koodia kirjoittamalla sivuista saa huomattavasti selkeämmät ja ne toimivat todennäköisesti paremmin eri selaimissa kuin vastaavat WYSIWYG-editorilla väännetyt. HTML-koodia käsin kirjoittaessa oppii myös paljon asioita, joista voi olla hyötyä tulevaisuudessa.
Avaapa vaikka selaimeesi MVnetin vanha versio etusivusta ja nykyinen versio etusivusta. Vanha versio oli tehty käyttäen Macromedian Dreamweaver WYSIWYG-editoria ja uusi versio on tehty käsin käyttäen XHTML 1.0 Strict -kieltä. Vertaile näiden sivujen lähdekoodia ja huomaat, että vanhan version lähdekoodista on erittäin vaikea saada selvää ja tekstin muokkaaminen lähdekoodista on erittäin hankalaa. Lisäksi vanhan version lähdekoodi ei ole validia. Etusivun uuden version lähdekoodi on taas huomattavasti selkeämpää luettavaa ja koodia onkin helppo muokata käsin.
Tekstieditori kannattaa valita huolella. Vaikka Windowsin Muistiollakin voisi tehdä HTML-sivuja, kannattaa Muistio unohtaa heti. Muistio on todella rajoittunut ohjelma, eikä sitä tosiaankaan kannata käyttää HTML-sivujen tekoon. Tekstieditorissa pitää olla sellainen ominaisuus, että editori osaa värittää HTML-koodia (engl. syntax highlighting). Tämä tarkoittaa HTML-kielessä sitä, että editori värjää kaikki HTML-koodin tägit esim. sinisellä ja tägien attribuutit punaisella. Tavallinen teksti näkyy mustalla värillä. Tämä helpottaa HTML-koodin hahmottamista huomattavasti.
Hyviä tekstieditoreja Windowsille ovat mm. Notepad++ ja Notepad2. Linuxissa voi hyvin käyttää KDE-työpöytäympäristön mukana tulevaa Kate -tekstieditoria tai Gnome-työpöytäympäristön mukana tulevaa gedit -tekstieditoria. Mac OS X:ssä HTML-koodin kirjoittamiseen voi käyttää esimerkiksi editoria nimeltä Smultron. Windowsin Muistio, WordPad ja Microsoft Word kannattaa unohtaa heti. Itse voin hyvin suositella Notepad++ -tekstieditoria, jolla MVnetin sivut ovat tehty. Raskaampaan käyttöön, kuten PHP-koodin kirjoittamiseen, kannattaakin sitten valita kunnollinen ohjelmointiympäristö, kuten Eclipse tai NetBeans, jotka molemmat ovat ilmaisia. Luettelo mainitsemisen arvoisista tekstieditoreista löytyy esimerkiksi Wikipediasta.
HTML-dokumentin voi tehdä yksinkertaisesti luomalla ensin tyhjän tekstitiedoston (Windows XP:n Resurssienhallinnassa esim. Tiedosto...Uusi...Tekstitiedosto). Tämä tekstitiedosto nimetään sitten .html-päätteiseksi. Päätteeksi kävisi myös .htm, mutta on ehkä suositeltavampaa käyttää .html-päätettä, jota käytetään yleisimmin. Tiedostopääte .htm on jäänne 1980-1990 -lukujen käyttöjärjestelmistä, jotka rajoittivat tiedostopäätteen kolmeen kirjaimeen. Tähän html-päätteiseen tiedostoon voi sitten kirjoittaa html-koodia tavallisella tekstieditorilla ja tallentaa tiedosto aivan normaalisti. Kun avaat tiedoston nettiselaimeesi, pitäisi selaimen huomata, että kyseessä on html-dokumentti ja näyttää se kuten pitääkin.
Jos tekstitiedoston tiedostopäätettä ei muuteta, jää tekstitiedoston päätteeksi oletuksena Windowsissa .txt. Tällöin nettiselain ei tulkitse sivun HTML-koodia ja tällöin dokumentti näkyy selaimen ruudulla pelkkänä tekstinä aivan kuten katsoisit HTML-dokumentin lähdekoodia. HTML-dokumentin pääte voi olla esimerkiksi myös .php tai .shtml, mutta näitä päätteitä käytetään yleensä vain, jos dokumentissa on käytetty joitain edistyneempiä www-tekniikoita, kuten PHP-ohjelmointikieltä.
Kun kirjoitat HTML-koodia, kannattaa pitää mielessä samat asiat kuin ohjelmointikieliä kirjoitettaessa. HTML-koodista kannattaa tehdä selkeää, jotta sitä on helppo muokata jälkikäteen. Jos koodi on sotkuista, todennäköisesti et saa siitä itsekään enää kovin hyvin selvää parin kuukauden päästä. Käytä siis sisennyksiä, rivinvaihtoja, kappalejakoa ja rivin pituus kannattaa pitää pienempänä kuin 100 merkkiä.
| Paikka ja valtio | Asukasluku | Järistyksen riski |
| Tokio, Japani | 11,6 milj. | Erittäin suuri |
| Mexico City, Meksiko | 16,3 milj. | Suuri |
| Beijing, Kiina | 14,2 milj. | Suuri |
Vai kumpi alla olevista HTML-koodeista näyttää sinusta selvemmältä? Kummassakin on esitetty sama asia. Kyseinen HTML-koodi tuottaa siis oikealla esitetyn taulukon, jossa on 3 saraketta ja 4 riviä. Ensimmäisessä esimerkissä ei ole käytetty ollenkaan sisennystä ja rivinvaihdot menevät miten sattuu. Toisessa esimerkissä taas on käytetty oikeaoppisesti sisennystä ja rivinvaihtoja ja kyseisen koodin hahmottaminen ja muokkaaminen on huomattavasti helpompaa.
Esimerkki huonosta HTML-koodin käytöstä:
<table class="taulukkoOikea"> <caption>Taulukko 3. Järistysalttiita kaupunkeja</caption> <colgroup><col></col><col align="center"></col> <col align="center"></col></colgroup> <thead><tr><td>Paikka ja valtio</td><td>Asukasluku</td><td> Järistyksen riski</td></tr></thead> <tbody> <tr><td>Tokio, Japani</td><td>11,6 milj.</td> <td style="color: #FF0000; font-weight: bold">Erittäin suuri</td> </tr><tr><td>Mexico City, Meksiko</td><td>16,3 milj.</td> <td style="color: #ff6600; font-weight: bold">Suuri</td> </tr><tr><td>Beijing, Kiina</td><td>14,2 milj.</td> <td style="color: #ff6600; font-weight: bold">Suuri</td></tr></tbody></table>
Esimerkki hyvin tuotetusta HTML-koodista:
<table class="taulukkoOikea"> <caption> Taulukko 3. Järistysalttiita kaupunkeja </caption> <colgroup> <col></col> <col align="center"></col> <col align="center"></col> </colgroup> <thead> <tr> <td>Paikka ja valtio</td> <td>Asukasluku</td> <td>Järistyksen riski</td> </tr> </thead> <tbody> <tr> <td>Tokio, Japani</td> <td>11,6 milj.</td> <td style="color: #FF0000; font-weight: bold"> Erittäin suuri</td> </tr> <tr> <td>Mexico City, Meksiko</td> <td>16,3 milj.</td> <td style="color: #ff6600; font-weight: bold">Suuri</td> </tr> <tr> <td>Beijing, Kiina</td> <td>14,2 milj.</td> <td style="color: #ff6600; font-weight: bold">Suuri</td> </tr> </tbody> </table>
Lisäksi kannattaa käyttää kommentointia, mutta ei kuitenkaan joka paikassa. HTML-koodi kun selittää aika pitkälti itse itseään. Ohjelmointikielissä tapahtuu hyvin usein niin, että jos kirjoittaa ohjelman ilman mitään kommentointia, on hyvin todennäköistä, että kun vilkaisee ohjelmaa puolen vuoden tauon jälkeen uudelleen, ei itse ymmärrä kirjoittamastaan koodista juuri mitään. Ainakin menee paljon aikaa, ennen kun muistaa, että "mitäköhän mahdoin tuota kirjoittaessani ajatella". Samalla lailla tapahtuu HTML-koodinkin kanssa.
Firefoxin laajennukset apuna suunnittelussa
Kun sivut eivät toimikaan odotetusti kaikilla selaimilla, alkaa vian etsiminen yleensä tutkiskelemalla sivun lähdekoodia. Ensimmäinen toimenpide on yleensä lähdekoodin validoiminen. Mutta vaikka sivun lähdekoodi olisikin validia, voi esim. jossain CSS-tyylitiedostossa tai HTML-koodin seassa olla jotain sellaista koodia, mikä ei sinne kuulu, esimerkiksi sivujen päivittämisen yhteydessä unohtunutta vanhaa koodia.
Firebug näyttää ikkunan alaosassa, miltä valitun otsikon lähdekoodi näyttää sekä siihen liittyvät CSS-tyylit ikkunassa oikealla.
Pelkästään lähdekoodista on kuitenkin usein vaikea hahmottaa, mitkä asiat tiettyyn kohtaan sivua vaikuttavat. Esim. jos jokin otsikko näkyy väärällä fontilla, voi tähän vaikuttaa itse otsikon HTML-koodin sekaan lisätty CSS-koodi sekä erillisessä CSS-tyylitiedostossa olevat muotoilut. Monesta paikasta pitää siis tarkistaa, että kaikki on oikein ja kaikkea ei aina muista tarkistaa. Lisäksi lähdekoodin muuttamisen jälkeen pitää aina käydä päivittämässä sivua, että näkee, miten muutokset vaikuttivat siihen, mitä käyttäjä selaimellaan näkee. Kätevämpää olisi, että muutokset näkyisivät heti, jolloin on helppo kokeilla esim. eri värivaihtoehtoja otsikoille ja valita niistä miellyttävin.
Tässä tulevatkin apuun Firefox-selaimen lukemattomat laajennukset. HTML- ja CSS-koodin testaaminen ja viilaus helpottuvat huomattavasti käyttämällä selaimena Firefoxia ja asentamalla siihen kaksi mainiota laajennusta: Firebug ja Web Developer Extension. Laajennusten asentaminen onnistuu helposti Firefoxilla klikkaamalla laajennusten kotisivuilta lataus-linkkiä (.xpi -päätteinen linkki), jolloin Firefoxin pitäisi osata asentaa laajennus automaattisesti (nämä laajennukset ovat turvallisia, vaikka niitä ei olekaan allekirjoitettu). Näiden kahden lisäosan lisäksi Firefoxiin on saatavilla myös useita muita web-kehittäjälle hyödyllisiä lisäosia, joista voi lukea enemmän MVnetin blogista "TOP 10 parasta Firefoxin lisäosaa web-kehittäjälle".
Firebug on omiaan HTML- ja CSS-koodin viilaukseen ja testaukseen. Nettisivun voi avata aivan normaalisti Firefox-selaimeen ja painaa sitten sivulla, haluamansa kohdan päällä, hiiren oikeaa painiketta ja valita valikosta Inspect element (tai painamalla Inspect -painiketta). Tällöin Firebug näyttää selkeästi ikkunan alaosassa, miltä kyseinen kohta sivua näyttää lähdekoodissa. Lähdekoodi on jaettu sisäkkäisiin elementteihin, josta sen hahmottaminen on helppoa. Firebug näyttää myös kyseiseen elementtiin liittyvät kaikki CSS-koodit. HTML- ja CSS-koodia voi muokata lennossa ja muutokset näkyvät heti sivulla. Muutokset eivät tallennu automaattisesti, joten erilaisia asetuksia voi kokeilla turvallisin mielin.
Firebug näyttää ikkunassa, millä kohtaa sivussa näkyy lähdekoodista valittu otsikko sekä otsikon täytteet violetilla ja marginaalit keltaisella.
Firebug näyttää myös erittäin selkeästi, mikä kohta lähdekoodista vastaa mitäkin osaa selaimen näytöllä. Esim. jos hiiren vie lähdekoodissa jonkin div-elementin päälle, näyttää Firebug tämän div-elementin korostettuna sivulla. Firebug näyttää visuaalisesti myös elementtiin liittyvät marginaalit (margin) ja täytteet (padding).
Firebug näyttää myös kaikki sivuun liittyvät kuvat, tyylitiedostot ja skriptit, ja näyttää näiden tiedostokoot sekä niiden lataamiseen kuluneet ajat. Näin sivujen optimointikin helpottuu, jolloin näkee helposti, jos sivulla on jotain, jonka lataaminen vie liian kauan.
Kaiken tämän lisäksi Firebug toimii vielä JavaScript-debuggerina. Eli JavaScript-koodista voi yrittää helpommin selvitellä, mikä koodissa on vialla, jos se ei toimi kuten pitäisi. Skriptiin voi asettaa tarkistuspisteitä, johon skriptin suorittaminen pysähtyy. Tällöin voi tarkastella mm. muuttujien arvoja ja sitä kautta yrittää selvittää, mikä koodissa mättää. Firebugista löytyy paljon muitakin ominaisuuksia, joista lisätietoa löytyy laajennuksen kotisivuilta.
Web Developer Extension taas lisää Firefoxin ikkunaan palkin, josta pääsee käsiksi lisäosan tarjoamiin ominaisuuksiin. Lisäosan avulla voi tehdä helposti mm. seuraavat asiat:
Web Developer Extension lisää Firefoxiin palkin, josta pääsee käsiksi lisäosan ominaisuuksiin
- Lähdekoodin muokkaaminen lennossa, jolloin muutokset näkyvät heti ruudulla
- JavaScript-koodin suorittaminen pois päältä
- Vaihtaa tai poistaa käytössä olevan CSS-tyylitiedoston
- Mitata sivun osien kokoja pikseleinä (ruler)
- Näyttää keksien (cookies) tiedot
- Poistaa kuvat käytöstä
- Näyttää, onko sivulla kuvia, joita ei löydy
- Näyttää tietoa sivusta (mm. käytetty merkistö, sivun tiedostokoko)
- Pienentää ikkunan tietyn kokoiseksi (näin sivua voi testata, miten se näkyy esim. 800 x 600 -resoluutiolla)
Web Developer Extension on siis omiaan sivun testaukseen. Kaikilla käyttäjillä kun ei välttämättä ole JavaScript päällä tai käytössä voi olla pieniresoluutioinen näyttö. Tämä laajennus helpottaa näiden erikoistilanteiden testaamista.
Älä ahda liikaa tavaraa
Yhdelle www-sivulle ei kannata ahtaa liikaa tavaraa, jo siitäkin syystä, että sivun lataaminen selaimella ei kestäisi niin kauaa. Liian pitkä sivu saattaa haitata myös lukemista. Kun pitkän sivun jakaa useampaan sivuun, antaa tämä lukijalle pienen hengähdys- ja ajattelutauon. Toisaalta taas yhden sivun tekstin voi helposti tallentaa omalle koneelle ja lukea se sieltä. Jos sisältö on jaoteltu useammalle sivulle, joutuisi lukija tallentamaan usean eri sivun. Kaikissa asioissa tuppaa olemaan omat hyvät ja huonot puolensa.
Suositeltava maksimikoko yhdelle www-sivulle kuvineen kaikkineen on noin 100 kt. Tiedostokooltaan 100 kilotavun kokoisen www-sivun lataaminen kestää normaalilla 512 kbps / 512 kbps -nopeuksisella ADSL-yhteydellä noin 2 sekuntia, kun taas 500 kilotavun kokoisen sivun lataaminen kestää samalla yhteydellä noin 10 sekuntia.
Tässä vaiheessa kävijä saattaa jo tuskastua sivun hitaaseen lataamiseen ja siirtyä jollekin muulle sivulle. Käytettävyysguru Jakob Nielsen kertoo kirjassaan Designing Web Usability: The Practice of Simplicity (1999), että lukija todennäköisesti kadottaa mielenkiinnon www-sivuun, jos sen lataus kestää yli 10 sekuntia. Puolen megan ADSL-yhteydessä tämä tarkoittaisi siis maksimissaan noin 500 kilotavun kokoista sivua. Modeemilla (56 kbps) sivua ladattaessa sivun koko ei taas siis saisi olla yli 50 kt, jotta 10 sekunnin latausaika ei ylittyisi.
Toisaalta on myös tutkimuksia, joissa on todettu, että lukijat jaksavat odottaa vielä noin 20 sekuntia sivun latausta ja turhautuisivat vasta, jos latausaika ylittää tämän. Mielipiteitä on siis monia. Kannattaa kuitenkin pitää www-sivun koko mahdollisimman pienenä. Mutta mihinkään ylioptimointiin ei kannata ryhtyä esim. poistamalla kaikkia kuvia. Nettiliittymien nopeudet kasvavat kuitenkin koko ajan ja yhä harvempi käyttää modeemia. Onko siis järkevää tehdä sivut modeemikäyttäjiä varten, jos he ovat vähemmistössä? Toisaalta taas kännyköilläkin pääsee nykyään nettiin ja kännyköiden latausnopeudet ovat modeemin luokkaa.
Sisältö ja ulkoasu erilleen
Koska (X)HTML-kieli on kehitetty dokumentin loogisen rakenteen esittämiseen, ei sillä pitäisi siis esittää ulkoasua. Sivuissa kannattaa ottaa mahdollisimman vähän kantaa ulkoasuun. Esimerkiksi taustaväriä, fontin kokoa tai fontin väriä ei ole järkevää määritellä HTML-kielellä. Taustavärit, fontin koot yms. ulkoasuun liittyvä kannattaa tehdä käyttäen CSS:ää, josta kerrotaan tuonnempana sivulla Ulkoasu kotisivuille
Sivut kannattaa kirjoittaa mahdollisimman yksinkertaisesti. Pelkkiä <p>, <strong>, <em> ja <h1> -tägejä käyttämällä saa tehtyä jo selkeitä sivuja, jotka ovat parempia kuin useimmat netin nykyisistä sivuista. Nettisivun tekoon ei tarvita hienoja flash-animaatioita tai vilkkuvia ja välkkyviä bannereita - parempi olisi, jos näitä ei käyttäisi ollenkaan. Itse asiassa ankea, mutta selkeä ja yksinkertainen sivusto on aina parempi kuin hienoon ulkoasuun pyrkivä sekava, täyteen ahdettu informaatiomöhkäle.
Sivujen sisältö ja ulkoasu ovat huomattavasti helpommin hallittavissa, jos ne erotetaan toisistaan. Jos olet tehnyt nettisivuja jollakin WYSIWYG-editorilla, tiedät kuinka tuskaista on muuttaa sivuston ulkoasua, jos sivuja on paljon. Jos olet esimerkiksi jokaisessa dokumentissa erikseen määrittänyt fontin koon ja värin, on sivuston fonttikoon muuttaminen suuri operaatio. Joudut muokkaamaan jokaista sivua. Mutta, jos sivu onkin kirjoitettu selkeästi XHTML-kielellä ottamatta kantaa ulkoasuun, onnistuu fontin koon ja värin muuttaminen yksinkertaisesti muokkaamalla yhtä CSS-tyylitiedostoa.
MVnetissä käytetään itse tehtyä järjestelmää, jossa jokainen sivu on kirjoitettu yksinkertaisena XHTML-dokumenttina. Dokumentissa on vain sivun tekstisisältö ja siihen liittyvät kuvat. MVnetin ulkoasu on taasen esitetty yhdessä ja ainoassa sivupohjassa (engl. template). Tähän sivupohjaan haetaan sitten PHP-kielen avulla halutun sivun sisältö XHTML-dokumentista. XHTML-dokumentti pysyy näin ollen selkeänä ja sivuston ulkoasun voi muuntaa helposti muokkaamalla sivupohjaa.
Vertaapa esimerkiksi taas MVnetin vanhaa etusivua ja uutta etusivua. Avaa sivu ja katso sen lähdekoodia. Vanhan etusivun lähdekoodista on hyvin vaikea saada mitään selvää ja tällaisen sivun muokkaaminen käsin tekstieditorilla olisi yhtä tuskaa. MVnetin uuden etusivun lähdekoodi taas on huomattavasti selkeämpää. Tätä sivua pysyy jo hyvin muokkaamaan käsin lähdekoodista.
MVnetin uudessa etusivussa ulkoasu ja sisältö on saatu huomattavasti paremmin erilleen toisistaan. Sivulla ei ole vanhan version tapaan fonttikoosta tai fontin väristä kertovia määreitä tai muuta turhaa merkkausta, joka liittyy ulkoasuun. Suurin osa ulkoasuun liittyvästä tiedosta on erillisessä CSS-tyylitiedostossa.
Sisällönhallintajärjestelmät (CMS)
Yksi vaihtoehto kotisivujen toteutukseen on käyttää sisällönhallintajärjestelmää (engl. Content Management System, CMS). Sisällönhallintajärjestelmän avulla sisällön tuottaminen ja hallinta sivuille on tehty helpoksi. Jos olet koskaan kokeillut tuottaa sisältöä Wikipediaan, tiedät jo suunnilleen, miten sisällönhallintajärjestelmät toimivat. Sisällön lisääminen sivuille tapahtuu siis yleensä nettiselaimen avulla. Tekstin muotoilu, kuvien lisääminen yms. on tehty lähes yhtä helpoksi kuin tavallisissa tekstinkäsittelyohjelmissa.
Sisällönhallintajärjestelmää on hyvä käyttää etenkin silloin, kun sivuilla on hyvin paljon sisältöä tai sen haluaa olevan helposti selaimella päivitettävissä. Käyttötarkoituksia on monia ja sisällönhallintajärjestelmä pitääkin valita tarpeiden mukaan. Jos tarkoitus on esimerkiksi ylläpitää blogia, soveltuu tähän parhaiten jokin blogijärjestelmä, kuten WordPress. Onnistunut esimerkki tästä on HPWEB, joka on rakennettu WordPressin ympärille. WordPressissä uusien blogimerkintöjen lisääminen onnistuu näppärästi nettiselaimella ja sovellus huolehtii kaikesta teknisistä yksityiskohdista, kuten kommentoinnista ja arkistoinnista.
Sen sijaan esimerkiksi yritysten ja yhteisöjen sisällönhallintajärjestelmäksi soveltuu yleensä jokin hieman yleiskäyttöisempi CMS-järjestelmä, kuten Joomla. Esimerkiksi Teknillisen Korkeakoulun Tuotantotalouden kilta Prodeko on tehnyt killan kotisivut käyttäen Joomla-sisällönhallintajärjestelmää. Sisällön päivittäminen Joomlalla onnistuu niin ikään nettiselaimella ja Joomla huolehtii esimerkiksi navigointimenun rakentamisesta ja muista teknisistä asioista.
Jos taas sivuston sisältöä on tarkoitus muokat useamman henkilön voimin, ehkä jopa suuren yhteisön voimin, on wiki tähän yleensä paras ratkaisu. Suosituin wiki on MediaWiki-sisällönhallintajärjestelmä. Sivujen ja kuvien lisääminen wikin avulla on yleensä erittäin helppoa - kaikki tapahtuu selaimen avulla. Wikit ovatkin juuri suunniteltu siihen, että artikkeleja voi muokata useampi henkilö samaan aikaan. Parhaat wikit osaavat yhdistellä eri käyttäjien muutokset, vaikka ne tapahtuisivatkin samaan aikaan. Esimerkiksi Polkupyöräwikissä käytetään MediaWiki-sisällönhallintajärjestelmää, jolloin kaikilla on mahdollisuus muokata sivuston sisältöä helposti selaimen avulla.
Kuvankaappaus Joomla-sisällönhallintajärjestelmästä. Kuvassa ollaan lisäämässä uutta sisältöä.
Sisällönhallintajärjestelmät vaativat palvelimelta yleensä PHP-tuen ja tietokantapalvelimen. Järjestelmän käyttöönotto on usein hyvin yksinkertaista. Lataat vain asennuspaketin, siirrät sen palvelimelle ja ajat asennusohjelman. Sisällönhallintajärjestelmissä on yleensä valmiita ulkoasupohjia, joista voi valita mieleisensä tai asentaa uusia ulkoasuja. Sivuihin saa myös helposti lisättyä kaikenlaista enemmän tai vähemmän hyödyllistä kuten vaikkapa viikoittaisen gallupin.
Sisällönhallintajärjestelmien käyttäminen vaatii kuitenkin aina kyseisen järjestelmän opettelua. Joskus ominaisuuksia voi olla niin paljon, että käyttöliittymä vaikuttaa aloittelijan mielestä hyvinkin sekavalta. Kaikkien nippeleiden ja nappeleiden opettelu voi viedä paljon aikaa. Ulkoasun muokkaaminen haluamakseen voi olla myös hankalaa, jos ei saa selvää valmiiden sivupohjien lähdekoodeista. Sisällönhallintajärjestelmät tuppaavat olemaan myös aika raskaita sovelluksia, jotka voivat lohkaista kotisivutilasta muutamia kymmeniä megatavuja.
Lisäksi sisällönhallintajärjestelmissä saattaa olla joitain vakavia tietoturva-aukkoja. CMS-järjestelmät kuitenkin ovat melko isoja sovelluksia, joten tietoturva-aukkojen löytyminen ei ole mitenkään harvinaista. Esimerkiksi suositussa Joomla -sisällönhallintajärjestelmässä on ollut hyvin vakavia tietoturvaongelmia, joiden avulla ilkeämieliset hakkerit ovat päässeet palvelimille tekemään tuhojaan. Kaikissa järjestelmissä on enemmän tai vähemmän bugeja ja haavoittuvuuksia, joten kovinkaan vainoharhaiseksi ei tässä kannata ryhtyä. Usein haavoittuvuuksiin on saatavilla päivitykset melko pikaisesti.
Itse olen harkinnut MVnetissä jonkun valmiin sisällönhallintajärjestelmän käyttöä, mutta olen päätynyt hylkäämään ne ainakin toistaiseksi. Siirtyminen valmiiseen sisällönhallintajärjestelmään ehkä helpottaisi sivujen lisäystä ja päivitystä sekä sisällön hallintaa. Mutta siirtyminen nykyisestä järjestelmästä uuteen vaatisi paljon työtä. Sisältö pitäisi kopioida vanhasta järjestelmästä uuteen, joka ei ole aivan yksinkertainen operaatio, kun sivuja on jo kolmatta sataa. Käyttämällä omaa itse tehtyä järjestelmää, voi vaikuttaa täysin sivuston ulkoasuun ja toimintaan. Nyt ainakin tiedän tarkalleen, miten sivusto toimii ja itselläni on täysi valta muuttaa sivuja juuri sellaiseksi kuin haluan. Jos olisin alusta lähtien käyttänyt jotain valmista sisällönhallintajärjestelmää, käyttäisin sitä todennäköisesti yhä.
Suosituimpia ilmaisia sisällönhallintajärjestelmiä ovat mm. Joomla, Drupal, Website Baker, CMS Made Simple, WordPress ja MediaWiki. Näistä Joomla on ehkä suosituin, mutta se ei tarkoita, että Joomla olisi aina paras valinta. Huomattavasti yksinkertaisempia ja siten helppokäyttöisempiä yleiskäyttöisiä sisällönhallintajärjestelmiä ovat mm. Website Baker ja CMS Made Simple. Blogin perustamiseen parhaiten soveltuu WordPress. MediaWiki taas on sisällönhallintajärjestelmä, jonka päällä mm. Wikipedia pyörii, ja soveltuu siten hyvin suurten yhteisöjen järjestelmäksi. Kattava luettelo ilmaisista ja maksullisista sisällönhallintajärjestelmistä löytyy esimerkiksi englanninkielisestä Wikipediasta.
Valmiit kotisivupaketit
Nykyään ovat yleistyneet palvelut, jotka tarjoavat valmiin paketin, jonka avulla on helppoa ja nopeaa tehdä kotisivut niin yritykselle, yhteisölle kuin yksityishenkilöllekin. Tällainen palvelu on esimerkiksi suomalainen Kotisivukone-palvelu, joka mainostaa itseään seuraavasti:
Kotisivukone on palvelu, jonka avulla kotisivujen tekeminen on helppoa! Kotisivukoneella yritykset, yhdistykset, urheiluseurat, sukuseurat, bändit ja yksityishenkilöt voivat rakentaa omat kotisivut kymmenessä minuutissa. Palvelulla ei ole lainkaan avausmaksua ja voit kokeilla sivuja ilmaiseksi kahden viikon ajan!
Itse en ole Kotisivukone-palvelua käyttänyt, joten en osaa tarkalleen sanoa, kuinka helppoa kotisivun teko kyseistä palvelua käyttäen aloittelijalle oikeastaan on. Yleensä tällaisten palvelujen käyttö on kuitenkin tehty hyvin yksinkertaiseksi. Kotisivuja päivitetään www-selaimen avulla, eikä HTML-kielestä tarvitse tietää mitään.
Nämä valmiit kotisivupaketti -palvelut voivat kuitenkin olla hyvinkin rajoitettuja. Lisäominaisuuksien kuten keskustelupalstan asentaminen voi olla estetty tai siitä joutuu maksamaan lisämaksua. Palvelujen hinta on yleensä selvästi kalliimpi kuin, jos ostaisi halvan web-hotellin ja rakentaisi sivut alusta asti itse.
Yleensä peruspaketti on melko halpa, mutta sen sisältämät ominaisuudet ovat suppeat. Jos haluaa sivuilleen lisäominaisuuksia kuten keskustelupalstan, hakukoneen, kävijätilastoja, blogin tai sähköpostiosoitteen, joutuu näistä maksamaan aika suolaisiakin lisämaksuja. Omaan web-hotelliin tällaisten lisääminen on aivan ilmaista. Keskustelupalstoja, blogeja ja hakukoneita pyörittäviä ohjelmistoja on saatavilla aivan ilmaiseksi netistä. Mutta esim. Kotisivukone-palvelussa joutuu lisäpalveluista kuten blogista, keskustelupalstasta ja hakukoneesta pulittamaan 3-4 euroa kuukaudessa kutakin lisäpalvelua kohden.
Kuvankaappaus Kotisivukone-palvelun etusivulta.
Valmiin kotisivupaketin hankkimisessa on myös se huono puoli, että jos myöhemmin päättääkin siirtää sivut johonkin web-hotelliin tai omalle palvelimelle, voi sisällön siirtäminen palvelusta olla hankalaa, jos sisältöä on paljon ja siihen pääsee käsiksi vain www-selaimen kautta. Koska sivujen ulkoasu määräytyy näissä kotisivupaketti-palvelussa yleensä valmiiden sivupohjien avulla, ei nettisivuista tule kovinkaan yksilöllisiä tai persoonallisia. Lisäksi valmiin paketin hankkimalla ei opi kotisivujen teosta yhtä hyvin kuin, jos rakentaisi kaiken alusta lähtien itse.
Jos kotisivujen teosta ja ylläpidosta ei ole mitään hajua eikä aikaa ole niiden opetteluun, voi valmiin kotisivupaketin hankkiminen olla hyvä ratkaisu etenkin pienille yrityksille ja yhteisöille. Kotisivujen teettäminen jollain ammattilaisella tulee usein paljon kalliimmaksi ja sivujen päivittäminen voi olla hankalaa, jos ei ole tietotaitoa kotisivujen teosta tai ei ole varaa palkata ammattilaista päivittämään sivuja. Pienten yritysten nettisivut ovat usein hyvin yksinkertaisia ja ne on helppo toteuttaa näillä valmiilla kotisivupaketeilla. Näin säästyy aikaa - ja etenkin yritysmaailmassa aika on rahaa.
Seuraava sivu (Kuvia kotisivuille) >> << Edellinen sivu (HTML-kieli)