Creando una calculadora – introducción a Electronjs

Ejemplo Calculadora con electron.js

El siguiente post es el inicio de un manual que nos llevará paso a paso por el desarrollo de una aplicación con electron.js, la intensión es llegar asta la producción, publicación y el sistema de actualizaciones:

 

Electronjs (intro y un poquito de historia):

El proyecto Electron.js inicialmente concebido como Atom-Shell ya que inicialmente fue la herramienta que permitía al equipo de github generar el binario de Atom el cual es un editor de código multiplataforma.

Comenta la historia que los miembros de github tenían problemas con integrar su desarrollo ya que tienen un gente muy eficiente en lenguajes de bajo nivel (p.e. Scott Chacon) y por otra parte tienen excelente elementos en el manejo del UX (p.e. Mark Otto).

Todo esto genero algo de conflicto ya que querían llevar todo el look and feel de la web en una aplicación de escritorio, fue entonces cuando a Cheng Zhao se le ocurrió la maravillosa de crear Atom-Shell partiendo de :

  • Realizar la  aplicación utilizando un  webView de código abierto (utilizaron Chromium).
  • Programar la lógica desde Javascript utilizando nodejs (con todos los módulos compatibles).

funcionamiento de electron.js

Instalando electronjs.

Una ves explicado que es electronjs y que hace uso de nodejs por lo tanto para empezar a construir aplicaciones con electron.js necesitamos:

Creando un programa electron.js

Electronjs define varios elementos de los cuales los elementos mas basicos son dos:

  • browserWindow: que es la ventana gráfica, de este objeto abra una instancia para cada ventana de la aplicación.
  • app: es la aplicación de electron.js de esta solo existe una instancia que contiene la aplicación(solo hay una única instancia).

La siguiente estructura de directorios es la que tendra inicialmente el proyecto:

|--package.json        <-- Def. del proyecto, p.e. la lista de dependencias
|--disparador.js       <-- Se encarga de arrancar electron
`--src/
   |-- estilo.css      <-- Contiene el diseño de la aplicación
   |-- icon.png        <-- El icono de la aplicación
   |-- index.html      <-- Contiene la interfaz de la aplicación
   `-- logica.js       <-- Administrar la lógica de la aplicación

El funcionamiento de la aplicación la trataré de describir con el siguiente diagrama:

Diagrama de flujo de la aplicación

En la siguiente imagen se muestra a grandes rasgos como esta construida la interfaz.

Elementos que componen el UI de la aplicacición

 

Me gustaría explicar como crear una aplicación básica en electrón pero creo que la documentación oficial es muy buena así que me delimitaré a dejar el enlace:

https://electronjs.org/docs/tutorial/first-app#installing-electron/

 

Por otra parte agregue el proyecto a un repositorio al cual le iré creando una etiqueta que apunte a cada uno de los siguientes posts, de momento esta la versión 0.1:

https://github.com/fitorec/calculadora-electron/tree/v0.1

 

¿Que sigue?

En el siguiente post vamos hablar sobre el uso de eventos en electron.js de tal forma que podamos cachar la acción de las teclas.

Por otra parte me gustaría que me dejarán en los comentarios que tema les gustaría que se tratara en las próximas sesiones.

CSS Cursor hand (de links) cross-browser

En ocasiones queremos que cierto elemento en nuestras paginas tenga el cursor del tipo link, en CSS este es un Tip algo viejo pero a la vez útil, ya que desgraciadamente no todos los navegadores aceptan los mismos atributos.

CSS Algo de código

element {
	cursor: pointer;
	cursor: hand;
}

Para mayores informes y revisar la tabla de compatibilidad de los navegadores visitar: Cursor estilos

Animación de corazón CSS3 usando keyframe

En diciembre del año pasado aprendí esta técnica viendo el blog de Lea Verou en un contenido titulado «CSS Animations with only one keyframe«, la cual he usado para animar iconos realizados con tipografía(si te interesa esta técnica te recomiendo ver estas iconografias en fuentes), pero no me había dado tiempo de compartirla, y creo que la fecha se presta para esto, sin mas dejo el ejemplo:

Ver ejemplo funcionando

¿Como funciona? Breve explicación

Tratare de explicar el funcionamiento de esta animación aunque en trucos-CSS lo explican a mejor detalle. Lo primero que se hace es definir una animación la cual tiene la siguiente estructura CSS:

@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.4); }
    to { transform: none; }
}

Aquí estamos definiendo una animación la cual tiene el nombre de latidos, esta la vamos a instanciar(fijar) en algún elemento de nuestro código CSS, como se muestra a continuación:

.corazon {
	display: inline-block;
	font-size: 150px;
	text-shadow: 0 0 10px #222,1px 1px  0 #450505;
	color: red;
	animation: latidos .5s infinite;
	transform-origin: center;
}

Con esto estamos indicando que la animación(latidos) definida previamente va a ser ejecutada cada 0.5 segundos en un ciclo infinito sobre los elementos que pertenezcan a la clase corazon.

Finalmente solo faltaría definir algún elemento HTML con la clase corazon como se muestra en el siguiente código HTML:

<div class="corazon">&#x2665;</div>

El código &#x2665; contenido dentro del div con la clase corazon es el carácter con el símbolo de un corazón (♥), el cual tendrá el estilo de la clase corazon y estará animado por la definición de latidos.

Bien, espero te sirva de algo! y asta luego.

Barra separadora HR con puro CSS3

En ocasiones es necesario agregar alguna linea separadora, por ejemplo para separar los artículos ó los párrafos de algún contenido, para definir el estilo a estas barras existen distintas técnicas. Sin embargo hace poco vi algunas en CSS tricks que me gustaron:

Ejemplos HR con solo CSS en la página de CSS-Tricks

Ejemplos HR con solo CSS en la página de CSS-Tricks

Me gusto el hecho que solo requieren de puro Código CSS y con el HTML solo le damos estilo a dicha separadores, haciendo con esto una implementación bastante eficiente.

Especialmente me gusto la propuesta de Tomas Theunissen (el estilo con las borde redondos) y también me gusto el estilo de Harry Roberts (el que tiene el simbolo § en el centro).

 

Haciendo una combinación El diseño web es como recetas de cocinas puedes combinarnas y con esto obtener nuevas recetas

Vamos hacer una barra híbrida entre ambos estilos propuestos, como se muestra a continuación:


Para conseguir esto es necesario re-utilizar el código CSS y generar el siguiente:

/* Vamos a definir una barra separadora con el estilo de propuesto
 * por: Tomas Theunissen combinado con el de Harry Roberts 
 * 
 * Para mayor información: http://css-tricks.com/examples/hrs/
 * */ 
hr.separador_post { 
 height: 30px;
 border-style: solid;
 border-color: #BFBFBF;
 border-width: 2px 0 0 0;
 border-radius: 20px;
 text-align: center;
}

hr.separador_post:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    -webkit-border-radius:20px;
       -moz-border-radius:20px;
            border-radius:20px;
}

hr.separador_post:after {
    content: '★';
    color: #DC5500;
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

El código anterior define la clase separador_post, el cual tiene bordes redondos al cual le agregue como símbolo una estrella de color anaranjada. Ahora solo faltaría agregar el siguiente código Html para usarla:

<hr class='separador_post'/>