Salvapantallas en C#

Aunque este artículo debería ser de Rebeca (la experta en .Net del grupo), lo estoy escribiendo yo. En mis inicios (ese año 2000) pasé unos años programando en Visual Basic 5 y 6, y años después hice un par de cursos en C#.

La verdad es que todo surgió hablando un día con Rebeca sobre el Visual Studio, siempre he pensado que es el mejor IDE del mercado, pero con un coste muy elevado. Hasta ahora, que puedes descargarte una versión casi profesional sin pagar ni un euro.

Total que me he decidido a probarlo, y casi dos horas de instalación después ya tengo el Visual Studio instalado, con posibilidad de hacer cualquier desarrollo.

Lo primero que he intentado hacer es un Servicio Windows, no viene instalado de fabrica, pero en el propio entorno, puedes añadirlo y en unos segundos ya tenía la plantilla lista para empezar el desarrollo.

También me ha sorprendido mucho, la posibilidad de desarrollar aplicaciones Android. 

Volviendo al tema que nos ocupa: crear un salvapantallas. Así definiría yo uno:

• Un salvapantallas de Windows es una aplicación que tiene tres funcionalidades:
• Mostrar la configuración en un "dialog box"
• Una previsualización
• Visualización en pantalla completa
• Su extensión es "scr"
• Tiene que estar en Windows\system32 o en Windows\SysWOW64 dependiendo del sistema operativo (32 o 64 bits)

El mio va a ser muy sencillo, lo único que queremos hacer es que una vez abierto cambie de color cada dos segundos.

Para conseguir esto vamos seguir lo siguientes pasos:

1. Nos creamos una aplicación de Windows Forms
2. Configuramos el formulario para que esté maximizado y no se vean los controles de la esquina
3. También le ponemos un color por defecto.
4. Añadimos un temporizador, lo habilitamos y le ponemos un intervalo de 2 segundos

La parte más complicada es la de previsualización, ya que hay que tirar de componentes que interactúan con la API de Windows, para la posición, etc, etc. Esta parte ha sido un copy/paste.

Todo el código está en nuestro repo: https://bitbucket.org/tecnificados/public, en la carpeta "ScreenSaveNet".

A partir de ahora no voy a descartar el utilizar .Net para realizar algunas aplicaciones.

Espero poder probar a desplegar alguna aplicación web de .Net pronto en Apache.

Ya os contaré.

Gestión de dependencias en .Net con nuget

Como mi compañero Juan Carlos Ballesteros ha hecho una introducción sobre la gestión de dependencias con Maven, hoy quiero contribuir con una introducción sobre la gestión de dependencias en .Net con NuGet.

Nuget apareció en el mundo de .Net en 2010, y desde Visual Studio 2012 viene instalado como una extensión:

Gracias a Nuget la gestión de paquetes y las dependencias entre los mismos es mucho más sencilla que antes. Ya no es necesario buscar el paquete manualmente, bajarlo y después referenciarlo, ahora Nuget realiza todo este trabajo con un solo click.

Además no sólo se pueden gestionar los paquetes de forma visual, sino que también se dispone de una consola llamada Package Manager Console en la que se pueden introducir comandos:

NuGet permite no sólo la instalación y gestión de dependencias en nuestros proyectos .Net, sino que además puede ejecutar scripts Powershell que ayuden a completar la inclusión de las dependencias: por ejemplo, para modificar un fichero de configuración que incluya una sección en la que se declara el componente recién introducido.

Cuando se instala NuGet como complemento de Visual Studio, aparece una nueva opción en el menú "Tools/Herramientas" que da acceso a la configuración de NuGet:

Si se accede a la opción "Package Manager Settings" se puede ver que en "Package Sources" se configuran los repositorios a los que se quiere acceder para encontrar los paquetes. Por defecto viene configurado el repositorio oficial de paquetes de Microsoft https://www.nuget.org/, que también puede visitarse por web, pero pueden configurarse repositorios alternativos, como por ejemplo, un repositorio en nuestra empresa que distribuya los componentes internos desarrollados para sus aplicaciones corporativas:

Y como lo mejor es verlo con un ejemplo, vamos a ello.

Supongamos que creamos una aplicación utilizando Visual Studio 2013 en ASP.Net MVC 5:

Hay que destacar que en las propias plantillas de proyectos de Microsoft, como ésta de MVC 5, ya se incluyen varios paquetes de NuGet que se instalan durante la creación del proyecto. 

Para ver las referencias de NuGet utilizadas por un proyecto, se utiliza el menú contextual "Manage NuGet Packages" sobre las referencias de dicho proyecto, o bien en la consola de comandos con "Get-Package -ListAvailable -Filter PackageName", que se comenta más adelante:

Aquí se puede ver que un paquete no son sólo referencias de tipo librería (dll) como por ejemplo "Json.NET", sino que también se pueden incluir como paquetes NuGet otro tipo de componentes, por ejemplo componentes propios de Microsoft (Microsoft ASP.NET MVC), librerías javascript como "jQuery" o frameworks CSS como "bootstrap".

Vamos a añadir a este proyecto el uso de Entity Framework de Microsoft para manejar las conexiones y entidades de Base de Datos:

1) Dentro de "Tools"/"NuGet Package Manager"/"Manage NuGet Packages for Solution", o bien con el menú contextual sobre las Referencias del proyecto, "Manage Nuget Packages..." se elige "Online" y el repositorio donde se encuentra el paquete de Entity Framework, en este caso, nuget.org Si hiciera falta, se puede utilizar el cuadro de búsqueda para buscar el paquete concreto a instalar:

2) Se pulsa "Install/Instalar" y NuGet procederá a la resolución de dependencias actuales dentro del proyecto e instalación del paquete seleccionado. A veces hay que aceptar el uso de licencias durante el proceso. En este caso, el paquete aparte de incluir las referencias necesarias modificará el fichero Web.config para añadir una nueva sección para Entity Framework:

Una vez terminado el proceso podremos ver las nuevas referencias "EntityFramework" y "EntityFramework.SqlServer" añadidas al proyecto, además de las secciones necesarias añadidas al "Web.config".

También se puede ver, añadido al proyecto, un fichero "packages.config" donde se puede ver todos los paquetes NuGet utilizados por el proyecto con sus versiones y versión de framework. Este fichero es utilizado por NuGet para saber tanto los paquetes ya instalados como para comprobar si hay actualizaciones para dichos paquetes:

Como se ha comentado anteriormente, en Visual Studio se dispone de la "Package Manager Console" que también permite la gestión de estas dependencias. Para el caso del ejemplo anterior, si en vez de utilizar el menú visual para instalar Entity Framework en nuestra aplicación MVC quisiéramos hacerlo por comando, sería tan sencillo como elegir la fuente y proyecto y después introducir el comando "Install-Package PackageName":

Esta consola de comandos es muy útil en determinadas situaciones, como por ejemplo, cuando se quiere instalar una versión específica de un paquete que no sea la última. Esto no es posible por el menú visual, pero sí por línea de comandos con el modificador "-Version" al comando "Install-Package".

Para instalar una actualización de un paquete, si está disponible, se verá en el apartado "Updates/Actualizaciones" dentro del "Nuget Package Manager"/"Manage Nuget Packages". Se pueden actualizar paquetes individuales o bien todos a la vez con el botón "Update All/Actualizar Todos". También se puede realizar la acción por la consola de comandos con "Update-Package PackageName":

Para desinstalar un paquete concreto, se selecciona dentro de la sección "Installed packages/Paquetes instalados" y se elige "Uninstall/Desinstalar", o bien con el comando "Uninstall-Package PackageName":

Y para finalizar, comentar que en nuget.org se encuentra no sólo el repositorio de todos estos paquetes, sino que se pueden buscar versiones anteriores de los mismos, consultar la documentación asociada y autores, y ver también el blog propio de nuget.org y documentación completa:

Powershell: Una breve introducción

