All posts tagged ‘HTML5’

File Under: HTML5
Aug
17
2011

A Quick Guide to Using HTML5 Forms

By

Web forms are everywhere—contact forms, comment forms, sign up forms—these days you’d be hard pressed to find a website without a form. Sadly, HTML wasn’t originally developed with forms in mind and working with forms on the web is more difficult than it should be. Even something as basic as adding a date-picker to a search form requires JavaScript. But HTML5 forms will change that.

In HTML5 forms get a shot in the arm with dozens of new tricks, including, yes, a built-in date-picker. As with much of HTML5, the new form elements are designed to make developers’ lives easier by off-loading tasks like rendering a date-picker to the web browser.

If you haven’t had a look at the new HTML5 form elements, Robert Nyman, a Technical Evangelist for Mozilla, has a very thorough post examining all the new input types, attributes and elements for HTML5 forms. Even better, Nyman has plenty of examples, demos and sample code to show how each element works. As you can see from the screenshot above (taken in Opera) the default datepicker is pretty ugly, but fear not Nyman covers how to style the new elements as well.

Of course, as with all things HTML5-related, the new form tags are not supported in every browser. In fact, when it comes to HTML5 forms, Opera is the only browser that’s anywhere near full support. The developers over at Wufoo have a page devoted to tracking HTML5 form support in browsers, which is well worth checking out before you decide to dive in with both feet.

Like much of HTML5, support for the new form elements is uneven and it might be a bit early to rely solely on HTML5 form tools in production sites, but it’s never too soon to learn the basics.

See Also:

Tags:
File Under: HTML5, Web Standards
Aug
16
2011

W3C’s New ‘Community Groups’ Give Everyone a Voice in HTML5

By

The World Wide Web Consortium (W3C), the web’s governing body, has launched a new "Community Groups" plan designed to help speed the development and standardization of HTML, CSS and other web tools.

Despite the W3C’s role as overseers of web standards, the W3C has never moved at the speed of the web. Much of the HTML5 and CSS 3 that powers the web today won’t officially be a standard for several more years. For those hoping to move the web forward the pace of the W3C sometimes makes the organization seem like a joke. Ten years to standardize HTML5? But HTML5 is already here.

Well, now is your chance to do something more than whine about the slow pace of standards on your blog. The W3C’s new community groups are designed so that anyone can contribute to the development of HTML. Just head over to the site and join a group that interests you. There are eight groups at the moment, including groups dedicated to topics like semantic news, web payments and web education.

The groups also go a long way toward making the W3C more accessible for mere mortals. With the new community groups you don’t need to be a Google or Apple employee to catch the attention of the W3C’s members, you just need to sign up and post your ideas for everyone to read.

The web is changing at an ever-accelerating pace and the W3C knows that if it doesn’t keep up, it’s going to be left behind. The W3C has already been abandoned once. When the W3C decided in 2004 that it would bow out the HTML standardization process, browser makers and web developers wasted no time creating their own separate standards body known as the Web Hypertext Applications Technology Working Group (WHATWG). The WHATWG is largely responsible for creating what we now call HTML5.

Clearly the web will move forward with or without the W3C, though as those who lived through the dark days of the blink tag can attest, the web is a better place with the W3C and web standards at its back.

See Also:

Tags: ,
File Under: CSS, HTML5, Web Basics
Aug
10
2011

Popular HTML5 Boilerplate Releases v2.0

By

The developers behind HTML5 Boilerplate have released version 2.0 of their boilerplate HTML, CSS and JavaScript templates for quickly prototyping HTML5 designs.

You can grab a copy of HTML5 Boilerplate v2.0 from the HTML5 Boilerplate website.

Version 2.0 of HTML5 Boilerplate has several significant changes, including ditching the traditional reset stylesheet for normalize.css. Normalize is a bit different in that it retains useful browser defaults and only resets those elements necessary to achieve cross-browser default styling consistency. It’s a minor point, but my favorite part of normalize.css is that it doesn’t litter your dev tools (Firebug, WebKit Inspector, etc) with endless reset rules.

Other new features in HTML5 Boilerplate include support for Respond.js (which helps if your site uses a "mobile first" approach), faster build times (up to 80 percent faster according to the release notes) and, with v2, your IE 6 visitors will now be prompted to install Chrome Frame.

For more details on everything that’s new in HTML5 Boilerplate v2, head on over to the official site and read through the changelog. Perhaps the most refreshing thing about this release, is this note in the FAQs:

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we’ve fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new stuff is probably more effort than it’s worth.

