Harjoitustyön toteutus
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ä 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 absoluuttisia
- Esim. vakionavigoinnin linkit
- Esim. CSS-viitteet: http://users.jyu.fi/~tunnus/harkka/tyylit.css
- Sivuston osoiterivillä ei saa missään vaiheessa näkyä .html, .shtml, .php tms. päätettä.
- Linkkien on viitattava aina hakemistoihin eikä suoraan
esim. index.html-tiedostoon. Esimerkiksi seuraavat linkit:
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 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
- 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 sivulle.
- Hakulomakkeen käsittelyssä käytetään palveluntarjoajan 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 kirjaisimen tai selainikkunan koon mukaisesti.
- handheld
- Poista 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 tulostuksesta turhat navigoinnit
- Tarkista marginaalit, reunukset ja täytteet.
- all
- Sivuston ulkoasun on näytettävä järkevältä (mutta ei täysin samanlaiselta) erilaisilla selaimilla.
- Graafiset selaimet
- Mobiiliselain
- Opera-selain Small Screen Rendering -tilassa (shift+F11)
- Ikkuna pitää kaventaa 200 pikselin leveydelle (noin 1/6 osa ruudun leveydestä) ja 300 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!
- Opera-selain Small Screen Rendering -tilassa (shift+F11)
- Tekstiselain
- 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:
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
Harjoitustyön testaus
- Siirrä sivustosi ATK-keskuksen http://users.jyu.fi/-palvelimelle.
- Tarkista, että sivu täyttää kaikki määrätyt vaatimukset. Tarkistamista helpottaa Nettipoliisi. Anna sille harjoitustyön etusivun osoite.
- Mikäli Nettipoliisi herjaa, ettei jokin sivu ole validi, niin tarkista sivu W3C:n validaattoripalvelulla. Tarkista myös CSS-tyylitiedostosi W3C:n CSS-validaattoripalvelulla.
- Testaa, että sivusto näyttää järkevältä seuraavilla selaimilla:
- Internet Explorer 7.0 tai uudempi
- Firefox 2.0 tai uudempi
- Opera 9 tai uudempi
- 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.
- 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.
Käyttäjien kommentit