Arduino: Encender y apagar un led con un pulsador

Gracias a este video pude realizar las conexiones y el programa necesarios para que un led se encienda al pulsar una vez, y se apague al volver a pulsar. Se puede ver el video de lo que hice, haciendo clic en esta foto:

Crear una app para el celular que mueva un objeto en la pantalla

Estoy experimentando programar aplicaciones para el celular que aprovechen los sensores que llevamos todos los días en el bolsillo de la dama o en la cartera del caballero (o al revés).

Para ello, utilizo MIT APP Inventor, una herramienta para crear aplicaciones para Android. Necesitamos instalar en el celular la aplicación MIT AI2 Companion

Nuestros celulares tienen un sensor que permite conocer el grado de inclinación y de rotación horizontal, utilizando estos tres ejes:

Ejes de movimiento del celular

(Fuente de la imagen: www.mathworks.com)

En este primer experimento, mi programa simplemente mueve un circulito a través de la pantalla, según cómo inclinemos el celular en sus ejes X e Y.

¿Cómo se empieza?

El primer paso será comenzar un proyecto nuevo en Mit App Inventor. Una vez creado el proyecto, tendremos una pantalla en blanco, a la cual debemos arrastrar los objetos que vamos a utilizar en el proyecto:

Pantalla diseño

Vamos a empezar por poner dos etiquetas (Label) y renombrarlas como “inclinación X” e “inclinación Y”.

Para poder programar utilizando un sensor, debemos arrastrar el sensor hacia la pantalla. Éste no va a verse en la pantalla, por lo tanto se ubicará debajo, como un componente oculto:

Sensor

Ahora vamos a empezar a programar, haciendo clic en Blocks:

Ir a blocks

Para comenzar vamos a hacer clic en “Orientation sensor 1”, y allí vamos a elegir el bloque que nos permite programar algo “cuando el sensor de orientación cambie”:

programar cuando cambie el valor del sensor

Después, haciendo clic en cada etiqueta (“orientación X” y “orientación Y”), buscamos la asignación de un texto a la etiqueta:

set inclinación_X.text to
set inclinación_Y.text to

Ahora tenemos que decirle que escriba esas etiquetas con el valor de las variables Roll y Pitch (ver gráfico de los ejes de inclinación). Roll nos devolverá la inclinación en el eje X; Pitch nos devolverá la inclinación del eje Y.

Haciendo clic en el sensor de orientación buscamos los bloques que devuelven esos valores:

Probar el programa

Para probar el app que escribirá en las etiquetas el valor de inclinación X e Y, tenemos que usar en el menú Connect, la opción AICompanion. Nos mostrará un código numérico y un QR Code.

Ejecutamos el programa MIT AI 2 Companion en el celular, y escribimos el código o leemos el código QR.

Una vez que el programa leyó el código, se ejecutará el programa, que simplemente escribirá dos números en la pantalla, que cambiarán cuando uno mueve el celular.

Agregar la parte gráfica

Para completar el programa vamos a arrastrar, en el modo “Designer”, una base para poner una imagen (“canvas”) y luego un círculo:

Elementos gráficos En las propiedades del Canvas, ponemos en altura (height) y anchura (width), que se complete el tamaño del objeto que lo contiene, para que ocupen todo el ancho y el alto posible en la pantalla.

Volvemos al modo de programación (Blocks), para crear el comportamiento del círculo.

¿Qué debe hacer el círculo?

Cuando cambie el valor del sensor de orientación, debe cambiar la posición del círculo. ¿Pero cómo tiene que cambiar?

A la posición anterior del círculo le vamos a restar el valor del sensor de inclinación. Para eso, en el conjunto de bloques llamados Math, vamos a ubicar el siguiente elemento:

Ahora vamos a buscar, dentro de Ball1, los bloques que determinan su posición X e Y, los pondremos dentro de la estructura anterior (when orientationSensor1.OrientationChanged), y les agregaremos el marco para restar dos valores que sacamos de Math:

Asignar valor X e Y Ahora le vamos a asignar el valor al eje X y al eje Y de nuestro círculo: su valor X actual, su valor Y actual, menos lo que varía la inclinación del celular.

Programa completo

Primeros pasos con Arduino Uno

