Pruebo incrustar un proyecto dentro del blog

Scratch. Un coche que recorre un circuito

Este ejercicio es interesante ya que vamos a hacer que un coche recorra el solo un circuito. Aprenderemos a tomar decisiones en función de unos datos (sentencia condicional).

Dibujo del coche

Empezamos creando un objeto, que será un coche visto desde arriba al que le añadiremos dos puntos que actuarán a modo de sensores, con dichos puntos podremos decidir hacia que lado debe girar el coche o bien si puede avanzar en línea recta.
Dibujo del coche:

Es importante que los dos puntos añadidos sean de distinto color y que no hayamos usado dichos colores para dibujar el coche. Con el botón de la esquina superior derecha marcamos el centro de rotación.
Dibujaremos el coche mirando hacia la derecha.

Dibujo del circuito

A la izquierda de la lista de objetos selecciono el escenario y pinto un circuito de forma que la pista tenga un color uniforme. Procuraremos que las curvas no sean demasiado cerradas y que tenga una anchura suficiente para que pueda circular el coche. Resultado:

Programar el coche

Queremos que el coche avance recto si está dentro del asfalto y que al llegar a una curva gire. Hemos dibujado dos puntos con colores distintos para saber si tiene que girar hacia la izquierda o hacia la derecha.

Si el punto amarillo deja de tocar el asfalto debemos girar hacia la derecha	Si el punto verde deja de tocar el asfalto debemos girar hacia la izquierda

De la categoría control sacamos un bloque 'si-entonces-sino'.
De la categoría sensores sacamos un bloque '¿color-tocando?' y lo encajamos dentro del bloque 'si-entonces-sino'. Con el ratón pulsamos sobre el primer cuadradito y a continuación pulsamos sobre el punto del coche; pulsamos el segundo cuadradito y después pulsamos sobre el circuito.
Lo que hemos hecho hasta ahora significaría "si el color amarillo del coche toca el color gris (del asfalto) entonces....
Ahora podemos duplicar todo el bloque y cambiamos el color del primer cuadradito pulsando sobre el otro punto del coche, el verde.

En el sino metemos la orden de giro adecuada para cada caso.
Encajamos los bloques uno dentro de otro como se muestra en la siguiente imagen:
Vendría a significar: si el amarillo toca el asfalto compruebo si el verde toca el asfalto y si es que sí (ambos tocan el asfalto) avanzo en línea recta con la orden mover y si el verde no toca el asfalto giro a la izquierda.
Si el amarillo no toca el asfalto giro a la derecha.

Todo el conjunto de bloques anterior lo meto dentro de un bloque 'por siempre' para que lo repita todo el tiempo y lo engancho al evento 'al presionar bandera verde'. Para iniciar el programa pulsaré la bandera verde. En la siguiente imagen he añadido un cambio de tamaño del coche ya que era demasiado grande y órdemes mover en las curvas, para que además de girar avance un poquito.

Puede ocurrir que, a pesar de tener bien escritas las instrucciones el coche no se mueva bien, debemos comprobar que hemos seleccionado bien los colores, el tamaño del coche, los grados de giro en las curvas, los pasos que avanzamos....
Quizá tengamos que dibujar el circuito con curvas menos cerradas, ... cuestión de ir probando.
A veces resulta útil probar paso a paso. En la siguiente imagen vemos como he copiado las órdenes en el evento 'pulsar la tecla espacio' de forma que puedo ir pulsando sucesivamente la tecla espacio para ver si el coche se mueve como yo quiero.

Scratch. Geometría, gráficos de tortuga

Seymour Papert desarrolló el lenguaje de programación Logo. Logo incluía lo que se conoce como gráficos de tortuga. Con sencillas órdenes del tipo 'avanza', 'gira', 'bajar lápìz', ...  se podían hacer gráficos. Estas órdenes las ejecutaba un robot.

Seymour Papert con su "tortuga"

Ejercicio.

Usaremos:

• Eventos. Al pulsar la bandera y al pulsar una tecla.
• Movimiento. Mover y girar.
• Lápiz. Subir, bajar, tamaño, color, borrar.
• Control. Repetir un número determinado de veces.

Primero vamos a dibujar un cuadravo. Vamos a hacer que cuando pulsemos la bandera dibuje un lado del cuadrado, gire __ grados y repetimos el proceso 4 veces.
Después vamos a dibujar un triángulo equilátero.
Realizamos el código para dibujara las figuras de 3, 4, 5, 6, 7 y 8 lados. Vemos que es necesario usar la instrucción 'repetir' para evitar tener que escribir muchas veces las mismas instrucciones.
Dibujar también una estrella.
Cuando ya tengamos escrito todo el código, lo ejecutamos par que dibuje las figuras y hacemos una captura de pantalla en la que se vean las figuras dibujadas  y todo el código. Esta captura de pantalla es lo que se entregará subiéndolo a la plataforma educativa.

Scratch 01

Comenzamos a utilizar Scratch.

Tenemos que crear una cuenta para poder utilizarlo. Proporcionaremos una dirección de correo para verificar la cuenta. Se puede verificar más adelante, pero debemos hacerlo para poder compartir proyectos.

