Archive for the ‘Web Development’ Category


« Older Entries
October 20th, 2010 by Brian under Web Development | 1 Comment »

CSS3 Media Queries Experiment

Click here to view the demo!

A lot of people have been using CSS3 media queries recently to deliver different styles of their web site to users based on the size of their browser screen. Usually this comes in the form of a ‘normal’ 960px width site, and will also deliver a more condensed version for mobile platforms such as the iPad and smartphones. I decided to go a different route and create a demo that delivers content for a 960px width site, and also delivers an enhanced version for users with monitors that have a Full HD resolution (1920px width).

The site works best in webkit based browsers of course, but most of the quirks of older browers are brought up to speed using some different methods. I used CSS3PIE to enable most of the CSS3 properties used on the page to work in Internet Explorer 7 and 8. Media Queries are also a problem in IE 7-8, so I also employed a javascript project called css3-mediaqueries.js to enable them. While both of these methods have their quirks, they go a long way in helping to bring users with outdated browsers more advanced features.

Here is a list of some of the CSS3 features employed on this demo:

  • Media Queries
  • border-radius
  • box-shadow
  • linear-gradient
  • text-shadow
  • transitions
  • @font-face
  • RGBa/opacity

Please take a look at the demo I’ve created and feel free to browse the source to see how things were done. Users with a 1920px width monitor will get to see the CSS3 Media Query in action as it converts the site to a two column layout that takes advantage of the entire width of the site.  Also, if anyone is wondering what the image slider is on the demo page, it is a jQuery slider called Nivo Slider.

Click here to view the demo!


Tags: , ,
June 8th, 2010 by Brian under Web Development | 2 Comments »

HTML5/CSS3 Resume Demo

Recently I’ve been reading a lot about HTML5 and CSS3 and the amazing capabilities that these upcoming tools offer to us web developers. The border-radius and box-shadow properties themselves are huge steps forward. After looking at piles of HTML5 and CSS3 demos, I decided that it’s time to create one of my own.

For this project I decided to make a web-based resume. I actually began this project several months ago, but I was recently inspired to start over from scratch after viewing an HTML5/CSS3 layout by onextrapixel.com.

This demo works best in Google Chrome or Apple Safari. Firefox will work well enough if you don’t have either of those browsers available. I hope you enjoy it!

View The Demo: HTML5 and CSS3 Resume Demo


Tags: , ,
January 29th, 2010 by Brian under Web Development | 1 Comment »

Social Networking Icons

Recently, I was looking for some ideas to change the Connect section at the bottom of my site. In my search, I came across a set of free social networking icons created by Komodo Media. This package includes icons for over 40 social networking sites and more in both 16×16 and 32×32 pixel sizes. To see an example, please look at the Connect section in the footer of my website, or visit the download link below.

I think these icons are a great free resource for developers. If you would like to download them, please visit the following link and download the file from Komodo Media. Enjoy!

Download Link: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/


Tags:
September 16th, 2009 by Brian under Web Development | 1 Comment »

WP e-Commerce

I have recently been developing an e-Commerce website for a client using WordPress and the free WP e-Commerce plug-in. In this post, I’d like to talk a bit about the plug-in and some of my thoughts and opinions about it as an overall product.

First of all, I love the fact that it is free. For a free platform, it gets the job done. Unfortunately, if you want some standard features such as product search, or grid display of products, you need to purchase their $40 gold upgrade. No big deal, but these should still be standard features. One gripe that I have with the product search is that it only searches through product titles, and tags that are manually added by the store manager.

Applying my theme to the website was fairly simple, unfortunately I had to modify some of the core PHP files to achieve the result that I wanted. This causes problems, because if you ever want to update the plug-in it will write over all of your changes. One other gripe I had about the software was the ‘Product Specials’ feature. It did not work out of the box. I had to add some custom PHP code to write to the database to register that a product has been given a sale price. Even when I add a sale price now, there are some quirky steps I have to go through to make sure it’s still showing up.

One last gripe I have has to do with Search Engine Optimization. The plug-in does render nice URLs, and you are able to set some of the features with the All in One SEO plug-in. Unfortunately, there is no way to get the product and category pages to be included with an XML sitemap generator to submit to the search engines. This would be a nice feature that I think is very important to websites.

Aside from these few issues, it was a very easy platform to set up. Adding products and categories is simple and shouldn’t be any trouble for the store owner. Managing orders seems like a simple process as well. I believe that it is possible to make decent web stores with this software, but anyone looking to run a large e-Commerce website should look elsewhere.

I hope this article provides some insight for anyone shopping around.


Tags: , ,
July 28th, 2009 by Brian under Web Development | 15 Comments »

Image Rollovers in WordPress

This article is an expansion upon my last article which discusses how to set up jQuery in WordPress. In this article, you will learn how to create a simple rollover image using jQuery.

First of all, you need to have your images created of course. For the sake of this article, the images should be named imagename.png, and imagename-hover.png (or any other picture file extension).

As you learned in the previous article, you need to enclose your jQuery function in a special function of its own.

This is called from an external .js file, and will work for any images inside of a div called #quote (or whatever fits your website).

jQuery(function($) {                    < --This is the enclosing function
    $(document).ready(function(){       <--This is the overall jQuery function
 
        $("#content #quote img").each(function () {    <--This function determines img src
            rollsrc = $(this).attr("src");
            rollON = rollsrc.replace(/.png$/gi, "-hover.png");
            $("<img>").attr("src", rollON);
        });
 
        $("#content #quote a").mouseover(function () {  < --This displays the -hover image
            imgsrc = $(this).children("img").attr("src");
            matches = imgsrc.match(/-hover/);
            if (!matches) {
                imgsrcON = imgsrc.replace(/.png$/gi, "-hover.png");
                $(this).children("img").attr("src", imgsrcON);
            }
        });
 
        $("#content #quote a").mouseout(function () {  <--This returns the image to normal
            $(this).children("img").attr("src", imgsrc);
        });
 
    });
});

The first part of each of the 3 functions that actually change the image contain a css path to the hyperlink (‘a’ tag). This will vary depending on the structure of your website. A good way to find the css path is to use the Firefox plugin called FireBug.

I hope this helps other developers in their WordPress and jQuery endeavors!


Tags: , ,
« Older Entries