Spring boot: Cambiar el banner

Posted on Actualizado enn

Hoy vuelvo con la serie sobre Spring Boot con un sencillo post, en este caso para explicar una pequeña característica que podemos configurar en nuestro proyecto Spring Boot, el banner que se muestra al arrancar.

Concepto:
Bueno, pues este banner que se nos muestra al arrancar, al igual que otras características de Spring Boot, se puede configurar y cambiar muy fácilmente. Vamos a ver un ejemplo de como poner lo que nosotros queramos o incluso desactivarlo.

Entorno usado:
Java JDK 1.8
Maven 3.2.5
Git 1.9.5
IDE Intellij 14.1.4 Ultimate version

Pasos:

1. Creamos un proyecto Spring Boot básico, con maven. En el pom añadimos las dependencias y plugin básicos de Spring Boot, y creamos nuestra clase básica con el método main para arrancar Spring Boot. Para esto podéis seguir los pasos de mi post de PoC con Spring Boot o usar la web de start.spring.io que os genera todo fácilmente.

2. Si probamos a arrancar nuestra aplicación (‘mvn spring-boot:run’), veremos el banner por defecto de Spring que comentaba antes.

3. Vamos a cambiarlo. Es tan sencillo como añadir un nuevo fichero a nuestra carpeta ‘resources’, llamado ‘banner.txt‘. El texto que pongamos en este txt es el que saldrá como banner. En este txt podemos hacer referencia a algunas variables como la versión de Spring Boot (más info aquí). Por ejemplo, podríamos tener un banner así:

Captura

Si queréis ponerle letras en plan ‘ascii’, hay webs como esta: http://patorjk.com/software/taag/ 😉

4. Si volvemos a arrancar nuestra aplicación, veremos nuestro nuevo banner.

5. ¿Y si no queremos banner? Aparte de dejar el fichero banner.txt vacio, también podemos hacerlo programaticamente con la clase SpringApplication, en nuestra clase ‘main’:

Con llamar al método ‘setShowBanner‘ con un ‘false’, desactivaríamos el banner.

package com.edwise.springbootseries.banner;
// imports...
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication app = new SpringApplication(Application.class);
        app.setShowBanner(false);
        app.run(args);
    }
}
Un saludo.

 

Anuncios

La inteligencia artificial en el día a día

Posted on Actualizado enn

 

El futuro está aquí. En los  años 60, se estaba en el creencia de que se íba a vivir entre robots y androides, pero son los teléfonos móviles, los ordenadores y los televisiores los que ya cuentan con aplicaciones y plataformas que aprenden qué nos gusta, qué vemos o visitamos con más asiduidad, y hacen cosas para nosotros.

Hasta hace unos años la frase hacía referencia a HAL 9000 de la película 2001. Odisea del espacio o al androide Data de Star Trek, pero hoy es muy común usar “inteligencia artificial” para hablar de herramientas de uso cotidiano. Sin embargo, son necesarias algunas aclaraciones. La más importante es que la frase “inteligencia artificial” es engañosa, ya que podría parecer que lo que se está haciendo es crear dispositivos que sean inteligentes en el sentido “humano” del término. Esto no tiene nada que ver: nuestro cerebro sigue siendo un gran misterio para la ciencia y poco sirve de modelo para mejorar a las computadoras y sistemas de procesamiento. Por eso, el término que muchos prefieren para hablar de estos avances es machine learning (“aprendizaje automatizado”), y también, Deep learning (“aprendizaje profundo”), ya que estamos creando sistemas que pueden aprender nuevas habilidades.

Gracias al procesamiento cognitivo de datos, una máquina hoy puede recibir cientos de miles de fotos de gatos, por ejemplo, y extraer de ellas lo que necesita para poder reconocer a un gato en una imagen, evitando que lo confunda con un peluche o un almohadón. A medida que se le entregan más y más fotografías, más aprenderá y menos errores cometerá. Este proceso de aprendizaje de las máquinas se está realizando en todo el mundo, incluido en Argentina, pero tiene su epicentro en Silicon Valley, la zona de San Francisco (EE.UU.), donde están instaladas las compañías tecnológicas más importantes del planeta. Viva fue el único medio argentino que recorrió las oficinas centrales de Google en las que se trabaja en machine learning y pudo dialogar con las personas a cargo. Lo más interesante es que no se trata de promesas para un futuro distante, sino que esa I. A. ya está disponible, y de forma gratuita, en nuestro teléfono. Estas aplicaciones son sólo la punta del iceberg, ya que hoy compañías como IBM, Netflix, Facebook y Spotify utilizan el aprendizaje automatizado en innumerables proyectos: desde automóviles sin conductor hasta estudios para conocer más sobre el cáncer, pasando por la creación de un vestido inolvidable

