Slashdot Mirror
How To Use HTML5 Today
snydeq writes "InfoWorld's Dori Smith offers developers a hands-on guide to using HTML5 today. 'Many of the media reports about HTML5 have focused on the politics, the "not until 2022" sound bite, or on HTML5's prospects as a "Flash killer." The reality of HTML5 is simply that it's the long-needed and long-overdue update to HTML4 — and you can start to implement it today,' Smith writes. Video, semantic tags, smart form input validation — Smith steps through several HTML5 features that can already be implemented, while noting several other presentation features that will soon be on their way. Smith also discusses IE work-arounds, such as HTML 5 Shiv and Google Chrome Frame."
Smith also discusses IE work-arounds, such as HTML 5 Shiv
Shanks a lot for the info ::fft fft::
Living With a Nerd
BLINK
We wait around while the W3C tries to pull it's thumb out of it's ass.
How hard is it to decide on a new standard? Do the members not check their email more than once a year?
"My God...it's full of trolls!"
Is HTML 5 still structured like XHTML? I hope that it is, because one of the biggest pains in the HTML standard was the inconsistent syntax. I think a strength of strict XHTML was that it could be easily parsed by an XML parser, and if we are going back to the syntax of HTML 4 I think that's a step backwards.
Beware of bugs in the above code; I have only proved it correct, not tried it.
Is also a great resource. With less ads, things broken up by chapter, examples, how to detect if something is enabled, etc.
http://diveintohtml5.org/
But why do I have a sinking feeling that adoption of this new standard will be held back by Internet Explorer's atrocious handling of it?
I mean, IE7 is meant to be the most advanced and standards compliant IE there is, and yet it STILL can't render pages correctly; pages that Firefox, Safari, Opera and Konqueror all have no problems with.
THE HONOUR OF THE KNIGHTS - CC Licensed Sci-Fi Novel
I predict that in a single year from now, the vast majority of browsers being run will be html5 ready; it's only been in the past few years that the browsers began self-updating; everyone wants html5, and so developers will be firmly able to count on it existing very soon.
slashdot: where everyone yells sarcastic metaphors to themselves to understand the issue
The sooner the better, IMO. Flash is just a web killer. Every other time Adobe updates it (which is all-too-frequent), the thing gets unstable to the point of crashing IE. I've got a couple of pages that I have to view with Flash turned off completely so that I can even view them without crashing. It's ridiculous from a company the size of Adoble and something as pervasive as Flash that it's written as poorly as it is. And that's ignoring how much a dozen Flash ads on a page slows the browser to a crawl. Jobs is correct in this case - Adobe Flash is garbage.
What should I be using? (Or I shouldn't care?)
HTML is not a finished standard. Should this prevent people from starting to use it? No, in fact, hell no, we should start using it right now to increase the uptake and motivate the developments of better technologies for utilizing it. A trial by fire will by itself weed out the un-needed portions of HTML 5 and perhaps show the usefulness of features that would otherwise be left out. Should IE's abysmal standards compliance prevent you from writing properly formated code? No, again, you should always motivate the use of new web technologies for helping to implement an advanced and open web.
(Read the "print" version of the article, instead of the "tiny blocks of text spread over many pages of ads" version.)
I have misgivings about HTML5. It gives the page more control, and the user less. That's been a trend in HTML for years, and it's getting worse.
I'm dreading "canvas". Ad blockers need to get smarter. Noticed that popups are winning over Firefox's popup blocking? We're also going to see pages that use 100% of the CPU just for display. We're going to need a browser option for "don't run canvas code for windows that aren't on top.
The "input type" mechanism for forms is lame. There are a number of standard types like "tel", but it's just text with no line breaks. They should have provided for either regular expressions or syntax like the COBOL Picture clause ("CREDIT_CARD_NUMBER PIC 9999-9999-9999-9999").
Dynamically-loaded fonts have been working for some time now in all the mainstream browsers. (IE6 and Firefox 3.5 were the last mainstream browsers not to have it.) We've been playing with that for our steampunk site. Downloadable fonts without anti-aliasing turn out to look ugly for small font sizes, because most of the display-type fonts have too much detail and not enough hinting for small font sizes. (In an annoying piece of Apple incompatibility, the iPad requires fonts in SVG, of all things. Everybody else, including Microsoft, is going to Web Open Font Format.) I'd recommend against using this feature much unless you have a good sense of typography. (Bad example: our steampunk search engine.)
Smith steps through several HTML5 features that can already be implemented, while noting several other presentation features that will soon be on their way.
So - I'm supposed to start implementing cutting edge changes for my production sites, when the browsers that support those changes are "soon to be released"?
Smith also discusses IE work-arounds, such as HTML 5 Shiv and Google Chrome Frame."
Soo... now I'm already having to code workarounds before the standard is even official? Again - thanks, no. I'll wait until it's ratified as a standard, and the first revision of major browsers offers compliance.
Multi-column (even with basic support), and full support of font-face, is going to go finally enable real layout.
Can you imagine inDesign, or Quark (or Pagemaker, etc..) without multi-column support?
Are there ANY newspapers that don't support multi-column layout?
Meanwhile, I'd like to see varying width/varying shape columns, with reflows, and proper column break hints.
The current support in Firefox/Safari/Chrome is much appreciated, though. (IE doesn't have it at all!)
Example multi-column layout with font-faces: http://www.futureclaw.com/articles/visionary-futurist-syd-mead.html
I don't understand the point of having multi-column as part of HTML. Multi-column layouts exist because of a number of properties of print layout that do not apply to the web. Web pages are not fixed size. They are not restricted in any direction, but they are commonly expected to not have a limited vertical dimension. Assumptions of fixed sizes have a tendency to get broken on web pages. And multiple pieces of complete content rarely appear on a single page. Multi-column is a print concept, but the web is not print.
It's because page-width is variable that multi-columns are needed. There is a visual usability limit to column sizes, about 5-10 words or so.
It is a mistake to think that print properties do not apply to web. The same visual rules apply to web, or anywhere.
It is quite simple and always error free! Ideal for blogs and flash pages where content is not paramount.
/>
<!doctype html>
<html
Once you start despising the jerks, you become one.
Ugh... wall of text with two columns? That means the user has to scroll down a dozen screens, then back up, then down a second time. It works when you're reading a magazine or your monitor is tall enough to have all the text on one screen, but neither is the case for most web sites.
Actually, that page is an excellent example of why you shouldn't use a display font for normal text.
With a system that does anti-aliasing of text (Windows 7, Vista(?), newer MacOS, newer Linux, etc.) it's not too bad. If your system doesn't, it looks awful. It looks terrible in Windows XP and earlier, even if you have a current browser. It's definitely not something ready for wide scale deployment given the current state of client platforms. I'm trying it for the amusement of the steampunk community.
Those are actual 19th century fonts, scanned in from a book of type styles circa 1900 and vectorized.
Are there any good photo / video web albums that use HTML5 to good effect yet?
I'm kinda hooked on http://marginalhacks.com/Hacks/album/ , which has the simplest, most straightforward interface of all the other things I've tried. And it makes a good attempt at handling video. I have a simple shell script that imports pics from my Canon camera, converts the mjpegs to .mp4, and tosses it into my ~/public_html/pictures directory indexed by Album.
http://gallery.menalto.com/ is also one of my favorites, but it's a bit too labor intensive for a photo archive... I do try to load some of the nicest shots in it, though, for all the comments and other features..
Have you actually tried reading multi-column pages on the web? It is a pain in the ass. Instead of just scrolling down as you read, you scroll down to the bottom of the first column, then scroll back up to the top, then scroll down again to read the next column, etc. It is pointless, and offers zero advantages to the reader. The only people clamoring for it seem to be layout artists raised on print layout; I can't think of a single case as a reader where I would prefer multi-column over single-column layout for an article. Yes, there may be a usability limit to column width - but on the web there is no limit to the vertical dimension, so this really doesn't matter.
The one place multiple columns in an electronic medium makes sense is where you can fit everything on a single page by doing so, and in order to be readable that means knowing the size of the screen your readers will be using - if you can't guarantee that, just use a single column. Pretty much everyone is used to scrolling down as they read, it is quite easy and seamless.
Multi-column has nothing to do with page width - yes, there will be significant space "wasted" in a single-column layout, but so what? It is much better than the alternative of having to scroll up and down as you read.
if you want multi column that bad its just an extra 42 chars for two columns and additional 9 per column.
$ unzip, strip, touch, finger, grep, mount, fsck, more, yes,fsck,fsck,fsck,umount, sleep
Multi-column can actually prevent scrolling entirely, by using the horizontal space instead of forcing you to scroll vertically.
Don't blink. Blink and you're dead. They are fast, faster than you could believe, don't turn your back, don't look away, and don't blink. Good luck.
Well ain't that a big fuck you to the user. No web design should ever disable features the user finds useful.
Give me Classic Slashdot or give me death!
It's because page-width is variable that multi-columns are needed. There is a visual usability limit to column sizes, about 5-10 words or so.
That does not follow. Yes, a 60 character column is optimal, but that doesn't mean you have to shove a bunch of columns right next to each other. One article should be one long column. Scrolling is easy, and it doesn't force us to keep moving our eyes from top to bottom like multi-column does. A single column would leave lots of whitespace, but so what? I'm not looking at the whitespace, I'm looking at the column. If anything, having more than one column is distracting.
Give me Classic Slashdot or give me death!
HTML 5 really only makes sense for backends where I/T can dictate browser policies. For instance at my last two jobs I/T has dictated the use of the latest version of FireFox, its been pretty sweet. Unfortunately, most web designers and developers still need to do things the IE 6 way on frontends.
Isn't HTML5 a freaking working draft...? Wake me up when we have a real spec
Indeed.
Users are the least capable of determining the quality of their own experience.
If what you said is true, newspapers would all end up being one long scroll.
It is easier to scan across several short columns, than to go down one long column.
Newspapers have physical limitations that web pages do not. Ideally a newspaper would be several long scrolls, one per article. We have the freedom to do that on the web and we should.
Give me Classic Slashdot or give me death!
Please go work on Gnome or something. The rest of us will be enjoying features we like.
Give me Classic Slashdot or give me death!
Huh? That would be a scrolling nightmare.
Sure enough, looking at the link provided, it's totally unreadable. The information on the page is out of context with the rest of the information on the page, the text providing context is off screen below. Instead of being able to quickly read or skim any of it, I gave up and closed the tab, returned here to report.
You might only have a hammer in your toolbox, and believe everything you see is a nail, but it's not. Newspapers needed the crutch of multiple columns because their format was hopelessly wide. Web pages have the opposite problem, they are infinitely tall. (One of the wonderful attributes of the Readability tool is to increase a web pages width to fill the screen.)
Worse, more web access is being done on mobile devices, thankfully that site was one column in Opera mini, I suppose we'll have to spoof to make it readable on other browsers?
It's not a mistake to think that print properties do not apply to the web, it's a mistake to misapply properties designed to overcome one liability, to media that has the opposite liability!
PS: Below you claim, "Multi-column can actually prevent scrolling entirely, by using the horizontal space instead of forcing you to scroll vertically." Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
...at least not in its non-XML form (check out the doctype for starters). If you've wanted to cope with your typical "in the wild" web page over at least the past 10 years, you've needed a special HTML parser anyway - SGML wasn't enough.
What HTML5 has tried to do is codify how to recover from errors so hopefully if you do choose to make non-validating HTML5 pages there is a greater chance that all browsers will recover the same way.
WOFF is in Chromium's webkit but seemingly not mainline webkit.
...as well as experts.
No, it's not. Not until browsers implement a real hyphenation and line-breaking algorithm like that found in TeX. Until then, web typography will continue to look like the crude output of a word processor, no matter how many pretty fonts you make your readers download.
One of the wonderful attributes of the Readability tool is to increase a web pages width to fill the screen.
The eye most easily reads columns that are no longer than 80 characters (width: 40em in CSS). But modern PC monitors are 2560 pixels wide. At the default font-size: 16px, that's 320 characters or 160em, and the eye has a hard time finding the start of the next line of text. That's why on monitors at least 1600 pixels wide, I tend to split the screen down the middle. Windows 7's window manager has the "snap" feature, and Windows XP's has Ctrl+right click other window > Tile Vertically.
Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
But narrower columns also reduce the amount of leading (space between lines) needed to keep the eye from jumping the track. So even if you do need 2em of space between columns, you might still break even.
The one place multiple columns in an electronic medium makes sense is where you can fit everything on a single page by doing so, and in order to be readable that means knowing the size of the screen your readers will be using - if you can't guarantee that, just use a single column. Pretty much everyone is used to scrolling down as they read, it is quite easy and seamless.
Actually, there's at least one more case: where the user isn't reading sequentially at all. Wikipedia often uses multiple columns for footnotes, and that works excellently. They take up less vertical space, and it's no harder to read (since you're only reading one footnote at a time anyway, and probably not reading any at all).
MediaWiki developer, Total War Center sysadmin
Web pages can be infinitely tall or infinitely wide. Imagine a page with columns of text that scrolls only horizontally. Could work on phones too. I've never seen such a page, but it could improve the readability of pages. I know I can read a paper newspaper article faster than the online version, due (I believe) to the narrow columns of text. Or perhaps it is because I lose my position for a second when I scroll.
Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
FYI, white space is a major boon to reading retention. YesIcouldwriteallmysentenceswithnowhitespace orpunctuationasthatwouldminimizethetotal spacerequiredbutitseemstomelikeitmightbeabadidea.
Just to prove my point, /. would not allow me to type the last sentence with no spaces. So, I had to add two just to pass their filter. For additional fun, try reading ancient Hebrew, where they understood that not only were spaces unnecessary, but so were vowels and punctuation.