Harjoitustyön toteutus

• Harjoitustyön vaatimukset
  • Sisältö ja rakenne
  • Käytettävyys ja esteettömyys
  • Lomakkeet
  • Salasanasuojaus
  • 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.

HUOM! Harjoitustyö on muuttunut hieman tammikuussa 2010. Jos olet aloittanut harjoitustyön tekemisen jo aiemmin, niin varmista ennen palautusta, että harjoitustyösi täyttää kaikki nykyiset vaatimukset.

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 ja 2.0 suositusten 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)

Salasanasuojaus

• Vähintään yksi harjoitustyön sivu (hakemisto) on oltava salasanasuojattu. Harjoitustyön etusivu ei kuitenkaan saa olla salasanasuojattu.
• Salasanasuojatulle sivulle tulee päästä vähintäänkin seuraavalla tunnus-salasanaparilla:
  • tunnus: ope
  • salasana: ope

Ulkoasu

• Sivuston ulkoasun on oltava selkeä ja yhtenäinen koko sivustolla.
• Koko sivuston ulkoasun muotoilu on tehtävä käyttäen kolmea (3) erillistä CSS-tiedostoa:
  • all-media
    • 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).
  • print-media
    • Tarkoitettu sivujen tulostamista varten (media="print").
    • Poista (ylikirjoita) tulostuksesta turhat navigoinnit.
    • Tarkista marginaalit, reunukset ja täytteet. Pyri käyttämään tulostuspaperi hyväksesi mahdollisimman tarkoin (ei siis isoja marginaaleja yms.).
    • Määrää sivunvaihdot tapahtumaan järkevästi.
  • Mobiililaitteet ja muut pieninäyttöiset laitteet
    • Vaihtoehtoinen tyylitiedosto (rel="Alternate StyleSheet") mobiililaitteita ja muita pieninäyttöisiä laitteita varten.
    • Toteuta ulkoasu siten, että se on järkevästi käytettävissä myös noin 240x320 pikselin näytöllä.
    • Maksimoi sisältöalueen koko ja poista kaikki marginaalit.
    • Siirrä navigoinnit näytön ylä- tai alalaitaan ja pienennä niiden kokoa.
    • Sivun sisältö on nähtävä, eli sisältöä ei ole tarkoitus piilottaa.
    • Tyylitiedoston vaihtamisen voi toteuttaa JavaScriptin avulla, mutta se ei ole pakollista.
• 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 8
    • Firefox 3.5 (ja uudemmat)
    • Opera 10
  • Mobiiliselain:
    • Testaa vaihtoehtoista tyylitiedostoa kännykän selaimella, jos se on mahdollista.
    • Testaa vaihtoehtoista tyylitiedostoa lisäksi tietokoneen selaimella (esimerkiksi Firefoxilla):
      • Vaihda selaimen valikoista käyttöön vaihtoehtoinen tyylitiedosto. Esimerkiksi Firefoxissa valikko on View | Page Style.
      • Selainikkuna pitää lisäksi kaventaa noin 240 pikselin leveydelle (noin 1/5 osa ruudun leveydestä) ja noin 320 pikselin korkeudelle (noin 1/3 ruudun korkeudesta).
  • Tekstiselain:
    • Lynx Viewer
• Sivuston on oltava saavutettavissa ulkoasusta huolimatta.
  • Sivun ulkoasua ei saa muotoilla taulukoilla (pl. normaali taulukoitava data).
  • Sivuston on toimittava myös ilman CSS:ää.
• Sivustolla käytettävien taustan ja tekstin värien pitää erota kontrastiltaan 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ä vähintäänkin seuraavilla selaimilla:
   • Internet Explorer 8 tai uudempi
   • Firefox 3.5 tai uudempi
   • Opera 10 tai uudempi
5. Testaa eri CSS-tyylitiedostojen määrityksien toimintaa:
   • all-median tyylejä kannattaa tutkia eri selaimilla erityisesti asemoinnin toimivuuden ja skaalautuvuuden suhteen.
   • print-median tyylejä voi testata eri selaimien tulostuksen esikatselulla (engl. Print Preview).
   • Mobiililaitteille suunnatun tyylitiedoston toimivuutta voi testata kännyköillä ja tavallisilla selaimilla (otettava käyttöön vaihtoehtoinen tyylitiedosto ja selainikkuna pienennettävä noin 240x320 pikselin kokoon).
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 korjausvaatimuksista kerrotaan viimeistään kahden viikon kuluessa (loma-aikoja lukuun ottamatta yleensä jo muutaman arkipäivän kuluessa palautuksesta).