Hace un tiempo, cuando en mi empresa realizamos la automatización de despliegues, utilizamos Powershell como lenguaje de scripting para la realización del proceso de despliegue del paquete de aplicación una vez generado.

Hasta entonces no tenía conocimiento de esta tecnología, e investigando un poco más descubrí todo lo potente que es y las posibilidades que ofrece para todos aquellos que trabajan con sistemas Windows.

Extraído de Microsoft Technet: 

"Windows PowerShell es un shell de línea de comandos basado en tareas y lenguaje de scripting diseñado especialmente para la administración del sistema. Basado en Microsoft .NET Framework, Windows PowerShell ayuda a los profesionales de TI a controlar y automatizar la administración de los sistemas operativos Windows y las aplicaciones que se ejecutan en Windows.

Para los programadores, Windows PowerShell usa un conjunto extensible de clases de .NET Framework que permiten crear cmdlets, proveedores, aplicaciones host y utilidades personalizados.

Los comandos de Windows PowerShell integrados en Windows, denominados cmdlets, permiten administrar los equipos de la empresa desde la línea de comandos. Los proveedores de Windows PowerShell permiten obtener acceso a almacenes de datos, como el Registro y el almacén de certificados, con la misma simplicidad con que se obtiene acceso al sistema de archivos. Además, Windows PowerShell cuenta con un completo analizador de expresiones y un lenguaje de scripting totalmente desarrollado."

Powershell ofrece los siguientes componentes:

El componente "Windows Powershell" es una consola de comandos en la que se pueden ejecutar las sentencias y scripts que se deseen, al estilo de la consola de comandos de Unix:

El componente "Windows Powershell ISE" (Integrated Scripting Environment) es una aplicación que permite ejecutar comandos y escribir, comprobar y depurar scripts en una sola interfaz gráfica de usuario, un compilador básico que ofrece Microsoft:

Powershell está disponible desde Windows XP, en sus versiones 1 y 2, y en Windows 7 y posteriores está disponible la versión 3.0. En Windows 8, Windows Server 2012 y posteriores ya viene instalado, para otras versiones de Windows no suele venir instalado, así que es necesario descargar e instalar la versión deseada (cuanto más reciente mejor).

Powershell ofrece los siguientes elementos de trabajo:

1. Cmdlets
2. Funciones
3. Scripts

Cmdlets

Los comandos de Powershell se llaman Cmdlets (command-lets). Se reconocen por comenzar por un verbo (por ejemplo Get) seguido de un guión y un nombre descriptivo del comando. Vamos a ver un ejemplo sencillo desde la consola de comandos. Se desea listar el contenido de un directorio, basta con ejecutar el cmdlet "Get-ChildItem" pasando como parámetro el directorio a listar:

Si se desea ver la ayuda relacionada con el cmdlet anterior, basta con utilizar el cmdlet "Get-Help" y pasar como parámetro el cmdlet del que se desea obtener la ayuda:

Hay que destacar que es posible crear y utilizar cmdlets propios. 

Funciones

En Powershell también se pueden definir funciones, al igual que en otros lenguajes de programación, y también pueden recibir parámetros:

Una vez creada la función puede utilizarse:

Scripts

Finalmente, se pueden crear ficheros propios con funciones e instrucciones para ejecutar los comandos necesarios para llevar a cabo una acción. Estos ficheros deben almacenarse con extensión ".ps1". Al ser invocados pueden recibir parámetros de entrada y utilizarse durante el script.

En la imagen siguiente puede verse un sencillo script almacenado como "MiScript.ps1", que recibe un parámetro que se utiliza posteriormente al invocar la función "HolaMundo":

Una vez almacenado el fichero, se invoca desde la línea de comandos:

Con un parámetro relleno, se ve que se ejecuta la función "HolaMundo" definida en el script. En caso contrario devuelve "No es un parámetro válido":

Es de destacar en este script de ejemplo que se invoca una función de .Net (IsNullorEmpty(), del objeto String en el Namespace System). Esto nos da una idea de lo potente que puede llegar a ser nuestra programación en Powershell, ya que al propio ecosistema de Powershell (cmdlets disponibles, funciones, etc), se pueden importar o invocar Namespaces específicos del framework .Net y realizar algoritmos y funciones realmente complejas.

Ayuda y recursos

Para finalizar, remarcar que ésta ha sido una introducción muy breve a las características de Powershell. En Internet hay gran cantidad de sitios y tutoriales disponibles para aprender toda la potencia de este lenguaje. Tal el vez el sitio más potente sea Powershell.org.

En la Academia Virtual de Microsoft (Microsoft Virtual Academy) se pueden encontrar muchos cursos introductorios y avanzados de Powershell.

Otro día hablaremos de esta academia virtual y otros recursos de Microsoft que nos pueden echar una mano en nuestro aprendizaje.

Documentación y recursos de Microsoft

En este post la intención es comentar y enumerar los recursos y documentación disponibles en Internet sobre las tecnologías Microsoft.

En las primeras versiones de Visual Studio se incluían varios CD's de documentación para ser instalada en el ordenador. Esta documentación, llamada MSDN (Microsoft Developer Network) junto con Internet eran la forma de encontrar las soluciones a los problemas que encontrábamos en el trabajo diario con las primeras versiones del framework .Net.

Sin embargo poco a poco fueron apareciendo, impulsados por la propia Microsoft, más recursos disponibles on-line, y en la actualidad hay todo un ecosistema de documentación, cursos, tutoriales, blogs, etc., que sumados a los recursos "habituales" que todo profesional del software suele utilizar (como StackOverflow, por ejemplo), facilitan enormemente el trabajo diario con las herramientas software de Microsoft.

A continuación veremos unos cuantos de estos recursos disponibles:

1) MSDN. Microsoft Developer Network. Probablemente la fuente de documentación más conocida. Es una web muy completa donde se puede encontrar información de todo tipo sobre las tecnologías Microsoft:

Como ejemplo, en el apartado "Documentación" se puede encontrar la referencia al API de Microsoft, lo que nos permitirá ver toda la información de todas las tecnologías, consultar namespaces, funciones, propiedades...

2) Microsoft TechNet. En esta página web Microsoft pone a disposición de la Comunidad TI numerosos recursos y herramientas. 

Aquí se pueden encontrar encuentran noticias, enlaces a descargas, solución de problemas, y una amplia comunidad de profesionales entre los que se encuentran MVP's de Microsoft, que intervienen en foros y escriben en blogs para ayudar a difundir las tecnologías Microsoft.

3) Páginas de recursos específicos. Debido a que Microsoft ofrece recursos y soluciones en múltiples campos, para sus productos más conocidos y utilizados es posible encontrar una página web específica que concentra toda la información relativa a dicho producto. Por ejemplo:

- IIS.Net. Página web sobre Internet Information Server, el servidor web de Microsoft.

- ASP.Net. Página web sobre ASP.Net, el framework web de Microsoft para la construcción de websites y aplicaciones web.

- Visual Studio. Toda la información relativa al compilador de .Net Visual Studio, tanto en su versión off-line como en su versión on-line.

- Microsoft .Net. Toda la información sobre el framework de programación .Net.

- Azure. La nube de Microsoft. El acceso e información sobre la misma se puede encontrar aquí.

4) Blogs. Muchos profesionales, evangelistas, MVP's de Microsoft y principales responsables de los productos más utilizados escriben en blogs acerca de estos productos y tecnologías, como por ejemplo Scott Hanselman, Scott Guthrie o S. Somasegar. En español tenemos por ejemplo Geeks.ms, donde numerosos profesionales de Microsoft escriben numerosos artículos en castellano.

5) Microsoft Virtual Academy. Academia Virtual de Microsoft. Aquí se concentran múltiples cursos y eventos en directo. La inscripción con la cuenta de Outlook es gratuita, y una vez dentro se pueden buscar cursos por tecnología y crearse un plan de aprendizaje personalizado. Esta academia utiliza gamificación, de forma que por cada curso terminado se nos otorgan unos puntos que nos clasifican en el conjunto de usuarios registrados, y además es posible obtener puntos de bonificación. La mayoría de los vídeos de los cursos se encuentran en inglés, pero muchos de ellos tienen subtítulos disponibles. Estos cursos están impartidos por profesionales de Microsoft.

Finalmente, es muy importante destacar, que aunque estos recursos se encuentran focalizados en tecnologías Microsoft, hay que tener en cuenta que Microsoft se está abriendo cada vez más a la integración y uso de otras tecnologías, especialmente al software libre (Open Source). Por eso no debe extrañar ver un curso sobre MongoDB o Git en la Microsoft Virtual Academy, o que al utilizar Azure se pueda configurar y utilizar una máquina virtual Linux, o que incluso el código fuente del framework .Net esté disponible en GitHub. Así que no es de extrañar el poder encontrar información sobre otras tecnologías en estas páginas, y no sólo de las tecnologías Microsoft.

Espero que esta información os sea útil y os facilite un poco más el trabajo del día a día con tecnologías y productos Microsoft como me lo facilita a mí.

ASP.Net MVC: Subida de imágenes al servidor y recorte con Jcrop

Recientemente tuve que incluir, en un proyecto de ASP.Net MVC en el que estoy trabajando, un formulario donde un usuario podía subir su foto al perfil, y si el sistema detectaba que el tamaño de la imagen subida superaba el 100x100, había que recortarla.

Esta premisa, aunque parece sencilla, encierra varios problemas técnicos a solucionar:

1) Subida de ficheros al servidor con ASP.Net MVC.

2) Recorte de foto y guardado.

3) Puntos a tener en cuenta: versiones de navegadores y otros aspectos técnicos.

Vamos a ir viendo paso a paso cómo implementar esta práctica funcionalidad.

Subida de ficheros al servidor con ASP.Net MVC

Para subir ficheros al servidor desde la Vista, en Mvc se dispone de la clase System.Web.HttpPostedFileBase. Para utilizarla, hay que seguir los pasos:

- Declarar una propiedad de este tipo en el Model que se va a utilizar:

public HttpPostedFileBase Fichero { get; set; }

- Crear en la vista el formulario para realizar la subida de la imagen. La propiedad Fichero del modelo en la vista se representa con un <input type="file">.

- Añadir como propiedad al formulario enctype = "multipart/form-data".

El formulario de selección se mostraría así:

Una vez que se selecciona la imagen y se sube, se trata en el Controlador correspondiente, teniendo en la propiedad Fichero el Stream de la imagen subida:

Y con esto ya se tiene el fichero subido. Como en el Controlador se ha especificado volver a dibujar la Vista, que se alimenta con un Modelo que ya contiene la imagen, se ve la imagen recién subida:

Recorte de foto y guardado

Para recortar la foto lo más sencillo es utilizar JCrop, un plugin de JQuery gratuito disponible en http://deepliquid.com/content/Jcrop.html

Una vez obtenido JCrop, se deben incluir los siguientes ficheros:

En la página web de DeepLiquid se pueden ver varios ejemplos de uso de este plugin realmente potente. A continuación se detalla cómo crear el recorte una vez que se carga la imagen recién subida con el formulario anterior, detectando el tamaño de la misma en el evento load de la imagen. El tamaño del área a recortar se establece fijo ya que no debe sobrepasar el tamaño 100x100:

Las variables que se pueden ver en la función storeCoords son también parte del Model, y en la vista serán campos ocultos que se utilizarán en el Controlador al ejecutar la acción de recortar la imagen:

Al activarse JCrop si la imagen es mayor de 100x100, el usuario debe recortarla si quiere almacenarla en el servidor:

Una vez que el usuario ha seleccionado el área que desea guardar, se ejecuta finalmente la acción de Recortar y se guarda la imagen definitiva.

Puntos a tener en cuenta

