INSTITUTO TECNOLOGICO SUPERIOR DE CLKINI EN EL ESTADO DE

CAMPECHE
CAMPUS HOPELCHN
ASIGNATURA: Comercio
Electrnico
TEMA: Diseo web
ALUMNO:
Juan martinez V.
Contenido
I. Proceso
II. Psicologa de los colores
III. Texturas
IV. Tipografas e imgenes
V. Tecnologas
VI. Integracin multimedia

Diseo
Siempre se ha dicho que la primera impresin es la que cuenta. Lo mismo podra
decirse de las pginas web de una empresa o comercio. Lo que se busca es que
quien acceda a nuestra pgina web, se enamore de sus productos y servicios y se
construya una relacin duradera. Mediante un diseo adecuado, esto puede
volverse cierto.

Al disear contenido visual, es importante considerar que la pantalla es nuestra
ventana hacia el usuario. Lo que le demos a travs de ella es esencial para construir
un mensaje atractivo y efectivo o por el contrario, pobre e irrelevante.

Es importante dividir la pantalla en reas funcionales:

O Cabeceras (Mdulo, seccin, cuadro)
O Pies (Servicios para el usuario, avisos)
O Mens, textos, grficos
O Entradas y salidas

As mismo, es bsico disear pantallas no saturadas sino que mantengan espacios
libres y en blanco (alrededor del 50% del espacio debe estar vaco) para permitir el
descanso visual.
Proceso desarrollo web
Estas son algunas etapas que se sugieren para disear
eficientemente un sitio.

O Delimitacin del tema
Esta es la etapa crucial, se define de qu se va a tratar el
Web, que cosas se incluirn y qu no. Tambin es el
momento para definir tanto las audiencias y los objetivos.

O Recoleccin de la informacin
En esta etapa se recolecta la informacin que se va a poner en el
Web, de acuerdo a la especificacin hecha en la etapa anterior.
Tambin en esta etapa hay que delimitar cuanta de la informacin
histrica, que ya no es relevante, ser incluida en el sitio web, por
ejemplo, se puede definir que la informacin de mas de 3 aos de
antigedad no ser incluida, etc.


O Agregacin y descripcin
Una vez que tenemos la informacin que ir en el sitio, comenzamos una clasificacin
apropiada . Aqu hay que encontrar un adecuado balance entre la linealidad y la
jerarquizacin.

O Estructuracin
En este punto se estructura la manera en que se unen las diferentes pginas, de acuerdo a
la agregacin de contenidos realizada en la etapa anterior. Se provee de ayudas para la
navegacin, de enlaces que permitan la jerarquizacin que diseamos y de enlaces entre
elementos de una misma jerarqua si se desea.
Tambin es importante proveer de ndices para cada descriptor que haya sido diseado.

O Metfora
Existen muchas pginas que esperamos sean accesadas desde diferentes partes de
nuestro servicio (por ejemplo: un glosario o una ayuda). Quizs en alguna parte del
documento mencionamos a otra pgina y sera interesante que el usuario pudiera hacer
click en esa referencia para ir a la pgina que estamos referenciando.
A esta etapa le llamamos "metfora" pues permite referirse a una misma entidad (en este
caso, una pgina HTML) en diferentes contextos. Estas paginas deben ser diseadas
cuidadosamente puesto que sern importantes para los usuarios al permitirles "saltar" dentro
del sitio desde zonas lgicamente distantes.



O Diseo y estilo grfico
Un estilo grfico adecuado puede ser algo importantsimo a la hora de hacer que la
persona que nos visita se sienta cmoda, y como una manera de alivianar el
contenido y hacerlo ms digerible.
En cuanto a la cantidad y tamao de las imgenes, hay que adoptar un equilibrio.
Otro punto importante en la etapa de definicin de la parte grfica, es intentar en lo
posible mantener una cierta coherencia grfica, y atreverse a innovar en cuanto a
ella. Un color de fondo, un fondo o una distribucin interesante de los elementos
dentro de una pgina es algo que no se olvida con facilidad.

O Ensamble final
En este punto concretamos el diseo, con los ltimos enlaces que sean necesarios e
incorporamos el estilo grfico a las pginas, se ensambla el sitio con una portada que
sea capaz de presentar en una sola pgina fsica al menos lo ms relevante del sitio,
se instalan links hacia la pgina personal del autor y/o su direccin de correo
electrnico.

O Testeo
Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links
"rotos" que no conduzcan a ninguna parte; revisar la redaccin y ortografa de las
pginas, hacer los ajustes necesarios para separar las pginas que sean demasiado
extensas en pginas ms pequeas.



Psicologa de los colores
El color es una herramienta que nos permite comunicar emociones en un sitio
web. La mayora de estas emociones son percibidas de forma inconsciente.

