Ryan Stemkoski » CSS

Software to Automatically Make a HTML version of a Dynamic Website

Ryan Stemkoski — Fri, 04 Dec 2009 14:00:07 +0000

It seems like there are a million different content management systems out there. Some like the ZLCMS system we use at Zipline are transferrable to another web host but occasionally we have run into web development companies with ‘proprietary’ content management systems. Many of these companies won’t allow their customers to transfer their website to another hosting company. Often, when we run into these situations the customers are willing to forfeit their content management just to get away from the web development company they are working with. On a few of these occasions we have been forced to hand backup an entire HTML website, updating images, links, etc.

Years ago I had a software program that would copy down an entire HTML site fairly accurately. Unfortunately, as the web transitioned to dynamic websites this software package could not keep up with the advances.

Today, I discovered a website backup utility that has done a fantastic job in my tests. I backed up several of our complicated dynamic websites and it has done a great job making them work in an HTML version. If you run into a situation where your website, or your customers website is being held hostage by a web design company this could be the perfect solution for you.

The software is called HTTrack Website Copier and it is a free GPL licensed software package.

Click here to download HTTrack

If you have any comments or questions please leave a comment below.

No related posts.

jQuery UI 1.7.2 Themes List at Google Code

Ryan Stemkoski — Fri, 25 Sep 2009 17:07:26 +0000

Working with jQuery UI for the first time and looking for a theme? Tired of using the same theme over and over again? Google hosts a number of pre-constructed jQuery UI themes on their Google Code repository. I have always used the same handful of themes with every jQuery UI project I have done. Today, I had a project that didn’t really fit with any of my established themes and didn’t feel like going through the process of construction my own. I always use the Google Code repository when accessing common libraries and I know they have a number of themes stored and available for use, however, this list was quite difficult to find. For some reason Google search was unable to find this list of themes, also at Google.

To make life easier on the rest of you, I have compiled a complete list of themes for jQuery UI 1.7.2 below. I have not tested all of these in a live environment but they are all available in the SVN repository.

jQuery UI Themes:

Base:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />

Black Tie

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css" />

Blitzer

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" />

Cupertino

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" type="text/css" />

Dark Hive

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" type="text/css" />

Dot Luv

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" type="text/css" />

Eggplant

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" type="text/css" />

Excite Bike

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" type="text/css" />

Flick

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" type="text/css" />

Hot Sneaks

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" type="text/css" />

Humanity

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" type="text/css" />

Le Frog

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" type="text/css" />

Mint Chocolate

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" type="text/css" />

Overcast

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" />

Peper Grinder

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" type="text/css" />

Redmond

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />

Smoothness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" />

South Street

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" type="text/css" />

Start

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" />

Sunny

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />

Swanky Purse

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />

Trontastic

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" type="text/css" />

UI Darkness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />

UI Lightness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" />

Vader

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" type="text/css" />

No related posts.

How to Hide the Dotted Border Around Links in Firefox

Ryan Stemkoski — Mon, 07 Sep 2009 17:21:38 +0000

Many of you may have noticed that Firefox adds a 1px dotted border around some active elements. From what I understand, this border is intended to indicate where the user’s focus is on the page. The unfortunate reality is, these borders are often unsightly for standard users. Many times, developers need to remove them from navigational elements. This can be done easily with the following code:

a:hover, a:focus, a:active {
    outline: none;
    -moz-outline-style: none;
}

You may need to modify this accordingly to your application. The command outline: none; removes the border in current versions of Firefox and the hack -moz-outline-style: none; applies to older browsers.

No related posts.

The SEO Rapper… Again

Ryan Stemkoski — Tue, 07 Apr 2009 21:57:57 +0000

I am not a big YouTube person. Every once in awhile, I will watch something like Charlie the Unicorn or Lebron James high school highlight reels when I am super bored. Today I had a web developer friend send over a link to a video called Design Coding. Obviously, many of you beat me to this video because as I am writing this it has nearly 445,000 views.

