Web Explorations

Adobe has released a new Flex application called Browser Lab. It allows you to see what your web pages will look like in a variety of browser versions including FireFox, Safari, and Internet Explorer (versions 6, 7, and 8).

You can set up a side by side view, magnify part of the page, and select different browsers.
There’s an onion-skin feature that lays two pages on top of each other so you can quickly check alignment issues.

This tool is very helpful because it is so hard having access to multiple versions of Internet Explorer.

Here is a screen shot showing my home page in FireFox 3.0 and IE 7.0.

You do need to register with Adobe to use this tool. However, if you are already registered for BuzzWord (a collaborative document site) or Kuler (a color scheme tool) than you have the userID/password you need. Here’s an article I wrote on Kuler.

Judy Genereux, one of our Web Programming graduates, sent me a link to Devin R. Olsen’s web page showing how to created nested menus using pure CSS.

This one-page tutorial shows how to build up a menu, one layer at a time, and doesn’t add any extra information that might side-track you from the goal. When you are finished you will have a nice basic menu system that will be easy to modify for whatever site you use it on.

The best part is that this code works with IE5, IE6, IE7 and IE8 as well as FireFox and Safari.

Here is a link to an example menu.

Over the years students have asked/suggested/cajoled that I write a book with the information I present in my classes. For starters I decided to pull together all of the tutorials I have written for my Web Development course.

The Secrets of a Web Developer is now available for $39.00. You can view some excerpts from the book as well as the complete table of contents out on the site.

There are over 300 pages covering all the major aspects of web page development with lots of screen shots and graphics and step-by-step instructions.

• The
  Web and the Internet
• XHTML markup
• Page styling with CSS
• Page layout
  using CSS
• SEO – Search Engine Optimization
• Design Principles and the Design Process
• Web Marketing
• An introduction to JavaScript

These tutorials were written for anyone interested in learning
how to build web sites with no prior knowledge of programming or HTML.

This is an entry-level book and all you need is an understanding file
management and basic typing skills.

The tools are all free. You will need a color-coded text editor (such as NotePad++)
and a browser. FireFox is recommended because of the many add-on tools that are available.

If you are interested in taking the complete Web Developer course online there is more information at http://southcentral.edu/cc/course/webDev.html.

Each semester the Web Development class at South Central College is required to complete a capstone project, working with a business. This project is designed to use all of the material covered in the class in a practical manner. At the same time the student gets hands-on practice in business communications, problem-solving, and citizenship.

This project gives small businesses and entrepreneurial companies an excellent introduction into web marketing and establishing a presence on the Web.

Students added to this year’s showcase include:

• Kelly Bode – Barn Wood And More..
• Rose Kruse – Kruse Insulation
• Kevin Leintz – Mankato Mamapalooza
• Nicole Weisenburger – Dance Express
• Monica Yarger – River Valley Industries

Here is a link to the showcase showing some of the top sites created for businesses over the last few years.

BrowserShots.org allows you to specify the URL of a target website and then proceeds to take “pictures” of how the page will look in each of the browsers you selected. This is a great way to do the final testing on how well your pages work without having multiple browsers loaded on your machine.

Here’s what the home page looks like:

There is also a link that will validate your CSS code as well as your XHTML code.

The top graphic a look at my home page which is a valid (strict) XTHML page. Notice how text and images don’t show up on all the browsers including the new IE 8.0

Special thank to Tim for telling me about this valuable web site.

I just received this email question from one of my students:

Peter,
I am currently working on a website for one of my clients. She said that she took your web design class and mentioned that you use QualityHostOnline.com for your hosting and domain needs instead of GoDaddy. My question is why? Why meaning is there a reason or just a preference that you choose Quality Hosting. Please let me know.

Here is my response:
Tim,
Originally GoDaddy limited what you could install on the server. When I first hosted with them I quickly found out I couldn’t install Drupal. I still remember how arrogant the help person was telling me that the agreement did not allow a refund but that he was going to refund some of my money anyway…

The Drupal limitation has since been fixed although recently there was a snafu with a GoDaddy client using Drupal and being charged over $6,000 (http://www.huffingtonpost.com/adam-fendelman/why-i-dont-owe-godaddy-65_b_129276.html) The only thing that helped resolve the problem was his article on Huntington and the furor it caused. All the bad press caught GoDaddy’s president’s attention and he stepped in to resolve the things and stop the bad press.

Their advertising is extremely sexist. Something I might enjoy looking at but not something I can recommend to students in class. Especially when one of my students started doing a web site for his church…

And, just recently, I tried to transfer my domain being held by GoDaddy to QualityHostOnline. It took me over two months to accomplish due to an unknown userid/password that was automatically setup without my input when I purchased a privacy option. Because my email on GoDaddy was no longer valid I had to fax, mail, and send scanned copies of my driver’s license and a specific numbered form to a branch of GoDaddy. They would also have accepted copies of my passport which makes me even more nervous. They made it EXTREMELY difficult to do the transfer. I had to send the request three different times and made numerous phone calls all to the answer of “I’m sorry, that is out of our control.”

Meanwhile, I’ve been with QualityHostOnline for almost five years now and have had excellent support, low cost, and overall good results on a consistent basis. They were very helpful and responsive during my domain name transfer. I’ve also recommended this hosting service to other instructors and many many clients and everyone is having the same positive experience.

So, there you have it.

Guess I’ll make this into a blog entry.

Peter

PS – You might want to do a web search for “GoDaddy ethics” It makes for some interesting reading.

Addendum: 09-15-09 I’ve been having a lot of downtime with QualityHostOnline.com and am migrating my servers over to BlueHost.com based on recommendations from several of my students. I can no longer recommend QualityHost as I have in the past.

SitePoint is offering The Art and Science of CSS as a free PDF download until December 1st, 2008. Check it out at this link: http://twitaway.aws.sitepoint.com/

• Using Flash for specific fonts
• Rounded corners
• Specialized background techniques (very cool)
• Using CSS with tables

Lots of really great ideas and lots of example code walking you through everything a step at a time.

While you are at it, register for their Community Crier newsletter. Its short and sweet and often has some great ideas included.

Leverage your knowledge of the Web. Here’s a great opportunity to meet some really interesting people and help non-profits with their web presentation.

Sierra Bravo is a web design group in the Minneapolis-St. Paul area and they are putting together their 2nd annual Overnight Website Challenge.

The Challenge: Build ten teams of volunteer web pros to create free websites for ten nonprofits. Last time we dropped the F-word (free free free) we had more takers than we could take. Sierra Bravo fully expects that this kind of loose talk will again open the floodgates for non-profits seeking help and do-gooder types with mad programming chops. So, until there are no more good nonprofits with bad websites, let’s do it again.

Even if you aren’t a professional coder I’m sure the folks at Sierra Bravo would love to have you pouring coffee or making movies.

Be a part of the movement of using the Web to help change the world.

– Thanks Jesse for sending me this link!

Plan to attend? Post your experience as a comment to this blog entry.

I’ve been creating some demo movies as part of my on-line classes and have posted them out on blip.tv.

I thought you might like to look at the series. I’ll be adding new ones on a regular basis.

Here’s a link showing all the videos available out on Blip.tv.

I’m using ScreenFlow to create my onscreen videos. This is an amazing program that allows me to capture video and sound and edit using scrolling and panning. Mac only. What is displayed here is only the video portion of the more complete tutorials I offer as part of my online and face2face courses.

The videos shots of my whiteboard talks are taken using a very inexpensive ($150) Aiptek HD1080P pocket-size video. Chad Peterson, one of my students is working on the editing. These resulted from one of my online students asking me to record my entire class. That is very difficult, getting good sound, but I thought I’d try some simple videos that focused on specific concepts to see how enhance the learning activities for each module.

I’d be interested in your comments on how useful these would be to you as a student. Thanks!

I often talk about my son Micah in my classes because he gives me so many real-life examples that show how the concepts I present in class are put to work out in the real world.

Micah has written an interesting resume building site named GigTide using Adobe Flex. When he first published the site he received emails from several users in Italy and Greece asking him to fix the application so they could use the special characters of their language.

Did he have to re-write the entire application? Nope. All he had to do was change the character encoding to UTF-8 (Read Tim Bray’s article if you’d like to know all the gory details about character encoding.) Now GigTide.com can be used by Americans as well as by people that use a script languages found in other parts of the world.

And, its a good thing too, because when Micah checked his Google Analytic numbers the other day he discovered a nice surge in hits from Thailand. He did a little research and discovered a Thai blogger had written about GigTide and it triggered a surge in interest with the site.

He did a little research and found the CyberBiz blog entry showing GigTide in Thai.

That’s the example. Here’s what I teach in my course:

• Keep in mind that when you put a web site up that you have the entire world as your market. Not just your town, or your state, or your country, but the potential of the whole world. (Think on how you can leverage your product/service/site to address more than the people in your own village…)
• Use Google Analytics to keep track of what your site(s) are doing
• Write your code and design your applications so they are accessible to people around the world

Color schemes are an important building block to good web design Here is a great tool from Adobe that allows you to build a color scheme from a logo or photo or by simply choosing the colors yourself.

You have to register with Adobe to use the tool, but registration is free.

Look for the “Create” button on the left to open up the palette selector and you can either upload an image or pull one from your Flickr account. I’ve seen similar pages do this, but they took color samples at random from the image. With Kuler you can move the hotspots around to select the key colors that you want to incorporate in your theme. The resulting color swatch shows the hex color values and is great to print out and keep with your client files.

Here is a screen shot showing our Computer Careers logo and part of the resulting color swatches:

By using colors on a consistent basis you improve the professional look and feel of the site and increase the believability of the site.

Special thanks to Michael in my Web Programming classes for showing me this great web development tool.

Who has your domain name?

As domain names become more scarce you might want to think about saving your own. Many people use their own name. Right now this may seem like a vanity thing, but it could be a valuable professional asset in the future.

Think of 5-10 domain names that you would like to own, then do a search to see if they are available. You’ll be surprised to find out how many are already taken. You can use Network Solutions to see if the name is taken. (Virtually every hosting service allows you to check domain names.) You can register your domain name for around $15/year.

Once you have a domain name you will need to get a hosting service if you want to have a presence on the Web. Some hosting services offer free domain registration, but their monthly rates are much higher.

Be smart and get the license to your own domain name now while you still can. Most likely it will become a valuable asset in the years ahead.

Photo from iStockPhoto.com

SitePoint is offering a free PhotoShop book in PDF format until June 15th, 2008. Here’s the link:
http://www.sitepoint.com/blogs/2008/05/14/free-pdf-download-the-photoshop-anthology/

This is a full color text with lots of graphics. I picked up some great tips with just a quick run-through. I especially like the exercises the author shows on using the Pen tool using the Bezier Handles which can be a little tricky for new-comers.

If you want to explore PhotoShop this is a great place to start.

Every semester I get frustrated emails from students containing the phrase, “I just spent ____ hours on this and couldn’t figure it out.” Here’s a short excerpt that I usually include with my reply:

---

I can sure understand how frustrating it is to do something without success for so many hours. But, next time something like this happens, and after the first half hour, stop and ask for help, do something different, or find another resource. It depends on the problem but, normally if you are spending more than a half hour trying to solve a problem than your problem-solving skills need some work.

Here’s a checklist that will help you build up your problem-solving skills and hopefully speed your way to solutions:

1. Stay focused. Don’t try to multi-task. Behavioral scientistists have proven that trying to do multiple things at once makes all of the tasks suffer.
2. Simplify the problem. Web page not changing? Try typing in some odd letters (XYZ) in the middle of the page to see if they display. If they don’t you might have been spending the last hour typing in one file and looking at another!
3. Keep track of what you have tried. Write it down so you aren’t repeating the same thing over and over and over. Be organized and consistent on how you look for a solution. Don’t just shotgun things over and over and over.
4. After each failure try something different. If one combination doesn’t work think of something different to do. (Use number keys instead of number pad, check caps lock, type out the password in a simple editor to see the results…)
5. Google is your friend Do a web search with the error message or a short phrase so you can see if others have had a similar problem.
6. Think about the problem differently. Maybe what is broken is something completely separate from what you are focused on! Think of what else might be causing the problem.
7. Go do something else or take a short nap After a set period of time, stop what you are doing and do something else. I usually give myself 1/2 hour to an hour depending on the problem.) Go take a shower, or sit down with a cup of tea, coffee, or pop and sit quietly, go take a 15 minute nap. Let other alternative solutions come to mind and then jot them down. Don’t force them, they will run away like minnows in a clear pool. Set a time limit for this activity. You should have 3 or 4 alternative things to do in 15 minutes of sitting quietly.

   No, playing video games does not count here. That just focuses you on other problems that may be more interesting (at the moment) to solve.

8. Imagine what the solution or success looks like. If you don’t believe something will work, it probably won’t.

Photo from iStockPhoto.com. I tell my Java students that this is what the Java compiler looks like :-)

One of my students sent me a link to an excellent article on things to be aware of when purchasing a web hosting server package. Here are some highlights from Jason Faulkner’s article:

• Be cautious on paying for your own dedicated server
• Be skeptical of the claim “Our Data Center Is Top Notch”
  • Cisco router and firewall (I have a Linksys – a division of Cisco – home router with a built in firewall).
  • 100 mb backbone (all my equipment and NICs are 100 mb capable), but you would probably see gigabit backbone instead.
  • Backup power supply (pick any consumer level battery backup).
  • Climate controlled environment (we have heating and air conditioning).
  • [insert a stock photo of row of server racks here which I paid $20 for the rights to use.]
    Granted this is a very absurd example, but you get the idea of how easy it is to stretch the truth.
• Avoid The “Free” Domain Registration With Hosting Package
  If there is nothing else you take from this article, remember this: Never let your hosting provider register your domain name for you as part of a hosting deal. Often times you can purchase a hosting package which includes free domain name registration and renewal as long as you remain a customer. While this may seem appealing, it is the worst thing you can do because your hosting provider, not you, owns the domain. This may not sound like a big deal, but as soon as you want to move hosting providers, guess who controls your domain? Not you. Worse yet, there is absolutely nothing you can do to get control over your domain unless the current owner (the hosting provider) transfers it to you.
• Be Aware of “Unlimited Bandwidth and Storage”
• Less Than $5 Per Month Hosting: As the adage goes… you always get what you pay for. Putting it bluntly, if you are paying $3 per month for hosting, you are only going to get $3 worth.
• Beware of the claim ” 99.99% Up-Time Guarantee”
  If you do the math, 99.99% up-time means the server is only unavailable 4 minutes and 22 seconds per month (53 minutes an entire year).
• Don’t trust the offer of “100% Free Hosting”
  bandwidth is not free. Make sure you read the fine print in any agreement claiming this as most likely there are ads embedded somewhere in your site, or the hosting package is so limited that it is virtually worthless.

Go out to Jason Faulkner’s article for all the details.

Thanks Pat for the great tip.

Matt Potochnik, the webmaster for the City of Mankato and a graduate of South Central College Computer Careers , has recommended Aptana . This is an excellent, open-source text editor that can be installed as a stand-alone editor or as a plug-in to Eclipse, the popular GUI programming environment that IBM wrote and later made open-source.

I’ve been using Aptana to edit my XHTML, CSS, and JavaScript files for several weeks now and really like it. It has an excellent debugger, plays well with FireFox, and allows me to code very quickly with its excellent syntax popups and DOM tree display. Errors are flagged immediately so I can fix things before things get all snarfled in a ball of goop.

Jesse Daniels , a software engineer from DayPort , and also a graduate from the Computer Careers program, pointed out how cool the DOM Display is. It allows a programmer to see the entire structure of the page and then jump to any specific element in the code window by simply clicking on the element in the DOM map.

I highly recommend this editor to anyone that spends time writing XHTML, JavaScript, PHP, or other scripting languages.

Here’s a link to a series of videos showing Aptana in action .

The cache (pronounced "cash") is a storage space on your hard drive that holds all the files that the browser receives from web servers. This includes html files as well as graphics, sounds clips, and movies.

In order to display things as fast as possible the browser checks the cache first and if it finds the pages you are requesting it uses the files on your hard drive instead of waiting for new ones to be downloaded from the Web.

If you are a web developer this can be trouble because the browser will keep showing you the old version and not the file with the changes you have just made.

A common trick is to hold down the CTRL key when requesting a new web page. This tells the browser to bypass the cache and to get the files once again from the source. This works with IE6, IE7, FireFox and other Mozilla-based browsers.

Using FireFox about:config settings

In FireFox you can disable the cache by using the about:config page. Type about:config in the address field of Firefox.

Do a search for browser.cache and set the line set browser.cache.disk.enable to false.
Restart FireFox to apply this setting.

There are many other settings you can make to FireFox in the about:config page. Here is an excellent page that highlights some popular ones. Proceed with caution however. You can really ruin things if you mess around too much and don’t know what you are doing. Make one change at a time and test it. Also, I would recommend backing up the prefs.js file if you plan to do extensive configuration changes.  On XP it is located in the C:\Documents and Settings\YOUR-USER-NAME\Application Data\Mozilla\Firefox\Profiles\YOUR-CONFIG-FOLDER.default. (If everything fails just delete the prefs.js file and FireFox will create a new one with default values.)

People understand the Web because they use it every day. But, not everyone knows how easy it is to get your own web site up and running on the Web. You can do it for less than $40/year.

Domain Names

The first part of getting published is to get your own domain name. A good domain is hard to find because most of the common ones have already been taken. You want one that meets the following requirements:

• describes your site
• is easy to remember and easy to spell
• is available on the Web

The DNS (Domain Name System/Server) keeps track of all the domain names on the Web so there are no duplicates. Domain names can be ordered from InterNic and other DNS vendors. For your convenience most web hosting services allow you to order a domain name as one of the services.

An annual license for a new domain name will cost about $17/year. Many web hosting services offer domains for free or very low priced as a loss-leader. Existing names are more expensive. Many people around the world purchase domain names hoping to resell them later. Often names licensed names will cost $1,000’s, especially if a company really wants a particular name as part of their product identity.

Because of the scarcity of good names it is best to make up a list of 20 or 30 names that would be appropriate for your web site. Prioritize them, then visit your web host provider as outlined below and do a search for each one. Be ready to purchase any you find. I’ve heard tales of people searching for names only to come back a few days later to find that their names have been licensed by someone else.

Purchase as many years as you can. (This is one of the criteria that Google uses to determine how to rank a web page.) Also, think of purchasing multiple endings (.com, .org. .net) as well as multiple names. If there’s a variation (or commonly misspelled version) purchase that as well.

Keep in mind that domain name licensing is separate from having pages published on the Web. You can license a domain name now without having the added expense of hosting a site right away.

Because of their high value and growing scarcity, a good domain name is an important asset for any company or business.

Web Hosting

There are thousands of hosting services available. A simple search on the Web (for example: web hosting comparisons) will give you lots of options.

Beware of GoDaddy.com. They are very popular right now and market their services heavily. However, their servers have very strict policies and a lot of tools such as Drupal, a popular CMS (Content Management System) , and CGI scripts are very difficult to install.

Building Web Site

You can create your own web site with a text editor and a browser. Cost: your time. More sophisticated web programmers use DreamWeaver from Adobe/Macromedia. Please don’t use FrontPage. It is now defunct having been replaced by Microsoft’s new product: Expression. There are also many free web editors available including NVue, FirstPage, AlleyCode, and Amaya which runs on Mac OS X as well as Windows.

Often people take my Web Programming I course just to learn how to write HTML and build their own site.

If you don’t have the time or inclination to build your own web site you can always contact the computer science or art department at your local college. Ask if their web students need projects to work on. For example, my Web Programming I and Web Programming II courses both have capstone requirements involving community business partners.

Your Own Piece of the Web

So, for less than $40/year you can have your own site up on the Web. At the very least you should consider setting up a personal home page. And, if you are an entrepreneur (or even thinking about being one) now is the time to get your piece of the web. At the very least, reserve your domain names.

Want to see more details on all of this? Check out my business presentation out on my web site: Web Marketing

Tracking Users

Clients often ask me about adding web counters to their web sites. When the Web first came out people would have numbers at the bottom of their pages showing how many visitors had visited the page. The trouble with this was that often these people would have their web site as their main browser page throughout the company. Then, every time an employee would open up a browser the page counter would be updated, giving skewed results.

All of has changed with the availability of new tools such as Google Analytics.

Here’s how it works: You sign up with Google and add a few lines of JavaScript to the bottom of each web site. Then, each time a person views the page Google tracks the usage. On the Google Analytics site you can log into your account and view charts and graphs and maps showing who has visited your site. You can also block specific IP addresses so you don’t have skewed results from your own company. In addition, if you set up landing pages (specific pages your advertising or marketing send people to for specific products/services) you can track how effective your campaigns are. For example, I have a landing page for my Web I programming class. Instead of sending people to our Computer Careers home page I send them directly to http://southcentral.edu/cc/web1 On this page the can (1) read a summary of the course (2) go to a registration page (3) send me an email question. Google Analytics allows me to track which decision people take which in turn helps me refine my marketing efforts.

Google Analytics also tells you the difference between new visits and when a person moves from page to page on your web site.

Paul Boag also lists some good tools you can use for this on his blog http://boagworld.com/forum/comments.php?DiscussionID=20 . His information as well as the feedback from his users will give you some other web stat tools that can help you judge how effective your web site is.

Technorati : web counter analytics
Del.icio.us : web counter analytics
Ice Rocket : web counter analytics
Flickr : web counter analytics
Zooomr : web counter analytics
Buzznet : web counter analytics

InkScape is an open-source alternative to Adobe Illustrator. It uses SVG – Scalable Vector Graphics which is XML based. You can download it here. Tavmjong Bah is working on an InkScape book. You can view his preliminary copy on his web site.

Here’s a sample of the type of illustration that can be created using this program:

This is a perfect companion to GIMP (GNU Image Manipulation Program) which is an open-source program similar to Adobe PhotoShop. GIMP is excellent for photo manipulation.

Technorati : InkScape