En el diseo web, el momento de la eleccin del color o colores que queremos
utilizar comporta unos mensajes psicolgicos que, segn se utilicen, influirn sobre
el contenido de las imgenes y de la propia tipografa.

A continuacin, podemos ver el significado de varios colores para decidirnos y saber
cual utilizar en nuestros diseos:

Rojo: Este vibrante color est entre los ms llamativos. El rojo estimula el
sistema nervioso al mximo y estimula nuestra impulsividad.

Azul: Este color tiene el poder de calmar y crear una sensacin de proteccin o
seguridad. Debido a su asociacin con el ocano y el cielo es percibido como
slido y digno de confianza.

Amarillo: El amarillo, asociado con el sol y el calor, estimula una sensacin de
felicidad. Este estimula la claridad de pensamiento y la memoria. Tambin aporta
viveza a los colores que lo rodean.

Verde: Es el color mas relajante del espectro. Su asociacin con la naturaleza y
la vegetacin le otorga una sensacin de seguridad.

Negro: Extremo y misterioso, el negro es el color ms fuerte del espectro visible.
Su misterio connota formalidad y exclusividad, sugiere autoridad, superioridad y
dignidad.

Blanco: Representa la ausencia del color. Este aporta plenitud espiritual y poder.
Este nos permite gran variedad de combinaciones al combinarlo con otros colores
aportando significados totalmente diversos.

El color tiene tres dimensiones bsicas:

Tono: se trata de la propiedad que hace distintos a los colores entre s. Los
primarios son el amarillo, el rojo y el azul; siendo el verde, naranja y violeta
los secundarios.
Saturacin: es el grado de pureza de un color con respecto al gris.
Luminosidad: indica cuan brillante u oscuro es un color.

He aqu unos consejos que nos ayudarn a escoger la coloracin ms indicada
para cada proyecto:

Blanco: salo para fondos y para facilitar la lectura. Va bien con cualquier
otro color.
Gris: Estupendo para complementar al negro y al blanco. Puedes jugar con
diferentes tonos de gris para combinar con todos los dems colores.
Negro: Ideal para productos de gama alta y para aadir contraste. El negro
es la ausencia de color y permite a los tintes adyacentes cobrar mayor
protagonismo.
Rojo: salo para llamar la atencin, pero siempre en dosis moderadas.
Azul: Combnalo con naranjas, verdes o metlicos. Tiende a contraerse, a
hacer una superficie ms pequea.

Amarillo: Combina bien con otros colores, y como el rojo, es
ideal para resaltar. Adems es un color clido y expansivo.
Verde: Combina bien con el azul o el marrn y activa la
creatividad.
Naranja: Procura no abusar de este color, pues es un color
muy dominante y expansivo al ser la mezcla.
Violeta: Mzclalo con colores suaves y poco dominantes para
crear un efecto equilibrado.
Rosa: Ideal para proyectos en donde la mujer es el pblico
objetivo principal, aunque en grandes dosis resultar cursi.
Nunca lo utilices para la web de un grupo de heavy metal.



Textura
Desde siempre se ha empleado la textura como elemento decorativo. El diseo
web no ha escapado a esta tendencia a decorar elementos o pginas enteras
empleando la textura. En el caso del diseo web, la textura es solo un elemento
visual y no tctil, como en otros casos, y tiene su precedente en la aplicacin de la
textura en la pintura.

Aplicacin de texturas como fondo de pginas web
Esta es la forma ms sencilla, an ms desde la aparicin de las hojas de estilo en
cascada (CSS), de aplicar textura en el diseo web. Para la aplicacin de un fondo
con textura, basta con tener una imagen que, repetida, da al visitante la sensacin
de estar frente a un fondo hecho con un material con textura.

Si tenemos algunas imgenes de fondo, emplearlas como fondo de la web es muy
sencillo, bastando para ello incorporarlo al CSS. Daremos un ejemplo prctico. Si
subimos una imagen de fondo de nombre fondo.jpg a una carpeta images en
nuestro servidor, bastar con colocar el siguiente cdigo:
<body style=background-image: url(images/fondo.jpg);>

Adems de ser un excelente medio de decorar una pgina web, resulta
tambin muy interesante su utilizacin como modo de obtener contraste para
diferenciar y resaltar algunos elementos importantes.
Desde la simple aplicacin de una sombra hasta la confeccin de objetos
en tres dimensiones, la aplicacin de la textura se ha convertido en uno de los
recursos ms empleados en el diseo web de alta calidad.

TEXTURA CON OBJETO
RESALTADO
TEXTURA CON TIPOGRAFIA
Tipografa e imagenes
Las pginas web tienen como finalidad principal transmitir uno o varios mensajes al
usuario de internet, para lo que debe emplear elementos adecuados para lograr este
objetivo. Las imgenes y el texto son los elementos ms empleados para la
mencionada transmisin de ideas.
Es frecuente encontrar en las pginas web un prrafo precedido de un elemento
grfico, generalmente una imagen. Este tipo de configuracin es muy eficaz y
consiste en llamar la atencin del usuario sobre el elemento grfico para luego
completar la exposicin de la idea mediante el empleo del lenguaje escrito. Veamos
un ejemplo:

En el diseo web, as como en el uso de fuentes en programas informticos, se emplean los
siguientes tipos de escalas para determinar el tamao de las fuentes o tipografas. Tambin se
pueden determinar otros atributos de las fuentes, como la tipografa, el color y el grosor.

Las medidas ms aconsejables para los textos, es de 11 puntos para la fuente y 13 puntos para el
interlineado, ya que brindan una lectura descansada.

La mayora de programadores web siguen utilizando las llamadas tipografas seguras,
definiendo un listado de tipografas que se van a intentar utilizar en orden establecido (Si la primera
fuente no est disponible en el ordenador del usuario, la segunda fuente ser utilizada y as
sucesivamente). Los grupos de fuentes ms utilizados son los siguientes:

O Verdana, Geneva, sans-serif
O Georgia, Times New Roman, Times, serif
O Courier New, Courier, monospace
O Arial, Helvetica, sans-serif
O Tahoma, Geneva, sans-serif
O Trebuchet MS, Arial, Helvetica, sans-serif
O Arial Black, Gadget, sans-serif
O Times New Roman, Times, serif
O Palatino Linotype, Book Antiqua, Palatino, serif
O Lucida Sans Unicode, Lucida Grande, sans-serif
O MS Serif, New York, serif
O Lucida Console, Monaco, monospace
O Comic Sans MS, cursive

Veamos un ejemplo en CSS:

El color de las tipografas, si bien deben integrarse con el resto del
diseo, no debe rebajar la visibilidad de los textos. Para obtener una
buena legibilidad de los textos que se publican en una pgina web, el
color que se emplea en las fuentes debe contrastar ntidamente con el
color del fondo donde es colocado. Un bajo contraste, hace que el texto
se vuelva difcil de leer.

En el siguiente ejemplo, el color de los textos resalta claramente del
fondo, de forma que se vuelve muy sencilla su lectura, haciendo que los
usuarios puedan acceder a estos contenidos con total comodidad.
Tecnologas
Las tecnologas utilizadas para realizar su sitio web son variadas. Las
dividiremos en tres secciones, Diseo, Programacin y Tecnologas.

DISEO
En la seccin de diseo se utilizan herramientas para hacer ms atractiva
y funcional a su pgina web.

1. Adobe Photoshop CS3: es una herramienta imprescindible para
perfeccionar todo tipo de imgenes. Asimismo, incorpora mejoras
de flujo de trabajo y productividad, nuevas herramientas de edicin y
capacidades de composicin avanzadas.
2. Adobe Fireworks CS3: Permite acelerar el diseo y el desarrollo de
webs es la herramienta ideal para crear y optimizar imgenes para la
web, as como para disear rpidamente prototipos de sitios web.
3. Adobe llustrator CS3: Este software es utilizado para el retoque de
imgenes y fotografas de manera profesional.


PROGRAMACION

1. Adobe Dreamweaver CS3: Ahora incluye herramientas CSS,
componentes Ajax para generar interfaces de usuario dinmicas e
integracin avanzada. Se utiliza comnmente para programar su
pgina web, preparar los formularios o editar distintas utilidades de
funcionamiento de su pgina web.
2. Adobe Flash CS3 Professional: se caracteriza por su interfaz de
usuario agilizada, unas herramientas de vdeo avanzadas y una
sorprendente integracin con el software relacionado. Comnmente
este programa se utiliza para hacer las animaciones que integrarn su
sitio web.
3. Adobe Contribute CS3: Se utiliza para pasar los archivos hechos en
Word a PDF y PDF Flash. Una excelente herramienta.
4. SWiSH Max: Con este software se crean contenidos Flash sin
lmite, posee todas las herramientas para crear animaciones en Flash
totalmente interactivas.


TECNOLOGIAS
1. AJAX: Tcnica de desarrollo web para crear aplicaciones interactivas mediante
la combinacin de tres tecnologas ya existentes: HTML (o XHTML), Hojas de
Estilo en Cascada (CSS) para presentar la informacin y JavaScript, para
interactuar dinmicamente con los datos.
2. PHP: Con PHP se puede hacer cualquier cosa que podemos realizar con un
script CGI, como el procesamiento de informacin en formularios, foros de
discusin, manipulacin de cookies y pginas dinmicas.
3. JAVA: Es un lenguaje de programacin con el que podemos realizar cualquier
tipo de programa. En la actualidad es un lenguaje muy extendido y cada vez
cobra ms importancia tanto en el mbito de Internet como en la informtica en
general.
4. JAVASCRIPT: Se trata de un lenguaje de programacin del lado del cliente,
porque es el navegador el que soporta la carga de procesamiento. Gracias a su
compatibilidad con la mayora de los navegadores modernos, es el lenguaje de
programacin del lado del cliente ms utilizado.
5. HTML: Es un lenguaje de marcas diseado para estructurar textos y
presentarlos en forma de hipertexto, que es el formato estndar de las pginas
web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el
HTML se ha convertido en uno de los formatos ms populares que existen para
la construccin de documentos.

6. My SQL: Es una de las bases de datos ms populares desarrolladas bajo la
filosofa de cdigo abierto. Es un servidor de Bases de datos existente en
plataforma Linux, recomendable para desarrollos que necesiten manejar
numerosos registros y sesiones simultneas.
7. STREAMING: Se utiliza para aligerar la descarga y ejecucin de audio y vdeo
en la web, ya que permite escuchar y visualizar los archivos mientras se estn
descargando. Si no utilizamos streaming, para mostrar un contenido multimedia
en la Red, tenemos que descargar primero el archivo entero en nuestro
ordenador y ms tarde ejecutarlo, para finalmente ver y or lo que el archivo
contena.

Existen numerosas tecnologas y herramientas para el diseo web, algunas con
herramientas mas integradas como Joomla y otras enfocadas al comercio
electrnico como PrestaShop, Magento y Oscommerce.
Tambin otras herramientas como jquery, Dupral,SQL Server y muchos mas.

Integracin multimedia
Cuando se usa el trmino Diseo Web Multimedia en el mbito de la red,
nos referimos al uso de software y hardware para almacenar y presentar
contenidos, generalmente usando una combinacin de texto, fotografas e
ilustraciones, vdeos y audio.

As pues, una pgina web multimedia ser una pgina web que presenta
entre otras, las siguientes ventajas: un contenido enriquecido, animado
y dinmico, el uso del video y del audio.

La integracin de contenidos multimedia en el los sitios web es uno de los
mecanismos ms importantes para enriquecer la experiencia del usuario y
favorecer el aporvechamiento de la inversin que se hace en el desarrollo
del sitio.
Las herramientas para integrar multimedia a paginas web son: Flash y
HTML5.
Actualmente Flash est quedando obsoleto por la aparicin del HTML5.


HOJAS DE ESTLO
Una hoja de estilos consiste en un conjunto de
reglas.
Cada regla est formada por:
El Selector (nombre del estilo)
La Declaracin (define el estilo)
Propiedad
Valor

Qu podemos hacer con los estilos?
Redefinir estilos de Etiquetas HTML.
Crear Estilos Personalizados para uso
genrico (Clases)
Crear Estilos para un elemento HTML
especfico (por Id)


h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman",
serif;
}
.textoresaltado {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold; /* Esto es un
comentario */
color: #000000;
}
#logo {
background-image: url("/img/logo.gif");
background-position:center;
background-repeat:no-repeat;
height: 50px; width: 150px;
position: absolute; left: 0px; top: 0px;
} Ventajas:
Pginas fcilmente modificables
Varios estilos para una pgina
Fcil consistencia de sitios web
Inline Styles: Utilizando el atributo
style se define el estilo de un
elemento HTML en forma individual.

Embedded Style: Se define la regla
CSS dentro de un documento HTML.
Se puede aplicar a cualquier elemento
de ese documento.

Hojas de Estilos externas: Un archivo
CSS independiente que se encuentra
referenciado en cada uno de los
documentos HTML que desean
utilizarlo.

Ejemplo de sintaxis
<div class="entry-content">
<h2>What is Sushi?</h2>

<img src="sushi.jpg"
class="photo" alt="" />

</div>

.entry-content {
grid-columns: (30px * *)[4];
grid-rows: 9em 33.3% *;
column-count: 4;
column-gap: 30px;
}
.entry-content h2 {
float: page top left;
width: 6gr;
height: 1gr;
margin-left: -30px;
}
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}
GRACIAS POR SU
ATENCION
BIBLIOGRAFIA
O http://www.caramelostudio.com/blog/la-
importancia-del-diseo-web-para-el-negocio/
O http://tejedoresdelweb.com/w/Proceso_desarr
ollo_web
O http://www.caramelostudio.com/blog/claves-
de-un-buen-diseno-web-ii-la-psicologia-del-
color/
O http://www.lawebera.es/diseno-
web/elementos-de-diseno-web-la-textura.php
O http://www.lawebera.es/diseno-web/tipografia-
aplicada-al-diseno-web.php