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 below are repeated from IT350 for your review.

 

Picking Your Theme

 

You want to pick a theme that is rich enough to expand in later labs.  The only hard requirement is that there must be some plausible reason for users to contribute “content” to your site. This could be comments, product descriptions, ratings, etc.

 

Your topic should make sense to add the following:

  1. A database backend (to keep track of user-provided content)
  2. The ability to refresh data on the page without hitting reload (e.g. to present search results)
  3. An “auto-complete” function (where users type some characters and the system provides suggested endings), possibly for a search box.
  4. Some kind of user accounts or customization based on what the user has previously done or seen on this site.

 

You want something for which it’s easy to think of in terms of multiple pages with the same format but different data. For instance, a hobby site with multiple pages on different hobbies, or a social site with accounts for many people, or an organization's site with multiple pages about its different events. A bad idea is a site devoted to one person. Examples from previous years:

 

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 (see bottom of page) will again be the guide 

 

Initial Setup 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. 
  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. 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. Download and save this default.htm page to your directory at W:/public_html/default.htm
    1. Save it as default.htm, not default.html
    2. Save all your work under your W: drive.  Your X: drive is not visible to the web server.  Files saved on the local 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).  Remember, your file is stored in public_html, but this is not part of the URL. For viewing, you can use your favorite browser (Chrome or Firefox recommended), but you should verify that your pages work in Internet Explorer and either Firefox or Chrome (or all 3!). 

8.      Now personalize the default.htm that you saved (see Editor Help below).  It is already mostly setup for you, just replace YOURNAME on the page, the slogan, and that's it!

 

Lab Instructions

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

2.  Base Design: In Lab01 create a file “index.html” (use the starter.html page to begin) that looks like the home page for your theme, and satisfies the following:

    1. Is a valid XHTML page that introduces your theme.
    2. Contains a welcome header, like “Welcome to 23rd Company Blog!”, not “Welcome to Lab #1”.
    3. Contains brief with a slogan and summary description of what the site is.
    4. Contain some pictures
    5. Uses an external stylesheet to apply reasonable styling (this can be simple, but get in the habit now of using it).
    6. Is not just a white page with black text...
  1. DOM Manipulation: Once you’ve got the basics working, add some 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! For example, you might move around list items or paragraphs or images. If you do want to use a table, make sure the functionality is different than the class examples.
    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. Never get “stuck” in a final state. In other words, there is 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 'tagName' 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.

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

5.  Ensure that your pages have the validation button (and validate!) and that you have met all requirements.

6.  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:

 

You are encouraged to use Notepad++. You can use Crimson Editor if you really want to, but last semester we had unexplained problems with it mysteriously erasing files. Use at your own risk!

 

When saving a file from your 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) Point your browser to http://intranet.cs.usna.edu/~mXXXXXX/Lab01/index.html
  2. (sometimes useful for client-side debugging).
    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 validator button 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)      Completed assignment cover and grading sheets.  Two pages, a cover sheet and a grading sheet.

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.