93

Cheeta Graphics (PDF interactivo)

Embed Size (px)

Citation preview

Page 1: Cheeta Graphics (PDF interactivo)
Page 2: Cheeta Graphics (PDF interactivo)

1 2 34 5 67 8 9

CAPÍTULO

CONCEPTOS BÁSICOS DE MEDIOS

CAPÍTULO

RECONOCIMIENTO DE ETAPAS DE DESARROLLO

CAPÍTULO

DEFINICIÓN DEL TEMA

CAPÍTULO

RECOPILACIÓN DE ANTECEDENTES

CAPÍTULO

DEFINICIÓN DE VIABILIDAD Y CONTENIDOS

CAPÍTULO

DETERMINACIÓN DE CRONOGRAMAS Y PRESUPUESTOS

CAPÍTULO

CONTROL DE VARIABLE DE SOPORTE

CAPÍTULO

CONTROL DE LA ARQUITECTURA DE LA INFORMA-CIÓN

CAPÍTULO

CONTROL DE DISEÑO

Page 3: Cheeta Graphics (PDF interactivo)

Este informe contiene todos los detalles de cómo se diseñó el sitio web para la imprenta Cheeta graphics. El proceso completo parte en los conceptos básicos de los procesos, programas, tecnologías y soportes que se utilizaron en el diseño de este proyecto. El tener claros los conceptos básicos nos permiten poder recopilar toda la información posible de parte de nuestro cliente y estudiar a los posibles usuarios de la página web. Luego de esto debemos organizar a nuestro equipo de trabajo y distribuir de manera equiparada y aprovechando las capacidades de cada uno para poder trabajar de manera óptima.

Luego de tener toda la información y de tener un brief completo, podemos comenzar a diseñar las propuestas para este sitio y presentarlas al cliente para que opine y vea si realmente nuestro diseño cumple con las expectativas de ellos y puede satisfacer las necesidades de los usuarios.

Todo eso es lo que se detalla en este informe y que de seguro podrán comprender todos los procesos del encargo.

INTRODUCCIÓN

3

Page 4: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

4

La interactividad es el valor de Internet. Los usuarios pueden preguntar, comentar o aportar más información, y cuanta más facilidad se les de para ello, más eficaz será la comunicación.

La interactividad es la capacidad que tiene el usuario para navegar por el sitio web de manera no-lineal hasta el grado que hayamos establecido, dentro de los límites del medio.

La forma más sencilla de aplicar esta interactividad es con el uso de los hipertextos. Con ellos se le ofrece al usuario la posibilidad de ampliar, si quiere, información sobre conceptos concretos y se evita saturarlo. Para ello serán destacados cromáticamente para indicar qué enlaces ha visitado y cuáles no. Con ello se facilita la navegación y ayuda a definir sus siguientes pasos.

INTERACTIVIDAD

Page 5: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

5

Multimedia es un término que procede de la lengua inglesa y que refiere a aquello que utiliza varios medios de manera simultánea en la transmisión de una información. Una presentación multimedia, por lo tanto, puede incluir fotografías, videos, sonidos y texto.

En el contexto de nuestra página web se puede presentar desarrollos multimedia, con animaciones en Flash, videos insertados desde YouTube, galería de imágenes, música de fondo y material para leer. En estos casos, puede hablarse de multimedia interactiva, ya que es el usuario quien decide cómo será la presentación de la información y en qué momento iniciarla a través de sus clics.

MULTIMEDIA

Page 6: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

6

Hosting es también conocido como servicio de alojamiento. Este servicio es un espacio dentro de un servidor y sirve para alojar un sitio web.

Un sitio web es un conjunto de archivos web los cuales contienen: texto, imágenes, audio, video, etc. Y estos están almacenados en un servidor.

Los servidores se encuentran operativos las 24 horas del día, los 365 días del año. Y debe de ser así puesto que las personan navegan por sus sitios web deben encontrar la información en cualquier momento a toda hora.

Los visitantes podrán acceder a nuestro sitio web por medio de la dirección web. Nuestro dominio.

HOSTING

Page 7: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

7

La transferencia de datos es la cantidad de contenidos transferidos medidos en Giga Bytes, que un determinado servicio de hosting ofrece durante determinado periodo temporal, generalmente estamos hablando de un tiempo estipulado de un mes.

Es por ello que decimos que cuanto mayor sea el número de visitantes que posea el sitio web, y cuanta más información se envíe, mayor será la carga de transferencia de datos que se realice.

En otras palabras, hosting y transferencia de datos se encuentran íntimamente relacionados: el hosting brinda asilo al sitio web, este asilo posee una cantidad de capacidad de transferencia, y esta capacidad de transferencia sencillamente es la cuantía de información que dicho servidor de web

hosting recibe o envía, transferencia que se puede medir tanto en Mega Bytes como en Giga Bytes teniendo en cuenta un tiempo de un mes desde que comenzó el servicio.

HOSTINGYTRANSFERENCIAD E D AT O S

Page 8: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

8

En cada momento que un visitante ingresa a un sitio web, toda los contenidos que posee el sitio se transportan desde el servidor de web hosting hasta la computadora del usuario. Es necesario aclarar que, si nuestra página web es liviana, esto quiere decir, si no contiene más que archivos de textos y alguna que otra imagen, y si no posee gran número de concurrencia, el trafico web será mínimo, por lo que no será un elemento problemático, lo que podría bastar con una monto de transferencia mensual de 1 a 3 Giga Bytes.

Ahora bien, si nuestro sitio web está plagado de videos, animaciones, imágenes, música, y demás contenidos multimedia, el monto del trafico mensual crecerá enormemente, y mucho más si se trata de una página web cuyo número de visitantes es notable. En este caso, precisaremos de un servicio de hospedaje que

asegure un nivel más alto de transferencia de contenidos por mes para asegurar el correcto funcionamiento de la página.

HOSTINGYTRÁFICOENLAWEB

Page 9: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

9

Este elemento trata de la cantidad de correos que se envían por mes: en este sentido, por más que el sitio web no sea visitado por muchos usuarios, pero si existen 500 empleados que mantienen un uso extendido del servicio de correo para asuntos comunicativos, puede que la cantidad del monto de transferencia de contenidos aumente de manera considerable, casi en los 100 Giga Bytes de transferencia por mes, lo que llevaría a aconsejar contratar un servicio de hosting y transferencia ilimitada.

HOSTINGYT R Á F I C ODECORREOS

Page 10: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

10

Es necesario aclarar que, cuando se habla de hosting y transferencia de datos, es importante tener en cuenta la cantidad de visitas que piensa recibir el sitio web. Si bien puede que el sitio web que poseemos sea rápido, eso no implica que si el número de visitantes es enorme, funcione de manera correcta. En otras palabras, si los visitantes ingresan de manera masiva a nuestro sitio, y se ponen a descargar contenidos en el mismo momento, puede que el sitio colapse, y que la transferencia de información llegue a su cima.

Es recomendable entonces que, si el número de visitantes que posee la página llega a la cifra de 2.500, se contrate un servicio de web hosting y transferencia ilimitada.

HOSTINGYNÚMERODEVISITAS

Page 11: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

11

Es un sistema administrativo relacional de bases de datos (RDBMS por sus siglas en ingles Relational Database Management System). Este tipo de bases de datos puede ejecutar desde acciones tan básicas, como insertar y borrar registros, actualizar información o hacer consultas simples, hasta realizar tareas tan complejas como la aplicación lo requiera.

MySQL es un servidor multi-usuarios muy rápido y robusto de ejecución de instrucciones en paralelo, es decir, que múltiples usuarios distribuidos a lo largo de una red local o Internet podrán ejecutar distintas tareas sobre las bases de datos localizadas en un mismo servidor.

Utiliza el lenguaje SQL (Structured Query Language) que es el estándar de consulta a bases de datos a nivel mundial.

MySQL

Page 12: Cheeta Graphics (PDF interactivo)

$ HOSTING

PlanetaHosting.cl500 Mb de espacio total / 10 cuentas Email / CPanel Español - Web-mail MySQL / 10 GB Transferencia mensual

Hosting.cl300 Mb espacio total / 10 cuentas Email / Transferencia Ilimitada CPanel Español / Activación inmediata

Powerhost.cl300 Mb espacio total / 10 cuentas Email/ Backup diario automático / 12 GB Transferencia mensual / 6 Bases de datos MySQL / CPanel Español / Soporte WAP

Hostingcenter.cl1 GB espacio total / 25 cuentas Email / Transferencia Ilimitada / CPanel Webmail en español / Discos Duros en Raid / PHP 5 – MySQL 5 SWF - HTML

15.300

17.900

29.900

16.900

22.900Hostingcl.cl200 Mb de espacio total / 15 cuentas Email / CPanel EspañolActivación Inmediata / HTML - Flash – PHP MySQL / Webmail

Servidores en Chile Data Center propio

COTIZACIÓN

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

12

Escogimos Hostingcenter, que a pesar de no ser el de menor costo, es el que cubre mejor nuestras necesidades de espacio y transferencia de datos.

Page 13: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

13

Es un nombre o dirección única dentro de internet, que se registra con un nombre desde que se adquiere o se compra, no hay otro igual y por la que cualquier persona con acceso a internet puede acceder a un determinado sitio web, en nuestro caso es www.cheeta.cl. Los dominios se categorizan en:

Dominios Genéricos.

Dominios Territoriales.

Los dominios de reciente incorporación.

DOMINIO

Page 14: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

14

Los dominios genéricos son conocidos como dominios internacionales o globales. Cualquier empresa que realice negocios a través de Internet o que tenga intención de hacerlo debe registrarse en uno de estos dominios dada la popularidad que han adquirido.

Tienen tres letras, y los más conocidos son los dominios .com los cuales inicialmente fueron previsto para empresas comerciales, .org originalmente previsto para organizaciones y .net fue previsto para empresas relacionadas con la Internet.

El dominio más popular es .com que en la actualidad cuenta ya con más de 2.000.000 de dominios registrados.

DOMINIOSGENÉRICOS

Page 15: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

15

Los dominios patrocinados reciben el apoyo de organismos privados, mientras que los segundos, por ser considerados de interés público, son mantenidos y regulados directamente por el ICANN (Corporación de Internet para la Asignación de Nombres y Números) y las entidades internacionales.

Patrocinados No Patrocinados

Page 16: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

16

Un dominio territorial es un nombre de dominio con una extensión asociada a un país. Estos son utilizados por las organizaciones y empresas que desean establecerse en Internet o que quieren proteger la identidad de su marca o su nombre comercial en un país concreto.

Un dominio comprende dos o más componentes separados por puntos. La mejor manera de comprender su estructura es leer el dominio de derecha a izquierda. El primer componente mirando desde la derecha distingue un dominio genérico o territorial.

Actualmente existen más de 200 dominios territoriales.

DOMINIOSTERRITORIALES

Page 17: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

17

El uso del dominio .cl es para lograr que los usuarios se sientan cómodos y seguros en el sitio. Si por ejemplo tenemos un dominio .arg y nuestro contenido es para usuarios chilenos, lo estamos haciendo mal porque la terminación .arg indica que el sitio está en Argentina y nuestro usuario chileno podría pensar que la información es poco relevante en Chile y no tomada en cuenta, por lo cual el sitio fracasaría al promover los servicios que la imprenta ofrece.

DOMINIOSTERRITORIALES

Page 18: Cheeta Graphics (PDF interactivo)

PASO 1

nic.cl

nombre de dominio

RUTTITULAR

sitio para registrar nuestro nombre para la web.

ir al sitio Escribir

Correspon-diente a los responsables del dominio.

Como el dominio cheeta.cl no

existía, no hubo problemas para

seguir con el registro

Dirección de mail

ingresar

y

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

18

REGISTRODEUNDOMINIO

Si queremos tener nuestra página propia,

podemos optar por varias opciones. Entre

ellas comprar un espacio en un hosting,

obtener uno gratuito, o si queremos

hacer un blog, hacer uno gratuito en

WordPress, Blogspot Blogger o alguna

otra parecida. En este caso, mostraremos

a grandes rasgos, los pasos necesarios

para adquirir un espacio web (hosting)

y comprar un dominio (en nic.cl) Primero

hay que comprar el dominio para

asegurarse que nadie se va a apropiar de

nuestro nombre antes que nosotros. Hay

que buscar un servicio de hosting que

cubra nuestras necesidades de espacio y

sobre todo de precio.

Page 19: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

19

PASO 2

PASO 4

Debemos agregar

Dirección Comuna Ciudad Teléfono Giro

Vemos la información ingresada en el paso 1.

PASO 3

Se confirman los datos del contac-to administrativo. En este caso, los mismos del paso 2.

Contacto Técnico

ingresar datos

PASO 5

Aquí vamos a la página del hosting para empezar a unir el hosting con el dominio.

Tenemos 3 opciones

Que el proveedor de hos-ting registre el nombre

Optar por autoadministrarlo

Usar un subdominio gratis. Escogemos esta opción

Es la persona responsable de la operación técnica del dominio. Dejamos los datos igual que en la pantalla anterior.

Page 20: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

20

Datos DNS

FTPCPanel

Se coordina el pago con el con-tacto del hosting (que se hizo a través de transfe-rencia electrónica)

se recibe del hosting un del mail con:

para conectar al

y link temporal al

El dato de los DNS el más importante para terminar este proceso de registro

El Domain Name System, o Sistema de Nombres de Dominio, es una base de datos distribuida, con información que se usa para traducir los nombres de dominio, fáciles de recordar y usar por las per-sonas, en números de protocolo de Internet (IP) que es la forma en la que las máquinas pueden encon-trarse en Internet

El servicio de DNS es indispensable para que un nombre de dominio pueda ser encontrado en Inter-net.

File Transfer Protocol o Protocolo de transferen-cia de ficheros es un software cliente/servidor que permite a usuarios transferir ficheros entre ordenadores en una red TCP/IP.

El funcionamiento es sencillo. Una persona desde su ordenador invoca un programa cliente FTP para conectar con otro ordenador, que a su vez tiene instalado el programa servidor FTP. Una vez esta-blecida la conexión y debidamente autenticado el usuario con su contraseña, se pueden empezar a intercambiar archivos de todo tipo.

Teniendo estos datos, hay que volver a la página de Nic.

Page 21: Cheeta Graphics (PDF interactivo)

C A P I T U L O I - C O N C E P T O S B Á S I C O S D E M E D I O S

21

PASO 7

Nombre de quién va a llegar

el cobro

Ingresé los nombres de los servidores DNS y sus respec-tivas IP.

se ingresan los

Luego

Se confirman

Es decirDatos de facturación

Que llegue el papel a la

dirección indi-cada.

aceptación

de laEmisión de la

factura

por medio

PASO 8

PASO 9webpay Servipag Paypal

Datos ingresados

Aceptación de

declaraciónFinalmente

Pagar Dominio

Electrónico

Formas de pago

Obtendrá un cupón de pago en formato PDF lista para imprimir, que puede ser pagada en cualquier sucursal de Servi-pag. El sistema considera un plazo de 2 días hábiles para registrar el pago en NIC Chile.

Permite pagar en línea con una tarjeta de crédito y usando el sistema seguro de Transbank. Este sistema permite un registro inmediato del pago en NIC Chile, y produce la activación del dominio al día siguiente.

PASO

Page 22: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

22

Presentamos aquí las distintas etapas que forman parte de la creación y puesta en marcha de un sitio WEB. Si bien se establecen en forma cronológica como sucesión de actividades, el acto de la creación y puesta en marcha de esta página web no es lineal. Como en la ejecución de cualquier proyecto, muchas etapas se desarrollan en paralelo y en algunas instancias volver atrás.

A diferencia de otros proyectos de diseño, un sitio web no se concluye, registra y distribuye, muy por el contrario permanece en un lugar lógico, mostrando información, creciendo, actualizándose manteniendo un feedback con los usuarios y en una constante evolución acorde a los tiempos y soportes tecnológicos que pueda abordar. Es casi un ser vivo, nunca

se culmina y esta característica incide en el proceso de creación.

Para desarrollar el sitio web que nuestro cliente requiere es imprescindible cumplir con las etapas y requisitos necesarios para una construcción digital eficiente.

RECONOCIMIENTO DE ETAPAS DE DESARROLLO ORIENTADAS A UN SITIO WEB

Page 23: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

23

Lo primero que debemos hacer como equipo es organizarnos. El trabajo en equipo requiere una gran organización para designar de manera justa los cargos de construcción, evaluación y mantenimiento del sitio.

El equipo debe contar con integrantes de diferentes áreas y ser capaces de entregar a los usuarios de esta web las experiencias que el cliente quiere expresar. Como equipo debemos estar en contacto constante con nuestro cliente para estar al tanto de los avances y poder efectuar los cambios que se requieran de manera clara y eficaz.

Es muy importante que el equipo tenga un líder (que puede en un futuro ser el webmaster o no) porque formar un equipo de trabajo web requiere un gran compromiso personal e institucional. Los equipos web no construyen de un día a otro, ni de acuerdo a una decisión administrativa o mandato, requieren un proceso de consolidación, que pasa por tiempos de búsqueda, acuerdos y adecuación.

PLANIFICACIÓN

Page 24: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

24

Luego de que estén designados los cargos y cada integrante sepa bien lo que debe desarrollar, es necesario tener una reunión con el cliente y recopilar toda la información necesaria. Además como equipo de diseño debemos buscar y analizar toda la información técnica para llevar a cabo el sitio web.

La información es tanto teórica y técnica, como la búsqueda de bibliografías, normativas y el análisis de sitios referenciales o pares para poder ser emulados.

Otra cosa muy importante a tener en cuenta y que se debe priorizar a la hora de reunir información es los tipos de tecnologías y funciones adecuadas para una navegación clara.

R E U N I R INFORMACIÓN

Page 25: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

25

Como equipo de diseño debemos definir la misión del sitio y poder discutirla para perfeccionarla. Es importante que organicemos esto con tiempo para poder formular en un futuro, mientras avanzamos el proyecto, ideas como: “se presentara”... “que contenderá” ... “se priorizará”... “se omitira”, entre otras.

Una forma de poder organizar y discutir estos temas, es como equipo formular todo por escrito y así poder llegar a un resultado óptimo. Además de aclarar todo con el cliente y poder expresar en este sitio web la misión y visión de la imprenta hacia sus futuros visitantes.

MISIÓNYOBjETIVOS DELAWEB

Page 26: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

26

En este punto debemos definir y estudiar muy bien a todos los que navegaran en esta web, para esto corresponde buscar, identificar y conocer a estos potenciales usuarios.

Todo esto es necesario ya que la página web está basada en la utilidad e intereses de los usuarios, es importante poder conocer a nuestra primera audiencia destinada y así poder contabilizar y estudiar a la audiencia posible.

Se debe presentar información útil a los intereses de la audiencia a la que se dirige y declarar sus objetivos desde un comienzo dejando claro que es lo que la página se propone a aportar, para poder ser más eficaz y tomando siempre en cuenta los distintos intereses que pueden llevar a un usuario a visitar el sitio web que estamos desarrollando.

TIPOS DE USUARIO

Page 27: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B

27

Una parte vital y que como equipo se debe priorizar, es establecer un orden u organización para poder realizar el encargo solicitado por nuestro cliente. Esta forma de organización facilita y guía todas las acciones, estructura de información, selección de contenidos, elaboración y construcción del sitio web. De este modo el equipo tendrá contabilizados y estructurados los horarios y etapas del proyecto.

PLANES DE T R A B A j O

Page 28: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

28

PERFILDEUSUARIO

DISTRIBUCIÓN DEMOGRÁFICA DE USUARIOS DE INTERNET POR EDADLa distribución demográfica se relaciona altamente con los niveles de penetración de Internet y la madurez relativa del mercado de Internet: los usuarios jóvenes son tradicionalmente usuarios de adopción temprana.

26%26% 21% 15% 12%

15-24

AÑOS

25-34 35-44 45-54 55+

PENETRACIÓN DE INTERNET

Page 29: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

29

PERFILDEUSUARIOUSUARIOS SEGÚN NIVEL DE ESCOLARIDADEl sitio se relaciona altamente con el nivel de escolaridad y la madurez relativa del mercado de Internet: los usuarios jóvenes universitarios o técnico - profesionales son tradicionalmente los solicitantes del servicio del cliente.

19%

17%

17%

8%

3%

20%

16%

Page 30: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

30

PERFILDEUSUARIOUSUARIOS SEGÚN GSEEl gráfico muestra el acceso a internet que poseen las distintas clases sociales en la comuna de Maipú, lugar en el cual se encuentra la imprenta, dónde podemos observar que nuestro posible usuario tiene un alto acceso a la internet, por lo cual podrá llegar sin problemas a la información del sitio.

G S E

Page 31: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

31

MAIPÚW I - F ILa red implementada en Maipú corresponde a desarrollos de ingenieros y técnicos chilenos, a partir de tecnología Wi- Fi y equipamiento de la empresa Ruckus Wireless, de Silicon Valley, California, EEUU.

Dicha red consta actualmente de 241 nodos o antenas separadas por alrededor de 500 metros unas de otras. En conjunto, tejen una red inalámbrica que permite dar cobertura a toda la comuna de Maipú.

Esto permite que el usuario pueda navegar a través de dispositivos móviles, y de acuerdo a esto debemos tener en cuenta que aplicaciones son los que usaremos al momento de construir nuestro sitio, ya que en esos dispositivos no se es posible visualizar todo al igual que en un computador.

TM

Page 32: Cheeta Graphics (PDF interactivo)

Google Sites95.5%

Facebook.com87.4%

Microsoft Sites85.3%

Terra -Telefonica57.9%

Wikimedia Foundation Sites

45.2%

Empresa el Mercurio S.A.P.

40.6%

Grupo La Tercera

30.6%

Taringa.net30.6%

WordPress29.2%

MercadoLibre28.9%

Megaupload23.3%

RapidShare19.2%

VEVO19.1%

Musica.com18.0%

BancoEstado15.5%

Uc.cl14.6%

% Alcance

SITIOS MÁS VISITADOS

32

Page 33: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

33

USODEREDESS O C I A L E S

Facebook es la red social más popular, con un 85% del total de la audiencia. Muchos sitios que se categorizan así mismos como Redes Sociales pueden en realidad operar paralelamente a sitios como Facebook ofreciendo funcionalidades extendidas. Estos datos nos beneficia, ya que nuestro cliente cuenta con su propio espacio en Facebook relacionado con su negocio, para poder tener un contacto directo con sus propios clientes.

Maipú tiene un gran alcance de Redes Sociales, con un crecimiento significativo durante el año pasado. En el gráfico se puede ver el porcentaje de uso de cada red social en la comuna.

Las redes sociales ofrecen una importante vía a los usuarios de la comuna, para estar en contacto frecuente con amigos y familia, por lo tanto creemos que usando las redes sociales podemos difundir los servicios de Cheeta y permitir que sea mucho más fácil acceder a la página web.

Re d e s sociales

% alcance

Page 34: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

34

USODEREDESS O C I A L E SLa utilidad de Facebook radica en que la empresa puede crear su página con información sobre actividades, eventos, noticias de su sector y comentarios sobre sus productos; es un lugar donde entablar relación con potenciales clientes más allá de lo meramente comercial, desde ese lugar puede enviar tráfico hacia su web oficial. El contenido a ofrecer debe ser de interés, cuando a la gente le gusta (o no) un producto, escribe sobre ello en los foros y lo comenta en sus comunidades virtuales. De esa manera el cliente forma parte activa de la campaña del servicio.

Para poder ofrecer una visión más clara, debemos considerar que Facebook no es una página web, sino que se trata de un perfil público de la información que queremos ofrecer sobre un producto u organización, de las que otros usuarios pueden hacerse fans

y mantenerse al día de su actividad. Es por esto que una red social no puede plantearse como su sitio web principal sino como un complemento de la comunidad que genera su marca; su empresa debe tener un sitio web corporativo que ofrezca sus productos de forma muy clara y cumpliendo con sus objetivos comerciales más importantes.

Page 35: Cheeta Graphics (PDF interactivo)

C A P I T U L O I I I - D E F I N I C I Ó N D E L T E M A

35

USODEREDESS O C I A L E SMayormente se utilizan las cuentas de Twitter para informar sobre las actividades y novedades de la empresa, anunciar eventos, promociones y ofertas, conocer la competencia y compartir información que se considere interesante para los contactos, generando un feedback entre la empresa y el medio que resulta siempre beneficioso para los negocios.

Dependiendo del objetivo y de las características de nuestra compañía o producto, se define el perfil de la cuenta, que podrá estar orientada a marketing y ventas, comunicación con clientes, contacto con colegas y competidores o como una fuente muy valiosa de información para evaluar la repercusión de nuestras campañas e imagen en un público determinado. En este sentido, una aplicación para destacar es el “Twitter Search”, con la cual se rastrean las menciones que se hayan hecho a nuestra empresa,

permitiéndonos conocer directamente la opinión que se tiene sobre la misma.

Lo principal para obtener el mejor provecho, es captar público o seguidores, por medio de mensajes originales y que resulten de utilidad. Es importante mantener un contacto fluido con ellos respondiendo siempre que nos escriban de un modo distendido y personal.

Page 36: Cheeta Graphics (PDF interactivo)

OBJETIVOS DEL PROYECTO

Estrategias

Cartas de ventas

Precio Construcción sitio web

Rentabilidad

Comunidad sobre Servicio

Fidelizar visitantes

Vinculos unióna la

web

Usuario identi�cado

Plantea-mientos

ContenidosSlogans

Medio comunica-ción perió-

dica

Crear Senti-miento de

pertenencia

Ofrecer contenidos gratuitos o descuentos

Servicio calidad

Hacer negocios

Ganar Dinero

Atraer Clientes

Servicio de imprentaCalidadE�cacia

Solución de problemas

tener clara

Objetivos principales

dos principales armas

¿Qué se ofrece?

principales

incluyen

Alcanzar éxito

Creación

que consigan

con

36

Page 37: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

37

RECOPILACIÓN DE ANTECEDENTES

Cheeta es un proyecto de personas jóvenes con pasión al diseño, con ganas de emprender y desarrollar nuevos conocimientos en lo que respecta a esta área, impresión de proyectos de diseño, trabajos para la universidad y creación de diseños de todo tipo, ya sea tarjetas de presentación y afiches publicitarios.

Apuestan a la diferencia, al valor agregado, a la seriedad y formalidad, y por sobre todo al trabajo profesional. Creemos en el buen desarrollo de este proyecto o de cualquier otro que nos propongamos, y que con creatividad y dedicación dará grandes frutos en el futuro.

Page 38: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

38

DESCRIPCIÓN DE LA EMPRESAEl proyecto, Cheeta Graphics nace como una manera de buscar una pronta, interesante y enriquecedora inserción en el mundo de la pequeña y mediana empresa, pero a la vez abarcando el área de diseño, en la que se posee conocimiento y por sobre todo pasión.

Cheeta se encarga de la impresión en láser, en formato carta y tabloide con diferentes materiales que pueden ayudar al estudiante para que su proyecto quede bien impreso y con una excelente presentación.

Page 39: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

39

VISIÓN

Con este proyecto, se pretende desarrollar y/o potenciar las habilidades, además de fortalecer conocimientos tanto en el diseño, como en el uso de maquinaria, materiales, y por supuesto interacción con el cliente.

Page 40: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

40

ANÁLISISDEMERCADOSi bien el desarrollo de la imprenta no es una idea nueva, se necesita un lugar en Maipú que pueda imprimir las 24 horas para los estudiantes, que sea de bajo costo y quede cerca de sus casas, ya que la mayoría de las imprentas que existen en la comuna no atienden todo el día y esto perjudica a los estudiantes que quieren que su proyecto se imprima de mejor manera y a cualquier hora.

En la comuna existen varios lugares de impresión, entre ellos:

Printing now > Ubicado en el mal Plaza Oeste, al frente de Duoc. Ofrece servicios de impresión digital, fotocopias e internet.

Ctrl+P > Ubicado en Plaza Maipú, ofrece servicios de impresión de planos, digital.

Page 41: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

41

MÉTODOSDEPROMOCIÓNEntregar flyers, volantes o folletos en las afueras de universidades.

Sitio web, Redes sociales: facebook, twitter, needish, flickr.

DETALLES DE ENTREGA

- Se entrega la impresión en una bolsa de plástico para que no se pueda ensuciar.

Page 42: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

42

MÉTODOS DE PROMOCIÓN:FLYERLos flyers, denominados también, “Volantes” son folletos de pequeñas dimensiones y gramajes reducidos y que se utilizan para transmitir información publicitaria sobre productos y servicios de una empresa.

Según la dimensión y plegado del flyer, puede clasificarse en:

- Volante: Contiene una sola hoja y dos caras- Díptico: Compuesto por una hoja, un plisado y 4 caras- Tríptico: Compuesto por una hoja, dos plisados y 6 carasEventualmente una hoja podría plisarse más veces.

Los flyers, se encuentran dentro de la categoría de folletos, y son pequeños panfletos de reducido tamaño. Son también los que normalmente se reparten en grandes cantidades, a los clientes o consumidores que circulan a pie.

La medida del flyer que mas se usa es de 21.5 x 14 cms (media carta).Esta es la que se usará para la promoción de la imprenta a través de flyer, formato volante, con impresión en una sola cara.

Page 43: Cheeta Graphics (PDF interactivo)

C A P I T U L O I V - R E C O P I L A C I Ó N D E A N T E C E D E N T E S

43

BOND 90 250 450 123

COUCHE 135 250 450 123

COUCHE 170 260 460 123

COUCHE 300 300 500 123

OPALINA 225 280 480 123

ADHESIVO 80 400 600 123

GRS $ CARTA $ TABLOIDE

$ BANNER30x150

DISEÑO DE TARjETA DE PRESENTACIÓN, DEPENDIENDO DEL DISEÑO Y FORMA

PRECIOS: REFERENCIA DE MEDIDAS Y VALORES

Page 44: Cheeta Graphics (PDF interactivo)

C A P I T U L O V - D E F I N I C I Ó N D E V I A B I L I D A D Y C O N T E N I D O S

44

Para la creación de la página web es necesario realizar una investigación en la comuna de Maipú y cerrillos cuantas personas y estudiantes de institutos y universidades que estudian una carrera tienen la necesidad de

imprimir trabajos de calidad y también que tengan internet, que es lo más importante en este caso. Se hizo una investigación y se calculó que 1 universidad y 2 institutos, cuentan con carreras de diseño.

DEFINICIÓN DE VIABILIDAD Y CONTENIDOS

UDLA INACAP

Diseño de vestuario

Diseño Gráfico

Diseño Gráfico

DUOC UC

DiseñoIndustrial

Diseño Gráfico

Page 45: Cheeta Graphics (PDF interactivo)

C A P I T U L O V - D E F I N I C I Ó N D E V I A B I L I D A D Y C O N T E N I D O S

45

La mayoría de las personas en Maipú cuentan con internet y lo ocupan regularmente, es por eso que es necesario crear un sitio web que permita dar información de la imprenta, el lugar en donde se encuentra, el portafolio realizado y

contacto en caso de alguna consulta por mail o por teléfono. Como la mayoría de las personas que imprimen son estudiantes, es necesario crear una página interactiva y con diseño que llamen la atención al público objetivo.

Quienes somos

ServiciosConvenios

Portafolio

CHEETA

Contacto

DEFINICIÓN DE VIABILIDAD Y CONTENIDOS

Page 46: Cheeta Graphics (PDF interactivo)

C A P I T U L O V - D E F I N I C I Ó N D E V I A B I L I D A D Y C O N T E N I D O S

46

DEFINICIÓN DE VIABILIDAD Y CONTENIDOSHoy en día toda empresa de cualquier tamaño necesita tener una presencia en internet para dar una buena imagen de prosperidad y futuro.

El tener pagina web aumenta en gran medida el conocimiento de su empresa o negocio, dándose a conocer por un inmenso número de empresas y personas (futuros clientes) no sólo locales, sino nacionales o incluso de todo el mundo.

Mediante las búsquedas que hacen los clientes en los buscadores de internet informándose de productos y servicios que necesitan, aparecen como resultados las páginas web de las empresas que ofrecen esos productos y servicios. Es decir, su empresa se da a conocer a otras personas y empresas que posiblemente se conviertan en nuevos clientes gracias a aparecer en un buscador de internet.

CHEETA

Nacional Internacional

Se da a conocer

Nuevos Clientes

Page 47: Cheeta Graphics (PDF interactivo)

C A P I T U L O V - D E F I N I C I Ó N D E V I A B I L I D A D Y C O N T E N I D O S

47

Una página web ayuda mucho como un canal de comunicación adicional para informar sobre los productos y servicios que más interesa promocionar para aumentar la rentabilidad.

Una de las mejores formas de promocionar productos es por medio de un sitio web que tenga rankings elevados en los motores de búsqueda. Sin embargo, con tu propio dominio y tu propio sitio web, publicando contenido único y consiguiendo enlaces externos estarás encaminado a conseguir tráfico gratuito de los motores de búsqueda.

DEFINICIÓN DE VIABILIDAD Y CONTENIDOS

Page 48: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I - D E T E R M I N A C I Ó N D E C R O N O G R A M A S Y P R E S U P U E S T O S .

48

Días

Días

Días

Días

CRONOGRAMA

El siguiente cronograma indica las horas de trabajo de cada integrante del equipo de diseño durante el mes de Septiembre.

Los días parten del 9 ya que ese fue el día que se comenzó a trabajar en el proyecto del sitio web, además están señalizados los días en rojo que fueron feriados. Las horas de trabajo fueron contabilizadas sumando en diferentes horas el día la cantidad total de horas en el encargo.

Page 49: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I - D E T E R M I N A C I Ó N D E C R O N O G R A M A S Y P R E S U P U E S T O S .

49

Reunion de información y conversaciones con el cliente

Diseño y grá�cas Impresión

Revisiones y correciones

Diagramación del informe

Busqueda de información

CRONOGRAMA En este cronograma se puede apreciar el proceso de diseño durante las semanas que se trabajó en el proyecto. Los puntos graficados son los más importantes del desarrollo del encargo.

Page 50: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I - D E T E R M I N A C I Ó N D E C R O N O G R A M A S Y P R E S U P U E S T O S .

50

Costo de hosting: Hostingcenter.cl : $22.900

Costo de dominio:Tarifa de creación por 2 años _ $18.900 valor de la creación {19% iva incluido}

Tarifa de renovación por 2 años $18.900 valor de renovación (19% iva incluido} costo por año : $9.450

Licencia programas adobe:CS5 Adobe Design Premium 5.5 Windows $149.900 Contenido: Photoshop CS5 Extended Illustrator CS5 InDesign CS5.5 Dreamweaver CS5.5 Flash Professional CS5.5

Flash Catalyst CS5.5 Fireworks CS5 Acrobat X Pro Bridge CS5 Device Central CS5.5 Media Encoder CS5.5

Flayers:Flyer: 6.5x9.5 , 500 flyer =31 pesos cada uno,=15500Afiches: tamaño tabloide, 30 afiches, 500 pesos cada uno=15000

PRESUPUESTOS

Page 51: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

51

CONTROL DEVARIABLE DES O P O RT E S

Es importante que nuestro sitio se vea de forma atractiva y agradable, para que nuestro público se sienta cómodo y puedan encontrar lo que ellos quieran.

Existen varios tipo de utilidades que podemos incorporar en la pagina, pero debemos tomar en cuenta que información contendrá el sitio, y así optar por lo más adecuado.

El menú desplegable es un elemento en que dispone varios niveles, que se despliegan mediante el usuario pasa el puntero del ratón por encima de cada elemen-to. Pueden ser horizontales o verticales, pero existe el riesgo de que en algunos navegadores no dispongan del su�ciente soporte de CSS.

Home Portafolio

Donde

Mapa{

-6.0

Page 52: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

52

Close

La galería de imagenes (Lightbox) nos permite mostrar los productos y servicios de la empresa. Estas imáge-nes se muentran en una serie de miniaturas que se amplían al pinchar sobre cada imagen. El uso JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario. Es una técnica muy sencilla de utilizar, funciona correcta-mente en todos los navegadores y permite mantener la semántica del documento (no ensucia la página con código JavaScript).

Page 53: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

53

@

Los formularios nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro sitio. Los formularios están compuestos por campos de texto y botones.

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento.

Page 54: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

54

Las galerías Jquery añaden muchas otras nuevas ideas para crear una librería espectacular: muy pequeña, rápida, ligera y con cientos de utilidades. Las aplicaciones web cada vez son más complejas, ya que incorporan nuevos efectos visuales e interacciones dinámicas.

Al mismo tiempo, el desarrollo de las aplicaciones web avanzadas es cada vez más complicado, ya que deben funcionar correctamente en al menos 5 navegadores diferentes (Internet Explorer, Firefox, Chrome, Opera y Safari) y el tiempo de desarrollo se reduce por la necesidad continua de incluir novedades en la aplicación.

Por todo ello, es imprescindible utilizar librerías JavaScript que simplifiquen el desarrollo y permitan crear aplicaciones compatibles con todos los navegadores, razón por la cual hemos seleccionado a Jquery para poder compatibilizar el encargo del sitio web y tenga las condiciones optimas de funcionalidad al ser compatible y editable gracias a las opciones de CSS.

<script type = “text/javascript”>

< >

Page 55: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

55

Photoshop es una aplicación para la creación, edición y retoque de imágenes. Éste nos permite la combinación de sus herramientas y filtros, lo cual puede dar lugar a un sinfín de creaciones artísticas y publicitarias. El mejor programa para trabajar con gráficos, en nuestro caso podemos retocar los afiches, fotos de productos y mejorar la estética de la pagina.

El formato de imagen que nos permite una mejor calidad será JPG. Es un formato de compresión de imágenes, tanto en color como en escala de grises, con una variedad de gama y calidad de exportación.

Se considera que el formato jpg es mejor para fotografía digital mientras que los formatos .gif y .png son mejor para imágenes gráficas.

Para nuestro proyecto web y pensando en los requerimientos del cliente la mayoría de los exploradores actuales soportan este formato.

Page 56: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

56

Slider en un rotador de imágenes, en ella se muestran diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo. Además de tener distin-tas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los botones anterior y siguiente. Con HTML, CSS y JQuery podemos crear una forma de ver nuestras imágenes de forma sencilla y e�caz.

Page 57: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

57

Es un lenguaje interpretado, usado para la creación de aplicaciones para servidores, o creación de contenido dinámico para sitios web. Va encapsulado dentro de los documentos html, de forma que se puedan introducir instrucciones php dentro de las páginas.

Lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Protocolo de red para la transferencia de archivos entre sistemas conectados a un red TCP (Protocolo de Control de Transmi-sión), basado en la arquitectura cliente-servidor.

Se utiliza para dar estilo a documentos html, separando el contenido de la presentación. Los estilos de�nen la forma de mostrar los elementos. Permite controlar el estilo y el formato de múltiples páginas web al mismo tiempo.

Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de <etiquetas>, rodeada de corchetes angulares (<,>).

Page 58: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E

58

Hay una gran cantidad de sitios que nos ofrecen el poder realizar diagramas y wireframes, el que nosotros utilizamos fue Cacoo.

Las opciones que nos brinda van desde los clásicos UML, Diagramas de Red, bosquejos de sitios web, entre otros. Pero acá eso no es lo interesante, ya que el plus de esta herramienta es la colaboración en equipo en tiempo real. Cacoo permite crear los diagramas entre varios usuarios, y todo al instante.

Es de fácil uso y es completamente gratis.

CACOO

Page 59: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

59

CONTENIDOS D E L S I T I O

Una vez que se han identificado los objetivos del sitio, se debe proceder a hacer las definiciones más concretas que permitan decidir qué contenidos son los que va a tener el Sitio Web que se desarrolle.

Hay que partir por las normas como se presenta en la gráfica, teniendo en cuenta cuales podrían ser las necesidades que podría tener el usuario.

Esto debe ir para dar a conocer la identidad de la empresa, para saber cuales son exactamente los servicios que ofrecen.

Lo que debe llevar un sitio web

¿Quiénes son? ¿Qué hacen?

NORMAS

Productos o Servicios

Servicio de impresión

Cheeta

Novedades de empresa

Acerca de la institución

Cheeta es un proyecto realizado por personas jóvenes con pasión al diseño, con ganas de emprender y desarrollar nuevos conocimientos en lo que respecta a esta área, impresión de proyectos de diseño, trabajos para la universidad y creación de diseños de todo tipo, ya sea tarjetas de presenta-ción y a�ches publicitarios.

Cheeta se encarga de la impresión en láser, en formato carta y tabloide condiferentes materiales que pueden ayudar al estudiante para que su proyecto quede bien impreso y presentado.

Page 60: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

60

CONTENIDOS D E L S I T I O

CHEETA

¿QUIÉNES SOMOS?

SERVICIO

EMPRESA ESTUDIANTES

CONVENIO CONTACTO PORTAFOLIO

El nombre hace alución a la rapidez del trabajo, haciendo referencia al animal del mismo nombre

Es importante presentar a la empresa y darle a conocer al usuario quiénes son las persona detrás del servicio.

Informar el tipo de servicio que ofrece la empresa es importante para que el usuario sepa a que se enfrenta y no pierda el tiempo si busca otra cosa.

Mostrar trabajos impresos anteriormente es una manera de dar a conocer la calidad del servicio.

Es necesario tener un medio de contacto para aclarar dudas o aceptar sugerencias de los clientes de acuerdo al funcio-namiento del sitio o del servicio Crear un espacio donde los

usuarios puedan informar lo que desean hacer, en caso de ser proyectos grandes y la imprenta puede ofrecer las soluciones que a ellos les parezcan adecuadas de acuer-do a los precios.

Page 61: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

61

USUARIOS D E L S I T I OViendo la lista mínima de contenidos presentada anteriormente, nos damos cuenta que crecerá en la medida de las necesidades de entrega de información de la institución, hay que hacer énfasis en que el interés de los contenidos variará si se trata de un usuario interno o externo.

Un Sitio Web desde el punto de vista del usuario externo de la institución, lo que más le interesará será la información referida a los trámites, seguida por la que informe acerca de cómo tomar contacto con la institución.

Si la miramos desde el punto de vista del usuario interno, lo más importante será la información de Novedades, seguida por la de organigrama y presentación interna.

Por lo mismo, es muy relevante que tanto los objetivos como la audiencia del sitio se hayan definido muy bien en forma previa, porque de lo contrario no habrá posibilidad de atender a ambos usuarios de manera adecuada.

Usuario

Externo

Interno Información de noveda-

des

Información de trámites

Contacto con la empresa

Organigrama

Presentación Interna

Intereses

Seguido

por

Seguidopor

Intereses

Page 62: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

62

TIPOYFUNCIÓN DELAINFORMACIÓN

En Internet se pude obtener información sobre

los más variados temas abarcando desde la

bibliografía de un personaje famoso hasta

aspectos de la Historia del Mundo .

En la gráfica se muestran algunos de los temas

más importantes que se pueden conseguir en

Internet. Se destacó la sección de negocios porque

la imprenta Cheeta, usará el sitio en la web con el

fin de dar a conocer un servicio.

Tipo de información

en la web

Educación Negocios

DeportesEntretención

Buena parte de la información que se maneja en la red está relacionada con los negocios tanto desde el punto de vista del desarrollo y mantenimiento como desde el punto de vista estratégico y organizativo. Nuestra web se basa en este ámbito ya que lo que el sitio se usará básicamente para dar a conocer los servicios y los productos de la imprenta.

Page 63: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

63

INFORMACIÓN PÚBLICAOPRIVADA

La información que se encuentra en el sitio es en su mayoría pública, es decir, que todos los usuarios que entren al sitio pueden ver su contenido e informarse de los servicios que se realizan y los productos que se entregan.

No obstante en la sección de convenios, sólo los interesados y aquellos que manden un correo mediante los formularios establecidos, podrán acceder a información de precios específica, relacionada con los trabajos que quieren imprimir.

PRIVADA

PÚBLICA

Page 64: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

64

CANALESDE COMUNICACIÓN

Como se muestra en el gráfico, son las maneras de como se dará a conocer la existencia de la empresa, su servicio y su sitio web, para aquellos que estén interesados entren en este y se informen en su totalidad de como funciona Cheeta.

Flyers

A�ches

Page 65: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

65

VÍNCULOSENTRELAINFORMACIÓN

La información que se encuentra en el sitio varia según el contenido elegido. La navegación en el sitio es no-lineal, es decir, el usuario tiene completo control de a donde ir y que contenidos ver.

La información en el sitio está distribuida en diferentes formatos para lograr mantener el interés del usuario. Por lo tanto se incluirá texto, imágenes, y videos que se complementan entre si, haciendo amena la visita.

Page 66: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

66

M A P A D ENAVEGACIÓN

Es el tratamiento comunicacional de los contenidos, en otras palabras es la organización de la presentación de la información expresada en un diagrama denominado mapa de navegación.

La importancia de elaborar un mapa de navegación del sitio web radica en la comprensión del orden de presentación de las pantallas con los contenidos y la flexibilidad de moverse entre ellas.

Page 67: Cheeta Graphics (PDF interactivo)

C A P I T U L O V I I I - C O N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M A C I Ó N

67

M A P A D ENAVEGACIÓN

¿QUIÉNES SOMOS?SERVICIO

EMPRESA

EDITORIAL

CORPORATIVO

ESTUDIANTES

CONVENIO

PORTAFOLIO

CONTACTO

Page 68: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

68

WIREFRAME

Un wireframe es una representación esquemática de una página web sin elementos gráficos, que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.

Las ventajas de usar Wireframes son por un lado que el equipo y el cliente se centra en el diseño de contenidos y no en el diseño visual, y por otro lado, definiendo la organización y estructura en etapas previas al diseño y programación se evitan cambios posteriores más costosos, reduciendo así costos y tiempos.

La información que deben contener los wireframes es: Inventario de contenido.

Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, vínculos, títulos, layout.

Notas que nos indiquen el comportamiento de algunos elementos.

En general esta herramienta es parte del proceso de arquitectura de información y permite definir el detalle del contenido de las páginas más relevantes, por ello es aconsejable realizar el wireframe antes de empezar con el diseño y la programación del proyecto web.

Es también una valiosa herramienta para determinar claramente los contenidos a nivel de página, junto con marcar hitos con el cliente respecto al desarrollo del proyecto.

Page 69: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

69

WIREFRAME

Primera propuesta de wireframe, para el index de nuestro sitio.

Page 70: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

70

WIREFRAME

Primera propuesta de wireframe, para la sección de Quienes Somos, del sitio. Con las medidas en píxeles. También se muestra la interacción del usuario con el menú.

Page 71: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

71

WIREFRAME

Primera propuesta de wireframe, para la sección de Portafolio del sitio. Con las medidas en píxeles y mostrando la interacción del usuario con el menú.

Page 72: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

72

WIREFRAME

Segunda propuesta de wireframe, para index del sitio. Con las medidas en píxeles. Cambia el header con el logo.

Page 73: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

73

WIREFRAME

Segunda propuesta de wireframe, para sección quienes somos del sitio. Con las medidas en píxeles. Cambia el header con el logo.

Page 74: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

74

WIREFRAME

Segunda propuesta de wireframe, para portafolio del sitio. Con las medidas en píxeles. Cambia el header con el logo.

Page 75: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

75

WIREFRAME

Tercera propuesta de wireframe, para Index del sitio. Con las medidas en píxeles. En esta propuesta cambia completamente la distribución de los elementos.

Page 76: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

76

WIREFRAME

Tercera propuesta de wireframe, para sección quienes somos del sitio. Con las medidas en píxeles. En esta propuesta cambia completamente la distribución de los elementos.

Page 77: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

77

WIREFRAME

Tercera propuesta de wireframe, para Portafolio del sitio. Con las medidas en píxeles. En esta propuesta cambia completamente la distribución de los elementos.

Page 78: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

78

G R Á F I C AESTÁTICAPrimera propuesta de gráfica estática, para index del sitio. Rechazada por la pobre distribución de los elementos.

Page 79: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

79

G R Á F I C AESTÁTICAPrimera propuesta de gráfica estática, para sección quienes somos del sitio.

Page 80: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

80

G R Á F I C AESTÁTICAPrimera propuesta de gráfica estática, para Portafolio del sitio.

Page 81: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

81

G R Á F I C AESTÁTICASegunda propuesta de gráfica estática, para index del sitio, cambia la parte superior y el fondo.

Page 82: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

82

G R Á F I C AESTÁTICASegunda propuesta de gráfica estática, para sección quienes somos del sitio, cambia la parte superior y el fondo.

Page 83: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

83

G R Á F I C AESTÁTICASegunda propuesta de gráfica estática, para Portafolio el sitio, cambia la parte superior y el fondo.

Page 84: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

84

G R Á F I C AESTÁTICAG R Á F I C AESTÁTICATercera y definitiva propuesta de gráfica estática, para index del sitio, cambia la parte superior, menú y el fondo. Esta propuesta fue aprobada por el cliente.

Page 85: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

85

G R Á F I C AESTÁTICAG R Á F I C AESTÁTICATercera y definitiva propuesta de gráfica estática, para quienes somos del sitio, cambia la parte superior, menú, y colores del fondo. Esta propuesta fue aprobada por el cliente.

Page 86: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

86

G R Á F I C AESTÁTICAG R Á F I C AESTÁTICATercera y definitiva propuesta de gráfica estática, para Portafolio del sitio, cambia la parte superior, menú y el fondo. Esta propuesta fue aprobada por el cliente.

Page 87: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

87

RESOLUCIÓNDEPANTALLA

Hemos establecido las pruebas de usuario en diferentes navegadores y resoluciones de pantalla, las más utilizadas en chile y estandarizadas. Los navegadores que utilizamos para realizar estas pruebas son Chrome, Mozilla e Internet Explorer, como se aprecia en las imágenes.

800x600

1280x768

1024x768

Page 88: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

88

RESOLUCIÓNDEPANTALLA

800x600 1024x768

1280x768

Page 89: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

89

RESOLUCIÓNDEPANTALLA

800x600 1024x768

1280x768

Page 90: Cheeta Graphics (PDF interactivo)

C A P I T U L O I X - C O N T R O L D E D I S E Ñ O

90

EVALUACIÓNDEPROPUESTAS

En este punto del proyecto debemos evaluar y testear la manera en que reciben los clientes la información y cómo se comportan en nuestro sitio web. Lo primero es saber que piensan de la estética y forma de navegación de la página, para esto hemos hecho pruebas en línea para que las personas naveguen y den su opinión al respecto.

Todo esto lo hicimos llegar a personas al azar que fueron consultadas de realizar este testeo en las diferentes sedes educacionales (que imparten carreras relacionadas al diseño), las cuales son nuestro público objetivo, del cual recopilamos mucha información y buenas críticas.

Los resultados de estas pruebas fueron satisfactorios y se planea hacer encuestas cada un tiempo establecido y poder ir evolucionando de acuerdo a los avances y encargos de los usuarios. La información está bien distribuida y es fácil llegar a los contenidos principales e información, está bien definido el espacio para redes sociales y es fácil de ubicar y recordar.

Page 91: Cheeta Graphics (PDF interactivo)

91

CONCLUSIÓN

Podemos concluir con este informe, lo importante de conocer los procesos y conceptos básicos de diseño y estructuración para poder realizar un proyecto de página web.

El poder informarse de manera adecuada y detallada tanto de la empresa, como de los usuarios y posibles clientes, para poder entregar y satisfacer por medio de nuestro diseño de navegación todas las interrogantes de ellos.

Como equipo de diseño entendimos lo importante de aprender y saber los procesos para poder mostrar de la mejor manera, los conceptos que la imprenta Cheeta Graphics desea. La buena organización y planificación permite concretar este objetivo de manera eficiente y clara.

Gracias a este informe logramos aprender cómo trabajar como equipo y organizar mediante cronogramas y juntas, los tiempos y segmentos del proyecto para poder trabajar de manera eficaz y conseguir un buen resultado.

Page 92: Cheeta Graphics (PDF interactivo)

92

BIBLIOGRAFÍACapítulo I:http://www.maestrosdelweb.com/editorial/intera/http://www.internetips.com/articulos/detalle.php?iid=69http://definicion.de/multimedia/http://vectoralia.com/manual/html/la_navegacion.htmlhttp://www.hipertexto.info/documentos/glosario.htm#Mhttp://www.comparahosting.cl/?gclid=CJO5q8vSp6sCFZBb7AodTj165whttp://www.hosting.cl/http://www.hostingcl.cl/plans.phphttp://www.powerhost.cl/hosting-corporativoshttp://www.planetahosting.cl/hosting.phphttp://www.hostingcenter.cl/http://www.contratar.org/que_es_un_dominio.phphttp://www.sinemed.com/recursos/docs/MySQL.pdfhttp://www.nic.cl

Capítulo II:http://www.google.com/url?sa=t&source=web&cd=7&ved=0CGQQFjAG&url=http%3A%2F%2Fdialnet.unirioja.es%2Fservlet%2Ffichero_articulo%3Fcodigo%3D293019%26orden%3D0&rct=j&q=etapas%20sitio%20web&ei=L6t-TtbiCcqgtgfN9IjdCQ&usg=AFQjCNF309ejNW-Hj-n9nlU3jgwDzOh_Tg&sig2=KSoURexdv4rD5sCzmzMr9Q

Capítulo III:http://estudios.anda.cl/recursos/comScore%20SOI%20Chile%20August%202010.pdfhttp://www.slideshare.net/glever/usuarios-internet-perfil-y-hbitos-presentationhttp://www.maipuasuservicio.cl/noticias2.php?id=507http://www.gestiopolis.com/Canales4/ger/elobweb.htm

Page 93: Cheeta Graphics (PDF interactivo)

93

BIBLIOGRAFÍACapítulo IV:Imágenes sacadas: http://culturacliente.com/boletin/BoletinCulturaClienteCRM1-2010.htmlhttp://dzineblog.com/2008/06/cool-business-card-3.htmlhttp://www.facebook.com/CtrlPe

Capítulo VI: http://www.reifstore.cl/http://www.nic.cl

Capítulo VII:http://www.librosweb.eshttp://www.dinvaders.comhttp://www.abcdisegno.comhttp://www.manualdephp.comhttp://www.manualdecss.com/http://www.desarrolloweb.com/

Capítulo VIII:http://www.guiaweb.gob.cl/guia/capitulos/dos/contenidos.htmhttp://www.mitecnologico.com/Main/TiposDeInformacionhttp://www.mariapinto.es/alfamedia/mapa_canales.htmhttp://www.hipertexto.info/documentos/map_navegac.htm

Capítulo IX:http://www.creativosinformados.com/blog/herramientas/wireframes/