H9 Tehtävänanto Tiedostojen vienti Internetiin ja www-sivujen luonti Taustamateriaalissa on kuvattu tiedostojen vienti yliopiston www-palvelimelle (Internetiin, webbiin ). Tässä harjoituksessa viedään ensin tiedostoja jakoon webin kautta (tehtävä 1) ja toiseksi luodaan yksinkertaiset omat kotisivut (tehtävä 2). Vaikka et ylläpitäisikään varsinaisia kotisivuja, olisi kaikkien hyvä pystyä viemään dokumentteja ja materiaali verkkoon muiden saataville. Usein tulee tilanteita jossa haluaisi antaa materiaalia jakoon isommalle määrälle ihmisiä, vaikkapa muille kurssille osallistujille. Siinä tapauksessa verkko-osoitteen kertominen muille kurssilaisille vaihtoehtona sille että lähettää materiaalin kaikille sähköpostitse kuulostaa aika miellyttävältä vaihtoehdolta. Harjoituksesta palautetaan ratkaisutiedostona yksi tekstityyppinen tiedosto H9.txt, jossa annat osoitteet tehtävissä luotuihin www-sivuihin. Tehtävänannon jäljessä kurssisivuilla on malli tekstitiedostosta. Tehtävissä ei edellytetä että salaisit mitään hakemistoja, mutta jos harjoituksen vuoksi haluat sen tehdä, anna tarkastajalle myös hakemistoihin tarvittava tunnus/salasana -pari. Harjoituksen tavoitteet Harjoituksen tavoitteena on perehdyttää esityksen teon eri vaiheisiin. Osaamistavoitteet: osaan viedä tiedostoja Internetiin yliopiston www-palvelimen kautta osaan ratkaista niiden Internetissä näkymiseen liittyvät ongelmat muokkaamalla hakemistojen ja tiedostojen oikeuksia osaan luoda www-sivuja WYSIWYG-periaatteella toimivien sivueditoriohjelmien avulla ja viedä sivut näkyviin Internetiin yliopiston www-palvelimelle. Tehtävänanto Koska tämän harjoituksen tehtävänä on viedä tiedostoja oman kotihakemiston kautta näkyviksi webbiin, henkilöllisyyttäsi ei tässä harjoituksessa tarvitse (eikä voi) piilottaa. Tehtävä 1 (4p) Tiedostojen vienti yliopiston www-palvelimelle. Tee kotihakemistoosi yliopiston koneelle share-hakemisto, jonne voit viedä materiaalia webin kautta jakoon. (Pst. Lue välivaiheet ennen kuin teet mitään!) 1. Anna ensin (ks. taustamateriaali, kuva 4) kaikille suoritusoikeudet omaan kotihakemistoosi (others: - - x) 2. Luo kotihakemistoosi public_html-niminen hakemisto (taustamateriaali, kuva 3), ja anna myös siihen suoritusoikeudet kaikille (others - - x). 3. Luo public_html-hakemistoon alihakemisto, esim. nimelle share, ja anna kaikille lukuoikeudet ( hakemistolistauksen näyttöoikeus ) sekä suoritusoikeudet ( läpipääsyoikeus ) myös siihen. - 1 -
4. Vie alihakemistoon muutama tiedosto, ainakin yksi Word-dokumentti (joku.doc) ja kaksi kuvatiedostoa (joku.bmp, toinen.jpg). Jos annat share-hakemistoon lukuoikeudetkin (ts others r-x), tiedostojen pitäisi tulla näkyviin hakemistolistauksena osoitteeseen http://www.uta.fi/~etunimi.x.sukunimi/share/, kunhan sallit myös tiedostoille itselleen niiden näkymisen webissä (others r -). Kun kirjoitat osoitteen selaimesi osoiteriville, selainikkunan pitäisi näyttää jotakuinkin samalta kuin Kuvassa 1. Kuva 1 Www:ssä julkaistu tiedostoja sisältävä hakemisto, omassa hakemistopolussasi hakemistopolk voi olla joko http://www.uta.fi/~etunimi.x.sukunimi/share tai http://www.uta.fi/~ppt/share Luo tähän tehtävään vastauksena tekstitiedosto, johon kirjoitat kyseisen verkko-osoitteen (ts. osoite http://www.uta.fi/~etuni mi.x.sukunimi/share/ tai vaihtoehtoisesti voit käyttää hiukan kryptisempää muotoa http://www.uta.fi/~ppt/share/ Tämä on siis osoite, jossa arvioija voi käydä katsomassa jakamasi tiedostot. Tehtävä 2 (6p): Www-sivuston luonti Tässä tehtävässä tehdään pieni sivusto. Kannatettava idea olisi käyttää sivustoa omien töiden keräämiseen opintojen kuluessa. Erilaisia harjoitustöitä kertyy opiskelun aikana vaikuttava määrä, suuri osa niistä on elektronisessa muodossa. Sivusto voisi toimia arkistona, jonne tallennat, ja jolla esittelet opintojesi aikana tekemiäsi töitä. Paitsi että itsellesi sivustosta olisi iloa (ainakin minä voin kuvitella että näin jälkeenpäin sellainen arkisto olisi mielenkiintoinen) saattaisi se jossain vaiheessa esimerkiksi töitä hakiessasi tehdä työnantajaan ratkaisevan vaikutuksen. Sivuston viilaamiseen ja näyttävyyteen voit nähdä vaivaa halutessasi vielä vuosien ajan, mutta materiaalit olisi kuitenkin hyvä saada talteen heti alusta lähtien, muuten ne katoavat bittien taivaaseen. Nyt sivuston tietysti tulee olla näkyvissä arvoinnin ajan, mutta arvioinnin jälkeen voit kääntää sivuston pois näkyvista (others ei lukuoikeutta), kerätä töitä talteen sivustolle, mutta kääntää sen näkyviin vasta myöhemmin, kun olet sivuston ulkoasuun tyytyväinen. Tehtävässä vaaditaan, että sinulla on julkaistuna - yksi sivu (index.html) jossa on jotain tekstiä ja jokin kuva - kaksi muuta sivua (linkit.html ja arkisto.html), joihin on linkit etusivulta, ja näiltä sivuilta paluulinkit etusivulle - toisella lisäsivuista (linkit.html) on linkkejä muille internetissä julkaistuille sivuille - toisella lisäsivuista (arkisto.html) on linkkejä omiin tiedostoihisi - 2 -
Ennen tehtävän tekemisen aloittamista on varmaan hyvä käydä katsomassa malliksi tekemiäni sivuja (http://www.uta.fi/~aulikki.hyrskykari/). Näin saat selkeämmän mielikuvan siitä mihin seuraavassa tähtäät. Jos sivujen luonti on sinulle tuttua, voit luoda nämä edellytykset täyttävät sivut millä tavalla haluat, kunhan luot ne yliopiston serverille. Jos tämä on sinulle uutta, seuraavassa kerrotaan miten tehtävän voi tehdä SeaMonkey/Mozilla 1 -selaimen Composer -sivueditorin avulla. Mozilla on asennettuna mikroluokan koneisiin, kotikoneille saat sen osoitteesta http://www.seamonkeyproject.org/ (Download Now). Oman sivuston luonti - etusivu Siirretään sivut public_html hakemistoon vasta kun ne ovat valmiit (ei tehdä niitä suoraan sinne, jotta ne eivät vahingossa näkyisi Internetissä keskeneräisinä). Tee sivut ensin jossain muussa kansiossa/hakemistossa (esim. omatsivut, ehkä sinulla on jo hakemisto TTPK, johon luot hakemiston TTPK/omatsivut). Tallenna tässä tehtävässä luotavat tiedostot tuohon hakemistoon. Avaa SeaMonkey/ Mozilla. Voit käyttää sitä kuten muitakin selaimia, mutta käytetään tällä kertaa sen Composerosaa www-sivun luontiin (Kuva 2). Valitse Window Composer. Kuva 2 Sivujenluontieditorin, Composerin, avaaminen SeaMonkey (/Mozilla Composer) ohjelmassa. Avautuva Composer näyttää aika pitkälti ihan tavalliselta tekstinkäsittelyohjelmalta (Kuva 3). Voit kirjoittaa tekstiä ja säädellä sen ominaisuuksia normaalilla tavalla (ks. Formatvalikko) Kirjoita sivustollesi etusivu. Voit käyttää mallina Kuvaa 3, mutta saat tehdä sen oman mielesikin mukaan, kunhan teet sivuusi mallisivun tavoin Kuva 3 Omien sivujen etusivu luotuna SeaMonkeyn/Mozillan Composerissa. otsikon, kuvan, tekstiä ja kaksi linkkiä toisille sivuille (mallissa Linkkejä ja omat työt ). 1 Ohjelmiston nimi oli ennen Mozilla Suite, mikroluokan koneilta se saattaa edelleen löytyä nimellä Mozilla tai sitten nimellä SeaMonkey - 3 -
Tallenna dokumentti tekemääsi hakemistoon omatsivut jo heti otsikon kirjoittamisen jälkeen Save as komennolla nimelle index.html (luomaasi hakemistoon), ja muista taas tallentaa dokumenttiasi säännöllisin väliajoin. Kuvan saamiseksi sivuille käy ensin tallentamassa haluamasi kuva samaiseen äsken luotuun hakemistoon omatsivut. Vie tekstikursori kohtaan, johon haluat kuvan ja paina yläreunan image-painiketta. Nouda kuva Choose file painikkeesta, ja pidä huolta että URL is relative to the page location on valittuna. Tooltip-teksti voi olla jokin lisäselite kuvalle. Alternate text -kenttään laitetaan lyhyt selitys kuvalle niitä selaimia varten jotka eivät näytä kuvia (esimerkiksi ruudunlukijat). Dimensions-välilehdellä voit määritellä kuvan koon ja Appearance-välilehdellä sen sijoituksen sivulla. Etusivu kannattaa nimetä index.html -nimiseksi (kuten yllä pyydettiin), koska se on selainten oletus hakemiston pääsivuksi. Jos selaimessa annetaan vain hakemiston osoite, selain aukaisee sieltä index.html -tiedoston jos siellä sellainen on. Composer tuotti tiedostostasi automaattisesti HTML-koodiversion, voit sivun alalaidan lehdyköistä käydä mielenkiinnon vuoksi katsomassa miltä tiedostosi näyttää HTMLkoodina (HTML source), versiona jossa komennot (tägit) on korvattu pienin ikonein (HTML tags), ja vielä miltä se tulee näyttämään www-sivulta selaimella avattuna (vrt. punainen kehys Kuvassa 3). Kaksi lisäsivua Tee vielä kaksi sivua (New) joihin voit ottaa pohjan alla olevista esimerkeistä (tai omien tarpeidesi mukaisesti). Huom. Älä käytä verkkoon vietävien tiedostojen nimissä kansallisia kirjaimia (ä, ö, å, ü, ), kaikki selaimet eivät pysty niitä käsittelemään. Tässä esimerkissä on tehty kaksi sivua linkit.html, johon on tarkoitus kerätä mielenkiintoisia linkkejä omaan tarpeeseen (Kuva 4). Silloin ne ovat kätevästi saatavillasi missä tahansa konetta satutkin käyttämään (edellyttäen, että kone on verkossa). Lisäksi niistä saattaa olla iloa jollekulle muullekin. Toisen sivun (arkisto.html, Kuva 5) tarkoitus on toimia arkistona omille töillesi. Sen voi halutessaan laittaa salasanankin taakse, tai vaikkapa tehdä kaksi arkistosivua Kuva 4 Tiedostoon omatsivut\linkit.html tallennettava sivu. Kuva 5 Tiedostoon omatsivut\arkisto.html tallennettava sivu. - 4 -
joista toisen suojaa salasanalla (ks. taustamateriaali). Tallenna taas molemmat sivut (linkit.html ja arkisto.html) hakemistoon omatsivut. Tässä tapauksessa meillä on nyt hakemistossa kolme HTML-tiedostoa, index.html, linkit.html ja arkisto.html sekä yksi kuvatiedosto pinninpaaty.jpg. Linkit toimiviksi Täydennetään seuraavaksi sivuille linkit, joilla pääsee liikkumaan sivujen välillä ja lisäksi linkit linkkilistan sivuihin ja linkki johonkin omaan harjoitustyödokumenttiisi. Ota etusivu takaisin esiin. Jos suljit sivun välillä ja aukaisit sen selaimeen, pääset takaisin Composer-tilaan muokkaamaan sivua valinnalla File Edit Page. Tehdään linkki etusivun sanasta Linkkejä sivulle linkit.html. Aktivoi etusivulla sana ( maalaa ) Linkkejä, paina Link-painiketta ja paina aukeavassa dialogissa Choose File ja hae sieltä se tiedosto johon linkin halut liittää, tässä tapauksessa tiedosto linkit.htm. Liitä vastaavasti sana omat työt tiedostoon arkisto.html. Liitä myös kahden muun sivun paluulinkit vastaavasti etusivuun. Toisella sivulla, kun linkität oman sivuston ulkopuolisia sivuja, kirjoita tiedostopolun paikalle kyseisen sivun osoite (tai käy kopioimassa se osoiteriviltä toisessa selaimessa, jotta se tulee varmasti oikein). Linkki dokumenttitiedostoonkaan ei eroa muuten kuin että linkkiin yhdistettävä sivu onkin DOC- eikä HTML-tiedosto. Omille dokumenteille kannattaa tehdä alihakemisto (esim. omatsivut\arkisto) jotta ne eivät huku HTML-tiedostojen sekaan tai päinvastoin. Tätä harjoitusta tehdessäsi voit viedä kokeen vuoksi minkä tahansa tiedoston arkistoon. Tallenna kaikki kolme tiedostoa, ja sulje SeaMonkey/Mozilla. Mene kokeilemaan toimivatko sivusi paikallisesti ennen niiden vientiä www-palvelimelle. Kaksoisnapsausta index.html tiedostoa ja kokeile linkkiesi toimintaa. Toimivatko? Sivujen vienti yliopiston www-palvelimelle Taustamateriaalissa neuvottiin tiedostojen vienti palvelimelle yksityiskohtaisemmin. Tässä vielä lyhyt kertaus siitä miten se tapahtuu. Kopioi omatsivut-hakemistoon luomasi tiedosto index.html, linkit.html ja arkisto.html kotihakemistoon luomaasi hakemistoon (kansioon public_html). Kopioi sinne myös mahdollisesti sivulla käyttämäsi kuva ja arkistoitaville töille luomasi alihakemisto arkisto. Mikroluokissa voit tehdä tämän suoraan Windowsissa, kotikoneilta siirrät tiedostot esim. Tectia Client-ohjelman avulla. Kokeile toimivatko sivusi nyt selaimessa osoitteessa http://www.uta.fi/~ppt/ 1. Elleivät toimi, hakemistoille tai tiedostoille annetut oikeudet eivät todennäköisesti ole oikein. Hakemistoille pitää antaa kaikille (others) luku- ja suoritusoikeudet ja tiedostoille kaikille (others) pitää olla annettuna lukuoikeudet. Muista, että suoritusoikeudet pitää olla kaikissa hakemistorakenteen hakemistoissa, lähtien omasta kotihamistostasi (/home/home2/cs1 ja siellä oma peruspalvelutunnuksesi). Tästä harjoituksesta jätetään siis vain yksi pieni tekstitiedosto jossa on tiedot siitä missä webbiin viemäsi tehtävän 1 share-hakemisto sijaitsee. Sen perusteella arvioija voisi jo päätellä kotisivujesi osoitteen, mutta jotta arvioija tietää, että olet luonut 1 Huom! Osoitteessa olevaa merkkijonoa ppt ei tietenkään pidä ottaa kirjaimellisesti, vaan sen paikalla tulee peruspalvelutunnuksesi. Aaltoviivan kuuluu olla sen edessä! - 5 -
myös kotisivut tehtävään 2, anna tekstitiedostossasi myös kotisivujesi osoite (ja mahdollisesti salaamiesi hakemistojen tunnus/salasana parit). Malli jätettävän tekstitiedoston muotoilemiseen on annettu kurssisivuilla tehtävänannon yhteydessä. - 6 -