Current Assignments:
> HW-03
> P2 Peer Review (Submission)

Due:
Wed Oct 18 @ 11:55PM
Previous module:
Next module:

Topic Homework Assignment:
HW-03: “Managing Media”

These are the requirements for your homework this Topic. You should go through all of the materials before beginning, so these requirements make sense.

/web-dev-hw/project-2/

Continue your Project 2 by creating two pages:

  1. In Atom, create a new file and save it in /project-2/pages as about.html.
  2. Create another new file and save it in /project-2/pages as more-info.html. Project 2 Directory in Atom
  3. Remember to use proper !Doctype, HTML root, meta, <head> and <body> elements on these pages!

index.html

Go back to your Project 2 index.html. At the bottom of your content, add a relative link to your about.html and more-info.html. Your links may look something like this:

HTML
<!-- about.html Examples -->
<a href="./pages/about.html">About Me</a>
  <!-- Or -->
<a href="./pages/about.html">About the Project</a>

<!-- more-info.html Examples -->
<a href="./pages/more-info.html">Want to learn more?</a>
  <!-- Or -->
<a href="./pages/more-info.html">Watch the Video! / Hear the Sounds!</a>

about.html

This page is - you guessed it - all about you or the Instructable project in general (its purpose or goal, ect). This page will utilize:

  • IDs, classes, and/or divs.
  • Self-hosted media file.
  • An iframe with Google Map

Requirements

Markup

Your page needs to inlcude 3 paragraphs (<p> elements) about you or your site. Describe your process, why you chose this material for your Instructable, or describe your own creative process. These do not have to be long paragraphs.

The content of your page is up to you, but needs to include:

  1. Unique <id> attributes for important elements.
  2. Include metadata (this should be fairly similar across all your site pages).

(Use more <div> and class="" elements if you’re feeling adventurous!)

Self-Hosted Video or Audio

You need to include a self-hosted video or audio selection on your site. This should be something personal to you or your project contents. A song to listen to while working, or a short insipiring video; I leave it up to you!

  • If using a video file, you must provide a .mp4 and open-sourced version (most likey a .webm or .ogg).
  • If using an audio file, you must provide a .mp3 and open-sourced version (most likey an .ogg).

Additionally this embed should include at least a heading, and possibly a description (if needed).

Can't find any media that works?
Feel free to use these .mp4 and .webm files of the animated Media Arts logo: Download Zip File

Contact Me

Conclude your page with a Contact section. This can be fictional or a real address, but it shouldn’t be where you live. You can use the University’s address if you like:

MediaArts@umontana.edu
University of Montana
School of Media Arts, McGill Hall Rm 224
32 Campus Dr
Missoula, MT 59812

To include this, you should:

  1. An e-mail link (don’t forget mailto:!)
  2. Wrap your physical address in the <address>...</address> element we discussed in Semantic Markup.
  3. Use an iframe to embed a Google Map showing your location choice.

This page will need relative links:

  1. Back to the index (“home page”).
HTML
<ul>
  <li><a href="../index.html">Back to Home</a></li>
</ul>

more-info.html

This page will be relatively simple and contain a third-party hosted audio or video (hosted on SoundCloud, YouTube or the like). It only needs:

  • A heading and short description.
  • Properly embeded audio or video file. Revisit the “Media-Hosting” page for help.

Requirements

Markup

Include metadata (this should be fairly similar across all your site pages).

Third-Party Hosted Video or Audio

Find an outside video or audio file that you feels enhances your project. This could be anything: a TV commercial, podcast, video from professional chefs, artisans, or educations… Whatever! It does not have to be long, either. Simply functional.

Additionally this embed should include at least a heading, and possibly a description (if needed).

This page will need relative links:

  1. Back to the index (“home page”).
HTML
<ul>
  <li><a href="../index.html">Back to Home</a></li>
</ul>

{ TODO: }

  1. Use the previous pages of the Topic to complete you homework assignment.
  2. Finish documenting your Project’s progress in your README.md!
Previous section:
Next section: