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.

Login con sesiones en PHP 7.1

12/12/2017
Artículo original

Espero y este post sea de tu agrado, no olvides compartirlo en su redes sociales y sobre todo.. Gracias por seguirnos!

El día de hoy aprenderemos a crear un login con sesiones en PHP de la mano de Gabriel Chavez, autor invitado del blog, mediante un ejemplo práctico en código donde aprenderemos fácilmente a implementarlas. Además también veremos como implementar mecanismo antispam con Google reCaptcha, ¿listo? Te dejo con Gabriel! El uso de las sesiones generadas por PHP se ha puesto muy de moda cuando trabajamos paginas dinámicas con este maravilloso lenguaje, si nos remontamos unos años atrás, se trabajaban con Cookies, lo que representaba un grave agujero de seguridad para el usuario ya que las Cookies se almacenan en la

Compartir en Facebook

Comparte en Google Plus

Compartir en Twitter

El post Login con sesiones en PHP 7.1 aparece en el Blog de Jonathan Melgoza

[Java] Utilizar un ArrayList en un JFrame

07/12/2017
Artículo original

/*
 *  -----------------------------------
 *  java mexico
 *  -----------------------------------
 *  Descripcion :
 *  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 circulo,
 *  y así hasta tapizar el panel de círculos de diferentes colores.
 *  Mi pregunta es, ¿como 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.
 *  -----------------------------------
 *  Actualizacion: 2017_12_06
 *  -----------------------------------
 *  Descripcion :
 *  Para el siguiente ejercicio utilizo Vectores. de poscion dinamica...
 *  el vector va aumentando en tamaño o posiciones cada vez que hago clic en el JFrame. v.add()
 *  -----------------------------------
 *  1. import java.util.Vector;                  importar clase

leer más

INSERTAR FECHA EN MySQL DESDE JAVA

07/12/2017
Artículo original

*  te envio el codigo completo con las nuevas modificaciones compilado en Netbeans 8.2
 *  -----------------------------------
 *  Creo el proyecto con el nombre PruebaFecha
 *  elimino la clase que me crea por defecto. PruebaFecha.java
 *  -----------------------------------
 *  Agrego dos objetos nuevos al proyecto:
 *  ConexionMySQL.java                           conexion base de datos Mysql. test  Tabla. prueba
 *  PruebaFechas.java                             Jframe
 *
 *  ----------------------------------- Jframe
 *  0. mysql-connector-java-5.1.18-bin.jar      copiar la libreria en la carpeta lib de mi projecto ...\lib\
 *  0. jcalendar-1.4.jar                             copiar la libreria en la carpeta lib de mi projecto ...\lib\
 *  0. Agregar las librerias a mi projecto         package Libraries
 *
 *  1. import com.mysql...                               al copiar el metodo PruebaFecha me importa las librerias
 *                                                                    para la conexion a la base de datos Mysql
 *     import javax.swing.JOptionpane            libreria para cuadro de mensajes en pantalla

leer más

Cómo leer y escribir archivos CSV con Java

07/12/2017
Artículo original

Imagen ornamental

Una situación muy habitual en cualquier aplicación consiste en la necesidad de leer y escribir archivos con valores separados por comas (CSV, de su nombre en inglés: Comma Separated Values).

Esto se puede hacer nativamente en Java usando las API de lectura y escritura de archivos y procesando cada línea con código específico para separar los valores o para crear las líneas correspondientes. Pero hacerlo así, "a pelo" es un trabajo muy ingrato, propenso a errores y que tiene poco sentido si podemos hacerlo de una manera mejor y más directa. Y esto precisamente es lo que nos proporciona la conocida biblioteca Open Source llamada opencsv.

Además su licencia es de tipo Apache 2.0, lo que nos permite usarla para cualquier propósito, incluso para crear aplicaciones comerciales.

Aunque opencsv tiene infinidad de posibilidades, vamos a ver los métodos más sencillos para poder usarla en nuestras aplicaciones, sean estas de escritorio, Web, etc...

Cómo es un archivo CSV

Como su propio nombre indica, un archivo CSV consiste en una serie de valores separados por comas, que es el caso más habitual, aunque en realidad las comas muchas veces pueden ser otros caracteres, como puntos y coma, tabuladores, etc...

Por regla general estos archivos comienzan con una línea que lleva los nombres de cada uno de los campos de datos que se están almacenando.

Por ejemplo, el siguiente es un fragmento de un archivo CSV que representaría información sobre los códigos estándar para representar a los diferentes países del mundo. Incluye el nombre del país, su código de 2 caracteres, de 3 caracteres, su código numérico y si es considerado un estado soberano o no (sacada de aquí):

English-Short-Name,Alpha-2-code,Alpha-3-code,Numeric-code,Independent
Afghanistan,AF,AFG,4,Yes
Åland Islands,AX,ALA,248,No
Albania,AL,ALB,8,Yes
....
Spain,ES,ESP,724,Yes

La primera fila contiene el nombre de los diferentes campos, y cada una de las siguientes lleva los valores de esos campos de cada registro.

Puedes descargar el archivo entero desde aquí (ZIP, 3.5KB).

Procesar este tipo de archivos es muy sencillo pues es leer las líneas una a una y separarlas por las comas para obtener los campos correspondientes, así que se puede hacer con las capacidades básicas de cualquier lenguaje de programación o plataforma. Ahora bien, se pueden dar muchos casos especiales que hay que tener en cuenta, como campos vacíos por el medio, campos vacíos al final, valores que lleven comas como parte de su contenido... Y entonces la cosa empieza a complicarse.

Cómo leer archivos CSV con Java y opencsv

Lo primero es hacerse con el JAR de opencsv, que puedes descargar desde su página de SourceForge. Una vez descargado y añadido a tu proyecto el código necesario es muy directo:

String archCSV = "D:\\ISO-Codes.csv";
CSVReader csvReader = new CSVReader(new FileReader(archCSV));
String[] fila = null;
while((fila = csvReader.readNext()) != null) {
    System.out.println(fila[0]
              + " | " + fila[1]
              + " |  " + fila[2]);
}

csvReader.close();

Este código tan sencillo lo que hace es crear una instancia de la clase CSVReader expuesta por opencsv a la que le pasa en su constructor el FileReader de Java necesario para leer el archivo que nos interesa. Luego en un bucle indefinido de tipo while se recorren todas las filas una a una para leerlas y mostrar los valores de cada campo por la consola.

Fíjate en que, una vez leída una fila con readNext(), se obtiene un array que en cada una de sus posiciones tiene el valor correspondiente, y ya se tiene en cuenta cosas como las mencionadas (que falte un campo, etc...).

Usar un separador distinto a la coma

Si el separador utilizado fuera otro diferente (por ejemplo un ; en vez de una coma, cosa que hace Excel en Español cuando exportas una hoja de cálculo a CSV), simplemente deberías indicar dicho separador como segundo parámetro del constructor, así:

CSVReader csvReader = new CSVReader(new FileReader(archCSV), ';');

Fíjate que en este caso se usan comillas simples y no dobles ya que se trata de un literal de tipo char, no de una cadena. Si necesitamos usar caracteres especiales podemos "escapearlos" de la manera habitual. Por ejemplo, para usar un tabulador podríamos escribir:

CSVReader csvReader = new CSVReader(new FileReader(archCSV), '\t');

Datos con el separador dentro y "escapeados"

En los archivos CSV si necesitas incluir una coma dentro de un dato lo habitual es "escapear" ese valor utilizando un carácter delimitador que se pone al principio y al final del campo.

Por ejemplo, imagínate que tu dato contiene un valor decimal en español, que utiliza la coma, algo así:

Producto,Precio Kg,Disponible
Queso, "6,57",Sí
Pan, "1,32",No

En este tipo de casos lo más normal sería que cambiásemos el carácter delimitador, pero quizá no podemos. Por ello, lo que se hace es usar comillas dobles para envolver el valor del campo, como hemos hecho en este caso. Así, el precio del Queso, que son 6,57€/Kg, queda perfectamente delimitado y la coma que lleva dentro no se confunde con las comas que se utilizan como separadores de los valores.

Por defecto opencsv considera que las comillas dobles son el delimitador que se usa para este tipo de casos. Por ello no tendremos que hacer nada si es el que utiliza nuestro archivo. Pero si no es este el caso y se ha utilizado otro delimitador cualquiera (por ejemplo, unos "pipes", |, algo también muy habitual), se puede indicar como tercer parámetro del constructor:

CSVReader csvReader = new CSVReader(new FileReader(archCSV), '\t', '\|');

En este caso estaríamos indicando que el separador de valores es el tabulador y el delimitador de éstos es el "pipe".

Leer todas las filas de golpe

Si quisieras leer y obtener todas las líneas de golpe en lugar de ir una a una podrías usar el método readAll():

CSVReader csvReader = new CSVReader(new FileReader(archCSV));
List<String[]> datos = csvReader.readAll();

que ya nos entregaría una lista de matrices de cadenas que podemos procesar del mismo modo pero en un bucle determinado de tipo for.

Cómo generar archivos CSV con Java y opencsv

Ahora que ya sabemos cómo escribir los archivos, vamos a realizar el proceso inverso: partiendo de unos datos que tenemos en memoria (quizá en una matriz o una lista de objetos), vamos a crear en disco un archivo .csv con esa información delimitada por comas.

Suponiendo que queremos ir escribiendo línea por línea, el proceso se parece mucho al de lectura, usando un CSVWriter en lugar de la clase que usábamos para leer:

String [] pais = {"Spain", "ES", "ESP", "724", "Yes"};

String archCSV = "D:\\ISO-Codes.csv";
CSVWriter writer = new CSVWriter(new FileWriter(archCSV));

writer.writeNext(pais);

writer.close();

En este caso, por sencillez, estamos simulando que tenemos un dato metido en un array, pero en la práctica obtendríamos esta información de una base de datos, de la entrada de un usuario, etc... Eso ya es cosa tuya. Pero el proceso sería el mismo.

Si tenemos más de un dato al mismo tiempo (por ejemplo un conjunto de registros sacados de una base de datos) y queremos escribirlos todos de golpe, podemos usar writeAll() para ello:

//Creo mi lista de países (los sacaría de algún lado, aquí los creamos a mano para el ejemplo)
List<String[]> paises = new ArrayList<String[]>;
paises.add({"Afghanistan", "AF", "AFG", "4", "Yes"});
paises.add({"Spain", "ES", "ESP", "724", "Yes"});
//Etc...

String archCSV = "D:\\ISO-Codes.csv";
CSVWriter writer = new CSVWriter(new FileWriter(archCSV));

writer.writeAll(paises);

writer.close();

Con esto se escribirían todos de golpe.

Del mismo modo que antes podíamos especificar el separador y el delimitador como segundo y tercer parámetro del constructor respectivamente, en el caso del CSVWriter pasa exactamente lo mismo, por lo que podríamos indicar otros distintos a la coma y las comillas dobles por defecto, para que se usasen en la generación del archivo si así fuese necesario.

Técnicas más avanzadas

Lo que acabamos de ver es la manera más simple y directa de leer y escribir CSV desde Java. Si queremos tener más potencia podemos usar otras características avanzadas de opencsv para lograrlo. Pero esto ya se sale del ámbito y del espacio disponible para un artículo como este.

Por ejemplo, en archivos cuya primera línea contiene los nombres de los campos de los registros (como en el ejemplo de los países que vimos al principio), es posible obtener directamente objetos Java Bean mapeados cuyas propiedades son dichos campos, de modo que no tengamos que manejar elementos de un array por orden usando su índice. Y lo mismo para escribirlos a disco desde objetos. Para ello te remitimos a la documentación de opencsv (lectura y escritura), así como para aprender otras características más específicas de esta biblioteca (anotaciones, filtrado de datos, saltar registros...).

Cambiar el color de selección con CSS

05/12/2017
Artículo original

Espero y este post sea de tu agrado, no olvides compartirlo en su redes sociales y sobre todo.. Gracias por seguirnos!

¿Tienes un sitio web? ¿Deseas personalizarlo al máximo con los colores de tu marca? Hoy vamos a hablar sobre un efecto CSS para darle un toque más personalizado a nuestro sitio web, te mostraré como cambiar el color de selección con CSS para utilizar los colores de tu marca o negocio. Siempre queremos diferenciarnos de los demás, hablando de nuestra presencia en Internet no es la excepción. Ya hemos hablado sobre como añadir un icono font awesome en todos nuestros encabezados automaticamente, el efecto CSS de hoy es también muy significativo para darle un toque de personalización más a tu

Compartir en Facebook

Comparte en Google Plus

Compartir en Twitter

El post Cambiar el color de selección con CSS aparece en el Blog de Jonathan Melgoza

Página Siguiente