martes, 27 de noviembre de 2012

Javascript - Creación de un objeto

A diferencia de otros lenguajes de programación, javascript permite crear un objeto sin necesidad de recurrir a ningun metodo o función contructora. Podemos crear un objeto simplemente de la siguiente manera:

//creación del objeto
var oRectangle = {};


Con esta linea tenemos un objeto vacío, si queremos añadirle atributos bastaría de la siguiente manera:

oRectangle.width = 200;
oRectangle.height = 300;

Hemos asignado 2 atributos (alto y ancho), imaginemos que queremos un metodo que calcule el area, añadiriamos el metodo de la siguiente manera:

oRectangle.area = function () {
    return this.height * this.width;
};
//si ejecutamos el metodo nos devuelve el area
oRectangle.area();
//devuelve 60000

En este ejemplo vemos el uso de la palabra clave "this", this en javascript apunta a diferentes sitios dependiendo del "contexto" de ejecución. En concreto, si corresponde a un metodo de un objeto, this apuntará al objeto en cuestión, por el contrario en una función cualquiera this apuntará al objeto global (normalmente window). Entraremos más en detalle en otro articulo. En estos ejemplos, this es una variable que apunta al objeto instanciado (oRectangle).

Todo lo anterior podemos definirlo más directamente de la siguiente manera:

var oRectangle = {
    width : 200,
    height : 300,
    area : function () {
      return this.height * this.width;
    }
};

Más adelante veremos como crear funciones constructoras para simular la programación orientada a objetos en javascript, veremos el concepto de clase, herencia, abstracción, atributos privados. 

Hasta pronto


domingo, 24 de julio de 2011

Symfony

Me gustaría hablaros de Symfony, un framework de PHP

Symfony es un potentísimo framework para php que integra el patrón MVC (Modelo Vista Controlador), a través de plantillas, acciones y un orm (object relational mapping).

Con symfony puedes crear aplicaciones usando los estándares y con un diseño limpio, lo cual más adelante es mucho más fácil de mantener y añadir funcionalidades.

Hay mucha documentación, aquí dejo unos links:

http://www.symfony.es/ (Pagina española de Symfony con muchísima documentación)

http://www.symfony-project.org/jobeet/1_4/Doctrine/es/01 (Proyecto Jobeet donde te explican como crear una página web desde cero con Symfony, se enfrentan a los problemas más comunes a la hora del desarrollo, muy útil)

Espero poder escribir algunas practicas de desarrollo en este fabuloso framework, actualmente lo estoy viendo en profundidad debido a un proyecto del trabajo.

Nos vemos!


sábado, 13 de marzo de 2010

Crear efecto reflejo en Gimp

Vamos a crear un efecto de reflejo en un titulo con gimp. El resultado sería algo así: Vamos a ver como se hace de una manera simple.
  • Al abrir el gimp, seleccionamos una imagen nueva con el tamaño que queramos, en el caso del ejemplo es una imagen de 200x100.
  • Ahora escribimos el titulo que queramos, le aplicamos los filtros que queramos y llega el momento de cojer el titulo y aplicarle un reflejo. Lo que debemos hacer es duplicar la capa:
  • Después de duplicarla debermos voltearla con la herramienta de volteo
  • Seleccionaremos la opción de volteo vertical:
  • Hacemos click en la capa que nos quedó duplicada encima del titulo y nos dará la vuelta.
  • Ahora con la herramienta mover moveremos la capa de manera que nos quede justo debajo de nuestro titulo:
  • Lo siguiente ya sería generar el efecto en si, ya que lo anterior solo ha sido manipulación de capas. Para crear este efecto haremos clic un vez en mascara rápida (vease en la captura siguiente). Seleccionaremos un degradado de blanco a negro con la herramienta degradado . Debemos elegir un degradado de blanco a negro, para ello seleccionamos los colores de frente y fondo correspondientes. Una vez hecho esto aplicaremos el degradado de manera que acabe en el final de nuestra capa volteada.
  • Ahora lo que debemos hacer es quitar la mascara rapida y suprimir la selección con la tecla Supr. Una vez hecho esto podemos cambiar la opacidad de la capa desde la barra de herramientas de "capas, canales..."
Ahora ya tenemos nuestro efecto de reflejo. Podemos jugar con el degradado en la mascara rápida para obtener un ejecto más drástico si queremos. Los pasos no son muchos, con practica este efecto sale casi solo. Además podemos aplicarlo a cualquier capa, ya sea texto o no. Bueno, espero que os haya gustado este sencillo tutorial. Volveré con más y mejores ;) Un saludo

jueves, 11 de marzo de 2010

FPDF

FPDF es una librería para PHP que permite crear archivos .pdf de manera sencilla a través de su clase. Es una buena alternativa para crear informes en nuestra web. Aquí os dejo el ejemplo básico redactado en la página oficial (que además esta en español): Comencemos con el clásico ejemplo:
require('fpdf.php');

$pdf=new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'¡Hola, Mundo!');
$pdf->Output();
?>

[Demo]

Después de incluir el fichero de la clase, creamos el objeto FDPF. El constructor FPDF() se usa aquí con sus valores por defecto: las páginas son de tamaño a4 alargado y la unidad de medida es el milímetro. Se podría haber declarado explícitamente con:
$pdf=new FPDF('P','mm','A4');
Es posible usar el formato apaisado(L), otros formatos de página (como Carta y Legal) y otras unidades de medida (pt, cm, in). Por el momento no hemos creado ninguna página, así que añadiremos una con AddPage(). El origen de coordenadas está en la esquina superior izquierda y la posición actual está por defecto situada a 1 cm de los bordes; los márgenes pueden cambiarse con SetMargins(). Antes de que podamos imprimir texto, es obligatorio escoger una fuente con SetFont(), si no, el documento no será válido. Escogemos Arial en negrita de tamaño 16:
$pdf->SetFont('Arial','B',16);
Podríamos haber especificado itálica con I, subrayado con U o normal con una cadena vacía (o cualquier combinación de las anteriores). Observe que el tamaño de la fuente se detemina en puntos, no en milímetros (ni en cualquier otra unidad establecida por el usuario); es la única excepción. Las otras fuentes incorporadas son Times, Courier, Symbol y ZapfDingbats. Ahora podemos imprimir una celda con Cell(). Una celda es una superficie rectangular, con borde si se quiere, que contiene texto. Se imprime en la posición actual. Especificamos sus dimensiones, el texto (centrado o alineado), si queremos dibujar o no los bordes, y dónde se ubicará la posición actual después de imprimir la celda (a la derecha, debajo o al principio de la siguiente línea). Para añadir el borde, deberemos hacer esto:
$pdf->Cell(40,10,'¡Hola, Mundo!',1);
Para añadir una nueva celda a continuación, con el texto centrado e ir a la siguiente línea, escribiremos:
$pdf->Cell(60,10,'Hecho con FPDF.',0,1,'C');
Nota: el salto de línea puede provocarse también mediante Ln(). Este método le permite especificar además la altura del salto. Finalmente, el documento se cierra y se envía al navegador con Output(). También podríamos haberlo guardado en un fichero pasando como parámetro el nombre del archivo. Cuidado: en caso de que el PDF se envíe al navegador, nada más debe enviarse, ni antes ni después (el más mínimo espacio en blanco o retorno de carro también cuenta). Si se envía algún dato antes, obtendrá el mensaje de error: "Some data has already been output, can't send PDF file". Si se envía después, su navegador puede que muestre únicamente una página en blanco. http://www.fpdf.org/ PD: He trabajado con esta clase en varios proyectos, la verdad que al principio cuesta un poco, pero viste mucho en la web generar un pdf automáticamente.

lunes, 8 de marzo de 2010

Clase Imagen PHP

El motivo de esta entrada es una clase para PHP programada por mi para facilitar el uso y la edición básica de imagenes en PHP. La clase imagen necesita el plugin GD para PHP instalado en el servidor, si usas un hosting probablemente la tengan habilitada. Además necesita tener permisos de escritura en la carpeta donde actue. Deberemos incluir la clase en nuestro codigo: include_once("Imagen.php"); Para inicializar la clase debemos crear un objeto con esta declaración: $img = new Imagen(); A partir de ahora la variable $img es un objeto que representa la imagen, lo siguiente es cargar los datos de la imagen, estos pueden venir de una cadena de caracteres (si proviene de una base de datos) o de un archivo: $img->desdeArchivo("ruta"); /*devuelve false si la imagen no es valida*/ o $img->desdeCadena($variableObtenidaDeBaseDeDatos); /*devuelve false si la imagen no es valida*/ Una vez hecho esto podemos obtener información sobre la imagen: $ext = $img->obtenerExtension(); $alto = $img->obtenerAlto(); $ancho = $img->obtenerAncho(); Tambiem podemos convertir la imagen de un formato a otro: $img->aJPG(); $img->aPNG(); $img->aGIF(); Además podemos redimensionar la imagen: $img->redimensionar(nuevoAlto, nuevoAncho, proporcion); Donde la proporción es un booleano indicando si se quiere o no mantener la relación de aspecto. Si deseamos exportar la imagen a otro archivo: $img->exportar("rutaNueva"); Tambien podemos añadirlo como texto a una consulta de base de datos $query="INSERT INTO imagen (datos) VALUES ('".$img->obtenerCadenaBD()."');"; O directamente mostrandola por pantalla, es decir, nuestro php se convierte en la imagen, para esto es necesario no haber enviado las cabezeras: $img->alNavegador(); Aqui dejo el link de esta clase que nos puede facilitar la vida a la hora de tratar con imagenes en php: http://netescom.org/descargas/Imagen-php.zip -

JQuery

Buenas, hoy quiero hablar de JQuery. Se trata de un Framework de javascript. Jquery facilita la labor a la hora de programar con javascript, ya que garantiza la compatibilidad con los navegadores más importantes. Además, jquery cuenta con un enorme surtido de plugins para hacer casi cualguier cosa:
  • Drag and drop (Arrastrar y soltar)
  • Animaciones
  • Slideshow
  • Validación de formularios
  • Ajax
En jquery podemos acceder a un nodo del DOM mediante la siguiente instrucción: $('#idDelNodo'); Para consultar un atributo del elemento: var srcImg = $('#idDelNodo').attr("src"); Para cambiar una propiedad del elemento: $('#idDelNodo').attr("src", "http://direccionDeLaImagen"); Una de las cosas más interesantes, consultar y editar el css: var fondo = $('#idDelNodo').css("background-color"); Y para editar: $('#idDelNodo').css("background-color", "#FFFFFF"); Bueno, ya iremos viendo más propiedades de este framework, espero subir algunos tutoriales para darle uso. De todos modos os invito a probarlo ya que vale la pena. Un saludo http://jquery.com/

domingo, 7 de marzo de 2010

Estamos aqui para aprender un poco

Bueno, inauguro este blog en un intento de conseguir cosillas interesantes en el mundo de la informática. Espero poder subir suficiente material para tener a la gente contenta. Un saludo, volveremos a vernos. Trex