Transpilando que es gerundio

Si que llevaba tiempo sin pasarme por aquí, madre mía como esta esto de descuidado... A ver si me animo y como propósito de 2025 escribo un poco más (que no es díficil).

He empezado un par de cursos y el primero ha sido uno de TypeScript, ya sabéis que me gusta mucho JavaScript y he decidido echarle un ojo.

Pero, ¿qué es TypeScript?

TypeScript es un lenguaje de programación que se creó como una especie de "superpoder" para JavaScript. Básicamente, es JavaScript dopado con esteroides, ya que agrega características que lo hacen más robusto y fácil de usar, especialmente en proyectos grandes. Una de las grandes ventajas de TypeScript es el tipado estático, que nos permite definir qué tipo de datos estamos manejando, lo que ayuda a evitar errores que en JavaScript podrían ser difíciles de detectar hasta que es demasiado tarde. En otras palabras, te ayuda a “prevenir fuegos” en el código antes de que sucedan.

Una de las cosas que hace especial a TypeScript es que sigue siendo JavaScript en el fondo. Es compatible con todos los navegadores y plataformas donde JavaScript funciona, ya que después de escribir el código en TypeScript, se transpila (que no compila) a JavaScript para que funcione sin problemas. Esto hace que sea fácil integrarlo en proyectos existentes y empezar a disfrutar de sus beneficios sin tener que cambiar el ecosistema completo. Además, al ser desarrollado por Microsoft, tiene el respaldo de una gran empresa y una comunidad activa, lo que garantiza mejoras constantes y buen soporte.

Entonces, ¿qué beneficios reales ofrece? El tipado en TypeScript no solo hace que el código sea más seguro, sino que también facilita mucho la colaboración en equipo. Al definir los tipos de datos, es más fácil entender qué está haciendo cada parte del código sin necesidad de un montón de documentación adicional. Los editores de código también se benefician, ya que pueden ofrecer autocompletado, sugerencias y detección de errores en tiempo real. En proyectos grandes, estos detalles ahorran muchísimo tiempo y dolores de cabeza, haciendo que la experiencia de desarrollo sea mucho más fluida.

En resumen, TypeScript es una herramienta poderosa que, aunque puede tener una curva de aprendizaje si vienes de JavaScript puro, vale totalmente la pena. Cada vez más empresas lo adoptan para proyectos serios porque ayuda a hacer el código más limpio, más fácil de mantener y menos propenso a errores.

Un ejemplo sencillo sería esta función suma:

function suma(a: number, b: number): number {
    return a + b;
}

Esta funcíón sólo puedo recibir números y sólo va a devolver números, si lo hiciéramos con JavaScript sin definir tipos también podría recibir cadenas y concatenarlas. Por ejemplo:

suma(20,20) -> 40

suma("20","20") -> "2020"

Con TypeScript no podríamos invocar con cadenas, el propio editor nos avisaría del error, lo que hace que nos adelantemos a futuros problemas.

Ya os contaré, nos vemos pronto.

Tablas y jQuery

Es muy común para los que desarrollamos en web tener que usar tablas para mostrar datos.

Si la tabla no es muy grande, solemos darle unos estilos básicos y preocuparnos poco por ellas.

Pero qué pasa si la tabla empieza a crecer y crecer... Y nuestros usuarios quieren poder hacer búsquedas por los campos de las tablas, y además quieren ordenar por cualquier columna,...

Rápidamente empezamos a buscar algo en jQuery que nos ayude un poco, pero vemos que no hay nada en concreto. Lo que sí vemos es que hay muchos plugins sobre jQuery que nos ayudan sobre las tablas. 

Hoy vamos a ver uno de estos plugins: datatables (https://www.datatables.net/)

Y creo que lo mejor es que veamos los cambios con un ejemplo.

Supongamos que tenemos esta tabla:

Da miedo...

Vamos a añadir jquery y el plugin DataTables:

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>

Y ahora vamos a invocar al plugin con estas líneas:

$(document).ready(function() {

$('#example').DataTable();

} );

Probamos y:

Esto ha mejorado bastante, no tiene estilos, pero ya tiene paginación, y un buscador sobre todas las columnas.

Si nos vamos a la documentación, vemos que hay una css por defecto que podemos usar, y unas imágenes que nos ayudarán a hacer la tabla más funcional.

Copiamos la carpetas "images" y la css que nos interesa. Añadimos css al código:

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

Y volvemos a probar:

Esto ya es una tabla en condiciones, con la imágenes ya nos aparecen los controles para poder cambiar el orden de las columnas.

Sí, tenemos que cambiar algunas cosas: los textos por defecto, alguna alineación,... Pero hay  que reconocer que nos hemos quitado unas cuantas horas de programación de encima.

En nuestro repositorio podéis ver este ejemplo en los tres pasos que hemos hecho: 

https://bitbucket.org/tecnificados/public/src/2bdae4cd2dfc/Tablas/

Tenéis éste y muchos más ejemplos en la web del plugin (https://www.datatables.net), además de mucha documentación para indagar y personalizar mucho más vuestras tablas.

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!!