html

« Older Entries
Newer Entries »

InVeritas Website

Thursday, May 13th, 2010

inveritas-website

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

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.

 

The rest of the content of the page

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

Cya

Tags: , , , , ,
Posted in Tutorials | 4 Comments »

HRA105.com Website

Wednesday, March 17th, 2010

I have finished working on another site for work, called HRA105.com. It’s a informational and marketing website for HRAs (Health Reimbursement Arrangements).  The pictures on the left are the redesign and updated site, and the pictures on the right is what it use to look like. As you can see I did a lot of updates to the site. First off, I created all the banner images and made a simple jQuery Rotating banner with a simple fading transition with the jQuery Cycle Plugin. This is a really nice feature because it will show up in all browsers including iPhones. Secondly,  I used Stu Nicholls’ great horizontal navigation called Professional Dropdown #2. I would of created my own navigational menu but it just saves so much time using other’s free stuff and this is just a really  nice and simple menu to use and setup. The problem with the original site was that the navigation was non-existent. You had to click on the flash portion at the top and then click “click here to read more” and then the subpages had tons of white space between paragraphs that made no since and it was hard to find what you wanted. The most important part of any website is that its easy to get around and find what you want, if the user can’t use your site they will leave it in a matter of seconds. Also, I made all the subpages consistent and made the site a standard 1024px by 768px instead of a stretch to fit liquid layout so it looks the same on all computers. Its cross browser compatible as well and I performed my SEO checklist on the site as well.

Cya

Tags: , , ,
Posted in Work Projects | No Comments »

Detect Iphone

Thursday, March 11th, 2010


I got inspired and wanted to finish up the iphone version of my website. To do this, first you need to detect the iphone and then redirect the user to another webpage. Here is the script to do that:

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

Tags: , , , ,
Posted in Simple Code Tricks | No Comments »

SEO Check List

Friday, March 5th, 2010

I wanted to create a SEO check list for every website that I work on, that way I could go back and reference it after finishing up a site. These methods are proven and if you follow this SEO checklist as well, then you will have increased traffic on your site too. If you want proof of it working, you can check out my other post Search Engine Optimization Techniques where I explain more in detail about all these points. This check list is just a quick guide to help remind you of whats left to finish on the website to optimize it for Search engine ranking. Here we go:

  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” >
      • Links – Use keywords in your links instead of using “click here” or phrases like that.
      • Images – all <img> tags should use the alt attribute using the keywords
      • 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.
      • 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

      Tags: , , ,
      Posted in Useful Websites | 1 Comment »

      « Older Entries
      Newer Entries »