I have finally started diving into more HTML5 lately and have some good links to help get you started. The syntax itself is somewhat new, but the hard part in my opinion is knowing what browsers support what. The easy answer seems to be Chrome 5 supports the most, followed by Safari 5, then Firefox, and lastly Internet Explorer 8 (with almost no support, shocking!). I have moved to Chrome as my default browser now for quite a few months since it just supports so much more of the standards than the others.
The new syntax and tags make a lot of sense one you get the hang of it and see the reasoning behind it. The CSS3 and JavaScript enhancements are also pretty slick. Some of things MooTools offers are now integrated as native functionality. I still plan on using MooTools to ensure cross browser support though.
Adobe has released a Dreamweaver CS5 extension that adds in support for HTML5 (including CSS3). The WebKit engine itself has been updated to support the new tags and rendering needed to work with HTML5. Live view and design view have these engine updates implement. Also remember since live view runs WebKit, any -webkit css properties will render just fine. I know Dreamweaver doesn’t always produce the best code, but this extension still seems pretty cool and should be a great learning tool. Adobe also announced they will support VP8 (Google’s new open-source video codec) going forward in its Flash player.
As noted on Adobe Labs, here is what the HTML5 pack offers:
Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
Updates code hinting for new attributes and values in existing HTML tags.
Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
Updates Live View to support <video> and <audio>. (Requires Quicktime installation)
Improved rendering for CSS3 in Live View.
Adds HTML5 starter layouts to the New Document Dialog box.
Offers better rendering for new tags in Design View.
Here is a video that explains some more. It’s a flash video though, so that is sort of an epic fail.
There is a pretty sweet HTML5 JavaScript function called postMessage. Basically, this function can be used to send simple data (i.e. a string of text) between 2 different domains. I got this working by having an iframe embedded in my main page with the source of another website. Using postMessage, I can send and receive data from the main page and iframe even though they are different domains! Traditional methods of interacting between a page and an iframe of different domains don’t work due to security issues. It obviously wouldn’t be very safe to allow an iframe to arbitrarily call methods of the parent window without the main page’s permission.
window.postMessage is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol (usually both http), port number (80 being the default for http), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.
The function is called using this syntax:
otherWindow.postMessage(message, targetOrigin);
otherWindow is a reference to a window object such as the main page or the embedded iframe
message is a string (i.e. this could be simple text or a json object)
targetOrigin is the url that is able to receive this message - this can be set to * for all domains, but it is more secure to explicity set the origin
I have finally started diving into more HTML5 lately and have some good links to help get you started. The syntax itself is somewhat new, but the hard part in my opinion is knowing what browsers support what. The easy answer seems to be Chrome 5 supports the most, followed by Safari 5, then Firefox, and lastly Internet Explorer 8 (with almost no support, shocking!). I have moved to Chrome as my default browser now for quite a few months since it just supports so much more of the standards than the others.
Adobe has released a Dreamweaver CS5 extension that adds in support for HTML5 (including CSS3). The WebKit engine itself has been updated to support the new tags and rendering needed to work with HTML5. Live view and design view have these engine updates implement. Also remember since live view runs WebKit, any -webkit css properties will render just fine. I know Dreamweaver doesn’t always produce the best code, but this extension still seems pretty cool and should be a great learning tool. Adobe also announced they will