jump to navigation

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 , Añadir un comenario

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

Recuperar datos de un formulario con PHP Enero 3, 2010

Publicado por lineadecodigo en : PHP , Hasta ahora 1 comentario

Vamos a crear un código en PHP que nos permita recuperar los datos introducidos en un formulario y nos los muestre en pantalla.

El primer paso será el crear el formulario HTML que nos permita captar los datos del usuario. Este formulario tendrá dos campos de texto y un botón que nos permita enviarlo.

  1.  
  2. <form id="myform" action="recibir-parametros.php" method="GET">
  3. label"><label for="p1">Primer parametro</label>
  4. <input type="text" id="p1" name="p1"><br/>
  5. label"><label for="p2">Segundo parametro</label>
  6. <input type="text" id="p2" name="p2"><br/>
  7. <input type="submit" value="Enviar Formulario"/>
  8. </form>
  9.  

En este punto es muy importante el valor de los atributos name, ya que serán los valores que demos a estos atributos, los que nos sirvan para recuperar lo que el usuario introduzca. En nuestro caso hemos datos los valores de p1 y p2. Que serán los que recuperemos.

Un segundo punto en el que tenemos que prestar atención es en atributo action. En dicho atributo tenemos que indicar el nombre del fichero PHP que procesará y recuperará los datos del formulario. El fichero que codificaremos más adelante se llamará recibir-parametros.php

El último punto importante del formulario será el tipo de envío de los parámetros. El tipo de envío se especifica mediante el atributo method y sus valores pueden ser POST o GET. Con POST los parámetros se pasan de forma oculta, mientras que con GET podemos ver los valores en la URL de petición. Dependiendo del método de envío que utilicemos necesitaremos utilizar un método u otro en nuestro código PHP.

Pasemos ya a codificar el fichero PHP. Este será sencillo. El método para recuperar datos de un formulario, cuando estamos pasando los parámetros mediante el método GET, es $_GET[]. El nombre del dato a recuperar se pasará como parámetro.

  1. $_GET["p1"];
  2. $_GET["p2"];

Ahora solo nos quedará el mostrarlo por pantalla. Para ello utilizamos la sentencia echo de la siguiente forma:

  1. echo "El valor de p1 es ",  $_GET["p1"], "<br/>";
  2.  echo "El valor de p2 es ",  $_GET["p2"];
|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre PHP