sábado, 29 de dezembro de 2012

Game Combat Arms está dando erro -2,10013

Desde o dia 20 deste mês de dezembro, justamente o primeiro mês de férias, o jogo Combat Arms, muito popular entre os pré-adolescentes, adolescentes e adultos, está dando um erro irritante ao ser iniciado.

Trata-se de um jogo já muito famoso de tiro, que virou uma marca registrada da Level-up Games. Por sua consolidação no mercado, deduzimos que existe uma equipe de suporte, manutenção, desenvolvimento e supervisão trabalhando constantemente, para atualizar o programa e manter os servidores a pleno vapor.

Após a consagração no mercado, é preciso um trabalho para manter a credibilidade do produto. Recomendações para se procurar a solução em foruns são absolutamente anacrônicas. O jogo tem que funcionar após instalado, sem que o jogador tenha que intervir com esta ou aquela alteração.

A Level-up tem que colocar a mão na consciência. Sua revista é vendida às custas da credibilidade de seus jogos. Que testem as versões. Lá dentro só tem crânios. E que os jogadores cobrem o bom funcionamento.

Que pelo menos a Level-up inclua o modo de jogo offline em caso de indisponibilidade de servidores. Será que é tão difícil.


Para Windows XP:
Press "Windows Key" + "R"
Type "cmd.exe" in the box and click "OK"
Type "ipconfig /flushdns" and press "Enter" on your keyboard
Then type "netsh winsock reset" and press "Enter" on your keyboard
Reboot your PC.

Para Windows Vista / 7:
In the start menu search bar, type "cmd"
Right Click "cmd.exe" and select "Run as administrator"
Type "ipconfig /flushdns" and press "Enter" on your keyboard
Then type "netsh winsock reset" and press "Enter" on your keyboard
Reboot your PC.

sábado, 22 de dezembro de 2012

Wifi II - O alcance das conexões Wireless

Em alguns escritórios, e até mesmo em residências, o WiFi não funciona com eficiência, por que ?

Por especificações de projeto, o WiFi tem o alcance de 75 a 300 metros sob condições ótimas:


  • Ausência de interferências;
  • Ausência de barreiras físicas consistentes (rocha ou concreto);
  • Estações de trabalho com velocidades de processamento razoáveis.


Mas no ambiente urbano, onde se utiliza muito o celular, controles eletrônicos diversos (ar condicionado, controle remoto de TV e portões eletrônicos).

Comparando ao Bluetooth

O alcance do Bluetooth é de apenas 10 metros. Mesmo com lajes entre um dispositivo e outro, você pode, ao procurar dispositivos Bluetooth, "enxergar" o Home Theater ou o celular do vizinho de cima, ou do vizinho de baixo facilmente.

O que fazer ?

Coloque seu roteador WiFi em uma altura próxima da altura da pessoa mais alta da casa. Não precisa exceder esta maior altura, apenas ficar próxima. Não coloque o roteador atrás de mais de 2 paredes dos pontos de acesso.

Você pode utilizar o macete da TechMundo para melhorar o sinal do WiFi:


Wifi I - Como nasceu o Wireless Fidelity


O WiFi é marca registrada da Wi-Fi Alliance e seu símbolo em lojas, shoppings e hotéis é bem conhecido.

Esta tecnologia nasceu nos anos 1970, nas ilhas havaianas. Ele se destinava a estabelecer uma conexão para comunicação entre as ilhas do Hawai. A rede era denominada AlohaNet (bem sugestivo).

Quem a projetou foi Norm Abramson, oriundo do Departamento de Engenharia de Stanford para a Universidade do Hawai. 

Um dos fatores que propiciou a implantação deste tipo de rede nestas ilhas foi a ausência de fatores de interferência, como prédios altos, indústrias, e excesso de gente. O oceano plano também facilitava o trânsito do sinal. Em breve, os sinais estavam viajando de Lanai para Oahu. 

Porém, a transmissão de sinais por ondas de rádio (basicamente o que o WiFi utiliza) não possuía a velocidade necessária para a implantação da Internet. Esta velocidade só foi atingida com a chegada da tecnologia DSL (Digital Subscriber Line). Esta tecnologia possibilita o transporte dos sinais de chamada telefônica e de dados na mesma linha, com pelo menos o dobro da velocidade antes atingida pelas conexões a cabo. E a vantagem deste tipo de tecnologia é estar com sua infra-estrutura implantada em virtude das estações controladoras de telefone, já bem consagradas e espalhadas pelas nossas cidades.









quinta-feira, 20 de dezembro de 2012

Como compartilhar links no Facebook

O link de compartilhamento no Facebook tem o seguinte formato:



Basta colocar este conteúdo no atributo HREF de um link.


terça-feira, 11 de dezembro de 2012

Conexão com SQLServer através do ASP

Uma das formas de conexão com banco de dados SQLServer se dá através do driver SQL Server nativo do servidor.

