Tänään 19.9.2013 alkaa muuten 26 Helsinki International Film Festival – Rakkautta ja Anarkiaa. Mekin olemme siellä mukana. Tai no, rehellisesti ottaen vähän niinkuin hengattaisiin siinä sivussa omalla videollamme. Muistatko kun bloggasin aiemmin mainostuotannosta ja linkkasin videoomme Juutubessa.
Penaalin terävin
Ei videota pelkästään huvikseen tehty. Kyse oli Corellian ja Onsight Helsingin yhteisestä mainostuotannosta. Yhdessä kun toimitaan, kannattaa myös markkinointia tehdä yhdessä. Niinpä teimme yhdessä mainosvideon, jota esitetään Narinkkatorilla suurella valotaululla. Videon materiaalin tuotimme itse mutta editoinnista ja muusta tuotannosta vastasi PR Entertainment. Nyt paljon popcornia mukaan ja valotaulua tuijottamaan – Voit bongata videomme.
Mainoskampanjaa varten tarvittiin myös sivusto, johon ohjata ihmiset. Tuntui tehottomalta listata molempien yritysten verkko-osoitteita, joten perustimme uuden yhteisen kampanjasivun, jota voimme käyttää myöhemminkin. Sivusto löytyy osoitteesta penaalinteravin.fi tai oikein skandimerkeillä penaalinterävin.fi.
Ääkköset domainiin
Perinteisesti ja yleensä vieläkin domainosoitteissa ei käytetä ääkkösiä. Teknisesti se on kyllä mahdollista vaikka useimmat ihmiset eivät niitä käyttäisikään vaan automaattisesti jättäisivät pisteet kirjainten päältä pois; ä=a ja ö=o jne. Siitä miten tällainen domain voidaan ottaa käyttöön on kerrottu vuorostaan Onsightin Blogissa. Mikäli tekniikka kiinnostaa ja muutenkin, käy lukemassa.
hsla(0, 0%, 0%, .5)
Tässä sivussa ei ole käytetty mitään ihmeellistä tekniikkaa. Päätin etten laita sinne ensimmäistäkään skriptiä ainakaan tässä vaiheessa. Sivu on pelkkää HTML ja CSS koodia. Tausta on koko sivun kokoisena skaalautuva kuva ja sen päällä muutama tekstilaatikko. Olen käyttänyt läpinäkyvyyttä mikä ei tietenkään toimi ”vanhoilla selaimilla”. Läpinäkyvyys muuten voidaan tehdä CSS:ssa esimerkiksi käyttämällä hsla värimääritystä, josta itse pidän.
hsla määrityksessä arvothan ovat hsla(hue, saturation, luminosity, alpha) eli suomeksi hsla(sävy, värikylläisyys, kirkkaus, läpinäkyvyys). Otsikon mukainen värimääre on muuten musta ja puoliksi läpinäkyvä, kuten jokainen edellä olevasta kuvauksesta jo osasi päätellä. Kun käytetään sellaista CSS ominaisuutta mikä ei ole tuettu ”heikommissa” selaimissa, tulee väri määrittää ensin tavalla, jonka myös nämä lahjattomat selaimet tunnistavat. CSS toimintamallin mukaan myöhemmin annettu modernimpi sääntö ylikirjoittaa aiemman mikäli selain sellaisen ymmärtää. Selaimethan jättävät huomiotta säännöt joita eivät ymmärrä jolloin on koodarin vastuulla kirjoittaa säännöt oikein.
Oikein muuta erikoista en CSS säännöistä käyttänytkään. Pikkasen pyöristin laatikoiden kulmia – vaivaiset 4px ettei efekti olisi liian ilmeinen.
Puhelinnumerot linkeiksi
Koska sivu on tarkoitettu selattavaksi myös kännyköillä. Ajatushan on, että ihmiset kaupungilla liikkuessaan voivat heti mennä sivulle sillä laitteella mikä taskussa sattuu olemaan. Kunhan laite on edes tolkullinen ominaisuuksiltaan. Mobiililaitteiden käyttäjien käyttökokemusta voidaan parantaa käyttämällä lomakkeissa oikeita input tyyppejä tai muita syötetapoja. Penaalinterävin sivulla on vain Antin ja Juhan puhelinnumerot sekä sähköpostiosoitteet linkkeinä. Tiesitkö, että voit käyttää HTML koodissa a -elementillä href attribuutilla linkin tyyppinä tel: arvoa. Esimerkiksi Juhan puhelinnumero on sivulla muodossa <a href=”tel:0401713360″>040 171 3360</a>. Kun linkin tekee tällä tavoin saa se puhelimen soittamaan numeroon.
Tällaista tällä kertaa. Piti kirjoittaa iOS 7 ominaisuuksista mutta ehkä sitten huomenna 🙂