Archive for February, 2012

InDesign Secrets: Using compositional highlighting to detect problems

Published by | Thursday, February 16th, 2012

In this week’s free InDesign Secrets movie, Anne-Marie Concepcion reveals the useful mysteries of compositional highlighting in InDesign. As exotic as compositional highlighting may sound, my guess is you’re quite familiar with the Substituted Fonts indicator that shows pink when your document has missing fonts, and not-so familiar with the four other highlights you can turn on to reveal potential problem areas in your document. As InDesign lists them in the Composition panel, these four lesser-know highlight options are:

Keep Violations—Lets you know where InDesign has had to violate any keep settings you’ve applied to your paragraphs (like “keep the heading with the next two body sentences”).

H&J Violations—Reveals wherever your hypenation or justification tolerances have been breached.

Custom Tracking/Kerning—Shows you where someone has hand-set kerning rather than rewriting text.

Substituted Glyphs—Reveals wherever you have used alternates for standard glyphs.

Each of these highlighting options are represented by a different color wherever they appear in your document. You can find them by opening the Preferences panel (Ctrl-K or ⌘-K), and then choosing the Composition panel where you can turn on the check boxes. Since InDesign automatically chooses what color will appear for each compositional highlight, and there’s no color-key to help you discern what color is designated to each highlight, I’ve taken the liberty of creating the following image to help you. (Note that Keep Violations occurs so rarely, not even an InDesign goddess like Anne-Marie could force one to happen, so I left that one color-free.)

Meanwhile, for members we have an exclusive movie this week from Anne-Marie’s partner in InDesign secrecy, David Blatner. While Anne-Marie is sharing a secret to whip your document into shape, David’s got the goods on managing your workspace with Managing your InDesign panels.

See you back in two weeks with two fresh secrets from Anne-Marie and David!

Interested in more?
• All the InDesign Secrets on
• Courses by David Blatner on
• Courses by Anne-Marie Concepcion on
• All InDesign courses

Suggested courses to watch next:
• InDesign CS5 Essential Training
• InDesign CS5.5 New Features
• InDesign Styles in Depth

13 courses to help you learn HTML5 on

Published by | Wednesday, February 15th, 2012

Recently I’ve been asked by some very influential people why hasn’t published an HTML5 essential training course yet. Isn’t HTML5 an enormously important topic? Isn’t HTML5 at the core of how the web is being transformed and adapted to the new reality of modern web browsers on desktops, cell phones, and tablets? Isn’t HTML5 changing how rich media (audio and video) is delivered on the Internet? And isn’t HTML5 on its way to replacing web browser plugins such as Flash Player and Silverlight that we’ve depended on for many years? (Whether HTML5 will completely replace the plugins on the web, and how long it will take, is a matter of debate—but that’s for another discussion and another day.)

How could have ignored this critical topic? If is such a forward-looking educational company, how could we have missed this tectonic shift in the web development landscape??

No worries; we didn’t miss the boat. Simply put, we decided last year that HTML5 was too large a subject to cover in a single course. HTML5 isn’t a single technology; it’s an umbrella term that’s used by the W3C (the Worldwide Web Consortium, a standards-setting body in Switzerland that’s theoretically in charge of how the web works) to describe a set of specifications that let you manage all sorts of things in a web page or application with relatively simple code. (These specifications include both HTML tags and a set of powerful JavaScript APIs.)

We broke down the subject into a series of courses, each taught by an instructor who was able to specialize in one or more aspects of HTML5, and started publishing the courses in mid-2011. We then continued periodically releasing these smaller, focused courses with a new deep dive into some aspect of HTML5 until the last of the 13-course series was released in January 2012, declaring our first pass at coverage of HTML5 to be officially complete. And so, this seems like a good time to review what we’ve created.

If you’re just getting started with HTML5, you might first watch HTML5 First Look taught by senior staff author James Williamson. In this course, James offers a birds-eye view of the purpose and usage of HTML5, and includes invaluable references to sites and other resources you can use to keep up with HTML5’s ongoing evolution.

For your first hands-on course, I suggest HTML5: Structure, Syntax and Semantics, also taught by James Williamson. Here, you’ll see how basic HTML code looks, and how to set the stage for all the fun stuff you’ll learn to do later.

From there you can sample a broad array of juicy HTML5 dishes. Each of the remaining courses focuses on a single aspect of HTML5, and you can watch them in any order. To animate your pages, watch HTML5: Graphics and Animation with Canvas taught by Joe Marini. To add drag and drop interactions, look at HTML5: Drag and Drop in Depth taught by Bill Weinman. And for rich media, check out HTML5: Video and Audio in Depth taught by Steve Heffernan.

