Expression Web team blog

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 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

Update to this blog post – this offer is extended through Jan 31, 2010!

For a limited time there is a discount of 30% on all Microsoft Expression version 3 products (Microsoft Expression Studio + Expression Web, both full and upgrade versions) when purchased through the Microsoft Online Store. A special promo code is NOT required and this is available only in the *US*. This offer is valid through December 28, 2009 11:59 p.m. Check it out:

http://store.microsoft.com/microsoft/Expression-Web-3-Full/product/7AD09DC1

A few months ago, I went to Paul, who is one of our Lead Developer to suggest, what I thought is a great new feature, that we should enable our users to register their own Site Templates so that they will be available on the New Site dialog.Then Paul kindly told me that I can do that today. I was pleasantly surprised. But when he patiently walked me through the process, I thought "How would anyone, like me, know how to do this without any instruction?".

After doing some searches online, I noticed that some of you already figured this out. But for others I hope these insights help. It requires you to do many steps manually and you have to have administrator rights to your machine. Hopefully, in future versions of Expression Web, we are able to improve the experience.

So here it is:

The Site templates shipped with Expression Web can be found in a folder like this, depending where it is installed. C:\Program Files\Microsoft Expression\Web 3\en\WEBS. Out of the box, the folder has the following contents.

Here's an example contents of a template (*.tem) folder:

 

Here's the contents of the ORG1.INF file:

So, here's the workflow to register your custom Site Templates in Expression Web 1, 2 or 3:

1. Create a folder in C:\Program Files\Microsoft Expression\Web 3\en\WEBS folder for your template. Your folder must have a suffix ".tem" for template.
2. Drop the files for your Site template into the folder you just created. The file structure should be flat and should have any sub-folder.
3. Note that the image files will be created inside a sub-folder named "Images" when a Site is created based on your template so adjust the code for your files accordingly.
4. Create an INF file using notepad or other program with the format like the above ORG1.INF example.
5. Specify the template name, description and the thumbnail image to display on the New Site Dialog.
6. List out all the files in your Site template and for each file, specify its destination folder.
7. If your Site template is in a language other than US English, you can also change the LCID from 1033 (for en-us) to the appropriate Language ID. See LCID chart on MSDN.
8. Take a screen capture of the home page of your template Site and save it in this folder as well. This image will be use as the preview thumbnail for your Site template in the New Site dialog. Specify the name of this image in the preview field in the INF file as well.
   

To test this out, I added a Site template I downloaded from Zen Garden and here's how my New Site dialog looks like:

Sayuri Wijaya Gould
sayuriw@microsoft.com
Expression Web Program Manager

Last month we blogged about a Firefox bug our customers encountered using SuperPreview with Firefox version 3.5.5. This bug caused Firefox 3.5 to stop working with SuperPreview on Windows XP and Windows Server 2003. With the newest release of Firefox 3.5.6, the Mozilla team has fixed the aforementioned bug. We recommend that you update to this latest version of Firefox 3.5 to use it again in SuperPreview. If you followed the steps in the previous blog post to revert to an earlier version of Firefox, you may now turn auto-updates back on.

Michelle Rosenthal
Microsoft Expression Web

Raena Jackson Armitage , SitePoint Community Leader and hand-coder, recently checked out the code editor and PHP support in Expression Web 3 and wrote up a review of her experience:

http://articles.sitepoint.com/article/expression-web-3-php

[Update 12/16/09: Firefox 3.5.6 has fixed the bug so it can again be used in SuperPreview.  If you followed the steps below to revert to an earlier version of Firefox, you may now turn auto-updates back on.  Firefox will then update to 3.5.6 and continue to work with SuperPreview.]

Unfortunately, this particular Firefox update included a change that broke the ability of 3^rd party applications, such as SuperPreview, to embed Firefox on Windows XP and Windows Server 2003.

Those affected by this issue will see the error text:  "Attempted to read or write protected memory.  This is often an indication that other memory is corrupt." 

Until Firefox releases an updated version with the fix, the only solution is to roll back your version of Firefox to 3.5.4 or earlier.  To do this you will have to:

1. Uninstall the 3.5.5 version of Firefox
2. Reinstall Firefox 3.5.4 from ftp://ftp.mozilla.org/pub/firefox/releases/3.5.4/win32/en-US/Firefox%20Setup%203.5.4.exe

Once you've reinstalled you will need to turn off auto-updates for Firefox to ensure it doesn't update back to 3.5.5. To disable the auto-update functionality in Firefox, follow these steps:

1. Disable your Internet connection so Firefox does not attempt to automatically update.
2. Start Firefox.
3. On the Tools menu, click Options.
4. Click Advanced.
5. Click the Update tab.
6. Disable auto-update.
• Click to clear the Firefox check box OR
• Click the radio button to “Ask me what I want to do” when updates to Firefox are found.
7. Click OK to apply the changes.
8. Re-enable your Internet connection and restart Firefox.

NOTE: The above is a temporary workaround as this will also stop you from picking up all further updates of Firefox. 

The Firefox team is aware of the bug and has fixed it.  However, an updated version of Firefox containing the fix is not yet available.    We will update this blog when we have more information.

For those interested in the technical details:

Precise Firefox change that broke other applications:
https://bugzilla.mozilla.org/show_bug.cgi?id=521750

Bug logged that fixes the issue caused by the above:
https://bugzilla.mozilla.org/show_bug.cgi?id=526586

MSDN article including note on problems with this implementation in XP and 2003:
http://msdn.microsoft.com/en-us/library/9w1sdazb(VS.80).aspx

Alex Moskwa
Program Manager
Microsoft Expression Web

Internet Explorer 8 was an important release because it signaled a renewed emphasis on Web Standards at Microsoft. My team—which develops the authoring tool, Expression Web—is also pretty emphatic about Web Standards. We’re in the process of doing significant tooling (and retooling) so we can support existing and emerging specifications, reliably.

The Expression Web team recently shipped SuperPreview for Internet Explorer a FREE tool for performing cross-browser debugging in multiple versions of Internet Explorer, as well as helping migrate sites from earlier versions of IE to Web Standards in IE8. This is a subset of the full version of SuperPreview (which also supports Firefox) and which ships with Expression Web 3. You can download SuperPreview for Internet Explorer  here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677 or the full version of SuperPreview with Expression Web 3 here: http://www.microsoft.com/downloads/details.aspx?FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc&displaylang=en

 
Expression Web SuperPreview in vertical Side-by-Side mode

As part of our product planning process, we talk to, and observe web developers in their “natural habitats.” During these sessions, it was clear that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes developers to preview pages in multiple browsers, there are a host of other issues:

• Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
• The ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.

We built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. With SuperPreview you can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note, the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

 
SuperPreview in Overlay Mode

In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6.

In the SuperPreview UI, we drew inspiration from browser-based development/debugging tools like the IE Dev toolbar. SuperPreview provides similar DOM views of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. Like the IE Dev toolbar, the DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

SuperPreview in horizontal Side-by-Side mode showing the DOM tree

