Speedlinking 18 junho 2008

Javascript: Teclado Virtual

Por vezes é necessário alguma segurança nos campos de input dos sites. Para essas ocasiões uma boa forma de controlar se o utilizador é humano ou maquina usa-se um teclado virtual.
As plataformas de home banking adoptaram esta solução e em alguns casos é bastante útil.

Grey Wyvern criou um teclado virtual em JavaScript bastante interessante.

javascript keyboard

Instalação

A sua instalação é relativamente simples:

  1. Faz download do código (Copy/Paste) para um ficheiro e chama esse ficheiro keyboard.js
  2. Copia o código CSS e guarda-o num ficheiro que poderá ser keyboard.css
  3. Coloca esses ficheiros online
  4. Insere o seguinte código dentro da HEAD da página onde queres que apareça o teclado:

    <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="keyboard.css">

    Nota: Este código assume que os ficheiros estão na mesma directoria que a página.

  5. Para definir qual o campo de input onde o teclado deverá actuar basta atribuir a class keywboard:

    <input type="text" value="" class="keyboardInput">

» Javascript Graphical / Virtual Keyboard Interface

Star Wars: The force Unleashed

Hoje a ler as minhas feeds encontrei no A Source of Inspiration um artigo que apontava para um novo trabalho dos estúdios 2Advaced. Há algum tempo que não acompanho o seu trabalho, my bad, que são sempre excelentes obras e arquitectura em Flash.

star wars the force unleashed

Pelo que vi no site, trailer e imagens o jogo está excelente e tal como o Armando diz, tem capacidade para chamar a atenção de alguém que não liga muito a jogos.

Colecção de scripts para verificar a força de uma password

Aqui fica uma colecção de scripts úteis para verificar a força de passwords criadas.

URL: http://webtecker.com/2008/03/26/collection-of-password-strength-scripts/

Aproveitei para acrescentar um verificador simples ao ficheiro do meu tutorial de como criar um gerador de passwords com javascript.

Podem ver um exemplo em funcionamento aqui.

Bugfix para imagens PNG no Internet Explorer

Em 2006 publiquei um artigo que ensinava como colocar transparência em imagens PNG no Internet Explorer 6.

Há uns tempos atrás dei de caras com uma library em javascript que torna o IE mais de acordo com os standards nomeadamente no que se trata des CSS e transparência em imagens PNG.

Site do Script: http://dean.edwards.name/IE7/

Como instalar

Basta colocarem o seguinte código dentro das tags <HEAD></HEAD>

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Podem fazer download do ficheiro JavaScript aqui: http://code.google.com/p/ie7-js/downloads/list.

O ficheiro ZIP trás diversos ficheiros:

  • ie7-core.js – É um modulo fundamental. Contem um motor que permite que CSS funcione correctamente.
  • ie7-html4.js – Arranja tags HTML incorrectas.
  • ie7-layout.js – Permite o suporte do box-model do W3C e permite o suporte das propriedades CSS min-width, max-width e min-height.
  • ie7-css2-selectors.js – Permite usar selectores do CSS2.
  • ie7-graphics.js – Permite que o browser suporte transparencia PNG.
  • ie7-fixed.js – Permite o uso da propriedade Fixed no posicionamento de imagens.
  • ie7-standard-p.js – Um compacto de todos os scripts em cima, desta forma basta chamar apenas 1 script.
  • ie7-css3-selectors.js – Permite o suporte de selectores CSS3.
  • ie7-css-strict.js – Todos os selectores CSS são convertidos em classes do IE7.
  • ie7-overflow.js – Permite o uso de overflow:visible.
  • ie7-recalc.js – Permite o uso de document.recalc().
  • ie7-dynamic-attributes.js- Permite o suporte de selectores com atributos dinâmicos.
  • ie7-squish.js – Bug fixes.

Mais informações sobre os ficheiros em:
http://dean.edwards.name/IE7/usage/configure.html

Para que o script saiba quais os ficheiros em que deve actuar devem incluir -trans.png no nome das imagens.

Este script usa a propriedade filter que impede, no IE6, que se consiga posicionar ou repetir uma imagem de fundo PNG, a solução pode passar por criar um div que permite a inclusão da imagem como fundo.

Podem ler mais sobre este script em:
http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/

Site Oficial: IE7-JS

« Older Entries
Newer Entries »