DOM-C1055 - Väline: Koodi, Luento-opetus, 14.9.2021-21.10.2021
This course space end date is set to 21.10.2021 Search Courses: DOM-C1055
Översikt
-
-
Students mustLämna in
Piirtäkää kynällä paperille ensimmäinen tietokone mitä muistatte käyttäneenne. Merkitkää vuosiluku ylös mikäli mahdollista.
Piirtäkää ja kirjoittakaa oheen, mitä muistatte tehneenne tai käyttäneenne ko. koneella ja kenen kanssa. Mitä muita muistoja herää?
-
Students mustLämna in
Hei! Kurssin aluksi kirjoittakaa tähän tehtävään:
- omat odotuksenne tätä kurssia koskien
- Aalto-tunnuksenne, sekä
- liittäkää oheen tietokoneella piirretty omakuva.
Omakuva olisi mielellään jotenkin esittävä, se auttaa minua muistamaan kaikkien nimet 🙂 - kiitos!
Windows-käyttäjille on Paintbrush, Mac-käyttäjille on... myös Paintbrush: https://sourceforge.net/projects/paintbrush/ 🎨
-
Students mustLämna in
Piirtäkää A4- tai A3-paperille vapaalla tekniikalla, mutta mieluiten käsin, kartta joka kuvastaa omaa internetin käyttönne maisemaa. Voitte piirtää siihen mitä tahansa: jokia, vuoria, meriä, kaupunkeja, rakennuksia - mitä vain minkä koette kuvastavan vierailemianne internetin sivustoja, palveluita ja alustoja. Nimetkää ja merkitkää eri alueet selkeästi.
-
Students mustLämna in
Julkaiskaa Adobe Portfolio -alustalle tekemänne kurssiportfolio viimeistään ensimmäisen viikon päätteeksi ja lisätkää linkki siihen tähän tehtävään.
Tallenna portfoliosi oppimispäiväkirjaosuuteen ainakin kerran viikossa työvaiheitasi kuvin ja lyhyin tekstein (esimerkiksi screen shotit, valokuvat prosessista, luonnokset, valmiit työt). Lisää kaikkiin kuviin kuvateksti. Kuvaile lyhyesti kurssiviikon tapahtumat: mitä opit ja oivalsit, missä onnistuit ja mikä meni pieleen. -
Students mustLämna in
Tehtävä ja materiaali löytyy täältä:
https://drive.google.com/drive/folders/1xteB-FZLkkJ6PRUqTHW9zCEVtMQ91Ija?usp=sharing
Lisää tarvittavat HTML tagit tähän tekstiin:
https://drive.google.com/drive/folders/1xteB-FZLkkJ6PRUqTHW9zCEVtMQ91Ija?usp=sharing
voit ottaa vähän mallia alkuperäisestä lähteestä:
http://www.eyemagazine.com/feature/article/the-programmed-designerLisää seuraavat tagit:
doctype, html, head, body
lisää head tagin sisälle tarvittavat meta tagit ja title tag
copy-pastea teksti <article> tagin sisälle. Lisää artikkeliin sopivat tagit:
p, h1, h2, h3, em, strong, abbr, time, blockquote, q, footer
lisää kansiossa oleva kuva oikeaan kohtaan käyttäen figure ja img tageja. Lisää img tagiin alt attribuutti.
Käytä italicseista (em tagi) päätettäessä esim. tätä lähdettä:
https://grammar.yourdictionary.com/punctuation/when/when-to-italicize.html
Jos haluat italicsin teoksen nimeen, käytä cite tagia
Lisää linkkejä a tagilla sellaisiin kohtiin joihin se sopii
Voit käyttää esim, tätä lähdettä apuna päätettäessä mihin eri tagit sopii:
-
Students mustMarkera som slutförd
-
Students mustLämna in
Katsokaa läpi tämä tunnin mittainen videokurssi HTML Crash Course For Absolute Beginners (Traversy Media 2017):
Ei tarvitse tehdä mukana, katsokaa vain video! Kirjoittakaa tähän tehtävänantoon ennen ylös sellaiset asiat jotka jäivät joko vähän hämäräksi tai joista haluaisitte syvällisemmän selityksen. Tiistaina kerrataan videon sisältö ja mennään siitä eteenpäin CSS:n maailmaan ja kurssin päätehtävänantoon.
Bonussektori: Jos haluatte mieluummin tehdä tekstin mukaan, Interneting is Hard on hyvä resurssi ja tähän tarpeeseen kolme ensimmäistä lukua voisivat riittää: https://www.internetingishard.com/
-
Students mustLämna in
Katso tämä video:
Seuraa perässä mutta ei tarvitse tehdä itse. Kirjoita ylös asiat jotka jäi epäselviksi tai vaatii tarkennusta. -
Tehkää kaikki levelit CSS dineria tai sen verran kun kerkeätte tekemään huomiseksi:
-
Students mustLämna in
1. Katso CSS tutoriaali: jos et ehtinyt vielä katsomaan sitä. Ei tarvi seurata perässä, pelkkä katsominen riittää. Voit tehdä kuitenkin jotain muistiinpanoja sellaisista asioista mitä arvelet tarvitsevasi kurssityön toteuttamiseen.
2. Katso Flexbox tutoriaali: . Katsominen riittää.
3. Tee kaikki 24 leveliä flexbox froggya: https://flexboxfroggy.com/, se joka saa levelin 24 ratkaistua saa papukaijamerkin!
Kirjatkaa tähän tehtävään asiat jotka tuntuivat hyödyllisiltä sekä asiat jotka jäivät epäselviksi tai hämäriksi. -
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.
-
Students mustMarkera som slutförd
Tehkää pienryhmänä n. 5 minuutin mittainen presentaatio yhdestä oheisesta listasta valitsemastanne aiheesta.
Perehtykää linkin sisältöön sekä syvällisesti että kriittisesti ainakin seuraavia aiheita esitellen:
- millainen sivusto linkin takaa löytyy
- kuka tai ketkä ovat sivulla olevan tekstin takana
- mitä aihetta siinä käsitellään (ja miksi)
- miten aihe on esitetty (ja miksi)
- mitä ajatuksia tai näkökulmia sivulla esitetään
- mitä linkkejä sivulta johtaa ja mihin
- mitä merkitystä aiheella on teidän omalle elämällenne
Esitelmä tehdään PDF:nä 16:9 -kuvasuhteeseen slideiksi, esim. Powerpointilla, Google Slidesilla tai Keynotella.
HUOM! Lista on sisäänkirjautumisen jälkeen editoitavissa. Lisätkää oman ryhmänne numero ja etunimet valitsemanne aiheen eteen. Vain yksi ryhmä per aihe!
-
Students mustLämna in
Palauttakaa presentaatiot tähän tehtävään, kiitos.
-
Students mustLämna inLukekaa oheinen essee: The programmed designer. John-Patrick Hartnertt. Eye Magazine, Summer 2017 - osoitteessa:
http://www.eyemagazine.com/feature/article/the-programmed-designer
Kirjoittakaa esseestä lyhyt tiivistelmä jossa listaatte sen pääpointit listana viivoilla. Pohtikaa ainakin, miten kirjoittaja näkee graafisen suunnittelijan suhteen ohjelmisto- ja laitevalmistajiin, mitä perusteluja hän esittää asialleen ja mitä ratkaisuehdotuksia hän näkee mahdollisina.
Palauttakaa tiivistelmänne tähän tehtävänantoon tekstimuodossa. Keskustelemme artikkelista viimeisenä päivänä.
-
