Esteettömyys

Mallivideot

Ongelmia videon katselussa?

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.

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

Erilaiset selaajat

Dokumentin rakenne

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/

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo8/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)<URL: http://hazor.iki.fi/>
2005-12-17 19:17:37