Universidad Gerardo Barrio

Facultad:

Ciencia y tecnología

Alumno:

Nombre del docente:

Herbert Mauricio Leiva Rivera.

Carla Milagro López

Tarea:

Portafolio

Fecha de entrega

29-04-15

Principios de Usabilidad Web

Definición:

La usabilidad se considera como la capacidad que tiene el producto

software para permitir que los usuarios puedan realizar tareas

específicas de forma productiva, con efectividad, seguridad y

satisfacción.

El objetivo que tiene un producto software es que posea la calidad

necesaria básica para que satisfaga las necesidades de los usuarios.

Principios de Usabilidad Web

En el diseño de productos y software, los usuarios pagan de antemano y

experimentan la usabilidad después.

En la web, los usuarios experimentan primero la usabilidad y pagan

después.

Las expectativas infladas de los usuarios de la tecnología Internet

puede ser difícil de satisfacer.

Un sitio web puede atender una infinidad de perfiles de usuario.

Construir un sitio web orientado a audiencias no es fácil.

La mayoría de los sitios web requieren estar operativos en un corto

lapso de tiempo y esto dificulta el nivel de rigor de varias actividades del

proceso

Sitios Web – Situación Actual

Un sitio web es una entrada a la información de las organizaciones, sus

productos y servicios.

Debe ser un reflejo de las necesidades de los usuarios-clientes a

quienes sirve.

Pero el diseño y desarrollo web, generalmente es hecho en base a la

tecnología o estructura, objetivos del negocio; más que por lo que el

usuario necesita.

Recientemente han comenzado a comprender la importancia de la

usabilidad.

Sitios Web – Situación Actual.

Un sitio web es una entrada a la información de las organizaciones, sus

productos y servicios.

Debe ser un reflejo de las necesidades de los usuarios-clientes a

quienes sirve.

Pero el diseño y desarrollo web, generalmente es hecho en base a la

tecnología o estructura, objetivos del negocio; más que por lo que el

usuario necesita.

Recientemente han comenzado a comprender la importancia de la

usabilidad.

¿Cómo los usuarios utilizan la web?

No leen las páginas, las exploran.

No hacen elecciones óptimas.

No aprecian cómo trabajan las cosas.

5 características de la Usabilidad.

Facilidad de aprender.

Eficacia de uso.

Facilidad del sistema para ser recordado.

Frecuencia y severidad del error.

Satisfacción subjetiva.

Diseño Web Líquido o Fluído.

Liquid or fluid layout.

Una web tiene diseño líquido o fluído cuando su tamaño se ajusta a la

dimensión horizontal de la pantalla de forma automática y sin necesidad

de una barra de desplazamiento horizontal (scroll).

El diseño se expande al ancho disponible en la pantalla, porque el tamaño

de los distintos elementos es un porcentaje del total disponible de la

pantalla.

Diseño Web para Móviles

En el caso de crear un sitio web para ser accedido desde dispositivos

móviles o en pantallas pequeñas, se debe considerar un diseño y otros

aspectos como: la disposición de contenidos, cantidad de contenidos,

criterios de accesibidad, pero de imágenes y archivos.

Criterios de accesibilidad: menús y rutas de navegación

Seguridad de la información.

Conjunto de políticas, procedimientos, tecnologías y personas que

pretenden minimizar el nivel de riesgo de que sea comprometida alguna

de las características de la información.

Riesgo.

Probabilidad que tiene un activo de ser comprometido por parte de una

amenaza.

Características de la información

Bajo la perspectiva de seguridad de la información, las características

básicas son:

Autenticación.

Confidencialidad.

No Repudio.

Integridad.

Disponibilidad.

SEGURIDAD INFORMÁTICA.

Componente de la seguridad de la información definido como un

conjunto de políticas y mecanismos tecnológicos que pretenden

garantizar la confidencialidad, integridad y disponibilidad de los recursos

de un sistema informático.

VULNERABILIDAD.

Debilidad presente en un sistema informático que permite que sus

componentes y la información que procesa pueda ser comprometida.

Según la jerga de la seguridad informática una vulnerabilidad también es

conocida como un agujero de seguridad.

Amenaza.

Circunstancia o Evento que puede causar daño comprometiendo la

confidencialidad, integridad o disponibilidad de la información.

El termino hace referencia a un evento:

Infección por un virus de computadora.

Robo de información.

Terremoto.

Hackers.

El sustantivo hacker es un neologismo utilizado para referirse a personas

expertas en varias o una rama técnica relacionada con la informática

(programación, redes de computadores, sistemas operativos, hardware

de voz/datos, etc…).

A nivel tecnológico el termino hacking se usa para referirse al arte

informático de descubrir y solucionar problemas que atenten contra la

seguridad de un sistema o aplicación.

El sustantivo cracker (Criminal hacker) hace referencia a personas que

usan las técnicas de hacking con fines ofensivos.

LA CULTURA DEL HACKER

El hacker desea saber cada vez más.

Su obsesión por aprender es enfermiza.

Existen grandes comunidades a nivel mundial:

Grupos.

Foros.

Canales de chat.

Algunas motivaciones para los hackers:

Curiosidad.

Desafío.

Ideales.

Lucro.

Ganar respeto en la comunidad.

Tareas

PRINCIPIO DE USABILIDAD WEB.

Usabilidad En este artículo trataremos algunos de los conceptos que se

deberíentener en cuenta a la hora de realizar un sitio web.

Resumen: Aunque estos principios pueden parecer muy generales son la

base de la disciplina y de su extrapolaciónón y perfecta comprensaón

permite resolver cualquier casoíéticaconcreta.

El diseño de sitios web deben seguir los siguientes principios:

Anticipaciónón, el sitio web debe anticiparse a las necesidades del

usuario.

Autónomaía, los usuarios deben tener el control sobre el sitio web. Los

usuarios sienten que controlan un sitio web si conocen su situaciónón en

un entorno abarcable y no infinito.

Los colores han de utilizarse con precauciónón para no dificultar el

acceso a los usuarios con problemas de distanciaón de colores (aprox. un

15% del total).

Consistencia, las aplicaciones deben ser consistentes con las

expectativas de los usuarios, es decir, con su aprendizaje previo.

Eficiencia del usuario, los sitios web se deben centrar en la

productividad del usuario, no en la del propio sitio web. Por ejemplo, en

ocasiones tareas con mayor número de pasos son más rápidas de realizar

para una persona que otras tareas con menos pasos, pero más complejas.

Reversibilidad, un sitio web ha de permitir deshacer las acciones

realizadas

7. Ley de Bitsindica que el tiempo para alcanzar un objetivo con el ratoón

esta en funciaón de la distancia y el tamaño del objetivo.

A menor distancia y mayor tamaño más fácalidadpara usar un mecanismo

de interacciónón.

Reduceón del tiempo de latencia. Hace posible optimizar el tiempo de

espera del usuario, permitiendo la realizaciónón de otras tareas mientras

se completa la previa e informando al usuario del tiempo pendiente para

la finalizaciónón de la tarea.

Aprendizaje, los sitios web deben requerir un mínimo proceso de

aprendizaje y deben poder ser utilizados desde el primer momento.

El uso adecuado de metáformasfacilita el aprendizaje de un sitio web,

pero un uso inadecuado de estas puede dificultar enormemente el

aprendizaje.

La protecciónón del trabajo de los usuarios es prioritario, se debe

asegurar que los usuarios nunca pierden su trabajo como consecuencia de

un error.

Legibilidad, el color de los textos debe contrastar con el del fondo, y el

tamaño de fuente debe ser suficientemente grande.

Seguimiento de las acciones del usuario. Conociendo y almacenando

informaciónón sobre su comportamiento previo se ha de permitir al

usuario realizar operaciones frecuentes de manera más rápida.

Interfaz visible. Se deben evitar elementos invisibles de navegaciónón

que han de ser inferidos por los usuarios, menúús desplegables,

indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

a) Los usuarios deben ser capaces de alcanzar sus objetivos con un

mínimo esfuerzo y unos resultados máximos.

b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el

usuario comete un error el sistema ha de solucionar el problema, o en su

defecto sugerir varias soluciones posibles, pero no emitir respuestas que

meramente informen del error culpando al usuario.

c) En ningúnún caso un sitio web puede venirse abajo o producir un

resultado inesperado. Por ejemplo no deben existir enlaces rotos.

d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un

sitio web es un téreinopeligroso, cuantomayor sea el número de acciones

que un usuario pueda realizar, mayor es la probabilidad que cometa un

error. Limitando el número de acciones al público objetivo se facilita el

uso de un sitio web.

e) Los usuarios no deben sufrir sobrecarga de informaciónón. Cuando un

usuario visita un sitio web y no sabe dóndecomenzar a leer, existe

sobrecarga de informaciónón.

f) Un sitio web debe ser consistente en todos los pasos del proceso.

Aunque pueda parecer apropiado que diferentes áreas tengan diseños

diferentes, la consistencia entre los diseños facilita al usuario el uso de

un sitio.

g) Un sitio web debe proveer de un feedback a los usuarios, de manera

que éestossiempre conozcan y comprendan lo que sucede en todos los

pasos del proceso.

DISEÑO WEB LÍQUIDO O FLUIDO

Diferencias entre diseño líquido y diseño responsivo

Cada día accedemos más a internet a través de teléfonos y tabletas.

Cuando analizamos las métricas de nuestros clientes del sector de la

hostelería nos encuéntranos(mayo 2012) que aproximadamente el 40% de

las visitas a sus webs se realizan a través de teléfonos móviles. En

clientes más tradicionales observamos (octubre 2012) incrementos

mensuales del 19% en el acceso a su web con dispositivos móviles.

En España el 56% de los teléfonos móviles son Smartphone(somos el

segundo país del mundo con un porcentaje tan alto). En 2015 seremos uno

de los primeros paíseisdel mundo en donde habráá más accesos a

internet desde dispositivos móviles (Smartphoney tabletas) que desde

ordenadores de escritorio. Adaptar nuestras webs a las pantallas de los

dispositivos móviles resulta ya más que necesario.

Diseño líquido o fluido (liquid or fluid layout). Una web tiene diseño

líquido o fluido cuando su tamaño se ajusta a la dimensiónón horizontal de

la pantalla de forma automática y sin necesidad de una barra de

desplazamiento horizontal (scroll). El diseño se expande al ancho

disponible de la pantalla porque el tamaño de los distintos elementos

(div) es un porcentaje del total disponible (100%) de la pantalla.

El problema surge en pantallas muy grandes como por ejemplo una TV

Full HD de 1.920 x 1080 px porque el diseño se desajusta y aparecen

grandes espacios en blanco. Pero también sufren problemas las pantallas

con resoluciones inferiores a 1.024 px de ancho (tablets en posición

portrait y móviles en posición landscape) porque las imágenes se

miniaturizan y los textos se vuelven ilegibles. Si para evitar estos

problemas se fija un ancho mínimo aparecen las barras de scroll de

desplazamiento horizontal.

Retícula de diseño líquido o fluido

Como muestra la imagen, para obviar estos problemas los diseñadores

crean versiones de layouts según la pantalla donde se vaya a visualizar la

web: pantalla de televisión, ordenador de escritorio, tablet, móvil.

Layout con un ancho mínimo de 1.420 px para pantallas Full HD TV hasta

1.980 px

Layout con un ancho mínimo de 1.236 px y un máximo de 1.420 px para

ordenadores de escritorio con una alta resoluciónón de pantalla (por

ejemplo un iMac)

Layout con un ancho mínimo de 986 px y un máximo de 1.235 px para

ordenadores de escritorio normales

Layout para tablets con un ancho mínimo de 720 px en posiciónvertical

(portrait) y un máximo de 985 px para tablets en posición

horizontal(landscape)

El principal problema de un diseño líquido es el mantenimiento de

diferentes versiones de CSS. En una web con 16 páginas es más o menos

fácil. Pero un sietede comersecon más de 5.600 referencias vivas en

permanente actualizaciónón (alta y baja de productos, versiones de

color, tamaño, etc.) es realmente un suplicio.

Diseño responsiva. Se basa en la retícula (normalmente de 960 px de

ancho) que se divide en un número igual de columnas ya sean pares o

impares. Estas columnas pueden ser también eláséticas(un porcentaje del

ancho total) que hacen un ajuste aún más fino al dispositivo. La hoja de

estilos CSS3 define por medio de media quieresen queé pantalla se

visualizará la páGinaen función de una serie de parámetros como:

Ancho y alto de la ventana del navegador (width, high)

Orientaciónón del dispositivo (puede ser portrait o landscape, es decir

vertical u horizontal)

Aspect-ratio (proporciónón entre el ancho y el alto de la pantalla por

ejemplo 16:9)

Grid (número de columnas que muestra)

Resoluciónón del dispositivo (densidad de píxeles que muestra la pantalla)

Color (número de colores que representa la pantalla)

Hay cuatro parámetros más(monochrome, device aspect-ratio, color-

index, scan) que ayudan a definir con mayor exactitud el dispositivo

Responsivagrid

Responsivaweb designEn función del ancho de la pantalla del dispositivo

los bloques div se ordenan y jerarquizan, de tal manera que los elementos

que estamos viendo en la imagen superior se verían en un dispositivo

móvil en una columna ordenada en la que todos los elementos tendrían el

mismo ancho.

Las ventajas del diseño responsivoson:

Con una misma web (un sólo HTML y CSS) se cubren todas las

resoluciones de pantalla

Se reducen los costes de creaciónón y mantenimiento de una web, se

acorta el desarrollo

Optimizaciónón SEO, sólo hay una URL, se ahorran las redirecciones a

otros layouts (mobile.dominio.com)

Todos los usuarios disfrutan del mismo contenido (suele ser frustrante

obtener versiones light de las webs)

De esta manera el diseño responsivanos proporciona una visualizaciónón

controlada de la página, muy similar a la que nos ofrece el diseño de

ancho fijo.

DISEÑO WEB HIBRIDO

DISEÑO HÍBRIDO CON CSS

La maquetaciónón de una páginaweb utilizando hojas de estilo en cascada

(css) puede hacerse mediante diseños híbridos, es decir, combinando las

diferentes opciones de maquetaciónón con css:

Diseñosde ancho fijo (utilizan píxeles).

Diseñosde ancho variable, llamados diseños «líquidos» o «fluidos»

(utilizan porcentajes).

Diseñoseláéticos(utilizan «em»).

Los diseños híbridos combinan las tres opciones anteriores y representan

la mejor opciónón para que nuestros diseños sean compatibles tanto con

cualquier resoluciónón (tamaño) de pantalla como con cualquier tamaño de

letra. Al utilizar «em» y «porcentajes», ambas unidades relativas, para

las medidas de fuentes y cajas, cuando aumentamos o disminuimos el

tamaño de fuente en el navegador, o el tamaño de pantalla se

redimensiona automáticamente el tamaño de todos los elementos de la

página y se respeta nuestro diseño original.

Por tanto, este diseño es el ideal si pretendemos que nuestra «web» se

visualice correctamente en todo tipo de plataformas y/o dispositivos

(teléfonos móviles, celulares, ordenadores portátiles, ordenadores de

sobremesa, tabletas, etc.).

Por ejemplo, en un diseño híbrido con dos columnas, una de ellas se

expresará en porcentajes (%) para que se adapte al tamaño de la ventana

del navegador y la otra se expresará en «em» para que se adapte al

tamaño del texto.

DISEÑO WEB PARA MÓVILES

Cuando empiezas en el mundo del diseño web, tarde o temprano te

encontrarás con la necesidad de adaptar tus páginas web a los

dispositivos móviles. Actualmente cuando el número de usuarios que

navegan por internet a través de su Smartphoneha crecido

considerablemente respecto hace unos pocos años, es muy posible que un

cliente te pida adaptar su web para las pantallas móviles.

Esas capas de contenido e imágenes que diseñaste para tu última web y

que desde el navegador de tu ordenador se ve a las mil maravillas, se

descuadran o carecen de sentido en una pantalla de 320 pixeles.

Toca darle un repaso a tus hojas de estilo, a continuaciónón algunos

consejos y trucos útiles para subsanar esos posibles problemas y adaptar

el diseño de tu web, manos a la obra:

Media Quieres

Las media quieresincluidas en CSS3, te permiten filtrar estilos según

rangos de resoluciónón de pantalla en pixeles, pudiendo utilizar una media

query para los estilos específicos de tu web en la versión móvil.

Por ejemplo, dentro de un archivo.css podrías tener:

@media screen and (max-width: 490px) {

/*Estilos CSS que adaptan el diseño de tu web a dispositivos con

pantallas de un máximo

De490 pixeles de ancho */

}

De esta forma, estos estilos serian aplicados exclusivamente a los

dispositivos móviles sin la necesidad de cargar una hoja de estilo

adicional.

También podría utilizarse una media query para cargar un archivo css

solo para determinadas resoluciones, basta con añadir entre las

etiquetas

<Head></head>:

<link rel="stylesheet" type="text/css" media="only screen and (min-

device-width: 300px)

And(max-device-width: 480px)" href="movil.css" />

En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo

que se conecta a la web tiene una resoluciónón a lo ancho de entre 300 y

480 pixeles.

Utilizar medidas de tamaño relativas

Cuando colocas una imagen o cualquier otro elemento puede ser tentador

usar una medida en pixeles.

Estas visualizando la web en tu navegador de escritorio y defines un

imagen con una anchura de 700px, se ve perfectamente, pero puedes no

ser consciente de que con ese ancho la imagen se descuadra en la versión

adaptada para móviles de tu web, debido al menor ancho de pantalla.

Siempre que te sea posible, utiliza una medidarelativa, en vez de la

propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la

imagen utilizará para desplegarse el 50% del espacio disponible dentro

de la capa en que se encuentre, reduciéndose o adaptándose el tamaño de

la imagen automáticamente según el tamaño de la pantalla en la que se

visualice. Es una de las técnicas a seguir dentro de lo que se conoce como

responsivadesign.

Otra medida útil para definir el ancho y el alto es em, pues es

proporcional al tamaño de la fuente tipográfica que ve el usuario.

Herramientas para visualizar tu web en distintos dispositivos

Captura de pantalla de screenflyPara poder validar y visualizar el diseño

de tu web adaptado para distintas resoluciones de pantalla existen

herramientas como screenfly.

Introduciendo la URL de tu página podrás comprobar cómo se ve tu web

en multitud de dispositivos, distintas marcas de Smartphoney tablets.

Junto con el siempre imprescindible Firebug podrás editar los estilos y

comprobar en vivo cómo va quedando el diseño de la versión móvil de tu

sitio web.

Llevo un tiempo utilizando screenfly y el resultado ha sido satisfactorio,

pero existen otras alternativas interesantes como responsinator.

Aquíí termina la primera parte de esta mini-guía, la semana que viene

nosvemos en la segunda y última parte.

PATRONES DE DISEÑO CREACIONALES

Actionscript Masters Otros tutoriales por nestorrente.

Despuésés de la breve introducciónón a los patrones de diseño, llega el

momento de explicar los patrones de diseño creacionales.

Los patrones de diseño creacionales se centran en resolver problemas

acerca de cómo crear instancias de las clases de nuestra aplicaciónón. A

continuaciónón nos centraremos en cada uno de ellos.

Abstract Factory

El patrón Abstract Factory o Fábrica Abstracta resuelve el problema de

crear familias de objetos. Veamos un ejemplo típico de este patrón:

Imaginemos que estamos trabajando con Interfaces Gráficas de Usuario

(GUI). Pensemos que, en nuestro programa, tenemos las clases Ventana y

Botón. Pongamos, por ejemplo, que tenemos 2 interfaces diferentes: una

con colores claros y otra con colores oscuros.

Esto nos llevarívaa tener 4 clases:

Ventana Clara

Ventana OscuraBotonClaro

BotonOscuro

Cuando elusuario decida trabajar con colores claros, se deben crear

instancias de Ventana Claray BotonClaro. Sin embargo, si el usuario

decide utilizar la interfaz de colores oscuros, deberíamos crear

instancias de Ventana Oscuray BotonOscuro. La forma más básica de

hacerlo sería de esta manera:

Código :

// A la hora de seleccionar la interfaz

var GUI:String = "clara"; // u "oscura";

// A la hora de crear un botón

if(GUI == "clara"){

new BotonClaro();

}else if(GUI == "oscura"){

new BotonOscuro();

}

// A la hora de crear una ventana

if(GUI == "clara"){

new Ventana Clara();

}else if(GUI == "oscura"){

new Ventana Oscura();

}

Esto implicaría realizar una comprobación de la interfaz seleccionada

cada vez que se quiera crear una Ventana o un Boton.

La mejor opciónón en este caso sería utilizar el patrón Abstract Factory.

En este patrón se crean ciertas clases adicionales llamadas fábricas.

Estas clases son las encargadas de crear los diferentes tipos de

ventanas y botones. Veamos un ejemplo de su estructura:

Identifiquemos cada clase del diagrama con las clases de nuestro

Eejemplo:

Cliente: Parte del programa que utilizará las fábricas y productos. Podría

ser el archivo .fla principal, por ejemplo.

IProductoA: Interfaz que define un ejemplo de producto. Se

