Doing any level of web development means having a variety of tools that aid your efforts. I have a collection of tools that I’ve either downloaded or paid for that I use on a daily basis, and some that I use here and there. These are free tools that help my productivity and what I’ll be using during the BlogSpot Blog series.
CamStudio
Sometimes you need to create videos. CamStudio is a free video and image capture application that can record the screen you are looking at, and with a web cam or microphone, record your voice for narration. It’s a handy tool, and I’ll be using it for a few posts in this series.
Another tool I just recently found but have not downloaded yet is Windows Live Movie Maker. I’m going to find time to download it and play around with it a little. Looks interesting though!
ColorPic
ColorPic is another free tool that will allow you to capture the color code of anything on your screen. Sometimes you find a site that is using a color you really like. So how would you find out that color’s code? Easy. By clicking one of the palette squares in the application, and then hovering your mouse over any part of the screen, you can get the hexadecimal color code by simply hitting Ctrl-G on your keyboard.
Or, you can take the long way and inspect the HTML…I’d rather save that time for other things though. I suspect you feel the same.
Another benefit to this tool is found later in the marketing phase of a web site. When you start to create profiles on some of the social sites that are out there, want to use this as a holder for your site color scheme. I think it’s important to keep a consistent theme sometimes, albeit I’ve yet to use it in that manner. Normally, I’ll use it when tweaking a site element and color coding it to fit in with my existing colors.
Firefox and IE Browsers
Every web developer needs AT LEAST two browsers on their system. The first is IE (Internet Explorer) and the second is Firefox (or a mozilla based browser). When you develop a site, you should absolutely use FireFox as your primary browser when viewing your site and making changes to your style sheet.
Why?
Firefox is more compliant to CSS standards than IE is. After the site is looking great in Firefox, it’s then time to open up IE and cry begin to make explicit tweaks and corrections for the Internet Explorer browser. I also happen to run IE6 and Firefox 2.0, which you probably won’t find available for download. This gives me a good baseline to design a site to.
I also happen to run Flock for regular web browsing and leave these two “out of the box” clean for testing purposes.
Firebug
Firebug is a Firefox browser add-on that allows you to inspect a web page quickly and easily. It’s one of my favorite tools when making CSS changes, as well as drilling into the various parts of any given page. If you download any tool on here, make sure it’s Firefox and Firebug!
It’s also what I use when I look at other Blogger sites. When you ask me ‘Why’s this doing that?’, I use Firebug to check inside your page and determine what CSS changes you need to make. In fact, Firebug allows you to make those changes right in the interface and instantly see the results. It’s quite handy that way. As you might imagine, that could make you look like a super hero. The tool is the hero here, not the person using it.
Chew on that for a bit. Think about it. This tool will allow you to make changes in it, see the results, and then you can transfer those changes right to your template in blogger. Save template, refresh web page, viola! Take that one step further, because you’re in Firefox, you can two tabs open. One for the web page, the other for the administration page. You are now getting productive and ready to do some serious work on your Blogger template.
This tool will be used extensively during the the development of the BlogSpot Blog and will most likely refer to it in the series at various times.
Windows Live Writer
I wrote a post on Windows Live Writer that shows the benefits and reasons why you want to use this for publishing posts to your blog. You can download it here if you don’t already use this fantastic blogging tool.
HTML and CSS Editors
HTML and CSS, as you might already know, are nothing more than text documents that can be edited a myriad of ways. You can use the lowly notepad, or have a big fat MS Visual Studio/Expression install. The tools I happen to use cost money and I wouldn’t expect you to pay for them unless you’re really, really serious about web development. So for the hobbyist, what can you do?
Find a free tool and learn how to use it. That’s right, you’ll need to figure out what works best for you. I’m a bit off here because all the tools I use cost $$$, and I’m not as familiar with the free tools in this area. Recommendations from other web developers are welcome here.
CoffeCup’s HTML Editor might be the ticket, or maybe you can swing things with a 30 day trial of Dreamweaver. The thing is, a high end editor will provide color coding of the HTML syntax, Intellisense, and error checking/validation.
Free tools won’t be as well-rounded in functionality, but you should be able to find one that works for you. It matters not what editor is used, what matters is that you understand the differences of HTML, JavaScript, CSS, XML and HTTP. Ok, maybe not the HTTP, but if you toss in a healthy does of something new each day, in a year you’ll find yourself leaps and bounds from where you are today. This stuff isn’t hard, but it does take some dedication and trial and error to understanding it to a malleable degree.
CSS Editors – A good list of CSS Editors can be found on speckyboy’s post on 7 CSS free editors. Sometimes a second tool that specifically addresses one facet of web development can be a good thing.
One last note on this, and I’ll harp on this more in another post. Do not succumb to the temptations of design mode. Use the code view, take your hits, learn the code, THEN learn the designer. You will thank me for it one day.
What to do Next
You’ll need want to get your computer environment established and become familiar with these tools. I haven’t decided if I’ll go into detail on any one of these yet, but I will if there is enough yelling and screaming for me to do so. hahaha
Go ahead and download these tools if you don’t already have an equivalent means to perform what each provides. Begin to play around with them and learn them to a useable level. Over time, you’ll get more familiar with each and more proficient with their use. But that won’t happen unless you dive in and start. Just remember, you don’t have to work directly on your live blog to learn these tools. Make a sandbox blog, make your changes there, then transfer to your live blog when ready.
If you have any issues with any of these, I firstly recommend finding a forum of users where an answer to your question or dilemma may already be addressed. As always though, you should feel free to ask me anything about the tools I’ve described above.
Have fun exploring these excellent tools!
You might also enjoy these related posts
- BlogSpot Blog – Using Free CSS Templates To Define The Look Last week I explained a little more about the skin tag, and showed you where all the [css] style declarations are going to be placed. This week I plan...
- BlogSpot Blog – Creating a Sandbox Blog for Development and Testing Creating a sandbox blog for your development and testing purposes on a BlogSpot blog is one of the best things you can do to help you increase your knowledge...
- BlogSpot Blog – Defining a Web Site Project Before you rush into the development of a blog or web site, it’s a good idea to take some time to plan what it is you’re going to build....
- BlogSpot Blog – The Smallest Blogger Template I always enjoy seeing what is possible on other systems and web sites. I’m not a hacker by any means, nor would I EVER call myself that (unless I...
- BlogSpot Blog – The Skin Tag Explained One feature you’ll find in a BlogSpot blog is the ability to use variables for defining the fonts and colors used on your blog. Using variables within the skin...
Wayne John is a web developer in Southern California that shares his 25+ years of programming and web development experience freely and happily to anyone willing to learn. He also loathes speaking in the third person. If you enjoyed this post, make sure you 
Heh, I always just load the page. If it seems to load too slow, then usually you can just eyeball the status bar to see what is taking too long to load.
But I guess that’s experience talking. If there are tools for that, then sure, use em!
Hey Wayne, glad you liked it. I have a few more tips, I hope you don’t mind me sharing
For those of us who love blogging, there are a huge list of tools that we need to get everything in check. Last comment I made was for a css compression tool.
This comment will be about a few other cool ways to help speed up your site load time.
Ever wish you could have a speedometer for your site load time?
Well if you use Firefox you can.
If you don’t use Firefox….shame on you
You must have the latest version of Firefox found here http://www.mozilla.com/en-US/firefox/personal.html
Anyway. From Firefox.com go to the add on located on the top toolbar section and search these two tools:
First one is YSlow. YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. Found here https://addons.mozilla.org/en-US/firefox/addon/5369
Second is Firebug which integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page… Firebug 1.3
Get it here https://addons.mozilla.org/en-US/firefox/addon/1843
Take some time to get to know the features. When they are loaded you will see them on the lower right side of your screen.
That’s my tip for today.
Garret
http://need-to-get-some.blogspot.com
good reference list… i always appreciate seeing what other people use. we use the web developer toolbar add-on for firefox (sounds like it does similar things to firebug).
I’ll have to give that a try, thanks for leaving a link!
Windows movie maker is an awesome tool for simple video development, which is all 99% of us really need imo.
Cheers Garret!
I highly recommend Windows Movie Maker. It takes a few minutes to get it figured out but I made 90 percent of my test you tube video’s with it before my youtube site was destroyed by a spam dump.
A lesson learned….painfully, but hey blog about it learn from it and move on
A great tool for non-techies trying to clean up an existing site or blog is http://www.cssdrive.com/index.php/main/csscompressor/
Basically you put in your css code (found between the and tags in your html. Once you put it in this handy tool will remove all the useless css and actually improve your site loading time. If you are not comfortable doing this simply make a backup of your html first so you don’t lose any information.
Nothing worse than a site that loads slow, I love it and use it weekly. My sites used to be slower than a snail with a broken leg…if snails even have legs, but you get the idea.
It might some folks out here. Sharing is what makes bloggers better.
Best
Garret
The W3Validator will tell you exactly why. What did it say?
I couldn’t validate my blogger blog on w3validator, can u say why? Thanks
I can’t get beyond the mouse having only one button. I experienced that years ago and was just completely disgusted with Apple not being able to afford a second mouse button for their systems.
haha…ok, I’m laughing at that. I got myself on that one.
This is going to be a fun challenge… [i]“Do not succumb to the temptations of design mode.”[/i] – that’s so hard for someone who is more of a designer/visual person than a coder! But I’m going to give it a try!!
LMBO at the comment by Holte… in a good way – not in a mocking way
I use screen grabs all the time. Ie, if you’re doing a promo of a site (either print or online), it’s nice to show what the site looks like. Grabs are great for that. Also perfect for tutorials like you mention Wayne.
[i]“Every web developer needs AT LEAST two browsers on their system.”[/i] – SO TRUE!! It may seem over the top to most internet users, but if you’re serious about web development, you should take note of this.
I’m surprise you don’t have a mac system that you also use Wayne…? Comes back to $$ doesn’t it. There are so many things that are not working on a mac these days… For example, the Google Friend Connect widget doesn’t work. I’ve been wondering if there is an agenda there – make all old Macs redundant in todays internet world… forcing households (and graphic studios) to upgrade to the latest models which run on the Intel processor… which also means upgrading all your solfware!!
Ya beat me to it Wayne but if you want a freebee there’s : http://www.apple.com/downloads/macosx/video/captureit.html
Captureit does all the things in the usual easy Mac way.
Lindsay, see if this helps you at all. http://www.freemacblog.com/mac-options-for-capturing-a-video-of-your-screen/
Demeur, i know that you can take screen shots super easy, but i have never used it to do screen video capture..
I will have to play around with the imovie. I assume thats the one that would record the screen. If you have done this before, can you email me and let me know how you did it???
P.S. i did find a decent free software to MAC USERS called JING. here’s the URL, i downloaded it and used it to test it out.. its good. The only downfall is you can not record videos over 5 minutes
http://www.jingproject.com/
Lindsay, I don’t know Mac’s one bit unfortunately.
Thanks for chiming in Demeur!
Hectic, it’s great for styling your AdSense ads! I totally forgot that is another time I use it too. Thanks for brining that up.
Holte, well, if you’re like me, tutoring and training, capturing the screen I’m looking at is helpful to convey information. I used it extensively during last years series on Blogger, and I’ll need to do so again this year with this series.
Can’t imaging anyone getting this information thru simple text…people like pictures too.
Dig it? And no question is dumb, only the ones that don’t get asked are.
Somebody has to be first with a dumb question – so here goes. Why would I want to capture a screen I am already viewing?
Me, I am using ColorPic a couple of times already. Specially when I am installing adsense on my blogs. Its quite useful specially if I don’t know the hexcode for colors. Your list of tools here are quite impressive.
Lindsay – If you’re running OX 10.4 you have all those programs built into the Mac. There’s photo booth, iphoto, imovie and idvd that does all of those things and more. Want to take a screen shot? Go to help and look up screen shot that saves it in preview. Dang when is Ballmer going to get with the 21 century. With the newer macs you need to get a copy of ilife that has all those programs but I still use older versions that came preinstalled.
aww.. i’m disappointed now.. the CamStudio doesnt work on a mac.. Not that I can tell anyways. Any suggestions for Mac users?
From what I can tell so far, anything “Windows Live” requires a username and password (think Hotmail). Then a person could share Movie Maker projects, using the Windows Live services, somehow. Windows Live services include Messenger, Mail, Photo Gallery, Movie Maker, Writer, Toolbar, and Family Safety.
All welcome. These are very good tools for what they do, enjoy!
Carolyn, no, not sure what the difference is yet. If you install it, let me know if it’s any different.
Thanks for these tools, looks like I’ve got more work to do. I’m excited about Camstudio and ColorPic-should be fun.
Is Windows Live Movie Maker the same as Windows Movie Maker? Sounds like a stupid question, but I have the latter on my computer already.
Woy. Thanks for post. I recently have started to use CamStudio. Very good program. I’m happy to it.
OMG thank you SOO much for posting these tools. I have been looking everywhere for a good screen capture software! THANKS!
Also, i just found out about firebug and its AMAZING. I definitely agree with you that its a MUST!