PDF de programación - Bases del Diseño de Páginas Web

Bases del Diseño de

Páginas Web



Bloque Especializado

Compilador:

Lic. Ingrid Riquelme Ramírez

Licenciatura en Diseño Gráfico

CONOCERSE ACEPTARSE AMARSE CUIDARSE SUPERARSE TRANSMITIR TRANSFORMAR

Bases del Diseño de Paginas Web



Índice


Índice
Introducción
Objetivo general

Tema 1. Planificación para el Diseño de páginas Web
Objetivo de aprendizaje
Sinopsis
1.1 Objetivos del proyecto Web
1.2 Arquitectura y organización del contenido
1.3 Estructura de la navegación

Tema 2. Especificaciones Técnicas
Objetivo de aprendizaje
Sinopsis
2.1 Relación equipo usuario – diseño
2.2 Tipografía y legibilidad en la Web
2.2.1 Tipografía en la Web
2.2.2 CCS y alfabetos por defecto
2.2.3 Tipografía Píxel
2.3 Color e Imagen en la Web
2.3.1 Modelo RGB
2.3.2 Tratamiento gráfico

Tema 3. Diseño de Páginas Web
Objetivo de aprendizaje
Sinopsis
3.1 Lenguaje HTML
3.2 Creación de botones y animaciones
3.3 Uso de sonido
3.4 Uso de video
3.5 Creación del Sitio Web

Bibliografía general



1
2
3

4
4
4
4
5
5

9
9
9
10
11
12
14
15
16
16
17

20
20
20
20
56
57
60
61

63

Índice 1



Bases del Diseño de Paginas Web

Introducción

Dentro de la www podemos encontrar una cantidad impresionante de sitios Web
inefectivos, anteriormente podría achacarse a la inflexibilidad del lenguaje HTML,
sin embargo, actualmente se cuentan con numerosas herramientas para diseñar
un sitio Web efectivo. Entre los elementos primordiales a tomarse en cuenta para
el buen diseño de un sitio están: la organización ó empresa, el usuario y ciertas
especificaciones funcionales - técnicas.



Introducción 2





Bases del Diseño de Paginas Web



Objetivo general



Al término del curso el estudiante aplicará los fundamentos del diseño gráfico en la
creación de páginas Web que favorezcan la atracción del cliente a partir de la
organización de la información, investigación de necesidades y por último
aplicación de programas para el diseño de sitios Web.



Objetivo general 3





Bases del Diseño de Paginas Web

Tema 1. Planificación para el diseño de páginas web

Subtemas

1.1 Objetivos del proyecto Web
1.2 Arquitectura y organización del contenido
1.3 Estructura de la navegación


Objetivo de Aprendizaje

Al término del tema el estudiante investigará, jerarquizará y orgnaizará la
información para facilitar la navegación, mantenimiento y revisiones posteriores
del sitio.


Sinopsis

La organización de la información es parte fundamental para un diseño funcional.
Definir desde un principio todo el contenido ayudará posteriormente a jerarquizar
la información dando como resultado un mayor conocimiento del proyecto y
atender las necesidades específicas del mismo fijándose objetivos a corto o largo
plazo.

La navegación fluida del sitio es importante, para ubicar al usuario dentro de la
página, dándole importancia a ciertos contenidos o no. Para saber qué estructura
es la mejor opción es necesario tener la información a la mano, por ello, esto es un
proceso de recolección y organización de los contenidos.


1.1 Objetivos del proyecto web

Tomando en cuenta la información y lo que desea el cliente se deben fijar mínimo
tres objetivos a alcanzar con este proyecto, el diseñar un sitio no es poner
simplemente en la red una página estática, sino es todo un desarrollo donde se
estudia al usuario, la competencia y sobre todo tiene como fin el éxito de un
objetivo a corto o a largo plazo.

Entre estos objetivos podríamos ubicar algunas de estas cuestiones: ¿Cuál es el
propósito de este sitio? ¿A quiénes queremos llegar? ¿Qué estrategias de
comunicación se integrarán? Con algunas de estas interrogantes podríamos
definir algunos objetivos finales.



Tema 1. Planificación para el diseño de páginas web 4





lista detallada de

Bases del Diseño de Paginas Web

1.2 Arquitectura y organización del contenido

La definición de los objetivos nos conlleva al siguiente paso: obtener la
información necesaria para alcanzarlos. Hacer una
la
documentación existente y la faltante, nos ayudará en la estructuración de la
información, por lo tanto, podremos llevar un calendario adecuado para el
proyecto, evitando perder tiempo posteriormente.

Dentro de la organización del contenido se puede empezar a visualizar un poco la
estructura de la página, debido a que aquí se definen los temas principales,
subtemas y la información persistente en todo el sitio, también se define qué tipo
de herramientas serán utilizadas, dependiendo del apoyo requerido por el
contenido, como podrían ser animaciones, video, formularios, etc. Por ello es
necesario conocer a fondo los contenidos del proyecto.

Para una rápida y fácil visualización de los contenidos y su jerarquía se puede
realizar un mapa de sitio, como lo verán en la gráfica siguiente:



1.3 Estructura de la navegación

Al tener todo el contenido se procede a diseñar la estructura de navegación, ésta
es básicamente un diagrama de flujo de la información. Existen cuatro estructuras
de navegación, las cuales se verán una por una a continuación.



Tema 1. Planificación para el diseño de páginas web 5

Bases del Diseño de Paginas Web

Secuencia

Es la forma más simple de organizar la información, debido a que es
completamente secuencial, generalmente es utilizada para contenidos educativos
o presentaciones donde el contenido se va dando paso a paso.



Jerarquía

Este tipo de estructura consta básicamente de una página principal, a partir de
ésta se va desglosando la información, dependiendo de su orden de importancia,
generalmente es utilizado para proyectos institucionales.



Retícula

Este tipo de navegación es una combinación entre la estructura secuencial y la de
jerarquía, ordena la información categóricamente; es utilizada generalmente para
uso académico.



Tema 1. Planificación para el diseño de páginas web 6



Bases del Diseño de Paginas Web

Telarañas

La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un
completo dominio sobre la información, pueden vincularse de cualquier parte del
sitio sin haber un orden jerárquico, para los usuarios principiantes resulta ser muy
confuso este tipo de navegación.



Tema 1. Planificación para el diseño de páginas web 7

Bases del Diseño de Paginas Web

La mayor parte de los sitios utiliza más de una estructura de navegación,
dependiendo de los requerimientos de despliegue de la información. Se puede
decir que mientras mayor sea el grado de complejidad se tenderá al uso de
estructuras tipo telaraña y a mayor simplicidad se usará la secuencial.



Tema 1. Planificación para el diseño de páginas web 8



Bases del Diseño de Paginas Web


Tema 2. Especificaciones técnicas

Subtemas

2.1 Relación equipo usuario – diseño
2.2
Tipografía y legibilidad en la Web
2.2.1 Tipografía en la Web
2.2.2 CCS y alfabetos por defecto
2.2.3 Tipografía Píxel
2.3 Color e Imagen en la Web
2.3.1 Modelo RGB
2.3.2 Tratamiento gráfico


Objetivo de Aprendizaje

Al término del tema el estudiante considerará especificaciones que deben tomarse
en cuenta en la realización de una página Web, así como, el uso correcto de
tipografías y herramientas para el tratamiento gráfico.


Sinopsis

Antes de iniciar con cualquier proyecto se deben tener en cuenta algunas
especificaciones técnicas sobre el equipo de nuestros usuarios para la correcta
visualización y funcionamiento del sitio, entre esas especificaciones técnicas
podemos encontrar el tipo de navegador, si utiliza módem o banda ancha y hasta
el tipo de letra a utilizar en el diseño de la página.

La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el
usuario tiende a reducir el número de palabras que lee. Para lograr la retención
hay unos puntos básicos a desarrollar en la mayoría de los sitios web. El mantener
el control de la tipografía sobre el diseño Web resulta un poco difícil, en una buena
parte de las ocasiones no se sabe cómo se verá exactamente la tipografía debido
al hecho de los diversos monitores y plataformas utilizados por los usuarios, la
ventaja es el uso de cascadas de estilos y el conocer qué tipografías son
desplegadas en la mayoría de los navegadores.

Otra de las especificaciones a tomar en cuenta en el diseño, son las imágenes y
gráficos, debido a que requieren un tratamiento especial, puesto que la publicación
es digital y no impresa. Lo que se busca de un sitio es que sea dinámico y
atractivo, pero sobre todo, que descargue rápidamente, es incómodo para el
usuario esperar minutos para poder acceder a la página y cuando esto sucede, es
muy probable que ni siquiera termine viéndola.



Tema 2. Especificaciones técnicas 9





Bases del Diseño de Paginas Web


Por ello existen varios programas para el tratamiento digital, con el correcto uso
del software y conociendo los formatos de compresión, se le puede sacar un
excelente provecho a estos recursos.


2.1 Relación equipo usuario – diseño

Antes de empezar a diseñar el sitio se deben tener en cuenta algunas
especificaciones técnicas sobre el equipo de nuestros usuarios, aquí se mostrará
u