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ä.
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ä.
Palautus joka maanantai klo 15. Palautus tapahtuu lataamalla sivu GitHub pagesille.
- Luo joka viikko uusi HTML-tiedosto oppimispäiväkirjallesi.
- Käytä oppimispäiväkirjaa siten kun itse näet parhaaksi.
-
Nimeä tiedostot muodossa
viikkoX.html, missä X on viikon numero (esim. viikko1.html, viikko2.html, jne.). -
Sisällytä jokaiseen tiedostoon ainakin seuraavat elementit:
- Otsikko
- Linkki edelliseen viikkoon (paitsi ensimmäisessä tiedostossa)
- Linkki seuraavaan viikkoon (paitsi viimeisessä tiedostossa)
- 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ä Arkisto
Tutki netissä olevia digitaalisia arkistoja ja valitse sieltä jokin public domainissa oleva painettu materiaali jonka tulkitset ja muunnat nettisivuksi. Millä tavoin digitaalinen formaatti voi säilyttää painetun vastineensa ainutlaatuisuuden ja välittää sen erityispiirteet? Miten voit tulkita historiallista sisältöä ja tuoda esiin uusia näkökulmia? Miten oma henkilökohtainen persoonasi peilautuu löytämästäsi materiaalista? Nettisivun tulee olla kooltaan enintään 1Mt (1000kt) ja sen tulee olla pääasiassa koodattu HTML:llä ja CSS:llä. Valmis nettisivu julkaistaan Github Pagesilla.
- 1. Valitse painotuote jostain netissä olevasta digitaalisesta arkistosta. Painotuote voi olla esimerkiksi kirja, lehti tai juliste, yksittäinen artikkeli, sivu tai aukeama, jne, mutta ei esimerkiksi maalaus, esine tai muu vastaava objekti. Sen täytyy olla public domainissa, eli tekijänoikeuksista vapaa. Valinnallasi pitää olla jotain muodollisia ja käsitteellisiä ominaisuuksia joista voit tehdä kiinnostavan ja odottamattoman tulkinnan nettisivun muodossa. Ole avoin ja utelias tässä prosessissa. Voit aluksi vapaasti koota useita vaihtoehtoja, hylätä sitten kaikkein ilmeisimmät ja valita sitten aihe jolla on mielestäsi isoin potentiaali jonkin oudon ja yllättävän tuotoksen tekemiseen.
- 2. Mieti eri tapoja ja mahdollisuuksia materiaalin tulkitsemiseksi ja "kääntämiseksi" digitaaliseen muotoon. Huomioi tässä prosessissa sekä sisältö että alkuperäisen teoksen materiaalisuus ja muut muotoseikat. Tavoitteena ei ole suoraan kopioida teksti- ja kuvasisältöä, kuten esim. Project Gutenbergissä, tai esittää sivu sivulta skannattua versiota, kuten digitaalisissa arkistoissa. Tavoitteena on luoda nettisivusta sellainen itsenäinen teos, jossa alkuperäinen materiaali on kriittisesti tutkiskeltu, kuratoitu, samplattu ja tulkittu niin että teos on yhtä paljon (tai jopa enemmän) itsesi kuin alkuperäisen tekijänkin aikaansaannos.
- 3. Tutki valitsemasi aiheen mahdollisuuksia ja rajoja, ja mieti miten voisit suunnitella materiaalin pohjalta nettisivun. Mieti mitä välttämättömiä teknisiä ja sisällöllisiä kompromisseja joudut tekemään jotta saat nettisivut alle 1Mt kokoisiksi. Mieti samalla myös, että miten nämä kompromissit voisivat olla hyödyksi ja jopa korostaa tulkitsemaasi materiaalia. Muista että kaikilla tekemilläsi päätöksillä, olivat ne teknisten rajoitusten aiheuttamia tai ei, on merkitystä siihen miten nettisivuillasi käyvät kokevat teoksen.
- 4. Tee alustava suunnitelma nettisivustasi, jossa ennakoit mahdollisia haasteita, ja esität millä tavoin projektisi on sekä teknisesti että konseptitasolla toteuttamiskelpoinen. Voit testata ideoitasi pienillä prototyypeillä, jotta tiedät toimivatko ne käytännössä.
- 5. Kehitä nettisivu käyttäen pääasiassa HTML:ää ja CSS:ää. Voit käyttää JavaScriptiä harkiten, vain tarvittaessa ja ilman ulkoisia kirjastoja. Nettisivun tulee olla kooltaan enintään 1Mt (1000kt). Ajattele nettisivua interaktiivisena kokonaisuutena ja mieti miten ohjaat (tai et ohjaa) kävijää teoksesi läpi. Palautus viikon 4 lopussa, eli 27.9. (tai kurssin lopussa 11.10. mikäli näyttää siltä että aika ei riitä). Julkaise nettisivut käyttäen Github Pagesia.
Digikokoelmia ja nettiarkistoja
- Yale Library
- National Gallery of Art (US)
- Smithsonian
- RIT
- Russian Books & Magazines archive
- German typografic journal (Typographische Mitteilungen)
- German graphic design journal (Gebrauchsgraphik)
- Gebrauchsgraphik 1924-1943
- Kirjapainotaito arkisto
- CORPUS TYPOGRAPHIQUE FRANÇAIS
- the International Advertising & Design DataBase
- Victoria and Albert Museum digital collections
- Heidelberg digital collection
- berlin digi collection
- deutche digitale
- german archive portal
- japanese book archives
- Printing Art magazine 1903-1926
- The British Printer
- British Library online archive
- Magazines in National library of spain
- Big list of type specimens
- Lots of great specimen scans
- Arabic design archivess
- international advertising & design database
- letterformarchive
- japanese fashion magz
- Éxito gráfico
- Galería gráfica : revista profesional de artes gráficas.
- Gebrauchsgraphik
- Typographische Mitteilungen
- Grafikai szemle
- Magyar Grafika
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:
- Voit jatkaa arkistotehtävän teemaa, tai tehdä julisteen arkistolle, silti ajatuksella "mitä koodilla voi tehdä".
- Ä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 valmis to 9.10. aamu 9:00 mennessä. Valmis juliste-sivu tallennetaan PDF tiedostona ja upataan yhteiseen drive kansioon (linkki telegrammissa).
Julisteet leikataan torstaina 10.10. aamulla, jolloin kaikkien pitää olla ajoissa paikalla. Ripustus tapahtuu 10.10. iltapäivällä.
Suosittelen tehtävän tekoon viikkoa 5, mutta voi aloittaa aikaisemminkin jos riittää aikaa ja energiaa.
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ä
Linkkilista
Kurssin aikana käydyt asiat ja linkit tulevat tänne: Linkkilista
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 | Koodipaja | Keskustelua lukuläksystä CSS kertausta |
| 13–15 | Demo: CSS Grid | 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 typografia | Koodipaja | Keskustelua lukuläksystä 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 — Juliste
| Ke 2.10. | To 3.10. | Pe 4.10. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Tehtävä 3: Juliste | Koodipaja | Keskustelua lukuläksystä |
| 13–15 | Koodipaja | Koodipaja | Koodipaja |
Lue torstaihin 3.10. mennessä: Sivut 2–40 (PDF:n sivut 31–68), eli kappaleet Infomania, Logic and Intuition ja Hypertext Heaven kirjasta The Metaphysics of Virtual Reality.
Viikko 6 — Näyttely
| Ke 9.10. | To 10.10. | Pe 11.10. | |
|---|---|---|---|
| Paikka | A131a | M134 | A131a |
| 9:15–12 | Koodipaja | Julisteiden leikkuu | Loppukritiikki |
| 13–15 | Koodipaja | Julisteiden ripustus | Näyttely tour |