jump to navigation

Reloj Javascript en una capa Marzo 9, 2010

Publicado por lineadecodigo en : JavaScript , Añadir un comenario

Uno de los artículos más leidos, aunque no el que más, es el que explica cómo crear un Reloj en JavaScript. En dicho artículo se explica como poner un reloj dentro de un campo input de un formulario. Y claro, esto puede poner bastantes limitaciones en el diseño de nuestra página.

Es por ello que, en este artículo, explicamos como crear nuevamente el reloj, pero esta vez, su destino será una capa. Esto permite colocar la capa en cualquier parte de la página, facilitando el diseño de la misma.

Bueno pasamos a lo practico. Primeramente obtenemos la fecha y de la fecha mediante los métodos .getHours(), .getMinutes() y .getSeconds() obtenemos la hora, minutos y segundos. Recuerda que estos son los datos de la hora de tu maquina.

El código seria el siguiente:

  1. var  dia = new Date();
  2. var  hora = dia.getHours();
  3. var  minutos = dia.getMinutes();
  4. var  segundos = dia.getSeconds();

Posteriormente realizaremos una comprobación de que si el valor que tiene en un momento dado cualquiera de las variables anteriores esta entre 0 y 9, añadiremos un cero delante. Simplemente para que nos quede más mona la hora.

  1. if ((segundos >= 0)&&(segundos <= 9)){
  2.   segundos="0"+segundos;
  3. }

Para visualizar la hora en el navegador crearemos una capa. En primer lugar definiremos el estilo que queramos darle a la capa en la cabecera de la página, es decir, dentro de las etiquetas <HEAD> y </HEAD>. Para definir el estilo utilizaremos las etiquetas <STYLE> y </STYLE> de la siguiente forma:

  1. #capa_reloj {font:bold; color:yellow; background:blue; width:70px;}

En nuestro caso la capa va a tener el fondo azul y las letras amarillas.Pero se puede formatear la capa al gusto del consumidor.

Y segundo incluiremos nuestra capa dentro de la página mediante las etiquetas <DIV> y </DIV>:

  1.  
  2. <div id="capa_reloj"></div>
  3.  

Deberemos de tener en cuenta que para modificar el contenido de la capa deberemos de utilizar la propiedad innerHTML, en el método en el que mostramos la información:

  1. document.getElementById("capa_reloj").innerHTML = time;

Y la forma de ejecución es el mostrar la hora cada segundo mediante la función setTimeout(cadena,milisegundos), la cual ejecuta la cadena indicada pasados los milisegundos indicados. (En nuestro caso cada segundo = 1000 milisegundos).

  1. window.setTimeout("mostrar()",1000);

También indicar que hay que empezar a ejecutarlo cuando se cargue la pagina, es por ello que utilizaremos el método onLoad(), para empezar a ejecutarlo, mediante setTimeout.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Javascript

Imagen con enlace en HTML Febrero 2, 2010

Publicado por lineadecodigo en : HTML , Hasta ahora 1 comentario

Aunque lo normal en la web es que los enlaces sean textos, también podemos extender la capacidad de hacer enlaces con imagenes. De esta forma, cuando pulsemos sobre una imagen, esta actuará como enlace y nos llevará al destino demarcado por el enlace.

Para poder hacer esto en HTML, lo primero será poner una imagen. Para ello nos basamos en la etiqueta IMG:

  1. <img src="casarural.jpg" alt="Los Tejos">

Acordaros, como buena práctica, el poner un texto alternativo a la imagen con el atributo alt.

Ahora tendremos que recubrir el código de la imagen con un código de enlace. Para los enlaces nos basamos en la etiqueta A o anchor. Y para indicar el enlace el atributo href. De esta manera el código quedaría de la siguiente forma:

  1. <a href="http://www.lostejos.com" title="Los Tejos"><img src="casarural.jpg" alt="Los Tejos"></a>
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código

Repaginar con jQuery y AJAX Febrero 1, 2010

Publicado por lineadecodigo en : jQuery , Hasta ahora 1 comentario

