Escrito originalmente em 15/09/2014 | Atualizado em 13/02/2017
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
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.
Para visualizar o resultado na tela horizontal abaixo ao código fonte, clique no botão ‘horizontal” conforme mostramos abaixo:
Para voltar à tela vertical, clique no botão “vertical”.
Bem simples. Agora você poderá ir ajustando o código digitado em Código Fonte 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>
E como fica a simulação com o Squids Editor.
Faça os testes para conhecer melhor o Squids Editor. Envie seus comentários dizendo o que você achou deste simulador…
Leia também:
