.:: Codeando HTML en tiempo Real ::.

2 12 2008

Molestando un ratico con JavaScript luego de haber hecho unas pruebas con el evento onkeyup,
se me ocurrio una idea muy divertida que permitirá recrear los ejemplos de las páginas Web
en tiempo real. Talves suene tonto, pero igual será de gran ayuda para aquellos que comienzan y les
da flojera codear, guardar y observar…

¿Objetivo?

- Realizar en este código los 3 pasos comentados arriba (codear guardar y observar… ) en solo 1.

Descripción para implementar el código

- Simplemente copia y pega este código en un block de notas, guardalo con el nombre que quieras y
extensión .htm.

¿Qué más puedes hacer con esto?

- Luego de abrir tu pagina (archivo.htm) puedes hacer pruebas con codigo javascript,
jugar con las etiquetas de HTML, mejorar tus estilos con las propiedades de CSS, algunos XSS y el resto te lo dejo
al libre albeldrio de tu imaginación.

Código

<html>
<head>
   <title>.:: Jugando con JavaScript :D  ::. </title>
   <script language="JavaScript">

  //Evalua el codigo y muestra su efecto sobre la pagina Web
   function mostrarEjemplo(valor){				

	//Guardo en una variable el valor de lo ingresado en el textarea
	salida  = " " + valor;

	/*Tomo como referencia la capa con el id codigoSalida para retornar en
	Vivo y en directo lo que se digita*/
	document.getElementById("codigoSalida").innerHTML = salida;
   }

   </script>

   <style type="text/css">
	body{
	text-align:center;
	color:#3366aa;
	font:13px verdana;
	}	

	textarea{
	width:800px;
	height:200px;
	font:15px arial;
	color:#ee5555;
	border:1px solid #555555;
	}

	textarea:focus{
	background-color:#ffffef;
	border:1px solid #ee5555;
	}
   </style>
</head>
<body>
	<h2> _- Codeando HTML en tiempo Real -_ </h2>
	<hr><br>
	<textarea name="codigo" onkeyup="mostrarEjemplo(this.value)"></textarea>
	<div id="codigoSalida"></div>
</body>
</html>

Algun ejemplo para ensayarlo

Bien los ejemplos podrian ser muchos, aunque el efecto se ve mejor cuando le realizas algun cambio a texto.
Por ejemplo aqui te puedo dejar dos ejemplos para que observes el funcionamiento.

1.) Jugando con los encabezados de HTML

   <h1 style="color:#ee5555;"> Este es un encabezado Azul :P </h1">

Greetings to all and happy Bandwidth


Comentarios : 1 comentario

Categorías : HTML