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