by Leandro Milmanda Perez » javascript http://www.lemil.com.ar/blog about IT, software & trends. Tue, 02 Aug 2011 21:04:06 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Reviewing Google’s 03D, a 3D engine for browsers in Javascript. http://www.lemil.com.ar/blog/index.php/2009/10/review-of-googles-03d-a-3d-engine-for-browser-in-javascript/ http://www.lemil.com.ar/blog/index.php/2009/10/review-of-googles-03d-a-3d-engine-for-browser-in-javascript/#comments Fri, 09 Oct 2009 15:14:34 +0000 lemil http://www.lemil.com.ar/blog/?p=93 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!

]]> http://www.lemil.com.ar/blog/index.php/2009/10/review-of-googles-03d-a-3d-engine-for-browser-in-javascript/feed/ 0 Finite State Machine Utility en Javascript para PureMVC. http://www.lemil.com.ar/blog/index.php/2009/10/finite-state-machine-utility-en-javascript-para-puremvc/ http://www.lemil.com.ar/blog/index.php/2009/10/finite-state-machine-utility-en-javascript-para-puremvc/#comments Thu, 08 Oct 2009 20:19:48 +0000 lemil http://www.lemil.com.ar/blog/index.php/2009/10/finite-state-machine-utility-en-javascript-para-puremvc/ 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!.

]]> http://www.lemil.com.ar/blog/index.php/2009/10/finite-state-machine-utility-en-javascript-para-puremvc/feed/ 0 State machines for ‘javascript’ http://www.lemil.com.ar/blog/index.php/2008/12/state-machines-for-javascript/ http://www.lemil.com.ar/blog/index.php/2008/12/state-machines-for-javascript/#comments Thu, 11 Dec 2008 18:48:59 +0000 lemil http://www.lemil.com.ar/blog/?p=23 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

 

]]> http://www.lemil.com.ar/blog/index.php/2008/12/state-machines-for-javascript/feed/ 0 A Widget Factory http://www.lemil.com.ar/blog/index.php/2008/12/a-widget-factory/ http://www.lemil.com.ar/blog/index.php/2008/12/a-widget-factory/#comments Fri, 05 Dec 2008 14:24:16 +0000 lemil http://lemil.com.ar/blog/?p=7 Que es un widget?: Es toda aquella mini applicación que vive dentro de una seccción, ( o simplemente  espacio rectangular) de una página web y que generalmente es provista y hosteada por otro site.

Que es un widget factory?: Desde hace un tiempo viene imponiendo el uso de ”widgets” dentro de páginas, portales y casi todas las redes sociales (si no sabes de que hablo googlea UWA, Yahoo widget, widget, etc), como una forma de proveer más servicios. Cabe destacar que uno de los principales usos de estas mini aplicaciones es publicidad. Dentro de la redes sociales los widgets se usan con aplicaciones (gifts, trivias y encuestas, etc).

 

Caso 1: Zembly 

zembly

El site provee un entorno de desarrollo, integrando varios parters (ver abajo), donde el usuario pueda compartir aplicaciones, widgets, y servicios entre sus amistades y comunidad. Sun Microsystems y Meebo son uno de los patrocinadores del site.

Tiene un buscador de componentes donde se puede encontrar ejemplos desarrollados por la comunidad. 

También trae snipplets con las API’s de javascript más populares ( amazon, delicious, flickr, facebook, etc.) aunque le faltan a mi gusto Ajax api’s ( prototype, jquery, etc).

Algunos puntos fuertes…

  • La IDE web (hecha en javascript) que trae el site, es bastante completa y trae un sabdbox para el debugging del widget.
  • Algo muy bueno, -nunca perdí una sola línea de código por más que nunca me presioné save.
  • Guarda todas las versiones de tu gadget con fecha y coments de la “release”.
  • Tiene un “runner” para casi todos los tipos de template que ofrece donde se puede ver al instante (2 segs) los cambios ingresados al editor.
  • En el perfil de usuario tiene un widget con un “timeline” con las versiones de cada componente y actividad de usuario.
  • Incluye “templates” para Facebook Apps, y Widget en general y Services.
  • Búsquedas de Gadgets y respectivo Clone de Gadgets. Muy buen para aprender de los ejemplos del otro.
  • Actividades de red social. ( what’s happenning, people, inbox). 
  • Usar, copiar y clonar apps y servicios que otros crean. 
  • Permite el “deployment” del gadget en mas de 15 tipos de redes sociales y otros containers (faceboo, igoogle, live, myyearbook, typepad, yahoo widgets y netvibes entre otros), email, wodpress, entre otros.
  • Las facebook apps son muy faciles de hacer y publicar. Trae un wizzard para la publicación de aplicaciones muy completo (copiado casi textual a lo que ofrece clearpsring).
  • La publicacion de widgets para Netvibes, IGoogle, Live, Blogger y otros con 1 o dos Clicks. 

Puntos a mejorar…

  • Solo funciona en firefox. ”…zembly is best experienced using Firefox 2, support for other browsers is a work in progress so you will be helping us test if you choose to continue.”
  • Algún que otro bug menor (recordemos que aún esta en beta).
  • No trae soporte para testing de la aplicaciones ni servicios.
  • La IDE, si bien está bastante bien lograda, no tiene las mismas prestaciones que una desk. 
  • Luego de haberla usado por varias horas seguidas se hace un poco mas lento, cosa que puede impacientar al usuario. 
  • A la fecha la documentacion no es muy extensa.
  • No se pueden usar libraries externas en la creacion de servicios. 
  • Cualquiera puede copiar el codigo de otro, sin restricciones.
  • Hoy no avisa cuando te suman amigos, ni cuando te visitan ni ven el codigo.

Algunas apps y widgets de ejemplo que cree son…

  • GoEar Box :      http://apps.facebook.com/goearbox
  • Globant Map:   http://www.clearspring.com/widgets/493697300b925e65?p=-&flv=%3Dnull

 

Caso 2: Clearspring

 

clearpsring

Clearpsring

 

 

Tiene una pagina que ofrece exactamente el mismo servicio que zembly. La mayor diferencia esta en que zembly propone generar el widget por codigo y clearpsring a traves de wizards (aunque tambien se puede editar el code).  El site esta orientado a la creación de widgets para publicidad y no tanto a la creación de aplicaciones dentro de widgets.

Puntos Fuertes… 

 

  • Es la plataforma donde que usan otros (zembly) para el deployment.
  • El deployement se puede hacer en todas las redes sociales.
  • Se pueden crear widget sin conocimeinto ni escribir una sola línea de código. 
  • No es una beta, funciona muy bien, y sin bugs.

Un ejemplo de lo que cree en este site ….

 

  • http://widgets.clearspring.com/o/493699398180d207/49393dd67b9ac4d3/493699398180d207/2bb6b08c

 

 

 

Final:

Esto es todo por el momento,  si les gusto por favor posteen sus comentarios ,

saludos…

por Leandro Milmanda Perez

]]> http://www.lemil.com.ar/blog/index.php/2008/12/a-widget-factory/feed/ 0