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.
(http://sia1.subirimagenes.net/img/2014/08/29/140829104714870786.png)
Muy simple como ven...
Ahora los códigos.
shell.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
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
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ó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.
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
Está bastante bien :)
Aunque me causa curiosidad con qué lo habrías hecho si fuera web y *no* fuera con JavaScript :)
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 enlaces.
Registrate o Entra a tu 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!
No tienes permitido ver enlaces.
Registrate o Entra a tu 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
No tienes permitido ver enlaces.
Registrate o Entra a tu 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 enlaces.
Registrate o Entra a tu 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í :)
No tienes permitido ver enlaces.
Registrate o Entra a tu cuenta
No tienes permitido ver enlaces.
Registrate o Entra a tu 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 enlaces.
Registrate o Entra a tu 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!