corresponderíacon la clase Ventana de nuestro ejemplo.

ProductoA1 y ProductoA2: Los diferentes tipos de ese producto.

Se corresponderían con la clases VentanaClara y VentanaOscura.

IProductoB: Interfaz que define otro ejemplo de producto. Se

correspondería con la claseBoton de nuestro ejemplo.

ProductoB1 y ProductoB2: Los diferentes tipos de ese producto. Se

corresponderían con la clases BotonClaro y BotonOscuro.

IFabrica: Interfaz que define las funciones de creación de productos. En

nuestro ejemplo podría llamarse InterfazGrafica y definiría las

funciones crearVentana():Ventana y crearBoton():Boton.

Fabrica1 y Fabrica2: Clases encargadas de crear los productos. En

nuestro ejemplo, serían InterfazClara (que crearía instancias de

VentanaClara y BotonClaro) e InterfazOscura (que crearía instancias de

VentanaOscura y BotonOscuro).

Cabe señalar que podría haber más tipos de productos (Ventana, Boton,

Icono, etc.) y más familias de estos (InterfazClara, InterfazOscura,

InterfazAzul, InterfazRoja, etc.).

Una vez utilizado el patrón, el código anterior quedaría así:

Código :

// A la hora de seleccionar la interfaz

var GUI:InterfazGrafica = new InterfazClara(); // o new

InterfazOscura();

// A la hora de crear un botón

GUI.crearBoton();

// A la hora de crear una ventana

GUI.crearVentana();

Según el tipo de InterfazGrafica instanciada, se crearán

ventanas/botones de un tipo u otro dinámicamente, sin necesidad de

comprobar a mano qué interfaz gráfica se está utilizando.

Builder

El patrón Builder o Constructor se utiliza cuandoqueremos crear un

producto que tiene diferentes partes. El siguiente ejemplo, basado en

este otro, lo ilustra mejor:

Imaginemos la cocina de una pizzería donde se hacen pizzas. Las pizzas

constan de varias partes (masa, salsa y relleno), y podríamos tener 2

cocineros, cada uno especialista en un tipo de pizza.

Esto nos llevaría a tener 5 clases:

Cocina

PizzaCocinero

CocineroHawai

CocineroPicante

En una situación como esta el patrón Builder nos puede ayudar. Veamos

un ejemplo de su estructura:

Identifiquemos cada clase del diagrama con las clases de nuestro

ejemplo:

Cliente: Parte del programa que utilizará el resto de clases. Podría ser el

archivo .fla principal, por ejemplo.

Director: Clase que decide qué constructor se utiliza y cuando se debe

construir el producto. Se correspondería con la clase Cocina de nuestro

Ejemplo.

IConstructor: Interfaz que define las funciones de creación de cada

parte del producto y la función de obtención del producto resultante. En

nuestro ejemplo se correspondería con Cocinero y definiría las funciones

hacerMasa():void, utilizarSalsa():void y hacerRelleno():void.

Constructor1 y Constructor2: Clases encargadas de crear las partes del

producto. En nuestro ejemplo, serían CocineroHawai y CocineroPicante.

Producto: Clase del producto en sí. Se correspondería con la clase Pizza

de nuestro ejemplo.

De esta manera, un posible código de este ejemplo sería el siguiente:

Código :

var cocina:Cocina = new Cocina();

// Decidimos que se crearán pizzas hawaianas

cocina.elegirCocinero(new CocineroHawai());

// Creamos la pizza

var pizzaHawaiana:Pizza = cocina.nuevaPizza();

El código de la clase Cocina podría ser algo así:

Código :

package {

public class Cocina {

private var cocinero:Cocinero;

public function elegirCocinero(cocinero:Cocinero):void {

this.cocinero = cocinero;

}public function nuevaPizza():Pizza {

cocinero.hacerMasa();

cocinero.utilizarSalsa();

cocinero.hacerRelleno();

}

}

}

Opcionalmente podría definirse un constructor para la clase Cocina que

recibiese el cocinero como argumento, ahorrando la llamada a

elegirCocinero().

Factory Method

El patrón Factory Method o Método de Fábrica es una simplificación del

patrón Abstract Factory. En un patrón Factory Method sólo existe un

producto, no una familia de ellos. Veamos unejemplo donde yo mismo he

utilizado este patrón:

Imaginemos que deseamos crear un juego estilo Tetris. En este juego

tendríamos diferentes tipos de piezas. Esto nos llevaría a tener una

clase por cada tipo de pieza:

PiezaL

PiezaT

PiezaI

...

Cada vez que se crea una pieza nueva, desearíamos seleccionar el tipo de

pieza de forma aleatoria. La forma más básica de hacerlo sería la

siguiente:

Código :

// Seleccionaríamos el tipo de pieza aleatoriamente

var tipo:uint = Math.random()*7; // 7 es el número de piezas diferentes

en el Tetris

// Creamos dicha pieza

switch(tipo){

case 1:

new PiezaL();

break;

case 2:

new PiezaT();break;

case 3:

new PiezaI();

break;

// ...

}

Sin embargo, sería mucho más sencillo poder hacerlo de una manera

parecida a esta:

Código :

// Seleccionaríamos el tipo de pieza aleatoriamente

var tipo:uint = Math.random()*7; // 7 es el número de piezas diferentes

en el Tetris

// Creamos dicha pieza

new Pieza[tipo]();

Para poder hacer algo así debemos utilizar el patrón Factory Method.

En este patrón se utilizan fábricas, al igual que en el patrón Abstract

Factory. Estas fábricas son las encargadas de crear los diferentes tipos

de piezas. Veamos un ejemplo de su estructura:

Identifiquemos cada clase del diagrama con las clases de nuestro

ejemplo:

Cliente: Parte del programa que utilizará las fábricas y productos. Podría

ser el archivo .fla principal, por ejemplo.

IProducto: Interfaz que define el producto. Se correspondería con una

clase Pieza en nuestro ejemplo.

ProductoA y ProductoB: Los diferentes tipos del producto. Se

corresponderían con la clases PiezaL, PiezaT y PiezaI.

IFabrica: Interfaz que define las función de creación del producto. En

nuestro ejemplo podría llamarse ICreador y definiría la función

crearPieza():Pieza.

FabricaA y FabricaB: Clases encargadas de crear los productos. En

nuestro ejemplo, serían CreadorL (que crearía instancias de PiezaI),

CreadorT (que crearía instancias de PiezaT), CreadorI (que crearía

instancias de PiezaI), etc.

Una vez utilizado el patrón, el códigoanterior quedaría así:

Código :

// Crearíamos una lista con todas las fábricas

var creadores:Vector.<ICreador> = new Vector.<ICreador>();

creadores.push(new CreadorL(), new CreadorT(), new CreadorI());

// Seleccionaríamos el tipo de pieza aleatoriamente

var tipo:uint = Math.random()*7; // 7 es el número de piezas diferentes

en el Tetris

// Creamos dicha pieza

creadores[i].crearPieza();

De esta manera no necesitaríamos un switch, sino que se crearía la pieza

a través del creador seleccionado.

Prototype

El patrón Prototype o Prototipo resuelve el problema de duplicar objetos

ya creados con anterioridad. Veamos un pequeño ejemplo de este patrón:

Imaginemos que tenemos un programa de dibujo por ordenador en el cual

podemos crear círculos y cuadrados. Cuando se crea un círculo, éste

tiene un radio de 50 píxeles y es de color rojo. Sin embargo, podemos

redimensionar el círculo y cambiar su color. Cuando se crea un cuadrado,

tiene 50 píxeles de lado y es de color azul. Hasta aquí todo perfecto.

Imaginemos ahora que el usuario decide crear un círculo y modifica su

color y tamaño. Acto seguido, el usuario decide hacer una copia de dicho

círculo. El código sería el siguiente:

Código :

var circuloNuevo:Circulo = new Circulo();

circuloNuevo.color = circuloExistente.getColor();

circuloNuevo.radio = circuloExistente.getRadio();

Uno de los problemas más inmediatos de hacerlo de esta manera es que,

si se añaden nuevos atributos a la clase Circulo, habría que modificar el

código en cada lugar donde se haya hecho una copia de un Circulo.

El patrón Prototype añade un método que permita crear una copia de un

objeto. Veamos un ejemplo de su estructura:

Identifiquemos cada clase del diagrama con las clases de nuestro

ejemplo:

Cliente: Parte del programa que utilizará lasfábricas y productos. Podría

ser el archivo .fla principal, por ejemplo.

IPrototipo: Interfaz que define el método clonar():IPrototipo. En

nuestro ejemplo podría ser una clase llamada IObjetoGrafico.

Prototipo1 y Prototipo2: Las diferentes clases que implementarán el

método de clonación. Se corresponderían con la clases Circulo y

Cuadrado de nuestro ejemplo.

Una vez utilizado el patrón, el código anterior quedaría así:

Código :

var circuloNuevo:Circulo = circuloExistente.clonar();

Si ahora quisiéramos añadir nuevos atributos a la clase Circulo, sólo

habría que modificar el método clonar():IPrototipo de la clase Circulo.

Por último, debe saberse que hay 2 tipos de clonación de objetos:

profunda y superficial. Imaginemos un objeto A que contenga una

referencia a un objeto B. Una clonación profunda haría que la copia del

objeto A referenciase a una copia del objeto B. Por el contrario, una

clonación superficial haría que la copia del objeto A apuntase al mismo

objeto B que el objeto A original. Esto se entiende mejor con este

ejemplo gráfico.

Singleton

El patrón Singleton se utiliza para no permitir que existan múltiples

instancias de una clase, sino solamente una. Veamos un pequeño ejemplo

de este patrón:

Imaginemos un programa que, al hacer click en un icono de ayuda, cree

una ventana nueva con los documentos de ayuda del programa.

Normalmente, si el usuario hiciese click en el botón nuevamente, se

abriría una nueva ventana, y así sucesivamente.

Sin embargo, podríamos desear que, si la ventana de ayuda ya ha sido

abierta, no se abra de nuevo. Para ello recurriríamos a un patrón

Singleton, que aseguraría la existencia de una única ventana de ayuda en

todo momento.

Veamos un ejemplo de la estructura del patrón Singleton:

Identifiquemos cada clase del diagrama con las clases de nuestro

Ejemplo:

Cliente: Parte del programa que utilizará las fábricas y productos. Podría

ser el archivo .fla principal, por ejemplo.

Singleton: Clase que se quiere instanciar una sola vez. Se corresponde

con la clase VentanaAyuda de nuestro ejemplo.

La forma de implementar el patrón Singleton en este ejemplo sería

dotando a la clase VentanaAyuda de un método estático

getInstancia():VentanaAyuda que comprobase si ya existe una instancia

VentanaAyuda o si, por el contrario, se debe crear. De esta manera, el

código para crear una nueva VentanaAyuda sería el siguiente:

Código :

var ayuda:VentanaAyuda = VentanaAyuda.getInstancia();

Sin embargo, debemos evitar que el usuario pueda crear instancias de

VentanaAyuda mediante el constructor new VentanaAyuda(). La forma

idónea de hacerlo es declarando el constructor como privado, de modo

que no pueda ser llamado desde fuera de la clase VentanaAyuda. El

problema es que ActionScript, de momento, no permite la declaración de

constructores privados. Podemos solucionarlo de la siguiente manera:

Código :

package {

public class VentanaAyuda{

// Esta variable guardará la única instancia de ésta clase

// que existirá en el programa

private static var instancia:VentanaAyuda;

// Ésta variable servirá para saber cuándo el constructor

// es invocado desde fuera de la clase

private static var llamadaInterna:Boolean;

// Constructor

public function VentanaAyuda(){

// Comprobamos si la llamada se ha producido

// desde fuera de esta clase

if (!llamadaInterna){

// Si se ha intentado instanciar la clase desde el

// exterior, la aplicación devolverá un error y no

// se creará ninguna instancia de VentanaAyuda.

throw new Error("Debes usar getInstancia()");

}

}

// Método que instanciará la clase una sola vez

public static function getInstancia():VentanaAyuda {

// Comprobamos si la instancia no se ha creado todavía

if (instancia == null) {

// Especificamos que la llamada

// al constructor es interna

llamadaInterna = true;

// Guardamos en la variable "instancia"

// una instancia de esta clase

instancia = new VentanaAyuda();

// Especificamos que las llamadas

// posteriores no serán internas

llamadaInterna = false;

}

// Por último, devolvemos la instancia existente

return instancia;

}

}

}

Observemos ahora el efecto que produciría este código de ejemplo:

Código :

new VentanaAyuda(); // Se devolvería un error y no se instanciaría la

ventana

VentanaAyuda.getInstancia(); // Se devolvería una nueva instancia de

VentanaAyuda

VentanaAyuda.getInstancia(); // Se devolvería la instancia ya existente

que se creó en la linea anterior.