Web Development

Ok, I know I have a bunch of bugs to report as well but this what I’ve been working on, so I thought I would share it with you.

Many sites use flash tor fading images into each other, or to present a slide show. Sure, you can do this if you have the flash experience, or have one of the many programs that create them for you (most are paid programs, unless you want a watermark.) It’s not a bad solution, but there is another solution, Javascript.

A friend of mine found this cross-fade script, Image Cross Fade Redux. That shows it in action (I suggest taking a look so you can see what the cross fader does), he unfortunately doesn’t offer you the code. It’s not hidden, but he doesn’t display it for you to download or copy and paste. Well, here’s the code:

There are two parts that you may have/want to change.The first is the two parts where it says “5000″. That’s how many milliseconds in between each fade, and I wanted 5 seconds.

The second is the line ‘css.setAttribute(“href”,”/css/xfade.css”);’. Simply change the “/css/xfade.css” to the location of the CSS file I’m about to show you:

Feel free to change anything in the #imageContainer section of the CSS file. The only parts that need to stay is the “position: relative;” and “margin: auto;”. I suggest setting the width and height to the width of the widest image and the height of tallest image.

Make sure you include the Javascript on the page, a line like:<script type=”text/javascript” language=”javascript” src=”/js/xfade.js”></script>

The last part is the actual pictures you want to cross fade into.

There is one thing you should pay attention to.

The <div id=”imageContainer”> contains all the images you want to fade into each other. This must remain the same.

You can see it in action on Life Size Custom Standups, where I was learning to use it.

-Kerry

Ok, so its been over a month since my last blog. I promise more are coming, I have a few topics I’d like to go over, such as cron jobs and yet another IE bug. Possibly some complaints about more horrible hosting… you know, the good stuff.

I would just like to announce that my site, http://www.phoenixdev.net, has gotten a new design. I’d love some feedback. I haven’t fixed up all the CSS on certain headings – but I’m talking about the overall look.

Talk soon,
Kerry

Photoshop, atleast 7.0, doesn’t natively support cursor files (.cur) or icon files (.ico).

To solve this little problem I downloaded a little freeware utility that can handle .ico’s. Well, I was simply looking to find out what size the favicon.ico was supposed to be when I came across a tutorial gave a much better solution.

It’s a Photoshop tutorial for favicons. It shows you where you can get a free plugin for Photoshop that lets it handle icons and cursors (really easy to install). It also tells you all the information you need to know about favicons and gives you links and resources to see some of the great ones out there. I really suggest doing the tutorial: How To Create A Favicon.ico.

That’s it for today,
-Kerry

The design has arrived! Thanks to Rafferty Pendery and Studio 98 Designs, I have a beautiful website design! You can see it at Phoenix Development home page. I will be putting up content soon, as well as a list of all my services and all the scripts I’ve been working on.

It’s a little bit ironic how so many web developers and web designers have errors on their website or simply incomplete cycles. Most of the time they are busy with so much other work that they don’t have enough time for their own site, but I think its important to set a good example. Phoenix Development will live up to that standard.

-Kerry

I’ve run into a lot of trouble with this aspect in the past, namely onHover events with transparent buttons.

If you’re getting excited because you think you’re reading the solution – take it down a notch. Yes, I know how to do that, but that’s not what this blog is about. My solution to the above problem will lag the browser a little bit, not that noticeable, but definitely irritable.

This post is to handle the problem of simply displaying transparent PNGs in IE. Well, you have to use CSS and call a filter that allows transparency. That’s a simple fix.

The other day my friend, Rafferty Pendery, ran into this solution, which I thought was far better and wanted to show it to you. This page has the solution: PNG in Internet Explorer: How To Use. Basically, they are giving you a Javascript that automatically goes through all your pictures on the pages and checks if they’re PNG. If they are PNG, they give it the CSS filter.

All you need to do is include the Javascript file and all your PNGs will display their transparency.

Are you wondering why you shouldn’t use a GIF, which also supports transparency? A GIF doesn’t keep the same quality of color as a JPG or PNG unless its solid lines. If you’re creating some cartoon animation, great, use a GIF. If you are using a high quality picture you should use a JPG or PNG (JPG compresses better, but doesn’t support transparency.)

-Kerry

Hello once again!

I have very exciting news about Photoshop! Ok, only exciting if your photoshop hasn’t been working for the past six months and you finally figured out the bug.

Apparently Windows doesn’t like to have more than 1000 fonts loaded in the system. Takes up too much memory. Here’s a chart on what causes system delays: What Slows Windows Down? I was without this datum until yesterday, and I had loaded 5000+ fonts onto my system from a package my friend gave me.

My friend dug up this article on photoshop problems (he was having the same problem as me) and removed most the entire package of fonts and just left the originals, and voila! It worked! I tried it and it worked as well!

My lesson has definitely be learned. I hope this blog helps some people out.

-Kerry

There is a vast amount of tools that can be used in web development. In this blog I’m going to give you my opinions on a few of them.

Well, the first thing I’m going to talk about is the use of WYSIWYG (what you see is what you get) editors. One of the most common, and worst ones is Front Page. I haven’t actually used this product, but I’ve never heard someone speak of it highly. I’ve seen it ruin the code on pages (make really confusing a bad code), so I really don’t suggest that.

As a web developer, I don’t actually use WYSIWYG, but I do use Dreamweaver (DW). This is a great design tool and supports all languages besides ASP.NET. Unfortunately, DW isn’t free. If you have the money to get it, it’s got a lot of useful tools and I’ve been using it for years with very few problems. The older versions (not DW 8 ) also can create some messy code if you use the Design View, so if make sure you clean the code up after.

Microsoft Visual Web Developer 2005 Express Edition is a free WYSIWYG. Along that line, they have an express edition (means it’s free) of every language in Microsoft Visual Studio. They are apparantly not a powerful but I haven’t hit their limitation yet, and they’re great tools. They keep your code clean, and they do support ASP.NET (if you’re programming in ASP.NET, this is a must). The reason why I don’t use them all the time is they don’t support PHP, which is their one downfall. PHP is best run on Apache, which is best run on Linux, which is kind of Microsoft’s rival. If you want a free PHP WYSIWYG, I haven’t it before but I think PHP Designer 2007 – Personal is a good one.

Both DW and the Microsoft Visual Web Developer have built in FTP programs, but if you decide on another editor, or already have one that doesn’t include an FTP program, you may want to know a good one. Core FTP LE is a great free FTP program that I’ve used for various other reasons in the past and it works very well, so this is my suggestion.

Another unusual program that can come in handy is a better notepad. Sometimes, for various reasons, you may have to open a certain file in notepad instead of your editor. I’ve tried two, but was completely satisfied with Notepad++. It supports color coding for pretty much every language and some other really good features. It’s definitely my pick.

Graphic tools. There are many different graphics programs that may interest you, many are kind of pricey. My favorite is Adobe Photoshop CS2. It’s kind of complex, but really has the tools to help make great artwork. There are also many tutorials all over the internet to teach how to do pretty much anything with it, and it’s probably the most popular of the graphics programs.

Fireworks is the graphics program that comes in the Macromedia Suite. It’s very user friendly and integrates into the other Macromedia products nicely, but I don’t like it nearly as much Photoshop, even though it has a lot of functionality.

The next program I would go to, the only free one I recommend, is GIMP (pardon the name). It’s the only open source graphics program I know, and it’s supposed to have similar functionality to Photoshop. I didn’t like it because it seemed to be a bit more confusing and used several windows instead of one. I have, however, seen a lot of great artwork created with GIMP, so it’s definitely a good choice.

That’s it for now. There are more specific programs for specific areas of web development, but I will go into those later .

Until next time,
Kerry

Hello,

Today’s post is how to start to become a web designer or web developer. Now, the easy and rather expensive way would be to go to some community college and take classes in their different courses and you’d probably get mediocre skills and be able to do something after them.

I think it’s important to make the difference between a web developer and a web designer. Many people don’t know there is a difference and can cause problems.

• A web designer is someone who makes the website look nice, and this is very important. They make sure people like your site and want to stay, they induct them into your site. This includes the layout, graphics, text, fonts, and so on. Being a designer you have to have very creative skills.
• A web developer is someone who makes the website work. They do all the back end programming, which could be as simple as making an email form work, or running a system like Myspace (all the functionality it provides is done by the web developers). Being a developer requires a lot of technical skills.

For instance, I am a web developer, and I know something about 11 different languages. This includes the basics of HTML to more complex things such as PHP, SQL or Regular Expressions (see my post below).

Of course, at the beginning you will be taking the role of both, as your first site probably won’t be very complex. I personally have gone to no classes in web development. I have learned everything I know through online tutorials or asking the help of friends or people on forums. A great place for learning languages is www.w3schools.com. They have a tutorial in nearly every major language, and that’s where I start to learn all the languages I know.

A great beginning for any web person, and especially a designer, is The Non-Designer’s Web Book by Robin Williams. I’ve only read the first 100 pages or so, but it is going over everything having to do with making a website. Some of the prices they quote are a little inaccurate (it does not cost $30 to register a domain), but for the most part it’s pretty dead on. I’ve read one of her other books and it really helped me.

So, what if you get stuck? What if you don’t have any web savvy friends? Well, that’s where forums come in. There are many of them that can help. The one I like the most is Tek-Tips. Unforunately for me, someone got me kicked out of the forum for some bogus reason, and they had a problem with a re-register, so I’ve stopped going there. It was the best when I could go there.

If you need another forum, just search google for “______ forum” and you should find one.

Now, to get started with a website you will need to get hosting. Well, most hosting costs something, but there are a few that you can experiment with, like Freehostia. It might be a bit complex to start up, but they will give you a name like “yourname.freehostia.com” which is better than most people, and if you go the web development branch they support PHP (a very common web language) for you to mess around with.

If you’re looking for cheap but good hosting, 1&1 is great. It’s who I use and they’re very cheap ($2.99 a month with a free domain name). I’ve heard, however, that their support isn’t the greatest. I’ve never had to use their support so I can’t account for personal experiences.

The next paid host I would go to is Godaddy. They are a bit more expesnive (hosting goes from $3.49 to $3.99 a month) and you have to pay separately for their domain. They are supposed to have good support and a good control. I’ve used them once, and they were fine, but 1&1 is cheaper and has some extra functionality.

Hope that helps!
-Kerry

For those of you who don’t know, a Rich Text Editor, or RTE, is that really nice looking thing that you can enter text into that will automatically format it (such as bolding, italics, linking, aligning, etc.).

Today, my post is about choosing an implementing an RTE for your website form. Being as frugal as I am, I stuck to the open source selections.

First I was looking for something that was pretty, and when I typed in “free rich text editor”, I naturally got the Free Rich Text Editor website (http://www.freerichtexteditor.com). I took a look at a couple other options, but this one was the prettiest of them all, so I downloaded and started installing it. If you want to skip a nice and long story having to do with this editor, skip a few paragraphs until I talk about the next one.

The first thing I noticed was that it was not designed to be implemented in a page more than once . While it had configuration settings, they were all in a separate js (javascript) file that globally set the identity. I wanted 3 of these on one page, and I wanted unique identities for each one. Well, being the developer that I am, I decided I would fiddle with the code.

I found a way where I could include variables in the initialization function to specify the identity of the form name, it worked! Yay for me! I quickly found out, however, that my javascript form validation wouldn’t work with it. It took me some time to realize why, but I found out that it was in an iframe, meaning it was a separate window, and my validation tool couldn’t pick up iframes. Oh, and as a side note, the actual editor itself created iframes and all the functionality on one of the most confusing javascript pages I have ever seen. In addition, I found no support on the site.

I decided I would make a personal validation tool, I had done it before and I saw no reason why I couldn’t do it now, and I had already spent over an hour, maybe two, working on this and wasn’t about to give it up. Before I did that, I needed to find a way to give each iframe window a unique ID. I tried the same trick of adding it to the parameter list, which I thought worked. I then came to another error, it was in another function. I found where it called that function (in the initialization function) and added it to it’s parameters too. Got by another function, but got hung up on another one.

It had been 2-3 hours now and I was getting sick of it. I needed an RTE that didn’t use iframes, it was a simple as that. I trashed that project and started looking some more, and found that most RTEs use iframes, apparently it was the easier way to do it. Oh, I had also spent about an hour fiddling with some CSS to make it look right, as I found another design on the site had set some CSS properties, so I was thoroughly done having to do anything with it.

I finally decided I would handle it tomorrow (or today), as it was 3:30 AM and I had other work to do. Well, my friend who had heard me complaining about my RTE, decided to search. While I worked elsewhere he kept showing me more RTEs he found, and I kept pointing out the outpoints. He finally found one that looked promising, TinyMCE. MCE stands for “Moxiecode Editor”.

It is an open source editor that converts your textareas into RTE forms. Wow, perfect! I can use my normal names and ids for my textarea and they cross over. I looked into it more, and they had a wiki support form with a LOT of data, tons of example, some special plugins, etc. I decided to install it when I woke up.

The installation went quickly and it worked like a charm, no CSS hassles, the customization I needed was shown in clear examples on the website, was perfect. Well, I thought it was perfect, but then I found my validation didn’t work again. I was curious as to why.

It was a weird symptom because my validation would say it was an empty field when I submitted, when I submitted again (no changes) it found it filled. I found that a special call was being made on the form that takes the data and sticks it into the text area (all documented on their site), but this was done on the submit, and my validation ran right before the form was submitted. I simply placed an onclick event to my form, so that it called it BEFORE my validation got to it, and it worked perfectly. This was the code I added to my form: onclick=”tinyMCE.triggerSave();”
I also installed one of their plugins, TinyMCE Compressor (supports all major scripting languages besides classic ASP). This makes it load much faster, but I warn you, there is a bug. They have an installation guide to it in their wiki, which you should follow exactly except on one point. There is a plugins options and it lists a ton of plugins that the compressor will speed up. If you’re using any of the plugins, fine, leave them in. I found that when I left them at the default, my “add link” button wasn’t working, and found other people had the same thing. I was told to make plugins section empty, which I did and it worked fine. I have a feeling it was a plugin called “advLink”, but I’m unsure. I found this answer on their support forums when I did a couple of searches.

Now, it all works fine and I’m really happy with it. If you need help with any of the tweaks I did, let me know

-Kerry