Demo 6 - Esteettömyys, XML ja sivustonavigointi

• Mallivideot
• Käytettävyys ja esteettömyys
  • Pikopikon kotisivu
  • VR:n sivu
• Sivustonavigointi
• RSS ja CSS
• MathML
• Lisätehtäviä
  • Esteetön kotisivu
  • Matematiikkaa

Näissä demoissa perehdytään sivustojen esteettömyyden arviointiin ja esteettömän sivun tekemiseen. Harjoitellaan XML-sivun muotoiluja ja lisätään Nanonanon sivuille sivustonavigointi.

Käytettävyys ja esteettömyys

Esteettömyys -mallivideo

Arvioidaan sivujen käytettävyyttä ja esteettömyyttä.

Pikopikon kotisivu

Seuraavaan kuvitteelliseen sivuun on kerätty useita erilaisia käytettävyys- ja esteettömyysvirheitä.

http://appro.mit.jyu.fi/www/demot/demo6/fp/frontpage.html - esimerkki huonosta sivusta

Sivusto on tehty Frontpage-ohjelmalla, joka on tyypillinen WYSIWYG-editori (What You See Is What You Get). WYSIWYG-editoreissa on yleensä se ongelma, että taitamattomissa käsissä ne tekevät esteellistä ja selainriippuvaista koodia.

Pyri selvittämään mikä tekee sivusta esteellisen. Avaa Notepad tai Word, johon kirjaat huomiosi. Tallenna tiedosto W:\www\-hakemistoosi. Käytettävyydestä ja esteettömyydestä löydät vinkkejä luennolta 8 (voit avata luennon sivun uuteen ikkunaan napauttamalla linkkiä oikealla hiiren napilla ja valitsemalla Open in new window).

1. Tutki miltä sivusto näyttää erilaisilla graafisilla selaimilla.
   • Internet Explorer (kuvake työpöydällä)
   • Mozilla (Start | Programs | Mozilla | Mozilla)
   • Opera (Start | Programs | Opera | Opera)
2. 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 http://appro.mit.jyu.fi/2004/kevat/www/demot/demo6/fp/frontpage.html

   • 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.
3. Kuuntele miltä kuulostaa Pikopikon sivu ääniselaimella selailtuna. Mikroluokassa tarvitset kuulokkeet. Mikäli et voi kuunnella ääntä, ohita tämä kohta. Kokeile ääntä myöhemmin kotikoneellasi.
4. Avaa sivu Mozilla-selaimen DOM Inspectoriin (Tools | Web Development | DOM Inspector). Kopioi sivun osoite http://appro.mit.jyu.fi/www/demot/demo6/fp/frontpage.html DOM Inspectorin osoiteriville. Tutki puurakenteesta sivuston rakennetta ja kirjaa esteellisyyskohtia ylös.
5. Tutki hieman dokumentin lähdekoodia (View | Source). Esteellisyydestä johtuen koko sivun koodia ei saada heti näkyviin (miksi?). Napauta Mozillassa etusivua oikealla hiiren painikkeella ja valitse kohta This Frame | View Frame Source.
6. Kokeile validoida Pikopikon kotisivu W3C:n validaattorilla. Sivustolla olevat kehykset estävät validoinnin suoraan, joten laita Address-kenttään vain etusivun osoite:

   http://appro.mit.jyu.fi/www/demot/demo6/fp/frame3.htm

7. Validointi epäonnistuu (miksi?), mutta voit jatkaa tarkistusta valitsemalla Encoding-kohtaan merkistön windows-1252 ja Doctype-kohtaan tyypin HTML 4.01 Frameset.
8. Kokeile Bobby-esteettömyystarkistinta. Anna ylläoleva etusivun osoite tarkistimelle. Miten tulkitset Bobbyn antamat ehdotukset?
9. Vertaile omia vastauksia opettajan vastauksiin. Kuinka monta kohtaa löysit? Löysitkö jotain mitä listassa ei ollut?

VR:n sivu

VR:n 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. Kirjaa vastauksesi samaan tekstitiedostoon kuten edelläkin.

1. Kokeile vaihtaa etusivun tekstin kokoa Internet Explorer-selaimella (View | Text Size). Miten käy? Vaikuttaako tämä sivun esteellisyyteen? Miksi?
2. Kuuntele miltä kuulostaa VR:n sivu ääniselaimella. Mitä voit todeta tämän perusteella sivun esteellisyydestä? (ellet voi kuunnella sivua, niin katso sivuston lähdekoodia View | Source)
3. 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?
4. Olet kännykän mobiiliselaimella hakemassa aikataulutietoja VR:n WWW-sivuilta. Mitä ongelmia joudut todennäköisesti kohtaamaan?

Sivustonavigointi

Sivustonavigointi -mallivideo

Toteutaan Nanonanon kotisivulle head-elementin tietoihin dokumenttien väliset suhteet.

1. Avaa HTML-kit ja siihen demoissa 1 ja 2 tekemäsi index.html-dokumentit.
2. Lisää linkit, artikkelit, opiskelu, it ja kokkaus-hakemistojen index.html-dokumenttien head-osaan tieto ylemmän tason dokumentista. Esimerkiksi kokkaus-hakemiston dokumentin ylädokumentti on artikkelit-hakemistossa oleva artikkelilistasivu. Tee viittaus suhteellisena:

   <link rel="Parent" href="../" title="Tähän kuvaus ylemmän tason dokumentin sisällöstä" />

3. Lisää näihin myöskin viittaus etusivuun (huomaa että viittaus riippuu siitä missä hakemistossa dokumentti sijaitsee):

   <link rel="Start" href="../../" title="Nanonano"/>

4. Lisää it-hakemistoon link-elementti seuraavaan artikkeliin eli kokkaus-hakemiston artikkeliin.

   <link rel="Next" href="../kokkaus/" title="Kokkaus-artikkeli" />

5. Lisää kokkaus-artikkeliin viite edelliseen (rel = "Prev") artikkeliin eli IT-aiheiseen artikkeliin.
6. Testaa sivustonavigointia Mozilla-selaimella. Valitse sivustonavigointi näkyviin valikkotoiminnolla View | Show/Hide | Site Navigation Bar | Show always. Avaa Nanonanon sivu selaimeen ja kokeile navigoida linkkipalkin ja sivustonavigoinnin avulla sivulta toiselle.
7. Voit kokeilla vielä lisätä kahteen edelliseen dokumenttiin linkit sarjan ensimmäiseen ja viimeiseen dokumenttiin. Tällä sivustolla ne eivät ole vielä kovinkaan järkeviä, koska artikkeleita on vain kaksi. Kokeile kuitenkin miten Mozilla näyttää sivustonavigoinnissa ominaisuuksilla rel="First" ja rel="Last" varustetut linkit.

RSS ja CSS

RSS:n muotoilu -mallivideo

Muotoillaan RSS-syötettä (XML-muotoista tietoa mm. uutisten jakamiseen) CSS-tyylitiedostolla, jolloin tieto on mukavammin luettavissa selaimella.

1. Tallenna rss.xml -tiedosto W:\www\-hakemistoon.
2. Avaa tiedosto HTML-kit-ohjelmaan niin voit selailla millaisia elementtejä RSS-tiedostossa on käytetty
3. Luo uusi CSS-tyylipohja (New | Style Sheets | Blank Style Sheet) ja tallenna se nimellä rss.css. RSS-sivu on asetettu käyttämään kyseisen nimistä tyylisivua määrityksellä:

   <?xml-stylesheet href="rss.css" type="text/css"?>

4. Avaa selaimeen tallentamasi RSS-dokumentti. W-asemalle tallennettu tiedosto näkyy WWW:ssä osoitteessa http://www.it.jyu.fi/users/tunnus/www/rss.xml
5. Lisää tyylitiedostoon CSS-määrityksiä RSS-elementeille. Tee siis muutoksia vain rss.css-tiedostoon. Muokkaa sivun ulkoasu seuraavan kuvan näköiseksi. Vihjeitä muotoiluun:
   • Käytä CSS:ssä pelkkiä elementtien nimiä ilman nimiavaruusmäärityksiä ja huomioi isot ja pienet kirjaimet, esim. updatePeriod
   • Määrityksellä display: block saat tietyn elementin toimimaan lohkoelementin tavoin eli elementti ei rivity kuin tavallinen teksti
   • float-määrityksellä saat liu'utettua lohkoja peräkkäin vasemmalta oikealle

MathML

MathML -mallivideo

Kokeillaan tehdä muutamia matemaattisia kaavoja WWW-sivulle. Pelkän XHTML:n voimin tämä ei onnistu, joten meidän on tukeuduttava toisiin standardeihin. MathML sopii tähän tarkoitukseen hyvin.

1. Avaa uusi XHTML-dokumentti. Vaihda dokumentin tyypiksi XHTML 1.1 plus MathML 2.0 määreellä:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
                  "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" >  
   

2. Tallenna tiedosto W:\www\-kansioon nimellä mathml.xml. xml-pääte on tärkeä, koska html-päätteisille tiedostoille palvelin antaa väärän MIME-tyypin eikä selain osaa tulkita MathML-määreitä.
3. Lisää dokumentin body-elementin sisälle tekstikappale p-elementillä. Kirjoita hieman tekstiä alkuun: Seuraava funktio ei kuvaa juurikaan mitään järkevää.
4. Lisää toinen tekstikappale (p), jonka sisään määrittelet matemaattisen kaavan MathML:llä:

   <math xmlns="http://www.w3.org/1998/Math/MathML">
   
   </math>
   

   xmlns-ominaisuus määrittää nimiavaruudeksi MathML:n. Käytännössä tämä tarkoittaa, että math-lohko ja sen sisällä olevat elementit on määritelty MathML:llä XHTML:n sijaan.
5. Lisää matemaattinen symboli, merkitse se mi-elementillä (mi = mathematical indentifier):

   <mi>f</mi>

6. Lisätään funktion jäljessä tulevat sulut. Matemaattisen tekstin muotoilujen takia funktiolle on määriteltävä MathML:ssä entiteetti ApplyFunction.

   <mo>&ApplyFunction;</mo>

7. Tämän perään kerrotaan funktion parametrit ja sulut seuraavasti:

   <mrow>
     <mo>(</mo>
     <mi>x</mi>
     <mo>)</mo>
   </mrow> 
   

8. Lisää yhtälö mo-elementillä (mo = mathematical operator):

   <mo>=</mo>

9. Yhtäsuuruus-merkin jälkeen tehdään osamäärää mfrac-elementillä (mfrac = fraction):

   <mfrac>
   
   </mfrac>

10. Osamäärä-elementin sisälle määritetään kaksi matemaattista elementtiä: osoittaja ja nimittäjä. Ensin osoittaja

    <mi>c</mi>
    

11. Lisätään mi-elementin jälkeen nimittäjäksi msup-elementti (msup = superscript), joka ilmoittaa potenssimerkinnän. msup-elementin sisälle tulee kantaluvuksi mi-elementin sisällä oleva teksti ja eksponentiksi mn-elementin (mn = number) sisällä oleva teksti.

    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>

12. Testaa sivua Mozilla-selaimella. MathML mukautuu Mozilla-selaimen tekstin koon määrityksiin, jota voit muuttaa View | Text zoom -valinnalla. Lopputuloksen pitäisi olla seuraavanlainen:

Lisätehtäviä

Jos demojen lopuksi jäi aikaa, niin tee seuraavat syventävät tehtävät.

Esteetön kotisivu

Toteuta siistitty versio Pikopikon kotisivusta. Aloita sivun tekeminen alusta HTML-kitillä ja hyödynnä sivustolla CSS:ää (tekstit voit kopioida sivulta). Korjaa samalla vanhan sivuston esteellisyysongelmat. Korjausehdotuksia on virhelistassa.

Matematiikkaa

Tutki mitä kaikkea MathML:llä voi tehdä. Kokeile itse toteuttaa jokin monimutkaisempi kaava. Mozillakaan ei osaa piirtää kaikkia MathML 2.0:n mukaisia elementtejä, joten joudut kokeilemaan mikä toimii ja mikä ei.

• MathML-esimerkkejä Mozillalla (napauta kaavoja hiiren oikealla napilla, myös toiseenkin kertaan)
• MathML 2.0 -spesifikaatio