Adding Fast-Forward and Rewind Buttons with HTML5

Yes, it’s back to adding buttons I’m afraid. But you’re a dab hand at adding them by now, so I won’t need to tell you what to do until you get to the JavaScript stage.

Let’s define the buttons and throw in the function names for the onclick events because you now know what’s what:

<button id=”rewind” title=”reverse” onclick=”changePlaybackSp
eed(‘-’);” >&laquo;</button>
<button id=”ffwd” title=”fast forward” onclick=”changePlaybackSp
eed(‘+’);” >&raquo;</button>

You’ll use the HTML entities &laquo; and &raquo; to mimic the typical symbols you find on such buttons: « and » respectively.

Notice that the name of the function you’ll define is changePlaybackSpeed(). The attribute that you’ll change to make this work is the playbackRate attribute that you encountered in Table 5.1.

There is a caveat though: Currently, only the WebKit-based browsers, Safari and Chrome, support the playbackRate attribute. Therefore, the only way you can sort of mimic the intended functionality on other browsers is to alter the video’s currentTime attribute, moving it either forward or backwards:

function changePlaybackSpeed(direction) {
     if (video.playbackRate != undefined) {
          if (direction == “-”) video.playbackRate -= 1;
          else video.playbackRate += 1;
     }
     else {
          if (direction == “-”) video.currentTime -= 1;
          else video.currentTime += 1;
     }
}

If video.playbackRate is defined, you check the direction parameter passed in—again “-” for back and “+” for forward—and decrease or increase playbackRate accordingly. If the playbackRate is 0, the video is effectively paused and playback stops. Otherwise, you move the video’s currentTime backwards or forward by 1.

TIP: Although Safari and Chrome support the playbackRate attribute, they work in different ways. Both support the incrementing of the parameter to fast forward, but Chrome doesn’t support rewinding. Safari on the other hand actually starts to play the video backwards, right to the start.

Your simple but slightly more awesome than it was at the start of the chapter media player now has a full set of rather grey but functional buttons and a working progress bar (Figure 5.7).

With a bit of jiggery pokery with CSS, you can style the player to your taste and achieve what you see in Figure 5.8 or perhaps something better.

Just when you thought you were finished with this simple media player, you’ll make one final addition to increase its awesomeness—progress bar seek functionality.

NOTE: The code for this styled player and for the unstyled player is available on the website at www.html5multimedia.com.

Creating articles and sections with HTML5

If you write for a living, as I do, you learn to organize content into chunks, and sub-chunks, concepts and sub-concepts, ideas and more detailed ideas, and so on. The basic rule for organizing content in this way is that if you create a sub-section, you have to create two sub-sections. Otherwise, there is no point in creating a sub-section.

In line with our recurring theme of the unity between content and design in HTML5 layout, content in HTML5 pages (where it has to be broken down) is broken down into articles. Moreover, where there is a need for distinct sub-sections within an article, those sub-sections are sections.

As you create a CSS file to match your HTML layout elements, you might well assign specific formatting to articles, and to sections. For example, you might choose to indent section content, or place a unique background behind it. In the following example, article content is set off with a unique background and text color, and within articles, sections are indented.

The code for the <article> and <section> elements in the preceding illustration, including placeholder text and headings is:

<article>
   <h3>First article</h3>
   <p>First article content ....</p>
   <p>more content....</p>
   <section>
        <h3>1st section heading</h3>
        <p>1st section content</p>
   </section>
   <section>
        <h3>2nd section heading</h3>
        <p>2nd section content</p>
   </section>
</article>

Or… you might not apply specific CSS rules to articles and sections, and simply wrap content in the <article> and <section> elements for content organizing purposes, while relying on the <body> tag, the <p> (paragraph) tag, or custom class styles that you define in Dreamweaver for formatting article and section content.

Using Comments to Make Code More Readable

To round off this chapter, you learn about another basic feature of PHP: comments . A comment is simply text that is ignored by the PHP engine. The purpose of comments is to let you add messages to yourself (and other programmers) that explain what your code does. It ’ s always a good idea to add comments to your code, even if you ’ re the only programmer working on it. Sometimes code that makes sense when you write it can seem as clear as mud in three months ’ time, so comments can really help!

PHP supports single - line comments and multi - line comments. To write a single - line comment, start the line with either two slashes (//) or a hash symbol (#). For example:

// This code displays the current time
# This code displays the current time

To write multi - line comments, start the comment with a slash followed by an asterisk (/*) and end the comment with an asterisk followed by a slash (*/), as follows:

/*
This code displays the
current time in a nice,
easy-to-read format.
*/

So you might comment the PHP code in the hello_with_time.php script like this:

< ?php
// Get the current time in a readable format
$currentTime = date( “g:i:s a” );
// Display greeting and time to the visitor
echo “Hello, world! The current time is $currentTime”;
? > 

What's CSS1, CSS2 (2.1) and CSS3

CSS1

CSS has been around for quite some time. In fact, CSS1 reached Recommendation level back in December of 1996, which means it began development some time before that. Compared to what designers do with CSS today, CSS1 is quite simple and somewhat limited. But it started web design on its way to using CSS to do some vital positioning and formatting tasks, especially for

• Backgrounds, margins, borders, and the padding of containers
• Element attributes such as text color, typefaces, word, letter and linespacing
• Many other features unsupported (or sorely lacking) in simple HTML and its cumbersome reliance on tables

Although it took some time to catch on, CSS1 brought a lot of options, if you will, to the HTML table. But we really didn’t start to see a major shift to CSS until CSS2. In fact, it wasn’t until the release of IE 5.0 for Mac in March of 2000 that any browser supported better than 99 percent of the CSS1 specification, which was almost two years after the W3C published the Recommendation of CSS2.

If you’re interested in checking out the CSS1 Recommendation, which includes the entire specification itself — something of a CSS1 manual — you can see it on the W3.org website at www.w3.org/TR/REC-CSS1/.

CSS2 (CSS 2.1)

CSS2 is a superset of (that is, it contains) CSS1; the W3C published CSS2 as a Recommendation in May of 1998. Among its most important enhancements are the inclusion of media-specific style sheets, which allows designers to create pages and sites tailored to various devices, such as special access visual browsers, aural devices for the hearing impaired, Braille devices, and mobile handhelds.

CSS2 also provides greater control over the positioning of elements than CSS1. Version 2.1 is the current Recommendation and is widely supported among many smartphones and other mobile devices. See Chapter 5 for the word on how to determine which devices support what CSS versions and to what degree.

You can see the entire CSS 2.1, complete with full documentation, specification at www.w3.org/TR/CSS2/.

CSS3

CSS3, discussed in some detail in Chapter 11, is such a major enhancement that it’s difficult to decide what to talk about first. It makes possible many effects that we now use other programs for — such as drop shadows on text, simple animations, rotating text and other objects, and so much more. This CSS level is truly a maturation of web design technology that’s akin to advancements reached by the desktop publishing industry at the turn of the 21st century.

I’m not saying that designers won’t need Photoshop or Flash anymore, but they won’t find themselves having to create separate files for each simple little effect as often.

Regarding mobile devices, expect to see CSS3 show up in many of the newer smartphones, such as the iPhone, Droid, and some others (though not Windows Phone 7, at least not as I write this). The mobile world, though, does not consist solely of advanced smartphone users. You can’t ignore the users of the millions of not-so-smart phone. It isn’t (ahem) smart.

One of the more exciting features is CSS3, especially for mobile web designers, is a feature called Media Queries. Typically (as discussed in Chapters 4 and 5), when you’re designing for mobile devices in CSS1 and CSS2, you design your style sheets based on device profiles. The result is a static version of the web page based on what’s built into the profile. Instead of working from a profile of what’s known about the device, Media Queries just go ask the device itself about its capabilities. For example: What is your screen

size, orientation, and resolution? Are you in portrait (upright) or landscape (rotated) mode? The answers, along with a whole bunch of other useful info, come back. The style sheet then formats the page accordingly. Chapter 11 looks at some of CSS3’s more exciting features. You can see the CSS3 specification at www.w3.org/TR/css3-roadmap.

If you really want to get a feel for the power behind CSS3, do a search for “CSS3 features” and see what the design community has to say about it. Designers are truly excited and chomping at the bit to use it. For example, check out “22 Handy HTML5 and CSS3 Tools, Resources, and Guides” at www.1stwebdesigner.com/freebies/22-handy-html5-css3-toolsresources-and-guides. 

Figure 2-5 shows a couple of simple text boxes formatted with solely with CSS3.

Search engine goodies sitemaps, tools and Site speed

Many search engines provide a number of tools to help webmasters improve the performance of their sites in the search engines, and to help webmasters with the best practices. Google has a number of webmaster tools a collection of tools geared towards helping webmasters manage the errors within their site, and see how Google sees their website—has been developed by Google, and is available for use, freely. Webmasters can also create a sitemap in XML format, to tell Google of all of the pages within our site, their importance within the scheme of the site as a whole, and how frequently they are updated, to help them decide when to return to re-index the updated content.

The webmaster tools in general, outline errors such as duplicate content, duplicate metadata within pages in the same site, as well as broken or forbidden links. More information can be found on the following pages:

• https://www.google.com/webmasters/tools/home?hl=en
• http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=40318

Site speed

One very new edition to the list of factors to a sites ranking in search engines is the speed of the site, as announced by Google in April 2010. Sites that take a while to load are penalized. More information can be found on the Google blog:

• http://googlewebmastercentral.blogspot.com/2010/04/using-site-speedin-web-search-ranking.html

There are a number of tools available to help monitor and improve the speed of your website. Some potential tools include:

• YSlow from Yahoo!: http://developer.yahoo.com/yslow/
• Page Speed browser plugin: http://code.google.com/speed/page-speed/
• Articles on speeding up your site: http://code.google.com/speed/articles/

SQL Environments

There are two general ways in which you can issue a SQL command to a database:

• Interactive SQL, in which a user types a single command and sends it immediately to the database. The result of an interactive query is a table in main memory (a virtual table). In mainframe environments, each user has one result table at a time, which is replaced each time a new query is executed; PC environments sometimes allow several. Result tables may not be legal relations—because of nulls they may have no primary key—but that is not a problem because they are not part of the database but exist only in main memory.
• Embedded SQL, in which SQL statements are placed in an application program. The interface presented to the user may be form-based or command-line based. Embedded SQL may be static, in which case the entire command is specified at the time the program is written. Alternatively, it may be dynamic, in which case the program builds the statement using user input and then submits it to the database.

The basic syntaxes of interactive SQL and the static embedded SQL are very similar. We will therefore spend the first portion of this book looking at interactive syntax and then turn to adapting and extending that syntax for embedding it in a program. Once you understand static embedded SQL syntax, you will be ready to look at preparing dynamic SQL statements for execution.

In addition to the two methods for writing SQL syntax, there are also a number of graphic query builders. These provide a way for a user who may not know the SQL language to “draw” the elements of a query. Many of these programs are report writers (for example, Crystal Reports3) and are not intended for data modification or for maintaining the structure of a database.

Metadata and the Semantic Web

The basic structure of web documents provides the desired appearance and functionality. By default, however, the content is human-readable only. You can use additional technologies to provide meaning to web documents, making them machine-readable and part of the Semantic Web. Many terms have been recently introduced for emerging Semantic Web technologies, but because of the lack of formal definitions, many of the definitions are somewhat fuzzy. For example, because of the potential to perform actions automatically, a new era of the Web has begun, which is denoted as Web 2.0. After gaining popularity on online community portals, some features of the Semantic Web, together with personalization, are now referred to as Web 3.0. There is a wide choice of metadata available, along with microformats and various annotations that can significantly extend the possibilities of web documents. They can also considerably improve the effectiveness of web searches. RDF should be used to add structure to the Web and change conventional search engines that apply brute-force approaches.

In this chapter, you will learn machine-readable metadata annotations and semantically meaningful attributes. You will also become familiar with the Resource Description Framework, the fundamental standard behind Semantic Web technologies. After reading the chapter, you will be able not only to apply a variety of metadata annotations but also to create new vocabularies, schemes, and ontologies, including but not limited to the following:

• General metadata in the markup: Conventional meta tags
• Microformats: Metadata provided as attribute values of markup elements
• Microdata: A metadata annotation for general metadata embedding in HTML5
• RDF: A standardized framework for Semantic Web data models
• OWL: A knowledge representation language for describing and sharing web ontologies that formally represent knowledge as a set of concepts within a domain and the relationships between those concepts
• FOAF and DOAC: Machine-readable ontologies for people and their professional capabilities
• XMP, Rich Snippets, SearchMonkey RDFa: Metadata formats for images and video clips

Multiple Catch Clauses In JavaScript 1.5

In JavaScript 1.5, the try/catch statement has been extended to allow multiple catch
clauses. To use this feature, follow the name of the catch clause parameter with the
if keyword and a conditional expression:

try {
// multiple exception types can be thrown here
throw 1;
}
catch(e if e instanceof ReferenceError) {
// Handle reference errors here
}
catch(e if e === "quit") {
// Handle the thrown string "quit"
}
catch(e if typeof e === "string") {
// Handle any other thrown strings here
}
catch(e) {
// Handle anything else here
}
finally {
// The finally clause works as normal
}

When an exception occurs, each catch clause is tried in turn. The exception is assigned
to the named catch clause parameter, and the conditional is evaluated. If true, the body
of that catch clause is evaluated, and all other catch clauses are skipped. If a catch clause
has no conditional, it behaves as if it has the conditional if true, and it is always
triggered if no clause before it was triggered. If all catch clauses have a conditional, and
none of those conditionals are true, the exception propagates uncaught. Notice that
since the conditionals already appear within the parentheses of the catch clause, they
are not required to be directly enclosed in parentheses as they would be in a regular
if statement.

Playing an audio file with different sources.

Let’s say you wanted to provide audio in both Ogg Vorbis and MP3 formats to support

Firefox, Chrome, Opera, Safari, and IE9. You can do this by using the source

element in conjunction with the audio element. The code would look like this:

<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
</audio>

It couldn’t be easier!
Naturally, you can add a WAV file format too (should you want to):

<audio controls>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>

You can incorporate any of the attributes mentioned earlier here as well. So
making whichever source the browser chooses to play automatically would simply
require this code:

<audio controls autoplay>
<source src=”sayHello.ogg” type=”audio/ogg”>
<source src=”sayHello.mp3” type=”audio/mp3”>
<source src=”sayHello.wav” type=”audio/wav”>
</audio>

To support browsers that don’t support the HTML5 audio element, you’d follow
the same tactic, but the fallback is different.

Google Analytics for Mobile

Google Analytics is one of the most used (and most powerful) free web statistics tool for mobile websites, but it is based on JavaScript code that, in the mobile world, only works on high-end devices.

Google Analytics for Mobile Websites (http://code.google.com/mobile/analytics/docs/web/) works on all web-enabled browsers, with or without JavaScript support. The technology supports script code for PHP, ASP.NET, Perl, and JSP.

Google Analytics is also available for Android and iPhone native appli- cations, supporting tracking of pages and events.

To use the mobile service, you should apply for a normal Google Analytics account at http://www.google.com/analytics. Create a new Website Profile and, in the Advanced section, select “A site built for a mobile phone,” select your server language, and follow the instructions.

Listing Your Pages with the Major Search Sites

If you want users to find your pages, you absolutely must submit a request
to each of the major search sites to index your pages. Even though search
engines index web content automatically, this is the best way to ensure
your site has a presence on their sites. Each of these sites has a form for
you to fill out with the URL address, a brief description of the site, and, in
some cases, a category or list of keywords with which your listing should
be associated. These forms are easy to fill out; you can easily complete all
of them in an hour with time left over to list yourself at one or two specialized
directories you might have found as well. (How do you find the specialized
directories? Through the major search sites, of course!)

Even though listing with the major search engines is easy and quick, it can
be a bit confusing: Each search engine uses different terminology to identify
where you should click to register your pages. The following list might
save you some frustration; it includes the addresses of some popular
search engines which will include your site for free, along with the exact
wording of the link you should click to register:

Google—Visit http://www.google.com/addurl/, enter the address
of your site and a brief description, and then enter the squiggly verification
text, called a CAPTCHA, (or Completely Automated Public
Turing test to tell Computers and Humans Apart) shown on the
page. Then click the Add URL button to add your site to Google.

Yahoo! Search—Visit http://siteexplorer.search.yahoo.com/submit,
click on Submit a Website or Webpage, enter the address of your site,
and then click the Submit URL button.

Bing—Visit http://www.bing.com/docs/submit.aspx, enter the verification
text, enter the address of your site, and then click the Submit
URL button.

AllTheWeb—AllTheWeb search results are provided by Yahoo!
Search, so just be sure to submit your site to Yahoo! Search, as
explained previously.

AltaVista—AltaVista search results are also provided by Yahoo!
Search, so just be sure to submit your site to Yahoo!. Search, as
explained previously.

WHAT IS HTML5?

HTML5 is the latest and greatest version of the core language of the World Wide
Web and is one of the most exciting developments to happen to the web and the web
community in a long time. HTML (HyperText Markup Language) is the language that
has been at the heart of all web documents since its conception in the early 1990s.

HTML5’s predecessor is HTML 4.01, and one of the major differences between
HTML 4.01 and HTML5 is the addition of many JavaScript APIs (Application Programming
Interfaces) to the specification. Of course, one of these specifications is
directly relevant to the subject of this book—the API that allows interactions with
multimedia elements within the browser. As well as these new APIs, HTML5 also
alters the meaning of some existing HTML elements, removes others, and more
important, adds new ones—some of which allow you to provide more semantic
meaning to your content.

It’s worthwhile noting that most of these new elements don’t actually add any
new functionality that you’ve not seen before.

But before you dive into the workings of HTML5, let’s first look at where HTML5
came from and how it evolved.

PhoneGap and Dreamweaver CS5.5

Apps for iOS and Android mobile devices are written in the Objective-C programming language. For some time, developers have been working on technology that would convert HTML5, CSS, and JavaScript to Objective-C apps.

The most widely supported and advanced technology for doing this is PhoneGap. The apps that result from PhoneGap conversion do not have all the functionality of apps written from scratch in Objective-C. Apps developed with PhoneGap are allowed by Apple for distribution through iTunes.

In addition, Dreamweaver CS5.5 relatively seamlessly integrates PhoneGap, with one major caveat: You can generate Android apps—for Google Android mobile devices—with Dreamweaver CS5.5 for Windows or on a Mac. However, you can only generate apps for iOS using Dreamweaver CS5.5 on a Mac. This limitation is not something inherent in Dreamweaver CS5.5. It is a product of the fact that Apple does not make the required tools for converting web pages to apps available for Windows computers. However, it does mean that if creating iOS apps is important to your web develop

Default jQuery Mobile CSS

Before you start experimenting or working with the CSS file that comes with jQuery Mobile pages you might find it useful to keep the following URL handy: http://code.jquery.com/mobile/latest/jquery.mobile.css.

This URL leads to the jQuery Mobile CSS file. A version of the jQuery Mobile CSS file is included when Dreamweaver CS5.5 generates a jQuery Mobile starter page. If you look at the CSS file that opens when you generate a jQuery Mobile page in Dreamweaver CS5.5, you will see that it is 1.0a3/jquery.mobile-1.0a3.min.css. Alternatively, an updated version of the CSS file that has been released since Dreamweaver CS5.5 incorporated this CSS file.

There are two good reasons to go online and grab the latest version of the jQuery Mobile CSS if that is an option. For one thing, it is periodically updated. The other is that if you corrupt the version of the CSS file that comes with Dreamweaver, something I have found quite easy to do, you can simply go to the link above, copy and paste the CSS code, and use that to create a "clean" CSS file to use when you build jQuery Mobile pages from scratch.

The CSS file you download will have a slightly different file name than the one provided with Dreamweaver, reflecting the current version. Once you download the new CSS file, you can save that CSS file with your own name to create customized CSS for your jQuery Mobile pages.

Dreamweaver's HTML5 Pack and design elements

Now that we have introduced the key design elements of HTML5, we are almost ready to generate pages that use those elements in Dreamweaver. Before we do, however, it will be helpful to preview briefly, conceptually, how Dreamweaver generates HTML5 layouts.

The first thing to emphasize is that HTML5 elements such as <header>, <footer>, <article>, <section>, <aside>, and <nav>, do not really do much if anything "on their own." Like their DIV tag evolutionary precursors, they are more or less empty vessels. HTML5 elements take shape, literally, when connected with CSS styles.

For example, a web page might have a <header> defined as stretching the entire width of the page, at the top of the page, with a set background color, and spacing that keeps it from bumping into other page elements. All of these attributes (size, location, background color, and spacing) are defined in a CSS style sheet that includes a specific CSS style associated with the <header> element. Moreover, this symbiotic relationship between HTML5 layout elements and CSS styles is required for each HTML5 layout element.

Therefore, when Dreamweaver generates page layouts using HTML5 elements, it also generates a CSS file that has already built-in style rules for all the HTML5 elements used in the page.

Of course, you can change how HTML5 elements appear. You can edit the generic content that Dreamweaver provides with the HTML5 layouts. Alternatively, you can change the appearance of the HTML5 elements by editing the CSS styles. We will do both of these things in the next chapter of this book. Here and now, we will focus on setting up Dreamweaver so that it can generate HTML5 pages and then we will actually create those pages.

With the basic understanding of HTML5 layout elements and the way they interact with CSS under our belts, the time has come to launch into Dreamweaver and begin to create HTML5 layouts.