topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-course-webtechnology-assignments-assignment-3.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>WT - Assignment Scripting</title>
    <link href="lib-present-course-webtechnology-style-note.css"
          rel="stylesheet" type="text/css" />  
  </head>
  
  <body>
  
  <h1>Assignment "Scripting"</h1>
  
  <h2>Learning goals</h2>
  
  <p>After the assignment the student should:</p>
  <ul>
    <li>understand the role of client-side scripting</li>
    <li>understand the notion of interactivity and events in Web pages</li>
    <li>be able to reuse existing JavaScript code to enhance Web pages</li>
    <li>be able to find programming errors made</li>
    <!--li>be able to use small XML fragments to dynamically update small 
        portions of a Web page without reloading the entire page. </li-->
  </ul>
  
  <p><strong>Background:</strong> The purpose of the assignment is to
  illustrate client-side scripting. To this end the students explore three
  JavaScript widgets in some detail. The student is not required to
  learn syntactic details of JavaScript but should be able to look these
  up in the appropriate documentation.  Make sure you have read the
  complete assignment, including the hints and tips, before you
  start.</p>
  
  <h2>The assignment</h2>
  
  <p> Your job is to adapt, with the help of a text editor such as
  <code>jedit</code> or <code>emacs</code>, the HTML document of the
  previous assignment and to make it more interactive.  You can be as
  creative as you want, but the following features are required:
  </p>
  
  <ol>
  <li>
  Add, at the top of your page, a 500x500 pixel <strong>geographical
  map</strong> marking at least two spots on the earth that are special
  to you and/or your partner in your group.  If users click the markers,
  a short text explaining why this point is special to you should
  appear.  Make sure the map is appropriately zoomed in or out to show
  all your markers when the page is loaded in the browser.  </li>
  
  <li>
  The HTML table(s) you created for the previous assignments should
  become <strong>sortable</strong> on all columns by clicking the table
  headers 
  </li>
  
  <li>
  The background color of your page should be adaptable by the end-user,
  include a <strong>color picker</strong> control at the top of your
  page so he or she can do this easily.</li> 
  
  <li>
  The HTML file with the answers to all the Lab questions so far should
  be extended to use the JavaScript libraries mentioned below.
  To this end, include URIs references to the appropriate CSS and
  JavaScript libraries in the <code>head</code> element of the HTML
  file.  Use URIs refering to the original location on the Web, do not
  link to downloaded copied on your harddrive.  Only submit your HTML
  file and CSS files, i.e. as you have done with the previous
  assignment.  Do <strong>not</strong> submit files with third-party
  JavaScript libraries that you may have downloaded from the Web.</li>
  
  <li>
  You may also use JavaScript in the <code>body</code> element.
  </li>
  
  </ol>
  
  <h2>Hints and Tips</h2>
  
  <ul>
    <li>This assignment covers material of Chapter 4, 5 and 7 of
    Jackson. </li> 
  
   <li>
    You are not the first one to discover that it would be nice to have
    interactive maps or to sort tables, but that this is not supported
    by XHTML!  You are strongly encouraged <strong>not to reinvent the
    wheel</strong>, but to reuse as much as possible code that is
    already freely available on the Web.  </li>
  
    <li>
     For the map: feel free to use the examples given in the <a
     href="http://code.google.com/apis/maps/">Google Maps API</a>
     documentation. Tip: you do not need a Google API
     <strong>key</strong> or even a Google account to make this
     assignment.  Google will not check your key if you load the XHTML
     file with you map into the browser directly from your local file
     system.  The key is only needed if you load your page via a Web
     server.  Other tip: you will need to lookup the longitude/latitude
     of your favorite places.  There are many web sites that help you to
     do this, including <a
     href="http://www.satsig.net/maps/lat-long-finder.htm">http://www.satsig.net/maps/lat-long-finder.htm>.
     Note that the last site also uses Google Maps, so you could add
     similar coordinate-finding functionality to your own map
     (optional).</li>
  
   <li>For sortable table columns, you could use the JavaScript <a
    href="http://developer.yahoo.com/yui/datatable/"><code>DataTable</code></a>
    widget from the <a href="http://developer.yahoo.com/yui/">Yahoo!
    User Interface Library (YUI)</a>. Free feel to cut and paste
    JavaScript and XHTML code from the tutorials and examples provided
    by Yahoo!  Tip: to simple reuse the table(s) you already have in
    XHTML, you can use <code>YAHOO.util.DataSource.TYPE_HTMLTABLE</code>
    </li>
  
  <li>
    For the colors, you may use the <a
    href="http://developer.yahoo.com/yui/colorpicker/"><code>Color
    Picker</code></a> control, also from the <a
    href="http://developer.yahoo.com/yui/">YUI</a>. Free feel to cut and
    paste JavaScript and XHTML code from the tutorials and examples
    provided.  Tip: reuse the <strong>event listener</strong> from the
    lab questions by associating it with the control's
    <code>rgbChange</code> event.  </li>
  
    <li>Be creative.  You will learn much more by also exploring the
      configuration options of the controls mentioned above and by
      experimenting with adding other controls to your page.  Warning: such
      additional functionality will play only marginally influence your
      final mark.  Invest your time well, do not spend too much effort
      creating a fancy page just to get a higher mark!</li>
  
    <li>If you make errors in your JavaScript, they may be hard to find.
      Learning how to debug JavaScript and understanding why this is
      often difficult is part of the goals of the assignment.  To
      simplify debugging, you could make separate pages for the various
      modules and develop them independently, and only merge them into
      one single page after everything works as expected.  Make sure you
      have the "Error Console" (under the "Tools" menu in Firefox) of
      your browser open to see syntax and other errors.  You may also
      use JavaScript debuggers, use the Web to find out how.  </li>
    
   <li>
    If you cannot find a bug, even after spending a significant amount
   of time, feel free to ask help from other students during the lab
   sessions.  If you feel you cannot make this assignment without
   spending an unrealistic amount of time debugging, submit what you
   have, explain what does not work and explain what you have tried to
   get it working.</li>
  
  </ul>
  
  <h2>Submission details</h2>
  
  <p>Check the Blackboard site of the course for submission details. </p>
  
  <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
           src="http://www.w3.org/Icons/valid-xhtml10.png"
           alt="Valid XHTML 1.0!" height="31" width="88" 
           style="float: right" /></a>
  </p>
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.