Google Gadget Tutorial > Lesson Two
This is second in a series of articles which will be put together as a guide to creating Google gadgets. To see a full index of all gadget lessons, please see the Google Gadget Tutorial.
Lesson Two – Getting started with gadgets
In the in first lesson we discussed what we would need to create Google gadgets with this tutorial…
1) An iGoogle page
2) A Google account (free and simple) or your own web server
3) Lesson specific gadgets on your iGoogle page
Now that you have those things we can get started. In order to create gadgets we must know some basic concepts about how Google gadgets are displayed and where they come from. Some of what I am about to may seem a little foreign if you have not worked with web pages before, but fear not, it will all come together soon.
Where do Google gadgets come from?
Google gadgets are basically just files that are located on the web. The gadgets we will create, like all gadgets, will have to be somewhere on the internet. If you have your own webserver you can place the gadget file there, if you do not have your own webpage then you can use your Google account to place your gadget files on the web via the Google gadget editor (one of the gadgets on the tab you added to iGoogle in the first lesson).
To see this visually…
Notice that the file is first either on your webpage or on your Google account, then it gets cached by Google. “Cached” just means that Google “remembers” it’s own copy of the file (more abut this later). The Google gadget then gets displayed on an iGoogle page.
If you do not understand that, don’t worry. It is a concept that will be important later in our lessons, but will become more clear as we go on.
Now we will learn how to make these files using the gadget editor…
The Google gadget editor
There are many ways to edit gadgets, but for this and most lessons we will use the Google gadget editor. It is a tool that you can use to create gadgets and store files on your Google account in a very simple way. It is also a gadget itself!
This is the official gadget editor provided by Google. Let’s take a closer look at the functions of this gadget…
The above image shows you the important stuff you will need to know about this gadget.
I will explain each feature and how to use it in a video where you can see both the video and the gadget editor at the same time on your iGoogle page so I can walk you through the features of this gadget and how to make that tiger gadget…
To watch the video and do the walk-through on your own iGoogle page go here and click “add to Google”. When you do, you will see me and the gadget on your own page where we can go through the lesson (make sure you are logged into your Google account).
It will only take about five minutes or so to create your first gadget using the steps I put out in the video.
How to Make Google Gadgets – Lesson Four
How To Make Google Gadgets – Lesson One
How to Make Google Gadgets – Lesson Five
{ 7 comments… read them below or add one }
Excellent teacher!
Thanks!
Wow, you really are an amazing teacher. The video was so helpful. I just followed along and I felt like you were right here helping me. I felt like I was sitting in a college classroom again. Thanks so much! Have a good weekend.
While trying to follow your instructions all the google gadgets on my igoogle page disappeared–to be replaced by the three gadgets mentioned in lesson one. Is there any way I can get back to my original page. If you can help me restore my igoogle page I’ll promise never to use your tutorial again.
Thanks.
I like your training format… I have one repeating error as I am doing the lessons. There is a space error at the xml line 1 that makes the program malfunction. I added the space by hand, and it still displays an error in the preview, but clicking the file name displays the “hello World”. Is there a setup problem, or setting causing this error? In each lesson this error returns on line 1, and the next error is the space in the “encoding” wants a space prior to the word encoding. In lesson 3 the space issue returns at the word “prefs”. What do you thinks is happening?
Vaughn, The problem may lie with the google web toolkit. There is a listed bug that the GGE doesn’t work with the Chrome browser. The xml parser in the web toolkit seems to conflict with the GGE.
But if you use a non-chrome browser, it may work for you.
I need help!!! Whenever I click the preview tab, an error occurs, and the words Hello World can’t be seen anywhere… When I save the file as tiger.xml, it doesn’t even let me click the preview tab! If you know what my problem is, please send me an email here> javb1545@hotmail.com
Ok, I just read Kurtu5’s response to Vaughn, who seems to have the same problem as me.. I’ll try using Internet Explorer