Vaihe 2 - Toteutus

• Tiivistelmä harjoitustyön vaatimuksista
• Harjoitustyön sisältö
  • Aloitussivu
  • Sisältösivut
  • Valintalomake
  • Palautelomake
  • Sivuston kaikki sivut
• HTML-dokumenttien tekniset vaatimukset
  • Dokumenttien rakenne ja validiteetti
  • Dokumentin ulkoasu
  • Käytettävyys ja esteettömyys
  • Lomakkeet
  • Palvelinasetukset ja metatiedot
• Harjoitustyön hyväksyttäminen

Kun harjoitustyön suunnitelma on hyväksytty, voidaan harjoitustyö toteuttaa tehdyn suunnitelman mukaisesti. Seuraavissa luvuissa ei perehdytä harjoitustyön tarkkaan toteuttamiseen, vaan ainoastaan harjoitustyön sisällöllisiin, teknisiin ja ulkoasullisiin vaatimuksiin.

Tiivistelmä harjoitustyön vaatimuksista

Varsinaiset vaatimukset löytyvät tämän kappaleen jälkeen. Tässä kooste vaatimuksista ja linkit kyseistä asiaa käsitteleviin luentoihin ja demoihin:

• Vähintään kolmitasoinen hakemistorakenne (Demo 1, Luento 1, Luento 12)
• Vähintään kuusi (6) aiheeseen liittyvää sisältösivua esim. etusivu, tuotteet-sivu, yksittäisiä tuotesivuja, tilaussivu, palautesivu. (Demo 1, Luento 1)
• Kaikki sivut XHTML 1.1 -määrittelyn mukaisia (Demo 1, Luento 1)
• Sivujen rakenne merkitty järkevästi (Demo 1, Luento 1)
• Kullekin sivulle tekijän nimi, sivun päivitysaika ja linkki kurssin kotisivulle (Demo 7, Luento 10)
• Sivuille navigointipalkki, jossa linkit sivuston pääkohtiin (Demo 1, Demo 2, Demo 7, Luento 2, Luento 3)
• Sivustonavigointi ja dokumenttien väliset suhteet (Demo 6, Luento 8)
• Ulkoasu skaalautuva ja yhtenäinen (Demo 2, Demo 5, Luento 2, Luento 3, Luento 6).
• Sivun ulkoasun asemointi (Demo 5, Luento 6)
• Tuki eri medioille (Demo 4, Luento 3)
• Lomake, jossa erityyppisiä valintaelementtejä ja ryhmittelyt (Demo 3, Demo 7, Luento 4, Luento 5)
• Palautelomake (Demo 3, Demo 7, Luento 4, Luento 5)
• Noudattaa käytettävyys- ja esteettömyyssuosituksia (Demo 6, Demo 8, Luento 8)
• Oikeat MIME-tyyppimääritykset sivuston tiedostoille (Demo 7, Demo 8, Luento 10)
• Vähintään yksi (1) (Demo 7, Demo 8, Luento 10)
  • salasanasuojattu sivu
  • edelleenohjaus sivulta toiselle (ei etusivu!)
  • monikielinen sivu (ainakin etusivu)

Harjoitustyön sisältö

HTML-dokumentissa aihetta täytyy käsitellä riittävällä laajuudella, jolloin työn lukijalle selviää työn tarkoitus. Esimerkiksi WWW-kauppapaikkaa rakennettaessa on tuotteiden esittely tehtävä riittävän selkeästi tekstiä ja kuvia hyväksikäyttäen.

Tekstin on oltava omaa, joten valmiiden WWW-sivujen kopiointi ei luonnollisestikaan ole luvallista. Tekstin on oltava kieliopillisesti oikein.

Seuraavassa kokonaisuuksiin jaettuja listoja harjoitustyöltä vaadituista sisällöllisistä ominaisuuksista.

Aloitussivu

• Aloitussivulta täytyy yhdellä silmäyksellä selvitä mikä on sivuston tarkoitus ja päästä selkeästi etenemään muille sivuille. "Kynnysmattoja" ei saa käyttää!
• Aloitussivulla täytyy selkeästi käydä ilmi sivuston tekijän nimi ja sähköpostiosoite.

Sisältösivut

• Sivuston tarkoitukseen soveltuvia, varsinaista asiaa sisältäviä sivuja täytyy olla vähintään kuusi (6) kappaletta. Sivustolta on löydyttävä vähintään etusivu, palautesivu ja tilaussivu. Muut sivut voivat olla esimerkiksi toteutettuja tuote- tai organisaation esittelysivuja.
• Tuotteiden tai organisaation toiminnan esittely on tehtävä riittävän pienissä kokonaisuuksissa ja erillään tilauksesta tai palautteesta.
• Kaikkien harjoitustyössä olevien kuvien käyttämiseen pitää olla asianmukainen lupa.

Valintalomake

• Sivustolla on oltava erillinen lomake, joka liittyy sivuston toimintaan ja aihepiiriin. Esimerkiksi WWW-kaupassa lomakkeella voitaisiin tilata tuotteita ja jonkun organisaation sivuilla ilmoittautua mukaan toimintaan, liittyä jäseneksi tai pyytää lisätietoja.
• Lomakkeella on käytettävä yksiselitteisiä valintavaihtoehtoja ja pyrittävä välttämään avoimien tekstikenttien käyttöä (näitäkin tarvitaan esim. osoitetietojen kyselemiseen).
• Lomakkeen käsittelyyn on käytettävä joko kurssin opettajien tekemää tai omaa palvelimella ajettavaa ohjelmaa.
  • Valmis CGI-ohjelma on konfiguroitava lähettämään lomaketiedot omaan sähköpostiosoitteeseen ja ohjelman toimivuus on testattava.
  • Oman ohjelman on käsiteltävä asianmukaisesti lomakkeen tiedot esimerkiksi lähetettämällä ne sähköpostilla tekijälle tai tallentamalla ne tiedostoon/tietokantaan. Tarkastajan on pystyttävä toteamaan ohjelman toimivuus. Ohjelma voi esimerkiksi lähettää käsitellyt tiedot sähköpostilla lomakkeen täyttäjän email-osoitteeseen. Jos tallennus tehdään tiedostoon, niin kerro tarkastajalle missä tiedosto sijaitsee. Tietojen lähetyksen onnistumisesta kertova sivu on myös tehtävä (vrt. CGI-ohjelman "Kiitos palautteestasi" -sivu). Nämä ohjeet koskevat siis vain niitä, jotka haluavat itse ohjelmoida lomakkeenkäsittelijän!

Palautelomake

• Palautelomake kannattaa toteuttaa kokonaan erillisenä kokonaisuutena. Lomakkeen kautta on tarkoitus mahdollistaa erilaiset yhteydenotot sivuston tekijään, yritykseen tai järjestöön.
• Palautelomakkeen käsittelyyn on käytettävä joko kurssin opettajien tekemää tai omaa palvelimella ajettavaa ohjelmaa.

Sivuston kaikki sivut

Jokaiselta sivulta täytyy löytyä seuraavat asiat:

• Sivun tekijän tai päivittäjän nimi sekä sivun päivitysaika.
• Alla oleva maininta, josta linkki kurssin kotisivulle.

  WWW-julkaiseminen -kurssin harjoitustyö

  <a href="http://appro.mit.jyu.fi/www/" 
     title="WWW-julkaiseminen">WWW-julkaiseminen</a> -kurssin harjoitustyö

• Jokaisella sivulla on oltava navigointipalkki, jonka avulla sivuston pääkohtien välillä voidaan liikkua joustavasti. Jokaiselta sivulta täytyy päästä ainakin jokaisen päätason aloitussivulle. Linkit eivät vie siis suoraan yksittäisen sisältösivuun. Navigointipalkin on oltava samanlainen kaikilla sivuilla yhtenäisyyden ja käytettävyyden takia.

HTML-dokumenttien tekniset vaatimukset

Harjoitustyön dokumenteille asetetaan seuraavat tekniset vaatimukset:

Dokumenttien rakenne ja validiteetti

• Dokumenttien on oltava XHTML 1.1 määrittelyn mukaan tehty. Jokaisessa dokumentissa täytyy siis olla oikea dokumenttityypin määrittely.
• Dokumenttien sisältämiä HTML-elementtejä täytyy käyttää rakenteellisesti oikein niiden merkityksen mukaan. Esim.
  • otsikot pitää merkitä h1 - h6 -elementeillä eikä vain kirjasinkokoa muuttamalla!
  • br-elementtiä saa käyttää vain rivinvaihtojen tekemiseen eikä tyhjän tilan tuottamiseen!
  • Sivun ulkoasua ei saa yrittää muotoilla taulukoilla
• Sivuston sisäiset hyperlinkit on määriteltävä suhteellisina. Poikkeuksena sivuston kaikille sivuille yhteiset navigointilinkit.
• Kaikkien dokumenttien täytyy mennä läpi ilman virheitä ja varoituksia W3C:n HTML-validaattorista:
  • W3C HTML Validation Service <URL: http://validator.w3.org/> .
• Dokumentin ulkoasun muotoiluun käytetyn CSS-tiedoston on läpäistävä toinen seuraavista CSS-tarkistajista ilman virheitä ja varoituksia (Warnings: All):
  • W3C CSS Validation Service <URL: http://jigsaw.w3.org/css-validator/validator-uri.html>
  • WDG CSSCheck <URL: http://www.htmlhelp.com/tools/csscheck/>
  • Validaattorit eivät ymmärrä standardin mukaista handheld-mediatyyppiä. Voitte ohittaa näihin liittyvät varoitukset!

Dokumentin ulkoasu

• Sivuston ulkoasun on oltava selkeä ja yhtenäinen koko sivustolla.
• Koko sivuston ulkoasun muotoilu on tehtävä käyttäen yhtä (1) koko sivustolle yhteistä CSS-tiedostoa. Tyylimäärityksiä ei saa upottaa XHTML-koodiin (style-elementeillä tai -attribuuteilla).
• Sivuston on näytettävä järkevältä valtaselaimilla
  • Internet Explorer 6.0 tai uudempi
  • Mozilla 1.4 tai uudempi
  • Opera 7.23 tai uudempi
  ja tekstiselaimilla
  • Lynx - Unix-koneilla
  • http://appro.mit.jyu.fi/haku/html.shtml - työkaluja, joilla voit testata sivun toimintaa tekstinäkymässä
  sekä ääni- ja mobiiliselaimilla vähintään niin, että sivuston sisältö on saavutettavissa. Sivuston ulkoasun ei siis tarvitse olla täsmälleen samanlainen kaikilla selaimilla.
• Sivustolle on määriteltävä omat CSS-asetukset print- ja handheld-medioille. Näiden toiminta voidaan testata käyttämällä selainten Print Preview -toimintoa sekä Operan Small Screen Rendering -tilaa (SHIFT+F11) n. 200 pikseliä leveässä selainikkunassa. Operan lisäksi mobiiliympäristöä voi testata Nokia Mobile Browser Simulator 4.0:n selaimella. Tarvitset myös WAP Gateway Simulatorin.
• Sivun ulkoasun on järkevästi skaalauduttava käyttäjän selaimen asetuksien (kirjasinkoon, selainikkunan koon) mukaan.
• Sivun osat on asemoitava käyttäen CSS:n float- tai position-ominaisuuksia. Asemointia kannattaa testata eri selaimissa, sillä selaimien CSS-tuki saattaa olla puutteellinen.

Käytettävyys ja esteettömyys

• Dokumenttien on täytettävä W3C:n Web Content Accessibility Guidelines 2.0 luonnoksen ja Web Content Accessibility Guidelines 1.0 suosituksen vaatimukset dokumentin esteettömyydestä. Jos WCAG 1.0 ja WCAG 2.0 menevät joiltain osin ristiin niin dokumentti on toteutettava WCAG 1.0:n mukaan.
  • Lyhyt tarkistuslista vaatimuksista löytyy dokumentista List of Checkpoints for Web Content Accessibility Guidelines 1.0
  • Apuna voit myös käyttää WCAG 1.0:n suomennettua versiota verkkosisällön saavutettavuusohjeet
  • Vaatimuksien täyttyminen voidaan tarkistaa myös osittain koneellisesti käyttäen Nettipoliisia. Nettipoliisin kaikki valitukset kannattaa selvittää perusteellisesti. Lisäksi joitakin asioita harjoitustyön tekijän täytyy tarkistaa itse. Tässä apuna voi käyttää luennon 8 materiaalia. Sivuston esteettömyyttä kannattaa testata myös teksti-, ääni- ja mobiiliselaimilla mikäli mahdollista:
    • Home Page Reader - kokeiluversiolla 30 päivän aikaraja
    • Simply Web 2000 - ei tue Windows XP:tä
    • Nokia Mobile Simulator - lataa myös WAP Gateway, jota tarvitaan internet-yhteyteen
    • Opera - small screen rendering -tilassa
    • Lynx - SSH:lla yhteys ATK-keskuksen palvelimeen ja komento lynx
• Sivuston on toimittava myös ilman CSS:ää.
• Sivun toiminta ei saa riippua Javascript-, VBScript- Java-, tai muista erikoisista -viritelmistä. Video-, ääni- ja multimediasovellukset eivät saa estää sivuston toimintaa tai käyttäjän pääsyä sivuston sisältöihin.
• Dokumenteissa käytettävät kuvat eivät saa olla liian suuria. Hyväksyttävä maksimikoko yhdelle kuvalle on 800x600 pikseliä. Levytilaa yksittäinen kuva saa viedä enintään 50 kilotavua. Kuvissa on käytettävä kuvatyyppiin soveltuvaa formaattia (jpg valokuville, png kaaviokuville).
• Navigointilinkeille on määriteltävä pikanäppäimet accesskey-ominaisuudella.

