1. Nociones básicas de las etiquetas principales de HTML
Para incrustar un script como éste en el blog hay que incluirlo con la etiqueta iframe de HTML, como ya vimos en los artículos dedicados a otros elementos interactivos, principalmente en Ejercicios con HotPotatoes en Blogger, en cuya sección 5 explico detalladamente este procedimiento. Pero en el caso de JavaScript, también es necesario tener una nociones básicas de HTML para poder pegar el código del script en el lugar adecuado del documento.El documento HTML básico se divide en dos partes principals: la cabecera (head) y el cuerpo (body), que van incluidos dentro del documento (html). La cabecera incluye etiquetas y códigos que no se ven en el documento, pero que tienen muchas funciones; por ejemplo, la etiqueta del título (title), que incluye el título interno del documento que se ve en la barra superior de título del navegador. En el cuerpo se incorpora todo lo que aparece en la página web que vemos con el navegador. Estas etiquetas se componen de una de apertura y otra de cierre; por ejemplo: <head> y </head>. Entonces aquí tenemos, ordenadas, las etiquetas básicas de HTML, que pueden escribirse en mayúsculas o en minúsculas indistintamente:
<html>Cuando queramos insertar un código de JavaScript, tendremos que hacerlo dentro de la cabecera o del cuerpo del documento, según nos indiquen en cada uno de ellos, siempre entre la etiqueta de apertura y la de cierre. El código de JavaScript puede estar en un archivo aparte (con extensión .js) o dentro del documento HTML; en el primer caso hay que llamarlo desde la cabecera del documento. Y en ambos casos van incluidos dentro de la etiqueta <script>, que a su vez incluye un atributo identificativo (language), como se ve en el esquema anterior.
<head>
<title>Calculadora avanzada </title>
<script language="javascript">
Código del script
</script>
</head>
<body>
<p>Esta calculadora avanzada es muy útil:</p>
<script language="javascript">
Código del script
</script>
</body>
</html>
2. El script de la calculadora
Cuando vamos a una web a conseguir un script gratuito, nos presentan el código metido en un marco para que lo copiemos. Vamos a ir a The JavaScript Source, de donde he tomado el script de la calculadora. La página principal tiene un menú de scripts en la cabecera, y yo he elegido Math Related, es decir, los scripts que tienen que ver con matemáticas. Entre ellos, la calculadora se encuentra en el enlace Advanced Calculator. En este caso, resulta muy sencilla la operación, porque en la parte superior del código nos dicen "Paste the coding into the BODY of your HTML document", es decir, "Pegue el código en la parte de BODY del documento HTML". Entonces, pulsamos el botón "Highlight All", y todo el código se guarda en la memoria para que lo peguemos en la parte del cuerpo de nuestro documento.Ya está hecho, pero ahora hay que guardar el documento con un título y la extensión de HTML; por ejemplo: calculadora.html. A continuación lo guardamos en un servidor web al que tengamos acceso y lo incrustamos en nuestro blog mediante la etiqueta iframe, como hicimos en la sección 5 del artículo antes mencionado de este blog:
<div align="center"><iframe src="http://ruta_mi_servidor/calculadora.html" frameborder="0" width="500" height="500" scrolling="auto"></iframe></div>El texto en rojo es la ruta del archivo HTML donde va la calculadora. Y los atributos width y height son la anchura y la altura del marco respectivamente. Para más información sobre estos atributos véase el artículo antes mencionado.
3. Un juego de JavaScript
Con JavaScript se pueden crear juegos muy sofisticados, aunque no tanto como los que se construyen con su hermano mayor el lenguaje Java, que veremos en otro artículo. Podemos ir a la sección de juegos (Games) de la página The JavaScript Source y elegir el que más nos guste. Esta vez voy a elegir uno más complicado de insertar en el documento HTML y así aprendemos de golpe casi todas las posibilidades que existen para incluir un Javascript en nuestro blog.Éste es el juego de las cuatro en raya para dos jugadores, que he tomado de Connect 4. Los textos que se ven los he traducido buscándolos en el código, pero no siempre es fácil encontrarlos. Se empieza pulsando el botón Nueva partida, y entonces surgen tres cuadros de diálogo que nos preguntan por los nombres de los dos jugadores y quién empieza primero. También lo podemos ver en una ventana pulsando el siguiente botón, que es como se nos ofrece, pero yo también lo he querido incrustar directamente en el blog:
En el código nos indican que hay que dar seis pasos:
1. STEP ONE: Paste this code into your opener page: Paso 1: copia este código en el documento principal. Este código es el del botón que abre una nueva ventana con el juego. Si no queremos poner el botón, entonces este código sobra. Lo único que hay que cambiar es la ruta del enlace, y entonces hay que sustituir el ejemplo "connect-4.html" por la ruta completa de donde se encuentra el documento que incluye el juego. En este caso, no hay que utilizar la etiqueta iframe, porque no incrustamos el script, sino que lo abrimos en otra ventana.
2. STEP TWO: Create a new document, save it as connect-4.html. Paso dos: crea un nuevo documento y guárdalo como connect-4.html. En realidad podríamos ponerle otro nombre.
3. STEP THREE: Put this in the HEAD of the connect-4.html page. Paso tres: pega este código en la cabecera (HEAD) del documento. Éste es el código principal del script, que esta vez va en la cabecera y no en el cuerpo del documento como el script de la calculadora.
4. STEP FOUR: Put this onLoad event handler into the BODY tag. Paso cuatro: pega este evento onLoad en la etiqueta de BODY. Se trata de código que sirve para volver a jugar cuando se carga la página (onLoad).
5. STEP FIVE: Copy this code into the BODY of connect-4.html. Paso cinco: pega este código en el cuerpo (BODY) del documento. Es principalmente el código HTML de la tabla que incluye los cuadros del juego y las imágenes de las fichas.
6. STEP SIX: Be sure to upload all the game images to your site. Paso seis: carga todas las imágenes del juego en tu servidor. Y nos dan la ruta de donde se encuentran las imágenes del juego en un archivo comprimido. Hay que descomprimir el archivo y transferir las imágenes al servidor, colocándolas en la misma carpeta que el archivo del documento HTML. Así las tengo yo guardadas en una carpeta que después transfiero a mi servidor:
Por último, sólo queda pegar en nuestro blog el código de la etiqueta iframe, como hicimos con el de la calculadora, y escribir la ruta del archivo HTML que hemos creado para el juego. Ya hemos dicho que si queremos colocar el botón para que el juego se abra en una nueva ventana, no hay que utilizar la iframe.Y ya está. Aunque son muchos pasos, la verdad es que no es complicado, pero a veces es habitual que cometamos errores en este tipo de procedimientos, así que concentraos mucho al realizarlo.
Una entrada muy provechosa. El problema con el que me estoy encontrando es que algunos wikis y sitios que ofrecen páginas gratuitas no permiten subir archivos que contengan java o flash, o al menos yo no he podido. Lo comentaba hace poco en De textos, pues no podía, por ejemplo albergar ejercicios de Ardora en un wiki o en Sites Google. Y los alojamientos web profesionales quedan lejos de los principiantes.
ResponderEliminarUn saludo.
Hola
ResponderEliminarSoy Rosa Meria estudiante de maestria de comunicación y tecnologia educativas, actualmente estoy en el modulo de investigación, voy a desarrollar el tema de investigación sobre la implementación del blog en la zona escolar donde trabajo
y tengo 4 preguntas que me permitiran ir delimitando el problema y la pregunta de investigación
¿cual es el efecto del uso del blog entre maestros de una misma zona?
¿como se puede planear un blog interesante?
el uso del blog favorece el trabajo colaborativo y las interacciones interpersonales?
¿como se puede motivar a los profesionales a que participen en el blog de la zona?
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarPara los amantes de los juegos online, una web repleta de videojuegos ordenados por categorías, muchos juegos en un solo lugar, quedan invitados.
ResponderEliminarhay una pagina que si y es www.fileden.com
ResponderEliminarvalla muy interesante profesor , tengo una inquietud he hecho un banner para mi blogs pues estoy actualizando siertas opciones para hacer mi blogs un poquito mas dinamico y quiero que las personas presten atenciona mi columna izquierda e conseguido un servidor que me permite subir los archivos swf gratis , pero en la creacion de los code de actionscript por ejemplo
ResponderEliminarcuando creo el boton
on (release){
getURl("www.loquesea.com/archivo.sw");
}
tengo el problema que el boton me envia a la pagina del servidor .
eso code son los del boton , los code html que usted puso arriba yo pongo la direccion el url del archivo y se ve pero no puedo hacer click en mi boton banners por que me envia al servidor , vea mi blogs please , el banners es el que dice escribenos tus testimonios bla bla bla , con una mano y un lapiz es la imagen.
una pregunta estoy haciendo una pequeña web con wiki pero al querer insertar codigo html no me lo reconoce en qdonde estara mi error?? gracias
ResponderEliminarHola ,soy docente y quisiera saber como puedo subir a mi wiki actividades como ardora,webquest,hot potatoes que se encuentran en mi PC
ResponderEliminarmuchas gracias por sus aportes
En la sección 5 del índice de contenidos de este blog, he enlazado varios artículos en los que hablo de cómo insertar varios tipos de actividades en el blog. Al principio resulta complicado, pero vale la pena intentarlo, porque estas actividades dan mucho juego en el blog.
ResponderEliminardisculpe me podria indicar como podria poner la opcion que indica que no se pueda copiar y pegar lo que hay escrito en el blog? es que no consegui pillar bien lo que usted explica
ResponderEliminarNo sé a qué te refieres.
Eliminar