Firefox and Safari partially support it, Google’s Wave and Chrome projects are banking on it, and most web developers are ecstatic about what it means. It’s HTML5, and if you’re not exactly sure what it is, here’s an explainer.

Image taken from Bruce Lawson’s fantastic HTML5 presentation.

What is HTML5? Some kind of really fancy link tag?

HTML5 is a specification for how the web’s core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it’s mostly a core set of standards that only web developers really need to know. In other ways, it’s a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).

What Awesomeness can I expect from HTML5?

The big, marquee changes in HTML5 have already made some headlines, thanks to browser makers like Google, Apple, Mozilla, and others picking them up and implementing them. The shortlist:

• Offline storage: Kind of like "Super Cookies," but with much more space to store both one-time data and persistent app databases, like email. Actually, you can think of offline storage as something a lot like Google Gears—you just won't need to install a plug-in to reap the benefits.
• Canvas drawing: Sites can mark off a space on a page where interactive pictures, charts and graphs, game components, and whatever else imagination allows can be drawn directly by programming code and user interaction—no Flash or other plug-ins required.
• Native video and audio streaming support: It’s in the very early stages and subject to format disruption, but sites like YouTube and Pandora could one day skip Flash entirely to bring you streaming audio and video, with timed playback and other neat features.
• Geolocation: Just what it sounds like, but not limited to a single provider’s API or browser tool. HTML5 can find your location and use it to tailor things like search results, tag your Twitter updates, and more. Location-aware devices are a big deal.
• Smarter forms: Search boxes, text inputs, and other you-type-here fields get better controls for focusing, validating data, interacting with other page elements, sending through email, and more. It may not sound that sexy, but it could mean less annoyance as a user, and that’s always a good thing.
• Web application focus: Without breaking down the hundreds of nuts and bolts, it’s fair to say that HTML5 is aimed at making it easier to build wikis, drag-and-drop tools, discussion boards, real-time chat, search front-ends, and other modern web elements into any site, and have them work the same across browsers.

Where can I see HTML5 in action?

Ooh, good question!

From this page right here, with a soon-to-be-optional-maybe-Flash, you can check out these video demonstrations:

Google I/O 2009 Keynote, pt. 1

Firefox 3.5 Treats Videos Like Web Pages:

If you're running an up-to-date version of Firefox, Safari, Chrome, or Opera—or, basically, any regularly updated browser besides Internet Explorer—give these links a shot.

HTML5 Demos: Huge list of capability demonstrations, gracefully compiled by Remy Sharp.

Welcome to Safari: Written entirely with HTML5 and CSS 3.

YouTube in HTML5: No Flash required at all (for Chrome and Safari only, at this point).

Canvas drawing and audio

Neat interactive site that shows tweets from folks who are digging on HTML5, with streaming background audio and interactive data pieces.

Why is it being pushed? Don’t Flash and JavaScript already work?

Make no mistake, HTML5 has much love for JavaScript and its many relatives—in fact, the new markup standards make it easier for JavaScript-type code to point at, and pull from, pieces of each web page. As for Flash, and Silverlight, and other browser plug-ins, well, they are artificial solutions for a natural problem that HTML5 is trying to fix: Placing and managing interactive elements on a web page.

Besides being a major source of browser memory leaks and crashes, Flash and its brethren also doesn’t work on every platform, and has to be re-written and adapted for every new one. If you’re looking to make a clever application available to as many people as possible, a write once, use everywhere system is ideal. When more browsers and developers support HTML5's audio, video, and interaction standards, the idea of the web as the universal app store—for smartphones, for desktops and laptops, Windows, Mac, and Linux—gets closer to reality.

Apple tried to pitch this mentality to developers with their first iPhone release. That pronouncement was, to put it mildly, roundly mocked. Since then, webapps have become a lot more powerful and respectable as mainstays of productivity, and enthusiasm for the walled garden model of application markets has waned quite a bit in the minds of an increasing number of developers.

That’s not to say that HTML5-powered web applications, with their lack of serious local storage, hardware access, and serious offline capabilities, are going to make the iPhone App Store, the Android Market, or the desktop software we’re all used to obsolete. But look at how Chrome is positioning its Chrome OS for netbooks, which relies on HTML5 for offline storage: A secondary computer, in terms of hard-and-fast capabilities, but one you might use just as often, if not more, for the web-connected convenience.

How will HTML5 makes its way onto my web?

HTML5 isn’t a software release, or a web development law. It’s a voted-upon and group-edited standard, written in broad fashion to accommodate different styles of development and the different thinking among web browser makers.

Put more simply, it depends on what you’re using to surf. And what standards your web makers are following.

Firefox, Safari, and Chrome on the desktop support a few of the styles and features outlined in HTML5′s draft specifications, like offline storage, canvas drawing, and, most intriguingly, tags for audio and video that allow sites to stream multimedia files directly into a browser. Apple’s Safari for iPhone and the Android browser also support elements of HTML5, as does Opera Mobile. Want to know the nitty-gritty of where your browser stands on HTML5? Web geeks have put in the time to put it all in a Wikipedia chart.

Those audio and video tags aren't quite as liberating as they may seem. The writers of the HTML5 standard—Ian Hickson of Google and Davd Hyatt of Apple—wanted to define a single, standardized format for video streaming, but while their employers favor the H.264/MPEG-4 standard, open-source firms like Mozilla can’t abide by its patent “encumbrance,” and Opera and other web firms don’t particularly love the licensing costs. Their alternative is Theora, better known (relatively) as Ogg Theora. As it stands, HTML5 simply doesn’t require or suggest a single container format or codec to use, which could mean browser-by-browser differences down the road. Ars Technica has a good explainer on the HTML5 video codec debate.

Further reading

• HTML5 – Wikipedia: Because, seriously, where else would you start?
• HTML5: The editor’s draft of the whole darned standard.
• Dive Into HTML5: Programmer, and explainer of all things programming, details what’s different about HTML5 in an ongoing work.
• HTML5 Supersedes Web Forms 2.0: A good read on what changes with web forms in HTML5, which I’m not quite developer-y enough to concisely explain.
• The Future of HTML 5 by Bruce Lawson: Funny, digestible bigger-picture take on what HTML5 really means for the web.

---

If you’re already savvy with HTML5, what differences or improvements would you point out that we left out? Tell us what HTML5 means to you, and your browser, in the comments.

Filed under: Things I found in the Interwebs, Video by Jeremiah | No Comments »
Source: Lifehacker

Over time certain conventions and best practices have been developed to help improve the general usability of websites during their design and build. This roundup of ten usability crimes highlights some of the most common mistakes or overlooked areas in web design and provides an alternative solution to help enhance the usability of your website.

Crime 1: Form labels that aren’t associated to form input fields

Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.

Crime 2: A logo that doesn’t link to the homepage

Linking the logo of a website to the homepage has become common practice and is now second nature for (most) web surfers to expect the logo to head back home. It’s also worth mentioning the logo should appear in the top left.

Crime 3: Not specifying a visited link state

Visited link states do exactly as they say on the tin. It’s not the most advanced CSS selector, but it’s one that is often overlooked. Give users a visual clue as to which link has already been clicked.

Crime 4: Not indicating an active form field

You can use the ‘:focus’ selector on lots of elements, but it’s super handy when used on inputs and textareas to indicate that the field is active. Add CSS styling such as a highlighted border, or a subtle change to the background color.

Crime 5: An image without an alt description

This is straying a little into the realm of accessibility, but it’s still an important consideration! Remember to always add a descriptive alt attribute to your images, unless of course they are used for decorative purposes, then the ALT attribute can be left empty (but should still exist!). When using an image as a link, enter a description of where the link goes.

Crime 6: A background image without a background color

It’s common to use background images behind passages of text, but it’s worth remembering that if background images are disabled by the user, there needs to be a similar tone in the form of a background colour to avoid the text becoming unreadable.

Crime 7: Using long boring passages of content

There’s nothing more off-putting than landing on a webpage that’s laid out as a continuous passage of text. Break up your content with images, headings and clear sections to make it easier to scan, read and digest.

Crime 8: Underlining stuff that isn’t a link

Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.

Crime 9: Telling people to click here

The words click here have been around since the dawn of the Internet, but have been shunned aside in favour of more usable options. Using the words click here requires the user to read the whole sentence to find out what’s going to happen. Instead, describe what’s going to happen in the actual anchor link text.

Crime 10: Using justified text

This is another tip that’s heading a little deeper into accessibility but is also an important point to consider. Justified text might look at neat and square to the eye, but it can generate some real readability problems, particularly for Dyslexic users who can find it troublesome to identify words due to the uneven spacing of justified paragraphs.

Similar Posts

• 10 HTML Tag Crimes You Really Shouldn’t Commit
• 15 Must Read Articles for CSS Beginners
• How to Convert a Photoshop Mockup to XHTML/CSS
• How to Build a Simple Button with CSS Image Sprites

Filed under: Things I found in the Interwebs by Jeremiah | No Comments »
Source: Line25

LMAO

A great rendition of a famous Pulp Fiction scene performed by some Browsers we love, and love to hate.

Pulp Browsers : Elliott Kember dot Com.

Filed under: Funny, Things I found in the Interwebs by Jeremiah | No Comments »

Was going to start a web design company here in Vegas… Then I found out this guy is already doing it.  Guess I am going to find something else to do to make a living.

Filed under: Funny, Things I found in the Interwebs by Jeremiah | No Comments »