Archive for the ‘Software’ Category

Video: Inventing on Principle

We just had a moment similar to the time we first saw content-aware scaling in action, but this time it’s even better — we’ve seen the future of programming tools and it looks awesome.

Check out the video above of Bret Victor‘s recent talk, “Inventing on Principle.” Victor has worked on experimental UI concepts at Apple and also created the interactive data graphics for Al Gore’s book, Our Choice. The video above of Victor’s keynote at the Canadian University Software Engineering Conference, captures a wonderful talk on living your life based on principles, but for many developers what’s most arresting are the software development tools demoed.

Do your current tools suddenly feel incredibly outdated? Perhaps you thought you were using a well-tuned coding machine but suddenly realize you’re really just hitting two stones together? Thought so. Sadly, the apps demoed in the video aren’t available. That’s all right, though; it just means someone needs to build them. Be sure to let us know if you do.

File Under: Software

Review: Lightroom 4 Beta Offers Subtle, but Worthwhile Improvements

Lightroom 4 beta

Adobe has released the first public beta of what will become Photoshop Lightroom 4, a subtle but important upgrade for Adobe’s Camera Raw image editor. This release sees Adobe primarily focused on improving the Lightroom interface, particularly the core Develop Module which offers a revamped, more intuitive set of image controls.

Lightroom 4 beta is a free download available from the Adobe Labs website, but do keep in mind that this is beta software intended for testing. Be sure to use duplicates of images that have been backed up elsewhere when testing Lightroom 4.

While many of Lightroom 4′s upgrades are subtle tweaks there are some bigger changes as well, including two new modules — a new Map Module for adding and storing geodata and a Book Module for designing and printing books.

The new Map Module requires an internet connection and uses Google Maps to show satellite, hybrid and other Google Maps views. You can drag and drop images from the film strip onto the map and Lightroom will add the geodata to the image. Naturally, while that works it’s rather tedious for large imports. Those with thousands of images to add will be happy to know that Lightroom supports so-called track logs. For example, if you use a mobile app to log your image locations, Lightroom can read the data (provided the app can export it) and then attach it to your images. If your camera records geodata directly, Lightroom will use that info. Once you have the geodata added you can search images by location or browse through them using the map.

LR4 Map Module

Along with the geodata comes some new privacy settings for your images, including an option to ignore any geographic data Lightroom might find.

The other entirely new menu item in Lightroom 4 is the Book Module which does exactly what you think it does — helps you layout and typeset a book for printing. The Book Module works much like what you’d find in other software and online services: Select your images, choose from a number of templates and then start customizing. The difference with Lightroom is the level of customization possible, which includes everything from layouts to fonts to even the leading and kerning applied to fonts. Actual book printing is handled through Blurb.com (or you can export a PDF to print on your own).

Creating books in Lightroom 4

Another notable new feature worth mentioning before we dive into the revamped Develop Module is that Lightroom 4 includes much improved support for HD videos. While Lightroom 3 can import and store videos, it can’t edit or even play them back. Lightroom 4 steps up the video support. Playback is handled by some components borrowed from Adobe Premiere and Lightroom itself treats the movies as just another image. That means you can adjust levels and make basic tweaks to your video directly in Lightroom 4 using most of the tools in the Quick Develop panel (except for Crop, Highlights, Shadows and Clarity, which are disabled for video). The editing tools are obviously nowhere near as powerful as what you’ll find in dedicated video editors, but it will work for serious photographers who occasionally dabble in video.

The Develop Module

The Develop Module is the heart of Lightroom and it’s where most of the refinements in Lightroom 4 have happened. At first glance the Develop Module looks about the same, but the basic development tools have been considerably reworked. Instead of the somewhat obscure tone sliders like Recovery, Fill Light and Brightness, Lightroom 4 has been reorganized to Highlights, Shadows, Whites and Blacks. Each slider controls exactly what its name suggests.

Adobe has also changed the sliders so that all of the tone adjustments default to the middle. Drag the slider left and whichever effect you’re using gets darker; drag it to the right and it gets lighter. It’s a small change, but it makes adjusting images more intuitive and also makes it easier to get back to where you started.

The basic panel in the Develop Module. The old, LR3 is on the left, the new LR4 beta on the right

Of course while the new controls may be more intuitive and somewhat easier to use that’s really only an improvement if they’re capable of producing the same or better results. After testing them on a variety of images over the course of a few days it’s clear that the new tools are an improvement, though there’s definitely a learning curve to perfecting them. (Hint: apply your adjusts in order, from top to bottom.) And sometimes the loss of the Brightness slider is annoying. Despite Adobe’s assurances that Exposure covers the same ground as Brightness used to, sometimes it doesn’t look that way.

The new Highlights and Shadows sliders essentially do the work of the old Recovery and Fill Light sliders, respectively. In most situations the Highlights and Shadows sliders work much better than their predecessors. Highlights in particular is more useful than Recovery and actually lightens or darkens all of an image’s highlights, rather than washing out the middle highlights in kind of neutral gray color the way Recovery often did. (This is particularly noticeable in images with snow, clouds, concrete or any other situation with a wide but subtle range of highlight tones.)

Where Highlights is more powerful than Recovery was, Shadows seems more restrained than Fill Light. Indeed in some images I tested it was hard to tell any effect at all with the Shadows adjustment until it was paired with the Blacks slider. However, the subtleness of Shadows makes it perfect for adjusting shadows in darker images where more subtly is called for. If you’re just looking to create greater contrast look to the Blacks or Contrast adjustments.

In the end Highlights and Shadows are not intended to be one-to-one replacements for Recovery and Fill Light; they’re similar, but different enough that it takes some practice to get comfortable with them. However, after practicing for a few days I found that I was able to produce better results than I had on the same images using Lightroom 3.

[Note that should you export some images from Lightroom 3 to test in Lightroom 4, you may not see the new sliders in the Develop Module. Instead you'll see a small exclamation point icon at the bottom right corner of the image window. Click that icon and Lightroom will offer to upgrade your images to the "current process." Once you've converted the images the new adjustment tools will appear.]

RGB Channel adjustments

Lightroom 4′s Develop Module also offers better local adjustment tools, making it easier to apply adjustments to only select parts of images. For example, graduated filters can now apply effects like noise reduction and moire. Both of those new filters are also available via the brush tool so you can brush noise reduction into, say, only the shadow areas of your image. Similar local adjustments can be made using the new Highlights and Shadows as well as the Blacks and Whites.

There are a number of other changes in the development panel — for example, the algorithms behind the Clarity slider have been updated to reduce halos — but perhaps the most interesting small change is the ability to make Point Curve edits to individual RGB channels. Previously this sort of fine-grained tweaking necessitated a trip to Photoshop (or similar), but now you can tweak your RGB channels right in Lightroom.

Other Improvements

There are a number of small but welcome changes in Lightroom 4 that solve some “paper cut” problems in previous releases. For example Lightroom 4 now has an option to e-mail a photo. Strange that it took four revisions to get something so simple in, but it’s there now. Another nice new change is the ability to hide the main menu items you don’t need. Outside of verifying that it works for review purposes I’ve never used Lightroom’s Web Module, so now I can stop it from taking up screen real estate — handy considering that with the Book and Map menu items the menu is occupying more space than ever.

Under the hood Adobe has made some changes to the DNG format which will affect anyone who is converting Camera RAW images to DNG format. The most significant change for Lightroom is something Adobe calls fast load data. Fast load data lets Adobe apps display images faster using just the core data, without waiting for the entire set of image data to load. Adobe claims that images using fast load load up to eight times faster. If you’re worried about backward- or cross-compatibility with other apps Adobe assures me that apps that don’t understand fast load will still be able to process those images. The new fast load feature is enabled by default.

The second change to the DNG format is the addition of a lossy compression option. Given that part of the appeal of DNG (and more generally, Camera Raw) format is that it preserves all your data it’s hard to see why anyone would want lossy compression in DNG, but it’s there if you do. (The new lossy compression option is, thankfully, disabled by default.)

Conclusion

The Lightroom 4 beta sees Adobe playing a bit of catch-up — tools like the Map and Book modules have been available in competitor Aperture for some time — but also focusing on improving the core of Lightroom, the Develop Module. It might take a day or two to wrap your head around the changes in the revamped tone adjustment tools, but once you do you won’t want to go back. Indeed that’s the biggest problem with this beta release — it’s a beta and, much as you might like to, I wouldn’t suggest using it with your actual images yet. However, Adobe tells Wired.com that the Lightroom 4 beta period will likely be somewhat shorter than the rather long Lightroom 3 beta test.

Of course, given that, at least on the surface, Lightroom 4 looks like less of an upgrade than the move from Lightroom 2 to 3, it’s worth asking whether or not Lightroom 4 will be worth the price. The answer will depend on your image workflow and whether the new adjustment tools help you develop better images. For that reason I would suggest trying the beta now and spending some time with it before the final (paid) release rolls around later this year. Keep in mind though that this is an early beta and, if past beta release are any indication, Adobe may well add some more features before Lightroom 4 is finalized.

Relaunch Your OS Nostalgia With ‘The Restart Page’

Are you sure you want to restart?

The Restart Page is a web-based recreation of all the startup screens you’ve ever been forced to sit through, twiddling your thumbs while you waited for the operating system to launch. The site is nothing more than the restart sounds and splash screens for a dozen or so operating systems, but it’s much more than that as well — an exercise in operating system nostalgia, if you will.

If you’d like to experience the joys of restarting OS 2, classic Mac OS, Windows 1 or even Amiga Workbench, head on over to The Restart Page (which naturally will load and then abruptly reload). The Restart Page was created and designed by Soon In Tokyo and built by the developers at Rehab Studio.

If you journey through the various restarts in chronological order one thing that jumps out is how much less information newer startup screens offer — a simple progress bar or spinner has replaced the detailed messages and loading icons found in older systems. In many cases holding down a key at startup will display a more detailed screen, but it’s almost never the default these days.) While we’ve no desire to return to the good (bad?) old days there is something about the slow march of system extension icons across the Mac OS 8 splash screen that’s oddly satisfying, even when it’s simulated.

File Under: Software

Happy Birthday Vim, The Venerable Text Editor Turns 20

Twenty years ago today Bram Moolenaar unleashed Vim on the world and text editing was never the same again. Short for vi iMproved, Vim was originally written as a vi clone for the Amiga and then soon spread to just about every computing platform known to man.

Our friends over at Ars Technica have a great retrospective of Vim, including the history of Vim, vi and a nice overview of what makes Vim so powerful. Even if you’ve never used vi or Vim, you’re enjoying some of their legacy every time you use the h, j, k, and l keys for directional navigation on sites like Gmail, Google Reader and more.

If you’ve never used Vim before and would like to know what makes it different (that’s polite Vim-speak for better) than your current editor of choice, head on over to OpenVim, which has a great online interactive tutorial explaining Vim’s various editing modes and how to get started.

If you’d like to try Vim online, check out knowvim, a Javascript implementation of Vim that you can use right in your browser. If you decide to dive in and teach yourself Vim, be sure to watch Derek Wyatt’s fabulous series of screencasts: Vim novice tutorials.

I’m not going to lie to you, the learning curve for Vim is long and steep. I gave up several times before Vim finally sank in, but once you pass a certain point and Vim begins to make sense, there’s no going back.

[Written, like all Webmonkey posts, in Vim, natch.]

See Also:

File Under: Software

Review: Dreamweaver and Flash Updates Deliver Mobile Dev Tools

Adobe has released updates for several of its Creative Suite applications, including Dreamweaver and Flash. The new Creative Suite 5.5 adds some new tools designed to target tablets and mobile devices, as well as improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web development app.

Creative Suite 5.5 Web Premium is $1,800. For those already using CS 5 Web Premium, upgrades are $400. Adobe has kicked off a new subscription-based pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a one year contract.

What’s New

Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers. That means the Dreamweaver Live Preview and Multiscreen Preview features will mirror what you’ll see later in the browser.

Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your CSS so that your site looks nice on any screen.

Combining the Multiscreen Preview with Dreamweaver’s new @media support means the app is considerably more adept at responsive design — that is, making sure that your site looks good regardless of what device it happens to be viewed on.

Multiscreen Preview in Dreamweaver 5.5 (click for larger image)

This release improves Dreamweaver’s ability to work with content management systems like WordPress, Joomla and Drupal. The Dynamically Related Files feature provides direct access to any page’s related files, for example, any php files used to render the current URL. While it’s a nice feature, it won’t help those of you working with lower level frameworks like Rails or Django.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

Among the smaller, but nice to see, additions to Dreamweaver 5.5 are support for HTML5 tags in the code hinting. You’ll also find new options to use the HTML5 doctype and more code hinting for CSS3 selectors and attributes.

Flash CS 5.5 also hops on the multi-screen bandwagon with new features to scale objects in the timeline, shared asset libraries and new publishing options for a variety of platforms — Android and iOS as well as traditional Flash movies.

The new content resizing options are especially nice and work a bit more like what you’ll find in other Adobe apps, such as Photoshop. Simply select the content you’d like to resize and either drag, or enter specific dimensions in the dialog box.

Improved resizing tools in Flash 5.5 (click for larger image)

The emphasis on mobile carries over to the new code snippet options as well. Snippets are little chunks of Actionscript designed to handle common events without forcing you to write everything out by hand. Previous versions of Flash include options like button events or data handlers. Flash CS 5.5 adds about 20 new snippets that target mobile devices — gestures, finger events, swiping and so on. Applying snippets is also easier thanks to a new floating panel display that previews code snippets and then allows you to drag and drop the code onto an object on your stage.

Verdict

There are some great new features in both Dreamweaver and Flash, but whether or not either is worth the upgrade depends on what you do with the apps. For designers this is a less compelling upgrade. There are few new tools, but the emphasis in both apps’ new features is clearly on developers working with code, particularly those coding for mobile devices.

At $400 just for the upgrade from CS 5, CS 5.5 is a lot of money for what you get. It’s a much better deal if you’re still using CS 4 or older versions, but it almost seems as if Adobe is using this upgrade mainly to push its new subscription-based sales model.

Scott Fegette, Senior Product Manager at Adobe, says that the company is moving to “a 24 month major release cycle, with interim updates.” Since this is one of those interim updates and will still set you back $400, the subscription model begins to look more appealing. Especially given that with subscriptions updates are automatic — new features are added as the are developed — there’s no waiting for a big release date.

See Also:

File Under: HTML5, Mobile, Programming, Software

Adobe Takes On Mobile World With Creative Suite 5.5

Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe’s flagship web-development app.

Creative Suite 5.5 Web Premium will be available one month from today for $1,800. For those already using CS 5 Web Premium, upgrades will be $400. Adobe has also unveiled a new subscription pricing model, with Web Premium going for $130 per month, or $90 per month if you commit to a year contract.

The CS 5.5 release is unusual for Adobe, which typically releases only full-point upgrades for its Creative Suite. This time around not every application in the Creative Suite has been updated, which explains the .5 upgrade number. In those apps that have been updated, the new features almost exclusively revolve around mobile and tablet development.

For example, Photoshop gains a new Touch SDK that allows tablets and other devices to interact with Photoshop, but there are almost no new features in the app itself. Dreamweaver on the other hand does see some new features, including more support for web standards and better development tools for building mobile web apps.

Dreamweaver 5.5 adds several new HTML5 and CSS3 tools to the mix, including a newer version of the WebKit rendering engine, which Dreamweaver uses for live previews. Dreamweaver’s WebKit renderer is now up to par with what you’ll find in the latest release of Chrome, Safari and most mobile web browsers.

Dreamweaver has added some HTML5 love to its “starter templates,” some of which now use HTML5′s semantic tags to layout your content. For example, there’s a new template built with aside for sidebars and article for blog posts. You’ll also find new options to use the HTML5 doctype and code hinting for all the new HTML5 tags. Similar code hinting is available for CSS3 selectors and attributes.

The Dreamweaver team has also embraced what’s fast becoming the tool of the moment for savvy web developers — CSS3′s @media queries. Media queries make it easy to serve up different site designs based on the screen width of the current browser. (See our earlier write-up for more on using @media.)

Dreamweaver added the Multiscreen Preview panel in an earlier update, but the latest release is considerably more polished. The Multiscreen Preview panel shows your site design in desktop, phone, and tablet screen sizes, and makes it easy to tweak your cascading stylesheets so that your site looks nice on any screen.

The updated Dreamweaver 5.5 even turns to some outside tools to offer even more options for those targeting the small-screen world of mobile devices: Both jQuery Mobile and PhoneGap have been integrated into this release. JQuery Mobile makes it easy to add touch-based events and other mobile tricks to your site, while PhoneGap can convert your HTML, CSS and JavaScript into native mobile apps for Android and iOS. Keep in mind that both of these outside frameworks are pre-1.0 releases, and jQuery Mobile in particular is still an alpha release, so use with caution.

Also worth noting, Adobe has released Flash Pro 5.5 which is primarily geared to those hoping to write mobile apps for Android and iOS without delving into separate native SDKs.

For more info on everything that’s new in Web Premium, check out Adobe’s series of videos (Flash, natch) on the new features.

See Also:

File Under: HTML5, Software

Export Adobe Illustrator Drawings and Animations to HTML5

There’s a new conversion tool for fans of Adobe’s popular Illustrator desktop publishing app that lets developers export their vector drawings and animations as HTML5 code that runs natively in the latest web browsers.

The new tool is called Ai>Canvas, and it does exactly what the name implies. You can take any vector illustrations you’ve made in Adobe Illustrator and export them as 2D graphics that can be drawn on web pages using the HTML5 Canvas element. It can even animate your drawings.

The plug-in can handle gradients and transparencies, complex pattern fills, drop shadows, complex line styles and text, exporting everything as HTML5 Canvas code. In cases where your illustration contains something that can’t be done in Canvas (like an opacity mask) the plug-in rasterizes that bit and positions it properly.

The plug-in also supports commands for animation. You can add rotation, object scaling, fades, and movement along a path. All of your parameters are defined inside Illustrator, but when you export to HTML5, you can tweak the resulting web code to fine-tune the results. You can also add interactions, like sounds, or click events.

The plug-in works in Illustrator for Creative Suite versions 5, 4 and 3. There are versions for Windows and Mac OS X.

Oddly, it doesn’t come directly from Adobe. It’s a product of Microsoft’s Mix Labs, an initiative the company has set up to experiment with open web technologies. Microsoft has taken a larger interest in open web standards ever since work began on building in support for HTML5 and advanced web technologies into Internet Explorer. The next version, IE9, is already in beta, with the final version due some time next year.

The creator of the plug-in, Microsoft developer and platform evangelist Mike Swanson, is also the author of the XAML exporter for Illustrator. He got interested in HTML5 and Canvas after a passionate conversation about the technology with his co-worker, Thomas Lewis. You can read the whole story — and see some of his working examples and test files — on Swanson’s blog. Lewis has written his own post, as well.

Adobe Labs recently released an SVG pack for Illustrator which can export drawings as SVG that run in browsers that support the format. But this new Ai>Canvas exporter uses HTML5 Canvas, which is quickly becoming widely adopted by developers working on games and virtual worlds that run in the browser. Check out the Asteroids and Rumpetroll experiments for some cool Canvas work.

See also:

File Under: Software, Web Services

Using the New Features in Adobe BrowserLab

BrowserLabThe following tutorial comes to us courtesy of Adobe. The company introduced some new enhancements to its BrowserLab service last week to improve its cross-browser testing abilities, and this is an overview of how to use some of these enhancements.

We told you about BrowserLab here on Webmonkey when it first showed up as part of Dreamweaver CS5 in April. It’s a hosted service that lets web developers preview their work across multiple browsers and operating systems in a single environment. Since it’s a hosted service, Adobe can update the backend with the latest code from all the popular browser engines as they’re updated in the real world.

It integrates fully with Creative Suite 5, so if you’re using Dreamweaver, you can launch BrowserLab previews at any point in your workflow and test your live code against all the major browsers.

Adobe may eventually turn BrowserLab into a paid service (the cost will likely be between $200-300 per year), but if you sign up for access before April 30, 2011, you can secure an account for a full year at no charge. All you need is an Adobe ID login, which is free.

The new features of the include a BrowserLab add-on for Firebug and the ability to smart-align screenshots. There are also some further integrations with Creative Suite 5. To walk us through using these new features, Webmonkey has collaborated with Scott Fegette, a technical product manager for Dreamweaver and BrowserLab.

So, take it away, Scott.
Continue Reading “Using the New Features in Adobe BrowserLab” »

File Under: Browsers, Software

Page Speed Add-on Headed to Chrome

One of the most useful browser extensions for web development is coming to Chrome.

Google is working on a Chrome version of its Page Speed add-on. Page Speed is an essential tool for testing sites in Firefox. It breaks down all the stuff on your page and shows you how long everything is taking to download, execute and render. It’s also fully open source and it has its own SDK.

Matthew D. Steele, one of the key engineers at Google responsible for Page Speed, has confirmed that a Chrome version is “already in the works,” and will be ready within a couple of months.

Page Speed currently runs inside of Firebug on Firefox, and there is already Firebug Lite for Chrome. There’s no word yet on whether Page Speed will remain dependent on Firebug (Lite) once it moves into Chrome, or if it will be a stand-alone add-on, but we’ll find out more details soon. In the meantime, if you have an answer to that mystery, let us know in the comments.

If you are curious about using Page Speed to speed up your website, check out Scott’s recent post on using Page Speed and YSlow together.

See Also:

File Under: Software, Web Apps

Meet WebMatrix, Microsoft’s New Suite For Painless Web Development

Microsoft has unveiled a new all-in-one web development suite called WebMatrix.

It’s more than an IDE or a framework, it’s a whole suite — a web server, a SQL database, and a database-ready framework, all wrapped up into a single development environment that makes it easy to build, test and deploy some fairly complex web apps.

WebMatrix is free, and it’s available for Windows users as a beta download.

The new suite is especially geared towards developers building web apps that require local data storage. It’s pretty flexible, and you can also use it to build simple websites, then scale up to something mid-weight or incorporate a full-scale app that you could run a business on top of.

The WebMatrix suite is made up of three components: the lightweight Windows-based web server called IIS Express, SQL Server Compact Edition, a simple database server, and Razor, a new templating language based on ASP.NET. The beta version you can download today actually doesn’t have Razor, but it will be included in a future release “later this month,” according to Microsoft.

The three key technologies were previously announced by Scott Guthrie, Microsoft’s VP of its Developer Division. Now, with the launch of WebMatrix, Guthrie has introduced a few new components.

Continue Reading “Meet WebMatrix, Microsoft’s New Suite For Painless Web Development” »