Also, if you have not registered for our code camp, being hold October 8th and 9th at Foothill College for the 6th year in a row, please do so now at our registration page.

Blogged here and available here

Let us know what you think!

The company I’m now working at is small and we don’t have a lot of resources to maintain hardware and do operating system type support.  We do have a high load requirement so we need a very robust supported solution.  Before this, I’d always been in the under $50 per month type plan with ORCSWeb, but I decided I needed more servers and a higher level of support.  I really did not know what level of support to expect when signing up for the managed servers but decided to go for it anyway.

All  can say is WOW!!!  I am over the top impressed.

We currently have 3 virtual servers hosted at ORCSWeb.  One, we use as a development server, and the other two are in a webfarm configuration.  I’ve always believed that when you go into production with a web site it’s critical you start with 2 servers in a webfarm.  it’s really easy to go from 2 to 10, but can be very painful to go from 1 to 2.   That’s a topic for another post, but suffice it to say, 2 is the minimum.

So, why am I so impressed?  First, the support team they assigned to me is totally awesome.  They all are focussed and competent which is a total relief compared with most hosting companies I’ve dealt with.  Other companies always have good people, but it seems to be the bad ones that really give me cause to remember.  Second, because I paid extra for the full managed support options on our three servers, I’ve been able to ask the things like the following.  Almost all of them I could do myself, but I’m swamped with my technology role in the new company and really appreciate being able to hand stuff like this off.

• I’ve pointed my MX record at my .149 server.  Could you please set up email and create the following 7 accounts.
• Please Setup a secure ftp server at the following address with the following username and password (and make sure the user is locked down to the root)
• Setup DFS Replication between these two directories on .148 and .149
• Create a RoboCopy script that copies files from my dev server to the .149 mirrored directory
• Please set up web statistics for me on http://www.siliconvalley-codecamp.com
• Please figure out why SqlServer 2008 is not letting me access catalog MyStuff1 from user 3p1 and fix
• Please make a replicate of website MyWeb1.com including the sqlserver catalog’s and put it on MyWeb2.com on server .149
• Please replace the sqlserver catalog MyStuff3 on server .149 with the bak file I uploaded to my ftp server
• I could go on and on, but I think you are getting the idea.
• Always with a smile, 24×7, what else can I say.

By the way, if you want to see one of my sites hosted there, go to http://www.siliconvalley-codecamp.com

Thank you ORCSWeb for making things a lot easier for me.

I always intended to put the source code for this project online, however I just kept not getting around to it.  In this article, I’m attaching a Visual Studio 2008 Solution that includes both the modified CSS Friendly Control Adapter as well as a sample application that demonstrates the technique in this series.  I’m actually using the Code Camp CSS since that is the site that this solution was written for.  I’ve created a much abbreviated version of the Code Camp Site Project for this demonstration.  Below is the source code (finally).

Visual Studio 2008 Solution CSSFriendlyCustomMenu

The solution is load out as follows:

There are two projects (actually, one class library and a web site).  The class library really is just the CSS Friendly Controls library with small modifications to the menu class.  The WebSample web project is just a stripped down version of the code camp site to demonstrate the techniques used.  When you run the web site, you should see results like the following.

Notice that when the speakers page is shown, the Program menu stays highlighted.

And, the sitemap is as follows:

   1: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   2:   <siteMapNode url="Default.aspx" title="HOME"  description="Silicon Valley CodeCamp 08">

   3:     <siteMapNode url="Register.aspx" title="REGISTER"  description=""  />

   4:     <siteMapNode url="Program.aspx" title="PROGRAM"  description="">

   5:       <siteMapNode url="SessionsOverview.aspx" title="Session Overview"  description="Session Overview" />

   6:       <siteMapNode url="Speakers.aspx" title="Speakers"  description="" />

   7:     </siteMapNode>

   8:     <siteMapNode url="News.aspx" title="NEWS"  description="" />

   9:   </siteMapNode>

  10: </siteMap>

