Harjoitustyön suunnitelma - WWW-julkaiseminen

• Suunnitelman vaatimukset
  • Aihe
  • Kuvaus
  • Hakemistorakenne
  • Vakionavigointi
  • Ulkoasu
• Suunnitelman hyväksyttäminen
  • Suunnitelman palauttaminen

Ennen harjoitustyön toteuttamista on tehtävä suunnitelma. Valmis suunnitelma pitää hyväksyttää harjoitustyön ohjaajalla. Suunnitelman tarkoituksena on valmistella toteutuskelpoinen pohja sivustolle.

Suunnitelman vaatimukset

Harjoitustyössä on tarkoitus toteuttaa WWW-sivusto, jota voi järkevästi laajentaa ja ylläpitää. Tätä varten on syytä tehdä sivustosuunnitelma. Suunnitelmassa on valmisteltava yksi XHTML 1.0 Strict-dokumentti, jossa on kuvaus sivuston aiheesta, osa-alueista ja hakemistorakenteesta. Suunnitelmasivun ulkoasun on oltava alustava versio varsinaisen sivuston ulkoasusta. Suunnitelmasivun ulkoasumuotoilut on tehtävä erillisellä CSS-tiedostolla ja sivulle on toteuttava vakionavigointipalkki.

Harjoitustyön suunnitelmasta löytyy esimerkkimalli.

Aihe

Aihe on vapaa, kunhan se kattaa harjoitustyön vaatimukset. Jos aihetta ei keksi itse, niin sen voi tehdä valmiiksi annetusta aiheesta. WWW-sivusto voi olla esimerkiksi WWW-kauppa tai organisaation WWW-sivusto. Sivusto voi olla kuvitteellinen tai todellinen. Riittävän laaja henkilökohtainenkin sivu käy aiheeksi.

Kuvaus

• Harjoitustyön tekijän nimi ja sähköpostiosoite.
• Lyhyt kuvaus harjoitustyön aiheesta.
• Kuvaile, mitä osia sivustolle tulee.

Hakemistorakenne

• Luo harjoitustyösivustosi hakemistorakenne (kts. demo 1).
• Hakemistorakenteessa on oltava vähintään kolme tasoa.
  • Sivuston juuri (etusivu).
  • Sisällysluettelotaso (esim. hakemisto, joista pääsee tuotteisiin)
  • Yksittäisten sisältösivujen taso (esim. tuotteiden esittelyt)
• Sisältösivuja (ja hakemistoja) on oltava vähintään kolme.
• Sivustolle tuleville lomakkeille on myös oltava sopiva paikka hakemistorakenteessa. Näitä ovat
  • Hakulomake
  • Palautelomake
  • Kyselylomake tai jokin muu laaja lomake
• Hakemistorakenne pitää esittää suunnitelmasivulla. Tämän voi toteuttaa esimerkiksi
  • Ruutukaappauskuvana Windows Explorerista tms.
  • Ruutukaappauskuvana Powerpointissa tehdystä organisaatiodiagrammista (sijoita laatikoihin hakemistojen nimet).
  • Kopioimalla Unixissa tree-komennon tuloste pre-elementin sisälle
• Hakemistojen nimissä pitää käyttää vain pieniä kirjaimia. Skandinaavisia merkkejä (ä,ö,å), kapiteeleja ja välilyöntejä ei saa käyttää. Hakemistojen nimien on oltava kuvaavia ja niissä saa olla vain yksi sana.
• Hakemistorakenne on suunniteltava niin, että sivustoa pystytään laajentamaan ilman suurempia toimenpiteitä. Esimerkiksi:
  • WWW-julkaiseminen-kurssin (kts. malli) juurihakemiston alla on luennot-hakemisto, joka sisältää 12 luentoNN-alikansiota. Luentoja voitaisiin melko vaivattomasti lisätä.
  • Kuvitteellisessa verkkokaupassa myydään kenkiä ja paitoja. Paidoille on oma alisivunsa, josta voi valita useita erilaisia paitoja. Kengille on oma alisivustonsa, josta voi edelleen valita urheilukenkiin liittyvän tai kävelykenkiin keskittyvän alisivun. Jos valikoimaan tulisi vielä housuja, voitaisiin niille tehdä oma alisivusto.

Vakionavigointi

• Lisää suunnitelmasivulle luotuun hakemistorakenteeseen pohjautuva muuttumaton vakionavigointipalkki. Linkkien ei vielä tarvitse toimia.
• Mikäli sivustolle tulee muita toistuvia elementtejä, kuten esimerkiksi sivuille yhteisiä kuvia, taulukoita tai yhteystietoja, niin sijoita ne myös suunnitelmassa paikoilleen.
• Mikäli sivustolle tulee muita navigointimahdollisuuksia (esim. murupolku) niin tee niistä esimerkit suunnitelmasivulle.

Ulkoasu

• Tee sivuston alustava ulkoasusuunnitelma toteuttamalla yksi CSS-tiedosto, jota käytät suunnitelmasivulla. Ulkoasun on vastattava mahdollisimman paljon lopullista sivuston ulkoasua. Mitään ulkoasun määrityksiä ei saa sijoittaa suoraan XHTML-dokumenttiin.
• Valitse sommittelumalli (klikkaa linkkiä) ja tee sivuston lohkojen asemointi sen mukaan.
  • Voit ehdottaa myös uutta sommittelumallia, mutta sen on oltava vaativuudeltaan vähintään esimerkkivaihtoehtojen tasoinen.
• Määrittele sivustolla käytettävät värit ja kirjasimet, lohkojen väliset täytteet, rajat ja marginaalit jne.
• Suunnittele CSS-tyylitiedosto all-mediaa silmällä pitäen:
  • Suhteelliset koonmääritykset CSS:ään. Käytä esim. em- ja %-määreitä.
  • px-määrettä saa käyttää vain syystä, esim. kuva-alueen tai pienten reunusten määrittämiseen.

Suunnitelman hyväksyttäminen

• Siirrä dokumenttisi WWW-palvelimelle.
• Tarkista, että dokumentti on kaikkien luettavissa.
• Tarkista, että sinulla on kaikki suunnitelmassa vaaditut kohdat.
• Tarkista sivusi Nettipoliisilla. Korjaa Nettipoliisin mahdollisesti antamat virheilmoitukset. Linkkien ei tarvitse vielä toimia.

Tämän jälkeen voit lähettää suunnitelman ohjaajalle tarkistettavaksi seuraavalla palautuslomakkeella.

Suunnitelman palauttaminen

Valmiin harjoitustyösuunnitelman voi hyväksyttää myös omassa demoryhmässään demo-ohjaajalla.

Jos et käy demoissa, niin hyväksytä suunnitelmasi lähettämällä sen WWW-osoite seuraavalla lomakkeella sinulle määrätylle ohjaajalle. Samalla voit kysyä apua, jos sinulla on ongelmia suunnitelman tekemisessä.

Ohjaaja kertoo sähköpostitse suunnitelman hyväksymisestä tai tarvittavista muutoksista viimeistään n. kahden viikon kuluessa ruuhkasta riippuen.