Welington Fontes

segunda-feira, 17 de julho de 2017

HTML - ALGUMAS TAGS

TAGS ÚTEIS

1. <meter>

O HTML 5 introduziu uma série de tags semânticas para diferentes ocasiões. Ocasiões bem específicas. Existe, por exemplo, uma tag para quando você precisa expressar uma medida em uma página da web, dentro de um determinado limite.

<meter> foi criada para aquele momento em que você precisa especificar um espaço em disco, uma nota de crítica, o resultado de uma prova, qualquer valor que faça parte de um escopo.

Os atributos mais comuns são value, min e max. O primeiro indica a medida propriamente dita, enquanto os outros servem para marcar os limites. Suponhamos que você queira indicar o espaço ocupado de 300GB de um disco rígido de 500GB, você escreveria da seguinte forma:


&lt;meter value="300" min="0" max="500"&gt;300GB de 500GB&lt;/meter&gt;

“Mas não é muita complicação para escrever algo que eu sempre fiz?”, você pode estar se perguntando. Em navegadores com suporte a esta tag, o resultado será exibido visualmente:

Pense agora em gráficos, dados dinâmicos e jQuery e você começará a vislumbrar a utilidade de <meter>…

2. <progress>

Se você entendeu a utilidade do <meter>, pode ter pensado: “eu poderia fazer uma barra de progresso com isso…”. Na verdade, existe uma tag especificamente criada para essa função!

Chega de gambiarras, Javascripts complicados, loadings em Flash ou GIFs animados. Com o HTML 5, você pode simplesmente usar a tag <progress> e ser feliz.

Ela possui dois atributos apenas: value (que marca o estado atual do progresso) e max (que indica a meta a ser alcançada). Então, para especificar o progresso de uma tarefa que esta na metade do caminho, você pode escrever da seguinte forma:

O resultado visual é similar ao do <meter>, exceto que a barra é animada, para indicar uma progressão.

Perceba que, em ambos os casos, o texto dentro do elemento é completamente ignorado por navegadores com suporte às tags. Convém inserir apenas como uma alternativa não-visual da informação para navegadores mais antigos.

3. <kbd> e <samp>

Ao contrário das duas tags anteriores, esse par aqui não gera nenhum efeito visual nem tampouco foram criadas com o HTML 5. Na verdade, elas são bem antigas e são renderizadas pelo navegador como o bom e velho <code>.

A grande vantagem de <kbd> e <samp> é sua especificidade. A primeira é utilizada para representar entrada de dados do usuário, geralmente via teclado. A segunda representa uma amostra da saída de dados de um programa ou sistema computacional.

Específico demais? Se você utiliza <code> com frequência, mas deseja um <code> “diferente” sem ter que usar uma classe e sem ligar para a semântica, experimente estas alternativas e declare seus estilos no CSS.

Exemplos:

<kbd>Essa linha é uma entrada de dados</kbd>
<samp>Essa linha é uma saída de dados</samp>

4. <small>

Eu sei o que você está pensando agora: “<small> é deprecated, ninguém usa mais desde que o CSS passou a definir o tamanho das fontes dos elementos”. Tirando a parte do deprecated, você está até certo. Mas isso foi antes do HTML 5.

Com o advento do HTML 5, o <small> deixou de ser aquela tag sem graça que apenas reduzia o tamanho da fonte para ganhar um valor semântico.

Agora, a tag simboliza elementos que normalmente seriam escritos em letra miúda fora da web, como avisos, regras, restrições legais, direitos de uso etc.

Vamos dar uma olhada como funciona:

<small>Copyright©2014</small>

5. <optgroup>

Imagine uma longa lista de opções de um <select>, mas longa mesmo. Tão longa que o bom-senso recomenda dividi-la em seções. Como fazer? Entra em cena o <optgroup>.

Com esta tag é possível criar divisões dentro de um menu de opções, facilitando o trabalho do usuário de encontrar a escolha certa.

Vamos dar uma olhada como funciona:

<select id=”filmes” name=”filmes”>
<optgroup label=”Terror”>
<option value=”1″>O Exorcista</option>
<option value=”2″>A Bruxa de Blair</option>
<option value=”3″>Atividade Paranormal</option>
</optgroup>
<optgroup label=”Comédia”>
<option value=”4″>Se Beber, Não Case</option>
<option value=”5″>Todo Mundo em Pânico</option>
<option value=”6″>Curtindo a Vida Adoidado</option>
</optgroup>
<optgroup label=”Drama”>
<option value=”7″>Crepúsculo</option>
<option value=”8″>Amistad</option>
<option value=”9″>Patch Adams</option>
</optgroup>
</select>

