Front-end koodausta ja muita projekteja

 

Huomasin, että on korkea aika kirjoittaa muista töistäni kuin vaatesuunnittelusta ja valokuvauksesta, ettei koko työnkuvani profiloituisi pelkästään vaatesuunnitteluun. Aloin viime syksynä tekemään Natja K. vaatemallistoa juuri vastapainoksi pitkään jatkuneelle koodaukseen keskittyneelle ajanjaksolle, jota oli kestäny yhteensä 14 kuukautta yhteen menoon. Olin toki käyttänyt päivittäin Photoshopia koko tuon jakson ajan ja pitkiä pätkiä Illustratoria ja InDesignia, mutta koodaus oli vienyt kaikkein eniten aikaa. Kerron tässä postissa jotakin siitä, kuinka olen kehittynyt koodaajana ja esittelen lyhyesti yhden videoprojektin.

Koodaus on osa-alue, jota ei yleisölle näy ja olen käyttänyt lukemattomat yksinäiset tunnit sen lisäopetteluun omaan koulutukseeni kuuluneen perus-HTML- ja CSS-koodauksen lisäksi. Pääasiassa olen tehnyt WordPress-sisällönhallintajärjestelmällä verkkosivuja, joka minun kohdallani on tarkoittanut sitä, että en käytä vain olemassaolevien teemojen rakenteita, vaan toteutan oman tai jonkun muun suunnitteleman leiskan koodaamalla teemasta uuden teeman. Ainoastaan toiset WordPressillä sivuja paljon sivuja tehneet voivat tunnistaa tutkittuaan lähdekoodiani, minkä teeman perusrunko on ollut sivujen pohjana.

Koulutukseeni ei kuulunut lainkaan responsiivisen koodauksen opetusta ja lähdin tutkimaan sitä samalla, kun aloin tutustumaan kunnolla WordPress-sisällönhallintajärjestelmään heinäkuussa 2012. Responsiivisten sivujen toteuttamiseen olen löytänyt suhteellisen helposti fluid-CSS:ää, jota osaan nykyään muokata toimimaan lähes mihin muotoon tahansa. Fluid-CSS saa tekstipalstat kapenemaan selainikkunaa pienennettäessä saumattomasti niin, että sanat hyppivät selainikkunan koon mukaan kapeammiksi riveiksi. Minulla kesti jonkun aikaa ymmärtää yksinään, mihin kuvien saumaton prosentuaalinen skaalaus perustuu koodissa ja mitä tarkoittaa fluid-teknologiat, mutta ymmärrettyäni mihin ne perustuvat olen kokenut sen helpoksi.

Pääasiassa kaikki mitä koodaan itse on front-endiä, eli sitä, mikä näkyy internetin käyttäjille. Php:tä tai muuta ohjelmointia en kirjoita juuri lainkaan itse, mutta WordPressin php:tä muokkaan toimimaan eri tavoin. WordPress itsessään toimii php:llä, joten WordPressillä layoutien koodaamisessa ei voi välttyä php:n muokkaamiselta. Olen ehdottomasti ensimmäisenä visuaalinen ja käyttöliittymien suunnittelija, mutta saan toteutettua nykyään niin hyvin verkkosivuista halutun näköisiä ja responsiivisia, että voin kutsua itseäni myös front-end koodaajaksi. JavaScriptiä nollasta en osaa kirjoittaa, mutta hyödyntää ja muokata JavaQueryja.

koodaus_2_800

Bootstrap

Olen opetellut käyttämään jonkin verran myös Bootstrap front-end teknologiaa, joka on itsenäinen responsiivisen koodin ja JavaScriptien koodipaketti. Bootstrap on ladattavissa sen omilta sivuilta ja alun perin sen on kehittänyt Twitterin suunnittelija ja kehittäjä vuonna 2010. Bootstrap julkaistiin avoimen lähdekoodin ladattavana koodipakettina ensimmäisen kerran 2011 ja versio 2:stä lähtien se on ollut responsiivinen.

Bootstrap perustuu valmiisiin nimettyihin palstajakoihin ja sitä käytettäessä div-nimet ovat vakioita. Bootstrap vaatii tutustumista sen kooditiedostoihin ja toimintaan, mutta kun hallitsee ne, voi keskittyä vain sivuille tulevien elementtien ulkoasujen koodaamiseen ja kaikki responsiiviset eri levyiset palstat ovat koodissa valmiina.

koodaus_1_800

 

Video HSL:lle venäläisiä matkailijoita varten

Lopuksi esittelen viime kesäkuussa Xtrem Media -osuuskunnan kautta toteutetun videon, jonka käsikirjoitin ja ohjasin. Video on tehty Youtube-videoksi, jossa esitellään HSL:n joukkoliikennettä ja näytetään miten vuorokausilippua voi hyödyntää. Videon on kuvannut, äänittänyt ja editoinut Jarno Paavola.

Dim

 

dim_2_800

I tried to photograph the chair, what I upholstered in 2008, but it was way too dim. I thought, let it be dim then properly and take something out of it.

dim_3_800

1930’s Style Hat

 

hat_800

There came longer break for photoshoots with model, because of the timetables and cold. Next model post can be waited in March. So I decided to write a post only about the hat of one outfit from Natja K. Fall/Winter 2014/2015 collection.

Making a collection, where the starting point is materials what I already have, the materials led the outfits to consist more of characters than one or two baseline ideas. There’s still conjunctive materials and elements in the collection and I’m going to tell more about that, when all the outfits have been presented. Another thing for doing this collection was a need to make fashion editorial photoshoots, when I eventually got digital system camera. If this collection would be presented in fashion show, the conjunctive elements and entirety of the collection would be seen better. Now these very varying photoshoots and characters make it look more divided. This hat is part of the outfit of advanced and a bit “rebellious boyish” traveling woman character around 1930’s, where the hat is the most finest and ladylike piece of the outfit.

Making the Hat, Steps 1.-4.

I used for the base of the hat one about 20 years old Christmas gift box. I cut the box about 2 centimetres lower with carpet knife and sheathed it with leather remnants, lining remnant and satin ribbon with polka dots. I used textile glue. Photos 1.-3. have taken with my mobile’s camera and quality of photos are worse than in the rest of the photos, that have been taken with digital system camera. I posted these photos to my Instagram. Follow me there, if you’re interested.

hat_step_1-4

Making the Hat, Steps 5.-6.

I sewed a rose by hands from leather remnants (Ahlskog Leather) and added violet lace from Eurokangas. Peacock feathers have been ordered from SP-Elektroniikka online shop and I’m not actually sure how ethical these peacock feathers are, but I got them in my stock, so better in use in this case than in a trash bin as a waste. I added a metallic hairband base bought from Sinelli around the hat as decoration. Lilac net is some package material, what I saved years ago, because it looked so much hat net.

hat_steps_5-8