Aprendemos a crear objetos

Se pueden crear nuevos objetos de distintas formas:

• Dibujando: dos opciones, gráfico vectorial o mapa de bits.
• Subiendo una imagen.
• Eligiendo un objeto del catálogo que tiene Scratch.

En la siguiente imagen vemos un personaje dibujado usando la opción "convertir a vector". Creamos un gráfico vectorial, con lo que se verá bien independientemente del tamaño con que lo muestre. En la imagen se ven dos líneas que indican el centro de rotación del objeto, que se cambia pulsando el botón de la esquina superior derecha y después sobre el dibujo.

 

En la siguiente imagen  vemos tres tipos de objetos. El avión lo hemos sacado del catálotgo de Scratch. La cara naranja es un mapa de bits y la cara verde un gráfico vectorial:

Aprendemos también las primeras instrucciones, por ejemplo a mover un objeto, pero todavía no programamos.

Crear un índice usando las etiquetas

Blogger tiene una opción que permite crear páginas que no dependen de la fecha de creación. Supongamos que el blog pertenece a una asociación y tiene determinadas páginas fijas en las que se habla de dónde se encuentran, cómo hacerse socio, ... . Para añadir páginas fijas vamos a la sección 'Páginas' y pulsamos el botón 'página nueva':

Para mostrar un menú con las páginas creadas o bien con enlaces,  vamos a la sección 'Diseño' y añadimos un gadget. Podemos añadirlo donde queramos y en el futuro podemos arrastrarlo y soltarlo para cambiarlo de sitio.

 De la lista de gadgets seleccionamos el llamado 'Páginas':

Si tuviéramos páginas fijas, aparecerían en la lista y podría marcar las que quisiera que aparezcan en el menú. Nosotros vamos a pulsar en 'Añadir enlace externo':

 Tenemos que ver nuestro blog en otra ventana o pestaña y pulsamos sobre una etiqueta cuyos artículos queramos añadir al menú y luego copiamos la URL, que tiene el siguiente formato: nombre_blog/search/label/etiqueta:

Al pulsar sobre 'Añadir enlace externo' se abrió una ventana en la que escribiremos en texto que queramos que aparezca en el menú y en el segundo recuadro pegamos la URL que copiamos previamente:

Repetimos con todas las etiquetas que queramos y una vez finalizado pulsamos el botón 'Guardar':

Vamos a la ventana o pestaña donde tengamos abierto el blog y pulsamos el botón del navegador para recargar la página. Veremos el menú de distinta forma en función de dónde hayamos colocado en gadget.

Así se vería si se añade debajo de la cabecera del blog:

 

Así se vería si se añade en un lateral:

Crear una tabla

Para crear una tabla sencilla tenemos que usar como mínimo tres etiquetas:

• <table></table> para crear la tabla.
• <tr></tr> para crear una fila. Va anidada dentro de <table>. Una tabla puede tener muchas filas
• <td></td> para crear una celda, una casilla dentro de una fila. Una fila puede tener muchas celdas.

Si queremos, podemos usar <th> en vez de <td> para las celdas que pertenezcan a la cabecera.

ejemplo del código de una tabla de 3 filas con 4 celdas cada una

<table>
  <tr>
     <td>Primavera</td>
     <td>Verano</td>
     <td>Otoño</td>
     <td>Invierno</td>
  </tr>
  <tr>
     <td>Spring</td>
     <td>Summer</td>
     <td>Autumn</td>
     <td>Winter</td>
  </tr>
  <tr>
     <td>Frühling</td>
     <td>Sommer</td>
     <td>Herbst</td>
     <td>Winter</td>
  </tr>
<table>

Aquí podemos ver el resultado:

Primavera	Verano	Otoño	Invierno
Spring	Summer	Autumn	Winter
Frühling	Sommer	Herbst	Winter

Podemos observar que no "dibuja" la tabla, para mejorar su aspecto debemos usar CSS.
Aquí tenemos la misma tabla con un poco de CSS para mejorar su aspecto:

Primavera	Verano	Otoño	Invierno
Spring	Summer	Autumn	Winter
Frühling	Sommer	Herbst	Winter

Estrucura de un documento HTML

Los sitios que nos facilitan la creación, pero también nos ocultan la estructura básica de una página.

A continuación tenéis un modelo sencillo en el que se puede ver que consta de dos partes:

• cabecera (head)
• cuerpo (body)

La cabecera contiene elementos no visibles. En el ejemplo vemos que tiene indicaciones como la codificación de caracteres, el título, y otras más que no aparecen en el ejemplo.
Blogger no nos permite acceder a la cabecera de una página.
El cuerpo (body) contiene todos los elementos visibles de la página y los muestra dentro de la ventana del navegador.



Esta es la estructura básica de una página web:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
</head>

<body>

   <!-- esto es un comentario
        que no se verá en la página --> 
        <h1>Esto es un encabezado</h1>
        <p>La increíble y triste historia de la cándida 
        Eréndira y de su abuela desalmada</p>
</body>
</html>

---