html « Scott Rockers' Blog - Website Designer and Developer, Flash, Wordpress, jQuery, and Other Scripts

html

Change of Status.com Website

Thursday, August 19th, 2010

I have finished redesigning another website called changeofstatus.com the purpose of the site is to help simplify and minimize the confusion involved in an employee’s change of status (sometimes called a “life event”) as it pertains to their various healthcare benefit plans. When someone gets married or looses a dependent, usually things like this are considered life events and allow the employee to change their benefit package accordingly, so they are not paying for something they do not need. Also on the change of Status website there is a tool that converts the complicated employee change of benefits status matrix to an easy-to-use, three-step wizard, allowing employees, employers and administrators to determine what life events are permitted under IRS rules and regulations. I redesigned the site completely, you can see the site images above. The image on the right is the ‘before’ image, and the image on the left is the ‘after’. I used this template before on other company websites and I thought I do the same for this site to keep the branding consistent overall.

The site uses the jQuery Cycle Plugin for the banner rotater so that its visible even on devices like phones that don’t run Flash. Also, the website is completely SEO friendly. This is another case where I put my SEO checklist to work and it has helped tremendously. Previously the site was around 500 hits a month. Now even after a couple weeks, it has raised to over 1,500 hits a month. I’ll post the google analytics pictures as soon as I can.

Cya

Tags: Design, Development, html, jQuery, SEO
Posted in Work Projects | No Comments »

WordPress and Flash 10x Cookbook Review

Friday, June 25th, 2010

As you may know, I have completed quite a few projects and written several posts regarding the integration of Flash and WordPress. In fact, my latest project was a complete Flash and WordPress Website called RocFolio 2.

A few weeks ago I was excited to be contacted by Packt Publishing. They asked me to review one of their books, “WordPress and Flash 10x Cookbook”. I was honored that they contacted me and excited for the opportunity to read through their book and see what I could learn. Here is the book information followed by my review.

Book Information

Full Title: WordPress and Flash 10x Cookbook
Author(s): Peter Spannagle, Sarah Soward
Pages: 268
Published: April 2010
Publisher: Packt Publishing
ISBN: 978-1-847198-82-2

My Review

The book as a whole is written well and includes over 50 simple and effective techniques on how to control certain tasks relating to Flash content in WordPress. The easy-to-follow step by step instructions, and pictures to help out those of us who are more visual, that accompany the techniques make integrating Flash and WordPress a fairly straightforward process.

This book is aimed at new or intermediate WordPress users who are interested in learning how to create the unique and media-rich sites that using plug-ins and Flash can provide, so much of the book’s content I was already fairly familiar with. But for the newer user looking to enhance their personal or business sites and blogs, this book definitely contains strategies and techniques to help you do just that. Just remember that a working knowledge of XHTML, CSS, and graphic design is helpful and familiarity with WordPress is required, because the book does not address the basic mechanics of using WordPress itself. Also, any previous experience with Flash is helpful but not necessary.

Honestly, the Cookbook focused more on how to add, edit, and embed Flash into WordPress than an actual integration of the two, which is what I had originally thought it was going to be about. It also mentions several really nice WordPress plug-ins, some of which were strictly for helping you add and control Flash on your WordPress site, while others mentioned are to help you with SEO, Google Sitemaps, and optimizing your WordPress site as a whole. The Cookbook also delves into some Actionscript 3.0 scripting which is followed by examples paired with actual code. Here are links to some of the plug-ins the book mentions that I found to be particularly helpful tools in building a WordPress site:

Kimili Flash Embed Plugin
Dean’s FKCEditor Plugin
Google Sitemaps XML Plugin
SEO Title Tags Plugin
FLV Embed Plugin

If you don’t know how to use these plug-ins, or have an overall desire to learn more about Flash content within WordPress, the WordPress and Flash 10x Cookbook definitely explains in detail the best way to do so. Overall, this book is a great reference and would be a helpful addition to your desk or workspace, especially if you’re a new or intermediate designer/developer. Hey, even if you’re an advanced user it could still come in handy, teaching you something you might have missed along the way as you taught yourself… we all have something to learn. Right?

Cya

Tags: Actionscript 3, Cookbook, Flash, html, Plugin, Wordpress
Posted in Freelance Projects | No Comments »

Housemadehome.net Website

Wednesday, May 19th, 2010

I have finished up another website for a client of mine (my wife), designed for her blog called housemadehome.net. The blog chronicles the renovations and decorating of our house, some recipes, and stories associated with the raising of our family. I worked really closely with her on the design of the site and I think it came out really well. I developed it using the WordPress backend, so she could easily make posts to it and handle the whole site by herself. We focused a lot on search engine optimization and the site has had a really good start so far… she has over 15 followers already. There are tons of home design blogs out there and they are getting bigger all the time. If you are looking for a custom made blog template, contact me so we can discuss the details of the project.

Cya

Tags: CSS, Design, Development, html, Wordpress
Posted in Freelance Projects | No Comments »

InVeritas Website

Thursday, May 13th, 2010

I have recently just finished working on another freelance website for a company called InVeritas. InVeritas Research & Consulting, Inc., is a national research and consulting firm specializing in strategic communications, political polling and research, government relations, grassroots/grasstops organizing, press relations and message development. This client had a very specific vision in mind about how they wanted their website to look and feel, and it was my job to make that vision come true.

This website is built on top of a wordpress backend so they can easily make posts or news alerts whenever they want. I used several wordpress plugins in the development of this site. For the menu I used the PixoPoint Menu Plugin which is a really great wordpress menu plugin. This plugin comes with tons of customization options and allows you to easily add your own custom dropdown menu to any WordPress site. At first it was a little difficult to work with but in the end it did exactly what I needed for it to do. Another plugin I used was the Redirection Plugin which is used to manage 301 redirections, keep track of 404 errors, and generally tidy up any loose ends your site may have. I also used the Exec-PHP plugin to allow me to run any php code thats in posts, pages and text widgets. The final plugin I used was the .html on Pages WordPress plugin, which adds “.html” to the end of all the pages on the site.

I always try to learn something new from any project I undertake, and this one was no exception. The main thing to realize when building or creating something for a client is that its really important to work with the client and give them exactly what they want, because in the end they are the ones paying for it. It i s hard sometimes because what they want isn’t always the easiest, quickest, or best solution. Its important to tell the client what they need to know to make the best decision though.

I worked with Kinetic Media Solutions again on this project and I enjoyed working with InVeritas as well.

Cya

Tags: CSS, Development, html, Wordpress
Posted in Freelance Projects | 1 Comment »

Fade In and Fade Out in jQuery

Tuesday, April 27th, 2010

I have been working a lot more with jQuery lately, so I thought I would show you how to do the simple fade in or fade out jQuery hover effect that occurs to the navigation when you go to the Google homepage. You know the one that I am talking about, its occurs when your mouse goes over the page of the google homepage, all the navigation at the top appears.

For the first example, I will show you how to make the fade in jQuery hover effect. Hover over the box below to see the effect.

The rest of the content of the page

To do this, first place this jQuery code in the <head></head> section of your html file.

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //first hide the div with the id of googlenav
	$("div#googlenav").hide();
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});
});
</script>

Then add this html code into the <body></body> of your html document

<div id="googlediv" style="width:500px; height:200px; border:1px solid #ffffff;">
<div id="googlenav">
	<ul>
    <li><a href="#">Web</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Maps</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Shopping</a></li>
    <li><a href="#">Gmail</a></li>
  </ul>
</div>
<div style="margin:0px auto; width:500px; text-align:center;">
<p>&nbsp;</p><p>The rest of the content of the page</p>
</div>
</div>

You can style the content hover you like, I tried to keep all the links inline like google does. Here is my styling, you can add this in the <head></head> section too.

<style type="text/css">
#googlenav {
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:1px solid #c9d7f1;
	height:26px;
	position:absolute;
	width:500px;
}
#googlenav ul {
	padding:3px 0px;
	margin:0px;
	padding-left:15px;
}
#googlenav ul li{
	display:inline;
	padding:0px 3px;
	margin:0px;
}
</style>

Now google fades in their links and navigation when you roll over the page, not a specific div. So if you wanted it to be exactly like that, you would target the page instead of that particular div. So in your jQuery instead of this:

$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});

You would put this:

$(document.body).hover(function(){$("div#googlenav").fadeIn('slow');});

And style accordingly. Now if you want to fade out in jQuery, instead of fadeIn(), you would use the fadeOut() function. And Remember you don’t have to hide the content first, so the jQuery would look like this.

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeOut('slow');});
});
</script>