Archive for the ‘Librerías’ Category

junio 6, 2010 15

Tutorial de CKEditor. Parte IV.

By in JavaScript, Librerías

Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar.  Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas:

<html>
  <head>
    <title>ckeditor test</title>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="editor.js"></script>
  </head>
  <body>
    <textarea id="editor"></textarea>
  </body>
</html>

Esta es nuestra página con el editor. Hemos añadido el script de ckeditor y otro más llamado editor.js. En ese archivo está el código siguiente:

window.onload = function() {
  CKEDITOR.replace( 'editor',
  {
    toolbar : 'Full',
    templates_files : [ './templates.js' ]
  });
}

Hemos añadido una barra completa para que aparezca el botón de plantilla aunque, esto no es estrictamente necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la segunda parte del tutorial. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que indicaremos los nombres de los ficheros donde definimos las plantillas. En este caso solo un archivo, llamado templates.js.

El archivo templates.js tendrá el siguiente código:

// Registramos las plantillas
CKEDITOR.addTemplates( 'default',
{
  // La ruta donde están las imágenes de las plantillas
  imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

  // Definición de las plantillas
  templates :
  [
    {
      title: 'Plantilla 1',
      image: 'template1.gif',
      description: 'Descripci&oacute;n de la plantilla 1.',
      html:
        '<h2>Pantilla 1</h2>' +
        '<p>Inserte el texto aqu&iacute;.</p>'
    },
    {
      title: 'Plantilla 2',
      html:
      '<h3>Plantilla 2</h3>' +
      '<p>Inserte el texto aqu&iacute;.</p>'
    }
  ]
});

Ahora vamos a la parte interesante. Para añadir plantillas llamamos al addTemplates, al que le pasamos un nombre y un objeto con los datos necesarios para mostrar las plantillas. El objeto tiene los campos imagePath, donde le indicamos la ruta de la imágenes que aparecerán como vista previa de la plantilla, y templates, un array de objetos que tienen los datos de la plantilla. Estos datos son:

  • title: Título de la plantilla.
  • image: imagen de vista previa de la plantilla.
  • description: descripción de la plantilla.
  • html: La plantilla propiamente dicha.

De esta sencilla forma podemos añadir plantillas a nuestro editor. Cuando pulsemos sobre el botón de plantillas nos aparecerá la siguiente ventana:

Ahora solo toca seleccionar nuestra plantilla y esta aparecerá como contenido de nuestro editor, reemplazándolo o añadiéndolo según hayamos indicado en la ventana,

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

abril 26, 2010 1

Hacer visible un campo password con jQuery

By in JavaScript, Librerías

Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla.

Vamos a ver primero el código de nuestro formulario:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Login</title>
      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="login.js"></script>
   </head>
   <body>
      <form onsubmit="return false;">
         <label for="user">Usuario:</label><input type="text" name="user" id="user"/><br/>
         <label for="password">Password:</label><input type="password" name="password" id="password"/><br/>
         <input type="checkbox" id="show"/> <label for="show">Mostrar password.</label><br/>
         <input type="submit" value="login"/>
      </form>
   </body>
</html>

Es un formulario muy sencillo, ni siquiera envia datos, pero nos sirve como ejemplo. Podemos ver que añadimos dos scripts a la página, el de jQuery y el que contendrá el código para mostrar el campo password. También observamos que hay un campo checkbox que tendremos que seleccionar para ver el contenido de campo password.

Ahora vamos con el código para mostrar el valor del campo, que está en el archivo login.js:

$(document).ready( function(){

   $('#show').attr('checked', false);

   $('#show').click(function(){

      name = $('#password').attr('name');
      value = $('#password').attr('value');
      if($(this).attr('checked'))
      {
         html = '<input type="text" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
      else
      {
         html = '<input type="password" name="'+ name + '" value="' + value + '" id="password"/>';
         $('#password').after(html).remove();
      }
   });
});

Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo, por otro igual del tipo que corresponda, password cuando no está seleccionando y text cuando lo está, dándole el mismo valor a los atributos de este.

Podéis ver una demo en el siguiente enlace:

Demostración de como hacer visible un campo password con jQuery

Y también podéis descargar los archivos de la demo:

Archivos para hacer visibe un campo password con jQuery

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

marzo 11, 2010 5

Como utilizar Lightbox 2

By in JavaScript, Librerías

Lightbox es un script escrito en JavaScript que nos permite mostrar una “popup” con una imagen de una forma bastante elegante. Para hacer uso de Lightbox lo primero que vamos a hacer es descargarnos el script desde su página web.

Una vez que tenemos esto ya podemos incluirlo en nuestra página. Lo primero que tendremos que incluir es el framework Prototype y la librería de efectos Scriptaculous, ambas vienen con Lightbox, ya que Lightbox hace uso de estas. Una vez incluidas añadiremos también el script de Lightbox:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Tras añadir los script tenemos que incluir el archivo con los estilos de Lightbox:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Una vez hecho esto ya tenemos Lightbox listo para usarlo. Para ello tendremos que añadir el atributo rel con el valor “lightbox” al enlace que queremos que muestre nuestra imagen. Veamos un ejemplo:

<a href="images/image1.jpg" rel="lightbox" title="Imagen 1">imagen 1</a>

De ese modo al hacer click sobre el enlace se abrirá la imagen indicada en la propiedad href, pero lo hará mediante Lightbox. Si a la etiqueta <a> le añadimos el atributo title, en el ejemplo está, Lightbox nos mostrará también el título.

Podemos crear conjuntos añadiendo el nombre del conjunto entre corchetes en el atributo rel, de la siguiente forma:

<a href="images/image1.jpg" rel="lightbox[set]">imagen 1</a>
<a href="images/image2.jpg" rel="lightbox[set]">imagen 2</a>
<a href="images/image3.jpg" rel="lightbox[set]">imagen 3</a>

Como se ha podido ver con Lightbox podemos mostrar nuestras imágenes de una forma más elegante que mostrando solo la imagen en el navegador.

Podéis descargar un pequeño ejemplo en el siguiente enlace:

Demo de LightBox 2

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

marzo 1, 2010 0

Generando thumbnails con PHP

By in Librerías, PHP

Ya hemos visto en este blog como usar algunas de las funciones de la librería GD. Hoy le va a tocar el turno a la función imagecopyresampled, que nos va a permitir escalar una imagen. El código para generar el thumbnail mediante esta función es el siguiente:

<?php
define('ANCHO', 100);
$image_path = $_GET['i'];

// Cargamos la imagen original
$original = imagecreatefromjpeg($image_path);

// obtenemos el ancho y el alto
$original_x = imagesx($original);
$original_y = imagesy($original);

// calculamos el nuevo alto de la imagen, para que guarde la relación
// de aspecto
$alto_destino = round($original_y * ANCHO / $original_x, 0);

// creamos la imagen del thumbnail
$destino = imagecreatetruecolor(ANCHO, $alto_destino);

// copiamos la imagen original y la escalamos
imagecopyresampled($destino, $original, 0, 0, 0, 0, ANCHO, $alto_destino, $original_x, $original_y);

// mostramos la imagen del thumbnail
header('Content-Type: image/jpeg');
imagejpeg($destino);

// destruimos las imagenes
imagedestroy($destino);
imagedestroy($original);

Podríamos modificar este script para que guardara los thumbnails en un directorio, y si ya existe no haría falta volver a generarlo, pero eso lo dejamos mejor como pequeña práctica.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,

febrero 26, 2010 0

Tutorial de ADOdb: Parte II

By in Librerías, PHP

En el anterior tutorial vimos como conectarnos a una base de datos. Hoy veremos como realizar consultas a la base de datos. Para ello vamos a ver un ejemplo donde nos conectaremos a una base de datos, MySQL en nuestro caso, y mediante el método Execute realizaremos una consulta a la base de datos (el ejemplo es muy parecido al de la anterior parte).

<?php

include('adodb.inc.php');

$conexion = NewADOConnection('mysqli');
$conexion->Connect('localhost', 'user', 'password', 'db');

$recordSet = $conexion->Execute('SELECT user_id, user_name FROM users');

if($recordSet != false)
{
 while(!$recordSet->EOF)
 {
  echo $recordSet->fields[0].':'.$recordSet->fields[1].'<br>';
  $recordSet->MoveNext();
 }
}

?>

Lo que hacemos es conectarnos a la base de datos, como vimos en la primera parte, y después ejecutamos una consulta con el método Execute. Este método nos devuelve una instancia de la clase ADORecordSet o false si ha ocurrido algún error. Esta clase nos provee de una serie de métodos y propiedades para manejar los datos devueltos por la consulta.

Una vez hecha la consulta comprobamos si se ha ejecutado correctamente la consulta. Acto seguido realizamos un bucle while siempre que no se haya llegado al final del recordset. Para ello comprobamos la propiedad EOF que nos indica si hemos llegado o no al final.

Luego imprimimos los datos. Para acceder a los datos de cada registro hacemos uso de la propiedad fields. Esta propiedad es un array que contiene cada uno de los campos de nuestro registro. Una vez que ya hemos hecho lo que queríamos, en este caso simplemente mostrar los datos, nos desplazamos al siguiente registro con el método MoveNext de la clase ADORecordSet.

Pero también podemos realizar otro tipo de consultas, por ejemplo de inserción o de modificación de registros. Para ello hacemos uso también del método Execute de la clase ADOConnection. Veamos un ejemplo:

<?php

include('adodb.inc.php');

$conexion = NewADOConnection('mysqli');
$conexion->Connect('localhost', 'user', 'password', 'db');

if($conexion->Execute('UPDATE user_name FROM users WHERE user_id = 1'))
{
 echo "Actualización realizada.";
}
else
{
 echo "Error al actualizar";
}

?>

En este caso el método devuelve true si la consulta se realiza satisfactoriamente y false si ocurre algún error.

Paso de parámetros a las consultas

Una de las cosas que podemos hacer con el método Execute es añadirle parámetros a las consultas. Para ello tenemos que construir la consulta de una forma especial, para indicar donde están los parámetros, y pasarle al método Execute un array con el valor de dichos parámetros. Veamos como hacerlo:

$rs = $conexion->Execute('SELECT user_name FROM users WHERE user_id=?', array($user_id));

Se puede apreciar que en la consulta se ha usado el símbolo ? para indicar donde va el parámetro. Como segundo parámetro del método execute se le pasa un array con los valores, en este caso es uno solo, de los parámetros.

Se puede usar este método con más de un parámetro:

$rs = $conexion->Execute('SELECT user_name FROM users WHERE user_id=? AND user_login =?', array($user_id, $user_login));

Podemos ver también que las cadenas no deben ir entre comillas en los parámetros, pues las comillas se le añaden a posteriori.

Otros métodos de la clase ADORecordSet

Métodos que devuelven una sola fila
Método: Descripción:
FetchRow() Devuelve una fila como un array y se desplaza al siguiente registro implícitamente.  No es necesario llamar después al método MoveNext.
FetchObject($toupper=true) Devuelve una fila como un objeto, siendo cada miembro un campo del registro. Si $toupper es igual a true los nombres de los campos irán en mayúsucula. Se recomienda usar el método FetchNextObject.
FetchNextObject($toupper=true) Igual que FetchObject pero mueve el puntero de posición al siguiente registro.
FetchObj() Igual que FetchObject(false)
FetchNextObject() Igual que FetchNectObject(false)
Métodos que devuelven todas las filas
Método: Descripción:
GetArray([$numRows]) Devuelve un array bidimensional con las filas desde la posición 0 a la $numRows -1. Si no se define $numRows devuelve toda la fila.

La clase RecordSet tiene muchos más métodos que nos pueden ser útiles, pero de momento con esto es suficiente. Si se quiere ver el resto de métodos se puede ver la documentación de la clase.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,