Bloggaus vinkit - Kuukauden kysytyimmät 4

Viimekuussa oli kysymysten tulva sen verran valtaisa että en kirjoittanut laisinkaan koostettua kirjoitusta kysytyimmistä kysymyksistä. Tässä kuussa kuitenkin tämä hieman pidempi kirjoitus siitä kaikesta mitä viimekuun aikana oikeastaan bloggaamisesta haluttiin tietää. Sekä hieman ylimääräistä tietoa siitä mitä blogin lähdekoodi oikeastaan pitää sisällään...

Kuvista

Ihmisiä tuntuu kovasti askarruttavan erilaiset tilanteet joihin bloggaaja joutuu käsitellessään kuvia. Kuvat ovatkin tärkeä osa blogia ja niiden onnistuminen saattaa taata onnistuneen blogikirjoituksen. Siksi kuviin kannattaakin panostaa ja niiden viilailuun kannattaakin käyttää hieman enemmän aikaa. Tässä yksi kuluneen kuukauden kuva kysymyksistä:

Miten saisin tehtyä tälläisen kuvan?

 

Kyseessä on yksinkertainen Gif animaatio, jossa kaksi samankokoista kuvaa vuorottelee. Tälläisen animaation tekeminen on hyvin yksinkertaista ja ei vaadi kovinkaan paljon tietämystä kuvien muokkaamisesta. Tässä yksinkertaistetut ohjeet siihen miten teet tälläisen animaation Gimpissä ja PhotoShopissa.

Gimp

Kannattaa aloittaa avaamalla Gimp ohjelmassa kuva jonka haluat ensimmäisenä näkyvän tässä animaatiossa. Kuvien tulisi olla suunnilleen saman suuruisia, mutta tämä ei tietenkään ole pakollista. Suosittelen kuitenkin muokkaamaan kuvat saman suuruisiksi, sillä kuvan koon muuttuminen siirryttäessä animaation ruudusta toiseen on ainakin omasta mielestäni hyvin häiritsevää.

Avattuasi ensimmäisen kuvan on aika lisätä animaation toinen "ruutu". Tämä onnistuu helpoiten menemällä Tiedosto valikkoon ja valitsemalla "Avaa tasoina...". Valitse vain kuva jonka haluat animaation toiseen ruutuun ja voila Gimp lisää automaattisesti uuden tason johon tämä kuva sijoittuu.

Gimp on itseasiassa hyvin älykäs kuvankäsittely ohjelmisto ja pelkästään tekemällä kuvan jossa on kaksi tasoa, joissa kummassakin on sisältöä pystyt suoraan tallentamaan sen gif animaatioksi. Kannattaa kuitenkin tehdä muutamia pikku viilauksia animaatioon ennenkuin tallennat sen.

Mene ensiksi valikkoon "Suotimet" valitse kohta Animaatio ja sieltä toista. Eteesi aukeaa uusi ruutu jossa voit tarkastella sitä miltä animaatiosi näyttää. Huomaat varmasti että kuvat vaihtuvat hyvin nopeasti. Siksi onkin syytä hieman hidastaa kuvien vaihtumista.

Aika lisätään sulkuihin nimen perään

Kaksoisnapsauta tason nimeä ja lisää vain sen perään suluissa aika jonka haluat että kukin ruutu näkyy animaatiossa. Esim (1200ms) Aika tulee antaa millisekunteina. Lisää haluamasi aika suluissa kumpaankin tasoon jonka jälkeen testaat animaation toiminnan uudelleen. Huomaa että 1200ms ei ole välttämättä optimaallinen aika, vaan kuvat vaihtuvat edelleen kohtuullisen nopeasti. Löydettyäsi mielestäsi sopivan ajan on aika tallentaa animaatio.

Mene valikkoon "Tiedosto" ja valitse sieltä tallenna nimellä. Valitse tallennusmuodoksi Gif ja anna animaatiollesi haluamasi nimi. Tämän jälkeen valitse tallenna. Eteesi aukeaa ohjeikkuna joka kertoo että tallentaaksesi kuvan animaationa siihen joudutaan tekemään muutoksia.