Neste exemplo a conexão é local, como ocorre com as aplicações Web. Como o servidor Web hospeda o banco de dados, podemos declarar o server com o IP de localhost (127.0.0.1).


<%
Dim con
Set con = CreateObject("ADODB.Connection")
con.Open "driver={SQL Server};server=127.0.0.1;" & "database=PROJETOS;uid=sa;pwd=password"
Response.write con
con.close
%>

Se a página ASP mostrar algum conteúdo sem erro, a conexão teve sucesso.

segunda-feira, 10 de dezembro de 2012

Alterando a senha do administrador no SQLServer

No SQL Server Manager (versão 2008 R2), abra a pasta Security e Logins:


É exibido o conjunto de usuários do SQLServer (não de um banco em particular). Sobre o "sa" (System Administrator) dê o clique direito de mouse. Escolha Properties neste menu:



Na próxima tela, digite novamente a senha para este usuário e ...



...pressione o botão "OK". Está feito.

sexta-feira, 7 de dezembro de 2012

Como funciona o Roteador ou Router

O Roteador é como um PABX, ele distribui uma só conexão com a Internet em vários "ramais". É a melhor analogia para compreender o seu funcionamento.


Teoricamente, você poderia ligar um único computador ao cabo que vem da Internet. Os consumidores não aceitariam tal coisa. Então inventaram o Roteador. É claro que, em conceito, ele já existia para a telefonia. O processo inicialmente se chamava "multiplexação". Foi muito usado em terminais de caixas bancários, pois proporcionava enorme economia.

O que pode confundir é o tratamento dos endereços IP. Vamos a eles.

Endereços IP

Dominando a filosofia dos endereços IP desde o provedor até o computador, não vamos nos atrapalhar na hora de configurar o Roteador.

O modem que os concessionários de sinal de transmissão de dados colocam nas residências vem, invariavelmente, com o endereço interno 192.168.1.1.

Logo que se abre a tela de configuração de qualquer roteador, devemos mudar seu endereço, pois ele vem com o IP 192.168.1.1, que provoca "colisão" com o modem. Você vai notar que o acesso ao Roteador fica muito lento, pois será preciso desligar o modem para se ter acesso a ele antes da mudança de endereço. Quando tiver acesso à página de configuração, troque o endereço do Roteador para 192.168.10.11. Poderia ser qualquer outro, mas, em primeiro lugar, o prefixo tem que ser 192.168, para que ele seja ignorado por servidores DNS da rede. E o resto do endereço (.10.11) vai associar o número dado com a rede interna.

Como o Roteador trata os endereços

Repare que não nos preocupamos com o endereço IP do Provedor. Isto se explica pelo fato de que, com o roteador, ele não importa. Os computadores clientes recebem endereços administrados pelo Roteador. Ele passa a ser o mestre da rede.

Nas telas de configuração do Roteador, ele pede uma faixa de endereços a gerar. Para reservar alguns endereços para possíveis servidores da rede, forneça a faixa 192.168.10.50 até 192.168.10.250. Ou seja, a faixa de .10.12 até .10.49 fica para outro roteador, ou outro dispositivo de rede.

Endereços dinâmicos

O Roteador pode ser configurado para agir como DHCP, isto é, como servidor de endereços dinâmicos. Assim, ele "sorteará" um novo endereço AINDA NÃO USADO, dentro da faixa que você determinou na faixa de endereços, para qualquer novo equipamento que seja ligado a ele.

Mas, se dentro da sua rede, existirem sistemas que buscam arquivos em um computador fixo, como se ele atuasse como servidor de arquivos, não ative o endereçamento por DHCP. Isto é mais trabalhoso, pois será preciso configurar o endereço IP em cada máquina da rede.

O que o Roteador vê

O Roteador é o equipamento mais "fofoqueiro" da rede. Sendo o ponto de convergência de todas as máquinas de uma rede, ELE VÊ TODOS OS PACOTES QUE PASSAM. Desta forma, entendemos o que ele faz. Ele deixa os pacotes de sua sub-rede entrarem nos seus domínios, e ENTREGA OS PACOTES REFERENTES A CADA MÁQUINA, sem errar. De certa forma podemos dizer que ele é o "filtro" de pacotes locais.

Configuração

Neste blog existem dois posts que tratam da configuração de roteadores:

Roteadores em cascata

Configurar rede Wireless






quinta-feira, 6 de dezembro de 2012

Configurando javascript para utilizar o CKEditor - II

A script ASP para receber os dados do editor para gravação

Como vimos no post anterior, para gravar o conteúdo editado no TEXTAREA com o CKeditor, é preciso enviá-lo para uma script ASP no método post do formulário. O nome da script é RecebeTextarea.asp:


<%
Texto = Request("editor1")
Response.write(Texto)

%>
<head>
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
</head>
<body>
<form method="post" >
<textarea cols=60 rows=10 name="ta1"><%= Texto %></textarea>
<input type=submit>
</form>
</body>

Sendo uma script ASP, ela só funciona no protocolo HTTP, portanto é preciso hospedar todo o diretório ckeditor em um servidor IIS.


Configurando javascript para utilizar o CKEditor - I

O CKeditor é a nova versão do conhecido FCKeditor para Gerenciadores de conteúdo. Ele estabelece em uma tag TEXTAREA um editor HTML com muitas e úteis funcionalidades.

Baixe o CKeditor no endereço:

http://ckeditor.com/


Faça o download no botão indicado pela seta. Na página de download, escolha a versão 3.6.5, sobre a qual vamos descrever o processo de configuração.

Descompacte o arquivo zip obtido no download.:


Estrutura do diretório:

Debaixo do diretório anterior existe o diretório ckeditor, e debaixo dele a estrutura mostrada abaixo e à direita:


O diretório de exemplos é o _samples.


Os arquivos que vamos criar são os dois apontados pelas setas.

Copiamos o arquivo replacebyclass.html para replacebyclass2.html, traduzimos as mensagens e retiramos o que não interessava, além de colocar um evento onSubmit para o formulário do HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Replace Textareas by Class Name &mdash; CKEditor Sample</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<script type="text/javascript">
function formataSubmit(obj){
var Texto;
Texto = obj.editor1.innerText;
Texto = Texto.replace(/\n|\r|\t/g,"");
return true;
}
</script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="samples">
CKEditor Sample &mdash; Substitui Elementos Textarea pelo nome da Class(e)
</h1>
<div class="description">

</div>

<!-- Esta <div> mostra mensagens de alerta do editor. -->
<div id="alerts">
<noscript>
<p>
<strong>CKEditor requer JavaScript para execução</strong>. 
</p>
</noscript>
</div>
<!-- Este form prepara o HTML para envio do conteúdo para alguma script ASP que irá processá-lo -->
<form action="RecebeTextarea.asp" method="post" onSubmit="return formataSubmit(this);">
<p>
<label for="editor1">
Editor 1:</label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. Você está usando &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<!-- Créditos -->
<div id="footer">
<hr />
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
</p>
<p id="copy">
Copyright &copy; 2003-2012, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.
</p>
</div>
</body>
</html>

Retiramos o excesso de códigos que poderiam confundir os desenvolvedores, e incluímos o código javascript que retira os caracteres "new line", "line feed" e tabulações no evento onSubmit do formulário.

Cole este código em um editor, salve o HTML e execute.









quarta-feira, 28 de novembro de 2012

Uso do setTimeout em javascript - II

Já vimos o uso de um setTimeout em páginas HTML, com um só temporizador, com os conceitos associados. Agora vamos ver a sincronização de dois temporizadores.

Veja a listagem a seguir:


