Technology Stack

There are quite few different pieces of technology being used in this example. The main bullet points to focus on are JSON and the RESTful API. Here is a quick list:

• Javascript
• JQuery
• Google AJAX Libraries API
• (X)HTML
• JSON
• RESTful API
• CSS

Here is an example of what I am about show, but just in case my site changes (which is fairly often) and the example is no longer being used here is screen capture of my project.

Readernaut’s API uses the RESTful style of architecture for distribution. There are different styles for API design, but we don’t care about them right now.

Down To the Nitty Gritty

To start off with you’ll need to form the url that will return the JSON object with the information you want. If you prefer the data in XML format, it’s as easy as replacing json with xml in the url.

Example:

http://readernaut.com/api/v1/json/dylan/books/

We’ll start off using plain old javascript and then I’ll show how to use the popular javascript library, JQuery, to clean up the code a bit. First you’ll want to link to the appropriate scripts.  Put the first script include to the JSON object directly before the ending body tag. This is so that, by any chance, Readernaut.com were to go down your site would still load.

<script type="text/javascript" src="http://readernaut.com/api/v1/json/dylan/books/?callback=dylanbooks"></script>

Next link to the javascript that handles the UI for your site. This can be placed in the head like you would normally do.

<script type="text/javascript" src="http://www.dylanbathurst.com/wp-content/themes/texturallax/readernaut.js"></script>

function dylanbooks(books){
var bookUl = document.getElementById('books');
var bookCount = books.reader_books;
for(var i=0; i<bookCount.length; i++){
var title = books.reader_books[i].book_edition.title;
var cover = books.reader_books[i].book_edition.covers.cover_medium;
var permalink = books.reader_books[i].permalink;

var listItem = document.createElement("li");

var anchor = document.createElement("a");
anchor.setAttribute("href",permalink);
anchor.setAttribute("title",title);

var image = document.createElement("img");
image.setAttribute("src",cover);
image.setAttribute("alt",title);

anchor.appendChild(image);
listItem.appendChild(anchor);
bookUl.appendChild(listItem);
}
}

What the above code does is pulls in and loops through the JSON object, creates and img, a, and li element for each book. After creating the line item it then appends it to the unordered list element with the id of books that was previously placed in the DOM.

Now that we’ve done the project in plain javascript, I’ll show you how to port it over to JQuery. One of the big advantages to this is cleaning up script tags in the document. First link to a copy of JQuery. I’m using the Google AJAX Libraries API to link to JQuery but something like this will do the trick:

<script type="text/javascript" src="http://yoursite.com/jquery-1.3.2.min.js"></script>

Now in readernaut.js you’ll be able to use JQuery’s built in functions to pull in the JSON object, create the necessary elements, and inject them into the DOM.

$(document).ready(function () {
var bookUl = $("#books");
$.getJSON("http://readernaut.com/api/v1/json/dylan/books/?callback=?",
function(books){
var bookCount = books.reader_books;
$.each(bookCount,function(i){
var title = books.reader_books[i].book_edition.title;
var cover = books.reader_books[i].book_edition.covers.cover_medium;
var permalink = books.reader_books[i].permalink;

var lineItem = $("<li>").appendTo(bookUl);
var bookLink = $("<a>").attr({
href:permalink,
title:title
}).appendTo(lineItem);
$("<img/>").attr({
src:cover,
alt:title
}).appendTo(bookLink);
});
});
});

With the help of .ready event, the javascript won’t start working until the document has already loaded. Thus fixing the problem that was previously solved by linking to the script at the bottom of the document.

Well there you have it. Now all that is left to do is style the new unordered list full of the beautiful books that you’ve been reading. If you’d like some continued reading on Readernaut’s API, check out the google group, or the GetSatisfaction page.

So what I did was try to come up with some basic elements and style properties that can be easily remembered. The items in these lists are semantic and flexible. This way when the code gets handed off to a designer or front-end developer they will have been set up with a strong foundation to add to.

Once again I’m not pointing fingers or criticizing programmers. I’m simply trying to make this very common process of back to front-end development run more smoothly.

1. divisions instead of tables -This is the big one. As a “standards minded” developer I rarely use tables when coding, and never when forming layout for a site. The way that most every front-end developer creates structure is through divisions, also known as div elements.

   Here the a snippet code you might be familiar with:

   < table >
       < tr >
           < td >Some output< /td >
       < /tr >
   < /table >
   

   The semantic and easier way would be do it like so:

   < div >
       < p >
           Some output
       < /p >
   < /div >
   

   Think of a division as a lightweight, more flexible table that makes styling and layout designing much easier on your designer. Another advantage to divisions is that, when embedded, they are much easier to work with than embedded tables. With every table comes rows and cells, and all that code gets really messy really quick.

2. lists -Sometimes I feel sorry for HTML lists because they are often neglected when programmers are outputting text. Think about how many times you create a loop in your programming language of choice. On almost every occasion that a back-end loop is used, it will output into an HTML list. A lot of programmers I have worked with will usually use line-breaks instead of lists. Sound familiar?The reason line breaks are frowned upon by designers is because they make that text unable to be styled easily. With an unordered or ordered list there is the the block-level parent and block-level child elements that are easy to style with CSS. Here are some examples.

   Not preferred:

   < ?php
   for ($i = 0; $i < 10; $i++) {
        echo $i . '< br / >';
   }
   ? >
   < /ul >

   Preferred:

   < ul >
   < ?php
   for ($i = 0; $i < 10; $i++) { ? >
        < li >< ?php echo $i; ? >< /li >
   < ?php
   }
   ? >
   < /ul >

   Now the list of items is wrapped in a block-level element so no need for a division around the list, and inside the loop are list-items that are very versatile and work well with CSS. In my example I use and unordered list for items that have no particular order. An easy switch can be made to the list to make it an ordered list and have incrementing numbers representing each line-item. Simply switch the ul with an ol.

3. headings -Heading elements are often neglected. Have you ever wanted to make a certain word stand out at the top of the body, and used a bold, italic, or font element? I’ve seen it countless times. Along with these elements comes more code, such as the deprecated center element to center the text on the page and other inline styles. Using an h1 - h6 heading element is the correct and easier way of accomplishing the same task.

   < h1 >ello guvna< /h1 >
   

I’m sure that there are more elements that should be added to this list, but I felt that these were the most important to start with. In my working experience the lack of these three elements has caused a considerable amount of frustration and extra work. Having a sound knowledge of both ends of development can do wonders for productivity. 

I can also see how some might take this as a condescending post. I’ve tried to word it otherwise, but might have failed miserably. Sorry. Please leave a comment with any questions, or if you have any suggestions for elements to add to the list. I hope this helps to clarify some questions people might have had, or even possibly shown you a problem you haven’t thought of before now.

Teams in College

My team experiences in college consisted of about four or five students who reluctantly met outside of class for fifteen minutes to think out a website idea as fast as they could so they could get home to watch the latest episode of Heroes. Each member would then do the coding work on their own time and have to jam it together with everyone else’s code the day before it was due and hope it all synced well. 

They particular way that I would do my part of the coding goes as follows:

1. Start writing my style of code. (back-end, front-end)
2. Test frequently to see if it worked.
3. Get mad that it didn’t work perfectly.
4. Google the error message.
5. Correct my code with code from google results.
6. Return to step 1.

This style of coding would actually work out pretty well for me, and I got rather talented at finding the help I needed from Google search results, but was this really working in a team? Back then I would say yes, but now that I am getting more real world experience I am changing my answer.

Teams Out of College

In the short time I have been out of the college life and into RL, I’ve had some eye opening experiences with my team. One of said experiences was trying to explain how to set up an application that consisted of a JSON request using MooTools javascript framework. Having intermediate JSON experience, and no experience with MooTools I was a bit discouraged from the start. I have worked with javascript frameworks before but not MooTools itself, while many aspects were similar to other libraries they were different enough to confuse me. I was supposed to explain how to do this somewhat complex request with tools I haven’t used, over the shoulder of someone who has had minimal interaction with Javascript. 

Being discouraged temporarily blinded me from the learning experience that was right in front of me. Since I wasn’t able to test myself I was forced to think out loud about why our code wasn’t working properly. I was able to get feedback from my partner and openly discuss step-by-step what the application was supposed to do and why it wasn’t doing that. When we would both get stuck another member of our team was able to step in with some outside perspective that would open a door for us in our application. 

In Summary

After thinking about this experience and comparing it my college experience I can conclude that team dynamics can’t just be thrown together and expected to work. With such a large code base that goes into a e-commerce website, the team working with that code can’t afford to be un-collaborative with each other at all times. Building these relationships also works as a team building exercise that will be useful when figuring out who works well together for future projects.

How It Works

On each product page underneath the products image there is a textarea that contains a generated zappme link. On both the classic zappos and the new zeta site the textarea element has an id of zappme. This makes it really easy for the javascript to grab the contents of the textarea, and the rest is the code I had from my previous bookmarklet.

The Code

javascript:void(location.href='http://twitter.com/home?status='+document.getElementById('zappme').innerHTML)

Simple Explanation

The part of the javascript that says document.getElementById(’zappme’).innerHTML scans the page for an HTML element with the id of zappme and grabs whatever is inside that element. In this case it’s a url that looks similar to this. http://zapp.me/7396959 That url is then passed through the another url to twitter where it then populates your status update field.

In one click you’re on you’re twittering about a Zappos product with a nice, short link that won’t eat up all of your precious 140 character limit. So basically this:

http://zeta.zappos.com/product/7396959/color/2105

Is now this:

http://zapp.me/7396959

To use this bookmarklet drag this ZappMe link to your bookmarks bar and simply click it while on a zappos product page.

Emastic CSS Framework

Emastic was created by Vladimir Carrer, a self employed web developer from Italy. The framework is lightweight weighing in at just below 4kb with the compressed version. Along with the download comes a grid system for aligning elements in a neat, well formed structure. (Emastic’s grid system has some problems, but I will discuss them later.) There is something special that Emastic offers to people, though, beyond saving them from writing their own CSS. This framework provides the developer a way to make beautiful elastic layouts using ems! To me this is the most compelling attraction to Emastic.

What is ems?

Most CSS designers out there (including me) use pixels for setting heights, widths, and font-sizes for the elements they are working with. This is all good and fun until you think a little bit about what that means for people who want to enlarge the text to see it better. In our pixel based layouts the text will get bigger but the elements themselves will stay the same pixel height/width.

If you are using ems for layout then you have given a more elastic component to the site. Now when the user enlarges the text on your page, all other elements will enlarge, too. It looks like the page is zooming in and out. If you use Firefox 3, it is similar to using the full page zoom feature.

This is what a site with an elastic layout will look like when you load it into your browser. Now if you think the text is too big or too small you can use the shortcut  + or  - to start resizing the text to a comfortable level. (I believe it’s Shift + and Shift - in Windows.)

When the pages layout is made with ems instead of pixels. This will happen:

Now the whole page looks as though you zoomed out away from it. All the elements are relative to one another!

Emastic makes creating and converting your site to ems very easy with all the prebuilt classes and id’s.

Typography

The style sheet dedicated to the overall typography of each page is pretty straight forward. Arial is used for paragraphs and beautiful Georgia is used for heading and caption text. Now not every page should use these two font-faces. In those cases simply editing the type.css file is easy to do. Locating and changing the font-family properties is no hard task since there are only four instances of the font-family property. 

Grid Work

Grids have become a popular development tool when making websites. They can be used to make very appealing layouts. Emastic, though, is lacking in the grid department. The framework comes with a grid overlay system but thats about it. The grid offers little room for customization and no vertical line adjustment, only horizontal. In my opinion being able to line up elements vertically is very important. Maybe even more important than horizontally aligning elements. 

I expect in later version Emastic this problem will be addressed, but I hope that it will be made a priority because just a little grid work can be a great asset to any site.

In Conclusion

Overall I deem Emastic a well thought out and excellent framework for any level of developer. Being that it’s only in beta right now, there is room for improvement. If Vladimir keeps actively developing his framework, he will be sure to see positive feedback and use of his product. 

To check out Emastic for yourself visit his google hosted site. You can also download the files directly.

To use TwitterThis simply drag this link TwitterThis to your bookmarks toolbar. Now whenever you are on a site that you would like to link to from twitter, just click the bookmark in your bookmarks bar and you will be taken to twitter and the url address of that page will be inserted into update area.

The Code

javascript:void(location.href='http://twitter.com/home?status='+escape(location.href))

update July 24, 2008
Gabe Jamison remodeled the script a little bit so that it will open up in a new window instead of opening in the same window. TwitterThisInAnotherWindowBesidesTheOneYouAreIn

javascript:void(window.open('http://twitter.com/home?status='+escape(location.href)))

The Reason

I know it’s not particularly hard to copy, go to twitter, and paste but this will save you a few clicks. So enjoy!

Ever had a similar experience?

As you can see, there is a very noticeable difference between the left and right sides of the above image. The left side is just what the image looked like in Photoshop before saving. The right side of the image is after “Saving for Web”. The colors are just faded and not quite as vibrant as I would like. 

After much searching I found someone to explain to me just what was going on with my images. The post on the Vidget design blog was straight forward and answered my question perfectly. 

This is what the above image should look like:

How to fix your rig

The amazing thing about this is that it’s really easy to persuade Photoshop to do what you want. Since Vidget already made a great post about this I will just skim through the process. There is no need to reinvent the wheel.

Step One

Edit > Color Settings > Monitor Color

Step Two

View > Proof Setup > Monitor RGB

Step Three

Save for web > (Circle w/ arrow in it) > Convert to sRGB (uncheck)

note: While in save for web mode you can toggle between checked and unchecked on the “Convert to sRGB” mode to see the difference in color.

Easy as pie. Now that pesky little problem of color shift should be gone. There might still be a discrepancy on mediums such as different monitors. That is just the way the monitor displays and it’s out of your hands.

To being with you will need the three images that will be the background, middle ground, and foreground.

HTML

< body >
< div id="content" >
< h1 >Go Green or the Incredible Hulk will kill you< /h1 >
< div class="push" >< /div >
< /div >
< div id="wrap" >
< div id="inner_wrap" >< /div >
< /div >
< /body >

HTML Explained

The body element will have the background grass image attached to is just like in How to Make the Parallax Effect.

The div with the id content is where this tutorial starts to differ from the last. Now we will be interlacing our content area with the div elements that construct the parallax to give even more of a three dimensional look. Now it will look like the content area is in front of the background grass, but behind the middle and foreground grass. As indicated by the heading 1 element, this is where the content of the page will go. 

The div inserted at the bottom of the content div is an empty element that is needed complete the sticky footer. I will discuss is later in in the CSS explanation. 

The following two divs wrapper and inner_wrap are what complete the parallax. Attached to these div elements are the middle and front grass images. 

note: The only place that actual content of the site should go is in the div with the id content. 

CSS

body {
	height:93%;
	background:#C6FF93 url(back_grass.png) repeat-x 10% bottom;
}
html {
	height:100%;
}
#content {
	width:600px;
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0em auto -5em;
	margin-bottom:-450px;
	margin-top:50px;
	background:#fff url(hulk.png) no-repeat center 130%;
	border:1px solid #87AF63;
}
#content h1 {
	font-family:arial;
	color:#4A6037;
	text-align:right;
	width:50%;
	margin:60px 20px 20px 200px;
}
.push {
	height:29em;
}
#wrap {
	width:100%;
	height:29em;
	background:url(middle_grass.png) repeat-x 50% bottom;
}
#inner_wrap {
	width:100%;
	height:29em;
	background:url(front_grass.png) repeat-x 100% bottom;
}

CSS explained

As mentioned previously the body element has the background grass image attached. Also you will notice that the height property is set to 93%. This starts the sticky footer process and will usually be 100% with most situations. With ours though, 93% was the optimal setting. 

Next in line is setting the height of the html to 100%. This can also vary depending one your implementation. If this isn’t set to 100% or close to it the divs will sort of shrink wrap to the content and not expand completely to the bottom of the browser window. 

Now the content div. This is where the code gets a little redundant. There little hacks in the code to cover different browsers. Such as newer browsers support the min-height property, but ie6 doesn’t. That is the reason for the multiple height property settings. The negative bottom margin is to pull the wrapper div up over the content div so that you get an overlay look with the images.

The div with its class set to push sets how the content part of the page will react to height adjustments. It kind of puts a stopper on the content div when the browser height is shortened. The height property should also be adjusted depending on your page. 

The height setting for the wrapper and inner_wrap divs should be set to the same height as the push div so that the content and grass all stop at the same time when resizing the browser. 

One problem that I have found with this code is that in Firefox the background image will keep going up with the browser when shortened. This is because the height of the body element is set to 100%. It works fine in Safari, but if anyone can find a fix for this I will update this post. 

 

First go with a parallax

Example

Using Adobe Illustrator and Photoshop I quickly put together the necessary images that were needed to create the effect.

Back most image

This rain drops in this image are smaller, lighter, and somewhat blurry considering that they will be the farthest away from the eye.

Middle image

The middle image is the focal point of three images. This image should be the most detailed and clear to see.

Front image

This image must be fairly blurred, large, and less detailed than the others. This is because it is the closest to the persons eye.

The code

Now that we have our three images made, all there is left to do is add the simple code to finish the effect.

HTML

Two empty div elements are all that are needed.

< div id="wrapper" >
	< div id="sub_wrap" >

	< /div >
< /div >

CSS

Attach the back image to the body element and horizontally position the said image to 10%. Do the same thing with the wrapper div and sub_wrap div using the last two images. Play around with the horizontal positioning of each of the images until you’re comfortable with the way that they move indifferently to each other.

* {
	margin:0;
	padding:0;
}
body {
	background:#D9E0FF url(back.png) repeat-x 10% 0px;
}
#wrapper {
	width:100%;
	height:320px;
	background:url(middle.png) repeat-x 30% 0px;
}
#sub_wrap {
	width:100%;
	height:320px;
	background:url(front.png) repeat-x 80% 0px;
}

See? It’s not hard at all. I was amazed at how easy it was to make it work. Keep in mind that the images should be transparent PNG’s so that you can see through to the images underneath.
Next I will show you how to make a parallax effect on the bottom of the browser. This uses another technique called a sticky footer to work properly.

Here is a sneak peak:

Other Sites

Here are some other sites that use the motion parallax effect.

SilverBackApp

Rissington Podcast

Kremalicious

Inner Geek (vertical parallax)

Really Worried

Viemo

Although not quite as apparent as the others. There is still some parallax action going on there.

update (8/31/08): Thanks to Tyler Stalder

webdev.stephband.info

This is a parallax effect created with javascript using the popular javascript framework JQuery.

Companies might use a bird logo because birds symbolize freedom, and no boundaries. This instills an emotional attachment in a user, and possibly influences them into being a loyal customer of their product or company.

Having noticed a few bird logos around the web, I decided to do a little searching for some more. Here is a round-up of the bird logos I have found.

Twitter

Twitter.com is a web startup from San Francisco that based their whole business off of birds. On the site you can submit tweets that are up to 140 characters, and allow you to say anything you want throughout your day.

Update: Tyler Stalder informed me in the comments that the first picture in the above set is actually the logo for Twitterific. A Mac OSX Twitter desktop client. 

Twitter uses a few different renditions of their logo, but their newest styles have gone for simplicity, which is always a good thing.

Adium

Adium is a free instant messaging application for Mac OS X that can connect to multiple instant messaging clients such as MSN, AIM, Jabber, Yahoo, and many more. Their logo is a small green duck that has a little more detail to it than the twitter logo.

Thunderbird/Firebird

Mozilla Thunderbird is a free, open source, cross-platform e-mail client developed by the Mozilla Foundation.

The picture on the left is the original Thunderbird logo. After going through a dramatic redesign, the logo changed considerably into the right image. This new logo is better suited with the Mozilla Firefox, a free open source web browser (logo pictured below). Firefox started off with a bird logo also. It was first called Phoenix, and then Firebird before revamping and becoming Firefox.

Linux

Linux is a free, open source, Unix-type operating system that is used world wide. Linux has a very popular logo, and has even gone so far as to name their mascot. This is a picture of Tux:

Chyrp

Chyrp is a blogging engine designed to be very lightweight while retaining functionality. Their bird logo is a sophisticated bird with a monocle and a top hat. While the bird is the mascot of the site, the actual logo accompanying the project name is three feathers floating in air.

Well thats it. These are some examples of using birds to build a brand around a company. There are many different styles used, and all are custom made to show some kind of personality about the company they represent. If you have any examples of other sites using a bird as their logo, let me know and I’ll update this post.

You can brand your logo everywhere with these promotional items including our personalized pens and company stress balls too.