Archivo para ‘Programación de páginas Web’ Categoria

jQuery Calculator, la calculadora definitiva

28 de Enero de 2009

En la mayoría de aplicaciones de gestión es muy últil disponer de una calculadora para introducir nuevos datos en un formulario o para realizar pequeñas comprobaciones. Si además podemos disponer de una calculadora dentro de la interfaz del programa y accesible vía un icono o al hacer click sobre un input, pues mejor que mejor. Hoy os presento jQuery Calculator.

Aspecto por defecto

Aspecto por defecto

Uso

1.Incluir jQuery

2.Descargar el plugin jQuery Calculator (v1.0.0) e incluir los archivos necesarios en la página

<style type="text/css">@import "jquery.calculator.css";</style>
<script type="text/javascript" src="jquery.calculator.js"></script>

3.Realizar la invocación (ver más ejemplos)

$('input').calculator();

$('input').calculator({showOn: 'button'});

Se puede invocar desde un botón, una imágen, al hacer focus sobre un elemento. Además podemos personalizar la animación: show, slide, slideDown, fade… (gracias a jQuery UI).

Localización

jQuery Calculator además está disponible en varios idiomas, entre ellos, el español.  Basta con agregar el archivo de idioma correspondiente y cargar la calculadora indicando el idioma cómo parámetro de la llamada:

<script type="text/javascript" src="jquery.calculator-es.js"></script>
$('#l10nCalc').calculator($.calculator.regional['es']);

Estilos CSS

Por defecto, los colores y elementos gráficos de jQuery Calculator, la verdad, són un poco sosos, pero por suerte disponemos de una extensa guía de diseño para darle nuestro toque personal modificando el CSS directamente para conseguir darle algo más de vida.

)

Mismo plugin + CSS modificado = Nueva calculadora :)

Funciones Extra

jQuery Calculator es más potente de lo que parece a simple vista, podemos trabajar con diferentes bases, podemos añadir más botones y funciones a la calculadora para adaptarla 100% a lo que queremos hacer con ella, además de definir los callbacks adecuados para tratar los resultados obtenidos y ya se me olvidaba, también tiene funciones de “memória”.



Select con imágenes de fondo para internet explorer

26 de Enero de 2009

Hace un par de semanas escribimos un post, de como poner imágenes de fondo en un Select, pero el método que se explicó se podía aplicar solamente a las combos para firefox. Entonces se nos comentó como se podría hacer para dar soporte a internet explorer. Para conseguir aplicar esto para este navegador, necesitaremos la ayuda del javascript y una de sus librerias, en concreto una llamada jDrop (aquí adjuntamos el enlace de la página): http://doctorfilter.com/jDrop/. Aquí nos podremos descargar un paquete con todo lo necesario en un .zip comprimido.

A continuación  debrmos incluir los js i los css correspondientes para poder aplicar esta libreria, en este caso incluiriamos estos casos en el head:

<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-personalized-1.5.1.packed.js”></script>
<script type=”text/javascript” src=”js/jquery.dimensions.js”></script>

<script type=”text/javascript” src=”js/jquery.jdrop.js”></script>
<link rel=”stylesheet” media=”screen” type =”text/css” href=”css/screen.css” >
<script type=”text/javascript”>
$(document).ready(function(){
$(”select”).jdrop()
$(”.dragDiv”).css({top:’100px’}).draggable()
})
</script>

Seguidamente al select le debemos poner la clase class=”comboJDrop”. Finalmente en cada una de las options del select se debe poner un atributo html en el que adjuntaremos la ruta de la imagen que pertenece a la opción, pero teniendo en cuenta que debe estar incuida enel tag img de HTML. Ver ejemplo:

<select name=”prova” style=”width:150px;” class=”comboJDrop” >
<option value=”1″ html=”<img src=’styles/imgs/checked.gif’ />”>Opción 1</option>
<option value=”2″ html=”<img src=’styles/imgs/calendar.png’ />”>Opción 2</option>
<option value=”3″  html=”<img src=’styles/imgs/page_go.png’ />” >Opción 3</option>
<option value=”4″  html=”<img src=’styles/imgs/anterior.gif’ />”>Opción 4</option>
</select>

Finalmente mostraremos el resultado que se puede obtener en internet explorer para esta combo:

Dale un toque de estilo a las imágenes de tu Web.

23 de Enero de 2009

Prácticamente todas las páginas Web constan de galerias de imágenes o de imágenes que ilustran los contenidos de la Web. Dependiendo de la página las imágenes se pueden mostrar de diferentes maneras. Hoy en día se puede mostrar con carruseles de javascript, animaciones, slide show, también tenemos el Light Box (el famoso efecto que se usa para ampliar las imágenes de la Web). Hoy os voy a proponer una manera un poco más original de poder mostrar las fotos que salen en cualquier página Web que esteis desarrollando. Hoy en día que parece se van a quitar del mercado las camaras Polaroid, siempre es un buen momento para recuperar el formato de esas míticas fotografias. La dirección a la que teneis que acceder es la siguiente:

http://www.netzgesta.de/instant/

Ya veréis que su uso es muy simple,  se debe descargar unas librerias en javascript y incluirlas en el head del fichero. Finalmente sólo se debe incluir una class a la imagen (tag img).

class = “instant itiltleft icolorFFFCE9 ishadow40 historical” para que la imagen se vea como sifuera antingua.

class = “instant nocorner itxtalt” para polaroid con esquinas redondeadas

class = “instant itxtalt” papa polaroid con las esquinas quadradas

class = “instant” para tener la imagen con margen en blanco

Simplemente acceded a la página, bajad el paquete de javascript y haced pruebas a ver si algun formato os convence.

Lanzamiento de jQuery 1.3

15 de Enero de 2009

Los chicos de jQuery (uno de los mejores framewoks javascript), han lanzado una nueva versión en los últimos días. Se trata de la versión 1.3.

En esta nueva versión de jQuery se ha visto incrementada sustancialmente la velocidad en la mayoría de aspectos. Básicamente la mejora de velocidad de ha mejorado cambiando el selector de elementos, ahora se utiliza Sizzle. Por otro lado se ha reescrito la inyección de HTML haciendo hasta 6 veces más rápida esta.

Para conocer más sobre esta versión de jQuery no olvides visitar la documentación oficial.

Descargar

jQuery Minified / jQuery Regular


Select con imágenes de fondo

13 de Enero de 2009

Uno de los controles más utilizados a nivel web son los selects o también llamados combos. Se usan constantemente en formularios (para que los usuarios introduzcan sus datos), en listados (para determinar que filtro lequeremos aplicar al listado), etc… De hecho este control nos permite dar opciones a los usuarios de interactuar con la página Web, pero  a la vez al ofrecer opciones acotadas al usuario para escoger, es una manera mucho mas segura (en el sentido de evitar errores en la web, o evitar injección de codigo sql) de lo que lo es un campo de texto.

En esta ocasión cito a las combos para comentar como se puede hacer para que estas tengan un estilo más elegante o más visual o más intuitivo con las opciones que ofrece a los usuarios de la aplicación. A parte de ver la apliación de estilos a un select, la idea es la de introducir imágenes a cada uno de los elementos que podremos seleccionar.

En primer lugar vamos a definir una combo con 4 opciones distintas, a cada una de las opciones vamos a asignarle un identificador para poder asociarle estilos distintos a cada una de ellas.

<select name=”prueba” style=”width:150px;” >
<option id=”opcion1″>Opción 1</option>
<option id=”opcion2″>Opción 2</option>
<option id=”opcion3″>Opción 3</option>
<option id=”opcion4″>Opción 4</option>
</select>

Una vez ya tenemos el select definido con las 4 opciones distintas y los identificadores asociados a cada una de ellas, ya podemos pasar a tratar los estilos que darán un toque especial a este habitual control. Vamos a poner una posible hoja de estilos para este select, y a continuación, comentaremos lo que se está tratando.

