viernes, 16 de noviembre de 2012

Tutorial JqGrid + PHP + MYSQL

Siguiendo los cursos de JqGrid, ahora voy a mostrarles como hacer para montar el lado del servidor con PHP y MYSQL.

JqGrid es un sistema muy poderoso pero tiene la limitante que en modo data local máximo puede contener mil registros por las limitantes de Javascript, pero conectado directamente con un servidor que se encargue de todos los procesos, puede contener el numero de registros que necesitemos. Lo cual nos permite almacenar tranquilamente 20.000 filas de elementos sin ningún problema.

En este tutorial explicamos como conectar JqGrid con mysql, para cargar los datos JqGrid requiere para poder realizar la consulta ajax, que el archivo este en formato json o xml, en este tutorial vamos a explicar como se usa JqGrid en formato json, para cargar la data desde un servidor en php.



Formato de la solicitud AJAX
La solicitud ajax echa por JqGrid al servidor tiene estos parámetros:

  • nd: es simplemente la hora en la que se hizo la solicitud.
  • rows: el numero de lineas que se va a mostrar al usuario.
  • page: la pagina que se va a consultar en el momento.
  • sidx: el elemento por el cual se va a ordenar la consulta.
  • sord: el tipo de orden de la tabla asc o desc.
  • _search: esto es un bolleano que contiene false o true en el caso de que se se use la barra de filtros y se este buscando algo en especifico.
  • Listas de elementos: cada uno de los index de los elementos que usemos en la búsqueda van a salir de la filter toolbar también serán enviados como parámetros.


Formato del archivo JSON
El archivo json por el servidor debe contener los siguientes atributos:

  • page: La pagina actual que esta mostrando.
  • records: el numero de registros que hay en total en la tabla.
  • rows: las filas que vamos a devolver actualmente al sistema
  • total: el numero de paginas en total que hay en el sistema.
Conectando JqGrid con PHP y Mysql.
El proceso para hacer el puente de la información es:
  1. Primero hacemos lo normal y nos conectamos a la base de datos. 
  2. Después guardamos en un array todos los elementos de la solicitud que hace JqGrid.
  3. Construimos la consulta de filtrado para la barra de búsqueda. para construir la consulte lo dividi en dos partes el area de los like y el área de los equal, porque hay campos como los nombres que la búsqueda se puede parecer y hay campos como un total que tienen que ser exactos, pero ya cada uno podrá elegir como prefiera.
  4. Hacemos una consulta a la base de datos para saber el numero de filas que hay en total. 
  5. Calculamos el numero de paginas que hay, y averiguamos si la pagina es la correcta.
  6. Construimos la consulta añadiéndole los filter, los search y el orden.
  7. Hacemos la consulta para traernos los resultados que necesitamos en especifico.
  8. Por ultimo le devolvemos los datos al JqGrid.
Aquí esta el código explicado:
(isset($_REQUEST['rows']))?$_REQUEST['rows']:'',
  'page'=>(isset($_REQUEST['page']))?$_REQUEST['page']:'',
  'orderby'=>(isset($_REQUEST['sidx']))?$_REQUEST['sidx']:'',
  'orden'=>(isset($_REQUEST['sord']))?$_REQUEST['sord']:'',
  'search'=>(isset($_REQUEST['_search']))?$_REQUEST['_search']:'',
 );
 $se ="";
 //creamos la consulta de busqueda. 
 if($post['search'] == 'true'){
  $b = array();
  //Usamos la funci{on elements para crear un arreglo con los datos que van a ser para buscar por like
  $search['like']=elements(array('total','nota'),$_REQUEST);
  //haciendo un recorrido sobre ellos vamos creando al consulta.
  foreach($search['like'] as $key => $value){
   if($value != false) $b[]="$key like '%$value%'";
  }
  //Usamos la funci{on elements para crear un arreglo con los datos que van a ser para buscar por like
  $search['where']=elements(array('fecha','cantidad','taza','cliente'),$_REQUEST);
  //haciendo un recorrido sobre ellos vamos creando al consulta.
  foreach($search['where'] as $key => $value){
   if($value != false) $b[]="$key = '$value'";
  }
  //Creamos la consulta where
  $se=" where ".implode(' and ',$b );  
 }
 //Realizamos la consulta para saber el numero de filas que hay en la tabla con los filtros
 $query = mysql_query("select count(*) as t from inventario".$se);
 if(!$query)
  echo mysql_error();
 $count = mysql_result($query,0);

 if( $count > 0 && $post['limit'] > 0) {
  //Calculamos el numero de paginas que tiene el sistema
  $total_pages = ceil($count/$post['limit']);
  if ($post['page'] > $total_pages) $post['page']=$total_pages;
  //calculamos el offset para la consulta mysql.
  $post['offset']=$post['limit']*$post['page'] - $post['limit'];
 } else {
  $total_pages = 0;
  $post['page']=0;
  $post['offset']=0;
 }
 //Creamos la consulta que va a ser enviada de una ves con la parte de filtrado
 $sql = "select id, fecha, cliente, cantidad, taza, total, nota from inventario  ".$se;
 if( !empty($post['orden']) && !empty($post['orderby']))
  //Añadimos de una ves la parte de la consulta para ordenar el resultado
  $sql .= " ORDER BY $post[orderby] $post[orden] ";
 if($post['limit'] && $post['offset']) $sql.=" limit $post[offset], $post[limit]";
  //añadimos el limite para solamente sacar las filas de la apgina actual que el sistema esta consultando
  elseif($post['limit']) $sql .=" limit 0,$post[limit]";
 
  
 $query = mysql_query($sql);
 if(!$query)
  echo mysql_error();
 $result = array();
 $i = 0;
 while($row = mysql_fetch_object($query)){
   $result[$i]['id']=$row->id;
  $result[$i]['cell']=array($row->id,$row->fecha,$row->cliente,$row->cantidad,$row->taza,$row->total,$row->nota);
  $i++;
  
 }
 //Asignamos todo esto en variables de json, para enviarlo al navegador.
 
 $json = new stdClass();
 $json->rows=$result;
 $json->total=$total_pages;
 $json->page=$post['page'];

 $json->records=$count;
 echo json_encode($json);
 
 mysql_close($link);
 
 function elements($items, $array, $default = FALSE)
 {
  $return = array();
  if ( ! is_array($items)){
   $items = array($items);
  }
  foreach ($items as $item){
   if (isset($array[$item])){
    $return[$item] = $array[$item];
   }else{
    $return[$item] = $default;
   }
  }
  return $return;
 }
?>
Este es el resultado final: http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico4
Codigo Github: https://github.com/bomba1990/JqGrid-Ejemplos/blob/master/JqGrid-Basico-4-DB.html
https://github.com/bomba1990/JqGrid-Ejemplos/blob/master/ajax.php

Suerte y espero que les sea de utilidad a todos los que lo solicitaron.

jueves, 8 de noviembre de 2012

Sistema echo en Codeigniter + HMVC + Jquery UI + JqGrid

Sistema echo en Codeigniter + HMVC + Jquery UI + JqGrid

Este sistema es un sistema que desarrolle ya hace algún tiempo, donde hago uso de JqGrid, y últimamente me an solicitado que publique una entrada para conectar JqGrid con el servidor, como no e tenido tiempo no e podido sacar un tutorial dedicado a esto, ademas de que es un poco enredado, así que e decidió subir este código y ponerlo a la orden para que puedan ver como es.

Este no es un sistema para producción es solamente un sistema desarrollado para una tesis, espero que le sirva de utilidad a alguien más.

Este sistema cuenta con los siguientes Modulos:
  • Clientes
  • Productos
  • Pedido
  • Historial Medico, como para oftalmologo, pero es sumamente básico.
La parte de la consulta es enredada porque cuando lo desarrolle lo hice de una forma tal que pudiese funcionar con varias columnas sin necesidad de cambiarlo mucho. 

Instalación

Para instalar el sistema, se debe tener ya un servidor con Apache, Window y Linux.
Lo primero que se debe hacer es crear una base de datos para el sistema, importar el archivo eye2000.sql y luego configurar el archivo database.php.
Con eso es suficiente para que el sistema empiece a funcionar

Screenshots

URL EN GITHUB

domingo, 28 de octubre de 2012

CSS3 Transformando elementos.


Una de las nuevas funcionalidades de css3 es que podemos transformar elementos directamente desde el css, las transformaciones que podemos hacer son: escalar, rotar, mover y deformar.

  • rotate(grados): nos permite hacer rotar elementos, en grados.
  • translate(X,Y): nos permite mover un elemento a partir de su posición original, debemos especificar cuanto se debe mover en el eje de las x y en el eje de las y. 
  • scale(x,y): nos permite modificar el tamaño de un elemento, con los argumentos que le pasemos, multiplicara el numero por el tamaño original. 
  • skew(grados-x,grados-y): el elemento se gira en un angulo dado, en función a los parámetros dados.

Soporte en los Navegadores:
Esta característica es soportada por Chrome, firefox, ie 9+, opera, pero todos con sus respectivos prefijos.

Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/css3transform
GITHUB: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/css3/transform.html

martes, 23 de octubre de 2012

Formularios en HTML5

En HTML5 uno de los más grandes avances que se an incluido son las nuevas características de los formularios para hacerlos más potentes y útiles para nuestras aplicaciones.



Nuevos inputs de HTML5:

El estándar html4 solo contaba con inputs de tipo text, radio, checkbox, Password, submit, reset y button, aparte de textarea, select, que son también dos tipos de elemento de formulario.

Con la llegada de HTML5, hay soporte para todos los formularios de html4, y ahora tenemos a disposición estos otros formularios:
  • Color: el input de color es usado para campos que tienen un color, lo que hace es generar el numero hexadecimal de un color que le seleccionemos de la paleta de colores. 
  • Date: permite al usuario agregar una fecha. 
  • Datetime: permite al usuario agregar fecha y hora. 
  • Email: este tipo de campo almacena lo que sería una dirección de correo. 
  • Month: es para que el usuario pueda seleccionar mes y año. 
  • Number: con este input el usuario va a colocar números pueden ser enteros o decimales 
  • Range: este tipo de formulario muestra un pequeño campo donde el usuario selección un numero de un rango. 
  • Search: es para campos de búsqueda. 
  • Tel: es para colocar números de teléfonos 
  • Time: para colocar horas y minutos. 
  • url: Para colocar direcciones web. 
  • Week: Para seleccionar semanas del año.
  •  x-webkit-speech: que es un formulario para reconocimiento de vos que solo funciona con chrome.

Los nuevos formularios por supuesto no son soportado por todos los navegadores, solo lo más modernos navegadores empiezan a añadir soporte, aquí si cabe destacar que los navegadores de los teléfonos inteligentes, están sumamente avanzado en este sentido y soportan la mayoría de los campos, inclusive mejor que los navegadores de escritorio. Y muestran un teclado de acuerdo al tipo de input, por ejemplo en tel muestra puros números.

Para los navegadores que no soportan alguno de los formularios no hay problema porque se mostraran simplemente como un tipo text, y después con librerías javascript podemos hacer que funcionen en esos navegadores donde no hay soporte nativo.

Ejemplo de todos los formularios Formularios HTML5
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/form.html

lunes, 22 de octubre de 2012

DATALIST: HTML5 Autocomplete.


En HTML5 hay nuevas etiquetas que se an añadido para trabajar con formularios la etiqueta datalist, es una lista predefinida de opciones para un input, este elemento es usado para proveer una función de auto completado nativa para elementos de tipo input. 

<input list="navegadores">

<datalist id="navegadores ">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>


Este elemento solo funciona en chrome, firefox y opera, para una lista detallada:  http://caniuse.com/datalist


OJO: esto no es como e leído en algunos libros o artículos que es para reemplazar el tipo de campo select, esto es solamente para ofrecer un autocomplete
Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/datalist
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/DATALIST.html

lunes, 15 de octubre de 2012

Joomla 3.0 Responsive Web Design

A salido la nueva versión de Joomla, la cual trae consigo muchos cambios mas que todo en el diseño. Ahora Joomla por completo a pasado a tener diseño web responsable, en este nuevo formato de Joomla ademas de tratar de ser mas amigable para el usuario también Joomla va a poder ser visualizado efectivamente desde cualquier tipo de teléfono celular inteligente o Tablet.

Entre los cambios que le hicieron están los siguientes:

  • La incorporación de Twitter Bootstrap en un paquete jui para multimedia. 
  • Una nueva plantilla para dispositivos móviles para la administración (backend) - Isis - y su interfaz. 
  • Una nueva plantilla para el sitio (frontend) - Protostar - construida usando Bootstrap de Twitter. 
  • Plantilla actualizada accesible llamada Beez3. 
  • Simplificación en 3 pasos de la instalación. 
  • Controlador PostgreSQL que permitirá ejecutar Joomla 3.0 utilizando la base de datos PostgreSQL. 
  • Controlador PHP Memcached. 
  • Uso de JFeed para la gestión de Feeds en lugar de SimplePie. 
  • La instalación de paquetes de idiomas directamente desde el gestor de extensiones. 
  • Grupo de usuarios "Invitados" está presente por defecto. 
  • Almacenamiento de artículos en blanco permitido. 
  • Nuevo módulo de estadísticas en el backend. 
  • Actualización de TinyMCE a la versión 3.5.6. 
  • Continúa la limpieza de código antiguo no utilizado, archivos y campos de la base de datos y tablas y la estandarización de tablas. 
  • Mejoras en las Búsquedas Inteligentes. 
  • Un amplio trabajo sobre la normalización de código de estilo y coherencia de este. 
  • Unidad de Pruebas en el CMS. 
  • Actualización del sistema de pruebas en el CMS. 
  • Elemento del menú activo personalizable para el módulo de menús. 
  • Permitir que el plugin SEF añada la url canónica en el encabezado. 
  • Versión 12.2 de Joomla! Platform. 
En teoría no hay ningún cambio a profundidad en el sistema como tal por lo cual deberían funcionar todos los componentes y extensiones que tuviésemos antes, pero como siempre es recomendable probar en una versión local para después subir a un servidor.

Cambios buenos para los Desarrolladores (desde mi punto de vista):

Uno de las cuestiones mas importantes para cualquier dessarrollador que trabaje con joomla, es que en esta nueva versión se incluyen los siguientes frameworks: Bootstrap y Jquery.

A Jquery no le hace falta presentación, pero Bootstrap es un framework css/javascript para el diseño o desarrollo de paginas Web responsables, lo cual quiere decir que se vean correctamente en cualquier tipo de dispositivo sin mayores cambios ni necesidad de crear una aplicación aparte.

