septiembre 2012 - Línea de Código

→ Google →

Incluir una marca en Google Maps

Creado: 29/Sep/2012 Actualizado: 27/Ago/2021

Cuando trabajemos con los mapas de Google Maps, una vez que hayamos ubicado un sitio una de las primeras cosas que querremos hacer es añadir una marca dentro del mapa. Vamos a ver qué pasos hay que seguir.

Lo primero como en todo ejemplo de Google Maps será el cargar el mapa. Recuerda la forma en la que cargamos la librería de Google Maps para la versión 3.

Y acto seguido inicializar el mapa sobre una capa:

var myLatlng = new google.maps.LatLng(40.65599461,-4.69373720);
var mapOptions = {
  zoom: 12,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
					
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

vemos que el primer parámetro del objeto Map es el ID de la capa en la que cargaremos el mapa y el segundo son las opciones de configuración del mapa.

Ahora vamos a incluir nuestra marca. Lo primero que tenemos que sabes es que la marca se representa mediante el objeto Marker. Y que en el objeto de inicialización especificaremos, al menos:

Las coordenadas de la marca que estarán representadas por un objeto LatLng. Como ya habíamos definido uno para el centro del mapa, vamos a reutilizarlo.
El mapa sobre el cual queremos añadir la marca.
La etiqueta que queremos que aparezca al pasar sobre la marca

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Avila de los Caballeros"
});

Hay otras opciones que podemos indicar al crear el objeto Marker, como pueden ser: si queremos que se pueda hacer drag&drop de la marca, si queremos que la marca haga sombra,…

Así, simplemente creando la marca tenemos incluida nuestra marca dentro de un mapa de Google Maps.

→ HTML5 →

Descargar un Canvas a una imagen con HTML5

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

En el artículo Exportar el contenido de un Canvas HTML5 a una imagen veíamos como podíamos convertir el contenido del Canvas en una imagen y cargar dicha imagen dentro de un elemento IMG de nuestra página. En este vamos a ver como podemos descargar el contenido del Canvas a un fichero.

El primer paso será la conversión del Canvas a un formato imagen. De igual forma que lo hicimos al Exportar el contenido de un Canvas HTML5 a una imagen vamos a utilizar el método .toDataURL para extraer el contenido del Canvas en Base64.

var dato = canvas.toDataURL("image/png");

Pero en este caso no vamos a mover este contenido al elemento IMG, si no que lo vamos a poner en la URL del navegador. En este caso accedemos al objeto location.href

document.location.href = dato;

Esto provocará, ¿la descarga?. Ummmmm, la verdad que no. Si lo ponemos en la imagen en la URL lo que sucederá es que se cargará la imagen dentro del área de visualización del navegador.

Es por ello que antes de subirla a la URL vamos a manipular su contenido y donde esté el tipo de mimetype de la imagen, es decir «image/jpeg» vamos a poner «image/octet-stream».

dato = dato.replace("image/png", "image/octet-stream");

Ahora, al poner la imagen en la URL, el navegador decidirá, al encontrarse el mimetype «image/octet-stream», descargar la imagen.

El código completo sería:

var jpeg = document.getElementById("jpeg");
jpeg.addEventListener("click",function(){	
  var dato = canvas.toDataURL("image/jpeg");
  dato = dato.replace("image/jpeg", "image/octet-stream");
  document.location.href = dato;	
},false);

Con estas tres sencillas líneas de código podemos descargar el contenido de un Canvas a una imagen con HTML5.

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?

→ Java →

Bloquear un fichero con Java

Creado: 16/Sep/2012 Actualizado: 29/Dic/2014

Si estamos trabajando con ficheros en Java es posible que tengamos la necesidad de mantener consistente la información que contiene alguno de ellos. Para ello, una solución puede pasar por realizar un bloqueo lógico de un fichero. Es decir, marcar al fichero como bloqueado, para que el resto de procesos sepan que no deben tocar su contenido para mantenerlo consistente. Así que vamos a ver cómo podemos bloquear un fichero con Java.

Lo primero que haremos para bloquear un fichero con Java será obtener una referencia sobre el fichero mediante una clase File:

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

Para acceder al fichero vamos a utilizar la clase RandomAccessFile en formato lectura y escritura. Y sobre ese objeto vamos a recuperar su canal de acceso mediante el método .getChannel().

FileChannel channel = new RandomAccessFile(file, "rw").getChannel();

Lo que manejamos en este momento es un objeto del tipo FileChannel. Un canal en Java es la evolución de un Stream normal de datos. El caso del FileChannel se representa una conexión abierta sobre un recurso sobre la cual se pueden realizar múltiples operaciones. Una de las operaciones que podemos realizar sobre el canal es bloquearlo o liberarlo.

Así, si queremos bloquear un fichero con Java, lo que hacemos es bloquear el canal mediante el método .lock().

FileLock lock = channel.lock();

Lo que obtenemos en este caso es un objeto FileLock. Este objeto será el que nos sirva para chequear el estado del canal/fichero antes de acceder a él. Si queremos ver si el fichero está bloqueado utilizamos el método tryLock() que devolverá una excepción OverlappingFileLockException en el caso de que haya un bloqueo.

try {
  lock = channel.tryLock();
} catch (OverlappingFileLockException e) {  }

También tenemos que saber que para liberar el bloqueo del fichero tenemos el método .release()

lock.release();

Lo último que deberemos de hacer a la hora de bloquear un fichero con Java es cerrar el canal sobre el fichero con el método .close()

channel.close();

Con estas pequeñas líneas de código hemos podido bloquear 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?

→ HTML5 →

Geolocalizando a un usuario con HTML5

Creado: 15/Sep/2012 Actualizado: 09/Ene/2025

HTML5 Geolocalización

En HTML5 tenemos la capacidad de geolocalizar a un usuario, es decir, saber la posición en la que se encuentra mostrándola en una posición de longitud y latitud.

El dispositivo de usuario obtendrá la posición geolocalizada de diferentes formas: o bien tirando del dispositivo GPS (si lo tuviera) o bien obteniéndolo del WIFI o router de la red a la que esté conectado. La diferencia estará en la exactitud de la posición obtenida.

Para realizar la geolocalización habrá que tirar del objeto navigator.geolocation. Así que lo primero que tendremos que comprobar es si el navegador soporta dicho objeto:

if (navigator.geolocation) {...}

En el caso de que haya soporte del objeto navigator.geolocation invocaremos el método .getCurrentPosition() Este método recibe como parámetro la función de callback en la que estará el resultado de la geolocalización.

var x=document.getElementById("posicion");
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  x.innerHTML="Geolocation is not supported by this browser.";
}

En nuestro caso, la función showPosition será la que reciba la posición. Esta función recibe un objeto Position con la posición de la geolocalización. El objeto Position tiene los atributos latitude y longitude en los cuales encontramos la posición.

function showPosition(position) {
  x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}

Lo último que hemos hecho ha sido volcar el contenido sobre una capa.

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?

→ jQuery →

Implementando un Twitter Follow Box

Creado: 14/Sep/2012 Actualizado: 27/Ago/2021

Twitter Follow Box es un plugin realizado en JQuery que nos permite agregar al mejor estilo Facebook, nuestros seguidores de Twitter. No requiere grandes conocimientos para incorporarlo a nuestra web y nos llevará muy poco tiempo realizarlo. Para llevar a cabo la implementación de este plugin debemos realizar los siguientes pasos:

Descargar el plugin de la web del autor.
Incorporar en el header los links a la librería de JQuery, al arhivo de CSS y a la librería del plugin.
Escribir el div donde vamos a alojar el contenido del twitter follow box.
Escribir el script de llamada al código del plugin.

Descarga del plugin

Primero debemos descargar el fichero zip desde la página de sus creadores haciendo click aquí. Una vez que lo descargamos debemos acomodar los archivos que encontramos:

JS: jquery.followbox.min.js es la versión que podemos usar en producción y jquery.followbox.js es la versión que podemos utilizar para debbuguear. Estos archivos son el core del plugin.
CSS: followbox.css. Es el archivo de CSS. En este archivo hay dos themes: el principal y el dark. Lo pueden modificar a su manera.
Imagen: icon_twitter.png. Este archivo es un loguito de Twitter que se encuentra al lado del link que apunta a la página del desarrollador. Tengan en cuenta que esta imagen está enlazada a una ruta específica dentro de los archivos JS antes mencionados. Para cambiar la ruta de donde lo alojen tienen que editar el archivo y buscar: var d=»followbox/icon_twitter.png»

Código dentro del head

Código del div

Escribimos un div vacio donde queremos que aparezca el box

Código de llamada del script

Escribimos el código para llamar al constructor del plugin

$('# twitterBox).followbox({
'user' : 'nuestro nombre de usuario en twitter sin @',
'width' : '1240',
'theme' : 'dark'});

Dentro de las variables que podemos inicializar opcionalmente para acomodar el box de acuerdo a nuestras necesidades encontramos las siguientes. La variable user es obligatoria.

user: nombre del usuario de twitter sin @
width: ancho en pixeles
height: alto en pixeles
border_color: color del borde
bg_color: color del fondo
bg_image: imagen de fondo optativa
title_color: color del texto del título
total_count_color: color indicando la cantidad de seguidores
follower_name_color: color de los enlaces a los seguidores
theme: permite seleccionar un estilo global; puede ser light, dark o custom

Como síntesis de nuestro artículo podemos concluir que tenemos una implementación realmente sencilla, ultra customizable que nos va a permitir mostrar nuestros seguidores de twitter en nuestro sitio Web.

Código Fuente

Descárgate el código fuente de Implementando un Twitter Follow Box
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

→ Java →

Hola Mundo con Java ME y un TextBox

Creado: 13/Sep/2012 Actualizado: 27/Ago/2021

En un anterior ejemplo vimos como con Java ME podíamos crear una aplicación Hola Mundo. En ese caso utilizamos un Canvas sobre el que volcábamos una cadena de texto con el «Hola Mundo». En este segundo ejemplo vamos a ver como podemos crear un primer ejemplo de Hola Mundo con Java ME, pero en este caso gestionaremos la salida mediante un TextBox.

Lo primero será definir nuestra clase Display que es la que, al fin y al cabo, representa la pantalla del dispositivo móvil. De igual manera definiremos la clase TextBox que será la caja de texto en la que insertaremos nuestro Hola Mundo.

private Display display;
TextBox textbox = new TextBox("Mi ejemplo","Hola Mundo",20,0);

Ya vemos que cuando creamos el TextBox estamos indicando su título «Mi ejemplo» y su contenido». Así como su tamaño y restricciones.

Lo siguiente será recordar los tres métodos de los que se compone un MIDLet: startApp, pauseApp y destroyApp.

protected void destroyApp(boolean unconditional)
  throws MIDletStateChangeException {	}
protected void pauseApp() { }
protected void startApp() throws MIDletStateChangeException { }

Será el método de inicialización o startApp() en el que instanciemos nuestro display. Para instanciar el Display utilizamos la propia factoría Display y su método .getDisplay()

display = Display.getDisplay(this);

Ya solo nos quedará añadir el TextBox a nuestro display. Para ello utilizamos el método .setCurrent() sobre el Display, pasándole la caja de texto o TextBox.

display.setCurrent(textbox);

El método startApp() nos quedará de la siguiente forma:

protected void startApp() throws MIDletStateChangeException {
  display = Display.getDisplay(this);
  display.setCurrent(textbox);
}

Con estos sencillos pasos tenemos creados nuestro Hola Mundo con Java ME y un TextBox. Y nuestro resultado:

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?

→ HTML5 →

Exportar el contenido de un Canvas HTML5 a una imagen

Creado: 11/Sep/2012 Actualizado: 09/Ene/2025

Los Canvas de HTML5 nos permiten una fácil manipulación gráfica. De tal manera que es sencillo insertar en ellos elementos gráficos, textos, imágenes,… Pero además nos ofrecen la posibilidad de exportar todo el contenido en formato imagen.

Para ello lo primero que vamos a hacer generar un Canvas con algo de contenido:

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

// Dibujamos algo sencillo en el Canvas para exportarlo
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);

Ya hemos añadido unos cuadrados sobre el lienzo del Canvas. Ahora, la idea es exportar el contenido del canvas sobre un elemento IMG de la página. Para ello nos vamos a dotar de dos botones: uno que exporte a PNG y otro que exporte a JPEG, así como del elemento IMG.

<fieldset>
  <legend>Pulsa sobre el tipo de imagen y el resultado se generará abajo</legend>
  <button id="png">Generar PNG</button> | <button id="jpeg">Generar JPEG</button>
</fieldset>
<figure><img id="laimagen"></figure>

Lo que haremos será capturar el click sobre el botón y exportar la imagen. Recordar que para atender al evento click del botón tenemos que añadirle un EventListener.

var png = document.getElementById("png");
png.addEventListener("click",function(){	
  // Exportar la imagen	
},false);

Para exportar la imagen, recurrimos al método .toDataURL() del Canvas. Dicho método recibe como parámetro el mimetype de la imagen que queremos generar. Es decir, un «image/png» o un «image/jpeg».

Lo siguiente que haremos será coger su resultado, que es un base64, y asignarlo a la propiedad src de la imagen.

var img = document.getElementById("laimagen");

var png = document.getElementById("png");
png.addEventListener("click",function(){	
	img.src = canvas.toDataURL("image/png");	
},false);

A la hora de exportar el contenido del Canvas a una imagen, hay que tener en cuenta un tema de seguridad. Y es que si el Canvas tiene imágenes, estas deberán de estar en el mismo servidor que el fichero que contenga el Canvas. En caso contrario, saltará una alerta de seguridad al utilizar el método .toDataURL().

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?

→ Javascript →

Insertar código HTML en una página web: insertAdjacentHTML

Creado: 08/Sep/2012 Actualizado: 29/May/2015

Existen varias formas de insertar código HTML en una página web utilizando Javascript. La primera y más rudimentaria es utilizando el método write del document.

document.write("Titular
");

El principal problema del document.write es que insertamos el código HTML en línea directamente en el momento que lo estamos ejecutando. Esto implica que si el documento HTML ya está completo no nos será de gran utilidad.

Otra opción que tenemos es utilizar la propiedad .innerHTML sobre un elemento. Mediante la propiedad .innerHTML accedemos al contenido de texto de un elemento. Así, si tenemos una capa:

Accederemos al elemento y modificaremos su contenido:

var capa = document.getElementById("capa");
capa.innerHTML = "Contenido para la capa";

El principal inconveniente que tiene el atributo .innerHTML es que si necesitamos manipular un elemento HTML, este, al volver a ser insertado será nuevamente parseado. Imaginemos que tenemos una lista:


 Elemento
 Elemento

Y modificamos el contenido de la lista para añadir un nuevo elemento:

var lista = document.getElementById("lista");
lista.innerHTML += "Elemento
";

Cada vez que añadimos un elemento se parsearán todos los elementos LI. Ya que son borrados y nuevamente creados.

En la especificación HTML5 aparece el método insertAdjacentHTML(). Este método ya estaba siendo utilizado por Internet Explorer, y posteriormente enviado a estandarizar. El método insertAdjacentHTML() nos permite insertar contenido HTML teniendo en cuenta los elementos HTML que existan. Así podremos utilizar «beforebegin» o antes del elemento, «afterbegin» o al inicio del elemento, «beforeend» o al final del elemento y «afterend» o después del elemento.

Así, en la lista podremos utilizar «beforeend» para insertar un nuevo elemento con insertAdjacentHTML():

var lista = document.getElementById("lista");
lista.insertAdjacentHTML("beforeend","Elemento
");

De esta forma tenemos un mecanismo de insertar el HTML con insertAdjacentHTML() en nuestra página web de una forma más sencilla, ágil y rápida.

Código Fuente

Descárgate el código fuente de Insertar código HTML en una página web: insertAdjacentHTML
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?

→ Javascript →

Operador ternario en JavaScript

Creado: 07/Sep/2012 Actualizado: 03/Abr/2024

¿Qué son los operadores ternarios en JavaScript?

El operador ternario en JavaScript es un operador condicional que nos sirve para escribir el código de una sentencia if de una forma más sencilla, consiguiendo el mismo resultado, y que nos puede ser muy útil en el desarrollo web.

Imaginemos que tenemos un ejemplo que nos calcula cuál es el mayor de dos números en JavaScript. El código para codificarlo sería sencillo, como comprobamos a continuación.

let x = 10;
let y = 8;

if (x>y)
  console.log("El mayor de los dos números es " + x);
else
  console.log("El mayor de los dos números es " + y);

Inicialmente declaramos las dos variable que vamos a comparar y luego pasamos a codificar nuestra estructura de control if-then-else.

Vemos que tenemos una estructura de control if-then-else que ejecuta la primera sentencia en caso de que la validación correcta y la sentencia else en caso de que la validación de if sea incorrecta. El operador ternario en JavaScript nos permite hacer esto en una sola línea de código.

Estructura de un operador ternario en Javascript

La estructura del operador ternario es la siguiente:

resultado = (condicion)?valor1:valor2;

Vemos que con este operador condicional tenemos una condición booleana que va entre paréntesis, seguido de un símbolo cierre interrogación ? que le asocia el primer valor y luego un símbolo de dos puntos : que le asigna el segundo valor.

EL funcionamiento será que si la condición es verdadera, se asigna el valor 1 como resultado, en caso contrario, se asigna el valor 2.

Ejemplo de uso de operadores ternarios

Si pasamos a realizar el código que nos controla el mayor de dos números mediante una estructura de operador ternario escribiremos las siguientes sentencias de código JavaScript:

let x = 10;
let y = 8;

mayor = (x>y)?x:y;
console.log("El mayor de los dos números es " + mayor);

Asignamos el valor sobre una variable que llamamos mayor y solo nos queda mostrar un mensaje con el valor.

Vemos que la cantidad de código JavaScript a escribir con este operador condicional es menor que cuando utilizábamos la estructura de control if. Seguro que la utilizarás mucho dentro de tus desarrollos web.

Código Fuente

Descárgate el código fuente de Operador ternario en 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?

→ HTML5 →

Insertar una imagen en un canvas HTML5

Creado: 06/Sep/2012 Actualizado: 09/Ene/2025

Una de las cosas que podemos hacer con un CANVAS de HTML5 es insertar una imagen dentro de él. Para ello lo primero que vamos a hacer es crear un elemento CANVAS.

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

Y obtener acceso al contexto:

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

A la hora de insertar una imagen en el Canvas vamos a utilizar el objeto Image, el cual es representado mediante un objeto HTMLImageElement del DOM. El atributo src llevará la URL asociada a la imagen.

var img = new Image();
img.src = "imagenes/logo_aulambra.png";

Lo siguiente será insertar la imagen en el CANVAS. Para ello en contexto del CANVAS nos ofrece el método .drawImage() El método .drawImage() recibe como parámetros la referencia a la imagen que acabamos de crear y las coordenadas x,y del Canvas a partir de las cuales posicionaremos la imagen.

ctx.drawImage(img, 0, 0);

Si ejecutamos el método .drawImage() puede que se cargue la imagen en el CANVAS o no. Esto es debido a que solo se ejecuta si ya se ha descargado la imagen. En caso contrario no pintará nada. Es por ello que necesitamos saber si se ha cargado la imagen. Para ello gestionaremos el evento .onload de la imagen, el cual se ejecuta una vez cargada la imagen. Quedándonos el siguiente código:

img.onload = function(){
  ctx.drawImage(img, 0, 0);
}

Con estos sencillos pasos tendremos la imagen insertada en el CANVAS.

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?