Cómo exponer una DLL de .NET para usarla con Visual Basic, VBScript y ASP Clásico

28/12/2017
Artículo original

Logo de ActiveX: hasta el logo era horribleAunque la plataforma .NET lleva ya más de 16 años entre nosotros, la realidad es que hay muchas ocasiones en las que debemos hacer uso de otro tipo de tecnologías más antiguas y menos potentes, basadas en el vetusto estándar COM (también conocido como ActiveX). Por ejemplo, si queremos programar Office debemos utilizar VBA, para automatizar Windows es muy sencillo utilizar scripts escritos con Windows Scripting Host (que por debajo utiliza VBScript o JScript), y por supuesto, muchos tenemos que mantener todavía aplicaciones escritas con Visual Basic 6 o con ASP Clásico (ASP 3.0).

Creo que a la mayoría de los que llevamos muchos (pero que muchos) años en este mundillo, estas tecnologías antiguas nos siguen gustando mucho a pesar de sus obvias limitaciones. Sí, sin duda eran más limitadas, pero eran mucho más sencillas de aprender y utilizar y con poco trabajo podías hacer muchas cosas. Y si no me crees pregúntale a alguien que haya trabajado con Visual FoxPro: aún hoy en día los hay a miles que beben los vientos por esas herramientas.

El caso es que una gran parte de las limitaciones de estas herramientas tienen que ver con que se quedaron congeladas en el tiempo, sin evolucionar para dar soporte a muchos estándares que aparecieron más adelante, como SOAP (ya en decadencia), JSON, servicios REST y cosas por el estilo. Tampoco permiten hacer ciertas "virguerías" que son muy sencillas en plataformas modernas como .NET: multi-subproceso, async/await, manejo de datos en memoria... Y por supuesto la gran mayoría de proyectos Open Source modernos quedan fuera de su alcance.

Para estos casos en los que una aplicación antigua debe soportar características modernas, una estupenda opción consiste en escribir la funcionalidad con una herramienta actual y exponerla hacia estas tecnologías antiguas a través de COM/ActiveX.

Sí, COM era lo peor, y si no sabes lo que es el "DLL Hell" suerte para ti que no lo viviste. Pero sigue siendo una solución universal para componentes bajo Windows, y todas las tecnologías antiguas lo soportan, ¡incluso las de hace más de 20 o 25 años!

La web de Microsoft tiene una detallada documentación sobre cómo hacerlo, pero buena suerte para conseguirlo usando esos contenidos. Son liosos, tediosos y sin ningún ejemplo real. Realmente es complicado sacar algo en limpio de ellos. En Google hay mucha información, pero la inmensa mayoría está anticuada o es incompleta, por lo que buena suerte con eso también.

En realidad, conseguirlo es bastante sencillo si se sabe cómo, e implica unos pocos conceptos y pasos a seguir. En este artículo voy a explicar cómo crear un componente COM/ActiveX sencillo a partir de código .NET escrito con C#, y luego veremos cómo utilizarlo apropiadamente.

Vamos a ello...

Definir un componente COM o ActiveX con C

Abre Visual Studio (yo usaré VS2017) y crea un nuevo proyecto C# de tipo "Biblioteca de clases":

Diálogo de nuevo proyecto

.NET dispone de un espacio de nombres especializado en la compatibilidad con COM y ActiveX llamado InteropServices.

Por lo tanto, lo primero que debes hacer es añadir en la parte de arriba de tu archivo de clases la línea:

using System.Runtime.InteropServices;

para que reconozca automáticamente todas las clases de este espacio de nombres y las puedas usar con facilidad, sin escribir su nombre completo.

Definir una interfaz

Debido al funcionamiento interno de COM.aspx), toda la funcionalidad que vayas a exponer hacia el exterior deberás hacerlo a través de interfaces de programación. Por ello, antes de nada debes pensar bien qué métodos quieres exponer hacia el exterior a través de COM y crear una interfaz que los defina. Por ejemplo, supongamos que quieres exponer un método llamado HacerAlgoComplejo que no devuelve nada y que toma como parámetros una cadena y un número entero. Deberías definir una interfaz (con el nombre que quieras) de forma análoga a esta:

public interface IMiObjeto
{
    void HacerAlgoComplejo(string a, int b);
}

Deberás definir tantas interfaces como objetos quieras exponer desde tu componente final.

Definir la clase correspondiente

Ahora que ya tienes la interfaz con todos los métodos que quieras exponer, debes crear una clase que la implemente. Para ello usarás la sintaxis convencional que consiste en indicar la interfaz a continuación del nombre de clase, separándola con dos puntos (esto es como se hace en C# siempre, no es nada particular de COM).

Es decir, tu clase quedaría similar a:

public class MiObjeto : IMiObjeto
{
    public MiObjeto()  {}

    public void HacerAlgoComplejo(string a, int b)
    {
        //El código que sea va aquí dentro
    }
}

Fíjate en dos cosas:

  1. He definido explícitamente un constructor sin parámetros, que en realidad no hace nada pues su código está vacío. Esto es necesario porque para instanciar un objeto COM necesitas ese constructor y aparentemente el que crea implícitamente el compilador no nos sirve. No cuesta nada: es una línea.
  2. Al contrario de lo que verás escrito por ahí en muchos sitios, no es necesario implementar la interfaz explícitamente. En este fragmento yo no lo he hecho. Puedes hacerlo poniendo IMiObjeto.HacerAlgoComplejo, pero entonces no le podrás poner el modificador de ámbito public delante lo cual te dificulta poder usar la misma clase desde .NET también. Con esto la podrás usar en .NET y con COM simultáneamente.

Además deberás tener en cuenta algunas reglas mínimas que debe cumplir tu clase para que sea compatible:

  • Deberá ser pública, al igual que todos los miembros que quieras exponer
  • No podrá ser abstracta ni estática
  • Todos los tipos que se devuelvan o se usen como parámetros deberán ser públicos
  • Si la clase es derivada de otra que a su vez es también derivada de otra y así sucesivamente, debes saber que al exponerla a COM todo esto se elimina y queda una única herencia, "aplanada" de las demás.
  • Mucho ojo con usar tipos muy especializados, como clases genéricas o cosas específicas de .NET, ya que no se soportarán.
  • No podrás usar parámetros opcionales ni valores por defecto

Mientras lo que expongas sea algo "normal" (un mínimo común denominador) no tendrás problemas.

Adornar la interfaz y la clase con atributos

Vale, ahora bien lo importante y específico para COM/ActiveX. Debes indicar al compilador cómo exponer la clase hacia el exterior. Para conseguirlo debes utilizar ciertos atributos especiales que vienen en el espacio de nombres que colocamos en el primer paso.

Generar y asignar GUIDs

Empecemos por la identificación. Todas las clases e interfaces de COM deben identificarse de manera única para evitar conflictos. Para ello se utilian GUIDs, que son identificadores universales. Debes generar uno para cada interfaz y clase y asignárselos.

Para generar un GUID Visual Studio nos proporciona una utilidad llamada newguid.exe que puedes encontrar en la ruta C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\Tools\ o equivalente según la versión de Visual Studio que utilices.

Nota: en anteriores versiones de Visual Studio disponíamos de acceso directo a esta herramienta desde el menú "Herramientas" del entorno. Ahora ya no. De todos modos es muy fácil de solucionar usando el menú Tools>External Tools... y agregando ese comando:

Añadir herramienta

A partir de ese momento dispondrás de un acceso directo en el menú de herramientas (este es el mío):

Nueva herramienta

Una vez que lances la herramienta deberás generar al menos dos nuevos GUID diferentes, uno par ala interfaz y otro para la clase, usando el tipo "Registry Format"

Generador de GUIDs

Con la tecla Copy ya los puedes copiar a Visual Studio listos para usar. Debes asignar uno a la Interfaz y otro a la clase usando el atributo Guid, así:

[Guid({A8E38597-0E0B-45F3-A264-6E0D9CC49598})]
public interface IMiObjeto

....
[Guid({0E234FAE-F5D2-4DA5-A539-628864F28471})]
public class MiObjeto : IMiObjeto

....

Vale, ahora que ya tenemos los GUID debemos asignarle el resto de atributos mínimos que necesitamos. Aunque algunos tienen un valor por defecto yo prefiero asignarlos explícitamente para no dejar lugar a dudas sobre lo que estoy haciendo. Serían en concreto estos:

[Guid({A8E38597-0E0B-45F3-A264-6E0D9CC49598})]
[InterfaceType(ComInterfaceType.InterfaceIsDual)]
[ComVisible(true)]
public interface IMiObjeto

....
[Guid({0E234FAE-F5D2-4DA5-A539-628864F28471})]
[ClassInterface(ClassInterfaceType.None)]
[ComVisible(true)]
[ProgId("MiLib.MiObjeto")]
public class MiObjeto : IMiObjeto

....

En el caso de la interfaz le estamos diciendo que implemente una interfaz dual de modo que puede ser utilizada tanto a través de early binding (mediante IUnknown añadiendo una referencia antes de usarla, como lo hace VB6 o VBA de Office) como late binding (que es lo que usan VBScript o ASP clásico, por ejemplo). De todos modos aquí tienes todos los valores posibles.aspx), por si te resultaran útiles.

Además le estamos diciendo que esa interfaz debe ser visible para COM. Si no le ponemos explícitamente este atributo ConVisible no se exportará y tendremos un problema.

En el caso de la clase además se usan dos atributos adicionales:

  • ClassInterface: que indica el tipo de interfaz de clase que se debe generar para COM. En este caso indicamos el valor None porque la interfaz necesaria la hemos generado nosotros ya. Los valores posibles y sus explicaciones los tienes en la MSDN.aspx).
  • ProgID: este es un atributo clave ya que determina la manera en la que vamos a instanciar esta clase desde COM cuando hacemos early binding, es decir, desde un entorno de scripting como VBS o ASP 3.0. Como ves se le pasa una cadena con al menos dos partes separadas por puntos: el nombre de la biblioteca y el nombre de la clase, en nuestro ejemplo: MiLib.MiObjeto.