1. Maneja automoviles por nosotros

Waymo

Cómo funciona la inteligencia artificial en la vida diaria

Inteligencia artificial: Waymo, un auto sin chofer.

Los autos sin conductor también aprenden. Los vehículos autónomos –muchos están dando vueltas por ciertas calles de San Francisco gracias al permiso de autoridades locales– no son tan diferentes a los que manejamos, pero cuentan con numerosos sensores que recolectan todo el tiempo información y con computadoras a bordo que procesan y aprenden de lo que reciben, para tomar decisiones cuando se hacen cargo del volante. “Cada hora que pasa un auto en la calle implica muchísimos datos sobre cómo manejamos, cómo reconocer semáforos y cómo se comportan los peatones. Eso es oro para los que trabajamos en los algoritmos”, le dijo a Viva Vinay Shet, ingeniero de Google.

2. Nos recomienda que ver y que escuchar

Spotify y Netflix

Hay varios algoritmos que saben casi con exactitud lo que nos gusta. El arma secreta de Spotify –la plataforma de música por streaming más popular del mundo– invierte millones en mejorar la forma en que sus sistemas aprenden nuestros gustos. Al disponer de los hábitos de escucha de millones de usuarios, puede encontrar patrones de gusto que van más allá del género o del país. Factores como los tonos graves o la percusión impactan más en el gusto que quien canta. Algo similar hace Netflix, que descubrió que no importa dónde vivimos: es más probable que alguien de otro país comparta nuestras preferencias por los dramas policiales noruegos que un vecino.

Cómo funciona la inteligencia artificial en la vida diaria

Inteligencia artificial: Netflix y Spotify “descubren” nuestros gustos.

3. Ordena el caos de nuestras fotos

Dropbox

Desde que los teléfonos son cámaras, la cantidad de fotos entran en caos. “Nuestro objetivo final es que uno pueda tener todas las imágenes disponibles y ordenadas en un solo lugar. El problema es que nadie etiqueta sus fotos. Eso es lo que necesitamos hacer con los algoritmos: pasar de los píxeles a una descripción de lo que tiene la imagen”, le explicó a Viva el director del área Photos de Google, Tom Duerig. Así, hoy podemos poner una palabra como “vacaciones” o “cumpleaños” y un programa trae esas fotos. Facebook también lo está haciendo y Dropbox, la compañía que ofrece alojamiento en la nube, usa un método de aprendizaje automatizado para leer los textos de las fotos y permitirnos escanear apuntes, documentos o pasaportes.

4. Nos cocina platos dificiles

IBM Chef Watson

El aprendizaje automatizado no conoce fronteras y también llegó a la cocina. La iniciativa de procesamiento cognitivo de IBM llamada Watson tiene toda una división destinada a la gastronomía. Sus algoritmos recibieron cientos de miles de recetas de todo el mundo, el conocimiento de las reacciones que se registran a nivel molecular cuando se combinan ingredientes y detalles de los estilos de cocción de acuerdo a cada región del planeta. A partir de esa información creó recetas completamente nuevas y riquísimas, como una variante del burrito mexicano, pero con chocolate, o cócteles con jalapeño y wasabi. Se lo puede consultar de manera gratuita en ibmchefwatson.com, ingresando qué tenemos en la heladera y probando opciones inventadas por una máquina.

Cómo funciona la inteligencia artificial en la vida diaria

Inteligencia artificial: algoritmos en la cocina.

 

5. Analiza el cáncer y busca una cura

Watson Health

Conocer mejor al cáncer parece ser el camino para encontrar una cura definitiva. Y aquí el procesamiento cognitivo de datos se vuelve una herramienta muy valiosa para los médicos, ya que puede leer y entender en poco tiempo millones de datos provenientes de estudios, análisis y hasta publicaciones científicas. Watson, de IBM, tiene una división de salud que ayuda a profesionales de varias instituciones detectando patrones y ofreciendo sugerencias de tratamiento. Otro emprendimiento destacable es Kaggle, la mayor comunidad de científicos de datos del mundo, que está procesando datos médicos como radiografías, análisis de laboratorio y registro de hábitos para generar posibles diagnósticos clínicos, que sirven de herramienta para los médicos y les permite tener en cuenta síndromes poco conocidos.

Cómo funciona la inteligencia artificial en la vida diaria

Inteligencia artificial: Watson Health, una herramienta médica.

6. Diseña prendas con diseños únicos

IBM Watson-Marchesa

