3. DMXzone e-Magazine April 2008 List of Contents Page 3
4 Agenda
DMXzone brings you
the latest events, take
5 News April
We bring you the latest
industry news, so don't
11 Dialogs and Theming
with jQuery UI
Dan Wellman looked
a look to see what is hestitate and take a at creating navigation
going on in the world peek if you want to menus based on
of web development stay tuned with latest traditional web design
and design. developments. methods, but like
everything that you
throw at jQuery, the
library gives back
improved functionality
and lighter code
19 28 37
Drag-and-Drop Introducing Introducing jQuery Part 5
Shoppingcart with jQuery Part 4 In this part of the tutorial
jQuery UI In the last part of this we’ll be looking solely
In this article, Richard turorial we looked at the at the suite of AJAX
will introduce jQuery CSS manipulating tools functionality provided
UI Drag-and-Drop and available to us via the by the library. One of the
show you how with just library. In this part we’re worst (and one of the
a few lines of code, going to look at the only) downsides of AJAX
you can make a richly Effects section this part of is that it is implemented
interactive shopping the library can really add differently by different
cart that is functional visual impact and appeal browsers; notably IE and
and fun to use. to your pages. everyone else.
44 Grunge Text Effects
Sebastian Sulinski will
show you how to create
45 Interview: Dave Nitsche
We interviewed one
of the most promising
62 How to Create Reflection
Effects
In this tutorial you will
a grunge text effect modern photographers learn how to create
using Photoshop CS3. Dave Nitsche. A man a very modern and
that puts photography attractive mirror image
into a new perspective. effect which can be
He'll also gives some used with text and
very practical tips. images.
e-Magazine
4. DMXzone e-Magazine April 2008 Agenda Page 4
Two Powerhouse Packages - One Dynamic Workflow
The Power Integration Tour presents free seminars demon-
strating how you can enjoy increased speed and efficiency
in your production pipeline by combining the power of
Adobe CS3 Production Premium and MAXON CINEMA 4D.
The Adobe/MAXON workflow is the proven choice for top
motion design studios worldwide
Event Date Place
NAB Show April 14-17, 2008 Las Vegas, Nevada
The NAB Show is the essential destination for a global audience of digital media professionals
Photoshop World April 2-4, 2008 Orlando, Florida
The InDesign Conference is going to Miami.
11th Annual Art Directors Invitational April 30-May 3, 2008 San jose, California
Learn from the best and experience fiendishly fabulous Adobe software,
e-Magazine
5. DMXzone e-Magazine April 2008 News Page 5
NEWS
WebKit and Opera content publishers, partners, and WMA: Best of Technology
achieved Acid 3 100% advertisers to see detailed statistical Website Trends
data for their videos. Metrics that the
Safari and Opera announced service provides include geograph- The Web Marketing Associa-
that they have passed the ic viewing and relative popularity. tion, host of leading website
notorious Acid 3 test. Op- awards competition WebA-
era claimed earlier to be the first to wards, released the Internet Stand-
have passed the test, but they used ards Assessment Report (ISAR) to
an internal build. Opera announced help the technology industry create
that they'll release a public version more effective websites.
of the browser that passed the test
within a week. "Technology web sites have scored
the highest in interactivity and de-
sign, but in past years, judges have
shown they can do even better by
getting innovative to stand out from
the other sites and make the visitors
remember them, even after they've
left the site," said William Rice, Presi-
dent of the Web Marketing Associa-
tion.
According to YouTube`s statements
this new service will allow users to
determine trends in how long it
takes for a video to become popu-
lar as well as what happens when
The test is developed on the correct they do become popular. Advan-
interpretation and representation of tages vary for the different groups
web standarts. Firefox and Internet that will be using Insights. Creators
Explorer have yet to pass the test. will benefit from looking at viewing
trends, partners can use the data to
better understand their audience
Read it at the external site... and become more profitable, and
advertisers can tweak their market-
YouTube stats revealed ing strategy based on past trends. The WebAwards competition judg-
es technology websites on seven
YouTube introduced YouTube Read it at the external site... criteria that combined help create
Insights, the newest addition award-winning websites:
to its video service. It allows
e-Magazine
6. DMXzone e-Magazine April 2008 Dialogs and Theming with jQuery UI Page 11
R ichard D. Worth takes a look at creating
navigation menus based on traditional
web design methods, but like everything
that you throw at jQuery, the library gives
back improved functionality and lighter
code in half the time, and we’ll see exactly
this during the course of the tutorial.
e-Magazine
7. DMXzone e-Magazine April 2008 Dialogs and Theming with jQuery UI Page 12
Dialogs and Theming with jQuery UI
By Richard D. Worth
Dialogs and Theming with jQuery UI sourced content. Some future (planned) features for
Dialog include a modal option (so that the rest of the
In this article I`ll introduce jQuery UI Dialogs. I’ll also page/container is disabled while the dialog is open),
introduce one of the premiere features of jQuery UI: minimizing, and maximizing.
themes, and will show how they can be used to make A dialog is a key component of an RIA (Rich Internet
a consistent and attractive web application. I’ll assume Application) as it provides much more flexibility than a
a basic familiarity with jQuery (the base of jQuery UI). popup window. It doesn’t disappear when the main
You should be comfortable with jQuery syntax and application window is activated. It doesn’t appear
basic selectors. on the taskbar. Pop-up windows and built-in browser
prompts have their place, but web page dialogs give
Introducing jQuery UI us a lot of increased flexibility, especially when it comes
to look and feel.
jQuery UI is a library of jQuery User Interface plugins
Getting Started
that make it really easy to create RIAs (Rich Interactive
Applications). Or if you’re not building an application,
they can just add a bit of richness and interactivity to In order to start playing with jQuery UI Dialogs, you’ll
your site. These components and behaviours are ones need to download the latest version of jQuery UI. As
we’re all familiar with in desktop applications, but are of this writing, the last stable release is 1.0. I’m going to
not (yet) the norm on the web. Some examples: drag- demonstrate a couple of features fixed/added after
and-drop, selecting, sorting, grids, treeviews, panels, the 1.0 release, so I recommend grabbing a more
dialogs. recent copy of at lease ui.dialog.js:
1. Download all of jQuery UI 1.0 (Zip file, 101k)
Note: jQuery UI makes use of the latest (as of this 2. Grab just ui.dialog.js from jQuery UI 1.0.1a
writing) major version of jQuery: 1.2. Also, most UI 3. Copy ui.dialog.js from 1.0.1a to your UI 1.0 folder,
plugins require the dimensions plugin. replacing the older version
Another option is just to grab each necessary file from
jQuery UI Dialog jQuery UI 1.0.1a. Here’s the one’s you’ll need for dialog:
• jquery.dimensions.js
The jQuery UI Dialog plugin makes it very easy to • ui.mouse.js
create dialog boxes in your web page/application. • ui.draggable.js
These can be dragged, resized, opened, and closed. • ui.resizable.js
They can be created from dynamic content, and • ui.dialog.js
existing element, an iframe, or a container with Ajax- The advantage to this approach is you’ll also pick up
fixes made to these other components. You’ll also
e-Magazine
8. DMXzone e-Magazine April 2008 Advertisement Page 18
Javascript
for breakfast
Written by Tom Dell’aringa, this series
will detail and teach you how to program
with Javascript.
This book is for anyone with an interest in developing their Javascript skills,
the book uses very clear examples that enable you to master the programming
Get It Now
language. It’s also a useful reference for developers.
e-Magazine
9. DMXzone e-Magazine April 2008 Drag-and-Drop Shoppingcart with jQuery UI Page 19
I n this article, Richard will introduce jQuery UI Drag-and-
Drop and show you how with just a few lines of code, you
can make a richly interactive shopping cart that is functional
and fun to use. To get right into it, He's going to assume that
you’re at least familiar with jQuery (the base of jQuery UI).
You should have a working (latest) copy of jQuery installed
and be comfortable with the jQuery syntax and basic selec-
tors.
e-Magazine
10. DMXzone e-Magazine April 2008 Drag-and-Drop Shoppingcart with jQuery UI Page 20
Drag-and-Drop Shopping Cart with jQuery
UI
By Richard D. Worth
Introducing jQuery UI method on it. Like this:
jQuery UI is a library of jQuery User Interface plugins
$(“#dragMe”).draggable();
that makes it really easy to create RIAs (Rich Interactive
Applications). Or if you’re not building an application,
they can just add a bit of richness and interactivity to
your site. These components and behaviours are ones
we’re all familiar with in desktop applications, but they Since I’ve used the ID selector ( #{id} ), only one item
are not (yet) the norm on the web. Some examples: will be selected and then made draggable. But like
drag-and-drop, selecting, sorting, grids, treeviews, any good jQuery plugin, draggable works on any
panels, dialogs. number of results at once. For example, the following
code will select all list items on the page and make
Note: jQuery UI makes use of the latest (as of this them draggable:
writing) major version of jQuery: 1.2. Also, most UI
plugins require the dimensions plugin. $(“li”).draggable();
jQuery UI Drag-and-Drop
Drag-and-Drop in jQuery UI is achieved by two The draggable method has a number of initialization
separate plugins: Draggables, and Droppables. options, any of which can be passed in an option
Draggables are things you can drag around the hash object (collection of name-value pairs) as an
page; droppables are things that draggables can be argument to the draggable call. Here’s an example:
dropped on, like targets.
Note: Nearly any web page element can be
promoted to be a UI draggable and/or droppable,
including an image, a div, a span, or a list item.
Draggables
In true jQuery fashion, making an item draggable is as
simple as selecting the item, and calling the draggable
e-Magazine
11. DMXzone e-Magazine April 2008 Advertisement Page 27
AJAX enables you to write
interactive applications while
reducing the amount of data
interchanged between the
web browser and web server.
This e-book will teach you DHTML allows you to create
how to use DHTML and amazing effects and allows you
AJAX to create amazing to enhance the interactivity of
new applications and your webpage without using
interactive features for your any Plug-in
website.
Written by our programming guru Tom Dell’Aringa; Get It Now
This book is for anyone with an interest in developing their DHTML
and AJAX skills. The writer uses very clear examples that will enable
you to master the programming languages. It’s also a useful reference
for developers
e-Magazine
12. DMXzone e-Magazine April 2008 Introducing jQuery Part 4 Page 28
W elcome to Part 4 of the introduc-
tory jQuery series; in the last
part we looked at the CSS manipulating
tools available to us via the library. In
this part we’re going to look at the Ef-
fects section; this part of the library can
really add visual impact and appeal to
your pages.
e-Magazine
13. DMXzone e-Magazine April 2008 Introducing jQuery Part 4 Page 29
Introducing jQuery Part 4
By Dan Wellman
There are four categories of effects within the Effects
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
section of the library; the first category deals with the
“http://www.w3.org/TR/html4/strict.dtd”>
simple showing and hiding of elements, the next two <html lang=“en”>
sections are devoted to sliding and fading transitions, <head>
while the final category enables you to create custom <title>jQuery Effect Example</title>
animations yourself, and also manages the effects <script type=“text/javascript” src=“jquery/
queue. jquery-1.2.1.min.js”></script>
</head>
<body>
Throughout this tutorial we’ll be looking at what can be
<button id=“show”>Show</button><button
achieved using each of the effect methods exposed id=“hide”>Hide</button>
by this section of the library. The code we’ll be playing <div id=“div1”>I am div 1!</div>
with has been tested extensively in the most popular </body>
browsers available, but only on the Windows platform. </html>
Next, add the following <style> tag to the <head>
Showing & Hiding Elements of the page:
<style type=“text/css”>
The basic effects of the first category are extremely div {
easy to use. Like other methods defined by the library, border:2px solid black;
the .show() and .hide() methods can be used with or margin-top:10px;
without arguments. In their most basic invocation they background-color:lightblue;
simply show or hide the specified element. Let’s look at color:white;
padding:40px 10px 0px 20px;
these methods in action. In your text editor, begin with width:80px;
the following basic page: height:60px;
}
</style>
Normally CSS would always go into its own file but for
the purpose of this example it can just sit in the head
of the page. Now let’s wire up those buttons with some
jQuery JavaScript. Also in the head of the page, either
before or after the CSS, add the code shown on the
next page:
e-Magazine
15. DMXzone e-Magazine April 2008 Introducing jQuery Part 5 Page 37
T hanks for reading the final part in the
Introduction to jQuery series, in this
part of the tutorial we’ll be looking solely
at the suite of AJAX functionality provided
by the library. One of the worst (and one of
the only) downsides of AJAX is that it is
implemented differently by different brows-
ers; notably IE and everyone else. The fact
that you have to basically write two differ-
ent functions to achieve one goal can bloat
your code and add to its complexity unnec-
essarily.
e-Magazine
16. DMXzone e-Magazine April 2008 Introducing jQuery Part 5 Page 38
Introducing jQuery Part 5
By Dan Wellman
Luckily, jQuery comes to the rescue providing a unified
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
method of negotiating transactions with a server to
4.01//EN” “http://www.w3.org/TR/html4/strict.
send and receive data asynchronously. Like the other dtd”>
components of the library, the AJAX section is both <html lang=“en”>
easy to use and robust enough to support a diverse <head>
range of applications. Throughout the course of this <title>jQuery AJAX Example</title>
article we’ll be looking at how the AJAX methods can <script type=“text/javascript” src=“jquery/
be put to good use. jquery-1.2.1.min.js”></script>
</head>
<body>
You will need to have access to a web server that <button id=“getTime”>Get The Time</button>
has PHP installed and configured, which is a process </body>
outside of the scope of this article (although please see </html>
my article on setting up a full web server environment).
I also hasten to add that the code shown here has
been extensively tested, but only on the Windows
platform.
As you can see from the attribute of the button, we’ll
be querying the server to obtain the current local time.
Getting Started with jQuery AJAX Next add the following <script> block to the <head> of
the page:
The lowest AJAX abstraction provided by the library
is the .ajax() method; this one method wraps up an <script type=“text/javascript”>
entire request, including the sending, receiving and $(function() {
processing of data in one easy to use and powerful $(“#getTime”).click(function() {
method. Like many of the other methods exposed $.ajax({
through the library’s class interfaces, this method url:”getTime.php”,
requires the use of an argument in order to function. success: function(time) {
The argument used with this method is an object literal $(“<div>“).html(“The time here is : “ +
time).appendTo(“body”);
in which each member either configures an aspect }
of the request, such as data, or defines a handler for });
a specific response, such as success. Let’s look at a });
practical example, which will give you a good feel for });
how the method can be used. In your favourite text </script>
editor begin with the following basic page:
e-Magazine
17. DMXzone e-Magazine April 2008 Grunge Text Effect in Photoshop CS3 Page 44
I n this video tutorial Sebastian Sulinski will show you how to
create a grunge text effect using Photoshop CS3.
Short Summary
1. What we are going to create
2. Creating the text
3. Applying texture
4. Creating the Grunge text effect
D an Wellman looked at creating naviga-
tion menus based on traditional web
design methods, but like everything that
you throw at jQuery, the library gives back
improved functionality and lighter code in
half the time, and we’ll see exactly this dur-
ing the course of the tutorial.
e-Magazine
18. DMXzone e-Magazine April 2008 Interview Dave Nitsche Page 45
Interview: Dave Nitsche
Dave Nitsche first picked up
a camera 20 years ago. That
statement is a bit misleading
because his first journey into pho-
tography only lasted 6 months.
Having always been involved
in the arts (guitarist, graphic de-
signer, web developer) he had
an outlet for his thoughts and
emotions. Career changes and
life put him in a place where
he had never been before. The
outlet that was always available
was not present any more. So 18
years since he had sold his Can-
on A1 he decided to try photog-
raphy again and bought his first
digital camera. That was May
15th 2002.
e-Magazine
20. DMXzone e-Magazine April 2008 Interview Dave Nitsche Page 47
Who is Dave Nitsche?
Who is Dave Nitsche? What is the first thing you
think of in the morning?
I’ve always been one of those people that wakes
up on a dime. So my mind races from the second
I wake up. I just focus on the day ahead and
finding a way to smile.
Who am I? I’m just a guy trying to create
happiness in my life and for those around me.
What was your first professional assignment?
I don’t really have assignments perse. I shoot what
I shoot and hopefully people like it. I’ve been
approached by lots of companies (some large,
some small and some huge) to do commercial
work but it’s never really been what I’m about. I
just want to create art. Whether I make money
from it or not isn’t relevant.
e-Magazine
22. DMXzone e-Magazine April 2008 How to Create Reflecting Effects Page 62
I n this tutorial you will learn how to create a very modern and
attractive mirror image effect which can be used with text
and images. The effect will replicate that of an object sitting on
a spotlessly clean reflective surface.
e-Magazine
23. DMXzone e-Magazine April 2008 How to Create Reflecting Effects Page 63
How to Create Reflection Effects
By Thierry Lorey
Introduction To start with, create a new document, with a white
background and type out a line of text with the Text
One of the usual designs around Web 2.0 includes Tool. In our example, we will use the ‘Adobe Fireworks’
having texts or images to appear reflected as if they text and make a reflection from that. You should have
are on a shiny-clean surface. This tutorial has been something looking like this:
created with Fireworks CS3.
In this tutorial you learn how to:
• Type a text,
• Clone an object, Figure 1: The written text
• Apply and modify a vector mask,
Step 2 : Duplicate the text
• Use Fade Image command
The next step is to clone your layer and flip it vertically.
To give you an idea of how things will look like by the This gives you the first step towards constructing the
end of this tutorial, here is the completed image. actual reflection effect. To do these all you need is to
clone the text layer by a right-click on the text then Edit
> Clone. You should have two layers of the same text
now. Select the second text.
Step 1 : Write the text
Now let’s get started! The first step when creating your
mirror image effect is to choose what you want to
reflect. For this tutorial we will show you how to do it Figure 2: cloned text layer
with text with a white background but you may choose
another color.
e-Magazine
25. DMXzone e-Magazine April 2008 About DMXzone Page 67
What do we do
About DMXzone Membership of the community is
free. You can view most content
The History of DMXzone on the site without registering,
but when you become a member
DMXzone was founded in Feb 2001 by George Petrov. you can add your own chapters,
It was then called UDzone after the Macromedia product tutorials, news items, extensions,
UltraDev that preceded Dreamweaver MX. By April 2001 opinion polls and participate in the
we’d already been asked by Macromedia to speak at the forums. To purchase extensions or
Macromedia UCON 2001 conference in New York. Since then, download free extensions, you need
we have 300,000 registered members of all levels and locations, to become a member.
who come together to share knowledge and learn from each
other. We are an independent community and are in no way The DMXzone Team and Manager
connected with Macromedia, the makers of Dreamweaver MX. Team consists of professionals and
volunteers who work hard to bring
In May 2003, we launched our very successful Premium you the extensions that you are
Tutorials track, publishing professionally written tutorials asking for, give you the support
by a team of authors for an affordable price every day, that you need when you have
as we ourselves were tired of shelling out lots of money questions and to bring you the
for computer books full of redundancy and newbie’s latest information pertaining to web
explanation. development.
This premium track runs alongside We like to encourage our visitors
the free content submitted to actively participate, that is why
by members. we organize competitions, run
opinion polls, let you rate chapters,
extensions and tutorials and let you
add your own chapters.
e-Magazine