sábado, 6 de agosto de 2016

Configuração Roteador TP-LINK Archer C20 - 5 GHz

Apesar dos provedores de Internet anunciarem a banda larga, se você usa um roteador TP-LINK na frequência normal de 2.4 GHz, continuará com uma operação restrita.

A banda de 2.4 GHz está saturada. Todos os seus vizinhos tem roteadores operando nesta faixa. Neste artigo vamos mostrar as configurações do Roteador TP-LINK Archer C20.

Endereço de Configuração

O Roteador vem de fábrica com o IP 192.168.1.1. Se você é previdente, já deve ter alterado o endereço do modem do seu provedor pelo menos para 192.168.1.4, para que fique distante do default de IP com o qual todos os equipamwntos de rede vem configurados.

Configuração

No menu do Roteador, acesse a opção "Rede" e depois "WAN":


Coloque o endereço no modo estático, e coloque o IP 192.168.1.10. Como dissemos, o endereço do modem já terá sido alterado para 192.168.1.4.

Depois acesse a opção "LAN":


O endereço LAN é o endereço base a ser utilizado pelo Roteador, para que ele, por DHCP. entregue endereços aos equipamentos que se conectarem a ele, via cabo ou Wireless.

Segurança


Marque a opção WPA/WPA2 de segurança, e coloque uma senha no campo com "minhasenha" (em vermelho).

Habilitando o Dual-band

Este roteador opera tanto na banda de 2.4 quanto em 5.2 GHz.


Na opção de "Seleção Dual Band", marque também 5GHz.

Configurando a banda 5GHz

Na opção "Wireless 5GHz",


dê um nome para a rede Wireless 5GHz no campo "Fulano" (em vermelho).

Certifique-se de ajustar o modo em 11a/n/ac, pois o modo "ac" é que permite 5GHz.

LEMBRETE

Lembre-se que apesar da banda de 5GHz ser larga, seu sinal não ultrapassa facilmente paredes, principalmente com canos de água.

sexta-feira, 5 de agosto de 2016

Sombras em CSS3 - CSS3 shadow

O novo CSS, denominado CSS3, possui estilos para dar solução para problemas que antes exigiam o software Photoshop, baixando a velocidade de construção dos sites.

Vejam como é simples fazer sombras agora:

<html>
<head>
<title>Sombra em CSS</title>
<style>
H1 {
font-size:72px;
color:crimson;
font-family:Arial;
}
</style>
</head>
<body>
<H1 style="text-shadow: #B00 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #A00 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #900 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #800 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #700 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #600 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #500 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #400 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #300 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #200 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #100 4px 6px 4px;">Sombreado</H1>
</body>
</html>

E o produto:



terça-feira, 5 de julho de 2016

Arranjos em Javascript - Tutorial definitivo - (Javascript Arrays)

Este artigo é direcionado a exemplos, pois a Internet tem muita falação e pouca prática, levando os programadores e até analistas a conclusões e usos errados dos Arrays.

Arrays

Formato de dados mais estruturado e de mais fácil acesso iterativo para linguagens.

Arrays no formato de objeto

Como a maior parte dos programadores não aceita mais os Arrays no formato de índice, e sim no formato factível de ser acessado por propriedades, este será o nosso primeiro exemplo.

var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

Observe:

  1. Os delimitadores de Array e de itens são chaves "{" e "}";
  2. As referências aos itens estão nas tags entre apóstrofos (exemplo 'Caso 01');
  3. As referências aos atributos (ou propriedades, quando se fala em objetos) estão entre apóstrofos;
  4. Não se utiliza a instanciação ( var ___ = new Array ___ );  
Estes itens é que provocam a maior parte das confusões em torno de Arrays em Javascript.

Como se referir aos itens do Array em formato Objeto ?

alert(a_AMOSTRA['Caso 01']['area']);

ou

document.write(a_AMOSTRA['Caso 01']['area']);

As 'tags' são colocadas explicitamente dentro dos colchetes.

Como percorrer os itens do Array em formato Objeto ?

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Um erro muito comum é achar que o item enumerado guarda o conteúdo. Isto é um engano. Ele é apenas um índice a ser colocado no interior dos colchetes ("[" e "]").

Arrays no formato Objeto sem tags

Apenas para obedecer os requisitos de sintaxe, utilizamos qualquer coisa para nos referirmos aos itens:

var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

As tags a, b, c, d, e e f não precisam estar definidas como variáveis em lugar nenhum do fonte.

Para se referir a um item e percorrer o Array, valem as mesmas providências utilizadas no formato Objeto anterior.

Arrays no formato Objeto com tags indiretas

  var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';

var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};

As variáveis definidas antes do Array não tem associação direta com o Array em sua definição. Apenas servirão a um artifício para referência aos itens, sem perder seu significado.

Percorrendo o Array com tags indiretas

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Nesta enumeração, repare a instrução:

document.write(eval(item)+"-"+arr[item]+"&nbsp;");

A desvantagem deste formato é a de não permitir o acesso a um item específico. Portanto, só deve ser usado quando esta necessidade não existir. Um dos casos é quando se quer utilizar o formato objeto, mas apenas para acesso global aos itens, como no caso de seleção por algumas propriedades.

Formato de Array padrão (não objeto)

É feito utilizando-se os colchetes "[" e "]":

var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];

É o mais simples. As strings (entre apóstrofos) podem ser utilizadas como conteúdos.

Percorrendo o Array Padrão

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Você deve estar se perguntando como se pode percorrer um Array padrão com as mesmas instruções utilizadas para Arrays no formato objeto.

Tal coisa se dá pelo fato de internamente ambos terem o armazenamento de uma forma que permite a recuperação dos valores por iteração.

Fonte completo do Exemplo

