Flex game for SEO contest

The flex game is open to all users...The URL for the game is http://labs.heymath.com/Fleximagically%20Searchable/...
The game is pretty straight forward. The term "Fleximagically searchable" is hidden in a set of images. The user has to find where the term is hidden within the time given. More the user plays the game, higher is the possibility of getting listed in the top 10 players.

Keeping my fingers crossed to see how google indexes the flash content :).

"Fleximagically Searchable" contest

Sometime back Ryan Stewart announced a Flex SEO contest  hoping that the community can learn the best way to expose data from a Flex application to search engines. Soon after the announcement came, my CTO Ananth was charged up to make use of this opportunity to create flex contents that are search engine friendly. So he urged my team mate Alagu (who is new to flex envi) to take part in the contest.

He took this as a challenge and started to learn flex and in a span of 25 days and he has completed a flex gaming application which is due for a public launch. The game follows the rules

• It has to be a Flex application


• “Fleximagically Searchable” must be dynamically loaded. It can’t be static text inside of your application. - But I don’t care how you load it, in fact that might make a difference in how Google ranks you.


• The first link must be deep linked directly into where you load “Fleximagically Searchable” into your application. Feel free to use any deep linking methods out there.


• Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.


• You must provide source code and be willing to talk about exactly what you did.


• Multiple entries are allowed if you want to try different things.

The game has come out well in a short span of time. Soon i will post the URL for the game

Adobe Open Screen Project

Recently Adobe has announced that they are working on a revolutionary "Open Screen Project". This is a great news for flash developers in this planet. Open Screen Project enables developers and designers to publish their content across various devices like Mobile, Computers, Consoles, TV etc....

So it going to be "One Runtime....All Screens". This is clearly a sign of Adobe ruling the RIA world. Future of RIA looks exciting...Looking forward to this project :)

30onair at Chennai Flex User Group

March 1 2008 - Chennai Flex User Group officially launched Adobe AIR 1.0 and flex 3. The event was organized by Ananth and me, along with the support of John Koch. The event was scheduled for 11.00 am at HeyMath! office. Around 12 members from the group attended the launch event. The event was kicked off with a presentation by Kevin Lynch. The presentation was around 10-15 mins. After that it was time to distribute AIR t-shirts and Flex 2.0 text book to all the members. Thanks to Adobe for the support. Then we guys had discussions on Adobe technologies especially Flex and AIR. It was very very formal. Everyone had their chance to speak on it.
After the heated discussions we had snacks as refreshments. Thanks to HeyMath! for the support. As we reached the end of the event, we still haven't shoot the "30 sec on Adobe Technologies" video with the members. First to come up for the shoot was Sahil Haslani. He spoke about "Why Flex?" for 30 secs. Next it was my CTO Ananth, who initially took few minutes to think but came with a stunning explanation about "Why Adobe?". As usual he couldn't resist using the whiteboard :).
Next it was Viswanathan who spoke about "Why Flex?" and to follow him was my colleagues Umesh and Shankar

Anantharaman - 30onair - Why Adobe?


Sahil - 30onair - Why Flex?


Viswanathan - 30onair - Why Flex?



Umesh - 30onair - Why Adobe?




Sankar - 30onair - Why Adobe?

Create a table using CSS

Days back my colleague asked me to create a table without using <table> tag. So i did a small sample which uses CSS to create a table. Its pretty simple and straight forward. I have put down the HTML and CSS below

/***************************************HTML***********************************/
<html>
<head>
<link href="table.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</body>
</html>


/************************************************table.css************************************/
.table
{
background:#333;

}
.table ul
{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li
{
list-style:none;
padding:5px 10px;
}
.table ul li.title
{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even
{
background:#fff
}
.table ul li.odd
{
background:#FFFFE6
}

Hope this helps css designers around.

Creating a curve through CSS (without using an image)

Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.

I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.

/****************************HTML code**************************************/

<html>
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="curvedBox">
<span>
<span class="r1" ></span>
<span class="r2" ></span>
<span class="r3" ></span>
<span class="r4" ></span>
</span>
<div class="content">
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class="r4" ></span>
<span class="r3" ></span>
<span class="r2" ></span>
<span class="r1" ></span>
</span>
</div>
</body>
</html>

/**************************curvedbox.css*****************************************/

body {background-color:#000;}

.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}

.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}