<html>
<head>
<style>
P.pg1 {position:absolute; left: 0; top: 100; border: solid 1 red; background-color: salmon; padding: 6px; width: 100px;}
P.pg2 {position:absolute; left: 900; top: 600; border: solid 1 red; background-color: yellow; padding: 6px; width: 100px;}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
var tempo1 = 100;
var tempo2 = 600;
var th1, th2;
function movePg1(){
tempo1--;
if( tempo1 > 0 ){
$("#p01").css('top',tempo1);
th1 = setTimeout("movePg1()",300);
}
}
function movePg2(){
tempo2--;
if( tempo2 > 0 ){
$("#p02").css('top',tempo2);
th2 = setTimeout("movePg2()",300);
}
}
$(document).ready(function(){
th1 = setTimeout("movePg1()",300);
th2 = setTimeout("movePg2()",300);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu parágrafo 1.</p>
<p id="p02" class="pg2">Eu parágrafo 2.</p>
</body>
</html>

É muito importante ter UMA FUNÇÃO PARA CADA TIMEOUT, para não estourar a pilha de armazenamento de retornos. Já fizemos tentativas para fazer um gerenciador único de timeouts, e a pilha estourou.

Os settimeouts são tratados em separado para cada objeto.

O efeito produzido é o seguinte:


Cada DIV segue seu controlador de timeout independente do outro.


segunda-feira, 26 de novembro de 2012

Uso do setTimeout em javascript - I

Comandos de sincronização de tempo são difíceis de se compreender. E com os péssimos exemplos da Internet, a coisa piora. Ninguém explica direito como devem ser usados. Em jQuery o método animate facilita muito as coisas. Escrevemos este post para quem quer ENTENDER REALMENTE o que vem a ser o timeout.

O melhor termo em português para "Timeout" é "O TEMPO ESTOUROU".

Veja o código a seguir:


<html>
<head>
<style>
P.pg1 {
position:absolute;
left: 0; top: 100;
border: solid 1 red;
background-color: salmon;
padding: 6px; 
width: 100px;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
var tempo = 100;
function movePg(){
tempo--;
if( tempo > 0 ){
$("#p01").css('top',tempo);
setTimeout("movePg()",300);
}
}
$(document).ready(function(){
setTimeout("movePg()",300);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu sou um parágrafo.</p>
</body>
</html>

Repare que A CADA CHAMADA DA FUNÇÃO QUE TRATA O TIMEOUT, é preciso REPETIR A CHAMADA à função. Ou seja, a cada ocorrência de TIMEOUT, a função é chamada UMA SÓ VEZ, por isto é preciso CHAMÁ-LA NOVAMENTE.

Em outras palavras: setTimeout NÃO ESTABELECE UM LOOP de chamada.

Os exemplos e explicações que temos achado na Internet não deixam isto claro.

Este exemplo faz o seguinte:


A cada chamada da função movePg, provocada pela instrução setTimeout, o estilo "top" é alterado.




sexta-feira, 23 de novembro de 2012

jQuery animate - III - Animação em Paralelo



Lembre-se de:

  • Copiar uma biblioteca jquery para o diretório deste HTML;
  • Colocar o nome correto da biblioteca jquery no HTML.


<html>
<head>
<style>
P.pg1 {position:absolute; left: 0; top: 0; border: solid 1 gold; background-color: yellow; padding: 6px; width: 100px;}
P.pg2 {position:absolute; left: 900; top: 600; border: solid 1 red; background-color: salmon; padding: 6px; width: 100px;}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p01").animate( { left:500, top: 200 },5000);
$("#p02").animate( { left:500, top: 200 },5000);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu sou um parágrafo.</p>
                <p id="p02" class="pg2">Eu sou dois parágrafo.</p>
</body>
</html>

jQuery animate - II - Posição Inicial


Lembre-se de:

  • Copiar uma biblioteca jquery para o diretório deste HTML;
  • Colocar o nome correto da biblioteca jquery no HTML.


Neste exemplo, o parágrafo esta inicialmente em uma posição determinada da tela, e não no último lugar disponível para ele, de acordo com as tags já colocadas.

<html>
<head>
<style>
P.pg1 {position:absolute; left: 900; top: 600; border: solid 1 red; background-color: salmon; padding: 6px; width: 100px;}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p01").animate( { left:500, top: 200 },5000);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu sou um parágrafo.</p>
</body>
</html>

jQuery Animate - I

Lembre-se de:


  • Copiar uma biblioteca jquery para o diretório deste HTML;
  • Colocar o nome correto da biblioteca jquery no HTML.



<html>
<head>
<style>
P.pg1 {position:absolute; border: solid 1 red; background-color: salmon; padding: 6px; width: 100px;}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p01").animate( { left:500, top: 200 },5000);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu sou um parágrafo.</p>
</body>
</html>

terça-feira, 20 de novembro de 2012

Redes de computadores - IP estático e IP dinâmico

Endereço IP

Endereço IP é o endereço para recebimento e entrega de "pacotes" no mundo da Internet.

Endereço IP estático

O endereço IP estático é um endereço fixo que se coloca principalmente em servidores, como os de DNS (que possuem a tabela de nomes e IPOs), SMTP (envio de email), POP3 (recebimento de emails), Gateways (Servidores ponte de redes) e em clientes internos de uma rede (prefixados 10.x.x.x), para maior controle de acesso.

Endereço IP dinâmico

O endereço IP dinâmico é fornecido no início de uma sessão de uso de um cliente, por um servidor DHCP. Ele é mais cômodo, e vem dominando sobre o estático, pois a ênfase em segurança de redes internas já se provou ser mais um atraso na produtividade do que algo útil em uma auditoria. Os interesses do público interno em redes sociais desviaram sua atenção de intenções hackers, e os processos trabalhistas colocam o excesso de segurança em xeque, pois é muito difícil escapar das acusações dos usuários de policiamento e invasão de privacidade por parte dos seus superiores.

Os Roteadores possuem a capacidade de fornecer endereços IP dinâmicos, tornando possível a construção de redes internas sem a necessidade do plantão de um analista de suporte, profissional caro e melindroso. Com o advento das redes WiFi, ninguém quer se preocupar em entender lógicas complicadas de endereçamento.


quinta-feira, 15 de novembro de 2012

Navegador Google Chrome trava ou não funciona

A Google está exagerando em seus plugins, extensões e "robots" de rastreamento.

O Navegador Google Chrome está com tantos serviços e complementos, que tá ficando chato de lidar. E os softwares fizeram convênios e parcerias com Babylon, Sweetim e Funmoods, e estas drogas estão entrando e avacalhando o Chrome.

Quando sua paciência estiver no limite, e o Chrome travar, faça o seguinte:

Desinstale o Chrome. Na página que pede os motivos de você ter feito isto, proteste;
Abra o Windows explorer no seguinte local:

C:\Users\seu nome de usuário\AppData\Local\Google\Chrome

Este diretório guarda todos os plugions e extensões do chrome. Apague tudo.

Daí, se você acha que o Chrome merece outra chance, entre no endereço www.google.com/chrome e reinstale o browser.


quarta-feira, 14 de novembro de 2012

O teimoso menu de contexto do Firefox (Context Menu)

O Firefox já foi um browser muito bom, obediente aos padrões e códigos do senso comum.

Mas as últimas versões estão teimosas. Códigos javascript que valem para vários browsers não estão funcionando nele.

Um dos exemplos se refere ao menu de contexto (obtido através do clique de botão direito de mouse).

Um dos recursos (que funciona nos outros mas não no Firefox) é:

<body id="bmain" name="bmain" oncontextmenu="return false;">

Então você varre a Internet em busca de uma salvação, e encontra, em jQuery:


$(document.body).bind('contextmenu', function(e) {
  e.preventDefault();
  // prevents native menu from being shown
  // the option "Disable or replace context menus" probably make firefox ignore this
});

Vergonha, também não funciona no Firefox. O que fazer ?

A extensão Menu Editor for Firefox

Pesquise Menu Editor nos Complementos para Firefox. Você vai achar:



Após instalar o complemento, acesse a página de complementos pelo menu de ferramentas:


Pressione o botão opções para "regular" o complemento:


Desmarque a opção visível. 

É lamentável que seja necessário desabilitar todo o menu, ao invés do Firefox obedecer ao comando de javascript. Esperamos que a Mozilla mude isto.


quarta-feira, 31 de outubro de 2012

ASP.NET - Configurando a exibição do Datagrid

A princípio a exibição de um controle Datagrid é bem "tosca". Mas com algumas tags de formatação, a coisa pode melhorar. No exemplo do post anterior substitua a tag asp:DataGrid pelo conteúdo abaixo:


A tag HeaderStyle se refere à primeira linha (a dos títulos das colunas). Uma das falhas deste controle é não produzir tags TH para as colunas dos títulos, o que seria mais correto e de acordo com o padrão W3C. A linha de títulos é uma TR com TDs como qualquer outra linha de dados.

A tag ItemStyle se refere às demais linhas de registros da tabela. Novamente se percebe uma falha gravíssima. Cada linha tem os estilos de ItemStyle repetidos. O correto seria estes possuírem uma referência à uma classe CSS, e esta sim seria definida para fazer a formatação desejada. Falha da Microsoft.

Compatibilidade com jQuery

O jQuery (biblioteca javascript do MIT) oferece infra-estrutura para implantar uma outra biblioteca de manipulação de tabelas: o tablesorter. Como a formatação do DataGrid não obedece ao padrão W3C, a implantação de sua funcionalidade tem que ser feita utilizando o código VBscript de produção dos códigos da tabela de forma a obedecer ao W3C, o que implica em perder a formatação compacta e sucinta do DataGrid. No entanto, o tablesorter tem a vantagem de fornecer as funcionalidades em tempo de cliente, com eficiência muito maior.

ASP.NET - Exemplo de Datagrid

O Datagrid é o controle mais sintético e útil para exibir o conteúdo de tabelas de bancos de dados.

Início da Script ASPX

Carrega as bibliotecas e abre a script VB:


Declara a Subrotina Page_Load e faz as configurações de parâmetros:

* 1 * - Nome do servidor, nome do compartilhamento no servidor e nome do banco Access;
* 2 * - Nome da tabela.


A montagem da sentença SQL depende dos nomes dos campos da tabela. Na figura mostramos alguns exemplos de nomes comuns, mas você deve usar os nomes dos campos da sua tabela.


Finalizamos com as tags HTML e com a tag asp:DataGrid.


sexta-feira, 26 de outubro de 2012

Ligando duas DIVs com um conector sem HTML5

Os gráficos e diagramas estão ganhando muita importância nas páginas Web. Estamos em um mundo essencialmente visual.

Criar retângulos, boxes e regiões retangulares com DIVs já é uma rotina nas páginas de Internet. No entanto, um aspecto do uso destas DIVs se torna um problema de geometria: a conexão com linhas. Como é que, sem o HTML5, podemos desenhar linhas de conexão ?

O diagrama do problema

Observe a figura a seguir. Ela mostra as grandezas geométricas envolvidas neste problema.


Início da página HTML:


* 1 * - A DIV da classe Conecta é um conector, ou seja, um traço. No Internet Explorer, para que o traço não acabe se tornando um retângulo com alguma altura, é preciso definir o tamanho do fonte como 1 pixel;

* 2 * - Com o mesmo intuito de *1*, garantimos que o traço não terá altura, anulando a altura da linha.

Scripts

Função javascript que cria uma DIV programaticamente (criaDiv):


É preciso usar a biblioteca jquery, que torna todas as tarefas de programação mais fáceis em torno da ponte entre as TAGS e o código javascript.

Função javascript que cria um conector - Parte I


Função javascript que cria um conector - Parte II


Função javascript que cria um conector - Parte III


O código HTML produzido é colocado dentro da DIV cujo Id é "main".

Finalização das funções

Em se tratando  de um javascript, temos que garantir que o HTML da página foi todo lido:


NÃO ESQUEÇA DE FECHAR A ÚLTIMA FUNÇÃO ABERTA COM "}".




quinta-feira, 25 de outubro de 2012

ASP.NET - Integração com jQuery

O ASP.NET cria o seu próprio modelo de controles e de eventos. A pergunta é:

Podemos utilizar jQuery com ASP.NET ?

Sim, não existe conflito de eventos, basta colocar as coisas nos lugares certos e nos tempos corretos. Veja o exemplo:


Como o ASP.NET utiliza tags <asp:, parece que não existe o INPUT. E como precaução, prefira fazer a referência pelo ID do controle, ao invés de utilizar o nome da Tag HTML com algum atributo (Id, name). Desta forma, você evita dores de cabeça.


quarta-feira, 24 de outubro de 2012

Primeiro programa em ASP.NET usando VB - Hello World

O VB é uma linguagem menos tipada e menos complexa que o C#. Podemos fazer classes utilizando VB, da mesma forma que em C#, no entanto elas são mais compreensíveis.

O formulário de entrada de dados é praticamente o mesmo, exceto pela definição da linguagem de programação:

Script AspNet_C_003.aspx

Biblioteca de classe AspNet_C_aspx.vb


* 1 * - Mesmo nome referenciado pelo atributo Inherits da tag "@Page";
* 2 * - Nome da rotina que trata o evento, composto de [ID do controle]_[Nome do Evento];
* 3 * - Nome da rotina, composta de [ID do controle].[Nome do Evento].


terça-feira, 23 de outubro de 2012

Programa básico em ASP.NET com C# - separação da classe

A forma mais estruturada de trabalhar com ASP.NET e C# é utilizar dois arquivos:


  • Um com a UI (User Interface - Interface do usuário);
  • Outro com as classes e funções utilizadas pela UI.


A seguir mostramos o exemplo.

Arquivo com a classe principal e funções (AspNet_C_002.aspx.cs):


* 1 * - O nome da classe é "_botao" para fins de referência ao código;
* 2 * - O nome do evento deve lembrar o nome do objeto visual, para facilitar as manutenções no código;
* 3 * - O controle cujo ID é "Texto" terá sua propriedade Text alterada;

Arquivo com a UI (Interface do usuário)(AspNet_C_002.aspx)

* 4 * - O nome do arquivo de códigos é AspNet_C_002.aspx.cs;
* 5 * - Em inherits, colocamos o nome da classe que consta no arquivo de classes e funções;
* 6 * - O nome da função que manipula o evento OnClick é Button_Click, contida em (AspNet_C_002.aspx.cs);
* 7 * - O nome do controle que terá seu texto modificado pela função Button_Click é "Texto";

Primeiro programa em ASP.NET usando C# - Hello World

Já vimos em post anterior um Hello World em ASP.NET utilizando o VBscript como linguagem de construção. Agora vamos ver o mesmo programa usando o C# como linguagem:


* 1 * - Na diretiva "Page" o programa declara que a linguagem usada é o "C#";

* 2 * - As variáveis precisam ser declaradas e tipadas;

* 3 * - O sinal de concatenação é o "+" e não o "&" como em VB.


Primeiro programa em ASP.NET - Hello World

Modelo mínimo de scripts para compreender as chamadas e o processamento de páginas em ASP.NET.

Primeiramente é preciso associar no servidor IIS (de preferência acima de 7.0) um usuário ao ASP.NET. Este é o usuário que será responsável pelas requisições ASP.NET. Em seguida, é preciso ajustar as propriedades do diretório virtual no IIS para que ele aceite as chamadas ASP.NET. Isto é feito associando este usuário ao diretório físico (pelo Windows Explorer).

Modelo


Diferentemente do ASP clássico, no .NET o programador tem que se preocupar com as bibliotecas a serem carregadas, dependendo dos comandos utilizados. A primeira e mais importante é a "System.IO", cujo nome já sugere que ela é responsável pelas entradas e saídas (Request, Response, entrada e saída para arquivo).

Não existem instruções soltas pelo código. Todas precisam estar dentro de eventos (Sub).

Todas as variáveis tem que ser declaradas através da instrução Dim.

Algumas bibliotecas mais importantes:

System.Data - Base das funções que manipulam o modelo ADO (Acesso a dados)
System.Data.Common - Funções comuns da camada de dados do ADO
System.Data.Odbc - Funções do ADO que manipulam ODBC
System.Data.OleDb - Funções do ADO que manipulam OLEDB
System.Net.Mail - Funções para uso do modelo SMTP (email)
System.Numerics - Complementa os tipos numéricos default do ASP.NET
System.Text - Funções que manipulam ASC e UNICODE
System.Web - Fornecem os elementos dos objetos HTTPRequest e HTTPResponse
System.Windows.Forms - Encapsulamento dos controles visuais Windows
System.Windows.Forms.Design - Suporte à configuração de controles visuais no momento de projeto


Redirecionamento de página em ASP

Certas checagens de parâmetros, senhas, variáveis de sessão e outros, são necessárias antes de mostrar uma página. Uma vez feitas estas checagens, é feito um REDIRECIONAMENTO para a página que realmente corresponde à tarefa em si.

A seguir, um modelo de redirecionamento


<%
Ip1 = "10.1."
Ip2 = "10.3."
IPdoCliente = Request.ServerVariables("REMOTE_ADDR")
Response.write IPdoCliente
if left(IPdoCliente,5) = Ip1 or left(IPdoCliente,5) = Ip2 then
Response.redirect "http://servidor/diretorio_virtual_Web/Pagina.htm"
else
Response.write "<H2>IP inválido para visualização da página.</H2>"
end if
%>

Neste caso, o programador condicionou o redirecionamento a dois tipos de endereço IP correspondentes às subredes de sua empresa. Do contrário, aparecerá a mensagem de que o IP é inválido para visualização.


segunda-feira, 22 de outubro de 2012

Detectando o clique do botão direito do mouse em Javascript

Os menus de contexto personalizados em páginas HTML são fundamentais para que se tenha o controle completo do comportamento da aplicação destas páginas.

Para fazê-lo, precisamos interceptar os eventos do mouse. A seguir temos um exemplo bem simples desta interceptação:


Existem dois pontos a se considerar para o controle do mouse e do menu de contexto dos navegadores. O ponto * 1 * contém a função de tratamento do evento citado no ponto * 2 *, que declara o evento onmousedown.

Executando a script (em formato de página HTML), e dando o clique direito do mouse, aparece a mensagem do comando alert:


Portanto, a propriedade button do evento de mouse corresponde a "2" para o botão direito do mouse. O botão esquerdo traz o valor "1".

Exemplo mostrando um menu de contexto bem básico


No ponto * 1 * declaramos a função init(). Nela declaramos a interceptação do evento "onmousedown", que se refere à função contextMenu.

No ponto * 2 * declaramos a função fecha() que vai fechar a janela de contexto da DIV cujo id é "menu".

No ponto * 3 * declaramos a função contextMenu(), que trata eventos provocados pelos botões do mouse. Se o botão for o direito, ela mostra a DIV cujo id é "menu".

No ponto * 4 *, interceptamos o evento "oncontextmenu", de modo que o menu de contexto default do navegador não seja apresentado (com as funções de copiar, colar, imprimir, etc).

Valores separados por vírgulas - Separar com expressões regulares

Uma das formas de compor uma lista muito limitada em número de ocorrências é usar uma string.

Quando existem muitas ocorrências (mais de 50) compensa criar uma tabela em banco de dados. Depois é preciso ter uma forma de separar os valores contidos nesta lista. O exemplo a seguir explica isto:


Consistência de data com expressões regulares em Javascript

A consistência de data em javascript se resolve com uma expressão regular com número de ocorrências, evitando o lugar comum de [\d+]\/[\d+]\/[\d+], que pode admitir muitos formatos errados.


Os numerais entre chaves especificam o número de ocorrências esperado para a máscara em questão.

sexta-feira, 19 de outubro de 2012

Alternando estilos CSS em jquery

Em jquery podemos facilmente alternar estilos das Tags HTML por meio de funções.

Lembre-se de colocar no diretório a biblioteca jquery correta:

* 1 * - Função que responde pelo clique do botão no corpo do HTML;
* 2 * - Definição da função no evento do botão (OnClick).

Geração de números aleatórios com ASP sem Rnd

A função Random em ASP (Rnd) gera números aleatórios, bem como o método Math.Random faz o mesmo em javascript. No entanto, para fins de auditoria, é preciso explicitar qual o algoritmo que existe por trás do cálculo dos números aleatórios obtidos.

Para esta finalidade, temos um método totalmente transparente, desde a semente de número aleatório utilizada, expressa no código abaixo:


<style>
SPAN.vm { color:red; }
</style>
<%
NO_MAX = 80
QtNoGerar = 12
'* Declarações de variáveis
Dim RaizNumeroAleatorio
Dim DtHoje, Agora
Dim Dia, Mes, Ano, Hora, Minuto, Segundo
Dim sNUMERO_ALEATORIO,NUMERO_ALEATORIO
Dim intNoAleat
Dim Arranjo()
ReDim Arranjo(QtNoGerar)
'* Obtenção parâmetros raiz
DtHoje = Date()
Agora = Time()
'* Obtenção fragmentos de parâmetros
Ano = year(DtHoje):Mes = Month(DtHoje):Dia = Day(DtHoje)
Hora = Hour(Agora):Minuto = Minute(Agora):Segundo = Second(Agora)
'* Concatena parâmetros de data e hora
if Application("PSpca_RandomDec") = "" then
RaizNumeroAleatorio = CDbl(Segundo&Dia&Mes&Ano&Hora&Minuto)
RaizNumeroAleatorio = RaizNumeroAleatorio + 3.141592653589
else
RaizNumeroAleatorio = CDbl(Application("PSpca_RandomDec"))
end if
Response.write("Raiz Inicial: "&RaizNumeroAleatorio)
%>
<table border=1 cellspacing=0>
<th>Indice<th>Pré-Expoente<th>Matriz<th>Matriz<sup>8</sup><br>(Parte fracionária)<th>Número Sorteado<th>STATUS
<%
j = 0
Do while j < QtNoGerar
'* 1 - Exibe a Raiz do número aleatório modificada
Response.write("<tr><td align=right>"&CStr(j)&"<td align=right>"&RaizNumeroAleatorio)
intNoAleat = CDbl(FormatNumber(CStr(RaizNumeroAleatorio),0))
'* 2 - RETIRA A PARTE FRACIONÁRIA
NUMERO_ALEATORIO = RaizNumeroAleatorio - intNoAleat
'* 3 - SOMA UM PARA QUE O NUMERO PRODUZIDO NÃO REDUZA CADA VEZ MAIS A MANTISSA (tendendo ao valor zero)
NUMERO_ALEATORIO = NUMERO_ALEATORIO + 1
'* 4 - Exibe o número aleatório produzido
Response.write("<td align=right>"&NUMERO_ALEATORIO)
'* 5 - Eleva a matriz ao expoente 8
NUMERO_ALEATORIO = NUMERO_ALEATORIO ^ 8
'* 6 - PARTE INTEIRA
intSorteio = CDbl(FormatNumber(CStr(NUMERO_ALEATORIO),0))
'* 7 - Devido a erros de arredondamento, a subtração pode ficar ligeiramente negativa, portanto é retirado o sinal
Sorteio = Abs(NUMERO_ALEATORIO - intSorteio)
'* 8 - Exibe o número sorteado (parte fracionária)
Response.write("<td align=right>"&Sorteio)
'* 9 - Multiplica a mantissa pelo número limite de Sorteio, e soma 1, para evitar que o número sorteado seja 0 (zero)
sSorteio = FormatNumber(CStr(Sorteio * NO_MAX)+1,0)
'* 10 - Exibe o número Sorteado em formato inteiro
Response.write("<td align=right>" & sSorteio & "")
'* 11 - Guarda a mantissa como próxima raiz de número aleatório
RaizNumeroAleatorio = Sorteio 'NUMERO_ALEATORIO
JaExiste = (0=1)
'* 12 - Checa se o número sorteado já foi gerado anteriormente
for i = 1 to j
if sSorteio = Arranjo(i) then
JaExiste = (0=0)
i = QtNoGerar
end if
next
if JaExiste then
JaExiste = "<span class=Vm>JaExiste</span>"
else
j = j + 1
Arranjo(j) = sSorteio
JaExiste = ""
end if
'* 13 - Exibe o Status do número gerado (Se ja existe ou não)
Response.write("<td align=right>"&JaExiste)
loop
%>
</table>
<%
Application("PSpca_RandomDec") = CStr(RaizNumeroAleatorio)
%>

Os números são gerados até que alcancem o número de números pedidos, SEM QUE NENHUM SE REPITA.

Verificação de digitação em campo Data - Javascript

Formulário de entrada da data em HTML

 

O tratamento dos dados do formulário se dá em dois pontos.

Os caracteres digitados, um a um, são tratados pelo evento "onKeyUp" do campo de INPUT "Dt". A função que faz este tratamento é "data_onChange()".

Quando o formulário estiver pronto, e o operador pressionar o botão de "submit" (se o formulário contiver um) ou a tecla ENTER, o evento "onSubmit" vai ser acionado. Este evento é tratado pela função "form_onSubmit()".

A função form_onSubmit de tratamento do evento onSubmit


* 1 * - Colocação do zero à esquerda de números, quando estes forem menores que 10 (vale para dias e meses);
* 2 * - Arranjo com o número máximo de dias de cada mês. Fevereiro é declarado como 29;
* 3 * - Máscara final de data: 3 grupos de números separados por barra ("/");
* 4 * - Construção final da data, inclusive com a inversão mês e dia, característica dos formatos internacionais.

A função data_onChange de tratamento do evento onKeyUp


* 5 * - Máscara que admite letras (maiúsculas e minúsculas);
* 6 * - Previne a digitação de caracteres estranhos no início da data (operador pode esbarrar numa tecla);
* 7 * - Previne a digitação de caracteres estranhos no meio da data (pelo mesmo motivo);


* 8 * - Define as três máscaras válidas enquanto se digita uma data. A verificação deve ir da mais completa até a mais incompleta, senão qualquer coisa é aceita.

Ao final destas rotinas, feche a tag SCRIPT. O formulário deve vir ABAIXO das scripts.