Insercin de Multimedia en Pagina Web

1. Sonido 2. Video

Cmo incrustar un reproductor VLC en HTML

Reproducir audio y video a travs de streaming hace que los sitios web sean ms interactivos e interesantes. Si tienes un sitio web y deseas publicar videos informativos o de diversin o clips de audio, existen diversas soluciones para lograrlo. Sin embargo, algunas aplicaciones comerciales son caras y aumentan considerablemente el costo de desarrollo de un sitio web. VLC Media Player es un reproductor multimedia de cdigo abierto con un un servidor de streaming incorporado. Con ms de 100 millones de usuarios, es uno de los reproductores multimedia ms populares. Incorporar el reproductor a tus pginas web requiere unas pocas lneas de cdigo HTML.

Necesitars

Un editor de pginas web (como Notepad, Dreamweaver o NetObjects)

1. 2. 3. 4.

Abre la pgina HTML que deseas editar con un editor de texto o un editor de pginas web (por ejemplo: Notepad, Write Pad o Dreamweaver). Desplzate hasta el rea donde deseas insertar el clip de audio o de video en la pgina web. Copia y pega el siguiente cdigo en el editor, en la ubicacin dnde VLC Media Player se mostrar dentro de la pgina: Edita los parmetros en la seccin "Modo de incrustacin". Esta seccin te permitir personalizar el reproductor de tu pgina web. Cambia "Reproduccin automtica" a "No" si deseas que el usuario deba hacer clic en el botn "Reproducir" para iniciar la pista o video.

Cambia el parmetro "Bucle" a "S" si deseas que los archivos se repitan de manera infinita hasta que sean detenidos por el usuario.

5. 6. 7. 8.

Si es necesario, ajusta el nivel de volumen en el apartado correspondiente.

Reemplaza el nombre "mipelicula.avi" con el nombre de la pista o clip que aparecer en elreproductor multimedia. Asegrate de cargar el archivo en la misma carpeta que la pgina web, de modo que el navegador pueda hacer referencia a la ruta correcta del archivo. Cambia los parmetros de ancho y altura para que se adapten a tu pgina web dependiendo de tus necesidades. Guarda la pgina web en tu editor y carga la pgina HTML y el clip o video a tu sitio web.

Sonidos o msica de fondo