En unas pocas líneas vamos a ver lo sencillo que es repaginar utilizando jQuery y AJAX. El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.

En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:

datos.php?pagina=1 //Nos devolverá la primera página
datos.php?pagina=5 //Nos devolverá la quinta página

En posteriores artículos entraremos en detalle de como construir esta página con PHP de forma sencilla. Pero de momento nos vamos a centrar en el desarrollo de la parte cliente con jQuery para realizar peticiones AJAX.

Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.

  1.  
  2. <div id="mensajes"></div>
  3.  
  4. <button id="anterior">Anterior</button> | <button id="siguiente">Siguiente</button>

Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.

La inicialización de jQuery, tan sencilla como una línea:

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

De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:

var pagina=1;

La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.

Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery. La codificación de los botones será muy sencilla. Los pasos que seguirán serán.

  1. Decrementar el valor de una variable general llamado página
  2. Llamar a una función cargardatos(); la cual implementará las peticiones AJAX

El código quedará de la siguiente manera:

$("#anterior").click(function() {
  pagina--;
  cargardatos();
});
 
$("#siguiente").click(function() {
  pagina++;
  cargardatos();
});

Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.

El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando

"datos.php?pagina="+pagina;

El segundo parámetro de la función .get() es un función que recibe un parámetro data con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa "mensajes". Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.

  1. function(data){
  2.   if (data != "") {
  3.     $("#mensajes").html(data);
  4. }

Así, el código completo de la función cargardatos() quedará de la siguiente forma:

function cargardatos(){
  $.get("datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $("#mensajes").html(data);
    }
    }
  );
}

Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX... resuelto.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Utilizar la ñ en HTML Enero 25, 2010

Publicado por lineadecodigo en : HTML , Hasta ahora 1 comentario

A la hora de escribir documentos HTML y publicarlos en la web tenemos que tener en cuenta que, estos, son susceptibles de ser visualizados por personas de muchos sitios. Y que estas personas tendrán diferentes configuraciones de sus navegadores. Es por ello que tenemos que prestar especial atención cuando utilicemos símbolos especiales de los idiomas.

Esto nos va a aparecer si utilizamos codificaciones de codificación locales, como puede ser la ISO-8859-1.

  1. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Este es el caso de la Ñ, letra que solo encontramos en el alfabeto español. Así, si queremos utilizar la ñ en nuestros documentos HTML, lo mejor que podemos hacer es escaparla. Para ello, en vez de escribirla directamente la deberíamos de escribir de la siguiente forma:

  1. &ntilde;

O en mayúsculas:

  1. &Ntilde;

De esta forma podríamos tener textos como...

  1. La capital de Espa&amp;ntilde;a es Madrid

...que se visualizaría de la siguiente forma:

La capital de España es Madrid

Otra opción, siempre y que podamos, es utilizar una codificación UTF-8, que nos evita estos problemas:

  1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre HTML

Volcar el contenido de la sesión en ASP Enero 20, 2010

Publicado por lineadecodigo en : ASP , Hasta ahora 1 comentario

Mediante este simple ejemplo buscamos ver cómo listar los datos que un usuario tiene almacenados en su sesión. En primer lugar hay que recordar que los datos de sesión están almacenados mientras el usuario realiza una navegación por nuestra web.

La forma que ASP nos ofrece para recuperar y poner información es el objeto Session. Si en este punto no sabemos como hacer esto es útil leerse el articulo Guardar información en la sesión del usuario.

En nuestro caso desconocemos el nombre de la variable que almacena el dato en sesión. Ya que sino podríamos utilizar la sentencia...

  1. Session("nombreVariable")

...para recuperarla.

Lo que el objeto Session nos ofrece es la colección Contents, la cual, alberga a todas las variables instanciadas en sesión. Nos podemos valer de un bucle iterativo como for each para recuperarlas todas y mostrarlas en pantalla.

  1. for each x in Session.Contents
  2.   Response.Write(x + " =" + Session.Contents(x) + "<br>")
  3. next

