Web Teacher » HTML5

Browser Support for new HTML5 Structural Elements

vdebolt — Fri, 27 Jan 2012 14:01:19 +0000

The new structural elements in HTML5 include section, article, aside, hgroup, header, footer, nav, figure, figcaption, time, and mark.

First, let’s look at support in Internet Explorer. Starting in version 9 of IE, there is support for all the new elements. Versions prior to that provided no support, not even partial.

Other browsers have been supporting these elements for some time. Firefox support extends back to version 6. Firefox is currently at version 9. Chrome, now at version 16, has supported these HTML5 elements since version 13. Safari provided partial support before version 5. Full support began in version 5. Safari’s current version is 5.1. As for Opera, partial support began in version 11, full support in 11.1. Opera is currently at 11.6.

On the mobile side, iOS has supported everything since iOS4. iOS is currently at version 5. Even iOS3 had partial support. Opera Mini is providing partial support in the current version 6. However, Opera Mobile has offered full support since version 11.0. Opera Mobile is currently at 11.5. Android versions 2.2 and above, including the current 2.3/3.0, have full support.

When only partial support is provided, you can use CSS to declare a display:block rule for all the new elements and workaround the problem.

Check out HTML5 Please for information about current support (and workarounds) for everything in HTML5.

Useful links: Video, Access U, WordPress widgets

vdebolt — Thu, 26 Jan 2012 16:07:49 +0000

Video for Everybody! “Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 element, falling back to Flash automatically without the use of JavaScript or browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash) and on many browsers and platforms.”

A Knowbility conference is coming up on the West Coast. It’s Access U @ CSUN, toward the end of February. Learn from accessibility experts such as Shawn Henry, Jennison Asuncion, Denis Boudreau, Molly Holzschlag, Derek Featherstone and others.

An excellent presentation from Kathy Gill on using widgets in WordPress.

Review: HTML5 and CSS3 Visual QuickStart Guide

vdebolt — Wed, 11 Jan 2012 21:31:54 +0000

HTML5 & CSS3 Visual QuickStart Guide (7th Edition)by Elizabeth Castro and Bruce Hyslop is the latest edition in the Visual QuickStart Guide series about HTML and CSS. A couple of changes are immediately noticeable about the book. Elizabeth Castro now has a co-author after producing 6 editions of this book on her own. And the book reflects a change in design Peachpit is putting into all its VQS books with full color and a generally brighter appearance.

While Peachpit can take credit for the new look, I can see the influence of Bruce Hyslop here, too. Having read, dog-eared, and dreamed my way through the first six editions, I see a change in these books that I think Hyslop must be responsible for. There is a different tone, the sidebars are lengthier and pull in a considerable amount of information about HTML5 and CSS3 from blogs and articles by a number of web design experts.

There are 21 chapters taking over 500 pages. Some of the chapters are fairly massive. “Video, Audio, and Other Multimedia” gets a 38 page treatment, “Tables” on merits only 5 pages. The chapter “Defining Selectors” is particularly good. Here’s the full table of contents.

Web Page Building Blocks
Working with Web Page Files
Basic HTML Structure
Text
Images
Links
CSS Building Blocks
Working with Style Sheets
Defining Selectors
Formatting Text with Styles
Layout with Styles
Style Sheets for Mobile to Desktop
Working with Web Fonts
Enhancements with CSS3
Lists
Forms
Video, Audio and Other Multimedia
Tables
Working with Scripts
Testing and Debugging Web Pages
Publishing Your Pages on the Web

If your budget only allows for one HTML5 and CSS3 book, this book is a terrific way to invest your money. I’ve reviewed HTML5 for Web Designers and Introducing HTML5 on this blog. I think this book is better than either of those books. That’s not saying the two books mentioned are not excellent books, because they are. I’ve read both of those books carefully and I still learned new and helpful things from HTML5 and CSS3. Plus, the VQS style is inherently easy to use with each topic detailed in small step-by-step bits. It’s so easy to find the one thing you need to know at any given moment with a VQS book.

Another advantage of this book over the others I mentioned is that it can get a beginner going but it also offers a lot of good information for the experienced HTML and CSS wonk. If you’re teaching either of these topics, this book is classroom gold.

Definitely recommended.

Summary: Complete information about HTML5 and CSS3.

A review by Virginia DeBolt of HTML5 and CSS3 (rating: 5 stars)

Useful links: Mobiles, Advent, more Mobile

vdebolt — Fri, 23 Dec 2011 13:29:40 +0000

Top Ten Tests for Alternatives on Mobiles. “The tests below are just a subset of mobile accessibility guidelines that should be followed and focuses purely on alternatives for screen reader users.”

HTML 5 and CSS3 Advent. A web dev’s advent calendar.

Mobile HTML5. Charts for devices and what they support.

Review: Introducing HTML5

