DMX|ZONE
Register Login

Explore the Premium Content

Creative Portfolio: Poster Design – Type and Image

This article presents the second project in this portfolio series, a poster design that demonstrates your skills at merging type and image elements in an enlarged print format. Linda walks you through the particulars contained within two current poster contests, where you ask about what would work (and possibly win) in each situation. You’ll need to conduct research and work on conceptual design before you create your poster. The information included in this article is relevant to any poster design contest that you enter, and it’s also pertinent to any poster design that you decide to create outside the contest venue.

The Portfolio Project: Poster Design

PORTFOLIO PROJECT: Poster. A poster is typically a printed paper announcement that is publicly displayed and that functions as a promotional tool for a product, an event, or a sentiment or cause through image and text. A poster's principal task is to be noticed: it must attract attention and influence the viewer.

TOOLS: A graphics program that utilizes layers and sometimes Pantone Colours (PMS – Pantone Management System), since this is a print project; sketchbook and notebook for concepts.

WHAT YOU’LL ACCOMPLISH: This tutorial will encourage you to think creatively and analytically about merging type and images in a print design through a brief history about the poster, elements contained within posters, various layout options, and target markets.

Read More
Linda Goin
11041

Displaying Images with the ASP.NET Repeater Control

Images are often an integral part of an application. Many businesses use image cataloguing as part of their everyday business process, from Insurance companies to automotive sales. Images are also sometimes tricky to handle within ASP.NET applications.

Although there are quite a few methods and controls for managing images and thumbnails the process can be a little obfuscated for developers who are not quite sure where to start, or  which controls to employ to accomplish the task. You really have to get creative sometimes and often what will happen is a particular development strategy that will start out with a good concept but, as it develops, it  becomes more and more unorganized and you wind up with quite a mess in the end.

The purpose of this tutorial is to look at one particular approach for displaying a series of thumbnail images and provide a link to a popup window which will handle displaying the full original image. The goal of this sample application will be to accomplish this requirement in the most simplistic way possible, using the least amount of code to keep things organized and tidy.

The control we will use to implement this sample application will be the Repeater control. For those who are familiar with classic ASP style programming the Repeater control will be quite familiar. We will use the basic principles behind the Repeater control to implement HTML template chunks which can handle the display of a series of thumbnails contained within a folder.

We will also build a DataTable object that we can directly bind to the Repeater control, since the Repeater can only be used with a data source. During the binding process we will manually manipulate the items in the control so that we can popup a new window when a certain item is clicked and display the original full image.

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

Read More
Kevin Koch
35797

Pasting ASP Code Into a Template

In this tutorial Richard uses a sample site to show you how to give some style and organisation to it by applying a template and creating a few extra folders. Also you have two more extras in the tutorial: one is a document that explains how to apply the asp code you`ve already created to the template and the other contains the whole sample site.


Read More
Richard Mariner
1995

Speedy Feed Reading With Ajax And Magpie

There are a lot of buzzwords on the lips of web designers/developers these days as certain technologies and concepts become popularized for the exceptional power, convenience, and flexibility they offer developers and users alike. Ajax and RSS have rapidly floated to the top of the trendy, buzzword list, and we’ll dive into them all simultaneously in this article as we build a scalable and speedy feed reader that uses Ajax to serve up RSS content from the sites of some web design rock stars. Our feed reader will easily scale to show as many or as few feeds as you like.

You can take a look at the finished version first to get an idea of what you are in for at http://aarronwalter.com/sandbox/ajax-rss/. The complete source code is available for download at http://aarronwalter.com/sandbox/ajax-rss/code.zip. 

A Quick Primer Before Getting Started

Before we get started, a little primer on some of these topics. By now you probably know that RSS, which stands for “Really Simple Syndication” in most circles, is a convenient way of syndicating content of all kinds from one site to another. It’s a standardized way of writing XML to encapsulated different content so it can be read by various applications on all sorts of platforms and devices. If you are interested in more details on RSS, swing by Wikipedia for an in depth explanation (http://en.wikipedia.org/wiki/RSS).

Read More
Aarron Walter
4127

Ajax Case Study: Real Estate Listings 1

In previous articles, we’ve looked at aspects of Ajax-style applications. Using Ajax in Web applications allows you to build pages that don’t need to refresh when new data is loaded. Instead of the user clicking a button and waiting for the entire page to reload, they can continue to work while part of the page refreshes.


Read More
Sas Jacobs
1661

Creative Portfolio: Product Renderings & Pen Tools

The first project in Linda’s portfolio series begins with tutorials on how to use the Pen Tool to render a vector graphic. She shows you how to create easy product images from photographs and products found in catalogues, even if you can’t draw. You will learn how to use your Pen Tool to the best advantage with step-by-step instructions. You will need to know how to open a graphics program and create a new file, and you must also be familiar with working in layers. Many other projects in this series will make use of the Pen Tool, such as logos and type images.

The Portfolio Project

PORTFOLIO PROJECT: Product Image

TOOLS: Pen Tool contained within any graphics program; product image (jewellery, clothing, etc. – the simpler the better if you’re a beginner); scanner if you need to scan the image from a photograph or catalogue.

Read More
Linda Goin
2486

Simple AJAX accordion

In this article we will continue on the subject of AJAX interface widgets. Today’s topic will be a simple Accordion component – an interface element allowing user to collapse and expand portions of content (further referred to as “panels”) organized in a column-like layout. External content can be loaded dynamically as the container expands (the AJAX part).


Read More
Alex July
17099

Search Your Site with JavaScript, XML and CSS part Two

In the first article we look at all of the associate technology; the XML file, the CSS file and the containing HTML file.  In part two, we are going to focus mainly on the JavaScript, with perhaps a little bit more CSS and a few HTML updates towards the end.  Most of the code in this article will be JavaScript, but there will also be elements of the DOM that we'll use as well.  Getting familiar with DOM scripting is an excellent road to learning the basics of AJAX but it shouldn't be confused with AJAX because it lacks some of the fundamental methods involved such as the use of the xmlHTTP object. 

The JavaScript

The first thing we want the search script to do is to open the XML file to get the list of URLs that should be included in the search.  As those of you that read the article on generating a sitemap will know, this is easily done with a very small cross-browser function.  In a text editor, start with the following:

var searchword;

var doc;

var urls;

var controlvar;

var urldata = new Array();

A set of global variables, which we'll make use of in several of our functions, and an array, the use of which will become apparent towards the end of the JavaScript file.  The first function, to be called on the main search pages onload event, will be as follows (readers of my previous tutorial will find this very familiar!):

Read More
Dan Wellman
3554

Using the DataGrid ItemDataBound Event

The DataGrid is of course probably the most popular and most implemented GUI control in ASP.NET 1.x. One of the fun parts of working with this control is the level of flexibility it brings developers allowing for unlimited combinations of creative implementations.

By applying different design patterns to the built-in functionality you can develop truly unique, robust, user friendly interfaces that allow your users to quickly and easily locate and manipulate the information in the application.

As you work with such a large scale component such as the DataGrid you will learn more and more about the capabilities over time. As your knowledge increases so does the complexity of your WebForms. Before long the amount of code in your code-behind files starts to exceed even your business tier or database tier logic.

Learning development pattern tricks to help manage the amount of code you develop is important in application maintenance. How many times have you come back to a WebForm a few months after you developed it and had to read the code for 30 minutes before you remembered what you did? This is a common occurrence in a lot of applications that don’t employ development standard patterns. Or worse yet, if you did not author the code yourself it can take you hours of research to unearth the processes behind other developers` code.

The purpose of this tutorial is 2-fold. First, we will look at a simple yet extremely helpful development pattern to help manage the columns in a DataGrid control. And second, we will look at how to implement correctly the ItemDataBound event of the DataGrid control to implement some advanced user interface display elements.

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
Kevin Koch
5712

Consuming RSS feeds with Flash 8

So far in this series of articles about Web 2.0, we’ve looked at several ways to create Ajax-style applications. In this article, we’ll look at Flash and use it to consume RSS feeds. Like Ajax, Flash allows you to refresh one part of the interface in a Web page without reloading the entire page.

Due to security restrictions, Flash can’t consume data from an external source in another domain. So we’ll need to use a server-side file to proxy the RSS feed locally. That way, Flash will think that the data is located in the same domain as the SWF file. I’ll proxy the data using an ASP .NET file but you could also use PHP, ASP or ColdFusion for this task. If you want to find out more, you can read the TechNote at the Adobe Web site - http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16520.

Because we’ll be using a server-side file, you’ll need to run this example through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. You’d just need a different proxy file. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone at that location. I have to use http://localhost/DMXZone in the address to load the Flash file correctly.

The tutorial is written using ActionScript 2 and Flash 8. It doesn’t use a class-based approach. Rather, it uses a series of functions located within the Flash file. I’ve done this for simplicity as many people starting with Flash don’t come from a programming background and find it tricky to work with classes.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Getting started

Download the resource files and copy them to a folder called DMXZone within your Web server. Open the starter file FlashRSS_starter.fla in Flash 8. You can see that the interface consists of a ComboBox component that we’ll use to display a list of feeds. It also includes a TextArea component with the html property set to true in the Parameters panel. That will allow us to include simple HTML tags in the items.

When you publish this file, it should look something like the following screen shot – not pretty but very functional!

Read More
Sas Jacobs
6318

Creative Portfolio: What do Employers Want to See?

You love to design Websites, but you know that the field is so competitive that you don’t stand a chance to make anything more than a mediocre income. If you want to get a job with an agency or as a highly-paid freelance designer you need to diversify your portfolio. This is where Linda comes in, with the first in a series about how to develop a creative and diverse portfolio that exemplifies your skills and knowledge. In this article, she explains portfolio diversification, examines portfolio requirements, and offers ideas about how to flesh out your current offerings.

Portfolio Diversification

If you attended a graphic design school, you know how many different classes you took at that school. You had to learn the basics first, like typography, basic Web design, colour, and composition or layout. You then could proceed to classes where you utilized software like Photoshop, Quark, Flash, and Dreamweaver. You were expected to produce print as well as Web design projects to create a well-rounded and diversified graphic design portfolio for graduation.

 

Above: A student portfolio example shown online through the Art Institute of Toronto.

Read More
Linda Goin
11600

How to make a crystal spheres menu in Flash

In this easy Flash 8 pro lesson I will explain you how to design a simple but very pleasing to the eye menu for your Flash website. It is very easy to do it! Amongst other things, you will learn the following:

  • How to use some simple color gradient fills together with blending filters to create nice crystal spheres,
  • How to easily duplicate those spheres to save time,
  • How to make buttons out of these spheres and add labels to them and
  • How to create a 3-D rotation effect using simple motion tween animation techniques, without having to resort to any 3-D programs, and more.

You can see three examples of the crystal sphere menu on the screenshot below. The first one shows just how cool these objects look:), while the second and the third one are interactive – open the file crystal_spheres_menu.swf and try rolling your mouse over them and also clicking on them.


You are going to create buttons like these in this lesson.

For more great tutorials check out:

Read More
Luka Maras
7979
Newer articles Older articles
Currency:
Company Info
Payment & Pricing
Legal Notices
Guides
Copyright © 2001-2024 Dynamic Zones International B.V., All Rights Reserved.