Post on 14-Jul-2022
“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