Aloitus

Kurssin rakenteen läpikäynti
Jakaudutaan ryhmiin

Internetin ja hypertekstin kehittyminen

Käsitteet: Internet, WWW, hyperteksti

Hyperteksti ja Web

Hypertekstin ajatusta kehiteltiin jo 1800 luvulta, mutta jäsennellymmin ajatus kehittyi vuodesta 1945 eteenpäin. Tuolloin tutkija Vannevar Bush julkaisi artikkelin As We May Think, jossa hän ennusti massamuistit ja nopean tiedonsiirron

Artikkelissa kuvataan myös Memex-niminen laite, joka mahdollistaisi kirjojen ym. dokumenttien tallentamisen ja jakamisen toisten koneiden kesken. Vannevar Bushia pidetään hypertekstin isänä.

60-luvulla kehiteltiin alkeellisia hypertekstiohjelmia. 1985-87 kehiteltiin henkilökohtaisissa koneissa käytettäviä hypertekstiohjelmia, jotka toimivat esikuvina multimediakehittimille ja web-selaimille.

1990-luvulla hypertekstiin perustuvien web-selainten käyttö lisääntyi räjähdysmäisesti, koska helppokäyttöiset ja monipuoliset selaimet yleistyivät.

Ks. tarkemmin Freesofin Internet-sanakirjan artikkeli Internet History

Miten HTML-merkkaus keksittiin?

HTML on merkkauskieli, joka on kehittynyt tekstin merkkauskielistä kirjapainoladonnassa. Alun perin pelkkää tekstin muotoilua, nykyisin sisältää jo paljon muutakin

Aikoinaan typografi piirsi tekstin muotoilua koskevan suunnitelman ja ohjeet latojalle. Latoja kokosi kokosi tekstin ohjeiden mukaan käsin kuumaladontaa käyttäen.

Valoladontalaitteet yleistyivät 40-50 -luvulla, 70-luvulta lähtien ne olivat tietokoneohjattuja. Tällöin tekstin muotoilua varten kehitettiin erityinen merkkauskieli, markup language, jonka avulla tietokone osasi muotoilla tekstin oikealla tavalla

Alun perin typografin tekemistä merkinnoistä otettiin mallia ensimmäisiä ladontaohjelmia laadittaessa. Samat merkinnät ovat periytyneet edelleen html-kieleen.

HTML-merkkaus

HTML (HyperText Markup Language) on Web-sivujen julkaisuformaatti.

Se on yksinkertainen ja helposti opittava merkkaustapa, jota käyttämällä voidaan julkaista erilaisia sisältöjä Webissä. Vaikka HTML:stä puhutaan usein kielenä (Language), se on varsinaisesti www-julkaisemisen tiedostomuoto ja rakenteen esittämisen tapa. HTML ei siis ole ohjelmointikieli.

HTML-dokumentti koostuu tekstisisällöstä ja dokumentin rakennetta (ja osittain ulkoasua) kuvaavista merkinnöistä.

Peruskäsitteet: elementit ja tägit

Tyypillinen HTML-dokumentin rakenne näyttää yleensä seuraavalta

HTML-kielessä ei käytetä komentoja, vaan tekstin osia merkataan ns. tageilla

• Esim. <TITLE> Otsikko </TITLE>
• Tagien ja niiden sisällön muodostamaa kokonaisuutta kutsutaan elementiksi

Tagien avulla HTML-dokumentille luodaan rakenne, jota kutsutaan puurakenteeksi.

HTML on siis loogiselta rakenteeltaan puumainen, vaikka se kirjoitetaan peräkkäistekstinä.

• Kokeillaan html-merkkausta
• Katsotaan erilaisten sivujen lähdekoodia ja ulkoasua

Selain

Selain (browser) on ohjelma, joka pystyy esittämään verkkosivuja käyttäjälle ja jolla voi liikkua sivulta toiselle.

Nykyään tavallisimpia ovat ns. graafiset selaimet, kun Firefox ja Internet Explorer. Graafiset selaimet esittävät sivun sisällön muotoiltuna ja usein visuaalisia tehosteita käyttäen.

Lisäksi on olemassa tekstiselaimia, jotka esittävät sivun pelkkänä tekstinä, yhdellä fontilla.

Selaimeksi voidaan lukea myös puheselain, joka esittää sivun puhesynteesiin perustuvana ääniesityksenä, sekä Braille-selain, joka esittää sivun kohokirjoituksella erityisellä laitteella.

