The Idea:

To create a web presence that is consistent and relays the idea of “conservative values” to their target audience. The web presence must be adaptable and have the ability to create subblogs and committee groups within the organization’s website.

Web presence must have featured articles and rich media to communicate with audience for radios and video broadcasts.

The solution:

Customized WordPress theme and logo modified to match patriotic branding, WordPress MU plugins installed and further developed for paid member dues, mutli-blog posting, and more.

Seller Buzz is for Online Sellers just starting out in the world of eCommerce. Seller Buzz is also for the Casual Seller looking take their online presence to the next level in the eCommerce Market Place.

The Idea:

The create a full-scale web presence with news, articles, shopping cart system, and branding.

The solution:

Logo creation, customized WordPress theme, customized shopping cart and various jQuery effects implemented.

What is Google AJAX API?

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript.

In human terms, it loads common JavaScript frameworks such as MooTools, jQuery, Prototype, jQuery UI and of course even Google Maps without having to have the (.js) files on your server.

That’s great, but what does that mean for me?

Bandwidth, bandwidth, bandwidth, cache headers, and bandwidth.

Because jQuery, like images, must be downloaded onto the users computer before it can be used. If you have a slow server this can be a painful process especially if you use multiple JavaScript libraries.

Google is lightning fast, always. To have one, maybe two less items to download from your server not only saves bandwidth, but it saves you time. You don’t have to go to jQuery and download the latest version, upload it to your server, and type in the path to the (.js) file. You also don’t have to worry about having relative or absolute URLs due because of pretty URLs (seo friendly URLs).

You just add a two lines of code to the head of your template, sometimes even one, and you’re done. Google automatically sends a request to their server to download all of the JavaScript you’re requesting, cache the headers, and return it back to you.

Even better yet, the code is cleaner. You only need one line of code to load in multiple JavaScript libraries instead of your usual 3-5 lines of code.

Enough already, just show me how

Glad you asked. Below is the example XHTML page used to load in jQuery and execute a test function to ensure that it works.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">$(document).ready(function(){$(".expanded").hide();$("a").click(function(){$(".expanded").fadeIn(600);});})</script>
 
<p class="expanded">Who uses paragraphs anymore?</p>
 
<a href="#">Expand!?</a>

Now, we’ve loaded in jQuery and are able to get cracking away. However, what if we want to add more than one library? Simple. All we do is add another instance of google.load();. Below is an example with both jQuery and jQuery UI.

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>

Want to use the latest version of jQuery so you never have to update the code to match the latest version? No problem use this instead.

<script type="text/javascript">google.load("jquery", "1.3");</script>

What this says is: “Find the latest stable release that starts with 1.3.x”. In our case it automatically found v1.3.2.

Pretty nifty eh? What’s even better is that jQuery THEMSELVES are using Google’s server to call their own JavaScript library. If you view the source code of http://www.jquery.com/ you’ll see on Line 9 the following code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

This is also another way of calling jQuery from Google’s servers.

That’s it! Enjoy one less heavy server request.

The template is tailored towards a company providing a service such as hosting. The logo is raw text inside of an H1 tag and can be changed. The layout uses a fixed width of 950px, but the design can be adapted to any fixed width size. It was created to be fluid, however, the coda slider doesn’t support a CSS width percentage.

The theme comes with 2 HTML files

• index.html
• examples.html

The index.html is the screenshot you see above, while examples.html has numerous predefined styles showcased. The predefined styles range from alerts, dialogs, lists, and emphasis blocks.

Other features:

• To navigation list items have example background (aka, perfect rounded corners no matter how big)
• Rounded outer container (adjusts to users width preference)
• Text-based logo and slogan
• jQuery Coda Slider (click Solution by industry for example)
• Valid XHTML 1.0 Strict
• Valid CSS 2.1
• Works in every major browser (Firefox 2+3, IE 7, 8, Safari, Opera, Chrome)

Download BlueEarth 001 Free XHTML / CSS Template
Downloaded 534 times.