Chris Newman

Web Design – From Mock to HTML

Chris Newman — Thu, 07 Aug 2008 01:20:24 GMT

Today I turned a Mock created by Web Solution’s Senior Web Designer Bradford Sherrill into an HTML layout.

I decided to do something a little different this time and take screen shots of my progress. Click an Image to enlarge it.

*Edit

As Requested I am updating this post with the HTML and CSS I used to create this site.

I’m starting with the HTML and adding the CSS in a day or two.

I started by creating elements with the sizes and locations of each part of the web site layout. The different colors are so I can easily see each element.

Im only including the HTML in the body tag to reduce the amount of code you have to scroll though.

This layout is being developed for an ASP.Net 2.0 Master Page so any <asp: tags are specific to that framework.

I started by creating 6 div’s to define the basic layout of the site.

The header has a fixed height and expands to 100% of the browser window.

The body content div has no defined height but has a fixed width of 1000 pixels.

The 3 divs that it contains each have a fixed width and are floated left. The reason these elements are inside of a parent div with a fixed width is to prevent the divs from dropping below each other when the browser is less than 1000 pixels because the user resized the browser or has a lower screen resolution.

<body>

    <form id="form1" runat="server">

        <div id="header"></div>

        <div id="bodyContent">

            <div id="leftContentHolder"></div>

            <div id="menuContent"></div>

            <div id="mainContent"></div>

        </div>

        <div id="footer"></div>

    </form>

</body>

Next I added in a background image for the Header, Left Content Area, The Menu, the Main Content Area and the Footer.

The Images are added in as background images for each part of the layout except the logo.

In the mainContent div I added another div that is used to give the content some padding. This is done to get around IE 6’s broken box model. Many people prefer to use some IE specific css hack to give an element with a width padding or a margin but I prefer this method.

<body>

    <form id="form1" runat="server">

        <div id="header"></div>

        <div id="bodyContent">

            <div id="leftContentHolder">

                <div id="logo">

                    <a href="Default.aspx">

                        <img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />

                    </a>

                </div>

                <div id="leftContent"></div>

            </div>

            <div id="menuContent"></div>

            <div id="mainContent">

                <div id="mainContentPadding">

                    <asp:ContentPlaceHolder ID="cp1" runat="server">

                    </asp:ContentPlaceHolder>

                </div>

            </div>

        </div>

        <div id="footer"></div>

    </form>

</body>

Now this site is finally starting to look good. Lets finish the layout up by adding in some content in the header and footer

<body>

    <form id="form1" runat="server">

        <div id="header">

            <div id="services">

            </div>

            <div id="headerText">

                <div id="headerTextSpacing">

                    Header Links Here

                </div>

            </div>

        </div>

        <div id="bodyContent">

            <div id="leftContentHolder">

                <div id="logo">

                    <a href="Default.aspx">

                        <img src="images/logo.jpg" alt="TJB Industries" width="208px" height="268px" />

                    </a>

                </div>

                <div id="leftContent">

                    <div id="leftContentPadding">

                    </div>

                </div>

            </div>

            <div id="menuContent">

                <div id="menuContentPadding">

                    <div id="ConcretePolishing" runat="server" class="menuButton">

                        <a href="Concrete-Polishing.aspx">Concrete Polishing</a>

                    </div>

                    <div id="FloorCoatings" runat="server" class="menuButton">

                        <a href="Floor-Coatings.aspx">Floor Coatings</a>

                    </div>

                    <div id="SeamlessFlooring" runat="server" class="menuButton">

                        <a href="Seamless-Flooring.aspx">Seamless Flooring</a>

                    </div>

                    <div id="TerrazzoCementitious" runat="server" class="menuButton">

                        <a href="Terrazzo-Cementitious.aspx">Terrazzo Cementitious</a>

                    </div>

                    <div id="SurfacePreparation" runat="server" class="menuButton">

                        <a href="Surface-Preparation.aspx">Surface Preparation</a>

                    </div>

                    <div id="SafetyStriping" runat="server" class="menuButton">

                        <a href="Safety-Striping.aspx">Safety Striping</a>

                    </div>

                    <div id="ConcreteRepair" runat="server" class="menuButton">

                        <a href="Concrete-Repair.aspx">Concrete Repair</a>

                    </div>

                    <div id="FloorMaintenance" runat="server" class="menuButton">

                        <a href="Floor-Maintenance.aspx">Floor Maintenance</a>

                    </div>

                </div>

            </div>

            <div id="mainContent">

                <div id="mainContentPadding">

                    <asp:ContentPlaceHolder ID="cp1" runat="server">

                    </asp:ContentPlaceHolder>

                </div>

            </div>

        </div>

        <div id="footer">

            <div id="footerText">

                Footer Links Here

            </div>

        </div>

    </form>

The layout is now complete, so its time to finish adding in the content that would be displayed on our home page.

I hope you enjoyed this article.

I will be going into further detail on my next Web Layout article but if you want to see anything specific, let me know.

Google Maps GeoCoder API returns code 602

Chris Newman — Mon, 21 Jul 2008 22:18:46 GMT

I spent a few hours today figuring out why the Google GeoCoder API was returning the error code “602” ( G_GEO_UNAVAILABLE_ADDRESS ) for an address in Clinton Township Michigan, but finds the address on the Google Maps page.

From what I gather from researching this issue is that Google possibly uses 2 different sets of data for Geocoding. One for their own use on Google Maps and another for their Google Maps API.

One solution that I discovered while testing data against their API was to check the Status code for a “602” error and then resubmit the information while leaving out the City information. This resulted in the API getting the Latitude and Longitude for the address.

Hopefully this will work for all addresses that return this error until Google updates this 2nd set of data or uses the same data source for both.

How I Got Started in Software Development

Chris Newman — Sat, 12 Jul 2008 03:28:34 GMT

How old were you when you started programming?

I started programming when I was 12 years old. My father had many programing books and I started reading them and doing all the exercises. This was all on a very slow x286 computer running DOS with a very colorful 4 color monitor.

How did you get started in programming?

As stated above I started learning from books my father had at a young age. All of the programs I made at this time were all written in BASIC. I don’t remember any of the books or programs I've made at this age except one.

More BASIC Computer Games
Edited by David H. Ahl, published 1979

An archive of this book can be found here http://www.atariarchives.org/morebasicgames/

What was your first language?

My first language was BASIC.

What was the first real program you wrote?

I cant consider any programs I made from programming books, any additions I made to them or the AOL Progs I made when I was in High School a real program. I cant consider any program I made in college a “Real"” program either.

Im going to have to say its the T2D Animation Datablock Editor I made for the Torque Game Builder Pro 2D from GarageGames.

It was a tool that took an image map and let you drag and drop it in the story board to create an animation for use in the game engine.

I used to have a movie of this in action but lost it to a hard drive crash and have long since deleted backups of my old web site.

After getting a job at Web Solutions I did not have the time to continue work on this editor and donated the code and rights to Garage Games.

They have integrated it into their game engine and improved upon greatly resulting in this.\

What languages have you used since you started programming?

I have used Actionscript, ASP, Assembly, Basic, C, C++, C#, Java, Javascript, PERL, PHP, Visual Basic, VB.Net and a few more i cant even think of right now.

What was your first professional programming gig?

I’m still employed at my first gig. I started working at Web Solutions in Sept of 05.

If you knew then what you know now, would you have started programming?

Oh Yes! I may have done things differently though.

I’ve always wanted to do game development and put a lot of time into that. I found that doing Web and Application programming was more satisfying for me so I may have put more time into learning that even though the end results are not as fun.

If there is one thing you learned along the way that you would tell new developers, what would it be?

"A scientist builds in order to learn;
an engineer learns in order to build."
-Fred Brooks

I would tell them that they should be careful on what they study in college. Many students who want to get into computer programming take many useless Computer Science courses.

If your goal is to build applications take as many Computer Engineering classes as you can.

Instead of going on about this. This article can explain it much better than I could.

Software Engineering is Not Computer Science

What's the most fun you've ever had ... programming?

Oh God, now this is the part where most people would not understand unless they are a code geek like me. I always have fun programming, well… unless I have to maintain software that was written horribly or that was written in an obsolete language.

HTML Superscripts and Subscripts messes up line height

Chris Newman — Sun, 25 May 2008 18:54:28 GMT

I was recently updating a clients site by adding in some ® symbols as superscripts and subscripts. This resulted in some pretty nasty line heights as you can see below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit_®. Aenean ac orci in neque consectetuer viverra.^® In eu tellus ut felis posuere sollicitudin. Nunc id lectus. Fusce quis turpis. Praesent egestas nunc sit amet lorem. Aliquam erat volutpat. Ut felis leo, lacinia molestie, molestie vitae, porttitor et, dolor. Quisque diam erat, rutrum non, cursus at, tempus in, libero. Maecenas dignissim dolor ut nibh. Suspendisse rutrum aliquet felis. Vivamus mi. Donec aliquam imperdiet mauris.

I searched on Google and found a few methods to correct this issue. They worked fine in Firefox but not in IE 6 and sometimes 7.

After experimenting a bit, I found a way that corrects this issue with CSS and works in Firefox, Opera, Safari, IE 6 and 7.

sup
{

    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    top: -0.4em;
}

sub
{
    vertical-align: baseline;
    font-size: 0.8em;
    position: relative;
    bottom: -0.4em;
}

Just adjust the position and font size to suit your taste.

ASP.NET Flash Remoting

Chris Newman — Fri, 09 May 2008 01:02:50 GMT

If you are looking for information on a free ASP.NET Flash Remoting Solution you have come to the right place.

The Midnight Coders have a product called WebORB® that will meet all of your remoting , real-time messaging (RTMP) and Flex Data Services (AMF0 and AMF3, Data Management, Flex Messaging (pub/sub, push)) needs.

I have used this product's Flash Remotings features extensively on one of my clients sites and I highly recommend it to anyone looking for a Flash Remoting Solution even if they are not doing development in ASP.NET. WebORB® also comes in Java, Ruby On Rails and PHP versions.

Installation

Installing WebORB® is extremely easy. Just copy its assemblies to your bin folder, copy a few files and folders to your web applications root directory and give a few of them write permissions. The final step is updating your web.config file with its HTTP Handlers.

If you install WebORB® on your server, you have the option of automatically deploying to to a virtual directory. There seems to be 1 downfall, it appears that it can only be automatically installed to virtual directorys of your default web site. If you are on a server that is hosting multiple web sites, you should just do the manual install.

Using WebORB

One of WebORB's best abilities is that it will parse your Web Applications Assemblies and generate Action Script code for use in your flash movie or JavaScript for your AJAX functions. It can generate code in a variety of formats and styles: Flex Remoting / AS3, Flash Remoting / AS2, ARP Framework / AS2 or AS3, Cairngorm Framework, FlashComm / FMS2, AJAX Client and PureMVC. It will generate code for anything that your functions in your assembly returns. Objects, DataSets, strings etc.

ASP.NET Persistent Checkbox State in a GridView With Data Paging.

Chris Newman — Sun, 09 Mar 2008 06:48:42 GMT

One major downsides of using a checkbox in a GridView control to handle mass updates and deletes is that the state of the checkboxs will be lost when going to another page.

To work around this were going to have to write some code to save and load the state of the checkboxes.

You can download the files below.

gridviewCheckbox.zip

The 1st thing we want to do is set up our GridView and a DataSource.

         <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

        <head runat="server">

            <title>Grid View Check Box Example</title>

        </head>

        <body>

            <form id="form1" runat="server">

                <div>

                    <asp:GridView ID="Gridview1" OnDataBound="Gridview1_OnDataBound" runat="server" Width="100%" OnPageIndexChanging="Gridview1_PageIndexChanging" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="recordID" DataSourceID="AccessDataSource1">

                        <Columns>

                            <asp:BoundField DataField="recordID" HeaderText="recordID" InsertVisible="False" ReadOnly="True" SortExpression="recordID" />

                            <asp:TemplateField>

                                <ItemTemplate>

                                    <asp:CheckBox ID="chkPerson" runat="server" />

                                </ItemTemplate>

                            </asp:TemplateField>

                            <asp:BoundField DataField="firstName" HeaderText="firstName" SortExpression="firstName" />

                            <asp:BoundField DataField="lastName" HeaderText="lastName" SortExpression="lastName" />

                        </Columns>

                        <HeaderStyle HorizontalAlign="Left" />

                    </asp:GridView>

                    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/gridviewCheckbox.mdb" SelectCommand="SELECT [recordID], [firstName], [lastName] FROM [record]"></asp:AccessDataSource>

                    <br />

                    <br />

                    <asp:Button ID="bttnMassUpdate" runat="server" OnClick="bttnMassUpdate_Click" Text="Mass Update" /><br />

                </div>

            </form>

        </body>

        </html>

For those of you who are unfamiliar with grid views, The DataKeyNames property is set to the PrimaryKey column of your datasource and in this example its the recordID column.

The OnDataBound and OnPageIndexChanging properties are set to the name of the functions I created that I want called when these events are fired.

I used a AccessDataSource for this example because It would allow anyone to download and run this example without the need to install a SQL server.

The data in this Access Database was generated with http://www.generatedata.com/.

Now since we have our aspx page setup we need to choose a data structure that can hold the primary key for each select row. I chose a List for this task.

protected void Page_Load(object sender, EventArgs e)

       if (!Page.IsPostBack)

           List<int> list = new List<int>();

           Session["gridSave"] = list;

Now when we go to another page we need a way to store the primary key of each row that has been selected and to also remove any key that has been unselected.

private void saveValues()

    List<int> list = (List<int>)Session["gridSave"];

    foreach (GridViewRow row in Gridview1.Rows)

        int id = (int)Gridview1.DataKeys[row.RowIndex].Value;

        bool chk = ((CheckBox)row.FindControl("chkPerson")).Checked;

        if (chk)

            //see if we have a id added already

            if (list.Contains(id) == false)

                list.Add(id);

        else

            if (list.Contains(id))

                list.Remove(id);

    Session["gridSave"] = list;

Everytime we go to a new page we will also have to see if any checkboxes need to be checked

private void loadValues()

    List<int> list = (List<int>)Session["gridSave"];

    foreach (GridViewRow row in Gridview1.Rows)

        int id = (int)Gridview1.DataKeys[row.RowIndex].Value;

        if (list.Contains(id))

            CheckBox chkPerson = (CheckBox)row.FindControl("chkPerson");

            chkPerson.Checked = true;

The above functions are called from the GridViews PageIndexChanging and OnDataBound Events.

protected void Gridview1_PageIndexChanging(object sender, GridViewPageEventArgs e)

       saveValues();

       Gridview1.PageIndex = e.NewPageIndex;

   protected void Gridview1_OnDataBound(object sender, EventArgs e)

       loadValues();

Dictionary VS Hash Table

Chris Newman — Tue, 08 Jan 2008 07:18:33 GMT

We all know how useful a hash table can be, but if you are using the .NET Framework 2.0 you should be using a Dictionary instead. A dictionary and a hash table in .NET 2.0 are very similar but with 1 main difference, a dictionary is faster because it does not need to box and unbox the data as a hash table would.

I made a simple program to see just how much faster a dictionary is than a hash table. I ran the test 20 times for each data set and the results were close each time. A GUID as the key and a boolean as the data.

This is the results of the last test for each dataset.

Time in Milliseconds for 100,000 keys	Dictionary	Hash Table
Inserting	34.41264	76.0970
Reading	18.9005	31.1648
Deleting	21.2474	30.4655

Time in Seconds for 10,000,000 keys	Dictionary	Hash Table
Inserting	6.5704143	26.9096540
Reading	3.1362891	5.6670613
Deleting	3.4623316	4.8830676

My comp specs

Vista Business 32bit, AMD 64 x2 5000+, 2GB ram

and now for the code I used. You can also download the project.

hashVsDictionary.zip

using System;

using System.Collections;

using System.Collections.Generic;

using System.Diagnostics;

namespace hashVsDictionary

    internal class Program

        private static void Main(string[] args)

            #region init

            int num = 10000000;

            Guid[] guids = new Guid[num];

            Stopwatch s = new Stopwatch();

            s.Start();

            for (int i = 0; i < num; i++)

                guids[i] = Guid.NewGuid();

            s.Stop();

            Console.WriteLine("Data Creation = " + s.Elapsed);

            s.Reset();

            #endregion

            #region hash

            Hashtable hash = new Hashtable();

            s.Start();

            for (int i = 0; i < num; i++)

                hash.Add(guids[i], true);

            s.Stop();

            Console.WriteLine("Insert Hash = " + s.Elapsed);

            s.Reset();

            s.Start();

            for (int i = 0; i < num; i++)

                bool b = Convert.ToBoolean(hash[guids[i]]);

            Console.WriteLine("Extracting Hash = " + s.Elapsed);

            s.Reset();

            s.Start();

            for (int i = 0; i < num; i++)

                hash.Remove(guids[i]);

            Console.WriteLine("Removing Hash = " + s.Elapsed);

            s.Reset();

            #endregion

            #region dict

            Dictionary<Guid, bool> dict = new Dictionary<Guid, bool>();

            s.Start();

            for (int i = 0; i < num; i++)

                dict.Add(guids[i], true);

            s.Stop();

            Console.WriteLine("Insert Dictionary = " + s.Elapsed);

            s.Reset();

            s.Start();

            for (int i = 0; i < num; i++)

                bool b = dict[guids[i]];

            Console.WriteLine("Extracting Dict = " + s.Elapsed);

            s.Reset();

            s.Start();

            for (int i = 0; i < num; i++)

                dict.Remove(guids[i]);

            Console.WriteLine("Removing Dict = " + s.Elapsed);

            s.Reset();

            #endregion

            Console.ReadLine();

ASP.NET Google Map Control

Chris Newman — Fri, 04 Jan 2008 02:33:58 GMT

If you are looking for a ASP.NET Google Map Control, your search is now over.

Jacob Reimers from http://www.reimers.dk/ offers a great asp.net control in 2 flavors.

The free version which lets you easily display a map with markers and/or lines and a licensed version which gives you the full power of Google Maps.

I have used this control on a few of Web Solutions clients sites. Two of the better implementations are Low Index and Seville Homes.

*The deals listed below are entirely fictional. They were created for presentation purposes only.

To use this great control, head over to http://www.reimers.dk/, download the free control, unzip it to your Bin folder in your web app and add a reference to it.

This is a sample asp.net page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="GoogleMap" Namespace="Reimers.Map" TagPrefix="Reimers" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Google Map test</title>

</head>

<body>

<div>

<reimers:googlemap id="GMap" runat="server" width="349" height="354" onmarkerclick="GMap_MarkerClick" />

</div>

</form>

</body>

</html>

and the code behind

using System;
using System.Web.UI;
using Reimers.Map;
 
public partial class _Default : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GMap.GoogleKey = "Your API Code here";
        GMap.MapType = MapType.Map;
        GMap.TypeControl = MapTypeControl.None;
        GMap.MapControl = ControlType.Small;
 
        GoogleMarker testMarker = new GoogleMarker("newMarker", new GoogleLatLng(43.611611, -88.952931));
        testMarker.MarkerText = "Test Marker";
        GMap.Markers.Add(testMarker);
 
        GMap.Latitude = testMarker.Latitude;
        GMap.Longitude = testMarker.Longitude;
        GMap.Zoom = 10;
    }
 
    protected void GMap_MarkerClick(GoogleMap GMap, GoogleMarker Marker, ref String MapCommand)
    {
        MapCommand = Marker.OpenInfoWindowHTML(GMap, Marker.MarkerText);
    }
}

Introduction

Chris Newman — Thu, 27 Dec 2007 03:39:01 GMT

Hi,my name is Chris Newman and I'm a 26 year old .Net Rockstar from Troy, Michigan.

I am the Lead Developer at The Web Solutions Company in Mount Clemens Michigan, but soon we will be known as Cafe Live Interactive Media.

I am involved in almost every aspect of the company. I start with the initial consolation with a client and end at Support of the finish product and everything in between.

I have experience with C#, ASP,PHP, C++, C, Assembly, Java, JavaScript, MYSQL, MS SQL, Flash, Flex,Silverlight and much much more.

This blog is going to contain my experiences from work, the technology we use, the Open Source Software we use and contribute to, both tools and web technology.

As a developer that has completed numerous projects, I am not going to say anything negative about my finished projects as I stand by my work 100%.

I will however talk about the difficulties and solutions that happened during the course of developing.

I will not discuss any relationship with a current or past client. Relationships with tool providers and the tools themselves will be freely discussed.