Harjoitustyön toteuttaminen - Vaihe 2

• Harjoitustyö
• Vaihe 1: Aiheen valinta sekä rakenne- ja ulkoasusuunnitelman tekeminen.
  • Suunnitelman tarkastuttaminen 13.12.2002 mennessä.
• Vaihe2: Varsinaisen harjoitustyön toteuttaminen.
  • Harjoitustyön palauttaminen ja ohjaukseen hakeutuminen 15.1.2003 mennessä.

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.

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. Yliopistossa täytyy osata kirjoittaa omaa äidinkieltään 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 siis saa käyttää!
• Aloitussivulla täytyy selkeästi käydä ilmi sivuston tekijän nimi ja sähköpostiosoite.

Tuotesivut tai organisaation toiminnan esittelysivut

• Toteutettuja tuote - tai esittelysivuja pitää olla vähintään kolme (3) kappaletta.
• 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.

Tilauslomake

• Tilauslomake, jolta voidaan tilata tuotteita, ilmoittautua mukaan toimintaan tai pyytää lisätietoja.
• Tilauslomakkeen pitää olla niin yksikäsitteinen, että tilaaja pystyy tilaamaan ainoastaan niitä tuotteita, joita on myytävänä. Vapaita tekstikenttiä kannattaa käyttää ainoastaan erilaisten lisätietojen kysymiseen!
• Tilauslomakkeen käsittelyyn on käytettävä joko kurssin opettajien tekemää tai omaa CGI-ohjelmaa.
• Tarkemmat ohjeet opettajien tekemän CGI-ohjelman käytöstä löytyvät osoitteesta:

  http://appro.mit.jyu.fi/laheta/

Palautelomake

• Palautelomake kannattaa toteuttaa kokonaan erillisenä kokonaisuutena. Lomakkeen kautta on tarkoitus mahdollistaa erilaiset yhteydenotot yritykseen.
• Palautelomakkeen käsittelyyn on käytettävä joko kurssin opettajien tekemää tai omaa CGI-ohjelmaa.
• Tarkemmat ohjeet opettajien tekemän CGI-ohjelman käytöstä löytyvät osoitteesta:

  http://appro.mit.jyu.fi/laheta/

Sivuston kaikki sivut

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

• Alla oleva maininta, josta linkki kurssin kotisivulle.

  Tietoverkot työvälineenä -kurssin harjoitustyö

  <a href="http://appro.mit.jyu.fi/tietoverkot/"
     title="Tietoverkot työvälineenä - Jyväskylän yliopisto" >
     Tietoverkot työvälineenä</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. (Ei siis suoraan yksittäisen tuotteen esittelyyn.)

HTML-dokumenttien tekniset vaatimukset

Jokaiselle harjoitustyön dokumentille asetetaan seuraavat tekniset vaatimukset:

• Dokumenttien on oltava joko XHTML 1.1 tai XHTML Basic 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
• Kaikkien dokumenttien täytyy mennä läpi ilman virheitä ja varoituksia toisesta seuraavista HTML-validaattoreista:
  • WDG HTML Validator <URL: http://www.htmlhelp.com/tools/validator/>
  • W3C HTML Validation Service <URL: http://validator.w3.org/> .
• Koko sivuston ulkoasun muotoilu on tehtävä käyttäen yhtä (1) koko sivustolle yhteistä CSS-tiedostoa.
• Dokumentin ulkoasun muotoiluun käytetyn CSS-tiedoston on läpäistävä seuraava CSS-tarkistaja ilman virheitä ja varoituksia (Warnings: All):
  • W3C CSS Validation Service <URL: http://jigsaw.w3.org/css-validator/validator-uri.html>
