feed twitter facebook LinkedIn facebook

CSS » Código fuente en una capa con scroll

Octubre 31, 2010 por Víctor Cuervo . 2839 visitas 2 Comentarios Imprimir Imprimir

Hay situaciones en las que el contenido que queremos poner puede desbordar del tamaño de la capa en la que están contenidos. En este sentido ya vimos como controlar el overflow de una capa.

Ahora vamos a ver un caso práctico del uso de las capacidades CSS. Y es el que se produce, por ejemplo, al añadir código fuente que quieras mostrar en una página. Cosa que nos pasa ya en nuestros códigos fuente (y que deberíamos de subsanar).

En este caso, ya que el contenido el código fuente y los caracteres pueden ser variopintos, va dentro de etiquetas PRE.

 
< pre class="codigo" >
<!-- Código fuente -->
< /pre >
 

La idea es ahora que el código fuente nos aparezca en una capa con scroll. Para ello vamos a manejar la propiedad CSS overflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un scroll.

El código CSS sería el siguiente:

.codigo{
  width:400px;
  height:300px;
  display:block;
  overflow:scroll
}

De esta forma sencilla podremos tener capas en las cuales mostrar el código fuente. Sencillo verdad... Ahora solo queda que lo apliquemos a Linea de Código. :-D

JavaScript » Tipo de objeto en Javascript

Octubre 30, 2010 por Víctor Cuervo . 3599 visitas 1 Comentario Imprimir Imprimir

Si estamos trabajando con objetos en Javascript puede darse el caso de que necesitemos conocer el tipo de objeto con el que estamos tratando. En este caso podemos utilizar la sentencia instanceof para contrastar el tipo de dato que manejamos.

La estructura para conocer el tipo de objeto sería la siguiente

objeto instanceof tipoObjeto

Así, por ejemplo, si tenemos el siguiente objeto:

var x = new String("Cadena de Texto");

Podemos validar el tipo de objeto que es en Javascript de la siguiente forma:

if (x instanceof String)
  document.write("El objeto es de tipo String <br/>");
else
  document.write("El objeto NO es de tipo String <br/>");

A parte de servirnos para los tipos de objetos que vienen en el lenguaje Javascript, también nos sirve para objeto definidos por nosotros mismos. Así, si definimos la clase rectángulo e instanciamos un objeto de este tipo.

function rectangulo(base,altura){
  this.base = base;
  this.altura = altura;
  this.calcularArea = function() { return this.base*this.altura; };
}
 
var r1 = new rectangulo(2,6);

Podemos realizar la misma validación mediante instanceof.

if (r1 instanceof rectangulo)
  document.write("El objeto es de tipo Rectangulo <br/>");
else
  document.write("El objeto NO es de tipo rectangulo <br/>");

HTML5 » Listar el contenido de Local Storage en HTML5

Octubre 29, 2010 por Víctor Cuervo . 2864 visitas 2 Comentarios Imprimir Imprimir

Si desconocemos las claves de la Local Storage del navegador en HTML5, siempre podemos acceder a listar el contenido de la caché.

Para ello, lo primero que haremos será el conocer el tamaño de la caché. Esto nos lo proporciona la propiedad .length

for (x=0; x<=localStorage.length-1; x++)  { ... }

Así, mediante un bucle for podremos iterar sobre los elementos de la caché.

De cada una de las posiciones de la caché vamos a pedir el nombre de la clave que contiene. El método .key() será el que nos sirva para poder realizar dicha acción:

clave = localStorage.key(x);

Una vez que tenemos la clave solo nos queda acceder al contenido de la misma mediante el método .getItem()

localStorage.getItem(clave);

El código final que accede al contenido de la Local Storage en HTML5 nos quedará de la siguiente forma:

for (x=0; x<=localStorage.length-1; x++)  {
  clave = localStorage.key(x);
  document.write("La clave " + clave + "contiene el valor " + localStorage.getItem(clave) + "");
}

PHP » Sacar un naipe de la baraja con PHP