vdebolt — Thu, 22 Dec 2011 16:05:34 +0000

product

Introducing HTML5 (2nd Edition) by Bruce Lawson and Remy Sharp is from New Riders (2012). The book includes everything from descriptions of new structural elements (like article, nav, and aside) to canvas, data storage, enabling offline, and drag and drop. It even includes some things that are not actually part of HTML5, like geolocation. There are many example codes, lots of JavaScripts and help with using new APIs to make your pages do all sorts of HTML5 tricks and magic.

In my opinion, the core audience for this book is the back-end developer who wants to write the scripts and do the programming to make HTML5 perform services that were not available before. The front-end developers will find the first few chapters helpful, but may be less interested in all the programming details in later chapters. (Front-end folks might consider HTML5 for Web Designers instead.)

The authors get a resounding +1 for including accessibility information about everything they discuss.

Here’s a look at the full table of contents.

Main Structure: basics about doctypes, structural elements and CSS
Text: new structural elements and how to use them properly, the document outline, WAI-ARIA and more
Forms: new input types, new attributes, validation
Video and Audio
Canvas
Data Storage: web storage, Web SQL, and more
Offline: the cache manifest, applicationCache and more
Drag and Drop: how to, interoperability
Geolocation: API methods
Messaging and Workers: chat, messaging, threading
Real Time: web sockets, server-sent events
Polyfilling: Patching Old Browsers to Support HTML5 Today: feature detection, various scripts, Modernizr examples

The book is written with a sense of humor and warmth that keep even the most tedious information from becoming boring. This is done in large part with humorous examples and illustrations. But beyond writing style, these guys really know what they are doing, and they want you to be able to do it, too. If you are looking for help with anything listed above in the book’s contents, you’ll find it here. The code examples from the book are all available for download, making the many snippets of HTML, CSS and JavaScript shown even more easy to use.

Definitely recommended.

Summary: Excellent guide for the developer who wants to put HTML5 to use right now.

A review by Virginia DeBolt of Introducting HTML 5 (rating: 5 stars)

Useful Links: CSS Layouts, Sliders, 2011

vdebolt — Wed, 14 Dec 2011 14:23:54 +0000

The Future of CSS Layouts. It’s coming and it’s gonna be good. Check out this exciting post by Peter Gasston at .net.

What you need to know about the HTML5 Slider Element. There is no slider element in HTML5, the post is talking about the new input type ‘range’ combined with the JQuery function called ‘slider.’ If you can get past that, the rest of the post is useful.

What I Learned About the Web in 2011. Of all the things I’ve read and reread and loved at A List Apart over the years, I love this post more than anything I’ve ever seen there. It’s like a big, beautiful Christmas present to the web design community.

Useful links: Forms, WeTopia, Moodle, 24 Ways

vdebolt — Fri, 02 Dec 2011 13:50:09 +0000

How to Make Forms more Usable with HTML5 is a good tutorial from Steven Bradley.

The new WeTopia game on Facebook is described by TechCrunch. This game is a perfect example of what Jane McGonigal and other thinkers say about using game theory to create social good.

NC State U evaluates the accessibility of Moodle 2.1.1.

If you are like me and your subscription to 24 ways has been languishing quietly in your feed reader since last December, you know that 24 Ways is back. If not, be sure to check them out and have a great December with 24 Ways.

Useful links: Adaptive Design, nested figures, Susan Kare

vdebolt — Mon, 28 Nov 2011 15:14:49 +0000

Nice article on Opera Dev by Chris Mills about Adaptive Design with media queries.

Nested Figure Elements on Paciello Blog.

The Sketchbook of Susan Kare: The Artist Who Gave Computing a Human Face. Did you know about Susan Kare? I’d never heard of her before. I certainly think a mention of her contribution to the GUI needs to be included in Introductory courses on history of the Internet and history of computing.

Adobe changes approach to Flash Player for Mobile

vdebolt — Thu, 10 Nov 2011 13:41:27 +0000

Adobe announced yesterday that it will stop developing the Flash Player for mobile devices. They will continue to support the Flash Player on desktop devices.

Their statement said,

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.

Adobe also claims to be committed to using HTML5 on mobile devices. Adobe has made some moves in the direction of HTML5 in Dreamweaver CS 5 and CS 5.5. (I expect the next version of Dreamweaver to be much more oriented to HTML5.)

Useful links: Image Styles, HTML5 book, web standards

vdebolt — Tue, 25 Oct 2011 13:17:21 +0000

CSS3 Image Styles is a terrific tutorial explaining how to use CSS3 and background images to do some very cool things.

You can now read HTML5 for Web Designers by Jeremy Keith online. This is an excellent book, go read it. The site is built in HTML5. Look under the covers.

I’d like to examine this infographic of the history of web standards. I can’t zoom it large enough to read. That’s my problem with most infographics. Got any good ideas about how to make it readable?