/project2-mediaRichSinglePgSite

Media rich, single page website

Primary LanguageHTML

KNOWN ISSUES:

  • Sidebar images can overflow bottom of screen as horizontal becomes wider.

TODO:

  • Better spacing of the sidebar images
  • Give Images a function
    • Make all non-selected images translucent, becoming dominant and opaque when scrolling down. Also allow clicking to auto-scroll.
  • Use modernizr
  • Use flexbox

IMAGE CREDITS:

Project Two: Media-Rich Single-Page Site Due March 21, 11:59pm CT

Single-page sites have seen a resurgent interest in recent years, particularly for showcasing products, services, or an entire company. See One Page Love for a gallery of examples. This project requires you to engage in well-crafted, mobile-first responsive web design with careful, bandwidth-friendly treatment of rich media elements as well as responsive images for traditional and high-DPI/“retina” screens. You will use the site to tell the story of a particular company, product, or organization, and implement elements of your onboarding project (Project One). Alternatively, you may use this project to build a one-page site for that tells your own professional story, perhaps a GitHub user page at .github.io.

By engaging in storytelling, you should think both about how the text content of a site tells a story, but also how image, audio, and video also helps to tell a story. As we will see in the remaining projects in class, good HCI is also good story-telling. It’s a story that users/readers can insert themselves into. This project invites you to get even stronger in your HTML, CSS, and JavaScript skills, while also thinking about techniques and strategies to get a specific group of people to want to read all the way through a page. Project Goals

Design and execute a progressively enhanced page focused on system

users and tasks Write valid HTML5 and CSS, and error-free JavaScript Apply design principles including color/material, typography, accessible media, and grid-based design Use Modernizr or another lightweight feature-detection script for implementing edge CSS technologies (with appropriate fallbacks for lesser browsers) Write compelling text content; capture images, audio, and video and prepare them for the web Prepare a touch-friendly, mobile-first responsive web design Engage in agile, iterative Web design and development, supported by version control Experiment with design and interaction patterns for pleasing user experience

Deliverables & Milestones

A video presentation of your work in progress, hosted on YouTube,

Vimeo, or another similar service and posted to Basecamp. It should include a world-viewable URL of your project, plus the URL to your GitHub repository. Include in the text of your post one or two things you would like feedback on from the instructor and other students in the class (due no later than March 4). Substantive comments critiquing at least three other student projects. (by March 7, 11:59pm CT) An email to the instructor containing the projects two final deliverables: The https:// link to your project’s GitHub repository (email URL to instructor by March 21, 11:59pm CT) A 4-5 sentence self-critique of your project and your progress in class to this point (include in email to instructor by March 21, 11:59pm CT)

Requirements

Valid, well-formed HTML5 and CSS
One single HTML file, and one single CSS file
JavaScript that is loaded unobtrusively (no JavaScript event

attributes in your HTML, in other words) and throws no errors HTML-based fallbacks for any media elements (image, audio, video) that you include Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks) A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make GitHub repository must contain only the files and commits from this project