Digitaalisen median tekniikat (kevät 2009)
kurssikoe 28.4.2009

Vastaa tehtäviin huolella. Kirjoita jokainen viidestä tehtävästä eri paperille. Kirjoita jokaiseen paperiin kurssin nimi, nimesi, opiskelijanumero/syntymäaika ja päiväys.

Muista palauttaa harjoitustyösi ajallaan. Harjoitustyön pisteet ovat voimassa seuraavissa erilliskokeissa vuoden ajan.

DOM-puu ja CSS (5p)

Tässä on dokumentti:

<body>
	<h1>Don't Make Me <em>Think</em><h1>
	<p>Please make me <em>laugh</em>.</p>
	<p>Whatever you do, <span class="warning">don't make me <em>cry</em></span>.</p>
	<p>Please, bring me <a src="http://flowershop.fi"><img src="flowers.jpg" alt="red roses"/></a>.</p>
</body>

Piirrä DOM-puu (2p)

Piirrä yllä olevan dokumentin DOM-puu body-elementistä alkaen.

CSS-valitsimet (3p)

Mitä kohteita seuraavat CSS-valitsimet valitsevat yllä olevasta dokumentista?

p, em
p em
p > em
#warning
a img
img a

Tässä vielä ohjetta W3:n CSS-standardista:

E F: Matches any F element that is a descendant of an E element.
E > F: Matches any F element that is a child of an element E.
E + F: Matches any F element immediately preceded by a sibling element E.
E#warning: Matches any E element with ID equal to "warning".

Laatikot ja kirjastot (5p)

Laatikon leveys (2p)

Mikä on div-elementin, jonka id on "footer", leveys prosentteina suhteessa emosäiliöönsä? Tässä koodi:

	<style type="text/css">
		body { width: 80%; }
		#toc { width: 40%; float: left; }
		#content { width: 60%; float: left; }
	</style>

	<body>
		<div id="toc">toc</div>
		<div id="content">content
			<div id="footer">footer</div>
		</div>
	</body>

JavaScript-kirjastot (3p)

Mainitse etuja ja haittoja JavaScript-kirjastojen käytöstä.
Millaisia käyttökohteita kirjastoille on?

Rakenteelliset virheet (5p)

Oheinen XHTML-dokumentti on täynnä virheitä. Virheet ovat korkean ja matalan tason rakenteellisia sekä esityksellisiä virheitä. Älä vastaa tehtäväpaperiin. Yksilöi vastaukseesi mahdollisimman lyhyesti kyseisen virheen sijainti koodissa. Saat löydetyistä virheistä pisteitä seuraavasti:

Oikea (aiheellinen) virhe +0,5p. Esimerkkejä:
- Otsikkotasot hyppäävät suoraan h2:sta h4:n
- meta name="author" sisältää nimen lisäksi päivämäärän
Väärä virhe (eli ei oikeasti ole virhe) -0,5p. Esimerkkejä:
- img-elementissä ei ole title-attribuuttia
- <td colspan="2">

<h1>Document is full of structural errors, how many are you able to find?</h1>

<h3>Just <font color="red">remember</font> that the key is to separate <em>content</em> and <em>presentation</h3></em>

<table>
	<tr>
		<td colspan="2"><center>Computer Science department live view</center></td>
	</tr>
	<tr>
		<td><img src="http://www.cs.helsinki.fi/u/tkt_cam/exactum.jpg"></td>
		<td valign="top">
			Welcome!<br/><br/>
			The Department of Computer Science at the University of Helsinki is known for its quality research and teaching.<br/><br/>
			Varied in both form and contents, the teaching is constantly improved and open to new innovations. As a token of the good quality of teaching at the department, the Ministry of Education elected it as one of the national centres of excellence in university education from the year 2007.<br/><br/>
			The research at the department combines theory with interaction with the application fields in a well-balanced whole.<br/><br/>
			The Department of Computer Science is situated at the Kumpula campus, the leading concentration of expertise in exact sciences in Finland.
		</td>			
	</tr>
	<tr>
		<td align="right"><i>"Exactum"</i></td>
		<td></td>
	</tr>
</table>

Web-tekniikat ja periaatteet (5p)

Ajax (2p)

Selvitä lyhyesti mitä tarkoitetaan AJAX-tekniikalla ja miten tällä tekniikalla toteutettu sovellus eroaa perinteisestä web-sovelluksesta. Mitä etuja ja toisaalta haittoja tekniikan käytöllä on?

Esteettömyys, saavutettavuus ja PIMEÄ WEB (3p)

Määrittele periaatteita ja anna esimerkkejä (positiivisia sekä negatiivisia) seuraavista.

Esteettömyys: mitkä ovat tärkeimpiä huomioon otettavia asioita, jotta sivu(sto) on esteetön?

Pimeä web (deep web): anna esimerkkejä erilaisista tilanteista, joissa sivu(sto) jää pimentoon.

Palvelinohjelmointi (4p)

Mitä eroa on GET- ja POST-pyynnöillä? Entä mitä tarkoitetaan HTTP-protokollan tilattomuudella? (1p)
Millaisia tietoturva-ongelmia voi olla tilanteessa, jossa PHP-skripti tekee seuraavat asiat (2p):
- Vastaanotetaan käyttäjältä dataa
- Data tallennetaan tietokantaan
- Tallennettu data näytetään käyttäjlle
On CGI-skripti, joka vastaanottaa selaimen lähettämiä (upload) tiedostoja hakemistoon uploads. Kerro sekä mitä oikeuksia että mille käyttäjäryhmille tarvitaan. Anna vain tarvittavat oikeudet. (1p)
- Mitkä oikeudet uploads-hakemistolla on oltava, jotta CGI-skripti voi tallettaa sinne tiedostoja?
- Mitkä oikeudet uploads-hakemistolla ja lähetetyillä tiedostoilla on oltava, jotta tiedostoja voi listata ja katsoa uploads-hakemistosta selaimella?

Kurssipalaute (1p)

Anna tentin jälkeen kurssipalautetta laitoksen viralliseen palautejärjestelmään: https://ilmo.cs.helsinki.fi/kurssit/servlet/Valinta. Saat pisteen jos lupaat antaa palautteen. Lupaus on sitova. Kirjoita tehtävän vastaukseksi, lupaatko vai etkö. Tätä tehtävää ei tarvitse kirjoittaa erilliselle paperille. Tehtävästä saatava piste on bonuspiste, eli voit saada täydet pisteet vaikket lupaa antaa kurssipalautetta.

Digitaalisen median tekniikat (kevät 2009)kurssikoe 28.4.2009