Visual Dicas

terça-feira, 16 de setembro de 2014

Visual Dicas

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Posted: 15 Sep 2014 04:24 PM PDT

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real - Visual Dicas

Testar códigos HTML, CSS e JavaScript online

Neste artigo vamos apresentar o Squids Editor. Um simulador online e gratuito que 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

O Squids Editor faz parte de um projeto novo do Squids que irá desenvolver tutoriais gratuitos para programadores iniciantes. O Projeto prevê tutoriais das linguagens HTML, PHP, JAVA, CSS, JavaScript, etc.

A vantagem de se utilizar o Squids Editor é que você poderá corrigir facilmente trechos de códigos e scripts, testando-os em vários navegadores antes de colocar no seu site. O Squids Editor foi desenvolvido a partir do editor w3schools.com e está configurado totalmente em português.

Usando o Squids Editor

Acesse o site: http://squids.com.br/editor

No campo Código Fonte (lado esquerdo da tela) digite o código que você deseja simular.

No exemplo a seguir usamos o código HTML:

        <!DOCTYPE html>        
<html>         
<body>
      <h1>Meu Primeiro Cabeçalho.</h1>
      <h2>Meu Segundo Cabeçalho.</h2>
      <p>Meu primeiro parágrafo</p>
      </body>        
</html>

Depois de digitado o código clique em [Enviar Código] para visualizar o resultado.

Veja o Resultado no lado direito da tela. A visualização acontece em tempo real, como como se você colocasse o código em um site.

Bem simples. Agora você poderá ir ajustando o código digitado em Código Fonte (lado esquerdo da tela) até encontrar o resultado esperado.

Exemplo de simulação código CSS

A seguir, mostraremos um exemplo da simulação de um código CSS:

<!DOCTYPE html> <html> <head> <title>CSSDesk</title> <style type="text/css"> div.caixateste{ color: yellow; /* estrutura da caixa */ background-color: orange; margin: 50 50 auto; width: 200px; padding: 100px; text-align: center; /* canto arredondado - não funciona no IE */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* sombra da caixa - não funciona no IE */ -webkit-box-shadow: rgba(0,1,1,1.2) 0px 2px 5px; -moz-box-shadow: rgba(0,1,1,2.2) 0px 1px 5px; box-shadow: rgba(0,1,1,2.2) 0px 1px 3px; } </style> </head> <body> <div class="caixateste"><b>CAIXA DE TESTE</b></div> </body> </html>

Veja como ficou o código no simulador.

Exemplo de simulação JavaScript

Veja agora um exemplo de simulação usando JavaScript:

        <!DOCTYPE html>        
<html>
      <body>
      <h1>Mudando estilos HTML</h1>
      <p id="demo">        
JavaScript pode trocar o estilo de um elemento HTML.         
</p>
      <script>        
function minha_função()         
{         
x=document.getElementById("demo") // Encontrar o elemento         
x.style.color="#ff0000";          // Mudar o estilo         
}         
</script>
      <button type="button" onclick="minha_função()">Click Aqui!</button>
      
</body>       
</html>