El SOS Informatico. Desarrollo y programacion web.

Ver paginas 3D con Web 3d tilt

2011-12-20T01:05:00.000-04:30

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/

JqGrid Un Grid para Jquery

2011-12-01T21:54:00.001-04:30

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í:

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.

Consulta Mysql para agrupar por fechas y funciones de fecha.

2011-11-28T21:45:00.001-04:30

Llevo tiempo sin escribir en el blog, por el trabajo. Pero voy a aprovechar estos dias para escribir un poco sobre algunas cosas que e aprendido trabajando, que me han sido de utilidad y por lo general en Internet no hay documentación en español.

Este primer post voy a hablar de como se hace en mysql para agrupar fechas por días, mes, año, minuto hora, etc. Además de algunas funciones útiles de mysql:

Cuando hacemos un GROUP BY de un campo datetime, timestamp, date o time. Por defecto el va agrupar por supuesto por valores iguales. El problema es que para que dos datetime sean iguales tienen que tener el día y la hora exacta, lo cual no es muy común que esto ocurra. Entonces para ello sql acepta que apliquemos funciones para hacer los GROUP BY, es decir, que para lograr lo anterior solo tenemos que agregar una función que nos de el mes la hora o lo que queramos para poder hacer la agrupación.

Funciones de fecha que nos pueden servir:

EXTRACT( Unidad de una fecha)

Esta funcion extrae de una fecha lo que nosotros le pidamos(esta es la más recomendada por el rendimiento, un ejemplo seria:

SELECT EXTRACT(YEAR FROM '2009-07-02');

Aqui les dejo una lista con todos los valores posibles

`unit` Value	Expected `expr` Format	Version
`MICROSECOND`	`Microsegundos`	4.1.1
`SECOND`	`Segundos`	Pre-4.1
`MINUTE`	`Minutos`	Pre-4.1
`HOUR`	`Horas`	Pre-4.1
`DAY`	Dias	Pre-4.1
`WEEK`	`Semana`	5.0.0
`MONTH`	`Meses`	Pre-4.1
`QUARTER`	`QUARTERS`	5.0.0
`YEAR`	`Años`	Pre-4.1
`SECOND_MICROSECOND`	`'Segundos.Microsegundos'`	4.1.1
`MINUTE_MICROSECOND`	`'Minutos:Segundos.Microsegundos'`	4.1.1
`MINUTE_SECOND`	`'Minutos:Segundos'`	4.1.1
`HOUR_MICROSECOND`	`'Horas:Minutos:Segundos.Microsegundos'`	4.1.1
`HOUR_SECOND`	`'Horas:Minutos:Segundos'`	4.1.1
`HOUR_MINUTE`	`'Horas:Minutos'`	Pre-4.1
`DAY_MICROSECOND`	`'Dias Horas:Minutos:Segundos.Microsegundos'`	4.1.1
`DAY_SECOND`	`'Dias Horas:Minutos:Segundos'`	Pre-4.1
`DAY_MINUTE`	`'Dias Horas:Minutos'`	Pre-4.1
`DAY_HOUR`	`'Dias Horas'`	Pre-4.1
`YEAR_MONTH`	`'Años-Meses'`	Pre-4.1

DATE_FORMAT(date,format)

Esta función devuelve la fecha con un formato especifico acorde al formato de la cadena formato, esta funcion es muy util para mostrar la fecha con un formato especifico, lo más recomendable es hacer el GROUP con la función anteriror y formatearla con esta. en el caso de que queramos un formato más complejo.

Tambien estan otras funciones como DATE, MONTH, YEAR, etc. que extraen partes más especificas de la fecha, para consultar todas las unfiones disponibles pueden entrar aqui:
http://dev.mysql.com/doc/refman/4.1/en/date-and-time-functions.html

Nuevas actualizaciones en el mundo del Desarrollo web

2011-11-17T22:30:00.001-04:30

En mes an salido muchas actualizaciones en el mundo del Desarrollo Web, voy a hacer un pequeño resumen de las actualizaciones y las mejores que incluyen:

jquery 1.7 (3-nov)

Nuevos eventos on() y off(), para manejar eventos, las cuales haran el trabajo de blind y delegate a la ves.
Mejorado el rendimiento de la función delegate.
Mejorado el soporte de ie7/8 para html5,
Mejoradas las funciones toggle(), ahora al hacer stop() y utilizar otra, la animación comienza donde termino la otra.
Para ver todos los cambios se pueden ver desde aqui: http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Vtiger 5.3 (11-nov):

El Usuario puede configurar su zona horaria
Configurable delimitador de moneda
Modulo de email. Se mejoro el modulo de Webmails
Se puede programar el envio de reportes a correo
Configurado el editor
Nuevo plugin de outlook.- Desarrollado desde 0 para trabajar con las nuevas versiones de windows y outlook.
Importación mejorada.
Actualizados los fields de tarea en Workflows.
Ahora se pueden poner valores por defecto mientras se crea una fila
Se mejoro el modulo de Workflow(flujo de trabajo)
Listas Mejoradas - Las opciones de las listas pueden ser configuradas en base a otras listas
Modulo reportes mejorado
Disponibilidad de configurar el permiso de lectura solamente en campos por perfil
Filtro avanzado de Vistas personalizadas y busqueda avanzada de listas an sido mejorados

Codeigniter 2.1 (14-nov)

Añadido soporte para la base de datos Cubrid
Las funciones de callback ahora aceptan parametros como las otras reglas de validación
Agregada la función html_escape() a las funciones comunes, esta permite evitar injecciones en el codigo html.
Arreglado un una posible inyección en la libreria de seguridad.
Corregido como 22 bugs adicionales

Jquery Mobile 1.0 (16-nov)

Al FIN a salido la versión 1.0 de este poderoso framework para desarrollo web para móviles, llevaba ya mucho tiempo esperando esta poderosa herramienta, que te permite crear una pagina especialmente para celulares en html5 y css3. Sin preocuparnos ni por el estilo ni nada que tenga que ver. Después dedicare algunas entradas a este fabuloso framework. Entre las mejoras que trae incluye:

Sacaron el themeroller para que diseñemos nuestro propio tema. parecido al de jquery UI
Soporta perfectamente Apple Ios >3.2, blacberry > 6, Palm WebOS > 1.4, Android, WIndows Phone 7 - 7.5, etc
Mejoraron en esta versión el rendimiento del framework
En el blog http://jquerymobile.com/blog/, consgeguiran toda la informción relacionada.

vtiger 5.x Actualizando a la version 5.3

2011-11-08T21:30:00.000-04:30

Cuando estamos trabajando con Vtiger, y importamos una base de datos pre-existente, y nos da un error y nos manda a una pagina en la wiki de vtiger, la cual nos da las siguiente instrucciones:

Copiamos el archivo ResetPassword.phpfile, que esta en modules/migration a la carpeta raiz
Copiar la clave única de config.inc.php y lo copiamos a nuestro archivo.
Renombranos el archivo ResetPassword.phpfile y no quedaría así ResetPassword.php
Corremos el archivo en el buscador
Borramos el archivo.

Y obtenemos el brillante resultado que no pasa nada, jajajaja. Vtiger tiene un gran problema, y es que falta mucha documentación y ayuda, para resolver el problema del que estamos hablando tenemos que reemplazar el contenido de ResetPassword.php por este:

<?php

require_once 'config.php';
require_once 'include/utils/utils.php';

 resetUserPasswords();

function resetUserPasswords() {
 $db = PearDatabase::getInstance();
 $sql = 'select user_name, id, crypt_type from vtiger_users';
 $result = $db->pquery($sql, array());
 $rowList = $result->GetRows();
 foreach ($rowList as $row) {
  $cryptType = $row['crypt_type'];
  if(strtolower($cryptType) == 'md5' && version_compare(PHP_VERSION, '5.3.0') >= 0) {
   $cryptType = 'PHP5.3MD5';
  }
  $encryptedPassword = getEncryptedPassword($row['user_name'], $cryptType,
    $row['user_name']);
  $userId = $row['id'];
  $sql = "update vtiger_users set user_password=?,crypt_type=? where id=?";
  $updateResult = $db->pquery($sql, array($encryptedPassword, $cryptType, $userId));
  if(!is_object($updateResult)) {
   $_SESSION['migration_info']['user_messages'][] = "<div>".
    "<span style='color: red;font-weight: bold;width: 30em;'>Failed: </span>".
    "$sql<br />".var_export(array($encryptedPassword, $userId)).'</div>';
  }
 }
}

function getEncryptedPassword($userName, $cryptType, $userPassword) {
 $salt = substr($userName, 0, 2);
 // For more details on salt format look at: http://in.php.net/crypt
 if($cryptType == 'MD5') {
  $salt = '$1$' . $salt . '$';
 } elseif($cryptType == 'BLOWFISH') {
  $salt = '$2$' . $salt . '$';
 } elseif($cryptType == 'PHP5.3MD5') {
  //only change salt for php 5.3 or higher version for backward
  //compactibility.
  //crypt API is lot stricter in taking the value for salt.
  $salt = '$1$' . str_pad($salt, 9, '0');
 }
 $computedEncryptedPassword = crypt($userPassword, $salt);
 return $computedEncryptedPassword;
}

?>

Ya con esto se resetean las claves a el mismo nombre de usuario, si tienen algun problema pueden dejar un comentario.

Manual de codeigniter español

2011-11-08T16:56:00.002-04:30

Este post tiene los manuales en español de codeigniter 2.0.2.
http://sosinformatico.blogspot.com/2011/08/manual-de-codeigniter-202.html

Y aquí conseguirán el manual en español del 2.0.3

http://www.areadepruebas.com.ar/downloads/CodeIgniter_Guia_Usuario_2.0.3.pdf

vtigerCRM: Crear un tema

2011-10-29T18:25:00.001-04:30

Para crear un nuevo tema con vtiger de verdad es bastante sencillo, solo con copiar un tema ya existente y ponerle otro nombre es suficiente. Por supuesto vtiger limita los nombre, no pueden ser: CVS, Attic, akodarkgem, bushtree, coolblue, Amazon, busthree, Aqua, nature, orange o blue.

De todas maneras aqui les dejo la explicación mas detallada: http://wiki.vtiger.com/index.php/Vtiger_CRM_5_:_Creating_your_own_Color_Theme

vtigeCRM configuraciones básicas (idioma, base de datos, codificación y tema por defecto)

2011-10-29T18:20:00.000-04:30

Para poder modificar cualquiera de las configuraciones que les voy a explicar deben entrar en ruta_al_sistema/config.inc.php. explico como se modifican estas variables porque no se pueden modificar sino desde el archivo de configuración

Cambiar idioma por defecto

En el archivo de configuración buscar la linea donde esta la variable $default_language, y aqui por defecto sale en_us, y la cambiamos por la correspondiente de nuestro idioma. si es el español es: es_es.

Si quieren descargar un tema diferente pueden buscar el idioma correspondiente en: http://wiki.vtiger.com/index.php/Vtiger_Language_Packs_Maintainers

Cambiar la configuración de la base de datos.

En el archivo de configuración hay tres variables modificables, las cuales esplicare en cada linea:

$dbconfig['db_server'] = 'localhost'; //servidor de mysql
$dbconfig['db_port'] = ':3306'; //puerto Mysql
$dbconfig['db_username'] = 'root'; //user
$dbconfig['db_password'] = 'contraseña';//contraseña
$dbconfig['db_name'] = 'vtiger1';//nombre de la base de datos

Cambiar la codificación por defecto

La variable $default_charset nos permite configurar la codificación por defecto que es UTF-8, podemos poner ISO-8859-1 que tambien es una de las más utilizadas

Cambiar tema por defecto

Por defecto se encuentra el tema softed o blue para modificar el tema por defecto debemos modificar la variable $default_theme a nuestro propio tema o el tema que deseemos.

Vtiger 5.3 RC

2011-10-26T21:00:00.000-04:30

A salido hoy la version 5.3 RC (link de descarga) de vTiger y anunciaron la versión GA para dentro de 2 o 3 semanas, aquí les dejos los cambios echos mas resultantes en esta versión:

Configurable Zona Horaria, para el usuario
Configurable Delimitadores actuales
Manager de correos. Un mucho más veloz reemplazo pra el modulo de Webmail
Reportes programados pueden ser enviados por correo autoamticamente
Config Editor para modificar al configuración
Nuevo plugin de Outlook – Desarrollado desde 0 para trabajar con las nuevas versiones de Windows y Outlook
Importar mejorado - Agregada característica de auto unir mientras se importa.
Actualizado campos de tarea en WorkFlows
Disponible establecer valores por defecto para los campos mientras se crea un tipo
Workflow mejorado
Listas de selección dinámicas – Selecciones en las listas de seleccion pueden ser configuradas para estar basadas en otras listas de seleccion.
Mejorado de los reportes
Disponibilidad de configurar los permisos de leer solamente por perfil.
Filtro avanzado de la vista personalizable y buscador avanzado de lista de vista mejorados

Vtiger CRM: Manuales de Desarrolo y uso

2011-10-26T20:00:00.001-04:30

Aqui les dejo algunos manuales y cosas utiles, para usar o desarrollas con vtiger:

Manual de Usuario y administrador de Vtiger 5.x http://www.box.net/shared/8ojqudkugy60ak4fuus1
Modelo de Datos de Vtiger CRM 5.2.1: http://www.box.net/shared/d4r4qisie5b41q0tfir7
VtLib, librería de desarrollo para vtiger: http://www.box.net/shared/mdem5eoqgtrh993tivq4
Manual en español que habla de algunas cosas de vTiger, echo por una empresa llamada "MAGNAFOR QUALITAS": http://www.box.net/shared/ocajeuetrszk43ykuqvr

Estas son unas imágenes que hablan un poco del flujo de trabajo en vtiger y de algunas otras cosas interesante, son de uan version antigua, pero sirven para orientarse un poco:

Vtiger un CRM opensource

2011-10-26T20:00:00.000-04:30

Hoy les presento a Vtiger CRM (Customer relationship management) en su versión 5.3.0RC, (recien sacadita del horno), es un sistema Open Source echo en php, basado en Sugar CRM, que esta echo para el manejo de las relaciones empresa-clientes, que permite manejar inventario, presupuestos, facturas, campañas, Email Marketing, pedidos, tarifas, atención al cliente y muchas otras más funciones interesantes.

De verdad es un software muy bueno, útil para cualquier empresa que quiera llevar detalladamente una relación cliente-empresa, sin hacer una gran inversión, ya que el sistema también dispone de varias extensiones que permite al sistema como tal integrarse con asterik o joomla, también dispone de un plugin para que el sistema este disponible para celulares e inclusive una extension para crear una pagina del cliente manejada por vtiger, Otra característica resaltable es que es altamente personalizable, ya que se pueden agregar campos a nuestro gusto, crear filtros y muchas otras opciones más.

Lo Mejor de Vtiger es que es un sistema 100% Gratuito y opensource, lo cual quiere decir que lo podemos modificar como queramos y no vamos a tener ningún rollo. Ademas de que vienen en español también, lo cual es una ventaja para los que hablamos este bello idioma.

Info Grafia

Para los interesados en conocer más de Vtiger aquí les dejo estas Url de Interés:

Web Oficial: http://www.vtiger.com/index.php

Wiki: http://wiki.vtiger.com/

Foro español: http://crmevolutivo.com/forum/

Foro Ingles: http://forums.vtiger.com/

Guia de usuario: http://wiki.vtiger.com/index.php/Vtiger521:User_Manual

Blog: http://blogs.vtiger.com/

Como ultimamente voy a estar trabajando con este sistema, voy a seguir publicando algunas entradas, principalmente entradas que tienen que ver con el desarrollo en vtiger.

Saludos y buena Suerte.

Crear Url dependiendo del lenguaje

2011-10-26T19:30:00.000-04:30

Para crear una url dependiendo del idioma, tendríamos que crear MY_url_helper.php, donde extendemos la funcion site_url(), para que cree las url dependiendo del lenguaje. Acepta ahora un segundo parámetro con la abreviación del lenguaje que queremos que cree la url, si vamos a cambiar el lenguaje hay que pone ajuro el lenguaje, pero si la url debe estar en el mismo lenguaje la va a crear.


 function site_url($uri = '', $lang = '')
 {
  $CI =& get_instance();
  $config =& get_config();
  if(!array_key_exists($lang,$config['languages']))
   $lang=array_search($config['language'],$config['languages']);
  return $CI->config->site_url()."/$lang/".trim($uri,"/").$CI->config->item('url_suffix');
 }

Codeigniter Multilenguaje web, por URLS

2011-10-26T18:27:00.000-04:30

Este tutorial se lo voy a dedicar a explicar como se hace para crear un sistema Multilenguaje en Codeigniter, en internet hay varios tutoriales de como hacer esto en nuestro idioma, pero lo hacen usando cookies, y aunque no están mal, no permiten a un buscador almacenar correctamente el contenido de nuestra pagina en los diferentes lenguajes y así atraer a más gente a nuestra pagina Web.

Codeigniter Multilenguaje

Aquí les dejo un articulo sobre SEO y el MULTILINGUAL SEO, por si se quieren documentar un poco más: http://www.searchenginejournal.com/multilingual-seo/19903/

Ahora bien, para empezar deben conocer primero como se trabaja con lenguajes de manera básica con Codeigniter, aqui les dejo un pequeño tutorial que hice: http://sosinformatico.blogspot.com/2011/10/codeigniter-language-class.html

Para hacer que codeigniter sea multilenguaje hay dos maneras que yo conozco, una es a través de hooks y otra extendiendo la clase que lang.php en la carpeta core de nuestra aplicación. En este tutorial voy a explicar la ultima forma, y despues publicara otro con la otra forma.

Configurando el archivo Routes.php

En application/config/routex.php vamos a agregar dos lineas:

$route['(\w{2})/(.*)'] = '$2';

$route['(\w{2})'] = $route['default_controller'];

En el primer array se establece que cualquier ruta que tenga dos caracteres y una barra inclidada y algo mas, sera rederigida a ese algo más, y al segunda estable que cualquier ruta con dos caracteres llamara al controlador por defecto.

Configurando el archivo Config.php

En application/config/config.php, cerca de la configuración de lenguaje vamos a agregar:

$config['languages'] = array("es" => "espanol", "en" => "english");



$config['redirect_urls']=false;

Esto es para definir la configuración de nuestro sistema de lenguajes, y que después solo deba ser modificada desde aquí, si queremos agregar un lenguaje aparte o cualquier cosa. Ademas tambien nos permite definir si queremos usar la redirection de url o no, que sirve para que si alguien entre a "hhttp://nuestrositio.com/" lo redirige automaticamente o no a "hhttp://nuestrositio.com/xx" las dos x significan el idioma que tengamos por defecto.

Extendiendo lang.php

Para extender esta libreria del nucleo de Codeigniter, debemos crear dentro de la carpeta application/core un archivo que debe empezar con la variable definida $config['subclass_prefix'] en el config.php (por defecto es MY_) y luego lang.php, en mi caso el nombre es MY_Lang.php, y dentro colocamos el siguiente codigo:

<?php (defined('BASEPATH')) OR exit('No direct script access allowed');

class MY_Lang extends CI_Lang
{
 function __construct()
 {
  parent::__construct();  
  $config =& get_config();
  if(isset($config['languages']) && isset($config['redirect_urls']))
  {
   global $URI, $CFG, $IN;
   //var_dump($URI);
   $lang = (isset($URI->segments['1']))?$URI->segments['1']:'';
   $uri=$URI->segments;
   if(strlen($lang) == 2 && array_key_exists($lang,$config['languages']) == true)
   {
    $config['language']=$config['languages'][$lang];
   }
   elseif($config['redirect_urls'] == true || strlen($lang) == 2 && array_key_exists($lang,$config['languages']) == false)
   {
    $url=$config['base_url'];
    $url.=(empty($config['index_page']))?'':$config['index_page'].'/';
    $url.=array_search($config['language'],$config['languages']).'/';
    if(strlen($lang)==2)
    {
     array_shift($uri);
     $url.=implode('/',$uri);
    }else
    {
     $url.=implode('/',$uri);
    }
    header("location: $url");
   }
  }
 }
}

Este código es el que va a dar la funcionalidad de muli lenguaje, es bastante sencillo, lo que hace es comprueba cuales son los primeros caracteres en la url, comprueba que estén definidos en la configuración y si es así cambia al idioma correspondiente, sino redirige al idioma por defecto. SI la variable redirect:url esta en true, el sistema comprobara que la url empieza con los dos caracteres del idioma por defecto y si no es así lo redirige a la url del idioma por defecto, si esta en false esta variable pues no hace nada y deja el idioma por defecto.

Probando el sistema Multilenguaje.

Esto no es un sistema automatizado que va a traducir toda tu aplicación, lo que hace es modificar solamente el idioma que usa la aplicación dependiendo de la url, para verlo funcionando debemos crear una aplicación que tenga varias idiomas ya definidos y esto se encargara del resto.

De todas maneras aquí les dejo una aplicación con el welcome_message en español y ingles, y los links para cambiar de idioma. Y así la prueban y comentan como funciona.

http://www.box.net/shared/m6uj2q2c6vlyfy7z8e2c

Codeigniter Language CLASS

2011-10-25T15:00:00.000-04:30

Este tutorial trata sobre como usar la libreria Language Class de codeigniter y sera el preámbulo par aun tutorial de como crear sus sistema multi lenguaje con codeigniter, primero vamos a empezar por lo básico, como se hace en codeigniter para trabajar con varios lenguajes. Codeigniter posee una Clase dedicada especialmente para trabajar con los lenguajes, (y tambien tiene un helper), lo primero que debemos saber es que hay dos carpetas donde se guardan los diferentes lenguajes en codeigniter, una esta en "system/language" y la otra en "application/language", en la primera se guarda los lenguajes que tienen que ver solamente con el sistema principal, y la segunda guarda los lenguajes de nuestro proyecto Web.

Dentro de esas carpetas deben tantas carpetas como lenguajes tengamos, y a su ves tantos archivos de lenguajes como necesitemos, eso si, de carpeta a carpeta de lenguaje deben estar exactamente los mismos archivos, con los mismos arrays, la única diferencia es que el lenguaje en el que van a estar escritos los valores de los lenguajes. Como ya en una entrada anterior les deje la traducción de codeigniter al español, aqui!. Que si la revisan con detenimiento es idéntica a la del ingles con la única diferencia que el contenido esta en español, esa traducción como la traducción del sistema va en "system/language",

Creando Archivos de Lenguaje

Para trabajar con varios lenguajes en codeigniter debemos empezar creando los archivos de lenguajes en "application/language/(el lenguaje)/miarchivo_lang.php", todos los archivos de lenguaje deben terminar en _lang.php, y deberíamos tener uno exactamente igual para cada lenguaje.

Dentro de nuestro debemos ir colocando lineas que extiendan el array $lang, para ir definiendo nuevos textos en ese lenguaje. las lineas deben seguir este prototipo:

$lang['clave del lenguaje']="contenido para esta clave";

A la hora de crear nuestro archivo de lenguaje es bueno crear y seguir nuestra propia notación para que despues no vayamos a confundirnos. Ejemplo:

$lang['msj_mensaje_borrado']="Su mensaje a sido borrado";

$lang['error_mensaje_borrado"]="Su mensaje no a podido ser borrado";

Cargando un archivo de lenguaje.

Después de tener creado lso archivos de lenguaje, vamos a necesitar cargarlos, esto se hace con :

$this->lang->load('mi archivo','el lenguaje que quiero');

El segundo parámetro es opcional y si no se coloca cargara el lenguaje predeterminado en nuestro archivo de configuración.

También podemos cargar un archivo de lenguaje automaticamente cada ves que nuestra aplicación cargue, definiendo lo en "applicacion/config/autoload.php".

Imprimiendo lineas de el archivo de lenguaje.

El Languague Class tienen un método line('clave del lenguaje'), que devuelve una linea especifica de lenguaje. Este metodo seguna la documentación oficial, pues ya no se debería a usar más y se debería usar la función lang() de el Langueage helper.


echo $this->lang->line('msj_mensaje_borrado');

//Salida: Su mensaje a sido borrado

echo lang('msj_mensaje_borrado');

//Salida: Su mensaje a sido borrado

echo lang('msj_mensaje_borrado','id_input_formulario')

//Salida: <label for='id_input_formulario'">Su mensaje a sido borrado</label>

Bueno esto es todo por hoy, Voy a tratar de que al proxima entrada sea de como crear un sistema Multilenguaje con Codeigniter.

Nota: si crean como es debido los archivos de lenguaje en la carpeta de español y ingles, veran como al modificar la variable en el config.php va a cambiar en lenguaje al reabrir la pagina.

Tutorial: Como Usar Jquery UI Dialog

2011-10-18T00:03:00.000-04:30

jQuery UI Dialog, es un widget que forma parte de la librería del jQuery UI, que nos permite la creación de ventanas modales, de manera fácil y sencilla. Jquery UI Dialog como los demás widgets de la librería de jQuery UI sigue los estándares de jQuery y por lo tanto es bastante personalizable.

NOTA: Súper importante, estoy trabajando con la versión 1.8 del jQuery UI, y según e leído lo mas probable es que la en la versión 1.9 se modifique su forma de uso.

El widget jQuery UI Dialog, no requiere inicialización previa para empezar a trabajar aunque de todas manera lo podemos iniciar aparte, el widget requiere de un div en nuestra pagina con un id y el contenido que queramos que aparezca en la ventana modal. El contenido se puede parecer a esto:

<div id='dialog' style='display:none;' title='titulo de la ventana'>(contenido que quieres que aparezca en la caja de dialogo)</div>

Dentro de este div, podemos poner lo que necesitemos, ya sean formularios, imagenes, iframe, resultado de una llamada AJAX o todo junto si queremos. Aparte también podemos tranquilamente modificar el contenido del dialog con jQuery.html().

Requisitos para usar jQuery UI Dialog:


jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.position.js
jquery.ui.button.js(opcional, solo si se van a usar los botones)
jquery.ui.mouse.js (opcional, solo si vamos a usar draggable o resizable)
jquery.ui.draggable.js(opcional solo si se va a usar la opcion "dragabble: true")
jquery.ui.resizable.js

Parámetros del widget jQuery UI Dialog:

Aqui estan los más importantes(casi todos) para la lista completa: http://jqueryui.com/demos/dialog#options:

width: Especifica el ancho de la ventana modal, puede ser en numero o auto.
heigth: Especifica el alto de la ventana modal, puede ser numero o auto.
(min|max)width: especifica el ancho maximo o minimo de la ventana modal
(min|max)heigth: especifica la altura maxima o minima de la ventana modal
autoOpen: especifica si se abre o no automaticamente la ventana modal.
buttons, botones que va a tener nuestra ventana de dialogo, con sus funciones.
hide: efecto que sera usado cuando se cierre la ventana
show: efecto que se usara cuando se abra la ventana
draggable: define si es movible o no la ventana modal
resizable: especifica si se puede o no redimenzionar la ventana
modal: la ventana puede ser modal o no, si es verdad, pone un fondo en toda la pantalla semitransparente que impide que el usuario haga click en cualquier otro lado.
position: ubicacion de la ventana modal en la ventana, opciones: 'center', 'left', 'right', 'top', 'bottom'. o un array que puede contener dos pocisiones una con las "x" y otras con las "y", estas pocisiones pueden ser con una de las opciones antes puesta o con un numero.
title: Especifica un titulo a la ventana
zIndex: establece el zIndex para nuestra ventana modal
dialogClass: agrega una clase a la ventana modal para poder definir estilos o lo que necesitemos.

Eventos del widget jQuery UI Dialog:

http://jqueryui.com/demos/dialog#events

open: permite especificar algunas opciones antes de que abre la ventana de dialogo, util para ventanas con formularios, donde queremos reiniciar lo que tiene el formulario.
beforeClose: funcion que se ejecute antes de que se cierre la ventana, lo cual tambien nos permite cancelar el cierre de la ventana si retorna false.
close: evento de cuando se cierra la ventana.
create: evento de cuando se crea la instancia.
focus: evento de cuando la ventana recibe el foco o es activada.
eventos de draggable: dragStart, dragStop, drag.
eventos de resizable: resizeStart, resizeStop, resize.

Metodos del widget jQuery UI Dialog:

http://jqueryui.com/demos/dialog#methods

close: cierra la ventana de dialogo
open: abre la ventana.
destroy: destruye la ventana.

Ventajas y Desventajas del jQuery UI DIalog

La única desventaja que presenta Jquery UI Dialog frente a otros plugins con fancybox, es que este no trae ningún tipo de sistema ya pre-echo para galerías o enlaces que se carguen con iframe o ajax, si que es simplemente una ventana modal y las demás funcionalidades se las tenemos que dar nosotros mismos o mezclarlo con otro plugin. Pero por otro lado tiene una gran ventaja frente a fancybox, porque no requiere pre-instalación de la ventana de dialogo sino que lo podemos crear cuando lo necesitemos.

Hasta aquí llega el tutorial por hoy, después pondre ejemplos mas concretos porque con la practica se hace al maestro.

Chao, Hasta una prosxima entrega!!

Crear Urls Limpias de acentos con Codeigniter

2011-10-16T14:18:00.000-04:30

Esta ves les voy a hablar de la función url_title de el helper url de codeigniter, la cual es muy útil para crear direcciones web validas y limpias de una manera fácil, y ademas también les voy a dejar una versión mejorada de esta función para que también limpien de acentos las url, que es lo único que le hace falta a esta librería.

La función lo que hace es eliminar cualquier carácter extraño de la cadena de texto pasada, utilizando expresiones regulares, dejando solamente los caracteres de la a-z y modificando los espacios a "-" o "_".

La ejemplos de uso de la función url_title().

echo url_title('buen día'); //da como salida "buen-da"

echo url_title("Vas para caracas?? o que?!!!?<{{}"); // da como resultado"Vas-para-carcas??-o-que?!!!?"

Como evitar que url_title() elimine los acentos

Ahora bien, para lograr esto lo primero que debemos hacer es crear nuestra propia version del URL helper, para esto en la carpeta application/helpers creamos un archivo llamado MY_url_helper.php, (OJO usamos MY_ si ese es el prefijo que tenemos establecido en nuestro archivo de configuración) y dentro del archivo colocamos lo siguiente:

function url_title($str, $separator = 'dash', $lowercase = FALSE)
{
  $str=strtr($str,$array=array("À"=> "A","Á"=>"A","Â"=>"A","Ã"=>"A","Ä"=>"A","Å"=>"A","à"=>"a","á"=>"a","â"=>"a","ã"=>"a","ä"=>"a","å"=>"a","Ò"=>"O","Ó"=>"O","Ô"=>"O","Õ"=>"O","Ö"=>"O","Ø"=>"O","ò"=>"o","ó"=>"o","ô"=>"o","õ"=>"o","ö"=>"o","ø"=>"o","È"=>"E","É"=>"E","Ê"=>"E","Ë"=>"E","è"=>"e","é"=>"e","ê"=>"e","ë"=>"e","Ç"=>"C","ç"=>"c","Ì"=>"I","Í"=>"I","Î"=>"I","Ï"=>"I","ì"=>"i","í"=>"i","î"=>"i","ï"=>"i","Ù"=>"U","Ú"=>"U","Û"=>"U","Ü"=>"U","ù"=>"u","ú"=>"u","û"=>"u","ü"=>"u","ÿ"=>"y","Ñ"=>"N","ñ"=>"n"));
  if ($separator == 'dash')
  {
   $search  = '_';
   $replace = '-';
  }
  else
  {
   $search  = '-';
   $replace = '_';
  }

  $trans = array(
      '&\#\d+?;'    => '',
      '&\S+?;'    => '',
      '\s+'     => $replace,
      '[^a-z0-9\-\._]'  => '',
      $replace.'+'   => $replace,
      $replace.'$'   => $replace,
      '^'.$replace   => $replace,
      '\.+$'     => ''
     );

  $str = strip_tags($str);

  foreach ($trans as $key => $val)
  {
   $str = preg_replace("#".$key."#i", $val, $str);
  }

  if ($lowercase === TRUE)
  {
   $str = strtolower($str);
  }
  return trim(stripslashes($str));
 }

Cave destacar que esta función es la misma de codeigniter lo único es que le e agregado una linea para que también reemplace los caracteres que tienen acentos por los normales.

Tambien si quieres pueden agregar esta funcion: que elimina los "-" y los "_" de la caeena que se el pase, más o menos trabaja a la inversa de url_title().

function inv_url_title($str,$lowercase = FALSE)
{
 $str = preg_replace("#[_-]+#i", ' ', $str);
 if ($lowercase === TRUE)
 {
  $str = strtolower($str);
 }
 return $str;
}

Jquery: Crear Select dinamico estado, municipio y parroquia.

2011-10-15T23:19:00.001-04:30

Hace poco una persona solicito en el blog en uno de los comentarios que como se hacia un select Dinamico con estado, municipio y parroquia, esta entrada se la voy a dedicar a ese tema pero como en todo siempre hay varias maneras de manejar un mismo problema, pues esta ves voy a mostrar una solucion !SOLO¡ usando JQUERY, para este ejemplo no voy a usar nada de php ni ajax. Para comenzar debemos tener una lista de estados municipios y parroquias, la cual debe tener un formato parecido al siguiente:

var estados = [{'id_estado':'1','estado':'DISTRITO CAPITAL'},{'id_estado':'2','estado':'AMAZONAS'}];



var municipios = [{'id_municipio':'1','id_estado':'1','municipio':'LIBERTADOR'},{'id_municipio':'2','id_estado':'2','municipio':'ALTO ORINOCO'}];



var parroquias = [{'id_parroquia':'1','id_municipio':'1','id_estado':'1','parroquia':'Parroquia Altagracia'},{'id_parroquia':'2','id_municipio':'1','id_estado':'1','parroquia':'Paroquia Antimano'}];

Estes son solamente de ejemplo pero por supuesto que los nuestros van a ser mucho mas largos.

En el siguiente enlace dejo todo lo necesario para empezar, una lista en javascript con estados, municipios y parroquias de venezuela, la estructura html basica, ademas de la version final:
http://www.box.net/shared/7uktun6uxhbllng6rir9

Ok ahora, ya tenemos la base para empezar, lo primero es crear la lista de estados, donde vamos a usar el array de estados, para crear la lista, lo que vamos a hacer es basicamente alamcenar el html con las opciones de los estados en una variable y despues ponerla como valor del select, para recorrer el array vamos a usar .each, asi quedaria nuestra funcion para los estados:

var sestados = '<option value=""></option>';
$(estados).each(function(i){
   sestados += '<option value="'+this.id_estado+'">'+this.estado+'</option>';
});
$('#estados').html(sestados);

Ahora ya tenemos el select de estados, ahora tenemos que crear el de municipios, para esto tenemos que usar el evento de .change() en el select de estados para que cuando sea modificado creemos el select de municipios, el cual se va a hacer muy parecido al de estados con la unica diferencia que vamos a tener que filtrar el array por estado seleccionado.

Para obtener solo los del estado seleccionado, para ello vamos a usar la funcion jQuery.grep, la cual filtra los elementos de un array que satisfacen la funcion de filtrado, sin afectar el array original. la funcion de filtrado nos pasa dos variables el elemento del array y el indice del array, solamente tenemos que hacer nustra funcion de comprobacion y retornar true o false si cumple o no nuestros parametros.

La funcion quedaria de esta manera:

$('#estados').change(function(){ // evento que al ser modificado el select estados es llamado
    var estado = $('#estados').val(); //obtenemos el estado seleccionado
    var pmunicipios = $.grep(municipios,function(n,i){return (n.id_estado == estado); }); //filtramos por estado
    var smunicipios = '<option value=""></option>'; 
    $(pmunicipios).each(function(i){ //recorremos cada uno de los municipios previamente filtrados
        smunicipios += '<option value="'+this.id_municipio+'">'+this.municipio+'</option>'; //vamos  creando el select
    });
    $('#municipios').html(smunicipios);//el html generado se asigna al select de municipios
});

Ahora vamos a trabajar con con las parroquias las cuales vamos a filtrar por estado y municipio, lo cual se va a hacer de las misma manera que la anterior, con la diferencia que tenemos que cambiar todo lo que dice municipios a parroquias y el filtro ahora va a comprobar que el id_estado se el del estado y el id_municipio sea el del municipio seleccionado.

Este es el resultado final para parroquias:

$('#municipios').change(function(){
    var estado = $('#estados').val();
    var municipio = $('#municipios').val();
    var pparroquias = $.grep(parroquias,function(n,i){return (n.id_estado == estado && n.id_municipio == municipio ); });
    var sparroquias = '<option value=""></option>';
    $(pparroquias).each(function(i){
        sparroquias += '<option value="'+this.id_parroquia+'">'+this.parroquia+'</option>';
    });
    $('#parroquias').html(sparroquias);
});

Este tutorial llega a su final, como abran visto es sumamente sencillo y no necesita mucha explicacion, lo unico que nos resta es que cuando se cambie el estado seleccionado pues borre las parroquias, lo cual se los dejo de tarea :), suerte y espero que les sirva, si tienen una duda publiquenla y si les gusto compartanlo que compartir no cuesta nada.

Nota: hay un pequeño detalle en el array que les paso en el archivo por la codificacion, pero como seguro ustedes generaran sus propios array despues por eso no lo modifique, despues hare uno con ajax y php o codeigniter.

SHIFEDIT: Un editor de codigo en linea.

2011-09-04T22:51:00.000-04:30

SHIFEDIT es un editor de codigo en linea para php, Ruby, Python, Perl, Java, HTML, CSS and JavaScript, muy util, ya que te permite trabajar desde cualquier parte del mundo en linea, sin necesidad de transportar tus archivos de un lado para otro, este IDE en lineas se conecta por ftp o sftp a tu servidor y permite crear, eliminar, modificar cualquier archivo, te ofrece un analizador de sintaxis, tambien si se a modificado externamente permite compararlos y ademas es bastante perzonalizable.

Lo utilize en un proyecto para la pagina artigoo.com, porque estaba conectandome en un internet que no permitia conexiones por el puerto 21, asi que pude hacerlo desde internet sin ningun problemas gracias a esta herramienta.

La unica limitacion que tiene es que nada más te permite 3 servidores a la ves.

http://shiftedit.net

Aprender a programar con Codecademy

2011-09-04T21:53:00.000-04:30

Aqui les dejo una pagina muy buena para aprender a programar, por ahora los cursos son muy basicos, pero seguramente despues iran aumentando el nivel de dificultad. Lo unico es que esta en ingles, pero todos deberiamos saber ingles para aprender a programar.

http://www.codecademy.com

Codeigniter 2.0.3

2011-08-22T22:06:00.000-04:30

Acaba de salir codeigniter 2.0.3, en est anueva version an habiado pequeños cambios lo principal es que se cambio de Github a Git, y ahora ademas codeigniter Core ya no se más publicamente mantenido ahora Codeigniter Reactor va a ser Codeigniter, la version mantenida por la comunidad va a ser la que se va a usar como Codeigniter. Un ¡hurra! por Codeigniter.

En esta version se an echo algunos cambios en el driver de MYSQL para evitar algunos vectores de ataques
Se le hicieron unas mejoras visuales al welcome de codeigniter
Se agrego "application/x-csv" a mimes.php
Agregaron un tercer parametro a la función heading para poder agregar atributos html a las tags html
Se agrego is_unique a la libreria de validación de formularios.

Excelente juego en html5

2011-08-20T10:44:00.000-04:30

Despues de la salida del html5, an sido muchas las paginas que an salido aprovechando las bondades del nuevo estandar, este estandar da para todo inclusive para crear juegos, aqui les dejo un ejemplo de un juego echo con html 5 muy bueno, se los recomiendo:

Enlace:

http://butchersworkshop.com/witr/

Manual de codeigniter 2.0.2

2011-08-19T22:16:00.000-04:30

Aqui les dejo el manual en español de Codeigniter 2.0.2, esta bajo licencia Creative Commons, y para empezar esta muy buena.

http://www.areadepruebas.com.ar/downloads/CodeIgniter_Guia_Usuario.pdf

Acerca de la Guía de Usuario en Español

La traducción fue realizada en el otoño/invierno austral de 2011, liberándola con la esperanza de serle útil a quien la lea.

Julio de 2011

Fernando “seacat” Velo

seacat.area@gmail.com

Esta Guía se distrubuye con licencia

http://creativecommons.org/licenses/by-sa/3.0/

PHP: Como averiguar si un usuario existe o no en twitter

2011-08-15T23:21:00.000-04:30

Después de tratar fallida mente con jquery de averiguar si NO EXISTE un usuario en twitter pues ahora lo hice con php, con php déjenme decirles que si se puede lograr si existe o no un usuario en twitter, ya en http://sosinformatico.blogspot.com/2011/08/como-averiguar-si-un-usuario-existe-o.html puse algunos datos básicos, aquí voy a poner el script con el ejemplo ya echo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> 
<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<title>Twitter application</title>

</head>
<body>
	<form action='' >
	<input type='text' name='twitter'>
	<input type='submit'>
	</form>
	<?php
	if(isset($_GET['twitter']))
	{
		$var = @fopen("http://api.twitter.com/1/users/show.json?screen_name=".$_GET['twitter'],'rb');
		if($var)
		{
			echo "<p>usuario existe</p>";
			echo "<pre>";
			var_dump(json_decode(stream_get_contents($var)));
			echo "</pre>";
			fclose($var);
		}
		else
		{
			echo "usuario no existe";
		}
	}

	?>
</body>
</html>

Jquery: Como averiguar si un usuario existe o no en twitter

2011-08-15T22:56:00.004-04:30

A la hora de integrar, una pagina web con twitter una de las cosas que podemos requerir es averiguar si un usuario existe o no en twitter, en Internet no encontré mucha info, por eso me decidí a mostrar como lo hice.

Lo primero que tenemos que saber es que las llamadas ajax no se permite cruzar dominios, solamente que sean scripts o que tenga callback, porque de esa manera el sistema sabe que estamos llamando a el api del otro dominio.

Para poder averiguar informacion sobre un usuario, se debe usar la siguiente url: http://api.twitter.com/1/users/show.format y aqui conseguiremos la documentación oficial del API https://dev.twitter.com/docs/api/1/get/users/show. Los formatos que permiten son json y xml. permiten varios parámetros el más importante es scree_name, con el cual especificaremos cual es el usuario que estamos buscando. ahora bien el script que averiguar si un usuario existe o no:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> 
<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<title>Twitter application</title>
	<script>
	$(function(){
		$('#twitter').change(function(){
			$.ajax({
				url:'http://api.twitter.com/1/users/show.json?callback=?',
				data: {screen_name:$('#twitter').val()},
				dataType:'json',
				type:'get',
				error: function(){
					$('#tweet').text("usuario no esiste");
				},
				success: function(data){
					$('#tweet').text("USUARIO EXISTE");
				}
			});
		});
	});
	</script>
</head>
<body>
	<input type='text' id='twitter'>
	<div id='tweet'></div>
</body>
</html>

Ademas de decirnos si existe o no el usuario nos da información relevante, como la imagen de perfil, los seguidores, etc.

Ejemplo: http://api.twitter.com/1/users/show.json?callback=jQuery16208318964859936386_1313448625668&screen_name=publisnet&_=1313449005574

Cree un articulo relacionado con este sobre dice como se hace para averiguar si existe o no existe un usuario con php, que podría ser la solución para apoyar al jquery.

NOTA: Este script función a la perfección si un usuario existe, pero si no existe no da ningún tipo de error, lo cual no se puede terminar de saber si el usuario no existe, de verdad no entiendo porque el jquery no responde como es debido, pero cuando consiga la solución la posteo.

Libreria GD, Crear imagenes con transparencia.

2011-08-09T11:35:00.003-04:30

En php para crear imágenes con php como ya e comentado como hace con la librería GD en estos dos tutoriales:

http://sosinformatico.blogspot.com/2011/02/tutorial-creando-un-bonito-y-estilizado.html
http://sosinformatico.blogspot.com/2011/02/tutorial-creando-un-bonito-y-estilizado_24.html

Ahora les voy a mostrar como manejar los colores con transparencia y crear imágenes con transparencias.

Cuando creamos una imagen con gd pues por defecto esta tiene color negro y no esta preparada para usar transparencias para poder usar las transparencias hay que primero activarlas como tal en la imagen para después poderlas usar, las funciones que se necesitan para trabajar con imagenes se usan las siguientes funciones:

imagecolorallocatealpha
Imagecolortransparent
imagealphablending
imagesavealpha

Lo primero que debemos saber es que se necesita tener instalado la version 2 de la libreria db, si ya la tenemos instalada podemos continuar tranquilamente, lo segundo que hay que denotar es que solo podemos trabajar con imágenes gif y png, ya que estas son los unicos dos formatos que soportan canales alfa. La primera función que vamos a analizar es:

Imagecolortransparent

Con esta función definimos un color en una imagen como transparente, para que puede funcionar las imagenes deben haber sido creadas con imagecopymerge() o imagecreatetruecolor(), y lo que hace es especificar un color como transparente en el la imagen, por ejemplo:

<?php
// Crear una imagen de 100x100
$im = imagecreatetruecolor(100, 100);
$rojo = imagecolorallocate($im, 255, 0, 0);
$negro = imagecolorallocate($im, 0, 0, 0);

// Hacer el fondo transparente
imagecolortransparent($im, $negro);

// Dibujar un rectángulo rojo
imagefilledrectangle($im, 4, 4, 50, 25, $rojo);
header('Content-type: image/png');
// Guardar la imagen
imagepng($im);
imagedestroy($im);
exit();
?>

si hacemos esto y lo guardamos con png o gif, pues guarda una imagen con un cuadrado rojo y el fondo transparente, si cambiamos el color transparente de $negro a $rojo veremos que el fondo sale negro y el rectángulo rojo, eso funciona y windows y los navegadores agarran la transparencia de las imágenes png pero photoshop no, photoshop se da cuenta y lo dibuja con el color como es. Por eso recomiendo hacerlo de la siguiente manera:

Imagealphablending y Imagesavealpha

Imagealphablending especifica en que modo serán mezclado los colores a la hora de dibujar una imagen, cuando se establece en true pues al dibujar colores el canal alpha que sea establecido para dibujar sera tomado como la cantidad que va a brillar el color subyacente a través de colores de la imagen, y cuando se establece en false pues se guarda de verdad el canal alpha en la imagen.

A la hora de crear imagenes el uso de estas funciones depende de en que formato lo vamos a guardar si es gif con la función imagealphablending es suficiente pero si vamos a crear una imagen png debemos usar la función imagesavealpha para especificar la bandera de que se debe guardar toda la imagen alpha.

Imagecolorallocatealpha

Ahora bien para poder dibujar un color transparente o semi trasnparente en una imagen, pues debemos usar la función imagecolorallocatealpha, y que es casi la misma que imagecolorallocate lo unico es que agrega un parametro que es el nivel de alfa que va a tener ese colo que el rango es de 0 a 127 siendo 127 el trasnparente absoluto.

Aqui esta el mismo ejemplo anterior pero acomodado para png:

<?php
// Crear una imagen de 100x100
$im = imagecreatetruecolor(100, 100);
imagealphablending($im, false);
imagesavealpha($im, true);
$rojo = imagecolorallocate($im, 255, 0, 0);
$negro = imagecolorallocatealpha($im, 0, 0, 0,127);

// Dibujar el fondo transparente
imagefilledrectangle($im, 0, 0, 100, 100, $negro);
// Dibujar un rectángulo rojo
imagefilledrectangle($im, 4, 4, 50, 25, $rojo);
header('Content-type: image/png');
// Guardar la imagen

imagepng($im);
imagedestroy($im);
exit();
?>

Resultado final:

http://courch7642.webcindario.com/blog/gd2.php

Ahora aparte les dejo dos ejemplos de imágenes con transparencia:

1. 3 círculos semitransparentes con fondo transparente:

<?php
$tamaño = 300;
$imagen=imagecreatetruecolor($tamaño, $tamaño);
imagealphablending($imagen, false);
imagesavealpha($imagen, true);
// algo para obtener un fondo transparente
$fondo = imagecolorallocatealpha($imagen, 255, 255, 255,127);
imagefilledrectangle($imagen, 0, 0, $tamaño, $tamaño, $fondo);

$amarillo_x = 100;
$amarillo_y = 75;
$rojo_x     = 120;
$rojo_y     = 165;
$azul_x     = 187;
$azul_y     = 125;
$radio      = 150;
// asignar colores con valores alfa
$amarillo = imagecolorallocatealpha($imagen, 255, 255, 0, 75);
$rojo     = imagecolorallocatealpha($imagen, 255, 0, 0, 75);
$azul     = imagecolorallocatealpha($imagen, 0, 0, 255, 75);
// dibujar 3 círculos solapados
imagefilledellipse($imagen, $amarillo_x, $amarillo_y, $radio, $radio, $amarillo);
imagefilledellipse($imagen, $rojo_x, $rojo_y, $radio, $radio, $rojo);
imagefilledellipse($imagen, $azul_x, $azul_y, $radio, $radio, $azul);
// ¡no olvide imprimir la cabecera correcta!
header('Content-type: image/png');
// y finalmente, imprimir el resultado
imagepng($imagen);
imagedestroy($imagen);
?>

Resultado final:
http://courch7642.webcindario.com/blog/gd3.php

2. Este codigo genera fondos semitransparentes muy útiles a la hora de diseñar una pagina web. y lo mejor es que podemos especificar que color queremos.

<?php
if(isset($_GET['hex']))
{
	$hex=$_GET['hex'];
	header('Content-Transfer-Encoding: binary');
	header('Content-type: image/png');
	//creo imagen
	if(strlen($hex)==6)
	{
		$hcnt=strlen($hex)/3;
		$color['red']=hexdec(substr($hex,0,$hcnt));
		$color['green']=hexdec(substr($hex,$hcnt,$hcnt));
		$color['blue']=hexdec(substr($hex,$hcnt*2));
	}
	else
	{
		$color['red']=0;
		$color['green']=0;
		$color['blue']=0;
	}
	$fondo = imagecreatetruecolor(10,10);
	imagealphablending($fondo, false);
	imagesavealpha($fondo, true);
	$color['img']=imagecolorallocatealpha($fondo, $color['red'], $color['green'], $color['blue'],75);
	imagefilledrectangle($fondo, 0, 0, 10, 10, imagecolorallocatealpha($fondo, 255, 255, 255,0));
	imagefilledrectangle($fondo, 0, 0, 10, 10, $color['img']);

	imagepng($fondo);
	imagedestroy($fondo);
}
?>

Resultado final:
http://courch7642.webcindario.com/blog/gd.php?hex=ff0000

http://courch7642.webcindario.com/blog/gd.php?hex=79B7E7