Expression Web 3: what’s in it for ME?

Chris Leeds

Mar. 02, 10 · Interview

Like (0)

Save

19.36K Views

When users evaluate a piece of software they often look at the user interface, the capabilities, how efficiently the software runs on their system, and a host of other criteria. Regardless of what the individual user’s points of interest are, the end goal of the evaluation is to answer a simple question: What’s in it for me?

Expression Web 3 has a lot in it for a many different user types; from professional UI designers working as part of a team, to lone Webmasters working directly for their clients, and even hobbyists moving from FrontPage.

In this DZone article, we will focus on the higher level functionality and features most often desired by professional users who are often familiar with serious IDE environments like Visual Studio, Eclipse, and others.

What’s New in Expression Web 3

The latest version of Microsoft Expression Web is the third iteration of Microsoft Expression Studio’s Web authoring application. Some of the notable new features include:

FTP

Publishing your site with FTP is faster than ever. Expression Web 3 automatically transfers several files at a time, instead of transferring them one by one, and it transfers them faster. New publishing capabilities enable you to publish your files over a secure FTP connection, using FTPS or SFTP. In the past designers and developers would often use the core application to work on their sites and pages and necessarily move to a dedicated FTP application for publishing. That cumbersome workflow is no longer necessary as the FTP capabilities are on par or better than other stand-alone publishing applications. The ability to handle publishing from within the application that you use to design and develop with is much more efficient, saves time and prevents headaches which tend to crop up when you’re forced to use multiple applications to do your work. Expression Web 3 provides six different publishing methods:

FTP
SFTP
FTPS
HTTP (WebDAV and FrontPage Server Extensions)
File System.

Since this is a very important component of what makes Expression Web 3 so attractive to designers and developers see an expanded walk-through later in this article.

What’s in it for you: speed, security, the efficiency of being able to stay within the design/development application and not having to launch third party applications for publishing.

SuperPreview

SuperPreview is a very unique application; it installs and integrates tightly with Expression Web 3. With it, users can compare a page in multiple browsers simultaneously. These browsers can be different versions of Internet Explorer, or a combination of Internet Explorer and non-Microsoft browsers such as Firefox and so on. The user can compare the browser rendering side by side or as “onion skin” layovers to help deduce which elements of their pages are matching up and which need to be addressed. SuperPreview provides tools to sort through the Document Object Model (DOM) which helps to drill into certain areas of interest, highlighting both the display view and the code view. If the user is debugging or verifying cross-browser compatibility with a dynamic page such as ASP.NET or PHP, SuperPreview comes into play after the page is seamlessly rendered by the Expression Development Server.

What’s in it for you: Speed, accuracy, and ease of cross browser compatibility modification or verification.

The Snapshot Panel

In the Snapshot panel, you can see how your page renders in the browser of your choice, right inside Expression Web. And, just like other panels, you can move it and dock it wherever you like on any monitor you’re using. If you consider SuperPreview as a tool to use after you’ve done design/development work you can consider the Snapshot panel to be analogous to that, but which you’d use during your design/development work. There’s no need to refresh the Snapshot panel as you save your page in the editor. With each save, the Snapshot panel is refreshed and the page is re-rendered automatically.

As a designer, I usually work in Split View, but considering the work surface when using code view and the Snapshot panel, this is a great solution for some situations.

What’s in it for you: Efficiency of previewing your page during the design and development process which will save you time and effort in debugging and cross-browser compatibility work at the end of the design process.

Silverlight

Silverlight is a cross-browser, cross–platform plug-in for delivering rich interactive applications for the web. Expression Web 3 enables users to easily add Silverlight applications to their pages from the Insert menu. Since Expression Encoder is now included with Expression Web a user can use it to convert video to Silverlight, choose a "skin" to customize how the video player appears, and add it to their page, all from the Insert menu. This is a very powerful feature because the whole process takes place with little user input yet results in impressive and highly professional results.

New Silverlight/Expression Web integration also includes adding Seadragon Ajax and Deep Zoom Composer images to their page in Expression Web from a composition created in Deep Zoom Composer.

What’s in it for you: Very high-end and highly efficient delivery of video and multi-media without jumping from application to application and without having to learn a whole new way to work.

Getting Expression Web 3

Expression Web 3 is available as part of the Expression Studio 3 suite of tools or as a stand-alone application. Expression Web 3 now includes SuperPreview, Expression Design 3, and Expression Encoder 3.

As a stand-alone application Expression Web 3 is available as an upgrade which requires a licensed copy any Microsoft Expression product, any Adobe Creative Suite product, Microsoft Visual Studio 2005 or later, or a stand-alone “non-upgrade” purchase.

Expression Web 3 and all of the products in Expression Studio are available as 60 day trial downloads available here.

More generously though, Microsoft has seen fit to include Expression Studio (and other applications) free of charge to students through the DreamSpark Program, to Web Pros through the Website Spark Program and a number of other programs aimed at providing would be users with an economical entry point into the Microsoft IDE world.

What’s in it for you: free or very reasonably priced software that contains features not found in any other product.

User Interface 101

This latest version of Expression Web brings with it significant changes to the user interface. Besides some menu item location changes, most of which have moved from the File menu on the Common toolbar to the Site menu, some significant UI changes also include the Snapshot Panel, and the Publishing Panel. All of the user interface panels now have an auto-hide feature so that panels you don’t use all the time don’t waste your workspace real-estate.

What’s in it for you: The ability to customize your work surface to your liking depending on the job at hand. Considering the variety of work that users do within Expression Web this is a big boost to user comfort level.

Keyboard Shortcuts

This following is an abbreviated sampling of keyboard shortcuts.

Click here for a complete list.

Reusing Code

By providing tools for designers and developers to easily reuse code within a web site, Expression Web helps you gain speed in development and efficiency in management. Expression Web renders PHP Server Side Includes, ASP.NET User Controls, and ASP.NET Master Pages in the Design view so that you can see what your pages will look like at run-time without the need for server processing.

Besides Server Side tools Expression Web also provides for Dynamic Web Templates which serve as a templating system for static HTML or even PHP pages. Dynamic Web Templates are completely server agnostic and have no server requirements.

Code Snippet Library

Expression Web contains a Code Snippet Library. A developer can add, modify, and delete Code Snippets by clicking Tools, Page Editor Options, and then the Code Snippets Tab.

You can create Code Snippets of any code you use frequently. To insert these code snippets just set your cursor in the source code of your page and press Control+Enter.

Tip: When you’re creating a new Code Snippet, if you want your insertion point to be in a specific place when the snippet is inserted into the page, just place a pipe “|” character in the snippet.

What’s in it for you: Flexibility and speed when working in the source code of your projects.

Expression Web Development Server

A major convenience of Expression Web 3 is the built in Expression Development Server. Users can keep a Web in a non-server location such as “My Documents” or even on an external drive, and if you have ASP.NET code or PHP code within your pages, Expression Web will feed the pages to the browser through the Expression Web Development server. This saves the designer the extra effort and hassle of setting up a local server or publishing every change just to view their dynamic pages.

Tip: ASP.NET is inherent in the Expression Development Server but for PHP functionality you’ll need to install PHP so that the Expression Web Development Server can find and use it.

What’s in it for you: The inherent efficiency of being able to stay in the application you use for design and development work and not having to install or publish to a server just to check your work as you make changes plus the freedom to keep a Web folder wherever you like and still be able to seamlessly see it rendered by a server.

Publishing

To access a site’s publishing settings, click Site, Publishing Settings. The Site Settings opens. The dialog can manage multiple destinations so you can easily store multiple user names, passwords, and destinations for a web site. This is particularly useful if you want to use a File System location for local back-up of your site, an FTP location as a staging server, and even an FTPS/SFTP location for a production environment. You can set up one or more publishing destinations in the Site Settings Publishing tab as well as edit and delete destinations.

