HTML5 Multimedia Development Cookbook

«»

Displaying comment blocks using the article element

” The <article> element represents a self-contained composition in a document,
page, application, or site and that is, in principle, independently distributable or
reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper
article, a blog entry, a user-submitted comment, an interactive widget or gadget,
or any other independent item of content.” – WHATWG’s HTML5 Draft Standard -

http://whatwg.org/html5

Getting ready

We can certainly make the case for marking up blog comments using the new <article>
element too. In this recipe, we will do exactly that.

How to do it…

Let’s use the new <article> element to mark up a block of blog comments.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
	</head>
	<body>
		<article>
			<header>
				<h3>Comment by:
					<a href="http://dalejcruse.com">Dale J Cruse</a></h3>
				<p>On <time datetime="2010-11-29">November 29, 2010</time></p>
			</header>
			<p>The is the first paragraph of my comment</p>
			<p>The is the second paragraph of my comment</p>
			<footer>
				<p><small>Creative Commons Attribution-ShareAlike
				License</small></p>
			</footer>
		</article>
		<article>
			<header>
				<h3>Comment by:
					<a href="http://dalejcruse.com">Dale J Cruse</a></h3>
				<p>On <time datetime="2010-11-29">November 29, 2010</time></p>
			</header>
			<p>The is the first paragraph of my comment</p>
			<p>The is the second paragraph of my comment</p>
			<footer>
				<p><small>Creative Commons Attribution-ShareAlike
				License</small></p>
			</footer>
		</article>
	</body>
	</html>

How it works…

“Wait a minute,” you are thinking. “A blog comment isn’t an <article>!” you exclaim. Not so
fast, buster. If we analyze the components of a blog comment, we’ll find the same elements
common to other <article>s.

There’s more…

While we’re at it, let’s check out that new <small> element in the previous <footer>s.
Previously, <small> was a presentational element that denoted physically small text. Not
anymore! Now <small> has been redefined for use this way:

“The <small> element represents so called ‘small print’ such as legal disclaimers
and caveats.” – WHATWG’s HTML5 Draft Standard –
http://whatwg.org/html5

Blog comments

Since blog comments and their comment feeds can be intended for syndication, there’s even
more reason to use the new <article> element.

Value comments

Comments. They are found in just about any blog worth its readership. No matter if we’re
creating our own sites or our own blog content management systems, we deserve to treat the
code for comments with every bit as much care and attention as we do the actual blog posts
themselves.

Opportunity’s yours

Disqus.com is the online home of the most widely used blog comments plugin. Publishers
can easily incorporate it into their sites without much programming effort. So where does
that leave us? Well, no matter whether you use Disqus or any other commenting system,
somebody had to develop that code, right? It might as well be you!

See also

Josh Duck has created the clever and useful Periodic Table of HTML5 Elements at:
http://joshduck.com/periodic-table.html. There, Josh smartly groups
categories of similar new elements like Root element, Text-level semantics, Document
sections, and more!

Adding fonts dynamically with @font-face

Not so long ago, we designers and developers were limited to only a select few “web safe”
fonts for text. If we wanted to display text in a font face that wasn’t considered “safe,” we made
an image out of it. It was dumb, but we had no other choice. Now we do. The font has finally
been liberated on the web.

Good typography is essential to any design, and the new @font-face ability lets us embed fonts
for browsers to use. Though technically not part of HTML5, this CSS3 property is much too
important not to address.

Getting ready

For this recipe, let’s find a fun font and embed it as a simple logo. Below you’ll find links to
several great sites to find both free and paid fonts for web use. For this example, let’s look
at a previous version of the author’s personal portfolio at http://dalejcruse.com.

How to do it…

There are several methods to display custom fonts on the web, but we’re going to examine
and use the bulletproof way to get it working in modern, legacy, and even mobile browsers.

Let’s head over to the @Font-Face Generator at

http://fontsquirrel.com/fontface/generator.

Using the @font-face Kit Generator wizard walks us through the process of uploading a font
(“League Gothic” here) and ensuring that the font you use is legally authorized for use.

Once uploaded, the generator will convert your font to multiple file formats. Download all of
these, and save them to the server where you want them to be displayed. All that’s needed is
two bits of styling:

  1. Referencing the @font-face files
  2. Assigning the new font to the element we want to use.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
		initial-scale=1.0">
		<style>
			@font-face {font-family: 'LeagueGothic'; src:
			url('fonts/league_gothic-webfont.eot'); src: local(''),
			url('fonts/league_gothic-webfont.woff') format('woff'),
			url('fonts/league_gothic-webfont.ttf') format('truetype'),
			url('fonts/league_gothic-webfont.svg#webfontdrbhz05x')
			format('svg');
			h1 {font-family: 'LeagueGothic'; font-size: 124px;
			line-height: 124px; margin: 355px 0 -25px 0;
			text-transform: uppercase;}
		</style>
	</head>
	<body>
		<h1>Dale J Cruse</h1>
	</body>
	</html>

Dale J Cruse

And boom goes the dynamite.

How it works…

The new @font-face ability allows us to save font files in various formats on our web servers
and use CSS to reference them for display. In this way, the font files become another asset,
just like an image.

There’s more…

Browsers use their own proprietary font files for display on the web. By downloading and
referencing each of the possible formats, we have ensured that modern browsers like Firefox,
Chrome, and Safari, as well as legacy browsers like Internet Explorer and even mobile
browsers can display our intended fonts.

Don’t steal

Ensure that the font(s) you are using has been legally authorized to be used for online display.
Stealing isn’t cool.

Firefox note

Remember to store the fonts you want to use on the same server as your unique domain.
Some browsers (I’m looking at you, Firefox) do not like it when you try to reference fonts
across domains.

Paul Irish rocks

In the spirit of giving credit where it is due, the CSS method we used to call various
locally stored font files was developed by Paul Irish in his post “Bulletproof @font-face
Implementation Syntax” at: http://paulirish.com/2009/bulletproof-font-faceimplementation-
syntax.

See also

There are some terrific sources to find both free and paid fonts on the web, including:

  • Fontdeck – http://fontdeck.com
  • Kernest – http://kernest.com
  • The League of Moveable Type – http://theleagueofmoveabletype.com
  • Typekit – http://typekit.com
  • Typotheque – http://typotheque.com/fonts
  • Web Fonts – http://webfonts.fonts.com
  • Webfonts.info – http://webfonts.info
  • Webtype – http://webtype.com

Adding drop-shadow effects to fonts

Once upon a time, it seemed like web designers and developers added drop shadows to
every visual element they could. It was almost like they were getting paid by the drop shadow.
Luckily that time has come and gone. Today, only the most fashionable designers and
developers know to add drop shadows very sparingly Let’s take a look at how to do that
using only CSS.

Getting ready

To get started, let us use the previous example, and simply add a very subtle drop
shadow to the headline font from a previous version of the author’s portfolio site at

http://dalejcruse.com.

How to do it…

In this recipe we will use some careful styling to add a tasteful drop shadow effect to some of
our text.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
		<style>
			@font-face {
				font-family: 'LeagueGothic';
				src: url('fonts/league_gothic-webfont.eot');
				src: local(''), url('fonts/league_gothic-webfont.woff')
				format('woff'), url('fonts/league_gothic-webfont.ttf')
				format('truetype'), url('fonts/league_gothicwebfont.
				svg#webfontdrbhz05x') format('svg');
			}
			h1 {font-family: 'LeagueGothic'; font-size: 124px;
			line-height: 124px; margin: 355px 0 -25px 0;
			text-transform: uppercase; text-shadow: black 1px 1px 0;}
		</style>
	</head>
	<body>
		<h1>Dale J Cruse</h1>
	</body>
	</html>

How it works…

The text-shadow CSS attribute displays a subtle black drop shadow one pixel to the right
and one pixel underneath our text in modern browsers. Though very subtle on the author’s
portfolio site, the effect can be seen much more dramatically if we set the background and
font color both to white.

With the background and text color both set to white, all we see here is the black drop shadow
one pixel to the right and one pixel underneath. Since IE does not support text-shadow, this
would be rendered as pure white in that browser. That’s probably not what you want.

Dale J Cruse

There’s more…

In addition to absolute color values like “black,” we can also use hexadecimal values like
“#000″ or even RGBA values with a semi-transparent alpha channel.

Browser support

Modern browsers like Chrome 2+, Firefox 3.1+, Opera 9.5+, and Safari1.1+ all support the
text-shadow CSS property. This song is pretty worn out by now, but suffices to say Internet
Explorer does not support it.

With great power…

Just because the ability to add drop shadows to text using only CSS exists, don’t consider it
a license to go and abuse it. We don’t want to revert to the ugly days of the web when drop
shadows were everywhere. Instead, use your powers for good.

A plea to all readers

For the sake of readability, consider applying drop shadow effects only to headline or header
fonts. Applying it to body text becomes tiresome and unreadable. And you do not want to be
the person known for overusing and killing drop shadows all over again.

See also

Google released the WebFont Loader open-source JavaScript library to better control
the way browsers load web fonts. Check out the super-simple implementation at:

http://code.google.com/apis/webfonts/docs/webfont_loader.html.

Applying gradient effects to fonts

Let ‘s take our previous example and add one more layer to it: A subtle
gradient effect.

Getting ready

The only other extra thing we’ll need is a portable network graphics image that we can
reference via our CSS.

How to do it…

In this recipe we will add a .png image file with alpha transparency to create a slick gradient
effect on our headline.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
		<style>
			@font-face {font-family: 'LeagueGothic'; src:
				url('fonts/league_gothic-webfont.eot'); src: local(''),
				url('fonts/league_gothic-webfont.woff') format('woff'),
				url('fonts/league_gothic-webfont.ttf') format('truetype'),
				url('fonts/league_gothic-webfont.svg#webfontdrbhz05x')
				format('svg');
			}
			h1 {font-family: 'LeagueGothic'; font-size: 124px;
			line-height: 124px; margin: 355px 0 -25px 0;
			text-transform: uppercase; text-shadow: black 1px 1px 0;
			position: relative;}
			h1 span {background: url(gradient.png) repeat-x; display: block;
			height: 124px; position: absolute; width: 100%;}
		</style>
	</head>
	<body>
		<h1><span></span>Dale J Cruse</h1>
	</body>
	</html>

Notice that extra <span> in our <h1> tag. That is where we have put our image.

How it works…

By simply layering an image with some transparency over our text, we have subtly altered the
text to appear to have a gradient.

There’s more…

Your imagination is the only limitation to this effect. You could create fades, metallic effects,
vertical or horizontal stripes—even zebra stripes!

Careful there

Remember: Just because you can, does not mean you should. Use text
gradients sparingly. Please.

See also

For a beautiful example of a gradient effect over a font, check out the header on Alex Clarke’s
college project about Enceladus, one of Saturn’s moons at: http://hagablog.co.uk/
demos/enceladus/index.html. While you’re enjoying the visual design, don’t forget to
check out the source code to see Alex’s very well documented HTML5 code.

Annotating visual elements using the figure and figcaption tags

“The <figure> element represents some fl ow content, optionally with a caption,
that is self-contained and is typically referenced as a single unit from the main
fl ow of the document. The element can thus be used to annotate illustrations,
diagrams, photos, code listings, etc, that are referred to from the main content
of the document, but that could, without affecting the fl ow of the document,
be moved away from that primary content, e.g. to the side of the page, to
dedicated pages, or to an appendix.” – WHATWG’s HTML5 Draft Standard -

http://whatwg.org/html5

“The first <figcaption> element child of the element, if any, represents the caption
of the <figure> element’s contents. If there is no child <figcaption> element, there
is no caption.” – WHATWG’s HTML5 Draft Standard
– http://whatwg.org/html5

Getting ready

You have seen it a million times: An image with some sort of text caption underneath. Usually
it is on the side of a page. Previously, we’d just mark that up as an image with some sort of
text container under it. Now, we have the more semantically rich new <figure> element to
handle it for us. Let’s find out how.

How to do it…

There are two ways to achieve this recipe:

  1. Without a caption
  2. With a caption

First let’s try it without the caption:


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
	</head>
	<body>
		<figure>
			<img
				src="https://packtpub.com/sites/default/files/imagecache/
				productview/2688OS_MockupCover.jpg"
				alt="Inkscape 0.48 for Web Designers">
		</figure>
	</body>
	</html>

Now let’s add that caption:


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
			initial-scale=1.0">
	</head>
	<body>
		<figure>
			<img
				src="https://packtpub.com/sites/default/files/imagecache/
				productview/2688OS_MockupCover.jpg"
				alt="Inkscape 0.48 for Web Designers">
			<figcaption>Inkscape 0.48 for Web Designers</figcaption>
		</figure>
	</body>
	</html>

Having one caption for multiple images is easy too. Notice multiple img tags and just one
<figcaption>.


	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]><script
			src=http://html5shiv.googlecode.com/svn/trunk/html5.js>
		</script>[endif]-->
		<meta name="viewport" content="width=device-width,
		initial-scale=1.0">
	</head>
	<body>
		<figure>
			<img
				src="https://www.packtpub.com/sites/default/files/imagecache/
				productview/2688OS_MockupCover.jpg"
				alt="Inkscape 0.48 for Web Designers">
			<img
				src="https://www.packtpub.com/sites/default/files/imagecache/
				productview/bookimages/0042_MockupCover_0.jpg"
				alt="jQuery 1.4 Reference Guide">
			<figcaption>Recent bestsellers from Packt Publishing</figcaption>
		</figure>
	</body>
	</html>

How it works…

A bit of styling makes that <figcaption> display beneath those images in the new
<figure> element.

There’s more…

Remember that the new <figure> element is used for inline content that you want to display
to the side of its corresponding main text.

Grouping’s good

The new <figure> element can contain text, images, audio, video, illustrations, diagrams,
code listings, and just about anything else that deserves to be grouped together aside from
the primary content.

Semantics are valuable too

Inline content with captions occurs all the time in books, newspapers, and magazines. Since
some of the earliest days of the web, we have been able to accomplish the same thing, but
now the new <figure> element gives us a much more semantic “hook” to style instead of
resorting to class names.

<figure> vs <aside>

So what is the difference between <figure> and <aside>? We should use the new
<figure> element for essential content whose position is not important. The new <aside>
element, however, is for content that is related but not essential. Are we splitting hairs?
Maybe. But you are the kind of web developer who lives and dies by the details, right?

See also

For an even more detailed description of how HTML5 differs from all previous versions of
HTML, see the Wikipedia entry at: http://en.wikipedia.org/wiki/HTML5.

«»

Comments

comments

Pages: 1 2 3 4

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better