2 Comments

Web Standards Update for Microsoft Visual Studio 2010 SP1We just released the first Web Standards Update for Microsoft Visual Studio 2010 SP1. Despite its name, the update also works for Visual Web Developer Express 2010 SP1. You can read more on our team blog.

In this first release of the update, we have focused on bringing the HTML5 support up-to-date, adding CSS 3 support and bring more new API’s to the JavaScript intellisense.  The plan is to make a release on a regular schedule to keep Visual Studio updated with the changes made by W3C.

HTML5

Last year, we managed to sneak in HTML5 support when working on SP1 for Visual Studio 2010. Normally, a service pack is about bug fixes but we found that HTML5 was so important that the lack of it should be considered a bug. Unfortunately we where not able to do the same with CSS3 or the JavaScript API’s, but it was a good start.

Due to a combination of the instability of the HTML5 specifications at the time and the resources we had to add HTML5 support for SP1, we ended up with very descent support for both intellisense and validation. Now the HTML5 specifications are more stabile and some additions and modifications have been made by the W3C since then. It’s therefore a good time to update the HTML5 and XHTML5 schema files that Visual Studio uses under the hood to provide intellisense and validation.

Among the changes are:

  • Added missing elements like u, s and bdi
  • The type attribute is no longer required on script elements
  • The source element is now supported inside video and audio elements
  • Support for microdata including intellisense for schema.org vocabularies
  • Full WAI-ARIA intellisense

CSS3

For CSS3 we were not as lucky as we were with getting HTML5 into SP1. This was largely due to a combination of time and resources in terms of available developers. CSS3 is more difficult because the specifications change much more frequently than the specification for HTML5. For us it is a constant battle with keeping up to date with these changes and subsequently getting them into the next version of this update. That way we make sure that you will always have the latest and most accurate CSS3 support in Visual Studio.

The CSS3 support includes:

  • Will not invalidate filter, zoom and behaviorproperties
  • Have intellisense for vendor specific schemas (-ms-*, -moz-* and -webkit-*)
  • Up-to-date intellisense and validation for CSS3 properties and values

JavaScript

We’ve gotten a lot of customers asking for better intellisense for some of the new web API’s such as DOM Storage and Geolocation. In this update we are including intellisense for a lot of the API’s found in EcmaScript 5 including:

  • New selectors such as getElementByClassName
  • Geolocation, DOM storage and other new web API’s

More info

Check out the unofficial announcement or Scott Hanselman’s run-through

Download

If you haven’t already, I encourage you to download the Web Standards Update for Visual Studio SP1and try it out today. It’s a small and quick install.

0 Comments

Us web developers are a proud people that want to build the best websites every single time. To help us identify areas that could be improved, I’ve compiled a list of various automated and manual checks that can help us make better websites. My professional pride urges me to do the entire list, but I must admit that I sometimes skip some of the checks due to time constraints. I did just finish a project where I did all the checks and that felt very satisfying.

Validation

Mark-up validation

Choose the right DOCTYPE and make sure that the mark-up you write conforms to that DOCTYPE. No matter if you choose HTML or XHTML, always go for a strict DOCTYPE since it forces all browsers to render in standards compliant mode. Otherwise, you might end up with different renderings. Here is a list of DOCTYPEs to choose from. Remember that real men use XHTML 1.0 Strict or XHTML 1.1.

I use the Total Validator or the W3C validator to validate the mark-up against the DOCTYPE.

Stylesheet validation

It’s always a good idea to validate your stylesheets against the W3C standards. You will probably find a lot of small things you can easily fix. This is also to ensure better browser compatibility, but it is not as important as mark-up validation. In some cases you deliberately put hacks in your stylesheets to cope with browser differences and that might break the validation. The W3C CSS validator works for me.

RSS and ATOM feed validation

There are literally hundreds of feed aggregators on the market today and that doesn’t include the custom aggregation done by blog engines, content management systems etc. To ensure they can all read your RSS and ATOM feeds, make sure to validate them against the standard.

Accessibility validation

Make sure your mark-up is structured in a way that is readable for everyone. There are two standards widely used today and that’s the Section 508 used in America and the WAI which is more comprehensive. It is pretty easy to make your site compliant with the rules of Section 508, so you should as a minimum do that.

