All posts tagged ‘Web Standards’

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: HTML5, Web Standards
Feb
23
2011

HTML5 for Web Developers

By

If you’ve ever tried to wrestled your way through the complexities of the HTML5 specification, we’ve got good news — there’s now a “web developer edition.”

The main HTML5 spec can be overwhelming for web developers trying to understand how to use HTML5 in their sites and web apps. Much of the spec is written for browser makers and other implementers, not web developers, and contains highly technical and very esoteric language.

If all you want to do is know when to use <section> and when to use <article>, the HTML5 spec isn’t very helpful. To eliminate the confusing nature of the spec, the WHATWG, one of the two groups that oversees the creation of HTML (see our overview of the difference between the WHATWG and HTMLWG) has released a version of the HTML5 spec written specifically for web developers.

The web developer version of HTML5 strips out all the elements that are only of interest to browser makers, and focuses on developers, making for a more readable, understandable document. In other words, it makes sense to mere mortals.

As an added bonus, the new website hosting the web developer version has a much cleaner, simpler design that doesn’t look like it crawled, zombie-style, out of 1994.

Now you’ve got no excuse for not reading up on HTML5.

See Also:

Tags: ,
File Under: Browsers, HTML5, Web Standards
Jun
4
2010

Apple’s HTML5 Showcase Less About Web Standards, More About Apple

By

Apple posted a showcase of “HTML5 and web standards” on its website Thursday that highlights the level of support for the emerging standard in the company’s Safari and Mobile Safari browsers.

It’s nice to see Apple (or anyone for that matter) talking about HTML5 and mentioning more than just video. The site showcases HTML5 audio and canvas elements, as well as CSS 3 transitions and typography tools. It also has a nice photo gallery that looks and behaves just like former Apple designer Mike Matas’ amazing photo-gallery site.

Unfortunately, the way Apple presents the showcase, you would think Safari is the only web browser that supports these new web standards.

In fact, visit the site with any other browser and you’ll get a message telling you to download Safari. Surely your browser must be inadequate? Actually, your browser is probably capable of handling the showcase just fine, but ultimately the showcase isn’t about web standards: It’s about Apple’s version of web standards.

Apple is detecting the user-agent string (the bit of identifying data your browser passes to a web server when it requests a page) and only allowing Safari users to see the galleries. Other browsers are effectively cut off, regardless of the fact that many can render them just fine.

Worse, Apple’s CSS code uses only WebKit-specific selectors — for example, -webkit-border-radius instead of the actual CSS 3 selector border-radius. WebKit is the open source engine that powers Safari and Google Chrome. Firefox, IE and Opera can’t understand this code as clearly.

So much for web standards. Not only is user-agent sniffing absolutely the wrong way to determine the HTML5 capabilities of the current user, the implicit suggestion is that HTML5 is something only Apple supports.

Microsoft recently published its own HTML5 showcase to hype the coming release of Internet Explorer 9, and its demo pages are viewable (and work) in any non-IE browser with the proper support. Mozilla’s HTML5 demo pages are geared to work with experimental builds of Firefox, but at least other browsers aren’t blocked, and most of the demos actually work in Chrome.

To test Apple’s demos in other browsers, we spoofed the user agent in Firefox and Chromium and found that, while several examples do indeed fail in Firefox, most worked just fine. Naturally, everything works without issue in Chromium, because it uses the same WebKit rendering engine as Safari. Apple is being disingenuous by making its browser seem more compelling than others. That’s not surprising, but we’d be disappointed to see independent developers follow suit. [Update: As several commenters, and John Gruber point out, the version WebKit that Chromium uses doesn't yet support all of CSS 3's 3D transforms, which renders this demo incomplete, though still functional, in Chrome/Chromium.]

So how should you detect whether the current browser can display whatever bit of HTML5 or CSS 3 you’re using? The long-established best practice is to detect for features, not browsers. To find out which features are available in the current browser isn’t hard — there are even several free, open source libraries out there that do just that.

Modernizr is one of our favorites. This handy little JavaScript library can detect which HTML5 features are available. Then, armed with that information, you can then create conditional JavaScript statements to offer HTML5 to those browsers that support it, but still fall back on other content for those that don’t.