Want to work with advanced data entry forms (HTML5: Web Forms in Depth) or in-line document editing (HTML5: Document Editing in Depth)? We’ve got that. How about network communications (HTML5: Messaging and Communications in Depth), multi-threading (HTML5: Background Processes with Web Workers), working with the user’s physical location (HTML5: Geolocation in Depth), managing browser history (HTML5: Managing Browser History), or working with local databases (HTML5: Local Storage and Offline Applications in Depth) and text files (HTML5: File API in Depth). Yes, we’ve got all that too.

The 13 courses in this series cover nearly all aspects of the HTML5 specifications. By designing the courses in this modular fashion, we’ve hopefully made it easier for you to find and learn the specific skills you need to satisfy the needs of your web project, your job, or your curiosity. Taken together, they’re the equivalent of a single master-class in HTML5 development—essentially, “HTML5 Essential Training” from

And as we promised when the series was launched, we’re keeping an eye on the evolution of both the HTML5 specs and and how the web browsers implement them. When we see significant changes, we’ll update these courses with the latest information.

So no, we didn’t fall asleep at the switch. HTML5 is a fast-moving set of technologies, and we’ll keep on doing what’s needed to help you incorporate the latest technologies into your web sites and applications.

What HTML5 courses will you add to your queue first?

Interested in more?
• All developer courses on
• All courses from David Gassner on

Suggested courses to watch next:
HTML5 First Look
Dreamweaver CS5: Getting Started with HTML5
iOS 4 Web Applications with HTML5 and CSS3
HTML5: Local Storage and Offline Applications in Depth
HTML5: Graphics and Animation with Canvas welcomes a private interview with journalist Kathryn Schulz

Published by | Tuesday, February 14th, 2012

This year is the proud season sponsor of UCSB’s Arts & Lectures series, and we were privileged to have one of their lecturers, Kathryn Schulz, participate in a personal interview at our facility before her public appearance through the UCSB program.

Ms. Schulz is an award-winning journalist whose freelance magazine work has appeared in such publications as The New York Times Magazine, Rolling Stone, and The Nation. As an international journalist, Schulz has explored Japan, the Middle East, and both Central and South America, and was awarded a Pew Fellowship in International Journalism in 2004.

During her interview with co-founder Lynda Weinman, Schulz discusses why humans are so obsessed with being right, the relationship between wrongness and the creative process, and what her goals were when she sat down to write her book, Being Wrong—Adventures in the Margin of Error.

For more information about Kathryn Schulz’s philosophy, or to purchase her book, please visit


Suggested courses to watch next:
Ed Emberley, Children’s Book Illustrator
Richard Koci Hernandez, Multimedia Journalist
Mark Mothersbaugh, Music Composer
Big Spaceship, Digital Creative Agency
Troika’s ABC Brand Campaign: Start to Finish

Deke’s Techniques: Drawing with the Reshape tool in Illustrator

Published by | Tuesday, February 14th, 2012

In this week’s free Deke’s Techniques video, Deke uses the Reshape tool—an older, more obscure Illustrator feature—in an unexpected way to create a fresh, swirly typographic curve for your last-minute Valentine (or whatever other occasion you may have to make sweet swirls). You start with the Pen tool to rough in your letter S. If you’re not a wiz with the Pen tool, don’t be scared—just make a crazy polygonal not-quite-letter-Z to create the anchor points. Then using the Reshape tool, drag out each segment until you get the curves you seek. (Members of can download the accompanying exercise file and use Deke’s S as a tracing template.)

There’s no need to figure out your control handle curves with the Pen tool or try to join spirals created by the aptly named Spiral tool, either. The Reshape tool will supply the curves and the Object > Path > Simplify command will reduce the number of anchor points to smooth out the lumps (since your valentine won’t appreciate lumps). Add a white stroke to your path, and if you’re using Illustrator CS5, use the Width tool to add some weight to your sweetness. The result will be this Valentine-worthy letter S:

Letter created with the Illustrator Reshape tool

For members of the Online Training Library®, Deke takes this technique to the next step to show you how to create a hand-drawn letter effect that will help you add the “weet” to your swirling “Sweet” by manipulating existing type definitions.

Interested in more?
• the entire collection of Deke’s Techniques on
• All Illustrator courses on
• All courses by Deke McClelland on

Suggested courses to watch next:
• Up and Running with Illustrator
• Illustrator CS5 One-on-One: Advanced
• Illustrator CS5 Essential Training

