Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • [FR] Site Web : People & Business Development

    Posted on May 18th, 2010 Thibaut 3 comments

    Mon nouveau projet, réalisé en tant que freelance et en collaboration avec le graphiste Quentin Flamant, est le site web pour la société People & Business Development. L’objectif principal est d’assurer une présence en ligne de cette dernière, y compris dans les réseaux sociaux (tels que Twitter, Facebook et LinkedIn), afin de présenter son activité et ses services. Le surf sur mobile étant une tendance en vogue, une version optimisée pour l’iPhone et l’iPod touch a également été développée.

    Présentation de la société

    Actif depuis une dizaine d’années, People & Business Development est un bureau spécialisé en coaching, en formation et en conseil pour optimiser le potentiel humain des organisations et, en conséquence, le chiffre d’affaires. Leur liste de clients comporte des noms tels que Alstom, la Commission Européenne, Delta Lloyd Life, Securitas ou encore Gefco.

    Le site web

    Le site a été développé en ASP.NET et utilise jQuery comme librairie javascript ainsi que jQuery UI pour les composants graphiques. Des propriétés CSS 3 ont été utilisées pour embellir le site dans les navigateurs modernes sans affecter le rendu dans les navigateurs plus anciens via le mécanisme de dégradation gracieuse. En ce qui concerne le respect des standards du Web, chaque page du site passe la validation W3C XHTML 1.0 Strict.

    People & Business Development

    La version iPhone et iPod touch

    Ci-dessous, des captures d’écran de la version dédiée à l’iPhone et l’iPod touch. On notera notamment la détection de l’orientation permettant une lecture plus aisée de longs paragraphes de texte ainsi que l’intégration au menu de l’iPhone et l’iPod touch, permettant un accès direct au site web.

    Cliquez pour agrandir

    People & Business Development iPhone

    Cliquez pour agrandir

    Conclusion

    L’objectif de ce post, outre l’aspect publicitaire, est de présenter une application concrète de bon nombre de mes précédents posts, incluant :

    Bonne visite !

    Share/Save/Bookmark

  • W3C : Validate green in XHTML strict with ASP.NET

    Posted on March 2nd, 2010 Thibaut 4 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 &amp;. 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 &amp;"

    …and ASP.NET automatically converts the &amp; to & in the <title> tag of the generated output ! And here’s the result :

    You could use &amp;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 ;)

    Share/Save/Bookmark

  • Book review : The Zen of CSS Design

    Posted on November 1st, 2009 Thibaut 2 comments
    The Zen of CSS design 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.

    Share/Save/Bookmark

  • In bulk #4

    Posted on September 9th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • The little-known <wbr /> tag

    Posted on August 16th, 2009 Thibaut 5 comments

    The <wbr /> tag (word break), little-known but very useful, tells the browser “insert a word break here if you wish”. Consider for example that you have a long text (ie a URL or alphabet letters) to put in a zone which width cannot be extended. So we have the following code :

    XHTML :

    <div class="fixedWidth">

        abcdefghijklmnopqrstuvwxyz

    </div>

    CSS :

    div.fixedWidth

    {

        width : 50px;

        overflow : hidden;

        border : 1px solid red;

    }

    Result :

    abcdefghijklmnopqrstuvwxyz

    Now using <wbr /> :

    <div class="fixedWidth">

        abc<wbr />def<wbr />ghi<wbr />jkl<wbr />mno<wbr />pqr<wbr />stu<wbr />vwx<wbr />yz

    </div>

    Result :

    abcdefghijklmnopqrstuvwxyz

    Emphasize is put here on the amount of inserted <wbr /> tags (every three letters actually) to illustrate the browser behaviour, which decides when to effectively insert a word-break, in opposition to the <br /> tag, which always inserts one.

    This tag is not XHTML valid (maybe the reason why you won’t find it in the Visual Studio intellisense) but widely implemented by browsers anyway. Results shown here are not screenshots but direct interpretation of the tag, so you get immediately an idea if your browser supports it. For more information about its support, you can take a look at the compatibility table. So, in some cases, instead of using ugly CSS hacks, rather use <wbr /> and you’re done !

    Share/Save/Bookmark

  • The IE nested lists whitespace bug

    Posted on July 27th, 2009 Thibaut 1 comment

    I was struggling on styling some ul/li list nested into a ol/li list then I noticed that it’s simply (another) IE bug. Let’s consider the following list :

    <ol>

        <li>

            <ul>

                <li>line 1 - item 1</li>

                <li>line 1 - item 2</li>

            </ul>

        </li>

        <li>

            <ul>

                <li>line 2 - item 1</li>

                <li>line 2 - item 2</li>

            </ul>

        </li>

    </ol>

    And the problem was like :

    line 1 - item 1
    line 1 - item 2
    unwanted space
    line 2 - item 1
    line 2 - item 2

    Even with the margin and padding set to 0 as the following CSS file shows :

    ol,

    ol li ul

    {

        list-style-type : none;

        margin : 0;

        padding : 0;

    }

     

    ol li,

    ol li ul li

    {

        margin : 0;

        padding : 0;

    }

    After some browsing and tests, I ended on the following solution, which is to set the display property (main list) to inline-block :

    ol li

    {

        display : inline-block; /* To avoid IE "ul li white-space bug" */

        padding : 0;

    }

    More info about this bug

    Hope it was useful. See you !

    Share/Save/Bookmark

  • What beautiful HTML looks like

    Posted on May 1st, 2009 Thibaut 2 comments

    After looking at how to write a clean CSS, now let’s see how to write beautiful HTML. Click on the picture to zoom.

    Source : CSS Tricks

    Share/Save/Bookmark