DOM-C1055 - Väline: Koodi, Luento-opetus, 14.9.2021-21.10.2021

Näytönsäästäjät ovat nyt jo "antiikkisia" ohjelmia jotka alunperin suunniteltiin estämään kuvien "palamisen" kiinni kuvaputkinäyttöihin. 

Tätä ongelmaa ei enää nykyaikaisissa näytöissä ole, mutta näytönsäästäjät ovat jääneet elämään reliikkeinä varhaisista tietokoneista. Näytönsäästäjät olivat hetki koneelle levähtää ja tietyllä tapaa "nähdä unia" ilman käyttäjän kontrollia. 

Miten voisimme "käyttää" näytönsäästäjää nykyisin? Miten näytönsäästäjä voisi haastaa sen miten ja mitä ajattelemme teknologiasta, netistä ja laitteiden käytöstä? 

Jakaudu 3-4:n hengen ryhmiin. Käyttäen pelkästään HTML ja CSS, tee nettisivu joka toimii näytönsäästäjänä ja reflektoi odottamisen, joutilaisuuden, taukojen, tai kontrollin puutoksen roolia digitaalisen median kontekstissa. Jokainen ryhmän jäsen tekee (vähintään) yhden.

Vaatimukset:

• Yksi sivu (joka tulisi olla koko ruudun kokoinen)

• Liike / muutos ajan myötä

• Ei vaadi käyttäjän interaktiota vaan aloittaa ja liikkuu itsestään

Vinkkejä:

• Älä tee liian monimutkaista. Älä yritä tehdä jotain jo olemassa olevaa näytönsäästäjää tai edes saman tyyppistä, vaan sen sijaan lähtökohtana tee erilaisia kokeiluita html:n ja css:n kanssa ja katso miten saisit ne liikkumaan.

• Tällä sivulla on lueteltu kaikki CSS propertyt joita voi animoida, voit käyttää näitä hyväksesi:
  https://www.quackit.com/css/css3/animations/animatable_properties/

• Klikkaa oranssia Animation nappulaa nähdäksesi miten se toimii.

• Älä copy paste koodia suoraan tältä sivulta vaan sovella.

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

• Täältä voi tsekata mitä ja miten animaatioita voi muokkaa

Esimerkki:

https://aidanquinlan.net/Sunday/archive/2.24.2019/

-----------

Keskiviikkon tehtävä:

Valitkaa ryhmässä joku CSS property jonka animoimista lähdette yhdessä tutkimaan. Voitte valita sen tältä listalta: https://www.quackit.com/css/css3/animations/animatable_properties/ Valitkaa sellainen joka vaikuttaa mielenkiintoiselta mutta voitte myös valita summamutikassa. Tehkää jokainen erikseen simppeli html sivu jossa kokeilette miten valitsemaanne CSS propertyä voi animoida eri tavoin.