Visualmente, o resultado, sem nenhum estilo aplicado, seria esse:

6. <acronym> e <abbr>

Uma das tags mais úteis e uma das menos utilizadas do velho HTML, o <acronym> é ao mesmo tempo semântico e visual. Ela serve para explicar um termo, acrônimo ou abreviatura que pode não ser do conhecimento do usuário. Na prática, funciona como o valor title quando você passa o mouse por cima do elemento.

No HTML 5, o <acronym> não é mais suportado e foi substituído pelo <abbr>, que cumpre rigorosamente a mesma função.

Veja um exemplo:

7. <ins> e <del>

Se você trabalha com edição e revisão de texto e não conhece ainda estas duas tags, eu acho que acabei de salvar seu dia e talvez seu emprego.

A tag <ins> serve para marcar o texto que foi inserido em um determinado conteúdo desde sua versão anterior. Visualmente, o novo conteúdo é exibido como sublinhado, mas você pode alterar isso à vontade com folhas de estilo.

Já a tag <des> é seu exato oposto e serve para marcar o texto que foi ou deve ser deletado de um determinado conteúdo desde a última versão. Visualmente, o conteúdo aparece riscado, mas você pode alterar isso à vontade com folhas de estilo.

Veja um exemplo:

<del>Eu manjo muito de HTML</del> <ins>Meu conhecimento de HTML está sempre crescendo</ins>.

8. <wbr>

Com a web responsiva onde você não faz a menor ideia onde o navegador vai quebrar suas linhas quando o usuário estiver lendo, é sempre bom ter o mínimo de controle possível.

Para dar esse controle e sugerir ao navegador onde uma quebra de linha pode acontecer, existe a tag <wbr>. É perfeita para palavras muito longas, onde uma quebra arbitrária poderia prejudicar a compreensão ou mesmo gerar palavras indesejadas.

Perceba que não é o mesmo que um <br />, onde a quebra de linha é obrigatória. Trata-se de uma orientação ao navegador para, caso seja necessário quebrar uma linha por perto, que seja quebrada onde a tag se encontra.

Vejamos um exemplo:

<p>Use a função getElements<wbr>ByTagName() para recuperar os elementos</p>

9.<address>

Semanticamente falando, esta tag adiciona as informações de contato do autor de uma determinada página ou artigo. Se a tag <address> está contida dentro de <article>, então, a informação representa o autor daquele artigo em específico. Caso contrário, representa o autor do documento como um todo.

Visualmente falando, o conteúdo costuma ser exibido em itálico, com a separação de uma linha antes e outra depois, mas tudo isso pode ser ajustado com CSS.

Esta tag está aí desde 1993 e ganhou um reforço com o advento das marcações do HTML 5. Desde aquela época, costuma-se confundir seu uso e aplicar a tag para marcar endereços físicos. Isso é errado. Informações de contato, nesse caso, referem-se a nome, e-mail, site ou outra forma de contato, via web, com o autor daquele segmento. Se nenhum outro meio estiver disponível (o que seria extremamente raro em pleno século XXI), o endereço físico pode ser utilizado.

Vejamos um bom exemplo:

<address>
Esse artigo é de autoria de:<br />
<a href=”mailto:redacao@codigofonte.com.br”>Redação Código Fonte</a>
</address>

10. <cite> e <q>

Quem trabalha com conteúdo textual, já conhece a tag <blockquote>, para encapsular citações no texto, geralmente renderizadas com uma tabulação recuada e uma fonte diferente.

Mas existem outros métodos para inserir citações, inclusive, mais adequados para citações curtas.

No HTML 5, nós temos o <q> para especificar uma citação. Visualmente, não há recuos e a informação é exibida inline, com o navegador gerando as aspas de abertura e fechamento para você.

Você poderia escrever do lado quem é o autor da citação, mas semanticamente é mais adequado envolver esse dado com <cite>, de forma que o navegador também consiga identificar essa informação. O conteúdo é gerado em itálico, a menos que seja especificado o contrário na folha de estilo.
Vamos juntar tudo agora e ver como fica:<q>Um país se faz com homens e livros. <cite>Monteiro Lobato</cite>.</q>Conclusão

