CMX Weekly Newsletter

Check the News!

Chicago: Developing a CSS Starter PageCSS Starter Chicago

Last fall Sheri German went to Chicago to present a workshop at Adobe MAX 2007. She took some photographs to use in a second tutorial series devoted to developing a CSS Starter Page.

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you can rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch. However, a little knowledge is still necessary. There are some features that the starter pages must leave up to you to develop, such as navigation schemes, text styling, and background images to use in faux column technique.

In this five-part tutorial you'll learn to take advantage of a starter page as you modify the two-column, fixed-width, left-sidebar, header and footer layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago. You'll add horizontal navigation and sidebar pods to jazz up the generic design and make it a functioning page upon which you can base a site.

And as a special addition to the series, Jim Babbage takes you through the process of modifying Chicago to use for a photography site.

Speaking of JumpStarts

In last week's newsletter, we asked folks to email bill@communitymx.com and let us know which of our JumpStarts you've used and examples that have gone live. One of the many responses we received came from John Rives, who emailed us the following:

"A couple years ago I decided to switch my main company website www.discwritecd.com to HTML using CSS for positioning and layout. I had been studying SEO and all the experts agreed that HTML websites perform better for search engine returns and rankings than Flash websites.

I picked the Venice JumpStart template because I really liked the curved borders on the columns and felt that it would give my website a unique look compared to most HTML sites. It was hard for me to transition from Flash to HTML and CSS as I was used to being able to put things where I wanted them in the Flash authoring environment and having them stay there with no surprises in any browser. The JumpStart template gave me the basic CSS code to get things together very quickly and the code hints and tutorials gave me all the info I needed to modify the template and create my current website. I gained a much better understanding of how CSS works in various browsers from using the JumpStart template, and working through the tutorials that came with it, along with other CSS tutorials on the CMX website. I also began using Fireworks for the first time, since the main image file for the JumpStart template was built in Fireworks, and found that I much prefer it to Image Ready for slicing up images for use with websites.

I have had a lot of compliments on my site over the past couple years and am very thankful to Community MX for providing the valuable services they provide to the web development community which includes the JumpStart website templates and tutorials."

Thank YOU, John! We'll provide you with more great examples of how the CMX JumpStarts have been used in this manner in coming weeks. Keep those websites coming!

Apple Updates Safari to 3.1

You could read the whole article at AppleInsider.com, or you can check out CMX author Steven Seiller's succinct outline of Safari's improvements below:

Performance:
Improves JavaScript performance

Standards:
Adds support for CSS 3 web fonts
Adds support for CSS transforms and transitions
Adds support for HTML 5 <video> and <audio> elements
Adds support for offline storage for Web applications in SQL databases
Adds support for SVG images in <img> elements and CSS images
Adds support for SVG advanced text

Microsoft Windows:
Improves Back/Forward performance
Supports signed Java applets
Shows Caps Lock icon in password fields
Adds support for showModalDialog
Localized in 16 languages
Adds support for International Domain Names
Improves handling of Japanese, Chinese, and Korean text
Contextual menu now allows opening a link in a window or tab
Improves pop-up blocking to work with plug-ins

Compatibility:
Increases site compatibility

Stability:
Improves application stability

Developer:
Adds option in Safari preferences to turn on the new Develop menu which contains various web development features
Allows access to Web Inspector
Allows access to Network Timeline
Allows editing CSS in the Web Inspector
Allows custom user agent string
Improves snippet editor

Other:
Double clicking on the Tab Bar opens new tab
Includes URL metadata when images are dragged or saved from browser
Opens Download and Activity window in current Space
Supports trackpad gestures for back, forward, and magnify on MacBook Air and compatible MacBook Pro computers
Shows Caps Lock icon in password fields

Another Community MX Milestone!

Community MX writes a lot of tutorials. Plenty of 'em. As a matter of fact, we've just posted our 2,500th piece of content. Mixed into that 2,500 are articles, extensions and JumpStarts as well as thousands of tutorials. We've covered Flash, Illustrator, Dreamweaver, Fireworks, ColdFusion, Photoshop, InDesign, CSS and many other subjects relating to web development. As much information as we've covered, there's still a huge amount of information that we haven't touched on yet. Is there anything specifically you'd like to see a tutorial on? Whether it's something simple or something more advanced, let us know. Email bill@communitymx.com.

First Marriage Proposal on Twitter.com... Hold On... Is That Stephanie?!

The folks at Community MX have been deluged with people writing to us and asking us if we knew that Stephanie Sullivan, Community MX author, had been proposed to by Greg Rewis, one of our buddies at Adobe, via Twitter.com. If you haven't seen Greg's short but sweet proposal, here it is. Yes, we knew about it, but we thought we'd keep it quiet out of respect for our friends' privacy. Ok, the truth is we wanted to be the only ones able to goof on them. But all of a sudden, someone posted a link to an article at Wired.com that brought the online proposal into the light. Looks like we don't need to keep this under our hats anymore. Besides, if Greg really wanted this to be a secret he would have proposed more traditionally. That's right, via email, like the rest of us. Even though Greg chose the Uber-Geekiest way to propose, we know that Stephanie would want to reply to Greg in person. Oh wait... maybe not.

Satisfied Customers Speak Out!

  • "Great article! It goes right to the heart of what I try to tell my potential clients and will change my approach to the initial consultation."

    - Patricia S., CMX Subscriber, commenting on Derrick Ypenburg's article,
    Lost in Translation - Basic Web Site Communication.

    Whether you're just starting out or need advanced support, Community MX will give you answers and ideas to work through your tough issues. Don't miss out. Learn more about CMX or sign up for a free trial today!

Great Quotes:

"Every man's work, whether it be literature, or music or pictures or architecture or anything else, is always a portrait of himself. " — Samuel Butler

iPhone: To Flash Or Not To Flash?

When asked whether or not the iPhone would ever support Adobe's Flash, Steve Jobs was not optimistic. He poo-poo'd Flash for being too resource-intensive for the iPhone and said that Flash Lite wouldn't do the trick since it doesn't work within an actual browser. He did say that he thought there might be an "in-between" product that would do the trick, but that it just didn't exist yet. Adobe wants to change that, and with the recent release of the iPhone software developer's kit, they're sure they can create a new version of Flash specifically for the iPhone. Adobe would have to figure out how to deliver it as something other than a browser plug-in though, since the iPhone developer guidelines don't seem to allow plug-ins for the iPhone. More on this at AppleInsider.com.

You Get The Picture

Sooner or later a client is going to ask you to snap some pictures for their website, brochure or catalog. "Eh, just go to Lexington and 42nd street and get a shot of that diner. It would be perfect for my ad!" But... is it legal to take pictures whilly-nilly of anything you want? Not quite. The rules on what you can and cannot take pictures of while you're out in public are not crystal clear, but you can at least find some guidelines at PhotoJojo.com.

We're Betting The Swimsuit Editions Get The Most Hits

This is fantastic news for sports fans. Sports Illustrated is putting every word and picture they've ever published in their magazine and they're going to archive them on their website. You'll be able to visit SI's "Vault" and view fifty three years of sports history. The catch is... there is no catch! The idea of posting back-issue content online is catching on pretty fast these days. Many of the major newspapers and trade magazines have already gone the route that Sports Illustrated is taking now. This article at NYTimes.com explains it pretty well.

How's About One Super-Browser Called Exoperafarifox?

Firefox just released the fourth beta for Firefox 3. A beta for Internet Explorer 8 is available. Apple updated Safari to 3.1 (see story above) and Opera hangs in there at version 9.26. Which browser should you use? With all of the web developers here at Community MX that build websites meant to comply strictly with WC3 standards, you can imagine that we've had to test each browser thoroughly, approaching each one from every possible angle to make sure it's going to work with whatever code we can throw at it. That being the case, we can say with absolute certainty that we have no idea which browser you should use. We're glad there are articles like this one at Cnet.com that outlines all of the pluses and minuses of each of these browsers so that you can decide which one is best for you.

News Flash: Sniffing Your Armpits Is Not Going To Get You Hired

We care about you. We want you to do well. We don't want you to blow your next job interview by wearing a spandex bikini. If you're the type of person that doesn't know that it's not ok to yodel while interviewing for a web developing postion, you might need to read this article from Reuters.com.

CMX Insert FlashObject 1.2 (Dreamweaver Extension)

  • FlashObject is an external JavaScript file, created by Geoff Stearns, that enables you to embed Flash movies into web pages using XHTML-compliant code. The CMX Insert FlashObject extension automatically inserts FlashObject code into Dreamweaver documents, and copies flashobject.js into the folder you specify. Now supports major, minor, and revision Flash Player detection.

    Take a look at this Dreamweaver Extension by former CMX Partner Paul Newman

Fun and Freebies!

We've Actually Gotten a Few of These

Here are some computer error messages you'd probably rather not see, like "Windows has detected a Strawberry Pop-Tart in your CD-ROM drive. Unable to toast." View the rest of them at Cracked.com.

Tom Green Remodeled His Bathroom

And this is the result. Ok, not really. Yet.

The King Is Dead. Long Live The Next One!

Robert Soloway, once called the "King of Spam" by the authorities, isn't in a good place right now. He lost a judgement for $7.8 million when Microsoft took him to court in 2005, and now it looks like he's going to jail for fraud and tax evasion. Soloway admits that he was the mastermind behind some of the largest spam operations in the world. He also bragged about never the hundreds of thousands of dollars he made in the world of spam while never having to pay out any money on any of the civil suits he lost. Soloway's fellow inmates will probably find his stories interesting. Read more about it at Yahoo News.

Progressive Enhancement in Flash - Part I

  • One of the main tenets of good Web design involves the principle of progressive enhancement. In general, the idea goes like this: make sure the user can access a web site's essential content regardless of browser. It shouldn't matter whether the user visits your site with Internet Explorer, Firefox, Safari, Netscape, or pick your favorite flavor. In fact, the site's content should be accessible even without JavaScript or peripheral plugins like Flash Player. Once the basics are covered, use CSS to enhance the visual design. Then, and only then, introduce the whizz-bang stuff — nifty rollovers, AJAX interactivity, Flash — and do it in a way that doesn't penalize users who don't have (or choose to disable) the needed machinery. For many developers, progressive enhancement is a good idea that often gets set aside. After all, doesn't it require duplicated effort? Not necessarily. In this series, you're going to build a simple Flash slideshow that takes its cues entirely from the HTML document that contains it. Update the HTML and the Flash updates too — automatically. If Flash Player is not installed, the user sees the images anyway, only without the Flash pizzazz. Here in Part 1, you'll learn how to get the HTML data into Flash. In future articles, you'll learn how to pull out the relevant image references and captions and display them with ActionScript 2.0 and 3.0.

    This free article by CMX Partner David Stiller can be found here.

Weekly Content Listing

flex

Flash-Flex Integration - Part 1: Workflows [FREE]

Joseph Balderson

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

In this first article, we will introduce the topic by looking at where certain Flash and Flex development scenarios might need to converge into an integrated Flash-Flex workflow. We'll also look some typical strategies to meet the needs of certain Flash Platform development methodologies.

A bird's eye view of the Flash-Flex Workflow.

fw

Recreate the PBS NOW Logo - Part 1: Working with Complex Fireworks Compositions [FREE]

Kim Cavanaugh

You never really can tell when the design-inspiration bug might bite you. My eye catches all sorts of things as I go through the daily routine, and I'm frequently motivated by something I see on television. Perhaps it's an eye-catching effect that is found in a movie trailer, a regular commercial with some snappy graphics, or a logo for a television show.

A quick cruise around the dial a few weeks ago led me to admire the logo that is produced for the Public Broadcasting System here in the United States for their investigative series known simply as NOW. A quick visit to the NOW web site will reveal a site design with rich colors and some outstanding uses of CSS techniques for displaying the section headers on the page. It's a beautifully designed site with an eye-catching logo that clearly brands the site as well as the show itself.

In these two tutorials you'll learn how to create your own version of the NOW logo using some basic (and a few more advanced) techniques in Fireworks, with the methods demonstrated applicable to all version of Fireworks from MX 2004 to CS3. Specifically, you'll learn how to do the following in Part 1 of this two-part series:

  • Examine a sample image and break it into its different components
  • Prepare a Fireworks document using sound work-flow techniques and layer organization
  • Use standard Fireworks tools for creating the primary elements of the design
  • Create custom gradient fills

In Part 2 you'll learn how to use some of the more creative possibilities in Fireworks. Specifically, that tutorial will cover how to:

  • Transform an object to create a mirrored version of an original graphic
  • Use opacity settings to control the appearance of objects
  • Use blurs and blends to create a reflective surface
  • Employ lighting techniques to highlight different portions of a composition

In addition to the techniques shown here you'll also find sample Fireworks files in the download for both tutorials.

The Recreating the PBS NOW Logo Series:
Recreate the PBS NOW Logo - Part 1: Working with Complex Fireworks Compositions
Recreate the PBS NOW Logo: Part 2--Creating Reflective and Lighting Effects Coming Soon

illust

Creating a Cool Vector Wax Seal in Illustrator

Darren Winder

Wax Seals were applied to envelopes and parcels to indicate whether or not the item had been opened. Seals were used as a tamper proof way to identify the sender and that the item was not a forgery. When a Wax Seal is used it allows for the choice of another color to be used, other than the paper itself or envelope. To Seal a letter or package the letter writer would pour wax over the envelope flap or package joint, and then press a ring, metal stamp or device with a personalized emblem or insignia onto the wax.

During this tutorial we will create a Wax Seal with your personal emblem or insignia.



The Creating a Realistic Vector Envelope in Illustrator Series:
Creating a Realistic Vector Envelope in Illustrator
Creating a Cool Vector Wax Seal in Illustrator
A Ribbon Adds Flair to Your Design - Created in Illustrator Coming Soon

edu

The Art of the Interactive Storyteller - Part 1 [FREE]

Tom Green

We all tell stories. Every night my wife and I sit down and, over dinner, tell stories about our frantic lives that day. What my wife and I do is no different from what web developers do every day. The only difference is web developers tell stories to a global audience. In fact did I tell you the one about being mugged by a werewolf on a site I was surfing.....

