Esteettömyys

• Mallivideot
• Internet Explorer ja position: fixed;
• Saavutettavuus ja esteettömyys
  • Värit
  • Graafiset selaimet
  • Erilaiset selaajat
  • Dokumentin rakenne
• Galleria
• Vieraskirja
• Kurssipalaute

Demoissa käsitellään Internet Explorerin CSS-puutteita, saavutettavuutta ja esteettömyyttä ja testaillaan sivustoa erilaisilla selaimilla.

Internet Explorer ja position: fixed;

Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE:llä, käytä valitsinta>, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE:ssä ja tekstin yhteenkirjoittamalla IE jättää nämä määrittelyt varmasti huomiotta.

IE saadaan käyttämään absoluuttista positiointia ja muut kiinnitettyä positiointia seuraavalla tavalla:

.navigointi {
/* Tänne määritykset, jotka toimivat kaikissa selaimissa */
position: absolute;
}
html>body>.navigointi {
/* Tänne määritykset, joita halutaan käytettävän muissa selaimissa kuin internet
explorerissa. */
position: fixed;
}

IE myös laskee lohkojen kokoja väärin.

• Kopio itsellesi navbar.html ja navbar.css jotka on testattu pelkästään Firefoxilla.
• Kokeile navbar.html-tiedoston toimintaa Internet Explorerilla ja Operalla.
• Korjaa navbar.css- ja navbar.html-tiedostoa jotta sivu näyttää järkevämmältä myös Internet Explorerilla ja Operalla.
  • Tarkista että oleellisten elementtien padding ja margin on määritelty. Jokaisella selaimella on omat oletusarvonsa eri elementtien paddingille ja marginille.
  • Määrää IE käyttämään absoluuttista asemointia
  • Kierrä IE:n laskuvirheet lohkojen kokojen suhteen. Voit joko määritellä erilaisen koon IE:lle kuin muille selaimille tai käyttää ylimääräistä lohkoa
  • Varmista että vasemman laidan navigointipalkin tausta jatkuu koko sivun pituudelta. Määrää sivun taustaväriksi sama kuin on navigointipalkin taustaväri ja määrittele taustaväri tarvittaessa muille lohkoille.

Saavutettavuus ja esteettömyys

Esteettömyys -mallivideo

Monissa julkisissa palveluissa ja yrityksien sivuilla on huomattavia esteettömyysvirheitä. Tutki VR:n sivua esteettömyyden ja käytettävyyden näkökulmasta.

Värit

Tarkista esim. www.vr.fi- ja www.mtv3.fi-sivustot Colorblind Web Page Filter -ohjelmalla.

Kokeile erilaisten värien kontrastieroja Colour Contrast Analyser -ohjelmalla.

Kokeile tehdä esim. harjoitustyötäsi varten hyvä värivalikoima Color Scheme Generator 2 -työkalulla tai Color Scheme Chooser -työkalulla tai antamasi kuvan perusteella colr.org-palvelulla.

Graafiset selaimet

• Tutki miltä sivusto näyttää erilaisilla graafisilla selaimilla.
  • Internet Explorer (kuvake työpöydällä)
  • Mozilla Firefox (Start | All Programs | Mozilla Firefox | Mozilla Firefox)
  • Opera (Start | All Programs | Opera | Opera)
  Kokeile muuttaa ikkunan kokoa. Mitä huomaat?
• Kokeile vaihtaa etusivun tekstin kokoa Internet Explorer-selaimella (View | Text Size). Miten käy? Vaikuttaako tämä sivun esteellisyyteen? Miksi?

Erilaiset selaajat