Muutama sananen muutoksista: Gif -animaatiot eivät ole mitään kuvien aatelia, niiden resoluutio lasketaan pieneksi että ne eivät olisi kohtuttoman suuria ja että niiden latautuminen ei kestäisi iäsyyttä hitaalla internetyhteydellä. Gimp ohjelma muuttaa kuvasi soveltuvaksi Gif animaatioon automaattisesti. Sinun ei siis tarvitse huolehtia siitä itse. Voit kuitenkin itse myös muokata näitä animaation asetuksia, mutta tämä tutoriaali on tarkoitettu aivan pelkkien perusteiden läpikäymiseksi. Eli tämä tutoriaali ohittaa nämä muokkaukset sutjakkaasti ja keskittyy ainoastaan olennaisimpaan. 

Valitse kohdat "tallenna animaationa" ja "muunna indeksoiduksi...." ja klikkaa Vie. Eteesi pomppaa vielä yksi ruutu jossa voit määrittää vielä yhden seikan animaatiostasi. Eli se kuinka pitkä väli animaation ruutujen välillä on. Ennemmin määrittelimme sen kuinka kauan kukin animaation ruutu näkyy näytöllä ja tässä kohtaa määritetään kuinka kauan ns. tyhjä tila näkyy animaation ruutujen välissä.

 Tämä kannattaa pitää kohtuullisen pienenä ellei sitten jostain syystä halua että animaation ruutujen välissä on tyhjä ruutu.

Kannattaa myös varmistaa että sinulla on raksi ruudussa kohdassa "ikuinen silmukka". Muutoin animaatiosi pysähtyy päästyään viimeiseen ruutuun, eikä ala enää alusta (saattaa tietenkin olla että tämä on se mitä haluat joten päätä itse).

Muista asetuksista ei tässä kohtaa kannata pitää huolta sillä animaatio tallentuu kyllä ilman näitä muitakin. Eli valitse vain Tallenna.

Nyt animaatiosi on tallentunut haluamaasi paikkaan. Voit tarkistaa animaation toimivuuden avaamalla luodun gif-kuvan web-selaimessasi.

PhotoShop

PhotoShop ohjelmistossa animaation tekeminen on hyvin samankaltainen prosessi kuin Gimp:ssä. Samaan tapaan asetat animaation ruudut ensin omiin tasoihinsa. Koska PhotoShop on kuitenkin huomattavasti monipuolisempi ohjelmisto on animaation tekeminen hieman erilaista. 

Kuvat aseteltuna omiin tasoihinsa

Aseteltuasi haluamasi animaation kuvat tasoihin valitse ylävalikosta Windows ja sieltä Animation. Tämä avaa ohjelman alaosaan animaatio työkalun. Työkalun oikeassa ylänurkasta klikkaamalla avaa valikko ja valitse "Make Frames from Layers". Tämä tekee jokaisesta tasosta yhden animaation ruudun.

Muuta tasot animaation ruuduiksi

Jollet näe animaatio ikkunassa pikkuruutuja joissa näkyy jokainen kuvan taso omassa ruudussaan,  animaatio -ikkunan oikeasta alalaidasta löytyy nappi (Convert to frame animation) jota klikkaamalla saat näkyviin animaation ruutu näkymän. Nyt kun tasot näkyvät jokainen omassa animaatio ruudussa on aika siirtyä määrittelemään jo Gimp:stä tutut animaatio -ruutujen ajat.

Animaatio ikkuna

PhotoShopissa määrittely onnistuu viemällä kursorin jokaisen animaation ruudun alaosaan ja klikkaamalla auki valikon josta sopivan ajan saat valituksi. Tämän jälkeen animaatioikkunan vasemmasta alanurkasta valitaan vielä se haluatko näyttää animaation ns. jatkuvana luuppina vai et. (Once, 3 times, Forever) Nyt kun nämä ajat on aseteltu on animaatiosi valmis tallennettavaksi. 