Tell us about your career—what motivates you?

Published by | Sunday, February 12th, 2012

I’m particularly excited to help you take the next step in your journey to becoming invaluable to your industry in 2012. Once you’ve determined your passion, skills, and most valuable activities, the logical next step is to apply this knowledge to develop your business savvy.

Since the release of our first course, Invaluable: Unlocking Your Abilities, I’ve been inspired by the feedback we’ve received. It makes my day when I hear about ways that we’ve helped you succeed!

Our courses are a massive team effort and we’re constantly refining the message in order to deliver what we believe is the best possible learning experience.

In order to make our courses the best they can be, and to serve you better as individuals, I’d like to hear from you. I’d appreciate anything you have to offer. To give you some ideas, here are some questions I’d love to get your thoughts on as you go about unlocking your abilities and developing your savvy:

  1. What are the biggest challenges in your career right now?
  2. What do you love about your current job? What do you hate about it?
  3. What motivates you at work every day?
  4. How entrepreneurial are you? Are you considering breaking out on your own?
  5. What keeps you awake at night about your work?
  6. What would you like to change about your professional future?

I’ll be monitoring this blog post and replying directly to your comments, so please, be as specific as you’re willing to be. I look forward to hearing from you!

Interested in more?
• The full Invaluable: Developing Your Business Savvy course
All business courses on

Suggested courses to watch next:
Time Management Fundamentals
Creating an Effective Resume
Project Management Fundamentals
Invaluable: Unlocking Your Abilities

2012 Santa Barbara International Film Festival Directors’ and Producers’ Panels

Published by | Saturday, February 11th, 2012

As the presenting sponsor of the 27th annual Santa Barbara International Film Festival, is pleased to take you inside the festival’s entertainment industry panels featuring some of Hollywood’s top directors and producers.

Directors’ Panel
Moderated by Peter Bart (vice president and editorial director of Variety) the Directors on Directing panel features a who’s who of Oscar®-nominated directors speaking candidly about the importance of great casting, a strong story, and the ability to listen to their audience through pre-release testing. Gore Verbinski (Rango) explains how he arranged for the ensemble cast of his animated film to record their voiceovers together, in order to take full advantage of their comedic interactions. Michel Hazanavicius (The Artist) talks about the challenges of getting a black-and-white silent film made in the 21st century. Terry George (The Shore) describes how he found humor in the otherwise serious conflict in Northern Ireland. Chris Miller (Puss in Boots) talks about leaving room in his script for improvisation. Jennifer Yuh Nelson (Kung Fu Panda 2) shares her darker moments during production, assuring a nervous studio that everything would work out. Paul Feig (Bridesmaids) talks about rewriting parts of the script to take advantage of actress Melissa McCarthy’s comedic genius.

Directors on Directing panel discussing the importance of the script.

Directors on Directing panel discussing Silent Movies.

Directors on Directing panel discussing The Man Speech.

Producers’ Panel
Moderated by Patrick Goldstein (Los Angeles Times columnist), Movers and Shakers was a panel of top-of-their-career producers with Oscar®-nominated films ranging from big-budget effects movies to smaller, ensemble-cast dramas. Graham King (Hugo), describes how he worked with Martin Scorsese to shoot their first 3D film together—and their first with kids and animals. Michael De Luca (Moneyball) explains how he developed a working relationship with Major League Baseball, which had final cut on his film. Bill Pohlad (The Tree of Life) talks about the 10 years of obstacles he faced on the way to getting his film greenlit. Jim Burke (The Descendants) talks about shooting on location in expensive Hawaii. Letty Aronson (Midnight in Paris) discusses the unique working relationship she has with director Woody Allen—who’s also her brother.

Movers & Shakers panel discussing how a great film doesn’t have to cost much.

Movers & Shakers panel discussing how to keep the studio happy.

Movers & Shakers panel: Letty Aronson (Midnight in Paris) discussing the unique working relationship she had has with director Woody Allen, who is also her brother.


Interested in more?
• All 2012 Santa Barbara Internationl Film Festival Directors’Panel—Directors on Directing movies on
• All 2012 Santa Barbara Internationl Film Festival Producers’ Panel—Movers and Shakers movies on
• All documentaries

Suggested courses to watch next:
2012 SBIFF Screenwriter’s Panel – It Starts with the Script
2012 SBIFF Women’s Panel – Women in the Biz
2011 SBIFF Director’s Panel: Directors On Directing
2011 SBIFF Producer’s Panel: Movers and Shakers

Interaction design and user experience fundamentals

Published by | Saturday, February 11th, 2012