The Interactive Storyteller Series:
The Art of the Interactive Storyteller - Part 1
The Art of the Interactive Storyteller - Part 2 Coming Soon
The Art of the Interactive Storyteller - Part 3 Coming Soon
The Art of the Interactive Storyteller - Part 4 Coming Soon
The Art of the Interactive Storyteller - Part 5 Coming Soon

cf

The Mystery of CFC Variables and Properties - Part 2

Tom Muck

If you use ColdFusion you should be using ColdFusion Components (CFCs). One of the more perplexing parts of developing CFCs for the beginning ColdFusion developer is how to define variables and properties. The proper use of variables is important for memory consumption and data integrity. You don't want variables hanging around that aren't needed or accessed from areas that they should not be accessed from.

The first part of this series explained some of the differences between local and global variables as they apply to CFCs. This second part of the series will continue the discusion and show a simple CFC framework component. Part 3 will show a CFC that extends our base component.

The Mystery of CFC Variables and Properties Series:
The Mystery of CFC Variables and Properties - Part 1
The Mystery of CFC Variables and Properties - Part 2
Mystery of CFC Variables and Properties - Part 3 Coming Soon

photoshop

Vectors in Photoshop CS3 - Part II: Advanced Vector Operations

Scott Valentine

Tame your paths and make 'em do over time! In this 2nd part, learn how to have paths to some detail work, and how to coax paths out of selections.

The Vectors in Photoshop CS3 Series:
Vectors in Photoshop CS3 - Part I: Getting Started
Vectors in Photoshop CS3- Part II: Advanced Vector Operations

cmx

Happy Easter!

So that the Community MX partners may spend this holiday weekend with their friends and family, we will not be releasing any new content Good Friday. We'll be back on Monday the 24th with two brand new pieces of content. Enjoy the weekend!

cf

The Mystery of CFC Variables and Properties - Part 1 [FREE]

Tom Muck

If you use ColdFusion you should be using ColdFusion Components (CFCs). One of the more perplexing parts of developing CFCs for the beginning ColdFusion developer is how to define variables and properties. This article will attempt to explain some of the differences between local and global variables as they apply to CFCs. The proper use of variables is important for memory consumption and data integrity. You don't want variables hanging around that aren't needed or accessed from areas that they should not be accessed from.

The second part of the series will continue the discusion and show a simple CFC framework.

The Mystery of CFC Variables and Properties Series:
The Mystery of CFC Variables and Properties - Part 1
The Mystery of CFC Variables and Properties - Part 2 Coming Soon

cf

Quick Shot - Securing Your ColdFusion Session Information

Ray West

As we have discussed in other articles, ColdFusion compensates for the stateless nature of web applications by using session variables to track information across the entire time of a user's visit to your site. This allows you to store a user's ID after sign on, for instance, and use it to retrieve information about them from a database or to keep track of information that the user enters while completing a multi page form.

In this article, we are going to go over two simple steps that should lessen the risk of anyone inadvertently providing access to their personal information on your site.

pr

How To Break Your Code and Like It: Testing Procedures [FREE]

Steven Seiller

Whether you are creating new scripts or moving existing scripts to a new server, testing each one is an essential step to the success of your project. The following are practical tips for ensuring each of your scripts works properly. Although these steps are not complicated, it is their completion which shows the mark of a good professional. The examples provided here are specifically PHP, but these procedures generically apply to any server-side scripting language including ASP, ColdFusion, Perl or Ruby.

Using Photoshop to Simulate Flowing Water

  • Add a little water to your images with this quick and easy flowing water tutorial. Be sure to keep your galoshes handy!

    Check out the Article by CMX Partner Scott Valentine

Tips, Tricks and Dirty Cheats!

This week's first Tip, Trick or Dirty Cheat is courtesy of Tom Green, Community MX author

Taming The Time Machine

When using OSX Leopard I am inevitably informed by Time Machine, the back up utility for Leopard, that the disk is full. Being the "cheap" sort buying a big honking external HD solely for this purpose doesn't make sense.

What I have started doing is deleting backups that are greater than 30 days old. To do this:

1) Open the drive where Time Machine stores your backups.
2) Locate a folder on the drive with the name of Backups.backupdb. Open it and you will see a folder with the name of your computer : Tom Green's Computer
3) Open this folder and you will see a whack of dated folders. These are the backups.
4) If today's date is March 31, 2008. I will drag all folders with names of 2008-01-31 or earlier to the Trash.

Problem solved. Just be aware that any important files in those folders will be erased from existence and can't be restored.


Would you like your tip published? Submit it to tips@communitymx.com.

That's it for this week. Stay tuned for the next CMX newsletter!