• Dokumenttien on täytettävä W3C:n Web Content Accessibility Guidelines 1.0 vaatimukset dokumentin esteettömyydestä ensimmäisellä (Priority 1) ja toisella (Priority 2) -tasolla. Seuraavassa vaatimuksista hieman tarkemmin:
  • Näiden vaatimusten täyttyminen on helpointa tarkistaa Bobbylla <URL: http://www.cast.org/bobby/>.
  • Osan sivuston ongelmista Bobby löytää koneellisesti ja pystyy huomauttamaan näistä. Joitakin asioita pitää käyttäjän kuitenkin tarkistaa omatoimisesti. Tarkistuslista Bobbyn käyttäjätarkistuksista (engl. User Checks), jotka harjoitustyöltä vaaditaan:
    • Priority 1 - Käyttäjätarkistukset
      • Sisällöllisesti tärkeille kuville, joiden sisältämää informaatiota ei löydy sivulta muuten tekstimuodossa, täytyy löytyä tekstivastine. Jos alt-teksti ei riitä kuvaamaan kuvan sisältöä, niin sitten käytetään longdesc-ominaisuutta.
      • Sivujen pitää ollä käytettävät myös ilman värejä. (Ei pelkästään värimerkintöihin perustuvia ominaisuuksia)
      • Sivuilla oleva informaatio on saatava myös ilman tyylilomakkeiden käyttöä.
      • Sivuilla ei saa olla ASCII-taidetta. (Esim. ASCII-merkeistä koostuvia kuvioita.)
      • Dokumentin kieli on sujuvaa ja asiallista
      • Dokumentin kielen muuttuessa siitä on ilmoitettava lang-ominaisuudella.
    • Priority 2 - Käyttäjätarkistukset
      • Lomakkeen label-elementin täytyy olla sijoitettu oikein lomakekentään nähden.
        • Label-elementin täytyy olla ennen lomakekenttää!
        • Checkbox- ja radio-elementtien yhteydessä label-voidaan myös sijoittaa elementtien jälkeen.
      • Ei saa käyttää turhia animaatioita.
      • Taustavärin ja etualan värin on oltava toisistaan erottuvia myös mustavalkealla näytöllä.
      • Dokumenteissa on käytettävä rakenteellisesti oikeita elementtejä.
      • Suorat lainaukset on merkittävä q- tai blockquote-elementillä.
      • Pitkät option-listat on jaettava loogisiin kokonaisuuksiin optgroup-elementeillä. ( xhtml 1.1).
      • Lomakkeen elementit on ryhmiteltävä sopiviin kokonaisuuksiin fieldset- ja legend-elementeillä ( xhtml 1.1)
      • Sivujen navigoinnin on oltava selkeä, mutta ei ylikorostettu.
      • Linkeille täytyy lisätä title-teksti jos linkkisanat eivät yksinään ole tarpeeksi selkeät.
  • Tarkempi tarkistuslista näistä vaatimuksista löytyy kurssimonisteen sivulta 159 eteenpäin tai osoitteesta <URL: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/checkpoint-list.html>
• Dokumentit eivät saa olla liian suuria. Hyväksyttävä koko yhdelle xhtml-dokumentille kuvien kera on maksimissaan 50 kilotavua.
• Sivuston on toimittava myös ilman CSS:ää.
• Sivun toiminta ei saa riippua Javascript-, VBScript- Java-, tai muista erikoisista -viritelmistä.
• Sivuston sisäiset hyperlinkit on määriteltävä suhteellisina.

Dokumenttien ulkoasu

Dokumenttien ulkoasun on oltava

• yhtenäinen koko sivustolla,
• selkeä ja
• sivuston on näytettävä järkevältä valtaselaimilla (Internet Explorer 6.0 tai uudempi, Mozilla 1.0.1 tai uudempi, Netscape 7 tai uudempi ja Opera 6.05 tai uudempi) sekä tekstiselaimilla (Lynx). Osoitteesta http://appro.mit.jyu.fi/haku/html.shtml löytyy useampikin työkalu joilla voi testata miltä sivustonsa näyttää tekstiselaimilla.

Seuraava: Harjoitustyön palauttaminen