Digitaalisen median tekniikat (kevät 2009) - harjoitustehtävät 3

Harjoituksissa käsitellään CSS:ää ja JavaScriptiä. Osa tehtävistä tehdään etukäteen ja osa harjoitustilaisuudessa. Tehtävää on nyt vähän vähemmän, joten tee harjoitustyötäsi!

Vaihda CSS-esimerkki toisin päin (etukäteen)

Vaihda CSS-luennon esimerkkidokumentin #toc ja #content toisin päin, eli peilikuvakseen. Älä muokkaa XHTML-tiedostoa, vaan pelkkää CSS-tiedostoa! Huomaa marginaalit ja muut reunukset!

Tee JavaScript-kuvagalleriaan CSS (etukäteen)

Luennolla esitetyssä JavaScript-kuvagalleriassa on PAHA käytettävyysongelma! Vaikka käytettävyydestä ei ole vielä puhuttukkaan, niin ongelma on ilmeinen.

1. Kopioi galleria itsellesi esim. zip-pakettina.
2. Mieti, miten käytettävyysongelma korjataan pelkästään CSS:ää käyttämällä; älä tee muutoksia XHTML-dokumenttiin. Paitsi: lisää <link> -elementti, jolla tuot ulkopuolisen CSS-tiedoston dokumenttiin.
3. Tee CSS, joka toteuttaa oman ehdotuksesi käytettävyyden parantamisesta. Jos et keksi mitään parannusta, tee niin, että kuva on vasemmalla ja muut kuvat oikealla. Omaperäisestä toteutuksesta saa papukaijamerkin!

Korjaa kuvagalleria siten, että se ei mene rikki (etukäteen osittain)

Kuvagalleria luottaa siihen, että XHTML noudattaa tiettyä rakennetta. Parempi tapa valita kuvat, joille onClick -tapahtuma asetetaan voisi olla käyttää tiettyä "class" määrettä ja valita elementit sen perusteella.

Etukäteen

• Millaisia ongelmia kuvagallerian rakenteessa on?
• Miten korjaisit ongelmat? Käyttämällä luokkia elementeissä vai jotenkin muuten? Miten käyttäisit luokkia? Jotenkin muuten?

Harjoituksissa (tai etukäteen jos osaat!)

• Korjaa galleria, nyt voit muokata myös XHTML:ää

DOM-puun piirto

Koska unohtui näyttää luennolla: piirrä luennon XHTML-esimerkkidokumentin DOM-puu! Varo: voi kasvaa isoksi, käytä algoritmijärkeäsi :)

Valitse harjoitustyön aihe!

Jos et ole vielä valinnut aihetta: nyt se on pakko valita!

Lisää harjoitustyöhön (tai dokumenttiin) CSS. Ehkä myös JavaScriptin alku!