Mene siis File -> Save for web and devices. Tämä avaa ikkunan jossa valitaan mihin muotoon tämä komeus tallennetaan. Tallennusmuodoksi valitaan tietenkin jo tutuksi tullut GIF. Seuraavassa ikkunassa valitset vielä Save only images.

Tallentaminen PhotoShop:ssa

Muutama sana animaatioiden laittamisesta blogiin

Kannattaa olla hyvin varovainen lisätessään gif animaatioita blogiin. Ne tekevät blogin hyvin nopeasti raskaaksi, eli sen latautuminen saattaa kestää liian kauan. Sen lisäksi gif animaatioissa piilee myös toinen ongelma. Nimittäin toisin kuin videon niitä ei voi pysäyttää kun liikkuva kuva alkaa ärsyttää. Blogger ei ainakaan viime tarkistuksella ole onnistunut animaatioita ottamaan vastaan eli bloggeriin näitä Gif-animaatioita ei voi ladata. Joudut siis käyttämään jotain kolmannen osapuolen kuvapankkia animaatioidesi säilytykseen, joista sitten vain linkität ne omaan blogiisi. Tekemäsi Gif-animaatiot voit linkittää ainakin suositusta PhotoBucket palvelusta.

Blogialustoista

Mikä olisi paras blogialusta aloittelijalle?

Tämä on nykyisellään mielenkiintoinen kysymys. Valintaan vaikuttavat tietenkin se millaista blogia aiot ryhtyä pitämään ja mitä haluat blogiltasi.

Blogger

Jokainen joka on kirjoittanut blogiaan blogger alustalla tietää että sen ominaisuudet ovat aivan varmasti aloittelijalle tarpeeksi. Ominaisuuksiltaan blogger onkin ilmaisista blogialustoista yksi parhaimmista. Siinä on kuitenkin muutamia heikkouksia joita ei tulisi sivuuttaa. Ensimmäinen ja ehkä suurin heikkous on se että blogger on ollut jo kauan olemassa. Tämä on heikkous siitä syystä että valinnavara erilaisissa bloggerin osoitteissa alkaa olla jo kovin niukka.

Aloittavalle bloggaajalle blogin nimen ja osoitteen valitseminen on yksi tärkeimmistä asioista. Oikean nimen valinta saattaa ratkaista sen menestyykö blogisi lopulta vai ei, täysin riippumatta blogin sisällöstä. Koska blogger palvelussa on niin tolkuton määrä käyttäjiä lyhyet ja helposti muistettavat blogin osoitteet ovat jo aivan varmasti käytetty. Jos olet siis osoitteestasi kovin tarkka joudut ehkä investoimaan omaan domain tunnukseen tai etsimään vaihtoehtoista blogialustaa itsellesi.

WordPress (Ei wordpress.com) 

WordPress on maailman suosituin julkaisualusta, sen skaalautuvuus on omaa luokkaansa ja erilaiset lisäosat ovat tehneet siitä suunnattoman menestyksen. Miinus on kuitenkin se että tarvitset joko oman palvelimen tai vuokrattua palvelintilaa kolmannelta osapuolelta jotta voisit käyttää WordPress alustaa sellaisena kun se todella on tarkoitettu. Ammattilaisen valinta. 

Tumblr.

Muutama sananen Tumblr palvelusta: Kirjoitin tämän blogin alkutaipaleella tumblr palvelusta ja siitä miten sen suosi on kovassa kasvussa. Sen jälkeen on tapahtunut paljon ja Tumblr on räjähtänyt aivan uusiin mittoihin. Se on nimittäin ohittanut mm. itselleni niin rakkaan bloggerin suosiossa.

