Artículos
→ HTML →

Cargar un vídeo AVI, ASF o WMV en mi página web

Creado: 29/Ago/2007 Actualizado: 11/Jul/2021

Si tuviésemos que catalogar los formatos de vídeo propietarios de Microsoft podríamos hablar de los tres siguientes: AVI, ASF y WMA.

  • AVI «Audio Video Interleave» el primero de los formatos. Muy expandido en todas las plataformas Microsoft. Está siendo superado por las nuevas tecnologías.
  • ASF «Advanced Streaming Format» utilizado para web streaming.
  • WMV “Windows Media Video” que es el formato asociado para ser utilizado con el reproductor Windows Media Player de Microsoft. Este software está disponible en varias plataformas, incluido SUN Solaris y Macintosh.

La idea de este ejemplo es ver como poner uno de estos vídeos dentro de una página web.

El principal problema a la hora de manipular los vídeos dentro de las páginas web es la disparidad de formatos, de software necesario para visualizarlo y la poca estandarización en las etiquetas HTML.

Es por ello, que posiblemente, lo mejor sea poner un enlace sobre el vídeo para que cada usuario se lo descargue y lo visualice con el software de su plataforma cliente. Si utilizamos esta opción es recomendable que se indique el nombre de fichero, tamaño y tipo.

Por ejemplo:

Torre Eiffel (69kb fichero WMV)

El código para hacer esto es muy sencillo ya que tendremos que utilizar el elemento a.

<a href="TorreEiffel.wmv">Torre Eiffel (69kb fichero WMV)</a>

Si nos centramos en visualizar algún vídeo de los formatos AVI, ASF y WMV lo que tendremos que aprender es el cómo cargar el Windows Media Player y cómo este puede ser parametrizado.

Según la W3C el método correcto de visualización sería con la etiqueta <OBJECT>, aunque los navegadores siguen soportando la etiqueta <EMBED>.

Los atributos más importantes de la etiqueta object son data, donde se indicará el nombre del fichero de vídeo a ser cargado y type donde se indicará el mime-type del fichero. Opcionalmente podremos indicar el alto y ancho del vídeo mediante los atributos width y height.

Si hablamos de los mime-type de los ficheros de video de Microsoft podemos tomar como referencia la siguiente tabla:

MIME type Extensión
video/x-ms-asf asf,asx
video/x-ms-wm wm
video/x-ms-wmv wmv
video/x-ms-wvx wvx

El código nos quedará de la siguiente forma:

<object data="TorreEiffel.wmv" type="video/x-ms-wmv" width="320" height="240"></object>

Pero podemos ir algo más allá. Y es con el Window Media Player. En estos momentos representado como un objeto puede recibir parámetros para su configuración, los cuales podemos pasar a la etiqueta object mediante la etiqueta param.

Algunos de esos parámetros son:

  • src, nombre del fichero con el video.
  • autostart, el valor 1 hará que se empiece a reproducir nada más ser cargado. El valor 0 hará el efecto contrario.
  • volumen, número entero con el valor del volumen.
  • showControls, con el valor 0 no se mostrará los controles del video (play, stop, pause,…). El valor 1 hará que se vean estos controles
  • showDisplay, muestra información del fichero (valor 1). Por defecto deshabilitado (valor 0)
  • showStatusBar, muestra la barra de avance del video. Por defecto habilitado (valor 1).
  • playcount, número de veces que se repetirá el video.

El código nos quedaría finalmente de la siguiente guisa:

<object data="TorreEiffel.wmv" type="video/x-ms-wmv" width="320" height="240">
   <param name="src" value="TorreEiffel.wmv" />
   <param name="autostart" value="1" />
   <param name="volume" value="0" /> 
   <param name="showcontrols" value="0" />
   <param name="showdisplay" value="0" />
   <param name="showstatusbar" value="0" />
   <param name="playcount" value="9999" />
</object>

