proyecto desarrollo e implementaciÓn de avatares

TECNOLÓGICO NACIONAL DE MÉXICO

Instituto Tecnológico de Colima

VILLA DE ÁLVAREZ, COL., AGOSTO DE 2017

OPCIÓN XINFORME DE RESIDENCIA PROFESIONAL

QUE PARA OBTENER EL TÍTULO DE INGENIERA EN SISTEMAS COMPUTACIONALES

PRESENTAYULIANA LIZZET AGUILAR MORA

ASESORM. C. ANA CLAUDIA RUIZ TADEO

PROYECTO

ESTUDIAR PARA PREVERY PREVER PARA ACTUAR

S G C

S N E S T

IMNC-RSGC-617

IMNC-RSGC-617IMNC-RSGC-617

CERTIFICADO BAJO LANORMA ISO 9001:2008

CERTIFICADO BAJO LANORMA ISO 9001:2008

ISO 9001:2008

PROCESO EDUCATIVO

DESARROLLO E IMPLEMENTACIÓN DE AVATARESCONVERSACIONALES PARA LA ORIENTACIÓN

VOCACIONAL

Desarrollo e implementación de avatares conversacionales para la orientación vocacional

2

Agradecimiento

Agradezco principalmente a Dios por darme la paciencia y la capacidad de aprender todos los conocimientos de mis maestros. Agradezco a la maestra Ana Claudia Ruiz Tadeo por los conocimientos aportados la ayuda para la realización de la residencia, y a las maestra Alma Delia Chávez Rojas y Ramona Evelia Chávez Valdez, por su apoyo incondicional muchísimas gracias.


3

Agradecimiento ....................................................................................................... 2

Índice de Figuras ..................................................................................................... 4

Capítulo I: Introducción ........................................................................................... 5

1.1 Estudio de la Situación Actual .................................................................... 5

1.2 Justificación ............................................................................................... 5

1.3 Objetivos .................................................................................................... 5

1.3.1 General ................................................................................................... 5

1.3.2 Específicos ............................................................................................. 5

1.4 Planteamiento del problema ...................................................................... 6

1.5 Propuesta de solución................................................................................ 6

1.6 Alcances y limitaciones del proyecto ......................................................... 6

1.7 Estudio de la factibilidad ............................................................................ 7

1.7.1 Factibilidad económica ........................................................................... 7

1.7.2 Factibilidad técnica ................................................................................. 7

1.7.3 Factibilidad operativa .............................................................................. 8

1.7.4 Factibilidad legal ..................................................................................... 8

1.8 Análisis costo-beneficio .............................................................................. 8

1.8.1.-Gastos de Programación ........................................................................... 8

1.8.2 Costos aproximados del sistema ................................................................ 9

1.9. Análisis de requerimientos .......................................................................... 10

1.10.-Análisis de las alternativas ....................................................................... 11

1.11.-Ventajas competitivas............................................................................... 11

Capítulo II.- Fundamento Teórico .......................................................................... 11

2.1.- Sistemas CMS ........................................................................................... 11

2.2. ¿Qué es un agente inteligente o chatbot? .................................................. 12

2.3. ¿Qué es el aiml? ........................................................................................ 12

2.4 ¿Qué es php? .............................................................................................. 13

2.5 app server .................................................................................................... 13

Fig. 1.- Interfaz inicial de PhpMyAdmin. ......................................................... 14

2.6 Crazy Talk ................................................................................................... 14

2.7.- Metodología métrica. ................................................................................. 15

2.7.1 Objetivos de la metodología métrica. ....................................................... 16

2.7.2 Estructura de la metodología Métrica. ...................................................... 16

Fase 0: Plan de sistemas de información. ..................................................... 16

Fase 1: Análisis de sistemas. ......................................................................... 16

Fase 2: Diseño de sistemas. .......................................................................... 16

Fase 3: Construcción. .................................................................................... 16

2.7.2.1 Fase 0: Plan de sistemas de información. ............................................. 17

2.7.2.2 Fase 1: Análisis de sistemas. ................................................................ 17

2.7.2.3 Fase 2: Diseño de sistemas. ................................................................. 17

2.7.2.4 Fase 3: Construcción. ............................................................................ 18

2.7.2.5 Fase 4: Implantación. ............................................................................ 18

Capítulo 3.- Desarrollo .......................................................................................... 19

3.1 Fase 0: Plan de sistemas de información. ................................................... 19

3.2 Fase 1: Análisis de sistemas. ...................................................................... 20


4

3.3 Análisis de requerimientos ....................................................................... 20

3.4 Hardware: ................................................................................................ 20

3.5 Software: .................................................................................................. 20

3.6 Fase 2: Diseño de sistemas. .................................................................... 21

3.7 -Fase 3: Construcción. ............................................................................. 22

3.8 La información que se almaceno en el avatar fueron las siguientes preguntas con sus respectivas respuestas: ....................................................... 23

3.9 Instalación del Software técnico del avatar .............................................. 23

3.9.1 AppServer. ............................................................................................ 23

Crazy Talk ......................................................................................................... 27

3.9.3 Creación de la base de datos para el avatar ............................................ 31

3.10 Instalación de los programas ..................................................................... 34

Capítulo 4. – Conclusiones y recomendaciones ................................................... 34

4.1.-Conclusiones .............................................................................................. 34

4.2.- Cumplimiento de los objetivos. .................................................................. 35

4.3.- Sugerencias futuras .................................................................................. 35

Referencias Bibliográficas ................................................................................. 36

Anexos .............................................................................................................. 37

I. Código en php para la información adicional ........................................... 43

IV código para mandar llamar los objetos del avatar ..................................... 45

Índice de Figuras Figura 1 Requerimientos del sistema .................................................................... 10

Figura 2 Crazy Talk ............................................................................................... 15

Figura 3 Cronograma de actividades .................................................................... 19

Figura 4 casos de uso ........................................................................................... 21

Figura 5 casos de uso conversación ..................................................................... 21

Figura 6 Interfaz del Test de Instituto Tecnológico de colima .............................. 22

