Web Site Design & Implementation IGME-230

Assignments

  1. Project 1
  2. Project 2
  3. Project 3
  4. Project 4

Project 1

Overview

You will create a web presence on people.rit.edu that will link to the projects you will create in this course.

The site (one page) must include a picture of yourself, your name, some information about yourself, and placeholders for links to your midterm and final projects. Do your best to use the principles of design you learned in IGME-110 or elsewhere. I want to see college level work and the best you can do (that does not mean putting in every type of bell and whistle you can imagine; keep it simple and clean).

** There are 3 HTML5 page templates to choose from up in mycourses.rit.edu, and another 5 templates from the book. Use one of these or build your own **

Requirements

  • Location: The page will be named index.html and will be located in a separate 230 directory created by you on gibson.rit.edu. This means that the location of page on the web will be http://people.rit.edu/abc1234/230/index.html (where 'abc1234' is your RIT id)
  • Required Content:
    • A recognizable picture of you or your Avatar. This picture should be in a web friendly image format (gif, jpg, or png) and of appropriate resolution for the web.
    • Your full name
    • Information about you. This could be any or all of the following: your major, home town, coursework, interests, hobbies, etc.. Write eight paragraphs (minimum), and each paragraph should have a minimum of 3 sentences. Put this in a <div> or <section> tag.
    • Placeholder links for class projects, which are: your portfolio (projects 2 and 4) and web app (project 3). Put this in a <div> or <section> tag.
    • An area for class exercises. Put this in a <div> or <section> tag.
    • Optional: List any portfolio works or games you’ve done and links to them (if they’re on the web). Put this content is a separate <div>, or in an <aside>.
  • HTML Markup (mechanics) - The HTML on the page will be valid, clean, and accurate:
    • valid means that it will meet the current HTML standard. Run your page through the HTML validator at http://validator.w3.org to be sure that it meets the standard.
    • clean means that your HTML source code is hand-coded by you (no WYSIWYG editors allowed) with enough white space and indenting to make it easy to read and debug.
    • accurate means that you chose the proper semantic tags to mark up your content. For example, list items are represented by <li> tags, not <br />tags. Spacing should be accomplished by using CSS styles rather than empty <p> tags, and so on.
  • HTML5 Markup (optional):
    • <header> , <section> , <article>, and <footer> tags.
  • CSS - Cascading Style Sheet - selectors and rules will be used for formatting and positioning:
    • The style rules will be located in an external style sheet. See Applying CSS if you are not sure how to do this.
    • There will be at least 5 style declarations (rules) in your document.
    • Here is an example of a style declaration:
      p{
       color:green;
       text-indent: 1em;
       font-family: tahoma,sans-serif;
       font-size: 90%;
      }
    • At least one of your style declarations will utilize a class selector .
    • At least one of your style declarations will utilize a id selector.
    • Link to at least one Web Font - www.google.com/fonts is one good source.
  • Design:
    • College Level Work
    • Professionally styled up so that so that the results are pleasing and in no way resemble the templates or in-class exercises. You may only use one of the templates that I have provided up on mycourses, or one of your own creation. The page design will be well thought out with appropriate organization, spacing, colors and fonts
    • Design principles (e.g. C.R.A.P.) applied appropriately.
    • Text should be of sufficient size and contrast to be easily readable
    • A distinctive Web Font will be used for the header: http://www.google.com/webfonts
  • Responsive Design:
    • At a minimum, you must support screen sizes equal to or less than max-width: 480px
    • Your design should be re-formatted to support these smaller screens. Changing font-size, margins, moving side bars, hiding elements, and ??? are all options
  • Other requirements:
    • HTML tables used only for tabular data, not page layout.
    • No Flash content
    • Site is fully accessible even without graphics enabled

Due Dates : See dropboxes. Deliverable-A: Prototype with required content, valid markup, and photo. Deliverable-B: Final Version.

Grading: Reminder - 'A' -level work means doing college-level work that goes beyond what we did in class. But make sure that this is 100% your work - no CSS templates allowed (other than the ones provided in mycourses)!

Submission: Post to gibson - be sure to test that it works in a web browser. Then zip up ALL your files and post to mycourses dropbox. Type URL into comments field of dropbox.

Project 2 - Web Portfolio

Overview

Your Portfolio! You are building a "Hire Me Portfolio" where you showcase your professional accomplishments. The purpose of the site is to display your relevant work and experiences, and enable interested employers to contact you.

Your target audience is potential employers. This site should convince them you deserve an interview for a coop or full-time job in your field.

The focus of project 2 is to get as much of your portfolio content as possible online in an organized fashion. The site design should be clean and neat. The navigation system should be straightforward and intuitive to use.

Required Content: Most of the "10 Steps" in the article linked below should be reflected in the content and design of your site. Examples (see article):

  • Logo
  • Tag Line
  • Portfolio
  • About Me
  • Contact
  • ...

What this site is Not

This site is NOT a personal home page (we did that for project 1). Keep the tone and content of the site focused on showcasing you and your skills in such a way to get a job.

Required Pages

  1. Location: Place the site in its own portfolio directory within your 230 directory (230/portfolio) with its own index.html file. The link will be: http://people.rit.edu/abc1234/230/portfolio/ - where abc1234 is replaced with your id.
  2. The site should have a minimum of 8 pages (not including index.html, notes.html and your styles.css page).
  3. index.html is the home base of your portfolio. From here employers should be able to quickly learn about you and access the other pages on your site.
  4. notes.html is where you will cite any images, scripts, or CSS styles you borrowed.
  5. styles.css will contain the majority of the CSS style rules for your site. You are also allowed to add <style> tags to the top of pages for document specific styles.
  6. The other 8 (or more) pages will each highlight a piece of your current body of work. Each page should have one of more images as well as descriptive text. Don't think you can talk about anything? Here are some ideas:
    • Projects you built as part of a class. Be sure to give credit if you were part of a group.
    • Projects you worked on for an employer
    • Projects or larger HW assignments created for your courses
    • Projects created in Summer Camps/Summer Seminars
    • Devote a page to listing the graphic design tools with which you are comfortable
    • Devote a page to listing the programming languages/tools you know
    • A hobby page as long it's related to the job you are interested in (ex. LARPing, Art, Music)
    • Obviously, anything digital or otherwise you've created on your own time (posters, board games, computer games, simulations, music, videos, etc...)
    • ... gamers, see the "Game Design Portfolios - is there such a thing" link below for more ideas what to include.
  7. Optional: a link to your printable old-school resume in PDF form. (I won't be grading it, but you should have something).

Site and Page Organization

  • Each page will have a consistent Global Navigation System. This should be at the same place on every page (usually the top or left side), and allow the user to directly access the most important pages on the site. This navigation system will most likely have 3-5 categories (links).
  • Divide the content up into appropriate "chunks" of information, and design the site in a way that enhances the presentation of the content. This means you need to think about how to break it up, how to label it, how to navigate through it, keeping in mind who your audience is. I will be evaluating the quality of your content, as well as your information organization and navigation.
  • Page content should be designed for scanning. Break the page content into meaningful chunks using HTML semantic tags, paragraphs, lists, inline links, and descriptive sub-headings. See just about any wikipedia page for an example of this: http://en.wikipedia.org/wiki/Atari_Portfolio

Other Requirements

  • HTML Markup (mechanics) - The HTML on the page will be valid, clean, and accurate:
    • valid means that it will meet the current HTML standard. Run your page through the HTML validator at http://validator.w3.org to be sure that it meets the standard.
    • clean means that your HTML source code is hand-coded by you (no WYSIWYG editors allowed) with enough white space and indenting to make it easy to read and debug.
    • accurate means that you chose the proper semantic tags to mark up your content. For example, list items are represented by <li> tags, not <br />tags. Spacing should be accomplished by using CSS styles rather than empty <p> tags, and so on.
  • HTML5 Markup:
  • CSS - Cascading Style Sheet - selectors and rules will be used for formatting and positioning:
    • The style rules will be located in an external style sheet. See Applying CSS if you are not sure how to do this.
    • There will be at least 5 style declarations (rules) in your document.
    • Here is an example of a style declaration:
      p{
       color:green;
       text-indent: 1em;
       font-family: tahoma,sans-serif;
       font-size: 90%;
      }
    • At least two of your style declarations will utilize a class selector .
    • At least two of your style declarations will utilize a id selector.
    • Link to at least one Web Font - www.google.com/fonts is one good source.
  • Design:
    • College Level Work
    • Two or three column CSS design (using float) with a header.
    • Professionally styled up so that so that the results are pleasing and in no way resemble the templates or in-class exercises. The page design will be well thought out with appropriate organization, spacing, colors and fonts
    • Design principles (e.g. C.R.A.P.) applied appropriately.
    • Use CSS3 features to enhance the site such as box shadows, text shadows, and rounded corners as appropriate.
    • Text should be of sufficient size and contrast to be easily readable.
    • A distinctive Web Font will be used for the header: http://www.google.com/webfonts
  • Responsive Design:
    • Support screen sizes equal to or less than max-width: 480px
    • Your design should be re-formatted to support these smaller screens. Changing font-size, margins, moving side bars, hiding elements, and ??? are all options
    • There must be a mobile friendly navigation system available at smaller screen size (like in the Darth exercise).
  • Other:
    • HTML tables used only for tabular data, not page layout.
    • Site is fully accessible even without graphics enabled
    • Performance! Images are optimized to be no larger (file size) than necessary.

Helpful Reading

Grading Rubric

Content
Quality of writing/presentation
Organization ("chunking") of content
Is the content going to impress your target audience? Will it get you a job interview in your chosen field?
Page Design and Navigation
Design principles (C.R.A.P. etc). "Beautiful" is best, but a "clean and conservative" look is acceptable.
Intuitive Navigation
"You are here" cues
Does the design give a good first impression?
Can a potential employer easily find what they need?
Do the images load quickly?
The HTML5 on the page will be valid, clean, and accurate
Valid means that it will meet the HTML5 standard and use the HTML5 Doctype. Run your page through the HTML validator at http://validator.w3.org to be sure that it meets the standard.
Clean means that your HTML source code is hand-coded by you (no WYSIWYG editors allowed) with enough white space and indenting to make it easy to read and debug.
Accurate means that you chose the proper semantic tags to mark up your content. For example, list items are represented by <li> tags, not <br />tags. Spacing should be accomplished by using CSS styles rather than empty <p> tags, and so on. Be sure to utilize the HTML5 semantic tags mentioned above.
CSS
Extensive use of CSS styles to alter the layout, positioning, fonts, colors, and spacing of your page elements.
Properly linked external style sheet
CSS properties for text formatting, padding, and margin
CSS floating for layout
Layout is responsive to small screened devices, and has a mobile specific navigation system.
At least one embedded web font. See http://www.fontsquirrel.com/fontface or Google Fonts
Note: Your CSS does NOT need to validate. Go ahead and play around with CSS3 and even some of the -webkit/-moz/-o/-ie experimental CSS.
Validation
All HTML pages must validate to HTML5. Exception: Older tags that are used to display Flash portfolio content.

Submission

Due Dates : See dropboxes. Deliverable-A: Prototype with thoughtful CSS layout, index.html, notes.html, and at least 4 content pages (more than just placeholder content is required), and the global navigation system on every page. Deliverable-B: Final Version. Zipped up and posted to dropbox, and posted to the web at: http://people.rit.edu/abc1234/230/portfolio/

Grading: Reminder - 'A' -level work means doing college-level work that goes beyond what we did in class. But make sure that this is 100% your work. Using templates is allowed if #1) You give credit on notes.html, and #2) You heavily rework colors, fonts, spacing, and so on.

Submission: Post to gibson - be sure to test that it works in a web browser. Then zip up ALL your files and post to mycourses dropbox, and type URL into comments field of dropbox. Link to the main portfolio page from your 230 home page (project 1)

Project 3- HTML5 Web App of Awesomeness!

Constructed in 3 phases. See below for details. Need a name for your awesome web app? Look here.

Overview and functional requirements

1) Your team's mission is to create a useful and visually rich single-page HTML5 application that utilizes a web service (JSON based), and showcases your mastery of modern web technologies. You will be evaluated on your creativity in design, the quality of the experience you create, and the soundness of your programming, as described below.

2) The exact web services used are up to you, but music and game related APIs have been popular. Other examples include an application that allows users to visualize USGS Earthquake data in google maps, search for book information, search specialized dictionaries, see Woot deals, view nearby concerts (www.last.fm/api), nearby restaurants (Yelp), crime, or nearby gas stations. For a list of available web services, see www.programmableweb.com/apis for 1000's of API's - most free to use with sign-up. Google alone has 67 API's under its API console - sign up at developers.google.com and then check out their API console.

3) Note: This is a web programming class so I expect you to "roll your own" when it comes to adding web service capability to your pages. That means that JavaScript "widgets" that display (for example) twitter feeds or the current weather are expressly forbidden. You have the knowledge to write these yourself if you desire this sort of functionality in your project.

4) Ideally the application will run in all modern browsers, but at a bare minimum it must run in Chrome on both Windows and Mac.

Requirements

A. Programming and Functional

  • App utilizes either jQuery.getJSON() method or similar to download JSON-P from a web service.
  • App sanitizes and validates user input prior to contacting web service.
  • App dynamically modifies the ajax query string (based on user input) to change the results returned by the web service.
  • App parses the JSON-P data returned by the web service.
  • App modifies the page DOM in order to display the data in a meaningful way.

B. Design and User Experience

  • The page layout, fonts, and colors will be attractive and professional
  • There will be an eye catching logo done either in a web font, or a bit-mapped image.
  • There are at least 2 ways that the user can input data. You can use text input fields, dropdowns (the <select> tag), radio buttons, sliders and so on.
  • After the user initiates a search, there should be some sort of feedback that something is happening (example: displaying text "Searching for Miley Cyrus Concerts")
  • When the search has completed, the results should be attractively formatted and easy to read.
  • Be sure to handle any common error conditions such as no results being found. Be sure that meaningful feedback is displayed to the user. Note: You will lose points if the professor can "break" your app - so please test it!
  • The app should look good at a wide variety of screen sizes. Be sure to check it at screen sizes other than "Windows Maximized"

C. Code Standards

  • JS Coding Practices:
    • "use strict"
    • variable names begin with a lower-case letter
    • functions are used to group related code to improve code maintainability and reusability
  • Separation of Concerns (here, keeping the "layers" separate):
    • CSS style rules are in external stylesheet(s)
    • majority of JS is in external file(s)
    • no in-line JS event handlers!
  • HTML5
    • HTML semantic tags such as <section>, <article>, <header>, <footer>, and so on must be used
    • The entire page must pass HTML5 validation at http://validator.w3.org

Deliverables

  1. Due: 2nd meeting of week 12 - A photoshop mock-up of web app showing search widgets and an idea of how the results will be formatted, and a document containing:
    • The name of the app.
    • The web service(s) you are using.
    • A description of what the app does, and how the user interacts with it.
  2. Due: 1st meeting of week 13 - A working version of the app. A user should be able to use at least one of the search capabilities of the app. You must also begin to implement the HTML/CSS version of your mockup. This deliverable will be viewed in class so you should have made a good start on your final vision of the project.
  3. Due: 1st meeting of week 14 - Final Version.

Grading

Do the above well and get a B. Want an A? Add some or all of the following:

  • Utilize a second web service in some way. Note: if you are using the Last.fm API, you must utilize a second web service.
  • Let the user know when something is happening. Use a indeterminate progress indicator ("spinner" or "throbber") in addition to text feedback.
  • Animate your UI - jQuery's fadeIn() and fadeOut() methods could come in handy. See your book, jQuery, and jQueryUI for examples and ideas.
  • A fully responsive version like the darth.html page. Be sure to use a media query to support 480px width, and consider other widths as well. See this Stack Overflow post (the second answer).

Attendance

Mandatory until Thanksgiving break:

  • One unexcused absence equals -10% on your individual final Project 3 grade.
  • Two unexcused absences equals "you're off the team" and a zero on your individual Project 3 grade.

Advice from me

  • Work together
  • Start deliverables early
  • Ask for help when you need it

Project 4

Your multi-page web portfolio with jQuery enhancements

Requirements

  1. jQuery:
    • Utilize one show/hide behavior, and one slide behavior somewhere in your portfolio. See Chapter 6 of the "Missing Manual" book for tips on how to do this. Be sure to give me a link to the pages that meet this requirement in the comments field of the dropbox.
    • Create an image gallery - see chapter 7 of the "Missing Manual" book. The gallery should either be similar to the "Photo Gallery with effects" example, or the "Fancy Box" example. Be sure to:
      • utilize your own portfolio images
      • style up the image gallery so it matches your site design and is fully integrated into the site either on an existing page, or on a separate page.
      • have a link to the image gallery somewhere on your site - either as a main navigation item, or linked from your main page.
      • give me a link to the image gallery in the comments field of the dropbox
    • Hint: Don't forget to import jQuery at the top of every page that uses it. Here's the tag you need:
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. .htaccess:
    • A customized 404 error page with at least one image and 5 CSS styles. Look back at our week 13 .htaccess notes for a review of how to do this. Spend some time on the design of your error page - see this article: 60-really-cool-and-creative-error-404-pages for inspiration.
    • A password protected directory in a 230/portfolio/protected folder. We also covered how to do this with .htaccess files week 13. You should give only the professor (acjvks) and yourself access. Be sure to give me a link to this folder in the comments field of the dropbox.

Grading

Full credit will be awarded for college level work - see below for breakdown:

  • 15% - jQuery show/hide
  • 15% - jQuery slide
  • 45% - jQuery Image Gallery
  • 15% - Custom Error Page
  • 10% - Protected Directory

Submission

Due Date: See dropbox on mycourses.
  1. Your project will still be posted at http://people.rit.edu/abc1234/230/portfolio/ - where abc1234 is replaced with your id. Make sure it is there or you will lose points.
  2. ZIP up and post the project to the mycourses dropbox
  3. In the comments field of the dropbox, give a link to the project on gibson, a link to your protected folder, and a link to a non-existent file on your site that will demonstrate your error page.
  4. In the comments field of the dropbox, give the link for the show/hide and slide pages of your portfolio and a description of what the effect is.
  5. In the comments field of the dropbox, give the link for your image gallery.
  6. ** Late assignments will not be accepted **