Otra vez me compré un kit de arduino, pero esta vez es diferente, ya que tiene una Protoboard (la vez anterior compré un kit que tenía las conexiones más resueltas).

kit Arduino Uno para principiantes

Primer programa: encender y apagar el led en el pin 13

Para comenzar, descargué el software para linux, desde la página de Arduino. Descomprimí, ejecuté el archivo con extensión .sh (install.sh)

Me costó un poquito que funcionara porque no me dejaba elegir el puerto serial. Reinicié y funcionó.

Después, utilizando un tutorial en Youtube, logré ejecutar el programa de ejemplo con el que se hace titilar un led en el pin 13.

Led en el pin 13

¿Por qué este es el más simple de usar? El Arduino tiene un led interno conectado al pin 13, con lo cual si no conectamos nada, veremos parpadear una luz en la placa. Y si queremos ver parpadear un led externo, podemos conectarlo al pin 13 (el ánodo, la pata larga del led) y el cátodo al que tiene al lado llamado GND (“ground”, tierra). Esto sólo puede hacerse con el pin 13, porque el Arduino tiene una resistencia interna con este fin (ver tutorial)

Segunda experiencia: encender y apagar un led en otro pin (se agrega la resistencia)

Led y resistencia en la protoboard

Como segunda experiencia me resultó muy útil, para comprender qué son todos esos agujeritos de la protoboard y para empezar a utilizar una resistencia, este video donde una chica (¡Séeeee!) explica cómo hacer titilar un led conectado a la protoboard.

Comparando mapas con Gimp

Hace unos días mi hijo y yo conversábamos sobre cómo se forman las islas en el Delta del Paraná y él me explicó a mí cuánto crecieron en los últimos años algunas de ellas.
Entonces se me ocurrió ver el mapa de 1940, utilizando los mapas temáticos del sitio de mapa.buenosaires.gob.ar

Después miramos el actual, pero no quedaba clara la comparación:

Mapa actual

Entonces capturamos ambas pantallas, y las pegamos en Gimp, poniendo una sobre la otra, en distintas capas. Para ello:

Utilizar la tecla Imprimir pantalla para capturar la imagen del mapa actual
Abrir el archivo (si es Linux) o pegar (si es Windows)
Volver al mapa, visualizar la versión antigua, captura la pantalla con la tecla Imprimir pantalla (en Linux, elegir “copiar al portapapeles”).
En Gimp utilizar el menú Editar / pegar como / capa nueva.

Ahora tenemos una imagen sobre la otra, como si hubiésemos puesto una hoja de papel sobre la otra. Para notar las diferencias, tenemos que quitar la parte celeste, el agua. Para hacerlo:

Utilizar la varita mágica para seleccionar con un clic toda el área celeste.
Después, cuando ya tenemos seleccionado el río o el mar, lo borramos con la tecla suprimir. Entonces, en donde antes veíamos celeste ahora veremos la capa de abajo:

Mapas comparados

Si esto no ocurre (es decir, si al suprimir lo celeste se convierte en blanco) debemos agregar canal alfa a la capa superior: Capa / Transparencia / Añadir canal alfa.

Si al seleccionar notamos que en realidad se está seleccionando el agua de la capa de abajo, es porque tenemos seleccionada esa capa. Basta con hacer clic en la capa de arriba en el menú de capas, y luego volver a hacer clic en la zona celeste:

Seleccionar otra capa

Moodle: Agregar una barra lateral con Tweets

Podemos insertar un bloque lateral que contenga las publicaciones de un usuario en Twitter, o una etiqueta (hashtag), o los favoritos del usuario.
Para hacerlo, primero debemos crear un bloque lateral de HTML:

Activar edición / Nuevo bloque lateral / Bloque HTML / Configurar bloque HTML

Por otra parte, vamos a Twitter y generamos un Widget, haciendo clic en la foto de perfil, luego “Configuración” y allí, “Widgets”. Debemos crear un nuevo Widget, elegir qué queremos ver (“Cronología de usuario” para ver los Twitts publicados), y pulsar el botón “Crear Widget”:

Una vez creado, tenemos que copiar el código que insertaremos en Moodle:

Volvemos a Moodle, editamos el código HTML del bloque lateral. Se nos muestra una ventanita, allí pegamos el código que copiamos:

¡Listo!

Moodle: crear un cuestionario con preguntas al azar

Si queremos crear un cuestionario que presente diferentes preguntas para diferentes usuarios, elegidas al azar de un conjunto más grande, debemos seguir los siguientes pasos:

Crear las preguntas en el banco de preguntas (por ejemplo, crear 30 para que luego el cuestionario elija 10). La manera más sencilla es crearlas en un archivo de texto con formato GIFT.
Crear un cuestionario y en lugar de elegir qué preguntas incluir, elegir la opción: agregar una pregunta aleatoria, o directamente agregar XX preguntas aleatorias.

pregunta aleatoria

Cortar un video desde la terminal de Huayra

Muchas veces los docentes realizamos material didáctico que requiere la inserción de un fragmento de video.

Si el video que queremos recortar está en Youtube, lo más sencillo para descargarlo es agregarle “ss” antes de la palabra Youtube. Así, si queremos descargar este video: https://www.youtube.com/watch?v=blablabla

Para descargarlo le agregamos SS: https://www.ssyoutube.com/watch?v=blablabla

Supongamos que lo descargamos en la carpeta Descargas y que le pusimos de nombre pelicula.mp4

Una vez que tenemos en la carpeta Descargas el video en MP4, abrimos la terminal (Accesorios / Terminal), y allí escribimos:

cd Descargas

ffmpeg -sameq -ss 03:44:00 -t 00:02:10 -i pelicula.mp4 peliculacorta.mp4

(hora de comienzo, duración del video recortado, nombre del video original, nombre del video a crearse con el proceso de corte)

Fuente: https://panoolvidar.wordpress.com/2010/02/09/cortar-video-con-ffmpeg/

Insertar un lateral con Tweets

Activar edición
Nuevo bloque lateral
Bloque HTML
Configurar bloque HTML

:: ::

Una vez creado, tenemos que copiar el código que insertaremos en Moodle:

Volvemos a Moodle, editamos el código HTML del bloque lateral. Se nos muestra una ventanita, allí pegamos el código que copiamos:

¡Listo!

HTML desde cero – Introducción a CSS: colores, posiciones, tamaños, y más

Hasta ahora hicimos las siguientes cosas:

Pero en ningún momento definimos el formato de cada objeto: color, tamaño, posición, etc.

En este tutorial de HTML y CSS de W3schools se explican tres maneras de dar formato a una página en HTML: en el encabezado, entre el contenido, y mediante el uso de una hoja de estilo externa. Esta tercera es muy superior a las otras, debido a que permite cambiar de hoja de estilo dando formato a todos los elementos de la página.

¿Y para qué sirve cambiar de hoja de estilo? Por ejemplo, para darle alto contraste si uno es un usuario con problemas de visión. O para tener una hoja de estilo personalizada en el caso de ser una persona daltónica o con algún tipo de ceguera del color.

Mi primer hoja de estilo

Vamos a necesitar un archivo HTML que tenga varios elementos, por ejemplo, este:

<h1>Comienzo de clases</h1>

<h2>Resultados del campeonato de truco</h2>
<h3>Intercolegial diciembre 2015</h3>

<ol>

<li>Pérez</li>

<li>Gómez</li>

<li>Fernández</li>

<li>Rodríguez</li>

</ol>

<h2>Campamento febrero 2016</h2>
<h3>Lista de elementos a traer</h3>

<ul>
 <li>Birome</li>

<li>Cuaderno</li>

<li>Hilo de pizza</li>

<li>Instrumento musica (no piano)</li>

</ul>

<p>Se ruega a los señores padres enviar a sus hijos aseados y 
retirarlos al finalizar la jornada en forma puntual.</p>
<p>No se aceptan mascotas.</p>

Para tener una página web deberemos agregarle, como siempre, el encabezado que indica el tipo de archivo, la codificación que permite ver los acentos y eñes, y esta vez le vamos a añadir un enlace a la hoja de estilo:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="miestilo.css">
<title>Escuela</title>
</head>
<body>
..............
</body>
</HTML>

El archivo miestilo.css puede contener indicaciones acerca de cómo será cada uno de los elementos (o sólo algunos de ellos), pudiendo obtener resultados tan distintos como estos:

