HTML5 Doctor » flash http://html5doctor.com helping you implement HTML5 today Wed, 16 May 2012 11:31:21 +0000 en hourly 1 http://wordpress.org/?v= Your Questions Answered #12 http://html5doctor.com/your-questions-12/ http://html5doctor.com/your-questions-12/#comments Thu, 12 Aug 2010 13:45:15 +0000 Richard Clark http://html5doctor.com/?p=2369 The latest round of HTML5 prescriptions is in! This week, we'll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

]]> Doctor treating a patient illustration The latest round of HTML5 prescriptions is in! This week, we’ll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

HTML5 vs Flash

Yaniv opens the great debate:

Hi, why is it said all the time that HTML 5 is going to replace Flash and in the near future flash will not be used again?

This is over-simplifying.

Historically, Flash has been used especially for games, video, and rich interaction because it wasn’t possible to do these things natively (i.e., without using a plugin). HTML5 introduces <canvas> and a native <video> element, and recently JavaScript libraries like jQuery make it much easier to create rich interaction. An additional benefit of Flash was its ubiquity, but thanks to the iPhone and now iPad, this isn’t true anymore.

I expect the usage of Flash to decrease as browsers support web standards, but Flash will still be used for a while to come. The enormous number of pages using Flash aren’t going to vanish (or change) overnight.

Peace – Oli

Body or div?

Erik asked:

Hi there, I have noticed that several implementations of HTML5 (including this blog), set a width of the body rather than using a wrapping div-tag to create a centered layout.

It somehow feels awkward to set a width of the body, but is that the actual, proper way of doing it? I understand that a wrapping div is non-semantic, but how would one deal with background images etc, if the body has a width set to it? I’m guessing it would work to set background images on the html-tag, as well, though.

If you need a <div> for styling purposes, that’s perfectly fine. You could also achieve the same effect by doing as you suggest and setting a background on the <html> element. For more, take a look at our recent article You can still use <div>.

If you need any help on using <body> as a wrapper, check out Kroc Camen’s How to Centre and Layout Pages Without a Wrapper.

Peace – Oli

Rich text editor

Dave asked:

We use our own bespoke CMS and part of the admin has a Javascript based rich-text editor (ck editor i think)for editing the main content of the pages.

The problem we’ve come across is that I’m building the site in HTML5 and it appears the text editor doesn’t recognise the new HTML5 tags (section, aside, article etc.) Do you know of any text editor that can handle HTML5 as I can’t seem to find anything in terms of Javascript based components or any other alternative. Many Thanks

Generally, JavaScript-based WYSIWYG editors are complete shite (excuse my British ;-). Unfortunately, I don’t think this is gonna change soon because the established players were developed in the bad old days and have the code baggage to prove it. Perhaps with IE9 someone will cut the support anchor on older versions of IE (Safari, etc) and actually do a decent one, but don’t hold your breath :-)

You can customise most editors, however, and possibly even add your own elements. As a start, here’s an article I wrote on hacking FCKEditor into some semblance of shape for MT4.

Beyond that, the editor’s documentation and forums are the place to check.

In addition, migrating to HTML5 is not all-or-nothing. You can get benefits from just the doctype (better validator, more detailed spec). Also, <div> is still a perfectly fine HTML5 element. Should new structural elements overwhelm the editor, you can always do something like <div class="article"> and <div class="nav"> (so-called HTML4.5 ;-). This way you’re not using new elements, but you’re still benefitting from thinking in HTML5 semantics, and should you want to change down the road, you’ll already be half way there.

Peace – Oli

Recommended charset for HTML5

Guy asked:

I have always used ISO-8859-1 as things like £ work better (being UK based)

But I have noticed a strong tendency for UTF-8 when it comes to HTML5. Is there a reason for this? what do you recommend?

Many thanks, Guy

The HTML5 spec says use UTF-8: “Authors are encouraged to use UTF-8”. The reason is UTF-8 is a superset of ISO-8859-1, and can represent many more characters. To get a £ symbol, you can write &#163; (or &pound;), but with UTF-8, just writing “£” is fine.

In fact, using UTF-8 in HTML5, we only need to escape & and < (and maybe ‘,”, and > depending on context — e.g., alt text). All other UTF-8 characters can be used as-is (e.g., “” not &ldquo;&rdquo;). Just look at the source for this paragraph!

Peace – Oli

Mobile doctype

Franceso asked:

Hello guys! I was wondering, since I found no reference at all online… does the HTML5 doctype cause problems on mobile browsers (besides the iPhone/iPod/iPad. I tested it and it works like a charm)?

I don’t mean “advanced” HTML5 properties like video or even article and other semantic tags. Just the simple HTML5 doctype, that causes no problems whatsoever with classic desktop browsers. Because I tried it, and it does seem to cause layout problems on Symbian (the only other browser I could test it).

Any suggestions? Because I do use the video tag in there (to degrade gracefully in all mobile browsers but the iPhone’s, I’d hope), but I hate using that with the classic mobile XHTML doctype declaration. Thanks!

The HTML5 doctype was chosen to be backward compatible with current browsers, and for desktop I think that’s completely true. I doubt many mobile browsers were tested, though. Anything not running Opera Mini or Mobile Webkit is most probably still partying like it’s 1999, and YMMV. I’d recommend testing thoroughly.

By the way, anything that doesn’t support the HTML5 doctype definitely will not support <video>. Hope that helps.

Peace – Oli

Got a question for us?

That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Your Questions Answered #12 originally appeared on HTML5 Doctor on August 12, 2010.

]]> http://html5doctor.com/your-questions-12/feed/ 2 Your Questions Answered #10 http://html5doctor.com/your-questions-answered-10/ http://html5doctor.com/your-questions-answered-10/#comments Fri, 09 Jul 2010 12:45:00 +0000 Richard Clark http://html5doctor.com/?p=1991 The clinic is getting busy with more HTML5 ailments. This week, we'll cover using sections within a footer, <canvas> vs. Flash security, why HTML5 elements are treated as inline, using offline with storage, and marking up block quotes.

]]> Doctor treating a patient illustration The clinic is getting busy with more HTML5 ailments. This week, we’ll cover using sections within a footer, <canvas> vs. Flash security, why HTML5 elements are treated as inline, using offline with storage, and marking up block quotes.

Footer with sections

Tommie asked:

Hi, I’ll get to the point right away. I want to use, lets say 3 section elements inside a footer each floating left and inside each of this sections I have some standard information. Is this the right way to go, or should I put my section elements outside the footer and only put copyright text etc. inside the footer?

Thanks!

You could use a <section> within <footer>. but <footer> is a sectioning root anyway <footer> is flow content and can contain sectioning content. If you want them to appear in the outline within the footer, then it makes perfect sense to do as you suggest.

See more in Jack’s article on the <footer> element. There are also some more examples in the spec.

Cheers, Rich

<canvas> vs. Flash (security and copyright)

John asked:

I’m seeing lots of opinions that the canvas element might free us of the Adobe Flash monopoly, but what mechanisms can we use to protect our works when using straight HTML and JavaScript?

Right now I’m thinking about simple flash games, but I’m sure this is a concern for others wanting to use (free) HTML methods to perform functions now reserved more for flash.

Thanks for any input.

I’m not sure of any security mechanisms that we can use to protect <canvas> content. It isn’t really any different than an image or any other type of resource. Having said that, decompilers can circumvent some of Flash’s security measures as well, so you may not be much worse off using <canvas>.

If we come across anything, we’ll be sure to let you know.

Cheers, Rich

HTML5 tags inline?

Tami asked:

So, I’ve been experimenting with the new HTML5 elements, and one frustration I have is understanding the native display of the new elements, and how it works within the document flow. So far, experimenting with them has shown them to be very unpredictable. At best, they’re kind of behaving like a bastard span. They seem to be behaving like inline elements but that seems like it is wrong. In some cases, setting to display: block gives the expected behavior, but on the footer tag, it’s not interacting with floated elements properly.

So, are these new elements inline or are browsers still just trying to catch up? I tried looking in in the HTML5 working draft spec, but so far I am not understanding the way its written (HTML4′s specs clearly spelled out whether an element was display or inline).

Here’s an article from my personal blog that I wrote a while ago describing why browsers treat HTML5 elements as inline.

Thanks, Bruce.

Offline + Storage

Dear Doctor, I’m trying to work out if HTML5 will be able to do the job that I want. I have a number of documents (PDF, PPT, etc.) that I want to share with people in my team. These documents may change from time to time. Also, the people may not always be connected online.

Would it be possible to “cache” documents in an offline database in the browser so that when they are not connected they can still view them but when they are, they get the latest versions (which also refresh the cache)?

That way I can do a fairly pretty interface for sorting these documents so that they can easily find them.

Thanks in advance for any help you can provide.

You can, but I would strongly encourage you to think carefully about whether it’s worth it.

You can include these “assets” in the manifest, which will make the files available to the offline applications (note that this isn’t storage, just caching, which is what you’re after).

The problem is that when the visitor first hits the page with the manifest — which contains all the PDFs, PPTs, etc. — it will download all of these files. This is the bit that I’d encourage you to consider carefully. To compound that, I believe there’s a 5MB limit on the cache, so you might run into problems if you’re trying to cache more than that.

I’ve not covered offline cache on HTML5 Doctor yet (though it’s on the list), but I have described the process on my 24ways article.

If there are new versions of the cached files, you need to change the contents of the manifest — e.g., include a version number, which will trigger a download of all the assets again. Not ideal, but that’s the current situation.

Hope that helps a bit, Remy

Correct markup with blockquote

Phil asked:

Hi, in HTML 4.0 Strict and XHTML 1.0 Strict, text inside a blockquote element is required to be nested inside another block-level element, e.g. p.

In HTML5 that requirement seems to have been relaxed, as the following element validates successfully:

<blockquote>This is a blockquote.</blockquote>

The HTML5 spec uses the p element in the usage examples, but does not mention whether it is required.

Can you please confirm if this requirement has now been deprecated?

Great question. As I expected, this validates:

<!doctype html>
<meta charset=utf-8>
<title>blockquote test</title>
<blockquote>Tiger tiger burning bright</blockquote>

We double-checked with the WHATWG mailing list and confirmed that <blockquote> can contain ‘flow’ content (i.e., text, paragraphs, etc.).

To summarise, it would be valid not to further mark up content within a <blockquote>, but authors are encouraged to use a <p> (or other more appropriate element).

Bruce

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Your Questions Answered #10 originally appeared on HTML5 Doctor on July 9, 2010.

]]> http://html5doctor.com/your-questions-answered-10/feed/ 8