There are however, some cases where Modernizr might be overkill. For example, if you just want to embed some HTML5 video, you only need to detect one element. If Modernizr isn’t right for your project, check out Mark Pilgrim’s list of ways to detect HTML5 elements. The list of elements and how to detect them is an appendix to Pilgrim’s book in progress, Dive Into HTML5.

The list isn’t just elements, though it does cover those as well. But it also shows you how to detect API support for things like offline storage or geolocation, as well as SVG, SVG-in-HTML and even which video codec the current browser supports.

One thing Pilgrim doesn’t cover is CSS 3 features (CSS 3 != HTML5). To detect which CSS 3 features are available in the current browser you can use Modernizer or you can roll your own code using a library like jQuery, which includes a support() method to check a wide range of browser features before executing code.

See Also:

Tags: , ,
File Under: Glossary
Feb
15
2010

CSS

By

CSS, or cascading stylesheets, allow you to define how web page elements are displayed.

Specific margins or colors can be associated with elements on the web page; Headers and links, for example. When style sheets are applied to a new page, the elements are changed according to the specifications of the style.

Tags: , , ,
File Under: Glossary
Feb
15
2010

Document Object Model

By

The document object model (DOM) is the specification for how objects on a web page are represented.

A DOM defines each object on a web page (images, text, scripts, links, etc.) and also defines what attributes are associated with these objects and how they can be manipulated.

Tags: , ,
File Under: Glossary
Feb
15
2010

ISO Entities

By

ISO (International Standards Organization) entities, sometimes referred to as character entities, are a group of ASCII characters that can be used in HTML to display special characters. For example, you can’t simply type the registered trademark symbol ® from your keyboard since it’s not a standard ASCII character; it’ll show up as garbage on your web page. But if you use the ISO entity equivalent, the web browser will be able to interpret the character correctly.

For example, the umlaut ¨ appears if you write 
¨
in your HTML code.

Tags: ,
File Under: HTML, HTML5, Web Standards
Jan
14
2010

What Comes After HTML5? Just HTML

By

The future of the web is fast approaching. HTML5, the successor to today’s HTML 4, the lingua franca of the web, has reached the Last Call stage and is beginning to look like a finished spec. While it will be some time before HTML5 can be called complete, forward-thinking browsers already support much of the spec.

HTML5 represents the biggest leap forward in web standards in almost a decade, but what comes after HTML5? HTML6?

As it happens, no. The WHAT Working Group, which, along with the World Wide Web Consortium (W3C), is helping to create HTML5 and beyond, has already decided to move to a non-versioned development model after the release of HTML5. That means, in the future, there will simply be HTML.

What will this HTML look like you ask? Well, Mark Pilgrim, who works on the WHAT Working Group, has started a new series of posts on the group’s blog entitled What’s Next in HTML?

The answer, at least for now, is a possible new tag: <device>.

As you would expect <device> will offer web developers a way to access devices, for example your PC’s webcam or perhaps your mobile device’s accelerometer.

The obvious application for the device tag is video chat — something currently only possible using proprietary tools like Adobe Flash. As Pilgrim points out in his post, if you combine the existing video tag and web socket tools of HTML5 with the new device tag, all the elements necessary for an online video chat application are in place.

Before web developers get too excited it’s important to realize that <device> is a long, long way from being a real HTML element. As Pilgrim notes: “the entire device API is still in its infancy… nobody has even started implementing a prototype of that piece yet, and the whole idea might be scrapped.”

That shouldn’t be too surprising for those of you following the bleeding edge of the web, after all we’ve already been teased with the promise of a single video codec only to see that vanish.

But with any luck, the device tag won’t suffer a similar fate and one day web developers will be able to take advantage of yet another set of tools that were once the sole province of desktop software.

See Also:

Tags: , ,
File Under: CSS, HTML, Web Apps
Dec
1
2009

Zen Coding Auto-Generates HTML from CSS

By

Writing HTML can be something of a pain. Angle brackets and long tags names mean you’ll spend more time typing awkward code than your average programming task requires. Good text editors and development environments like BBEdit, Eclipse or Adobe Dreamweaver can help simplify your HTML workload, but what we’ve always longed for is a Markdown-like way to create raw HTML.

Smashing Magazine’s Sergey Chikuyonok recently unveiled a programming tool called Zen Coding that isn’t quite Markdown-level bliss, but it’s pretty close. Chikuyonok created Zen Coding from a very basic idea: what if CSS selectors could not just target HTML tags, but also generate them?

In other words, if you’re using Chikuyonok’s tools, writing CSS like this:

div#content>h1+p

will generate HTML markup like this:


<div id="content">

   <h1></h1>

   <p></p>

</div>

Veteran coders will likely protest that there are already tools like SparkUp and Haml which do very similar things (though with a slightly different syntax). However, Zen Coding offers some nice plugins for popular text editors that SparkUp lacks, and Zen Coding isn’t language-specific like Haml (which is primarily of use to Ruby on Rails developers).

Under the hood, Zen Coding accomplishes two things. First, it expands abbreviations written the form of CSS selectors, and second, it’s able to match tag pairs so it correctly closes your tags.

Consider this somewhat more sophisticated bit of code:

html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a

A mere single line of code. When run through Zen Coding’s expander and tag matching tools, it becomes a basic HTML page:


<!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">

<head>

   <title></title>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

</head>

<body>

   <div id="header">

       <h1 id="logo"></h1>

       <ul id="nav">

           <li class="item-1"><a href=""></a></li>

           <li class="item-2"><a href=""></a></li>

           <li class="item-3"><a href=""></a></li>

           <li class="item-4"><a href=""></a></li>

           <li class="item-5"><a href=""></a></li>

       </ul>

   </div>

</body>

</html>

The syntax is a little more complex than simple CSS selectors. For instance, the item-$*5 bit in the example above is used to generate five <li> tags, but it won’t take long to commit the few quirks to memory.

The easiest way to wrap your head around the power of Zen Coding is to watch the demo movie that Chikuyonok put together.

A new way of writing HTML code using CSS-like selector syntax

Our only real gripes with Zen Coding are that it lacks HTML5 support and insists on XHTML syntax. However, since HTML5 isn’t a standard recommendation and there are only a handful of tags where the difference between XHTML and HTML is important, we’re willing to overlook those deficiencies.

If you’d like to give Zen coding a try, there’s a sample online editor available, just use ctrl+, to expand your selectors. If you like Zen Coding’s approach, there are a few plugins available for text editors. Head over to Smashing Magazine and grab a plugin for Aptana (cross-platform), Coda (Mac), Espresso (Mac) or Emacs (cross-platform). The abbreviation expanding tools also work in plugins for TextMate, TopStyle, Sublime, GEdit and the editArea online editor.

See Also:

Tags: , , ,
File Under: Web Basics
Jul
11
2008

Opera Releases Online Web Development Course

By
Opera, the company behind the browser of the same name, is trying out a new way to help drive web standards: teaching. The browser is known for rendering web pages under strict adherence to established web standards. Now the company is releasing an online course, or Opera Web Standards Curriculum, to help teach budding website developers those standards right from the start. The site and curriculum, released in association with the Yahoo! Developer Network, covers basic subjects such as HTML, CSS and design theory. The course authors are all established web developing professionals within industry, and their course material helps guide students on programming websites using the latest approved web standards. Opera’s hope is to teach good web development practices to the next generation of web developers. The tutorials are all released under the Creative Commons license, meaning you can share the work all you want for non-commercial purposes as long as you use attribution. Using web standards is a good thing. Typically web developers have to modify code to ensure the web page appears correctly on the most popular browsers, such as Internet Explorer and Firefox. The more developers adhere to web standards, the more likely browsers will too — and vice versa. If web standards are adopted by all browsers and developers, it will make everyone’s job easier. These days, most web programs need to detect browser types and work around browser incompatibilities to ensure the page displays correctly. Opera is headed in a good direction by teaching people to code correctly from the start, hopefully reducing the probability of poor site code in the future.
Tags: , ,