Expression Web team blog

Microsoft Expression News

Lori Dirks — Thu, 20 Dec 2012 19:19:00 GMT

We released important news today about the Expression family of products. Please visit the Expression Community site for details.

Expression Web 4 Service Pack 2

Alex Moskwa — Wed, 13 Jul 2011 20:51:00 GMT

We’re pleased to introduce a new service pack for Microsoft Expression Web. Expression Web 4 SP2 focuses on making the editing process easier and faster. It includes improvements in two major areas: 1) workspace configuration and 2) code editing. It also includes a variety of other bug fixes and improvements.

Workspace improvements

Expression Web now supports any number of custom workspaces. You can save, restore and reset workspaces—which are collections of panel configurations. You can find the Workspaces feature on the Panel menu.

With Expression Web 4 SP2, we’ve built custom toolbars into Expression Web. This feature allows you to create any number of custom toolbars using any of the built-in (internal) Expression Web commands. The Custom Toolbars feature is found under the View menu.

Expression Web now provides a preview thumbnail of the currently selected file in the folder list panel. No more hunting around for image dimensions or sizes. In addition, the convenient link text under the size display lets you quickly copy an <img> tag or the CSS dimensions to the clipboard to paste into your markup.

If a CSS file is highlighted, you get clickable links for creating @import and <link> syntax; if a JavaScript file is selected, you can make a <script> tag with a click.

Code Editing Improvements

jQuery is the world’s most popular JavaScript framework. And now, Expression Web users can enjoy one of the best jQuery IntelliSense implementations around. One of the nicest elements of this feature is the intelligence we’ve built into creating selectors. With jQuery, you target methods at HTML elements that are identified using CSS selectors—tags, ID’s and classes.

Expression Web knows the IDs and classes that are available in your document, and will present you with the appropriate list (HTML tags, IDs, or classes), based on what you’ve started typing as a selector. In addition, Expression Web’s jQuery IntelliSense also supports IntelliSense while chaining multiple methods. In jQuery, methods can be executed one after the other within the same expression. In the example below, the css() and prepend() methods are chained, with IntelliSense operating within each chained method.

Our new Snippets panel lets you store and access snippets in a folder-based hierarchy. It comes with dozens of useful snippets in a variety of languages, and will automatically convert and load any existing custom snippets you’ve already built.

Also, the new feature was designed to preserve the ergonomics of the current snippets feature. Ctrl-Enter will bring it to the foreground with focus in the Filter field. Typing will automatically filter the list. You can use the arrow keys to navigate, and hit Enter to insert. Expression Web also now supports “wrap” snippets—where you specify code that goes before and after a selection—as well as the standard “replace” snippets.

A common pain point for web developers is the effort it takes to comment and uncomment bits of code you’re testing. Our Universal Comment/Uncomment feature will comment or uncomment code with Ctrl-j, Ctrl-Shift-j, from within whatever language you’re working with—PHP, JS, CSS, HTML.

Interactive Snapshot

In Expression Web 3 we introduced the Snapshot panel which uses SuperPreview rendering technology to allow you to preview Web pages in any version of IE (and Firefox 3.x) as you’re authoring them. This is great for layout issues, but doesn’t help if you need to test page interactivity. In Web 4 SP2, we’ve added an Interactive mode to our stable of IE renderers (as well as an interactive Firefox 3.x). Interactive mode essentially puts Internet Explorer in a panel, allowing you to see and interact with web pages during the authoring process. Mouse-overs, lightboxes and animations all work. Simply saving your changes triggers a refresh of the panel. IE Interactive uses the current version of Internet Explorer installed on your machine.

We hope you enjoy this new Expression Web service pack. It is available via the download link on the Expression Community site at http://expression.microsoft.com and will also be delivered via Microsoft update.

Alex Moskwa
Program Manager
Microsoft Expression Web

Expression Web 4 Service Pack 1

JD_MSFT — Mon, 21 Mar 2011 16:13:00 GMT

Typically, we come out with a service pack release to fix bugs, address performance problems, and add a bit of polish to a product.

In the case of Expression Web 4 SP1—we really couldn’t wait. We saw all the cool stuff that’s happening around HTML5—we knew the release of IE9 was coming—and we said to ourselves, “We need to get some Expression Web HTML5 goodness out, ASAP!”

And, here it is, built into Expression Web 4 SP1.

We’ve added IntelliSense for the complete HTML5 specification, IntelliSense for the (evolving) CSS3 draft spec, support for all new CSS properties in the CSS Properties palette, and support for selected CSS properties in the Style dialogs (like the Border Radius dialog below).

There is a lot of stuff in here. And now, you have no excuses for not jumping on the HTML5 bandwagon.
We’ve also got support for IE9, so that you can Snapshot your page and preview it directly within Expression Web.

If you haven’t checked out SuperPreview in a while, you’ll want to. There are quite a few improvements including support for Chrome (via our online service) as well as IE9 rendering. One request we heard a lot was the need to compare pages that are behind a login screen. SuperPreview SP1 includes a new feature called “Page Interaction Mode” that lets you browse interactively to your page of interest, and then submits that page to your set of chosen browsers.

This allows you to use SuperPreview on password-protected pages on your Intranet, or on authenticated Internet sites.
We’ve updated our PHP support with hundreds of functions from PHP5, added a number of new niceties like “Open as PHP,” “Open folder in Windows Explorer,” “Copy File Path,” and others. We’ve also added IntelliSense for extended characters—so, as soon as you type a “&”—you’ll get a list of the HTML character entities that filters as you continue to type.

We automatically look for Chrome, Safari and Opera and conveniently add them to the list of browsers you can use to preview.

Expression Web 4 SP1 is available now via the Microsoft Download Center at http://www.microsoft.com/downloads/details.aspx?FamilyID=f6e1bbd9-2b1b-40e8-948b-1276e3b5daa3. Enjoy!

Steven Guttman

Suggest and vote on new features for SuperPreview!

Alex Moskwa — Tue, 19 Oct 2010 19:35:00 GMT

The SuperPreview team is always looking for new ways to reach you, our customers. We want to continue to create a product that will solve your cross-browser testing and web development needs.

Another way you can reach us is through the new SuperPreview User Voice site.

Here you can submit your feature ideas and also vote on the ideas others have submitted. Through this we will continue to grow our understanding of you, our users, and create a product that does what you want.

Let us know what you think and be heard.

Alex Moskwa
Program Manager
Expression Web and SuperPreview

Add HTML5 support to Expression Web 4!

Gregory W Smith II — Wed, 06 Oct 2010 12:00:00 GMT

With Internet Explorer 9 Beta’s deep support for HTML 5 and the increasing adoption of HTML5 for RIAs, the Expression Web team is extremely excited to release our free HTML 5 Add-in for Expression Web 4! The HTML5 Schema Configuration Add-In for Expression Web enables the new HTML5 schema to check your markup for errors and provide IntelliSense for HTML5 tags, attributes and values in code view.

Install the HTML5 Schema Configuration Add-In

Quit Expression Web 4 if it is open.
Download the HTML 5 Schema Configuration Add-In here and save it to your local computer.
Start Expression Web 4.
Choose Tools > Add-Ins .. to display the Manage Add-Ins dialog box.
In the Manage Add-Ins dialog box, click the Install.. button.
In the Open Expression Web Add-in File dialog box, select the HTML5Schema.xadd add-in file you downloaded, and click Open. Be sure to click “Yes” when Expression Web asks you to enable the add-in.

If the add-in is correctly installed, it will appear in the Manage Add-In dialog, and the Standard toolbar will display a new “HTML5” button.

Using the HTML5 Schema Configuration Add-In

Start Expression Web 4 with administrative privileges (Right-Click the start icon and select“Run as Administrator”).
Click the HTML5 button in the standard toolbar. The Configure HTML 5 Schemas dialog box lets you enable or disable the new HTML5 schema.
Click the Enable HTML 5 button to update the Expression Web HTML 5 schemas. Click the X in the upper right corner of the dialog box to close it.
Restart Expression Web 4.
Change your editor options by choosing Tools > Page Editor Options. On the Authoring tab, set both the Document Type Declaration option and Secondary Schema options to HTML5.

If you set your Doctype and Secondary Schema options to HTML5 in the Page Editor Options, then whenever you create a new web page in Expression Web, the new page contains the HTML5 doctype:

<!DOCTYPE html>

If you don’t change the default doctype to HTML5 in the Page Editor Options, you can still create a new HTML5 page by hand in the Code view of a page or open existing HTML5 documents and edit them in Expression Web 4.

Either way, when you edit an HTML5 document in code view, Expression Web 4 now provides IntelliSense for HTML 5 elements, attributes and their values.

The Expression Web team is very excited about the the new generation of great web applications built on HTML 5 and is happy to support you with this free add-in for HTML5!

Known Issues

If you uninstall this add-In from Expression Web, files are left behind and will cause subsequent installations of the Add-In to break. The work-around is simple: Delete any HTML5Schema folders in your %APPDATA%\Microsoft\Expression\Web 4\Addins directory. Then re-install the Add-In.
The current SVG schema is provided by the add-in, however, SVG markup is incorrectly flagged as invalid by Expression Web 4. The work-around is to use an online code validator, such as provided by the W3C.
Expression Web 4 sometimes flags closing HTML 5 tags as mismatched tags even though the markup is valid. The work-around is to use an online code validator, such as provided by the W3C.
Enabling or disabling HTML 5 with the Add-in requires Expression Web to be run with administrative privileges.

Add custom toolbars to Expression Web 4

Expression Web Team — Mon, 27 Sep 2010 21:21:00 GMT

Expression Web 4 provides eleven toolbars on the View > Toolbars menu, organized around particular activities, such as editing in Code view, and working with styles or tables. The default toolbars are sensible unless you regularly use only a few buttons from each toolbar; in that case, the default toolbars may clutter and waste valuable space in the application, especially when your favorite buttons are on three or more different toolbars. To the rescue: the free Custom Toolbars add-in for Expression Web 4 lets you create one or more toolbars to organize your favorite buttons and commands in Expression Web 4.

