Category Archives: Web Design

Adobe Releases Dreamweaver, Edge Updates for Web Developers

Adobe today announced some new features for Dreamweaver CS6, Edge Animate and Edge Code preview, which are available today for Creative Cloud subscribers. Several of the new features are integrations of technology and services that we’ve seen before, such as web fonts via Typekit, the type service Adobe bought late in 2011.

The other major news is the first public preview of Adobe Edge Reflow, a tool for building responsive website layouts. “Responsive” layouts flex and change depending on what device you are on, ensuring a good user experience across personal computers, mobile devices and tablets.

I’ve seen the product before today in demos and it is geared toward web designers more than developers—the user interface is polished and designed to build the code. There is no expansive code view, although you can read the generated CSS in some places. That code can then be exported and used in programs like Dreamweaver or Edge Code.

The release is a public preview and Adobe welcomes feedback at https://github.com/edge-reflow/issues.

The update to Adobe Edge Code includes a Live Development preview which pushes changes to a web browser immediately for testing. I like this new feature quite a bit. There’s also now a “Quick Edit” option to edit code in context rather than moving to the original file. Code hinting for HTML and CSS, a longtime feature in Dreamweaver and other mature code editors, is now in Edge Code.

Adobe Edge Animate’s new features include support for some CSS3 technology including gradients (radial and linear) and CSS filters. The addition of CSS filters is particularly interesting because they promise amazing control over HTML elements, including the ability to apply drop shadow, brightness/contrast changes, blurring, color saturation and other functions you normally associate with Photoshop. The spec for CSS filters was created by Adobe, so it makes sense they would pursue this. Unfortunately, CSS filters are supported only by Webkit browsers at this time, excluding Internet Explorer and Gecko browsers such as Firefox—but I bet they will build in support soon.

The other major enhancement added to Edge Animate is a user interface for previewing web fonts from Adobe’s Edge Web Fonts service. This free service is powered by Typekit. This is a nice improvement for web designers but most web developers have no trouble integrating Typekit fonts by adding the code snippets and setting up kits on the Typekit website. This kind of change, like several others in today’s announcements, serve creative professionals more than web developers.

The Edge Web Fonts interface is also new in an update to Dreamweaver CS6 going live today. The Dreamweaver update does have a few new features for web developers, including the option to apply fluid grid layouts to elements by class as well as ID attributes. The interface for working with fluid grid layouts has also been improved. These are the kinds of things that can really make a developer’s life easier.

There aren’t many new updates today, but the Creative Cloud paradigm drives more updates than we’re used to but with fewer features. Most new features I’ve seen today are improvements and they fit with Adobe’s goal of providing tools for the latest web technology (web fonts, responsive web design) for creative professionals. Web developers and programmers will probably be less excited by today’s announcements, but there’s some goodies for them too.

How Adobe FormsCentral Saved My Project

Adobe FormsCentral, one of their growing number of apps at Acrobat.com, has been on my review list for some time but didn’t have a great angle to write about until recently. Adobe FormsCentral literally saved a recent project of mine, and I was surprised how its strengths dovetailed with the technical issues I was facing.

The project objective was straightforward:

  • Build an online registration form
  • Include payment integration with PayPal
  • Send email notification to the user and the client on submission
  • Store registration data or send it via email to the client

The client’s website is constructed with Ning, which made its name as a social community builder but now is a blend of that and a typical content management system. Unfortunately, Ning’s backend is fairly difficult to work with unless you are doing basic CSS or HTML changes. The Perl script that we used last year to submit the form data was not allowed by Ning, effectively scuttling our existing solution. I was worried that Ning would force the form to be hosted elsewhere until I thought about FormsCentral, which has a few characteristics that made it ideal for this job:

  • A robust set of form elements covered all the inputs I needed.
  • The ability to embed my form on any webpage with an iframe let me put this form on a Ning page with no problem.
  • The FormsCentral service handles all the notifications and submission data storage, so I didn’t have to write code to handle it myself.
  • Multiple user accounts through FormsCentral meant that my client could run reports and check registrant data as easily as I could.

FormsCentral comes loaded with 50 templates for various industries, but I only needed five text fields so a blank template was adequate. In the Design tab, I was able to make fields required, limit the total characters, include help popups and restrict input to certain types like text, number or email. These are all typically included with forms services like FormsCentral. The one design feature that is completely absent is the ability to dictate design with CSS, which I’d normally use to design a web form. I understand Adobe’s focus on non-programmers, but CSS could really make it easier to apply design elements throughout forms.

The Options tab pretty much covered the rest of my project requirements. I created a Submission Receipt that is sent to all users after they complete the form. I also set up a notification to be sent to the client and myself after every submission, though I was a bit disappointed my client had to create an Adobe ID and log into FormsCentral in order to be added to the notifications list. I also noted that I couldn’t create my own HTML email template to be used for notifications or receipts.

Payment processing is also set up in FormsCentral’s Options tab. Configuring PayPal payments with this form was the most difficult step to master. Registering the PayPal account with the form is easy enough but connecting the form fields to the purchase functionality can be confusing. In the Payment Processing settings, I had to specify the purchase field, quantity field, price and description. The user selected their quantity in a particular field on the form, so that was used for the quantity field. (I also could have set it for exactly one item, which is helpful in some situations.) The purchase field is what confused me because, in this case, the form’s Submit button is also considered a valid purchase field. It was what I needed for this project.

FormsCentral forms can be distributed up to three ways:

  • An HTML page hosted at FormsCentral. An example is https://adobeformscentral.com/?f=zGP2-N2bVVS-pV5I4D7hMQ.
  • A PDF form with interactive form fields. This can be submitted by the user when offline, and the data is stored locally until an Internet connection can be made.
  • Embedded via iframe into an HTML page. The embed code looks like this:


script type=”text/javascript” src=”https://formscentral.acrobat.com/Clients/Current/FormsCentral/htmlClient/scripts/adobe.form.embed.min.js”>
script type="text/javascript">
var fzGP2_2dN2bVVS_2dpV5I4D7hMQ = new ADOBEFORMS.EmbedForm({formId:"zGP2-N2bVVS-pV5I4D7hMQ", server:"https://adobeformscentral.com/", width:640, showHeader:false, transparent:true, widthAfterRedirect:640, heightAfterRedirect:400});
fzGP2_2dN2bVVS_2dpV5I4D7hMQ.display();

