Harjoitustyö - ITKP1011 Web-julkaiseminen
- Harjoitustyön aikataulu
- Harjoitustyön aihe
- Komentorivi
- WWW-sivu
- Tarkistuskone
- Harjoitustyön palauttaminen
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).
WWW-sivuston painotus arvosanassa on 4/5. Komentoriviosuuden painotus on 1/5. Molemmat osiot on läpäistävä hyväksytysti. Jos saat www-sivusta arvosanaksi viisi ja komentoriviosuudesta hylätyn (0), niin koko työsi on silti hylätty. Tarkistuskoneen antama arvosana ei ole lopullinen, vaan erityisesti rajatapauksissa esim. keskiarvon ollessa 1.5, opettaja päättää ansaitseeko työ arvosanaksi 1 vai 2.
Harjoitustyön aikataulu
Harjoitustyöaihe on voimassa 30 päivää.
Harjoitustyön aihe
Harjoitustyön aihe tilataan harjoitustyökoneelta.
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
- small_-alkuiset tiedostot ovat sivujen mallikuvia mobiililaitteissa (tasot 3 ja 5)
- kuva-alkuiset tiedostot ovat kuvagallerian kuvia
- etusivu1.webp-tiedosto on etusivulle sijoitettava kuva
- large_index.html.webp-tiedosto on etusivun mallikuva
- musiikki.mp3-tiedosto on yhdelle sivulle sijoitettava äänitiedosto (taso 3)
- video.mp4-tiedosto on yhdelle sivulle sijoitettava videotiedosto (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
Komentorivi
Joudut tekemään komentoriviltä seuraavia asioita. Yksityiskohtaiset ohjeet saat tehtävää aloittaessasi.
Komentorivi taso 1
- Luomaan harjoitustyösi sivurakennetta vastaavan kansiorakenteen käyttäen komentoriviä. Osa kansioista on jo valmiiksi toteutettuna. Täydennä kansiorakenne ennen muita tehtäviä
- Kopioimaan tiedostoja
- Siirtämään tiedostoja
Komentorivi taso 3
- Muuttamaan tiedoston oikeuksia
Komentorivi taso 5
- Käyttämään putkitusta
- Käyttämään ohjelman tulostuksen edelleenohjausta
- Selviytymään erikoismerkeistä
Komentorivitehtävän tekeminen
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öä.
- Kirjoita komentoriville komento:
/opiskelu/itkp1011/itkp1011
- 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
WWW-sivu
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
WWW-sivu taso 1
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 kansiorakenteesi takia useampia kansiotasoja,
niin sinun täytyy luoda myös välitason kansioon sivu. Esim. taulukon sisältävä sivusi on kansiohierarkiassa
kolmannella tasolla.
- Jos aiot tehdä vain ykköstasolla olevan työn, älä luo muita kuin ykköstasolla vaaditut kansiot ja mahdollinen välitason kansio. Ä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:
- https://www.jyu.fi/
- https://www.jyu.fi/it/
- https://www.jyu.fi/it/fi/opiskelu/kandidaatti-ja-maisteriohjelmat/tietotekniikka
- https://appro.mit.jyu.fi/itkp1011/
WWW-sivu taso 3
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ä:
<meta name="viewport" content="width=device-width, initial-scale=1" />
- Sinulla on yksi sivu, jossa on poikkeava ulkoasu. Toteuta tämän
sivun ulkoasu ja sijoita tälle sivulle mallikuvaa vastaaviin paikkoihin seuraavat asiat:
- youtube-video
- Videotiedosto
- Äänitiedosto
- 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 esittää sivulla enintään edellämainitussa koossa kuvan oikeat kuvasuhteet säilyttäen. 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
WWW-sivu taso 5
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:
- Nimi
- Katuosoite
- Postinumero
- Postitoimipaikka
- Sähköpostiosoite
- 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)
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.
Tarkistuskone
Harjoitustyötä voi vapaasti testata ja tarkistaa Tarkistuskoneella. Voit käyttää tarkistuskonetta, niin usein tai, niin monta kertaa kuin haluat.
Harjoitustyön palauttaminen
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.
Käyttäjien kommentit