Lomakkeet

• Valintalomakkeella on käytettävä vähintään kolmea (3) erilaista lomake-elementtiä tietojen lähettämispainikkeen lisäksi.
• Jokaiselle lomake-elementille on määriteltävä oma label-elementti. Jokaiselle label-elementille on määriteltävä accesskey-ominaisuus. Kullekin lomake-elementille (input, select, textarea) on määriteltävä oletusarvo ja tabindex-ominaisuus.
• Lomakkeella on käytettävä ryhmittelyjä. Lomakkeen osat on ryhmiteltävä fieldset- ja legend-elementeillä. select-elementtiä käytettäessä vaihtoehdot on ryhmiteltävä optgroup-elementillä.

Palvelinasetukset ja metatiedot

• Sivuston jokaiselle sivulle on määriteltävä sivustonavigointi käyttäen link-elementtejä:
  • Jokaiseen sivuun vähintään viite etusivuun:
    • <link rel="Start" ...>
  • Mikäli loogisesti mahdollista, on lisättävä link-elementti ensimmäiseen, viimeiseen, edelliseen ja seuraavaan dokumenttiin sekä edelliselle tasolle ja sisällysluetteloon:
    • <link rel="Prev" ...>
    • <link rel="Next" ...>
    • <link rel="Contents" ...>
    • <link rel="Parent" ...>
    • <link rel="First" ...>
    • <link rel="Last" ...>
• WWW-palvelimen on jaettava XHTML-dokumentit käyttäen oikeaa MIME-tyyppiä (application/xhtml+xml) niille selaimille jotka tätä tyyppiä ymmärtävät. Mikäli palvelin jakaa muitakin tiedostoja, niin näidenkin MIME-tyypit on asettava kohdalleen. Ohjeet demossa 8. Valitettavasti tätä vaatimusta ei juuri nyt pysty toteuttamaan kunnolla atk-keskuksen bugisen www-palvelimen takia. Tehkää ratkaisu demon mukaan mutta älkää välittäkö nettipoliisin huomautuksista tässä asiassa.
• Sivustolla on esimerkinomaisesti käytettävä salasanasuojausta vähintään yhdessä kansiossa. Salasanasuojatun kansion sisältöön on päästävä käyttäjätunnuksella ope ja salasanalla ope.
• Vähintään yhdelle sivulle on toteutettava väliaikainen edelleenohjaus (HTTP-koodi 302) toiselle sivulle. Etusivulla ei saa kuitenkaan olla edelleenohjausta. Edelleenohjaus ei saa myöskään tuottaa käytettävyysongelmia.
• Sivustolle on luotava valmius monikielisyyteen. Vähintään sivuston etusivu pitää olla saatavilla sekä englanniksi että suomeksi. Kielen valinnan on toimittava selainasetusten perusteella. Tämän lisäksi sivulta on löydyttävä tavallinen linkki toiseen kieliversioon.
• Sivustolla käytettävä merkistö on oltava ISO-8859-1. Myös WWW-palvelimen on ilmoitettava oikea merkistö.
• Palvelinpuolen tekniikoita (SSI, CGI, PHP, ASP, JSP) voi hyödyntää toistuvien tietojen ja navigoinnin lisäämiseen. Sivustolle saa toteuttaa niin halutessaan myös dynaamisia ja vuorovaikutteisia sovelluksia. Nämä eivät kuitenkaan kuulu harjoitustyön vaatimuksiin. Sovelluksessa ei saa käyttää näkyviä muuttujia (mm. hakukoneiden takia). Jos sovelluksen on tallennettava tietoja, niin toteutus on tehtävä sessioilla. Sivuston validiteetti pitää olla parametreista huolimatta helposti todennettavissa.

Harjoitustyön hyväksyttäminen

• Siirrä sivustosi ATK-keskuksen people-palvelimen www-kansioon, http://people.cc.jyu.fi/~tunnus/hakemisto/ -osoitteesta toimivaksi.
• Tarkista harjoitustyösi kaikki sivut tarkistusohjelmalla ja testaa vaatimuksissa olevilla selaimilla.
• Ongelmatapauksissa lue kurssin FAQ (usein kysytyt kysymykset), kertaa luento- ja demosivut tai ota yhteyttä harjoitustyösi ohjaajaan.
• Jos et saa valituksia nettipoliisilta ja olet katsonut että harjoitustyö täyttää vaatimukset, niin voit palauttaa harjoitustyösi tarkistettavaksi vaiheen 2 palautuslomakkeella.