Probando Microsoft SEO ToolKit- Free! :)

Holas,Ya hace un tiempo que el posicionamiento web ha tomado un papel muy importante , la optimización de nuestras paginas para que los SEO puedan indexar más y de mejor en manera nuestro sitio web, de manera que el usuario al momento de buscar en Google, Bing, por ejemplo.

Microsoft SEO Tookkit es una herramienta gratis, que la puedes descargar mediante WPI, se instala en el IIS y puedes hacer los análisis de tus sitios web, puedes obtener reportes de rendimiento y del estado de optimización de tu sitio en relación a los SEO

La idea principal de Microsoft SEO:

Aumentar el tráfico del sitio web y de Ingresos
Analizar tu sitio web y encontrar maneras de aumentar su número de visitas. Utilizar las recomendaciones de SEO para mejorar el tráfico y aumentar tu flujo de ingresos.

Influencia y actualización de motores de búsqueda

Controlar el acceso y la visualización de su contenido en los resultados de búsqueda. Mantener los motores de búsqueda con la última información de su sitio web.

Mejorar la experiencia del Usuario 
Descubrir y resolver problemas comunes en el contenido de su sitio web y de diseño para mejorar su experiencia de usuario final. Que sea fácil para sus clientes a encontrar lo que estás buscando.

Visita la página image

http://www.microsoft.com/web/seo/

Un video Demostrativo de  como utilizarlo:

 

Como puedes ver, tienes posibilidad de examinar tu sitio de manera muy acabada, para obtener un reporte completo sobre los problemas de tu WebSite.

Espero que te sirva esta herramienta 🙂
Saludos,
Gonzalo

Exportar Grilla a CSV – Migrado a VB.NET

Hola, primero que nada, quiero aclarar que no soy el Dueño de este código, de hecho un lector de mi blog me posteó el ejemplo que estaba en C#  y lo necesitaba en VB.NET. Resulta que al traducirlo automáticamente con el gran TELERIK Converter.

image

El articulo original está en:
http://www.arzion.com/empresa-de-internet/posts/Exportar-un-GridView-a-CSV-con-ASPnet
Realizado por Ernesto Traversaro

Luego al traducirlo el Lector lo probó y dijo:

image

Luego otra persona me dijo lo mismo y lo revisé y era simplemente que una variable se estaba declarando dos veces entonces lo cambié y resulto:

Protected Sub ExportarCSV()
        Response.Clear()
        Response.Buffer = True
        Response.AddHeader(“content-disposition”, “attachment;filename=GridViewExport.csv”)
        Response.Charset = “”
        Response.ContentType = “application/text”
        GridView1.AllowPaging = False
        GridView1.DataBind()
        Dim sb As New StringBuilder()
        Dim k As Integer = 0
        While k < GridView1.Columns.Count
            sb.Append(GridView1.Columns(k).HeaderText + “,”c)
            System.Math.Max(System.Threading.Interlocked.Increment(k), k – 1)
        End While
        sb.Append(vbCr & vbLf)
        Dim i As Integer = 0
        While i < GridView1.Rows.Count
            Dim k2 As Integer = 0
            While k2 < GridView1.Columns.Count
                sb.Append(GridView1.Rows(i).Cells(k2).Text + “,”c)
               System.Math.Max(System.Threading.Interlocked.Increment(k2), k2 – 1)
            End While
            sb.Append(vbCr & vbLf)
            System.Math.Max(System.Threading.Interlocked.Increment(i), i – 1)
        End While
        Response.Output.Write(sb.ToString())
        Response.Flush()
        Response.End()
    End Sub

Entonces lo hice un ejemplo con VB.NET
PUEDES DESCARGARLO ACA

Y  si quieres ver el articulo original C# esta en:

http://www.arzion.com/empresa-de-internet/posts/Exportar-un-GridView-a-CSV-con-ASPnet

Saludos,
Gonzalo

Resumen de Post de Optimización Web – Chaloptimaze!

image

Hola, ya que algunos me han preguntado “tienes algún tip de optimización” voy a publicar un pequeño resumen de algunos de los post más relevantes sobre este tema que he realizado. Obviamente todavía estoy en deuda y es en esta época del año en donde puedo escribir más post, así que próximamente … más tips de optimización!

Dejo entonces algunos links de este humilde blog:

Saludos!
Gonzalo

Optimizando tu Website con CSS Sprites, caso práctico

Una de las Reglas de Oro en el temas de performance, tiene que ver con tratar de disminuir la cantidad de HTTP Request de nuestro sitio web. Para ser más claro, cada vez que se carga una imagen, un archivo Js, un archivo flash, un css, etc, existe una petición al servidor, y como en toda petición hay un proceso de conexión, solicitud y recepción que tiene un costo asociado, sumado a que existen cabeceras por cada petición, no es lo mismo tener que descargar 1 archivo de 100Kb que 10 de 10Kb , ya que este último caso, va a tomar más de 100Kb para su descarga ( y sumémosle el tiempo asociado).

Es aquí en donde nos sirven los CCS Sprites, la idea es similar a la Tabla Ouija, en donde tenemos una “tabla” con todos los símbolos que necesitamos y apuntamos a uno en particular (bueno, en la Ouija son los demoniacos espíritus)

El Caso Práctico

Vamos a tener una barra de menú en nuestra página web, que tiene los siguientes elementos:

image

 

El peso total de estas imágenes es  de 128 KB, por otra parte se puede ver una imagen que se llama Todo.png, esta imagen contiene un solo “lienzo” con todas las imágenes individuales que he mostrado. El hecho de que pese menos, sin ser especialista en imágenes, creo que es por la info asociada a la imagen propiamente tal. (Si no estoy en lo correcto, me ayudan) . Sin embargo esto no nos va a detener en nuestro análisis, ya que esto lo consideraremos al momento de obtener los resultados.

image 

Para analizar los cargas y los resultados vamos a utilizar FireBug de FireFox.

Página “Normal” Sin CSS Sprite

Al ejecutar la página, con imágenes independientes vemos que su comportamiento en tema de carga es la siguiente:

image

Existen 8 HTTP Request, y cada imagen tiene su procesamiento en términos de peticiones. El tamaño final es 125 Kb descargados y la duración es 4.08Seg. Según Firebug, fíjate en la petición del Icono7 siguiente:

image

Con esto podemos ver que la mayor parte del tiempo, en cada petición de imágenes es más el tiempo de conexión de la recepción de la imagen propiamente tal!

Página con CSS Sprite

Vamos a escribir el estilo que nos va a servir para crear nuestro ejemplo, el siguiente, a grosso modo puedes ver que se visualizan sectores de la imagen, de un ancho de 128px de tal manera de completar el menú completo. Cada uno de estos estilos se los asignaremos a etiquetas span.

 

<style>
#menu span {
  width:128px;
  height:110px;
  display:inline;
  float:left;
  background-image:url(ejemplo/todo.png);
}
.icono1 { background-position:0 0;}
.icono2 { background-position:-128px 0;}
.icono3 { background-position:-256px 0;}
.icono4 { background-position:-384px 0;}
.icono5 { background-position:-512px 0;}
.icono6 { background-position:-640px 0;}
.icono7 { background-position:-768px 0;}
</style>

En el siguiente código vemos las etiquetas Span y el contenedor DIV que vamos a utilizar.

<div id=”menu” style=”width:910px; height: 110px;“>
  <a href=”javascript:alert(‘icono1’)” title=”icono1″>
     
<span class=”icono1″></span>
  </
a>
  <a href=”javascript:alert(‘icono2’)” title=”icono2″>
     <
span class=”icono2″></span>
  </
a>
 
<a href=”javascript:alert(‘icono3’)” title=”icono3″>
    <
span class=”icono3″></span>
  </
a>
 
<a href=”javascript:alert(‘icono4’)” title=”icono4″>
    <
span class=”icono4″></span>
  </
a>
 
<a href=”javascript:alert(‘icono5’)” title=”icono5″>
    <
span class=”icono5″></span>
  </
a>
 
<a href=”javascript:alert(‘icono6’)” title=”icono6″>
    <
span class=”icono6″></span>
  </
a>
 
<a href=”javascript:alert(‘icono7’)” title=”icono7″>
    <
span class=”icono7″></span>
 
</a>
</div>

Ahora veamos el resultado en FireBug con FireFox.:

image

Solo dos pedidos, el HTML propiamente tal y luego la imagen, también al igual que en el caso anterior, hay un tiempo de Conexión alto en comparación al de recepción, pero esto se hace solo una vez, el resultado es claro, 109Kb de descarga con un tiempo de 2.12s.

Método Tamaño (Kb) Tiempo (Seg)
Normal

125Kb

4.08

CSS Sprite

109Kb

2.12

Es decir, un 48% de reducción en el tiempo, claramente no es relevante que sean 16 kb menos, (ya que según ese razonamiento, la de regla de tres simple, el CSS Sprite debería demorar 3.5 seg)

Obviamente se nos viene a la cabeza los image maps, aunque no son aplicables en todas las ocasiones como los CSS Sprites , por ejemplo cuando las imágenes no están físicamente organizadas en la página una al lado de otra, o puedes estar en el header y otra en el footer de la página.

Entonces , para concluir, esta además de otras técnicas que ire posteando en el futuro, son consideradas reglas de oro en la optimización de sitios web, estas reglas no las escribí yo!, si no que las aprendí y quiero compartirlas. De donde las aprendí? Del Libro “High Performance Web Sites”  del maestro Steve Souders, lectura obligada para un Ninja Web.

Espero que te haya servido!
Nos vemos!

Microsoft AJAX CDN, Mejoras de rendimiento a considerar

Al utilizar Microsoft AJAX CDN, podemos mejorar significativamente el rendimiento de nuestras aplicaciones AJAX. Los Script se almacenan en servidores ubicados al rededor de todo el mundo (según la página http://www.asp.net/ajaxlibrary/CDN.ashx, garantizando disponibilidad y velocidad. Ademas el CDN de Microsoft AJAX (que incluye JQuery) envía los script ya comprimidos, (por si nuestro hosting no tiene configurado esta opción), además permite a los navegadores la reutilización de los archivos Javascript  en cache de los sitios web que se encuentren en distintos dominios. Todo lo anterior se suma a que por HTTP, hay un límite de peticiones concurrentes hacia un mismo dominio, esto incluye imágenes, css, archivos Flash, y por supuesto, los archivos JS.

Vamos a ver  una pequeña demo, no tiene imágenes ni css, ni nada, pero vamos a darnos cuenta que los contenidos vienen comprimidos desde el servidor, en este caso voy a utilizar JQuery y FireBug para obtener los tiempos y tamaños de descarga.

El Código lo obtuve de la Página http://www.asp.net/ajaxlibrary/CDN.ashx

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <title>jQuery from Microsoft AJAX CDN</title>
    <script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script> 
    <script type=”text/javascript”>
    $( domReady );    
    function domReady() {
        $(‘#btn’).click( showMessage );
   }
    function showMessage() {
        $(‘#message’).fadeIn(‘slow’);
    }
    </script>
</head>
<body>
<button id=”btn”>Show Message</button>
 
<div id=”message” style=”display:none”>
    <h1>Hello from jQuery!</h1>
</div>
</body>
</html>

Ahora medido con FireBug,
Sin CDN

image

Fijémonos en los resultados, estoy referenciando a jquery-1.3.2.min.js es decir la versión de producción, en total 55 KB (es lo que pesa, claro esta) y tiempo total de carga 2.05s.

Con CDN
Cambiando la línea de código en donde se hace la referencia a JQuery por:

<
script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js” type=”text/javascript”></script>

image

Esta vez, vemos que el tiempo de carga disminuyo, por que? por que la habilitación de compresión de los archivos JS de los servidores de CDN permitió que el mismo archivo, ahora tuviera la mitad del tamaño, solo 25KB, y el tiempo de carga 1.38s.
La segunda vez, ya que esta en cache, es menor aún el tiempo (1.2 Seg):

image

Ahora bien, es bueno comenzar a pensar pensar en distribuir nuestro contenido estático, lo que logra una reducción en los tiempos de respuesta, por lo menos en tema de referencias a archivos JS se hace sencillo con Microsoft Ajax CDN.
Por ahora no vamos a profundizar más (más adelante si) por mientras te dejo la página para que lo compruebes tu mismo y veas los beneficios de incluir este concepto en tus desarrollos, no solo con JQuery, si no con toda la gama de Script que podemos referenciar (http://www.asp.net/ajaxlibrary/CDNAjaxLibrary0911.ashx)

Acá está la página , tiene muchos ejemplos:
http://www.asp.net/ajaxlibrary/cdn.ashx

Saludos,
Gonzalo.

TUTORIAL – ValidatorCallOut Extender – Mejorando los avisos al usuario

Siguiendo el tema de los tutoriales de AJAX Control Toolkit, vamos a revisar el ValidadorCallOut Extender, de manera de mejorar el Look& Field de los mensajes de error como los que nos entregan los controles XFieldValidator.

Entonces vamos a utilizar el mismo ejemplo del articulo sobre AutoComplete Extender (que? que no lo viste? bueno, acá esta:

http://geeks.ms/blogs/gperez/archive/2009/12/31/tutorial-autocomplete-extender-autocompletando-desde-la-base-de-datos.aspx

Ahora vamos a agregar un control RequiredFieldValidator asociado al textbox tx_buscar, de tal manera que nos valide que debe existir texto en el control textbox antes de hacer postback.

image

Ahora veamos el Control…

La idea es que consigamos el efecto de este control, y luego que lo personalizaremos un poco para que se vea con los colores que nosotros necesitemos.

Si ves el ejemplo que hay en :
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

Vamos a ver algo este formulario, y como ves, el control nos permite mejorar la forma del mensaje de error.

image

Volviendo a nuestro ejemplo, hacemos el Paso Uno, que sería extender el control RequiredFieldValidator.

image

 

Luego seleccionamos ValidatorCalloutExtender

image

Recuerda que debes setear la propiedad del RequiredFieldValidator, Display : None , o de otra manera vas a ver ambos mensajes de error al momento de validar tu form.

image

Paso Dos, Personalizar el control

Pero puede ser, como me pasó a mi, que los colores institucionales de la empresa en donde estaba desarrollando, no se ajustaban con el amarillo, debía ser verde agua (típico color pastel) así que vamos a setear este control.

Color de Fondo
Para revisar los CSS que se utilizan en el control, te recomiendo que utilices la IE Developer Toolbar de IE8 , que la puedes ocupar presionando F12, o también puedes utilizar el excelente FireFug de FireFox. Revisando podemos ver que el estilo que define el fondo es:

<style>
  .ajax__validatorcallout div, .ajax__validatorcallout td
     {
            background-color: LightSteelBlue;
            border: 1px solid Blue;
        }
</style>

Importante: Recuerda agregar este estilo después del Control ScriptManager, el motivo es que el ScriptManager va a generar todos los archivos js, xml y css para los controles que utilicen ajax, entonces si tu este estilo aparece en el código antes del ScriptManager, va a ser sobrescrito y vas a ver siempre el color por defecto del control.

Iconos
Vamos a poder cambiar los iconos que corresponden al Alerta (signo de exclamación) y también la x (cerrar el mensaje) seteando las propiedades en el código declarativo, estos cambios también los puedes hacer desde el cuadro de propiedades del control RequiereFieldValidator.

WarningIconImageUrl=”error.png”
CloseImageUrl=”cerrar.png”

 

Obviamente yo tengo estas imágenes en mi proyecto, están en la misma ruta de la página que tiene el control.
Luego vemos la diferencia:

image

Eso es todo!
DESCARGA EL EJEMPLO ACA
Espero que te sirva, cualquier duda, me avisas!
Saludos,
Gonzalo