En el caso de que la variable almacenada en sesión sea un array se nos producirá un error. Es por ello que hay que controlar que la variable sea o no un array mediante la función IsArray().

  1. IsArray(Session(x))

En el caso de que el elemento sea un array, tendremos que recorrer todos sus elementos. Para este caso, un bucle for desde el primer elemento del array hasta el último sería suficiente.

  1. For w = LBound(Session(x)) to UBound(Session(x))
  2.   Response.Write(x + "[" + CStr(w) + "] = " + Session(x)(w) + "<br>")
  3. Next
|- Descargar el código
|- Reportar error en el código
|- Foro sobre ASP

Insertar un registro en una BD con ADO Enero 8, 2010

Publicado por lineadecodigo en : ASP , Hasta ahora 1 comentario

Lo primero que tenemos que hacer para poder insertar un registro en una BD con ADO es conectarnos a la base de datos a través de un objeto Connection. A este objeto hay que pasarle la cadena de conexión indicando donde se encuentra la base de datos. Nosotros vamos a hacer la conexión, en este caso, sin usar DSN. Es más recomendable conectarse a la base de datos vía un DSN, pero esto nos permite ver código nuevo.

Accederemos al fichero directamente:

  1.  
  2. Set db = Server.CreateObject("ADODB.Connection")
  3. Dim DB_CONNECTIONSTRING
  4. DB_CONNECTIONSTRING = "Driver={Microsoft Access Driver (*.mdb)};Dbq=" & Server.MapPath("/db/prueba.mdb") & ";"
  5. db.open DB_CONNECTIONSTRING

Tanto en el acceso con DSN o sin DSN el objeto utilizado es un ADODB.Connection

Una vez que hemos abierto la conexión con la base de datos tendremos que comprobar que el texto a insertar no existe en la base de datos. Para realizar esta comprobación utilizamos una sentencia SELECT y un objeto ADODB.Recordset.

  1. set rs_existe = Server.CreateObject("ADODB.Recordset")
  2. QLStr = "SELECT valor FROM datos WHERE valor ='" + texto_insertar  + "'"
  3. rs_existe.open SQLStr, DB_CONNECTIONSTRING, adOpenStatic, adLockReadOnly, adCmdText

En el caso de que esta búsqueda no nos devuelva ningún registro de la base de datos esto significa que la palabra a insertar no existe en nuestra base de datos. Es por ello que procederemos a realizar la inserción.

Lo que estamos haciendo es montar una sentencia SQL de tipo INSERT, la cual ejecutaremos sobre otro ADODB.Recordset

  1. if not (rs_existe.EOF) then
  2.     Response.Write ("El valor a insertar ya existe")
  3. else
  4.     set rs_insert = Server.CreateObject("ADODB.Recordset")
  5.     SQLStr = "INSERT INTO datos VALUES ('" + texto_recibido + "')"
  6.     rs_insert.open SQLStr, DB_CONNECTIONSTRING, adOpenStatic, adLockReadOnly,adCmdText
  7.     Response.Write ("Insertado el valor " + texto_recibido)
  8. end if

Para realizar una inserción en una base de datos utilizamos la sentencia INSERT; la cual tiene la siguiente forma:

INSERT INTO tabla[s] (campo[s]) VALUES (valor1, valor2,..., valorN)

Los valores deberán de coincidir con su posición en la tabla de la base de datos.

Con unas pocas líneas de código tenemos nuestro fichero ASP que utiliza los objetos de ADO para insertar un registro en una BD.

|- Descargar el código
|- Reportar error en el código
|- Foro sobre ADO

Obtener los códigos ASCII de una cadena de texto Enero 7, 2010

Publicado por lineadecodigo en : Java , Añadir un comenario

En este ejemplo vamos a ver como obtenemos los códigos ASCII de una cadena de texto con Java. Para ello recorreremos los caracteres de la cadena e iremos obteniendo el código. Para ello nos apoyamos en el método .codePointAt().

El método .codePointAt() devuelve el código ASCII de un carácter en concreto. El carácter será el que coincida con el índice que se pasa como parámetro al método.

Empezamos definiendo la cadena:

  1. String sCadena = "Esto es una cadena de texto";

Ahora empezamos recorriendo la cadena, para ello nos apoyamos en un bucle for y en el método .length(), el cual nos ayuda a conocer el tamaño de la cadena. En el interior del bucle, y apoyándonos en el elemento de interacción vamos obteniendo el código ASCII de los caracteres con el método .codePointAt()

  1. for (int x=0;x<sCadena.length();x++)
  2.   System.out.println(sCadena.charAt(x) + " = " + sCadena.codePointAt(x));;

Vemos que utilizamos el método .charAt() para sacar el carácter asociado al código ASCII.

|- Descargar el código
|- Reportar error en el código
|- Foro sobre Java

Peticiones AJAX con jQuery Enero 6, 2010

Publicado por lineadecodigo en : jQuery , Añadir un comenario

Las bondades del patrón AJAX son más que conocidas... La posibilidad de hacer peticiones de forma asíncrona que actualicen una parte de la página es una realidad de muchas webs. jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.

En este caso vamos a realizar una petición a una página para que nos devuelva un contenido, el cual incluiremos en una capa de nuestra página.

Así, lo primero será montar nuestra página HTML. Con su button y su div.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. title"><title>Petición AJAX con jQuery</title>
  6. </head>
  8. <h1>Petición AJAX con jQuery</h1>
  9. <div id="mensaje"></div>
  10.  
  11. <button id="cargar">Cargar</button>
  12.  
  13. </body>
  14. </html>

Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.

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

Una vez configurado todo... vamos a resolver el tema en cuestión. Lo primero será capturar el onClick sobre el botón. Para ello, sobre el ID cargar asociamos la función click().

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.  $("#cargar").click(function(){
  4.     // Petición AJAX 
  5.  });
  6.  
  7. });
  8. </script>

Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros se descomponen en:

Así la petición AJAX será:

  1. $.get("http://lineadecodigo.com/samples/datos.php", function(data){
  2.   $("#mensaje").html(data);
  3. });

En ella se puede apreciar varias cosas. La primera que datos.php es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor... dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html()

Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Obtener un carácter de una cadena con Java Enero 5, 2010

Publicado por lineadecodigo en : Java , Añadir un comenario

Si queremos obtener un carácter de una cadena con Java, simplemente tenemos que utilizar el método .charAt() sobre la misma cadena.

De esa manera, lo primero será definir la cadena:

  1. String sCadena = "Esto es una cadena de texto";

Ahora tenemos que saber que los caracteres empiezan a enumerarse por el 0. Es por ello que si queremos obtener el primer carácter tenemos que solicitar el 0, y si queremos el carácter 'e' de la palabra 'es', este será el quinto carácter.

De esta manera el código Java con el método .charAt() se queda de la siguiente forma:

  1. System.out.println(sCadena.charAt(5));
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Java

Ordenando alfabéticamente con CASE_INSENSITIVE_ORDER Enero 4, 2010

Publicado por lineadecodigo en : Java , Añadir un comenario

En el artículo sobre cómo ordenar un vector de forma alfabética con Java veíamos como implementar un comparador alfabético utilizando el interface Comparator.

Esto lo podemos realizar de otra forma mediante el campo CASE_INSENSITIVE_ORDER de la clase String. Este campo nos permite realizar ordenaciones que ignoren las mayúsculas.

Lo primero, el declarar el Vector e insertarle elementos:

  1. Vector<String> miVector = new Vector<String>();
  2. miVector.add("Victor");
  3. miVector.add("julio");
  4. miVector.add("amaya");

Ahora ejecutamos la ordenación mediante el método .sort(). El segundo parámetro será la forma de ordenación, el campo CASE_INSENSITIVE_ORDER.

  1. Collections.sort(miVector,String.CASE_INSENSITIVE_ORDER);

Ya solo nos quedará el volcar el contenido por pantalla.

  1. for(String sElemento: miVector){
  2.   System.out.println(sElemento);
  3. }
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Java