January 2009 - Posts
He empezado a usar el watermark que hice en JQuery y me he dado cuenta de alguna cuestión a mejorar. Lo primero, he transformado el código en un plugin para JQuery. Lo segundo es que he introducido dos mejoras.
Una es la posibilidad de no aplicar el efecto a determinados input box o textbox, y lo segundo, la posibilidad de que cuando un input obtenga el foco se seleccione todo el texto que contiene. Esto para no tener que usar el ratón o teclado para manipular dicho texto.
Así que el plugin acepta dos parámetros, tal que:
JQuery.WaterMarkOn(param1, param2);
param1: string conteniendo aquellos input box o textbox en los que no se desea aplicar el watermark.
param2: string "true" o "false" que indica si se desea seleccionar el texto al obtener el foco.
Ejemplo:
JQuery.WaterMarkOn("input3,input5", "true");
En el ejemplo anterior se indica que al input3 y al input5 no se aplique el watermark y que se desea realizar un select a los input.
Aquí pueden ver el ejemplo en acción.
El plugin consta de dos ficheros, el código jquery y un fichero css para que puedan personalizar el watermark.
Aquí pueden ver bajar el plugin.
Lo pueden ver también en el repositiorio de plugins de JQuery.
Por fin Microsoft se ha decidido a crear su propio CMS o como lo llaman ellos, Blog Engine.
Creo que se echaba en falta alguna herramienta oficial para cubrir ese nicho espectacular que existe hoy en día en el mundo blog. Pero creo que, más enfocado para el público en general, lo veo más para las empresas en las que por unas razones u otras no quieren instalar otra base de datos que no sea SQL Server. Les aseguro que esto pasa a menudo.
Se ha escrito usando ASP.Net MVC y un ejemplo de uso se puede encontrar en
MIX Online. Tiene licencia
Ms-PL, que es una licencia open source made-in Microsoft. La versión actual es
Y ya, hasta el año que viene, que lo disfruten.
Hasta la fecha, para hacer las marcas de agua en mis textbox siempre he usado el control TextBoxWaterMark del ASP.Net Ajax Control Toolkit. El problema, o lo que yo considero un coñazo es tener que estar declarando para cada TextBox un TextBoxWaterMark que apunte al primero y asignar valores a cada propiedad. Esto por cada TextBox de la página. Realmente un esfuerzo innecesario.
Por esto me he decido escribir código JQuery para evitarlo y simplificar mi trabajo.
Para ello necesitamos un CSS que se aplique a la marca de agua y la llamada correspondiente al código JQuery. Tan sencillo como esto.
Como siempre, las partes.
CSS
.WaterMark {
color: #999;
background-color:#E2EAF4;
font-style: italic;
}
A continuación el código JQuery.
$(document).ready(function() {
// APLICA WATERMARK SI EL TEXTBOX NO TIENE VALOR
jQuery("input").each(function() {
if ($(this).val() == $(this).attr('title'))
$(this).val('').addClass('WaterMarkOn');
else
if ($.trim($(this).val()) == '')
$(this).addClass('WaterMarkOn').val($(this).attr('title'));
});
// AL OBTENER EL FOCO LIMPIA TITLE Y QUITA CLASE DE MARCA
jQuery("input").focus(function() {
if ($(this).hasClass("WaterMarkOn"))
$(this).removeClass('WaterMarkOn').val('');
});
// AL PERDER FOCO SI EL INPUT ESTÁ VACIO VUELVE A PONER MARCA
jQuery("input").blur(function() {
if ($(this).val() == '')
$(this).addClass('WaterMarkOn').val($(this).attr('title'));
});
});
Y el código aspx.
<head runat="server">
<title>TextBoxWaterMark</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/Default.js" type="text/javascript"></script>
<script src="Scripts/jquery.watermark.js" type="text/javascript"></script>
<link href="css/WaterMark.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Campo 1:</label>
<asp:TextBox ID="TextBox1" ToolTip="Introducir Campo 1" runat="server"></asp:TextBox>
<br /><br />
<label>Campo 2:</label>
<asp:TextBox ID="TextBox2" ToolTip="Introducir Campo 2" runat="server"></asp:TextBox>
<br /><br />
<label>Campo 3:</label>
<asp:TextBox ID="TextBox3" ToolTip="Introducir Campo 3" runat="server"></asp:TextBox>
</div>
</form>
</body>
Aunque en los comentarios se explica, esto es lo que hace el código JQuery.
Primero, el mensaje a mostrar como marca de agua lo obtendrá de la propiedad Tooltip si es un TextBox de ASP o de la propiedad title si es un input html. Realmente la propiedad Tooltip de ASP se renderiza como un title, así que en el JQuery trabajaremos con title. Se le asignará el valor de dicha propiedad siempre que el TextBox no tenga datos, si tiene no se aplica la marca de agua.
Segundo. Al obtener el foco el TextBox se le quita la marca de agua y se limpia su contenido.
Tercero. Al perder el foco, si no se ha escrito nada en el TextBox se le vuelve a aplicar la marca de agua.
Por supuesto, cambiando el css podremos adecuar la marca de agua a nuestro propio estilo..
Esto es todo, con una simple llamada en nuestro código tendremos el mismo WaterMark del ControlToolkit, con una sola llamada. Sobre todo cómodo.
Aquí puedes ver el ejemplo.
Aquí bajar el fuente.
Ahora que parece (por fin) que el uso de javascript es ya generalizado, podemos hablar de cómo mejorar los tiempos de carga de dichos ficheros.
No debemos dejar de comentar nuestro código, usar retornos de carro, etc. para mejorar su legibilidad. Esto hace que nuestros ficheros js crezcan con lo que su tiempo de carga aumenta. Esto, evidentemente, va en detrimento de nuestras páginas webs aunque no solo pasa los ficheros js, sino con todos.
La solución más sencilla es la compresión de estos ficheros. Existen distintas formas de realizar esta acción. Unas son en línea y otras son desde línea de comandos. Las dos dan el mismo resultado. Así que utilcen las que más cómoda les sea.
Para realizar la compresión existen distintos modos.
- Bajo. Borra espacios en blanco, comentarios y line feeds.
- Medio. Borra espacios en blanco, comentarios y line feeds y codifica palabras a sus valores alfanuméricos.
- Alta. Borra espacios en blanco, comentarios y line feeds y codifica palabras a sus valores alfanuméricos y recorta nombre de variables.
Aquí van algunos enlaces.
En línea.
Javascript Compressor
Code and Coffe
Compress Javascript
Javascript Compressor
Línea de comandos.
log4p
deanedwards
HTMLGuardian
AdvancedCoder
Recordar que, antes de comprimir nuestro fichero, hacer una copia del original para no perder el fuente.
¿Te ha hecho falta alguna vez utilizar el debug para código javascript? Si es así te habrás percatado que no funciona.
Aunque no lo creas la solución para poder activar el debug no es desde Visual Studio, por supuesto el web.config hay que tenerlo en modo debug, la solución pasa por acceder a las opciones del navegador, concretamente a las de internet explorer, sí, que yo sepa, solo funciona con ie.
Debemos acceder al la configuración avanzada del explorador, menú Herramientas-Opciones de Internet-Opciones avanzadas y entre todas las opciones que nos aparecen hemos de
deshabilitar la opción "Deshabilitar la depuración de scripts (Internet Explorer)", esta es la imagen correspondiente.
Una vez hayamos deshabilitado la opción ya podremos hacer debug en vs2008. Funcionará como a lo que estamos acostumbrados, puntos de ruptura, ventana de comandos, pilas, ejecutar código, asignar valores, etc.
Si alguien conoce algún plugin para Firefox, que lo diga.