The best interface – a contractual approach to design

I recently saw a post called “the best interface is no interface”. I started thinking about that title. There is no where that you can actually have no interface. If there is no interface there is no interaction.

So what is an interface then? My first thoughts when back to my programming background. What is an interface in programming? In it’s most basic form it is a group of related methods (designers, don’t turn off your brain, or go somewhere else just yet. This will make sense to you, in fact this article is for you). Basically you are creating a contract to use. A simple interface example:

1
2
3
4
5
6
interface biker {
    void bike(bike fuji);
    void cadence(int speed);
    void gear(long ratio);
    void break(long friction)
}

The thing to notice here is there isn’t actually any code here. It is just setting up a contract that has to be followed to create a biker. It needs a bike, a cadence, a gear, and the ability to break. Basically it is defining what needs to be done.

Contracts in design

I really liked that idea of a contract when it comes to defining an interface. What is my definition of an interface. Well … here goes. “An interface is an interaction point between two systems regulated by a contractual agreement.” There. That is an interface. So let’s walk through this and why this even matters.

Why a contract?

Isn’t a contract an agreement by two people that they sign? Yes it is. So we change people for systems and a signature for an agreement and there you have it. An agreement by two systems that spell out how they are going to interact. For example. I create a contract with an employer. I agree that I will work and they agree to pay under specified terms. Both parties need to agree to fulfill the terms of the contract.

Let’s move that to an interface, a simple one, a doorknob.

What is the contract here? The hand agrees that it will turn the doorknob a specified amount and the doorknob agrees that it will unlatch. A simple contract. That is why I really like this approach it simplifies. It also tells us what exactly we need to comunicate to the user through the design. I’ll touch on this later.

The Doorknob

Let’s go back to the door knob. Let’s apply this definition of interface.

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

With that defined we can now address the design. I have everything that needs to be fulfilled. I can look at the terms and create a design that communicates the contract. And here we go. The design:

1113681_95866849

We can then take the design and discuss if it meets the contracts. And this design does, and has for a very very long time, since about 1878 (first patent). This design, however, introduced a new contract point. Now the hand needs to squeeze. so now the contract is this.

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

Now remember this change was not the original required contract. This is a contract item added because of the limitation of the design. This becomes important as we go further into this scenario.

Failure to meet terms of contract

So along came the car, and with it grease monkeys. Which I happen to be one. One thing that I hated was trying to open a door with greasy fingers for two reasons, First, I didn’t want to get the door knob dirty, the second, I couldn’t get a grip on the knob to open it.

So we have identified one situation where the contract fails. Greasy hands. It fails for two reasons. I can’t grip because of the viscosity of the substance on my hand, or I don’t want to touch it with my hand, thus not getting a grip on it. This is an easy way to determine contract points too, find the failures.

Also, in the not to distant past, there was a movement of thinking that the voice for the disabled population should be more important. In our case the voice of those who cannot meet the contract.

This is where this method of design really shines, identifying the point where the contract cannot be met. If you can say that the requirement is to turn the handle so far we can start asking the question who cannot fulfill this contract. What then happens is that the contract separates from the design.

Once we have identified the failing we have two options. The first is the most common, but unfortunately the least effective.

The first option – add an interface.

This option is used over and over. I’ll describe it in terms of the door knob then show, generically, a process in the real world.

So someone sees that amputees cannot open the door. They say, ok, well, let’s add another system that needs to interact here.

So now we do this:

Three systems:

  1. The hand (or gripper)
  2. The knob
  3. The stub

the contracts:

  1. the stub:
    • put force in linear direction or allow for squeezing motion
  2. the hand (gripper):
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  3. the knob:
    • unlatches

Now the contract has been augmented. We have another system, that needs to meet the requirements on another system. So here are the interfaces. The stubb needs to contact a plastic or other type of piece in a solid way to support the force placed on the end of the piece. The end of the piece needs to squeeze the door knob to allow for a rotational or lateral movement, then we enter the original contract, then the piece will turn the knob a certain amount which then the knob will unlatch.

A quick drawing of such solutions.
IMG_5362 copy

This adds a lot of complexity and is usually not the best solution. We need things to be simple. Here is a scenario of a process I have been thinking about recently.

A user collects data from a group. That data reflects experiences the group has had. This process started many years before the computer. It was paper and remains paper to this day. As part of the instructions it asks the user to print out data from our systems and mail it to us. There was a software piece built to enable the transfere of the paper information to a digital system in a little easier fashion. So data gets printed, mailed, then reentered into the same system is was pulled from. At times there are over 70 lbs of paper being shipped from all over the world at a huge cost.

So we added an interface and a lot of complexity. The process included paper, to facilitate the contract it needed to be mailed. The functionality was added that the data was in a central area, but the contract wasn’t changed. The process was changed to meet the initial contract. So they added an interface instead of removing a contract point. Mailed instead of queried.

So back to the doorknob.

We introduced a contract point because of a design limitation. Everyone was ok with that because, back in 1878 people weren’t thinking about the disabled, maybe because a much larger percentage of people with amputations and disabilities didn’t live long. Maybe because people just didn’t think about it much. But either way when the need arose we changed the interface not the contract. So we come to our second possability of solution.

Second option – readdress the contract.

So we do this:

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

Whether that was introduced by a design or a designed feature in the beginning doesn’t matter, either way we can remove the contract point and readdress the design. This would stop the cycle of appending interfaces to fix problems. This process cuts to the center and allows a simple path for the simplification of products and processes.

And there we have a design that removes the contract point of squeezing and this style of door knob is growing in popularity for all applications.

881612_51693395

Communicating the Contract

So know we have a solid contract and we want to create a solid design. From earlier we know that we want to introduce as little contract points as possible through the design. We also need to think about how to tell users what the contract points are.

It is much easier to communicate the contracts when we know what they are. Take these for example.

Bad communication:

IMG_0609
what is the interface?
Two systems:

  1. Person needing to Potty
  2. Sign directing person to Potty

the contracts:

  1. The Potty Person:
    • see the sign
  2. The Potty sign:
    • point to potty

Where does it fail? The location of the person determines the effectiveness of the arrow. I guess, however this doesn’t fail if, the corner is the potty, or there is some sort of star trek teleportation system, fear of both kept me from walking into the corner.

push-pull-door-signs-2
image from http://www.signservice.ie/

what is the interface?
Two systems:

  1. Person
  2. Door

the contracts:

  1. The Person:
    • apply force
  2. The door:
    • open

Where does it fail? The direction of the force in a limitation of the design. To overcome they added another interface, now we have a system of understanding the direction the force needs to be applied. The problem is that the design wasn’t readdressed. Instead a sign was placed. A simple solution may be to have a pull handle only on the side that should be pulled, and a plate on the side that should be pushed, eliminating the need for the second interface, the sign. Or you could resign the door to overcome the limitation of the direction being a factor and making the door open on a push or pull.

Good communication:

Glass-cup_155353

image from promotionalpromo.com

what is the interface?
Two systems:

  1. liquid
  2. glass
  3. person

the contracts:

  1. The Liquid:
    • move to contianer
  2. The glass:
    • keep liquid in container
    • until needed to be removed
  3. The person:
    • grasp
    • tip
    • enjoy

Of course this is overly simplified, but here we have three systems interacting. Liquid to a glass, and glass to a person, and liquid to a person. Why has this been around for so many years? and in so many cultures? because it is simple, easy to use, and communicates it’s use effectively. Part of the successful communication is the fact it is so ingrained into cultures. But looking at the design you can see what it’s purpose is.

Conclusion

To wrap up this article I want to recap and bring a few points out.

First, an interface is “an interaction point between two systems regulated by a contractual agreement.”

Why the contract? Well, it is simply a mechanism to quickly and effectively identify the parts needed to interact. These rules exist, in nature and in human made experiences. How do you get a banana? Peel and shove. What if I can’t fulfill one of those requirements? No banana. Any point where two systems interact is an interface, is a contract. Again, if I want you to read this article, you need a computer, need to see the article, and need to understand my language. If you don’t fulfill one of those contract points, no article for you.

Second, readdress the contracts

To build a simple lean interface simplify the contract rather than building more interfaces. It is easy to try and add something to the mix, like a plastic appendage to open a door knob, but the better way is to change the contract and then design to the new contract.

Third, A good interface needs the contract communicated by the design.

The interface itself needs to communicate the contracts otherwise you might end up with people “relieving their waters” in a corner somewhere.

Vertical Align CSS

Here is a little snippet I figured out for vertical aligning an object. I really like it. It seems to work down to IE8, at least that is as far as I have tested.

here it is.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.elem {
  display: inline-block;
  vertical-align: middle;
  text-align: left; /* to align the text in this back to normal */
}
.elemParent:before{
  content: "";
  display: inline-block;
  height: 50%;
}
.elemParent {
  height: 100px;
  width: 200px;
  border: 1px solid #999;
  text-align: center; /* if you want to align to center also */
}

That is it.

demo:

elem text

Flies flies and more flies

I ran into this site (Stenstrom flies), Awesome site, this Tie-er is skilled. I wanted to put these here for reference for my own fly tying.

Oliver Edwards-Hydropsyche-small

Light-Queen-(Cross)-SGM+BLO

Husbask-SBS-004

Hendrickson-x-2-1533-blog

Edwards-Heptagenid-1790-web-1

CDC-Red-Head-2298-web kopiera

CDC Red Quill Emerger

Capercaillie-1607-web

Brown-Drake-Ny-Version-web

Atherton-#2-Wet-1867-web

Abbey-Wet-2243-web

8 Finished

Elder Dallin H. Oaks Speech on Religious Freedom

One of the best speeches I have read on Religious Freedom. Wanted to Post to anyone that has interest.

http://www.mormonnewsroom.org/article/oaks-religious-freedom

Are Mormons Christians?

I wanted to add my thoughts on this question as a Mormon about what I believe. To me the question is a little odd, because my belief is so rooted in Christ. I think, however, that the cause of the cause of the misunderstanding is in two core doctrines. First, we believe that we are all spiritually begotten of the Father, and second that we believe that God, the Father, Jesus Christ, his Son, and the Holy Ghost are three separate and distinct persons.

So I am going to write a little about both doctrines in hopes of bringing some understanding.

First, we believe that God is our Father. This isn’t much different that some others believe. But the reason I include this as part of the question of ‘are Mormons Christians?’ is because of how it relates to Jesus Christ. God, being our Father and creator, had a first begotten, and we know that Christ is the first born of the Father.

6 And again, when he bringeth in the firstbegotten into the world, he saith, And let all the angels of God worship him. (New Testament, Hebrews, Chapter 1, emphasis added)

And also in chapter 12:

23 To the general assembly and church of the firstborn, which are written in heaven, and to God the Judge of all, and to the spirits of just men made perfect, (New Testament, Hebrews, Chapter 12, emphasis added)

We believe that Jesus Christ is literally the first born of the Father and therefore literally his Son, and are his children also.

28 For in him we live, and move, and have our being; as certain also of your own poets have said, For we are also his offspring.
29 Forasmuch then as we are the offspring of God, we ought not to think that the Godhead is like unto gold, or silver, or stone, graven by art and man’s device. (New Testament, Acts, Chapter 17)

So what does our being sons and daughters of God have to do with being Christian? Well, everything. But before I answer that questions I guess we should define what being a Christian means.

So what does it mean to be Christian? I would think that it means that a person believes, and acts upon his/her belief, that Jesus Christ is our Savior and that through him, because of his atonement, we can be like him and live with God again.

Others may feel that to be Christian we must believe in the nicene creed. On this note one of our leaders and member of the Quorum of the Twelve Apostles said:
So any criticism that The Church of Jesus Christ of Latter-day Saints does not hold the contemporary Christian view of God, Jesus, and the Holy Ghost is not a comment about our commitment to Christ but rather a recognition (accurate, I might add) that our view of the Godhead breaks with post–New Testament Christian history and returns to the doctrine taught by Jesus Himself … We declare it is self-evident from the scriptures that the Father, the Son, and the Holy Ghost are separate persons, three divine beings, noting such unequivocal illustrations as the Savior’s great Intercessory Prayer just mentioned, His baptism at the hands of John, the experience on the Mount of Transfiguration, and the martyrdom of Stephen—to name just four. (General Conference of the Church of Jesus Christ of Latter-day Saints, Oct 2007′ The only true God and Jesus Christ whom He hath sent.)

Signs

This was a fun project that I did back in the day, I came across them and remembered how much I loved them. So I am going to post them.

The idea of the project was to take a phrase and represent it as a road sign. Some of these I want to make into a t-shirt.

Being who I am I was content with just a road sign so I tried allow for an interaction between life and the road sign. I think they turned out well.

Sort Helper Files

Download the Helper files Here

Type Deseases – I think I am a combination of Typophiliac and OKD

Various forms of dysfunction appear among populations exposed to typography for long periods of time. Listed here are a number of frequently observed afflictions :

Typophilia

An excessive attachment to and fascination with the shape of letters, often to the exclusion of other interests and object choices. Typophiliacs usually die penniless and alone.

Typophobia

The irrational dislike of letterforms, often marked by a preference for icons, dingbats, and—in fatal cases—bullets and daggers. The fears of the typophobe can often be quieted (but not cured) by steady doses of Helvetica and Times Roman.

Typochondria

A persistent anxiety that one has selected the wrong typeface. This condition is often paired with okd (optical kerning disorder), the need to constantly adjust and readjust the spaces between letters.

Typothermia

The promiscuous refusal to make a lifelong commitment to a single typeface—or even to five or six, as some doctors recommend. The typothermiac is constantly tempted to test drive “hot” new fonts, often without a proper license

homo ophtalmus mainesthai

Latest scientific discovery: designers are mutating!

Anthropologists have lately revealed news about the emergence of a highly evolved branch of homo sapiens. They call it homo ophtalmus mainesthai.

This specie can be traced back to the late 19th century when the so-called graphic arts began manifesting themselves in large advertising posters by the likes of Henri Toulouse-Lautrec and Alphonse Mucha (proclaimed possible ancestors of the specie). However, some scientists presume it is more accurate to date it back the invention of movable type printing in approximately 1439 A.D. by Johannes Gutenberg.

Whichever the case, it is without doubt that the homo ophtalmus mainesthai witnessed the culmination of their evolution during the 21st century crossover, when development in computer technology was peaking (and has been peaking ever since).

In fact, the said specie has undergone a series of mutational physical changes that define it as such. Extensive studies and experiments have shown the following characteristics:

An unusual protrusion of the right side of the brain.

It is no mystery that the right side of the brain regulates artistic activities. Right-brained people are better able to work with the imagination to develop creative solutions to problems. They have a way of creating art out of thin air. “They can see all the colors of the rainbow, can distinguish the scents of blossoms in the air, and dream in color.” Now multiply that by infinity and you’ll be able to fathom the capacities that lie within the homo ophtalmus mainesthai. So much is their right brain side advanced that they make the most incoherent associations, bordering with irrationality. Some members have even been diagnosed with psychosis (symptoms include hallucinations and thought disorder). Others lose any verbal faculties and are left to venture into a world of visual abstraction.

Scientists speculate that this is their own vendetta against a society that has always favored the left side of the brain, making the core learning subjects at school Maths, Science and English.

A distinctive distortion of the eyebrows and pupils

The homo ophtalmus mainesthai have developed larger areas of binocular visions that allow them improved depth perception. They show a tremendous eye for detail bordering with ophtalmodystopiaphobia. They are horrified at the sight of a displaced millimeter (which they can detect with an evolved built-in measuring system) and manifest anxiety symptoms like sweaty palms and a higher heartbeat rate. Their x-ray-like vision is convinced that empty space holds much more than the normal human eye can see.

Their eyebrows are unusually stuck together from too much time spent scrupulously focusing on the smallest of details. However, it is yet to be confirmed that the eyebrow mutation isn’t just an attitude problem.

A distortion of the vertebral column

Viewed laterally the vertebral column of humans presents several curves, which correspond to the different regions of the column, and are called cervical, thoracic, lumbar, and pelvic.
The vertebral column of the homo ophtalmus mainesthai holds one or more singular points that break the smoothness of the curve.
Members of the specie like to joke that their column has converted anchor points or in their lexicon is Shift-Cied.

They have also mastered the art of making body sounds with their own joints and vent their DIY symphonies in their own animated works.

A 360 degree wrist rotation capacity

Enabling flowing 3D movement of the mouse, the digital pen, or the normal pen, this 360 rotation is also endowed with microscopically high precision. It is possible to move the mouse as little as 1 micro millimeter to the side to allow perfection in pixel alignment.

A desensitized nervous system

Or a highly sensitive one. Due to increased and constant stimulation of the nerves, homo ophtalmus mainesthai is characterized with a chronic condition of acute stress disorder. This is their way of dealing with the constant race with time to constantly meet deadlines. In fact, their nerves have been so overused that they have acquired the ability to easily trigger a state of daze where they quickly withdraw from the surrounding environment, to the extent of a dissociative stupor. Some of them, however, show symptoms of extreme agitation and over-activity, which results in the surrounding environment withdrawing from them.

Scientists are still keeping the specie under scrutinized examination since they have observed that its evolution is growing exponentially. There is no knowing how and what this specie will turn into.

There is word that rehabilitation centers are being created to help slow down the evolution of said homo ophtalmus mainesthai. You can help by treating them as fellow homo sapiens, in need of the stupidest forms of social interactions, of a repeated reunion with mother nature and of love.

Painting – short study.

Working in a new medium is in interesting thing, at least when I have been trying to move into digital painting. Part of the magic of painting is moving the medium around, being free, and watching the colors twist into one another, mixing only in our vision of it.

This new medium is smooth with perceptually no difference between boundaries. I can’t feel my way around a painting, I can only see it. perceived. I hope that the feeling comes with time. Now I just feel a sore wrist with the odd angles and positions I have to be in to apply the color.

I love the free feeling that Walter Rane shows in his sketches. The correct strokes seem instinctual, almost with no effort or thought before he lays the next stroke. You can’t really study that. You can only observe it.

The weight of the strokes in relation to the light creates shade without shading. Everything is so simple but conveys the idea perfectly.

Not mine, not yet anyway. I am grateful for the time with this simple drawing.

“I paint just as I breathe. When I work, I relax; not doing anything or entertaining visitors makes me tired. It’s still often 3:00 a.m. when I switch off my light.” Picasso

It’s been a while, busy-ness does that.

Here are a couple of pictures. I like them both.

And another study, This is the start of it anyway. I am learning Corel Painter. I’ll keep posting the progress.

Graduation Illustration

I just liked the way that this illustration turned out. So I wanted to post it up :) .

This illustration is for use with the 2NAU orientation that I am designing / developing. This is made to be a “insert face here” type of illustation with a very simple graphic.

2nau guidebook design

I am really excited about this project, it is a fun one. Here are the preliminary designs for the layout. It is interesting that, because we are doing it in a book format, that the design process is the same for a publication layout except I don’t need bleeds and slugs. I didn’t think I would be using indesign for a web layout.

Beautiful, accessible Forms

So, I have done a bit of research on forms. Trying to make them as happy as possible for design, accessibility and usability. It seems that, as important as forms are to the web, there would be some agreement or idea and the best way to accomplish this. There may be, but I didn’t find it, so I created one. This is an HTML and CSS contract to make the forms happy.

So, here is the basic HTML example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="form">
    <fieldset>
      <legend>Main Title</legend>
      <ol class="formlist">
        <li>
          <label>Label:</label>
          <div>
            <asp:textbox runat="server" id="txtExample" ></asp:textbox>
          </div>
          <hr />
        </li>
        <li class="submitcontainer">
          <asp:button runat="server" id="btnExample" onClick="btnExample_OnClick" text="Submit" />
        </li>
      </ol>
    </fieldset>
  </div>

These examples are using C# so the div tag is a div class=”form” instead of just a form tag. This is because C# / asp.net uses a huge form tag the covers the whole page. I am not commenting on that at the moment maybe later.

and here is how it would render as plain HTML

There are several simple advantages to this form layout. First is the accessibility features. This taps into the screen readers default handling of fieldsets and ols to make navigation easier for them. It also has all the markup necessary, with out extras, to style up the form pretty much how ever you want it. Using the div to separate the label with the control is that you have room to do what ever you need to for the control including placing lots of controls and even embedded forms without any extra work.

There is also a way to add errors and info to the form very easily.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="form">
    <fieldset>
      <legend>Main Title</legend>
      <ol class="formlist">
        <asp:panel runat="server" id="pnlExample">
          <li>
            <label class="none"></label>
            <asp:panel runat="server" id="pnlErrorsExample" CssClass="errors"> <!-- the spans or asp:labels may be added dynamically by using this panel -->
              <span class="error">This is a global error message that may be displayed on error that would say, hey this form has these errors: </span>
              <span class="error">You need to type something in the TextBox</span>
              <span class="error">You need to click the submit button</span>
            </asp:panel>
          </li>
        </asp:panel>
        <li>
          <label>Label:
            <asp:RequiredFieldValidator ID="rfvExample" runat="server" ErrorMessage="This is required" Display="Dynamic" ControlToValidate="txtExample" CssClass="error">
            </asp:RequiredFieldValidator>
          </label>
          <div>
            <div class="information">
              <span class="info">This describes the example here.</span>
            </div>
            <asp:textbox runat="server" id="txtExample" ></asp:textbox>
          </div>
          <hr />
        </li>
        <li class="submitcontainer">
          <asp:button runat="server" id="btnExample" onClick="btnExample_OnClick" text="Submit" />
        </li>
      </ol>
    </fieldset>
  </div>

Again, these examples are for use with asp.net controls, but you can easily use this for any language by replacing the

and here is how this would look with no CSS:

what is good about the way that these are built is that it is very accessibility friendly. The global error message is at the front of the form, so screen readers will get to that first. Next the errors are included in the labels of the controls, so as the screen reader introduces what the control is it will also read what errors are related to the controls so the user can know what needs to be fixed without navigating around to find it.

Now lets style these up. I am going to use the theme that I have built for the administration section of NAU Extended campuses but the styles are very customizable and interchangeable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
.form fieldset {
  margin: 0 0 1em 0;
  border: 1px solid #DDF;
  }
 
.form fieldset legend {
  margin: 0 0 .5em 0;
  padding: 2px .5em 0 .5em;
  color: #036;
  background: transparent;
  font-size: 21px; 
  font-family: "Times New Roman", Times, serif;
  }

.form  ol.formlist {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-family: "Times New Roman", Times, serif;
  }
 
.form .col {
  float:left;
  width: 49%;
  min-width: 350px;
  border-right: 1px solid #ccc;
  padding-right: 15px;
  }
 
.form .col:last-child {
  border-right: none;
  padding-right: 0;
  }

.form li {
  list-style: none;
  padding: 0;  
  margin: 4px 2px 0 10px;
  clear: both;
  padding-top: 2px;
  }
 
.form li > label {
  display: block;
  width: 120px;
  float: left;
  clear: left;
  margin: 0 15px 0 0;
  text-align: right; 
  }
 
.form li > label.none {
  width: 0;
  margin: 0;
  }
 
.form li hr.none {
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  }
 
.form li > label span {
  display: block;
  }
 
.form li > label span[style*="inline"] {
  display: block !important; 
  }
 
.form li > div {
  margin: 0 0 0 140px;
  padding: 0;
  }

.form li > label.none + div {
  margin: 0;
  }
   
.form hr {
  margin-top: 2px;
  clear: both;
  border: none;
  border-top: 1px solid #CEE6F7;
  }

.form ol > li:last-child > hr {
  border: none;
  border-bottom: 1px solid transparent;
  }

.form .formlist textarea, .form input, .form select {  
  margin: 0 0 5px 0;   
  }

.form input[type="textbox"], .form select, .form textbox {
  min-width: 100px;
  }

.form .block {
  display: block;    
  }

.form .errors {
  border: 1px solid #903;
  background: #F5D8D9;
  padding: 5px;
  margin-bottom: 5px;
  }

.form .error {
  font-size: 11px;
  color: #903 !important;
  text-align: right;
  margin:  0 0 5px 0;
  display: block;
  }
 
.form .errors .error {
  text-align: left;
  }

.form .information {
  border: 1px solid #090;
  background: #ECFFD9;
  padding: 5px;
  margin-bottom: 5px;
  }
 
.form .info {
  font-size: 11px;
  color: #030;
  text-align: right;
  margin:  0 0 5px 0;
  display: block;
  }

.form .submitcontainer {
  margin: 25px 0 35px 164px;
  padding: 0;
  border: none;
  }

.form fieldset .submitcontainer {
  margin: 15px 0 35px 149px;
  }

I am not going to pull apart everything in the css file, but I do want to mention that it is built to include most possible scenarios including columns.
The CSS file is also built to the standard shown in the post Css Management Standard.

Here is the basic form and the error/info form with the styles in place. You can view source and use as you would like.

Like I said this design is what is used in the Admin section of NAU EC. This way of coding up the form is extreamly customizable which is one of the reasons why it is so good. So Code, Design, and Enjoy.

So, HTML5 anyone?

Ok so I am getting ready for an HTML5 CSS3 demostration on wednesday and so I made a few demonstrations and I wanted to share them here. Go ahead and view source. Have fun.

This is to be viewed in chrome or safari, Firefox 4 might work, it uses flexbox and won’t work in a lot of browsers yet. I am going to give an image of what it is suppost to look like and then the html example. I was going to use some javascript to have it display the correct time, but then I decided not to just so that I could say here is a 100% css3 html clock. So this is a pure 100% html css clock, there are no images involved, just divs, spans, and css3.

Now the HTML:

12
111
102
93
84
75
6

Some Back end

update: Dyanmic Linq library

So I realized that, even though I do a lot of back end work, I haven’t put any of it here. So I am going to. I don’t really know why I don’t put much in here. I guess maybe because I don’t think many people actually look at this site, maybe I am just poor at writing stuff down and taking the time to document. Regardless I think this may be a good place for me to reference stuff so I am going to put stuff here and if other people see it then fine.

Anyway I was thinking a little about linq in c#. Now I spent a little bit of time in Java and really like some of the hibernate stuff there. So here is something that was typical. I used the stripes framework and had a little bit (OK a lotta bit of) from my brother in law. He really knows his stuff. You could say he wrote part of the book on stripes. Anyway. In stripes there is a DAO object. A really great generics dao. the great part of this is that it is built from a string so

1
List<person> people = Dao.list("Select p from Person p where p.name = ?", stringName);

Really great stuff, making sql calls from the code with no sql, just objects. So when I went into linq I thought it would be similar but it isn’t.

There is some great stuff with linq but until I can figure out this problem it will be a little more cumbersome than I want it to be. So here is what is great about the hibernate stuff. Let’s look at that call again but add something else.

1
 Dao.list("Select p from Person p where p." + insertVarHere + " =?", stringName);

That is dynamic. I can look for any column with any variable because it is a string. I just need to find someway to submit the linq statement as a string and I would have it. For example in my last project I was in a position where I needed to filter a grid. There were a lot of filters going on at once so instead of having filters trump other filter I decided to put everything in one method call and use session to store all the filters. This solved everything but one little detail, the linq to do it with.

There are 8 columns and each has a set of filters, this was modled after the filter that excel does. So I can filter by the values in the cells as well as sort ascending and descending. The Grid that was used was very complex and so I built a simple gridview and added all the features myself with javascript. So again the problem. I am filtering all at once and I have 10 columns that can have filters. The linq looked like this. ‘columnName’ is the commandArgument and direction is the ‘commandName’ from the grid.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 switch (columnName)
            {
                case "CommentDate":
                    if (direction == "asc")
                    {
                        sortedNotes = from a in notesToSort
                                      orderby a.CommentDate ascending
                                      select a;
                    }
                    else
                    {
                        sortedNotes = from a in notesToSort
                                      orderby a.CommentDate descending
                                      select a;
                    }
                    break;

                case "AdvisorName":
                    if (direction == "asc")
                    {
                        sortedNotes = from a in notesToSort
                                      orderby a.AdvisorName ascending
                                      select a;
                    }
                    else
                    {
                        sortedNotes = from a in notesToSort
                                      orderby a.AdvisorName descending
                                      select a;
                    }
                    break;

Of course that isn’t the end of the statement, but enough to get the picture. It is a switch for each of the columns. This had to be done this way because I don’t have the ability to pass the column as a string. that would have helped like this:

1
2
3
sortedNotes = @"from a in notesToSort
                    orderby a." + columnName + " " + direction + @"
                    select a";

That would have reduced about 100 lines of code. I am still trying to figure out how I could do that, feed linq as a string. Later on the same project I used something that was a little better but still not a string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (filters != null)
            {
                if ((from advisor in filters["advisor"] select advisor).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from advisor in filters["advisor"]
                                                              select advisor).Contains(s.AdvisorName));
                if ((from campus in filters["campus"] select campus).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from campus in filters["campus"]
                                                              select campus).Contains(s.StudentCampusDescr));
                if ((from acad in filters["acad"] select acad).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from acad in filters["acad"]
                                                              select acad).Contains(s.StudentPlanDescr));
                if ((from contact in filters["contact"] select contact).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from contact in filters["contact"]
                                                              select contact).Contains(s.ContactMethod));
                if ((from commentType in filters["commentType"] select commentType).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from commentType in filters["commentType"]
                                                              select commentType).Contains(s.CommentType));
                if ((from commentCat in filters["commentCat"] select commentCat).Count() > 0)
                    queryFiltered = queryFiltered.Where(s => (from commentCat in filters["commentCat"]
                                                              select commentCat).Contains(s.CommentCategoryDescr));
            }

This was a little better at doing dynamic linq, it allowed for logic inside of the linq statement and a much needed addition, but I really would like to see linq have a string feed. I think I am going to keep working on that, maybe I will have to create, somehow, one of those generic doa objects, who knows.

Oh, Ya…

Well, now that I am not teaching I can put stuff on here because I have a little more time.

So I wanted to put up some icons that I made and like. They were created for an error page on the EAN application I designed and Developed. I particularly like the 404 icon.


EAN Icon


EAN 404


EAN 401

Css Management Standard

This is a really good system for managing system wide css. CSS_Management_standards

I have a few alternates to it in the form of putting page specific css. In the standard, for organization sake, I am including page level css in the head of the document. An alternate to this is to move it to an external page. Both have large benefits. The first deals with organization, with lots of files comes lots of management needs. The second allows for caching and more granular @imports.

Anyway. This has proved very well through my projects and thought I could offer some Ideas out there.

Electronic Advising Notebook

The Electronic Advising Notebook is a very fun project. I was able to start the project with an ai file and an old system. Through several stages I took this project to mach-up to basic prototype to full scale system. The comment grid system needed a lot more functionality then I could get out of any control so I needed to hand code the javascript/html/css to get the right results. The whole project is line after line of custom javascript/jQuery. I designed the user interface to fit in several different “wrappers” to fit in and stand out.

The backend is build in C# and we used a lot of linq with generics. Great combination. This has been a really fun project to work on. I may find some post dealing with the components created in the system such as custom, generic modal windows.

Get Adobe Flash player

Illustration, first

well, Here is an illustration that I worked on for about an hour. I found an illustrator that I liked the style and tried to learn from it. Those of you whom I have talked to about my illustration know that I have had a hard time doing an illustration because of my background as a fine artist. I have spent years training myself to draw what I see and to remove “symbols” from my drawings. Well Here I am trying to take what I see and create symbols, this has been a real challenge and this illustration is about a year in the making, I know it may not seem like much, but to me it is a landmark.

← Older Entries