Web Development - Lansing Web Design and Development Professional

Archive for the ‘Web Development’ Category

HTML5/CSS3 Resume Demo

June 8th, 2010 by Brian under Web Development | No Comments »

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

If you enjoyed this article then please share it!

Tags: CSS3, HTML5, jQuery

Social Networking Icons

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

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/

If you enjoyed this article then please share it!

Tags: Free Stuff

WP e-Commerce

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

UPDATE: My client’s site is now live! Link: http://www.stringcollector.com

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. I will post a link to my client’s WP e-Commerce site soon in my portfolio when it goes live!

If you enjoyed this article then please share it!

Image Rollovers in WordPress

July 28th, 2009 by Brian under Web Development | 12 Comments »

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!

If you enjoyed this article then please share it!

Tags: JavaScript, jQuery, WordPress

WordPress Dates with get_posts()

July 21st, 2009 by Brian under Web Development | 1 Comment »

One problem that I had when I created the Fro Designs web site was with dates displaying incorrectly when I list my 3 most recent news updates/blog posts at the bottom of the page. For some reason, that date would only be displayed once if there were multiple posts on the same day. This proved to be quite a headache to figure out, but I eventually discovered that the the_date() function works that way.

Fortunately, it was a very simple fix to get the date to show up for each post. All I had to do was swap out the the_date() function and replace it with the the_time() function of WordPress.

Now if you don’t specify the format of the_time() it will actually display the time instead of the date. In order to fix this, you merely need to insert some characters into the brackets of the_time() to tell it how to display the date.

End Result:

< ?php the_time('F j, Y'); ?>

This will output the date in this format: Month Day, Year

I’m sure there are other options available, but you just need to find the format that works for you. I hope this post saves other WordPress developers the headache of trying to figure out this quirky problem!

If you enjoyed this article then please share it!