Linea de Codigo

Ciertos sistemas o propiedades nos pueden dar datos en formato de segundos. Si estamos en ese caso y queramos convertir segundos en formato hora con Javascript deberemos de seguir los siguientes pasos.

Lo primero será guardar en una variable los segundos:

segundos = 1341;

Ahora instanciaremos un objeto de Tipo Date. La inicialización del objeto Date es mediante milisegundos, por lo que necesitaremos multiplicar por 1000 nuestro valor en segundos.

var d=new Date(segundos*1000);

Ahora solo tenemos que acceder a los métodos del objeto Date. Al .getHours(), getMinutes() y getSeconds(). Estos nos dará los valores en formato hora.

var hora = (d.getHours()==0)?23:d.getHours()-1;
var hora = (hora<9)?"0"+hora:hora;
var minuto = (d.getMinutes()<9)?"0"+d.getMinutes():d.getMinutes();
var segundo = (d.getSeconds()<9)?"0"+d.getSeconds():d.getSeconds();

De este código hay que fijarse en dos cosas. La primera es que el valor de la hora retornará una hora más de la que realmente es. Es por ello que hacemos la corrección.

var hora = (d.getHours()==0)?23:d.getHours()-1;

Y lo segundo en lo que debemos de fijarnos es en el uso del operador ternario para poner los minutos, segundos y horas en un formato de dos dígitos. Y es que los valores inferiores al 10 siempre vendrán solos. Es decir, 1, 2, 3, 4,... cuando nosotros queremos poner 01, 02, 03, 04,...

Solo quedará volcar el contenido y añadir los dos puntos:

document.write(hora+":"+minuto+":"+segundo);

Ya hemos visto que con el uso del objeto Date hemos conseguido convertir segundos en formato hora con Javascript.

¿Por qué cuando se carga mi página web en HTML5 no se ve el vídeo? ¿Cómo puedo controlar un error de carga de un vídeo en HTML5? Estas pueden ser algunas de las preguntas que nos hagamos cuándo vemos que nuestros vídeos no están funcionando.

Si queremos controlar un error en un elemento de vídeo en HTML5 lo primero que tenemos que hacer es suscribirnos al evento error del vídeo. Para ello utilizaremos un escuchador o addEventListener sobre el elemento HTMLMediaElement que represente nuestro vídeo.

Así, si nuestro vídeo es:

<video id="mivideo" controls>
	<source src="videonoexiste.ogv" type="video/ogg"></source>
	Tu navegador no soporta el elemento <code>video</code>
</video>

Para suscribirnos al evento error del vídeo lo haremos mediante la siguiente línea de código:

v.addEventListener("error",function(ev){
  alert("Error");
},true);

Cuando salte un error sobre el vídeo se ejecutará el contenido de la función. Pero si queremos ser más concretos en el análisis del error podemos comprobar el valor de la variable networkState. Esta variable representa la interacción entre el vídeo y la red.

Si el valor de networkState es igual NETWORK_NO_SOURCE eso significa que no se ha podido encontrar el origen del vídeo. Así modificaremos el código de nuestra gestión de errores para controlar un error de carga de un vídeo en HTML5:

v.addEventListener("error",function(ev){
  logError("Error en el vídeo");
  if (ev.currentTarget.networkState == ev.currentTarget.NETWORK_NO_SOURCE){
    logError("No encontrado el origen del vídeo");
  }
},true);

Cuando cargamos un vídeo en HTML5 el navegador buscará el origen del vídeo, comprobará si puede visualizar el tipo de vídeo que se le indica como origen y validará si los codecs son correctos. Un vez hecho eso empezará la descarga del vídeo, es decir, empezará a descargar el contenido del vídeo hasta el final del mismo.

Pero qué pasa si no queremos seguir visualizando el vídeo, si queremos parar la descarga con el fin de que no se consuma ancho de banda de nuestra conexión.

Veamos como hacerlo. De primeras veremos que en el DOM nos encontramos el elemento HTMLMediaElement con un método .pause(). Si ejecutamos dicho método solo pararemos la ejecución del contenido multimedia, pero no se parará la descarga del vídeo, es decir, la imagen la veremos congelada, pero el navegador seguirá descargándose el contenido.

