Osion kuvaus

  • Tehtävät

    • Tehtävä icon
      1. Piirrostehtävä: ensimmäinen tietokoneenne
      Opiskelijoiden täytyy
      Palauta

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

    • Tehtävä icon
      2. Fiilikset, Aalto-tunnus + omakuva tietokoneella Tehtävä
      Opiskelijoiden täytyy
      Palauta

      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/ 🎨

    • Tehtävä icon
      3. Piirrostehtävä: oman internetinne kartta
      Opiskelijoiden täytyy
      Palauta

      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.

    • Tehtävä icon
      Oppimisportfolion linkki Tehtävä
      Opiskelijoiden täytyy
      Palauta

      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.


    • Tehtävä icon
      4.2 HTML-tehtävä
      Opiskelijoiden täytyy
      Palauta

      Tehtävä ja materiaali löytyy täältä:

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

        • 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/

    • Tehtävä icon
      4.2.1 Laurel Schwulstin essee Tehtävä
      Opiskelijoiden täytyy
      Merkitse tehdyksi

      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/

    • Tehtävä icon
      4.3 Tutoriaalit: HTML:n perusteet Tehtävä
      Opiskelijoiden täytyy
      Palauta

      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/

    • Tehtävä icon
      4.3 CSS kertaus Tehtävä
      Opiskelijoiden täytyy
      Palauta

      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.

    • Tehtävä icon
      4.3.1 Tehtävä

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

      https://flukeout.github.io/

    • Tehtävä icon
      4.4 Kotitehtävä: Flexboxin harjoittelua
      Opiskelijoiden täytyy
      Palauta

      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.

    • Tehtävä icon
      Kurssin päätehtävä: Näytönsäästäjien museo

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


      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. 




    • Etherpad Lite icon
      5. Ryhmätyö-esitelmien aiheet (DL ensi KE) Etherpad Lite
      Opiskelijoiden täytyy
      Merkitse tehdyksi

      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!

    • Tehtävä icon
      5b. Presentaatioiden palautus Tehtävä
      Opiskelijoiden täytyy
      Palauta

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

    • Tehtävä icon
      6. Tiivistelmä: tekstistä "The programmed designer" Tehtävä
      Opiskelijoiden täytyy
      Palauta
      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ä.
◄ Previous section
Materiaalit
Next section ►
Aaltolaisille