Acredite ou não, estas são apenas uma amostra das tags disponíveis na especificação do HTML e que são pouco utilizadas. Mantenha-se sempre atualizado e você ainda poderá descobrir algumas que serão essenciais para seu próximo projeto.

OUTRAS TAGS

<!– –>

Cria um comentário

<html> </html>

Envolve todo um documento html

<head> </head>

Envolve o cabeçalho de um documento html

<meta >

Fornece informações gerais sobre o documento

<style> </style>

Informações de estilo

<script> </script>

Linguagem script

<noscript> </noscript>

Conteúdo alternativo para quando a linguagem script não for suportada

<title> </title>

O título do documento

<body> </body>

Envolve o corpo (texto e tags) do documento html

bgcolor – Cor de fundo #RRGGBB
background – Imagem como plano de fundo
text – Cor do texto principal
link – Cor dos links existentes na página
vlink – Cor do link já visitado
alink – Cor do link que foi ativado
marginheight – Elimina a margem esquerda apenas no Netscape
marginwidth – Elimina a margem no topo da página apenas no Netscape
topmargin – Elimina a margem no topo da página apenas no Internet Explorer
leftmargin – Elimina a margem esquerda apenas no Internet Explorer

Cabeçalhos

<hn> </hn>

Cabeçalho nível n para n de 1 a 6

Parágrafos

<p> </p>

Um simples páragrafo

align – Alinhamento do parágrafo: left, right, center e justify

Listas

<ol> </ol>

Uma lista ordenada

start – Define a partir de qual número a listagem começa
type – Tipos de caracteres ordenados: A, a, I, i, 1

<ul> </ul>

Uma lista não ordenada

type – Tipos de caracteres não ordenados: disk, square, circle

<li> </li>

Um item da lista

value – Numeração individual do item da lista
type – Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para não ordenada

<menu> </menu>

Um menu com uma lista de itens

<dir> </dir>

Uma listagem de diretórios

<dl> </dl>

Uma lista de definições ou glossário

<dt> </dt>

Marca o texto especificado como um termo de definição de um glossário

<dd> </dd>

Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definição

Formatação de caracteres

<em> </em>

Maior ênfase em itálico

<strong> </strong>

Maior ênfase em negrito

<code> </code>

Amostra de código

<kbd> </kbd>

Texto a ser digitado

<var> </var>

Uma variável ou espaço reservado para um outro valor

<samp> </samp>

Texto de amostra

<dfn> </dfn>

Aplica um formatação no texto definido como termo de um glossário

<cite> </cite>

Uma citação

<b> </b>

Texto em negrito

<i> </i>

Texto em itálico

<u> </u>

Texto sublinhado

<tt> </tt>

Fonte monoespaçada (texto semelhante à maquina de escrever)

<pre> </pre>

Texto pré-formatado

<strike> </strike>

Texto riscado

<s> </s>

Texto tachado

<sub> </sub>

Texto subscrito

<sup> </sup>

Texto sobrescrito

<big> </big>

Texto em fonte maior do que o padrão

<small> </small>

Texto em fonte menor do que o padrão

<blink> </blink>

Texto piscando somente no Nestcape

<marquee> </marquee>

Texto animado no Internet Explorer

Outros elementos

<hr>

Uma régua horizontal

size – Espessura da linha em pixels
width – Largura da linha em pixels ou porcentagem
align – Alinhamento da linha em center, left, right
color – Cor da linha em #RRGGBB
noshade – Linha sólida

<br>

Uma quebra de linha

<center> </center>

Centralizar

<div> </div>

Conteúdo

align – Alinhamento: left, center e right

<blockquote> </blockquote>

Texto com mais margem

<address> </address>

Assinaturas ou informações gerais sobre o autor de um documento

<font> </font>

Alterna tamanho , cor e tipo de fonte exibida

size – O tamanho da fonte varia de 1 a 7
color – A cor da fonte #RRGGBB
face – O tipo da fonte

<basefonte>

Define o tamanho padrão para a fonte na página atual

size – O tamanho da fonte varia de 1 a 7

Imagens

<img>

Insere uma imagem in-line no documento e inclui atributos comuns

usemap – Um mapa de imagens do lado cliente
src – O URL da imagem
alt – Uma string de texto que será exibida em navegadores que não possam suportar imagens
align – Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right
height – É a altura sugerida em pixels
width – É a extensão sugerida em pixels
vspace – O espaço entre a imagem e o texto acima e abaixo dela
hspace – O espaço entre a imagem e o texto à esquerda e à direita dela
border – Largura da borda