Tätä selittää suurelta osin Amerikkalaisten YouTube tähtien ääretön ihastus tätä julkaisualustaa kohtaan. Tumblr onkin oivallinen väline kaikenlaisen viihteen jakamiseen, olivat kyseessä sitten videot, kuvat tai animaatiot. Tumblr on osannut tehdä yhden asian paremmin kuin yksikään muu kilpailijansa. Se on osannut yhdistää sosiaalisenmedian bloggaamiseen tavalla jolle ei löydy vertaa.

Satunnaiselle bloggailulle ja viihdettä rakastavalle Tumblr on varteenotettavin vaihtoehto, kirjoittelusta pitäville blogger tarjoaa parhaat ominaisuudet ilmaiseksi ja wordpress vuorostaan on paras valinta todelliselle blogihullulle ja ammattilaisille.

Kirjoittamisesta

Kirjoittaminen on yksi bloggaamisen perusteista, mutta sekään ei aina ole ihan itsestäänselvää. Joskus tulee eteen tilanne jolloin aihetta kirjoitukseen ei vain yksinkertaisesti ole. Sellainen tuli eteen muutamallekkin bloggaajalle, jotka kysyivät vinkkejä siitä mistä itseasiassa kirjoittaa?

Bloggaajalle on olemassa monia erilaisia vaihtoehtoja mistä kirjoittaa. Riippumatta blogisi sisällöstä / aihepiiristä voit aina ensimmäisenä turvautua rakkaisiin lukijoihisi. 10 päätä keksii kirjoitus ideoita enemmän kuin 1. Kuten itsekkin tässä blogissa olen tehnyt, eli pyytänyt teiltä kysymyksiä ja juttuideoita. Tämä ei tee sinusta yhtään huonompaa bloggaajaa, vaan tällä tavalla otat yhteyden lukijoihisi ja saat heidät mahdollisesti palaamaan herkemmin lukemaan blogiasi yhä uudestaan. 

Toinen ehtymätön kirjoittamisen aihe ovat tietenkin kirjoitukset joita olet jo kirjoittanut. Voit aina huoletta palata menneeseen. Kerrata ja täsmentää mitä joskus muinoin kirjoitit. 

Joskus bloggaajaa vaivaa myös runsaudenpula. Tämä saattaa olla itseasiassa paljon tuskallisempaa kuin se että aiheita ei tunnu olevan laisinkaan. Liian suuresta määrästä ideoita ja artikkeleita on hyvin vaikea keksiä mitkä purevat lukijoihisi parhaiten. Siksi kannattaakin kerätä kaikki ideasi yhteen nippuun ja kokeille tietyin väliajoin uudentyyppistä blogikirjoitusta. Saattahan olla niin että blogisi lukijat ovat iäisyyden etsineet juuri tietyntyyppistä kirjoitusta ja sinä toimitat sen heille. Ei siis kannata kangistua kaavoihin vaan jatkaa ainaista yrittämistä ja uusiutumista.

Bloggerin asettelujen muokkaaminen

Bloggerissa on mahdollista muokata sivuston asettelua ja ulkoasua lähestulkoon rajattomasti. Sivustosta voi tehdä juuri sellaisen kuin itse haluaa. Tälläiset muokkaukset tehdään joko blogin lähdekoodissa tai käyttäen bloggeriin sisäänrakennettua "Mallinsuunnittelu työkalua". Tämä työkalu helpottaa peruskäyttäjän työtä huomattavasti sillä enää sinun ei tarvitse tehdä muutoksia bloggerin lähdekoodin puolella. Tällöin myös todennäköisyys siihen että jokin menee vikaan on huomattavasti pienempi.

Välillä kuitenkin tulee tilanne jolloin muutokset tulisi tehdä lähdekoodin puolella. Se saattaa olla hieman haastavaa varsinkin jos ei ole pienintäkään käsitystä html:stä tai css:stä. Kuten olen jo useaan otteeseen kertonut blogi koostuu periaatteellisesta kahdesta osasta, HTML ja CSS osa. HTML määrittelee sen missä mikin asia sivuilla näkyy konkreettisesti ja CSS -osa määrittelee sen miltä mikin osa näyttää.

