Lab 7: Bootstrap

Introduction

For this week's lab, you will redesign the IT350 course website to make it more attractive and functional. You will use Bootstrap for this lab. When complete, we will have a competition where you judge the results. Winners from each section will receive fabulous prizes, and the grand prize winner (as chosen by the instructor) will have his or her site promoted to official IT350 website status, visible on the Internet.

Read the entire lab so you see the requirements and know what is coming.

Part 0 - Setting up (5%)

Note that this week you are not using the web pages that you previously created for your ECA/unit.

  1. Directory:You must create a folder in you public_html/IT350 folder called Lab07 and store your work in that directory.
  2. Download files: Download this zipped version of the IT350 web site. Unzip these files into your Lab07 directory. This is not a complete dump of all the IT350 files, so some of your links will be broken. However, verify that you have the following pages:
    • http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab07/index.html
    • http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab07/calendar.html
    • http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab07/IT350_course_policy.html

Part 1 - Improved Organization and Usability (55%)

  1. Split up index.html: Divide index.html into at least 3 different "content" pages: index.html (with reduced content) as main page and 2 more content pages. For instance, you might want the "course resources" to be a separate page, and the "other resources" to be a separate page. For now, you don't need links between these pages.
  2. Create a simple navigation bar: This should have links to each of your "content" pages that you created above, including a link to index.html, and you probably also want a link for the calendar. Add this navigation bar to index.html. Don't worry about styling the navigation bar for now. You will use Bootstrap later for that.
  3. Add SSI:
    • Rename Lab07/index.html to Lab07/index.shtml.
    • Create a new file navbar.html that contains the code for the navigation bar.
    • Modify Lab07/index.shtml to include your navigation bar using SSI (instead of having it actually be part of index.shtml).
    • Modify all your other content pages, including calendar.html, to also include the navigation bar. You’ll need to rename them to end with .shtml
    • Modify your navigation bar to link to .shtml pages, not the old .html pages.
    • Make sure your SSI site is working properly before you proceed.
  4. Make some changes to at least some of the "content" pages to improve their organization and usability. All the content previously on the website should be found on the new website

Part 2 - Improved Appearance using Bootstrap (95%)

Before starting on this section, you should review the Bootstrap lecture and some of these references:
  1. Make the new course website you are creating in your Lab07 look better and have improved usability via Bootstrap. A few thoughts:
    • You must use one of the navbar styles provided by Bootstrap. See the references above
    • You can make the pages more visually apealing by converting them to use the Bootstrap styles
    • You can add additional content to the course website
    • For this lab you are allowed to use a template. There are multiple websites online (google it) that will provide you templates for free. If you do use a template, make sure that the template license is either public domain, BSD/MIT/Apache, or Creative Commons (CC0) licensed so that you can legally use it.
    • Aesthetics: look and feel. You will be graded based on your webpage's appearance. It should look clean, refined, and aesthetically appealing. Things should be spaced out appropriately and evenly throughout the page. Colors should match (to the best of your personal matching ability!).

Challenge Problem - Just a bit more (100%)

  1. Create a website that will win the votes of your colleagues and instructor.

General Requirements and Deliverables

  1. Goals: When complete, the IT350 website should exhibit:
    • Improved functionality
    • Improved appearance
    • A consistent look, appropriate for a course website
    • All the content previously found on the course website should still be available on the new website
  2. You are not required to make links to things like the Lab Guidance, etc. work (though you can if you want). These are relative links that would work if those files were added to your website, or if your webpage was substituted for the official IT350 web page.
  3. Final tips:
    • You are not required to add additional comments to course web pages beyond what is present already.
    • If you download any images from the web, you must indicate the source of the image in a comment. (so we can ask for permission to use the image if your website will become public)
    • You must test your website with more than one browser!
  4. Links: Create one link in your top-level IT350.html page under the name 'Lab07', to Lab07/index.shtml
  5. Put a README.txt file in the lab directory. This file should have:
    • *Lab number
    • *Your name and alpha
    • *Collaborations in completing this lab (people, online sources used outside the course website)
    • *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
    • *How long this lab took you
    • Any suggestions to improve the lab
    • Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
  6. All of your files for the website should be in a folder called Lab07 in your public_html/IT350 folder. Your instructor will assume that your web pages are viewable at http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab07/index.html where XXXXXX is your alpha number.
  7. All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
  8. Submit all files to the online submissions system (submit.moboard.com) on or before the due date, this is Lab07. Use the command line submit script and capture the entire contents of the directory, the easiest way to do this would be to cut and paste the following while logged onto the server or a workstation: 

    cd ~/public_html/IT350
~/bin/submit -c=IT350 -p=Lab07 Lab07
    This assumes that the submit script is located in ~/bin/ and is executable.