The Web Experience: from technology to design

I have published my initial roadmap and source code for a new framework that will use the United Nations (UN) data on the Millennium Goals to end poverty by 2015. The goal of this project is to use this data to expose it using Silverlight. The Codeplex project can be found here: http://worldindex.codeplex.com/.

I have to goals for this project:

1. I want to build a Silverlight application designed with the latest frameworks building large RIA application. These are frameworks like Prism, Model View View-Model (MVVM) and RIA .NET Services. These frameworks will enable RIA developers to build N-tier applications.

2. I want to use Silverlight to expose UN MDGs data to give a end-users a unique user experience of the data. I want this project to make a difference and to help regular people to understand and engage on what the data means using . In the long run I want to integrate the user experience with social networks such as Wikipedia, Twitter, Facebook together with map frameworks to raise awareness about the UN goals to end poverty.

So this blog post is just to say something general about this project that is just started. If you want to join this project as a developer please contact me through the codeplex project site or send me a message on this blog.

I will blog about the project as it goes along… Until next time.

Just as I was settling for the Google Chrome browser, Opera launches Opera Unite. At first sight it seems like a module that is built into the Opera browser. It enables you to easily share anything you have on your computer to the web. You can set various privacy settings on your files too.

They key is that sharing your stuff on the web is easy and everyone can do it. It is real-time sharing as your browser has to be running, but you can always have the browser up when the computer is running.

I wonder how the record companies will deal with this when you can share music streams with everyone on the web?

Anyway, great work Opera, as it pushes sharing even further. Imagine when social media and simple sharing merges together even more.

An issue that is very common designing web forms in ASPX when the .designer file is not generated. I have wondered so many times on the reasons why I cannot access some of my controls in code-behind, when changes has been made in the ASPX page. I just discovered that it says so in the Warning pane. The warning pane is something I rarely use during development of my ASPX pages, so it is excellent to know where I finally can find the answer to all my .designer problems. Simple really, but may be not so intuitive?!

http://www.codeverge.net/ng.asp-net-forum.visual_studio_2005/designer-files-are-not-updated-with-new-controls

Today, I realized that it is difficult and unnecessary to say WWW in front of a url that requires it. Usually we say go to: “time.com” and exclude the www. Sometimes we want the www and actually needs it because the domain will not work without it.

I suddenly thought… Why not just say: “[Tripple – V][dot]time[dot]com” instead of “[double-u][double-u][double-u][dot]time[dot]com”. Easy…