<style type=”text/css”>
SELECT{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #666666;

}
#opcion1 {
background-image: url(/styles/imgs/checked.gif);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion2 {
background-image: url(/styles/imgs/calendar.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion3 {
background-image: url(/styles/imgs/page_go.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;

}
#opcion4 {
background-image: url(/styles/imgs/anterior.gif);
background-repeat:no-repeat;
padding-left:25px;
margin-bottom:2px;
}
</style>

En primer lugar le damos estilo a toda la combo con la etiqueta SELECT que hace referencia al tag en cuestión. Simplemente le asignamos un estilo de fuente, tamaño y un borde de 1píxel de un color concreto, que aunque no lo parezca dará una toque elegante al elemento. A continuación tenemos los estilos asociados a cada una de las opciones. De hecho son todos iguales, lo único que varia son las rutas de las imágenes de fondo que se usarán para cada una. Designamos que esta imagen no se repita para que no se confunda con el texto de la opción (ya que en este caso combinaremos texto e imagen).  El padding-left se usa para que el texto de la opción empiece justo después de la imagen evitando solapaciones. Finalmente tenemos un margin bottom de 2 píxels que simplemente lo usamos para que haya una mínima separación vertical entre opciones. Finalmente mostraremos una posible imagen final de lo que podria ser este select.

¿Que son los triggers?

9 de Enero de 2009

Se les llama triggers o disparadores, son eventos que se ejecutan cuando se cumplen condiciones determinadas, al hacer un insert, update o delete en una tabla de una BBDD. Esto nos permite realizar acciones cuando se realiza una inserción, modificación o eliminación de un registro. Son parecidos a los procedimientos almacenados pero en este caso no se tienen que llamar como los stored procedures, sino que como hemos dicho se ejecutan automáticamente al cumplirse la condición.

Los triggers pueden ser extremadamente útiles para llevar a cabo las siguientes casos:

  • Cuando los datos de una tabla son generados desde otro tipo de procesos y es necesario que se controlen los valores, para evitar que algunos campos tomen valores concretos.
  • Para duplicar los contenidos de una tabla automaticamente y en tiempo real.
  • Para implementar restricciones sobre valores que pueden tomar ciertos campos de la tabla.
  • Incrementar automáticamente los valores de un campo.
  • Para controlar las modificaciones de los valores de los campos.
  • Para realizar actualizaciones de una tabla en cascada.
  • Para modificar campos o registros en una tabla que un usuario no puede modificar directamente.

A continuación vamos a ver un par de ejemplos de triggers que se pueden ejecutar en tablas para realizar cualquiera de las siguientes operaciones.

En el ejemplo número 1 el trigger que hace un pedido en la tabla pedidos cuando  en el almacen se modifica un pedido y este valor es inferior al de un valor dado:

BEFORE UPDATE ON tabla_almacen

FOR ALL records IF :NEW.producto < 100 THEN INSERT INTO tabla_pedidos(producto) VALUES (‘1000′);

END IF;

SELECT DBO.POLVE.TEST

END

En el segundo ejemplo, si insertamos o actualizamos el registro de un empleado de manera que el salario sea superior a 5000 euros, el trigger actualizará el salario a 5000 euros idependientemente del valor que hayamos insertado o introducido al modificar el registro.

CREATE TRIGGER tr1_empleados

BEFORE INSERT OR UPDATE OF salario
ON empleados
FOR EACH ROW
WHEN (:new.salario > 5000);
BEGIN
UPDATE empleados
SET salario = 5000
WHERE empleado_id = :new.empleado_id;
END;

Con estos ejemplos ya nos podemos hacer una pequeña idea de que son los trigger y de cuáles son sus utilidades y virtudes de cara a incrementar su uso en los desarrollos que impliquen BBDD.

Google Maps más accesible sin Javascript

8 de Enero de 2009

Es posible mejorar la accesibilidad de Google Maps a través de la implementación de la Google Static Maps API, que permite incluir una imagen simple mediante el tag <img> y una URL especificado en el atributo “src”.

Ejemplo: http://maps.google.com/staticmap?center=41.539402,2.441468&markers=41.539402,2.441468,red&zoom=17&size=400×300&key=TU-CLAVE-GOOGLEMAPS

Ejemplo Imagen API Estática de Google Maps

Pero no solo se trata de ganar en accesibilidad. Por ejemplo, si implementamos una versión imprimible del contenido, se podrá visualizar fácilmet que salga la imagen que se genera con dicha API.

Beneficios de las de URL Browser-friendly en el posicionamiento

27 de Diciembre de 2008

Los beneficios de la reescritura de una URL Browser-friendly son diversos, y estos no estan relacionados directamente con el posicionamiento. Existen, pues, beneficios directos e indirectos de la implementación de este tipo de direcciones URL. Por ello hace falta conocer el significado de una URL Browser-friendly.

En Internet hay una clasificación de las URL según la facilidad de comprensión en su lectura y la mayor descripción del contenido de la página que contiene:

  • Dirty-URL (dirección URL sucia)
  • Browser-friendly (dirección URL amigable).

Las Dirty-URL vienen de la práctica de la programación, en la que evidentemente hay que implementar variables para indicar los caminos o estados de un proceso en una aplicación. Este tipo de datos la mayoría de veces resulta incomprensible para los usuarios de las páginas Web. Sin embargo, no solo se presentan este tipo de direcciones URL en páginas Web dinámicas, ya que pueden presentarse en páginas Web estáticas, cuando el maquetador HTML, por desconocimiento plantea unas rutas nada inteligibles.

De todas formas, no en todos los casos una Dirty-URL es convertible a una URL Browser-friendly. Incluso en algunos casos no sería correcto:

  • Cuando se requieren diversos parámetros en una aplicación Web. Estos normalmente no son sustituibles en casos de complejidad alta.
  • Cuando la información con la que se trabaja no tiene por qué ser legible para el usuario o debe estar mas bien ofuscada.
  • Cuando se implementan formularios.

Las URL Browser-friendly son fáciles de comprender por el usuario y además aportan un valor descriptivo del contenido de la página. Sus principales características son.

  • Describen el contenido de la página Web que indican.
  • Se muestran fáciles de comunicar, dado que presentan una estructura mas bien corta (no más de 60 caracteres).
  • No contienen espacios entre palabras, sino guiones y barras.
  • Todas las letras que componen la URL deben estar en minúsculas, para evitar errores.
  • Son persistentes en el tiempo.

Por eso los primeros beneficios de la implementación de direcciones URL Browser-friendly saltan a la vista, ya que facilitan la lectura, memorización y escritura de las URL, mejorando principalmente la comunicación y la navegabilidad de la Web.

Luego, la ventaja de que una URL sea Browser-friendly es efectivamente el texto que expone la URL, que sirve para que el buscador también obtenga una información importante sobre el contenido de la página que esta indexando. Que puede ser tan importante como el contenido de la misma página.

Artículos relacionados:

Acceder a datos relacionados en varias tablas de BBDD en SQL

12 de Diciembre de 2008

Cuando hay que implementar una Base de datos, lo mas importante es el modelo conceptual. Es decir el diseño general de las tablas: número de tablas, campos por tabla, relaciones entre las tablas, claves primarias, claves foráneas, etc… Cuando relacionamos campos de diferentes tablas y el hecho de escoger los campos adecuados es cuando se debe tener cuidado de que las relaciones funcionen. Entre tablas pueden haber diferentes tipos de relaciones:

  • Relación 1 a  1: Cada registro de la tabla origen sólo puede tener asociado un registro de la tabla destino y viceversa.
  • Relacion 1a N: Cada registro de la tabla origen puede estar asociado a varios registros de la tabla destino, pero en cambio cada registro de la tabla destino solo puede estar asociado a un registro de la tabla origen.
  • Relación N a N: Cada registro de la tabla origen puede estar  asociado a varios registros de la tabla destino. Cada registro de la tabla destino  también puede estar relacionado con varios registro de la tabla origen.

Estos son a grandes rasgos los tipos de relaciones que nos podemos encontrar en lo que se refiere a BBDD.

Vamos a poner un ejemplo para ver como se usan estas relaciones en un caso real de modelo de base de datos. Si disponemos de una tabla de clientes y almacenamos un codigoCli para identificarlo. Entonces en la tabla facturas podremos relacionar las facturas y los clientes almacenando el campo codigoCli enla tabla facturas. Mediante este código podemos obtener todos los datos del cliente, almacenados en la tabla clientes, referenciado en la tabla facturas. Para poder acceder a estos datos sql nos permite hacerlo con la sentencia JOIN. En concreto INNER JOIN, LEFT JOIN, RIGHT JOIN.

La sentencia INNER JOIN es el cálculo cruzado de registros, cada registro de la tabla 1 es combinado con cada registro de la tabla 2. Pero solo permanecen los registros en la tabla combinada que cumplan la condición que se especifique en el WHERE de la sentencia. Esta es la sentencia más usada y por lo tanto es la que se usa por defecto.

SELECT *
FROM Clientes
INNER JOIN Facturas
ON Clientes.codigoCliente =
Facturas.codigoCliente

Con esta consulta obtendremos todos los datos de los clientes con los que existe una correspondencia entre el codigo del propio cliente y este codigo en las facturas.

Las operaciones con INNER JOIN pueden ser consideradas como cruzadas, naturales y de equivalencia.

Después tambien tenemo la sentencia OUTER JOIN, que en este caso no es necesario que los registros de la tabla 1 y la tabla 2 tengan una correspondencia, el registro es mantenido en la tabla combinada si no existe un registro que lo corresponda.

Despues tendremos las sentencias LEFT JOIN y RIGHT JOIN. En el primer caso mantenemos los datos de la primera tabla aunque no tengan correspondencia con la segunda. El RIGHT JOIN hace lo contrario, se trae los datos dela segunda tabla aunque no tenga correspondencia con la primera tabla. Podemos usar tanto una como la otra, dependiendo de la forma de trabajara la que estemos acostumbrados. A continuación adjunto un gráfico para poder ver de un modo ilustrativo el funcionamiento de este tipo de sentencias o más bien el tipo de resultados obtenidos.

Con  este tipo de sentencias se pueden hacer modelos conceptuales sin repetir datos, pero teniendo acceso a ellos usando las tablas que te den la relación correcta.

Forzar la reescritura de URL parametrizada por ASP.NET en el IIS

7 de Diciembre de 2008

La reescritura de URL mediante el ASP.NET y el IIS, cuando no se gestiona a través de un método que implemente un módulo ISAPI programado instalado correctamente en el servidor de páginas Web, se debe emplear la definición de módulos o controladores HTTP programados a medida para llevar a cabo el proceso.

Sin embargo existe una gran desventaja respecto a este último método y es el de que para poder que actúe el ASP.NET en el proceso de petición de una página Web, éste debe ser invocado a través de las extensiones mapeadas en el IIS. De este modo, si la URL no contiene un nombre válido de archivo y una extensión .aspx, no se procesará la petición jamás con el manejador de HTTP que nosotros hayamos programado. Por ejemplo: Si disponemos de esta URL http://misitio.com/catalogo/ordenadores/portatiles.aspx, que se reescribe en http://misitio.com/catalogo.aspx?familia=ordenadores&subfamilia=portatiles, se procesaría sin problemas. Sin embargo, si tenemos una URL del estilo: http://misitio.com/catalogo/ordenadores/portatiles/, al no disponer de extensión .aspx, no será procesada por el motor de ASP.NET sino por el IIS, lo que arrojará un 404 de ruta inexistente. Salvo que creemos dicha ruta físcamente a través de carpetas “/catalogo/portatiles/” y creemos un Default.aspx vacío y lo guardemos en la misma.

Pero existe una forma de forzar que todas las peticiones pasen directamente al motor de ASP.NET. Lo que consiste en mapear todas las extensiones de archivos a la extensión de ASP.NET aspnet_isapi.dll. Para ello, debemos dirigirnos a la pestaña de aplicaciones del sitio Web al que queramos habilitar este soporte. Dentro de esta ficha, debemos especificar el parámetro “.*” (que indica claramente todas las extensiones) y limitar el alcance de dicha definición al HEAD, GET Y POST con el motor de script habilitado y que no este habilitado la casilla de “verificar si existe el archivo”.