El año pasado un vestido se llevó todas las miradas en la esperada Gala del Met, la celebración del Instituto del Vestido del Museo Metropolitano de Arte de Nueva York. Cuando la prensa preguntó quién era el diseñador, resultó ser un algoritmo. Todo había comenzado cinco semanas antes, cuando la casa de vestidos Marchesa le acercó al sistema de aprendizaje automatizado Watson toda la información que tenían disponible sobre el proceso creativo que realizaban antes de diseñar cada prenda. Además, se le cargó fotos de todo su catálogo, datos sobre los diferentes tipos de telas, los colores, cómo se combinan tradicionalmente y cuáles son los estilos que estaban de moda. Una vez que procesó esto, creó un modelo de vestido completamente nuevo (foto) pero en el estilo de Marchesa, al que le agregó luces que cambiaban de color de acuerdo al tenor de los tuits que recibía, procesando en tiempo real las emociones que detectaba en ellos.

Cómo funciona la inteligencia artificial en la vida diaria

Inteligencia artificial: vestido diseñado por un algoritmo.

 

7. Organiza nuestras actividades eficientemente

Google calendar

La multiplicidad de actividades y obligaciones es un problema para muchos. Preocupado porque sus estudios en la facultad le tomaban tiempo de ver a su novia y sus amigos, Jacob Bank creó en 2015 Timeful, una app que utiliza el aprendizaje automatizado para conocer nuestra agenda y nuestros gustos y organizar de manera eficiente nuestras actividades. El resultado fue tan exitoso que llamó la atención de Google, que lo sumó a sus filas y agregó esta función a su Calendario. Hoy cualquiera puede desde la aplicación de su teléfono activar el sector “Metas” y pedirle a esta suerte de supersecretaria privada que nos organice la agenda para poder empezar a estudiar inglés, hacer yoga o simplemente terminar con esa serie de la que todos hablan. Un algoritmo analizará cada una de nuestras actividades, aprenderá nuestros hábitos y nos dará el mejor horario, el más adecuado a nuestra semana.

8. Entiende todo lo que le decimos

Google voice

Lo que antes sólo veíamos en series de TV hoy es parte de nuestra vida: cada vez más aparatos funcionan con nuestra voz. Para muchos, este tipo de interfaz sin botones ni pantallas es la manera definitiva en la que nos vincularemos con la tecnología. Pero lograr que un dispositivo entienda lo que decimos es muy complicado, no sólo porque cada idioma tiene sus reglas, sino porque el lenguaje tiene muchas trampas y ambigüedades. La francesa Françoise Beaufays es una lingüista que trabaja en este campo hace diez años en Google y que descubrió en los algoritmos que aprenden la solución a muchos de sus problemas. “El reconocimiento de voz es el presente. Nuestra principal manera de comunicarnos es hablando, y por eso es tan atractivo poder manejarnos así, pero no podríamos hacerlo sin máquinas que aprendan cada vez que nos escuchan”, asegura.

9. Responde los mails por nosotros

Smart reply

Incluso si nuestro trabajo no involucra estar sentado frente a una computadora muy seguido, es posible que pasemos una parte importante del día respondiendo correos electrónicos. Frente a este problema, un equipo de investigadores liderados por Bálint Miklós creó en las oficinas de Google, en Mountain View, la smart reply (o “respuesta inteligente”), una función disponible en Gmail, Inbox y Allo que escribe por nosotros tres posibles contestaciones al mail que recibimos y de las cuales podemos elegir la que nos parece más indicada sin necesidad de tipear. Cuanto más veces las usemos, el algoritmo aprenderá automáticamente nuestro estilo y las opciones de respuestas serán cada más cercanas a nuestro estilo de escritura, saltando de un “¡Gracias!” a un “graciasss!!!”, por ejemplo. Se hace pasar por nosotros. Y siempre quedamos bien.

10. Nos ayuda a ordenar el tránsito

Waze

No es necesario tener una inteligencia artificial para darse cuenta de que el tránsito en las ciudades es cada días más lento y engorroso. Pero unos buenos algoritmos sí pueden ayudar a que la experiencia de manejo sea menos traumática. Gracias a los datos que constantemente recoge de los mapas y la colaboración de sus usuarios, la app Waze actualiza en tiempo real caminos eficientes para llegar a destino. Y la empresa argentina BGH Tech Solutions desarrolló un sistema que involucra aprendizaje automatizado para gestionar mejor el otro gran problema urbano con los automóviles: el estacionamiento. La propuesta local monitorea de forma remota la disponibilidad de lugar para estacionar en la vía pública y lo correlaciona con datos como el clima, el día de la semana y las obras que se estén haciendo, todo para determinar dónde podremos estacionar sin problemas.

(Fuente: aquí)

Mapas de calor o heat Maps

Posted on Actualizado enn

