HTML, CSS and JavaScript Development for Dummies

If, nearly 20 years ago, when I first started designing Web sites, you’d have told me I’d be writing a book about designing World Wide Web pages for cell phones, I’d have told you to lay off the crack. In those days, cell phones did nothing other than make and receive calls. The Internet, which most of us accessed through dial-up modems over inadequate copper phone lines, was a slow and temperamental Never-never land.  I, like everybody else writing about information technology (we didn’t call it that then), was still amazed when my mobile calls connected.

But here we are sliding into 2011 with a round of mobile devices that can handle the Internet nearly as well as full-blown computers. Mobile Web surfers have become a force to contend with. It’s time for Web designers and the companies they work for to make their Websites mobile-device friendly. In this new Dummies book, due out next spring, I’ll show you how to do that.

William Harrel – www.williamharrel.com

LinkedInShare
California Spine Institute

California Spine Institute

The folks at WilliamHarrel.com have been diligently upgrading the California Spine Institute’s (CSI) Website over the past few weeks, bringing it into the Twenty-First Century. As the original designers of World renowned Neurosurgeon, Dr. John C. Chiu’s first Website (SpineCenter.com) nearly 15 years ago, Bill and his staff have been asked to come back and give the old site a makeover. The new site is a completely scripted AS3 and XML modular Flash design, complementing CSI’s ultra-modern Minimally Invasive Spinal Surgery (MISS)  and physical rehabilitation center, located in Thousand Oaks, California. Dr. Chiu is the primary developer of the Micro-Discectomy and Laser Thermodiskoplasty MISS procedures for eliminating pain from herniated spinal discs.

The new site is resplendent with content on spine surgery, MISS and Medical Laser technology–complete with videos, presentations, research and other information designed for medical professionals and the general public. It branches at the home page to accommodate professionals looking for technology solutions and providers and non-professionals looking for alternatives to conventional “open back” surgery.

“We have been tacking on new information almost weekly for many years,” says Dr. Chiu. “It has become a huge maze of mismatched designs [reflecting the styles of the several different designers employed to update it] and outdated material mixed in with the new, pertinent data.” It’s time to bring it all together in a format where users can find what they need without hunting and pecking.” Dr. Chiu added that he is excited about the work so far and eager to get it up and running.

While in development, the site is located at csi.williamharrel.com. It has been opened to the public during the final stages, with the warning that not everything works yet. But anybody is welcome to come and watch the project as  it nears completion. “Use the menus,” Bill Harrel says. “The page links don’t all work yet, and not all of the material they link to has been deployed.”

WilliamHarrel.com

LinkedInShare

A little over a month ago I upgraded to Adobe’s new suite of products, Creativebox_mastercollection_cs4_150x150.jpg
Suite 4 Master Collection. I wanted to wait until I got to use it awhile before providing my two cents.

The reason I went with Master Collection is that it is the only way to get all the apps I needed, InDesign, Dreamweaver, Flash, Illustrator and Photoshop, without purchasing at least one of the products separately for an exorbitant price.

Anyway, priced at $2499 (much less and quite reasonable for upgrades), considering all you get in the box, it is a good deal. Here is what is included in Master Collection:

Plus a bunch of other utilities and somewhat useful stuff.

Installation

Installing the collection requires a commitment in itself, a several-hour process. One of the things that always irks me about installing new Adobe software is that you are never allowed to keep the setting and preference changes you made in previous versions. Instead of actually upgrading your existing version, a whole new set of apps is installed.

Ok. I understand that this is done for document compatiblity reasons, in case for some reason or another existing documents are not compatible with the new apps. But how difficult would it be to have the installation program look at your current apps and carry your preferences over to the new software?

Interface Changes

Overall, the new interface is prettier and friendlier (I skipped CS3, so CS4 seems pretty different.). However, I hate it when things get moved around or changed for no apparent reason. For example, in Photoshop, I am used to right-clicking to get to Image Size. This is very handy when resizing a lot of images for a Website. Now the only way to get to Image Size is from the Image menu. There are a lot of little nuances like this that are not only annoying but also slow you down. For those of us who keep our heads buried in our work, performing routine tasks over and over without thinking about them, these changes cause us to retrain ourselves. A real drag.

New CS4 interface

New CS4 interface

(Microsoft is, of course, the worst when it comes making interfaces so different that it causes you to relearn the software. Office 2007 for Windows and 2008 for Mac are almost unworkable.)

Worthwhile Features

At least a bunch of new features takes some of the sting out of the installation and interface change woes. Listing them all here would make this post long and dull, so I will go over a few that I find particually helpful. (You can get a description of all the new features in each application on Adobe’s Website, at www.adobe.com, and there is a good review of Master Collection on surfbits.com at http://www.surfbits.com/?p=1877.)

Dreamweaver

Perhaps Dreamweavers most usable new feature is InContext, which allows you define regions on a page that can be edited from within a Web browser. A description of InContext is posted at http://commtechwatch.com/?p=187. So I won’t recreate it here. However, I do find it interesting that the phrase “Free Preview” has been added to the InContext description on Adobe’s Website (wasn’t there a month ago), which suggests that this “feature” will soon become a service you have to pay for.

Another pretty useful feature in Dreamweaver is Live View, which allows you to see what your page looks like without switching to a browser.

InDesign

InDesign has a lot of new stuff. Here is a review from Communications Technology Watch, http://commtechwatch.com/?p=121

Photoshop

Photoshop has several highend enhancements, such as 3D painting and scaling and Content Aware Scaling. However, if you are like me and use photoshop primarily for correcting and scaling images for print media and Websites, you won’t get much use out of these. I’m more disappointed in the ways the interface has been changed, causing me to adapt the way I work, than I am impressed with the new stuff. But I am sure some folks will get great use from them.

Conclusion

After all is said and done, the upgrade was worth it. I’ll get over the small disappointments. I left out a lot of great new features that will, undoubtedly, allow me to wow my clients and prospective clients–once I learn how to use them.

Bill Harrel – www.williamharrel.com

LinkedInShare

I found this would-be nifty little WYSIWYG theme editor for WordPress Themes. Problem is, I can’t get it to work.

ThemeDreamer, an Xtension for Adobe DreamWeaver, is supposed to make WordPress themes easier to edit. When you open a WordPress theme in DreamWeaver, it looks somthing like this:

A WordPress theme opened in DreamWeaver
A WordPress theme opened in DreamWeaver

With ThemeDreamer installed, it is supposed to look something like this:

 
A WordPress theme opened with ThemeDreamer installed

A WordPress theme opened with ThemeDreamer installed

Cool, huh? Problem is when I install it in DreamWeaver CS4 it doesn’t do anything. The page is not rendered and the ThemeDreamer buttons are not live.
 
I contacted ThemeDreamer support.
 
They asked me to try a couple of things, which I did. I emailed them back telling them their suggestions didn’t work, and they responded telling me to do the same things again. I see from their blog that some people are using it and are pleased with the results. However, my experience has not been good and their support has not been good either.
Maybe you’ll have better luck. You can get the Xtension at:
I’ll keep you posted on what happens.
William Harrel – www.williamharrel.com
LinkedInShare

How many times has a Web design client asked you, “Can I edit it myself?” Immediately you cringe, thinking about how hard it will be to train them to make small edits to their Website, and how easy it is for them to ruin your hard work. Well, if you use DreamWeaver and are willing to upgrade to CS4, Adobe has come up with a fairly good solution, Adobe InContext.

Changing text color from inside Internet Explorer

Changing text color from inside Internet Explorer

InContext allows you to define regions on a page within DreamWeaver that endusers and clients can then edit from Explorer or some other Web browser, and then save their edits back to the Web server. InContext is a bit of a hassle to setup-each site has to be registered at adobe.com-but once you’ve gone through all the setup steps, sure enough, the document can be edited from a browser. The best part is that only the regions you define as editable can be changed; the rest of the page is untouchable.

It works like this:

  • You define a region or regions on the page for InContext editing.
  • When you save and upload the page, DreamWeaver automatically creates 3 small files, 2 javascript files and an html file, and saves them in the Includes folder on the server.
  • You then go to the Adobe Website and register the site. If you haven’t registered a site before, you will also have register as an InContext administrator-a relatively quick and easy procedure. And, so far, it is free.
  • After you register the InContext site, you can then add users and send them invitations to edit the site using InContext. An email with instructions for accessing the InContext session from inside their browser is sent via email.
  • Now, when you or a user browse to that site and go to an editable page, all you have to do is hit Ctrl-E (Windows) or Command-E (Mac).
  • This starts the InContext session and the site can now be edited in the browser.

There are two tutorials on the Adobe Website describing this process. One for the DreamWeaver designer, or developer – http://www.adobe.com/devnet/dreamweaver/articles/getting_started_with_ice_dev.html

And one for the enduser, or “content editor” – http://www.adobe.com/devnet/dreamweaver/articles/getting_started_with_ice_eu_03.html

Depending on the role you choose on Adobe’s site for the enduser, they can make various types of edits, including:

  • Text formatting and style (the default)
  • Image insertion and management
  • Insertion and management of hyperlinks.

Pros of InContext
The best thing I can say about this solution is that it works and works fairly well. The enduser doesn’t need to have or know how to use DreamWeaver or any other Webpage design program. Nor do you need to teach your client (or employee) the intricacies of FTP and editing a page in a text editor, all the while praying that they don’t change the wrong things. Once up and running, it is pretty slick and works well.

Oh yeah, and did I mention it is free?

Cons of InContext
The three things I liked least about this solution is that: It is a bit time consuming to setup. It locks you and your client into the Adobe website and Adobe products, no matter what the future brings (I have been using Adobe products for years and don’t really see myself switching. However, I’d bet it would have been just as easy for Adobe to create javascripts that enabled InContext without registering on the Adobe Website. But then this would have made this solution relatively easy to use with any Webpage design program-it’s easy to understand why they wouldn’t want that.); Finally, InContext only works with the latest doctypes (i.e., HTML 4.01). If you have been designing sites as long as I have, you will have plenty with earlier doctypes. If so, you will have to change the doctype on every page you want to setup to use InContext.

You can find a good description of InContext on Adobe’s site at http://www.adobe.com/products/incontextediting/

An ongoing discussion of InContext can be found here: http://www.graphicrating.com/2008/10/27/adobe-incontext-editing/

Bill Harrel – www.williamharrel.com

LinkedInShare