Demo 3 - Dokumentin julkaiseminen, esteettömyys ja ulkoasun muokkaaminen

Tee ennen seuraaviin tehtäviin siirtymistä edellisten demojen tehtävät loppuun. Seuraavissa tehtävissä jatketaan edellisten demojen tehtäviä ja julkaistaan edellisissä demoissa tehty sivusto. Tämän jälkeen muokataan uuden dokumentin ulkoasua CSS:n avulla.

WWW-sivun julkaiseminen

Seuraavassa käydään vaihe vaiheelta läpi WWW-sivun julkaiseminen WWW-palvelimelle kaikkien nähtäväksi.

1. Ota SSH-yhteys johonkin ATK-keskuksen Unix-koneeseen (silmu,itu,verso,kanto tai tukki).
2. Anna kotihakemistossasi komento makewww, joka luo kotihakemistoosi www-alihakemiston, joka on samalla linkki WWW-palvelimeen. Kaikki dokumentit, jotka sijoitat www-hakemistoon näkyvät kaikille www-käyttäjille.
3. Siirry www-hakemistoon (cd www) ja luo sinne uusi hakemisto demotehtäviä varten (vihje: mkdir tietoverkot).
4. Kotisivusi löytyy seuraavasta osoitteesta, joten kokeile selaimella mitä saat näkyville kyseisestä osoitteesta.

   http://www.cc.jyu.fi/~kayttajatunnus/

   Voit käyttää myös muotoja:
   • http://www.st.jyu.fi/~kayttajatunnus/
   • http://www.cc.jyu.fi/%7Ekayttajatunnus/
   • http://www.st.jyu.fi/%7Ekayttajatunnus/

   Valitse näistä yksi ja käytä aina tätä samaa ilmoittaessasi osoitettasi ystävillesi.

5. Jos selaimessa tulee näkyviin tietoverkot-hakemisto, niin sinulla ei ole kotisivua. Tällöin voit piilottaa palvelimelle siirrettävät demotehtävät tekemällä itsellesi tyhjän kotisivun. Tyhjän sivun luominen onnistuu helpoiten kirjoittamalla www-hakemistossa komennon:

   touch index.html

6. Mene vielä katsomaan selaimella tietoverkot-hakemiston sisältöä. Hakemisto on vielä tyhjä, mutta seuraavaksi sinne on siirrettävä edellisissä demoissa tekemäsi WWW-sivusto.
7. Kopioi edellisissä demoissa tekemäsi demo2-hakemisto sisältöineen www-hakemiston tietoverkot-alihakemistoon. Kopiointiin voit käyttää joko komentorivipohjaista SCP2-komentoa tai graafista SFTP:tä. Saat itse valita kummalla haluat tehdä tiedostojen kopioinnin. Tarkemmin näiden ohjelmien käyttäminen on opeteltu jo tietotekniikan propedeuttisella -kurssilla tai tietokone ja tietoverkot työvälineenä -kurssilla. Seuraavassa kuitenkin lyhyet ohjeet kummankin ohjelman käyttöön:

Secure File Transfer Client (SFTP)

SSH:n Secure File Transfer on Windows-ohjelma jolla voidaan turvallisesti kopioida SSH2-protokollaa tukevien koneiden välillä tiedostoja.

1. Käynnistä SSH Secure File Transter valinnalla Start | Programs | Secure Shell SSH | Secure File Transfer Client
2. Enter-näppäintä painamalla näkyville avautuu ikkuna, johon voidaan määrittäää mihin koneeseen otetaan yhteys. Ota yhteys johonkin atk-keskuksen unix-koneeseen johon sinulla on käyttäjätunnus (silmu, itu, verso, kanto tai tukki).
3. Kopioidaan edellisissä demoissa tekemäsi sivustosi WWW-palvelimelle seuraavasti:
   • Valitse oikean laidassa ikkunasta näkyville www-hakemiston sisältö ja edelleen sen alta tietoverkot-hakemiston sisältö.
   • Valitse ohjelman vasemman laidan ikkunasta näkyville U-levyasemalta tietoverkot-hakemiston sisältö.
   • Kopioi raahaamalla vasemman puoleisessa ikkunassa näkyvä demo2-hakemisto oikean puoleiseen ikkunaan.
   • Tarkista kopioimiesi tiedostojen ja hakemistojen oikeudet kuntoon. Kaikilla täytyy olla vähintään lukuoikeudet tiedostoihin. Lisäksi hakemistoihin täytyy olla sekä luku- että suoritusoikeudet. Oikeudet saat tarkistettua hiiren oikealla avautuvasta Properties-kohdasta.
   • Tiedoston oikeuksien muuttamisen voit tehdä myös UNIX-koneella chmod-komennon avulla.
4. SFTP:n saat halutessasi kotikoneellesi SSH2-paketin mukana.

SCP2

SCP2 on komentoriviltä toimiva Secure File Transfer Clientiä vastaava ohjelma tiedostojen turvalliseen kopiointiin koneiden välillä.

1. Aukaise Command Prompt
2. Siirry U:\tietoverkot\-hakemistoon.
3. Kopioidaan koko demo2-hakemisto www-palvelimelle kirjoittamalla:

   
   scp2 -r demo2 tunnus@kone.st.jyu.fi:www/tietoverkot/
   

   Ylläoleva rivi kopioi demo2-hakemiston ja kaikki sen alla olevat hakemistot ja tiedostot www-palvelimelle. -r-parametri käskee siirtää kaikki alihakemistot tiedostoineen.

4. Tarkista kopioimiesi tiedostojen ja hakemistojen oikeudet kuntoon. Kaikilla täytyy olla vähintään lukuoikeudet tiedostoihin. Lisäksi hakemistoihin täytyy olla sekä luku- että suoritusoikeudet. Tiedoston oikeuksien muuttamisen voit tehdä UNIX-koneella chmod-komennon avulla.
5. SCP:n saat kotikoneellesi joko SSH2-paketin mukana tai ottamalla Putty SCP:n.

Sivuston toiminnan ja esteettömyyden kokeileminen

1. Nyt voit kokeilla sivujen toimintaa WWW-palvelimella siirtymällä selaimella osoitteeseen:

   http://www.cc.jyu.fi/~kayttajatunnus/tietoverkot/demo2/

2. Jos selain valittaa, että sivua ei saa lukea (Access Denied), niin muuta tiedostojen ja hakemistojen oikeudet kuntoon. Oikeuksien muuttamisesta kerrottiin edellä sivujen siirtämisen yhteydessä.
3. Kokeile sivustosi linkkien toiminta ja kuvien näkyminen ja korjaa virheet. Linkeissä tai kuvissa voi olla vikana seuraavia asioita:
   • Tiedostojen ja hakemistojen nimissä isoilla ja pienillä kirjaimilla on eroa Unix-koneessa!
   • Sisäisissä linkeissä tai kuvan paikassa ei saa olla absoluuttisia hakemistoviittauksia vaan niiden täytyy olla suhteellisia.
4. Kokeile sivustosi toimintaa myös jollakin toisella selaimella. Jos sivustosi linkit tai kuvat eivät toimi jostakin syystä samalla tavoin, niin yritä korjata virheet.
5. Validoi koko tekemäsi sivusto kerralla WDG:n HTML validaattorilla. Validaattori löytyy osoitteeseesta <URL http://www.htmlhelp.com/tools/validator/>. Koko sivuston validointi onnistuu antamalla validaattorille sivustosi osoite sekä valitsemalla päälle Validate entire site -ominaisuuden.
6. Tarkista sivustosi jokainen sivu erikseen myös Bobby-esteettömyysvalidaattorilla. Bobbyn löydät seuraavasta osoitteesta: <URL: http://www.cast.org/bobby/>. Mitä Bobby kertoo sivustosi sivuista?

   Seuraavassa lyhyet ohjeet Bobbyn tulkintaan:

   • Tarkistusikkunan yläreunaan listataan tarkistamasi dokumentti. Dokumentin seasta löytyy kysymysmerkkejä, joista pääset hyppäämään Bobbyn huomioihin, joka koskee kyseistä kohtaa dokumentissasi.
   • Tarkistetun dokumentin alapuolelta löytyy tarkistusraportti, joka on jaettu kolmeen eri tasoon. Ensimmäisellä tasolla sijaitsevat vakavimmat esteettömyysongelmat, jotka estävät joitakin käyttäjiä pääsemästä sisältöön käsiksi ollenkaan. Vastaavasti toisella ja kolmannella tasolla olevat virheet aiheuttavat muita pienempiä käytettävyysongelmia.
   • Otsikon "Priority 1 Accessibility" alle on koottu ensimmäisen tason koneellisesti löydetyt ongelmat. Jos ongelmia ei ole, niin otsikon alla on välittömästi ensimmäisen tason käyttäjätarkistukset.
   • Kaikkia ongelmia ei voida tarkistaa koneellisesti, joten myös käyttäjä joutuu tekemään tarkistuksia. Tarkistettavaan dokumenttiin liittyvät käyttäjän tarkistukset löytyvät "Priority 1 User Checks" -otsikon alta. Dokumenttia erityisesti koskevat käyttäjätarkistukset erottaa tarkistuksen yhteyteen lisätyistä rivinumeroista. Osa käyttäjätarkistuksista on yleisiä ja aiheettomia, mutta ne kaikki kannattaa käydä ajatuksella läpi. Tarkemmin tarkistuskohtaan voi tutustua tarkistuskohdan linkin avulla tai kurssin luentomonisteen avulla (sivu 159).
   • Edelliset kohdat pätevät myös tarkistustasoille 2 ja 3.