That’s it!

Good luck with this.

Timothy Woods, Foothill College Dean checking on rainy day space for us

Me, Mike Van Ripper and Timothy Woods sporting our Code Camp Speaker Shirts!

If you can’t read the logo, it says Silicon Valley Code Camp V3.0

Check out our 118 Sessions!  (including Microsoft Azure sessions)  http://www.siliconvalley-codecamp.com/Sessions.aspx?sortby=title&by=category&tag=264

All Sessions Here:

http://www.siliconvalley-codecamp.com/SessionsOverview.aspx

See you next week at camp!

The Problem

For the third year in a row, Silicon Valley’s Code Camp is happening.  The way I’ve organized the data is that each year I make a fresh new sql server 2005 database catalog.  this means that I have one for 2006, one for 2007 and a new one for 2008.  I want to do a mailing to all people who have registered to previous code camps and who have not registered yet for this code camp.  This way, I can do multiple mailings without worrying about sending to people that who have registered (which would make me look silly for not knowing they registered already).  I do not like when people say things like "Ignore this message if you have registered…".  In addition we will maintain an opt out list so that people who do not want additional emails sent can request that and not worry about us sending more emails.

The Givens

So, since this article is about how to solve the problem with LINQ, I will not go into details of how to create the generic lists of email addresses.  Let’s assume we have methods that give us these 4 lists. They are:

• 2006 Registered Attendees
• 2007 Registered Attendees
• 2008 Registered Attendees
• Opt Out Email List

The Code

Below is the C# version 3.0 (.Net 3.5 and asp.net 3.5) that performs this function described in the problem above.  The next section "The Explanation" gives more details on what i s happening.

   1:  using System.Linq;

   2:   

   3:  /// <summary>

   4:  /// shows all non registered users by going 

   5:  /// through past years and making a

   6:  /// unique query.

   7:  /// </summary>

   8:  /// <returns>List of all non-registered 

   9:  /// code campers form previous years</returns>

  10:  public static List<ListItem> LoadAllUnRegisteredCodeCampUsers()

  11:  {

  12:   

  13:      List<string> codeCampersCurrentYear = 

  14:          GetEmailsFromPreviousYear("CodeCampSV06");

  15:   

  16:      List<string> emailOptOut2008 = 

  17:          GetDoNotRemoveList("CodeCampSV06");

  18:   

  19:      List<string> codeCampers2007 = 

  20:          GetEmailsFromPreviousYear("PASTSV07");

  21:   

  22:      List<string> codeCampers2006 = 

  23:          GetEmailsFromPreviousYear("PASTSV06");

  24:   

  25:      // Make Combined List of 06 and 07 and unique it 

  26:      // (duplicates are removed in Union)

  27:      IEnumerable<string> uniqueNamesQuery =

  28:          codeCampers2006.Union(codeCampers2007).OrderBy(s => s);

  29:   

  30:      var emailListBeforeOptOut = 

  31:          uniqueNamesQuery.Except(codeCampersCurrentYear);

  32:   

  33:      var emaiListAfterOptOut = 

  34:          emailListBeforeOptOut.Except(emailOptOut2008);

  35:   

  36:      List<ListItem>  finalList = new List<ListItem>();

  37:      foreach (string s in emaiListAfterOptOut)

  38:      {

  39:          finalList.Add(new ListItem(s,s));

  40:      }

  41:      return finalList;

  42:  }

  43:   

The Explanation

The first line (1) is required because all the LINQ methods we are using are static extension methods.  This means, that without referencing the LINQ namespace, the methods OrderBy,Except and Union would not be available to us.

Lines 13 to 23 call methods that populate our generic lists of strings.  The reason this is done is because each of these lists come from different SQL Server 2005 database catalogs. This can probably be done in LINQ but I thought it was easier to do it this way.

Line 27 creates a list of unique names.  The Union method has the added benefit of eliminating duplicates.  OrderBy(s=>s) simply creates an annonymous delegate that takes in a string and returns a string so that is what gets sorted.  After giving this some thought, I’m not sure the OrderBy really helps us in anyway but this is a tutorial type article so I’m leaving it in.

Line 33 removes all the people who have asked to be opted out of the email.  It uses the static extension method Except.

Finally, line 36 to 40 creates a generic list of ListItems which is what is returned by the method.  ListItem’s are returned primarily because the calling method shows a list of checkboxes and this makes it easy.

Conclusions

LINQ is a great tool for managing collections.  In this case we demonstrated how to take 4 generic lists of strings (collections), do some simple set operations (union,except,orderby) and produce a list of emails we want to send.  Not only is it simple to code, it’s easy to maintain because the method names are so descriptive.   Hopefully, this will help with your similar programming efforts.  Best of luck.

After a little searching around, I discovered that a header tag was needed.  Further searching found a nice web site that helped create this header tag for me.

http://www.feedforall.com/autodiscovery.htm

Then, all I had to do was add that tag to my master page and the page is now discoverable!

   1:  <html xmlns="http://www.w3.org/1999/xhtml">

   2:  <head id="Head1" runat="server">

   3:      <title>Silicon Valley Codecamp 2008</title>

   4:      <link rel="alternate" type="application/rss+xml" 

   5:         title="Code Camp Rss Feed" 

   6:         href="http://www.siliconvalley-codecamp.com/Rss.aspx" /> 

   7:  </head>

Lines 4-6 are the header tag created by the autodiscovery tool listed above.

That’s it. Hope this helps. I did not include it in my series on building the code camp web site because it seemed kind of a small point.

Introduction

This article shows how to create a modal windows (not a popup) that displays a login windows (asking for username and password) in the middle of whatever asp.net page you are viewing.  It uses the Telerik Modal Radwindow control.  At the end of a successful login, the login dialog redirects the web user to some page designated by the author.  It requires no Javascript programming by the programmer.  Just simple method calls in the asp.net page.

How it Looks to the Web User

When the user press the login button in the upper right corner of the Silicon Valley Code Camp web site, below is the screen they see.

Notice that the screen behind actually fades out and is not able to be clicked by the web user.

The Method Behind Creating the Modal Window

OK, so there is a little bit of javascript you need to add to your page.  Basically, what you do is in your master page, around where you have your login control, you put the following code into your aspx page.

   1:   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

   2:      <table class="headBar" cellpadding="0" cellspacing="0">

   3:          <tr>

   4:              <td>

   5:                  <div class="headLogo">

   6:                  <asp:HyperLink ID="HomeLink" runat="server" NavigateUrl="Default.aspx">

   7:                      <asp:Image ID="HeadLogo" SkinID="ImageLogo" AlternateText="Silicon Valley codecamp_08"

   8:                          runat="server" />

   9:                  </asp:HyperLink>

  10:                  

  11:                 

  12:                  

  13:                  </div>

  14:              </td>

  15:              <td valign="middle">

  16:                  <span class="headDate">Saturday and Sunday, November 8th & 9th, 2008</span>

  17:              </td>

  18:              <td align="right">

  19:                  <div class="headLogin">

  20:                      <div>

  21:   

  22:                          <script type="text/javascript">

  23:                              //<![CDATA[

  24:                              //show the window

  25:                              function showDialog()

  26:                              {                    

  27:                                  //Force reload in order to guarantee that the onload event handler 

  28:                                  // of the dialog which configures it executes on every show.

  29:                                  var oWnd = window.radopen(null, "DialogWindow");

  30:                                  oWnd.setUrl(oWnd.get_navigateUrl());

  31:                              }

  32:                              

  33:                             

  34:                              // Called when a window is being closed.  (force refresh)

  35:                              function OnClientclose(radWindow)

  36:                              {     

  37:                                   window.location.href = "News.aspx";           

  38:                              }    

  39:                              //]]>            

  40:                          </script>

  41:   

  42:                          <asp:ImageButton ID="IDLoginButton" SkinID="ButtonLogin" 

  43:                              OnClientClick="showDialog();return false;"

  44:                              runat="server" />   

  45:                          <asp:LoginStatus ID="IDLoginStatus1" runat="server" />

  46:                          <asp:LoginName runat="server" ID="IDLoginName1" />

  47:                          <telerik:RadWindowManager ID="Singleton" runat="server">

  48:                              <Windows>

  49:                                  <telerik:RadWindow ID="DialogWindow" Behaviors="Close" 

  50:                                      ReloadOnShow="true" OnClientClose="OnClientclose"

  51:                                      BackColor="Gray" Modal="true" runat="server" Height="250" 

  52:                                      NavigateUrl="./Login.aspx">

  53:                                  </telerik:RadWindow>

  54:                              </Windows>

  55:                          </telerik:RadWindowManager>

  56:                          

  57:                          <asp:HyperLink ID="HyperLinkForgotChangePassword" runat="server" 

  58:                               NavigateUrl="~/PasswordIssues.aspx" Text="Forgot Password?" ></asp:HyperLink>

  59:                          

  60:                      </div>

  61:                      

  62:                  </div>

  63:              </td>

  64:          </tr>