Install the Custom Toolbars add-in for Expression Web 4

If Expression Web 4 is open, quit the application.
Download the Custom Toolbars add-in from the Expression Gallery at http://gallery.expression.microsoft.com/en-us/CustomToolbars.
Double-click the CustomToolbars.msi file, and follow the onscreen instructions to install the add-in.
Start Expression Web 4.
The Favorites toolbar, labeled Customize Toolbars, appears below any open toolbars at the top of Expression Web 4. Select View > Toolbars > Favorites to close this toolbar. This “Favorites” toolbar that appears is known to be buggy if you try to customize it so we recommend closing it and creating a new custom toolbar from scratch, as demonstrated in the following steps.

Create a custom toolbar

In Expression Web 4, on the Tools menu, click Customize Toolbars.
Click New, enter a name for your custom toolbar, and click OK.
In the Customize dialog box, in the column on the left, select the items you want to add to your toolbar, and click Add. To change the order of items in your toolbar, in the column on the right, select an item you want to move, and then click the up or down arrows. When you are done editing your toolbar, click OK.

Your custom toolbar now appears below other toolbars open in Expression Web 4, with all of your favorite buttons at the ready! To show or hide your toolbar, select the toolbar’s name from the View > Toolbars menu.

Expression Web team

SuperPreview online service Beta adds Internet Explorer 9 Beta and Safari 5.

Alex Moskwa — Wed, 15 Sep 2010 17:22:00 GMT

This week we bring two more browsers to our online service Beta.


Internet Explorer 9 Beta	Safari 5 for Mac

If you’ve already signed up for the online service you will receive notification of these new browsers the next time you launch SuperPreview. You can then choose them from the browser selection screen and begin previewing your sites with the new browsers.

If you haven’t signed up yet, you can do it right inside SuperPreview. Just click the Sign up button on the toolbar.

Access to the SuperPreview online service Beta is available to users who’ve purchased or upgraded to Expression Web 4. If you still haven’t upgraded from Expression Web 3, version 4 is a free upgrade with many improvements.

Alex Moskwa
Program Manager
Expression SuperPreview Team

Using the Expression Web SEO Checker

erwright — Mon, 02 Aug 2010 15:00:00 GMT

Expression Web 4 provides a new reporting tool: the SEO Checker, which helps you optimize the pages in your site for discovery and indexing by search engines. Pages that follow good Search Engine Optimization (SEO) guidelines rank higher in search-engine results, helping people find your site more easily.

What does the SEO Checker do?

The SEO Checker analyzes static page structure and content, compares each page against 50 different rules to ensure the page is search engine-friendly, and produces a detailed report of problems and solutions. To come up with the 50 SEO rules, the Expression Web team researched the current best practices in SEO which generally emphasize authoring well-formed markup and providing relevant content. The SEO Checker’s rules provide guidance in these categories:

Content is not where search engines expect to find it
- e.g., the page is missing the <title> tag, or has an empty <h1> tag
Content or markup follows patterns that may be associated with deceptive practices
- e.g., the content of the keywords meta tag is very long or contains duplicate keywords
Content or markup interferes with the ability of search engines to analyze a page
- e.g., the page is not well-formed and may be parsed incorrectly
Content or markup reduces the appeal of a page in search-engine results
- e.g., <title> is too long, or meta description is missing
Content causes search engines to consider two or more pages to be relevant to the same search term
- e.g., inconsistent use of trailing slash (“/”) when linking to pages
Content or markup blocks search engines from analyzing your site
- e.g., hyperlink contains too many query string parameters

What does the SEO Checker NOT do?

The SEO Checker provides guidance to help you improve your site’s markup and content, but that guidance alone is not sufficient in building a fully optimized site. In addition to making changes to your pages based on the errors and warnings reported by the SEO Checker, there are many other tasks to consider, including:

Assessing your site’s ranking for targeted keywords (check your page rank in multiple search engines)
Providing compelling, original content in your site
Building links to your pages (from external sites and within a site)
Canonicalizing URLs (such as making sure search engines treat <yoursite>.com the same as www.<yoursite>.com)
Using descriptive filenames for your images

These tasks and more are covered on the Bing Webmaster Center blog in their five-part series on improving page rank. There are many specific recommendations in these posts, so take a look:

If you’d like to drill deeper into understanding external link building and just how important it is for search ranking, see Link building for smart webmasters (from the Bing Webmaster blog) and Quality links to your site (from the Google Webmaster blog).

You should also ensure that all of the content you want searched on your site is reachable via internal hyperlinks, or by creating a sitemap. You can use the Unlinked Files report in the Expression Web Site View to find pages that are not internally reachable. Otherwise, for Sitemap best-practices, see “Reveal the heart of your site with a Sitemap” in Part 5 of the Bing SEO blog posts.

Be aware that the SEO Checker was built for analyzing static HTML content. If the majority of your site’s pages are dynamically created by ASP.NET or PHP, you’ll see more meaningful SEO analysis results by using the free IIS Search Engine Optimization Toolkit. Although the IIS Toolkit is not integrated with an editing tool, you can use Expression Web to easily find and fix any SEO issues that are reported by the tool.

Example: SEO for a mobile app site

I recently wrote a mobile phone application, and then considered how I wanted people to discover the app. Some people will find the app on the phone’s app store, but the app store is not indexed by the big search engines. Publishing a corresponding web site for my app adds the possibility that someone will discover the app via a web search. In creating this very simple brochure site, I used the Expression Web 4 Compatibility Checker and SEO Checker to ensure the site is as search-engine friendly as possible. I’ll walk through how I used each checker, and how I fixed the issues the SEO Checker found.

First, I reviewed and fixed code errors and markup compatibility issues on the site. You might wonder why, since we’re talking about SEO. This Bing Webmaster Center blog post explains:

Is your HTML source code valid? Just because it displays more or less correctly, are you sure it's solid? (Some browsers are much more tolerant of HTML coding errors than others are, so you may not actually see the problems. However, search bots are typically not as forgiving as those tolerant browsers, which is why this issue is important.) Errors in your page source code can have a detrimental effect on your page rank if the search engine doesn't understand and thus can't effectively crawl your code. For example, if you didn't properly format the <head> tag code […], all of the work you put into enhancing its content for keyword usage could be for naught.

Additionally, fixing code and compatibility issues first helps ensure that the SEO Checker will find all of the issues it can in your site.

The status bar at the bottom of Expression Web 4 displays the HTML Incompatibility icon (on the left in the following screenshot), Code Error icon, and doctype of the current page. The HTML Incompatibility icon lets you know if your page has markup that isn’t compatible with the page’s doctype (HTML5 in this case).

You can click Go To Error to jump to the first compatibility error on the page, or Run Compatibility Checker… to get a site-wide report of compatibility issues. See our previous blog post Improve Your Site’s Search Ranking for more info on running the Compatibility Checker.

Running the SEO Checker

Now it’s time to tune my website for searchability. I selected SEO Reports... from the Tools menu to display the SEO Checker:

The Learn more about SEO link takes you to Expression Web’s built-in Help documentation on SEO and the SEO reporting feature. Be sure to take a look at this Help, as it has a wealth of information on SEO best practices and a detailed explanation of all the SEO rules that are used by Expression Web 4 to analyze your site.

After clicking Check, the Search Engine Optimization report showed these results for my site:

By default, the SEO report is sorted by page and line number, showing you issues encountered starting at the top of each page. Each reported issue shows a problem summary, a link to a Help topic on the reported problem, the page name and line number, and the issue’s importance (Error or Warning). While you should strive to fix both Warnings and Errors to maximize your SEO results, you’ll reap the most benefit from fixing issues marked as Errors. For my site, I’ll show you how I fixed all of the SEO issues, including Warnings.

Fixing searchability issues

Warning: No keywords are defined for the page

My site’s first searchability issue is the warning “No keywords are defined for the page.” If you haven’t worked with HTML keywords before, this statement may be a bit cryptic. Fortunately, you can hover your mouse pointer over an issue in the Search Engine Optimization panel to see more detailed information, like so:

You can also double-click on an issue to go directly to the line of code that contains the problem in your page. In this case, double-clicking causes the code editor to highlight the <html> tag on line 2 of index.html. The <html> tag itself is fine, but it’s highlighted because the checker did not find any keywords within the document. So, how do we fix this issue? If the guidance in the tooltip was sufficient for you, you could add the missing meta tag and keywords directly in the code editor. But let’s say you wanted to learn more about this topic, in which case you could click on the WEB1034 hyperlink in the Search Engine Optimization panel’s Help Topic column. Each SEO rule’s Help topic contains a detailed explanation of the issue, as well as example HTML for fixing the issue. Here’s the Help topic’s example HTML for fixing the missing keyword issue:

The following is an example of a correctly formatted <title> tag, with <meta name="description"> and <meta name="keywords"> tags in the <head> tag section.
<head> <title>Contact Proseware, Inc.</title> <meta name="description" content="Contact information for Proseware, Inc., including addresses, phone numbers, and email"/> <meta name="keywords" content="Proseware,Proseware applications,Proseware utilities,Proseware tools,Proseware server tools"/> </head>

Now that we understand the keyword issue and how to fix it, we could either simply type in a new <meta name=”keywords” content=”...”> statement in the code editor, or edit the keywords in the Page Properties dialog, which presents commonly used page meta content for editing. To open the dialog, select Properties... from the File menu:

From here, I simply typed a comma-separated list of keywords in the dialog, and Expression Web updated the HTML accordingly.

Warning: The title and description for the page are the same

The Page Properties dialog is a convenient way to also fix the third searchability issue listed in the result pane: “The title and description for the page are the same.” The page description is generally shown below the page title in search results, and is an opportunity for you to summarize the page’s contents to entice people to visit your page. Without a page description, it’s up to the search engine to choose what text to show. Perhaps the worst thing you can do here is what I’ve shown above, where the title and description are the same. This gives the person searching absolutely no additional information about your page, and is a lost opportunity to direct search traffic to your site. Take a moment to fill this out and write a meaningful description.

There are two related SEO Checker rules: WEB1052 (“The <title> tag contents are not unique within the site”) and WEB1028 (“The <meta name=”description”> tag contents are not unique within the site”). These rules remind you to keep these tags unique across all pages on your site. Pages with duplicate page titles in your site compete with each other for search engine keyword relevance, reducing each page’s search ranking as a result. Unique descriptions ensure that users see meaningful descriptions for each page, and can more easily identify the content they want.

Error: The <noscript> tag is missing

As part of marketing this mobile app, I created a Twitter account to keep people up-to-date with the latest changes to the app, and for users to give feedback. Twitter provides canned widgets you can embed in your web pages to show the latest posts from your Twitter feed. The beginning of the widget looks something like this:

These widgets rely on Javascript, but search engines (and some users’ browsers) will not run this Javascript. In these cases, where the script is intended to generate user-visible content, you can provide a <noscript> block with alternate text to show the user or provide additional information for the search engine. For this case, I added this just below the second <script> block:

<noscript>Read the latest tweets: <a href=”http://twitter.com/mapminders”>@mapminders</a></noscript>

Don’t bother providing a <noscript> block if you’re simply using <script> for analytics tracking, though.

Warning: The <meta name=”robots”> tag contains illegal values

The robots meta tag instructs the search engine if and how it should index your page content. The rule’s help topic lists all of the recognized directives, and what each one means: nofollow, follow, noindex, index, noodp, noydir, noarchive, cache, nocache. Think carefully before using a directive like nofollow (which stops the crawler from following any of your page links) or noindex (which prevents the current page from being indexed).

For our mobile app website, I had copy/pasted a robots meta tag with an invalid directive:

<meta name="robots" content="all, index, follow">

Fixing this issue is as simple as removing the invalid “all” directive from the content attribute.

Error: The <img> or <area> tag does not have an ‘alt’ attribute with text

This is an oft-cited HTML recommendation – you should always provide alt text for your images, not just for accessibility, but also for search engine relevance. The logo image in my header and the screenshots from my app were all missing alt text, so it was easy to add this in and fix the issues.

And here’s a tip for optimizing your images for SEO which the SEO Checker won’t tell you about: you may improve your image search relevance by using hyphen-separated names for your images, such as “location-detail-screenshot.png”, in addition to having meaningful alt text. We considered adding this as a rule in Web 4, but found it very tricky to correctly automate this check in all of the languages we support in Expression Web.

For more information, see the Bing Webmaster Center blog post Images and Flash and Script, Oh My! (SEM 101) for the SEO best practices when using images in your site.

Error: The <a> tag text is too general to provide search benefit

And now we’ve come to the final SEO issue in our example. These lines were flagged for having content that is too general:

<li><a href="#">Home</a></li> <li><a href="[app store link]">Download</a></li> <li><a href="#contact">Contact us</a></li>

I wasn’t sure how to resolve this, so I clicked on the WEB1058 help topic link and read the following:

The <a> tag appears to contain generic text, such as "link" or "click here." If a hyperlink points to content that is relevant to the site, the search ranking of the site may be reduced unless the anchor text accurately describes the target of the hyperlink.

Search engines use the contents of <a> tags to provide details about the page to which the <a> tag links.

For a decent-sized site, it’s worth improving the search relevance of internally linked pages, so we could spend some time rethinking link names to make them more contextually descriptive. For example, we could replace “Download” with “Download the MapMinders app”, and replace “Contact us” with “Email the MapMinders developer”. But, for such a small site, this may be of little search value and ends up making the link text more visually cluttered. For your own sites, you may need to make this trade-off, as well.

And with that, I’ve fixed all of the searchability issues identified by the SEO Checker!

Beyond the SEO Checker: measuring SEO improvements

Now that you’ve optimized your website for search using the SEO Checker and published your changes, what next? Well, your goal was to have a higher search engine page rank for certain keywords, and to drive more traffic to your site as a result of higher page rank, right? If so, you need to measure your keyword ranking, site traffic, and so on over time. There are many SEO analytics tools available for this purpose, each with their pros and cons. (See “Baseline your site’s current performance” in this Bing Webmaster Center blog post for a comprehensive list of metrics to pay attention to.) Two free tools to consider are Bing Webmaster Tools and Google Webmaster Tools. After some initial configuration, they will report data on the number of indexed pages, your top pages, keyword relevancy, and clicks from search results to your site. These tools are fairly lightweight, so depending on the size of your site and what data you want to track, you may very well find that you need more fine-grained search tracking software.

Regardless of the analytics tools you choose, just remember that SEO is an iterative process. You’re unlikely to see improvements overnight, but rather over weeks and months. During that time, check your SEO analytics reports, keep improving your site content, and periodically re-run the SEO Checker to make sure you’re not missing an SEO opportunity.

Eric Wright, Principal SDE
Microsoft Expression Web

Free Green Business Web Site Template

Expression Web Team — Mon, 19 Jul 2010 19:34:00 GMT

The Expression Web team brought me on their team for the summer to develop the markup for some fresh, new, and best of all, free site templates. I’m pleased to announce our first site template, Green Business (designed by the team’s UX designer, Lena Yeoh), is ready for download:

http://gallery.expression.microsoft.com/en-us/GreenBusiness

The core layout of every page in the site is based on a 960 grid which provides a flexible structure I can use to quickly develop most any layout.

I’ve developed the Green Business pages so you can easily remove elements from a page (images, text, etc.) and swap in your own content without breaking the page’s underlying layout. For example, in the following screenshots, I deleted all the filler text and content from the page. As you can see the structure of the page is still left intact, giving you the freedom to swap in and out whatever content you want.

On the other hand, if you want to use the existing photographs provided in the site template, you are free to use and publish them.

The Green Business site includes a master.dwt (Dynamic Web Template) file which you can use to make new pages that have the same look and feel as the rest of the website, and to make changes to the header and footer of all pages that use the DWT. (If you are new to working with DWT files, read this tutorial: http://expression.microsoft.com/en-us/dd939172.aspx. If you’d rather not use DWTs, choose Format > Dynamic Web Template > Detach from Dynamic Web Template while a page is open or selected in the file list.)

The site template also includes e-mail spam bot protection code for your e-mail address, and, naturally, standards compliant XHTML mark-up and CSS2.1.

The Green Business template is packaged for Expression Web 4 and includes simple and easy to follow instructions in a file named ReadMe. It also provides information on how to install the template on Windows XP, Vista and Windows 7.

I hope you enjoy this template! Let us know if you have any questions or comments.

Jimmy Lee, front-end web developer
Microsoft Expression Web

Adding symbols and characters to your web page

Anna Ullrich — Mon, 28 Jun 2010 23:16:00 GMT

Expression Web 4 includes a new Symbol dialog box that enables you to insert symbols and characters in either the Design view or Code view of your web page. You can browse all available characters or choose a subset of characters from the Type menu.

For quick access the Special Characters tab lists only the most commonly-used characters, such as the copyright symbol, em dash, en dash, registered and trademark symbols:

Unlike earlier versions of the Symbol dialog box, the Symbol dialog box in Expression Web 4 inserts only the entity name for the character you select and adds nothing else; the Symbol dialog does not add paragraph or span tags, and does not apply a font and style to the character you insert. Consider that reason #11 to get your (potentially free) copy of Expression Web 4 today!

Create useful, professional-Looking add-ins for Expression Web 4

Mike Calvo — Tue, 22 Jun 2010 20:44:00 GMT

Expression Web 4 enables developers familiar with web technologies such as HTML, JavaScript, and CSS to easily extend the functionality of the product. A useful add-in that was demoed at the product launch lets you insert a Bing map into your web page. In this blog post, I’ll provide a detailed look at this add-in which is available for free on our community site.

A Quick Look at the finished Add-in

After downloading the Bing Map add-in, you need to install the add-in in Expression Web 4. To install the Bing Map add-in, choose Tools > Add-ins, click Install, and follow the onscreen instructions. After you install the Bing Map add-in, the Bing Map command appears on the Insert menu and displays the Insert Bing Map dialog box.

The dialog contains a functional Bing map that you can pan and zoom. In addition, you can specify a location to center the map around and create a pushpin. Once you have selected the desired location, zoom, and perspective, press the Insert button to add the HTML and JavaScript that will display your interactive map.

Notice that the Bing Map add-in’s dialog has a color theme that matches the look of the Expression Web application. I’ll show you how to get the same look for your own add-in in a bit.

To see your map in action, press F12 to view the current page in your browser. The browser will show the map with the same location, perspective and zoom that you specified in the Insert Bing Map dialog. The map also provides controls that allow a visitor to your page to move around the map.

Let’s take a look at how we created this addin.

Defining the Add-in

Expression Web add-ins require a manifest file which is an XML file named addin.xml. This file provides the basic description about the add-in as well as some of the ways the add-in introduces functionality into the application. Here’s the addin.xml file for the insert Bing Map add-in:

The addin.xml file requires a single <addin> element at the root level. At a minimum, it must also include a <name> element. Optional descriptive elements, such as author, description, guid, homepage, minversion and version, help users identify your add-in in the Manage Add-ins dialog.

For example, here’s how the Insert Bing Maps add-in appears in the Manage Add-ins dialog:

Commands

To add a menu item or toolbar button to Expression Web for your add-in, use the <command> element in your add-in’s manifest file.

Let’s look at the command we added to Expression Web for the Bing Map add-in. At first glance, this part of the manifest file may appear complicated, but after breaking it down, you’ll see it’s really quite simple.

Each menu command is defined by a command element which requires a unique id attribute to identify the command for Expression Web. To help ensure your command is unique, try to use an id that identifies what your command does. For example, in the Bing Map add-in, we used the id “InsertMap”.

Next, you need to define what happens when your command is executed. That’s where the onclick attribute comes in. Much like an onclick JavaScript event handler, you use the onclick attribute to define the JavaScript code that runs when the user selects the toolbar button or menu item.

In this example we need to launch a new dialog. To do this, we use the Expression Web API function xweb.application.showModalDialog. This function takes 3 parameters:

an html page which provides the UI for the dialog,
a title for the dialog,
a string containing dialog options (such as size and scrolling).

You’ll note that the html page in this example is specified as “addin:index.html”. This tells Expression Web to look for the file relative to your addin.xml file. So in this case, there should be a file called index.html in the same directory as the addin.xml file. We’ll have a look at some things in this file in a moment.

The final attribute of the command element is filetype, which tells Expression Web to make the add-in’s command available only for files that have an HTML DOM, such as HTML, ASP, and PHP files. This makes our command disabled when the user is editing other types of files (such as CSS and JS). If your add-in does not have a similar restriction, you can omit this attribute.

Within the command element is a menuitem element, which tells Expression Web to add a new menu item for triggering the add-in’s command. The menuitem element requires you to specify the parent menu your command should appear under as well as a label for the menu item. Notice in our example the label attribute has a value of “_Bing Map…”. The underscore character (“_”) is optional and tells Expression Web to define a hotkey for the letter ‘B’.

Defining the Dialog UI

Let’s have a look at how we created the dialog UI with the file index.html, which the xweb.application.showModalDialog function references. The good news is most of this file should look very familiar as it simply uses standard web technologies. I won’t focus on things like basic HTML such as hyperlinks, buttons, and text fields, but I will highlight things in this file which are unique to developing Expression Web Add-ins.

JavaScript and CSS

The Bing Map add-in’s index.html includes references to standard JavaScript libraries such as jQuery as well as custom JavaScript developed for this add-in. As these references suggest, you can leverage powerful JavaScript libraries like jQuery, and your own custom JavaScript, to help you write your add-ins.

The index.html file also references some stylesheets, which work just as CSS does with any normal HTML page. Take special note of the following CSS reference:

This expression.css file defines the standard color schemes that match the Expression Web application color schemes. To give your add-in a professional, built-in look and feel, make sure you use this this CSS file as well as the style classes defined within it. You can use the version of this CSS file from the Bing Map add-in in your add-ins.

Inserting Markup and Script

To understand what the add-in does to insert the map, have a look at the file prepare.js within the addi-in’s js folder. This file contains a function called handleInsertButton which defines the behavior of the Insert button in the Insert Bing Map dialog box. This function makes heavy use of the jQuery JavaScript framework to define what happens when the pointer hovers over the button and presses it.

This function does quite a bit, so I’ll break some of it down.

These two lines of code show how the Bing Map add-in adds JavaScript references to the current page. In both of these examples, we point to remote script resources using the API function call xweb.document.appendScriptReference. In fact, we not only use jQuery to build the functionality in our add-in, we also use it to build the map functionality in our page. By using this approach the API will protect you from adding a reference to the same resource more than once.

The next interesting property of the handleInsertButton function is xwebdocument.selection which uses the Expression Web API to locate a suitable home for the map within our HTML markup. This gives you access to the current cursor location or selection in the current document in Expression Web.

The code uses this property to determine if the current cursor location or selection is within a DIV element with a proper ID. If it is, it will use that element. Otherwise, the add-in adds a new DIV with an ID. Notice, that while this code is using Expression Web-specific APIs, working with the DOM of the current document is very similar to working with the DOM in a regular HTML page.

The remainder of the function is standard JavaScript that generates the JavaScript code added to the HEAD element of the document being edited in Expression Web. Finally, towards the end of the onclick function handler for insert, you see the following code:

Again, we use the xweb.document API to address the DOM of the page being edited to locate the HEAD element and use the DOM-standard approach of appending html to the innerHTML property of this node. Finally, we need to close the dialog. To do this, we use the xweb.appliation.endDialog function. The argument to this function is what is returned to the original call to xweb.application.showModalDialog which displayed the dialog. In this particular case it goes unused.

Handling Keys

To add the final polish of a professional application as well as to support accessibility, it’s important to make sure your add-in responds well to keyboard interactions. The insert Bing map add-in shows some examples of how to do this.

Hotkeys

Notice how the Insert button in the Insert Bing Map dialog has a the letter “I” underlined. This signifies that the button is wired to the hotkey of Alt-I. This functionality needs to be added by our add-in. To see how this is done, check out the setupKeys function in prepare.js. Specifically, notice the following code:

This uses jQuery to wire an event handler to the keyup event on the body of the dialog’s page. When an Alt-I is detected, a click event is manually sent to the insert button

Tab Order

Another subtle, yet important key function is the use of tabs to cycle through input field selection. Tab should select the next logical input field. While shift tab should select the previous logical input field. In the insert Bing map dialog we’ve chosen the logical order to be

Location text box (id ‘txtWhere’)
More information link (id ‘hp’)
Insert button (id ‘insert’)
Close button (id ‘close’)

To assist in this, we added a function called handleTab which takes an event, a previous control id and a next control id. The function uses a jQuery selector to send focus to the next or previous control if tab or shift tab is pressed respectively.

Wiring in our tab functionality is as easy as adding the following code to the setupKeys function:

Summary

I hope you’ve found this overview of the insert Bing map add-in useful. Be sure to download the add-in and make use of it. It’s not only a great extension of Expression Web, it’s also a great example of how to make a professional looking add-in.

Expression Web 4 Licensing FAQ

Expression Web Team — Fri, 18 Jun 2010 18:20:00 GMT

We’ve received a number of questions about the free upgrade from Expression Web 3 to Expression Web 4. With this post, I hope to answer the most frequently asked questions and eliminate any confusion.

The upgrade path for Expression Web 4 depends on how you acquired Expression Web 3. If you purchased a retail version of Expression Web 3 (e.g., from the Microsoft Store, from a local software retailer, from Digital River, etc.), you should download and install the Expression Web 4 Trial version from microsoft.com. The upgrade should happen automatically as you install Expression Web 4. In this scenario, the Setup program for version 4 locates your version 3 license in the Windows License Store and applies that license to version 4. After you have installed version 4, you are free to either uninstall version 3 or leave it installed.

NOTE: Please keep your copy of Expression Web 3 and your version 3 product key. Should you need to reinstall Windows or have a hard drive failure, you will need to first install Expression Web 3, then reinstall Expression Web 4.

If you have any other version of Expression Web 3, e.g., acquired through a volume license, MSDN, DreamSpark, etc., you should not install the trial version. Instead, you should get your copy of version 4 through the same program you used to acquire version 3. I’ve listed a few examples below:

MSDN – Browse to the MSDN download center to download Microsoft Expression Studio 4 and acquire your product key. Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
DreamSpark – Browse to the download center location to download Microsoft Expression Studio 4 and acquire your product key. Once you have that the product key, you should select Help->Enter Product Key to license your copy of Expression Studio 4.
Volume Licenses – Visit the Volume Licensing Service Center (VLSC) to make arrangements to download the upgrade. Your company and/or your reseller need to be registered with the VLSC in order to successfully download the upgrade. As with DreamSpark, at the time I write this, Expression Web 4 and Expression Studio 4 are not yet available on the VLSC, but should be soon. We will update this post when we have the link to the download page.

If your free upgrade to Expression Web 4 is not yet available from your supplier, please download and use the free trial version of Expression Web 4 at http://www.microsoft.com/expression/try-it/. When your free upgrade becomes available, you can uninstall the trial version and install the full version.

Some additional notes:

If you’re in doubt about whether your copy of Expression Web is fully licensed and activated, select Help->About Microsoft Expression Web and look for the phrase, “This is a fully licensed copy.” (Note: The information that appears when you choose Help->Activate Product or Help->Enter Product Key is not a reliable measure of whether the app is licensed.)
If you’re in doubt about whether your copy of Expression Web 3 is eligible for the automatic upgrade, select Help->About and look for the product ID which is in the form of a 5-digit number, a dash, a 3-digit number, a dash, etc. If the 3-digit number is 617, the Expression Web 4 installer should automatically license your copy during the installation.
If you acquired version 3 through a program like MSDN or DreamSpark but are no longer participating in the program, you are not eligible for the free upgrade. You are still eligible for the reduced-cost upgrade.

I hope this answers your questions.

Paul Bartholomew

Microsoft Expression Web

SlapShot for Expression Web 4

JD_MSFT — Wed, 16 Jun 2010 19:35:00 GMT

SlapShot is a new extension written for Expression Web 4. For those of you who already use the SnapShot panel (a feature that debuted in Expression Web 3), you will feel right at home with SlapShot.

For those of you who haven’t yet used SnapShot (or who need a quick refresher course), SnapShot is a panel in Expression Web that displays an image of the current page as rendered by the selected browser. It allows you to easily change the browser and browser resolution without having to repeatedly preview in browser to see your changes.

SlapShot is based on the same premise in that you can easily preview a page without loading a browser, however SlapShot extends the features of SnapShot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).

In the following screenshot, you can see that SnapShot displays only the Install Silverlight message but SlapShot displays (with interaction) the actual Silverlight content.

Slapshot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events (for more information about these events, see The add-in manifest in the Expression Web SDK User Guide). When a page is saved or the active document is changed (for example, the user clicks on the tab of a different page), the SlapShot display updates. Quite nifty.

There are a few conditions that must be met before SlapShot will work correctly:

The page must belong to a site on the local computer.
Expression Web must be configured to use the Microsoft Expression Development Server.
To configure Expression Web to use the Development Server:
- On the Site menu, click Site Settings, and then click the Preview tab.
- Make sure Use Microsoft Expression Development Server is checked and select For all web pages.
Run any page once or load SnapShot to start the Development Server for the site.

For more detailed instructions configuring and loading the Development Server see the Previewing documentation.

Version 1 of SlapShot includes default support for the version of Internet Explorer that is installed on your computer.

You can enable Beta (not all features are available yet) Firefox support in the SlapShot panel using the following steps:

Download the Mozilla XUL SDK from the Mozilla download center: http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/.
Unzip the latest version to your hard drive.
Start a command prompt as an administrator and change to the bin subdirectory where you unzipped the XUL SDK.
Type regsvr32.exe mozctl.dll and press ENTER.
Restart Expression Web 4. The SlapShot panel now supports Firefox.

