That New-Technology Smell

Is there anything better than a new computer? You crack open the packaging and… there it is. Full of promise. And absolutely Un-full of data, temp files and any kind of virus or spyware. People come by and congratulate you on your acquisition as if it was some kind of a real accomplishment.

I finally bought an iPhone. A while back, there were lines in front of Apple stores and AT&T outlets, as FanBoys from coast to coast waited for the first telephone to feature Apple technology. I wasn't one of those. The phones were expensive and slow and since I couldn't do anything with my phone but make calls, all of the other Magic Stuff didn't really mean anything to me. I didn't miss it, so I wasn't attracted to the iPhone. But over time, the TV commercials wore me down. How cool would it be to hold your phone up to a radio and have the phone say "Aimee Mann: Freeway" when you wondered what that song was? And more than once, I found myself looking at a house with a FOR SALE sign in the yard and wondered how much they wanted for it, saying "You know, if we had one of those iPhones, we could check their web site and see how much it was, how many bedrooms, etc."


So we got phones, my wife and I. iPhones. They are just $30 a month more than the plan we were on with another carrier's Family Plan and that is just 50¢ per day, for each of us. Fifty cents, or if you prefer, fitty cent gets us the e-mail and ease-of-adding-contacts and the GPS features and all of the rest of it, and we're already severely happy.

But it's not without pitfalls. I figured out how to synch my phone with my computer, but when I tried to synchronize Kathie's… well, she now has access to my e-mail, calendar, contact list and more. It would seem that an investment in a good book on the mysteries of the iPhone would not be money wasted.

At some point, I hope to carry, instead of my cell phone and my iPod, only an iPhone. And I expect to get better and better at running it, learning all of the tricks and Way-Kewl things it can do for me.

I completely understood only my very first cell phone. It was about six inches long, by an inch and a half by maybe three inches. It probably weighed three or four pounds, which felt like Real Value. It stored, I believe, four numbers. Maybe six. It made or it received calls. That was it. There was no calendar. There were no alternate ringtones. There was no camera. There was no headline news. There was no Yahtzee game. There was no satellite navigation. If I wanted to know where the local coffee shops were, I had to call someone from the local area and ask. That was the last time, though, that I completely got my cell phone. I know one thing above all else, concerning my new iPhone. I am already much farther along its learning curve than I have been in nearly twenty years.

A craftsman, the saying goes, is only as good as his tools. That often sounds to me like something Tim Allen's Tim Taylor character would tell his wife as an excuse to get the latest and greatest new gadget to hang on the pegboard at home. But one thing is true. Today's technology is vastly underutilized. Did you know you can make your fonts bigger by holding down your [Control]-key and spinning your mouse wheel? There are hundreds and thousands of features buried in our computers and our software that we don't know about and thus get no benefit from.

I've got some time off this holiday weekend. I hope to spend some of it with a few manuals, learning to do more with what I already have, rather than continually spending on the Next Big Thing. But damn, I really do enjoy this new phone.

Synchronize Your Watches! And Files!

There's a classic scene in many WWII movies where a bunch of guys are trying to coordinate an attack and to create the most surprise and chaos, everything has to happen at once. The tough sergeant pulls his sleeve up, revealing a $2 watch and tells everyone to "synchronize watches!" The typical watch of the era may have gained or lost a minute every day, but the point of the exercise isn't that everyone have the correct time, it's that everyone has the same time. There are times when you want the same thing on your Web site.

I take full advantage of Dreamweaver's .ste files, and create ways into places I'm likely to need to work on from everyplace I'm likely to work. So I have access to my work sites from home and from my laptop and, of course, from work.

But consider this situation: All of the files are the same. The same local files and the same remote files, on all three computers plus the single remote server. I get an idea at home at 9:00 Saturday morning, and change a page at work that said ABC into XYZ. I save this page locally and I put the file onto the remote server so it's live. As far as the world knows, now, the page says 'XYZ'.