Microsoft have finally announced a URL Rewrite Module for IIS 7.0. I had to use either Apache mod_rewrite or a third party module for IIS. So why is this so great? Well, we can provide the end-user of a web page a friendly URL, which is is the most important thing for me. We can make a query string, which is easy for web developers to understand (http://mydomain.com/article.aspx?articleid=123422&language=en) and make intuitive so the user can actually use the “query string” directly to navigate the site (http://mydomain.com/articles/123422/en)

Using rewritten URL, you can draw a virtual hierarchy of the site and content structure, and make the query string look like subfolders. It makes much more sense to the users and it can act as a breadcrumb.

This is one of the many usages of the URL Rewrite modules. I will not cover them here, but you can read this example to get into it. I am just pleased to give my end-users friendly URLs.

I’m working with Microsoft technologies in my daily work, both because I like the development platform that .NET provides and the software that Microsoft creates. However, Internet Explorer have some serious problems that frustrates me as a web developer. I’ll throw my issues out here, together with my fixes, if I have any. So if you read this and have similar problems, please give me some feedback on how I can fix my issues, or state your own as well.

I test all my web applications in Firefox, Opera, Safari for Windows, Internet Explorer from version 6 and up. I will focus on the latest official browser: Internet Explorer 7, and compare it with Firefox, Opera and Safari.

Issue 1

I’m am currently using Gaiaware in my web application. To enable Ajax in a simple and efficient manner. I try to show and hide a validation message.

  The red box in the image above has an arrow to the left that visually points to the line with the error. The box is made visible wrapping it in a Gaia:Panel. This works well in all browser except IE7.

In IE7 it renders extra arrows as shown above for every time the box is shown. It is rendered all the way to the left on the line together with the input field. 

The HTML that is rendered is shown above. You can see multiple spans for each arrow with a class saying “feilmeldingPilVenstre”.

<div class="feilmeldingTekst" id="id2">
    <span id="id1">Udefinert tekst</span>
    <span class="feilmeldingPilVenstre" id="id3"/>
</div>

In the other browsers however it is rendered with the code above, which is correct.

The source code that generates the error in IE7 looks the this:

<gaia:Panel ID="pnlFeilmelding" runat="server" CssClass="feilmeldingTekst">
    <gaia:Label ID="lblFeilmelding" runat="server" Text="Udefinert feilmelding"></gaia:Label>
    <span class="feilmeldingPilVenstre" />
 </gaia:Panel>

FIX: The fix is to make the span class a Gaia:Label as shown below. Then also IE7 rendered the arrow only once, as it was supposed to. I do not know why IE7 treats the span tag any different. Does it mean that it treats all generic html controls strange like this?

<gaia:Panel ID="pnlFeilmelding" runat="server" CssClass="feilmeldingTekst">
    <gaia:Label ID="lblFeilmelding" runat="server" Text="Udefinert feilmelding"></gaia:Label>
    <gaia:Label ID="lblFeilPilVenstre" runat="server" CssClass="feilmeldingPilVenstre"></gaia:Label>
 </gaia:Panel>

I have been looking at jQuery the last months developing a highly interactive web solution, and I have been really impressed by the framework and how easy it is to develop solutions using JavaScripts. I am not going to explain jQuery here, but check it out at jquery.com

Anyway, I was reading the great news today at BetaNews, that Microsoft plans to make jQuery a part of their official development platform, which is excellent news for ASP.NET development! jQuery will be shipped as a part of a new Visual Studio, but in the meantime be distributed as a part of the ASP.NET MVC framework.

I found a great article on how to create CSS buttons without using JavaScript. And best thing is that it works with all major browsers.

http://www.search-this.com/website-design/css-rollover-buttons/

Create the following structure:

<div class=”button” style=”float:right;”>
    <asp:LinkButton ID=”btn_Next” runat=”server”>
         <img src=”image/button_deactive.gif” alt=”Next” />
         <span>Next</span>
     </asp:LinkButton>
</div>

Then use the CSS below:

.button
{
position: relative;
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 157px;
height: 32px;
margin: 0px;
padding: 0px;
}

.button a
{
display: block;
color: #666;
font-weight: bold;
width: 157px;
height: 32px;
display: block;
float: left;
text-decoration: none;
}

.button img
{
    width: 157px;
     height: 32px;
     border: 0;
}

.button img {width: 157px; height: 32px; border: 0; }
* html a:hover {visibility:visible}

.button a:hover img{visibility:hidden}

.button span
{
padding-right: 0px;
padding-left: 0px;
left: 0px;
padding-bottom: 0px;
margin: 0px;
cursor: pointer;
padding-top: 0px;
position: absolute;
top: 9px;
width: 157px;
text-align: center;
}

In my master thesis I argue that dynamic style guides makes it easier for projects to have a style guide that is used and maintained through a project. I discuss a custom tailored tool, and argue that it is necessary to build a tool that integrates with developer tools such as Eclipse, Visual Studio, Jira etc. to track the use of style guide elements, and to make style guides usable and easy-access to gain commitment from all stakeholders.

In an enterprise project in public sector in Norway, done by Capgemini, we have a need to make our style guides digital. We do not want to use Word – documents even though we use Microsoft Office Sharpoint Server 2007 as our project web. The reason for this is that we loose the flexibility, overview, and control on what’s going on. Using a Wiki is the nearest solution I have found compared to a custom tool.

I have tried all kinds of Wikis, and the best so far is without doubt: Deki Wiki from Mind Touch. It is a Open Source Wiki based on PHP, .NET web service, MySQL database and it can run on almost any platform.

It has great features, and I will mention the ones that made my choice easy (you can read the whole feature list here):

• WYSIWYG editor
  Makes it easy for every developer, contributor and reviewer to participate without knowledge of WIKI syntax
• Versioning
  In any project it is essential to have a good and usable versioning tool. It supports a great comparison view between different versions of a page, and makes it easy to roll back at any time.
• Attachments and media
  The need to describe elements using illustrations and images, and also videos can be covered by this Wiki. It is also easy to upload media and files, and to reuse the elements in other pages.
• Access control and Active Directory integration
  It is crucial for the success of integration of the tool into our project infrastructure, that it supports integration with Active Directory (AD). It works great, and all our users can login using their existing usernames and password on the project domain. The Wiki can also set default rights on new domain users.

It is the total of all features that makes this product so great, and the fact that it is wrapped aesthetically and usable makes my first choice for this job. Our style guide Wiki depends on good usability and great user experience and we hope this Wiki will be our solution during the project. We just started using it, so I’ll keep you updated on how it works when all stakeholders are using it.

In my next blog post, I will describe the technical challenges and solutions for how to install the Wiki on Microsoft Windows Server 2008 with Hyper-V.

Yesterday I discovered this great site: http://workspace.officelive.com/. It was released to public beta, and it is your own personal Sharepoint portal to share office files. It is very intuitive and easy to use, and it is great to share things your working on with friends, colleagues and businesses. Best of all: It’s free!

Try it today! And see if you like it yourself.