H20 HELP TO ORPHANS ry:n uudet internet-sivut. Eveliina Aaltonen
|
|
- Anne Korpela
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 H20 HELP TO ORPHANS ry:n uudet internet-sivut Eveliina Aaltonen Audiovisuaalisen viestinnän ammattitutkinto Eurajoen kristillinen opisto, 2015
2 1 ASIAKAS JA PROJEKTI Asiakas Ensimmäinen tapaaminen ja projektin alkuunpano Tapaamisen yhteenveto projektin kuvaus PROJEKTIN ETENEMINEN SUUNNITTELUVAIHE Logo Sivujen ulkoasu pääelementit Tippunavi CSS:ää käyttäen Etusivun elementit Facebook-fiidin käyttö tuomaan sivuille liikettä Etusivun layoutin muodostuminen Osio- ja alasivujen layout ja ulkoasu PROJEKTIN VARSINAINEN TUOTANTO Sisältömateriaalin toimittaminen Leiskasta sivustoksi Kuvien käsittely Photoshop Koodausta ja huomioita Metatiedot Sähköpostiosoitteet sivustolla VIRHEET, SOLMUTILANTEET JA VALIDOINTI Päänvaivaa kadonneesta taustakuvasta JULKAISU JA NÄKYMINEN ERI SELAIMISSA JA LAITTEILLA SIVUJEN PÄIVITTÄMINEN JA KÄVIJÄSEURANTA KÄYTETYT OHJELMAT SEKÄ HUOMIOITA JA MIETTEITÄ PROJEKTISTA Käytetyt ohjelmat Koodin kommentointi ja sivujen nimeäminen Kieliversiot Haitariesite ja käyntikortit... 19
3 8. PROJEKTIIN KÄYTETTY AIKA JA KUSTANNUSARVIO Kustannusarvio YHTEENVETO... 21
4 4 1 ASIAKAS JA PROJEKTI 1.1 Asiakas Lokakuussa 2014 varmistui työssäharjoittelujaksoni asiakkaaksi hyväntekeväisyysjärjestö H2O Help to Orphans ry. Järjestön perustivat vuonna 2004 kolme kristittyä ystävystä auttamaan orpoja Thaimaassa, Burmassa (Myanmar), Botswanassa ja Tanzaniassa. Ry:n puheenjohtana toimii Peter Willis ja hänen varamiehenään Axel Barbette. Axel oli jo aikaisemmin kysellyt, osaisinko opastaa häntä löytämään internetistä kotisivukone-sivuston, koska he halusivat järjestölle uudet, kunnolliset sivut. Tuolloin oli järjestön vanhat kotisivut poistettu näkyvistä, koska kaikki tieto siellä oli auttamatta vanhentunutta. Työharjoittelujakson lähestyessä ei järjestön kotisivuprojekti ollut edennyt mihinkään, joten päätin soittaa Axel Barbetelle ja kysyä, mitä mieltä he olisivat, jos tekisin heille uudet sivut työhärjoitteluna. Axel sanoi minun olevan vastaus rukouksiin ja niin asiakkaani varmistui. Projektin kieli oli englanti. Tässä kohden mainittakoon, että olen ennen tätä koulutusta työskennellyt kymmenen vuotta graafisena suunnittelijana mainosalalla ja minulla on ollut isoja asiakkaista ja monipuolisia työtehtäviä. Tästä on ja oli tietysti valtavasti etua projektia ajatellen. 1.2 Ensimmäinen tapaaminen ja projektin alkuunpano Kun asiakkuus selvisi, keskustelimme asiakkaan kanssa lyhyesti siitä, miten projekti laitetaan alkuun. Sovimme tapaamisesta ja pyysin asiakasta miettimään, mitä he projektilta halusivat ja toivoivat. Pyysin myös alustavasti heitä hahmottelemaan päänavigointia, mikä olisi ikään kuin projektin sisällysluettelo, sekä miettimään sivujen visuaalista ilmettä: Oliko heillä jokin ajatus sommittelusta, olivatko he ajatelleet värejä jne. Minulle asiakas lähetti materiaalia järjestöstä ja sen toiminnasta PDF-muodossa. Ennen ensimmäistä tapaamista listasin ranskalaisin viivoin erinäisiä kysymyksiä ja ajatuksia paperille.
5 5 Tavatessamme asiakas ensin lyhyesti kertoi järjestöstä ja sen toiminnasta ja esittelimme toisemme. Asiakas myös antoi minulle tulosteen, jossa oli hienosti listattuna esimerkiksi projektin tavoitteet ja heidän ajatuksiaan sivun ulkoasusta. Lisäksi sain Peter Willisin hahmotelman etusivun visusta. Tämä kaikki loi hyvän pohjan, jonka perusteella aloitin sivujen suunnittelun. Muita tapaamisessa käsiteltyjä asioita olivat mm. domainin siirto aiemmasta norjalaisesta webhotellista Suomeen, tulevien uusien sivujen päivittäminen ja linkittäminen Facebookiin, Googlen referenssit, kuvien ja materiaalinen toimittaminen minulle, missä muodossa, miten kätevintä, tekstisisällöt ja järjestön logo Tapaamisen yhteenveto projektin kuvaus Asiakaalla on tarve päivittää kotisivunsa, joiden avulla esitellä toimintaansa ja löytää uusia lahjoittajia. Ulkoasusta ja rakenteesta toivottiin yksinkertaista, kevyttä ja ammattimaista. Asiakkaalla oli hahmotelma järjestön logosta. Asiakas skannaisi hahmotelman minulle, jonka pohjalta tekisin logon Illustrator-ojelmassa ja hienosäätäisin sitä. Väriksi sovittiin jonkinlainen (asiakkaan termi) sininen. Lupasin lähettää muutaman eri version logosta eri fontein asiakkaalle katsotavaksi. Asiakas lähetti minulle etusivu-hahmoitelmassa olevat kuvat sähköpostilla. Tekisin hahmotelman pohjalta heille leiskausta sivustosta. Väreiksi toivottiin jonkinlainen sininen ja harmaa. Lupasin soittaa suomalaisen webbihotellin tarjoajalle, mitä domainin siirtoon tarvittiin, ja ottaa sitten yhteyttä asiakkaaseen.
6 6 2 PROJEKTIN ETENEMINEN SUUNNITTELUVAIHE 2.1 Logo Otin ensimmäiseksi työn alle järjestön logon. Avasin asiakkaan skannaaman ja minulle lähettämän logon Illustrator-ohjelmassa ja aloin rakentaa logoa sen päälle. Haasteellisin työ logon kanssa olivat ympyrät. Niiden tarkoitus oli kuvata ilmiötä, mikä tapahtuu, kun veteen heitetään kivi. Ympyröitä piti kuitenkin muokata myös sellaisiksi, että päällä olevan kuvion voisi mieltää ristiksi. Kun logon liikemerkkiosuus oli valmis, lisäsin siihen tekstit ja aloin kokeilla eri värivaihtoehtoja sovitusta tummasta sinisestä. Päädyin harmaaseen taittuvaan siniseen, joka on mielestäni näytöllä rauhallisempi kuin puhdas sininen. Tämä väri oli myös asiakkaan mielestä paras. Fontiksi olisin valinnut jonkin päätteettömän ja vahvan, mutta asiakas valitsi fontiksi lihavoidun Times New Romanin. Värin ja tekstien ollessa kohdillaan tein logosta lopullisen version leikkaamalla ympyröistä ristin muotoisen osan pois Pathfinderiä käyttäen.
7 7 Samalla tein logosta version, jossa kaikki fontit ja viivat oli outlainattu ja expandattu muodoiksi. Näin fontin puttuminen tai sen koon muuttaminen ei vaikuta fontin käyttöön tai mittasuhteisiin. Asiakkaalle toimitin aluksi logosta jpg- ja png-versiot, joita he voivat käyttää esimerksiksi sähköpostien allekirjoituksissa ja PowerPoint -esityksissä. Kaiken materiaalin ollessa valmista sai asiakas myös Illustrator-tiedoston. Mikäli olisin suunnitellut logon ilman asiakkaalta tullutta hahmotelmaa, olisin tehnyt siitä dynaamisemman. Logo on kohdassaan hyvä ja toimiva, mutta kokonaisvaltainen keskittäminen tekee siitä hieman tavanomaisen.
8 8 2.2 Sivujen ulkoasu pääelementit Aloin suunnitella sivuja ja niiden ilmettä asiakkaalta saamani hahmotelman mukaan. Asiakas oli saanut idean sivustosta, johon oli törmännyt internetissä. Yksi hallitsevista elementeistä olisi Thaimaalaista vuorimaisemaa esittävä taustakuva. Keskustelimme asiakkaan kanssa tällaisen kuvan eduista ja haitoista, kuten siitä, miten sivujen latautuminen saattaa hidastua. Toinen koko sivuston mukana seuraava elementti olisi järjestön logo, johon lisäisin linkin etusivulle, ja kolmas tippunavigointi. Mukana seuraisi myös footeri sivun alaosassa Tippunavi CSS:ää käyttäen Asiakas oli omia sivujaan ajatellen käynyt läpi erilaisia internet-sivustoja ja halusi ehdottomasti omalle sivustolleen tippunavigoinnin, jonka avulla kävijä saisi heti käsityksen sivuston sisällöstä. Päätasolla navigointi näyttää sivuston rungon, joka jakautuu eri osioihin. Kävijän napsauttaessa itsensä sisälle osioon, tulee alasivujen navigointi näkyviin myös sivun vasempaan laitaan. Päätös oli, että vaikka navigointi näin on sivuilla tuplana, annetaan sen olla. Päänavigointi on sivun ranka, sivunavigointi taas auttaa käyttäjää hahmottamaan sijaintinsa sivustolla. Tapoja tällaisen tippunavigoinnin tekemiseen oli kolme, käyttää spryelementtiä, javascriptiä tai CSS:ää. Valitsin CSS:n, joka ei tarvitse toimiakseen minkäänlaisia lisäosia selaimeen. Oli mielenkiintoista selvittää haasteet, joita tällä tavalla tekeminen toi eteeni. Kun lopulta navigointi oli valmis ja toimi, tunsin mahtavaa onnistumisen iloa. 2.3 Etusivun elementit Asiakas halusi, että etusivu olisi koko sivuston lailla rauhallinen ja yksinkertainen. Asiakkaalla oli hahmotelmassaan ainoastaan navigointi ja kaksi valokuvaa avustuskohteen lapsista. Minusta etusivu kuitenkin vaati lyhyen kuvauksen sivustosta ja/tai järjestöstä, jonka toiminnasta sivusto kertoo, sekä kävijää että hakukoneita varten. Kerroin tämän asiakkaalle, joka oli samaa mieltä.
9 Facebook-fiidin käyttö tuomaan sivuille liikettä Asiakkaan etusivuhahmotelmasta puuttui myös Facebook-fiidin paikka, johon päivittyisi automaattisesti tietoa järjestön Facebook-sivulta. Fiidi toisi sivuille liikettä ja korvaisi ajankohtaista-osion. Facebook saavuttaa ihmiset varmemmin päivittäin, joten sekä tuo seikka että asiakkaan päivitystaidot ja päivittämiseen käytettävän ajan puuttuminen puolsivat päätöstä Facebook fiidin toimimisesta sivujen päivittämiselementtinä. Tässä mainittakoon, että asiakas ei aikaisemmin ollut ajatellut ollenkaan käyttää Facebookia toiminnassaan. Asiakkaan mielestä Facebook oli hömpötys, jonka avulla tahdotaan vain esitellä itseään. Keskustelimme asiasta ja avattuaan oman sivunsa Facebookiin asiakas sisäisti Facebookin tuomat mahdollisuudet. Nyt voitaisiin kysyä, onko Web designerin järkevää ehdottaa asiakkaille Facebookia. Korvaavatko asiakkaat kotisivunsa kokonaan Facebookilla? Minä en näe asiaa näin, vaan minusta Facebook toimii kätevänä kotisivujen tukena. 2.4 Etusivun layoutin muodostuminen Etusivulle tulevan materiaalin selvittyä siirryin sen visuaaliseen suunnitteluun. Layout muovautui vähitellen haluamakseni. Tämä vaihe vei yllättävän paljon aikaa, koska en itse ollut tyytyväinen näkemääni. Kokeilin siis montaa eri järjestystä. Aloitin piirtämällä suunnitelmia paperille tarvittavien divien määrän laskemiseksi. Sivujen leveydeksi päätin 980 pikseliä, joka on suhteellisen turvallinen koko, katsottiin sivuja minkälaisella näytöllä tahansa. Tuo leveys näyttää siedettävältä myös matkapuhelimen ruudulta. Tein layouttia suoraan Dreamweaveriin. Värejä testailin Photoshopissa ja Illustratorissa. Värien pohjana toimi logoon valittu sininen. Oman haasteensa suunnitteluun toi taustakuva. En halunnut peittää kuvaa liikaa mielessäni lause miksi käyttää kuvaa, jollei sitä edes näe. Upotin taustakuvan suoraan html:ään. Web designer -foorumilta löysin määreet, joiden avulla kuva käyttäytyy kauniisti sivuilla.
10 Osio- ja alasivujen layout ja ulkoasu Saatuani etusivun siedettäväksi aloin suunnitella alasivuja. Jokaiselle päänavin linkistä pääsee osion etusivulle, jossa lyhyesti kootaan osion sisältö. Pääelementit kuten taustakuva, logo ja päänavigointi pysyvät läpi sivuston samanlaisina. Alasivuilla vasemmassa laidassa on alanavigointi ja sisältö on yhdessä leveässä palstassa. Fontti on turvallinen Verdana sekä navigoinneissa että sisältötekstissä. Tekstiä ei haluttu liikaa, vaan napakka pakkaus, josta sivuillakävijä nopeasti saa käsityksen järjestöstä ja sen toiminnasta. Sivuilla olevilla kuvilla on tärkeä tehtävä kertoa lapsista ja puitteista Thaimaassa, sanotaanhan, että kuva kertoo enemmän kuin tuhat sanaa.
11 11 Saatuani valmiiksi kolme ensimmäistä sivua siirsin ne webhotelliin ja asiakkaan katsottavaksi ja kommentoitavaksi. Samalla pääsin itse katsomaan, miten sivut verkossa toimivat. Olin jo ennen tätä validoinut sivut sekä niiden CSS-tiedoston W3C-validaattoreilla. Asiakas oli tyytyväinen suunnittelemaani leiskaan, joten pääsin toden teolla sivujen kimppuun.
12 12 3 PROJEKTIN VARSINAINEN TUOTANTO 3.1 Sisältömateriaalin toimittaminen Aikaisempi kokemus on opettanut, että ehkä tärkeintä on heti sopia, miten toimitettavat materiaalit nimetään. Kun nimeäminen on hoidettu selkeästi, nopeuttaa se työtä huomattavasti. Lisäksi sovimme, että yhteen sähköpostiin tulee vain yhden sivun materiaalit. Näin sähköposteja voidaan pompotella kysymyksien ilmetessä ilman, että myöhemmin joutuu etsimään, missä sähköpostissa mitäkin on. Asiakkaani toimi tässä asiassa esimerkillisesti. Asiakas lähetti jokaisesta sivusta word-dokumentin, ja tekstiin oli merkitty myös kuvien kohdat. Varsinkin, mikäli teksti on sellaisella kielellä, mitä ei varsinaisesti osaa, on se kätevä tapa toimia. Asiakkaalla oli onneksi kasapäin upeita kuvia orpokodista, koulusta, lapsista jne. Thaimaassa. Koska kuvat tulivat verkkoon, opastin, että kuvien olisi hyvä painaa vähintään 300 kilotavua, silloin niiden kanssa on vielä varaa toimia. Asiakkaalla oli ja on oikeudet kaikkiin sivuston materiaaleihin. Kaiken kaikkiaan pystyin projektissa hyvin keskittymään juuri minulle uuteen asiaan, koodaamiseen, koska tekstit ja kuvat tulivat asiakkaalta, ja vieläpä sovitussa aikataulussa. Graafisena suunnittelijana lähdin useimmiten liikkelle täysin tyhjästä, kirjoitin itse tekstit, otin tai etsin kuvat, kuvitin ja suunnittelin ulkoasun asiakkaan tarpeiden mukaan. 3.2 Leiskasta sivustoksi Aloitin varsinaisen lopullisen sivuston tekemisen kopioimalla leiskaversion, nimeämällä sen kansiot uusiksi ja siivoamalla leiskassa käytetyn CSS:n tiedoston. Leiskatiedosto oli täynnä mm. värikokeiluja ja eri kokoisia ja nimisiä divejä kommentteina. Kun tämä oli tehty järkeilin miten ja minkä nimisiin kansioihin kokoaisin käytettävän materiaalin ja miten nimeäisin sivut ja niillä käytettävät kuvat. Samalla mietin rakennetta. Tekisin jokaiselle osiolle oman template-tiedoston, joka nopeu-
13 13 taisi työtä. Templatessa melkein jokainen divi tulisi olemaan muokattavissa, jotta voisin tehdä mahdolliset tarvittavat sivukohtaiset esimerkiksi divimuutokset heittämällä. Raapustin ajatuksia muistiin paperille kuvien pikselikokojen ja värikoodien kanssa. 3.3 Kuvien käsittely Photoshop Loin photoshop-tiedoston, jonka pikselikoko oli suurin alasivuille sopiva. Toin tähän tiedostoon kaikki alasivuilla käytettävät kuvat ja tein Layer-paneeliin jokaiselle osiolle oman kansion, jonka sisään keräsin kuhunkin osioon tulevat kuvat. Tein tarvittavat säädöt ja tallensin kuvat jpg-muotoon Save For Web -metodilla. Yksinkertaisen vektorigrafiikkapohjaisen maailmankartta-kuvan, jossa värejä oli vain muutama, tallensin gif-tiedostoksi ja logon sekä banneritekstin, joihin tarvittiin läpinäkyvä tausta, png-24 -tiedostoiksi.
14 Koodausta ja huomioita Sivusto on html-pohjainen ja sen ulkoasu määritellään css-tiedostoissa. Tein jokaiselle osiolle oman templaten, jonka pohjalta loin htmlsivut. Tosin yhteystiedoille en tehnyt omaa templatea, koska sillä ei ole yhtää alasivua, en myöskään index- eli etusivulle. Alkuperäinen ajatus oli tehdä alasivuista kolmipalstaiset, mutta sille ei lopulta ollut tarvetta tai järkevää syytä, koska sisältöä oli vain kahteen. Vasemmalle tuleva navigointi ja oikealle tuleva sisältö. Sisältöpalsta on näin melkoisen leveä. Luettavuuden parantamiseksi määrittelin tekstin selvästi itse diviä kapeammaksi. Vasemman palstan tausta jätettiin läpinäkyväksi. Koko sivun taustakuvassa oleva auringonkajo jää näin näkyviin. Sillä on eräälainen toivoa tuova symbolinen merkitys. Navin alla omassa divissään olevat Raamatun lauseet oli aluksi ajateltu mahdolliseen kolmanteen palstaan, mutta se ei näyttänyt hyvältä. Näin lauseet lisättiinkin sille paikalle, missä ne nyt ovat, auringon kajon alle. Sivua scrollattaessa lauseet ovat lähes näkymättömät vaalean auringonkajon päällä, mutta mikäli kävijä haluaa lukea ne uudestaan tai huomaa ne vasta tuossa vaiheessa, voi hän scrollata sivua jälleen ylemmäs. Sivujen tekeminen oli suurimmaksi osaksi eräänlaista liukuhihnatyötä: kopiointi, muutokset, ja ulkoasun tarkistus selaimessa kuvien alt-tekstejä unohtamatta. Aikaavievin ja tarkkuutta vaativin työ olivat ehkä linkit. Lisäsin uuden sivun tehtyäni linkin aina kaikkiin aikaisemmin tehtyihin, jotta se varmasti olisi oikein joka sivulla eikä unohtuisi mistään Metatiedot Asiakas oli kirjoittanut lähettämäänsä materiaaliin valmiiksi koodin tulevat meta-tekstit. Asiakas oli omassa työssään ollut mukana yrityksen kotisivujen materiaalin kokoamisessa ja osasi hienosti miettiä näiden tekstien sisällön. Samoin kuin sivujen ostikoihin, title, h1-tägien sisään ja ensimmäiseen kappaleeseen, paragraph, tulevat tekstit ha-
15 15 kukoneita ajatellen. Hakukoneita ajatellessaan ihmiset luultavasti keskittyvät suurimmaksi osaksi Googleen, ja miksi ei, Google kuitenkin on kait käytetyin hakukone. 3.5 Sähköpostiosoitteet sivustolla Sivuille tuli myös yhteystietoja, puhelinnumeroita ja sähköpostiosoitteita. Asiakkaan ajatus oli, että sähköpostiosoitteeseen klikkaamalla avautuisi automaattisesti kävijän sähköpostiohjelma, josta kävijä kätevästi saisi lähetettyä postia. Minusta se ei välttämättä kuitenkaan toimi, sillä usein ihmisillä ei ole käytössään varsinaista sähköpostiohjelmaa, vaan he käyttävät internetin tarjoamia ilmaissähköpostipalveluita. Tällöin jokin automaattisesti avautuva ohjelma, mitä kävijä ei edes käytä, on enemmänkin ärsyttävä kuin asioita helpottava. Kerroin tämän asiakkaalle, joka selostuksen jälkeen ymmärsi mitä tarkoitin, ja oli samaa mieltä. Toinen sähköpostiosoitteisiin liittyvä asia, josta asi akkaan kanssa puhuin, käyttö. Selvitettyäni asiakkaalle kahteen eri otteeseen, miksei merkkiä tulisi käyttää, sisäisti hän sen, ja merkki korvattiin (at)-merkinnällä. He eivät varmasti haluaisi osoitteidensa lähettävän kenellekään vaikkapa Viagra-mainoksia. Opastin myös, etteivät linkkimäiset efektit, kuten sininen väri tai fontin alleviivaus ole hyviä efektejä tekstille, mikäli kyseessä ei ole linkki.
16 16 4 VIRHEET, SOLMUTILANTEET JA VALIDOINTI Sivuja tehtäessä ja koodattaessa tuli vastaan tietysti myös ongelmatilanteita. Ensimmäinen tuollainen oli tippunavin rakentaminen css:ää käyttäen. Minulla oli nivaska tulosteita, joista kopioin koodia samalla yrittäen ymmärtää sitä. Navigointi ei kuitenkaan alkanut toimia oikealla tavalla, joten etsin Googlen avulla lisäopastusta. Tavasin kolmea eri mallikoodia ja lopulta sain koodin toimimaan. Samalla näin/opin, miten monella eri tapaa koodia voi tehdä. Se oli opettavainen ja mielenkiintoinen kokemus. Muutoin ongelmia tuli vastaan lähinnä silloin, kun muutin divien järjestystä radikaalisti. Virheet olivat yleensä koodia kopioidessa poisjääneitä väkäsiä. Ongelmien ilmetessä käytin apuna usein validointia. Yleensä se auttoi paikantamaan virheet, mutta ei aina. Huomasin myös, että toiset selaimet näyttivät sivujen olevan kunnossa, kun taas toiset tarttuivat koodissa oleviin virheisiin heti. Kopioin sivukokonaisuuden silloin tällöin muistitikulle ja kävin kokeilemassa toimivuutta myös PCympäristössä. Varsinaisesti tein sivut Mac-ympäristössä. 4.1 Päänvaivaa kadonneesta taustakuvasta Eniten päänvaivaa aiheutti tarkastusjulkaisuvaiheessa kadonnut sivuston taustakuva. Julkaisin sivuston ulkoasun, sisällön ja toimivuuden tarkastamista varten omaa webhotelliani käyttäen. Näin järjestöstä tietävä henkilö ei luultavasti voisi mitenkään vahingossa eksyä katsomaan sivustoa ennen virallista julkistamista. Siirsin materiaalin FTP:n avulla Filezillaa käyttäen. Kun materiaali oli siirtynyt menin intoa täynnä katsomaan tulosta selaimesta. Into kuitenkin loppui lyhyeen, sillä taustakuvan paikalla oli pelkkää valkoista. Siirryin takaisin Dreamweaveriin, jossa kaikki näytti olevan kunnossa. Leiska-versio oli vielä julkisena koulukäytössä olevassa webhotellissa, jossa taustakuva toimi, ja menin vertailemaan koodia sinne. Eroa ei näyttänyt olevan. Tilanne alkoi tuntua epätoivoiselta. Validoin html-sivuja ja css-tiedostoja, mutta näinkään ei tullut ilmi mitään virhettä. Päätin pitää hetken taukoa, mistä olikin hyötyä. Oivalsin aivan muita asioita tekiessäni mennä tarkistamaan koodista kuvatiedoston. Ja sieltä virhe löytyikin. Kuvan.jpg-tunnus/pääte oli jotenkin jäänyt pois, kun olin kopioinut leiskatie-
17 17 doston. Kun katselin sivustoa selaimissa Dreamveawerin kautta, kuva toimi, mutta webhotellissa selaimet luulivat kuvaa tekstitiedostoksi. Kun tämä oli korjattu, toimi sivusto, kuten piti. Vihdoin sain ylpeänä lähettää asiakkaalle sähköpostiin linkin, jonka kautta he pääsisivät katsomaan ja tarkastamaan sivustoa. 5 JULKAISU JA NÄKYMINEN ERI SELAIMISSA JA LAITTEILLA Tarkastuksessa tuli ilmi muutama virhe, suurimmaksi osaksi kirjoitusvirheitä. Myös yksi tekstissä oleva sivujen sisäinen ristikkäislinkittäminen puutui. Kun virheet oli korjattu tuli aika julkaista sivusto oman domaininsa alle omaan webbihotelliinsa. Domain help2orphans.com oli aikaisemmin siirtynyt norjalaisesta webhotellista suomalaiseen Webbiseen ja asiakas oli avannut sinne kaksi sähköpostiliä. Virallinen julkaiseminen onnistui ilman ongelmia. Heti julkaisun jälkeen testasin sivuston vielä eri selaimissa Mac- ja PC-ympäristössä. Selaimet olivat Safari, Firefox (Mac ja PC), Opera (Mac ja PC), Chrome (PC) ja Internet Explorer (PC). Muut selaimet olivat versioissaan julkaisupäivän tuoreimmat eli up to date, mutta Chrome oli paria versiota venhempi. Myös asiakas katseli sivustoa käytössä olevilla tietokoneillaan, molemmat PC. Itselläni ei ollut mahdollisuutta kokeilla sivustoa tabletilla, mutta asiakas pyysi tuttuaan tarkastamaan sen. Lisäksi sivustoa katsottiin muutamalla matkapuhelimella: iphone, Samsung ja Nokia Lumia. Sivuthan eivät ole responsiiviset, mutta tomivat myös matkapuhelimella katsottuna. Responsiivisuudesta oli puhetta, mutta asiakas ei tuntenut siihen tarvetta. Mikä sinänsä oli minulle parempi, koska tuolloin en siitä vielä mitään tiennyt kuin termin ja idean. Sivujen oltua julkiset noin viikon lisäsin sivuston Googleen ja tein sivustosta xml-sivustokartan. Googlen Webmaster Tools antaa ohjeita molempiin jopa suomeksi.
18 18 6 SIVUJEN PÄIVITTÄMINEN JA KÄVIJÄSEURANTA Keskustelimme sivujen päivittämisestä asiakkaan kanssa alusta lähtien. Kävi ilmi, että asiakkaalla ei olisi kovinkaan paljoa aikaa sivujen päivittämiseen eikä myöskään tarvittavia ohjelmia esimerkiksi kuvien muokkaamiseen. Tästä syystä otettiin apuun Facebook ja sivuille upotettava Facebook-fiidi. Tämä fiidi sijoitettiin etusivulle. Kuten jo aikaisemmin kirjoitin, oli tämä mielestämme viisain tapa toimia tässä tilanteessa. Niinpä sivustolle ei tullut esimerkiksi ajankohtaista-osiota, vaan liike sivuilla tapahtuu tämän fiidin kautta. Asiakkaalla on kuitenkin osaamista hätätilanteessa mennä tekemään muutoksia sivuston teksteihin suoraan webhotellissa olevien tiedostojen kautta. Sivuston kävijämääriä pystytään seuraamaan valitun webbihotellin, Webbisen, palveluihin kuuluvan AWStats:in kautta. Tämä näyttää mm. kävijämäärän, käytetyt selaimet, maat, joista käyty jne. 7 KÄYTETYT OHJELMAT SEKÄ HUOMIOITA JA MIETTEITÄ PROJEKTISTA 7.1 Käytetyt ohjelmat Sivuston tekemiseen käytin seuraavia ohjelmia: Dreamweaver, Photoshop, Illustrator, OpenOffice ja TextEdit. Työskentely tapahtui Mac-ympäristossä. Kaikkia muita, paitsi Dreamweaveria olin käyttänyt paljon jo aikaisemmin. Niiden käyttö ei aiheuttanut ongelmia. Photoshopilla käsittelin kuvat ja tallensin kaiken materiaalin internetissä käytettäviksi. Logon ja maailmankartan alkuperäisversiot tein Illustratorissa. OpenOfficea käytin asiakkaalta saamieni Word-dokumenttien avaamiseen. Olin myös tottunut jo aikaisemmin työskentelemään eri värimaailmoilla, joten niiden käyttö, yhdistäminen ja webbiin sopivien värien löytäminen eivät tuottaneet ongelmia.
19 Koodin kommentointi ja sivujen nimeäminen Sivuja tehdessäni mietin koodin kommentointia ja tulin siihen tulokseen, että asiassa on kaksi puolta, jollei kolme. Koska koodi on kaikkien nähtävissä sivuston julkaisun jälkeen, mietin, mitä on järkevä kommentoida. Sivustoa tehdessä taas kommentointi auttaa löytämään koodista tiettyjä kohtia, ja sinne on kätevä lisätä itseä helpottavia kommentteja esimerkiksi siitä, mikä vaikuttaa mihinkin ja miten. Myös mikäli koodi myöhemmin siirtyy toisen henkilön muokattavaksi, on hänen helpompi sisäistää koodi ja löytää sieltä avainkohtia, kuten käytetyt värit. Samoin mietin sivujen nimeämistä. Olin lukenut, että nimien tulisi olla sisältöä tukevia. Ei siis niin sanotusti yleispäteviä, kuten etusivu, alasivu01 jne. Näin päädyin nimeämään sivut yhdistäen ne osioihinsa ja ottamaan nimeen mukaan navigoinnista yhden avainsanan. Liian pitkiäkään en nimistä tahtonut tehdä. 7.3 Kieliversiot Alkuperäinen suunnitelma oli tehdä sivustoon ainakin englannin-, suomen- ja ranskankieliset versiot. Jokaiseen versioon olisi päässyt aina etusivulla olevien lippuikoneiden kautta lipuissa olevista linkeistä. As iakas ei kuitenkaan ehtinyt tässä aikataulussa toimittaa kuin englanninkieliset tekstit, joten kieliversiointi jäi odottamaan. 7.5 Haitariesite ja käyntikortit Tein järjestölle lisäksi sivuja ja järjestön toiminnan esittelemistä tukevat haitariesitteen ja käyntikortit. Esitteen tein InDesign-ohjelmalla ja käyntikortit Illustrator-ohjelmalla. Ulkoasu ja värit ovat samat kuin järjestön sivuilla. Myös käytetyt kuvat ovat samoja. Muutama kuvan ku-
20 20 van koko ei kuitenkaan riittänyt printtimateriaalikäyttöön, joten pyysin uudet kuvat. CMYK, 300dpi jne. olivat minulle vanhoja tuttuja asioita. 8. PROJEKTIIN KÄYTETTY AIKA JA KUSTANNUSARVIO Tämä oli ensimmäinen tekemäni sivustokokonaisuus, joten en sen kummemmin tehnyt etukäteen arviota käytettävistä tunneista ja niiden jakautumisesta. Tehdessäni työtä kuitenkin tietysti kirjasin ylös käytetyt tunnit ja sen, mitä niiden aikana olin tehnyt oppiakseni myöhemmin arvioimaan töihin tarvittavan ajan määrää ja kustannusarvion summaa. Olimme sopineet heti alussa asiakkaan kanssa projetkin dead line -päivämäärän ja sen, mihin mennessä mikäkin materiaali tuli toimittaa. Sain kaiken ajallaan, tästä iso kiitos asiakkaalle. Kuten tällaisessa työssä usein, suunnittelu vei suurimman osan ajasta. Tunteja lisäsi myös projektin edetessä vastaan tulleet sivustontekemiseen liittyvät uudet asiat. Projekti oli samalla oppimista.
21 21 Projektiin käytettyjen tuntien jakautuminen, yhteensä 109,5 h Projektiin käytettyjen tuntien jakautuminen, yhteensä 109,5 h Printtimateriaali Projektihallinta Tarkastukset ja korjaukset 1,5 1,5 h 7 7 h h 7,5 h Julkaisu + Google Illustrator: logo + kartta 7 h + 1,5 h 4,5 h 8,5 h Projektihallinta Illustrator: logo + kartta 7 h + 1,5 h Suunnittelu Toteutus/tuotanto Toteutus/tuotanto 38,5 h 42 42h Julkaisu(t) + Google Tarkastukset ja korjaukset Printtimateriaali Suunnittelu 8.1 Kustannusarvio Mietin tätä pitkään ja hartaasti. Koska tämä kyseinen projekti oli minulle vielä oppimista suureksi osaksi, olisin sopinut asiakkaan kanssa luultavasti könttähinnan. Liian pienellä tuntihinnalla hinnoittelee itsensä ali tulevaisuutta ajatellen ja normaalilla (70 < + alv. 24%) tuntihinnalla tulisi projektista aivan liian kallis ja ylihinnoiteltu. Konsultoisin sivustoja tehneitä kavereitani hinnasta. Hintaan vaikuttaisi totta kai myös printtiin menneet työt. Ne hinnoittelisin erikseen. Hinta-arvioni kaikkiaan on noin 650 euroa. 9. YHTEENVETO Minusta projekti oli mielenkiintoinen ja hyvin antoisa, nautin sen läpiviemisestä suunnattomasti. Myös asiakas oli sivustosta ja printistä tulleista esitteestä ja käyntikorteista hyvin iloinen ja kiitollinen ja kehuivat työtäni. Tässä asiakkaan kommentteja: The website is absolutely wonderful... THANK YOU! I m really amazed by your work. It`s fantastic!... Thank you for all your hard work!
22 22 Oli mukava tehdä projekti, jossa pystyin osaltani auttamaan Thaimaassa olevia orpolapsia ja koululaisia. Lisäksi sain kuulla, että sivujen tekijästä oli kyselty ja sitä, mahtaisiko hän koulun päätyttyä haluta tehdä sivuja erilaisille yrityksille jne. oikein maksua vastaan. Projekti tulee vielä jatkumaan kieliversioinneilla.
Oy Karltek Ltd internet-sivujen uusiminen. Eveliina Aaltonen
Oy Karltek Ltd internet-sivujen uusiminen Eveliina Aaltonen Audiovisuaalisen viestinnän ammattitutkinto Eurajoen kristillinen opisto, 2015 1 ASIAKAS JA PROJEKTI... 3 1.1 Asiakas...3 1.2 Projektin kuvaus...3
LisätiedotAmmattijärjestäjä Aulasvuori Www-projektin kuvaus
Ammattijärjestäjä Aulasvuori Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 4 2 ULKOASU... 5 2.1
LisätiedotAsiakas ja tavoite. Tekninen toteutus
Asiakas ja tavoite Heikieli on vuonna 2015 perustettu yhden hengen asiantuntijayritys, joka tarjoaa käännös- ja oikolukupalveluita englannista ja saksasta suomeksi. Freelance-kääntäjiä on Suomessa paljon,
LisätiedotPROJEKTIDOKUMENTAATIO MONIPALVELU HALONEN
PROJEKTIDOKUMENTAATIO MONIPALVELU HALONEN Jani Niemi Eurajoen kristillinen opisto Audiovisuaalisen viestinnän ammattitutkinto 1 ASIAKKAAN JA PROJEKTIN ESITTELY...1 1.1 Aikataulu...1 2 SUUNNITTELU...2 2.1
LisätiedotPROJEKTIDOKUMENTAATIO RITVAN TOIVEMATKAT
PROJEKTIDOKUMENTAATIO RITVAN TOIVEMATKAT Emilia Ketola Eurajoen kristillinen opisto Avat 2015-2016 1 Kartoitus... 3 1.1 Asiakas ja sivujen tarve... 3 1.2 Yhteydenotto asiakkaaseen... 3 1.3 Aikataulu ja
LisätiedotPROJEKTIDOKUMENTAATIO ASENNUS M. NIEMI
PROJEKTIDOKUMENTAATIO ASENNUS M. NIEMI Jani Niemi Eurajoen kristillinen opisto Audiovisuaalisen viestinnän ammattitutkinto 1 ASIAKKAAN JA PROJEKTIN ESITTELY...1 1.1 Aikataulu...1 2 SUUNNITTELU...2 2.1
LisätiedotPROJEKTIDOKUMENTAATIO PARTURI-KAMPAAJA HIUSKASTANJA. Eurajoen kristillinen opisto Media-ala Mia Salminen
PROJEKTIDOKUMENTAATIO PARTURI-KAMPAAJA HIUSKASTANJA Eurajoen kristillinen opisto Media-ala 2016 2017 Mia Salminen 1 SYNOPSIS PROJEKTISTA... 3 1.1 Rakennesuunnitelma... 3 1.2 Sivun rakenne... 5 1.3 Grafiikka...
LisätiedotPROJEKTIDOKUMENTAATIO ASENNUS M. NIEMI
PROJEKTIDOKUMENTAATIO ASENNUS M. NIEMI Jani Niemi Eurajoen kristillinen opisto Audiovisuaalisen viestinnän ammattitutkinto 1 ASIAKKAAN JA PROJEKTIN ESITTELY...1 1.1 Aikataulu...1 2 SUUNNITTELU...1 2.1
LisätiedotVeistämö Knaapi. Projektidokumentaatio
Veistämö Knaapi Projektidokumentaatio 2015 1 Sisällysluettelo 1 Esittely... 3 1.1 Idea/Tarve... 3 1.2 Synopsis/ Projektin kuvaus... 3 1.3 Aikataulutus ja kustannusarvio... 4 2 Suunnittelu... 6 2.1 Banneri
LisätiedotDoodle helppoa aikatauluttamista
Doodle helppoa aikatauluttamista Kuinka käytän Doodlea? -vaiheittainen opas käyttöön ja aikataulukyselyn luomiseen http://www.doodle.com/ Doodle on ohjelma joka auttaa sinua aikatauluttamaan kokouksia
LisätiedotMmK PHOTO. Projektidokumentaatio
MmK PHOTO Projektidokumentaatio 2015 1 Sisällysluettelo 1 Esittely... 3 1.1 Idea/Tarve... 3 1.2 Synopsis/ Projektin kuvaus... 3 1.3 Aikataulutus ja kustannusarvio... 4 2 Suunnittelu... 6 2.1 Banneri ja
LisätiedotPROJEKTIDOKUMENTAATIO OONA KARHUNEN
PROJEKTIDOKUMENTAATIO OONA KARHUNEN Emilia Ketola Eurajoen kristillinen opisto Avat 2015-2016 1 Projekti... 3 1.1 Asiakas ja kartoitus... 3 1.2 Asiakastapaaminen ja suunnittelu... 3 1.3 Toteutus... 5 1.4
LisätiedotKiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen
Kiipulan ammattiopisto Liiketalous ja tietojenkäsittely Erja Saarinen 2 Sisällysluettelo 1. Johdanto... 3 2. Hyvät internetsivut... 3 3. Kuvien koko... 4 4. Sivujen lataus... 4 5. Sivukartta... 5 6. Sisältö...
LisätiedotHENKILÖKOHTAINEN NÄYTTÖSUUNNITELMA
HENKILÖKOHTAINEN NÄYTTÖSUUNNITELMA Jani Niemi Eurajoen kristillinen opisto Audiovisuaalisen viestinnän ammattitutkinto 1 JOHDANTO...1 2 VERKKOVIESTINNÄN SUUNNITTELU JA ILMAISU...2 2.1 Käsikirjoitusprosessi...2
LisätiedotPalautuskansio moduuli, ja sen vuorovaikutukset tehtävien annossa!
Palautuskansio moduuli, ja sen vuorovaikutukset tehtävien annossa! - Elikkä tässä ohjeessa näet kuinka voit tehdä peda.net palveluun koti/etätehtäviä tai vaikka kokeitten tekoa, tapoja on rajattomasti.
LisätiedotSami Hirvonen. Ulkoasut Media Works sivustolle
Metropolia ammattikorkeakoulu Mediatekniikan koulutusohjelma VBP07S Sami Hirvonen Ulkoasut Media Works sivustolle Loppuraportti 14.10.2010 Visuaalinen suunnittelu 2 Sisällys 1 Johdanto 3 2 Oppimisteknologiat
LisätiedotOma kartta Google Maps -palveluun
TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,
LisätiedotHENKILÖKOHTAINEN SUUNNITELMA VERKKOVIESTINNÄN SUUNNITTELU JA ILMAISU
HENKILÖKOHTAINEN SUUNNITELMA VERKKOVIESTINNÄN SUUNNITTELU JA ILMAISU Emilia Ketola Eurajoen kristillinen opisto Avat 2015-2016 1 Johdanto... 3 2 Käsikirjoitusprosessi... 4 3 Käyttöliittymäsuunnittelu...
LisätiedotGoogle Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen)
Google Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen) 1. Valitse sivu, jolle haluat lisätä sisältöä tai jota haluat muutoin muokata, ja klikkaa sitä.
LisätiedotOhjeita peda.net palvelun Luo uusi osioon
Ohjeita peda.net palvelun Luo uusi osioon - Elikkä tuo kyseinen kohta löytyy omalta sivultasi oikeasta ylä-laidasta, kuten alla näkyvästä kuvasta näkyy. Sekä tuo kyseinen kohta näkyy luokkien sivuilla
LisätiedotGraafiset käyttöliittymät Sivunparantelu
Graafiset käyttöliittymät Sivunparantelu Johdanto Tarkoituksenamme on parantaa Konebox.fi-verkkokaupan nettisivuja. Ensivaikutelman perusteella sivusto tuntuu todella kömpelöltä ja ahdistavalta. Sivu on
LisätiedotHAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE
KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö
LisätiedotTietosuoja-portaali. päivittäjän ohje
Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan
LisätiedotKUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA
KUVAN TUOMINEN, MUOKKAAMINEN, KOON MUUTTAMINEN JA TALLENTAMINEN PAINTISSA SISÄLLYS 1. KUVAN TUOMINEN PAINTIIN...1 1.1. TALLENNETUN KUVAN HAKEMINEN...1 1.2. KUVAN KOPIOIMINEN JA LIITTÄMINEN...1 1.1. PRINT
LisätiedotWordpress sivuston. julkaisun tarkistuslista. Kirjoittanut Kim Laine. www.kimlaine.fi. 1.8.2015 Helsini
Wordpress sivuston julkaisun tarkistuslista Kirjoittanut Kim Laine www.kimlaine.fi 1.8.2015 Helsini Kim Laine 29-vuotias helsinkiläinen web-suunnittelija. Yli 7 vuoden kokemus erilaisista CMS-pohjaisista
LisätiedotNETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
NETTISIVUOHJE SISÄLTÖ 2 JULKAISUJÄRJESTELMÄ tietoa WordPress julkaisujärjestelmästä perustoiminnot (kirjautuminen, asetukset) 6 MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
Lisätiedotopiskelijan ohje - kirjautuminen
opiskelijan ohje - kirjautuminen estudio on Edupolin kehittämä e-oppimisympäristö koulutusryhmän verkkoalustana perinteisen luokkaopetuksen tukena. etäopiskelussa ja -opetuksessa kotoa tai työpaikalta.
LisätiedotASCII-taidetta. Intro: Python
Python 1 ASCII-taidetta All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do.
LisätiedotJotta voit käyttää Facebookia täytyy sinun ensiksi luoda sinne käyttäjätili. Käyttäjätilin luominen onnistuu noudattamalla seuraavia ohjeita.
Facebook-pikaopas Mikä Facebook on? Facebook on internetissä toimiva sosiaalinen palvelu, jonka avulla sen käyttäjät voivat olla yhteydessä ystäviinsä ja sukulaisiinsa, jakaa kuvia ja videoita sekä liittyä
LisätiedotMikä on facebook? Rekisteröityminen
Mikä on facebook? Facebook on Internetissä toimiva sosiaalinen palvelu, jonka tarkoituksena on yhdistää ystäviä, työ ja opiskelu kavereita ja tuttuja. Ihmiset käyttävät facebookkia ollakseen yhteydessä
LisätiedotLappi.fi -pikaohje Kittilän kylille:
Lappi.fi -pikaohje Kittilän kylille: Tämän pikaohjeen avulla pääsette alkuun sivujenne tekemisessä, mutta suosittelemme täydellisten Lappi.fi -ohjeiden lukemista ennen sivujenne tekemistä. Ohjeet löytyvät
LisätiedotOhjeita informaation saavutettavuuteen
Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea
LisätiedotNäin rakennat mielenkiintoiset nettisivut
Näin rakennat mielenkiintoiset nettisivut Ajattele ennen kuin toimit Ei kannata lähteä suinpäin nettisivuja rakentamaan. Hyvin suunniteltu on enemmän kuin puoliksi tehty. Muuten voi käydä niin, että voit
LisätiedotTunnuksen päivitys 19.9.2012
Tunnuksen päivitys 19.9.2012 2 Tampereen yliopiston tunnus Tampereen yliopiston tunnus Tuhannet ihmiset näkevät Tampereen yliopiston tunnuksen päivittäin lomakkeissa, nettisivuilla, raporteissa, esitteissä.
LisätiedotKirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta.
Kirjaudu sisään palveluun klikkaamalla Omat kartat -painiketta. Sisäänkirjauduttuasi näet palvelun etusivulla helppokäyttöisen hallintapaneelin. Vasemmassa reunassa on esillä viimeisimmät tehdyt muutokset
LisätiedotMoodle-oppimisympäristö
k5kcaptivate Moodle-oppimisympäristö Opiskelijan opas Sisältö 1. Mikä on Moodle? 2. Mistä löydän Moodlen? 3. Kuinka muokkaan käyttäjätietojani? 4. Kuinka ilmoittaudun kurssille? 5. Kuinka käytän Moodlen
LisätiedotScratch ohjeita. Perusteet
Perusteet Scratch ohjeita Scratch on graafinen ohjelmointiympäristö koodauksen opetteluun. Se soveltuu hyvin alakouluista yläkouluunkin asti, sillä Scratchin käyttömahdollisuudet ovat monipuoliset. Scratch
LisätiedotFrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
Lisätiedot"SUKUPUOLISENSITIIVISYYS VARHAISKASVATUKSESSA - TASA- ARVOINEN KOHTAAMINEN PÄIVÄKODISSA"- HANKKEEN VERKKOSIVUJEN TOTEUTTAMINEN
"SUKUPUOLISENSITIIVISYYS VARHAISKASVATUKSESSA - TASA- ARVOINEN KOHTAAMINEN PÄIVÄKODISSA"- HANKKEEN VERKKOSIVUJEN TOTEUTTAMINEN SISÄLLYSLUETTELO Sivu: 1 Sisällysluettelo... 1 1. TOTEUTTAJA... 2 1.1. Create2Gether...
LisätiedotPurot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu 24.10.2012
Purot.net Wiki Tutkielma Paavo Räisänen Centria Ammattikorkeakoulu 24.10.2012 Sisällysluettelo 1: Esittely 2: Perustaminen 3: Uuden sivun luonti 4: Kuvien lisääminen 5: Linkin lisääminen 6: Lopuksi 1:
Lisätiedotohjeita kirjautumiseen ja käyttöön
ohjeita kirjautumiseen ja käyttöön Kirjautumisesta Opiskelijat: kirjaudu aina tietokoneelle wilmatunnuksella etunimi.sukunimi@edu.ekami.fi + wilman salasana Opettajat: kirjaudu luokan opekoneelle @edu.ekami.fi
LisätiedotOsaamispassin luominen Google Sites palveluun
n luominen Google Sites palveluun Mikä Osaamispassi on? Osaamispassi auttaa kertomaan taidoistasi, koulutuksestasi, työkokemuksestasi ja sinua kiinnostavista asioista työnantajalle kun haet työtä. Osaamispassi
LisätiedotCanva CV NÄIN PÄÄSET ALKUUN CANVA CV:N TEOSSA: Canva on graafisen suunnittelun
Canva CV Canva on graafisen suunnittelun ohjelma, jota voi käyttää niin selaimella kuin mobiiliapplikaatiollakin. Canvassa on paljon maksuttomia pohjia CV:n visualisointiin! Canvan perusominaisuuksia voit
LisätiedotHgin kaupungin opetusvirasto Wilma opas huoltajille 1(10) HAKE/Tiepa 28.2.2007 KKa
Hgin kaupungin opetusvirasto Wilma opas huoltajille 1(10) :LOPD 0LNl:LOPDRQ" Wilma on internetin kautta toimiva liittymä opettajille, oppilaille ja näiden huoltajille. Se ei ole käyttäjän koneella oleva
LisätiedotOhjeita kirjan tekemiseen
Suomen Sukututkimustoimisto on yhdessä Omakirjan kanssa tehnyt internetiin uuden Perhekirja-sivuston. Se löytyy osoitteesta: www.omakirja.fi -> Kirjat -> Perhekirja tai http://www.omakirja.fi/perhekirja?product=6
LisätiedotSeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
LisätiedotOffice 2013 - ohjelmiston asennusohje
Office 2013 - ohjelmiston asennusohje Tämän ohjeen kuvakaappaukset on otettu asentaessa ohjelmistoa Windows 7 käyttöjärjestelmää käyttävään koneeseen. Näkymät voivat hieman poiketa, jos sinulla on Windows
LisätiedotToimeentulotuen sähköinen asiointi. palvelun käyttöohje
Toimeentulotuen sähköinen asiointi palvelun käyttöohje Palvelua voi käyttää selaimilla: Internet Explorer 9 tai uudempi Firefox 3.5 tai uudempi Opera 10.5 tai uudempi Chrome ja Safari uusimmat versiot
LisätiedotKöyliön Jalkahoitola Www-projektin kuvaus
Köyliön Jalkahoitola Www-projektin kuvaus Minne Seppälä Avat 2014 Dokumentaatio 1 PROJEKTIN KUVAUS... 3 1.1 Projektin aloitus... 3 1.2 Aikataulu... 4 1.3 Kustannusarvio... 5 2 ULKOASU... 5 2.1 Sivuston
LisätiedotKangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi
2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...
LisätiedotKaislanet-käyttöohjeet
päivitetty 25.10.2013 Kaislanet-käyttöohjeet Rekisteröityminen Sisällysluettelo 1. Yleistä Kaislanetistä... 3 1.1 Tekniset vaatimukset Kaislanetin käyttöön... 3 1.2 Kaislanet-helpdesk... 3 2. Rekisteröityminen...
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
Lisätiedot3 VIESTIT... 7 3.1 UUSI VIESTI... 7 3.2 VIESTIN LUKEMINEN... 9 3.3 SAAPUNEET JA LÄHETETYT... 9 3.4 KANSIOT... 10 3.5 ROSKAKORI...
OHJE HUOLTAJALLE 2 / 22 1 YLEISTÄ TIETOA HELMESTÄ... 3 2 ETUSIVU... 4 2.1 YHTEENVETO... 4 2.2 LUKUJÄRJESTYS / KOTITEHTÄVÄT / HUOMAUTUKSET... 4 2.3 VIESTIT... 6 2.4 KOKEET... 6 3 VIESTIT... 7 3.1 UUSI VIESTI...
LisätiedotVIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE
VIENET JULKAISUJÄRJESTELMÄLLÄ TOTEUTETTUJEN INTERNET-SIVUJEN YLLÄPITO-OHJE JULKAISUJÄRJESTELMÄÄN KIRJAUTUMINEN. Osoitekenttään kirjoitetaan www.domain.fi/admin. Kirjoita käyttäjätunnus: xxxxxx. Salasana:
LisätiedotVERKKOSIVUANALYYSI Suomalaisen musiikin tiedotuskeskus FIMIC
Markus Lappalainen KT11/P721KNrB VERKKOSIVUANALYYSI Suomalaisen musiikin tiedotuskeskus FIMIC Oppimistehtävä Kulttuurituotannon ko. Toukokuu 2011 SISÄLTÖ 1 FIMIC... 1 2 VISUAALISET NÄKYMÄT... 1 3 AKTIIVISUUS
LisätiedotRauman nuorten työpaja
Rauman nuorten työpaja Projektidokumentaatio Työssäoppiminen 24.11. -12.12.2014 Susa Räikkälä AVAT 2014-2015 Sisältää : Kirjastokuvaus Kiitoskortti Painikkeet Joulumyyjäisten esite Ntp-Logo Uutiset Yhteenveto
LisätiedotMoniasiakkuus ja osallisuus palveluissa -seminaari 4.10.2012 Moniammatillinen yhteistyö ja asiakaskokemukset
Moniasiakkuus ja osallisuus palveluissa -seminaari 4.10.2012 Moniammatillinen yhteistyö ja asiakaskokemukset Riikka Niemi, projektipäällikkö ja Pauliina Hytönen, projektityöntekijä, Jyväskylän ammattikorkeakoulu
LisätiedotYleistä. Suositukset. Rakenne
Yhdistysavaimen ulkoasuohjeistus Jyty-liiton yhdistyksille 27.5.2015 Yleistä Tämä on Jytyliiton yhdistyksille laadittu ohjeistus ulkoasun rakentamisesta Yhdistysavain-julkaisujärjestelmään. Tavoitteena
LisätiedotMEDIAKORTTI 2011. Mediatiedot. Paranormaaliblogi.net on Suomen suosituin paranormaaliin uutisointiin keskittyvä sivusto.
Mediatiedot Paranormaaliblogi.net on Suomen suosituin paranormaaliin uutisointiin keskittyvä sivusto. Olemme uutisoineet paranormaaleista ja muista oudoista ilmiöistä jo vuodesta 2007 lähtien. Tarjoamme
LisätiedotKuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen:
Kuukauden kuvat kerhon galleriaan 1.4.2016 lähtien kuukaudenkuvaajan kuvagalleria on siirretty uudelle palvelimelle osoitteeseen: http://www.kamera73.fi/kuukaudenkuvaaja Kukin seuran jäsen voi laittaa
LisätiedotItellan uuden extranetin ja Postittamisen työpöydän käyttöönotto
Itellan uuden extranetin ja Postittamisen työpöydän käyttöönotto Itella Viestinvälitys, Jakelu- ja markkinointipalvelut 1 Sisältö Tietoa Postittamisen työpöydästä ja Itellan extranetin uudistuksesta Uuden
LisätiedotVerkkokirjoittaminen. Anna Perttilä Tarja Chydenius
Verkkokirjoittaminen Anna Perttilä Tarja Chydenius 1 Suosi lyhyttä tekstiä 2 Kenelle kirjoitat 3 Helpota lukijan työtä; lajittele tekstisi 3.1 Otsikot 3.2 Johdanto 3.3 Väliotsikot 3.4 Pääteksti 4 Linkit:
LisätiedotTekstieditorin käyttö ja kuvien käsittely
Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja
LisätiedotYrjö Määttänen Kokemuksia SuLVInetin käytön aloituksen
Yrjö Määttänen Kokemuksia SuLVInetin käytön aloituksen yrjo.maattanen@phnet.fi helpottamiseksi puh. 050 413 0820 4.11.2009 1. Yleistä SuLVInet on SuLVI:n aloitteesta avattu sivusto LVI-alan kehittäjäfoorumiksi.
Lisätiedot1. ASIAKKAAN OHJEET... 2. 1.1 Varauksen tekeminen... 2. 1.2 Käyttäjätunnuksen luominen... 4. 1.3 Varauksen peruminen... 4
1. ASIAKKAAN OHJEET... 2 1.1 Varauksen tekeminen... 2 1.2 Käyttäjätunnuksen luominen... 4 1.3 Varauksen peruminen... 4 1.4 Omien tietojen muokkaaminen... 5 1.5 Salasanan muuttaminen... 5 2. TYÖNTEKIJÄN
LisätiedotOhje vanhemmille - näin alkuun Päikyssä
Ohje vanhemmille - näin alkuun Päikyssä Tunnuksen aktivointi ensimmäinen sisäänkirjautuminen Päikkyyn Huoltajana sinulle on luotu tunnus varhaiskasvatusyksikön toimesta matkapuhelinnumerosi perusteella.
LisätiedotNTG CMS. Julkaisujärjestelm. rjestelmä
NTG CMS Julkaisujärjestelm rjestelmä NTG CMS julkaisujärjestelmän avulla voit päivittää ja ylläpitää internetsivujen sisältöä helppokäyttöisen webkäyttöliittymän kautta, ilman minkäänlaista html-osaamista.
LisätiedotVATT Talouden rakenteet. Ohje: Pdf-dian liittäminen PowerPoint -esitykseen. Sisällys:
VATT Talouden rakenteet Ohje: Pdf-dian liittäminen PowerPoint -esitykseen Tämä ohje koskee Acrobat Reader -ohjelman versiota 9 sekä Firefox ja Internet Explorer -selaimia. Huomaa, että aikaisemmissa versioissa
LisätiedotNÄIN TEET VIDEO-MAILIN (v-mail)
1 NÄIN TEET VIDEO-MAILIN (v-mail) Kirjaudu iwowwe Back Officeen. HOME Klikkaa kotisivullasi (HOME) olevaa vihreää Video E-mail kuvaa Vastaava linkki Video Email on myös Video Tools - alasvetovalikossa
LisätiedotOhjeet What matters to me palvelun käyttöönottoon
Ohjeet What matters to me palvelun käyttöönottoon Näissä ohjeissa: Ohjeet What matters to me verkkopalvelun käyttöönottoon niille asiakkaille, jotka aikovat tilata itselleen myös EU:n Vammaiskortin Palvelun
LisätiedotUuden työtilan luonti
Uuden työtilan luonti 1. Valitaan Uusi työtila vasemmanpuoleisesta valikosta 2. Valitaan Tyhjä työtila aukeavasta valikosta. Tämä toiminto luo uuden tyhjän työtilan. 3. Kun uusi työtila on luotu, aukeaa
Lisätiedotoppilaan kiusaamista kotitehtävillä vai oppimisen työkalu?
Oppimispäiväkirjablogi Hannu Hämäläinen oppilaan kiusaamista kotitehtävillä vai oppimisen työkalu? Parhaimmillaan oppimispäiväkirja toimii oppilaan oppimisen arvioinnin työkaluna. Pahimmillaan se tekee
LisätiedotFRAM. Prepress Guide
1 FRAM Prepress Guide 2 Tämän oppaan tarkoitus on opastaa painokelpoisen aineiston toteuttamisessa ja sen toimittamisessa meille. Osa ohjeistuksista perustuu siihen oletukseen, että dokumenteissä käytetyt
LisätiedotOHJE Jos Kelaimeen kirjautuminen ei onnistu Mac-koneella Sisällys
Sisällys 1 Varmista, että DigiSign-kortinlukijaohjelmisto on käynnissä 2 1.1 DigiSign-kuvake 2 1.2 Sovelluksen käynnistäminen 2 1.3 Kortin toiminnan varmistaminen 4 2 Jos käytät selaimena Mozilla, Firefox
LisätiedotOpen Badge -osaamismerkit
Open Badge -osaamismerkit Merkin vastaanottaminen 2 "#$%&'()$*+,''-.,-$/0.1 "#$%&&'$ =>;+?.@@'A$/,+%'*1B%%B0,$%@B+-.%$% C 2>D./E'B1B-.%$%;+?.@@'&'()$&'F0#'F0..% G C>"#$%&'()$H'F1+/I,1'-IJ%%$1I%"#$%&'()$*+,''-.,-$/0.%
LisätiedotItsepalvelukopiokone
Itsepalvelukopiokone Tarvitset kopiointiin joko Waltti-matkakortin tai tunnistetarran kirjastokorttiisi. Waltti-matkakortin voit hankkia Kansalaisinfosta ja tunnistetarran pääkirjaston Infosta. Näin aloitan
LisätiedotOulun yliopiston www-sivujen tekeminen
Oulun yliopiston www-sivujen tekeminen Oulun yliopiston ja sen yksiköiden www-sivuilla noudatetaan yliopiston www-politiikan peruslinjauksia sekä graafisen ohjeiston mukaista visuaalista linjaa. Yhtenäisellä
LisätiedotMeeting Plannerin käyttöohje
Meeting Plannerin käyttöohje Näytteilleasettaja & Yhteistyökumppani Sisällysluettelo Näytteilleasettajat ja yhteistyökumppanit... 2 Sisään kirjautuminen... 2 Järjestelmän etusivu... 2 Peruskäyttäjien näkymät...
LisätiedotHyvinvointikyselyjen toteuttaminen sähköisesti oppilaitoksissa
Hyvinvointikyselyjen toteuttaminen sähköisesti oppilaitoksissa - Ohjeet ryhmien ja luokkien hyvinvointikyselyjen toteuttamiseen sähköisesti - Toimintamalli kehitetty osana pääkaupunkiseudun LAPE-hanketta
LisätiedotUuden Peda.netin käyttöönotto
Sisällysluettelo Uuden Peda.netin käyttöönotto...2 Sisään- ja uloskirjautuminen...2 OmaTila...3 Peda.netin yleisrakenne...4 Työvälineet - Sivut...5 Sivun lisääminen omaan profiiliin:...5 Sivun poistaminen
LisätiedotOhjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä
Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita
LisätiedotOhje vanhemmille - näin alkuun Päikyssä
Ohje vanhemmille - näin alkuun Päikyssä Tunnuksen aktivointi ensimmäinen sisäänkirjautuminen Päikkyyn Huoltajana sinulle on luotu tunnus varhaiskasvatusyksikön toimesta matkapuhelinnumerosi perusteella.
LisätiedotMukaan.fi on oma verkkopalvelu juuri sinulle, joka olet kiinnostunut erityistä tukea käyttävien lasten, nuorten ja aikuisten elämästä.
Tule mukaan! Mukaan.fi on oma verkkopalvelu juuri sinulle, joka olet kiinnostunut erityistä tukea käyttävien lasten, nuorten ja aikuisten elämästä. Tämän helppokäyttöisen netin kohtaamis- ja keskustelupaikan
LisätiedotSisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App OneNote Web App Excel Kysely Valmiin tiedoston tuonti Skydrive Pro
1 Sisällys Word Wep App... 3 Excel Web App... 7 Powerpoint Web App... 11 OneNote Web App... 17 Excel Kysely... 20 Valmiin tiedoston tuonti Skydrive Pro ohjelmaan... 25 Blogi... 27 Kansiot... 28 Skydrive
LisätiedotWilma-opas huoltajalle
Wilma-opas huoltajalle Valtteri Mulari 24. maaliskuuta 2010 (Wilman versio 2.09c) Sisällysluettelo 1. MIKÄ WILMA ON JA MITÄ SILLÄ TEHDÄÄN?...3 2. WILMAN KÄYTTÄMINEN...3 3. OMA ETUSIVU...4 4. PIKAVIESTIT...5
LisätiedotVAnkasti verkossa! VAnkasti verkossa! VAnkasti verkossa! VAnkasti verkossa!
Löydät Internetistä kotibilekuvia, joissa esiinnyt. Mitä ajattelet kuvista? 1) SIISTII! 2) EVVK 3) En pidä siitä, että kuviani laitetaan nettiin ilman lupaani Internetiin laitettua kuvaa tai aineistoa
LisätiedotKokoelmakilpailu Lomakeohje, Laji.fi-sarja 1. Rekisteröityminen
1. Rekisteröityminen Kirjaudu palveluun sivuston oikeasta yläkulmasta luomalla itsellesi Laji.fi - tunnus tai kirjautumalla Facebook- tai Google-tunnuksilla. Laji.fi-tunnuksella rekisteröityminen 1. Valitse
LisätiedotMainoksen taittaminen Wordilla
Mainoksen taittaminen Wordilla Word soveltuu parhaiten standardimittaisten (A4 jne) word-tiedostojen (.docx) tai pdf-tiedostojen taittoon, mutta sillä pystyy tallentamaan pienellä kikkailulla myös kuvaformaattiin
LisätiedotGRAAFINEN OHJEISTUS LOGOT NENÄPÄIVÄ GRAAFINEN OHJEISTUS 2014 NENÄPÄIVÄ
GRAAFINEN OHJEISTUS LOGOT GRAAFINEN OHJEISTUS 2014 GRAAFINEN OHJEISTUS LOGOT LOGO Nenäpäivä-tunnuksen kanssa saa leikkiä ja käyttää mielikuvitusta. Tunnukselle saa löytää uusia mitä merkityksellisempiä
LisätiedotMuita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager
Missio: 1. Asentaminen 2. Valokuvien tarkastelu, tallennus/formaatit, koko, tarkkuus, korjaukset/suotimet, rajaus 3. Kuvan luonti/työkalut (grafiikka kuvat) 4. Tekstin/grafiikan lisääminen kuviin, kuvien/grafiikan
LisätiedotRistijärven metsästysseura tysseura osti lisenssin jahtipaikat.fi verkkopalveluun, jotta seuran
Ohjeet. Sivu 1/7 Tämä ohje on tarkoitettu Ristijärven metsästysseuran jäsenille. Ohjeen tarkoitus on opastaa kuinka seuran jäsenet saavat Jahtipaikat.fi verkkosivustolla olevan metsästyskartta sovelluksen
LisätiedotOhjeistus yhdistysten internetpäivittäjille
Ohjeistus yhdistysten internetpäivittäjille Oman yhdistyksen tietojen päivittäminen www.krell.fi-sivuille Huom! Tarvitset päivittämistä varten tunnukset, jotka saat ottamalla yhteyden Kristillisen Eläkeliiton
LisätiedotOHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN
OHJEET WORDPRESS-BLOGIN LUOMISEEN JA TAVALLISIMPIIN BLOGITOIMINTOIHIN Koulutusteknologian perusopinnot Digitaalinen portfolio oppimisen tukena 2010 Essi Vuopala 1. BLOGIN LUOMINEN Mene osoitteeseen http://www.wordpress.com
Lisätiedot10 yleistä hakukoneoptimointivirhettä
10 yleistä hakukoneoptimointivirhettä Petteri Erkintalo Kehitysjohtaja Klikkicom Oy 2011-09-27 2 1. Hakukoneiden pääsy sivustolle on estetty Hakukoneiden pääsyn sivustolle voi estää usein eri keinoin Yllättävän
LisätiedotInfopankin kävijäkysely 2014 - tulokset
Infopankin kävijäkysely 2014 - tulokset Suomi sinun kielelläsi - Finland in your language www.infopankki.fi Mitä tutkittiin? Ketä Infopankin käyttäjät ovat ja miten he löytävät Infopankin? Palveleeko sivuston
LisätiedotPaperiton näyttösuunnitelma
Paperiton näyttösuunnitelma Käyttöohje opettajalle ja työpaikkaohjaajalle Koonnut: Jarkko Lehmuskenttä Turun sivistystoimiala, Suunnittelu- ja kehittämispalvelut 18.10.2015 Versio 2.0 Ohje on koottu OPH:n
LisätiedotPunomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA. Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi.
Punomo Blogit BLOGIN LUOMINEN WORDPRESS-ALUSTALLA Kirjaudu -palveluun osoitteessa www.punomo.npn.fi/wp-login.php tunnuksellasi. Tunnuksia jakavat Punomo.fi:n ylläpitäjät. Kun olet kirjautunut, blogin OHJAUSNÄKYMÄ
Lisätiedot