Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Bases Diseño Web - Londres PDF
Bases Diseño Web - Londres PDF
Pginas Web
Bloque Especializado
Compilador:
Lic. Ingrid Riquelme Ramrez
1
2
3
4
4
4
4
5
5
9
9
9
10
11
12
14
15
16
16
17
20
20
20
20
56
57
60
61
Bibliografa general
63
ndice
Introduccin
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
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.
la
la
la
el
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.
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.
Objetivo de Aprendizaje
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.
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.
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.
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
Webdings
#255/0/0 .
#0/255/0. .
#0/0/255. .
#0/0/0 . .
#255/255/255 ..
Red
Green
Blue
Black
White
Lenguaje HTML
Creacin de botones y animaciones
Uso de sonido
Uso de video
Creacin del Sitio Web
Objetivo de Aprendizaje
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.
name="description"
content="web
comercial
de
’goal
&
coaching
<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>
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
<HEAD>
......
</HEAD>
<BODY>
......
</BODY>
</HTML>
<!DOCTYPE
HTML
PUBLIC
\"-//W3C//DTD
HTML
4.01
Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
2.
<!DOCTYPE
HTML
PUBLIC
\"-//W3C//DTD
HTML
4.01
Frameset//EN\"
\"http://www.w3.org/TR/html4/frameset.dtd\">
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.
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 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.
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.
<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>
</BODY>
</HTML>
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 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>
<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>
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)
<strong>.....</strong>: Los
generalmente en negrita.
caracteres
<code>.....</code>: Muestra
generalmente Courier.
como
una
tendrn
fuente
mayor
nfasis,
monoespaciada,
b)
<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>
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H1>Texto preformateado</H1>
<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>
<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>
Nombre
Apariencia
À
À
Á
Á
È
È
É
É
Ì
Ì
Í
Í
Ñ
Ñ
Ò
Ò
Ó
Ó
Ü
Ü
à
à
á
á
è
è
é
é
ñ
ñ
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
<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>
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:
-
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las
etiquetas <th> o <td> los atributos:
-
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
2.
3.
4.
5.
6.
Mapas de imgenes
<MAP> <AREA>
2.
La etiqueta <area> define las reas que vamos a poder activar en esa
imagen. A esta tag le acompaan los siguientes atributos:
a)
b)
c)
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.
<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>
<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 seleccin
<SELECT>
<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Ejemplo 16</TITLE>
</HEAD>
<BODY>
<H1>Formularios</H1>
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 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>
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.
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.
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.
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">
</object>>
Botn
amarillo
presionado
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.
http://www.mariaclaudiacortes.com
http://www.bacardidj.com
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.
http://www.fordvehicles.com/cars/mustang/launch
http://www.starfox.com/
Bibliografa general 63