HTML5 is about as new to me as it is to you.
I've studied everything that I will be presenting over the past three months.
HTML5 is about as new to me as it is to you.
I've studied everything that I will be presenting over the past three months.
There are 15 doctypes
Standards Doctype looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHMTL 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-strict.dtd">
HTML5 Doctype looks like this
<!DOCTYPE html>
You need only to download the library from www.modernizr.com and refer to it in a <script> element in the <head> of you page, like so:
<script src="modernizer.min.js"> </script>
It will run automatically, creating a global object with a set of Boolean properties for each HTML5 feature it can detect.
rel="archives", for referencing records, documents, etc. of historical interest.
rel="author", for referencing the author of the site's content.rel="external", to reference a document not part of the whole websiterel="start", rel="prev", rel="next" for referencing parts of a site which are assembled like a book or chronicle.rel="icon", to reference a faviconrel="license", to reference a copyright license.rel="nofollow", to suggest that the referenced link is not endorsed by the original author of the page. It usually indicates a commercial relationship, such as advertising.rel="noreferrer", instructs the browser not to leak referrer information when following the link.rel="pingback" for blogs or sites to be automatically notified when other sites link to it.rel="prefetch" can be used to indicate that preemptively caching the resource is encouraged.rel="search", to indicate that the referenced document is configured for search.rel="sidebar", for referencing a document to populate a sidebar, in a secondary browsing context.rel="tag" to indicate that the referenced document is represented by a tag that applies to the current document.<section> represents a generic section. It is useful for thematic grouping of content.<nav> can create a section of a page that contains links to other pages or parts within the page.<article> can describe a self-contained composition, with the intention of standing independently of the site.<aside> can be used to wrap content that is related to the main content of a page, but is less important or is a separate piece of information quasi-related.<hgroup> can be used to contain <header> contains introductory content, and/or navigational aids. It can also wrap a table of contents.<time> is used to contain information of a chronological nature.<mark> is used for “highlighting” information on a page.New for HTML5, the <canvas> element can render resolution-dependent bitmaps of graphs, game graphics, etc., on-demand.
canvas for IE8?Download the script from http://code.google.com/p/explorercanvas/
Then, you must place this in your <head> element:
<!--[if IE]>
<script type='text/javascript' src='excanvas.js'></script>
<![endif]-->
You can use fillStyle and strokeStyle to set colors for drawn objects. You can determine colors with hex, rgba and even hsla, with browser support.
Most popular browsers are supporting canvas as a 2D element. Some browsers, such as Firefox and Opera, are experimenting with a 3D canvas.
This example demonstrates drawing a basic triangle, using fillStyle and strokeStyle, as well as x and y values for each of the points of the triangle.
To set up a canvas, you need to define an element ID so that it can be found with JavaScript. Width and height of the canvas also needs to be determined with inline code, not CSS.
The ImageData object is achieved using a <getImageData> method. You can also do image filtering, as I've done here with a color inversion filter applied.
// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}
You can create text in <canvas>. It gives you some nice design options, and the same fillStyle and strokeStyle properties that are applied to basic shapes can work here.
You can define shadows with the <canvas> API. Determine values with context.shadowOffsetX, context.shadowOffsetY, shadowBlur and shadowColor.
Gradients can be created by providing source and destination coordinates for start and stop points. You can designate colors with hex values. You can also designate linear and radial gradients. These methods are createLinearGradient and createRadialGradient.
The game is demonstrated in Mark Pilgrim's Dive into HTML 5 and the O'Reilly book HTML5: Up and Running.
Video markup is very similar to the <img src="#"> tag. It's just <video src="##"><video>.
Player controls are not presented by default. You can build your own interface with HTML, CSS and JavaScript.
You can also have a standard control interface load by including <control> in your <video> tag.
Use the <preload> attribute if you want a user's browser to start downloading the video as soon as the page loads.
The <autoplay> attribute tells the user's browser to start downloading the video file as soon as the page loads and to play the video as soon as possible.
Usually you have to tell the browser what type of video file and codecs you used. Add this information with the "type" attribute in the source element.
Important: video files must be served with the proper MIME types.
For older browsers, you can fall back to the Flash player by coding your videos in H.264 and ACC audio in an MPEG-4 file.
You can create an object tag within a video tag and fallback to older video players gracefully because HTML5 will ignore all child elements of a video element except source.
This video was created with FireOgg, wrapped in an Ogg container and using the Theora coda for video and Vorbis codec for audio.
This API offers new property on the global navigator object, titled navigator.geolocation.
Geo location is opt-in only. Your browser can only reveal your location with your permission.
Getting the current location from a mobile user uses several different functions depending on the intended use of the geo location data.
Use watchPosition() function will callback everytime the user's location is changed. Their mobile device determines the optimum polling intervals, and send that information to your application. This can be used for updating a visible marker on a page.
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
In case of IE, you can use Gears, an open source browser plug-in configured for Mac, Windows, Linux, Windows Mobile and Android. It is useful as a fallback for browsers which do not support geolocation.
This feature enables websites to store named key/value pairs locally, within the client web browser.
The data is stored locally and never transmitted to the remote server the way cookies are.
Web storage is supported by all major browsers, including IE 8+.
HTML5 web storage is beyond the scope of tonight's presentation. It can be returned in a future session if demand for it is evident.
The Halma game in the Canvas demo uses HTML5 storage. If you make a few moves, close the browser, and then return to it later, it will remember your last play.
This feature enables websites to store named key/value pairs locally, within the client web browser.
The data is stored locally and never transmitted to the remote server the way cookies are.
Web storage is supported by all major browsers, including IE 8+.
The Halma game in the Canvas demo uses HTML5 storage. If you make a few moves and then close the browser, and return to it later, it will remember your last play.
HTML5 web storage is beyond the scope of tonight's presentation. It can be returned in a future session if demand for it is evident.
See Dive Into HTML5.
One of the great promises of "Web 3.0" is semantics. Microdata lets you create your own attributes. But there is a method to it, otherwise your home-spun attributes won't validate.
The object is to extend web pages with additional semantics outside of the standard HTML elements.
You can find this slideshow online at http://tuit.in/b1i