La presencia de archivos sonoros en forma de MIDI o WAV puede servir como agradable banda sonora mientras se navega por el web, pero tambin puede ser un pesado fardo que sirve slo para hacer ms lento el cargado y poner nervioso al visitante. Como repetiremos a menudo en esta gua, no podemos olvidar que aunque, sin lugar a dudas, una atractiva impostacin grfica y musical de las pginas web es importante, es fundamental que la navegacin no llegue a ser lenta o incluso, en ltima instancia, imposible si nos preocupa mnimamente nuestra cuenta de telfono. Nuestro consejo es, por tanto, evitar archivos MIDI grandes (60Kb de archivos MIDI, por ejemplo, resultan exagerados) y enormes WAVE (que podemos sustituir con otros archivos ms ligeros, como veremos a continuacin). Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y consideremos que queramos insertarlo como fondo de la pgina web nada ms abrirse sta, automticamente por tanto. Antes de nada, debemos pensar que Navigator y MSIE utilizan marcas diversas para llamar automticamente un archivo MIDI de fondo. Por ejemplo, la marca <BGSOUND> funciona slo con MSIE pero no con Navigator (LOOP indica el nmero de veces que debe repetirse el midi): <BGSOUND SRC="imagine.mid" LOOP=INFINITE> Haz clic aqu (http://www.htmlpoint.com/guida/guida_audio_1.htm) tanto con MSIE como con Navigator para probar. Adems de los archivos MIDI, con la marca <BGSOUND> es posible insertar archivos .WAV y .AU Para permitir la apertura automtica de un archivo audio tambin con Netscape, hay que usar la marca <EMBED>:

<EMBED SRC="imagine.mid" AUTOSTART=true VOLUME="80" WIDTH="0" HEIGHT="0">

LOOP=true

Haz clic aqu (http://www.htmlpoint.com/guida/guida_audio_2.htm) tanto con MSIE como con Navigator para probar. Tambin en este comando adems de los archivos MIDI es posible insertar archivos .WAV y .AU Una de las rmoras para la insercin de archivos midi en las propias pginas, obedece al hecho de que, cada vez que se cambia pgina, el archivo musical se interrumpe bruscamente. El problema no subsiste en los sitios divididos en marcos (frames), ya que el archivo musical se carga en el marco fijo y, por tanto, no cambia cuando se pasa pgina en los otros marcos. Y por lo que respecta a los sitios sin marco? Una pequea estratagema que toma piede los marcos puede ser la de construir una pgina con un marco "invisible". Para ello, se crea una pgina con el siguiente cdigo: <FRAMESET rows="0,*" border=0 frameborder="0" framespacing="0"> <frame me name="alto" src="top.htm" noresize> <frame me name="centrale" src="central.htm" noresize> </FRAMESET> donde en el marco "alto" insertaremos el cdigo que invoca el archivo audio: <EMBED SRC="imagine.mid" WIDTH="0" HEIGHT="0"> AUTOSTART=true LOOP=true VOLUME="80"

y en el marco "central" el contenido de las pginas. Esta es la direccin de prueba: http://www.htmlpoint.com/guida/guida_audio_3.html

Otra "estratagema" para escuchar un archivo audio (SLO CON NETSCAPE) de manera continua incluso cuando se cambia pgina, es el de cargar dicho archivo en una ventana alternativa del navegador. Para hacer esto, es necesario utilizar un pequeo pero importantsimo TARGET. Los TARGET se usan sobre todo en los marcos pero pueden usarse tambin en otros casos. As, por ejemplo, si queremos que una pgina asociada a un enlace se cargue en una ventana distinta del navegador, tendremos que insertar el TARGET="_new". Pongamos que el midi para escuchar se llame "imagine.mid"; el cdigo sera: <A HREF="imagine.mid" TARGET="_new">Escucha el midi imagine.mid</A> Haciendo clic se abrir una ventana por defecto, la cual se colocar al lado de la principal (aqulla desde la que se ha LANZADO el enlace). Aqu tienes el ejemplo prctico: Para escuchar el midi se da clic en el siguiente link: http://www.htmlpoint.com/guida/imagine.mid Este procedimiento es vlido slo para Nestcape. De este modo, el visitante podr leer el texto que aparece en la finestra desde la que ha

lanzado el archivo "imagine.mid" y, mientras tanto, la otra ventana producir el midi. En el momento en que el visitante haga clic en otro midi para escucharlo, ste se cargar automticamente en la ventana precedente ya abierta para "imagine.mid" (o sea, no se abrirn decenas de ventanas).

Desgraciadamente, esto funciona slo con Netscape y no con MSIE. Para atender las necesidades de los usuarios del navegador de Redmond es necesario arquitectar un procedimiento algo ms complejo, el cual consiste en asociar al enlace no el simple archivo midi "imagine.mid" sino un archivo HTML que contenga un comando EMBED que haga partir automticamente el midi. Para probar, haz clic (http://www.htmlpoint.com/guida/guida_audio_2.htm). Este procedimiento funciona con ambos navegadores. aqu

<HEAD> encabezar el documento

Para ser visualizados en Internet, los documentos son salvados en formato texto y contienen las marcas necesarias para informar al navegador (Netscape, MsIe o Explorer) al respecto. En otras palabras, el navegador visulizar en cualquier caso los documentos con texto salvados en formato .htm, pero si stos carecen de marcas HTML aparecern sin formato de ningn tipo: sin separacin de lneas o prrafos, sin texto alineado, sin negritas, cursivas, etc. La finalidad del HTML es dotar, mediante unos comandos denominados marcas , de formato al documento, as como insertar imgenes y otros elementos multimedia (filmaciones, apliques, etc.). El trabajo que un editor web realiza en el documento HTML est dirigido a proporcionar al navegador toda la informacin necesaria para interpretar correctamente la pgina. Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento. Es fcil comprender que el cuerpo del documento contiene todos los elementos de la pgina: el texto, las imgenes, los apliques (applet) Java, el cdigo Javascript y todo lo que es visualizado materialmente por el navegador. Por el contrario, la cabecera contiene una serie de datos que el navegador necesita para interpretar correctamente el documento, pero que no se visualizan dentro del mismo. La cabecera tiene, por tanto, una funcin no visible pero fundamental. Entre los elementos facilitados por la cabecera podemos citar: el ttulo de la pgina, los trminos clave para los buscadores, el tipo de HTML soportado y los enlaces base de referencia. Aqu analizaremos slo algunos elementos, omitiendo por el momento el estudio de aqullos que no resultan inmediatamente necesarios para la comprensin del HTML: HTML DOCTYPE HEAD TITLE META

A continuacin describiremos detalladamente las peculiaridades ms relevantes de cada uno de los elementos anteriores.

<HTML>
Todos los elementos y el contenido de un documento HTML estn encerrados dentro de las marcas <HTML></HTML> cuya funcin es servir de apertura y cierre al archivo. Las marcas <HTML></HTML> indican al navegador que el documento est marcado en HTML, si bien los navegadores ms recientes (Netscape 3 y 4, MsIe 3,4 y 5) consiguen interpretar igualmente las

marcas sucesivas. Dicho esto, existen en cualquier caso dos razones para introducir siempre la marca <HTML></HTML> dentro del documento: HTML no es el nico lenguaje de marcado presente en el WWW (pinsese, por ejemplo, en el XML) y corremos el riesgo de que el navegador malinterprete las marcas, confundindolas con otros lenguajes de marcado. Los usuarios de viejos navegadores corren el riesgo de visualizar un documento psimamente formateado.

DOCTYPE
Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debera ser el primer elemento que abriera un documento. Esto quiere decir que ira colocado antes de <HTML>. Se trata de una marca que no precisa de cierre y cuya funcin es proporcionar informacin al servidor de web anfitrin de la pgina. Los datos que facilita DOCTYPE se refieren al tipo de documento visualizado adems de ser necesarios para la comunicacin entre navegador y servidor. DOCTYPE se debe escribir de una forma estndar: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> Esta lnea proporciona algunos datos sobre el documento: HTML PUBLIC: el documento es pblico IETF: el tipo de HTML pblico est gestionado por la Internet Engineering Task Force DTD HTML 4.0: la versin de HTML soportada es la 4.0 EN: el idioma del documento es el ingls El uso de DOCTYPE no es obligatorio y puede omitirse. Ciertamente, su utilizacin ayuda al servidor de web a interpretar correctamente el documento, pero su falta no condiciona la correcta visualizacin. Tal y como puede observarse fcilmente DOCTYPE es una marca que no prev elemento de cierre (no se escribe de esta manera: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>)

<HEAD>
Los elementos <HEAD></HEAD> se colocan inmediatamente despus de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la informacin que necesita el navegador, el servidor de web y los motores de bsqueda. Se trata del primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de <HEAD></HEAD> se introduce el ttulo del documento y otros datos. He aqu la sintaxis HTML de un documento con los comandos hasta ahora examinados: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> <HTML> <HEAD></HEAD> </HTML>

<TITLE>
El elemento <TITLE></TITLE> es el ms utilizado dentro de la marca <HEAD>, dado que sirve para dar ttulo a la pgina. El ttulo suele ser visualizado por los navegadores en la cabecera de pgina. La que figura a continuacin es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint - el sitio italiano sobre el Web publishing):

En caso de que el URL se guarde con "agrega a favoritos" (para MsIe) Y "agrega a marcapginas" (para Netscape) la marca TITLE da nombre a la conexin. En otras palabras, cuando se guarda la direccin, el navegador asigna al mismo lo que aparece dentro de <TITLE></TITLE>. La imagen que sigue muestra el efecto en MsIe (idntico para Netscape):

El contenido que aparece entre las marcas <TITLE></TITLE> es utilizado tambin por algunos buscadores para indicizar la pgina y buscar palabras clave. Altavista constituye probablemente el ejemplo ms eclatante. Por ello, es recomendable proporcionar en el TITLE una descripcin detallada aunque sinttica de la pgina, con todas las palabras clave que los buscadores pueden indicizar. Un consejo que conviene tener presente es el de no exagerar con la longitud del texto, teniendo presentes las exigencias de quienes aaden el sitio al marcapginas y de los buscadores. La sintaxis correcta de la marca TITLE es la siguiente: <TITLE>Mi primera portada con la gua de HTMLpoint</TITLE>

META
Los buscadores representan un recurso indispensable para quienes buscan informacin en la red, y sitios como Altavista, Yahoo, Lycos y Excite se cuentan entre los ms visitados de Internet. Figurar en dichos motores de bsqueda es fundamental para quien crea pginas web y quiere mayor visibilidad. Es necesario, antes de nada, sealar las propias pginas a estos buscadores, lo que se efecta mediante pequeos formularios presentes en las pginas web bajo la frase "Add your site". Peridicamente estas araas (spider) supervisan los millones de pginas contenidos en sus bases de datos verificando las eventuales modificaciones. Adems de ser incluidos en los buscadores, es importante figurar en los primeros puestos de la lista que aparece al efectuar la bsqueda (a menudo, sobre todo cuando los trminos que se buscan son de uso frecuente y de carcter general, aparecen en las listas miles de sitios). Para ello, debemos adoptar algunas sencillas medidas. Fundamentales por lo que se refiere a este objetivo resultan las marcas de metainformacin (META), cadenas de cdigos que figuran en la cabecera del documento, entre <HEAD></HEAD> y que son las primeras que leen los buscadores. Las palabras clave (keywords) son los trminos que, de manera resumida, describen el contenido de una pgina web. Si, por ejemplo, el sitio se ocupa de la realizacin de pginas web, las palabras clave sern: HTML realizacin pginas web portada buscadores precios mdicos

....... La marca META deber impostarse como sigue: <META name="keywords" Content="HTML, realizacin pginas web, portada, buscadores, precios mdicos"> La coma divide unos trminos de otros. No se escriben comas dentro de las frases que constan de ms de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas. Naturalmente, si vuestro sitio es multilinge ser recomendable incluir palabras clave en todos los idiomas del sitio, prestando siempre mucha atencin para evitar usar trminos demasiado genricos. En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el nmero de veces que se repite un trmino dentro de la pgina y de las palabras clave; sin embargo, repetir exageradamente la misma palabra en la marca META tiene el efecto contrario al deseado ya que la mayor parte de las araas cancelan estos sitios de las propias bases de datos. Por ello, insistimos en no exagerar con el nmero de trminos incluidos en las palabras clave. Otras marcas de metainformacin se refieren al autor de la pgina web: <META name="author" content="Nombre Apellidos"> el ttulo que aparecer tras la bsqueda: <META name="description" content="Mi primera portada con la gua de HTMLpoint"> y el nombre del editor con el que se ha generado el documento HTML: <meta name="GENERATOR" content="BLOC DE NOTAS Win95"> Si por cualquier razn quieres que una de tus pginas NO sea indicizada en los motores de bsqueda, debers incluir la siguiente marca de metainformacin: <META NAME="ROBOTS" CONTENT="NOINDEX"> Otra marca META es la que permite el "refresh" de la pgina. Esto significa que la misma pgina u otra diferente puede lanzarse automticamente tras un cierto nmero de segundos determinado por nosotros mismos. He aqu el cdigo: <META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm"> Donde CONTENT="5 es el nmero de segundos en los que la nueva pgina ser cargada, mientras que url=pippo.htm" es el archivo que ser cargado.

RESUMEN DE LA LECCIN
A continuacin figura una pgina HTML impostada segn cuanto hemos visto en esta leccin. Esta pgina constituir tambin un punto de referencia para las lecciones siguientes: <!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> <HTML> <HEAD> <META name="keywords" Content="HTML, buscadores, precios mdicos"> realizacin pginas web, portada,

<META name="description" content="Mi primera portada con la gua de HTMLpoint"> <meta name="GENERATOR" content="BLOC DE NOTAS Win95"> <META name="author" content="Nombre Apellidos"> <TITLE>Mi primera portada con la gua de HTMLpoint</TITLE> </HEAD> </HTML>

Escribir correctamente las marcas de metainformacin (META)

El estudio de los datos facilitados por los buscadores ms utilizados ha demostrado que el trmino ms buscado es "sex", y que el 80% de los usuarios no consulta ms all de la segunda pgina de la bsqueda efectuada . Esto significa que si una bsqueda por palabra clave responde con 30 pginas de direcciones web, slo 2 usuarios de cada 10 consultarn ms all de la segunda pgina. En ltima instancia, podemos afirmar que los sitios contenidos en la pgina 30 tienen una visibilidad nula. Esta consideracin debera aclarar la vital importancia de colocarse entre los primeros puestos de estas bsquedas. Est demostrado que los buscadores y los directorios llevan ms accesos y visitantes a un sitio que cualquier otro medio (revistas, enlaces con otros sitios, televisin, etc.) En vista de lo anterior, la inclusin de un sitio en un buscador o directorio es una operacin fundamental para el pleno xito del mismo. Algunas medidas y pequeas estratagemas nos pueden ayudar a lograrlo, pero no hay un modo unvoco para resultar a la cabeza de cada buscador, debido a la banal constatacin de que cada motor tiene peculiaridades propias. Antes de continuar, es conveniente precisar algunos conceptos: no es importante aparecer en todos los buscadores sino al mximo en los 10 de mayor difusin a nivel mundial y en los 2 ms importantes a nivel nacional; desconfiar de los numerosos servicios que por poco dinero prometen la insercin en 500 buscadores porque, a menudo, no dan resultado y porque, como antes sealamos, aparecer en los motores menores no tiene la menor importancia; desconfiar de los programas automticos de insercin; no esperar que las palabras clave de las marcas META sean la nica solucin de estos problemas; con frecuencia, la insercin no es inmediata y en algunos casos (Lycos y HotBot) ha sucedido incluso que la base de datos no fuese actualizada durante meses.

El nmero de personas que en EEUU se ocupan exclusivamente de la inclusin de sitios en los buscadores se estima en alrededor de 100 unidades. Esto significa que ningn directorio puede controlar materialmente todos los nuevos sitios incluidos, por lo que muchos son indicizados sin haber sido antes sometidos a verificacin. Este estado de cosas crea una cierta confusin, adems de una prdida de calidad de las inserciones. Infoseek ha hecho pblico que recibe diariamente 30.000 nuevas solicitudes de inclusin, algo menos de la mitad de las de Yahoo.com. La inclusin en los directorios est, por su misma naturaleza, ms humanizada y es difcil que sea objeto de trucos ms o menos lcitos. Antes bien, intentar colocarse astutamente en los primeros puestos de los directorios puede resultar contraproducente, visto que los operadores, conocedores del truco, incluyen el sitio en el "limbo de los listos", en una posicin prcticamente invisible. Diverso es, sin embargo, el caso de los buscadores donde quien recibe la solicitud de insercin no es un ser humano sino una araa (spider). A lo largo de los aos, las araas, no demasiado perspicaces al inicio, han ido perfeccionando sus propios instrumentos y han radicalizado en muchos casos la intolerancia ante trampas y trucos. A menudo basta una palabra clave repetida dos veces para provocar la cancelacin del sitio de la base de datos. Antes de nada, por tanto, hay que evitar resultar penalizados. Trucos que hasta hace un ao permitan colocarse en los primeros puestos de los buscadores hoy son reconocidos por las

araas. Por ejemplo, no es una buena idea insertar texto escondido en la pgina HTML de color idntico al fondo, as como no lo es tampoco crear pginas con palabras clave que no tengan ninguna relacin con el contenido del sitio slo porque son palabras que los usuarios buscan frecuentemente (p.ej., incluir el trmino "sex" en un sitio que se ocupa de informtica). Evitar radicalmente incluir pginas con una marca META "refresh" que enva a otra pgina tras un cierto nmero de segundos. Una vez dejado bien sentado que la ilegalidad no es rentable, aqu tienes una serie de sugerencias que te permitirn obtener un buen puesto en los buscadores: evitar, en la medida de lo posible, el uso de marcos HTML; no iniciar el documento HTML con una imagen o una tabla; dedicar particular atencin a la portada del sitio; evitar, en la medida de lo posible, el uso de pginas ASP (Active Server Pages) o denominadas con un nombre de archivo donde aparezca un signo de interrogacin "?"; incluir las palabras clave del sitio entre las marcas <TITLE></TITLE>, ya que muchas araas (Altavista in primis) conceden a esto gran importancia; utilizar las marcas <H1><H2> etc. crear "DOORPAGE", es decir, pginas de soporte de las pginas principales, que incluyan texto y palabras clave relacionadas con el sitio; no registrar ms de una pgina al da; registrar dominios de primer nivel. Por ejemplo, www.nome.com antes que www.nome.com/directry; la marca de metainformacin "keywords" no debe contener trminos repetidos ni ms de mil caracteres. El 90% de las bsquedas corresponde a trminos escritos en minsculas, por lo que es preferible evitar las maysculas; la marca de metainformacin "description" es fundamental porque el buscador asocia a sta el enlace con el sitio. No debe superar los 300 caracteres.

Codigo HTML para Insertar msica de fondo en tu web

Si quieren que los visitantes escuchen una cancin mientras visitan la Web, o simplemente recibirlos con una meloda estilo presentacin, este es el cdigo que estabas buscando. Solo tens que guardar el sonido en el directorio raz de tu servidor e insertar el siguiente cdigo html:

<EMBED SRC="AQUI LA URL DEL SONIDO O MUSICA EJEMPLO: MUSICA.MP3" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">