var v = document.getElementById("mivideo");
v.pause();

Pero para poder parar la descarga de un vídeo en HTML5 no nos valdrá solo con el método .pause(), si no que tenemos que jugar con el atributo .src, al cual desasignaremos el valor, es decir, le daremos el valor de una cadena vacía. Una vez parado el vídeo y desasignado el valor de su atributo .src conseguiremos parar la descarga.

var v = document.getElementById("mivideo");
v.pause();
v.src="";

En el caso de Firefox no sirve solo con desasignar la cadena .src, si no que tendremos que realizar la carga del nuevo valor mediante el método .load(). Esto producirá que se envíe el evento abort del HTMLMediaElement. Si bien habremos conseguido parar la descarga de un vídeo en HTML5.

var v = document.getElementById("mivideo");
v.pause();
v.src="";
v.load();

En este ejemplo vamos a ver como obtener el directorio padre de un fichero con Java. Es decir, el directorio del cual depende el fichero que instanciemos.

Lo primero será instanciar un fichero mediante la clase File.

File fichero = new File("test.txt");

Ahora se podría pensar que es tan sencillo como utilizar el método .getParent() y ya obtendríamos el directorio padre del fichero. Es decir, que el siguiente código:

fichero.getParent();

Ya nos retornará el directorio. Pero, por desgracia, no funciona ya que no hemos instanciado el fichero con un path y por lo tanto el método .getParent() devolverá null.

Así que, dado el fichero text.txt, vamos a obtener su ruta absoluta mediante .getAbsolutePath() e instanciaremos el fichero.

File fichero = new File("test.txt");
File fichero2 = new File(fichero.getAbsolutePath());
System.out.println("El directorio padre del fichero es " + fichero.getParent());

Con esas líneas ya podremos obtener el directorio padre de un fichero con Java.

Trabajando con ficheros en Java nos puede ser de utilidad obtener fecha de modificación de un fichero. Los pasos para conseguirlo son sencillos.

En primer lugar deberemos de acceder al fichero mediante la clase File.

File fichero = new File("test.txt");

Ahora que ya tenemos instanciada la clase File utilizaremos el método .lastModified(), el cual nos devolverá la fecha de la modificación pero en formato de milisegundos.

long ms = fichero.lastModified();

Así, las siguientes líneas tendrán que servirnos para convertir los milisegundos en una fecha. Esto, en Java, lo podemos conseguir mediante una clase Calendar, la cual instanciaremos mediante un Date y el resultado devuelto por .lastModified().

Date d = new Date(ms);
Calendar c = new GregorianCalendar();
c.setTime(d);

Por último nos apoyaremos en las constantes Calendar.DATE, Calendar.MONTH, Calendar.MINUTE,... para sacar los valores que nos ayuden a obtener la fecha de modificación de un fichero con Java.

dia = Integer.toString(c.get(Calendar.DATE));
mes = Integer.toString(c.get(Calendar.MONTH));
annio = Integer.toString(c.get(Calendar.YEAR));
hora = Integer.toString(c.get(Calendar.HOUR_OF_DAY));
minuto = Integer.toString(c.get(Calendar.MINUTE));
segundo = Integer.toString(c.get(Calendar.SECOND));

Una cosa básica que tenemos que aprender a empezar con Javascript es el manejo de arrays y por consiguiente saber como inicializar un array en Javascript.

Lo primero será instanciar el array...

var miarray = new Array(4);

Una vez instanciado el array vemos que tenemos varias formas de inicializar un array en Javascript. La primera es indicando los valores del array en la propia instanciación.

var ciudades = new Array("Avila","Salamanca","Zamora","León");

La segunda es asignando los valores a cada una de las posiciones del array.

var ciudades = new Array(4);
ciudades[0] = "Avila";
ciudades[1] = "Salamanca";
ciudades[2] = "Zamora";
ciudades[3] = "León";

En nuestro caso hemos declarado un array de 4 posiciones y a la hora de asignar los valores tenemos que recordar que en Javascript el primero de los elementos es el 0 y el último será el tamaño del array menos 1.

Si pensamos en la optimización de los arrays se puede evitar el uso de la sentencia new. Ya que el Array es un elemento primitivo del lenguaje. En este sentido, la forma más óptima sería la siguiente:

var ciudades = ["Avila","Salamanca","Zamora","León"];

Así crearemos el array en base a un conjunto de cadenas.

Por último recordemos que los arrays de Javascript no están tipados. Es por ello que podemos inicializar un array en Javascript con diferentes tipos de datos: cadenas, enteros, booleanos,... En este caso podríamos tener la siguiente inicialización de un array:

var miarray = new Array("Victor",34,true);

Ya hemos aprendido a cómo cargar un vídeo en HTML5 dentro de nuestra página y a cómo cargar el vídeo en HTML5 desde diferentes formatos. En el código de hoy veremos cómo iniciar automáticamente un vídeo en HTML5.

Y es que el hecho de insertar las etiquetas VIDEO dentro de nuestra página web no implica que el vídeo aranque automáticamente. Si no que deberemos de utilizar los controles (los cuales cargamos mediante el atributo HTML5 controls) para iniciarlo.

Pues bien, para iniciar automáticamente un vídeo en HTML5 tenemos dos formas. La primera consiste en utilizar el atributo autoplay del elemento VIDEO. Simplemente añadiendo este parámetro en nuestro código HTML5 conseguiremos que se inicie automáticamente. El código será el siguiente:

<video autoplay="autoplay" controls>
  <source src="videos/tecla.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

La segunda opción será utilizar el interface Javascript que nos ofrecen los elementos multimedia en HTML5. Este interface es conocido como HTMLMediaElement. En concreto utilizaremos un método que se llama .play() y que comos u nombre bien nos indicar inicializa la ejecución del vídeo.

Así lo primero que haremos será obtener la referencia al elemento vídeo de nuestra página (que ya no tiene el autoplay).

var v = document.getElementsByTagName("video")[0];

Esto lo podemos hacer vía id con .getElementById() o por etiqueta con .getElementsByTagName(). En ambos casos tendremos la refenrencia sobre el vídeo. Ya solo nos quedará el ejecutar el método .play().

v.play();

Si queremos que este código simule que se inicie automáticamente el vídeo, deberemos de ponerlo en el onLoad de la página o al final estructura de la misma.

Así, podemos tener en nuestra página dos vídeos HTML5 iniciados automáticamente, uno vía el elemento HTML5 y otro con el interface HTMLMediaElement y Javascript.

<video controls>
  <source src="http://lineadecodigo.com/recursos/videos/tecla.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>
 
<video autoplay="autoplay"controls>
  <source src="http://lineadecodigo.com/recursos/videos/tecla.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>
 
<script type="text/javascript">
 var v = document.getElementsByTagName("video")[0];
 v.play();
</script>

Dentro de CSS3 tenemos la capacidad de embeber nuestras propias fuentes dentro de nuestra página web. Abriendonos a un gran abanico de tipografías y evitando las restricciones de las propias fuentes que vienen definidas en el estándar de CSS.

Esto nos dará una gran potencia, ya que simplemente tendremos que generar texto y aplicarles la nueva tipografía gracias a la capacidad de embeber nuestras propias fuentes y no tendremos que recurrir a soluciones como la integración de tipografías con imágenes. Tendremos una página web más ligera.

Lo primero que tenemos que hacer es tener una tipografía. Las extensiones soportadas son TrueType (.ttf), OpenType (.otf) y Scalable Vector Grapgichs (.svg).

Así, nuestra fuente elegida para el ejemplo de embeber fuentes en CSS3 es NisePico.ttf.

La regla que tenemos que meter en CSS3 para embeber nuestra fuente es @font-face. Esta regla lo que hace es definir el nombre de nuestra fuente e indicar de dónde se descarga dicha fuente. Así el código será el siguiente:

@font-face {
     font-family: 'NisePico';
     src: url('NisePico.ttf');
}