Unos de los puntos más importantes en cualquier estrategia de marketing es mejorar y optimizar nuestra plataforma de manera continua, ya sea una tienda online, una web de servicios o una landing page. Conocer qué zonas y elementos de nuestra web generan un mayor y mejor impacto sobre los usuarios es vital para tomar decisiones sobre lo que está funcionando, lo que no y lo que debe mejorarse.

Los distintos servicios de analítica nos aportan en este sentido datos valiosos en cuanto a cómo perciben los usuarios nuestra web y el uso que hacen de ella. Pero a menudo esta información es más difícil de interpretar a nivel de elementos de interfaz o su parametrización no resulta tan ágil como se desearía.

Los mapas de calor se utilizan, en este sentido, para identificar cuáles son los puntos que centran la atención del usuario a través de interacciones y pautas de comportamiento pre-estabecidas.

Percepción del cerebro sobre formatos digitales

El ojo humano sigue determinados patrones de lectura a la hora de “leer” una web. Estos patrones presentan una regularidad o esquemas en relación a cómo percibimos la realidad y sus formatos de lectura. De ahí que cuando leamos una web nos basemos en un patrón de lectura en Z o en F; es decir, realicemos una lectura según unos patrones que el cerebro tienen preconfigurados para tal fin. La Fondeu (Fundación del Español urgente) tiene algunos breves artículos que condensan este tema.

Los referentes en usabilidad han elaborado, con mayor o menor controversia, un canon propio sobre la forma de percibir la información sobre formatos digitales y cómo debería ser presentada. Éste es el caso, por ejemplo, del celebrado Jakob Nielsen y sus estudios sobre usabilidad web.

En este contextos, los de la percepción de la mente sobre información en soportes digitales, el Neuromarketing ha surgido como una técnica que aplica la neurociencia al terreno del marketing, con el fin de identificar los puntos claves que motivan la toma de decisiones en procesos concretos. Analizar los niveles de atención, emoción o memoria forman parte de los procesos que son tenidos en cuenta. La forma en cómo nos relacionamos con lo que nos agrada y nuestra respuesta ya estaba presente en obras capitales como Visión interior de Semir Zeki en la relación de la belleza con el cerebro a través de la neuroestética.

La raíz de la neurociencia es profunda frente al desarrollo de internet como forma de comunicación. Investigadores como Joseph E. LeDoux, Daniel Kahneman o Muhzarin Banaji han postulado teorizaciones propias que albergan desde las motivaciones de la toma de decisiones en zonas de incertidumbre a la percepción del sujeto frente a las valoraciones sociales y de grupo.

Cómo trabajan los mapas de calor

Los mapas de calor, a fin de presentar la información de la manera más gráfica y útil posible utilizan como forma de representación una termografía, estableciendo una jerarquía de dos polos; es decir, por una parte, se hace a través del empleo de colores cálidos (generalmente rojo, naranja y amarillo) para mostrar las zonas de acción de clics o interés de foco, frente a una gama de colores fríos (azul, verde) que semantizan las zonas que no reciben atención por parte del usuario.

Este tipo de técnicas se basa en el concepto de eye-tracking, tecnología que refiere a un conjunto de procedimientos técnicos que permiten monitorizar el modo en que una persona mira una imagen o registro visual. Si bien en algunos casos, como veremos, estas técnicas no tienen una fiabilidad del 100%, sí debería integrarse en cualquier plan analítico integral para la tomas de decisiones, especialmente sobre UI (interfaz de usuario) y UX (experiencia de usuarios).

Mapas de calor basados en clicks (Click Heatmaps)

Clic Heatmap

Este tipo de mapas registran las zonas donde se hacen clicks. Se trata de uno de los mapas más empleados, porque generan información a corto plazo sobre elementos que podemos definir con mucha claridad (por ejemplo, un banner con una promoción especial).

Se engloban dentro de los mapas de calor por la similitud en los resultados obtenidos, ya que comparten una matriz de datos fundamental. Al registrarse la interacción de los usuarios, el grado de verosimilitud de los datos obtenidos es muy relevante. La información que obtenemos se basa directamente sobre acciones concretas como clicks en enlaces, banners, y otros elementos afines. Permiten tomar decisiones a corto plazo (por ejemplo; si un banner para una determinada campaña está funcionando y qué CTR recibe).

Mapas basados en el movimiento del ratón (Mouse movement Heatmap)

Mouse Heatmap

Esta tipología registra el movimiento del ratón y, aunque los datos derivados no tienen una fiabilidad completa, sí aportan valor a la analítica general, especialmente si los cruzamos con datos de otros mapas de calor. Los movimientos de ratón tienden a alinearse con el movimiento de nuestros ojos; existe así una pauta regular e intuitiva que rige el movimiento del ratón semi-inconscientemente hacia los focos de atención. En la Carnegie Mellon University en Pensilvania descubrieron que esta alineación llega hasta unos porcentajes que alejan cualquier duda de estos datos.

…84% of the times that a region was visited by a mouse cursor, it was also visited by (users’) eye gaze. In addition, 88% of regions that were not gazed by the eye were also not visited by a mouse cursor.

Mapas de Scrool (Scroll Heatmaps)

Scroll Heatmap

Se utilizan en páginas que desarrollan mucho scroll a fin de poder detectar el nivel de profundidad del scroll. Es decir, hasta qué punto llega el usuario a hacer scroll y cuál es el límite bajo el cual no existe navegación. Esto resulta especialmente útil para identificar las zonas que mayor atención reciben por parte de los usuarios, de modo que seamos conscientes sobre qué zonas debemos prestar más atención frente a otras zonas grises. Esto nos ayudará a identificar la línea de atención de nuestros clientes o usuarios más allá del famoso above the fold. Un enlace interesante respecto a esto último lo encuentras aquí.

Qué utilidad real tienen los mapas de calor

La utilidad principal, como hemos visto, es trackear zonas concretas de la web frente a la actividad media del usuario genérico en nuestra web. Entre las aplicaciones más destacadas podemos destacar las siguientes:

  • Analizar nuestros procesos de conversión: Nos ayudará a detectar si existen problemas en las fases de conversión, y en su caso a identificarlos de manera directa y proponer soluciones. Por ejemplo, si en una página de proceso de compra de una tienda online registramos problemas en un paso de compra, o si un formulario de una web de servicios recibe problemas por algún elemento.
  • Verificar prácticas de CTAs: Cada vez que se desarrolla una página existe una jerarquía de elementos, y dentro de esa jerarquía hay un ordenación de CTAs (Call to actions). Los CTAs son las llamadas a la acción sobre acciones específicas (“Compra ahora”, “solicita presupuesto”, “clica aquí”, etc), y se organizan según el plan de objetivos de cada página. Hay un CTA principal (por ejemplo, “Compra ahora”) y una jerarquía de CTAs si no se cumple el CTA principal (por ejemplo, “Suscríbete a nuestra newsletter”). Los mapas de calor nos ayudan en este sentido a medir si el usuario está clicando en los elementos que se han desarrollado para tal acción o si, en cambio, debemos realizar una mejora. (modificar CTA principal, cambiar de ubicación, color, acompañar de imagen transaccional, etc.)
  • Comprobar la efectividad de los elementos de información: Resulta vital conocer si determinados elementos están cumpliendo correctamente su función a nivel global. Por ejemplo, si hay elementos en el menú principal que no reciben clicks y pueden cambiarse por otros elementos más transaccionales, o si hay algún elemento pasivo que cobra protagonismo frente al usuario (por ejemplo, icono de gastos de envío gratis que no está enlazado pero que recibe un gran número de clics porque el cliente necesita ampliar esta información). Esto nos ayudará a mejorar nuestra interfaz (UI) y hacer una experiencia cliente (UX) más fuerte y consecuente.
  • Tener un feedback sobre nuestra interfaz: La interfaz supone la forma mediante la cual interactuamos con la página web y tiene un valor crucial. Aunque este punto se encuentra presente de manera transversal en los 3 apartados anteriores, los mapas de calor nos ayudarán a identificar el grado de satisfacción de nuestra interfaz y el grado en que cumple con el cometido para el que fue diseñado. Esto resulta especialmente útil en webs que presentan un diseño fuera de los cánones (firmas de moda, webs de tendencias, etc.)
  • Usos particulares: Bajo usos particulares englobamos todos aquellos programas de objetivos que escapan a los usos generales. Por ejemplo, en webs que monetizan a partir de redes publicitarias, la ubicación de los banners frente al comportamiento del usuario establecerá una política de tarifas publicitarias, gracias al scroll map sabremos hasta qué profundidad nuestros anuncios son vistos por los visitantes.

Recursos disponibles para implementar un mapa de calor

HeatmapsExisten decenas de soluciones para instalar mapas de calor en nuestra web, pero sólo te vamos a reseñar 3: La mejor (y de pago), la que utilizaríamos en cualquier proyecto para iniciarnos (gratuita) y la de Google (que tienen que ir mejorando con el tiempo).

  • Crazyegg: Crazyegg es el rey de los mapas de calor. Bajo esta firma se encuentra Neil Patel. Se trata de una solución de pago, dispone de una suscripción gratuita para los primeros 30 días. Es una solución recomendada para proyectos de una cierta envergadura.
  • Sumome: Se trata de un formato gratuito basado en el concepto de plugin, se implementa sobre la plataforma. Tiene una más que correcta integración con WordPress, tiene plugin propio, aunque recomendamos su integración vía Google Tag Manager. No se trata de la opción más potente pero Sumome es una buena opción para una toma de datos inicial ya que cumple con creces su cometido.
  • Page Analytics (Google): Teníamos que incluir esta opción porque es la oficial de Google, pero dista mucho de lo que debería ser un mapa de calor aún. Para poder utilizarla hay que instalar una extensión en Chrome, que os dejo para instalar pulsando aquí.

En resumen

  • De manera conjunta a nuestro servicio de analítica (Google Analytics, Yandex o sistema elegido externo o interno) los mapas de calor deberían ser nuestra siguiente opción.
  • Suponen una fuente de información valiosa que no necesita de grandes conocimientos técnicos para poner en práctica e interpretar. Si además conseguimos cruzar esta información con valores analíticos (porcentaje de rebote, tiempos de estancia, salidas, embudos de conversión, etc.) conseguiremos perfilar el modo en que nuestros usuarios navegan por la web.
  • Esta información nos ayudará a mejorar nuestro CRO y en consecuencia nuestra campaña global de marketing.

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

Posted on Actualizado enn

It explains How to use different signs (+,> and ~) in CSS selector and their differences. Before starting, let us take a sample code to understand the signs.

<div id="container">           
   <p>First</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>Second</p>
   <p>Third</p>     
</div>

Space:

div#container p{
font-weight:bold;
}

It is the descendant selector. It will target all p tags within container div.

> Sign:

It will target elements which are DIRECT children of a particular element.

div#container > p {
  border: 1px solid black;
}

css selector

It will target all P element which are direct children of container div, not children of child div.

+ Sign:

It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

div + p { 
   color: green
}

css selector

It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.

~ Sign:

It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

div ~ p{
background-color:blue;
}

css selector

It will target both second and third.

Hope, you enjoyed this.

¿Cómo me conecto a una cámara con su IP y con Java?

Posted on

Hola amigos!!

Os voy a comentar algo bastante curioso, me han regalado una cámara y decidí averiguar cómo conectarme a dicha cámara empleando un lenguaje de programación, en este caso empleé uno de código libre como es Java. Así que tras comprobar que era una cámara IP y traía consigo Applets y Controles ActiveX para poder conectarnos a estas, sin embargo un gran problema es que este tipo de controles no soportan trabajar fuera del contexto de algún navegador web.

Como Java nos permite conectárnos al módulo CGI que poseen estas cámaras y obtener las imágenes de forma continua para realizar el procesamiento necesario sobre estas. Lo único que tenemos que hacer es acceder a este módulo cgi de forma continua e ir mostrando las imágenes a modo de secuencia lo cuál dará una apariencia de ser el video en sí.

Lo primero que tenemos que hacer es sobreescribir el método paintComponent de un JPanel del siguiente modo:

Captura

 

Luego agregamos este panel a un JFrame y voilà, tenemos nuestra aplicación funcionando, podemos acceder a la secuencia de imágenes cuando se quiera, procesarlas, enviarlas por correo con información adicional, almacenarlas en una base de datos… en fin, un sin número de posibilidades!!!

Es importante saber la dirección correcta del módulo cgi de nuestras cámaras ip para lo cuál debemos acceder a su página de configuración. En mi caso la dirección es la
siguiente: http://192.168.1.150/image/jpeg.cgi. De todos modos cualquier duda, la comentan.

Además si han tenido problemas con la ventana de autenticación de usuario aquí les dejo una solución:

Captura.JPG

Multi-module project in Maven

Posted on Actualizado enn

Hi guys!! There is a lot of time since my last post, I have been very busy ultimatelty so now I am going to tell you something new.

Most of the people when start to code, they usually make only one project and they put all their code in it, so I am going to tell you how to import code from another project using Maven.

Usually, when we design a web application, we do not implement all our java classes and config files in it, but we develop several jar projects that later they are included in our war file. In order to do that, we use  the multi-module projects, it means that we have a project that it is the “father”, that it contains the others, I will show you in an example.

In our example, we are going to use a xml file, called “pom.xml” which contains two projects, a web project and a jar project. The objetive is to create a war file that contains the jar project and the web project.

For starting, we create a file named “pom.xml”, over the other projects, as we can see below:

Captura
Let’s see the main pom file:

Captura

As we can see, it is a project that contains two modules. Inmediately, what we have to do is to type the dependencies to the project.
Captura
Finally, we have to add in the other two pom files, the reference to its “father” pom file:
 Captura
Multi-module and Eclipse
Now, I am going to explain the same but using the IDE Eclipse.
We select in Eclipse “File>>New>>Other>>Maven proyect”.
https://i0.wp.com/www.notodocodigo.com/wp-content/uploads/2013/04/nuevomaven.jpg

