Editando apunte: Probador web

ID: 31 (tabla: apuntes)

Título:
Fecha: [poner fecha actual ]
Categorías: Caricatos, Vicisitudes de un Webmaster, Programación
Etiquetas: enlaces, javascript, links, php, webmaster
Extras: enlaces, javascript, links, php, webmaster
apunte: - - - - - - - -
<p> [rss]Poco a poco estamos recuperando las viejas páginas de "pepemolina.com" para adjuntarlas a la sección "Otras páginas del dominio" en la zona derecha de este diario. El caso más reciente es el "<a href="probador/index.php?PHPSESSID=5v54hc30jujm1s0udb3ju5hpm6">Probador de script</a>".[/rss] </p> <p> Se trata de una página del todo funcional aunque muy, muy sencilla; y ya que nos hemos empeñado en su rescate, aprovecharemos la ocasión para intentar mejorarla. </p> <h3 class="subtitulo"> Empecemos por el principio </h3> <p> Algo obvio por su título es su función: se trata de escribir algunas líneas de código, y no tener que crear un documento html para ver su resultado. Es algo tan sencillo que tan solo consta de un control para escribir el código, junto a un botón para probarlo y una ventana para verlo. </p> <p> Como hemos comentado, intentaremos mejorarlo, y comenzaremos evitando la dependencia de javascript. Mirando el archivo original, el botón "mostrar resultados" tiene asociado el siguiente código: </p> <pre class="codigo">function mostrar() { window.frames.ventana.document.clear(); window.frames.ventana.document.open(); window.frames.ventana.document.writeln(document.forms.losMensajes.mensajero.value); window.frames.ventana.document.close(); }</pre> <p> Para evitar esa dependencia necesitaremos que el botón mencionado sea del tipo "submit", que el destino del formulario sea la ventana que hemos creado; y un fichero (página web) que recoja y ejecute ese código. El resultado puede verse a continuación: </p> <form action="diario.jocker.php?extra=probador" target="ventana" method="post"><input type="hidden" name="PHPSESSID" value="5v54hc30jujm1s0udb3ju5hpm6" /> <fieldset> <legend style="text-align: center; padding: 1em"> Probador Web </legend> <label for="form_body">body:</label> <textarea name="body" id="form_body" style="width: 100%; height: 100px" cols="100" rows="100">¡Hola mundo! estilos (css): body { background-color: #eeeeee; color: red; text-align: center; } javascript: //window.onload = function() {alert("¡Hola mundo!");} mostrar resultados

Ya hablaremos sobre el destino del formulario cuando tratemos sobre el "comodín" de este sistema. Ahora volveremos a usarlo para mostrar su propio código: mostrarme.

Y para terminar...

hemos visto como podemos teclear código y verlo sin necesidad de crear documentos; y puede ser de tres tipos (css, javascrit y html), pero si pretendemos probar código del lenguaje del servidor, también hemos dado las pautas mostrando el código de la página que procesa los datos; solo falta ver el contenido extra "probador":

$body = $_POST["body"];
$css = $_POST["css"];
$js = $_POST["js"];

La razón para desarrollar el probador ha sido justamente evitar generar ficheros html que acumulaba en una carpeta "pruebas" con muchos de ellos; y en próximos apuntes rescataremos los que sean más interesantes. Espero que lo disfruten.

Controles

Otras tablas: imagenes, postales, categorias, etiquetas, extras - Ver apunte - (popup ) - Seleccionar nuevo apunte