The aim of this project is to transfer the website of the East Midlands Knowledge Network (http://www.emkn.org.uk/) to the free web creation and web hosting service – Google Sites, in order to save the useful resources and make them available after the original website is closed.Google Sites is a free tool to quickly create and publish web pages and it is available under: https://sites.google.com/. In order to use the service, it is required to have a Google Account which is also free.
Since I have both Google Account and a little experience in creating Google Sites (I set up a website for my maths group project, 2 years ago) I thought that the task would be fairly easy. The EMKN original website looks nice and modern, but it is made only with HTML, CSS and JavaScript. All the data is static and there is no database or server-side scripting behind the website.
Setting up the page is very quick, the user just needs to fill in a form where they choose properties of the website, such as name, address and a description. After filling in everything I was ready to start building the actual website.
Despite the simplicity of the original resource, I was proven wrong thinking that the task would be easy. Transferring information in the form of formatted text or images didn’t cause any problems at all. But the troubles began once I moved to JavaScript (switching between 2 images with onMouseOver effect) and CSS (styling the rainbow-coloured menu).
The first thing I tried was using the HTML function available on the menu bar. It allows the user to get an insight in the code behind the content and edit it. However, when I typed in my improvements, the active code disappeared as soon I pressed ‘Save’. I looked around the service, hoping to find a way to apply the code externally, but there was no such thing.
This limitation wouldn’t affect the content that much, as the information could be saved as simple text and images, but still I decided that it was worth further investigation.
Obviously I turned to Google search engine in order to find a solution. I came across a piece of information about using a gadget called Code Wrapper, that allows to put the ‘forbidden’ code on the Google Sites. I tested the gadget on the image-switching onMouseOver JavaScript function and it worked fine. Encouraged by this success I began to write code for the next active element – the menu. The original one was done only by CSS hover pseudo class, but because it can be only used in an external CSS file, and Google Sites don’t allow them, I was forced to use JavaScript onMouseOver again.
As I mentioned it is not possible to use external CSS, so every position on the menu had to be styled and activated individually. This was rather time-consuming and involved writing quite a lot of code. When I finished and tried testing it in the Code Wrapper, the result was an error. Apparently this amount of code made the URL too long and impossible to process.
And so I had to return to the search engine to find a better solution that would suit any volume of code. This time I found out that Google actually provides a tool for easy gadget-creation. The idea is very simple: the gadget is an XML file that consists of predefined header and footer, and between them the user can type any code they wish. After attaching the file to the website it can be inserted in any chosen place.
This time testing gave positive, very nice looking effect – the menu looks and behaves almost identical to the original one.
I believe that this solution is the most suitable one to use with Google Sites. Despite having to write a big amount of code for quite simple things, the final effect is exactly what is needed. However, this method is inefficient and cannot be compared to standard web designing methods, which allow reducing the volume of code to minimum.
Comments
Post a Comment