Bases Pag 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 1
Introducción 2
Objetivo general 3
Tema 1. Planificación para el Diseño de páginas Web 4

Objetivo de aprendizaje 4
Sinopsis 4
1.1 Objetivos del proyecto Web 4
1.2 Arquitectura y organización del contenido 5
1.3 Estructura de la navegación 5
Tema 2. Especificaciones Técnicas 9

Sinopsis 9
2.1 Relación equipo usuario – diseño 10
2.2 Tipografía y legibilidad en la Web 11
2.2.1 Tipografía en la Web 12
2.2.2 CCS y alfabetos por defecto 14
2.2.3 Tipografía Píxel 15
2.3 Color e Imagen en la Web 16
2.3.1 Modelo RGB 16
2.3.2 Tratamiento gráfico 17
Tema 3. Diseño de Páginas Web 20

Sinopsis 20
3.1 Lenguaje HTML 20
3.2 Creación de botones y animaciones 56
3.3 Uso de sonido 57
3.4 Uso de video 60
3.5 Creación del Sitio Web 61
Bibliografía general 63
Índice 1
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
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
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.1Objetivos 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

1.2Arquitectura 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 lista detallada de 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.3Estructura 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.

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.

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.

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 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
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

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á
una breve lista de los puntos que no se deben olvidar.
1. Resolución del monitor

600 x 800 px
1024 x 768 px
1280 x 960 px
Actualmente se diseñan las páginas conforme a estos estándares, sin

embargo, con el tiempo irán cambiando las medidas por la constante
evolución de los equipos y mejora en los monitores.
2. Navegadores
Internet Explorer
Netscape Communicator
Mozilla
Cada navegador despliega la información según la reconoce, por ello es que

hay ciertas variantes en la visualización dependiendo del navegador además
de que algunos plug ins o java scripts no son compatibles con los diversos
navegadores existentes en el mercado.
3. Velocidad de conexión
Módem
Banda Ancha
Es muy importante saber qué tipo de usuarios navegará el sitio, porque de

eso depende la velocidad en la que descargarán las páginas, no hay que
olvidar que si la mayoría de nuestros usuarios cuentan con módem, la
visualización debe ser rápida o se corre el riesgo de que ya no visiten el sitio
ó si los usuarios ingresarán a la página por medio de intranet o de su trabajo
se tiene la libertad de no preocuparse tanto por el peso y tiempo de
descarga.

4. Uso de plug ins

La especificación del uso de plug ins, es necesaria para la correcta
visualización del sitio, señalada desde un principio.
2.2 Tipografía y legibilidad en la Web

Legibilidad es la capacidad de definir y distinguir claramente los caracteres del
alfabeto, mientras tanto que la comprensión se refiere al contenido del texto o
párrafo. La compresión se encuentra ligada a la legibilidad, mientras más nítido
sea el carácter y su entorno (color de fondo, interlineado, estilo de la tipografía,
etc.), se logrará una mayor comprensión del contenido.
Muchas ocasiones se encuentran páginas donde el diseño experimental

predomina, visualmente puede lucir estético, sin embargo, el contenido ha sido
dejado a un lado. Habrá usuarios seguidores de éste tipo de sitios, así como
aquellos que cambien rápidamente de página por no encontrar la información que
desean, por ello es necesario estudiar el mercado, para saber exactamente hasta
qué punto lo estético tiene un mayor peso que el contenido.
Ejemplo uso de tipografía donde lo estético predomina al contenido.

www.nuevosricos.com
La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el

usuario tiende a reducir el número de palabras que lee, esto se debe al cansancio
producido por el monitor y a la gran competencia existente entre cada página,
cada una debe llamar la atención del usuario pero sobre todo retenerla. Para
lograr la retención hay unos puntos básicos a desarrollar en la mayoría de las
páginas, uno de ellos es el uso de palabras claves destacadas, uso de subtítulos,
párrafos pequeños y con una sola idea.
Ejemplo uso de puntos básicos, remarcados en naranja

www.eluniversal.com.mx
2.2.1 Tipografía en la Web

El mantener el control de la tipografía sobre el diseño Web resulta un poco difícil.
Aunque se ha experimentado bastante en base a prueba y error, 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.

Uno de los aspectos importantes en la tipografía aplicada al diseño digital es el

tipo: la selección en el uso de la serif o sans serif. En una publicación digital,
cambian algunas de las reglas utilizadas en el diseño editorial, una de ellas es el
uso de la tipografía serif como la mejor opción, esto se debe a que la tipo sin
patines pierde menos calidad al ser trazada en píxeles, lo que da como resultado
una mejor legibilidad. Entre las tipografías diseñadas específicamente para su uso
en el ordenador encontramos a la georgia o la verdana, su cuerpo es un poco más
grande que la mayoría de las tipos, lo que facilita su lectura. Por otro lado, la
tipografía con patines (times new roman) no es nada recomendable en textos con
un puntaje menor a 14 pts en el diseño digital, debido a que causa ruido visual,
pero es muy útil en textos extensos, porque el usuario tiende a imprimir los
documentos para poder leerlos posteriormente, por lo tanto sus propiedades
negativas en digital se convierten en positivas en el medio impreso.
Ejemplo uso de serif http://art.teleportacia.org/exhibition/online_newspapers/FAZ

Ejemplo uso de sans serif

www.lavanguardia.es
2.2.2 CSS y alfabetos por defecto
Uno de los avances sobre el control en la visualización de la tipografía en el

navegador, son los CSS (Cascading Style Sheet), los cuales son una serie de
especificaciones de estilos que le dicen al navegador cómo desplegar el texto
(color, tamaño, tipo). Éstas casadas pueden ser aplicadas a un párrafo o varios
párrafos del documento.
Es muy práctico el uso de las CSS, ahorra tiempo y si es usado correctamente

todo el sitio permanecerá unificado, además de facilitar el mantenimiento, hacer
cambios y la carga de páginas es más rápida. Pueden ser utilizadas con páginas
dinámicas o estáticas, la generación de las cascadas de estilos puede hacerse
mediante el software de diseño Web como puede ser Dreamweaver.
Cuando no se hace uso de las cascadas de estilo, al menos pueden tenerse en

cuenta los alfabetos que vienen por defecto en los sistemas operativos como
podría ser Macintosh o Windows.

Windows Mac Extras de Microsoft Navegadores
Arial Charcoal Andale Mono Andale Mono

Book Antiqua Chicago Arial Arial
Century Gothic Courier Arial Black Comic Sans MS
Comic Sans MS Geneva Comic Sans MS Georgia
Copperplate Gothic Helvetica Courier New Impact
Bold Monaco Georgia Trebuchet MS
Courier New New York Impact Verdana
Impact Palatino Times New Roman Webdings
Lucida Symbol Trebuchet MS
Marlett Times Verdana
Symbol Webdings
Tahoma
Times New Roman
Verdana
Webdings
Wingdings
2.2.3 Tipografía píxel

La mayoría de las fuentes fueron diseñadas para impresión a alta resolución, por
lo que su uso en el diseño digital presenta ciertos problemas de legibilidad cuando
la fuente tiene un cuerpo inferior a los 10 puntos. Por ello han sido diseñadas
algunas fuentes llamadas píxel, las cuales se ajustan perfectamente a la
resolución de la pantalla.
Ejemplo tipografía tipo “pixel” encuadra perfectamente en la retícula
La repercusión de diseñar estas tipos a un tamaño “mini” por así llamarlo, es que
mientras mayor sea el puntaje, la tipografía va a dar un aspecto de pixeleada, lo
cual puede resultar contraproducente a menos que se busque ese efecto. Como
la mayoría de las tipografías se pueden encontrar gratuitas y de pago, existen

varios sitios donde hallarlas, entre ellos está www.fontsforflash.com o las tipos
diseñadas por Joe Gillespie.
2.3 Color e Imagen en la Web

Cabe recordar se debe tomar en cuenta que las imágenes y gráficos requieren un
tratamiento especial, debido a que la publicación es digital y no impresa.
Los monitores de computadora se componen de puntos llamados píxeles. Estos

puntos están colocados en renglones y columnas, como una rejilla o retícula. Cada
píxel puede tener cualquier valor de una gama de más de 16 millones de colores.
El despliegue del color en los monitores es bajo el modelo de color RGB.
2.3.1 Modelo RGB

Los dispositivos como el monitor de la computadora están diseñados para
funcionar bajo el modelo de color RGB, siendo el rojo (Red), verde (Green) y azul
(Blue) los colores conocidos como primarios aditivos, debido a que la combinación
de estos colores en su estado puro produce luz blanca. En el espectro RGB, cada
color consiste en tres números (uno para el rojo, otro para el verde y el último para
el azul) que indican el porcentaje de cada color.
#255/0/0 …. … Red
#0/255/0…. …. Green
#0/0/255…. …. Blue
#0/0/0 …. …. Black
#255/255/255 .. White

Las diferentes mezclas y proporciones de estos colores primarios generarán los

distintos colores. Cada color primario puede tener un valor de 256 que puede ir del
0 (negro) al 255 (blanco). Mezclando los 3 colores en un nivel de cero se produce
el negro y al contrario, si mezclamos los 3 valores primarios en su nivel máximo,
es decir 255, se obtiene el blanco.
2.3.2 Tratamiento gráfico

Al trabajar sobre publicaciones digitales los gráficos e imágenes requieren un
tratamiento especial. Generalmente, 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 cualquier usuario esperar minutos para poder acceder a la página y cuando
esto sucede, es muy probable que ni siquiera termine viéndola.
Por ello, existen varios formatos para el tratamiento de imágenes, cada uno
responde ciertas necesidades como se verá a continuación.
Formato GIF (Graphic Interchange Format ó Formato Gráfico Intercambiable)
El formato GIF es recomendable para imágenes con un área de color homogénea

y sin texturas complejas, debido a que su sistema de compresión se basa en
eliminar los colores innecesarios reduciendo la paleta de colores a 256 colores u 8
bits. Una de las ventajas de este formato es que desde un principio el usuario
puede ver la imagen, un poco borrosa, pero al finalizar la descarga ya se visualiza
correctamente. Y por última ventaja es que permite el uso de transparencia en los
colores, pero al aplicarlo en un fondo distinto a su color original, puede mostrar un
halo blanco no deseado, por lo que no es muy recomendable su uso a menos que
se haga un retoque exhaustivo de la imagen.

Uso del formato GIF Uso del formato JPEG
Formato JPEG (Joint Photographic Experts Group ó Estándar del grupo de

Expertos Fotográficos)
Este formato es muy utilizado por la compresión que hace de los archivos, el
tamaño final del archivo puede ser hasta 100 veces más pequeño, lo que permite
el uso de varias imágenes y gráficos dentro de las páginas web, mientras mayor
compresión haya en la imagen, menor será la calidad de la imagen y se mostrará
un ruido visual. Se utiliza generalmente para fotografías o gráficos con mucha
textura. También tiene la cualidad de mostrarse desde un principio siempre y
cuando se guarde como un jpeg progresivo, muy útil en su uso en html, sin
embargo cuando se utiliza en flash con vinculación externa, causa problemas en
su visualización.

Uso del formato JPEG Uso del formato GIF
Formato PNG (Portable Network Graphic ó Gráficos portátiles en red)
Este formato fue diseñado específicamente para su desempeño en la web, tiene

las mismas cualidades y sistema de compresión del formato GIF. Aún sigue en
desarrollo, algunos navegadores no permiten su correcta visualización, por lo que
no es muy recomendable su uso directamente en el html actualmente, se dice que
este formato revolucionará en la web, pero aún queda por verse. Su uso en Flash
resulta bastante atractivo por el tamaño final y se visualiza perfectamente en la
web.

Tema 3. Diseño de páginas web
Subtemas
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
Al término del tema el estudiante conocerá las bases del html y los elementos
multimedia que pueden ser aplicados en un sitio, como puede ser audio, video y
animaciones.
Sinopsis
El HTML siendo un lenguaje de programación, permite que el navegador
decodifique la información y la muestre en pantalla. Los navegadores cada vez
están más estandarizados y es más factible que el diseño de la página sea
constante, independientemente del navegador utilizado por el usuario.
Las imágenes, sonido, video, botones, le dan vivacidad y dinamismo a la página.

Haciendo un buen uso de estos elementos se puede lograr una mayor interacción
por parte de los usuarios.
Las animaciones, video y audio pueden brindarle un toque particular e identificador

al sitio, pero no hay que dejar a un lado las especificaciones técnicas y funcionales
para que su uso no sea contraproducente.
3.1 Lenguaje HTML

El HTML (Hyper Text Markup Language ó lenguaje de marcación de hipertexto),
es un lenguaje de programación, cuando alguien abre su navegador y ve una
página, no está viendo el código HTML directamente, sino el navegador interpreta
el código y lo despliega en la pantalla. Una buena noticia es que los navegadores
cada vez están más estandarizados y es más factible que el diseño de la página
sea permanente, independientemente del navegador utilizado por el usuario.
Tema 3. Diseño de páginas web 20

Para tener una vaga idea del HTML es necesario conocer un poco sobre
“gramática” y sintaxis. El código HTML está compuesto por banderas (tags) las
cuales contienen los atributos y valores de esos atributos, existen bastantes
banderas que se pueden incorporar en una página web, las banderas están
definidas por los siguientes signos <> como podrá ver a continuación.
Se puede escribir el código directamente en cualquier editor de texto; sin embargo,

actualmente existen muchos editores de html como Dreamweaver, los cuales
facilitan y agilizan el diseño de las páginas. Para poder darse una idea del código
detrás de las páginas abra el navegador, acceda a alguna página html y en: VER –
Código fuente. Se verá un texto similar a éste:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>GOAL & COACHING Consulting :: Mejora del Rendimiento y Coaching</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="web comercial de &#8217goal & coaching
consulting&#8217"><meta name="keywords" content="angel martorell, allard, ingeniería
del rendimiento, performance technology, rendimiento humano">
<link href="cuerpo.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"

marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><p> </p><table width="745" border="0">
<tr>
<td width="228" rowspan="9" align="center" valign="top"><img src="../img/cora.jpg"
width="200" height="202"></td>
<td width="507"><img src="../img/frase.gif" width="365" height="64"></td>
</tr>
<tr>
<td><img src="../img/line.gif" width="507" height="4"></td>

</tr>
<tr>
<td class="cuerpo"><font face="Courier New, Courier, mono"
size="3"><b>GOAL<font size="1">
</font>&</b></font> <font face="Verdana, Arial, Helvetica, sans-
serif">COACHING</font>
es una consultoría especializada en potenciar el rendimiento
de las organizaciones y, en consecuencia, en hacerlas más rentables.<br>
<td align="left" valign="top"><img src="../img/pal02.gif" width="31"
height="31"></td>
<td class="cuerpo">Valorar la dimensión.</td>
</tr>
</table></td>
</table></td>
</tr>
</table>
</body>
</html>
Una de las grandes ventajas del html, es que puede añadírsele audio,
animaciones, video, scripts, etc. Por lo tanto la página puede ser completamente
interactiva.
Etiquetas básicas
Este capítulo trata de las etiquetas primarias que se necesitan para dar una
estructura y características determinadas a nuestra página.
La mayor parte de ellas no son imprescindibles para poder mostrar información en

nuestra página, de hecho, un fichero de texto sin ninguna etiqueta puede ser
visualizado con el explorador.
Pero sí es conveniente que nos ajustemos a las normas HTML, para tener una
página correctamente definida. Además, en un futuro, algunas etiquetas que ahora

son meros formalismos, serán indispensables para que los navegadores puedan
manejar nuestras páginas de manera eficiente.
Este es el formato básico de un documento html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN">

<HTML>
<HEAD>
......
</HEAD>
<BODY>
......
</BODY>
</HTML>
Un documento html se divide en tres secciones principales, indicadas por las

etiquetas: <HTML>, <HEAD>, <BODY>. La primera abarca todo el documento
html. El head le agrega elementos de interactividad, asi como programación no
visible para los usuarios. El body representa todos los elementos visibles de
nuestro documento.
Cada sección de la página esta limitada por una etiqueta < > en el inicio y una
etiqueta </ > al final de cada instrucción. Por lo que siempre observaremos dos
etiquetas de cada sección. Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

GLOSARIO HTML
<!DOCTYPE>
EL W3C (World Wide Web Consortium: www.w3.org), encargado de la creación de

los Standard webs, define que los ficheros HTML, XML, XHTML deben tener una
declaración de tipo DOCTYPE que debe hacer referencia a una de las tres
definiciones del tipo de documento que existen.
Esta declaración debe ser la primera línea de nuestro documento y es necesaria

para decirle al navegador qué versión de HTML es la que se usa en la página. Si
no se hace, el navegador procesara la página en modo Quirks (modo de
compatibilidad) pudiendo no interpretar correctamente el código de la página.
La DTD (definición del tipo de documento) es la estructura reglamentaria, es decir,

los elementos y atributos que están disponibles para cada tipo de documento.
Para HTML 4.01 (las versiones anteriores no son recomendables debido a que no
son del todo compatibles con las Hojas de Estilo), existen 3 tipos de DTD:
1. HTML 4.01 transitorio

El HTML 4 transitorio incluye todos los elementos y cualidades de HTML 4
Strict pero agrega cualidades presentational, elementos desaprobados o
elementos obsoletos. Se llama Transitional porque está pensado como
transición hacia HTML 4 estricto.
El modo de definirla es:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"

\"http://www.w3.org/TR/html4/loose.dtd\">
2. HTML 4.01 Frameset:

Esta es una variante de HTML 4 transitorio para los documentos que utilizan
Frames (marcos).
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\"

\"http://www.w3.org/TR/html4/frameset.dtd\">

3. HTML ESTRICTO
Si declaramos este DTD el navegador pasará a actuar cumplimiento de los
estándares (Standards compílanse). Esto implicara que solo puedan usarse
las etiquetas de HTML 4.01. Este es el modo recomendado por el W3C, ya
que es compatible con el CSS y puede ser interpretado correctamente por
todos los navegadores, haciendo mucho más fácil el paso de nuestros
documentos al XHTML que muy posiblemente tienda a sustituir al HTML en
los próximos años.
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"

\"http://www.w3.org/TR/html4/strict.dtd\">
Si queremos saber si nuestra página cumple con el DTD definido podemos hacerlo
desde http://validator.w3.org/
<HTML> </HTML>
FUNCIÓN:
Esta etiqueta, no tiene otra función que indicar el comienzo y el final de los
documentos web. Por tanto, es la primera (si no se especifica la etiqueta
DOCTYPE) y la última etiqueta de una página web. Dentro de ella, estarán
contenidos tanto el encabezamiento como el cuerpo del documento.
Puede ser omitida sin que haya ningún problema en la interpretación de nuestra
página.
<HEAD> </HEAD>
FUNCIÓN:
Define la zona de cabecera de las páginas. Entre sus límites, se incluyen etiquetas
que dan información sobre nuestra página.
<TITLE> </TITLE>
FUNCIÓN:
Da título a la página. Este título es el que aparece el la parte superior de la
ventana y el que se muestra al minimizar dicha ventana (en la mayoría de los
navegadores).
Entre sus límites, sólo se admiten caracteres de texto; no podremos incluir ningún
otro elemento del lenguaje, ni tampoco etiquetas de estilo de fuente.

Cualquier etiqueta que escribamos dentro del título, será mostrada como si fuera
parte del texto.
Los títulos son etiquetas de cabecera, por lo tanto, sólo tienen sentido dentro de
las etiquetas <HEAD> y </HEAD>.
<BASE> </BASE>
Podemos utilizar esta etiqueta, para especificar los puntos de partida para
nuestros enlaces (HREF) y las ventanas de destino por defecto cuando usamos
marcos (TARGET).
Sólo puede incluirse en la cabecera de las páginas (<HEAD> </HEAD>).
ATRIBUTOS:
NOMBRE Efecto / Valores que acepta
HREF Determina un origen base para referencias a otras páginas.
Un URL o parte de él.
TARGET Asigna un marco de destino para las referencias de nuestra página.
Nombre de marco (frame).
<BODY> </BODY>
Encierra el contenido visible del documento. Toda la programación que se

encuentre encerrada entre estas etiquetas aparecera visiblemente en la página de
internet
<H1> <P> <BR>
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se

pueden definir seis niveles de titulares, el texto que deseamos que sea un titular
se pone entre las etiquetas <H1> Titular </H1>. Se definen mediante las etiquetas
<H1>.....</H1> hasta <H6>.....</H6>
<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras

características, digamos que se definen por las etiquetas <P>.....<P>. Esta
etiqueta, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola
"<P>" al final de un texto indicando que a continuación se quiere una línea en
blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y
cerrándola.
<BR>: Saltos de línea. Esta etiqueta sirve para realizar un salto de línea, puede
poner tantas como desee y realizará un salto de línea por cada una de ellas.

: Comentarios. Son directivas que nunca se mostrarán a través del
navegador y que le servirán para recordatorios en futuras revisiones del
documento.
Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!—Aquí va un comentario que no es

visualizado por el navegador -->
<P>Hola mundo, esta es un página con titular,

que tiene también un párrafo y unos cuantos
saltos de línea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Creación de enlaces
<A>
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o

su dirección URL) y el texto que servirá de punto de activación del otro
documento. Este segundo elemento será el que veamos en pantalla y que se
servirá del primero para saltar de documento.

Los enlaces se generan mediante la etiqueta <A>.....</A> y, a diferencia de los

vistos anteriormente, llevará siempre dentro de la etiqueta un atributo ya sea <A
HREF=""> o <A NAME="">.
<A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar

entre diferentes URLs. Ejemplo:
Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos

la directiva <A HREF="archivo2.html">Siguiente página</a>
Saltar de nuestra presentación a otra presentación web llamada

www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta
página</A>
<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar

nombre a una sección de nuestro documento. Ejemplo:
<A HREF="#parte1">Ir a la primera parte</A>

Ejemplos de enlaces:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>

<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>

URLs
URL: Localizador Universal de Recursos
Los URL son las direcciones de las informaciones que buscamos en Internet. Los
URL constan de tres partes:
Protocolo: Es el programa que utilizará el navegador para obtener el archivo

elegido. Les suena HTTP, FTP, Gopher...
Nombre del host: Se trata del sistema donde se encuentra almacenada la

información que buscamos.
Ruta del fichero: Se trata de la ubicación del archivo dentro del host.
http://www.udelondres.com/publico/saludos.html
Entre los principales tipos de URL destacan:
HTTP: Son los más populares ya que son los utilizados por los servidores de
WWW para mandar documentos a través de Internet.
FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan
el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado
para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras
páginas al servidor de internet. Como ya se puede imaginar en estos servidores se
almacenan los archivos que forman parte de nuestra presentación web.
File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el

navegador. No resulta muy interesante poner estos URL en nuestras
presentaciones puesto que otra persona que desde otro sistema apunte hacia este
URL, generalmente fallará en su intento y no podrá tener acceso a él.
Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo
de URL se abre la aplicación de correo electrónico de nuestro ordenador para
enviar un correo a la dirección hacia la que apunta el URL. La forma estandar es:
mailto:webmaster@udelondres.com.
News: Son URL de grupos de noticias, en estos servidores se almacenan

mensajes el los que se discuten sobre direfentes temas.

Ejemplo de URLs:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Diferentes tipos de URLs</H1>
Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.

<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:webmaster@bienvenidos.es">
mailto:webmaster@bienvenidos.es</a>.
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.
<br>
</BODY>
</HTML>

Listas
<UL> <OL> <LI>

Pueden darse cinco tipos diferentes de listas, cada uno con etiquetas distintas
aunque con alguna en común:
• Listas numeradas u ordenadas. Se engloban por las etiquetas <ol>.....</ol>

y cada elemento de la lista estará encabezado por la etiqueta <li> que puede
o no llevar la etiqueta de cierre </li>. Es conveniente que cada elemento de la
lista esté en una línea nueva aunque todo seguido consiga en la presentación
el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera
y sangra cada elemento en forma secuencial, aunque se introduzcan
modificaciones.
• Listas con viñetas o sin orden. Se engloban por las etiquetas <ul>.....</ul>
y cada elemento de la lista, también estará encabezado por la etiqueta <li>.
El resultado es que el navegador inserta viñetas (marcadores) delante de
cada elemento.
• Listas de menú y de directorio. Están en desuso puesto que su resultado

suele ser, prácticamente, idéntico al de las listas con viñetas.
• Menú. Englobadas por las etiquetas <menu>.....</menu> y cada elemento

encabezado por la etiqueta <li>.
• Directorio. Englobadas por las etiquetas <dir>.....</dir> y cada elemento

encabezado por la etiqueta <li>.
• Listas de glosario. Cada elemento de la lista está compuesto por un término

y una definición y cada una de estas partes tiene su propia etiqueta. Estas
listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la
etiqueta <dt> y para la definición la etiqueta <dd>. Generalmente el
navegador colocará término y definición en dos líneas diferentes pero esto se
puede evitar añadiendo a la etiqueta de apertura el atributo compact: <dl
compact>.
• Listas anidadas. Consiste en poner una lista dentro de otra, de manera que
la lista secundaria se derive respecto a la principal. Puede jugar con los
diferentes tipos de lista pero recuerde estructurar bien las etiqueta: Las
etiquetas de la lista principal englobarán todo el conjunto de las listas y las
etiquetas de las listas secundarías se cerraran antes de volver a la lista
principal. Ahora quizá le empiece a convenir espaciar el propio código
conforme lo va escribiendo en HTML.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>

Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
Estilos de carácter
<B> <U> <I>

Estos estilo son etiquetas que afectan a palabras o caracteres dentro de otras
entidades de HTML modificando el aspecto de ese texto para que sea diferente
del texto que lo rodea. Existen dos tipos de estilos:
a) Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el

como se va a formatear.
- <em>.....</em>: Indica que los caracteres estarán enfatizados de alguna

manera, generalmente en cursiva aunque dependerá del navegador.
- <strong>.....</strong>: Los caracteres tendrán mayor énfasis,

generalmente en negrita.
- <code>.....</code>: Muestra como una fuente monoespaciada,

generalmente Courier.
- <samp>.....</samp>: Muy similar a code.

- <kdb>.....</kdb>: Texto que el usuario debe escribir.
- <var>.....</var>: Nombre de una variable que deba ser reemplazada por

su valor real. Generalmente en cursiva o subrayada.
- <dfn>.....</dfn>: Se usa para resaltar una palabra que se va a definir.
- <cite>.....</cite>: Se usa para citas cortas.
b) Estilos físicos: Modifican la presentación real del texto.
- <b>.....</b>: Pone el texto en negrita.
- <i>.....</i>: Pone el texto en cursiva.
- <tt>.....</tt>: Pone el texto en fuente monoespaciada.
- <u>.....</u>: Subraya el texto afectado.
<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>
</BODY>
</HTML>

Texto preformateado
<PRE>
Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte
pero nos encontramos con una excepción a esta regla cuando utilizamos las
etiquetas <pre>.....</pre>. Sin embargo esta etiqueta convertirá el texto afectado a
fuente monoespaciada (posiblemente Courier).
Esta etiqueta se usaba para hacer tablas en versiones anteriores del lenguaje
HTML ahora su utilidad puede reducirse a convertir a HTML, rápida y fácilmente,
archivos de correo electrónico y publicaciones de grupos Usenet.

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Texto preformateado</H1>
Diferencia entre un texto normal y

un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
<PRE>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
</PRE>
</BODY>
</HTML>

Saltos y líneas
<HR> <BR>
• Líneas divisorias: Se crean con la etiqueta <hr> que no tiene etiqueta de

cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el
siguiente atributo <hr width="80%">.
• Saltos de línea: La etiqueta <br> inserta un salto de línea donde se coloque.

Puede colocar tantas como desee y se insertará un salto de línea por cada
una de ellas.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Saltos y lineas</H1>
<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">
----
<br><br><br>
----
</BODY>
</HTML>

Caracteres especiales
Es posible que en un momento dado deseemos insertar un carácter que no sea

ASCII en nuestro documento HTML. Muy probablemente, si lo creamos nosotros
con las combinaciones de teclas habituales no llegue a poder ser leído por otra
plataforma una vez publicado en Internet. Para solventar este conflicto, HTML
ofrece la posibilidad de insertar unas entidades de carácter que podrán ser
interpretados por todas las plataformas. Estas entidades pueden ser:
¾ Nombradas: Se suelen construir con el signo &, la abreviatura del carácter y

acabado con el signo punto y coma. El símbolo de registrado se construiría:
®
¾ Numeradas: Se construyen con los signos &#, el número correspondiente a

la posición del carácter en el conjunto ISO-Latin-1 (ISO-8859-1). El mismo
símbolo de registrado, sería ahora: ®
Existen unas entidades reservadas, exclusivamente, para caracteres usados en

etiquetas pero que nosotros no los pretendemos usar dentro de ninguna de ellas.
Estos son:
• signo <, entidad <

• signo >, entidad >
• signo &, entidad &
• signo ", entidad "

Ejemplos:
Número Nombre Apariencia

À À À
Á Á Á
È È È
É É É
Ì Ì Ì
Í Í Í
Ñ Ñ Ñ
Ò Ò Ò
Ó &Oacute Ó
Ü Ü Ü
à à à
á á á
è è è
é é é
ñ ñ ñ
Tablas
<TABLE> <TR> <TD>
Las tablas nos permiten representar y ordenar cualquier elemento de nuestra

presentación en diferentes filas y columnas de modo que podamos resumir
grandes cantidades de información de una manera que puede representarse
rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las etiquetas

<table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior
izquierda. Las columnas se calcularán automáticamente según las celdas que hay
en cada fila.
Cada fila de la tabla se indica mediante las etiquetas <tr>.....</tr>. Las etiquetas
<th> y <td> con sus correspondientes etiquetas de cierre, indican para indicar las

filas individuales dentro de cada fila. Las etiquetas <th>.....</th> indican que se
trata de celdas que sirven como encabezado de tabla y suelen visualizarse en
negrita. Las etiquetas <td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así,
dentro de cada etiqueta de celda podemos encontrar:
- El atributo align= define horizontalmente los datos al margen izquierdo (left),

al derecho (right) o centrado (center).
- El atributo valign= define verticalmente los datos en la parte superior (top), en

la parte inferior (bottom) o centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las
etiquetas <th> o <td> los atributos:
- rowspan = más un valor para indicar el número de filas que se quiere

abarcar.
- colspan = más un valor para indicar el número de columnas que se quiere

abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se complica

bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas
las filas y columnas que se quieren formar porque así tendrá mucho más claro los
valores que debe asignar a los atributos rowspan y colspan y las etiquetas a las
que hay que asignarlos.
Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el

espaciado entre celdas y el ancho de las mismas.
- width = Acompaña a <table> y especifica el ancho de la tabla, tanto en

número de pixeles como en porcentaje respecto al ancho de la pantalla.
También puede acompañar a las tags <th> o <td> para especificar el ancho
de las columnas.
- Border = Anteriormente, ya hemos hablado de este atributo. Ahora le

diremos que puede darle un valor que indicará el ancho del borde en pixeles.
Border="0" indicaría la ausencia de borde.
- Cellspacing = Suele acompañar a la tag <table>. Indica el número de pixeles

que separan cada celda. El valor predeterminado suele ser 2.

- Cellpadding = También acompaña a la tag <table>. Indica el espacio en

pixeles entre el borde de la celda y su contenido. El valor predeterminado
suele ser 1.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">

<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>

<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Imágenes
<IMG>
El uso de imágenes es uno de los factores que ha popularizado tanto World Wide
Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de
tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o
PNG. Las imágenes en línea, se especifican a partir de la etiqueta <img> que no
tiene una etiqueta correspondiente de cierre pero que puede acompañarse de los
siguientes atributos:
1. src = Este atributo es obligatorio e indica el nombre del archivo de imagen

(entre comillas) o la URL que se va a representar.
2. Align = Permite controlar la alineación de una imagen con respecto a una

línea de texto adyacente o a otras imágenes en esa línea. Los tres valores
posibles son los ya conocidos left, right, top, middle y bottom.
3. Alt = Es la alternativa que se estableció cuando todavía existían

visualizadores de solo texto. Entre comillas podremos escribir un texto que
suplantara a esta imagen si no se carga o mientras se carga o cuando,
visualizando ya la imagen, pasamos el ratón por encima.
4. WIDTH = Este atributo es opcional pero es recomendable ponerlo para

ayudar al navegador a representar la imagen, significa el ancho de la imagen
que vamos a representar.
5. HEIGHT = Al igual que el atributo WIDTH, es opcional y recomendable

ponerlo, este significa el alto de la imagen.
6. BORDER = Con BORDER especificamos el ancho de un borde que rodea la

imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un

bebé">
Mapas de imágenes
<MAP> <AREA>

Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede
hacer un mapa sobre la imagen de manera que secciones de la imagen sean
enlaces. Las etiquetas usadas para esto son:
1. Las etiquetas <map>.....</map> identifican que vamos a crear un mapa de

imágenes. Generalmente, lleva asociado el atributo name= al que le sigue
entre comillas el nombre del mapa.
2. La etiqueta <area> define las áreas que vamos a poder activar en esa
imagen. A esta tag le acompañan los siguientes atributos:
a) shape = Entre comillas estableceremos el tipo de área a definir. Puede

tratarse de rect (rectangular), poly (poligonal) o circle (circular).
b) Coords = Entre comillas indicaremos los pares de coordenadas de cada

punto del área a activar. Estas coordenadas las podemos averiguar
utilizando un programa de edición de imágenes. En las áreas
rectangulares deben especificarse las coordenadas de la esquina
superior izquierda y las de la esquina inferior derecha. En las
poligonales especificaremos las coordenadas de todos los vértices del
área. En las circulares indicaremos las coordenadas del centro del
círculo y el valor del radio.
c) Href = Como ya sabe, indica la dirección, entre comillas, de la página

web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa,
además de el código anteriormente descrito, debe incluir en la etiqueta de imagen
correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".
Formularios
<FORM>
La Web se ha convertido en una poderosa arma para las empresas que se

dedican a realizar encuestas y los formularios han sido una de las herramientas
que han ayudado a este auge.
Los formularios nos van a permitir, desde dentro de una presentación web,
solicitar información al visitante. Estos formularios estarán compuestos por tantos
campos como informaciones queramos obtener. Una vez introducidos los valores
en estos campos serán enviados a una URL donde se procesará toda esta
información.

Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas etiquetas
que lo especifiquen. La declaración de formulario queda recogida por las etiquetas
<form>.....</form> y dentro de ellas se recogerán todas las variables de entrada.
A la etiqueta de apertura <form> le acompañarán estos atributos:
Action = "" Entre comillas se indica el programa que va a tratar las variables
enviadas con el formulario, un guión CGI o la URL mailto.
Method ="" Indica el método de transferencia de las variables. Post, si se envía a

través del STDIO. Get, si se envía a través de la URL.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
Campos de entrada
<INPUT>
La etiqueta <input> define la introducción de variables. Junto a esta etiqueta

encontraremos los siguientes atributos:
- type ="" Indicará el tipo de variable a introducir.
- text Indica que el campo a introducir será un texto. Sus atributos:

- maxlenght ="" Seguido de un valor que limitará el número máximo de

caracteres a introducir en ese campo.
- size ="" Seguido de un valor que limitará el numero de caracteres a mostrar

en pantalla.
- value ="" Indica que no hay valor inicial del campo.
- Password. Indica que el campo a introducir será una palabra de paso.

Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los
mismos que para text.
- Checkbox. El campo se elegirá marcando de entre varias opciones una

casilla cuadrada.
- value ="" Entre comillas se indicará el valor de la casilla.
- checked. La casilla aparecerá marcada por defecto.
- Radio. El campo se elegirá marcando de entre varias opciones una casilla

circular.
- value ="" Entre comillas se indicará el valor de la casilla.
- Image. El campo contendrá el valor en coordenadas del punto de la imagen

que haya elegido. Atributo obligatorio:
- src ="" Entre comillas escribiremos el nombre del archivo de imagen.
- hidden. El visitante no puede modificar su valor ya que no está visible. Se

manda siempre junto al atributo value= seguido de su valor entre comillas.
- Name =”” Indicará el nombre que se asigna a un determinado campo.

<HTML>
<HEAD>
</HEAD>
<BODY>
Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche
<BR><BR>
</FORM>
</BODY>
</HTML>
Campos de selección
<SELECT>
Las etiquetas <select>.....</select> encierran los valores que podremos elegir a

partir de una lista. Los atributos que acompañan a la etiqueta de apertura son:
- name ="" Indicará el nombre del campo de selección.
- size ="" Indicará el número de opciones visibles. Si le asignamos 1, la

selección se presentará como un menú desplegable. Si le asignamos un
valor mayor se presentará como una lista con barra de desplazamiento.
- multiple Indica si se pueden realizar multiples selecciones.

Las diferentes opciones de la lista se indicarán mediante la etiqueta <option> que

puede acompañarse del atributo selected para indicar cual es la opción que
aparecerá por defecto. Si no lo especificamos, siempre será la primera de la lista.
<HTML>
<HEAD>
</HEAD>
<BODY>

<SELECT NAME="Colores" MULTIPLE>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
<SELECT NAME="Colores" SIZE="1">
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>
<BR><BR>
</FORM>
</BODY>
</HTML>

Areas de texto
<TEXTAREA>
Con las etiquetas <textarea>;.....</textarea> definimos un texto de múltiples líneas
para que el visitante pueda incluir un comentario junto a sus datos.
Junto a la etiqueta de apertura pueden aparecer los siguientes atributos:
- name ="" Nombre del campo.
- Cols ="" Numero de columnas de texto visible.
- Rows ="" Numero de filas de texto visible.
<HTML>
<HEAD>
</HEAD>
<BODY>

<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
</FORM>
</BODY>
</HTML>

Botones
Se definen mediante la etiqueta <input> a la que le acompañan los atributos:
• type ="" Seguido de submit para enviar los datos del formulario y seguido de
reset para borrar los datos que se han introducido.
• Value ="" Indica el texto que incorporaran los botones. Normalmente, enviar y
borrar.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
</FORM>
</BODY>
</HTML>
Frames
Las páginas web que están hechas con frames se componen de una declaración
de los marcos y tantas páginas en formato HTML corriente como distintas
divisiones hemos definido. La declaración o definición de frames es la única
página que realmente debemos aprender, puesto que las páginas que se van a
visualizar en cada uno de los cuadros son ficheros HTML de los que venimos
aprendiendo anteriormente en este manual.
Dicha definición está compuesta por etiquetas <FRAMESET> y <FRAME>, con las
que se indicamos la disposición de todos los cuadros. La etiqueta <FRAMESET>

indica las particiones de la ventana del navegador y la etiqueta <FRAME> indica

cada uno de los cuadros donde colocaremos una página independiente.
Las particiones que se pueden hacer con un <FRAMESET> son en filas o

columnas. Por ejemplo, podríamos indicar que deseamos hacer una división de la
página en dos filas, o dos columnas, tres filas, etc. Para indicar tanto la forma de
partir la ventana -en filas o columnas- como el número de particiones que
pretendemos hacer, se ha de utilizar el atributo COLS o ROWS. El primero sirve
para indicar una partición en columnas y el segundo para una partición en filas.
Nota: Es importante indicar que no se puede hacer una partición en filas y

columnas a la vez, sino que debemos escoger en partir la ventana en una de las
dos disposiciones. Más adelante indicaremos cómo partir la ventana tanto en filas
como en columnas, que se hace con la anidación de frames.
En el atributo COLS o ROWS – sólo podemos elegir uno de los dos – colocamos
entre comillas el número de particiones que deseamos realizar, indicando de paso
el tamaño que va a asignarse a cada una. Un valor típico de estos atributos sería
el siguiente:
¾ cols="20%,80%"
Indica que se deben colocar dos columnas, la de la izquierda tendría un 20%
del espacio total de la ventana y la de la derecha un 80%.
¾ rows="15%,60%,25%"
Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio
total, la del medio con un espacio correspondiente al 60% del total y la de
abajo con un 25%. En total suman el 100% del espacio de la ventana.
Además del porcentaje para indicar el espacio de cada una de las casillas,
también podemos indicarlo en pixeles. De esta manera.
¾ cols="200,600"
Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y
la de la derecha 600. Esto está bien si nuestra ventana tiene 800 pixels de
ancho, pero esto no tiene porque ser así en todos los monitores de los
usuarios, por lo que este modo de expresar los marcos es importante que se
indique de la siguiente manera.
¾ cols="200,*"
Así indicamos que la primera columna ha de medir 200 pixels y que el resto
del espacio disponible -que será mayor o menor dependiendo de la definición
de la pantalla del usuario- se le asignará a segunda columna.

En la práctica podemos mezclar todos estos métodos para definir los marcos de la
manera que deseemos, con pocentaje, con pixels o con el comodín (*). No importa
cómo se definan, la única recomendación es que uno de los valores que
indiquemos sea un asterisco, para que el área correspondiente a dicho asterisco o
comodín sea más o menos grande dependiendo del espacio que tenga la ventana
de nuestro navegador. Otros métodos de definir filas y columnas, atendiendo a
este consejo, serían los siguientes:
¾ rows="100,*,12%"
Definimos tres filas, la primera con 100 pixels de ancho, la segunda con el
espacio que sobre de las otras dos, y la tercera con un 12% del espacio total.
¾ cols="10%,50%,120,*"
Estamos indicando cuatro columnas. La primera del 10% del espacio de la
ventana, la segunda con la mitad justa de la ventana, la tercera con un
espacio de 120 pixels y la última con la cantidad de espacio que sobre al
asignar espacio a las demás particiones.
Una vez hemos indicado el número de filas o columnas y el espacio reservado a

cada una con la etiqueta <FRAMESET>, debemos especificar con la etiqueta
<FRAME> la procedencia de cada uno de los frames en los que hemos partido la
ventana.
Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las
filas o columnas. De esta manera.
<FRAME src="marco1.html">
Así queda indicado que el frame que estamos definiendo debe mostrar la página
marco1.html en su interior.
La etiqueta OBJECT
Con objeto de normalizar la inclusión de ficheros no nativos en los navegadores

web se decidió sustituir las diferentes etiquetas que realizaban este papel
(APPLET, BGSOUND, EMBED, etc.), y que no pertenecían a los estándares web,
por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo
de ficheros. La etiqueta elegida en el estándar HTML 4.0 fue OBJECT, a la que se
dotó de suficientes atributos y flexibilidad para poder realizar correctamente su
trabajo. Debido a esto, la propuesta ha sido usar la etiqueta object también para
incluir ficheros de audio de todo tipo en las páginas web.
De este forma, Internet Explorer a realizado su propia implementación de la

etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX

específicos para los ficheros de mayor impacto. Por su lado, los navegadores
Netscape no soportan correctamente este etiqueta para ficheros de este tipo.
Como regla general, válida no sólo para incrustar ficheros de sonido, sino también
para otros tipos, la etiqueta object va a definir un objeto o componente externo
encargado de la reproducción del fichero, que en el caso de Internet Explorer
suele ser algún tipo de control ActiveX. Mediante object se instancia el objeto, se
declara su URL y sus principales propiedades generales, y mediante un conjunto
de etiquetas especiales, PARAM, se le van pasando los valores que necesita para
su correcto funcionamiento o para su configuración deseada.
La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es del

tipo:
<object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">

<param name="nombre" value="valor">
<param name="nombre" value="valor">
...
</object>
Los principales atributos de object, en referencia a ficheros de audio, son:
- classid="identificador_objeto", que fija la URL del objeto o

componenteexterno necesario para reproducir el fichero de audio, y la
implementación CLSID de los controles ActiveX necesarios.
- type="tipo_fichero", atributo importante, que declara el tipo de fichero de

audio que estamos usando.
- width="w", que determina el ancho visible de la consola, en pixels.
- height="h", que determina el alto visible de la consola, en pixels.
- align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/ab
sbotom", análogo al de la etiqueta IMG, define la alineación horizontal o
vertical de la consola respecto de los elementos de la página.
- hspace="hs", que establece la separación horizontal, vspace="vs", que

establece la separación vertical, en pixels, entre la consola y los elementos
de la página que la redean. Análoga a sus equivelentes de la etiqueta IMG.

- autostart="true/false", que determina si el fichero de audio debe empezar a

reproducirse por sí sólo al cargarse la página o si por el contrario será preciso
la actuación del usuario (o de código de script) para que comience la
audición.
- standby="mensaje", que presenta en pantalla un mensaje al usuario

mientras el fichero se carga.
En cuanto a los elementos param, los más importantes son:
- param name="FileName" value="ruta_fichero", determina la ruta o URL

del fichero de audio a reproducir. No es necesario utilizar sólo ficheros WAV o
MID, pudiendo reproducirse también ficheros MP3 o Real Audio. El
reproductor del primero lo incluye Explorer en ActiveMovie (componente de
Windows Media).
- param name="autostart" value="true/false", indica al navegador si se

debe empezar a reproducir el sonido automáticamente al cargar la página o
si por el contrario será preciso que el usuario pulse el botón Play para ello.
No son estos todos los atributos y parámetros posibles. Es más, en cuanto nos
metemos en componentes Microsoft, podemos encontrarnos multitud de
configuraciones posibles, que nos van a permitir fijar muchos aspectos de los
mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos
componentes y propiedades que necesite, pero sabiendo que con los elementos
vistos arriba tenemos más que suficiente para presentar un fichero de audio en
nuestra página web. Ejemplo:
<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
width="150" height="175" type="audio/midi">
<param name="FileName" value="../sonidos/xfiles.mid">
<param name="autostart" value="true">
</object>>

La etiqueta A
Vamos a ver ahora cómo podemos implementar audio mediante el uso de una de
las etiquetas más polivalentes en HTML: la etiqueta A.
Efectivamente, los enlaces son la base del hipertexto, base a su vez de la web, y
dentro de sus múltiples usos podemos considerar el enlace a ficheros de audio. El
fichero enlazado puede ser interpretado directamente por el navegador (porque
sea de reproducción directa o se tenga instalado el plugin adecuado) o puede ser
ejecutado por un programa independiente que se abra automáticamente (Winamp,
Real Audio, etc.), siendo este el caso más común. Si el usuario no dispone del
programa o plugin adecuado, se le abrirá una ventana de descarga del fichero,
con lo que podrá guardarlo hasta disponer de la aplicación necesaria para su
reproducción.
La sintaxis general en este caso será del tipo:

<a href="ruta_ archivo ">Mensaje</a>
Ejemplo de archivo MIDI:
<a href="../sonidos/watermark.mid">Música para tí</a>
Ejemplo de archivo MP3:
<a href="../sonidos/mp3.mp3">Maroon5</a>
3.2 Creación de botones y animaciones

Las imágenes, sonido, video, botones, hacen que la página sea vívida y deje atrás
la estática. Haciendo un buen uso de estos elementos se puede lograr un efecto
de alta tecnología.
Un aspecto importante al implementar animaciones dentro del sitio web es el

tiempo de descarga, cabe recordar de nada sirve el tener una animación
impresionante si el tiempo de descarga es elevado y el usuario final nunca la
observa. Otro punto a tomar a consideración es la especificación de los plugins,
como puede ser el de flash o shockwave y en algunas ocasiones es necesario
para el correcto funcionamiento de algunos botones los applets.

Los GIF´s animados son un conjunto de imágenes que dan la ilusión de

movimiento, como aquellos libros o cuadernos donde pasas las hojas rápidamente
y se observa el movimiento de la caricatura, así es como trabajan los GIFS
animados y algunas animaciones hechas en Flash. Estas animaciones en GIF
pueden realizarse en programas como Photoshop o Fireworks. Ejemplos de estos
GIF´s animados se pueden observar en las caritas del Messenger.
Para los botones pasa lo mismo, son dos imágenes o tres, una cuando está
estático, otra cuando se pasa sobre de él y por último cuando se presiona, este
tipo de animación se puede realizar en Fireworks o Flash, cada programa tiene
una forma distinta de hacer funcionar las acciones de los botones, pero
básicamente siguen un mismo fin, abrir o desplegar otra página. Esta acción se le
da a cada uno de los botones, por ejemplo en flash se le daría la siguiente acción
a cada uno de los botones:
on (press) {
getURL(http://www.macromedia.com);
}
En donde se le dice que cuando lo presionen, vaya al siguiente URL.
Botón amarillo sin

presionar
Botón amarillo
presionado
3.3 Uso de sonido

El audio puede darle un toque particular e identificador al sitio, el añadir sonido a
cualquier página no aplica, todo depende de las necesidades y lo que desea
expresar la empresa, producto u organización.
Existen básicamente dos aplicaciones de sonido:

- Audio que suena cuando se accede al sitio

- Sonidos que suenan cuando le dan clic a algo (generalmente botones)
Por desgracia, el audio tiene ciertas desventajas, una de ellas es el peso de los
archivos, otro es por parte del usuario, necesita tarjeta de sonido y bocinas y
finalmente el usuario visitante de estas páginas generalmente requiere de un
ancho de banda amplio, la tendencia es que vean el sitio desde su trabajo o
escuela y acceder a un sitio donde tiene sonido como fondo no es muy agradable.
Para ello la solución es poner siempre un control donde puedas activar o
desactivar el audio.
Existen varios formatos de audio aplicables a la Web, cuatro de ellos son los más
comunes, por lo tanto son más compatibles, cada uno se describirá a
continuación.
¾ MIDI (Musical Instrument Digital interface)

El archivo MIDI contiene música sintetizada, se pueden encontrar los
archivos o crear la música, es una buena opción por el poco peso del audio.
¾ AIFF (Audio Interchange File Format)

Los archivos AIFF pueden ser sonidos o música, este archivo es el más
común en Macintosh y puede abrirse en la mayoría de los sistemas.
¾ WAV (As in Wave)

Wav provee una gran calidad en los archivos pero por desgracia es
compatible solo con Windows.
¾ MP3 (Multimedia Protocol v.3)

Mp3, una revolución en cuanto a la calidad y compresión de los archivos,
compatible con todos los sistemas operativos.
Ya sea en html o flash se puede implementar el audio, últimamente para agilizar el

tiempo de descarga en flash, se hace la vinculación externa, la cual es una muy
buena opción.
En la red se pueden encontrar infinidad de sonidos, existen programas donde uno

mismo los puede crear, por ello es necesario definir exactamente qué es lo que se
desea, el tiempo para desarrollar el proyecto y los costos, para tomar la decisión
más adecuada y efectiva. Un ejemplo en donde el audio toma un papel
protagónico, lo podemos encontrar en los siguientes sitios:

http://www.mariaclaudiacortes.com
http://www.bacardidj.com

3.4 Uso de video

El video puede ser un elemento multimedia bastante práctico en el caso
adecuado. Por lo general es utilizado en la intranet, para enseñarles a los
visitantes un concepto o un proceso, esto debido a que en la intranet
generalmente se posee de banda ancha, lo que permite una ágil visualización.
Si uno busca videos en la red, encontrará pocos y esto se debe a que por más
comprimido y a baja resolución que esté el video, los archivos son generalmente
bastante pesados, además de requerir ciertos plug ins en algunos casos.
Una de las ventajas de flash MX es que puedes editar y comprimir los videos,
además de que no necesita el usuario instalar otro plug in en su equipo, siendo
bastante amigable para el diseñador así como para el usuario.
Algunos de los formatos utilizados en el video son los siguientes:
- AVI (Audio vides Interleave)
Este formato es bastante utilizado por su estándar, debido a que la mayoría de los
equipos con sistema operativo Windows, lo reconoce.
MPEG (Motion Picture Experts Group)
Actualmente éste tipo de formato es la mejor opción, una de las razones es por su
compatibilidad en las diversas plataformas y la otra es por su sistema de
compresión muy parecido al JPEG en donde el archivo reduce su tamaño
considerablemente.
QUICKTIME
El formato Quick time, originalmente era el estándar de Macintosh, ahora también

lo reconoce Windows. Reproduce los archivos con buena calidad, la desventaja es
que los usuarios requieren descargar el plug in.

Se mostrarán a continuación algunos sitios donde el uso del video es la mejor

opción.
http://www.fordvehicles.com/cars/mustang/launch
http://www.starfox.com/
3.5 Creación del Sitio Web
Todo proyecto requiere un proceso el cual se verá brevemente a continuación

para la creación de un sitio Web.
Definición del sitio y planificación
Se definirán los objetivos y metas a largo y corto plazo, así como se recolectará
toda la información necesaria para realizar el proyecto definiendo tiempo de

realización y costos. Con todo el contenido en las manos se empezará a ver qué
apoyo interactivo y funcional requiere el sitio.
Arquitectura
La organización y el orden jerárquico de la información permite realizar ciertos

prototipos de navegación, éstos prototipos no son elaborados, simplemente sirven
para ver qué tal funciona el orden del contenido y la estructura de navegación
elegida.
Diseño
El sitio comienza a tener forma, es momento de ver las imágenes, acomodo de

textos, retículas y en sí empezar con el diseño de cada una de las páginas
componentes del proyecto. Definir imágenes, audio y video cuando se requieren.
Construcción
Solo queda poner manos en el proyecto, se tienen todos los elementos y

herramientas para trabajar sobre el sitio, terminando el proyecto no olvidar probar
absolutamente todo, enlaces, despliegue de imágenes, textos, etc.
Es muy común encontrar presentaciones donde no prueban anteriormente el

proyecto y justo en plena junta salen a relucir los detalles.
Mantenimiento
Algunos sitios requieren mantenimiento constantemente, para mostrar nuevas

publicaciones, noticias, cuando se diseña una nueva página dentro del mismo sitio
no hay que olvidar respetar el diseño inicial, dejando todo unificado.

Bibliografía general
- Principios de diseño básicos para la creación de sitios web. Lynch, Patryck,

Gustavo Gili (2002). Barcelona.
- Html Complete. Sybex (2002). Estados Unidos.
- a Mínima. Lynch, Patryck, Gustavo Gili (2002). Barcelona.
- Designing web Usability. Nielsen, Jakob, New Riders Publishing (2002).

Estados Unidos.
Bibliografía general 63

Bases Pag Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bases Pag Web

Cargado por

Copyright:

Formatos disponibles

Bases del Diseño de

Licenciatura en Diseño Gráfico

Tema 1. Planificación para el Diseño de páginas Web 4

Tema 2. Especificaciones Técnicas 9

Tema 3. Diseño de Páginas Web 20

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

1.1 Objetivos del proyecto Web

La navegación fluida del sitio es importante, para ubicar al usuario dentro de la

1.1Objetivos del proyecto web

Entre estos objetivos podríamos ubicar algunas de estas cuestiones: ¿Cuál es el

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

1.2Arquitectura y organización del contenido

Dentro de la organización del contenido se puede empezar a visualizar un poco la

Para una rápida y fácil visualización de los contenidos y su jerarquía se puede

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

Es la forma más simple de organizar la información, debido a que es

Este tipo de estructura consta básicamente de una página principal, a partir de

Este tipo de navegación es una combinación entre la estructura secuencial y la de

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

La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un

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

La mayor parte de los sitios utiliza más de una estructura de navegación,

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

Tema 2. Especificaciones técnicas

2.1 Relación equipo usuario – diseño

La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el

Otra de las especificaciones a tomar en cuenta en el diseño, son las imágenes y

Tema 2. Especificaciones técnicas 9

2.1 Relación equipo usuario – diseño

1. Resolución del monitor

Actualmente se diseñan las páginas conforme a estos estándares, sin

Cada navegador despliega la información según la reconoce, por ello es que

Es muy importante saber qué tipo de usuarios navegará el sitio, porque de

Tema 2. Especificaciones técnicas 10

4. Uso de plug ins

2.2 Tipografía y legibilidad en la Web

Muchas ocasiones se encuentran páginas donde el diseño experimental

Ejemplo uso de tipografía donde lo estético predomina al contenido.

Tema 2. Especificaciones técnicas 11

La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el

Ejemplo uso de puntos básicos, remarcados en naranja

2.2.1 Tipografía en la Web

Tema 2. Especificaciones técnicas 12

Uno de los aspectos importantes en la tipografía aplicada al diseño digital es el

Ejemplo uso de serif http://art.teleportacia.org/exhibition/online_newspapers/FAZ

Tema 2. Especificaciones técnicas 13

Ejemplo uso de sans serif

2.2.2 CSS y alfabetos por defecto

Uno de los avances sobre el control en la visualización de la tipografía en el

Es muy práctico el uso de las CSS, ahorra tiempo y si es usado correctamente

Cuando no se hace uso de las cascadas de estilo, al menos pueden tenerse en

Tema 2. Especificaciones técnicas 14

Windows Mac Extras de Microsoft Navegadores

Arial Charcoal Andale Mono Andale Mono

2.2.3 Tipografía píxel

Ejemplo tipografía tipo “pixel” encuadra perfectamente en la retícula

Tema 2. Especificaciones técnicas 15

2.3 Color e Imagen en la Web

Los monitores de computadora se componen de puntos llamados píxeles. Estos

2.3.1 Modelo RGB

Tema 2. Especificaciones técnicas 16

Las diferentes mezclas y proporciones de estos colores primarios generarán los

2.3.2 Tratamiento gráfico

Formato GIF (Graphic Interchange Format ó Formato Gráfico Intercambiable)