Robot Website

Website Contents

Make a website for your robot. The website must include the following information;

Home Page. (index.htm) with student's name, robot name, contents or navigation, and at least one full image of your robot.
Description Page. Images and descriptions of your robot - showing what it is and what it has in it.
History Page. A brief overview of what you went through and how you arrived at the final design. List problems you had and things that didn't work out.
Improvements. Describe how your robot could be improved, and outline three areas of further development to improve its performance.
Costing Table. List all the costs for parts, batteries etc in a table. Each part must be named, with sources stated and numbered to a matching assembly drawing.

You must upload your own webpage to the internet, preferrably using a free hosting site. (e.g www.atspace.com).

Essential

You website must contain the following:
CAD produced images and drawings (converted to images such as jpg or png).
Photos of the finished robot and during construction.

Webpage Editing

Kompozer

I recommend Kompozer Portable (6.7MB). Download

It is a free WYSIWYG web page program, like Microsoft FrontPage, Adobe DreamWeaver etc. Save it to your USB memory stick and extract. You can run it anytime directly from the USB drive, without ever needing admin password to install the program on the college computer. This type of software is called "portable" because it does not require installation, so it can be moved from computer to computer, or even run directly from your memory stick.

Kompzer is actually the defunct NVU with some bug fixes. Virtually identical to NVU but with some bug fixes and improvements. KompoZer is based on Gecko, the layout engine inside Mozilla; fast and reliable, standards conformant engine maintained on a daily basis by a wide community of developers. Supports XML, CSS and JavaScript.

Pictures and Formating

Although Frontpage (or any WYSIWYG web page program) is very similar to Word, there is a big difference between Word files (*.doc) and internet files (*.htm). On the internet the pictures are saved in separate files. This keeps the downloads smaller and quicker because you can start reading a page before all the pictures have arrived.

This is where it is very important to keep yourself organized. This is what the files used in THIS page looks like on the hard disk (see below). I made a folder for the whole thing (I called it Website). Inside this folder there is the homepage index.htm and another folder for the pictures - called index_files.

So here are the pictures inside the index_files folder...

Take care with the type of picture files too. You will notice that the files01.bmp is 129kB. This is very large for a web picture. When I converted this files to a gif it was 22kB. Try to keep them around 20 - 50kB. (jpg, gif and png are compressed image formats so they are much smaller filesize)

jpg This is best when you have graduated colours (gradients) - like a photograph or a 3D picture from CAD. Non-transparent.

gif This is best for line drawings and solid colours like charts, comic style pictures. Transparency

png Similar to gif but improved image quality. Sometimes it can smaller than jpg, usually for non-gradient images. Transparency.

File Structure

When you upload the files, you must keep them in exactly the same arrangement of folders as you have on your computer.

How to grab a picture from the Screen

At any time while using (almost*) any program, you can take a "photograph" of what is on the computer screen.
* Some applications, such as some computer games or video, will not copy this way.

Simply press the Print Screen key (which is directly above the Insert key on your keyboard).

This will place an image of what is on your screen into the Clipboard. To place this image into a document, simply choose Paste from the Edit menu in the application you are creating your document in (be it Microsoft Word, Frontpage, PowerPoint, Adobe PhotoShop or whatever). If you paste it into an image file using a graphics package, such as PhotoShop or PaintShopPro, you can do all sorts of things to the picture:

Example of grabbing a picture from SolidEdge.

Set up your CAD view with appropriate background, no reference planes, anti-aliasing, perspective, textures etc etc. Once you have it looking right and zoomed to size you want it on the webpage, press Print Screen
Open Paint. Start > All Programs > Accessories > Paint
Edit > Paste. The whole screen is now shown inside Paint.
Select the bit that you want, using the rectangular select window. The Edit > Cut
Start a new Paint document. File > New. (Make sure the blank picture is small, then it will zoom up automatically to your new picture size). To set this smaller size use; Image > Attributes > 5x5 pixels (or something smaller than your image). Paste the cut picture Edit > Paste (or Ctrl-V).
Save as jpg. Here it is...

Hosting Your Website

Hosting a website: This is when a copy of your entire website folder is stored on an internet computer (server). This is like sending files to an external drive, but the 'external drive' is on a computer somewhere - and that drive is open to the internet (i.e. It can be read by everyone on the Internet).

You need to find a free website host. (Don't use an ISP website because they don't usually last very long).