Info
Koe: Koodi on kuuden viikon kurssi jonka aikana tutustumme kokeelliseen koodaamiseen ja käsintehtyihin nettisivuihin luovana ja iloisena mediana. Kurssi sisältää mm. HTML- ja CSS-tekniikoiden opettelua projekteja tekemällä, sekä keskusteluja nykyisestä digikulttuurista erityisesti visuaalisen viestinnän näkökulmasta.
- Koulu: Aalto-yliopiston visuaalisen viestinnän suunnitteluohjelma
- Kurssi: Koe I, moduuli Koodi
- Opettaja: Heikki Lotvonen
- Päivämäärät: 3.9.–10.10.2025
- Ajankohta: ke, to, pe; 9:15–15:00
Ajanhallinta
- Luokassa: 90 tuntia
- Lukemista: 2 tuntia per teksti, eli yhteensä 10 tuntia
- Itsenäistä tekemistä: 53 tuntia
- Omaksumista, valmistautumista: 90 tuntia
Oppimistavoitteet
HTML ja CSS tekniikoiden oppimisen seuraamista varten olen luonut HTML/CSS skillipuun. Tämän kurssin puitteissa olisi tarkoitus oppia suurin osa yleisistä, HTML ja CSS osioista. Jatko-opiskelu osuudet ei kuulu tämän kurssin puitteisiin, mutta niitä voi käyttää itsenäisen opiskelun tukena kurssin päätyttyä.
Arviointikriteerit
Kaikki kriteerit täyttävä saa vitosen, neljä kriteeriä täyttävä saa nelosen, jne.
- Tehtävissäsi näkyy riskinottoa, rohkeutta, kokeellisuutta ja moninaisuutta
- Tehtävissäsi näkyy syventymistä ja viimeistelyä
- Pohdit omaa oppimistasi ja kokemustasi oppimispäiväkirjassa
- Palautat harjoitukset, tehtävät ja oppimispäiväkirjat ajallaan
- Olet läsnä, osallistut keskusteluihin ja palautteisiin ja autat muita
AI:n käyttö
Tämän kurssin puitteissa generoivaa AI:ta ei saa käyttää minkään sisällön (teksti, kuva, musiikki, jne.) luomiseen. AI:ta ei saa myöskään käyttää generoimaan koodia, muuta kuin oppimistarkoituksessa (ei suoraa copy-pasteamista). AI:ta voi käyttää selittämään konsepteja tai syntaksia, etsimään ja korjaamaan virheitä koodista ja ehdottamaan erilaisia lähestymistapoja.
Aikataulu
Viikko 1 (3.—5.9.)
| ☀️ | Ke 3.9. A034/A131a |
To 4.9. M134 |
Pe 5.9. A034/A131a |
|---|---|---|---|
| 9:15–12 | Yhteisaloitus | Demo: Inspect-työkalu & HTML perusteet | Lukupiiri |
| 13–15 | Johdanto moduuliin | Käsinkoodauspiiri | Tehtävä 0 & 1 |
Viikko 2 (10.—12.9.)
| ☀️ | Ke 10.9. A034/A131a |
To 11.9. M134 |
Pe 12.9. A034/A131a |
|---|---|---|---|
| 9:15–12 | Demo: CSS perusteet I | Koodipaja | Lukupiiri |
| 13–15 | Demo: CSS perusteet II | Koodipaja | Koodipaja |
Viikko 3 (17.—19.9.)
| ☀️ | Ke 17.9. A034/A131a |
To 18.9. M134 |
Pe 19.9. A034/A131a |
|---|---|---|---|
| 9:15–12 | Demo: CSS Flexbox | Koodipaja | Lukupiiri |
| 13–15 | Demo: CSS värit ja taustat | Koodipaja | Koodipaja |
Viikko 4 (24.—26.9.)
| ☀️ | Ke 24.9. A034/A131a |
To 25.9. M134 |
Pe 26.9. A034/A131a |
|---|---|---|---|
| 9:15–12 | Demo: CSS Grid | Koodipaja | Lukupiiri |
| 13–15 | Demo: CSS typografia | Koodipaja | Koodipaja |
Viikko 5 (1.—3.10.)
| ☀️ | Ke 1.10. A034/A131a |
To 2.10. M134 |
Pe 3.10. A034/A131a |
|---|---|---|---|
| 9:15–12 | Demo: CSS Responsiivisuus | Koodipaja | Lukupiiri |
| 13–15 | Demo: CSS mukautuva leiska | Koodipaja | Koodipaja |
Viikko 6 (8.—10.10.)
| ☀️ | Ke 8.10. A034/A131a |
To 9.10. M134 |
Pe 10.10. A034/A131a |
|---|---|---|---|
| 9:15–12 | Lukupiiri | Julisteiden leikkaus | Loppukritiikki |
| 13–15 | Koodipaja | Näyttelyn pystytys | Näyttely tour |
Resursseja
Tehtävät
Lukupiiri
Joka viikolle on luettavaa. Teksteistä keskustellaan luokassa perjantaisin (paitsi viimeisellä viikolla maanantaina).
- Lue perjantaihin 5.9. mennessä yksi näistä: The internet used to be* fun ja My website is a shifting house next to a river of knowledge. What could yours be?
- Lue perjantaihin 12.9. mennessä: The poetry of tools ja Links of the decade
- Lue perjantaihin 19.9. mennessä: Sivut 2–40 (PDF:n sivut 28–65), eli kappaleet Infomania, Logic and Intuition ja Hypertext Heaven kirjasta The Metaphysics of Virtual Reality
- Lue perjantaihin 26.9. mennessä: A friend is writing
- Lue perjantaihin 3.10. mennessä: Permacomputing Aesthetics: Potential and Limits of Constraints in Computational Art, Design and Culture
- Lue maanantaihin 8.10. mennessä: Why I Have a Website and You Should Too
Kun luet tekstiä, kirjoita oppimispäiväkirjaasi yksi yllättävä tai kiinnostava tekstiin liittyvä pointti tai tieto, ja yksi kysymys, keskustellaan niistä tunnilla. Tunnilla saatetaan myös keskustella seuraavista asioista:
- Mikä on tekstin pääväite?
- Miksi Heikki valitsi tekstin lukemiseksi?
- Mitkä käsitteet tai termit ovat uusia tai epäselviä?
- Mikä yllätti tai haastoi ajatteluasi?
- Mikä on tekstin vahvin argumentti? Mikä heikoin?
- Mitä tekstistä puuttuu? Mitä kirjoittaja ei käsittele tai ota huomioon?
- Mitä kyseenalaistettavia oletuksia tekstissä on?
- Kuka hyötyy tekstin näkökulmasta? Ketä se saattaa vahingoittaa?
- Kuka on tekstit kirjoittanut ja mille hypotetttiselle yleisölle? Miksi?
- Mitä tekstin kanssa eri mieltä oleva sanoisi teksistä?
- Spekuloi: Mitä jos argumentti vietäisiin loogiseen äärimmäisyyteensä? Miltä maailma näyttäytyisi?
- Miten teksti muuttaa ymmärrystäsi kurssin teemasta?
- Miten teksti liittyy alaan tai alalla / kurssilla käytyihin keskusteluihin?
- Koskettiko teksti henkilökohtaisesti? Löytyykö omasta kokemuksestasi tekstiin liittyvä esimerkki?
- Miten tämä vertautuu aiempaan lukemiseen tai omaan aikaisempaan käsitykseesi?
- Mikä on tekstin ja tekstistä seuranneen keskustelun tärkein anti?
- Mitä konkreettisia tästä voi ammentaa? Onko tekstissä potentiaalia muuttaa omia toimintatapojasi tai ajatteluasi?
- Mitä muuta...?
0. Oma kotisivu
Tee tunnukset ja nimimerkki Neocitiessiin. Muokkaa kurssin aikana kotisivusi (index.html) sellaiseksi kun haluat, eli sisällön ja muodon kanssa vapaat kädet. Ainoa vaatimus: kotisivulta pitää löytyä (helposti) linkit kurssilla toteutettuihin sivuihin, eli opintopäiväkirjaan (linkki ekalle sivulle riittää), sekä kurssin päätehtäviin.
1. HTML-päiväkirja
Pidä viikottaista HTML-(oppimis)päiväkirjaa kurssin ajan.
Oppimispäiväkirjaa ei tehdä Adoben alustalle, vaan luot päiväkirjan HTML-tiedostoina. Laita kuitenkin linkki Adoben alustalle ensimmäisen viikon päiväkirjaan.
Päiväkirjaa kirjoittaessa ensin keskity sisällön kirjoittamiseen ja sen merkitsemiseen HTML:llä, ja vasta sitten (jos jää aikaa ja energiaa) voit tyylitellä sisällön jotenkin CSS:llä.
Oppimispäiväkirjaan ei normaalista poiketen tarvitse "pohtia omaa oppimista ja kokemusta" tai kuvailla mitä tunnilla opetettiin. Sen sijaan lähesty sen kirjoittamista ajattelun apuvälineenä. Voit tutkia ja kirjoittaa kiinnostavista kysymyksistä koskien nettiä, nettisivujen tekoa ja nettikulttuuria. Voit kokeilla erilaisia HTML- ja CSS tekniikoita. Voit reflektoida kurssin aiheita omasta näkökulmastasi. Voit etsiä ja jakaa kiinnostavaa tietoa. Voit haasta yleisiä käytäntöjä tai dogmeja. Voit syventyä johonkin nettiin liittyvän teknologian historiaan, käyttömahdollisuuksiin tai siihen miten ne vaikuttavat netin käyttöön ja kokemukseen.
Palautus joka maanantai klo 15. Palautus tapahtuu lataamalla sivu Neocitiessiin
Huom! Oppimispäiväkirja vaikuttaa arvosteluun: kurssin loputtua oppimispäiväkirjasivuja pitää löytyä 5-6 kappaletta.
- Tee uusi kansio nimeltä "oppimispaivakirja"
-
Luo joka viikko uusi HTML-tiedosto oppimispäiväkirjallesi "oppimispaivakirja" kansioon. Nimeä tiedostot muodossa
viikkoX.html, missä X on viikon numero (esim. viikko1.html, viikko2.html, jne.). - Ensimmäiseen oppimispäiväkirjaan esittele itseäsi sekä tavoitteitasi ja odotuksiasi kurssin suhteen. Mitä haluaisit oppia? Mikä koodauksessa ja nettisivujen teossa kiinnostaa sinua eniten? Mitä haluaisit ymmärtää syvemmin?
- Lisää jokaiseen tiedostoon linkki edelliseen viikkoon (paitsi ensimmäisessä tiedostossa) ja linkki seuraavaan viikkoon (paitsi viimeisessä tiedostossa).
- Lisää jokaiseen tiedostoon vähintään yksi koodisnippet.
- Käytä asianmukaisia HTML-tageja sivun sisällölle.
- Varmista, että HTML-koodisi on validia W3C:n Markup Validation Servicellä.
- Kuvat tulee olla nettioptimoituja. Jokaisen sivun täytyy olla alle 1MB ja saada vähintään A-luokitus Website Carbon Calculatorilla.
HTML-tiedoston mallipohjan voit ottaa tästä esimerkistä.
2. Netin materiaalisuus
Tee nettisivu/teos, joka on luotu "paikkasidonnaisena taiteena" netin materiaalisuus huomioonottaen. Älä lähestyt sen tekoa ajatuksella "miten saan ideani toimimaan nettisivulla" vaan pikemminkin "miten teen ideani nettisivuna"; netti ja sen elementit ovat raaka-ainetta josta muovaat teoksen. Eli, sen sijaan että tekisit teoksen jonka dokumentaatiota esittelet sivulla, tämän nettisivun tulisi olla se teos. Käytä netille ominaisia elementtejä ja yritä hyödyntää niitä teoksessasi. Esimerkiksi, jos haluat tehdä ympyrän, älä lataa kuvaa ympyrästä, vaan mieti miten voisit tehdä ympyrän koodilla (yksi vastaus: border-radius:100%;). Katso myös esimerkki 11 eri tavasta tehdä sama kolmio koodilla.
Sisältö ja konsepti on vapaa. Se voi olla esimerkiksi konseptuaalinen, narratiivinen, abstrakti tai pelkkää muotokokeilua, kuhan se ottaa huomioon yllä olevan idean netstä materiaalina ja paikkasidonnaisena taiteena. Voit kysyä, toimisiko teos jossain muussa muodossa tai mediassa kuin nettisivuna? Jos vastaus on joo, mieti vielä.
Tee kolme ehdotusta ke 10.9. tunnille. Ehdotus 1 tulisi olla eka idea joka tulee mieleen, ehdotus 2 tulisi olla mahdollisimman outo, ja kolmas mikä vaan.
Inspiraatiota: declin-sequence.neocities.org, button garden, websafe2k16, jodi.org, Form art, ädaweb, Rafael Rozendaal.
Ohjeita:
- Kuvia voi olla, mutta teos ei saa perustua pelkille kuville. Jos teos voisi helposti toimia jossain muussa mediassa kuin netissä, niin mieti miten voisit tehdä siitä sellaisen joka ei voisi toimia muuta kuin netissä.
- Videota ja ääntä ei voi käyttää (Neocities estää niiden käytön).
- Älä perusta teosta sellaisille vuorovaikutteisille elementeille jotka vaativat javascriptiä toimiakseen (eli niin että teos reagoisi sivulla vierailijan toimintaan [paitsi hyperlinkkaus ja hover-animaatiot]).
- Teoksesi voi olla yhdellä sivulla, tai se voi jakautua usealle alasivulle, jotka on yhdistetty hyperlinkeillä.
- Verkon katoavaisen luonteen vuoksi pysyvä taideteos joka eläisi internetissä "ikuisesti" on harvinaisuus ja haaste, kun sivustot menevät offline-tilaan tai muuttuvat saavuttamattomiksi ajan kuluessa. Pyri tekemään sivu joka kestää teknologisia muutoksia: älä tee teosta riippuvaiseksi tietokantayhteyksistä, kolmansien osapuolten palveluista, API:sta tai muista ulkoisista resursseista (YouTuben, SoundCloudin, Vimeon, Twitterin, Spotifyn tai minkään muun sosiaalisen median upottaminen, linkittäminen ulkoisiin mediaresursseihin, datan hakeminen tietokannasta tai API:sta reaaliajassa jne.). Kaiken sivuston sisällön tulisi olla "paikallista" eli upattuna Neocitiessiin.
- Varmista, että HTML-koodisi on validia W3C:n Markup Validation Servicellä.
- Kuvat tulee olla nettioptimoituja. Jokaisen sivun täytyy olla alle 1MB ja saada vähintään A-luokitus Website Carbon Calculatorilla.
Tehdään viikoilla 2–4. Palautus 10.10. mennessä, mutta huomioi että vikat kaksi viikkoa on varattu muuhun kuin tämän tekemiseen.
3. Kokeellinen koodattu juliste
Kurssin viimeisellä viikolla pystytämme Väreeseen näyttelyn, jossa esitellään töitä myös Arjan ja Antin ryhmiltä.
Luo yllättävä, rajoja rikkova, kokeellinen, outo, ruma, poeettinen, herkkä ja/tai pehmeä juliste käyttäen ainoastaan HTML- ja CSS-elementtejä. Juliste tulostetaan PrintLabissa.
Teema: Mitä koodilla voi tehdä?
Ohjeita ja inspiraatiota:
- Voit jatkaa arkistotehtävän teemaa, tai tehdä julisteen arkistolle, silti ajatuksella "mitä koodilla voi tehdä".
- Unohda kaikki, mitä olet oppinut "hyvästä" (netti)suunnittelusta. Mitä oudompi, sitä parempi. Älä suunnittele etukäteen mitään. Ajattele tekemällä ja kokeilemalla.
- Selaile MDN:n CSS ja HTML referenssejä. Valitse referensseistä erikoisia elementtejä ja ominaisuuksia ja kokeile miten voisit käyttää niitä. Kokeile epätavallisia väripaletteja, muotoja ja sommitelmia. Miten pitkälle voit venyttää HTML:n ja CSS:n rajoja?
Julisteen on oltava valmis to 10.10. aamu 9:00 mennessä. Valmis juliste-sivu tallennetaan PDF tiedostona ja upataan yhteiseen drive kansioon (linkki tulee myöhemmin).
Julisteet leikataan torstaina 9.10. aamulla, jolloin kaikkien pitää olla ajoissa paikalla. Ripustus tapahtuu 10.10. iltapäivällä.
Tehtävään on varattu viikko 5, mutta voi aloittaa aikaisemminkin.
Julisteen koko: 84cm×120cm. Julisteessa on bleed 3mm, joka tulee ottaa huomioon julistetta tehdessä. Bleediä ei ole erikseen merkitty julistepohjaan, älä siis laita mitään tärkeää ihan reunaan kiinni. Julistepohjan html:n löydät täältä ja css:n täältä