lunes, 20 de abril de 2015

Maven entra en Juego



Hoy quiero hacer una pequeña introducción sobre Maven.

Aunque no es fundamental para un desarrollador de Java, sí que es un primer paso que nos facilitará la vida en cualquier proyecto que vaya creciendo.

Si quieres empezar a utilizar un nuevo framework o librería lo más normal del mundo es descargarte los ficheros necesarios, copiarlos a tu carpeta de librerías, incluirlas en tu proyecto y a codificar.

Esto que a priori, parece algo sencillo, se puede empezar a complicar: la librería A, puede requerir la libreria B, y ésta a su vez la C, pero B requiere también D, y esta última no se lleva bien con la última versión de C...

Y aquí llega Maven para ayudarnos.

¿Qué es Maven? 

Es una herramienta para gestionar y construir proyectos. Entre otras funcionalidades nos ayuda a gestionar dependencias, y eso es lo que vamos a ver en este artículo.

¿Cómo funciona?

Maven introduce el concepto de Artefacto: es una librería y todo lo necesario para que ésta funcione bien (dependencias, configuración,...)

Cuando en un proyecto se utiliza Maven, existe el fichero "pom.xml", aquí se introduce la lista de todas las librerías (dependencias).

Todas se descargan en un repositorio común de nuestro disco duro sin que tengamos que preocuparnos por ellas.

¿Cómo uso Maven? 

Ahora mismo esta herramienta ya está integrada en la mayoría de IDEs de desarrollo ("Eclipse" entre otros).

¿Un ejemplo?

En todo proyecto siempre solemos necesitar escribir logs, para eso normalmente yo utilizo la librería "log4j". 

La manera tradicional para usar esta librería sería ir a su web: http://logging.apache.org/log4j/1.2  para desacargarla. Pero con Maven lo que tenemos que hacer es buscar sus datos en el repositorio central de Maven.

Para esto vamos a buscarla en esta web: http://mvnrepository.com, buscamos log4j y después de un par clicks llegamos a esta URI: http://mvnrepository.com/artifact/log4j/log4j/1.2.17. En la pestaña de abajo podemos ver el formato de Maven para utilizar esta dependencia:

<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>

El proyecto "MavenLogExample" esta cargado en Eclipse, inicialmente está configurado sin Maven y tiene la librería dentro del proyecto.

Tiene una clase y en su método Main sólo hay estas líneas:

try {                          
    PropertyConfigurator.configure("log4j.properties");
    log.info("Sistema de log iniciado");                        

} catch (Exception e) {
    e.printStackTrace();  
}

Dentro del proyecto esta la carpeta "lib" que contiene el .jar de "log4j".

Vamos a empezar a usar Maven en este proyecto y a quitarnos la librería del proyecto (con esto ahorramos mucho espacio, imaginaros un proyecto con cien librerías).

Primer paso: darle al proyecto naturaleza Maven

Seleccionamos el proyecto, botón derecho del ratón, pulsamos "Configure" y "Convert to Maven Project".




Nos aparece esta pantalla:



Podemos rellenar los datos "name" y "description" o pulsar "Finish".

Tardará unos segundos en generarnos el fichero "pom.xml". Y aparecerá en la pantalla así:


Si queremos ver cómo es el fichero, podemos pinchar en la última pestaña inferior: "pom.xml"

Veremos que contiene algo parecido a esto:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>MavenLogExample</groupId>
  <artifactId>MavenLogExample</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.7</source>
          <target>1.7</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>


Segundo Paso: configuración de nuestra librería

Nosotros vamos a añadir la dependencia de "log4j" dentro de <dependencies/> que se escribe después de </build> . Nos quedará así:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>MavenLogExample</groupId>
<artifactId>MavenLogExample</artifactId>
<version>0.0.1-SNAPSHOT</version>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
</dependencies>
</project>

Ahora ya podemos borrar la librería del proyecto y eliminar su dependencia de la configuración.


Si volvéis a ejecutar veréis que todo funciona perfectamente.

Tenéis este proyecto en nuestro repositorio público: https://bitbucket.org/tecnificados/public

Hay dos commits: el inicial sin Maven y el segundo con Maven y sin la librería de log dentro del proyecto.

Espero que os sea útil.

domingo, 5 de abril de 2015

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í.

miércoles, 25 de marzo de 2015

¡¡¡Ganamos!!!

Ayer fue un día de ésos que no se olvidan.

Llegamos a Valladolid a las 17:40 

Nada más llegar nos quedamos alucinados, el lugar de la entrega de premios era una antigua capilla, una auténtica preciosidad. Había varios monitores donde iban apareciendo todas las aplicaciones, ¡¡¡la nuestra también!!!!



Cuando empezó Alberto y yo estábamos "nerviosillos".  Después de la segunda charla teníamos bastante claro que no nos iban a dar el premio. Y en ese momento le llegó el turno a Izaskun (Oracle), y de repente empieza a hablar de nuestra aplicación (minuto 30:25): "Yo quería conquistar el pueblo de mi padre...", qué subidón de adrenalina. Estaba hablando de nuestro trabajo, qué contentos estábamos los dos.

Y justo antes de que empezara la ceremonia, en la última intervención también hablan de "Conquista Castilla y León", y nos llaman innovadores. Las dos horas de carretera habían merecido la pena.

Llega el momento, empieza la entrega. Primero hay una mención especial, después aplicación móvil, seguimos con aplicación hecha por estudiantes, y para terminar, mejor aplicación. Y cuando dice la ganadora, su nombre empieza por "Conquista...."

El jurado decidió que "Conquista Castilla y León" era la mejor aplicación web del concurso.

Aquí podéis ver todo el acto.




Gracias, gracias, gracias... a la Junta de Castilla y León por el concurso, a la familia (estas navidades nos vieron poco), a los amigos, a tod@s, otra vez Gracias.

PD: por petición popular acabamos el quinto torneo y empezamos el sexto. Mañana empieza un nuevo torneo, con unos cuantos cambios.

lunes, 23 de marzo de 2015

Road to Valladolid



Llegó el día, mañana martes 24 de Marzo de 2015 se entregan los premios del Segundo Concurso de Datos Abiertos de Castilla y León.

Y para allá nos vamos a ver si les ha gustado nuestra pequeña aplicación ("Conquista Castilla y León").

En este enlace podéis ver todos los proyectos que se han presentado.

La entrega de premios empieza a las 18:00 y podéis verla por streaming a través de su web.





sábado, 21 de marzo de 2015

Repositorios Git


En los últimos diez años los repositorios de código han tenido una evolución constante.

Todos los que llevamos un tiempo en este mundo hemos cambiado de repositorio al menos tres veces.

Yo  mismo empecé utilizando "Source Safe", después "Subversion" y ahora "Git".

El origen de Git viene de Linux, de hecho, está diseñado por Linus Torvalds. Está pensado como repositorio distribuido, vamos a explicar qué quiere decir esto.

Los anteriores repositorios eran centralizados: necesitabas estar conectado a un servidor (donde se almacenaba el código), para poder realizar las subidas y las actualizaciones.

Ahora con Git, lo que haces es realizar los "commits" en nuestro propio ordenador, y cuando tenemos una conexión a Internet, realizamos las subidas ("push") al servidor donde se encuentra todo el código.

Ahora mismo, hay dos repositorios "gratuitos" donde se alojan los proyectos de código más importantes:
En ambos cuando te das de alta tienes disponibles varias herramientas además del repositorio, tienes wikis, gestores de incidencias,...

Nosotros en Tecnificados utilizamos Bitbucket, porque te permite tener repositorios tanto públicos como privados en la versión gratuita. En Github en el modo "free" sólo pueden ser públicos.

Ahora mismo Git está integrado con las principales herramientas de programación tanto en Eclipse como en Visual Studio si tienes un directorio conectado con un repositorio de Git estos compiladores reconocen el sistema de control de versiones y te permiten realizar las operaciones directamente sin herramientas adicionales.

Nosotros sin embargo sí utilizamos una aplicación para esto. Concretamente "Source Tree": http://www.sourcetreeapp.com/ Es la que recomienda Bitbucket, pero se puede utilizar con cualquier repositorio de Git o Mercurial.

En esta URL tenéis nuestro repositorio público: https://bitbucket.org/tecnificados/public.

Aquí tenéis un proyecto de Java muy básico (Factorial), que usaremos de ejemplo en futuros post.

jueves, 12 de febrero de 2015

Un editor: notepad++



Los que llevamos ya tiempo en trabajando solemos tener varios programas de confianza, pequeñas utilidades que nos han sacado de un apuro más de una vez.

Yo os quiero hablar de una herramienta que va conmigo allá donde voy, se llama Notepad++ (http://notepad-plus-plus.org).

Este editor es libre y gratuito, tiene muchas funcionalidades que hacen que se iguale a otros editores de pago. Pero lo que más me gusta de él, es que tiene un gestor de plugin que permite multiplicar sus funcionalidades.

Cualquier persona puede codificar su propio plugin, y subirlo para compartirlo con la comunidad.

Os voy a comentar un par de características nativas de este editor:

  • Modo columna: si pulsamos "shift" + "alt" y nos movemos con el cursor arriba y abajo, podemos seleccionar en forma de columna. Esto es genial para insertar una cadena es una posicion específica en todas las lineas.   
  • Macros: esta me salva la vida una y otra vez. Podemos grabar una acción determinada en una linea, y luego repetir esa acción en todas las demás.   
  • Seleccion de lenguaje: puedes usar este editor para programar diversos lenguajes, si seleccionas el tuyo te colorea la sintaxis para que sea más fácil.   
Ahora vamos a por algún plugin.  

Si nos vamos a Plugins->Plugin Manager, allí podremos ver muchísimos que podemos instalar. Normalmente yo siempre tengo:
   

  • Xmltools: cuando tienes una línea de xml y no ves nada, lo mejor es traértelo aquí y que el solo te lo coloque y te lo coloree. También lo valida, aplica transformaciones...
  • Source cookifier: este plugin, te captura las diversas variables, constantes, funciones de tu código, y te las muestra a la derecha. Ideal para javascript.
De momento solo esta disponible para sistemas Windows. Aunque en linux podemos utilizarlo con Wine.

lunes, 26 de enero de 2015

Mantenimiento


Por motivos ajenos a nosotros, tenemos que poner Conquista Castilla y León en mantenimiento.

Esta aplicación está alojada en la instancia española de FIWARE (FI-LAB) y la semana pasada nos comunicaron que mañana día 27 hay una parada programada que empieza a las 7:30 de la mañana.

A esa hora estamos trabajando y no podemos estar pendientes de esta aplicación.

Activaremos el servicio lo antes posible. 

Éste es el Vídeo de la presentación del juego.

Te recomendamos leer alguno de nuestros artículos, esperamos que os gusten.


sábado, 17 de enero de 2015

Conquista Castilla y León



Hace unos días os comentaba que estábamos metidos en el desarrollo de un juego de navegador para un concurso (http://www.datosabiertos.jcyl.es/).

Esta semana por fin ha llegado el día de la entrega.

Lo hemos desarrollado todo en mes y medio entre Alberto y yo. Nos hubiera gustado hacer muchas más cosas pero el tiempo no nos ha dado más de sí.

Lo hemos realizado en JAVA utilizado SPRING. Un framework que ninguno de los dos controlaba. Además como base de datos usamos MongoDB, que tampoco conocíamos demasiado.

Intentaremos escribir un par de tutoriales sobre las cosillas que hemos aprendido en las próximos entradas.

Aquí os dejo un vídeo donde podéis ver el resultado final:



Si queréis daros de alta y probarlo lo podéis hacer a través de este enlace:

http://conquista.tecnificados.com

Esperamos que os guste. Se aceptan todo tipo de sugerencias.

Seguiremos evolucionandolo en un futuro cercano. Ahora mismo estamos "de vacaciones", ya que las últimas semanas han sido un no parar.

Muchas gracias a todos los que nos han ayudado con sugerencias y pruebas.




miércoles, 14 de enero de 2015

Nuevos modelos de desarrollo: Scrum

El año pasado Rebeca nos hablaba sobre los MOOC que últimamente están tan de moda, en concreto nos hacía referencia a MiriadaX y a un curso sobre Agilidad y Lean (lee el artículo completo aquí) y yo quería hablaros sobre Scrum, que es un modelo de desarrollo ágil del software que me llama mucho la atención y se adapta mejor a los tiempos que corren.

Los modelos tradicionales de desarrollo, en los que hay una planificación casi invariable del alcance, el tiempo y el coste del proyecto tras un análisis exhaustivo de los requerimientos, son buenos para otras ingenierías o arquitecturas, como por ejemplo las construcciones de viviendas o edificios donde es muy fácil distinguir las diferentes fases del proyecto que han de llevar un orden concreto, pero esto no siempre pasa en las aplicaciones software puesto que nos aparecen clientes que no pueden esperar a que se finalice el edificio para utilizar un aseo, o no tienen presupuesto para abarcar un proyecto completo, o no tienen claros todos sus requerimientos sino una pequeña parte de los mismos o simplemente no quieren casarse contigo hasta la finalización del proyecto.

Scrum da respuesta a este tipo de problemas ya que adopta una estrategia de desarrollo incremental e iterativa, en lugar de la planificación y ejecución completa del producto solapando las fases del desarrollo, consiguiendo de este modo que los cambios de alcance (ya sea por nuevos requerimientos o por mala interpretación de los mismos por parte de los analistas o el equipo de desarrollo) no interfieran en absoluto.

Como ya he comentado anteriormente, en los desarrollos tradicionales los requisitos han de estar desde el comienzo y el equipo de desarrollo ha de adaptar el trabajo a los plazos y criterios definidos en el análisis al principio, y no se comienza el desarrollo hasta que dicho análisis quede finalizado. Mencionar que las estadísticas hablan de que la incertidumbre de un análisis aumenta un 4% con cada mes que analizamos por adelantado, un proyecto analizado a 1 año tendría un 50% de incertidumbre. En cambio Scrum define la sucesión de una serie de ciclos al final de los cuales el cliente recibe un trozo del producto que puede ser considerado terminado y completo pese a contener únicamente la implementación de unos pocos requisitos del cliente. La clave está en que después del ciclo obtenemos feedback del cliente y podemos adaptar el siguiente ciclo a posibles cambios de los requisitos y lo que en ese momento es prioritario, aprendiendo con cada iteración lo que es importante para el cliente y reduciendo la incertidumbre a la mínima expresión.

¿Cómo es esto? Al principio de cada reunión el equipo de desarrollo elige de entre el listado ordenado por importancia para el cliente, qué requisitos va a implementar en ese ciclo. Y no solo los elige sino que se compromete a tenerlos terminados y probados para la fecha concretada y se pone a trabajar en ellos. Durante el tiempo de trabajo nadie puede interrumpirles ni influir en su ritmo de trabajo.
Marco de trabajo Scrum

Tras esta breve introducción al Scrum (puedes aprender más en los cursos de Scrummanager o visitar el blog de mi amigo Alex quisiera comentar desde mi experiencia, por qué me parece interesante y que dificultades le veo en la implantación de este modelo de desarrollo.

Por un lado Scrum da importancia al equipo y al conocimiento tácito de las personas. Desde que comencé a trabajar y tras mi paso por varias empresas lo importante siempre han sido los compañeros. Cuando hemos tenido buen ambiente entre nosotros y hemos cogido un compromiso con un plazo de entrega, hemos puesto toda la carne en el asador para llegar a ello intentando hacer las cosas bien, aprendiendo de los demás del equipo y compartiendo con ellos mis propios conocimientos. En cambio no pasa lo mismo cuando las decisiones no las tomas tú sino que te las imponen o el equipo no está cohesionado o aparecen interrupciones en el trabajo diario o cuando antes de terminar lo que estás realizando te cambian de repente el alcance del proyecto y tu trabajo no ha servido para nada.

Por otro lado cuando el cliente recibe entregas funcionales que puede utilizar cada breve espacio de tiempo se involucra más en el desarrollo de algo que será suyo. Le es más fácil percibir que sus impresiones, ideas y opiniones son tomadas en cuenta y se reflejan al poco tiempo en el producto que recibe, dándose cuenta de la dificultad que tiene implementar sus peticiones, de modo que está también más receptivo ante retrasos y/o errores.

De todos modos cabe destacar que no es fácil llegar a implantar esta metodología de trabajo ya que hay que conseguir cambiar el modo de pensar de toda la organización, desde la directiva y la gerencia hasta el propio: hace poco a comienzos de un proyecto personal a pequeña escala intenté implantar Scrum para su desarrollo, pero al final con los plazos de entrega tan ajustados acabamos desarrollando un Extreme Programming de libro.

Referencias:

domingo, 11 de enero de 2015

Un nuevo comienzo



Empezamos este año con nuevas ideas y con dominio propio: www.tecnificados.com

Tenemos en mente realizar muchos proyectos e ir escribiendo aquí lo que estamos haciendo para compartirlo con la comunidad.

El primer reto es presentarnos a un concurso de aplicaciones con un juego.

Estamos haciendo un juego de navegador utilizando datos abiertos, de momento no voy a daros más pistas.

Tenemos de plazo hasta el día 15 de este mes y estamos bastante liados, os seguiremos informando.


El equipo de Tecnificados.

miércoles, 30 de abril de 2014

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

miércoles, 16 de abril de 2014

Tomcat y Eclipse: compañeros de camino II


Ahora que ya tenemos nuestro entorno de pruebas listo, vamos a preparar nuestro entorno de desarrollo.

Escribir paso a paso cómo montar este entorno es un poco latoso, y he pensado que mejor hacerlo con vídeos. Y al final he preparado dos:

a) descargas de Java y Eclipse
b) configuración del entorno de desarrollo

En el primero utilizo estas URLs:
Y únicamente me descargo la JDK y IDE para J2EE. 



 
En el segundo preparo el entorno de desarrollo en estos pasos:
  1. Instalación de la JDK de Oracle (todavía pienso en la JDK de Sun).
  2. Descompresión de Eclipse.
  3. Ejecutamos eclipse, creamos un nuevo proyecto web.
  4. A este proyecto le asignamos como servidor Tomcat7, el cual se descarga automáticamente.
  5. Creamos en el proyecto una JSP con un bucle y probamos que funciona.
Aunque en el vídeo seleccione JAVA 8, luego he tenido que retroceder por problemas de compatibilidad. Lo comento por si os pasa también a vosotros.

Está al doble de la velocidad normal, me parecía un poco pesado ver cómo se descomprime un zip a velocidad normal.

Aquí lo tenéis:



Con esto la creación de los entornos ya está hecha.

Lo siguiente que quiero hacer es un pequeño proyecto de navegación clásica de JSP a Servlet y de Servlet a JSP, y desplegarlo en el entorno de pruebas.

Nos vemos.