We choose the arquetipe “pom-root” to create the main project:

 

https://i2.wp.com/www.notodocodigo.com/wp-content/uploads/2013/04/pomroot.jpg

We type a name and push “Finish” button. Now, we can create the other projects.

Indicamos el proyecto padre y le damos un nombre:

 

https://i2.wp.com/www.notodocodigo.com/wp-content/uploads/2013/04/newmodule.jpg

Select the “maven-archetype-webapp” arquetipe and crete it. You can repeat the same process to create a normal java. Finally, we select the web project , “right click >>Maven>>Add Dependency”, we search for the library, typing “Free” to filter and show us the project

 

Dependencia al módulo Librería

Well, just now we have created the multi-module project, so we are going to stop a little bit in order to analyze how the projects are shown in Eclipse:

Proyecto multimódulo en eclipse

Well, in the image shown on these lines, it has been marked with a red rectangle, all three projects, images in Eclipse as normal projects and can work with them as always. If you look at “ProjectPadre”, we see that it contains two folders that have been surrounded with a green rectangle and that correspond to the files of the two children projects. So, it’s as if the projects were duplicated. In fact, the App.java file that is shown in the image with an arrow is the same, it does not matter to open it by double clicking on one site and another.

Well, this is so, because Maven needs the projects to be physically arranged hierarchically in the directory and Eclipse works with all projects on the same level.

 

Inheriting settings

The configuration is inherited from the parent pom. For example, to compile all projects with java 6, just add this in the parent pom:

 

Captura
Package the multi-module project


We select Run As … >> Run Configuration and we create a “Maven Build” configuration, we make sure to put the “Base directory” correctly and launch the next execution.

https://i1.wp.com/www.notodocodigo.com/wp-content/uploads/2013/04/ejecmulti.jpg

This will create the Site of the project father and the two children. And it will create a file “ProjectWeb.war”. If we open that war to see its content, we check that it contains the project “Libreria” in its “lib” folder. Below these lines we can see a detail of the war file.

https://i0.wp.com/www.notodocodigo.com/wp-content/uploads/2013/04/detallewar.jpg

How to store data in your web page

Posted on Actualizado enn

Hi everybody!!, I was here studying how to code an arduino board, but as you all know I love coding, and I stated to make a website as a simple exercise of entertaiment.

One of most used javascripts frameworks is AngularJs, and I started to learnt it. I made a post about these frameworks some months ago, if you want you can look it up in the “Publicaciones” tab.

I was doing this tutorial and I thought, how could I store data in the web page? And I started to investigate it, and I was very surprised when I read this web page, so it is possible, and now I am going to show you all how to do that:

Get Started

(1) You can install angular-local-storage using 3 different ways:
Git: clone & build this repository
Bower:

$ bower install angular-local-storage –save

npm:

$ npm install angular-local-storage

(2) Include angular-local-storage.js (or angular-local-storage.min.js) from the dist directory in your index.html, after including Angular itself.

(3) Add 'LocalStorageModule' to your main module’s list of dependencies.

When you’re done, your setup should look similar to the following:

<!doctype html>
<html ng-app=myApp>
<head>
 
</head>
<body>
    …
    <script src=//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js></script> 
    <script src=bower_components/js/angular-local-storage.min.js></script> 
    …
    <script>
        var myApp = angular.module(myApp, [LocalStorageModule]);
 
    </script> 
    …
</body>
</html>

Configuration

setPrefix

You could set a prefix to avoid overwriting any local storage variables from the rest of your app
Default prefix: ls.<your-key>

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix(yourAppName);
});

setStorageType

You could change web storage type to localStorage or sessionStorage
Default storage: localStorage

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setStorageType(sessionStorage);
});

setDefaultToCookie

If localStorage is not supported, the library will default to cookies instead. This behavior can be disabled.
Default: true

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setDefaultToCookie(false);
});

setStorageCookie

Set cookie options (usually in case of fallback)
expiry: number of days before cookies expire (0 = session cookie). default: 30
path: the web path the cookie represents. default: '/'
secure: whether to store cookies as secure. default: false

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setStorageCookie(45, <path>, false);
});

setStorageCookieDomain

Set the cookie domain, since this runs inside a the config() block, only providers and constants can be injected. As a result, $location service can’t be used here, use a hardcoded string or window.location.
No default value

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setStorageCookieDomain(<domain>);
});

For local testing (when you are testing on localhost) set the domain to an empty string ”. Setting the domain to ‘localhost’ will not work on all browsers (eg. Chrome) since some browsers only allow you to set domain cookies for registry controlled domains, i.e. something ending in .com or so, but not IPs or intranet hostnames like localhost.

setNotify

