Salasanasuojaus, esteettömyys ja vieraskirja - Demo 8
Mallivideot
- salasanasuojaus.wmv 2.7M
- ruudunlukija.wmv 8.7M
- suurennusohjelma.wmv 12.1M
- vieraskirja.wmv 16.1M
Ongelmia videon katselussa?
Demoissa käsitellään WWW-sivun salasanasuojausta, WWW-sivuston esteettömyyttä sekä testaillaan sivustoa erilaisilla selaimilla ja tehdään vieraskirja.
Salasanasuojaus
Yksittäinen kansio ja sen alikansiot on helppo suojata salasanalla.
- Suojataan Nanonanon dokumentit salasanalla. Lisää artikkelit-kansioon
.htaccess-tiedosto ja kirjoita sinne:
AuthUserFile /foo/bar/tunnus/html/www/artikkelit/.users AuthGroupFile /dev/null AuthName ByPassword AuthType Basic <Limit GET> require valid-user </Limit>
AuthUserFile-kohtaan annettava polku on oltava WWW-palvelimella toimiva ja sen on osoitettava salasanatiedostoon. Oikean polun alun voi tarkistaa jalava.cc.jyu.fi-koneessa kirjoittamalla siellä echo $HOME.
[anjoekon@jalava ~]$ echo $HOME /home1/137/anjoekon
Saatuun polkuun pitää vielä lisätä html-kansio ja sen mahdolliset alikansiot. Esim.
/home1/137/anjoekon/html/www/artikkelit/.users
- Luo artikkelit-hakemistossa käyttäjätunnus ja salasana komennolla:
htpasswd -c .users tunnus
- Jos sinulla ennestään on jo olemassa .users-tiedosto ja haluat lisätä siihen tunnuksia, niin komento on:
htpasswd .users tunnus
- Kokeile kysyykö selain tunnusta ja salasanaa.
- Tarkemmin hakemistojen suojaamisesta voi lukea Tietohallintokeskuksen ohjeesta.
Esteettömyys
Seuraavissa tehtävissä keskitytään parantamaan sivujen käytettävyyttä heikkonäköisille ja sokeille.
Ruudunlukija
Kuuntele (jos mahdollista) ääniselaimen nauhoite (n. 3 min). Pohdi, mikä yksittäinen asia aiheuttaa suurimman käytettävyysongelman. Nauhoitteessa selataan edellisissä demoissa tehtyä Nanonanon sivustoa seuraavasti:
- Luetaan Nanonanon etusivu yhteystietoihin asti.
- Valitaan Opiskelu-linkki. Kuunnellaan opintosuoritteen alkuun asti.
- Valitaan navigointipalkista Artikkelit. Kuunnellaan sivun sisältö.
- Valitaan IT ja tietoliikenne -artikkeli. Kuunnellaan jonkin aikaa artikkelin alkua.
Kotikoneella voit kokeilla asentaa jonkin ruudunlukijan demoversion ja testata käytännössä miten ääniselailu toimii. Älä käytä hiirtä, vaan käytä ainoastaan näppäimistöä. Ruudunlukijoiden ohjeista löytyvät tarvittavat pikanäppäimet. Ainakin seuraavista ohjelmista on saatavilla ilmaisversiot:
- NVDA (NonVisual Desktop Access)
- Ilmainen avoimen lähdekoodin ruudunlukija.
- Dolphin SuperNova Access Suite
- Sisältää myös ruudunsuurentajan ja värikontrastien säätömahdollisuuden.
- Demoversion poistamisen jälkeenkin koneeseen voi jäädä taustalle Dolphin-palvelu, jonka voi käydä poistamassa valinnalla Start | Settings | Control Panel | Adminstrative Tools | Services, napauttamalla oikealla Dolphin Utility Service, valitsemalla Properties ja sieltä Startup-kohtaan Disabled.
- JAWS
- Demoversion aikaraja on 40min! :(
Ongelmakohdat
Ääniselailutestissä nousee esiin ainakin kaksi ongelmaa:
- Jokaisella sivulla on dokumentin alussa navigointipalkit, jotka joudutaan kuuntelemaan aina uudelleen.
- Sama otsikko toistuu useasti (
title
,navbartop
,h1
).
Hyppylinkki
- Avaa Nanonanon etusivu editoriin. Merkitse ensimmäinen varsinainen tekstikappale
id
-ominaisuudella ja keksi tunnisteteksti. - Lisää aivan dokumentin (
body
-elementin) alkuun uusidiv
-lohko ja sen sisälle teksti "Siirry pääsisältöön". - Merkitse teksti sisäisellä linkillä ja laita se osoittamaan ensimmäiseen tekstikappaleeseen.
- Oikeastaan linkkiteksti pitäisi tehdä vain tekstistä "pääsisältö", koska linkkitekstin pitäisi kuvata kohdettaan. Vielä parempi olisi, jos linkkiteksti kuvailisi todella sivun sisältöä, koska sivukontekstista irrotettuna "pääsisältö" ei oikein kuvaa mitään. Ohitamme kuitenkin ongelman tulevien muutosten takia.
- Nyt ääniselaimella luettaisiin vain
title
ja tämän jälkeen käyttäjä pääsisi suoraan lukemaan sisältöjä. Miten ääniselailija pääsee navigointipalkkiin? Kuuntelemalla ensin murupolkunavigoinnin kaikki kohdat. Lisää siis samaan diviin toinenkin hyppylinkki "Siirry päälinkkeihin". Muista merkitä navigointipalkkiid
:llä. Huomaa, että edellisissä demoissa navigointipalkki siirrettiin navbar.include-tiedostoon. - Normaalisti näkevälle käyttäjälle tällaiset hyppylinkit ovat kuitenkin
tarpeettomia, ainakin isolla ruudulla. Piilotetaan hyppylinkit seuraavalla
tempulla:
- Tallenna 1x1transparent.png-kuva
W:\www\
-hakemistoon. - Laita linkkitekstien tilalle kuva
img
-elementillä ja sijoita Siirry-tekstitalt
-ominaisuuksien arvoksi. - Nyt ruudunlukijat lukevat
alt
-tekstit, mutta pieni läpinäkyvä kuva ei näy graafisissa selaimissa.
- Tallenna 1x1transparent.png-kuva
- Anna vielä
div
-lohkolle ominaisuusclass="hyppylinkit"
. Tee vielä demo2.css:ään seuraavat muutokset:- Poista hyppylinkit-lohkolta marginaalit ja paddingit. Aseta lohkon kooksi (sekä leveys että korkeus) 1px.
- Poista hyppylinkit-lohkon sisällä olevalta
img
-elementiltä reunus. - Poista navbartop-lohkolta
margin-top
.
- Voit tehdä vastaavat tyylimuotoilut myös mobiili.css-tiedostoon.
Miksi näin vaikeasti? Miksei CSS:n display: none;
tai visibility: hidden;
ominaisuuksilla
piilottaa hyppylinkin sisältävää lohkoa? Vastaus: useimmat ruudunlukijat eivät lue
tarkoituksella piilotettuja elementtejä, kts. Jim Thatcher: Skip Navigation.
Taulukot
Taulukoista voi olla vaikea hahmottaa äänen perusteella mikä tieto liittyy mihinkin
otsikkotietoon, ellei niitä ole erikseen scope
- ja axis
-ominaisuuksilla määrätty.
- Avaa
opiskelu
-dokumentti. Tee demo2:n taulukko-lisätehtävä, ellet ole jo sitä tehnyt. - Viikonpäivät ovat sarakeotsikoita. Merkitse nämä
th
-elementit ominaisuudellascope="col"
. - Kellonajat ovat riviotsikoita. Merkitse nämä
th
-elementit ominaisuudellescope="row"
. - Samaan ryhmään kuuluvat otsikot pitää merkitä samalla
axis
-ominaisuuden arvolla. Lisää viikonpäiväotsikoille ominaisuusaxis="viikonpaiva"
ja kellonajoilleaxis="kellonaika"
. - Merkitse
table
-elementtisummary
-ominaisuudella (jos et tehnyt sitä jo alunperin demossa 2) ja kerro sen arvossa, mistä taulukossa on kyse.
Lyhenteet
Lyhenteet kannattaa merkitä sopivalla elementillä, jolloin ruudunlukija osaa valita oikean puhetavan ja käyttäjä saa lisätiedon tuntemattomasta lyhenteestä.
- Avaa artikkelit- ja it-hakemistojen dokumentit.
- Merkitse
body
-osan sisällä olevat IT-lyhenteetabbr
-elementillä. - Lisää
abbr
-elementeille ominaisuustitle="Informaatioteknologia"
.- Toisaalta IT on niin hyvin tunnettu lyhenne, että
title
-ominaisuus ei ole välttämätön.
- Toisaalta IT on niin hyvin tunnettu lyhenne, että
Tekstiselain
Tutki miltä Nanonanon sivut näyttävät tekstiselaimessa:
- Avaa käynnistävalikosta Start | All Programs | Putty SSH Tools | Putty SSH Client ja ota yhteys jalava.cc.jyu.fi (tai halava.cc.jyu.fi).
- Kirjoita komentokehotteeseen
lynx http://users.jyu.fi/~omatunnus/www/
- Selaaminen tapahtuu nuolinäppäimillä, välilyönti- ja Enter-näppäimellä. Nuoli vasemmalle 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.
Tekstiselain on hyvä ääniselaimen korvike, sillä se ei käytä CSS:ää ja näyttää dokumentin rakenteen sarjamuotoisena. Itseasiassa tekstiselaimet ovat vieläkin käytössä näkövammaisilla verkon käyttäjillä (ja komentoriviunixguruilla :D).
Suurennusohjelma
Heikkonäköinen saattaa tarvita verkkoselailussa apuohjelmaa, joka suurentaa ruudun kokoa.
- Käynnistä Windowsin oma ruudunsuurentaja valinnalla Start | All Programs | Accessories | Accessibility | Magnifier.
Kasvata suurennetun alueen koko maksimiin alueen alareunaa raahaamalla.
- Dolphin SuperNova Access Suitea käytettäessä voit kokeilla sen omia ruudunsuurennustoimintoja, jotka ovat huomattavasti parempia kuin Windowsin yksinkertainen suurennusohjelma.
- Laita suurennuskertoimeksi 8. Avaa nettiselaimessa Nanonanon sivu. Kokeile navigoida pelkästään suurennetun kuvan avulla sivustolla. Mitä huomaat?
- Sivuston oikeassa laidassa olevaa vakionavigointipalkkia saattaa olla hankala löytää, vaikka tosin yläpalkki johdattelee myös oikeaan laitaan. Parempi olisi, jos peruslinkit löytyisivät selvästi eroteltuna ennen tekstiosaa vasemmasta laidasta. Tehdään heikkonäköisiä varten vaihtoehtoinen tyylitiedosto.
- Ota pohjaksi demossa 5 tehty mobiili.css ja tallenna se uudella nimellä lowvision.css W:\www\-hakemistoon.
- Lisää etusivulle vaihtoehtoinen tyylitiedosto
head
-osaanlink
-elementillä:<link rel="Alternate StyleSheet" href="lowvision.css" type="text/css" title="Heikkonäköiset" media="all" />
- Kokeile ladata sivu uudelleen. Kokeile tuliko vaihtoehtoinen tyylitiedosto valittavaksi. Esim. Mozilla Firefox -selaimessa tyylivaihtoehdot löytyvät valikosta View | Page Style. Vaihda tyyliä valikosta.
- Poista mahdolliset fontin pienennykset. Normaali tekstin koko on sopiva ruudunsuurennosta ajatellen. Erityistä fontin suurennustakaan ei tarvita, koska suurennusohjelma hoitaa asian.
- Laita
body
-osan leveydeksi 40%, jolloin käyttäjän ei tarvitse selailla paljoa oikealle päin suurennusta käytettäessä. - Asemoi hakupalkki murunavigointipalkin oikeaan reunaan.
- Tee vakionavigointipalkista yhtä leveä kuin murunavigointipalkista (100%
bodyn
koosta). Tee vakiolinkkilistan listakohdistainline
-elementtejä, jolloin ne rivittyvät vierekkäin. Tämä siksi, että käyttäjä löytää nopeasti navigoinnin alla olevat sisältötekstit. - Muokkaa värimaailmaa siten, että teksti on valkoista ja tausta täysin mustaa. Navigointipalkit voivat olla myös jotain melko tummaa ja ne on syytä erottaa rajaviivalla tekstiosasta. Tällainen kontrasti on hyvä heikkonäköisille.
- Testaa ruudunsuurentajalla sivua.
Jos toteutit demossa 5 vaihtoehtoisen mobiililaitteiden tyylitiedoston vaihtamisen painikkeiden avulla (JavaScriptiä hyödyntäen), niin voit lisätä vastaavan toiminnallisuuden myös nyt tehdylle heikkonäköisten tyylitiedostolle.
Heikentynyt näkö
Jos käyttäjän näkö on heikentynyt vain vähän (esim. ikääntymisen myötä), niin tällöin voi riittää normaali tekstin suurennus. Sivuston käytettävyys paranee, jos ulkoasu skaalautuu myös tekstin kokoon.
- Avaa selaimeen auki Nanonanon ja nelonen.fi-sivut ja kokeile kasvattaa tekstin oletuskokoa.
- Internet Explorerissa onnistuu valinnalla View | Text Size.
- Tekstin koko ei kasva nelonen.fi-sivustolla, koska IE ei kasvata pikselikoossa määrättyjen tekstien kokoja.
- Mozilla Firefoxissa onnistuu valinnalla View | Zoom. Lisäksi täytyy laittaa päälle valinta
View | Zoom | Zoom Text Only.
- Firefox pakottaa nelonen.fi:n pikselikokoisen tekstin isommaksi. Miten käy sivuston ulkoasulle riittävästi tekstin kokoa kasvatettaessaa?
- Internet Explorerissa onnistuu valinnalla View | Text Size.
- Useissa uusissa selaimissa on Zoom-toiminto. Toiminto toimii samaan
tapaan kuin ruudunsuurennos.
- Firefoxissa onnistuu valinnalla View | Zoom. Nyt valinta View | Zoom | Zoom Text Only EI saa olla päällä, jotta zoomataan koko sivua.
- Operassa onnistuu myös valinnalla View | Zoom. Jos sivusto on tekstin kokoon skaalautuva, niin Opera hyödyntää tätä ensisijaisesti.
- Internet Explorer 8:sta löytyy Zoom-toiminto valinnalla Page | Zoom. Kokeile nelonen.fi-sivuja 200% zoomilla. Millainen käytettävyysongelma ilmenee tällaisilla suurennoksilla?
Värit
Sivustoilla on vältettävä värisokeusyhdistelmiä. Tekstin ja taustan värien kontrasti on oltava riittävä.
- Tarkista Nanonanon sivusto Colorblind Web Page Filter -ohjelmalla.
- Tarkista CSS-tiedostoista, että aina kun olet määrittänyt taustan värin (
background-color
), niin olet määrittänyt myös tekstin värin (color
). Kokeile näiden väriarvojen välisiä kontrastieroja Colour Contrast Analyser -ohjelmalla. - Kokeile tehdä esim. harjoitustyötäsi varten hyvä värivalikoima Color Scheme Designer 3 -työkalulla tai antamasi kuvan perusteella colr.org-palvelulla.
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/
Lisätehtävät
Tee ensisijaisesti muut demotehtävät valmiiksi. Jos aikaa jää, niin tee seuraava tehtävä:
Vieraskirja
Tehdään pienimuotoinen vieraskirja Nanonanon kotisivulle.
- Kopioi artikkelit-alihakemiston index.html vieraskirja-alihakemistoon W:\www\vieraskirja\. Huomaa, että demossa 7 määräsimme kaikki .html-tiedostot prosessoitavaksi SSI-komentojen varalta.
- Poista vieraskirja-sivulta linkit artikkeli-alisivuihin, mutta jätä ylänavigointi, navigointipalkki ja lopussa olevat päivitystiedot paikalleen.
- Täydennä sivupohja kuntoon:
- Korjaa
title
. - Muuta murunavigointipalkin viimeisen listakohdan tekstiksi Vieraskirja.
- Muuta pääotsikon tekstiksi myös Vieraskirja.
- Korjaa
- Lisää otsikon jälkeen form-elementti.
Sijoita lomakkeen
method-attribuuttiin
post ja action-attribuuttiin
http://users.jyu.fi/~omatunnus/cgi-bin/lisays.php
- Lisää lomakkeelle uusi lomakeryhmä (
fieldset
), jonka sisään kolme tekstikenttää: vieraskirjaan kirjoittajan nimeä, sähköpostiosoitetta ja kotisivun osoitetta varten. - Lisää uusi lomakeryhmä, jonka sisään lisää tekstialue kommenttia varten.
- Laita kenttien name-attribuutteihin arvot vkname, vkemail, vkurl ja vkcomment.
- Lisää lomakkeen loppuun submit-painike, jonka name-attribuuttiin arvo vkadd.
- Avaa PuTTY-ohjelma valinnalla Start | All Programs | Putty SSH Tools | Putty SSH Client, ellei se ole jo auki. Ota yhteys jalava.cc.jyu.fi-palvelimeen (tai halava.cc.jyu.fi) ja siirry html-linkin kautta editoimaan users.jyu.fi-sivujasi.
- Jos Unixin käyttö ei ole tuttua, niin ohjeita voit katsoa esim. seuraavalta sivulta: https://wiki.utu.fi/display/oracle/Unix+for+dummies.
- Luo hakemisto cgi-bin (mkdir cgi-bin).
Siirry cgi-bin-hakemistoon ja
kopioi sinne vieraskirjalisäyksen tekevä ohjelma komennolla
wget http://appro.mit.jyu.fi/www/demot/demo8/lisaysphp.txt
- Muuta lisaysphp.txt:n nimeksi
lisays.php (komennolla mv).
- .php-päätteiset tiedostot prosessoidaan automaattisesti PHP-tulkilla users.jyu.fi:ssä.
- Luo cgi-bin-kansioon tyhjä tiedosto data.include
komennolla:
touch data.include
- Anna kaikille oikeus kirjoittaa (chmod a+w) tiedostoon
data.include.
- 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 users.jyu.fi:ssä). Muutenkin sivuston ylläpitäjän on tietoturvasyistä oltava selvillä mitä ohjelma tekee.
- Laitetaan vieraskirjan kommentit näkymään ennen lomaketta.
lisays.php tallentaa lomakkeelta saadut tiedot data.include-tiedostoon.
Käytä SSI:n
include
-komentoa ja lisää data.include-tiedoston sisältö dokumenttiin:<!--#include virtual="/~omatunnus/cgi-bin/data.include"-->
- Testaa, että vieraskirja toimii.
- Voit lisätä linkin vieraskirjaan myös navigointipalkkiin navbar.include-tiedossa, niin vieraskirjaan pääsee jatkossa muiltakin Nanonanon sivuilta.
- Vieraskirjaan lähetetyt tiedot tulevat seuraavassa muodossa
data.include-tiedostoon:
<ul class="vkentry"> <li class="vkname">Antti Ekonoja</li> <li class="vkdate">Tue, 08 Mar 2011 14:15:43 +0200</li> <li class="vkemail">antti.j.ekonoja@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ä vieraskirjamerkinnät näyttävät järkeviltä. Voit tehdä esimerkiksi seuraavanlaisia ulkoasumäärityksiä:- Laita vkentry-lohkolle sopiva taustaväri ja leveys.
- Liu'uta lohkot vierekkäin kuten galleriassa.
- Laita
form
-elementilleclear: left;
, jotta se rivittyy vkentry-lohkojen alapuolelle. - Poista vkentry-lohkolta (lohko on siis lista) listamerkki sekä määritä lohkolle pienet marginaalit ja täytteet.
- Korosta palauttajan nimeä fontin koolla ja halutessasi myös väreillä.
- Pienennä päivämäärätietoa.
- Anna erilaisille listakohdille erilaisia taustavärejä ja muita haluamiasi tyylimäärityksiä.
Käyttäjien kommentit