55
DISEÑO DE SITIO WEB, PARA LA EMPRESA “INDUSTRIAS PLÁSTICAS DEL EJE CAFETERO” CARLOS HUMBERTO HERRERA LOZANO SERGIO DANIEL APARICIO BEDOYA UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN SOCIAL DEPARTAMENTO DE PUBLICIDAD Y DISEÑO PROGRAMA DISEÑO DE LA COMUNICACIÓN GRÁFICA SANTIAGO DE CALI 2014

DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

DISEÑO DE SITIO WEB, PARA LA EMPRESA

“INDUSTRIAS PLÁSTICAS DEL EJE CAFETERO”

CARLOS HUMBERTO HERRERA LOZANO SERGIO DANIEL APARICIO BEDOYA

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN SOCIAL

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

SANTIAGO DE CALI 2014

Page 2: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

DISEÑO DE SITIO WEB, PARA LA EMPRESA

“INDUSTRIAS PLÁSTICAS DEL EJE CAFETERO”

CARLOS HUMBERTO HERRERA LOZANO SERGIO DANIEL APARICIO BEDOYA

Proyecto de grado para optar al título de Diseñador de la comunicación gráfica

Director JHOINER GOMEZ Diseñador Gráfico

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN SOCIAL

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

SANTIAGO DE CALI 2014

Page 3: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

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

LUIS ALBERTO CASTRO PERLAZA

Jurado MARCO ANTONY ORTEGA LOZANO

Jurado Santiago de Cali, 27 de Mayo de 2014

Page 4: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

4

CONTENIDO

pág.

GLOSARIO 9 RESUMEN 12 INTRODUCCIÓN 12 1. PROBLEMA DE INNVESTIGACION 13 1.1 ANTECEDENTES 13 1.2 PLANAMIENTO DEL PROBLEMA 13 1.3 FORMULACION DEL PROBLEMA 14 1.4 SISTEMATIZACION 14 2. JUSTIFICACIÓN 15

3. OBJETIVOS 16

3.1 OBJETIVOS ESPECIFICOS 16

3.2 OBJETIVOS ESPECÍFICOS 16

4. MARCO DE REFERENCIA 17

4.1 MARCO TEÓRICO 17 4.1.1 El internet y su importancia en la historia 17

4.1.2 El diseño gráfico 18

4.1.3 Navegación en la web 18

Page 5: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

5

4.1.4 ¿Por qué accesibilidad web? 20

4.1.5 Usabilidad y accesibilidad 22

4.1.6 Arquitectura de la información 23 4.2 MARCO CONTEXTUAL 25

5. BRIEF 28

6. METODOLOGIA 30

6.1 TIPO DE ESTUDIO Y DISEÑO 30

6.2 PLANIFICACIÓN DEL SITIO WEB 30

6.3 DISEÑO DEL SITIO WEB 31

6.4 DISEÑO CONCEPTUAL DE LA PÁGINA WEB 31

6.5 DISEÑO VISUAL Y DEFINICIÓN DEL ESTILO 32

6.6 DISEÑO DE CONTENIDOS 33

6.7 PROTOTIPO 33

6.8 EVALUACIÓN 34

7. CRONOGRAMA 37

8. RECURSOS 38

8.1 RECURSOS HUMANOS 38

8.2 RECURSOS FINANCIEROS 38

8.3 RECURSOS INSTITUCIONALES 38

9. DESARROLLO 40

Page 6: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

6

9.1 MAPA DE NAVEGACIÓN 40

9.1.2 Mapa de navegación seleccionado 43

10. MUESTRA DE LA PÁGINA WEB 44

11. CONCLUSIONES 52

BIBLIOGRAFIA 53

Page 7: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

LISTA DE CUADROS pág. Cuadro 1. Cronograma de actividades año 2013, año 2014 37 Cuadro 2. Presupuestos 38

Page 8: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

8

LISTA DE FIGURAS

pág. Figura 1. Primer boceto mapa de navegación 40 Figura 2. Segundo boceto mapa de navegación 41 Figura 3. Tercer boceto mapa de navegación 42 Figura 4. Ruta de navegación seleccionada 43 Figura 5. Muestra pagina web. Misión y visión 44 Figura 6. Muestra pagina web. Historia 45 Figura 7. Muestra pagina web. Tecnología 46 Figura 8. Muestra pagina web. Recurso humano 47 Figura 9. Muestra pagina web. Funciones de la bolsa 48 Figura 10. Muestra pagina web. Resinas 49 Figura 11. Muestra pagina web. Calibre 50 Figura 12. Muestra pagina web. Contáctenos 51

Page 9: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

9

GLOSARIO

ACCESIBILIDAD: consiste en el acceso a la información de sitio web, sin ninguna limitante. ARQUITECTURA DE LA INFORMACIÓN: permite la organización de conjuntos de información permitiendo que cualquier persona los entienda y los integre a su propio conocimiento, de manera simple. BOCETO: esquema básico preliminar a cualquier representación, en cualquiera de los campos de expresión gráfica. BRIEF: escrito donde se describe la necesidad del cliente para realizar una pieza gráfica o aplicación publicitaria. CLARIDAD: en una imagen comprende la facilidad de precepción e interpretación de esta. COLOR: es la sensación producida por los rayos luminosos al impresionar los órganos visuales en función de la longitud de onda. CONTRASTE: choque visual de masas y/o colores provocados por diferencias en la composición de colores, por el tamaño relativo de la figura sobre el fondo, por escritura general de la composición. DINAMISMO: expresión de movimiento o ritmo logrado por la ilustración o composición, la ilustración representa escenas de movimiento, o bien la composición mediante grafismos o símbolos. Dan una sensación subjetiva del mismo. ENTORNO: circunscripción topológica de un sujeto o lugar. GRAFISMO: designa cualquier representación gráfico-visual que no sea fotográfico, ni tampoco tipográfico.

Page 10: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

10

GRUPO OBJETIVO: es un grupo de personas con determinados rasgos, o características a los cuales, se le enfoca un determinado producto y o servicio. ILEGIBILIDAD: dificultad en la percepción o lectura de la parte verbal del texto. Ambos rasgos están determinador por: El número de caracteres, tipo de letra, cantidad relativa imagen texto, resalte claro de las palabras, tamaño de los caracteres y existencia de alguna dificultad en su lectura. INTERFAZ GRÁFICA DEL USUARIO: comprende la forma en la que el hombre interactúa con una máquina para obtener una respuesta de esta. INTERNET: conjunto de redes de computadores que conecta y comunica a millones de personas en todo el mundo. Está integrada por millones de computadores, llamados servidores, que comparten un lenguaje común. Los computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación de la percepción o lectura de la parte verbal del mensaje. PÁGINA WEB: es la fuente de información adaptada para World Wide Web (www) y accesible mediante un navegador de internet. Esta información se presenta generalmente en formato HTML y puede contener hiperenlaces a otras páginas web constituyendo la red enlazada de la World Wide Web. PIXEL: es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea este una fotografía, un fotograma de video o un gráfico, y determinada la calidad de una imagen. RGB (Red, Green, Blue): es un modelo de color utilizado normalmente para presentar color en los sistemas de video, cámaras, y monitores de ordenadores. Es el modelo más utilizado y el más indicado para visualizar y trabajar con imágenes digitales en una pantalla SIMPLICIDAD: sencillez expresiva de imagen y texto que se refleja en una fácil

Page 11: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

11

interpretación. SITIO WEB: conjunto de páginas HTML visibles permanentemente en internet. Cada sitio web se identifica mediante una dirección (URL), que es la de la página principal o portada. Siguiendo los enlaces que se encuentran en la portada, se pueden visitar todas las páginas. USABILIDAD: de acuerdo con Jakob Nielsen, usabilidad se define como un atributo a la calidad de una página o sitio web, que determina la facilidad de la interfaz para ser utilizada. La palabra también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño. WORLD WIDE WEB: es una forma de representar la información en internet basada en páginas. Una página puede incluir tres tipos de información: texto, gráficos e hipertextos (texto resaltado, que al activarlo, se carga en otra página web). Está compuesta por servidores que proveen información garantizada en sitios que contienen páginas relacionadas a los que accede fácilmente gracias a los programas navegadores.

Page 12: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

12

RESUMEN

Para la realización de este proyecto se tomó como punto de partida crear un sitio web de la empresa Industrias Plásticas del Eje Cafetero, con base a los criterios de diseño aprendidos durante todo la formación académica, dentro de proceso de diseño y conceptualización de ideas claves que enriquecerán el proyecto se emplearon herramientas de ayuda imprescindibles para el resultado final, tales como: matriz DOFA, encuestas al público objetivo y el tipo de mercado al cual está enfocada la empresa, también se tiene en cuenta sus características, de acuerdo a esto se transmite solidez y seriedad como conceptos que se quieren resaltar en el sitio web. El sitio web generara credibilidad en los clientes, y le brindara otra forma de encontrar los servicios que ofrece esta empresa, dándole a la misma posibilidad de hacer negocios no solamente en el eje cafetero sino también a nivel nacional e internacional.

Page 13: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

13

1. PROBLEMA DE INNVESTIGACION

1.1. ANTECEDENTES La empresa Industrias Plásticas del Eje Cafetero, fue fundada en el año de 1992, la razón por la cual adquirió el nombre “Industrias Plásticas del Eje Cafetero”, fue por sus fundadores quienes decidieron implementar en la marca de la empresa el nombre de la región donde fue fundada. Industrias Plásticas del Eje Cafetero es una empresa Quindiana que cuenta con toda la disponibilidad suficiente para satisfacer la demanda y las necesidades del mercado, gracias a su desarrollo tecnológico y sistemas de control de calidad. Esta empresa está dedicada a la producción de productos plásticos que tienen la función de proteger alimentos específicos como lo son: el plátano y el banano. La razón por la cual se contactó la empresa Industrias plásticas del eje cafetero, fue la cercanía con el empresario quien con anterioridad ya había tomado la decisión de crear un sitio web, para dar a conocer sus productos, no solo en el departamento del Quindío sino también a nivel nacional. 1.2 PLANTAMIENTO DEL PROBLEMA El departamento del Quindío, se caracteriza, además de su gran producción de café, también por ser una zona altamente bananera y platanera. Este proyecto se enfoca básicamente en la parte del sector bananero y platanero, especialmente en el desarrollo de un sitio web, conociendo de antemano que es una herramienta muy necesaria en la expansión de una empresa que busca ser reconocida, no solo a nivel regional, sino a nivel nacional e internacional. El objetivo de este proyecto es comunicar de una manera precisa y contundente un contenido a través de la comunicación gráfica. En este caso sería proyectar la esencia de la empresa por medio de un sitio web, jerarquizando, estructurando, interpretando la información para lograr el objetivo final.

Page 14: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

14

1.3 FORMULACIÓN DEL PROBLEMA ¿Cómo diseñar un sitio web, para la empresa Industrias Plásticas del Eje Cafetero en el año 2014, en pro de promocionar su portafolio de servicios? 1.4 SISTEMATIZACIÓN ¿Cuáles son los referentes teóricos que tratan el tema de desarrollo de sitios web? ¿Cuál es la selección característica que debe tener un sitio web, para que se convierta en un portafolio de servicios? ¿Cuál es el desarrollo que debe tener un sitio web?

Page 15: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

15

2. JUSTIFICACION

El trabajo proporcionara la oportunidad a la empresa Industrias Plásticas del Eje Cafetero, ser conocida a nivel regional y nacional, por medio de un sitio web, donde pueda ofrecer sus servicios y productos, esto generara credibilidad de la empresa, gracias a que brindara información precisa. El abordaje de este proceso de investigación es parte importante de la formación académica y laboral, esto puede darse a través de herramientas tecnológicas o TIC, las cuales implementa el énfasis institucional. Se propone poner en práctica un sitio web ,con ello esta interacción será más eficaz pues la página tendrá espacios especializados en cada uno de sus diferentes productos, para resolver interrogantes y divulgar el sitio no solo a nivel regional, sino nacional e internacional. En las últimas décadas, el departamento del Quindío ha conseguido adelantos tecnológicos que sirven para generar empleo, debido al aporte de empresas como Industrias Plásticas del Eje Cafetero. Estas empresas cuentan con variedad de recursos humanos permitiendo soluciones a las necesidades de los usuarios y/o consumidores. Por tanto se infiere la necesidad de desarrollar un sitio web, para darles la experiencia a sus clientes de realizar compras y otros servicios a través de este medio.

Page 16: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

16

3. OBJETIVOS

3.1 OBJETIVO GENERAL

Establecer la importancia que tiene un sitio web para la empresa Industritas Plásticas del Eje Cafetero en el campo del diseño Contemporáneo y las nuevas tecnologías dentro del mercado, para promover la participación de los consumidores en un cambio constante mediante la actualización periódica del sitio.

3.2 OBJETIVOS ESPECÍFICOS Hacer referencia teórica que trate el tema de desarrollo de sitios web.

