1. ORGANIZACIÓN DEL BACHILLERATO INTERNACIONAL<br />PROGRAMA DEL DIPLOMA<br />COLEGIO PERUANO NORTEAMERICANO ABRAHAM LINCOLN<br />TISG (NM)<br />TITULO:<br />“Sitio Web para la empresa Olivera’s Co. S.A.C.”<br />Candidato: Carlos José Olivera Angulo<br />Código: 002202-022<br />Número de palabras: 2500<br />Lima-Perú<br />2010<br />Criterio G: Identificación de un problema en un contexto social<br />Olivera’s Co. S.A.C. es una compañía nacional, dedicada a la importación y venta de insumos para la fabricación de transformadores. Esta empresa desde un principio se ha dado a conocer a través del contacto directo, recomendaciones de los mismos clientes y también empleando métodos tradicionales de publicidad como avisos impresos. Esto ha creado desventajas frente a otras empresas que están constantemente promocionándose a través de las diferentes tecnologías de la información. Generando un problema de falta de publicidad que no permite a la compañía aumentar sus ganancias, al no poder lograr un alcance masivo en el mercado.<br />La situación actual ha contribuido a que se genere una insuficiencia en la promoción de los productos ya que por falta de un sistema de publicidad los clientes se ven supeditados a estar en constante contacto con el gerente general. Con lo que el alcance del mercado se ha visto limitado, puesto que el señor Carlos Olivera (dueño de la empresa) no puede atender a todos sus clientes a la vez. En otras palabras, existe un claro problema que es la carencia de un buen medio publicitario que ayude a promocionar sus productos y así aumentar sus ventas.<br />Para este problema de publicidad se determinó buscar una solución a través de las tecnologías de información ya que son un medio actual que cada vez se usan más. Es evidente que el problema a resolverse con la solución de TI es la necesidad de publicidad de la empresa que le permita expandir sus horizontes y conseguir una cartera más amplia de clientes.<br />El que se vería directamente beneficiado a través de esta solución sería el señor Carlos Olivera Boccolini, Gerente General y propietario de la empresa. El es el cliente de mi proyecto ya que la solución de TI va dirigida a resolver el problema de su empresa mientras que los usuarios finales serían todos los clientes del señor Olivera pues ellos se beneficiarían al tener un método más rápido y efectivo para conocer los productos que se ofrecen en esta empresa, así como la obtención de futuros clientes que se busca conseguir a través de esta solución de TI.<br />Criterio H: Análisis y estudio de la factibilidad<br />Consultando con los interesados y observando otra información disponible acerca de soluciones de TI, se delimitaron dos enfoques posibles: crear un sitio web a través de un software de diseño web como el programa Dreamweaver y diseñar un folleto a través de un programa de autoedición como Corel Draw. Se escogieron estos enfoques porque según los clientes la información requerida es el catálogo de productos y en ambas soluciones se puede incluir dicha información. Sin embargo, al primer enfoque, es posible darle una estructura más completa puesto que por ser un medio digital no tiene tantas limitaciones en la cantidad de información que se puede incluir mientras que en el folleto sólo se podría incluir información específica.<br />Analizando ventajas y desventajas de los enfoques, ambos cumplen con las necesidades de los usuarios finales. Sin embargo, el folleto por ser un medio físico puede ser entregado a todos los clientes sin necesidad de conocimiento tecnológico para entenderlo, asimismo lo físico muchas veces causa un mayor impacto por ser tangible. Paralelamente, en un sitio web se puede incluir efectos visuales como animaciones y gráficos; además la información se puede organizar en diferentes páginas por medio de hipervínculos permitiendo mayor orden. También, las publicaciones por Internet son el medio de comunicación actual gracias a la globalización, las TI han logrado establecerse como medio preferente en el mercado por sus diversas ventajas: fácil acceso, convergencia de tecnologías, rapidez y efectividad en sus procesos, etc.<br />Contrariamente, tenemos la brecha digital que refiere a las personas que no pueden hacer uso de las TI. Sin embargo como ya se mencionó, éstas están en auge y analizando el mercado peruano las empresas hacen uso de estas tecnologías. Por otro lado, el alcance de un sitio web es mayor al de un folleto pues permite el ingreso a cualquier usuario mientras que el folleto sólo es recibido a quien se le entrega. Otra ventaja del sitio web es que puede ser actualizado rápidamente, sin generar tantos gastos; mientras que para actualizar un folleto es necesaria su reimpresión, en el sitio web sólo se cambia la información. Finalmente, tras comparar las ventajas y desventajas se optó crear un sitio web.<br />Según las encuestas hechas a los usuarios finales, la mayoría opina que el medio publicitario más eficaz son los sitios web colgados en Internet. Asimismo, el señor Olivera comparte esta opinión diciendo: “permite llegar a un mercado muchísimo más amplio que unos folletos y a la vez con mayor rapidez”. Es una realidad que con la web los horizontes son mucho más amplios por estar colgada a una red que se extiende mundialmente.<br />En conclusión, tras examinar las ventajas y las opiniones del cliente y los usuarios finales se establece al sitio web como la mejor solución. Sin embargo, su creación no es fácil pues se necesita conocimiento para manejar programas para su elaboración. Aunque la factibilidad para realizar este proyecto se ve complicada por la falta de conocimientos, vale la pena intentarlo por sus beneficios. Además se posee el software Adobe Master Collection CS4 que contiene aplicaciones para la elaboración de sitios web. Por las ventajas expuestas, se decidió crear el sitio web como solución al problema publicitario.<br />Criterio I: Planificación y desarrollo de la solución de TI elegida<br />Cronograma de Trabajo<br />Hardware, software e información encontrada<br />Otro aspecto contemplado fue el software y hardware necesarios para la elaboración y posterior uso del sitio web. Para su creación se usó el programa Adobe Creative Suite 4 porque contiene aplicaciones (Fireworks, Flash, Dreamweaver y Photoshop) orientadas hacia la creación de sitios web y diseño gráfico. Fireworks fue usada para la maquetación de la web, delimitando el tamaño que ocuparía cada parte; además se bosquejó una primera idea de cómo iba a lucir la web. En Flash se crearon las páginas internas del sitio web y la cabecera, en las cuales se incluyó una animación. Photoshop sirvió para modificar todas las imágenes, las funciones más usadas fueron las herramientas de barita mágica y de lazo para quitar el fondo a algunas imágenes. Finalmente, se exportaron todos los archivos hechos en Fireworks y Flash a tablas en Dreamweaver para que el sitio pudiera ser visualizado como un archivo html.<br />Con respecto al hardware, se tuvo que escoger un computador que satisficiese los requerimientos para la instalación del programa Adobe CS4 que fue mi computador personal Intel Pentium 4 CPU 3.00 GHz, memoria RAM 1.50 GB y un sistema operativo de 32 Bits, también se usó una lap top modelo HP Pavilon, procesador Inter Core i3 CPU M330 @ 2.13 GHz, memoria RAM 4 GB y un sistema operativo de 64 Bits. Asimismo, se usó un cámara de fotos Sony Cybershot de 10.1 megapixeles para obtener las imágenes de los productos a la venta y también se usaron memorias portátiles para trasladar la información.<br />En cuanto a la recopilación de la información, la mayor parte fue proporcionada por el señor Olivera por escrito y también se tomaron fotos a los productos en venta. Pero para elegir este enfoque se realizaron encuestas al señor Olivera y a los usuarios finales, también se consultó una página web con el objetivo de obtener mayor información de cómo realizar el sitio web: www.aulaclic.com, donde se vio como realizar animaciones y creación de formularios.<br />Diagrama de Flujo<br />Para esquematizar el sitio web, se creó un diagrama con las páginas internas a incluir.<br />IndexLáminasPapeles y CartonesCables y AlambresProductosContáctenosNosotros<br />Storyboards<br />Después de delimitar las páginas internas se realizó un bosquejo de lo que contendrían.<br />Así será la estructura base del sitio web, compuesta de cuatro partes: la cabecera donde irá el logo de la empresa, la botonera que incluirá los links a las páginas internas, el cuerpo que mostrará la información y el pie de página que repetirá los links.<br />Esta es la página de inicio, por ser la primera impresión para el usuario del sitio web, se incluirá una animación que atraiga su atención. <br />La página “Nosotros” incluye un resumen sobre la empresa. Sirve de introducción para que los clientes vean si es el sitio que les interesa. El texto viene acompañado de una imagen.<br />277812527940<br />En el botón “productos” se colocó un menú emergente para generar links hacia las páginas de productos. Se imitó el modelo de la página “nosotros”, incluyendo una imagen del producto y un texto que describa sus propiedades. En la página “cables y alambres”, se usó un código Actionscript para generar una galería de imágenes, porque hay varios tipos de cables.<br />La última página está orientada a crear vínculos entre los nuevos clientes y la empresa, por ello tiene un formulario que permite el envío de un mensaje desde el sitio web hacia el correo electrónico del señor Olivera.<br />Creación del sitio web<br />91186054610<br />Primero se maquetaron las cuatro secciones de la página, estableciéndose el tamaño del lienzo (800x600) y luego con la herramienta rectángulo se dibujaron las secciones de la web. Finalmente se pintaron algunos rectángulos con la herramienta cubo de pintura y se usó un degradado lineal para la cabecera.<br />75946040005<br />Se introdujo el logo en la cabecera. Luego se estableció un fondo para el cuerpo, se puso texto a la botonera y al pie de página. Además se hizo un cambio en la estructura, introduciéndose una barra en blanco entre la botonera y el cuerpo para darle más orden al sitio.<br />57848526670<br />En Fireworks, se recreó el logo de la empresa con las herramientas de texto, elipse y polígono (para imitar al sol); por último con la herramienta cubo de pintura se coloreó el logo con un degradado lineal. Terminado el logo, se ajustaron las dimensiones para que cupiese en la cabecera.<br />730885175260<br />También se trazó una nueva botonera y con la herramienta división se separaron los botones, además se creó un menú emergente en el botón “productos” para mostrar los links a las páginas de productos.<br />883285504190Toda esta primera parte corresponde a lo trabajado en Fireworks que es la maquetación del sitio web pero el cuerpo se realizó completamente en Flash<br />A ambos símbolos (imagen, texto) se les introdujo filtros de sombra, luego se procedió a animarlos con una configuración predefinida de movimiento. Posteriormente se agregaron dos capas más y se insertaron configuraciones predefinidas de movimiento. Este ciclo de animación fue repetido cuatro veces pero con las otras imágenes.<br />76898538735<br />Para animaciones de otras páginas también se usó configuración predefinida de movimiento. Por ejemplo la página “Nosotros” posee seis capas, la primera incluye el fondo, las siguientes cuatro son símbolos animados y una sexta capa que incluye la acción de stop para que la animación sólo ocurra una vez. <br />807085494665En cambio, en la página de “cables” se tuvo que realizar una galería de imágenes que necesitó de codificación Actionscript. <br />El código menciona la función onRollOver para el botón de la izquierda, esto quiere decir que cuando se pose el mouse sobre el botón izquierdo va a pasar la siguiente función: en la línea de tiempo habrá un desplazamiento del eje X sólo si la variable es mayor que -62.4 y el movimiento se va a realizar con una velocidad de -10, lo que quiere decir que es hacia la izquierda. Contrariamente cuando el cursor se pose en el botón derecho, ocurrirá la función onRollOver sólo si su posición en el eje X es menor a 113.6 y con una velocidad de 10, es decir hacia la derecha. <br />7575555080<br />Primero, con la función componentes se insertaron cuadros de texto y el botón de enviar, luego se agregó el nombre que debía recibir cada cuadro al costado izquierdo. Después se creó una codificación Actionscript para activar las propiedades del formulario.<br />778510-76835<br />Este código fue insertado como una clase, es decir no es parte de la película. La codificación permite que el botón de enviar autorice el envío del formulario sólo si se cumplen ciertos requisitos. Una vez validado se realiza la función “Enviar PHP” que conecta la codificación hecha en Flash con la creada en Dreamweaver, para que la información del formulario llegue al correo del señor Olivera.<br />Terminado el formulario, la página estaba hecha sólo faltaba exportarla a Dreamweaver.<br />91186073660<br />Para poder albergar la información se crearon tablas, centrándolas primero y luego se importó la información a éstas, algunas en forma de imagen y otras como películas SWF<br />Así luce la página terminada<br />749935121920<br />Sin embargo, se optó por cambiar la cabecera incluyendo una configuración predefinida de movimiento en el logo, además se insertó un slogan al que se le puso una animación simulando un brillo.<br />930910148590<br />Criterio J: Prueba y evaluación del producto<br />Prueba Beta 1<br />La primera prueba se basó en evaluar el diseño del sitio web, por lo que Cris Rodríguez, diseñadora gráfica realizó la evaluación. Obteniéndose las siguientes sugerencias:<br />Cambiar el color de las letras de la página “Home”<br />Cambiar el color de las letras de la página “Nosotros”<br />Considerar una máscara para que el efecto se vea desde el fondo beige<br />Alinear y dar efecto al título de la página “Contáctenos”<br />A continuación se muestran las correcciones realizadas.<br />19685136525<br />Antes<br />Como se observa se cambió el color de la letra de azul a blanco y el color de la sombra de celeste a azul.<br />Después<br />Antes<br />En la página “Nosotros” se cambió el color de la letra a un gris oscuro.<br />Después<br />54610227965<br />Antes<br />En la corrección se introdujo una animación predefinida y además se alineó el título.<br />54610236220<br />DespuésDespués<br />Prueba Beta 2<br />Se realizó una segunda prueba para revisar el aspecto técnico del producto donde el evaluador fue Christian Iberico, especialista en sistemas.<br />Las recomendaciones sugeridas son las siguientes:<br />Incluir misión y visión en la página “Nosotros”<br />Usar action onPress en el actionscript del formulario<br />Bajar el peso de los archivos Flash<br />La sugerencia sobre misión y visión en la página “Contáctenos” es válida pero estos tópicos se encuentran implícitos dentro de la información incluida en “Nosotros” que fue hecha por el señor Olivera, por lo que se mantuvo igual. Se consultó con el profesor de TISG, quien opinó que el peso de los archivos era aceptable y que Flash minimizaba el peso de las películas por ello tampoco se siguió esta recomendación, solamente se consideró usar el action onPress.<br />9525231775<br />Antes<br />Se cambiaron las funciones onRollOver y onRollOut por onPress y onRelease para que los botones se activen al presionarlos.<br />Después<br />La última prueba la realizó el señor Carlos Olivera, cliente del producto, como principal interesado se le consultó que le parecía el sitio web y se le instó a realizar recomendaciones, sin embargo él se limito a felicitar el funcionamiento del sitio web y mencionó que cumple con sus expectativas. Con este resultado se pudo pasar a colgar el producto en la red.<br />Criterio K: Evaluación de la repercusión social del producto<br />Con poco menos de un mes de estar colgado en la red el sitio a web ha empezado a producir el impacto deseado, algunos clientes ya están usando el sitio para obtener información de los productos que vende la empresa y se han mandado los primeros mensajes a través del formulario. Sin embargo, dado el corto tiempo de vigencia que ha tenido, todavía no se puede afirmar al 100% que haya solucionado el problema de publicidad de la empresa, pero en una plática mantenida con el señor Olivera se pudo constatar que el impacto inicial ha sido bueno y a superado las expectativas.<br />Basándome en el uso que hasta el momento ha tenido el sitio web, y haciendo proyecciones hacia el futuro, se puede estimar que el uso de ésta aumente en los próximos meses y que nuevos clientes puedan conectarse con la empresa a través de la web (que es lo que se quiere). El impacto a futuro será mucho mayor del que ha habido hasta el momento, pues la web irá tomando más fuerza entre los clientes y va aumentar el número de personas que la use. Cuando esto llegue a pasar sería bueno incluir la función de carrito de compras en el sitio web, para que de ese modo los clientes tengan la opción de realizar compras desde la página, beneficiando tanto al señor Olivera (que podrá aumentar sus ganancias) como a los usuarios finales (quienes ahorraran tiempo).<br />Bibliografía<br />Tutoriales<br />Aula clic (en línea) http://www.aulaclic.es/ [citado en 29 de junio de 2010]<br />Apéndice<br />Ejemplo encuesta usuarios finales<br />Gráficos encuesta usuarios finales<br />Encuesta 1 usuario final<br />Encuesta 2 usuario final<br />149860192405<br />Prueba Beta 1<br />Prueba Beta 2<br />Prueba Beta 3<br />Solicitud para realizar el proyecto<br />Evaluador de la Prueba beta 1: Chris Rodríguez Ruiz<br />Cris Rodríguez: Diseñadora Grafica <br />Con experiencia en manejo de los recursos de tecnología Informática y administración de los mismos. Con actividades relacionadas con la organización de equipos, desarrollo de software, administración de centros de cómputo tanto en tecnología como helpdesk. Además del desarrollo, diseño y mantenimiento de sitios web usando nuevas tecnologías orientadas a la optimización de los recursos.<br />