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>

---

CSS. Primeras pruebas

¿Qué es CSS3?

Es un lenguaje con el cual le indicamos el estilo con el que se deben mostrar los distintos elementos HTML. CSS significa Cascadind style sheets (hojas de estilo en cascada).

¿Dónde se usa?

El CSS se puede usar de 3 modos distintos:

• En un archivo separado con extensión .css. Esta opción no es viable directamente con blogger. Lo que sí se puede, es añadir nuestras órdenes css a la plantilla que usemos, pero eso lo veremos más adelante.
• En la cabecera (<head></head>) de un documento HTML añadimos la etiqueta <style></style> y dentro de ella escribimos las órdenes. Esta opción no la podemos usar en blogger ya que no tenemos acceso a la cabecera del documento.
• Directamente dentro de la etiqueta usando el atributo style="" e insertando dentro de las comillas las órdenes separadas por punto y coma (;).

Formato

Si el CSS se usa en un archivo o en la cabecera de un documento, el formato es el siguiente:
selector {propiedad:valor; propiedad2:valor2;...}

Si lo usamos directamente dentro de  una etiqueta usando el atributo style;
style="propiedad:valor; propiedad2:valor2;..."

Primeras propiedades

propiedad	función
color	para cambiar el color del texto
background-color	para cambiar el color de fondo
border	para cambiar el borde
width	para indicar el ancho
height	para indicar el alto

Ejemplo: cambiamos color de texto, color de fondo y borde

ejemplo de uso de css

<h3 style="color:red; background-color:lightblue; border:2px solid green;">ejemplo de uso de css
</h3>

colores

Los colores se pueden indicar mediante su código en hexadecimal pero también se pueden usar muchos colores predefinidos mediante su nombre.
Buscando encontrarás muchos sitios web que te permiten seleccionar colores y averiguar su código y que también proporcionan sus nombres. Aquí tienes dos sitios adecuados para ello:

• http://htmlcolorcodes.com/es/
• https://www.w3schools.com/colors/colors_names.asp

Unidades de medida

Existen muchas unidades de medida distintas (em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax).
Nosotros usaremos px (pixels).

Bloques

En HTML hay elementos que se comportan como un bloque. Pueden ocupar todo el ancho disponible y empiezan y terminan con un salto de línea.
Ejemplos son los encabezamientos, los párrafos, etc.

Otros elementos no se comportan como bloques, por ejemplo etiquetas como <b>, <i>, <u>, imágenes, enlaces, ...

La etiqueta <div></div> me permite definir un bloque y dentro de el meter lo que quiera.
La etiqueta <span></span> me permite meter dentro elementos, pero no se comporta como bloque, se usa dentro de una línea.

Nosotros lo usaremos para aplicar después estilos.

En la siguiente entrada veremos ya ejemplos de CSS.

Atributos que usaremos

class="nombre". Con class puedo decir que un elemento es de una clase determinada. Pueden existir distintos elementos de la misma clase.

id="identificador". Con id puedo dar un nombre único a un elemento.

style="....". Permite aplicar estilo directamente con instrucciones CSS.

Ejemplos

Los atributos class e id los veremos dentro de poco cuando nos hagan falta.

Enlaces

La etiqueta que se utiliza para hacer un enlace es <a></a>
Se utilizan como mínimo el atributo src para indicar la URL del recurso enlazado.
Atributos utilizados:

• src, para indicar la URL del recurso enlazado.
• target, para indicar si queremos que se abra en la misma ventana o en otra.

Se pueden hacer enlaces dentro de la misma página, pero no lo vamos a ver. Como ejemplo podéis ver cualquier artículo de la Wikipedia, suelen tener un índice de contenidos al comienzo del artículo.

Ejemplo: enlace a mis fotos en Flickr:

con href indicamos la URL y target="_blank" indica que al pulsar el enlace se debe abrir en una ventana o pestaña nueva.
<a href="https://www.flickr.com/photos/teclasorg/" target="_blank">mis fotos en Flickr</a>

Enlace: mis fotos en Flickr

Un ejemplo más complicado

Una opción avanzada es el uso de Iframes.
Un iframe es un marco dentro de una página, un "espacio" en el que queremos que se abran algunos de nuestros enlaces
Las siguientes imágenes tienen un enlace a una foto igual pero del mismo tamaño y le decimos que se abran en el iframe.

código de los enlaces:

<a href="foto.jpg" target="galeria"><img src="foto_mini.jpg" /></a>

código del iframe

<iframe height="450" name="galeria" width="100%">

Insertar imágenes

Para insertar imágenes se utiliza la etiqueta <img> y como mínimo se añade el atributo src para indicar la URL de la imagen a mostrar.
Usaremos los siguientes atributos:

• src, para indicar la URL de la imagen a mostrar.
• title, para que aparezca un texto cuando pasemos el ratón por encima.
• style, para aplicar estilo, ya veremos.
• alt, para que muestre un texto alternativo en caso de que no cargue la imagen o en caso de que tarde demasiado en cargar.
• width y height, para indicar ancho y alto, aunque lo mejor es usar CSS.

La siguente imagen la he insertado con el icono del editor de Blogger:

ejemplo buganvilla:

<img height="200" src="https://c2.staticflickr.com/4/3096/3180314937_947439c62b_b.jpg" title="Foto de DSE en Flickr" width="auto" />

ejemplo Mercedes:

<img height="200" src="https://c1.staticflickr.com/5/4009/4657307751_d94d49b145_b.jpg" style="border: 1px dotted green; padding: 2px; margin:10px;" title="Mercedes" width="auto" />

Repaso e introducción a CSS

Repasamos etiquetas que ya conocemos

h1..h6
hr
ol, ul, li

Nuevas etiquetas

<p> párrafo. Mira el código HTML de esta línea

Esto es un párrafo que he escrito con el editor HTML ya  que en el editor de Blogger no existe opción para usarla. Lo he escrito en HTML y luego he mostrado el editor. Al volver al modo HTML veo que Blogger quita las etiquetas de los párrafos. Es por ello que para aplicar estilo al texto usa la etiqueta <span>

Primeras prubas con CSS

Para usar CSS en principio usaremos el atributo style.
Mira el código del siguiente ejemplo

---

Haz tu lo mismo.

pon un borde de color rojo a este título 

---

Resumen de lo visto hoy

• repasamos las etiquetas que ya conocemos.
• etiqueta <p>.
• vemos como se codifica <p> (&lt;p&gt;).
• cambiamos el color a un texto y vemos lo genera.
• uso style para cambiar el color del separador.
• uso style para cambiar el borde de un título.

Ejemplo HTML

02/02/2017 mando ejercicio una lista dentro de otra lista:

Les pido que busquen en internet la etiqueta html para una línea horizontal

---

31/1/2017 Comento opciones para formatear y decorar el texto y les hablo de HTML y CSS, sin entrar en materia. Muestro botones 'Redactar' y 'HTML'.

Les muestro el código y como ejemplo  inserto la etiqueta hr con estilo, color rojo.

---

Les hago una pequeña lista usando el icono del editor y después cambio la etiqueta ul por ol para que vean el cambio.

• Primavera
• Verano
• Otoño
• Invierno

Durante esta clase lo que se pretende es mostrar la utilidad de aprender algo de HTML y CSS ya que el editor de Blogger o de otras herramientas de publicación 'en-línea' son limitados.

Estadísticas

Vemos el apartado de 'Estadísticas' y vemos también cómo hacer para que no cuente nuestras propias entradas, aunque tenemos sospechas que no es muy eficaz.

Algunos alumnos se interesan por añadir un contador externo: flag counter.