Frames

<frameset> </frameset>

Define um frameset

rows – Número de linhas no frame
cols – Número de colunas no frame
frameborder – Borda do frame
framespacing – Espaçamento
onload – É um evento intrínseco
onunload – É um evento intrínseco

<frame> </frame>

Define um frameset

name – É o nome do frame-alvo
src – Chama a fonte de conteúdo do frame
frameborder – Determina a borda do frame
marginheight – Determina a largura das margens
noresize – Determina a capacidade de redimensionar frames
scrolling – Determina a capacidade de rolagem dentro dos frames: auto, yes e no

<iframe> </iframe>

Define um frame in-line

<noframes> </noframes>

Alterna o conteúdo quando os frames não são suportados

Tabelas

<table> </table>

Cria uma tabela

background – Imagem de plano de fundo
bgcolor – Cor de plano de fundo
border – Largura da borda em pixels
cols – Número de colunas
cellpadding – Espaçamento nas células
cellspacing – Espaçamento entre as células
width – Largura da tabela
align – Alinhamento da tabela: left, center, right
bordercolor – Cor na borda da tabela

<caption> </caption>

A legenda para a tabela

<tr> </tr>

Uma linha na tabela

align – O alinhamento horizontal do conteúdo das células dentro dessa linha com os valores possíveis left, right, center, justify e char
bgcolor – Cor de fundo
valign – o alinhamento vertical do conteúdo das células dentro dessa linha com os valores possíveis top, middle, bottom e baseline
background – Figura como plano de fundo

<th> </th>

Um cabeçalho de célula da tabela

align – Alinhamento horizontal
valign – Alinhamento vertical
bgcolor – Cor de plano de fundo
rowspan – O número de linhas pelo qual essa célula se expandirá
colspan – O número de colunas pelo qual essa célula se expandirá
nowrap – Desliga o enquadramento de texto em uma célula

<td> </td>

Define uma célula de dados da tabela

align – Alinhamento horizontal
valign – Alinhamento vertical
bgcolor – Cor de plano de fundo
rowspan – O número de linhas pelo qual essa célula se expandirá
colspan – O número de colunas pelo qual essa célula se expandirá
nowrap – Desliga o enquadramento de texto em uma célula
width – Largura da célula
height – Altura da célula

Formulários

<form> </form>

Define um formulário

action – Responsável por determinar o exato local para onde as informações coletadas no formulário deverão ser enviadas
method – Método de empacotamento dos dados do formulário: get, post e enctype="multipart/form-data"
name – Nome do objeto

<input>

Caixa de texto

type – Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image
name – Identificação do campo
size – Largura
maxlength – Número máximo de caracteres permitidos
value – Texto que aparece dentro da caixa ou nome do botão
checked value – Valor assumido quando este campo for selecionado

<textarea> </textarea>

Permite criar elementos de entrada com características de texto

rows – Tamanho da linha da caixa de texto
cols – Tamanho da coluna da caixa de texto
name – Identificação do campo
wrap – Quebra de linha da caixa de texto: off, virtual, physical

<select> </select>

Seleção

name – Identificador

<option> </option>

Opção

value – Valor do campo

domingo, 16 de julho de 2017

C # NÚMERO FELIZ

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
List<int> lista = new List<int>();
for (int i = 0; i < 100; i++)
if (VerificarNumero(i)) lista.Add(i);
var recebe = GerarListaNumeros();

lista.ForEach(i => Console.WriteLine("Feliz {0}", i));
Console.ReadKey();

}

public static List<int> GerarListaNumeros()
{
List<int> lista = new List<int>();
for (int i = 0; i < 100; i++)
if (VerificarNumero(i)) lista.Add(i);
return lista;
}

public static bool VerificarNumero(int numero)
{
bool numeroFeliz = false;
List<int> listaDigitos = new List<int>();
listaDigitos = DividirDigitos(numero);
for (int i = 0; i < 20 && !numeroFeliz; i++)
{
int sumaActual = CalcularQuadrados(listaDigitos);
if (sumaActual != 1)
listaDigitos = DividirDigitos(sumaActual);
else numeroFeliz = true;
}
return numeroFeliz;
}

public static List<int> DividirDigitos(int digito)
{
List<int> digitos = new List<int>();
while (digito != 0)
{
digitos.Add(digito % 10);
digito = digito / 10;
}
return digitos;
}

public static int CalcularQuadrados(List<int> listaDigitos)
{
int resultado = 0;
foreach (int elem in listaDigitos) resultado += elem * elem;
return resultado;
}
}
}

C # NÚMERO SORTUDO

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ConsoleApplication2
{
class Program
{
public class NumeroSortudo
{
public string GetNumeroSortudo(int range)
{
return ImprimirResultado(FindNumeroSortudo(range));
}

public string GetsortudoPrimoNumeros(int range)
{
bool[] numeros = FindNumeroSortudo(range);

for (int i = 0; i < numeros.Length; i++)
{
if (numeros[i]) continue;
numeros[i] = !NumeroPrimo(i + 1);
}

return ImprimirResultado(numeros);
}

private bool[] FindNumeroSortudo(int range)
{
if (range < 1) range = 0;
bool[] numeros = new bool[range];
int sortudoContar = 2;

while (sortudoContar < numeros.Length)
{
sortudoContar = NumeroFora(numeros, sortudoContar);
}

return numeros;
}

private int NumeroFora(bool[] numeros, int sortudoContar)
{
int contador = 0;

for (int i = 0; i < numeros.Length; i++)
{
if (numeros[i]) continue;
contador++;

if (contador == sortudoContar)
{
numeros[i] = true;
contador = 0;
}
}

return GetsortudoContar(numeros, sortudoContar);
}

private int GetsortudoContar(bool[] numeros, int pular)
{
if (pular >= numeros.Length) return numeros.Length;

for (int i = pular; i < numeros.Length; i++)
{
if (!numeros[i]) return i + 1;
}

return numeros.Length;
}

private static bool NumeroPrimo(int numero)
{
if (numero == 1) return false;

for (short i = 3; i <= Math.Sqrt(numero); i += 2)
{
if (numero % i == 0) return false;
}

return true;
}

private static string ImprimirResultado(bool[] numeros)
{
string resultado = string.Empty;

for (int i = 0; i < numeros.Length; i++)
{
if (!numeros[i]) resultado = resultado + (i + 1) + ",";
}

if (!string.IsNullOrEmpty(resultado)) resultado = resultado.Substring(0, resultado.Length - 1);

return resultado;
}
}

static void Main(string[] args)
{
// arrange
NumeroSortudo sortudo = new NumeroSortudo();
IDictionary<int, string> CasoTeste = new Dictionary<int, string>();
for (int i = 0; i < 100; i++)
{
CasoTeste.Add(i, Convert.ToString(i));
}
// act
foreach (var testCase in CasoTeste)
{
string resultado = sortudo.GetNumeroSortudo(testCase.Key);

// assert
Console.WriteLine("{0}", resultado);

}
Console.ReadKey();
}

}
}

HTML - TABELA DE ACENTOS

Abaixo segue uma pequena tabela de acentos para serem utilizados no seu html.

Você somente precisa selecionar o acento que deseja, copiar e colar no código.

Um forte abraço a todos

Wellington Pereira
Alias (Samurai)

sábado, 24 de junho de 2017

MACBOOK - PRINT SCREEN

A tecla Print Screen, responsável pela captura de tela, a qual gera uma imagem de tudo que está na tela do computador não está presente no Mac.

Mais uma coisa boa que preciso mencionar é que diferente do Windows onde o usuário precisa de programa para colar a imagem (Paintbrush, Photoshop, Word, etc) para depois salvá-la. No Mac, as coisas são um pouco diferentes. Por exemplo, você pode salvar a imagem sem precisar de programa algum. Além disso, você pode capturar uma tela inteira, um pedaço dela, ou somente uma janela… Você também mandar para o clipboard (área de transferência) para colar no programa que quiser, também pode. Funciona assim:

Teclas de captura de tela

Command+shift+3

Captura a tela inteira e salva numa imagem no seu Desktop (Mesa), em formato PNG.

Command+shift+4

Captura parte da tela que você escolher, e salva no seu Desktop (Mesa). Ao usar esta combinação, o cursor do mouse vira um alvo e você seleciona a área que quer capturar. Você arrasta e quando soltar ele automaticamente captura a tela.

Command+shift+4 barra de espaço

Insto faz com que o ponteiro do mouse que era um alvo vira uma câmera, e você pode clicar com ela em cima da janela que você quer para capturar somente ela e salvar a imagem no seu Desktop.

