Useful links: GIMP 2.6, CSS backgrounds, Google for Webmasters, and Kathy Sierra

GIMP 2.6 Alive and Well on the Mac at Burningbird may just set you free from Photoshop.

How to: CSS Large Background at Web Designer Wall provides some good tips.

Video Tutorial: Google for Webmasters at the Google blog talks about how Google discovers, crawls, indexes, and  displays search results.

Vitamin Training: How to Grow and Nurture Your Community. This is a video of Kathy Sierra’s talk at At Future of Web Apps Expo 2008. It will be the best 30 minutes you ever spent in front of a video. Go learn something.

Summary of eHow articles for October

Hot Air Balloons

Ah, October, that sweet time of year when the mornings are cool and the afternoons are warm, when the New Mexico skies are filled with bobbing color and the mass ascension at the Balloon Fiesta is more than enough reason to rise at 4:30 AM. But not before writing something for eHow:

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 preview dialog

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.

In sync

The image above shows a badge indicating “in sync”.

Out of 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.

smartobject 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.)

tooltip icon

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.

type the content

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.

tooltip property inspector

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

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 icon 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:

code navigator dialog

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.

the html properties

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.

css properties

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.

split vertical

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.

code split vertical

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:

Cross-posted at BlogHer.

How I Spent my Weekend: BarCamp Albuquerque

This was my first BarCamp. I always figured they were full of youthful geeks and I would have no place among them. But when Michael Bernstein started leaving comments on this blog and talking about it with me, I decided to give it a try.

It was one of my best decisions ever. I meet several interesting youthful geeks—okay, maybe youthful is a relative term, but that’s what they all looked like to me. But I’m happy to find them in Albuquerque, where I don’t often meet people like that. I don’t seem to find many ageful geeks anywhere I go, so I have to hope the youthful ones don’t boot me out the door when they see me coming.

I met Reid Givens, who gave a terrific presentation on marketing. He knows how to do a presentation and how to create good visuals. He’s never been to SXSWi, where I think he would be highly successful as a presenter. I hope he’ll make the effort to submit a proposal for a panel for SXSWi in 2010. Reid also did an extemporaneous presentation on CSS that was a lot of fun.

I met Emily Lewis, who presented a Web Standards Primer. She started a blog about standards and semantics about a month ago. She posted a link to her presentation in this blog post A Great Time at BarCamp Albuquerque. In a state where many people don’t know what web standards or web accessibility even are, Emily is a jewel.

There were some geeky presentations, too. It was BarCamp, after all. The ones that I could follow the best with my limited understanding of programming were Chris Kenworthy who talked about web analytics and gave some good demonstrations of several of the tools he uses for that.

Jack Moffit talked about XMPP. This discussion also made some inroads into my brain. Some of the things you can do with XMPP (Extensible Messaging and Presence Protocol), an open XML communications technology, are very interesting and it appears to be a hot trend in the making.

Daniel Lyons talked about REST. Michael Berstein talked about Python. I only heard bits and pieces of some of the other things. One thing I really hated to miss (but had to miss) was the presentation by ten-year-old Adam Thomas who talked about Scratch programming for kids. I secretly watched him playing with Scratch while the adults yammered on during the day and he created some very impressive things  while he was goofing around waiting his turn.

I used Twitter to microblog links and things I wanted to remember, so there are a few things mentioned on Twitter that I didn’t include in this more lengthy post.

BarCamp Albuquerque, I’m glad I metcha!

e mergent took photos.

Share some inspiration with young girls, plus new toys for Windows users

Thanks to Dr. Kiki Wants Your Help at .51 for leading me to The Bird’s Brain.

The Bird’s Brain is the site of Dr. Kirsten Sanford, a neurophysiologist. She has A Small Request for inspirational and motivational ideas that she can tell girls in grades 6–8. She explains her ideas in this video Small Request.

Read the full post at BlogHer. The article also mentions Google Chrome, Ubiquity from Mozilla, and  Foxit Reader. Not full tech review of those Windows tools, but a bit of info.

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.

Useful Links

How magic might finally fix your computer, an article by Bob Sullivan at the Red Tape Chronicles, describes the issues that plague us in regard to computer security, and explains why folks like The Amazing Randi might be able to help us.

Then and Now in Standards: What’s Different at Burningbird’s Real Tech talks about standards, Microsoft’s decision to implement the non-standards Silverlight technology, and SVG.

SynthaSite, a free drag and drop web building tool that that I reviewed previously on Web Teacher and also on eHow, announced that they have improved their interface and promise better usabilility and simplified menu systems. I’ll have to find the time to take a look and see if they really have improved things. Stay tuned.