“Diseño y desarrollo de un sitio web, legible y manejable, para la empresa

„Dulces Travesuras‟”

Tesis que para obtener el título de Licenciada en Diseño Gráfico

Presenta

Lucero Margarita Galindo Balderrama

Ciudad Obregón, Sonora; Julio, 2014.

DEDICATORIA

A mi señora madre: Por todo lo que me has brindado y has hecho de mí, por ser

siempre un gran apoyo a lo largo de mi vida y por darme la dicha de vivir y poder

ser lo que hoy soy. Una vida no me alcanzará para agradecer todo lo que has

hecho por mí y nuestra pequeña familia. Gracias a ti sé cómo ser fuerte y creo

poder afrontar todo lo que la vida me ponga. Nunca lo hubiera logrado sin ti.

¡Muchísimas gracias!

A mi padre: Por darme sus palabras de aliento y sus consejos llenos de sabiduría

a través de los años.

A mi hermana (wabol): Por darme el apoyo que necesité en esos momentos tan

difíciles que afrontamos, aun cuando eras solo tan pequeña. Siempre me has

dado una razón más para seguir adelante y, por eso, estaré eternamente

agradecida.

A mi beibi: Sin quien nunca hubiese podido lograr ser quien soy ahora. Has sido

mi todo durante mucho tiempo y no pasa un solo día sin que esté agradecida por

eso. Juntos hemos pasado por tantas cosas, y tú has sido un gran pilar para

sostenerme siempre que lo he necesitado. No hay palabras que puedan describir

lo agradecida que estoy por haber cambiado mi vida de la mejor manera posible.

A mi Jacqueline: Por ser la persona con quien siempre he podido contar. Eres

como el martillo de mi Thor, tú sabes, como dos cosas que no pueden estar

separadas porque si lo están, pierden sus poderes. Yo jamás podría estar sin ti, y

sin ti, jamás hubiese llegado aquí. Muchísimas gracias por ser parte de mi mundo.

A mi familia entera: Por haber creído en mí y darme su apoyo constante durante

toda mi vida.

AGRADECIMIENTOS

A mi asesor, Víctor Hugo Noriega Villalobos, quien me ayudó durante el proceso

de realización de esta investigación. Su guía fue indispensable y muy bien

recibida.

A mí revisor Rodolfo Alberto Aguilera Páramo, por su orientación y asesoramiento,

además de no sólo dedicarse a su trabajo, sino también dar espacio al

compañerismo y por darme su apoyo durante el tiempo que se estuvo realizando

esta investigación.

Al Instituto Tecnológico de Sonora, por darme la oportunidad de cursar una de las

mejores profesiones que se pueden cursar. Será un honor poder decir que fue en

esta institución en donde me convertí en Licenciada en Diseño Gráfico.

A todos los maestros con los que una vez tuve el placer de cursar materias.

Fueron grandiosos años llenos de sabiduría y a través de los cuales adquirí los

conocimientos necesarios para salir al mundo laboral.

A mis amigos, quienes se dieron a la tarea de convertirse en una parte

fundamental en mi trayecto al éxito. Muchas gracias por todos esos momentos de

alegría que me brindaron. Los adoro.

En general, agradezco a cada persona con la que alguna vez me topé, por hacer

de mí lo que hoy soy. Estoy segura que, si una persona de esas personas no

hubiese estado ahí, yo no estaría en dónde estoy ahora.

ÍNDICE

DEDICATORIA i

AGRADECIMIENTOS ii

ÍNDICE iii

ÍNDICE DE FIGURAS vi

RESUMEN vii

I. INTRODUCCIÓN 1

1.1 Antecedentes 1

1.2 Planteamiento del problema 2

1.3 Objetivo 3

1.4 Justificación 3

1.5 Limitaciones 3

II. MARCO TEÓRICO 4

2.1 Internet 4

2.2 La World Wide Web 5

2.2.1 La página web 5

2.2.1.1 Contenido 6

2.2.1.2 Logotipo 6

2.2.1.3 Navegación 6

2.2.1.4 Pie de página 7

2.3 Diferencia entre sitio, página y portal web 7

2.4 Elementos visuales de una página web 7

2.4.1 Menú 8

2.4.2 Botones 8

2.4.3 Frames 9

2.4.4 Banners 9

2.4.5 Enlaces 10

2.4.6 Animaciones 11

2.5 Diseño gráfico 11

2.5.1 Diseño editorial 12

2.5.2 Diseño publicitario 12

2.5.3 Diseño de marca e identidad visual 12

2.5.4 Diseño web 12

2.5.5 Diseño multimedia 12

2.6 Diseño web 13

2.6.1 Arquitectura de la información 13

2.6.1.1 Asignación de contenidos a tipos de páginas 13

2.6.1.1.1 Página principal 14

2.6.1.1.2 Página de contenido 14

2.6.2 Diseño de interfaz 15

2.6.2.1 Estructura de la página (topología) 15

2.6.2.1.1 Menú de navegación a la izquierda 15

2.6.2.1.2 Menú de navegación arriba 16

2.6.2.1.3 Menú de navegación a la derecha 17

2.6.2.1.4 Combinación de todas 17

2.6.2.2 Retícula 18

2.6.2.3 Encabezados 18

2.6.3 Composición 19

2.6.3.1 Sección áurea 19

2.6.3.1.1 Sección áurea aplicada en la web 19

2.6.3.2 Regla de los tercios 20

2.6.4 Color 20

2.6.4.1 Aplicación del color 21

2.6.4.2 Paleta de web segura 22

2.6.4.3 Color textual 23

2.6.5 Tipografía 23

2.6.5.1 Tamaño de la tipografía 25

2.6.5.2 Uso de mayúsculas y minúsculas 25

2.6.5.3 Negritas 25

2.6.5.4 Cursivas 26

2.6.6 Gráficos 26

2.6.7 Iconos gráficos 26

III. MÉTODO Y MATERIALES 28

3.1 Sujeto 28

3.2 Materiales 29

3.3 Metodología 29

3.3.1 Metodología seleccionada 40

3.3.1.1 Alcance del proyecto 41

3.3.1.2 Objetivos estratégicos 42

3.3.1.3 Especificaciones técnicas 43

3.3.1.4 Apariencia y distribución 44

3.3.1.5 Rastreo, evaluación y mantenimiento 46

IV. RESULTADOS Y DISCUSIÓN 47

4.1 Alcance del proyecto 47

4.2 Objetivos estratégicos 48

4.3 Especificaciones técnicas 48

4.4 Apariencia 49

4.5 Rastreo, evaluación y mantenimiento 55

V. CONCLUSIONES Y RECOMENDACIONES 56

REFERENCIAS BIBLIOGRÁFICAS 58

ANEXOS 60

ÍNDICE DE FIGURAS

Figura 1. Menú en línea horizontal 8

Figura 2. Diferentes tipos de botones 8

Figura 3. Frames 9

Figura 4. Banners publicitarios 10

Figura 5. Enlaces 10

Figura 6. Video animado 11

Figura 7. Menú de navegación a la izquierda 16

Figura 8. Menú de navegación a la arriba 16

Figura 9. Menú de navegación a la derecha 17

Figura 10. Menú de combinación 17

Figura 11. Retícula 18

Figura 12. Sección áurea en la web 20

Figura 13. Paleta de web segura 23

Figura 14. Formatos tipográficos 24

Figura 15. Colores 49

Figura 16. Logotipo 49

Figura 17. Botones 50

Figura 18. Photoslider 50

Figura 19. Carrington 51

Figura 20. Helvética 51

Figura 21. Página inicio 52

Figura 22. Página nosotros 52

Figura 23. Página menú 53

Figura 24. Página citas 1 53

Figura 25. Página citas 2 54

Figura 26. Página contacto 54

RESUMEN

Es bien sabido que, en la actualidad, se vive en una sociedad altamente

introducida en la tecnología, que ha estado evolucionando día a día a lo largo de

muchos años. Y uno de los más grandes beneficios de esto, es Internet y la

innumerable cantidad de oportunidades que brinda a la sociedad.

Por mencionar algunas, están las redes sociales, los portales web que funcionan

como buscadores en la red y los sitios web, mismos que brindan una gran facilidad

a las empresas para darse a conocer y atraer a sus clientes potenciales.

Es por eso que la mayoría de las empresas optan por tener su propio espacio en

la web, debido a que, no sólo podrán abarcar un mayor mercado, sino que les da

la oportunidad de tener un espacio para la comodidad de sus clientes, al que

puedan acceder cuando quieran, las veces que quieran.

Sin embargo, no sólo basta con tener el espacio perfecto para un cliente, también

es de suma importancia saber implementar un buen Diseño Web. Cada sitio web

cuenta con una página de inicio, que da a la empresa la oportunidad de “dar su

mejor cara”, y la mejor manera de hacerlo es mediante elementos visuales

atractivos que tienen el fin mostrar un buen potencial, un diseño adecuado y una

composición agradable.

El principal objetivo es crear una muy buena primera impresión porque, después

de todo, esta es la que más importa.

1

I. INTRODUCCIÓN

La presente investigación se basa en el proceso de diseño de un sitio web para

"Dulces Travesuras", mismo que se ha requerido implementar debido a la

necesidad que se presentó al no contar con este servicio para sus clientes. A

continuación se irán especificando cada uno de los aspectos que se evaluaron

para realizar una investigación a fondo acerca de este proyecto a desarrollar.

1.1 Antecedentes

Comúnmente se piensa en el diseño como en algún tipo de esfuerzo dedicado a

embellecer la apariencia exterior de las cosas. Ciertamente, el solo

embellecimiento es una parte del diseño, pero el diseño es mucho más que eso.

Wucius Wong (1996), define al diseño gráfico como un proceso de creación visual

con un propósito. A diferencia de la pintura y de la escultura, que son la realización

de las visiones personales y los sueños de un artista, el diseño cubre exigencias

prácticas. Una unidad de diseño gráfico debe ser colocada frente a los ojos del

2

público y transportar un mensaje prefijado. Un producto industrial debe cubrir las

necesidades de un consumidor.

Así pues, dentro del diseño gráfico se encuentra el diseño multimedia y web. Este

consiste en la planeación, el diseño y la implementación de sitios web. Requiere

tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la

información y la interacción de medios como el audio, texto, imagen, enlaces y

vídeo. Es útil para aquellas empresas que buscan entrar al mundo de lo virtual por

medio de sitios web, con el fin de tener un alcance en el mercado de mayor

extensión.

Es evidente que la sociedad en que se vive hoy en día es mayormente visual, por