7. Korjaa vähintään kaikki Bobbyn koneellisesti löytämät esteelliset kohdat sivustossasi.
8. Bobby tarkistaa sivuston verkkosisällön saavutettavuusohjeiden perusteella.
9. Voit kokeilla myös Wave-tarkistinta tekemääsi sivustoon sivuihin. Wave löytyy seuraavasta osoitteesta: <URL: http://www.temple.edu/inst_disabilities/piat/wave/>. Mitä Waven perusteella selviää sivujesi esteettömyydestä?

Dokumetin ulkoasun muokkaaminen

Seuraavissa tehtävissä muokataan valmiin dokumentin ulkoasu tehtävien mukaisesti. Käytä tehtävissä apunasi kurssin luentomonistetta tai WDG:n opasta CSS1:n ominaisuuksista. Opas löytyy seuraavasta osoitteesta:<URL: http://www.htmlhelp.com/reference/css/properties.html>.

1. Käynnistä HTML-kit ja avaa siihen uusi HTML-dokumentti.
2. Kopioi viruksia käsittelevän dokumentin lähdekoodi uuden dokumentin pohjaksi.
3. Tallenna dokumentti hakemistoon U:\tietoverkot\demo3\ nimelle virukset.html . Seuraavissa tehtävissä muokataan virusdokumentin ulkoasua CSS-tyylitiedoston avulla.
4. Aloita uusi tiedosto CSS-dokumenttia varten ja tallenna se nimellä virukset.css .
5. Korjaa tallentamaasi virukset.html tiedostoa siten, että se ottaa tyylimäärittelyt tiedostosta virukset.css
6. Katso miltä virukset.html tiedosto näyttää ilman tyylinmäärittelyjä selainikkunassa. Jokaisen tehtävän jälkeen kannattaa käydä katsomassa mitä tekemäsi tyylinmäärittelyt ovat vaikuttaneet. Yritä siis ymmärtää jokainen määrittelemäsi ominaisuus ja sen toiminta! Tyylimäärityksiä kannattaa käydä katsomassa myös useammassa selaimessa (Esim. IE, Mozilla, Opera)!
7. Lisää tyylitiedostoon body-tyyli, jossa on seuraavat ominaisuudet:
   • Määritä kirjasimen väriksi jokin tumma väri ja taustaväriksi jokin vaalea väri. (esim. #333333 ja #fff5e5)
   • Määritä kirjasintyypiksi jokin päätteetön kirjasin ja yleiseksi kirjasinperheeksi päätteetön kirjasin eli sans-serif. Päätteettömiä kirjasintyyppejä ovat esimerkiksi Verdana, Arial, Helvetica. Näytöltä luettavassa tekstissä kannattaa käyttää päätteetöntä kirjasinta, koska se erottuu paremmin.
   Tarkista selainikkunassa kuinka dokumentin ulkoasu on muuttunut!
8. Lisää tyylitiedostoon h1-tyyli, jossa on seuraavat ominaisuudet:
   • Määritä kirjasimen kooksi (font-size) kaksi (2) kertaa oletuskirjasimen koko (em).
   • Määritä kirjainten välistykseksi 0.1 kertaa oletuskirjasimen koko (letter-spacing).
   • Määritä, että teksti näytetään isoina kirjaimina (text-transform).
   • Määritä otsikon tasaus keskitetyksi (text-align).
   Tarkista selainikkunassa kuinka dokumentin ulkoasu on muuttunut!
9. Lisää tyylitiedostoon h2-tyyli, jossa on seuraavat ominaisuudet:
   • Määritä kirjasimen kooksi 1.5 kertaa oletuskirjasimen koko.
   • Määritä otsikon alapuolelle raja, jolle voit määrittää värin ja tyylit itse.
   Tarkista selainikkunassa kuinka dokumentin ulkoasu on muuttunut!
10. Lisää tyylitiedostoon p-tyyli, jossa on seuraavat ominaisuudet:
    • Määritä kirjasimen kooksi sama kuin oletuskirjasimen koko.
    • Määritä kappaleelle marginaaleiksi kaksi kertaa oletuskirjasimen koon verran.
    • Määritä tekstikappaleen tasaus molempiin reunoihin.
    • Määritä rivinkorkeudeksi 1.5 kertaa oletuskirjasimen verran (line-height).
11. Lisää tyylitiedostoon strong-tyyli, jossa on seuraavat ominaisuudet:
    • Määritä kirjasimen väriksi jokin tekstinväristä poikkeava väri (esim. #333333) ja taustaväri läpinäkyväksi (transparent).
    • Määritä kirjasimelle lihavointi (font-weight).
12. Lisää tyylitiedostoon .url-tyyli, jota käytetään WWW-osoitteiden kirjoittamisessa ja jossa on seuraava ominaisuus:
    • Anna kirjasintyypiksi Courier ja yleiseksi kirjasinperheeksi tasavälinen kirjasin eli monospace.
13. Määrittele tyylitiedostoon linkkien värit seuraavasti:
    • Määrittele vierailemattoman linkin (a:link) tekstin väriksi sininen ja taustaväri läpinäkyväksi.
    • Määrittele vieraillun linkin (a:visited) tekstin väriksi 800080 ja taustaväri läpinäkyväksi.
    • Määrittele aktiivisen linkin (a:active) tekstin väriksi punainen ja taustaväri läpinäkyväksi.
    • Määrittele kohdistetun linkin (a:hover) tekstin värit päinvastaisiksi kuin body-tyylissä. Poista samalla alleviivaus kohdistetusta linkistä (text-decoration). Kokeile millainen kohdistetun linkin luettavuus on tekemilläsi määrittelyillä.
14. Lisää tyylitiedostoon .toc-tyyli sisällysluetteloa varten. Tee tyyliin seuraavat ominaisuudet:
    • Aseta tyylin leveydeksi 25% (width).
    • Siirrä sisällysluettelo selainikkunan oikeaan reunaan (float).
    • Kasvata hieman sisällysluettelon vasenta marginaalia.
    • Muuta sisällysluettelon taustaväri hieman toiseksi kuin dokumentin taustaväri.
    • Määritä tyylille rajan ominaisuudet joka puolelle.
    • Pienennä tyylin kirjasimen kokoa hieman.
15. Validoi tyylilomakkeesi ja tee tarvittavat korjaukset.
16. Jos sinulle jäi vielä aikaa, niin tee myös lisätehtäviä.

Lisätehtäviä

Seuraavissa lisätehtävissä jatketaan edelleen tyylitiedoston kehittämistä.

1. Sisällysluettelo ei ole tällä hetkellä paras mahdollinen, joten siihen täytyy tehdä pieniä muutoksia. Tee ensin seuraavat muutokset, jonka jälkeen voit kehittää itse sisällysluetteloa entistä selvemmäksi.
2. Määrittele asiayhteyden mukaan määrittyvä tyyli sisällysluettelon otsikkoon ja anna sille vähintään seuraavat ominaisuudet.
   • Poista alapuolella oleva raja.
   • Keskitä teksti.
   • Poista kappaleen marginaalit ja täyteet.
3. Määrittele asiayhteyden mukaan määrittyvät tyylit sisällysluettelon listojen eri tasoille. Ainakin seuraavia listojen ominaisuuksia kannattaa muuttaa.
   • Marginaalit.
   • Täytteet.
   • Listamerkit.
4. Halutessasi voit vielä kokeilla tehdä sisällysluettelosta "kolmiulotteisen" muuttamalla sisällysluettelon rajojen värejä.
5. Mieti myös kuinka saisit sisällysluettelon linkeistä poistettua alleviivauksen? Halutessasi voit myös poistaa alleviivauksen.
6. Korjaa edellä tekemäsi tyylitiedosto sellaiseksi, että se menee varoituksetta läpi WDG CSSCheckUp validaattorista. Tarkista onko validaattorissa Include Warnings kohta valittuna. Varoituksissa tulee ilmi erilaisia yhteensopivuusongelmia. HTML-kitissä on pikakuvake tähän validaattoriin, mutta varoitukset eivät tule näkyviin siinä. Seuraavassa linkit validaattorin sivuille:
   • CSS CheckUp -validaattori, jolla voidaan tarkistaa tiedostot suoraan kovalevyltä, sijaitsee osoitteessa http://www.htmlhelp.com/tools/csscheck/upload.html
   • CSS Check -validaattori, jolla voidaan tarkistaa WWW:ssä oleva tiedosto, sijaitsee osoitteessa http://www.htmlhelp.com/tools/csscheck/
7. Tutustu W3C:n Core Style Sampler -sivustoon.
8. Tutki mitä Bobby kertoo seuraavista WWW-sivuista:
   • Jyväskylän kaupunki
   • VR
   • Jyväskylän yliopisto
   Yritä ymmärtää miksi Bobby valittaa tietyistä asioista. Lue tarvittaessa Bobbyn antamat opastukset valituksistaan. Vertaa Bobbyn kommentteja kurssimonisteesta löytyvään lukuun sivulta 159 alkaen.