Construct 2

Physics

Add realistic physics effects to your games in a few easy clicks.

Special Effects

Over 70 visual effects to make your games look exceptional.

Preview over Wifi

Instantly preview your games on mobiles & tablets over Wifi.

Complete Manual

Full access to our comprehensive documentation.

Friendly Community

Get help and share your experiences with our welcoming and friendly community.

Extendible

Use our fully documented Javascript SDK to extend Construct 2.

No Programming Required

Make your game do what it needs to do in a visual and human readable way with the powerful event system.

There's no need to memorise cryptic languages. Focus on what really matters: designing your game!

It's ideal for beginners, and powerful enough to let experts prototype faster than ever before.

...

Okay, that sounds great... But how do you get started (and given that I did mention free...)

Construct 2 [Download]

The Free HTML5 Game Engine

Download Construct 2 Now

Construct 2 Free Edition has been downloaded by tens of thousands of people. Download Construct 2 now and start making your own games!

106mb for Windows XP, Vista & 7

Free Bundle Download

The free edition of Construct 2 also comes with sprites, sound effects and original music for you to add to your games!

13.1 MB - Free Music/SoundFX/Sprites

Want more features?

Unlock Construct 2's true potential by upgrading to a license today.

A license is required if you want to make money from your games!

How hard is it to create a Windows 8 App? I had my first, using one of the sample projects, in under 3 minutes...

How to make a Windows 8 app

Creating a game for Windows 8 is easy with Construct 2. If you haven't already, download the Free edition and get going with the Beginner's guide!

You might also be interested in exporting to Windows Phone 8 as well (which must be done separately).

Setup

You'll need Windows 8 (RTM or newer - it won't work on the Release Preview or older). You then need to install Visual Studio 2012 Express on Windows 8.

If you're installing Windows 8 and have never installed an operating system before, please take care during the setup. You may need to adjust BIOS settings and format or partition a disk. Making a mistake could cause data loss or result in a system that is difficult to recover. If you're not sure you should ask someone for help while setting up, since the steps involved are out of the scope of this guide, and be certain to make backups of any important data beforehand.

Development

You'll need to add touch controls. See this tutorial on touch controls for help on that.

Different devices have different size screens. See supporting multiple screen sizes.

You can add the Windows 8 object to your project to take integrate with Windows 8 specific features like snap and roaming storage.

Exporting from Construct 2

First, ensure your project has the right Name, Description and Author properties set, since these will be used in the exported app.

In the Export Project dialog, choose Export for Windows 8 and follow the next steps as you would for exporting an ordinary project.

In the export directory you will find a Visual Studio project. Note there are three image files for the app icons, app-logo.png, app-smalllogo.png and app-storelogo.png. You should replace these with your own images but keep them exactly the same dimensions.

The main project file has the extension .sln (solution). Double-click it in Windows 8 and Visual Studio should open it.

..."

Yeah, you read that right, the export results in a Visual Studio Solution.

I install Construct 2, created a new Space Blaster project, exported to Windows 8, set my Publisher cert and BAM! I had my Win8 Modern UI game up and playing. That's pretty cool...

Start:

Create:

Export:

Build:

Play!

Yep, you have a ready for the Windows Store game...

What kind of games can you create? Just check out the arcade, http://www.scirra.com/arcade. But be careful as you might not see the light of day for a while... there's some pretty funny games, for example the NSFW My Irrational Fear of Unicorns had me laughing out loud.

What? You want even more power and capabilities? You want to mesh this with the very cool Azure Mobile Services? Well I've got a plugin just for you...

Azure Mobile Services Plugin for Construct 2

This plugin for Construct 2 makes it easy to integrate the power of Azure Mobile Services into your games for Windows 8. Saving to the cloud is a great way to seamlessly store data for achievements, leaderboards, save games, user data and lots more!

Features:

Conditions

Data

• On Query Completed
• On Record Deleted
• On Record Inserted
• On Record Updated

Data Error Handling

• On Query Error
• On Record Delete Error
• On Record Insert Error
• On Record Update Error

Identity

• Is User Authenticated
• On Authenticate Success
• On Logged Out

Identity Error Handling

• On Authenticate Error

Actions

Data

• Delete Existing Record
• Insert New Record
• Query Table
• Update Existing Record

Identity

• Authenticate User
• Log Out

Expressions

• LastData
• LastFullName
• LastUserID

That enough to keep you busy this weekend? I think so...

Are you a MicroProse Transport Tycoon Deluxe fan? You remember last year's post about an "open" version of it, OpenTTD (Yes, that TTD, you know the game I talking about...)?

What if I was to tell you that today I found a JavaScript "port" of it, that appears to run the entire game in your browser!

PlayTTD

PlayTTD: The browser game based upon Transport Tycoon Deluxe

It's 1950. You're presented with a vast game world made up of numerous small towns and raw material resources. You've got $200,000 and you've got to prove yourself; to set the wheels in motion to become The Transport Tycoon.

Matched against a batch of ruthless rivals, you'll have to act quickly; to build the key routes that will rake in the cash. Build stations, airports, docks and a linking a road, rail, air and ship network. Then, move passengers, mail or goods to the most lucrative destination. As the years roll by you'll be able to buy more advanced and faster vehicles and vessels; if you can afford them!

MAKE TRACKS. MAKE CONNECTIONS. MAKE IT BIG.

• Build stations, docks, airports and make money by connecting areas requiring transport services
• Construct complex road - rail - air - sea networks using a simple to use interface
• ...

I mentioned source?

caiiiycuk / play-ttd

play-ttd

Code base of http://play-ttd.com.

Here's some snaps of it running in IE10 (Desktop). Yes, this appears to be 100% HTML/CSS/JavaScript.

It even runs in the Windows 8 Standard IE10

And it runs on the Surface RT IE10. (So you can touch TTD! It's kind of slow, but does work!

Now how awesome is that!

Want more? Check out his browser enabled OpenDune "port" too! http://play-dune.com/

Reference links:

Kraig's Book:

• Programming Windows 8 Apps in HTML, CSS, and JavaScript

General references for building apps:

• Developing Windows Store apps
• Resources for iOS developers

 Sessions from //Build 2012:

• Building Awesome HTML apps in Blend for Windows 8
• Designing awesome XAML apps in Visual Studio and Blend for Windows 8 and Windows Phone 8

I cover WPF and C# so often, because it's my comfort zone, and not the web stuff nearly enough. So these posts by Nick Polyak seemed like a great fit, one to help me, and hopefully you, expand our comfort zones a little... (That and I really liked the title...

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.

Introduction 

Being a consultant, makes me very sensitive to the newest trends in technology.

Several years ago, I came across WPF and fell in love with it. WPF introduced brand new concepts that enable the developers to achieve almost total separation between the visual design of the UI application and the underlying non-visual implementation. At the same time WPF provides great features for visual development. Silverlight brought the WPF power to multiple platforms.

Recent developments, however, indicate that Microsoft soured on both WPF and Silverlight in favor of HTML5/JavaScript. This is, probably, the correct strategy for Microsoft in the current tough situation. Over a period of several years, Microsoft lost its status as the largest software company and lost its superiority in the internet browser market. The primary reason behind it is that Microsoft overlooked and came too late to the smart phone and tablet markets. Being a follower is different from being the trend setter and currently Microsoft has to beat everyone else in their own game, which is HTML5 and JavaScript (and based on the previous history I am confident it is going to become a leader again).

These developments caused me to put a lot of effort into learning and working with HTML5 and JavaScript. I am also trying to understand how to apply the concepts I learned while working on WPF/Silverlight in JavaScript development.

The purpose of these series of articles is to make it easier for WPF/Silverlight developers to master programming HTML5/JavaScript utilizing WPF and Silverlight concepts. These articles assume that the reader already has some basic familiarity with HTML and JavaScript, so people who are completely new to it, should start with something else.

...

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 2 - Solar System Animation built with SVG, Knockout and MVVM Pattern.

Important Note

Friends, if you like the article, please vote for it [On the Code Project page, here]. Also I'd appreciate a couple of lines about what you think can be improved and what else you want to hear. Thanks!

This is part 2 of HTML5 series. Part 1 can be accessed at HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.

Several years ago I came across Bea Stollnitz's (Costa's) example converting a usual ListView into a planetary system and was fascinated by it. You can find her article and code at The power of Styles and Templates in WPF. Even though the MVVM pattern, had not been formalized at that time, she was adhering to a strict separation between the view model and the view's templates and styles.

I decided to build a similar application in HTML5/JavaScript also strictly adhering to the MVVM pattern. You can see the result at Solar System Demo. Make sure to view the demo using the HTML5 compatible browsers. If you use Chrome or Firefox you can even see that the planets are moving around the sun (IE 9 does not support SVG animations, so if you use IE 9, the planets won't move). The speed of the planet images in the demo is chosen randomly and has nothing to do with the actual planet speed. I'll talk more about the demo below.

In order to achieve the separation between visual and non-visual components I use Knockoutjs framework. Knockoutjs is an excellent open source framework giving developers ability to bind properties and events within HTML to JavaScript's entities representing the View Model. The Knockoutjs bindings are similar to those of WPF and Silverlight. From my point of view, Knockoutjs is a must for building an HTML web site that has a considerable amount of business logic.

This article is by no means a detailed tutorial on Knockoutjs, even though I'll try to present some its most important features. Perhaps, in one of the subsequent articles, I'll give more information on Knockoutjs, but in the meanwhile Knockoutjs website has great documentation and tutorials. Also there are two excellent Pluralsite courses on Knockoutjs: Building HTML5 and JavaScript Apps with MVVM and Knockout by John Papa as well as Knockout Fundamentals by Steve Michelotti. (You have to subscribe to pluralsite.com in order to be able to access the tutorials).

In order to draw the non-textual visuals, e.g. the orbits and in order do animations I am using SVG. SVG is part of HTML5 spec and it provides HTML tags to create various shapes use transforms on them and create animations. SVG is quite similar to WPF/Silverlight Shape/Path, transforms and animations functionality. Again, this article is not a tutorial on SVG, it just demonstrates some SVG concepts. Perhaps in the future articles I'll talk about SVG in more detail.

...

Enough said? Go read these post and get your web dev on!

• Step-by-Step tutorial from dev.windows.com
• Part 3 complete code

[00:22] Step 1: Create a new navigation app in Visual Studio
[03:19] Step 2: Copy your HTML and CSS content from your "Hello World" app
[06:35] Step 3: Copy your event handlers
[11:11] Step 4: Restoring the app's state
[16:09] Step 5: Add another page
[17:08] Step 6: Use the navigation function to move between pages
[21:12] Step 7: Add an app bar for additional navigation

• Step-by-Step tutorial from dev.windows.com
• Part 2 complete code

[02:52] Step 1: Save app data
[08:08] Step 2: Save session data
[09:28] Step 3: Restore the app's state

• Step-by-Step tutorial from dev.windows.com
• Part 1 complete code

[01:14] Before you start
[01:52] Step 1: Create a new project in Visual Studio
[04:06] Step 2: Launch the app
[05:00] Step 3: Modify your start page
[07:51] Step 4: Create an event handler
[12:16] Step 5: Register the event handler when our app launches
[15:35] Step 6: Style our start page
[20:01] Step 7: Add a Windows library for JavaScript control
[21:41] Step 8: register an event handler for Windows library for JavaScript controls

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

• Getting started with Windows 8 Apps
• How to Sell Your Apps and Make Money in the Windows Store
• Attend a Windows 8 Developer Camp and Hackathon in your area!

Blogs & Articles:

• Michael Palermo’s Blog

Videos:

• Microsoft DevRadio: Developing for Windows 8 in 1/2 the Time (Part1) Getting Started
• Microsoft DevRadio: Developing for Windows 8 in 1/2 the Time (Part 2) Using a Blank Template
• Microsoft DevRadio: Developing for Windows 8 in 1/2 the Time (Part 3) Adding HTML5 Content
• Microsoft DevRadio: Why Wait? Develop for Windows 8 Now!

Virtual Labs:

• Windows 8 Release Preview Virtual Labs

Here, I chat with Giorgio and Ari Bixhorn (aka Bix) about this modern graphic novel written in HTML5 and powered by IE9. What's going on behind the graphics, anyway? What led to the use of HTML5's Canvas versus, say, CSS3 Transforms to create the stunning graphics with lightning bolts flashing in the background? What did they do to compensate for Canvas being a mostly "dumb" graphical surface? How did the overcome bandwidth constraints when loading several high res images?

Tune in.

Learn how to apply styles to your website using master pages and CSS.

For more Web Camps content, check out the Web Camps Training Kit.

As a finale, Rey does his infamous "jQuery dance"—DO NOT MISS THIS. It's priceless!

To learn more about jQuery and other web technologies, sign up for a free Web Camp in your area.

It lets you do some amazing things like global changes and even operations!

Variable:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

Operation:

@the-border: 1px;
@base-color: #111;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
 
#footer { 
  color: (@base-color + #111) * 1.5; 
}

Other videos from this article

· W3C XHTML Validation

· Visual Studio Validation

· Comparing HTML and XHTML

· XHTML Strict

· CSS Zen Garden

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd894045.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1
/DTD/xhtml1-transitional.dtd">

The DOCTYPE declaration tells the browser which version of HTML or XHTML is being used on the Web page. If you take a closer look at the DOCTYPE declaration, you'll notice it is XHTML 1.0 Transitional. The transitional part has nothing to do with XHTML per se. It is actually part of both HTML and XHTML and it relates to conformance levels. XHTML 1.0 and HTML 4.01 provide three conformance levels - strict, transitional, and frameset. Framesets are seldom used today due to problems with bookmarking and search engines. So frameset conformance is of little interest anymore. Transitional is a compatibility mode to make upgrading from prior specifications - such as HTML 3.0 - easier for existing pages. Strict is the way that the HTML/XHTML specifications were meant to be used. Strict disallows certain tags (e.g., <center>, <font>) and attributes (e.g., align, bgcolor, background) that are valid at transitional conformance. Disallowing these tags and attributes enforces better separation of structure from presentation in markup. Structure identifies the major building blocks of your page, such as a sidebar, breadcrumb trail, main heading, or article. Presentation is about how these building blocks should be rendered. For example, identifying a certain <div> tag as being the copyright notice is about structure. Noting that the <div> tag should be rendered in a x-small italic Helvetica font is about presentation. (See Roger Johansson's blog post, entitled Transitional vs. Strict Markup for a good discussion on the topic.)

So why does strict conformance disallow presentation-related tags/attributes in HTML/XHTML? It is because we now have a better mechanism for expressing presentation details... Cascading Style Sheets (CSS).

Let's Talk About CSS, Baby!

CSS or Cascading Style Sheets is a technology designed specifically to express presentation details about your Web page. Just like with HTML, I'm going to assume that you've had some exposure to CSS already. If you haven't, w3schools.com has a series of CSS Tutorials to introduce you to the technology.

Just like HTML, CSS evolved over time with CSS1, CSS2, and CSS 2.1. The CSS 2.1 specification is supported by the latest version of the major browsers including Firefox 3 and Internet Explorer 8. Unfortunately, widely used browsers such as Firefox 2.0, Internet Explorer 6, and Internet Explorer 7 do not have full CSS 2.1 support, as evidenced by the Acid2 Test from The Web Standards Project Acid Tests. Although the Acid2 Test is not going to win any art prizes, it is quite gruelling for browsers as it uses a variety of advanced CSS techniques to compose the smiley face, shown below.



Even though commonly used browsers such as Firefox 2.0 and Internet Explorer 6/7 do not render the Acid2 Test correctly, they do render most common CSS features faithfully. So as long as your stylesheets use predominantly CSS1 and commonly used CSS2/CSS2.1 features, your Web pages should render consistently across current browsers. Let's turn our attention to some recommended practices for CSS.

External Stylesheets vs. Inline Styles/Stylesheets

Styles can be included inline with a tag using the style attribute, inline with the page using a <style> tag, or in an external  file with a <link> tag.

<!-- Inline style --> 
<div style="font-size:large">Header</div> 
<!-- Inline stylesheet --> 
<style media="all" type="text/css"> /* Styles go here */ </style> 
<!-- External stylesheet --> 
<link media="all" type="text/css" href="Site.css" />

It is a bad, though common, practice to litter your HTML/XHMTL pages with style attributes. The result is a mix of presentational with structural concerns in your Web pages. Not only does this increase the size of your Web pages, but consistent styling across the Web application is difficult as the same styles are repeated for each similar element. A small improvement can be made by moving the styling information to a stylesheet included in the <head> section via the <style> tag. Styles are no longer repeated within the page, but you still have style duplication across Web pages. Using either inline style attributes or stylesheets is not recommended. In either case, changing a site's theme or fixing an error in your CSS is very time-consuming, as every Web page in the application must be updated. More preferable are external stylesheets, so that a common set of styles can be applied uniformly throughout the Web application. This has the additional advantage of allowing the browser to cache style information rather than sending it on every page request.

Just as it is bad practice to litter your HTML/XHTML pages with style attributes, it is just as bad to define styles tightly coupled to presentation.

<div class="fontarial fontsize14 textred">Error</div>

Rather than specifying the structure of the document, CSS classes have been used to specify the presentation of the information. This is not how CSS is meant to be used. The preferred way to define this page element would be to use a CSS class to express its purpose.

<div class="errormessage">Error</div> 

The stylesheet might still use a 14px red Arial font to display errors, but notice how the structure - or intent - of the page element is expressed rather than its visual presentation.

Media-specific Stylesheets

The screen and the printed page are very different beasts. Each has its own set of layout concerns and optimizations. We have all encountered Web pages that provide a link to a "print-optimized" Web page that removes headers, sidebars, and background images. What if you could just print your Web page and have the browser optimize it for printing? Guess what? You can! CSS includes the notion of media-specific stylesheets. The styles are only applied for the specified media.

<link media="all" type="text/css" href="Site.css" />
<link media="print" type="text/css" href="PrintOnly.css" />
<link media="screen" type="text/css" href="ScreenOnly.css" />

You can include common styles in media="all" and override them for specific media in the other stylesheets. There are also media types for Braille, screen readers (aka aural), and more.

Compatibility is Easier with Valid CSS

Just like with HTML/XHTML, cross-browser compatibility of a Web application can be improved by using valid CSS. Rather than memorizing CSS specifications, you can use tools such as the W3C CSS Validation Service or Visual Studio 2008's built-in CSS Validator to ensure that not only are you writing valid CSS, but that you are only using CSS features up to a particular level, such as CSS2, but not CSS2.1, features.

Remember the "C" in CSS

An oft-forgotten feature of CSS is the cascading part - styles defined on parent tags cascade to their children. This means that you can define the font and text color for the <body> tag rather than on each individual element. (Note that cascading doesn’t make sense for some properties and hence not all properties cascade. For example, cascading the height property doesn’t make sense as all children would have the same height as the parent, which is clearly impossible for a stack of more than one child. Appendix F of the CSS2 recommendation has a full list of properties and whether child elements inherit the property from their parent.) Relying on cascading reduces duplication in your CSS and makes creating custom styles easier, as you have fewer styles to update. ScrewTurn Wiki contains a lot of duplication in its CSS.

Other videos from this article

· W3C XHTML Validation

· Visual Studio Validation

· Comparing HTML and XHTML

· XHTML Strict

· CSS Zen Garden

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd894045.aspx

So what about this XHTML thing I keep writing about? What exactly is XHTML and how is it different from HTML? According to the W3C, XHTML 1.0 is "a reformulation of HTML 4 in XML 1.0". Honestly, XHTML 1.0 provides little advantage over HTML 4.01, which it supercedes, but the effort to update HTML 4.01 Web pages to XHTML 1.0 Web pages is minimal. The main advantage of XHTML is that XML parsers and tools can work with XHTML, but not with HTML. There is, purposefully, a lot of overlap between the two specifications, but the overlap isn't perfect. Let's look at the most common scenarios for turning valid HTML into valid XHTML, shown below.

A full explanation of XHTML 1.0 and its differences with HTML 4 can be found in the XHTML 1.0 Recommendation on the W3C Web site.

If you are building a new Web site, there is no reason not to write your markup in XHTML. If you are dealing with an existing site, you have to decide whether the effort to update existing pages to be XHTML-compliant is worthwhile. Often it is not. That said, there is no reason that new pages in an existing site cannot be written in XHTML.

WARNING: Historically, browsers were designed to parse HTML. Modern browsers have been updated to parse XHTML. Just because a browser understands that a XHTML <br/> tag is the same as a HTML <br> tag doesn't mean that it will properly interpret XML empty element tags for all XHTML elements. For example, the following is valid XHTML.

<script type="text/javascript" src="test1.js"/>

The script, test1.js, fails to run and a blank page is displayed in both Internet Explorer 8 and Firefox 3.5. Chrome 2.0 parses the XHTML correctly, running test1.js and rendering the page. The following syntactically equivalent XHTML is rendered properly by all three browsers.

<script type="text/javascript" src="test1.js"></script>

So just because your page is valid XHTML and renders properly in one browser doesn't mean that it will render properly in all browsers. Your chances for success improve if the page wasn't invalid XHTML, but you still need to test in every browser and platform that you care about.

Other videos from this article

· W3C XHTML Validation

· Visual Studio Validation

· Comparing HTML and XHTML

· XHTML Strict

· CSS Zen Garden

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd894045.aspx

<p><em>The quick brown dog jumped over the lazy fox.</p></em>

Notice how the <p> and <em> overlap. Neither tag contains the other. This is invalid HTML and XHTML. Your chances of cross-browser compatibility are dramatically improved if your markup is valid HTML 4.01 or XHTML 1.0/1.1. "Valid" means that the document markup conforms to the relevant W3C specification. You can check the validity of your HTML/XHTML document using the free W3C Markup Validation Service. 

