Cultura libre – Página 8

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:

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>

HTML desde cero – Clase 3

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

Los títulos de las ventanas

Comienzo de título de ventana: <title>
Fin de título de ventana: </title>

Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Hasta ahora en la parte del encabezado sólo tenemos la declaración del tipo de caracteres, lo cual es necesario incluir para poder ver los acentos y eñes.
Ahora vamos a agregar algo más en esa sección (dentro del heading)

<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>El Martín Fierro</title>
</head>
<body>

¿Pero dónde se ve ese título? Cuando abras tu página web, vas a ver el título en la parte de arriba del navegador, y también en la barra de tareas.

Agregamos títulos y subtítulos en la página

Comienzo de encabezado de primer nivel (títulos principales): <h1>
Fin de encabezado: </h1>

Comienzo de encabezado de segundo nivel (subtítulos): <h2>
Fin de encabezado de segundo nivel: </h2>

Para insertar un título, por supuesto, se puede escribir el título y luego agregarle negrita o cursiva. Sin embargo, esa manera de poner un título no es útil para todos los usuarios. Lo que es correcto semánticamente es indicar que lo que uno está escribiendo es un título.De esa manera quien lo necesite puede comprender la estructura de la página, y también se puede determinar un formato para todos los encabezados de primer nivel (títulos), otro formato para los encabezados de segundo nivel (subtítulos), etc.

<body>

<h1>Rayuela</h1>

<h2>Pero no el libro original</h2>

<h3>Autor: Yo</h3>

<p>Había una vez una vereda, una niña, y una tiza. También había una piedra y otra niña. Todos esos elementos se combinaron de tal forma que en la vereda quedó una rayuela. La lluvia la borró.</p>

</body>

Imágenes

Inserción de una imagen: <img src=”imagen.png> alt=”Logotipo” />

Para insertar una imagen es necesario que el archivo:

Tenga uno de estos tres formatos:
- GIF (menos colores, pero con posibilidad de ser animados),
- JPG (todos los colores, sin transparencia ni animación pero mejor compresión que el PNG), o
- PNG (pesa más, pero admite transparencias)
Esté on line, es decir, tenemos que subir la imagen para poder indicar su ubicación (en el caso de nuestras prácticas con páginas locales, no es necesario; basta con poner el archivo de imagen en la misma carpeta que la página que estamos creando).
Tenga derechos que te permitan usarla. Nunca hay que usar una imagen que no tiene declarada una licencia que permita su uso.

Imágenes con enlaces

Para poner un enlace en una imagen, basta con poner la imagen en el lugar donde se escribe el contenido del enlace:

Se ve de esta manera:

Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:

Las imágenes deben tener texto alternativo significativo (si la imagen tiene enlace, el texto alternativo debe ser la indicación del enlace, por ejemplo “Ir al comienzo”)
Las imágenes tienen que estar optimizadas para poder cargar rápidamente, para no gastar ancho de banda innecesario, máxime teniendo en cuenta que cuando navegamos con nuestros celulares pagamos por cada byte que descargamos.

Te propongo hacer el siguiente ejercicio:

Armá una pequeña galería de arte o álbum de fotos, poniendo una imagen, luego un enlace a la siguiente, etc.

Más tutoriales de HTML

En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.