Dreamweaver CS5 and HTML5
Unless you’ve been living under a rock, you know the underlying language of the web, HTML, has begun to (finally) evolve once again with the browsers slowly beginning to support pieces of HTML5 and CSS3. With the release of Dreamweaver CS5, the world’s leading web authoring tool has made huge strides in embracing the evolution of the web, providing an unparalleled ability to style themes for any PHP-based CMS system (WordPress, Drupal and Joomla out of the box, as well as home-grown PHP-based systems). However, for those who have already upgraded and who want to leverage HTML5 and CSS3, you’ve no doubt found that the only “apparent” support for HTML5 in Dreamweaver CS5 is the addition of the HTML5 doctype in the New Document dialog. But now, that’s all changed!
During the keynote session at the Google I/O Conference in San Francisco, Adobe’s CTO, Kevin Lynch, demonstrated an extension to Dreamweaver CS5 which not only adds the new HTML5 semantic elements, but also properties for CSS3, to the authoring environment. With this addition, Dreamweaver CS5 users are provided with code hinting for HTML5 and CSS3 in Code View.
Of course, HTML5 and CSS3 are not “finished” yet, and as such, the team can’t “know” what’s going to be in the final specification. Therefore, the extension provides support for the elements and properties that are “the most complete” at this time. In other words, the elements and properties that, not only appear to be “mature” in the W3C specifications, but that are also gaining support among the browser makers. To this end, basic code hinting support is provided for these CSS3 properties specific to individual browsers (-moz, -webkit and -o).
As a page comes together from the code perspective, it’s also important that we see how that code is being rendered, and this is an area that Dreamweaver has truly shined over the last several releases with its Live View feature (an implementation of WebKit). And with the new extension, the underlying engine of Live View gets an overhaul to allow for the rendering of these new semantic elements, including the much hyped <video> and <audio> elements, along with rendering support for some of the most common CSS3 properties.
And for those looking for a little help in getting started, the extension adds a few new layouts to the CSS Starter Layouts (File>New) which have been marked up with the new HTML5 semantics.
Of course, there’s still work to be done – and rest assured, as Lea Hickman points out in an article in the New York Times, the Dreamweaver team is hard at work and laser-focused on creating the best environment for HTML5 and CSS3 development. Stay tuned for more news and updates as they become available. And if you haven’t already done so, download the Dreamweaver CS5 trial for yourself.
June 4th, 2010 at 3:41 am
Hi Greg, awesome video, I was disappointed when I learned Dreamweaver CS5 didn’t include HTML5 code hinting, however after installing the ‘HTML5 Pack’ extension, CS5 now gives a create platform for getting started and experimenting with HTML5.
I assume that Adobe didn’t include the HTML5 pack as standard because HTML5 isn’t ‘finished’. What do you think Greg?
June 4th, 2010 at 12:06 pm
@James – Yes, that’s exactly correct. When we started developing DW CS5, the W3C was still moving forward with XHTML 2.0 – so the move to HTML5 happened at a very late stage in our development cycle. Therefore we decided to add the functionality “later” as an extension, rather than endanger the development that was already underway on CS5. And, as you point out, it’s still not finished – therefore, we will continue to pay close attention to its development and strive to make DW CS5 a great environment for HTML5, CSS3 and future web technologies.
September 3rd, 2010 at 12:48 pm
Great post Rich!
HTML5 seems to be a spec that will take years to become fully established, and is barely capable of competing with flash right now. If Microsoft have proved anything with silverlight, it’s that being as good as flash isn’t enough, you really have to stand head and shoulders above it to be noticed and taken up.
One of the original appeals of flash was browser congruency that you couldn’t get with javascript and html. If that’s still going to be an issue, html5 is going nowhere.
February 8th, 2011 at 12:19 pm
@WebProject – HTML5, CSS3, and javascript have already outdone flash in some areas. Flash is currently lacking in the fact that it requires a plugin to work in any browser, a plugin that will not work on iPhones. For those of us that create websites for a living that is a problem, when the client looks at their new website on their mobile and sees none of the flashy content they paid for you to provide they will be disappointed. Even though HTML5 is not yet complete it already provides many cross browser solutions to your web development needs. One thing has changed since you left your comment, Microsoft has started pushing IE9(currently in beta) which has promised to support HTML5 and CSS3. This doesn’t mean you need to abandon Flash yet however. You can start using HTML5 today and still use flash with it if you so wish with little difficulty. If you already know HTML4 or XHTML you are already well on your way to knowing HTML5.
On a side note I would like to see a visual development platform like Flash that uses HTML, CSS, and javascript to create dynamic content. My fiancée is a creative person that likes to use Flash and I would hate for her to lose her development platform of choice. Designers aren’t coders, while my fiancée can code I can see how it could suck the creative flow she has going if she has to stop creating and start coding.
@Greg – Are you aware if there are any Flash replacement projects in the works at Adobe? This would be a dream and help to alleviate some of the fears my fiancée has of becoming a “dinosaur” if Flash dies.