Line 22 to 40 shows the javascript.  Basically, you are calling the Telerik window.radopen method which is associated with the tag on line 49.  It automatically navigates to the login.aspx page which is referenced in line 52.  When the page closes, the javascript on line 37 tells the browser to redirect to the News.aspx page.  The reason I do this is because if you don’t change pages, I’ve found the the login cookie is not set (Authorization cookie).  When this happens, even though the person is logged in, they do not see that they are until a page refresh happens.  Very confusing to the user.

Conclusions

That is really all this is to adding a windows that displays in the middle of your page.  It’s so much nicer than having to send the user to a separate page to login.  They can see where they are as they are logging in.  I hope this helps you.  I find it a very useful technique I can use in lots of web sites.

Introduction

Creating themes for ASP.NET 2.0 is very easy if you follow the standard guidelines Microsoft gives us.  Microsoft gives a pretty good discussion in the MSDN article
ASP.NET Themes and Skins Overview.  I’ve read it several times but since I don’t do this very often I keep forgetting the simple things.  Recently,
I posted a question on ASP.NET forums asking how to have an image automatically come from the correct theme directory.  As usual, Dave Sussman
gave me the perfect answer.

"You should store the images under the themes and set the ImageUrl in the skin file. Give the control a SkinID in both the skin file and in the page. When the theme changes the appropriate image will be used."

In this article, I’ll basically explain his answer with an example using the code camp web site.

Code Camp Site Structure

The Code Camp project has a very standard directory setup.  In Visual Studio 2008, the solution explorer looks like this:

Notice that I have two themes defined, Gray2008 and Gray2009.  The reason for this is so when 2009 comes along and we want to change certain images that contain things like the Code Camp Date and Year, we don’t have to do surgery on the asp.net pages, but simply change to the new theme and update the files there.  This also keeps the code base intact so we don’t have to branch our code for next year.  All in all, a very clean solution.

The Mechanics of Theme Changing and the Skin Definitions

First, you have simple mention in your web.config file the name of the default theme you will be using.  By doing that, it references the correct App_Themes sub directory. Our web.config looks like the following for this year which means we will be using the Gray2009 theme directory.

Second, you need to mention a SkinId in any control you may use.  In our case, we want to have the image on the upper right side of the code camp web site display the correct year.  That is, on the home page we have something like this:

The tag in the master page looks like this:

