The proverbial “cherry on top.” If you’ve had the chance to make it to Marvel’s The Avengers you can see this principle in action. After two hours of great cinematized comic book action, good humor and off the charts CG work, the creators could have pulled the ol’ jump-to-black-and-roll-the-credits. Basically telling the audience that it’s over now, so beat it. Which could have been fine. I mean, the movie was great, so that’s good enough. Not in this case though. Marvel hired a great movie title agency, Method Design, to make sure faithful fans were enjoying every last second of the movie.

After given the task, Method Design creative director, Stephen Viola and his team set out to make an effectively memorable and impactful main-on-end title sequence to escort your imagination into the ho-hum credit roll. Viola says that the team went through over half a dozen concepts before landing on the final piece. Just a side note. This is a common occurrence that should happen if the best possible results are desired. That’s not to say that your first idea isn’t ever your best, but it’s good practice to explore a variety of ideas. For The Avengers in particular, they really wanted to take advantage of the chance to focus on the characters without… showing the characters.

Viola says,“They’re all very unique personalities and character traits and have unique powers. So it’s a story about group chemistry and how they are forced to work together. They wanted to really focus on that and the real stakes was a big theme for Joss.” (Quote courtesy of fxguide.com)

So the challenge began. How do you show a message, thought or feeling without showing the message thought or feeling? The answer? Very carefully. Well, in the case of The Avengers, Viola’s team focused on the character’s damaged shells of armor and battered extensions of weaponry. All of which show heavy scaring after long fought battles with the enemy, each other and their own personal struggles.

To do this, Method Design takes the viewer on a macroscopic journey over, under, through and around these beaten metallurgic appendages like a person would tour some cavernous canyon valley in a helicopter. Utilizing lighting, varying depths of field, different rates of camera motion and other tricks of the trade we get to see all the minute details of the battle damage these heroes endured. Carbon encrusted blast holes, broken chain mail, scuffed and dented alloys, chipped paint and torn clothes. All of this coupled with a commitment to great typography. Viola’s team developed a custom typeface to compliment the Avengers logo. But, they still wanted to be true to the typography used in actual comics from back in the day. To achieve this they took the classic Bank Gothic and gave it a heroic alter ego so it compliments the typography in the Avengers logo. As the camera pauses momentarily from one of it’s detailed expeditions, we see the type as it materializes into focus at some strategic point along an arm contour or in a gaping hole in armor. Always paced and positioned so appropriately.

It really is something you have to see to fully appreciate. The combination of detailed visuals, great camera rigging techniques, well thought out typography, and an underlying concept that successfully unifies them all into a great experience. Whether it’s motion graphics, oil painting, writing a novel or even baking a cake, when all the details are carefully considered and you strive for the best possible end product, it will almost undoubtedly pay off and you will have a great feeling of satisfaction. Especially when others can see and appreciate the effort along with the creator.

Watch the main-on-end sequence

Demonstration – Executive Function Test

Your executive function is your ability for your brain to switch between different tasks. We be building a simple test similar to what psychologists and neuroscientists use to measure executive function. We create two fields and make either a red square or blue square appear in one of them. If it’s a red square, the user clicks on the field the square is in. If it’s a blue square, they click on the opposite field. We need to track the number of attempts and the number of correct choices. We also need a way to start and restart the test. You can view the complete demonstration of the executive function test here.

The Model

This example focuses on using the View, so the Model for this will be a simple repository for a handful of variables that we want easily accessible to the view.

var Model = Backbone.Model.extend({
    defaults: {
        score: 0,
        attempts: 0,
        currentLocation: 1,
        currentColor: 'red'
    }
});

The HTML

Backbone.js views have the power to dynamically create HTML and DOM elements using templates, but because we’re focusing on Events and we want to keep this example simple, we’ll just use some existing HTML. Here’s the relevant code.

The View

To start with, we create a View object, which we’ll call “Test”.

var Test = Backbone.View.extend({
    el: $('body'),
    model: new Model(), // See model above
 
    // .... future functions to go here .... //
});
var test = new Test();

The view itself will be created when we create an instance of it at the end with var test = new Test();. We attach the view to the ‘body’ tag which gives it access to the HTML that we created above. Then we create a new Model for it (an instance of the Model code we created above). Now, if we wanted information from the Model within the view–for example, the score–we simply use this.model.get('score');. We can set data by using something like this.model.set('score', 2);.

Events

Here’s an example of how the view in Backbone.js plays the role of the controller in a traditional MVC structure. We define events that can happen within the view here:

var Test = Backbone.View.extend({
    // ... Setup code (see above) ... //
 
    events: {
        'click button#start' : 'start',
        'click .field' : 'score',
        'click button#reset' : 'reset'
    },
    // Event handling functions (details below)
    start: function() { ... },
    score: function(event) { ... },
    reset: function() { ... },
 
    // ... additional functions here ... //
});

Each event describes the event, the selector to listen to, and the callback function. In the case of the first event, the button element with the start id is listening for a click event. When it gets that event, it runs the start function located in the view. This and all future function example are contained within the Test view, although that’s not expressly shown.

Start Event

start: function() {
    this.addRandomSpriteToField();
},

The function is really simple–it just calls another function The function it calls is a little more complicated. The inline comments explain what it does.

