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.

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

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 validi 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.
• Kerro mitä sisältöä harjoitustyössä vaadittavaan laajempaan lomakkeeseen tulee.
• Kerro mikä sivuista tulee olemaan salasanasuojattu ja millaista sisältöä kyseiselle sivulle 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 (tulee olla suoraan etusivulla, eli ei tarvitse omaa hakemistoa)
  • 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, erikoismerkkejä tai 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, mutta ne voivat jo osoittaa oikeisiin sijainteihin.
• 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 tai tietyllä sivulla vakionavigoinnin lisäksi myös toinen navigointipalkki), 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.
  • Kerro valitsemasi sommittelumalli (palstat, blogi tai laatikot) suunnitelmassa.
• 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.
• CSS-tiedoston 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.
• Sivun ulkoasun on näytettävä järkevältä (mutta ei välttämättä täysin samanlaiselta) erilaisilla selaimilla (testattava vähintään Internet Explorer 8, Firefox 3.6 ja Opera 10/11).

Suunnitelman hyväksyttäminen

• Siirrä dokumenttisi WWW-palvelimelle.
• Tarkista, että dokumentti on kaikkien luettavissa.
• Tarkista, että sinulla on kaikki suunnitelmassa vaaditut kohdat.
• Tarkista, että suunnitelman XHTML-tiedosto ja CSS-tiedosto ovat valideja.
• 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).
• Hakemistorakenteessa ei saa hakemistojen 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.
• Et ole kertonut, mikä sivusi tulee olemaan salasanasuojattu.
• Sivuston sisäiset linkit pitää tehdä suhteellisina tai puoliabsoluuttisina ja osoittaa hakemistoihin tiedostojen sijasta.
• Sivun pitää näyttää järkevältä (ei välttämättä samalta) Firefoxilla, Internet Explorer 8:lla ja Operalla.

Suunnitelman palauttaminen

Suunnitelman palautusaika on päättynyt. Uusia suunnitelmia ei oteta enää vastaan.