lo que gran cantidad de empresas buscan atrapar al espectador mediante diseños

atractivos, lúdicos. Pero, como Eric Eaton (2003) menciona en su libro "Diseño

web: elementos de interfaz", un buen diseño no es la única garantía del éxito,

aunque es uno de los factores que recae en un diseñador.

Es por eso que la empresa "Dulces Travesuras", decidió extender sus alcances en

el mercado mediante la implementación de un sitio web. Es una empresa

relativamente nueva, de giro repostería, que inicia con la venta de bollitos en casa

a familiares y amigos y, que poco a poco, ofrecen otro tipo de productos como

pasteles, decoración de eventos y paquetes de mesas saladas y postres. Por el

momento, los días que más ventas tienen son las fechas especiales como el 14 de

febrero, día de las madres, día del niño, entre otras.

1.2 Planteamiento del problema

Actualmente, la empresa "Dulces Travesuras" no cuenta con un sitio web, lo que

la deja en desventaja con las demás empresas de este giro, que sí cuentan con

uno; además de que es relativamente nueva. Por lo que se ve en la necesidad de

proyectarse mayormente en el mercado y ser conocida por sus clientes

3

potenciales mediante un sitio web legible, específico y diseñado adecuadamente

para las necesidades de sus consumidores.

¿Qué beneficios brindará un diseño de interfaz implementado en un sitio web, de

acuerdo a las necesidades que "Dulces Travesuras" presenta?

1.3 Objetivo

Diseñar un sitio web para la empresa "Dulces Travesuras", utilizando los

elementos de interfaz de diseño web, con el fin de obtener resultados

satisfactorios tanto para los consumidores como para la empresa. Es decir, ofrecer

facilidad en la navegación y atraer un mayor número de clientes, respectivamente.

1.4 Justificación

Se aportará a la empresa la oportunidad de tener un posicionamiento en el

mercado de tal manera que esta logre ser reconocida, mediante un sitio web con

diseño limpio y estético, con usabilidad cómoda para el cliente. Además de

generar un crecimiento tanto profesional, como económico.

1.5 Limitaciones

Al ser este un sitio web que se va a diseñar y elaborar para un cliente específico,

es probable que surjan diferencias entre este y el diseñador, principalmente, al

momento de elegir el estilo del que el sitio será regido.

4

II. MARCO TEÓRICO

En este capítulo, se desarrollan los temas de interés relacionados con el proyecto

realizado, mismos que se abordan de lo general a lo particular.

2.1 Internet

En el siglo XXI la informática, la tecnología y por supuesto Internet, se han

convertido en ejes fundamentales de comunicación y desarrollo. Alicia Piwonka

(1996) menciona que, “la riqueza de información técnica y comercial que se está

encontrando en Internet, la está convirtiendo en una herramienta vital para las

comunicaciones a nivel mundial”. Y es importante tener en cuenta que Internet es

una de las herramientas de comunicación más importante y fuerte en la

actualidad.

No solo por ser una herramienta que está a la vanguardia del mundo es

importante, sino que Internet tiene innumerables ventajas comunicacionales, una

5

de ellas es la ventaja de poder comunicarse con millones de personas en un

mismo instante o, como menciona Alicia Piwonka (1996), “la ventaja de crear un

espacio de conocimiento abstracto que permite con facilidad adentrarse en

mundos desconocidos, accediendo de esta manera de forma inmediata y sin

precedentes a formas de vida y culturas ignoradas”. Por otro lado, su ventaja más

importante es el alto grado de potencial de aprendizaje que puede ofrecer para el

desarrollo social e individual de cualquier usuario en la red.

2.2 La World Wide Web

World Wide Web, o simplemente Web, es el universo de información accesible a

través de Internet, una fuente inagotable del conocimiento humano.

Usando la Web, se puede acceder a miles de páginas de información. Informática

Milenium S.A de C.V. (2014, ¶ 3), afirma que “usando el Web, se tiene acceso a

millones de páginas de información. La exploración en el Web se realiza por medio

de un software especial denominado Browser o Explorador. La apariencia de un

Sitio Web puede variar ligeramente dependiendo del explorador que use. Así

mismo, las versiones más recientes disponen de una funcionalidad mucho mayor

tal como animación, realidad virtual, sonido y música”.

2.2.1 La página web

Una página de Internet o página Web es un documento electrónico adaptado

particularmente para el Web, que contiene información específica de un tema en

particular y que es almacenado en algún sistema de cómputo que se encuentre

conectado a la red mundial de información denominada Internet, de tal forma que

este documento pueda ser consultado por cualesquier persona que se conecte a

esta red mundial de comunicaciones y que cuente con los permisos apropiados

para hacerlo.

6

Informática Milenium S.A de C.V. (2014, ¶ 3), menciona “una página Web tiene la

característica peculiar de que el texto se combina con imágenes para hacer que el

documento sea dinámico y permita que se puedan ejecutar diferentes acciones,

una tras otra”. Es así, como a través de la selección de texto remarcado o de las

imágenes, se puede conducir a otra sección dentro del documento, abrir otra

página Web, iniciar un mensaje de correo electrónico o transportarse a otro Sitio

Web totalmente distinto a través de sus hipervínculos.

2.2.1.1 Contenido

Los sitios web suelen estar más enfocados al contenido que el software

tradicional. La intersección entre un sitio y su contenido, a menudo, es muy

difuminada. Podría decirse que el contenido de un sitio web es primordial al

momento de su desarrollo.

2.2.1.2 Logotipo

Un logotipo es importante para cualquier corporación, debido a que tiene el fin de

brindar una imagen que la identifique y dé reconocimiento de esta ante la

competencia.

2.2.1.3 Navegación

Para que un sitio web tenga el éxito esperado, es necesario que este conste de,

entre otras cosas, facilidad para ser, tanto encontrado, como interpretado. Es

decir, sus elementos deben ser concisos y sólo los necesarios.

2.2.1.4 Pie de página

7

El pie de página es una pequeña zona que ocupa la parte inferior de un sitio web,

y aunque su tamaño es modesto, resulta de suma importancia en términos de

diseño y para ofrecer información adicional. Por general, se incluyen los derechos

de autor, información de contacto, slogan de la empresa, entre otras.

2.3 Diferencia entre sitio, página y portal web

Una página web es una fuente de información adaptada para la World Wide Web

(Web) y accesible mediante un navegador de Internet. Ésta información se

presenta generalmente en formato HTML y puede contener hipervínculos a otras

páginas web, dando lugar, así, a la red enlazada de la World Wide Web.

Un sitio web es un conjunto de páginas web, contenidos en un dominio de Internet

o subdominio en la World Wide Web en Internet. Todos los sitios web

públicamente accesibles llegan a formar una gigantesca red de información de

recursos de alcance mundial.

Un portal de Internet es un sitio web cuya característica fundamental es la de

servir de Puerta de entrada (única) para ofrecer al usuario, de forma fácil e

integrada, el acceso a una serie de recursos y de servicios relacionados a un

mismo tema. Incluye: enlaces, buscadores, foros, documentos, aplicaciones,

compra electrónica, entre otros. Principalmente un portal en Internet está dirigido a

resolver necesidades de información específica de un tema en particular.

2.4 Elementos visuales de una página web

Una página web está compuesta de una serie de elementos visuales, que tienen el

fin de brindar una navegación efectiva para el usuario.

2.4.1 Menú

8

Los menús, son un listado o un conjunto de opciones que le dan acceso a cada

una de las secciones del documento electrónico. Estos constituyen el mecanismo

principal para guiar al usuario hacia un recorrido ordenado del sitio. Pueden ser de

tipo silice, tipo clásico (véase figura 1) o tipo selección.

2.4.2 Botones

Los botones son íconos que se utilizan para que el usuario los pulse y se ejecute

una acción determinada. Patrick Lynch (2004), afirma que una barra de botones

puede contener información sobre la ubicación del usuario dentro del sitio, de

modo parecido a como, en los libros de papel, los títulos de capítulo en cada

página informan al lector. (Véase figura 2).

2.4.3 Frames

Figura 1. Menú en línea horizontal. Fuente: http://www.csstea.com (2014).

Figura 2. Diferentes tipos de bonotes. Fuente: http://www.pasionseo.com/wp-content/uploads/2013/02/gratis-botones-psd.jpg (2014).

9

Los frames son un conjunto de divisiones que se le pueden hacer a una página

web, y que permiten dividir la pantalla en varias partes o secciones. Se utilizan

generalmente para colocar el menú principal del sitio, el contenido y, si es el caso,

banners o avisos.

2.4.4 Banners

Un banner es un gráfico comúnmente utilizado en internet para dar publicidad en

un sitio web. Son anuncios o spots publicitarios basados en una imagen gráfica

que se muestra al cargar una página web. (Véase figura 4).

Figura 3. Frame. Fuente: http://www.guiadigital.gob.cl/guiaweb_old/guia/capitulos/tres (2014).

10

2.4.5 Enlaces

Los enlaces son un conjunto de vínculos (uniones entre una página web y otra) de

la información que puede presentarse utilizando distintos medios, como

documentación de texto, gráficos, audio, video, animación o imagen.

Figura 4. Banners publicitarios. Fuente: http://www.beautifullife.info/wp-content/uploads/2009/12/09/04.jpg (2014).

Figura 5. Enlaces. Fuente: http://www.homeandlearn.co.uk/WD/images/chapter4/index_page_links.gif (2014).

11

2.4.6 Animaciones

Son aplicaciones diseñadas para crear, desde simples animaciones, hasta

películas interactivas, mayormente elaboradas en Flash. Son muy usadas en el

diseño de páginas web, desde barras de navegación, hasta animaciones

complejas que pueden incluir sonido.

2.5 Diseño gráfico

Wucius Wong (1996), define al diseño gráfico como un proceso de creación visual

con un propósito. A diferencia de la pintura y de la escultura, que son la realización

de las visiones personales y los sueños de un artista, el diseño cubre exigencias

prácticas. Una unidad de diseño gráfico debe ser colocada frente a los ojos del

público y transportar un mensaje prefijado.

Figura 6. Video animado. Fuente: http://www.videofacil.net/images/a4.jpg (2014).

12

2.5.1 Diseño editorial

El diseño editorial es una rama del diseño gráfico que se dedica a la diagramación

y producción de piezas literarias como libros, revistas, diarios, publicaciones

varias, manuales, entre otros.

2.5.2 Diseño publicitario

Comprende la creación, maquetación y diseño de publicaciones impresas, también

el soporte para otros medios visuales, tales como la televisión o internet.