<html>
<head>
<script type="text/javascript">
// Definição de Array no formato objeto com "tags" explícitas
var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando referências sem tags
var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando tags indiretas
var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';
var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};
var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];
// Exibe um item específico
alert('Amostra:'+a_AMOSTRA['Caso 01']['area']);
alert('Tag:'+a_TAG[2][a]);
// Rastreia os itens e mostra o parâmetro area
for( caso in a_AMOSTRA ){
alert(a_AMOSTRA[caso]['area']);
}
// Rastreia os itens e mostra os subítens
function showInputLayer(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
// Rastreia os itens e mostra os subítens com as tags indexadas
function showInputLayer1(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
document.write('<h4>Array no formato objeto com "tags" explícitas</h4>');
showInputLayer(a_AMOSTRA);
document.write('<h4>Array no formato objeto sem "tags" explícitas</h4>');
showInputLayer(a_SAMPLE);
document.write('<h4>Array no formato objeto com "tags" indiretas</h4>');
showInputLayer1(a_TAG);
document.write('<h4>Array no formato padrão</h4>');
showInputLayer(a_PADRAO);

</script>
</head>
<body>
</body>
</html>

Conclusão

Façam bom proveito




sexta-feira, 27 de novembro de 2015

Menus HTML5 usando apenas CSS3 - Ativando links

Existe um problema com o foco para o link nos menus exclusivamente em CSS3, pois os estilos que ativam os blocos também os desativam quando se vai clicar nos links.

Ao declararmos o estilo:

#menu li ul {display:none;}

Ocorre algo esperado e algo indesejável também. Os submenus ficam fechados (esperado). Ao clicarmos em "Menu 1", ou "Menu 2", etc, os submenus são abertos, devido ao estilo:

#menu li:focus ul {display:block;}

Isto também é esperado, aliás, obrigatório. Mas quando clicamos em uma das opções do submenu, como "1.1", ou "1.2", por exemplo, como o "UL" do submenu perde o foco, ele fecha o submenu antes que o link possa ser ativado.

Como resolver isto ?

O exemplo a seguir resolve este problema com ":active":

<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li ul:active li {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li a {display:block;}
</style>
<ul id="menu">
<li tabindex="1">Menu 1
<ul>
<li tabindex="11"><a href="http://www.copasa.com.br" target="_blank">1.1</a></li>
<li tabindex="12"><a href="http://www.google.com" target="_blank">1.2</a></li>
<li tabindex="13"><a href="http://www.baixaki.com.br" target="_blank">1.3</a></li>
</ul>
</li>
<li tabindex="2">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="3">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>

Informamos ao interpretador de páginas que enquanto o grupo "UL" do submenu estiver ativo (ou seja, qualquer de seus elementos, seja UL, seja LI, estiver em foco) ele deverá ficar aberto.

quinta-feira, 26 de novembro de 2015

Menus HTML5 usando CSS3 e jquery - vários níveis

O post anterior tratava de menus HTML5 usando apenas CSS3.

Neste post vamos mostrar como se faz um menu de mais níveis utilizando jquery.

Por que o jquery é necessário ? Porque o CSS3 ainda não dispõe de uma opção :parent.

Modelo:

<head>
<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li ul {display:none;}
#menu li:focus ul li ul {display:none;}
#menu li ul li:focus ul{display:block;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
function confPai(filho){
$( filho ).parent().css( "display", "block" );
}
$( document ).ready(function() {
   console.log( "ready!" );
   $("#menu li ul li").bind("click",function(){
confPai(this);
});
});
</script>
</head>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li tabindex="01">1.1
<ul>
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ul>
</li>
<li tabindex="02">1.2
<ul>
<li>1.2.1</li>
<li>1.2.2</li>
<li>1.2.3</li>
</ul>
</li>
<li tabindex="03">1.3
<ul>
<li>1.3.1</li>
<li>1.3.2</li>
<li>1.3.3</li>
</ul>
</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li tabindex="11">2.1
<ul>
<li>2.1.1</li>
<li>2.1.2</li>
<li>2.1.3</li>
</ul>
</li>
<li tabindex="12">2.2
<ul>
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>

Menus HTML5 usando apenas CSS3

Passou o tempo em que ficávamos "garimpando" códigos Javascript para fazer menus aplicáveis às páginas de Internet. Surgiu o CSS3.

Aqui está o modelo de uma página bem simples com um menu utilizando tags UL/LI e o mínimo de estilo CSS3:

<style>
#menu li ul {display:none;}
#menu li:focus ul {display:block;}
</style>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>

A primeira linha de estilo (na tag style) torna invisíveis todos os conteúdos que atendam à hierarquia de UL precedido por um LI a partir da tag cujo id seja "menu". Isto significa que os blocos internos das opções de primeiro nível da hierarquia UL/LI iniciarão no estado de ocultos (display:none).

A segunda linha de estilo (na tag style) é que define o principal comportamento deste menu UL/LI. Apesar do evento mencionado ser "focus", o menu vai apresentar um comportamento no momento em que o botão do mouse for pressionado sobre o nível hierárquico LI, porém somente naqueles níveis em que exista o atributo "tabindex". Isto se explica pelo fato de que o click de mouse dirige o foco para a LI selecionada.

Experimente trocar o conteúdo da tag style por:

<style>
#menu li ul {display:none;}
#menu li:hover ul {display:block;}
</style>

Desta forma, bastará apenas passar o ponteiro do mouse sobre o primeiro nível de uma tag LI (que possui o atributo tabindex) para que seu bloco correspondente apareça.

sexta-feira, 21 de agosto de 2015

Corrigindo erros ASP.NET no IIS 7

Muitas vezes ocorrem erros inexplicáveis em scripts ASP.NET copiadas da Internet, e que sabemos estarem 100 % corretas. O que pode estar acontecendo ?

A resposta está no famigerado .NET. Uma framework cujos problemas se comparam aos der compatibilidade de bibliotecas Linux do passado. As versões em conflito produzem esta enorme dor de cabeça.

Por exemplo, você executa uma script que veio de um Visual Studio, e o que acontece ?
Veja abaixo:


O que fazer ? Basta ativar o comando "cmd.exe" do bom e velho DOS, nop C:\Windows\System32, tomando o cuidado de ativar com o botâo direito do mouse, escolhendo a opção "Executar como Administrador", e fazer como mostrado a seguir:


Esta sequência instala o dot.Net 4.0 na infra-estrutura do IIS.