Posts Tagged ‘development’

Web 3.0 – The semantic web – It all makes sense now

rdfa.jpgThere has been a lot of talk about Microformats, RDFa (Resource Description Framework – in – attributes) and Web Ontology Language (OWL). These naming conventions, although not widely used yet, present a solution that narrows down relevant search results and data correlation on websites.
As some of you may know, our favorite web pioneer has recently announced Google Search Options.

This refined view of data exploits semantic markup conventions making it easy for people to find the data they want. They also have some good documentation on structured data in their Webmasters guidelines section.
So far, it seems like the three most common implementations for rich snippets are reviews, people and products. When coding, property association for data can be added either by naming the element class or adding a property attribute. These two Firefox addons, Operator and Semantic Radar, will display this information.
Here is the recording from the webinar we attended today on the Semantic Web.

Technology

Dissecting the Green Key Marquee

The recent redesign of professional recruiter and temporary staffing firm features an interactive marquee that combines a slideshow, areas of expertise menu kick-out, and zoomable touts highlighting the site’s three key areas: available positions, resume submission and employers portal. This is a dissection of the component’s front-end HTML and CSS architecture, giving a more in-depth look at what’s actually happening under the hood.

The Marquee Frame

The marquee’s frame consists of the following divs:

  • #marquee – main parent container
  • #marquee_head – transparent png set as the background for the top curve
  • #marquee_foot – transparent png set as the background for the bottom curve
  • #marquee_content – content with a repeating vertical shadow background image
  • #marquee_overflow – wrapping container with overflow set to hidden to clip excess content from appears outisde the curves and sides

Each of the background images have a white outset to allow for the clipping to display correctly.

Zoomable Touts

gk_zoom.jpg

Keepin’ it cross-browser

The challenge here was keeping the tout’s markup within the actual marquee parent container to maintain a nice markup flow. Since IE disallows childen to stack over its parent elements who have an overflow set to hidden, this presented a problem for the hover states on each tout. As seen in the image, the touts overlay the actual marquee frame when hovered over with a cursor.

The solution?

Gotta swallow the geek pride on this one. We have to break the markup’s natural flow a bit and place the hover states, #marquee_touts_active, outside the #marquee div. Fortunately the placement is immediately after the #marquee div so the markup’s “roadmap” is still intact.

Transparency

No png’s necessary. The tout’s transparency setting is fully CSS-controlled. To cover all bases a few separate browser-specific CSS statements are necessary (see below).

Areas of Expertise Menu

gk_menu.2jpg

This menu is an overlay kick-out that appears when you hover over its call to action underneath the marquee’s main blurb that lists areas of expertise which are specific to the current division you are viewing.

See for Yourself

Below are stripped down versions of the actual HTML and CSS. You can view the marquee live in action at any of Green Key’s divisional sites such as Accounting & Finance.

HTML


<!-- #marquee-->
<div id="marquee">
<!-- #marquee_head -->
<div id="marquee_head">Beginning of Marquee</div>
<!-- /#marquee_head -->
<!-- #marquee_content -->
<div id="marquee_content">
<!-- #marquee_overflow -->
<div id="marquee_overflow">
<!--.slide -->
<div class="slide">
<!-- slide content -->
</div>
<!-- /.slide -->
<!-- #marquee_touts -->
<div class="clear" id="marquee_touts">
<div class="tout">
<!-- tout content -->
</div>
</div>
<!-- /#marquee_touts -->
<!-- #menu_areas -->
<div id="menu_areas">
<!-- areas of expertise content -->
</div>
<!-- /#menu_areas -->
</div>
<!-- /#marquee_overflow -->
</div>
<!-- /#marquee_content -->
<!-- #marquee_foot -->
<div id="marquee_foot">End of Marquee</div>
<!-- /#marquee_foot -->
</div>
<!-- /#marquee -->
<!-- #marquee_touts_active-->
<div class="clear" id="marquee_touts_active">
<div class="tout"><!-- tout content --></div>
</div>
<!-- /#marquee_touts_active -->

CSS:


/* #marquee
---------------------------------------------------------------*/
#marquee {
margin:0 0 0 -10px;
width:961px;
}
#marquee #marquee_head {
background: url(/img/bg/bg_marquee_head.png)
no-repeat scroll 0 0;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_head.png',
sizingMethod='image'
);
_background: none;
height:43px;
position:relative;
text-indent:-1000em;
width:961px;
z-index:2;
}
#marquee #marquee_foot {
background: url(/img/bg/bg_marquee_foot.png) no-repeat;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_marquee_foot.png',
sizingMethod='image'
);
_background: none;
height: 60px;
width: 961px;
position: relative;
z-index: 5;
text-indent: -1000em;
}
#marquee #marquee_content {
background: url(/img/bg/bg_marquee_content.png)
repeat-y scroll 0 0;
height:391px;
position:relative;
}
#marquee #marquee_content #marquee_overflow {
height:446px;
margin:-25px 0 0 10px;
overflow:hidden;
position:absolute;
width:940px;
}
/* #marquee_touts
---------------------------------------------------------------*/
#marquee_touts {
position: absolute;
top: 450px;
z-index: 1;
background: #236336;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
#marquee_touts .tout {
float: left;
width: 311px;
padding: 23px 0 45px 0;
border-right: 1px solid #77917e;
cursor: default;
height: 50px;
}
/* #marquee_touts_active
---------------------------------------------------------------*/
#marquee_touts_active {
position: absolute;
z-index: 100;
margin: -165px 0 0 0;
}
#marquee_touts_active .tout {
height: 153px;
position: absolute;
}
#marquee_touts_active .tout .tout_content {
height: 153px;
}
/* extra div for ie hasLayout */
#marquee_touts_active .tout .tout_content {
padding: 30px 0 0 0;
background-position: left top;
background-repeat: no-repeat;
}
/* #menu_areas
---------------------------------------------------------------*/
#menu_areas {
position: absolute;
z-index: 2;
top: 235px;
left: 34px;
padding: 33px 0 0 0;
width: 578px;
}
#menu_areas.active {
background: url(/img/bg/bg_menu_areas_head.png)
no-repeat left top;
_filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(
src='/img/bg/bg_menu_areas_head.png',
sizingMethod='crop'
);
_background: none;
}
#menu_areas.active .menu_content { display: block; }

Technology

iMacros for Firefox: Automate time consuming repetitive processes

typing-robot-thumb.jpgWhen testing a web form, it can be tedious to constantly enter in the data over and over, especially for multi page forms. Auto form fillers are good but they don’t automatically submit the page and fill out subsequent pages.
I have tried a few macro recorders and one has become my go-to for testing forms. iMacros for Firefox is a free Firefox plugin that allows you to record and play back macros.
What I like about it:

  1. Macros are simple text files that can be edited in a text editor.
  2. The macro language is very extensible and can perform most any web task.
  3. You can share macros through a link.

Another free macro utility (Windows only) I recently found is AutoIt. AutoIt has more coverage of things it can do since it is not dependent on a browser. The macro language is also very capable of many tasks.
A more advanced plugin that can achieve the same automation results is Selenium IDE. It is more versatile than the previously mentioned macro recorders, since it can be fine tuned to run during an automated test process directly on a server. Selenium IDE is also free and works wherever Firefox does.
Whichever you choose, the time saved by running macros can greatly improve your programming efficiency, allowing for more time for other tasks–like foosball.

Technology

Layers

Seth Godin: “We live in a layered world now. Those that plan and plan and then launch are always going to be at a disadvantage to the layerers.”

So true, and “now” doesn’t just mean “of late.” Web professionals have long promoted the fluidity of their work. It’s the beauty of the thing: one can always redo, change, expand, improve. Some lament the constant beta status of startups, but the evolutionary ability allows them to succeed.

Within this context, of course, one has to look out for the “good enough” trap. Is the project really good enough to launch? If so, put it out to the world. If not, don’t rush into it for the sake of existing. Make it good, not good enough. Then stick it out there, even if it’s missing the 38 features that are supposed to be in the final release phase.

Layering and iterating allows the potential audience to help define it. This is not just important; it can be career-altering. Flickr was a game until the image-posting app became too powerful to ignore. Hummers were military vehicles until Arnold Schwarzenegger asked AM General to make him a civilian model. Layering on multiple models, features, and ideas led these companies to successes far more vast and different than originally proposed.

So get that launch out the door and see what happens. Add layers as time allows and as market needs demand. And be willing to change course. It’s not just the layers–it’s the minds behind it that help dictate the success.

Technology

Freezedown

The funny thing about creating a web site, web app or software project is that initially

  • Everything is up for discussion, then…
  • Nothing is up for discussion

This is because Project Variability is a time sensitive beast. And the best projects are ones where everyone, from the client, through the information architect to the developers and designers understand that the degree to which features are carved in stone is entirely dependent on when they are in the project lifespan.

The crux of this idea is that the tolerance for change in a project isn’t an absolute – its a curve. Project’s can undergo change midstream, but the tolerance a project has for change is in direct proportion to its remaining time. I call this phenomenon Freezedown: the degree to which features and implementation details are frozen in the project.

To try to express this lets compose a formula:

TV = F / T

where:

TV = Tolerable Variability: Change occurring against a feature set or implementation method.

F = Future Iterations Remaining in Project

T = Total Iterations in Project

So – lets say we had a project that was 16 weeks, broken up into 8 two-week iterations. Before the project development kicked off, there would be 8 out of 8 iterations remaining. That’s “1″ or 100%. At this point everything is on the table, there’s no downside of changing the feature set, or the (at this point, planned) details of implementation.

As the project goes on, it can still accommodate changes, but the tolerance drops off:

  • Iteration 1: 87.5%
  • Iteration 2: 75%
  • Iteration 3: 62.5%
  • Iteration 4: 50%
  • Iteration 5: 37.5%
  • Iteration 6: 25%
  • Iteration 7: 12.5%
  • Iteration 8: Feature freeze

What do these percentages mean? They abstractly represent the amount of feature changes or implementation changes that are open for discussion. This is the tolerance of the project for change.

If something comes along that exceeds that level of change, at that time, the scope has changed – which at the very least means the original schedule is probably not going to be realistic any more. Everyone in the project should be aware of the degree of Freezedown in effect at any given point.

Technology

How To Doc

Most of what you’ll find in the “Agile” development methodologies is just common sense. Anyone who’s been in development long enough would agree with most of the principles that the Agilists propose. One of the main areas of real controversy has to do with documentation.

This mostly comes out of a reaction to the heavy, “high-ceremony” methodologies of the 90′s (like Rational Unified Process – designed to sell Rational tools). The Agile folks essentially have dispensed with the UML, the use cases and so forth and gone with the lightest-weight documentation they can get away with, in pursuit of the idea that they should be building software, not documentation.

Well, for companies like AI where 99% of what we build is for our clients, this “no-documentation” doesn’t quite work. This is because:

  • Documentation is part of the approval cycle, in which our clients let us know if we’re building the right stuff for them.
  • Documentation lets our clients know what we’re going to build before we actually build it.

To fill this gap, some of the Agile methodologies, notably Extreme Programming (XP) recommend an “in-house customer”. This sounds both great and horrible to me for different reasons, but in any case I’ve never known any shop that’s actually been able to pull if off. Our customers are to busy doing other things like, say, running their own business, to sit around in our shop being our resident customer. That means we need to document.

At the same time, we certainly don’t want to go back to the bad old days of high-ceremony. So we’ve endeavored to create a light-weight documentation system built on the attributes of the part of the system being developed.

We have 4 documentation types:

Specifications: Written technical specifications that describe the system, either in paragraphs of text or some times with tables that define data structures.

Wireframes: Simple mock-ups of user interfaces that show the layout of the application to the customer.

Prototypes: Simple, interactive versions of the application which demonstrate the interactivity of the app to the user.

Nothing!: Not everything needs documentation! Sometimes the best approach to document is not not document at all.

These four “directions” form our compass:

(Well – its almost N,S,E,W – instead we have N,S,P,W).

When deciding how do document a feature or part of an application, we’ll want to look at the following criteria:

Linearity: Is this a serial, step-by-step kind of process we’re describing, or is it something that can wander in any direction?

Visibility: Is this a part of the application that is reflected in the UI? Is it something that the user is going to see, or is it strictly behind the scenes?

Interactivity: How interactive is this feature? Is there a lot of back and forth with the user, or does the user just fire off one event and a bunch of stuff happens without further input?

Uniqueness: How unusual is this feature? Is this something that is unique to this app, or unusual in this business space, or is it something that everyone has seen a thousand times before?

These four attributes influence our documentation decisions:

Linearity

The more linear a process is, the more it drives documentation towards a specification. Specifications are particularly good for describing automated, back-end processes. They are less useful for non-linear processes.

Visibility

Visibility in a feature is a good indication that wireframes or prototypes should be used. This is because everyone, including customers and developers, needs to be able to visualize the user interface for the feature.

Interactivity

Interactivity drives towards prototyping. The more back and forth a feature presents with a user, the more inefficient a wireframe is at properly representing it. Instead we need to resort to prototypes – interactive but “hollow” versions of the app that simulate the back-and-forth the real application would provide. This allows the observer to properly understand the interactivity of the feature.

Uniqueness

Unique or notable features require documentation, common and already well-understood ones do not. One option that is always available is to do nothing: to not document the feature. I believe that the driving force here is uniqueness – how notable a feature is. Conversely, common or well-understood features may not require documentation at all.

So how do we use these driving forces? Lets look at a couple of examples.

Lets say our first feature is a complex set of preferences. Choices made by a user may cascade into more choices, and may spawn dialog boxes. Looking at this feature, we can state that it is Visible, Interactive, Nonlinear and Unique. Putting this characterization against our model above, gives us something like the following:

The model has spoken: a prototype of the feature is the best way to document it.

For a very different case, lets say that we have a common print function occurring in the application. Well, everyone has pretty much knows what printing means, so lets call it Invisible, Linear, Non-interactive and Common.

Applying the model, we can see the best thing to do with this feature is to leave it undocumented, everyone already understands it.

Technology