JAVASCRIPT

Alan kerätä tälle sivulle kirjoittamiani oppaita JavaScript-kielen käyttämisessä nettisivujen tekemisessä. Oppaiden ohessa esittelen omia työskentelytapojani, mutta perimmäinen tarkoitukseni on aina ohjata koodareita itsenäiseen työskentelyyn ja etenkin itsenäiseen ajatteluun. Jokainen ohjelmoija on oman koodaustapansa paras asiantuntija. Minä toivon vain osaltani voivani tarjota lisää työkaluja työkalupakkiin.

JavaScript-demoja:

JavaScript: Nature puzzles
JavaScript: Luontopalapelit
JavaScript: Lintupalapelit
Tämä demo näyttää, kuinka HTML5 canvas-elementin ja etenkin KineticJS-kirjaston avulla voi tehdä itselleen helposti monistettavan palapelipohjan. Tein lisäksi php:llä peliin kuvakohtaiset top 10 -listat. Itse kehitin tältä demopohjalta edelleen palapeliosion pohjoissaamenkieliseen kasvioon. Tässä demossa on vielä muutamia bugeja, eikä sen käytettävyyttä ole vielä hiottu, mutta jo tällaisenaan se demoaa hyvin KineticJS-kirjaston erinomaisuutta palapelien tekemiseksi.

JavaScript: Luontopäiväkirja (tableteille optimoitu)
Tämä demo näyttää, että melko vähäisellä koodauksella voi tehdä itselleen luontopäiväkirjan, jolle pystyy kirjaamaan merkintöjä sekä kotoa pöytäkoneelle, että suoraan luonnosta esim. iPhonella. iPhonella (tai vastaavalla älypuhelimella) voi lähettää myös kuvan havainnon kirjauksen yhteydessä. Lisäksi ylläpitäjän nettisovellus esitäyttää päivämäärän, kellonajan ja laitteen antamat paikkakoordinaatit. Paikkatiedon voi määrätä julkiseksi (näkyy luontovihossa) tai vain omaan käyttöön (esim. harvinaisten kasvilajien havainnot). Lisäksi luontovihkoon kuuluu mahdollisuus kirjata vapaamuotoisesti vain yksityiskäyttöön tulevia havaintoja ja huomautuksia.

Sovellus selviytyi testeissä kuvien lähettämisestä Erkylän metsistä. Kuitenkin iPhonellakin otetut kuvat ovat sen verran suuria, että niiden lähettämiseen kuluu helposti minuutin verran melko hyvällä kentälläkin. Järkevin tapa käyttää sovellusta onkin lähettää paikkatiedot ja havaintotiedot paikanpäällä, ottaa järjestelmäkameralla kunnon kuva paikan päällä ja lisätä kuva jälkikäteen kotona.
Käytetyt tekniikat, joihin kannattaa tutustua: JQuery, TweenMax, Shadowbox ja alertify.js.

JavaScript: Yksinkertaiset kuvagalleriat (tableteille optimoitu käyttöliittymä)
Tämä demo näyttää, että melko vähäisellä koodauksella voi tehdä yksinkertaisia html-kuvagallerioita. Demo tulostaa automaattisesti palvelimen alikansioihin laitetut kansiot ja kansioiden kuvat omiksi kuvagalleriasivuksi.

Lisäsin jälkikäteen vielä lähinnä läppäri/pöytäkonekäyttöön tarkoitetun pyyhkäisyeleiden kanssa identtisen nuolinäppäimillä toimivan navigoinnin. Lisäksi siirryin käyttämään uudempaa TouchSwipe-kirjastoa joka ei estä kahdella sormella tapahtuvaa zoomausta ja sivun liikutusta. Lisäksi turhan selaamisen estämiseksi swipe-eleelle on asetettu tässä 75px raja-arvo.

Käytetyt tekniikat, joihin kannattaa tutustua: JQuery, TweenMax ja TouchSwipe

JavaScript: Yksinkertaiset kuvagalleriat
Tämä demo näyttää, että melko vähäisellä koodauksella voi tehdä yksinkertaisia html-kuvagallerioita. Demo tulostaa automaattisesti palvelimen alikansioihin laitetut kansiot ja kansioiden kuvat omiksi kuvagalleriasivuksi.
Käytetyt tekniikat, joihin kannattaa tutustua: JQuery, TweenLite ja Shadowbox.

JavaScript: Valikot
Kuvagallerian valikon yleistys useamman valikon tapaukseen.

JavaScript oppaita:

JavaScript: Viisi yksinkertaista JavaScript-toimintoa nettisivuille

Lokakuu - 2017
MaTiKeTo PeLaSu
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
Tämä sivu on päivitetty
28. lokakuuta 2013.