At 10:30 that same morning, my wife decides to go to the co-op for a little shopping, and I take that as an opportunity to visit the local coffee house and catch up on my reading. I grab my laptop and head down there. While she's busy looking for organic rutabaga, I've got a head full of caffeine generating wonderful ideas. One of those is to change a page that currently says 123 into one that says 890. I make this change, and save the file locally on my laptop and put it on the server as well.

Eventually, I get to sleep, and rest up the next day while the memory of making these changes recedes into the middle distance. On Monday morning, I come barreling into work with my usual enthusiasm and change a page that had a picture of a kitty into a page that has a photo of a puppy. I save this page locally and upload it to the server as well.

What's my situation now? I have an ABC page on my laptop and my work machine, but I have an XYZ page on my home computer and on the server. I have a 123 page on my home computer, but an 890 page on my laptop and on the server. And I have a kitty at home and on my laptop, but a puppy at work and on my server. If not for synchronization, I'd be starting to wish I'd written some of this down.

Dreamweaver carefully inventories everything in and on your site. It remembers when you have made changes and what those changes are. And during synchronization, it compares what it knows about your local installation with what it sees on the remote server. If Dreamweaver notices a file is newer on the server than on your computer, it makes a note of that and suggests you might want to download the newer, fresher copy. And in the same way, if it notices the file on your computer is newer, it wants to upload that file to the remote server to overwrite the older one that it finds there.

Synchronization uploads or downloads files, depending upon the date-last-modified time stamp. The result is the same information on both a local and a remote computer. If you synchronize often, you will never move more than a few files, and almost always in the same direction, and you'll never confuse your ABC's with your 123's or your puppies.

A Spanner In The Works

Let's see how far we get with this one, shall we? From time to time I'll get a letter from someone confessing their ignorance of this or that "simple" markup term, tag or technique.

Typically, these conversations begin with "I'm so dumb" or "I just can't get this" which reinforces the anxiety people feel when dealing with this or that area of building out a page.

So first up: That is dumb. Look, there just isn't anything about doing any of this that is really what someone might call intuitive. Okay, maybe using <p> instead of <q> to indicate paragraphs, or using <li> instead of <xy> to indicate list items. That's helpful, but you still have to learn it, and not having learned it (so far) does not indicate a deficit in anyone's character.

Specifically (this is what's known as Burying The Lead), we are talking this week about <div> and <span> tags.

<span>

The <span> tag acts like an artificial inline tag. It affects only a subset of a larger block like a paragraph or a heading. Think of <strong> text. You start a paragraph, you motor along for a while and then drop in a <span> tag that assigns a class or an ID or actually contains styling rules that will be in effect for just this next few words or characters of the larger block. Something changes. Maybe the text changes color. Maybe the font is different. At some point, you end it with </span> and things will revert to whatever the formatting in effect was before the <span>.

<div>

The <div> tag is an artificial block-level tag. You will remember from our Introduction to HTML that block-level tags start on new lines, and claim the entire width of their containers. We use the example of a little paragraph with only a few words, that claims the blank space to its right after the period. If it didn't do this, the paragraph that followed would look like a second sentence in the first paragraph. Follow?

So what are <div>'s good for? Well, a lot of things. They are useful for corralling text that has a common purpose, or units that go together on the page. Think of all of your navigation links, for example. You would want them in some kind of a box that might be treated differently than the text above it, below it or around it. Maybe this could be a different background treatment, a border, different fonts or text-sizing or some combination of all of these. In the other example, you would probably want your photo captions to move with your photos, right? So you could wrap your <img> tags and your caption <p> tags together in a <div> and the two would travel together as their own block, no matter how big a monitor someone has or what text size they have selected. You can even constrain the width and/or height of a <div> and where it's placed on the page.

What do we mean by artificial in these examples? Well, the basic idea is that the behavior of a <span> or a <div> is undefined until you decide how to define it.

<div id="navigation"> begins a block-level situation on our page that we have to define for ourselves, probably by assigning one or more styles to the id of "navigation". The browser would encounter this tag and look up the styling information and apply all of those rules on every element of the division until it encounters the </div> tag.

How do I change fonts when I reference keyboard entries? I use a <span> tag that affects just a subset of the block that contains it. <span style="font-family: Courier, monospace; font-weight: bold; font-size: .9em;"> changes the text between the <span> tags from whatever it was to Courier. If Courier isn't found, your browser will use whatever the default system-resident monospaced font is. This text will be bolder than the text around it, and also just slightly smaller. This new styling rule will be in effect until the first </span> tag is encountered.

Constant Lurker will already be wondering why we don't just give this text a class, and assign the styling rules there. That would be the preferred method, allowing for much easier editing, if things go wrong. <span class="typewriter"> would put the class of "typewriter" into effect, and whatever styling rules applied there would be in effect until the </span> tag was encountered.

So that's basically it. Divisions, <div> tags, create block-level page elements where none previously existed. Spans, <span> tags, create inline differences from the surrounding page elements. Play around with them, and you'll get more comfortable with both concepts, I'm sure.

Again With the Change

Wow, we've had a lot to digest in the last week, haven't we? I am surprised by the number of international friends who have given us the "thumbs-up" in just the last dozen hours. But we will have a lot of time to adjust to things changing on the national, international and economic scene. But of more immediate import to us is the release of Adobe Creative Suite Four, and with it a new version of Dreamweaver.


Dreamweaver has grown up with the Web. It is what it is in large part because of the feedback of its users, who have complained, cajoled and wondered at every new release, and affecting the feature set and the workflow and nearly everything about the program. There has been a tendency lately for change to be incremental every several years and then Wham! there are very few familiar landmarks. Then the incremental improvement continues. We are now experiencing a whammy.

If you knew and loved Dreamweaver, you knew and loved Dreamweaver 2 even more. If you could work with Dreamweaver and Dreamweaver 2, Dreamweaver 3 presented little additional challenge, and so on.

What would have been Dreamweaver 6 was a Big Deal. Dreamweaver MX 2000 featured a new workspace and a new workflow. Things you needed were more readily available. Things you didn't need so much had been de-emphasized. Dreamweaver MX 2004 built upon that new platform and made it better. Dreamweaver 8 built upon that and we finished up with Creative Suite 3, and Dreamweaver CS3. If you knew Dreamweaver MX 2000, you could work within the CS3 environment.

Comes now Dreamweaver CS4. It features a reworked interface with a lot more options, and shows every evidence of a lot thought going into not only what we do, but how it all gets done. Where before we needed to navigate into our Sharedcode folders to find and edit footers and sidebars and such, now these (and other) documents are represented as buttons atop the workspace. Think of something you need to include in your footer? Just click the button for footer.html and that document is loaded up and ready to edit.

One frustrating thing over the past dozen years is that, in spite of how clever Design View is—you can drag and drop a photo over Design View and Dreamweaver will work out the image tag, the path information and so on—it still did only a fair job of approximating a "real" Web browser. We have struggled with Design Time Stylesheets and other hacks to try to make it better but the news is that now CS4 uses the WebKit engine, so you are very much in What You See Is What You Probably Get mode, now. In CS4 Design View, you can watch as menus change state when you hover over them! It's getting cooler and cooler out there, folks.

Another feature people have asked for, for years, is a split view that splits vertically. Now you can have Design View on the top and your code on the bottom, or your code on the left and Design View on the right.

Dreamweaver has always been good about bringing us Widgets, little ready-made gizmos that help to do complicated tasks simply—like building Tables and Forms and such. New in CS4 is a Forms Validation Widget, where you can sketch out, say, password limitations like every password must be at least so-many characters, or must contain at least two numbers, things like that.

Dreamweaver now believes the future belongs to standards-based markup, and to interactive technologies like AJAX. The Code Navigator and several new Coder workspaces are designed to help the hard-core feel more comfortable with Dreamweaver and may entice a few back from BBEdit, HomeSite and other page editors favored by Propeller Heads.

I am often asked about old versions of Dreamweaver. "Can I still use Dreamweaver MX 2004?" or "Do I need to upgrade? I'm using Dreamweaver 8, now" are questions that come up frequently. Normally I point out the differences and let them decide, but with Dreamweaver CS4, as with Dreamweaver MX 2000, I have to recommend that if you can afford it you upgrade right away. I don't think you'll be disappointed.