Bases Pag Web PDF

Bases del Diseo de
Pginas Web
Bloque Especializado
Compilador:
Lic. Ingrid Riquelme Ramrez
Licenciatura en Diseo Grfico

CONOCERSE ACEPTARSE AMARSE CUIDARSE SUPERARSE TRANSMITIR TRANSFORMAR
Bases del Diseo de Paginas Web
ndice
ndice 1
Introduccin 2
Objetivo general 3
Tema 1. Planificacin para el Diseo de pginas Web 4

Objetivo de aprendizaje 4
Sinopsis 4
1.1 Objetivos del proyecto Web 4
1.2 Arquitectura y organizacin del contenido 5
1.3 Estructura de la navegacin 5
Tema 2. Especificaciones Tcnicas 9

Sinopsis 9
2.1 Relacin equipo usuario diseo 10
2.2 Tipografa y legibilidad en la Web 11
2.2.1 Tipografa en la Web 12
2.2.2 CCS y alfabetos por defecto 14
2.2.3 Tipografa Pxel 15
2.3 Color e Imagen en la Web 16
2.3.1 Modelo RGB 16
2.3.2 Tratamiento grfico 17
Tema 3. Diseo de Pginas Web 20

Sinopsis 20
3.1 Lenguaje HTML 20
3.2 Creacin de botones y animaciones 56
3.3 Uso de sonido 57
3.4 Uso de video 60
3.5 Creacin del Sitio Web 61
Bibliografa general 63
ndice 1
Introduccin
Dentro de la www podemos encontrar una cantidad impresionante de sitios Web
inefectivos, anteriormente podra achacarse a la inflexibilidad del lenguaje HTML,
sin embargo, actualmente se cuentan con numerosas herramientas para disear
un sitio Web efectivo. Entre los elementos primordiales a tomarse en cuenta para
el buen diseo de un sitio estn: la organizacin empresa, el usuario y ciertas
especificaciones funcionales - tcnicas.
Introduccin 2
Objetivo general
Al trmino del curso el estudiante aplicar los fundamentos del diseo grfico en la
creacin de pginas Web que favorezcan la atraccin del cliente a partir de la
organizacin de la informacin, investigacin de necesidades y por ltimo
aplicacin de programas para el diseo de sitios Web.
Objetivo general 3
Tema 1. Planificacin para el diseo de pginas web
Subtemas
1.1 Objetivos del proyecto Web

1.2 Arquitectura y organizacin del contenido
1.3 Estructura de la navegacin
Objetivo de Aprendizaje
Al trmino del tema el estudiante investigar, jerarquizar y orgnaizar la
informacin para facilitar la navegacin, mantenimiento y revisiones posteriores
del sitio.
Sinopsis
La organizacin de la informacin es parte fundamental para un diseo funcional.
Definir desde un principio todo el contenido ayudar posteriormente a jerarquizar
la informacin dando como resultado un mayor conocimiento del proyecto y
atender las necesidades especficas del mismo fijndose objetivos a corto o largo
plazo.
La navegacin fluida del sitio es importante, para ubicar al usuario dentro de la

pgina, dndole importancia a ciertos contenidos o no. Para saber qu estructura
es la mejor opcin es necesario tener la informacin a la mano, por ello, esto es un
proceso de recoleccin y organizacin de los contenidos.
1.1Objetivos del proyecto web

Tomando en cuenta la informacin y lo que desea el cliente se deben fijar mnimo
tres objetivos a alcanzar con este proyecto, el disear un sitio no es poner
simplemente en la red una pgina esttica, 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 podramos ubicar algunas de estas cuestiones: Cul es el

propsito de este sitio? A quines queremos llegar? Qu estrategias de
comunicacin se integrarn? Con algunas de estas interrogantes podramos
definir algunos objetivos finales.
Tema 1. Planificacin para el diseo de pginas web 4

1.2Arquitectura y organizacin del contenido

La definicin de los objetivos nos conlleva al siguiente paso: obtener la
informacin necesaria para alcanzarlos. Hacer una lista detallada de la
documentacin existente y la faltante, nos ayudar en la estructuracin de la
informacin, por lo tanto, podremos llevar un calendario adecuado para el
proyecto, evitando perder tiempo posteriormente.
Dentro de la organizacin del contenido se puede empezar a visualizar un poco la

estructura de la pgina, debido a que aqu se definen los temas principales,
subtemas y la informacin persistente en todo el sitio, tambin se define qu tipo
de herramientas sern utilizadas, dependiendo del apoyo requerido por el
contenido, como podran ser animaciones, video, formularios, etc. Por ello es
necesario conocer a fondo los contenidos del proyecto.
Para una rpida y fcil visualizacin de los contenidos y su jerarqua se puede

realizar un mapa de sitio, como lo vern en la grfica siguiente:
1.3Estructura de la navegacin
Al tener todo el contenido se procede a disear la estructura de navegacin, sta
es bsicamente un diagrama de flujo de la informacin. Existen cuatro estructuras
de navegacin, las cuales se vern una por una a continuacin.

Secuencia
Es la forma ms simple de organizar la informacin, debido a que es

completamente secuencial, generalmente es utilizada para contenidos educativos
o presentaciones donde el contenido se va dando paso a paso.
Jerarqua
Este tipo de estructura consta bsicamente de una pgina principal, a partir de

sta se va desglosando la informacin, dependiendo de su orden de importancia,
generalmente es utilizado para proyectos institucionales.
Retcula
Este tipo de navegacin es una combinacin entre la estructura secuencial y la de

jerarqua, ordena la informacin categricamente; es utilizada generalmente para
uso acadmico.

Telaraas
La telaraa es utilizada bsicamente para usuarios avanzados, pues tienen un

completo dominio sobre la informacin, pueden vincularse de cualquier parte del
sitio sin haber un orden jerrquico, para los usuarios principiantes resulta ser muy
confuso este tipo de navegacin.

La mayor parte de los sitios utiliza ms de una estructura de navegacin,

dependiendo de los requerimientos de despliegue de la informacin. Se puede
decir que mientras mayor sea el grado de complejidad se tender al uso de
estructuras tipo telaraa y a mayor simplicidad se usar la secuencial.

Tema 2. Especificaciones tcnicas
Subtemas
2.1 Relacin equipo usuario diseo

2.2 Tipografa y legibilidad en la Web
2.2.1 Tipografa en la Web
2.2.2 CCS y alfabetos por defecto
2.2.3 Tipografa Pxel
2.3 Color e Imagen en la Web
2.3.1 Modelo RGB
2.3.2 Tratamiento grfico
Al trmino del tema el estudiante considerar especificaciones que deben tomarse
en cuenta en la realizacin de una pgina Web, as como, el uso correcto de
tipografas y herramientas para el tratamiento grfico.
Sinopsis
Antes de iniciar con cualquier proyecto se deben tener en cuenta algunas
especificaciones tcnicas sobre el equipo de nuestros usuarios para la correcta
visualizacin y funcionamiento del sitio, entre esas especificaciones tcnicas
podemos encontrar el tipo de navegador, si utiliza mdem o banda ancha y hasta
el tipo de letra a utilizar en el diseo de la pgina.
La legibilidad en pantalla e impresos difiere sustancialmente. En pantalla el

usuario tiende a reducir el nmero de palabras que lee. Para lograr la retencin
hay unos puntos bsicos a desarrollar en la mayora de los sitios web. El mantener
el control de la tipografa sobre el diseo Web resulta un poco difcil, en una buena
parte de las ocasiones no se sabe cmo se ver exactamente la tipografa 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 tipografas son
desplegadas en la mayora de los navegadores.
Otra de las especificaciones a tomar en cuenta en el diseo, son las imgenes y

grficos, debido a que requieren un tratamiento especial, puesto que la publicacin
es digital y no impresa. Lo que se busca de un sitio es que sea dinmico y
atractivo, pero sobre todo, que descargue rpidamente, es incmodo para el
usuario esperar minutos para poder acceder a la pgina y cuando esto sucede, es
muy probable que ni siquiera termine vindola.
Tema 2. Especificaciones tcnicas 9

Por ello existen varios programas para el tratamiento digital, con el correcto uso
del software y conociendo los formatos de compresin, se le puede sacar un
excelente provecho a estos recursos.
2.1 Relacin equipo usuario diseo

Antes de empezar a disear el sitio se deben tener en cuenta algunas
especificaciones tcnicas sobre el equipo de nuestros usuarios, aqu se mostrar
una breve lista de los puntos que no se deben olvidar.
1. Resolucin del monitor

600 x 800 px
1024 x 768 px
1280 x 960 px
Actualmente se disean las pginas conforme a estos estndares, sin

embargo, con el tiempo irn cambiando las medidas por la constante
evolucin de los equipos y mejora en los monitores.
2. Navegadores
Internet Explorer
Netscape Communicator
Mozilla
Cada navegador despliega la informacin segn la reconoce, por ello es que

hay ciertas variantes en la visualizacin dependiendo del navegador adems
de que algunos plug ins o java scripts no son compatibles con los diversos
navegadores existentes en el mercado.
3. Velocidad de conexin
Mdem
Banda Ancha
Es muy importante saber qu tipo de usuarios navegar el sitio, porque de

eso depende la velocidad en la que descargarn las pginas, no hay que
olvidar que si la mayora de nuestros usuarios cuentan con mdem, la
visualizacin debe ser rpida o se corre el riesgo de que ya no visiten el sitio
si los usuarios ingresarn a la pgina 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 especificacin del uso de plug ins, es necesaria para la correcta
visualizacin del sitio, sealada desde un principio.
2.2 Tipografa y legibilidad en la Web

Legibilidad es la capacidad de definir y distinguir claramente los caracteres del
alfabeto, mientras tanto que la comprensin se refiere al contenido del texto o
prrafo. La compresin se encuentra ligada a la legibilidad, mientras ms ntido
sea el carcter y su entorno (color de fondo, interlineado, estilo de la tipografa,
etc.), se lograr una mayor comprensin del contenido.
Muchas ocasiones se encuentran pginas donde el diseo experimental

predomina, visualmente puede lucir esttico, sin embargo, el contenido ha sido
dejado a un lado. Habr usuarios seguidores de ste tipo de sitios, as como
aquellos que cambien rpidamente de pgina por no encontrar la informacin que
desean, por ello es necesario estudiar el mercado, para saber exactamente hasta
qu punto lo esttico tiene un mayor peso que el contenido.
Ejemplo uso de tipografa donde lo esttico predomina al contenido.

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

usuario tiende a reducir el nmero de palabras que lee, esto se debe al cansancio
producido por el monitor y a la gran competencia existente entre cada pgina,
cada una debe llamar la atencin del usuario pero sobre todo retenerla. Para
lograr la retencin hay unos puntos bsicos a desarrollar en la mayora de las
pginas, uno de ellos es el uso de palabras claves destacadas, uso de subttulos,
prrafos pequeos y con una sola idea.
Ejemplo uso de puntos bsicos, remarcados en naranja

www.eluniversal.com.mx
2.2.1 Tipografa en la Web

El mantener el control de la tipografa sobre el diseo Web resulta un poco difcil.
Aunque se ha experimentado bastante en base a prueba y error, en una buena
parte de las ocasiones no se sabe cmo se ver exactamente la tipografa debido
al hecho de los diversos monitores y plataformas utilizados por los usuarios.

Uno de los aspectos importantes en la tipografa aplicada al diseo digital es el

tipo: la seleccin en el uso de la serif o sans serif. En una publicacin digital,
cambian algunas de las reglas utilizadas en el diseo editorial, una de ellas es el
uso de la tipografa serif como la mejor opcin, esto se debe a que la tipo sin
patines pierde menos calidad al ser trazada en pxeles, lo que da como resultado
una mejor legibilidad. Entre las tipografas diseadas especficamente para su uso
en el ordenador encontramos a la georgia o la verdana, su cuerpo es un poco ms
grande que la mayora de las tipos, lo que facilita su lectura. Por otro lado, la
tipografa con patines (times new roman) no es nada recomendable en textos con
un puntaje menor a 14 pts en el diseo 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 visualizacin de la tipografa en el

navegador, son los CSS (Cascading Style Sheet), los cuales son una serie de
especificaciones de estilos que le dicen al navegador cmo desplegar el texto
(color, tamao, tipo). stas casadas pueden ser aplicadas a un prrafo o varios
prrafos del documento.
Es muy prctico el uso de las CSS, ahorra tiempo y si es usado correctamente

todo el sitio permanecer unificado, adems de facilitar el mantenimiento, hacer
cambios y la carga de pginas es ms rpida. Pueden ser utilizadas con pginas
dinmicas o estticas, la generacin de las cascadas de estilos puede hacerse
mediante el software de diseo 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
podra 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 Tipografa pxel

La mayora de las fuentes fueron diseadas para impresin a alta resolucin, por
lo que su uso en el diseo digital presenta ciertos problemas de legibilidad cuando
la fuente tiene un cuerpo inferior a los 10 puntos. Por ello han sido diseadas
algunas fuentes llamadas pxel, las cuales se ajustan perfectamente a la
resolucin de la pantalla.
Ejemplo tipografa tipo pixel encuadra perfectamente en la retcula
La repercusin de disear estas tipos a un tamao mini por as llamarlo, es que

mientras mayor sea el puntaje, la tipografa va a dar un aspecto de pixeleada, lo
cual puede resultar contraproducente a menos que se busque ese efecto. Como
la mayora de las tipografas se pueden encontrar gratuitas y de pago, existen

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

Cabe recordar se debe tomar en cuenta que las imgenes y grficos requieren un
tratamiento especial, debido a que la publicacin es digital y no impresa.
Los monitores de computadora se componen de puntos llamados pxeles. Estos

puntos estn colocados en renglones y columnas, como una rejilla o retcula. Cada
pxel puede tener cualquier valor de una gama de ms 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 estn diseados 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 combinacin
de estos colores en su estado puro produce luz blanca. En el espectro RGB, cada
color consiste en tres nmeros (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 generarn 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 mximo,
es decir 255, se obtiene el blanco.
2.3.2 Tratamiento grfico

Al trabajar sobre publicaciones digitales los grficos e imgenes requieren un
tratamiento especial. Generalmente, lo que se busca de un sitio es que sea
dinmico y atractivo, pero sobre todo, que descargue rpidamente, es incmodo
para cualquier usuario esperar minutos para poder acceder a la pgina y cuando
esto sucede, es muy probable que ni siquiera termine vindola.
Por ello, existen varios formatos para el tratamiento de imgenes, cada uno
responde ciertas necesidades como se ver a continuacin.
Formato GIF (Graphic Interchange Format Formato Grfico Intercambiable)
El formato GIF es recomendable para imgenes con un rea de color homognea

y sin texturas complejas, debido a que su sistema de compresin 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 Estndar del grupo de

Expertos Fotogrficos)
Este formato es muy utilizado por la compresin que hace de los archivos, el
tamao final del archivo puede ser hasta 100 veces ms pequeo, lo que permite
el uso de varias imgenes y grficos dentro de las pginas web, mientras mayor
compresin haya en la imagen, menor ser la calidad de la imagen y se mostrar
un ruido visual. Se utiliza generalmente para fotografas o grficos con mucha
textura. Tambin 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 vinculacin externa, causa problemas en
su visualizacin.

Uso del formato JPEG Uso del formato GIF
Formato PNG (Portable Network Graphic Grficos porttiles en red)
Este formato fue diseado especficamente para su desempeo en la web, tiene

las mismas cualidades y sistema de compresin del formato GIF. An sigue en
desarrollo, algunos navegadores no permiten su correcta visualizacin, por lo que
no es muy recomendable su uso directamente en el html actualmente, se dice que
este formato revolucionar en la web, pero an queda por verse. Su uso en Flash
resulta bastante atractivo por el tamao final y se visualiza perfectamente en la
web.

Tema 3. Diseo de pginas web
Subtemas
3.1 Lenguaje HTML

3.2 Creacin de botones y animaciones
3.3 Uso de sonido
3.4 Uso de video
3.5 Creacin del Sitio Web
Al trmino 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 programacin, permite que el navegador
decodifique la informacin y la muestre en pantalla. Los navegadores cada vez
estn ms estandarizados y es ms factible que el diseo de la pgina sea
constante, independientemente del navegador utilizado por el usuario.
Las imgenes, sonido, video, botones, le dan vivacidad y dinamismo a la pgina.

Haciendo un buen uso de estos elementos se puede lograr una mayor interaccin
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 tcnicas y funcionales
para que su uso no sea contraproducente.
3.1 Lenguaje HTML

El HTML (Hyper Text Markup Language lenguaje de marcacin de hipertexto),
es un lenguaje de programacin, cuando alguien abre su navegador y ve una
pgina, no est viendo el cdigo HTML directamente, sino el navegador interpreta
el cdigo y lo despliega en la pantalla. Una buena noticia es que los navegadores
cada vez estn ms estandarizados y es ms factible que el diseo de la pgina
sea permanente, independientemente del navegador utilizado por el usuario.
Tema 3. Diseo de pginas web 20

Para tener una vaga idea del HTML es necesario conocer un poco sobre
gramtica y sintaxis. El cdigo 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 pgina web, las banderas estn
definidas por los siguientes signos <> como podr ver a continuacin.
Se puede escribir el cdigo directamente en cualquier editor de texto; sin embargo,

actualmente existen muchos editores de html como Dreamweaver, los cuales
facilitan y agilizan el diseo de las pginas. Para poder darse una idea del cdigo
detrs de las pginas abra el navegador, acceda a alguna pgina html y en: VER
Cdigo 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, ingeniera
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 aadrsele audio,
animaciones, video, scripts, etc. Por lo tanto la pgina puede ser completamente
interactiva.
Etiquetas bsicas
Este captulo trata de las etiquetas primarias que se necesitan para dar una
estructura y caractersticas determinadas a nuestra pgina.
La mayor parte de ellas no son imprescindibles para poder mostrar informacin en

nuestra pgina, 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
pgina correctamente definida. Adems, en un futuro, algunas etiquetas que ahora

son meros formalismos, sern indispensables para que los navegadores puedan
manejar nuestras pginas de manera eficiente.
Este es el formato bsico 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 programacin no
visible para los usuarios. El body representa todos los elementos visibles de
nuestro documento.
Cada seccin de la pgina esta limitada por una etiqueta < > en el inicio y una
etiqueta </ > al final de cada instruccin. Por lo que siempre observaremos dos
etiquetas de cada seccin. 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 creacin de

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

para decirle al navegador qu versin de HTML es la que se usa en la pgina. Si
no se hace, el navegador procesara la pgina en modo Quirks (modo de
compatibilidad) pudiendo no interpretar correctamente el cdigo de la pgina.
La DTD (definicin del tipo de documento) es la estructura reglamentaria, es decir,

los elementos y atributos que estn 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
transicin 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
estndares (Standards complanse). 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 ms fcil el paso de nuestros
documentos al XHTML que muy posiblemente tienda a sustituir al HTML en
los prximos aos.
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"

\"http://www.w3.org/TR/html4/strict.dtd\">
Si queremos saber si nuestra pgina cumple con el DTD definido podemos hacerlo
desde http://validator.w3.org/
<HTML> </HTML>
FUNCIN:
Esta etiqueta, no tiene otra funcin 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 pgina web. Dentro de ella, estarn
contenidos tanto el encabezamiento como el cuerpo del documento.
Puede ser omitida sin que haya ningn problema en la interpretacin de nuestra
pgina.
<HEAD> </HEAD>
FUNCIN:
Define la zona de cabecera de las pginas. Entre sus lmites, se incluyen etiquetas
que dan informacin sobre nuestra pgina.
<TITLE> </TITLE>
FUNCIN:
Da ttulo a la pgina. Este ttulo es el que aparece el la parte superior de la
ventana y el que se muestra al minimizar dicha ventana (en la mayora de los
navegadores).
Entre sus lmites, slo se admiten caracteres de texto; no podremos incluir ningn
otro elemento del lenguaje, ni tampoco etiquetas de estilo de fuente.

Cualquier etiqueta que escribamos dentro del ttulo, ser mostrada como si fuera
parte del texto.
Los ttulos son etiquetas de cabecera, por lo tanto, slo 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).
Slo puede incluirse en la cabecera de las pginas (<HEAD> </HEAD>).
ATRIBUTOS:
NOMBRE Efecto / Valores que acepta
HREF Determina un origen base para referencias a otras pginas.
Un URL o parte de l.
TARGET Asigna un marco de destino para las referencias de nuestra pgina.
Nombre de marco (frame).
<BODY> </BODY>
Encierra el contenido visible del documento. Toda la programacin que se

encuentre encerrada entre estas etiquetas aparecera visiblemente en la pgina 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>: Prrafos. En principio, sin entrar en detalles de alineacin u otras

caractersticas, digamos que se definen por las etiquetas <P>.....<P>. Esta
etiqueta, en un principio, se dise para saltar de prrafo por lo que puede ir sola
"<P>" al final de un texto indicando que a continuacin se quiere una lnea en
blanco aunque le recomendamos que se acostumbre a utilizarla abrindola y
cerrndola.
<BR>: Saltos de lnea. Esta etiqueta sirve para realizar un salto de lnea, puede
poner tantas como desee y realizar un salto de lnea por cada una de ellas.

: Comentarios. Son directivas que nunca se mostrarn a travs del
navegador y que le servirn para recordatorios en futuras revisiones del
documento.
Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Mi primera pgina</H1>
<!Aqu va un comentario que no es

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

que tiene tambin un prrafo y unos cuantos
saltos de lnea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Creacin de enlaces
<A>
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o

su direccin URL) y el texto que servir de punto de activacin 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 ms habitual de los atributos y sirve para saltar

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

la directiva <A HREF="archivo2.html">Siguiente pgina</a>
Saltar de nuestra presentacin a otra presentacin web llamada

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

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

Ejemplos de enlaces:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina 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

informacin que buscamos.
Ruta del fichero: Se trata de la ubicacin del archivo dentro del host.
http://www.udelondres.com/publico/saludos.html
Entre los principales tipos de URL destacan:
HTTP: Son los ms populares ya que son los utilizados por los servidores de
WWW para mandar documentos a travs de Internet.
FTP: Se utilizan para apuntar hacia los archivos que estn 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
pginas al servidor de internet. Como ya se puede imaginar en estos servidores se
almacenan los archivos que forman parte de nuestra presentacin 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 electrnicos. Cuando seleccionamos este tipo
de URL se abre la aplicacin de correo electrnico de nuestro ordenador para
enviar un correo a la direccin 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 comn:
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 lnea nueva aunque todo seguido consiga en la presentacin
el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera
y sangra cada elemento en forma secuencial, aunque se introduzcan
modificaciones.
Listas con vietas o sin orden. Se engloban por las etiquetas <ul>.....</ul>
y cada elemento de la lista, tambin estar encabezado por la etiqueta <li>.
El resultado es que el navegador inserta vietas (marcadores) delante de
cada elemento.
Listas de men y de directorio. Estn en desuso puesto que su resultado

suele ser, prcticamente, idntico al de las listas con vietas.
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 trmino

y una definicin y cada una de estas partes tiene su propia etiqueta. Estas
listas se engloban con las etiquetas <dl>.....</dl>. Para el trmino se usa la
etiqueta <dt> y para la definicin la etiqueta <dd>. Generalmente el
navegador colocar trmino y definicin en dos lneas diferentes pero esto se
puede evitar aadiendo 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 englobarn todo el conjunto de las listas y las
etiquetas de las listas secundaras se cerraran antes de volver a la lista
principal. Ahora quiz le empiece a convenir espaciar el propio cdigo
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 carcter
<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 lgicos: Indican como se va a emplear el texto que realzamos, no el

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

manera, generalmente en cursiva aunque depender del navegador.
- <strong>.....</strong>: Los caracteres tendrn 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 fsicos: Modifican la presentacin 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 excepcin 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, rpida y fcilmente,
archivos de correo electrnico 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 lneas
<HR> <BR>
Lneas divisorias: Se crean con la etiqueta <hr> que no tiene etiqueta de

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

Puede colocar tantas como desee y se insertar un salto de lnea 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 carcter 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 ledo por otra
plataforma una vez publicado en Internet. Para solventar este conflicto, HTML
ofrece la posibilidad de insertar unas entidades de carcter que podrn ser
interpretados por todas las plataformas. Estas entidades pueden ser:
Nombradas: Se suelen construir con el signo &, la abreviatura del carcter y

acabado con el signo punto y coma. El smbolo de registrado se construira:
®
Numeradas: Se construyen con los signos &#, el nmero correspondiente a

la posicin del carcter en el conjunto ISO-Latin-1 (ISO-8859-1). El mismo
smbolo de registrado, sera 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:
Nmero Nombre Apariencia

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

presentacin en diferentes filas y columnas de modo que podamos resumir
grandes cantidades de informacin de una manera que puede representarse
rpida y fcilmente.
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 calcularn automticamente segn 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>

Alineacin 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 = ms un valor para indicar el nmero de filas que se quiere

abarcar.
- colspan = ms un valor para indicar el nmero de columnas que se quiere

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

bastante. Nuestra recomendacin: Coja lpiz y papel y dibuje la tabla con todas
las filas y columnas que se quieren formar porque as tendr mucho ms 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 = Acompaa a <table> y especifica el ancho de la tabla, tanto en

