Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

August 2008 - Artículos

Segundo Cells On Camp Concepción

Una nueva versión del Cell on Camps se realizará en Concepción, no te pierdas esta oportunidad única de aprender las últimas tecnologías Microsoft de mano de expertos, esta vez son dos días, uno de charlas, y para aprender más, talleres gratis, para que no solo veas como se desarrolla, si no que también desarrolles y pongas en práctica lo aprendido.

Más información y pre Registro en www.netcampus.cl

EC

Nos vemos Allá!.

Saludos,
Gonzalo

Creando un Accelerators para IE8 Paso a Paso

Hola que tal?, por acá de nuevo, esta vez para echar un vistazo sobre los Accelerators para IE8, por mi parte, cuando vi el Vídeo en la blog de Miguel Saez, se me ocurrió que a varios websites que he hecho los puedo potenciar con esta herramienta (soy desarrollador independiente, así que cada plus que pueda dar a las páginas, bienvenido sea, tengo más clientes!!)

Primero por si no te has enterado aún:

Que son los Accelerators

Son las opciones de menú contextual que puede acceder rápidamente a un servicio web desde cualquier página Web. Los usuarios pueden instalar los Accelerators en la Galería de Actividades galería o a través de cualquier sitio Web que las anuncia. Estas actividades hacen que  sea más fácil copiar la información de una página web a otra y, por ejemplo, generar búsquedas específicas.

Las Activities generalmente se abarcan dos posibles escenarios, una vista tipo "preview" al website del Accelerator, y por otro parte, el envío de información (concepto de Accelerator) a una página de, por ejemplo consulta.

image
Ejemplo de una Activity Relacionada con Microsoft Live Maps (1)

Como funcionan estos Accelerators

Básicamente consisten de un archivo XML el cual describe el comportamiento en términos de homepageUrl, display y la  activity propiamente tal. Si deseas ver una vista detallada de los tag a definir te recomiendo que veas el white paper de Activities en:

http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=566

Ahora bien, menos Copy-Paste y manos la obra.

Vamos a crear un nuevo proyecto web, en el que tendremos la página que tiene el link que carga el XML para instalar la activity en nuestro Browser, también contendrá el XML, la página de Preview y una posible página de consulta.

Te advierto que no soy bueno para el diseño, por lo que si las páginas de preview y data quedan mega ultra hiper fea, me disculpes.

image

Vista del SE del Ejemplo, pero OJO, NO ES REQUESITO QUE LOS ACCELERATORS ESTEN CONSTRUIDAS CON ASP.NET, DE HECHO EL XML SOLO LLAMA A URLS, POR LO QUE PUEDEN CONSTRUIRSE CON PHP, JSP, ETC.

OpenService Activity Format

En el White Paper verás con detalle como esta conformado este archivo XML, para mi ejemplo utilizaré el archivo Activity.XML (puede llamarse de cualquier forma):

<?xml version="1.0" encoding="utf-8" ?><openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">  <homepageUrl>http://localhost:50711/Activities/Default.aspx</homepageUrl>   <display>
    <name>Pueba de Activities</name>
    <icon>http://localhost:50711/Activities/find.ico</icon>
</display>
  <activity category="prueba">
    <activityAction context="selection" >
      <preview action="http://localhost:50711/Activities/ac.htm" />
      <execute action=http://localhost:50711/Activities/ac.aspx>
        <parameter name="param" value="{selection}" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

Ahora, a explicar un poco, en el tag homepageURL, tengo la dirección website en el servidor de prueba(por eso el número de puerto) el Tag display, declaro en nombre de mi Accelerator, también definí el icono (más que nada lo tomé "prestado").

Si bien hay Accelerators predeterminadas , puedes utilizar las propias (recuerda ver siempre si tu Accelerator encaja con alguna categoría existente, ya que se pueden organizar de mejor manera si sigues las instrucciones). Definimos el contexto de la Accelerator, para nuestro caso es "selection", que representa el tipo de datos, de donde se capturará el dato, por decirlo de otra forma, las  opciones disponibles son ("selection", "document" y"link") siendo selection el default.

En el tag preview colocamos la dirección de nuestra página de preview (ver foto 1) y en execute, la página de consulta (ac.aspx), fíjate que estoy pasando un parámetro que se llama param y el valor de tipo text proviene de una selección del usuario (por ejemplo, sobre un texto con el mouse).

Página de Preview

Esta página tiene solo diseño, puede ser html si necesidad de programación del lado del servidor, en mi caso e super simple:

