fi fi fi fi hbs_lat it it it fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi hbs_lat fi it fi fi fi it fi it fi fi fi fi fi fi fi hbs_lat fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi it fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi en fi fr fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi it fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi gl fi fi fi fi fi fi fi fi fi ru fi fi fi
Harjoitustyönä toteutetaan www-sivusto. Lisäksi osoitetaan komentorivikäyttötaito tekemällä erillinen komentorivitehtävä.
Harjoitustyön vaatimukset on jaettu kolmeen eri tasoon. Jos työsi toteuttaa ensimmäisen tason vaatimukset, niin saat kurssista arvosanaksi yksi (1). Jos työsi toteuttaa kolmostason vaatimukset, niin saat kurssista arvosanaksi kolme (3). Jos työsi toteuttaa viitostason vaatimukset, niin saat kurssista arvosanaksi viisi (5). Jos työsi täyttää vain osittain kolmos- tai viitostason vaatimukset, niin voit saada arvosanaksi myös kaksi (2) tai neljä (4).
Harjoitustyöaihe on voimassa 30 päivää. Harjoitustyöaihe on tilattava viimeistään 1.11.2022.
Harjoitustyö on tehtävä ja palautettava 30 päivän kuluessa työn aiheen tilaamisesta. Huomaa kuitenkin edellisessä kohdassa mainittu viimeinen mahdollinen tilauspäivä.
Harjoitustyökone arpoo jokaiselle zip-paketin, joka sisältää seuraavat asiat:
Harjoitustyössä tarvittavat tekstit (text_-alkuiset tiedostot). Avaa kyseiset tekstitiedostot notepad++:lla tai jollakin muulla tekstieditorilla.
large_-alkuiset tiedostot ovat sivujen mallikuvia
kuva-alkuiset tiedostot ovat kuvagallerian kuvia
etusivu1.webp-tiedosto on etusivulle sijoitettava kuva
musiikki.mp3-tiedosto on yhdelle sivulle sijoitettava äänitiedosto (taso 3)
ohje.html-tiedoston, jossa kerrotaan osoite, johon sivusto on sijoitettava, sivustolla käytettävän kirjasimen (fontin) nimi ja myös kansiorakenne, johon sivusto on rakennettava. Kansiorakenne käy ilmi myös mallikuvissa olevan navigointipalkin sisältämästä linkkilistasta. Samassa tiedostossa näkyvät myös mallikuvat tehtävistä sivuista. Huom. mallikuvien ympärillä oleva musta reunus esittää selainikkunan reunoja eikä sitä pidä toteuttaa sivuille.
pohja.html, joka on automaattisia tarkistuksia sisältävä valmis sivupohja. Toteuta kaikki dokumenttisi tätä pohjaa käyttäen. Valmiissa pohjassa oleva tarkistin näyttää sivusi oikeassa ylänurkassa punaisen varoitusmerkin, jos sivullasi on sen huomaamia virheitä. Katso virheilmoitukset selaimen konsolista : Firefox: CTRL+SHIFT+K tai Chrome: CTRL+SHIFT+J. Sivupohjassa oleva tarkistin huomaa vain pieniä virheitä. Virallinen tarkistuskone on tarkempi.
Lisäksi paketissa voi olla yksi tai useampia viitostasolla tarvittavia kuvatiedostoja
Joudut tekemään komentoriviltä seuraavia asioita. Yksityiskohtaiset ohjeet saat tehtävää aloittaessasi.
Luomaan harjoitustyösi sivurakennetta vastaavan kansiorakenteen käyttäen komentoriviä. Osa kansioista on jo valmiiksi toteutettuna. Täydennä kansiorakenne ennen muita tehtäviä
Komentorivitehtävän voi tehdä, kunhan on ensin tilannut itselleen harjoitustyöaiheen. Komentorivitehtävä tehdään seuraavasti:
Ota ssh-yhteys (esimerkiksi putty-ohjelmalla) halava.cc.jyu.fi- tai jalava.cc.jyu.fi-koneeseen. Varmista, että yhteys käyttää UTF-8-merkistöä.
Siirryt uuteen tyhjään kansioon, joka ei liity millään tavalla omiin tiedostoihisi
Luo tähän kansioon samanlainen kansiorakenne, kuin WWW-sivustoosi vaaditaan. Kansiorakenteen kuvaus löytyy harjoitustyöpaketissasi olevasta ohje.html-tiedostosta
Osa kansioista on jo luotu. Sinun on itse luotava komentorivin kautta puuttuvat kansiot.
Saat liudan ohjeita joita sinun tulee noudattaa. Kaikki ohjeet eivät mahdu kerralla näytölle, mutta voit lukea ohjeita aina tarpeen mukaan ohje.txt-tiedostosta
Voit tarkistuttaa komentorivitehtäväsi milloin tahansa komennolla tarkista
Kirjoita komento exit, kun olet toteuttanut tehtävät. Tehtävä kuitataan suoritetuksi vasta exit-komennon jälkeen
Tässä tehtävässä komentoriviltä luodulla kansiorakenteella ei ole mitään tekemistä www-sivujesi tai W:- ja U:-aseman tiedostojesi kanssa.
Kopioi tehtävän toteuttamisen jälkeen U:-asemaltasi itkp1011_log.txt-tiedosto harjoitustyösivustosi juurikansioon W:-asemalle
Komentorivitehtävä on tehtävä kokonaan samalla yhteyskerralla. Tehtävää ei voi jättää kesken ja jatkaa myöhemmin.. Jos aloitat tehtävän uudelleen, niin korvaat edellisen suorituksen.
Jos komentorivitehtäväsi meni jotenkin pieleen, voit aina tehdä tehtävän uudelleen, kunhan muistat lopettaa edellisen version ensin exit-komennolla
Kaikille tasoille yhteisiä vaatimuksia ja ohjeita ovat:
Dokumenttien sisäisen rakenteen pitää olla järkevä eli käytä rakenteellisesti oikeita elementtejä.
Jokaisen dokumentin täytyy noudattaa HTML5-dokumenttityyppiä. Dokumenttien on oltava valideja. Muista tarkistaa sivusi validaattorilla.
HTML-dokumenteissa ei saa esiintyä CSS-määrityksiä eikä muita pelkästään ulkoasuun liittyviä määrityksiä vaan kaikki ulkoasumääritykset on tehtävä erillisessä CSS-tiedostossa.
CSS-tiedoston pitää myös olla syntaktisesti validi eikä siitä saa tulla myöskään varoituksia. Tarkista CSS-tiedostosi CSS Validation Servicellä
Kaikilla sivuston sivuilla on käytettävä ulkoasun muotoiluun samaa CSS-tiedostoa. Sivustolla saa siis olla käytössä vain yksi CSS-tiedosto.
Mittayksiköinä tulee käyttää skaalautuvia yksiköitä aina kun mahdollista. Pikselien käyttöä tulee välttää.
Sivuston ulkoasun täytyy olla järkevästi selaimen kokoon mukautuva
Sivuston ulkoasun on noudatettava annettuja mallikuvia. Huom! Tarkoitus ei ole tehdä pikselilleen samannäköistä vaan rakenteen, värien ja fonttien ym. osien on vastattava mallia ja sivun on skaalauduttava järkevästi selainikkunan kokoon. Sivun on osattava hyödyntää kaikki selainikkunassa käytettävissä oleva tila. Älä muuta sivusi kirjasinkokoa tai riviväliä. Oikein tehty sivu näyttää ulkoasutarkistuskoneen mielestä samalta kuin mallikuvat.
WWW-sivuston on sijaittava users.jyu.fi-palvelimella ja tehtävän tekijän omassa kansiossa ja tarkistuskoneen määräämässä alikansiossa. Muilla palvelimilla sijaitsevat sivut eivät kelpaa.
Sivustolla käytettyjen valokuvien on oltava JPG-muodossa. Joudut itse muuttamaan kuvat oikeaan muotoon ja kokoon. Käytä JPG-kuvien tiedostopäätteenä .jpg-päätettä.
WWW-sivulla käytettävän kuvan maksimikoko on 512x480 pikseliä ellei toisin määrätä.
Jos sivulta on linkki suoraan kuvatiedostoon eli esim. galleriasta isompiin kuviin, niin näiden linkitettyjen kuvien maksimikoko on 1024x960 pikseliä. Linkitetyn kuvan pitää olla selvästi suurempi, kuin linkkinä käytetty kuva.
Säilytä kuvien alkuperäiset kuvasuhteet.
Suositeltavaa on käyttää harjoitustyön dokumenteissa UTF-8-merkistöä. Varmista, että myös WWW-palvelin käyttää UTF-8-merkistöä ja kopioi sivustosi juureen harjoitustyöpaketissa tuleva .htaccess-tiedosto, joka varmistaa, että merkistö on oikea. Varmista, että skandinaaviset merkit näkyvät oikein sekä Firefoxilla että Chromella. Harjoitustyön materiaalipaketissa on käytetty UTF-8-merkistöä.
Sivustolla on jokaisen html-tiedoston nimi oltava index.html, index.xhtml tai index.shtml. Jokaista sivua varten on tehtävä oma kansio. Kts. koneen sinulle arpoma kansiorakenne. Tee linkit osoittamaan aina suoraan kansioon eikä index.html-tiedostoon. Kansioon osoittavan linkin on aina päätyttävä /-merkkiin.
Navigaatiopalkissa tulee olla kaikki sinulle arvottua sivuston rakennetta vastaavat listan kohdat huolimatta siitä mihin arvosanaan tähtäät.
Kaikkien harjoitustyön sivujen täytyy toimia järkevällä tavalla Firefox- ja Chrome-selaimilla
Toteuta koneen antaman materiaalipaketin pohjalta seuraavat asiat:
Sivuston ensimmäinen sivu eli kansiorakenteessa ylimpänä oleva sivu (etusivu). Sivun rakenteen ja ulkoasun on vastattava mallikuvaa (large_index.html.webp).
Toteuta alasivu jolla on käytetty taulukkoa. Varmista, että toteuttamasi sivun sisältö vastaa annettua mallikuvaa (large_kansionnimi.webp). Luo vaadittava kansiorakenne. Jos joudut luomaan välikansioita, niin sinun täytyy luoda myös näihin kansioihin sivut
Jos aiot tehdä vain ykköstasolla olevan työn, älä luo muita kuin ykköstasolla vaaditut kansiot ja mahdollinen välikansio. Älä tee linkkejä muille kuin vaadituille sivuille. Jos teet ylimääräisiä linkkejä etkä kuitenkaan toteuta niitä vastaavia sivuja valmiiksi, niin tarkistuskone hermostuu. Jokaisessa luodussa kansiossa täytyy olla kelvollinen index.html-tiedosto
Sivun alalaidasta on oltava suhteellinen linkki etusivulle
Etusivun navigointipalkista on oltava suhteellinen linkki toteuttamallesi alisivulle.
Molemmilla sivuilla (etusivu + toinen sivu) olevan sivunavigointipalkin kaksitasoinen lista on toteutettava. Linkkejä ei tarvitse toteuttaa muille kuin etusivulle ja toiselle alisivulle, mutta kaikkien sivujen nimet on joka tapauksessa oltava näkyvillä navigointipalkissa.
Etusivulle on lisättävä materiaalissa annettu ja mallikuvassa näkyvä kuva. Kuvasta on oltava linkki suurempaan versioon kuvasta.
Toteuttamiesi sivujen fonttien ja värien on vastattava mallikuvia. Sivustollasi käytettävän fontin nimi kerrotaan harjoitustyöpaketissasi tulleessa ohje.html-tiedostossa. Sivustolla käytettävää fonttia EI tarvitse löytyä omalta koneeltasi.
Oikeat värit voit poimia mallikuvista Firefoxin Eyedropper-työkalulla. Avaa mallikuva Firefoxilla (File|Open) ja aktivoi Eyedropper valitsemalla Tools|Web developer|Eyedropper.
Sivun ylälaidan navigointipalkin linkkien on toimittava. Linkit johtavat seuraaviin osoitteisiin:
Toteuta ensin taso 1 -mukainen sivusto. Laajenna sivustoa seuraavilla asioilla:
Luo koko sivuston vaatima kansiorakenne
Toteuta kaikki sivut ja mallikuvissa (large_-alkuiset kuvat) näkyvä ulkoasu
Poikkeus: sivulla, jonka pääotsikossa lukee "Taso 5", ja jolla on lomake, ei tarvitse toteuttaa muuta kuin sivun tekstisisältö ja peruslayout. Lomake ja sivun alaosan tekstin päällä kelluva lohko toteutetaan vasta tasolla viisi.
Toteuta suhteellinen linkitys kaikkien sivujen välillä (navigointipalkki)
Toteuta sivustolle responsiivinen ulkoasu käyttäen mediakyselyjä.
Sivuston sisällön on skaalauduttava siististi ja selkeästi alle 600 pikseliä leveissä näytöissä. Tarkistuskone käyttää 512 pikselin levyistä näyttöä.
Kunkin kansion sivun ulkoasun on vastattava small_kansionnimi.webp-mallikuvaa.
Sivulle ei saa tulla vaakasuuntaista skrollbaria.
Leveämmissä näytöissä käytetään large_kansionnimi.webp-mallikuvien antamaa ulkoasua.
Varmista, että sama ulkoasu toimii kaikilla sivuilla.
Sivuston navigoinnin on oltava käyttökelpoinen myös kapeissa näytöissä
Lisää sivustolle myös ulkoasu tulostamista varten. Piilota tulostuksesta navigointipalkit. Käytä tulostuksessa kirjasimena "Times New Roman" -kirjasinta.
Lisää jokaisen html-dokumenttisi head-elementin sisään seurava rivi, niin responsiivisuus toimii kännyköissä:
Sinulla on yksi sivu, jossa on poikkeava ulkoasu. Toteuta tämän sivun ulkoasu ja sijoita tälle sivulle mallikuvaa vastaaviin paikkoihin seuraavat asiat:
Hakulomake, joka hakee Googlella tietoja vain kurssin kotisivulta eli osoitteesta https://appro.mit.jyu.fi/itkp1011/
Jos tämän sivun ulkoasu ei vastaa kunnolla mallia, et voi saada arvosanaksi kolmosta. Varmista, että sivu toimii järkevästi myös kapealla (512 px) näytöllä.
Toteuta yhdelle sivulle mallikuvan mukainen kuvagalleria.
Galleriassa olevien kuvien maksimikoko on 256x200 pikseliä. Kuvat täytyy muuttaa oikeaan kokoon kuvankäsittelyohjelmalla. Pelkästään CSS:llä tehty kuvien pienentäminen ei kelpaa, koska tulos on ruma ja kuvatiedostot jäävät liian suuriksi.
Kuvista on oltava linkit kuvien suurempiin versioihin.
Galleria on toteutettava käyttäen CSS:n flex-ominaisuutta. Kuvia on tultava sivulle rinnakkain, niin monta kuin leveyssuunnassa mahtuu.
Kuvien otsikkotekstien on oltava oikealla tavalla sijoiteltuja
Varmista, että sivusi ulkoasu on myös välistystä, reunoja ja marginaaleja myöten vastaava kuin mallikuvissa
Toteuta ensin tason 3 -mukainen sivusto. Laajenna sivustoa seuraavilla asioilla:
Toteuta kunkin sivun laidassa oleva navigointipalkki (sivuston sisäinen navigointi eli kansiorakennetta vastaava) SSI:n avulla siten, että sitä voidaan ylläpitää 1-3 SSI-tiedostolla. kts. Pääteohjaus 7.
Jokaisen SSI-tiedoston nimen täytyy olla itkp1011.ssi
Linkkien pitää edelleen olla suhteellisia. Puoliabsoluuttiset linkit eivät kelpaa.
Suojaa kuvagalleriasivu salasanalla. Käytä tunnuksena kurssikoodia: ITKP1011. Käytä salasanana omaa käyttäjätunnustasi. Tämä suojaa samalla salasanalla myös kaikki mahdolliset galleriasivun alikansiotkin.
Luo mallikuvien osoittamalle sivulle lomake, jolla kysytään seuraavat asiat:
Sukupuoli (mies, nainen tai en kerro)
Syntymäaika (oltava vähintään 1.1.1900 mutta enintään 1.1.2017)
Kengän numero ( 20 - 60 )
Tilattavat lisäpalvelut: aamiainen, päivällinen, välipala, iltapala, yöpala (0 tai useampia valittavissa)
Lomakkeen ulkoasun on vastattava saamaasi mallikuvaa. Käytä kentille järkeviä labeleja oikealla tavalla. Varmista, että lomake toimii järkevästi myös kapealla näytöllä (kts. mallikuvat). Kaikki muut kentät ovat pakollisia paitsi lisäpalvelut.
Käytä lomakkeen käsittelijänä: https://appro.mit.jyu.fi/cgi-bin/view.cgi
Toteuta lomakesivun alalaidassa oleva erikoislohko ulkoasultaan mallikuvia vastaavaksi.
Zip-paketissa on mukana 1-3 kuvaa joita tarvitset apuna toteutuksessa. Kuvia ei saa käsitellä tai muokata kuvankäsittelyohjelmilla. Poikkeus: kuvan tiedostomuodon saa vaihtaa jpg-muotoon.
Kaikki muu paitsi valmiit kuvat on toteutettava omalla html-koodilla ja CSS:llä.
Arvosanaksi ei voi saada suurempaa kuin neljä (4) ellei tätä osaa ja lomaketta ole saanut toteutettua edes kohtuullisesti.
Sivustosi on täytettävä kaikki kolmostason vaatimukset ennen kuin voit saada arvosanaksi neljä tai viisi.
Harjoitustyötä voi vapaasti testata ja tarkistaa Tarkistuskoneella. Voit käyttää tarkistuskonetta, niin usein tai, niin monta kertaa kuin haluat.
Jo palautettua ja arvosteltua työtä ei voi enää korjailla tai laajentaa. Jos haluaa paremman arvosanan, niin täytyy tehdä kokonaan uusi työ (vrt. uusintatentti).
Jos palautettu työ hylätään, niin työtä saa korjata hyväksyttävään muotoon, mutta maksimiarvosana työlle on tällöin yksi (1).
Valmis harjoitustyö palautetaan tarkistuskoneen kautta. Tarkista työsi koneella. Jos et saa koneelta työstä valituksia, niin voit palauttaa työsi tarkistuskoneen sivulta löytyvällä painikkeella. Työn voi palauttaa vasta, kun työ läpäisee tarkistuskoneen.
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta