Ultimas Postagem

Estudo sugere que computadores poderão ler mentes no futuro

Cientistas da Universidade de Rochester, em Nova York, criaram um programa de computador que é capaz de examinar a atividade cerebral e interpretar determinados padrões da mente humana.

Segundo a notícia do site Daily Mail, o experimento prova que o computador pode interpretar certas palavras a partir dos padrões e, então, predizer sentenças completas.

A pesquisa se mostra extremamente útil, principalmente porque, se os resultados mostrarem progresso, ela poderá ajudar pessoas que não conseguem falar, como mudos ou pessoas que tiveram casos de derrame cerebral. Até o momento, o software acertou quase 70% das frases que as pessoas estavam pensando.

Como foi feito o experimento?

Para testar o programa desenvolvido, os pesquisadores usaram imagens de ressonância magnética de 14 participantes, os quais deviam ler mentalmente 240 sentenças diferentes, mas muito similares. Com base nas frases e nas imagens, o programa pôde relacionar as áreas ativadas e as respectivas intensidades.

Além de composições simples, os testes também foram realizados com palavras que envolviam aspectos emocionais, permitindo ter uma compreensão melhor do funcionamento do cérebro. Finalmente, após as tantas análises, o programa criou uma base para conseguir prever os pensamentos dos participantes do experimento.

É importante notar, contudo, que esse tipo de tarefa ainda é experimental e complexo. A palavra café, por exemplo, ativa 65 respostas com diferentes características no cérebro. O estudo ainda em fase inicial, de modo que não devemos ter novidades para um futuro próximo, mas há boas perspectivas para daqui alguns anos.

Indestrutível? Super cadeado de R$ 3 mil aguenta levar muito chumbo 

is é, nós já sabemos que quebrar um cadeado a tiros é muito mais difícil do que parece pelos filmes e games. Mas isso ganha outras proporções quando falamos do S&G 833: diferente da maioria dos cadeados, feitos para o público geral, este item vem com padrão de qualidade militar, com 2 kg de aço maciço e uma estrutura feita para sobreviver a praticamente tudo.

Será que isso é suficiente para proteger algo importante de praticamente tudo? O canalDemolitionRanch veio colocar isso a prova em mais um vídeo. Como no caso anterior, o teste consistiu simplesmente em tentar fazer o cadeado em pedaços com armas de fogo dos mais variados calibres – o que, surpreendentemente, não deu certo como muitos imaginavam.

Usar uma pistola 9mm, por exemplo, deu completamente errado, já que a bala mal chegou a arranhar a superfície do cadeado. A famosa Desert Eagle não fez muito melhor com seu calibre .50, fazendo apenas um leve amassado na estrutura. Só ao passar para uma escopeta com um projétil pesado é que passamos a ver algum estrago; mesmo assim, o estrago foi mínimo.

Acha que a situação fica melhor com rifles de assalto? Novamente, não muito. Balas normais apenas fazem uma perfuração leve na superfície da S&G 833, independente do calibre, enquanto uma munição perfurante, embora cumprindo seu trabalho em penetrar na carcaça, conseguiu apenas um buraco mínimo (e a bala ainda ficou presa lá dentro).

A solução, por sua vez, foi apostar em nada menos do que o famoso rifle pesado BMG e suas balas gigantescas. Mesmo assim o cadeado aguentou bem, sendo destruído apenas após cinco tiros dessa arma. E o mais curioso foi que o metal acabou tão deformado que a tranca ainda assim não se soltou.

Resumindo a história: “É seguro dizer que, se você está prestes a invadir alguma coisa e você ver esse cadeado na porta, só tente cavar pela parede ou algo assim. Porque isso vai levar uma eternidade para você atravessar”, disse ele, no vídeo. O único problema, é claro, é ter dinheiro para comprar um S&G 833, já que ele custa quase 3 mil reais...

Notebook da MSI terá SLI de GTX 1080 com GDDR5X para rodar jogos em 4K

ferente do que aconteceu em gerações anteriores, a NVIDIA não deve ter chips gráficos especialmente desenhados para notebooks.

O motivo para tal decisão por parte da fabricante é que a arquitetura Pascal permite levar os mesmos componentes de desktop para os aparelhos portáteis, ou seja, em vez de termos a GTX 1080M nos notebooks, vamos ter acesso à GTX 1080 original.

A informação foi confirmada por algumas especificações de produtos que pintaram na web recentemente. Primeiramente, a MSI deixou vazar algumas informações sobre seu notebook GT83VR TITAN SLI, que, como o nome sugere, vai trazer uma combinação de dois chips gráficos, com módulos de memória do tipo GDDR5X.

Segundo os detalhes publicados no site VideoCardZ, o modelo em questão deve trazer dois chips gráficos GTX 1080, sendo capaz de prover 40% a mais de desempenho do que o modelo com um único componente gráfico.

Os benchmarks da MSI indicam que o aparelho é capaz de marcar 9.300 pontos no 3D Mark Fire Strike Ultra (que roda em 4K). Vale notar que uma TITAN X (para desktop) marca 4.000 pontos neste teste, enquanto que a GTX 1080 (também para desktop) consegue 5.000 pontos. Confira as especificações do produto abaixo:

• Tela: 18,4 polegadas Full HD
• Processador: Intel Core i7-6920HQ
• Memória RAM: 64 GB DDR4 2.400 MHz
• Gráficos: 2 x GTX 1080 com 8 GB GDDR5X (total de 16 GB)
• Armazenamento: 2 x M.2 512 GB (Super RAID 4) + 1 TB 7.200 RPM
• Leitor óptico: sim, gravador de Blu-ray

Volkswagen proíbe funcionários de instalar Pokémon Go no celular

kémon Go pode ser motivo de folia para muita gente, mas a Volkswagen não tem visto o app com bons olhos, alegando que o joguinho pode colocar o emprego de muitos em risco.

A companhia alemã enviou um email nesta semana informando que cerca de 70 mil funcionários na Europa estão proibidos de manter o game instalado em seus celulares.

O motivo? Segundo a mensagem da fabricante, Pokémon Go representa um risco para toda a companhia. Nos últimos dias, muitos funcionários começaram a brincar em ambiente de trabalho, algo que despertou preocupação, já que o app de realidade aumentada pode acabar expondo projetos secretos.

De acordo com o email, o uso de serviço de geolocalização e a ativação da câmera pode acabar resultando em espionagem corporativa. A Volkswagen não disse com todas as palavras o que vai acontecer se alguém vazar alguma informação importante enquanto joga Pokémon Go, mas certamente essa pessoa não vai ganhar um bônus.

Os funcionários se defenderam e disseram que vão jogar no tempo vago, ainda que só fora da empresa. Alguns relataram que não há como vazar informações, pois os empregados que têm acesso a áreas restritas são inspecionados constantemente e devem manter as câmeras “tapadas”. Parece que esses monstrinhos ainda vão causar muitos problemas.

HTML básico - códigos HTML

Aprenda os princípios básicos para confecção de um site em HTML para que você possa fazer o seu primeiro site.

Neste artigo serão mostrados os principais códigos HTML necessários para você criar sua página web básica.

Serão apresentadas as tags (marcadores de código responsáveis por uma função específica) para incluir objetos como imagens, links, títulos, tabelas. Veremos ainda como formatar textos, definir o plano de fundo da página, além de uma tabela contendo as principais cores utilizadas.

Atualmente existem vários editores com interface gráfica que permitem criar páginas web facilmente, arrastando e soltando componentes na tela. Porém, conhecendo os códigos que estão por trás da interface (que os editores geram quando montamos a interface manualmente), é possível criar páginas usando um simples editor de texto como o Bloco de Notas do Windows. Basta salvar o arquivo com extensão “.html” e manter a sintaxe correta da linguagem. Por exemplo, o conteúdo da página deve estar entre as tags <html> e </html>.

Observação importante: toda tag aberta deve ser fechada em algum ponto. Para isso se usa a barra “/” dentro de uma tag semelhante a de abertura. Por exemplo, a tag <table> deve ser fechada com a tag </table>. Existem ainda as tags que são abertas e fechadas em um único marcador, por exemplo, a tag <br/> que representa uma quebra de linha, não precisa de outra de fechamento, pois ela fecha a si própria com a barra posta no final.

Estrutura básica de uma página HTML

Uma página HTML deve manter sempre uma estrutura básica, a partir da qual são inseridos outros elementos com formatações avançadas. A Listagem 1 mostra a estrutura base de toda página HMTL.

Listagem 1: Estrutura básica da página HTML

<html>     <head>         <title>Título da página</title> </head> <body>     Corpo do documento. Texto, imagens, tabelas, etc. </body> </html>

O conteúdo da tag <title>, ou seja, o título da página, será exibido no topo da janela/aba do browser. Quando a página for adicionada aos favoritos, esse título também será sugerido como atalho.

Atributos da tag <body>

Através da tag <body> (corpo) podemos definir propriedades gerais para toda a página. Por exemplo, é possível determinar a cor do plano de fundo da página, ou usar uma imagem para essa função, e a cor dos links em várias situações (visitados, não visitados, clicados).

Os atributos dessa tag são os seguintes:

• bgcolor: cor do plano de fundo. Deve ser usado o código hexadecimal ou o nome da cor (conforme tabela vista mais adiante), assim como em todos os atributos de cores.
• background: URL de uma imagem para ser usada como plano de fundo.
• link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados (o padrão é azul).
• alink: cor dos links quando são clicados (o padrão é vermelho).
• vlink: cor dos links após serem visitados (o padrão é roxo).
• text: cor do texto da página.

A listagem a seguir mostra um exemplo de definição de alguns desses atributos.

Listagem 2: Definindo atributos da tag body

<body text=”black” bgcolor=”blue” link=”yellow”></body>

Cores

Ao atribuir valores aos atributos de cores da página (plano de fundo, cor do texto, etc), é possível usar o nome das cores em inglês (apenas algumas cores) ou o código hexadecimal destas. Usando o código hexadecimal é possível aplicar várias cores além das que possuem nome padrão, que são listadas abaixo.

Cor	Nome (no html)	Código hexadecimal
Preto	black	#000000
Branco	white	#ffffff
Azul	blue	#0000ff
Amarelo	yellow	#ffff00
Verde	green	#009000
Lima	lime	#00ff00
Marrom	maroon	#800000
Oliva	olive	#00ffff
Azul celeste	aqua	#ff00ff
Lilás	fuchsia	#808080
Cinza	gray	#000080
Azul escuro	navy	#000080
Roxo	purple	#800080
Verde escuro	teal	#008080
Cinza claro	silver	#c0c0c0
Vermelho	red	#ff0000

Tabela 1: Nomes e códigos hexadecimais das principais cores

Cabeçalhos HTML

A linguagem HTML permite adicionar cabeçalhos (ou títulos) no corpo da página, diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags “h”, que possuem seis níveis, de 1 a 6. A seguir tem-se um exemplo de utilização dos seis níveis de cabeçalho, seguido do resultado do código na Figura 1.

Listagem 3: Utilizando cabeçalhos

<h1>Título de nível 1</h1> <h2>Título de nível 2</h2> <h3>Título de nível 3</h3> <h4>Título de nível 4</h4> <h5>Título de nível 5</h5> <h6>Título de nível 6</h6>

Figura 1: Cabeçalhos visualizados no browser

É possível alterar o alinhamento dos títulos definindo seu atributo “align” com um dos seguintes valores: center, left e right, conforme se vê na Listagem 4.

Listagem 4: Alinhando os cabeçalho

<h1 align=”center”>Título de nível 1 - centralizado</h1> <h2 align=”left”>Título de nível 2 - esquerda</h2> <h3 align=”right”>Título de nível 3 - direita</h3>

Figura 2: Cabeçalhos alinhados

A tag <font> - definindo o tamanho e cor do texto

Usando a tag <font> é possível alterar algumas das características primordiais do texto como o tipo da fonte (Arial, Times New Roman, etc), a cor e o tamanho. Essas propriedades são alteradas com a definição dos atributos face, color e size, respectivamente, da tag font.

O código seguinte é um exemplo de uso desses atributos, logo após são apresentados os resultados.

Listagem 5: Uso da tag <font>

<font face="Arial" size="3" color="blue">Arial 3 Azul</font> <font face="Times" size="4" color="green">Times 4 Verde</font> <font face="Courier" size="5" color="red">Courrier 5 Vermelho</font>

Figura 3: Características da fonte alteradas

Formatação adicional do texto

Existem algumas tags bastante úteis que permitem aplicar uma formatação a um trecho do texto, apenas adicionando as tags de abertura e fechamento antes e depois do texto a ser formatado, assim como foi visto para a tag <font>.

• <b></b>: marca o texto como em negrito (bold).
• <i></i>: marca o texto como em itálico (italics).
• *<u></u>: marca um texto como sublinhado (underlined).
• *<s></s> ou <strike></strike>: marca um texto como riscado.
• : marca um texto como subscrito.
• : marca o texto como sobrescrito.
• *<center></center>: centraliza o texto.

Observação: as tagas marcadas com asterisco (*) foram descontinuadas na versão 5 da HTML, ou seja, seu uso não é mais indicado.

É possível ainda usar essas tags em conjunto, devendo-se apenas manter a ordem de abertura e fechamento, como será mostrado na Listagem 6.

Listagem 6: Usando tags de formatação de texto

<b>negrito</b> <i>itálico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrito e itálico</i></b>

O que gera o seguinte resultado, quando aberto no browser:

Figura 4: Aplicação de formatações no texto

Parágrafos e quebras de linha

Geralmente, quando escrevemos textos mais extensos, é preciso dividi-los em parágrafos, de forma a separar e organizar melhor as informações. Durante a codificação (“escrita” do código) de uma página HTML, podemos usar a tecla Enter para organizar o texto no editor, mas essas quebras de linha não serão interpretadas pelo navegador. Para isso é preciso utilizar as devidas tags <br/> para quebrar a linha e passar para a linha de baixou, ou <p></p> para definir um parágrafo.

Por questão de organização do código, é indicado usar a definição correta de parágrafos no lugar das quebras de linha.

Por exemplo, a listagem a seguir mostra um texto extenso com várias quebras de linha onde deveriam haver divisões de parágrafos. Em seguida é mostrada a forma correta de estruturar o código para o mesmo texto.

Listagem 7: Texto com várias quebras de linha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. <br/> Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar <br/> Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet.

O resultado é o seguinte:

Figura 5: Texto com quebras de linha no browser

Agora o mesmo texto definido em parágrafos.

Listagem 8: Texto com vários parágrafos

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. In feugiat porta erat. Quisque tempor dictum mauris.</p> <p>Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus lobortis.</p> <p>Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue dignissim lacinia.</p>

Agora, vemos que o resultado é inclusive visualmente mais organizado (Figura 6), como deve ser o texto realmente.

Figura 6: Texto dividido em parágrafos

Sabendo como dividir o texto corretamente em parágrafos, podemos ainda alterar seu alinhamento para atender às diversas situações que surgem no dia-a-dia. Isso pode ser feito com a definição do atributo “align” da tag <p>, com um dos seguintes valores: left (alinhado à esquerda), right (alinhado à direita), Center (centralizado) e justify (justificado).

O valor padrão para essa propriedade é “left”, então todo texto fica naturalmente alinhado à esquerda.

Imagens

Inserir imagens na página é uma das necessidades mais comuns e, por esse motivo, também é consideravelmente simples de ser feito. Para esse fim existe a tag <img>, cujos atributos são mostrados a seguir:

• src: caminho completo do arquivo de imagem (incluindo a extensão do arquivo).
• alt: texto alternativo para a imagem, geralmente uma descrição da mesma.
• width: largura da imagem em pixels.
• height: altura da imagem em pixels.

Observação: os atributos src e alt são obrigatórios para a tag <img>. Além disso, a tag deve ser fechada nela mesma, ou seja, a sintaxe mínima é <img src=”caminho” alt=”texto”/>.

A seguir temos um exemplo de código para a inserção de imagens seguido do resultado visualizado no browser.

Listagem 9: Inserindo imagens

<img src="Java_05.png" alt="Imagem 1"/> <img src="Java_05.png" alt="Imagem 2" width="100"/> <img src="Java_05.png" alt="Imagem 3" height="200"/>

Figura 7: Exemplos de imagens com a tag img

É importante fazer algumas observações:

• Caso não sejam definidas a largura e/ou a altura, a imagem será adicionada à página em seu tamanho original.
• Ao alterar apenas uma das dimensões, a outra é redefinida proporcionalmente. Caso se deseje alterar tanto a largura quanto a altura com valores específicos, os dois atributos devem ser definidos.

Criando links

Como em toda página web, podemos precisar inserir links para outras páginas, para downloads, e-mails, etc. A HTML possui uma tag chamada âncora (anchor, em inglês) representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo “href” com o endereço para o qual o usuário deve ser redirecionado.

A sintaxe básica da tag <a> é apresentada na listagem a seguir, onde criamos um link para o endereço “http://www.meusite.com.br” com o texto “Meu Link”, onde o usuário pode clicar para ser redirecionado.

Listagem 10: Sintaxe de criação de links

<a href="http://www.meusite.com.br">Meu Link</a>

No lugar do texto “Meu Link” podem ser inseridos outros elementos como, por exemplo, imagens, títulos, etc. Basta manter a ordem de abertura e fechamento correta das tags.

No atributo “href” informamos o caminho para o qual o link deve levar o usuário, o que não necessariamente precisa ser outro site. Podemos também criar links para download de arquivos ou para envio de emails. Para downloads, basta indicar o caminho do arquivo a ser baixado e para enviar emails, é preciso usar mailto:email_desejado. A seguir veremos vários exemplos de links para sites e arquivos, usando imagens e textos comuns.

Listagem 11: Exemplos de links

<a href="www.meusite.com.br">Meu Link</a> <a href="arquivo.zip">Baixar arquivo</a> <a href="arquivo.zip"><img src="download.png" alt="Download"/></a> <a href="www.meusite.com.br"><h1>Titulo como link</h1></a>

O que gera o seguinte resultado:

Figura 8: Links na página

Conhecendo a sintaxe da tag <a>, basta utilizar as demais tags corretamente e criar os arranjos desejados com imagens, títulos, formatando a fonte, entre outras modificações.

Listas

Outra estrutura bastante comum de ser utilizada em páginas web é a lista, que serve pra organizar um conjunto de itens, sequencialmente ou não. As listas podem ser ordenadas ou não, ou seja, cada item podem ou não ter um número/letra/símbolo que o identifique sequencialmente.

As tags para listas ordenadas e não ordenadas são, respectivamente, <ol></ol> e <ul></ul>. Entre essas marcações devem ser inseridos os itens, que levam a tag <li></li>, conforme os exemplos abaixo.

Listagem 12: Usando listas

<ol>     <li>Primeiro item</li>     <li>Segundo item</li>     <li>Terceiro item</li> </ol> <ul>     <li>Primeiro item</li>     <li>Segundo item</li>     <li>Terceiro item</li> </ul>

Nesse código temos duas listas, uma ordenada e uma não ordenada, que no browser têm a seguinte aparência.

Figura 9: Lista numerada e não numerada

Existe ainda um terceiro tipo de lista: a lista de definição, que como o nome sugere, é usada para apresentar itens com um título seguido de sua definição. A tag principal desse tipo de lista é a <dl></dl>, enquanto os itens são compostos por duas tags: <dt></td> para o título e <dd></dd> para a definição. O exemplo na seguir torna mais fácil a compreensão desse elemento.

Listagem 12: Exemplo de lista de definição

<dl>     <dt>Item 1</dt>     <dd>Definicao do item 1</dd>     <dt>Item 2</dt>     <dd>Definicao do item 2</dd>     <dt>Item 3</dt>     <dd>Definicao do item 3</dd> </dl>

Figura 10: Lista de definição vista no browser

Tabelas

As tabelas, por muito tempo foram usadas incorretamente para montar toda a estrutura do site. Ou seja, a página era uma grande tabela e todo seu conteúdo era organizado dentro das células. Isso era usado pela facilidade de se montar o layout usando essa estrutura, afinal, as tabelas tinham suas células bem definidas e fáceis de manipular.

Porém, forma não era correta e isso foi sendo visto ao longo dos anos e passou-se a utilizar o conceito de “tableless” (sem tabelas). Começou-se a incentivar o uso das tags corretas para estruturação do layout e das tabelas para seu objetivo real: apresentação de dados “tabulares”.

As tabelas são criadas sobre a tag base <table></table> e é dividida em linhas <tr></tr> e colunas <td></td>. A ordem de hierarquia é essa: table > tr > td, uma dentro da outra. Ou seja, a tabela é dividida em linhas que, por sua vez, são divididas em colunas.

A tag table possui o atributo “border”, que define a borda das células com um número inteiro representando a espessura. A Listagem 14 apresenta um exemplo básico de tabela.

Listagem 14: Exemplo de uso de tabela

<table border="1"> <tr> <td>Linha 1, Coluna 1</td> <td>Linha 1, Coluna 2</td> <td>Linha 1, Coluna 3</td> </tr> <tr> <td>Linha 2, Coluna 1</td> <td>Linha 2, Coluna 2</td> <td>Linha 2, Coluna 3</td> </tr> </table>

Nessa tabela temos duas linhas (tr) com três colunas (td) cada, como vemos na figura a seguir.

Figura 11: Tabela com duas linhas e três colunas

HTML 5

A versão mais recente da linguagem HTML, a HTML5 trouxe várias novidades para o desenvolvimento web. Novas tags foram inseridas, bem como outras foram descontinuadas. Com essa versão, objetiva-se obter a maior compatibilidade entre browsers (cross browser), que até então era um dos principais problemas dos desenvolvedores web front-end (responsáveis pela página em si, o lado cliente).

Com o auxílio das folhas de estilo e da Javascript (linguagem de script responsável por dar mais dinamismo à página HTML), que não são foco deste artigo, é possível montar páginas bastante complexas, com efeitos diversos. Porém, muitas vezes o código que funcionava em um browser, era incompatível com os demais, o que fazia com que os designers precisassem escrever vários códigos para obter a compatibilidade, quando conseguiam. Muitas vezes se tornava impossível adicionar uma funcionalidade a uma página, pois essa não poderia ser visualizada em todos os navegadores. Em alguns casos, porém, o usuário ficava “preso” a um navegador, se quisesse utilizar um determinado recurso, precisaria usar o browser sugerido.

Esse foi o principal objetivo do lançamento das mais recentes versões das “Web Standards”, tecnologias base da web (HTML, CSS e Javascript). Com elas, espera-se obter total (ou maior) compatibilidade entre os navegadores, inclusive aqueles de dispositivos móveis, cuja quantidade de usuários vem crescendo rapidamente.

Espero que tenham gostado dos nossos exemplos de códigos HTML. Nosso intuito é no artigo, foi elaborar um conteúdo simplificado, para que, ao programar em HTML você se sinta mais confiante mediante as técnicas apresentadas.

Referências e sugestões de estudos complementares