Week 13 | May 9, 2016

Article & Video Workshop

HTML5

At the end of 2014, HTML5 was officially released. It introduced 30 new tags, a number of which gave media outlets better options for semantic markup.

Before

In order to identify parts of the page that were headers, footers, the article body, etc. we would have to use divs all day long.

  • <div id="article"></div>
  • <div id="footer"></div>
  • <div id="navigation"></div>

After

These IDs that were commonly used have been ported into their own tags for page use for more concise and descriptive markup.

  • <article></article>
  • <footer></footer>
  • <nav></nav>

Other Examples

  • <header></header>
  • <section></section>
  • <aside></aside>
  • <time></time>
  • <figure><figcaption></figcaption></figure>
  • <time></time>
  • <mark></mark>
  • <details></details>

Exercise

Start a directory for your article page and an index.html file inside of it to house your content. Make sure you include the following tags on your page (in addition to your standard setup): header, article, footer. And make sure you have a headline!

Our goal is to start a feature article template, that might look something like this.

HTML5 Video

To prep, start a media directory inside your article directory to house our video files. Download the video files from Slack.

Pre-HTML5, most web video was served via Adobe's Flash. As use of Flash has fallen out of favor and JavaScript took its place, Flash still had a hold on the serving of video (and audio).

Media Tags

Two of the most powerful new tags in HTML5 are the video and audio tags, which allow you to simple define a source and control attributes to serve basic web video.

Video

  • Tag: video
  • Attribute Options: poster, controls, loop, autoplay
  • poster needs a value, the image you want to use as the poster image for the video.
  • The other attributes just need defined in the tag to be set to true.
  • You will get default styling on the controls, which you can change via CSS.

The source

For both video and audio, within each tag, you will need to define source file so they know which video or audio file to play.

The source tag is an inline tag (so no closing tag) that needs the src and type attributes.

File Types

A Note: There are two main types of video file types that we use on the web - mp4 and webm. To make sure that your video works across all browers, it is best to include both file types. Firefox in particular is selective about using webm. (As with everything, this is subject to change.)

Example

<video>
  <source src="your-video-file.mp4" type="video/mp4">
  <source src="your-video-file.webm" type="video/webm">
</video>

Exercise

Using the Greenland video files (or one you've brought) - add a lead video to your page that autoplays and loops. Inspect the page to see what kind of default styles are being added.

Advance Usage

To gain more control over the video element, you can utilize a javascript library, like videojs for even more interactions.

GIT Collab Workshop

Split into groups that you'll be working with the next two weeks to build a small application using a publicly available dataset. For now, let's just get your project files started.

Make sure your README file in your project has a description of your project and your group's names on them.

Assignments

Reading

Finish Article Page

  • Finish styling your article page so it's in presentation condition. Replace or add any content you want using proper HTML5 markup.
  • Create a new git repo (Refesher here) and push your article directory to your new repo.
  • Send me the link in Slack.

Practice

  • Finish 1-9 in Codecademy's Command Line Practice lesson.
  • Do Codecademy's Introduction to Canvas: An HTML5 element that allows you draw on your page using JavaScript.
  • Send screenshots from both lessons via Slack DM.