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: 4.9.–11.10.2024
- 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 voit käyttää sitä itsenäisen opiskelun tukena kurssin päätyttyä.
Tehtävät
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.
Kirjoita päiväkirjaan viikon aikana oppimiasi asioita ja reflektoi kehittyvää suhdettasi teknologiaan, nettiin ja koodaamiseen. 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ä.
Palautus joka maanantai klo 15. Palautus tapahtuu lataamalla sivu GitHub pagesille.
- Luo joka viikko uusi HTML-tiedosto oppimispäiväkirjallesi.
-
Nimeä tiedostot muodossa
viikkoX.html, missä X on viikon numero (esim. viikko1.html, viikko2.html, jne.). - Ensimmäiseen oppimispäiväkirjaan voit esitellä hieman itseäsi sekä tavoitteitasi ja odotuksiasi kurssin suhteen. Mitä haluaisit oppia? Miksi valitsit tämän kurssin?
-
Sisällytä jokaiseen tiedostoon ainakin seuraavat elementit:
- Otsikko
- Vähintään kolme oppimaasi asiaa
- Lyhyt kappale jossa kerrot miten voit soveltaa oppimiasi asioita ja/tai reflektoit viikon aikana käytyjä puheenaiheita ja asioita.
- Linkki edelliseen viikkoon (paitsi ensimmäisessä tiedostossa)
- Linkki seuraavaan viikkoon (paitsi viimeisessä tiedostossa)
- Lisää jokaiseen tiedostoon myös vähintään yksi koodisnippet, jonka joku muu ryhmäläisistä voi copy&pasteta omaan projektiinsa. Se voi olla esim. tyylitelty otsikko, CSS-liukuväri tai jokin muu oivallus. Käy samalla selailemassa muiden päiväkirjoja ja katso minkälaisia koodisnippettejä he ovat jakaneet.
- Käytä asianmukaisia HTML-tageja sivun sisällölle. Voit seurata esim. MDN:n HTML text fundamentals ohjetta.
- Varmista, että HTML-koodisi on validia ja hyvin muotoiltua käyttämällä W3C:n Markup Validation Serviceä.
- Kuvat tulee olla optimoituja nettiin. 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. Tehtävä XXX
Tämä tehtävä päätetään yhdessä ensimmäisellä viikolla.
Tehdään viikoilla 2–4. Palautus GitHub pagesiin. Palautus 2.10. klo 15 mennessä.
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:
- Älä suunnittele etukäteen mitään. Ajattele tekemällä ja kokeilemalla.
- Unohda kaikki, mitä olet oppinut "hyvästä" (web)-suunnittelusta. Mitä oudompi, sitä parempi.
- 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?
- Leiki typografialla. Miten voit muuttaa kirjaimia ja sanoja visuaalisiksi taideteoksiksi pelkällä koodilla?
Julisteen on oltava printattuina to 10.10. mennessä, kun näyttely ripustetaan.
Suosittelen tehtävän tekoon viikkoa 5, mutta voi aloittaa aikaisemminkin jos riittää aikaa ja energiaa.
Tehtävä tarkentuu kurssin myötä. Lisätietoja julisteen mitoista ja muista tulee myöhemmin. Julisteen HTML-pohja tulee myöskin myöhemmin tänne.
Aikataulu
Viikko 1 — HTML perusteet
| Ke 4.9. | To 5.9. | Pe 6.9. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Yhteisaloitus |
Keskustelua lukuläksystä Luento: Mikä on netti? |
Yleiset & HTML perusteet |
| 13–15 | Johdanto kurssiin | Inspect-työkalu | Alkuvalmisteluja Tehtävä 1: HTML-päiväkirja |
Lue torstaihin 5.9. mennessä: An app can be a home-cooked meal
Viikko 2 — CSS perusteet
| Ke 11.9. | To 12.9. | Pe 13.9. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Demo: CSS perusteet I (syntaksi, valitsimet, cascade, pseudoluokat) |
Keskustelua lukuläksystä Demo: CSS perusteet II (box model, elementtien koko, display, mittayksiköt) |
Tehtävä 2 presentaatiot |
| 13–15 | Tehtävä 2: XXX | Koodipaja | Koodipaja |
Lue torstaihin 12.9. mennessä: The internet didn’t kill counterculture—you just won’t find it on Instagram
Viikko 3 — Flexbox ja Värit
| Ke 18.9. | To 19.9. | Pe 20.9. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Demo: CSS Flexbox |
Keskustelua lukuläksystä Demo: CSS värit ja taustat |
CSS kertausta |
| 13–15 | Koodipaja | Koodipaja | Koodipaja |
Lue torstaihin 19.9. mennessä: We Need To Rewild The Internet
Viikko 4 — Grid ja Typografia
| Ke 25.9. | To 26.9. | Pe 27.9. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Demo: CSS Grid |
Keskustelua lukuläksystä Demo: CSS typografia |
CSS kertausta |
| 13–15 | Koodipaja | Koodipaja | Koodipaja |
Lue torstaihin 26.9. mennessä: My website is a shifting house next to a river of knowledge. What could yours be?
Viikko 5 — Responsiivisuus ja mukautuva leiska
| Ke 2.10. | To 3.10. | Pe 4.10. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 |
Demo: CSS Responsiivisuus Tehtävä 3: Juliste |
Keskustelua lukuläksystä Demo: CSS mukautuva leiska |
CSS kertausta |
| 13–15 | Koodipaja | Koodipaja | Koodipaja |
Lue torstaihin 3.10. mennessä: TBA
Viikko 6 — Näyttely
| Ke 9.10. | To 10.10. | Pe 11.10. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | ?? Koodipaja | Näyttelyn pystytys | Loppukritiikki |
| 13–15 | ?? Koodipaja | Näyttelyn pystytys | Näyttely tour |