Seleccionar la característica que debe tener un sitio web, de la empresa Industrias Plásticas del Eje Cafetero, para que se convierta en un portafolio de servicios.

Desarrollar el contenido del sitio web, de la empresa Industrias Plásticas del Eje Cafetero.

Page 17: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

17

4. MARCO DE REFERENCIA

4.1 MARCO TEÓRICO

4.1.1 El internet y su importancia en la historia1. Situamos en un medio de comunicación como el Internet que ha duplicado su dimensión en los últimos años, tanto en el aspecto físico de la red (servidores y conexiones) como en el número de personas que usan el sistema. La tecnología de Internet es una precursora de la llamada “superautopista de la información, un objetivo teórico de las comunicaciones informáticas que permitiría proporcionar a colegios, bibliotecas, empresas y hogares acceso universal a una información de calidad que eduque, informe y entretenga”.

Dicho lo anterior, el Internet ha provocado que existan páginas especializadas en búsqueda de información, un ejemplo de esto es la creación de la World Wide Web. La tecnología de la comunicación facilita la conectividad global, y el WWW es un medio funcional para que la gente de todo el mundo localice información y comparta el conocimiento. El WWW es: un sistema de navegación para Internet, un sistema de administración y distribución de información y un formato dinámico para la comunicación masiva personal”1. La relación entre la economía y las ciencias de la comunicación es evidente en casos cuando la intervención de los medios en la construcción de una democracia y demás políticas que rigen a un país, sin embargo, estas campañas se encuentran ligadas a fuertes empresas económicas que podemos llamar también "Empresas Mediáticas". Sin embargo Internet y otros medios electrónicos (como el celular) a un son medios imparciales y aprovecharlos es nuestra oportunidad de cambiar, y tratar de equilibrar los excesos en los que incurren los medios masivos de comunicación, en especial la televisión que espero algún día desaparezca como es ahora, y se convierta en una oferta más global e interactiva.

1 EAGER, Bill. World Wide Web paso a paso: la guía. Prentice-Hall Hispanoamericana, S.A

.Naulcalpan de Juárez: Corporation INC, 1994. 39p.

Page 18: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

18

4.1.2 El diseño gráfico. “El diseño gráfico se encuentra en un constante cambio, día a día, Toda persona física o moral proyecta consciente o inconscientemente una imagen en los otros, cuyos pormenores predisponen una percepción particular según cada uno de los interlocutores. Así, la empresa vende, a través de objetos perceptibles y de servicios, imágenes que no son conscientemente percibidas. Todos somos compradores de imágenes, y es la imagen la que perseguimos muy a menudo inconscientemente. Compramos imágenes contenidas en los objetos y los servicios. A través de un objeto, a través de su presentación y su embalaje, o de una empresa y los servicios que ofrece, sentimos una impresión que puede ser por ejemplo, de eficacia, de elegancia, de potencia, de precisión... o más exactamente, una combinación de estas impresiones.”2

Según Joan Costa, como se muestre el producto, así mismo va a hacer la respuesta de compra, que es de vital importancia el diseño gráfico en la oferta de los productos de cualquier producto, servicio o empresa. En el caso de diseño de sitio web para la empresa Industrias Plásticas del Eje Cafetero, se plantea un desarrollo gráfico visual enriquecido por las características morfo semánticas de los productos ofrecidos, es decir, si la empresa ofrece el servicio de empaques para el sector bananero entonces nos encontraremos con una página web donde predominan, colores como amarrillo y verde, y la forma característica del producto.

4.1.3 Navegación en la web. Pensar acerca de un vínculo más básico de la web, los enlaces son texto o gráficos en una página que con conecta a otra página u otra ubicación diferente dentro de una sola página, que permiten el salto de una idea al siguiente concepto: si estás leyendo una historia acerca de la política exterior de EE.UU, puede saltar a una página con información detallada sobre las características demográficas del país, gracias a un enlace. De acuerdo con el autor Kalbach, James, la Navegación por internet se define de la siguiente manera:

La teoría y práctica de cómo la gente se mueve de página a página en la web.

2 EAGER, Bill. World Wide Web paso a paso: la guía. Prentice-Hall Hispanoamericana, S.A.

Naulcalpan de Juárez: Corporation INC, 1994. 45p.

Page 19: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

19

El proceso de meta-dirigida la búsqueda y localización de la información vinculada, por navegar por la web.

Todos los enlaces, etiquetas y otros elementos que facilitan el acceso a las páginas y ayudar a orientar las personas sí mismos, mientras interactúa con una red dado el sitio.3

Teniendo en cuenta estos diferentes parámetros sobre la navegación por internet, podemos decir que el señor Cooper, Alan define: “El Diseño web de navegación se trata de determinar la importancia y la relevancia de las páginas y el contenido de su sitio. Esto requiere un juicio en el establecimiento de relaciones significativas entre las páginas de información. En conjunto, los elementos de navegación de determinar no sólo si se puede encontrar la información personas que busca, sino también cómo la experiencia de esa información.” Los críticos de la navegación por la conclusión de que debe ser eliminado de los sitios web de todos juntos. Autor e interacción de diseño defensor de Alan Cooper, por ejemplo, sugiere que la navegación no es necesario. Escribe: "Los sitios web durante la infancia de la Web eran por necesidad construidos sólo con simples etiquetas HTML, y se vieron obligados a dividir su funcionalidad y el contenido en un laberinto (¿una web?) De las páginas por separado. Esto hizo que un esquema de navegación de un componente inevitable de cualquier diseño de página web, y por supuesto, una clara, visualmente esquema de navegación es mejor que uno oscuro u oculto. Sin embargo, muchos diseñadores web tienden a deducir de esto que los usuarios quieren sistemas de navegación.” No todos los mecanismos de navegación de un sitio son iguales, su trabajo consiste en ordenar a cabo. Debe determinar el propósito y la importancia de la navegación dentro de su sitio, con lo que las opciones similares juntos y presentarlos como una unidad cohesiva. Por supuesto, hay convenios para empezar las barras y las pestañas se usan comúnmente para los principales navegación, los mecanismos verticales de la izquierda para la navegación de los locales, pero no hay reglas de uso establecidas, y existen muchas variaciones”4

Entender el tipo de navegación permite a las personas ver enlaces y reorientarse en las páginas nuevas.

3 KALBACH, James, “Designing Web Navigation”, O´Reilly. Four Editions. 150p