El soporte de este objeto está disponible en Internet Explorer, FireFox, Opera,… Si te encuentras problemas con el FireFox (o algún otro de la familia Mozilla) te recomendaría que te leyeses este artículo (lamentablemente solo en ingles) http://forums.mozillazine.org/viewtopic.php?t=206213 sobre cómo validar si está bien instalado tu plug-in del FireFox.

Código Fuente

Descárgate el código fuente de Cargar un vídeo AVI, ASF o WMV en mi página web
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Artículos
→ wForms →

Validar que el campo es un email

Creado: 28/Ago/2007 Actualizado: 16/Dic/2025

Uno de los campos más comunes, cuando hacemos formularios web, es el de la dirección de e-mail. Imaginemos un alta de usuario, un libro de visitas, una respuesta en un blog,… Y lo más normal será que enviemos algún correo a dicha dirección en un momento posterior.

Es por ello que nos interesa que la dirección de correo sea válida. Cuando hablamos que sea válida queremos decir que sea una dirección real a la que se pueda enviar e-mails. Para comprobar que es válida hay varios mecanismos, en el lado del servidor. Si bien, podemos adelantarnos a la validación en el formulario.

En este caso la validación solo será de formato. Es decir, que el e-mail está bien formado:

[email protected]

Esto nos evitará que la gente ponga cosas que no cuadren con ese formato en el campo de email.

Si bien, hay que recordar que esto no prueba que sea una dirección válida. Ya que cosas como «[email protected]» pasaría la validación, y quizás no sea un e-mail real.

Pero bueno, una validación es una validación.

En este caso nos vamos a apoyar en la librería wForms. Puedes leerte algunos artículos sobre uso de wForms en Linea de Código. Para muestra Campos Obligatorios de un formulario con wForms, Validar que un campo del formulario es alfabético con wForms,…

Lo primero, cargar la librería. Para ello incluimos el siguiente código script en la cabecera de la página.

<script type="text/javascript" src="wforms.js"></script>

Para validar el email será muy sencillo. Y es que solo tendremos que dotarle de la clase «validate-email» al campo imput que queramos que contenga los emails.

Quedándonos la siguiente línea de código:

<input type="text" id="email" class="validate-email">>

Ahora, si intentamos introducir un valor que no tenga el formato del email, nos generará un error.

Lo último que nos queda por hacer es configurar el mensaje que queremos mostrar al usuario cuando el formato del email no sea válido. Para ello podemos modificar la variable JavaScript wFORMS.behaviors[‘validation’].errMsg_email.

<script type="text/javascript">
wFORMS.behaviors['validation'].errMsg_email = "El email introducido no tiene un formato valido";
wFORMS.behaviors['validation'].errMsg_notification = "%% error(s) detectado(s). El formulario no se enviará.nPor favor, chequea la información suministrada.";
</script>


Visualizar el ejemplo | Descargar el código

Artículos
→ Java →

Leer una URL con Java

Creado: 27/Ago/2007 Actualizado: 08/Jun/2015

Normalmente, cuando tenemos una URL lo que hacemos es ponerla en un navegador para ver su contenido. Pero hay muchos programas que se dedican a analizar el código fuente de las páginas. Ya sean buscadores, optimizadores de código, validadores,…

En este segundo caso necesitaremos de un código que abra una conexión y examine su código, en vez de mostrarlo por pantalla. En nuestro caso vamos a utilizar el lenguaje Java para llevar a cabo nuestro cometido.

Lo primero es tener una URL. Para ello nos apoyamos en la clase URL, que nos validará si el texto introducido es realmente una URL bien formada (con su protocolo, su nombre de servidor,…)

URL url = new URL("http://www.lineadecodigo.com");

Su por cualquier motivo insertásemos otro texto que no fuese una URL, acabaríamos teniendo una MalformedURLException.

Una vez creado el objeto URL deberemos de abrir un InputStream sobre el para poder leer la información que contiene. Como si fuese cualquier otro origen de datos. En este caso una dirección web.

