Search Results:

Fri
27
May '11

Best Tip Ever: Using Online CSS3 Tools In Dreamweaver

One of the coolest things about the development of CSS3 is all of the experimental sites and online tools being created to help us all learn the new syntax, properties, etc. There are literally tons of great ones like css3maker.com, John Allsopp’s  westciv tools, border-image.com, css3generator.com and many more. In fact, even Microsoft has gotten in the game with their test drive site for IE 9 (and Preview Release of IE 10). But even with the great enhancements to Dreamweaver CS5.5, using these tools still requires bouncing out to the browser, using the online tool and then copy/pasting the generated code back into your CSS in Dreamweaver – or does it?

Actually, one of the best features of Dreamweaver, Live View, can be used in a way that you might not have thought of. We know that Live View allows us to see the page, rendered by the embedded Webkit engine, exactly as it would appear in Webkit-based browsers. But there is also an interesting text field that becomes active in Live View at the top of the document window – an address field – just like in a browser!

The address field in Live View

And yes, you can type any URL into the field. Dreamweaver, just like the browser, will load the page in Live View. If you are in Split View mode, you might notice that the actual HTML from the page you are viewing is not there because Dreamweaver is still showing the code of your original page.

Live Code displaying the generated source

But click the Live Code button, and Dreamweaver will display the generated source of the page you are looking at — complete with all the corresponding CSS and Javascript files appearing in the related files bar. It’s a great way to learn from what others are doing.

To get the most out of this feature, I have simply created a “tools page” with links to all of my favorite online tools. In order to interact with your local tools page, you will need to choose “Follow Link” or, even better, “Follow Links Continuously” from the Live View Options menu.

The follow links continuously command

So now, when I start Dreamweaver, I immediately open this page, turn on Live View, enable the Follow Links Continuously option and then go about working on my projects. Any time that I need a gradient, transition or anything more complex that I don’t want to “think about” how to create, I switch to my “tools page” tab where all my online friends are ready to help. I can then easily copy their code into the stylesheet that I am working on.

Live View rendering Colorzilla's Gradient Maker

Let me know what you think about this – or if you have an even better “Best Tip Ever”!

Wed
25
Nov '09

MAX sneak of “Rome”

I just received the latest issue of Web Designer magazine, which includes a write-up of the many announcements and festivities that went on during the recent Adobe MAX conference in Los Angeles. If you were there, or have ever attended MAX, you know that the most anticipated event every year is known as “Sneaks”, in which Adobe engineers, product managers and evangelists get to show off technologies and projects which “may or may not ever make their way into a current or future product”.

This year, I had the pleasure of showing off an experimental project codenamed “Rome”. I’ve received literally hundreds of questions about Rome since that 5 minute demo. And, although I would love to tell you more, unfortunately at this time, my lips must remain sealed. However, for those that missed it, someone took the “liberty” of filming my presentation and posting it to YouTube. So, since it’s on the web, I thought I would help my readers out by linking directly to it. :-)

Now, just don’t ask me if/when/where/how you can get more information about Rome, ‘cuz I can’t tell you. But if you were excited by the demonstration, have thoughts about the “possible” product, feel free to leave a message or send me an email.

Fri
24
Oct '08

Dreamweaver and Ajax

Obviously one of the most stressful times in a software evangelist’s life is during the “launch” phase of a product. And, in case you’ve been under a rock, we’re in exactly such a time right now. Creative Suite 4 is not only shipping, my team and I are crisscrossing the world with seminars and at tradeshows. During this brief (um, since when is three months brief?) period of time, we will log countless miles, way too many nights in hotels, and slowly forget what “home” even looks like. And all the while, we’ll be singing the accolades of CS4.

The problem with these launch seminars is that we simply have too much to show and far too little time to do it in. Case in point, we (Jason, Rufus and myself) have just launched CS4 in Oslo, Helsinki and Stockholm. Thanks to all the folks in those three cities for spending their morning with us. All told, we’ve already seen over 2500 of our nordic friends on this tour – and we still have 5 cities in Sweden and Denmark to go!

But that’s not what I wanted to talk about… Instead, I wanted to mention a really welcome feature of Dreamweaver CS4 that I’ve simply had no time to show during the seminars. During the CS3 timeframe, Dreamweaver supported the use of our own Spry Framework for Ajax, but if you wanted to use other frameworks, it was a completely manual, done in source code, tedious operation. What’s more, since DW didn’t understand any of the JavaScript from the “foreign” framework, we spent half of our development time bouncing over to the browser.

With Dreamweaver CS4, however, the team has truly embraced the “neutral” nature that Dreamweaver long ago pioneered with its support for application server models such as ASP, ColdFusion, PHP and JSP. Now in CS4, if you prefer to work with a framework other than Spry, not only will you find support for it in Code View, you can also leverage Dreamweaver’s new Live View to see your chosen framework’s widgets rendered as they will be in the browser.

In addition to this, Dreamweaver is capable of reading and introspecting the framework in order to provide tooltips and auto-completion when typing JS functions of the chosen framework.

But you aren’t just limited to working within code – on the Dreamweaver Exchange you can already find 20 interface widgets for JQuery, MooTools and YUI, that you can download and immediately leverage in your projects.

I’ve been playing extensively with JQuery over the past few weeks and am really impressed – and perhaps even more so because I’ve been able to integrate both JQuery and Spry in my playground of applications. If there’s any interest in this, I’d be happy to share… Leave a comment, and if there’s enough interest, I’ll get a tutorial or two up here.

Now back to the playground… I’ve got too many ideas that I want to try out, and only the weekend to do it in… Skål!!!