Lab 1

Getting Started and DOM essentials

 

 

Introduction

 

In this lab you will create a basic website on a theme of your choosing, then add dynamic capabilities to this website based on manipulating the DOM directly. Later labs will build your website into a full-fledged web application.

 

Some of the tips etc. below are repeated from IT350 for your review.

 

Picking Your Theme

 

All reasonable themes will be approved.  Pick something that you are interested in, perhaps something that you really want to have a web application for. Note that some of the lab requirements may require you to include features you wouldn’t normally want for your particular theme, but will be necessary for the learning process.  In general, however, the requirements will be more flexible than with IT350.

 

You want to pick a theme that is rich enough to allow building on for later labs.  The only hard requirement is that there must be some plausible reason for web site users to contribute “content” to the site. This could be comments to a page, e-mail messages, product descriptions, ratings, etc. Example: you might decide a “blog” site that keeps track of blogs on multiple topics, where users can add comments to each one, and where they can search for relevant postings.

 

You’ll want a topic that makes sense to add the following:

 

In general, you probably want something for which it’s easy to think it terms of multiple pages with the same format but different data.  So a site devoted to one person is not so good (unless you have multiple pages on different hobbies), but a Facebook-like site that provides accounts for many people would work well. For an organization, you could perhaps have different pages devoted to different events, but you wanted there then to be a variety of things to say and/or comment about regarding each event.

 

For this lab, you don’t have to build multiples.  For instance, if you were re-creating Facebook, you would just make a page that looked like the main page for one person.

 

General Web Page Guidance:

 

All labs (that are web pages) should conform to basic standards and propriety.  For all labs in this course, you may not use editors such as FrontPage, DreamWeaver, etc. unless specifically authorized by the instructor.

 

For this particular lab, you must include all of the requirements listed below (for full credit).  But keep in mind that merely doing these requirements is not enough.  Carefully consider the web site’s programming accuracy, functionality, artistic quality, and creativity.  The grading standards from IT350 at http://www.usna.edu/Users/cs/lmcdowel/courses/it350/F08/labs/LabGuidance.html (see bottom of page) will again be the guide 

 

Instructions:

 

  1. Follow naming conventions very carefully in this course. Lab1 is not the same as Lab01.  Lab01.htm is not the same as Lab01.html.  Failure to do this may cause the web server and/or your instructor to not find your files.
  2. How to map your W: drive to your personal web space (We will often call this your “web drive.”). 
    1. Go to My Computer and select “Map Network Drive” from Tools.
    2. For Drive, pick W.  For Folder, enter \\intranet.cs.usna.edu\mXXXXXX (Substitute your alpha for XXXXXX).
    3. Check the “Reconnect at login box.”
    4. You shouldn’t need to click on “different user name”, or provide any different password.
    5. Click OK, then click Finish. 
    6. Verify that you can access your W drive.
    7. Important note:  you should see the contents of your UNIX home directory, accessed via our webserver (intranet.cs.usna.edu). In the past, you have probably mapped a network drive to access this directory via some different machine. However, intranet.cs.usna.edu is configured differently, so that files you create via this new network drive will be “world-readable” by default – and hence accessible by the web server.  So you should use this new drive for accessing your web files, but not for accessing files for other courses.
  3. Setting up the web server
    1. “ssh” into intranet.cs.usna.edu (this machine is our web server).  You can use putty or some other tool.  Use your normal credentials.
    2. Create a new directory public_html  (mkdir public_html)
    3. Change the permissions to allow web access (chmod a+rx public_html)
    4. Make a mental note of what you just did.  For later labs you may need to log in via ssh again to make modifications to file permissions or how things are encoded.
  4. Important – the following will save much pain later.  You should also do this on your PC in your room: Open up the File Explorer (one way is to right-click on the Start menu, then pick Explore).  Click on the W: drive. Then select “Tools -> Folder Options.” Select the View tab.  Look for an option titled “Hide extensions for known file types.”  Make sure this option is NOT checked, then click on the button at top that says “Apply to All Folders.”
  5. Everything that you create for this course should be inside the public_html folder – we’ll try to mention that, but it is always implicit in lab directions if not specified.
  6. Grab the “starter.html” page from the course home page. Save it as W:/public_html/default.htm
    1. This must be default.htm, not default.html
    2. Save all your work under your W: drive.  Files saved on your X: drive are not visible to the web server.  Files saved on the local hard drive may be erased when you log out!
  7. Try to view your page at http://intranet.cs.usna.edu/~mXXXXXX/default.htm (substitute your alpha number for XXXXXX).  Observe that your file is stored inside “public_html”, but this is not part of the URL. For viewing, you can use either Internet Explorer or Firefox – Firefox is generally recommended, but you should verify that pages you create work in both. 

8.      Now modify default.htm (see Editor Help below).  This page is your main page for the course – each week you will modify it slightly to add a link to the new lab that you have created. Modify this page to have: your name, a welcome message/banner of some kind, and a link to Lab01/index.html (which you will create below, also inside public_html).  Since this is to another page on your same site, it should be a relative link, not an absolute link. You may add other creative enhancements if you like. Also add a legal disclaimer (see below).

9.      Validate your default.htm page (you can click on the provided button) and correct any errors. Practice validating as you go – do not leave it to the last minute! 

10.  Create a folder on your web drive under W:\public_html. Name it Lab01. 

11.  In Lab01 create a file “index.html” (not index.htm) that contains the following: (you can also create other HTML pages if desired).  Use the starter.html page to begin. This page should look reasonably like the home page for your theme. In other words, the general message might be “Welcome to 23rd Company Blog!” not “Welcome to Lab #1”. Index.html should:

    1. Be a valid XHTML page that introduces your theme.
    2. Contain some pictures
    3. Use an external stylesheet to apply some reasonable styling (this can be simple, but you should get in the habit now of using it).
    4. Do something reasonable, but don’t spend too long on these steps – the real work is below.
  1. Once you’ve got the basics working, add some new DOM manipulation.  The idea is to practice being able to dynamically manipulate the page in interesting ways.  You decide on how you want it to work – ideally this would fit in with the theme of the page and resemble some useful functionality, but that’s not a strict requirement for this lab.  However, at a minimum your page must:
    1. NOT simply be just like the in-class examples – use the same techniques, but make it different! Suggestion: if you avoid using a table, you’ll be forced to be different (maybe move around list items or paragraphs or images instead?).  If you really want to use a table, make sure the functionality is different.
    2. Be commented – easier to comment as you go!
    3. Be able to move an existing node to somewhere else (e.g. when the user clicks something).
    4. Be able to create a new text node or other element.
    5. Be able to delete some element.
    6. At some point, have code to iterate over all the children of some node (e.g. to change their style in some way).
    7. At some point, dynamically change the style of some node.
    8. Not ever get “stuck” in a final state e.g. there always something I can click on to move something or add something new (unless, maybe, the user has deleted all the relevant things to click on)
    9. At some point, make use of ‘nodeType’ to do something useful (think/ask ahead of time how you will do this!!). It’s likely that iterating may also be involved here, but that’s not required.

13.  Ensure your page works with both IE and Firefox.

14.  Ensure all your pages validate and that you have met all requirements.

15.  Important final step – add some specific instructions to default.htm (next to Lab01 link).  What exactly should a user (or the instructor) click, enter, etc. to see that you met the requirements? You will do this for every lab, and in every case, assume that the user has no idea what to do – and especially has no idea what to enter in any text box (so your directions should suggest something that works).

     

NOTE: all HTML files must validate as XHTML 1.1 without errors for full credit.  The penalty for a file that does not validate is 10%.

 

Editor Help:

 

For this course you are encouraged to use “Crimson Editor.”  You can also use Notepad, but Crimson Editor will make your life easier. Notepad++ or something similar is fine too.

 

When saving a file from Notepad or Crimson Editor, be sure to select “All Files” from “Save as Type”.  Otherwise you may end up with a filename like index.html.txt.

 

Browser Help:

 

There are two ways to view your files:

  1. (recommended) Open up Internet Explorer or Firefox, and enter a URL like at http://intranet.cs.usna.edu/~mXXXXXX/Lab01/index.html
  2. (sometimes useful).
    Internet Explorer: File -> Open -> Browse (go W drive, then appropriate file).
    Firefox: File -> Open File (go to W drive, then appropriate file).

 

The second method fetches your pages directly from your W drive.   The first method fetches your pages from the web server and displays them, so using this method provides more assurance that your files are configured as they need to be.  The validator button also only works when using the first method.

 

If you change your page, but it doesn’t seem to change what is in the web browser, use the View -> Source (or Page Source) command from your browser.  This will show you the raw HTML that your browser is displaying.

Deliverables

1)      Your main web page should be called "default.htm" (without the quotes).

2)      All of your files for Lab01 should be in a folder called "Lab01" (without the quotes) on the Web drive.

3)      Your web page for Lab01 should be called "index.html" (without the quotes) and placed inside the folder Lab01.

4)      Your instructor will assume that your web pages are viewable at http://intranet.cs.usna.edu/~mXXXXXX/Lab01/index.html where XXXXXX is your alpha number.

5)      You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

6)      All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment. For next week you will modify default.htm and create Lab02/, but nothing in Lab01/ should change.

7)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The grading sheet for this lab.

c)      The first page of the output of the W3C validator, as run on the final version of your Lab01/index.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. 

d)      A printout of the source to your Lab01/index.html file (not the rendered page that you normally see with Internet Explorer/Firefox).   Truncated lines are not acceptable – use Crimson Editor vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.

Postscript

Your default.htm should contain the following disclaimer (other pages don’t have to).  Feel free to cut and paste from the assignment page.

Legal Disclaimer

None of the content within this web site or the web sites of the members of this course are intended for distribution in any way, shape, or form. Nor is any attempt being made to disrupt the profiting capability of the copyright holders. The contents of this web site and the web sites of the members of this course are solely intended for educational use of the students and the instructor. All content herein is included strictly for the demonstration of implemented course objectives.