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ön palautusaika on päättynyt. Uusia harjoitustöitä ei enää oteta vastaan.

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 järkevästi.
  • 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ö

• Kuvat:
  • Harjoitustyösivustolla on oltava vähintään yksi kuva.
  • 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).
  • Kuvien koon tulee olla sopiva WWW-julkaisuun.
• 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 (jos mahdollista),
  • 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ää (esimerkiksi Googlea).

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:
  • "Normaali" tyylitiedosto tietokoneiden selaimille
    • Tarkoitettu kaikille medioille (media="all"), mutta tätä vaihtoehtoa käyttävät siis etenkin tietokoneiden selaimet.
    • 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 (jos mahdollista, niin molempien mukaan ainakin sisältöosan osalta).
  • print-media
    • Tarkoitettu sivujen tulostamista varten (media="print").
    • Poista (ylikirjoita) tulostuksesta navigoinnit ja muut mahdolliset tulostukseen turhat lohkot.
    • 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
    • Toteuta mobiililaitteiden tyylitiedoston käyttöönotto jommallakummalla tavalla seuraavista:
      1. Mediakyselyiden (Media Queries) avulla.
         • Mobiilityylin tulee vaihtua käyttöön automaattisesti, kun käyttäjän selaimen leveys (laitteesta riippumatta) menee annetun raja-arvon alle. Raja-arvo tulee olla välillä 400-800 pikseliä ja se tulee valita parhaiten oman sivuston ulkoasulayoutille sopivaksi. Käytännössä tulee siis valita sellainen arvo, mitä kapeammalla selainikkunalla sivun käyttäminen "normaalilla" tyylitiedostolla ei olisi enää järkevää tai mahdollista.
      2. Vaihtoehtoisena tyylitiedostona (rel="Alternate StyleSheet").
         • Tyylitiedosto tulee saada käyttöön sekä selainten valikoista että esimerkiksi painikkeen avulla (koska kaikki selaimet eivät tarjoa valikkoa tyylitiedoston vaihtamiseen).
         • Tyylitiedoston vaihtamisen painikkeen kautta voi toteuttaa JavaScriptin avulla. Muista toteuttaa painike myös "normaalin" tyylitiedoston vaihtamiseksi takaisin käyttöön.
    • Yhteiset ohjeet mobiilityylille riippumatta tyylin käyttöönottotavasta:
      • Mobiilityyli tulee saada käyttöön tietokoneiden selaimien lisäksi myös tavallisilla älypuhelimilla (esim. Nokian älypuhelimet).
      • Mobiilityylin media tulee olla all.
      • Toteuta mobiilityylin ulkoasu siten, että se on järkevästi käytettävissä myös vielä noin 240x320 pikselin näytölläkin.
      • Maksimoi sisältöalueen koko ja poista kaikki marginaalit.
      • Siirrä navigoinnit näytön ylä- tai alalaitaan ja pienennä niiden kokoa.
      • Leveitä lohkoja ei yleensä voi asetella rinnakkain, vaan ne täytyy asetella päällekkäin.
      • Sivun sisältö on nähtävä, eli sisältöä ei ole tarkoitus piilottaa.
• CSS-tiedostojen tulee olla pääsääntöisesti validia CSS 2.1:stä.
  • Myös sellaiset CSS3-ratkaisut hyväksytään, jotka toimivat yleisimmillä selaimilla (vähintään Firefox, Internet Explorer ja Opera). Peruste (miksi käyttää kyseistä ratkaisua ja mitä hyötyä siitä on) epävalideille (CSS 2.1 tarkistuksen mukaan) koodeille tulee kirjoittaa CSS-tiedostoon kommenttina.
  • Validiteetin voi tarkistaa W3C:n validaattorilla.
    • Huomaa vaihtaa validaattorin asetukset kuntoon, jos validoit CSS3:sta. Oletuksena validaattori validoi tiedostot CSS 2.1 -sääntöjen mukaan.
• Sivuston ulkoasun on näytettävä järkevältä (mutta ei täysin samanlaiselta) erilaisilla selaimilla.
  • Graafiset selaimet:
    • IE 8 (ja uudemmat)
    • Firefox 3.6 (ja uudemmat)
    • Opera 10 (ja uudemmat)
  • Mobiiliselain:
    • Testaa mobiilipuolen tyylitiedostoa kännykän selaimella, jos se on mahdollista. Mobiilipuolen tyylitiedostoa pitää pystyä käyttämään tavallisilla älypuhelimilla.
    • Testaa mobiilipuolen tyylitiedostoa lisäksi tietokoneen selaimella (esimerkiksi Firefoxilla):
      • Jos toteutit tyylitiedoston käyttöönoton mediakyselyiden avulla, niin pienennä selainikkuna vastaamaan suunnilleen kännykän näytön kokoa (esimerkiksi selainikkunan leveydeksi noin 300 pikseliä). Tällöin mobiilipuolen tyylitiedoston pitäisi tulla käyttöön automaattisesti.
      • Jos toteutit tyylitiedoston käyttöönoton vaihtoehtoisena tyylitiedostona, niin ota kyseinen tyyli käyttöön selaimen valikoista. Esimerkiksi Firefoxissa valikko on View | Page Style. Pienennä lisäksi selainikkuna vastaamaan suunnilleen kännykän näytön kokoa (esimerkiksi selainikkunan leveydeksi noin 300 pikseliä).
  • 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. Joskus Nettipoliisi voi kuitenkin mainita sivun olevan epävalidi, vaikka W3C:n palvelu ei virheitä tai varoituksia annakaan. Tällöin Nettipoliisin herjasta ei tarvitse välittää.
4. Tarkista myös CSS-tyylitiedostosi W3C:n CSS-validaattoripalvelulla.
5. Testaa, että sivusto näyttää järkevältä vähintäänkin seuraavilla selaimilla:
   • Internet Explorer 8 tai uudempi
   • Firefox 3.6 tai uudempi
   • Opera 10 tai uudempi
6. 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 (selainikkuna pienennettävä vastaamaan suunnilleen kännyköiden näyttöjen kokoa).
7. Varmista, että sivustosi sisältö on saavutettavissa. Nettipoliisi herjaa useimmista esteellisyysongelmista.

Harjoitustyön palauttaminen

Harjoitustyön palautusaika on päättynyt. Uusia harjoitustöitä ei enää oteta vastaan.