Näide: paar aastat vana kasutajaliideste kontrolltöö

Kontrolltöö: Kasutajaliidesed võrgutehnoloogia baasil
=====================================================

28 mai 2007

Allpool on toodud kuus teemat, millest enamus sisaldab mitut erinevat 
küsimust. Palun kirjuta vastused küsimuste järele!


1. CSS
======

A) Milline kolmest variandist on õige viis css fail sisse lugeda:
   
a) <link rel="stylesheet" type="text/css" href="mystyle.css">
b) <style src="mystyle.css">
c) <stylesheet>mystyle.css</stylesheet>
 

B) Selgita, mida täpselt kuvab järgmine leht (smiley.gif on mingi
väikeste mõõtmetega smiley),ning mida kuvaks ta juhul, kui body 
style sees oleks täiendavalt antud background-repeat: no-repeat;

<html>
<head>
<style type="text/css">
body { background-image: url('smiley.gif'); background-position: 30% 20%; }
</style></head>
<body>aa</body>
</html>



C) Mis värvi on pealkiri?

<html>
<head>
<style type="text/css">
body {color: red; }
h1 (color: blue; }
</style></head>
<body>
<h1 style="color: green">Pealkiri</h1>
</body>
</html>


D) Kuhu täpselt kuvatakse pealkirjad? Joonista ja selgita lühidalt.

<html>
<head>
<style type="text/css">
h2.pos_2 { position:relative; left:-20px }
h2.pos_3 { position:absolute; left:20px }
</style>
</head><body>
<h2>Heading1</h2>
<h2 class="pos_2">Heading2</h2>
<h2 class="pos_3">Heading3</h2>
<h2>Heading4</h2>
</body></html>


2. Javascript
=============

A) Kirjuta, mis puhul täpselt avaneb alltoodud koodile vastaval
lehel alertbox:

<html><head>
<script type="text/javascript">
function message() 
 { alert("This alert box was triggered by the onblur event handler") }
</script>
</head><body><form>
Name: <input type="text" onblur="message()" size="20">
</form></body></html>


B) Mis saab muutuja x väärtuseks getElements funktsioonis
peale nupule vajutamist?

<html><head>
<script type="text/javascript">
function getElements() { var x=document.getElementsByName("myInput");  }
</script>
</head><body>
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input type="button" onclick="getElements()" />
</body></html>

C) Oletame, et tahad eelmises näites peale nupule vajutamist
panna kõigi sisendbokside tekstiks "proov" ja lõpuks kuvada 
alertbox, mis näitab sisendbokside arvu.  Kirjuta selleks siia sobiv getElements() funktsioon:



D) Mis täpselt juhtub, kui nupule vajutada?

<html><head>
<script type="text/javascript">
function try() { window.location="http://www.mypage.com" }
</script>
</head><body>
<input type="button" onclick="try()" value="Try it out">
</body></html>


E) Mis täpselt juhtub, kui nupule vajutada?

<html><head>
<script type="text/javascript"> 
function changeSrc()  {  document.getElementById("myImage").src="bbb.gif"  }
</script>
</head><body>
<img id="myImage" src="aaa.gif" width="107" height="98" />
<input type="button" onclick="changeSrc()" value="Try it out">
</body></html>


3. XML
======

A) Kas see on korrektne XML? Kui ei, siis miks?
   
<?xml version="1.0"?>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body> 
    
B) Vaba süntaksi võimaldamiseks võivad XML-s olla 
spetsiaalsed CDATA blokid. Milline variant järgmistest
on korrektne viis CDATA blokki anda:
      
a) <xml:CDATA[ Text to be ignored ]>
b) <PCDATA> Text to be ignored </PCDATA>
c) <CDATA> Text to be ignored </CDATA>
d) <![CDATA[ Text to be ignored ]]>
    

C) Kontrolli järgmise XML teksti korrektsust. Vigade
korral märgi kõik vead, mis leiad.

<m>
kuskil<s foo="a1" bar="a2" foo="12"/>asub
mingi <m checked>asum</m>alev.
<!-- asas -->
</m>


4. XSL
======

Meil on antud järgmine XML fail ja XSL fail. Kirjuta välja 
XSL-i rakendamise täpne tulemus html keelse tekstina 
(whitespace ei ole oluline)!

<?xml version="1.0"?>
<FitnessCenter>
  <Member level="platinum">
    <Name>Jeff</Name>
    <Phone type="home">555-1234</Phone>
    <Phone type="work">555-4321</Phone>
    <FavoriteColor>lightgrey</FavoriteColor>
  </Member>old
  <Member level="gold">
    <Name>Mark</Name>
    <Phone type="home">555-7777</Phone>
    <Phone type="work">555-6666</Phone>
    <FavoriteColor>blue</FavoriteColor>
  </Member>
</FitnessCenter>

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  version="1.0"> 
  <xsl:output method="html"/>
  <xsl:template match="/">
    <HTML>
    <BODY bgcolor="{/FitnessCenter/Member/FavoriteColor}">       
    <P>     
      <xsl:for-each select="/FitnessCenter/Member/Phone">
        <P>algus</P>
        <xsl:value-of select="@type"/>
        <xsl:value-of select="."/>        
        <P>lopp</p>
      </xsl:for-each>
    </P>
    <xsl:value-of select="/FitnessCenter/Member/Phone[@type='home']"/>
    </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>



5. XMLHttpRequest
=================

A) Kas järgmine viis XMLHttpRequesti objekti teha töötab
Firefoxil või MS IE 6-l või mõlemil: request = new XMLHttpRequest()


B) Vaata järgmist koodijuppi ja selgita, mis asi on selles koodis updatePage ja mida see updatePage peaks konkreetselt tegema ja
mis puhul? Umbmäärane vastus "uuendama lehte" ei ole piisav.

function getCustomerInfo() {
  var phone = document.getElementById("phone").value;
  var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
  request.open("GET", url, true);
  request.onreadystatechange = updatePage;
  request.send(null);
}


6. Kirjandus
============

A) J.Spolsky kirjutab artiklis "User Interface Design
For Programmers" muuhulgas kasutusjuhenditest (manual).
Mis on kõige olulisemad punktid, mida ta sellega 
seoses välja toob?


B) Umbes kui mitu lehekülge pikk (mõeldud on eraldi 
lehekülgi, st igale uuele lehele minnes tuleb kuskile
klikata) on veebis Tog Nielseni kirjutis
"First Principles of Interaction Design": 1,5,10,50,100,500?