Harjoitustyön toteutus

• Harjoitustyön vaatimukset
  • Sisältö ja rakenne
  • Käytettävyys ja esteettömyys
  • Lomakkeet
  • Ulkoasu
• WWW-ohjelmointi
• Harjoitustyön testaus
• Harjoitustyön palauttaminen

Kun harjoitustyön suunnitelma on hyväksytty, voidaan työ toteuttaa tehdyn suunnitelman mukaisesti noudattaen tällä sivulla annettuja vaatimuksia. Harjoitustyön viimeinen palautuspäivä on 60 päivää suunnitelman hyväksymisestä. Palauttaminen tehdään sivun lopusta löytyvällä lomakkeella.

Harjoitustyön vaatimukset

Sisältö ja rakenne

• Suunnitelman mukaisesta aiheesta on tehtävä vähintään seitsemän (7) XHTML 1.0 Strict -dokumenttia.
  • Dokumenttien on oltava valideja. Validiteetin voi tarkistaa W3C:n validaattorilla.
  • Dokumentin merkistön on oltava ISO-8859-1 XML-deklaraatiossa.
  • Dokumentin kieleksi on merkittävä suomi tai englanti html-elementin xml:lang-attribuutilla.
• Jokaisella sivulla on oltava vähintään:
  • Harjoitustyön aiheen mukaista tekstiä, jonka rakenne on merkitty.
  • Muuttumaton vakionavigointi, jonka avulla pääsee helposti sivuston pääkohtiin.
  • Sivun tekijän nimi, sähköpostiosoite, sivun päivitysaika sekä linkki kurssin kotisivulle:

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

• Mahdolliset kuvat:
  • Kuvien on oltava itse tehtyjä tai niiden käyttämiseen pitää olla asianmukainen lupa.
  • Kuvien on käytettävä kuvatyyppiin soveltuvaa formaattia (JPG valokuville, PNG kaaviokuville).
• Sivuston sisäiset hyperlinkit on määriteltävä pääsääntöisesti suhteellisina.
  • Linkkien on viitattava aina hakemistoihin eikä suoraan esim. index.html-tiedostoon. Esimerkiksi seuraavat linkit:
    • VÄÄRIN: ../kuvat/index.html
    • VÄÄRIN: kuvat/omatkuvat.html
    • OIKEIN: ../kuvat/
    • OIKEIN: kuvat/omatkuvat/
  • Jokaisella sivulla samanlaisena toistuvien osien viitteet voivat olla puoliabsoluuttisia, jos niiden liittämiseen käytetään esimerkiksi SSI:tä.
    • Esim. vakionavigoinnin linkit
    • Esim. CSS-viitteet: /~tunnus/harkka/tyylit.css
  • Sivuston osoiterivillä ei saa missään vaiheessa näkyä .html, .shtml, .php tms. päätettä.

Käytettävyys ja esteettömyys

• Dokumenttien on täytettävä W3C:n Web Content Accessibility Guidelines 1.0 suosituksen vaatimukset dokumentin esteettömyydestä. Esteettömyyden voi tarkistaa osittain Nettipoliisilla.
• Huomioi luennolla 10 esitetyt yleiset käytettävyysasiat.

Lomakkeet

• Lomake-elementtien esteettömyydessä on tarkistettava, että
  • jokaiseen lomake-elementtiin liittyy oma label-elementti,
  • kaikilla valittavilla elementeillä on oletusarvo ja
  • kaikki sivulla olevat lomake-elementit ovat järkevässä tabulointijärjestyksessä:
    • läpikäyntijärjestys on määrättävä tabindex-ominaisuudella, jos oletusjärjestys ei ole looginen.
• Lomakkeen osat on ryhmiteltävä käyttäen fieldset- ja legend-elementtejä.
• Lomakkeiden käsittelyssä käytetään valmista ohjelmaa, jonka käyttöohjeet löytyvät osoitteesta:
  • http://appro.mit.jyu.fi/www/harkka/laheta/
  • Tarvitset sivulle tunnuksen ja salasanan, jotka löytyvät Korppi-järjestelmästä kurssin ITKY202 etusivulta.
  • Hakulomakkeessa käytetään eri käsittelijää.

Sivustolla on oltava vähintään seuraavat kolme lomaketta:

Hakulomake

• On sijoitettava ainakin etusivulle.
• Hakulomakkeessa on oltava vapaa tekstikenttä (text) ja hakupainike (submit).
• Haun täytyy rajoittua omalle sivustolle.
• Hakulomakkeen käsittelyssä käytetään palveluntarjoajan (esim. Google) antamaa lomakkeenkäsittelijää.

Palautelomake

• Palautelomake on tarkoitettu vapaamuotoisen palautteen lähettämiseksi suoraan WWW-sivulta.
• Lomakkeella on oltava palautteen antajan nimi ja sähköpostiosoite, palautteen aihe tai tyyppi ja palauteteksti tekstialueena.

Kyselylomake (tai jokin muu laaja lomake)

• Lomakkeen avulla on tarkoitus kerätä tietoa sivuston käyttäjiltä.
• Kyselylomakkeella on käytettävä kaikkia seuraavista elementtityypeistä:
  • tekstikenttä (input type="text")
  • valintaruutu (input type="checkbox")
  • valintanappi (input type="radio")
  • valintalista (select)
  • tekstialue (textarea)

Ulkoasu

• Sivuston ulkoasun on oltava selkeä ja yhtenäinen koko sivustolla.
• Koko sivuston ulkoasun muotoilu on tehtävä käyttäen kolmea (3) eri medioille suunniteltua erillistä CSS-tiedostoa:
  • all
    • Tarkoitettu kaikille medioille (media="all").
    • Sivujen on noudatettava visuaalisesti jotakin suunnitelmassa valittua ulkoasumallia.
    • Käytä selainikkunan tarjoamaa tilaa kokonaisuudessaan. Pienehköt marginaalit ovat sallittuja.
    • Osien on skaalauduttava kirjasimen tai selainikkunan koon mukaisesti (mielellään molempien mukaan ainakin sisältöosan osalta).
  • handheld
    • Poista (ylikirjoita) all-medialle tehdyt asemoinnit.
    • Maksimoi tekstialueen koko ja poista kaikki marginaalit.
    • Siirrä vakionavigointi näytön ylä- tai alalaitaan ja pienennä sen kokoa. Sivun sisältö on nähtävä.
  • print
    • Poista (ylikirjoita) tulostuksesta turhat navigoinnit.
    • Tarkista marginaalit, reunukset ja täytteet.
• CSS-tiedostojen tulee olla valideja. Validiteetin voi tarkistaa W3C:n validaattorilla.
• Sivuston ulkoasun on näytettävä järkevältä (mutta ei täysin samanlaiselta) erilaisilla selaimilla.
  • Graafiset selaimet:
    • IE 7
    • Firefox 3
    • Opera 9
  • Mobiiliselain:
    • Opera-selain Small Screen Rendering -tilassa (View | Small Screen, valitse lisäksi View | Style | Author Mode):
      • Ikkuna pitää kaventaa n. 240 pikselin leveydelle (noin 1/6 osa ruudun leveydestä) ja n. 320 pikselin korkeudelle (noin 1/4 ruudun korkeudesta).
      • Jos handheld-mediaan sopivaa CSS:ää ei löydy, niin Opera käyttää omaa rutiinia sivun mukauttamiseksi. Varmista, että omat määrityksesi toimivat!
  • Tekstiselain:
    • Lynx Viewer
• Sivuston on oltava saavutettavissa ulkoasusta huolimatta.
  • Sivun ulkoasua ei suositella muotoiltavaksi taulukoilla (pl. normaali taulukoitava data). Kuitenkin tarpeen vaatiessa sivuja voi taittaa taulukoilla, mutta vain yhden taulukkotason verran (ei siis sallita sisäkkäisiä taulukoita sivujen taittamiseen).
  • Sivuston on toimittava myös ilman CSS:ää.
• Sivustolla käytettävien taustan ja tekstin värien pitää kontrastiltaan erota riittävästi toisistaan. Värisokeille hankalia väriyhdistelmiä pitää välttää. Testityökaluja:
  • Colorblind Web Page Filter
  • Colour Contrast Analyser

WWW-ohjelmointi

• Toistuvat elementit, kuten vakionavigointipalkki ja CSS-viitteet yms. voi lisätä käyttäen jotain ohjelmointitekniikkaa, kuten SSI:tä tai PHP:tä. Tämä ei ole kuitenkaan välttämätöntä.
• Tällä kurssilla ei tarvitse tehdä mitään dynaamisia tai vuorovaikutteisia sovelluksia. WWW-ohjelmointi ei kuulu kurssille. Tätä varten on olemassa mm. kurssit
  • TJTA270 WWW-sovellukset ja
  • TIEP113 Ohjelmointi 2, JSP.

Harjoitustyön testaus

1. Siirrä sivustosi Tietohallintokeskuksen http://users.jyu.fi/-palvelimelle.
2. Tarkista, että sivusto täyttää kaikki määrätyt vaatimukset. Tarkistamista helpottaa Nettipoliisi. Anna sille harjoitustyön etusivun osoite.
3. Mikäli Nettipoliisi herjaa, ettei jokin sivu ole validi, niin tarkista sivu W3C:n validaattoripalvelulla. Tarkista myös CSS-tyylitiedostosi W3C:n CSS-validaattoripalvelulla.
4. Testaa, että sivusto näyttää järkevältä seuraavilla selaimilla:
   • Internet Explorer 7 tai uudempi
   • Firefox 3 tai uudempi
   • Opera 9 tai uudempi
5. Testaa eri CSS-medioiden määrityksien toimintaa:
   • all-median tyylejä kannattaa tutkia eri selaimilla erityisesti asemoinnin toimivuuden suhteen (puutteelliset CSS-tuet).
   • print-median tyylejä voi testata tulostuksen esikatselulla (engl. Print Preview).
   • handheld-median tyylejä voi testata Operan Small Screen Rendering -tilassa.
6. Varmista, että sivustosi sisältö on saavutettavissa. Nettipoliisi herjaa useimmista esteellisyysongelmista.

Harjoitustyön palauttaminen

Tee testaus harjoitustyöllesi ellet ole sitä vielä tehnyt. Jos virheitä ei ole ja olet myös itse tarkistanut, että harjoitustyösi täyttää kaikki vaatimukset, niin voit palauttaa harjoitustyön seuraavalla lomakkeella:

Harjoitustyön hyväksymisestä tai mahdollisista korjausehdotuksista kerrotaan viimeistään kahden viikon kuluessa.