REDISEÑO DEL SITIO WEB AUTOHOME TEC, LABORATORIO DE INGENIERÍA AUTOMOTRIZ

BERNARDO ARCILA PARRA

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN

DEPARTAMENTO DE PUBLICIDAD Y DISEÑO PROGRAMA DISEÑO DE LA COMUNICACIÓN GRÁFICA

SANTIAGO DE CALI 2011

REDISEÑO DEL SITIO WEB AUTOHOME TEC, LABORATORIO DE INGENIERÍA AUTOMOTRIZ

BERNARDO ARCILA PARRA

Trabajo de Grado para optar al título de Diseñador de la Comunicación Gráfica

Director Carlos Hernando Ceron Meza

Ingeniero de Sistemas

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN

DEPARTAMENTO DE PUBLICIDAD Y DISEÑO PROGRAMA DISEÑO DE LA COMUNICACIÓN GRÁFICA

SANTIAGO DE CALI 2011

3

Nota de aceptación: Aprobado por el Comité de Grado en cumplimiento de los requisitos exigidos por la Universidad Autónoma de Occidente para optar al título de Diseñador de la Comunicación Gráfica

ANDRES AGREDO Jurado

ANDRES ROZO Jurado

Santiago de Cali, 21 de Enero de 2011

4

AGRADECIMIENTOS

Agradezco a Dios por hacer parte de este proyecto, por darme fuerzas para estar en pie y culminar mi carrera profesional. A Carlos Hernando Ceron Meza, Ingeniero de Sistemas, por su dedicación con cada una de sus labores en Pro de mi trabajo de grado. A mi familia (Bernardo, Luz Mery, Julián, Andrés) por ser el punto de apoyo y parte fundamental de mi proceso como profesional. A mi novia (Verónica González M.) por su apoyo permanente y por estar siempre a mi lado. Agradezco a todo el equipo de trabajo de Autohome Tec por su esfuerzo y apoyo para el desarrollo del proyecto.

5

CONTENIDO Pág.

RESUMEN 8

INTRODUCCION 9 1. MARCO INVESTIGATIVO GENERAL 10 2. FORMULACIÓN DEL PROBLEMA 11 2.1 SISTEMATIZACIÓN 11 3. OBJETIVOS 12 3.1 OBJETIVO GENERAL 12 3.2 OBJETIVOS ESPECÍFICOS 12 4. JUSTIFICACIÓN 13 5. MARCO TEORICO 14 5.1 ¿QUÉ ES UNA PÁGINA WEB? 14 5.2 ¿QUE ES UN SITIO WEB? 14 5.3 ¿QUÉ ES UN PORTAL? 15 5.4 ¿QUE ES LA WEB 2.0? 15 5.5 USABILIDAD 16 5.6 ¿POR QUE ELEGIR JOOMLA PARA EL SITIO WEB? 18 5.7 REPOSITORIO COMO COMPLEMENTO DE APRENDIZAJE. 19 5.8 ARQUITECTURA DE UN SITIO WEB 19 6. METODOLOGIA 21 6.1 MODELO EN ESPIRAL 22 7. ANALISIS DE LA COMPETENCIA 25

8. CRONOGRAMA DE ACTIVIDADES 29

9. RECURSOS 30

6

10. CONCLUSIONES 33

11. RECOMENDACIONES 32

12. BIBLIOGRAFIA 33

13. WEBGRAFIA 33

ANEXOS 35

7

LISTA DE ANEXOS

Pág.

Anexo A. Google Trends 35 Anexo B. Encuesta 36 Anexo C. Resultados de encuesta 38 Anexo D. Bocetos 45 Anexo E. Mapa de navegación 50 Anexo F. Plantilla manual 51

8

RESUMEN Este proyecto se aborda con el fin de comprobar como la Comunicación Grafica aplica para un sitio Web ubicado en el mercado automotriz. Este sector implica una serie de retos, por su complejidad, tanto de usuarios como de información. A lo largo del proyecto se lleva a cabo un proceso investigativo para encontrar las exigencias de los usuarios y dar paso a la generación de dichos requerimientos. Después de dicho proceso se genera el montaje del sitio Web con las diferentes aplicaciones en cuanto a contenidos, terminología y proceso grafico, donde se logra brindar información a través de un repositorio como refuerzo del aprendizaje presencial de los usuarios en los cursos dictados por la empresa.

9

INTRODUCCION

El taller automotriz Autohome Tec se encuentra ubicado al sur de la ciudad de Cali brindando sus servicios en electrónica para el sector automotriz. Durante sus 5 años de existencia se han dedicado a brindar diferentes servicios como diagnóstico automotriz, servicio de scanner y osciloscopio, limpieza de inyectores con ultrasonido, y mecánica en general. Hace 4 años aproximadamente iniciaron labores para ofrecer cursos presenciales en educación no formal de inyección electrónica para capacitar a los mecánicos y actualizarlos a las nuevas exigencias del sector automotriz. Muchos mecánicos no se especializaron, ni actualizaron sus herramientas con computadores o software y se han convertido con el transcurrir del tiempo en mecánicos de vehículos antiguos. Hoy en día el experto automotriz requiere de un lector de fallas y un manual de procedimiento. Ya no es posible detectar las fallas con solo escucharlas. Con la evolución de la electrónica en los vehículos llegó una nueva era de ingenieros con conocimientos avanzados en electrónica, capaces de leer los programas más sofisticados y manuales para los nuevos modelos de vehículos en el mercado automotriz. Actualmente los sofisticados sistemas electrónicos de cada modelo de vehículo exigen ahora un mecánico que esté especializado, puesto que requiere una calibración especial de fallas muy diferentes a la que se aplicaba hace algunos años. Este proyecto pretende desarrollar una plataforma de comunicación con los usuarios y/o alumnos de los cursos para ofrecerles un refuerzo complementario e implementar virtualmente la entrega de información vista en los cursos presenciales de inyección electrónica y otros temas automotrices. También se busca complementar el mercadeo de Autohome Tec con publicidad de banners a través del sitio Web Actualmente Autohome Tec capacita alrededor de 40 personas trimestralmente en sus cursos y se pretende brindar información técnica por medio de la Web para que el usuario y/o alumno descargue su información para su estudio independiente contribuyendo así al ahorro de papel y mejorando su práctica del curso.

10

1. MARCO INVESTIGATIVO GENERAL

Anteriormente al ingresar al sitio Web que existía de Autohome Tec nos encontrábamos con un sitio realizado con plantillas en la plataforma Joomla. En la actualidad este dominio no se encuentra activo. Por lo tanto el montaje del sitio Web esta alojado en un hosting gratuito que se puede ubicar en la siguiente URL: http://autohome.zobyhost.com/.

Joomla es un sistema basado en módulos que permite por parte del usuario la edición de sus contenidos. Este administrador de contenidos se puede utilizar tanto en Internet, como Intranet o en modo Local y requiere de una base de datos MySQL. Joomla incluye varias características personalizables como: adición de animaciones en flash, blogs, foros, búsqueda, encuestas, videos, contadores de visitas, galerías de imágenes, manejo de menús, actualización de artículos, gestión de plantillas, etc.

Autohome contaba con una plantilla auto ajustable, es decir, se acomodaba a cualquier resolución de pantalla permitiendo en algunos casos una mejor lecturabilidad. Esto por supuesto, dependiendo de la correcta elaboración de la(s) plantilla(s). La ventaja de usar un sistema manejador de contenidos es que permite que el administrador o dueño del Sitio Web no dependa del proveedor que la hizo para la actualización de los contenidos (textos, fotos, videos, encuestas, galerías, etc.).

En el sitio Web encontrábamos un menú con poca información y en algunos ítems aparecen imágenes pixeladas dentro del body simulando texto que describía eventos y por lo tanto cada página era demorada en cargar por el tamaño de las imágenes.

La prioridad de este proyecto es brindar una mayor interacción y comunicación por parte de la empresa utilizando la página web para ofrecer a sus usuarios información actualizada y detallada acerca de sus cursos, reforzando el conocimiento adquirido en éstos de forma presencial.

Cuando hablamos de interacción es por parte de los usuarios que tendrán la tarea de investigar a través del sitio Web para acceder a la información que reforzará los cursos dictados por la empresa. La administración y gestión de usuarios del sitio Web y la actualización de los cursos la realizará directamente un usuario encargado por Autohome Tec.

En la inscripción realizada por Autohome Tec se entrega un nombre de usuario y contraseña al alumno inscrito al curso presencial, para su acceso a la información a través del sitio Web.

11

2. FORMULACIÓN DEL PROBLEMA

¿De qué manera el rediseño del sitio Web contribuye a reforzar el conocimiento de los alumnos en electrónica automotriz? 2.1 SISTEMATIZACIÓN:

• ¿Qué características deben tener las secciones disponibles en el sitio Web?

• ¿Qué información debe estar disponible para los usuarios y/o

alumnos?

• ¿Cómo vincular agentes externos para que participen pautando en el sitio Web?

• ¿Como atraer a los alumnos a la consulta de los contenidos para

reforzar la información de los cursos?

• ¿Qué colores debería tener el sitio Web orientado a que el contenido presente en esta sea usable, accesible y principalmente entendible?

• ¿Qué elementos tendrá el sitio Web orientado a reforzar la

información de los cursos?

• ¿Qué patrones de usabilidad se deben aplicar en el diseño para un sitio Web como éstos?

12

3. OBJETIVOS

3.1 OBJETIVO GENERAL: Rediseñar e implementar el sitio Web Autohome Tec para contribuir al refuerzo del conocimiento de los alumnos en electrónica automotriz. 3.2 OBJETIVOS ESPECÍFICOS:

• Clasificar y caracterizar las secciones de información disponibles en el sitio Web de Autohome Tec.

• Diseñar el sitio Web de Autohome Tec de tal manera que se

aprovechen de la mejor manera los espacios disponibles en pantalla para lograr un buen entendimiento de la información que estará disponible.

• Poner a disposición de los usuarios y/o alumnos información

relacionada con los cursos en el sitio Web.

• Invitar a agentes externos para que se vinculen con aportes en el sector automotriz, contribuyendo con la promoción de los cursos.

• Diseñar una plantilla como pieza corporativa para ajustar los

contenidos del repositorio a la marca gráfica.

13

4. JUSTIFICACIÓN

Autohome Tec considera incluir en sus servicios un sitio Web para reforzar el conocimiento adquirido en los cursos presenciales dictados trimestralmente, por esta razón dentro de la proyección de sus actividades se pretende a través de un repositorio brindar nuevos conocimientos sobre electrónica automotriz. El nuevo diseño requiere de campos más formales para un adecuado estudio y de un link donde se puede encontrar la información requerida solo en el campo de los cursos. El diseño de una plantilla Web propia genera una mejor navegación, recordación, exclusividad y posicionamiento de la marca en la mente de los usuarios. La utilización de una plantilla para identificar los manuales pertenecientes a los curso de Autohome Tec aporta una buena organización de los documentos. La implementación de los recursos (manuales, diagramas de cableado, información de fallas, etc.) a través de la Web utilizando ilustraciones, fotografías, videos, animaciones garantiza que los usuarios visiten el sitio en busca de nueva información que refuerce sus conocimientos y de esta manera posicione a la empresa en el sector automotriz. Por esta razón el rediseño del sitio Web puede convertirse en una herramienta muy importante para generar recordación, posicionamiento, hacer un mejor uso de su sistema actualizable de información y complementar la información aprendida en los cursos presenciales.

14

5. MARCO TEORICO 5.1 ¿QUÉ ES UNA PÁGINA WEB? 2 Una página Web es un artículo electrónico, que comúnmente hace parte de un sitio Web. Su función principal son los hipervínculos de una página. Los atributos que componen una página Web son información estática o módulos multimedia (aplicaciones para hacerla interactiva) y puede conformarse por elementos como: texto, hipervínculos, imágenes, audio, flash, gráficos vectoriales, etc. También puede contener datos de estilo para definir su estética visual. Las páginas Web pueden realizarse desde cualquier editor de texto. Existen editores sencillos como WYSIWYG, y otros que son totalmente gráficos como Dreamweaver o FrontPage, etc. Estas páginas Web son realizadas con códigos que tienen la capacidad de insertar hiperenlaces, generalmente en HTML.

