[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
   
 
Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.
Tutustu myös muihin tekemiini aihepiireihin eli alisivustoihin! Yllä olevassa listassa on alisivustoja, jotka jollakin tavalla liittyvät tietotekniikan osaamiseeni tai itseni esittelyyn. Tälle alisivustolle ei ole minkäänlaista paluulinkkiä, koska sivujen luonne on epävirallinen. Yllä luetellut sivut avautuvat kuitenkin uuteen ikkunaan, jolloin portfoliosivut eivät häviä, mikäli et sulje portfoliosivujen ikkunaa. Myös pop-up navigaattorilla voit selailla muita aihepiirejä hukkaamatta portfoliosivuja.
 
 
Portfoliosivujen etusivuLisäsivut > Web-sivujen suunnitteluperiaatteeni

Web-sivujen suunnitteluperiaatteeni

Aiheet

Nykyiset suunnitteluperiaatteet

Yleistä

Kerron tällä sivulla sivujeni yleisistä suunnitteluperiaatteista eli siihen, mitä tavoitteita olen sivujen tekemiselle asettanut. Ratkaisu ei välttämättä sovellu yrityskäyttöön, sillä mainokset tuovat omat hankaluutensa.

Koodausperiaatteet

  1. Käytän HTML-elementtejä sisältöön liittyvät kuvat ja semanttiset tekstielementtielementit poislukien lähinnä vain sivujen perusrakenteen luomiseen. Siihen liittyy seuraavat lisäperiaatteet:

    • Ensisijainen rakenne-elementti on DIV/CENTER ja toissijainen TABLE (ratkaisu ei välttämättä sovellu kaupallisille sivuille).
    • Pyrin käyttämään taulukoita vain silloin kun itse asian esittäminen niin vaatii (joillakin vanhoilla sivuilla on turhia taulukoita; kaupallisilla sivuilla mainosten vuoksi on usein mielekästä käyttää taulukoita sivun perusrakenteen luomiseen).
    • Pyrin välttämään kehysten käyttöä. Käytän perinteisiä kehyksiä vain erikoistarkoituksissa. Jos tavanomaiset sivut kaipaavat kehyksiä, käytän rivinsisäiskehyksiä (IFRAME) ja varmistan, että kohde on tavoitettavissa ilman rivinsisäiskehyksiäkin.
  2. Sivut noudattavat mahdollisimman tarkoin Web-standardeja seuraavista syistä:

    • Internet on tarkoitettu avoimeksi yhteisöksi. Jos sivut noudattavat suositeltuja standardeja, internet voi kehittyä terveeseen suuntaan.
    • Jos sivut tehdään standardien mukaan, koodin tarkastaminen erilaisissa palveluissa helpottuu, sillä turhia virheilmoituksia ei tule (sivujen tarkistaminen on tehty Opera-selaimella erityisen helposti - ohjelmassa on toiminto, jolla voi lähettää sivun W3C:n internetissä olevalle validointiohjelmalle; MS IE:hen saa lisäosana XML-validaattorin).
    • Käytän epästandardeja piirteitä hyvin säästeliäästi. Ne antavat selaimesta suhteessa toisiin selaimiin helposti väärän mielikuvan. Käytän kuitenkin joitakin epästandardeja seuraavissa tapauksissa:
      • Piirre parantaa sivujen toimivuutta tai havaittavuutta.
      • Erityispiirteiden huomioiminen ei ole haitallista muille selaimille.
      • Käytän sellaisia piirteitä jotka ovat periaatteessa mahdollisia toteuttaa standardein mukaan, mutta joita piirteitä selain ei tue
  3. Sivut toimivat mahdollisimman monissa selaimissa. Sivuni toimivat vähintään kohtuullisen hyvin ainakin seuraavissa selaimissa (kaikkia selaimia en luonnollisestikaan pysty testaamaan):

    1. MS IE 5.x+ (Mac-selainten tukea ei ole viimeaikoina testattu; toimivuus MS IE 4.x-selaimissa on jonkin verran heikompi).
    2. Mozilla Gecko (esim. Netscape 6.x+; toimivuus vanhemmissa selamissa selkeästi heikompi).
    3. Opera 5.x+ (toimivuus vanhemmissa selamissa selkeästi heikompi).
  4. Sivut ovat teknisesti modernit, mutta eivät ylimodernit eikä koodaustekniikka ole itseisarvo. Siihen liittyy seuraavat periaatteet:

    1. Jos sivu tarvitsee ohjelmointia, se toteutetaan ensisijaisesti palvelinpuolen koodauksella.
    2. Jos visuaalinen efekti saadaan CSS:llä, käytetään sitä.
    3. JavaScript-koodausta käytetään säästeliäästi.
  5. Pyrin ottamaan huomioon päivitettävyyden seuraavilla tavoin:

    1. Sivun osat on jaettu "palikoihin", jotka on erikseen päivitettävissä. Sivut on usein jaettu seuraaviin palikoihin:
      1. HEAD-osa.
      2. Navigointi (osa navigoinnista on automaattisesti tuotettua).
      3. Asiaosa.
      4. Loppuosa.
    2. Sivujen ulkoasu on määritelty mahdollisimman pitkälle CSS:n avulla ja silläkin pääosin ulkopuolisia CSS-tiedostoja käyttäen.

Visuaalinen rakenne, ulkoasu ja navigointi

  1. Sivujen visuaalinen perusrakenne on selkeä ja yksinkertainen:

    1. Asiasisällölle varattu alue löytyy ensi silmäyksellä.
    2. Navigointi löytyy helposti.
    3. Mahdollinen "mainosjakso" on sivun lopussa, jotta se ei herättäisi liikaa huomiota (silti joitakin mainokset saattavat häiritä).
  2. Sivujen visuaalinen ilme on yksinkertaisen tyylikäs ja moderni.

  3. Navigointi on selkeä ja sivut on löydettävissä lyhyen hakupolun päästä:

    1. Sivuilla ei ole liikaa navigointilinkkejä.
    2. Kaikki alisivustojen sivut ovat lyhyen polun päässä (maks. kaksi klikkausta). Lyhimmät polut saa käyttöön sivun yläreunan modernista dynaamisesta valikosta.
    3. Otan huomioon käyttäjäryhmät, jotka vierastavat dynaamisia valikoita tai joille niiden käyttö on vammaisuuden vuoksi vaikeaa. Jos dynaamisia valikoita ei haluta käyttää, niiden vaihtoehtona on siirtyä aliryhmäkohtaisille välihakemistosivuille, alisivuston koko sisällön esittävälle sivulle tai sivutaulukkoon. Tällöin polku luonnollisesti pitenee.
    4. Sivuja voi navigoida käyttämällä pelkästään seuraavia suhteellisia linkkisuhteita (mainitsen niiden englanninkielisen vastineen):
      1. Koko sivuston aloitusivu eli sivuston kansilehti (home).
      2. Alisivuston <?php print strtolower($CoverN); ?> (first).
      3. Ylempi sivutaso (up).
      4. Seuraava sivu (next).
      5. Edellinen sivu (prev).
    5. Selaaja saa tietoa siitä, missä mennään koska avoinna oleva sivu muuttaa dynaamisessa valikossa olevan linkin taustavärin kullankeltaiseksi. Jos alisivustolla on sivuryhmäkohtaiset sisältösivut eli välihakemistot, sivun yläreunassa olevassa sivuryhmän ilmaisemassa linkissä tekstiväri muuttuu kullankeltaiseksi. En katso tarpeelliseksi yksityiskohtaisemman hakupolun ilmoittamista.
    6. Sivuilta löytyy hakutoiminto.

Toimivuus ja tulostus

  1. Sivut pyritään saamaa toimimaan monissa selaimissa (tarkemmat periaatteet on mainittu jo aiemmin koodausperiaatteiden yhteydessä):

  2. Sivut toimivat hyvin erikokoisissa näytöissä, kuten esim.:

    1. Sangen uudet Nokia Communicator kännykät, joissa on 640x240 pikselin näyttö (käyttöjärjestelmänä Symbian OS eli entiseltä nimeltä EPOC). Sivujen lukeminen ei kunnolla toimi 240x320 pikselin näytön omaavissa kämmenmikroissa (uusimmat mikrot käyttävät yleensä PalmOS tai Microsoftin Pocket pc käyttöjäjestelmää, mutta myös Linuxia kokeillaan). Minimi toimiva leveys on n. 400 pikseliä, minkä levyisen näytön omaavissa laitteissa (tai kavennettaessa normaali selainikkuna tähän leveyteen) tulee vaakavierityspalkki, mutta se on vain kosmeettinen vaiva, sillä se ei haittaa sisällön lukemista eikä tärkeimpien navigointilinkkien käyttöä.
    2. Normaakokoiset, vähintään 14' näytöt (kannettavissa hieman allekin). Yli 800x600 resoluutioisilla näytöillä asiasisällön leveys on täyslevyisillä useimmiten käytetyillä selaimilla kiinteä.
  3. Pyrin ottamaan huomioon latausajat:

    1. Sivut ovat selkeän tyylikkään suhteellisen pienellä kuvamäärällä.
    2. Jaan ylipitkiä sivuja jaksoihin (ei sovellu pitkiin sisältöluetteloihin).
  4. Sivut tulostuvat miellyttävästi ja niistä on pois kaikki sellainen, mitä tulostettaessa ei tarvita.

Toki ratkaisussani on muutama ongelma, joista seuraavat ovat maininnan arvoisia:

  1. Sivujen toiminen kapealla näytöllä ja dynaamisen valikon pysyminen joillakin selaimilla kiinteästi asemoituna edellyttää kapeaa oletuksena kiinni olevaa dynaamista valikkoa. Koska valikko avautuu automaattisesti hiiren siirtyessä sen päälle, en koe ongelmaa suureksi. Koen edut haittoja suuremmiksi.

  2. Päänavigointilohkot joudutaan hakemaan uudestaan ja uudestaan. Ongelma koskee kaikkia sivustoja, jotka eivät käytä kehyksiä. Kehysten käytöstä olisi kuitenkin enemmän haittaa kuin hyötyä.

  3. Kun sivut koostuvat palasista eikä tietokantaa ole, sivujen ylläpito vaatii paljon muistamista (olen helpottanut tätä joillakin nimeämiskäytännöillä). Tietokanta saattasi helpottaa sivujen ylläpitoa, mutta se toisi itse tietokannan ylläpidon ja lisää töitä palvelimelle.

[Alku]

Aikaisemmat suunnittelutavat

Käytin ennen kehyksiä, mutta luovuin niistä seuraavista syistä:

  1. Yksittäisiä sivuja on vaikea laittaa suosikkilistoihin eivätkä yksittäiset sivut usein toimi itsenäisesti (jos tarkoituksena on estää alisivujen merkitseminen, piirteestä on myös etua).

  2. Käyttäjät saattavat tallentaa vain kehyssetin, ei itse asiasisältöä.

  3. Asiasisällön tulostaminen on monelle käyttäjälle vaikeaa - joku voi tulostaa kaikki kehykset tai väärän kehyksen.

  4. Hakupolut saattavat tulla hankaliksi ja vaikeiksi muistaa. Niiden selittäminen uudelle vierailijalle saatta olla tosi hankalaa (vrt. vieraalla paikkakunnalla esim. linja-auto aseman löytäminen ilman karttaa tapaan "käänny seuraavasta risteyksestä oikealla ja sen jälkeen aja suoraan...").

  5. Jos haluaa luoda sivuja, joilla selaimille näkyy eri Web-osoite ja jotta hakupolut eivät muodostuisi kovin hankaliksi, täytyy luoda paljon kehyssettitiedostoja.

  6. Hakukoneilla on vaikeuksia kehysten kanssa.

Edellä luetelluista syistä olen sitä mieltä, että mielestäni kehykset sopivat vain sellaisille palveluille, jossa alisivuja ei tarvitse merkitä ylös. Jos yksittäisiä sivuja joudutaan tulostamaan, sivujen suunnittelijan pitäisi antaa erityiset tulostusversiot. Toki niiden käytöllä on muutamia etuja:

  1. Navigointiosaa ei tarvitse ladata joka sivulle uudestaan.

  2. Navigoinnin voi kiinnittää tiettyyn paikkaan (tästä on myös haittaa, sillä kiinteät kehykset vievät näytöltä tilaa).

  3. Navigointiosan päivitys on helppoa. Lähinnä tästä ja seuraavaksi luetellusta syystä kehykset menettelevät vasta-alkajien suppeamuotoisilla kotisivuilla, joissa on esim. noin kymmenen sivua.

  4. Sisältösivut voidaan rakentaa äärimmäisen yksinkertaisiksi.

  5. Monitasoisilla kehysseteillä saa joustavia sivuratkaisuja (edellyttää jo hieman osaamista).

[Alku]