try {
  // Volcamos lo recibido al buffer
  in = new BufferedReader(new InputStreamReader(url.openStream()));
} catch(Throwable t){}

Este InputStream lo manejaremos con un BufferedReader, el cual nos facilitará en sobre manera la lectura del contenido.

Sobre este BufferedReaderr iremos leyendo línea por línea mientras que el contenido de lo leído sea diferente de null. Controlaremos de la misma forma que no se produzcan excepciones, IOException.

while ((inputLine = in.readLine()) != null) {
     inputText = inputText + inputLine;
}

El contenido leído lo podemos almacenar en un String que mostraremos posteriormente por pantalla. Al final solo quedará cerrar el stream.

Código Fuente

Descárgate el código fuente de Leer una URL con Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
→ Java →

Java y la palabra más larga de una frase

Creado: 26/Ago/2007 Actualizado: 26/Dic/2024

El otro día, uno de nuestros visitantes nos preguntaba como podía hacer un código que le localizase la palabra más larga de una frase con Java. Y porqué no ayudarle, si era un código muy sencillo y que seguro podrá ayudar a más gente.

Lo más recomendable es empezar leyéndose dos artículos: Contar palabras en Java y Contador de ocurrencias en Java. Estos nos explican como se pude saber cuantas palabras componen una cadena y cuales son. Uno de ellos mediante el uso del StrinkTokenizer y el otro mediante .indexOf().

Ahora vemos como saber cual es la palabra más larga de una frase. La idea es sencilla, iremos recorriendo todas las palabras de la frase y mientras las recorremos veremos cual de ellas es la de mayor tamaño.

Inicialmente definimos que la palabra mayor es vacía y con tamaño 0.

String palabraMasGrande = "";
int palabraMasGrandeSize = 0;

Por otro lado, partimos la cadena con el texto en las palabras que la conforman. Esto lo hacemos mediante la clase StrinkTokenizer.

StringTokenizer stTexto = new StringTokenizer(sTexto);

Ahora recorremos el StrinkTokenizer para analizar las palabras.

int palabras = stTexto.countTokens();

for (int x=0;x><palabras;x++){
	sCadena = stTexto.nextToken();
  	System.out.println(sCadena);
}

Dentro del bucle tenemos que analizar la palabra. Si el tamaño de la palabra, que obtenemos mediante el método .length(), es mayor que el tamaño de la palabra más grande, entonces nos guardamos la palabra actual y su método.

int palabras = stTexto.countTokens();

for (int x=0;x<palabras;x++){
	sCadena = stTexto.nextToken();
    	if (sCadena.length() > palabraMasGrandeSize){
    		palabraMasGrande = sCadena;
    		palabraMasGrandeSize = sCadena.length();
   	}
}

Código Fuente

Descárgate el código fuente de Java y la palabra más larga de una frase
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
→ Java →

Invertir una cadena con Java

Creado: 25/Ago/2007 Actualizado: 29/Mar/2020

En una de nuestras páginas, uno de nuestros visitantes nos pedía un programa sobre como invertir una cadena en Java. Vamos a ver que código necesitamos para poder hacer esto.

Lo primero es tener una cadena. Esto es sencillo:

String sCadena = "LineaDeCodigo";

La idea es muy simple. Iremos recorriendo la cadena, carácter a carácter, desde el último carácter hasta el primero. Para ello nos apoyamos en un bucle for.

for (int x=sCadena.length()-1;x>=0;x--)
  sCadenaInvertida = sCadenaInvertida + sCadena.charAt(x);

Para obtener el último carácter lo haremos mediante el método .length() que nos da el tamaño de la cadena y restándole uno. Esto es así ya que los caracteres de la cadena están numerados del 0 al tamaño de la cadena menos uno.

Ahora solo tendremos que volcar a consola la cadena invertida:

System.out.println(sCadenaInvertida);

 

Código Fuente

Descárgate el código fuente de Invertir una cadena con Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
→ Java →

Contador de Ocurrencias en Java