nmero de pixeles como en porcentaje respecto al ancho de la pantalla.
Tambin puede acompaar 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" indicara la ausencia de borde.
- Cellspacing = Suele acompaar a la tag <table>. Indica el nmero de pixeles

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

- Cellpadding = Tambin acompaa 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>

Imgenes
<IMG>
El uso de imgenes es uno de los factores que ha popularizado tanto World Wide
Web. Incluir imgenes en una presentacin web es muy sencillo, solo debe de
tener en cuenta que las imgenes tienen que tener los formatos GIF, JPEG o
PNG. Las imgenes en lnea, se especifican a partir de la etiqueta <img> que no
tiene una etiqueta correspondiente de cierre pero que puede acompaarse 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 alineacin de una imagen con respecto a una

lnea de texto adyacente o a otras imgenes en esa lnea. Los tres valores
posibles son los ya conocidos left, right, top, middle y bottom.
3. Alt = Es la alternativa que se estableci cuando todava existan

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 ratn 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 imgenes
<MAP> <AREA>

Puede hacer que parte de la imagen sea un enlace a otra pgina, 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

imgenes. 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 acompaan 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 edicin de imgenes. 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 vrtices del
rea. En las circulares indicaremos las coordenadas del centro del
crculo y el valor del radio.
c) Href = Como ya sabe, indica la direccin, entre comillas, de la pgina

web a la que accede si pinchamos en un rea determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa,
adems de el cdigo 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 presentacin web,
solicitar informacin al visitante. Estos formularios estarn compuestos por tantos
campos como informaciones queramos obtener. Una vez introducidos los valores
en estos campos sern enviados a una URL donde se procesar toda esta
informacin.

Un formulario sigue siendo lenguaje html y por lo tanto necesita de unas etiquetas
que lo especifiquen. La declaracin de formulario queda recogida por las etiquetas
<form>.....</form> y dentro de ellas se recogern todas las variables de entrada.
A la etiqueta de apertura <form> le acompaarn estos atributos:
Action = "" Entre comillas se indica el programa que va a tratar las variables
enviadas con el formulario, un guin CGI o la URL mailto.
Method ="" Indica el mtodo de transferencia de las variables. Post, si se enva a

travs del STDIO. Get, si se enva a travs 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 introduccin 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 nmero mximo 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 sern 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 seleccin
<SELECT>
Las etiquetas <select>.....</select> encierran los valores que podremos elegir a

partir de una lista. Los atributos que acompaan a la etiqueta de apertura son:
- name ="" Indicar el nombre del campo de seleccin.
- size ="" Indicar el nmero de opciones visibles. Si le asignamos 1, la

seleccin 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 indicarn mediante la etiqueta <option> que

puede acompaarse del atributo selected para indicar cual es la opcin 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 mltiples lneas
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 acompaan 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 pginas web que estn hechas con frames se componen de una declaracin
de los marcos y tantas pginas en formato HTML corriente como distintas
divisiones hemos definido. La declaracin o definicin de frames es la nica
pgina que realmente debemos aprender, puesto que las pginas que se van a
visualizar en cada uno de los cuadros son ficheros HTML de los que venimos
aprendiendo anteriormente en este manual.
Dicha definicin est compuesta por etiquetas <FRAMESET> y <FRAME>, con las
que se indicamos la disposicin 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 pgina independiente.
Las particiones que se pueden hacer con un <FRAMESET> son en filas o

columnas. Por ejemplo, podramos indicar que deseamos hacer una divisin de la
pgina en dos filas, o dos columnas, tres filas, etc. Para indicar tanto la forma de
partir la ventana -en filas o columnas- como el nmero de particiones que
pretendemos hacer, se ha de utilizar el atributo COLS o ROWS. El primero sirve
para indicar una particin en columnas y el segundo para una particin en filas.
Nota: Es importante indicar que no se puede hacer una particin en filas y

columnas a la vez, sino que debemos escoger en partir la ventana en una de las
dos disposiciones. Ms adelante indicaremos cmo partir la ventana tanto en filas
como en columnas, que se hace con la anidacin de frames.
En el atributo COLS o ROWS slo podemos elegir uno de los dos colocamos
entre comillas el nmero de particiones que deseamos realizar, indicando de paso
el tamao que va a asignarse a cada una. Un valor tpico de estos atributos sera
el siguiente:
cols="20%,80%"
Indica que se deben colocar dos columnas, la de la izquierda tendra 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.
Adems del porcentaje para indicar el espacio de cada una de las casillas,
tambin 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 definicin
de la pantalla del usuario- se le asignar a segunda columna.

En la prctica podemos mezclar todos estos mtodos para definir los marcos de la
manera que deseemos, con pocentaje, con pixels o con el comodn (*). No importa
cmo se definan, la nica recomendacin es que uno de los valores que
indiquemos sea un asterisco, para que el rea correspondiente a dicho asterisco o
comodn sea ms o menos grande dependiendo del espacio que tenga la ventana
de nuestro navegador. Otros mtodos de definir filas y columnas, atendiendo a
este consejo, seran 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 dems particiones.
Una vez hemos indicado el nmero 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 pgina
marco1.html en su interior.
La etiqueta OBJECT
Con objeto de normalizar la inclusin 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 pertenecan a los estndares web,
por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo
de ficheros. La etiqueta elegida en el estndar 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 tambin para
incluir ficheros de audio de todo tipo en las pginas web.
De este forma, Internet Explorer a realizado su propia implementacin de la

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

especficos 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, vlida no slo para incrustar ficheros de sonido, sino tambin
para otros tipos, la etiqueta object va a definir un objeto o componente externo
encargado de la reproduccin del fichero, que en el caso de Internet Explorer
suele ser algn 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 configuracin 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
implementacin 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", anlogo al de la etiqueta IMG, define la alineacin horizontal o
vertical de la consola respecto de los elementos de la pgina.
- hspace="hs", que establece la separacin horizontal, vspace="vs", que

establece la separacin vertical, en pixels, entre la consola y los elementos
de la pgina que la redean. Anloga a sus equivelentes de la etiqueta IMG.

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

reproducirse por s slo al cargarse la pgina o si por el contrario ser preciso
la actuacin del usuario (o de cdigo de script) para que comience la
audicin.
- standby="mensaje", que presenta en pantalla un mensaje al usuario

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

del fichero de audio a reproducir. No es necesario utilizar slo ficheros WAV o
MID, pudiendo reproducirse tambin 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 automticamente al cargar la pgina o
si por el contrario ser preciso que el usuario pulse el botn Play para ello.
No son estos todos los atributos y parmetros posibles. Es ms, 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 ms que suficiente para presentar un fichero de audio en
nuestra pgina 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 cmo podemos implementar audio mediante el uso de una de
las etiquetas ms 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 mltiples usos podemos considerar el enlace a ficheros de audio. El
fichero enlazado puede ser interpretado directamente por el navegador (porque
sea de reproduccin directa o se tenga instalado el plugin adecuado) o puede ser
ejecutado por un programa independiente que se abra automticamente (Winamp,
Real Audio, etc.), siendo este el caso ms comn. 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 aplicacin necesaria para su
reproduccin.
La sintaxis general en este caso ser del tipo:

<a href="ruta_ archivo ">Mensaje</a>
Ejemplo de archivo MIDI:
<a href="../sonidos/watermark.mid">Msica para t</a>
Ejemplo de archivo MP3:
<a href="../sonidos/mp3.mp3">Maroon5</a>
3.2 Creacin de botones y animaciones

Las imgenes, sonido, video, botones, hacen que la pgina sea vvida y deje atrs
la esttica. Haciendo un buen uso de estos elementos se puede lograr un efecto
de alta tecnologa.
Un aspecto importante al implementar animaciones dentro del sitio web es el

tiempo de descarga, cabe recordar de nada sirve el tener una animacin
impresionante si el tiempo de descarga es elevado y el usuario final nunca la
observa. Otro punto a tomar a consideracin es la especificacin 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 GIFs animados son un conjunto de imgenes que dan la ilusin de

movimiento, como aquellos libros o cuadernos donde pasas las hojas rpidamente
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
GIFs animados se pueden observar en las caritas del Messenger.
Para los botones pasa lo mismo, son dos imgenes o tres, una cuando est
esttico, otra cuando se pasa sobre de l y por ltimo cuando se presiona, este
tipo de animacin se puede realizar en Fireworks o Flash, cada programa tiene
una forma distinta de hacer funcionar las acciones de los botones, pero
bsicamente siguen un mismo fin, abrir o desplegar otra pgina. Esta accin se le
da a cada uno de los botones, por ejemplo en flash se le dara la siguiente accin
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.
Botn amarillo sin

presionar
Botn amarillo
presionado
3.3 Uso de sonido

El audio puede darle un toque particular e identificador al sitio, el aadir sonido a
cualquier pgina no aplica, todo depende de las necesidades y lo que desea
expresar la empresa, producto u organizacin.
Existen bsicamente 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 pginas 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 solucin 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 ms
comunes, por lo tanto son ms compatibles, cada uno se describir a
continuacin.
MIDI (Musical Instrument Digital interface)

El archivo MIDI contiene msica sintetizada, se pueden encontrar los
archivos o crear la msica, es una buena opcin por el poco peso del audio.
AIFF (Audio Interchange File Format)

Los archivos AIFF pueden ser sonidos o msica, este archivo es el ms
comn en Macintosh y puede abrirse en la mayora 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 revolucin en cuanto a la calidad y compresin 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 vinculacin externa, la cual es una muy
buena opcin.
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 decisin
ms adecuada y efectiva. Un ejemplo en donde el audio toma un papel
protagnico, 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 prctico en el caso
adecuado. Por lo general es utilizado en la intranet, para ensearles 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 visualizacin.
Si uno busca videos en la red, encontrar pocos y esto se debe a que por ms
comprimido y a baja resolucin que est el video, los archivos son generalmente
bastante pesados, adems de requerir ciertos plug ins en algunos casos.
Una de las ventajas de flash MX es que puedes editar y comprimir los videos,
adems de que no necesita el usuario instalar otro plug in en su equipo, siendo
bastante amigable para el diseador 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 estndar, debido a que la mayora de los
equipos con sistema operativo Windows, lo reconoce.
MPEG (Motion Picture Experts Group)
Actualmente ste tipo de formato es la mejor opcin, una de las razones es por su
compatibilidad en las diversas plataformas y la otra es por su sistema de
compresin muy parecido al JPEG en donde el archivo reduce su tamao
considerablemente.
QUICKTIME
El formato Quick time, originalmente era el estndar de Macintosh, ahora tambin

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

Se mostrarn a continuacin algunos sitios donde el uso del video es la mejor

opcin.
http://www.fordvehicles.com/cars/mustang/launch
http://www.starfox.com/
3.5 Creacin del Sitio Web
Todo proyecto requiere un proceso el cual se ver brevemente a continuacin

para la creacin de un sitio Web.
Definicin del sitio y planificacin
Se definirn los objetivos y metas a largo y corto plazo, as como se recolectar

toda la informacin necesaria para realizar el proyecto definiendo tiempo de

realizacin y costos. Con todo el contenido en las manos se empezar a ver qu

apoyo interactivo y funcional requiere el sitio.
Arquitectura
La organizacin y el orden jerrquico de la informacin permite realizar ciertos

prototipos de navegacin, stos prototipos no son elaborados, simplemente sirven
para ver qu tal funciona el orden del contenido y la estructura de navegacin
elegida.
Diseo
El sitio comienza a tener forma, es momento de ver las imgenes, acomodo de

textos, retculas y en s empezar con el diseo de cada una de las pginas
componentes del proyecto. Definir imgenes, audio y video cuando se requieren.
Construccin
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 imgenes, textos, etc.
Es muy comn 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 disea una nueva pgina dentro del mismo sitio
no hay que olvidar respetar el diseo inicial, dejando todo unificado.

Bibliografa general
- Principios de diseo bsicos para la creacin de sitios web. Lynch, Patryck,

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

Estados Unidos.
Bibliografa general 63

Bases Pag Web PDF

Cargado por

Información del documento

Título original

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 PDF

Cargado por

Copyright:

Formatos disponibles

Bases del Diseo de

Licenciatura en Diseo Grfico

Tema 1. Planificacin para el Diseo de pginas Web 4

Tema 2. Especificaciones Tcnicas 9

Tema 3. Diseo de Pginas Web 20

Tema 1. Planificacin para el diseo de pginas web

1.1 Objetivos del proyecto Web

La navegacin fluida del sitio es importante, para ubicar al usuario dentro de la

1.1Objetivos del proyecto web

Entre estos objetivos podramos ubicar algunas de estas cuestiones: Cul es el

Tema 1. Planificacin para el diseo de pginas web 4

1.2Arquitectura y organizacin del contenido

Dentro de la organizacin del contenido se puede empezar a visualizar un poco la

Para una rpida y fcil visualizacin de los contenidos y su jerarqua se puede

Tema 1. Planificacin para el diseo de pginas web 5

Es la forma ms simple de organizar la informacin, debido a que es

Este tipo de estructura consta bsicamente de una pgina principal, a partir de

Este tipo de navegacin es una combinacin entre la estructura secuencial y la de

Tema 1. Planificacin para el diseo de pginas web 6

La telaraa es utilizada bsicamente para usuarios avanzados, pues tienen un

Tema 1. Planificacin para el diseo de pginas web 7

La mayor parte de los sitios utiliza ms de una estructura de navegacin,

Tema 1. Planificacin para el diseo de pginas web 8

Tema 2. Especificaciones tcnicas

2.1 Relacin equipo usuario diseo

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

Otra de las especificaciones a tomar en cuenta en el diseo, son las imgenes y

Tema 2. Especificaciones tcnicas 9

2.1 Relacin equipo usuario diseo

1. Resolucin del monitor

Actualmente se disean las pginas conforme a estos estndares, sin

Cada navegador despliega la informacin segn la reconoce, por ello es que

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

Tema 2. Especificaciones tcnicas 10

4. Uso de plug ins

2.2 Tipografa y legibilidad en la Web

Muchas ocasiones se encuentran pginas donde el diseo experimental

Ejemplo uso de tipografa donde lo esttico predomina al contenido.

Tema 2. Especificaciones tcnicas 11

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

Ejemplo uso de puntos bsicos, remarcados en naranja

2.2.1 Tipografa en la Web

Tema 2. Especificaciones tcnicas 12

Uno de los aspectos importantes en la tipografa aplicada al diseo digital es el

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

Tema 2. Especificaciones tcnicas 13

Ejemplo uso de sans serif

2.2.2 CSS y alfabetos por defecto

Uno de los avances sobre el control en la visualizacin de la tipografa en el

Es muy prctico 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 tcnicas 14

Windows Mac Extras de Microsoft Navegadores

Arial Charcoal Andale Mono Andale Mono

2.2.3 Tipografa pxel

Ejemplo tipografa tipo pixel encuadra perfectamente en la retcula

La repercusin de disear estas tipos a un tamao mini por as llamarlo, es que

Tema 2. Especificaciones tcnicas 15

2.3 Color e Imagen en la Web

Los monitores de computadora se componen de puntos llamados pxeles. Estos

2.3.1 Modelo RGB

Tema 2. Especificaciones tcnicas 16

Las diferentes mezclas y proporciones de estos colores primarios generarn los