In Part 2 we start with the some coding. To start the Football Boss project I use the Html 5 Boilerplate project with is available at http://html5boilerplate.com/. Please go and have a look at the site and especially the code. There are a few very interesting bits that developers forget to put into their web projects.

Anyway, back to Football Boss. Just for interest, I’m using Notepad++ on Windows 7 to code Football Boss. So, you can use your favourite text editor to follow.

In the default boilerplate code of the index.html page you will see the div with an id of container. This is where we will put our code for the page design.

<div id="container">
    <header>
    </header>
    
    <div id="main">
    </div>
    
    <footer>
    </footer>
</div> <!-- end of #container –>

Immediately you will see that we use some new Html 5 tags namely <header> and <footer>.

• <header> = header for a section or page.
  
• <footer> = footer for a section or page.

I quickly want to take you to the top of the page. Do you spot something different? In the Html 5 specification they have made the DOCTYPE short. <!doctype html> This short DOCTYPE indicate that the html should be parsed as Html 5. No version is specified so that the DOCTYPE will remain usable for future revisions of Html. Usually if you use XHMTL Transitional or Strict you would have to put this long DOCTYPE at the top of your page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Here are some additional changes that Html 5 brings:

• Attribute for language – <html lang=”en”> is all what is required for Html 5. xmlns or xml:lang is not required anymore.
  
• Attribute for Character Set – Define character encoding using the new charset attribute in meta tag: <meta charset=”utf-8” />
  
• Trailing slashes are not required – Void elements (e.g. br, img and input) don’t require a trailing slash.
  
• Deprecated elements: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>

In part 1 I drawn a wireframe of what content I want and how the layout of the content should be on the page. For the initial design I hard code certain content that might be dynamic at a later stage and use dummy data that will be replaced with real data later on.

Firstly in the <header> tag I create a hgroup and h1 tag for specifying my page title. After that I add a paragraph with some text to check if JavaScript is enabled in the browser. If JavaScript is enabled then the JavaScript code will hide the paragraph.

<hgroup> = Group a set of h1-h6 elements.

  1: <header>
  2:   <hgroup>
  3:     <h1>Football Boss - Choose a Team and let's play!</h1>
  4:   </hgroup>
  5:   <p id="jsnotice">
  6:     Javascript is currently disabled. 
  7:     This site requires Javascript to function correctly.
  8: 
  9:     Please <a href="http://enable-javascript.com/" target="_blank"> enable Javascript in your browser</a>!
 10: 
 11:   </p>
 12: 
 13: </header>

After header I define the page menu inside a <nav> tag that is new to Html 5.

<nav> = Specify navigation links.

  1: <nav>
  2:     <ul>
  3:       <li>Home</li>
  4:       <li>Contact</li>
  5:     </ul>
  6:   </nav>

After the navigation menu is the main div. Inside the main div I define two main sections namely football and instructions. If you look at the wireframe you see that we need two team tables and a field canvas. In the football section I define two sections and inside each section I define two tables to list the starting team players and reserves. In between the two team sections I define a canvas tag. On the canvas tag we will create the football match simulation.

In the instruction section I define a article tag with a header and paragraph that will explain to the user how to play Football Boss. As a extra bonus I added the new video tag to also show a video to the user on how to play the game.

  1: <div id="main">
  2:     <section id="foolball">
  3:       <section id="team1">
  4:         <table id="team1Table">
  5:           <caption>Red Team</caption>
  6:           <thead>
  7:             <tr>
  8:               <td>#</td>
  9:               <td>Player Name</td>
 10:               <td>Position</td>
 11:               <td>Fitness</td>
 12:             </tr>
 13:           </thead>
 14:           <tbody>
 15:             <tr>
 16:               <td>1</td>
 17:               <td>Red Player 1</td>
 18:               <td>GK</td>
 19:               <td>100</td>
 20:             </tr>
 21:           </tbody>
 22:         </table>
 23:                 <table id="reserve1Table">
 24:                     <caption>Red Team Reserve</caption>
 25:           <thead>
 26:             <tr>
 27:               <td>#</td>
 28:               <td>Player Name</td>
 29:               <td>Position</td>
 30:               <td>Fitness</td>
 31:             </tr>
 32:           </thead>
 33:           <tbody>
 34:             <tr>
 35:               <td>14</td>
 36:               <td>Red Player 2</td>
 37:               <td>GK</td>
 38:               <td>100</td>
 39:             </tr>
 40:           </tbody>
 41:                 </table>
 42:       </section>
 43:       <canvas id="fieldCanvas"></canvas>
 44:       <section id="team2">
 45:         <table id="team2Table">
 46:           <caption>Blue Team</caption>
 47:           <thead>
 48:             <tr>
 49:               <td>#</td>
 50:               <td>Player Name</td>
 51:               <td>Position</td>
 52:               <td>Fitness</td>
 53:             </tr>
 54:           </thead>
 55:           <tbody>
 56:             <tr>
 57:               <td>1</td>
 58:               <td>Blue Player 1</td>
 59:               <td>GK</td>
 60:               <td>100</td>
 61:             </tr>
 62:           </tbody>
 63:         </table>
 64:                 <table id="reserve2Table">
 65:                     <caption>Blue Team Reserve</caption>
 66:           <thead>
 67:             <tr>
 68:               <td>#</td>
 69:               <td>Player Name</td>
 70:               <td>Position</td>
 71:               <td>Fitness</td>
 72:             </tr>
 73:           </thead>
 74:           <tbody>
 75:             <tr>
 76:               <td>14</td>
 77:               <td>Blue Player 2</td>
 78:               <td>GK</td>
 79:               <td>100</td>
 80:             </tr>
 81:           </tbody>
 82:                 </table>
 83:       </section>
 84:     </section>
 85:     
 86:     <section id="instructions">
 87:       <article>
 88:         <header>
 89:           <h2>How to play:</h2>
 90:         </header>
 91:         <p>
 92:           Select a team and click Play!
 93:         </p>
 94:                 <video>
 95:                     <source src="video/demo.mp4" />
 96:                 </video>
 97:       </article>
 98:     </section>
 99:     </div>

As you can see it is allot of code. The following tags are all new Html 5 tags:

• <section> = define a section in the document.
  
• <canvas> = draw graphics with JavaScript on canvas.
  
• <article> = define unique article content.
  
• <video> = natively play video content.
  
• <source> = define media resources. Used between video and audio tags.

There are more new semantic tag from Html 5 spec:

• <aside>


• <time>


• <mark>


• <figure>


• <figcaption>


• <ruby>


• <audio>


• <map>


• <area>


• <details>

After the main div we define the page footer. In the footer tag we add copyright content and later social icons or mailto link.

  1: <footer>
  2:     Copyright @ 2010 by Cecildt
  3: </footer>

That is the basic layout of Football Boss main page. Note that this is the initial design and some small changes to the semantics might change. If you open the index.html page in your favourite browser you would see the dummy content on the page, but the content has no styling yet.

In the follow up posts we will start to style each section with CSS 3.0. With the styling post I will go deeper into the new Html 5 tags and their attributes that is available. I will try to keep the styling post nice and short for each section.

I hope you see how Html 5 improves the semantics of the content on the page and that you enjoyed this post. Any suggestions and feedback are welcome!

Side note: Mozilla has started their GameOn competition. I will enter this Football Boss application, when I finish it, as my entry into the competition. For this reason I will provide the full source for the application to the public, but I keep the sole right to provide this application into any competition.

Source Code

Cheerio!

Follow me on twitter: @cecildt

This is my first entry into a deep dive with Html 5. I’ve played allot with Html 5, but I think I need to implement a page that use as much of the Html 5 features. This will be a n-part series. I have no idea how many entries there will be. I will try make the entries as simple and short as possible to follow.

Firstly I needed an idea for a page to create. I came up with a football management page idea. A very simple idea where two football teams play against each other. The user choose one team and select team  players to play against the other team. During the game the user will be able to change players from the field with players on the bench. I hope you like the idea.

Here is a wireframe of the page layout:

The actual football game simulation will be done on the new canvas element from Html 5. I will take each section and feature in detail in follow up entries. I think this is a great starting point and at each entry I will provide the source for you.

Any suggestions and feedback would be great!

Cheerio!

Firstly thanks to everyone that attended the workshop. It was great. Any feedback or questions are welcome.

The PowerPoint presentation is available at http://dl.dropbox.com/u/4406115/Html5.pptx

Keep a watch on my blog as I’m going to start a whole series of Html 5 where I will go a bit deeper into each new feature. I will create a sample site and use as much of the new Html 5 spec.

Cheerio!

By now everybody knows that Microsoft BizTalk 2010 is available. In this blog entry I will give a summary of information to get started with BizTalk 2010. Here are the steps:
Get BizTalk 2010 Developer edition
The developer edition is completely free to use for development, demo and testing.
Get BizTalk Adapters
The BizTalk Adapters are used to easily send and receive message from Oracle eBusiness Suite, SQL Server, Oracle Database, mySAP Business Suite and Siebel eBusiness Applications.
Get BizTalk 2010 Documentation
This is all the documentation that you will need to learn and go deeper into the BizTalk 2010 technology.
Get BizTalk 2010 Training Kit
This is probably one of the most important downloads to get started to learn about the new features in BizTalk 2010.
View BizTalk Server Developer Center
Bookmark this site and keep a close eye on this site for all new information about BizTalk.

This should be more than enough to get you started with BizTalk Server 2010. There is allot more to learn about BizTalk, but this will be a good starting point.
Cheerio!

This entry is just a summary about info I could find about BizTalk 2010.

Speculation about the release seems to be on 14/11/2010.

New set of posters and their details from the websites:

BizTalk Server 2010 BAM Poster

This poster provides an overview of the entire BAM life cycle. It depicts the design of the observation model by the business analyst, mapping the observation model to the implementation by the developer, deployment by the system administrator, and the presentation channels for business end users. Both new and experienced users will better understand the concepts, processes, and management of BAM. The poster is intended to be printed and measures 26”x28”.

BizTalk Server 2010 Runtime Architecture Poster

The poster depicts the modules and components of a BizTalk Server 2010 runtime environment, including message flow, data flow, and references that occur at runtime. It can be used to show how the capabilities listed in the BizTalk Server 2010 Capabilities Poster are actually implemented. The poster is intended to be printed and measures 35”x32”.

BizTalk Server 2010 Capabilities Poster

This poster lists the BizTalk Server 2010 capabilities bucketed in eight categories and is designed to enable technical discussions by providing both high-level and detailed views of the capabilities and features that are included. The poster has been updated to include new features and capabilities, including enhancements to RFID, BizTalk Adapter Pack, EDI, AS2, and better integration with Visual Studio and Windows Server. The poster is intended to be printed and measures 30.5”x28”.

BizTalk Server 2010 Scale-out Configurations Poster

This poster describes typical scenarios and commonly used options for scaling out BizTalk Server 2010 physical configurations. It illustrates how to scale out to achieve high availability through load balancing and fault tolerance and how to configure for high-throughput scenarios. The poster is intended for use by IT professionals and developers who need to design, deploy, and manage large-scale implementations of BizTalk Server 2010. The poster is intended to be printed and measures  26”x38”.

BizTalk Server 2010 ESB Toolkit Architecture Poster

This poster depicts the architecture of the BizTalk ESB Toolkit. It shows the toolkit's core components, and how these integrate with BizTalk Server. The poster is intended to be printed, and measures 26”x28”.

BizTalk Server 2010 Database Infrastructure Poster

This poster describes BizTalk Server 2010 databases and associated components, jobs, services, UI, and events. It includes tables that describe the databases and jobs. It is intended primarily for DBAs and administrators of a BizTalk Server environment, yet it also serves as an introduction to the infrastructure for all users. The poster is intended to be printed and measures 28”x30”.

Enjoy!

This entry is just an extension to the blog Memory Dump to the Rescue by Bruno Marques. In he’s blog he shows how to generate a mini dump on a exception in code. Please read he’s blog first. If you want to use this in ASP .Net MVC you could take the same approach:

  1: [HttpGet]
  2: public ActionResult Crash()
  3: {
  4:     try
  5:     {
  6:        // compiler doesn't allow division by a zero constant,
  7:        // so we have to use an auxiliary variable
  8:        int zero = 0;
  9:        int value = 123456789 / zero;
 10:     }
 11:     catch (Exception)
 12:     {
 13:        string path = Path.Combine(HttpRuntime.AppDomainAppPath, @"App_Data\Dumps\");
 14:        string fileName = string.Concat(path, Process.GetCurrentProcess().ProcessName, ".dmp");
 15:        MiniDump.WriteDump(fileName);
 16:     }
 17: 
 18:     return View();
 19: }

The first thing to note in the code is that I write the dump file to my App_Data folder under a sub folder named Dumps. This is a better approach for file and folder access rights in ASP .Net applications. I have a small issue with this approach. If I have to insert all this code to write a dump file in all my actions then my code will become very cluttered and maintenance of the code becomes difficult.

The Better Approach

All developers that have developed with ASP.Net MVC know of the Attribute [HandleError] that you can put on top of your controllers. With this we can create our own custom attribute to handle the error and create a mini dump file for the application.

Here is the custom attribute code:

  1: [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method, AllowMultiple = true, Inherited = true)]
  2:  public class DumpHandleError : HandleErrorAttribute
  3:  {
  4:     public override void OnException(ExceptionContext filterContext)
  5:     {
  6:         string path = Path.Combine(HttpRuntime.AppDomainAppPath, @"App_Data\Dumps\");
  7:         string fileName = string.Concat(path, Process.GetCurrentProcess().ProcessName, ".dmp");
  8:         MiniDump.WriteDump(fileName);
  9: 
 10:         base.OnException(filterContext);
 11:     }
 12: }

Now I can cleanup my controller code as follow:

  1: namespace DumpMvcApplication.Controllers
  2: {
  3:     [DumpHandleError]
  4:     public class HomeController : Controller
  5:     {
  6:         [HttpGet]
  7:         public ActionResult Index()
  8:         {
  9:             ViewData["Message"] = "Welcome to ASP.NET MVC!";
 10: 
 11:             return View();
 12:         }
 13: 
 14:         [HttpGet]
 15:         public ActionResult Crash()
 16:         {
 17:             // compiler doesn't allow division by a zero constant,
 18:             // so we have to use an auxiliary variable
 19:             int zero = 0;
 20:             int value = 123456789 / zero;
 21: 
 22:             return View();
 23:         }
 24:     }
 25: }

All unhandled exceptions will be handled by my custom attribute to create a mini dump for the application.

Some additional tips is to create a abstract base controller with the attribute added and inherit other controllers from the base controller. Currently when the code creates a mini dump it will overwrite the dump file. If you want individual mini dumps for each exception I would recommend to add a DateTime.Now to the filename, but be aware that you have to cleanup your dumps else you might run out of disk space.

Hope this helps to ease your debugging experience for ASP .Net MVC applications.

Please comment and let me know on improvements that can be made to the code.

Cheerio!

I’m going to show you how to convert a raw WCF Soap Message to a Memory Stream.
Firstly here is the code:

1: [OperationContract(Action = "*")]
2: public void AddMessage(Message message)
3: {
4:   MessageBuffer buffer = message.CreateBufferedCopy(int.MaxValue);
5: 
6:   Stream stream = new MemoryStream();
7:   XmlWriterSettings settings = new XmlWriterSettings
8:                    {
9:                      Encoding = System.Text.Encoding.UTF8
10:                    };
11:   XmlWriter writer = XmlWriter.Create(stream, settings);
12: 
13:   //Create a copy of the message
14:   Message message = buffer.CreateMessage();
15: 
16:   //Serialize the message to the XmlWriter 
17:   if (writer != null)
18:   {
19:     message.WriteMessage(writer);
20:     writer.Flush();
21:   }
22: 
23:   stream.Flush();
24:   stream.Seek(0, SeekOrigin.Begin);
25: 
26:   // Save stream to database
27: }

The example above show a generic WCF method that accept any type of message. You might ask why do I ever want to do this? You might want to create a router service for your WCF services or you want to save a copy of a WCF message to a database. Working with an message stream provides allot of flexibility to work with the message contents.


Important points to note of the code is that I create a buffer copy of the original message. The reason is that the body of a message can only be accessed or written to once. If you want to access it more then once it is better to create a buffer copy of the message. From the buffer you can create multiple message instances. If you work with SOAP messages you need to specify the XmlWriterSettings Encoding to UTF8. Otherwise your stream data will become corrupt from the original message structure. Last note is when you create a stream to always flush and move the stream pointer to the beginning of the stream.


Hope this helps and any feedback is welcome.


Cheerio!