Inserción de Multimedia en Pagina Web

1. Sonido2. Video

Cómo incrustar un reproductor VLC en HTML

Reproducir audio y video a través de streaming hace que los sitios web sean más interactivos e interesantes. Si tienes un sitio web y deseas publicar videos informativos o de diversión 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 código abierto con un un servidor de streaming incorporado. Con más de 100 millones de usuarios, es uno de los reproductores multimedia más populares. Incorporar el reproductor a tus páginas web requiere unas pocas líneas de código HTML.

Necesitarás

Un editor de páginas web (como Notepad, Dreamweaver o NetObjects)

1. Abre la página HTML que deseas editar con un editor de texto o un editor de páginas web

(por ejemplo: Notepad, Write Pad o Dreamweaver).

2.Desplázate hasta el área donde deseas insertar el clip de audio o de video en la página web.

3.Copia y pega el siguiente código en el editor, en la ubicación dónde VLC Media Player se

mostrará dentro de la página:

4.Edita los parámetros en la sección "Modo de incrustación". Esta sección te permitirá

personalizar el reproductor de tu página web. Cambia "Reproducción automática" a "No" si deseas que el usuario deba hacer clic en el botón "Reproducir" para iniciar la pista o video. Cambia el parámetro "Bucle" a "Sí" si deseas que los archivos se repitan de manera infinita hasta que sean detenidos por el usuario.

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

6.Reemplaza el nombre "mipelicula.avi" con el nombre de la pista o clip que aparecerá en

elreproductor multimedia. Asegúrate de cargar el archivo en la misma carpeta que la página web, de modo que el navegador pueda hacer referencia a la ruta correcta del archivo.

7.Cambia los parámetros de ancho y altura para que se adapten a tu página web dependiendo

de tus necesidades.

8.Guarda la página web en tu editor y carga la página HTML y el clip o video a tu sitio web.

Sonidos o música de fondoLa presencia de archivos sonoros en forma de MIDI o WAV puede servir como agradable banda sonora mientras se navega por el web, pero también puede ser un pesado fardo que sirve sólo para hacer más lento el cargado y poner nervioso al visitante. Como repetiremos a menudo en esta guía, no podemos olvidar que aunque, sin lugar a dudas, una atractiva impostación gráfica y musical de las páginas web es importante, es fundamental que la navegación no llegue a ser lenta o incluso, en última instancia, imposible si nos preocupa mínimamente nuestra cuenta de teléfono. 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 más ligeros, como veremos a continuación).

Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y consideremos que queramos insertarlo como fondo de la página web nada más abrirse ésta, automáticamente por tanto.

Antes de nada, debemos pensar que Navigator y MSIE utilizan marcas diversas para llamar automáticamente un archivo MIDI de fondo.

Por ejemplo, la marca <BGSOUND> funciona sólo con MSIE pero no con Navigator (LOOP indica el número 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.

Además de los archivos MIDI, con la marca <BGSOUND> es posible insertar archivos .WAV y .AU

Para permitir la apertura automática de un archivo audio también con Netscape, hay que usar la marca <EMBED>:

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

Haz clic aquí (http://www.htmlpoint.com/guida/guida_audio_2.htm) tanto con MSIE como con Navigator para probar.También en este comando además de los archivos MIDI es posible insertar archivos .WAV y .AU

Una de las rémoras para la inserción de archivos midi en las propias páginas, obedece al hecho de que, cada vez que se cambia página, 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 página en los otros marcos. ¿Y por lo que respecta a los sitios sin marco? Una pequeña estratagema que toma piede los marcos puede ser la de construir una página con un marco "invisible".Para ello, se crea una página con el siguiente código:

<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 código que invoca el archivo audio:

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

y en el marco "central" el contenido de las páginas. Esta es la dirección de prueba: http://www.htmlpoint.com/guida/guida_audio_3.html

Otra "estratagema" para escuchar un archivo audio (SÓLO CON NETSCAPE) de manera continua incluso cuando se cambia página, es el de cargar dicho archivo en una ventana alternativa del navegador.

Para hacer esto, es necesario utilizar un pequeño pero importantísimo TARGET.Los TARGET se usan sobre todo en los marcos pero pueden usarse también en otros casos. Así, por ejemplo, si queremos que una página 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 código sería:

<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 (aquélla desde la que se ha LANZADO el enlace). Aquí tienes el ejemplo práctico:

Para escuchar el midi se da clic en el siguiente link:http://www.htmlpoint.com/guida/imagine.mid

Este procedimiento es válido sólo 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á

automáticamente en la ventana precedente ya abierta para "imagine.mid" (o sea, no se abrirán decenas de ventanas).

Desgraciadamente, esto funciona sólo con Netscape y no con MSIE. Para atender las necesidades de los usuarios del navegador de Redmond es necesario arquitectar un procedimiento algo más 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 automáticamente el midi.

Para probar, haz clic aquí (http://www.htmlpoint.com/guida/guida_audio_2.htm). 

Este procedimiento funciona con ambos navegadores. 

<HEAD> encabezar el documentoPara 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 aparecerán sin formato de ningún tipo: sin separación de líneas o párrafos, 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 imágenes 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 información necesaria para interpretar correctamente la página.

Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento.

Es fácil comprender que el cuerpo del documento contiene todos los elementos de la página: el texto, las imágenes, los apliques (applet) Java, el código 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 función no visible pero fundamental. Entre los elementos facilitados por la cabecera podemos citar: el título de la página, los términos clave para los buscadores, el tipo de HTML soportado y los enlaces base de referencia.Aquí analizaremos sólo algunos elementos, omitiendo por el momento el estudio de aquéllos que no resultan inmediatamente necesarios para la comprensión del HTML:

HTML DOCTYPE

HEAD

TITLE

META

A continuación describiremos detalladamente las peculiaridades más relevantes de cada uno de los elementos anteriores.

<HTML>

Todos los elementos y el contenido de un documento HTML están encerrados dentro de las marcas <HTML></HTML> cuya función 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 más 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 (piénsese, por ejemplo, en el XML) y corremos el riesgo de que el navegador malinterprete las marcas, confundiéndolas con otros lenguajes de marcado. Los usuarios de viejos navegadores corren el riesgo de visualizar un documento pésimamente formateado.

DOCTYPE

Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debería ser el primer elemento que abriera un documento. Esto quiere decir que iría colocado antes de <HTML>.Se trata de una marca que no precisa de cierre y cuya función es proporcionar información al servidor de web anfitrión de la página. Los datos que facilita DOCTYPE se refieren al tipo de documento visualizado además de ser necesarios para la comunicación entre navegador y servidor. DOCTYPE se debe escribir de una forma estándar:

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">

Esta línea proporciona algunos datos sobre el documento:

HTML PUBLIC: el documento es público IETF: el tipo de HTML público está gestionado por la Internet Engineering Task Force DTD HTML 4.0: la versión de HTML soportada es la 4.0 EN: el idioma del documento es el inglés

El uso de DOCTYPE no es obligatorio y puede omitirse. Ciertamente, su utilización ayuda al servidor de web a interpretar correctamente el documento, pero su falta no condiciona la correcta visualización.

Tal y como puede observarse fácilmente 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 después de la apertura de la marca <HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información que necesita el navegador, el servidor de web y los motores de búsqueda. 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 título 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 más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. La que figura a continuación 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 marcapáginas" (para Netscape) la marca TITLE da nombre a la conexión. En otras palabras, cuando se guarda la dirección, el navegador asigna al mismo lo que aparece dentro de <TITLE></TITLE>. La imagen que sigue muestra el efecto en MsIe (idéntico para Netscape):

El contenido que aparece entre las marcas <TITLE></TITLE> es utilizado también por algunos buscadores para indicizar la página y buscar palabras clave. Altavista constituye probablemente el ejemplo más eclatante. Por ello, es recomendable proporcionar en el TITLE una descripción detallada aunque sintética de la página, 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 añaden el sitio al marcapáginas y de los buscadores.

La sintaxis correcta de la marca TITLE es la siguiente:

<TITLE>Mi primera portada con la guía de HTMLpoint</TITLE>

META

Los buscadores representan un recurso indispensable para quienes buscan información en la red, y sitios como Altavista, Yahoo, Lycos y Excite se cuentan entre los más visitados de Internet.Figurar en dichos motores de búsqueda es fundamental para quien crea páginas web y quiere mayor visibilidad. Es necesario, antes de nada, señalar las propias páginas a estos buscadores, lo que se efectúa mediante pequeños formularios presentes en las páginas web bajo la frase "Add your site". Periódicamente estas arañas (spider) supervisan los millones de páginas contenidos en sus bases de datos verificando las eventuales modificaciones. 

Además de ser incluidos en los buscadores, es importante figurar en los primeros puestos de la lista que aparece al efectuar la búsqueda (a menudo, sobre todo cuando los términos que se buscan son de uso frecuente y de carácter 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 metainformación (META), cadenas de códigos 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 términos que, de manera resumida, describen el contenido de una página web. Si, por ejemplo, el sitio se ocupa de la realización de páginas web, las palabras clave serán:

HTMLrealización páginas webportadabuscadoresprecios módicos.......

La marca META deberá impostarse como sigue:

<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos">

La coma divide unos términos de otros. No se escriben comas dentro de las frases que constan de más de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas.

Naturalmente, si vuestro sitio es multilingüe será recomendable incluir palabras clave en todos los idiomas del sitio, prestando siempre mucha atención para evitar usar términos demasiado genéricos. En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el número de veces que se repite un término dentro de la página 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 arañas cancelan estos sitios de las propias bases de datos. Por ello, insistimos en no exagerar con el número de términos incluidos en las palabras clave.

Otras marcas de metainformación se refieren al autor de la página web:

<META name="author" content="Nombre Apellidos"> 

el título que aparecerá tras la búsqueda:

<META name="description" content="Mi primera portada con la guía 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 razón quieres que una de tus páginas NO sea indicizada en los motores de búsqueda, deberás incluir la siguiente marca de metainformación:

<META NAME="ROBOTS" CONTENT="NOINDEX"> 

Otra marca META es la que permite el "refresh" de la página. Esto significa que la misma página u otra diferente puede lanzarse automáticamente tras un cierto número de segundos determinado por nosotros mismos.He aquí el código:

<META HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm"> 

Donde CONTENT="5 es el número de segundos en los que la nueva página será cargada, mientras que url=pippo.htm" es el archivo que será cargado.

RESUMEN DE LA LECCIÓN

A continuación figura una página HTML impostada según cuanto hemos visto en esta lección. Esta página constituirá también un punto de referencia para las lecciones siguientes:

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<META name="keywords" Content="HTML, realización páginas web, portada, buscadores, precios módicos">

<META name="description" content="Mi primera portada con la guía de HTMLpoint"><meta name="GENERATOR" content="BLOC DE NOTAS Win95">

<META name="author" content="Nombre Apellidos">

<TITLE>Mi primera portada con la guía de HTMLpoint</TITLE>

</HEAD></HTML>

Escribir correctamente las marcas de metainformación (META)

El estudio de los datos facilitados por los buscadores más utilizados ha demostrado que el término más buscado es "sex", y que el 80% de los usuarios no consulta más allá de la segunda página de la búsqueda efectuada. Esto significa que si una búsqueda por palabra clave responde con 30 páginas de direcciones web, sólo 2 usuarios de cada 10 consultarán más allá de la segunda página. En última instancia, podemos afirmar que los sitios contenidos en la página 30 tienen una visibilidad nula. Esta consideración debería aclarar la vital importancia de colocarse entre los primeros puestos de estas búsquedas. Está demostrado que los buscadores y los directorios llevan más accesos y visitantes a un sitio que cualquier otro medio (revistas, enlaces con otros sitios, televisión, etc.)

En vista de lo anterior, la inclusión de un sitio en un buscador o directorio es una operación fundamental para el pleno éxito del mismo. Algunas medidas y pequeñas estratagemas nos pueden ayudar a lograrlo, pero no hay un modo unívoco para resultar a la cabeza de cada buscador, debido a la banal constatación 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 máximo en los 10 de mayor difusión a nivel mundial y en los 2 más importantes a nivel nacional;

desconfiar de los numerosos servicios que por poco dinero prometen la inserción en 500 buscadores porque, a menudo, no dan resultado y porque, como antes señalamos, aparecer en los motores menores no tiene la menor importancia;

desconfiar de los programas automáticos de inserción; no esperar que las palabras clave de las marcas META sean la única solución de estos

problemas; con frecuencia, la inserción no es inmediata y en algunos casos (Lycos y HotBot) ha

sucedido incluso que la base de datos no fuese actualizada durante meses.

El número de personas que en EEUU se ocupan exclusivamente de la inclusión de sitios en los buscadores se estima en alrededor de 100 unidades. Esto significa que ningún directorio puede controlar materialmente todos los nuevos sitios incluidos, por lo que muchos son indicizados sin haber sido antes sometidos a verificación. Este estado de cosas crea una cierta confusión, además de una pérdida de calidad de las inserciones. Infoseek ha hecho público que recibe diariamente 30.000 nuevas solicitudes de inclusión, algo menos de la mitad de las de Yahoo.com.

La inclusión en los directorios está, por su misma naturaleza, más humanizada y es difícil que sea objeto de trucos más o menos lícitos. 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 posición prácticamente invisible. Diverso es, sin embargo, el caso de los buscadores donde quien recibe la solicitud de inserción no es un ser humano sino una araña (spider). A lo largo de los años, las arañas, 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 cancelación del sitio de la base de datos. Antes de nada, por tanto, hay que evitar resultar penalizados. Trucos que hasta hace un año permitían colocarse en los primeros puestos de los buscadores hoy son reconocidos por las arañas. Por ejemplo, no es una buena idea insertar texto escondido en la página HTML de color idéntico al fondo, así como no lo es tampoco crear páginas con palabras clave que no tengan ninguna relación con el contenido del sitio sólo porque son palabras que los usuarios buscan frecuentemente (p.ej., incluir el término "sex" en un sitio que se ocupa de informática). Evitar radicalmente incluir páginas con una marca META "refresh" que envía a

otra página tras un cierto número de segundos.Una vez dejado bien sentado que la ilegalidad no es rentable, aquí tienes una serie de sugerencias que te permitirán 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 atención a la portada del sitio; evitar, en la medida de lo posible, el uso de páginas ASP (Active Server Pages) o

denominadas con un nombre de archivo donde aparezca un signo de interrogación "?"; incluir las palabras clave del sitio entre las marcas <TITLE></TITLE>, ya que muchas

arañas (Altavista in primis) conceden a esto gran importancia; utilizar las marcas <H1><H2> etc. crear "DOORPAGE", es decir, páginas de soporte de las páginas principales, que

incluyan texto y palabras clave relacionadas con el sitio; no registrar más de una página al día; registrar dominios de primer nivel. Por ejemplo, www.nome.com antes que

www.nome.com/directry; la marca de metainformación "keywords" no debe contener términos repetidos ni más

de mil caracteres. El 90% de las búsquedas corresponde a términos escritos en minúsculas, por lo que es preferible evitar las mayúsculas;

la marca de metainformación "description" es fundamental porque el buscador asocia a ésta el enlace con el sitio. No debe superar los 300 caracteres. 

Codigo HTML para Insertar música de fondo en tu web

Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando. Solo tenés que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código html:

 

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