Reviewing Google’s 03D, a 3D engine for browsers in Javascript.

October 9th, 2009

Hi!, if you followed my latest tweets you may know that I am taking a look to this new tech from Google that was presented on this latest IO convention. This API allows you to create and manipulate 2D and 3D models using only javascript. What is also interesting is the underlying tech around 03d that is able to access openGL and Direct3D. Models can be imported from sources as SketchUp, Maya, Max exporting those to COLLADA. More details here.

Also has a complete set of common 3D stuff like shapes, simple objects, textures, particle emiters, cameras, lights, video in 3d, etc. The API is available on their web site.

An interesting example that came with the API, is the trends example. Originally it show the earth with a beam (like the sun) coming out form random places over the surface. I changed that beam to a particle emitter and put a sequence of images of the profile of a location aware (fake) social network. Basically, it shows now who is where in the world (watch the video).

Another great example is a GAME I’ve found, a kind of wonder boy style called Infinite journey form LargeAnimal.

That’s all for now, next time I will be posting more of my work. Appreciate any comment, Cheers!

lemil General , , , , ,

Finite State Machine Utility en Javascript para PureMVC.

October 8th, 2009

Hello Folks!, I am working again to contribute with a sequel of my previous work about finite state machines implementation framework. This time I am working to mashup a FSM into the pureMVC framework in Javscript. I’ve used the FSM utility in AS# and I loved it since the first time, but I was kinda shocked, when I realized that this utility was not available on Javascript. Since I’m a JS, PureMVC and FSM fan I am working hard to make a neat port of this, available soon to the PureMVC dev community.

Cheers!, and don’t be shy and write comments below!. *this time I will read them all, promise!.

lemil General , ,

Where has all the fun gone?

May 25th, 2009

Guess you remember in the times of the dot-com bubble , when b2c titans like e-bay and amazon, were supposed to kill traditional commerce and visionary people predicted they will own or be part of the majority of our daily shopping.

I used to spend a couple of hours a week  in sites like eBay, Amazon or MercadoLibre trying to find interesting stuff, sharing content and reading comments. .. Did that last phrase sounded familiar to you?,  that’s the same thing we still do, more days and hours a week in such sites as Facebook, mySpace, etc, etc?. Apparently, instead of spending money in things we barely need, now we spend more time (= less money) reading stuff, comments / tweets, pols, playing online, etc. This slow decay could be associated to several factors like international crisis, inefficient search, new competitors (mercadolibre (AR), craiglist, olx, and so…), among others, but at the end the Real and simple reason is that is not fun anymore.

Over the years we changed the way we use and have fun with internet, and fastest connections allow us to get more content, streamings, and realtime communications. Finally facts of our daily life and history became reflected and published.

This is a rank that describes the average user behaviour for US on 2004.

And this is for the year 2006

As a verification to my point I mashed up a couple of trends graphics, showing a comparison about searched terms in ecommerce and social. (source: google trends)

- Argentina

ebay
1.00
mercado libre
17.0
facebook
16.0
twitter
0

Here, in Argentina,  Mercadolibre.com (local ebay and ex affiliated to them), was crushed by facebook before october 08.

- All regions

ebay
1.00
mercado libre
0.04
facebook
1.74
twitter
0.02

Same thing for all reagions 6 month before.

Leandro.

Sources:
- Google Trends . http://www.google.com/trends
- Tech Crunch . http://www.techcrunch.com/2009/05/23/how-facebook-myspace-and-youtube-killed-ebay/ (great article)

Technorati Profile

lemil Social Networks , , , ,

Trends - Whois who in Social Networking [Trends]

May 3rd, 2009

Nowadays twitter seems to be in everybody’s mouth, (meanwhile we try to image another idea to monetize all that traffic). A year ago Facebook changed the way we use the web and it gathered people around the world in a 200.000.000 user community.  Today, using google trends, did a chart explaining what people is searching on social networking.

facebook
1.00
twitter
0.01
myspace
0.32
hi5
0.20
google
0.57

If you pay attentio to the chart in the lower part shows how “news about” twitter eclipsed any other thing on the web, at  least for a couple of days (the kutner effect).

Cheers!

Leandro Milmanda Perez

lemil Social Networks , , , , , ,

Trends - Social networking in Argentina

April 18th, 2009

Since a few month ago we changed the way we use Internet in Argentina. Remember the g’ood old days when we use to send mails, see La Nacion.com or Ole.com.ar, and may be the most “trendies” watch videos on you tube. Now (only a few month later) all of us is on facebook, tagging pictures, sending wall messages, researching friends of friends, even Moms got there!.  And is you are wandering about how popular in comparison to other sites it became I charted , thanks to google trends.

facebook
1.00
taringa
0.76
la nacion
0.44
clarin
1.20
sexo
0.62

Something changed, we did? I guess…. the use of social network is here for good.

If you are interested in being part of social networks or want to build your,  own leave your comments or contact me.

by Leandro Milanda Perez.

lemil Social Networks , , ,

Java @ Google App Engine

April 14th, 2009

As I twitted last week I am testing an early version of Google’s App Engine in Java flavor. If you never got the chance to try it, or you are just curious about it, I wrote a few tutorials about how to do regular things, including: java patters, servlets, data access, etc.

Use this command to anonymously check out the latest project source code:

# Non-members may check out a read-only working copy anonymously over HTTP.
svn checkout http://gae-java-tutorial1.googlecode.com/svn/trunk/ gae-java-tutorial1-read-only

Example 1 - Using DataStore nad JPA

I created a POJO calle SimplePojo and stored un DS using JPA. Below is a copy of the persistance.xml file I am using…

<?xml version="1.0" encoding="UTF-8" ?>
<persistence xmlns="http://java.sun.com/xml/ns/persistence"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/persistence
        http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd" version="1.0">

    <persistence-unit name="transactions-optional">
        <provider>org.datanucleus.store.appengine.jpa.DatastorePersistenceProvider</provider>
        <class>com.gae.tutorial.pojo.SimplePojo</class>
        <properties>
            <property name="datanucleus.NontransactionalRead" value="true"/>
            <property name="datanucleus.NontransactionalWrite" value="true"/>
            <property name="datanucleus.ConnectionURL" value="appengine"/>
        </properties>
    </persistence-unit>
</persistence>

Note the the hardcoded appengie value from the connection URL. Below the Poj file…

import javax.jdo.annotations.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;

@Entity
@Table(name = "simple_pojo")
@NamedQueries( {
    @NamedQuery(name = "getLast", query = "SELECT p FROM SimplePojo p ORDER BY p.id DESC")
})

public class SimplePojo {

    @Id
    @GeneratedValue(generator="generador",strategy=GenerationType.IDENTITY)
    @Column(name="ID")
    private Long id;
    
    @Column(name="VALOR")
    private String valor;
    
    
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getValor() {
        return valor;
    }

    public void setValor(String valor) {
        this.valor = valor;
    }
}

To fully understand this example I recommend you to checkout the SVN source repo and open it on eclipse. One important thing is that you need to install the App Engine SDK for Java and the eclipse plugins from App Engine too.

Also recommend you to get an account and start uusing it.!

Cheers!

Leandro.

lemil General , , ,

Wordpress @ iPhone

April 3rd, 2009

wordpress

Wow!, Ive just discovered this WP app for iPhone and it is amazing! Definitelly a Must Have!

( http://iphone.wordpress.org/)

lemil tools , ,

Fault tolerance on comodity clusters..

March 25th, 2009

Ive been doing some research on this latelly and I found some interesting videos I want to share with you…

This video demonstrates how it works on a real cluster, while disks are being disconnected.
Lemil.-

lemil General , , ,

Socialsite, an opensource social network.

March 25th, 2009

Hi!, today I m going to taught you about this new project called Socialsite.

What’s Socialsite ( https://socialsite.dev.java.net/)?

It is an open source software made by sun,  that implements 2 things, an Opensocial (www.opensocial.org) container that render your favorite OS gadgets (Google gadgets too), and also has it own social graph Db and gadgets to manage invitations, relationships, messaging, groups, profiles, like any other social network.

What techs power Social Networks ?

I’ll give you this link, its a pdf with a lot of new techs around social networking.

What am I doing with SS ?

I am doing a few things…

- I am doing implementations of SS for the first time. This software is new, Ive been working with this since very early releases.

- Make it production ready. We are looking forward open these implementations to massive audience (2 to 5 million users around the globe).

- Turn it Jboss ready!. Since this soft came from an open source project from Sun Microsystems, (they did it great!),  it was built using Sun’s Stack (Java, JPA, (Derby, yes Derby … MySql came later), and Glassfish). Since the company I am working for its using Jboss (I am personally a kind of fan of Jboss stack) as it main deployment server, I could not resist to make my own implementation of SS for that platform.

- J2EE deploymet, Ejb3 ready!.

- A lot of new features. I built a few new features like notifications i18n, job manager, support for images (previously stored on BLOBs), Notification services, Gmail integration services, etc. Also we (the team) cleaned all the reported bugs (and new ones ;) ).

- Cluster ready!. I made also a few tunnings and scripts that allow you to run SS in HA clusters, and setted up distribued caches, farming services, nodes, etc.

- Oracle 10g ready!.

- We also did a lot of stuff just for this impl, but those details I cannot tell. ( may be in a later post :)

I will continue posting some news about this project and related, …to keep in touch, any comments, below.

Cheers!

Lemil.-

lemil General

State machines for ‘javascript’

December 11th, 2008

Today I am presenting a (yet) small but usefull framework to use in ajax clients that I build and use …

maquina logo  

 

What is Maquina?

Maquina is a petri net runtime implementation for Javascript and other languages like AS3 and java (work in progress). 

 

Why do I need a state machine ?

Finite state machines have long been used as an organizing principle for designing and implementing complex behavior in event-driven programs, such as network adapters and compilers. Now, programmable Web browsers have opened a new event-driven environment to a new generation of applications. Browser-based applications, popularized by Ajax, are becoming more complex. Designers and implementers can benefit from the discipline and structure that finite state machines offer. In this article, you, learn how to use a finite state machine to design complex behavior for a simple Web widget — an animated tooltip that fades into and out of view. (read more = http://www.ibm.com/developerworks/library/wa-finitemach1/ ).

 

 

How it Works…

 This plugin controls the lifecycle of an input form. To implement it, the changes described below, should be done in the existing application.

  

1 - Add Scripting libraries…

 

<!– Maquina Core –>

<script type=”text/javascript” src=”../../maquina.js”></script>

<script type=”text/javascript” src=”../../plugins/form/plugin.js”></script>

<!– this example uses prototype lib –>

<script type=”text/javascript” src=”http://www.prototypejs.org/assets/2008/1/25/prototype-.6.0.2.js”></script>

 

(*) yes, we use prototype.

 

 

2 - Create a form in HTML  

 

 

<div class=”widget_form”>

            <div id=”form1_flash_state” ></div>

            <form id=’form1_form’ name=’form1_form’ >

                        <h3>Maquina Form Test</h3>

                        <div id=”form1_widget_message_top” class=”widget_message”></div>

                        <label for=”fullname”>FullName</label>

                        <input type=”text” name=”fullname” id=”fullname”

                                    onkeyup=”maquina.plugins.form.handleFormEvent(’form1′,’change’)”/>

                        <br /><br />

                        <label for=”Description”>Description</label>

                       <input type=”text” name=”description” id=”description”

                                    oneyup=”maquina.plugins.form.handleFormEvent(’form1′,’change’)”/>

                        <br /><br />

                        <label for=”Age”>Age</label>

                       <select name=”age”

                                onchange=“maquina.plugins.form.handleFormEvent(’form1′,’change’)” >

                        <option value=”20-30″>20-30</option>

                        <option value=”30-40″>30-40</option>

                        </select>

                        <br /><br />

                        <div id=”form1_widget_message_footer” class=”widget_message”></div>

                        <br />

                        <div id=”form1_widget_button_bar” class=”widget_button_bar”></div>

            </form>

</div>

 

  

(*) The tags  with “class=widget_message” show validation and app messages.

(**) Note that there is no button bar in the form neither action property in the form tag. Everything is going to be managed by the plugin.

(***) Note in bold are the triggers to the dirty state. Include this on every single input element that is going to trigger a change of state.

  

3 - Initialize the form….

 

<script type=”text/javascript”>

var base_url = “http://localhost/maquina/ports/javascript/1.0/src/trunk/examples”;

/* Initialize

 * execute this function when ever you want to inititalize the state machine

 **/

function initialize()

{

            try {

                        //(Optional) Just a loggin function included in maquina

                        consolelog(”initialize form1″);

                        //This is to insert the button bar in the placeholder

                       maquina.plugins.form.renderFormCommandBar(”form1″);

 

                        //Create a context (model) that the state machine is going to use.

                        var context1 = [];

                        context1["graph"] =  new maquina.plugins.form.graph(); //this is the default behaviour

                        context1["ajax"] = [];

                        context1.ajax["url"] = “form_plugin_backend.php”; //Put here the action url

                        maquina.createStateMachine(”form1″, context1);

                       

            } catch(e) {

                        console.error(”Error at initialize! : ” + e.message);

            }

}

//Trigger this on page Load

window.onload = function() {

            consolelog(”initialize()”);

            initialize();

}

</script>

 

 

4 - (Oprtional) you can use your own validation function in javascript…

 

function validate_miform(context){

            var form = context["elements"]["form"];

            // You can retrieve any value stored in the context.

            ar projID = context["projID"];

            var divID = context["divID"];

       

 

            var err = new Array();

            err['haserrors'] = false;

           

            if(ifEmpty($(’notes_0′).value))

            {

                        //Append your error message to the correct tag (see error model below)

                        err['top'] = ‘You must type a Note to Save Overall Status ‘;

                        err['haserrors'] = true;

            }

       

            if(ifEmpty($(’status_0′).value))

            {

                        err['footer'] = “You must assign an Overall Status to save Overall Status Notes”;

                        err['haserrors'] = true;

            }

            

            if (err['haserrors'] == true){  

                       err['result'] = ‘failure’;

            } else { 

                        err['result'] = ’success’;

            }

return err;

}

 

 

(*) You can  customize also the type of message displayed on each place. By adding prefixes ( “error:” , “alert:” or nothing “” ) you can change the images associated to the error message.

 

Error (Inform) model …

 

maquina-error-model

 

(**) This model should be created in the validation function. Also in this function you can choose where to display the messages.

 

Important: to execute this function before submitting the data you just need to do this on step 3…

  

context[“validation”] = validate_miform;

  

5 - What to do at the server side… (in php)

 

 

function server_side_processs_XXXXX($div,$projID)

{

  [..]

//Example - Form Submit Response

$result['flag'] = ’success’;

$result['widget_message'] = ‘Settings Succesfully saved’;

$result['errors']['top'] = ”;

$result['errors']['footer'] = ‘Changes succesfully saved!’;

echo json_encode($result) ;

 }

  

 

(*) You just need to build a custom message in an array with the format descripbed above. ‘widget_message’ = messages are going to be displayed in the button bar. Top and footer in the divs with those names.

 

The message that should be json encoded so don’t forget. ho add this (again in php)…

 

 

header(’Content-type: application/json’);

 

 

(**) flags :

Result: the word “success” or “failure”

Message: any message to be displayed. You can embed html here.

 

 

Conclusions…

This is the first thing tutorial I create for this framework , I will be upgrading it and uploading new stuff about this…

 

by Leandro Milmanda Perez

 

lemil General , , , , ,