Notice the SkinId circled in green.  Also notice that there is no ImageUrl defined in this tag.  What happens next is that web site will look in the default theme’s SkinFile.skin file (see the solution explorer above for this).  In the App_Themes/Gray2008/SkinFile.skin file there is a reference that finds the actual image file that will be used.  It reference it from the App_THemes/Gray2008/Images directory as follows:

And, that’s it!  Just by changing the theme in the web.config file, the correct image file will be displayed in the master page.  The other nice thing is that design time support works also.  You will see in the Visual Studio 2008 Designer the correct image based on where your web.config points.

Conclusion

In this article, we’ve shown the details of how to have a flexible design that
supports multiple theme files.  Something we will use for years and years with
the new Code Camp web site.  We also may decide to have different themes for
different types of users.  That is, admin’s may have a different theme than
normal users.  We could also let users pick there own color styles by having
different themes.  Lots of possibilities.

I hope this helps you.

(Source Code Available in Article 6 Below – (Added March 2009))

Introduction

If you have complex styling issues involving ASP.NET we are experts and might be able to help. This technique is fairly old however newer methods could be used for similar results. Contact Peter Kellner and his associates here.

It’s often the case that brilliant designers will make interfaces that are hard to implement using standard frameworks like ASP.NET.  As Software engineers striving for consistency, we always want to do the best we can with the standard tool kits to take advantage for built in functionality.  ASP.NET 2.0′s built in menu system is a perfect example.  If you use that menu system, you get to make very simple declarative site maps by simply using the ASP.NET 2.0 Site Navigation Features.

The requirement faced today has to do with building the web site for our third annual code camp.  We have that brilliant designer I mentioned above, and he has made a design that just seems too perfect to compromise.  Here are some screen shots of how the designer envisions the sight looking and working after it is completed.

Notice the interesting behavior of the top menu (REGISTER;PROGRAM;NEWS;ABOUT AND WIKI).  Unselected, the bottom line strip is the same as selected.  When selected, the background of the selection changes to a different shade of the same color as the bottom strip.

Also notice the interesting behavior of the secondary menu. that is, when ABOUT is selected from the top menu, notice that the secondary menu shows: Contact;Venue;Organizers;Sponsors and Previous.  As you can see above (on the bottom of the 5 pictures), when Venu is selected, it is highlighted to in bright white to indicate that you have selected that.  The really cool part here is that the ABOUT on the primary menu stays highlighted when you choose different  secondary menu choices.

Why Go Through The Trouble, why not just do it with HTML and CSS directly

So, a reasonable person might say that since you can’t easily get this behavior with the asp:menu control and the site map provider (OK, at least I couldn’t figure it out), why not just code this up with simple list items, button clicks and a pile of code to react to those things?  Well, the answer is you can certainly do that.  The problem is the next time you want to do something similar you will find yourself doing a lot of cut and pasting.  Personally, whenever I find myself cutting and pasting a lot I know I should probably think about how to refactor the code to make it more reusable and therefore more reliable.

What Are the Benefits of Using asp:menu and the site map providers

I mentioned that there are benefits to using the asp:menu and site map providers.  What are those benefits you might ask.  Well, let me first show you what you have to do to set up a simple menu system using these, then list the benefits of what comes out.

The Web.SiteMap

First, you need to create a web.sitemap file in your web directory.  Here is what a simple one looks like similar to what will create the pictures above.

<?xml version="1.0" encoding="utf-8" ?>

 

   <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

 

      <siteMapNode url="Default.aspx" title="HOME" description="Silicon Valley CodeCamp 08">

 

            <siteMapNode url="Register.aspx" title="REGISTER"  description="" />

 

            <siteMapNode url="News.aspx" title="NEWS"  description="" />

 

            <siteMapNode url="About.aspx" title="ABOUT"  description="">

 

            <siteMapNode url="Contact.aspx" title="Contact"  description="" />

 

            <siteMapNode url="Sponsors.aspx" title="Sponsors"  description="" />

 

            <siteMapNode url="Previous.aspx" title="Previous"  description="" />

 

         </siteMapNode>

 

      </siteMapNode>

 

   </siteMap>

The Web.Config

You need to declare which sitemap provider you are using. In our case, we are simply reading from a file.  Then, you should (do not have to) declare a section for each web page you want to provide role access to.  Here is an example of my web.config. This first part says give access to any logged in user for Sponsors.aspx

<location path="Sponsors.aspx">

 

    <system.web>

 

        <authorization>

 

            <deny users="?"/>

 

        </authorization>

 

    </system.web>

 

</location>

 

</configuration>

The Second part defines the Site Map Provider and sets securityTrimming to true to only show pages the user has access to.

<system.web>

 

    <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">

 

    <providers>

 

        <add name="XmlSiteMapProvider" 

 

        description="SiteMap provider which reads in .sitemap XML files." 

 

        type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0,... 

 

        siteMapFile="web.sitemap" securityTrimmingEnabled="true"/>

 

    </providers>

 

    </siteMap>

 

The Master Page

In your master page, you need to define your primary menu.  In our case, it is the one that displays: REGISTER;NEWS and ABOUT.  Here is all you need for that.

    <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 

 

        DataSourceID="SiteMapMain" CssClass="headLinksBar"  CssSelectorClass="SimpleEntertainmentMenu"

 

        MaximumDynamicDisplayLevels="0" StaticItemFormatString="// {0}     ">

 

    </asp:Menu>

 

<asp:SiteMapDataSource ID="SiteMapMain" runat="server" ShowStartingNode="False" />

The Inherited Page (About.aspx For Example)

<asp:Content ID="SublinksSessions" ContentPlaceHolderID="Sublinks" runat="server">

 

    <asp:Menu ID="subMenu" runat="server" DataSourceID="SiteMapAbout" SkinID="subMenu"  CssClass="headLinksBar" 

 

    CssSelectorClass="SimpleEntertainmentMenu"     >

 

    </asp:Menu>

 

</asp:Content>

 

And the Benefits…

• You have no .net code to write!
• Adding new menu items as Primary or Secondary is easy
• Security is completely taken care of
• Menu Entries Automatically come and go based on User Permission 

Not Using the

CSS Friendly Adapters

If you do not use the CSS Friendly Adapter library, the menu render using tables. 
Below is what the actual HTML looks like of the main menu if I remove the

CSS Friendly Adapters.

<table>

 

    <a href="#ctl00_mainMenu_SkipLink">

 

        <img alt="Skip Navigation Links" src="/WebStyleOnly%20-%20Copy/WebResource.axd?d=G5" width="0" height="0" style="border-width: 0px;" />

 

    </a>

 

    <table id="ctl00_mainMenu" class="headLinksBar ctl00_mainMenu_2" cssselectorclass="SimpleEntertainmentMenu" cellpadding="0" cellspacing="0" border="0">

 

        <tr>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun0">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/Register.aspx">

 

                                // REGISTER

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun1">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                <tr>

 

                    <td style="white-space: nowrap;">

 

                        <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/News.aspx">

 

                            // NEWS 

 

                        </a>

 

                    </td>

 

                </tr>

 

                </table>

 

            </td>

 

            <td style="width: 3px;">

 

            </td>

 

            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_mainMenun2">

 

                <table cellpadding="0" cellspacing="0" border="0" width="100%">

 

                    <tr>

 

                        <td style="white-space: nowrap;">

 

                            <a class="ctl00_mainMenu_1" href="/WebStyleOnly%20-%20Copy/About.aspx">

 

                                // ABOUT

 

                            </a>

 

                        </td>

 

                    </tr>

 

                </table>

 

            </td>

 

            </span>

 

        </tr>

 

</table>

The same code, when using the CSS Friendly adapters, plus some clever additions that will be discussed later, has the html code looking like the following.