4 COOPER, Alan, Interaction Design Newsletter [en linea]. Santiago de Cali: Universidad Autónoma de Occidente 2013 [consultado 15 de Febrero de 2013] disponible en internet: www.cooper.com

Page 20: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

20

Que hace la navegación principal?; varios aspectos que distinguir de los tipos de navegación: El tipo de contenido de un mecanismo de acceso El Comportamiento de los enlaces de navegación y la transición a la página

siguiente Las tareas y modos de buscar el mecanismo de apoyo El tratamiento visual de las opciones de navegación La posición de una exploración en una página

Es más, el tipo de página en la que aparece un menú de navegación determina en gran medida el propósito de la navegación. La navegación en las páginas de inicio suele ser diferente de la navegación en las páginas de productos, por ejemplo, y los visitantes esperan que ciertos elementos de navegación que aparecen en las páginas de resultados. El papel de la página se reproduce en el sitio en general también da propósito a diferentes tipos de navegación.

4.1.4 ¿Por qué accesibilidad web?5 A simple vista, existen múltiples razones para no implementar la accesibilidad en los sitios web. Desde el punto de vista empresarial se sabe que no es un proceso trivial, ni gratuito y, además, en muchas ocasiones, ni tan solo es demandado por el cliente. Desde el punto de vista de la ingeniería, se aducen razones como la falta de tiempo, de formación, de herramientas o de guías de desarrollo.

Por otra parte, es necesario explicar y entender por qué la accesibilidad web es importante y qué tipo de beneficios va a aportar. Para ello se van a explorar cuáles son las implicaciones que tiene la implementación de la accesibilidad web desde los siguientes puntos de vista: El punto de vista social El punto de vista personal El punto de vista técnico El punto de vista financiero El punto de vista legal

5 LAZAR, Dudley Sponaugle, ¿por qué accesibilidad web? [en linea]. Santiago de Cali: Universidad Autónoma de Occidente 2013 [consultado el 20 de Enero de 2013] disponible en internet: http://www.hipertext.net

Page 21: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

21

El punto de vista social

El uso de la web se está extendiendo rápidamente y se está constituyendo como un elemento esencial de nuestra vida diaria. Cada vez se utiliza más para acceder a la información y servicios gubernamentales, educación, entretenimiento, comercio, etc. en ocasiones sustituyendo a las formas tradicionales. Para las personas con discapacidad, la web constituye una oportunidad sin precedentes para participar cómoda y plenamente en la sociedad. Con ella desaparecen todos los inconvenientes físicos y por primera vez en la historia pueden ejercer las mismas tareas en condiciones muy parecidas a las personas sin discapacidad. Así, se crean nuevas opciones de comunicación, interacción y trabajo, que de otra manera serían muy difíciles o imposibles de realizar. Es frecuente la opinión de que las personas discapacitadas son una minoría. En conclusión, invertir en accesibilidad tendrá una repercusión positiva en un gran número de personas. El punto de vista personal

Desde el punto de vista más personal, seguramente también el más egocéntrico o egoísta, se debería reflexionar sobre dos aspectos: Nuestra posición respecto a la discapacidad Los nuevos paradigmas de interacción. En muchas ocasiones la discapacidad es vista como algo ajeno por aquellas personas que no la padecen. Sin embargo, es preciso darse cuenta de que a lo largo de nuestras vidas se podrán sufrir episodios de discapacidad, aunque a veces sean temporales, y que es muy probable que se padezca alguna discapacidad en la vejez.

El punto de vista técnico

Realizar un sitio web accesible, implica hacer un sitio web tecnológicamente avanzado y de calidad. La principal ventaja que ofrecen las nuevas tecnologías se basan en una clara separación entre el contenido del sitio y su presentación. Este nuevo modelo permite obtener, entre otros, dos importantes beneficios:

Page 22: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

22

Reducción del tiempo de mantenimiento, puesto que rediseñar una sitio web implicará tan sólo cambiar su presentación sin tener que modificar los contenidos. Adaptabilidad al dispositivo del usuario, lo que significa que un mismo contenido podrá ser presentado de formas diferentes en función del dispositivo que esté utilizando el usuario. En la figura se puede observar cómo se presenta la página principal del popular buscador en un móvil. El punto de vista financiero

Iniciar un proyecto web accesible no tiene porqué ser más caro. Y aunque así fuera, no es la inversión inicial la que determina la viabilidad ni el éxito de un proyecto, sino su relación entre costo y beneficio. Así pues conviene valorar qué beneficios ofrece la creación de sitios web accesible respecto de: - El impacto sobre el capital intelectual de la empresa

- El impacto sobre la audiencia del sitio web

- El impacto sobre la efectividad del sitio web

El punto de vista legal

La visión social de la discapacidad en los últimos años ha ido cambiando progresivamente y no son pocos los países en los que se está creando la legislación y las normas necesarias para que las personas discapacitadas puedan formar parte activa de la sociedad. Aunque hay una clara tendencia a que todos los países desarrollen una legislación y normativas específicas, actualmente existe mucha disparidad entre unos y otros.

Page 23: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

23

4.1.5 Usabilidad y accesibilidad6Usabilidad: grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos.

En la definición podemos observar que la usabilidad se compone de dos tipos de atributos: Atributos cuantificables de forma objetiva: como son la eficacia o número de

errores cometidos por el usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la consecución de una tarea.

Atributos cuantificables de forma subjetiva: como es la satisfacción de uso,

medible a través de la interrogación al usuario, y que tiene una estrecha relación con el concepto de Usabilidad Percibida.

La usabilidad de una aplicación debe ser entendida siempre en relación con la forma y condiciones de uso por parte de sus usuarios, así como con las características y necesidades propias de estos usuarios. Un diseño no es en sí mismo usable: " lo es para usuarios específicos en contextos de uso específicos ". Pretender que una aplicación web sea usable independientemente de quién y cómo la use se corresponde más con una visión o enfoque de la usabilidad (en ocasiones necesaria), que con una visión realista y práctica. Esto es debido a que normalmente toda aplicación se diseña con la intención de satisfacer las necesidades de una audiencia concreta y determinada, por lo que será más usable cuanto más adaptado esté su diseño a esta audiencia específica, y por tanto menos lo esté para el resto de personas. El concepto de usabilidad puede ser definido, además de como atributo de calidad de una aplicación, consecuentemente, como disciplina o enfoque de diseño y evaluación. Se suele hablar entonces de Ingeniería de la Usabilidad - conjunto de fundamentos teóricos y metodológicos que aseguren el cumplimiento de los niveles de usabilidad requeridos para la aplicación

6 FOLMER, Bosch; La Usabilidad en el diseño [en linea]. Santiago de Cali: Universidad Autónoma

de Occidente 2013 [consultado el 21 de Marzo de 2013] disponible en internet en: http://recuperacionyaccesoalainformacion.retrocables.es, fecha de acceso. 21.03.2013

Page 24: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

24

. Un concepto íntimamente ligado al de usabilidad es el de accesibilidad. Éste ya no se refiere a la facilidad de uso, sino a la posibilidad de acceso. En concreto a que el diseño, como prerrequisito imprescindible para ser usable, posibilite el acceso a todos sus potenciales usuarios, sin excluir a aquellos con limitaciones individuales.

4.1.6 Arquitectura de la información “la interfaz es la aplicación, puesto que es la parte que ven y a través de la cual interactúan, debemos entender que la usabilidad de la aplicación depende no sólo del diseño del interfaz, sino también de su arquitectura ,estructura, organización, en otras palabras, del componente no visible del diseño.7

La Arquitectura de la Información, es un enfoque de diseño que ha cobrado especial relevancia estos últimos años por esta misma razón.

“Es definida como el arte y la ciencia de organizar espacios de información con el fin de ayudar a los usuarios a satisfacer sus necesidades de información. La actividad de organizar la estructuración, clasificación y rotulado de los contenidos del sitio web”.8

Hay dos aspectos de mucha importancia para resaltar:

La Recuperación de la Información: El objetivo principal de definir una correcta arquitectura de información es facilitar al usuario la recuperación de información. Esto se consigue por un lado posibilitando que el usuario pueda encontrar información - diseño y definición de índices, clasificaciones, taxonomías y sistemas de recuperación de información o sistemas de búsqueda en el sitio web, y por otro lado, posibilitando que cada elemento de información pueda ser encontrado - descripción a través de metadatos y optimización del sitio para 7 Folmer, Bosch; La Usabilidad en el diseño y la Arquitectura de la Información, disponible en internet en: http://recuperacionyaccesoalainformacion.retrocables.es, fecha de acceso. 10.11.2012 8 Cooper, Alan, Interaction Design Newsletter, disponible en internet desde en: www.cooper.com,

fecha de acceso. 15.05.2012.

Page 25: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

25

buscadores.

El diseño a nivel conceptual: Las técnicas propias dentro del ciclo de vida del desarrollo del sitio, se ubican en fases de diseño conceptual. Las fases de diseño visual están, en cambio, realizadas por técnicas de Ingeniería de la Usabilidad, Diseño de Interfaces y Diseño de Información.

Diseño web centrado en el usuario

Para asegurar que un sitio cumple con los niveles de usabilidad requeridos, el diseñador necesita de una metodología, de técnicas y procedimientos.

“El Diseño Web Centrado en el Usuario se caracteriza por asumir que todo el proceso de diseño y desarrollo del sitio web debe estar conducido por el usuario, sus necesidades, características y objetivos. 9 Centrar el diseño en sus usuarios en oposición a centrarlo en las posibilidades tecnológicas o en nosotros mismos como diseñadores, implica involucrar desde el comienzo a los usuarios en el proceso de desarrollo del sitio; conocer cómo son, qué necesitan, para qué usan el sitio; testar el sitio con los propios usuarios; investigar cómo reaccionan ante el diseño, cómo es su experiencia de uso; e innovar siempre con el objetivo claro de mejorar la experiencia del usuario. “El proceso de Diseño Web Centrado en el Usuario propuesto en este trabajo se divide en varias fases o etapas, algunas de las cuales tienen carácter iterativo.10

4.2 MARCO CONTEXTUAL

El proyecto está referido a la empresa Industrias Plásticas del Eje Cafetero ubicada en la ciudad de Armenia (departamento del Quindío), en la calle 51 # 6-

9 Norman, Draper User-Centered Design, 1986). 10 Cooper, Alan, Interaction Design Newsletter, disponible en internet desde en: www.cooper.com, fecha de acceso. 17.03.2013

Page 26: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

26

106 Centro Comercial San Pedro, bodega # 9, Km1. Vía Jardines. El deseo de crear empresa y trabajar con esfuerzo llevo a construir en el año de 1992 la empresa Industrias Plásticas del Eje Cafetero. Siendo reconocidos en la ciudad de Armenia como una empresa líder en el sector del plástico especializado para envolver frutos como el banano y el plátano.

Colombia, oficialmente República de Colombia, es una república unitaria de América situada en la región noroccidental de América del Sur. Está constituida en un estado social y democrático de derecho cuya forma de gobierno es presidencialista. Está organizada políticamente en 32 departamentos descentralizados y un Distrito Capital. La capital de la república es Bogotá.

La superficie de Colombia es de 2.129.748 km², de los cuales 1.141.748 km² corresponden a su territorio continental y los restantes 988.000 km² a su extensión marítima, de la cual mantiene un diferendo limítrofe con Venezuela y Nicaragua. Limita al este con Venezuela y Brasil, al sur con Perú y Ecuador y al noroeste con Panamá; en cuanto a límites marítimos, colinda con Panamá, Costa Rica, Nicaragua, Honduras, Jamaica, Haití, República Dominicana y Venezuela en el mar Caribe, y con Panamá, Costa Rica y Ecuador en el océano Pacífico.

Colombia es la única nación de América del Sur que tiene costas en el océano Pacífico y en el Mar Caribe, en los que posee diversas islas como el Archipiélago de San Andrés, Providencia y Santa Catalina. Colombia tiene el número más grande de especies por unidad de área en el planeta, en total es el segundo país más megadiverso del mundo después de Brasil, el cual es más extenso que Colombia.

El país es la cuarta nación en extensión territorial de América del Sur y, con alrededor de 47 millones de habitantes, la tercera en población en América Latina. Es la tercera nación del mundo con mayor cantidad de hispanohablantes. Colombia posee una población multicultural, en regiones y razas. Su población es, en su mayoría, resultado del mestizaje entre europeos, indígenas y africanos, con minorías de indígenas y afrodescendientes. En el Caribe colombiano hay una cantidad importante de

Page 27: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

27

descendientes del Medio Oriente. El producto interno bruto de paridad de poder adquisitivo de Colombia ocupa el cuarto puesto en América Latina y el puesto 28 a nivel mundial. El PIB nominal colombiano es el cuarto más grande de América Latina y ocupa el puesto 30 a nivel mundial. 11

El Quindío es uno de los 32 departamentos de Colombia. Se encuentra en la región oeste-central del país. Su capital es Armenia. Se encuentra ubicado en la región andina, forma parte del Eje Cafetero y de la región paisa, limita al norte con Risaralda, por el sur y el este con Tolima, al oeste con Valle del Cauca. 12

El Eje Cafetero, también llamado Triángulo del Café es una región topográfica de Colombia, comprendida en su extensión por los departamentos de Caldas, Risaralda, Quindío, la región nor-oriental del departamento de Valle del Cauca, toda la región del suroeste de Antioquia y el nor-occidente del Tolima.

Hace parte de la región Colombiana conocida como el eje Cafetero, y las ciudades capitales de los tres primeros departamentos mencionados son Manizales, Pereira y Armenia respectivamente y divididas en ejes temáticos. Esta región fue una notable productora de caucho, a comienzos del siglo XX pero luego se dedicó más al café, uno de los más importantes centros en importación y redistribución de mercancías de fabricación europea. El mismo grupo de comerciantes que promovió estas actividades sería el que años más tarde impulsaría el desarrollo industrial de la zona. 13

11

Wikipedia la enciclopedia libre [en línea](consultado en la fecha. 19.05.2014), disponible en: http://es.wikipedia.org/wiki/Colombia 12

Wikipedia la enciclopedia libre [en línea](consultado en la fecha. 19.05.2014), disponible en: http://es.wikipedia.org/wiki/Quind%C3%ADo 13

Wikipedia la enciclopedia libre [en línea](consultado en la fecha. 19.05.2014), disponible en: http://es.wikipedia.org/wiki/Eje_Cafetero

Page 28: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

28

5. BRIEF

5.1 INFORMACIÓN SOBRE LA EMPRESA 5.1.1 Ámbito de actividad. La empresa Industrias Plásticas del Eje Cafetero, se preocupa por el estado de los frutos como el plátano y el banano, fabricando envolturas que protejan a estos frutos de los factores externos que se pueden presentar en los cultivos. 5.1.2 Objetivo del proyecto. Con el diseño del sitio web de la empresa Industrias Plásticas del Eje Cafetero se pretende posicionarla mejor entre los usuarios actuales y potenciales. 5.1.3 Debilidades del servicio. Se encontró que la empresa Industrias Plásticas del Eje Cafetero necesita de un sitio web para obtener beneficios ya sea con clientes que tienen continuidad, o con clientes que pretende abordar con el portafolio de servicios. 5.1.4 Oportunidades. El mercado en el que se encuentra la empresa Industrias Plásticas del Eje Cafetero está en expansión. La empresa Industrias Plásticas del Eje Cafetero cuenta actualmente con los recursos financieros que hacen posible la ejecución del proyecto 5.1.5 Fortalezas del servicio. La empresa Industrias Plásticas del Eje Cafetero, cuenta con la experiencia y la plataforma tecnológica para satisfacer las necesidades de los clientes. 5.1.6 Amenazas del servicio. Competidores cercanos a la empresa Industrias Plásticas del Eje Cafetero, prestan un servicio enfocado a una mejor calidad y mejor servicio con el cliente. Por ende una empresa es una actividad resultante de una necesidad social insatisfecha en la cual pueden aparecer nuevos competidores dentro de la zona. 5.1.7 Problemas. La empresa Industrias Plásticas del Eje Cafetero, en este momento está enfocada en vender un solo producto derivado del plástico,

Page 29: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

29

mientras que la competencia puede ofrecer más productos. 5.1.8 Publico objetivo. El público objetivo de la empresa Industrias Plásticas del Eje Cafetero, comprende los estratos económicos 1, 2, 3, 4, 5,6 de la ciudad de Armenia y poblaciones aledañas que tengan la necesidad de cuidar cultivos de plátano y banano. 5.1.9 Características diferenciales del servicio. La empresa Industrias Plásticas del Eje Cafetero, se diferencia de la competencia, porque, está especializada en la envoltura del fruto bananero y platanero, siendo la única empresa de la región con más experiencia en este campo. 5.2 MERCADO El público objetivo recurre a la empresa Industrias Plásticas del Eje Cafetero por tradición desde que fue creada en 1992, los clientes potenciales se encuentran a nivel local Armenia y poblaciones aledañas. 5.2.1 Empresas competidoras. Las principales empresas competidoras, de la empresa Industrias Plásticas del Eje Cafetero son: Calypso Armenia Plásticos LC Plásticos Colombia 5.2.2 Tendencias del mercado. El mercado dentro del cual se encuentra la empresa Industrias Plásticas del Eje Cafetero está en crecimiento e igualmente han venido surgiendo nuevas empresas dentro de la misma categoría. 5.2.3 Canales de distribución. Los clientes acuden a la empresa Industrias Plásticas del Eje Cafetero por tradición o por recomendación, ya que no manejan material publicitario que dé cuenta de los servicios que esta ofrece. 5.2.4 Misión. “Prestar nuestros productos y servicios con alto nivel de cumplimiento y calidad, con el fin de desarrollar una labor empresarial eficiente, así como garantizar la estabilidad, calidad de vida y convivencia a nuestro grupo de trabajo, buscando así, la plena satisfacción de nuestros clientes, contribuyendo de esta forma al desarrollo económico y social de la región.”

Page 30: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

30

5.2.5 Visión. “En el futuro inmediato seremos reconocidos por la calidad de nuestros productos, respaldo, solidez y eficiencia en los procesos, logrando asi la satisfacción de necesidades de nuestros clientes, convirtiéndonos en una de las mejores empresas del país.”

Page 31: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

31

6. METODOLOGIA

6.1 TIPO DE ESTUDIO Y DISEÑO

La estrategia metodológica a utilizar en esta investigación será de forma cualitativa y descriptiva, ya que examinaremos los datos recolectados de acuerdo a los diferentes procedimientos que se realicen, esto se llevara a cabo con la ayuda de herramientas estadísticas, y métodos de recolección de datos tales como: entrevistas, encuestas, sondeos, con el fin de recopilar información de los usuarios, que puedan ayudar a determinar parámetros de diseño. Las necesidades que sean aportadas por parte del usuario se tendrán en cuenta para el desarrollo del sitio web, acércanos a una propuesta definitiva de diseño. Se diseñara y al mismo tiempo se evaluara el estilo del diseño para poder corregir errores de usabilidad desde los primeros momentos del desarrollo. Evaluar el sitio web únicamente una vez finalizado su desarrollo haría mucho más costosa la reparación de errores de usabilidad, ya que siempre es más económico reconducir un diseño que rediseñar completamente el sitio.

6.2 PLANIFICACIÓN DEL SITIO WEB

Todo proyecto debe comenzar por una correcta planificación. En esta etapa se identifican los objetivos del sitio, así como las necesidades, requerimientos y objetivos de la audiencia potencial. Confrontando esta información se definen los requerimientos del sitio web, entre los que podemos contar requerimientos técnicos, recursos humanos y perfiles profesionales necesarios, y adecuación del presupuesto disponible. Se trata, de establecer un equilibrio entre lo que puede ofertar el proveedor y lo que necesita el usuario.

Page 32: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

32

El sitio web, sus contenidos y diseño, deben cumplir precisamente este cometido: servir de medio para la consecución de objetivos por parte de proveedor y usuario. El diseñador debe obtener información precisa tanto de las necesidades y objetivos del proveedor como del usuario. En el primer caso, mediante entrevistas y reuniones con los responsables del sitio, será relativamente fácil obtener dicha información. Más dificultoso, pero al mismo tiempo más importante, es obtener esta información del usuario: Qué necesita, cuáles son sus objetivos, cómo se comporta y actúa, cuál será el contexto de uso y cómo afectará a la interacción, experiencia y conocimientos previos.

6.3 DISEÑO DEL SITIO WEB

Por otra parte, la etapa de Diseño es el momento del proceso de desarrollo para la toma de decisiones acerca de cómo diseñar o rediseñar, en base siempre al conocimiento obtenido en la etapa de planificación, así como a los problemas de usabilidad descubiertos en etapas de prototipo y evaluación.

6.4 DISEÑO CONCEPTUAL DE LA PÁGINA WEB

El objetivo de la fase de diseño conceptual es definir el esquema de organización, funcionamiento y navegación del sitio. No se especifica qué apariencia va a tener el sitio, sino que se centra en el concepto mismo del sitio: su arquitectura de información. “Los sitios web son sistemas hipermedia formados por conjuntos de páginas interrelacionadas por enlaces unidireccionales, pudiendo cada una de estas páginas contener sub-elementos con entidad propia, contenidos multimedia y herramientas interactivas.14

14

Yusef Hassan & Francisco J. Martín Fernández & Ghzala Iazza. Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información [en linea]. "Hipertext.net", núm. 2, 2004.

Page 33: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

33

La "estructura" del sitio web se refiere precisamente a las conexiones y relaciones entre páginas, a la topología de la red de páginas, así como a la granularidad de los elementos de información contenidos en las páginas; y la "navegación" a las posibilidades y forma en que cada página presenta las opciones de desplazamiento hacia otras páginas. La definición de la estructura del sitio puede hacerse desde dos enfoques diferentes y complementarios: aproximación descendente y ascendente. En la descendente se trata de estructurar del "todo" a las "partes", dividir los contenidos en páginas y definir los enlaces entre páginas. En la Ascendente, por el contrario, se definen los bloques mínimos de información, estructuración que va más allá de la propia segmentación de información en páginas. Una vez definida la estructuración del sitio es necesario documentarla, para así tener un modelo de referencia sobre el que sustentar el desarrollo del sitio. La forma de documentar arquitecturas se suele hacer a través de grafos y esquemas, con el objetivo de que sean de fácil y rápida comprensión por todos los miembros del equipo de desarrollo. Si la arquitectura es ascendente normalmente se documentará a través de diagramas entidad-relación. Por otro lado, cuando la arquitectura a documentar es la descendente, para sitios web proponemos el uso del vocabulario gráfico a través de unas sencillas convenciones gráficas para la diagramación de la arquitectura, podemos definir la estructura de la información así como la navegación del sitio. Otras tareas a llevar a cabo por el Arquitecto de Información o diseñador en la fase de Diseño Conceptual son: definir sistemas de clasificación para los contenidos; Elaborar índices y mapas del sitio; aplicar metadatos a cada una de las páginas y sub-elementos de información; y definir el Sistema de Rotulado.

Page 34: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

34

6.5 DISEÑO VISUAL Y DEFINICIÓN DEL ESTILO

En esta fase se especifica el aspecto visual del sitio web: composición de cada tipo de página, aspecto y comportamiento de los elementos de interacción y presentación de elementos multimedia. Con el objetivo de evitar la sobrecara informativa, en el diseño de cada interfaz se debe tener en cuenta el comportamiento del usuario en el barrido visual de la página, distribuyendo los elementos de información y navegación según su importancia en zonas de mayor o menor jerarquía visual por ejemplo, las zonas superiores del interfaz poseen más jerarquía visual que las inferiores. Además de la posición de cada elemento en la interfaz, existen otras técnicas para jerarquizar información como son: uso del tamaño y espacio ocupado por cada elemento para otorgarle importancia en la jerarquía visual, utilización del contraste de color para discriminar y distribuir información, uso de efectos tipográficos para enfatizar contenidos, rotura de la simetría y uso de efectos de relieve / profundidad para resaltar elementos. Además de evitar la sobrecarga informativa jerarquizando los contenidos mediante las técnicas descritas, para evitar la sobrecarga memorística se recomienda definir menús de navegación con un número de opciones reducido, normalmente no más de nueve diferentes.

6.6 DISEÑO DE CONTENIDOS

En el diseño de contenidos hipermedia se debe mantener un equilibrio entre lo que serían contenidos que no beneficiasen las nuevas posibilidades hipertexto y multimedia, y lo que serían contenidos confusos debido a un uso excesivo y no claro de las posibilidades hipermedia.

Page 35: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

35

Sin prescindir de las capacidades que ofrece el nuevo medio, de lo que se trata es de diseñar contenidos interrelacionados y vinculados, manteniendo cierta coherencia informativa, comunicacional y organizativa.

6.7 PROTOTIPO

La evaluación de la usabilidad del sitio web se debe realizar desde las primeras etapas de diseño, pero ¿cómo evaluar un sitio web que no está implementado? A través de prototipos. La etapa de prototipo se basa en la elaboración de modelos de la interfaz del sitio, su aspecto no se corresponde exactamente con el que tendrá el sitio una vez finalizado, pero pueden servir para evaluar la usabilidad del sitio sin necesidad de esperar a su implementación. En las primeras etapas de desarrollo del sitio web se puede hacer uso del modelo en papel o bocetación, que consiste en reproducir los aspectos básicos de la interfaz del sitio. Por ejemplo, podemos reproducir a través de bocetos cómo serán las diferentes páginas que conformarán el sitio a desarrollar, cada una en una página diferente. La reproducción suele ser a mano.

6.8 EVALUACIÓN

La evaluación de la usabilidad es la etapa más importante en el proceso de diseño centrado en el usuario, se puede realizar a través de varios métodos o técnicas y sobre diferentes representaciones del sitio (prototipos en papel, prototipos software, sitio web implementado. Después de culminar el proceso del diseño del sitio web para la empresa

Page 36: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

36

Industrias Plásticas del Eje Cafetero, se evaluara la eficacia del proceso mediante encuestas y pruebas de funcionalidad respectivamente en caso de que hayan errores dentro del proceso, se llevaran a cabo las respectivas correcciones.

6.9 TPOS DE ESTRUCTURAS 15

Jerárquica

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.

Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.

ESTRUCTURA JERÁRQUICA

Lineal

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una

15 Web estilo. [en línea]. (consultado en fecha, 19.05.2014), disponible www.webestilo.com/guia/estruct2.php3

Page 37: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

37

página, podemos ir a la siguiente página o a la anterior.

Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.

ESTRUCTURA LINEAL

Lineal con jerarquía

Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.

ESTRUCTURA LINEAL CON JERÁRQUICA

Red

La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin

Page 38: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

38

ningún orden aparente.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.

ESTRUCTURA DE RED

Page 39: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

39

7. CRONOGRAMA

Cuadro 1. CRONOGRAMA DE ACTIVIDADES AÑO 2013, AÑO 2014.

Unidades/Semanas Feb Mar Abril May Jun Jul Ago Sep Oct Nov Dic Ene Feb Mar

Definición del

problema

Realización el

análisis de los

requerimientos de

la empresa

Recopilación de la

información

Organización de la

información

Diseño preliminar

de la

estructuración de

la pagina web

Análisis y elección

de la herramientas

(Software a

utilizar)

Elaboración del

diseño lógico de la

pagina web

Elaboración del

diseño externo de

la página web

Pruebas

Propuesta a la

empresa

Page 40: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

40

8. RECURSOS

8.1 RECURSOS HUMANOS

Director de trabajo de grado: Gustavo Adolfo Ramos Director de tesis: Jhoyner Gomez Tesis elaborada por: Carlos Humberto Herrera Lozano, Sergio Daniel Aparicio

Bedoya

8.2 RECURSOS FINANCIEROS

Para la ejecución de este proyecto se estimó un presupuesto en tiempo de 14 meses, como lo demuestra la tabla del cronograma, y los gastos financieros son asumidos por el estudiante como lo justifica la siguiente tabla.

Cuadro 2. Presupuestos

Recursos Financieros (En pesos

colombianos)

14 meses

Transporte 600.000

Software y Hardware 1.000.000

Alimentación 500.000

Imprevistos 300.000

Total 2.400.000

8.3 Recursos institucionales

Equipos: Computador personal software de diseño gráfico (Adobe Ilustrador CS6, Adobe Photoshop CS6, Adobe Dreamweaver CS6), impresora con escáner incluido, USB para muestra digital y cámara digital.

Útiles: Una resma de papel bond de 90 gr. Para impresión de los textos, lápiz, borrador.

Page 41: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

41

Espacios de trabajo: en la biblioteca.

Otros insumos tales como: energía eléctrica, llamadas a telefonía celular, llamada a telefonía fija.

Page 42: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

42

9. DESARROLLO

El desarrollo del sitio web se propuso de desarrollar en el gestor de contenidos Joomla 2.5 que permite desarrollar sitios web dinámicos e interactivos. Permite crear, modificar o eliminar contenido de un sitio web de manera sencilla a través de un Panel de Administración.

9.1 Mapa de navegación

Figura 1. Primer boceto mapa de navegación

Page 43: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

43

Figura 2. Segundo Boceto mapa de navegación

Page 44: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

44

Figura 3. Tercer Boceto mapa de navegación

Page 45: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

45

9.1.2 Mapa de navegación seleccionado Figura 4. Ruta de navegación seleccionada

Para la escogencia de la mejor ruta de navegación, se optó por la que más ayudara al público objetivo en la búsqueda de la información.

Page 46: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

46

10. MUESTRA DE SITIO WEB

Figura 5. Muestra de la página web

Page 47: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

47

Figura 6. Muestra de la página web

Page 48: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

48

Figura 7. Muestra de la página web

Page 49: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

49

Figura 8. Muestra de la página web

Page 50: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

50

Figura 9. Muestra de la página web

Page 51: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

51

Figura 10. Muestra de la página web

Page 52: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

52

Figura 11. Muestra de la página web

Page 53: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

53

Figura 12. Muestra de la página web

Page 54: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

54

11. CONCLUSIONES

El desarrollo de este proyecto permitió crear una interfaz gráfica acorde al

público objetivo del sitio web de la empresa Industrias Plásticas del Eje Cafetero.

Se realizó el sitio web para la empresa Industrias Plásticas del Eje Cafetero, teniendo en cuenta su portafolio de servicios para que esté a disposición del posible público objetivo.

Gracias a la visita que se realizó a la empresa “Industrias plásticas del eje cafetero”, se pudo contextualizar el diseño de la página Web con los valores que representan a la empresa.

Page 55: DISEÑO DE SITIO WEB, PARA LA EMPRESA · 2019-11-26 · computadores personales que se conectan y consultan datos de los servidores, se denominan clientes. LEGIBILIDAD: facilitación

55

BIBLIOGRAFÍA

B.J. fogg, Cathy soohoo, David Danielson, Leslie marable, Julianne Stanford, and Ellen r. Tauber, how do People evaluate a Web site’s Credibility? [en linea]. Santiago de Cali 2012 [consultado el 24 de Octubre de 2012]. Disponible en internet: www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm. Cooper, Alan, Interaction Design Newsletter, disponible en internet desde en: www.cooper.com, fecha de acceso. 15.05.2012

DOWLING, Grahame (1994): Corporate reputations: strategies for developing the corporate brand. London: Kogan 1997. 539 p. FOLMER, Bosch; La Usabilidad en el diseño [en linea]. Santiago de Cali: Universidad Autónoma de Occidente 2013 [consultado el 21 de Marzo de 2013] disponible en internet en: http://recuperacionyaccesoalainformacion.retrocables.es, fecha de acceso. 21.03.2013 Jennifer Fleming, Web Navigation: Designing the User Experience (o’reilly, 1998): xiii.

Nielsen, Jakob,”Eyetracking Web Usability”, 1957. SALAME, Elinor and Joe Selame (1988): The company image building your identity and influence in the marketplace. New York: John Wiley and Sons.

Teve mulder, The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web (New riders, 2007).