Cecilia Urbina: febrero 2011

Documentar código se refiere a escribir comentarios al código, explicando lo que se hace y como lo hace de manera que no solo la computadora entienda el código si no también los humanos.

Además de ser una muy buena practica de programación ya que los mismos desarrolladores pueden así darse cuenta si la estructura del programa esta siendo correcta o no, es muy importante ya que a la hora de querer añadir funcionalidades al programa se facilita saber donde agregar las funciones, métodos o clases, saber cual hereda a cual, etc., arreglar errores en el código, también cuando se añaden programadores al proyecto es más fácil para ellos ver la documentación que el código puro.

Lo que se debe de comentar en el código para hacer una documentación correcta es agregar comentarios a todo lo que se piense pudiera ser no tan evidente para otras personas y explicar porque se hace.

Esto se hace comentando de que se encarga una clase, un paquete, que es lo que hace un método y cuando se usa, para que se usa una variable, entre otras cosas.

En Javascript la documentación se puede hacer con la herramienta jsdoc-toolkit, que muestra de manera mas fácil la documentación en archivos html(paginas web).

Las etiquetas principales que se usan en jsdoc-toolkit son:

Lo primero que se debe de hacer para utilizarlo es descargarlo de la pagina oficial:

Una vez descargado se descomprime, pero para poder probarlo necesitamos crear un documento.js de ejemplo para generar la documentación, este ejemplo se tiene que guardar dentro de la carpeta descomprimida:


/**
* Shape is an abstract base class. It is defined simply
* to have something to inherit from for geometric
* subclasses
* @constructor
*/
function Shape(color){
this.color = color;
}

// Bind the Shape_getColor method to the Shape class
Shape.prototype.getColor = Shape_getColor;

/**
* Get the name of the color for this shape
* @returns A color string for this shape
*/
function Shape_getColor(){
return this.color;
}

/**
* Circle is a subclass of Shape
*/
function Circle(radius){
this.radius = radius;
}

/**
* A very rough value for pi
*/
Circle.PI = 3.14;

/**
* Get the radius of this circle
* @returns The radius of this circle
*/
function Circle_getRadius(){
return this.radius;
}

// Circle is a subclass of Shape
Circle.prototype = new Shape(null);

Ya que se tiene el documento ahora se crea la documentacion para esto tenemos que ubicarnos dentro de la carpeta adecuada en el terminal, en mi caso yo tengo mi carpeta descomprimida llamada jsdoc-toolkit-2.3.2 bueno en esa carpeta hay otra que se llama jsdoc-toolkit nos posisionamos ahi, es dentro de esa carpeta donde guarde el programa anterior, ahora escribo la línea siguiente en el terminal:

java -jar jsrun.jar app/run.js -a -t=templates/jsdoc ejemplo.js

que se ve de esta manera en mi terminal:

Ahora se a creado la documentacion dentro de la carpeta jsdoc-toolkit-2.3.2>jsdoc-toolkit>out>jsdoc y es ahi donde se va a encontrar el index.html.

Y algunas capturas de pantalla:

Referencias
http://www.lab.dit.upm.es/~lprg/material/apuntes/doc/doc.htm

Código de ejemplo:

http://www.webadictos.com.mx/2007/07/06/jsdoc-documenta-tu-codigo-de-javascript/

http://code.google.com/p/jsdoc-toolkit/

sábado, 12 de febrero de 2011

Documentación y herramientas avanzadas de desarrollo

Semana 4
Taller Programación Orientado a Objetos

Hola a todos en esta entrada les muestro como se genera documentación para Javascript es algo fácil tomando en cuenta que la herramienta(jsdoc-toolkit) no tiene muchas funciones como Javadoc, que muestra un árbol de las clases y subclases aquí simplemente se muestran todas las clases y no se separan las subclases de las clases.

Bueno esta es la Documentación que generé de acuerdo a mi código de la semana pasada:

Código:



/**
*Esta clase es para crear figuras geometricas lineas o libre
*@class
*/
function Dibujo(){
this.transparencias=transparencias;
this.movraton=movraton;
var color;
var intensidad;
var cor_x;
var cor_y;
}

/**
*Esta clase crea los metodos y  caracteristicas de las Figuras Geometricas, se utilizan los atributos relleno y contorno
*FigGeom es una subclase de Dibujo
*/
function FigGeom (){
var relleno;
var contorno;
}
FigGeom.prototype = new Dibujo();