Creado: 19/Ago/2007 Actualizado: 01/Jun/2015

La idea consiste en ver cuantas veces se repite una ocurrencia (o palabra) dentro de una frase utilizando el lenguaje Java.

Para buscar el texto dentro de una frase utilizaremos el método .indexOf() la cual devuelve la posición de la cadena a partir de la cual empieza la cadena buscada. En el caso de que no encuentre la cadena devolverá el valor -1.

sTexto.indexOf(sCadenaBuscada);

Esto solamente nos devolvería la posición de la primera ocurrencia de la frase.

Para poder evaluar si la ocurrencia aparece más veces debemos de repetir la búsqueda del indexOf() sobre el resto de la frase. Es por ello que nos quedaremos con un substring desde la posición en que termina la primera ocurrencia (indexOf(Ocurrencia) + Ocurrencia.length()) hasta el final del texto (sTexto.length).

sTexto = sTexto.substring(sTexto.indexOf(
	      sTextoBuscado)+sTextoBuscado.length(),sTexto.length());

Sobre esta nueva cadena volveremos a realizar la búsqueda de la ocurrencia. Esto lo repetiremos hasta que el método .indexOf() nos retorne -1.

while (sTexto.indexOf(sTextoBuscado) > -1) {
      sTexto = sTexto.substring(sTexto.indexOf(
        sTextoBuscado)+sTextoBuscado.length(),sTexto.length());
      contador++; 
}

Código Fuente

Descárgate el código fuente de Contador de Ocurrencias en Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
→ Javascript →

Obtener el contenido de un elemento conociendo su TAG

Creado: 17/Ago/2007 Actualizado: 25/Ago/2021

Dentro del manejo del DOM de una página HTML, la función más utilizada suele ser document.getElementsById(). Si bien, disponemos de otra serie de funciones que nos ayudarán a obtener el contenido de los elementos de la página.

Este es el caso de la función getElementsByTagName, la cual recuperará un array de elementos que correspondan con la etiqueta pasada como parámetro.

Así, por ejemplo, podríamos recuperar todas las etiquetas de tipo A (anchor) mediante la siguiente línea de código:

var enlaces = document.getElementsByTagName("A");

Una vez recuperado el array, simplemente tendremos que acceder a los elementos que lo conforman para poder acceder a los objetos DOM. En cada objeto DOM podremos acceder a sus propiedades.

Si hablamos de la etiqueta A (anchor), podremos acceder al destino del enlace href, al nombre del enlace,….

Si queremos recorrer todos los enlaces de la página, deberemos de utilizar el siguiente código:

for (x=0;x<enlaces.length;x++)
	document.write(enlaces[x].name + ": " + enlaces[x].href + "<br>");

Código Fuente

Descárgate el código fuente de Obtener el contenido de un elemento conociendo su TAG
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
→ Javascript →

Convertir un array en una cadena con JavaScript

Creado: 16/Ago/2007 Actualizado: 21/May/2015

Si estamos manejando un array de elementos dentro de nuestra página HTML y queremos enviarlo al servidor, es bastante recomendable que lo convirtamos en una cadena. De esta forma facilitaremos el envío y recepción de este dato en el servidor.

En primer lugar tendremos el array con los elementos a enviar:

var nombres = ['amaya','julio','miguel ángel','elena','saira','nacho','andrea'];

Para poderlos juntar deberemos de utilizar el método .join() de JavaScript. Este método recibe un parámetro, que será el carácter que se ponga entre cada elementos cuando estos se conviertan en una cadena. Esto siempre y cuando queramos. Si no queremos, bastará con dejar el carácter vacío.

La línea de código será la siguiente:

cadena = nombres.join('#');

En este caso hemos utilizado una almohadilla para separar los elementos.

El código final quedará de la siguiente forma:

// Partimos del array
var nombres = ['amaya','julio','miguel ángel','elena','saira','nacho','andrea'];

// Recorremos el array y lo mostramos por pantalla
for (x=0;x<nombres.length;x++)
	document.write(nombres[x] + "<br>");

cadena = nombres.join('#');
document.write(cadena);

Si este artículo te ha parecido interesante, te recomiendo que te leas Dividir una cadena en elementos con JavaScript, que muestra como se hace lo contrario (convertir una cadena en un array) y Función Replace en JavaScript, el cual explica como utilizar los métodos .split y .join para implementar el método replace en JavaScript.

Código Fuente

Descárgate el código fuente de Convertir un array en una cadena con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Artículos
→ Javascript →

Dividir una cadena en elementos con JavaScript

Creado: 15/Ago/2007 Actualizado: 21/May/2015

Cuando estamos manejando cadenas en JavaScript nos encontraremos casos en los que deseemos convertir estas en arrays o viceversa. Ya que, en determinadas ocasiones, es más fácil manejar en forma de array su contenido.

Pero posicionémonos. Pensemos cuando estamos recopilando información en formularios de las páginas o estamos decargándonos información al navegador. Si la información es una lista de elementos, tendremos varias formas de manipularla como parámetro

La primera será tener un parámetro por cada elemento. Con ello tendremos URL de la siguiente forma:

https://lineadecodigo.com/enviar.php?p1=amaya&p2=julio&p3=andrea

Lo que hacemos es encadenar pares nombre-valor. Si bien, si varían el número de elementos, emisor y receptor tendrán un código a la hora de manipular los elementos.

La segunda forma es enviarlos todos en un único parámetro con los valores en una cadena. En este caso tendríamos algo así:

https://lineadecodigo.com/enviar.php?p=amaya,julio,andrea

En este caso daría igual que tengamos más o menos valores.

Ahora lo que tenemos que saber es como, una vez que tenemos esta cadena, podemos dividirla en N elementos dentro de un array. Porque, estaremos de acuerdo que, manipular como array una lista de elementos es más sencillo.

Empezamos con una cadena JavaScript con los elementos.

var cadena = "amaya, julio, miguel ángel, elena, saira, nacho, andrea";

Si queremos dividirlo y convertirlo en un array podemos utilizar el método .split(caracter_de_division). Este método partirá la cadena en tantos elementos como caracteres de división encuentre. El carácter por el que dividirá será el que se pase como parámetro al método.

El método se ejecutará sobre la misma cadena y nos devolverá el array de elementos.

var nombres = cadena.split(",");

Código Fuente

Descárgate el código fuente de Dividir una cadena en elementos con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
→ Noticias Web →

Nuevo validador de markup de la W3C

Creado: 14/Ago/2007 Actualizado: 26/Dic/2024

La gente de la W3C ha puesto a disposición un nuevo validador HTML/XHTML, en su versión 0.8.1, mejorando al que ya tenía disponible en su web.

Aunque a primera vista pueda parecer un «lavado de cara», ya que el interface se ha visto modificado, esta nueva versión incorpora modificaciones en el motor de validación.

Una de las nuevas características es la posibilidad de corregir el código mediante HTML Tidy. En este caso, si encuentra código HTML/XHTML mal formado, el validador, mediante HTML Tidy te propondrá un nuevo código corregido.

Por ejemplo, nosotros le hemos pasado el siguiente código mal formado:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>lineadecodigo.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body style="background-color: #ffffff; color: #033b73; font-family: arial, sans;">
 
<h1>cabecera1
<h2>cabecera2</h3>
</body>
</html>

Y el validador nos ha aconsejado el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<title>lineadecodigo.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
 body.c1 {background-color: #ffffff; color: #033b73; font-family: arial, sans;}
</style>
</head>
<body class="c1">
<h1>cabecera1</h1>
<h2>cabecera2</h2>
</body>
</html>

Vemos que nos ha corregido cosas como:

  • Poner los estilos de forma aislada, en vez de en línea
  • Nos ha corregido las etiquetas mal formadas de las cabeceras H1 y H2

Podéis utilizar el validador en http://validator.w3.org/

Vía: W3C