Pilkekone
Verkkojulkaisun näyttötyönä täytyi tehdä asiakkaalle verkkosivut. Itse tein omalle kummisedälleni. Hänellä on pilkekone, joka on mahdollista vuokrata. Olin aiemmin jo keskustellut hänen kanssaan asiasta, että olisi kätevää jos olisi verkkosivut joiden kautta konetta vuokrattaisiin. Lähdin tekemään eri variaatioita, jotka laittaisin sitten eteenpäin hänen valittavakseen.
Aloin toteuttaa luonnos 2 eli yksinkertaisempaa versioita. Samalla matkan varrella tuli lisäyksiä, joita en ollut alunperi suunnitellut. Yksi esimerkki on etusivulla vasemalla oleva info laatikko, jossa lukee tärkeimmät tiedot. Päätin tehdä näin, koska silloin se näkyisi koko ajan osana sivustoa.
Sivuston toteutuksessa oli haasteita muun muassa tarvitsin koodamista poistaakseni tekstejä näkyvistä enkä itse saanut ongelmaani ratkaistua. Kyselin opettajaltani apuja jos en itse ratkaisua keksinyt. En kiirehtinyt sivuston teon kanssa, koska kummisetäni sanoi ettei sillä ole kiirettä. Tein kuitenkin aina eteenpäin kun aikaa oli. Itse olen ihan tyytyväinen lopputulokseen. Sivusto on hyvin simppeli eikä siinä ole mitään erikoista, mutta sellainen minulta pyydettiin. Jos olisin itselleni tehnyt kyseistä sivustoa niin olisin tehnyt siitä sisältörikkaamman. Olisin lisännyt sivustoon varauskalenterin, josta olisi näkynyt milloin pilkekone on vapaana.
Tänään aloitin sivuston suunnitelemista. Tein ideointivaiheen sekä synopsiksen. Ideointivaiheessa tein raakamallit Illustratorissa sivuston ulkonäöstä. Samalla tein myös liikemerkin, jota voin käyttää sivuston otsakkeessa.
19.12.2022
Tänään jatkoin suunnitelmien tekemistä. Tein toteutus sekä leiskasuunnitelmat ja rakennesuunnitelmat.
13.1.2023
Aloitin verkkosivun tekemisen. Asensin sivun sekä valitsin teeman. Muokkasin myös otsakekuvan ja logon asetin suunnitelmani mukaan. Värimaailman asetin myös oikeaksi. Aloitin myös toteutusvaiheen kirjoittamista.
31.1.2023
Aloin luomaan verkkosivulle valikkoa sekä sisältöä.
8.3.2023
Tein illustrattorissa muutaman infolaatikon ja liitin ne sivulle. Kirjoittelin tekstejä artikkeleihin.
-Ideointivaihe-
-Luonnos 1-
Miksi värit harmaa, valkoinen ja punainen?
Käytän näitä värejä, koska kaikki niistä ovat osa itse
pilkekoneen väritystä. Punainen toimii tehostevärinä sillä se tuo sivustoon
pienen väripilkun tasaisen harmaan ja valkoisen sekaan, jotka sen sijaan
tekevät sivustosta rauhallisen.
Miksi juuri tämä otsake kuva?
Halusin laittaa otsakekuvaksi pilkkeistä kuvan, koska
pilkkeet liittyy sivuston aiheeseen. Se on myös selkeä ja rauhallinen tausta
sivustolle.
Miksi juuri tämä sommittelu?
Päätin jakaa valikon neljään osaan, koska niin saan pääasiat
esille parhaiten. Yläpalkkiin asetin nimen ja yhteystiedot, koska siellä ne
ovat näkyvillä koko ajan.
Alapalkkiin laitoin maksutavat, koska ne ovat ns extra
infoa, mutta kuitenkin ihan hyödyllistä tietoa. Nekin näkyvät sivustolla koko
ajan. Varauskalenterin asetin etusivulle muun tärkeän infon lisäksi, koska
siitä näkee kätevästi milloin vuokrattava kone on vapaana.
Miksi tämä typografia?
Haluan, että sivu on selkeä ja helppolukuinen joten siksi
aion käyttää perinteistä Arialia koossa 12pt.
-Luonnos 2-
Miksi värit harmaa, valkoinen ja punainen?
Käytän näitä värejä, koska kaikki niistä ovat osa itse pilkekoneen väritystä. Punainen toimii tehostevärinä sillä se tuo sivustoon pienen väripilkun tasaisen harmaan ja valkoisen sekaan, jotka sen sijaan tekevät sivustosta rauhallisen.
Miksi juuri tuo otsake kuva?
Halusin laittaa otsakekuvaksi pilkkeistä kuvan, koska se pilkkeet liittyy sivuston aiheeseen. Se on myös selkeä ja rauhallinen tausta sivustolle.
Miksi juuri tämä sommittelu?
Päätin jakaa valikon viiteen osaan, koska niin saan pääasiat esille parhaiten. Etusivulle halusin laittaa lyhyen ja ytimekkään alkuinfon, jotta mahdollinen asiakas saa tärkeimmät tiedot heti.
Miksi tämä typografia?
Haluan, että sivu on selkeä ja helppolukuinen joten siksi
aion käyttää perinteistä Arialia koossa 12pt.
-Synopsis-
Mitä?
-Responsiivinen sivusto
-Sivusto, jossa vuokrataan halkomakonetta
-Helpottaa koneen vuokrausta
-Asiakas haluaa oman sivun, jolla vuokrata tori.fi sijaan
-Sivsustolle saa enemmä ja paremmin kaikki tarvittavat infot
Minkä puutteet halutaan postuvan?
Asiakas tahtoo vuokrata konettaan laajemmin. Se ei torin kautta ole niin helppoa kuin oman nettisivun avulla.
Milloin?
Tarkkaa aikataulua ei ole eli voin työstää sivustoa aikalailla sen mukaan milloin itse ehdin.
Miten?
Toteutan työn aluksi kokonaan WordPressiin ja sieltä siirrän sen maksussileen Netfinn palveluun. Teen työn yksin ja itsenäisesti.
-Toteutussuunnitelma & leiskasuunnitelma 1-
Tietokone
Header: 1920px x 64px
Otsake: 1920px x 305px
Navi: 1920px x 64px
Margin: 370px x 600px
Section: 1180px x 600px
Footer: 1920px x 64px
Logo: 680px x 105px
Tabletti
Vaaka:
Header: 1025px x 47px
Otsake: 1025px x 192px
Navi: 1025px x 47px
Margin: 155px x 440px
Section: 715px x 440px
Footer: 1025px x 47px
Logo: 533px x 76px
Pysty:
Header: 770px x 47px
Otsake: 770px x 170px
Navi: 770px x 55px
Margin: 0px
Section: 770px x 720px
Footer: 770px x 47px
Logo: 385px x 62px
Puhelin
Header: 1244px x 75px
Otsake: 1244px x 243px
Navi: 1244px x 105px
Margin: 0px
Section: 1244px x 1703px
Footer: 1244px x 75px
Kuvien sijainti:
Otsakekuva otsakkeeseen. Tarvittaessa tekstin sekaan kuvia.
Kuvien koot:
Otsake kuva: 1920px x 305px
Muut mahdolliset kuvat: 1280px x 720px
Tekstit:
Otsikot: Times New Roman (koko 20pt) Väri: musta
Times New Roman
Leipäteksti: Times New Roman (koko 21pt) Väri: musta
Times New Roman
Värit:
– Valkoinen #FFFFFF (Headerin ja footterin väri, navin väri sekä sectionin väri)
– Harmaa #B2B2B2 (Marginaalin väri)
– Punainen #940100 (Tehoste väri valikoissa)
-Rakennesuunnitelma 1-
Header:
-Nimi
-Puhelinnumero
Footer:
-Maksutavat
Etusivulta löytyy:
– Kuka vuokraa
-Mitä vuokraa
-Missä
-Hinta
-Varauskalenteri
Vuokraus:
– Ohjeistus vuokraamiseen
– Koneen haku / palautusajat (mahdollisesti)
Infoa koneesta:
– Yleiset tiedot (merkki/ malli, rajoitukset esim paino)
– Tekniset tiedot
– Käyttöohjeet
Valmistaja:
– Firman nimi
Tarvittavat kuvat ja logot
Tein itse ”logon” asiakkaan nettisivulle. Muita logoja sivulle ei tule.
Otsake kuvan otin ilmaisesta kuva pankista.
Loput tarvittavat kuvat kysyn asiakkaalta itseltään.
Sivustolle ei tule linkityksiä muille sivustoille tai someihin
-Toteutussuunnitelma & leiskasuunnitelma 2-
Tietokone:
Otsake: 1920px x 366px
Navi: 1920px x 64px
Margin: 370px x 600px
Section: 1180px x 600px
Logo: 680px x 105px
Tabletti
Vaaka
Otsake: 1025px x 220px
Navi: 1025px x 47px
Margin: 155px x 440px
Section: 715px x 440px
Logo: 533px x 76px
Pysty:
Otsake: 770px x 200px
Navi: 770px x 55px
Margin: 0px
Section: 770px x 720px
Logo: 385px x 62px
Puhelin
Otsake: 1244px x 305px
Navi: 1244px x 105px
Margin: 0px
Section: 1244px x 1703px
Logo: 640px x 90px
Kuvien sijainti:
Otsakekuva otsakkeeseen. Tarvittaessa tekstin sekaan kuvia.
Kuvien koot:
Otsake kuva: 1920px x 366px
Muut mahdolliset kuvat: 1280px x 720px
Tekstit:
Otsikot: Times New Roman (koko 20pt) Väri: musta
Times New Roman
Leipäteksti: Times New Roman (koko 21pt) Väri: musta
Times New Roman
Värit:
– Valkoinen #FFFFFF (Navin väri sekä sectionin väri)
– Harmaa #B2B2B2 (Marginaalin väri)
– Punainen #940100 (Tehoste väri valikoissa)
-Rakennesuunnitelma 2-
Etusivulta löytyy:
– Kuka vuokraa
– Mitä vuokraa
– Missä
– Hinta
– Yhteystiedot
Vuokraus:
-Ohjeistus vuokraamiseen
-Koneen haku / palautusajat (mahdollisesti)
-Yhteystiedot toisen kerran
Maksutavat:
-Tieto millä kaikilla välineillä maksun voi suorittaa
-Tieto sovelluksista, joilla maksun voi suorittaa
Infoa koneesta:
-Yleiset tiedot (merkki/ malli, rajoitukset esim paino)
-Tekniset tiedot
-Käyttöohjeet
Valmistaja:
-Firman nimi
Tarvittavat kuvat ja logot
Tein itse ”logon” asiakkaan nettisivulle. Muita logoja sivulle ei tule. Otsake kuvan otin ilmaisesta kuva pankista. Loput tarvittavat kuvat kysyn asiakkaalta itseltään.
Linkitys
Sivustolle ei tule linkityksiä muille sivustoille tai someihin.
-Itsearviointi-
Opiskelija suunnittelee ja toteuttaa tilaajalähtöisen verkkosivuston julkaisujärjestelmällä.
4, Asennan itsenäisesti julkaisujärjestelmän tai käytän valmista julkaisujärjestelmää tilaajalähtöisen sivuston toteutuksessa. Valitsen toteutuksessa käytettävän tarkoitukseen soveltuvan sivupohjan ja muokkaan sen visuaalisesti tarkoituksenmukaiseks.
Opiskelija tuottaa, muokkaa ja julkaisee verkkojakelukelpoista kuva-, teksti- ja videomateriaalia.
4, Tuotan, muokkaan ja julkaisen itsenäisesti verkkojakelukelpoista kuva-, teksti- ja videomateriaali. Optimoin itsenäisesti sivuston mediamateriaalit nopeasti latautuviksi.
Opiskelija optimoi hakukonenäkyvyyttä ja testaa sivuston toimivuutta.
3, Optimoin sivuston metatietoja ja hakusanoja tai hyödynnän niissä julkaisujärjestelmän mahdollisuuksi. Testaan verkkosivuston toimivuutta ja latautumisaikoja eri käyttöympäristöissä.
Opiskelija työskentelee tilaajalähtöisesti ja huomioi toimintansa vaikutukset tuotannon kustannusten muodostumiseen.
5, Työskentelen järjestelmällisesti tilaajalähtöisesti. Toimin ja kommunikoin sujuvasti tilanteen edellyttämällä tavalla tilaajan ja asiakkaiden kanssa.
Opiskelija dokumentoi työnsä keskeisiä vaiheita ja perustelee tekemiään ratkaisuja.
4, Dokumentoin järjestelmällisesti työni keskeiset vaiheet ja perustelen ratkaisujani sujuvasti. Kokoan työnäytteitä ammatillisesta osaamisestani.
Opiskelija toimii vastuullisesti, oma-aloitteisesti sekä kehittää ja ylläpitää ammattiosaamistaan.
5, Toimin vastuullisesti, yhteistyökykyisesti ja oma-aloitteisest. Hyödynnän tarvittaessa muiden asiantuntemusta ratkaistessaan työtehtäviensä erityiskysymyksiä. Haen tietoa työssäni esiin tulleisiin ongelmiin ja uusiin osaamisalueisiin itsenäisesti. Arvioin omaa työskentelyäni ja oppimiskykyäni realistisesti ja monipuolisesti.
