primera evaluacion diseño web

19
Desarrollo de Aplicaciones Web Versión 1.0 21/06/2012 1 Desarrollo de Aplicaciones Web Integrantes del equipo: Iván Calderón Torres Ana Lizbeth Xochipa Justo Felipe Hernandez Juarez Miguel Angel Nieto Marcos Rolando Garcia Maceda

Upload: megacine-pena

Post on 04-Dec-2014

350 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

1

Desarrollo de Aplicaciones Web

Integrantes del equipo:

Iván Calderón Torres

Ana Lizbeth Xochipa Justo

Felipe Hernandez Juarez

Miguel Angel Nieto Marcos

Rolando Garcia Maceda

Lic. Manuel Méndez Montero

Page 2: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Tabla de contenidoALCANCE DEL SITIO..............................................................................................................................3

OBJETIVO DEL SITIO.............................................................................................................................4

MERCADO META....................................................................................................................................4

DIAGRAMA DE NAVEGACIÓN..............................................................................................................5

ESTRUCTURA DEL SITIO......................................................................................................................6

INTERFACES GRÁFICAS......................................................................................................................7

Venta de Inicio.......................................................................................................................................7

Ventana Conócenos.............................................................................................................................8

Ventana Servicio...................................................................................................................................9

Venta Contáctanos.............................................................................................................................10

PALETA DE COLORES.........................................................................................................................11

TIPOGRAFÍA...........................................................................................................................................13

¿Por qué es Times New Román es la fuente más utilizada?.................................................13

Las otras opciones disponibles....................................................................................................13

Títulos...............................................................................................................................................14

Subtítulos.........................................................................................................................................14

Contenido.........................................................................................................................................14

Link...................................................................................................................................................14

RECURSOS GRÁFICOS.......................................................................................................................15

Banner Flash.......................................................................................................................................15

Formato de imagen .PNG..................................................................................................................15

Audio.....................................................................................................................................................15

Video.....................................................................................................................................................16

2

Page 3: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

ALCANCE DEL SITIO

Mediante el sitio web los usuarios y clientes podrán consultar información

detallada y precisa sobre los productos, servicios, ofertas, paquetes. De tal manera que

sé sientan animados a adquirir de nuestros productos y servicios que les ofrece la

empresa R-FLIM Solutions en el área de las telecomunicaciones, diseño y puntos de

ventas, así mismo estar en contacto con nosotros por medio del sitio.

En el sitio los usuarios consultaran documentación del proyecto de una red

inalámbrica, entre otros servicios.

OBJETIVO DEL SITIO

El principal objetivo de sitio es generar ganancias a nuestra empresa, ya que por

medio de esta el usuario consultara ofertas, paquetes, etc., de tal manera que se sienta

impulsado a adquirirlos. Al igual que dar a conocer los productos y servicios que ofrece

la empresa R-FLIM Solutions enfocada en Diseñar e implementar redes que mejoren

la comunicación de las empresas.

MERCADO META

El proyecto esta dirigido hacia las micro, pequeñas y medianas empresas con el

fin de mejorar e innovar su comunicación mediante la implementación de redes

inalámbricas.

3

Page 4: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

DIAGRAMA DE NAVEGACIÓN

4

UBICACIÓN.HTML

CONTACTO.PHPSERVICIOS.HTMLCONOCENOS.HTML

INICIO.HTML

HOME.HTML

Page 5: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

ESTRUCTURA DEL SITIO

5

UBICACIÓN.HTML

CONTACTO.PHPSERVICIOS.HTMLCONOCENOS.HTML

INICIO.HTML

HOME.HTML

Page 6: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

INTERFACES GRÁFICAS

Venta de Inicio

Como esta ventana es lo primero que ve el usuario al ingresar al sitio se

mostrarán algunas ofertas, paquetes, etc., con la finalidad que el mismo se vean

interesado y conozca mas de nuestras ofertas, de tal manera que compre nuestros

servicios.

6

Banner

800 pixeles

600 pixeles600 pixeles

Page 7: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Ventana Conócenos

En este lugar se mostrara la información de nuestra empresa, el cual consta de

visión, misión, valores y objetivos

7

400 pixeles 400 pixeles

200 pixeles

200 pixeles

Page 8: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Ventana Servicio

En esta sección se darán a conocer los distintos servicios que como empresa

ofreceremos, instalación de antenas de telecomunicaciones, diseño de sitios web y

puntos de ventas. Al igual que se contara con una sección en la cual se mostraran

distintas ofertas y paquetes.

8

400 pixeles 400 pixeles

600 pixeles

Page 9: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Venta Contáctanos

Es de suma importancia mantener comunicación con el usuario, ya que de esta

manera podrá contratar nuestros distintos servicios, al igual que mandar comentarios,

opiniones, etc.

9

800 pixeles

600 pixeles

Page 10: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

PALETA DE COLORES

Los colores son una de las partes más importantes del sitio, más que las

imágenes

que se coloquen, los colores son los que van a producir sensaciones en la mente

de los visitantes, una buena combinación de colores puede hablar mejor que muchas

imágenes, lo importante del caso es mantener una distribución de colores de

manera que nuestro sitio no se vea de mal gusto, desordenado, incongruente o

que produzca desconfianza o incluso, moleste a la vista.

Cada color comunica un mensaje; así que se debe ser cuidadoso acerca del

mensaje que se quiere transmitir, de acuerdo a su logo e identidad corporativa. Por

principio de cuentas, los colores que controlan la base de nuestra página son el color

de fondo y el del texto, mantener un buen balance entre ambos es determinante para

que nuestra página no se vea mal, produzca sensaciones agradables y no haga que

nuestros visitantes se retiren con los ojos irritados por haber estado en nuestro sitio.

Azul: Simboliza la confianza, transmite seriedad y tranquilidad, estimula la

paciencia y la serenidad. Es el color del infinito, de los sueños y de las buenas

relaciones. También es el poder de la tecnología y la limpieza, usualmente

significa éxito, dinero y calidad.

Negro: Es un color que denota poder, misterio y estilo. En diseño web puede dar

imagen de elegancia y sofisticación y aumenta la sensación de profundidad y

perspectiva.

10

Page 11: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Verde: Representa armonía, crecimiento, exuberancia y fertilidad. Simboliza la

esperanza y se utiliza para neutralizar los colores cálidos. Actúa como relajante

y calmante. También significa abundancia, esperanza, dinero, riqueza, calma,

balance, amistad y prestigio.

Gris: seguridad, inteligencia, madurez, sólido, profesional, conservador,

sofisticado y duradero.

Elemento ColorBackground(Fondo de página) Gris

Header (Cabecera de la página web azul)

Azul/Verde

Botones AzulBody(Cuerpo de la página web) GrisFooter (Pie de página) AzulLetra Negro

11

Page 12: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

TIPOGRAFÍA

La mayoría de los diseñadores web, obtienen una descripción detallada sobre

los tamaños de fuente y estilos que se están extrayendo de los demás requisitos del

cliente. Por otro lado, la mayoría de diseñadores web, recomiendan la fuente Times

New Román a sus clientes.

¿Por qué es Times New Román es la fuente más utilizada?

La mayoría de las páginas web utilizan Times New Román para el texto. Una de

las razones principales para la selección de este estilo es que se ve profesional, junto

con eso, no es irritante para el visitante; Además de eso, es el tipo de letra más legible.

Las otras opciones disponibles

Times New Román no es la alternativa de estilo de fuente única, también se

puede utilizar Arial y Verdana. Todas estas tres fuentes se utilizan a nivel profesional,

sin embargo, no son tan populares y de uso general como Times New Román.

La selección de fuentes también depende de la disposición general del sitio web y la

preferencia del cliente. Para representar una imagen profesional, es mejor usar una de

las opciones de texto antes marcadas. Mientras más legible sea el texto en la página

web los usuarios se sentirían más atraídos.

Times New Román

A B C D E F G H I J K L M N O P Q R S T V W X Y Z

a b c d e f g h i j k l m n o p q r s t v w x y z

1234567890

Arial

A B C D E F G H I J K L M N O P Q R S T V W X Y Z

a b c d e f g h i j k l m n o p q r s t v w x y z

1234567890

12

Page 13: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Títulos Tipo de letra: Times New Román

Tamaño: 14

Color: Negro/Blanco

Subtítulos Tipo de letra: Times New Román

Tamaño: 12 Negrita

Color: Negro

Contenido Tipo de letra: Arial

Tamaño: 12

Color: Negro

Link Tipo de letra: Arial

Tamaño: 12

Color: Negro Cursiva

13

Page 14: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

RECURSOS GRÁFICOS

Banner Flash

Internet es en la actualidad un medio principal de información y comunicación, su

potencialidad es ilimitada, la nuevas pautas de publicidad inteligente de Google por ej.

Permiten que la publicidad esté destinada adal target correcto según su perfil de

búsquedas lo que potencia enormemente la capacidad comercial de los anuncios.

La creación de banners publicitarios es una excelente oportunidad para dar a conocer

nuestros servicios en la web, ante un número potencialmente ilimitado de personas,

con una vidriera las 24 horas del día publicitándote. Son una herramienta de

marketing muy importante y en determinadas web con mucho tráfico pueden ser de

gran masividad. Un buen diseño de banner que sea atractivo, original y que sepa

aprovechar las ventajas que brinda la web, como movimiento e interactividad, harán

que nuestra web sea un éxito, y pueda tener muchas visitas y mayores ventas de

nuestros servicios.

Formato de imagen .PNG

(Portable Networks Graphic). Es un formato gráfico que está basado en un

algoritmo de compresión sin pérdidas, y fue desarrollado para resolver las deficiencias

del GIF, principalmente en cuanto a profundidad de color.

Una de las principales ventajas de PNG, es que independientemente de la

profundidad de color que se use, la compresión permite archivos de muy bajo peso sin

pérdida de calidad, permitiendo optimizar la carga de la página web.

AudioNo se utilizaran videos en la página web porque eso requiere descargar MB al

ordenador y como consecuencia consume ancho de banda y la pagina podría cargar

muy lentamente.

14

Page 15: Primera evaluacion diseño web

Desarrollo de Aplicaciones Web

Versión 1.0 21/06/2012

Video

No se utilizaran videos en la página web porque eso requiere descargar códecs

al ordenador con regularidad para poder visualizarlos.

Otra desventaja es la lentitud de carga del video, lo cual, es un factor de peso,

ya que en la actualidad la tendencia de gustos de los usuarios indica que mientras más

veloz sea la carga de una web, más popular se vuelve.

15