Ylläpito, sivustonavigointi, esteettömyys

Mallivideot

Ongelmia videon katselussa?

Demoissa harjoitellaan isomman sivuston ylläpitoa Maken, XSL:n ja WML:n avulla sekä muutamia palvelinpuolen säätöjä sekä toteutetaan Nanonanon sivustolle sivustonavigointi, gallerian muotoilu ja vieraskirja.

Makefile

Makefile XSLT:llä -mallivideo

Edellisissä demoissa kokeiltiin yksittäisen sivun ylläpitoa esiprosessoinnin avulla. Tällä kertaa kokeillaan kuinka saadaan useampi sivu helposti saman esiprosessointikäsittelyn alaisuuteen.

  1. Käytetään apuna unix-ympäristössä yleisesti käytettyä Make-ohjelmaa ja siihen liittyvää Makefile-tiedostoa. Makefile-tiedoston avulla voidaan kertoa mitkä tiedostot riippuvat toisistaan kuten esim. nanonano.html-tiedoston sisältö riippuu nanonano.xsl- ja nanonano.xml-tiedostoista. Ota yhteys SSH Secure Shellillä palvelimeen www.cc.jyu.fi.
  2. Kopioi edellisissä demoissa tekemäsi nanonano.xsl-tiedoston kanssa samaan kansioon valmis Makefile
  3. Tee jokin muutos nanonano.xml-tiedostoon.
  4. Tee esiprosessointi kirjoittamalla: 
    make
  5. Jos kaikki on kunnossa ja nanonano.xml-tiedosto on validi niin make luo uuden nanonano.html-tiedoston
  6. Muuta nanonanon artikkelit-kansiossa oleva index.html-tiedosto vastaavanlaiseksi kuin edellä käytetty nanonano.xml eli poista siitä kaikille sivuille yhteiset osat ja muuta tiedoston nimeksi index.xml.
  7. Lisää Makefileen tieto, että haluat Makefilen avulla esiprosessoida myös artikkelit/index.xml-tiedoston: 
    XMLFILES = nanonano.xml artikkelit/index.xml
  8. Kokeile toimiiko esiprosessointi make-komennolla.
  9. Muuta hieman nanonano.xsl-tiedoston eli sivupohjatiedoston sisältöä. Lisää pohjaan esim. linkki handheld.css-tiedostoon: 
    <link href="http://www.cc.jyu.fi/~omatunnus/nanonano/handheld.css"
 rel="StyleSheet" type="text/css" />

    Muuta myös demo2.css:n linkki absoluuttiseksi, koska suhteellinen viittaus ei tässä tapauksessa toimi (miksi ei?).

  10. Suorita make. Nyt pitäisi esiprosessoinnin tapahtua kaikille tiedostoille, koska edellä muutit tiedostoa (nanonano.xsl), josta kaikki sivuston sivut riippuvat. Tällä tavalla voit siis hyvin helposti tehdä yhteisiä muutoksia vaikka sadoille sivuille kerralla.

WML

Makefile WML:llä -mallivideo

WML ja Makefile toimivat yhdessä aivan samaan tapaan kuin XSL ja Makefile.

Sivustonavigointi

Sivustonavigointi -mallivideo

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

  1. Avaa XetorjEdit ja siihen linkit, artikkelit, opiskelu, it ja kokkaus-hakemistoissa olevat index.html-dokumentit.
  2. Muuta 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- tai Opera-selaimella. Valitse Mozillassa sivustonavigointi näkyviin valikkotoiminnolla View | Show/Hide | Site Navigation Bar | Show always. Operassa sivustonavigointi löytyy valikosta Navigation | Site navigation. Mozilla Firefoxissa sivustonavigointia ei ole valmiina, mutta sen voi lisätä omaan selaimeensa laajennuksena. Jos laajennoksen asentaminen onnistu mikroluokkien koneilla niin kokeile ensin tallentaa tiedosto U-asemalle ja avata se Firefoxissa Open File-komennolla.
  7. Avaa Nanonanon sivu selaimeen ja kokeile navigoida linkkipalkin ja sivustonavigoinnin avulla sivulta toiselle.
  8. 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.

link-elementtien lisääminen voitaisiin toteuttaa myös automaattisesti esiprosessointimenetelmillä, mutta tämä vaatisi hieman ohjelmointitaitoa.

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.

Graafiset selaimet

Erilaiset selaajat

Dokumentin rakenne

Lisätehtäviä

Seuraavia osioita ei tarvita harjoitustyössä, mutta voit tutustua näihin kiinnostuksen mukaan. Samalla saat Nanonanon sivun valmiiksi.

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. Ominaisuus toimii kuitenkin hieman väärin Internet Explorerilla, joten mikäli haluat yhteensopivuutta, joudut käyttämään CSS-kikkoja.

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. Avaa tiedosto XetorjEdit:illä editointia varten.
  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 XetorjEditissä 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/

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo8/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2005-02-11 12:03:51
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto