HTML5 has been generating a lot of excitement in the web community as of late. It advances HTML so much that Steve Jobs commented in April 2010 it will render Adobe Flash unnecessary! This was somewhat sensational considering the ubiquity of Flash. For example, Flash is the technology used by the very popular site youtube to display every single one of their videos in users' browsers. There are many who think that if youtube move to HTML5 it could really be bye bye Flash (for example the popular Lockergnome). This is something I find difficult to disagree with.
Now, I've just finished reading the excellent 'HTML5 Up and Running' by Mark Pilgrim and I put together a list of F.A.Q. about HTML5 which I hope gives you a good feel about what HTML5 brings to the table.
Enjoy :-)
HTML5 General
How do I declare my page to be HTML5?
Web Worker
References
Now, I've just finished reading the excellent 'HTML5 Up and Running' by Mark Pilgrim and I put together a list of F.A.Q. about HTML5 which I hope gives you a good feel about what HTML5 brings to the table.
Enjoy :-)
HTML5 General
How do I declare my page to be HTML5?
Simply start it with: <!DOCTYPE html>
Give some examples where HTML5 tries to standardise things?
- The <nav> element is used for navigation. Before developers would use their own CSS classes to style html lists to get the effect of tabs and navigation lists.
- HTML5 introduces elements such as <footer>,<header> . Before developers would write their own custom CSS classes for headers and footers. These CSS classes would have their own naming which could vary from developer to developer.
Browser Support
Is it possible for browsers to support some html 5 features and not others?
Yes. Firefox 3.0+, Safari 3.0+, Chrome 3.0+ all support canvas. However, if you want geolocation well then it's Firefox 3.5+, Safari 5.0+, Chrome 5.0+.
What is the best way for your page to detect what html 5 features are supported?
Use the modernizr javascript library. It's brilliant. Not only can it very easily confirm if features such as canvas, video, webworker are supported it can also detect more advanced things such as exactly which video formats (ogg, h264) are supported
Canvas
Is it possible for browsers to support some html 5 features and not others?
Yes. Firefox 3.0+, Safari 3.0+, Chrome 3.0+ all support canvas. However, if you want geolocation well then it's Firefox 3.5+, Safari 5.0+, Chrome 5.0+.
What is the best way for your page to detect what html 5 features are supported?
Use the modernizr javascript library. It's brilliant. Not only can it very easily confirm if features such as canvas, video, webworker are supported it can also detect more advanced things such as exactly which video formats (ogg, h264) are supported
Canvas
What is a canvas?
A canvas is rectangle which can be defined for your web page. There are a range of simple APIs which can be used to draw on the canvas. They are from the very simple to the very sophisticated - which can be used for animations and even games such as Mutant Zombie Monsters by Bill Scott
Can I have more than one Canvas on the same page?
Yes. And give each canvas its own id and you can access it like any other element.
How do I get Canvas support for IE7, IE8?
Download the ExplorerCanvas Javascript library (http://code.google.com/explorercanvas/)
Data Storage
Name some differences between HTML5 data storage and cookies?
A canvas is rectangle which can be defined for your web page. There are a range of simple APIs which can be used to draw on the canvas. They are from the very simple to the very sophisticated - which can be used for animations and even games such as Mutant Zombie Monsters by Bill Scott
Can I have more than one Canvas on the same page?
Yes. And give each canvas its own id and you can access it like any other element.
How do I get Canvas support for IE7, IE8?
Download the ExplorerCanvas Javascript library (http://code.google.com/explorercanvas/)
Data Storage
Name some differences between HTML5 data storage and cookies?
- Cookies don't store any information. They are just pointers to information that the client can send to the server.
- With Cookies the data being stored is server side. HTML5 data storage is client side.
- Storage mechanism are going to be more sophisticated server side. HTML5 client side data storage will have limitations.
Form Autofocus
What's the big deal with autofocus in HTML5?
What's the big deal with autofocus in HTML5?
- Now defining which part of the page gets default focus is easy
- All form controls can have the attribute autofocus
- Because autofocus can now be done in a standardised way, (i.e. no need for complex javascript) it's easier for a browser to provide the option to disable it.
Geolocation
What kind of location information do I get with Geolocation?
The location information that you can get is basically any of the properties of the position object. These are pretty self explanatory and include:
What kind of location information do I get with Geolocation?
The location information that you can get is basically any of the properties of the position object. These are pretty self explanatory and include:
- coords.latitude
- coords.longitude
- coords.altitude
- coords.accuracy
- coords.altitudeAccuracy
- coords.heading
- coords.speed
- timestamp
Does the browser always have to ask the user before any calls can be made to geolocation APIs?
Yes.
Input Types
Give some examples of the new input types supported in HTML 5?
Search boxes, Spin Boxes, Sliders, Color Pickers, Telephone numbers, Web Addresses, Email Addresses, Calendar date pickers, Months, Weeks, Times.
Placeholder text
Does HTML5 include support for placeholder text and what is it?
Placeholder text is default text in an input field used to prompt the user what they need to write.
And Yes its supported.
Yes.
Input Types
Give some examples of the new input types supported in HTML 5?
Search boxes, Spin Boxes, Sliders, Color Pickers, Telephone numbers, Web Addresses, Email Addresses, Calendar date pickers, Months, Weeks, Times.
Placeholder text
Does HTML5 include support for placeholder text and what is it?
Placeholder text is default text in an input field used to prompt the user what they need to write.
And Yes its supported.
Video
So all I need to do to show a video on my page is use the <video> element?
Well no. You need to ensure the web page supports:
So all I need to do to show a video on my page is use the <video> element?
Well no. You need to ensure the web page supports:
- the containing format (e.g. mpeg - 4, ogg, WebM, Audio Video Interleave)
- the video codec format (e.g. H.264, Theora, VP8)
- the audio codec format used in the video (e.g. mp3, vorbis)
There is no single combination of container and codecs that works in all browsers.
The <video> element makes it easy to define a preference and fallback formats.
How do I include controls (play, stop, etc.) for my video?
Just include the controls flag. e.g. <video src="myvideo.webm" width="100" height="50" controls></video>
The <video> element makes it easy to define a preference and fallback formats.
How do I include controls (play, stop, etc.) for my video?
Just include the controls flag. e.g. <video src="myvideo.webm" width="100" height="50" controls></video>
Web Worker
What is a web worker?
A web worker is a way of running javascript in the background on a separate thread.
You can spawn multiple web worker threads.
Give an example of when you would use a web worker?
A web worker is a way of running javascript in the background on a separate thread.
You can spawn multiple web worker threads.
Give an example of when you would use a web worker?
If you had to do some number crunching or background I/O and didn't want to block out the user.
Anything else...
Name some other HTML5 features you haven't even covered here?
Name some other HTML5 features you haven't even covered here?
Microdata, offline and caching features, the <article> element which allows developer more control over headers, svg support and presumably many more...
References
- Excellent online ref for HTML 5 http://diveintohtml5.org/
- The brilliant modernizr library which lets you check what html 5 support you have http://www.modernizr.com/
- Great demos of HTML5 canvas http://www.canvasdemos.com/
- Great HTML5 demos and tutorials http://www.html5rocks.com/en/tutorials/workers/basics/
- The WHATWG community http://www.whatwg.org/
- More HTML5 demos http://html5demos.com/
No comments:
Post a Comment