.htaccess - PHP on HTML/HTM Pages

I went into more detail about what the different processes are of adding php to a website programmed with *.html pages in this earlier htaccess post.

Here are a few more .htaccess lines that will enable php on your server. (Different servers require a different line of code.)

AddType x-mapp-php5 .html .htm

AddHandler application/x-php .html .htm

AddHandler x-httpd-php5 .html .htm

AddHandler x-httpd-php .htm .html

Check out my other .htaccess posts.

-Ashton Sanders

Programming on Principle

There are many different ways to program websites. There a many different ways to program the exact same website. If you gave the same design to 100 different website developers, you would end up with 100 pages (that probably all looked fairly similar) and 100 completely different HTML code. Is it possible to say if one is right or wrong?

The Principle of Web Programming

The first principle of website programming is validating. When you make a website, it better be 100% valid. "Ah but it looks perfect in Internet Explorer..." (but it probably looks horrible in Firefox or Opera.) If your code is not valid, that means you are "doing it wrong." Only second rate Web Developers are okay with "doing it wrong."

With HTML, you can do just about anything! From anything as simple as changing the color of a body of text, to aligning tables around your site. But just because you can doesn't mean you should. HTML is not a styling language, its a formatting language. You should use HTML to enter and position your text and body copy.

Cascading Style Sheets, CSS, is a styling language. It's purpose it to add color and life to your website. If you remove your CSS from your site, it should end up being straight text with a couple pictures.

By Why Use CSS?

CSS makes life simple! Why else? Every website has certain aspects that will be the same throughout. Take headers for example: On any given website, it will have the same color, font, size, etc for the first title on every page. You could hard program that with HTML on every page, or you could just put it between "<h1>" tags, and then in your CSS document, you tell all h1's to be a certain size, color, font, etc., etc., etc.

Then when the client comes back and says, "Sorry man, I don't like that green, lets add 2 points of magenta to it," you don't have to reprogram your entire site. All you need to do is change 6 digits in one document, and the entire site changes!

And if that wasn't enough, it keeps your website code clean! I took a site that was almost 300 lines of code (where everything was programmed in HTML). I converted most of it to CSS, and it ended up being less that 40 lines of code! Search Engines love you! It is just that much easier for the Search Engines to get the text on your site.

"Program like your client is watching you... and they understand what you're doing."
-Ashton Sanders

Product Review - Optiquest Q19wb

By Viewsonic

The Optiquest Q19wb is a 19" Widescreen Flat-panel monitor. Here are it's specs:

Model

Brand : ViewSonic
Series : Optiquest Series
Model : Q19wb
Cabinet Color : Black

Display

Panel : Active Matrix, TFT LCD
Screen Size : 19"
Widescreen : Yes
Display Type : WXGA
Recommended Resolution : 1440 x 900
Viewing Angle : 160°(H) / 160°(V)
Brightness : 300 cd/m2
Contrast Ratio : 700 : 1
Response Time : 5ms
Horizontal Refresh Rate : 31kHz - 81kHz
Vertical Refresh Rate : 50Hz - 75Hz

Connectivity

Input Video Compatibility : Analog RGB
Connectors : D-Sub
D-Sub : 1
DVI : No
HDMI : No

Power

Complies with : ENERGY STAR
Power Supply : AC 100-240V (universal), 50/60Hz (auto switch)
Power Consumption : 33W (typ)

Convenience

User Controls : Basic : Power, 2, up, down,1
OnView : Auto image adjust, brightness, contrast, ViewMatch color adjust (sRGB, 9300K, 6500K, 5400K user color), H. position, V. position, H. size, resolution notice, OSD position, OSD timeout, OSD background, fine tune, sharpness, language, recall, volume, mute
Regulatory Approvals : UL, cUL, FCC-B, TCO-03, ICES-003B, RoHS, CB, CE, WEEE, ISO13406-2,TUV-S, NOM, GOST-R
Adjustable Stand : Tilt Adjustments
Built in TV Tuner : No
Built in Speakers : 2 x 1W
Features : •Stylish slim-bezel design
•OnView controls for superior screen adjustability
•Multimedia enhanced
•VESA 100mm wall-mount compliant
•PC and Mac compatible
•Power Mac G3/G4/G5 up to 1152x870
•Panel Surface : Anti-glare

Packaging

Package Contents : Q19wb LCD Monitor
Audio Cable
VGA Cable
Power Cable
Support Disk

Dimensions

Dimensions (W×H×D) : 17.6" x 14.8" x 7.6"
Weight : 9.9 lbs.
Temperature Range : 32 - 104 °F (0 - 40 °C)
Humidity Range : 10-90% (non-condensing)

Manufacturer Warranty

Parts : 1 year limited
Labor : 1 year limited


I just purchased my second of these monitors. I received my first on for Christmas 06, so it has been almost exactly 5 months. I have never had a problem with it. I've been using the plug and play drivers, and it hasn't let me down.



The only difference I have seen in the more recent model is that it is about 1/4th of a cm taller than my first one. This may just be because the rubber pads on the bottom haven't worn down very much yet.

I got this Optiquest Q19wb off of Newegg.com for $190 (with a $40 mail in rebate). With shipping and handling I will end up paying $163 for this beautiful monitor.

And I can't fail to mention the energy star logo! Yes, both monitors have the energy star logo on them. Which means they don't burn up electricity like the good old CRT's.

I will also mention that you can view this monitor from just about any angle without a reduction in clarity! And of course since they are flat panel monitors, they don't constantly barrage you with radiation. Which just means you'll have to go outside to get a tan.

-Let me know how that goes
-Ashton

Search Engine Optimization vs Website Design

Earlier I wrote a post about the Basics of Search Engine Optimization.

In this post I'll be delving a little deeper into the basic principles that are used to create the basic rules of Search Engine Optimization.

Text is King I mentioned earlier how Search Engines can only index text. They can't see pictures, movies, music, etc. Pictures can become a very easy substitute for text if you are not careful. Many clients want that button to have a unique font with a nice shadow, which is totally fine... but not as good as having straight text.

So there is definitely a balance between Design and Search Engine Optimization. You want your site to be aesthetic enough for visitors to not be repelled, but you don't want it so picture heavy that no one finds your site as the search engines can't tell what your site is about.

"But you can add alternate text (alt attribute) to your images!"

Yes you can add alts, so that if you image doesn't load, you can have text appear in its place... but search engines know that there is really no way for visitors to see that text. So alt text will never have as much power as straight text or a "h1".

On the other hand, if your site is entirely text, with no images, you won't ever create a conversion. Images are needed to add live and personality and style to a website.

The Balance of Search Engine Optimization and Website Design.
-Ashton Sanders

Real Player Recommends Firefox

Ha! So yesterday I installed real player, and as I finished installing it, the final screen was this:



How awesome is that! Firefox is the best Internet Browser on the planet, ask any computer/Internet nerd. Anyone who knows anything about the internet knows how horrible Internet Explorer is and how awesome Firefox is!

Please make the world a better place, and trash Internet Explorer.

-thnx,
-Ashton Sanders

Firefox - Banner Blocker!

If you still are using Internet Explorer, let me share with you the best internet browser, bar none:

Firefox

There you have it, go get it. More secured browsing, and more capabilities. For example:

Have you noticed how ANNOYING the banner ads have been getting? They are freaking annoying. Like those "true" commercials on myspace... annoying. Well have no fear, Firefox is here with the sweetest extension ever!

AdBlock Plus

With this extension, just about all knows banners disappear! (Select the first option after installing it, and it will use a continually updated list to keep you protected from annoying banner ads!)

-The Internet is Friendly again... okay maybe not friendly... but at least bannerless...
-Ashton Sanders

AOL Account Cancelation - Service Review

If you need a good laugh along the same lines of my recent annoyances with Century Tel Problems, it looks like AOL is even worse than Century Tel! I don't know how that is even possible, but check out this:

Vincent Ferrari called AOL to cancel his AOL account, and it took 21 minutes, which isn't really that impressive, but what is really amazing is the four minutes of recorded dialog with the customer service representative.

Check it out here:

Cancel AOL in 21 minutes

SOOO FUNNY!!!

Hahahah! That is a a very vivid horror story with AOL.

-Where has Customer Service gone?
-Ashton Sanders

Speed Tip - Selecting Text

On the subject of how to get things done as quickly as possible, here is the first Speed Tip.

Increase Speed while copying text

The web is full of tedious work, from having to manually input eight thousand products into a database to converting a site into a new format. Yes, it is totally impossible to work on the Internet and not end up having to do some extremely tedious work at one time or another.

Take today for an example: I had 70 straight HTML pages that I was converting into a PHP-included layout where the page's title, meta description and meta keywords were all variables. So I had to go to the page source, copy the title, go to my new page, and paste the title... go to the page source, copy the meta tag... etc., etc., etc.