2.5.3 Diseño de marca e identidad visual

Consiste en mucho más que sólo diseñar el logotipo de una empresa, es reflejo de

la filosofía de esta, su manera de trabajar. Se trata de plasmar visualmente todos

esos conceptos, hacer que sean perceptibles por las personas.

2.5.4 Diseño web

Se refiere a la actividad que consiste en estructurar los elementos gráficos de un

sitio web para expresar estéticamente la identidad visual de una compañía u

organización. Se trata de una etapa de diseño virtual más que de diseño funcional.

2.5.5 Diseño multimedia

Combina los distintos soportes de la comunicación –el texto, el sonido, la imagen,

la fotografía, la animación gráfica y el video– de una forma interactiva, creando un

vínculo participativo con el usuario.

13

2.6 Diseño web

El diseño web es una de las disciplinas del diseño, entre las que se encuentra

también el diseño gráfico, que constituye una de las funciones creativas más

elementales del marketing por Internet y que tiene por objetivo la producción de

sitios web. El propósito del diseño web no sólo es lograr un efecto visual agradable

y armonía entre los distintos elementos que integran un sitio web, sino también

alcanzar un óptimo desempeño en su operación y el máximo nivel de exposición

posible para cumplir satisfactoriamente con la función de promoción para la que

son creados los sitios.

El diseño web es una de las disciplinas tecnológicas que han venido

evolucionando rápidamente en esta última década y se ha convertido en una de

las áreas de mayor oportunidad dentro de una industria en constante evolución y

crecimiento.

En el ámbito empresarial, las páginas web se han convertido sin duda en una

potente arma de comunicación y en un canal de ventas indispensable para toda

empresa.

2.6.1 Arquitectura de la información

Es la organización del total de los contenidos que permite que las personas

encuentren lo que buscan dentro de un sitio.

2.6.1.1 Asignación de contenidos a tipos de páginas

La jerarquía al asignar contenido a las páginas es de suma importancia para

mantener una armonía y facilidad para el usuario al momento de navegar.

14

2.6.1.1.1 Página principal

La organización del sitio se basa en la página principal o homepage, que actúa

como punto de entrada. En la estructura jerárquica ocupa el lugar superior.

La página de inicio es la parte más importante en cualquier sitio por ser la más

visitada, y pese a que no siempre se entra a un sitio a través de ella, el usuario

generalmente la ubica como punto de referencia para la exploración, puesto que

presenta la idea general y las posibilidades de exploración más importantes.

Los contenidos que se mostrarán en ella serán: Jerarquía del sitio, una visión

conjunta (menús de navegación global y accesos directos a secciones sobre él);

contenido temporal, con fecha de actualización como: noticias y eventos

(dependiendo del caso); y enlaces externos de importancia.

2.6.1.1.2 Página de contenido

Estas páginas están más orientadas al contenido que conforma los niveles

inferiores en la jerarquía, después de la página principal.

Una página web de contenido constituye un conjunto de encabezados, texto y

vínculos que conforman el cuerpo de la página. Cada uno de estos 3 elementos

influye sobre la posición que se alcanza en los motores de búsqueda.

Primero se redacta el texto, dividido en tres y hasta seis secciones, encabezadas

con subtítulo, cuyas oraciones y párrafos ilustran diferentes aspectos que hablan

del tema principal.

15

2.6.2 Diseño de interfaz

Patrick Lynch (2004), encontró lo siguiente:

La interfaz gráfica del usuario (GUI) se creó para proporcionar al público un

control directo sobre sus ordenadores personales. Hoy, el usuario espera

de ellos un alto nivel de sofisticación de los diseños, incluyendo las páginas

web. El objetivo es satisfacer las necesidades de todo usuario potencial,

adaptando la tecnología a sus expectativas, sin imponerle nunca una

interfaz que obstaculice sus propósitos. (p. 20)

2.6.2.1 Estructura de la página (topología)

Uno de los aspectos más importantes de las estructura de una página web es

decidir dónde se posicionarán los menús de navegación y enlaces a otras páginas

web y dónde se posicionará el contenido que van a consultar los navegantes.

Existen diversos tipos de estructuras estándares de páginas web que especifican

la posición de los menús de navegación y el contenido, manteniéndose esta

estructura y diseño durante toda la navegación por el sitio web.

Los menús de navegación acostumbran a posicionarse en los márgenes de la

página, dejando los contenidos en el centro. Por defecto, las estructuras

estándares posicionan los menús de navegación arriba o en los laterales, pero

también existen otras posibilidades.

2.6.2.1.1 Menú de navegación a la izquierda

Permite presentar muchos menús o enlaces, pues cada línea puede ser un enlace.

Tampoco supone mucho problema que los menús se extiendan fuera de la

pantalla, porque el usuario puede visualizarlos con la barra de desplazamiento

vertical. Este método es ideal si los menús son administrables, pues el diseño no

16

se verá muy afectado si aumentan o disminuyen el número de enlaces. (Véase

figura 7).

2.6.2.1.2 Menú de navegación arriba

Ideal si el sitio web no tiene demasiadas secciones. Los menús se sitúan en línea

y ocupan mucho espacio. Es fácil si los menús se despliegan con otros submenús

(es más fácil la navegación que si los submenús se abren lateralmente).

Figura 7. Menú de navegación a la izquierda. Fuente: http://www.guiadiseño.com/imgs/exemples/bloque_izq.jpg (2014).

Figura 8. Menú de navegación arriba. Fuente: http://www.guiadiseño.com/imgs/exemples/bloque_arriba.jpg (2014).

17

2.6.2.1.3 Menú de navegación a la derecha

Las mismas ventajas que el menú a la izquierda, pero menos usado. (Véase figura

9).

2.6.2.1.4 Combinación de todas

Si se tienen muchos enlaces que presentar, se puede utilizar cualquier

combinación de los anteriores (arriba e izquierda; izquierda y derecha; arriba,

izquierda y derecha;…), sobre todo si los menús se pueden agrupar en dos o tres

grandes grupos.

Figura 9. Menú de navegación a la derecha. Fuente: http://www.guiadiseño.com/imgs/exemples/bloque_der.jpg (2014).

Figura 10. Menú de combinación. Fuente: http://www.guiadiseño.com/imgs/exemples/bloque_combi.jpg (2014).

18

2.6.2.2 Retícula

Existen ciertos sitios que se basan en una retícula para crear su diseño. Pero esto

no quiere decir que su diseño va a ser aburrido. Un buen diseñador aplica las

reglas de una retícula, pero sabiendo bien que estas pueden romperse de una

manera apropiada.

Hay muchas teorías diferentes acerca de la mejor manera de crear una retícula

propia, las opciones son interminables. Pero, es evidente que, al final, se debe

escoger la que mejor se adecúe al proyecto que se va a realizar.

2.6.2.3 Encabezados

Las páginas web muestran en pantalla un texto que da título a su contenido. Este

se ubica en la cabecera de la página y su propósito es indicar al lector a qué se

refiere el contenido de ella.

Figura 11. Retícula. Fuente: http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/ (2014).

19

2.6.3 Composición

La composición de un sitio web lo es todo en el proceso de realización. Debido

que, es mediante esto, que se pretende facilitar la navegación del usuario y dar

personalidad al conjunto de elementos, mismos, que tienen el fin de lograr una

composición homogénea.

2.6.3.1 Sección áurea

La sección áurea se ha manifestado en innumerables obras que van desde la

pintura, escultura, fotografía, música, entre otras. La sección áurea, así como otros

criterios de organización reticular, sirven en el ámbito del diseño para establecer

una proporción, un orden y un equilibrio entre los elementos de una composición,

cualesquiera que estos sean. A lo largo de la historia, se ha atribuido su inclusión

en el diseño de diversas obras de arquitectura y otras artes.

2.6.3.1.1 Sección áurea aplicada en la web

Manteniendo estas proporciones para la distribución de los elementos en una

página, se puede conseguir una mayor armonía y un equilibrio adecuado con el

que los usuarios estarán satisfechos.

Se ha estudiado el comportamiento de los usuarios en la red y se ha demostrado

que, los sitios web se leen, empezando arriba y a la izquierda, en diagonal, hacia

abajo a la derecha, perdiendo importancia conforme se vaya hacia abajo.

20

2.6.3.2 Regla de los tercios

Es una de las reglas más básicas de composición. Es, probablemente, el primer

recurso compositivo que se aprende por lo sencillo de aplicar y lo efectivo de sus

resultados.

Consiste en dividir la imagen en tres tercios imaginarios horizontales y verticales.

Los cuatro puntos de intersección de estas líneas fijan los puntos adecuados para

situar el punto o puntos de interés en la página, alejando éste del centro de la

misma. (Véase figura 12).

2.6.4 Color

El color, según Sir Isaac Newton, es una sensación que se produce en respuesta

a una estimulación nerviosa del ojo, causada por una longitud de onda luminosa.

El ojo humano interpreta colores diferentes dependiendo de las distancias

longitudinales.

Figura 12.Regla de tercios en la web. Fuente: http://xoconostle.tumblr.com/post/1620281728/matematicas-y-diseno-web-una-relacion-

cercana-parte (2014).

21

El color en el diseño es el medio más valioso para que una pieza gráfica transmita

las mismas sensaciones que el diseñador experimentó frente a la escena o

encargo original; usando el color con buen conocimiento de su naturaleza y

efectos, y de manera adecuada, será posible expresar lo alegre o triste, lo

luminoso o sombrío, lo tranquilo o lo exaltado, entre otras muchas cosas.

El color tiene un significado fácilmente reconocible cuando se encuentra asociado

con imágenes familiares como señales, o se encuentra aplicado en figuras

simples; lo contrario ocurre y hasta su significado puede cambiar al encontrarse en

un entorno complicado.

La diferencia de tonalidades de un mismo color da la sensación de profundidad y

permiten percibir la forma de los objetos y los contornos de las superficies.

Sin ser todos los colores ni todos los significados y asociaciones perceptivas, el

objetivo no es crear una receta de acciones y reacciones o un manual de

aplicaciones, pero sí sensibilizar la toma de decisiones una vez situado el contexto

de uso del color desde el punto de vista mercadológico. Y desarrollar un criterio

enriquecedor que como receptores del color, ayude a usarlo con conocimiento de

causa y consistencia con los objetivos comunicacionales sin dejar de pensar que

nada es indiferente, todo expresa algo y todo es significativo.

2.6.4.1 Aplicación del color

Es por medio de la aplicación del color en los sitios web que se puede controlar o

guiar al usuario sobre qué camino seguir. En los sitios web, es necesario brindar el

contenido necesario para promover estadías prolongadas. Se sabe que no se

puede controlar el enfoque del usuario, pero seguro se pueden utilizar métodos

subliminales y el color es una de las formas de hacerlo.

22

El más utilizado en estos casos es la aplicación de colores neutros o pasteles en

general y colores vivos en aquellas zonas en las que se desee que los visitantes

se enfoquen.

Es necesario contar con armonías de color, que aseguran la correcta utilización de

las paletas de colores. Así como existe una relación entre los colores y la reacción

humana a ellos, también existe una reacción hacia las combinaciones de colores

que se encuentran en armonía.

2.6.4.2 Paleta de web segura

La mayoría de los colores obtenidos con 16 bits de profundidad son diferentes a

los obtenidos con 8 y 24 bits. Además, si se usan 8 bits (256 colores), el monitor

será incapaz de presentar muchos de los colores obtenidos si la página se ha

diseñado a millones de colores.

Lo ideal para un diseño funcional es trabajar con una gama de colores compatible

con todas las profundidades. El problema es que este número es en realidad muy

bajo. Sin embargo, Tradicionalmente se ha considerado como paleta de colores

segura la conformada por 216 colores del tipo #aabbcc, donde a, b y c deben ser

0,3,6,9,C o F, que recibe el nombre de WebSafe.

Esta paleta no es en realidad segura, debido al problema con la profundidad de

miles de colores. Si a esto se le añade la variable adicional de que cada sistema

operativo y cada navegador interpretan los colores según su configuración, el

resultado final es que sólo se dispone de una pequeña paleta, formada por 22

colores. Esta paleta se conoce con el nombre de ReallySafe. (Véase figura 13).

23

2.6.4.3 Color textual

Estudios recientes han demostrado que las clásicas páginas blancas con letras

negras no serían el ideal para la visualización humana. Es mejor si el contraste se

atenúa, utilizando por ejemplo colores pastel de fondo con textos oscuros, el tema

del contraste es una de las principales razones por las que los usuarios dejan de

leer el contenido de una página web. Lo más recomendable es elegir color que

contrasten entre sí, pero no demasiado como para que empiecen a brillar.

2.6.5 Tipografía

Una de las cuestiones más importantes al momento de diseñar un sitio web, es la

elección de las tipografías más adecuadas, según sea el caso.

Figura 13.Paleta de web segura. Fuente: http://www.desarrolloweb.com/articulos/1560.php (2014).

24

Cada tipografía aporta un carácter propio, el cual contribuye a armonizar el

aspecto verbal y contenido visual. Es por eso que era un gran problema cuando,

hace tiempo, el diseñador web no tenía control de las tipografías que se usaban

en sus sitios, sino que, estas se adaptaban según el sistema operativo con el que

contaba el usuario. Sin embargo, actualmente, existe una cantidad variante de

efectos que se pueden aplicar, aunque sigan siendo muy limitados.

Con las nuevas tecnologías web, los nuevos navegadores pueden presentar

cualquier fuente que se quiera utilizar, como si se enviara la fuente con el sitio

web. Lo que trae consigo una gran mejora, no solo por cuestiones estéticas, sino

por la variedad de tamaños que se pueden aplicar, mismo que aporta una

composición adecuada y bien estructurada para comodidad del usuario.

Existen dos tipos de formatos tipográficos: serif y sans-serif (véase figura 12), que

se distinguen por tener y no tener pequeños remates en los extremos,

respectivamente. En el aspecto web, se recomienda el uso del formato sans-serif,

debido a su legibilidad y facilidad de lectura.

Figura 14. Formatos tipográficos. Fuente: Elaboración propia (2014).

25

2.6.5.1 Tamaño de la tipografía

Lo primero que se tiene que hacer cuando se enfrenta a la elección de las

tipografías para una página web es establecer claramente la jerarquía, ya sea

mediante color, tamaño, negritas. Básicamente se hace esto, porque si tenemos

una buena jerarquía, el usuario navegará con mucha más facilidad a lo largo del

sitio web.

Hay que saber que no todos los usuarios tienen el mismo gusto o ven igual de

bien. Por eso, se debe establecer siempre un tamaño mínimo para la tipografía y,

que así, el usuario pueda leer los contenidos sin cansar su vista. Un tamaño de 14

puntos puede ser bastante aceptable.

2.6.5.2 Uso de mayúsculas y minúsculas

Los usuarios por regla general no están habituados a leer textos donde todas las

palabras estén en mayúsculas. Por eso hay que tener cuidado con este punto, ya

que si se tienen textos muy largos que estén completamente en mayúsculas será

complicada la lectura para los usuarios. Sin embargo, su uso para resaltar una

palabra dentro de un texto es recomendablemente funcional, debido a la facilidad

con la que atrae la atención.

2.6.5.3 Negritas

Su uso se ha restringido a títulos, epígrafes, voces en diccionarios y similares. Sin

embargo, si lo que se pretende es que el lector encuentre fácilmente un punto del

texto o justamente llamar mucho la atención, la negrita puede ser adecuada. En

Internet, como énfasis es más legible en una pantalla.

26

2.6.5.4 Cursivas

La cursiva es la letra cuyos terminales adoptan a menudo una forma curva, como

si quisieran unirse a la letra siguiente o anterior al estilo de la escritura caligráfica.

Lo que caracteriza la cursiva no es, como se piensa normalmente, la inclinación,

sino la forma de los terminales y el diseño general. Esta tipografía se puede utilizar

en caso de que se cite algún libro, el título de algún periódico, señalar expresiones

o palabras en algún otro idioma, entre otras. No es recomendable utilizar este

estilo tipográfico en grandes boques de textos en la web, pues la baja resolución

de algunas pantallas impide su nitidez y dificulta su lectura.

2.6.6 Gráficos

El componente gráfico de las páginas web tiene mucha importancia, pues es el

que hace que estas sean vistosas y el que permite aplicar la creatividad para

hacer del diseño de sitios más agradable. Es también una herramienta para

acercar los sitios al mundo donde se vive, sin embargo, es también el causante de

errores graves en las páginas y hacer de estas, en algunos casos, algo muy

desagradable para el usuario.

Las nociones básicas para el uso de archivos gráficos son sencillas. Conocerlas,

aunque sea ligeramente, ayudará a crear sitios agradables y rápidos. No cometer

errores en el uso de las imágenes es fundamental, aunque no se sea diseñador y

las imágenes que se utilicen sean feas, utilizarlas bien ayudará a crear una visita

más agradable al sitio.

2.6.7 Iconos gráficos

Los iconos son uno de los elementos gráficos más usados en el diseño web. Su

misión fundamental es ofrecer, sin distraer, una información visual concreta.

27

Para poder desempeñar acertadamente esta misión, un icono debe reunir una

serie de características, entre las que destacan las siguientes:

Debe ser los más sencillo posible, con los suficientes detalles como para

expresar lo que debe, pero no más. Los iconos enrevesados, complejos y

con muchos trazos tan solo crean confusión.

Debe seguir los modelos ya aceptados por el usuario que los va a

visualizar. Existen iconos característicos dentro de una comunidad o país,

así como otros asumidos a nivel mundial. Salirse de este modelo ya

aceptado hace perder la claridad al icono, condenándolo al fracaso.

Debe estar perfectamente concebido para la información concreta que va a

representar. Pequeñas diferencias en el diseño de un icono pueden crear

grandes diferencias una vez que el usuario lo visualice.

28

III. MÉTODO Y MATERIALES

El presente proyecto tiene como objetivo la creación de un sitio web para la

empresa "Dulces Travesuras", misma que ofrece el servicio de paquetes de

aperitivos para fiestas.

3.1 Sujeto

En este punto se mencionan los individuos participantes en el proyecto, sin los

cuales este no sería posible, sea tanto para su ideación, su desarrollo o la

creación de la necesidad que le da origen.

Implicados en este proyecto se encuentran: Shenia Valenzuela, quien es la dueña

de la empresa; el mercado meta, que son las personas de clase media que tengan

un gusto fuerte por la decoración y la repostería. Ambos sujetos son

determinantes para la realización del proyecto, ya que el cliente especifica el

contenido del sitio web, además de aprobar los avances para asegurarse de que

29

se obtenga la calidad deseada; y el mercado meta es el que termina por aprobar el

sitio, debido a que se hace en base a los gustos y necesidades del mismo.

El resto de los sujetos involucrados en este proceso, son: la persona intermedia

entre el cliente y el alumno, el Mtro. Jesús Efrén Bórquez Castruita; la alumna que

lleva a cabo el proyecto, Lucero Margarita Galindo Balderrama; el ingeniero en

sistemas Alan Guillermo Orduño Cota; el asesor Víctor Hugo Noriega Villalobos; y

los revisores Rodolfo Alberto Aguilera Páramo y Jesús Manuel Ayala Armenta.

3.2 Materiales

Para llevar a cabo este proyecto de diseño de un sitio web para le empresa

"Dulces Travesuras", se utilizó principalmente la herramienta de investigación de

una empresa denominada brief (véase anexo). Posteriormente se empezaron a

utilizar materiales como lápiz y hojas de papel en blanco para diseñar los bocetos

que se mostrarían al cliente. Más adelante, se procedió a utilizar una computadora

laptop hp, con sistema operativo Windows 8; el programa Adobe Illustrator CS6,

para desarrollar los layout que fueron seleccionados por el cliente y ver cómo se

desenvuelven en un contexto de pantalla digital; el editor de texto Sublime para

desarrollar el código HTML y CSS; y el navegador de internet Google Chrome.

Para poder llegar a un acuerdo de lo que sería el diseño del sitio web, se

presentaron varias discusiones entre el cliente y el diseñador, mencionando en

ellas las cuestiones a evaluar para llevar a cabo el sitio, así como los elementos

necesarios a adquirir, tales como: colores, tipografías, tipos de botones,

fotografías, entre otros.

3.3 Metodología

Para proceder a realizar este punto, se investigaron tres metodologías del diseño

de tres diferentes autores, de las cuales se seleccionó la que más se adecuara al

30

tipo de proyecto que se desarrolla. A continuación, una descripción breve de cada

una de ellas:

Eric Eaton en su libro Diseño Web: Elementos de Interfaz, que consta de 5 fases:

1. Definir el alcance del proyecto

2. Definir los objetivos estratégicos

3. Definir las especificaciones técnicas

4. Diseño y producción

5. Rastreo, evaluación y mantenimiento

1. Alcance del proyecto

Cada esfuerzo que se haga tiene un alcance, o propósito: un efecto de deseos

desde el punto de vista de la compañía o del usuario final. El efecto puede ser

múltiple o simple. El producto inicial de una compañía mediante Web debe ser

simplemente proporcionar una información clara y actualizada al público.

Un alcance del proyecto no es un informe creativo o una especificación técnica.

Sin embargo, las interpretaciones literales de los efectos deseados pueden hacer

pensar en soluciones de interfaz que pueden funcionar como guías de las fases

posteriores. Al menos, las imágenes mentales creadas a estas alturas

proporcionarán un legado conceptual a lo largo del proyecto.

2. Objetivos estratégicos

En esta fase también pueden surgir efectos sobre la utilidad de la interfaz. La

mayoría de objetivos estratégicos tienen que hacerse con el producto qye se

espera que cubra un hueco en el mercado. En lo que concierne a los productos

online, esos huecos de mercado se caracterizan a menudo por la forma en que

funcione la interfaz.

31

En este espacio se definen los objetivos y metas que se pretenden alcanzar con el

sitio web. Se pueden algunas preguntas como:

¿Cuál es el proceso de la organización?

¿De qué modo la construcción de un sitio web apoyará este propósito?

¿Cuáles son los objetivos más importantes del sitio?

¿Cuál es el público al que va destinado el sitio principalmente?

¿Qué se desea que piense o haga el público tras visitar el sitio?

¿Qué estrategias relacionadas con la Red se utilizarán para alcanzar estos

objetivos?

¿Cómo se medirá el éxito del sitio web?

¿Cómo se realizará un mantenimiento adecuado una vez confeccionado el

sitio?

¿Cuántas páginas va a contener el sitio?

¿Qué tipo de requisitos técnicos o funcionales especiales se necesitan?

¿Quiénes son las personas y proveedores que formarán parte del equipo

de desarrollo del sitio? ¿Cuáles son sus responsabilidades?

Después de preguntarse se dispone a empezar a recoger y analizar la información

necesaria para justificar el proyecto, el presupuesto y recursos requeridos. Aquí

también se definirá el alcance de los contenidos, la funcionalidad interactiva de los

recursos informativos que se precisan para llenar la Web y satisfacer las

expectativas de los usuarios.

Otros puntos a tomar en cuenta en esta etapa es la tecnología que se utilizará

para realizar el proyecto como por ejemplo: los navegadores y sistemas operativos

que podrán usar el sitio, qué tipo de lenguaje utilizará el sitio, si el usuario podrá

tener contacto con el encargado de actualizar el sitio, requisito para la base de

datos en caso de que los usuarios tuvieran que registrarse, si habrá contenidos

audiovisuales, qué servidor Web se requerirá, cada cuánto tiempo será

actualizada, si tendrá un contador para obtener un conocimiento del impacto

alcanzada, entre otros.

32

3. Especificaciones técnicas

Los documentos de especificaciones son una guía de trabajo para los equipos de

diseño y producción. Aunque no estén escritos por las mismas personas que

hayan colaborado en los borradores de los objetivos de alcance y estrategia, sus

autores deberán ser cercanos a estos. El alcance del proyecto generalmente

puede mencionar la tecnología, y las metas estratégicas pueden mencionar los

problemas tecnológicos pertinentes. Empezando con esa información, las

especificaciones técnicas irán encaminadas a definir exactamente el software y

hardware a emplear en el sitio Web, lo que determina a su vez qué tipos de

convenciones de interfaz se usarán y cuáles no.

El diseñador tendrá que invertir tiempo y energía en descifrar estas

especificaciones antes de recoger los problemas, pero es una inversión de futuro.

Son el armazón subyacente de cada interfaz. En esta etapa se deberán detallar

tanto la organización como los contenidos del sitio Web. El equipo deberá

inventariar los contenidos existentes, definir qué nuevos contenidos se necesitan y

concretar la organización del sitio.

Una vez que se haya esbozado la arquitectura de los contenidos, se deberán

construir pequeños prototipos de partes de la Web para poder probar cómo se

adapta el diseño a la navegación. Estos prototipos parciales son útiles en dos

sentidos. En primer lugar, son la mejor manera de probar la navegación del sitio y

desarrollar la interfaz del usuario. En segundo lugar, la creación de prototipos

permite a los diseñadores gráficos determinar la relación entre la apariencia del

sitio y el papel de la interfaz de navegación en el diseño de la información. La

clave para un buen prototipo sabe ser desde el principio la flexibilidad: no debería

elaborarse demasiado, pues el equipo de trabajo podría quedarse estancado en

un diseño, en lugar de investigar otras posibilidades.

El resultado o producto contratado al final de esta fase, podría incluir:

Especificaciones detalladas del diseño.

33

Descripción detallada de los contenidos (mapas del sitio, imágenes en

miniatura, resúmenes, tablas de contenidos).

Especificaciones detalladas de los recursos técnicos necesarios

(navegadores, aceptados, velocidad de conexión, servidor Web, y recursos

del servidor).

Propuestas de la tecnología y programación necesaria para realizar partes

específicas del sitio.

Un calendario de implementación del diseño y su construcción.

Uno o varios prototipos de varias páginas.

Varios bocetos de diseño gráfico y de interfaces.

4. Apariencia y distribución

Mientras es importante el diseño, raramente un sitio Web es la sumos de loas

soluciones a las respuestas tecnológicas para su utilidad. La utilidad de cualquier

interfaz será tan buena como el diseño que le permita usarla. La distribución,

color, posición y la proximidad de un elemento a otro, todo facilitan su utilidad. El

diseño Web es por lo tanto un híbrido entre el diseño de la página tradicional y una

arquitectura de interfaz, compuesta por variables ocultas que hacen difícil ver las

opciones de que disponen los usuarios (flexibilidad en el rendimiento de la

ventana, escalado del tamaño de la tipografía, entre otros). Al final, un buen

diseño comienza con una buena distribución y especialmente con una jerarquía

visual, basada en una estética lógica, que guiará al ojo por la interfaz. Cada sitio

Web tiene que crear su identidad propia. Un sitio que ofrece un equilibrio entre la

utilidad y la estética, es más probablemente aceptada por el usuario, que una

similarmente funcional, pero menos atractiva.

En esta fase del proyecto, el sitio Web empieza a tener una imagen clara, a

medida que se crea y se prueba la retícula de la página, su diseño y las

especificaciones generales del diseño gráfico. Será el momento de encargar o

generar las ilustraciones, fotografías y demás materiales gráficos y audiovisuales

necesarios. También es el momento de investigar, escribir, organizar, ensamblar y

34

editar los contenidos en formato de texto. En este momento todos los elementos

de programación, diseño de bases de datos y entrada de datos, deberían estar ya

concretados y en marcha. El fin es producir todos los componentes de los

contenidos y de programación funcional y dejarlos listos para la última fase de la

producción: la construcción de cada una de las páginas.

Características de la organización y ensamblaje de los componentes:

Texto editado y corregido.

Especificaciones de diseño gráfico para cada tipo de página, (plantillas,

elementos gráficos del encabezado y de pie de página, así como logotipos,

botones y fondos).

Composición en el detalle de las páginas.

Diseño de interfaz.

Ilustraciones.

Fotografía.

Componentes lógicos y funcionales como: Scripts de Java, tablas, y

programaciones de base de datos, prototipos de interacción finalizados,

motores de búsqueda diseñados y comprobados.

Después se construirá el grueso de las páginas del sitio y se llenarán con los

contenidos. Se debe estar preparado para refinar el diseño a medida que el sitio

Web crece, y también para descubrir cuáles son sus puntos débiles o reconocer

las oportunidades para mejorar tanto la navegación como los contenidos.

Una vez construido el sitio, con todas las páginas acabadas y los componentes de

programación y bases de datos enlazados, estaremos preparados para lanzar y

probar una versión beta. En primer lugar, deben hacer la prueba usuarios externos

del equipo, que estén dispuestos a aportar información crítica acerca de los fallos

de programación y texto, o a evaluar el diseño y la efectividad del sitio.

Inevitablemente, un usuario nuevo percibirá aspectos que han pasado inadvertidos

al equipo. Sólo cuando el sitio Web haya sido probado y evaluado en profundidad,

se puede hacer publicidad de su dirección URL a una audiencia más amplia.

35

5. Rastreo, evaluación y mantenimiento

Con el software de cualquier servidor Web se puede generar automáticamente

una gran cantidad de información acerca de los visitantes su sitio. Incluso los

registros Web más sencillos pueden almacenar la cantidad de visitantes que

acceden a ella en un tiempo determinado, a cuántas páginas acceden y otras

muchas variables. Para un sitio Web, el análisis de estos registros pueden

proporcionar datos interesantes acerca de su popularidad: las páginas más

visitadas, los navegadores utilizados, entre otros. De este modo, se obtendrá un

registro por memorizado para poder evaluar posteriormente el éxito de la Web.

Más adelante, se podrán cambiar estas variables registradas según las

necesidades e intereses que se presenten. No hay que olvidarse de la Web una

vez que haya publicado con éxito. Los aspectos funcionales y estéticos de una

Web de gran tamaño requieren una atención continuada y un mantenimiento,

especialmente si hay individuos que comparten la responsabilidad de actualizar y

revisar los contenidos. Alguien debe responsabilizarse de coordinar y aprobar las

nuevas aportaciones del contenido, del mantenimiento de las normas gráficas y

editoras, y de asegurarse de que los enlaces y la programación de todas las

páginas siguen funcionando. En la red, los enlaces son perecederos, y se deberá

comprobar periódicamente que los que se dirigen hacia las páginas externas de su

Web siguen funcionando. No deje que la Web se quede obsoleta por falta de

dedicación y recursos justo cuando está empezando a seguir público.

Christopher Alexander.- En su obra "Ensayo" sobre la síntesis de la forma, hace

un recuento histórico sobre los métodos que se han usado en el diseño. Ve la

necesidad de crear un método verdaderamente científico dado que los existentes

no son suficientemente rigurosos.

El método de Alexander se divide en 6 pasos:

• Definición del problema.

• Mediante una lista de exigencias, se estudia el comportamiento de los sistemas

36

en el contexto.

• Se da un juicio para determinar si las soluciones a una de las exigencias están

determinadas con las de otra.

• Se analiza y descompone. Se establece una jerarquía de subsistemas.

• Por medio de diagramas se encuentra una solución a las exigencias.

• Los diagramas se van desarrollando hasta lograr la síntesis formal de las

exigencias.Considera que el contexto está compuesto por: ubicación física,

uso y métodos de fabricación. En todo problema de diseño existen dos

componentes: uno formado por exigencias fuera del control del diseñador y otro

por la forma que el diseñador debe adaptar a la anterior.

Patrick J. Linch y Sara Horton.- Proponen en su libro “Manual de estilo web”, un

proceso de desarrollo de sitios, que consta de las siguientes fases:

1. Definición y planificación del sitio

En este estudio preliminar se definen los objetivos y las metas que se pretenden

alcanzar con el sitio web, y se empieza a recoger y analizar la información

necesaria para justificar el presupuesto y los recursos requeridos. Además se

definen el alcance de los contenidos, la funcionalidad interactiva y el apoyo

tecnológico necesarios, la amplitud y profundidad de los recursos informativos que

se precisan para llenar la web y satisfacer las expectativas de los usuarios. Lo

ideal sería que los diseñadores del sitio web se introdujeran lo antes posible en el

proceso de planificación.

2. Arquitectura de la información

En esta etapa se deberán detallar tanto la organización como los contenidos del

sitio web. El equipo deberá investigar los contenidos existentes, definir qué nuevos

contenidos necesitan y concretar la organización del sitio.

37

Una vez que se haya esbozado la arquitectura / estructura de los contenidos, se

deberán construir pequeños prototipos de partes de la web para poder probar

cómo se adapta el diseño a la navegación. Estos prototipos parciales son útiles en

dos sentidos. En primer lugar, son la mejor manera de probar la navegación de

sitio y desarrollar la interfaz del usuario. Un prototipo debería tener las suficientes

páginas para poder comprobar con precisión cómo se desplaza uno desde los

menús de contenido a las páginas con contenidos y viceversa. En segundo lugar,

la creación de prototipos permite a los diseñadores gráficos determinar la relación

entre la apariencia del sitio y el papel de la interfaz de la navegación. La clave

para un buen prototipo debe de ser desde el principio la flexibilidad: no debería

elaborarse demasiado, pues el equipo podría quedarse estancado en un diseño,

en lugar de investigar otras posibilidades.

El resultado o producto contratado al final de esta fase podría incluir:

Especificaciones detalladas de diseño.

Descripción detallada de los contenidos.

Mapas del sitio, imágenes en miniatura, resúmenes, tablas de contenidos.

Especificaciones detalladas de los recursos técnicos necesarios.

Navegadores aceptados.

Velocidad de conexión aceptada.

Servidor web y recursos del servidor.

Un calendario de implementación del diseño y su construcción.

Uno o varios prototipos de varias páginas.

Varios bocetos de diseño gráfico y de interfaces.

3. Diseño del sitio

En esta fase del proyecto del sitio web empieza a tener una imagen clara, a

medida que se crea y se aprueba la retícula (grid) de la página, su diseño y las

especificaciones generales del diseño gráfico. Es el momento de encargar generar

las ilustraciones, las fotografías y demás materiales gráficos y audiovisuales

necesarios. También es el momento de investigar, escribir, organizar, ensamblar y

38

editar los contenidos en formato de texto. En este momento, todos los elementos

de programación, diseño de bases de datos y entrada de datos deberían estar ya

concretados y en marcha. El fin es producir rodos los componentes de contenido

de programación funcional y dejarlos listos para la última dase de producción: la

construcción de cada una de las páginas web.

4. Construcción

En esta fase avanzada del proyecto cuando se construirá el grueso de las páginas

del sitio y se llenarán con los contenidos. Si espera a tener una arquitectura

detallada del sitio, los elementos del contenido y unas especificaciones precisas

de las páginas, minimizará los posibles problemas de contenido y evitará el

derroche de energía que supone precipitarse en la construcción de las páginas.

Por supuesto, a medida que el prototipo se transforma en la versión final definitiva,

iremos aprendiendo nuevos aspectos del diseño en conjunto. Hemos de estar

preparados para refinar el diseño a medida que el sitio web crece, y también para

descubrir cuáles son sus puntos débiles o reconoces las oportunidades para

mejorar tanto la navegación como los contenidos.

Los resultados más típicos del contrato al final de esta fase deberían incluir:

HTML finalizado para todas y cada una de las páginas web, todos los

contenidos en un lugar.

Navegación y estructura de enlaces finalizado.

Toda la programación en su lugar y con sus correspondientes en laces, a

punto para una versión beta.

Todos los componentes de las bases de datos en su lugar y enlazados a

las páginas.

Todos los elementos gráficos, ilustraciones y fotografías en su lugar.

Revisión y corrección final de todos los contenidos.

Prueba y verificación de los resultados del funcionamiento de las bases de

datos.

Prueba de todos los procedimientos de apoyo al usuario, respuestas de

39

correo electrónico, etc.

Creación de archivos de seguridad para todos los contenidos del sitio,

código HTML, códigos de programación y otros materiales de desarrollo del

sitio.

5. Marketing del sitio

Su sitio debería de formar parte de todas las campañas y programas de

comunicación de la empresa u organización, y la dirección URL debería aparecer

en toda la correspondencia y los elementos de marketing que genere.

Si el sitio web está destinado principalmente a un público local, no solo se debería

incluir la dirección URL en los principales buscadores como Google, Yahoo o

Infoseek, sino también en lugares donde los empresarios y residentes locales

pudieran encontrarla fácilmente. Las bibliotecas locales (y las escuelas, cuando el

contenido sea relevante) son espacios importantes a la hora de dar a conocer un

sitio web en un área geográfica específica.

La dirección URL de su página principal debería aparecer en:

Anuncios con papel.

Anuncios en radio y televisión.

Puntos y zonas muy concurridas de la organización; o en bibliotecas

locales, escuelas y lugares de encuentro apropiados.

Campañas de correo.

Tarjetas.

Papelería.

Facturas albaranes.

Catálogos y envoltorios.

Tarjetas de respuesta comercial y de garantías.

Publicaciones y material de promoción.

40

Comunicados de prensa.

Carteles y vallas publicitarias.

6. Rastreo, evaluación y mantenimiento

Con el software de cualquier servidor web se puede generar automáticamente una

gran cantidad de información acerca de visitantes web. Incluso los registros web

más sencillos pueden almacenar la cantidad de visitantes que acedan a ella en un

tiempo determinado, a cuantas páginas acceden y otras muchas variables. Para

un sitio web, el análisis de estos registros puede proporcionar datos interesantes

acerca de su popularidad: las páginas más visitadas, los navegadores utilizados,

etc. De esto modo, se obtiene un registro memorizado para poder evaluar

posteriormente el éxito de la web. Más adelante podemos cambiar estas variables

registradas según las necesidades e intereses.

Mantenimiento del sitio web No se olvide de la web una vez que se haya publicado

con éxito. Los aspectos funcionales y estéticos de una web de gran tamaño

requieren una atención continuada y un mantenimiento, especialmente si hay

individuos que comparten la responsabilidad de actualizar y revisar los contenidos.

Alguien debe responsabilizarse de coordinar y aprobar las nuevas aportaciones de

contenido, del mantenimiento de las normas gráficas y editoriales, y de asegurarse

de que los enlaces y la programación de todas las páginas siguen funcionando. En

la Red, los enlaces son perecederos, y deberá comprobar periódicamente que los

que se dirigen hacia páginas externas a su web siguen funcionando. No deje que

la web se quede obsoleta por falta de dedicación y recursos justo cuando está

empezando a conseguir público –si se desilusiona al usuario, será muy difícil

volver a recuperarlo-.

Copias de seguridad y archivos El editor encargado de un sitio web deberá

asegurarse de que se realicen regularmente copias de seguridad en un soporte de

almacenamiento seguro y estable para evitar que un fallo en el servidor haga

desaparecer toda la información del sitio web.

41

3.3.1 Metodología seleccionada

De los tres métodos que se investigaron, se optó por seleccionar el que menciona

Eric Eaton en su libro Diseño Web: Elementos de Interfaz, que consta de 5 fases:

1. Definir el alcance del proyecto

2. Definir los objetivos estratégicos

3. Definir las especificaciones técnicas

4. Diseño y producción

5. Rastreo, evaluación y mantenimiento

3.3.1.1 Alcance del proyecto

Cada esfuerzo que se haga tiene un alcance, o propósito: un efecto de deseos

desde el punto de vista de la compañía o del usuario final. El efecto puede ser

múltiple o simple. El producto inicial de una compañía mediante Web debe ser

simplemente proporcionar una información clara y actualizada al público.

Un alcance del proyecto no es un informe creativo o una especificación técnica.

Sin embargo, las interpretaciones literales de los efectos deseados pueden hacer

pensar en soluciones de interfaz que pueden funcionar como guías de las fases

posteriores. Al menos, las imágenes mentales creadas a estas alturas

proporcionarán un legado conceptual a lo largo del proyecto.

42

3.3.1.2 Objetivos estratégicos

En esta fase también pueden surgir efectos sobre la utilidad de la interfaz. La

mayoría de objetivos estratégicos tienen que hacerse con el producto que se

espera que cubra un hueco en el mercado. En lo que concierne a los productos

online, esos huecos de mercado se caracterizan a menudo por la forma en que

funcione la interfaz.

En este espacio se definen los objetivos y metas que se pretenden alcanzar con el

sitio web. Se pueden algunas preguntas como:

¿Cuál es el proceso de la organización?

¿De qué modo la construcción de un sitio web apoyará este propósito?

¿Cuáles son los objetivos más importantes del sitio?

¿Cuál es el público al que va destinado el sitio principalmente?

¿Qué se desea que piense o haga el público tras visitar el sitio?

¿Qué estrategias relacionadas con la Red se utilizarán para alcanzar estos

objetivos?

¿Cómo se medirá el éxito del sitio web?

¿Cómo se realizará un mantenimiento adecuado una vez confeccionado el

sitio?

¿Cuántas páginas va a contener el sitio?

¿Qué tipo de requisitos técnicos o funcionales especiales se necesitan?

¿Quiénes son las personas y proveedores que formarán parte del equipo

de desarrollo del sitio? ¿Cuáles son sus responsabilidades?

Después de preguntarse se dispone a empezar a recoger y analizar la información

necesaria para justificar el proyecto, el presupuesto y recursos requeridos. Aquí

también se definirá el alcance de los contenidos, la funcionalidad interactiva de los

recursos informativos que se precisan para llenar la Web y satisfacer las

expectativas de los usuarios.

43

Otros puntos a tomar en cuenta en esta etapa es la tecnología que se utilizará

para realizar el proyecto como por ejemplo: los navegadores y sistemas operativos

que podrán usar el sitio, qué tipo de lenguaje utilizará el sitio, si el usuario podrá

tener contacto con el encargado de actualizar el sitio, requisito para la base de

datos en caso de que los usuarios tuvieran que registrarse, si habrá contenidos

audiovisuales, qué servidor Web se requerirá, cada cuánto tiempo será

actualizada, si tendrá un contador para obtener un conocimiento del impacto

alcanzada, entre otros.

3.3.1.3 Especificaciones técnicas

Los documentos de especificaciones son una guía de trabajo para los equipos de

diseño y producción. Aunque no estén escritos por las mismas personas que

hayan colaborado en los borradores de los objetivos de alcance y estrategia, sus

autores deberán ser cercanos a estos. El alcance del proyecto generalmente

puede mencionar la tecnología, y las metas estratégicas pueden mencionar los

problemas tecnológicos pertinentes. Empezando con esa información, las

especificaciones técnicas irán encaminadas a definir exactamente el software y

hardware a emplear en el sitio Web, lo que determina a su vez qué tipos de

convenciones de interfaz se usarán y cuáles no.

El diseñador tendrá que invertir tiempo y energía en descifrar estas

especificaciones antes de recoger los problemas, pero es una inversión de futuro.

Son el armazón subyacente de cada interfaz. En esta etapa se deberán detallar

tanto la organización como los contenidos del sitio Web. El equipo deberá

inventariar los contenidos existentes, definir qué nuevos contenidos se necesitan y

concretar la organización del sitio.

Una vez que se haya esbozado la arquitectura de los contenidos, se deberán

construir pequeños prototipos de partes de la Web para poder probar cómo se

adapta el diseño a la navegación. Estos prototipos parciales son útiles en dos

44

sentidos. En primer lugar, son la mejor manera de probar la navegación del sitio y

desarrollar la interfaz del usuario. En segundo lugar, la creación de prototipos

permite a los diseñadores gráficos determinar la relación entre la apariencia del

sitio y el papel de la interfaz de navegación en el diseño de la información. La

clave para un buen prototipo sabe ser desde el principio la flexibilidad: no debería

elaborarse demasiado, pues el equipo de trabajo podría quedarse estancado en

un diseño, en lugar de investigar otras posibilidades.

El resultado o producto contratado al final de esta fase, podría incluir:

Especificaciones detalladas del diseño.

Descripción detallada de los contenidos (mapas del sitio, imágenes en

miniatura, resúmenes, tablas de contenidos).

Propuestas de la tecnología y programación necesaria para realizar partes

específicas del sitio.

Un calendario de implementación del diseño y su construcción.

Uno o varios prototipos de varias páginas.

Varios bocetos de diseño gráfico y de interfaces.

3.3.1.4 Apariencia y distribución

Mientras es importante el diseño, raramente un sitio Web es la sumos de loas

soluciones a las respuestas tecnológicas para su utilidad. La utilidad de cualquier

interfaz será tan buena como el diseño que le permita usarla. La distribución,

color, posición y la proximidad de un elemento a otro, todo facilitan su utilidad. El

diseño Web es por lo tanto un híbrido entre el diseño de la página tradicional y una

arquitectura de interfaz, compuesta por variables ocultas que hacen difícil ver las

opciones de que disponen los usuarios (flexibilidad en el rendimiento de la

ventana, escalado del tamaño de la tipografía, entre otros). Al final, un buen

diseño comienza con una buena distribución y especialmente con una jerarquía

visual, basada en una estética lógica, que guiará al ojo por la interfaz. Cada sitio

45

Web tiene que crear su identidad propia. Un sitio que ofrece un equilibrio entre la

utilidad y la estética, es más probablemente aceptada por el usuario, que una

similarmente funcional, pero menos atractiva.

En esta fase del proyecto, el sitio Web empieza a tener una imagen clara, a

medida que se crea y se prueba la retícula de la página, su diseño y las

especificaciones generales del diseño gráfico. Será el momento de encargar o

generar las ilustraciones, fotografías y demás materiales gráficos y audiovisuales

necesarios. También es el momento de investigar, escribir, organizar, ensamblar y

editar los contenidos en formato de texto. En este momento todos los elementos

de programación, diseño de bases de datos y entrada de datos, deberían estar ya

concretados y en marcha. El fin es producir todos los componentes de los

contenidos y de programación funcional y dejarlos listos para la última fase de la

producción: la construcción de cada una de las páginas.

Características de la organización y ensamblaje de los componentes:

Texto editado y corregido.

Especificaciones de diseño gráfico para cada tipo de página, (plantillas,

elementos gráficos del encabezado y de pie de página, así como logotipos,

botones y fondos).

Composición en el detalle de las páginas.

Diseño de interfaz.

Ilustraciones.

Fotografía.

Componentes lógicos y funcionales como: Scripts de Java, tablas, y

programaciones de base de datos, prototipos de interacción finalizados,

motores de búsqueda diseñados y comprobados.

Después se construirá el grueso de las páginas del sitio y se llenarán con los

contenidos. Se debe estar preparado para refinar el diseño a medida que el sitio

Web crece, y también para descubrir cuáles son sus puntos débiles o reconocer

las oportunidades para mejorar tanto la navegación como los contenidos.

46

Una vez construido el sitio, con todas las páginas acabadas y los componentes de

programación y bases de datos enlazados, estaremos preparados para lanzar y

probar una versión beta. En primer lugar, deben hacer la prueba usuarios externos

del equipo, que estén dispuestos a aportar información crítica acerca de los fallos

de programación y texto, o a evaluar el diseño y la efectividad del sitio.

Inevitablemente, un usuario nuevo percibirá aspectos que han pasado inadvertidos

al equipo. Sólo cuando el sitio Web haya sido probado y evaluado en profundidad,

se puede hacer publicidad de su dirección URL a una audiencia más amplia.

3.3.1.5 Rastreo, evaluación y mantenimiento

Con el software de cualquier servidor Web se puede generar automáticamente

una gran cantidad de información acerca de los visitantes su sitio. Incluso los

registros Web más sencillos pueden almacenar la cantidad de visitantes que

acceden a ella en un tiempo determinado, a cuántas páginas acceden y otras

muchas variables. Para un sitio Web, el análisis de estos registros pueden

proporcionar datos interesantes acerca de su popularidad: las páginas más

visitadas, los navegadores utilizados, entre otros. De este modo, se obtendrá un

registro memorizado para poder evaluar posteriormente el éxito de la Web. Más

adelante, se podrán cambiar estas variables registradas según las necesidades e

intereses que se presenten. No hay que olvidarse de la Web una vez que se haya

publicado con éxito. Los aspectos funcionales y estéticos de una Web de gran

tamaño requieren una atención continua y un mantenimiento, especialmente si hay

individuos que comparten la responsabilidad de actualizar y revisar los contenidos.

Alguien debe responsabilizarse de coordinar y aprobar las nuevas aportaciones

del contenido, del mantenimiento de las normas gráficas y editoras, y de

asegurarse de que los enlaces y la programación de todas las páginas siguen

funcionando. En la red, los enlaces son perecederos, y se deberá comprobar

periódicamente que los que se dirigen hacia las páginas externas de la Web sigan

funcionando. Es importante no dejar que la Web se quede obsoleta por falta de

dedicación y recursos justo cuando está empezando a conseguir público.

47

IV. RESULTADOS

En este capítulo, se desarrollan los puntos que se mencionaron en el capítulo tres,

aplicados al momento de llevar a cabo la elaboración y desarrollo del sitio web

para la empresa “Dulces Travesuras”, además de los resultados obtenidos al final.

4.1 Alcance del proyecto

Lo primero que se quiere lograr con este sitio web es que la empresa sea más

conocida por sus clientes potenciales, y así, consiga un mayor número de

usuarios; y que los usuarios tengan más facilidad al momento de informarse sobre

la empresa, que puedan hacerlo desde la comodidad de sus hogares, por medio

de sus computadoras.

48

4.2 Objetivos estratégicos

Reflejar la seriedad y formalidad de la empresa mediante una imagen apropiada,

al mismo tiempo que haciendo saber al usuario que los servicios que se ofrecen

son atractivos y funcionales para su beneficio; crear un buen diseño y arquitectura

en todo el sitio: orden, claridad, usabilidad y accesibilidad.

4.3 Especificaciones técnicas

El sitio entero es claro y entendible para el mercado hacia el que va dirigido y

contiene toda la información necesaria para cumplir con su función. En el diseño

se añadió el logotipo de la empresa, cinco botones específicos: inicio, nosotros,

menú, citas y contacto, habiendo botones secundarios en las páginas de inicio (ver

más…) y en la de citas (agregar cita y registrar); en la página de inicio se

encuentra un photoslider automático en el que se muestran cuatro fotos de los

productos de la empresa.

Las secciones que se implementaron para las páginas, fueron destinadas de esa

manera con el fin de especificar los servicios y productos de la empresa de una

manera limpia y ordenada, dando así una cómoda disponibilidad para el usuario.

El desarrollo del sitio web se llevó a cabo en el lenguaje HTML y java script,

mismo que se complementó con CSS, para el estilo.

Para proceder a la elaboración del diseño del sitio, primero se especificó el área

en que se debe trabajar, que fueron las medidas 1000x768 pixeles, tomando como

referencia la resolución de los monitores más usados comúnmente.

Sobre esta medida se empezó a diseñar la arquitectura del sitio, siguiendo la regla

de composición de las líneas verticales, que refleja fuerza y potencia por el tipo de

encuadre que esta presenta, mismo que confiere a las imágenes mayor tensión y

"peso".

49

4.4 Apariencia

Para la interfaz de cada página se implementaron los colores negro, blanco y gris

para reflejar la seriedad y el profesionalismo de los que la empresa se rige; y el

color azul, que es el color corporativo, para no perder la identidad.

El conjunto de los elementos hacen que el sitio se vea llamativo e interesante para

el usuario, a pesar de la seriedad que reflejan los colores, logrando así, que este

interactúe y navegue con suficiente comodidad y sencillez. (Véase figura 15).

El logotipo de “Dulces Travesuras”, se colocó en la parte superior central de todo

el diseño con el fin de que esto sea lo primero que capte la vista del usuario.

Figura 15. Colores. Fuente: elaboración propia (2014).

Figura 16. Logotipo. Fuente: elaboración propia (2014).

50

Los botones implementados en el sitio, son grandes y diseñados de acuerdo al

resto del sitio. Están situados justo debajo del logotipo y centrados al resto del

diseño.

Se implementó un photoslider con fotos muy llamativas de los productos de la

empresa para mostrar al usuario lo que esta ofrece al mercado. Se le asignó esa

posición debido al impacto que causa cuando se ve la página por primera vez.

Figura 17. Botones. Fuente: elaboración propia (2014).

Figura 18. Photoslider. Fuente: elaboración propia (2014).

51

Las tipografías que se implementaron en el sitio web fueron de dos tipos: la

aplicada en los botones y en algunos títulos de las páginas, fue Carrington, que se

adaptaba muy bien a todo el concepto de la página, dándole un estilo sutil (véase

figura 19); la aplicada al resto de los textos, fue Helvética, misma que se adecuaba

mejor debido a que no hay textos muy largos en el sitio. (Véase figura 20).

Todos los textos son en tamaño de 14 pixeles, cuando el sitio se ve desde una

computadora común; cuando se ve desde una Tablet, los textos son de 13 pixeles;

y cuando se ven desde un dispositivo móvil, son de 12 pixeles. Los títulos siempre

tienen el mismo tamaño y siempre son bold.

Las fotografías que se utilizaron fueron proporcionadas por la empresa, para que,

posteriormente, pasaran por un proceso de edición y finalmente colocarlas en un

formato .jpg y .png, debido a la calidad y facilidad que presentan al momento de

cargarse en el sitio.

Figura 19. Carrington. Fuente: elaboración propia (2014).

Figura 20. Helvética. Fuente: elaboración propia (2014).

52

El resultado de la página de inicio del sitio web, se muestra en la figura 21.

Con el fin de seguir la misma identidad de la primera página, se crearon las otras

cinco utilizando el mismo procedimiento y una estética similar. Los resultados

están en la figura 22, figura 23, figura 24, figura 25 y figura 26.

Figura 21. Página inicio. Fuente: elaboración propia (2014).

Figura 22. Página nosotros. Fuente: elaboración propia (2014).

53

Figura 23. Página menú. Fuente: elaboración propia (2014).

Figura 24. Página citas 1. Fuente: elaboración propia (2014).

Figura 24. Página citas 1. Fuente: elaboración propia (2014).

54

Figura 26. Página contacto. Fuente: elaboración propia (2014).

Figura 25. Página citas 2. Fuente: elaboración propia (2014).

55

4.5 Rastreo, evaluación y mantenimiento

El lanzamiento de la página se dará a conocer mediante la cuenta que la empresa

maneja en Facebook.

Para poder llevar un registro de las visitas que tiene el sitio, es necesario disponer

de un contador de visitas, que no sólo llevará un registro, sino que podrá verificar

el impacto que el sitio causó y si hubo un incremento de usuarios. Además, al

realizar encuestas en las redes sociales, los usuarios podrán comentar y discutir

sobre el tema del sitio web, así como también dar sugerencias para el

mejoramiento del mismo.

56

V. CONCLUSIONES Y RECOMENDACIONES

Son muchas las interrogantes que existen en relación a, si es o no, importante que

las empresas, negocios e instituciones cuenten con una página web. Es posible

que algunos consideren que no lo es, dado que no se han detenido a pensar en el

valor real que representa una web para cualquier empresa. Vale la pena analizar

este importante elemento especialmente cuando se trata de un medio tan amplio y

que llega a tantas personas mundialmente como lo es Internet.

Si se dispone de una página web, en ella se podría colocar toda la información

que se desee; distribuida en diferentes secciones, incluyendo imágenes de los

productos y servicios, incluso en movimiento, disponible todos los días a cualquier

hora y no solo localmente ya que son millones de personas las que navegan a

nivel mundial en Internet, día a día, buscando en su mayoría un único propósito:

Información acerca de algo que les interesa y que uno de ellos posiblemente

ofrece.

57

Sin duda alguna, una página web es un complemento de mucha importancia para

toda empresa que piensa en el progreso y que busca extenderse utilizando como

medio principal esta potente herramienta que va en crecimiento cada día más.

Una página Web, es como tener una sucursal u oficina de una empresa abierta al

público en general las 24 horas del día y los 365 días del año, ofreciendo

información importante a clientes potenciales que buscan lo que esta ofrece sin

importar en qué lugar del mundo se encuentren, ya que dicha empresa será

mundialmente conocida.

Sin embargo, no es suficiente con el simple hecho de contar con el sitio web,

también hay que hacer una buena planificación y un buen diseño; debe ser

accesible para el público determinado y considerar una navegación sencilla al

momento de hacer una estructura con elementos como texto, imágenes, enlaces,

videos, entre otros. Es decir, hay que hacer una buena aplicación del Diseño Web.

Es recomendable para toda empresa que posee un sitio web, estar en constante

actualización y supervisión, especialmente si es nuevo, con el fin de verificar qué

tanto impacto ha causado en los clientes y si va en aumento el número de

usuarios que visitan el sitio. Sin embargo, si el sitio ha tenido éxito en la web, es

muy importante no olvidarse de él, los aspectos funcionales y estéticos de una

web de gran tamaño requieren una atención continua de mantenimiento,

actualizaciones y revisiones, tanto de los contenidos como de los comentarios de

los usuarios.

Refiriéndose al proyecto en sí, el tiempo que se tuvo para realizarlo y los

pormenores que pudieron haberse presentado al estarlo desarrollando, es

gratificante decir que los resultados obtenidos fueron satisfactorios para ambas

partes.

58

REFERENCIAS BIBLIOGRÁFICAS

Desarrollo web. (2001). Formatos gráficos para páginas web. Retomado de

http://www.desarrolloweb.com/articulos/19.php

Eaton, E. (2003). Diseño Web: Elementos de Interfaz. Madrid, España: Anaya.

Guía de posicionamiento. (2013). Contenido de páginas web. Retomado de

http://paginas-web.e-ingenieros.cl/contenido-paginas.htm

Informática Milenium S.A de C.V. (2014). ¿Qué es la web?. Retomado de

http://www.informaticamilenium.com.mx/es/temas/que-es-el-web.html

Informática Milenium S.A de C.V. (2014). ¿Qué es una página web?. Retomado de

http://www.informaticamilenium.com.mx/es/temas/que-es-una-pagina-

web.html

JAVAJAN. (2011). Guía para diseñadores gráficos. Retomado de

http://www.guiadiseño.com/08_contenidos.php

Lamarca, M. (2011). Internet. Retomado de

http://www.hipertexto.info/documentos/internet.html

Lynch, Patrick y Horton, Sarah. (2004). Principios de diseño básicos para la

creación de sitios web. Barcelona, España: Gustavo Gili.

Piwonka, Alicia. (1996). Internet en acción. Santiago de Chile: Mc Graw Hill.

Webmastering. (2014). Diseño web. Retomado de http://es.kioskea.net/contents/781-webmastering-diseno-web Webnode. (2014). Pie de página: El último pero no menos importante elemento de

una web. Retomado de http://www.webnode.es/blog/2012/10/01/pie-de- pagina-web/

59

Wucios, W. (1996). Fundamentos del diseño. Barcelona, España: Gustavo Gili.

ANEXOS

60

/// brief informativo

/// DATOS GENERALES

Nombre completo de la

empresa Dulces travesuras

Tipo de proyecto Sitio web

Dirección Valle amarillo. No. 1524. Colonia Mira Valle.

Telefono 6441508347 RFC

Fax - E-

mail Shenia.valenzuela@hotmail.com

Sitio Web -

Responsable Jesús Efrén Bórquez Castruita

Telefono 6441508347 Cel

Fax E-

mail bocastruita@hotmail.com

Horario de contacto

9:00 a.m -13:00 p.m. y 15:00 – 19:00 p.m

/// CUESTIONARIO

A.- La empresa o producto 1.- ¿Cuál es el giro de la empresa o producto? Repostería 2.- ¿Cuál es la historia de su empresa? Inicia con la venta de bollitos en casa de mi mamá y poco a poco se empezamos a ofrecer pasteles a los familiares, amigos. Con el tiempo ofrecimos paquetes de mesas saladas, de postres y decoración de eventos. Prácticamente estamos trabajando en fechas especiales como el 14 de febrero, día de las madres, día del niño, etc… 3.- ¿Cuál es su misión? No se define 4.- ¿Cuáles son las metas mas importantes de la empresa o producto (en orden de importancia de mayor a menor)? Consolidarnos en la región como una empresa de servicios para eventos. 5.- Describa sus productos o servicios

61

Elaboración de pasteles Decoración de eventos Elaboración de mesas dulces, saladas Elaboración de repostería fina (cupcakes, cakepops, etc..) 6.- Defina en una sola frase su empresa o producto Dulces travesuras en donde encuentras todo para tu evento B.- Audiencia 7.- ¿Cuál es su mercado meta? La clase media. Y que además tengan un gusto fuerte por la decoración y la repostería. 8.- ¿Cómo quiere ser percibido por sus clientes? Como una empresa seria y profesional en la cual poner la confianza para la organización de su evento 9.- ¿Por qué sus clientes prefieren su producto o servicio sobre otros? El servicio, calidad en el producto y la creatividad. C.- Competencia 10.- ¿Quiénes son sus competidores? Los diversos prestadores de servicios para esta area. 11.- ¿Cuáles son sus ventajas contra la competencia? El servicio, la calidad y la originalidad de cualquier producto o servicio que se contrate. 12.- ¿Cuáles son sus desventajas contra la competencia? Somos una empresa nueva poco conocida. 13.- Existe algún competidor al que admire ¿Cuál es y por qué? D.- Entorno 14.- ¿Qué tendencias o cambios afectan a la industria? Las temporadas de eventos solo son algunos meses fuertes. 15.- ¿Qué visión de su empresa tiene a corto y mediano plazo? Ser una empresa líder reconocida por el trabajo y la calidad con la que se realizan los eventos. 16.- ¿Tiene alguna forma de medir la efectividad de su producto o servicio?¿Cuál es?

62

E.- Estrategia 17.- ¿Ha implementado alguna estrategia de comunicación anteriormente, cuál? Fan page y página de facebook. 18.- Si contestó afirmativamente la pregunta anterior ¿Qué resultados obtuvo? Se obtuvieron buenos resultado no tanto como se esperaba 19.- ¿Qué podría afectar el éxito de su empresa o producto? La mala reputación que se pueda generar , es por eso que siempre estamos comprometidos con la calidad de nuestros productos y servicios. 20.- ¿Tiene planes de expansión de su empresa o desarrollos de nuevos productos en un corto plazo? ¿Cuáles? por lo pronto es establecernos en la región como una empresa formal y reconocida.

/// INFORMACION ADICIONAL