Useinmiten bloggaajat tuskailevat erilaisten kosmeettisten muutosten kanssa. He haluavat keskittää kuvan keskelle sivua tai sen laitaan, haluavat suuremman fontin/eri fontin jne.Tälläisten muutosten tekeminen ei välttämättä vaadi lähdekoodin puolelle siirtymistä, mutta on olemassa liuta muita muokkauksia joita bloggerin "Mallinsuunnittelu työkalulla" ei ainakaan vielä voi tehdä. Tässä siis muutamia perus selityksiä siitä mitä mikin bloggerin lähdekoodista löytyvä koodinpätkä tarkoittaa:

CSS-osa

body	Blogin runkoon liittyvät muokkaukset, sisältää usein mm. fontin määrittelyt
a:	a:link, a:hover, a:visited linkkeihin liittyvät ulkoasumäärittelyt. a:hover=kun hiirenkursori linkin päällä a:visited = jo vierailtu linkki. Voi sisältää mm. fontti määrittelyjä, koko, väri jne.
header, h2, h3	Otsikoihin liittyvät määrittelyt, eri otsikkotyypeillä voi olla omat määrittelynsä esimerkiksi .header h1, joka tarkoittaa blogisi otsikkoa. Voit määritellä fontin, koon, värin jne.
.post-body	Sisältää määrittelyjä jotka sijoittuvat blogissasi itse tekstiosaan
.widget	Määrittelyt jotka koskevat erilaisia gadgetteja blogissasi, eri gadgeteilla voi olla omat määrittelynsä css osassa
.post-footer	Blogikirjoituksesi alatunnisteen määrittelyt. HUOM! ei tarkoita koko blogisi ala-osaa vaan ainoastaan kirjoituksen alaosaa jossa esimerkiksi sijaitsevat erilaiset jakopainikkeet ja kommentointi nappi jne.

Jotta asiat eivät olisi liian yksinkertaisia:

Ulkoasuun liittyvät muokkaukset eivät kuitenkaan bloggerissa rajoitu pelkästään näihin css osan määrittelyihin. Bloggerin lähdekoodin alussa on määrittelyjä jotka vaikutta myös omalta osaltaan ulkoasuun, eli jos css-koodin muuttaminen ei vaikuttakkaan blogisi ulkoasuun halutulla tavalla kannattaa käydä tarkistamassa että haluamiasi määrittelyjä ei löydy hieman eri kohdasta. 

Voit tunnistaa nämä ylimääräiset määrittelyt helposti ne alkavat aina "<Variable...". Blogin CSS-osassa voidaan myös "kutsua" määrittelyjä täältä variable puolelta tähän tapaan:

