Fase1 g301122 81

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA


DISEÑO DE SITIOS WEB

2014

TRABAJO DE RECONOCIMIENTO

DISEÑOS DE SITIOS WEB

PRESENTADO POR:

ANA MILENA CASAS P

Grupo: 301122_81

TUTOR

ING. MAURICIO PERDOMO VARGAS




2014

CASO DE USO: La empresa VENTASYA de Colombia, se dedica a la comercialización de productos de

tecnología como: (Smartphone, Tablet, Computadores y televisores entre otros) esta empresa requiere el diseño e implementación de un portal web que le permita administrar una tienda en línea para sus clientes. Algunos parámetros establecidos para el proyecto son:

Se requiere el diseño de un logo para el portal web. Se deben crear una tienda virtual con carrito de compra. Se debe crear un Chat de servicio al Cliente. Se debe crear un formulario de contacto para clientes bajo el nombre de

contáctenos. Se debe crear un espacio de opiniones tipo foro sobre los productos que

comercializa la empresa. Se deben establecer elementos de accesibilidad web.

Fase 1: Análisis de condiciones del proyecto. Semana 1 a 3 del Periodo Académico

Conociendo el Caso planteado para el desarrollo del curso, se realizara en esta actividad la Fase 1 del proyecto conocida como ANALISIS DE LAS CONDICIONES DEL SITIO. Dentro de esta fase el grupo colaborativo deberá dar respuesta a los siguientes interrogantes: Fase 1. ANALISIS DE LAS CONDICIONES DEL SITIO PARA LA EMPRESA VENTASYA.

a) Conceptualización del problema que sustenta la necesidad de construir el

Sitio Web planteado en el caso de estudio. Sustentar el porqué de la respuesta seleccionada?

El problema radica en la necesidad de dar a conocer la empresa VENTASYA de Colombia, además de crear un espacio virtual donde los clientes puedan tener la oportunidad de comprar sin salir de sus casas o lugares de trabajo. La finalidad de construir un sitio web es dar a conocer lo que la empresa tiene y ofrece a sus clientes, teniendo en cuenta que esta empresa está dedicada a




2014

comercializar productos de tecnología se requiere un sitio web amigable, atractivo e interactivo. Donde se muestre al cliente cada uno de sus productos y la especificación de ellos. Con el fin de crear confiabilidad al cliente.

b) Definir los objetivos del Sitio Web. Sustentar el porqué de la respuesta seleccionada? OBJETIVO GENERAL

Diseñar un sitio web amigable e interactivo con la finalidad de posicionar a la empresa VENTASYA de Colombia como empresa líder en la comercialización de productos tecnológicos satisfaciendo las necesidades del cliente y entregando tecnología de punta. OBJETIVOS ESPECIFICOS

Realizar un diseño web que sea agradable a la vista y que le permita al cliente navegar con facilidad por cada una de las opciones que le ofrece el menú l momento de buscar información.

Construir un logo llamativo que identifique a la empresa (identidad corporativa) y sea fácil de recordar por el cliente. Esto con el fin de que el cliente tenga este sitio entre sus favoritos para consulta y posterior compra.

Optimizar el sitio web para que sea fácil de encontrar en los buscadores, lo anterior se debe a que la gran mayoría de las personas no recuerdan la dirección exacta del sitio web sino que recurren a los buscadores como google, etc.

Velar por que la información del sitio se presente de manera clara y veraz para que el cliente tenga seguridad del sitio y la empresa.

Permitir que el sitio web se actualice constantemente ya que los clientes buscan información en tiempo real y además por las transacciones que se van a realizar se debe tener presente la actualización de la misma.

Relacionar el diseño del sitio con la función de la empresa y no permitir que el diseño sea igual o parecido a la competencia sino que sea diferente pero que guarde estándares requeridos en el diseño.

c) Definir las características generales que tendrá el sitio de acuerdo a los

parámetros del cliente y las condiciones establecidas por el equipo de diseño (Grupo Colaborativo). Sustentar el porqué de la respuesta seleccionada?




2014

CARACTERISTICAS DEL SITIO WEB

Debe ser útil: por que al momento del cliente buscar le debe permitir encontrar la información precisa que él busca

Navegar fácil, rápido y seguro: si el menú o los diferentes botones de enlaces están ubicados de manera organizada el cliente optimiza su tiempo y

Velocidad: debemos tener en cuenta que el usuario debe navegar no solo de una manera fácil sino también que la carga del sitio sea rápida. Para ello debemos tener en cuenta el tipo de imágenes, iconos, animaciones, etc.

Disponibilidad y acceso en el menú: la accesibilidad a los diferentes link deben ser concretos; es decir nos deben llevar al lugar que indique el menú o botón. Lo anterior para que el usuario llegue de manera exacta a la información que requiere.

Manejo de gráficos y texto: en cuanto a la definición de imágenes debemos tener en cuenta no recargar con imágenes una misma área, pues debemos acompañarla de texto específico con la imagen.

Ubicación del contenido: se debe tener en cuenta la cantidad de contenido y la organización del mismo dentro de la página. Esto creara al usuario ganas de volver a visitarnos.

Página de inicio: en esta página se debe considerar como un abrebocas de lo que el usuario encontrara en las siguientes, es decir vamos a colocar la información más relevante del sitio.

Respaldo para comercializar: debemos ofrecer respaldo al momento que el usuario realice su compra. Proteger el sitio

Contacto: dentro del menú debemos fijar muy bien el botón de contactos con información real y actualizada de la persona encargada de los diferentes procesos en la empresa. Esto permitirá al cliente sentir confianza y seguridad al momento de comprar.

Compatible con el navegador: siempre que diseñemos un sitio web debemos evaluar que se pueda visualizar en todo su contenido por cualquier navegador, ya que muchas veces encontramos sitios que corren bien en unos navegadores y en otros no

d) Definir el modelo de desarrollo web que usara el equipo de diseño (grupo Colaborativo) para el desarrollo e implementación del sitio web planteado en el Caso de Estudio. Sustentar el porqué de la respuesta seleccionada?

El modelo que se va a implementar es el modelo en cascada




2014

Se opta por este modelo para obtener un mejor resultado, ya que este modelo permite que se vayan detectando los errores de cada una de las fases, además, siempre la siguiente anterior va a ser prerrequisito de la siguiente. Es decir, tendremos mayor seguridad y haremos un mejor control de cada apartado del sitio.

e) Definir el tipo o tipos de usuarios que tendrá el Sitio Web, se debe hacer claridad de los roles, derechos y restricciones de estos mismos. Sustentar el porqué de la respuesta seleccionada? Debemos tener en cuenta que hay dos tipos de usuario; uno es el o los usuarios del sitio y otro los usuarios administrador. Usuarios del Sitio:

Invitado: es el usuario que puede ingresar al sitio como visitante, es decir puede ver el contenido pero al momento de requerir algún producto debe registrarse.

Definición del problema.

Exploración conceptual

Especificación y análisis

de los requisitos

Diseño de prototipos

Materialización y pruebas

unitarias

Integración y prueba del

sistema

Entrada en

funcionamiento,

operación y

mantenimiento

Resumen de http://modelo-cascada.blogspot.com/

http://modelo-cascada.blogspot.com/




2014

Registrado: el usuario que una vez registrado en el sitio puede acceder a ciertos privilegios tales como compra, comunicación con el administrador.

Autor: es el usuario que puede sugerir o publicar algún contenido, como el caso de los sitios web de periódicos o noticias. Se requiere que este registrado.

Editor: además de tener los mismos privilegios del autor también puede editar sus comentarios o publicaciones.

Supervisor: puede acceder a los mismos privilegios del autor y editor

Usuarios de administrador:

Manager: es como el supervisor del sitio, quien verifica las publicaciones pero no determina el diseño ni selecciona el tipo de usuarios y sus restricciones

Administrador: tiene un poco más de privilegios que el administrador pero no puede influir en el acceso a usuario o roles dentro del sistema

Súper-administrador: es la persona que maneja todo el sistema o sitio web, es decir, es quien administra el sitio y quien dispone de los roles, perfiles, usuarios, publicaciones, etc.

f) Definir el tipo de estructura que tendrá el Sitio Web. Sustentar el porqué de la respuesta seleccionada?

La estructura que se tendrá es Mixta, ya que podemos interactuar en todas las páginas recorriendo cada una de ella sin tener que salir del sitio o hacer que se abran páginas en otras ventanas. En esta estructura todas las paginas están conectadas entre sí.

g) Nombre del dominio que registrara para el Sitio Web a crear. Sustentar el porqué de la respuesta seleccionada? www.ventasya




2014

El dominio es llamativo, está en tiempo presente y tiene el nombre de la empresa.

h) Extensión del dominio (org. Com. Gov edu.) u otras que pueda tener el sitio. Sustentar el porqué de la respuesta seleccionada? www.ventasya.com.co Es la extensión que casi todas las personas recuerdan con facilidad, es recomendable que de acuerdo al servicio de la empresa se coloca la extensión del dominio y co porque es de Colombia.

i) Definir el tipo de tecnología Web adicional que se usara para la

implementación del Sitio Web, así mismo se deben definir los lenguajes de diseño y desarrollo web con su versión, además en cada lenguaje planteado se deberá presentar una breve explicación del uso que se hará del mismo para el caso de estudio planteado Sustentar el porqué de la respuesta seleccionada? El tipo de tecnología a considerar para la implementación del proyecto son

tecnologías basadas en software Libre, ya que permite reducir

costos considerables en el tema de licenciamiento.

Servidor Web Apache: Es un Servidor de Código Abierto, que permite instalarse y configurarse en diferentes plataformas. Linux, Windows, Unix, entre otras. Es completamente configurable y tiene una gran aceptación por parte de desarrolladores Web. Actualmente es el servidor Web mas utilizado para el alojamiento de sitios y proyectos Web. Sigue ocupando la mayor parte del mercado en el mundo para instalar y configurar proyectos Web sobre este servicio. según la compañía netcraft

Dato Tomado de: http://news.netcraft.com/archives/category/web-server-survey/

Por otra parte el lenguaje a utilizar es PHP. También es de código Abierto y ofrece un gran número de librerías que soportan diferentes aplicaciones. Es también uno de los lenguajes más utilizados para el desarrollo de aplicaciones orientadas a la Web. Este lenguaje trabaja del lado del servidor. Corre muy bien en servidor Apache y en Internet Information Server. (Que es otro Servidor Web pero requiere licenciamiento) Mucha de su sintaxis está basada en lenguaje C

http://www.ventasya.com.co/

http://news.netcraft.com/archives/category/web-server-survey/




2014

Lenguaje HTML: Es el lenguaje en el cual están escritos los sitios Web, es la base para que los navegadores interpreten y lean los contenidos de las mismas. Actualmente los desarrolladores prefieren utilizar la versión HTML5, dado el uso de sus etiquetas de contenido semántico. se suele utilizar en conjunto con las hojas de estilo CSS para maquetar los sitios Web, y con el lenguaje JavaScript para proporcionar funcionalidades especiales en la interfaz de usuario.

Para los diseños y la interfaz de usuario, se puede emplear un maquetado Web con HTML CSS y JavaScript. Pero si y se desea implementar diseños que generen código de forma automática y faciliten en cierta forma el ahorro de tiempo en la fase de diseño, se pueden emplear herramientas profesionales como Dreamweaver, Photoshop, Fireworks, Etc. Pertenecientes a la Suite Adobe. (Pero su uso requiere licenciamiento)

j) Definir el o los sistemas de información que soporten el servicio innovador que debe poseer el sitio web.

Sistema Operativo:

Si nos decidimos por la utilización de software Libre, podemos utilizar una distribución de Linux (Centos, Ubuntu server, Suse, entre otros.). La ventaja es que el servidor web que se quiera adquirir para el proyecto ya viene o cuenta con cualquiera de estas distribuciones de Linux facilitando incluso el tema de instalación y configuración.

k) Definir si el Sitio Web requiere una conexión a base de datos y definir el tipo de DBMS que usara para el proyecto. Se debe explicar que lenguajes se usaran para gestionar los datos del DBMS y la BD a través de interfaces web. Sustentar el porqué de la respuesta seleccionada y cuál sería el uso específico de la Base de Datos? Para el motor de Base de Datos, se utilizará MySQL. Es un Sistema de Gestión de Base de Datos Multiusuario. También es muy utilizado por muchas compañías para el almacenamiento de bases de datos robustas y que trabajan en ambiente Web




2014

l) Definir las cuentas de correo institucionales que se deben crear para el cliente con el dominio del Sitio Web, definir si se usara un cliente nativo de correo del proveedor de Hosting o si se usara un servicio de correo por dominio de proveedores como Google o Outlook. Sustentar el porqué de la respuesta seleccionada, establecer el Numero de cuentas a crear, cuál será su uso y que cuota de almacenamiento en servidor manejaría cada una?

Para cuentas de correo electrónico, se puede utilizar las herramientas que traen los servicios de hosting en los cuales trae una aplicación denominada CPANEL, esta herramientas trae consigo a su vez una serie de utilidades para acceder a bases de datos, administrador de archivos, etc... y por supuesto correos electrónicos.

Hasta hace unos dos años era posible contar con servicios gratuitos para poder utilizar cuentas de correo corporativas, con dominios propios, ejemplo: [email protected] Ese servicio era ofrecido por compañías como google y Microsoft a través de la plataforma Windows Live, pero poco a poco fueron montando los servicios gratuitos y en el caso de google solo permite configurar cuentas de correo para el sector educativo. (Ejemplo de ello son las cuentas de correo misena. y muchas universidades). Para cuentas corporativas se debe pagar un valor aproximado de 50 dólares anuales por cada cuenta. Hay otro tipo de servicios similares que ofrecen la posibilidad de configurar cuentas de correo corporativo, pero nadie asegura que el servicio lo puedan desmontar posteriormente como sucedió con google o windows live. En ese orden de ideas una solución sería utilizar cuentas de correo a través de CPANEL y configurarlas a través de clientes de correo como: outlook ó thunderbird

m) Definir los parámetros del Servicio de Hosting y Dominio se contratarían el hospedaje del Sitio Web en la Internet, la respuesta se debe sustentar con la siguiente información: Nombre del Proveedor de Hosting seleccionado.

AMERICAN DOMINIOS

mailto:[email protected]




2014

Nombre del Plan de Hosting seleccionado. Empresarial

Tipo de servidor (Compartido o Dedicado). Compartido

Tipo de SO del servidor (Linux o Windows). Windows

Ancho de banda para transferencia mensual que ofrece el Plan. 1024 Kilobytes

Espacio de almacenamiento en servidor que ofrece el plan. 5 GB

Numero de dominios y sub dominios que permite crear y gestionar el plan seleccionado Dominios 3 Subdominios 50

Numero de base de datos que permite crear y gestionar en el servidor, el plan seleccionado. 6 BD

Numero de cuentas de correo que permite crear y gestionar en el servidor el plan seleccionado. 50 Cuentas de correo

El plan ofrece el paquete de aplicaciones Fantástico o Deluxe? No ofrece




2014

n) Definir la paleta o combinación de Colores, los tipos y estilos de fuentes y los posibles estilos que a nivel general define el equipo de diseño para la página principal o Índex del Sitio Web. Sustentar el porqué de la respuesta seleccionada?

La idea es tener en cuenta la gama de colores azul acompañándolo de los colores que representan a Colombia. Como se expresa en el logo y en el banner. Se van a manejar estos colores degradándolos, usando transparencia y dando otros atributos.

En cuanto a las fuentes podemos utilizar combinaciones como:

Estas fuentes se consideran ideales para el desarrollo de sitios web. Permiten presentar sitios elegantes, fáciles de entender en su contenido y no se ven recargadas.




2014

o) Definir en formato PNG un boceto del LOGO del Sitio web y el Banner propuesto por el equipo de diseño para el mismo. Sustentar el porqué de la respuesta seleccionada?

Logo: se define el logo en círculo con colores de Colombia haciendo alusión a

VENTASYA de Colombia. La gama de los colores se maneja con el azul. Siendo un color sobrio y elegante para mi concepto.

: Banner: el banner está acompañado del logo, con la gama de colores azul y un slogan que debe caracterizar a la empresa. También se colocan los iconos fundamentales de acceso directo para inicio, servicios, contacto y carrito de compras.




2014

p) Definir los ítems de menú, su ubicación en la página principal y

subpáginas del Sitio Web y los contenidos generales que tendrá el sitio Web para los visitantes. Además aquí se deben plantear las exigencias específicas del cliente las cuales se encuentran registradas en el Caso de Estudio. Sustentar el porqué de la respuesta seleccionada?

Definiendo el menú, podemos colocar en la página inicial en la parte superior, debajo del banner; este menú principal ira en todas las páginas. Teniendo en cuenta que deben ir enlazados entre sí. En las páginas siguientes se colocara un menú o submenú dependiendo de cada página. Este menú ira en la parte izquierda Inicio: aquí se colocara la información más relevante, como los productos más

pedidos o lo último que adquiera la empresa. Este se acompañara de imágenes llamativas Historia: se dará información acerca de la empresa, ya que esto permite que el

cliente conozca y confié. También se colocara la información sobre la ubicación y demás información que corresponda a la empresa. Productos: aquí se debe ubicar los productos que venden por categorías (es

aquí donde se tendrá el menú en la parte izquierda)

Televisores:

Computadores:

Tablets:

Celulares:

Impresoras:

Scanner:

Memorias:

Discos Duros:

Tablas digitalizadoras:

Promociones u ofertas: en caso de que se tengan, además esto llama más la atención del cliente. Servicios: aunque no se habla de un servicio específico se puede sugerir que

respalden sus ventas con servicios técnicos u otros que se requieran




2014

En línea: para tener acceso online en tiempo real con los clientes Contáctenos: permite que los clientes se registren y puedan realizar

comentarios o sugerencias acerca de la empresa o sus productos. También se sugiere insertar un mapa de ubicación de la empresa. Para el carrito de compras se colocara el acceso directo en la parte inferior del banner, así mismo al momento de ingresar a la imagen de cada producto se dará la opción de compra. Foro: se creara el espacio para los clientes interactúen entre sí.

Página inicial - Index

Inicio Historia Productos Ofertas Servicios En Línea Contáctenos Foro

Ejemplo de página de productos




2014

Inicio Historia Productos Ofertas Servicios En Línea Contáctenos Foro

Televisores > Smart Tv

Computadores > Tv 3D

Tabletas > Tv LED

Celulares > Tv LCD

Impresoras

Scanner

Memorias

Discos Duros

Tablas digitalizadoras

Cada uno de los ítems nos llevara a mirar en la misma ventana el producto con sus especificaciones y con la opción de compra. Así mismo para las demás categorías. Ejemplo:

Características principales

Entradas HDMI: 2. Entradas USB: 2. Tamaño de la pantalla: 40´´. Resolución de pantalla: 1920 x 1080 FullHD Tecnología LED. Conectividad WIFI. Comparte contenidos por WIFI-Direct. Si cuenta con TDT: DVB-T2

Televisor Samsung UN40H5303 40´´ LED Full HD Smart TV-Negro

>> COMPRAR AHORA




2014

q) Definir los Ganchos o valores agregados propuesto para el Sitio Web por

el equipo de diseño como un requerimiento hecho por el cliente?. Sustentar el porqué de la respuesta seleccionada?

Uno de los ganchos puede ser el módulo de ofertas, ya que los clientes buscan siempre precios cómodos. Se le sugiere implementar un contador de visitas para saber la cantidad de personas que acceden al sitio. También se sugiere el envió de boletines mensuales al correo de los clientes cuando se adquiera un nuevo producto o cuando se tengan las diferentes promociones u ofertas.

r) Definir qué aspectos de accesibilidad web debe poseer el Sitio Web como apoyo a visitantes que sufran de algún tipo de discapacidad física. Se deben establecer como mínimo 5 elementos o estrategias de accesibilidad web para el sitio, estas se deberán implementar al final del curso en el Sitio Web. Sustentar el porqué de la respuesta seleccionada?

De acuerdo a un archivo del periódico El Tiempo y con base a lo que expone la fundación Saldarriaga Concha, se puede implementar o tener en cuenta lo siguiente Tomado de http://www.eltiempo.com/archivo/documento/CMS-13247619

Discapacidad visual. Estas personas usan programas que leen el texto de las

páginas en voz alta. Cree la estructura del sitio web con un orden adecuado que facilite la lectura. Simplifique el diseño.

Discapacidad cognitiva. Emplee apoyos visuales, imágenes expresivas, frases

cortas y un lenguaje sencillo y claro.

Discapacidad física. Dependiendo del tipo de dificultad física, debe brindar herramientas tecnológicas (hardware y/o software) que les permitan el uso del computador a estas personas.

http://www.eltiempo.com/archivo/documento/CMS-13247619




2014

Discapacidad auditiva. Algunas personas con sordera no dominan el español, por ello se recomienda acompañar los contenidos de videos que resuman la información en lenguaje de señas y con subtítulos.

Un portal pensado para personas con discapacidad debe contar con una barra de herramientas especial que incluya las siguientes funciones:

Cambio de contraste. Permite modificar el fondo, y los colores del texto, por blancos y negros que resaltan los contenidos y facilitan su lectura.

Mostrar solo texto. Oculta las imágenes y visualiza solo el texto, dando al

usuario la posibilidad de centrar su atención en la información.

Cambio de tamaño de letra. Se trata de un botón que aumenta o disminuye el puntaje de la letra para facilitar la lectura de los contenidos.

s) Definir un presupuesto muy bien estructurado que contemple un plan de gastos completos y detallado para todas las actividades del proyecto de Diseño del Sitio Web, este presupuesto debe tener estimado de gastos reales para el desarrollo y ejecución del proyecto de diseño del Sitio Web propuesto. Sustentar el porqué de la respuesta seleccionada?

Diseño Web Personalizado: $ 3.800.000 Instalación y configuración del sitio con la última versión: $ 0 Administración del sitio. Pago mensual: $ 200.000 Servicio de Hosting y dominio durante un año: $ 500.000 Servicio de E-commerce por un año: $ 0 Posibilidad de tener el sitio en el móvil: $ 2.000.000




2014

CONCLUSIONES

Teniendo en cuenta lo que se requiere para la implementación de un Sitio Web, nos queda claro que para que sea exitoso debemos acudir a realizar diseños agradables, fáciles de navegar, tener en cuenta que el sitio no presente exclusiones para ninguna persona. En el diseño e implementación de sitios web se debe tener en cuenta que el usuario final encuentre todo lo que requiere al momento sin tener que dar tanta vuelta dentro del mismo. Por lo anterior debemos ponernos en el lugar del cliente y diseñar el sitio de una forma adecuada.




2014

REFERENCIAS BILIOGRAFICAS

Guía de diseño Web: http://www.guiadiseño.com/ Accesibilidad de los Sitios Web:

http://www.eltiempo.com/archivo/documento/CMS-13247619 Diseño de Páginas web: http://www.lawebera.es/diseno-web Fundamentos de diseño Web: http://www.cristalab.com/tutoriales/diseno-

web-fundamentos-basicos-c63l/ Reglas para diseño Web: http://nconideas.com/blog/?p=59 Modulo del curso: Modulo Diseño de Sitios Web

http://www.guiadiseño.com/

http://www.eltiempo.com/archivo/documento/CMS-13247619

http://www.lawebera.es/diseno-web

http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/

http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/

http://nconideas.com/blog/?p=59

Technology

Fase1 g301122 81