Microsoft Visual Studio can also help out here as it has had a markup validation engine built in since Visual Studio 2005.

Other videos from this article

· W3C XHTML Validation

· Visual Studio Validation

· Comparing HTML and XHTML

· XHTML Strict

· CSS Zen Garden

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd894045.aspx

ASP.NET Web Forms goes out of its way to protect you from the big, bad old Web. A world of HTML, CSS, and JavaScript all served up over HTTP. A world where state is ephemeral and statelessness is a way of life. In the extreme, ASP.NET Web Forms gives you a drag-and-drop experience where you never have to look at an angle bracket. Where an illusion of statefulness is provided by SessionState and ViewState. Rob Conery said it best when he described ASP.NET Web Forms as an "abstraction wrapped in deception covered in lie sauce presented on a plate full of diversion and sleight of hand." For simple applications, this strategy can work well as you don't have to worry about the idiosyncrasies of the Web. To harness the true power of the browser, you do need to embrace the Web and the fundamental technologies that comprise it - HTML, CSS, JavaScript, and HTTP.

The Web can be a scary place, especially if you've ever dared to look at the HTML source for a typical Web page of the ASP.NET variety. The HTML source is awash in hidden inputs, crazy identifiers, cryptic JavaScript, and HTML that looks like it's been through a blender. This is the price of ASP.NET Web Forms trying to hide the stateless nature of the Web from you.

If however you embrace fundamental Web technologies, you can have clean, readable HTML styled with CSS and dynamic behaviours provided by understandable JavaScript.  You don't even have to abandon ASP.NET Web Forms to do it. (In many ways, ASP.NET MVC makes it easier to embrace these Web technologies, but that's the topic of a later article.) You can bring the power of the Web to your ASP.NET Web Forms applications!

Living in a (X)HTML World

The world of the Web is built around HTML in one form or another. Although ASP.NET Web Forms tries to protect you from the angle brackets, chances are better than not that you've spent some time looking at raw HTML. If you haven't, I would recommend devoting some time to the free introductory tutorials at w3schools.com.

Depending on your Web application, cross-browser compatibility may or may not be a concern for you. Internal enterprise applications typically only require that they run on the corporate standard browser, which is most often Microsoft Internet Explorer. At the other extreme are public Web sites that want to target the broadest audience and therefore be compatible with the broadest range of available browsers.

If you're building a public Internet site, you probably want to know which browsers are currently popular so that you can ensure that your site works properly in them. Many companies offer browser usage statistics - often for free - which can serve as a guide to currently popular browsers. As shown below, Microsoft Internet Explorer is still the dominant browser, but Firefox makes up a substantial piece of the market. So compatibility with the major versions of those two browsers is a must for any public Internet site.

Browser Version Market Share for April 2009 - source Net Applications

Always take browser usage statistics with a large grain of salt, because they are highly dependent on the site's target demographic. For consumer sites, the above graph is roughly representative of current browser usage as it incorporates data from a wide range of popular sites. Technical sites, such as my blog, tend to have a much higher percentage of alternative browsers, such as Firefox, Chrome, and Opera. I would expect Apple-related sites to have a much higher percentage of visits from Safari users as that is the default browser on OSX. So when deciding which browsers and operating systems to test your Web application on, you need to consider its target audience.

There are some easy things that you can do to increase the likelihood that your Web application will work across browsers. Modern browsers are designed to render HTML 4.01 and XHTML 1.0/1.1, but they do provide backward compatibility with previous HTML specifications. Browsers are typically very forgiving in their parsing of HTML and browser incompatibilities are often manifestations of the rules that a particular browser uses to parse bad HTML. For example, the following is invalid HTML and XHTML:

<p><em>The quick brown dog jumped over the lazy fox.</p></em>

Notice how the <p> and <em> overlap. Neither tag contains the other. This is invalid HTML and XHTML. Your chances of cross-browser compatibility are dramatically improved if your markup is valid HTML 4.01 or XHTML 1.0/1.1. "Valid" means that the document markup conforms to the relevant W3C specification. You can check the validity of your HTML/XHTML document using the free W3C Markup Validation Service.

Other videos from this article

· W3C XHTML Validation

· Visual Studio Validation

· Comparing HTML and XHTML

· XHTML Strict

· CSS Zen Garden

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd894045.aspx