De esta manera la agrupación de varias páginas Web conforma un sitio Web. Las páginas Web suelen encontrarse agrupadas bajo un mismo dominio para que el sitio sea navegable desde una misma dirección en Internet.

El conjunto de páginas Web que conforman todos los sitios Web, es lo que conocemos como World Wide Web, o comúnmente conocido como Internet, que es el espacio virtual donde se encuentran alojados todos los recursos digitales.

5.2 ¿QUE ES UN SITIO WEB?3 Un sitio Web es una gran recopilación de varias páginas Web con un tema en común o un propósito en específico, alojados en un dominio de Internet en común en la World Wide Web en Internet. Al ingresar por ejemplo a www.unsitio.com se hace referencia a un sitio Web, que contiene una página HTML inicial, que es la primera en mostrarse. Es recomendable que los sitios Web cumplan con ciertas normas de accesibilidad para que puedan ser utilizados por un gran número de personas, exceptuando cualquier limitación física.

2 http://www.alegsa.com.ar/Dic/pagina%20web.php 3 http://www.expertosensitiosweb.com/preguntas/que-es-un-sitio-web

15

Por lo tanto, un sitio Web es un espacio virtual en Internet, conformado por la agrupación de varias páginas Web que son accesibles a través de un mismo dominio o subdominio de la World Wide Web. En su mayoría los sitios Web ofrecen de manera gratuita su contenido a los usuarios. En cambio otros sitios Web cobran suscripciones y exigen una contraseña para poder acceder al sitio Web y realizar las descargas de información o diferentes contenidos. Este es el caso de sitios Web de juegos online, descargas de contenidos para celulares pornografía, entre otros servicios. 5.3 ¿QUÉ ES UN PORTAL? 4 Un Portal Web es el punto de encuentro y de partida de la navegación por parte de los usuarios. Este tipo de Portales Web recopila información relacionada con un mismo tema e incluye: buscadores, foros, aplicaciones, compras electrónicas, etc. El Portal Web funciona como intermediario de información que utiliza como sostenimiento la publicidad de empresas que ahí se anuncian y generan sus enlaces propios a los sitios Web de sus compañías para brindar un soporte de información más adecuado. Tal es el caso de portales como MSN, Yahoo, Terra, que desde un mismo sitio brindan un gran abanico de opciones como noticias actualizadas, buscadores, foros, chats, tiendas virtuales, juegos online, etc. Entendiendo esto podemos concluir que la finalidad de un portal es que el usuario pueda a través de una “puerta de ingreso” suplir sus necesidades accediendo a un mismo sitio. Debería de suponerse que el usuario tendrá el portal en su página de inicio para mayor comodidad y facilidad a la hora de acceder en busca de sus necesidades y utilizará todos sus servicios antes de comenzar a navegar a través de otros sitios Web más específicos. 5.4 ¿QUE ES LA WEB 2.0? 5 Un sitio Web 2.0 posibilita a los usuarios interactuar entre si con otros usuarios, a través de diferentes espacios de contenidos como Blogger, redes sociales como Facebook, Twitter, Badoo, servicios de información como Wikipedia y portales de alojamiento de fotos, audio o videos como Youtube, Flickr.

4 http://www.informaticamilenium.com.mx/paginas/espanol/sitioweb.htm 5 http://www.maestrosdelweb.com/editorial/web2/

16

La Web 2.0 también permite actualizar el contenido de los sitios Web, a diferencia de los sitios Web no-interactivos donde los usuarios están limitados a la visualización de la información que se les proporciona sin tener la posibilidad de interactuar ya sea con otros usuarios o con el mismo sitio Web a través de foros, chats, etc.

Un sitio Web 2.0 recopila todas las diferentes utilidades y servicios de Internet que utilizan bajo una base de datos, que puede ser modificada ya sea por el dueño de la Web o por los diferentes usuarios, siendo así transformados sus contenidos (actualizando, o borrando información). Para el presente proyecto se utilizara un Sitio Web 2.0 siendo el mas indicado después de evaluar los requisitos del cliente ya que esta en la necesidad de actualizar la información del sitio constantemente, para brindar un contenido que esté a la vanguardia de las nuevas tecnologías automotrices existentes y también complementar los cursos de electrónica automotriz dictados por la empresa. Las nuevas actualizaciones del sitio Web serán notificadas por correo electrónico a través de la base de datos recopilada por la empresa y el por el sitio Web. Los usuarios podrán interactuar compartiendo información y conocimientos a través del foro del sitio Web. La Web se transforma en un componente social, que aplicado en el ámbito educativo, constituye un medio para construir el conocimiento de forma colaborativa, mediante aportaciones individuales (foro) que enriquezcan el aprendizaje. 5.5 USABILIDAD Empecemos por entender el concepto de usabilidad: Nielsen6 (2003): “Usabilidad es un atributo de calidad que mide lo fácil que son de usar las interfaces Web.” El éxito de un sitio usable es que el usuario que está navegando pueda entender su organización y lleve a cabo la actividad que pretendía realizar en un tiempo estimado adecuado y que contenga una buena accesibilidad. La accesibilidad del sitio Web también es un papel fundamental a la hora de diseñar ya que aquí se mide que tan fácil es de acceder al sitio, que cantidad de personas lo pueden hacer, indiferentemente de las limitaciones propias del individuo o derivadas del contexto de uso.

6 http://www.useit.com/alertbox/20030825.html

17

Además de estructurar de manera jerárquica la organización de contenidos, se permite al lector ubicar en qué lugar del sitio se encuentra. Mientras va entrando en los contenidos obtiene información más específica y la información general se va situando en los niveles anteriores.

Dentro de los criterios de diseño para realizar el sitio Web y teniendo en cuenta el público objetivo, se hicieron uso de ciertas normas para una buena accesibilidad:

• Textos legibles (tamaño de letra, tipo de letra, contraste texto/fondo). • Adecuada estructura de las páginas. • Diseño simple y sin ningún tipo de distracciones (ventanas pop up, intro

en flash, etc.). • Terminología adecuada (automotriz).

Los colores del sitio fueron elegidos queriendo resaltar limpieza (visual), espacio, tranquilidad, ya que el sitio requiere buena armonía para que el usuario no se distraiga y siempre este atento a la lectura. El color azul combinado con el blanco genera una sensación de calma, de pureza y evita que el usuario se canse al leer. El color gris es un color neutro que combina bien con el azul y el blanco.

En un documento impreso la resolución de impresión es alta por lo que los elementos decorativos en los remates de las tipografías “serif” se ven muy definidos. Pero en una pantalla de PC la resolución no es muy alta y la tipografía con "serif" produce efectos en las letras que hacen dificultosa su lectura, por esta razón se utiliza tipografía Sans serif para evitar dificultades al leer los contenidos.

La tipografías utilizadas fueron Arial y Tahoma que son fuentes que tienen buen espacio entre las letras con el fin de hacerlas más aptas para ser leídas en pantalla.

Características principales de usabilidad del sitio Web Autohome Tec7

Facilidad de aprendizaje: en esta fase el usuario se familiariza con la interfaz, navega y realiza algunas operaciones para el correcto uso del sitio.

Facilidad y Eficiencia de uso: destreza para desarrollar las actividades como descargar información. Esto se hace después de conocer el sitio y saber manejarlo.

Facilidad de recordar cómo funciona: recordación de las características y navegación del sitio para futuras visitas.

7 http://www.guiaweb.gob.cl/guia-v2/capitulos/05/usabilidad.htm#caracteristicas

18

Satisfacción subjetiva: cumplimiento de las expectativas del sitio gracias a la simplicidad de sus secciones.

5.6 ¿POR QUE ELEGIR JOOMLA PARA EL SITIO WEB? Es una aplicación fácil de personalizar y a su vez de configurar. Se puede cambiar fácilmente el estilo estético del sitio Web a través de su sistema de plantillas. Bajo este sistema se pueden gestionar de manera fácil sus contenidos y aplicaciones como: chats, comentarios, foros, galerías de imágenes, videos, formularios, etc. Aprender a utilizar Joomla es rápido y sencillo, especialmente para la gestión de contenidos desde el sitio (frontend) y el acceso por parte del administrador (backend). Las modificaciones realizadas al sitio Web son prácticamente al instante. Otra ventaja de Joomla es que existe una gran comunidad de desarrolladores y diseñadores que trabajan con y para Joomla de forma libre. Joomla se puede utilizar en cualquier equipo que disponga de cualquier sistema operativo instalado, por lo tanto, no es obligación tener Windows para acceder a Joomla, también se puede hacer a través de cualquier distribución GNU/Linux o Mac Os. La actualización de contenidos ya no es una tarea de Webmaster, no se necesita tener conocimientos en programación. La gestión de los contenidos del sitio Web, el diseño (plantilla), y la actualización no requiere conocimiento técnico alguno. De acuerdo a un estudio realizado por Google Trends8, Joomla es administrador de contenidos mas utilizado en diferentes partes del mundo (VER ANEXO A). La idea de este proyecto es que haya mucha actualización de información de los cursos y de los contenidos del sitio Web. Por lo tanto el diseñador o la persona que haya realizado el sitio Web no puede convertirse en una necesidad cuando se trate de actualizar la información, sino que por el contrario el cliente sea el encargado de actualizar el contenido las veces que él quiera y en el momento oportuno. 5.7 REPOSITORIO COMO COMPLEMENTO DE APRENDIZAJE. En este proyecto se utilizo el repositorio para almacenar información con el objetivo de que los usuarios complementen su capacitación a través de 8

http://www.google.es/trends?q=joomla%2C+drupal%2C+typo3%2C+opencms%2C+phpnuke&ctab=0&geo=all&date=all&sort=1

19

Internet. Este tipo de aprendizaje online permite la interacción del usuario con el material mediante la utilización de diversas herramientas informáticas. El aprendizaje continuo es el requerimiento actual de las diferentes sociedades que se preocupan por estar actualizados en campos específicos. Este mecanismo de aprendizaje permite que el usuario se apropie de nuevos conocimientos, así mismo de nuevos contenidos que le generen procesos de análisis, reflexión y apropiación. Contribuyendo de esta manera a una socialización diferente, ofreciendo posibilidades de interacción con otros usuarios. Algunas de las ventajas que ofrecen los repositorios son:

• Acceso fácil. • El usuario accede en el momento que dispone de tiempo. • Acceso a recursos como: textos, gráficos, videos, animaciones, etc.

De esta manera se contribuye a optimizar y aumentar los conocimientos, habilidades y aptitudes de los usuarios. Por lo tanto este mecanismo va ganando fuerza ya que apuesta a una formación más flexible y adaptable gracias a los recursos digitales alojados en el repositorio y al tiempo de sus usuarios. 5.8 ARQUITECTURA DE UN SITIO WEB Roger Pressman en su libro ”Ingeniería del software un enfoque práctico” nos habla sobre capas de diseño (datos, arquitectura, interfaz y nivel de componentes). Estas capas de diseño estructuradas proporcionan la integridad de un sistema. Una arquitectura de tres capas está compuesta por una capa de presentación, una capa de procedimiento y una capa de base de datos. La capa de presentación es la responsable de la representación visual de la aplicación, esta capa enviara mensajes a los objetos de la capa intermedia (capa de procedimiento), la cual responderá directamente o mantendrá un dialogo con la capa de la base datos, proporcionando los datos que se mandaran como respuesta a la capa de presentación. La capa de procesamiento es la responsable del procesamiento que tiene lugar en la aplicación, por ejemplo en una aplicación bancaria el código de la capa de presentación se relacionaría simplemente con la monitorización de transacciones y con el envío de datos a la capa de procesamiento. Esta capa intermedia contendría los objetos que corresponden con las entidades de la aplicación; por ejemplo, en una aplicación bancaria los objetos

20

típicos serian los bancos, el cliente, las cuentas y las transacciones, esta capa es la que conlleva capacidad de mantenimiento y de reutilización, contendrá objetos definidos por clases reutilizables que se puedan utilizar una y otra vez en diferentes aplicaciones. Finalmente la capa de base de datos, es la última capa de la arquitectura de un sitio Web, esta estaría compuesta de los archivos que contienen los datos de la aplicación.

21

6. METODOLOGIA

Para el desarrollo de este proyecto se inició buscando las falencias que presentaba el sitio Web, para ello, se realizó una investigación por medio de una encuesta (VER ANEXO B) a las personas que ya habían realizado algún curso en Autohome Tec y los que se encontraban actualmente realizando alguno. Se llevo a cabo la investigación a través de la encuesta y se lograron obtener datos exactos de algunas de las personas que están en el sector automotriz, ya que son ellos los involucrados directamente con el tema. De esta manera pudimos obtener información de los requerimientos de los usuarios (VER ANEXO C). Las falencias que presentaba el sitio era que sus contenidos textuales eran imágenes en formato JPG, problema que fue solucionado a partir de la redacción de los artículos en texto. La plantilla era auto ajustable a cualquier resolución y esto ocasionaba que todas las secciones se desorganizaran. En este punto la plantilla se hizo de un tamaño predeterminado para la buena visualización en cualquier computador. Existían algunas secciones en ingles y algunos usuarios quedaban descontextualizados. Para este caso se soluciono dejando todo el sitio Web en español. Por medio de Autohome Tec se pudo obtener un conocimiento directo del problema para abordar mejor el estudio, tratando directamente a los usuarios, para obtener mejores resultados con el fin de aplicarlos al rediseño del sitio Web con las nuevas herramientas que se necesitan para brindar información a los usuarios. Después de la tabulación de la encuesta donde cada pregunta resolvió diferentes dudas, se pudo establecer qué tipo de información era requerida para el aprendizaje complementario y de aquí se pudo obtener una idea acerca de la estructura de los contenidos. Con esta información se concretaron los diferentes contenidos que debería tener el sitio Web. Por medio de esta investigación se pudo partir de la teoría como una guía. El repositorio donde se alojaran los archivos deberá tener diferentes documentos como, manuales, diagramas de cableado, gráficos, tablas de códigos de fallas, etc. Todos estos archivos estarán soportados en formato PDF y tendrán acceso a ellos con un nombre de usuario y contraseña otorgado por Autohome Tec al momento de inscribirse al curso presencial. Para acceder a la prueba de los contenidos del sitio el usuario de prueba es: USUARIO: demo y la CONTRASEÑA: demo123. Autohome tendrá acceso para visualizar las estadísticas de descargas de contenidos a través del administrador de Joomla. Para el desarrollo de este proyecto se utilizó un modelo de ingeniería de software conocido como modelo en espiral. Se eligió este modelo porque

22

brinda beneficios como el control de calidad en cada proceso y pruebas a lo largo de cada ciclo, corrigiendo así posibles errores antes de continuar con el siguiente proceso. 6.1 MODELO EN ESPIRAL El modelo en espiral es un esquema que sigue una serie de actividades respetando un orden específico. La estructura más utilizada abarca entre tres y seis regiones de actividades.

Fuente: http://commons.wikimedia.org/wiki/File:Modelo_Espiral_Boehm.svg

Comunicación con el cliente : reuniones para establecer comunicación entre el desarrollador del proyecto y el cliente. Planificación : programación de las tareas definir recursos, el tiempo y otras informaciones relacionadas con el proyecto. Son todos los requerimientos. Análisis de riesgos : evaluación de posibles riesgos técnicos y otras informaciones relacionadas con el proyecto.

23

Ingeniería : construcción de contenidos, aplicaciones, actividades relacionadas con el desarrollo del sitio. Evaluación el cliente : retroalimentación del cliente según la evaluación de las creaciones del sitio, realizadas durante la etapa de ingeniería. Construcción y adaptación : construcción, pruebas, e instalación y soporte al usuario.

Cuando comienza la etapa evolutiva, el equipo de ingeniería gira alrededor de la espiral en la dirección de las agujas del reloj, empezando del centro hacia fuera. El primer circuito de la espiral nos da respuesta al desarrollo de una especificación de productos o servicios; los siguientes pasos en la espiral se utilizan para desarrollar pruebas y progresivamente versiones mejoradas del proyecto. Cada vez que se pasa por la región de planificación se producen ajustes en el plan del proyecto. Inicialmente se realizó la encuesta a algunos usuarios para tomar como punto de partida algunos criterios y exigencias por parte de los mismos. Después de esta labor se empezaron a realizar las diferentes reuniones y se fueron estableciendo diferentes requisitos para el desarrollo del sitio. Cada reunión y prueba del sitio fue una retroalimentación para el proyecto, puesto que siempre surgían ideas nuevas y posteriormente se generaban esquemas para su posterior adecuación al sitio. Poco a poco con las diferentes reuniones y pruebas se fueron estableciendo las características para las secciones que estarían disponibles para el sitio Web y fueron consolidándose gracias a las pruebas con usuarios reales (VER ANEXO D). Estas pruebas fueron definiendo que estas secciones deberían ser concisas con información detallada que no desvíe y perturbe la atención del lector, gráficos relacionados con los temas desarrollados y lo más importante que fuera información actual y confiable. Después de jerarquizar la información se procedió a realizar el mapa de navegación del sitio Web (VER ANEXO E). Para este proyecto la información disponible para usuarios y/o alumnos debe estar enmarcada en el contexto de la temática desarrollada en el curso tomado. Por lo tanto alguna otra información adicional deberá ser consultada en el foro del sitio Web para ser debatida sea por la empresa o por otros participantes del mismo. Para los contenidos del repositorio se hará uso de la plantilla corporativa (VER ANEXO F) que acompañara con su diseño los diferentes recursos alojados en dicho repositorio. Esta plantilla puede ser visualizada en el sitio Web siguiendo el enlace:

24

Cursos/Cuerpos de Aceleración Motorizados/Descarga de contenidos/Plantilla Manual Los contenidos para los alumnos deben ser llamativos con gráficos que ilustren las necesidades a clarificar, que sea información en español, fácil de entender y que se respete la terminología automotriz para un buen entendimiento. Los elementos adicionales para brindar información a los alumnos son pdf, gráficos, videos, el foro para la interacción entre los alumnos y/o usuarios. Para informar a los usuarios sobre las últimas actualizaciones de contenidos se hará a través de correos electrónicos obtenidos a través de la base de datos de la empresa y del sitio Web. A través del sitio Web se hará publicidad para brindar información acerca de los servicios que ofrece la empresa y se buscarán empresas del sector automotriz que deseen pautar en el sitio Web y de esta manera generar mayor credibilidad a los usuarios del soporte que tiene la empresa en el mercado automotriz. Estas empresas se encuentran en el campo de ventas de repuestos y equipos de diagnóstico automotriz.

25

7. ANALISIS DE LA COMPETENCIA En la actualidad podemos encontrar varios sitios relacionados con electrónica automotriz, muchos de ellos fuera del país y algunos brindan cursos pero no material complementario por Internet. Algunos de estos sitios son informativos, sin ningún tipo de interacción por parte del usuario, otros brindan información de cursos y herramientas electrónicas, algunos solo se limitan al uso de foros, pero ninguno de estos ofrece información como complemento a algún curso tomado de manera presencial. ICA AUTOMOTRIZ – Santa Fe de Bogota, Colombia http://icaautomotriz.com/

Es un sitio dedicado a promocionar eventos y cursos presenciales, brindar información como consejos, notas a sus visitantes, venta de equipos de diagnostico. Invita al usuario a la interacción y navegación por los diferentes contenidos.

26

INSTITUTO TECNOLOGICO DE CAPACITACION AUTOMOTRIZ – Cap. Federal, Argentina http://www.itca.com.ar/index.html

Es un sitio dedicado a promocionar carreras y cursos en diferentes áreas del sector automotriz. Utilizan imágenes de apoyo y mucho texto. La interacción por parte del usuario es mínima.

27

TODO MECANICA – España http://www.todomecanica.com/inicio.html

Este sitio esta dedicado a brindar información automotriz, cualquier usuario puede compartir sus archivos con los demás, esta divido en categorías, tiene juegos, videos, glosario, ciclos formativos para estudiantes y un foro.

28

SOLUCIONES TECNOLOGICAS – Venezuela http://www.curso.solte.com.ve/

Este sitio a diferencia de los anteriores, cuenta con aula virtual y también contiene cursos de electrónica digital, automotriz y electricidad. Para su ingreso es necesario registrarse.

29

8. CRONOGRAMA DE ACTIVIDADES

Julio Semana 1

Julio Semana 2

Julio Semana 3

Julio Semana 4

Agosto

Semana 1

Agosto

Semana 2

Agosto

Semana 3

Agosto

Semana 4

Septiembr

e Semaana 5

Reunión con el cliente X Análisis de requisitos X Elaboración de propuesta comercial

X

Realización de encuestas

X X

Tabulación de encuestas

X

Elaboración de propuesta gráfica

X

Correcciones iniciales a propuesta gráfica

X

Recolección de información que irá en la página Web

X

Montaje inicial de la información

X

Pruebas de usabilidad con usuarios reales

X

Correcciones de diseño y de usabilidad

X

Segundas Pruebas de usabilidad con usuarios reales

X

Correcciones de diseño y de usabilidad

X

Segundo montaje de información

X

Reunión con el cliente X Pruebas de funcionamiento

X

Correcciones X Montaje total de la información

X

Pruebas Finales X Correcciones Finales X Lanzamiento del sitio Web

X

Durante todas las fases del cronograma se trabajará en la elaboración del documento de trabajo de grado.

30

9. RECURSOS

Talento humano: Carlos Ceron, (Director de trabajo de grado), Andrés Agredo (Co-Director de trabajo de grado), Bernardo Arcila Parra (Realizador del proyecto), Julian Arcila Parra, John Álvaro Vásquez, (Gerentes Autohome Tec).

Recursos financieros:

Dominio y Hosting (Un Año): $100.000

Diseño del Sitio Web: $400.000

Implementación del Sitio Web: $800.000

Gastos de Transporte para detalles con el cliente $100.000

Papelería y Gastos de Oficina: $50.000

1 Caja de Cd´s $25.000

Gastos de energía y otros servicios $60.000

Imprevistos $50.000

----------------------

$1´585.000 pesos

31

10. CONCLUSIONES

El diseño de un sitio Web va mas allá de su estética visual, ya que comprende temas como la usabilidad, la accesibilidad, que son elementos fundamentales para una buena comunicación.

Con el rediseño del sitio Web de Autohome Tec, se solucionaron algunas barreras de acceso que había al abordar el proyecto. En este nuevo espacio se brinda los usuarios la adquisición de recursos que reforzaran sus conocimientos a través de diferentes soportes como: imágenes, manuales, videos, documentos, etc. Se ofrece un espacio donde el usuario interactúe con otros usuarios para resolver dudas acerca de temas automotrices.

Con la creación de nuevos enlaces y la entrega de información que refuerza los cursos presenciales a través del sitio Web, se genera una espacio de conocimiento y se complementa la comunidad automotriz. De esta manera se espera incrementar las visitas al sitio y posicionar la empresa.

Con el desarrollo de este proyecto se abordo el campo de la investigación y exigencia de los usuarios, dando respuesta a los requerimientos de los usuarios través de diferentes elementos.

Respecto a la exigencia del mercado automotriz, poco a poco se busca la manera de implementar nuevas formas de aportar conocimiento, en este caso a través de un repositorio para almacenar información que reforzará el aprendizaje de los usuarios.

El Internet como una herramienta electrónica aliada para el conocimiento logra complementar de diferentes maneras el aprendizaje de los usuarios gracias a distintas herramientas como foros, blogs, repositorios y demás comunidades donde se puede compartir información y retroalimentarse de los demás usuarios.

Se pudo lograr un buen trabajo gracias a la metodología en espiral porque sirvió como una herramienta para planear, analizar, evaluar, construir y comunicarse con el cliente. A través del proceso surgían diferentes cambios y eran evaluados con dicho sistema el cual lograba resolver a tiempo cualquier inconveniente.

32

11. RECOMENDACIONES Para mejorar el mercadeo y la publicidad de la empresa y del sitio Web se pueden llevar a cabo las siguientes tareas:

• Publicidad impresa en volantes, pendones y tarjetas de presentación. • Publicidad en Google Adwords. • Publicidad en redes sociales como Facebook y Twitter. • Creación de la página respectiva en Facebook para atraer seguidores y

poder compartirles información cuando hayan nuevos cursos disponibles.

• Posible publicidad radial. • Intercambio de banners con otros sitios Web.

33

12. BIBLIOGRAFIA

Fumero Antonio – Genís Roca, Web 2.0, Web 2.0, Fundación Orange España, 2007, 131 p. González Ruiz Guillermo, Estudio de Diseño, Ed. Emecé Editores, 447 p. Nielsen Jakob – Hoa Loranger, Usabilidad, Prioridad en el diseño Web. Edición 2007, 384 p. Paloma Diaz Maria, Susana Montero, Ignacio Aedo, Ingeniería de la Web y Patrones de Diseño, Pearson Prentice Hall, Madrid, 2005, 440 p. Pressman Roger S., Ingeniería de Software Un enfoque práctico, Quinta edición. 640 p.

13. WEBGRAFÍA

Carvajal Mario, Bogota D.C., 2008, Por qué usar Joomla en su sitio Web, [en línea], (Consultado 13 de Octubre de 2010), Disponible en: http://www.eltiempo.com/participacion/blogs/default/un_articulo.php?id_blog=3516204&id_recurso=450010764 E-ABC, Buenos Aires, 2010, ¿Qué es una plataforma de e-Learning?, [en línea], (Consultado 04 de Septiembre de 2010), Disponible en: http://www.e-abclearning.com/queesunaplataformadeelearning Empleo y Trabajo de CH2O-Capital Humano, Madrid, 2008, E-learning ventajas de la formación virtual, [en línea], (Consultado 08 de Agosto de 2010), Disponible en: http://www.blogcapitalhumano.com/2008/06/06/e-learning-ventajas-de-la-formacion-virtual/ Floría Cortés Alejandro, Recopilación de Métodos de Usabilidad, (Consultado 18 de Septiembre de 2010), Disponible en: http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm García Gómez Juan Carlos, Saorín Pérez Tomás, 2006, Usabilidad, Accesibilidad e ideas para mejorar el desarrollo Web y la experiencia de usuario, [en línea], (Consultado 04 de Septiembre de 2010), Disponible en: http://usalo.es/117/usabilidad-para-principiantes/

34

Gobierno de Chile, Guía para el Desarrollo de Sitios Web Versión 2.0, Santiago de Chile, 2008, [en línea], (Consultado 28 de Octubre de 2010), Disponible en: http://www.guiaweb.cl/index.htm Hassan Montero Yusef, factores de diseño Web orientado a la satisfacción de uso, (Consultado 22 de Julio de 2010), Disponible en: http://www.jornadas.sidar.org/2005/ponencias/yusef/all.htm Lora Verónica, Un sitio en Internet ¿Qué es la Web?, [en línea], (Consultado 13 de Julio de 2010), Disponible en: http://www.monografias.com/trabajos5/laweb/laweb.shtml#I1 Lovera Eduardo, Diseño y Usabilidad, Unión de Diseñadores Gráficos de Buenos Aires, [en línea], (Consultado 9 de Septiembre de 2010), Disponible en: http://www.udgba.com.ar/recursos/articulos/diseno-y-usabilidad.htm Manchón Eduardo , Principios generales de usabilidad en sitios Web, [en línea], (Consultado 04 de Agosto de 2010), Disponible en: http://www.desarrolloweb.com/articulos/1133.php Mercovich Eduardo, Ponencia sobre Diseño de Interfaces y Usabilidad: cómo hacer productos más útiles, eficientes y seductores, (Consultado 23 de Septiembre de 2010), Disponible en: http://planeta.gaiasur.com.ar/infoteca/diseno-de-interfaces-y-usabilidad.html Metodología diseño páginas Web, (Consultado 12 de Agosto de 2010), Disponible en: http://www.webandmacros.com/Diseno_web_metodologia.htm Nielsen Jakob, Usability 101: Introduction to Usability, (Consultado 01 de Julio de 2010), Disponible en: http://www.useit.com/alertbox/20030825.html Ricardo Carmen, Fontalvo Heidy, Actualidad del e-Learning en Colombia, [en línea], (Consultado 22 de Julio de 2010),Disponible en: http://www.elearningamericalatina.com/edicion/septiembre2_2004/tr_1.php Sandoval Guerra Juan Carlos, Repositorio de objetos de aprendizaje, 2010, [en línea], (Consultado 16 de Agosto de 2010), Disponible en: http://www.slideshare.net/navegadorcj81/repositorios-de-objetos-de-aprendizaje-4558212

35

ANEXO A (GOOGLE TRENDS)

Fuente: http://www.google.es/trends?q=joomla%2C+drupal%2C+typo3%2C+opencms%2C+phpnuke&ctab=0&geo=all&date=all&sort=1

36

ANEXO B

(ENCUESTA)

¿Por qué motivo(s) ha visitado usted www.autohomete c.com Para recopilar información Por curiosidad Para reparar su vehiculo Para ver los cursos Otro (Por favor especifique) ¿Desde qué lugares accede a Internet normalmente? Hogar Trabajo Escuela/Universidad Ciber-café Desde casa de amigos Otro (Por favor especifique ¿Cuanto tiempo le dedica a navegar por �Internet? 1 Hora diaria 2-3 Horas diarias 5 o mas horias diarias 1 Hora semanal 2-3 Horas semanales 5 o mas horas semanales 1 Hora mensual 2-3 Horas mensuales 5 o mas horas mensuales Otro (Por favor especifique) ¿Qué información le gustaría encontrar en nuestro s itio Web? Manuales automotrices Diagramas de cableado Asesoria personalizada Información en español Otro (Por favor especifique)

37

ANEXO B (continuación)

(ENCUESTA) ¿Conoce Ud algún sitio en Internet que ofrezca info rmación sobre inyección electrónica automotriz? No Si? (Por favor especifique cual) Edad: De 14 a 19 años De 20 a 24 años De 25 a 34 años De 35 a 44 años De 45 a 54 años De 55 a 64 años 65 o más años ¿Cuál es su nivel de estudios? Sin estudios Elementales / Primarios Bachiller elemental Bachiller superior Universitario incompleto Universitario grado medio Universitario grado superior Post-Grado Prefiero no responder ¿Alguna vez ha realizado un curso virtual? ¿Si o No, Cual?

38

ANEXO C

(RESULTADOS ENCUESTA)

¿Por qué motivo/s ha visitado usted www.autohometec.com

0

2

4

6

8

10

12

14

16

18

20

Para recopilar

información

Por curiosidad Para reparar su

vehiculo

Para ver los

cursos

Otro (Por favor

especifique)

¿Por qué motivo/s ha visitado usted www.autohometec.com

2%18%

24%

16%

40%Para recopilar información

Por curiosidad

Para reparar su vehiculo

Para ver los cursos

Otro (Por favor especifique)

Total encuestados: 34 Personas

39

¿Desde qué lugares accede a Internet normalmente?

0

5

10

15

20

25

30

H og ar

T ra ba jo

E sc ue la /U ni v er si da d

C ib er -c af é

D es de c as a de a mi go s

O tr o ( Po r f av or es pe ci f iq ue )

¿Desde qué lugares accede a Internet normalmente?

0%

0%

24%

0%

15% 61%

Hogar

Trabajo

Escuela/Universidad

Ciber-café

Desde casa de amigos

Otro (Por favorespecifique)

Total encuestados: 34 Personas

40

Total encuestados: 34 Personas

¿Cuanto tiempo le dedica a navegar por internet?

0

5

10

15

20

25

1 Ho r

a d ia ri a

2 -3 Ho r

a s di ar i a

s

5 o ma s

ho r

i as d ia ri as

1 Ho r

a s e

ma n

a l

2 -3 Ho r

a s se m

a na le s

5 o ma s

ho r

a s se m

a na le s

1 Ho r

a me n

s ua l

2 -3 Ho r

a s m

e ns u

a le s

5 o ma s

ho r

a s m

e ns u

a le s

Ot ro ( P

o r fa v

o r es p

e ci f iq u

e )

¿Cuanto tiempo le dedica a navegar por internet?

6%

65%

29%0%0%0%0%0%0%0%

1 Hora diaria

2-3 Horas diarias

5 o mas horias diarias

1 Hora semanal

2-3 Horas semanales

5 o mas horassemanales

1 Hora mensual

2-3 Horas mensuales

5 o mas horasmensuales

Otro (Por favorespecifique)

41

Total encuestados: 34 Personas

¿Qué información le gustaría encontrar en nuestro sitio Web?

0

5

10

15

20

25

30

Manuales

automotrices

Diagramas de

cableado

Asesoria

personalizada

Información en

español

Otro (Por favor

especifique)

¿Qué información le gustaría encontrar en nuestro sitio Web?

38%

26%

12%

14%

10%

Manuales automotrices

Diagramas de cableado

Asesoria personalizada

Información en español

Otro (Por favor especifique)

42

Total encuestados: 34 Personas

¿Conoce Ud algún sitio en Internet que ofrezca información sobre inyección

electrónica automotriz?

0

5

10

15

20

25

30

35

No Si? (Por favor especifique cual)

¿Conoce Ud algún sitio en Internet que ofrezca información sobre inyección

electrónica automotriz?

97%

3%

No

Si? (Por favor especifique cual)

43

Total encuestados: 34 Personas

Edad:

0

2

4

6

8

10

12

14

De 14 a

19 años

De 20 a

24 años

De 25 a

34 años

De 35 a

44 años

De 45 a

54 años

De 55 a

64 años

65 o más

años

Edad:

0%

18%

26%

35%

21%

0%

0%

De 14 a 19 años

De 20 a 24 años

De 25 a 34 años

De 35 a 44 años

De 45 a 54 años

De 55 a 64 años

65 o más años

44

Total encuestados: 34 Personas

¿Cuál es su nivel de estudios?

0

5

10

15

20

25

Sin

est

udio

s

Ele

menta

les

/ Prim

ari

os

Bach

iller

ele

menta

l /

EG

B

Bach

iller

superior

/

BU

P /

FP

Univ

ers

itari

o

inco

mple

to

Univ

ers

itari

o

grado medio�

Universitario

Post-Grado

Prefiero no

responder

¿Cuál es su nivel de estudios?

0%

9%

24%

58%

9%

0%

0%

0%

Sin estudios

Elementales / Primarios

Bachiller elemental /

EGB

Bachiller superior / BUP

/ FP

Universitario incompleto

Universitario grado

medio" Universitario

grado superior

Post-Grado

Prefiero no responder

45

ANEXO D

(BOCETOS)

Primera Propuesta (Home)

46

Segunda Propuesta (Home)

47

Cuarta Propuesta (Home)

48

Quinta Propuesta Definitiva (Home)

49

Diseño Interno de la Quinta Propuesta

50

ANEXO E

(MAPA DE NAVEGACION)

51

ANEXO F

(PLANTILLA MANUAL)

52

53