body { font: $(body.font);

Ylläolevassa css-määrittelyssä ei ole erikseen kirjoitettu millaista fonttia tulee käyttää. Tämä määrittely on kirjoitettu jo variable puolelle josta löytyykin vastaavanlainen body.font määritelmä, joudut siis tekemään muutokset tähän variable osaan, jos haluat muuttaa blogisi kirjoitusten fonttia ja kokoa.

<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

HTML-osa

Blogin html osa on ehkä vielä sekavampi bloggerissa kuin yllä käsitelty css osa, jos se nyt on mahdollista. HTML-osaan määritellään siis kaikkien sivusi elementtien absoluuttiset sijainnit. Eli missäkohtaa blogiasi sijaitsee mikin Gadget onko blogisi alatunniste ja ylätunniste omilla paikoillaan jne. 

Täältä voit myös määritellä kokonaisten oisoiden sijoittumisen suhteessa toisiinsa. Tämä saattaa kuulostaa hieman hankalalta mutta ei ole sitä. HTML osassa blogisi kaikki palapelinosaset saavat oman paikkansa. 

HTML osan koodeista:

<b:if cond	Aloittaa ehtolauseen, ehtolauseen sisällä oleva html koodi näytetään ainoastaan jos ehtolauseen määrittely täyttyy.Esim. <b:if cond=nälkä>Ruokaa</b:if > Tämä esimerkki on tietenkin tuulesta temmattu. Ehtolauseista voit lukea tästä kirjoituksesta
<b:widget id='	Eri gadgetit joita blogiisi olet asettanut näkyvät html koodissa seuraavanlaisesti. <b:widget id='WidgetinNimi' .... Etsimäsi widgetin nimen perusteella tiedät helposti mitä koodinosaa sinun tulee muokata. Widgetin nimen löytämiseen ohjeet löytyvät tästä kirjoituksesta
<div class='post-body	Määrittelee missä kohtaa blogia jokaisen blogikirjoituksesi alku on. Tämän jälkeen voit esimerkiksi määritellä näytettäväksi vaikka AdSense mainoksen jokaisen kirjoituksesi yhteydessä tähän tapaan: <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> <div style='float: left; margin-left: 5px; margin-right: 10px;'> <b:if cond='data:blog.pageType == &quot;item&quot;'> &lt;script type=&quot;text/javascript&quot;&gt;&lt;!-- google_ad_client = &quot;ca-pub-080000000000000&quot;; google_ad_host = &quot;pub-00000000000000&quot;; /* Uusi_Mainos */ google_ad_slot = &quot;000000000&quot;; google_ad_width = 336; google_ad_height = 280; //--&gt; &lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt; &lt;/script&gt; </b:if></div> Kyseisen AdSense mainoksen koodi on sijoitettu ehtolauseen sisään joka määrittää että mainos ei näy muutoin kuin silloin kun ruudulla ei ole näkyvissä kuin 1 kirjoitus. Ehtolauseista ja niiden käytöstä voit lukea täältä.
<data:post.body/>	Kirjoituksesi. Kaikki koodit jotka sijoitetaan tätä ennen näkyvät kirjoituksesi yläpuolella ja kaikki tämän jälkeen sijoitettu näkyy vastaavasti alapuolella.
<div class='post-footer'>	Kirjoituksesi "alatunniste" sisältää mm. kommentointi linkin, labelit(tunnisteet), mahdollisen kellonajan jne.
Yelistä tietoa	Blogin html-osan eri kohtia voi muokata hyvin laajasti niitä voi esimerkiksi keskittää tähän tapaan: <div align="center" > Voit myös lisätä blogin eri osiin uusia toimintoja kuten vaikkapa AdSense mainoksen tms. Kannattaa "rohkeasti siis ryhtyä kokeilemaan mitä kaikkea saat aikaan. ( Suosittelen kokeilemista varten luomaan erillisen blogin jossa testailet lähdekoodin muokkaamista ennenkuin teet muutoksia varsinaiseen blogiisi. )

Loppu "jorinat"

Nyt on taas käyty läpi kuukauden kysytyimpiä kysymyksiä. Tietenkin kuten aina kysymyksiä otetaan vastaan ja niihin vastaillaan mahdollisimman kattavasti ja nopeasti. Pyydän kuitenkin ottamaan huomioon että vastaaminen ei välttämättä tapahdu saman vrk aikana, riippuu aivan kysymyksestä voidaanko siihen edes vastata sähköpostitse vai vaatiiko se joitain erityis järjestelyjä. Esimerkiksi vaikka mahdollisten kuvien käyttöä, selkeyttämään vastaamista.

Tästä huolimatta tai ehkä juuri siksi toivoisinkin palautetta teiltä rakkaat lukijani onko tälläinen vastausten esittely teille mieluisaa luettavaa vai haluatteko kenties jotian muuta ajanvietettä? Onko mahdollisia toiveita ? Miltä kuulostaisivat vaikkapa videovastaukset? Ehdotuksi ja uusia kysymyksiä saa ja pitää jättää. Blogi terveisin Mikko...