Verkkopalvelujen tuottaminen ja ylläpito 20.10 ✖ Presentation template by SlidesCarnivalPhotographs by UnsplashUnsplash.

Esitys aiheesta: "Verkkopalvelujen tuottaminen ja ylläpito 20.10 ✖ Presentation template by SlidesCarnivalPhotographs by UnsplashUnsplash."— Esityksen transkriptio:

1 www.wordle.net

2 Verkkopalvelujen tuottaminen ja ylläpito 20.10 satu.drufva@tampere.fi ✖ Presentation template by SlidesCarnivalPhotographs by UnsplashUnsplash

3 Aikataulu ✖ 20.10. klo 17-20 LÄHI TSAM A2068 ATK ✖ 3.11. Etä, verkko (17-20) ✖ 11.11. Etä, verkko (17-20)

4 Lähi- ja verkko-opetuksen keskeinen sisältö ✖ Verkkopalvelujen sisältöjen tuottaminen ✖ Verkkopalvelujen kehittäminen ja suunnittelu ✖ Verkkopalvelujen perustaminen ja ylläpito

5 Tehtävä: ✖ Oman työ- tai työharjoittelupaikan verkkopalvelujen suunnittelu, luonti, sisällön tuotto ja ylläpito Työssäoppimisen teema ✖ Osallistuu verkkopalvelun luomiseen, toteuttamiseen ja ylläpitoon Työssäoppimisen teema:

6 www-sivut Responsiivisuus? Retargetointi? Konversio?

7 www-sivuja varten pohdi: Mitä? Mikä on www-sivustojen ensisijainen tehtävä? (Tämä on suunnittelun lähtökohta.) Mihin muuhun tarkoitukseen verkkopalvelua hyödynnetään? Kenelle? Segmentointi: Kenelle suunnittelemasi www-sivustot on tarkoitettu Miksi? Mikä on www-sivustojen ensisijainen tavoite? Milloin? Aikataulu, välitavoitteet

8 Tehtävä: www-sivut WWW-sivut Teemme www-sivut aitoon tarpeeseen wix-työkalulla. (www.wix.com) Mieti mille yritykselle/ tapahtumalle/ yhdistykselle voisit tehdä nettisivut. Sivut voivat olla myös oma portfoliosi.

9 Laadukas sisältö ✖ Löytyy verkosta helposti (avainsanat!) ✖ Vastaa kysymyksiin ✖ Ohjaa kuluttajaa toimintaan ✖ Pitää linkeillä otteessaan ✖ Jakautuu laajalle yleisölle ✖ Vetää puoleensa yhä uudestaan ja uudestaan ✖ Kestää aikaa (pitkä häntä) http://ebuusti.fi/wordpress/wp-content/uploads/2015/03/Hanna- Puro_esitys_24.3.2015_Verkon-avulla-bisnesta.pdf

10 Trendejä: Nyt! Responsiivisuus on must! Responsiivisuus tarkoittaa verkkosivujen mukautumista eri näyttökokoihin. Responsiivinen toteutus helpottaa sivuston käyttöä etenkin matkapuhelmella ja tabletilla. Toukokuun alusta 2015 Google ei enää näytä ei-responsiivisia sivuja haussaan!

11 Tunnista oman yleisösi tarpeet ✖ Opi kuuntelemaan asiakkaitasi: tutki mitä yleisösi/asiakkaat verkosta etsivät ja millä sanoilla ja lauseilla he etsivät! ✖ Vastaa omalla sisällölläsi heidän tarpeisiinsa ja tarjoa ratkaisuja heidän ongelmiinsa! http://ebuusti.fi/wordpress/wp-content/uploads/2015/03/Hanna- Puro_esitys_24.3.2015_Verkon-avulla-bisnesta.pdf

12 Miten? Mitä asiaa aloitussivulle? ✖ Navigointi: Mitkä asiat navigointipalkkiin? max 7 asiaa ✖ Kuinka laaja kokonaisuus tulee olemaan, kasvaako se ja mihin suuntaan? ✖ Kuka verkkopalvelua ylläpitää? ✖ Mitä kuvia ja tekstiä halutaan. mitä on olemassa ja mitä täytyy hankkia? ✖ Onko kaikkiin materiaaleihin käyttöoikeudet? ✖ Aikataulu ✖ Yrityksen visuaalinen ilme ✖ Muita toiveita, tarpeita: Määrittele muut toiveet mm. väreistä, käytettävistä kuvista, päivitettävyydestä, toiminnallisuudesta ym.

13 wix www.wix.com ✖ Valitse pohja ✖ Muokkaa navigointi ✖ Lisää kuvat ✖ Lisää tekstit ✖ Lisää kartta: https://www.wix.com/support/html5/wix-app- market/apps-made-by-w https://www.wix.com/support/html5/wix-app- market/apps-made-by-w How to Build a Website with Wix.com (video) https://www.youtube.com/watch?v=WRU83c06luM ix/kb/how-can-i-use-the-google-maps-1

14 Valokuvaus

15 Valokuvaustehtävä ✖ Valokuvaa henkilökuva yrityksen henkilöstön esittely www-sivulle ✖ Valokuvaa kuvituskuva (esim. maisema, luontokuva yrityksen www-sivuille, someen).

16 ✖ Valokuvaa henkilökuva, joka tulee yrityksen www-sivulle & someen. Kuva voi olla myös omakuva. ✖ Tutkimusten mukaan asiakkaan on helpompi ottaa yhteyttä esim. puhelimella tai spostilla, kun on ensin nähnyt kuvan henkilöstä, johon on ottamassa yhteyttä. Katse kameraan (=helposti lähestyttävä, asiakaspalveluhenkinen) Mitä kuva viestii? (Harrastus, luonteenpiirre, asiallisuus, iloisuus) Teema? Miten kuvattava haluaa tulla nähdyksi? Kuvaa mielellään luonnonvalossa, puolipilvisenä päivänä. Havainnoi yritysten www-sivuja – minkälaisia henkilöstön esittelysivuja on – miten ne toimivat? Valokuvaustehtävä 1. henkilökuva Satu.drufva@tampere.fi

17 ✖ Valokuvaa kuvituskuva (esim. maisema, luontokuva yrityksen www-sivuille, someen). Vaakakuva ja pystykuva. Mikä aihe sopii kuvituskuvaksi ja on tunnelmaltaan oikea? Mieti rajaus, sommittelu. Toimisiko lähikuva? Jos haluat syvyysvaikutelmaa, perspektiiviä aseta etualalle jokin objekti näin syvyysvaikutelma tulee paremmin esiin. Valokuvausstehtävä 2. Satu.drufva@tampere.fi

18 ✖ 1. ✖ Valokuva muodostuu VALOSTA! Siis tarkkaile valoa! Sopiiko kuvaasi myötävalo, vastavalo, sivuvalo vai mahdollisimman tasainen valo. Eri asiat tulevat esiin – vaihtamalla kuva/valokulmaa. ✖ 2. ✖ Muotokuvissa pilvinen sää ja pilvipouta tuo kauniimmin kasvonpiirteet kuin keskipäivän auringonpaiste. Kirkkaassa valossa varjot ovat vahvat ja silmät eivät pysy auki siristelemättä. Kirkkaana päivänä hyvä kuvaspaikka saattaa löytyä varjoista. 7 vinkkiä valokuvaukseen

19 ✖ 3. Hetki ✖ Valokuvaamalla voit ikuistaa ainutlaatuisen hetken. Silmät auki ja kamera valmiiksi. Jos et kamerasi kanssa ole valmiina juuri silloin kun näet jotain kiinnostavaa tapahtuvan, pyydä kaveria toistamaan se mitä näit esim. ”heilauta vielä hiuksiasi samalla tavalla kuin äsken” ja nappaa sitten kuva. ✖ 4. Kuvakulma. Kuva näyttää erilaiselta riippuen kovakulmasta, mitä rajaat pois, mitä näkyy varsinaisen kuvattavan ”taustalla” 5. Rajaa ihmiset oikein. Kuvan tulisi katketa nivelien välistä, kuten olkavarresta, mahasta tai reidestä. Kuvan rajaaminen esimerkiksi ranteen kohdalta saa kohteen näyttämään siltä, että häneltä puuttuu käsi. Samaa sääntöä voi soveltaa esineisiin, kuten tuolinjalkoihin. Hetki, kuvakulma

20 ✖ 6. Sommittelu ✖ Jako kolmeen, kultainen leikkaus ✖ Sommittelun olennainen sisältö on se, että kuvan tärkeimpiä elementtejä ei tule yleensä sijoittaa keskelle. ✖ Kuvittele kuvaan kaksi näkymätöntä linjaa pystyyn ja kaksi vaakaan ja jaa kuva näin yhdeksään yhtä suureen osaan Yritä sitten sijoittaa kuvan tärkein osatekijä, esimerkiksi silmä, lähelle jotakin linjojen leikkauskohdista. Näin katsojan silmä liikkuu ympäri kuvaa. Kolmannesten sääntö pätee niin pysty- kuin vaakakuviinkin ja nostaa esiin niiden olennaisen sisällön. ✖ Lähde: http://www2.amk.fi/digma.fi/www.amk.fi/opintojaksot/0303010/1141990090210/1145963166137/1146052417322/1146053414142.html jahttp://www2.amk.fi/digma.fi/www.amk.fi/opintojaksot/0303010/1141990090210/1145963166137/1146052417322/1146053414142.html ✖ http://natgeo.fi/valokuvat/national-geographicin-kuvausvinkit Sommittelu

21 ✖ 7. Tila Tyhjä tila on merkityksellinen sommittelukeino. Objekti saa paljon enemmän huomiota, jos sen ympärillä on tyhjää tilaa. Katseelle ja liikkeelle suositellaan jättämään tilaa, jos tarkoituksena ei ole ahdas tai ahdistava vaikutelma. ✖ Lähde: http://opinnot.internetix.fi/fi/muikku2materiaalit/lukio/ku/ ku1/02_kuvan_rakentamisen_keinot/02_sommittelu_te oria?C:D=1818915&m:selres=1818915 http://opinnot.internetix.fi/fi/muikku2materiaalit/lukio/ku/ ku1/02_kuvan_rakentamisen_keinot/02_sommittelu_te oria?C:D=1818915&m:selres=1818915 ✖ http://natgeo.fi/valokuvat/national-geographicin- kuvausvinkit sommittelu

22 vastavalo Kuva: Satu Drufva

23 Vastavalo, sumu Kuva: Satu Drufva

24 Aamuvalo, iltavalo Kuva: Satu Drufva

25 Iso aukko, pieni Syvyysterävyys Kuva: Satu Drufva

26 Henkilöstökuvia, teema http://www.nonnicreative.fi/tekijat Kuva: Nina Maaninka

27 Laajakulmalla nenä suurenee (lähin suurenee) Kuva: Satu Drufva

28 Luonnonvalo, ympäristö Kuva: Satu Drufva

29 Sosiaalinen media – viestintää ihmiseltä ihmiselle

30 Some-tehtävä: Kirjaudu ainakin kahteen (uuteen) some- palveluun (havainnointitehtävä markkinointiviestinnän näkökulmasta). Havainnoi, pohdi, tutki miten kanava toimisi parhaiten www-sivustosi viestinnän tukena.

31 Yritysten sosiaalisen median etiketti ✖ Tapa viestiä verkossa ✖ Sisältö edellä ei väline edellä Sisältömarkkinointi, etiketti ✖ Älä tuo liikaa yritystäsi esille mainostaen, vaan mieti miten voit auttaa asiakastasi! ✖ Julkaise sisältöä joka kiinnostaa asiakastasi, etsi asiakkaalle hyötyjä, http://ebuusti.fi/wordpress/wp-content/uploads/2015/03/Hanna- Puro_esitys_24.3.2015_Verkon-avulla-bisnesta.pdf

32 Somen käyttö Suomessa ✖ Elämme suosittelutaloudessa Lähes 80% ihmisistä luottaa eniten kaverin suositteluun tuotteiden ja palveluiden ostamisessa!! ✖ Tämän päivän kuluttaja etsii verkosta, googlaa tietoa päätöksenteon tueksi: jopa 80% kuluttajista tutustuu tuotteeseen ensin verkossa http://ebuusti.fi/wordpress/wp-content/uploads/2015/03/Hanna- Puro_esitys_24.3.2015_Verkon-avulla-bisnesta.pdf

33 Facebookissa on monta tapaa olla läsnä ✖ Henkilöprofiilit ✖ https://www.facebook.com/satu.drufva https://www.facebook.com/satu.drufva ✖ Asiantuntijaprofiilit https://www.facebook.com/alexanderstubb ✖ Suljetut ja avoimet ryhmät https://www.facebook.com/groups/voihanvillasukka/https://www.facebook.com/groups/voihanvillasukka/ (avoin) https://www.facebook.com/groups/176157185856653/https://www.facebook.com/groups/176157185856653/ (suljettu) ✖ Yritysten ja organisaatioiden sivut ✖ https://www.facebook.com/SihtiOy?fref=ts https://www.facebook.com/SihtiOy?fref=ts ✖ Ohje- ja tukikeskus: https://www.facebook.com/help/380049702048759/ Kohdennettu mainonta facebookissa: https://www.facebook.com/help/433385333434831

34 Yritys somessa ✖ Facebook ✖ Instagram: Starbucks Instagramissa: https://instagram.com/p/vhIl-lRc1H/ ✖ Linkedin ✖ Pinterst ✖ Youtube www.vlogit.fiwww.vlogit.fi

35 Credits Special thanks to all the people who made and released these awesome resources for free: ✖ Presentation template by SlidesCarnivalSlidesCarnival ✖ Photographs by UnsplashUnsplash

36 Kuvahausta ✖ Google Kuvahaku etsii kaikki kuvat, sillä oletuksena tekijänoikeuksille on Ei suodateta käyttöluvan perusteella. ✖ Voit kuitenkin rajata hakua käyttöoikeuksien mukaan. Valitse hakutyökalut → käyttöoikeudet TAI ratas TAI asetukset (riippuu näytöstä) ja sieltä "Tarkennettu haku". Alimpana löydät käyttöoikeudet. Oletuksena valittuna on ei suodateta käyttöluvan perusteella, mutta voit valita myös vapaasti käytettävissä...

37 SlidesCarnival icons are editable shapes. This means that you can: ●Resize them without losing quality. ●Change fill color and opacity. Isn’t that nice? :)

38 Kiitos