Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Bases Paginas Web
Edgardo Sanchez
Compartir
Vista previa del material en texto
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
Índice 1
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
Objetivo de aprendizaje 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
Objetivo de aprendizaje 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
Introducción 2
Bases del Diseño de Paginas Web
Introducción
Dentro de la www podemos encontrar una cantidad impresionante de sitios Web
inefectivos, anteriormente podría achacarse a la inflexibilidad del lenguaje HTML,
sin embargo, actualmente se cuentan con numerosas herramientas para diseñar
un sitio Web efectivo. Entre los elementos primordiales a tomarse en cuenta para
el buen diseño de un sitio están: la organización ó empresa, el usuario y ciertas
especificaciones funcionales - técnicas.
Objetivo general 3
Bases del Diseño de Paginas Web
Objetivo general
Al término del curso el estudiante aplicará los fundamentos del diseño gráfico en la
creación de páginas Web que favorezcan la atracción del cliente a partir de la
organización de la información, investigación de necesidades y por último
aplicación de programas para el diseño de sitios Web.
Tema 1. Planificación para el diseño de páginas web 4
Bases del Diseño de Paginas Web
Tema 1. Planificación para el diseño de páginas web
Subtemas
1.1 Objetivos del proyecto Web
1.2 Arquitectura y organización del contenido
1.3 Estructura de la navegación
Objetivo de Aprendizaje
Al término del tema el estudiante investigará, jerarquizará y orgnaizará la
información para facilitar la navegación, mantenimiento y revisiones posteriores
del sitio.
Sinopsis
La organización de la información es parte fundamental para un diseño funcional.
Definir desde un principio todo el contenido ayudará posteriormente a jerarquizar
la información dando como resultado un mayor conocimiento del proyecto y
atender las necesidades específicas del mismo fijándose objetivos a corto o largo
plazo.
La navegación fluida del sitio es importante, para ubicar al usuario dentro de la
página, dándole importancia a ciertos contenidos o no. Para saber qué estructura
es la mejor opción es necesario tener la información a la mano, por ello, esto es un
proceso de recolección y organización de los contenidos.
1.1 Objetivos del proyecto web
Tomando en cuenta la información y lo que desea el cliente se deben fijar mínimo
tres objetivos a alcanzar con este proyecto, el diseñar un sitio no es poner
simplemente en la red una página estática, sino es todo un desarrollo donde se
estudia al usuario, la competencia y sobre todo tiene como fin el éxito de un
objetivo a corto o a largo plazo.
Entre estos objetivos podríamos ubicar algunas de estas cuestiones: ¿Cuál es el
propósito de este sitio? ¿A quiénes queremos llegar? ¿Qué estrategias de
comunicación se integrarán? Con algunas de estas interrogantes podríamos
definir algunos objetivos finales.
Tema 1. Planificación para el diseño de páginas web 5
Bases del Diseño de Paginas Web
1.2 Arquitectura y organización del contenido
La definición de los objetivos nos conlleva al siguiente paso: obtener la
información necesaria para alcanzarlos. Hacer una 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.3 Estructura de la navegación
Al tener todo el contenido se procede a diseñar la estructura de navegación, ésta
es básicamente un diagrama de flujo de la información. Existen cuatro estructuras
de navegación, las cuales se verán una por una a continuación.
Tema 1. Planificación para el diseño de páginas web 6
Bases del Diseño de Paginas Web
Secuencia
Es la forma más simple de organizar la información, debido a que es
completamente secuencial, generalmente es utilizada para contenidos educativos
o presentaciones donde el contenido se va dando paso a paso.
Jerarquía
Este tipo de estructura consta básicamente de una página principal, a partir de
ésta se va desglosando la información, dependiendo de su orden de importancia,
generalmente es utilizado para proyectos institucionales.
Retícula
Este tipo de navegación es una combinación entre la estructura secuencial y la de
jerarquía, ordena la información categóricamente; es utilizada generalmente para
uso académico.
Tema 1. Planificación para el diseño de páginas web 7
Bases del Diseño de Paginas Web
Telarañas
La telaraña es utilizada básicamente para usuarios avanzados, pues tienen un
completo dominio sobre la información, pueden vincularse de cualquier parte del
sitio sin haber un orden jerárquico, para los usuarios principiantes resulta ser muy
confuso este tipo de navegación.
Tema 1. Planificación para el diseño de páginas web 8
Bases del Diseño de Paginas Web
La mayor parte de los sitios utiliza más de una estructura de navegación,
dependiendo de los requerimientos de despliegue de la información. Se puede
decir que mientras mayor sea el grado de complejidad se tenderá al uso de
estructuras tipo telaraña y a mayor simplicidad se usará la secuencial.
Tema 2. Especificaciones técnicas 9
Bases del Diseño de Paginas Web
Tema 2. Especificaciones técnicas
Subtemas
2.1 Relación equipo usuario – diseño
2.2 Tipografía y legibilidad en la Web
2.2.1 Tipografía en la Web
2.2.2 CCS y alfabetos por defecto
2.2.3 Tipografía Píxel
2.3 Color e Imagen en la Web
2.3.1 Modelo RGB
2.3.2 Tratamiento gráfico
Objetivo de Aprendizaje
Al término del tema el estudiante considerará especificaciones que deben tomarse
en cuenta en la realización de una página Web, así como, el uso correcto de
tipografías y herramientas para el tratamiento gráfico.
Sinopsis
Antes de iniciar con cualquier proyecto se deben tener en cuenta algunas
especificaciones técnicas sobre el equipo de nuestros usuarios para la correcta
visualización y funcionamiento del sitio, entre esas especificaciones técnicas
podemos encontrar el tipo de navegador, si utiliza módem o banda ancha y hasta
el tipo de letra a utilizar en el diseño de la página.
La legibilidaden 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 10
Bases del Diseño de Paginas Web
Por ello existen varios programas para el tratamiento digital, con el correcto uso
del software y conociendo los formatos de compresión, se le puede sacar un
excelente provecho a estos recursos.
2.1 Relación equipo usuario – diseño
Antes de empezar a diseñar el sitio se deben tener en cuenta algunas
especificaciones técnicas sobre el equipo de nuestros usuarios, aquí se mostrará
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.
Tema 2. Especificaciones técnicas 11
Bases del Diseño de Paginas Web
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.
Tema 2. Especificaciones técnicas 12
Bases del Diseño de Paginas Web
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.
Tema 2. Especificaciones técnicas 13
Bases del Diseño de Paginas Web
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
Tema 2. Especificaciones técnicas 14
Bases del Diseño de Paginas Web
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.
Tema 2. Especificaciones técnicas 15
Bases del Diseño de Paginas Web
Windows Mac Extras de Microsoft Navegadores
Arial
Book Antiqua
Century Gothic
Comic Sans MS
Copperplate Gothic
Bold
Courier New
Impact
Lucida
Marlett
Symbol
Tahoma
Times New Roman
Verdana
Webdings
Wingdings
Charcoal
Chicago
Courier
Geneva
Helvetica
Monaco
New York
Palatino
Symbol
Times
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Webdings
Andale Mono
Arial
Comic Sans MS
Georgia
Impact
Trebuchet MS
Verdana
Webdings2.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
Tema 2. Especificaciones técnicas 16
Bases del Diseño de Paginas Web
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 …. …
#0/255/0…. ….
#0/0/255…. ….
#0/0/0 …. ….
#255/255/255 ..
Red
Green
Blue
Black
White
Tema 2. Especificaciones técnicas 17
Bases del Diseño de Paginas Web
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.
Tema 2. Especificaciones técnicas 18
Bases del Diseño de Paginas Web
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.
Tema 2. Especificaciones técnicas 19
Bases del Diseño de Paginas Web
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 20
Bases del Diseño de Paginas 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
Objetivo de Aprendizaje
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 21
Bases del Diseño de Paginas Web
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, accedaa 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 ’goal & coaching
consulting’"><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>
Tema 3. Diseño de páginas web 22
Bases del Diseño de Paginas Web
</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
Tema 3. Diseño de páginas web 23
Bases del Diseño de Paginas Web
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>
Tema 3. Diseño de páginas web 24
Bases del Diseño de Paginas Web
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).
El modo de definirla es:
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\"
\"http://www.w3.org/TR/html4/frameset.dtd\">
Tema 3. Diseño de páginas web 25
Bases del Diseño de Paginas Web
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.
El modo de definirla es:
<!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.
Tema 3. Diseño de páginas web 26
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 27
Bases del Diseño de Paginas Web
<!-- -->: 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>
<TITLE>Ejemplo 2</TITLE>
</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.
Tema 3. Diseño de páginas web 28
Bases del Diseño de Paginas Web
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>
Tema 3. Diseño de páginas web 29
Bases del Diseño de Paginas Web
Ejemplos de enlaces:
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</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>
Tema 3. Diseño de páginas web 30
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 31
Bases del Diseño de Paginas Web
Ejemplo de URLs:
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</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>
Tema 3. Diseño de páginas web 32
Bases del Diseño de Paginas Web
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 dentrode 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.
Tema 3. Diseño de páginas web 33
Bases del Diseño de Paginas Web
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</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>
Tema 3. Diseño de páginas web 34
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 35
Bases del Diseño de Paginas Web
- <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>
Tema 3. Diseño de páginas web 36
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 37
Bases del Diseño de Paginas Web
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</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>
Tema 3. Diseño de páginas web 38
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 9</TITLE>
</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>
Tema 3. Diseño de páginas web 39
Bases del Diseño de Paginas Web
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 "
Tema 3. Diseño de páginas web 40
Bases del Diseño de Paginas Web
Ejemplos:
Número Nombre Apariencia
À À À
Á Á Á
È È È
É É É
Ì Ì Ì
Í Í Í
Ñ Ñ Ñ
Ò Ò Ò
Ó Ó Ó
Ü Ü Ü
à à à
á á á
è è è
é é é
ñ ñ ñ
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
Tema 3. Diseño de páginas web 41
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 10</TITLE>
</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>
Tema 3. Diseño de páginas web 42
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 43
Bases del Diseño de Paginas Web
- 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>
<TITLE>Ejemplo 11</TITLE>
</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>
Tema 3. Diseño de páginas web 44
Bases del Diseño de Paginas Web
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>
Tema 3. Diseño de páginas web 45
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 46
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 14</TITLE>
</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 lossiguientes atributos:
- type ="" Indicará el tipo de variable a introducir.
- text Indica que el campo a introducir será un texto. Sus atributos:
Tema 3. Diseño de páginas web 47
Bases del Diseño de Paginas Web
- 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.
Tema 3. Diseño de páginas web 48
Bases del Diseño de Paginas Web
<HTML>
<HEAD>
<TITLE>Ejemplo 15</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
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>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</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.
Tema 3. Diseño de páginas web 49
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<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>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
Tema 3. Diseño de páginas web 50
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>
</BODY>
</HTML>
Tema 3. Diseño de páginas web 51
Bases del Diseño de Paginas Web
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>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
<FORM ACTION="mailto:unaprueba" METHOD="POST">
<TEXTAREA COLS=20 ROWS=10 NAME="Texto">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</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>
Tema 3. Diseño de páginas web 52
Bases del Diseño de Paginas Web
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ónde la pantalla del usuario- se le asignará a segunda columna.
Tema 3. Diseño de páginas web 53
Bases del Diseño de Paginas Web
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
Tema 3. Diseño de páginas web 54
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 55
Bases del Diseño de Paginas Web
- 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>>
Tema 3. Diseño de páginas web 56
Bases del Diseño de Paginas Web
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 necesariopara el correcto funcionamiento de algunos botones los applets.
Tema 3. Diseño de páginas web 57
Bases del Diseño de Paginas Web
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:
Tema 3. Diseño de páginas web 58
Bases del Diseño de Paginas Web
- 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:
Tema 3. Diseño de páginas web 59
Bases del Diseño de Paginas Web
http://www.mariaclaudiacortes.com
http://www.bacardidj.com
http://www.mariaclaudiacortes.com/
Tema 3. Diseño de páginas web 60
Bases del Diseño de Paginas Web
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.
Tema 3. Diseño de páginas web 61
Bases del Diseño de Paginas Web
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
http://www.starfox.com/
Tema 3. Diseño de páginas web 62
Bases del Diseño de Paginas Web
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 63
Bases del Diseño de Paginas Web
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.
Continuar navegando
Materiales relacionados
15 pag.
447 pag.0009-curso-completo-de-html
Iara Echegaray
60 pag.Accesibilidad-en-el-contenido-de-la-WEB
Contenido de Estudio
447 pag.Curso comp HTML
Cleudiney Theodoro Brandao
Compartir