addRandomSpriteToField: function() {
    // Pick random field
    var randomField = Math.floor(Math.random() * 2) + 1;
    // Pick a random color
    var randomColor = Math.floor(Math.random() * 2) + 1;
    color = (randomColor == 1) ? 'red' : 'blue';
    // Pick a random location
    var x = $('.field').width() - 100;
    var y = $('.field').height() - 100;
    var randomX = Math.floor(Math.random() * x) + 1;
    var randomY = Math.floor(Math.random() * y) + 1;
    // Create a sprite with chosen attributes
    var sprite = $('

').css({
        'background-color' : color,
        'left' : randomX + 'px',
        'top' : randomY + 'px'
    });
    // Erase fields and add sprite to chosen field
    $('.field').empty();
    $('.field-' + randomField).append(sprite);
    // Update model data
    this.model.set('currentLocation', randomField);
    this.model.set('currentColor', color);
}

Notice that we’re using the jQuery/Zepto $(selector) functionality to manipulate the DOM. Backbone.js doesn’t include it natively so be sure to include it in your scripts.

Click a Field Event

The next event is bound to both the fields. Whenever they’re clicked they call the score function.

score: function(event) {
    // Get the id of the clicked field
    var fieldId = event.target.getAttribute('data-id');
    if(
        ( // Red square same field
            this.model.get('currentLocation') == fieldId &&
            this.model.get('currentColor') == 'red'
        ) ||
        ( // Blue square opposite field
            this.model.get('currentLocation') != fieldId &&
            this.model.get('currentColor') == 'blue'
        )
    ) {
        this.model.set('score', this.model.get('score') + 1);
    }
    this.model.set('attempts', this.model.get('attempts') + 1);
    this.addRandomSpriteToField();
    this.setScore();
},

Because this event could be triggers from one of two different fields, we need to know which one was clicked. Here we use event.target.getAttribute('data-id'). Then we check to see if the user did the correct action–same field if it’s a red square, opposite field if it’s a blue square. If they did, we add the score to the model. Whether they got the right score or not, we add increase the number of attempts. Then we add a new sprite using the addRandomSpriteToField function we’ve already seen. Then we call the setScore function, which updates the DOM with the new score data:

setScore: function() {
    $('#score').text(this.model.get('score'));
    $('#attempts').text(this.model.get('attempts'));
    if(this.model.get('attempts') != 0) { // Avoid a divide by 0 error
        $('#percentage').text(Math.floor((this.model.get('score') / this.model.get('attempts')) * 100) + '%')
    } else {
        $('#percentage').text('100%');
    }
},

Restart Event

The next event is the restart, which is bound to the “Reset Test” button and calls the reset function.

reset: function() {
    // Erase the fields
    $('.field').empty();
    // Reset the data
    this.model.set('score', 0);
    this.model.set('attempts', 0);
    // Reset DOM elements
    this.setScore();
},

At the end, we update the DOM with the setScore we’ve seen already.

So we can see how in Backbone.js, the Events and controlled and managed by the View. If we were using just jQuery to do this, it would be a mess of events bound to DOM elements that would have difficulty communicating with each other. Using Backbone.js, we were able to easily extract reused code into separate functions (setScore and addRandomSpriteToField). Using Backbone.js also allowed us to have an easily accessible source of data. All in all, using Backbone.js give the code better, cleaner structure and makes it easy to create and make future additions or edits.

This is a very simplistic jQuery function utilizing localStorage that I devised to help meet a specific need for a local client here in Utah county. I have re-written it here to be more flexible. Allow me to present a scenario:

Let’s say you’re in the market for a new job. You’ve been to all of the major sites, uploaded your résumé multiple times, and finally you find a great company (like Eli Kirk) with what sounds like the perfect job. The application process is all online with a résumé uploader at the end. Fair enough. I’ve been in this exact spot, years ago, and the average online job application is usually multiple pages with many fields.

You read through the application, taking your time to phrase things just right, making sure to dot every “i” and cross every “t.” Finally, you get to the résumé uploader and go to put your file in their system. You hit the “submit” button and wait.

And wait.

And wait.

Suddenly, something happens! The screen changes! It’s an alert telling you that Internet Explorer/Firefox/Chrome/Safari has unexpectedly closed and needs to be restarted. After muttering (or screaming) some words you wouldn’t want your mother to hear you say, you re-start your browser program. If it’s an updated browser, there’s a good chance you’ll at least get the tab re-opened that had your online job application. However, when you go to look at the fields, you stare in horror at the freshly blank boxes, and realize that you now have to do the entire process again. The sound of your head banging against the desk can be heard a block away.

Now imagine the same scenario as above, but instead when the browser re-opens to your tab, all of your information is still hanging out, waiting for you to simply try and re-upload the résumé again. Instead of your head pounding the desk, your neighbors up to a block away hear a rousing version of the Hallelujah Chorus. Sounds pretty good, right?

If you’re the type of web developer that wants to provide your user with more “Hallelujah” and less breaking of computers, then this handy function can be easily implemented and tweaked to meet your needs. There is a working version of the code below at localStorage Form Demo.

First, the entire code:

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
        $('.page-class form input, .page-class form textarea').each(function(){
            var getInputName = $(this).attr('name');
            var content = localStorage.getItem(getInputName);
            if(content !== null) {
                $(this).val(content);
            }
            $(this).bind('keyup focusout',function(){
                localStorage[getInputName] = $(this).val();
            });
        });
    }
});

The function is quite simple, but only deals with text inputs and textareas. We’ll address radio and checkbox inputs at the end.

First, we need to load the function after the fields have been written by the browser. This can be accomplished several ways, including putting the code in a JavaScript include in the footer, but since the site in question already had a general site-wide JavaScript file in the header, I put the function in there with a $(document).ready() call.

$(document).ready(function(){
 
});

Next, we need to test and see if the browser can handle localStorage. As Chris Rock explained, browsers that support localStorage include updated versions of Chrome, Firefox, Safari, and surprisingly, Internet Explorer 8+. For browsers that are not updated, we don’t want to run the risk of causing the entire site to stop functioning due to a JavaScript error.

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
 
    }
});

In other words, if the browser supports the method “Storage,” execute the code in this statement.

When the page loads, we want to pre-fill the fields with data that the user may have saved on their local system. We don’t need this to run on every page on the website, so we’re going to give our page a class of “page-class” on the body tag and use that as our pre-set selector (WordPress assigns its own class to pages if you use <?php body_class(); ?> in the <body> element of your markup, but you can use whatever class you want so long as it matches the selector in your jQuery). Then we select the form specifically by name, although if your site has multiple forms and you want localStorage on all of them, you can make the selectors much more loose. The two major input methods for forms are input fields and textareas, so we’ll put in selectors to target both:

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
        $('.page-class form input, .page-class form textarea').each(function(){
 
        });
    }
});

After we target the appropriate inputs and textareas, we need to pre-fill them. If you need a primer on how this works, again refer back to Chris Rock’s article. We re-use the input name as the name of the localStorage object, which makes it very easy to store and retrieve this data. If this is the first time loading the page, the user won’t have anything in localStorage. This can cause a JavaScript error, which may prevent the rest of the page from working properly, so we assign an “if” statement to first check and make sure that the localStorage is not null. Finally, we make the value of this input or textarea equal to the value stored in the localStorage item, thus pre-filling the field:

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
        $('.page-class form input, .page-class form textarea').each(function(){
            var getInputName = $(this).attr('name');
            var content = localStorage.getItem(getInputName);
            if(content !== null) {
                $(this).val(content);
            }
        });
    }
});

Now that we have established how to pre-load localStorage that has been stored in a previous session, we need to set the method for storing those values in the first place. This is very simple, again assigning the name of the input (now stored in the variable “getInputName”) as the name of the localStorage object. We assign the storage function to fire on “keyup” and “focusout” events in order to cover mobile devices such as Android tablets and iPads. Realistically, “focusout” alone should cover this, but in the event that the browser or computer crashes while typing in a long string of text in a textarea, the keyup backup is nice and should use a minimal of resources:

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
        $('.page-class form input, .page-class form textarea').each(function(){
            var getInputName = $(this).attr('name');
            var content = localStorage.getItem(getInputName);
            if(content !== null) {
                $(this).val(content);
            }
            $(this).bind('keyup focusout',function(){
                localStorage[getInputName] = $(this).val();
            });
        });
 
    }
});

That’s it! That is the whole of the basic version of this function. Earlier, I mentioned that this version of the function does not address checkbox or radio inputs. For this article, I pieced together a script that does just that and included it on this page: Simple jQuery localStorage Demonstration. If you understand the code above, then understanding how we are resolving this issue isn’t overly complex, it is just divided up slightly differently:

$(document).ready(function(){
    if(typeof(Storage) !== "undefined") {
        $('.page-class form input, .page-class form textarea').each(function(){
            var getInputName = $(this).attr('name');
            var content = localStorage.getItem(getInputName);
 
            if($(this).is('input[type="checkbox"]') === true) {
            //if this is a checkbox...
                var numberCheck = $(this).parent().parent().children().find('input').index(this);
                //...determine if this is checkbox 1, 2, 3, etc....
                getInputName = getInputName+numberCheck;
                //...then assign it a unique identifier based on its name + index
                content = localStorage.getItem(getInputName);
 
		if(content !== null) {
                    $(this).attr('checked','checked');
                    //If there is a value in localStorage based on this identifier, check the box.
                }
 
                $(this).bind('click',function(){
                    if($(this).attr('checked') === 'checked') {
                        localStorage[getInputName] = $(this).val();
                        //If checked, store
                    } else {
                        localStorage.removeItem(getInputName);
                        //If it becomes unchecked, remove from storage
                    }
                });
            } else if($(this).is('input[type="radio"]') === true) {
            //If this is a radio input...
                if(content !== null) {
                    $('input[name="'+getInputName+'"]').each(function(){
                    //...check each button...
                        if($(this).val() === content) {
                        //...and if the value of "content" (referenced above) matches...
                            $(this).attr('checked','checked');
                            //...check this radio button.
                        }
                    });
                }
 
                $(this).bind('click',function(){
                    localStorage[getInputName] = $(this).val();
                    //store the value of the button whenever one is clicked
                });
            } else {
                if(content !== null) {
                    $(this).val(content);
                }
                $(this).bind('keyup focusout',function(){
                    localStorage[getInputName] = $(this).val();
                });
            }
        });
    }
});

Basically, we’re dividing up the meat of our function by input type. Inputs with radio and checkbox types will have multiple inputs with the same name. In the case of radio types, this isn’t a big problem—we simply find the input that matches the stored data and set it to being checked. With a checkbox, we need to create individual identifiers for each input with the same name (localStorage objects will store as strings, so arrays are more of a mess). The most simple way to do this is to find out how many inputs with the same name we have, figure out the index of this particular input, and assign that to the localStorage name for storage and retrieval. Also, storing data for the radio or checkbox inputs is easiest to do with the “onclick” event. Last, in the final “else” statement, we are doing the same storage/retrieval from the earlier version of the function.

If you have any questions or comments on this function, feel free to leave them in the comments section below! Also, check out localStorage Form Demo to see these scripts in action!

• Data isn’t transferred with every page request like it is with cookies
• Data can be stored in larger amounts (usually up to 5MB)
• Currently no way for user to prevent its usage

Local Storage Javascript API

Local storage is accessible through the Javascript window.localStorage (or just localStorage) API. There are a number of functions available to manipulate the data in local storage.

• localStorage.setItem('foo', 'value for foo') – Assigns data to a specific key.
• localStorage.getItem('foo') – Retrieves the data stored under the specified key. You can also retrieve it with the array style, like this: localStorage['foo'].
• localStorage.key(0) – Retrieves the name of the key that’s stored at the specified position (in this case 0).
• localStorage.length() – Returns the number of items stored in localStorage.
• localStorage.removeItem('foo') – Deletes the item stored with the specified key.
• localStorage.clear() – Clears all items stored in localStorage.

Storing Complex Data in Local Storage

Local storage can only store simple strings. To store more complex data like arrays or objects, we first turn them into strings using localStorage.setItem('foo', JSON.stringify(obj)) and when we retrieve them, we change them back with JSON.parse(localStorage.getItem('foo')).

Local Storage Demonstration

To simply demonstrate how local storage could be used, I created a list of DVDs that a user could add to a “To Watch” list. This list will persist even if the user closes their browser. The list can be cleared by clicking a “Reset” button.

Local Storage Demonstration.

First we needed a list of DVDs to choose from. I used selections from my personal collection and put them into a simple unordered list.

1
2
3
4
5
6
7
8

<ul class="dvds">
    <li>2001: A Space Odyssey</li>
    <li>Across the Universe</li>
    <li>Amélie</li>
    <li>Cars</li>
    <li>Chungking Express</li>
    <!-- .... -->
</ul>

If you never visited the site before, the “To Watch” section will be empty, waiting for you to fill it up.

1
2
3
4
5
6

<div class="to-watch">
    <h2>To Watch</h2>
    <ul>
    </ul>
    <button>Reset</button>
</div>

First, we need to check to see if there’s already data stored in localStorage. If there is, we add them to the toWatch array, and to the “To Watch” list in the DOM. This uses jQuery, so be sure to include it.

1
2
3
4
5
6
7
8
9
10

var toWatch = Array();
if(localStorage['dvds']) {
    // turn the stored string into an array
    toWatch = JSON.parse(localStorage['dvds']);
 
    // Loop through the array and append the data to the "To Watch" list
    for(var i = 0; i < toWatch.length; i++) {
        $('.to-watch ul').append('<li>' + toWatch[i] + '</li>');
    }
}

Now, when someone clicks on a DVD title, we need to add it to the “To Watch” list.

1
2
3
4
5
6
7
8
9
10
11

var toWatch = Array();
$('.dvds li').on('click', function() {
    // Append to the existing array
    toWatch.push($(this).text());
 
    // Push the array into the local storage under the 'dvds' key. (This overwrites what's there)
    localStorage.setItem('dvds', JSON.stringify(toWatch));
 
    // Append a copy of the 'li' element to the "To Watch" list
    $(this).clone().appendTo('.to-watch ul');
});

Finally, we need to clear the “To Watch” list when someone clicks the “Reset” button.

1
2
3
4
5

$('.to-watch button').on('click', function() {
    toWatch = Array(); // Empty the array
    $('.to-watch ul').empty(); // Empty the DOM list
    localStorage.removeItem('dvds'); // Clear the local storage
});

Because we only have one item in our localStorage we could also do localStorage.clear().

Limitations of Local Storage

Local Storage is great for user settings and preferences, but it has its limitations.

• The storage amount is limited (again, about 5MB)
• You can only store strings (yes, we can get around that, but it’s inconvenient)
• You can’t retrieve data as flexibly as you can with something like SQL, e.g., SELECT * FROM dvds WHERE rating = 'PG-13' ORDER BY title

For more data-intensive applications, consider checking out something like Web SQL or IndexedDB

The Parallax Effect

First, let me show off how it turned out. The splash page served its purpose and is no longer “live” but we put up a demonstration of what it was like on our site. Liquipel Parallax Demonstration. Notice as you move your mouse, the background moves too. Also notice that there are distinct layers that move at different speeds.

Layer Creation

To create this effect, there needs to be different layers. We simply used one large png file for each layer. You can view the individual layers here:

• Parallax layer 1
• Parallax layer 2
• Parallax layer 3
• Parallax layer 4

1
2
3
4
5
6

<div class="parallax">
    <div class="water water-layer4"></div>
    <div class="water water-layer3"></div>
    <div class="water water-layer2"></div>
    <div class="water water-layer1"></div>
</div>

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

.parallax {
    position: absolute;
    width: 100%;
    height: 1090px;
    overflow: hidden;
    left: 0;
}
.water {
    position: absolute;
    width: 100%;
    height: 1090px;
    left:0;
    background-repeat: no-repeat;
    background-position: top center;
}
.water-layer1 {
    background-image: url(../images/water-layer-1.png);
}
.water-layer2 {
    background-image: url(../images/water-layer-2.png);
}
.water-layer3 {
    background-image: url(../images/water-layer-3.png);
}
.water-layer4 {
    background-image: url(../images/water-layer-4.png);
}

We put those layers in an absolutely positioned div that was set to the height of the images and 100% width. Inside this div was four other divs, also set to the height of the images and 100% width. The background of each of these divs are the individual images, each set to background-position: top center. This keeps them centered on the page, no matter how wide the browser is.

The Javascript

This requires jQuery, so be sure to include it.

1
2
3
4
5
6
7
8
9
10
11
12

var currentX = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
    if(currentX == '') currentX = e.pageX;
    var xdiff = e.pageX - currentX;
    currentX = e.pageX;
    $('.parallax div').each(function(i, el) {
        var movement = (i + 1) * (xdiff * movementConstant);
        var newX = $(el).position().left + movement;
        $(el).css('left', newX + 'px');
    });
});

In this implementation, we’re only changing the image based on the x position of the mouse, although I’ve seen implementations that use both the x and the y position. First, we need a global variable to store the last mouse position. Then we use an event handler to listen for mouse movement. This will compare the last position with the new position and get the difference. With that difference, we loop through each div, preform the movement calculation and apply it to that div.

Movement Calculation

var movement = (i + 1) * (xdiff * movementConstant);

This is were we really calculate the parallax effect. We loop through each div using the jQuery.each() function, which allows us to assign an iterative key (i) to each element (el). Because we’ll multiply the movement by each iterative key, each layer will move a different amount. The second layer will move twice as much as the first, the third will move three times, etc. If you want to bottom layer to remain stationary, you could change it to i * (xdiff * movementConstant). Becuase the interative key starts at zero, the bottom layer won’t move at all.

The amount the layers move is determined by the movementConstant variable. If it’s one, the bottom layer will move as much as the mouse does, the next layer twice as much, etc. This effect is way to much, so we toned it down, trying different numbers until we came to .015, which seemed to work perfectly for the effect we were looking for.

• Web Sockets – Advanced way for browsers to communicate with a web sockets server to send and receive data (supported only by newer browsers)
• Hidden iframe – use an iframe that references a file that never closes to which javascript snippets are written
• Short polling – ping the server every few seconds to see if there have been any changes
• Long polling – open a connection to the server and wait until there has been a change before ending the file, then starting again

Externally controlling a website

I had wanted to create a page in which a user could use a mobile device to control a sprite on another page. I believe that future Web Apps will use functionality like this, especially as mobile devices become more ubiquitous.  After some research (and false starts with Web Sockets) I decided to use the long polling method to accomplish this.  To do that, we’ll need to make the following:

• External Data – Storage accessible by both the controller and receiver
• Controller – A page that will send events to the external data storage
• Receiver – A page that will listen for changes to the external data storage

Before we get into the details, let’s actually see it in action. You’ll need to open the following links in two different browsers, windows, or devices. It’s especially impressive to open the controller in a mobile device and the receiver on a desktop browser.

• The Receiver
• The Controller

The receiver will have an image on it, and the controller with have a D-pad-like graphic. Click the d-pad up, down, left, or right and the graphic on the receiver should move. Very impressive, no? Let’s look into how this works. If you’d like, you can download the source code, which goes into more detail.

The External Data

You can use anything for this.  For simplicity we’ll just be using a flat text file called “move.txt”

The Controller

Let’s start with the easy part–sending directions to the external storage.  For simplicity, I’ve only included the relevant code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul class="control-pad">
    <li>
        <a class="up" data-direction="up" href="#"></a>
    </li>
    <li>
        <a class="down" data-direction="down" href="#"></a>
    </li>
    <li>
        <a class="left" data-direction="left" href="#"></a>
    </li>
    <li>
        <a class="right" data-direction="right" href="#"></a>
    </li>
</ul>

Here’s the javascript for controller.php. It uses jQuery, so be sure to include it.

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
    $('.control-pad a').on('click', function(e) {
        e.preventDefault();
        var dir = $(this).attr('data-direction');
        // Send direction
        $.ajax({
            url: 'controller-process.php',
            data: { 'direction' : dir }
        });
     });
});

Next, we need to create the controller-process.php file for the controller to call with AJAX.

// External data source
$filename = dirname(__FILE__).'/move.txt';
 
// Write direction to file
$fh = fopen($filename, 'w') or die('Cant open');
fwrite($fh, $_GET['direction']);
fclose($fh);

This is pretty simple–it writes the direction sent by the controller into the external data file. This will change the timestamp on the file, which will signal the monitor that we have a new command to process.

The Receiver

This is the central file for the project. It displays a sprite and provides javascript so that sprite can be controlled. It “listens” by doing an AJAX call to a script named move-monitor.php.

The only HTML needed in this file is just a div for the sprite itself.

1

<div class="sprite"></div>

Then there’s the javascript for moving the sprite around

1
2
3
4
5
6
7
8
9
10
11
12

function moveSprite(direction) {
    var step = 50;
    if(direction == 'left') {
        $('.sprite').css('left', '-=' + step);
    } else if(direction == 'up') {
        $('.sprite').css('top', '-=' + step);
    } else if(direction == 'right') {
        $('.sprite').css('left', '+=' + step);
    } else if(direction == 'down') {
        $('.sprite').css('top', '+=' + step);
    }
}

Now for the important part–the AJAX call to the move-montior.php script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var timestamp = null; 
function listener() {
    // Fetch info from monitor. This file will not completely download until it changes
    $.ajax({
        type: 'GET',
        url: 'move-monitor.php',
        data: { 'timestamp' : timestamp },
        dataType: 'JSON',
        async: true,
        cache: false,
        success: function(data) {
            moveSprite(data['direction']);
            timestamp = data['timestamp'];
            listener(); // Run listener again
        }
    });
}

Notice that this function get’s called again once the AJAX call is complete. We’ll come back to that later. Also notice that async is set to true and cache is set to false–that’s important.

And then the move-monitor.php script itself.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// External data file: can use any source, DB etc.
$filename = dirname(__FILE__).'/move.txt';
 
$lasttime = isset($_GET['timestamp']) ? $_GET['timestamp'] : '';
$currenttime = filemtime($filename);
 
// Loop until the files timestamp changes
while($currenttime <= $lasttime) {
    usleep(1000); // slow it down a bit
    clearstatcache();
    $currenttime = filemtime($filename);
}
 
// Send json to receiver
echo json_encode(array(
    'direction' => file_get_contents($filename),
    'timestamp' => $currenttime
));

This is the real meat of what we’re trying to do, so let me explain it more specifically. This file will loop until the timestamp on the data file is different than the timestamp sent by the controller. Because the file won’t be “finished” until this happens, the connection remains open until we get a new command to process. Once there’s a new command, the data is sent to the receiver and the process begins again.

That’s basically it. This is a surprisingly fun little script to play with and it seems to impress people, especially when you’re controlling the website with your mobile device.

From here the next step might be to implement a way to have multiple people access the same page without overwriting each others moves–maybe each person could control their own sprite? Be creative and have fun with it.

Icons

Currently, iOS icons come in four different sizes, depending on which device you’re using

• iPhone/iPod Touch - 57×57
• iPhone/iPod Touch (retina display) – 114×114
• iPad – 72×72
• iPad (retina display) – 144×144

You should specify all icon sizes in the <head> section of your html with code similar to the following.  Note that the rel= tag says “apple-touch-icon-precompsed”.  If you just put “apple-touch-icon” then iOS will automatically put a pretty shine graphic over the top of it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- iPhone -->
<link 
    rel="apple-touch-icon-precomposed" 
    sizes="57x57"
    href="apple-touch-icon.png" />
<!-- iPhone (Retina) -->
<link 
    rel="apple-touch-icon-precomposed"
    sizes="114x114"
    href="apple-touch-icon-114x114.png" />
<!-- iPad -->
<link 
    rel="apple-touch-icon-precomposed"
    sizes="72x72"
    href="apple-touch-icon-72x72.png" />
<!-- iPad (Retina) -->
<link 
    rel="apple-touch-icon-precomposed"
    sizes="144x144"
    href="apple-touch-icon-144x144.png" />

Startup Images

When your web app starts, iOS needs to load Safari and then access the web site. While it’s doing this, it will display a startup image if you’ve specified one.  You need to specify one for each type of device, as well as the horizontal configuration for iPad devices.  They have the following dimensions:

• iPhone/iPod Touch – 320×460
• iPhone/iPod Touch (retina) – 640×920
• iPad (vertical) -768×1004
• iPad (horizontal) – 748×1024
• iPad (retina – vertical) - 1536×2008
• iPad (retina – horizontal) - 1496×2048

The code to specify the startup images should also be put into your <head> section in your html. Notice that the standard iPhone one is last.  If you don’t put this one last, the startup image won’t work on older iPhones.

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

<!-- iPad (Retina, portrait) -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
    href="apple-touch-startup-image-1536x2008.png" />
<!-- iPad (Retina, landscape) -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
    href="apple-touch-startup-image-1496x2048.png" />
<!-- iPad (portrait) -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 768px) and (orientation: portrait)"
    href="apple-touch-startup-image-768x1004.png" />
<!-- iPad (landscape) -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 768px) and (orientation: landscape)"
    href="apple-touch-startup-image-748x1024.png" />
<!-- iPhone (Retina) -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"
    href="apple-touch-startup-image-640x920.png" />
<!-- iPhone IMPORTANT: Make sure this one is last -->
<link 
    rel="apple-touch-startup-image"
    media="(device-width: 320px)"
    href="apple-touch-startup-image-320x460.png" />

While working on these and testing them, be sure to remember to refresh the web page when you make changes.  If you’ve already added the web app icon to the home screen, you’ll need to delete it and add it again if you make changes to the startup images or icons.

In the land of social media, a new wave is rolling through this weekend as Facebook is moving all fan/group/business pages to the new Timeline layout. The more you understand about the new features and capabilities, the stronger your brand and strategy can be!

While we thoroughly enjoyed the FB sponsored tour of the new layout, here are a few things that we at Eli Kirk are keeping in mind as we manage our clients’ social media:

1.  Shout it from the Rooftops (or from the coverphoto)

The new coverphoto is awesome because it allows you to communicate key messages to your target audience with high level visibility.  It is also a great opportunity to build the brand of your company.  Get creative with your approach and be strategic with your message.  Here are a few fun examples we enjoy:

- Craft your message like this one:

- We love the use of color and the feeling of elegance on Tiffany & Co’s FB:

- BYU Idaho held a cover photo contest to determine what their main image would be, a great way to engage your audience and have them invest in your brand.

- For those brands that can get away with a little extra humor, be creative with how treat the space!  http://imgur.com/mnO58

The new layout doesn’t allow you to default to a landing page or a specific tab (a feature we will miss dearly).  And as they say, it’s all about “location, location, location.”  But with the new layout, what was previously known as tabs will now show up directly under the coverphoto.  However, only 2 of the additional pages will show at any given time (photos and location are required to show).  The rest can be seen by clicking the arrow.  So, be smart about what you are showing.

On the secondary pages, you can build in functionality for users to “like” the page prior to viewing the content.  That’s where your crazy cool creative apps should live along with special offers or “insider” content.

We liked:

-   Banana Republic has a special campaign for families in the military.

 3.  Drive Traffic

While we continue to mourn the ability to default to specific tabs, you can drive traffic to your secondary pages through outside campaigns and even through FB ads.

Simply use the URL of the secondary page as you would a landing page and embed that in your campaign materials.  You win because you can both increase your number of likes and focus on a directed message.

-   Gucci does a great job of driving traffic based on interest and it links out to their website.

Use the new timeline features to “repin” posts to the top of the page (hover over the right hand side and click on the pencil).  You can also “highlight” posts by clicking the star at the right hand corner and the post will span the page.  Be strategic and you can use your timeline to tell the story of your brand over time or by milestone and accomplishment (you can change/adjust dates on posts accordingly).

Brand a unique iframe for your FB page to live within.  Use badges, recommendations and other of the advanced functionality to make Facebook truly work for you.  Audi is skilled at not only owning their brand on FB, but also driving traffic and keeping the conversation going… all with an Audi branded theme:

If you are still reading at this point, then you must love social media as much as we do!  We’ve  asked around… why the move to Timeline?  Besides the common comment of “you get what you pay for and we aren’t paying for this…,” we’ve also heard that the Timeline layout makes it easier for users to find content relative to date.  It allows you to sort and highlight items quickly.  As a company, it also gives you prime real estate for branding and messaging, something the old layout was lacking.  Jury is still out for us, but we do like that they are changing up the game because it gives us new challenges and room for innovation!  Enjoy the move this weekend and message us your creative solutions!

If you need help with your coverphoto or developing a succint strategy for social media, call us!  We would love to brainstorm how we can help leverage your resources or manage it for you, so that you start to OWN Facebook for your company.

emily@elikirk.com, 801.377.9321 x.219

First of all, what exactly is spam and how does it work? Unless you’re new to the Internet, you’re probably familiar with the basics of what spam is. How does it end up on your WordPress site, though?

In some rare instances, spam originates from individuals surfing the web and looking for sites that have sections for comments. When they find one, they fill out the information, answer the Captcha question if there is one, and then post their garbage comment. This is one of the hardest forms of spam to fight because it is done by an actual person who has logic, reasoning, and creativity. A person can easily bypass anti-spam measures, such as Captchas.

Most often, however, spamming is done by bots. Bots are scripted programs that are written with the intent of carrying out some function using an automated process. Bots are not all nefarious; some are used for security purposes. Spam bots are programmed to do the same thing as the human in the above scenario—cruise the internet looking for comment forms to fill out and then leave their garbage message—but since the bot is a program, it can do this at a much, much faster rate without the need for a bathroom break or food.

Part of the headache with anti-spam is that as the security measures get better or more elaborate, the people who write these programs develop more complex bots to get around the new security. When it is discovered that they can circumvent security, better security is put in place. When the bots encounter better security, their programmers make adjustments to get around that security…I think you get the idea. It is an endless loop that we have been in for years.

So what can you do? Luckily, there are ways of protecting your WordPress site that don’t involve a Masters Degree in Computer Science to keep the bots at bay.

A few weeks ago, I wrote about some of the plugins that I, as a web developer, really enjoy for WordPress. There was one plugin that I left off of the list on purpose. It was not a reflection of the plugin itself, but I had thought about this current topic as a follow-up and thought it more apropos here.

Akismet is an anti-spam plugin that comes pre-installed with WordPress. In a nutshell, when a user comes to your site and fills out a comment form, the Akismet plugin takes the information supplied by the user and their Internet Service Provider (ISP) and checks that data against a spam database. If the user’s information has been flagged as spam, the plugin moves the comment to your spam folder automatically.

While this is some pretty nice functionality, it is not entirely necessary for the small business owner, and it is not fail proof. In truth, no method of deterring spammed comments is fail proof, but a combination of things and knowing what to look for when something does make it through can help. Where Akismet shines is the automated, hands-off approach. All a site owner needs to do is obtain a valid license (info at their site), make sure the plugin is activated, and Aksimet does the rest.

Another alternative or backup is a plugin that adds Captchas to your comments section. There are many out there, so I won’t get into specific plugins, but if you would like to go that route, look for something that uses question-and-answer based security. Surprisingly enough, many bots are smart enough to pull an image, “read” the letters or numbers inside of it, and then answer the Captcha correctly, but many are still stumped by basic math problems or riddles with obvious answers like “What color was George Washington’s white horse?” On a side note, this can also act as a security gate against comment authors who don’t have the ability to respond intelligently.

“But Chris,” you may be saying to yourself, “What if I want more control over my comment moderation? What if I use Akismet and a captcha, and spam still makes it through?” Excellent questions! I’m very glad you asked, because I have a response.

WordPress itself actually has some fairly decent spam protection built in. Inside the Dashboard, if you go to “Settings > Discussion” (click the thumbnail on the left for a screenshot), WordPress provides a number of options for getting rid of spam. Not all of the settings in this section are anti-spam, but let’s go through them quickly:

“Default article settings:” This section contains three options. The first notifies other blog users if you link to their site in your own blog post. The second allows other blogs to send you a notification when someone has linked to your site. Neither of these have much to do with spam, but typically its handy to enable both. The third allows people to comment on your blog posts inside your own site. This (and all of the settings in this section) can be turned on and off for individual blog posts.

“Other comment settings:” The options here are fairly self-explanatory, but see the picture above for my recommendations on how to set these for the average blog. Most blogs want site viewers to be able to leave a comment without having to be actual site members, but requiring a name and e-mail helps to weed out some spam, because offenders can be traced more easily.

“E-mail me whenever:” These settings send an e-mail to the addresses specified for the Administrator (“Settings > General”) and the blog author, when someone posts a comment or when a comment is ready to be moderated. To moderate a comment, go to the “Comments” section of the dashboard and mark the comments there as “Approved,” “Spam,” or “Trash.”

The next few sections are specifically used for anti-spam measurements, so we’ll talk about them in a little more detail.

“Before a comment appears:” If you check the top option, “An administrator must always approve the comment,” you don’t need to check the bottom option, “Comment author must have a previously approved comment.” If the box is checked that the comment should always be approved, it will always need approval regardless of whether the comment author has a previously approved comment or not. The advantage to only checking the bottom box is that you only have to approve a comment from a legitimate source once, then WordPress remembers that person’s credentials (provided they use the same name and e-mail address) and will automatically approve any comments from that person in the future. This can get tricky with modern spamming techniques, but we’ll talk about how to spot spammed comments in a minute.

