Piirsimme ensimmäisellä viikolla kuvan ensimmäisestä tietokoneestamme.
Kuvani on toteutettu lyijykynällä jonka päälle erilaisilla tusseilla.
Puhuimme siitä, miten tietokoneet yleisesti toimivat.
Saimme kotitehtäväksi piirtää omakuvan tietokoneella. Toteutin sen Photoshopilla.
Opimme myös yhdistämään tietokoneemme terminaalin kautta Aallon keskusserverille ja lisäämään sinne oman nettisivumme.
Innostuin tästä ja nopean HTML googlettamisen jälkeen päätyi ensimmäisen tietokoneeni kuva ikiomalle verkkosivulleni.
Toinen kotitehtävämme oli piirtää oman internettimme kartta. Kartta on toteutettu lyijykynällä, jonka päälle tussilla.
Toisen viikon tunneilla aloimmekin jo tarkemmin käymään läpi HTML kielen rakennetta. lisäsimme HTML:ään vielä CSS tyylittelyn ja yhtäkkiä tajusinkin että olen periaatteessa oppinut kuinka tehdä yksinkertainen verkkosivu. Olen innoissani jatkosta.
Opimme flexbox tyylittelystä CSS:ssä ja kuinka sen avulla voimme rakentaa älykkäästi skaalautuvan nettisivun. Opimme myös kuinka voimme pakottaa nettisivun skaalautumaan eri tavalla jos sivua katsellaan mobiililaitteella tai jos se alittaa minimileveyden pikseleissä.
Seuraavaksi aloittelimmekin kurssin päätehtävää. Jakauduimme kolmen hengen ryhmiin ja aloimme testailemaan, kuinka CSS animointi toimii. Teimme yhtenä päivänä kokeiluja, jonka jälkeen aloimme työstämään päätehtävää, eli näytönsäästäjän tekemistä HTML:llä ja CSS:llä animoiden
Päätimme ryhmänä kokeilla animoida liikettä. Onnistuimme tässä aika hyvin ja aluksi saimme muutaman laatikon liikkumaan näytöllä. Päätin hieman parannella animaatiota korvaamalla laatikoit nopeasti verkosta löytyneillä gif-animaatioilla.
Lähteet: https://imgur.com/t/fireball/10za2uM ja https://tenor.com/view/elmo-pixel-art-fire-burning-gif-17405882
Tein myös huvin vuoksi vapaa-ajalla lyhyen gif-animaation, jonka laitoin omalle aallon verkkosivulleni. Testailin tällä hiukan ja sain tehtyä painikkeet joilla saa ladattua sivusta joko tumma- tai vaaleateemaisen version.
Halusin aluksi tehdä näytönsäästäjästäni jonkinlaisen loputtoman pudotuksen, mutta tajusin että elementtejä voi CSS:ssä animoida myös kolmannessa ulottuvuudessa ja siksi päätin tehdä avaruusaluksen, joka menee loputtomasti eteenpäin avaruudessa.
Piirsin nopeasti kynällä paperille elementtejä animaatiopon ja väritin ne photoshopissa. Tämän jälkeen aloin tutkimaan miten saan tähdet liikkumaan animaatiossani. Pätin tehdä niistä pieniä neliöitä, jotka liikkuvat z-akselilla kohti katsojaa. lisäksi lisäsin animaation satelliitteja joita alus välillä ohittaa. pikkuhiljaa alkaa alus lähestyä kaukaista galaxia, joka kasvaa suuremmaksi ja lopulta alus ohittaa sen.
Päätin, että tulee olemaan liian vaikeaa animoida monta tähteä, jos jokainen niistä on yksittäinen objekti. Nopean googlailun perusteella päätin tehdä tähdistä tektuurin, joka toistuu koko taustan kokoisessa elementissä, joka sitten liikkuu katsojaa kohti. Tekemällä monta eri aikaan liikkuvaa elementtiä saatiin vaikutelma syvyydestä ja tähdistä kolmessa ulottuvuudessa.
Seuraavaksi luvassa oli hienosäätö. Aloitin tekemällä paremmat grafiikat animaation elementeille. Suunnitelmissa oli myös lisätä muutama muu asia, joita alus voi matkallaan ohittaa, sekä päivittää galaxin ulkonäkö, sekä miettiä voisiko tähtien tekstuurin tehdä paremmin.
Tein grafiikan vielä toiseen alukseen sekä päivitin galaxin kuvan.
Halusin lisätä animaatioon jonkinlaisen aloitusnäytön. Tein aloitusnäytön, jossa näkyy hieman näytölle ilmestyvää tekstiä sekä logo. Lisäsin sivun alakulmaan linkit toisten näytönsäästäjäsivustoille pyrin saamaan nämä kaikki näyttämään kuin pelin käyttöliittymältä. Innostuin tekstistä ja lisäsin kuvaavan nimen aluksen ohittamiin objekteihin
Kirsikaksi kakun päälle halusin oppia pikkiriikkisen javascriptiä ja tehdä yksinkertaisen laskurin, joka laskee kuvitteellisia valovuosia, joita alus on jo kulkenut. Tämä osoittautui aloittelijalle kolmen tunnin hommaksi, jossa mentiin edestakaisin monta kertaa ja pähkäiltiin pitkään pieniä kirjoitussvirheitä, mutta olin tyytyväinen lopputulokseen ja se kruunaa näytönsäästäjän. Tein näytönsäästäjälle satelliitin grafiikasta logon jonka lisäsin HTML koodiin niin että selain näyttää pienenä sivun logon.
Tässä linkki valmiiseen näytönsäästäjäanimaatioon:
https://users.aalto.fi/~koponet5/spacejam/
Myöhemmin kurssilla keskustelimme, kuinka suunnittelemme toimivan verkkosivun ja sen eri kerrokset. Teimme myös ryhmätyönä esitelmän erilaisista ajankohtaisista teknologiaan tai viestintään liittyvistä artikkeleista. Tein esitelmän Justuksen ja Auroran kanssa. Aiheenamme oli artikkeli venäjän infromaatiovaikuttamisesta Ruptly nimisen uutisyhtiön kautta.
Pidin kurssista hyvin paljon. Innostuin verkkosivujen koodaamisesta ja tuntuu että haluan tehdä sitä jatkossa ja ehkä jopa tehdä jotain koodiin liittyvää työtäkin. Haluaisin tehdä oman blogin jossain vaiheessa kun ehtii. Kurssin viimeisillä tunneilla koodasin myös pienen Javascript harjoituksen itsekseni ja tein keskeneräisen ja yksinkertaisen kasvinkasvatuspelin.
https://users.aalto.fi/~koponet5/chillgrow/