Existen formas desde Java Web Start y el modo SingleInstanceService para evitar que un programa se cargue dos veces. Pero en nuestro caso vamos a realizarlo de una forma "más manual" en Java, pero muy efectiva.

El truco es que el programa Java cree un objeto que esté escuchando a un puerto específico del ordenador. Para ello utilizamos un ServerSocket, objeto que nos permite crear un objeto escuchando a un determinado puerto.

private static ServerSocket SERVER_SOCKET;
SERVER_SOCKET = new ServerSocket(1334);

Escoge un puerto que no sea el estándar de los protocolos: 80 para el http, 21 para el ftp,... Vamos elige un número de puerto "raro".

Además vemos que el objeto ServerSocket que hemos instanciado es un objeto estático dentro de nuestro programa. Así, nuestro programa tendrá un listener sobre un puerto, al que nadie dirá nada, pero que lo dejará como reservado.

Lo que sucede es que si intentamos volver a crear un escuchador sobre ese puerto, saldrá una excepción indicando que el puerto ya está en uso. Esto nos permite controlar que ya hay una instancia de nuestro programa ejecutándose.

try {
  SERVER_SOCKET = new ServerSocket(1334);
  System.out.println("Es la primera instancia de la aplicación...");
  System.out.println("Pulsa OK para terminar");
  System.in.read();
} catch (IOException x) {
  System.out.println("Otra instancia de la aplicación se está ejecutando...");
}

Con este simple código podemos evitar que un programa Java se ejecute dos veces.Similar Posts:

• Cerrar un frame en AWT
• Pasar parámetros a una aplicación Java
• Finalizar un objeto en Java
• Conocer el directorio de trabajo de Java
• Leer un fichero de texto en ASP

Veamos ahora como podemos guardar unos Properties con Java. Lo primero será definir unos Properties mediante la clase Properties. Los vamos a generar vía código, aunque podíamos haberlos leído de un fichero.

Properties prop = new Properties();
prop.setProperty("nombre","Linea de Código");
prop.setProperty("url","http://lineadecodigo.com");

El siguiente paso será definir el fichero el cual queremos guardar los Properties. Y como todo manejo de ficheros deberemos de abrirle un FileOutputStream.

FileOutputStream os = FileOutputStream("fichero.prop");

Ahora va lo más importante, y es que dentro de Properties tenemos el método .store() el cual persistirá los datos sobre un FileOutputStream que le pasemos como parámetro. Curiosamente el que acabamos de crear.

prop.store(os, "Fichero de Propiedades de la Web");

Una de las cosas que tienes que tener en cuenta es que en los manejos de stream puede saltar siempre la IOException. Así que nos crearemos nuestro bloque try-catch.

FileOutputStream os = null;
try {
  os=new FileOutputStream("fichero.prop");
  prop.store(os, "Fichero de Propiedades de la Web");
} catch(IOException ioe) {ioe.printStackTrace();}

Similar Posts:

• Modificar valores de un fichero Properties
• Leer valores de fichero de properties
• Escribir un fichero ISO Latin 1
• Número de líneas de un fichero
• Escribir un fichero UTF-8

Lo que vamos a ver en este artículo es como crear un slider con jQuery. Y no es que jQuery nos de un slider como elemento base de su lenguaje, si no que vamos a utilizar un plugin de jQuery para poder crear un slider.

En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder.

Lo bueno del plugin fd-slider es que al ser un polyfill nos permite construir nuestra página con HTML5 y solo se ejecutará en aquellos navegadores que lo necesiten y durante el tiempo que lo necesiten.

Lo primero que tenemos que saber del plugin es que lo componen dos ficheros:

fd-slider.js
fd-slider.css

Utilizando el loader de Modernizr veremos que quedaría de la siguiente forma:

Modernizr.load({
	test:Modernizr.inputtypes.range,
	nope:['fd-slider.js','fd-slider.css']
});

Vemos que la capacidad que validamos del HTML5 es Modernizr.inputtypes.range.

Una vez cargados los ficheros del plugin fd-slider tenemos que lanzar el siguiente código para inicializar el plugin:

fdSlider.onDomReady();

Así que insertaremos dicho código dentro del polyfill.

Modernizr.load({
  test:Modernizr.inputtypes.range,
  nope:['fd-slider.js','fd-slider.css'],
  complete:function(){if(fdSlider)fdSlider.onDomReady();}
});

Ya tendremos cargado nuestro slider con jQueryfuncionando en la página.

Os podéis descargar el plugin fd-slider desde https://github.com/freqdec/fd-sliderSimilar Posts:

• Como utilizar un Polyfill con Modernizr
• Utilizar Placeholder con jQuery
• Controlar volumen de vídeo HTML5 con un Slider
• DataList en HTML5
• Modernizr y las capacidades HTML5 y CSS3

Pero, ¿qué es un polyfill? Pues un polyfill es como se denomina a una librería Javascript que nos permite cubrir las capacidades HTML5/CSS3 que los navegadores no soportan. Es decir, completan al navegador para que se pueda ejecutar una página web construida con HTML5/CSS3 sin problemas.

Es decir, el código que creemos será estándar HTML5/CSS3 de tal manera que Modernizr nos ayudará a utilizar solo el polyfill si se necesita debido a las carencias del navegador.

Lo bueno es que Modernizr ya cuenta con una extensa librería de Polyfills.

En nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en Placeholder. Ambos artículos ya explicados en Línea de Código.

Para utilizar el polyfill de Modernizr tenemos que conocer el método Modernizr.load. La filosofía de este método es la siguiente:

Modernizr.load({
  test: capacidad-a-validar,
  yep : 'fichero-a-cargar-si-correcto.js',
  nope: 'fichero-a-cargar-si-no-soporte.js',
  complete: 'cosas-a-hacer-siempre.js'
});

Es decir, se testea la capacidad de HTML5/CSS3 que queramos cubrir. Si hay soporte se cargan los ficheros Javascript o CSS3 que haya en la parte del yep. Si no se soporta la propiedad testeada, se cargan los ficheros del nope. Y siempre, pase lo que pase, se carga lo que haya en complete.

Nosotros vamos a testear la propiedad Modernizr.input.placeholder que valida si hay soporte de placeholders. En el caso de que no lo haya cargamos el plugin 'jquery.placeholder.js' y lo inicializamos.

Para inicializar el plugin tendremos que ejecutar la siguiente línea de código:

$("input, textarea").placeholder();

El código del como utilizar un polyfill en Modernizr nos quedaría de la siguiente forma:

Modernizr.load({
        test:Modernizr.input.placeholder,
        nope:['http://lineadecodigo.com/js/jquery/jquery.js','http://lineadecodigo.com/js/jquery/plugins/jquery.placeholder.min.js','placeholder.js']
});

En placeholder.js hemos metido la inicialización del plugin.

Esperamos que se haya entendido el concepto del polyfill en Modernizr y cómo cargarlos. En vuestro caso, ¿qué polyfills estás utilizando?Similar Posts:

• Crear un slider con jQuery
• Modernizr y las capacidades HTML5 y CSS3
• Utilizar Placeholder con jQuery
• PlaceHolder: Marcadores de posición en HTML5
• JSEclipse

Si bien, uno de los problemas que nos plantea el uso de ciertas propiedades HTML5 es la falta de implementación por parte de ciertos navegadores. Es por ello que la experiencia del usuario de esos navegadores puede ser diferente a la del resto.

Si queremos utilizar placeholders sin HTML5 podemos recurrir a un plugin de jQuery. Mediante el uso de jQuery y este plugin será muy sencillo poder utilizar un placeholders. Además es que la forma en la que utilicemos el placeholders será la misma forma en la que lo utilizábamos en HTML5.

Es decir, si queremos crear un placeholders pondremos lo siguiente:

