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 (demo 1, demo 2 ja demo 7)
- 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/2006/kevat/www/">WWW-julkaiseminen</a> -kurssin harjoitustyö
- Mahdolliset kuvat
- On oltava itse tehtyjä tai niiden käyttämiseen pitää olla asianmukainen lupa.
- 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/
- Vakionavigoinnin linkit ja CSS-viitteet voivat olla absoluuttisia.
- Toistuvat elementit voi lisätä käyttäen jotain ohjelmointitekniikkaa.
- Ohjelmointitekniikoita ei pidä käyttää dynaamisten tai vuorovaikutteisten sovelluksien tekemiseen. WWW-ohjelmointi ei kuulu kurssille. Tätä varten on olemassa mm. kurssit TJTA270 WWW-sovellukset ja TIEP113 Ohjelmointi 2, JSP (keväällä).
- Linkkien on viitattava aina hakemistoihin eikä suoraan
esim. index.html-tiedostoon. Esimerkiksi seuraavat linkit:
- Dokumenttien on täytettävä W3C:n Web Content Accessibility Guidelines 1.0 suosituksen vaatimukset dokumentin esteettömyydestä. Esteettömyyden voi tarkistaa Nettipoliisilla.
- Huomioi myös seuraavat käytettävyysasiat:
- Laitteistosta tai ohjelmistoista ei saa tehdä oletuksia.
- Älä käytä kynnysmattoja eli turhaa etusivua vaan mene suoraan asiaan.
- Älä avaa uusia ikkunoita.
- Älä käytä kehyksiä.
- Linkkitekstin on ilmaistava minne linkki vie.
Lomakkeet (demo 5 ja demo 6)
- Lomake-elementtien esteettömyydessä on tarkistettava, että
- jokaiseen lomake-elementtiin liittyy oma label-elementti.
- valittavilla elementeillä on oletusarvo
- kaikki sivulla olevat lomake-elementit ovat järkevässä
tabulointijärjestyksessä
- jä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äsittely
- On käytettävä luennolla 6 esiteltyjä CGI-ohjelmia.
- Käsittelijät on konfiguroitava tallentamaan lähetetty vastaus tiedostoon.
Sivustolla on oltava vähintään kolme lomaketta. Suositellaan seuraavista vaihtoehdoista kolmea ensimmäistä:
Hakulomake
- On sijoitettava ainakin etusivulle.
- Hakulomakkeessa on oltava vapaa tekstikenttä (text) ja hakupainike (submit).
- Haun täytyy rajoittua omalle sivulle.
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
- 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)
Ostoskori
- Ostettavat tai tilattavat kohteet pitää pystyä lisäämään ostoskoriin suoraan kohteen esittelysivulta.
- Tilauslomakkeella on kysyttävä asianmukaiset tilaustiedot (esim. postitusosoite).
Ulkoasu (demo 2, demo 3 ja demo 4)
- 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").
- Sivu on jaettava visuaalisesti vähintään kolmeen (3) selvästi erottuvaan osaan suunnitelman mukaisesti.
- Käytä selainikkunan tarjoamaa tilaa kokonaisuudessaan.
- Osien on skaalauduttava kirjaisimen tai selainikkunan koon mukaisesti.
- handheld
- Poista all-medialle tehdyt asemoinnit.
- Maksimoi tekstialueen koko.
- Siirrä vakionavigointi näytön ylä- tai alalaitaan ja pienennä sen kokoa.
- 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) ja ikkuna kavennettuna 200 pikseliin (noin 1/5 - 1/6 osa ruudun leveydestä).
- Tila on vaihdettava uudelleen jokaisen sivun latauksen jälkeen
- Jos handheld-mediaan sopivaa CSS:ää ei löydy, niin Opera käyttää omaa rutiinia sivun mukauttamiseksi. Varmista, että omat määrityksesi toimivat!
- Handheld Tester (ei toimi kaikissa tilanteissa oikein (esim. position), mutta tämänkin avulla saa jonkinlaisen kuvan mobiilitilasta)
- Opera-selain Small Screen Rendering -tilassa (shift+F11) ja ikkuna kavennettuna 200 pikseliin (noin 1/5 - 1/6 osa ruudun leveydestä).
- Tekstiselain
- Sivuston on oltava saavutettavissa ulkoasusta huolimatta
- Sivun ulkoasua ei saa yrittää muotoilla taulukoilla (pl. normaali taulukoitava data).
- 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:
Palvelinasetukset (demo 7)
- Salasanasuojattu sivu
- Suojaa (heikosti) jokin sivustosi hakemisto salasanalla.
- Mikäli et keksi mitään sopivaa hakemistoa niin tee sivuston juureen hakemisto sala, johon luot uuden XHTML-dokumentin. Dokumentin sisällöllä ei ole väliä.
- Salasanasuojatun hakemiston sisältöön on päästävä käyttäjätunnuksella ope ja salasanalla ope.
- Edelleenohjaus
- Toteuta jonkin sivun edelleenohjaus toiseen hakemistoon.
- Edelleenohjauksen pitää olla väliaikainen (pelkkä
Redirect
). - Ellet keksi sivustollasi hyödyllistä käyttöä edelleenohjaukselle niin ohjaa sivuston juuresta palaute.html hakemistoon, jossa palautelomake sijaitsee.
- Monikielinen etusivu
- Sivuston etusivun pitää olla saatavilla vähintään sekä englanniksi että suomeksi.
- Kielen valinnan on toimittava automaattisesti selainasetusten perusteella.
- Etusivulta on löydyttävä myös tavallinen linkki toiseen kieliversioon.
Harjoitustyön testaus
- Siirrä sivustosi ATK-keskuksen www.cc.jyu.fi- tai people.cc.jyu.fi-palvelimelle.
- Tarkista, että sivu täyttää edellisillä sivuilla 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 6.0 tai uudempi
- Mozilla 1.7, Firefox 1.0 tai uudempi
- Opera 8 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 esim. Handheld-testerillä.
- 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. Paitsi joululomalla.
Käyttäjien kommentit