Mon
7
Jun '10

Using CSS3 with Dreamweaver CS5

While I truly am excited by the new semantic elements in HTML5, as well as the possibilities that things like local storage will do for expanding the capabilities of websites, I have to admit that I’m really much more excited by the shiny new toys in CSS3. And, of course, with the recently released HTML5 pack for Dreamweaver CS5, I no longer have to “try” to remember the new CSS3 properties – I get them all with lovely code-hinting and code-completion right within Dreamweaver CS5.

In the following video, I show you how to use some of the really popular new properties – like using border-radius to add rounded corners, transform to rotate elements and transitions to create the illusion of an animated rollover.

There is a definite caveat that I want to make sure to mention – since CSS3 (and HTML5, of course) is still being developed, not all of the CSS3 properties are available in Dreamweaver CS5 (and in Live View some properties do not render). But even with that caveat, Dreamweaver CS5 now really rocks with CSS3. And again, if you’ve not looked at Dreamweaver lately, you can always download a 30-day trial.

Tue
1
Jun '10

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.

Mon
10
May '10

In defense of Flash(blockers)

Over the past couple of weeks, I have really resisted weighing in on the Flash vs HTML5 pissing match that has preoccupied the blogosphere. As an Adobe employee, I obviously felt the tug to defend my company’s product and perhaps even echo Lee’s sentiment. But as an advocate of the “standards-based” web – having spent the majority of my career building HTML authoring tools and evangelizing the power of HTML/CSS/Javascript, I have been enjoying seeing the industry really begin to discuss “what’s next”.

Anyone who knows me (even internally at Adobe), also knows that I am the first person to tell you NOT to build an all Flash site – and don’t use Flash to build your site navigation – or your contact form for that matter. You see, I lived through the stupidity of the “Skip Intro” era – and spent countless hours teaching the emerging Flash designers/developers how to at least optimize what they were doing if I couldn’t convince them “not” do it at all. Back then there were all too many examples of “because I can, I should”.

Don’t get me wrong – there are times when Flash is not only appropriate, it is the only logical choice – and there are even appropriate “all Flash” applications. One great example of this is in the eLearning arena. In fact, speaking of that, it will be interesting to see how schools and other institutions react to the fact that their eLearning content won’t work on the iPlatform. But I digress.

We can waste hours discussing the pros/cons of HTML5 video, which for some reason has overtaken the discussion, but it really isn’t the point of my frustration – and others have already listed the amazing amount of problems with the current spec for HTML5 video, such as the lack of support for DRM, no alpha channel support, next to impossible syncing with timecodes, the need for multiple encodings, no ability to adjust/change streams based upon bandwidth, and the list goes on and on.

The thing that has irritated me most during the past few weeks is listening to the “Flash-haters” say things like “I can’t wait to see my last Flash ad” and “I’ll be so glad when I don’t have to look at irritating Flash crap anymore” – because I think there is one, very important piece of the puzzle that these individuals are missing. They are not “required” to look at any Flash today. Not only can they uninstall the Flash Player very simply, there are also any number of Flash blockers – plugins which turn off Flash content without uninstalling it.

But the big piece that no one (especially the “Flash haters”) seems to even be thinking about… how do you turn off content when it is built using HTML/CSS/Javascript? Think about it – let’s say that “tomorrow” all of the ad networks say “no to Flash ads” and require them in HTML5/CSS/Javascript. First, there is the challenge of HTML element and CSS class naming conventions. Imagine the chaos in your ads/pages when CSS class names or element IDs conflict, or your fancy Javascript calls an element that has the same name as one in your page/ad. Within 5 minutes of the “shift”, I will bet you that the screaming begins about “those damned Canvas advertisements that draw all over my screen”! The only solution will be to disable the very thing that it’s built with. So, go ahead, turn off Javascript – I dare you!

I guess it really boils down to “be careful what you wish for”. Like I said, in today’s web, I have the ability to decide if and/or what I want to see by installing or uninstalling a plugin, or using a plugin to block certain content. But that won’t be possible when you have no way of identifying the “advertisement” from the content of the page.

Consider this some food for thought – let me know what you think.

Fri
30
Apr '10

Hello, Creative Suite 5!

What an amazing couple of weeks! Less than two weeks ago, we announced Creative Suite 5. Of course, you know it was coming – unless you were living under a rock – because we were sneaking videos of myself and my fellow evangelists running all over the planet talking about “something”. It was an amazing press tour – but more fun than talking to the press, was seeing the reaction of our customers that got to see it before anyone else. Naturally, there were a few bumps in the road – including some curious decisions and outbursts of a certain fruit company – but now it’s here!

Creative Suite 5 is shipping!!!

So let’s get this thing cranked up…!

Watching someone install software is even less exciting than watching paint dry – but for any of you who suffered (and there are millions of you out there) through the uninstall/install process of previous versions of Creative Suite,  you can already see that Creative Suite 5 changes the game. (BTW, I would have put that video up as HTML5 video – it’s encoded as H.264 – but then I would also have to encode it into Ogg Theora to be fair AND THEN, I would still have to put it up with a Flash wrapper for the IE crowd… so… I encoded and uploaded once, and delivered in Flash. Guess those of you on the iDevices won’t be able to see it – sorry…)

Now it’s your turn – download the trial or buy/upgrade now – and let us hear from you! After all, we make Creative Suite for you.

Tue
13
Apr '10

Creative Suite 5 – this changes everything!

Unless you’ve been living under a rock, you know that it’s time for a new version of Adobe Creative Suite. And I can tell you that I am incredibly excited by CS5 – it is by far the biggest release of the suite, and packed with over 250 major features, spread across 13 products. If you missed the launch event, you can still see it on the Adobe web site.

For the products that I deal with the most, namely Dreamweaver, Fireworks, Flash and Photoshop, this release really changes the game. As you probably know, I have been involved with every version of Dreamweaver since version 2 (yes, I know that makes me really old). And every time we release a new version, there is always talk of “the best version ever”. This time around is no different – but I mean it… really, I do! And judging from the comments on Twitter during the launch event, the community seems to be blown away as well. (more…)