Implementar esta funcionalidad requiere tener varias cosas en cuenta:

1) Las variables x, y, height y width, utilizadas por JCrop y necesarias para poder realizar el recorte final, se definen en el Model como string, debido a que JCrop las devuelve como decimales en inglés, con separador ".". Así es más sencillo, en el Controlador, convertir a decimal con el separador del idioma actual:

decimal decX = Convert.ToDecimal(imagen.x.Replace(".", Thread.CurrentThread.CurrentCulture.NumberFormat.NumberDecimalSeparator));

2) Internet Explorer pone alguna que otra pega, como siempre. Por ejemplo, si se quiere utilizar el evento "load" de la imagen para detectar el ancho y alto de la misma, para mostrar la funcionalidad de Recortado en caso necesario, previamente hay que ejecutar la línea:

$("img").attr("src", $("img").attr("src"));

Esto es una solución extraída de http://garage.socialisten.at/2013/06/how-to-fix-the-ie9-image-onload-bug/. Con esto Internet Explorar ejecuta el evento "load". Hay otras soluciones utilizando también CSS, a mí ésta me pareció la más sencilla.

3) A lo largo del ejemplo, una vez guardada la imagen, tanto la inicial como la recortada, se cambia de nombre de la misma cada vez que se ejecuta un Action en el Controlador. Esto es debido a que, si se mantiene el mismo nombre de imagen en varias llamadas, aunque la imagen varíe (recortándola, por ejemplo), Internet Explorar la cachea (esto no ocurre ni en Chrome ni Firefox), por lo que siempre mostrará la primera imagen con el nombre dado. Así que para evitarnos esta molestia, utilizando los Ticks del momento actual se genera un nombre único:

string nombreFichero = Path.GetFileNameWithoutExtension(imagen.Fichero.FileName) + "_" + DateTime.Now.Ticks.ToString() + Path.GetExtension(imagen.Fichero.FileName);

4) Cuando se carga la imagen subida por el usuario, y antes de calcular si debe recortarse o no, se muestra. Normalmente cuando la imagen se muestra, se realizará dentro de un contenedor que puede tener definidos un ancho y un alto fijos (por temas de diseño, por ejemplo), por lo que la imagen que se verá en el navegador no tendrá ni su ancho ni alto reales. Para poder recortar correctamente JCrop ofrece la funcionalidad de definir el área en base a su tamaño real. Esto obliga a modificar ligeramente el ejemplo anterior:

En el modelo habrá que establecer 2 nuevas propiedades, "AnchoReal" y "AltoReal", que obtendremos de la imagen al subirla por primera vez, y que JCrop utilizará para calcular el ratio de aspecto:

5) Y por último el amigo Internet Explorer tiene reservada una sorpresa final.
La idea inicial de implementar esta funcionalidad era la de ocultar el input type="file" de Fichero, y simular el submit del formulario detectando cuando cambia este input, ya que es más cómodo para el usuario y visualmente queda más presentable.

Sin embargo, por motivos de seguridad, Internet Explorer no permite cambios en input type="file" mediante Javascript (consultar http://stackoverflow.com/questions/3935001/getting-access-is-denied-error-on-ie8/4335390#4335390 para más información). También hay varias soluciones posibles y es cuestión de probar.

Adjunto un ejemplo con todas las variantes posibles:
1) Sin redimensionar. Imagen recortando a su tamaño original.
2) Redimensionada. Imagen recortando a un ratio de aspecto, ubicada en un contenedor con tamaño fijo establecido en su estilo.
3) Sin redimensionar para navegadores no IE. Si tienes la suerte de estar completamente segur@ de que tus usuarios no utilizarán Internet Explorer, y quieres utilizar la aproximación comentada en el último punto (el input type="file" oculto y simular el submit del formulario de subida con Javascript) también dejo el ejemplo.

https://drive.google.com/drive/folders/0B7Im7mEr5csqNHFXcDBVNGROZ1U

Por supuesto se agradecen todos los comentarios.

¡¡Saludos y hasta la próxima!!