“Comment Moderation:” One common reason for spam is that the offender is trying to post links to your blog. For them, it is free advertising, and provides trackback links that boost their ranks in search engines. It is the epitome of spam. Using the Comment Moderation settings, you can automatically flag a comment that contains even one link by putting a number in the box. If you have either setting in the last section, “Before a comment appears” checked, however, you don’t need to mess with this. If you would like to set it up, it is easy to use: if you want a comment flagged with just one link, put a “1″ in the box. If you think you can tolerate one, but two links are too many, put a “2,” and so on. Sometimes, however, the link is hidden in the username or e-mail, which leads us to the next section.

“When a comment contains any of these words in its content, name, URL, e-mail, or IP, it will be held in the moderation queue.” Again, if you have already specified that all comments require moderation, you don’t need this section. Otherwise, you can flag a comment for moderation if it contains text that matches anything in a list you put in this box. The IP, however, is a numerical value, so you can specify IPs using exact values or wildcards to be subject to moderation.

For an example of the first use, if I put the word “cheap” into this box, anytime a comment comes up with that word in it, it is automatically suspended for moderation. This is nice if you are worried about comments from legitimate sources getting trashed on accident. If a spammer comes along and comments about “cheap little blue pills,” the comment is flagged for moderation. Likewise, if a comment is made saying “I think the local government is cheap when it comes to education,” this might be a legitimate source so you don’t want to automatically banish it, which we’ll talk about in the next section. Instead, it just flags the comment for moderation. The second use is handy if you go to the Comments section of your blog and notice that a lot of garbage comments are coming from a specific IP address. IP Addresses are listed in the Comments Moderation panel on each comment. To ban by IP, you would copy the IP address into the text box, the same as a word. If you’re not entirely certain what that means, avoid blocking by IP and use content (word) flags instead.

“Comment Blacklist:” By putting a list of words in this box, you tell your WordPress site that if a comment comes in containing certain words, it should automatically be marked as spam. You don’t care what the source is, you don’t want comments containing those words or terms on your site. “Naughty words” are perfect candidates for this list. It might make you feel dirty coming up with a list of these phrases on your own, but if you moderate all of your comments, it doesn’t take very long to figure out what words to flag.

Towards the bottom of this section is the “Avatars” category, which has nothing to do with spam, so we’ll skip it (see the official WordPress Avatar Help page for more information on those).

Great, you have your settings configured and you’re ready to repel the worst of spammers. You write intriguing blog posts like this one, search engines begin indexing your site. As the search engines make your site searchable, spam comments begin rolling in. Some comments getting past security might not look like spam right off. How do you tell the difference between the spam and the legitimate comments?

This is something that has become more and more difficult as spammers have written more sophisticated bots. Some are easy to spot by their name, e-mail address, or their over 150 links to “cheap appliances” (yes, this is a real-world example from our own site, I counted them). Others, however, use generic compliments to gain your trust. “This is exactly the information I was searching for!” “You are so right and you use your words so well!” “I will come back to your site for more information most certainly!” Others have information like “Tips for Success,” which sound intelligent but have nothing to do with post they are commenting on.

So why would spammers leave these seemingly innocuous comments?

Let’s go back to the box in our settings that said, “Comment author must have a previously approved comment.” By giving a compliment or otherwise gaining the site owner’s trust and getting their comment approved, they are free to go back and post their spam on your site. While I don’t advocate un-checking this box and moderating all comments, it is typically enough to watch for red flags before approving the comment in the first place. If the English used sounds like it was run through Google translate first (which it probably was), if it reads like a random bunch of English sentences that are unrelated to each other, or if the comment as a whole has nothing to do with the blog post, those are major flags. Some will even copy data out of your blog post into their comment to make you think its related, but if you read through the sentences created, 99.9 percent of the time it still doesn’t make sense. In the end, if you still aren’t sure, either copy and paste the e-mail address provided in the comment into a Google search to see if it has been flagged as a spam address, or simply don’t approve it. It is better to be safe than sorry.

As the average user might gather from this article, blocking spam is sometimes complicated and requires a little knowledge of what to watch for. Akismet and similar plugins can help remove a lot of the headache. Captchas are also sometimes useful, although more complicated bots have been programmed to bypass those as well. Even with security plugins, it is good to have a backup in place like comment moderation, should anything manage to slip through.

Description

The project manager will help guide and develop company culture relative to increasing the efficiency
and profitability of all projects. He or she will:
1. Develop and refine project management processes and lead their implementation across the agency;
2. Directly manage Web development and other technical projects;
3. Oversee a small team of account/project managers;
4. Be the assigned account manager for Web design and development clients;
5. Perform other account management responsibilities as assigned;
6. Oversee quality assurance testing for all Web projects; and
7. Fulfill other duties as assigned.

Qualifications

The ideal candidate will have:
1. At least 4 years of dedicated project management experience;
2. A professional certificate or academic degree/emphasis in project management or a related field;
3. Demonstrated success in managing people and client relationships;
4. Demonstrated mastery of project management processes and techniques;
5. Mastery of project management software solutions, such as Basecamp; and
6. Successful experience in managing Web development projects.

Compensation

Compensation will be negotiated commensurate with experience. Health insurance, including HSA, will be
available following one full calendar month of employment. No relocation package is offered with this position.

Application

Submit a resume and cover letter to Bill Brady at bill@elikirk.com. Employment and character references
should also be included. Please direct all inquiries about the position to Bill Brady at 801-377-9321 x207.