• Jos mahdollista, niin kuuntele miltä kuulostaa VR:n sivu ääniselaimella. Mitä voit todeta tämän perusteella sivun esteellisyydestä?
• Tutki miltä sivu näyttää tekstiselaimella:
  • Avaa käynnistävalikosta Start | Programs | SSH Secure Shell | Secure Shell Client ja ota yhteys silmu.cc.jyu.fi, itu.cc.jyu.fi tai verso.cc.jyu.fi -palvelimeen. Kirjoita komentokehotteeseen

    lynx www.vr.fi

  • Selaaminen tapahtuu nuolinäppäimillä, välilyönti- ja enter-napilla. Nuoli vasemmalle on toimii samoin kuin graafisten selainten Back (takaisin) -painike, nuoli oikealle on Forward (eteenpäin). Nuolilla alas ja ylöspäin voit selailla sivuja ja valita elementtejä. Välilyönnillä pääset seuraavalle sivulle. q-näppäimellä pääset pois selaimesta.
• Avaa Opera-selain VR:n sivuille. Kokeile miltä sivu näyttää Operan mobiilitilassa. Valitse View | Small Screen niin pääset Small Screen Rendering-tilaan. Mitä huomaat? Tutki myös muita kehyksiä ja niiden sisältöjä mobiilinäkymässä. Jos sivu näkyy normaalisti niin pääset mobiilitilaan painamalla Shift + F11. Oman harjoitustyön mobiiliulkoasua kannattaa testata Operan ongelmien takia mieluummin Handheld Testerillä.

Dokumentin rakenne

• Avaa sivu Mozilla- tai Firefox-selaimen DOM Inspectoriin (Tools | Web Development | DOM Inspector). Tutki puurakenteesta sivuston rakennetta dokumenttipuusta. Mikä tekee sivusta esteellisen?
• Tutki sivustolla olevaa lomakekenttää avaamalla sivuston navigointikehys selaimeen:

  http://www.vr.fi/heo/navigointi.shtml

  Katso dokumentin lähdekoodia (View | Source). Mitä esteellisyystekijöitä löydät lomakkeesta?

Galleria

Galleria -mallivideo

Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan rivittyviksi.

1. Muokkaa demo2.css-tiedostoa. Liu'uta .kuva-lohko vasempaan laitaan oikean sijaan.
2. Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .kuva-lohkolle ominaisuudet width ja height, joihin sijoitat hieman yli kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?).
3. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
4. Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää demo2.css-tiedostoon lohko, joka vaikuttaa vain kuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
   • Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon sillä se saattaa vaihdella.
   • Keskitä teksti.
   • Määrää tekstin ylivuotava osuus piiloon.
   • Poista marginaalit (margin) ja täytteet (padding).
   • Pienennä fonttikokoa hieman.
5. Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella.

Vieraskirja

Vieraskirja -mallivideo

Tehdään pienimuotoinen vieraskirja Nanonanon kotisivulle.

1. Siirrä SSH Secure File Transferilla www/nanonano/linkit-hakemistosta index.shtml V-asemalla olevaan vieraskirja-hakemistoon.
2. Poista sivulta erilliset linkit, mutta jätä ylänavigointi, navigointipalkki ja lopussa olevat päivitystiedot paikalleen.
3. Lisää vieraskirjalle pääotsikko.
4. Lisää otsikon jälkeen form-elementti. Sijoita lomakkeen method-attribuuttiin post ja action-attribuuttiin

   http://www.cc.jyu.fi/~omatunnus/cgi-bin/lisays.php

5. Lisää lomakkeelle kolme tekstikenttää, vieraskirjaan kirjoittajan nimeä, e-mailia ja kotisivun osoitetta varten. Lisää tekstialue kommenteja varten. Laita kenttien name-attribuutteihin arvot vkurl, vkemail, vkname ja vkcomment.
6. Lisää lomakkeen loppuun submit-tyyppinen nappi, jonka name-attribuuttiin arvo vkadd.
7. Lisää vielä lomakkeelle piilokenttä ja anna sen name-ominaisuuteen arvo vkcss. Piilokentän arvoksi (value) voit määritellä haluamasi css-tiedoston, jota käytetään lomakkeen lähetyksen jälkeisessä sivussa. Määrittelee css-tyyliksi sivustolla muutenkin käytetty demo2.css. Tee viittaus joko absoluuttisena palvelimen juuresta tai suhteellisena cgi-bin-hakemistosta lähtien.
8. Laitetaan vieraskirjan kommentit näkymään heti lomakekenttien jälkeen. lisays.php tallentaa lomakkeelta saadut tiedot data.html-tiedostoon. Käytä SSI:n include-komentoa ja lisää data.html-tiedoston sisältö dokumenttiin:

   <!--#include virtual="/~omatunnus/cgi-bin/data.html"-->

9. Avaa SSH Secure File Transfer -ohjelma valinnalla Start | All Programs | SSH Secure Shell | SSH Secure File Transfer ellei se ole jo auki. Ota yhteys www.cc.jyu.fi-palvelimeen.
10. Avaa vasemmalle puolelle V:\nanonano\vieraskirja-hakemisto ja oikealle puolelle www/nanonano/vieraskirja-hakemisto. Siirrä nyt index.shtml V-asemalta www.cc.jyu.fi:hin. Vieraskirjan pitäisi nyt näkyä osoitteessa

    http://www.cc.jyu.fi/~omatunnus/nanonano/vieraskirja/

    Vieraskirja ei toimi vielä oikein, koska lomakkeen käsittelijä ja tallennustiedosto puuttuvat cgi-bin-hakemistosta

11. Avaa unix-komentorivi valikosta Window | New Terminal. Siirry cgi-bin-hakemistoon ja siirrä sinne vieraskirjalisäyksen tekevä ohjelma komennolla

    wget http://appro.mit.jyu.fi/www/demot/demo8/lisaysphp.txt

12. Muuta lisaysphp.txt:n nimeksi lisays.php
13. Anna kaikille oikeus suorittaa (x) lisays.php-ohjelma.
14. Luo cgi-bin-kansioon tyhjä tiedosto data.html komennolla:

    touch data.html

15. Anna kaikille oikeus kirjoittaa (w) tiedostoon data.html. Tämä myös tarkoittaa sitä, että kuka tahansa unix-koneelle pääsevä voi tuhota tämän tiedoston. Tietoturvan takia yleensä www-palvelinta ei käytä monta käyttäjää tai ohjelmat ajetaan käyttäjän oikeuksilla (kuten esim. CGI-ohjelmat www.cc.jyu.fi:ssä). Muutenkin sivuston ylläpitäjän on tietoturvasyistä oltava selvillä mitä ohjelma tekee.
16. Testaa, että vieraskirja toimii. Mikäli toimivuudessa on ongelmia, niin korjaa kohdat ja siirrä uusitut tiedostot SSH Secure File Transferilla www.cc.jyu.fi-palvelimelle ennen uudelleentestausta.
17. Vieraskirjaan lähetetyt tiedot tulevat seuraavassa muodossa data.html-tiedostoon:

    <ul class="vkentry">
      <li class="vkdate">Tue, 27 Apr 2004 16:02:28 +0300</li>
      <li class="vkname">Jukka Mäntylä</li>
      <li class="vkemail">jmantyla@cc.jyu.fi</li>
      <li class="vkurl">http://appro.mit.jyu.fi/</li>
      <li class="vkcomment">Mahtavat sivut!</li>
    </ul>
    

    Aikamerkintä tulee automaattisesti. Muokkaa demo2.css-tiedostoa niin että vieraskirja-merkinnät näyttävät järkeviltä. Voit tehdä esimerkiksi seuraavanlaisia ulkoasumäärityksiä:
    • Laita vkentry-lohkolle sopiva taustaväri.
    • Liu'uta lohkot vierekkäin kuten galleriassa.
    • Poista tämän lohkon sisällä olevalta li-elementiltä listamerkki, marginaalit ja täytteet.
    • Korosta palauttajan nimeä fontin koolla ja väreillä.
    • Pienennä päivämäärätietoa.
    • Anna erilaisille listakohdille erilaisia taustavärejä.

Kurssipalaute

Kun saat harjoitustyön palautuskelpoiseen kuntoon niin käythän täyttämässä (lyhyen) kurssipalautteen osoitteessa:

http://appro.mit.jyu.fi/www/palaute/