martes, 20 de diciembre de 2011

Ver paginas 3D con Web 3d tilt



Ahora les presento un Plugin para firefox, muy útil que nos permite ver paginas 3D, así como lo leen, su pagina se vera 3D, el plugin lo que hace es rende rizar su pagina con Webgl, y mostrar las partes de la pagina detallada con diferentes colores para identificar los elementos que la componen. Es muy util para diseñadores o desarrolladores web.

Para ver una pagina web en 3D no tenemos más que descargar el complemento https://addons.mozilla.org/es-es/firefox/addon/tilt/ (previamente tenemos que tener instalado los drivers de la tarjeta gráfica) y después de reiniciar en cualquier pagina solo tenemos que marcar Ctrl + Mayus + M, y sharan se hace la magia.

Una caracteriztica importante, es que permite exportar la imagen en 3d, para despues ser usado en programas como blender.



Otra pafina donde hablan sobre el tema: http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/

jueves, 1 de diciembre de 2011

JqGrid Un Grid para Jquery


Hoy les presento un plugin para jQuery muy útil, el cual te permite crear Grid muy completos con algunas  pequeñas lineas de código.

Esta herramienta es muy poderoso y permite hasta cierto punto crear un grid completo con filtros, búsqueda, organización ascendente y descendente, paginación, etc casi sin necesidad que del lado del servidor halla código.  También se puede crear un Crud completo y bastante avanzado, con multigrid, grid dentro de grids, etc, con un poco más de interacción con un lenguaje del lado del servidor.

Otra Característica destacable de este plugin es que se ajusta a el jQuery UI, lo cual permite que se integre con  el diseño de nuestra interfaz con mucha facilidad. y modificarlo como queramos.



En este tutorial vamos a crear un Grid muy básico sin nada de interacción con el servidor, solo usando un array javascript con los datos, para ir viendo las funcionalidades de este poderoso plugin.  Por ahora solo vamos a trabajar con lo básico para que nos podamos ir sintiendo a gusto con este plugin.

Lo primero es descargar los archivos necesarios, de la pagina de jqgrid nos descargamos la ultima actualización del plugin y de la pagina de jquery UI nos descargamos el tema de nuestra preferencia.

Y ahora configuramos el area de trabajo de esta manera:

./css/ui.jqgrid.css
./css/images //adentro van las imagenes del tema.
./css/jquery-ui-1.8.16.custom.css
./js/jquery-1.5.2.min.js
./js/grid.locale-es.js
./js/jquery.jqGrid.min.js
./jqgrid.html

El archivo jqgrid.html sera donde crearemos el grid, lo primero es poner la estructura básica html, cuando pongamos los enlaces de jqgrid, debemos colocar primero el de idioma y después el de jqgrid porque sino nos dara error. Después agregamos una tabla dentro del body y le colocamos el id igual a list. Ya con esto podemos empezar a examinar este plugin.

Este plugin se manejo como todos los plugins de Jquery, primero $ + un selector + la función jqGrid + objeto con las opciones, en este tutorial voy a hacer un listado de las opciones básicas (el listado completo esta aqui!), para hacer el ejemplo básico:

Variables indispensables

  • datatype: especifica el tipo de dato que va a esperar jqgrid para hacer la representación de datos. los valores posibles son: xml, json, jsonp, local, xmlstring, jsonstring, javascript.
  • colNames: aquí se especifica el array javascript con los nombres de las columnas que se verán en el Grid.
  • colModel: esta es la más importante de todas, y debe estar en el mismo orden que colNames, desde aquí se especifican nombres, ancho, opciones de busqueda, filtros, ordenación, etc. es como la columna vertebral del jqGrid.
Variables opcionales basicas para este ejemplo:

  • caption: Especifica un nombre a la tabla.
  • data: especifica cual es el source cuando la variable es local. EL array debe seguir el patrón de colModel.
  • height: especifica la altura de el grid.
  • altRows: le pone la alternancia de colores a la tabla.

Especificaciones del colModel

El colModel como dije antes es la columna vertebral de este plugin y es donde se especifica cual va a ser la estructura y el comportamiento de cada una de las columnas, tenemos que tener claro que deben ser especificados en el mismo orden que especificamos los nombres de cada columna. Cada columna tiene las siguientes opciones básicas:


  • name: esta variable especifica el nombre unico de esa columna, no puede haber otra columna con el mismo nombre ni en subgrids.
  • align (opcional): esta variable especifica como se va a alinear el texto en la celda: left, center, right.
  • width (opcional): define el ancho de la columna, por defecto es 150px.
  • sortable (opcional): especifica si la columna puede ser ordenable
Ejemplo de Grid básico


Ahora si, aquí vamos con el ejemplo sencillo, la información es aleatoria, pero las claves deben ser las mismas el atributo name del colModel, voy a agregar la información a el Grid de dos maneras, una con el atributo data y otra con el metodo addRowData para agregar la fila al Grid, en la pagina recomiendan que para objetos grandes se haga con el atributo, pero es bueno conocer los dos métodos.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>prueba</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css" /> 
  <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
     <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
     <script src="js/grid.locale-es.js" type="text/javascript"></script> 
     <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
  var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; 
  $(document).ready(function(){
  $("#list").jqGrid({ 
   datatype: "local", 
   data: mydata,
   height: 250, 
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
   colModel:[ 
    {name:'id',index:'id', width:60}, 
    {name:'invdate',index:'invdate', width:90}, 
    {name:'name',index:'name', width:100},
    {name:'amount',index:'amount', width:80, align:"right"}, 
    {name:'tax',index:'tax', width:80, align:"right"}, 
    {name:'total',index:'total', width:80,align:"right"}, 
    {name:'note',index:'note', width:150, sortable:false}
    ], 
   caption: "http://sosinformatico.blogspot.com",
   altRows: true
  });
  
   for(var i=0;i<=mydata.length;i++) 
    jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
  });
  </script>
    </head> 
    <body> 
     <table id='list'></table>
 </body>
</html>

A la final se debería ver así:


Repositorio GitHub: https://github.com/bomba1990/JqGrid-Ejemplos

Pueden Descargar el ejemplo desde:

http://www.box.com/s/oadoy8jey3idonmx381e

Pueden ver el ejemplo funcionando desde. http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico

Despues pienso sacar 3 tutoriales más un con un grid más avanzado, y dos integrandolo con Codeigniter y Python. Estos ultimos quiero hacerlos como screencast por eso me voy a tardar un poquito más.