Grow up, web design field!

ALA is conducting a Web Design/Development Survey...I'm interested to see the results. In a small way, it's a sign of the industry (slowly) maturing, something ALA has done a great deal to push forward.

Upgrading to Creative Suite 3? Use caution!

Just a word of advice from someone who did this upgrade in a much more painful manner than necessary! Make sure you understand what you are buying!

Last summer, I started my job at my current company, and got an entirely new computer with all new software. Naturally I needed all my Adobe goodies. This was shortly after the completion of the Adobe/Macromedia merger, so I was able to get it all by purchasing the Creative Suite Web Bundle, which included Creative Suite 2 Premium and Studio 8 Pro.

When CS3 came out I was all in a tizzy about upgrading as quickly as possible, because I had been on the PhotoShop and Fireworks CS3 betas and was already addicted. I checked out all the new suite options, and decided that Master wasn't for me - I didn't need all the video apps. And Design Premium didn't include Fireworks or Contribute.

I bought Web Premium, which I thought had everything I needed. I failed to notice that InDesign was not part of Web Premium. I think it was a mixture of my hurry and excitement to purchase (bad idea), and my assumption that anything called "Creative Suite" would include InDesign because it always has. Again, "to assume just makes an ass of u and me"...

Well, as I was going through my installation woes with CS3 Web Premium, I discovered the missing InDesign upgrade, and went on Adobe's site to see what I missed. I looked at the cost of upgrading InDesign alone, and figured that's what I was going to have to do. The "upgrade eligibility" page on the site was ambiguous - it said I could upgrade if I owned InDesign CS2, which I do. I wasn't sure if that would be allowed, so I chatted online with a customer service rep who told me it would work. Cool. So I bought the inDesign upgrade, and installed it, but when it came time to register, it would not accept my previous serial number for the upgrade or locate my previous installation. Argh.

I called support for like the 10th time in the past 2 days and was told that in fact that upgrade could not be done, I couldn't upgrade twice off the same product. Yeah, I get it, I understand, I see their point when they put it that way. But think about it, I OWN the previous version! I have done nothing shady or illegal here, I just want the shiny new versions of everything that I've already bought!

So, now I'm in a position where none of the suite products allow me to upgrade my previous purchase in full without purchasing another product as a standalone.

I ended up having to return CS3 Web Premium to get CS3 Design Premium, and forego Fireworks, because it's not as essential to my workflow (I was looking forward to some of its Flex comping and skinning features...too bad) . I can't bring myself to pay full price for a full version of a product I don't use that much that I already own. CS3 is also very pricey, my company has put $1700 into this suite so far! I'm disappointed in this oversight of Adobe's, at the lack of clarity on the website, and at the lack of education of the customer service rep I chatted with online.

I'm sure a lot of this has to do with the merger. I know Adobe can't be expected support infinite variations of their suites. I'm probably an edge case. But I still feel a little shafted here.

On the flip side, the new versions of everything in CS3 are fantastic, you should buy them...just watch what you're doing before you do!

Adobe to Open Source Flex

Wow, this is big news! Adobe has just announced that they will be releasing Flex under the Mozilla Public License. If you think about it, it's not that big of a jump since the Flex SDK is already available for free, they are just releasing additional developer resources, docs and build information...and enabling outside developers to contribute.

The press release: http://www.adobe.com/aboutadobe/pressroom/pressreleases/200704/042607Flex.html

FAQ:
http://labs.adobe.com/wiki/index.php/Flex:Open_Source

This seems like a smart move to me for many reasons. First off, it's hugely positive PR. The public loves open source. Adobe has gotten a bad rap for the cost of some of their enterprise products, despite the fact that they have contributed to many open source products and released their own (Tamarin). This is a big step towards broad acceptance of Flex by the web development community, and it's going to have a great impact on the success of Apollo. If Adobe wants to rule the web, this is how they are going to do it.

CS3 Blues

(To any blues tune)

Da na na na nuh…
I’ve got the blues
Da na na na nuh…
The CS3 blues
I can’t install!
I can’t activate …
Watched the progress bar creep
I just sit and wait
Support got it working…
With a magical code
Is this a light
At the end of the road?
Finally running
Got nothing done today…
Adobe why…
do you hurt me this way?
I’ve paid lots of money
Used your software for years
For my excitement I get
Inconvenience and tears