<table>

 

    <tr>

 

        <div class="AspNet-Menu-Horizontal">

 

            <ul class="AspNet-Menu">

 

                <li class="AspNet-Menu-TopLevel-register">

 

                    <a href="/WebStyleOnly - Copy/Register.aspx">

 

                      REGISTER

 

                     </a> 

 

                </li>

 

                 <li class="AspNet-Menu-TopLevel-news">

 

                    <a href="/WebStyleOnly - Copy/News.aspx">NEWS</a>

 

                </li>

 

                <li class="AspNet-Menu-TopLevel-about-Selected">

 

                    <a href="/WebStyleOnly - Copy/About.aspx">

 

                      ABOUT</a>

 

                </li>

 

            </ul>

 

         </div>

 

     </tr>

 

 </table>

You can see that the CSS adapter code is not only much smaller, but easier to read and because of the inserted class names, much easier to customize.

Conclusions

We have not made clear yet how the CSS Friendly Adapters will make the menu’s work the way we want it to. We have shown css classes created (AspNet-Menu-TopLevel-about-Selected for example) are create by the custom code written by us in the CSS Friendly Adapter Project.  We have however talked about the menu control and showed an example of how the html is actually rendered, and what is rendered based on.  That is, the web.sitemap defines the menu and we have shown that.  In the next article, we will show details of the custom code we have in the CSS Friendly Adapter that solves the problem of how to highlight the menu choices based on what is clicked.

Article Series

So, first, a little background.  As many of you know, I’ve been the ring leader of Silicon Valley Code Camp here in northern California for the past 2 years.  Since Code Camp is a limited budget, 100% volunteer effort, the most important thing is to have efficient communications between everyone.  Attendees, Speakers, Organizer, Sponsors and everyone else involved in the event.  To that end, the first code camp web site was created.  It was based on CSS provided by Microsoft.  Check out the post I made two years ago about it titled "Zero to Professional Web Site in Two Days".

This year, we are planning on a different format.  I don’t want to give too much away because we have not formally announced the changes, but if you look carefully at the designs, you might get an idea what these changes are going to be.  I’m getting slightly off topic.  The purpose of this series of articles to take you with me, step by step through building the web site.  This time,
we are going to do it right.  Professional Designer (volunteer) and Professional CSS Implementer (not me, but we do have some budget for this from last year).

So, here are the steps.

1. Decide on what changes need to be made
2. Work with a professional designer to make mock ups (photoshop, fireworks, etc.)
3. Create css and html pages from the designers work
4. Implement the css and html in asp.net
5. Test
6. Publish

So far, we have done steps 1,2 and are working on step 3.  I’ve alluded to the requirements above, but don’t want to spoil too many surprises.  Suffice to say, that is done already.  Step 2 is also now complete.  The professional designer gave us very detailed PSD files that we can turn over to a css wizard.  First, let me show you some of the designs and peek into fireworks to see what is actually under the covers.

First, here are some screen shots of what pages will look like (png files created from the PSD files)

Include is also a PDF file.  It allows the person doing the css and html to really do a good job of pulling the pieces apart to make great web content.

(notice the detailed names for all the layers!  this kind of consistency makes it much easier to implement in html and css).

Step 3 is to hand this over to a designer.  I did not have someone to use locally, so I decided to take a shot at using rentacoder.  I posted a detailed specification which you can see on that site if you navigate to this url: 
http://www.rentacoder.com./RentACoder/misc/BidRequests/ShowBidRequest.asp?lngBidRequestId=924960 

Notice the detailed specifications as well as the 13 bids that have been made ranging from $100 to $1000.  I posted a question on the forums asking if anyone had used any of these services and the response was yes, but don’t take the lowest bid and also make sure you use someone with lots of experience.  I haven’t decided next steps yet (that is who to choose), but I will keep posting as I build this web site.

Stay tuned!