Qualquer combinação+ctrl

Ao invés de salvar a imagem no Desktop, a imagem fica no clipboard e você pode colar no programa que desejar, sem gerar uma imagem automática.

Alterar o formato do arquivo

É possível escolher o formato do arquivo que o print screen gera, pode ser PDF ou PNG. Para alterar esta opção, abra o Terminal e digite o comando “defaults write com.apple.screencapture type pdf” e pressione enter. Desta forma você altera o formato do arquivo para PDF. Para alterar para PNG, basta substituir no comando o pdf por png. Você deve fazer logout ou reiniciar o Mac para que esta alteração passe a valer.

MACBOOK - TECLADO E ACENTOS

Hoje irei falar sobre um problema que alguns usuários dos Macs tem encontrado com os acentos.

Vou demostrar como você poderá fazer os acentos sem precisar trocar o layout de teclado ou adicionar um teclado externo. Embora a princípio possa parecer complicado, mas com a prática você perceberá que é algo bem prático. Veja como é bem simples como exemplificado na imagem abaixo.

sexta-feira, 19 de maio de 2017

O QUE É STREAMING?

Streaming é uma tecnologia que envia informações multimídia, através da transferência de dados, utilizando redes de computadores, especialmente a Internet, e foi criada para tornar as conexões mais rápidas.

Um grande exemplo de streaming, é o site Youtube, que utiliza essa tecnologia para transmitir vídeos em tempo real.

Em inglês, a palavra stream significa córrego ou riacho, e por isso a palavra streaming remete para o fluxo, sendo que no âmbito da tecnologia, indica um fluxo de dados ou conteúdos multimídia. Muitas pessoas assistem filmes, seriados ou jogos de futebol em streaming.

O live streaming permite que o utilizador veja um programa que está sendo transmitido ao vivo. Existem também a possibilidade de transmitir um evento através do live streaming, para que pessoas que estão longe possam assistir.

Quando a ligação de uma rede é banda larga, a velocidade de transmissão da informação é muito maior, dando a sensação ao usuário de que o áudio e o vídeo são transmitidos em tempo real. Atualmente, emissoras de televisão, bem como rádios FM e AM, além de várias empresas que realizam eventos, utilizam esta tecnologia para interação digital com seus ouvintes e clientes.

O streaming possibilita que um usuário reproduza mídia, como vídeos, que são sempre protegidos por direitos autorais, de modo que não viole nenhum desses direitos, tornando-se bastante parecido com o rádio ou a televisão aberta. A tecnologia é também muito usada em jogos online, em sites que armazenam arquivos, ou em qualquer serviço onde o carregamento de arquivos é bastante rápido.

Até mais e até o próximo artigo.

O QUE É NODE.JS?

NODE.JS (Node Packege Managemente) é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de rede rápidas e escaláveis. Node.js usa um modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal para aplicações em tempo real com troca intensa de dados através de dispositivos distribuídos.

Na JSConf 2009 Européia, um programador jovem chamado Ryan Dahl, apresentou um projeto em que estava trabalhando. Este projeto era uma plataforma que combinava a máquina virtual JavaScript V8 da Google e um laço de eventos. O projeto apontava para uma direção diferente das outras plataformas em JavaScript que rodam no servidor: todos I/O primitivos são orientado a evento. Aproveitando o poder e a simplicidade do Javascript, isso tornou tarefas difíceis de escrever aplicações assíncronas em tarefas fáceis. Desde quando foi aplaudido de pé no final do seu discurso, o projeto de Dahl tem recebido uma popularidade e uma aprovação sem precedentes.

Que problema o Node pode resolver?

Node estabeleceu o objetivo número um que é “fornecer uma maneira fácil para construir programas de rede escaláveis”. Qual é o problema com os programas servidores atuais? Vamos fazer os cálculos. Em linguagens como Java™ e PHP, cada conexão cria uma nova thread que potencialmente tem anexado 2 MB de memória com ela. Em um sistema que tenha 8 GB de RAM, isso põe o número máximo teórico de conexões concorrentes a cerca de 4.000 usuários. E quando o número de usuários aumenta, se você quer que sua aplicação web suporte mais usuários, você tem que adicionar mais e mais servidores. Somado a estes custos também podem haver possíveis problemas técnicos: um usuário pode usar diferentes servidores para cada requisição, então cada recurso compartilhado deve ser compartilhado para todos os servidores. Por todas estas rações, o gargalho em toda a arquitetura de aplicações web (incluindo velocidade de tráfego, velocidade do processador e velocidade da memória) é o número de conexões concorrentes que o servidor pode manipular.

Node resolve esta questão trocando a maneira como a conexão é tratada no servidor. Ao invés de criar uma nova OS thread a cada conexão (e alocar a memória anexa a ela), cada conexão dispara um evento executado dentro da engine de processos do Node. Node afirma que nunca vai dar deadlock, já que não há bloqueios permitidos, e ele não bloqueia diretamente para chamadas de I/O. Node também alega que um servidor rodando ele pode suportar dezenas de milhares de conexões simultâneas.

Então, agora que você tem um programa que pode manipular dezenas de milhares de conexões simultâneas, o que você pode realmente fazer com o Node? Seria incrível se você tivesse uma aplicação web que necessitasse desta quantidade de conexões. Este é um daqueles tipos de problema: “se você tem um problema, não é mais um problema”.

O que Node definitivamente não é?

Sim, Node é um servidor de programas. Entretanto o produto base do Node definitivamente não é como o Apache ou o Tomcat. Estes servidores são basicamente servidores ready-to-install e estão prontos para instalar aplicativos instantâneamente. Você pode subir e rodar um servidor em um minuto com estes produtos. Node definitivamente não é isso. Parecido com como o Apache pode adicionar um módulo PHP para permitir desenvolvedores criarem páginas da web dinâmicas, e um módulo SSL para conexões seguras, Node tem o conceito de módulos que podem ser adicionados no núcleo do Node. Há literalmente centenas de módulos para rodarem com o Node, e a comunidade é bastante ativa em produzir, publicar e atualizar dezenas de módulos por dia.

Como o Node funciona

O Node roda em uma JavaScript V8 VM. Mas espere, JavaScript no servidor? Isso, você leu certo. JavaScript no lado do servidor pode ser um conceito novo para todos que trabalharam exclusivamente com o JavaScript no lado do cliente, mas a idéia em sí não é tão absurda – porque não usar a mesma linguagem de programação no cliente que você usa no servidor?

O que é V8? O motor JavaScript V8 é o motor que a Google usa com seu navegador Chrome. Poucas pessoas pensam sobre o que realmente acontece com o JavaScript no lado do cliente. Bem, a engine JavaScript realmente interpreta o código e o executa. Com o V8 a Google criou um ultra-rápido interpretador escrito em C++, com um outro aspecto único: você pode baixar a engine e incorporá-la em qualquer aplicação desejada. Isso não está restrito em rodar em um navegador. Então Node atualmente usa o motor JavaScript V8 escrito pela Google e propõe que seja usado no servidor. Perfeito! Para que criar uma nova linguagem quando há uma boa solução já disponível?

Programação orientada a Evento

Muitos programadores foram ensinados a acreditar que a programação orientada a objetos é um modelo de programação perfeito e a não usarem nada mais. Node utiliza o que é chamado modelo de programação orientada a evento.

Programação orientada a evento no lado do cliente com jQuery.

Espero ter ajudado e até o próximo artigo.

quarta-feira, 17 de maio de 2017

SIGNIFICADO DE WEBINAR

Webinar é um tipo de webconferência no qual a comunicação é de uma via apenas, ou seja, somente uma pessoa se expressa e as outras assistem. A interação entre os participantes é limitada apenas ao chat, de modo que eles podem conversar entre si ou enviar perguntas ao palestrante. O nome vem de uma abreviação de web-based seminar (em português, seminário baseado em rede).

O webinar pode ocorrer tanto através de uma aplicação específica, instalada em cada um dos computadores participantes, quanto por meio de uma aplicação web que opera dentro do navegador, bastando digitar o endereço do site onde será o webinar, sendo, na maioria das vezes, necessário ainda um cadastro prévio.

Alguns Provedores de Serviços:

Online Meetings (IBM)
Appear.in
Adobe Acrobat Connect
AnyMeeting
BrightTALK
Cisco WebEx
GoToWebinar
Eventials
IBM Sametime
IOCOM
iMeet
LogMeIn
MaxinTV
ON24
Openmeetings
Skype
Join.me
Youtube Live!

Espero ter ajudado e até a próxima:

Wellington

aspnetwf@gmail.com

