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

Encontre no blog...

13/02/2017

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

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

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

image

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.

image

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.

image

Para visualizar o resultado na tela horizontal abaixo ao código fonte, clique no botão ‘horizontal” conforme mostramos abaixo:

image

Para voltar à tela vertical, clique no botão “vertical”.

image

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.

image

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.

image

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…

1 comentários:

Daniel Silva disse...

Muito bom mesmo vlws

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