Monday, November 14, 2011
W3C Conference Presentations Streamed Live
W3Conf: Practical Standards for Web Professionals will be held on November 15-16, 2011. There is a well-rounded line up of presentations including web standards, HTML5, CSS, and universal access. See the conference presentation schedule. What's really cool is that the presentations will be streamed live and archived at http://www.w3.org/conf/live.html.
Friday, September 30, 2011
Silk: Amazon's New Browser
Amazon recently released their new Kindle Fire, which is an Android-based 7 inch tablet WiFi device. In addition to the Kindle e-reader app, the Fire includes access to the Amazon AppStore (but not the Android Marketplace), typical utilities (like e-mail access), and a spanking new browser called Silk.
Watch the video below to find out how Amazon leverages cloud processing to speed the performance of Silk and cache pages that you are likely to request (before you even knew you wanted to read them).
Watch the video below to find out how Amazon leverages cloud processing to speed the performance of Silk and cache pages that you are likely to request (before you even knew you wanted to read them).
Monday, September 05, 2011
Get Started with HTML5 Today!
There is a lot of buzz about HTML5 these days, which will be the successor to HTML 4 and replace XHTML. If you already use HTML 4 or XHTML to design web pages, you're probably wondering how to begin using HTML5.
Currently in draft statusMoved to Candidate Recommendation status by the W3C in late 2012, HTML5 is a superset of HTML 4, provides for the use of XHTML-like syntax (such as enclosing attributes within quotation marks, and always coding both opening and closing tags), and is intended to be backward compatible. The working draft of HTML5 is available at http://www.w3.org/TR/html5. An explanation of the differences between HTML 4 and HTML5 is located at http://www.w3.org/TR/html5-diff.
It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.
<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!
Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
The figure below shows the web page source code displayed in the Notepad text editor.
The figure below depicts the browser display of the web page.
<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!
header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }
So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim, to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.
Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!
Explore the following resources to learn more about HTML5:
It’s possible to begin using HTML5 right away! The recent versions of popular browsers, such as Internet Explorer 9, Firefox 4(and later), Safari 5, Google Chrome, and Opera 10 already support some of the new features of HTML5. When new versions of each browser are released, you can expect increased support of HTML5. As you learn to design web pages you need to not only know what works today in current browsers, but also to get ready to use new HTML5 coding techniques. Since HTML5 is in draft status and may change, so consult http://www.w3.org/TR/html-markup for a current list of HTML5 elements.
Document Type Definition
Because multiple versions and types of HTML and XHTML exist, the W3C recommends identifying the type of markup language used in a web page document with a Document Type Definition (DTD). The DTD identifies the version of HTML contained in your document. Browsers and HTML code validators can use the information in the DTD when processing the web page. The DTD statement, commonly called a doctype statement, is placed at the top of a web page document. The DTD for HTML5 is<!DOCTYPE html>
That’s a lot easier than the old HTML4 and XHTML DTDs!
Your First HTML5 Web Page
The syntax of HTML5 is streamlined and easier to use than HTML 4.0 and XHTML. You are free to code with upper and lowercase letters as well as optionally close container tags. However, that could lead to web pages with display problems and processing problems when you begin to add technologies such as CSS and JavaScript to the mix. So, I follow the coding conventions for HTML5:- use lowercase letters
- place quotes around attribute values
- always code closing tags for container elements.
Let's get started with your first HTML5 web page! Just as with XHTML and HTML 4.0, the HTML5 doctype statement is the first line in the document. Next, the web page begins with an opening <html> tag and ends with a closing </html>tag. These tags indicate that the text between them is HTML formatted and tells the browser how to interpret the document. Use the lang attribute on the opening html tag to indicate the language of the web page content. Since our web page is in English, we’ll use lang="en". For example, <html lang="en">
You’ll continue to use head, title, and body elements as you did in earlier versions of HTML/XHTML. Something that may be new is to use the self-contained <meta> tag to indicate the character encoding, which will typically be coded as
<meta charset="utf-8">
Note that self-contained, or stand-alone tags are referred to as void elements in HTML5. Although self-contained elements are coded with an ending slash in XHTML (for example, the XHTML line break tag is coded as <br />), the HTML5 syntax for void elements is more streamlined — the HTML5 code for the line break tag is <br>.
To summarize, every HTML5 web page contains the doctype statement followed by the html, head, title, meta, and body elements. A basic HTML5 web page template is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
The figure below shows the web page source code displayed in the Notepad text editor.
The figure below depicts the browser display of the web page.
More About HTML5
Now that you’ve seen an example of the syntax; now let’s delve deeper into HTML5.Structural Elements
Take a moment and think about how you typically structure a web page layout with div elements. You may find that it’s common to use ids or classes with names such as header, nav, or footer. HTML5 has several new structural elements that render as block display specifically intended for organizing web pages:- <header> contains the heading information for a page area section. The header element is block display and will typically contain one or more heading level elements (h1 through h6) and, optionally, the hgroup element
- <hgroup>The hgroup element groups heading level tags and is useful if the logo header area of a web page contains both the website name and a tagline
- <nav> contains a section of navigation links
- <aside> contains sidebar, note or other tangential content
- <footer> contains the footer of a section.
- <article> contains an independent entry, such as a blog posting, comment, or e-zine article
- <section> contains a “section” of a document, such as a chapter or topic. A section might contain <header>, <footer>, and other elements needed to display the content
- <figure> and <figcaption> associates a caption with an image or video
Phrase Elements
HTML5 revisits the former physical style and logical style elements – now called phrase elements. Semantic uses of common phrase elements follow:- <b> Bold text with no particular importance
- <strong> Bold text with strong importance
- <i> Italic text with no particular emphasis
- <em> Italic text that is emphasized
- <small> Small-size text that semantically indicates small or fine print – like a legal notice
New Multimedia Elements
HTML 5 contains several new elements that are intended to simplify displaying multimedia in web pages.- <video> configures embedded video.
- <audio> configures embedded audio.
- <embed> configures plug-in content
- <canvas> provides for dynamically drawing graphics and interactive games with scripting (JavaScript)
More New Elements
HTML 5 contains new elements for a variety of purposes, such as progress, meter, dialog, menu, and more. New HTML5 form controls are configures using new attribute values for the input element. And there's even more! See http://www.w3.org/TR/html-markup/ and explore the list of elements.Elements Eliminated
A number of elements were listed as deprecated in HTML 4 and XHTML. Some of these deprecated elements were eliminated from HTML5, such as <big>, <center>, <frame> , <frameset>, and <noframes>.HTML5 & Today’s Browsers
Internet Explorer 9 and current versions of Safari, Chrome, Firefox, and Opera offer good support of HTML5 structural elements. The issue is that many people still use earlier versions of browsers. There are two different approaches you can follow if you’d like to begin using HTML5 today: a conservative, straightforward approach and a progressive approach that is more involved and requires JavaScript.Conservative Approach to Using HTML5 Today
For the best chance at compatibility, code using either HTML5 or XHTML syntax and avoid using the new HTML5 elements. Instead, use <div> tags to structure page areas and configure the new element names as class names or id names. For example, the opening div tag that contains the page footer area could be coded as<div class="footer"> instead of using the new HTML5 <footer> tag. In this way you’ll become used to the new element names and it will be easier to update the pages to all HTML5 later on. As time goes by and older browsers are used less and less, you’ll be all set!
Progressive Approach to Using HTML5 Today
Code using new HTML5 elements and include CSS that configures older non-supporting browsers to render the HTML5 header, hgroup, figure, figcaption, footer, nav, section, article, and aside elements as block display (use display: block;). This will work well in all browsers except for Internet Explorer 8 and below. The CSS code follows:header, hgroup, nav, footer, figure, figcaption, section, aside, article { display: block; }
So, what to do about Internet Explorer 8 and below? Remy Sharp offers a solution, called the HTML5 Shim, to enhance the support of Internet Explorer version 8 and earlier (see http://remysharp.com/2009/01/07/html5-enabling-script). The technique uses conditional comments that are only supported by Internet Explorer and are ignored by other browsers. The conditional comments cause Internet Explorer to interpret JavaScript statements that configure it to recognize and process CSS for the new HTML5 element selectors. Remy Sharp has uploaded the script to Google’s code project and has made it available for anyone to use. Add the following code to the head section of a web page after CSS to cause Internet Explorer (versions 8 and earlier) to correctly render your HTML5 code:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
What's the drawback to this approach? Be aware that your web page visitors using Internet Explorer (version 8 and earlier) may see a warning message and must have JavaScript enabled for this method to work.
Keep in mind that the W3C still needs to complete the process to move HTML5 from draft to recommendation status. Although new browser versions will offer increased support for HTML , not all your website visitors will install the latest version and workarounds will be likely (such as the CSS styles and script shown above). However, it’s important to be aware of HTML5—it’s the way of the future! And, you can confidently use it in a conservative manner today!
Explore the following resources to learn more about HTML5:
- W3C’s Web Developer’s Guide to HTML5
http://dev.w3.org/html5/html-author - W3C’s Interactive Chart of HTML 4 and HTML5 Elements
http://dev.w3.org/html5/html-author/#comparison-of-html-4.01-and-html-5-elements - HTML5 Doctor
http://html5doctor.com - HTML5 Demos
http://html5demos.com - HTML5 Cheat Sheet
http://media1.smashingmagazine.com/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
Tuesday, August 02, 2011
Adobe's Expressive Web
Adobe's new resource site, http://theexpressiveweb.com, showcases new HTML5 & CSS3 coding techniques, including CSS3 Animations, CSS3 Media Queries, HTML5 Canvas, Web Storage, and more! The site is organized by coding techniques, called "features" by Adobe — and provides for each feature with an overview, examples, browser support chart, detection and fallback strategies, and list of related Adobe technologies.
Monday, June 20, 2011
Expansion of TLDs
Need a change from the the old .com, .net, .biz domains? We'll look for more variety in the future. ICANN has approved the expansion of generic TLDs and will accept new TLD applications from companies/organizations to create TLDs for their brand or company names. Sound too good to be true? Well, there's a catch. With an $185,000 application fee and an annual $25,000 fee, you need deep pockets. Applications will be accepted in early 2012. Visit http://icann.org for more information.
Sunday, May 15, 2011
Mobile Apps: Basics of Web Design Review
Need to review concepts from the Basics of Web Design: HTML5 & CSS3 textbook? There's an app for that!- Android Market: Basics of Web Design Review
- iTunes App Store: Basics of Web Design Review
Thursday, April 14, 2011
Trial Version of Dreamweaver CS5
With Adobe's announcement about CS5.5 it's become temporarily difficult to find the free trial Dreamweaver download on their site. Here's a direct link to the download:
https://www.adobe.com/cfusion/tdrc/index.cfm?ref=sup&product=dreamweaver
https://www.adobe.com/cfusion/tdrc/index.cfm?ref=sup&product=dreamweaver
Wednesday, January 19, 2011
New HTML5 Logo from the W3C
The W3C's new HTML5 logo is here! Visit http://www.w3.org/html/logo for free downloads of image files, free stickers, and other fun stuff. Although some may question the need for a "logo", it's one way to spread the word about this emerging technology.
The key is the concept of progressive enhancement — use HTML5 new elements, attributes, and features to enhance web pages rather than for mission critical requirements. My new book, Web Design Basics: HTML5 & CSS3, takes this approach.
Friday, January 07, 2011
New HTML5 & CSS3 Textbook
Looking ahead to an early March, 2011 publishing date for my new textbook, Basics of Web Design: HTML5 & CSS3! The textbook takes a unique approach to prepare students to design web pages that work today in addition to being ready to take advantage of new HTML5 coding techniques of the future.
Use HTML5 Today!
To meet this challenging goal, Basics of Web Design: HTML5 & CSS3 introduces both XHTML syntax and HTML5 syntax, presents coding web pages in HTML5 with backwards-compatible techniques that work in current browsers, and also provides practice with HTML5's new features that will only work in the latest versions of browsers.
Two-Page Sections
Today's learners are busy multitaskers. Basics of Web Design: HTML5 & CSS3 is organized in two-page sections that quickly introduce the reader to new topics, provide examples, and offer hands-on exercises. This approach will get your students up-and-running quickly. Visit http://webdevbasics.net for more info and a table of contents.
Subscribe to:
Posts (Atom)