Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • Microsoft WebCamps Brussels - Summary

    Posted on January 30th, 2011 Thibaut 5 comments

    WebCamps

    Last Monday was organized the Microsoft WebCamps event in Brussels. Dedicated to Web developers and UX designers, this one day event enables you to stay up-to-date with the latest stuff. Topics covered included HTML5, jQuery, ASP.NET MVC 3, … And I’m going to share some of my notes here.

    Opening keynote

    By Scott Hanselman

    • Presentation of WebMatrix and the Razor syntax. For “get it done” developers who want, for example, to install and configure a website powered by a CMS for some customer in only a few minutes
    • jQuery adoption is so big that Microsoft continues to invest into this library : jQuery UI will also be part of the .NET framework
    • Presentation of the new features of ASP.NET MVC 3. ScottGu has written some very interesting articles on the subject, be sure to check them out if you’re interested in MVC 3
    • NuGet is a very powerful package installer. With just a few commands, install nInject, Entity Framework, … Time to learn PowerShell has come ;)

    How about HTML5 today ?

    By Katrien De Graeve

    • Slides of the presentation
    • Use shims to use HTML5 today (the JS script to make IE recognize the new HTML5 tags)

      <!–[if lt IE 9]>

      <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

      <![endif]–>

    • Use a reset CSS (typically to make some of the new elements display as blocks
    • Download HTML5 instellisense for Visual Studio
    • Use Ray Bango’s templates for Visual Studio
    • CSS3 : more control over color (RGBA, …), borders and shadows, fonts (use FontSquirrel to integrate custom fonts on your website)
    • Use IE9 developer tools (F12) to change the document mode (to IE8, IE7) to test against previous versions of browsers
    • Modernizr : great JS library enabling you to target specific browser functionality in your stylesheet, so you can take advantage of HTML5 and CSS3 while having a compatible site for older browsers
    • <video> tag : different codecs supported by browsers. Be sure to create multiple encodings of the same video (by using VLC Media Player for example) or provide a fallback in Flash or Silverlight.

      <video controls>

          <source src="foo.ogg" type="video/ogg">

          <source src="foo.mp4">

          <object/> <!– Silverlight or Flash –>

      </video>

    • Canvas : drawing using JS. Example of application : Pirates love Daisies, a game written using Canvas.
      Pirates love daisies
    • Use Ai to Canvas to convert Adobe Illustrator files to a canvas compliant format
    • Canvas (bitmap) != SVG (vector)
    • General guidelines :
      • Use feature detection VS browser detection. For each new version, browsers implement more and more the HTML5 spec. So browser detection isn’t a good approach at all
      • Start using HTML5 now ! Don’t wait for the spec to be complete (you would still be waiting for the CSS2 spec to be complete then…)

    Come in as a jQuery zero, go out as a jQuery hero

    By Gill Cleeren

    • Intro of jQuery (selectors, plugins, …) : I’m not going to rewrite the complete course here, just google, the web contains loads of tutorials about that hot subject

    OData : open data for the web

    By Scott Hanselman

    And that’s it ! Have fun playing with that exciting stuff ;)

    Share/Save/Bookmark

  • jQuery UI versus custom development

    Posted on July 17th, 2010 Thibaut No comments

    During the development of People & Business Development – my latest web project (related post) – I used the great jQuery UI library for some visual components such as the carousel or accordion. For some reasons I’ll discuss below, I also implemented those features by myself and I thought that giving my experience feedback could be useful.

    The carousel

    The landing page of the website presents the logos of the clients, which was done using jCarousel (jQuery UI). It needed somme little tweaking but was done in a reasonable amount of time. The jCarousel file contains 878 lines of code, which is quite heavy for me because I only needed a basic behavior.

    Carousel

    Considering all that richness I didn’t need and the fact that it always takes some time to adapt the library to the project, I decided to implement my own carousel for the twitter widget in the sidebar. Not only is the file way smaller (41 lines, I actually copy-pasted the code below so you can take a look at it), but it also took me less time to develop this custom version from scratch than adapting the jCarousel library to fit my project.

     

        1 $(document).ready(function() {

        2     var widgetWidth = 180;

        3     var animationSpeed = 700;

        4     var easing = "swing";

        5     var itemCount = $("#twitter_widget_list li").length;

        6     var currentItemIndex = 0;

        7 

        8     if (itemCount == 1)

        9         $("#btnTwitter_next").addClass("disabled");

       10 

       11     $("#btnTwitter_previous").click(function() {

       12         if (currentItemIndex > 0) {

       13             $("#twitter_widget_list").animate({

       14                 left: "+=" + widgetWidth

       15             }, animationSpeed, easing,

       16                 function() {

       17                     if (currentItemIndex == 0) {

       18                         $("#btnTwitter_previous").addClass("disabled");

       19                     }

       20                 });

       21 

       22             currentItemIndex–;

       23             $("#btnTwitter_next").removeClass("disabled");

       24         }

       25     });

       26 

       27     $("#btnTwitter_next").click(function() {

       28         if (currentItemIndex < itemCount - 1) {

       29             $("#twitter_widget_list").animate({

       30                 left: "-=" + widgetWidth

       31             }, animationSpeed, easing,

       32                 function() {

       33                     if (currentItemIndex == itemCount - 1)

       34                         $("#btnTwitter_next").addClass("disabled");

       35                 });

       36 

       37             currentItemIndex++;

       38             $("#btnTwitter_previous").removeClass("disabled");

       39         }

       40     });

       41 });

    The accordion

    I also used the jAccordion plugin to display the list of trainings and services the company provides (can be seen on the website here and there). The file contains 477 lines of code because you can, once again, customize a lot of things that most of the time you’ll don’t need. Integration time was very small and it perfectly fitted my needs, at least for the regular version of the website.

    For the iPhone/iPod touch optimized version, I simply couldn’t use it anymore : jAccordion sometimes creates a scrollbar into the sections that the iPhone and iPod touch won’t display. There is only one main scrollbar on those devices, resulting in a cropped content. In that case, I could either adapt jAccordion, take the time to dive into the code of the plugin or develop again a custom version from scratch. I chose the latest option, which took me 10 minutes to implement and test :

        1 $(document).ready(function () {

        2     $("div.accordion h3 a").click(function () {

        3         // Update arrow icons

        4         $("div.accordion h3 span").attr("class", "closed");

        5         $(this).prev().attr("class", "opened");

        6 

        7         // Show/hide sections

        8         $("div.accordion > div").slideUp(600);

        9         $(this).parent().next().slideDown(600);

       10 

       11         // Prevent default behaviour for href="#"

       12         return false;

       13     });

       14 });

    Conclusion

    So now you understand why I thought talking about this could be interesting as the difference between the 2 options is big. First : jQuery UI is a great library. You can do a lot of cool stuff with it, there’s plenty of documentation and the community is huge, so you’ll always find what you’re looking for.

    But in some cases (like mine), using those plugins is not always the best option. First it took me less time to develop a custom version than adapting the code of the plugin to fit my needs. Second, it’s way lighter (I got 41 lines of code instead of 878 for jCarousel and 14 lines instead of 477 for jAccordion).

    Although there’s no point comparing the amount of lines of code here (jQuery UI does provide much more options than my custom controls, so obviously code files are heavier), what should be remembered is : if you’ve got a good knowledge of jQuery, sometimes you’ll go much faster developing custom controls than using plugins, so think about it ;)

    Share/Save/Bookmark

  • [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

  • A standards-compliant alternative to target=”_blank”

    Posted on March 28th, 2010 Thibaut No comments

    1. The context

    At least once in every web developer’s life, the target attribute of an anchor link (<a>) was used with the “_blank” value to tell the browser “open this link into a new window”. The problem is that this attribute is deprecated and thus doesn’t pass the W3C Validation.

    Although it’s considered a usability error to force that behaviour (the user should be the only one take that decision) and usability experts such as Jakob Nielsen totally agree with this, it’s sometimes a need to control this. It can be within the context of a web application to satisfy a customer request for example and I think a lot of people needed to use this once for a good reason.

     

    2. The alternatives

    • Add a “external” css class to the anchors links in the server-side code, and in javascript open those ones in a new window
    • In javascript, find links having a URL starting with “http://” and open them in a new window

    The first solution isn’t ideal according to me :

    1. You don’t always have access to the server-side code
    2. If the website uses a CMS, you don’t wanna force your users to add these classes by themselves
    3. It generates a heavier markup (with useless “class” attributes)
    4. It requires a manual intervention to add these classes and is thus error-prone

    The second solution is better but yet imperfect :

    1. It’s better because it’s an automatic process
    2. It works quite well as internal links are relative paths (ex: “products.aspx”) so URLs starting with “http://” will open in a new window
    3. Sometimes you have absolute paths who are not real external links. It’s sometimes the case for websites with a CMS. Example : you have a website, “http://mysite.com”, you don’t want a URL “http://mysite.com/products.aspx” to open in a new window, even if it’s starting with “http://”.

     

    3. The solution : target_blank.js

    With all of this in mind, I created a target_blank.js file that does the job, using the great jQuery library :

    $(document).ready(function() {

        $("a").filter(function() {

            return this.hostname && this.hostname.replace("www.", "") != location.hostname.replace("www.", "");

        }).click(function() {

            window.open($(this).attr("href"));

            return false;

        });

    });

    1. When the DOM is loaded (document ready)
    2. Find all the links having a hostname (thus not links such as “mailto:” etc) and having a hostname different from the one of your website (without the “www.” as you want to consider “http://mysite.com” and “http://www.mysite.com” as the same domain)
    3. When clicked, open that link into a new window (passing the href value as argument) and return false to cancel the standard behaviour (which would have been to change the URL within the current window)

     

    4. Conclusion

    We’ve seen here a standards-compliant alternative to target=”_blank” using non-obtrusive Javascript (it degrades well as a browser with javascript disabled simply won’t offer that functionality without crashing the whole thing) and that requires no manual intervention from the developer or the user (case of a CMS). Just keep in mind that it’s not a good usability practice and thus this technique should be used for a good reason (eg : within the context of a web application for a particular need).

    Make good use of it ;)

    Share/Save/Bookmark

  • In bulk #4

    Posted on September 9th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • In bulk #3

    Posted on August 13th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • In bulk #2

    Posted on July 15th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • In bulk #1

    Posted on May 29th, 2009 Thibaut 1 comment

    Share/Save/Bookmark