dmxzone e-magazine april 2008
DESCRIPTION
TRANSCRIPT
e-Magazine
Page 2DMXzone e-Magazine April 2008 Colofon & Introduction
PublisherDMXzone is a division ofDynamic Zones International BV
Mail address:PO Box 5457500 AM EnschedeThe Netherlands
Visiting address:Hengelosestraat 7057521 PA EnschedeThe Netherlands
Tel: +31 - 53 - 483 63 14Fax: +31 - 53 - 433 74 15
All rights reserved.
Copyright © 2008
Dynamic Zones International BV
Unless otherwise noted, all of the writing in DMXzone Magazine is the copyrighted property of Dynamic Zones International BV. This copyrighted material includes all writing by staff, and some of the artwork, drawings and logos. You may print out any articles and tutorials for your personal use only. Materials may not be reproduced on another web site, book, or publication without express written permission. Any reproduction or editing without the explicit written permission of DMXzone Magazine is expressively prohibited. Certain names, logos, phrases, and artwork on these pages may constitute trademarks of Dynamic Zones International BV or its sponsors. Reproduction in whole or in part is strictly prohibited without written permission of Dynamic Zones International BV. Dynamic Zones International BV also cannot guarantee that all content and material appearing in the DMXzone Magazine is not infringing on any registered or non-registered copyrights. DMXzone Magazine is published monthly (12 times a year) by Dynamic Zones International BV.
jQuery & EyecandyThis month's edition is all about jQuery, Fireworks and Photography.
Richard will introduce you to jQuery UI Dialogs and themes. He'll show you how they can be used to make a consistent and attractive web application. After he will show you how to make a Drag-and-Drop web shop application with jQuery UI with just a few lines of code. Dan Wellman takes you into the world of jQuery Effects section; this part of the library can really add visual impact and appeal to your pages. Then he shows you how to use the AJAX functionality provided by the library to enhance the interactivity of your webpages even further. Sebastian Sulinski will show you how to create a grunge text effect using Photoshop CS3.
We interviewed one of the most promising modern photographers Dave Nitsche. A man that puts photography into a new perspective. He also gives some very practical tips.
Last but not least, Thierry shows you how to create a very modern and attractive mirror image effect also known as the reflection effect. It can be used for text and images. The effect will replicate that of an object sitting on a spotlessly clean reflective surface.
Frank Beverdam
CEOGeorge [email protected]
Chief EditorFrank [email protected]
Technical EditorPatrick [email protected]
IllustratorElize Kerseboom
DTPElize Kerseboom
AdvertisingGeorge [email protected]
SubscriptionsYearly subscription: € 24.992 year subscription: € [email protected]
Page 3DMXzone e-Magazine April 2008 List of Contents
e-Magazine
IntroducingjQuery Part 4In the last part of this turorial we looked at the CSS manipulating tools available to us via the library. In this part we’re going to look at the Effects section this part of the library can really add visual impact and appeal to your pages.
19
44
5
45
4 11
37
62
28
45
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
Page 4DMXzone e-Magazine April 2008 Agenda
e-Magazine
Page 5DMXzone e-Magazine April 2008 News
e-Magazine
NEWS
WebKit and Opera achieved Acid 3 100%
Safari and Opera announced that they have passed the notorious Acid 3 test. Op-
era claimed earlier to be the first to have passed the test, but they used an internal build. Opera announced that they'll release a public version of the browser that passed the test within a week.
The test is developed on the correct interpretation and representation of web standarts. Firefox and Internet Explorer have yet to pass the test.
Read it at the external site...
YouTube stats revealedYouTube introduced YouTube Insights, the newest addition to its video service. It allows
content publishers, partners, and advertisers to see detailed statistical data for their videos. Metrics that the service provides include geograph-ic viewing and relative popularity.
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 they do become popular. Advan-tages vary for the different groups that will be using Insights. Creators will benefit from looking at viewing trends, partners can use the data to better understand their audience and become more profitable, and advertisers can tweak their market-ing strategy based on past trends.
Read it at the external site...
WMA: Best of Technology Website Trends
The Web Marketing Associa-tion, host of leading website awards competition WebA-
wards, released the Internet Stand-ards Assessment Report (ISAR) to help the technology industry create more effective websites.
"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.
The WebAwards competition judg-es technology websites on seven criteria that combined help create award-winning websites:
Page 11DMXzone e-Magazine April 2008 Dialogs and Theming with jQuery UI
e-Magazine
Richard 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.
Page 12DMXzone e-Magazine April 2008 Dialogs and Theming with jQuery UI
e-Magazine
Dialogs and Theming with jQuery UI By Richard D. Worth
Dialogs and Theming with jQuery UI In this article I`ll introduce jQuery UI Dialogs. I’ll also introduce one of the premiere features of jQuery UI: themes, and will show how they can be used to make a consistent and attractive web application. I’ll assume a basic familiarity with jQuery (the base of jQuery UI). You should be comfortable with jQuery syntax and basic selectors.
Introducing jQuery UI jQuery UI is a library of jQuery User Interface plugins 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 your site. These components and behaviours are ones we’re all familiar with in desktop applications, but are not (yet) the norm on the web. Some examples: drag-and-drop, selecting, sorting, grids, treeviews, panels, dialogs.
Note: jQuery UI makes use of the latest (as of this writing) major version of jQuery: 1.2. Also, most UI plugins require the dimensions plugin.
jQuery UI Dialog The jQuery UI Dialog plugin makes it very easy to create dialog boxes in your web page/application. These can be dragged, resized, opened, and closed. They can be created from dynamic content, and existing element, an iframe, or a container with Ajax-
sourced content. Some future (planned) features for Dialog include a modal option (so that the rest of the page/container is disabled while the dialog is open), minimizing, and maximizing.
A dialog is a key component of an RIA (Rich Internet Application) as it provides much more flexibility than a popup window. It doesn’t disappear when the main application window is activated. It doesn’t appear on the taskbar. Pop-up windows and built-in browser prompts have their place, but web page dialogs give us a lot of increased flexibility, especially when it comes to look and feel.
Getting Started In order to start playing with jQuery UI Dialogs, you’ll need to download the latest version of jQuery UI. As of this writing, the last stable release is 1.0. I’m going to demonstrate a couple of features fixed/added after the 1.0 release, so I recommend grabbing a more recent copy of at lease ui.dialog.js:
Download all of 1. jQuery UI 1.0 (Zip file, 101k)Grab just 2. ui.dialog.js from jQuery UI 1.0.1aCopy ui.dialog.js from 1.0.1a to your UI 1.0 folder, 3. replacing the older version
Another option is just to grab each necessary file from jQuery UI 1.0.1a. Here’s the one’s you’ll need for dialog:
jquery.dimensions.j• sui.mouse.j• sui.draggable.j• sui.resizable.j• sui.dialog.j• s
The advantage to this approach is you’ll also pick up fixes made to these other components. You’ll also
Page 18DMXzone e-Magazine April 2008 Advertisement
e-Magazine
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 language. It’s also a useful reference for developers.
Written by Tom Dell’aringa, this serieswill detail and teach you how to programwith Javascript.
Get It Now
Page 19DMXzone e-Magazine April 2008 Drag-and-Drop Shoppingcart with jQuery UI
e-Magazine
In 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.
Page 20DMXzone e-Magazine April 2008 Drag-and-Drop Shoppingcart with jQuery UI
e-Magazine
Drag-and-Drop Shopping Cart with jQuery UI By Richard D. Worth
Introducing jQuery UI
jQuery UI is a library of jQuery User Interface plugins 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 are not (yet) the norm on the web. Some examples: drag-and-drop, selecting, sorting, grids, treeviews, panels, dialogs.
Note: jQuery UI makes use of the latest (as of this writing) major version of jQuery: 1.2. Also, most UI plugins require the dimensions plugin.
jQuery UI Drag-and-Drop
Drag-and-Drop in jQuery UI is achieved by two separate plugins: Draggables, and Droppables. Draggables are things you can drag around the page; droppables are things that draggables can be 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
method on it. Like this:
$(“#dragMe”).draggable();
Since I’ve used the ID selector ( #{id} ), only one item will be selected and then made draggable. But like any good jQuery plugin, draggable works on any number of results at once. For example, the following code will select all list items on the page and make them draggable:
$(“li”).draggable();
The draggable method has a number of initialization options, any of which can be passed in an option hash object (collection of name-value pairs) as an argument to the draggable call. Here’s an example:
Page 27DMXzone e-Magazine April 2008 Advertisement
e-Magazine
This e-book will teach youhow to use DHTML and AJAX to create amazing new applications and interactive features for your website.
AJAX enables you to write interactive applications whilereducing the amount of data
interchanged between theweb browser and web server.DHTML allows you to create
amazing effects and allows youto enhance the interactivity of
your webpage without usingany Plug-in
Written by our programming guru Tom Dell’Aringa; This book is for anyone with an interest in developing their DHTMLand AJAX skills. The writer uses very clear examples that will enableyou to master the programming languages. It’s also a useful referencefor developers
Get It Now
Page 28DMXzone e-Magazine April 2008 Introducing jQuery Part 4
e-Magazine
Welcome 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.
Page 29DMXzone e-Magazine April 2008 Introducing jQuery Part 4
e-Magazine
Introducing jQuery Part 4 By Dan Wellman
There are four categories of effects within the Effects section of the library; the first category deals with the simple showing and hiding of elements, the next two sections are devoted to sliding and fading transitions, while the final category enables you to create custom animations yourself, and also manages the effects queue.
Throughout this tutorial we’ll be looking at what can be achieved using each of the effect methods exposed by this section of the library. The code we’ll be playing with has been tested extensively in the most popular browsers available, but only on the Windows platform.
Showing & Hiding Elements
The basic effects of the first category are extremely easy to use. Like other methods defined by the library, the .show() and .hide() methods can be used with or without arguments. In their most basic invocation they simply show or hide the specified element. Let’s look at these methods in action. In your text editor, begin with the following basic page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html lang=“en”> <head> <title>jQuery Effect Example</title> <script type=“text/javascript” src=“jquery/jquery-1.2.1.min.js”></script> </head> <body> <button id=“show”>Show</button><button id=“hide”>Hide</button> <div id=“div1”>I am div 1!</div> </body></html>
Next, add the following <style> tag to the <head> of the page:
<style type=“text/css”> div { border:2px solid black; margin-top:10px; background-color:lightblue; color:white; padding:40px 10px 0px 20px; width:80px; 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:
Page 37DMXzone e-Magazine April 2008 Introducing jQuery Part 5
e-Magazine
Thanks 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.
Page 38DMXzone e-Magazine April 2008 Introducing jQuery Part 5
e-Magazine
Introducing jQuery Part 5 By Dan Wellman
Luckily, jQuery comes to the rescue providing a unified method of negotiating transactions with a server to send and receive data asynchronously. Like the other components of the library, the AJAX section is both easy to use and robust enough to support a diverse range of applications. Throughout the course of this article we’ll be looking at how the AJAX methods can be put to good use.
You will need to have access to a web server that has PHP installed and configured, which is a process outside of the scope of this article (although please see 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.
Getting Started with jQuery AJAX
The lowest AJAX abstraction provided by the library is the .ajax() method; this one method wraps up an entire request, including the sending, receiving and processing of data in one easy to use and powerful method. Like many of the other methods exposed through the library’s class interfaces, this method requires the use of an argument in order to function. The argument used with this method is an object literal 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 editor begin with the following basic page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html lang=“en”> <head> <title>jQuery AJAX Example</title> <script type=“text/javascript” src=“jquery/jquery-1.2.1.min.js”></script> </head> <body> <button id=“getTime”>Get The Time</button> </body></html>
As you can see from the attribute of the button, we’ll be querying the server to obtain the current local time. Next add the following <script> block to the <head> of the page:
<script type=“text/javascript”> $(function() { $(“#getTime”).click(function() { $.ajax({ url:”getTime.php”, success: function(time) { $(“<div>“).html(“The time here is : “ + time).appendTo(“body”); } }); }); });</script>
Page 44DMXzone e-Magazine April 2008 Grunge Text Effect in Photoshop CS3
e-Magazine
Dan 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.
In 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
Page 45DMXzone e-Magazine April 2008 Interview Dave Nitsche
e-Magazine
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.
Page 46DMXzone e-Magazine April 2008 Interview Dave Nitsche
e-Magazine
Dave Nitsche
Page 47DMXzone e-Magazine April 2008 Interview Dave Nitsche
e-Magazine
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.
Page 61DMXzone e-Magazine April 2008 Advertisement
e-Magazine
Page 62DMXzone e-Magazine April 2008 How to Create Reflecting Effects
e-Magazine
In 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.
Page 63DMXzone e-Magazine April 2008 How to Create Reflecting Effects
e-Magazine
How to Create Reflection Effects By Thierry Lorey
Introduction
One of the usual designs around Web 2.0 includes having texts or images to appear reflected as if they are on a shiny-clean surface. This tutorial has been created with Fireworks CS3.
In this tutorial you learn how to:Type a text,•
Clone an object,•
Apply and modify a vector mask,•
Use Fade Image command•
To give you an idea of how things will look like by the end of this tutorial, here is the completed image.
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 with text with a white background but you may choose another color.
To start with, create a new document, with a white background and type out a line of text with the Text Tool. In our example, we will use the ‘Adobe Fireworks’ text and make a reflection from that. You should have something looking like this:
Figure 1: The written text
Step 2 : Duplicate the text
The next step is to clone your layer and flip it vertically. This gives you the first step towards constructing the 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.
Figure 2: cloned text layer
Page 66DMXzone e-Magazine April 2008 Advertisement
e-Magazine
Page 67DMXzone e-Magazine April 2008 About DMXzone
e-Magazine
What do we do
Membership of the community is free. You can view most content on the site without registering, but when you become a member you can add your own chapters, tutorials, news items, extensions, opinion polls and participate in the forums. To purchase extensions or download free extensions, you need to become a member.
The DMXzone Team and Manager Team consists of professionals and volunteers who work hard to bring you the extensions that you are asking for, give you the support that you need when you have questions and to bring you the latest information pertaining to web development.
We like to encourage our visitors to actively participate, that is why we organize competitions, run opinion polls, let you rate chapters, extensions and tutorials and let you add your own chapters.
About DMXzone
The History of DMXzone
DMXzone was founded in Feb 2001 by George Petrov. It was then called UDzone after the Macromedia product UltraDev that preceded Dreamweaver MX. By April 2001 we’d already been asked by Macromedia to speak at the
Macromedia UCON 2001 conference in New York. Since then, we have 300,000 registered members of all levels and locations,
who come together to share knowledge and learn from each other. We are an independent community and are in no way
connected with Macromedia, the makers of Dreamweaver MX.
In May 2003, we launched our very successful Premium Tutorials track, publishing professionally written tutorials
by a team of authors for an affordable price every day, as we ourselves were tired of shelling out lots of money
for computer books full of redundancy and newbie’s explanation.
This premium track runs alongside the free content submitted
by members.