While selecting text (the "<title>" for example), you normally have to go the start the line (right after "<title>"), drag to the end of the line (right before "</title>" and then copy.

Heres the Speed Trick
If you double click on the first word, it will automatically select that entire word. If you hold down that second click, you can drag to the last word, and select each word at a time (; not each letter at a time). This way you only need to go to the first word and drag to the last word to make your selection.

"Whoa.. big whoop... save twenty pixels of mouse movement...." No, it's better than that, you don't have to waste time trying to get right to the front of the word. It gives you a much larger target, and thus it takes less time to "aim."

-Ashton Sanders

Website Developers - Speed

Regardless of your profession, your speed and ability to get things done quickly will make or break you. This is especially the case in the field of website design and development where almost everyone has a story of working with a "really slow" website designer, web master, etc.

At Websites in a Flash, I always am working on improving my speed no matter what the project.

"But you get paid by the hour. Who cares how long you take?" - Lazy

An sloppy and unethical business man will have this opinion, but a website designer who's goal is to create high-quality, professional websites on or before the targeted completion date won't care.

I feel that speed is one of the most important factor (seconded only by quality). That is why I call my business Websites in a Flash!

-Keep it moving
-Ashton Sanders

CSS - Absolute Position Sidebar

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
    position:absolute;
    top:100px;
    left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace "left" with "right".

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here's what you would do for a 1000 pixel width and centered website layout:

#leftnav {
    top:100px;
    right: 50%;
    margin-right: -500px;
}

Quick Explanation: "right:50%" causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn't matter what size screen you have, it will always be right in the middle. Then the "margin-right:-500px" moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won't move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the "right" or "left" in your CSS (leaving only "top:100px") your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders

CSS - Unordered and Ordered Lists

As many young website designers do, when I first got started working with HTML and CSS, I tired to stay as far away from Unordered Lists (<ul>) and Ordered Lists (<ol>). Everyone has their own reasons, but I just thought there was too much to learn about it before I could get it to do what I want.

When you have a list of items, links, etc., it should be in a list

I found this amazing article about lists on AListApart.com: Taming Lists

(Lists are also what you would use to create a pop-up menu only using CSS.)

-Ashton Sanders

CSS - Float

Their is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS - Float

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

Network Solutions - Ridiculous Web host

Who is a ridiculous web host you ask? Well I'm sure there are lots of answers to that, but here is one good one: Network Solutions.

I'm only going to cover the topic of Domain Registration:

Godaddy: $8.99 /year
1and1.com: $5.99 /year

Network Solutions: $34.99/year

What!! Are you serious?!?! It's not like you can have high-quality Domain Registration. You either own the domain or you don't... Thats it, and they are charging three to six times the price for the exact thing. It's not like being a big name registrar makes you better at registering domains.

Oh but you do get a deal with network solutions if you buy for multiple years. you can get down to $9.99 if you buy 100 years!.

That just makes me sick! I can't believe they get away with that. It's just another example of how easy it is to rip people off on the internet.

-Ashton Sanders

ActionScript - Loading Screen - Part 3

The third part of this ActionScript Loading Bar Tutorial will be putting together everything we have learned so far in this tutorial and making it work.

At the end of the ActionScript - Loading Screen - Part 2, we had put together a simple piece of code that will shrink the size of our loading bar to the same percentage that our movie has been loaded so far. (ie. If the movie is 45% loaded, the loading bar will be 45% wide.)

Now if you plug that into a movie, it will check our piece of code once, but not again, here is what you would do to have it check the code every frame.

On the first frame, of our movie, we put this code:

percent = (_root.getBytesLoaded()/_root.getBytesTotal())*100;
_root.loader._xscale = percent;

On the second frame of our movie we put this code:

if(percent < 100){
    gotoAndPlay(1); //go to frame one again
}else {
    play();
}

To summarize that if statement: If the movie isn't done loading, go back to frame one and start over. This will run the code we placed on frame one, and update the width of our loading bar. Otherwise (else), the movie has completed loading, and it is time to play! (Yes, the play(); is redundant, because that's what the movie would do automatically.

Then all you have to do is set up your movie to play in the next scene, and WALA! you have one beautiful Loading Bar!

-Let me know if this helped you,
-Ashton Sanders

ActionScript - Loading Screen - Part 2

The second part of this ActionScript Loading Bar Tutorial will be discussing that ratio between the bytes loaded so far and the total size of the movie in bytes.

ActionScript Theory

The theory behind this is very simple: If you take the amount of bytes that has already been loaded in your move, and divide it by the total size of your movie, you will end up with the percent of your move that is loaded.

ActionScript Code

We will be using two ActionScript Commands:

//How many Bytes have been loaded so far.
_root.getBytesLoaded();

//And the total bytes in the movie
_root.getBytesTotal();

Using the formula above, we come out with

(_root.getBytesLoaded()/_root.getBytesTotal())

This will give us a decimal like .4, which means 40%. so we are going to multiply it by 100 to get the correct number:

(_root.getBytesLoaded()/_root.getBytesTotal())*100;

Great, now lets apply this to what we discussed in Action Script - Loading Bar - Part 1. We are going to assign this percentage to the _xscale (or width) of the loading bar (_root.loader).

_root.loader._xscale =
(_root.getBytesLoaded()/_root.getBytesTotal())*100;

Great! Now we have the function for setting the width of the load bar. When the movie first starts loading, and there is only 1 byte loaded out of 4,000 bytes, the loading bar will be almost completely invisible, then as the number of bytes increases, the width of the bar will increase until 4,000 out of 4,000 bytes have been loaded and the loading bar is back to its normal width.

Last Step

We only have one step left to finish our loading bar, which you can view in Part 3 of this ActionScript Loading bar Tutorial.

Click to view all of the ActionScript Loading bar Tutorials on one page.

-Stay tuned for ActionScript Tutorial Part 3
-Ashton Sanders

Century Tel #4 - Service Review

Here we go again:

(This one isn't really that bad... its just a humorous waste of time.)

Note: I have a cell phone, and don't have any use for a home line, but you need a phone line to have DSL, so here I am stuck with a phone line that Century Tel can Spam, and cell to Telemarketing companies... I don't have Dish either, so all I use Century Tel for is Phone and 6.0 MB/sec High-Speed Internet.

I've had Century Tel DSL for just over a month at my new residence, and yesterday, I get a call from them letting me know that I can package all of my services... It would have been nice to have received that information when I first signed up, but you take what you can get with Century Tel.

Sweet, what can you tone down my ridiculously-priced services to?

Century Tel Representative: "I can package your High-Speed Internet and your phone together for $80/month. (and with the service charges, taxes, etc. it comes out to about $100/month.) Do you have the 1.5 MB/sec or 256 KB/sec?

Me: "Uh... I have 6.0 MB/sec High-Speed Internet... What would it cost for that speed?"

Century Tel Representative: "It says you can't get more than 1.5MB/sec at your residence..."

Me: "A speed test just told me I've got 4.3 MB/sec which is usually what Century Tel gives when you pay for 6.0 MB/sec. Can you tell me what it would cost to package the 6.0 MB/sec?"

Century Tel Representative: "No, I don't have the price for that."

HAHA?!?! You called me to tell me you don't know the price for the package you would sell me... Priceless.

-Thank you for wasting my time,
-Ashton Sanders

(P.S. Click to view all posts on Century Tel.)

(P.P.S. As of Today, if you Search Google For "Century Tel", this blog comes up on the bottom of the first page! HA!)

ActionScript - Loading Screen - Part 1

Here is a Loading Bar I developed using the ratio of Loaded bytes to total bytes.

ActionScript _xscale

This script uses three main elements. The first one we will discuss is: "_xscale"

//This is used to specify the
//width of an symbol (ie. movieClip)
_root.movieClip._xscale = *number between 0 and 100*

To go into more detail into that last element, if your movie clip is named "loaderbar" and you made it to be at its full length (about 200 pixels lets say), you could type:

_root.loaderbar._xscale = 50;
//That would squeeze it to
//100 pixels (50%)

This is what we will be using to slowly move the bar across the screen as the file is loaded.

Here is a Flash Loading Bar to demonstrate the _xscale Property.

-Stay tuned for Part 2
-Ashton Sanders

Sweet Flash Animation

There is an awesome Flash Animation that you should definitely see.

There is very little ActionScript, but nonetheless it is one of those animations that you could just watch forever and still not see everything.

Click to see this Sweet Flash Animation.

(This was designed and Created by Geoffrey and Ashton Sanders of Websites in a Flash)

-Enjoy
-Ashton Sanders

1and1.com - Service Review #2

Today was my first day of real annoyance with 1and1.com. (Click to see my last Service Review of 1and1.com.)

Today, all of my website I had hosted with them went down for about 2 hours. When my server crashed, I was on the phone with a client doing tweaks on a website, and the site would not come up any more...

But the worst part of it all was I had just convinced a client to switch over to 1and1.com, and they had just published an ad in the LATimes. So they had all these people coming to their site... and it was down for two hours...

Of course I can't really blame 1and1.com. Electronics fail all the time, but still... for three years with GoDaddy, I never had my site go down (that I know of=]).

-Ashton Sanders

FavIcon - Image in the Address Bar

What is a FavIcon?

A FavIcon is the image that appears in the left side of your address bar for certain sites. For example, here are the FavIcons for Websitesinaflash.com, Blogger.com and Google.com:



It is actually a very simple process thanks to HTMLkit.com. All you need to do is make a square image that you would like to become your FavIcon, and upload it to this site. They'll give you a zip file with the FavIcon in it, and you can upload it to the root of your site. WALA! Here's the site:

http://www.htmlkit.com/services/favicon/

-Ashton Sanders