TIETOTEKNIIKAN PERUSTEET, DIGIKUVAUS JA WWW-SUUNNITTELUN PERUSTEET

NGpk13

Ensimmäisen näytön harjoittelua.


Visuaalisen materiaalin tuottaminen www-sivuille.

Tehtävä 1.

QR-koodit

Tee itsellesi QR-koodi ja laita se omille www-sivuillesi. Koodista aukeaa esimerkiksi joku toinen sivusto tai vaikka sähköinen käyntikortti (vCard).

Täällä saat helposti tehtyä qr-koodeja:

http://goqr.me/

Koodin lukuapplikaation saat ladattua ilmaiseksi oman älypuhelimesi kauppapaikasta.

Esimerkki QR-koodien käytöstä Flash-ohjelmalla tehdyssä tietovisassa löytyy Yhteiset/TietotekniikanJne/QRVISA ja QrVisa.fla.


Adobe Flash

Tunneilla käydään läpi Flash-ohjelman käyttöliittymä, tehdään tuntiharjoituksia, nappien tekeminen ja ohjelmointi, harjoitellaan www-sivujen ja käyttöliittymän tekoa, sekä animointia.

Tuntiharjoituksia:

Graafinen symboli
- piirrä haluamasi kuvio tai tuo kuva File-valikon Import-komennolla
- valitse piirros tai kuva
- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)
- siirrä symboli työskentelyalueen vasempaan reunaan
- klikkaa kuvapaikkaa 100
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- siirrä symboli (kuvapaikassa 100) työskentelyalueen oikeaan reunaan
- klikkaa kuvapaikkaa 1 hiiren oikealla napilla ja valitse Create Classic Tween
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Kiihtyvyys ja hidastuvuus
- klikkaa kuvapaikkaa 50
- kopioi edellinen pääkuva (kuvapaikasta 1) painamalla näppäintä F6
- klikkaa kuvapaikkaa 1
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi -100 (Ease In = kiihtyvyys)
- klikkaa kuvapaikkaa 50
- muuta oikeassa reunassa (Properties > Tweening) Ease-arvoksi 100 (Ease Out = hidastuvuus)
- paina Enter-näppäintä niin symbolisi lähtee liikkeelle

Läpinäkyvyys
- klikkaa kuvapaikkaa 1
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi   0 %
- klikkaa kuvapaikkaa 100
- klikkaa graafista symbolia (valitse se)
- valitse oikeassa reunassa (Properties > Color Effect) Style.pudotusvalikosta Alpha ja säädä sen arvoksi   0 %
- symbolisi on nyt animaation alussa ja lopussa läpinäkyvä

Polku

- piirrä kärpänen

- muuta se graafiseksi symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- klikkaa kärpäsen Layeriä hiiren oikealla napilla ja valitse Add Classic Motion Guide

- piirrä uudelle Guide Layerille mutkitteleva viiva työskentelyalueen vasemmasta alareunasta oikeaan yläreunaan

- klikkaa kuvapaikkaa 50 ja tee uusia välikuvia painamalla näppäintä F5

- valitse kärpäsen Layer klikkaamalla sitä hiiren vasemmalla napilla

- siirrä kärpäsen symboli viivan päälle vasemmassa alareunassa, mistä viiva alkaa

- klikkaa kuvapaikkaa 50 ja kopioi pääkuva painamalla näppäintä F6

- siirrä kärpäsen symboli viivan päälle oikeassa yläreunassa, minne viiva loppuu

- klikkaa kärpäsen Layerin ensimmäistä kuvapaikkaa hiiren oikealla napilla ja valitse Create Classic Tween

- piilota polku (viiva) klikkaamalla hiiren vasemmalla napilla pientä palloa silmän kuvan alapuolella Guide Layerillä

Napin ulkoasu

- voit tehdä napin piirroksesta, tekstistä tai kuvasta

- valitse piirroksesi/tekstisi/kuvasi

- muuta se Button-symboliksi Modify-valikon Convert to Symbol-komennolla (anna sille nimi)

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- kuvajanalla on vain neljä kuvapaikkaa: Up, Over, Down ja Hit

- Up-kuvapaikassa määritellään miltä nappi näyttää, kun mitään ei tapahdu

- Over-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä

- Down-kuvapaikassa määritellään miltä nappi näyttää, kun hiiren kursori on napin päällä ja hiirtä klikataan

- Hit-kuvapaikassa määritellään napin vaikutusalue (tämä ei näy käyttäjälle)

- muuta napin ulkoasua haluamallasi tavalla (muista: F6 kopioi edellisen pääkuvan, F7 tekee uuden)

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin äänet

- tuplaklikkaa Button-symbolia, niin pääset symbolin editointitilaan

- tee napille uusi Layer vasemman alanurkan New Layer-painikkeella

- ääniä kannattaa laittaa vain Over ja Down kuvapaikoille

- tuo haluamasi äänet File > Import > Import to Library)

- tee uudet pääkuvat uudelle Layerille Over ja Down kuvapaikalle klikkaamalla kuvapaikkaa ja sitten painamalla F7

- klikkaa Over-kuvapaikan pääkuvaa uudella Layerillä (valitse se)

- valitse oikeassa reunassa (Properties > Sound) Name-pudotusvalikosta haluamasi ääni

- toista sama Down.kuvapaikassa

- pääset pois napin editointitilasta klikkaamalla Scenen nimeä vasemmassa yläreunassa

Napin testaaminen

- valitse Control-valikosta Enable Simple Buttons

- nyt nappisi toimii

Napin Actionscript

- valitse Button-symboli klikkaamalla sitä

- valitse Window-valikosta Actions

- avaa vasemman reunan Global Functions-valikko klikkaamalla sen vasemmalla puolella olevaa pientä   nuolta

- avaa Movie Clip Control-valikko samalla tavalla

- tuplaklikkaa valikon on-komentoa

- valitse ilmestyvästä parametrivalikosta release tuplaklikkaamalla sitä

- koodi-ikkunassa pitäisi näkyä on (release) { }

- klikkaa aaltosulkujen välissä (seuraava komento lisätään sinne)

- avaa vasemman reunan Browser/Network-valikko klikkaamalla sen vasemmalla puolella olevaa pientä   nuolta

- tuplaklikkaa valikon getURL-komentoa

- kirjoita koodi-ikkunassa komennon kaarisulkujen väliin lainausmerkeissä haluamasi nettiosoite (esim. "http://www.google.fi")

- jos käytät nappia sähköpostin lähettämiseen kaarisulkujen väliin kirjoitetaan lainausmerkeissä mailto: ja sähköpostiosoite (esim. "mailto:etunimi.sukunimi@sataedu.fi")

- jos haluat avata napista toisen nettisivun kaarisulkujen väliin kirjoitetaan lainausmerkeissä tiedoston nimi (esim. "etusivu.html")

- jos napista siirrytään toiseen Frameen tai Sceneen, käytetään komentoa gotoAndPlay tai gotoAndStop (esim. gotoAndPlay (1) tai gotoAndPlay ("tokascene",1)

- parasta on kuitenkin nimetä (Label) kuvapaikat joihin hypätään eli klikkaa kuvapaikkaa ja kirjoita sille nimi kohdassa Properties > Label > Name ja käytä sitten komentoa gotoAndPlay ("nimi")


Videoeditointi

Kuvauspäivä ke 12.02.

Valokuvasimme ja videokuvasimme sisältöä nettisivuille. Kävimme läpi videoeditoinnin perusteita Adoben Premiere -ohjelmalla.


Uutiskirjeet Mailchimpillä

Mailchimp (www.mailchimp.com) on ohjelma uutiskirjeiden tekemiseen ja postittamiseen. Käyttäjätunnuksen tekeminen on ilmaista.

Klikkaamalla ohjelman etusivun yläreunassa Support saat näkyviin Mailchimpin omat ohjeet postituslistojen (Lists), uutiskirjeiden (Newsletters) ja kampanjan (Campaigns) tekemisestä.

Kun olet kirjautuneena omalle sivullesi, voit aloittaa uuden kampanjan klikkaamalla oikeassa reunassa Create Campaign ja valitsemalla kampanjatyypin. Seuraavaksi kysytään mille postituslistalle uutiskirjeet lähetetään, joten jos et ole vielä tehnyt yhtään listaa klikkaa vasemmassa reunassa Lists.

Postituslistalle voi lisätä vastaanottajia yksitellen tai esimerkiksi exel-tiedostoista.

Kun lista on tehty kampanjan määrittämistä voidaan jatkaa (klikkaa uudelleen Create Campaign).

Seuraavaksi kampanjalle annetaan nimi ja määritellään mm. lähettäjä, lähettäjän sähköpostiosoite ja viestin aihe.

Sitten suunnitellaan uutiskirjeen ulkoasu. Voit käyttää omia aikaisemmin tekemiäsi pohjia, käyttää valmiita malleja, tai aloittaa suunnittelun tyhjästä ja käyttää nettisivustosi ulkoasua suunnittelun pohjana.

Tämän jälkeen tarkistetaan miltä uutiskirjeesi näyttää tekstinä, jos vastaanottaja ei voi tai halua vastaanottaa html-sisältöä.

Lopuksi lähetetään kampanjan uutiskirjeet.

Myös Mailchimp tarjoaa runsaasti tilastotietoa kampanjan etenemisestä ja tuloksista (Reports).


Täällä hyvä ohje:

http://redrokk.com/2013/02/25/tutorial-email-marketing-campaign-mailchimp/


Ja täällä suomeksi:

http://outinecommerce.blogspot.fi/2012/02/mailchimp-ohjeistukset-screencastina.html


Mainonta Facebookissa

Mainonta Facebookissa (www.facebook.com) on tehokasta ja edullista. Alkuun pääset valitsemalla asetukset (rattaankuva) ja sieltä mainosta. Jos yritykselläsi ei vielä ole omaa sivua, voit tehdä sen täällä (Vaihe 1: Suunnittele Facebook-sivu).

Facebookissa yksityishenkilön seinä, yrityksen sivu, ryhmä ja tapahtuma näyttävät periaatteessa samanlaisilta, mutta sisältö ratkaisee.

Klikkaamalla Luo useita mainoksia (Vaihe 2: Luo yhteys ihmisiin) pääset aloittamaan. Aseta ensin kampanjallesi tavoite, kerro mitä sivua haluat mainostaa, ja valitse kohderyhmä sijainnin, iän, kiinnostusten yms. perusteella. Täällä voit myös asettaa kampanjasi budjetin.

Lisäksi saat käyttöösi raportteja ja kaavioita, joilla voit seurata kampanjasi etenemistä ja sen tuloksia.

Tässä Facebookin omat ohjeet mainosten tekemiseen:

https://www.facebook.com/business/connect

Sivuston näkyvyys Googlessa

Sivuston näkyvyyden parantaminen Googlessa onnistuu pienilläkin parannuksilla. Kuitenkin, mitä syvemmälle asiassa menee sitä monimutkaisemmaksi asia muuttuu.

Voit tarkistaa, millaisina Google näkee sinun sivusi kirjoittamalla Googlen hakukenttään cache:www.sivujenosoite.fi.

Tässä asioita, jotka vaikuttavat siihen, miten esimerkiksi Google löytää nettisivusi:

1. Sivuston kieli (käytätkö samoja sanoja kuin hakukoneen käyttäjät)
2. Tärkein sisältö tekstinä!
3. Kuvat, videot ja äänet ovat hakukoneille hankalia (näillä pitäisi olla myös kuvaava nimi alt-parametrilla)
4. Muiden linkit sivustoosi parantavat näkyvyyttä.
5. Testaa, miltä sivustosi näyttää Googlen cache-toiminnolla (tällaisina hakukone "näkee" sivusi)
6. Hakukoneen pitää päästä sivustosi jokaiselle sivulle (linkitys kuntoon)
7. Tärkeimmät hakusanat sivun otsikkoon ja sivun alkuun
8. Meta-kuvaus sivustosta
<head>
<meta name="description" content="Here is a description of the applicable page">
</head>
9. Sivuston osoitteen on hyvä olla lyhyt (www.url.fi)
10. Sivuston rakenteellinen, mahdollisimman kuvaileva ohjelmointi (hakukoneoptimointilinkki chapter 4)


Kattava selvitys hakukoneoptimoinnista:

http://www.seomoz.org/beginners-guide-to-seo


Tässä mainio ohje näkyvyyden parantamiseen:

http://helsinkipromo.com/internet-nakyvyys-ilmaiseksi/


Ja tässä Googlen oma virallinen ohje verkkovastaaville:

https://support.google.com/webmasters/answer/35769?hl=fi