SlideShare ist ein Scribd-Unternehmen logo
1 von 26
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Ähnlich wie &lt;img src="../i/r_14.png" />

E-magazineNovember_sample
E-magazineNovember_sampleE-magazineNovember_sample
E-magazineNovember_sampletutorialsruby
 
E-magazineNovember_sample
E-magazineNovember_sampleE-magazineNovember_sample
E-magazineNovember_sampletutorialsruby
 
New Technologies In Design Education
New Technologies In Design EducationNew Technologies In Design Education
New Technologies In Design EducationGardner Campbell
 
3D Animation Production Workflow
3D Animation Production Workflow3D Animation Production Workflow
3D Animation Production WorkflowElizabeth Jenkins
 
Discovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeDiscovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeAnimation Kolkata
 
Handout 17317 es17317-sgambelluri-au2016
Handout 17317 es17317-sgambelluri-au2016Handout 17317 es17317-sgambelluri-au2016
Handout 17317 es17317-sgambelluri-au2016CutiePie33
 
3D face creation via 2D images within blender virtual environment
3D face creation via 2D images within blender virtual environment3D face creation via 2D images within blender virtual environment
3D face creation via 2D images within blender virtual environmentnooriasukmaningtyas
 
Cool NUKE Nodes For VFX Compositing
Cool NUKE Nodes For VFX CompositingCool NUKE Nodes For VFX Compositing
Cool NUKE Nodes For VFX CompositingAnimation Kolkata
 
The art of movements that are drawn.
The art of movements that are drawn.The art of movements that are drawn.
The art of movements that are drawn.BBrainpoint
 
What is 3 d modeling unit 66
What is 3 d modeling   unit 66What is 3 d modeling   unit 66
What is 3 d modeling unit 66Richard Marshall
 
CGV Project Report.pdf
CGV Project Report.pdfCGV Project Report.pdf
CGV Project Report.pdfHimaBindhu41
 
3D visual communication
3D visual communication3D visual communication
3D visual communicationEricsson Labs
 
best property dealer in chandigarh
best property dealer in chandigarhbest property dealer in chandigarh
best property dealer in chandigarhmalhotraproperties
 
Web Directions 2014 Title Sequence
Web Directions 2014 Title SequenceWeb Directions 2014 Title Sequence
Web Directions 2014 Title SequenceTim Buesing
 
vfxnew-170705084032 (1) (1).pdf
vfxnew-170705084032 (1) (1).pdfvfxnew-170705084032 (1) (1).pdf
vfxnew-170705084032 (1) (1).pdfHeenaSyed6
 
E-magazineDecember_sample
E-magazineDecember_sampleE-magazineDecember_sample
E-magazineDecember_sampletutorialsruby
 

Ähnlich wie &lt;img src="../i/r_14.png" /> (20)

E-magazineNovember_sample
E-magazineNovember_sampleE-magazineNovember_sample
E-magazineNovember_sample
 
E-magazineNovember_sample
E-magazineNovember_sampleE-magazineNovember_sample
E-magazineNovember_sample
 
Visual effects in india
Visual effects in indiaVisual effects in india
Visual effects in india
 
New Technologies In Design Education
New Technologies In Design EducationNew Technologies In Design Education
New Technologies In Design Education
 
heliodisplay
heliodisplayheliodisplay
heliodisplay
 
3D Animation Production Workflow
3D Animation Production Workflow3D Animation Production Workflow
3D Animation Production Workflow
 
Discovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeDiscovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of Nuke
 
Handout 17317 es17317-sgambelluri-au2016
Handout 17317 es17317-sgambelluri-au2016Handout 17317 es17317-sgambelluri-au2016
Handout 17317 es17317-sgambelluri-au2016
 
3D face creation via 2D images within blender virtual environment
3D face creation via 2D images within blender virtual environment3D face creation via 2D images within blender virtual environment
3D face creation via 2D images within blender virtual environment
 
Cool NUKE Nodes For VFX Compositing
Cool NUKE Nodes For VFX CompositingCool NUKE Nodes For VFX Compositing
Cool NUKE Nodes For VFX Compositing
 
The art of movements that are drawn.
The art of movements that are drawn.The art of movements that are drawn.
The art of movements that are drawn.
 
What is 3 d modeling unit 66
What is 3 d modeling   unit 66What is 3 d modeling   unit 66
What is 3 d modeling unit 66
 
CGV Project Report.pdf
CGV Project Report.pdfCGV Project Report.pdf
CGV Project Report.pdf
 
3D visual communication
3D visual communication3D visual communication
3D visual communication
 
vfx course in kolkata
vfx course in kolkatavfx course in kolkata
vfx course in kolkata
 
best property dealer in chandigarh
best property dealer in chandigarhbest property dealer in chandigarh
best property dealer in chandigarh
 
Web Directions 2014 Title Sequence
Web Directions 2014 Title SequenceWeb Directions 2014 Title Sequence
Web Directions 2014 Title Sequence
 
vfxnew-170705084032 (1) (1).pdf
vfxnew-170705084032 (1) (1).pdfvfxnew-170705084032 (1) (1).pdf
vfxnew-170705084032 (1) (1).pdf
 
6
66
6
 
E-magazineDecember_sample
E-magazineDecember_sampleE-magazineDecember_sample
E-magazineDecember_sample
 

Mehr von tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 

Mehr von tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Kürzlich hochgeladen

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Kürzlich hochgeladen (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

&lt;img src="../i/r_14.png" />

  • 1. DMXzone e-Magazine April 2008 Page 1 e-Magazine
  • 2. 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
  • 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
  • 14. DMXzone e-Magazine April 2008 Advertisement Page 36 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
  • 19. DMXzone e-Magazine April 2008 Interview Dave Nitsche Page 46 Dave Nitsche 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
  • 21. DMXzone e-Magazine April 2008 Advertisement Page 61 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
  • 24. DMXzone e-Magazine April 2008 Advertisement Page 66 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
  • 26. DMXzone e-Magazine April 2007 Next Edition Page 68 e-Magazine