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

Publicidade:

Encontre no blog...

15/09/2014

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

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

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

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.

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

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.

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

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.

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

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.

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

Faça os testes para conhecer melhor o Squids Editor. Envie seus comentários dizendo o que você achou deste simulador…

byALF 

Leia também:

Simulador CSS e HTML – Ótimo para iniciantes…

0 comentários:

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More