Blog « Chicago’s Best Web Design and Development Firm

The Home Stretch

Friday, October 29, 2010

After almost a year in development we are finally beta testing the next version of 2old2play based on the Drupal platform. I must say it has been a long road but ultimately it will be worth it to bring better content, fast, and with more variety then every before. Our choice to go open source and build on Drupal was directly relate to our need to stay flexible and move with the trends of media and the web. Drupal will allow us not only improve on our already fantastic online community content, but also open more doors to better advertisements, features, and user interaction then ever before.

Lets just hope this final stage is handle quickly and bring 2old2play to a higher standard then it already is. For those of you looking to advertise on our new system and want to connect with over 20,000 members and 40,000 views please make sure to hit up the contact us page for more information. See you all on Version 3 of 2old2play very soon.

0

Heavy Work On 2old2play

Thursday, February 12, 2009

So we are finally going to do a major overhaul to the 2old2play community website. It has been a while and after years of hacking and adding to an old and archaic system we figured it was time to move all the content over to the next generation of Content Management Systems. Like a lot of projects we work on with clients, we found Drupal to be the easiest method in creating a better overall CMS for the site. This is not to say that we do not use other CMS’s for projects. Word Press is still the best method in a fast deployment of smaller “blog type” web sites. It works well for clients who just want to get something out there in order to have a web presence. There are also ways to extend it even further if you wish to grow and scale the CMS, but when mass amounts of different content come into play, Drupal is still the king.

Try Drupal 6

This will be our first step into the world of Drupal 6. With the completion of mods like CCK and Views, Drupal 6 looks to finally be a viable option for creating a complete dynamic web site. With Drupal 7 right around the corner we figure the late and great Drupal 5 is finally coming to a close. The new security measures, better, API, and easier admin area should be enough now to get anyone to switch. The only road blocks with Drupal 6 seem to be the module hold outs from developers who have still yet to commit to Drupal 6. This mostly comes into play when you look at the field addons for CCK. For us, this is an acceptable loss for the future of our community. As time moves on, mods will no doubt come back inline with 6 and we will be ready to implement them.

A Community Focused Design

I have always liked the current design of 2old2play in terms of its look. The only issue I have with the design is how it functions for the end user. It’s a bit convoluted and hard to understand for even the longest of members. A lot of this happened as the site grew and we continued to ad new features. Things got moved and pushed around until a lot of the navigation ceased to make sense. Old and useless features still remain a part of the navigation and new features take far to long to find in order for them the be useful. The biggest issue, however, is how little our homepage really reflects the site and its’ members. If anything, 2old2play is about the Clans that it hosts and the members of those clans. Our homepage doesn’t do enough to inform new comers of what 2old2play is about. It also means that when new people sign up, they have a lot of trouble deciding where to begin. Do they blog? Do they search for a clan? How do they do these things? The main focus on the new design will be to show new members a clear and easy path on how to really become a part of 2o2p.

The Beginning

Currently we are working on moving the unbelievable amount of content off of 2old2play and into the new mock version. Along the way we are going to be cutting out features and content that we deem obsolete to reduce the over all mess that 5 years of gaming can bring. I’m hoping to keep up some posts over here and on 2old2play to feature our progress as we move forward and solve the problem of moving old content into a new CMS. I’m sure issues are going to arise and if these blogs can help others in the Dev world then that will just be an added bonus. Until next time.

0

It’s Been a Long Time

Wednesday, November 5, 2008

It has been a long time since the last post here on Media Crumb. Seems like the hardest thing to do as a designer or developer is finding time for your own site. The catch is that this is often a great way to communicate with past clients and potential clients who first visit the site. Unfortunately both Derek and I have been really busy with not only client work, but constantly working on updating the long list of site we currently run. I suppose the upshot to this is learning what it takes to run a successful web application, site, or business.

Finding Common Ground with Clients

The biggest change I have experienced with this current work load is learning what the client goes through after we hand the site over to them. Before Media Crumb began creating its own web presence around the net, we were used to simply testing a project, handing it over, and then moving on to the next client. By working on our own sites hours a day, 7 days a week, it is easy to see how building a perfect site the first time around can lead to a less stressful path in the future. That is not to say that trouble won’t arise from projects. There will always be updates, security holes that need patching, and just the general scaling that sites need to go through in order to sustain growth. It does however allow us the ability to see where some of those areas might become a bit easier if planned out in the early stages of the sites development.

