Thibaut Van Spaandonck’s blog
Some stuff about the web and .NET development
-
W3C : Validate green in XHTML strict with ASP.NET
Posted on March 2nd, 2010 2 comments
ASP.NET is a fantastic technology for website development. It’s being used by major companies and it has already proven itself over the years. However, I recently encountered some strangy things. If you ever wondered “is it possible to develop a XHTML strict website in ASP.NET ?”, then my answer is : “yes it is, but not that straightforward”. Let’s discuss about that :
1. ASP.NET pages should have the strict DTD by default
ASP.NET pages have the transitional DTD defined. They should have been strict, in my opinion.
- Transitional is for projects using legacy code and allows you to write code the bad way. It was useful during the transition phase from HTML to XHTML but it’s over for a good time now
- Standards compliant websites have usually lighter markup, thus faster to display and easier to maintain due to separation of concerns
- It’s about to become illegal, in some cases, to develop websites which are not standard compliant. It’s already illegal for an organization to discriminate against disabled people and it’s pretty easy to argue that inaccessible Web sites are discriminatory – that’s what happened in the Sydney 2000 case
- A lot of other things but it ain’t the point of this article
Fix this and get strict
When you create a new ASP.NET page (web form, master page, …), Visual Studio uses template files. You can change these ones to specify a strict DTD by default. They’re located in C:\Program Files\Microsoft Visual Studio\Web\WebNewFileItems\CSharp.
Here’s what the section above the <head> tag of a WebForm template should look like :
<%@ Page Language="C#" %><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
- Notice that the <xml version=”…” > tag is placed next to the Page directive. If it’s placed below, the XHTML output code will start with a blank line and as the W3C validator expects it to be on the first line, you’ll get an error :
Unable to Determine Parse Mode! - Don’t forget to adapt the lang attribute of the <html> tag. It’s set to french in the example
- I recommend you to modify the MasterPage template as well to get rid of the transitional doctype definitely
2. Configure the ASP.NET engine to generate XHTML strict markup
By default, ASP.NET generates markup which does not conform to XHTML strict. One of the most obvious examples is the <form> tag. It’s written like this in the .aspx :
<form id="form1" runat="server">
And is rendered like this :
<form name="aspnetForm" method="post" action="accueil.aspx" id="aspnetForm">
Try validating this (XHTML strict of course) and you’ll get :
Pretty annoying ! Hopefully there’s an easy way to fix this. In the web.config file, specify the xhtmlConformance setting :
<system.web>
<xhtmlConformance mode="Strict" />
And you’ll no longer see the name attribute in the <form> tag anymore if you look in the source code with your browser. Try validating again, and you’ll get :
What the hell !? will you say… Here’s the explanation :
The W3C validator uses a custom browser which is not recognized by ASP.NET. Thus, it will downgrade the rendering process (legacy mode), generating again the same invalid code. And as the DOCTYPE is not changed and remains to strict, you’ll get that same error again. The solution proposed by Microsoft is to create a browser definition for the W3C validator in the App_Browsers folder of your Web project. Put the lines below in a w3cvalidator.browser file and you’re done with this.
<browsers>
<browser id="w3cValidator" parentID="default">
<identification>
<userAgent match="^W3C_Validator" />
</identification>
<capture>
<userAgent match="^W3C_Validator/(?’version’(?’major’\d+)(?’minor’\.\d+)\w*).*" />
</capture>
<capabilities>
<capability name="browser" value="w3cValidator" />
<capability name="majorversion" value="${major}" />
<capability name="minorversion" value="${minor}" />
<capability name="version" value="${version}" />
<capability name="w3cdomversion" value="1.0" />
<capability name="xml" value="true" />
<capability name="tagWriter" value="System.Web.UI.HtmlTextWriter" />
</capabilities>
</browser>
</browsers>
3. Learn to deal with ampersands
In the text of your website, you’ll most probably use ampersands sometimes (&). You know that you shouldn’t type them as is, but rather as &. Easy to do in regular files, but can cause problems sometimes. I recently encountered a “special” case when using master pages : the title is written in the title attribute of the @Page directive…
<%@ Page Title="Title with an ampersand &"
…and ASP.NET automatically converts the & to & in the <title> tag of the generated output ! And here’s the result :
You could use &amp; in this case to overcome the problem. But you’ll agree that it’s not convenient at all and error-prone. Maybe there is a “official” solution to this problem, but here’s my humble trick anyway :
In the Page_Load event of the MasterPage, encode the content of the <title> tag.
protected void Page_Load(object sender, EventArgs e)
{
this.Page.Title = Server.HtmlEncode(this.Page.Title);
}
4. Go green
This is where the article ends. This is a vast subject and if you want to go deeper in this, check out the following MSDN article : Building ASP.NET 2.0 Web Sites Using Web Standards. But for now, with the stuff we’ve just discussed here, this should be enough for you to get :
See you
-
[FR] Livre : Visibilité sur le web
Posted on January 30th, 2010 2 comments
Visibilité sur le Web (dans sa version anglaise Search Engine Visibility) est un ouvrage de Shari Thurow, reconnue mondialement comme une experte du SEO. Au travers de celui-ci, elle nous enseigne les bonnes pratiques à suivre pour optimiser le référencement naturel d’un site web. Les sujets couverts vont du fonctionnement des robots d’indexation des moteurs de recherche à l’optimisation des pages web, en passant par l’optimisation des images, des fichiers multimédia, etc. Bon nombre de mythes sont également discutés et démystifiés. Pour finir, un chapitre traîte des mauvaises pratiques et les pièges à éviter dans le cadre d’une campagne de référencement. Les +
- Un livre écrit par une personne de référence dans le domaine
- Très instructif et très bien construit
- Couvre bon nombre de sujets du SEO
Les -
- Pas un inconvénient mais plutôt une remarque : ce livre ne rentre pas profondément dans les détails techniques (pas de chapitres traitant d’alternatives d’implémentation, absence de bouts de code)
Conclusion
Un très bon livre qui constitue une excellente entrée en la matière. Cependant, le domaine du SEO étant très vaste, d’autres lectures plus techniques seront nécessaires à ceux désirant approfondir le sujet.
-
[FR] DotNetHub, le UserGroup .NET/Agile francophone
Posted on January 17th, 2010 No comments
DotNetHub, le tout nouveau UserGroup francophone en Belgique, est le résultat du projet initié par 3 de mes collègues (Pierre-Emmanuel Dautreppe, Norman Deschauwer et Thierry Thoua) en association avec d’autres professionnels de l’informatique. Le but de ce dernier est double :
- Pallier l’absence de UserGroups francophones en Belgique. Le premier UserGroup belge, VISUG, se rapprochant toujours plus de la partie nord du pays, l’initiative est plus que la bienvenue
- Proposer en plus d’un pôle technologique (.NET) un pôle méthodologique consacré à l’agilité (Scrum, XP, …) par l’organisation de dojos, entre autres
Pour la première session, DotNetHub aura le plaisir d’accueillir Peli De Halleux, un petit belge travaillant désormais pour Microsoft à Redmond. Il vous présentera Pex, Moles & Stubs, des outils de tests unitaires pour .NET.
Pour plus d’infos sur la session, c’est par ici. Pour s’inscrire, cela se passe par là.
Bonne session
-
[FR] Billets en français
Posted on January 17th, 2010 No commentsBonjour à tous,
Il s’agit d’une première sur ce blog : un billet en français. Le but de ce dernier est d’annoncer que seront postés désormais des billets dans la langue de Molière.
On oublie Shakespeare alors ?
Non, pas du tout. Certains billets seront en anglais, d’autres en français. Les deux coexisteront désormais sur ce blog. Pour faire la distinction, les sujets des billets en français seront marqués par le tag [FR], comme c’est déjà le cas pour ce billet.
Pourquoi cette séparation en 2 langues ?
Simplement car je trouvais illogique de blogger à propos de choses typiquement francophones en anglais. Un excellent exemple à ce sujet est la revue du livre Réussir son site web en 60 fiches, réalisée en anglais pour des raisons de cohérence. De la même manière, des événements tels que des formations, séminaires, etc méritent d’être signalés dans la langue appropriée.
Bonne lecture
-
Book review : DOM Scripting
Posted on January 2nd, 2010 No comments
This excellent book, which primarily targets a web designer audience, teaches you how to manipulate the DOM effectively but also other essential topics used in web development. Prior to reading this book, I already had a good knowledge of the DOM, so the technical aspect wasn’t what I learned the most from this book. And it’s also because the book won’t dig deep into technical aspects as the targetted audience is web designers (and not necessarily developers). An interesting consequence of this is that the author did an outstanding teaching work to make it easily understandable. But what you’ll learn is, according to me, way more useful than pure technical stuff : mastering concepts such as usable javascript, unobtrusive javascript and graceful degradation. Pros
- Very well written and explained : technical concepts are vulgarised and examples are very relevant (mini websites using all the concepts that were teached).
- Excellent course about the DOM and web development practices using Javascript.
Cons
- As the book was written primarily for web designers, it might leave some developers thirsty for more. But anyway, the more important stuff is in the book so that makes the deal. Just keep in mind that you won’t go in deep technical details in this book.
Conclusion
Another instant-classic book that will not only teach you the DOM very well, but also essential concepts such as usable javascript, unobtrusive javascript and graceful degradation. If you’re working in the web and those concepts are not familiar to you, this book is a must-have on your bookshelf ! But if you already have an advanced knowledge of these things, you might prefer to pick up another, more advanced book.
-
Visug summary : Modeling that works with code
Posted on November 15th, 2009 No comments
Last Visug edition, animated by Marcel De Vries from InfoSupport, concerned modeling with Visual Studio 2010. Note before we start that all of this is only available in the ultimate edition of VS 2010.
Overview
- Why we use models
- Models first approach
- Code first approach
- Conclusion
1. Why we use models
- Diagrams for communication
- Diagram = viewpoint on a model
- Model use is challenging because :
- Many interpretations of the same diagram
- UML available but people uses a few diagrams only (ex : use cases)
- Models become stale because :
- Implementation will be different from the model
- Maintaining diagrams takes time & effort
- Ultimate goal : run a model (Oslo vision), from a metamodel store (data repository)
- Model use is challenging because :
When to create a model ?
- It’s about communication, so create only models that serve a purpose
- Create only models that differ from the normal case
Two approaches
- Models first
- Code first
2. Models first approach
Scenario : you start a project and need to define the solution you’re going to build
- Requirements analysts : use activity diagrams & use cases to outline functionality
- Architects : build logial diagrams to outline required architecture to meet customer demand stated in the requirements
- Testers : use the diagrams to do its test analysis based on the specified requirements
- Developers can use the diagrams done previously to materialize the projects
=> Models are used to communicate throughout the team about what we’re going to do
In Visual Studio 2010 Ultimate Edition :
- New project type : modeling project
- Support for UML 2.X diagrams
- Other new types of diagrams : Layered diagrams & DGML diagrams
Diagrams can be generated from code. The speaker uses it to generate sequence diagrams for code reviews. Note that those diagrams are plain XML files but it’s recommended to manipulate them via the API (cause in a next version, maybe Microsoft is going to change the format).
3. Code first approach
Scenario : maintenance of existing projects.
- Developer can generate diagrams to gain insights on code dependencies
- Architect can find architecture patterns
- Architecture explorer helps discover and understand how a system works
Layer diagram
- Used by the architect to define the architecture
- Classes and namespaces are mapped to layers in the diagram
- Details the intended design
- Diagrams are very interesting to verify the architecture and enfoce it.
- In VS2010, there’s a tool to validate the architecture. Ex : you draw 3 boxes (UI, BLL and DAL), you link (arrow link) the UI to the BLL and the BLL to the DAL, you drag/drop your projects into the correct box. You then click “validate architecture” and you get a report about what’s violating the dependencies defined by the arrows.
- You can also use these diagrams to validate things such as code coverage in percentage for a given layer.
DGML
- Directed Graph Markup Language
- Nodes
- Containers
- Links
- Styles
You can also create you own diagrams (Progression API). You code in C# the way you want to generate the diagram. Styles can also be defined. Ex : speaker coded a diagram with nodes that must appear green or red (styles) following the code coverage percentage. Can also be used to annotate existing diagrams.
4. Conclusion
- Models & diagrams primarily for communication
- VS2010 supports both approaches : code 1st and models 1st
- New innovations in models that work with code (DGML & layered diagrams)
Also note that ScottGu is going to visit Visug in december so stay tuned
-
Book review : Guidelines for Online Success
Posted on November 11th, 2009 No comments
Written by industry experts, this book is a collection of best practices for web application and website development. Divided into 6 chapters (Interface & design, Marketing & Communication, Technology & Programming, Technical advice, Content/Content management and E-commerce) and widely illustrated, “do” & “don’t” are discussed about many notions of web development. Anyway, this book doesn’t assumes his title at all as it’s more a collection of pictures of nice websites than practices to follow. Even worse, among the few practices we’re given, many of them are completely unuseful and even redundant.
Pros
- Full-color book
- Very well crafted, original divisions into “tabbed” chapters with color schemes for each one of them
Cons
- Absolutely not a collection of “guidelines”, too few text and way too many pictures
- Some “guidelines” are completely dumb, such as “don’t make ugly layouts” and “don’t hide your navigation”
- Because the book is written by many people, some “guidelines” are redundant. I was told at least 5 times in the book that “my website should not take too long to load”
Conclusion
Absolutely not interesting about the “guidelines” aspect, but the book stills remains valuable if you’re using it like a “Web Design Index” for inspiration of best web productions.
-
Visug : lightweight stubs & detours for .NET
Posted on November 11th, 2009 No comments
Peli De Halleux, a belgian guy now working at Microsoft Research (Redmond) came back in Belgium at the Visug to talk about the project he’s working on. Stubs, Moles and Pex form together a lightweight framework to test .NET applications.
Stubs
Stubs is a stubbing framework solely based on delegates. Various examples can be found here.
Moles
Here’s an example of what you can accomplish with Moles, allowing you to replace any .NET method :
Pex
And here, a diagram showing at a high-level view how Pex works :
Pex is an automated whitebox testing tool for .NET. From your code and parameterized unit tests, test code is automatically generated in C# and test results can be seen in the “input/output table”.
Project-related resources
I could copy-paste the great description of the project off the official website… But I instead recommend to those of you who are interested in this to take a look at the following resources, explaining you what Stubs, Moles and Pex are all about in the details.
Have a nice reading
-
Book review : The Zen of CSS Design
Posted on November 1st, 2009 No comments
Almost every Web Developer knows the famous CSS Zen Garden, a project created by Web Designer Dave Shea aimed to encourage the use of standards-compliant CSS for a better web. Raw HTML was available to Web Designers who had to create some CSS that can completely change the layout of the website, thus underlying the power of semantical XHTML and best use of CSS. This full-color book, released following the CSS Zen Garden project success, is divided into 7 chapters : View Source, Design, Layout, Imagery, Typography, Special Effects and Reconstruction. Each of these ones teaches you best practices to CSS development (including cross-browser concerns in the details) but also to good Web Design in general. Pros
- Awesome book, very instructive
- A very interesting approach, based on the best submissions (Zen Garden project) to teach best practices and tricks of expert Web Designers
- Cross-browser concerns are explained very well, into the details and an overview of the alternatives to cope with ‘em is given.
- A very instructive course about Web Design (imagery, typography, layout, …)
- All chapters based on real world projects and not on academical examples
- The best and more complete book about Web Design I’ve read to date
Cons
- Not really a con, but this book is “medium to advanced” level, so good understanding of CSS is required before starting. Basics of CSS aren’t covered as the book immediately digs into the details, exceptions and advanced use of CSS
Conclusion
An instant-classic, awesome and very instructive book that every Web Designer must have on his/her bookshelf ! Finally note that you should have a good understanding of CSS prior to reading this book and have an interest in Web Design as some chapters such as “imagery” and “typography” are purely dedicated to this field.
-
Visual Studio 2010 new logo & MSDN website refresh
Posted on October 21st, 2009 No comments
A new logo for Visual Studio (illustrated above) and the MSDN were recently introduced. I personally find ‘em pretty damn sweet : sober yet powerful. Also note that the MSDN has not just a new logo, but the whole website was refreshed at the same time, featuring new services. Details about this can be found on Scott Hanselman’s blog.
Recent Comments