From the Publishing tab of the Site Settings dialog you can access the Connection Settings dialog, where you can set or edit each destination you set up for your site.

You’ll find six different Connection types:

FTP, File Transfer Protocol, the most common and oldest of all the available publishing methods and the one we’re working with in this example.

FrontPage Server Extensions often referred to as HTTP publishing. This method requires that FrontPage Server Extensions are installed on the server and relies on your site’s Metadata to keep tabs on which files have been published and when. FrontPage Server Extensions are no longer supported and will be phased out by hosts eventually.

WebDAV, a set of extensions to the Hypertext Transfer Protocol (HTTP) that allows users to edit and manage files collaboratively. For more information see http://webdav.org.

File System, which is used to publish a site from one disk location to another and is very useful for moving sites around in your local computer or shared disk locations for purposes of backup and so on.

Most importantly, you will see two new arrivals: SFTP and FTPS. Since these are completely new in Expression Web they deserve a little extra attention and explanation.

The original FTP specification is an inherently unsecure method of transferring files because there is no method for transferring data in an encrypted fashion. This means that under most network configurations, Usernames, Passwords, FTP commands and transferred files can be captured by anyone on the same network using a packet sniffer. This is a problem common to many Internet protocol specifications written prior to the creation of SSL, such as HTTP, SMTP and Telnet. The common solution to this problem is to use either SFTP (SSH File Transfer Protocol), or FTPS (FTP over SSL), which adds SSL or TLS encryption to FTP.

FTPS and SFTP are not “default” set-ups with most hosts. If you’re interested in, or required to use the enhanced security afforded by these methods you should contact your host and see what they have available. In most cases you will use FTPS since it’s much more common to install an SSL certificate for a site than to provide Secure Shell access.

These new FTPS and SFTP options are very important, because as FrontPage Server Extensions and their inherent encryption of the Username and Password, plus the ease of publishing via HTTPS begin to vanish as an option, the user community needs a viable replacement for that enhanced level of transfer security.

Tip for marking files as do not publish: Right click any file (control+right click multiple files) in the Folders List pane and then click “Do Not Publish”. You don’t have to worry about overwriting your destination file. This is particularly useful for content held in database files and configuration files. To remove the Do Not Publish, repeat the right click process. If you’ve only changed a single file or small collection of files you can also right click one or more files and then click Publish Selected Files. This saves time since the application doesn’t check every file and try to deduce which files have changed.

Lastly, another useful feature in Expression Web 3 publishing is the ability to optimize code during the publishing cycle. You’ll find it by checking the Optimize HTML during publishing box on the Publishing tab of the Site Settings dialog and then clicking the Customize button beside it.

By using these settings you can feel free to put comments within your source pages locally, where you actually need them, and know that they won’t be visible in the page’s source code when they’re published to the server.

What’s in it for you: The efficiency that comes from being able to stay in your design/development environment when it comes time to publish, plus the freedom of commenting heavily on your local site copy and stripping the comments from the source code during the publishing process, plus the ability to have multiple publishing destinations for each site (for instance: file system back-up, production server, pre-production server, and so on).

Resources

Microsoft has put some obvious work into their Expression website. The forums, gallery, and learning sections continue to grow. They’ve also redesigned the site with a nice new look and improved usability.

About the Author

Chris Leeds is a long time digital photographer and web enthusiast. He developed a software product that enables web designers to easily create websites that their clients can edit and manage with just a browser. Chris writes articles for Microsoft's Expression Studio Newsletter, served as a technical reviewer for the O'Reilly Press "FrontPage the Missing Manual" and authored two Expression Web Step by Step books. He's currently writing his third Expression Web Step by Step book and co-authoring a Step by Step book on Expression Blend.

Chris also provides support for Expression Web users:

File system application code style File Transfer Protocol Snippet (programming) Web development

Opinions expressed by DZone contributors are their own.

Comments