The video is from the Poetic Prophet (AKA The SEO Rapper) The rap is actually pretty funny. I have seen a couple other videos from the SEO Rapper but I hadn’t come across this one. Some of my favorite lines are:

“Don’t use italics use emphasis”

“Don’t duplicate it or you might face a litigation”

“Your photoshop functions, slice that design, do your layout with divs, make sure that its aligned”

“Please don’t use tables even though they work fine, when it comes to indexing they give search engines a hard time”

“The competition will get bitter, you’ll shine like glitter”

It isn’t every day you hear a rap song about web design. In fact I have only heard a couple and they were mostly done by white guys skinnier than I am. In all honestly I can’t believe this exists but since it does you have to check it out. If you’re really bored check out some of his other videos. I know some of you may have seen them already but if you’re like me and missed out on the SEO Rapper thus far, you need to check him out.

No related posts.

Change the Style of DIV on Mouseover with jQuery

Ryan Stemkoski — Thu, 05 Mar 2009 15:05:54 +0000

JavaScript libraries are fantastic. I know many good web developers who have been reluctant to learn more JavaScript than they absolutely need to. I admit JavaScript can be confusing but it is a very powerful tool, especially with the power of AJAX. Below are a couple simple examples of very powerful techniques that can be achieved very quickly and cleanly using jQuery.

Example 1: Change the Style of a DIV element on Mouseover

Lists are a great tool for navigations but many times they don’t work or are too difficult to style. Lets say you wanted to make a vertical navigation out of DIV elements but you wanted them to change styles on rollover. Your HTML may look something like:

<div id="leftColumn">
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 1</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 2</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 3</a></div>
        <div class="sidenavOff"><a href="#">NAVIGATION ITEM 4</a></div>
</div>

Very simple and clean. Notice there is no inline JavaScript for the rollover effect. The beauty of jQuery is it can handle events for elements without nasty inline JavaScript. Here is the jQuery JavaScript to add rollover effects to this navigation:

    $("div.sidenavOff").mouseover(function(){
    	$(this).removeClass().addClass("sidenavOver");
    }).mouseout(function(){
    	$(this).removeClass().addClass("sidenavOff");		
    });

Easy aye? Analyzing the code you can see simple mouseover and mouse out functions where we’re removing the current class and adding the proper one for the time in the event. This will effect any DIV with the class of .sidenavOff on mouseover.

Example 2: Including HTML content in a Page using jQuery and Ajax

Suppose we had a div on our page with the ID of #lookup. When clicked #lookup1 we wanted the content from a file called search.htm to load in another DIV with the id #lookupContent.

With HTML you could link to a new HTML file that had this adjustment made. With standard JavaScript you could make a very lengthy AJAX request to load the page or with jQuery you can do it with ease. For example:

	$('#lookup').click(function() {
		$('#lookupContent').load('search.htm');
	});

This code will load the file search.htm and replace the contents of #lookupContent with whatever is in the search.htm file. Cake.

I will give a few more, simple jQuery examples in the near future. I am trying to convince as many developers as I can to take a look at the various JavaScript frameworks. There is a reason they’re such a hot topic these days.

No related posts.

An Iron-fisted Personal Development Policy

Ryan Stemkoski — Fri, 27 Feb 2009 04:12:49 +0000

I have been thinking a lot lately about personal development. In a constantly evolving industry like web design, if you want to stay relevant, you need to stay current. Every day there is some new development, product release, or technique developed. If you don’t continue to learn, try, explore, and grow, eventually you will go the way of the dodo bird.

Realizing just how important personal development is to the graphic and web design industry, I’ve been seriously considering the implementation of a mandatory personal development policy for our employees at Zipline. What would it have in it, you may ask? The answer is, I am not quite sure. At this point I am thinking out loud. I have seen bits and pieces over the years about companies encouraging employees to partake in personal development. Some companies offer tuition reimbursement, others offer expense paid trips to conferences. While these are both great ways for employees to expand their skill set, they’re often cost prohibitive for small businesses.

My primary source of personal development is this blog. Every morning I get up at 4 AM and I read dozens of articles on marketing, advertising, graphic design, web design, and programming. After I have digested all of that content I will write an article relating to something that caught my eye, or something I experienced or learned the previous day. Then I will head into the office and attempt to put into practice the various interesting techniques, methods, and ideas I absorbed during my morning read. While I have learned a great deal by doing this, I am quite aware it would be unreasonable to ask my employees to work from 4AM – 5PM everyday, mostly because they’re a bunch of sissies.

So what if we paid our employees to blog, read, and network? During a time when many companies are banning social networking and other personal Internet usage it may seem counterintuitive to encourage employees to browse the Internet while on the clock. I think however that a couple hours of personal development per employee, per week would help the company become more innovative in the long run. I also think that this would help employees stay motivated. I know I personally feel excited and refreshed when I find new technologies or ideas to try. It helps to stave off the feelings of monotony that many developers begin to experience after their 1000th contact form.

While a personal development policy is an interesting concept, the question most managers will have is, how do you control it? In truth, I have no idea. Perhaps the first 30 minutes of every day is devoted to reading articles in a mandatory Google reader account and then it’s back to work. Maybe each employee is required to produce 2 work related blog entries a week. Unfortunately, I don’t have an answer. Personally, I hate to try to govern creativity. Personal development should be something fun and enjoyable. I don’t want to have to stand over someone’s shoulder with a ruler like a Catholic school nun and force them to read Sitepoint or listen to BoagWorld. In reality, if they love what they do it should be something they want to do not something they have to do.

My intent with posting this article was get some ideas out there. I am sure some of you work at companies that have some sort of personal development policy. Please share any ideas, thoughts, or comments you have about what should go into a personal development policy like I described above. Whenever I get a good, comprehensive policy developed, I will share it on the blog open source style for all of you to read, adopt, and share.

No related posts.

A Not so Nostalgic Look at Pixel GIF Spacers

Ryan Stemkoski — Tue, 24 Feb 2009 13:55:36 +0000

If you’re new to web design you’re very lucky. You get to jump right into CSS based layouts. You have the ability to create clean, beautiful code. When I first started learning web design it was just prior to the birth of CSS and long before CSS was used as a layout tool. Back in the old days, complicated layouts were constructed with a web of nested tables and padding and spacing was handled with spacer gifs. The net result was code uglier than Michael Jackson’s nose.

What the heck is a pixel gif spacer?
The pixel gif spacer is to web design what the rusty coat hanger is to back room abortions. It is a tool of utter destruction, likely commissioned by the devil. For those of you lucky enough to bypass this dark period in web development, I will quickly explain what gif spacers were used for. Basically, before CSS layouts, there was no way other than uniform cellpadding and cellspacing to build padding into a design. If you wanted 10 pixels of padding between a column and text you had stretch a transparent spacer gif to create that space. The picture in the top right of this post uses dotted lines to show where table and nested table borders would likely appear and the red lines show stretched pixel gif spacers being used to create padding.

Was it really that bad?
In this old style of web development the net result was incredibly bloated and messy code. Many sites were very complicated and poorly planned. If you needed to add a line of code, a good portion of the layout needed to be reconstructed. To make layouts even remotely flexible you had to rely on a huge web of nested tables. On many of these sites, adding even a single line of text would cause the layout to explode apart creating something akin to Randy Jackson’s outfits on American Idol.

Even still was it really that bad?
YES, YES, YES. It was worse than Sarah Palin trying to sound intelligent. If you don’t believe me I have included some sample HTML from an antique website that shows an example of an average b to b website that still utilizes this technique. This code belongs to a hosting customer at Zipline whom we really enjoy, unfortunately her designer unknowingly created some very messy HTML. This is not nearly the worst I have seen but it is quite outdated and uses spacer gifs. Please, and I must stress PLEASE do not try this at home:

 




 
@import url( "Templates/style.css");
@import url( "Templates/style.css");






 
      



 Hancock

  Spokane,
      WA

 
      Ph:
      (509)
      245-3800   

 E-mail:
		
 
		
		@.com










Home
    Page
About
    Us
Puppy
    News
Apply
      Online


Our
      Breeds
Our
    Dogs
Links
Photos &
      Fun

















 

 
Quality breeder of Labradoodle,
      Goldendoodle and other Poodle-Hybrid
      Puppies 
in Spokane, Washington
 

		As seen on the Today
		Show!
 

Click for details!





 
Labradoodle - Click Here for details!


Goldendoodle - Click her for details!
            



		
New!!  
      Cairnoodles!
Click here for details!
 
What do you get when you combine the stunning good
      looks and sunny disposition of the Labrador,
      Golden Retriever or Cairn Terrier with the
      affectionate nature, intelligence and devotion of the Standard or
      Miniature Poodle? Pure Magic!
 
We've got more than a few tricks up
      our sleeves when it comes to breeding and raising the perfect family dog!
      With more than 25 years experience as a dog breeder, animal health
      professional and die-hard dog lover, She is dedicated to
      producing healthy, beautiful, intelligent and well-socialized
      Labradoodle, Goldendoodle and Cairnoodle
      puppies for approved families. Her kennel is located on a small
		ranch in the scenic countryside, south of Spokane, Washington, where her
		dogs thrive on plenty of fresh country air and wide open spaces. Her
		dogs are part of her family - they live with her in her home, and join
		in all kinds of activities, from outings and running errands, to tagging
		along on trail rides... and yes, the Doodles have even
		appeared on television, enjoying time in the limelight on the "Today
		Show"! 
 
She says that, aside from puppy breath, the most
      enjoyable and rewarding part of breeding dogs is to see the smile and
      twinkling eyes on the new owners the first time they hold their new puppy.
      Now, THAT IS MAGIC!
 
If you are interested in adding some Labradoodle, Goldendoodle or Cairnoodle
      magic to your life, she will be happy to speak with you and
      assist you in making the right decision about a puppy for you. Please feel
      free to call or email for more information, or visit our 
      Kennel News Page for the latest information and photos about upcoming
      litters and available puppies.
 
Shipping can be arranged to approved homes, world
      wide, weather permitting.
 
We look forward to hearing from you!
 
Be sure to visit our "Puppy News" page to find
      out all about upcoming litters, planned breedings, available puppies and
      other neat stuff!





To Contact Us:
She
Spokane,
            WA
E-mail:
			@
Ph:
            (509)
            245-3800  












Home Page | About Us | About Labradoodles & 
 
Goldendoodles | Meet Our
Labradoodles & Goldendoodles
Labradoodle Puppy For Sale &
Goldendoodle Puppy For Sale | Labradoodle & Goldendoodle
Links
Apply Online
for a Labradoodle Puppy or Goldendoodle Puppy | Photos & 
 
Fun

Copyright© 2003 
All rights reserved

No related posts.

Simple iPhone Emulator for Windows

Ryan Stemkoski — Sun, 22 Feb 2009 14:06:59 +0000

This post is short but sweet. I discovered today an iPhone emulator developed by a guy named Shaun Sullivan. Unfortunately, there is no way to totally emulate the iPhone on Windows but what Shawn has done is made an executable that runs a Windows build of WebKit and embeds it inside an iPhone-like shape. I had a play with it and it isn’t perfect by any means but it is the best solution I have seen for helping Windows users understand how their website shows on the iPhone.

If you’re a Windows user try it out: http://code.google.com/p/ibbdemo2/downloads/list?can=1&q=

Most things rendered similar to how they actually appear on my iPhone but the use is much clunkier than on the actual iPhone.

No related posts.

Solution for the IE7 Endless Print Preview Bug

Ryan Stemkoski — Fri, 20 Feb 2009 16:03:12 +0000

Yesterday, one of our customers called us with a very unusual issue. He claimed that on his machine in Internet Explorer 7, when he attempted to print a page from his website, the print preview function on his machine would continue to count endlessly as if it was stuck in a loop. His website has a solid valid XHTML/CSS layout and renders properly in all major browsers including IE6 and IE7.

At first, I was reluctant to believe him. I figured the problem was probably a local issue since this was not something I had seen before and was clearly browser related. After doing some local testing I discovered that an attempt to print longer pages, anything that translated into more than one printed page in IE7 did indeed result in endless looping of the page count in print preview.

Surprised there actually was a bug, Thomas and I did a little research on the web. We were unable to find many others that had encountered the same problem. The few posts we found were primarily people asking how to solve the problem on forums. Unfortunately, with no solution provided. We did come across a posting on MSDN where one user suggested the problem only happened with CSS based layouts and his suggestion was to rebuild the entire website in tables. Since this seemed ridiculous to us we decided to instead investigate further.

The first thing we did was make sure our code was valid. We validated both our CSS and our XHTML successfully. We also made sure we had the proper character set and did a visual once over of the source code. Since the website rendered properly in all major browsers including IE6 and IE7 we were stumped. We decided to start commenting out elements. First we removed all JavaScript and CSS. This solved the print preview problem but obviously blew apart the layout. We then added back in the CSS and found that the print preview bug returned. This narrowed the bug down to our CSS documents. Our website contained two CSS documents. One CSS document had all of the text formatting and another held the presentation formatting. We commented these documents out one by one to narrow the problem to a single document. We discovered the problem was in our format.css file. We then went through this document removing various declarations until we were able to find a singular declaration that was causing the problem.

The problem turned out to be with the float attribute in our navigationWrapper. The original code looked like this:

#navigationWrapper {
	width: 100%;
	background-color: #8F4807;
	float: left;
	}

The odd part is that this same exact code appeared in other elements in the same CSS file that did not cause a problem for IE7. Even though this makes no sense whatsoever the bug needed to be repaired and since there wasn’t actually anything invalid about this CSS we just switched float:left for display: inline-block for this one element:

#navigationWrapper {
	width: 100%;
	background-color: #8F4807;
	display: inline-block;
	}

Thankfully this solved our problem. Now, print preview functions great and our website still appears perfect in all major browsers including Internet Explorer 6 and Internet Explorer 7.

If you have a similar problem please report your details as a comment. We’re hoping to catalog experiences with this bug so that other users can benefit from your experience. Since this bug is relatively unknown we want to help anyone experiencing it find a workable solution. Good luck!

No related posts.

BounceBox – Cool New Mootools 1.2 Lightbox Tool

Ryan Stemkoski — Tue, 17 Feb 2009 13:12:10 +0000

Yesterday, my friend Sheldon released a cool new Mootools 1.2 class called BounceBox. It is something he has been playing around with for awhile. He used an earlier version on the site: http://www.dreamcatcher.school.nz. The concept behind Sheldon’s Bounce Box is similar to that of LightBox, ShadowBox or ModalBox. On click a box appears on screen. The box can be styled and is capable of containing various HTML elements. When using BounceBox, on click a container drops from the top and bounces on screen rather than fading in like a lightbox. The box appears similar to the Facebook popup dialogue by default but can be easily styled using CSS.

The class is actually really easy to get running. This Class requires no CSS styles other that cosmetic formatting, and can be called via DOM READY or an Event. If the BounceBox is open, then your ESC key will close the BounceBox.

So far it has been tested on:
Safari ( Mac & Win )
FireFox 3 ( Mac & Win )
IE 6 & 7

If you are interested in checking it out you can visit the BounceBox website at:

http://bouncebox.lendrum.co.nz/

OR download it directly by clicking:

Download BounceBox V. 1.0

No related posts.


Hancock	Spokane, WA	Ph: (509) 245-3800	E-mail: @.com


*Home Page*	*About Us*	*Puppy News*	*Apply Online*
*Our Breeds*	*Our Dogs*	*Links*	*Photos & Fun*