Recent Web Site Picks

Home > Web Tools > Current Web Site Picks

3/10/05 - I have decided to start to move the web picks and software picks to a blog format. In the future, you will find my "dailies" at http://www.robinsblog.com. I hope to eventually move the old "dailies" to the new site as well. This site will remain for tutorials and other resources.

Flickr is an easy to use free photo sharing site/community that has gained a lot of popularity in a rather short perioud of time.

"Bloglines is the most comprehensive, integrated service for searching, subscribing, publishing and sharing news feeds, blogs, and rich Web content. It's free and easy-to-use." - Very nice service, easy to find RSS feeds that interest you.

The 2005 Bloggie winners are about to be announced (3/14). These are publically choosen awards for the best weblogs.

3/9/05 - SitePoint has a good article on Why Consistency (in a web site) is Critical.

Take a look at this CSS Zen Garden submission, the CSS Ocean (be sure to view this entry in Firefox or Opera to see the full effect). Rebecca shared this fun Camper (Flash enabled) site with me.

Simple Transport has a wonderful list of design related links that I recommend that you bookmark. Many of the sites listed on this page have RSS Feeds that can be used with Sage. dezwozhere.com also has an extensive list of CSS sites.

Steve gave me a print out of the Programs that are known to experience a loss of functionality when they run on a machine with Windows XP Service Pack 2.

I really enjoyed reading the article Guidelines For An Uncomplicated Web at Asterisk; so much of what he has to say is true.

I was looking for a new XHTML chart to post on the XHTML Assignment sheet and I came across this Color Symbolism Chart instead. It tells you the meanings of different colors in various cultures. Be sure to also check the related articles at the bottom of the page for more information on designing with color.

3/8/05 - There are six new designs at the CSS Zen Garden including Moss by Mani Sheriar, a former student. Way to go Mani!

Evolt has an excellent article on 10 Steps to Higher Search Engine Positioning. May I also recommend that you read Understanding Color and Accessibility, be sure to read the user comments, they can be both educational and entertaining. Did you know that Dan Cody, the founder of f2o.org, was the founder of Evolt?

Joshuaink.com has an article on A simple introduction to 3 column layouts in CSS. While I was there I found out that solarDreamStudios has all kinds of Fireworks MX 2004 tutorials. I think it's a good idea to try to do a few web tutorials a week; it gives you an opportunity to learn new techniques that aren't in your class books.

SitePoint forums has a FAQ about Everything you wanted to know about floats but were afraid to ask. (Floats & float Bugs and Problems in IE)

3/7/05 - Light Seek has put together a thumbnail gallery of the various entries in the CSS Zen Garden. This should be nice for browsing the beautiful garden.

StopDesign has a good article on staying organized.

I was over reading the Web Standards Project and the March 4th entry was about a site called How Stuff Works. How Stuff Works was mentioned because there is an article on How Firefox works. This site is not just about computer stuff, you can find out about how computer dating works to how your car steering works. There is a lot of really good info on the site.

Some students have asked me how I manage to keep up with everything in the classroom and how I find such a variety of sites for them to visit. First off, Google is my best friend. I use the Google toolbar to quickly perform general searches when I need to find info on something fast.

I used to always use a search program called Coppernic. Coppernic allows the user to search multiple search engines at the same time. I really liked it because you can save your searches for later viewing. There are a lot of great features in the program and to be honest with you and can't really say why I stopped using it. I went and downloaded the "Basic" version, which is free, today so I can start using it again.

David introduced me to a Firefox extension called Sage which I love. Sage is an RSS Feed aggregator (reader). What the heck is that you say? Well, some blogs utilize what is called an RSS feed. RSS stands for Rich Site Summary, if you have an RSS Feed Reader you can quickly see what bloggers have posted on their web sites recently. Sage has already saved me hours of time "surfing" through sites that I often visit.

After installing the Sage extension you can access the extension by clicking Tools > Sage. this will present you with the Sage sidebar (click here to see a screen capture of the sidebar). By default there will be a few feeds (BBC, Yahoo, Sage) that you can view by clicking on them in the sidebar. When you click on the feed, a summary page will display that lists the recent updates to the site. You can create folders to organize your feeds (right click the feed list and select New Folder).

So how do you tell when a site has an RSS Feed? After installing Sage, a site with an RSS feed will have an RSS Feed icon (this icon's appearance may vary depending on the Firefox theme that you are using) on the right-hand side of the status bar. Click this feed icon and select Subscribe to....... Bookmark the feed in the newly created "feed folder" and it should appear on your feed list. Just click the feed to view the recent updates to the site.

Veerle's Blog has a nice CSS Calendar that you may want to check out.

3/3/05 - List-u-like is a CSS Generator that creates cross browser navigation bars. Pretty nifty!

3/1/05 - I started skimming my new copy of the Zen of CSS design last night and found a link in the "Closing thoughts" section of the book that you may find useful; it's a CSS Cribsheet.

Molly Holzschlag is the co-author of the Zen of CSS design, her wonderful web site is located at http://www.molly.com. She currently has an article on Integrated Web Design: The Meaning of Semantics (Take I) at Informit.com. The Untold Mysteries of CSS is another article you may want to print for your reference binder. It includes information on the universal selector (*) and other "mysteries" of CSS.

Daltonlp.com has an article on PNG transparency with CSS.

Ove Klykken has some wonderful CSS examples on his site including a photo gallery that I really want to try out.

2/28/05 - Zooiblog has an article on fixed positioning and backgrounds; I thought you might be interested in this since it mentions the PNG transparency hack we were discussing a couple of weeks ago.

WebCredible has a condense, informative article on CSS hacks and Browser Dectection. This is a really good page to print out and add to your web tricks binder. There are a lot of other CSS and other web resources on this site that you may find useful.

I know that I posted a neat color selector tool the other day, but I found another one that I really like. Color Mixers allows you to select a primary color and it will display eight matching colors.

Something else interesting - "A designologue is a conversation between two designers in the medium they understand best - design. Comparisons can be made to Coudal's Photoshop Tennis where two designers alternately modify the others image using Photoshop." There is some pretty delicious imagery at designologue.

2/25/05 - Why standards-compliant HTML matters, a rather timely article on standards compliance.

456 Berea Street has a nice list of Efficient CSS with shorthand properties. While you're there, take the time to read Basics of search engine optimisation.

2/24/05 - Steve Dolphin has a really nice Color Scheme Selector that should be helpful when you're deciding the colors that you want to use for your web site. You may also want to check out the other tutorials and resources on his site.

To go along with our CSS theme of late, Evolt.com has an article on 10 CSS Tricks You May Not Know, the original article by Trenton Moss can be found at his site, webcredible.

And All that Malarkey has a variety of articles on web standards, CSS, and web development; be sure to read Web Standards Trifle and CSS: A tribute to selectors.

Looking for a way to style a list? Try Listamatic, I've never seen so many list styles in one location. Be sure to see the rest of the tutorials and list resources at Max Design including their float tutorials.

2/23/05 - Last week Mani Sheriar of Sheriar Designs spoke to our class about separating content from style. She gave us a lot of wonderful tips on CSS design and I have written up some notes from her talk that you can find on the tips page. There are also 20+ links to CSS sites on the tips page.

2/22/05 - ArtPad is a part of Art.com, an online retailer of fine art posters. At ArtPad you can draw your own beautiful creations or just doodle. It's a neat service and it's free. You can also sign up for a free account at Art.com and upload your own photos for selling, printing, or just sharing with family and friends.

2/14/05 - Preventing Hotlinking - After finding that several of my images were being "hotlinked" to without my permission, I replaced existing images with this one and sites started looking like this. I then found a good article on the problem of Hotlinking at NetMechanic. This article led me to The SiteWizard.com and a fix for the problem using an .htaccess file. This file prevents others from displaying my images off my site. It's not ideal, I can no longer "hotlink" to my own photos and of course it does not stop people from downloading my photos and uploading them to their own servers, but at least I won't have to pay bandwidth costs. Static8 also has a good article on hotlinking. I also found this article on removing your images from Goggle Image Search (that might be a little extreme for the moment). I think the best solution I've seen is over at cockeyed.com. ;)

1/26/05 - I am in the process of reinstalling the computers in the classroom. We have had a glitch with Firefox. If you had extensions installed you will need to reinstall them on your systems. You can find the directions for installing extensions plus a list of recommended extensions on my Firefox tutorial.

1/25/05 - New tutorial for Setting up Testing Servers. This includes a free testing server bundle called WAMP5 Server that you can install at home. WAMP5 includes Apache, MySQL, PHP, and phpMyAdmin. The tutorial covers installing and configuring WAMP. The tutorial also includes installing the Coldfusion module, installing IIS (Internet Information Server), and administering MySQL databases with phyMyAdmin. There are additional server bundles listed at HotScripts (there may be a Mac version, but I'm not sure).

1/17/05 - David emailed me on Friday. He had visited our class message board and it had been hacked and destroyed. I went to the board and sure enough it was gone. The gentleman who had hacked the board left his email address and a message saying if I wanted the database back to e-mail him. Hummmm, ransom for the database? This left me feeling very disappointed with the Internet community, but I emailed him anyway. Well, he emailed me back with the location of the database and even gave me some tips on protecting the future board. My faith in the Internet community was restored; if we were going to be hacked by someone at least we got a kind hacker.

I was going to restore the message board, but an on-line, acquaintance of mine, JoeTampa, setup a Wiki type board for a hermit crab group. The setup of the board is really slick. It includes not only a forum, but also an FAQ section, a news section, downloads, a photo gallery, and a lot of other fantastic features. The gallery is really awesome, users can create their own albums and resize and upload photos on the site. Hermit Crab World is powered by a publishing platform called Xoops.

Rather than restoring the old bulletin board that got little use in recent days, I think I will build a new class community with Xoops. I think it will serve us well.

1/14/05 - I added some notes on backing up your site definitions in Dreamweaver to the tips page.

1/10/05 - Students who have completed the Dreamweaver unit can use this tutorial to setup f2o site management in Dreamweaver.

1/7/05 - Online Image Resizer - Resize your digital photographs online. Free, easy to use, very cool! Creating Online also has a free image editor. You can do basic color correction, crop and resize, and add text and clip art. Max. dimensions 1200 x 1600 pixels, max. file size 1.5 MB.

1/6/05 - I wrote a new tutorial for setting up a WordPress blog. If you are in my class, I would recommend that you complete the HTML and Dreamweaver units before you attempt the tutorial.

1/4/05 - I have added some very basic instructions on how to use Firefox to FTP. I know that some of you need FTP software at home. Firefox is free and so is the FireFTP extension.

I have updated the class recipe site, check it out and please feel free to add your own recipes.

I decided to use another blogging system called Movable Type for the recipe site. Movable Type was not as easy to install as WordPress (discussed 12/29/04), but it is a very powerful publishing platform. In all honesty, the jury is still out on which system I prefer. For the first-time blogger, I would still recommend that you start with WordPress because of the ease of setup and overall simplicity of the interface. Now if I could just get the time to blog this site.

12/29/04 - It's been a busy couple of weeks. Vacation is a good thing. I setup a new blog site for Rob and his baseball team this week. I used a blogging tool called WordPress. WordPress is the successor to b2 which is the blogging platform that I've used on my photography blog for a couple of years. WordPress was very easy to install and configure a new blog; in fact it was so easy I decided to upgrade my own blog. This proved to not be so easy, but I got it done. You can't see much of a difference in the front end because I reworked the existing template and CSS to work with WordPress. The management tools in WordPress are much better. There are a lot of spam tools, thumbnail creation, easy uploading of photos, plugins, and other management tools.

I think if you have completed one of the PHP units in class and you're looking for a project, setting up your own blog in WordPress would be great experience. If you decide to create a blog using WordPress you should configure it to work with your f2o account and not the classroom servers.

In addition to setting up a blog for Rob and his team I also created an opening movie for their site using SwishMax. SwishMax is an alternative to Flash. It is much cheaper ($19.95 @ Academic Superstore) and easier to learn and use. I used a template from the program and found it very easy to customize.

12/17/04 - To accompany David's lecture today on hardware, here is a web site with some visuals of computer hardware.

12/16/04 - SitePoint has a new article on Color for Coders - Color and Design for the Non-Designer.

12/14/04 - I wrote a new tutorial on Preparing Images for Web Pages in Photoshop. This tutorial covers basic photo correction techniques. We will review it in class today.

12/10/04 - Mike brought in an article from the Contra Costa Times on Oakland Salaries 'poorly managed' from 12/8/04. What was interesting about this article is that it points out the the current Web Master for the City of Oakland made $187,386 last year. Of course this is not the average Web Master salary, but it is a pretty aspiring figure. If you would like to see what a $187,386 web site looks like visit, http://www.oaklandnet.com/. Oh to be so lucky!

12/9/04 - The HTML and XHTML Complete Reference has a Color Names and Numerical Equivalents chart that you may want to print in color for future reference. This chart is very handy because it includes the color names, hexadecimal values, and RGB colors. There is also an RGB to Hexadecimal Color conversion chart at this site. I also found quite a few handy charts at this site that you my find helpful. This site is the companion site for the book HTML and XHTML Complete Reference. The free Appendix information looked so good and the prior version of the book got such great reviews that I decided to order the book used from Amazon for just $9.90.

12/8/04 - I found a web site that you may want to bookmark. Skyzx.com has an RGB to Hex Color Conversion Utility on their web site that is quite handy. It allows you to easily convert RGB to Hex colors and visa versa.

11/30/04 - New tutorial on using Firefox. This tutorial outlines the process of installing the software and installing extensions. It essentially covers everything that we discussed in class before the Thanksgiving break.

11/24/04 - The WDG HTML Validator allows you to validate multiple HTML/XHTML pages. The WDG also has links to other validation programs and services.

I really think that the Firefox browser is a must have for anyone who is serious about web development (I know, I've mentioned this already). This browser has already won numerous awards and 5.6 million people downloaded the latest version in a two week period. Since Microsoft is not planning any updates for Internet Explorer in the near future and IE has lot a lot of security issues, I think that Firefox is going to take a pretty good chunk of the market share. The extensions are so awesome; it's through extensions that new features can be added to the program. ChrisSpederick.com makes the Web Developer Extension that I use the most. Another extension incorporates HTML Tidy (validation software) into the browser. When you view the page source it will automatically be checked for errors. Pretty cool! O. K., I promise that I won't mention Firefox again for at least another week.

11/23/04 - You may be interested to see the latest browser trends and statistics. Browser News has information on browser trends and resolution color depth usage. Note the increased usage in Gecko based browsers (Firefox in particular). My site statistics show that 9% of my visitors are using Firefox.

11/18/04 - I found a few free font sites you might be interested in. Fancy for Fonts, Font Empire, and Font Seek which is a font search engine that lists free and commercial (not free) fonts.

11/10/04 - A few days ago I mentioned the Mozilla web browser called Firefox on the software picks page. I was reading CNN's technology news yesterday and they have a story on this great browser. I spent a little more time exploring Firefox and there are some really cool features. There are all kinds of extensions for Firefox that you can download and install to enhance the software. I downloaded several including: ColorZilla (an eyedropper for picking color from a web page), HTML Validator (allows you to validate any web page including CSS), FireFTP (FTP files to your host), and some Web Developer Tools. So far I'm impressed with all of these extensions; they really make developing and testing web pages a lot easier. There are also lots of themes that allow you to "skin" the browser (change the browser appearance).

The f2o.org newsletter just came out and they will be offering a free PHP class. Sign-up now at their web site (space is limited to 30 students).

11/9/04 - About.com has come out with several good articles over the last week. First, a good, brief article on Creating Your Web Design Business Site. There is also some good information on Creating a Business Plan. Jennifer Kyrnin also writes an informative article on Getting a Job as a Web Developer. Finally, there is an article entitle You Can't Get Every Page to Look Identical, So Stop Trying! that deals with the difficulties of designing for the web. About.com has a variety of articles that should interest the aspiring web developer.

SitePoint just came out with an article on How to Code E-mail Newsletters. I thought this was good timing since we just had a lesson on that same subject in class.

11/3/04 - Tunna Resources is a resource site for the new and disabled webmaster. It's an awesome site to learn about web site development in general. This site goes beyond the HTML lessons and really focuses on accessible web site development. It's a must read for anyone learning to develop web sites for EVERYONE!

11/1/04 - I have started writing a tutorial on Making Documents XHTML Compliant. I do not expect you to convert your existing HTML assignments to XHTML, but any web page that you create from scratch should use these XHTML guidelines including your projects.

Carolyn was asking for an explanation on some CSS code that she had seen in one of my sample documents. This document used what is referred to as CSS shorthand. CSS shorthand allows you to set several style rules in one declaration. An example of CSS shorthand that I use frequently is margin settings. Normally you would set the margin in CSS like this:

margin: margin-top | margin-right | margin-bottom | margin-left

.test {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 1em;
}

In CSS shorthand you can write the same style rule like this:

.test {
margin: 1em 2em 2em 1em;
}

.test is the selector
margin is the property you are changing
1em 2em 2em 1em are the values you are assigning to the property margin
Everything between the two {} braces (I call them squiggles, but this is not a technical term) is referred to as a declaration.

When you use CSS shorthand the property values are adjusted in the following order: top, right, bottom, left. An easy way to remember this order is using the acronym TRouBLe. Now if you hear me walking around the classroom saying trouble a lot you'll know why. Using CSS shorthand also reduces the number of characters in the css file thereby decreasing the file size and improving the load time. CSS shorthand can be used for backgrounds, fonts, margins, padding, borders, and lists. You can learn more about CSS shorthand in this Introduction to CSS Shorthand. You can also find a version of this document at SitePoint with some additional references. You may also find this CSS 2 Reference from W3Schools helpful (the description column notes which properties can be used with shorthand.

Shorthand values can also be used for color. Instead of defining color with the six digit hexadecimal value (#330066) you can use a three digit shorthand. Shorthand values work with the 216 web safe colors. This is because all of the web safe colors use hexadecimal pairs, i.e. #330066.

For example, I want to use a web safe shade of purple; the hex value for this shade is #330066. Notice that there are three pairs of numbers: 33, 00, 66 (these are the hexadecimal pairs). Because these pairs use the same value you can write this value as #306 instead of #330066. Notice that we have just eliminated the second digit in the hexadecimal pair. This shorthand only works with web safe colors. There is a nice CSS Color Shorthand Chart at CSS Tips.

Scriptdex has a very nice listing of scripting resources including CSS. The Web Directory also has a nice listing of CSS sites. I also came across this article from Evolt on Ten CSS tricks you may not know that some of you may find useful (an updated version of this article appears at Builder.com).

Archives

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.