Ya simplemente podremos utilizar la fuente NisePico dentro de cualquier uso del font en nuestras CSS. Así, por ejemplo, podemos definirnos el siguiente estilo.

.fuente1 {
     font: 40px 'NisePico', Arial, sans-serif;;
     color:red;
     letter-spacing: 0;
     text-align:center;
     text-shadow: 3px 3px 7px #111;
}

Que asignaremos a la clase de cualquier elemento:

<span class="fuente1">EstO es una fuente NisePicO</span>

Aunque embeber fuentes en CSS3 es muy potente, tenemos que tener cuidado en comprobar que los navegadores sobre los que despleguemos nuestro desarrollo, tienen capacidad de interpretar el @font-face.

El soporte lo podemos encontrar desde Internet Explorer 9, Firefox 6, Chrome 13, Safari 3.2 y Opera 11 en adelante.

Apoyándonos en los ejemplos que nos enseñaban a generar ficheros en ISO y a generar ficheros en UTF-8, así como en los que leian de un fichero en ISO y leian un fichero en UTF-8 vamos a construir un código que nos permita hacer la conversión. Es decir, convertir un fichero ISO en un fichero UFT-8.

La idea es muy sencilla, lo que tendremos que hacer es abrir un stream de lectura sobre un fichero ISO y un stream de escritura sobre un fichero UTF-8.

Para realizar la escritura del fichero ISO utilizamos un BufferedReader sobre un InputStreamReader. Será en el InputStreamReader dónde indicaremos la codificación del fichero a leer. La codificación "8859_1" es la que representa el ISO.

El código será el siguiente:

BufferedReader in = new BufferedReader(new InputStreamReader(new FileInputStream("FicheroISO1.txt"), "8859_1"));

La apertura del stream de escritura será muy similar, pero en este caso utilizando un BufferedWriter y un OutputStreamWriter. Al igual que en la anterior línea de código, es el OutputStreamWriter con el que indicamos la codificación. Esta será utf-8.

Writer out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream("FicheroSalidaUTF8"), "utf-8"));

Ya solo nos queda ir leyendo del BufferedReader y volcando sobre el .

String sCadena;
while ((sCadena = in.readLine())!=null) {
  System.out.println(sCadena);
  out.write(sCadena);
}

El último paso de nuestro código de conversión es el cierre de los ficheros.

in.close();
out.close();

Con una lectura/escritura y teniendo en cuenta las codificaciones de los ficheros, hemos conseguido, de una forma sencilla, convertir un fichero de ISO a UTF-8.

En el ejemplo cargar un vídeo con HTML5 veíamos una forma sencilla de cargar un vídeo del formato Ogg con código HTML5. En este caso vamos a ver cómo cargar un vídeo desde diferentes orígenes con diferentes formatos.

Es decir, vamos a indicarle a nuestro navegador dónde puede encontrar diferentes formatos. Esto se hace así debido a que el navegador puede no reconocer y cargar alguno de los formatos. En ese caso, al indicarle una lista, cargará el primero de los formatos que consiga interpretar.

Recordamos los formatos con los que se trabaja en HTML5:

• MPEG-4, extensiones .mp4 o .m4v
• Flash, la extensión .flv
• Ogg, la extensión .ogv
• WebM, extensión .webm

Si el formato es único nos vale con indicar el origen en el atributo src del elemento VIDEO.

<video src="/videos/tecla.ogv" controls>
  Tu navegador no soporta el elemento <code>video</code>.
</video>

Pero para cargar un vídeo de diferentes formatos con HTML5 tenemos que apoyarnos en el elemento SOURCE. El elemento SOURCE contendrá un atributo src que indique el origen del vídeo y otro atributo type dónde indicaremos el tipo del elemento multimedia que vamos a cargar.

El elemento SOURCE será un elemento anidado dentro del elemento VIDEO.

Así, nuestro código para que el vídeo pueda ser cargado de diferentes formatos es el siguiente:

<video controls>
  <source src="/videos//tecla.ogv" type="video/ogg"></source>
  <source src="/videos/tecla.mp4" type="video/mp4"></source>
  <source src="/videos/tecla.webm" type="video/webm"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>