Cool Climate Jobs

Posted on August 21, 2008 
Filed Under News, Projects, Web development

www.coolclimatejobs.com launches!

Cool Climate Jobs is an exciting new online job resource for the climate and renewable energy communities. Featuring jobs in the climate, renewable energy, and green collar research, policy, and practice fields from around the world, Cool Climate Jobs is free to browse as well as an affordable platform to promote your employment opportunities. It’s just $125 ($100 for non-profit organizations) for a 4 week posting – internship postings are always free. There are also sponsorship and advertizing opportunities to showcase your event or organization directly to thousands of skilled members of the climate and renewable energy industries.

For more information visit: www.coolclimatejobs.com (then check it out on your iPhone!).

Wordpress 2.5

Posted on March 30, 2008 
Filed Under Web development, Wordpress

Wordpress LogoOriginally slated for a release date of March 10, 2008, Wordpress 2.5 made its debut yesterday. Most notable in the long list of improvements is a major upgrade to the admin area. Writing posts, pages, and especially managing assets (images, videos, mp3 files, etc.) received a total re-vamp and a slick new user interface to boot.

Invisible Window has been developing sites using Wordpress as a CMS for some time now, and it’s is a great system. Wordpress sites allow the site owner to easily make updates to content and imagery, and Wordpress has many features that allow better organic search engine results - these new features in this release make this great system even better.

If you have a site running a previous version of Wordpress (unless you’ve already contacted us for an upgrade, you do), shoot us an email (hello at invisible window dot com) and we can set up a time to upgrade your site so you too can be blown away by these new features.

In Praise of Wordpress

Posted on February 7, 2008 
Filed Under Web development, Wordpress

The gang here at Invisible Window has developed multiple sites and written many articles about using Wordpress as a content management system (CMS). We believe it excels at this task and, more importantly, puts the site owner in charge of their own content. And who, after all, knows more about their company than anyone else ever could? There are many other advantages to using Wordpress, as you will learn in this video interview of Matt Curtis, one of the head developers at Google.

Check it out

Google Maps Wordpress Plugin

Posted on December 14, 2007 
Filed Under Web development, Wordpress

For over a year now our Invisible Window team has built some very cool web sites using Wordpress as the content management system. We’re pleased to announce our first publicly released Wordpress plugin, Google Mapper. Installing this plugin allows a site admin to add locations, stores, dealers, etc. to the database and for these locations to be plotted using Google Maps on the front end. Custom icons and markers can be used, and a default zoom level can also be entered.

You will need to signup for a Google Maps API Key to use this plugin on your site.

Google Mapper Plugin

== Current Version ==
Google Mapper 1.0 - 2007-12-04
Download Zip: Google Mapper Plugin v 1.0

== Installation ==

  1. Upload `google-mapper` to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Enter your Google Maps API key and any optional default values
  4. Place < ?php if(function_exists('gm_show_map')) gm_show_map(); ?> in your templates

== To Do ==

  1. Finalize Upgrade Script
  2. Allow setting streets, topo, hybrid view
  3. Allow setting for default map display size

== Donate ==
PayPal: Like this plugin? Want to see it developed further? donate here.

10 Über cool jQuery Plugins

Posted on September 25, 2007 
Filed Under JQuery, Web development

I have been using jQuery for a while now to add a little flair to forms and features of the sites we develop here at Invisible Window. jQuery is one (an in my opponion, the best) of the JavaScript libraries that have sprung up to simplify and enhance JavaScript development. jQuery allows the developer to “traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.”

In addition to the core library, there are a host of jQuery plugins available each enhancing jQuery’s features. Here are 10 I think you should take a look at.

  1. jQuery Dimensions Plugin - The dimensions plugin extends jQuery with dimension centric methods. It has been rigorously tested and gives accurate results cross-browser. Methods like width and height are extended by dimensions to enable you to get the width and height of both the window and the document. Methods like offset and position help you find the coordinates of an element on your page. (http://brandonaaron.net/docs/dimensions/)
  2. jQuery Calculation Plugin - This plugin greatly expands the ability to retrieve and set values in forms beyond jQuery’s standard val() method by allowing you to interact with all types of form field elements. (http://www.pengoworks.com/workshop/jquery/calculation.plugin.htm)
  3. jQuery Tablesorter Plugin - Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell. (http://tablesorter.com/docs/)
  4. jQuery Tooltip Plugin - Display a customized tooltip instead of the default one for every selected element. The tooltip behaviour mimics the default one, but lets you style the tooltip and specify the delay before displaying it. In addition, it displays the href value, if it is available. (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/)
  5. jQuery Simple Star Rating Plugin - This is a jQuery plugin for star rating systems much like Netflix or GMail. (http://examples.learningjquery.com/rating/)
  6. jQuery Stylesheet Switcher - The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet. (http://www.kelvinluck.com/article/switch-stylesheets-with-jquery)
  7. ThickBox - ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. (http://jquery.com/demo/thickbox/)
  8. jQuery date picker plugin - A flexible unobtrusive calendar component for jQuery. (http://kelvinluck.com/assets/jquery/datePicker/v2/demo/)
  9. jQuery Tabs Plugin - Quickly, and easily, build an accessible and unobtrusive tabbed navigation interface for your web site. Provides predefined (slide and/or fade) and custom animations on tab selection, callback on tab selection, autoheight, bookmarking. Use with the History/Remote plugin to fix the back button. (http://www.stilbuero.de/2006/11/05/tabs-version-2/)
  10. pager jQuery plug-in - Unobtrusively paginate large pieces of content into smaller chunks. (http://rikrikrik.com/jquery/pager/)

This is by no means an exhaustive list and the plugins listed are in no particular order. I feel they should be enough to show the possibilities that open up when you include jQuery into your development and wet your appetite for more.

Happy surfing!

Web Standards Explained.

Posted on May 21, 2007 
Filed Under Web development

We couldn’t have said it better ourselves. We talk about them constantly, but what are web standards?

Here’s your answer!

Under-utilized CSS selectors

Posted on May 14, 2007 
Filed Under Web development

In our day to day development lives we often get into a rut when it comes to solving certain problems and forget that other options might exist. Below is a list of some “anti-rut” CSS selectors.

  1. clip: If you’ve ever written an application where a user may upload a photo, you know the struggle that can ensue where a particular uploaded image breaks the layout (too long, too wide, etc). The clip CSS selector can help you make that square image you were looking for out of the rectangular upload that your user gave you.Usage: clip: rect(5px, 40px, 45px, 5px)


    // css code
    #container {
    height:258px;
    width:258px;
    position:relative;
    border:1px solid green
    }
    #box {
    width: 258px;
    height: 258px;
    }
    .clip {
    position:absolute;
    clip:rect(20px 200px 200px 20px);
    }


    // markup

    more info: http://www.w3schools.com/css/pr_pos_clip.asp

  2. font-stretch Text formatting has always been venue where design and accessibility have had their face off. CSS has made huge strides in bridging this gap and font-stretch is just another tool. This tag will condense or expand your chosen font.
    // css code
    .expand {
    font: 13px/18px verdana, arial, sans-serif;
    color: #000;
    font-stretch: extra-expanded;
    }

    more info: http://www.w3schools.com/css/pr_font_font-stretch.asp

  3. text-shadow - Another tag that will greatly help with typography is the text-shadow selector. Using this one tag a developer can easily add a nice drop shadow behind a text element. Unfortunately at this point in time this selector only works in Safari but other browsers are set to support it in future versions.usage: text-shadow: color, x-coordinate, y-coordinate, blur radius


    // css
    .shadow {
    text-shadow: #000000 10px -5px 1px;
    }

    more info: http://www.designmeme.com/articles/dropshadows/

  4. :focus - AJAX allows the developer a whole host of possibilities when it comes to styling forms - but most modern browsers (IE 6 aside) support doing a good bit of form tweaking without using any AJAX. The focus pseudo class allows different styling to be used on active form elements.
    // css
    input:focus, textarea:focus{
    border: 1px solid #333;
    background: #FFC;
    }

    more info: http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

  5. :first-child & :last-child - The more CSS is used in markup, the more lists get added into your markup. These handy little pseudo classes allow you to put a different styling on first (or last) items in a list. This can be particularly handy when you are using borders between li’s and don’t want that border to appear after the last li.
    usage: li:first-child
    // css
    div#mainNav ul > li:last-child{
    border: 0;
    }

    more info: http://www.w3schools.com/css/css_pseudo_classes.asp

  6. att[href^=”http:”] - since target=”_new” doesn’t properly validate (and strictly speaking popup windows are not so great) it is often helpful to show your user that they are going to a link that will remove them from your site. This selector will allow you to style those external links differently from your internal links without creating a new class.
    a[href^="http:"]{
    background: url("images/externalLink.gif") no-repeat right top;
    padding-right: 10px;
    }

    more info: http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/

Those are the big ones that come to mind off hand - if you think of some that I have left out, please feel free to leave them in the comments.

Highlighting Forms Using JQuery

Posted on April 26, 2007 
Filed Under JQuery, Web development

One of the things that I like best about working in the web industry is the speed at which it changes. Granted, sometimes it seems new technologies are coming out so fast that it’s hard to keep up, but that challenge is a fun one.

AJAX (Asynchronous JavaScript and XML) is one of the hot buzz words in the web industry now, and it’s been one of our major distractions lately. In a nut-shell AJAX lets a web page do “stuff” without reloading.

There are several libraries that facilitate authoring AJAX and the one we really like is JQuery. In this post we will look at how to change the border colors on an input field when a they gain focus (when they are being typed in). Here’s a visual example.

The code that makes up our form is pretty simple:


Name:
Email:

Comment:

To change this form, you’ll first need to do download the current JQuery library and upload it to your server. Personally I like to put all of my external .js files in their own folder (js) in addition to some good practical reasons for doing this (caching, download time, etc.), it helps keep things nice and organized. So save the JQuery library into your js folder as jquery.js.

In order to use the functions contained in the JQuery library, you’ll need to call the file. In the head of your document, place the following code:

The JQuery library is now ready for use. Now we will write a few lines of javascript that will tell the library what we want to do. First we need to tell the browser that we’re using javascript, this is done by including these lines:

Next we have to initialize the JQuery library by adding these lines to our javascript code:



This basically says “when the DOM (Document Object Model) is ready - do stuff. What stuff…this stuff



These three sections basically do the following:

  1. Set the borders on all input, textareas, and selects to #999 (light gray)
  2. When we put our cursor into a field (focus) change it to #EE9B00 (the orange from our logo)
  3. When we leave an input field (blur) set the border back to #999

That’s it - complex DOM scripting is so easy with JQuery.

More detail of what these JQuery lines can be found here.

10 Mandatory Wordpress Plugins

Posted on April 16, 2007 
Filed Under Web development, Wordpress

  1. Akismet - This one pretty much goes without saying, Wordpress comes bundled with this plugin allowing anyone to use it with no more effort than pressing the activate button within the plugin tab - provided you have a Wordpress account (which is free - here). Akismet will drastically cut down on the volume of spam that inevitably bogs down comments to posts. Get this plugin! http://codex.wordpress.org/Akismet
  2. FAlbum - Share your Flickr photos right on your site - this plugin installs easily and has some great gallery functionality. You will need a Flickr account to use this plugin. http://www.randombyte.net/blog/projects/falbum/
  3. Improved Include Page - This plugin allows you to include the content of a page into any template you make. This plugin allows you to include information in sidebars, etc. and gives you the ability to edit them right from the admin. hhttp://www.vtardia.com/improved-include-page/
  4. Search Pages Plugin - The search pages plugin extends Wordpress’ default search functionality to pages as well as posts. If your site uses pages and posts, this plugin raises the level of professionalism on your site and gives users the functionality they expect - after all who whants search results from only a portion of your content http://randomfrequency.net/wordpress/search-pages/
  5. Google Sitemaps - This plugin generates an XML sitemap of your Wordpress blog. Search Engines use sitemaps like these to index your site. Although this plugin is called “Google Sitemaps” other search engines (such as Yahoo! and MSN) utilize the same technology. http://www.arnebrachhold.de/2005/06/05/google-sitemaps-generator-v2-final
  6. PodPress - Whether you’re an avid podcaster or you’re just looking for an easy way to post audio and video on your blog, PodPress is worth checking out. http://www.mightyseek.com/podpress/
  7. Gravitars - Gravitars (Globally Recognized Avitars) can be added to comments by installing this simple plugin. This plugin while not necessary from a functionality standpoint, does make reading comments a little more interesting, and puts a face to a name (in a manner of speaking) for your blog community. http://codex.wordpress.org/Using_Gravatars
  8. WP-Cal - For events, dates, or any future posting - this calendar is a must. Although not every site needs this functionality, if yours does, this is a wonderful plugin. http://www.fahlstad.se/wp-plugins/wp-cal/
  9. All in One SEO Pack - For any blogger who is serious about SEO (and you all should be) this plugin is a must. It will re-write headers, create unique descriptions for each page, and allow you to customize each page’s meta tags - every bit of which will make search engines smile down upon you. http://wp.uberdose.com/2007/03/24/all-in-one-seo-pack/
  10. Wordpress Widgets - Although rumor has it this this plugin will soon be part of the Wordpress core functionality, you’ll need to install it before that is the case. This handy plugin lets you do all kinds of modification to your sidebar without ever touching a line of code. It does require a “Widgets Friendly” theme - or your can make your theme Widget Friendly. http://automattic.com/code/widgets/

It’s Alive!

Posted on April 13, 2007 
Filed Under Projects, Web development, Wordpress

Well we’re by no means finished with the site, it still has a long way to go, but we feel like we have finally gotten it to the point that it’s presentable. So without further ado, welcome to the new (and hopefully improved) Invisible Window web site!

Comments