Tuesday, October 16, 2012
Saturday, August 4, 2012
Sunday, July 22, 2012
HTML 5 Features: What Web Developers Can Use NOW
There are several articles that list some important upcoming features of HTML5, which can work on certain browsers. This tutorial for the web developer will show you how you can use certain features of HTML 5 NOW!
HTML 5 features which are useful right now include:
- Web Workers: Certain web applications use heavy scripts to perform functions. Web Workers use separate background threads for processing and it does not effect the performance of a web page.
- Video: You can embed video without third-party proprietary plug-ins or codec. Video becomes as easy as embedding an image.
- Canvas: This feature allows a web developer to render graphics on the fly. As with video, there is no need for a plug in.
- Application caches: Web pages will start storing more and more information locally on the visitor's computer. It works like cookies, but where cookies are small, the new feature allows for much larger files. Google Gears is an excellent example of this in action.
- Geolocation: Best known for use on mobile devices, geolocation is coming with HTML5.
If you want to know if any of the above features works on a given browser, you can test for it through Modernizer. This small JavaScript library is good for detecting CSS3 as well. From the Modernizer web site, "Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies."
The Modernizer syntax is intuitive:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
Simply insert the modernizr-1.1.js JavaScript file in your page and add a class of "no-js" in the <html> element. You can then use the Modernizr JavaScript object and the various CSS classes it attaches to the html element. Here's an example of how to do that:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning HTML5</title> <script src="modernizr.min.js"></script> </head> <body> Your web page here. </body> </html>
For those of you with a keen eye, you might have noticed the simplified <!DOCTYPE html>
If you're still using,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
as your doctype, you can simplify and shorten it right now. This works in all browsers. You can also shorten,
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
To
<meta charset="utf-8">
In addition, you can shorten the reference to your CSS from:
<style type="text/css">
To <style> Of course, that only works for embedded or inline style sheets. It does not work for external style sheets.
If you use JavaScript in your web page, you can short the syntax there as well. Here's the original code from part of a Google search box:
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
You can shorten this by deleting "text/javascript" I have tested all of the above in my personal site and everything still works in Internet Explorer, Firefox and Chrome. I've said it before and I'll say it again, for me, the best part of HTML5 is the cleaner, simpler and shorter code. In the long run, web pages will run faster and smoother than ever before with less chances of coding mistakes.
HTML5 Document Header Optimization Techniques
While studying the markup of Paul Irish's HTML5 Boilerplate index page for my The Indispensable HTML5 Boilerplate Website Template article, I truly began to appreciate the need for a set of best practices for creating fast loading and consistent rendering of web pages. If you're really interested in optimizing your web documents, as Irish and his colleagues obviously are, you will conclude that it takes some concerted effort to cater to the myriad of browsing devices available today. As a result of Irish's hard work, we can now reap the benefits by following his various techniques. Today, I'd like to step through some of the index.html page header section and provide a bit of an explanation as to what each technique achieves. In doing so, we'll not only get to know how to use them in our own pages, but we'll be getting a cutting edge overview of the latest and greatest HTML best practices.
The DOCTYPE Declaration
Starting from the top, the <!DOCTYPE> declaration must be the very first line in your HTML document, even before the <HTML> tag. It's purpose is to relay the HTML version of the page to the browser. In HTML 4.01, there were three different <!DOCTYPE> declarations (String, Transitional, and Frameset), which required a reference to a DTD, because HTML 4.01 was based on the Standard Generalized Markup Language (SGML):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Although the <!DOCTYPE> declaration is still required, HTML5 is no longer based on SGML, so the DTD reference can safely be dropped. In fact, all it has to state is that the content is HTML:
<!doctype html>
Conditional CSS Classes
Prior to conditional classes, the two preferred ways to style your document for different browsers were conditional stylesheets and CSS hacks.
Here are some conditional stylesheet statements for Internet Explorer:
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]--> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->
...and a typical CSS Hack for IE and Mozilla browsers:
div#container {
width: 28em;
padding: 10px;
border: 1px solid black;
border-radius: 10px;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
}
Both the above solutions were less than satisfactory because conditional stylesheets caused the page to load more slowly while css hacks did not validate properly. Conditional classes now offer a compromise between these two approaches that solves both their shortcomings. What the solution does is apply a CSS class to the opening HTML tag so that it applies to the entire document. An empty class is applied if the browser version is higher than IE 9 and for all other browsers.
This loads quickly:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
All your CSS code will reside in the same file and validate correctly:
div.status { color: inherit;}
.ie6 div.status { color: #fff; }
The Charset Meta Tag
In HTML4 the META tag to set the character encoding on a document would be written as:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
When developing the HTML5 spec, the W3C decided to shorten the syntax to the following, easier to remember, tag code:
<meta charset=utf-8>
Why utf-8?
The HTML5 Boilerplate index page sets the document encoding to utf-8. This is no accident, as it turns out that UTF-8 encoding is the best way to go. For one thing, Unicode is replacing ASCII and the use of 8-bit character sets such as ISO-8859-1 and Windows-1252. In fact, Unicode is a standard that specifies all of the characters for most of the world's writing systems, meaning that it supports multiple languages on the same web page. Although not the only Unicode encoding (others include UTF-7, UTF-16, and UTF-32), UTF-8 is the most popular by far.
Don't Skip This Step!
You should always include character encoding for your web pages, even if you never use any special characters. You see, HTML5 requires browsers to buffer a response when a character set is not specified in the Content-Type header or an HTML META tag and that can really slow down page loading. Another crucial issue is that omitting the Charset Meta Tag can make your site vulnerable to a cross site scripting attack using UTF-7. When your site has no character encoding defined, the browser may default to UTF-7 character encoding. This allows a hacker to inject UTF-7 encoded scripts into the web page to gain access to your site.
If you have access to the server configurations or .htaccess files, an even more secure solution than specifying the character encoding in the HTML is to serve it as part of the HTTP server headers. In Apache, you can change the default character set from ISO-8859-1 to UTF-8 by adding "AddDefaultCharset UTF-8" to your root .htaccess file. This one line will set the character encoding for your whole site in one fell swoop.
It's All About Location
In early 2011, the W3C decided to allow the character encoding declaration be within the first 1024 bytes instead of the first 512 bytes, so that browsers can give more leeway before buffering the page content. Whether or not vendors will modify their browsers to accommodate the change is still up in the air. What I can tell you is that IE does not appear to buffer pages at all. When a character set is specified late in the document, Internet Explorer will redraw the page using the specified character set if it is not the same as the default character set. All the more reason to place the Charset Meta Tag as early in the document as you can.
Ladies and Gentlemen, Choose Your Engines
As far back as IE 6, Internet Explorer has had the ability to render HTML content using a variety of compatibility modes. Setting the X-UA-Compatible meta tag to "IE=edge" forces IE to use the most up to date rendering engine that it has available, so as to support emerging standards such as HTML5, Cascading Style Sheets (CSS), Level 3 (CSS3), Scalable Vector Graphics (SVG) 1.1 (Second Edition), and others. The second content option defined in the index.html page is Chrome Frame, which is a plugin for IE6, 7, and 8 that enables IE to utilize the excellent Google Chrome rendering engine. If the user has the plugin installed, the page will use it:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Mobile Device Optimization
Mobile Safari introduced the viewport meta tag to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any official web standard. Including the viewport meta tag in your document header helps render the page more consistently on mobile device screens of different sizes and resolutions.
Here's more on the subject from the Mozilla Developer site.
<meta name="viewport" content="width=device-width,initial-scale=1">
Conclusion
Optimizing your web pages for different browsers, platforms, and devices has become a perilous undertaking. Gone are the days when your biggest worry was that you'd miss a closing tag! Thankfully, others have gone through the trouble of compiling all the best practices for getting your documents to load as quickly and render as consistently as possible across the full spectrum of available devices.
Of course, this is not the final word on the subject, as we still have to look at the document body. It can also benefit from a wide assortment of techniques that can load scripts more efficiently, add your site to Google analytics, and more.
Web Developer Basics: Learning About HTML5
HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.
HTML5 is most definitely a work in progress. It began to take shape back in 2004, and the official specification may not be actually complete until the year 2022! But HTML5 is already here, in everything from your current desktop browser to your new smartphone, so there's no problem with getting started.
So Let's Get Started with HTML5
Perhaps the most important thing to understand about HTML5 is not the coding details and changes themselves, but the high-level functions they give you access to. In fact, HTML5 is all about high-level functions rather than details. For instance, instead of thinking of multimedia objects and then defining them as video or audio and so on, in HTML5 you can simply write something like:
<video src="watchthis.mp4" width="640" height="480"> <a href="watchthis.mp4">Here's my video</a> </video>
This functional methodology extends even to typical page coding. We're all used to writing complex pages in terms of low-level objects like </div>, which is kind of amorphous and easy to lose track of. So we often attempt to keep track of things by coding like this:
<div id="header"> <H1>Web Developer Basics: Learning About HTML5</H1> <p class="credit">by David Fiedler</p> </div>
In HTML5, we can cut right to the chase. We're writing a header, and now we can code it that way:
<header> <H1>Web Developer Basics: Learning About HTML5</H1> <p class="credit">by David Fiedler</p> </header>
So what, you might say at this point. Well, it's not just the header of a page that we can now view as a complete functional object, it's almost everything we use on a daily basis: <header>, <footer>, <article>, <section>, <nav>, <menu>, <figure>. This gives us tremendous flexibility in terms of how we can think of the page. So it's not just easier to understand the structure of the page, it's easier to correctly code the structure of the page.
Begin At the Beginning
The beginning of many modern HTML 4.0 pages looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
But in our brave new world of HTML5, all we need is:
<!DOCTYPE html>
Similarly, the complex XHTML boilerplate declarations many people use can be simply replaced by:
<html lang="en">
and encoding declarations such as
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
can be toned down to a mere
<meta charset="utf-8">
Oh, and we may as well get this next bit out of the way now, even though I hesitate to mention it for fear of being responsible for people writing near-incomprehensible HTML5 pages. You no longer need those double quotes around attributes, so that <p class=credit> is now as legal as <p class="credit">. But please use this power wisely.
A Bit Of Magic
Just to show that HTML5 isn't only about structure and saving keystrokes here and there, here's a nice example of an attribute feature that is simple on the surface, but demonstrates some real power. Paste this simple little document into a text file, and call it something like foo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>You Can Edit This</title>
</head>
<body>
<h1>I Mean, You Can Really Edit This</h1>
<p contenteditable=true>
Now is the time for all good cats to come to the aid of their catnip.
</p>
</body>
</html>
The only new thing here that will jump out at you is the attribute of contenteditable on the paragraph tag. You can use this on any element, not just a paragraph, and it takes effect for everything within that element. Now, open this file using any modern browser, and you'll see that you can indeed edit the paragraph - but not the heading! - right in the browser.
But wait, there's more! Change that paragraph as much as you like, then save the page to your computer as a new HTML file. Open it up in a text editor...and presto, the source code has changed to reflect the text changes you made in the browser. Shazam!
Future articles in this continuing series will cover the details of how to use the new HTML5 elements and features (along with working examples, naturally). And we'll keep it real, and readable, without devolving into quoting language syntax by the ton.
Behind the Scenes with XHTML
In a previous article, we quickly touched on the requirements for proper XHTML coding, especially in relation to HTML 4.01. In this article, we'll take a closer look at what some of those requirements are in relation to the
If you're using Unicode, you'll need to use the following declaration instead:
head portion of the Web page. This is the portion of the document that the user agent (i.e., browser) will read first. It's important that it doesn't stumble here. Remember, our goal is to develop standards-based Web pages (here, I make the assumption that the reader has a working knowledge ofHTML).
Let's start at the top of a valid XHTML document and work our way down. For this part of the discussion, I'll be referring to the code below.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Document Title Goes Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="/style/core-style.css" />
</head>
Content Declaration
The first line shown above is the XML declaration. This line defines the version of XML you're using as well as the character coding. It's recommend by the World Wide Consortium (W3C) but is not required. If you're not using XML, it's not necessary. In fact, it can cause problems with some of the older browsers. Most of them will choke if they encounter a page that begins with this encoding. If you don't include the XML declaration, you'll need to include the meta tag below (also shown above, after the
title tag). Do not include both.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
If the XML declaration is used, it must be the first line on the page. If the content meta tag is used, it must be placed within the head of the document.
The content meta tag is divided into two parts. The first part (
content="text/html) tells the browser the mime type. Mime is short for "Multipurpose Internet Mail Extensions". It was originally used in formatting e-mail but is now also used by Web browsers to declare the type of content being served to the browser. The W3C actually recommends usingapplication/xhtml+xml as the mime type for an XHTML document. However, there are problems with using it. An example is Internet Explorer (up to version 6 for both Windows and Mac), which doesn't recognize it, nor do many other browsers. Using text/html should make your page acceptable to IE and is "allowable" by the W3C. The second half of the meta statement (charset=UTF-8) identifies the character set used by the browser.
Note that the meta tag ends with a "
/>". This is because, in XHTML, all tags must be closed, except for the DOCTYPE statement. The meta tag is an empty element tag. This means the tag itself is the content or a place holder for the content. Empty element tags include <img />and <br />. Since the tag has no additional content, it doesn't have an end tag and must be closed within itself. If you leave a space before the slash, older browsers won't get confused.Document Type Definition
If the XML declaration isn't used, the first line in the document must be the Document Type Definition (DTD), or DOCTYPE. This statement is used to "set out the rules and regulations for using HTML in a succinct and definitive manner" (W3C). Failure to use a full DTD could send your visitor's browser into 'quirks' mode, causing it to behave like a version 4 browser (interestingly, a large number of Web pages do not use the doctype statement; many of them are Web development sites). There are three doctypes available for XHTML: strict, transitional, and frameset. Be careful as these declarations are case-sensitive.
The strict DTD is used for documents containing only clean, pure structural mark-up. In these documents, all the mark-up associated with the layout comes from Cascading Style Sheets(CSS).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The transitional DTD is used when your visitors may have older browsers which can't understand CSS too well. You can use many of HTML's presentational features with this DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Finally, use the frameset DTD when you want to use HTML to partition the browser window into two or more frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The DTD files referenced above are plain text files. You can enter the URL and download them. There is nothing earth-shattering in the files but you'll be able to see what the browser is reading.
The XML Namespace
The next line in our document is the XML namespace. This statement identifies the primary namespace used throughout the document. An XML namespace "is a collection of names, identified by a URI reference, which are used in XML documents as element types and attribute names" (W3C). The
html tag is included at the beginning, effectively combining the two tags. In addition, the language attribute is also included, in both XML (xml:lang="en") and HTML (lang="en") terms.The Wrap-Up
The rest of the header shown is basic HTML code. The
head tag opens the header and must be closed before the body tag. The title tag follows the opening header tag. Next, the meta tags and the link to the style sheet, if necessary, are included. Be sure to close the meta and style sheet link tags with " />". Remember, in XHTML, all tags and attributes must be lower case and all tags, except the DOCTYPE, must be closed.
The article "XHTML 1.0: Where XML and HTML meet" provides a further, in-depth study of transitioning to XHTML.
DOCTYPE Tag
Having trouble with your Web pages? Can't get them to display correctly in your browser? It might be that your page is a little "quirky."
There are several reasons why Web pages do not display properly, such as omitting a required end tag, improperly formatting a table, JavaScript errors, CSS errors, incorrect server requests, etc. Often, these errors happen because Web developers do not take the time to validate their work. In other cases they are a result of a lack of knowledge regarding the proper formatting and coding of Web pages.
Even if you take care of all these errors, something else may be causing your Web pages to display incorrectly or even not at all: failure to use a
<DOCTYPE> statement or, if used, failure to use the right one.
A large number of Web pages don't use the
<DOCTYPE> statement (Interestingly, many of them are Web development sites). Does it really make a difference? For the most part, not much. But if you want to make sure your Web site renders correctly in various browsers, then it's best to use it. You'll also need it if you plan on validating your Web pages.The Modes
In an effort to contend with Web pages written for older browsers, the newer browser versions (Mozilla-based browsers, Netscape 7, Windows Internet Explorer 6, Mac Internet Explorer 5, Opera 7, and Safari) have two types of presentation modes: standard and quirks. Using thestandard mode, the browser tries to follow W3C recommendations. When the browser goes into quirks mode, it's trying to emulate an older version of the browser. This could cause the browser to ignore your page's style sheets and render the page unusable (Mozilla and Safari also have a third mode: almost standards modes, which mainly pertains to the vertical sizing of tables).
What Is It?
The
<DOCTYPE> declaration tells the browser what version of (X)HTML is being used so it will know how to display the page. The declaration may also provide a link to a text file (i.e., the loose DTD) which the browser uses to obtain further information. It's similar to having a tune-up done on your car. In order to perform it correctly, the mechanic must know the make, model, and year of the car. He must also know how many cylinders the engine has and its horsepower. Once he knows this, he can move forward and properly tune the engine.The Specs
The W3C HTML 4.01 and XHTML 1.0 specifications state that the
<DOCTYPE> is required in all documents.
The W3C sets the specifications for common protocols used on the Web. This helps to ensure that each Web site is accessible to the various user agents (browsers/viewers/readers). Technically, there are no standards regarding Web site development in relation to coding. There are only "specifications," or, as the W3C calls them, "recommendations." These specifications, however, are seen by most Web developers, as well as the creators of user agents, as being on a par with standards. Most of the current browsers (i.e., Firefox, Opera, Safari) are beginning to closely follow the specifications.
If you follow the recommendations, your Web pages (for the most part) will work correctly. If they don't, it's easier to get help when you are following the rules instead of having to explain the way that you did it. If the specs are not followed, it's more of a hit-and-miss game. You'll need to figure out what works and what doesn't. Then you'll have to recheck all of your Web pages on all of your Web sites each time a new browser hits the streets to make sure that your non-standard code works in it.
Usage
The
<DOCTYPE> declaration must be the very first thing in your document, before the <html>tag. Then, when the browser begins to load the page, it knows how to treat the code within the page.
There are three different document types for HTML 4.01: Strict, Transitional, and Frameset. TheStrict type is used with Cascading Style Sheets and helps to ensure clutter-free coding.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The Transitional type is used when HTML presentational features are included in the document instead of in a style sheet. This is done to accomodate older browsers that don't support CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The Frameset type is used in documents that have frames.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
The same three document types are also used in XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Since the
<DOCTYPE> declaration is actually a comment tag, it won't confuse older browsers that don't understand the statement.