Windows 7. Revisando la nueva interfaz de usuario.

Etiquetas de Technorati: Windows 7,Interfaz,Interface

Debo decir que he probado la nueva interface de Windows 7, como mi máquina principal de trabajo y la encuentro muy mejorada, más cómoda y más lógica (avanzando hacia el sentido común, lo que es mucho decir quizás, porque sabemos que a ese decir de que las “computadoras y/o sistemas operativos ya estarían hechos para el común de los mortales”, todavía le queda mucho trecho por andar).

Debo también decir, que en términos prácticos, me salté Windows Vista, sólo lo utilicé esporádicamente y me mantuve con XP hasta casi el final, cuando me enteré de esta opción para el RC1 de Windows 7.

La barra de tareas.

Mi primera impresión de la nueva barra de tareas fue una sensación de retroceso en el diseño, …sólo fue resistencia al cambio, a corto andar me percaté de una mejora significativa. La agrupación de aplicaciones similares (con vista previa interactiva) sin cambiar de tamaño , así como el soporte temático en la propia barra es una belleza, que en caso de temas de con múltiples colores e imágenes va cambiando regularmente todos el diseño tanto del fondo como de las ventanas y lo hace menos aburrido.
Cuando se está trabajando con el Explorador de Windows en una operación de copia de archivos de larga duración por ejemplo, el icono de la barra de tareas muestra claramente el procesamiento en curso con un cambio de colores.
Cualquier aplicación se puede anclar a la barra de manera de tenerla a la mano y las aplicaciones de su tipo se abren allí mismo donde se ancló.

La vista de previa interactiva en la barra de tareas

En el caso de Internet Explorer muestra tanto diferentes instancias como las pestañas que se tengan abiertas.

Búsqueda de programas en el menú de inicio

El menú de inicio con énfasis en la caja de búsqueda que busca los mismo programas que archivos hace que rara vez tenga que ingresar a “Todos los programas” a buscar en el árbol de programas que tiene instalados. Simplemente: “tecla de Windows” o clic en el menú de inicio y se puede anotar los buscado, en el ejemplo “sql server”.

Lo reciente por aplicación en el menú de inicio

Es una excelente nueva funcionalidad esta que agrupa en el propio acceso directo de cada programa más utilizado del menú de inicio, los elementos o vínculos recientes (desde XP los programas más utilizados se van colocando a la mano en el menú de inicio). Por ejemplo Google Chrome:

Los iconos ocultos y otro típicos

Para mostrar los los iconos ocultos también resulta bastante más lógico utilizar una “window” en Windows que desplazar los iconos en la propia barra, lo que era realmente desesperante. Con el vínculo de “Personalizar…” uno puede decir que muestra de forma permanente.

 

Todas las ventanas de información me parecen más claras y mejoradas (menos técnicas u orientadas a un usuario común). Por ejemplo, en vez de tener una lista interminable de opciones de energía que nunca se utilizan o no se sabe qué hacen, se tienen dos elementales a la mano (y otras si se quiere bajo demanda).

  

Un nuevo centro mensajes sencillo que avisa de mensajes que atender o de problemas a solucionar.

Todo lo anterior está en el contexto de los iconos de notificación en la barra de tareas.

La hora y fecha

Por fin una mejora en eso. Era molesto tener que dar doble clic para ver una ventada muy anticuada. Ahora sólo basta con tocar (clic) la hora y fecha en la parte inferior derecha de la barra de tereas para que aparezca la información adecuada y mejor presentada.

Bibliotecas

Las bibliotecas son una excelente manera de organizar de forma lógica los accesos a diferentes ubicaciones físicas con alguna relación de nuestro interés. Yo me creé por ejemplo una biblioteca de desarrollo donde tengo muchas carpetas específicas a la mano.

Dentro de las bibliotecas la agrupación por fecha y otras opciones mejoradas resultan muy útiles para encontrar cosas como imágenes por diferentes criterios. Por ejemplo en mi biblioteca de imágenes puedo agrupar por mes las fotos (sin importar donde estén), así también por etiqueta, categoría, etc.

Favoritos más amplios

En los favoritos podemos colocar también carpetas de nuestra preferencia y lo “cambiado recientemente” (para documentos o archivos),

 

y “sitios recientes” (para carpetas) son una excelente alternativa a antiguo menú de inicio “Documentos recientes”. Lo cambiado reciente funciona con simplemente haber guardado un archivo adjunto desde un correo electrónico en nuestro disco, muy útil.

Mostrar u ocultar el escritorio

Anteriormente para esta tarea tan simple y útil había que buscar un icono quien sabe dónde (se tenía que activar la barra de herramientas “inicio rápido” - quick launch) o bien colocar algún acceso especial. Finalmente abajo, en la parte derecha de la barra de tareas, existe un a zona especial con un simple botón para esta función que además muestra una vista previa del escritorio a pasar por ella.

Windows XP Mode

Aprovechando la tecnología de máquinas virtuales de Microsoft y descargando de la red los archivos correspondientes podemos instalar una máquina virtual de Windows XP Professional para correr aplicaciones heredadas que tuviesen algún problema de compatibilidad con Windows 7 o para otros propósitos. Una característica muy interesante que he visto (pero no probado de forma personal) es que una aplicación instalada en XP se puede correr como un acceso directo desde Windows 7 sin necesidad de abrir explícitamente la máquina virtual y se ejecuta como si fuera una aplicación en ventana del propio Windows 7. Se necesita una máquina que tenga características de tecnología de virtualización por hardware (revise su BIOS). Cuando lo pruebe lo mostraré.

Energía + Suspensión + Hibernación

Por primera vez la suspensión y la hibernación alcanzan un amplio grado de estabilidad en mi máquina (ref: HP Pavilion tx1030la, que es otra historia muy especial pero con HP), antes tenía Windows Vista y no más no me quedaba otra que evitarlo. La suspensión es rapidísima, la hibernación no tanto, pero funciona bien.
En cuanto dejamos la máquina sin utilizar con, con el esquema de energía predeterminado “Equilibrado”, la tarjeta gráfica pasa a un modo de bajo consumo (antes de apagar el monitor) así como otros dispositivos, lo que redunda en una mejora de ahorro de energía en general para el ambiente y en una mayor duración de la batería cuando no estamos conectados a un tomacorriente. Si, podríamos decir que es un sistema operativo algo más preocupado del medio ambiente.
Ahora sí, a pesar de tener conectados muchos dispositivos, discos duros, máquinas virtuales activas en disco duro externo, dispositivos USB de cache, unidades de DVD externa, etc. por fin no tengo problemas a reanudar. Puedo dejar mi máquina solita para se apague (suspenda) cuando no la utilizo y siempre inicia bien con todo funcionando...bueno algunas pocas veces noto que el Explorador de Windows tiene un comportamiento  raro al tratar de mostrar la información (en especial de discos y o bibliotecas). En ese caso me basta con cerrar la sesión y solucionado.

Monerías

Otras cosas como organizar ventanas con sólo desplazarlas hacia los bordes del escritorio puede resultar muy útil cuando estamos copiando o comparando información entre las mismas.

Quizás el agitar una venta para dejarla sola en el escritorio puede tener utilidad para alguien, a lo mejor me hago fan más adelante.

Finalmente mi calificación general de Windows 7 es 10, es decir satisfecho en términos relativos y con un sentimiento agradable de mejora notoria, comparado con todos los sistemas anteriores de Microsoft. El uso intensivo de colores y texturas ha de tener algo que ver.

---(FIN)---

Update Progress Solution for ASP.NET MVC with Ajax

Etiquetas de Technorati: asp.net mvc,mvc,update progress,ajax,c#,csharp

Introducción

Buscando alternativas para utilizar ajax y un estilo como el de update progress de ASP.NET para ASP.NET MVC me encontré con algunas soluciones que no eran lo que buscaba, algunas mezclando componentes de servidor otras con código demasiado abstracto para algo que debería ser simple.
Finalmente decidí hacerlo de otro modo y obtuve esta solución simple basada directamente y exclusivamente, en lo que ofrece ASP.NET MVC. El concepto que propongo está basado en MVC y proporciona control total sobre lo que queremos que se muestre. Es objetivo de este artículo generar una solución base los más directa posible con los controles existentes de MVC para facilitar la comprensión, con menos abstracciones, tal como se muestra a continuación.

Audiencia

Si usted no tiene conocimiento previo sobre los conceptos básicos de ASP.NET MVC le recomiendo revisar los mismos.

Lo que queremos lograr

Veamos primero lo que queremos obtener.
El usuario hace clic en la liga “Actualizar foo…”

El sistema pide su confirmación.

El usuario acepta y se procede con la actualización mostrando una imagen animada.
Al finalizar el procedimiento de actualización se muestra un mensaje de “actualización lista” (Ready.).

En una vista cualesquiera (sea de un control de usuario o vista final) se crea un control de usuario llamado UpdateProgressControl y se inicializa su modelo UpdateProgressViewModel con un nombre de negocio que lo identifique “UpdateFoo”, el nombre debe ser válido para un control pero sólo basta con que contenga el sentido de negocio (los prefijos y/o sufijos como para un control, por ejemplo “divUpdateProgressUpdateFoo” los coloca el propio modelo).
Veamos una vista con un vínculo ajax (liga, link) y los elementos comentados.

<p>
    <% =Ajax.ActionLink("Actualizar foo..."
       , "Update1"
       , new AjaxOptions()
       { 
             Confirm    
                = "¿Seguro desea proceder con la actualización?"
           , OnBegin    
                = UpdateProgressViewModel.GetFunctionNameForShow(
                                                        "UpdateFoo")
           , OnComplete 
                = UpdateProgressViewModel.GetFunctionNameForHide(
                                                        "UpdateFoo")
       }
    ) %>
</p>
<% Html.RenderPartial("UpdateProgressControl"
               , new UpdateProgressViewModel("UpdateFoo")); %>

Como se observa en el código, mediante AjaxOptions se establecen los nombres de las funciones javascripts, utilizando métodos estáticos del propio modelo que reciben como parámetro el nombre simple de negocio que hemos definido antes (“EditFoo”). Más adelante se verán los detalles.


En resumen, el concepto central es simplemente:

1. Crear el control de usuario UpdateProgressControl.



2. Configurar los métodos OnBegin y OnComplete de AjaxOptions para mostrar y ocultar el control.

Además podemos colocar las características o estilo de nuestro control en un Cascading Style Sheets, CSS de nuestro sitio.

Índice

1. Crear estilos (CSS).



2. Crear un modelo para la vista.



3. Crear la vista del control UpdateProgress.

Veamos cada punto en el mismo orden.

1. Crear los estilos.

Creamos un conjunto de estilos que utilizará nuestro control y nos permite modificar la presentación del mismo.

/* Update Progress  
----------------------------------------------------------*/
.updateProgress
{
    display: none;
    background-repeat: no-repeat;
    background-image: url('../Content/Images/ajax-loader.gif');
    padding-top: 5px;
    padding-bottom: 20px
}
.updateProgress label
{
    padding-left: 45px
}

2. Crear un modelo para la vista.

El modelo cuenta con:

1. Varios constructores.



2. Dos funciones estáticas para recuperar (y generar) los nombres de funciones de java script que se utilizarán para mostrar y ocultar la operación en progreso.



3. Varias propiedades básicas (ID, Name y Message) para utilizarlas en el control.

   
A continuación se muestra solamente el constructor más simple que inicializa valores predeterminados.

/// <summary>
/// Initialize update progress with default message.
/// </summary>
/// <param name="name">Update progress name.</param>
public UpdateProgressViewModel(string name)
    : this(name, UpdateProgressViewModel.GetInProgressMessage(), false)
{
}

3. Crear la vista del control UpdateProgress.

Ahora creamos la vista parcial del control Update Progress que utilizará el modelo previamente creado.

La vista integra los estilos definidos, unas rutinas de javascript y el modelo para generar un control simple html que se desplegará y ocultará a conveniencia durante las llamadas ajax de nuestras páginas consumidoras.


Nuestro control de usuario tiene dos DIV para desplegar nuestra imagen de actualización y para desplegar el mensaje de actualización terminada. El modelo es el encargado de generar los nombres o ID's que necesitemos.

Este primer DIV es para desplegar la imagen de actualización y se carga desde el CSS.

<div id="<%=Model.ID%>" class="updateProgress" style="display: none">
    <label>
        <%= Html.Encode(Model.Message) %>
    </label>
</div>

El segundo DIV se encarga de desplegar un mensaje de actualización completada (Ready).

<div id="<%=Model.ID%>MessageResult" class="updateProgressResult" style="display: none">
    <label>
        <%= SmartResource.GetString("ReadyLabel", "Ready.") %>
    </label>
</div>

Se puede sustituir la línea de “<%= SmartResource…” por un mensaje fijo.

Finalmente nuestro control de usuario mediante el modelo también genera el javascript que necesitamos para mostrar y ocultar nuestro control. Por ejemplo para mostrar el control y tenemos:

function <%=Model.FunctionNameForShow%>() {
    $("#<%=Model.ID%>").show();
    $("#<%=Model.ID%>MessageResult").hide();
    var disableSubmit 
        = <%=Model.DisableSubmitOnRequestString %>;
    if(disableSubmit)
    {
        //Disable submits.                           
        $(":submit").each(
            function (i) 
            {
                this.disabled = true;
            }
          );                        
    }
}

Como se observa estamos aprovechando las facilidades de jQuery para referenciar los elementos que queremos controlar.


En una próxima entrega podríamos explorar las ventajas de adicionar más abstracción a este tema y generar un MVC AjaxHelper especializado para este control que tanta utilidad tiene, lo que simplificaría aún más la llamada desde el cliente. En vez de utilizar el Ajax.ActionLink, sería tan simple como esto:


<p>

    <%=Ajax.UpdateProgressLink("Actualizar foo helper..."

          , "Update1"

          , "¿Seguro desea proceder con la actualización?"

          , "UpdateFoo") %>

</p>

---(Fin)---