CommunityMX.com

Toggle Checkbox Selections

Mon, 15 Mar 2010 05:00:00 GMT

You have a list of checkboxes on the page and you want to add a toggle to check all of them or uncheck all of them and you need it done in minutes? Well, with a little prep and a few lines of JavaScript, you can get this done in no time!...

Stability patch to be issued for Fireworks CS4!

Sun, 14 Mar 2010 16:15:26 GMT

Well, it' been a long time coming, but I'm very happy to hear that the Adobe Fireworks team is working on a Fireworks CS4 patch to fix the Snow Leopard crash on quit bug, as well as other high priority crash and data loss bugs that they're aware of.

Adobe is expecting to release the update in the second quarter of 2010.

In the meantime, on the Fireworks Team blog, Br......

Introducing CMX Masterpiece Photo Collection 14: The Adventures of Sherlock Holmes

Fri, 12 Mar 2010 05:00:00 GMT

We are excited to introduce the CMX Masterpiece Photo Collection 14: The Adventures of Sherlock Holmes, based on the book by Sir Arthur Conan Doyle (1859 - 1930).

Everyone knows that back in the good old days a detective carried a magnifying glass. A good photographer carries lenses to capture stunning close-up shots - as though through a magnifying glass....

CMX Masterpiece Photo Collection 14: The Adventures of Sherlock Holmes

Fri, 12 Mar 2010 05:00:00 GMT

Close-up photography is one of my favorite types of shooting. The camera lens can zoom in and focus on details that the human eye is not equipped to see. Plus, a simple image that fills the entire frame can be quite dramatic. Often, I will go out on a shoot with macro/close-up photography as my project of the day and come home with some incredible surprises.

This collection contains ten high resolution images that you can use in your web or print work.

Approximate download size: 54MB...

CSS3 Colors - Part 2: HSL & HSLA

Thu, 11 Mar 2010 05:00:00 GMT

In CSS2 we were limited to RGB, Hexidecimal and named colors. With greater CSS3 support in modern browsers, we have new value types, and new values, including native support for alpha transparency. This article provides a brief overview of all the color choices. and goes in depth into HSL - hue, saturation and lightness: the new CSS3 color system.

The CSS3 Colors Series:
CSS3 Colors - Part 1
CSS3 Colors - Part 2: HSL & HSLA...

CMX JumpStart: Beijing

Wed, 10 Mar 2010 05:00:00 GMT

Welcome to the Beijing JumpStart!

The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.

The main construction of Beijing consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width while maintaining a good line reading length. The content as always is created with valid code and accessibility in mind....

Introducing CMX JumpStart Beijing

Wed, 10 Mar 2010 05:00:00 GMT

The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing....

Get the Time of Day as a MySQL Developer - Part 4 - Formatting Functions for Dates and Times

Tue, 09 Mar 2010 05:00:00 GMT

As of version 5, MySQL has over 50 date and time functions which allow you to get the time and date, format its appearance, convert to another unit of measure or to perform calculations on elapsed time. While the MySQL manual details the functions altogether on one page, I will cover these functions by their specific purpose.

There are four types of date and time functions within MySQL. By covering these numerous functions within these four categories, I hope to make learning easier for you. I have divided these into the following categories:

Queries -- Get a time or date value from the server.
Formatting -- Change the appearance of a date or time value.
Conversions -- Change the date or time from one unit of measure to another.
Math -- Calculate the elapsed time between two dates or calculate the time to or from a specific date.

This installment will cover functions for formatting dates and times to give them the appearance that you wish to display.

The Get the Time of Day using MySQL Series:
Get the Time of Day as a MySQL Developer - Part 1: Data Types
Get the Time of Day as a MySQL Developer - Part 2: Automatically Updated Timestamp
Get the Time of Day as a MySQL Developer - Part 3: Query Functions for Dates and Times
Get the Time of Day as a MySQL Developer - Part 4: Formatting Functions for Dates and Times ...

Creating a Realistic Looking Phillips Screw Head Using Photoshop CS4/CS3

Mon, 08 Mar 2010 05:00:00 GMT

In this tutorial we are going to create a cool looking Phillips screw head to apply to our designs. We will be using: Photoshop CS3 / CS4. All we need is a blank canvas, a few Tools and to apply a Layer Style. We will save the finished product as a Smart Object. What do we achieve? A Smart Object to use over and over again!...

Page Fragmentation Using SimpleHTMLDOM

Mon, 08 Mar 2010 05:00:00 GMT

One of the biggest moves in content presentation and management over the last few years has been page fragmentation. That is, thanks to JavaScript and AJAX methods web developers have begun to change and update smaller parts of each page in real time, rather than reloading the entire thing whenever any time of interaction occurs. Perhaps one of the most difficult challenges of this type of approach though is determining how to actually divide up your page content and manage it on your web server so that you don't end up with hundreds of "tiny HTML page snippets" that are dynamically combined to form actual pages of a site.

Today we're going to look at a very clean and easy solution to this problem utilizing the Simple HTML Dom library for PHP....

Audit a SQL Server Data Table - Part 2

Fri, 05 Mar 2010 05:00:00 GMT

When you have a database table that gets updated or changed, it makes sense to keep track of those updates. A relational database table is like a snapshot in time. It contains your data in its most recent form. When you update it, the previous data is lost. For example, a product might have a price. When you change that price, the previous price is lost. Many times it can be retrieved from a log, but another way to make sure you have an audit trail of your data is to create dedicated audit tables for each table that you want to keep track of.

This article will show one simple way to create an audit table and related functionality in SQL Server without needing to modify your web application much at all. This first part of the series set up a sample application. This part will create the SQL Server functionality to handle the audit. For the article, I'll assume you know how to set up ColdFusion sites, work with basic database operations in ColdFusion (listing, inserting, updating data), and working with session variables. The series will focus on the auditing of the table.

The Auditing a SQL Server Data Table Series:
Audit a SQL Server Data Table - Part 1
Audit a SQL Server Data Table - Part 2...

Get the Time of Day as a MySQL Developer, Part 3 - Query Functions for Dates and Times

Thu, 04 Mar 2010 05:00:00 GMT

As of version 5, MySQL has over 50 date and time functions which allow you to get the time and date, format its appearance, convert to another unit of measure or to perform calculations on elapsed time. While the MySQL manual details the functions altogether on one page, I will cover these functions by their specific purpose.

There are four types of date and time functions within MySQL. By covering these numerous functions within these four categories, I hope to make learning easier for you. I have divided these into the following categories:

Queries -- Get a time or date value from the server.
Formatting -- Change the appearance of a date or time value.
Conversions -- Change the date or time from one unit of measure to another.
Math -- Calculate the elapsed time between two dates or calculate the time to or from a specific date.

This installment will cover query functions which are use to access the current date and time.

The Get the Time of Day using MySQL Series:
Get the Time of Day as a MySQL Developer - Part 1: Data Types
Get the Time of Day as a MySQL Developer - Part 2: Automatically Updated Timestamp
Get the Time of Day as a MySQL Developer - Part 3: Query Functions for Dates and Times
Get the Time of Day as a MySQL Developer - Part 4: Formatting Functions for Dates and Times ...

The :first-letter Pseudo Element

Wed, 03 Mar 2010 05:00:00 GMT

The :first-letter pseudo element provides us with a way to style our content in much the same way as you might see in any number of printed articles or books. By making good use of this pseudo element we can isolate the first letter of any section of our content and style it separately from the default styling of the remainder of that content. Whether that content is a simple paragraph copy or a header element we now have the means to isolate the first letter and style it as we see fit....

The CSS Starter Page Series Part 15: Adding a Drop Cap with :first-letter

Wed, 03 Mar 2010 05:00:00 GMT

Dynamic Filelists for Web Applications - Part 5

Tue, 02 Mar 2010 05:00:00 GMT

There are many occasions when real-time automatic file listings can make your life easier as a web developer. Imagine, for example, a video player that would automatically allow users to choose from any video file residing in a given folder. That could sure be useful, couldn't it? As it turns out, you don't have to imagine such a video player, because we'll explore how to build one right here in this series!

Here in Part 5, we'll conclude our investigation by prettying up the clickable text that displays the user's selection. (You can even use this basic technique to include additional information, such as the production company and release date!) You'll also learn how to turn off automatic cycling through the list of videos, if you prefer.

Approximate download size: 9MB

The Dynamic Filelists for Web Applications Series:
Dynamic Filelists for Web Applications - Part 1
Dynamic Filelists for Web Applications - Part 2
Dynamic Filelists for Web Applications - Part 3
Dynamic Filelists for Web Applications - Part 4
Dynamic Filelists for Web Applications - Part 5...

CSS3 Colors - Part 1

Mon, 01 Mar 2010 05:00:00 GMT

In CSS2 we were limited to RGB, Hexidecimal and named colors. With greater CSS3 support in modern browsers, we have new value types, and new values, including native support for alpha transparency. This article provides a brief overview of all the color choices.

The CSS3 Colors Series:
CSS3 Colors - Part 1
CSS3 Colors - Part 2: HSL & HSLA...

Instant Panoramic Collages

Mon, 01 Mar 2010 05:00:00 GMT

If you've ever seen the collages of famous photographer, artist and designer, David Hockney, you'll realize how effective collages can be in visual communication. Furthermore, adding a collage technique to your panorama photography, will give your images even more impact than just the standard flat and one dimensional images to which we're all accustomed.

While we can at best come only close to some of Hockney's images, Photoshop has the ability in it's Photomerge function, to do very quick and effective collages at the push of a button, then all you have to do is dress it up a bit. Let's begin. ...

Get Your Head in the Cloud

Fri, 26 Feb 2010 05:00:00 GMT

Cloud computing is all the talk these days, but what does it really mean and how can you take advantage of it?...

Photoshop 3D for Reflections

Thu, 25 Feb 2010 05:00:00 GMT

Do you ever have a need to create good-looking reflections for your graphic design? This effect is all over the web, but is usually 'faked' in that the reflection is a copy of the artwork rotated and scaled.

Using Photoshop CS4 Extended, you can create real reflections from your artwork that will update as you change the art. And you can check out a variety of reflections and shadows very quickly, enabling a wider selection in a short time. Fire up Photoshop and let's get reflectin'!!...

Do you have an emergency plan?

Wed, 24 Feb 2010 05:00:00 GMT

Do you have an emergency plan? No? Neither did I, until it was too late......

Making HTML5 work in IE6, IE7 & IE8

Wed, 24 Feb 2010 05:00:00 GMT

No version of Internet Explorer understands any new element introduced by HTML5. That doens't mean we can't start using HTML5. In this quick tutorial, we'll show you a quick trick to make the IEs understand the HTML5 elements as CSS selectors....

Shadows in a Flash

Tue, 23 Feb 2010 05:00:00 GMT

The drop shadow filter in Flash is OK. Then again maybe you want a shadow that looks a bit more realistic, or is in perspective. Here are a couple of approaches.

Approximate download size: 7MB...

The :nth-child Pseudo Class

Mon, 22 Feb 2010 05:00:00 GMT

CSS 3 provides us with CSS expressions, CSS Expressions allow you to be very specific with the elements that you target without the need to add styles or classes etc to your HTML document.

In this article we will be looking at the :nth-child pseudo class, currently the :nth-child pseudo class is supported by all the main browsers, Firefox, Opera, Safari and Chrome, which makes them very usable. The only down-side is a lack of support from Internet Explorer. We could, of course, provide CSS for this browser in an IE specific style sheet or we could simply let it degrade without taking away from the content of our web page....

Creating and Saving a Cool Organic Toxic Gel Style in PS CS3/CS4

Mon, 22 Feb 2010 05:00:00 GMT

Create a cool Toxic Gel Style to apply to text and shapes using Photoshop CS3 / CS4, a blank canvas, the Type Tool, and the Bubblegum Regular font. Apply a few Layer Styles and then save the Style. What do we achieve? A Style we can use over and over again....

Rotate That Image with CSS!

Fri, 19 Feb 2010 05:00:00 GMT

A little unknown and not often used style of CSS is the ability to rotate images through a central axis.

Rotation is a very easy thing to achieve and it is not limited to just images, you can apply the same styling to text. The rotate value does require some proprietary code but the affect can be achieved across all the main stream browsers with the exception of Opera; as we shall see....

Audit a SQL Server Data Table - Part 1

Fri, 19 Feb 2010 05:00:00 GMT

When you have a database table that gets updated or changed, it makes sense to keep track of those updates. A relational database table is like a snapshot in time. It contains your data in its most recent form. When you update it, the previous data is lost. For example, a product might have a price. When you change that price, the previous price is lost. Many times it can be retrieved from a log, but another way to make sure you have an audit trail of your data is to create dedicated audit tables for each table that you want to keep track of.

This article will show one simple way to create an audit table and related functionality in SQL Server without needing to modify your web application much at all. This first part of the series will set up a sample table and give a little background preparation for the functionality. For the article, I'll assume you know how to set up ColdFusion sites, work with basic database operations in ColdFusion (listing, inserting, updating data), and working with session variables. The series will focus on the auditing of the table.

The Auditing a SQL Server Data Table Series:
Audit a SQL Server Data Table - Part 1
Audit a SQL Server Data Table - Part 2...

Party Favourites: The Group Slideshow - Part 2

Thu, 18 Feb 2010 05:00:00 GMT

The advances in mobile technologies and the rapid growth of portable computing devices has brought the reach of the web into entirely new and unexpected places. In this article we're going to look at one particular example that I ran into recently: mobile slideshows, or live photocasting if you will. It helped to make a recent party of mine a roaring success, and it really wasn't that hard to do!

Here in Part 2 I'll show you how to build the "slave" script that will synchronize itself with the "controller" that we created last time. We'll also look add a thumbnail gallery to our controller page.

The Group Slideshow Series:
Party Favourites: The Group Slideshow - Part 1
Party Favourites: The Group Slideshow - Part 2 ...

It Was a Noisy Day

Wed, 17 Feb 2010 05:00:00 GMT

Time was, when we all had cameras which used film, we occasionally ran across a little issue with something called grain. Grain was usually a product of high ISO numbers and dim lighting and produced an image, which had a granular, textured appearance especially apparent when the image was enlarged. This grain can at times be aesthetically pleasing, but for the most part it was technically a bad thing.

Today's digital version of grain is referred to as noise and also results from the same high ISO numbers in dim lighting situations. With digital sensors replacing film traditionally, electronically we're dealing with something called a low signal to noise ratio, which simply put means, less light, more noise.

There are a few ways in Photoshop to offset this noise, some of which deal with just blurring a dominant RGB Channel. This method generally softens the look, but at the same time also blurs a lot of detail in the image. The method I'll be showing you in this tutorial relies on a premise which says in essence noise is random. Perhaps if I expose the same scene several times using a tripod, I can move the noise to different positions and then finally use an average to produce the image. Let's begin....

Get the Time of Day as a MySQL Developer - Part 2: Automatically Updated Timestamp

Wed, 17 Feb 2010 05:00:00 GMT

The first part of this article covered MySQL date and time data types and their usage. Introduced was the TIMESTAMP type which, like the DATETIME type stores the date and time, but is used primarily for the purpose of tracking table modifications. Timestamps can be configured such that they automatically update themselves when a table record is modified.

This part of the series will go into more detail on the utilization of TIMESTAMPs in your tables. We'll then explore a bit of advanced configuration which in effect makes it possible to have two auto_updating TIMESTAMPs: one updating on creation and one updated on update. This will allow you convenience in automatically tracking additions to your tables.

