OpenRico is an excellent tool for building dynamic AJAX-style sites but it also has beautiful javascript effects for your pages.

This is a simple PHP class that will help you build an Accordion effect. Code and example provided, just read a bit more! 

file: ricoAccordion.class.php

 
/**
 * ricoAccordion Class v1.0
 * PHP wrapper class for create an openRico accordion
 * 
 * Created by jose.canciani (at) 4tm.biz
 * 
 * For updates check here:
 * http://www.4tm.biz/4tmsite/html/pensamos_post.php?id=11
 * 
 */
 
class ricoAccordion {
 
    var $name;
    var $style;
    var $class;
    var $accordionProps;
    
    var $panels;
    
    # switches, change as you like
    var $startPanel;
    
    function __construct() {
        $this->class = '';
        $this->style = '';
        $this->name = '';
        $this->accordionProps = array();
        $this->panels = array();
        $this->startPanel = 0;
    }
    
    function set($name, $value) {
        $this->{$name} = $value;
    }
    
    function load($header='',$content='') {
        $this->panels[] = array(
                            'header'=>$header,
                            'content'=>$content
        );        
    }
    
    
    function draw() {
    
        echo chr(10).'
class) {
            echo ' class="'.$this->class.'"';
        }
        if ($this->style) {
            echo ' style="'.$this->style.'"';
        }
        echo '>'.chr(10);
        $i = 0;
        foreach ($this->panels as $panel) {
            $i++;
            echo ' 
'.chr(10);
                  echo '  
'.chr(10);
                  echo $panel['header'].chr(10);
                  echo '  
'.chr(10);
                  echo '  
'.chr(10);
                  echo $panel['content'];
                  echo '  
'.chr(10);
            echo ' 
';
        }
        echo '
';
        
        echo ''.chr(10);
    }
}

Before using this code remember that your HTML page should include the prototype and rico javascript files (check openrico page for examples).

So, here is how to use it:

 
## Construct the accordion
require_once('html/ricoAccordion.class.php');
 
// create class
$accordion = new ricoAccordion;
 
// add accordion name
$accordion->set('name','profileAccordion');
 
// set some style for the accordion
$accordion->set('style','width: 500px; margin-top: 20px; margin-left: 20px;');
 
// set some of the accordion properties
// (check the accordion source js class for all of them
$accordion->set('accordionProps',array(
                                        'panelHeight'=>227,
                                        'collapsedBg'=>'#80033E',
                                        'expandedBg'=>'#80033E',
                                        'hoverBg'=>'#80033E',
                                        'borderColor'=>'#80033E'
                                    ));
 
// ...                                    
// Add the panel tabs here, replace $tabHeaderN for your
// title and $tabContentN for your content (N is the panel number)                                    
$accordion->load($tabHeader1,$tabContent1);
$accordion->load($tabHeader2,$tabContent2);
$accordion->load($tabHeader3,$tabContent3);
// ...
 
// you can set a starting panel to open at startup
// (panels begins at 0)
$accordion->set('startPanel',0);
 
// finally draw the accordion
$accordion->draw();

That’s it! Accordion should be draw after the last line. Your tab content can be almost anything. For example I’ve implemented some ajax forms for validate user data.

If you have any doubt or suggestion go ahead ad write!

Jose.

My goal was to write text in a way that bots cannot read it when shown in a HTML page. Javascript should do.

First thing I've tried was to find a javascript-like decodeURI function in PHP which would have made this work very easy, but the only one I could find (www.captain.at), was not working properly with UTF-8 strings. So I decide to write a very simple one my own.

It's simple the document.write function writing parts of the text. For UTF-8 to work I had to find a function to replace "substr" becouse it does not play well with UTF-8 strings. From the php.net user manual I've found this one:

function utf8_substr($str,$from,$len){
        # utf8 substr
        # www.yeap.lv
          return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.
                           '((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s',
                           '$1',$str);
    }

After I have that function, the other one was simple:

function js_obfuscate($text,$step=4) {
   echo ''.chr(10);
}

$step defines how many characters the function will print in each document.write call.

Hope you like it! If you find something better, you are free to leave a comment! A encodeURI/decodeURI that works with UTF-8 would be great.

I was browsing the internet when I found this curious link: www.lost.eu/4eea0. Being a Lost fan I didn't hesitate to click it. To my surprise (?) it has nothing to do with the TV show, but I couldn't resists to enter. Basically it's a student project (that's what the page says); they call it a game.

Some people would say it's not a game if it's not fun to play. And this could be true for most of mankind but the rest it's trapped in Lost mysteries. The game consists in getting other persons invited. You have a 30 day countdown and every time you invite a person the clock resets to 30 days again. If it reaches 0 you lose. When the page gets 7 million players the game ends. The player who survived with most invites wins.

When you are invited you get your invite code, something like www.lost.eu/4eea0. Every time a person uses that address to enter the game, your clock resets. It's said these addresses are found everywhere, not only on the internet but in train stations walls, bathrooms, posters, everywhere. Relation between the Internet and reality is something that has not exploded yet, and projects like this one shows we are only seeing the top of the iceberg of the "social" web.

When we talk about Web 2.0 we usually get lost explaining how AJAX works. But the social aspect of the concept is probably the most important one. The game's founder did his homework and a bit of Social engineering too: I don't think using Lost as the name of the game is a random event. Lost its probably one of the most spread and well known tv show of the last years. In every corner of the world people has their own theories and want to talk about them. Every new viewer can't wait to see the next chapter. The game certainly fool me, I clicked the link without hesitation.

The web page is simple and it uses Google Maps to locate every user. It's a cool thing to see how a World map is being fill of dots identifying each player.

This social phenomenon is not ignored by marketing and advertising campaigns. I've seen a lot of publicity aimed to make the user invite his friends to do something on the site. Some of them are well conceived: for example Fox LatinAmerica is showing a Simpsons campaign where the concept is that "The Simpsons is more than a show, it's a religion". So it encourages you to build your own church and invite your friends to be part of it. The idea is pretty good (we are really big fans of The Simpsons show over here). But last time I checked there were not many churches loaded...

Examples like this shows us that knowing what the masses want is not an exact science. Viral campaigns, so in fashion today, are created by big companies trying to imitate how a small and original piece can spread out like cancer. But reality shows they have poor changes of being accepted. There are thousands youtube videos out there that are more original, funny or beautiful than almost anything an Advertising firm can think of.

Buts there's also proven success and people learn from previous experiences. Sometimes repeating the same model of a successful endeavor can repeat it's success. Remember the millon pixels (dollars) homepage? Coca-Cola Mexico has launched a campaign called "La camiseta eres tu" (The national t-shirt is YOU) where every Mexican can support it's national team by creating a big T-shirt with photos of all of them. Although the site is not very well designed (very heavy to navigate, pretty slow even for broadband) the idea is pretty cool. Some might consider it's a copy of the Millon Dollar Homepage, I believe it's a good twist and use of the social phenomenon in the web 2.0. But ey! This is a technical weblog, not an advertising one! ;)

UPDATE: Apparently my ticket was resolved! Thanks Google Team! For a non-paid service it was a really quick response (just a couple of days).

4TM has a blog on Blogger.com, oraalertcheck.blogspot.com. Recently the blog was taken offline by Google stuff saying that the blog was a SPAM site. Apparently someone/something hit the Flag button several times.

When I enter the site there was a message with a link to the Blogger support site. I opened a new ticket so that they will reopen the blog. Some days later I got my blog back, but with a different URL!!! What a surprise to see that the original URL was taked by a SPAMMER and I can not use my URL again! My new url is oraalertcheck5.blogspot.com (5? does that means there are 4 other spam sites?), so anyone entering my site will think it's no longer active.

I've opened a new ticket to support, and I'm expecting now to obtain the original URL again. I'll keep you posted.