In doing cross-browser debugging, it’s pretty easy to spot differences between pages. But, identifying the offending page element can be trickier. It’s not immediately apparent whether an element, its parent, or even a sibling is causing the problem. In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its parent <div> for peculiarities. I also confirmed that the logo was rendering correctly in, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.com (http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline, fixed the problem.

Expression Web SuperPreview gives Web authors a powerful tool for visualizing and debugging cross-browser layout issues. And, SuperPreview for IE is free, providing a potent way for developers to move their pages forward in a Standards-consistent fashion. Please give it a try! To learn more about Expression Web and SuperPreview, check out:

Download SuperPreview for Internet Explorer: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Somasegar’s blog on Expression Web 3: http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

Erik Saltwell on Expression Web SuperPreview:

http://visitmix.com/News/Expression-Web-SuperPreview

Expression Web learning resources:

http://expression.microsoft.com/en-us/cc197140.aspx

- Steve Guttman, Product Unit Manager, Expression Web

Expression Web SuperPreview for Internet Explorer is a free stand-alone visual debugging tool that makes it faster and easier to migrate your sites from Internet Explorer 6 to Internet Explorer 7 or 8. Expression Web SuperPreview for Internet Explorer shows your web pages rendered in Internet Explorer 6 and either Internet Explorer 7 or Internet Explorer 8, depending on which version you have installed on your machine.

You can view the pages side by side or as an onion-skin overlay and use rulers, guides and zoom/pan tools to precisely identify differences in layout. You can even compare your page comp to how the targeted browsers render the page.

Expression Web SuperPreview for Internet Explorer not only shows a high-fidelity rendering of how pages will look on different browsers, but it also identifies the element’s tag, size and position, applied styles, and location in the DOM (Document Object Model) tree so you can quickly fix the error.

To download Microsoft Expression Web SuperPreview for Windows Internet Explorer, see:

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

If you’d like to debug your pages for both Internet Explorer and Firefox, download the free 60-day trial of Microsoft Expression Web.

Please note: DirectX must be installed on your computer before you can compare a web page to a PSD image. To install DirectX on your computer, visit the DirectX download page.

To discuss SuperPreview or Expression Web with others, try our forum at:

http://social.expression.microsoft.com/Forums/en-US/web/threads

Minal Agarwal is a web and graphics designer who maintains a helpful blog at http://saffronstroke.com/ which is full of tips and tricks for Expression Web users as well as CSS hacks and web page templates. Minal has also contributed several articles to http://www.dotnetcurry.com for their Expression Web category. Check it out:

As Steven posted earlier, if you try to display a password-protected page in SuperPreview, the program instead displays the page that appears when a site visitor tries to access the page without supplying login credentials.

I wanted to follow up Steve’s post to briefly clarify that SuperPreview does support NTLM authentication, which is commonly used by websites on corporate intranets. Pages on networks that use NTLM authentication don’t require the user to login to view the pages, instead, they rely on the site visitor’s Windows login credentials. So if your computer is on the same network as the page that relies on NTLM authentication, you should have no problems opening the page in SuperPreview. (For in depth information about NTLM, see http://msdn.microsoft.com/en-us/library/aa378749(VS.85).aspx.)

Anna

I'm Steven Schermerhorn - one of the developers that worked on the SuperPreview program provided with Expression Web 3. Ever since we released the first BETA version of SuperPreview for Internet Explorer, the Expression Web team has received a lot of constructive feedback about SuperPreview. One suggestion we frequently receive is to add support for password-protected web pages.

Currently, if you use either the BETA version or the finished version of SuperPreview to view a page that requires login credentials, instead of displaying the page you requested, SuperPreview displays whatever page normally appears when a site visitor tries to view a password-protected page without logging into the site. We weren't able to provide that support in time for this year's release, however I have one suggestion that might help you work around this: enable debug access to the website you are developing. How you or your server admin enables debug access to the website all depends on your server's configuration and I cannot document all scenarios here.

Once you've enabled debug access to your website, you can use SuperPreview to display your password-protected page by opening the URL using this syntax: http://www.example.com/default.php?user=joe , where http://www.example.com is your site's domain, and default.php is the path to your page, and joe is a valid username.

This basic debug access isn't a feature you want enabled in a live, publically accessible server environment, so you should also setup additional security for your debug environment, such as to allow requests from only a particular IP range or a specific port that isn't available outside your network. For what it's worth, I used this kind of debug environment in nearly every web application I developed in my former life as a web developer.

 Hope this helps!

-Steven

I just made my first contribution to the newish Gallery section of the Expression Community website where anyone can add content and templates to share. Here’s a screenshot of the current categories:

One of many cool things about the gallery is that you can select a friendly URL name for your contribution and it’s instantly generated. I chose LoremIpsum because I contributed a code snippet that enables Expression Web users to easily insert up to five paragraphs of Latin lorem ipsum filler text into their page. Here are the new code snippets as they appear in the Code Snippets list of of Expression Web:

Here’s the URL of my contribution:

http://gallery.expression.microsoft.com/LoremIpsum

To read the rest of my blog post, in which I show you how to install and use the Code Snippet, and link to a post on how to create your own code snippet, see my post Lorem Ipsum Code Snippet.

Anna

To learn more about this offer, go to the following URL and be sure to read the fine print:

http://www.microsoft.com/web/jumpstart/platinum-hosting/default.aspx