Automagically generate your own hexadecimal color codes!


Since there seemed to be a little hexadecimal color code trend on this page for a little while, I thought I'd continue the tradition with a little something I found called Colormat 3001. By dragging the sliders there you can generate all the colors you could want to use on a website. go to www.yaromat.com and click on the Colormat link. .. i won't make a direct link to it because if you poke around more on Yaromat you'll find quite a few Dreamweaver extensions and even a Java Macintosh emulator, just for fun.

Worms, worms, everywhere...

Oh, will the madness ever end? Just in case you haven't already heard about this latest e-mail worm, here's a good article with some instructions on how to eliminate this pesty bug.

PCWorld.com - Sircam Worm: Crawling Fast but Easily Crushed

Ok, I'm a new guy so i should start off by saying 'burrito.'

Anyway, since this is a web design theme, I like coding languages, like PHP right now, so I dug up a link to a help file. Yea it's on PHP's site, but hey now it's even easier to learn.

All you gotta do is get the manual (well and read some). Also find a free php host to learn on, ok so it's alot. Bear with me on this.

More colors...

Here's an even better table of hexideximal color codes:

Webmonkey Color Codes

(Thanks Ellen, for the link)

All the colors of the rainbow...

Handy chart for getting those hexidecimal codes for various colors.

RGB Color Codes and Names

The morning after...

Things are now back to normal after the Blog-a-thon.

Of course, the big news of the day is the impending destruction of the Internet by the Code Red worm (ok, maybe I'm exaggerating a little bit).

Code Red Alert

Thank you!

Well, that's it for the 24-hour Blog-a-thon. Thank you very much for those that sponsored me.

One last CSS post...

Here's one more good tutorial, the basics of CSS tags - the who, what, when and why!

Step 1: The Layout - CSS in 7 Easy Steps

More on CSS...

Did I create more questions than I answered? Here is a basic tutorial to look over:

Anthony's Cascading Style Sheets 2 Tutorial

CSS in detail

Let's look at a two-column layout on Glish.com (ALA style):

body { margin:0px 0px 0px 0px; } <-- nothing tricky here, just establishing the margins as zero pixels

#leftcontent { <-- we're setting the width of the column, borders and margins
float:left;
width:67%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;}

#rightcontent {
}

p,h1,pre { <--- defining some text elements
margin:0px 30px 10px 30px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#rightcontent p { <--- establishing the right column
font-size:10px;
margin-left:0px;
}

Ok, so we stash this code in the "head" section of a web page and then set it with two "div" sections, one each for the left and right columns.

Here is the example (be sure and look at the source code)

More CSS

Next, let's surf over to bluerobot.com and look at a couple more layouts. From here, we'll pick a two column page and start looking at it more closely.

The Layout Reservoir - BlueRobot

CSS Layouts

Strap yourself in with the seatbelt, because here we go with the last tutorial.

So, you want a two or more columns on your web page. Frames don't play well with the search engines, and your tables just don't spark any interest. Well, let's examine using CSS to do the layout.

Start here and read up on some good code by Eric Costello:

glish.com : CSS layout techniques

Three more hours to the Blog-a-thon! My final tutorial will be on developing a two-column page layout using CSS (not frames or tables).

I will be refering to a couple of other excellent sources and then analysing the code bit by bit, to better understand the process.

Stay tuned!

Modifying your windows...

Ok, we've got the basic link down, now let's add some more of the options. Let's add the scrollbar and the location:

a href="javascript:void window.open('beach.html', 'Sample2', 'width=340,height=260,scrollbars=1,location=1');"

Click here to test it

Opening new windows, continued...

So, there's the traditional method, but let's say you want more control over that new "child" window that you're opening. Knowing the attributes that you can control from the tutorial below, you can control the height, width, turn the toolbar on and off, etc.

And, if it is a one time deal, you can get by with something very simple. Just use the window.open command in your anchor tag:
a href="javascript:void window.open('/images/beach.jpg', 'Sample1', 'WIDTH=340,HEIGHT=260');"

Click here to try it

Opening up links in a new window

The next item on my list of topics. We've touch on this a tad bit, with the pop up windows. There is the classic method, using the "target" attribute of the anchor tag.

a href="http://whatever.com" target="_blank" <-- opens the link in a brand new browser.

But, you can control what parts of the browser you want to use in your new window. Take a look at this article:

Popup Tutor

(if you clicked on this, you got a new browser, ie. _blank was the target)

Putting it to the test...

Ok, let's combine the two previous tutorials and create a pop up window with a colored scroll bar.

Click here to test it and then check out the source code.

Scrollbar finale...

If the previous two sites weren't enough, this handy little tool creates the CSS code for you.

Copy and paste and violia! You've got your scrollbars!

Scrollbar Color Properties

Scroll bars continued...

And again, here's another good article.

Fabulous tropical scroll bars for IE 5.5 - Web Building - CNET.com

Customizing the browser scroll bar...

You know you want them - those spiffy colored, funky scroll bars that only the
coolest web sites have. Let's walk through it step by step.

First off, let's visit this site for an introduction:

ZDNet: Help & How-To: Colored scroll bars

Browser wars...

Here is a good discussion on designing for all flavors of web browsers:

Web Page Design for Designers - Razzmatazz

Pop Up Windows, conclusion...

Now, we need to use this script somewhere in your page and pass along to it the "getURL" value that you want to use.
Where you want to create the link to your popup, use this:

<a href="javascript:openWindow('myURL')"> Click here for your popup </a>

Of course, substitute the actual address for 'myURL' and away you go!

Pop Up Windows continued...

So, did the tutorial tell you everything you need to know? Probably not. It took me a few times to get it to sink in.

Ok, at the core of what we are trying to do is the "window.open" command in Javascript. How we're going to use it is in a "function" (ie. a script defined with a name and given a specific task to do). Not to reiterate all the basics of putting together a script (you usually put it in the "HEAD" section of the web page), let's start building our script.

I'm going to name this function "openWindow" (for obvious reasons) and we're going to pass a variable to the function, named "getURL" - why? So we can reuse the function and define what page we want to open on each occasion. In addition, we're going to define the size of the window in height and width.


<script language="javascript">

function openWindow(getURL)

{
window.open(getURL,'WindowName',
'width=400,height=300,
scrollbars=yes,menubar=no');
}

</script>

more to follow...

Tutorial numero uno...

Ok, let's delve into the first tutorial for the night. Let's go step-by-step into developing
a Javascript window popup.

First, a link to the basics:

Thau's JavaScript Tutorial

PSP tricks...

One particular feature in Paint Shop Pro that I like is the ability to capture screenshots. It's handy for making cool graphics using elements from a program window or making a graphic from your desktop.

Here's a snapshot from my computer.

Pictures, continued...

Now, you've got yourself a spiffy new digital camera. Now what? Well, you need to resize and touch up your photographs with a decent graphics program. Personally, I like Paint Shop Pro:

Jasc Software

It is fairly inexpensive (compared to Photoshop, et al.), easy to use and there are lots of books written about it.

For use on a web page, you want to optimize the photo so that it doesn't take 3 hours to view. You can usually get decent quality at 256 colors and a picture size of about 320x240 pixels. Try to keep your photo to around 15k - 25k in size and your viewers won't complain about waiting forever for your pics to load.

Let's talk pictures...

For the next few posts, let's take a look at digital photos and getting them on the web.

For a little background, check out this site for some general info:

Ars Technica: Digital Photography: Today and Tomorrow

Host your own...

For those of you that are running your own web server, either at work or for personal use, this site is a great place to hang out and discuss server-related issues:

HostHideout

Status Check

During the blog-a-thon, I'm using the following:

• Web Log: Blogger (of course)


• HTML Editor: HTML-Kit


• IM Chat: AIM, nickname HDDarrell


• IRC: DALnet, #virginia and irc.vavalleyirc.com, #blog


• Food: Dreamery Ice Cream


• Liquids: Water and Beer


• Photos: Olympus D-220L Digi-cam


• Graphics: Paint Shop Pro

Too much information?

It's all relative...

Some what related to the previous post, you have to be aware of your links and how everything fits together. What am I talking about, you ask?

Well, anchor links can be either relative or absolute. Let's say all your web pages and images are in one big happy directory (ie. folder, sub-directory - ya know what I mean). You can link to them, relative to your present position (ok, the location of the file from where you are linking): src="./filename.jpg" - or just src="filename.jpg" - ./ being the same directory you're in. Say the file is in a sub-directory under your current directory. Then use src="./subdirectoryname/filename.jpg" - or of course, src="subdirectoryname/filename.jpg"

What if the file is in a directory "above" your current directory? Still possible, just use src="../filename.jpg" - where then ../ is referering to the upwards directory.

Ok, what if the file is no where in your directory tree? Oh my gosh, you're out of luck! No, just kidding. That's where absolute links come into play.

For example, you want to display a picture that is located on a friends web site. You would then use the full URL in your anchor: src="http://anyothersite.com/images/filename.jpg" - depending on the location of location of the file at the other server, of course.

Ok, so I'm sure I made that as clear as mud.

I've got a web page, now what do I do?

Ok, you've learned a little HTML, you have put together 5 or 6 web pages for your site. How do I get it on the Internet? That's got to be the second most asked question that I get.

If you've got an Internet Service Provider (ISP), you probably got some free web space with your account. Check with your ISP for specifics, but you'll need to use the infamous "File Transfer Protocol" (FTP for short) to send the web pages to a server.

For personal use at home, I've grown to like WS_FTP. There is a free version for non-commercial use:

Free Stuff

Quite a few HTML editing programs have some type of FTP tool built in. Front Page, for example, has a "web publishing tool" which is just another way of saying that you're sending the files to the server via FTP.

Welcome to the Blog-a-thon, random-style!

Well, I've got on my official t-shirt, taken a short nap and now we're ready to roll.

How basic to start out? To be fair, let's start with a link to some HTML 101:

Yale Style Manual

Particularily, look over the sections on site design and structure. Quite a few questions that I get are at that level. Issues like "how do you link the whole site together?" and "how do you get around from one page to another?" require some forethought. Take a moment and sketch out your site, before you even start writing the first page of HTML. Any planning you put into your design beforehand will pay off big later.

Tomorrow is the big day!

The 24-hour Blog-a-thon starts at noon pacific time, so that translates to 3 p.m. here on the east coast. I *thought* that I'd be all prepared and have some tutorials already worked out and ready to go, but no. So, be sure and visit several times this weekend and see how incoherent I can be!

And to make things even more fun, I've added a chat link over in the right hand column. Pop in and visit for a spell. I'll be glad to take any suggestions or requests about topics that could be posted here.

Tutorials that I'm working on for the event:

• Pop-up windows


• Customizing the browser scroll bar


• Opening links in a new window


• Cascading Style Sheet two column page layout

Vector Fun!
I saw a website not too long ago that i thought was really cool. This guy takes Flash vector graphics to a whole new level and he shows you how to do it too! Never thought you could draw a photorealistic tomato in Flash? Now you can.

Vector Kid

On a side note, I ran across this little tidbit while reading through the previous stories. Everything you would ever want to know about web server packages, but were afraid to ask.

ZDNet: Enterprise: Servers Homepage

From the "for what it's worth" department...

I've gotten into many a discussion over Unix vs. NT web servers. The truth is, the track record for Internet Information Server (IIS) hasn't been great.

News: IT bugs out over IIS security

And add this to the list of reported bugs:

News: Web at risk from new MS flaw

Not to forget the patch you need to fix the problem:

Microsoft Bulletins

MORE... on 508 compliance

508 compliance... ewww, did I just say that?? eGov was in Washington DC early last week (July 9, 10, 11) and aside from some interesting words from Larry Ellison (CEO Oracle), Macromedia was showing off their set of Dreamweaver and UltraDev extensions for 508 compliance.

Of all of the tips and tricks I received from them the most important and most valuable was that there is a huge difference between compliance and accessibility. As of this time only government sites will be held accountable for compliance of 508. Being in compliance will almost assure your site is accessible to those impaired, but it is not neccessary and should not be!

The goal of good web design should be the accessibility part. I personally do not see any other reason for 508 besides for the lawyers to make a huge lump of money as people start suing sites for non-compliance. BLAH!!! If the site is accessible in the first place then compliance will never come up! I am more than guilty on many, many occassions of not creating accessible sites. www.redcross.org is the prime example but steps are being made to change this and I suggest Macromedia extensions!! They are great, and there are 11 or so of them that can be found at http://www.macromedia.com/exchange.

The UseableNet suite is the best one so sign up, become a responsible web designer and make your content engineers and web masters happy !!

Enhance your chi...

Maybe you've heard of feng shui or maybe not. Either way, this is a new perspective on web design worth a look. Maybe it will help provide a new balance and harmony to your new project.

Borrowed brilliance - Web Shui

It's official now...

Yes, I've thrown my hat in the ring and signed up for the 24-hour Blogathon. Give me a shout if you'd like to be a sponsor. So far, four kind people have agreed to do so.

Charity of choice, RAINN - the national sexual assault hotline. They have local centers where I live, including New Directions and Citizens Against Sexual Assault (CASA).

Of course, I'll be posting comments, tips and tutorials on web design. Probably toss in a few web server tricks too. Stay tuned!

It's for a good cause...

Stay up late and write in your blog every 30 minutes. Get friends to sponsor you and make a donation to your favorite charity.

24-Hour BLOGATHON!

hey everyone... my new site is up at www.richardfelixjr.com. go visit! sign the guestbook! say hi!

Ok, I'm a little on the slow side, but better late than never. Greetings to our newest team member, Richard !!! He's already posted on the daily log and will soon be putting up a new web site right here on randompsycho.org!

More Flash info than you can shake a stick at...

Welcome to FlashPlanet.com

According to this site, 53 Internet companies shutdown last month. Interesting read, for those involved in web design professionally.

Webmergers.com


I'm sure someone has already thought of this in the real world. [smile]

What will they think of next?

News: Hackers learning to can spam

Anyone want good Photoshop and Illustrator Tutorials?


For the best tutorials I've seen in a long time, (they're even downloadable in .pdf format), go here:


thinkdan.com

The future of web publishing?

Competition is a good thing. For those interested in the "big picture" and web based publishing, read on:

ZDNet: Enterprise: What's the Net worth of Adobe's cross-media scheme?

P.S. Speaking of Adobe, I recently purchased their GoLive editing software. More comments and reviews to follow. Stay tuned!

Looking for free web hosting? Check out this list. Happy hunting!

ZDNet: d e v e l o p e r: Personal Web Hosts