You can see some embedded parameters, such as background color, form width and the iframe size after the form is submitted and a redirect URL is specified. (I didn't use this because FormsCentral lets you show a confirmation message after submission.)

The View Responses tab is where the client and I could see the submitted data. Everything is stored, and PayPal even returns the transaction ID and total dollar amount to FormsCentral so the payment data is complete. A report can be exported from the File menu within FormsCentral, or you can view the Summary Report tab to see some charts based on your data. These did not help me much because most of my data was non-numerical, and the charts can only display data as a full count or an average. My client and I focused on the View Responses tab, which had all the data we required.

The Ning platform could accept FormsCentral's embed code since it's pure HTML, and the form itself worked perfectly. This got us around the limitations imposed by Ning and also provided me the data handling that I normally would have executed with my own scripts. Ultimately, FormsCentral gave me more tools with less work and helped both me and my client be more efficient. FormsCentral does have its limitations, mostly imposed by the product's emphasis on the non-programming user. However, FormsCentral is designed for projects like this one and I was lucky to consider it!

FormsCentral can be run as a 30-day trial for 99 cents or paid monthly for $14.99 per month. This allows up to five forms and up to 500 responses. An annual rate of $143.88, recently reduced, provides 5,000 responses per form with unlimited data storage and unlimited forms. Note that the Acrobat.com apps, including FormsCentral, are not included in Adobe's Creative Cloud product.

Updates to Adobe Touch Apps: Photoshop Touch 1.3 and Proto 1.5

Adobe Photoshop Touch and Adobe Proto, two of Adobe’s Touch Apps designed for tablets, were updated in the past month. Today, Photoshop Touch was updated to version 1.3 with a few new features designed for iPad users with Retina screens. Last month, the web design app Proto was updated to version 1.5 with more integration between desktop and cloud applications.

Photoshop Touch 1.3: High-resolution improvements

Adobe Photoshop Touch

According to Adobe’s blog post, Photoshop Touch 1.3′s primary goal is to support the new batch of high-resolution Retina screens being used by Apple in their new iPads (3rd generation). The app also supports images up to 12 megapixels, including print-quality resolutions. (The blog post makes it sound like you have to sacrifice the number of layers you can work with in order to gain the extra pixels.)

Other improvements include:

  • Two new Effects: Shred and Colorize
  • Smoother animation and scrolling in the organizer, tutorial browser and file picker
  • New three-finger tap gesture to toggle 100 percent view and fit screen
  • New pixel-nudging mode for precise movements
  • Support for Apple Photo Stream on the iPad

Adobe Proto 1.5: Little improvements can mean a lot

Adobe Proto Logo

Proto is one of my favorite Adobe Touch Apps (see my review of it here), but Proto 1.5 provides some very useful improvements that should have been in the original release. The more comprehensive list of improvements is here on John Nack’s blog, and here’s a selection of that list:

  • Email interactive wireframe as attachment or share via Dropbox and other Adobe Touch Apps
  • Copy and paste objects to different pages
  • Share common objects across pages
  • Navigations can now be pinned on all pages
  • Z-index (stacking over) can be changed via Context Menu
  • Show undo/redo count
  • Objects snap to both CSS Column and Design Grid
  • Code generated is now ordered according to the appearance in the page
  • All pinned objects generate a separate common CSS file (common.css)

Generally, the improvements provide a more productive workflow within Proto, a more efficient use of materials like common navigation elements, and more useful code outside of the Proto environment. Dreamweaver users should watch this Adobe TV clip to learn how to bring native Proto files into Dreamweaver CS6.

For more information, check out the product pages for Photoshop Touch and Proto or the Adobe Touch Apps homepage.

BOOK REVIEW: Node Up and Running

Front-end web developers everywhere know JavaScript and use it for everything from DOM manipulation to Ajax applications. That’s why I am really excited that Node.js exists—JavaScript running on the server side, running applications from the server rather than the browser. The exciting aspect of it is it opens up server-side programming to front-end developers who until now have focused on the browser.

Node Up and Running by Tom Hughes-Croucher and Mike Wilson provides a primer on Node that I really enjoyed. I have not worked with Node before but I’m experienced with JavaScript—in other words, I’m the ideal reader for an introductory book such as this. The most useful chapter for me was actually the first, which introduces Node and—most importantly—explains the scalability of Node and its ability to handle large applications. I wasn’t sure it was suitable for these things compared to Java or other server-side languages. I wish the book dived deeper into these questions, but the chapter was enough to make me feel comfortable using Node in these situations.

The rest of the book covers basic Node concepts like loops, error handling, APIs and data handling. All the basics you will need are here, but there’s more to Node and I will be looking forward to a more extensive Node “cookbook” from O’Reilly in the future. (Tom Hughes-Croucher said on Amazon.com that it is in the works.) Node Up and Running is short so you don’t get into all the details, but I was impressed it packed in as much useful details as it did. I also liked that the very first project code in the second chapter consisted of a chat server and a Twitter service—both look impressive and show off Node functionality.

One complaint about Node Up and Running is that the book covers a quickly-changing framework and some parts of the book are outdated at this point. Another criticism is that the book is too short—it’s not even 200 pages, so it’s really just an introduction to Node. But as an introduction it serves its purpose very well and entices front-end developers with some great server-side code that can be built with their JavaScript skills. It’s an exciting time to be a JavaScript developer!

Node Up and Running
Tom Hughes-Croucher and Mike Wilson
Published by O’Reilly
US $34.99
Rating: 9/10
Buy at Amazon.com

Adobe Releases Creative Suite 6 and Creative Cloud

Adobe announced today the release of Creative Suite 6 (CS6) and the Adobe Creative Cloud, representing the latest in the company’s lineup of applications for creative professionals. They will be available for purchase in May.

Both products had been previously announced—Creative Cloud was first announced back in October at Adobe MAX—and there are many official and unofficial “sneak peek” videos online of new CS6 features. Some applications have also been available as public betas, including Photoshop CS6 (1 million downloads as of this writing), Edge and Muse (over 1 million downloads each). Despite this early exposure, the creative community seems more excited over this release than some previous Creative Suite releases and the response to the public betas have been very positive. The Photoshop CS6 beta has been downloaded more than any in Adobe’s history.

The Creative Cloud structure

Adobe Creative Cloud is a response by Adobe to the changing nature of software and online services. It’s become clear that large version releases every 18 to 24 months is an anachronism compared to bug fixes pushed over the Internet or online apps handled by many hands across Github. Most of the CS6 products are the same familiar ones we’ve used for years, but Creative Cloud provides a new pricing model, online services and a new activation/updating system.

Adobe Creative Cloud includes:

Lightroom 4 and the Digital Publishing Suite will not be included until the summer. Adobe Touch applications for iOS are planned for release before the summer, particularly Photoshop Touch which my source says will be available in May.

Adobe Creative Cloud is not dependent on an Internet connection; software is downloaded to the user’s computer and can run without a connection. The installed software does check Adobe’s servers once a month to ensure a valid Creative Cloud license exists for the user based on his/her Adobe ID. Software updates can be pushed directly to the user’s computer and content will be available on all devices through Creative Cloud synchronization.

Purchasing software through a Creative Cloud subscription has some advantages. Typically, a Creative Suite customer gets a boxed product that can be installed on two machines—typically a desktop and laptop computer—but the box contains either Mac or Windows versions. Creative Cloud users are still restricted to two machines but one can be a Mac and the other Windows. This is a sweet deal for Mac users who happen to use a PC laptop.

There is also a free subscription available for prospective Creative Cloud customers. The free subscription includes 2GB of cloud storage for projects and trials of all available software. Note that if you buy into Creative Cloud and then cancel at some point, the software will stop working (after it pings the server) but your cloud storage space remains for several months.

Creative Cloud Pricing

Adobe Creative Cloud costs $49.99 per month annually or $74.99 per month, paid monthly. There’s also an introductory rate of $29.99 per month for users of CS3, CS4, CS5 or CS5.5. A version of Creative Cloud optimized for teams will cost $69.99 per person per month. This team-optimized product will include expert services and support, company IT tools and workstation synchronization, but it’s buried deep in Adobe’s development timeline and a fall release would not surprise me.

What if I don’t want Creative Cloud?

Adobe expects many users to create on tablets and mobile devices first, then polish their creations with CS6 and eventually “publish anywhere” with software like Edge—which converts animations to HTML5—and services like Business Catalyst. I reviewed the Adobe Touch apps and I thought they were not robust enough as a whole to bring more than a kernel of a final product back to the desktop, so I’m glad to see a typical Creative Suite workflow—without most of the Creative Cloud-specific features—is still possible.

CS6 icons

There are four Creative Suite 6 suites:

  • Design Standard includes:
    • Acrobat X Pro
    • InDesign CS6
    • Illustrator CS6
    • Photoshop CS6
  • Design Premium and Web Premium have been combined into one suite that includes:
    • All Design Standard products
    • Dreamweaver CS6
    • Fireworks CS6
    • Flash Professional CS6
    • Photoshop CS6 Extended replaces Photoshop CS6
  • Production Premium includes:
    • After Effects CS6
    • Audition CS6
    • Illustrator CS6
    • Photoshop CS6 Extended
    • Premiere Pro CS6
    • Encore CS6
    • Prelude CS6 (new)
    • SpeedGrade CS6 (new)
  • Master Collection includes all CS6 applications.

Adobe Edge, Muse and Lightroom 4 are not CS6 applications and aren’t available in any CS6 suite, though they are included in Creative Cloud.

Prices are:

  • CS6 Design Standard: $1,299 full, $299 upgrade
  • CS6 Design & Web Premium: $1,899 full, $399 upgrade
  • CS6 Production Premium: $1,899 full, $399 upgrade
  • CS6 Master Collection: $2,599 full, $549 upgrade

Flash Builder 4.6 and Acrobat X will not see an update, but Creative Cloud users will get their updates automatically when they are available. CS5.5 single-product subscribers will be able to continue their subscriptions at $19.99 per month per product, and they will also score 10GB of Creative Cloud space. However, CS5.5 suite subscribers will need to transition to Creative Cloud.

What’s in Creative Suite 6?

A lot of readers will really just want to know what’s in the newest versions of the Creative Suite products. There are two new CS6 applications, both in the video category:

  • SpeedGrade CS6, for color grading and color-correcting video
  • Prelude CS6, for adding metadata to clips on import and handling shoot data

There are a huge number of new features for CS6, particularly for some of the flagship products like Photoshop. I think this is why so many public beta users are getting excited for the launch. I am using a few prerelease betas of CS6 software but I prefer to work with the shipping product before I write a review, so those will be forthcoming.

Conclusion

Adobe is naturally excited about the CS6 and Creative Cloud launch, which Scott Morris—Senior Marketing Director for Creative Pros—said might be the most important launch in Adobe’s history. The Creative Cloud product is what makes it so important—it’s a rethinking of the way Adobe delivers products, and it’s the first single product that puts the entire creative workflow in the user’s hands.

BOOK REVIEW: Trevor Burnham’s CoffeeScript For Pragmatic Programmers

CoffeeScript cover

CoffeeScript, a programming language that lets you output JavaScript with cleaner code, is barely two years old but it’s already exciting developers. I hadn’t heard of it until I got a copy of CoffeeScript: Accelerated JavaScript Development by Trevor Burnham, from The Pragmatic Programmers line of books “by developers for developers.” I could tell right away that Trevor is a decent developer and has the chops to write a book like this—his grasp of JavaScript, JavaScript frameworks and of course CoffeeScript is solid. His writing style is also fairly clean and easy to follow, which is important for a book like this that covers a language not everyone has experienced.

CoffeeScript is basically a primer for the CoffeeScript language: you’ll learn the basics of the language and also dive into some very basic chapters on jQuery and Node.js, but there’s a lot more to learn that you will have to find on your own. This isn’t necessarily a bad thing—some of my best learning experiences have been spurred by small, lean books—but this is probably not the complete reference on CoffeeScript.

I also should point out that CoffeeScript is not JavaScript. CoffeeScript is compiled and translated into JavaScript after the coding process, which lets you work with the cleaner CoffeeScript syntax throughout your project. Ruby and Python programmers will appreciate CoffeeScript more than the typical JavaScript and jQuery programmer. I happen to be one of the latter more than the former, so I read this book from that perspective. Fortunately, CoffeeScript clearly explains how to work with CoffeeScript from the initial installation, which some books sometimes fail to do.

The hands-on work done in CoffeeScript comes from a game project that Trevor builds and improves from chapter to chapter. I like smaller, in-chapter projects as well as larger projects that span over multiple chapters, but sometimes the code didn’t seem very clean or easy to follow. Maybe some more pages devoted to writing and explaining the code would have helped, or perhaps the larger project could have been replaced with some smaller ones. There’s a few ways Trevor could rework the code and make it easier to learn.

I really enjoyed reading CoffeeScript and would like to branch out into using CoffeeScript more to improve my code production. I’m looking for other books to take me further down the learning path, but the book has provided me a fine head start.

CoffeeScript: Accelerated JavaScript Development
Trevor Burnham
Published by Pragmatic Bookshelf
US $29
Rating: 8/10
Buy at Amazon.com

BOOK REVIEW: The Tangled Web And Untangling Web Security

Tangled Web book cover

Front-end developers are being assigned more and more projects that require cross-domain communication with data services via JavaScript, and so web security and handling cross-domain applications has become more important. I find that many developers don’t want to handle such mundane details—they simply want their app to work like it should—but they have to learn these things in order to accomplish their task.

Michal Zalewski, who has a strong pedigree in web security circles and wrote Google’s own Browser Security Handbook, has a really excellent book out called The Tangled Web: A Guide to Securing Modern Web Applications. I am really impressed by how thorough and comprehensive the book is—it’s 300 pages, quite dense and covers all the major topics on web security I can think of. It’s also very technical, so much so that I think its target audience is back-end developers and system administrators more than front-end developers. I’m not sure yet if front-end developers need to know everything in The Tangled Web or should worry more about the bits that they can do something about and leave the rest for their colleagues on the back end.

Fortunately, most of the early chapters cover familiar front-end topics such as HTML, CSS and JavaScript and I really recommend those for front-end developers. They will really open your eyes to all the little security imperfections in the code we write every day, a lot of which seem safe but can cause big problems. The Tangled Web really opened my eyes on the subject, and I’m looking forward to making my code more airtight.

There’s not much I can say against The Tangled Web: it is comprehensive, clearly written, and technically accurate. I think front-end developers can definitely get a lot of use out of it but some chapters cover topics they can’t always do anything about, such as server connections. Back-end developers, database programmers and system admins will probably have the same reaction to those early chapters on front-end programming. Before you buy, read the outline of The Tangled Web’s chapters and see if the book is a good fit for you.

a href=”http://www.amazon.com/gp/product/1593273886/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=wwwjeremyschu-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1593273886″>The Tangled Web: A Guide to Securing Modern Web Applications
Michal Zalewski
Published by No Starch Press
US $49.95
Rating: 10/10
Buy from Amazon.com

REVIEW: Adobe’s Touch Apps for Android

Last month, Adobe released its line of Adobe Touch Apps for Android tablets. Adobe has been testing the mobile and tablet software markets for some time now, first with Adobe Ideas for iOS and Photoshop Express, then the Photoshop SDK and the three Photoshop-related touch apps for iPad, then with Adobe Carousel which also runs currently on iOS, and now with six apps for creative professionals on Android tablets:

  • Adobe Collage, where users can build mood boards with images, text and graphics,
  • Adobe Debut, suitable for presenting graphics and concepts to audiences,
  • Adobe Ideas, a vector application suitable for creating and marking up images,
  • Adobe Kuler, which provides an interface for picking and refining color schemes,
  • Adobe Proto, where layouts for websites can be constructed, and
  • Adobe Photoshop Touch, a tablet-based version of Adobe Photoshop.

I’ve worked with all six and I think the suite of apps are a mixed bag: some really stand out for their usefulness and ability to leverage many tools available in the Android SDK, while others are not as helpful and robust. I can’t tell whether some of the apps are hamstrung by limitations in the APIs or were designed by Adobe to focus on a very specific set of features.

The crown jewel: Photoshop Touch

PS Touch image

Photoshop Touch is probably the Adobe Touch app being promoted the most, and it got a lot of love at the Adobe MAX developer conference in October. Many Photoshop users—including myself—have been wanting “Photoshop on a tablet,” and I think Adobe delivered. Photoshop Touch has a lot of Photoshop’s tools, effects and adjustments, including some I wasn’t expecting (such as Warp). There are a few Photoshop tools that aren’t present, including some animation tools such as the Animation panel. But Photoshop Touch stands out as the most feature-rich and robust of all Adobe’s Touch apps.

I also think Photoshop Touch has the most robust user interface, and incorporates a helpful menu bar at the top of the screen. All the Adobe Touch Apps have a top menu but most only show a few icons and don’t have submenus. Photoshop Touch needs an extensive UI like this, and even though it’s packed with features it’s not hard to use. The only criticism I can make is that some tools aren’t in the same place they are in Photoshop, and Photoshop users might find this counterintuitive. I think the Photoshop Touch development team sometimes strayed too far from the example set by Photoshop.

ps-touch

The results you can achieve with Photoshop Touch are remarkable, particularly with the Scribble Selection tool which lets you mark areas to keep and remove. The app figures out the rest with very good accuracy. This tool reminds me of Photoshop’s old Extract filter, which was removed from that product a couple years ago and still hasn’t been given a suitable replacement. Most of major features are borrowed from Photoshop—layers, brushes, text, adjustment filters and effects are all integrated into Photoshop Touch. One missing feature is the layer mask, which I think is a major oversight. Fortunately, Photoshop Touch exports its files in a new .psdx format, which Photoshop can open with a plugin, so you will be able to bring the full power of Photoshop to your Photoshop Touch projects.

PS Touch image

Photoshop Touch performs best as part of a workflow that also includes Photoshop, though you can do exceptional work without it. Creative professionals who use the Creative Suite extensively will find Photoshop Touch to be a solid extension of their Photoshop tools into the mobile space.

Impressed by Proto

The other Adobe Touch app that really impressed me is Adobe Proto, a web wireframing tool for web designers. Like Photoshop Touch, it has a robust set of tools and a UI that also includes gesture shortcuts. For example, draw a box on the canvas and an HTML div element is created. Draw a “play button” triangle and an HTML5 video element is created. The gesture UI is very easy to work with and I wish Proto was not the only Adobe Touch app that implemented it, but each app has its own development team and the Proto team happened to be the only one to weigh gestures important enough to include in the initial launch. Proto’s gesture UI makes creating website wireframes quick, easy and even fun.

Proto image

Proto projects can contain multiple pages and link between them, and there’s a lot of emphasis on basic HTML elements, form elements and navigation powered by jQuery, the ubiquitous JavaScript framework. Projects can then be pushed up to Adobe Creative Cloud—Adobe’s upcoming cloud service for creative professionals—and then brought into Dreamweaver or any other programming application. I’ve looked at the code Proto renders out and it’s fairly basic but functional, consisting of HTML5, CSS and jQuery as needed. Each page in a project gets its own CSS file, which is not usually advantageous.

Proto image

Proto is a solid wireframing app that provides a lot of tools despite its restrictions in the tablet. Developers need to apply some design work to the output and perhaps clean up some of Proto’s code, but I think Proto can provide a decent starting point for many projects.

Two new apps: Collage and Debut

Collage image

Adobe Collage is a fun tool for producing “mood boards,” which agencies and design teams sometimes use to bring images and text together to communicate a concept for development. Collage leverages the tablet interface very well, including support for multi-touch gestures that brings a tactile behavior to the mood board experience. Moving items around with your fingers is different than using a mouse and a monitor. Collage also interfaces with the tablet’s camera so you can take pictures of your environment and make it part of your mood boards instantly. There’s a small set of tools as well for markup, including a vector brush, text tool and a drop-down menu for duplicating, deleting and stacking elements. You can also include playable video into your mood boards, but they play in a new window and not on the project board itself.

Collage image

Unfortunately, there are not many more features in Collage and I find it to be lacking a few features. Why not include a microphone or allow importing video from the tablet camera? Both of these could really bump up the personal experience of creating projects in Collage. Also, Collage files are currently imported into Photoshop by converting them into a PSD file that can’t be converted back into a Collage file. The converted PSD doesn’t retain video elements either. I think there’s a few kinks to work out in the Adobe Touch Apps/Creative Suite import/export process.

Debut image

Adobe Debut is the least powerful and weakest member of the Adobe Touch Apps family. Debut is a presentation tool that imports graphics and images from various sources and lets users swipe through them. It’s the kind of feature that can be handy in a client meeting or a portfolio presentation. Debut’s best feature is the breadth of sources it can pull images from, including from the tablet’s camera, the Creative Cloud, Google and Flickr. The Creative Cloud gives access to users’ Photoshop, InDesign and Illustrator files, which is a real plus for creative professionals. You can also toggle Photoshop file layers on or off when importing. A vector markup tool allows Debut presentations to be marked up on the fly, which can be handy in client meetings.

Debut image 1

However, the fact that I’ve just described the extent of Debut’s functionality goes to show how little it can really do. Collage can do pretty much anything Debut can do except present multiple slides, which is what makes me think Adobe should combine these two apps into a more powerful mood board creation and presentation app for client experiences.

BOOK REVIEW: The Book of Ruby

Book of Ruby cover

The Book of Ruby by Huw Collingbourne covers the Ruby programming language, which is popular as part of the Ruby on Rails framework for building websites and web applications. I thought it was a good primer on Ruby for the average beginner but there are some things that keep it from really standing out against all the other Ruby books on the market.

My first difficulty with the book is the explanation on installing Ruby at the very beginning. I had a hard time understanding what to download and how to install Ruby on my Mac, and I ended up having to do a lot of digging on the Ruby website to figure it out. I think Huw should have covered this a lot more thoroughly, particularly for Ruby beginners.

Once I installed Ruby, I found the rest of The Book of Ruby to be interesting and educational. Huw’s writing style and tone is clear and to the point, which actually sets it apart from other No Starch books like Learn You A Haskell For Great Good!, which has a humorous tone and goofy cartoons in it. In contrast, The Book of Ruby is concise and even a little dry sometimes. I don’t mind this style, and I particularly appreciate Huw’s clean explanation of his code. I did notice that the coding style used through The Book of Ruby isn’t particularly consistent, and it does make some code hard to understand sometimes. That doesn’t bother me, but I know other Ruby developers find a consistent style to be very important for reading Ruby code.

One thing I really find to be missing from The Book of Ruby is hands-on coding projects. I learn more from complex examples and project tutorials, and this book doesn’t really have those. The Book of Ruby‘s strength is in explaining concepts and being a good reference but there aren’t really any projects to work on and I wish there were more ways to tinker with Ruby code. I also think there should be much more devoted to Ruby on Rails than just one chapter, even though technically Ruby is a separate language. Ruby on Rails is a major driving force in Ruby development and I think the book would be more complete with more pages devoted to it.

Programmers who don’t know Ruby might find The Book of Ruby useful as a resource for learning concepts and the scope of the Ruby language. I think there are better resources in print and online for actual hands-on Ruby experience, but The Book of Ruby can help build a good foundation for Ruby development.

The Book of Ruby
Huw Collingbourne
No Starch Press
US $39.95
Rating: 7/10
Buy from Amazon.com

BOOK REVIEW: Learn You A Haskell For Great Good!

Learn You A Haskell cover

Learn You A Haskell For Great Good! might be the only programming book with a title in Engrish, and it definitely has a unique tone among all the other programming books out there. Learn You A Haskell was written by a 23-year-old Slovenian and covers the Haskell programming language, which is somewhat different from other web programming languages due to its status as a purely functional and a “lazy” functional language. I’ve not worked with language like this before so I started reading Learn You A Haskell as a true beginner.

Author Miran Lipovaca did an excellent job explaining Haskell’s concepts clearly and logically. The chapters and concepts explored built upon one another—what I learned in the previous chapter helped me understand material in the next chapter. Miran’s writing style is witty and peppered with jokes and funny turns of phrase, which I liked at first but got a little tired of as the book progressed. Miran also likes to doodle and Learn You A Haskell has a bunch of random cartoons throughout the book. I do like having more illustrations in programming books such as these, but they are pretty rough and you’ll like them or you won’t.

Fortunately, the quality of Miran’s cartoons doesn’t affect the quality of the book’s programming materials. The code in Learn You A Haskell is solid and functional, and it explains many Haskell concepts very clearly. I am really pleased to see some advanced elements of Haskell explored here, including type classes, input/output (I/O), functors and monads. They are usually hard to comprehend, but Learn You A Haskell dissects them and explains them in good detail. I think Miran could have expanded these advanced sections, but this is a book for beginners.

One thing I would have liked to have seen more of is tutorials and demos. There’s a lot of code in Learn You A Haskell, but they don’t always coalesce into a larger project or tutorial. Some chapters in particular, such as Chapter 9 on I/O, would have really shined if it dug deep into a large project, but Miran didn’t really push it far enough. I’m not too disappointed by this, but it is an opportunity for improvement.

Programmers of any language who want to try something interesting might want to pick up Learn You A Haskell For Great Good! It makes for a quick read even though it’s almost 400 pages, and the Haskell language itself is interesting. I give kudos to Miran for making what could have been an opaque and difficult subject actually quite interesting and fun.

Learn You A Haskell For Great Good!
Miran Lipovaca
No Starch Press
US $44.95
Rating: 9/10
Buy on Amazon.com

Day 2 Announcements From Adobe MAX: PhoneGap, Flash Player 11, AIR 3 and Unreal Engine 3

Compared to the first day’s MAX keynote, the second day’s keynote was much more focused on hard-core development but also a lot less exciting and with fewer major announcements. The only acquisition that was announced was Nitobi, which brings the PhoneGap development platform into Adobe’s portfolio. PhoneGap is a popular way to publish HTML5 and JavaScript-built applications to most major mobile platforms, including iOS, Android, BlackBerry and Windows Mobile. I bet it will be rolled into either Dreamweaver—which has had similar frameworks like jQuery Mobile integrated with it—or the newly-announced Adobe Creative Cloud, where it could end up as another of its creative services (along with TypeKit and others). They did say that PhoneGap will remain an open-source project available to everyone.

According to the keynote, Adobe’s intention is to “bet on HTML5″ while “doubling down on Flash,” which I expected. Some people, particularly Apple fanboys, expect Adobe to kill Flash—but I don’t think it will happen anytime soon if at all, and right now HTML5 can’t duplicate all of Flash’s capabilities so I don’t think it should. Interestingly, Ben Forta—Adobe’s Director of Platform Evangelism—asked for a show of hands of who has built an HTML5 application before, and almost no one raised their hand.

Flash Player 11 and Adobe AIR 3 were also announced, which focus on games, rich media and data-driven applications—all things that are not easy to implement with HTML5 right now. I’m particularly interested in 3D and gaming capabilities that are being built into Flash Player 11, and a demo of the Nissan Juke website—which features an online driving game—shows some good things with the new technology.

Other announcements

  • Adobe Edge, currently in beta, has reached the third preview iteration and has some new features including loops and hyperlinks. The beta has been downloaded over 150,000 times.
  • The new ThemeRoller product was demonstrated, showing how jQuery Mobile themes can be built with a user interface. This is also something that can be built into Dreamweaver, but at this point it looks like it’s generating a lot of CSS code. Until ThemeRoller can generate lean code, web developers will criticize Adobe for bloated code.
  • CSS Shaders was demoed for the crowd. CSS Shaders is a CSS3 module that Adobe has contributed to the W3C for inclusion in the general CSS3 spec, and it leverages current PixelBender technology to bend and warp HTML elements. The presenter had a very nice demo of a live page curl on an HTML element and also on a live video element. CSS3 is where Adobe can provide the most benefit to developers, because CSS is pervasive across the web and it’s not tied to a particular product.
  • Another CSS3 module presented by Adobe is CSS Regions, which uses CSS to generate text columns and live text wrap. This is already implemented in Google’s Chromium (a beta version of Chrome) and Internet Explorer 10.

The last presenter, Epic Games’ CEO Tim Sweeney, showed something that means a lot to me personally: Unreal Tournament 3 running in Flash. I played a lot of Unreal Tournament 2004 years ago and Unreal Engine 3 (UE3) is now able to run on Flash—how cool is that? According to the press release, Flash Player 11 has up to 1,000 times faster 2D and 3D rendering than Flash Player 10, which sounds…unreal. If Flash can gain a foothold as a runtime for top-of-the-line games, Adobe can pivot the technology into a data-centric and graphics-centric product and leave web graphics and rich Internet experiences to HTML5, which is what I think will happen one way or another.

Day 1 Announcements From Adobe MAX: TypeKit, PhoneGap, WoodWing and DPS Single Edition

Adobe Acquires TypeKit and PhoneGap

Adobe has bought TypeKit and made the web font service a part of their Adobe Creative Cloud’s services. Jeffrey Veen came on stage and talked about the challenges of fonts on the web but showed how some websites are achieving very professional typography now through Adobe technology. I’ll agree to that—I use TypeKit on my own websites, and it’s easy to deploy and works across all browsers.

Jeffrey also said almost 60 foundries contribute to TypeKit. This includes Adobe, but they don’t offer the entire 2,300-font Adobe Type Library. Maybe that will come later. Jeffrey demoed some new features of the TypeKit website, such as rendering previews to show how fonts will look in different browsers and easier search tools.

I wonder what will happen to current TypeKit customers. Will they have to buy the Adobe Creative Cloud to maintain their websites’ fonts? I hope not, and I don’t think that would be practical for TypeKit’s users.

Adobe also announced the acquisition of Nitobi Software, which produces the popular PhoneGap platform for building mobile apps for multiple platforms including Android and iOS. PhoneGap leverages HTML5 and JavaScript, so I expect this would be rolled into Dreamweaver, Adobe’s HTML-editing software.

WoodWing Moves Users to Adobe Digital Publishing Suite

This announcement might have surprised me the most today. WoodWing Software, whose editorial workflow products allow for digital publishing to tablets and devices, has entered an agreement with Adobe to incorporate their Digital Publishing Suite with WoodWing’s Enterprise Publishing System. The Digital Publishing Suite will now be the only option for WoodWing customers to publish to tablets.

It sounds like WoodWing’s editorial and designer workflow will remain pretty much the same: users will use their Content Station and InDesign plugin to build the digital editions. At that point, .folio files will be created and uploaded to Adobe’s Digital Publishing Suite platform for packaging, distribution, monetization and analytics. WoodWing’s Reader Application and Content Delivery Service are ended effective immediately. Customers will transition to the Digital Publishing Suite by November 2012.

Digital Publishing Suite Now Available In Single Editions

If you’ve wanted to publish a one-shot digital publication or a book, you’ll be happy to know Adobe today announced the Single Edition in the Digital Publishing Suite. The service, which takes interactive InDesign documents to the iPad, has until now been an enterprise-priced service for large companies and big periodical publications. Now companies can pay for just a single publication and get all of the Digital Publishing Suite’s features, including distribution through the Apple App Store, monetization and analytics.

It will cost $395 per publication, which immediately establishes it as a business product. Single Edition is not for people wanting to publish a family memento or maybe a church cookbook—but niche publications could very well benefit from its features.

Day 1 Announcements From Adobe MAX: Adobe Creative Cloud And Adobe Touch Apps

Today Adobe announced a variety of newsworthy items, mostly acquisitions and new products that will greatly impact creative professionals. Ironically, “Flash Platform” was not mentioned once at this event, traditionally Adobe’s largest for Flash developers, but I and other press colleagues think more developer news will be announced at tomorrow’s keynote.

Adobe Creative Cloud Combines Apps, Services and Community

This was the big-picture announcement: Adobe has a new service called Adobe Creative Cloud that combines their desktop products, tablet and touch applications, a community website with cloud storage, and a variety of services. The Adobe Creative Cloud’s discrete components will be detailed separately below, but the outline includes:

General pricing and availability of the Adobe Creative Cloud will not be announced until November 2011. The product itself looks absolutely beautiful, and is what I expected from a company like Adobe responding to huge changes in mobile computing and data distribution. Apple and Amazon are doing the same thing in the cloud computing landscape. However, right now we don’t know what a service like Adobe Creative Cloud will cost, so until then we can’t judge how successful it might be.

Another complication is the fact that the Creative Suite 5.5 products have been available with a subscription since May. Will that option go away now that users can subscribe to those and more through the Adobe Creative Cloud? I doubt it will—I know the CS5.5 apps and suites will still be available as standalone products and for sale through the conventional way, and I expect Creative Suite subscriptions will also continue. I also think you can look at the prices of those CS subscriptions, add a bit more money, and have an idea what the Adobe Creative Cloud will cost.

Adobe Touch Apps Released, Includes Photoshop Touch

Adobe has been investing considerable resources into tablet and mobile applications, first with Adobe Ideas and then with Photoshop Touch SDK apps like Eazel and Nav, and the iOS-only Carousel. Today Adobe announced six new “touch apps” currently on Android, which will all be available to Adobe Creative Cloud subscribers.

  • Adobe Photoshop Touch brings basic Photoshop features to tablets, including layers, adjustments, selection and background extraction among other features. Out of all the apps this is the only one to be named after an existing desktop product, and I predicted a “Photoshop on the iPad” product at some point. However, Adobe has made a strategic decision not to put too many Photoshop features into Photoshop Touch and so the app is nowhere near as powerful as its namesake. This was out of both necessity and UX considerations, but I think it will hurt its reception by users.
  • Adobe Collage helps creative people combine imagery, drawing and text to create storyboards and basic layouts. I see this being more useful in the conceptual phase of a creative project, and it doesn’t take the place of Illustrator or InDesign.
  • Adobe Debut is a client presentation application for displaying project materials in meeting situations. Photoshop and Illustrator files can be displayed, among other Creative Suite file formats.
  • Adobe Ideas is a vector drawing application whose files can be opened in Illustrator or Photoshop for refinement. As with Collage, it can’t take the place of Illustrator and it’s useful for off-site work when a laptop isn’t an option.
  • Adobe Kuler is a tablet-based version of Adobe’s existing kuler application, previously just a web and AIR application. Users can build and share color palettes.
  • Adobe Proto builds wireframes and prototypes for websites. It’s the only app that incorporates gestures in a major way: users can draw an “x” to insert an image, or squiggly lines to create headlines and text. There are roughly 16 different gestures already created for Proto.

All the touch apps integrate with Adobe Creative Cloud and share projects and assets in the cloud, so projects can be touched by multiple apps. For example, a project can be conceived by a project manager in Collage, passed on to a designer who builds the color palette in Kuler, then to a web developer who wireframes the product in Proto, and approved by the client in Debut before moving on to final production in Creative Suite. All these apps are also built with Adobe AIR, so they could technically be deployed on the desktop, but the apps’ user interface is designed for small devices and touch screens.

All apps will be available separately for $9.99 each.

Conclusion

After all these announcements, I wasn’t sure if life will be easier or harder now for the traditional creative professional—those who design or develop with Adobe products and have been using the Creative Suite products for years. The Adobe Creative Cloud moves resources to everyone, not just the creative professionals, and the touch apps seem like they are designed for creative users who aren’t necessarily the ones putting publications to bed or deploying code to the web. Even Photoshop Touch, whose namesake is Adobe’s flagship product, feels lightweight and lean. Adobe seems to be focusing on a larger creative audience, and it could complicate things for creative professionals.

However, I like the direction Adobe is taking in marrying everything through the cloud—it had to happen eventually, and the opportunity is huge for business and also for creative productivity. The notion of web fonts being available in the cloud via TypeKit makes sense not only for web fonts but for all fonts—imagine being able to license the entire Adobe type library without installing files on your own network. Out of all this news, the Adobe Creative Cloud has the most implications for Adobe and for consumers.

BOOK REVIEW: The Book of CSS3

Book of CSS3

HTML5 is probably the most desirable acronym to have in a web designer’s portfolio today, but I think the third iteration of Cascading Style Sheets (CSS3) has greater impact on a designer’s bottom line and clients’ satisfaction. This is because CSS3 can finally deliver the slick user interfaces that used to be only possible with Photoshop and a lot of hacking for Internet Explorer. Browsers are advanced enough today to apply CSS3 and make websites everywhere look extra sharp.

The Book of CSS3 by Peter Gasston covers the full gamut of CSS3 rules and features, and I think it’s a useful book for CSS coders of all skill levels. I use a lot of CSS3 to control backgrounds and box elements, but there are entire sections of the CSS3 spec that I never really appreciated until I read this book. Gradients, color, opacity, transitions and animations are all prime examples. Another is media queries, which Adobe has made easier to implement with recent versions of Dreamweaver.

The book is clear, well-written and documented with good examples. There are a good deal of images to illustrate CSS3 in action, but unfortunately the book is in black and white which sometimes makes the images less useful. A more useful part of the book is the browser chart at the end of each section and in Appendix A, detailing which browsers support the demonstrated CSS3 features. Unfortunately, Internet Explorer still lags behind other browsers and doesn’t support a lot of CSS3 features (though I think this will change with the next version of IE). There are a few CSS3 features that are so experimental that most if not all browsers fail to execute them, including flexible box and template layout structures.

CSS3 will most likely change in the near future. Technology is evolving at a more rapid pace; the Firefox browser, for example, will be updated on a faster schedule and we’ll see more versions (and more CSS3 support) quicker. But I think the basic capabilities of CSS3 are set and web designers need to look at CSS3 now if they want to be progressive and offer clients the best technology today. The Book of CSS3 is a good place to learn the full range of CSS3 features.

The Book of CSS3
Peter Gasston
Published by No Starch Press
US $34.95
Rating: 9/10

buy from amazon

BOOK REVIEW: Eloquent JavaScript Simplifies Scripting For The Web

Marijn Haverbeke’s Eloquent JavaScript: A Modern Introduction to Programming is really about the fundamentals of coding clean JavaScript for websites. In any professional’s career, “fundamentals” are taught early on but can be forgotten or pushed aside in favor of getting projects out the door when deadlines are tight or in favor of new training that do things differently. In any case, fundamentals are usually the foundation of good programming and it’s beneficial to revisit them from time to time.

Eloquent JavaScript does a good job of detailing the fundamentals and explaining concepts like the stack and the environment. This attention to detail is what sets the book apart from other JavaScript books. However, Eloquent JavaScript is a comprehensive JavaScript guide so many features and techniques aren’t discussed. Another downside is the lack of tutorials or step-by-step examples: since the focus is on basic concepts, Marijn only needs basic snippets of code to illustrate his examples. There are a few larger projects used to demonstrate things over the course of a chapter or two, but they’re not really laid out as tutorials.

There are other aspects of JavaScript that aren’t discussed in Eloquent JavaScript, the most glaring of which might be libraries like jQuery. jQuery, Dojo and other JavaScript libraries are commonly used to make coding JavaScript easier, but Eloquent JavaScript mentions them on one page in passing. Again, there are many books out there that cover jQuery—and far more resources and code examples online—but this book is all about understanding JavaScript and knowing how to write elegant code from scratch.

Eloquent JavaScript is a very specialized book for programming purists and web developers who want to write the best code possible. Many developers are happy writing code that simply works, and this book may not be for them—a larger resource like O’Reilly’s JavaScript: The Definitive Guide or a book on jQuery might be a better fit for them. But if you want to grasp all the basic concepts behind JavaScript and write more eloquent code, try Eloquent JavaScript.

Eloquent JavaScript: A Modern Introduction to Programming
Marijn Haverbeke
Published by No Starch Press
US $29.95
Rating: 8/10

buy from amazon

BOOK REVIEW: Mining Twitter and Data Source Handbook

How much data is floating around on the Internet for you to use in your applications? If the sizes of 21 Recipes for Mining Twitter and Data Source Handbook are any indication, the answer is: not much. These are easily the shortest books I’ve ever reviewed (60 pages for Mining Twitter, and a mind-boggling 30 in Data Source Handbook). This is not necessarily a bad thing, but when a book is short enough to be basically a blog post I have to wonder how useful it will be as a publication.

Mining Twitter

Mining Twitter is a fun little book with an emphasis on hands-on projects that I like. As with his book Mining The Social Web, author Matthew Russell has chosen to use Python to write his applications so it poses a learning curve for Python newbies, but at least the techniques are easy enough to understand and the projects have some useful results. I particularly like the mashups of Twitter data and geolocation in the last couple projects.

The problem with such a short book is some topics only get the barest coverage. OAuth, for example, which protects Twitter data and allows access with authorization, can be a complicated concept but in Mining Twitter the subject only gets a couple pages. Matthew provides some code that send credentials to Twitter and returns user data access, but users who don’t really comprehend the process will just need to go online and research OAuth.

Data Source Handbook

The Data Source Handbook is interesting to me because, despite the ribbing I’ve just given about the book’s small size, there really are a lot of public data sources and APIs that give access to great information. There are almost 60 APIs listed in this book, which might be part of the problem: at roughly two data sources listed per page, there is no real documentation other than a small description and an example of the API call and result. Readers can use Data Source Handbook only as a catalog of public data sources and learn more by checking APIs out online.

The real benefit of Data Source Handbook is the sheer number of public data sources available. I knew of only a few of these APIs before I read this book, and it’s the kind of book that’s easy to keep on the shelf and refer to it when some data is needed for an application. The book is organized into sections—websites, people, search, geolocation and more—so it’s easy to find what you need. Just remember this book is only a developer’s starting point to finding and employing a public API.

21 Recipes for Mining Twitter
Matthew A. Russell
Published by O’Reilly
US $29.99
Rating: 7/10

Data Source Handbook
Pete Warden
Published by O’Reilly
US $29.99
Rating: 7/10

BOOK REVIEW: O’Reilly’s Canvas Pocket Reference

O’Reilly‘s series of pocket reference guides has always been a handy reference resource, and I give them away in the training sessions I provide for my clients. One recent book I’ve been looking through is David Flanagan’s Canvas Pocket Reference, which focuses on the canvas element introduced in the new HTML5 web design language.

Once again, O’Reilly has published a very useful and handy book—it’s well-organized, well-written and well-documented. Half of the book, or about 50 pages, is reference to methods; the rest of it is an introduction of the canvas element and what its capabilities are. I actually think the book could be larger and more pages could have been spent explaining the canvas element and illustrating with more pictures and diagrams. This book alone doesn’t fully teach what canvas can do—but since it’s a pocket guide, it probably isn’t designed to go that far.

Now that HTML5 is the emerging specification for web development—and already in use by many designers including myself—a book like Canvas Pocket Reference is important for all web designers to have on their shelf. I don’t think it is the definitive resource on the canvas element, but I’m not sure what publication would be. As a pocket guide, Canvas Pocket Reference is a great tool for web designers.

Canvas Pocket Reference
David Flanagan
Published by O’Reilly
US $12.99
Rating: 9/10

Buy from Amazon

Adobe Announces CS5.5, Subscriptions, Photoshop SDK and Touch Apps

Major changes are coming out of Adobe today as they announce several new products and technologies:

  • CS5.5, the next iteration of the popular Creative Suite applications for creative professionals,
  • The Photoshop Touch Software Development Kit (SDK), which allows applications using Android, BlackBerry Tablet OS and iOS to interact with Photoshop,
  • Adobe Nav, Color Lava and Eazel—three iPad apps that implement the Photoshop SDK, and
  • A new yearly upgrade cycle and subscription plans for Creative Suite products.

CS5.5 for Design: InDesign leads the way

Besides the Photoshop Touch SDK (described below) and the addition of the already-released Acrobat X, the CS5.5 Design suites have all their major new features in one product: InDesign CS5.5. The emphasis is on improving the use of the Adobe Digital Publishing Suite, which was released last fall as a tool for major interactive publications.

InDesign CS5.5 has a new set of tools dubbed Folio Producer, which allows interactive elements to be added to standard page layouts. This includes 360-degree graphics such as QTVR, embedded websites, hyperlinks and slideshows. The Folio Producer outputs a .folio file, which is digested by the Digital Publishing Suite for packaging and final distribution. If you’re not using the Digital Publishing Suite, the benefits don’t apply.

What I like a lot more are the improved authoring features for eBooks, which don’t require the Digital Publishing Suite. Support for HTML5 video and audio for eBook readers and auto-resizing images are the two main features. There’s also a way to apply character and paragraph styles to EPUB, HTML and PDF tags so, for example, a heading style can be applied to an h1 tag for HTML output and another tag for the PDF output. A new Articles panel lets you sequence content elements so they are read in the appropriate order.

Photoshop Touch SDK and Touch Applications

The Photoshop development team is releasing a SDK which will allow developers to build software that interacts with a user’s Photoshop application. Unlike the CS5.5 products, the Photoshop Touch SDK is available immediately. I’ve not looked at the various methods and functions available to applications through the SDK so I can’t tell the scope of what it can do, but the three applications developed by Adobe (below) suggest it can move artwork, color swatches and tool selection from the app to Photoshop and applications can be aware of what’s open in Photoshop.

The three applications are:

  • Adobe Nav, which makes the iPad an input surface for selecting tools in Photoshop and displays open Photoshop files on the tablet,
  • Adobe Eazel, a neat app for painting with fingers or an iPad-sensitive brush,
  • Adobe Color Lava, a color mixer that can deliver swatches to Photoshop.

I am a member of the prerelease beta team testing these three apps and have been using the shipping version for a few weeks now. I feel the three apps need some more work before they are fully mature. Eazel offers a decent painting experience—whether with fingerpainting or by brush—but the five-fingered user interface can be clunky at best and downright difficult when you’re using a brush or happen to be missing a finger. Color Lava is the best of the bunch in my opinion—the water well and mixing action is very intuitive—but I personally think it belongs as an integrated component of Eazel.

Nav was released to the beta team after the others, and we’ve had it just a few weeks. I’m not sure what its usefulness is: selecting a Photoshop tool on the iPad so you can grab the mouse and actually use it on your computer doesn’t seem helpful. Why not just click the tool with your mouse? Nav’s only other major feature is the ability to browse open Photoshop documents from the iPad and select one as the active file on the computer. This at least makes the iPad a portable window into what’s open in Photoshop, which can be useful when showing images in a meeting. However, Photoshop has to be open and your iPad and computer have to be connected via the Internet to get files into Nav.

A far better application using the Photoshop Touch SDK is the brief demo John Loiacono provided at last week’s Photoshop World event. That app demonstrated layers, layer masks, a desaturation tool and a unique “exploded layer” view. We are moving toward a “Photoshop for iPad” app, and whatever app achieves that level of photo manipulation will be very successful. I think the Photoshop Touch SDK will be the catalyst for such an app, but I’ve not seen this app materialize yet.

The three apps will be available in May 2011 on the iTunes App Store and will be priced at $4.99 for Eazel, $2.99 for Color Lava and $1.99 for Nav.

REVIEW: Photoshop/Premiere Elements 9 for Mac

Photoshop Elements and Premiere Elements are sometimes difficult for me to review because I use Photoshop Extended and Premiere Pro—the professional versions of these prosumer products—and I inevitably compare the two. I can also see how Photoshop Elements and Premiere Elements often borrows technology and features from their pro counterparts, and I’m not sure if this is real innovation or simply providing existing pro features to the prosumer market. In any case, it can’t be denied that prosumers appreciate getting the hottest features in Photoshop Extended or Premiere Pro, albeit some months after they are released to the professional market.

Both Photoshop Elements 9 and Premiere Elements 9 are good upgrades—but not necessarily great. Premiere Elements 9, like Adobe’s eLearning application Captivate 5, is notable just for being available on Mac for the first time. Both Photoshop Elements 9 and Premiere Elements 9 have some smart new features. However, not much innovates beyond what we’ve seen in Photoshop CS5 and Premiere Pro CS5 and some new features are improvements to features that were new in version 8. Let’s go through both applications and outline the new features.

Photoshop Elements 9: “Nips and tucks”

There are a couple existing features that are new for the Mac: the Organizer asset management solution and synchronized image and video storage through Photoshop Elements 9 Plus, which provides 20GB of online storage, templates and stock art. Plus is not new but until now it was included only with Premiere Elements and the Photoshop/Premiere Elements bundle.

Similarly, the Organizer has been a Windows-only component of the Elements family until version 9. I still really enjoy using the Organizer as a small and lean version of Adobe Bridge, which the Creative Suite products still use and was used by Photoshop Elements for Mac until now. All the Organizer’s features are available for Mac now, including People Recognition and the Auto-Analyzer auto-tagging feature. I don’t really see any major differences between this Organizer and the version 8 Organizer, other than Flip camera video importing which is helpful for Premiere Elements users.

Like I mentioned earlier, many of Elements’ new features often come from new features developed for Photoshop or Premiere Pro. The best new feature to show up in Photoshop Elements 9 is the Spot Healing Brush’s Content-Aware mode, which was initially revealed in this Adobe MAX 2009 video and first released with Photoshop CS5. Content-Aware technology has been with us since CS4 but applying it to the Spot Healing Brush came in CS5 and now is available to Photoshop Elements 9 users.

The Content-Aware Fill makes a big improvement in the Spot Healing Brush.

I use Content-Aware mode on the Spot Healing Brush all the time, and it does a great job. It’s one of the great new Photoshop features that I can remember in a long time. For prosumers, it’s great for taking people out of photos and also restoring old photos that need some blemishes fixed. The great thing about it is you can make major fixes quickly and still get a good result—usually, the more time you put into retouching or restoration the better off you are. The Spot Healing Brush has changed that, though I have to say it’s not perfect either. Sometimes I’ll still pick up unwanted details or oddball colors the brush has decided to pull from elsewhere in the photo and add to the brushed region. I have to say that I’ve gone back to the Clone Tool sometimes to manually clone what I want in the area. But I still think it’s an excellent retouching tool to have.

Content-Aware Fill will auto-fill the blank areas left behind after Photomerge is used to build panoramas.

Content-Aware Fill also seems to come into play in a minor improvement to the Photomerge panorama-building tool. When photos are merged together there’s usually some blank areas around the photos that until now have been cropped out. Now Photoshop Elements 9 will fill in those areas with Content-Aware Fill and duplicate whatever’s around it. It makes perfect sense because most of the time those areas need some sky or foliage, which is ideal fodder for Content-Aware moves.

Elements users already know about Guided Edits but there’s a new Fun Edits section with some neat ready-made effects:

  • Lomo Camera Effect duplicates the color saturation, dark shadows and vignetting you typically get from a Lomo camera. I personally don’t enjoy a lot of lomography and would prefer to see a Polaroid Effect that duplicates the old Polaroids from my youth!
  • Out Of Bounds is my favorite Fun Edit: it pulls a selected part of the photo onto its own layer and adds a drop shadow and white stroke so it looks like the photo is “breaking the frame,” with elements protruding outside the edge.
  • Perfect Portrait adds some basic portrait-enhancing filters and contrast improvements to your portraits. Simple but effective.
  • Pop Art is something I would have loved as a kid, when I was making pop art with bitmap clip art (yes, I am from the 1990s). An image is duplicated in a 2×2 grid and color can be added to create a Warhol-esque image.
  • Reflection is another winner, creating a decent reflection of an image below it. I think users have to be careful—water and other natural reflective surfaces are not mirrors—but it produces a nice result if used subtly.

The Lomo Camera Effect.

The Out of Bounds Effect.

The Pop Art Effect.

The Reflectino Effect.

One new feature that I didn’t really like is Photomerge Style Match, which applies color and tonal qualities (black/white values) to photos in a way Match Color might in Photoshop. I think it’s good for applying major color changes, like sepia on a photo, but there’s better ways to add sepia (the Old Fashioned Photo effect in Photoshop Elements comes to mind). The problems often show up when the tonal changes are added to the mix—colors can become dingy and the worst thing is changes can be applied in patches or in a hazy grain on the image. It might be improved by controls separated for color and tone, but in Photoshop Elements 9 there are only controls for how much change is applied. Ultimately the Photomerge Style Match is something to play with but I don’t see improving my photos much with this. Maybe the next version of Elements will improve upon it—I hope so, because it does have some promise.

There are some big changes to the ways people can share and publish photos out of Photoshop Elements. The first is a Share To Facebook dialog box that lets you push photos and albums to your Facebook profile for easy sharing. Adobe did a really good job making the process easy—once you’re logged into Facebook, it’s just a matter of adding your photos and tags and publishing to your page. This feature is built into the Organizer so both videos and photos can be shared.

The other major change is Basic and Advanced layout modes for building layouts to print in a book or just as an image. The Basic mode will build a simple layout with the photos you provide it, which is similar to what iPhoto would do for you. iPhoto has some other tools for you but they’re all basic changes to font, background and more. Photoshop Elements 9 does pretty much the same thing.

The Advanced mode is where Photoshop Elements 9 separates itself from apps like iPhoto and lets its editing tools work on the layout, including images from the layout theme. The sidebar remains on the Create panel so you can’t really use edits from the Edit panel, but the toolbar and menu items are all available. I wouldn’t even bother with the Basic mode unless you only have five minutes to build a greeting card or photo book—use the Advanced mode to really make something unique.

Wallaby: Adobe Releases Beta Flash-to-HTML5 Converter

Today at FITC in Amsterdam Adobe announced a prerelease version of an app—codenamed Wallaby—that converts Flash (FLA) files to HTML5, CSS3 and SVG. Adobe has made it clear that this is a “preview of experimental technology” and is releasing Wallaby on Adobe Labs, where its public betas and other experimental software first gets seen by the public. It’s currently a standalone AIR application and free to download, but Tom Barclay, Sr. Project Manager of Flash Professional, tells me it might eventually be deployed as an export option in a future version of Flash Professional.

Adobe MAX attendees and followers might remember the Wallaby demo and the general buzz around HTML5 at that event last fall, but I recall it was mostly about Edge, which is actually significantly different. Edge looks much more like a Creative Suite product—I compared it to Flash Catalyst—and it basically lets Flash users work with a Flash-like application and get HTML5 as the output. Wallaby would let Flash users work in Flash Professional itself and still get HTML5. Being that there’s already three Flash Platform applications on the market, I think exporting HTML5 from one of those existing apps is a superior strategy to creating another Flash-like product.


Wallaby’s user interface is plain but the product is still experimental.

I’ve seen Wallaby in action and here’s some technical details:

  • Wallaby’s user interface will list errors and warnings that arise during processing. The UI can also run batches and can be scripted.
  • Sound and video assets are not included in the final output. There’s also quite a few Flash functions that don’t translate to HTML5: dynamic masks, 3D transforms and 3D tweens, filters (except alpha) and blend modes.
  • ActionScript is also discarded, and not translated to JavaScript like I would have hoped. Translating ActionScript to JavaScript would be a huge game-changer but I’m not surprised it hasn’t happened yet.
  • Graphics are converted to SVG (vectors) or JPEGs (bitmaps). Text might be converted to SVG as well, but Wallaby will use standard paragraph HTML tags if possible.
  • Animations are recreated not with JavaScript or a framework like jQuery, but with CSS animations—particularly webkit-transform, which only works in WebKit browsers like Safari and Chrome. Firefox users can modify the code and get CSS animation to work. As usual, Internet Explorer users are out of luck.


A code snippet shows well-formed HTML5 and usable hooks for CSS and scripting.

I’ve seen the HTML5 code that Wallaby outputs and it looks clean and easy to work with after conversion. There’s enough hooks to manipulate the elements with your own JavaScript or a framework like jQuery. Wallaby’s downside is its inability to translate many of Flash’s features into HTML5—animations and advertising are about the only Flash projects that can be cleanly converted to HTML5. Projects that depend on multimedia, ActionScript and complex Flash effects and filters might as well stay in Flash, but of course that prevents it from being seen on iOS devices. But there’s a lot of Flash animations on the web, and those are exactly the elements Wallaby handles well.

BOOK REVIEW: Map Scripting 101

I can hardly remember the dark ages of online maps, back when Mapquest and Yahoo! gave us static images of streets and neighborhoods that could only be printed and later cursed at when their confusing mess got us horribly lost. I suppose it really wasn’t that bad, but it’s hard to recall now that we have had the dynamic map experiences given to us by Google Maps and later Bing, Yahoo! and even Mapquest.

From a web developer’s standpoint, these Ajax-driven map applications have given us the opportunity to embed navigable maps on our clients’ websites. Many developers stop there, with only the vaguest knowledge of a vast API and tools for customizing maps and building apps that leverage geolocation to provide a far more useful experience. Map Scripting 101 by Adam Duvander puts the spotlight on these advanced APIs and proves the tools are out there to make maps do practically anything you want.

Map Scripting 101 focuses on the three major online map websites—Google Maps, Bing and Yahoo!—but a lot of the book employs a particular API called Mapstraction that translates code to be applied to the three map APIs. I came to really like Mapstraction because I can code once and apply it to any of the three map APIs, and it’s also just easy to use. You do need to have some programming expertise to make the most of Map Scripting 101 but the examples are easy to follow for novices as well as advanced coders. (Adam subtitled the book “an example-driven guide” for a reason.)

Map Scripting 101 succeeds at being a really useful book—the examples and exercises are not only easy to follow but return excellent results and really useful apps. If you slog through the rest of the book, the final chapter—”Mashup Projects”—brings all the learning together in really neat projects such as a music event locator map, Twitter tweet geolocator, and a useful weather map. Adam uses all the most useful languages for web developers and designers—HTML, JavaScript, jQuery, PHP and JSON—so many web developers will feel comfortable plugging into the map APIs and building something really useful.

I really enjoyed reading Map Scripting 101 because the exercises were not too difficult or easy, the results were powerful and engaging, and the book illuminates one of the most powerful tools the World Wide Web has given us in the last five years. I can’t think of a better resource for map scripting and development than this book.

Map Scripting 101
Adam Duvander
Published by No Starch Press
US $34.95
Rating: 10/10

BOOK REVIEW: Mining the Social Web

The natural arc many of my clients have followed when it comes to “social media” involve getting:

  1. a presence on Facebook, Twitter and other social websites,
  2. friends and followers of the brand
  3. social interactions on their own websites, such as Like button clicks, and finally
  4. actionable data on everyone to sell them new stuff.

Some clients are further along the arc than others but everyone is looking to that final segment to bring in revenue and make it all worthwhile. (They aren’t making friends on Facebook just because it’s fun!)

Harnessing social data is a tricky proposition because the APIs and methods for capturing this data are still in the formative stages, even though they are maturing quite well. Facebook’s Graph API and embrace of Open Graph offers a lot but privacy, authentication and the changing nature of their API makes developing applications that handle Facebook data a little tricky. Twitter data is easier to access but they have had less time to develop their API and don’t have to worry about privacy much since they are essentially a publishing service.

Matthew Russell‘s Mining the Social Web knows its stuff and covers several social media websites and the data they provide. Some sites are major players, like Facebook, Twitter and LinkedIn; others that are covered, such as the Google Buzz service, are not as well-known and don’t usually come up in social media discussions. It’s amazing when you think about Buzz not being well-known, because every Gmail account includes a Buzz account. And if you’re surprised to see Buzz in a social media book, then consider the chapters on blogs, email and even microformats, which are important to discussions on data but are not considered your typical social media service.

Mining the Social Web is not like other books I’ve reviewed: it’s more for data analysts than developers, though there is a lot of code and development going on in its pages. Matthew’s language of choice is Python, which is intuitive and an easy for all readers to explore but isn’t common for web developers. But I got out of my comfort zone and learned several things from this book, so I recommend it to all readers who need to improve their understanding of data.

One more difficulty 21 Recipes for Mining Twitter and Data Source Handbook. I’m looking forward to reviewing these books to see how they will illustrate the full scope of social media data mining, not just for data but also for development.

Mining the Social Web
Matthew A. Russell
Published by O’Reilly
US $39.99
Rating: 8/10

99 Free Valentine’s Day Fonts

99 Ways to Type I Love You

Download fonts individually below, or download all 99 in a single 2.75MB Zip archive.

NOTE: Fonts are all TrueType format, compatible with Windows and Mac OS X. To convert them for Mac OS 9 and below, download this free utility: TTConverter15.hqx.

images101HangYourHeart.ttf

101HangYourHeart (90,864 bytes)

images101HeartCatcher.ttf

101HeartCatcher (89,400 bytes)

images101HeartFramed.ttf

101HeartFramed (181,972 bytes)

images101HeartStringZ.ttf

101HeartStringZ (33,972 bytes)

images101LoveGarden.ttf

101LoveGarden (32,668 bytes)

images101LovePoP.ttf

101LovePoP (52,912 bytes)

images101SWAK.ttf

101SWAK (140,480 bytes)

images101WalkinHeart.ttf

101WalkinHeart (29,504 bytes)

images4MyLover.ttf

4MyLover (36,072 bytes)

imagesALLHEART.TTF

ALLHEART (48,992 bytes)

imagesAngel.ttf

Angel (33,648 bytes)

imagesAosval_2.ttf

Aosval_2 (16,692 bytes)

imagesApheart.ttf

Apheart (8,436 bytes)

imagesBeMyValentine.ttf

BeMyValentine (85,812 bytes)

imagesCandyHeart.ttf

CandyHeart (80,448 bytes)

imagesCandyKiss.ttf

CandyKiss (43,968 bytes)

imagesCLBValentine.ttf

CLBValentine (49,824 bytes)

imagesCoffeeTalk1.ttf

CoffeeTalk1 (34,488 bytes)

imagesCountryHearts.ttf

CountryHearts (51,888 bytes)

imagesCraftopiaLove.ttf

CraftopiaLove (26,884 bytes)

imagesCupid.ttf

Cupid (45,460 bytes)

imagesCupids.ttf

Cupids (109,132 bytes)

imagesDeepLove1.ttf

DeepLove1 (138,688 bytes)

imagesDJLove.ttf

DJLove (42,536 bytes)

imagesFancyHeartScript.ttf

FancyHeartScript (68,436 bytes)

imagesFiolexGirls.ttf

FiolexGirls (78,228 bytes)

imagesFLHeartDark.ttf

FLHeartDark (100,696 bytes)

imagesFlowerHeart.ttf

FlowerHeart (77,140 bytes)

imagesfts12.ttf

fts12 (51,068 bytes)

imagesGabrielsAngels.ttf

GabrielsAngels (195,720 bytes)

imagesHAfont.ttf

HAfont (217,084 bytes)

imageshamlake.ttf

hamlake (87,876 bytes)

imagesHamLakeRegular.ttf

HamLakeRegular (37,396 bytes)

BOOK REVIEW: Two iOS App Books

This review covers two books on iPhone and iOS development: Visual Quickstart Guide: Objective-C by Steven Holzner and iPhone App Development: The Missing Manual by Craig Hockenberry. Ironically, the iPhone App Development book was published just after the release of the iPad and nowadays we call this iOS development after the operating system these devices use. This also includes the iPod Touch.

Visual Quickstart Guide: Objective-C, like most Visual Quickstart books, offers a solid introduction to the topic and many exercises to get readers familiar with the programming language. Objective-C is the native language for writing iOS applications and for awhile Apple would not accept apps written with other languages and cross-compiled to Objective-C. This has since changed but many developers believe coding with the native language makes for a better application.

The Visual Quickstart Guide teaches the basic elements of Objective-C but it doesn’t address every aspect of the language. Readers who are new to object-oriented programming will benefit more from this book, which teaches the concept and its implications in iOS development. Experienced developers who know OOP or similar languages like ActionScript 3 can learn a few things from the book but I think there are better resources out there.

The Missing Manual sets itself apart by offering beginning-to-end training for iOS development—everything from installing Xcode to selling apps from the Apple App Store. I really like this aspect of the book, and developers who want to make money with their products will find this very useful. I think there’s less emphasis on Objective-C but part of that is because Craig uses Apple’s developer tools like the Interface Builder to create the applications demonstrated in the book. The obvious downside to this is the fact that Apple’s developer tools are available only on Mac OS X computers—Windows users are out of luck, even though iOS devices are marketed to them too.

Both books are good buys, and as with most things each one offers something a little different. Objective-C is a solid introduction to the language and green developer would find it very useful. The Missing Manual is a more complete resource for iOS development and is written for the entrepreneurial developer who wants to sell apps as much as develop them.

Visual Quickstart Guide: Objective-C
Steven Holzner
Published by Peachpit Press
US $29.99
Rating: 8/10

iPhone App Development: The Missing Manual
Craig Hockenberry
Published by O’Reilly
US $39.99
Rating: 9/10

Adobe MAX: Android, AIR, Edge, HTML5 and jQuery

Adobe MAX provided several news items and inspiring developments, but of course some of it is out in the wild now while others are only in the rough stages. Here are my impressions of several announcements made by Adobe at MAX.

Android and AIR

The strong penetration of the mobile marketplace by Android proves that Adobe was wise to develop for that operating system. Adobe announced AIR 2.5, which supports Android as well as Apple’s iOS and BlackBerry Tablet OS, and this really sets them apart as a platform-inclusive service provider. A more comprehensive news article on this can be found here.

AIR 2.5 is available today, as is the BlackBerry Tablet OS SDK. I can’t tell yet if AIR 2.5 will boast strong performance, but it’s important that it does. Since Apple banned Flash from iOS, some people have said online that Flash is a buggy and cumbersome technology that should be eliminated everywhere. I don’t see that myself, but if AIR 2.5 runs the same way then it will get the same criticisms.

The Edge prototype and HTML5

One of the most interesting early sneak peeks for me happened in the first keynote, when a prototype application codenamed “Edge” was demoed. Basically, Edge converts simple timeline-based animation to HTML5. A good demo can be found here on Adobe TV. Adobe also demoed a rough Flash-to-HTML5 export in its sneak peeks.

It’s important to notice Edge is not Flash: its focus on transitions and animation looks a lot like Flash Catalyst, which can produce Flash content but is not as robust as Flash Pro. My review of Flash Catalyst CS5 is here. I see Edge being rolled into Flash Catalyst at some point, perhaps as an HTML5 export feature in Flash Catalyst CS6. It performed well but, like Flash Catalyst, Edge only produces a subset of the what’s possible in Flash.

Again, Adobe is wise to push hard to get its content production tools on all platforms. Flash Player is still ubiquitous—CTO Kevin Lynch reported Flash Player 10.1 has the best market penetration ever seen with Flash Player—but the design community has its eyes on HTML5 as the next standard and device and software manufacturers need to follow their lead, whether or not it’s the best option for developers and consumers. I think it’s ironic some people criticize Adobe for sticking with the Flash Platform, while the things they demoed at MAX revolved around the adoption of HTML5 as an alternative.

jQuery

John Resig, the creator of the popular jQuery framework, sat in on one of the keynotes as Adobe touted some internal development happening with jQuery and jQuery Mobile, the latter of which is still in the alpha stages. There was some vague allusions to how Dreamweaver might integrate with jQuery in the future, and if that’s the case I would be curious how it combines with—or replaces—the Spry framework Dreamweaver already has. But details were scarce and there’s not a lot to report on this front.

Conclusion

I think that compared to last year’s MAX, this year touched on more platforms and runtimes. This is a response to the fragmentation of the developer marketplace due to HTML5 penetration and also the number of mobile operating systems coming out all at once.

This could be a great thing for future development but I personally worry that developing for iOS, Android, BlackBerry and HTML5—and possibly XHTML—will get us away from the standards-based mindset that has worked well in the web design community. The idea of “write once, publish everywhere” may still be possible, but it’s hard to see how it will work in practice.