Una última cosa que debemos hacer es asignarle identificadores en la interfaz a los diferentes métodos que tengamos (no así a las propiedades) para que se identifiquen de manera única y podamos utilizarlas, para lo cual se usa el atributo DispId (de "Dispatch Id"). Este atributo toma un número único que puedes er cualquiera. Yo suelo numerarlas desde el 1 en adelante. Con esto nuestro código de ejemplo quedaría:

[Guid({A8E38597-0E0B-45F3-A264-6E0D9CC49598})]
[InterfaceType(ComInterfaceType.InterfaceIsDual)]
[ComVisible(true)]
public interface IMiObjeto
{
     [DispId(1)]
    void HacerAlgoComplejo(string a, int b);
}

[Guid({0E234FAE-F5D2-4DA5-A539-628864F28471})]
[ClassInterface(ClassInterfaceType.None)]
[ComVisible(true)]
[ProgId("MiLib.MiObjeto")]
public class MiObjeto : IMiObjeto
{
    public MiObjeto()  {}

    public void HacerAlgoComplejo(string a, int b)
    {
        //El código que sea va aquí dentro
    }
}

dentro del espacio de nombres que le corresponda.

¡Listo! Con esto tenemos ya lo que necesitamos para generar el objeto y podemos compilar nuestra biblioteca. Hazlo y continuamos en un minuto viendo cómo registrarla y usarla. pero antes...

¿Por qué no has usado la opción "Register for COM interop"?

En la propiedades de un proyecto de biblioteca de clases de Visual Studio existe una opción específica llamada de este modo:

Opción para COM en compilación

Lo que hace esta opción es que se registra automáticamente el componente en el registro de Windows en cada compilación (des-registrándolo antes si había una versión previa). Puede ser útil si quieres probarlo desde un script externo (un .vbs por ejemplo) mientras desarrollas, pero teniendo en cuenta que los tests los harás seguramente en .NET y que el funcionamiento es exactamente el mismo, personalmente creo que no merece la pena en absoluto. A la hora de registrarlo en cualquier otra máquina que no sea la tuya tienes que hacerlo a mano, por lo que mejor que aprendas a hacerlo así de todos modos. Y es lo que vamos a ver ahora mismo.

Registrar el componente para poder usarlo

Para poder utilizar un componente COM/ActiveX es necesario registrarlo en el sistema. No llega con copiarlo y listo, como pasa con .NET. Hoy en día no nos damos cuenta de la gran ventaja que supone, pero en su momento fue algo revolucionario ;-)

Para registrar el componente debemos utilizar una herramienta de línea de comandos que viene con la plataforma .NET, así que la tendrás ya disponible en cualquier máquina donde lo vayas a instalar. No es necesario descargarse nada, ya que .NET viene con el sistema operativo desde hace más de una década (eso sí, actualízalo a la última versión si es la que has utilizado para compilar). La herramienta se llama RegAsm.exe y la encontrarás en la carpeta C:\Windows\Microsoft.NET\Framework64\v4.0.30319 o similar.

Nota: si tu sistema es de 32bits deberás usar la carpeta C:\Windows\Microsoft.NET\Framework\v4.0.30319.

Abre una línea de comandos como administrador y escribe:

RegAsm.exe "C:\Utilidades\MiLib.dll" /tlb:MiLib.tlb /codebase

poniendo primero la ruta a donde hayas copiado la DLL que vas a exponer e indicando en el parámetro /tlb un nombre cualquiera para el archivo .tlb de definición de interfaces COM que se genera y que es el que se utiliza para registrar la biblioteca.

El parámetro /codebase se utiliza para indicarle al programa que debe registrar la DLL incluso aunque no esté firmada digitalmente. Se quejará pero lo hará igualmente. El hecho de que te diga ue es mejor firmarla se debe a que si por cualquier motivo debes instalar varias versiones de la misma DLL, tenerla firmada te permite introducirla en la GAC del sistema (la caché global de ensamblados .NET) y facilita la gstión de versiones, algo que ayuda mucho con el "DLL Hell" del que hablábamos al principio. Si tu biblioteca está bajo tu control y no la vas a distribuir como parte de un producto no es necesario. Simplemente desinstálala antes de copiar e instalar una nueva versión y listo. Aquí te dejo instrucciones para firmarla digitalmente y para meterla en la GAC.

Bien, lo anterior habrá registrado correctamente tu ensamblado y podrás utilizarlo desde cualquier entorno compatible con COM/ActiveX, como veremos a continuación.

Para desinstalarlo en el futuro solo debes hacer:

RegAsm.exe /unregister "C:\Utilidades\MiLib.dll"

Usarlo desde VBA o VB6

Para poder usarlo desde estos entornos lo más habitual es agregar una referencia explícita en las propiedades del proyecto (early binding), que es más eficiente. Para ello debemos usar el diálogo de agregar referencia que tienen estos entornos. Vamos a verlo en Office (concretamente yo he usado Word, pero valdría cualquier otra aplicación de la Suite).

Abre el editor de Visual Basic for Applications pulsando ALT+F11 o yendo a la pestaña de "Developer". Ahora vete al menú Tools y elige la primera opción para gestionar las referencias del proyecto:

Diálogo de referencias de VBA

En VB6 es idéntico. En el diálogo localiza tu ensamblado en la lista y marca el check que tiene a la izquierda. Ya está listo para usar como cualquier otro objeto. Puedes comprobarlo sacando el examinador de objetos (tecla F2) y buscando tu clase en la lista. Podrás ver sus métodos y propiedades.

Usarlo desde WSH o ASP Clásico

Desde entornos de scripting es incluso más fácil (aunque menos eficiente) ya que lo único que tienes que hacer es instanciar un nuevo objeto usando CreateObject. Por ejemplo en WSH crea un nuevo archivo de texto con extensión .vbs y escribe:

Dim miObj
Set miObj = WScript.CreateObject("MiLib.MiObjeto")

miObj.HacerAlgoComplejo "Primer parámetro", 1 

WScript.Echo "¡¡La llamada ha funcionado!!"

En ASP clásico sería lo mismo solo que usarías Server.CreateObject.

Inciso: si quieres aprender a sacarle todo el jugo a .NET nada mejor que empezar con el curso de "Fundamentos de Programación con C# y la plataforma .NET" de campusMVP.

En resumen

Mantener aplicaciones antiguas que tienen limitaciones a la hora de utilizar tecnologías modernas es algo que todos, tarde o temprano, nos vemos obligados a hacer. Por suerte cuando Microsoft lanzó .NET en 2001 pensó (por la cuenta que le traía) en cómo facilitar la interoperabilidad entre lo viejo y lo nuevo.

En este largo artículo hemos repasado cómo podemos crear bibliotecas de clases en C# que además de poder ser reutilizadas en .NET podremos exponer también como objetos de tipo COM/ActiveX susceptibles de ser utilizados en lenguajes y entornos antiguos. De este modo podremos traer funcionalidades complejas y/o modernas a nuestras aplicaciones "Legacy", por lo que hemos abierto un mundo de nuevas posibilidades.

La mayor parte de la información que existe sobre estas técnicas es antigua y poco actualizada por lo que resulta complicado ponerlo en marcha. Pero en el fondo es muy sencillo si se sabe exactamente cómo proceder, que es lo que hemos visto en este documento.

¡Espero que te resulte útil!

15 bibliotecas JavaScript que no deberías perder de vista

27/12/2017
Artículo original

Aunque programar todo por uno mismo provoca una gran satisfacción, es conveniente superar el síndrome del "No inventado aquí" y sacar partido al código que tan generosamente han donado al bien común otros desarrolladores.

En el mundo del desarrollo web Front-End existen infinidad de bibliotecas (mal llamadas "librerías") que nos permiten dotar de potentes funcionalidades a nuestras aplicaciones, sin apenas esfuerzo, mejorando el diseño, la funcionalidad o la experiencia de usuario.

Existen miles de bibliotecas JavaScript. Hay vida más allá de jQuery y React, bibliotecas con las que ya estarás familiarizado y que están muy contrastadas. Aquí nos vamos a centrar en otras opciones y las vamos a agrupar por usos.

Evidentemente en este artículo no vamos a revisarlas todas, e incluso seremos injustos con alguna que debería figurar en esta lista. Hemos descartado muchas porque es casi materialmente imposible comentarlas todas.

Si consideras que hay alguna biblioteca que debe figurar aquí, te invitamos a que la incluyas en la sección de comentarios y que nos indiques por qué te gusta y para qué la usas.

Sin más consideraciones, aquí va una lista que para nada pretende ser una lista exhaustiva ni completa, pero en la que seguro que encuentras alguna "perla" que desconocías y que te hará la vida más fácil.

Bibliotecas JavaScript para gráficos y tablas

- Chart.js

Logo de ChartJS

Chart.js es una solución sencilla de código abierto para pequeños proyectos y para aquellos casos en los que necesites crear gráficos de forma rápida. Incorpora 8 tipos de gráficos por defecto que luego puedes combinar entre sí como quieras. Además viene con muy buenas opciones de animación de serie.

Esta biblioteca JavaScript para hacer representaciones gráficas es muy recomendable si lo que buscas es configurar un sistema sencillo, flexibilidad a la hora de trabajar y una documentación exhaustiva. Como contrapartida decir que su funcionalidad es más bien limitada. Chartist.js incorpora una funcionalidad similar aunque está basado en SVG y no en HTML5 canvas como Chartjs.

En resumen, muchas personas recomiendan esta biblioteca para los gráficos de datos porque es fácil de configurar, fácil de personalizar y viene con una de las mejores documentaciones entre los proyectos de código abierto de este estilo.

- D3.js

Logo de D3.js

D3.js (las siglas de Data-Driven Documents) es considerada como una de las bibliotecas de visualización JavaScript de código abierto más potentes. Su ecosistema incluye docenas de plugins y otras bibliotecas que se han creado sobre D3js. Por otro lado, cuenta con una comunidad muy activa y mucha documentación que te ayudará a empezar rápido.

D3 cumple con los estándares web de W3C y soporta prácticamente todos los navegadores modernos. A pesar de que no incluye ningún tipo de gráfico prefabricado de serie, ofrece muchísimos ejemplos y funcionalidades muy útiles del tipo selecciones "Entrar y Salir", un proceso de depuración de errores sencillo y transiciones potentes.

La industria Big Data está en pleno auge y como consecuencia, en paralelo, la visualización de datos crece en importancia. Existen muchísimas bibliotecas para hacer gráficas pero pocas destacan tanto como D3.js. Funciona con elementos SVG y canvas para renderizar gráficos, tablas y visualizaciones dinámicas en la web.

Su uso es totalmente gratuito. Supone una forma muy avanzada de renderizar datos en el navegador y es muy recomendable echarle un vistazo para entender bien todo lo que ofrece.

- Google Charts

Logo de Google

Google Charts te permite crear cualquier visualización: desde un gráfico de línea sencillo hasta complejos mapas arbolados. Incorpora una galería de gráficos ya hechos, varias herramientas de datos y muchas opciones de personalización. Basando los gráficos en HTML5 y SVG, esta librería garantiza compatibilidad multi-navegador y multi-plataforma. Para antiguas versiones de IE incluye VML.

Gracias a su documentación detallada, los comentarios en el código e instrucciones paso-a-paso, la herramienta Google Charts puede ser una buena forma de iniciarse para cualquier persona que quiera crear gráficos con JavaScript. No obstante, dado que los archivos se suben desde los servidores de Google, tu app JavaScript web tiene que estar online para poder ver las gráficas.

Lleva un tiempo medio "aparcada" por Google, pero sigue siendo una excelente opción, fácil de usar, potente y compatible con casi todo.

Bibliotecas JavaScript relacionadas con aplicaciones (MVC, MVVM)

En esta categoría entrarían Angular, React o Ember, pero como hemos dicho, vamos a ver otras tal vez menos conocidas pero igualmente interesantes.

- Vue.js

Logo de Vue.js

En el contexto de frameworks front-end normalmente te encuentras ante dos opciones destacadas: Angular y React. Vue.js es otra opción que cada vez es más popular, habiendo explotado en el pasado año 2017, y que va ganando terreno a paso acelerado.

Vue es un framework JavaScript de front-end basado en el patrón MVVM (modelo-vista-vistamodelo), alejándose de la típica arquitectura MVC (modelo-vista-controlador). Es algo engorroso a primera vista, pero la sintaxis es fácil una vez que le pillas el truco. Es una elección viable dentro de la guerra de frameworks de front-end, y merece la pena seguirle la pista.

- Knockout

Knockout

¿Cómo? ¿Knockout a estas alturas? Pues sí... Aunque el proyecto fue tremendamente popular hace unos años y fue perdiendo terreno últimamente debido al "hype" de Angular o React, sigue siendo una excelente opción para trabajar con interfaces de usuario enlazadas a datos.

Knockout es una implementación en JavaScript del patrón MVVM (modelo-vista-vistamodelo), con plantillas. Los principios subyacentes por lo tanto son:

  • Separación clara entre el modelo de dominio, los componentes de la vista y los datos que se mostrarán.
  • La presencia de una capa definida de código especializado para gestionar las relaciones entre los componentes de la vista.

Esto último potencia las funcionalidades de gestión de eventos nativas del lenguaje JavaScript.

Dichas funcionalidades racionalizan y simplifican la especificación de relaciones complejas entre componentes de la vista, que a cambio muestran la información de manera más responsiva y enriquecen la experiencia de usuario.

Knockout se creó y se mantiene como proyecto de código abierto por Steve Sanderson, un empleado de Microsoft, pero como ha dicho el propio creador cuando se unió a la empresa "esto no es un producto de Microsoft".

Bibliotecas JavaScript para animación, 3D y realidad virtual

- Three.js

Logo de Three.js

Es una locura ver lo mucho que ha crecido la animación 3D desde los años 80 hasta día de hoy. Todos estamos familiarizados con películas de animación en 3D, pero la animación web va un paso más allá. Afortunadamente tenemos bibliotecas como Three.js abriendo camino para la animación 3D en la web.

En su web dispones de acceso a decenas de ejemplos de Three.js en acción. Puedes crear fondos sensibles al movimiento, gráficos 3D personalizados, y elementos de interfaz dinámicos que usan efectos de animación 3D. Si tienes la motivación y el empuje suficiente, podrás crear cualquier efecto 3D con esta biblioteca.

Es tal vez el mejor recurso para movimiento 3D en la web, y viene con muchos ejemplos para ayudarte a arrancar.

- Create.js

logo Create.js

CreateJS no es una única biblioteca individual, sino que es un conjunto de bibliotecas diseñadas para cumplir con diferentes fines. Por ejemplo, Easel.js funciona con elementos HTML5 canvas mientras que Tweet.js te ayuda a crear interpolación de movimientos personalizada y animaciones para la web.

Cada biblioteca dentro de esta colección sirve para hacer algo distinto, y proporciona funcionalidades modernas compatibles con los navegadores más populares. La pega es que la mayoría de estas bibliotecas JavaScript al estar tan especializadas, solo sirven para páginas web que necesiten una funcionalidad muy específica o especial. Lo mejor es que veas las demos que ofrece en la portada y que leas si página de iniciación para ver qué te puede ofrecer. Hay cosas muy interesantes...

- GSAP - Greensock

logo GSAP

GSAP o GreenSock Animation Platform es una solución de animación avanzada y que es utilizada por muchas grandes empresas en todo el mundo para crear asombrosas animaciones interactivas sin mucho engorro. Según sus propios datos, es utilizada por más de 2 millones de webs y entre sus clientes están grandes firmas como Ford, Nike, Adobe, Microsoft, Samsung o Google entre otras.

GSAP es sumamente compatible tanto con navegadores antiguos como con los nuevos, y también móviles. Entre las características principales están: compatibilidad SVG, capacidad de convertir cualquier elemento DOM en arrastrable, girable, desplazable a golpe de flick, y rápido rendimiento. Incorpora además rotación direccional, transfomación 3D, arquitectura modular para carga rápida y cero dependencias, entre otras muchas cosas.

- Bounce.js

logo bounce.js

Bounce.js es una biblioteca de animación JavaScript muy cuidada que permite crear atractivas animaciones sobre CSS3 de forma extremadamente sencilla. Viene con 10 configuraciones de serie como girar, zumbar, gelatina, corre-caminos y otros, para generar fluidas animaciones para cualquier diseño web o proyecto de personalización.

Esta biblioteca es totalmente gratuita y tiene licencia MIT. Es una buena opción en aquellos casos en los que no necesitas una larga lista de tipos de animación, o estás buscando experimentar algo nuevo o si quieres iniciarte con la animación en tus apps o diseños.

- Animate.css

logo Animate

Animate.css es una biblioteca CSS (¡sin JavaScript!). Es muy fluida y te permite crear animaciones esmeradas para los objetos seleccionados. Ofrece 50 configuraciones de serie que se pueden aplicar a textos, formularios e imágenes usando CSS3. Debido a su pequeño tamaño de archivo, que es multi-navegador y su facilidad de uso, puede encajar perfectamente con proyectos móviles, páginas de inicio y demás sitios en los que la carga rápida y el rendimiento sean importantes.

- WEBVR

logo webvr

Con todo el ruido que ha introducido en el sector todo lo relacionado con la realidad virtual y con todas las start-ups y desarrolladores trabajando en torno a la misma, no sorprende toparse con WebVR, una API JavaScript hecha para realidad virtual en navegadores e impulsada por Mozilla.

Deriva de los dispositivos más populares de RV como Oculus Rift y Vive, pero aún está en unas fases relativamente tempranas.

Si sientes curiosidad y quieres saber más sobre este proyecto puedes ir a la web oficial o visitar la página MozVR para obtener más información.

Bibliotecas JavaScript para fecha y hora

- Moment.js

Logo de Moment.js

Moment.js es una biblioteca para fechas simple y ligera que hace que analizar, manipular y formatear la fecha y hora se pueda hacer de forma sencilla y precisa. Es integrable con Twitter, es multi-idioma y tiene en cuenta todos los aspectos de fecha/hora a nivel internacional como calendarios, zonas horarias, etc... mediante una serie de plugins.

Lo más importante es que elimina la necesidad usar el objeto fecha nativo de JavaScript, y facilita el proceso de análisis de datos complejos, reduciendo ostensiblemente la cantidad de código necesario para implementarlo.

- Date-fns

Logo de Date-fns

Date-fns es un conjunto de herramientas avanzadas para la manipulación de la hora y la fecha en navegadores y en Node.js en el lado servidor.

Ofrece más de 140 funcionalidades útiles que son fácilmente accesibles vía API. Gracias a su estructura modular te permite elegir solo aquellas funciones que necesitas para cada proyecto.

Otras bibliotecas JavaScript

- Math.js

logo mathjs

Math.js es una biblioteca de código abierto para navegadores, y los motores de Node.js. Viene con numerosas funciones y constantes, analizador de expresiones flexible, y soporte para grandes y números complejos, unidades, cadenas de caracteres, fracciones, matrices y computación simbólica.

- Handsontable

logo handsontable

Handsontable es una biblioteca de hoja de cálculo JavaScript libre de engorros que permite crear aplicaciones web de primer nivel. Se puede ampliar y editar fácilmente con plugins de personalización.