Interaction design (IXD) and user experience (UX) design are increasingly recognized as essential skills for the web, mobile devices, and other digital interfaces and devices. But IXD and UX are much more than creating rollovers, knowing where to put buttons, and using attractive graphics and transitions. We need to understand what people need or want to do, what motivates them, how they interact with a device or interface, and we need to understand the technologies that are providing access to a nearly unlimited amount of information.

In this new fundamentals series David M. Hogue, Ph.D., an applied psychologist and UX designer, introduces the foundations of interaction design from a psychological perspective. Dave looks at the origins of interaction design and our basic need to record, understand, modify, communicate, share, and play with information. He also investigates key concepts in cognition, perception, learning, memory, and motivation to show how understanding the needs and behaviors of the people who will use the interface can inform and guide our design decisions.

The series is centered around five essential principles of interaction design: consistency, perceivability, predictability, learnability, and feedback. Dave uses the five principals to explore user experience and interaction design from a psychological perspective and to help explain how to craft more successful, usable, and enjoyable interfaces. His discussion covers a wide range of topics including how people develop a sense of place, cognitive friction, the Gestalt Principles, mental models, and perceived affordances.

The Interaction Design Fundamentals course is targeted at designers and developers who want to craft better, more engaging, experiences for their visitors and customers. Whether you are new to the field or are already creating interfaces for the web and devices, looking at interaction design from the perspective of human behavior, cognition, and motivation can help improve your design decisions overall.

Have other topics and techniques you wish Dave would teach, discuss, or demonstrate in this series? Leave us a comment on this post.


Interested in more?
• The entire Interaction Design Fundamentals course on
• All developer courses on
• All web + interactive courses on

Suggested courses to watch next:
Web Site Planning and Wireframing: Hands-On Training
Flash User Experience Best Practices
Web Site Strategy and Planning
Web Form Design Best Practices

Create a jQuery photo rotator in 15 lines of code

Published by | Friday, February 10th, 2012

I love the jQuery tagline—write less, do more. It’s a perfect summary of what the language is about. jQuery is a JavaScript library that makes it easier to add interactivity on your projects. The nice thing about jQuery is that it takes care of dealing with browser inconsistencies and gives you great ways to access the DOM (Document Object Model). You can do amazing things in just a few lines of code.

The jQuery language is also easily extendable through the use of plugins. On this week’s episode of View Source, I will show you how to use jQuery Cycle, a jQuery plugin, to create an easy to code photo rotator for your site. The code is really easy to work with.

First, we’ll need some code with images. For example, create a list of images like this:

<div class="rotator"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> </div>

This is just a series of image tags, wrapped around a div with rotator designated as the class. Designating the class allows us to target our photos with the plugin.

You’ll need to call two libraries. The jQuery library as well as the jQuery Cycle plugin. You can do that with two lines of code:

<script src=""></script> <script src=""></script>

You should put this code either in the <head> section of your page or before your closing <body> tag. If you’re using WordPress, you can just add the second line into the header.php file of your template, because WordPress includes jQuery as a default.

Now for the jQuery part:

<script> $('.rotator').cycle({ fx: 'fade', timeout: 2000 }); </script>


In this part we use the <script> tag to start coding with JavaScript, then, we use jQuery to target our rotator class. With jQuery, you can target a class much in the same way you target a class with CSS, so we’re using a period in front of our class name to get to the rotator class. You then call on the cycle function, which takes just a few variables. In this case we’re calling on the type of effect we want and then setting how much time we prefer between fades.

Your finished product should look like this:



Car Photo 1
Car Photo 2
Car Photo 3

Here’s all of the code:

<script src=""></script> <script src=""></script> <script> $('.rotator').cycle({ fx: 'fade', timeout: 2000 }); </script> <div class="rotator"> <img src="" alt="Car Photo 1" /> <img src="" alt="Car Photo 2" /> <img src="" alt="Car Photo 3" /> </div> 

So there you have it, a photo rotator in less than 15 lines of code including the code for the images. Not bad for a few minutes of work.

If you want to find out how to add more options or how to work on more complicated layouts, check out this week’s free View Source tutorial, Creating a Photo Rotator with jQuery Cycle, in the Online Training Library®. If you are a subscriber, also check out my second View Source tutorial, Using a CDN to speed up your sites, to find out how using CDNs (Content Delivery Networks) in your code can help make your pages faster.


Interested in more?
• The full View Source series
• All developer courses on
• All web + interactive courses on
• All courses from Ray Villalobos on

Suggested courses to watch next:
• Create an Interactive Video Gallery with jQuery
 Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver