A Nice Weather Gadget for your Web Page

One of my web sites is for gardeners so I added a local weather gadget. The gadget features current weather conditions, and a 3-day forecast. Gadgets are specialized bits of code and are fairly easy to add to a web page. 

To add the weather gadget:

1. Go to Accuweather.com net weather download site.GEM #3!!

2. Choose your language and type in zip code. Click next. Select your weather forecast size, category, and theme.

3. Preview the gadget and change the background, if desired. Click next.

4. Read terms. Click next. Highlight the code, and copy it on your clipboard.

5. Paste the gadget code where you want it in your webpage html. 

6. If you want to center or style the gadget, enclose it in a div, and add styling for that div.

7. Save and update your server.

What can go wrong (or I know this because it happened to me):

The first weather gadget I worked with on a school project was not visible until I put the site on the server. [A preview of the site revealed no weather gadget.]

In contrast, the Net weather gadget was visible before updating my server. The invisible gadget wasted time because I didn’t know it was working, and racked my brain trying to figure out the problem.

The aforementioned weather gadget was from Google gadgets, and, for the purpose of the school project, featured Tucson, Arizona. I needed to find the original Google gadget page to modify the code for my home town. The problem: I did not take good notes on where I found this gadget OR bookmark it where I could find it. There are thousands of Google gadgets in no particular order interspersed with scantily clad girl gadgets. It’s no picnic sorting through all that trying to find the gadget I used previously. I never did find it, and wasted a couple of days.

Lessons learned:

1. Don’t panic if your gadget isn’t visible on a preview.

2. Take good notes AND make good bookmarks.

Putting your web site file on the web

A FTP transfer program like FileZilla or Dreamweaver is used to set up your remote file and to post your web files to your host account. This is described in GetWeb Hosting for a New Domain - Part 2 on You Tube. Ralph Phillips demonstrates this step using FileZilla and Dreamweaver. His Dreamweaver version is earlier than CS5, but the process is similar. 

Use the web host information copied earlier to give the server information for the site. Use your new domain name as the FTP address.

Once the remote site set up is complete, you are ready to post your files. The key is to drag and drop or “put” the site file into the public html folder. You also should delete the web host’s default.php file which is a temporary display until your site is placed.

File structure is KEY to getting your site to display correctly. Look at the remote file structure in Dreamweaver’s file panel or the FileZilla display. If any of your files have landed outside the public html folder, your site will not display properly.

Drag and drop to move the files until they are inside the public html.

I used Dreamweaver because I use it in my courses. Having said that, the behavior of Dreamweaver with my new web host was different than with the school server.

When I used the general “put” command, the file landed beside the public html file, but not inside it. I simply had to drag and drop the file in the right place.

As I made adjustments to web pages, I found that “putting” added the amended file instead of replacing the old file. To remedy this, I deleted the old file and dragged and dropped the amended file in its place. Also, dragging and dropping doesn’t always get your file in the right place. If this happens, delete it and do it again. Eventually, I got my files in the right place, and was pleased with the result.

If you have problems, review the Phillips You Tube tutorials and verify your set-up steps.

Good luck!

Tutorials

I’ve been a student of web technology for a year, and want to pass along some of the gems that have helped my studies.  My school program utilizes Adobe Creative Suite CS5 which includes Dreamweaver for creating web sites and Photoshop for manipulating images.  Less familiar to me is Illustrator for drawing and Flash for animation.

Gem #1

You Tube has wonderful tutorials on web topics. I struggled with the Adobe tutorials until a professor recommended You Tube. The tutorials are shorter than Adobe’s. If you are stuck on an issue, type it in the You Tube search box.

My personal favorites are tutorials by Ralph Phillips. He has wonderful presentations on HTML, CSS, Dreamweaver and others. Ralph Phillips Tutorial on Web Page Layout Using Divs in Dreamweaver

There are many other tutorials posted by generous souls and they are uber-helpful. Thanks a lot to everyone that contributes tutorials!