Archive for the ‘Software’ Category

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: