Consola Interactiva (básica)

WhiZ · Agosto 29, 2014, 05:57:42 PM

Hola gente! Cómo les va? Hoy les vengo con un poco de código web. Por cuestiones que no vienen al caso, hoy se me ocurrió incorporar una especie de consola interactiva a mi página web. Después de pensarlo un rato, siendo que iba a ser una consola simple, decidí hacerlo con js.

Primero les dejo una imagen y luego les paso el código.

Muy simple como ven...

Ahora los códigos.

shell.html

Código: html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Interactive shell</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="functions.js"></script>
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
	</head>
	<body onload="createPrompt()">
		<div class="shell" id="shell"></div>
	</body>
</html>

style.css

Código: css

div.shell {
	border:3px solid;
	width:1000px;
	height:300px;
	background-image:url(http://mcflashfun.com/files/theme/header-footer-bg.jpg?10692);
	font-family:monospace;
	overflow:auto;
}

p, ul{
	color:#999;
}

span {
	font-weight:bold;
}

span.prompt_inicial {
	color:#9AFE2E;
}

span.prompt_final {
	color:#199;
}

input.cmd {
	background-color:transparent;
	border:0px solid;
	font-family:monospace;
	color:#999;
}

functions.css

Código: javascript

var prompt = '<p class="prompt">\
	<span class="prompt_inicial">root@root:</span>\<span class="prompt_final">~# </span>\
	<input class="cmd" id="active_cmd"type="text" maxlength="20" onkeypress="runCmd(event)"/>\
</p>'

function createPrompt() {
    $("#active_cmd").attr( "id", "inactive_cmd" );
	$(".shell").append(prompt);
	$("#active_cmd").focus();
}

function ayuda() {
	var ayuda = "<p>Utiliza alguno de los siguientes comandos para ver informaci&oacute;n adicional:\
		<ul>\
			<li>ayuda</li>\
			<li>info</li>\
			<li>aplicaciones</li>\
			<li>limpiar</li>\
		</ul>\
	</p>"
	$(".shell").append(ayuda);
}

function info() {
	$(".shell").append("<p>info</p>");
}

function aplicaciones() {
	$(".shell").append("<p>aplicaciones</p>");
}

function limpiar() {
	$(".shell").html("");	
}

function error(text) {
	var error = "<p>'" + text + "' no se reconoce como un comando.</p>"
	$(".shell").append(error);
}

function runCmd(e) {
    if (e.keyCode == 13) {
		var text = $("#active_cmd").val();
		
		if (text == "ayuda") {
			ayuda();
		} else if (text == "info") {
			info();
		} else if (text == "aplicaciones") {
			aplicaciones();
		} else if (text == "limpiar") {
			limpiar();
		} else if (text == "") {
		} else {
			error(text);
		}			
				
		createPrompt();
    }
}

Por último, quería pedir disculpas a aquellos que la tienen clara con desarrollo web y que probablemente tengan que ver unos cuantos errores imperdonables jeje. Bueno, algún día (espero) voy a mejorar

Espero que le sirva a alguno como base para hacer algo copado.

Saludos!
WhiZ

P.D.: Algo importante. Tiene XSS pero ni ganas de hacer el filtro. Si alguno tiene ganas, adelante jeje.

fermino · Agosto 29, 2014, 09:33:54 PM

Buenísimo! Hace un tiempo quería hacer una especie de emulador de consola con PHP, si algún día lo retomo de seguro me sirve xD

Y3K · Noviembre 09, 2014, 12:44:31 PM

Está bastante bien

Aunque me causa curiosidad con qué lo habrías hecho si fuera web y *no* fuera con JavaScript

Alex · Noviembre 09, 2014, 01:19:41 PM

WhiZ sabes que te aprecio, pero no pienso mentirte, como lo puedo decir...

Esto es más bien un decorado, no tiene mucha utilidad y realmente es solo una emulación.

No obstante se ve muy lindo no lo niego xD

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Está bastante bien

Aunque me causa curiosidad con qué lo habrías hecho si fuera web y *no* fuera con JavaScript

easy, Websockets + PHPSockets + un poco de diseño web + un pequeña estructura de ayuda = Shell que se conecta a un código en php y ejecuta tanto funciones del intérprete como funciones del sistema en el que ejecuta si se quiere.

saludos!

WhiZ · Noviembre 09, 2014, 03:31:40 PM

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
WhiZ sabes que te aprecio, pero no pienso mentirte, como lo puedo decir...

Esto es más bien un decorado, no tiene mucha utilidad y realmente es solo una emulación.

No obstante se ve muy lindo no lo niego xD

Jeje si. Totalmente cierto. Para darle funcionalidad tendría que hacerlo con php, python, ruby o cualquier lenguaje pero lo hice en javascript porq le estoy "enseñando" desarrollo web a mi cuñada (que es diseñadora gráfica y quiere meterse en esto). Ella ya sabe bastante de html y css, asíq quería introducirla en algún lenguaje que le permita dar dinamismo a la página. Al principio no sabía si js o php/django pero finalmente, por ser más sencillo, me decliné por js.

De todas formas, al terminar con la consola me dijo que no había entendido nada jaja. Asíq voy a tener que recurrir a otros métodos xD

Saludos chicos y gracias por las observaciones!
WhiZ

Y3K · Noviembre 09, 2014, 04:12:43 PM

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
WhiZ sabes que te aprecio, pero no pienso mentirte, como lo puedo decir...

Esto es más bien un decorado, no tiene mucha utilidad y realmente es solo una emulación.

No obstante se ve muy lindo no lo niego xD

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Está bastante bien

Aunque me causa curiosidad con qué lo habrías hecho si fuera web y *no* fuera con JavaScript

easy, Websockets + PHPSockets + un poco de diseño web + un pequeña estructura de ayuda = Shell que se conecta a un código en php y ejecuta tanto funciones del intérprete como funciones del sistema en el que ejecuta si se quiere.

saludos!

Claro, claro... En el backend. ¿Pero para el front-end? Tenía que ser JavaScript sí o sí

Alex · Noviembre 13, 2014, 11:08:07 PM

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
WhiZ sabes que te aprecio, pero no pienso mentirte, como lo puedo decir...

Esto es más bien un decorado, no tiene mucha utilidad y realmente es solo una emulación.

No obstante se ve muy lindo no lo niego xD

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Está bastante bien

Aunque me causa curiosidad con qué lo habrías hecho si fuera web y *no* fuera con JavaScript

easy, Websockets + PHPSockets + un poco de diseño web + un pequeña estructura de ayuda = Shell que se conecta a un código en php y ejecuta tanto funciones del intérprete como funciones del sistema en el que ejecuta si se quiere.

saludos!

Claro, claro... En el backend. ¿Pero para el front-end? Tenía que ser JavaScript sí o sí

ehm, no, en realidad, creo que estás confundiendo lo que dije, en ningún momento dije que no lo haga con javascript, de hecho websockets funcionan con javascript, cualquier alternativa llevaría a utilizar algo como javascript o javascript.

CitarJeje si. Totalmente cierto. Para darle funcionalidad tendría que hacerlo con php, python, ruby o cualquier lenguaje pero lo hice en javascript porq le estoy "enseñando" desarrollo web a mi cuñada (que es diseñadora gráfica y quiere meterse en esto). Ella ya sabe bastante de html y css, asíq quería introducirla en algún lenguaje que le permita dar dinamismo a la página. Al principio no sabía si js o php/django pero finalmente, por ser más sencillo, me decliné por js.

De todas formas, al terminar con la consola me dijo que no había entendido nada jaja. Asíq voy a tener que recurrir a otros métodos xD

Saludos chicos y gracias por las observaciones!
WhiZ

me parece muy bien, cuando había entrado al post pensé que era una shell en javascript+php para gestionar el server, pero como una consola del cliente está perfecto.

También podrías seguir agregando cosas directamente con javascript para transformarla en una shell para el cliente.

Lo que quiero decir es que ésta más bien está ligada a los comandos que establezcas en el código de la misma.

Saludos!

Consola Interactiva (básica)

WhiZ

Agosto 29, 2014, 05:57:42 PM

fermino

Agosto 29, 2014, 09:33:54 PM #1

Y3K

Noviembre 09, 2014, 12:44:31 PM #2

Alex

Noviembre 09, 2014, 01:19:41 PM #3

WhiZ

Noviembre 09, 2014, 03:31:40 PM #4 Ultima modificación: Noviembre 09, 2014, 03:41:34 PM por WhiZ

Y3K

Noviembre 09, 2014, 04:12:43 PM #5

Alex

Noviembre 13, 2014, 11:08:07 PM #6