No puedo saber ¿cuántos ficheros temporales he creado? durante mi aprendizaje para construir mis páginas web. Creo que a todos hemos creado un directorio/carpeta con nombre "temporal" o "pruebas" y hemos empezado por "prueba.html", luego de algunos retoques hemos visto que nos convencía, y no lo borramos no recuerdo porqué ¡Qué bonito recuerdo!...
...Entonces necesitamos hacer otra prueba y volvimos a nuestra carpeta y creamos "prueba2.html" ¡curiosamente nunca existió "prueba1.html"!
¡Si, si! "prueba.html" no podía ser otro... las etiquetas html y body... y dentro de esta última las palabras mágicas.
Daba comienzo nuestra carrera de "Webmaster". Y como no podía ser de otra manera "prueba2.html" era un script con nuestro primer botón "pínchame" o "clikéame" y pinchando aparecía la alerta con esas mismas palabras mágicas...
... Luego "prueba3.html" (tal vez haya sido htm, por aquello de las extensiones de tres letras)... y así iba creciendo esa carpeta con ese mismo nombre y su numeración... por supuesto sin el "1". Cuando notamos que ya nos perdíamos con los números se nos ocurrió otra brillante idea: "index.html", la página índice para nuestras pruebas ¡Qué divertido fue aquello! tratando de catalogar todas esas páginas sin saber qué hacian en concreto... salvo aquellas que les pusimos un cariño especial como aquel ¡Hola mundo!
También encontramos aquellos otros ficheros con la coletilla "bis"... y "bisbis" y también "bis2", "bis3"... "prueba37.html" se trataba del efecto "rollover", pero como no lo hacía muy bien decidimos precargar las imágenes, cosa que ya lo habíamos hecho en el "prueba26.html" así que ya siendo todo un experimentado webmaster, hicimos "copy & paste" (bueno tardamos un poco porque no recordábamos exactamente cuál era la página... aunque estábamos seguros que era una mayor de 20) y "yastá"...
¿Y ese error...?
¿Qué habremos hecho mal...?
Creo que con esta presentación nos encontraremos identificados más de uno (¡al menos yo sí!). Ahora en vez de palabras mágicas voy a presentar "la varita mágica".
Como haríamos para probar nuestro código sin nuestra carpeta de pruebas. Pues para ese cometido solo hace falta un probador, ¡obvio! pero ¿qué es eso?...
Pues lo hemos tenido delante de nuestras narices desde prácticamente todo nuestro aprendizaje. ¿Cuál fue la página con un pequeño formulario con un botón y un campo de texto que mostraba "hola" seguido de lo que se insertaba en el campo?... ¡fue "prueba5... 6, 7...!
No importa cual haya sido, porque no fue precisamente esa página la que nos vale, aunque no fueron muchas más las que necesitamos... solo hacía falta esas cosas y un popup para escribir ese campo...¡Si, unas pocas páginas más!
Así es, un campo de texto, pero mejor será un textarea porque tenemos que escribir más lineas, y posiblemente sea necesario unas barras de scroll. Un botón con las palabras mágicas que más nos guste y ese script para escribir en un popup.
Bien, ya podemos empezar. Como siempre que hacemos una página nueva, ponemos nuestro esqueleto html (hemos sido listos, y aprovechamos que no teníamos "prueba1" para hacer nuestro esqueleto con las etiquetas "html", "head", "script" y "body"... tal vez pusimos también el doctype y algunos metas... tal vez también pusimos algunos comentarios... ¡Qué se yo!
<html>
<head>
<script>
function probar(texto) {
ventana = window.open('', 'popup', '');
ventana.document.write(texto);
}
</script>
</head>
<body>
<form action="" name="probador">
Introduzca el texto de la página web:
<hr>
<textarea name="texto" cols=80 rows=10 >
</textarea>
<br>
<input type="button" onclick="probar(texto.value)" value="¡Abracadabra!" >
</form>
</body>
</html>
Y ahora nos toca probarlo. Como siempre, hemos tenido que hacer algunas correcciones... siempre nos olvidamos de cerrar alguna etiqueta, aunque nos hemos acostumbrado escribir esa etiqueta de cierre en el momento de escribir la de apertura... o en vez de button pusimos boton...
Seguro que se pueden hacer muchas mejoras tanto en el script como en el formulario de entrada de datos; algunas las he obviado a propósito, ya que no es mi intención mostrar la mejor forma de hacer esto, sino mostrar que es posible hacerlo, y las mejoras las voy a proponer como un ejercicio.
Qué tal si en vez de usar una ventana popup usamos un "iframe". Y si en vez de encontrar la zona de texto en blanco (no es este caso) ponemos nuestro "esqueleto html" con las etiquetas básicas (html, head, body...) y una cabecera más atractiva con una etiqueta h1 y sus estilos (centrado, color, etc.)
Además, nuestro probador está "un poco soso"... podemos centrar el area de texto, poner unos colores más llamativos (a nuestro gusto, ¡por supuesto!). Nuestra cabecera y también nuestras propias palabras mágicas.
Este probador (algo mejorado) lo he usado en muchas ocasiones en esta página: Probador de scripts, también lo he recomendado en varias ocasiones en los Foros del web
Por último, para los que usan el lenguaje php he planteado un Probador de código php que se puede usar preferentemente de manera local (en nuestra casita)