Jcrop: Image Cropping con jQuery y PHP

Image Cropping es una tecnica que usa para eliminar el exterior de una imagen y asi poder tener el tamaño y dimensiones deseados de la imagen.
Jcrop es un plugin para jQuery 1.2.6 que nos hace muy facil realizar Image Cropping en web.

Compatibilidad de Navegadores:

  • Firefox 2+
  • Safari 3
  • Opera 9
  • Google Chrome 0.2
  • Internet Explorer 6+
  • Ahora explicare detalladamente como realizar el Image Cropping con Jcrop:

    Incluir los javascript y hojas de estilo en head

    Dentro de head incluiremos la libreria Javascript JQuery, Jcrop y la hoja de estilo Jcrop

    <script src="js/jquery.pack.js"></script>
    <script src="js/jquery.Jcrop.pack.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.css" />
    

    Realizar las funciones para funcionamiento

    Aqui crearemos 3 funciones javascript, una es la que convertira la imagen en un widget Jcrop, la segunda sera llamada desde la primera al seleccionar la region dentro de la imagen, esta actualizara los elementos que serviran para saber que region cortar, la tercera funcion validara que este seleccionada una parte de la imagen.

    $(function(){
        $('#cropbox').Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords
        });
    });
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
    function validar()
    {
        if (parseInt($('#x').val())) return true;
        alert('Seleccionar una region');
        return false;
    };
    

    Incluir la imagen y formulario en body

    Dentro de body pondremos una etiqueta de imagen la cual llebara un id que lo identifique y un formulario el cual tendra un boton tipo submit y cuatro inputs tipo hidden que serviran para saber la region seleccionada

    <img src="flowers.jpg" id="cropbox" />
    <form action="" method="post" onSubmit="return validar();">
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <input type="submit" value="Crop Image" />
    </form>
    

    Incluir la funcion para Image Cropping

    Despues de incluir la imagen debemos de realizar el siguiente paso, este codigo convertira la imagen en un un widget Jcrop el cual permitira hacer una seleccion con el mouse dentro de la imagen.

    jQuery(function(){
    			jQuery('#cropbox').Jcrop();
    		});
    

    Recursos:

Blackbird – depurador de código JavaScript

Blackbird es una librería para depurar alertas de forma mas amigable que un alert(), esto nos permite realizar todo tipo de informes al momento que se esta ejecutando el javascript, podemos saber que paso con el comportamiento de alguna variable, pintar contenidos de bucles, hacer seguimiento a una función, en fin todo lo que solíamos hacer con alert().
En este tutorial les enseñare como podemos implementar en nuestra pagina web esta librería para olvidarnos del clásico alert().

Blackbird

Primero:
Descargaremos la librería blackbird y la descomprimiremos en alguna carpeta, luego crearemos una pagina html e incluiremos el javascript y la hoja de estilo en el head.

<head>
  <script src="blackbird.js"></script>
  <link type="text/css" href="blackbird.css"/>
</head>

Segundo:
En mi caso cuando estaba probando esta librería me aparecía por defecto invisible el panel de blackbird, así que cree un menú fijo, a la derecha superior de la pagina en donde puse todos los comportamientos de blackbird.

<body>
<div style="position:fixed; top:0pt; right:5pt">
<a name="clear" href="javascript:log.clear();">clear</a>
<a name="move" href="javascript:log.move();">move</a>
<a name="resize" href="javascript:log.resize();">resize</a>
<a name="toggle" href="javascript:log.toggle();">toggle</a>
</div>
...

Controles

  • log.toggle()Este control hace aparecer y desaparecer el panel blackbird
  • log.move()Mueve el panel blackbird en cuatro tipos de posiciones: derecha superior e inferior y izquierda superior e inferior.
  • log.resize()Maximiza y normaliza el panel blackbird
  • log.clear()Limpia el contenedor de mensajes del panel blackbird

Tercero:
Para poder probar la gran funcionalidad de blackbird solo basta con colocar el código según el tipo de mensaje que queramos mostrar, existen cuatro tipos de mensajes:

  • log.debug(‘Mensaje para debug’)
  • log.info(‘Mensaje de información’)
  • log.warn(‘Mensaje de Advertencia’)
  • log.error(‘Mensaje de error’)

Podemos ver la demo de este tutorial aqui
Recursos:

Mootools – Fancy Show and Hide

Mootools

En este tutorial muestro como ocultar y mostrar elementos (show and hide) de manera animada con Mootools.
Primero haremos un ejemplo básico y luego el avanzado.

Antes que nada tendremos que incluir la librería Mootools para comenzar a implementar esta funcionalidad, para este ejemplo estoy usando la versión 1.2.0

<script src="mootools.js"></script>

Ejemplo básico:

Incluiremos este script en el head para implementar los metodos para un elemento

window.addEvent('domready',
  function()
  {
    Element.implement(
    {
    //mostrar
    show: function()
    {
      this.setStyle('display','');
    },
    //ocultar
    hide: function()
    {
      this.setStyle('display','none');
    }
  });
});

En nuestra pagina podremos llamar a los metodos show() y hide() de esta manera:

<a onclick="$('element').show()">Mostrar</a>/
<a onclick="$('element').hide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo1

Ejemplo Avanzado:

Incluiremos el javascript que nos creara dos metodos mas, estos los llamaremos fancyShow() y fancyHide()

window.addEvent('domready', function()
{
  Element.implement(
  {
    fancyShow: function()
    {
      this.fade('in');
    },
    fancyHide: function()
    {
      this.fade('out');
    }
  });
});

Para llamar a estos metodos lo podremos hacer igual que el anterior ejemplo

<a onclick="$('element').fancyShow()">Mostrar</a>
<a onclick="$('element').fancyHide()">Ocultar</a>
<div id="element">Show/Hide</div>

Ver demo2

Recursos:

Multibox con Mootools

div align=”center”>

Multibox es una librería que nos sirve para poder crear nuestra galería ya no solo de fotos, el multibox soporta distintos tipos de formato multimedia, como: flash (flv), video(mov,wmv), mp3, html.

En este tutorial les explico como utilizar esta util herramienta para hacer una galería

Primero:
Incluir los javascript y hojas de estilo





Segundo:
Dentro del body añadiremos enlaces donde colocaremos en href la ruta de nuestro archivo, el id dendra que ser correlativo si ponemos mas enlaces, todos los enlaces que serán vistos en la galería tendrán que tener el class=”mb”


Tercero:
Luego de poner el enlace podremos poner una descripción para el archivo, tendrá que llevar el class=”multiBoxDesc mb1″, el mb1 refiere al id del enlace.

Descripción de la Imagen...

Eso es todo si tenemos varios archivos lo único que cambiara sera el id en el enlace y el div para la descripción
Preguntas, sugerencias, comentarios?


Recursos:

zp8497586rq

static en PHP

Que es?

La palabra reservada static en PHP es una declaracion que se les da a miembros y/o metodos de una clase. Un miembro o metodo de una clase declarado como static va a poder ser accesado sin necesidad de hacer una instancia del objecto en una variable.

En mi Post anterior enseño el manejo del Operador de reslucion ::

class Mensajes
{
  public static $msok= 'Mensaje ok!';
  public static function getMsOk()
  {
    echo self::$msok;
  }
}
Mensajes::getMsOk(); //-> Mensaje ok

Donde debe ir?

La palabra reservada static debe ser declara despues de la visibilidad de cada miembro y/o metodo. Por una compatibilidad con PHP 4, si no se pone una visibilidad (public, protected, private) esta la tomara por defecto como public.

class Mensajes
{
  public static $msok= 'Mensaje ok!';
  //lo tomara como public
  static function getMsOk()
  {
    echo self::$msok;
  }
}
Mensajes::getMsOk(); //-> Mensaje ok

Algunas restricciones

Una de la restricciones que tienes la declaracion static es que al no necesitar estar instanciado el objeto para llamar a sus metodos y/p miembros, la pseudo variable $this no esta permitida dentro de los metodos declarados como static, para esto se usara siempre self::.

class Mensajes
{
  public static $msok= 'Mensaje ok!';
  public static function getMsOk()
  {
    $this::$msok; //->Parse Error
    $this->$msok; //->Fatal Error
  }
}

Utilizando self y parent en PHP

Operador de resolución ::

El Operador de Resolución (::) también conocido como Paamayim Nekudotayim que significa doble-dos-puntos en Hebreo.
Este nombre se lo dieron al escribir el compilador Zend 0.5

Para usar este operador desde fuera de una clase basta con poner el nombre de la clase seguida del operador(::) y el nombre de la constante(por ejemplo) para poder ser llamada.

class MiClase
{
    const CONSTANTE = 'Hola! ';
}
echo MiClase::CONSTANTE;

self y parent

Cuando queramos accesar a una constante o metodo estatico por ejemplo desde dentro de la clase podemos usar esta palabra reservada.
self.

Cuando queramos acceder a una constante o metodo de una clase padre, la palabra reservada parent nos sirve para llamarla desde una clase extendida.

class Clase2 extends MiClase
{
    public static $variable = ' static';
    public static function miFuncion()
    {
        echo parent::CONSTANTE;
        echo self::$variable;
    }
}
Clase2::miFuncion() //-> Hola! static

Un caso es cuando en una clase extendida se vuelva a declarar el mismo metodo eliminando las definiciones y cambiando su Visibilidad del metodo de la clase padre.

Lo que hara es ya no llamar al metodo de la clase padre, pero si se requiere se podría hacer con la palabra reservada parent, esto también se aplica en Constructores y Destructores y definición de los metodos mágicos.

class ClasePadre
{
    protected function miFuncion()
    {
    	echo ' Metodo Padre ';
    }
}
class Extendida extends ClasePadre
{
	public function miFuncion()
    {
    	parent::miFuncion;
        echo ' Metodo hijo';
    }
}
zp8497586rq

Visibilidad en PHP

Visibilidad:

La visibilidad es un tipo de acceso que se da a las propiedades y/o metodos de una Clase.
Esta puede definirse anteponiendose con una palabra reservada, hay 3 tipos de visibilidad:

  1. Public:

    Significa que puede ser accesado sin restricción.

  2. Protected:

    Solo puede ser accesado por una clase heredada y la clase que lo define.

  3. Private:

    Solo puede ser accesado por la clase que lo define.

1. Visibilidad en las Propiedades:

Las propiedades de la clase tiene que tener declarada una visibilidad, la palabra reservada var que se usaba en PHP 4 ya no es valida para esta versión.

Ejemplo:

class Persona
{
  public $nombre = 'Cesar';
  protected $telefono = '333-1111';
  private $email = 'Email';
}
$cesar = new Persona();
echo $cesar->nombre; //Cesar
echo $cesar->telefono; //Fatal error
echo $cesar->email; //Fatal error

Clase que hereda:

class Alumno extends Persona
{
  public function __construct()
  {
    echo $this->nombre; //Cesar
    echo $this->telefono; // 333-1111
    echo $this->email; //Undefined
  }
}

2. Visibilidad en los Metodos:

En mi post anterior escribí sobre Constructores y Destructores, estos son los llamados Metodos Mágicos en PHP 5, estos son de tipo public. Cuando un metodo no tiene un tipo de acceso (public, protected, private), son tomados como public

class Persona
{
  public function __construct() { }
  public function getNombre() { }
  protected function getTelefono() { }
  private function getEmail() { }
  // es public
  function getDatos()
  {
    $this->getNombre();
    $this->getTelefono();
    $this->getEmail();
  }
}
$cesar = new Persona();
$cesar->getNombre(); // lo ejecuta
$cesar->getTelefono(); // Fatal Error
$cesar->getEmail(); // Fatal Error
$cesar->getDatos(); // ejecuta los 3 metodos

Algún comentario, sugerencia o critica constructiva, bienvenida sea.

Recursos:

TextboxList con Autocompleter

Si tienes una cuenta en Facebook te habras dado cuenta al enviar mensajes a tus amigos de la forma en que puedes agregar nombres y estos se autocompletan y forman botones con opciones de eliminar, todo esto dentro de un “TextboxList”.

Un TextboxList es una lista aplicada con estilos la apariencia de un textbox, voy a mostrar como hacer esto con unos simples pasos, esta funcion utilizara la libreria mootools.

Primero incluiremos los scripts y hojas de estilo.

<link rel="stylesheet" href="test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="mootools-beta-1.2b1.js" ></script>
<script src="textboxlist.compressed.js" ></script>
<script src="test.js" ></script>

Los scripts adicionales (textboxlist.compressed.js y test.js) son los que crean los contenidos y realizan el autocompletado respectivamente.
En test.js puedes modificar algunas opciones en la Línea 27:

autocomplete: {
      'opacity': 0.8,   //Opacidad de autocomplete
      'maxresults': 10, //El máximo de resultados
      'minchars': 1     //mínimo de letras para busqueda
    }

Segundo: Dentro del body debemos de escribir el código

<form id="test-form">
<ol>
    <input type="text" value="" id="facebook-demo" />
    <div id="facebook-auto">
        <div class="default">Escribe un nombre</div>
        <ul class="feed">
          <li>Jorge Luis Borges</li>
          <li>Julio Cortazar</li>
        </ul>
        <!-- Esta lista  se agregara por defecto -->
    </div>
    <a onclick="sendNames()" href="#">Mostrar Lista</a>
</ol>

Esto nos mostrara una caja de texto simple con un contenido poco particular y al momento de seguir escribiendo nombres se expandera. El div con class=”default” sera el mensaje cuando estemos dentro del textList. La lista con class=”feed” nos permite poner por defecto algunos nombres

Ahora dirán como puedo mandar esto por POST o GET si no es realmente un “input”. Para el tercer paso prepare un script que nos hara esto facil.

function sendNames()
{
    var names = "";
    $$('.bit-box').each
    (
        function(e)
        {
            names += e.textContent + ', ';
        }
    );
    names = names.substr(0,(names.length-2));
    alert(names);
}

La función sendNames() nos recorrera todas las listas con class=”bit-box” y nos retornara el contenido en texto, en el recorrido lo concatenamos por comas, y al final quitamos la coma que sobra.
Ahora podemos mandar esto con una peticion Ajax (Ajax Request) al servidor, si el lenguaje que usamos es PHP lo podemos desglosar con la función explode(‘, ‘,$_POST[‘names’]); Esto convertira en un Array por cada ‘, ‘ en la cadena.

Alguna duda, sugerencia, comentario, escribanme.

Recursos: