OnlineMasterWeb

Título

El otro día veíamos como podemos dar de alta fechas en documentos HTML5. Estas fechas las podemos utilizar para proporcionar información dentro del documento sobre el contenido del mismo. Por ejmeplo, si estamos hablando de un evento, utilizaremos las fechas para indicar los días en los cuales se produce el evento.

Pero las fechas en HTML5 las podemos utilizar para indicar información relativa al documento. Por ejemplo podemos identificar la fecha de publicación (o modificación) de un documento.

Recordamos que para insertar una fecha en HTML5 utilizamos el elemento time.

<time datetime="2012-10-15T12:00">15 de octubre de 2012 a las 12h</time>

Para identificar que la fecha sea relativa a la publicación del documento tenemos que utilizar el atributo pubdate. El atributo pubdate es un atributo booleano. Con lo cual su mero uso dentro del elemento time hará que el valor sea true. Si estamos trabajando con documentos XHTML utilizaremos el formato pubdate="pubdate".

Así el código que insertaremos para identificar la fecha de publicación de un documento con HTML5 será:

Este documento fue publicado el <time datetime="2012-10-15T12:00" pubdate="pubdate">15 de octubre de 2012 a las 12h</time>

Groovy » Conexión a base de datos Firebird desde Groovy

octubre 15, 2012 por ARIEL . 161 visitas Sin Comentarios Imprimir Imprimir

Mediante este ejemplo vamos a explicar como realizar una sencilla conexión a una bases de datos Firebird desde un programa Groovy.

¿Qué necesitas para realizar este ejemplo?

Para poder codificar y probar el ejemplo es necesario lo siguiente:

  1. Tener instalado Firebird
  2. Descargar el driver JDBC del sitio oficial de Firebird.
  3. Usar la base de datos de ejemplo de Firebird (EMPLOYEE.FBD)

Al instalar Firebird se crea automáticamente una cuenta de usuario(sysdba) y un password(masterkey) que nos permitirá logearnos y acceder a la base de datos de ejemplo.

Codificando el ejemplo

Lo primero será importar la librería necesaria para la conexión:

import groovy.sql.Sql

Es increíble el ahorro de líneas de código, basta con usar el método Sql.newInstance(direccionBase,usuario,password,driverConexion) para la conectar la base de datos.

// Datos de la Conexión
def direccionBase="jdbc:firebirdsql://localhost/examples/empbuild/EMPLOYEE.FDB"
def usuario="sysdba"
def password="masterkey"
def driverConexion="org.firebirdsql.jdbc.FBDriver"

Ahora para ejecutar una consulta sql usamos el método sql.eachRow(consulta)

// Consulta
def consulta="select *from country"

Ahora solo falta recorrer los campos de la tabla para ello utilizamos el método sql.eachRow:

sql.eachRow(consulta){ fila -&gt;
    println fila.country + "  "+ fila.currency
}

Ejecutar ejemplo

1. Desde terminal de comandos.

groovy ConexionFirebird.groovy

2. Puedes crear un archivo *.bat o *.cmd (en Windows).
ejecuta.cmd

 
@echo off
echo Teclea Enter para ejecutar programa...
pause &gt;null
groovy ConexionFirebird.groovy
 

3. En Linux puedes crear un archivo *.sh
ejecuta.sh

 
 #!/bin/bash
read -p "Presiona Enter para ejecutar programa..."
groovy ConexionFirebird.groovy
 

Google » Borrar marcas de un mapa de Google Maps

octubre 14, 2012 por Víctor Cuervo . 179 visitas Sin Comentarios Imprimir Imprimir

En otros artículos hemos visto como podemos crear marcas, como añadir marcas a los mapas de Google Maps, como podemos personalizarlas,... en este caso vamos a ver cómo podemos hacer para eliminarlas de un mapa de Google Maps.

Lo primero que vamos a hacer es recordar como insertábamos una marca dentro de un mapa de Google Maps. Para ello nos habíamos creado una función addMark().

function addMark(location){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });				  
}

Y es que cuando estemos insertando una marca, además de añadirla a Google Maps, lo que vamos a hacer es añadirla en un array. Así que lo primero que hará nuestro programa para borrar marcas del mapa será definir el array:

var puntos = [];

Y ahora, cada vez que insertemos una marca, la insertamos en el array mediante el método .push():

function addMark(location){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });	
  puntos.push(marker);			  
}

Así, en nuestro array puntos tenemos todas las marcas. Ahora añadiremos un botón borrar marcas en nuestra página web y a su evento onclick le vamos a adjuntar el borrado de las marcas.

var b = document.getElementById("borrar");
b.addEventListener("click",function(){...});

Para realizar el borrado de una marca en concreto lo que hacemos es desasignarla del mapa. Para ello ponemos el valor del mapa asociado a null.

var b = document.getElementById("borrar");
b.addEventListener("click",function(){		
  // Recorrempos el array de puntos y los borramos		
  for (p in puntos) {
    puntos[p].setMap(null);
  }		
});

Como vemos en el código, hemos recorrido el array y por cada uno de los objetos Marker hemos ejecutado el método .setMap(null).

Así tenemos borrados todos los puntos que hubiésemos añadido al mapa de Google Maps.

Java » Un juego sencillo con Java Swing

octubre 13, 2012 por ARIEL . 211 visitas Sin Comentarios Imprimir Imprimir

Vamos a realizar un programa de escritorio usando Java Swing. Consiste en hacer un juego de adivinar la suma de dos números generados aleatoriamente.

Necesitamos los siguientes controles:

  1. 6 JTextField
  2. 6 JLabel
  3. 3 JButton

Un botón se encargará de generar y mostrar los dos números aleatorios, el siguiente botón activa una ventanita para introducir la suma de esos dos y comprobar si es correcta (acierto) o no (fallo) y mostrará el número de intentos realizados.

Y por último un botón para quitar la aplicación.

Como se trata de una aplicación gráfica es necesario importar las librerías javax.swing.* y java.awt.*.

import javax.swing.JTextField;
import javax.swing.JLabel;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.event.*;
import javax.swing.JOptionPane;
import javax.swing.UIManager;
 
public class Aleatorio extends JFrame{
 
  public Aleatorio(){
  //..
 //..
 }
}

Los controles a usar para los que utilizaremos las clases JTextField y JButton:

final private JTextField txtNum1,txtNum2,txtResultado,txtIntentos,txtAciertos,txtFallas;
private JButton btnActiva,btnComprueba;
private JButton btnSalir;

También necesitamos definir las variables que controlarán los valores aleatorios y su suma, así como los aciertos, fallos e intentos:

//los dos números tomarán un valor aleatoriamete
private long num1,num2,valor;
//la suma
long suma_prog;
int intentos=0,aciertos=0,fallas=0;

Para generar los números aleatorios creamos una función:

public long obtenerAleatorio1(){
    return (long)(Math.random()*1000);
}

Puedes leer más información sobre como crear un número aleatorio con Java.

Ahora pasamos a codificar los botones Activar, Comprobar y Salir.

Activar
Este botón inicia el juego, para ello lo que hacemos es crear dos números aleatorios, con la clase creada anteriormente, y los ponemos dentro de los campos de texto sus valores.

btnActiva= new JButton("Activar");
btnActiva.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        Aleatorio aleatorio=new Aleatorio();				
        aleatorio.setNum1(aleatorio.obtenerAleatorio1());
        aleatorio.setNum2(aleatorio.obtenerAleatorio2());
 
        txtNum1.setText(String.valueOf(aleatorio.getNum1()));// no. 1
        txtNum2.setText(String.valueOf(aleatorio.getNum2()));// no.2
        txtResultado.setText("");
    }
});

Comprobar
Es el botón que lanza el juego, lo que hace es crear un dialogo, mediante una clase JOptionPane. Cogemos el valor insertado por el usuario y comprobamos si coincide con la suma de los números aleatorios. Si es así incrementamos los aciertos, si no coincide, incrementamos los fallos.

btnComprueba= new JButton("Comprobar");
btnComprueba.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        Aleatorio alea=new Aleatorio();				
        valor=Long.parseLong(JOptionPane.showInputDialog("Introduce valor"));
        alea.setValor(valor);
        txtResultado.setText(String.valueOf(alea.getValor()));//valor del usuario
        suma_prog=Long.parseLong(txtNum1.getText())+ Long.parseLong(txtNum2.getText());
 
        if(suma_prog==alea.getValor()){
            aciertos+=1;
            intentos+=1;
            txtIntentos.setText(String.valueOf(intentos));
            txtAciertos.setText(String.valueOf(aciertos));
        }else{
            fallas+=1;
            intentos+=1;
            txtIntentos.setText(String.valueOf(intentos));
            txtFallas.setText(String.valueOf(fallas));
        }
    }
});

Salir
En este caso, lo que hacemos es salir de la aplicación mediante el método System.exit.

btnSalir= new JButton("Salir");
btnSalir.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        System.exit(0);
    }
});

Espero les sea de utilidad.

Google » Personalizar icono de una marca de Google Maps

octubre 12, 2012 por Víctor Cuervo . 221 visitas Sin Comentarios Imprimir Imprimir

Ya hemos visto como añadir una marca a un mapa de Google Maps, incluso como podemos añadir la marca de forma dinámica. Pero, ¿podemos personalizar el icono de la marca de Google Maps? La respuesta es sí.

Si nos centramos en como añadimos la marca al mapa vemos lo siguiente:

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

Lo que podemos hacer en la inicialización es pasarle una propiedad icon, la cual espera un objeto de tipo MarkerImage. Por lo que tenemos que hacer es crear un icono mediante un MarkerImage.

var img = new google.maps.MarkerImage("icono.png");

Y lo siguiente definirlo en la inicialización del Marker:

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

Ya tenemos insertado y personalizado nuestro icono de Manual de Google Maps.

HTML5 » Especificar una duración en HTML5

octubre 11, 2012 por Víctor Cuervo . 224 visitas Sin Comentarios Imprimir Imprimir

El otro día veíamos como podíamos especificar una fecha en HTML5. Con el elemento time y su atributo datetime, por defecto podemos indicar una fecha exacta (fecha y hora).

Pero el elemento time y su atributo datetime tienen mucha potencia. Y es que además de poder especificar una fecha en HTML5 nos van a permitir especificar una duración con HTML5.

Imagina que quieres indicar que un evento ha durado 4 días o que la película dura una hora y media, o, incluso siendo más preciso, que un atleta ha recorrido la maratón en 2 horas, 5 minutos y 32 segundos. Todo esto son duraciones y el elemento time de HTML5 nos va a dejar especificarlas.

Y el truco está en utilizar un valor de P (periodo) dentro del atributo datetime. Es decir, si a una fecha del datetime le anteponemos la P, pasará a especificar una duración.

Así, si queremos decir que el evento ha durado 4 días pondremos:

El evento durará <time datetime="P4D">4 días</time>.

O que la proyección de la película es de 1 hora y media

La proyección fue de <time datetime="P1H 30M">una hora y media</time>

Pero hay otro modificador adicional, este será la T. Y es que si después de especificar el periodo con la P en el datetime utilizamos la T, lo que estamos indicando es que hay mucha mayor precisión en la fecha.

Así, para el caso del tiempo de la maratón pondremos lo siguiente:

La maratón se corrió en <time datetime="PT2H 05M 32S">2 horas, 5 minutos y 32 segundos</time>

Dos marcadores y una forma sencilla de especificar las duraciones en HTML5.

Google » Añadir marcas dinámicamente a un mapa de Google Maps

octubre 10, 2012 por Víctor Cuervo . 264 visitas Sin Comentarios Imprimir Imprimir

En este ejemplo vamos a ver cómo podemos añadir una marca a un mapa de forma dinámica. Para ello vamos a utilizar lo aprendido en los ejemplos Cómo añadir una marca a Google Maps y Detectar la longitud y latitud sobre un mapa de Google Maps. Y es que el ejemplo es una combinación de creación de marcas y gestión de eventos onclick sobre el mapa.

Lo primero, como hacemos siempre, sera cargar el mapa de Google Maps.

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

Lo siguiente será registrar el evento onclick sobre el mapa mediante el método addListener.

google.maps.event.addListener(map, 'click', function(event) {
  addMark(event.latLng);
});

Lo que hemos hecho ha sido invocar al método addMark, el cual recibirá un objeto de tipo LatLng con la longitud y latitud en la cual vamos a añadir la marca.

Si revisamos el método addMark veremos que lo que vamos a hacer es crear un objeto de tipo Marker de Google Maps, que es el que representa a las marcas. Y dicho objeto tendrá como posición la recibida en el parámetro LatLng.

function addMark(location){
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
}

Así ya tenemos añadida la marca al mapa de Google Maps de forma dinámica utilizando un click.

HTML5 » Fechas en HTML5

octubre 9, 2012 por Víctor Cuervo . 422 visitas Sin Comentarios Imprimir Imprimir

Hay múltiples motivos por los que tenemos que añadir fechas a nuestras páginas web, desde el típico de indicar cuándo fue creada o modificada la página, para reseñar la fecha de publicación de un artículo, para poner la fecha de un comentario, reseñar un acontecimiento,...

Es por ello que, después de muchas discusiones, eliminar las fechas de la especificación HTML5 y volverlas a aceptar (en inglés), tenemos el elemento time para poder especificar fechas en HTML5.

El elemento time en HTML5 tiene la siguiente estructura.

<time datetime="fechaISO">fecha a mostrar</time>

Así una fecha en HTML5 se podría definir de la siguiente forma:

<time>8 de octubre de 2012</time>

Ya que el atributo datetime no es estrictamente necesario, pero muy aconsejable si queremos tener un formato entendible por máquinas. Y es que el atributo datetime nos permite especificar la fecha en un formato ISO 8601.

Así, si insertamos la fecha con el atributo datetime tendríamos lo siguiente:

<time datetime="2012-10-08">8 de octubre de 2012</time>

Pero la fecha no se tiene que restringir al formato año mes día. Por ejemplo, podemos temer fechas más cortas, en las que solo especifiquemos el año:

<time datetime="2012">Año 2012</time>

En las que especifiquemos la hora...

<time datetime="12:00">Las 12 horas</time>

En las que especifiquemos la fecha y la hora (en este caso la fecha y hora se separa mediante una T o con un espacio en blanco):

<time datetime="2012-10-08T12:00">12h del 8 de octubre de 2012</time>

En las que demos incluso la zona horaria GTM (o UTC para ser exactos). En este caso entre la hora y la franja horaria hay que añadir el desplazamiento positivo (con un más) o negativo (con un menos) que tenga esa zona:

<time datetime="2012-10-08T12:00-07:00">12h del 8 de octubre de 2012 en UTC -07</time>(San Francisco)

Como hemos podido comprobar el manejo del elemento time y de su atributo datetime es realmente sencillo para poder fechas en HTML5.

Google » Detectar la longitud y latitud sobre un mapa de Google Maps

octubre 8, 2012 por Víctor Cuervo . 222 visitas 1 Comentario Imprimir Imprimir

En este ejemplo vamos a ver cómo podemos detectar la longitud y la latitud de un punto de un mapa de Google Maps una vez que hagamos click sobre él.

Lo primero que vamos a hacer es cargar el mapa de Google Maps sobre una capa de nuestra página web:

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

Vemos que en este proceso de carga del mapa hemos definido un objeto LatLng para darle un centro al mapa y que el mapa en sí se construye con un objeto Map.

Por si hay algún despistado, en la cabecera de nuestra página hay que cargar la librería de Google Maps desde la dirección https://maps.googleapis.com/maps/api/js?sensor=false

Ahora vamos a la parte central de nuestro ejemplo, detectar la longitud y latitud en el click. Así que lo que tenemos que hacer es registrar un evento onclick sobre el mapa. Para ello utilizamos el método addListener del mapa:

google.maps.event.addListener(map, 'click', function(event) { ... });

Dentro del evento que recibimos como parámetro uno de los datos que viene es la posición en latitud y longitud, en concreto la propiedad latLng. Así que la volcamos sobre una capa de nuestra página web:

google.maps.event.addListener(map, 'click', function(event) {
  document.getElementById("posicion").innerHTML = event.latLng;		    
});

Ya tenemos detectada la longitud y latitud al pinchar sobre un mapa de Google Maps.

HTML5 » Definiendo una persona con Microdata en HTML5

octubre 7, 2012 por Víctor Cuervo . 363 visitas 5 Comentarios Imprimir Imprimir

Dentro de la especificación de HTML5 aparece el concepto de microdata (o microdatos). Al igual que teníamos los microformatos, el microdata nos ayuda a dar información semántica a una estructura de datos. De esta forma conseguiremos dar información adicional a nuestra página. Esta información adicional servirá a otros, como puede ser el caso de los buscadores, a extraer información de la página.

En este caso vamos a definir una persona con la estructura de microdata de HTML5. Y veremos como Google utiliza esta información para extraer datos relativos a los autores de las páginas web.