Octubre 24, 2010 por Jose Sevilla . 3872 visitas 6 Comentarios Imprimir Imprimir

La idea es poder sacar una carta aleatoria de la baraja (una baraja inglesa o francesa). La baraja se compone de cuatro palos (Picas ♠, Corazones , Diamantes y Tréboles ♣) y de trece cartas por cada palo, comprendidas desde el as al diez y tres figuras.

Para llevar acabo la operación y sacar un naipe aleatorio, vamos a almacenar todas las posibilidades de cartas en variables.

$palos = array('Picas','Corazones','Diamantes','Tréboles');
$cartas = array('As','Dos','Tres','Cuatro','Cinco','Seis','Siete','Ocho','Nueve','Diez','Jota','Reina','Rey');

Hemos creado dos variables, por una parte una variable con un array que contiene los cuatro palos de la baraja y la otra variable con un array con las diez numeraciones y tres figuras de las cartas, consiguiendo así las 52 cartas de las barajas. Gracias al array nos permite almacenar varios entradas en una misma variable.

$palo = array_rand($palos, 1);
$carta = array_rand($cartas, 1);

Usamos la función array_rand() que nos ofrece PHP, la cual nos devuelve la clave al azar de una entrada del array.

Ahora únicamente nos queda mostrar los valores aleatorios en una frase.

print 'La carta que salió de la baraja fue: ' . $cartas[$carta] . ' de ' . $palos[$palo] ;

Java » Contar las consonantes de una palabra con Java

Octubre 23, 2010 por Víctor Cuervo . 4223 visitas 2 Comentarios Imprimir Imprimir

Pues si esta mañana veíamos como contar las vocales de una palabra con Java, ahora vamos a por las consonantes.

Y vamos a basarnos en el código de las vocales para realizar nuestro código. Y es que todo aquello que no es una vocal es una consonante... ¿Verdad? O al menos, siempre que hablemos de letras. Ya que un & ni es vocal ni consonante.

Lo primero, hemos creado un método Java para calcular las vocales.

public static boolean esVocal(char c){
  if ((Character.toLowerCase(c)=='a') || (Character.toLowerCase(c)=='e') || (Character.toLowerCase(c)=='i') || (Character.toLowerCase(c)=='o') || (Character.toLowerCase(c)=='u'))
    return true;
  else
    return false;
}

Básicamente, dado un carácter nos dice si es una vocal o no. Hemos utilizado el método Character.toLowerCase para evitar problemas de mayúsculas y minúsculas.

Ahora, mientras llamemos al código hay que llamar a este método, pero indicando que nos de aquello que no es una vocal

for(int x=0;x<sPalabra.length();x++) {
  if !esVocal(sPalabra.charAt(x))
    contador++;
}

Pero, como dijimos antes, hay caracteres que no son ni vocal, ni consonante. Como puede ser el caso del &, los símbolos matemáticos,... Así que nos aseguraremos que el carácter también es una letra. Para ello utilizamos el método Character.isLetter.

for(int x=0;x<sPalabra.length();x++) {
  if ((Character.isLetter(sPalabra.charAt(x))) && (!esVocal(sPalabra.charAt(x))))
    contador++;
}

De esta forma tan sencilla ya podremos contar las consonantes de una palabra con Java.

Java » Contar las vocales de una palabra con Java

Octubre 23, 2010 por Víctor Cuervo . 5030 visitas 4 Comentarios Imprimir Imprimir

Algunos nos habéis pedido saber como podemos contar las vocales de una palabra con Java. Así que pongámonos manos a la obra.

Lo primero, la palabra... algo sencillo... una String

String sPalabra ="murcielago";

Ahora definiremos un contador, el cual lleve la cuenta de las vocales de la palabra:

int contador = 0;

Solo nos quedará recorrer la palabra, mediante un bucle for y controlando el tamaño de la palabra mediante el método .length()

for(int x=0;x<sPalabra.length();x++) {
  ...
}

En cada iteracción, el método .charAt() nos devolverá el carácter de la posición que estamos recorriendo. Así que comprobaremos si dicho carácter es una de las vocales (a, e, i, o, u).

for(int x=0;x<sPalabra.length();x++) {
  if ((sPalabra.charAt(x)=='a') || (sPalabra.charAt(x)=='e') || (sPalabra.charAt(x)=='i') || (sPalabra.charAt(x)=='o') || (sPalabra.charAt(x)=='u')){
    contador++;
  }
}

Ya solo nos quedará volcar el valor del contador.

System.out.println("La palabra " + sPalabra + "contiene " + contador + " vocales");

JavaScript » JSSQL: Un motor de base de datos en javascript

Octubre 14, 2010 por Víctor Cuervo . 3599 visitas 4 Comentarios Imprimir Imprimir

Este verano me topaba con un proyecto interesante llamado JSSQL. JSSQL es un motor de base de datos escrito en Javascript, el cual podemos ejecutar consutlas SQL desde nuestras páginas web. Sin necesidad de estar conectado a algún servidor.

JSSQL es un proyecto de Joaquín Becerra de la Universidad de Buenos Aires. Podéis encontrar más información en:
http://javascriptsql.sourceforge.net/

Pero vamos a ponernos manos a la obra...

Lo primero de todo es cargar la librería Javascript que implementa el motor de base de datos. Esta librería es JSSQL.js.

<script type="text/javascript" src="JSSQL.js"></script>

Una vez cargada la librería instanciaremos el objeto principal llamado JSSQL.

var myJSSQL= new JSSQL();

A partir del objeto JSSQL abriremos la base de datos a utilizar mediante el método open.

if (!myJSSQL.Open('mibasededatos')) {
  alert(myJSSQL.GetError()); //si falla que nos avise
}
 

Si falla la apertura de la base de datos, devolvemos el error del motor de la base de datos. Este error está accesible vía el método .GetError().

En el código vemos que abrimos una base de datos que se llama "mibasededatos". Pero ¿Dónde está la base de datos?

Las bases de datos están definidas en ficheros .jsdb bajo una estructura de directorios:

/bases/nombreBD/nombreBD.jsbd

El fichero JSDB tiene la siguiente estructura:

_bd={
  "paises":{
    "IdPais":"numeric",
    "Pais":"string",
  }
};
_bd_ind={
   'paises':[false,false]
};
_bd_pag={
   'paises':0
};

Vemos que contiene la definición mediante arrays de las bases de datos que contiene. A su vez, cada una de las tablas, tiene su fichero JSBD con el contenido. Por ejemplo la tabla de países tendría el siguiente contenido:

_aux['paises']=Array();
_aux['paises']=[
[1,"Noruega"],
[2,"Portugal"],
[3,"Francia"],
[4,"Italia"],
[5,"UK"]
];

JSSQL nos ofrece una herramienta de conversión desde las bases de datos hacía JSDB. Puedes acceder a ella desde:
http://javascriptsql.sourceforge.net/ARCH/JSBD/ConversorBD.php

Una vez que hemos visto como se definen las bases de datos pasamos a ejecutar la consulta mediante el método .Query(). La consulta una SELECT sencilla de paises.

sql="select Pais from paises" ;
res=myJSSQL.Query(sql);

El resultado nos lo deja en un array, el cual recorremos de forma sencilla:

for (x=0;x<res.length;x++)
  document.write(res[x]["paises.Pais"] + "<br>");

La verdad es que JSSQL realiza un enfoque muy interesante sobre la necesidad de tener una BD en local. Algo que ya no parece estar muy lejos gracias a HTML5.

jQuery » Eliminar imágenes rotas con jQuery

Octubre 12, 2010 por Víctor Cuervo . 4141 visitas 1 Comentario Imprimir Imprimir

Algo demasiado habitual como los errores de codificación, dependencias acopladas a enlaces externos,... pueden dar al traste con el diseño de nuestras páginas web.

Y es que cualquiera de los puntos citados anteriormente pueden hacer que tengamos imágenes rotas en nuestra página, las cuales estropeen el contenido de las mismas.

Si bien, mediante sencillos scripts podemos eliminar imágenes rotas con jQuery. La idea es recorrer todas las imágenes que haya en la página y si la imagen tiene un error, eliminarla.

Lo primero es saber como acceder a las imágenes mediante jQuery. Para ello utilizamos el siguiente código:

$("img")

El selector pasado a la función $ es el del elemento IMG. Como queremos saber si se ha producido un error en la carga de la imagen pasaremos a tratar el evento .error().

$("img").error(...);

Dentro de la gestión del evento .error() tomaremos la decisión sobre qué hacer. En este caso, como vamos a eliminar las imágenes rotas, llamaremos al método .remove() de jQuery.

$('img').error(function() {
  $(this).remove();
}) 

Este código lo tendremos que ejecutar cuándo se haya cargado la página. Es decir, en el método .ready().

 $(document).ready(function(){
   $('img').error(function() {
     $(this).remove();
   })
 });

HTML5 » Vaciar la Local Storage en HTML5

Octubre 11, 2010 por Víctor Cuervo . 2782 visitas 2 Comentarios Imprimir Imprimir

En el artículo Acceder a la caché local del navegador con HTML5 vimos como podemos manipular la Local Storage para almacenar y recuperar información de la cache.

Si el usuario hace una operación de logoff, lo más probable es que queramos vaciar el contenido de la Local Storage.

Para vaciar la Local Storage, deberemos de ejecutar el método .clear()

localStorage.clear();

Algo muy sencillo, pero que nos servirá para eliminar toda la información que hayamos almacenado a lo largo de la sesión del usuario.

Puedes descargarte el código completo que inserta elementos, los visualiza y al final vacía la Local Storage.

Java » Ventanas con estilo gracias a Substances

Octubre 10, 2010 por Pablo Ruiz . 5647 visitas 2 Comentarios Imprimir Imprimir

Hoy explicaré en simples pasos cómo usar Substance en nuestras aplicaciones, que de hecho es una muy buena forma de darle estilo a nuestras ventanas

¿Que haremos?

Crearemos una ventana simple(JFrame, JTextField, JButton) a código. Sin ayuda de Netbeans u otro programa que solo tienes que arrastrar componentes, que de hecho es una muy buena forma, pero el motivo es enseñar.

Primero que todo haremos una nueva clase llamada "JVentana" que como el nombre lo indica tendrá lo suficiente para crear una ventana y también incluiremos un evento al botón:

public final class JVentana{
...}

Ahora agregamos 3 atributos de tipo JFrame, JTextField, JButton:

private JFrame Frame_principal;
private JTextField textField_texto;
private JButton button_saludo;

Siguiendo de lo antes realizado agregaremos un método llamado "inicializar", que inicializará los atributos que declaramos anteriormente:

public void inicializar(){
  Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
  textField_texto = new JTextField();
  textField_texto.setColumns(40);
  button_saludo = new JButton("Saludar");
}

Explicación del método inicializar:

  1. Creamos el JFrame asigándole un nombre en su constructor
  2. Creamos el JTextField
  3. Seteamos el JTextField para que sea mas largo (por columnas)
  4. Creamos el JButton

Siguiendo lo anterior iremos a crear otro método llamado "agregarComponentes":

public void agregarComponentes(){
  Frame_principal.add(textField_texto);
  Frame_principal.add(button_saludo);
  Frame_principal.setLayout(new FlowLayout());
  Frame_principal.setVisible(true);
  Frame_principal.setResizable(false);
  Frame_principal.pack();
}

Explicación del método agregarComponentes:

  1. Agregamos el JTextField creado al FramePrincipal
  2. Agregamos el JButton creado al FramePrincipal
  3. Seteamos nuestra ventana principal al modo FlowLayout (Alterará la forma en que se ubicarán los componentes en el Frame)
  4. Hacemos visible la ventana principal
  5. Seteamos la opción de redimensionar la ventana (true=SI, false=NO)
  6. Seteamos la ventana principal, para que se adapte al tamaño de nuestros componentes para evitar espacios innesesarios

Ahora lo que nos queda hacer por último es programar nuestro evento para que al hacer click en el botón se genere un mensaje:

public void asignarEventos(){
  button_saludo.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
            JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
            JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
    }
  });
}

Explicación del método asignarEventos:

  1. Asignamos un evento (ActionListener) al botón (button_saludo), como su nombre lo indica escuchará cada vez que se presione.
  2. Agregamos el método actonPerformed (Si usas Netbeans esa parte se hace por defecto, así que solo tendrás que asignar instrucciones)
  3. Preguntamos que si el textField_texto está vacio que realize la siguiente acción
  4. Desplegamos un mensaje en pantalla (como un alert() en Javascript, MessageBox en .NET )
  5. Si no es así, entonces saludará al nombre ingresado en el text

Y bueno ya casi terminando crearemos nuestro constructor:

public JVentana(){
  inicializar();
  agregarComponentes();
  asignarEventos();
}

Explicación del constructor:

  1. Llamamos al método inicializar
  2. Llamamos al método agregarComponentes
  3. Llamomos al método asignarEventos

Es importante la posición en que pones las llamada a los métodos, porque si pones por ejemplo agregarComponentes se generará un error ya que aún no se han creado los componente

Nuestra clase sería verse algo así :

 
package ejemplosubstance;
 
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JTextField;
 
public final class JVentana{
 
  private JFrame Frame_principal;
  private JTextField textField_texto;
  private JButton button_saludo;
 
  public JVentana(){
    inicializar();
    agregarComponentes();
    asignarEventos();
  }
 
  public void inicializar(){
    Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
    textField_texto = new JTextField();
    textField_texto.setColumns(40);
    button_saludo = new JButton("Saludar");
  }
 
  public void agregarComponentes(){
    Frame_principal.add(textField_texto);
    Frame_principal.add(button_saludo);
    Frame_principal.setLayout(new FlowLayout());
    Frame_principal.setVisible(true);
    Frame_principal.setResizable(false);
    Frame_principal.pack();
  }
 
  public void asignarEventos(){
    button_saludo.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
          JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
          JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
      }
    });
  }
}

Luego que tengamos todo listo viene la parte principal de éste tutorial por así decirlo "darle estilo a nuestras ventanas". Para ellos vamos a utilizar Substances.

Lo primero que tenemos que hacer es descargarnos el jar de Substances.

Descargar Substances Version: 5.3

Luego que lo tenemos descargado lo añadimos al proyecto, desconosco la manera en que algunas aplicaciones hacen éste proceso pero Netbeans lo hace de la siguiente manera

  1. Botón derecho sobre Libraries
  2. Add Jar/Folder (Agregar JAR / Carpeta)
  3. Buscamos y seleccionamos nuestro JAR descargado

Luego lo único que tenemos que hacer es nuestro honorable MAIN que quedaría de la siguiente manera:

public static void main(String[] args) {
  java.awt.EventQueue.invokeLater(new Runnable() {
    public void run() {
      try {
        Frame.setDefaultLookAndFeelDecorated(true);
        SubstanceLookAndFeel.setSkin("org.jvnet.substance.skin.OfficeSilver2007Skin");
        new JVentana();
      } catch (Exception e) {
        JOptionPane.showMessageDialog(null, "Error: "+e);
      }
    }
  });
}

Explicaré la dos lineas que son nuevas para ustedes. Sí, "JFrame.setDefaultLookAndFeelDecorated" y "SubstanceLookAndFeel.setSkin"

  1. La primera setea el Frame que vendrá luego a que adopte el decorado de Subtances y que decorado tendrá.
  2. Bueno la segunda linea de encarga del decorado en éste caso es "officeSilver2007Skin"

Si todo va bien deberíamos ver algo así