All posts tagged ‘Dreamweaver’

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

Adobe Adds HTML5 Creation Tools to Dreamweaver

Dreamweaver CS5

SAN FRANCISCO — Adobe will begin shipping a package of HTML5 web design tools for Dreamweaver, the company says.

The HTML5 Pack for Dreamweaver will available for download on Adobe Labs some time on Wednesday. It will be a free download for anyone who owns Dreamweaver Creative Suite 5, and Adobe will roll it into an automatic update for Dreamweaver once the add-on pack has been thoroughly tested.

The add-on pack gives Dreamweaver CS5 the ability to provide code hints for HTML5 elements and CSS3 styles when building pages in the text-based Code View window. Adobe is also adding a few starter layouts for people building HTML5 pages from scratch. More layouts will be added later.

Dreamweaver’s Live View mode — which uses the same WebKit rendering engine as Safari and the Android browser to preview web pages — is also getting an update. The Live View window will now be able to render pages built with HTML5 and CSS3, so developers coding native video and audio playback to their pages will be able to preview those pages in Dreamweaver.

The announcement was made during the Google I/O, the developer conference taking place here this week. Adobe CTO Kevin Lynch spoke as part of the morning keynote at I/O. Lynch hinted at this release earlier in May when he appeared at the Web 2.0 Expo developer conference and announced that Adobe would soon be shipping more tools for HTML5 content creation.

The release comes soon after Apple began encouraging developers to create web apps in HTML5 rather than rely on Adobe’s Flash Player to deliver videos, audio clips and animations. Apple’s iPad and iPhone famously don’t support Flash, so Adobe’s push towards giving designers new tools for building HTML5 web apps will help the company maintain its foothold on a web where Flash is becoming less attractive.

Dreamweaver Creative Suite 5 was released this spring. But it’s one of the oldest WYSIWYG web editors out there, and any web developer with knowledge of HTML5 and CSS3 has had the ability to use Dreamweaver’s Code View to build pages using the emerging standards for years. These new tools make the workflow easier though, allowing developers to take advantage of Dreamweaver’s helpful code hinting and to preview changes right inside the app, instead of uploading the files to the web to view their changes in a browser.

Lynch demonstrated a couple of other things, too. He showed how you can make a rich advertisement in Dreamweaver using CSS3 transforms and HTML5 animations. This will be especially handy for anyone wanting to create an ad for Apple’s iAd platform, which will be totally HTML5-based.

Also added to Dreamweaver in the HTML5 pack is a tool that lets you see what your pages will look like on multiple devices with different size screens all at once. It’s a preview pane with several windows — one for a desktop browser, one for mobiles, one for a tablet and so on. The preview tool uses dynamic stylesheet swapping, so you see your layout change instantly based on which device you’re viewing it on.

Of course, that’s extremely useful for anyone creating a website that’s going to be deployed on mobiles and iPads. Oh yes, and Android tablets — whenever they show up.

See Also:

File Under: Programming, Software

Dreamweaver CS5 First Look: More WordPressy, More Firebuggy

Dreamweaver CS5

There’s a new version of Adobe Dreamweaver on the way, and it includes new features for building sites with WordPress, new CSS enhancements and a new set of tools that let you see code changes in real time as you work, much like the popular Firebug add-on.

Adobe announced details about its latest Creative Suite bundle of applications on Monday morning. Creative Suite 5 is Adobe’s new package of apps for building websites, assembling videos and editing photos. We have a first look at Flash CS5 here on Webmonkey, and we have a first look at the new Photoshop on Wired.com’s Gadget Lab.

Dreamweaver, which has been one of the most popular apps for developing websites since its debut (as a Macromedia creation) in 1998, gets a fairly substantial update in Creative Suite 5. It doesn’t have the whiz-bang new features found in Photoshop CS5, but if Dreamweaver is part of your development workflow, you’ll definitely find much to appreciate in the new Dreamweaver CS5 that makes it worth an upgrade.

Of course, whether or not to use a WYSIWYG editor like Dreamweaver is a debate in itself. Most can get by with a text editor, a few browsers and a short stack of reference materials. But if you’re working with a team of developers, or if you’re building more complicated sites with dynamic elements, databases and hundreds of pages, tools like Dreamweaver are essential. They speed up the workflow, keep everything organized and ease the pain of constant testing and iteration.

So, if Dreamweaver has a place in your life, here’s a rundown of what’s new in the latest version.

Continue Reading “Dreamweaver CS5 First Look: More WordPressy, More Firebuggy” »