Google Blogoscoped

Tuesday, November 9, 2004

Google DHTML

Here's some Google DHTML creating a different animation every time you load this page.

So you get an idea how I implemented this, here is the underyling source (it's just a single file, and no graphics are needed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Google DHTML</title>
<style type="text/css" media="screen"><!--

.spriteshadow,
.sprite
{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    font-size: 68px;
    color: #fff;
    font-weight: bold;
    font-family: arial, sans-serif;
    color: #888;
}

#sprite0 { color: rgb(24,77,198); }
#sprite1 { color: rgb(221,63,49); }
#sprite2 { color: rgb(239,186,0); }
#sprite3 { color: rgb(57,113,222); }
#sprite4 { color: rgb(49,182,57); }
#sprite5 { color: rgb(231,73,49); }

// --></style>

<script type="text/javascript"><!--

var inited = false;
var sprites = new Array();
var spriteMax = 6;
var speed = .5;
var speedMax = 5;

function init()
{
    if (document.getElementById)
    {
        for (i = 0; i < spriteMax; i++)
        {
            x = 50 + Math.round( Math.random() * 150);
            y = 50 + Math.round( Math.random() * 150);
            sprites[i] = new Sprite(x, y, 0, 0);
        }
        inited = true;
        setTimeout("move()", 100);
    }
}

function move()
{
    if (inited)
    {
        for (i = 0; i < spriteMax - 1; i++)
        {
            adjustSpriteSpeed(i, i + 1);
        }
        adjustSpriteSpeed(spriteMax - 1, 0);

        for (i = 0; i < spriteMax; i++)
        {
            var elm = document.getElementById("sprite" + i);
            elm.style.left = sprites[i].x + "px";
            elm.style.top = sprites[i].y + "px";

            var elm = document.getElementById("spriteshadow" + i);
            elm.style.left = sprites[i].x + "px";
            elm.style.top = (sprites[i].y + 5) + "px";

        }
        setTimeout("move()", 100);
    }
}

function adjustSpriteSpeed(i1, i2)
{
    sprites[i1].speedX = adjustSpeed(sprites[i1].x, sprites[i2].x, sprites[i1].speedX);
    sprites[i1].speedY = adjustSpeed(sprites[i1].y, sprites[i2].y, sprites[i1].speedY);
    sprites[i1].x += sprites[i1].speedX;
    sprites[i1].y += sprites[i1].speedY;
}

function adjustSpeed(sprite1, sprite2, speed1)
{
    if (sprite1 < sprite2) {
        speed1 += speed;
        if (speed1 > speedMax) {
            speed1 = speedMax;
        }
    }
    else if (sprite1 > sprite2) {
        speed1 -= speed;
        if (speed1 < -speedMax) {
            speed1 = -speedMax;
        }
    }
    return speed1;
}

function Sprite(x, y, speedX, speedY)
{
    this.x = x;
    this.y = y;
    this.speedX = speedX;
    this.speedY = speedY;
}

// --></script>

</head>
<body onload="init()">

<div class="spriteshadow" id="spriteshadow0">G</div>
<div class="spriteshadow" id="spriteshadow1">o</div>
<div class="spriteshadow" id="spriteshadow2">o</div>
<div class="spriteshadow" id="spriteshadow3">g</div>
<div class="spriteshadow" id="spriteshadow4">l</div>
<div class="spriteshadow" id="spriteshadow5">e</div>

<div class="sprite" id="sprite0">G</div>
<div class="sprite" id="sprite1">o</div>
<div class="sprite" id="sprite2">o</div>
<div class="sprite" id="sprite3">g</div>
<div class="sprite" id="sprite4">l</div>
<div class="sprite" id="sprite5">e</div>

</body>
</html>

If you look at the JavaScript source you can see that movement is created by putting every letter of the word "Google" in a different random position, and to then let the first letter hunt the second letter, the second letter hunt the third, and so on.

Threat Level

Did you know you can wear the current terrorist threat level as t-shirt? [Via Feeeds.]

Amazon Publishes BMW-like Short Movies

“This holiday season Amazon.com brings you Amazon Theater, an exclusive collection of five short films. This week’s film, ’’Portrait,’’ is a comedy about a domineering fashionista (Minnie Driver) who learns a lesson about inner beauty--the hard way, of course.”
[Via Feeeds.]

Dutch Cracked Gmail

23-year old Peter van Dijk from Netherlands found a Gmail exploit and alerted Google.

“Today [November 04, 2004], I found a bug in Google’s software that allows an exploiter to read any active Gmail user’s mail. I’m writing a report to send to Google; should be interesting to see whether they will respond this time, as this hole is a bit more severe than the ones I tried to tell them about a long time ago.”

The security hole is fixed by now.

“Wow. I re-tested the exploit just now [November 05, 2004] and it looks like they fixed it.”

Full details can be found at his blog.

SEO Toolbar

SEO Inc promotes its new Search Engine Optimization toolbar (which, they claim, is the first SEO toolbar ever). Sadly, the setup crashed here, and it’s IE-only. [Via InsideGoogle.]

Feedster Developers

Are you a developer using Feedster in great ways? Feedster would like to know.

Firefox Page on Google

Now that’s nice – Dirson told me Google created a special Firefox search page to welcome the browser. There’s a new Firefox tip every time you load the page, which makes it suitable as browser default page for Firefox users.

Justin F. writes this “is actually the new default home page for Firefox 1.0 installations.”

Jan P. notes the Google start page is also available in German. Apparently, every country got their own: Spain, Italy, and so on.

Firefox 1

Firefox 1 has been released. Instead of going to the download site – which is down half the time, and shows the wrong version the other half – I suggest to use your Firefox options to install this release (go to the “Advanced” tab, then click on Software updates -> “Check now”). After installing, you need to restart.

Unfortunately, this release didn’t fix the bug introduced in the last version: you still can’t search within textareas. For every blog or wiki user, this is a major annoyance. Martin Gregory in Bugzilla writes:

“I can’t believe the comment “For PR1 we are not going to find in text boxes”!!

That is a massive step backwards.

It will certainly put wiki users offside: wiki’s present users with large prepopulated text boxes, which they definitely need to search in.”

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!