Demo 3

Tee ensin loppuun toisissa demoissa tekemäsi demotehtävät ja siirry vasta tämän jälkeen seuraaviin tehtäviin. Seuraavissa tehtävissä muutetaan hieman tekemääsi ulkoista tyylitiedostoa.

1. Avaa edellisissä demoissa tekemäsi tyylitiedosto ja tallenna se nimelle demo3.css. Näin saadaan säilymään myös alkuperäinen tyylitiedosto kunnossa.
2. Muuta kaikista HTML-dokumenteista link-elementin sisällä oleva tyylitiedostomääritys oikeaksi.
3. Mene muuttamaan elementtien värimääritykset yhtenäisemmiksi ja käytä tarvittaessa taustavärille transparent-arvoa. Tarkoituksena on tehdä dokumentista mahdollisimman selkeä je helposti luettava.
4. Tarkista, että dokumentissasi käytetään korkeintaan kolmea erilaista kirjasinperheen määritystä. Esimerkiksi otsikoissa selkeä kirjasin, normaalitekstissä toinen selkeä kirjasin ja koodeissa (pre ja code) tasavälinen kirjasin. Kirjasimien lukumäärän pitäminen pienenä selkeyttää huomattavasti dokumenttia.
5. Tarkista, että dokumentissa on myös järkevät marginaalin, täytteen ja rajan asetukset. Dokumentissa ei saa haaskata liikaa tilaa marginaalille, täytteelle ja rajalle, mutta dokumentin eri osien pitää kuitenkin erottua toisistaan.
6. Määrittele selaimen oletuskirjasinkoko järkeväksi ja mieleiseksesi.
   • Internet Explorerissa määrittely onnistuu valinnalla: View | Text Size.
   • Netscapessa kirjasinkoon tarkistaminen onnistuu valinnalla: Edit | Preferences | Appearance | Fonts
   Määritä fonttikoko sellaiseksi, että sinun on helppo ja hyvä lukea tätä demotehtäväsivua.
7. Tarkista, että eri elementtien kirjasimen koko on normaali tai määriteltynä suhteellisesti em-yksiköissä.
8. Kokeile vielä muutella selaimen kirjasinkokoa ja seuraa miten se vaikuttaa em-yksiköissä määritellyn tekstin kokoon. Palauta lopuksi selaimen kirjasinkoko takaisin järkeväksi.
9. Määrittele kaikkiin linkkeihin takaisin alleviivaus. Tee uusi aliluokka linkeille, joiden avulla voit poistaa alleviivauksen navigointipalkin linkeistä. Aliluokan nimeksi voit laittaa tyylitiedostoon esimerkiksi

    a.navigointi:pseudonimi

   Pseudonimellä tarkoitetaan tässä yhteydessä linkkien näennäisluokan nimeä:
   • visited
   • active
   • link
10. Lisää seuraavaksi dokumenteillesi taustakuva CSS-tyylitiedoston avulla. Ilmaisia taustakuvia löydät esimerkiksi osoitteista:
    • <URL: http://ditto.com/categories/categories.asp?cn=Backgrounds>
    • <URL: http://www.freeimages.com/>
    • <URL: http://www.windyweb.com/design/gallery/backgrounds.htm>
    Mieti samalla mitä käytettävyysongelmia kaksi jälkimmäistä osoitetta sisältävät? Suoran linkin taustakuvaan saat Internet Explorerissa napauttamalla hiiren oikeaa kuvan päällä ja valitsemalla Properties, jonka alta voit kopioida linkin leikepöydälle. Netscapessa kuvan osoitteen saat leikepöydälle valitsemalla hiiren oikealla nappulalla valinnan Copy Image Location.

    Taustakuvan lisäämisessä kannattaa erityisesti miettiä onko taustakuva todellakin tarpeellinen. Taustakuva ei saa missään tapauksessa huonontaa sivuilla olevan asian luettavuutta.

11. Validoi tyylilomakkeesi
12. Tarkista sivusi esteettömyys Bobbylla. Korjaa kohdat joista Bobby löytää huomautettavaa. Bobby viittaa kommenteissaan W3C:n Web Content Accessibility Guidelines-dokumenttiin josta löytyy suomennettu versio kurssimonisteen sivulta 97 eteenpäin.
13. Käy katsomassa muokkaamaasi sivustoa sekä Internet Explorerilla että Netscapella. Millaisia eroja huomaat tyylien tuennassa eri selaimissa?

Lisätehtäviä

1. Tutustu Teknillisen korkeakoulun WWW-käytettävyys ja -käyttöliittymät -kurssilla kirjoitettuihin referaatteihin
2. Edellisissä demoissa tehtiin taulukko, johon määriteltiin solujen sisältö erilaisilla väreillä. Muuta seuraavaksi käyttämäsi värimääritykset RGB-väreiksi osoitteesta <URL: http://www.micapeak.com/class/colors.html> löytyvän väritaulukon avulla.