Drawing Maps with Illustrator

I did a fun little project this week that I’ve done a few times before, but this time I thought I’d write up a little tutorial on it to share. I’ve you’ve done any amount of graphic design, you’ve probably had to draw maps, maybe as directions to an event or office. Illustrator has some cool features that come in handy for this type of illustrated map. The map I’m doing here is pretty simple, but using these techniques, you can go as fancy and stylized as you want. Maybe when I have time I’ll update these images to show alternate styles.

Find your source map – a real map that you can trace. (cough*google*cough)

Scan it, or grab a screen shot and paste it into your Illustrator document as a template. Place it where you want it, and lock the layer.

Create a new layer for your roads. You may want to have a couple layers, one for major roads, one for minor roads, one for highways, etc. Trace the roads you want to show on this layer, using the line and pen tools. It helps to draw these paths in a color that contrasts with your map so you don’t give yourself a headache looking at all those lines.

Tip – to make it easier when you add the labels to these roads, pay mind to the direction you draw them in. Start to the left and work your way towards right. This will make your path go in the direction your text should go. Draw your strokes down the center of where the road should be. Pay attention to street names you’re tracing and try to use one path per street, this will make it easier to label them later. If you draw multiple streets with a single path, you’ll have to break them up later.

If you’re tracing several roads, you may want to style them differently. Once you have your major roads traced, lock the layer, and create another for minor roads. You will probably want this one under your major roads layer. Keep each set of roads on its own layer for easy access.

You can style the roads a couple ways. Brushes work well for complex styles. To define a custom brush, draw the shape you want to represent your road, select it, and then hit the “new brush” button in the brushes palette, or drag it into the brushes Palette. Choose “Art Brush” as the type of brush. This will tell Illustrator to stretch the shape you’ve drawn over the length of the path. You can also adjust the scale of it later if you decide you want your roads wider. Because we’ve separated our major and minor roads onto different layers, you can define separate brushes for each.

An alternate way to style the roads is to customize the stroke for the road – make it wider and apply a color. You don’t have as much flexibility or styling options as you do with creating a brush, but this makes it easier to flatten the roads later. After you're done, you’ll want to expand the appearance of the brushes, or strokes. Another reason we made a backup of those layers!

Make the stroke wide as you wish the road to be:

Color it to match the road:

Expand the path:

Add desired borders:

Duplicate your first road layer to keep a backup (you’ll need it later - lock it and turn its visibility off to get it out of the way), then apply the brush you created for major roads to those paths, or style those paths with your desired strokes. Do the same for all other road layers – keeping a copy of the original paths for each. You can turn the visibility of your traced template layer on and off to see how it looks.

Once you’re done, you may notice that the intersections of the roads may look a little funky from your brushes or strokes, and that any borders around the road lines cross over eachother rather than intersecting.

To fix this, we'll use the Pathfinder to add the shapes together for the desired effect. This is much simpler with strokes than it is with brushes, another reason to use a stroke if you can. With strokes, you can select all of the expanded strokes, hit the “add” button, and you’re done. With brushes you’ll have to carefully expand the appearance of each, and add them together one at a time.

Much better!

Now we’re going to add labels. Create another copy of your backed up road path layers, this one will be where we add the text labels. Using the text tool, add street names to each road path. You can use the baseline adjustment on the Character palette to align the text it where you’d like it to appear in relation to the road path. Drag the slider handles around the text with the arrow tool to position the text where you want it, or flip it to the opposite side of the path.

Insert text along the path:

Adjust the text style and baseline:

Drag the text to the desired location:

As you can see from these screen shots, I'm turning the visibility of the template on for reference and off for clarity.

Once all of your roads are labeled, you can draw in icons, placemarks, pushpins and landmarks. These all go on separate layers for convenience. If you want to use lots of cute little landmark or interstate icons, create symbols from your icons for easy duplication and editing.

Here’s my finished map…directions to my office! Now I know this article was cool, please try to refrain from stalking me.

cf_drama and fake Prada bags

There's been a lot of buzz in the blogosphere this week having to do with sniping between Adobe and New Atlanta/BlueDragon. I'm getting really sick of hearing about it, particularly because I'm very close to one side of the argument (if you know me, you already know who). I've followed along and sided with Adobe because, well, my entire career revolves around using Adobe products, I love them, I love ColdFusion and I hate imitations. Frankly I don't know how some people at New Atlanta can sleep at night when their flagship product is a rip off. But seriously folks, all this ranting is not worth it.

Do you think that Prada cares about the street vendors peddling knock-offs of their bags?
As a successful and well respected brand, they continue to produce innovative and sophisticated fashion without looking over their shoulder at a tiny portion of the market share that's going to some random guy on the street (or some overseas producer of such products). Sure, a Prada designer might not like walking down the street and seeing a cheap imitation of a bag they designed last year selling for $30, but they aren't worried for their livelihood. Besides, anyone who buys one of those fake bags probably wasn't in the market for a real one to begin with.

The last nail in the coffin that made me waste my time posting a blog entry about this was reading the article that is being attributed as the source of much of this drama: http://www.gcn.com/print/26_08/43522-1.html

What a totally lame article! It was barely coherent. What hostility some disreputable reporter attempted to conjure up was just an attempt to turn vapor-rumors into a good story. Since said reporter utterly failed on that, had we all left it alone, the only time wasted would have been his own. The media does it again.

PS. For the record, I believe that Adrock's (honk if you don't know who that is) statement drawing similarities between buyers of BD and buyers of fOakleys was scarily true. Think about it.

PSS. Sorry for making such a useless post. I had fun writing it.

Launch of MSL.com, my latest project

I'm pleased to announce the launch of my company's new website:

http://www.msl.com

It's been in the works for awhile, but since I'm the lone wolf doing all the content, design and development, it's taken awhile. Needless to say I'm happy it's done and quite pleased with the results. Of course, it's never really done! I had to hold back on many of the features I wanted to build, because we really just needed to move away from our old, static HTML tag-soup site. However like all sites, it's a work in progress and will continue to change over the coming months.

For the geeks, it's built with ColdFusion 7 and utilizing the Model-Glue framework. It also uses YUI for the menus and some of the layout, and SPRY for some of the other AJAX/DHTML stuff. The markup is XHTML/CSS, it did validate at one point but the YUI menus don't validate...bummer. Oh well! I've never been that sort of standardista...

Dreamweaver Extensions for Model-Glue XML (and FB and M-ii)

On a couple of occasions I have thought that someone needs to write a Dreamweaver extension for ModelGlue, as well as the other frameworks, especially a tag library (and a file browser/inspector wouldn't hurt - those ModelGlue.xml files can get long...). I can't tell you how many times I've habitually hit ENTER after typing "na..." to add a name attribute, which auto-completes in CF but not for XML.

Well at least there is a solution to my first desire! The ever-productive Massimo Foti has a series of Dreamweaver tag libraries for the popular frameworks. They can be found on www.massimocorner.com. The site seems to have a thing against deep linking, but you can find the .mxp file downloads under the Dreamweaver > ColdFusion section.

Thank you, Massimo!

(now I just need to find a file inspector, perhaps any good XML one would work...)

Serving a Downloadable File with ColdFusion in Model Glue

I thought maybe it's time for another "real" blog post. I learned a little something today (with some help from Adam) so now I'll share. A hyperlink to download a PDF file - seems simple and straightforward enough. But I've been building this site using the Model Glue framework (and learning MG in the process -- so far so good!), and I wanted to serve the file with <cfcontent>, not just a plain hyperlink, so it wasn't as straightforward as just <a href="myfile.pdf">Download It</a>...

Here's my solution, I'd be interested to hear how others have done this. It seemed like a little bit overkill as I was writing it, but I also realized that I would never need to write this snippet of code again, so that kind of makes up for the long-windedness of it.

The solution is composed of all the standard files and snippets in a Model Glue application.

• the "model" CFC - in this case, a simple object
• a .cfm view file where the "cfcontent" resides
• a function in the Controller.cfc to create the download object and add it to the event
  
• a message broadcast, listener, and event handler in the ModelGlue.xml file
• all the views, which compose my page and contain the links to download the file
  

First, let's look at the "Download" Bean CFC: Download.cfc represents my "file" object that stores my file information. It basically just stores values for the file name, file path, and mime type of the file I'm serving for download. It lives in my "model" folder.


<!--- Download.cfc --->
<cfcomponent displayname="Download" hint="retrieves a file for download to be served with cfcontent">

<!--- init() --->

<cffunction name="init" access="public" returntype="any">

<cfargument name="fileName" type="string" required="yes" hint="name of file once downloaded">

<cfargument name="filePath" type="string" required="yes" hint="full path of file to be served">

<cfargument name="fileType" type="string" required="yes" hint="mime type of file">

<cfset filename =" ARGUMENTS.fileName">
<cfset filepath =" ExpandPath(ARGUMENTS.filePath)">
<cfset filetype =" ARGUMENTS.fileType">

<cfreturn this>

</cffunction>

<!--- getters --->

<cffunction name="getFilename" returntype="string" access="public" output="false">
<cfreturn filename>
</cffunction>

<cffunction name="getFilePath" returntype="string" access="public" output="false">
<cfreturn filepath>
</cffunction>

<cffunction name="getFileType" returntype="string" access="public" output="false">
<cfreturn fileType>
</cffunction>

</cfcomponent>

Notice that the CFC uses ExpandPath() so that a relative url can be passed in as the location of the file, which is much easier when it comes time to build your link, and then the app is not server-dependent. Yes, I could write setters and use those setters to construct the CFC, but I'm never going to build these objects to say, insert into a database, so I didn't bother.

Then I have the actual "download" include. It's called _download.cfm because the underscore preceding the filename is a common convention for files that should not be called directly, but need to be included in another file, it also differentiates it clearly from your "template" view files.

This file gets dynamically included on the page when the "download" viewState value is present. It also only serves the file if it's not a simple value (to ensure the values we need are there). It lives in the "views" folder. Notice there are separate values for the file path and the file name. The file name is what the user sees when they download the file, the file path tells CF where to locate the file. Being able to set the file name in the header is nice because you can use a short, sweet and simple file name for the end user, but your own convoluted, datestamped , purpose-coded file naming convention for the actual file (ok maybe that's just me).

Also we use the http header so that the user will be prompted with the browser "download" dialog, rather than leaving it to the browser to try and open the file directly. It prevents us from having to list some weird instructions like "right-click and choose Save Target As" for the less-savvy users (arent' they all).



<cfset download =" viewState.getValue('download')">

<cfif NOT isSimpleValue(download)>
<cfheader name="Content-Disposition" value="attachment; filename=#download.getFileName()#">
<cfcontent type="#download.getfiletype()#" file="#download.getfilePath()#" deletefile="no">
</cfif>


My Model Glue Controller.cfc contains this function to build the Download object. It just calls the Download.cfc, creates the "download" object, and then adds the instance of said object to the event so it can be found when the page is rendered.

<!--- Controller.cfc --->

<cffunction name="getMyDoc" access="public" returntype="void" output="false">
<cfargument name="event" type="any" required="yes">
<cfset fileDownload = createObject("component","model.Download").init('MyDoc.pdf','assets/docs/MyDoc_123.pdf','application/pdf')>
<cfset arguments.event.setValue("download", fileDownload)>
</cffunction>

In My ModelGlue.xml file, I hook my application into the above function with this XML snippet.

<message-listener message="getMyDoc" function="getMyDoc" />

The event handler for that message is...

<event-handler name="download.mydoc">
<broadcasts>
<message name="getMyDoc" />
</broadcasts>
<results>
<result do="page.mydoc" />
</results>
</event-handler>

The broadcast, obviously, requests the download object via the Controller.cfc. The result - "do" is the same page that my link is on - so the user does not leave that page when they click the "download" link, they are just served the file. Lastly, on the page where I want the link that is clicked to download this file, this is the <a> tag:

<a href="#viewState.getValue('myself')#download.mydoc">Download My Doc</a>

Nice. That's all there is to it.

Of course this sample doesn't show any security or anything, this would only be appropriate for a public download. Sorry if the spacing and indentation is ugly, Blogger's code formatting is a pain! Hope you find it helpful!