Harjoitustyön suunnitelma - WWW-julkaiseminen

• Suunnitelman vaatimukset
  • Aihe
  • Kuvaus
  • Hakemistorakenne
  • Vakionavigointi
  • Ulkoasu
• Suunnitelman hyväksyttäminen
  • Yleisimmät virheet
  • 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. Esimerkkimallista saa ottaa vinkkejä omaan suunnitelmaan, mutta mallin tai sen CSS:n suora kopiointi omaan suunnitelmaan on kiellettyä.

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 seitsemän.
• 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 mielellään 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 alempaa tältä sivulta löytyvällä palautuslomakkeella.

Yleisimmät virheet

Ennen suunnitelmasi palauttamista varmista myös, että työssäsi EI esiinny seuraavia ongelmia:

• Sivusi on epävalidi. Tarkista sivusi W3C:n validaattorilla.
• Sivusi CSS on epävalidi. Tarkista CSS-tiedostosi W3C:n validaattorilla.
• Fontin kokoa ei saa määrätä px- tai pt-yksiköissä!
• Älä pienennä selaimen oletusfonttikokoa muualla kuin sivun vähemmän tärkeissä osissa. Sivun pääsisällön pitää olla luettavissa käyttäjän oletusfonttikoossa. Ts. ÄLÄ TEE NÄIN:

  body {
   font-size: 0.8em;
  }
  

• Kaikki listat pitää merkitä rakenteellisesti listoina (ei diveinä, ei kappaleina).
• Kansiorakenteessa ei saa kansioiden nimissä esiintyä ääkkösiä, välilyöntejä, isoja kirjaimia tai erikoismerkkejä.
• Sivun ulkoasuun liittyvien alueiden leveyksiä ei pidä määrittää px-yksiköissä. Sivun pitää toimia ilman turhaa vaakarullauspalkkia selaimen kokoa muutettaessa!
• Varmista, että tekstin ja taustavärin kontrasti on tarpeeksi suuri. Tämä koskee myös linkkejä!
• Et ole kertonut mitä sommittelumallia käytät työssäsi.
• Et ole kertonut mihin kohtaan työssäsi aiot sijoittaa tarvittavat lomakkeet.
• Sivuston sisäiset linkit pitää tehdä suhteellisina ja osoittaa hakemistoihin tiedostojen sijasta.
• Sivun pitää näyttää järkevältä (ei välttämättä samalta) Firefoxilla, Internet Explorer 7:llä ja Operalla.

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.