Bootstrap framework aporta a Joomla la ventaja de tener ya una cantidad de herrameintas pre echas a nuestra mano, como css y javascripts para menus, carrusel de fotosthumbnail, etc...  sin necesidad de incluir nada externo. por ejemplo los botones e inputs ya tienen el estilo que trae bootstrap asi que ya no es necesario crear un css para el estilo de los formularios sino que el framework se encarga de ello. Esto nos puede ahorrar muchas lineas de código y ademas si seguimos los lineamientos del framework nuestro plugin, extensión o template se va a ver como es debido en cualquier tipo de dispositivo.

Ahora para incluir el framework de Bootstrap y jquery dentro de nuestro codigo debemos usar:


JHtml::_('bootstrap.framework');


Pantallas del Proceso de Instalación, en tres pasos:









Pantallas Del Front End, Movil 




 Pantallas del Backend, Login y panel de control, móvil también








jueves, 20 de septiembre de 2012

HTML5 Fullscreen (Pantalla Completa)

La nueva API de HTML5 es toda una novedad y de gran ayuda para todos aquellos que creamos aplicaciones para la web.

En este post les voy a hablar de la api HTML5 fullscreen. durante años solamente las aplicaciones creadas en flash o en java eran las únicas que tenían el poder de poder entrar en modo pantalla completa. A partir de ahora nuestras aplicaciones echas en HTML5  y javascript podrán tener esta habilidad también.

Métodos de HTML5 Fullscreen 


element.requestFullScreen: Con este método se hace que un elemento independiente entre en modo pantalla completa.
document.cancelFullScreen(): Cancela cualquier elemento que se encuentre en pantalla completa.
document.fullScreen: Retorna verdadero si hay algun elemento en pantalla completa.
:full-screen: Le da un estilo al elemento cuando esta en modo de pantalla completa.


Soporte de HTML5 Fullscreen


Actualmente hay ciertas resistencias de los creadores de los navegadores en darle completo soporte a esta api, por una cuestión de seguridad, ya que como la aplicación va a tener la posibilidad de usar la pantalla completa, se podría emular completamente el sistema operativo y de esta manera sacarle la contraseña a la persona o algo por el estilo. Hasta ahora los navegadores que soportan esta api son: Chrome 16+, Firefox 10+ y Safari.

Para poder usarlo en los diferentes navegadores hay que ponerle el prefijo de cada navegador.

Poniendo en practica el modo pantalla completa.

Para usar o activar el modo de pantalla completa les dejo aquí una función muy útil que trabaja con todos los  tipos de prefijos, no fue creada por mi sino por el autor de este articulo: html5 full screen. Pero de todas maneras aquí les dejo un ejemplo HTML5 fullscreen.
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/fullscreen/fullscreen.html



domingo, 19 de agosto de 2012

SockJS Websockets HTML5

Los WebSocket es una tecnología nueva que a salido con el estándar html5, pero todavía va a faltar un poco de tiempo para que todos los navegadores la soporten.

Mientras tanto existen una buena cantidad de proyectos(socket.io, node.js, etc) que permiten trabajar con websockets tanto en navegadores nuevos, como en los antiguos sustituyéndolo por otra tecnología en estos navegadores. Pero todos las librerías por lo general hacen algún truco para poder hacerlo funcionar en navegadores antiguos.


Es por eso que nació un nuevo proyecto: SockJS - otra biblioteca de emulación WebSocket, pero esta vez se hace bien.

Filosofía de SockJS

  • La Api debe seguir los lineamientos de la API de HTML5 Websockets lo más fielmente posible
  • No Flash del lado del cliente solamente javascript.
  • Bien Documentado y con balanceo de cargas.
  • El transporte debe soportar la comunicación a través de dominios.
  • La conexión debe ser rápida y ligera.
  • Además, el código del lado del servidor debe ser simple, con el fin de reducir el costo de escribir servidores para diferentes idiomas.
  • Debe soportar al menos un protocolo de Streaming por cada navegador grande.

Lo Bueno

Lo Bueno de esta librería es que es ligera, fácil de entender y trabajar, se adapta a los estándares, trabaja con balanceo de cargas y además no usa Flash ni nada por el estilo. Además ya cuenta con las librerías para montar los servidores en python, nodejs y java, próximamente en otros lenguajes.

Lo Malo.

No posee soporte para navegadores antiguos, que otros proyectos si lo hacen. por ejemplo Socket.IO soporta Internet Explorer 5.5+, Safari 3+, Google Chrome 4+, Firefox 3+, Opera 10.61+. SockJS soporta aquí ven la descripción detallada.

Conclusión.

SockJS es una librería bastante nueva  y todavía le queda mucho por hacer, pero que tiene una buena forma de trabajar, y unos excelentes tiempos de ejecución. Aquí hay un análisis de rendimiento donde se compara Socket.IO vs SockJS de pythonanywhere. Es una librería útil en el caso de que queramos desarrollar una aplicación donde el rango de navegadores es limitado, por ejemplo una intranet para una empresa, o una pagina para un grupo muy especifico.

Twitter de SockJS

Si necesitas la asesoria de una empresa para el desarrollo de aplicaciones con este tipo de tecnologia.

viernes, 17 de agosto de 2012

Twitter autorizar aplicación Tweepy

Para autorizar una cuenta a trabajar con tu aplicación twitter que ya hallas registrado y la cuenta no es la dueña de la aplicación, la manera de hacerlo mediante código es la siguiente:

Primero creamos el código siguiente y lo ejecutamos:

#!/usr/bin/env python

import tweepy
# definimos las claves de la aplicacion
consumer_key="Y94tUbG4vv1IcZhJHKLdQw"
consumer_secret="K2iG4ZOdIPIBpuagmvh9eB8MhuWpgv9QXx0AW2boo"
# nos conectamos a twitter.
auth = tweepy.OAuthHandler(consumer_key, consumer_secret)

# solicitamos la url de autorización y la mostramos por pantalla
auth_url = auth.get_authorization_url()
print 'Please authorize: ' + auth_url

# esperamos al pin que debe introducir la persona
verifier = raw_input('PIN: ').strip()
auth.get_access_token(verifier)

#mostramos los tokens de acceso
print "ACCESS_KEY = '%s'" % auth.access_token.key
print "ACCESS_SECRET = '%s'" % auth.access_token.secret

Después entramos en la url que nos arroja:

Le concedemos permiso, y nos devolverá el pin que deberemos introducir en la aplicación para concederle el acceso:

 
Después el script lo verifica y muestra el acces token y el acces token secret, por pantalla y listo ya podemos empezar a usar esta cuenta para publicar información, llevar estadísticas etc...

Errores de tiempo en tweepy.

Cuando use por primera ves tweepy, para publicar o conectarme a twitter conseguí los siguientes errores: 401:Unauthorized Error Unable to get username, invalid oauth token! timestamp out of bounds Una de las razones a las que se puede deber es que la hora esta mala o fuera de orden, si estas en Windows ya sabes como acomodarla si estas en linux tienes que hacer lo siguiente.

Establecer la zonahoraria en Linux

Para establecer la zona horaria en linux en el sistema tenemos que crear un enlace simbólico de /etc/localtime al archivo /usr/share/zoneinfo/America/Caracas, en ves de América y Caracas, seria tu correspondiente ciudad y continente. El comando que tendríamos que ejecutar como root, para establecer la hora seria el siguiente: ln -sf /usr/share/zoneinfo/America/Caracas /etc/localtime Hay que hacerlo de esta manera porque si hacemos el cambio a través de Gnome, en el área de la hora Local, no va a cambiar la hora del sistema como tal y nos va a pasar como me pasaba a mi que GMAIL tenia horas mala de cuando la gente te manda mensajes, etc. Espero que esto les sirva. Saludos

Python auto seguir cuentas twitter

Desde hace un tiempo acá e empezado a probar con el lenguaje python y tweepy. Una de las cuestiones cheveres que e probado últimamente es auto seguir automáticamente cuentas en twitter con Oauth. Por supuesto esto también se puede hacer con php o cualquier otro lenguaje, pero e querido probar con python por las facilidades que tiene, y porque por lo general las librerías están un poco mas logradas que cualquier librería en php.Además se puede crear un programa fácilmente.

Este Script es sumamente útil, para hacer crecer o darle publicidad a tu cuenta twitter, de manera fácil y rápida. Esto es hacer un poco de Spam, pero es una buena prueba que se puede hacer.

 Aquí va el código:
# -*- coding: utf-8 -*-
import tweepy

# == OAuth Authentication ==

# Primero leemos los ultimos tweets, de 100 tweet por pagina, y uso el Cursor
# que viene con la libreria, y permite ir sacando más de una pagina.

t=[]
for page in tweepy.Cursor(tweepy.api.search,q="desarrollo web",locale="es",rpp=100).pages(3):
 for i in page:
  t.append(i.from_user)
# la lista la ponemos en un set, para eliminar los duplicados
t = set(t)
# esta es la contraseña oauth de la aplicación, para poder conectarse al Api de Twitter
consumer_key="Y94tUbG4vv1IcZhJHKLdQw"
consumer_secret="K2iG4ZOdIPIBpuagmvh9eB8MhuWpgv9QXx0AW2boo"

# este el token de acceso para poder acceder a la cuenta del usuario. 
# que tuvo que haber dado permiso anteriormente a la aplicación
access_token="289124803-LMV6iY09cLgPRiEuIqFKaqbCswuIKW01Kc9DnVCs"
access_token_secret="Ri6SkwgbRNmP6rGduihyzv8ETk1aTOkqnxnQX9gB8"

# Definimos para conectarnos con la aplicación
auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
# Definimos para conectarnos con el usuario
auth.set_access_token(access_token, access_token_secret)
# hacemos la conexion
api = tweepy.API(auth)
# Verificamos las credenciales, y mostramos el nombre del usuario conectado.
print(api.verify_credentials()).name
# recorremos el set completo 
for u in t:
 #creando la conexión con cada uno de los usarios que conseguimos
 api.create_friendship(u)
 print u
El código esta explicado por si mismo, por supuesto antes de usarlo tendrían que primero instalar la librería tweepy. Espero que les sea de utilidad, pronto publico el unfollow.

Si necesitas de una empresa que te ayude a llevar inteligentemente tus redes sociales

miércoles, 20 de junio de 2012

Ya abrio sus puertas Non Vulgi la Agencia Digital Creativa



Hoy inicio sus actividades oficialmente la agencia Digital Non Vulgi, la cual dará mucho de que hablar porque es una agencia enfocada altamente en crear contenido y experiencias de alta calidad, aprovechándose de las ultimas tecnologías que hay en la actualidad, con lo cual pretende impulsar las empresas del mercado Venezolano y Mundial de una manera vertiginosa. Sus fundadores Luis Eduardo González y Ricardo Cárdenas Z dos profesionales con larga experiencia en tecnologías web, redes sociales y diseño 2.0, mas todo el equipo profesional que respalda a la empresa y garantizan un trabajo de calidad y unos excelentes resultados a sus clientes.







Esta agencia con tan solo unas horas de nacida, ya cuenta con su pagina en:

Entre los servicios que ofrece la empresa están:



lunes, 16 de abril de 2012

Crear sprites Facilmente, optimizar Pagina Web

A la hora de optimizar una pagina web, una de las cuestiones que mas pesa y requiere mayor optimización son las imágenes. Uno de los mejores métodos es crear sprites, los sprites son una imagen que agrupa muchas pequeñas imágenes que usamos a lo largo de toda nuestra web, y pues reducen el numero de peticiones a la pagina web ya que están todas las imágenes en un solo archivo, esta imagen por supuesto esta optimizada, algunas veces esta en formato png otras veces en jpg, dependiendo si requieren transparencias o no. UN ejemplo de esto es este sprite usado por Google:



Una excelente herramienta que conseguí en estos días para realizar esta acción es Sprite Pad, esta herramienta  te ayuda a crear sprites en pocos segundos y también te genera el código css necesario de una ves. Y ademas esta muy moderna trabaja en html5, y tiene una interfaz intuitiva, prueben la.

martes, 27 de marzo de 2012

jqGrid Búsqueda y Barra de Filtro (FilterToolbar)

Siguiendo en el tema de jqGrid, ahora vamos a hablar de los filtros y la búsqueda. Cuando estamos haciendo una tabla de datos, una de las parte más fastidiosa es programar la parte de los filtros y la búsqueda, porque si el cliente lo quiere por cédula, e que la diseño la hizo por nombre, y así cada quien dio su opinión y esto nos puedo consumir mucho tiempo. Pero este plugin de jqGrid, nos trae dos soluciones fáciles y sencillas con las cuales podamos agregar esto al grid fácilmente. Lo chevere de esto es que a la hora de programarlo también va a ser sencillo agregar nuevos campos y crear filtros de forma fácil y sencilla.

Barra de navegación(Búsqueda)

La barra de navegación es fácil de agregar, y tiene muchas opciones, por ahora solo vamos a usar la opción de búsqueda. Esta opción lo que hace es agregar un icono de lupa en la barra de abajo y al hacer clic, podemos agregar reglas para filtrar la información, no es muy compleja, y es sencilla de agregar, solo tenemos que agregar el código siguiente después del constructor de jqGrid. ".navGrid('#pager', { view: false, del: false, add: false, edit: false });"

Con esto vamos a agregar dos botones, el de buscar y el de recargar grid. el de recargar solamente reinicia el grid a su estado original, en el caso de que hayamos agregado un filtro. Con esto el grid se vería asi.

De las opciones destacables que le podemos agregar a la configuración de la opción search están:
  • multipleSearch: Que permite agregar varias reglas de búsqueda, al mismo tiempo.
  • closeOnEscape: que determina si el dialogbox, se va a cerrar presionando la tecla escape
  • closeAfterSearch: esta opción habilita que se va a cerrar el cuadro de dialogo después de darle a la opción buscar.

Esta es la wiki dedicada al navgrid: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator, si desean leer más del tema, como la configuración y esas cosas.

A la final con todas las opciones anteriores el codigo quedaría así:

$(document).ready(function(){ $("#list").jqGrid({ datatype: "local", data: mydata, height: "auto", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, search:false}, {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", //viewrecords: true, altRows: true, pager:'#pager', rowNum: 10, rowList:[10,15,20] }).navGrid('#pager', { view: false, del: false, add: false, edit: false }, {},//opciones edit {}, //opciones add {}, //opciones del {multipleSearch:true,closeAfterSearch: true, closeOnEscape: true}//opciones search ).jqGrid("filterToolbar"); for(var i=0;i<=mydata.length;i++) jQuery("#list").jqGrid('addRowData',i+1,mydata[i]); jQuery("#list").trigger("reloadGrid") });

Barra de Filtro(Filter Toolbar)

Aparte tambien podemos agregar una barra de filtro, esta es una barra en la parte superior de la tabla, que nos permite agregar filtros específicos para cada una de las columnas. Un poco parecidos a los grids de Joomla, donde en la parte superior hay filtros, como filtros por estado, por autor, etc. Para activarla solo debemos agregar esto ".jqGrid("filterToolbar")" a el objeto donde instanciamos el grid, para que empiece a funcionar. Con esto nos debe salir una barra parecida a esta:


Configurando Las opciones de Búsqueda

Ahora viene la parte más importante y es la de configurar cada una de las columnas con sus diferentes opciones de búsqueda. jqGrid nos permite personalizar las opciones que le vamos a ofrecer a los usuarios para realizar las búsquedas.Dentro del colModel se configuran como van a ser las opciones de búsqueda para cada una de las columnas, las opciones que tienen que ver con configuración son las siguientes:
  • search: Especifica si este campo va a aceptar búsqueda o no. Default: true
  • stype: Determina el tipo de campo de búsqueda, los únicos dos permitidos son text y select. Default: text
  • searchoptions: es un objeto que contiene toda las opciones y configuraciones para las búsquedas.
  • searchrules: es otro objeto que identifica las reglas de búsqueda que le va a aplicar al input del usuario.
Opciones de Búsqueda(searchOptions)

  • dataUrl: especifica una url, para en el caso de que el tipo sea un select, cargue las opciones por via ajax de esa url. El resultado de el ajax puede ser un select html, con las opciones.
  • buildSelect: si usamos la opción anterior, con esta podemos asignar una función que se encargue de crear el select con el resultado de la función ajax.
  • dataInit: con esta especificamos la función que se va a disparar cuando se cree el objeto.
  • dataEvents: Un array con una lista de eventos para añadir al input.
  • searchhidden: por defecto los elementos ocultos no se pueden buscar, pero con esta opción podemos activar que se vean los elementos ocultos.
  • sopt: especifica las opciones que pueden ser usadas solamente en la busqueda avanzada del navgrid.
  • defaultValue: establece un valor por defecto para el filtro.
  • value: esta opción solo se usa si usamos el tipo select. Aquí especificamos los valores que puede contener el select, puede ser o una cadena de texto o un objeto javascript con valores y claves. si es un string debe ser en formato csv, donde las filas esten separadas con ; y la clave del value separado con :.
Opciones Estras

Aparte de las opciones antes descritas, en este ejemplo también agregue estas dos opciones:
  • autowidth: Con esta opción en true, nuestro sistema automáticamente agarrara el ancho máximo disponible, y tratara de que las filas todas mantengas la misma proporción.
  • viewrecords: Muestra en la barra de navegación, el numero de filas que hay y el rango que esta mostrando.

Aparte de estas opciones también estan las opciones de reglas de búsqueda, si quieres revisarlas se encuentran aquí: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config. Cabe destacar que estas reglas solo se usan en el cuadro de dialogo y tampoco son muy efectivas.

Para terminar les dejo un ejemplo aquí de lo que se puede hacer, con el ejemplo que venimos haciendo desde el principio. Saludos...

http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico3

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


martes, 20 de marzo de 2012

Agregando Paginación jQuery Grid.

Como lo prometido es deuda, tarde pero hay voy, llevo tiempo sin tiempo para escribir pero voy a tratar en estos días de publicar los artículos referentes al uso de jQuery Grid. En este manual les voy a mostrar como agregar paginación al Grid que ya habíamos creado en el tutorial anterior.

Agregar la paginación es sumamente sencillo, y no nos va a tomar mucho tiempo. Lo único que necesitamos es el proyecto anterior en nuestra computadora.

Empezamos, lo primero que debemos hacer es agregar un elemento div después de el elemento table con el id=pager.

Después tenemos que agregar al constructor de jqGrid estos dos elementos: pager, rowNum estos dos elementos son lo básico para que jqGrid empiece a paginar las tablas.
  • pager: es la opción de jqGrid, donde especificamos el id del div, que jqGrid va a usar como barra de navegación. Debemos colocar es un selector como el que colocamos entre paréntesis.
  • rowNum: con este parámetro le decimos al plugin cuantas filas va a mostrar por pagina. Ya solamente con especificar esto, el jqGrid pagina nuestro resultado de 10 en 10.

A la final quedaria de esta manera el código de javascript:


$("#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,
 pager:'#pager',
 rowNum: 10

});
 for(var i=0;i<=mydata.length;i++)
  jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
 jQuery("#list").trigger("reloadGrid")
});

Al final del javascript después de cargar las filas debemos agregar un desencadenador del evento "reloadgrid", para que jqGrid re ordene y acomode las filas con la paginación que le agregamos.

Parámetros extras para la paginación.

Aparte hay otros parámetros que podemos configurar que tienen que ver con la paginacion:


  • rowList: con este parámetro le especificamos al jqGrid, que de la opción de poder cambiar el numero de filas que va a mostrar, es decir que la persona pueda establecer el numero de filas que va a mostrar por en el grid.
  • height: con el parámetro height especificamos la altura del grid, pero si lo ponemos en "auto", el grid va a tener automáticamente la altura que tengan las filas que están internas del grid, y si las cambiamso automáticamente cambia la altura del grid.
Repositorio GitHub: https://github.com/bomba1990/JqGrid-Ejemplos

Con esto terminamos por hoy como siempre los enlaces para descargarlo y para verlo en acción:
Descarga
jqGrid Basico2


lunes, 19 de marzo de 2012

Usar jquery, en conjunto con otras librerias

Cuando trabajamos con paginas web muchas veces tenemos el desagrado de trabajar en proyectos donde ya hay alguna librería javascript siendo usada, y tenemos que hacer algo rápido (nunca los jefes o los que te contratan pueden esperar) o es muy grande el proyecto y cambiarlo todo seria una locura, o simplemente no conoces ni pió de la otra librería y que ademas tenga las tres b(bueno, bonito y barato), y nos toca trabajar con  jquery, junto a otra librería más que casualmente también usa el símbolo de $ para programar, y que si pones la librería de jquery, pues te van a dar rollos y o deja de funcionar algo, o no puedes hacer lo que quieres.

Como muchos de ustedes sabrán que al programar con jQuery se puede usar el símbolo de dolar o la palabra "jQuery", entonces para resolver el problema de dos librerías diferentes, lo que hacemos es usar la función .noConflict() de jquery que "deshabilita" el símbolo de $ para jQuery y nos deja solamente "jQuery", para poder programar. un ejemplo de esto seria asi:

<script type="text/javascript" src="xxx.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$.noConflict(); 
jQuery(document).ready(function($) { 
    // Código que usa jQuery dolar puedes usarlo aqui
}); 
// Código que usa dolar de otra librería puedes usarlo aqui.. 
</script>

Por lo general lo que yo hago es que de una ves cuando incluyo el archivo de jquery le coloco el $.noConflict y así el ya queda configurado para todo el sistema. y uso el jQuery normal en el resto de código.

Espero que esto les sirva de ayuda en sus proyectos. Como me a sido de ayuda a mi. Por supuesto esta practica no la recomiendo, es preferible que si un proyecto se va a hacer con una librería, se termine de hacer con esa librería. El uso de librerías diferentes aumenta el peso de nuestra pagina y por ende influye en el rendimiento de la misma. Ademas de que nos ocupa ancho de banda y todo lo demás.

SVN Sistema de subversiones


Subversión es un sistema de control de versiones que permite manejar proyectos de programación con varios programadores de una manera fácil y sencilla, permitiendo que cada uno trabaje al mismo tiempo en un código, pero que no se pisen los talones, sino que todos pueden trabajar armónicamente en un mismo proyecto. Muy útil cuando hay varios programadores que no están cerca, sino que se encuentran alejados geográficamente.

Lo que hace este sistema es indexar todos los archivos de un proyecto y ponerle una versión. Cuando cualquiera haga cambios, y haga un commit (suba los cambios al servidor), el sistema agregara una nueva versión al sistema, le colocara ese numero de versión al archivo y guardara un mensaje de modificación al svn. Después de esto los cambios echos en el archivo estarán disponibles para todo el mundo.

Si nosotros estamos trabajando con un versión local de un archivo y otra persona sube cambios en ese mismo archivo, a la hora de hacer un commit nosotros nos dará error, porque nos va a decir que nuestra version y la que estan en el servidor son diferentes, para acomodarlo tenemos que resolver los conflictos existentes para poder subir nuestro archivo, con lo cual es sistema se asegura que en ningun momento se vayan a eliminar los cambios echos por la otra persona.

Clientes SVN:

Hay muchos clientes svn, pero estos son lo que yo uso, dependiendo si estoy en linux o windows:

  • Windows http://tortoisesvn.net/ 
  • En linux, en la consola de comandos hay un comando llamado svn, que nos permite manejar todo pero desde consola.


Comandos básicos del SVN

SVN:checkout

Este comando obtiene los archivos que están en el servidor y crea una copia local. Listo para empezar a usarlo. 

SVN:update

Este comando actualiza una copia local a la ultima que este en el servidor. Y nos avisa cuando hay diferencias entre nuestra copia local y la versión del servidor.

SVN:add  

Con este comando, agregamos un archivo o una carpeta al sistema de versiones, este no se enviara hasta que hagamos commit.

SVN:delete 

Elimina un archivo del sistema de versiones, hasta que no se haga commit los cambios no afectaran el servidor.


SVN:commit

Este comando sube las modificaciones que hayamos echo en los archivos locales, al servidor. Cuando usemos este comando, nos va a permitir dejar un mensaje de información de que cambios hemos echo en esta version que estamos subiendo.


SVN:log

Con este comando obtenemos un log de los mensajes dejados en cada una de las modificaciones de las versiones. y si especificamos un archivo nos dará los log de los cambios de ese archivo en especifico. Muy útil para tener una idea de que se va haciendo.


Aparte hay muchos otros comando mas como reverse, merge o diff, pero la idea de este articulo es simplemente dar una pequeña introducción, si desean leer un poco màs sobre el tema pueden consultar aquí, que hay una guía completa de como se usa el svn, muy util en español: http://svnbook.spears.at/nightly/es/

Si ustedes quieren empezar a usar esto, por probar y de manera gratuita, pues les recomiendo esta pagina: http://xp-dev.com/, es un servidor de svn, que tiene un aparte gratuita, yo lo uso bastante.