Figura 7 Información Adicional .............................................................................. 23

Figura 8 Acuerdo de Licencia................................................................................ 25

Figura 9 Elegir directorio de instalación ................................................................ 24

Figura 10 contraseña del root ............................................................................... 26

Figura 11 Terminación de instalación ................................................................... 26

Figura 12 AppServ configurado el PhpMyAdmin .................................................. 27

Figura 13 inicio de instalacion ............................................................................... 27

Figura 14 aceptar la licencia ................................................................................. 28

Figura 15 Datos del usuario .................................................................................. 28

Figura 16 Buscando el directorio de instalación .................................................... 29

Figura 17 instalando en c ...................................................................................... 29

Figura 18 Crazy Talk 6 .......................................................................................... 30


5

Capítulo I: Introducción

1.1 Estudio de la Situación Actual El Instituto Tecnológico cuenta con ferias profesiograficas, y una página web oficial en las cuales se muestran las carreras con las que cuenta y los objetivos de cada una de ellas. Sin embargo cuando los aspirantes a una carrera profesional deciden que estudiar, los espacios de atención vocacional son reducidos; la institución cuenta con el Departamento de Desarrollo Académico que se encarga de dicha orientación; el mecanismo es ingresar a la página www.itcolima.edu.mx y seleccionar el botón para ejecutar un breve cuestionario que orienta al aspirante hacia su posible vocación, cuando el aspirante ya es candidato oficial a ingresar a la Institución, de requerir atención, esta se hace más personalizada.

Se indagó en cuantas instituciones educativas de nivel superior y se detectó que el uso de estas tecnologías está ausente de sus procesos de orientación vocacional.

1.2 Justificación Este proyecto se justifica ya que existen las herramientas tecnológicas y computacionales para su desarrollo; se convierte en una herramienta innovadora, al incluir un Avatar en la realización de un cuestionario vocacional y favoreciendo así la utilización de los dispositivos auditivos y visuales de los candidatos a cursar una carrera profesional.

1.3 Objetivos

1.3.1 General Implementar un avatar que mediante un cuestionario determine la vocación profesional de los usuarios.

1.3.2 Específicos

• Investigar información del tema de agentes inteligentes • Análizar los requerimientos de información del sistema • Diseñar base de datos para almacenar los datos requeridos.


6

• Desarrollar el sistema avatar • Realizar pruebas con el sistema • Implementar el sistema conversacional

1.4 Planteamiento del problema El departamento de desarrollo académico del Instituto Tecnológico de Colima, realiza un análisis de orientación vocacional. Mediante un cuestionario tradicional con la finalidad de orientar a los aspirantes a cursar una carrera profesional de acuerdo a sus habilidades y competencias personales. Es un cuestionario que no cuenta con animación, ni tecnología actual y moderna.

1.5 Propuesta de solución Implementar un agente inteligente, que mediante un dialogo interactivo, permite apoyar a los usuarios a determinar su vocación profesional, es un sistema programado con un test de análisis vocacional que mediante preguntas y respuestas, ofrece la orientación que necesita los aspirantes a estudiar una carrera profesional. A su vez brinda información de las diferentes carreras que ofrece el ITC la cuales son:

• Ingeniería en Sistemas Computacionales. • Ingeniería Industrial. • Ingeniería en Mecatrónica. • Ingeniería Bioquímica. • Ingeniería Ambiental. • Ingeniería en Gestión Empresarial. • Ingeniería en Contaduría Pública. • Ingeniería Informática. • Arquitectura. • Licenciatura en Administración.

1.6 Alcances y limitaciones del proyecto El agente inteligente permitirá al Instituto Tecnológico de Colima, ser de las primeras instituciones que cuente con un avatar especialista en orientación vocacional, el


7

cual brinda información a los aspirantes y usuarios en general de la diferentes carreras que se ofrecen en él Instituto. El alcance del proyecto es muy extenso ya que se puede implantar en todos los departamentos del Instituto, y cada uno se le puede dar un enfoque diferente según sea el requerido.

1.7 Estudio de la factibilidad

1.7.1 Factibilidad económica El proyecto es económicamente factible, ya que los requerimientos para su desarrollo que se muestran en la Tabla 1 Costos del Proyecto fueron absorbidos por el programa de residencias, donde un estudiante desarrolla el proyecto. Además se cuenta con el equipo y no se genera ningún gasto externo.

1.7.2 Factibilidad técnica El proyecto es técnicamente factible, ya que el Instituto Tecnológico de colima, cuenta con el equipo necesario para su desarrollo (Software, Servidores, Computadoras, Servicio de internet), el residente, tiene el equipo de cómputo necesario, para el desarrollo y conocimientos en php, Macromedia, Dreamweaver, Crazy Talk, AppServer, Sistema operativo Windows XP o superior. Y así mismo se dejará un manual de instalación, para que cualquier programador con los conocimientos antes mencionados pueda modificar de acuerdo a las necesidades que el Instituto requiera. Además se anexarán todas las líneas de código que el sistema necesite.


8

1.7.3 Factibilidad operativa El proyecto es factible operativamente, ya que el usuario final al cual está dirigido requiere saber leer, escuchar y navegar en internet, además el avatar dará las instrucciones necesarias para su uso. Esta compuesto en dos partes, la realización de un test para saber a qué carrera es a fin el aspirante y en la otra página se encuentran los perfiles de cada carrera y sus diferencias unas de otras, como por ejemplo: Ingeniería en sistemas computacionales & Ingeniería en Informática.

1.7.4 Factibilidad legal El desarrollo de este proyecto cuentan con licencias originales, y en el caso que faltara software, la institución se responsabiliza de adquirir lo necesario para su desarrollo. En conclusión se puede afirmar que este proyecto es legamente factible para su implementación.

1.8 Análisis costo-beneficio Los beneficios serán intangibles ya que el sistema está aplicado en la web, y un servidor en el cual está montado para su funcionamiento. Al momento de ingresar a la página se desplegará la opción de avatar. Todo el equipo necesario para la realización de este sistema y puesta en operación del proyecto será otorgado por la Institución. A continuación se colocan los costos estimados del sistema

1.8.1.-Gastos de Programación

Los gastos de la etapa programación están basados en un salario de $50.00 pesos/hra. tomando en cuenta que se trabajan 8 hrs. al día. Mientras que las etapas de Análisis y diseño son consideradas a un costo de $55.00 pesos/hra, la


9

implementación en $30 pesos/hra. y finalmente, la documentación se definió a un costo de $25 pesos/hra.

1.8.2 Costos aproximados del sistema

Los costos aproximados del proyecto se muestran en la Tabla 1 en la cual se describen todos los gastos que se generaron en el desarrollo.

Tabla 1 Costos del proyecto MATERIALES

Descripción Cantidad Precio Unitario SubTotal Total Hojas Blancas 500 $0.08 $40.00 Plumas 4 $2.5 $10.00 Cartuchos 2 $200 $400.00 CD 3 $3.83 $11.49 Copias 100 $0.25 $25.00 Engargolados 3 $14 $42.00 Software cracy talk 1 $350.00 Total $878.49

GASTOS PROGRAMACION Cantidad Horas Precio Horas Subtotal Total Análisis (1 personas) 160 55 $8,800.00 Diseño (1personas) 120 55 6,600.00 Programación (1 personas) 480 50 24,000.00 Implementación (1 personas) 120 30 3,600.00 Documentación (1 personas) 80 25 2,000.00 Total Gastos de Programación $45,000.00

SERVICIOS Cantidad Meses Precio Meses Internet 6 400 $2,400

TOTAL DE COSTOS 48, 278.49


10

1.9. Análisis de requerimientos Para el desarrollo del proyecto se requirió información, la cual se obtuvo mediante investigaciones internas al Instituto Tecnológico. También se realizaron de acuerdo al equipo tecnológico que se necesitó. Para ello se requirió el siguiente material

Requerimientos Cantidad Descripción

1

Equipo de cómputo con las siguientes características mínimas:

Hardware: Procesador a 1.8 Ghz 1 Gb de memoria RAM Disco Duro de 120 GB Mouse Monitor Teclado Tarjeta de red Software: Sistema operativo Windows XP o superior Crazy Talk APPSERVER Macromedia Dreamweaver

1 paquete Hojas blancas 3 CD's 4 Plumas 2 Cartuchos

100 Copias 3 Engargolados 1 Servicio de Internet

Figura 1 Requerimientos del sistema


11

1.10.-Análisis de las alternativas Las alternativas para la solución del problema son: 1. Realizar el Agente Inteligente: en el Instituto Tecnológico de Colima, el cual

cuenta con personal capacitado para su desarrollo; 2. Que un estudiante de residencia profesional lo desarrolle. 3. Buscar programadores en el ramo de la Inteligencia Artificial y comprarles el

agente inteligente.

1.11.-Ventajas competitivas Una vez implantado el agente inteligente en la página oficial del Instituto, le brindará gran innovación, ya que ninguna escuela cuenta con un agente inteligente en sus páginas principales. Este tipo de proyectos es un atractivo tecnológico, ya que atraen la atención de los aspirantes a ingresar y a realizar el test vocacional para ubicar a cada alumno en la carrera correspondiente a su potencial personal.

Capítulo II.- Fundamento Teórico

2.1.- Sistemas CMS Es una filosofía del ciberespacio que devuelve el protagonismo a los usuarios y la homogeneidad a los contenidos sobre el diseño. Los portales dinámicos, los gestores de marcas o metadatos, hace posible la definición de un poderoso concepto del que se pueden destacar las características:

1. Sistemas de descriptores semánticos o de sindicación de contenidos (RSS) que permiten, mediante lectores de noticias, conocer las modificaciones y novedades en los contenidos de cualquier portal.

2. Dispositivos sencillos para el desarrollo de aplicaciones personalizadas, soportados por proveedores, en muchos casos gratuitos.

3. Sistemas de mezcla, captura, manipulación y difusión de contenidos

multimedia.


12

4. Los usuarios toman el control; deciden cuándo publicar y cómo hacerlo. La relevancia de la información está determinada por los propios destinatarios de la misma.

2.2. ¿Qué es un agente inteligente o chatbot? Un chatbot (o chatterbot, o chat bot) es un programa de ordenador diseñado para simular una inteligente conversación con uno o más usuarios a través de humanos o de texto de los métodos audio. Tradicionalmente, el objetivo de la simulación como ha sido la de engañar al usuario haciéndole creer que la producción del programa ha sido producido por un ser humano. Lo que distingue a un chatbot más sofisticados de procesamiento del lenguaje natural sistemas, es la simplicidad de los algoritmos utilizados. Los chatbots muchos veces parecen interpretar la entrada humana inteligente al generar sus respuestas, muchos simplemente una búsqueda de palabras clave en la entrada y tirar de una respuesta con la adecuación palabras clave, o la redacción patrón similar, la mayoría de un texto base de datos.

2.3. ¿Qué es el aiml?

AIML fue desarrollado por Richard Wallace y una mundial comunidad libre del software entre los años de 1995 y 2002. Formó la base para la cuál era inicialmente un prototipo llamado Eliza “A.L.I.C.E.“(“entidad lingüística artificial de la computadora del Internet”).

Una metodología tiene la finalidad de dirigir al desarrollador a una ruta racional, apuntando a las necesidades a satisfacer, en qué orden y cuánto tiempo debe tomar cada actividad.


13

2.4 ¿Qué es php?

(PHP Hypertext Pre-processor). Lenguaje de programación usado generalmente en la creación de contenidos para sitios web. Es un lenguaje interpretado especialmente usado para crear contenido dinámico web y aplicaciones para servidores. La interpretación y ejecución de los scripts PHP se hacen en el servidor, el cliente (un navegador que pide una página web) sólo recibe el resultado de la ejecución y jamás ve el código PHP. Permite la conexión a todo tipo de servidores de base de datos cmo MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite. PHP es una alternativa a otros sistemas como el ASP.NET/C#/VB.NET de Microsoft o a ColdFusion de Macromedia, a JSP/Java de Sun Microsystems, y a CGI/Perl

2.5 app server

AppServ es un programa que se integra a una serie de aplicaciones y utilidades, de manera que al instalarlo, no solo tendremos instalados todo esto, sino que, además estarán perfectamente configurados y listos para usarlos en cuestión de minutos, mientras que si tuviésemos que instalar por separado estos programas, deberíamos dedicarle mucho más tiempo a su correcta configuración.

• Apache • PHP • MySQL • phpMyAdmin

Apache es un servidor HTTP de código abierto disponible para plataformas Unix (BSD, GNU/Linux, etc.), Windows, Macintosh y otras. Esta aplicación es necesaria para montar un host local en el cual se apoyarán los demás programas que vamos a instalar.

PHP es un lenguaje de programación interpretado que se ejecuta del lado del servidor, es decir, al hacerle la petición de una página PHP al servidor, éste antes de enviársela al usuario, lo que hace es interpretarlo, traducirlo a html y, acto seguido enviarla al ordenador que ha realizado la petición.


14

MySQL es un sistema de gestión de bases de datos relacionales multiusuario que está desarrollada por la empresa Sun Microsystems. MySQL es un complemento perfecto para el desarrollo de sitios web dinámicos, como por ejemplo foros, ya que cada usuario podrá modificar el contenido de la página o simplemente ampliándolo.

phpMyAdmin es una utilidad adicional, y que, en absoluto es necesaria para el desarrollo de un sitio web dinámico que se sustente sobre una base de datos, pero facilita mucho la tarea, ya que nos permite administrar una base de datos sin necesidad de tener que recurrir a la escritura de líneas de comandos sobre la consola del equipo, ya que nos proporciona un entorno gráfico para ello, que además es bastante intuitivo

.

Fig. 1.- Interfaz inicial de PhpMyAdmin.

Fig: 1: PhpMyAdmin: es un manejador de base datos, en el cual crean tablas y realizas consultas para el sistema. Es una interface amigable.

2.6 Crazy Talk CrazyTalk es un software de animación facial, la cual permite que modifiques los puntos de la boca para que este pueda gesticular bien. Y puedes utilizar cualquier tipo de sonido. Inclusive grabar tu voz y acomodarla a la imagen que sea de tu elección.


15

Fig 2. Crazy Talk: Es la interfaz principal del programa Crazy Talk, cuando se termina de instalar esto es lo primero que verán en la pantalla

2.7.- Metodología métrica. Métrica es el método para el desarrollo de sistemas de información promovido por el Consejo Superior de Informática (CSI) constituye el marco general de referencia para toda administración, dentro del cual se deberían llevar a cabo los proyectos de desarrollo de sistemas de información. Métrica es producto del desarrollo de la línea estratégica del Consejo Superior de Informática (CSI) de “Mejora de la calidad y la productividad en el desarrollo de software”.

La principal característica de Métrica es su flexibilidad, ya que se adapta a gran variedad de sistemas y ciclos de vida. Su carácter público y abierto ha permitido su utilización en departamentos informáticos.

Figura 2 Crazy Talk


16

2.7.1 Objetivos de la metodología métrica.

A medida que crece el volumen de información a manejar aumenta la necesidad de disponer de una tecnología de la información que soporte dinámica y eficazmente el funcionamiento normal de los distintos departamentos que la constituyen. Dicho soporte ha de ser dinámico en el sentido de que debe adaptarse con facilidad a las condiciones, externas e internas, cambiantes de la organización por otra parte ha de ser eficaz y atenerse estrictamente a las necesidades del usuario. Los objetivos de la metodología Métrica versión 2.1 son crear un entorno que permitan al equipo de trabajo construir sistemas, que:

� Den solución a los objetivos considerados prioritarios en la

administración. � Se desarrollen cuando el usuario los necesite y de acuerdo con los

presupuestos y duración estimados. � De calidad que se mantengan fácilmente para soportar los cambios

futuros de la organización.

2.7.2 Estructura de la metodología Métrica. La metodología METRICA está destinada a las organizaciones como instrumento para la sistematización de la creación de software. Está adaptada a las nuevas tecnologías y garantiza los objetivos en términos de coste, calidad y plazo. Tanto al desarrollo de tipo estructurado como orientado a objetos, facilitando la gestión del proyecto, seguridad, calidad

Las fases en las que se divide Métrica versión 2.1 son:

Fase 0: Plan de sistemas de información.

Fase 1: Análisis de sistemas.

Fase 2: Diseño de sistemas.

Fase 3: Construcción.

Fase 4: Implantación


17

A continuación se describen con más detalle cada una de las fases de la Metodología.

2.7.2.1 Fase 0: Plan de sistemas de información.

La realización de un plan de sistemas de información dentro de cualquier organización tiene como finalidad asegurar la adecuación entre los objetivos estratégicos de la misma y la información necesaria para soportar dichos grandes objetivos. Estos objetivos son:

• Definir la información necesaria que se debe obtener con la realización de una metodología de planificación, en cuanto a objetivos estratégicos de la organización y factores críticos de éxito para satisfacer estos objetivos.

• Definir la arquitectura de la información.

• Definir los nuevos sistemas a desarrollar que permitan implantar dicha arquitectura. La información obtenida servirá de punto de partida para el desarrollo de cada uno de estos sistemas con Métrica versión 2.1.

2.7.2.2 Fase 1: Análisis de sistemas. El propósito de esta fase será, en primer lugar, describir el alcance, los objetivos y los requisitos del sistema. Basándose en todo esto, el equipo del proyecto puede examinar distintas alternativas que podrían solucionar el problema y recomendar una de ellas. Con la finalización del primer módulo de esta fase, Análisis de requisitos del sistema, se obtendrá, como producto final, un documento.

2.7.2.3 Fase 2: Diseño de sistemas. El propósito de esta fase de diseño de sistemas será obtener un conjunto de especificaciones físicas que constituirán el punto de partida para la construcción del sistema.

• Durante el desarrollo de las actividades definidas en esta fase, se deberá tener en cuenta el entorno tecnológico donde se implantará el sistema.


18

• En este aspecto especifico debe hacerse una adaptación muy especial de la fase métrica al entorno físico que posea

2.7.2.4 Fase 3: Construcción. El propósito de esta fase será construir el sistema partiendo del conjunto de especificaciones físicas del mismo, obtenidas durante la fase anterior.

Asimismo, se contemplara la realización de las pruebas necesarias para asegurar el perfecto funcionamiento de los programas desarrollados.

Durante esta fase se establecerá la estrategia para desarrollar los procedimientos de usuario y el plan de formación a usuarios, identificando los recursos para su realización.

2.7.2.5 Fase 4: Implantación. El propósito de la fase de pruebas e implantación es probar el equipo lógico, los procedimientos de usuario y la efectividad de la formación para que, una vez aceptado el sistema, pase a funcionar en un entorno real. El objetivo fundamental es conseguir la aceptación final del sistema por parte de los usuarios del mismo, para ello:

• Se combinarán por primera vez todo el equipo lógico y los procedimientos

para un trabajo del sistema real.

• Se realizarán las pruebas de aceptación, las cuales constituyen un procedimiento formal ejecutado por los usuarios que permite verificar que el sistema producido es totalmente funcional y satisface los requerimientos iniciales, como un paso previo a su implantación.


19

Capítulo 3.- Desarrollo

En el capítulo 3, se encuentra el desarrollo del sistema. Conforme a la metodología mencionada anteriormente, la cual se llevó acabo pasó a paso.

3.1 Fase 0: Plan de sistemas de información. El plan que se llevará a cabo se planteará en el cronograma de actividades, para realizarlas de acuerdo a las fechas establecidas.

Fig 3 Cronograma de actividades: se muestra el cronograma de actividades a realizar en el desarrollo del sistema.

Figura 3 Cronograma de actividades


20

3.2 Fase 1: Análisis de sistemas. Se desarrolló un avatar el cual brinda la información del Instituto Tecnológico de Colima. La función de este agente vocacional es realizar un tés a los aspirantes y arrojarles las carreras a las cuales son afines.

3.3 Análisis de requerimientos Para la programación, diseño, fue necesario el siguiente equipo y software. En el cual se especifican los requerimientos mínimos que tiene que tener el equipo para su utilidad.

3.4 Hardware: � Procesador a 1.8 Ghz � 1 Gb de memoria RAM � Disco Duro de 120 GB � Mouse � Monitor � Teclado � Tarjeta de red

3.5 Software: � Sistema operativo Windows XP o superior � Crazy talk � APPSERVER � Macromedia Dreamweaver

Actualmente el residente cuenta con el equipo necesario para su desarrollo y con los conocimientos necesarios para el desarrollo.


21

3.6 Fase 2: Diseño de sistemas. Figura 4 Casos de uso: se muestra el caso de uso donde el usuario solicita información a la página del Instituto Tecnológico de Colima e interactúa con el avatar.

Figura 4 casos de uso

Figura 5 casos de uso conversación


22

Figura 5 Casos de uso conversación: se muestra una interacción entre usuario-avatar el cual solicita saber el nombre del directo y el avatar manda una contestación mediante sonido y no en texto.

3.7 -Fase 3: Construcción.

Como ya sabemos la interfaz gráfica con el usuario es muy importante, debido a la comunicación que tienen. Una interfaz debe ser amigable, y tiene que usarse sin complicación alguna.

En el caso de la interfaz que se desarrolló tiene las funciones específicas que se solicitaron al inicio del proyecto.

Figura 6 Interfaz del Tes de Instituto Tecnológico de colima: se muestra la interfaz del orientador vocacional del Instituto Tecnológico de colima. Incluyendo la información del sistema como el agente vocacional, el cual tendrá dos botones para que el usuario proporcione la respuesta de sí o no.

Figura 6 Interfaz del Test de Instituto Tecnológico de colima


23

Figura 7 Información Adicional Figura 7 Información Adicional encontramos una interfaz semejante a la de la figura 6, en esta imagen se cambió el test, por información adicional, en la cual el usuario le dará clic y le aparecerá diferente información que podrá consultar con el avatar.

3.8 La información que se almaceno en el avatar fueron las siguientes preguntas con sus respectivas respuestas:

PREGUNTAS

3.9 Instalación del Software técnico del avatar

3.9.1 AppServer. Se selecciona el icono del instalador que adquirimos. Aparece la imagen que vemos en la Figura 1 Asistente de Instalación, recuerda que la versión puede ser más


24

nueva cuando tú intentes ; pero tranquilo se usará igual que como comento ahora. Debemos dar clic en el botón Next (Siguiente).

A continuación aparece una ventana como la que muestra la Figura 2 Acuerdo de Licencia, que habla sobre el acuerdo de uso de la licencia, ahí debemos dar clic en el botón nexy

En este punto, debemos elegir en cual de nuestros discos duros y en que carpeta vamos a instalar el AppServer; se sugiere que siempre sea en raíz como muestra la Figura 3 Elegir directorio de instalación. Una vez elegida la ruta, de clic en siguiente.

Figura 1 Asistente de Instalación

Figura 3 Elegir directorio de instalación


25

En este punto, Figura 4 Seleccionar Componentes, debemos elegir los componentes que vamos a instalar , aparecen marcados los cuatro elementos disponibles (apache, mysql, php, phpMyAdmin) si bien puedes desmarcar alguno, es mejor instalar todos para tener completo tu equipo de testeo y desarrollo Web, le damos clic en el botón Next (Siguiente)

En la ventana que muestra la Figura 5 Servidor de Información Apache HTTP, debes indicar el nombre del servidor y del correo electrónico del administrador del sistema, en mi caso dejo localhost y e-mail [email protected], respectivamente, el puerto 80. Recuerda que puedes dar siguiente y dejar lo que se sugiere sin problemas.

Figura 4 Seleccionar Componentes

Figura 5 Servidor de Información Apache HTTP


26

En la ventana que muestra la figura 6 es la Configuración Mysql, en este punto debemos prestar atención, ya que debemos indicar el Password, para el usuario principal de la base de datos, lo escribimos 2 veces. Por tanto el usuario será root, que es por defecto y Contraseña que acabas de escribir, eso lo usarás para abrir la base desde tus programas PHP, por eso es importante recordar. Le damos siguiente (Next)

En la figura 7 se culmina la instalación, como indica la imagen, podemos elegir si al finalizar ya comenzará a funcionar el Server Apache y el servidor de base de datos Mysql, lo dejamos marcado y le damos finalizar (Finish), listo hemos terminado.

Figura 6 contraseña del root

Figura 7 Terminación de instalación


27

En este punto si vas a tu navegador, puedes poner, http://localhost y debe mostrarse tal como muestra la figura 8

Crazy Talk Darle doble clic al instalador de Crazy Talk. Figura 13 Darle siguiente

Figura 8 AppServ configurado el PhpMyAdmin

Figura 9 inicio de instalación


28

Figura 14. Agregar la licencia dándole que si se acepta, a la instalación.

Figura 15: Añadir los datos del usuario y la compañía que lo vaya a utilizar, y el correo electrónico, se le da siguiente.

Figura 10 aceptar la licencia

Figura 11 Datos del usuario


29

Figura 16: Buscando la localización de donde se instalará el programa, en este caso fue C: Figura 17: Instalando en C:

Figura 18: Instalando todos los accesorios que necesita el programa para su funcionamiento.

Figura 12 Buscando el directorio de instalación

Figura 13 instalando en c


30

finalizando la instalación

Figura 14 Crazy Talk 6


31

3.9.3 Creación de la base de datos para el avatar Se realiza una base de datos en PhpMyAdmin la cual se llamará Avatar y a su vez las tablas que sean necesarias para el desarrollo del Orientador Vocacional.

En la tabla de preguntas se colocaran las preguntas para el test y la respuesta con el nombre que se hayan guardado en el Crazy Talk, se enumeraran en forma consecutiva para que al momento que se esté realizando el test, tenga una secuencia de las preguntas.

Numero: consecutivo para que tengan un orden. Pregunta: tal cual se guardó en el Crazy Talk. Carrera: a la cual corresponde según las preguntas


32

Posteriormente si se necesitan agregar más preguntas y respuestas en la parte superior se le da en insertar. Y abre una página en la cual se insertará el número siguiente, la voz y a la carrera que esta corresponda. Y se le dará continuar para guardar la información.

En la tabla Todas_preguntas, en esta se encuentra la información de los perfiles de las carreras con las que cuenta el Instituto Tecnológico de Colima, las diferencias de una carrera con otra y los horarios. Pregunta: es donde se colocará la información que será visible para el usuario final. Respuesta: en este se colocara la respuesta correcta a la carrera que se esté solicitando, este nombre tiene que ser tal cual se guardó en el Crazy Talk.


33

Para agregarle más información en la parte superior tiene una pestaña que dice Insertar se selecciona y se le agrega la información adicional que se vaya a necesitar.

Cuando se instaló el AppServer la ruta fue C:\AppServ\www. En esta ruta se abre la carpeta del WWW y creamos una nueva que se llame residencia_avatar, para que en esta carpeta se guarde toda la información de nuestro avatar.

En la carpeta de residencia_avatar se guardarán todas las voces de nuestro orientador vocacional, y las páginas realizadas para nuestro avatar


34

3.10 Instalación de los programas Se instalaron los softwares.

1. Tener instalado APPSERVER

2. Crazy Talk

3. Macromedia Dreamweaver.

Capítulo 4. – Conclusiones y recomendaciones

4.1.-Conclusiones

La realización de este proyecto fue una experiencia que me permitió transferir los conocimientos y habilidades que a lo largo de la carrera he acumulado. Con este proyecto puede darme cuenta a lo que me tengo que enfrentar al egresar.


35

4.2.- Cumplimiento de los objetivos.

El objetivo general se realizó al lograr realizar un avatar con el cual se pudieran tener conversaciones, el cual fue elaborado en AIML, Php, Crazy Talk, estos lenguajes.

• Recolectar información sobre los avatar implantados en escuelas. • Realizar un análisis de la manera en la que se debe integrar la información. • Realizar un análisis de la manera en la que se va mostrar la información al

usuario final.

Los objetivos fueron cumplidos ya que se realizó el avatar vocacional para la elección de una carrera y para brindar información necesaria del Instituto tecnológico de colima.

4.3.- Sugerencias futuras Una de las recomendaciones a futuro es que se puede mejorar el aspecto del avatar se podría poner una foto de algún estudiante del instituto tecnológico de colima. Para que la interacción sea más cómoda o bien un alumno diferente por carrera para que sea el distintivo. Además se le pueden agregar más funciones al avatar para su mayor manejo.

Se capacitaron a dos alumnos por semestre para que tengan los conocimientos del funcionamiento y el desarrollo del mismo en caso de ser necesario, hacer alguna modificación, o cambio de la voz. Ya que cabe mencionar, que la voz puede ser de cualquier persona, adecuándola al avatar.


36

Referencias Bibliográficas

� Peter Plantec, 2003,Virtual Humans,Amacom � http://alicebot.blogspot.com/ � http://www.pandorabots.com/botmaster/en/home � http://www.linux-magazine.es/issue/61/042-046_ChatbotsLM61.pdf � http://www.dmae.upm.es/cienciaficcion/DIVULGACION/3/chatbots.htm � http://www.lpsi.eui.upm.es/webing/TfcMetrica/vistazo.htm � http://www.lpsi.eui.upm.es/webing/Metrica.htm � http://www.pandorabots.com/botmaster/en/aiml-edit-save � http://www.alicebot.org/superbot.html � http://www.alicebot.org/join.html � http://wiki.portugal-a-programar.org/python:inteligencia_artificial_-_aiml � http://es.wikibooks.org/wiki/Agentes_de_chat/AIML � http://alicebot.wikidot.com/aiml:es-es:xgargoyle:sara:sara-aiml � http://alicebot.blogspot.com/ � http://download.geniusnet.com/manual/webcam/eMessenger310/M310_Spa

nish.pdf


37

Anexos

I. Cronograma de Actividades

II.- Código del sistema <?php $conexion = mysql_connect("localhost", "root", "123"); mysql_select_db("AVATAR", $conexion); session_start(); $_SESSION['Uresultado']=1; // se abren variables de sesion para guardar y contar respuestas if ($_REQUEST['session']) { session_destroy(); $res[0]="introduccion_bien"; } if($_REQUEST['si_1']=="Si") { $conscar="select max(numero) from preguntas where carrera='ambiental'"; //me trae las preguntas de ambiental $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] < $rescar[0]) // si la variable de sesion llega a su limite entonces cambiara a la sig carrera { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['AMBIENTAL']=$_SESSION['AMBIENTAL'] + 1; //Cuenta las respuestas y las almacena en una variable de sesion


38

$contres=$_SESSION['cuenta'] ; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } else { $conscar="select max(numero) from preguntas where carrera='artisticos'"; $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] <$rescar[0]) // si la variable de sesion llega a su limite entonces cambiara a la siguiente { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['ARTISTICOS']=$_SESSION['ARTISTICOS'] + 1; //Cuenta las respuestas y las almacena en una variable de sesion $contres=$_SESSION['cuenta']; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } else { $conscar="select max(numero) from preguntas where carrera='calculo'"; $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] < $rescar[0]) // si la variable de sesion llega a su limite entonces cambiara a la siguiente { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['CALCULO']=$_SESSION['CALCULO'] + 1; $contres=$_SESSION['cuenta']; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } else { $conscar="select max(numero) from preguntas where carrera='cientifico'"; $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] < $rescar[0]) // si la variable de sesion llega a su limite entonces cambiara a la siguiente { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['CIENTIFICO']=$_SESSION['CIENTIFICO'] + 1; $contres=$_SESSION['cuenta']; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons);


39

$res=mysql_fetch_array($sql); } else { $conscar="select max(numero) from preguntas where carrera='mecanico'"; $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] < $rescar[0]) // si la variable de sesion llega a su limite entonces cambiara a la siguiente { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['MECANICO']=$_SESSION['MECANICO'] + 1; $contres=$_SESSION['cuenta']; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } else { $conscar="select max(numero) from preguntas where carrera='persuasivo'"; $sqlcar=mysql_query($conscar); $rescar=mysql_fetch_array($sqlcar); if ($_SESSION['cuenta'] < $rescar[0]-2) // si la variable de sesion llega a su limite entonces cambiara { $_SESSION['cuenta']=$_SESSION['cuenta'] + 1; $_SESSION['PERSUASIVO']=$_SESSION['PERSUASIVO'] + 1; $contres=$_SESSION['cuenta']; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } else { $mayor=0; $vec[0]=$_SESSION['AMBIENTAL']; $vec[1]=$_SESSION['ARTISTICOS']; $vec[2]=$_SESSION['CALCULO']; $vec[3]=$_SESSION['CIENTIFICO']; $vec[4]=$_SESSION['MECANICO']; $vec[5]=$_SESSION['PERSUASIVO'];


40

for($x=0;$x<=6;$x++) { if($vec[$x]>$mayor) { $mayor=$vec[$x]; $numvec=$x; } } if($numvec==0){$res[0]="ambiente_resultado";} if($numvec==1){$res[0]="artisticos_resultado";} if($numvec==2){$res[0]="calculo_respuesta";} if($numvec==3){$res[0]="cientificos_respuesta";} if($numvec==4){$res[0]="mecanicos_resultado";} if($numvec==5){$res[0]="persuasivos_respuesta";} //echo $res[0]; if ($_SESSION['Uresultado']==1) { ?> <? $_SESSION['Uresultado']=0;} //session_destroy(); } } } } } } } else if($_REQUEST['no_2']=="No") { if($_SESSION['cuenta'] > 0) { $_SESSION['cuenta']= $_SESSION['cuenta'] + 1; $contres=$_SESSION['cuenta'] + 1; $cons="select pregunta from preguntas where numero=$contres"; //me trae la pregunta que va a realizar $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } } $cadenaConta="select conta from contador"; $resultadoConta=mysql_query($cadenaConta); $contador=mysql_fetch_object($resultadoConta); $incremento=$contador->conta;

41

$incremento=$incremento+1; $actualizar="update contador set conta =$incremento"; $sql=mysql_query($actualizar); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" > <title>Agente Vocacional- Tecnológico de Colima</title> <link href="file:///G|/styles/estilo.css" rel="stylesheet" type="text/css" > <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0" width="980"> <tr> <td width="259"> </td>

42

</tr> <tr> <td height="55" align="center" valign="middle" bgcolor="#5d5d5d" class="letra3"> <p class="titulo6 Estilo2"><img src="secretaria.jpg" width="265" height="126" align="left" /><img src="dg.jpg" width="749" height="126" />Bienvenidos </p> <p class="titulo6 Estilo2">Orientador Vocacional del Instituto Tecnológico de Colima </p></td> </tr> <tr> <td height="301" colspan="2" valign="top" bgcolor="#212d42" class="titulo1">  <div style="position: absolute; left:915px; top:432px; width: 147px; height: 45px;" align="center"> <div align="center"> <p class="Estilo4"><a href="prueba.php">Información Adicional</a></p> <p class="Estilo4"> </p> </div> </div> <div align="center"> <object id="CrazyTalk" classid = "CLSID:13149882-f480-4f6b-8c6a-0764f75b99ed" codebase="http://plug-in.reallusion.com/CrazyTalk4.cab#version=4,0,0,0" width =256 height=256> <param name="ModelName" value="<? echo $res[0];?>.ctm"> <param name="ScriptName" value="<? echo $res[0];?>.cts"> <param name="ControlStyle" value="1"> <param name="BorderStyle" value="0"> <param name="MenuStyle" value="0"> <param name="AutoPlay" value="1"> </object> </div> <div style="position: absolute; left:204px; top:327px; width: 263px; height: 128px;" align="center"> <div align="center"></div> <form action="avatar.php" method="post"> <div> <p align="center"><span class="Estilo4">Respuesta</span></p> <p align="center"><br> <input name="si_1" type="submit" style="background-image: url(ok.png); width:34px; height:34px; color:#FFFFFF " id="si_1" value="Si" title="Si" /> <input name="no_2" type="submit" id="no_2" style="background-image: url(chico.png); width:34px; height:34px; color:#FF0000 " value="No" title="No" /> </p> </div> </form> </div> <div align="center"> <form action= "avatar.php" method="post"> <input name="session" type="submit" value="Comenzar test" /> </form> </div> </td> </tr> <tr> <td colspan="2" valign="top"><img src="pie_backend.gif" width="1017" height="91" /></td>

43

</tr> </table> </td> </tr> </table> </body> </html>

I. Código en php para la información adicional

<?php $conexion = mysql_connect("localhost", "root", "123"); mysql_select_db("AVATAR", $conexion); session_start(); if ($_REQUEST['session']) { session_destroy(); $res[0]="informacion"; } if ($_REQUEST['btn1']) { $cons="select respuesta from todas_preguntas where pregunta='$cmb_opciones'"; $sql=mysql_query($cons); $res=mysql_fetch_array($sql); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" > <title>Agente Vocacional- Tecnológico de Colima</title> <link href="file:///G|/styles/estilo.css" rel="stylesheet" type="text/css" > <style type="text/css"> <!-- .Estilo2 { font-size: 24px; font-weight: bold; color: #FFFFFF; } .Estilo4 { color: #FFFF00; font-weight: bold; } .Estilo6 {color: #FFFF00; font-weight: bold; font-size: 24px; } body,td,th { color: #FFFF00; } .Estilo7 {font-size: 36} a:link { color: #FFFF00; } a:visited { color: #FFFFFF;

44

} --> </style> <script type="text/javascript">  </script> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0" width="980"> <tr> <td width="259"> </td> </tr> <tr> <td height="55" align="center" valign="middle" bgcolor="#5d5d5d" class="letra3"> <p class="titulo6 Estilo2"><img src="secretaria.jpg" width="265" height="126" align="left" /><img src="dg.jpg" width="749" height="126" />Bienvenidos </p> <p class="titulo6 Estilo2">Orientador Vocacional del Instituto Tecnológico de Colima </p></td> </tr> <tr> <td height="301" colspan="2" valign="top" bgcolor="#212d42" class="titulo1">  <div style="position: absolute; left:151px; top:345px; width: 348px; height: 144px;"> <form name="form1" id="form1" method="post" action="avatar_informacion.php"> <p align="center"><span class="Estilo6">Información Adicional </span></p> <p align="center"> <select name="cmb_opciones" id="cmb_opciones" > <option value="0">Seleccione el perfil de la carrera </option> <? $CadenaSQL= "SELECT DISTINCT (pregunta) AS pregunta FROM todas_preguntas ORDER BY pregunta"; $Res = mysql_query($CadenaSQL); while($otmp = mysql_fetch_object($Res)){ ?> <option value="<?=$otmp->pregunta;?>"> <?=($otmp->pregunta);?> </option> <? }#while() ?> </select> </p> <p align="center"> <input type="submit" name="btn1" value="enviar"> </p> </form> </div> <div align="center"> <object classid = "CLSID:13149882-f480-4f6b-8c6a-0764f75b99ed"


45

codebase="http://plug-in.reallusion.com/CrazyTalk4.cab#version=4,0,0,0" width =256 height=256 align="top" id="CrazyTalk"> <param name="ModelName" value="<? echo $res[0];?>.ctm" /> <param name="ScriptName" value="<? echo $res[0];?>.cts" /> <param name="ControlStyle" value="1" /> <param name="BorderStyle" value="0" /> <param name="MenuStyle" value="0" /> <param name="AutoPlay" value="1" /> <img src="../Sitio%20sin%20nombre%201/rosa.jpg" width="256" height="256" align="top" /> </object> </div> <div align="center"> <form action="avatar_informacion.php" method="post"> <input name="session" type="submit" value="Perfil de las Carreras" /> </form> </div> <div style="position: absolute; left:942px; top:473px; width: 147px; height: 45px;" align="center"> <div align="center"> <p class="Estilo4"><a href="avatar.php" target="_parent" class="Estilo7">Regresar al test </a></p> <p class="Estilo4"> </p> </div> </div> </td> </tr> <tr> <td colspan="2" valign="top"><img src="pie_backend.gif" width="1017" height="91" /></td> </tr> </table> </td> </tr> </table> </body> </html>

IV código para mandar llamar los objetos del avatar

<script language="JavaScript" type="text/javascript"> function crearAjax(url, div_id){ var req_page = false if (window.XMLHttpRequest) {// Mozilla, Safari, etc. req_page = new XMLHttpRequest() } else if (window.ActiveXObject){ // IE try { req_page = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ // para una versión antigua try{ req_page = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false req_page.onreadystatechange=function(){ loadPage(req_page, div_id) } req_page.open('GET', url, true)


46

req_page.send(null) } function loadPage(req_page, div_id){ if (req_page.readyState == 4 && (req_page.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(div_id).innerHTML=req_page.responseText } </script> <div style="position: absolute; left:507px; top:40px;" id="avatar"> <object id="CrazyTalk" classid = "CLSID:13149882-f480-4f6b-8c6a-0764f75b99ed" codebase="http://plug-in.reallusion.com/CrazyTalk4.cab#version=4,0,0,0" width =256 height=256> <param name="ModelName" value="<? echo $txt1;?>.ctm"> <param name="ScriptName" value="<? echo $txt1;?>.cts"> <param name="ControlStyle" value="1"> <param name="BorderStyle" value="0"> <param name="MenuStyle" value="0"> <param name="AutoPlay" value="1"> </object> </div> <form name="form1" method="post"> <input name="txt1" type="text" id="txt1"/> <input name="btn1" type="button" onclick="javascript:crearAjax('cargar.php','avatar');" value="enviar"/> </form>

proyecto desarrollo e implementaciÓn de avatares

Documents