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

Topic outline

• Assignments
  • Select activity 1. Piirrostehtävä: ensimmäinen tietokoneenne

    

    1. Piirrostehtävä: ensimmäinen tietokoneenne Assignment

    Completion

    Students must

    

    Make a submission

    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ää?
    

  • Select activity 2. Fiilikset, Aalto-tunnus + omakuva tietokoneella

    

    2. Fiilikset, Aalto-tunnus + omakuva tietokoneella Assignment

    Completion

    Students must

    

    Make a submission

    Hei! Kurssin aluksi kirjoittakaa tähän tehtävään:

    1. omat odotuksenne tätä kurssia koskien
    2. Aalto-tunnuksenne, sekä
    3. 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/ 🎨

  • Select activity 3. Piirrostehtävä: oman internetinne kartta

    

    3. Piirrostehtävä: oman internetinne kartta Assignment

    Completion

    Students must

    

    Make a submission

    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.

  • Select activity Oppimisportfolion linkki

    

    Oppimisportfolion linkki Assignment

    Completion

    Students must

    

    Make a submission

    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.
    

    
    

  • Select activity 4.2 HTML-tehtävä

    

    4.2 HTML-tehtävä Assignment

    Completion

    Students must

    

    Make a submission

    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-designer

    • Lisää 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:

    http://mrmrs.io/html/ ja https://htmlcheatsheet.com/
    

  • Select activity 4.2.1 Laurel Schwulstin essee

    

    4.2.1 Laurel Schwulstin essee Assignment

    Completion

    Students must

    

    Mark as done

    Lue teksti keskiviikoksi (22.9.):

    https://thecreativeindependent.com/essays/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/
    

  • Select activity 4.3 Tutoriaalit: HTML:n perusteet

    

    4.3 Tutoriaalit: HTML:n perusteet Assignment

    Completion

    Students must

    

    Make a submission

    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/

  • Select activity 4.3 CSS kertaus

    

    4.3 CSS kertaus Assignment

    Completion

    Students must

    

    Make a submission

    Katso tämä video:
    

    1. CSS Crash course for beginners
       

    Seuraa perässä mutta ei tarvitse tehdä itse. Kirjoita ylös asiat jotka jäi epäselviksi tai vaatii tarkennusta.
    

  • Select activity 4.3.1

    

    4.3.1 Assignment

    Tehkää kaikki levelit CSS dineria tai sen verran kun kerkeätte tekemään huomiseksi:

    https://flukeout.github.io/
    

  • Select activity 4.4 Kotitehtävä: Flexboxin harjoittelua

    

    4.4 Kotitehtävä: Flexboxin harjoittelua Assignment

    Completion

    Students must

    

    Make a submission

    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.

  • Select activity Kurssin päätehtävä: Näytönsäästäjien museo

    

    Kurssin päätehtävä: Näytönsäästäjien museo Assignment

    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. 

    
    

    
    

    
    

  • Select activity 5. Ryhmätyö-esitelmien aiheet (DL ensi KE)

    

    5. Ryhmätyö-esitelmien aiheet (DL ensi KE) Etherpad Lite

    Completion

    Students must

    

    Mark as done

    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!

  • Select activity 5b. Presentaatioiden palautus

    

    5b. Presentaatioiden palautus Assignment

    Completion

    Students must

    

    Make a submission

    Palauttakaa presentaatiot tähän tehtävään, kiitos.

  • Select activity 6. Tiivistelmä: tekstistä "The programmed designer"

    

    6. Tiivistelmä: tekstistä "The programmed designer" Assignment

    Completion

    Students must

    

    Make a submission

    Lukekaa 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ä.