Ofrece una curva de aprendizaje corta y sencilla, una estructura modular muy práctica y una comunidad online muy activa. Esta biblioteca incluye 30 funcionalidades en su versión gratuita y más de una decena adicional en su versión de pago, para profesionales. Handsontable se usa para informes de ventas, planificación de trabajo, fusión de datos, edición de bbdd y otros muchos campos de aplicación.

Por qué elimino el perfil de Facebook

26/12/2017
Artículo original

Hace ya muchos años que decidí borrar mi cuenta personal de Facebook, pero aún seguía manteniendo la del blog. Últimamente me he vuelto aún más consciente de los problemas de privacidad a los que nos enfrentamos estos días, y tras leer noticia tras noticia he decidido eliminar todo rastro de Facebook en mi vida.

Imagino que sabes que los botones de compartir en Facebook, “Me gusta” etc, son bien conocidos por rastrear a los usuarios mientras navegan, por ello nunca los he usado en este blog, uso HTML puro en los botones de compartir en todas las redes sociales.

Hace unos meses eliminé Google Analytics para intentar ser más respetuoso con tu privacidad, aunque aún mantengo un único anuncio (Estoy buscando alternativas). Este es otro paso hacia respetar un poco más tu privacidad. Aunque elimino Facebook, puedes seguir al tanto de nuevas publicaciones en el blog en las siguientes redes sociales:

Si estás interesado en saber más sobre los peligros de Facebook, aquí dejo una lista de recursos para los interesados en conocer el asunto:

Todo sobre los enlaces en HTML

20/12/2017
Artículo original

Siempre me ha parecido que, una de las cosas más agradecidas de los documentos HTML de la web, aparte de poder insertar imágenes o vídeos, está en la posibilidad de crear hipervínculos o enlaces entre ellos.

De hecho, creo que esta es una de las características que más puede emocionar y motivar a los novatos que jamás han tocado código ni con un palo y que deciden adentrarse en el mundo del desarrollo web.

De repente, escribes cuatro líneas de HTML y, ¡zas!, eres capaz de añadir interactividad a un simple texto. Dado que estás viendo este post, deduzco que ahora mismo estás dando tus primeros pasos con HTML, así que seguro que entiendes lo que te quiero decir.

¿Cómo se ponen los enlaces?

Los enlaces en HTML se crean principalmente con la etiqueta <a>, que tiene su correspondiente etiqueta de cierre </a>. Pero, pero... ni "enlace", ni "link", ni "hipervínculo comienzan por "a". ¿De dónde viene esto?

Pues viene del inglés "anchor", que literalmente significa "ancla". Así que, cada vez que pongas un enlace en tu página web, imagínate que estás lanzando un ancla con una cuerda hacia otra página web, y así quedan enganchadas ambas. Vinculadas.

El atributo href de los enlaces

El atributo más importante más importante en los enlaces es href, ¿qué significa? Pues es la abreviatura de Hipertext Reference, o lo que es lo mismo Referencia de Hipertexto. En este atributo es donde indicamos el URL a la que apuntaremos con el enlace. O sea, la página a donde irá el navegador al hacer clic en el enlace.

Así que, si quieres enlazar al blog de recursos de campusMVP, desde tu página pondrías:

 <a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">Ir al blog de campusMVP</a>

Y se vería así:

Ir al blog de campusMVP

Fíjate en el atributo title, sirve para mostrar en el navegador un tooltip (deja quieto el cursor sobre el enlace) que normalmente aporta información sobre la página de destino. Utilízalo. Mejorarás la accesibilidad y experiencia de usuario en tus páginas, aparte de resultar muy útil para optimizar tu página para los buscadores, ya que les ayudas a entender mejor tu contenido.

Por cierto. Como puedes ver, el texto del enlace es lo que va entre <a> y </a>. Si en vez de texto quieres que el enlace sea una imagen, tendrías que ponerle ahí la correspondiente etiqueta <img>:

<a href="https://www.campusmvp.es/recursos/" title="Al blog de recursos de campusMVP">
  <img src="https://www.campusmvp.es/recursos/image.axd?picture=/2017/4T/enlaces-imagenes-campusmvp.png" alt="Enlace con imagen usando el logo de campusMVP" />
</a>

Y, entonces, se vería así:

Enlace con imagen usando el logo de campusMVP

Enlaces con rutas absolutas

Pero si quisieras enlazar una página concreta tendrías que poner una dirección más detallada:

<a href="https://www.campusmvp.es/directorio1/directorio2/archivo.htm">Ir al post de los enlaces</a>

Nota: en la jerga de Internet a las direcciones únicas de un recurso, como la que acabamos de colocar en nuestro enlace, se les denomina URL, del inglés Uniform Resource Locator o Localizador Uniforme de Recursos. Un URL es una dirección única que identifica un recurso en Internet, no solo en la Web. Lo más habitual es que escuches hablar de URLs y no tanto de direcciones, pero es lo mismo.

Fíjate en el URL. Ahora, aparte del dominio, en la ruta aparecen varios directorios separados por una barra inclinada hacia delante "/", también llamada slash , más el nombre del archivo completo con su extensión. Este tipo de URL que incluye el dominio (más la estructura de carpetas y/o archivo, si procede) es una "ruta absoluta".

Enlaces con rutas relativas

Pero si yo quiero enlazar este archivo desde otra página dentro del dominio de campusMVP, me bastaría con poner esto (y funcionaría igual):

<a href="https://www.campusmvp.es/recursos/directorio1/directorio2/pagina.html">Ir a mi archivo</a>

Si estoy en otro documento HTML del mismo directorio también lo podría hacer así:

<a href="./pagina.html">Ir al post de los enlaces</a>

O así:

<a href="../directorio2/pagina.html">Ir a mi archivo</a>

Los tres casos son ejemplos de rutas relativas, esto es, relativas a la página en la que estoy ahora mismo, y tienen la ventaja de que son independientes del dominio. Si el día de mañana le cambias el dominio a tu página web, seguirán funcionando igual de bien.

  1. En el primer caso, la dirección empieza por un slash "/". Esto significa que empezará a buscar la ruta a partir de la raíz del dominio.
  2. En el segundo caso empieza por "./". Esto significa que empezará a buscar la ruta a partir del nivel de la carpeta actual.
  3. Y en el tercero, empieza por "../". Esto significa que empezará a buscar la ruta a partir del nivel inmediatamente superior al de la carpeta actual. Podrías anidar varios "../" para subir varios niveles, pero no te recomiendo usar más de dos o tres.

El atributo name y los enlaces dentro de la misma página

El atributo name sirve para crear enlaces vacíos que indicarán puntos concretos de la página. Estos se podrán visitar al hacer clic en otros enlaces dentro de la misma. Por ejemplo, el típico enlace de "Volver al principio" que se pone al final de una página y que, al hacer clic, el navegador hace scroll hacia el principio. Otro uso muy habitual es en índices o tablas de contenidos en páginas muy largas.

Por ejemplo. Al principio de tu página pones esto:

<a name="principio"></a>

Y al final un enlace que apunte a ahí. Se hace con el símbolo "almohadilla" seguido del valor de name

<a href="#principio">Ir al principio de la página</a>

También lo podríamos hacer usando el id de cualquier elemento. ¿No te lo crees? Haz clic en este enlace.

Te ha llevado al primer párrafo del post, ¿verdad?. Eso es porque el enlace apunta al atributo id que le he puesto al primer párrafo del post a propósito para que pudieras ver este ejemplo.

De hecho, aunque esta técnica con name se usa mucho, en la recomendación de HTML5 se considera obsoleto usar el atributo name en los elementos <a> y se desaconseja su uso en favor de la técnica de usar el id:

<a id="principio"></a>

Y el enlace para ir a allí quedaría exactamente igual:

<a href="#principio">Ir al principio de la página</a>

Otros atributos interesantes

Aparte de los dos atributos mencionados, hay más atributos que puedes usar en los enlaces:

De tipo de contenido: type

Estos son solo algunos ejemplos

  • text/html : documentos HTML
  • image/jpg: imágenes JPG
  • text/css: hojas de estilo CSS
  • application/rss+xml: archivos XML para feeds RSS

De relación: rel y rev

Indica relaciones entre documentos, rel indica la relación entre la página que enlaza y la enlazada y rev indica la relación inversa.

  • alternate: indica que es una versión alternativa al documento actual (en otro idioma, una versión para imprimir)
  • stylesheet: indica que el archivo enlazado es una hoja de estilos
  • start: informa que el documento enlazado es el primero de un conjunto o secuencia
  • next: el documento enlazado es la continuación del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • prev: el documento enlazado es el anterior del actual dentro de una secuencia lógica (un post de un blog o un libro)
  • bookmark: indica que el enlace es un "marcador" o "favorito", esto significa que es importante.
  • contents: el elemento enlazado contiene una tabla de contenidos
  • nofollow: indica a los spiders de los buscadores, que no sigan ese link
  • noindex: indica a los spiders de los buscadores, que no muestren ese link en los resultados de búsqueda
  • external: indica que la página enlazada pertenece a un sitio web externo

¿A dónde apuntamos?: target

El atributo target se utiliza para especificar dónde vamos a abrir el URL enlazado. Parte del ámbito en el que estamos (una ventana, un marco) y, en función de este, se designa dónde abrimos el recurso. El valor de target puede ser el  nombre de un <iframe> o de un <frame> (aunque está obsoleto en HTML5 y se desaconseja su uso) o alguno de los siguientes valores:

  • _self: carga el recurso en el mismo contexto en el que estamos, ya sea una ventana o un iframe.
  • _blank: el atributo más utilizado. Sirve para abrir el recurso en una pestaña nueva. Cuando los navegadores no disponían de pestañas, se abría en una ventana nueva, aunque los navegadores modernos se pueden configurar por parte del usuario para que se abra en una ventana nueva en lugar de en una pestaña.
  • _parent: se abre en la página "madre" desde la que se ha abierto la actual o que contiene a esta (normalmente es un frameset). Si no existe un elemento "padre", se comporta como _self.
  • _top: se abre en el contexto de navegación más alto, que suele ser un ancestro y que no tiene padre. Si no hay un elemento que sea padre del contexto actual, entonces funciona como _self.

Lenguaje de la página de destino: hreflang

Indica, con su correspondiente código ISO, el idioma de la página enlazada. Es especialmente útil para sitios web multiidioma usándola conjuntamente con rel="alternate" para que los buscadores (o sea, Google) no se hagan un lío con las diferentes versiones e idiomas.

Estos son solo unos pocos atributos, pero hay más. Si te pica la curiosidad, puedes seguir indagando en la página del W3C o en la de recursos para desarrolladores de la Fundación Mozilla.

Y si estas aprendiendo HTML, o simplemente quieres asentar mejor tus conocimientos, échale un vistazo nuestro curso de HTML y CSS. Aprenderás de una forma mucho más estructurada y ordenada que si vas por libre, y en poco tiempo verás grandes progresos en tu dominio de la maquetación web.

Tendencias en programación para 2018

18/12/2017
Artículo original


(Foto de Jon Ottosson, Public Domain)

Y ya estamos aquí: en las puertas de 2018. Las cosas ocurren tan rápido que casi no hay tiempo de reaccionar y adaptarse. 2017 ha sido un año lleno de novedades, lanzamientos, nuevas versiones... Aunque suene a tópico, es muy cierto que en nuestro mundillo la única constante es el continuo cambio. Lo cual es bueno y malo al mismo tiempo.

¿Qué nos depara 2018 en el mundo de la programación?

Es complicado acertar con nada, pero sí que tenemos claras algunas macro-tendencias que siguen y otras que comienzan y que van a ser muy importantes:

  • JavaScript: no es ni mucho menos nuevo, pero sigue su crecimiento imparable para dominar el mundo, tanto en cliente (con librerías como Angular, React o Vue.js dominando), como en servidor con Node.js, pero también en móviles (Cordova, pero en 2018 explotarán las Progressive Web Apps) o incluso sistemas IoT y embebidos. Aprender BIEN JavaScript es indispensable.
  • Typescript: el super-conjunto de JavaScript que te facilita la escritura de aplicaciones y lleva tu experiencia de desarrollo a otro nivel gracias al poder que le da a los editores para analizar el código. Utilizado por Angular, RxJS y muchos otros. Nuestro curso de Angular también te lo enseña.
  • Xamarin: sigue en camino de dominar el desarrollo móvil, permitiéndote crear una aplicación única para Android e iOS y otras plataformas móviles, pero en breve también para MacOS, Linux y Windows. Una fuerza de la naturaleza a la que es difícil seguirle el ritmo.
  • Plataforma Java: el lenguaje con más demanda laboral. Ahora, tras años de espera, con el recién lanzado Java 9 es más rápido, más potente y te permite hacer más con menos. Un clásico inmortal que sigue creciendo sin parar en demanda y uso.
  • Kotlin: está subiendo como la espuma. Es un lenguaje por encima de la Java Virtual Machine, que permite más productividad y mayor sencillez que Java, y que se puede compilar también a JavaScript o usar LVVM. Desde que Google lo convirtió en lenguaje de primer nivel para Android, a la par con Java, no ha parado de crecer. No lo pierdas de vista.
  • Docker: quizá exageremos, quizá no, pero en 2 años (o menos) estarás desplegando todas tus aplicaciones con Docker. Tratando de resumir en una frase algo complejo, la tecnología de contenedores permite empaquetar fragmentos de aplicaciones y componerlos de manera ligera para crear aplicaciones, para luego desplegarlas de forma rápida en cualquier sitio asegurando que se van a comportar exactamente igual que en tu máquina. Se acabó lo de "En mi máquina funciona". Si es así, funcionará también en cualquier otro lado. Y no, no pienses en virtualización. Es otra cosa. Claro, hay mucho más que esto, pero captas la idea... Solo te decimos una cosa: acabarás aprendiendo y usando Docker antes de lo que imaginas.

Hay muchas más cosas, pero creemos que es un buen resumen.

¡Feliz 2018 y happy coding!

Variables en el lenguaje CSS: Guía de uso y abuso

15/12/2017
Artículo original

CSS es un lenguaje de estilos que nos permite dotar a un documento de un determinado aspecto y comportamiento. Es decir, su principal función es independizar los contenidos de su aspecto concreto. Aunque se conoce sobre todo por su uso en la Web, con HTML, en realidad se puede usar con cualquier lenguaje de marcado como XML o SVG, e incluso hay versiones especializadas en otros medios, como la voz, en sistemas de accesibilidad.

Como lenguaje es más bien pobre: no dispone de construcciones complejas que nos permitan tomar decisiones con condicionales, repetir operaciones mediante bucles, etc... En realidad lo único que nos permite hacer es describir conjuntos de elementos (mediante los selectores), y aplicarles propiedades. La máxima lógica que nos permite aplicar es cambiar ciertas definiciones en función del medio (pantalla, impresora...) o los anchos y resoluciones (media-queries).

Esto hace que mantener hojas de estilo CSS muy grandes resulte complicado. Por ejemplo, si estamos reutilizando un color o una dimensión (ancho o alto) a lo largo de un documento CSS muy largo, no nos queda más remedio que repetir el mismo valor una y otra vez. Si más adelante decidimos cambiarlo tenemos que buscar y reemplazar con cuidado en el documento de texto.

Extensiones de CSS: Sass, Less y similares

Debido a ello nacen hace tiempo lenguajes más especializados como Less o Sass que resuelven este problema y otorgan a CSS de muchas más posibilidades, como funciones, mapas, mixins... Estos lenguajes se compilan luego a CSS para poder ser utilizados en un navegador, y facilitan mucho las cosas.

Aunque ambos dan mucha potencia para hacer cosas, siendo realistas, en un porcentaje muy alto de los casos el principal objetivo de usarlos es poder declarar variables que reutilizamos en las hojas de estilo.

Por ejemplo, en Sass (SCSS), podemos hacer algo como esto en un archivo .scss:

$color-principal: Crimson;
$color-secundario: CornflowerBlue;

//....

h1 {
    color: $color-principal;
    border: 1px solid $color-secundario;
}

que tras ser compilado a CSS normal y corriente quedaría como:

h1 {
    color: Crimson;
    border: 1px solid CornflowerBlue;
}

dejándonos unas cabeceras de color rojizo con el borde azulado (que son los colores que hemos elegido).

La idea es muy sencilla: se declaran variables con $ y se utilizan del mismo modo en cualquier lugar. Lo genial de esto es que definimos unas variables y las utilizamos en muchos sitios. Si luego queremos, por ejemplo, que el color principal sea otro, cambiamos en un solo sitio (la variable), recompilamos, y cambia en todos los lugares en los que la estuviésemos usando.

Esto es solo rascar la superficie de Sass, que tiene una potencia brutal para hacer cosas, pero para lo que nos interesa es suficiente, y mucha gente no pasa mucho más que de aquí.

Inciso descarado: si te interesa Sass y muchas otras técnicas más avanzadas, en el máster de desarrollo Web Front-End de campusMVP lo aprenderás todo a fondo.

Variables en CSS y soporte de navegadores

El concepto de variables es una enorme carencia de CSS desde siempre. La idea lleva en el aire desde hace mucho tiempo, e incluso hay un estándar de la W3C cerrado desde diciembre de 2015. Sin embargo no es realmente hasta este año 2017 en el que de verdad podemos empezar a utilizarlas.

El primero en soportarlas, como casi siempre, fue Chrome, que ya ofrecía soporte en su versión 49, en marzo de 2016. Pero la mayoría de los demás navegadores no han empezado a dar soporte hasta este año. Por ejemplo, Firefox empezó a soportarlas en la versión 56, el 28 de septiembre de este año. Hace nada, vamos.

Pero con la deshonrosa excepción de Internet Explorer, en este momento se puede decir que todos los navegadores actuales soportan variables CSS:

Soporte de Variables CSS según CanIUse

Dado que todos son navegadores "evergreen", es decir, que se actualizan solos y a menudo, por lo que todo el mundo más o menos los tiene siempre a la última, se puede decir que ahora, a finales de 2017 es el momento ideal para empezar a utilizar y sacarle partido a las variables CSS. La única excepción es si tienes que dar soporte por algún motivo a Internet Explorer, que ni siquiera en su versión más reciente, la 11, tiene soporte para ello.

Vamos a ver cómo...

Definición de variables en CSS

En CSS definir una variable es muy sencillo: basta con declararla dentro de algún elemento usando un doble guión (--) delante del nombre, por ejemplo:

html {
    --color-principal: Crimson;
    --color-secundario: CornflowerBlue;
}

De este modo la estamos definiendo dentro del elemento raíz de la página, que es lo más habitual y conveniente. Aunque si examinas código por ahí verás que mucha gente la define de este modo:

:root {
    --color-principal: Crimson;
    --color-secundario: CornflowerBlue;
}

la pseudo-clase :root representa el elemento de mayor nivel en un documento de marcas. En el caso de HTML es idéntico a especificar el elemento html, como hemos hecho en el fragmento anterior. Así que ambos son equivalentes. Pero hay una diferencia sutil pero importante: la pseudo-clase :root tiene mayor especificidad que el elemento html, del mismo modo que una clase tiene más especificidad que un elemento. Es decir, tiene mayor prioridad a la hora de aplicar los estilos. De ahí que lo veas aplicado muchas veces.

Usando variables CSS

Bien. Ahora que ya sabemos declararlas ¿cómo las utilizamos?

Mediante el uso de la función var(), específica para esto:

h1 {
    color: var(--color-principal);
    border: 1px solid var(--color-secundario);
}

Con este resultado (archivo variables-css-01.html):

Ejecutando el CSS anterior

Como vemos es muy parecido a lo que hace Sass, solo que no hay que compilar nada y el navegador sabrá sustituir esas variables cuando sea preciso.

Personalmente no me gusta nada esta sintaxis. Me parece liosa, y pienso que hubiera sido mucho mejor si se decidieran a copiar a Sass y se declarasen y usasen del mismo modo que en éste: con un $ delante. Sería más rápido de escribir y más claro. Pero bueno, todos los males sean estos...

Redefiniendo variables

Lo más habitual es definir las variables en el elemento raíz como hemos visto y dejarlas así, para reutilizar en todo el documento sin cambios, al estilo de como lo hacen Sass o Less.

Pero una particularidad muy interesante de las variables CSS que no tienen las variables de Sass, es el hecho de que se comportan como otras propiedades CSS convencionales a la hora de heredarse de unos elementos a otros.

Esto es muy interesante ya que te permite redefinirlas dinámicamente para aplicar valores diferentes en ciertas partes de un documento o para ciertos elementos, por poner un ejemplo. Si las estableces dentro de un selector determinado afectará solo a los elementos que designe dicho selector y a los elementos hijos de éste, mientras no haya otra propiedad en un selector más específico.

Esto te permite hacer cosas como esta (archivo variables-css-02.html):

html {
    --color-principal: Crimson;
    --color-secundario: CornflowerBlue;
}

h2 {
    color: var(--color-principal);
    border: 1px solid var(--color-secundario);
}

.Intenso {
    --color-principal: red;
    font-size: 2em;
}

De modo que si luego tenemos un elemento <h2> con la clase Intenso aplicada, el valor de la variable para ese caso en concreto será diferente, ya que tiene mayor especificidad, y el elemento en ese caso se verá rojo intenso en lugar de granate, y con un texto mayor:

Redefiniendo variables con mayor especificidad

Fíjate en cómo el valor del color principal se ha cambiado gracias a que la especificidad del selector .Intenso es mayor que la del selector html. De hecho, aunque hubiésemos usado :root como selector principal, que tiene la misma especificidad que un selector de clase como .Intenso, al estar éste más abajo en la hoja de estilos, a igual especificidad ganaría también y el resultado sería el mismo.

Esto nos permite también utilizarlo con media-queries para poder cambiar valores de propiedades globales en función de la resolución de pantalla, lo cual nos otorga una gran potencia (archivo variables-css-03.html):

html {
    --tam-grande: 16px;
}

@media (min-width:768px) {
    html {
        --tam-grande: 30px;
    }
}

h1 {
    font-size: var(--tam-grande);
}

En este caso le estamos indicando que el tamaño por defecto de las cabeceras de tipo 1 sea de 16px (para tamaños pequeños, mobile-first), pero si superamos el ancho de 768px o más (tamaños medianos o superiores), entonces que crezca a 30px, cosa que ocurre como podemos ver en esta pequeña animación (pulsa para ampliarla y verla mejor):

Cambio de valor del tamaño con el ancho

Como vemos, otorga una potencia bastante grande.

Usando estilos en línea

Como cualquier propiedad de CSS, las variables las podemos definir también dentro de estilos en línea, con el atributo style:

<span style="--color-secundario:yellow;">Lo que sea...</span>

En este caso los estilos en línea tienen la mayor especificidad y se aplicará, solo para esta etiqueta, el color amarillo, ya que hemos redefinido la variable en el atributo style.

Esto tiene otras aplicaciones bastante chulas, como por ejemplo, utilizar variables para especificar valores de tipo ajeno a propiedades CSS en algunos elementos. Por ejemplo, imagina que quiero crear tooltips para ciertos elementos usando solo CSS, como ya expliqué en un artículo no hace mucho (mírate antes este artículo).

En lugar de usar atributos data- de HTML5, podríamos usar variables CSS que se especificarían en cada elemento concreto mediante variables. Por ejemplo:

<span class="tooltip" style="--tooltip-mensaje: 'Un lenguaje de programación es...';">lenguaje de programación</span>

Y para aplicarlo haríamos:

span.tooltip::before {
    content: var(--tooltip-mensaje);
}

consiguiendo el mismo efecto.

En este ejemplo concreto quizá no ganamos nada, pero me interesaba llamar tu atención sobre ello para que vieses que existen otras muchas posibilidades, y que una vez que se entiende su funcionamiento, las variables CSS dan una potencia enorme.

Puedes bajarte los ejemplos sencillos que hemos hecho en este artículo desde aquí (ZIP, 2.59KB).

En resumen

Las variables CSS son una herramienta muy potente para el programador web Front-End, y en la actualidad ya es posible utilizarlas sin miedo para la mayor parte de los usuarios de la web, cerca del 80% en el momento de escribir esto. Solo dejaremos fuera a Internet Explorer y poco más.

Aunque no equiparan CSS con la potencia que ofrecen Sass u otros pre-procesadores de CSS, sí que evitan tener que usarlo para muchos casos en los que lo único que necesitamos es poder mantener de manera más sencilla nuestras hojas de estilos, sin tener que estar buscando y reemplazando.

Además, entendiendo bien su funcionamiento podemos sacarle partido de maneras creativas y hacer muchas otras cosas.

¡Espero que te haya resultado útil!

Juego del Gato o Triqui

12/12/2017
Artículo original

/*
 *
 * Autor : jl_
 * Fecha de Creacion : 2017_12_12
 *
 */

package triqui;

public class Triqui {

    public static void main(String[] args) {
        triqui.JframeTriqui.main(null);
    }
}
//fin clase Triqui

/*
 * Juego Triqui
 * Autor: jl_
 * Fecha de Creacion : 2017_12_11
 *
 * Notas: el juego del gato o triqui debes compilarlo y agregar en la carpeta dist del jar
 * la carpeta de las imagenes para que las muestre en el JFrame
 * porque utilizo el metodo diractual() para asignar la ruta de las imagenes
 *
*/

package triqui;

import java.io.File;

public class JframeTriqui extends javax.swing.JFrame {

    //declaracion de variables
    public int jugador            = 1;
    public int jugadorant         = 1;
    public int minimonumjugadas   = 0;
    public int maximonumjugadas   = 9;
    public int juegoiniciado      = 0;
    public String [][] configposicionjuego = new String[3][3];
    public int    [][] posicionjugadas     = new int[3][3];
    boolean jl_triqui=false;
    String x=null, y=null;
    String pos0=null, pos1=null, pos2=null;
    int pos0jugador=0, pos1jugador=0, pos2jugador=0;

leer más

[Java] Utilizar un ArrayList en un JFrame

12/12/2017
Artículo original

/*
 *  -----------------------------------
 *  java México
 *  -----------------------------------
 *  Descripción:
 *  Hola, estoy realizando un pequeño programa, el cual consiste en que, al hacer clic en un panel se dibuje un circulo,
 *  y cuando se vuelva hacer clic, se dibuje otro círculos de otro color, pero sin que se borre el primer círculo,
 *  y así hasta tapizar el panel de círculos de diferentes colores.
 *  Mi pregunta es, ¿cómo almacenar los círculos en la memoria, para que no se borren?, ya tengo el evento del clic y que
 *  los círculos cambien de color,
 *  he estado investigando como hacer esto, tengo entendido que se puede hacer con un ArrayList o con un Vector.
 *  -----------------------------------
 *  Actualización: 2017_12_09
 *  -----------------------------------
 *  1.   //    super.paint(g);          //comente esta línea y aparecen los círculos en pantalla
 *  -----------------------------------
 *  es como si le dijéramos a la interface gráfica que se inicie desde 0 (cero).
 *  borre todo lo anterior.  y solo dibuja el circulo que le estamos indicando en las líneas siguientes
 *  

leer más

DLP, o como prevenir la pérdida de datos

12/12/2017
Artículo original

Ladrón mandando callar

Equifax, Avanti o Down Jones, son empresas tristemente famosas en el 2017 por haber sufrido importantes fugas de información sensible. Así, quienes tenían el compromiso de velar por la confidencialidad de sus clientes, se encuentran ante el fracaso evidente de unas Políticas de prevención de perdida de datos (DLP) erróneas.

Y este no es un problema menor. Según un informe de IBM Security, el coste en Italia (similar a España) supera los 2 millones de euros al año; siendo más afectadas las compañías cuanto más tardan en aplicar las medidas que mitigan la pérdida.

De hecho, la aplicación de las DLP con una visión global en su complejidad, es uno de los retos más importantes a los que se enfrentan las organizaciones a nivel mundial; y, con especial atención en la Unión Europea al estar inminente la puesta en aplicación de la nueva ley de Protección de Datos (RGPD).

¿Qué es la pérdida de datos?

Perdida De Datos

La información es una entidad que, como todo en la naturaleza, tiene su propio ciclo de vida. Se crea o adquiere, se transfiere, se utiliza, se almacena y, finalmente es eliminada. Durante todo el periodo en que existe, pueden producirse transferencias, copias o borrados no deseados, de forma intencionada o casual.

En el momento en que los datos son almacenados o publicados, en cualquiera de la miríada actual de mecanismos tecnológicos para la difusión de la información, sin la aprobación explicita del propietario o contraviniendo las leyes, se debe declarar una pérdida de datos.

Como ejemplos tendríamos el almacenar información sensible en equipos personales no protegidos por una DLP; tanto en unidades de almacenamiento internas, externas o en Cloud, imprimirlas en papel, grabarlas en soportes ópticos (CD o DVD), hacerle fotos, o realizar capturas de pantalla.

Otra forma de perdida de datos es el borrado no deseado. Comúnmente un problema casual, sin intencionalidad, que se produce por error; pero que puede producir daños irreparables a nivel de negocio. Convirtiéndose en un factor de alto riesgo cuando se produce de forma imprevista pero planificada, en la búsqueda de ocultar información o como forma de ataque.

Mucho más sutil, es la fuga de información al compartirla. La complejidad de las leyes y procesos sobre la sensibilidad de los datos y su protección, lleva a los usuarios a no darse cuenta de cuando están infringiendo esta confidencialidad al enviarla por correo, publicarla en un foro inadecuado o compartirla por medio de mecanismos inseguros.

Por último, lo más llamativo: el robo de datos. Ya sea por un malware, por un virus, por un ataque a través de agujeros de seguridad, o por hacking social. Son acciones que se mueven, casi siempre, por un trasfondo económico. Y que requieren un alto grado de recursos.

Contextos de aplicación

Dlp2

La primera barrera que hay que construir para prevenir la perdida de datos, es una configuración correcta de los cortafuegos, aislando a la red de la compañía de los accesos no autorizados. Sistemas de detección de Intrusos (IDS), los cuales se basan en análisis pormenorizados del tráfico de red para detectar ataques conocidos, comportamientos sospechosos, paquetes malformados, etc.

La configuración de los Sistemas de Prevención de Intrusos (IPS), que dan un paso adelante en la forma preventiva de enfrentar las posibles amenazas al permitir una monitorización del tráfico de red y las actividades del sistema en busca de actividades maliciosas. Para ello aplica políticas de seguridad o estadísticas de anomalías, al análisis del comportamiento de la red.

Por último, ampliando el ámbito de actuación, tendríamos las Aplicaciones de Prevención de perdida de datos (DLP). Son sistemas diseñados para monitorizar, detectar y bloquear información sensible cuando se encuentra en alguno de los tres siguientes estados:

  • En red: Aquella información que está siendo transportada por la red (está en movimiento).
  • En uso: Información con la que el usuario está interactuando.
  • En reposo: Información “vieja”, que está almacenada de forma permanente.

En cada caso, va a aplicar políticas de identificación del dato para clasificar su confidencialidad y sensibilidad. Ya sea por el análisis del contenido (palabras claves, clasificación, etiquetas) o un análisis contextual (origen, destino, aplicación), o aplicando métodos como las búsquedas con expresiones regulares, análisis bayesiano, análisis estadísticos, y machine Learning.

Justamente, la llegada de los sistemas de “Inteligencia artificial” que son capaces de aprender los comportamientos de los usuarios, han permitido dar un gran salto cualitativo, cuantitativo y de confianza en la detección de fugas de información, y la reducción de los falsos positivos.

Funcionamiento

C006860c 2d00 42cb Aaa4 5b5638d139f7

El principal mecanismo de actuación de la DLP son las Directivas. Que definen el dónde, cuándo y cuales acciones vamos a aplicar a la información. Y que están compuestas por la Ubicación y las Reglas.

Ubicación. Define en donde se aplica la directiva. Por ejemplo, el servidor de correo electrónico, los servicios de almacenamiento de datos, o cualquier herramienta de trabajo colaborativo.

Reglas. Que a su vez están compuestas por: las Condiciones, que determinan el tipo de información que se está buscando y cuando lanzan una acción. Y las Acciones, que pueden ser (entre otras) restringir el acceso al contenido, notificar al usuario o invalidarlo a él o a sus comunicaciones.

Dentro de las Condiciones podremos añadir lógica compleja de búsqueda de información, utilizando patrones de coincidencia que utilizan una función o expresión regular que define un tipo de información confidencial; pudiéndose, también, ser especificadas por palabras clave y sumas de comprobación.

Se puede escribir múltiples Reglas dentro de una misma directiva, por ejemplo, para diferentes acciones dependiendo del grado de certidumbre; y agrupar a su vez colecciones de directivas.

Y estás directivas, serán las utilizadas por el servicio DLP para realizar diferentes acciones con el objetivo último de evitar la pérdida de datos en nuestro sistema.

Además, tendremos servicios para el tratamiento de la información obsoleta o en desuso, como son los sistemas de Archivado; o los de Retención, que describen cuanto tiempo salvaguardamos la información y qué ocurre al finalizar este periodo.

Las Copias de seguridad/restauración, como piedra angular de la disponibilidad y resiliencia de nuestra plataforma, se entremezclan con la encriptación de la información y su transmisión por canales seguros (por ejemplo, TSL).

También deberemos configurar nuestra plataforma de gestión de BYOD para evitar fugas de información en dispositivos con una alta incidencia de pérdidas o sustracciones, y que deben poder ser convertidos en pisapapeles, llegado el caso.

Incluso podemos llegar a utilizar una plataforma de gestión de derechos de autor (DRM), en donde evitar operaciones como la captura de pantalla, la impresión o la descarga de documento protegidos.

Por último, y no más importante, el servicio de notificaciones y de reportes, son los que van a permitir valorar el impacto de la implantación de DLP en nuestro sistema, y la aplicación de los procesos.

No todo es software

Cotilla

¿Dónde está la información de la compañía? ¿Cómo se utiliza? ¿Cómo podemos evitar su pérdida? ¿Quiénes tendrán acceso? ¿En qué dispositivos se podrá almacenar? ¿A quiénes se podrá transferir? ¿Dónde puede publicar? ¿Durante cuánto tiempo será útil?

Todas estas preguntas, y muchas más, son necesarias hacérselas y contestarlas en profundidad cuando nos hacemos conscientes de los riesgos que implica la fuga de información.

Y, a partir de ellas, diseñar y configurar la infraestructura que nos permita implantar el software DLP que mejor se ajuste a nuestras necesidades.

Sin embargo, DLP es un asunto que va más allá de la tecnología. Proteger la información y evitar su pérdida requiere además de dos factores clave: tener procesos establecidos e involucrar al personal.

Algo tan simple como hacer firmar un correcto Acuerdo de No Divulgación (NDA) a las personas que van a tener acceso a información sensible, nos va a evitar múltiples dolores de cabeza en un posible futuro. Al igual que impartir formación a todos los miembros de la empresa, sobre las definiciones de lo que es confidencial y de los procesos para evitar su pérdida.

Hay que incluir un sistema automatizado y eficiente de notificaciones que, por medio de avisos, vaya guiando a los usuarios cuando active alguna de las protecciones DLP; indicándoles el proceso que ha infringido, los efectos que puede producir y los procesos existentes para mitigar la fuga de datos.

También es crucial definir quiénes son los responsables de realizar las tareas establecidas en caso de una pérdida de datos para, por ejemplo, de acuerdo a la gravedad de la fuga, implicar a gerencia, dirección, jurídico o, incluso, relaciones públicas en los casos de gran impacto mediático.

Y siempre partiendo de la base de que casi nadie aguanta un pepaso de 50.000 pesos. Y ni el mejor software de DLP puede cubrir la seguridad de los datos al 100%, al existir siempre el factor humano en última instancia.

También te recomendamos

Diferencias entre envasar al vacío a corto y largo plazo: ¿qué me conviene?

¿Qué es y como surge la criptografía?: un repaso por su historia

Tipos de criptografía: simétrica, asimétrica e hibrida

-
La noticia DLP, o como prevenir la pérdida de datos fue publicada originalmente en Genbeta Dev por Juan Quijano .

Quizá tengas el síndrome del impostor sin saberlo. ¿Qué hacer para librarse de él?

12/12/2017
Artículo original

Al igual que en otras profesiones, las personas que trabajamos en el campo de la programación tenemos constantemente la presión por mejorar y estar continuamente aprendiendo. Sí, tenemos un sueldo y unas condiciones de trabajo que están, por lo general, por encima de la media, pero también sufrimos mucha presión y tenemos que estar siempre dando lo mejor de nosotros mismos.

Como muchos otros profesionales cualificados, nos preocupa no estar rindiendo tanto como deberíamos en el trabajo, no tener la suficiente experiencia ni los conocimientos óptimos para llevar a cabo los proyectos de desarrollo que nos encomiendan... Nos comparamos constantemente con nuestros compañeros programadores y tememos no estar a la altura. En nuestra profesión también hay mucha guerra de egos y nos importa mucho lo que los demás piensan de nosotros, y si encajamos, o incluso si destacamos, en nuestras empresas de desarrollo.

Este sentimiento es normal, es algo común... hasta un punto. El problema viene si nos obsesionamos con el tema de forma irracional. Tenemos miedo de no ser lo suficientemente buenos aunque tengamos pruebas de lo contrario. Obviamos de forma total dichas pruebas y seguimos pensando que nos estamos quedando atrás en relación con todos los demás, que no estamos a la última, que no aprendemos a la velocidad suficiente...

Este pavor irracional es parte de algo que popularmente se conoce como el "síndrome del impostor".

¿Qué es el síndrome del impostor?

Síndrome del impostor

El síndrome del impostor se conocía en sus inicios con el nombre de "fenómeno del impostor". En la década de los 70 las psicólogas clínicas Suzanne Imes y Pauline Rose Clance acuñaron este término. Trabajaban con mujeres en una universidad femenina y se percataron de que muchas alumnas tenían miedo a ser descubiertas como un fraude, a pesar de existir pruebas irrefutables de lo contrario.

Clance lo describió literalmente con estas palabras: "Estas mujeres no tienen un sentimiento interno de éxito. Se consideran impostoras. "

El fenómeno del impostor se refiere al sentimiento de no pensar en nosotros como aptos, sentirse un fraude, atribuyéndole el éxito a la fortuna en vez de al esfuerzo y la destreza, y temiendo ser descubiertos como un fraude. Esas sensaciones las tienen todas las personas que padecen el síndrome del impostor a pesar de tener éxito real y contrastado.

Vale, tengo el síndrome del impostor, ¿soy un bicho raro?

No. No lo eres. Es algo muy común, incluso entre profesionales reputados. Le pasa a los mejores. Últimamente, Mike Cannon-Brookes el co-fundador y co-CEO de Atlassian (¡de Atlassian!), ha publicado un post público sobre su experiencia con el síndrome del impostor. A pesar de liderar una empresa global con miles de empleados, afirma:

"La mayoría de los días siento que en verdad no sé lo que estoy haciendo."

Podrás pensar, "vaya un CEO con tanto éxito, ¿cómo puede llegar a pensar eso?". La respuesta es simple: el síndrome del impostor no se basa en la realidad, se basa en la percepción de la realidad por parte de la persona, que es algo totalmente diferente.

El síndrome del impostor le puede suceder a cualquiera.

¿Cómo me puede afectar el síndrome del impostor en mi trabajo como programador?

El síndrome del impostor hace que te sientas incómodo, pero no solo tiene consecuencias a nivel emocional. Puede influir negativamente en la forma en la que afrontas el trabajo.

Las personas que experimentan este fenómeno suelen tender a ser perfeccionistas. El perfeccionismo obsesivo no es sano, ya que conduce a expectativas irreales que no se pueden colmar, a la vez que crea un miedo insuperable al fracaso. Este enfoque de querer hacer todo perfecto también conduce a la procrastinación, debido al temor de no poder colmar esas expectativas irreales o al no saber cuándo parar con una tarea que ya es lo suficientemente buena, mientras se acumula el trabajo desatendido.

Todas estas circunstancias hacen que este tipo de personas tengan por lo general un peor rendimiento en el puesto de trabajo ya que según un estudio de la Universidad de Salzburgo tienen peores salarios, tienen menos probabilidades de ascender en la empresa y se sienten menos comprometidos y satisfechos en el puesto de trabajo.

Los programadores que sufren el síndrome del impostor de forma acusada suelen manifestarlo en su conducta diaria. Si te sientes identificado con algunos de los comportamientos que vienen a continuación, quizás ha llegado el momento de hacer sonar todas las alarmas. Si no se rectifican dichas conductas, las cosas solo pueden ir a peor:

  • Optar por siempre trabajar solo, evitando toda colaboración salvo la más superficial
  • Evitar exponerse a recibir retroalimentación y críticas constructivas
  • Seguir trabajando obviando un problema que podría resolverse rápidamente si se comunicase
  • Estar a la defensiva, siendo incapaz de aceptar críticas o halagos. Lo cual conduce a lo siguiente.
  • Estándares/expectativas muy elevados, tal vez imposibles, lo que lleva a:
  • Niveles autodestructivos de perfeccionismo, que termina en:
  • La auto-explotación laboral, haciendo horas extras innecesarias (lo que también podría llevar a un complejo de mártir)

Todas estas conductas son una señal preocupante si se producen constantemente y de forma concurrente. Si un programador de software no está abierto a las críticas, su trabajo se empobrece, perdiendo calidad. Cuanto más sucumbes al síndrome del impostor, peor programador eres y entonces sí que te conviertes en un impostor de verdad.

¿Cómo puedo superar el síndrome del impostor?

Superar este fenómeno no es sencillo, pero los investigadores tienen varias sugerencias. Si crees que sufres el síndrome del impostor, prueba estas medidas para intentar minorar su impacto en tu estado emocional y laboral.

1.- Detecta el perfeccionismo malsano y obsesivo

Ser extremadamente temeroso del fracaso y de la crítica, estar constantemente preocupado por cometer errores o decepcionar a la gente, o tender a meditar sobre los errores del pasado son signos de un perfeccionismo malsano.

Aprender a hacer las tareas lo suficientemente bien, sin que estén perfectas, es importante para superar estas preocupaciones. Los psicólogos sugieren aprender a festejar cada avance y desarrollar un sistema de auto-recompensas por cada éxito para ayudarte a reconocer tus esfuerzos.

También es importante empezar poco a poco mientras trabajas en reconsiderar la forma en la que ves tus logros. Dar pequeños pasos te ayudan a cambiar lentamente tu forma de pensar a largo plazo. Por ejemplo, dejar que alguien vea tu trabajo en progreso cuando aún no está terminado, en lugar de esperar hasta que sea perfecto. O forzarte a ti mismo a destinar un poco menos de tiempo a un proyecto de desarrollo que normalmente te haría agonizar antes de liberarlo.

2.- Aprende a evaluarte de forma realista

Los especialistas además sugieren dedicar tiempo a pensar en tus auto-evaluaciones, las cuales probablemente no sean realistas si estás experimentando el fenómeno del impostor. Según la psicóloga clínica Imes que mencionamos antes:

"La mayoría de las personas que consiguen grandes logros son muy inteligentes y muchas de estas personas realmente inteligentes desearían ser genios, pero la mayoría de nosotros no lo somos, tenemos áreas donde somos muy inteligentes y otras áreas donde no lo somos".

Imes sugiere anotar en un papel las cosas en las que somos realmente buenos y las cosas en las que podemos mejorar y trabajar para ser mejores. Esto puede ayudar a reconocer las áreas donde tenemos margen de mejora y las áreas que pasamos por alto no reconociendo nuestra valía.

3.- Habla con los demás

A pesar de que podemos disfrutar el hecho de pasar tiempo con personas exitosas, cuanto más exitosos conseguimos ser, más exitosos tienden a ser nuestros amigos y entorno. Esto dificulta destacar sobre los demás y puede no hacernos sentir dignos de nuestros amigos, fomentando el síndrome del impostor.

Hablar con otras personas acerca de nuestras frustraciones puede ayudarnos a ver que las otras personas no son perfectas, y que cometen errores. Al luchar contra el reconocimiento de nuestros propios logros y pensar de que simplemente ha sido el azar lo que nos hace estar donde estamos, puede ayudarte a ver cómo otros han superado los obstáculos, han tenido golpes de fortuna, o que incluso han luchado contra el síndrome de impostor ellos mismos.

Si bien puede ser difícil superar los miedos profundamente arraigados sobre nuestras capacidades y nuestros logros, puede ser reconfortante saber que la mayoría de la gente se siente de esta manera en algún momento de su vida.

4.- Apuesta por la formación continua

Si piensas que has llegado a donde estás por mera suerte, aprovecha el momento y sigue aprendiendo para mejorar. Vete a clases. Haz un curso online.

Prueba cosas nuevas. Haz preguntas. Resuelve tus dudas y tu "supuesta incompetencia". Si tu "zona de confort" se está volviendo incómoda, sal de ella y toma un riesgo.

Sentirás frustración en el proceso de aprendizaje, por supuesto, pero te enseñará algo nuevo sobre ti mismo, haciéndote un mejor desarrollador. Como consecuencia, la próxima vez que hagas alguna tarea de programación con éxito, lo sentirás un poco más merecido.

5.- Búscate un mentor

Encuentra un compañero de trabajo, amigo o compañero de estudios que pueda objetivamente ayudarte a hacer seguimiento de tus metas y a ofrecerte comentarios honestos acerca de lo que estás haciendo bien y maneras en las que puedes mejorar o impulsarte a dar el siguiente paso.

6.- Difunde tu conocimiento, te sorprenderá todo lo que sabes

¿Qué mejor manera de superar la dudas sobre ti que enseñando a otros todo lo que sabes? A menudo damos por sentado la amplitud de nuestros conocimientos, especialmente si hemos estado trabajando en un campo en particular durante un número de años, y olvidamos que siempre hay un sinfín de personas que pueden beneficiarse de nuestros conocimientos.

Hay varias formas de hacer esto. Puedes asistir a los meetups de tu localidad como ponente para hablar de las cosas que sabes y que te apasionan, puedes escribir un blog técnico (si quieres colaborar con este escríbenos), puedes contribuir en uno de los infinitos proyectos de código abierto que hay online, puedes aportar respuestas en foros de programación tipo Stack Overflow sobre la tecnología que mejor dominas, puedes organizar un curso en la asociación TIC de tu zona, etc...

7.- Registra los halagos que recibes por tu trabajo

Si sufres el síndrome de impostor, puedes encontrarte a ti mismo desviando los elogios o no haciéndoles caso en absoluto en tu día a día.

Una posible solución es mantener un registro de todas las cosas positivas que la gente dice sobre ti. Ya sea una lista en una app móvil, un registro de voz, un Google Doc o un diario concebido ex profeso para tal cuestión. Guarda esos comentarios, correos electrónicos, mensajes de Whatsapp, notas etc...

Puede sonar narcisista, pero en realidad es una forma tangible de reforzar y recordar que tu trabajo es respetado y apreciado.

8.- Acepta el fracaso como un medio para lograr el éxito

Los sentimientos de indignidad o un temor constante de rechazo no sólo son dañinos en el presente, sino que también pueden sabotear las oportunidades futuras. La auto-limitación, que a menudo se superpone con el síndrome de impostor, ocurre cuando un individuo impide su propio desempeño, creando así una explicación pre-elaborada para justificar el fracaso posterior.

La idea aquí es exponerse al fracaso sin miedo, aceptando que puede irte mal y que no es el fin del mundo. Es como cuando una persona que teme volar se obliga a sí misma a viajar más para ayudarse a normalizarlo, la solución radica en exponerse.

¿Por qué? Porque cuando lo haces, empiezas a replantearte la experiencia como algo más positivo, has tomado una decisión y has salido de tu zona de comodidad. De hecho, festejar el rechazo es una táctica usada por muchas personas de éxito para desarrollar una mentalidad de crecimiento y ejercitar sus "agallas" en pos de niveles de logro más altos.

Conclusión

Imagen ornamental: palmera de plástico que parece de verdad sobre la arena de una playa

Tener el síndrome de impostor también podría ser una buena señal. Si eres lo suficientemente consciente de ti mismo para preocuparte de que puedes ser un fraude, lo más probable es que no lo seas.

Al menos no estás sujeto al sesgo cognitivo conocido como el efecto Dunning-Kruger, que es cuando las personas con baja capacidad erróneamente piensan que su habilidad es mucho más alta de lo que es, y no reconocen su propia incompetencia.

¿Tiendes a cuestionar todos tus logros de forma compulsiva? Si es así, ¿cuál ha sido tu estrategia más eficaz para eliminar esa limitación? Comparte tu experiencia en los comentarios.

Página Anterior Página Siguiente