Introdução ao Electron – faça aplicativos desktop com HTML, JS e CSS!!

Fala pessoal, hoje vou falar um pouco sobre o Electron , mas neste caso não é a partícula de carga negativa que fica girando ao redor do núcleo atômico, mas sim de um framework que possibilita criar aplicativos desktop para os três grandes  sistemas operacionais (MacOs, Linux e Windows)  com o uso de HTML, CSS e Javascript, com isso você pode ter uma alternativa ao WPF e Windows Forms do .NET, ao JavaFX e o Swing do mundo Java.

desconectadoUma das maiores vantagens ao meu ver no uso do Electron é poder trabalhar desconetado, ou seja desenvolva seu aplicativo “Offline First” porque sempre temos que levar em conta que seu usuário não está constantemente on-line.

O Electron foi desenvolvido pelo pessoal do GitHub, mas trata-se de um projeto open-source então você pode contribuir para o projeto também.

Ele trabalha com o Chronium que é o projeto em que o Google Chrome se baseia e também usa o NodeJs para dar ao desenvolvedor Apis para o desenvolvimento.

tela13

Leia mais…

Detectar se o caps lock está ativado com Jquery

Fala, pessoal!!
Estou desenvolvendo um projeto onde faço o login pelo Active Directory e ele considera letras maiúsculas e minúsculas na senha e quando o caps lock está ativado temos problemas pois o AD pode não encontrar o usuário com a senha informada se o valor estiver todo em maiúsculo ou todo em minúsculo.
E por exemplo no meu teclado a luz do caps lock fica em uma posição meio escondida, abaixo está uma solução para implementar a visualização em uma tela web.

A ideia é que apareça um aviso ao lado ou embaixo do campo de senha:
login_capslock

Para este efeito crie na sua página um elemento aonde você quer criar o aviso:

<span id="error_capslock">Caps Lock is ON.</span>

Adicione o CSS:

#error_capslock {
	border: 1px solid #FFFF66;
	background-color: #FFFFCC;
	display: inline-block;
	margin-left: 0px;
	padding: 3px;
	display: none;
}

E por fim o javascript:

$(function () {
   var isShiftPressed = false;
   var isCapsOn = null;
   $("#Password").bind("keydown", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
      isShiftPressed = true;
   }
   });
   $("#Password").bind("keyup", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
         isShiftPressed = false;
      }
      if (keyCode == 20) {
         if (isCapsOn == true) {
             isCapsOn = false;
             $("#error_capslock").hide();
         } else if (isCapsOn == false) {
             isCapsOn = true;
             $("#error_capslock").show();
         }
      }
      });
      $("#Password").bind("keypress", function (e) {
          var keyCode = e.keyCode ? e.keyCode : e.which;
          if (keyCode >= 65 && keyCode <= 90 
&& !isShiftPressed) {
             isCapsOn = true;
             $("#error_capslock").show();
          } else {
         	$("#error_capslock").hide();
         }
         });
   });

Não podemos esquecer de colocar a chamada ao jquery no inicio da página ok? pode ser desta forma:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.8.3/jquery.min.js"></script>

Bem é isso ae!!

Abraços.