However, the .htaccess and Build Script you probably didn’t edit and therefore can be dropped into your existing sites with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.

See Also:

Tags: ,
File Under: HTML5, Web Standards
Aug
10
2011

W3C Publishes an HTML5 Spec for Web Developers

By

Chances are, despite embracing the tools therein, you’ve probably never read the HTML5 spec. We don’t blame you. Frankly the worst part of this job is when we have to translate gibberish from the actual HTML5 spec into words normal humans can understand.

The problem is that the HTML5 spec is written for browser makers, not web developers, and contains highly technical and very esoteric language.

Earlier this year the WHATWG released a much more readable "web developer edition" of the HTML5 spec. Now, not to be outdone, the W3C’s HTML Working Group has published a draft of its own more readable spec, the HTML5: Edition for Web Authors.

The W3C’s web developer version of the spec is still more technical than the WHATWG’s version, and nowhere near as nice to look at, but at least you can read the HTML5 spec without all the notes about conformance criteria and other browser maker-specific lingo. Flipping between the two web developer versions it’s actually not hard to wrap your head around when to use <section> and when to use <article>.

Now, if only we never had to explain the difference between the WHATWG and the W3C HTML Working Group again.

See Also:

Tags: ,
File Under: HTML, HTML5, Multimedia, Software & Tools, Visual Design, Web Standards
Aug
2
2011

Review: Adobe’s Edge Offers Web Animation Sans Flash

By

Adobe has released a preview version of a new HTML animation tool dubbed Edge. Together with Wallaby, Adobe’s Flash-to-HTML conversion app, Edge is part of Adobe’s push to remind the web that the company is more than just its much-maligned Flash plugin.

Edge has been released as a free, beta public preview and is available for download through the Adobe Labs website.

Edge is not intended to replace Adobe Flash. At least not in the short term. Instead Edge is aimed at Flash animators looking for a visual way into the world of HTML, CSS and JavaScript-based animations, particularly the relatively simple animations often currently found in Flash-based advertisements.

HTML, especially some of the new elements in HTML5, combined with CSS 3′s animation syntax offers web designers a way to create sophisticated animations without requiring users to have the Flash plugin installed. That’s a good thing since no iOS user is going to have the Flash plugin.

Unfortunately, HTML, CSS and JavaScript don’t offer any easy way to create animations. Developers comfortable writing raw code in text editors have, thus far, been the driving force behind web standards-based animation. Designers and animators accustomed to development tools like Flash, which offers visual layouts and drag-and-drop animation, have been left out of the web standards animation trend.

Edge is Adobe’s attempt to bring the good parts of the Flash development app — visual animation tools, keyframe-based timelines and a stage where you can drag-and-drop objects — to the world of web standards-based animation. But of course, instead of publishing your animations as Flash files, Edge publishes them as web standard HTML, CSS and JavaScript.

Like Hype (see our review) and other HTML animation apps out there, Edge looks and behaves much like Adobe’s Flash development environment with a timeline, keyframes and editing tools that will look familiar to Flash developers. If you know how to use Flash, you’ll be up to speed with Edge in no time.

The Edge interface should look familiar to anyone who has used Flash.

Despite Adobe’s marketing efforts, there’s almost nothing about Edge that is HTML5. Adobe is hardly alone in its misleading use of the HTML5 moniker. Both Hype and Sencha Animator claim to be “HTML5″ animation apps and, like Adobe, neither generates much of anything that isn’t in the HTML4 spec.

In its current form Edge will export your animations using div tags, some CSS animations, a fair bit of JSON and a combination of jQuery and some custom JavaScript to hold everything together.

Why go with div and CSS-based animations when there’s Canvas and SVG? Well, for one thing, this is a very early preview and Adobe claims that eventually Edge will support canvas and SVG (in fact Edge already has some support for importing SVG file). A Mozilla developer raised this question in the Adobe forums and Adobe’s Mark Anders chimed in to say that, “we seriously considered canvas, but current performance on mobile browsers (especially iOS) is very bad.”

Anders goes on to note that iOS 5 will remedy much of iOS’s canvas performance woes, and Adobe is clearly looking for developer feedback on where to go with Edge. If you’ve got strong feelings about where Edge should focus its efforts, head over to the forums and let Adobe know.

While Edge is a long way from a finished product, this early release shows considerable promise. If you’re a Flash developer looking to expand your repertoire to include HTML, CSS and JavaScript animations, Edge just might help. For a nice overview of how to use Edge be sure to check out Mark Anders’ Edge overview movie on Adobe TV.

See Also:

Tags: , , ,
« OLDER POSTS