terça-feira, 21 de fevereiro de 2017

Depurando JavaScript com Google Chrome

É Certo que em algum momento você vai desejar depurar uma parte do código. Em linguagens que utilizam IDE como Visual Studio, NetBeans e outras isso é bem mais fácil. Mas o que dizer em depurar o código em linguagens Client-Side como o JavaScript, em outras palavras em linguagens que executam o código no lado do cliente e não no lado do servidor.

Não fique preocupado, isso é bem fácil. Veja o exemplo abaixo:

Primeiramente, vamos utilizar para este exemplo o navegador Chrome.

1 – Com o Google Chrome aberto na página do seu Sistema ou Site clique em F12 para abrir o console do navegador.

2 - Clique em console

Figura 1: Console do Google Chrome

Se você desejar fazer um breakpoint, clique sobre o arquico 2.html (ou no seu caso o arqui js) será aberta a janela Source.

Figura 2: Source do Google Chrome

Clica sobre a linha que deseja fazer o teste e pressione F11 para navegar entre o código.

Para adicionar um watch para uma variável qualquer, basta selecionar a variável (em tempo de depuração, ou seja, enquanto o depurador estiver sendo executado), clicar com o botão direito do mouse depois “Add selected text to Watches”.

Figura 3: Add selected text to watches

Figura 4: Janela Watch do Google Chrome

Para navegar pressione F11.

terça-feira, 7 de fevereiro de 2017

EXCEL - REMOVER ACENTOS

CRIANDO A UDF

A UDF é uma macro (VBA) porém com características diferentes pois aparecerá como uma função normal do Excel, como um PROCV por exemplo.

Aperte ALT + F11 para abrir o editor VBA
No menu da esquerda clique com o botão direito do mouse crie um novo módulo
Escreva o código a seguir no quadro que se abre a direita.

Function Acento(Caract As String)
 Dim A As String
 Dim B As String
 Dim i As Integer
 Const AccChars = "ŠŽšžŸÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðñòóôõöùúûüýÿ"
 Const RegChars = "SZszYAAAAAACEEEEIIIIDNOOOOOUUUUYaaaaaaceeeeiiiidnooooouuuuyy"
 For i = 1 To Len(AccChars)
 A = Mid(AccChars, i, 1)
 B = Mid(RegChars, i, 1)
 Caract = Replace(Caract, A, B)
 Next
 Acento = Caract
End Function

Siga os passos conforme a imagem abaixo:

E é só isso, está pronto. Antes de irmos para o exemplo prático, vamos entender como funciona essa macro.

COMO ESTA MACRO FUNCIONA

Normalmente quando criamos uma macro ela começa com Sub ou Private Sub mas você deve ter notado que esta começa com Function pois se trata de uma UDF. Esta função foi nomeada de Acento e é assim que iremos nos referenciar a ela dentro do Excel, e possui apenas um argumento, chamado Caract que nada mais é do que o texto ou palavra com acento. Para fins comparativos, a função PROCV utiliza 4 argumentos, separados pelo ; (ponto e virgula), a função Acento, que acabamos de criar, possui apenas um.

Primeiro definimos 3 variáveis que serão utilizadas pela função, são elas as variáveis A, B e i além de duas constantes chamadas de AccChars e RegChars.

For i = 1 To Len(AccChars)

Significa que um certo código será repetido enquanto a variável i for menor que o número de caracteres presentes na constante AccChars.

A = Mid(AccChars, i, 1) e B = Mid(RegChars, i, 1)

Significam que a variável A será a letra que estiver na posição i da variável AccChars. Quando i for igual a 1 então A será igual a primeira letra de de AccChars, isso se repete até que acabem as letras de AccChars. O mesmo acontece bom B porém ao invés de ser uma letra em AccChars será ma letra presente em RegChars.

Caract = Replace(Caract, A, B)

Este trecho faz com que sempre que a palavra ou texto que se deseja remover os acentos, tiver uma letra presente em AccChars, está letra (com acento) é substituída pela mesma letra presente em RegChars (sem acento). Isso é repetido até que todas as letras presentes em ACCChars e RegChars sejam substituídas.

Acento = Caract

Faz com que o resultado da função Acento seja igual a Caract que teve todas suas letras com acentos substituídas por letras sem acento.

EXEMPLO PRÁTICO

A imagem abaixo mostra uma pequena lista de palavras com acento e o resultado obtido com a UDF Acento.