Dos juegos para aprender a programar

Lightbot: para jugar en línea

Este juego permite realizar secuencias de pasos, programar procedimientos y estructuras de repetición

1. Acceder al enlace: http://lightbot.com/hocflash.html
2. Elegir el idioma castellano (bandera española) y pulsar el botón verde para
comenzar:

Elegir el idioma y empezar

3. Comenzar jugando en el primer nivel para comprender la mecánica

El objetivo es mover el robot hasta la lamparita, a través de una secuencia de pasos que primero se programan y luego se ejecutan:

El programa está a la derecha

Blocky game: para descargar

Si queremos relizar juegos introductorios a la programación pero no tenemos conexión o no es muy confiable, les recomiendo utilizar Blocky Game.

Tiene una serie de juegos introductorios, de más simple a más complejo

Menú de juegos de Blocky Games

Por ejemplo, en el “Laberinto”, tenemos que unir bloques con órdenes para llegar a destino:

Los bloques unidos conforman el programa

Para utilizar estos juegos sin conexión a Internet, hacé clic en la imagen o escribí esta dirección: https://github.com/google/blockly-games/wiki/Offline

Elegir el idioma español

Agregar un pie a las fotos de una página

Un café con leche realizado con arte

Esta imagen muestra un rico café con leche decorado, y su correspondiente vasito de jugo de naranja.

Para que una foto tenga un texto debajo, como en el ejemplo de la derecha, podemos utilizar un DIV dentro de otro:

<div style=”width: 50%; border: 1px solid; background-color: #eee; padding: 0.5em; float: right; margin-left: 0.5em;”>

<a href=”fotogrande.png”>

<img src=”fotochica.png” alt=”Un café con leche realizado con arte” width=”100%” />

</a>

<div style=”width: 90%; padding: 0.5em; font-size: 0.8em; margin: auto;”>Esta imagen muestra un rico café con leche decorado, y su correspondiente vasito de jugo de naranja. </div>

</div>

De esa manera tendremos un DIV dentro de otro. El DIV más grande tiene un color de fondo gris muy clarito y el de adentro contiene la imagen.

Separando diseño de contenido

En los casos en que tenemos la posibilidad de acceder a la hoja de estilo de la página, será mucho mejor separar el diseño (que va en la hoja de estilo, CSS) del contenido (que va en el archivo HTML). Tomé la base de este blog (CiudadBlogger)

Café con leche y jugo de naranja

Este es el código para la hoja de estilo:

.piedefoto { padding: 0; width: 40%; position: relative; }

.piedefoto img { width: 40%; display: block; padding: 0; border: 0; }

.piedefoto::before { content: attr(title); position: absolute; background: #EAF200; /* Color de fondo */

background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */

color: #000; /* Color del texto */

font-size: 14px; /* Tamaño del texto */

padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }

Y este, el código para insertar en el documento HTML:

<div style=”width:40%; padding:1em; margin:0 auto; float:right;”><div class=’piedefoto’ title=’Escribí acá el pie de foto’><img src=’Dirección de la imagen’/></div></div>

En el post original explican por qué el color de fondo está dos veces:

En el primer código que añadimos están los estilos para el pie de foto. Verás que el color de fondo está dos veces, primero en código hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomará el primero, el hexadecimal, pero sin la transparencia. En la secciónColores puedes obtener el código tanto en hexadecimal como en RGB.

Si jugamos un poco con colores y niveles de transparencia podemos lograr muchas variantes:


opciones

 

Estos son los estilos de esos tres ejemplos:

.prueba::before { content: attr(title); position: absolute; background: #00ff00; background: rgba(234, 234, 234, 0.7); color: #000; width:100%;padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }
.prueba { padding: 0; position: relative; }
.prueba img { display: block; padding: 0; border: 0; }

.prueba2::before { content: attr(title); position: absolute; background: #0000FF; background: rgba(0, 0, 255, 0.6); color: #fff; width:50%;padding: 5px; right: 0; bottom: 50%; left: 0; text-align: center; z-index: 1; }
.prueba2 { padding: 0; position: relative; }
.prueba2 img { display: block; padding: 0; border: 0; }

.prueba3::before { content: attr(title); position: absolute; background: #FF9A00; background: rgba(255, 154, 0, 0.8); color: #000; width:90%;padding: 5px; bottom: 90%; left: 60px; text-align: left; z-index: 1; }
.prueba3 { padding: 0; position: relative; }
.prueba3 img { display: block; padding: 0; border: 0; }

Usar el celular Android como mousepad

Si se te rompió el mouse o no te responde el pad de la notebook, podés intentar que el celular resuelva el problema.
Existen varias herramientas, pero para escribir este post elegí Ultimate Mouse porque funciona en Linux.

Primer paso: instalar en la computadora el programa receptor

Descargar la herramienta para la computadora desde el sitio de Negusoft: http://www.negusoft.com/index.php/ultimate-control/downloads

ultimate mouse

 

Para quienes no están acostumbrados a instalar programas en Huayra, estos son los pasos:

a) Abrir una terminal (Accesorios / Terminal)

b) Acceder a la carpeta de descargas:

cd Descargas

c) Descomprimir el archivo descargado:

tar -zxvf ultimate_control_v1.2_linux_32bit.tar.gz

d) Instalar el software:

sudo sh install

e) Ejecutarlo:

ucontrol

Segundo paso: instalar en el celular

1) Buscar en el Play Store la herramienta “Ultimate Mouse” e instalarlo

Instalar Ultimate Mouse en el celular

2) Ejecutarlo y elegir el modo (puntero o táctil) y la forma de comunicación. El celular tomará la apariencia de un mouse pad:

Ultimate mouse funcionandoEn el modo puntero hay que mover el celular en el aire. Sorprendentemente, el movimiento no es horizontal, es decir, si quiero que el puntero del mouse suba, tengo que levantar el celular manteniendo el dedo sobre la pantalla…!