Presentación-Clase

Presentación Clase on Prezi

Presentación

Taller


Para descargar

Implementación interfaces gráficas

Taller

Bueno para esta entrada de Taller en los botones yo esperaría poder poner iconitos,
solo que ahora estoy mas interesada en algunas partes de funcionalidad.

Primero que nada para implementar CSS3 y Html5 hay que ver la compatibilidad que hay con los navegadores esta es una pequeña tabla que ayuda a saber que navegador soporta que:




En mi proyecto este es el código de los botones:






el borde al canvas se lo agregue así:



y estoy en la busqueda de imagenes para los botones, la manera que probé de poner imagenes en el botón es esta:

Interfaces gráficas

Clase

CSS 3

CSS, separa el contenido de la forma, se cumplió ya con las primeras especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los diseñadores sobre los elementos de la página ha sido más difícil de cubrir. Las especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las webs, pero los desarrolladores aun continúan usando trucos diversos para conseguir efectos tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en la página.

CSS 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando mucho mayor control de los elementos de la página. Pero como todavía quedaron muchas otras cosas que los diseñadores deseaban hacer, pero que CSS no permitía especificar, éstos debían hacer uso de trucos para el diseño. Lo peor de esos trucos es que muchas veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que permitan aplicar estilos de una manera más elaborada. Dada la necesidad de cambiar el contenido, para alterar al diseño y hacer cosas que CSS no permitía, se estaba dando al traste con alguno de los objetivos para los que CSS fue creado, que era el separar por completo el contenido de la forma.

CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la página.

Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de webs, consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las web.

Propiedades nuevas en CSS 3

He aquí una lista de las principales propiedades que son novedad en CSS3.

Bordes

border-color

border-image

border-radius

box-shadow

Fondos

background-origin

background-clip

background-size

hacer capas con múltiples imágenes de fondo

Color

colores HSL

colores HSLA

colores RGBA

Opacidad

Texto

text-shadow

text-overflow

Rotura de palabras largas

Interfaz

box-sizing

resize

outline

nav-top, nav-right, nav-bottom, nav-left

Selectores

Selectores por atributos

Modelo de caja básico

overflow-x, overflow-y

Otros

media queries

creación de múltiples columnas de texto

propiedades orientadas a discurso o lectura automática de páginas web

Web Fonts

Estructura en HTML5

1-ESTRUCTURA:

En html5 la estructura de las páginas web deben seguir un esquema básico a la hora de hacer el diseño, un header para presentar la web donde se incluirá el menú, una zona de contenidos, una zona para elementos adicionales y la zona footer que será el pie de página. En principio el diseño sigue lo estandar aunque por la forma que quieren que sigamos como por ejemplo la sidebar , nos puede recordar a WordPress que a una página normal.

2-ELEMENTOS DE NAVEGACIÓN:

En html5 los menús deben realizarse medianta listas no ordenadas

.

3-CABECERA:

La cabecerá deberá incluir el logo a título de la página la cual debería ser un h1, seguido de un h2 con una breve descripción del contenido de la página web.

4-ELEMENTOS DE FECHA:

Cuando enviamos contenidos actualizados a la página web, por ejemplo noticias o post para un blog deberemos incluir una nueva etiqueta

5-FORMULARIOS:

Los elementos de un formulario que sean obligatorios debemos marcarlos como tales. .

6-MAQUETACIONES:

En CSS3 no está permitido el uso de tablas por lo que debemos aprender a usar los nuevos elementos.

Un elemento contenedor ( #content { display: table;} y los elemento que queremos hacer flotar que deberos darle la propiedad display: table-cell; para que se comporten como una tabla con td o como un div flotante.

7-SOMBRAS:

Podemos conseguir efectos de sombra con la nueva propiedad css3 que añade efecto de sombra a los elementos, por ejemplo para añadir una sombra con css3 deberemos usar la siguiente propiedas:

box-shadow: 5px 5px 10px #777;

Bibliografía

http://www.4webs.es/blog/tutoriales-y-consejo-para-disenar-paginas-en-html5

http://www.desarrolloweb.com/articulos/introduccion-css3.html

En mi proyecto

Me gustaría que al momento de utilizar por ejemplo el lápiz, se cambie la forma del cursor a un lapicito.





Y este es un diseño muy simple de la pantalla de mi proyecto:

Sistemas distribuidos

Semana 12
Clase de Programación Orientada a Objetos

Sistemas distribuidos

Se podría definir un sistema distribuido por un conjunto de computadoras que aunque están separadas físicamente y conectadas entre sí por una red, cada computadora tiene sus componentes de software y hardware que el usuario percibe como un solo sistema. El usuario puede acceder a recursos remotos de la misma forma que puede manejar recursos locales, o un conjunto de maquinas que usan un software para conseguir un objetivo común.

Los sistemas distribuidos tienen que ser confiables es por eso que si un componente del sistema de descompone otro componente debe poder reemplazarlo, a esto se le conoce como tolerancia a fallos.

Los tamaños de sistemas distribuidos pueden variar, a esto se le conoce como escalabilidad, es decir pueden ser para una red de área local, metropolitana o Internet.

Características

• Seguridad en el sistema distribuido
• Se ejecuta en muchas computadoras
• Interacción entre los equipos
• Software diseñado para ser compatible con varios usuarios y sistemas operativos
• Compatibilidad entre los dispositivos conectados

RMI

RMI(Java Remote Method Invocation) es un mecanismo de Java que llama a un método de forma remota. Es parte de el entorno de ejecución en Java y proporciona una manera sencilla para la comunican de servidores en aplicaciones distribuidas basadas en Java.

En otros lenguajes se puede utilizar CORBA o SOAP en vez de RMI.

La característica de RMI es la facilidad de su uso en la programación por estar diseñado en Java, se puede pasar objetos por referencia, recolectar basura y paso de tipos arbitrarios.

Con RMI, un programa en Java puede exportar un objeto y así estar accesible en la red, entonces el programa permanece esperando peticiones de un puerto TCP. Con este método un cliente podrá conectarse i llamar métodos dados al objeto.

La invocación tiene los siguientes pasos:

• Encapsulado de los parámetros.
• Invocación del método.
• El servidor manda alguna respuesta.
• El cliente recibe la respuesta y puede utilizarlo.

Serialización

La serialización es un proceso de calificación de un objeto en un medio de almacenamiento ya sea un archivo o un buffer de memoria con el propósito de mandarlo a través de un conexión de red como cadenas de bytes o un formato mas legible como XML.

Esta es una forma muy común de para pasar objetos a través de la red, para hacer persistente un objeto en un archivo o base de datos, o para distribuir objetos idénticos a varias aplicaciones.

Algunas ventajas son:

Un método para checar el cambio en variables con respecto al tiempo

Un método de persistencia de objetos

Un método para la distribución de objetos.

Socket

El socket es concepto abstracto en el cual dos programas programas pueden pasarse datos de manera ordenada.

Un socket se constituye de dos direcciones, una IP y una REMOTA, un protocolo de transporte un par de números de puerto local y remoto.

Los sockets permiten implementar un cliente-servidor. La comunicación debe ser iniciada por uno de los programas que se denomina programa cliente y el segundo programa se mantiene esperando a que el programa cliente inicie por eso se llama servidor.

En mi proyecto

En mi proyecto puedo implementar un pequeño ejemplo que utilicé algunos de estos métodos, lo que se me ocurre es que varias personas puedan dibujar online al mismo tiempo, para esto quiero utilizar algunas propiedades de Javascript y HTML5 como son los socket utilizando Websockets y la serialización :

"Con HTML5 contamos con una nueva técnica para almacenar datos persistentes en el navegador cliente. Cuando HTML5 esté ampliamente extendido podremos hacer uso del API DOM Storage de HTML5 con el cúal los datos persistirán entre sesiones sin tener que usar las limitadas cookies (4KB por cookie). Con el API DOM Storage y los métodos JSON#stringify y JSON#parse podremos almacenar objetos complejos de un modo muy sencillo."

Este es un ejemplo de página en donde varias personas pueden dibujar online:

http://william.hoza.us/graffiti/

Bibliografía

http://es.wikipedia.org/wiki/Sistema_distribuido
http://es.wikipedia.org/wiki/Serializaci%C3%B3n
http://www.inmensia.com/blog/20110125/html5_web_sockets.html
http://notasweb.com/articulo/javascript/persistencia-de-objetos-javascript-en-html5.html

Diseño de pruebas unitarias

Semana 11

Clase de Programación Orientada a Objetos

Una prueba unitaria es la manera de probar el buen funcionamiento de un módulo de código. Esto sirve para asegurar que cada uno de los módulos funcione correctamente independientemente uno del otro.

El objetivo es escribirle casos de prueba a cada método en el módulo de forma que cada caso sea independiente de lo demás.

Las pruebas unitarias sirven para utilizar otro código fuente llamado directamente a los métodos de una clase, pasando los parámetros necesarios y después, si se incluyen instrucciones Assert se pueden comparar valores esperados, los métodos de las clases unitarias se basan en clases Test, que se almacenan en archivos de código fuente.

Características de las pruebas unitarias

Las pruebas unitarias deben cumplir con los siguientes requisitos para que sean buenas:

• Automatizable: Es decir no se debería hacer manualmente.
• Completas: Deben de contener la mayor cantidad de código.
• Repetibles: Se deben crear pruebas para ejecutarlas varias veces.
• Independientes: La ejecución de una prueba no tendrá nada que ver con la ejecución de otra prueba, deben ser independientes.
• Profesionales: Las pruebas deben ser tomadas en cuenta con la misma importancia que el código, con documentación, etc.
  

Ventajas
El objetivo de las pruebas unitarias es aislar cada parte del programa y probar su correcto funcionamiento, estas pruebas individuales proporcionan 5 ventajas básicas:

• Fomentan el cambio: Facilitan al programador encontrar errores para así poder reeprogramar el código.
• Simplifica la integración: Ya que si el código funciona correctamente indivdualmente se facilita más adaptarlo para las pruebas de integración.
• Documenta el código: En dónde las propias pruebas unitarias son documentación del código ya que se puede ver como utilizarlo.
• Separa la interfaz y la implementación
• Los errores son más fáciles de encontrar

Limitaciones

Se debe de saber que las pruebas unitarias no descubrirán todos los errores del código. Ya que sólo prueban unidades por si solas. Entonces no son capaces de descubrir errores de integracion, problemas de rendimiento, entre otros.

Pruebas Unitarias para mi Proyecto en Javascript y Html5

Para esto lo primero que hice fue descargar JsUnit:

después descomprimimos el "jsunit2_2.zip", ahora dentro de la carpeta descomprimida tenemos varios archivos y carpetas interesantes por ejemplo: tenemos una carpeta llamada "tests" con muchos ejemplos útiles que podemos correr, y tenemos el archivo llamado "testRunner" que es en dónde probaremos nuestro código.
"testRunner.html"

Carpeta "tests"

Después también encontré otra herramienta para pruebas unitarias que me ha gustado un poco más se llama Qunit, y es muy fácil de intalar solamente se tienen que descargar dos archivos uno .js y otro .css para poder ver el resultado de tus pruebas unitarias.

Así es como se ve:

Y en la siguiente entrada aplicaré estos conceptos a mi proyecto.


JsUnit:
http://www.jsunit.net/

Bibliografía:
http://es.wikipedia.org/wiki/Prueba_unitaria
http://msdn.microsoft.com/es-es/library/ms182517(v=vs.80).aspx

Implementación de pruebas unitarias

Semana 11
Taller de Programación Orientado a Objetos

Para empezar les voy a mostrar un ejemplo de pruebas unitarias que lo que hace es verificar si el valor es un string o un número:

El código:

La prueba:





Y en mi proyecto hicé esta pequeña prueba que decia si el objeto devuelto era el esperado, como líneas, círculos...etc.
Este es el código:




Y esta es la prueba:



Podemos ver que todas pasaron a prueba sólo en el módulo 4 no dónde se esperaba un valor de retorno de false y llegó true.

Saludos.

Identificación de eventos, excepciones y errores

Semana 10
Clase Programación Orientada a Objetos

Excepciones

El manejo de excepciones es una estructura de control en la programación creada para manejar situaciones anormales que pueden ser tratadas por el mismo programa que se desarrolla.

Es decir un programa podría admitir cierta cantidad de errores y continuar su proceso produciendo el mejor resultado que le es posible en vez de una salida desagradable que este llena de mensajes que puede que el usuario no entienda.

Muchas veces se soluciona con algún mensaje informativo y se termina; otras veces es una indicación de que se necesita cambiar la forma de resolución del problema.

Muchos lenguajes incluyen el manejo de excepciones, y javascript no es la "excepción".

Las excepciones son imprevistos que ocurren durante la ejecución de un programa.

Su objetivo, es separar el código para manejar errores de la lógica de aplicación del programa. Cuando ocurre una excepción lo que se hace es seguir la ejecución del programa hasta encontrar algo que maneje esa excepción, el cual en ese momento tomará el control de la aplicación.

En Javascript, manejar errores resulta muy necesario ya que presenta dificultad natural para testear aplicaciones. Por lo generar los errores en Javascript son poco informativos, especialmente en IE. Por lo que es muy interesante contar con operadores que permiten lanzar nuestros propios y particulares mensajes indicando que algo salió

mal.

Las excepciones pueden hacerse con:

Throw

La manera mas sencilla de lanzar errores es utilizando throw. Este comando nos permite mandar al navegador un evento similar al que ocurre cuando pasa algo imprevisto o hay un tipo inesperado de datos. El lenguaje permite enviar todo tipo de elementos, incluyendo texto, números, valores booleanos o incluso objetos. Pero la opción más usual es enviar el objeto nativo Error.

Try/Catch

Es una estructura en javascript que permite comprobar el flujo de un programa con comportamientos inesperados. La diferencia entre throw y try/catch es que throw detiene completamente la ejecución mientras que catch realiza una acción determinada frente a los errores para proseguir después con el flujo definido.

Este tipo de excepciones se estructuran con un código que evalúa una condición previa y propone una ejecución predefinida y otra alternativa frente a anormalidades.

En mi proyecto...

He estado pensando mucho las excepciones que podría manejar mi proyecto sin embargo me ha sido muy difícil pensar en alguna puesto que aun no llego a un punto avanzado de mi proyecto, se me viene a la mente quizá cuando el usuario quiera usar una fotografía de algún álbum de un amigo y que al momento de cargar el álbum por paint la foto aún este ahí pero a la hora de seleccionar esa foto en partícula ya no este entonces obviamente javascript ya no podrá acceder a ella, ya que no se encuentra en la memoria, pero me resulta difícil comprobar si de verdad pasaría eso, o si son excepciones que facebook ya maneja por defecto.

Entonces he pensado en esta otra, es una excepción para cuando el navegador web no soporta el elemento "canvas", entonces se mandaría un mensaje al usuario sugiriendo que utilicé otro navegador como Chrome o algo así.

Errores

Los errores comunes en javascript pueden ser "errores de ejecución" que ocurren cuando se están ejecutando los scripts, por ejemplo la llamada a alguna función que no ha sido definida.

La otra forma en la que Javascript muestra un error puede variar de un navegador a otro. En versiones antiguas algunos navegadores como IE y Netscape lanzaban al usuario una ventanita con el error y un botón de aceptar. En la actualidad estos errores se mantienen más ocultos para el usuario, ya que es molesto que salgan esos mensajes de error cuando puede ser que el usuario no se de cuenta de que estén ocurriendo.

Se pueden tratar también con try/catch.

En mi proyecto...

Una aplicación para mi proyecto podría ser cuando el usuario entró a la aplicación con acceso a internet, pero después dejo de tener acceso a internet, entonces la aplicación web que funciona cuando se tiene internet dejará de funcionar. Esto lo podré detectar con un script en Javascript que comprueba la conexión a internet queriendo cargar una página confiable tipo "wikipedia" o "google".

Otro enfoque de errores en mi código Javascript es un poco complicado ya que por ejemplo, cuando pruebo mi código y hay algún error el navegador simplemente no me muestra nada. Entonces tengo la opción de gestionar los errores utilizando el evento onerror que se lanza siempre que se produce un error en

el código Javascript.

Eventos

Los eventos es todo lo que permite la interacción con el usuario, se produce mediante la captura de eventos que se produce.

Los eventos se capturan mediante los manejadores de eventos, el proceso que se realiza se captura mediante funciones en Javascript que se llaman "manejadores de eventos"

Cuando un usuario visita una página web e interactúa con ella se crean eventos y con Javascript se puede definir que es lo que se quiere que ocurra cuando se producen los eventos.

Con los eventos podemos responder a las acciones de los usuarios. Ejemplos de manejadores de eventos:

• onAbort
• onBlur
• onChange
• onClick
• onDragDrop
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onError

Entre muchos otros.

En mi proyecto...

En mi proyecto estoy manejando ya varios eventos como:

• onMouseOver:Este evento me sirve para saber cuando se esta pasando el mouse dentro del elemento canvas.
• onMouseOut: Este manejado lo utilizo para saber cuando el mouse esta fuera del elemento canvas.
• onClick: Y este otro será quizá el evento más utilizado en el proyecto me indica cuando el usuario a dado algún click en el elemento canvas, así como en botones, radios, etc., etc.


Y me faltan implementar alguos otros como drag-and-drop

En la próxima entrada implementaré algo de código para cada evento, excepción y error.

Implementación de eventos, excepciones y errores

Semana 10

Taller de Programación Orientada a objetos

Excepciones

En este caso programé la excepción que había comentado en la entrada pasada, sobre si el navegador soporta el elemento canvas de html5, para esto voy a utilizar un try/catch

Esta es la manera en la que lo implementé en javascript:

<html>
<head>
<script>
try{
  document.createElement("canvas").getContext("2d");
  alert("HTML5 es soportado en tu navegador");
 } catch(e) {
  alert("HTML5 no está soportado en tu navegador");
 }
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>

Errores

En esta parte implemené un código que muestra un error cuando no hay conexión a internet, para hacerlo el script de JS lo que hace es tratar de cargar una página conocida como "google" o "wikipedia" y si no se cargan entonces esto quiere decir que no hay conexión a internet.

Y aquí esta el código en la función llamada "internet", en donde tengo una variable que se llama "imgsrc" que es la que obtiene una imagen de internet en este caso de google, la variable "img" que será tipo imagen, y contendrá la imagen en internet, entonces empieza el "try" que dice que se carga "img", pero si no sucede eso para esto esta el catch para mandar un mensaje que "no hay acceso a internet".

function internet(){

var imgsrc = 'http://www.google.es/intl/en_com/images/logo_plain.png';
var img = new Image();

try
{
 img.onload = function () {
 alert("Hay conexion a internet.");
 }
}
catch(err)
{
 alert("No hay acceso a internet");
}

img.src = imgsrc;
}

Eventos

En eventos tengo programado en mi canvas que se pueda saber cuando el mouse esta adentro del elemento o afuera, si hizó un click.

Esta es la parte en el documento html:

<canvas id="paint" width="700" height="500"
      onmouseover="mouseAdentro(event)"
      onmouseout="mouseAfuera(event)"
      onclick="click(event)">Navegador no soportado

Y la parte en javascript:

window.onload = function() {
canvas=document.getElementById("paint");
contexto=canvas.getContext("2d");
evento("clickkkk plis");
}

function evento(str) {
contexto.clearRect(0,0,canvas.width,canvas.height);
contexto.font="9pt Calibri";
contexto.textAlign="center";
contexto.fillText(str, 288, 100);
}

function mouseAdentro(evt) {
evento("estas adentro del canvas");

}

function mouseAfuera(evt) {
evento("estas fuera");
}

function click(evt) {
     var mouseX = evt.clientX - canvas.offsetLeft;
var mouseY = evt.clientY - canvas.offsetTop;
evento("estas clickeando " + mouseX + " " + mouseY);
if (!empiezo) {
    contexto.beginPath();
    contexto.moveTo(mouseX, mouseY);
    empiezo = true;
} else {
    contexto.lineTo(mouseX, mouseY);
    contexto.stroke();
}

}

Esto es todo, espero comenten.

Selección de patrones de diseño

Semana 9
Clase Programación Orientada a Objetos

Patrones de diseño

Los patrones de diseño representan una solución a problemas comunes en el desarrollo de softwares y al diseño de interfaces.

Son métodos probados efectivos en la revolución de problemas, reusables es decir que puedes ser utilizados para resolver problemas parecidos en circunstancias distintas, flexibilidad, estandarización y organización en el código, así como evitar la búsqueda de soluciones a problemas que ya fueron resueltos, entre otras ventajas más.

Categoría de patrones

• Patrones de arquitectura.-Tratan sobre la estructura fundamental de un sistema de software.
• Patrones de diseño.-Ayudan con la estructura de diseño de un sistema de software.
• Dialectos.-Son llamados de bajo nivel porque sirven para algún lenguaje de programación o entorno en especifico.
  

  • • 
      Además también existen los patrones de:
• Interacción: Ayudan con el diseño de interfaces web.

Plantillas de patrones

Son las características principales que describen a los patrones como: Nombre del patrón, Clasificación del patrón, Intención, También conocido como(otros nombres para el patrón), Motivación, Aplicabilidad, Estructura, Código ejemplo, Usos conocidos, entre otros.

Patrones GoF

Son clasificados de acuerdo a sus objetivos en estructurales, de comportamiento y creacionales.

• Estructurales: Estos patrones describen como relacionar clases y objetos para formar nuevas estructuras mas grandes y añadir funcionalidades.
• De comportamiento: Ayudan a definir la comunicación entre los objetos de un sistema.
• Creacionales: Hablan de la forma de como crear instancias de objetos su propósito es ocultar la manera en que se crea e inicializa un objeto.

Estructurales

• Adapter(Adaptador): Como su nombre lo dice se encarga de adaptar(en vez de tener que cambiar el código) por ejemplo algún código ya existente en nuestro programa a alguna librería.
• Bridge(Puente): Separa una abstracción de su implementación.
• Composite(Objeto compuesto): Deja tratar objetos compuestos como si fueran simples.
• Decorator(Envoltorio): Proporciona funcionalidades a una clase dinamicamente.
• Facade(Fachada): Proporciona una interfaz simple para acceder a un grupo de interfaces de un sistema.
• Flyweight(Peso ligero): Disminuye la repetición cuando muchos objetos poseen información idéntica.
• Proxy: Es como un intermediario que se encarga de llamar a el método de la clase real pero primero habiendo pasado por el mismo para asegurar que el que llama a el objeto realmente tiene permisos para realizar la acción.

De comportamiento

• Chain of Responsibility(Cadena de responsabilidad): Deja establecer la linea que necesitan llevar los mensajes para que los objetos sean capaces de realizar la tarea indicada.
• Command(Orden): Encapsulamiento de una operación en un objeto.
• Interpreter(Interprete): En un lenguaje, determina una gramática para dicho lenguaje, y las herramientas que se ocupan para interpretarlo.
• Iterator(Iterador): Deja recorrer objetos compuestos sin importar su implementación.
• Mediator(Mediador): Especifica como un objeto puede coordinar a objetos de diferentes clases, funcionando como un conjunto.
• Memento(Recuerdo): Es como un tipo "restauración del sistema".
• Observer(Observador): Establece dependencias entre objetos, así cuando un objeto cambia se mande un mensaje y se modifiquen los demás objetos relacionados.
• State(Estado): Deja que un objeto cambie su comportamiento cada vez que se modifique su estado interno.
• Strategy(Estrategia): Permite tener varios métodos para resolver un problema, y elegir en tiempo de ejecución el método adecuado.
• Template Method(Método plantilla): Determina en un procedimiento la estructura de un algoritmo, repartiendo en las subclases ciertos pasos.
• Visitor(Visitante): Define otras operaciones sobre una jerarquía de clases sin cambiar las clases sobre las que funciona.

Creacionales

• Abstract Factory(Fabrica abstracta): Deja trabajar con objetos de diferentes familias de manera que las familias no se mezclan entre ellas.
• Builder(Constructor y virtual): Separa el proceso de crear un objeto complejo, enfocando dicho proceso en un punto.
• Factory Method(Método de fabricación): Crea objetos de una clase de un subtipo determinado.
• Prototype(Prototipo): Se utiliza para "clonar" objetos.
• Singleton(Instancia única): Asegura que exista una instancia para una clase y la creación de una forma de acceso global a dicha instancia.

Patrones de diseño en mi Proyecto

*Prototype*

Que como ya lo describí anteriormente, este patrón permite "clonar" instancias de objetos creando nuevos objetos idénticos.

En mi proyecto el Editor de Dibujo lo utilizaría principalmente en la función "copiar" de mi programa. Cuando por ejemplo se selecciona algún objeto un circulo, cuadro, etc. y se quiere crear un objeto exactamente igual. Esa sería la función que yo le daría a el patrón Prototype.

Este patrón permite la creación del objeto en distintas variantes cuando el programa lo necesita, en donde el código que utiliza los objetos, solicitará una copia del objeto que necesite. La copia significa otra instancia del objeto, cada objeto prototipo debe implementar el método clone().

Los participantes

Prototipo: Declara una interfaz para la colación en sí.

ConcretePrototype: Implementa una operación de clonación en sí.

Cliente: Crea un nuevo objeto haciendo un prototipo para clonarse a sí mismo.

Ventajas

• Añadir y eliminar productos en tiempo de ejecución.
• Especificar nuevos objetos variando los valores.
• Especificar nuevos objetos variando la estructura.
• Reducción de subclases.
• Configuración de una aplicación con clases dinamicamente.

Aplicado a mi proyecto:

*Factory*
Este es un patrón de diseño que me podría servir para la creación de objetos de un tipo determinado, como las lineas, dibujo libre, cuadros, etc, etc.

Ventajas:

El principal beneficio de utilizar el patrón de la fábrica es que se puede desacoplar los objetos. Usando el método fabrica en lugar de la nueva palabra clave y una clase concreta que permite centralizar la creación de instancias de código en un solo lugar. Esto hace que sea mucho más fácil que cambiar las categorías, o asignar a clases dinámicamente en tiempo de ejecución. También permite una mayor flexibilidad a la hora de subclases.

Todos estos beneficios están relacionados con dos de los principios de diseño orientado a objetos: hacer que sus objetos están debidamente acoplados, y evitar la duplicación de código.

Desventajas:

Es tentador tratar de usar métodos de fábrica en todas partes, en lugar de los constructores normales, pero esto rara vez es útil. La mayoría de creación de instancias de clases es mejor hacerlo al aire libre, con la palabra clave new y un constructor. Esto hace que el código más simple y más fácil de seguir, en lugar de tener que localizar este metodo para ver qué clase se crea una instancia, se puede ver inmediatamente lo que se llama constructor. Pueden ser muy útiles cuando son necesarias, pero asegúrese de no abusar de ellos.

Diagrama de mi proyecto:


*Composite*

Y este patrón me parece que lo podría implementar en mi código en la parte en la que quiero seleccionar algún objeto u objetos que ya haya hecho, ya que la idea que tengo en mente es poder seleccionar ya hechas las figuras cualquiera de ellas, entonces si selecciono varias figuras para copiar todas se copien y se comporte como si fuera un solo objeto, pero que también se puedan separar.

Entonces tengo cada objeto por no repetir todos solo pongo tres que son Cuadrado, Triángulo y Circulo, en donde todos ellos forman un GrupoImagenes que a la vez varios o uno solo GrupoImagenes pueden formar un gráfico.

Este es el diagrama de mi proyecto:

Ventajas:

Mejora la realización de código y facilita la refactorización.

Los objetos compuestos son excelentes estructuras jerárquicas. Cada vez que se ejecuta una operación en un compuesto de alto nivel, que son esencialmente de realizar una búsqueda en profundidad sobre la estructura completa para encontrar los nodos. Es muy fácil añadir, eliminar y buscar los nodos dentro de la jerarquía.

Desventajas:

Puede afectar el rendimiento del programa por el hecho de que cualquier operación llamada en un compuesto se transmite a todos sus hijos, el rendimiento puede sufrir si la jerarquía es demasiado grande ya que no es muy obvio para un programador que el método topGallery.show () inicia un recorrido completo de un árbol.

*Memento*

Este es el ultimo del que hablaré y su uso es bastante obio y aplicable a mi proyecto al menos asi es como lo veo.

Este patron tiene como finalidad guardar un objeto en un momento dado pero de modo que se puedan recuperar los estados anteriores.

Ventajas
Es facil volver a estados anteriores o recientes.

Desventajas
Los mementos son costosos, es costoso crear los objetos Memento si se tiene que almacenar todas las partes del estado del Originator.



Sitios de referencia:

http://www.apwebco.com/gofpatterns/creational/Prototype.html
http://java.ciberaula.com/articulo/diseno_patrones_j2ee/

http://www.apwebco.com/gofpatterns/creational/Prototype.html

http://es.wikipedia.org/wiki/Composite_(patrón_de_diseño)

http://www.freewebz.com/amanecer/personal/papers/paper.memento.pdf

Incorporación de patrones de diseño

Semana 9
Taller de Programación Orientada a Objetos

Ahora la implementación en código de los patrones de Diseño que creo adecuados para mi proyecto, aunque no es definitivo que se queden en el código, ya que hay algunas cosas que me parecen mas sencillas si las implemento con mi propio código, pero usaré lo que mas me simplifique el código.

El patrón Composite

Este no es el caso de lo que dije arriba, ya que tenia solo pensado que quería poder agarrar las cosas individualmente ya después de haberlas hecho por ejemplo un circulo, una raya, etc., para poderlos mover, copiar, borrar pero no tenia ni idea de como, siento que este patrón me abrió bastante la mente.

Este es el diagrama:

Y este es el código:

#include "GrupoImagenes.js"
Grafico = function ()
{
 this._init ();
}
Grafico.prototype._init = function ()
{

}
Grafico.prototype.pintar = function ()
{

}
#include "Grafico.js"
GrupoImagenes = function ()
{
 this._init ();
}

GrupoImagenes.prototype = new Grafico ();
GrupoImagenes.prototype._init = function ()
{
 this.m_cantidad = "";
}

GrupoImagenes.prototype.pintar = function ()
{

}
#include "Grafico.js"
Triangulo = function ()
{
 this._init ();
}
Triangulo.prototype = new Grafico ();
Triangulo.prototype._init = function ()
{
 this.m_base = "";
 this.m_altura = "";
}
Triangulo.prototype.pintar = function ()
{

}

#include "Grafico.js"
Cuadrado = function ()
{
 this._init ();
}

Cuadrado.prototype = new Grafico ();
Cuadrado.prototype._init = function ()
{
 this.m_lado = "";
}
Cuadrado.prototype.pintar = function ()
{

}

#include "Grafico.js"
Circulo = function ()
{
 this._init ();
}

Circulo.prototype = new Grafico ();
Circulo.prototype._init = function ()
{
 this.m_radio = "";
}

Circulo.prototype.pintar = function ()
{ 
}

Patrón Factory
Bueno el Patrón Factory lo elegí porque me permite hacer muchos objetos que es lo que necesito para mi editor de dibujo, pero es importante para mi aclararles que la verdad me revuelve un poco esta manera de crear objetos a como yo los creaba antes, entonces el código aquí esta, sin embargo, no es seguro que sea el definitivo, esto es en el caso de Factory.
Este es el diagrama:

Y este es el código:

//parte de codigo
#include "Factory.js"
Factory = function ()
{
 this._init ();
}
Factory.prototype._init = function ()
{
}
Factory.prototype.crearCirculo_Circulo = function ()
{

}
Factory.prototype.crearRectangulo_Rectangulo = function ()
{

}
Factory.prototype.crearLinea_Linea = function ()
{

}
Factory.prototype.crearPoligono_Poligono = function ()
{

}

#include "Factory.js"
#include "Circulo1_Concreta.js"
#include "Linea1_Concreta.js"
#include "Poligono1_Concreta.js"
#include "Rectangulo1_Concreta.js"

FactoriaConcreta_1 = function ()
{
 this._init ();
}

FactoriaConcreta_1.prototype = new Factory ();
FactoriaConcreta_1.prototype._init = function ()
{

}
FactoriaConcreta_1.prototype.crearCirculo_Circulo = function ()
{

}
FactoriaConcreta_1.prototype.crearRectangulo_Rectangulo = function ()
{

}
FactoriaConcreta_1.prototype.crearLinea_Linea = function ()
{

}
FactoriaConcreta_1.prototype.crearPoligono_Poligono = function ()
{

}

Patrón prototype
Este es otro más que me parece adecuado para mi para que a la hora que se quieran copar los objetos se haga de manera eficiente.

Este es el diagrama:


Y este es el código:

//parte de codigo
#include "FigGeom.js"
Dibujo = function ()
{
 this._init ();
}
Dibujo.prototype._init = function ()
{

}
Dibujo.prototype.dibujar = function ()
{

}
Dibujo.prototype.rellenar = function ()
{

}
Dibujo.prototype.agregarClick = function ()
{

}
#include "FigGeom.js"
Circulo = function ()
{
 this._init ();
}

Circulo.prototype = new FigGeom ();

Circulo.prototype._init = function ()
{
}
Circulo.prototype.clone = function ()
{

}

FigGeom = function ()
{
 this._init ();
}
FigGeom.prototype._init = function ()
{

}FigGeom.prototype.clone = function ()
{

}

#include "FigGeom.js"

Ovalo = function ()
{
 this._init ();
}

Ovalo.prototype = new FigGeom ();
Ovalo.prototype._init = function ()
{

}
Ovalo.prototype.clone = function ()
{

}

Demostraciones de avance parcial

Taller de Programación Orientada a Objetos
Semana 8

Primero que nada les mostrare mi código html, que consta de una lista a seleccionar que formará el menú y las herramientas, por ahora menú solo contiene las opciones para dibujar lineas, libre, rectángulos y la opción herramientas contiene guardar, nuevo, salir y exportar, también contiene el elemento canvas que esta formado de 700 por 500 pixeles, y le activo los eventos de el mouse para cuando se pase por encima de el "onmouseover", "onmouseout" y "onclick" a cada uno le puse el nombre de la función mouseAdentro, mouseAfuera y click, lo que hace cada uno es detectar cuando el ratón pasa por el canvas.

Por ahora están juntos el css y el html.

Este es el código html:

Ahora les muestro mi código en javascript, por ahora esta muy simple ya que solo detecta los movimientos de mouse con las funciones ya mencionadas, y hace lineas simples aunque aun no de la forma que quisiera, este es el código:

var canvas=null;
var contexto=null;
var empiezo = false;
var guardo = new Array();

window.onload = function() {
 canvas=document.getElementById("paint");
 contexto=canvas.getContext("2d");
 evento("clickkkk plis");
}

function evento(str) {
 contexto.clearRect(0,0,canvas.width,canvas.height);
 contexto.font="9pt Calibri";
 contexto.textAlign="center";
 contexto.fillText(str, 288, 100);
}

function mouseAdentro(evt) {
 evento("estas adentro del canvas");
 
}

function mouseAfuera(evt) {
 evento("estas fuera");
}

function click(evt) {
       var mouseX = evt.clientX - canvas.offsetLeft;
 var mouseY = evt.clientY - canvas.offsetTop;
 evento("estas clickeando " + mouseX + " " + mouseY);
 if (!empiezo) {
     contexto.beginPath();
     contexto.moveTo(mouseX, mouseY);
     empiezo = true;
 } else {
     contexto.lineTo(mouseX, mouseY);
     contexto.stroke();
 }

}

function nuevo(){
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 500, 500);
}

Las partes más importantes del código considero que son la función click ya que es la encargada de hacer las lineas al sentir el evento de click, tiene un booleano que es el que ayuda a identificar si es la primera vez que se esta haciendo la linea o no,

otra función es la de nuevo,que se encarga de limpiar todo el canvas de una manera muy simple, dibuja un rectangulo blanco en todo el área del canvas, y aun tengo en el código una función que me imprime las coordenadas del mouse, esto es solo como prueba aún.

Ahora unas capturas de pantalla:

Así es como se ve el editor de dibujo:



El menú:



Las herramientas:

Presentación diagramas UML

Semana 8
Clase Programación Orientado a Objetos

Diagramas UML

View more presentations from cecyurbina.

Creo importante mencionar que durante la semana cambie el diagrama de secuencia, debido a algunas sugerencias que recibí:



Bueno todo lo demás quedo aclarado en la presentación en clase. Saludos

Código autogenerado y comparación

Semana 6

Taller Programación Orientado a Objetos

Primero que nada creo que es importante mencionar que los diagramas que mostré en la entrada pasada fueron hechos por mi, no fué un diagrama autogenerado ya que mi proyecto esta basado en Html5 y Javascript y aunque encontré una herramienta en Eclipse para hacer código en Javascript este no soporta las etiquetas de Html5 es por esta razón que yo hice los diagramas a mano y por la misma causa no se podrá generar código en Html5 así que mostraré primero que nada como es que utilicé las herramientas para generar los diagramas, y por ultimo autogenerar el código.

Diagrama de clase


Lo cree con Umbrello, que es una herramienta para crear diagramas UML que ayudan en la creación de un software, se pueden hacer los diagramas manualmente o importarlos de códigos como Java, Python, C++, Javascript entre otros y viceversa es decir ya creado el diagrama pasarlo al código correspondiente.

El diagrama de clase que muestro en la presentación lo realicé en una aplicación online http://www.gliffy.com/ , es bastante cómodo de usar aunque se utiliza simplemente para representaciones gráficas con el no sería posible generar un código a partir del diagrama.

Diagrama de secuencia
El diagrama de secuencia lo genere en dos distintos sitios online http://www.websequencediagrams.com/ en donde a partir de esta entrada:

se genera el siguiente diagrama:



y también hice uno en http://www.gliffy.com/ que es el que muestro en la presentación


Codigo autogenerado
El codigo lo autogenere en Umbrello a partir del diagrama de clases, una vez que se tiene el diagrama:

nos tenemos que ir a la pestaña de Code y luego en Generated All Code, una vez que se hicieron estos pasos aparecerá una ventana diciendonos que no encuentra la carpeta llamada "uml-generated-code" que debe de estar en /home/ubuntu/, entonces en el terminal creo la carpeta con ese nombre:

ubuntu@ubuntu:~$ mkdir uml-generated-code

Y ahora si no tendremos problemas para generar el código.
Aquí estan algunas capturas de pantalla:

Aqui podemos elegir el lenguaje al que se quiere hacer el código

Estos son los archivos generados en la carpeta que acababamos de crear

Esta es una parte de código generado en C++ para la clase dibujo:
dibujo.cpp

#include "Dibujo.h"

// Constructors/Destructors
//

Dibujo::Dibujo ( ) {
initAttributes();
}

Dibujo::~Dibujo ( ) { }

//
// Methods
//


// Accessor methods
//


// Other methods
//

void Dibujo::initAttributes ( ) {
}

dibujo.h

#ifndef DIBUJO_H
#define DIBUJO_H

#include 
#include vector



/**
* class Dibujo
*
*/

class Dibujo
{
public:

// Constructors/Destructors
//


/**
* Empty Constructor
*/
Dibujo ( );

/**
* Empty Destructor
*/
virtual ~Dibujo ( );

// Static Public attributes
//

// Public attributes
//

int color;
int transparencia;
int coordenadaX;
int coordenadaY;
int grosor;

// Public attribute accessor methods
//


// Public attribute accessor methods
//


/**
* Set the value of color
* @param new_var the new value of color
*/
void setColor ( int new_var )   {
color = new_var;
}

/**
* Get the value of color
* @return the value of color
*/
int getColor ( )   {
return color;
}

/**
* Set the value of transparencia
* @param new_var the new value of transparencia
*/
void setTransparencia ( int new_var )   {
transparencia = new_var;
}

/**
* Get the value of transparencia
* @return the value of transparencia
*/
int getTransparencia ( )   {
return transparencia;
}

/**
* Set the value of coordenadaX
* @param new_var the new value of coordenadaX
*/
void setCoordenadaX ( int new_var )   {
coordenadaX = new_var;
}

/**
* Get the value of coordenadaX
* @return the value of coordenadaX
*/
int getCoordenadaX ( )   {
return coordenadaX;
}

/**
* Set the value of coordenadaY
* @param new_var the new value of coordenadaY
*/
void setCoordenadaY ( int new_var )   {
coordenadaY = new_var;
}

/**
* Get the value of coordenadaY
* @return the value of coordenadaY
*/
int getCoordenadaY ( )   {
return coordenadaY;
}

/**
* Set the value of grosor
* @param new_var the new value of grosor
*/
void setGrosor ( int new_var )   {
grosor = new_var;
}

/**
* Get the value of grosor
* @return the value of grosor
*/
int getGrosor ( )   {
return grosor;
}


/**
*/
void redibujar ( )
{
}


/**
*/
void rellenar ( )
{
}


/**
*/
void agregarClick ( )
{
}

protected:

// Static Protected attributes
//

// Protected attributes
//

public:


// Protected attribute accessor methods
//

protected:

public:


// Protected attribute accessor methods
//

protected:


private:

// Static Private attributes
//

// Private attributes
//

public:


// Private attribute accessor methods
//

private:

public:


// Private attribute accessor methods
//

private:


void initAttributes ( ) ;

};

#endif // DIBUJO_H

Código generado en Javascript para la clase Dibujo

/**
* class Dibujo
*
*/

Dibujo = function ()
{
this._init ();
}


/**
* _init sets all Dibujo attributes to their default value. Make sure to call this
* method within your class constructor
*/
Dibujo.prototype._init = function ()
{
/**
*
*/
this.m_color = "";
/**
*
*/
this.m_transparencia = "";
/**
*
*/
this.m_coordenadaX = "";
/**
*
*/
this.m_coordenadaY = "";
/**
*
*/
this.m_grosor = "";

/**Aggregations: */

/**Compositions: */

}

/**
*
*/
Dibujo.prototype.redibujar = function ()
{

}


/**
*
*/
Dibujo.prototype.rellenar = function ()
{

}


/**
*
*/
Dibujo.prototype.agregarClick = function ()
{

}

Y mi código de la clase Dibujo:

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

/**
*Esta es una clase hija de Dibujo(), se encarga de la estructura de las figuras geometricas
*@class
*@augments Dibujo
*/
function FigGeom (){
var relleno;
var contorno;
}
FigGeom.prototype = new Dibujo();

/**
*Esta es una clase hija de Dibujo(), se encarga de crear lineas de rectas y curvas.
*@class
*@augments Dibujo
*/
function Linea (){
var grosor;
}
Linea.prototype = new Dibujo();

/**
*Esta es una clase hija de Dibujo(),  define las caracteristicas y las funcionalidades del dibujo libre.
*@class
*@augments Dibujo
*/
function Libre (){
}
Libre.prototype = new Dibujo();


/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear un elipse.
*@class
*@augments FigGeom
*/
function Elipse (){
}

Elipse.prototype = new FigGeom();


/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear un rectangulos.
*@class
*@augments FigGeom
*/
function Rectangulos (){
}

Rectangulos.prototype = new FigGeom();

/**
*Esta es una clase hija de FigGeom(), define las caracteristicas y las funcionalidades de que se tendran al crear poligonos.
*@class
*@augments FigGeom
*/
function Poligonos (){
}

Poligonos.prototype = new FigGeom();

/**
*Esta es una clase hija de Linea(), define las caracteristicas y las funcionalidades de que se tendran al querer hacer una linea curveada.
*@class
*@augments Linea
*/
function Curva (){
}

Curva.prototype = new Linea();

/**
*Esta es una clase hija de Linea(), define las caracteristicas y las funcionalidades de que se tendran al querer hacer una linea recta.
*@class
*@augments Linea
*/
function Recta (){
}


Recta.prototype = new Linea();