/**
*Esta clase crea los metodos y  caracteristicas de las lineas curvas y rectas, se utilizan el atributo grosor
*Linea es una subclase de Dibujo
*/
function Linea (){
var grosor;
}
Linea.prototype = new Dibujo();

/**
*Esta clase crea los metodos y  caracteristicas del dibujo libre
*Libre es una subclase de Dibujo
*/
function Libre (){
}
Libre.prototype = new Dibujo();



/**
*Esta clase crea las funciones y  caracteristicas del elipse
*Elipse es una subclase de FigGeom
*/
function Elipse (){
}

Elipse.prototype = new FigGeom();

/**
*Esta clase crea las funciones y  caracteristicas del rectangulo de acuerdo a las coordenadas x y y
*Rectangulos es una subclase de FigGeom
*/
function Rectangulo (){
}

Rectangulos.prototype = new FigGeom();

/**
*Esta clase crea las funciones y  caracteristicas del poligono
*Poligono es una subclase de FigGeom
*/
function Poligono (){
}

Poligonos.prototype = new FigGeom();

/**
*Esta clase crea las funciones y  caracteristicas de una linea curva
*Curva es una subclase de Linea
*/
function Curva (){
}

Curva.prototype = new Linea();

/**
*Esta clase crea las funciones y  caracteristicas de una linea recta de acuerdo a las coordenadas x y y
*Recta es una subclase de Linea
*/
function Recta (){
}

Recta.prototype = new Linea();

miércoles, 9 de febrero de 2011

Implementación herencia y polimorfismo

Semana 3
Taller Programación Orientada a Objetos

Antes de mostrar el código implementando la herencia en javascript de mi proyecto, creo que sería mejor explicar la manera en que se crea la herencia en javascript ya que es diferente a los lenguajes mas comunes de POO.

Retomando el ejemplo anterior de instrumentos, en el que se tiene una clase padre llamada Instrumentos, con dos métodos tocar y romper, y dos clases hijas llamadas, guitarra y batería, que heredan los métodos de tocar y romper, la manera de implementar el código sería:


function instrumento (){//Esta es la clase padre
this.tocar = tocar;
this.romper = romper;
}
function guitarra (){//Clase hija
}
guitarra.prototype = new instrumento();//Se implementa LA HERENCIA

function bateria (){//Clase HIja
this.romper = romperBateria;
}
bateria.prototype = new instrumento();//Se implementa LA HERENCIA

function tocar (){
document.write(“Estamos tocando musica
”);
}

function romper (){
document.write(“Eso lo pagas tu
”);
}

function romperBateria (){
document.write(“Rompiendo bateria, por favor espere.
”);
}

Y mi código, esta parte es la primer clase padre, que llamé Dibujo:


function Dibujo (){//Clase PADRE
  var color;//Atributos a heredar por FigGeom, Libre y Recta
  var intensidad;
  var cor_x;
  var cor_y;
  function transparencias();//Metodos a heredar
  function mov_raton();
}

function FigGeom (){//Clase HIJA que sera padre de "elipse", "rectangulos", "poligonos"
  var relleno; //atributos a heredar por Elipse Rectangulos Poligonos
  var contorno;
}
FigGeom.prototype = new Dibujo();//aqui se forma la herencia

function Linea (){//Clase HIJA que puede ser padre de "recta" y "curva"
  var grosor;//atributos a heredar por Curva y Recta
}
Linea.prototype = new Dibujo();//aqui se forma la herencia

function Libre (){//Clase HIJA
}
Libre.prototype = new Dibujo();//aqui se forma la herencia

Y en esta otra parte muestro las clases padres, que anteriormente eran hijas:


function Elipse (){//Clase HIJA de FigGeom
}

Elipse.prototype = new FigGeom();//aqui se forma la herencia


function Rectangulos (){//Clase HIJA de FigGeom
}

Rectangulos.prototype = new FigGeom();//aqui se forma la herencia


function Poligonos (){//Clase HIJA de FigGeom
}

Poligonos.prototype = new FigGeom();//aqui se forma la herencia


function Curva (){//Clase HIJA de Linea
}

Curva.prototype = new Linea();//aqui se forma la herencia


function Recta (){//Clase HIJA de Linea
}

Recta.prototype = new Linea();//aqui se forma la herencia

Esta es solo una parte del código que implementaré para el proyecto.

martes, 8 de febrero de 2011

Herencia y polimorﬁsmo: modularidad y reutilización de código

Semana 3
Clase Programación Orientada a Objetos

En esta semana vimos los conceptos de herencia y polimorfismo, aterrizando los conceptos en el proyecto elegido(particularmente un editor de dibujo).

La herencia es una característica muy importante para programar orientado a objetos, cuando se tiene una clase(que se puede decir subclase, en este ejemplo clase A), que contiene todas las propiedades y métodos de otra clase(clase padre, en este ejemplo clase B), entonces decimos que la clase A hereda la clase B.

Y el polimorfismo es cuando tenemos una clase que contiene métodos con nombres iguales, pero diferente implementación.

Un buen ejemplo que leí en algún sitio web es haciendo la analogía con instrumentos, por ejemplo se tiene la clase padre que en este caso se puede llamar Instrumentos, con sus funciones definidas como tocar y romper, y clases hijas llamadas guitarra y batería, las dos heredan las funciones de tocar y romper, saliéndonos un poco de la programación esto tiene mucha lógica ya que batería y guitarra los dos son instrumentos, entonces para estar en esta categoría("instrumentos") deben de tener algo en común que en este caso es la acción de tocarlos o romperlos.

En mi proyecto lo definí de la siguiente manera:

En la clase padre Dibujo, puedo tener varias clases hijas como por ejemplo

-*FigGeom

-*Lineas

-Libre(lápiz)

*La clase hija lineas a su vez podría se padre de clases hijas como linearecta y curvas, donde linearecta y curvas heredan de la clase padre atributos como el grosor de la línea.

*Y la clase hija FigGeom podría a su vez ser padre de Eclipse, Polígono, Cuadrados, donde los atributos que heredan es si la figura tiene contorno o no, y si es rellena o no.

Los cuales heredan de la clase Dibujo sus atributos como:

-Color

-Transparencia

-Coordenadas

-Dureza del pincel

Y funciones como:

-Movimiento del ratón, cundo se da click, cuando se tiene presionado el mouse, etc.

Este es un mapa para mostrar esta relación un poco mas gráfico:

jueves, 3 de febrero de 2011

Sintaxis de clases: métodos, atributos, visibilidad

Semana 2
Taller Programación Orientada a Objetos

Esta es la implementación de el código que hicé en javascript:

La manera de hacer clases es:


function Menu( )//SE CREA LA CLASE

{

   // Codigo

	function Nuevo(){//METODO

   	}

	function Guardar(){//METODO

   	}

	function Salir(){//METODO

   	}

	function Deshacer() {

   	}  //METODO

};

de hacer el objeto de la clase:


var Opciones = Menu();//SE CREA EL OBJETO

se formar métodos:


function Colorear() {//METODO

   	}

Y mi código, aunque aún sin utilizar los métodos de javascript que me permiten crear las figuras geometricas y obtener las coordenadas.

miércoles, 2 de febrero de 2011

Diseño de programas en términos de clases múltiples

Semana 2
Materia Programación Orientada a Objetos

Para mi proyecto elegí diseñar un Paint, las funciones más básicas que deberá cumplir es dibujar en linea, rectángulos, círculos, óvalos, polígonos, cambiar los colores de las figuras, rellenos, cambiar el fondo, entre otros.

Entonces he pensado en los siguientes clases con sus atributos y métodos, seguramente me faltaran de incluir más funciones pero prefiero empezar así para no hacer esto muy extenso.

Clases:

Clase Dibujo, será la clase que como su nombre lo dice permitirá dibujar de acuerdo a la opción elegida, ya sea alguna figura geométrica, lineas, texto, etc, irá guardando los dibujos del usuario con las formas, colores y fondos deseados. Podría llamarle a los métodos:

Dibujo.-Aquí se crea el dibujo en sí. Puede tener de atributos, las coordenadas, movimiento del mouse.

Área de dibujo.-Aquí se irán acumulando los dibujos que hace el usuario.

Clase Herramientas, esta clase es la que puede tener muchos métodos como:

Dibujar a lápiz(y este a su vez el grosor del lápiz),

Rellenar de color,

Dibujar figuras geométricas(Rectángulo, Ovalo, Circulo, etcétera),

Cambiar colores,

Borrar,

Insertar un área de texto.

Clase Menú, esta clase es la que tendrá de métodos:

Comenzar un nuevo dibujo,

Borrar el trabajo,

Guardarlo,

Abrir alguna imagen,

Deshacer,

Rehacer,

Salir.

Así es como creo debe ser el diseño de mi programa, cualquier sugerencia, duda, etc, dejen sus comentarios.