Lo primero que tenemos que saber es que los microdatos que utilicemos tienen que seguir un esquema, el cual deberá de estar definido en algún sitio. Este esquema es que nos dice de que partes se conforma la estructura. En nuestro caso vamos a utilizar los esquemas de Schema.org y en concreto el esquema de una Persona. Si bien hay que saber que podríamos definirnos nuestro propio esquema. A esto se lo conoce como namespace.

El microdata de persona en HTML5 es utilizado por Google en sus resultados para indicar la auditoría de los artículos y proporcionar información adicional.

Echandole un vistazo a la estructura persona vemos que los datos básicos que tiene que tener toda persona son:

  • name, como nombre de la persona
  • url, web asociada a la persona
  • photo, una foto de la persona.

Aunque podemos tener otros datos como:

  • nickname, apodo de la persona
  • affiliation, empresa en la que está dicha persona.
  • jobTitle, rol de la persona en una empresa
  • ...

A la hora de empezar a definir la persona con microdata en HTML5 lo primero será definir el ámbito al que aplica, es decir, la zona sobre la cual definimos a la persona dentro de todo el contenido de nuestra página. Para definir el ámbito utilizamos el atributo itemscope. Por ejemplo, si el ámbito queremos reducirlo a una capa lo haremos de la siguiente forma:

<div itemscope>
<img src="foto.jpg" width="150" height="150" alt="Foto de Víctor"></a>
<strong>Nombre</strong>: Víctor Cuervo<br/>
<strong>Posición:</strong> Editor en Aulambra<br/>
<strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código">Línea de Código</a>
</div>

Pero a parte de definir el ámbito del microdata en HTML5 hay que indicar el esquema sobre el que se va a trabajar. En el caso de definir una persona utilizaremos el esquema http://schema.org/Person. En este caso el atributo a utilizar es itemtype.

<div itemscope itemtype="http://schema.org/Person">
<img src="foto.jpg" width="150" height="150" alt="Foto de Víctor"></a>
<strong>Nombre</strong>: Víctor Cuervo<br/>
<strong>Posición:</strong> Editor en Aulambra<br/>
<strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código">Línea de Código</a>
</div>

Ahora que ya tenemos definido el ámbito vamos a empezar la información semántica al contenido. Por ejemplo, al nombre "Víctor Cuervo" hay que indicar que es el nombre o "name". Para poder hacer esto utilizamos el atributo itemprop. Por ejemplo, para el caso del nombre y empresa lo haremos de la siguiente forma:

<strong>Nombre</strong>:
<span itemprop="name">Víctor Cuervo</span><br/>
<strong>Posición:</strong>
<span itemprop="jobTitle">Editor</span> en
<span itemprop="affiliation">Aulambra</span>

Como el texto no tenía una etiqueta asociada hemos insertado una etiqueta span para poder añadirlo. En el caso de la imagen lo haremos directamente poniendo itemprop="photo" sobre el elemento IMG.

<img itemprop="photo" src="foto.jpg" width="150" height="150" alt="Foto de Víctor">

De igual manera para la URL utilizamos el elemento A para incluir el atributo itemprop="url".

<strong>Web:</strong>
<a href="http://lineadecodigo.com" title="Linea de Código" itemprop="url">Línea de Código</a>

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

<div itemscope itemtype="http://schema.org/Person">
<img itemprop="photo" src="foto.jpg" width="150" height="150" alt="Foto de Víctor">
<strong>Nombre</strong>: <span itemprop="name">Víctor Cuervo</span><br/>
<strong>Posición:</strong> <span itemprop="jobTitle">Editor</span> en  <span itemprop="affiliation">Aulambra</span><br/>
<strong>Web:</strong> <a href="http://lineadecodigo.com" title="Linea de Código" itemprop="url">Línea de Código</a>
</div>

Para poder probar tu código para definir una persona con microdata en HTML5 se puede utilizar un snippet de Google en http://www.google.com/webmasters/tools/richsnippets

Actualizado 14.octubre
Hemos modificado el código para utilizar la definición de microdata de http://schema.org/.

Actualizado 16.octubre
Utilizado el atributo "jobTitle" para identificar el campo del rol dentro de la empresa.


El equilibrio del diseño

El diseño de una página web incluye el empleo de varias disciplinas, entre las que se encuentra el diseño gráfico.

Mas
Tratamiento para la web

Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su...

Mas
Te puede interesar
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis