FACULTAD DE CIENCIAS

DE LA COMUNICACIÓN

Diseño de un sitio web para dar a conocer los servicios de la tienda de mascotas
“Diagonal Pet” a clientes reales y potenciales de la ciudad de Guatemala. Guatemala
2014.

PROYECTO DE GRADUACIÓN

Presentado a la Facultad de Ciencias de la Comunicación

Guatemala, C.A.

ELABORADO POR:

Bryan Josue Rodas Nova

09000525

Para optar al titulo de:

LICENCIATURA EN COMUNICACIÓN Y DISEÑO

Nueva Guatemala de la Asunción, 2014

 AUTORIDADES

RECTOR

DR. EDUARDO SUGER COFIÑO

VICERRECTORA

DRA. MAYRA DE RAMÍREZ

VICERRECTOR ADMINISTRATIVO

JEAN PAUL SUGER CASTILLO

SECRETARIO GENERAL

LIC. JORGE RETOLAZA

DECANO DE FACULTAD DE CIENCIAS DE LA COMUNICACIÓN

LIC. LEIZER KACHLER

VICE-DECANO

LIC. RUALDO ANZUETO

ii
Resumen

La tienda de mascotas Diagonal Pet no cuenta con un sitio web que cumpla la función
de informar a clientes reales y potenciales, los servicios que el mismo ofrece. Por lo
que se planteó el siguiente objetivo: Diseñar un sitio web para dar a conocer los
servicios de la tienda de mascotas “Diagonal Pet”, a clientes reales y potenciales de la
ciudad de Guatemala.

Se realizó una herramienta de validación para conocer la percepción del grupo objetivo
conformado por personas trabajadoras y socialmente activas que forman parte de una
rutina diaria en la sociedad. Sus hobbies comprenden la lectura, tiempo en familia, son
personas con costumbres bien cimentadas, pueden ser religiosas pero su característica
a resaltar es el amor por los animales, y también expertos en las áreas de
comunicación y diseño.

El resultado obetenido fue que se diseñó y desarrolló un sitio web para la tienda de
mascotas Diagonal Pet, para dar a conocer los servicios y productos a clientes reales y
potenciales, se recomienda seguir actualizando el sitio web con diferentes productos
cada mes. Si es posible pasarlo de estático a dinámico, para que pueda ser mejor
posicionado en los buscadores mas importantes.

iii
Para efectos legales únicamente el autor, Bryan Rodas, es responsable del contenido
de este proyecto.

iv
Índice
Portada.

Carta de solicitud de tema (estudiante a FACOM)

Carta de aprobación de tema y asesor (a) (FACOM a estudiante)

Carta de asesor (a) entera satisfacción del proyecto

Carta de información de examen privado

Carta de corrector de estilo

Carta de publicación del proyecto (FACOM a estudiante)

Autoridades de la Universidad.

Resumen.

Hoja de autoría.

v
Índice

Capítulo I: ......................................................................................................................1

! ! ! ! ! ! ! ! !

1.1. Introducción! ! ! ! ! ! ! ! ! ! !

Capítulo II: Problemática................................................................................................2

2.1 Contexto...........................................................................................................2

2.2 Requerimiento de comunicación y diseño. .....................................................2

2.3 Justificación.....................................................................................................2

2.3.1 Magnitud.......................................................................................................3

2.3.2 Vulnerabilidad...............................................................................................3

2.3.3 Trascendencia ..............................................................................................4

2.3.4 Factibilidad....................................................................................................4

2.3.4.1 Recursos Humanos...................................................................................4

2.3.4.2 Recursos Organizacionales ......................................................................4

2.3.4.3 Recursos Económicos ..............................................................................4

2.3.4.4 Recursos Tecnológicos..............................................................................4

Capítulo III: Objetivos de diseño..................................................................................5

3.1. Objetivo general..............................................................................................5

vi
 3.2. Objetivos específicos......................................................................................5

Capítulo IV: Marco de referencia...................................................................................6

4.1 Información general del cliente.....................................................................6-8

Capítulo V: Definición del grupo objetivo....................................................................9

5.1 Perfil geográfico...............................................................................................9

5.2 Perfil demográfico............................................................................................9

5.3 Perfil psicográfico..........................................................................................10

5.4 Perfil conductual...........................................................................................10

Capítulo VI: Marco teórico......................................................................................11-35

6.1 Conceptos fundamentales relacionados con el producto o servicio.........11-23

6.2 Conceptos fundamentales relacionados con la comunicación y el diseño........................23-25

6.3 Ciencias auxiliares, teorías y tendencias..................................................28-35

Capítulo VII: Proceso de diseño y propuesta preliminar.....................................36-60

7.1 Aplicación de la Información obtenida en el Marco Teórico...........................36

7.2 Conceptualización..........................................................................................39

vii
 7.2.1 Método........................................................................................................39

7.2.2 Definición del concepto...............................................................................40

7.3 Bocetaje.........................................................................................................40

7.4 Propuesta preliminar......................................................................................56

Capítulo VIII: Validación técnica..................................................................................60

8.1 Población y muestreo....................................................................................60

8.2 Método e Instrumentos..................................................................................60

8.3 Resultados e Interpretación de resultados....................................................61

8.4 Cambios en base a los resultados................................................................68

Capítulo IX: Propuesta gráfica final............................................................................72

Capítulo X: Producción, reproducción y distribución.........................................77-79

10.1 Plan de costos de elaboración. ...................................................................77

10.2 Plan de costos de producción.. ...................................................................78

10.3 Plan de costos de reproducción. . ...............................................................78

10.4 Plan de costos de distribución. ...................................................................78

10.5 Cuadro resumen.. .......................................................................................79

Capítulo XI: Conclusiones y recomendaciones.........................................................80

viii
 11.1 Conclusiones. ..............................................................................................80

11.2 Recomendaciones........................................................................................81

Capítulo XII: Conocimiento general.......................................................................82-83

Capítulo XIII: Referencias. .....................................................................................84-86

Capítulo XIV: Anexos....................................................................................................87

ix
Capítulo I
1.1 Introducción

El presente proyecto de graduación titulado: “Diseño de un sitio web para dar a conocer
los servicios de la tienda de mascotas “Diagonal Pet” a clientes reales y potenciales de
la ciudad de Guatemala”, surge por la carencia de un medio de comunicación digital
formal para la empresa. Un sitio web trae consigo presencia, y para los clientes,
sensación de formalidad, seriedad y confianza respecto a la compañía.

El objetivo general que se planteó es: Diseñar un sitio web para dar a conocer los
servicios de la tienda de mascotas “Diagonal Pet” a clientes reales y potenciales de la
ciudad de Guatemala.

Para el diseño del sitio se investigó acerca de las tendencias y nichos de diseño web a
través de una comparativa de los sitios web de otras tiendas que también prestan este
tipo de servicios para que el mismo cuente con todos los requisitos que se requieren
para su validación en la w3c. Asimismo se recopiló información de la tienda y del
enfoque que desean dar al sitio web para incluirlos en el contenido de la propuesta. Se
efectuó el método de relaciones forzadas para conceptualizar, que consiste en
relacionar nuestro problema o tema principal con características surgidas de conceptos
o elementos elegidos aleatoriamente, buscando nuevas ideas que permitan desarrollar
soluciones originales. Se bocetó en base a esto, para luego digitalizar una propuesta
preliminar.

Al terminar las propuestas preliminares del sitio web, se procedió a evaluar la

realización de los objetivos plantados en forma de encuesta, como instrumento de
validación técnica con el fin de comprobar la efectividad del proyecto.

Se logró superar la carencia de no contar con un sitio web que de a conocer sus
servicios y productos, y realizar todos los objetivos establecidos por el proyecto de
realizar un sitio web que lograra comunicar los productos y servicios de Diagonal Pet a
sus clientes reales y potenciales, así como desarrollar un sitio con las ultimas
tendencias del diseño web.

1
Capítulo II
Problemática
La tienda de mascotas Diagonal Pet vende productos para todo tipo de mascotas y
presta servicios varios a los ciudadanos de Guatemala. Actualmente busca una vía
rápida y práctica para que sus clientes reales y potenciales encuentren información
sobre los servicios que ofrecen.

Por esta razón se vio la necesidad de potenciar esta comunicación para obtener más
clientes. El dueño llegó a la conclusión que para lograr el objetivo de dar a conocer sus
servicios a los mismos, la propuesta de elaborar un sitio web era lo más apropiado para
cumplir sus objetivos.

2.1 Contexto

La tienda de mascotas Diagonal Pet surge como iniciativa de Renato López, que desde
muy pequeño mostró una inclinación de afección para los animales. Fue hasta después
de los 25 años que decidió poner un comercio acorde a su gusto por los animales y
fundá Diagonal Pet, como tienda con productos para todo tipo de animal doméstico,
haciendo énfasis en servicios de grooming para perros de compañía.

2.2 Requerimiento

La tienda de mascotas Diagonal Pet no cuenta con un sitio web que cumpla la función
de informar a clientes reales y potenciales, los servicios que el mismo ofrece.

2.3 Justificación

Para sustentar las razones por las que se consideró importante fortalecer la imagen de
la empresa y desarrollar una vía de comunicación con los clientes, se diseña un sitio
web justificado a partir de 4 variables: a) magnitud b) trascendencia c) vulnerabilidad d)
y factibilidad.

2
2.3.1 Magnitud

En Guatemala, basandose en el ultimo censo del año 2011 se proyecta que

existen 14,713,763 habitantes, de los que 4,103,865 residen la ciudad capital.
Guatemala tiene un total de 263 pet shops. En el sector de la zona 10 existen
mas de 44 pet shops incluyendo Diagonal Pet.

14,713,763 Población

4,103,865 Ciudad

263 Pet Shops

44 Pet Shops Z.10

380 Clientes Reales

800 Clientes Potenciales

2.3.2 Vulnerabilidad

La tienda de mascotas Diagonal Pet que esta ubicada en la zona 10 de la

capital, cuenta con mucha competencia en el área. Dicha competencia tiene
muchos años de experiencia, poseen identidad gráfica y se publicitan por
diferentes medios incluyendo la web.

Diagonal Pet también tiene presencia en redes sociales pero no existe un sitio
web formal que los represente ni identidad corporativa para comunicarse con
sus clientes ya que todavía utilizan un correo de Hotmail para solventar dudas
respecto a la empresa.

Lo anterior hasta cierto punto es negativo, ya que a primera vista el cliente no

percibe solidez, lo que es necesario para cualquier empresa, especialmente una
tienda que ofrece servicios a las mascotas de las personas que se interesan por
sus animales y los aprecian como parte de la familia. Por consiguiente, brindar
servicios los transforma como una empresa con gran responsabilidad.

3
2.3.3 Trascendencia

Proyectar una presencia en la web y construir imagen para que clientes reales y
potenciales puedan percibir una empresa seria, sólida y comprometida con sus
clientes respecto a las fortalezas que la tienda posee con sus productos o
servicios, ya que se tratan mascotas que pueden llegar a tener gran valor
sentimental en la vida de una persona.

2.3.4 Factibilidad

2.3.4.1 Recursos Humanos: La tienda cuenta con el factor humano

adecuado que tiene la capacidad, el conocimiento, la experiencia y las
habilidades para el manejo, funcionamiento de los demás recursos, lo que
da la posibilidad de desarrollar las funciones que desempeñan dentro de
la organización.

2.3.4.2 Recursos Organizacionales: El dueño de la tienda está en

disposición de brindar la información que sea necesaria para la
realización del sitio web. También para autorizar cualquier requisito de
validación que sea requerido.

2.3.4.3 Recursos Económicos: La tienda cuenta con los recursos

económicos necesarios para la realización del sitio web.

2.3.4.4 Recursos Tecnológicos: La organización cuenta con el equipo y

las herramientas indispensables para administrar y distribuir el resultado
del proyecto de graduación que contiene el sitio web.

4
Capítulo III - Objetivos de diseño
3.1 Objetivo General

Diseñar un sitio web para dar a conocer los servicios de la tienda de mascotas
“Diagonal Pet” a clientes reales y potenciales de la ciudad de Guatemala.

3.2 Objetivos Específicos

3.2.1 Investigar acerca de las tendencias y nichos de diseño web a través de un

análisis comparativo de los sitios web de otras tiendas que también prestan este
tipo de servicios, para que el mismo cuente con todos los requisitos que se
requieren para su validación en la w3c, que es la organización que rige y valida
todo sitio web respecto a los estándares internacionales y tendencias.

3.2.2 Recopilar información de la tienda y del enfoque que desean dar al sitio
web para incluirlos en el contenido de la propuesta del sitio web.

3.2.3 Diagramar un layout bajo la misma línea de imagen de la tienda que será
utilizado en el sitio web al momento de estructurarlo.

3.2.4 Programar la página de la tienda de mascotas Diagonal Pet por medio de

los códigos CSS3 y HTML5, para que sea estándar en la web y ser visualizado
en cualquier dispositivo móvil.

5
Capítulo IV: Marco de referencia
4.1 Información general del cliente

Brief

Diagonal Pet
Diagonal 6 15-80 Zona 10, 01010, Guatemala, Guatemala.
2363 1051
diagonal_pet@hotmail.com

Competencia directa:

Arca de Noe y dependencias(Mega Arca)

Pets Paradise
Pet Shop Mi Sueño

Misión: Consentir, cuidar y ayudar todo tipo de animales al brindar productos y servicios
de alta calidad, para satisfacer y exceder las expectativas de todos los amantes de
animales.

Visión: Ser la empresa mas reconocida en calidad y servicio de la industria de

mascotas

Publicidad: La empresa no se publicita por medio de medios masivos, unicamente por

redes sociales.

Diagnostico FODA

Fortalezas Oportunidades

1) Infraestructura: Es adecuada para una 1) Equipo capacitado en áreas de servicio

pet shop, espaciosa y organizada. al cliente y grooming
2) Localización: Es perfecta para atraer 2) Clientes de un nivel socioeconómico
clientes potenciales. mas alto en el área
Debilidades Amenazas

1) Precios: Son un poco elevados respecto 1) Competencia masiva en el área

a la competencia incluso en el área.
2) La pet shop es relativamente nueva y 2) Zona peligrosa y muchos asaltos en el
eso puede generar desconfianza en área puede disminuir la visita de clientes.
clientes potenciales.

6
Antecedentes Publicitarios: ninguna campaña realizada anteriormente.

Atributo principal del producto: Pet store dedicada completamente al cuidado de las
mascotas, accesorios innovadores, modernos y muy creativos.

Historia

La tienda de mascotas Diagonal Pet surge como iniciativa de Renato López, y fue
hasta después de los 25 años que decidió poner un comercio acorde a su gusto por los
animales y funda Diagonal Pet como tienda con productos para todo tipo de animal
doméstico, haciendo énfasis en servicios de grooming para perros de compañía. La
empresa tiene 1 año de laborar.

Organigrama

Renato López
Gerente Administrativo

Otto Poon
Encargado de tienda

José Díaz Brandon Chicol

Groomer Groomer

7
Imagen Actual

La tienda nunca ha realizado spots publicitarios de ningún tipo en medios masivos,

tampoco tiene manual de identidad corporativa. El logotipo es genérico y fue adquirido
por la empresa en un sitio de internet de logos.

Posicionamiento: Diagonal Pet tiene presencia únicamente en las redes sociales,

gracias a muchos eventos de relaciones públicas, como campañas de adopción de
mascotas, donación de alimentos entre otros. Gracias a estos eventos, Diagonal Pet ha
alcanzado en menos de un año mas de cinco mil ¨likes¨ en facebook con una
comunidad muy activa que goza de promociones por medio de esta red social.

8
Capítulo V - Grupo objetivo
El grupo objetivo integra estudiantes o trabajadores de 18 años a 60 años,
responsables y comprometidos por sus mascotas, personas dinámicas que gustan y
sienten pasión por los animales. La mayoría de ellas económicamente activas que
viven en una rutina dentro de la sociedad y cuando regresan a casa, disfrutan de la
compañía de sus familiares y mascotas.

5.1 Perfil Geográfico

La Ciudad de Guatemala está ubicada en el valle de la Ermita con alturas que varían
entre los 1500-1600 (msnm). Posee temperaturas muy suaves entre los 12 y 28 °C.
Altitud: 1.500 metros, Latitud: 14º 37' 15" N, Longitud: 90º 31' 36" O, Extensión: 996km
y población: 4,103,865

5.2 Perfil Demográfico

Nivel Medio-Bajo

Tiene servicio doméstico

Poseen vehículo modelo no reciente

Sus hijos se educan en colegios y universidades del país.

Viajan frecuentemente dentro del país, viajes al exterior son

circunstanciales.

Ingresos familiares oscilan en un promedio de Q.10,000.00 al mes.

Su nivel educacional se encuentra en estudios primarios y secundarios

completos

Profesionales, comerciantes, pequeña industria

Habitan en casas modestas pero confortables

Fuente: Multivex Sigma Dos de Guatemala, S.A.
Datos de 2006

9
5.3 Perfil Psicográfico

El grupo objetivo de la tienda entiende a personas trabajadoras y socialmente activas

que forman parte de una rutina diaria en la sociedad, sus hobbies comprenden la
lectura, tiempo en familia, son personas con costumbres bien plantadas, pueden ser
religiosas pero su característica a resaltar es el amor por los animales.

5.4 Perfil Conductual

El grupo objetivo son personas enérgicas y ocupadas, que andan en el camino y usan
su teléfono inteligente cuando se presta la situación, en donde buscan en un sitio web a
primera entrada datos específicos como dirección y numero de teléfono, entre otros
para resolver dudas, personas observadoras que prestan atención a detalles y quieren
obtener el mejor trato para sus mascotas.

10
Capítulo VI - Marco Teórico
6.1 Conceptos fundamentales relacionados con el producto o servicio

6.1.1 Guatemala

Guatemala, oficialmente, República de Guatemala, es un país situado en

América Central, en su extremo noroccidental, con amplia cultura autóctona
producto de la herencia maya y la influencia castellana durante la época colonial.

6.1.2 Ciudad de Guatemala

La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la

Asunción, es la capital de laRepública de Guatemala. La ciudad se encuentra
localizada en el área sur-centro del país y cuenta con gran cantidad de áreas
verdes. De acuerdo con el último censo realizado en la ciudad, habitan
1.149.107 personas, pero considerando su área metropolitana, de acuerdo al
Instituto Nacional de Estadística, alcanza un estimado de 4.103.865 habitantes
para 2012, lo que la convierte en la aglomeración urbana más poblada y extensa
deAmérica Central.

6.1.3 Mascota

Un animal de compañía o mascota es un animal doméstico conservado con el

propósito de brindar compañía o para el disfrute del poseedor. A diferencia de los
animales de laboratorio, animales para la crianza o ganado, animales de tiro,
animales para el transporte o animales para el deporte; los animales de
compañía no son conservados para traer beneficios económicos o alimenticios.

6.1.4 Animal

En la clasificación científica de los seres vivos, el reino Animalia (animales) o

Metazoa (metazoos) constituye un amplio grupo de organismos eucariotas,
heterótrofos, pluricelulares y tisulares. Se caracterizan por su capacidad para
lalocomoción, por la ausencia de clorofila y de pared en sus células, y por su
desarrollo embrionario, que atraviesa una fase de blástula y determina un plan
corporal fijo (aunque muchas especies pueden sufrir posteriormente
metamorfosis). Los animales forman un grupo natural estrechamente

11
emparentado con los hongos. Animalia es uno de los cuatro reinos del dominio
Eukaryota, y a él pertenece el ser humano.

6.1.5 Servicio

Es un conjunto de actividades que buscan responder a las necesidades de un

cliente. Los servicios incluyen una diversidad de actividades desempeñadas por
un crecido número de funcionarios que trabajan para el estado (servicios
públicos) o para empresas particulares (servicios privados); entre estos pueden
señalarse los servicios de: electricidad, agua potable, aseo, teléfono, telégrafo,
correo transporte, educación, cibercafés, sanidad y asistencia social.

6.1.6 Tipos de mascotas

Las especies domésticas son animales que se han adaptado a los factores
ambientales en los que habitan (caseros), siendo innecesaria la reproducción
exacta de las condiciones de su ambiente silvestre para su supervivencia en un
ambiente hogareño. Los mamíferos y las aves son animales más domesticables
por su gran adaptabilidad, a diferencia de algunos reptiles, que requieren un
entorno en el que se imiten las condiciones de un desierto o una selva, o los
peces de agua salada, que requieren que se imite un ecosistema marino.

6.1.6.1 Especies domésticas

6.1.6.1.1Ungulados

Alpaca
Caballo
Cabra doméstica
Cerdo
Llama
Oveja doméstica
Vicuña
Mamíferos pequeños
Conejo común
Erizo (erizo pigmeo africano)
Gato
Hurón doméstico
Liebre
Perro

6.1.6.1.2 Roedores

12
Chinchilla
Cobaya
Gerbillo
Hámster
Rata
Ratón común
Vizcacha (vizcacha de las llanuras)

6.1.6.1.3 Aves

Aves de corral/faisánidos
Codorniz común
Faisán
Gallina de Guinea
Pavo
Pavo real
Perdiz
Pollo doméstico
Aves pequeñas
Colúmbidas (palomas y tórtolas)
Córvidos (cuervo común; urraca)
Finches (canario doméstico)
Psitácidas y otras Psittaciformes (agapornis; cacatúa; guacamaya;
perico australiano; loro gris; ninfa)

6.1.6.1.4 Aves acuáticas

Anátidas (pato; ganso; cisne)

6.1.6.1.5 Peces

Peces de agua dulce

Cíclidos (mbuna; pez disco)

Ciprínidos (carpa común; Barbus; carpín; koi; arlequín)
Corydoras
Danio
Locha
Gurami
Melanotaeniidae
Pez ángel
Luchador de Siam
Hypostomus
Poecilia (guppy)
Tetra (tetra neón)

13
 Peces de agua salada

Acantúridos
Caballito de mar
Damisela
Gobio
Lábridos
Pez ángel marino
Pez ballesta
Pez cofre
Pez globo
Pez león
Pez mariposa
Pez payaso
Pomacéntridos

6.1.6 Tienda y tienda de mascotas

Es un tipo de establecimiento comercial, físico o virtual, donde la gente puede

adquirir bienes o servicios a cambio de una contraprestación económica, de
forma tradicional. Una tienda de mascotas es un establecimiento en donde
clientes puede adquirir productos para todo tipo de animales domésticos,
asimismo, servicios agregados como grooming o vacunación y desparasitación.

6.1.7 Grooming/éstetica canina

Se denomina Grooming al conjunto de operaciones destinadas a mantener a un

perro en condiciones higiénico sanitarias óptimas y estéticamente caracterizado
con su raza.

Las fases que comprenden el grooming son:

- Preparación para el baño, desanudado y control del estado del perro
- Baño propiamente dicho, con uso de productos adecuados para cada raza y
tipo de manto.
- Secado y cepillado
- Limpieza de oídos
- Corte de uñas.
-Acabado final y perfume
6.1.8 Cliente real: persona que depende y compra de un benefactor especifico
para la adquisición de un producto o servicio.

14
6.1.9 Cliente potencial: persona que podría adquirir un producto o servicio de un
benefactor existente.

6.1.9 Herramientas para grooming

Curry o curry Brush: Una herramienta de goma o de plástico con cortas

"dientes". La herramienta se frotó (o "curry") a través de la capa del perro para
aflojar la suciedad, el pelo y otros desechos, y estimular la piel en la producción
de aceites naturales. Por lo general tienen el mango de
plástico o de madera. Se utilizan con mayor frecuencia
para los perros que tienen grandes cantidades de pelo
que ha perdido como por los pastores alemanes. También
se utilizan para desenredar nudos en ciertas partes del
cuerpo del perro, como orejas, patas o de la cola. Usando
una almohaza debe hacerse con cuidado ya que la
acción de este tipo de herramienta puede dañar la piel de
los perros, si se tira demasiado.

Hoja de Vertimiento, un metal derramador a la cuchilla con dientes cortos que

se utiliza para quitar el pelo muerto de ciertos tipos de
capas duras. La hoja de desprendimiento no se utiliza
para cortar el cabello.

Tijeras, herramientas de corte utilizados para eliminar /

acortar el pelo en ciertos tipos de abrigos o en zonas
sensibles.

Pet Care Tips: Brushing your way to a shiny coat! Agosto 2009, Recuperado en:
www.petsforlife.com.sg
Peines / Cuchillas, herramientas utilizadas para ayudar a agarrar los pelos más
largos en una capa dura y sacarlos por la raíz. Ayuda a mantener una capa

15
adecuada en muchos terriers y schnauzers. A menudo
se utiliza más en perros de exposición.

El cepillo de cerdas, es uno de los tipos más

ampliamente utilizados de cepillos principalmente debido
a que puede ser utilizado para cualquier tipo de capa.
Como regla general, más largo y ampliamente espaciadas
cerdas son adecuadas para los perros con capas más
largas y más cortas y bien repleto son mejores para usar
en perros con pelo corto.

Cepillos Slicker, se suelen utilizar después del cepillado

sobre todo con una cerda o un cepillo de alambre. Se
usan para suavizar la capa y sacar esteras y
enredos.

Peines Matt, estos son peines especiales que

ayudan a 'cortar' el pelo enmarañado de la capa del
perro sin dejar una calva.

Pet Care Tips: Brushing your way to a shiny coat! Agosto 2009, Recuperado en:
www.petsforlife.com.sg

16
Rastrillos son importantes herramientas de la
preparación especial para perros de doble
recubrimiento, como los Terranova o Huskies
siberianos. Son buenos en la eliminación del pelo
muerto de la capa inferior.

El Rey Coat es un tipo particular de navaja, útil

para la remoción de capa muerta antes de recorte.
Estas herramientas son adecuadas para muchas
razas de perros y los abrigos.

Secadores de soporte también están disponibles

para un secado rápido del pelo del perro.
Comúnmente, cuando un perro es llevado a un
peluquero esto implica una limpieza a fondo de la
capa así. Y debido a que el perro no puede salir de la
tienda, mientras húmedos, secadores especiales han
sido fabricados.

Master Grooming Tools MGT 12 Blade Coat King recuperado en: http://
www.splendidpets.co.uk/dog-grooming-c1/dog-grooming-products-c8/dematting-hand-
strip-rakes-c17/master-grooming-tools-mgt-12-blade-coat-king-p169

17
6.1.9 Caninos domésticos

El perro o perro doméstico es un mamífero carnívoro de la familia de los

cánidos, que constituye una subespecie del lobo (Canis lupus). Gracias al
proceso de domesticación, un estudio publicado por la revista de divulgación
científica «Nature» revela que su organismo se ha adaptado a cierta clase de
alimentos, en este caso el almidón, lo que no implica que por esa adaptación el
perro se ha vuelto omnívoro(se alimenta de animales y hiervas) —sigue siendo
clasificado por los organismos científicos dentro del orden de los carnívoros—
sino que más bien es alimentado como si lo fuera.7 Su tamaño o talla, su forma
y pelaje es muy diverso según la raza de perro. Posee un oído y olfato muy
desarrollados, siendo este último su principal órgano sensorial. En las razas
pequeñas puede alcanzar una longevidad de cerca de 20 años, con atención
esmerada por parte del propietario, de otra forma su vida en promedio es
alrededor de los 15 años.

6.1.10 Raza

Una raza de perro o raza canina es un grupo de perros que tienen

características muy similares o casi idénticas en su aspecto o comportamiento o
generalmente en ambos, sobre todo porque vienen de un sistema selecto de
antepasados que tenían las mismas características. Los perros han sido
apareados selectivamente para conseguir características específicas por miles
de años.

6.1.11 Registro de Raza

Las razas de perros no son científicamente definidas como una clasificación

biológica, sino que son grupos definidos por clubes de aficionados llamados club
de la raza. Una raza de perro está representada por un número suficiente de
individuos que transfieren de manera estable sus características específicas a
través de generaciones.

6.1.11.1 Tipos de razas

Razas mas importantes en Guatemala

Schnauzer: origen alemán, de compañía, sumamente inteligentes para

entrenamiento.
Pastor Alemán origen alemán, protección, compañía, entrenables.
Pug: origen inglés, problemas de respiración, compañía, entrenables.
Rottweiler: origen alemán, de pelea, con entrenamiento pueden ser de
compañía.
French Poodle: originario de Alemania, pero cruzado en Francia, perro de
compañía, sumamente inteligente para entrenamiento.
Lhasa Apso: raza tibetana, puramente de compañía y estética.
Shih Tzu: origen chino, puramente de compañía y estética.

18
Otros tipos de caninos

Affenpinscher
Airedale terrier
Akita Inu
Akita Americano
Alano español
Alaskan malamute
American Hairless terrier
American Staffordshire Terrier
Antiguo Perro Pastor Inglés
Bardino (Perro majorero)
Basenji
Basset hound
Beagle
Bichon frisé
Bichón maltés
Bloodhound
Border collie
Borzoi
Boston terrier
Bóxer
Bull Terrier
Bulldog americano
Bulldog francés
Bulldog inglés
Bullmastiff
Can de palleiro
Caniche
Cão da Serra da Estrela
Cão da Serra de Aires
Cão de Agua Português
Cão de Castro Laboreiro
Cão de Fila de São Miguel
Chihuahueño
Crestado Chino
Chow chow
Clumber spaniel
Cocker spaniel americano
Cocker spaniel inglés
Collie
Dachshund
Dálmata
Dobermann
Dogo argentino
Dogo de burdeos

19
Otros tipos de caninos

Epagneul papillón
Flat-Coated Retriever
Fox Terrier
Fox Terrier chileno
Galgo español
Galgo húngaro
Galgo inglés
Galgo italiano
Golden retriever
Gran danés
Greyhound
Grifón belga
Husky siberiano
Keeshond
Kerry blue terrier
Komondor
Kuvasz
Labrador
Lebrel afgano
Lhasa apso
Maltés
Manchester terrier
Mastín afgano
Mastín del Pirineo
Mastín español
Mastín inglés
Mastín napolitano
Mastín tibetano
Mucuchies
Pastor alemán
Pastor belga
Pastor catalán
Pastor croata
Pastor holandés
Pastor peruano Chiribaya
Pastor de los Pirineos
Pastor leonés
Pastor mallorquín
Pastor vasco
Pekinés
Pembroke Welsh Corgi
Pequeño Lebrel Italiano
Perdiguero francés
Perdiguero portugués

20
Otros tipos de caninos

Perro de agua español

Perro de agua irlandés
Perro de agua portugués
Perro dogo mallorquín
Perro esquimal canadiense
Perro pastor de las islas Shetland
Perro peruano sin pelo
Phalène
Pinscher alemán
Pinscher miniatura
Pitbull
Podenco canario
Podenco ibicenco
Podenco portugués
Pointer
Pomerania
Presa canario
Pug
Puli
Rafeiro do Alentejo
Ratonero bodeguero andaluz
Ratonero mallorquín
Ratonero valenciano
Rhodesian Ridgeback
Rottweiler
Saluki
Samoyedo
San Bernardo
Sato
Schnauzer estándar
Schnauzer gigante
Schnauzer miniatura
Setter inglés
Setter irlandés
Shar Pei
Shiba Inu
Shih Tzu
Siberian husky
Skye terrier
Sussex spaniel
Terranova
Terrier alemán
Terrier australiano
Terrier brasileño

21
 Otros tipos de caninos

Terrier escocés
Terrier galés
Terrier irlandés
Weimaraner
West Highland White Terrier
Whippet
Xoloitzcuintle
Yorkshire terrier

6.1.12 Felinos domésticos

El gato o gato doméstico es un pequeño mamífero carnívoro de la familia

Felidae. El gato está en convivencia cercana al ser humano desde hace unos
9500  años,1 periodo superior al estimado anteriormente, que oscilaba entre
3500 y 8000 años.

6.1.12.1 Razas

Azul ruso
American shorthair
American wirehair
Angora turco
Africano doméstico
Bengala
Bobtail japonés
Bombay
Bosque de Noruega
British Shorthair
Burmés
Cornish rex
California Spangled
Devon rex
Dorado africano
Europeo común
German Rex
Gato
Gato exótico
Habana brown
Himalayo
Korat
Khao Manee
Maine Coon

22
 Otros tipos de felinos

Manx
Mau egipcio
Munchkin
Ocicat
Oriental
Oriental de pelo largo
Persa
Peterbald
Ragdoll
Sagrado de Birmania
Scottish Fold
Selkirk rex
Serengeti
Seychellois
Siamés
Siamés Moderno
Siamés Tradicional
Siberiano
Snowshoe
Sphynx

6.2 Conceptos relacionados con la comunicación y el

diseño
6.2.1 Conceptos relacionados con la comunicación

6.2.1.1 Comunicación

Es el proceso mediante el cual se puede transmitir información de una entidad a

otra. Los procesos de comunicación son interacciones mediadas por signos
entre al menos dos agentes que comparten un mismo repertorio de signos y
tienen reglas semióticas comunes.

6.2.1.2 Elementos de la comunicación

Código. Es un sistema de signos y reglas para combinarlos, que por un lado es

arbitrario y por otra parte debe de estar organizado de antemano.
Canal. El proceso de comunicación que emplea ese código precisa de un canal
para la transmisión de las señales. El Canal sería el medio físico a través del
cual se transmite la comunicación.

23
Emisor. Es la persona que se encarga de transmitir el mensaje. Esta persona
elige y selecciona los signos que le convienen, es decir, realiza un proceso de
codificación; codifica el mensaje.

El Receptor será aquella persona a quien va dirigida la comunicación; realiza un

proceso inverso al del emisor, ya que descifra e interpreta los signos elegidos
por el emisor; es decir, descodifica el mensaje.

Naturalmente tiene que haber algo que comunicar, un contenido y un proceso

que con sus aspectos previos y sus consecuencias motive el Mensaje.

Las circunstancias que rodean un hecho de comunicación se denominan

Contexto situacional (situación), es el contexto en que se transmite el mensaje y
que contribuye a su significado.

6.2.1.3 Comunicación Interactiva

La interactividad, vista desde el punto de vista de la comunicación, supone la

retroalimentación que se produce en el proceso comunicativo, en el que el
emisor y el receptor intercambian información y se producen respuestas entre
ambos elementos de la comunicación.

6.2.1.4 Comunicación Audiovisual

Es el proceso mediante el que hay un intercambio de mensajes a través de un

sistema sonoro y/o visual.

6.2.1.5 Comunicación visual

El lenguaje visual hace referencia al conjunto de elementos gramaticales y

sintácticos que operan en cualquier imagen visual. Podríamos entender por
lenguaje visual, al conjunto de principios que rigen las imágenes y que pueden
ser de gran utilidad a quienes las producen.

6.2.1.6 Signo

Es una construcción social que funciona dentro de un sistema lingüístico y que

pone un "elemento" en lugar de otro. Como sistema, tiene la capacidad de
aplicarse a sí mismo y de explicar los demás sistemas de signos; pero es
importante advertir que en la lingüística y en la semiótica la teoría define al
objeto, y por lo tanto el signo es consecuencia de una perspectiva teórica.

24
6.2.1.7 Significante

El término significante se utiliza en lingüística estructural y en la semiótica para

denominar aquel componente material o casi material del signo lingüístico y que
tiene la función de apuntar hacia el significado (representación mental o
concepto que corresponde a esa imagen fónica). En la teoría psicoanalítica de
Jacques Lacan, para quien el inconsciente está estructurado como un lenguaje,
el concepto desempeña un papel central.

6.2.1.8 Significado

Se asocia al signo en todo tipo de comunicación, como es el contenido mental.

Éste depende de cada persona, ya que cada una le asigna un valor mental al
significado, pero por convención este significado debe ser igual para realizar una
comunicación óptima.

6.2.1.9 Comunicación virtual

Es el intercambio de información en entornos virtuales, es decir en entornos que

están parcial o totalmente basados en inputs sensoriales generados por
ordenador.

6.2.1.10 Lenguajes de programación

Es un lenguaje formal diseñado para expresar procesos que pueden ser llevados
a cabo por máquinas como las computadoras.

6.2.1.11 Información

Está constituida por un grupo de datos ya supervisados y ordenados, que sirven

para construir un mensaje basado en un cierto fenómeno o ente.

6.2.1.12 Sitio Web

Es un sitio en la World Wide Web que contiene documentos organizados

jerárquicamente. Cada documento (página web) contiene texto y o gráficos que
aparecen como información digital en la pantalla de un ordenador. Un sitio puede
contener una combinación de gráficos, texto, audio, vídeo, y otros materiales
dinámicos o estáticos.

25
6.2.2 Conceptos relacionados con el diseño

6.2.2.1 Diseño

Se define como el proceso previo de configuración mental, "pre-figuración", en la

búsqueda de una solución en cualquier campo. Utilizado habitualmente en el
contexto de la industria, ingeniería, arquitectura, comunicación y otras disciplinas
creativas.

6.2.2.2 Diseño gráfico

Es una profesión cuya actividad es la acción de concebir, programar, proyectar y

realizar comunicaciones visuales, producidas en general por medios industriales
y destinadas a transmitir mensajes específicos a grupos sociales determinados,
con un propósito claro y específico.

6.2.2.3 Diseño Interactivo

Es el arreglo de gráficos, texto, videos, fotos, ilustraciones, sonidos, animación,

imágenes tridimensionales (3D), realidad virtual y otros medios en un documento
interactivo. Un documento interactivo puede ser una página web con texto y
unos cuantos enlaces a otras páginas web, o un documento más complejo que
use tipografía, gráficos, sonido y video con controles interactivos como pueden
ser botones y enlaces.

6.2.2.4 Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño e

implementación de sitios web. No es simplemente una aplicación de diseño
convencional, ya que requiere tener en cuenta la navegabilidad, interactividad,
usabilidad, arquitectura de la información y la interacción de medios como el
audio, el texto, La imagen, los enlaces y vídeo.

6.2.2.5 Creatividad

Pensamiento original, imaginación constructiva, pensamiento divergente o

pensamiento creativo, es la generación de nuevas ideas o conceptos, o
denuevas asociaciones entre ideas y conceptos conocidos, que habitualmente
producen soluciones originales.

6.2.2.6 Boceto

También llamado esbozo o borrador, es un dibujo realizado de forma

esquemática y sin preocuparse de los detalles o terminaciones para representar
ideas, lugares, personas u objetos.

26
6.2.2.7 Tipografía

Es la forma de gráfica de expresar el lenguaje. Se puede ver como el arte y

técnica del manejo y selección de tipos, originalmente de plomo, para crear
trabajos de impresión.

6.2.2.6 Imagen

Es una representación visual, que manifiesta la apariencia visual de un objeto

real o imaginario. Aunque el término suele entenderse como sinónimo de
representación visual, también se aplica como extensión para otros tipos de
percepción, como imágenes auditivas, olfativas, táctiles, sinestésicas, etcétera.

6.2.2.7 Color

Es una percepción visual que se genera en el cerebro de los humanos y otros

animales al interpretar las señales nerviosas que le envían los fotorreceptores en
la retina del ojo, que a su vez interpretan y distinguen las distintas longitudes de
onda que captan de la parte visible del espectro electromagnético.

6.2.2.8 Forma

Figura espacial de las cosas, se dice que cuando una forma se descompone en
sus partes, pierde su configuración y se percibe como no configurada. Se dice
que “la forma es un todo”, es algo más que la suma de sus partes. Si se alteran
los elementos que la conforman, pierde significación.

6.2.2.9 Diagramación

Es un oficio del diseño editorial que se encarga de organizar en un espacio,

contenidos escritos, visuales y en algunos casos audiovisuales (multimedia) en
medios impresos y electrónicos, como libros, diarios y revistas.

27
6.3 Ciencias Auxiliares, artes, teorías y tendencias.
6.3.1 Ciencias

6.3.1.1 Semiología

Es la disciplina que aborda la interpretación y producción del sentido. Esto significa que
estudia fenómenos significantes, objetos de sentidos, sistemas de significación,
lenguajes, discursos y los procesos a ellos asociados: la producción e interpretación.
Toda producción e interpretación del sentido constituye una práctica significante, un
proceso de semiosis que se vehiculiza mediante signos y se materializa en textos.

6.3.1.2 Psicología

Es la ciencia que trata de la conducta y de los procesos mentales de los individuos. La

palabra latinapsicología fue utilizada por primera vez por el poeta y humanista cristiano
Marko Marulić en su libro Psichiologia de ratione animae humanae (Psicología de la
naturaleza del alma humana) a finales del siglo XV o comienzos del XVI.

6.3.1.2.1 Piscología del color

Es un campo de estudio que está dirigido a analizar el efecto del color en la

percepción y la conducta humana. Desde el punto de vista estrictamente
médico, todavía es una ciencia inmadura en la corriente principal de la
psicología contemporánea, teniendo en cuenta que muchas técnicas adscritas a
este campo pueden categorizarse dentro del ámbito de la medicina alternativa.

6.3.1.2.2 Psicología del consumidor

El comportamiento del consumidor es el estudio del comportamiento que los

consumidores muestran al buscar, comprar, utilizar, evaluar y desechar los
productos y servicios que, consideran, satisfarán sus necesidades.

6.3.1.2.3 Psicología del comunicación

Es una subrama de la Ciencia de la Comunicación y de la Psicología. Su objeto

de estudio son los procesos psicológicos que conlleva la comunicación. Para los
comunicólogos, existen distintos niveles del proceso comunicativo: intrapersonal,
interpersonal, grupal, intergrupal, mediático y sociocultural.

28
6.3.1.3 Sociología

Es la ciencia social que estudia los fenómenos colectivos producidos por la actividad
social de los seres humanos, dentro del contexto histórico-cultural en el que se
encuentran inmersos.

6.3.1.4 Biología

Es la ciencia que tiene como objeto de estudio a los seres vivos y, más
específicamente, su origen, su evolución y sus propiedades: nutrición, morfogénesis,
reproducción, patogenia, etc.

6.3.1.5 Zoología

Es la disciplina biológica que se encarga del estudio de los animales.

Es el estudio de las plantas y en el de los animales, los especialistas se interesan tanto

por las semejanzas como por las diferencias que presentan las especies para lograr la
agrupación lógica y sistemática de las mismas. Admitido este procedimiento
clasificatorio, es evidente la necesidad de adoptar una nomenclatura que sea
universalmente comprometida para superar de este modo la limitación que supondrían
las denominaciones locales o nacionales.

El interés del hombre por los animales y por la gran diversidad de sus formas comenzó
en la antigüedad. En Grecia, en el siglo IV a.C., Aristóteles describió numerosas
especies y realizó un esbozo de clasificación del reino animal; pero muchas de sus
conclusiones carecían de rigurosidad científica, pues no estaban basadas en
experimentaciones.

Ya avanzado el siglo XVIII, el sueco Carl von Linné fue el primero en encarar una
clasificación sistemática de los animales y las plantas. Su obra fue continuada por el
naturalista francés Georges Cuvier. En 1859 Charles Darwin dio a conocer su teoría de
la evolución, que significó un gran aporte a los estudios zoológicos.

29
6.3.2 Artes

6.3.2.1 Fotografía

Es el procedimiento y arte que permite fijar y reproducir, a través de reacciones

químicas y en superficies preparadas para ello, las imágenes que se recogen en
el fondo de una cámara oscura.

6.3.2.2 Dibujo

Las figuras, imágenes o delineaciones que se suelen hacer de forma manual con
la ayuda de algún instrumento (como un lápiz o un pincel) sobre distintos
materiales se conocen como dibujo.

6.3.3 Teorías

6.3.3.1 Sitio Web

Es una colección de páginas de internet relacionadas y comunes a un dominio

de Internet o subdominio en la World Wide Web en Internet.

6.3.3.2 Tecnología

Es el conjunto de conocimientos técnicos, ordenados científicamente, que

permiten diseñar y crear bienes y servicios que facilitan la adaptación al medio
ambiente y satisfacer tanto las necesidades esenciales como los deseos de la
humanidad.

6.3.3.3 Internet

Es un conjunto descentralizado de redes de comunicación interconectadas que

utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas
heterogéneas que la componen funcionen como una red lógica única, de
alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la
primera conexión de computadoras, conocida como ARPANET, entre tres
universidades en California y una en Utah, Estados Unidos.

30
6.3.3.4 WWW

En informática, la World Wide Web (WWW) o Red informática mundial1 es un

sistema de distribución de información basado en hipertexto o hipermedios
enlazados y accesibles a través de Internet.

• Navegador web, un usuario visualiza sitios web compuestos de páginas

web que pueden contener texto, imágenes, vídeos u otros contenidos
multimedia, y navega a través de esas páginas usando hiperenlaces.

6.3.3.5 Dominio de internet

El propósito principal de los nombres de dominio en Internet y del sistema de

nombres de dominio (DNS), es traducir las direcciones IP de cada nodo activo
en la red, a términos memorizables y fáciles de encontrar.

Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de
un lugar geográfico a otro en la red Internet, aún cuando el cambio implique que
tendrá una dirección IP diferente.

6.3.3.5.1 Tipos de dominio de internet

No patrocinados

.biz
.com
.edu
.gov
.info
.int
.mil
.name
.net
.org
.gob
Patrocinados
Artículo principal: Dominio de nivel superior patrocinado.
.aero
.asia
.cat
.coop
.eu

31
 No patrocinados

.jobs
.mobi
.museum
.pro
.tel
.travel
Infraestructuras
.arpa
.root
En fase de inicio
.post
.tel

6.3.3.6 Hosting

El alojamiento web es el servicio que provee a los usuarios de Internet un

sistema para poder almacenar información, imágenes, vídeo, o cualquier
contenido accesible vía web.

Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde

uno ocupa un lugar específico, en este caso la analogía alojamiento web o
alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio
web, sistema, correo electrónico, archivos etc.

En internet o más específicamente en un servidor que por lo general hospeda

varias aplicaciones o páginas web.

6.3.3.7 Tipos de hosting o alojamiento

Según las necesidades específicas de un usuario, existen diferentes tipos

de alojamiento web1 entre los cuales el usuario ha de elegir la opción
acorde a sus necesidades. Entre los principales tipos de alojamiento web
se encuentran:

Alojamiento gratuito

Es extremadamente limitado cuando se lo compara con el alojamiento de

pago. Estos servicios generalmente agregan publicidad en los sitios y
tienen un espacio y tráfico limitado.

32
Alojamiento compartido

En este tipo de servicio se alojan clientes de varios sitios en un mismo

servidor, gracias a la configuración del programa servidor web.

Resulta una alternativa muy buena para pequeños y medianos clientes,

es un servicio económico debido a la reducción de costos ya que al
compartir un servidor con cientos miles o millones de personas o usuarios
el costo se reduce drásticamente para cada uno, y tiene buen
rendimiento.

Alojamiento de imágenes

Este tipo de hospedaje se ofrece para guardar imágenes en internet, la

mayoría de estos servicios son gratuitos y las páginas se valen de la
publicidad colocadas en su página al subir la imagen.

Alojamiento revendedor (reseller)

Este servicio de alojamiento está diseñado para grandes usuarios o

personas que venden el servicio de hospedaje a otras personas. Estos
paquetes cuentan con gran cantidad de espacio y de dominios
disponibles para cada cuenta. Asi mismo estos espacios tienen un límite
de capacidad de clientes y dominios alojados y por ende exige buscar un
servidor dedicado.

Servidores virtuales (VPS, Virtual Private Server)

La empresa ofrece el control de una computadora aparentemente no

compartida, que se realiza mediante una máquina virtual. Así se pueden
administrar varios dominios de forma fácil y económica, además de elegir
los programas que se ejecutan en el servidor. Por ello, es el tipo de
producto recomendado para empresas de diseño y programación web.

Servidores dedicados

Es una computadora comprada o arrendada que se utiliza para prestar

servicios dedicados, generalmente relacionados con el alojamiento web y
otros servicios en red.

33
 Hosting Administrado y No Administrado

Algunas compañías ofrecen a sus clientes mejores precios si contratan un

plan de alojamiento "No Administrado" esto quiere decir que ellos se
limitarán a ofrecer la conectividad, recursos, panel de control y todas las
herramientas necesarias para administrar el plan contratado pero no le
brindarán asistencia para los fallos, desconfiguraciones, o errores
causados por la aplicación web que se este ejecutando (CMS, archivos
de PHP, HTML) los cuales deben ser administrados enteramente por el
webmaster del sitio web.

Colocación (housing)

Este servicio consiste básicamente en vender o alquilar un espacio físico

de un centro de datos para que el cliente coloque ahí su propia
computadora. La empresa le da la corriente y la conexión a Internet, pero
el servidor lo elige completamente el usuario (hasta el hardware).

Alojamiento web en la nube (cloud hosting)

Está basado en las tecnologías más innovadoras que permiten a gran

número de máquinas actuar como un sistema conectadas a un grupo de
medios de almacenamiento, tiene ventajas considerables sobre las
soluciones de web hosting tradicionales tal como el uso de recursos.

6.3.3.7 Sitio web dinámico

Es el sitio web que genera o presenta información a partir de una petición del
usuario.

6.3.3.8 Sitio web estático

Es el sitio web que presenta información de forma predeterminada.

6.3.3.9 HTML

Es un lenguaje de programación para la elaboración de sitios web, su filosofía se

basa en el desarrollo en la referenciación.

6.3.3.10 CSS

Las hojas de estilo en cascada hacen referencia a un lenguaje de hojas de

estilos usado para describir la presentación semántica (el aspecto y formato) de

34
 un documento escrito en lenguaje de marcas. Su aplicación más común es dar
estilo a páginas webs escritas en lenguaje HTML

6.3.3.10 PHP

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de

código abierto muy popular especialmente adecuado para el desarrollo web y
que puede ser incrustado en HTML.

6.3.3.11 Teoría del color

Es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto

deseado combinando colores de luz opigmento. La luz blanca se puede producir
combinando el rojo, el verde y el azul, mientras que combinando pigmentos cian,
magenta y amarillo se produce el color negro.

6.3.3.12 RGB

La mezcla de colores luz, normalmente rojo, verde y azul (RGB, iniciales

en inglés de los colores primarios), se realiza utilizando elsistema de color
aditivo, también referido como el modelo RGB o el espacio de color RGB.
Todos los colores posibles que pueden ser creados por la mezcla de
estas tres luces de color son aludidos como el espectro de color de estas
luces en concreto. Cuando ningún color luz está presente, uno percibe el
negro. Los colores luz tienen aplicación en los monitores de un ordenador,
televisores,proyectores de vídeo y todos aquellos sistemas que utilizan
combinaciones de materiales que fosforecen en el rojo, verde y azul.

6.3.4 Tendencias

6.3.4.1 Minimalismo

En su ámbito más general, se refiere a cualquier cosa que haya sido reducida a
lo esencial, despojada de elementos sobrantes.

6.3.4.1 Flat Design

Las páginas web o cualquier arte con diseños planos y simple.

35
Capítulo VII - Procesos de diseño y propuesta
preliminar
7.1 Aplicación de la información obtenida en el marco teórico:

7.1.1 Aplicación de la semiología para el sitio web

La semiología como disciplina es útil en diferentes niveles dentro de un

sitio web y en este caso particular su significación se usó respecto a la
percepción del usuario en conjunto con el logo.

7.1.2 Aplicación de la Tecnología al sitio web

Se utilizó como herramienta vital para la creación de artes con la suite de

Adobe y para el desarrollo del sitio web por medio de herramientas de
programación actuales.

7.1.3 Aplicación del Diseño Gráfico al sitio web

El diseño gráfico como disciplina es importante para la validación del sitio

web ya que debe ser comprobable que la pagina sea estética pero
funcional que son dos de las bases del diseño gráfico, así mismo como
para determinar elementos de diagramación y estética final para la
iconografía..

7.1.4 Aplicación de la tipografía al sitio web

La tipografía corre con una responsabilidad en nivel de percepción e

interacción con el usuario final en el sitio web ya que es el contacto
sintáctico que se tiene en forma de comunicación entre hombre-maquina.

7.1.5 Aplicación de la diagramación al sitio web

Se utilizó como ente organizacional de la información y jerarquización de

contenido para la lectura del usuario.

7.1.6 Aplicación de la psicología, psicología del color y el color

Para estudiar al ser humano nos ayuda a determinar tendencias, estas

mismas las plasmamos en psicología del color para dar percepciones y
sentimientos a través del color, en este sitio web se utilizaron estas
ciencias para hacer la primera impresión del sitio, agradable para el
usuario final con colores respecto al logotipo y diferentes tonos.

36
7.1.7 Aplicación del signo para el sitio web

El signo como elemento de sustitución de un sistema lingüístico

sirvió en el sitio web para enlazar al usuario final con otro servicios
por medio de un elemento gráfico que puede ser fácilmente
percibida su función.

7.1.8 Aplicación de la comunicación virtual para el sitio web

Es la base de todo el proyecto debido a que un sitio web es un

medio de comunicación generado para ordenadores o dispositivos.

7.1.9 Aplicación de internet para el sitio web

Como conjunto de redes interconectadas de forma mundial fue

utilizado tanto para investigación como para el
colocamiento(hosting) del sitio web y es requisito indispensable para
el funcionamiento de la mismo.

7.1.10 Aplicación de la WWW para el sitio web

Fue utilizada para entender la aplicación y visualización del sitio

web que el usuario va utilizar, ya que es la herramienta y servicio de
distribución de información por medio de internet, esto incluye
desde la diagramación hasta la forma en que el sitio intercala con el
usuario incluyendo imágenes, hiperlinks, entre otros.

7.1.11 Aplicación de dominio para el sitio web

Es una dirección virtual memorizable que sirvió para el sitio web de

forma indispensable para reservar el nombre de la empresa en la
world wide web.

37
7.1.12 Aplicación de hosting para el sitio web

Sirvió para almacenar el sitio web en internet en conjunto con toda la

información y multimedia que este mismo requería.

7.1.13 Aplicación de la creatividad para el sitio web

Sirvió como fundamento para la originalidad del sitio en cuestión de

funcionamiento, diseño e interacción con el usuario final, para que
funcionara de forma asertiva e informativa.

7.1.14 Aplicación del bocetaje para el sitio web

Sirvió después de la investigación de la empresa, para plasmar las ideas

de diseño y funcionamiento en papel, como una guía detallada a la hora
de poner en practica el diseño digital y programación.

7.1.15 Aplicación de la imagen para el sitio web

La imagen como una forma de comunicación visual sirvió de referente en

la diagramación de la interfaz de cada pagina para que el usuario final
percibiera ciertos valores de la empresa.

7.1.16 Aplicación de la zoología para el sitio web

Sirvió puramente para la información del sitio web en cuanto a los

servicios que según la empresa son aconsejables para las mascotas en
términos de alimentación y cuidado, ya que esta ciencia se encarga de
todo lo concerniente a los animales.

7.1.17 Aplicación de la comunicación visual

El sitio web como tal, es utilizado por un medio de comunicación virtual y

la comunicación visual comprende fotografías e imagines que están
respaldando a este sitio web.

7.1.18 Aplicación de la fotografía en el sitio web

La fotografía como medio de representar y expresar respalda al sitio web

para la percepción del usuario final y por fines estéticos ayuda al sitio
para denotar amplitud y minimalismo.

38
 7.2 Conceptualización:

7.2.1 Método:

Relaciones Forzadas:

Concepto:

Creado por Charles S. Whiting, consiste en relacionar nuestro problema o

tema principal con características surgidas de conceptos o elementos
elegidos aleatoriamente, buscando nuevas ideas que permitan desarrollar
soluciones originales.

Metodología:

El primer paso para la utilización de esta técnica consiste en elegir una

palabra que represente nuestro problema. Una vez elegida, debemos
armar una matriz de tres columnas. El título de la columna de la izquierda
será: “Conceptos y elementos estímulos”, y su contenido serán esas
palabras-estímulo elegidas al azar. La columna del medio, será la de
“Características”, donde se encontrarán las cualidades de los conceptos
de la columna anterior. Finalmente, en la columna de la derecha, se
ubican las nuevas ideas surgidas de relacionar las características
anteriores con nuestro problema o tema principal.

Se trabajó bajo la palabra “mascotas” para el desglose de conceptos, sus

características y la asociación con nuevas ideas.

Conceptos y Estímulos Características Nuevas ideas

Animales Acompañantes Acompañantes de la

familia.

Mascotas Felicidad Mascotas felices

Servicios Comodidad Servicios para tu

comodidad.

Bienestar Salud Salud es bienestar para tu

mascota.

Salud Buena Vida Productos, belleza y salud

para tu mascota

39
 Conceptos y Estímulos Características Nuevas ideas

Facilidad Accesibilidad Salud es alegria para tu

mascota.

Belleza Vanidad Belleza y cuidado para tu

mascota.

Cuidado Personal Cuida a tu mascota como

cuidas de ti mismo.

Alegria Comunión y Familia De todo para una de las

alegrías de tu familia.

7.2.2 Definición del concepto

Fueron analizadas todas las palabras para desarrollar una frase

conceptual que se adecuará a las necesidades de la empresa.

“De todo lo que puedas imaginar para tu mascota”

El concepto refleja a Diagonal Pet como un lugar en donde se puede

encontrar todo tipo de accesorios o servicios para la mascotas de la
familia. Se agregó esta palabra(familia) para abarcar valores como la
comunión y felicidad que conlleva dicha palabra. Asimismo, como la
palabra “mascota” para abarcar a toda la variedad de animales con los
que trabaja Diagonal Pet.

7.3 Bocetaje

El bocetaje está basado en diferentes ideas respecto al concepto “de todo lo que
puedas imaginar para la mascota de tu familia”. Es un concepto amplio y el sitio
web debe reflejar que existe bastante abastecimiento de todo lo que concierne a
mascotas y su cuidado.

En el proceso de bocetaje se tomaron en cuenta como primeras bases:

Formas
Armonia
Tipografía

40
 Tabla de requisitos

Elemento Gráfico Propósito Técnica Emoción

Tipografía La tipografía debe Elección de una Simplicidad

ser clara y precisa, tipografía y sus
no muy elaborada variantes tanto
sino minimalista. para títulos como
para textos en AI.

Forma La forma de cada Diseñar en Uniformidad

uno de los illustrador una
elementos forma que sea
representativos del adaptable al resto
sitio web debe ir en de elementos
conjunto con visuales del sitio.
pequeños detalles
del logotipo.

Iconografía El logotipo debe En illustrador se Armonía

ser visible a un deberá diseñar una
primer plano y todo serie de iconos que
el resto del sitio asistirán al usuario
web debe estar final a la toma de
acorde a las formas decisiones
antes establecidas. mientras naveguen
por el sitio.

41
 7.3.1 Bocetos a base de dibujo natural de los componentes, ilustraciones,
fotografías, diagramación, colores y/o animaciones, entre otros.

Bocetos en base a la anatomía del sitio web y diagramación.

Dibujo Natural

1024x
768px
Piezas:
Index,
servicios,
productos
y contacto.

Este boceto muestra la anatomía de una propuesta horizontal. Se puede apreciar parte
de la iconografía y orientación del sitio web que contiene el menú de lado izquierdo
para presentar con lujo de detalle el contenido del sitio en donde todas las páginas son
iguales.

42
Propuestas verticales

Estas propuestas se inclinan a la forma mas gráfica del sitio con gráficos anchos y
muchas opciones que generalizán los servicios y productos y toman función de
shortcuts. En ellas se mostraran los servicios mas importantes y productos respecto a
su mascota para atraer a las personas.

800x1450px
3 propuestas del Homepage(index.html)

Estas propuestas están diseñadas en base a la página INDEX.HTML y dan la idea

central del resto del sitio web ya que se quiere mantener uniformidad y estas piezas
pasan a funcionar como plantillas css que rigen el resto de páginas.

43
 Iconografía para el sitio web

Estos son los diferentes iconos que utilizará el sitio web por sus diferentes páginas.

44
 Bocetos de diagramación para el orden de los elementos del sitio web.
Están diseñados para que el usuario final pueda ver la información de forma correcta y
puede localizarse en cualquier página del sitio web sin desubicarse.

800x1450px
INDEX.HTML(4)

La medida es la misma para todas

las propuestas del Homepage.

45
7.3.2 Proceso de bocetaje formal en base a la diagramación de dibujo técnico de
los componentes, ilustraciones, fotografías, colores y/o animaciones, entre otros.

1024x1800px
INDEX(HOMEPAGE)

redes sociales

logotipo de la empresa.

iconografía de mascotas
(servicios y productos)

shorcut, Alimentación,
Grooming, Accesorios

Espacio del producto del

mes

Contacto

Publicidad

Las propuestas evidencian la uniformidad que se tiene con el

logotipo. Asimismo con la propuesta de conceptualización. Las
formas son coherentes respecto a la navegabilidad del sitio y
muestra la diversidad de productos y servicios por mascota.

46
 1024x1800px
INDEX.HTML(homepage)

redes sociales

logotipo de la empresa.

iconografía de mascotas
(servicios y productos)

shorcut, alimentación,
grooming, accesorios

Información general de
las mascotas.

Citas

Contacto

Esta segunda propuesta del index muestra de forma mas explícita la

información para los usuarios finales que pierden la atención por
falta de hábito al tratarse de sitios web demasiado gráficos

47
 PRODUCTOS
800x1450px

La página de productos categoriza por mascota permitiendo al

usuario final directamente acceder a productos destinados para su
mascota. Esta misma página cuenta con una galería por categoría
donde el usuario podrá mover el mouse sobre el producto de su
interés y así accesar a los detalles del producto.

48
 SERVICIOS
800x1450px

La página de servicios se enfoca en cuatro importantes

componentes de Diagonal Pet: Grooming, Veterinaria, Hotel y
Citas(hotel, grooming y veterinaria). Esto hace fácil para el
usuario final la navegación por el sitio. Asimismo mantiene la
opción de comunicar al usuario todo el tiempo con Diagonal Pet.

49
 CONTACTO
800x600px

La página de contacto es hasta ahora la parte mas simple en

cuestión de diseño pero las mas complicada en código. Presenta un
formulario con diferentes campos que permitirá a Diagonal Pet
mantener un registro de sus clientes. Al enviar la información
Diagonal recibe un correo electrónico con todos los datos y
categoriza el correo en cita veterinaria, consulta y grooming.

50
7.3.3 Proceso de digitalización de los bocetos: Incluir el paso a paso de la
construcción de ilustraciones, colocar las fotografías tomadas, el ejemplo de
tipografías u otros elementos que den vida al diseño.

Los sketchs definitivos para la digitalización y que serán utilizables

en la construcción y programación del sitio web de Diagonal Pet, aún
quedan fotografías pendientes que el cliente quiere agregar al sitio.

51
Todos los elementos gráficos del sitio web fueron
realizados en Illustrador en base a los bocetos con
cambios minimos. Asimismo como toda la interfaz del
sitio fue diagramada en el mismo software.

52
 Proceso de digitalización de las
plantillas por medio de Illustrador

53
 Colores

Este color libera las emociones negativas, le hace sentir menos inseguro, color
corporativo de la empresa.

Emocionalmente relajado e influye en los sentimientos convirtiéndolos en

amables, suaves y profundos, color corporativo de la empresa.

El turquesa es un color envolvente, refrescante y tranquilizante, color

corporativo de la empresa.

El verde nos crea un sentimiento de confort y relajación, de calma y paz interior,

que nos hace sentir equilibrados interiormente, color corporativo de la empresa.

El color amarillo es un color que aporta la felicidad, color corporativo de la

empresa.

Aporta paz y confort, alivia la sensación de desespero y de shock emocional,

ayuda a limpiar y aclarar las emociones, los pensamientos y el espíritu.

El gris equilibra, armoniza y es un color que ayuda a limpiarse interiormente.

La mayoría de los colores fueron seleccionados acorde al logotipo de la empresa, ya

que el cliente requería usar únicamente esos colores y el resto solo si fuera necesario
para el fondo.

54
 Tipografía

La familia de Helvetica es una elección perfecta para el sitio debido a que representa
simplicidad y al mismo tiempo es ajena a las percepciones del usuario ya que significa
puramente una tipografía para leer bien, no tiene emoción y es neutra para cualquier
ocasión que se utilice.

55
 7.4 Propuesta Preliminar
Homepage

1024x1800px

Primer propuesta gráfica que muestra una homepage categorizada por mascotas,
seguida de shortcuts a diferentes servicios y productos. En el área de contacto se
pueden programar citas. Los colores son corporativos.

56
 Servicios

1024x1800px

Propuesta gráfica de la página de servicios, que se muestra con los colores

corporativos de la empresa. Asimismo con la información proporcionada por el cliente
para describir sus servicios.

57
 Productos

1024x1800px

Propuesta gráfica de la página de productos en donde se interactúa con el usuario por

medio de mouse over(el usuario pasa el mouse encima del producto que le interesa)

58
 Contacto

1024x800px

Propuesta gráfica de la página de contacto, con sentido minimalista. Es la única página

de todo el conjunto que sus proporciones son inferiores debido al poco contenido que
lleva con el formulario de contacto.

59
Capítulo VIII - Validación técnica
Al terminar las propuestas preliminares del sitio web, se procede a evaluar la
realización de los objetivos planteados en forma de encuesta como instrumento de
validación técnica con el fin de comprobar la efectividad del proyecto.

8.1 Población y Muestreo

Para evaluar la propuesta gráfica preliminar se tomarán en cuenta tres grupos:

-Cliente
-Grupo objetivo
-Expertos

De estos se puede calcular una muestra con mucha significancia para medir la
funcionalidad y efectividad del sitio web.

Cliente:

Renato Lopez, Fundador y Administrador de Diagonal Pet.

Grupo Objetivo:

Hombres y mujeres de 16 a 55 años de edad de la ciudad de Guatemala, activas

y que tengan amor por los animales demostrándolo por medio de sus mascotas.

Expertos:

Se toman en cuenta 3 expertos afines con el tema del proyecto y la carrera.

Licenciada en Diseño Gráfico, Lourdes Donis, Universidad Galileo.

Licenciada en Comunicación y Diseño, Andrea Lopez.

Licenciado en Sistemas de Información, Hugo Pérez.

8.2 Métodos e instrumentos

Con la definición de los tres grupos objetivos como base para la validación del
proyecto, se utilizará la encuesta como herramienta de medición.

60
La encuesta está dividida en parte objetiva, semiológica y operativa con un total
de 13 preguntas.

Abajo se detalla cada una de las partes a evaluar.

Parte objetiva: Se basa en los objetivos de proyecto plantados anteriormente. Se

realizó con preguntas dicotómicas (Si o no).

Parte semiológica: evalúa la veracidad de los elementos visuales en el sitio web

en cuanto a percepción en base a la funcionalidad. Se utilizó la escala de
Likert(mucho, poco o nada).

Parte operativa: evalúa si el sitio web cumple con la función de comunicar tanto
textual como visual. Se utilizó la escala de Likert(mucho, poco o nada).

La realización de las encuesta se basó puramente en la interacción de cada uno

de los grupos a evaluar con el sitio web. La herramienta de validación se
encuentra en los anexos de este documento.

8.3 Resultados e interpretación de resultados

A continuación se presentan las gráficas de los resultados de las encuestas.

Parte objetiva

1. ¿Considera que es necesario el desarrollo de un sitio web para dar a conocer

los servicios de la tienda de mascotas “Diagonal Pet” a clientes reales y

Si

No

0 25 50 75 100

potenciales de la ciudad de Guatemala?

61
Interpretación y hallazgo: El 100% de la población considera que sí es necesario
el desarrollo de un sitio web para dar a conocer los servicios de la tienda de

Si

No

0 25 50 75 100

mascotas Diagonal Pet.

2. ¿Considera que el sitio web esta acorde a las tendencias y nichos de diseño
que se manejan en el mercado actualmente?

Interpretación y hallazgo: El 99% de la población considera que el sitio web está

acorde a las tendencias y nichos de diseño que se manejan en el mercado
actualmente, mientras que el 1% dice que no lo está.

3. ¿Considera que se investigó y recopiló la información necesaria para dotar al

sitio del contenido y enfoque de Diagonal Pet?

Si

No

0 25 50 75 100

Interpretación y hallazgo: El 97% de la población considera que se investigó y

recopiló la información necesaria para dotar al sitio del contenido y enfoque de
Diagonal Pet, mientras que el 3% piensa lo contrario.

62
4. ¿Considera que el sitio web esta acorde a la linea de diseño e imagen que
Diagonal Pet actualmente utiliza?

Si

No

0 25 50 75 100

Interpretación y hallazgo: El 98% de la población considera que el sitio está

acorde a la línea de diseño e imagen de Diagonal Pet, mientras que el 2%
piensa que no.

Parte Semiológica

5. ¿Considera que los colores del sitio web son adecuados a la imagen de
Diagonal Pet?

Muy adecuados

Poco adecuados

Nada adecuados

0 25 50 75 100

Interpretación y hallazgo: El 100% de la población considera que los colores del

sitio web son adecuados a la imagen de Diagonal Pet.

63
6. ¿Según su criterio la tipografía utilizada en el sitio web es?

Muy adecuada

Poco Adecuada

Nada adecuada

0 22.5 45 67.5 90

Interpretación y hallazgo: El 89% de la población considera que la tipografía

utilizada es adecuada, el 8% considera que es poco adecuada y el 3%
considera que es nada adecuada.

7. ¿Según su criterio, las imágenes e ilustraciones utilizadas en el sitio web se

identifican con Diagonal Pet?

Si

No

0 25 50 75 100

Interpretación y hallazgo: El 95% de la población considera que las ilustraciones

utilizadas en el sitio web se identifican con Diagonal Pet, mientras que el 5%
consideran que no.

64
8. ¿Considera que el texto del sitio es: ?

Muy legible

Poco legible

Nada legible

0 25 50 75 100

Interpretación y hallazgo: El 98% de la población considera que el texto del sitio

es legible mientras que el 2% considera que no, argumentando que hay titulos
que parece texto normal.

Parte operativa

9. ¿Considera que el menú de navegación es fácil para desplazarse por el sitio?

Muy fácil

Poco fácil

Nada fácil

0 25 50 75 100

Interpretación y hallazgo: El 100% de la población considera que el menú de

navegación es fácil para desplazarse por el sitio.

65
10. ¿Considera que el contenido del sitio web incluye la información necesaria
para el cliente?

Si

No

0 25 50 75 100

Interpretación y hallazgo: El 97% de la población considera que el sitio web

incluye la información necesaria para el ciente, el 3% considera que no.

11. ¿Según su criterio, el sitio es intuitivo y ayuda al cliente a ubicarse en todo

momento?

Muy intuitivo

Poco intuitivo

Nada intuitivo

0 25 50 75 100

Interpretación y hallazgo: El 100% de la población considera que el sitio web es

intuitivo y ayuda al cliente a ubicarse en todo momento.

66
12. ¿Considera que se mantiene una igualdad visual en todas las paginas del
sitio web?

Mucha

Poca

Nada

0 25 50 75 100

Interpretación y hallazgo: El 97% de la población considera que el sitio web

mantiene igualdad visual, mientras que el 3% considera que no.

13. ¿Considera que el sitio web de Diagonal Pet es funcional para los visitantes?

Si

No

0 25 50 75 100

Interpretación y hallazgo: El 99% de la población considera que el sitio web es

funcional, mientras que el 1% considera que no.

67
Conclusiones de fase de validación

• Es necesario un sitio web para dar a conocer los servicios de la tienda de

mascotas “Diagonal Pet” a clientes reales y potenciales de la ciudad de
Guatemala.

• El porcentaje de la población obtenida es favorable basándonos en las

respuestas obtenidas del cliente, grupo objetivo y expertos en todas las áreas
de la encuesta.

• Cumple con los objetivos del proyecto

• Cuenta con requisitos estéticos y operativos requeridos en la web.

• Se identifica con Diagonal Pet y su enfoque conceptual.

• Intuye y ubica a los clientes de Diagonal Pet cuando visitan el sitio.

• Cumple con la funcionalidad requerida por los clientes.

8.4 Cambio en base a los resultados

En base a las notas recibidas por la muestra de validación se realizarán algunos

cambios que son positivos y mejoran muchas áreas del sitio web de Diagonal
Pet.

68
 Index 800x 1800px Cambios
Antes!! ! ! ! ! Después

4
3 1

5.1

4.1

Justificación:
1) El cliente argumentó que gustaba que el sitio estuviera mas pequeño(menos
zoom) en todas las páginas, este cambio es general. En el gráfico anterior se
muestra la diferencia(para el resto de páginas revisar el capitulo IX).
2) Que se le agregara un borde a la galería, asimismo encajar el sitio para que
el menú no se observara flotando de la nada. Cambio general en el reto de
piezas.
3) La implementación del logotipo completo en todas las páginas.
4) El cambio de iconos a las redes sociales a unos mas legibles, así como en
los shortcuts.
5) El cliente también argumentó que deseaba un espacio para colocar
publicidad que aún no ha determinado. Asimismo al lado derecho de la
página. Esto afectaría el resto de páginas del sitio web, asi como el cambio
de algunos elementos para mas espacio. para colocar misión y visión.

69
 Antes Después

1) Cambio en los íconos de categoría

a gráficos circulares, y el
encabezado(ver cambio 1 de la
página anterior.)

70
 Después

Antes

En estas piezas no
existió ningún cambio
notorio a excepción de
1 de la página de
servicios.

1) Fondo azul para

cada texto de servicio.
2) Redes sociales
color negro.

La página de contacto
no sufrió cambios de
diseño, mas que de
resolución, que la
página anterior
especifica.

71
Capítulo IX - Propuesta gráfica final
Homepage 800x 1800px

Colores en base al logotipo, localización de redes

sociales acorde al tema del sitio, con galería
automática implementada en html5, css3 y php.

72
 Servicios
800px x 2600px

Misma gama de colores con

efectos cs3 de hover para
mejor interacción con el
usuario, menú desplazable
y shortcuts a las diferentes
secciones de la página con
botón de contacto que
direcciona a la página de
contacto.

73
 Productos
800px x 2600px

Shortcuts interactivos al inicio de la

página, rebotan cuando se ingresa
a esta sección por primera vez
pero interacción y entretenimiento
del usuario, galería con un máximo
de 12 productos por sección con
un hover programado en css3 y
html5, para mejorar la intuición
hombre máquina con el usuario
final.

74
Contacto
800px x 700px

Página de contacto con formulario

programado en php, diagramado y
colocado por medio de css3 y html5,
el sobre rebota cuando el usuario
ingresa para mantener la atención
del usuario.

75
 Aplicaciones
para
ordenadores y
móviles

El sitio web es compatible con

cualquier dispositivo móvil, tablet o
explorador(IE 7 tiene variaciones).

76
 Capítulo X - Producción, reproducción y
distribución.

Debido a la naturaleza del proyecto, un sitio web facilita mucho mas el sentido
de producción, reproducción y distribución ya que estos últimos dos se
implementan de manera mas sencilla con el servicio de dominio y hosting.

Aspectos a tomar en cuenta

Plan de producción: se establecen los recursos necesarios para realizar un sitio

web, desde la comunicación con el cliente, recopilación de información,
intercambio de información con el cliente, diagramación y presentación de
bocetos, y propuesta gráfica final.

Plan de reproducción: en un sitio web esta fase contiende la elaboración

operativa del sitio en términos de programación y mostrar al cliente una versión
offline en html.

Plan de distribución: se concluye con la implementación con la empresa que

proveerá hosting al sitio web, ya después de adquirido el dominio.

10.1 Plan de costos de elaboración

Q.35.00 por hora de trabajo.

Materia Tiempo Costo

Recopilación de 20 horas Q.700.00

información

Bocetaje 40 horas Q.1,400.00

Digitalización de bocetaje 90 horas Q.3,150.00

Costos operativos Transporte, internet y luz. Q.500.00

Q.5,750.00

77
 10.2 Plan de costos de producción y reproducción

Materia Tiempo Costo

Programación en html, css 20 horas Q.700.00

y php

Optimización de imágenes 10 horas Q.350.00

presentadas por el cliente

Propuesta final virtual 10 horas Q.350.00

Cambios que convengan 5 horas Q.175.00

actualizaciones en el
código del sitio

Q.1,575.00

10.3 Plan de costos de distribución

Materia Tiempo Costo

Dominio 1 hora + costo del dominio Q.35.00 + Q.125.00

(.com)

Hosting depende de plan(básico Q.370.00

por un año)

Implementación(proceso 3 horas Q.105.00

de preparar y puntear el
dominio con el hosting por
medio de nameservers en
el caso que la empresa de
hosting y dominio sean
diferentes)

Subir todos los 3 horas Q.105.00

archivos .html, .css y .php
en conjunto con images al
servidor del hosting

Q.740.00

78
 10.4 Resumen de costos

Plan de costos total

Elaboración Q.5,750.00

Producción y reproducción Q.1,575.00

Distribución Q.740.00

Total Q.8,056.00

79
 Capítulo XI - Conclusiones y recomendaciones

11.1 Conclusiones

• Se diseñó y desarrolló un sitio web para la tienda de mascotas Diagonal Pet para
dar a conocer los servicios y productos a clientes reales y potenciales.

• Se recopiló información, respecto de la tienda de mascotas para desarrollar un

concepto acorde a la visión y misión de Diagonal Pet.

• Se investigó la competencia, tendencias y nichos en el desarrollo web para ofrecer

al cliente final una propuesta diferente y no genérica en términos de diseño de
sitios web.

• Se diagramó un layout respecto de la misma línea de diseño con la que Diagonal

Pet ya contaba.

• Se desarrolló el sitio web en html5, CSS3 y PHP para que sea accesado desde
cualquier ordenador o dispositivo móvil.

80
 11.2 Recomendaciones

• Seguir actualizando el sitio web con diferentes productos cada mes, si es posible
pasarlo de estático a dinámico para que sea mejor posicionado en los buscadores
mas importantes.

• La recopilación de información es importante tenerla como un hábito, ya que da

pie a mejoras en estructura y visión en cada empresa u organización.

• La investigación debe ser continua manteniendo un enfoque de innovación y

mejora para el sitio web, revisar qué hace la competencia y cuáles son las nuevas
tendencias para que el administrador pueda hacer cambios notorios respecto del
mundo cambiante.

• Mantener colores y formas corporativas para el posicionamiento de la marca tanto

en el sitio web como en las redes sociales a las que este direcciona.

• Desarrollar un sitio web con tecnologías obsoletas, como flash, dejan mucho que
desear respecto a las tendencias mundiales. Actualmente un sitio web que no
puede ser visualizado en los teléfonos móviles mas importantes del mercado, no
es un sitio web apto para ninguna organización. Se recomienda mantener el sitio
web en html5 y que sus próximas adiciones sean con esta misma tecnología o con
una que sea apta para todo tipo de dispositivos móviles.

81
Capítulo XII - Conocimiento general
12.1 Demuestra

82
12.2 Razonamiento

La infografía muestra lo que a criterio del sustentante son las cuatro bases mas
importantes para la carrera, seguida de su definición y aplicación, en la ultima
sección se observa la separación en donde aparecen los cursos que la
universidad impartió para apoyar estas cuatro grandes categorías que definen la
carrera.

83
Capítulo XIII - Referencias

13.1 Referencias Físicas

Bertha C, Ramos, Uribe, Mary. 2002. Diagramación, Artes Gráficas. Estados

Unidos. Icon Group International.

Beirut Michael, 2001, Fundamentos de Diseño Gráfico, Introducción al diseño, p.

21.

Frascara, Jorge. 2004. Diseño Gráfico para la gente. Buenos Aires, Argentina.
Ediciones Infinito.

Heller, Eva, 2004. Psicología del Color: Cómo actúan los colores sobre los
sentimientos y la razón. España. Editorial Gili, S, L.

Ideas Propias editorial, 2005. Diseño de páginas web y diseño gráfico, España,
Ideas Propies editorial.

Koren, Leonar. 2013. Recetario de diseño gráfico Propuestas, combinaciones y

soluciones gráficas. México. Editiorial Gustavo Gili.

Leborg, Christina. 2013. Gramática Visual. España. Editorial Gili, S,L.

Shaughnessy, Adrian. 2006. Como ser diseñador gráfico sin perder el alma.
España. Index Books, S,L.

84
Somoza, Emilce. 2006. Manual de Presupuestos para el Diseño Gráfico. Mexico.

Wong, Benjamin. 2004. Diseño Gráfico Digital.España. Editorial Gustavo Gili S,L.

13.2 Referencias de la web

AQP Hosting y Web, (Oct, 2013), 7 tendencias consolidadas en el diseño web

para el 2014, Recuperado en:

http://blog.aqphost.com/articulos/7-tendencias-consolidadas-en-el-diseno-web-
para-el-2014/

aangeelha, (24 de Sep, 2012), Tipos de Mascotas Domésticas, Recuperado en:

http://www.slideshare.net/aangeelha/tipos-de-mascotas-domesticas

Adriana, (Julio, 2013), Glosario de términos de diseño y desarrollo web,

Recuperado en:

http://www.genotipo.com/blog/glosario-de-terminos-de-diseno-y-desarrollo-web-
parte-3/

(2012), Guia Breve de CSS, Recuperado en:

http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo

Cáceres, Jesus (11 de Agos, 2013), Increibles herramientas CSS para diseño
web, Recuperado en:

http://www.xn--apaados-6za.es/tenemos-que-apanar/internet-tutoriales-y-trucos/
428-8-increibles-herramientas-css-para-el-diseno-web.html

85
M

Montes, Tere. (Feb, 2009) Definición Acertada de Diseño Gráfico, Recuperado

en:

http://montesdesignpr.blogspot.com/2009/02/definicion-acertada-de-diseno-
grafico.html

Viladoms, Enric. (Agos, 2013), ¿Qué define un buen diseño web? ,

Recuperado en:

http://www.smartbrand.es/blog-marketing/design/principios-diseno-web/

Sanchez, Abel. (Mayo, 2013), El Diseño Web Barato y sus Consecuencias.

Recuperado en:

http://www.webimpacto.es/blog/diseno-web-barato-consecuencias/

Vela, Alfredo. (Julio, 2013), Historia del desarrollo web, Recuperado en:

http://ticsyformacion.com/2013/07/27/historia-del-desarrollo-web-infografia-
infographic-internet/

86
Capítulo XIV - Anexos
Anexo 1

Encuesta realizada al grupo objetivo, cliente y expertos.

87
88
89
Anexo 2
Cotizaciones CorpoGraphic

90
Cotización Godaddy

91
Hosting Hostgator y Hostinger

92
Anexo 3
Fotografías encuestas

Grupo
Objetivo
Cliente

Profesionales

93
Bryan Josue Rodas Nova

Guatemala 2013

94