• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DMXzone e-Magazine April 2008
 

DMXzone e-Magazine April 2008

on

  • 712 views

 

Statistics

Views

Total Views
712
Views on SlideShare
711
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DMXzone e-Magazine April 2008 DMXzone e-Magazine April 2008 Presentation Transcript

    • DMXzone e-Magazine April 2008 Page 1 e-Magazine
    • DMXzone e-Magazine April 2008 Colofon & Introduction Page 2 jQuery & Eyecandy CEO George Petrov This month's edition is all about jQuery, Fireworks and Photography. magazine@dmxzone.com Richard will introduce you to jQuery UI Dialogs and themes. He'll Chief Editor show you how they can be used to make a consistent and Frank Beverdam attractive web application. frank@dmxzone.com After he will show you how to make a Drag-and-Drop web shop Technical Editor application with jQuery UI with just a few lines of code. Patrick Woldberg patrick@dmxzone.com Publisher 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. Illustrator DMXzone is a division of Elize Kerseboom Dynamic Zones International BV Then he shows you how to use the AJAX functionality provided by the library to enhance the interactivity of your webpages even further. DTP Mail address: Elize Kerseboom PO Box 545 Sebastian Sulinski will show you how to create a grunge text effect using Photoshop CS3. 7500 AM Enschede Advertising The Netherlands We interviewed one of the most promising modern photographers Dave Nitsche. A man George Petrov that puts photography into a new perspective. He also gives some very practical tips. Visiting address: advertising@dmxzone.com Hengelosestraat 705 Last but not least, Thierry shows you how to create a very modern and attractive mirror 7521 PA Enschede Subscriptions image effect also known as the reflection effect. It can be used for text and images. The The Netherlands Yearly subscription: € 24.99 effect will replicate that of an object sitting on a spotlessly clean reflective surface. 2 year subscription: € 39.99 Tel: +31 - 53 - 483 63 14 subscriptions@dmxzone.com Fax: +31 - 53 - 433 74 15 Frank Beverdam info@dynamiczones.com www.dynamiczones.com 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. e-Magazine
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • DMXzone e-Magazine April 2008 Advertisement Page 36 e-Magazine
    • 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
    • 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
    • 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
    • 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
    • DMXzone e-Magazine April 2008 Interview Dave Nitsche Page 46 Dave Nitsche e-Magazine
    • 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
    • DMXzone e-Magazine April 2008 Advertisement Page 61 e-Magazine
    • 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
    • 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
    • DMXzone e-Magazine April 2008 Advertisement Page 66 e-Magazine
    • 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
    • DMXzone e-Magazine April 2007 Next Edition Page 68 e-Magazine