A few weeks ago, I finished developing and designing another website called Coronado Cupcakery. The cupcakery, located in Coronado, California has a fun but clean feel to it and the owner, Rosalina, wanted to have a similar look and feel for their website. Rosalina was a great client and I loved designing and developing her site. Some of the things I love about the site are the clean lines, classic text, and lots of color (I kept the background white for a clean look, and so that the colors and pictures would pop off the page). The website includes everything from a flavors page, to an ordering form, to a gallery of some of their most impressive work…. all organized in a fashion that is user friendly and easy to navigate.

Another part of the site I like a lot is the navigation. To create it, I used nettuts How to Build a Lava-Lamp Style Navigation Menu but I edited the files some so that the hover effect didn’t cover the entire menu item, but instead just kept an thick underline underneath the menu item. I really like the effect and I think I might recreate it as a flash menu.

Cya

I have finished working on another freelance website for a client, its called richardgodwin.net, and as you probably guessed it was for a person named Richard Godwin.  Richard is a really talented writer of dark crime fiction and noir,  and is about to publish his book, called ‘Apostle Rising.’  He had two blogs already that he consistently updated, so it was an obvious choice to build his site off of the WordPress Framework. Another reason I built the site using the WordPress framework is because of the awesome admin section it has. It really does do a great job in allowing the client to change the content on the website whenever they want, especially when they don’t have any coding knowledge.

As I worked on the site, Richard hired a graphic designer named Matthew Swann to finalize some graphics for the site. I usually do the graphics as well for the sites I work on, but it was a nice change of pace to have some help and it was really great working with Matthew.

There are a few special things I did for this site, that I want to list off here. There was a great plugin called WordPress.com Stats from their old site, that I implemented into their new site that lets them view their hits and pageviews from the WordPress dashboard. There were some problems initially with it but I fixed it by going into phpMyAdmin and messing with some fields in the SQL database.  For the navigation of the website and blog, they really liked the CSS Horizontal Menus I found on http://www.cssmenumaker.com. So I implemented one of those into the theme, and changed the color around to go with the rest of the site a little better. Another cool item on the site is the Steel Melting Flash Text Effect in the banner. I bought the file from activeden and added it to the site on two different pages. I think it looks really great and it achieved the flashy effect that Richard was wanting for announcing his upcoming book.

The last thing I want to talk about is the new default theme for WordPress called Twenty Ten. I created his blog theme from the Twenty Ten Theme and I just wanted to say that it was really easy to work with and modify, and that it comes with a ton more admin options in the dashboard area that the old default theme was really missing. My hat goes off to the WordPress team as they constantly raise the bar of their product again and again.

Cya

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

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

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

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

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.

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

1
2
3
4
5
6
7
8
9
10
11

//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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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.

1
2
3
4
5
6
7
8
9

//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>

An example of the fadeOut function is below using the code above.

That’s really about it, if this helps you out please leave a comment.

Cya

Cya

1
2
3
4
5

<script type="text/javascript">// <![CDATA[
	if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) {
		document.location = "http://www.scottrockers.com/iphone.html";
	}
// ]]></script>

Add this Javascript inside your <head> tags. and change the document.location to the page you want the user to get redirected to. The reason I have a iPhone version of my website is because my home page is made in Flash and as you know the iPhone can’t display Flash yet. So I created a basic html page that has a div in the body of it that is sized to 300 width by 350 height. And if you put this line of script in the <head> section it will tell Safari that the viewport should be the same size as the iPhone screen. Setting this line of code forces the content to always fit the window.

1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Now, if someone wants to bookmark your website, they can hit the + sign and then click “Add to Home Screen” and you want to specify what icon to use for the iPhone, then create a 57px by 57px .png formatted image, put it up on your server and put this line of code in to your <head> section as well.

1

<link rel="apple-touch-icon" href="http://www.scottrockers.com/library/images/sriphonelogo.png"/>

Just make sure the href tag is the correct destination to your image. What is cool is that you don’t have to add the corners or shine effect on the webclip because the iPhone will do that for you.

If you want to see all the actual html code, you can just go to scottrockers.com iPhone Version and click view source.

Cya

1. First, you need to validate all of your webpages on your site (meaning your  html code needs to not have any errors or warnings in it). This is the most important step because if the bot can’t index your page then how is it going to know how to categorize it. You can do that here: w3c Markup Validation Service
2. Select the keywords that pertain to your particular post or page. Its important to select your keywords using a Keyword Tool, like Google Adwords Keyword Tool, so you know how many people are searching the specific terms you are choosing and which ones have the least competition.
3. Insert your keywords into these parts of the webpage:
   1. Title – Very important, the title appears in the search engine results page as the link, Google uses the title tag for determining page relevance and ranks the page higher if the saearch phrase is found in the title.
   2. URL – Your keywords should be used in the url that specific page,  either in the directory or file name. Its good to use hyphens instead of a space in naming convention.
   3. headings – Every page should have a heading <h1> tag, and the keywords should be used in this and the h1 tag should be used only once.
   4. Text – In the text on your page, its very important to use the keywords in the first part of your webpage content. Also, if there is a small amount of text on the page it could cause the page to be ranked poorly too.
   5. keywords Meta Tag – Every webpage should have the keywords used in “Keywords Meta Tag”.  You add this line of code in between the <head> tags:<meta name=”keywords” content=”Your specific keywords” >
   6. Description Meta Tag – You add them like this:<meta name=”description” content=”A description sentence about your page or post pertaining to your keywords” >
4. Links – Use keywords in your links instead of using “click here” or phrases like that.
5. Images – all <img> tags should use the alt attribute using the keywords
6. Include a robots.txt file in the site root of your website. Even if the robots.txt file is blank upload one to your server because it will prevent your site from producing error messages every time a search engine spider visits your site.
7. Include a sitemap.xml file in the site root of your website. There is a website that will automate or help you create/ edit  a sitemap.xml file, it called xml-sitemaps.com.

This is just  a really quick seo check list that will dramatically help with your websites overall SEO, but if you don’t think your site is being indexed by google still, you can go to google.com/addurl and add your site url and google will start to index your site.

Cya

Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.

There are two things you need to add to your <head> section in your html, the css and javascript import lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
.banner {  
    height:  82px;  
    width:   82px;  
    padding: 0;  
    margin:  0;  
} 
 
.banner img {   
    border:  1px solid #fff;   
    width:  80px; 
    height: 80px; 
    top:  0; 
    left: 0 
} 
.banner img { display: none } //these lines hide all the rest of the pictures on startup 
.banner img.first { display: block } //except the first image
 
</style>

1
2
3
4
5
6
7
8
9
10
11

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.banner').cycle({
			fx: 'scrollLeft' //  transition type, scrollleft
		});
	});
</script>

And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:

1
2
3
4
5
6
7

<div class="banner"> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" /> 
</div>

Keeping up with the latest trends in web development is tough sometimes, only because there are new things always being created. jQuery is  one of the newer creations that have come up in the last several years and its not going away. It is the most popular JavaScript library in use today. If you don’t know what jQuery is then here is a brief description: jQuery is a JavaScript Library that is fast and concise that makes HTML document traversing, event handling, animating, and Ajax interactions for rapid web development much easier. “jQuery is designed to change the way that you write JavaScript.” It’s lightweight, around 23kb, and cross browser compliant and compliant with CSS3 as well. You can create sliding banners, dropdown navigations, and much more with it. I am trying to learn more and more of it everyday, and its pretty exciting. jQuery is provided under the MIT and GPL licenses which means you can use it in your commercial projects like selling of themes and stuff. There are several good tutorials and other helpful resources on their website and I would highly recommend it and learning some yourself.

Cya

I wanted to take a second to talk about an awesome add-on for firefox: the Web Developer Toolbar. The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It’s a must have for all developers and designers because it saves countless hours of developing and troubleshooting time, and it has tons of really great features. One of those great features is the ability to edit the CSS of a website in real time and see your changes updated on the web page as you type them. Then you can save out the changes you made and update accordingly. This alone can save you tons of time when  sifting through the files on your server searching for the correct CSS file to update, uploading  changes you made to it and then refreshing the browser to see the changes.  Another really nice feature is the one-click validating of your page’s HTML, CSS, and javascript. Instead of going to the W3C Markup Validation Website, and manually copying and pasting the urls into the field. It automatically does it for you, SO TIGHT!!!!! There are several other features of it that are really nice and if you are a designer or developer of websites I highly recommend it.

Cya