The SlapShot add-in uses a fairly large swath of the extensibility layer and, hopefully, can provide a reference about how to get various pieces of data out of Expression Web 4 (as well as be a useful tool). SlapShot is already available on the Expression Gallery.

To install SlapShot

In Expression Web, click Tools, and then click Add-Ins. The Manage Add-ins dialog box is displayed.
Click Install, browse to the location you downloaded SlapShot.xadd to, click SlapShot.xadd, and then click Open. The extension is unpacked and added to the list of add-ins, SlapShot can then be found towards the bottom of the Panels menu item.

Enjoy!

John Dixon
Expression Web

Improve Your Site’s Search Ranking

Expression Web Team — Mon, 14 Jun 2010 16:18:30 GMT

Expression Web 4 (released last week!) has a powerful new Search Engine Optimization (SEO) reporting tool that identifies potential SEO problems in your site. This tool makes it very convenient to automatically locate mark-up patterns that might be compromising your page rankings. But all versions of Microsoft Expression Web have a range of features you can use to drive SEO improvements into your mark-up. Let’s take a look at them!

A Simple Way to Think About SEO Guidance

SEO guidance on the Web tends to fall into one of the following categories:

Don’t confuse the crawler
Maximize useful content
Don’t look like a bad guy

To expand on these, your mark-up should be clean and well-constructed, so that crawlers can understand and crawl it efficiently. You should exercise every available opportunity to describe and differentiate your page content to search engines (including non-user-facing information such as meta tags that provide a description). Finally, you should avoid looking like you’re attempting to game the system by misrepresenting your content or artificially inflating page ranking via SEO spam. I’ll cover all these points eventually; this post is dedicated to the first bullet.

Don’t confuse the crawler!

One consistent (but not necessarily the most critical) component of SEO involves the mark-up or code of your web pages. Search engines employ programs called crawlers to retrieve and index content on the web. If your pages contain code errors or otherwise confuse the crawler, search engine results can be compromised and not in your site’s favor. Good quality mark-up also increases the usability of your site, resulting in happy visitors that stick around longer.

Here’s a simple list of rules you can use to help crawlers successfully index your site.

Fix obvious code problems in your site
Link consistently
Define clear crawling boundaries

Your pages should be well-formed and free of coding issues. Page hyperlinks should point to existing content and written in a consistent way (that is, all links to the same destination should be identical in case and syntax). Finally, large sites should provide an index or robots.txt file that describes the site content you want crawled. I will cover the first two bullets below.

Fix Code Problems with Expression Web Diagnostics

If you are not already practicing web standards, the SEO benefits of using web standards might help motivate you. If your markup is syntactically correct and adheres to the rules of your page’s doctype declaration, you reduce the work required to crawl your content. The faster a crawler can get through your site, the faster results for new content will be available to web searches. Expression Web makes it very easy to keep tabs on the quality of your HTML. Open up any page in the tool and both the status bar (at the bottom of the application) and code editor provide immediate feedback regarding the presence or absence of mark-up errors.

In the following screenshot, I’ve opened up a version of http://msn.com in the Expression Web code editor. The status bar shows me right away that there is a mark-up error on the page. If you click the warning icon in the status bar, you’ll get a pop-up menu that allows you to jump to the coding problem or run a complete compatibility check. If you choose to jump to the code editor and there are multiple code errors, you can press F8 to jump to the next code error.

To run a comprehensive report for your site, select Compatibility Checker from the Tools menu, which opens the following dialog.

This dialog lets you check your HTML/XHTML and CSS compatibility against a number of different doctypes and browser versions. You can also easily restrict results to the current page, all open pages, or your entire site. Choose your settings and click the ‘Check’ button to send the code checker on its way. Results pop up in the Compatibility panel.

You can double-click compatibility errors in the output panel to jump directly to the problematic code. Hover over the highlighted issue with your pointer, and a pop-up tooltip describes the problem diagnostic and guidance for resolving it. You can also use the F8 key to move forward and back through report results on the current page (F8 moves to the next problem, Shift-F8 will take you back).

Reaping the Rewards of Consistency

As in many things, there is a place in SEO work for being consistent as well as a place for differentiating yourself. When it comes to putting links in mark-up, there is a particular value on standardizing on a consistent format for URLs.

Search engine algorithms are complicated and constantly evolving but all modern engines analyze links to pages as a critical part of indexing pages and providing page ranks. Links tell the search engine there is other site content it should crawl, and links build a map of inter-relatedness that defines the relative value of page. A large number of incoming links to a target page is a sign that the destination represents especially valuable or authoritative content. This is true both for links coming from other sites and links that originate within your own site. (Numerous high-quality external incoming links, of course, are most valuable for elevating search rank.) For best search results, you should insure that links point to content that actually exists. It’s also important that links are expressed in a consistent way. Components of a URL are, technically, case-sensitive; crawlers can therefore potentially divide page rankings between URLs that are identical except for casing or other differences (described below).

Expression Web provides help for both these problems. First, you should regularly run the broken links report. To do this, open your site in Expression Web. Click the Site View tab and then click Reports at the bottom of this view to see a list of reports that Expression Web can run for you, including several that relate to hyperlinks in your site.

Next, click the report titled ‘Broken hyperlinks’ and you’ll see the following screenshot. In the example below, I’ve neglected to properly format an external hyperlink. Expression Web has also determined that a link to an embedded image is in good shape.

To fix the problem, double-click the reported problem in the report to open a more powerful version of the Edit Hyperlink dialog.

This dialog lets you jump to the link in the page itself for correction (just click the ‘Edit Page’ button). Or you can the correct URL in the dialog and apply the link fix to all pages or a subset.

Once you’ve fixed all broken links in your site, you should review all internal links to insure they are expressed in a consistent way. As mentioned previously, most parts of a URL are case-sensitive. Web servers that run non-Microsoft operating systems might return entirely different content for http://contoso.com/mypage.html than http://contoso.com/MYPAGE.HTML. Search engines can therefore rightly regard these links as unique (depending on other factors). If the links actually point to the same content, search results are split between them, diluting the rank of each URL. A good practice, therefore, is to case all URLs in a consistent way, such as using all lower-case capitalization.

There are several other URL formatting issues you should be aware of (and fix in your site):

Web servers have a notion of a default document for a URL. http://contoso.com and http://contoso.com/default.html for example are two URLs that can resolve to the same page. Using both of these URLs throughout a site to link to your homepage is bad for SEO. Page ranking for incoming references to a single page can be split into two, making the SEO value of each URL weaker than if they were considered one. So you should pick one form of the URL and use it consistently throughout your site.
Another subtle problem involves trailing slashes. http://contoso.com and http://contoso.com/ are treated as two distinct URLS by crawlers, even if each URL resolves to the same page. For best SEO results, you should consistently either avoid or include a trailing slash in your internal links.
Many sites support URLs with and without a leading ‘www’ hostname prefix. For sites like this, URLs such as http://constoso.com/mycontent.html and http://www.contoso.com/mycontent.html split page ranking, so use only one or the other to link to your content.

There are several ways to resolve the problem of inconsistent hyperlinks. The most straightforward method is to manually review and correct all internal links in the Hyperlinks report. To display the Hyperlinks report, go to the Site View tab, and click Reports in the bottom tab. Select Site Summary from the drop down menu in the upper left, and click Hyperlinks. Notice the status bar reports the number of broken links that have been found so far and also differentiates between internal and external links.

Click the ‘Hyperlink’ column name to sort by the link destination and more easily compare and identify problematic URLs. (To reduce the number of links in the report, you can click the green arrow on the Destination column to create a custom filter that ensures the list only contains Internal URLs.) If you find any problem URLs, double-click the URL in the list to correct and apply your hyperlink changes to all files across your site, in a single step.

You can also use Expression Web’s Find and Replace functionality to scan and modify internal hyperlinks. Hit CTRL-F or choose Edit > Find to open the Find and Replace dialog. The HTML Tags tab provides special search functionality that uses mark-up to locate and modify values:

Pull down the ‘Find tag’ dropdown and select ‘a’ in order to run a simple query for all <a> tags in your site. Be sure to select ‘All pages’ under ‘Find where’. Expression Web presents the results in the Find panel, which you can review for URL consistency issues. Double-clicking a result opens the associated page in the editor and jumps to the appropriate code for editing.

The Expression Web Find and Replace dialog has additional useful and powerful capabilities. Let’s say you have a mixture of internal references to your web site both with and without a trailing slash and you’d like to correct that. You can use the Find and Replace dialog to locate all <a> tags with a particular href attribute value and make them uniform. To do so, in the Find and Replace dialog box, on the HTML Tags tab, select <a> as before in the ‘Find tag’ dropdown. Now, let’s refine the search rule by clicking the ‘HTML Rules…’ button to open the HTML Rules dialog:

Click ‘New rule…’ and then select ‘With attribute’ from the dropdown menu. Next, specify the attribute (‘href’) and attribute value (the URL you’d like to correct) that should be used to filter results. Here’s what the dialog looks like using the example case I’ve provided above:

The search tool will now scan all pages looking for <a> tags with an href value equal to http://contoso.com. Now, let’s specify that these should be updated to an attribute value of http://contoso.com/ (which has a trailing slash). Click ok in the ‘HTML Rules’ dialog. In the ‘Find and Replace’ dialog, select ‘Set attribute value’ in the ‘Replace action’ dropdown. Specify ‘href’ in the ‘Attribute’ dropdown and populate ‘To:’ with the value you’d like as a replacement value, like so:

Click ‘Replace All’ and you’re on your way. Note the ‘Match case’ option in the ‘Advanced’ section. This option will allow you to easily locate and correct casing problems in URLs. Simply specify the URL you’d like to find, make sure ‘match case’ is not enabled, and provide a replacement value. The search tool will locate all occurrences of the URL in a case-insensitive way and apply a consistently cased value that you specify.

What Next?

After cleaning up obvious mark-up issues that confuse the crawler, it is time to think about how to increase the useful information in your mark-up that will maximize your page rank and the likelihood that a user will click-through to your site. Expression Web can help with this, too, a topic that I will cover in a post to be published shortly.

Michael Fanning
Principal Architect, Microsoft Expression Web

Simplify Your Add-In Development with the Extensibility Tester Add-In

Erik Mikkelson — Wed, 09 Jun 2010 19:54:00 GMT

I created the Extensibility Tester add-in to provide Expression Web 4 developers a way to test out ideas and troubleshoot their add-ins without the endless cycle of edit, save, and refresh.

The add-in panel lets developers evaluate JavaScript expressions from within the panel, giving access to the full extensibility model. This allows add-in developers to interact with the Expression Web application while seeing all output, errors, and events that come from the interaction.

Click here to download the Extensibility Tester add-in. Once you’ve downloaded it, you can install it from within Expression Web 4 via the Add-Ins Manager under the Tools menu.

Using the Extensibility Tester Add-In

Once you have installed the Extensibility Tester add-in you can display it via Tools -> Extensibility Tester. Enter any JavaScript expression into the Input box and click Evaluate. The resulting output or error messages appear in the Output and Error boxes, respectively. Extensibility events are logged into the Events box as they are fired, with the most recent event on the top. The Clear All button clears all the textboxes if you want to start from a clean slate.

The JavaScript expression is evaluated within the global scope, so variables you create are available from evaluation to evaluation (instead of falling out of scope after the evaluation is completed and not being available). This can save you quite a bit of typing, but comes with one small gotcha: these variables are properties of the window object and must be declared without ‘var’ (see example in image above).

Here are a few expressions you can try to see some of the cool stuff you can do with the extensibility model:

xweb.document.selection.set(10,100);
Xweb.document.selection.insert(“text”);
xweb.application.newdocument("HTML 4.01 STRICT");
xweb.document.getElementsByTagName("div").length;
xweb.document.getScriptElementByCode("var foo = 1");
xweb.document.replaceRange(15, 20, "replacement");

Let me know what you think!

Erik Mikkelson
Software Development Engineer in Test, Expression Web

Easily create an Add-in for Expression Web 4 with the Add-in Builder

Anna Ullrich — Mon, 07 Jun 2010 18:57:00 GMT

With today's launch of Expression Web 4, we’ve made extending Expression Web’s functionality easier than ever. Developers can create Add-ins for Expression Web by using HTML, JavaScript and CSS standards they already know! We have also simplified integrating your Add-ins into Expression Web’s Panel and menu system using XML. In order to make it even easier, we are providing an Add-in on the Expression Community site that makes it super simple to build other Add-ins. It’s a classic Chicken or the Egg problem solved with the “Add-in Builder”. Click here to download the Add-in Builder. Once you have downloaded it, you can install it within Expression Web 4 directly via the Tools -> Add-ins menu! Click the Install button and choose the .xadd file you just downloaded.

Before we get started building an Add-in with the Add-in Builder let's take a look at the exact XML used in order to integrate the Add-in Builder itself into Expression Web 4. It’s pretty simple and very straightforward.

<name>Add-in Builder</name>

<description>Chicken or the Egg?</description>

<command id="AddinBuilderCommand"

onclick="xweb.application.showModalDialog('AddinBuilderTestPage.html',

'Add-in Builder','dialogHeight:500;dialogWidth:700;resize:yes')">

</command>

</addin>

As simple as it is, learning and authoring new XML syntax can be time consuming and is largely based on trial-and-error. The Add-in builder provides a user-friendly interface that makes it simple to generate the XML and all the associated content files. In addition, the add-in you define is created in the correct location and a site is created for you inside of Expression Web 4 for you. Why is that cool? Simple, once your add-in is generated you can live edit it just like any other site!

We’ve cleared all of the hurdles for you and now as a Web Developer you can focus on building the HTML, CSS and JavaScript inside of an Expression Web panel or dialog to build powerful new functionality instead of how to integrate your ideas into Expression Web itself.

1. If you haven't downloaded the Add-in already you can download the Add-in Builder from here. Install the .xadd file in Expression Web 4 via the Tools -> Add-ins menu. Click the Install button and choose the .xadd file you just downloaded.

2.Once you have installed the Add-in Builder add-in you can access it in Expression Web 4 via Tools > Add-in Builder.