The Get the Time of Day using MySQL Series:
Get the Time of Day as a MySQL Developer - Part 1: Data Types
Get the Time of Day as a MySQL Developer - Part 2: Automatically Updated Timestamp
Get the Time of Day as a MySQL Developer - Part 3: Query Functions for Dates and Times
Get the Time of Day as a MySQL Developer - Part 4: Formatting Functions for Dates and Times ...

Dynamic Filelists for Web Applications - Part 4

Tue, 16 Feb 2010 05:00:00 GMT

There are many occasions when real-time automatic file listings can make your life easier as a web developer. Imagine, for example, a video player that would automatically allow users to choose from any video file residing in a given folder. That could sure be useful, couldn't it? As it turns out, you don't have to imagine such a video player, because we'll explore how to build one right here in this series!

Here in Part 4, we'll continue building the application that reads a file list from a server folder with PHP. At present, this video player cycles among the list of available files, but users don't have any selective choice in the matter. After this tutorial, they'll be able to pick out videos by name!

Approximate download size: 7MB

The Dynamic Filelists for Web Applications Series:
Dynamic Filelists for Web Applications - Part 1
Dynamic Filelists for Web Applications - Part 2
Dynamic Filelists for Web Applications - Part 3
Dynamic Filelists for Web Applications - Part 4
Dynamic Filelists for Web Applications - Part 5...

CMX Masterpiece Photo Collection 13: Gone with the Wind

Mon, 15 Feb 2010 05:00:00 GMT

Over the holiday season, we took a trip through the South. Ever ready with my camera, I captured images in such famous cities as Atlanta, Georgia and Charleston, South Carolina.

This collection of stock photos includes ten high resolution images that you can use in your web or print work.

Approximate download size: 58MB...

Introducing CMX Masterpiece Photo Collection 13:Gone with the Wind

Mon, 15 Feb 2010 05:00:00 GMT

We are excited to introduce the CMX Masterpiece Photo Collection 13: Gone with the Wind, based on the book by Margaret Mitchell (1865-1939). ...

Put Your Heart Into It - A Fireworks Tutorial for Valentine's Day

Fri, 12 Feb 2010 05:00:00 GMT

Valentine's day is close at hand. And if you're scrabbling about, trying to come up with the perfect gift, look no further!

Boot up Adobe Fireworks and in less time than it takes to pick out overpriced flowers, you will hve a custom made Valentine card for your sweetie. This video tutorial is about 20 minutes long and walks you all the steps to design a card using only stock features of Fireworks. ...

Party Favourites: The Group Slideshow - Part 1

Thu, 11 Feb 2010 05:00:00 GMT

The advances in mobile technologies and the rapid growth of portable computing devices has brought the reach of the web into entirely new and unexpected places. In this article we're going to look at one particular example that I ran into recently: mobile slideshows, or live photocasting if you will. It helped to make a recent party of mine a roaring success, and it really wasn't that hard to do!

The Group Slideshow Series:
Party Favourites: The Group Slideshow - Part 1
Party Favourites: The Group Slideshow - Part 2 ...

HTML 5 - Part2: An Introduction to the New Division Tags

Wed, 10 Feb 2010 05:00:00 GMT

In Part 1 of this series we investigated the new layout tags that have become available with HTML 5. Today we will look at some of the authoring content tags, specifically the

and

tags and how they should be used within our web page content. We'll begin by laying out a page structure using today's standards based techniques and then we will recreate the same structure for HTML 5 and build in our newly discovered

and

tags.

The HTML 5 Series:
HTML 5 - Part 1: An Introduction to the New Layout Tags
HTML 5 - Part 2: An Introduction to the New Division Tags ...

Smudge Brush Valentine

Wed, 10 Feb 2010 05:00:00 GMT

Need something new for those Valentine's Day hearts? Check out this simple effect for a unique look!...

Be With You in a Heartbeat - Part 2

Tue, 09 Feb 2010 05:00:00 GMT

We made the monitor but it still needs a touch more work before we go to Flash.

Approximate download size: 21 MB

The Be With You in a Heartbeat Series:
Be With You in a Heartbeat - Part 1
Be With You in a Heartbeat - Part 2...

Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2

Mon, 08 Feb 2010 05:00:00 GMT

Graphs in web pages and reporting applications can be put together with built-in ColdFusion functionality using the tag, or with JavaScript libraries that are widely available. However, sometimes you have a need for a simple bar graph that does not depend on this more advanced technology; working with ColdFusion servers that do not have functioning on the server, or targeting browsers that are not JavaScript enabled.

Bar graphs can be created quite easily using ancient HTML technology without the aid of more advanced techniques for simple bar graphs that display quickly and across all browsers. For this tutorial, I'll assume you know basic ColdFusion and SQL -- writing queries, views, and getting the results you want.

A bar graph can be built vertically or horizontally. The first part showed the horizontal graph. This part will show the vertical graphing process. The basic process is to create the SQL query that you want to view the result as a graph, use a slim image that can be stretched as a basis of the bar graph, and set the height of the image based on the value of your data. For example, a value of $50 might translate to 50 pixels high, and $500 might translate to 500 pixels high. Using simple formulas, we'll create the graphs.

The Creating a Bar Graph with HTML and CSS Series:
Creating a Bar Graph with HTML and CSS using PHP - Part 1
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 1
Creating a Bar Graph with HTML and CSS using PHP - Part 2
Creating a Bar Graph with HTML and CSS using ColdFusion - Part 2 ...

Converting Type to a Smart Object and Adding Filters in Adobe PhotoShop CS4

Mon, 08 Feb 2010 05:00:00 GMT

Using Photoshop CS4, a blank canvas and the Type Tool, we apply a few effects to the text. We can then convert the text to a Smart Object, apply one or more filters. What do we achieve? Cool looking "Speed Text"....

Basic Form Calculations

Fri, 05 Feb 2010 05:00:00 GMT

Calculating totals for a form can seem rather complicated or daunting. In this tutorial, I'll break it down for you very easily and you will be able to create forms and calculate totals in the form in no time! ...

The Modern Digital Portrait

Fri, 05 Feb 2010 05:00:00 GMT

Today's digital portrait is a bit different than traditional portraitures. If you looked and compared today's portrait with yesterday's, you probably have noticed today's portraits are much brighter and have more contrast than in previous years. Photoshop has many different ways to achieve this look and in this tutorial I'll demonstrate a quick and reliable method using Layer Blending Modes and Layer Masks. Let's begin. ...

Be with You in a Heartbeat - Part 1

Thu, 04 Feb 2010 05:00:00 GMT

Watching a heart beat pulse across an ECG monitor is rather compelling. Here's one way to create this effect using a few tools in the Adobe lineup.

Approximate download size: 22MB

The Be With You in a Heartbeat Series:
Be With You in a Heartbeat - Part 1
Be With You in a Heartbeat - Part 2...

Creating Semi-transparent PNG Files in Fireworks

Wed, 03 Feb 2010 05:00:00 GMT

In my last article, I talked about using 32-bit PNG files to create an expandable container. This short follow up article details the process of creating the alpha transparent PNG files within Fireworks.

Alpha Transparency in Fireworks Series:
The 3-Slice Technique with Alpha Transparency
Creating Semi-Transparent PNG Files in Fireworks ...

Get the Time of Day as a MySQL Developer - Part 1: Data Types

Wed, 03 Feb 2010 05:00:00 GMT

You won't have to wait long, as a web developer, before needing to store and retrieve dates and times in MySQL. A mastery of the date and time data types as well as familiarity with the many date and time functions is essential for any MySQL developer in order to maintain integrity in the temporal values that you manage.

This article will cover MySQL date and time data types and their usage. Firstly, we'll look at the options for storing temporal data and later we'll look at important functions for retrieving and using this data. This series is designed to provide the fundamental working knowledge necessary for managing temporal data in MySQL and is designed for beginners as well as experienced users who did not receive formal training in MySQL.

The Get the Time of Day using MySQL Series:
Get the Time of Day as a MySQL Developer - Part 1: Data Types
Get the Time of Day as a MySQL Developer - Part 2: Automatically Updated Timestamp
Get the Time of Day as a MySQL Developer - Part 3: Query Functions for Dates and Times
Get the Time of Day as a MySQL Developer - Part 4: Formatting Functions for Dates and Times ...

Firebug - Part 7c: Debugging JavaScript with the Firebug Console

Tue, 02 Feb 2010 05:00:00 GMT

In this section of a multi-part series about Firebug, the premier (and free) web development tool for Firefox we learn about Firebug's console. We will learn to use console.log() instead of window.alert() and document.write() to inspect and debug JavaScript with Firebug's Console and Script tabs.

The Firebug Series:
Firebug - Part 1: The What and Why
Firebug - Part 2: Overview of Firebug Functionality
Firebug - Part 3: Editing with Firebug
Firebug - Part 4A: Inspecting and Troubleshooting CSS
Firebug - Part 4B: Inspecting and Troubleshooting CSS
Firebug - Part 5: Inspecting the Box Model
Firebug - Part 6: HTTP Requests and Download Speeds
Firebug - Part 7a: The Script Tab (Basics)
Firebug - Part 7b: Debuggger, Breakpoint & Expression Watching
Firebug - Part 7c: Debugging JavaScript with the Firebug Console...

Introducing CMX JumpStart Agra

Mon, 01 Feb 2010 05:00:00 GMT

Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.

CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.

The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).

Of course Agra meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too....

CMX JumpStart: Agra

Mon, 01 Feb 2010 05:00:00 GMT

Welcome to The Agra JumpStart!

The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!

Approximate download size: 4MB...

Dynamic Filelists for Web Applications - Part 3

Fri, 29 Jan 2010 05:00:00 GMT

There are many occasions when real-time automatic file listings can make your life easier as a web developer. Imagine, for example, a video player that would automatically allow users to choose from any video file residing in a given folder. That could sure be useful, couldn't it? As it turns out, you don't have to imagine such a video player, because we'll explore how to build one right here in this series!

Here in Part 3, we'll build on the initial step we took last time, which displayed a single video thanks to Rob Williams' PHP script from Part 1. In this article, we'll update the ActionScript to cycle among all the available files. We'll also make sure to gracefully handle the unlikely event that no files are available. In future articles, additional code will allow users to skip around and decide on their own which videos to watch.

Approximate download size: 8MB

The Dynamic Filelists for Web Applications Series:
Dynamic Filelists for Web Applications - Part 1
Dynamic Filelists for Web Applications - Part 2
Dynamic Filelists for Web Applications - Part 3
Dynamic Filelists for Web Applications - Part 4
Dynamic Filelists for Web Applications - Part 5...

Ribbons Using the Warp Tool

Thu, 28 Jan 2010 05:00:00 GMT

Need some little decorations for your designs? How about some easy-peasy ribbons?!? You'll need Photoshop CS2 or higher to use the Warp tool in this quick tutorial....

Finger-Friendly Mobile Web - Part 3: Physical Sizes

Wed, 27 Jan 2010 05:00:00 GMT

The web is moving beyond the confines of computers, thanks to the advent of smart phones and high-speed cellular networks. This is changing not only the way we think about connectivity and the net, but also the ways in which we access and interact with information. The rise of the touch screen and smart phone are bringing a myriad of new challenges, and opportunities, our way.

In this series we're going to explore how we, as web developers, need to adapt in order to take full advantage of these changes and continue to provide new and exciting user experiences. We're going to learn to conquer the "finger-friendly mobile web"!

In the third part of this series we're going to continue exploring the information density problem by talking about mobile screen sizes and how they impact usability.

The Finger Friendly Mobile Web Series
Finger-Friendly Mobile Web - Part 1: An Introduction
Finger-Friendly Mobile Web - Part 2: Screen Sizes vs Density
FInger-Friendly Mobile Web - Part 3: Physical Sizes...