<label for="texto">Nombre: </label>
<input type="text" id="texto" placeholder="Inserte su nombre" size="40" />

Para poder utilizar el placeholders con jQuery tendremos que hacer varias cosas. La primera será instanciar jQuery e instanciar el plugin de jQuery.

<script src="jquery.js"></script>
<script src="jquery.placeholder.min.js"></script>

Y el siguiente paso inicializar el plugin de jQuery. En este caso el código de incialización es:

$('input, textarea').placeholder();

Si bien, deberemos de esperar a tener cargada la página. Por ello recurriremos al método ready() de jQuery.

<script>
$(document).ready(function(){
	$('input, textarea').placeholder();
});
</script>

Con un plugin de jQuery y unas pocas líneas de código tenemos la capacidad de dar soporte a los placeholders de HTML5.

Te puedes descargar el plugin jQuery desde https://github.com/mathiasbynens/jquery-placeholder.Similar Posts:

• Como utilizar un Polyfill con Modernizr
• Crear un slider con jQuery
• PlaceHolder: Marcadores de posición en HTML5
• Seleccionar un texto solo si no ha cambiado
• Seleccionar texto al posicionarse en un campo

Pero, ¿qué es un menú contextual? Un menú contextual es aquel menú asociado a una zona de la página y el cual tenemos disponible mediante el botón derecho del ratón.

Lo primero de todo será saber cómo se define un menú contextual. Para ello vamos a necesitar el elemento menú.

 
<menu id="colorMenu">...</menu>
 

Lo importante en el caso de estar creando un menú contextual es que el tipo del menú es "context". Otros valores son "toolbar" o "list".

Lo siguiente que haremos será definir los diferentes items o elementos que tendrá el menú. En este caso utilizamos el elemento menuitem para dar de alta cada uno de ellos.

 
<menu type="context" id="colorMenu">
<menuitem label="Rojo" id="rojo" icon="rojo.png"/></menuitem>
<menuitem label="Verde" id="verde" icon="verde.png"/></menuitem>
<menuitem label="Azul" id="azul" icon="azul.png"/></menuitem>
</menu>
 

Vemos que cada menuitem lleva asociado un atributo label, que será el texto que aparezca en la opción del menú, un id y un icono, el cual definimos mediante el atributo icon. Ya solo nos quedará decidir dónde se va a lanzar el menú. Sobre que parte de la página se podrá ver este menú contextual en HTML5. Para ello utilizamos el atributo general contextmenu, al cual deberemos de pasar el ID del menú que acabamos de crear. Que queremos aplicar el menú sobre una sección de la página escribiremos:

 
<section contextmenu="colorMenu" id="miseccion">
</section>
 

Que lo queremos aplicar sobre un campo de input, pues escribirmos lo siguiente:

<label for="color">Color:</label>
<input id="color" type="text" contextmenu="colorMenu">
 

Ya solo nos quedará pulsar con el botón derecho sobre la zona del menú contextual para ver el efecto.

Sobre los menús contextuales podemos manejar los eventos como sobre cualquier otro elemento de la página. Así podemos añadir el siguiente código en Javascript para controlar el click sobre las opciones del menú contextual.

var campo = document.getElementById("color");
var color = document.getElementById("colorMenu");
color.addEventListener("click",function(ev){
	campo.value = ev.target.label;
},true);

Similar Posts:

• Cambiar estilos dinámicamente
• Seleccionar el texto de un campo
• DataList en HTML5
• Acceder a un campo de formulario con jQuery
• Poner un fondo en mi página web

Para crear un canvas en HTML5 tenemos que utilizar el elemento CANVAS.

<canvas>
  Contenido alternativo
</canvas>

A un elemento CANVAS podemos darle un alto y ancho mediante los atributos height y width respectivamente. Así como darle un identificador mediante el atributo id.

<canvas height="300px" width="300px" id="micanvas"></canvas>

En el caso de que no indiquemos las dimesiones, estas serán de 300x150.

Una vez que tenemos nuestro "lienzo" vamos a dibujar algún gráfico. Para ello utilizaremos el lenguaje Javascript. Así lo primero que haremos será obtener la referencia sobre el CANVAS mediante un getElementById().

var canvas = document.getElementById("micanvas");

Dentro de un CANVAS podemos volcar varios contextos. Lo que son conocidos como contextos de renderizado. Así podremos tener contextos 2D y 3D. Estos últimos todavía en fase experimental. El método .getContext() sobre el CANVAS nos permitirá crear un nuevo contexto.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

Ahora ya pasaremos a dibujar gráficos. Así, con el manejo de una propiedad: .fillStyle y un método .fillRect() podemos crear rectángulos de colores. En el caso de .fillStyle recibe como parámetro un color definido en formato RGB y en el caso de .fillRect() las coordenadas de los vertices superior izquierdo, así como el alto y ancho.

Así nos quedará el código que insertará gráficos al crear nuestro primer canvas con HTML5.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
 
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(20,20,100,100);
 
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(60,60,140,140);
 
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(100,100,180,180);

Similar Posts:

• Modernizr y las capacidades HTML5 y CSS3
• document.getElementById
• Parar la descarga de un vídeo en HTML5
• Dibujar una elipse en SVG
• Crear elementos HTML con JavaScript

Lo primero será poner el vídeo en nuestra página web.

<video id="mivideo" controls>
  <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

Cuándo el usuario pulse al play se irán sucediendo una serie de eventos. Uno de los eventos importantes es timeupdate. Dicho evento se envía progresivamente según avanza la visualización del vídeo. Así que tendremos que crear un listener sobre dicho evento en el vídeo.

 var v = document.getElementById("mivideo");
 v.addEventListener("timeupdate",function(ev){
  ...
 },true);

Cuándo se ejecute el método asociado al listener deberemos de acceder al atributo .currentTime del HTMLMediaElement, ya que este atributo es el que contiene el tiempo transcurrido del vídeo. Este tiempo será en segundos.

Lo que nosotros hacemos es volcar el contenido del atributo .currentTime sobre una capa. Este contenido se irá actualizando cada vez que se lance el evento timeupdate en el vídeo.

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
 },true);

Si queremos "dejarlo bonito" podemos convertir el tiempo en segundos en un formato reloj, igual que explicábamos en el artículo Convertir segundos en formato hora con Javascript.

Nosotros hemos metido este código dentro de una función que la hemos llamado hora, la cual recibe una cantidad de segundos, los cuales los devuelve en un formato hh:mm:ss.

 function hora(segundos){
  var d=new Date(segundos*1000);
  // Ajuste de las 23 horas
  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();
  return hora+":"+minuto+":"+segundo;
 }

Ya solo nos quedará invocar a esta función desde el listener:

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
   document.getElementById("tiempo").innerHTML = hora(v.currentTime);
 },true);

Similar Posts:

• Tiempo total de un vídeo HTML5
• Convertir segundos en formato hora con Javascript
• Convertir una cadena a fecha en Javascript
• Elemento rango en formularios HTML5
• Crear eventos con JavaScript

Lo primero será definir el formulario. En nuestro caso tendrá dos simples campos de entrada de texto:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

Si lo que queremos es que el autofoco se realice sobre el campo INPUT nombre, le añadiremos el atributo autofocus. Quedándonos el siguiente código:

 
<form>
  <label for="nombre">¿Cómo te llamas?</label>
<input id="nombre" autofoucs type="text" />
  <label for="edad">¿Cuántos años tienes?</label>
<input id="edad" type="text" />
</form>
 

El atributo autofocus solo puede aplicarse sobre un único campo del formulario

Solo tenemos que tener cuidado de una cosa y es que la especificación HTML5 todavía no está terminada ni implementada en todos los navegadores web. Es por ello que puede ser que no funcione correctamente. Las versiones mínimas en las que funciona son Chrome 6, Firefox 4, Opera 11, Safari 5 e Internet Explorer 10. Quizás la versión del Internet Explorer sea la que más problemas pueda ocasionarte.

En este caso podemos recurrir a la implementación en Javascript. En este caso vamos a crear mediante Javascript un elemento INPUT ficiticio y vamos a comprobar si este tiene el atributo autofocus o no. En caso de que no lo tenga lanzaremos el código Javascript con el método .focus()

if(!("autofocus" in document.createElement("input")))
  document.getElementById("nombre").focus();

Similar Posts:

• Hacer foco en un campo de la página usando JavaScript
• Seleccionar texto al posicionarse en un campo
• Cambiar el valor de un radio group dinámicamente
• Seleccionar un texto solo si no ha cambiado
• PlaceHolder: Marcadores de posición en HTML5

Lo primero que haremos será poner en nuestra página los elementos HTML5 que necesitemos, ya que el código Javascript que incorporemos será siempre no intrusivo.

El vídeo, mediante el elemento VIDEO será el siguiente:

<video id="mivideo" controls>
  <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

Y el slider será mediante un elemento input y su tipo "range"

<label for="volumen">Volumen: </label>
<input type="range" min="0" max="1" value="1" step="0.1" id="volumen">
<input type="checkbox" id="mute"><label for="mute">Mute</label>

Además hemos incorporado un checkbox para simular el mute. Es decir, para quitar el sonido al vídeo.

Lo primero, las referencias a los elementos:

var mute = document.getElementById("mute");
var barra = document.getElementById("volumen");

Sobre el tema de controlar el volumen del vídeo deberemos de saber que la propiedad que gestiona el volumen de un vídeo en HTML5 es .volume del elemento HTMLMediaElement. Y que los valores que puede tomar dicha propiedad van desde el 0.0 hasta el 1.0 con saltos de 0.1. Algo importante ya que como vemos son los valores que hemos dado a las propiedades min, max y step del slider.

Así la codificación ante un cambio del slider, es decir, ante que se produzca un evento change, será el asignar el valor del slider al volumen del vídeo.

barra.addEventListener("change",function(ev){
  var v = document.getElementById("mivideo");
  v.volume = ev.target.value;
  mute.checked=false;
},true);

Vemos en el código que el .value del slider se lo asignamos a la propiedad .volume del vídeo.

Utilizamos .addEventListener para adjuntar la gestión de un evento a un elemento en concreto.

Además hemos añadido el manejo del mute. es decir, si cambiamos el slider (movemos el volumen) se desactivará la casilla del mute.

Ahora vamos con el mute. Para esto gestionamos el evento change del checkbox. Cada vez que cambie el checkbox veremos que hacer. Pero antes de esto nos vamos a crear una variable que nos permite mantener la información del volumen. Esta nos servirá para que cuando desactivemos el mute, recuperemos la última posición del volumen. A esta variable la hemos llamado oldvolume.

var oldvolume = 1;

Inicializada a 1, al igual que sucede con el volumen.
Ahora solo tenemos que jugar con el valor del checkbox. Su atributo .checked nos indicará si este está activo o no.

mute.addEventListener("change",function(ev){
	var v = document.getElementById("mivideo");
	if (ev.target.checked) {
		oldvolume = v.volume;
		v.volume = 0;
		barra.value = 0;
	} else {
		v.volume = oldvolume;
		barra.value = oldvolume;
	}
},true);

La lógica, la siguiente. Si está activado hay que apagar el volumen (atributo volume a 0 y el slider con un valor de 0), pero guardándonos la posición actual del volumen en la variable oldvolume.

Que el checkbox está desactivado, pues reponemos el valor de la variable oldvolume tanto al slider, como al atributo .volume del vídeo.

Con todo esto ya podemos controlar el volumen de vídeo HTML5 con un Slider.Similar Posts:

• Contar checkbox activos con JavaScript
• Elemento rango en formularios HTML5
• Cambios en un combo con jQuery
• Tiempo total de un vídeo HTML5
• Cambiar el valor de un radio group dinámicamente