Hi everybody !
For the last month or so I've been working on and off on my Google
Pages homepage.
I've been visiting the GPC group looking for tricks and tips on GPC,
and used a lot of googling (I think they hate this term) for online
scripts and code samples.
Here is what I got:
http://gpgemini.googlepages.com/
You sincere opinions are most wanted.
I will describe here the methods I used to create the page, which I'm
sure many of you will find useful.
My main guideline was to stay within the limits of the GPC online
editor.
It would have been easier to do many of these things using a regular
.html page and upload+link to it on GPC, but I wanted to see how far
GPC could be pushed.
My base template was "Chemise Asp":
http://gpgemini.googlepages.com/sample-base
I started off with adding some contents for my website, mainly my Blog
and Gallery.
* Blog
I opened a new blog at www.vox.com (a highly recommended blog service
BTW).
Besides linking to the blog, I wanted the website to have some dynamic
contents, to keep returning visitors interested.
So I added a "Latest Post" script - it uses the blog's RSS feed to
display the latest post.
I really am not a .js programmer so I looked it up in Google.
The service I use for my site is:
http://www.rss-to-javascript.com/p/138.html
read more here:
http://ezinearticles.com/?How-To-Display-RSS-Feeds-on-Your-Website&id...
or search Google.
* Gallery
In my spare time I am a photographer, so my gallery is also a vital
part of my website.
At first I thought of putting a random image display, so that every
time a visitor enters the site, he sees a random image from a given
set.
I found a script that does this here:
http://www.flzone.com/ShowDetail.asp?NewsId=5427
it seems to work fine with GPC, and again, Google will find you many
others.
But after putting it, I decided it's not quite what I wanted and I
decided to go for an embedded slide-show.
I tried Flickr:
http://blogger-templates.blogspot.com/2005/09/flash-slideshow.html
Which gives you a pretty nice slide-show, but decided against it since
it was too user-interactive, while I was striving for a static
slide-show. Also, I don't host my photos in Flickr, so having it
redirect my visitors there would be dumb.
I also tried PicasaWeb's slide-show:
http://picasaweb.google.com/gpgallery/AbstractFun/photo#s497841605422...
Above is a sample from my gallery (which is fully hosted on PicasaWeb).
I've decided against it as well because of the UI buttons, and because
the displayed images were too big.
So I've looked up customizable slide-show generators in Google, and
found this:
http://www.flash-applets.com/fade_effect_slideshow.html
This site offers various free flash-applets, and "slideshow 5" is
exactly what I've been looking for.
I added some borders around it, and framed it with <IFrame> to hide the
ugly "free version" hint.
* Email
I was searching for methods to mask my email, to protect it from spam.
Even though I'm already receiving about ~600 spam emails per week,
(with Gmail filtering 99.99% of them), and am aware of the Google Pages
spam problem:
http://www.onedegree.ca/2006/02/23/big-problem-with-google-pages
I've decided to try and protect it none the less.
While searching, I found this:
http://services.nexodyne.com/email/index.php
An Email icon generator. It creates a nice image with your email in it,
making sure your Email address is safe from spammers.
The funny thing is, I've seen many people use this generator, and link
the image with a "mailto:" reference.
Different strokes ...
* Feed Burn
I've also burned my Blog & Gallery feeds, to keep track of
subscriptions:
http://www.feedburner.com/
* Hit Count
To keep track of site traffic, I've setup a StatCounter account:
http://www.statcounter.com/
I've been using this service in the past, and recommend it.
I also tried Google Analytics:
http://www.google.com/analytics/
but was very disappointed that it has no good way of blocking self
visits. Or maybe I just didn't find how to (correct me anyone ?).
It only offers to block a given IP, which is useless since my IP
changes on each connection restart.
StatCounter on the other hand, plants a blocking cookie on my PC, and
as long as it's there, it won't log my own visits.
* AdSense
https://www.google.com/adsense/
I added a small Google Ads bar. Not really for the money, but just to
try the look and feel of it.
Never tried it before and found the setup to be quick and easy.
Next I was thinking of modifying the look of the website, to make it
more personal.
I tried adding a logo at the top, and got something like this:
http://gpgemini.googlepages.com/sample-logo
As you can see, the logo is positioned with an offset both in X and Y
axis.
Very annoying !!
So I began digging online, looking for a way to bypass this. Again, my
HTML knowledge ranges from basic to none.
I found, somewhat by chance, this site:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_text
It has lots of nice javascript examples, and lets you test them with
their online editor.
Looking at the first sample, I noticed something very interesting -
"They have a script that writes stuff into the html page dynamically" I
thought ... "Google pages erases any attempt to write <style> tags into
the html editor" I thought ... "Google allows javascripts" I thought
...
"A-HA !" I said out loud :)
>From this point on, I was able to change *any* CSS property of the
Google Pages template.
For example, to make the logo stick nicely, I added this to the page:
<SCRIPT type=text/javascript> document.write('<style type="text/css">
h1 { padding: 0px 0px 0px 0px;} </style>') </SCRIPT>
You can place it in anyone of the edit fields. The contents of
write('') must be a SINGLE LINE, and have no ['] characters (or if you
must, escape them like this: [\']).
This is the result:
http://gpgemini.googlepages.com/sample-logo-sticky A note here:
This is NOT a regular usage of Google Pages - Google hides the css
files, removes <style> tags, and offers no interface to modify the look
of pages. I don't know if the Google people will like this or not, or
will they try to block it or not.
IMHO, since scripting is allowed, since we can upload any html page to
Google Pages and since customization is a pure MUST, this is a
reasonable usage of the Google Pages service. I hope it will remain
possible, and even becomes an advanced feature with easier access.
That said, after making a nice logo and setting it up (I used the
background property instead of putting an <img>), I customized other
properties as well, such as link behaviour, color schemes, borders and
margins.
the document object adds many new possibilities to GPC, such as
dynamically loading a CSS file, like this:
<script type="text/javascript">
var fileref=""
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "custom_style.css");
document.getElementsByTagName("head").item(0).appendChild(fileref)
</script>
custom_style.css has the css style of this page:
http://gpgemini.googlepages.com/sample-other-css
and is loaded into a page like this:
http://gpgemini.googlepages.com/sample-load-css-before
and turns to this:
http://gpgemini.googlepages.com/sample-load-css-after
Sorry for the mess, I was unable to make a link/button that executes
the above script so that the change will occur on-click, instead of
making two pages.
This is it for modifying the page's style.
* Frames
At some point I noticed that the java scripts I added are really
damaging my page's load speed. Especially the Latest-Post and
slide-show (and AdSense as well).
Since java scripts are blocking pieces of code, the rest of the page
wouldn't show until each script finished loading (which could take
several seconds).
The effect was that the page would appear blank, and load up in chunks,
stalling on each .js script.
The solution to this was quite simple: put every .js script in a frame.
The IFrame object loads instantly, so the page and it's contents are
loaded quickly, after which the contents of these frames - the .js
scripts, are loaded.
* Loading Message
After putting the slow .js scripts into frames, the page would load
quite quickly, but the scripts within the frames would still take some
time.
So I decided to put a "Loading ..." message to these scripts.
Inspired by this code sample:
http://javascript.internet.com/css/pre-loading-message.html
I added a "Loading" message as seen in this page:
http://gpgemini.googlepages.com/LatestPostPlusLoad.html
Press F5 to view the "Loading" message appear.
I won't explain here how it works, a glimpse in the source code will
self-explain.
* CSS Menu
The last edition I made to the site was putting a simple links menu.
I tried many different menus, most of them java script based.
The best of them was CoolJSMenu:
http://javascript.cooldev.com/scripts/coolmenu/
But I was unable to make it work in GPC, since it requires .js scripts
to be loaded in the <head> tag, and the 'document' trick I used for
loading CSS didn't work for scripts for some reason.
Finally, I decided to use CSS based menus, which are faster and
simpler, but are also more limited in their abilities.
There are many others to choose from:
http://css.maxdesign.com.au/listamatic/
And there is always Google.
A couple of side notes:
1. While working on the site I accidentally inserted an unconditioned
redirect script into my "home" page.
I would like to thank Milus and his Proxomitron solution that saved my
page.
http://groups.google.co.uk/group/GPC-How-to-Advanced/browse_thread/th...
2. While developing the website, I used both Firefox 2.0 and IE7.
Originally to overcome the GPC editor problems, but later to make sure
my site is compatible for both.
I have no opinion in favor of, or against, Firefox, but I'll say this:
designing web pages to work with Firefox is HELL.
It won't comply to the simplest most
...
read more »
|
