NetCódigo e Internet

Plugin WaterMark JQuery

fsancab — Sat, 03 Jan 2009 12:35:00 GMT

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.

Oxite. CMS de Microsoft

fsancab — Sat, 03 Jan 2009 12:33:00 GMT

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 Oxite.2008.12.5 y es ya una versión estable. Aprovecho para comentar que ya existía algún proyecto libre de este estilo usando ASP.Net como BlogEngine.Net, Subtext o dasBlog por si quieren echarle un vistazo. Les dejo recursos sobre el proyecto.

Y ya, hasta el año que viene, que lo disfruten.

WaterMark con JQuery

fsancab — Sat, 03 Jan 2009 12:26:00 GMT

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.

<title>TextBoxWaterMark</title>

</head>

<body>

<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.

Comprimir ficheros javascript

fsancab — Sat, 03 Jan 2009 12:23:00 GMT

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.

Habilitar debug javascript Visual Studio 2008

fsancab — Sat, 03 Jan 2009 12:22:00 GMT

¿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.

Mejorando formulario de contacto con JQuery

fsancab — Wed, 17 Dec 2008 21:07:00 GMT

Después de publicar el post sobre cómo realizar un formulario de contacto más dinámico de lo habitual usando JQuery, y estudiando algo más de JQuery me dí cuenta que el código de dicho post se puede mejorar para no tener que jugar con la posición del formulario. Para no repetir el post estos son los cambios.

1. Un poco en el css.

2. El código HTML para usar el nuevo estilo.

<div id="BoxFormContact">
<div id="FormContact">
<form action="#">
<fieldset>
<legend>Formulario de contacto</legend>
<p><label for="name">Nombre:</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail:</label> <input type="text" id="e-mail" /><br /></p>
<p class="submit"><input type="submit" value="Enviar" /></p>
<p class="submit"><input type="button" id="BtnCancelar" value="Cancelar" /></p>

</fieldset>
</form>
</div>
<img id="BtnContacto" src="img/contactobtn.jpg" width="197" height="20" />
</div>

3. El código JQuery

$(document).ready(function() {

// MUESTRA FORMULARIO
$("#BtnContacto").click(function(){
// COMPROBAMOS SI ESTÁ OCULTO O NO
if ($("#FormContact").is(":hidden"))
{
$("#FormContact").slideDown("slow");
}
else
{
$("#FormContact").slideUp("slow");
}

});

// OCULTA FORMULARIO
$("#BtnCancelar").click(function(){
$("#FormContact").slideUp("slow");
});

});

Aquí pueden observar el cambio.

Formulario de contacto con JQuery

fsancab — Wed, 17 Dec 2008 21:06:00 GMT

Veremos hoy cómo hacer un formulario de contacto que, de entrada está oculto, y mediante animación y JQuery haremos que se muestre. Es una forma distinta de mostrar cosas con JQuery.

El ejemplo lo pueden ver aquí.

Para realizar el ejemplo, y como ya es habitual, usaremos css, dom y jquery. Veamos primero el css.

Muy simple, posicionamos el formulario tal que quede solo a la vista del usuario la imagen para mostrarlo. Para ellos usamos posicionamiento absoluto.

Ahora el html.

<div id="formulario">
<form action="#">
<fieldset>
<legend>Formulario de contacto</legend>
<p><label for="name">Nombre:</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail:</label> <input type="text" id="e-mail" /><br /></p>
<p class="submit"><input type="submit" value="Enviar" /></p>
<p class="submit"><input type="button" id="BtnCancelar" value="Cancelar" /></p>

</fieldset>
</form>
<img id="BtnContacto" src="img/contactobtn.jpg" width="197" height="20" />
</div>

No tiene ciencia, un sencillo formulario, lo único especial es el botón Cancelar, que lo utilizaremos para ocultar el formulario.

Y ahora, el código JQuery. Dos sencillos pasos.
1. Asociamos al evento click de la imagen que muestra el formulario la animación para que lo muestre. Primero comprobamos si el formulario ya está mostrado o no, para así realizar la animación de mostrar u ocultar.
2. Asociamos al evento click del botón de cancelar la animación de ocultar el formulario.

$(document).ready(function() {

// MUESTRA FORMULARIO
$("#BtnContacto").click(function(){
// COMPROBAMOS SI ESTÁ OCULTO O NO
if ($("#formulario").css("top") == "-215px")
{
$("#formulario").animate({top:("10px")},1000);
}
else
{
$("#formulario").animate({top:("-215px")},1000);
}

});

// OCULTA FORMULARIO
$("#BtnCancelar").click(function(){
$("#formulario").animate({top:("-215px")},1000);
});

});

</div>

Hasta aquí.

Añadir imagen a links por tipo. CSS

fsancab — Wed, 17 Dec 2008 21:04:00 GMT

Lo que quiere decir el título es cómo hacer, por medio de estilos, el que aparezca una imagen en un lateral de los links dependiendo del tipo de destino que sea. Por ejemplo, asociar una imagen a todos los links que abran un pdf, o zip, o png, o lo que sea.

Es realmente sencillo, el css en cuestión es como este:

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(pdf.png) center left no-repeat;
}
a[href^="mailto:"] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(MailTo.gif) center left no-repeat;
}

Lo que hace este css es que si encuentra en el link una cadena que sea ".pdf" o "mailto" asociará este código a dicho link. Con esto, lo único que tendremos que hacer es repetir dicho código para cada uno de los tipos de asociaciones que deseemos. El resultado sería como el que sigue:

Con esto nos podemos olvidar de tener que asociar una imagen a cada link que creemos.

Espectacular. Microsoft Charting Control

fsancab — Wed, 17 Dec 2008 21:01:00 GMT

Espectacular. Realmente no encuentro otro calificativo para Microsoft Charting Control. En mi opinión, los mejores controles para crear gráficos estadísticos gratuitos que se pueden encontrar en la red.
Permiten una manipulación total sobre los gráficos, incluyendo AJAX. Esta vez, incluso en los ejemplos y la documentación creo que Microsoft lo ha hecho espectacular. Funcionan tanto para ASP.Net como para Windows Forms. Ejemplos:

El único incoveniente es que se necesita Microsoft .Net Framework 3.5 SP1
Estos son los links.

Consumir RSS Feeds

fsancab — Wed, 17 Dec 2008 20:57:00 GMT

Veremos en este post cómo consumir una fuente de datos rss feeds, concretamente con su última versión, la 2.0. Para conocer más sobre rss feeds pueden visitar la web de w3c que trata sobre el tema.
El consumo de esta fuente de datos se puede realizar con distintos controles de servidor que nos provee asp.net, datalist, gridview o repeater. Para este post usaremos el control repeater ya que nunca he hablado de él. Es un control contenedor enlazado a datos que genera una lista de elementos individuales, en nuestro caso, estos elementos serán cada uno de los registros que nos devuelva la fuente de feeds. Nos permite utilizar plantillas para albergar contenido, usaremos una tabla para ello. Las plantillas que provee son:

ItemTemplate. Usado para diseñar cada row impar.
AlternatingItemTemplate. Usado para diseñar cada row par.
HeaderTemplate y FooterTemplate. Usado para diseñar la cabecera y el pie.
SeparatorTemplate. Usado para diseñar los separadores entre dos elementos.

También proporciona eventos para todo el control del mismo. En esta ocasión no nos hará falta usar ningún evento. El elemento DOM que usaremos para incrustrar en el control repeater será un table.

Enlace con la fuente de datos.

El archivo de datos debe apuntar a la url que nos proporcione la fuente de feeds y el separador de cada registro será el elemento item de la especificación 2.0 de feeds. Simplemente con esto ya tenemos configurado el origen de datos.

Ahora diseñemos el control repeater. Es muy sencillo, incluiremos en cada plantilla del control los elementos necesarios para su correcta visualización, he incluido algo de estilos para que no quede muy feo.

CSS.

#table-rss th tr
{
padding: 8px;
font-weight: normal;
font-size: 13px;
color: #039;
background: #b9c9fe;
}

#table-rss td
{
padding: 8px;
border-top: 1px solid #fff;
color: #669;
}
#table-rss .normal
{
background: #e8edff;
}
#table-rss .alternate
{
background: #b9c9fe;
}

</style>

Cuando vean el resultado recuerden lo mal diseñador que soy....

Ahora el código del repeater:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
<HeaderTemplate>
<table id="table-rss">
<thead>
<tr>
<th style="width:15%;">Fecha Publ.</th>
<th style="width:35%;">Título</th>
<th style="width:50%;">Resumen</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td class="normal">
<asp:Label runat="server" ID="Label1" Text='<%# System.Convert.ToDateTime(XPath("pubDate")).ToString("dd/MMM/yyyy hh:mm") %>' />
</td>
<td class="normal">
<asp:HyperLink ID="HyperLink1" Runat="server" Text='<%# XPath("title") %>' NavigateUrl='<%# XPath("link") %>'
Target="_blank" Font-Names="Verdana" Font-Size="X-Small"></asp:HyperLink>
</td>
<td class="normal">
<asp:Label runat="server" ID="Label5" Text='<%# XPath("description") %>' />
</td>
</tr>
</tbody>
</ItemTemplate>
<AlternatingItemTemplate>
<tbody id="alternate">
<tr>
<td class="alternate">aabbb
<asp:Label runat="server" ID="Label1" Text='<%# System.Convert.ToDateTime(XPath("pubDate")).ToString("dd/MMM/yyyy hh:mm") %>' />
</td>
<td class="alternate">
<asp:HyperLink ID="HyperLink1" Runat="server" Text='<%# XPath("title") %>' NavigateUrl='<%# XPath("link") %>'
Target="_blank" Font-Names="Verdana" Font-Size="X-Small"></asp:HyperLink>
</td>
<td class="alternate">
<asp:Label runat="server" ID="Label5" Text='<%# XPath("description") %>' />
</td>
</tr>
</tbody>
</AlternatingItemTemplate>
<FooterTemplate>
<tfoot>
<tr>
<td colspan="3">Ejemplo de consumo de Feeds 2.0</td>
</tr>
</tfoot>
</table>
</FooterTemplate>
</asp:Repeater>

Una imagen del resultado:

Esto es todo.