3.The first step is to describe your add-in, including name, description, homepage, and version. (I'll publish another post in the near future to describe the other more advanced options in this dialog.)

4. To create a panel for your add-in, click Add Panel. Name, Source, and ID are required fields.

5. Click Insert, and then click Create Add-in. That’s it; it’s that easy to create your own Add-ins.

After the Add-in is created, a new site appears in Expression Web 4, with your Addin.xml file and an empty html file (the content of the panel you just defined!).

At this point, restart Expression Web 4. Upon restarting, the Add-in panel (or, if you selected, a dialog or assembly) will automatically be installed and available for use.

7. If you created an Add-in panel, go to the Panels menu and click the name you gave for your panel.

A panel hosting the empty html page opens.

The panel can be docked, moved, pinned, etc… within the Expression Web 4 application just like any other default panel!

8.Open panel.html from the site Expression Web created for your Add-in. Add <h1>Hello World</h1> to the page and save it.

9.Right click inside your open “My First Panel” tab and choose Refresh. You should be able to immediately see the HTML you added rendered in your panel!

Marc Kapke, Software Development Engineer in Test

Rule over the true powers of Find

Expression Web Team — Thu, 29 Apr 2010 00:37:00 GMT

A guest post for the Expression Web Team Blog by Morten Rand-Hendriksen

If you use Expression Web or most any text editing and reading software, you likely already use the Find feature to search for text. But if you’re one of the few who is not using the Find feature in Expression Web, you are likely wasting time doing repetitive tasks the program can do for you far more efficiently. I don’t know about you but for me time = money and I like to spend as little of the former to get as much of the latter as possible. And to that end Find is an important tool in my toolbox. In this post, I’ll breeze over the basic Find features everyone should already be using, and then dive deeper into a few scenarios for using more advanced Find options called HTML Rules.

Simple search is the tip of the Find iceberg

The basic operation of the Find tool in Expression Web is simple: hit Ctrl+F on your keyboard and the Find and Replace dialog pops up.

From here you enter the string you want to find and click either Find Next or Find All. Using Find in this manner is an efficient way to dig through your long pages. For bigger problems that reside throughout multiple pages, read on

Simple search across multiple pages

The majority of my work revolves around WordPress which is a fairly small CMS. Even so the current installation of WordPress running on this computer contains an astounding 3,475 files sorted in 375 folders. Finding a particular string of code in that pile of files by opening and searching each page one at a time would take hours if not days even if I managed to narrow down my search to just a few folders. Solution: select the “All pages” option to search every page in your site. If you are searching text that appears in the code of your page, make sure “Find in source code” is also selected in the Advanced column.

Example of simple search saving me an extraordinary amount of work

While working on a site I discovered that the WordPress function called wp_list_pages() wasn’t really doing what I wanted it to. To get it to work for my purposes I needed to find the file in which that function was defined but I also needed to know if there were any other elements currently using that function that would be affected by any change I made. In other words I needed to sort through my 3,475 files and find every instance where the string “wp_list_pages” showed up.

From these search results in the Find panel, I was able to ascertain not only where the original function was defined – the very first Find result in wp-includes/post-template.php – but I now also had a clear idea of exactly what other pages would be affected if I were to change the function. Since the search produced 109 results in 72 pages and only 5 of these were the original function definition, it’s safe to say altering the original function was not the best idea so I decided to write a new function with a new name based on the original. To get to the original function all I had to do was double-click on the search result and Expression Web opened up the file and highlighted the entry I was looking for.

Example of replacing what you find

Under my current WordPress work environment I have 20 individual themes I’m working on. Each theme controls the look and functionality of a separate site. In each of the themes there is a file called sidebar.php that defines what the sidebar should look like. This template is called by a custom WordPress function called get_sidebar() and shows up in all the templates as <?php get_sidebar() ?>. What if I wanted to change these function calls to a more generic php include function? A quick Find of the string “get_sidebar” tells me there are 213 occurrences of the function call in 213 pages so that’s a lot of work. Unless I use Find and Replace.

I hit Ctrl+F to open the Find and Replace dialog, and then I click the Replace tab. In the Find what box I enter the target string <?php get_sidebar() ?> and in the Replace with box I enter the new string <?php include ('fileName.php'); ?> . If you have more than one page selected in your site or if you check the “All pages” option, the Find and Replace dialog also provides the Replace All or Find All buttons. To make a sweeping change of all the calls to the get_sidebar() function I clicked the Replace All button and Expression Web made the substitutions on 213 pages for me in less than 30 seconds. The only thing I have to worry about is making sure I replaced the right function with the right new function.

Use HTML Rules for targeted searches

So far we’ve looked at simple text searches. But from time to time you may need to do more specific searches to dig out particular instances of a query. For example, you may want to find only those links that have particular attributes, or content wrapped with a specific tag within a certain part of your site. Using global search for this is not particularly productive because you may end up sifting through hundreds or thousands of search results. To help you zero in on what you are looking for, Expression Web lets you apply HTML Rules to your search, which enable you to include or exclude results based on conditions you specify.

Once you’ve entered your search term in the Find and Replace dialog, click on the HTML Rules button to open the HTML Rules dialog. From here you can define a single or a series of conditions, nested or individual, to refine your search. To add a condition click New rule and a drop-down menu appears. The drop-down menu gives you the basic conditions you can use: With Attribute, Without Attribute, Containing, Not Containing, Inside Tag and Not Inside Tag. These are all Boolean (true or false) conditions. To see how it works in the real world consider the following two examples.

HTML Rules Example 1: Target nested list items only in the sidebar

Most websites, including Wordpress blogs, have separate sections including a header, content, sidebar, and footer plus others. Let’s say I want to add a class to all the individual list items in my Wordpress sidebar. But there are two problems: First of all, there are other lists outside the sidebar area in my page, so those lists need to be excluded. Secondly, my sidebar actually features two sets of nested unordered lists. So to target only the list items I want, I need to create a condition that finds only the list items contained in the sidebar and then only those that are nested within another list item.

To make this conditional search, I click the HTML Tags tab in the Find and Replace dialog, and select “li” in the Find tag menu. In the Replace action menu, I select Set attribute value. This reveals two new options in the dialog. For Attribute select class and in To write “newClass”. This will add “class=”newClass” to each of the list items found.

With the query and variables defined the HTML Rules button is available. I click HTML Rules to open the HTML Rules dialog and select New rule. First I need to target only the list items within my sidebar. The sidebar is contained within a div with the id “sidebar” so the first condition should be Inside tag

This reveals a new drop-down where I can define my target tag, in this case div.

Under the rule I just created there is now a new indented New rule option that lets me make a sub-rule. I set the condition to With attribute, the attribute to id, the next box to equals and the last box to sidebar. Combined these two rules will now target only instances of the <li> tag that are housed within a <div id=”sidebar”> tag.

To target only list items within list items, I also need to create a new rule with the condition Inside tag and the tag set to li. After clicking OK in the HTML Rules dialog box, my two rules appear in the Find and Replace dialog box.

When I click Find Next, Expression Web finds only the list items that are children of another list item that is housed inside the div with the id #sidebar. Since this is a conditional search and replace (or in this case find and add attribute) by clicking Replace I add the .newClass class to only these list items.

Warning: The HTML Rules you create will apply to all of your subsequent searches within the same document until you either alter the HTML Rules or click the Clear Rules button in the Find and Replace dialog box.

HTML Rules Example 2: Find links with missing title attributes

HTML Rules also lets you search for things that are missing, such as required attributes. For a web page to be fully accessible, all hyperlinks require a title attribute to generate ScreenTips. Let’s say you noticed that some of your category links that start off each of your articles don’t have the necessary title attribute. Searching for this missing attribute is hard because your pages will likely be littered with hyperlinks in the header, sidebar and footer as well as within each post. What’s needed is a set of HTML Rules that target only the article heads, and only links without the title attribute.

The easiest way to come up with the correct set of HTML Rules is to spell your search out by answering this question: What are you looking for? In this case the answer is: I am looking for all the links (a tags) that don’t have the title attribute that are contained within divs with the class .meta-tag.

Hit Ctrl+F to open the Find and Replace dialog and select the HTML Tags tab. Set Find tag to a and Replace action to (none). If any HTML Rules are currently in effect click the Clear Rules button to remove them.

Click HTML Rules to open the HTML Rules dialog and create a New rule. As the answer said earlier you are looking for all the a tags with a missing title attribute so in the condition select Without attribute and set the attribute to title.

To search only within divs with the class .meta-tag create a new rule, set the condition to Inside tag and the tag to div. Create a new sub-rule and set the condition to With attribute, the attribute to class, leave the next box on equals and type out the value entry-meta. With the HTML Rules defined click OK to close the dialog and click Find Next to search your page.

As with the examples earlier in this article HTML Rules searches can be done on the current document, selected pages or all pages in the site. Combined these techniques along with some smart find strategies makes this an enormously powerful tool.

Save your query

If you’ve made an unusually complicated set of HTML Rules you might want to tweak later and reuse, or you have a Find and/or Replace query you know you will need again, save your search query by clicking the Save icon in the Find and Replace dialog.

Make Find a part of your work process

Find is one of those tools you have to use a few times before you realize its full potential. Off the bat it just looks like any old find and replace text tool, but when you start using it you’ll quickly realize its way more capable than that, especially if you work with larger sites or ones you didn’t code yourself. There are caveats of course, most importantly that if you make sweeping site-wide changes to your code like in my last example you better make sure you are targeting the right string and replacing it with the correct one, otherwise you can do a lot of damage with a single mouse click.

Morten Rand-Hendriksen

Different types of hyperlinks

ToddMo — Mon, 26 Apr 2010 17:46:00 GMT

There are three types of links that can be used in a web page: relative, and site root relative, and absolute. Which one is correct to use depends on the location of the page to which it links.

Relative Links

A relative link points to a location that is relative to the current page. Having a link to “index.html” is a relative link that points to the “index.html” page in the same directory as the current page. Links can also be made to “../index.html” to go to “index.html” in the parent directory. You can also use links like “../images/mypic.jpg” to find an image in the images directory inside the parent directory of the current page.

The disadvantage of using relative links is that the link can break if you move a file to another directory and thus change the relative position of the link’s destination. If you move the file from within Expression Web, however, it will automatically fix all relative links for you (as long as you have site metadata turned on).

Expression Web uses relative links as the default when creating a new hyperlink.

Site Root-Relative Links

A site root-relative link points to a location that is relative to the root directory of the site. They begin with a slash “/”. Having a link to “/index.html” is a site root-relative link that points to the “index.html” page in the root directory of the site. One common use of this is to have all images in an images directory and then to link to images with links like “/images/mypic.jpg”.

The advantage of doing this is that the link stays the same no matter what directory the current page is in. This is also frequently used for linking in CSS files.

Expression Web started fully supporting site root-relative links in Version 3, Service Pack 1. Starting in that version, pages with site root-relative links are shown correctly in the design view. Expression Web will also correctly fix your links if you move a file that is linked to with a site root-relative link if you move the file within Expression Web (again, as long as you have site metadata turned on).

Note that you may get unexpected results when you use Preview in Browser from within Expression Web. This is because your browser shows your page from a local file – something like “C:\Users\myName\Documents\My Web Sites\mysite\index.html”. For a site root-relative link, your browser doesn’t know which directory to use for the site’s root so it will simply use “C:\”.

There is a simple solution to this problem, though. In the Site menu of Expression Web, open up Site Settings and click on the Preview tab. Make sure “Use Microsoft Expression Development Server” is checked, select “For all web pages”, and hit OK.

Now when you hit Preview in Browser, it will use an http://localhost address that has the site’s root set correctly and your site root-relative links will work correctly in your browser.

Absolute Links

An absolute link is simply one that includes the entire path to the file like “http://www.contoso.com/news/index.html”. These are generally used for links that need to point to a different site than the one on which your page is located.

Expression Web supports these links as well.

Todd Moscinski, Senior Software Development Engineer

Microsoft Expression Web

Service Pack 2 for Expression Web 3

Anna Ullrich — Tue, 06 Apr 2010 20:33:41 GMT

The team has released a second free service pack for Expression Web 3, which provides the following improvements:

The SuperPreview feature now supports Firefox 3.6. If Firefox 3.6 is installed on your
computer, it will be available in SuperPreview.
When editing PHP files, you may have been asked to update related hyperlinks on the page. If you did so, some PHP tags may have been removed. PHP tags are no longer removed when you update related hyperlinks.
When you renamed a PDF file from the Folder List panel, the PDF file
became corrupted and could not be opened. PDF files now save normally.
Expression Web 3 would crash if the list-style-image property
was used in a CSS file. Using the list-style-image property in a CSS file no
longer causes Expression Web to crash.
SuperPreview sometimes crashed while launching because of a
problem that occurred when locating Firefox on your computer. SuperPreview
no longer crashes while locating Firefox.

You can install Service Pack 2 if you have Expression Web 3 or Expression Web 3 Service Pack 1 installed on your computer.

Using an Access 2007 database with ASP.NET 3.5 and Expression Web 3

Expression Web Team — Mon, 29 Mar 2010 21:58:02 GMT

One question that we occasionally hear from Expression Web users is “How do I use my Access 2007 database on my ASP.NET site?”

First, the not so great news: Expression Web 3 supports ASP.NET 2.0, 3.0, and 3.5. These versions of ASP.NET do not support Access 2007 data connections.

Now, the great news: ASP.NET 4.0 supports these data connections – and Expression Web 4 (not yet released) supports ASP.NET 4.0. Even better – as we announced at the MIX 2010 Conference, if you have purchased Expression Web 3, you will get Expression Web 4 for free! (See here for details).

Until Expression Web 4 is available, you can use the following steps to use your Access 2007 database in a site in Expression Web 3.

First, your system and server must have the 2007 Office System Driver: Data Connectivity Components installed. Many ASP.NET hosts have this installed, such as DiscountASP. Once this is installed, you’re ready to start working.
Drag a SqlDataSource control from the Toolbox panel and drop it into the Design view of your page. (The SqlDataSource control is under the Data category in the section of ASP.NET controls,)
In the Design view of your page, next to the SqlDAtaSource control, click Configure Data Source.
On the Choose your Data Connection screen, click New Connection.
In the Choose Data Source screen, set Data Source to <other>, and Data Provider to .NET Framework Data Provider for OLE DB, and click OK.
In the Connections Properties dialog, click the OLE DB Provider menu and select Microsoft Office 12.0 Access Database Engine OLE DB Provider. In the Server or file name box, enter the full path to your database, and then click Test Connection”. If your test connection succeeded, you’re on the right path so far! Click OK in the Connection Properties dialog, and then click Next in the Configure Data Source dialog.

Note: If you just installed the 2007 Office Driver: Data Connectivity Components you’ll need to restart Expression Web 3 before you see “Microsoft Office 12.0 Access Database Engine OLE DB Provider” in the list. Also, you may need to modify your “Server or file name:” information once you upload your site to a server.

Save your new Connection String and click Next.

Now it’s time to configure the query for your database connection.

Select the columns you want to display from your database, and click Next. In my example, I selected Amount, DonorName, and CampaignName.
Click Test Query. If the test was successful, then click Finish.

Now you’re ready to add any ASP.NET data control to your page and set up the control to your the data source you just added to the page. In the following screensheet, you can see the GridView control that I placed on my page and set to use my SqlDataSource1 data source.

And now I’ll preview my page in SuperPreview to make sure the data is displaying as I want.

Once Expression Web 4 is available, I’ll write a follow-up post with the (much easier!) steps on how to use an Access 2007 database as a data source in your site.

Justin Harrison, Program Manager
Microsoft Expression Web

Styling MySpace profile page using Expression Web Part 2

sayuri — Wed, 24 Mar 2010 21:41:00 GMT

In Part 1 of this blog post topic, I covered the following steps:

Clear the default page background and table borders
Set the custom background color and image
Set the background color for the context boxes tables
Set the text color and size

At the end of the 4 steps above, my profile page looks like this.

In this blog post, I'm going to share how to style the text in the two content areas highlighted in green. For the content area on the left, I use the following css to style the profile name. In my example, the text would be "Pei Pei".

.nametext {
    display:table;
    color:cccccc;
    font-size: 16px;
    font-family: Trebuchet MS;
    margin-left:10px;
}

This is how the result looks like:

Next, we want to style the "music type" text below the profile name. In this case the "Indie/Pop/Rock" that is hardly legible. I use the follow css:

td.text strong{
     color:cccccc;
     font-size: 12px;
     font-family: Trebuchet MS;
     margin-left:10px;
}

This is how the result looks like:

Next, I use the following css to style the title in the Blog Entry content area:

btext {
color:cccccc;
font-size:9pt;
}

This is how the result looks like:

The downside of styling it this way also style the text in the Friend Space content area. But I prefer to hide that content area anyway.

I used the following css to hide it:

table.friendSpace {
display:none;
}

That's all for this blog post. In the next post, I'll share how to customize the Contacting <Profile Name> content area.

Sayuri Wijaya Gould
Program Manager in Expression Web

Styling MySpace profile page using Expression Web Part 1

sayuri — Thu, 18 Mar 2010 18:54:00 GMT

As most of you already know, MySpace.com is a popular social networking Web site where individuals, bands/musicians and businesses can have a presence on the Internet without the need to have their own Web site. It's very easy to create a profile on MySpace and it's easy to "skin" the public profile page by using one of the themes provided on MySpace or by applying one of the many profile page theme templates available on the internet. However, to customize the profile page theme beyond that is not a straightforward task.

Recently, I created a musician profile for myself on MySpace. Since I'm in the Web design/development industry, I couldn't live with the Myspace profile theme templates available on the internet. MySpace doesn't provide themes for musician profile anyway. I want to fully customize my profile page look & feel so that it reflect me and my music 100% or as close as my design ability allows me to. So I started looking around for ways that I can do that. From reading postings on the internet, I learned that styling a MySpace profile page is all about overwriting the default CSS. It's very similar to styling a SharePoint site or a Blogger site. After I wrestled with MySpace CSS for about a week, I thought I'd share what I learned so that. hopefully, other MySpace users can style their profile page in a shorter amount of time that I took.

There is a lot to share on this topic so I'm going to split the content up into multiple blog posts. In this blog post, I'm going to show you how to set a background image, background color and text color to your MySpace profile page. In the upcoming blog posts, I'm going to show you how to tweak the style in more detail by adding padding and by creating custom contact table.

My profile looks like this before I customize it:

I created a background image and I uploaded it to my 3rd party hosting account. Then I use the following CSS to set the background color and image for my profile page:

<style>

body, .bodyContent {
background-color: 000000;
background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
background-position: Center;
background-attachment:scroll;
background-repeat: repeat-y;
}

</style>

To apply it to my profile page, I have to do a little hack since for a musician profile, MySpace doesn't provide any user interface for me to apply custom CSS. So I clicked on Profile -> Edit Profile on the top navigation. Then I clicked on the Musician Profile tab.

Then I clicked on the Edit link for the Musician Bio field and pasted the code above into that field. After I submitted the changes, my profile page looks like this:

As you can see, the background image has been applied but the white background for the middle section still applies. So I used the following CSS, in bold, to clear the background:

<style>

table, tr, td {
background-color:transparent;
border-style:none;
border-collapse:collapse;
background-image:none;
}

body, .bodyContent {
background-color: 000000;
background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
background-position: Center;
background-attachment:scroll;
background-repeat: repeat-y;
}

</style>

After I added the above block of markup into the Musician Bio field, my profile page looks like this:

Now the white background is cleared but the text is illegible. So we have to set the background color for the content boxes. I used the following CSS to set the background color for the context boxes tables.

table table table {
  border-style: solid;
  border-width: 1px;
  border-color: #FF9999;
  background-color: #800000;
}

table table table table {
  background-color: #800000;
  border-style: none;
}

And the following CSS to set the text color and size.

body, .bodyContent,table , tr, td, li, p, div {
  color: cccccc;
}

a:link {
  color: ff6600;
}

a:hover {
  color: cc3300;
}

a:visited {
  color:lime;
}

Note: Paste the last two blocks of CSS markup after the first two blocks.

And now my profile page looks like this:

Now my profile page looks much better. But we can still tweak the style by adding padding in some areas. I'll cover that in the next blog post.

Sayuri Wijaya Gould
Program Manager in Expression Web

Increase your search rankings with better web page titles

Anna Ullrich — Fri, 12 Mar 2010 01:14:00 GMT

Are you still waiting for a flood of visitors to find your site? Wondering if you need to invest in some online ads or an SEO specialist? Before you do any heavy lifting, first try the simple task of reviewing the titles of your web pages for their search relevance. I just published the following post to introduce you to one basic SEO concept and also show all of the options for efficiently reviewing and editing web page titles in Expression Web.

Read the entire post here:

http://blogs.msdn.com/anna/archive/2010/03/11/increase-your-search-rankings-with-better-web-page-titles.aspx

Anna Ullrich

Hot or Not? HTML 5

Expression Web Team — Tue, 09 Feb 2010 22:54:43 GMT

If you’re a web developer, you’ve probably heard a lot about HTML 5, the all-in-one standard to replace HTML 4.01, XHTML 1.0, and DOM Level 2 HTML. The HTML 5 specification is a 500+ page tome that explains in precise detail every element, attribute and feature that’ll power the next generation of Web applications - part documentation of what already makes the Web work today and part innovation. What better way to look at HTML 5 and the future of the Web than through a vestige of the old Web: What parts of HTML 5 are Hot…or Not?

The Web Hypertext Application Technology Working Group (WHATWG), founded by people from Apple, Mozilla, and Opera set out in June 2004 to figure out what was next for HTML. Six years later, we’re a bit closer to knowing what’s next, however, the W3C HTML 5 group estimates the specification won’t be complete until 2022 (or when there are complete implementations in two browsers, whichever comes first). Having to wait until 2022 to play with HTML 5? Not Hot. Major browsers adding more and more support for various aspects of the HTML 5 draft everyday? Hot.

Most web developers use the names of classes and ids to label and identify their page structure (for example, <div id=”header”>, <div id=”footer”>). With similar objectives, HTML 5 includes new elements to define the structure of your pages, for example, <article>, <section>, <aside>, <footer>, and <nav>. Using these elements will help you semantically structure and understand your markup, and can help search bots and accessibility tools like screen readers better understand your pages. Verdict? Hot. The <div> tag can stop being the Swiss army knife of layout.

<Video> and <Audio> are two major new features in HTML 5. Now you don’t need to use Flash or Silverlight to play media. For your customers, this means not having to install plug-ins, and a consistent experience across all sites for media consumption. Hot? maybe…

Unfortunately, the <video> and <audio> tags don’t define a single video or audio format for all browsers to support – and as a result, depending on the browser that your customer is using, they may or may not be able to watch video or listen to audio on your page. Furthermore, if you depend on advanced features in Flash and Silverlight like content protection or accessibility, you currently won’t find them in <video> and <audio>. Verdict? Until browsers settle on a de facto video and audio standard for HTML 5, Not hot.

In an effort to be backwards compatible and reflect how people actually use HTML today, HTML 5 is compatible with a huge number of different coding practices. Opening and closing tags can be optional. Some elements can be self-closing. And attribute quotes are not necessarily required either. This is just the tip of the iceberg of changes you’ll run into. HTML 5 deprecates some tags, and un-deprecates others. For example, the <i> tag is back – and this time, it doesn’t represent italics. The <i> is used in dialogue to refer to text in an alternate voice or mood.

Verdict: Not hot. It’s nice that HTML 5 is bending over backwards to be backwards compatible, but the use of re-purposed deprecated tags instinctively makes my skin crawl. Plus, having so much flexibility means that markup is going to vary in style even more between pages, and it may be hard for newbs to figure out the basics while grappling with questions like, “Do I have to close this tag? Can this tag be self-closing? Do I need to use single or double quotes here? Do I even need to use them at all?”

These are just a few of the new markup-based features in HTML 5 that are notable. There are countless changes in the DOM API, and still more markup based changes – like new form controls and validation (these are definitely Hot) that enable you to specify input types, such as a phone number, and then let the browser validate it for you.

Deep within the tome that is the HTML 5 draft specification there are many great changes for web designers. Just because they’re not hot now, doesn’t mean that they won’t be later! These changes just need to find their way out from awkward draft stage to final Hot specification.

Justin Harrison
Program Manager, Microsoft Expression Web

SuperPreview and Firefox 3.6 release

Alex Moskwa — Fri, 22 Jan 2010 19:12:00 GMT

SuperPreview users probably want to know if the newly released Firefox is compatible with our application. Currently, SuperPreview does not support Firefox 3.6 due to changes in Firefox that require engineering work on our end. However, we made specific updates in our Expression Web 3 Service Pack 1 in preparation for precisely this circumstance. In Service Pack 1 we added the ability to do incremental updates to our browser support outside our normal release cycle. These changes mean we can release browser support updates in a matter of weeks rather than months.

We've already done a lot of the necessary leg work with the Firefox 3.6 beta and RC builds. We're waiting on some final 3.6 related items to be released from the Firefox team, then we'll enable support for Firefox 3.6 in SuperPreview. Be on the lookout for another post to this blog when a downloadable update is available.

In the meantime, if you haven’t already updated, install Expression Web 3 Service Pack 1.

Alex Moskwa

Program Manager

Microsoft Expression Web