The WAI is split up into three categories: A, AA and AAA where A is the simplest and AAA is the most comprehensive. If you can make your site validate Section 508, you should easily be able to validate against WAI-A. In Europe all government websites must conform to WAI-AA. If you are hardcore and stubborn, you should go for the WAI-AAA valid website. For a regular website, this is not easy but it can be done.

You can perform the validation using the Total Validator or Cynthia Says.

Performance

YSlow/Fiddler

Before finishing your website, make sure to check the YSlow grade. It has to be as high as possible. Also make sure to use Fiddler to analyze the request/response graph by Internet Explorer. Using those two tools can make your site twice as fast with just minor tweaks.

Use general website analysis

It is a little redundant using the Website Analyzer after you’ve optimized the page using YSlow and Fiddler, but it almost always give you inspiration on where to do further performance optimizations.

No errors

Broken links check

This one requires no explanation. Take an automated test for broken links before releasing.

Browser compatability

Even though you have produced valid mark-up and CSS, there is always a need to go through all the pages of the website to make sure they look good in Internet Explorer 6, Firefox 2, Opera 9, Safari 2.5, Chrome and newer versions hereof. The number of different browsers you need to check varies by the type of website and the target group. This check is unfortunately manual and can take a loooong time.

Add meaning to content

SEO

You don’t need to know an awful lot about search engine optimization to do just the basic stuff right. I suggest you at least install the senSEO add-on to Firefox. It will provide you with a lot of useful tips and tricks by analyzing your mark-up and suggest improvements

Semantic Extractor

The Semantic Extractor can help you find inconsistencies in the structure of the different tags on your website. It lets you see how the search engine crawlers understand your site.

P3P Policy

If you set cookies then you need to have a P3P policy HTTP header as a minimum. The header briefly describes how the website behaves in regards to privacy. You might also want to add a more complete privacy statement in a certain XML format. The benefit is that your website will receive elevated privileges under stricter security settings in Internet Explorer. Learn more about P3P. Remember also to validate your P3P policy.

PICS-label

The PICS-label is also an HTTP header, but it describes the type of content on your website. The PICS-label is used by various tools build to protect kids on the web, such as NetNanny etc. Learn more about PICS.

Use semantic mark-up where it makes sense

Are you listing events or contact information then wrap them in meaningful mark-up such as microformats. This adds extra meaning to your content and opens the door to data portability. Here is an introduction to semantic mark-up.

Go mobile

This is relevant if you’re website is targeted mobile clients such as PDA’s and smartphones.

MobileOK Checker

Run your website through this online tool that will give you a lot of good feedback on your code. The W3C made it to provide a set of best-practices for mobile web apps.

XHTML Basic 1.1 DOCTYPE

This DOCTYPE can be difficult to code against if your website is targeted both mobile and richer browsers. However, if you are creating a mobile-only website then this DOCTYPE is for you. It’s basically a stripped down version of the XHTML 1.1 DOCTYPE with some mobile specific enhancements.

Input mode

One of the enhancements of the XHTML Basic 1.1 DOCTYPE is the inputmode attribute on textarea and text input fields. It allows you to specify the type of input that is best suited for the input field. It could be digits, Latin lowercase letters or Greek letters. Devices that understand this attribute will then adjust the input mode.

Checklist for high quality websites part 2

0 Comments

About 10 years ago, it was actually possible to look people up by their e-mail address online. You could also find a persons e-mail by searching for his or her name. Back then there where a lot of e-mail directories that acted like the yellow pages but for e-mail addresses. Very handy, but when spam became a problem, no one was willing to publicise their e-mail address and the e-mail search quickly died out.

Years passed and nobody thinks seriously about searching for people by their e-mail address anymore. It was tossed out of our toolbox – abandoned and forgotten.

Then a few years ago, something wonderful started to happen with the web. Community sites, forums, blog platforms etc. stated publishing FOAF and SIOC documents. Both documents contain e-mail addresses of people but not in the traditional sense. They publish SHA1 hashed e-mail addresses.

You can hash an e-mail using the SHA1 algorithm but you can never reverse it. That means the hashed e-mail addresses are secured from spam bots, but they are also left public for all of us to search for. All you need to do is to hash an e-mail address and do a Google search with the hashed value. Try searching for my hashed e-mail address on Google or go hash your own e-mail.

