Artículos
HTML5

Crear contenido editable en HTML5

Creado: 28/Feb/2012 Actualizado: 09/Ene/2025

Una de las nuevas capacidades que encontramos dentro de HTML5 es la de definir un contenido editable. Es decir, nos permite insertar elementos dentro del documento web los cuales el usuario puede editar desde el navegador y modificar su contenido.

Lógicamente ampliando las capacidades ya existentes con el TEXTAREA para introducir texto. Así al poder crear contenido editable en HTML5 podremos estar cerca de tener un editor web (o diseñador web) de las páginas web o editores de texto con formato enriquecido.

La forma de crear contenido editable en HTML5 es muy sencilla. Lo primero que haremos será definir una capa de contenido DIV. Sobre dicha capa insertaremos texto.

<div id="micapa" style="border: thin solid; padding: 10px;">Inserta la pregunta que quieras hacernos...</div>

Podemos observar que hemos dado un pequeño estilo a la capa, agregándole un borde y un espaciado del contenido con respecto al borde.

Para convertir a la capa en editable y así poder crear contenido editable, nos bastará con añadir el atributo contentEditable y asignarle un valor de true. Ya que por defecto este atributo vendrá con un valor de false.

<div id="micapa" style="border: thin solid; padding: 10px;" contenteditable="true">Inserta la pregunta que quieras hacernos...</div>

Simplemente con la inclusión de este contentEditable hemos conseguido crear contenido editable en HTML5. Ahora cuando carguemos la página en el navegador y pulsemos sobre el texto veremos como el navegador nos deja modificar el contenido de la capa.

Como siempre con la especificación HTML5 (al menos de momento), deberemos de tener cuidado con el soporte de los navegadores del atributo contentEditable, ya que nos podemos encontrar que alguna versión no lo soporte.

Vídeos sobre HTML5

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

Test HTML5

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

Test HTML5
Artículos
Java

Crear la ruta de un fichero con Java

Creado: 25/Feb/2012 Actualizado: 29/Dic/2014

Hoy un artículo sencillo pero de mucha utilidad. Como bien sabéis, dependiendo del sistema operativo que estemos utilizando en Java, las rutas de los ficheros (llamados path) se crean de diferente forma. Veamos como podemos crear la ruta de un fichero con Java.

Así cuando vayamos a crear la ruta de un fichero con Java para un sistema operativo Windows pondremos:

c:\midirectorio\mifichero.txt

Mientras que si estamos en un sistema Linux utilizaremos:

/midirectorio/mifichero.txt

Es por ello que tenemos que tener especial cuidado en construir la ruta del fichero en nuestro programa Java. Para poder resolver esto tenemos varias alternativas. La primera sería chequeando las propiedades del sistema «os.name» y «file.separator» con .getProperty().

String so = System.getProperty("os.name");
String separador = System.getProperty("file.separator");

En el caso de «os.name» obtenemos el nombre del sistema operativo y en el caso de «file.separator» obtenemos el separador de directorios. Así, montar nuestra ruta de un fichero sería:

sPath = separador + sDirectorio + separador + sFichero;
System.out.println(sPath);

Pero, si no queremos consultar las propiedades del sistema, tenemos la constante File.separator. La cual tiene almacenado el separador de directorios del sistema operativo sobre el que nos ejecutemos. De esta forma construir la ruta de un fichero se haría de la siguiente manera:

String sPath = File.separator + sDirectorio + File.separator + sFichero;
System.out.println(sPath);

Hay que tener un poco de cuidado con la versión de Java que utilices, ya que File.separator solo está disponible desde Java 5.

¿Cual de las dos formas para crear la ruta de un fichero con Java utilizarías? ¿Conoces alguna forma de crear la ruta de un fichero con Java más?

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

Cambiar la fecha de modificación de un fichero con Java

Creado: 24/Feb/2012 Actualizado: 29/Dic/2014

Ya vimos en un artículo cómo obtener la fecha de modificación de un fichero con Java. En este caso vamos a ver cómo realizar la operación contraria, el cambiar la fecha de modificación de un fichero con Java. Esto puede ser útil, por ejemplo, si estamos haciendo una revisión de ficheros y queremos utilizar la fecha de modificación del fichero como flag para siguientes revisiones.

Lo primero instanciamos un fichero con un objeto File.

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

La fecha de modificación del fichero se la vamos a pasar en milisegundos, así que utilizaremos la función currentTimeMillis() del sistema para obtener la fecha actual en milisegundos.

long ms = System.currentTimeMillis();

Ya solo nos quedará volcar el contenido de la fecha sobre el fichero mediante .setLastModified() el cual recibirá los milisegundos como parámetro. En el caso de que la asignación haya ido correctamente la función devolverá true, en caso contrario devolverá false.

boolean cambio = fichero.setLastModified(ms);
if (cambio)
  System.out.println("Se ha cambiado la hora del sistema satisfactoriamente");
else
  System.out.println("NO se ha podido cambiar la hora");

Tres pasos sencillos para cambiar la fecha de modificación de un fichero con Java.

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
HTML5

Modificando propiedades CSS con un Slider

Creado: 23/Feb/2012 Actualizado: 09/Ene/2025

Una de las aplicaciones que podemos tener con un slider es la de modificar los valores de las propiedades CSS. Así los incrementaremos o decrementaremos, según vayamos moviendo el slider, aplicarán a ciertos valores de las hojas de estilo.

En nuestro caso, lo que vamos a hacer es modificar el tamaño del texto (font-size) y el redonde de las esquinas (border-radiux).

Lo primero será crear la página web, la cual contendrá una capa con un texto dentro.

<div id="micapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis est sit amet nulla imperdiet vestibulum...</div>

Y debajo el slider en HTML5:

<label for="mislider">Redondea los bordes:</label><br><input id="mislider" max="20" min="0" type="range" value="6"></input>

Ahora vamos a empezar a crear el código de manejo. Para ello vamos a controlar el evento onchange del slider.

barra.addEventListener("change",function(ev){	
...	
},true);

El código de este manejador será sencillo, ya que lo que hará será modificar una propiedad CSS. Bueno, en realidad, dos. Así que vamos a ver dos formas de modificar las propiedades CSS.

La primera forma será modificando el atributo de un objeto. Es decir, el borde de un estilo está representado por el campo .borderRadius. Así que solo tendremos que asignarle un valor.

var barra = document.getElementById("mislider");
resultado = barra.value;	
fuente = 2;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";	
capa.style.borderRadius = tamanio;

Si miramos el código, vemos que lo primero que hacemos es coger el valor de la barra mediante el atributo value. Este valor lo vamos a multiplicar por una base y se lo aplicamos al estilo.

La segunda forma es mediante el método .setAttribute(). En este caso, lo que hacemos es pasarle el nombre del atributo a modificar «style» y la propiedad CSS que queremos modificar.

var barra = document.getElementById("mislider");
var fuente = 2;
resultado = barra.value;	
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";	
capa.setAttribute("style","font-size:"+tamanio);

Todo nuestro código quedará de la siguiente forma:

var barra = document.getElementById("mislider");
var fuente = 2;
barra.addEventListener("change",function(ev){	
	resultado = barra.value;	
	var capa = document.getElementById("micapa");
	var tamanio = fuente*resultado+"px";	
	capa.setAttribute("style","font-size:"+tamanio);
	capa.style.borderRadius = tamanio;	
},true);

¿Qué te ha parecido este uso del slider de HTML5? ¿Se te ocurren otros?

Vídeos sobre HTML5

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

Test HTML5

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

Test HTML5
Artículos
Java

Evitar que un programa Java se cargue dos veces

Creado: 22/Feb/2012 Actualizado: 29/Dic/2014

Algunos de vosotros nos habéis preguntado sobre cómo controlar que un programa Java se cargue dos veces. Es decir, que si ya lo hemos lanzado, evitemos que se vuelva a lanzar.

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.

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

Guardar unos Properties con Java

Creado: 21/Feb/2012 Actualizado: 29/Dic/2014

Hemos visto varios ejemplos sobre cómo leer el contenido de unos Properties o cómo modificar el contenido de unos Properties. Pero, qué tenemos que hacer si una vez modificados queremos guardarlos en el fichero. Ya que la modificación solo se aplica al tiempo de vida de la ejecución del programa Java.

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","https://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();}

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
jQuery

Crear un slider con jQuery

Creado: 19/Feb/2012 Actualizado: 27/Ago/2021

Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en ciertos navegadores y consultas sobre cómo montar una alternativa.

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-slider

Código Fuente

Descárgate el código fuente de Crear un slider con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Artículos
Javascript

Como utilizar un Polyfill con Modernizr

Creado: 17/Feb/2012 Actualizado: 25/Ago/2021

Modernizr como librería Javascript está orientada a poder conocer el soporte de las capacidades CSS3 y HTML5 cuando nos ejecutemos en un determinado navegador. Pero la potencia de Modernizr no se queda solo ahí, si no que podemos hacer otras cosas como utilizar un polyfill.

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:['https://lineadecodigo.com/js/jquery/jquery.js','https://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?

Código Fuente

Descárgate el código fuente de Como utilizar un Polyfill con Modernizr
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
jQuery

Utilizar Placeholder con jQuery

Creado: 16/Feb/2012 Actualizado: 27/Ago/2021

Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario sobre que contenido insertar en dicho campo.

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:


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


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.

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.

Código Fuente

Descárgate el código fuente de Utilizar Placeholder con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Artículos
HTML5

Menú Contextual en HTML5

Creado: 14/Feb/2012 Actualizado: 09/Ene/2025

Una de las cosas que no está todavía soportada por los navegadores web respecto al HTML5 son los menús contextuales. A día de hoy solo Firefox 8 y superiores dan soporte al menú contextual en HTML5.

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 escribiremos lo siguiente:

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

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);

Vídeos sobre HTML5

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

Test HTML5

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

Test HTML5