Premium Content


Premium Content articles are the very best articles from the world's leading internet technology, subject-matter experts. We have many categories of content below on a wide variety of subjects that have all been commissioned from big name authors.

Explore the Premium Content

Introduction to Flex Builder 2

Welcome to the world of Flex! In this series of articles, I want to introduce you to Flex and the Flex Builder 2 software tool. Flex is an alternative way to using Flash to create SWF files suitable. It targets Flash Player 9 and works with ActionScript 3.0, which is a revision of the ActionScript language.

For developers who are used to creating applications with Flash, Flex provides a different approach – one that takes a bit of getting used to but one that provides great benefits. In fact, Flex Builder is the equivalent of Visual Studio for .NET developers so if you’ve seen or used that approach, you’ll feel right at home with Flex Builder.

In the relatively short time that I’ve been working with Flex Builder (well compared with Flash at any rate), I’ve found it to be a great way to create applications. It speeds up my development process and provides me with lots of built in controls that are easy to configure with ActionScript 3.0. It took a little bit of time to get my head around the changes but now that I have, I am excited by the possibilities that Flex offers.

In this article, I want to start by introducing you to Flex. I’ll show you how to work with Flex Builder 2 and explore the differences between Flex and Flash. In the articles that follow, I’ll show you how to achieve some common tasks in Flex Builder and we’ll create a number of different types of Flex applications.

There is no code download for this article. Rather, it’s going to step you through the process of installing and getting started with Flex Builder. Just a word of warning, if you’ve used earlier versions of Flex, it’s probably best to treat this version as a brand new approach, rather than an extension of those versions.

Read More

Formatting Data in a DataGrid for ASP.NET 1.x

So you’ve built yourself a nice little application, you have some cool design patterns implemented, you’ve normalized your database, you have some pretty good CSS layout classes, maybe even a couple user controls for navigation menus, but there’s just one problem remaining: Data presentation.

The trouble is that your data storage is not directly representative of how your users want to view information. A database isn’t really supposed to be used as the place where you “pretty-up” your data presentation. The goal of the database is to just be your work horse. Let it store the data raw and untouched, and massage the presentation after the fact.

Databases often store data in their own format and for the most part you won’t even have control over how it decides to store it. We’ll use SQL Server in this tutorial as our example database. SQL Server can do all kinds of unwanted things to your data when it stores it. One of the most common things is to append 12:00 AM to your date columns unless you manually trim off the data before insertion.

So what happens when you return the data to the user unformatted? They see big ugly 12:00 AM tied to the end of every date in your DataGrids. It takes up space and is completely useless to the user. Unless your date is supposed to store time as well you need to format the dates correctly for the user.

Read More

Video Streaming with an AJAX Video Gallery Part One

There's no denying that multimedia content enriches websites in both fun and business environments; just look at the recent success of sites like Youtube for example.  Video-enabled websites draw in visitors and help to ensure repeat-visits and an eager consumer base.  Streamed content can improve almost any website; you may have a small blog that your friends use to keep up with your day-to-day activities.  You could stream small videos of a recent snow-boarding trip to your friends without them having to download lots of data.  At the other end of the scale, you may own a DVD rental website.  Providing short trailers of the DVDs means that members don’t have to leave your site (and potentially forget to return) to watch a movie trailer and decide whether or not they want to rent the DVD.  The list of uses is endless, and the benefits are many so maybe it's time to video enable your site.

This tutorial will be the first in a series of articles, with this part discussing a mixed bag of technologies; in previous articles I've focused on three to four complimentary languages, such as HTML, JavaScript and CSS, with occasional XML drop-ins as and when required.  With the subject of streaming media, and AJAX however, there is a lot more that needs to be considered, such as encoding your video files for streaming, delivery of your media, the server-side script that interacts with the web page via AJAX as well as all of the associated HTML, CSS and JavaScript.  What I intend to do is walk through the process of enabling streaming media from scratch, looking at everything I need to do along the way to achieve it.  Some things will be looked at in less detail than others and not everything will be applicable to everybody.

Read More

Creative Portfolio: Wine Label

Why a wine label? Because wine labels are both creative and limited. When you design a wine label, you must consider the shape of the bottle, the colour of the glass and of the wine, and even the texture of the bottle or the label. In addition, you deal with all the elements and principles of design as you meet both marketing problems and government standards. The wine label project will force you to consider type, image, and packaging as you develop both the label and a prototype for your portfolio.

The Portfolio Project: Product Label

PORTFOLIO PROJECT: Wine label. Although this project may seem limited, you might learn that it will allow you to create more product designs for your portfolio as you learn to determine what you need to include and, conversely, what you want to include in your design. Two main issues here focus on legibility and shelf recognition.

TOOLS: Any software that allows you to create and manipulate typefaces through a “character” and “paragraph” option along with image incorporation. Some examples include Photoshop, QuarkXPress, etc.

WHAT YOU’LL ACCOMPLISH: This task will force you to think about typefaces as applied to an object that is both difficult to read from a distance and that must be incorporated within a limited space. Additionally, you will begin to look at all packaging in a different light as you begin to notice how designers used type, images, and materials to represent a product.

There’s so much information to relay to you about packaging in general and about wine labels in particular. So, first I’ll give you information about packaging shelf presence across the board; then, I’ll focus on the wine as I offer information about government regulations and marketing particulars and how to make this wine label fit into your portfolio both visually and conceptually.

Once those topics are covered, I’ll dissect a few wine labels to show you why type and image are so important for this project.

Read More

Ajax WebShop Pattern for ASP.NET 1.1

WebShops and E-commerce online shopping is one of the biggest revenue generating businesses in the world. If you can think of it, chances are you can buy it online. The convenience of being able to purchase anything from a car to a pencil in the comfort of your home without having to travel has made online shopping a massive success.

As a developer you have probably either worked on or been asked to work on a site that has a shopping cart mechanism. Session management is the first thing that comes to mind since you need to persist user selections across multiple requests. Managing this session information in an organized fashion is the first obstacle in shopping cart development.

With ASP.NET 1.1 you also have to deal with the post-back annoyance. Every time a user clicks on a product to add to their cart the entire page needs to be refreshed, and an updated cart total displayed usually somewhere in a top navigation bar.

With Ajax technology now available to ASP.NET 1.1 users through the user of the freely distributable MagicAjax component you can now implement a much more aesthetic version of an online shopping cart without having full page refreshes.

In this tutorial we will be looking at a development pattern, and ‘not’ a complete shopping cart implementation. The goal is to learn the pattern so that you can apply it in different ways to your specific needs.

Read More

Creative Portfolio: Video Production

If you have your sights set on a career as an Art or Creative Director, you need to know about video production even if you don’t conduct the actual shoot. The dilemma that you might face is that you need to know enough to discern whether your team is goofing off or goofing up, but you don’t need to memorize every digital and video magazine and book on the market. Unless you plan to become a fulltime camera person, you just need to know the basics. Linda will take you through those primary routines in this article.

The Portfolio Project: Digital Video

PORTFOLIO PROJECT: Video. This project is a little looser than the previous projects, as the video will not be included in your portfolio (although you might plan to develop a promo or something similar for an online portfolio).

TOOLS: Video production would require Director, Premiere, After Affects, Sound Forge, or some other film editing/audio program that comes with a digital video camera. If you don’t have this software, just follow along and plan up to the point where you eventually will produce the video. You’ll need to use a notebook and sketchpad for notes and thumbnail sketches, as well as video storyboard sheets for production logs (sample included in this article).

WHAT YOU’LL ACCOMPLISH: As with previous projects included in this series, it’s your job to tackle this project with the study of other videos, television shows, and movies to learn more about how the pros accomplish their tasks. You don’t need to reinvent the wheel. You just need to prove that you can create a smooth ride.

Read More

Web 2.0 issues and workarounds

This article is the last in our series on Web 2.0 applications. If you’ve been reading the earlier articles, you’ll realise that Web 2.0 is a major new approach to building Web applications that mimic the responsiveness of desktop applications. Throughout the series, I’ve focused on Ajax-style applications and Flash/Flex rich internet applications.

In this article, I want to finish the series by looking at some of the issues that arise when developers start working with Web 2.0 applications. I’d also like to present solutions, where possible, to each of these issues.

There aren’t any resources to download with this article as we won’t be working through any examples. Rather, the article discusses some of the issues applying in the Web 2.0 approach. In particular, I want to cover the following issues:

  • Bookmarking
  • Use of the back button
  • Search engine indexing
  • Reliance on JavaScript
  • Reliance on the Flash Player plug-in
  • Reliance on XSLT

Some of these issues arise because of the way Web applications use a “single page” application model. Others arise because of Web 2.0’s heavy reliance on client-side scripting and plug-ins. Whatever their source, these issues have been addressed fully on a range of Web sites. Rather than reproduce the content from these Web sites, I’m going to provide a summary of the issue with some general observations. Then I’ll point you to some of the useful resources I’ve found to deal with them.

I’ll start with a look at issues relating to bookmarking a position within a Web 2.0 application.

Read More

Captcha with Flash Forms

If you are using Internet for your daily needs you have probably seen Captcha many times, you might just not know it. If you are familiar with the term you can skip the explanation below, otherwise read on.

Note: According to Wikipedia “captcha (an acronym for "completely automated public Turing test to tell computers and humans apart") is a type of challenge-response test used in computing to determine whether or not the user is human”.

Captcha is a small image with randomly generated text placed on a web form next to a designated text field. To submit the form user must type the text seen on the image into that text field. Thoroughly written server-side code will accept the submitted data only if the text has been entered correctly. To make it even more “spammer-proof” the verification text can be slightly scrambled, rotated and/or appear over a patterned background.
Since no modern software can (reliably) read text from images, Captchas make it really hard (if not impossible) to automate form submission procedure, thus protecting web sites against unfriendly actions, like web form spam or brute force attacks.

Ultimately, Captcha can be very useful on your HTML form, whether it’s a trivial “Contact us” page or a log-in screen to a web application processing sensitive data.

Flash forms are not as easy of a prey for the bad guys as they can’t be detected by crawlers or parsed as text.

Nevertheless, you can still benefit great deal from utilizing Captcha on your Flash forms. Why?

The answer, although simple, might not be obvious:

Any form whether it’s been designed in Flash or HTML needs a server-side script to process the submitted data. It is that script – not the form itself, of course, that requires protection from the automated submissions.

Read More

SOAP Header Security in ASP.NET 1.x

When working with Web Services one of the more difficult aspects of implementation is security. There are several scenarios of Web Services usage and depending on what your Web Service is intended to do you will require different methods of security.

If your Web Service is intended for public use security is probably not a great concern. If however your target audience is for strict corporate use or even internal use within a single company you will need to make sure your Web Service is not accessed from unauthorized sources.

The first natural thought it to create a login service which can authenticate users before allowing any access to your service methods. One of the biggest annoyances with Web Services and Web requests in general is that state is always destroyed after each request. There’s no simple solution to maintaining a user’s security principle across multiple Web Service requests.

What does this mean in simple terms? It means that you can authenticate on one request but subsequent requests will not be authenticated because the Web Service is not able to “remember” your client. In addition you don’t really want to be sending over user names and passwords as serialized text over the internet.

Fortunately there is a fairly simple alternative called SOAP headers or envelopes. These are sent as separates XML packages with your Web Service requests and can be read by the Web Service separately from the web method parameters.

The purpose of this article is to demonstrate how to use SOAP headers on a Web Service in an ASP.NET application, and, how to implement the header on an ASP.NET client application. The demonstration will be fairly straightforward and will use a login form to create a Web Service security content and use that context object on all Web Service requests.

Note: Visual Studio .NET 2002/2003 running ASP.NET 1.x is required for this tutorial. Both VB.NET and C# code samples will be provided

Read More

Creative Portfolio: Consumer Campaign

Often a Website client might branch out into other media to promote his products or services. Magazine advertisements, billboards, and television commercials all offer venues for marketing campaigns. If you know how to create and present a multi-format presentation like this, you could snag that Web client’s total advertising program. In this tutorial, Linda shows you how to create a campaign that is consistent with a client’s Website so that you can include this project in your portfolio.

The Portfolio Project: Print Advertisement Campaign

PORTFOLIO PROJECT: Ad Campaign. This project includes 3 full-page colour magazine ads, a billboard, and a storyboard for a 30-second television commercial. These projects can supplement a client’s Website, so pick a product or service that you’ve already worked with for this project, if possible. You will learn how to present these projects professionally to a client in a professional manner.

TOOLS: Begin with a sketchbook to make notes and to plan your ad campaign through thumbnail sketches. Even if you don’t have access to a layout program like QuarkXPress, you can use Photoshop or other software programs to complete this project. A basic understanding of print production, including billboards, is desirable.

WHAT YOU’LL ACCOMPLISH: You will act as Art or Creative Director as you complete the three diverse media projects. Although you might not have a staff to fulfil your directives, you can think as a director as you tackle new skills that will expand your knowledge about advertising campaigns. Once you complete these projects, you’ll know how to direct a team that can create the final projects.

Read More

User Controlled Styles with JavaScript and CSS Part Three

Welcome to the third and final part in this series; in parts one and two we created the test HTML page, a series of CSS files and the JavaScript code needed to make it all work at a basic level.  This part of the tutorial is going to look at the method by which we are going to ensure that when a user visits our site and makes some style choices, those choices remain if they navigate away from the site and then later return.

As we left things in part two, the page itself was working and the style control panel could be used to easily change the font size and theme of the page.  Visitors also had the opportunity to create a printer-friendly page consisting of just black and white styles.  Before we look at saving visitors style choices, we're just going to tidy a couple of things up.

We didn't go back to the HTML file and add the relevant event handlers or ID attributes in part two, but if you went ahead and did this anyway, you may have noticed when switching to the print medium style that the controls div loses its background colour and the link text changes to purple to denote a visited link.  This is only a trivial problem admittedly, but to me it just doesn't look professional.  You can fix it by adding the style rules to be applied when no colour stylesheet is in force to the userControlledStyles.css file.

Read More

Web 2.0 best practices

If you visit this Web site regularly, you’ll realize that recently, we’ve looked at the topic of Web 2.0 in some detail. This approach to Web applications aims, among other things, to create a more responsive experience for users. Both Ajax-style and Flash/Flex rich internet applications are common approaches in the Web 20 world.

The Web 2.0 approach is relatively new to the Web world and in this article, I want to look at some of the emerging best practices for building Web 2.0 applications. Even though some of the component parts of approaches like Ajax have been around for a while, developers are still coming to terms with Web 2.0. As we get more and more experience building this type of application, more and more best practices emerge.

I’ve attempted to put together a list of best practices for building Web 2.0 applications. See if you agree with what I’ve written or if you’ve got any more to add. I’m going to cover the following:

  • Minimizing server traffic
  • Using appropriate interface elements
  • Providing user messages appropriately
  • Indicating changed or refreshed data
  • Picking the right approach for applications
  • Enabling SWF files
  • Using frameworks, toolkits and script libraries
  • Working with object-oriented design patterns
  • Separating script into separate files

There aren’t any resources to download with this article. Rather, it discusses each of these best practices and provides a rationale behind why each is appropriate.

Read More
Newer articles Older articles