Introduction
Welcome to Design View #51.
You know, it's easy to justify NOT going to conferences. After
all, they cost you money. They cost you time you could be earning more
money.
However, sitting
here two weeks after Web Directions
South 08, the payoffs are much clearer.
Now it's easy to talk about the obvious benefits -- what you take away
from listening to some of the experts in your field talk about
how what they do.
I'll revisit those idea in the months ahead.
But for me, the real value comes between
sessions and at the multiple nightly events. For once you're in the rare
situation where you can joke about RSS or 'whale fails' or FTWs to the
stranger next you, and know they'll 'get it'.
With an automatic ice-breaker like that, if you don't come away with a
pocketful of email address, phone numbers, IM contacts, LinkedIn
connections, Tweeps and (GASP!) friends, you
probably need to look at your personal hygiene.
And remember, a great many of these people will know stuff that you
don't. The fun is finding out what that is.
Now to start devising my bold and cunning plan to get to SXSW.
Hmmmmm....
Today, however, there's only one topic on my mind -- the recent lauch of
Dreamweaver CS4, and what's in it for you.
Enjoy.
Alex Walker
Editor
SitePoint Design View
HostGator eats up the Competition with their newly
priced plans!
Whether you are a web designer,
or a small site owner; HostGator offers a web hosting plan to fit your
needs. With their Hatchling
Plan starting at $4.95 ranging to their Reseller
Plans and Dedicated
Servers you will definitely have room to grow.
Host Unlimited
sites on our Baby Plan!
- Disk Space: 600
GB
- Bandwidth: 6,000 GB
Along with superior
support and a features like instant backups, 99.9% Uptime plus an all new
45 day money back guarantee you will be glad you chose HostGator.
Sign
Up Now and Receive $9.94 OFF!
Coupon: SITEPOINT
Summary
6 Things To Like About Dreamweaver CS4
5 ... 4 ... 3 ... 2 ... 1 ... Dreamweaver CS4 is
GO!
Yes, Dreamweaver CS4 officially hit the shelves on Wednesday
October 15th—not that many of us would actually purchase it from a
shelf!
Although I'm sure there are people out there who upgrade as a
matter of course, most of us need a handful of good reasons to reach into
our pocket. The key question: What do I get for shelling out my
hard-earned on the latest big green beast from Adobe?
1) UI/Workflow Improvements
The first thing you'll notice on opening the new Dreamweaver is Adobe
have made some substantial changes to the user interface. Although the
changes mean long-time users will need to reorientate themselves, most
(but not quite all) changes are for the better.
Apart from inheriting all the grayscale cosmetic changes of Adobe's new
look, the top quarter of the UI has been significantly streamlined. The
title bar and main menu have been combined into a single bar, and the
horizontal INSERT toolbar is now a vertical INSERT panel on the
right-hand side of the screen.
Okay. So, what's the big win here?
Greater vertical workspace, allowing you to see more of your code or
design without having to constantly rejig your screen. Frankly, it also
feels more natural to me to be adding links, images, and DIVs from a panel
rather than a vertical bar. The right-hand side is a place for keeping and
organizing
assets (for example, Files, Assets, Styles, Snippets),
so placing your HTML elements amongst them makes perfect sense to me.
Adobe have also made the workspace selector more easily accessible by
putting it in the top right-hand corner. This enables you to quickly
switch between eight different modes optimized for designing, app
development, and coding; there's even a workspace optimized for dual
screen setups. Nice.
However, the new UI isn't
entirely without issue. Soon after
installing, I highlighted some text inside a paragraph and went to
emphasize it. I pushed my trusty "
I" button and a dialog
box appeared asking me how I'd like my CSS applied.
Um ... no, I just want a plain old
<em> tag, please—I'm marking
this content up, not trying to style it.
Eventually, I figured out there are actually two
property panels, each with its own "I" and
"B" buttons: a CSS panel and a HTML panel. You can flip
between these panels using the buttons in the lower left corner—if
you find them.
Personally, I believe it's a blind spot and I suspect this will stump
quite a few people. Maybe it's just me. Maybe tabs would work better. See
what you think.
Even allowing for this (in my honest opinion) UI glitch, the new UI is a
definite improvement on CS3.
2) The Related Files Toolbar
Adobe's new Related Files toolbar is a definite productivity
winner. It's a simple concept. Dreamweaver scans through the document you
open and automatically opens any linked files—for example, CSS,
server-side includes, JavaScript, iFrames—in a new toolbar at the
page top.
This is a serious productivity improver and you'll probably become
dependent upon it without hours. I have only one slight query. As you can
see from the image, the initial file you open is always listed on the tab,
yet simply referred to as Source Code on the Related Files bar.
From a UI perspective, it seems a little strange to me to have
Source Code sitting alongside real file names. But to be fair, I
can't think of a significantly better solution off the top of my head.
3) Code Navigator
Users are funny old things. You nearly always learn more about what they
want from watching—rather than asking—them. Adobe's development
team watched their CS3 users and came to an interesting conclusion.
Very few regular users utilized the WYSIWYG pane to actually add or edit
content. Instead, Design View was more often used as a navigation device,
providing a visual method of jumping around your code—not unlike the
Navigator panel in Photoshop. And I thought I was the only one who did
that!
Adobe have catered to this usage pattern with the new Code Navigator
feature.
Click on any item visible in Design View, wait a second, and a
small icon of a ship's wheel will appear. Click on this wheel icon and
you'll get an editable, fly-out window showing only the related code of
your selected page element.
Now, if you think waiting for that little wheel to appear sounds
irritating, you're right; happily, you can shortcut straight to the code
fly-out by ALT-clicking (Command-Option-clicking on a Mac) anywhere on the
screen.
This is a great feature. While modern, well-organized coding practices
demand that we modularize our code into multiple-linked files, the
day-to-day business of accessing those many files has become increasingly
drawn out and difficult. Code Navigator brings all these disparate code
blocks back to your fingertips; it lets you feel like you're working with
a single, stand-alone page, without losing any of the benefits of
modularity.
[continues below]
How Smart Are
You? It's Quiz Time!
Test
yourself on the contents of our latest Adobe AIR article, and grab
yourself a copy of the pocket guide, Adobe AIR For JavaScript
Developers, in both print and PDF format. The dead-tree versions are
only available for the first 100 people, so get in
quick!
Download Flex
Builder 3 and get started now.
[continued from above]
4) Live View
One of the major trends in web development since the last CS release has
been the rise of browser-based development tools. Thanks to Firebug, Web Developer
toolbar, and a host of others, browsers are no longer passive viewers;
they can dissect, hack, slash, and reassemble code as it
squirms—live, in front of you. Dreamweaver CS4 acknowledges this
trend and then flips it on its head by integrating a browser—WebKit—into its core.
How does this work in practice?
Switching to Live View in Dreamweaver CS4 replaces your
old-school Design View pane with a live, pixel-perfect WebKit
rendering of your page; this is complete with live Javascript, DOM
manipulations, database queries, server-side code, and rendered CSS,
rather than the placeholder icons you see in Design View.
However, the really cool trick is that the Code Navigator (described
above) still works. ALT-clicking (Command-Option-clicking on a Mac)
anywhere in the Live View window instantly presents the code that rendered
that item—not unlike you might currently do using the Firefox/Firebug
tag team.
But it doesn't end there, my friends.
Thanks to the modern delights of Ajax-style interactions, we often need
to deal with page objects that aren't in the initial page source: items
that are injected into the page some time after page load. For instance,
you might need to change the look and feel of a tool tip that is created
and injected entirely in JavaScript. In the past, this would have required
you to painstakingly pick your way through scripts to determine what was
being created and where.
Live View lets you render your page, where you can then hit F6
to Freeze JavaScript at any point, allowing you to target and
explore the code relating to any transient item in the page.
5) Advanced JavaScript Interpretation
Arguably the other big improvement in the last version of Dreamweaver
was its more sophisticated handling of CSS. Rather than statically linking
to style data, Dreamweaver CS3 could internally trace and understand the
cascade, enabling it to offer real classes and IDs in its code
hinting. Dreamweaver CS4 brings its JavaScript interpreter into line
with its advanced CSS engine.
Firstly, Dreamweaver CS4 gives you easy access to a range of
JavaScript-powered Web Widgets. These are powered by all the mainstream
JavaScript libraries (jQuery, MooTools, Prototype, Ext, and more) and make it easy to deploy
generic JavaScript page objects like calendars, tabs, tool tips, and form
validators.
But for me, the real killer feature is the new, intelligent code
completion. Attach your favorite library in the HEAD (for our example, we'll use Prototype), start scripting, and Dreamweaver's code completion
will automatically present Prototype's built-in functions, along with the
standard DOM functions. Very slick.
6) Make JavaScript Unobtrusive
One of the queries I had with Dreamweaver CS3 was its focus on the Spry
Ajax framework. While Spry did a good job of allowing non-technical users
to add Ajaxy effects, it had some issues. Spry widgets tended to
place a lot of inline JavaScript in the page, leaving unsightly holes if
scripting was unavailable.
In Dreamweaver CS4, not only has the Spry framework become more
accessible and polite, it actually attempts to help you rehabilitate the
bad code around it.
How does it do this?
The Commands menu now has an Externalize JavaScript option that
will process your document, move your scripting to a separate file, link
that new file from the HEAD, and even rewrite your HTML to clean out any
inline event handlers (such as the onclick attribute).
For example, some nasty, inline JavaScript like this:
<a rel="nofollow" href='index.html' onClick='window.confirm("Why
are you so obtrusive?")'>Select this link.</a>
becomes the much friendlier:
<a rel="nofollow" href='index.html' id=a1'>Select this
link.</a>
It also adds the new unobtrusive JavaScript code to your document HEAD,
along with the Spry library it needs to make it all work.
Now let's be honest. You really shouldn't write that sort of code in the
first place, and if you do, there are more efficient ways to improve it.
But to me, the single most impressive aspect is that Adobe made this an
issue—by deciding that this is important Dreamweaver functionality.
This places the concept of Unobtrusive JavaScript on a lot more agendas,
and that's really valuable.
The Verdict
Dreamweaver is a mature, polished application, and the truth is it's
always going to be a challenge for the Adobe Dev team to deliver the wow!
factor of earlier releases.
The good news is Adobe has resisted going for flashy, rock-star gimmicks
and focused on the genuine working issues facing front-end coders in
2008—in particular, accessing and manipulating complex and
increasingly fragmented source code.
For me, features like Live View, Code Navigator, and
the upgraded JavaScript-handling abilities are thoughtful responses to the
way we develop web sites in 2008.
After two weeks with the new version, I'm not keen to go back.
Understand Your Website Visitors
Find out
what your Website visitors are really up to with Morae 3 from TechSmith.
This all in one software tool is fast, powerful and easy to use.
Discover how you can conduct your own usability tests without expensive
consultants.
Click here for your free trial
That's all for this issue -- thanks for reading! I'll see you in a few
weeks.
Alex Walker
design@sitepoint.com
Editor,
SitePoint Design View
Back to newsletter list
In her
first article for SitePoint, Mihaela examines Google's sustained effort at
search domination. This comprehensive analysis looks at the role of web
reportage in the search landscape, and the attempts by various entities,
including Microsoft, at slaying the Google giant.
ASP.NET web pages are known as web forms, but, as
Cristian and Wyatt show, the process of building ASP.NET web forms is a lot
like composing a castle with Lego bricks! ASP.NET is bundled with hundreds
of controls—including HTML controls, web controls, and so
on—that are designed for easy deployment within your applications.
JavaScript guru and
Yahoo architect, Douglas Crockford was in Sydney town recently for the
annual event that is Web Directions South. He kindly gave up some of his
time to chat to SitePoint's Kevin Yank on the continuing evolution of
JavaScript.