Here is a quick way of using SHA1 algorithm to hash any string value in C#.

public static string CalculateSHA1(string value)

{

  value = value.ToLowerInvariant().Trim();

  return FormsAuthentication.HashPasswordForStoringInConfigFile(value, "sha1").ToLowerInvariant();

}

The limitations of the SHA1 e-mail search is that you can only find people that have an online profile or blog, participate in online discussions or comments on blogs. The number of searchable people will rise as more and more sites start supporting FOAF and SIOC.

0 Comments

For a long time I wanted to find a way to make it easy for .NET developers to start using the semantic web or Web 3.0. The semantic web is relatively unknown to most people and some of the technologies are very complex to understand.

Technologies or formats such as FOAF, APML, SIOC, XFN tags and microformatsare some of the building blocks of the social aspects of the semantic web. They are used to create cross-site profiles of people and also represent relationships between them. XFN and microformats are somewhat easy to start using, but FOAF, APML and SIOC are a different story.

SemanticEngine.NET

That’s why I’ve just released the first initial code for a class library called SemanticEngine.NET on CodePlex. There is still a lot of code to be written, but right now it supports various different formats ready to use.

The idea is that you build the various formats using an easy-to-understand object model and then call a method that writes the documents to the response stream or to disk in XML. The idea is also that you can consume all these formats by pointing to a document somewhere on the web, and then the library will parse it and return an object graph.

APML

APML describes interests and is used to customize experiences online. This blog supports it natively, which makes it possible to filter all my blog posts based on the interests specified in your APML document. Check it out in the top right corner of this page.

The APML support in SemanticEngine.NET is done. You can easily generate your own documents or you can parse APML documents found on the web.

FOAF

Right now you can only generate FOAF documents, but very soon I’ll add a FOAF parser as well. This is more difficult because in order to do that, I actually have to use or write a full fledged RDF parser first.

SIOC

Coming soon

XFN

The XFN support in SemanticEngine.NET is almost done. At the moment you can give the XFN parser a website URL and it will then return a list of links that has the rel="me" attribute. The next version will return all the XFN attribute values such as friend, met, co-worker etc. That way you can scan a person’s social graph.

Microformats

The support for microformats is yet to come and it will be in the form of a parser. My idea is to let the parser take a website URL and then parse the HTML document for all the popular microformats such as hCard, hCalendar, hReview etc.

License

The library is free to use and free to modify in any given way. No crediting is needed. This is because my goal is to get people to use this everywhere. The more people that use semantic formats, the more useful it becomes and the more cool experiences will be possible to create online.

If you are interested in joining the development of SemanticEngine.NET, then please let me know. I sure could use some help, since my time is a bit limited. If you want to know more about the semantic web, then you can read my Guide to the semantic web post. Did I mention that all BlogEngine.NET 1.4+ users already have APML, FOAF, SIOC, XFN and microformats supported out-of-the-box?

2 Comments

The hCard microformat is used to make contact information machine readable. In BlogEngine.NET 1.4.5 this is being supported in the post comments. However, if you are writing your own custom theme, you need to add a little bit of code to your CommentView.ascx theme file.

The themes bundled in BlogEngine.NET 1.4.5 already have these small pieces of code embedded, so let’s take a look at the Standard theme’s CommentView.ascx file.

The containing <div> now have two classes: vcard and comment. The vcard class is new and is the one that triggers the hCard microformat. It looks like this:

<div id="id_<%=Comment.Id %>" class="vcard comment...

If the vcard class is added, machines will expect to find an hCard microformat within that <div>, but we need to add one more class to make it a valid hCard – the fn class name.

In the Standard theme’s CommentView.ascx file you can see where the name of the comment author is written. If it author supplied her website URL an hyperlink is created, otherwise a span tag. The hyperlink has a class attribute with two class names: fn and url. This tells the hCard crawlers that this is both the full name and the URL of the contact. In the span, only the fn class name is needed.

So, if you want to support microformats in your custom themes; take a look at the Standard theme’s CommentView.ascx file and make the appropriate modifications. BlogEngine.NET 1.4.5 already adds the appropriate classes to the avatar image and country flag, so you don’t have to do anything there.