input::-ms-reveal {
    display: none;
}

input::-ms-reveal {
    color: white;
    background-color: red;
}

input::-ms-clear{
    display: none;
}

input::-ms-clear{
    background-color: red;
    color: white;
    border: 1px solid #808080;
}

	Imagen aleatoria en color de 200px de ancho por 100px de alto Categoría “Sports” http://lorempixum.com/200/100/sports/
	Imagen aleatoria en grises de 200px de ancho por 100px de alto Categoría “Sports” http://lorempixum.com/g/200/100/sports/ (La “g” indica que queremos la imagen en grises)
	Quinta imagen en color de 200px x 100px Categoría “Fashion” http://lorempixum.com/200/100/fashion/5/
	Imagen aleatoria en color de 200px de ancho por 180px de alto Categoría “City” Texto sobreimpreso “Variable not found” http://lorempixum.com/200/180/city/Variable not found/

<img src="http://lorempixum.com/200/180/city" alt=”Ciudad” />

• Migración a HTML5
• IE9 para desarrolladores
• Buenas prácticas en la detección de navegadores
• El poder de los CMS
• ASP.NET MVC 3

• Barcelona, 22 de marzo
• Valencia, 24 de marzo
• Bilbao, 29 de marzo
• Sevilla, 31 de marzo (hey, juego en casa! ;-))
• Madrid, 5 de abril

Page.MetaDescription y Page.MetaKeywords

<%@ Page Title="Variable not found" Language="C#" 

         MasterPageFile="~/Blog.master" AutoEventWireup="true"

         CodeBehind="Default.aspx.cs" Inherits="Variable.Blog" 

         MetaDescription = "Variable not found. Artículos, noticias, curiosidades, 
                            reflexiones... sobre el mundo del desarrollo de software, 
                            internet, u otros temas relacionados con la tecnología"

         MetaKeywords = "desarrollo,programación,.net,c#,asp.net,asp.net mvc,software"   

%>

protected void Page_Load(object sender, EventArgs e)

{

   Product prod = ObtenerProducto(); // Carga el producto 

   this.Title = prod.Denominacion;

   this.MetaDescription = prod.DescripcionBreve;

   this.MetaKeywords = prod.Tags;

}

<title>NETBOOK ACER ASPIRE ONE D250-0BK</title>

<meta name="description" content="Netbook con procesador Intel® Atom N270 1.6 GHz, 
                                  1GB memoria, 160GB disco duro, t. gráfica Intel® GMA 950,
                                  pantalla 10.1' LED, webcam y Windows XP." />

<meta name="keywords" content="Netbook, ultraportátil, acer, aspire" />

Response.RedirectPermanent()

public partial class About: System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

   {

      // Redirigimos About.aspx a AcercaDe.aspx

      Response.RedirectPermanent("AcercaDe.aspx"); // 301 al canto!

}

}

¡Direcciones amigables!

• http://www.miservidor.com/product/ACER-ASPIRE-ONE-D250-0BK

void Application_Start(object sender, EventArgs e)

{

   // Code that runs on application startup

   RegistrarRutas();

}

private void RegistrarRutas()

{

   RouteTable.Routes.MapPageRoute(

      "DetalleProducto",       // Nombre de la ruta

      "product/{productCode}", // patrón de URL

      "~/product.aspx"         // Página que procesará la petición

);

}

public partial class Product : System.Web.UI.Page

{

   protected void Page_Load(object sender, EventArgs e)

   {

      string productCode = RouteData.Values["productCode"] as string;

      if (!cargaProducto(productCode))

      {

         Response.Redirect("ProductNotFound.aspx");

      }

   }

}

HyperLinkToAcerAspire.NavigateUrl = 

      GetRouteUrl("DetalleProducto", 
                   new { productCode = "ACER-ASPIRE-ONE-D250-0BK" }
);

Mejoras en el marcado

Aunque existen distintas formas para conseguirlo (algunas de ellas descritas en la propia web del producto), hay una que es realmente sencilla, no hay que configurar nada, y es bastante rápida de activar:

Publicado en: Variable not found.

Cada vez que tengo que forzar la validación de los datos de un formulario Webforms mediante javascript me veo obligado a preguntarle a Google, ese que todo lo sabe, cómo era el nombre de la función. Cosas de la edad, supongo ;-)

Así que, a modo de auto-recordatorio y con la intención de que pueda ser útil a alguien más, ahí va: la función se llama Page_ClientValidate(). Retorna “true” si, una vez evaluados todos los validadores de la página, el valor de los campos es correcto (al menos en cliente; otra cosa son las comprobaciones en servidor, p.e., las definidas en un CustomValidator).

Y como ejemplo de uso, puede valer el siguiente. Se trata de un botón de envío en un formulario donde se compone un correo electrónico:

   1: ...

   2: <asp:Button ID="btnEnviar" runat="server" Text="Enviar mail" 

   3:      OnClick="btnEnviar_Click"

   4:      OnClientClick="return confirmar();"

   5: />

   6: ...

   7:  

   8: <script type="text/javascript">

   9:     function confirmar() {

  10:         if (!Page_ClientValidate())   // Fuerza la validación en cliente

  11:             return false;             

  12:             

  13:         return confirm('¿Seguro que desea realizar el envío?');

  14:     }

  15: </script>

Como se puede observar, en el atributo OnClientClick del botón incluye un script en el que se retorna el valor devuelto por la función confirmar. Si el retorno es false, se cancela el Postback, evitando así que se invoque al evento btnEnviar_Click que es el que realiza el envío del mail propiamente dicho.

En el cuerpo de la función confirmar(), en primer lugar, validamos la página; si ésta no supera el proceso, los validadores habrán mostrado sus mensajes de error y retornamos falso, haciendo que se anule el postback. Si la validación es correcta, solicitamos al usuario que confirme la acción y retornamos su decisión.

Publicado en: Variable not found.

Seguro que más de una vez has sufrido de lo lindo al tocar un archivo de hoja de estilos. Suelen estar mal organizados, ser muy extensos, difíciles de mantener, hay declaraciones duplicadas por todas partes… Y seguro que siempre te has preguntado si hay otra forma menos complicada de conseguir lo mismo.

K. Scott Allen nos habla en su post Keeping CSS Files DRY de .Less (dot less), un interesante componente portado del mundo Ruby capaz de “compilar” hojas de estilo que utiliza una notación extendida y mucho más potente del estándar CSS, permitiendo las siguientes características:

• Uso de variables. Less permite declarar y utilizar variables para los valores que utilizaremos frecuentemente en nuestra hoja de estilos, así:
  
  

  @nice-blue: #5B83AD;

  #header { color: @light-blue; }

  #footer { color: @light-blue; }

  
  
• Operaciones. Podemos utilizar expresiones para obtener valores, por ejemplo:
  
  

  @base: 5%;

  @filler: @base * 2;

  @other: @base + @filler;

  color: #888 / 4;

  background-color: @base-color + #111;

  height: 100% / 2 + @filler;

  
  Fijaos en un detalle de lo más interesante: Less es capaz de distinguir cuándo está operando con colores y cuándo con unidades, ofreciendo el resultado correcto en cada caso.
  
  
• Mezclas (mixins), otra potente capacidad de Less que seguro que puede venirnos bastante bien, que consiste en incluir dentro de un conjunto de reglas dentro de otro, sólo haciendo referencia a su selector:
  
  

  .bordered {

    border-top: dotted 1px black;

    border-bottom: solid 2px black;

  }

  #menu a {

    color: #111;

    .bordered;

  }

  .post a {

    color: red;

    .bordered;

  }

  
  
• Reglas anidadas, que nos permiten definir reglas siguiendo una estructura más legible y fácilmente reconocible por su paralelismo con la estructura del documento:
  
  

  #header {

    color: black;

    .navigation {

      font-size: 12px;

    }

    .logo {

      width: 300px;

      :hover { text-decoration: none }

    }

  }

  
  
• Visibilidad de variables. Las variables pueden ser declaradas de forma global (como en el primer ejemplo) o asociadas a algún selector, lo que les aporta ámbito de visibilidad de forma muy similar a los lenguajes tradicionales:
  
  

  @var: red;

  #page {

    @var: white;

    #header {

      color: @var; // color será “white”

    }

  }

  
  
• Accesores. Less permite utilizar valores de propiedades y variables como contenido para otras propiedades de forma muy natural:
  
  

  #defaults {

    @width: 960px;

    @color: black;

  }

  .article { color: #294366; }

  .comment {

    width: #defaults[@width];

    color: .article['color']; 

  }

  
  Fijaos que el bloque #defaults no tiene por qué corresponder con un elemento del documento a formatear, se trata sólo de una forma de agrupar variables y reglas, consiguiendo un efecto empaquetador muy similar a los espacios de nombres.
  
  
• Comentarios en línea, al más puro estilo C++ ó C#:
  
  

  // Get in line!

  @var: white;

  
  
• Importación de archivos, permitiendo acceder a reglas y variables definidas en otros archivos:
  
  

  @import "library"; // Si la extensión es .less, se puede omitir

  @import "typo.css";

¿Y cómo funciona esto? Muy sencillo. En primer lugar, escribimos la hoja de estilos en un archivo .less, en el que podemos utilizar las características descritas anteriormente, y lo incluimos en las páginas donde nos interese, como lo hacemos siempre:

<link href="/Content/estilos.less" rel="stylesheet" type="text/css" />

Es interesante tener en cuenta que Less es compatible con CSS, lo que quiere decir que si simplemente renombramos el .css a .less, ya tendremos una hoja de partida.

A continuación, debemos introducir en el web.config una declaración que asocie la extensión .css al compilador Less:

<httpHandlers>

  <add validate="false" path="*.less" verb="*"

    type="dotless.Core.LessCssHttpHandler, dotless.Core" />

</httpHandlers>

Cuando llega una petición, el handler se encargará de compilar el archivo .less, generar el .css correspondiente y enviarlo minimizado al cliente, cacheando el resultado para posteriores usos, si se lo indicamos en la configuración, una sección opcional del web.config.

.Less está diseñado para ASP.NET 3.5 o superior, y por supuesto, es válido tanto para Webforms como para ASP.NET MVC. Se distribuye bajo licencia Apache 2.0, y está aún en fase beta, por lo que habrá que estar atento a la evolución de este interesantísimo proyecto.

Enlaces:

• Home del proyecto
• Descargar el código fuente de nLess en Github
• Documentación de Less

Publicado en: Variable not found.