Here’s what’s popular right now.
Category: ProductReview
The Dreamweaver CS4 Application Bar
In Dreamweaver CS4, there’s a new item called Application Bar. It behaves differently in Windows and Mac. This is what it looks like on a Mac.
It’s placed across the top. It contains a workspace switcher, menus (Windows only), and other application controls. On the Mac you can show or hide it using the Window menu. Other Creative Suite CS4 tools also contain an Application Bar now.
Starting from the left, here’s what the icons represent. On the far left, of course, you see the Dreamweaver logo telling you which app you are using. The pull down menu next to that allows layout choices. You can select from Code, Split Code, Design, or Code and Design. The circular gear icon is Extend Dreamweaver. That pull down menu allows access to the Extension Manager or you can Browse for Web Widgets or Browse for more extensions. The icon that looks vaguely like a wireframe site diagram is the Site icon, where you can define a new site or manage sites.
Where you see the word Classic in the Application Bar image at the start of the post, there is a pull down menu to choose a workspace configuration. There are several new choices in CS4. The default workspace is called Designer. In the Designer workspace, the Insert menu is in a panel that takes up a great deal of screen space when compared with the more compact “classic” Insert bar arrangement. The full menu choice for workspace configurations is shown in the image. You can create the optimal workspace for your setup using the “New Workspace” option. Once you define it, you can set it as your default.
Not being a Windows user, I can’t tell you what the Menus option of the Application Bar offers.
It’s unusual for Adobe to create versions that differ significantly from Windows to Mac, so I’d like to know what I’m missing and how important it is. Maybe one of you out there in readerland can supply some information.
Related Posts: The Best New Features in Dreamweaver CS4
Review: The Best New Features in Dreamweaver CS4
Today Adobe announces its new Creative Suite CS4, which includes web tools Dreamweaver, Photoshop, and Flash and several more. It’s available from the Adobe Store.
For the past few months I’ve been working with Adobe and Peachpit Press on the upcoming version of Dreamweaver CS4 Classroom in a Book. I’ve helped Adobe update the book by writing some lessons and revising others. I’ve spent all that time working with the beta versions of Dreamweaver CS4. But today is the end of the beta. Today Adobe is making as much splash as possible about its new software.
You may have been trying out the beta version yourself. Feel free to chime in with your favorite features, too. Here are what I consider the best new features in the Dreamweaver part of CS4.
Features discussed:
- Photoshop SmartObjects
- New Spry Widgets
- Live view and Live code
- Code Navigator
- HTML and CSS buttons in the Properties panel
- Vertical and Horizontal Split Views
- The CSS Interface
Photoshop SmartObjects
One of my favorite features in Dreamweaver CS4 is Photoshop SmartObjects. The SmartObject is connected to a Photoshop PSD file that can be used and modified on various pages as a web image. SmartObjects from a single PSD file can be used in multiple instances in a web site. Each instance can be modified and still remain connected to the originial PSD image.
Here’s a bit about how it works. Start with a page that has been saved. Select Insert > Image or drag and drop a PSD file onto the page. The Image Preview Dialog will appear. Here you can select the file format you want, crop, set quality and make other image optimization choices.
The image appears on the Dreamweaver page with a SmartObject badge in the upper left corner. The badge will notify you that the image is in sync with the original Photoshop image, or out of sync.
The image above shows a badge indicating “in sync”.
The image above show an image “out of Sync.” When the image is out of sync, it means that the image has been modified, either in Dreamweaver or in Photoshop. Perhaps you scaled the image in Dreamweaver to be smaller than the original Photoshop object.
You have several choices in Dreamweaver when your image is out of sync. You can see them by right-clicking (Ctrl-Click on Mac) on the image to see the menu.
If you select “Update from Original” the web image will be re-rendered in the selected size and optimized for that placement. You can select “Reset Size to Original” and the image will return to its original size.
If you modify the image in Photoshop, the changes are made automatically in Dreamweaver when you save in Photoshop. When a SmartObject has been modified in Photoshop, you see a red arrow at the bottom of the web image in Dreamweaver. If you choose “Update from Original” now, the image contents will update, but NOT the size being used in a particular instance of the SmartObject. So, for example, if you are using a single PSD image in a thumbnail, a sidebar graphic, and a footer graphic, each will retain its size settings while updating its contents.
You can also work on SmartObjects by accessing them in the Assets panel. Using this method, you can choose “Update from Original” when an image was changed in Photoshop and all the SmartObjects will be updated at once, rather than going through the Dreamweaver pages where the SmartObjects were placed one by one.
When SmartObjects are used in Templates, updating the template’s dependent pages will update the images.
New Spry Widgets
There are several new Spry widgets. The Spry Tooltip widget is similar to a title attribute in a tag, except this tooltip has a style sheet and a JavaScript file that you can customize attached to it. Create the text in Dreamweaver where you want to add the tooltip. In the following example, I highlighted the acronym STEM. In the Spry category of the Insert bar, select the Spry Tooltip icon. In the classic workspace layout of the Insert bar, it’s the last Spry icon on the right. (Dreamweaver CS4 now has other Workspace choices for the Insert bar, but they take up a lot more space on the page than the classic horizontal Insert bar display. If you use a big monitor or two monitors, you may like the newer Workspace arrangements.)
The term gets wrapped in a span tag in the code that will trigger the tooltip. A div containing the tooltip contents (hidden by the CSS until needed) is also added to the page. In Design view, you see a blue box with the Spry Tooltip label where you type the content that you want to appear in the tooltip. Note that the box for the tooltip contents would normally appear at the very bottom of the page, which you might have to scroll to find. It’s near the example sentence here because that’s the entire content of the example page.
Save the page. Dreamweaver will notify you that there are two dependent files needed. Click OK and the files will be added to a folder called SpryAssets at the site root level. You can set some properties for the tooltip using the Property inspector. Click on the blue tooltip label to see the tooltip Property inspector. For example, you can set horizontal offset and mouse behavior in the Property inpector, get rid of the generic ID name or add effects. If you look at Code view, you’ll see a JavaScript operator that Dreamweaver inserts at the end of the page. This is in addition to the JavaScript file that is saved to the SpryAssets folder.
You’ll see a new CSS file in your CSS panel called SpryTooltip.css. Use this stylesheet to set colors and background color and other properties related to the appearance of the tooltip. The SpryTooltip.js file is also in the SpryAssets folder and can be modified.
There are other new Spry widgets in CS4, including several very handy ones for forms. Among the new Spry tools for forms is a password validation and password confirmation widgets, a radio button group widget, and a checkbox group widget.
Live View and Live Code
This item should probably be first, because it’s really cool. Notice the two new View buttons near the old faithful Code, Split and Design buttons? The Live View button lets you render the page right in Dreamweaver (using a webkit browser) that works like, well, a live view in a browser. Except it’s in Dreamweaver. Scripts run, Flash runs, links work, onMouseOver works. It’s live and it’s a big time saver. Of course, you can still preview in a variety of browsers in the same way as always.
Live Code lets you open any page of code that might be connected to a page in Dreamweaver, edit and save, and see the page change as you work.
Another change to note that you see in the preceeding image is that now all dependent files are listed across the top of document window and can be acted on in the document window merely by selecting them. In the image Source Code (the HTML page) is selected, but clicking on SpryTooltip.js or SpryTooltip.css would open them right there without having to find them in the Files panel.
Code Navigator
In Design view, you choose View > Code Navigator to see this new tool. In Code view, you see a little icon that looks like s ship’s wheel. 
Code Navigator connects you to all the code linked to a page, you can pull it up in a Dreamweaver window and edit it right there.
In Design view, it looks like this:
All the listed files are linked and clickable. It’s contextual. Click in the appropriate spot and you can see JavaScript links. In addition, if you hover over a CSS rule, but don’t click, you see all the properties for that selector. You can see code related to all of the following using Code Navigator:
- CSS
- server-side includes
- JavaScript files
- parent template files
- library files
- iframe source files
The HTML/CSS buttons in the Properties panel
A set of buttons that allow you to toggle between HTML properties and CSS properties in the Dreamweaver CS4 Properties panel is a great new feature. When an element in the document window is selected, or when a tag is selected from the Tag selector, you can choose which properties you want to view for the element. To see the HTML properties, click the button on the Property inspector that says HTML.
To see the CSS properties for the same element, click the button for CSS. You can edit the rule using the edit button, if needed, or you can create a new rule if none exists.
It takes a bit of getting used to at first to remember to toggle between HTML and CSS depending on what you’re doing, but it is a great convenience.
Vertical and Horizontal Split Views
In Dreamweaver CS4 there are new ways to view both code and design or just code.
To view Code and Design, you can click the Split button that has been in use in Dreamweaver for several versions. But now, you can choose View > Split Vertically and see Code and Design side by side.
As always, a change in one view is instantly changed in the other. When you make a change in the Code, you still have to click in the Design window to see the change take effect.
When viewing just the Code, you can also choose View > Split View or View > Split Vertically.
You can copy and paste from one window to another. Anything you change in one window is also immediately changed in the other. When you combine this with some of the other Code View tools, such as Collapse, it will make moving things or copying things in the code easier to do.
The CSS Interface
If you add a new element to a page and want to create a CSS rule for it, click the CSS button in the Property inspector. Or, choose ‘New CSS Rule’ from the Targeted Rule menu and click on the Edit Rule button.
The New CSS Rule dialog is quite different. The menu and description of Selector Type is much more accurate now. The “Advanced Selector” type is gone. The choices now include tag, class, id, and compound selector. Dreamweaver now uses the term ‘contextual selector’ to describe what they mean by Compound Selector. Dreamweaver still suggests a selector based on the selection in the document. It also offers you a detailed description of the specificity of that selector and allows you to either make the selector Less Specific or More Specific. You can also pick the location where the new rule will be saved.
There are other changes, not all big, but some nice refinements. If you get CS4 and start working you’ll notice and appreciate them, but they are not so significant as the ones I’ve described.
Technorati Tags: Dreamweaver CS4
Cross-posted at BlogHer.
Office 2007 for Mac
I’ve been working on a book lately. Keeping up with posts here is a challenge. Another challenge has been trying to use the Track Changes features in my antique Office X version of Word. Despite some misgivings about Office 2007 on Mac–supposed to have lots of bugs–I bought the new suite and installed it. The people I’m working with assured me that keeping track of comments and edits in the newer Word would be easier, so I went for it.
It installed quickly and I downloaded the service pack with no hitch. It was annoying to have to set up a Windows Live ID in order to register the new software–what’s up with that, Microsoft? Once I had the service pack installed, I launched Powerpoint and Excel first. Just in case things went bad, I didn’t want to be using an important app. Since that went well, I imported all my old info into the new Entourage. Then I went for the big boy: Word.
Yes, I decided it was worth the money for the suite to get the latest version of Word when I started looking at an edited page and using the comments and track changes features. Sooooo much easier.
My old Word used to crash if I tried to change a filename using Save As and giving the file a new name. Since I do my neighborhood newsletter several times a year and start from the old one each time, not being able to rename a file without a crash was a problem. The new Word did that with no problems. After about 4 hours of use, I only had one crash with the new Word, another big improvement.
Now, I have to get back to work (using Word) and I hope it will go much faster than before. Ahhh, productivity.
Trying out Smilebox
I was given a year’s membership at Smilebox because of the BlogHer 08 conference. Here’s my first effort. It’s dead easy! This is clearly one subscription I intend to keep up.
 |
 |
| Make a Smilebox photobook |
Photrade’s all new–a second look
In September of 2007, I reviewed a new site meant to help photographers sell their photos in An In-Depth Look at Photrade at BlogHer. The review was pretty critical. I had a lot of usability problems with the site.
In the months since then, Photrade has been through tremendous changes in an effort to become something more usable, and more appealing. I took a second look today. I found a great many improvements. I also found that there are still some usability issues.
First, the site as a whole is much more attractive and inviting. In this, they have succeeded admirably.
The internal tools for managing your photos, setting prices, adding tags, and uploading are in general much better. Image uploading is easy now and it was a nightmare before. I did encounter some problems, however,
First, the design is an inflexible size. I had to enlarge the font to read the page. When I did that, nothing fit. Here’s what happened to the upload images page when it was bumped up to only 110% zoom.
Everything is pushed off to the right and cut off. Not what they intended at all. If I went back down to 100%, I could see the intended layout, but I couldn’t read the text.
The site relies on popups for processing things like adding tags to photos, setting price options and more. Sometimes these worked. And sometimes they just didn’t work. I don’t know if it was an issue with popups or what–some just didn’t work. Maybe it was my combination of Firefox/Mac that didn’t work, although I set it to allow popups on this site.
For example, when you are in the Manage Photos area, there is an option to add Permissions, either as a privacy setting or a watermark. When I clicked this Permissions button, my screen was covered with a grayish overlay that I presume was supposed to contain something for setting permissions. But there was nothing there and no way to remove the overlay from the page short of reloading the page afresh.
A great new feature of the site is a blog for photographers called Hyperphocal. I can imagine this becoming a valuable resource for photographers with tips, support, tutorials, and all sorts of information.
All in all, Photrade is a much better site that it was back in September. The site is close to solving most of its problems. I think photographers can use it to sell photos successfully. They offer ad revenue options that can help photographers, too. And there are lots of ways to show your photos in other places besides Photrade such as your own blog that will bring people back to Photrade to purchase. The Hyperphocal blog is a good addition.
If you are interested in selling your photos, give Photrade an evaluation of your own. You may find it suits your needs.
An early look at Aviary
The invitation only preview of Aviary is open for testing. My invitation came from Shelley, who wrote her own review of Aviary. I’m not going to read her review until I write mine. She has a much more critical and discerning eye than I do, and I don’t want to be influenced by her opinions. (I have 5 invitations, leave a comment if you want an early look, too.)
First point to make about this image editing and pattern making online app is that it’s free. I spent a long time just playing with the home page, which responds to mouse movements, before I even signed up and took a look at the tools. It uses AIR. I already have AIR installed on my computer, so Aviary didn’t ask me about downloading and installing it. I’m assuming that if I hadn’t already installed it, I would have been directed to do that. It also uses Flash, but the presumption these days is that pretty much everyone has Flash installed.
Here’s the dashboard.
From the dashboard, you can view other people’s work, collaborate on something, go to the forums, or select one of the two main editing buttons from the upper right: Image Editor or Pattern Maker. I started with Image Editor, which Aviary calls Phoenix. My daughter is named Phoenix, I could hardly start anywhere else, now could I? In addition to the two that are up for testing now, there are a number of other tools on the way such as Hummingbird–a 3D modeler, Starling–a video editor, and horus–a font editor.
The image editor opens in a new window. When it opens, you can select a new image or start from scratch. Take note of the familar looking image editng palettes on the right with blend mode and history. The top palette is contextual. Sometimes it shows layers or properties. On the left are tools such as selection tools, paint tools, shape tools, and text tools. In the bottom left corner, there’s a switch foreground/background button. Anyone who has used Photoshop, Fireworks or Paint Shop Pro will feel right at home with these familiar icons and palettes.
I go with Start from Scratch and accept the default image size and transparent background. I open the shapes submenu, select a rectangle, and click the color box to choose a new color. When I click OK, the shape is placed on the workspace. I can move it around with the transform tool, which would also let me perform various other transformations.
I add a gradient background, a reddist rectangle, and a star. I throw some smudge around the edges of the star with the smudge tool.
I add some gears, some text and decide I’m finished. The text tool was hard to work with. There were limited fonts. I also noticed, when looking for help with the text tool that the help files aren’t populated yet. I’m sure this will be fixed before Aviary reaches a public state, so I’m not worried about it.
I save. I’m asked for a title, but don’t get any choices about where to save. When I close the editing window, I see the image saved in the My Images area I reach from the Dashboard. I double click the image and it opens in the window shown immediately below. Here, I can reopen it in Phoenix, copy some code to embed it elsewhere, or insert information related to the image in forms at the bottom of the page (barely visible in the screen shot.) One of the settings allows me to say who can edit the image—everyone or no one.
An options shown in the screen shot above is URLs to Embed and Share. One is This page. the other is on the Aviary Forums. Here’s the URL to embed this page. If you visit the page, you find a comment box, but you must be logged in to comment. Because I was logged in to this page, there is also an “Open in Phoenix” button, but this wouldn’t be available unless a) you logged in, and b) you had premission to edit my image.
Another important function found in the My Images area of your account is the ability to upload images from your computer. When you upload, you can set viewing permissions and and editing permissions.
Now for a look at the Pattern Maker, which Aviary calls Peacock. I don’t have any daughters named Peacock, but it was my aunt Elizabeth’s maiden name. They’ve given their tools whimsical names, but I’ll be I remember these two. Here’s the Peacock editing screen.
The tools are in accordion panels on the left. At this point, several of the tools use the same icon. These tools are nothing like what you might be familiar with from Photoshop or Fireworks. As I understand it, the tools are to make patterns that you intend to repeat or tile. The blog entries for Peacock show some really incredible stuff made with this tool, but I couldn’t figure out how to get started. A tutorial would be valuable, and is probably in the works for all the tools.
I managed to drag a generator icon for fractals onto the canvas. The active tool is connected to the image by a line–why I don’t know. Although I tried to apply some of the effects and use the controllers among the tools, I couldn’t figure out how to use them. I saved and left this page editable by everyone, so if you can figure out the pattern maker better than I did, feel free to do some editing to this image. Just leave a comment about what you did.
Other features of the site include setting up friends and favorites among the other imagery artists on the site, and being able to access your friends and favorites from the dashboard.
At this point, with only two tools online, I feel I hardly scratched the surface of what Aviary is going to be able to do in the hands of a creative person. They have a long ways to go to reach the point of public release, but I have a feeling this is going to become one of the most important creative tools on the web.
Technorati Tags: A.viary.com