En el primer caso, el encabezado H1 es de color verde (aquí se puede ver una tabla de colores y códigos), el encabezado H2 es de otro tono de verde, con un borde a la izquierda punteado (“dotted”) cuyo ancho es de un caracter (1em) y del mismo color del texto. En el segundo caso, el encabezado H2 se posiciona a la izquierda porque en su hoja de estilo dice que “flote a la izquierda” y que su ancho sea de 10 caracteres (float: left; width: 10em;)

body {background-color: #F5F6CE;}
h1 {color: #0B6121;}
h2 {color: #088A29; border-left: dotted 1em #088A29;}
h3 {color: #04B431; border-left: dotted 1em #04B431;}
p {color:#170B3B; width: 60%; margin-left: 20%; border: 1px dotted #088A29;}
li {list-style-type:square; width: 60%; margin-left: 20%;}

body {background-color: #FFF;}
h1 {color: #B45F04; text-align: right; border: 1px solid #61210B; width: 60%; float:left;}
h2 {color: #FF8000; border-right: solid 0.1em #FF8000; width: 10em; float: left; padding-top: 2em; padding-bottom: 1em;}
h3 {padding-top: 1em; padding-bottom: 1em; color: #8A4B08;}
p {color:#000; width: 80%; padding: 0.2em; font-variant:small-caps;}
li {list-style-type:square; width: 60%; margin-left: 20%;}

A partir de estos primeros experimentos, habrá mucho que investigar sobre el tema. Pero lo importante será tener claro que el formato debe estar separado del contenido.
Tampoco se deben utilizar colores para brindar contenido (algo como “los alumnos que se visualizan en color rojo adeudan papeles en administración”).

Aquí hay un completísimo tutorial de CSS donde se explican las nociones más importantes de este lenguaje.

HTML desde cero – Clase 4

En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le agregamos imágenes, título y encabezados.

En esta cuarta clase vamos a utilizar listas numeradas y no numeradas, y un mínimo de tablas.

Listas

Comienzo de lista numerada: <ol>
Fin de lista numerada: </ol>

Comienzo de lista no numerada (viñetas): <ul>
Fin de lista no numerada: </ul>

Comienzo ítem de lista: <li>
Fin de ítem de lista: </li>

Cada vez que necesitamos tener un conjunto de párrafos con viñetas, o con un símbolo al lado, debemos utilizar listas ordenadas (OL, “orderer) o no ordenadas (UL, “unorderer list”). ejemplo de ol y ul

<h1>Comienzo de clases</h1>

<h2>Resultado del campeonato de truco</h2>

<ol>

<li>Pérez</li>

<li>Gómez</li>

<li>Fernández</li>

<li>Rodríguez</li>

</ol>

<h2>Lista de elementos a traer</h2>

<ul>
 <li>Birome</li>

<li>Cuaderno</li>

<li>Hilo de pizza</li>

<li>Instrumento musica (no piano)</li>

</ul>

Tablas

Comienzo de tabla: <table>
Fin de tabla: </table>

Comienzo de fila de tabla (row): <tr>
Fin de fila de tabla: </tr>

Comienzo de datos de la tabla (data): <td>
Fin de datos de tabla: </td>

Comienzo de encabezados de tabla (heading): <th>
Fin de encabezados de tabla: </th>

Es muy importante saber que se deben usar tablas solamente cuando los datos pueden presentarse claramente como una tabla, es decir tienen más de una columna y más de una fila. Hace unos cuántos años se usaban tablas invisibles para acomodar objetos en la pantalla, pero estas le están indicando a los lectores de pantalla algo que no es, lo cual hace imposible la comprensión para una persona invidente o que utiliza ayudas técnicas.

<h2>Resultado del campeonato de truco</h2>

<table>
<tr>
<th>Apellido</th>
<th>Nombre</th>
<th>Puntaje</th>
</tr>
<tr> <td>Pérez</td>
<td>Juan</td>
<td>300</td> </tr>
<tr> <td>Gómez</td>
<td>Juana</td>
<td>299</td> </tr>
<tr> <td>Rodríguez</td>
<td>Andrés</td>
<td>99</td> </tr>
</table>