Configure whether events should be broadcasted on $rootScope for each of the following actions:
setItem , default: true, event “LocalStorageModule.notification.setitem”
removeItem , default: false, event “LocalStorageModule.notification.removeitem”

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setNotify(true, true);
});

Configuration Example

Using all together

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix(myApp)
    .setStorageType(sessionStorage)
    .setNotify(true, true)
});

API Documentation

isSupported

Checks if the browser support the current storage type(e.g: localStorage, sessionStorage). Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  if(localStorageService.isSupported) {
    //… 
  }
  //… 
});

getStorageType

Returns: String

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  var storageType = localStorageService.getStorageType(); //e.g localStorage 
  //… 
});

You can also dynamically change storage type by passing the storage type as the last parameter for any of the API calls. For example: localStorageService.set(key, val, "sessionStorage"); ###set Directly adds a value to local storage.
If local storage is not supported, use cookies instead.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function submit(key, val) {
   return localStorageService.set(key, val);
  }
  //… 
});

get

Directly get a value from local storage.
If local storage is not supported, use cookies instead.
Returns: value from local storage

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function getItem(key) {
   return localStorageService.get(key);
  }
  //… 
});

keys

Return array of keys for local storage, ignore keys that not owned.
Returns: value from local storage

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  var lsKeys = localStorageService.keys();
  //… 
});

remove

Remove an item(s) from local storage by key.
If local storage is not supported, use cookies instead.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function removeItem(key) {
   return localStorageService.remove(key);
  }
  //… 
  function removeItems(key1, key2, key3) {
   return localStorageService.remove(key1, key2, key3);
  }
});

clearAll

Remove all data for this app from local storage.
If local storage is not supported, use cookies instead.
Note: Optionally takes a regular expression string and removes matching.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function clearNumbers(key) {
   return localStorageService.clearAll(/^\d+$/);
  }
  //… 
  function clearAll() {
   return localStorageService.clearAll();
  }
});

bind

Bind $scope key to localStorageService. Usage: localStorageService.bind(scope, property, value[optional], key[optional]) key: The corresponding key used in local storage Returns: deregistration function for this listener.

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  localStorageService.set(property, oldValue);
  $scope.unbind = localStorageService.bind($scope, property);
 
  //Test Changes 
  $scope.update = function(val) {
    $scope.property = val;
    $timeout(function() {
      alert(localStorage value:  + localStorageService.get(property));
    });
  }
  //… 
});
<div ng-controller=MainCtrl>
  <p>{{property}}</p>
  <input type=text ng-model=lsValue/>
  <button ng-click=update(lsValue)>update</button>
  <button ng-click=unbind()>unbind</button>
</div>

deriveKey

Return the derive key Returns String

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  localStorageService.set(property, oldValue);
  //Test Result 
  console.log(localStorageService.deriveKey(property)); // ls.property 
  //… 
});

length

Return localStorageService.length, ignore keys that not owned. Returns Number

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  var lsLength = localStorageService.length(); // e.g: 7 
  //… 
});

Cookie

Deal with browser’s cookies directly. ##cookie.isSupported Checks if cookies are enabled in the browser. Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  if(localStorageService.cookie.isSupported) {
    //… 
  }
  //… 
});

cookie.set

Directly adds a value to cookies.
Note: Typically used as a fallback if local storage is not supported.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function submit(key, val) {
   return localStorageService.cookie.set(key, val);
  }
  //… 
});

Cookie Expiry Pass a third argument to specify number of days to expiry

    localStorageService.cookie.set(key,val,10)

sets a cookie that expires in 10 days. Secure Cookie Pass a fourth argument to set the cookie as secure W3C

    localStorageService.cookie.set(key,val,null,false)

sets a cookie that is secure. ###cookie.get Directly get a value from a cookie.
Returns: value from local storage

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function getItem(key) {
   return localStorageService.cookie.get(key);
  }
  //… 
});

cookie.remove

Remove directly value from a cookie.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function removeItem(key) {
   return localStorageService.cookie.remove(key);
  }
  //… 
});

cookie.clearAll

Remove all data for this app from cookie.
Returns: Boolean

myApp.controller(MainCtrl, function($scope, localStorageService) {
  //… 
  function clearAll() {
   return localStorageService.cookie.clearAll();
  }
});

Check out the full demo at http://gregpike.net/demos/angular-local-storage/demo.html

Development:

  • Don’t forget about tests.
  • If you’re planning to add some feature please create an issue before.

Clone the project:

$ git clone https://github.com/<your-repo>/angular-local-storage.git
$ npm install
$ bower install

Run the tests:

$ grunt test

Deploy:
Run the build task, update version before(bower,package)

$ npm version patch|minor|major
$ grunt dist
$ git commit [message]
$ git push origin master –tags