Viikkotehtävä 1
Tässä tehtävässä opitaan tuottamaan rakenteellisesti siistejä HTML-dokumentteja ja pitämään sivun ulkoasumuotoilut (CSS) erillään sivun rakenteesta. Opitaan myös miten CSS-kielellä muokataan HTML- tai XML-dokumentin ulkoasua. Muistetaan myös, että WWW-sivujen on tarkoitus toimia ympäristöstä ja käytettävästä laitteesta riippumatta.
Toteuta mallikuvien mukainen Jyväskylän sääennustesivu. Kaikille tasoille yhteisiä vaatimuksia ovat:
- Dokumentin rakenteen pitää olla järkevä. Selkeät listat on merkittävä listoiksi jne. Sivulla oleva teksti on oltava tekstinä eikä kuvina.
- Dokumentissa on käytettävä rakenteellisesti oikeissa paikoissa ainakin kertaalleen seuraavia HTML 5 -elementtejä: nav, header, h1 ja section
- Jokaisen dokumentin täytyy noudattaa HTML5 -dokumenttityyppiä.
- Dokumenttien on oltava valideja eikä validaattori saa antaa sivusta varoituksiakaan (warnings). Huomatkaa erityisesti &-merkkien koodaaminen! Asettakaa Web Developer Toolbarista päälle Tools|Display Page Validation niin huomaatte heti validointivirheet. Epävalidilla dokumentilla ei voi saada pisteitä.
- Sivun ulkoasu on tehtävä CSS:ää käyttäen.
Ulkoasun on toimittava ainakin uusimmissa Firefox -selaimissa. CSS:n on
oltava myös validia CSS3:sta.
Ulkoasumuotoilun apuna saa käyttää CSS Multi-column Layout Module Level 1 tai
CSS Flexible Box Layout Module Level 1 ominaisuuksia mutta suositeltavampaa
on vielä pysytellä vanhemmissa css-tekniikoissa
- Ulkoasun on skaalauduttava tekstin ja ikkunan koon muutoksiin. Sivun on mahduttava kapeaankin selainikkunaan. Pikselipohjainen, kiinteälle resoluutiolle tarkoitettu asettelu ei ole sallittua.
- Älä muuta sivun oletusfontin kokoa! Sivun täytyy toimia riippumatta siitä mikä on käyttäjän selaimeensa määräämä oletusfonttikoko.
- Sivulla olevien lomake-elementtien ei pidä toimia
- Taulukkoa saa käyttää taulukkomuotoisen datan esittämiseen eli sääennustetaulukkoon. Sisäkkäisiä taulukoita ei saa käyttää.
- CSS-koodin tuottamisessa saa käyttää apuna esiprosessointityökaluja. Näiden hyöty tulee paremmin esiin vasta isommissa projekteissa.
- Kaikki CSS on sijoitettava yhteen ulkoiseen CSS-tiedostoon. style-elementin tai style-attribuutin käyttäminen on ehdottomasti kiellettyä.
- Valmis sivu ja siihen liittyvät kuvat ja muut tiedostot on sijoitettava users.jyu.fi-palvelimelle
- Kopioi tarvitsemasi taustakuva ja muut kuvat suoraan alkuperäiseltä sivulta tai täältä äläkä käytä kuvia suoraan fmi:n palvelimelta.
Merkistö
Dokumentin merkistönä on käytettävä UTF-8-merkistöä. Skandinaavisten merkkien ja muiden erikoismerkkien on näyttävä kunnolla kaikilla selaimilla. Varmista, että skandinaaviset merkit näkyvät oikein sekä Firefoxilla että Chromella. Jos eivät näy niin luo samaan kansioon sivustosi kanssa .htaccess-tiedosto (piste on olennainen osa tiedoston nimeä) ja kirjoita sinne rivit:
AddCharset UTF-8 .html AddCharset UTF-8 .js AddCharset UTF-8 .css
Taso 1
Tee kuvan mukainen HTML 5-dokumentti ja toteuta ulkoasu yhdellä ulkoisella CSS-tiedostolla.
Ohjeita
- Värien, fonttien ja tekstien ei tarvitse olla täysin samat kuin mallissa. Sivulla olevien linkkien ei tarvitse toimia. Sivun layoutin täytyy olla mallia vastaava.
- Voit katsoa mallia ja kopioida tekstit alkuperäiseltä sivulta mutta älä kopioi suoraan lähdekoodia tai sivulla käytettyä css-koodia, koska ne eivät täytä viikkotehtävän vaatimuksia.
- Dokumentissa on käytettävä rakenteellisesti oikeissa paikoissa ainakin kertaalleen kutakin seuraavista HTML 5 -elementeistä: nav, header, h1, ul, li ja section
Taso 3
Toteuta ensimmäisen tason vaatimukset ja laajenna sivua seuraavan mallikuvan näköiseksi:
Ohjeita
- Sääennusteen sisällön ei tarvitse vastata mallikuvaa. Voitte ennustaa haluamaanne säätä kunhan ennusteviikon aikana on käytetty ainakin kolmea erilaista sääkuvaa
- Sivun värien pitää vastata alkuperäistä sivua.
- Värit saat poimittua mallikuvasta esim. Firefoxin ColorZilla-laajennuksella.
- Lisää dokumenttiin tulostusta varten oma css-tiedosto, joka piilottaa tulostettaessa navigoinnit ja jättää näkyville vain sivun varsinaisen ennustesisällön. lisätietoa.
Taso 5
Toteuta ensin edellisen tason tehtävä ja laajenna edellisen tason tehtävä seuraavan mallikuvan näköiseksi:
Ohjeita
- Myös sivun fonttien pitää vastata alkuperäistä sivua. Tutki Firebugin Inspector-välilehdeltä mitä fontteja alkuperäisellä sivulla on käytetty. Huom. Fontin koon on seurattava käyttäjän selaimen asetuksia eikä kuvakaappausta.
- Toteuta sivu siten, että samaa sivurunkoa ja kuvia käyttäen on helppoa muuttaa sääennustetta. Pidä huoli, että CSS:ssä ei oteta kantaa sivun sisältöön vaan sisältö löytyy HTML-dokumentista ja CSS on vain ulkomuotoilua varten. Esim. Jos tarvii tehdä uusi sääennuste niin se onnistuu muokkaamalla HTML-tiedostoa ja CSS-tiedostoon ei tarvitse koskea. Sademäärää kuvaavassa palkissa saa halutessaan käyttää style-attribuuttia.
- Dokumentoi CSS-tiedostoa ja/tai HTML-tiedosto siten, että sääennusteen sisällön osaa vaihtaa kuka tahansa näitä tiedostoja editoiva
- Tee sivusta responsiivinen. Jos selainikkuna on alle 640 pikseliä leveä niin sijoita sivulla vasemmassa laidassa oleva navigointi sääennusteen alapuolelle mutta ennen alapalkkia.
Käyttäjien kommentit