Case Study

Currently Media Crumb is working on an update of our older gamers site www.2old2play.com and while the site needs to grow, we are having to jump through a lot more hoops then we needed to. This is a combination of a lot of things including the fact that we just didn’t know the site was going to grow to the size it has. With that in mind, now have to take steps to insure that all data is safeguarded and carried over to our new back end without indecent. Being that the site carries 5 years of information from thousands of people, this is no easy task. Had I known then what I know now (famous web dev words) I would have chose a different platform all together. The trick is to pick the best emerging technology you can and run with it. Jumping on the tail end of tech is a sure fire way to create more issues in the future. It is a developers job to stay ahead of the curve for the sake of not only their clients, but for themselves as well. Needless to say, the majority of our new sites are all create with the latest understanding of web development with the future in mind. As they say, anything worth doing is worth doing right.

The Future

Hopefully we will be able to get through all these updates and client work to find a little time to write a bit more on the Media Crumb homepage. I also know that we are in desperate need of a new redesign as this one was put up in a rushed attempt to create a presence on the web. There is a post in there somewhere about why rushing something is almost certainly a way to fail at it, but I’ll leave that for another day. In any case I hope Derek and I have a chance to talk a bit more about our experience with client and personal work a bit more, but for now I’ll just leave you to your comments. Thanks

J

Comments Off

Ajax: Unlocking The Code

Wednesday, August 15, 2007

Ajax- Son of Telamon and Periboea and king of Salamis Asynchronous Javascript and XML is a combination of technologies all under the umbrella of ajax. Like an all powerful god of cleaning, Ajax wills scrub your site of ugly user interface issues. Okay, enough with the lameness…

When you’re ready to sit down and implement an async javascript call you’re going to ask yourself “where do I start?” Well, everyone has a different answer and, really, it depends on how serious you are into knowing the right answers. You can copy and paste a standard ajax code block and be on your way in minutes (if you know javascript).

For instance…

You can read up on everything you’ll ever need to know about AJAX or break open an editor and start coding. I prefer the second method, while working my understanding after practicing it’s implementation (but I often think backwards).

Let’s dump some code on ya:

status = true;

if( window.XMLHttpRequest ) {

	httpRequest = new XMLHttpRequest();

} else if(window.ActiveXObject){

	httpRequest = new ActiveXObject("Microsoft.XMLHTTP");} else {status	=	false;}

This block of code initializes the asyncronous javascript procedures by asking your browser for the ‘object’ that is best suited for transporting data. If your browser can create an XMLHttpRequest object, than it is not running Internet Explorer-that filters out the one from the many.

The XMLHttpRequest object is the single most important part of the process because it holds the code to sending http requests to a remote host inside of a javascript. If you’re running in InternetExplorer you’ll hit the second logical block which asks about ActiveXObject.

Using either object type, you’ll be granted the same defined interface. Why didn’t they standardize? Who knows, why didn’t they standardize how they all work with CSS? It’s a mystery.

This block of code will be seen in almost every (working) implementation of an Ajax procedure. Without the ability to send asynchronous message you’ve lost the “a” in ajax, right?

Now, from here we’ll move to the next logical block of code:

if( status ) {

	httpRequest.onreadystatechange = function() {

	if( httpRequest.readyState == 4 ){ // 4 = LOADED AND READY!

		if (httpRequest.status == 200) {

 			// Do Stuff

}	// end function()

Alright, if the status is true than we found our async object and can move on to readying it for goodness. This is where we’ll fill in our onreadychange function callback. Stop. What? What’s a function callback?

You will hand the async object httpRequest a function to call when it has successfully received data back from the remote host. Remember, async actions happen ‘while’ other things are happening. That means, when you leave this javascript function there is a high degree of probability the request you’ll be sending to the remote host is still pending.

When the process of connecting to the remote host and requesting data is completed your function is called back to action. When you are called back the httpRequest object sets its ‘readystate’ and ‘status’ from the prior http query, these are important because you only want to react to a successful result, right?

If you want to read more on readystate please checkout devguru. Otherwise, we continue. A readystate of 4 means the request was “COMPLETED” but we’re not sure if it was successful or not. That’s where the ‘status’ member comes into play! If the status is 200 this stands for “200 OK” status code from the hypertext transport protocol specification (aka http specification). Similar to code 404 which is for “page not found.”

Once you’ve received a readystate of 4 and a status of 200 you know you’re ready to proceed with modifying any data you want. This is where we state // Do Stuff

What stuff? That’s up to you! Typically, you query to a remote host to grab a portion of some HTML to stuff into a division. We’ll cover that later because what you do, at this point, is secondary to getting the request completed.

Now we setup the actual query… we do this second because all we’ve defined, so far, is the callback to what function to execute once the query is complete. So here is the query code:

var url = "/testme.php?ajax=true&username=joe";httpRequest.open( 'GET', url, true );httpRequest.send( null );

Too easy? Let’s break it down, first we have the variable url, this URL is the one we’re going to fetch asynchronously. Please note: the page must be on the same domain as the page calling the javascript. This is important because trying to access a different site in your javascript is a breach of security and IE or FireFox’s error console will tell you as such (or things just won’t work). Accessing another site from the current sites content is a great way to obtain viruses and other bad cross-site scripting issues so it’s not allowed.

So, once you’ve formulated your URL (you can use form data if you need to send a dynamic request) you can send your GET request (or POST request if you change the first argument to open()) and expect some results! The open() method to your httpRequest object takes up to five parameters, we’re only using three (the last two are username and password). The first is the type of request, usually ‘GET’ while the second is the URL and the third being ‘true’ meaning “we want to do this asyncronously otherwise you’re not really doing the ‘a’ in ajax again.

The send() method of httpRequest will send out your GET request async to the remote host. It can take one parameter but you’ll usually always use null. Just accept that as truth until you really need to delve into the guts of the async object.

That’s it!?

Now you know how to asyncronously send url requests to your server to gather new data. You’ve got a lot of power at your disposal now, to do with as you please. The trick is in the details and this is why PHP and web developers get paid the big bucks… you can send ajax queries all day but if your backend server doesn’t understand what you’re asking for, it will do you no good.

You can do one of two things: write your own php parser to a specific GET or POST request, or try using an ajax framework. I’ve never used a framework so I can’t help you there, but non-developers may need to go that route.

So, what ‘stuff’ do you do when you receive a successful async request? You can use it for form validation ‘on the fly’ for registration pages, that’s one case. Where the user starts typing in a username and you’re asyncronously checking the database to see if the username is taken and responding with a simple message.

For instance, you may write a query that asks if a username is taken by sending a GET url like “/usercheck.php?user=admin” which is composed like:

var userfield = 	document.getElementById('username');

var url = "/usercheck.php?user=" + userfield.value;

In this example we target a theoretical input field with an ID of username and hand its value off to the URL (userfield.value should be equal to whatever the user has typed into the ‘username’ input field on a form). You could then write a php process (inside of usercheck.php) which takes the username passed and checks for its existance in your database. That code is beyond the scope of this article.

Your usercheck.php script could simply return “yes” or “no” in regards to the users existance! Where is the response from our request? It’s hidden in the httpRequest object upon returning from the query and calling our onreadystate callback!

if (httpRequest.status == 200) {

	// Do Stuff

	if( httpRequest.responseText == "yes" ) {

 		// username exists!

	} else {

		// username is free to use

The responseText holds whatever your php script sent back in response to the async query. It could also be a full block of HTML to insert into a website, similar to how digg.com works or how the poll on simplyfired.com works (I know that, because I wrote the poll on that site from scratch).

Let us say you wanted wanted to update a division tag with new content from the results of a async javascript http request. The output from our theoretical php script is:

<span id=’message’>Hello, I think you’re cool</span>

Useless text, I know, but fits well into our example. Now let’s say the page that has already been rendered to the user and their browser is:

<div class=”helloMsg”><span id=’message’>Your message goes here</span></div>

We’ve readied the division for our dynamic message change. Our goal, to change everything between the division tags with the async results shown above. In between our check for status code 200 (where I commented //do stuff) we can place:

if( httpRequest.readyState == 4 ){ // 4 = LOADED AND READY!	if (httpRequest.status == 200) { 		document.getElementById( 'helloMsg' ).innerHTML = httpRequest.responseText;	}}

And that line does it all! It finds the element listed by id ‘helloMsg’ which happens to be our division and changes all the code inside the tag (hence, ‘innerHTML’) with the response from the server. After this operation the user will see, right before their eyes, a change in the content on the website.

Amazing? To the user it is! Instead of a span tag you could have injected an image, or a change in ‘vote’ count (in the case of digg.com) or the poll results in the case of simplyfired.com. And, if you’re not sure how the magic works, the beauty of javascript is it’s public to all! You can see my javascript on simply fired by open ing poll.js right on their site. The magic unfolds before thine eyes!

These are just a few examples to how you can utilize Ajax for cool effects. Just remember, you should really use ajax for cool neat-o features, eyecandy and administrative functionality. Don’t go ajaxifying your entire site (yeah, I just made a new verb) just because you now have knowledge you’ve never had before.

Use it sparingly and where appropriate. If you’re still confused on how it works, you can find a site that uses ajax and ‘view source’ and start poking around their javascript files looking for an httpRequest object and see what they did to make the magic happen.

0

Asynchronous Javascript And XML (AJAX)

Tuesday, August 14, 2007

AJAX Buzzwords drive industries and the Internet and web development is no different. If you can ‘talk the talk’ you’re going to look like a highly intellectual developer or web designer… but in the end, can you actually develop a well crafted website?

Just because you toss around the words “ajax” “soap” and “web 2.0” doesn’t mean you know how to develop a website or have any experience with the “user experience.” What a site needs is an experienced team of engineers that know when ajax is needed and how to implement a website that’s clean, clear and easy to use.

Ajax is a programming method of developing asynchronous javascript calls using an XML/HTML transport. If that explanation doesn’t make sense to you, you really don’t have any right to be tossing around the ajax keywords unless you’re trying to impress your friends.

If you’re still reading, perhaps you really want to know a bit about async javascript and aren’t just trying to learn the keywords to be ‘web 2.0′ enabled.

First, let’s look at a list of pro’s and con’s to async java.

Pros

Fast rendering: You can request small portions of XML/HTML data.
High Tech: People think you and your site is highly technical if it can provide ‘ajax features.’
Asynchronous: You can access your site’s database behind the scenes without the user having to reload a page.
Javascript based: Most browsers have javascript enabled now, so you don’t have to worry about losing a huge audience for using ‘bleeding edge technology’

Cons

Overuse: There is such thing as overdoing a good thing.
Lack of understanding: One that doesn’t understand the technology will ultimately fail to utilize it correctly.
Navigational nightmares: Using ajax where it doesn’t belong may confuse the user because it doesn’t update page history.
SEO: Search Engines can’t optimize for ajax, if they cannot crawl your site normally than you’re out of luck.

Let us tackle the bad things first, because this will be the first barrier to actually developing an async java solution. The first problem is using ajax just because you have found a good tutorial on what it does. Ajax is typically a solution looking for a problem and this is the downfall. If your site is running fine, ask yourself what will asynchronous javascript solutions do for you?

Next, the lack of understanding. Many web developers and designers want to use ajax because it can solve a critical problem, but they just don’t know how to implement it correctly (or at all). In order to write a proper async java solution you’ve got to understand three things: how HTML/XML works, how to write simple javascript and how to formulate output using PHP or some back-end dynamic page language (C#, ASP, etc.)

Ajax can only solve a problem if you’re knowledgeable enough to handle the situation. If you don’t know javascript or a back-end programming language like PHP you probably want to start there before moving to advanced techniques.

Lastly, remember that ajax will confuse almost every user that hits your site if you use it in excess or in areas of navigation. For instance, let’s assume you have a sidebar with three links: “products”, “about us”, “contact us” and you want to provide the user the ultimate user experience. Technically, the fastest way would be to fire off an async java GET request to your website to get only the products page and ‘inject’ it into the main division of your website without reloading the screen.

Genious!

Now, the user clicks “products” and, instantly, they are presented with a product list! That’s the beauty of ajax, now you’ve managed to get the user quickly to the products without having to reload a bulky page of graphics or change the state of the user’s experience, right?

Wrong. Ultimately, the user is going to use their natural instinct to navigate a website: the browser buttons. In our prior example the user was presented with the “products” page instantly, but before this they may have been on the “about us” page. Instinctively they click the ‘back’ button and… leave your site… huh? Yes, they’re gone. Poof.

How? Huh?

The scenario that played out before your eyes:

The user found your website and landed on the ‘about us’ page off a google search hit.
The user liked what you were about and clicked on your products page and it arrived instantly.
The user clicked ‘back’ because they thought they’d go back to the ‘about us’ page, but didn’t realize that ajax injected the products output instantly–their history doens’t show a click to the products page because the browser didn’t load a products page, javascript did.

The end result? As statistics show, you never want to lose a user from your site because they’re an impatient lot and probably won’t come back. They’ve clicked the back button and are now sitting on google search results where nine other competitors pages are listed. Good job, you lost them and the chances are they won’t return.

Lesson here? Ajax is useful in small doses but fails to provide a great user experience if it alters the way they think a site will run. Had you used ajax to render a product image on a mouse-over event but actually navigated to the products page in a standard way you could have enhanced their experience, not changed it.

Considering your users were confused in their navigational needs, imagine how a mindless web crawler is going to react? To react to a user click with javascript you’ll probably be capturing an ‘onclick’ event to fire off an async javascript request. How is googlebot going to do this? They’re going to look at your anchor tag and crawl the href that the crawler sees… not load up a javascript execution engine and start hitting ‘onclick’ events just to see what happens. You could potentially lose you web crawlers in a mindless confusion of where to go next. Don’t let this happen to you. SEO is important for a sites organic search hits (free marketing).

Now that I’ve convinced you that ajax is bad, let’s look at some of the cooler techniques. Async javascript may work exceptionally for a ‘configuration’ tool or for administrative screens for a complex website. Administrators are not ‘common users’ that hit your site on an hourly/daily/minutely basis: they exist to configure, monitor and react to situations.

Ajax can help administrators obtain the data they want quickly such as rendering a log on the screen or doing ‘real time’ logging where an ajax query executes every three seconds to updates the log output so the admin doesn’t have to click reload or do a full automatic page reload (which may take time or bring them to the ‘main’ page of a module). Updating a site every three seconds for your typical user would be a nightmare on your database during flash crowds, so we save this behavior for one or two administrative folks.

You can also use this asyncronous behavior for small portions of a website that don’t change the users expected behavior, ruin navigation or break SEO. A great example of using ajax in moderation is digg.com. When the user “diggs” a story it updates the ‘votes’ on the story seemingly instantantly! This doesn’t effect your history, nobody needs to go ‘back’ to see what the site looked like before they voted! Digg also uses ajax for the comment section of a story, as does gamestooge.com for the comments and voting poll.

Polls are great examples of ajax working its magic in a great way. Nobody expects to go ‘back’ in their browser after voting on a poll. Social networks are also finding their niche with ajax execution, jaiku and pownce use it to update your mini-blog posts on their user interface. You’re entering data into a form and clicking back in your browser won’t drastically impact the result, especially since users expect form posting to work differently than standard browsing.

Using a small portion of ajax where apropriate makes your site look a little more ‘high tech’ and ‘web 2.0′ with all the buzzwords that surround it. However, don’t use ajax or build your site around it when there are better ways to work the solution. Creating a great user experience far outweighs the need to use features that are not sensible for your problem.

Because ajax can request a small portion of a website you can quickly update portions of your site dynamically without a full page load and re-fetching of uncached portions of the site, in some cases that means your style sheets, images and any javascript.

Stay tuned for more on the technical details behind implementing a simple ajax solution with javascript code and some PHP back-end implementation.

Blog

The Home Stretch

Heavy Work On 2old2play

It’s Been a Long Time

Ajax: Unlocking The Code

Asynchronous Javascript And XML (AJAX)

Categories