Englannin kielen sanoilla client tai user agent kuvataan selainta laajassa merkityksessä: se on ohjelma, joka tarjoaa käyttäjälle käyttöliittymän verkon palveluihin. Nämä sanat ovat alkaneet vakiintua myös suomen kieleen osaksi IT-jargonia. Sanat voi suomentaa asiakasohjelmaksi tai asikkaaksi.

Luettelo WWW-selaimista

Selaimen tehtävät

• Selain ottaa vastaan käyttäjältä käskyjä, tavallisesti näppäimistön tai hiiren kautta.
• Selain pyytää palvelimelta dokumentteja
• Selain ottaa vastaan palvelimelta dokumentteja ja muotoilee niistä sivun esitysasun, yleensä graafisen esityksen

Selainten historiaa

Palvelin

Palvelin ja sen toiminta

Web-palvelimeen(web server) voidaan tallentaa web-dokumentteja (kuten HTML-dokumentteja). Palvelin jakaa asiakaskoneille ja -ohjelmille. Palvelimen tärkein tehtävä on ottaa vastaan sivupyyntöjä ja vastata niihin.

Palvelin on yleensä passiivinen, eli se vastaa vaan siihen tuleviin pyyntöihin. Esimerkiksi kun käyttäjä klikkaa linkkiä verkkosivuilla, lähtee palvelimelle pyyntö näyttää käyttäjälle hänen pyytämänsä sivu.

Palvelin saattaa kerätä tietoja tällaisista tapahtumista erityiseen tapahtumatiedostoon eli lokitiedostoon (log file). WWW-suunnittelija voi käyttää lokitietoja hyväkseen, jos hän haluaa tietää, millä sivuilla käyttäjät käyvät eniten ja mitä reittejä pitkin sivuille päädytään. Lokitietoja voi käyttää esimerkiksi käytettävyyssuunnittelun apuna. 

WWW-suunnittelijat käyttävät useimmiten palvelinta siten, että he siirtävät sinne tiedostoja omalta koneeltaan, eli julkaisevat ne. 

Palvelinta ylläpitää usein ulkoinen palveluntarjoaja tai esim. kouluissa ym. laitoksissa erityinen atk-yksikkö.

Sivujen siirto palvelimeen

Kun verkkosivusto on valmis tai sitä halutaan testata oikeassa ympäristössään, se siirretään palvelimelle julkaistavaksi. 

FTP (File Transfer Protocol) on tiedonsiirtomenetelmä, jolla tiedostot kopioidaan omalta koneelta palvelimelle. Erilaisia FTP-ohjelmia on paljon. Useimmät suunnittelijat haluavat käyttää ns. graafista FTP-ohjelmaa, mutta tiedot on mahdollista siirtää myös tekstikomennoilla.

Katso opas WS_FTP:n käytöstä

Ulkoasun muotoilu CSS:llä

CSS

CSS (cascading style sheet) on yksinkertainen menetelmä, jolla muotoillaan web-sivujen ulkoasu.

Se on merkintäjärjestelmä, jonka avulla voi esittää selaimille dokumenttien ulkoasua koskevia ehdotuksia. Ehdotusten kokonaisuutta kutsutaan tyyliohjeeksi tai tyylisäännöksi. Tyyliohjetta voi verrata lappuseen, jolla ennen annettiin latojalle ohjeita siitä, mitä kirjasinlajeja käytetään, miten teksti asemoidaan jne.

Aikaisemmin web-sivun ulkoasua koskevat määritykset tehtiin HTML-merkkauksen joukkoon. Kun sivustoista tuli yhä vain laajempia, sivustojen ylläpito alkoi käydä rasittavaksi. Jos sivuston taustaväriä haluttiin muuttaa, se täytyi käydä erikseen muuttamassa jokaiseen dokumenttiin, jotta sivuston ulkoasu pysyisi yhtenäisenä.

• Kokeillaan taustavärin ja fonttien muuttamista tyylitiedostoilla

CSS:n käytön hyödyt

Monet CSS:llä tehtävät asiat voidaan tehdä myös HTML:llä HTML-koodin joukkoon.

CSS on kuitenkin joustavampi useiden määritysten suhteen. Esimerkiksi taustavärin voi html:ssä määritellä vain sivulle, taulukolle tai taulukon solulle. CSS:llä taustavärin voi määritellä mille tahansa elementille.

CSS on myös monipuolisempi ja tarjoaa ulkoasun muotoiluun enemmän mahdollisuuksia kuin HTML. CSS on suunniteltu ulkoasun säätelyyn. HTML on alunperin suunniteltu nimenomaan tekstin loogisen rakenteen merkkaukseen. Tällä hetkellä HTML:ää kehitetään taas siihen suuntaan, että HTML toimii vain rakenteen merkkauksena ja kaikki ulkoasua koskevat määritykset tehdään CSS:llä.

CSS:n avulla on myös helpompaa hallita suurten sivustojen tyylejä, koska tyylimääritykset voidaan kirjoittaa vain yhteen tiedostoon, johon viitataan jokaiselta sivulta.

Web-suunnittelija voi itsekin tarjota useita tyylitiedostoja erityyppisiin päätelaitteisiin. 

Esimerkkejä:

Taitavaa tyylitiedostojen käyttöä verkossa:

http://www.csszengarden.com/
http://cssmania.com/
http://www.csstea.com/
http://glish.com/css/

Miksi on tärkeää opiskella HTML:ää ja CSS:ää systemaattisesti?

Usein www-sivujen suunnittelijat oppivat html:n ja tyylitiedostojen käytön yrityksen ja erehdyksen kautta sekä kopioimalla muiden tekemiä verkkosivustoja.

Tällöin helposti ei edes ymmärretä, miten tietty tagi tai deklaraatio toimii, vaan ollaan tyytyväisiä siitä, että sivusto toimii sillä hetkellä käytössä olevilla selaimilla ja siinä kontekstissa, johon kopioitu koodinpätkä on asetettu. Selainten päivittyessä epästandardi koodi saattaa kuitenkin lakata toimimasta halutulla tavalla, tai sivustoa myöhemmin päivitettäessä ei enää muisteta, mistä oikein oli kysymys.

Html:n tunteminen on tärkeää kaikille, jotka tekevät web-sivuja. Myös sivunteko-ohjelmia käytettäessä joudutaan usein korjaamaan ohjelman tekemää html:ää tai etsittävä syitä virhetilanteisiin html:n joukosta.

Myös CSS:n käyttö on helppoa aloittaa kopioimalla yksinkertaisia rakenteita, mutta vaativammassa käytössä CSS:n käsitteet saattavat olla vaikeita omaksua ja soveltaa. Käsitteet toimivat osittain eri logiikalla kuin html:ssä, vaikka niistä käytettäisiin samoja nimiäkin.

Html:n ja CSS:n yksityiskohtia ei kannata opetella ulkoa, vaan niiden rakenteet ja käytetyt elementit voi tarkistaa erilaisista tietokoosteista.

Verkkosivustojen suunnittelu ja toteutus

Aluksi määritellään sivuston konsepti, joka sisältää vähintään

• tavoitteet eli mitä www-sivustolla halutaan saavuttaa: Miksi sivusto tarvitaan, vai tarvitaanko sitä? Mikä on sen päätehtävä (tiedotus, myynti, yhteystietojen tarjoaminen jne.). Vastaus vaikuttii muihin suunnittelupäätöksiin, kuten sisällön ja käyttöliittymäsuunnitteluun.
• kohderyhmä eli kenelle sivut suunnitellaan: yritykset, asiakkaat, ystävät, muut verkkosuunnittelijat jne. 
• Ns. pääväittämän: mitä sivusto sanoo, mikä on sen ydinsanoma? (Esim. portfoliossa: Kalle Kuvaaja on nuorekas, monipuolinen, lahjakas valokuvaaja, joka kannattaa palkata projektiin)

Tämän jälkeen tehdään

• sisällön suunnittelu: Mitä kaikkea sivustolla pitää olla? Tee lista sisällöistä, joita haluat sivulla julkaista. Tee sen jälkeen rakennekaavio / käsitekartta siitä, miten sisällöt sijoittuvat suhteessa toisiinsa. Käsitekartalla voi myös kuvata sisältöjen välisiä linkkejä. 
• käyttöliittymäsuunnittelu: Navigaation ja sisällön sijoittaminen + muu sisältö
• graafisen ulkoasun suunnittelu: typografia, layout, värit jne.
• teknisen toteutus: mietitään mm. taittotyylin valinta (html vai css?) ja toteutetaan html-sivut ja css-tiedosto.

Lopuksi tarkistukset ja testaus:

• Validointi (johon palataan myöhemmin tarkemmin)
• Eri selaimet ja käyttöjärjestelmät
• Sisällön oikeakielisyys 
• Huom. tekijänoikeudet kuvien ja musiikin käytössä! Tekijänoikeusvapaita kuvia löytyy mm. http://www.sxc.hu/ ja musiikkia http://www.jamendo.com/en/.

Lisätietoa

World Wide Web Consortium: http://www.w3.org/

Jukka K. Korpelan verkko-opas Merkkauskielten idea

Lähteet

Jukka K. Korpela ja Tero Linjama: XHTML-käsikirja
Jukka K. Korpela: CSS verkkosivujen muotoilussa