image

Recuerda que las dimensiones son 320px x 240px y setear por CSS los bordes izquierdo y superior a 0px, para que quede bien ajustado.

Página de Consulta

El parámetro a enviar se define en el archivo Activity.XML :

<parameter name="param" value="{selection}" type="text" />

Siempre tendremos  la posibilidad de enviar más parámetros (recuerda definirlos en archivo), también tener el cuidado de que vamos a pasar por URL una variable, con todos los problemas de seguridad que esto conlleva, así que como siempre, validar, limpiar, verificar.

image

En el evento Page_Load tendremos:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Por favor, recuerda sanitizar las entradas!!           Label1.Text = Request.QueryString("param")
    End Sub

Ya que si vemos la URL al llamar a la búsqueda, nos damos cuenta que se envia por GET. Bueno, si estas con PHP será:

$variable = $_GET["param"];

Con la correspondiente validación de entrada y limpieza de parámetros para evitar el XSS y el SQL Inyection.

La finalidad de esta página es simular una búsqueda, tu sabrás que hacer con tus parámetros de entrada, para este ejemplo, solo se imprime :).

Pagina de Instalación del Accelerator

Esta si que no le puse diseño, de hecho, es tan simple como esto:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <button 
    onclick="window.external.AddService('Activity.xml')">
        Instalar la Actividad</button> 
    </div>
    </form>
</body>
</html>

Lo que genera la espectacular vista de diseño de:

image

Lo interesante acá es la llamada mediante BLOCKED SCRIPT

onclick="window.external.AddService('Activity.xml')"

Que realiza la invocación para el browser de el manifiesto XML que define a la actividad.Si lo presionamos veremos lo siguiente:

image 

Presionamos Add Provider y elegimos "Make this my Default  provider fos this type of activity" , para este ejemplo, de esta manera tenemos más a "mano" nuestra Accelerator de prueba, y si al menos el XML esta correcto tendremos:

image

A nuestra página de instalación (Default.aspx) le agregué un texto para poder seleccionar y así utilizar la activity. La siguiente imagen se muestra cuando apretamos boton derecho del mouse  y seleccionamos (sin apretar Click) el ítem del menú contextual Prueba de Activities

image 
Aunque no se nota mucho, seleccioné la palabra texto, ahora bien, si pincho sobre el ítem de menú veremos que se abre la ventana de búsqueda con el Label1 seteado  con la selección del usuario, luego, puedes utilizar este parámetro para búsquedas, selecciones, etc.

image

 

Desintalar Accelerators.

Para desinstalar las Activities solo debes seleccionar la opción de "Manage
Add-ons" y pinchas en la opción Accelerators y tienes la opción de  removerlos como predeterminados, desactivarlos o finalmente eliminarlos.

image

Descarga

Descarga aquí los archivos de esta Accelerator de Prueba

Conclusión. 

Esta es una excelente herramienta que podemos utilizar para dar nuevos servicios a nuestros clientes, muy fácil de usar y para no dejar a nadie triste, no depende del lenguaje de programación del servidor, de hecho, ahora estoy haciendo esto para un sitio en php!.

Y por que no mezclar tecnologías, el preview podría estar construido con Silverlight, quedaría espectacular verdad?

Espero que te haya sido de utilidad este post, si es así, escribe un comentario, gracias!.

Saludos,
Gonzalo

Gadget para Windows Vista con Silverlight y que Permite Escritura a Mano y selección de colores.

Que tal, espero que estén muy bien, por mi parte, achaques de salud por la aproximación a mis 30 años, 6 de septiembre (por si alguien quiere saludar). Pero bueno, vamos a ver lo que nos convoca.

En el pequeño articulo Creando un Gadget para Vista y Silverlight, vimos lo básico para crear estos componentes para nuestra barra.  Ahora veremos como hacer un gadget que permita la escritura con el mouse o mejor aún para ser utilizado en tablet PC.

PANTALLA PRINCIPAL DEL GADGET

Elegir el PNG

Vamos a elegir  un buen png para el fondo de nuestro gadget, despues de poco buscar encontré esta imagen que me gusto :

image

Para esto, al igual que antes, vamos a utilizar Microsoft Expression Blend 2.0, también podemos probar el mismo (de forma de una página web normal) para ir depurando nuestro super gadget.

Diseño y Dimensiones.

Vamos a diseñar el gadget con dimensiones de ancho 130px y alto de 182px (recuerda que es un tamaño aceptable considerando que es un gadget sobre el sidebar).

image

El cuadro de es tipo InkPresenter que nos va a permitir la escritura en este cuadro de texto, además el fondo es "transparent". El código XAML de la página sería el siguiente:

<Canvas
      xmlns="http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="130" Height="182"
      x:Name="Page" Loaded="root_Loaded" >
     <Image Canvas.Left="-48" Width="200" Height="200" Source="img/file.png" Stretch="Fill" Canvas.Top="-6"/>

     <InkPresenter
    x:Name="CuadroTinta"
    Background="transparent"
    Width="130" Height="182"
 
   MouseMove="LapizMouseMove"
    MouseLeftButtonDown="LapizMouseDown"
    MouseLeftButtonUp="LapizMouseUp" Canvas.Top="2"/>
</Canvas>

Creando el comportamiento del Gadget

Si analizamos un poco este código, nos damos cuenta que el elemento InkPresenter tiene seteado tres manejadores de eventos:

MouseMove="LapizMouseMove"
MouseLeftButtonDown="LapizMouseDown"
MouseLeftButtonUp="LapizMouseUp"

Estas funciones son llamadas desde el Default.aspx la cual hace referencia al archivo tintas.js y que contiene:

// Captura la posición del mouse y crear el Stroke, con el color

function LapizMouseDown(sender,args)

{  inkPresenter.CaptureMouse();
   newStroke = silverlight.content.createFromXaml('<Stroke/>');
   newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));

   newStroke.DrawingAttributes.Color = color;
   newStroke.DrawingAttributes.Width = 2;
   newStroke.DrawingAttributes.Height = 2;
   inkPresenter.Strokes.Add(newStroke);

}
// Mientras el mouse se va moviendo, vamos agregando puntos al stroke
function LapizMouseMove(sender,args)
{
   if (newStroke != null)
   {
      newStroke.StylusPoints.AddStylusPoints(args.GetStylusPointsinkPresenter));
   }
}

// Soltamos el boton del mouse
function LapizMouseUp(sender,args)
{
   newStroke = null;
}

PANTALLA DE SETTING

Diseño

Lo primero es crear los cuadros de colores, que servirán para que el usuario pueda seleccionar el color de la línea que desea dibujar, el texto tiene un pequeño efecto de "reflexión", este efecto se logra utilizando la herramienta flip  image y luego ocupamos el alpha en el texto (para que se vea borroso).  Los cuadros, tienen por nombre el color (en inglés) al cual representan, y esto tiene una razón de ser, debido a que vamos a utilizar el nombre de los cuadros como argumentos de funciones que setean los colores de la línea.

image

Las animaciones básicamente generan el aumento de tamaño de cada uno de los cuadros:

image

Recuerda utilizar el Copiar la animación y luego hacer la reversa, te ahorras bastante trabajo en los (On-Off)

Comportamiento de la Pantalla de Configuración

Recuerda que debes agregar las siguientes líneas en el archivo html que representa a la pantalla de inicio de gadget "Default.html"

System.Gadget.onSettingsClosed = SettingsClosed;
System.Gadget.settingsUI = "Setting.html";

En el archivo Setting.XAML tenemos que cada cuadro llama llama a las funciones para crear la animación:

MouseEnter="amarilloOn" MouseLeave="amarilloOff" MouseLeftButtonDown="amarilloClick"  Cursor="Hand">

 

Las Siguientes funciones sirven para activar las animaciones (...On) en el evento MouseEnter
// desactivar (..Off) activa la animación cuando se hace MouseLeave sobre el cuadro y
// (...Click) cuando se hace click sobre el cuadro.
// Para hacerlo más fácil los x:Name de los elementos tienen el nombre del color
// para que pasemos como argumento el Name del sender a la función marcador.

function negroOn(sender, args)
   {sender.findName("negroOn").Begin();  }

function negroOff(sender, args)
  {sender.findName("negroOff").Begin(); }

function negroClick(sender, args)
{marcador(sender.Name, sender);       }

y  las funciones adiciones  nos sirve para aumentar el borde del cuadro del color seleccionado para hacerlo más rápido en términos de programación, volvemos  el StrokeThickness de todos los elementos a 1, y luego cambiamos el StrokeThickness del objeto seleccionado. Con la línea  color=objeto seteamos la variable color para que cuando se ejecute la función asociada a onSettingsClosing se escriba en el gadget el valor del color seleccionado.

function marcador(objeto, sender) {
    sender.findName("yellow").StrokeThickness = "1";
    sender.findName("blue").StrokeThickness = "1";
    sender.findName("red").StrokeThickness = "1";
    sender.findName("black").StrokeThickness = "1";
    sender.findName("green").StrokeThickness = "1";
    sender.findName(objeto).StrokeThickness = "3";
    color = objeto;
}

Cuando se cierra la ventana, y es por que presionaron el botón Aceptar

System.Gadget.onSettingsClosing = function(event) {
    if (event.closeAction == event.Action.commit) {
        if (color != "") {
            System.Gadget.Settings.write("color", color);
        }
        event.cancel = false;
    }
}

Recuerda también que cuando se cierra esta ventana, hay que pasar los valores para que se actualice el valor en la pantalla principal, es aquí en donde utilizamos la siguiente línea de código:

System.Gadget.onSettingsClosed = SettingsClosed;

Es decir, cuando se cierre la ventana de setting, se ejecuta la función SettingsClosed.

Finalizando

Una vez configurado el Manifiesto XML del Gadget solo nos queda ejecutar nuestro Gadget, te dejo algunas imágenes.

image  image image

Te dejo el Gadget para que lo descargues , si quieres ver los archivos y programación, tienes que ir a:

C:\Program Files\Windows Sidebar\Gadgets\Tinta.Gadget 
( o Archivos de Programa, según el idioma de tu navegador)

DESCARGA EL GADGET ACA!! (QUE ES EL PROPIO CODIGO FUENTE, SI NO LO SABIAS)

Nada más que queda agradecerte es leer este artículo, como vez, se pueden lograr cosas interesantes mezclando tecnologías verdad?

Saludos,

Gonzalo

Posted: 12/8/2008 20:10 por Gonzalo Perez | con 3 comment(s) |
Archivado en: ,
Controles Controles Controles...(Pensamientos)

Este post va a resultar un poco distinto a los demás, que generalmente son 100% técnicos( o pretenden serlo).  Una de las ventajas que tenemos con ASP.NET sobre otros lenguajes para desarrollo Web, es la gran cantidad de controles disponibles para que nos ahorremos trabajo, y por que no decirlo dinero. Alguien podría decir, "imposible que te ahorres dinero, esos controles valen dinero, y a veces mucho", pero justamente este es el punto, aprovechar controles ya desarrollados, y más cuando es una "suite", es obviamente una ventaja, re-inventar la rueda nunca ha sido productivo ni barato.

Mi suite preferida es TELERIK RadControls, una magnífica suite de controles para ASP.NET,

image Y como sus mismos creadores dicen
"More than 500 running demos for all controls. Source code viewer and ready-to-use Visual Studio projects provided. All examples are included in the RadControls distribution"

Nada que decir, solo que vayas a la ver los demos y te sorprendas pinchando aquí.

Personalmente, estoy muy conforme con el desempeño, usabilidad y documentación de estos controles. Puedes bajar una demo para que te convenzas de que es una excelente inversión.

Otros controles recomendados (Estos son Gratis!)

FCKEditor

Ahora bien, se agradecen mucho los controles gratis, un aplauso a los desarrolladores :), uno que ocupo mucho para las clásicas entradas de texto con formato por parte del usuario.

Totalmente configurable, muy flexible, compatible con ajax (con firefox tienes que hacer algunas modificaciones, pero funciona muy bien)

image

Completamente integrable con:

image 
Es posible configurar el Skin  con el que quieres visualizar el editor.

Ve el demo acá

LightBox JS

Quieres un efecto muy bueno sobre las fotos de tu galería de imágenes, o sobre una foto de una noticia que publiques ?, utiliza LightBox, un script de fácil uso y configuración que te permite efectos como el de la imagen.

image

Puedes configurar casi de todo, la velocidad de la animación, los textos para cerrar la imagen ampliada, y es muy fácil de utilizar. Click aquí para visitar el sitio

 Open Flash Art

Excelente componente para realizar gráficos generados con flash que incluyen animaciones, con una galería extensa de tipos de gráficos, muy buenos tutoriales sobre como utilizar la librería para generar los mismos, con los cuales puedes darle un toque superior a tus páginas. Revisa este componente aquí y un ejemplo sobre .NET aquí.

image image
image image

Espero escribir un articulo sobre Open Flash Art en Español, espero que te haya sido útil esta información y gracias por leer este artículo. :)

Saludos,
Gonzalo

Posted: 6/8/2008 20:19 por Gonzalo Perez | con 3 comment(s) |
Archivado en: