PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

12/08/2017

Como testar códigos JavaScript online

Resultado de imagem para jsfiddle

Testar códigos HTML, CSS e JavaScript online

Se você já é programador ou está aprendendo JavaScript precisa conhecer o aplicativo jsFiddle. Esta ferramenta possibilita a verificação de códigos HTML, CSS e JavaScript com visualização em tempo real. Após os testes e correções dos códigos de programação, você poderá copiá-los definitivamente para os documentos do seu site.

JSFiddle é um ambiente de desenvolvimento integrado online que permite aos usuários criar e executar códigos escritos em JavaScript.

O jsFiddle está se expandindo e hoje já oferece suporte as principais bibliotecas JavaScript, como MooTools, jQuery, YUI, Prototype, Dojo, Glow, Processing, ExtJS, Raphael, Ajax, Right JS, AngularJS, entre outras.

Sua interface é simples e intuitiva, bastando selecionar a biblioteca desejada e preencher os campos de HTML, CSS e Javascript com os dados desejados para testar um script. Clicando no botão “Run”, é possível ver o script em ação, sem a necessidade de criar novos arquivos ou de utilizar vários programas para visualizá-lo.

image

Observação: Não deixe de ler também os artigos (2 simuladores muito bons):

Acessando e utilizando o jsFiddle

Acesse o site: jsFiddle

Observe que o aplicativo possui os espaços: HTML, para escrever códigos HTML, e os espaços para escrever os código em JavaScript e CSS.

image

Para facilitar o entendimento, vamos criar um exemplo onde mostraremos passo a passo para você testar o funcionamento de um script no aplicativo.

1) Vamos digitar o código HTML (opcional) do nosso exemplo:

<h2 id="demo">Este texto pode ser azul ou vermelho!</h2>
<br>

<a href="#" class="btn" onclick="mudaCor('blue');">Texto azul</a>
<a href="#" class="btn" onclick="mudaCor('red');">Texto vermelho</a>

Veja como fica o código no aplicativo.

image

2) Se desejar, digite o código CCS (opcional). Abaixo segue o código CCS do nosso exemplo:

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

No aplicativo:

image

3) Agora vamos digitar o código JavaScript. Veja abaixo o código do nosso exemplo:

function mudaCor(novaCor) {
   var x = document.getElementById("demo");
   x.style.color = novaCor;
  }

No aplicativo:

image  4) ATENÇÂO: Agora é necessário configurar as opções do código JavaScript que você deseja executar. Nesta fase é necessário escolher a biblioteca a ser utilizada, e se o código estará no head, no body  ou se ele será executado em outro lugar do código HTML. Não configurando estas opções, o seu código poderá não irá funcionar.

Clique no botão [JAVASCRIPT].

image

Defina a linguagem. No nosso exemplo vamos manter JavaScript, que é o que nós queremos testar.

image

Defina a biblioteca utilizada. Como não iremos utilizar nenhuma biblioteca (Freamework), vamos manter No-Library (pure JS), ou seja, JavaScript puro.

image

Agora devemos definir se o local onde o código JavaScript será executado. Geralmente escolha head ou body. No nosso exemplo vamos escolher head. Isso significa que o nosso código JavaScript estará localizado entre as tags <head> </head> do código HTML de uma página Web.

Se você não alterar este item, o código provavelmente não irá funcionar.

image

5) Após ter configurado as opções do JavaScript, clique em [Run] para ver o resultado do teste.

image

6) Veja então o resultado do seu teste. Faça as correções necessárias até atingir o resultado esperado.

image

Compartilhando seus códigos

Clique em [Save].

Obs.: Se você se cadastrou no site e estiver logado, seu código ficará armazenado no banco de dados do seu perfil.

image

Clique em [Embed]. Selecione Ligth (para inserir em um site com fundo claro) ou Dark (com fundo escuro). Clique em [Prefer iframe?].

image

Agora copie o código e cole na página web que desejar.

image

Veja como ficou o compartilhamento do nosso código:

Outros recursos

O botão “Fork”, por exemplo, cria um novo fiddle do zero a partir da revisão do fiddle que está sendo editado.

image

A opção “Tiddy” alinha os códigos de forma apropriada.

image

Como se ainda não fosse o suficiente, ainda há a opção de discussão,  permitindo ao desenvolvedor compartilhar suas dúvidas e sugestões com a comunidade.

image

image

Se cadastrando no site

Se você se cadastrar no no site JSFiddle, poderá criar um banco de dados com todos os seus códigos testados.

Para se cadastrar, clique em [Sign in].

image

Após estar cadastrado e logado, clique em [Dashboard] para ver todos os seus códigos salvos.

image

Para editar ou compartilhar o código, clique no link como mostra a figura abaixo.

image

byALF

08/08/2017

Como atualizar seu Windows Movie Maker trial sem precisar registrar

Resultado de imagem para movie maker logo

Windows Movie Maker (trial version)

Se você instalou a versão “trial” do programa Windows Movie Maker no Windows 10, deve ter percebido que após alguns dias o aplicativo fica restrito para alguns recursos. Assim, se você vai salvar um vídeo no seu computador, por exemplo, aparece um tela solicitando o código de registro na Microsoft.

image

Obs.: Veja como instalar o aplicativo Windows Movie Maker no artigo: Como girar um vídeo 90º (à direita ou à esquerda)

Desbloqueando o aplicativo definitivamente

Para desbloquear o software Windows Movie Maker, sem precisar criar um registro na Microsoft, siga o tutorial abaixo:

1) Abra o “Explorador de Arquivos

image

2) Entre em “Este Computador” selecione “Arquivos de Programas (x86)”.

image

3) Abra a pasta “Windows Live”.

image

4) Abra agora a pasta “Photo Gallery”.

image

5) Localize o arquivo “MovieMaker.exe” e clique com o botão direito do mouse sobre ele.

image

6) Selecione “Enviar para” e clique em “Área de trabalho (criar atalho)”.

image

7) Na área de trabalho, altere o nome que desejar..

image

8) Agora é só clicar no novo ícone e desfrutar do aplicativo sem limitações…

image

9) Se desejar, insira o ícone na barra de ferramentas. Clique com o botão direito do mouse sobre o novo ícone e selecione “Fixar na barra de tarefas”.

image

byALF

31/07/2017

Série Arduino Básico #23 - Criando efeito de cores com um LED RGB

1280x720

Série Arduino Básico

Continuando nossa Série Arduino básico, hoje mostraremos um projeto bem legal para você criar um efeito de cores utilizando o LED RGB, que possui em um mesmo encapsulamento três LEDs com as cores primárias - vermelho (Red), verde (Green) e azul (Blue). Através de PWM você poderá gerar diversas combinações de cores.

Objetivo: Para fins didáticos, estudo do PWM (Pulse Width Modulation), valores RGB (Red, Green and Blue) e aplicações com LEDs.

Tudo para o seu Arduino!

No Squids Arduino você vai poder construir este projeto e aprender como ele funciona. Muito legal!!!

Obs.: Todos projetos foram testados pelo site www.squids.com.br/arduino que traz um tutorial completo para cada montagem com a lista de componentes, código do programa (sketch), simulação online, montagem do circuito e explicação detalhada do projeto.

Para ver todos projetos básicos publicados no Squids, acesse: projetos básicos

Gerar efeito de fogo

Acesse o link: Projeto 23 - Criando cores com um led RGB

O LED RGB nada mais é que três Leds em um só, ele é formado por um vermelho (R de red), um verde (G de green) e um azul (B de blue). Associando as cores dos três Leds é possível se obter várias possibilidades de cores.

Após iniciar o programa, a mistura das cores vermelho (R), verde (G) e azul (B) e a variação de luminosidade formada no LED RGB criará um efeito com diversas combinações de cores diferentes.

image

Veja abaixo o vídeo do projeto em ação:

Veja o tutorial completo em: Projeto 23 - Criando cores com um led RGB

byALF

26/07/2017

Sabia que dá para jogar o “Running T-Rex” do Chrome com a internet conectada?

image

“Endless Runner”, o jogo do escondido do Chrome

Se você utiliza o Google Chrome como navegador de internet já jogou, ou deve ter percebido que aparece um dinossauro no canto superior esquerdo da tela quando a internet perde a conexão. Trata-se do jogo “endless runner” criado pelo Google para quem quer matar o tempo antes da conexão voltar.

image

Joguinho especial para ajudar você a matar o tempo enquanto a internet não volta…

O joguinho é bem simples: com o pequeno tiranossauro, o jogador deve desviar de cactos, pássaros e o que estiver em seu caminho. No smartphone basta tocar na tela para executar o comando de pular.

No computador, utilize as teclas de setas (para cima e para baixo) para fazer o dinossauro pular ou agachar.

image

Obs.: Infelizmente, o único jeito para você compartilhar a sua pontuação no game é fazendo uma captura de tela.

Jogar “endless runner” com a internet conectada

Para rodar o joguinho sem precisar desativar ou perder a conexão com a internet, siga as instruções abaixo:

1) Entre no navegador Google Chrome.

2) Acesse o link: Running T-Rex.

image

3) Pressione a tecla “espaço” para iniciar o jogo…

image

Boa diversão…

Observação: Você também poderá desativar a conexão da internet. Basta colocar seu celular, tablet, ou Notebook (se possível) em “Modo Avião”. Para ativar o jogo é preciso pressionar a tecla “espaço” no PC ou tocar na tela para dispositivos móveis.

byALF

17/07/2017

Como inserir um formulário de contato JotForm no Wordpress

JotForm - Visual Dicas

Formulário de Contato JotForm

Já mostramos aqui no Visual Dicas como criar um formulário de contato gratuito a partir do aplicativo JotForm (leia: Como criar um formulário de contato gratuito para colocar no seu blog ou site.

Neste post vamos mostrar como inserir o formulário no Wordpress.

Colocando o JotForm no Wordpress

Neste post vamos mostrar como inserir o formulário no Wordpress. Siga as instruções abaixo:

1- Acesse o painel do Wordpress

Para entrar no painel do Wordrpress digite o endereço:

http://www.SEU SITE/wp-login.php

Entre com o seu nome de usuário (username) e senha (password). Clique em [Log in].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

2) Crie uma página estática

Diferentemente das postagens, as páginas estáticas não possuem uma data de publicação e não permitem comentários. Elas são utilizadas para criar áreas que não precisam de interação com seu leitor, como o índice de artigos, página de contato e a página de informações sobre seu blog.

No menu lateral clique em [Paginas]. Depois clique em [Adicionar nova].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

3) Adicione título e código JotForm

Em Digite o título aqui, insira o nome da página. No nosso exemplo vamos chamá-la de “Contato”.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Para acrescentar o código HTML do JotForm, clique no botão [Texto] do editor do Wordpress.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

4) Copiando o código do JotForm

Acesse o aplicativo JotForm. Se não estiver conectado faça o login do site.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

No formulário que você criou, clique em More. Depois selecione [Publicar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Clique na aba [Incorporar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Clique agora no botão [Copiar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

5) Colando o código HTML na página estática do Wordpress

Volte para o painel do Wordpress e em Texto cole o código que você copiou. Após o código copiado, clique em [Visualizar] para você verificar como vai ficar a sua página de contato.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Veja como ficou a visualização do nosso exemplo.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Volte para o painel do Wordpress e clique em [Publicar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Pronto, a sua página de contatos está concluída.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

6) Coloque a página no menu do Wordpress.

Se você tem um menu horizontal ou vertical, coloque sua página de contato como mais um elemento para seus usuários.

Para acrescentar a nova página de contatos no seu menu, clique em Aparência no menu lateral. Depois selecione [Menus]. Em Páginas, clique na aba Mais Recentes e selecione a nova página adicionada.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

No nosso exemplo selecionamos “Contato”. Clique em [Salvar menu].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Observe que a sua nova página de contatos foi adicionada no menu.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas'

Se desejar alterar a posição da página, basta arrastá-la para o local desejado.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Finalizado, clique no botão [Salvar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Pronto, sua nova página de contatos está inserida no menu…

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Para conferir nossa página de teste, clique em: Página de Testes Visual Dicas

byALF 

Leia também: Como inserir um formulário de contato JotForm no Blogger

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More