Códigos para maquetado

Estoy trabajando en la carga de contenidos en una plataforma Moodle, y muchos/as docentes me envían algunos cuadros en imágenes que podrían estar en texto. Por una cuestión de accesibilidad, siempre que el tiempo me alcanza, paso esos cuadros a código.

Voy a ir guardando en este posteo esos códigos, para volver a usarlos yo misma, y para compartir con quienes se encuentren en una situación similar.

Recuadrito a la derecha de un texto

<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>
“He pasado una noche estupenda, pero no ha sido esta”

Recuadrito con bordes redondeados

<div style="float: right; width: 40%;background-color: #d5dfee; padding: 1.5em; margin: 2em; border: 1px #123872 solid; text-align: center; border-radius: 25px;"><em>"He pasado una noche estupenda, pero no ha sido esta"</em></div>
“He pasado una noche estupenda, pero no ha sido esta”

Recuadro título de pestaña

<div style="width: 80%; border: 2px solid #012760; text-align: center; padding: 1em; margin-left: auto; margin-right: auto; background-color: #C6D2DD;">
    <h4 style="color: rgb(1, 39, 96); text-align: center;">Clase 1</h4>
</div>

Clase 1

Imagen con pie de imagen a la derecha del texto

<div style="clear: both;"><div style="float: right; width: 20%;"><img src="https://irisfernandez.com.ar/betaweblog/wp-content/uploads/2023/04/405px-Tux.png" alt="tux"><p style="font-size: 70%; font-style: italic; text-align: center;" >Fuente: Wikipedia</p></div><p>Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un pequeño pingüino de aspecto risueño y cómico basado en una imagen que Linus Torvalds encontró en un servidor FTP. </p></div>
tux

Fuente: Wikipedia

Tux es el nombre de la mascota oficial de Linux. Creado por Larry Ewing en 1996, es un pequeño pingüino de aspecto risueño y cómico basado en una imagen que Linus Torvalds encontró en un servidor FTP.

Lista de ítems

<br>
<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">1</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Primer paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">2</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Segundo paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">3</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Tercer paso</p>
    </div>
</div>

<div style="clear: both;">
    <div style="float: left; border: 1px solid #000077; padding: 0.5%; margin: 0.9%; width: 5%; text-align: center; font-size: 300%; color: #000077;">4</div>
    <div style="float: left; border: 1px solid #000077; padding: 1em; margin: 1em; width: 60%; text-align: center; ">

        <p>Cuarto paso</p>
    </div>
</div>

1

Paso 1

2

Paso 2

3

Paso 3

4

Paso 4

Inteligencia artificial y educación

En estos meses, desde la difusión del ChatGPT, se pusieron en discusión varias estrategias con respecto al vínculo entre educación e Inteligencia Artificial, desde la prohibición hasta la apropiación.

Por mi parte, creé un grupo en Facebook y otro grupo en Linkedin con el objetivo de recopilar información, y elaboré este video en el que hablo del tema y propongo no perder el eje: atender a la diversidad, cuidar la accesibilidad, evitar los sesgos, prestar atención a las licencias y a la soberanía tecnológica.

Enlaces mencionados en el video:

Gonzalo Zabala en CONFERENCIA “INNOVACIÓN, TECNOLOGÍA Y NEUROCIENCIA EN LA ENSEÑANZA”. A partir del minuto 29. https://www.youtube.com/watch?v=1QP_SgAz8dA

¿Tienen política los artefactos? Langdon Winner
Publicación original: “Do Artifacts Have Politics?” (1983), en: D. MacKenzie et al. (eds.), The Social Shaping of Technology, Philadelphia: Open University Press, 1985. Versión castellana de Mario Francisco Villa. http://www.ub.edu/prometheus21/articulos/tienen.pdf

Ernesto Mislej – Cientifico de Datos | No Dejes Para Mañana https://youtu.be/g0LNEBwrOps

Chat-GPT y la automatización del trabajo. Patrick Stasny https://ctxt.es/es/20221201/Culturas/41634/Patrick-Stasny-inteligencia-artificial-chat-gpt-ludismo-trabajo-consciencia.htm

Xataca
https://www.xataka.com/aplicaciones/lensa-genera-avatares-hipersexualizados-para-mujeres-gran-reto-ia-desprenderse-nuestros-sesgos

Trampa en la facultad https://www.rfi.fr/es/francia/20230112-trampa-en-la-facultad-el-50-de-los-trabajos-entregados-realizados-con-inteligencia-artificial

Predecir éxito académico
https://www.universia.net/ar/actualidad/orientacion-academica/puede-inteligencia-artificial-predecir-fracaso-escolar-1161371.html

Publicidad errores de tipeo
https://www.adsoftheworld.com/campaigns/with-ai-you-can-create-images-from-words-better-make-sure-they-are-the-right-ones

Campaña errores de tipeo https://www.adsoftheworld.com/campaigns/with-ai-you-can-create-images-from-words-better-make-sure-they-are-the-right-ones

Noticia Discapacidad y reconocimiento facial https://www.perfil.com/noticias/actualidad/insolito-un-hombre-tuerto-se-pego-un-ojo-de-caricatura-para-que-lo-reconozca-la-app-mi-argentina.phtml

Sesgos https://www.xataka.com/aplicaciones/lensa-genera-avatares-hipersexualizados-para-mujeres-gran-reto-ia-desprenderse-nuestros-sesgos

Generar video con vocabulario
https://twitter.com/jesusisflipping/status/1616188264540688384?s=20&t=ZIB6FOM2ktM790nJgh1K_w

ChatGPT https://openai.com/blog/chatgpt/
Dall-e https://labs.openai.com/
Cookup https://cookup.ai/
Futurepedia https://www.futurepedia.io/

Gracias Marisa Conde, Ricardo Leithner, Gonzalo Zabala, Aldo Ferrari y Carlos Rodríguez por los enlaces compartidos en las redes.

Un pedido para una sociedad mejor

¿Trabajás en sistemas? Está en tus manos hacer un mundo mejor. Estudiá UX y accesibilidad. No dejes afuera a las personas mayores y a las personas con discapacidad.

¿Dirigís una institución educativa donde se trabajan temas de tecnología? Que en cada carrera haya materias de accesibilidad, para formar profesionales que naturalmente hagan productos que no dejen afuera a las personas con discapacidad y a las personas mayores.

¿Tenés una empresa y contratás gente de sistemas? Exigí que cumplan las pautas de accesibilidad. Todo lo que se hace, desde un sitio web, un sistema para turnos, un cajero automático o una promoción, debe estar hecha sin barreras para personas con discapacidad y personas mayores

¿Trabajás en el Estado? ¿Está en tus manos la producción de contenido? Creá PDFs accesibles, creá contenido accesible para la web, asesorate acerca de cuáles son las herramientas que te permiten que tus producciones no dejen afuera a personas con discapacidad y personas mayores.

¿Construís puertas, muebles, edificios, pupitres? No crees objetos que dejen afuera a personas mayores, o personas con algún grado de diversidad funcional.

¿Manejás un auto? No tapes rampas al estacionar, no estaciones en paradas de colectivo, ya que las personas mayores necesitan que frene junto al cordón para poder subir y bajar. No asumas que todas las personas oyen, la bocina no es una opción para que la gente se mueva.

Viví tu vida sabiendo que existe gente diversa. Gente flaca, gorda, que oye y que no oye, gente que ve más, menos, en blanco y negro, o no ve nada. Gente con un brazo solo o que se desplaza en silla de ruedas. Gente mayor, gente lenta, gente con dolores crónicos. Gracias.

Crear un mapa en forma colaborativa

En el mundo del software libre y el código abierto existen herramientas increíbles, aunque poco conocidas. Es el caso de uMap, una herramienta para crear mapas personalizados de manera colaborativa, con base en OpenStreetMap.

Pantalla de uMap donde se dan las opciones para crear un nuevo mapa

Hacemos clic en “Crea un mapa” y obtenemos un mapa donde debemos configurar primero el título (1) la región que se va a ver en el mapa: buscamos por ejemplo el país o ciudad donde vamos a agregar nuestros marcadores, y luego hacemos clic en el icono de “Guardar este centrado y acercamiento” (2).

Ya podemos comenzar a agregar hitos (3) en cada lugar en que queremos poner información.

Tres primeros pasos: poner título al mapa, elegir la ubicación inicial, comenzar a agregar los marcadores.

En cada marcador tenemos una gran cantidad de opciones: la capa (podemos tener distintas capas con diferente información), el título, la descripción (que puede contener texto, imágenes y videos), la forma del marcador, etc.

Al agregar un marcador es posible utilizar negritas, cursiva, insertar imágenes o incrustar un sitio.

Arriba a la derecha tenemos la opción de guardar, y luego podemos desactivar la edición para ver el mapa tal como lo verán quienes lo visiten.

Para que más personas puedan modificar el mapa debemos hacer clic en el icono de la llave y decidir si se necesita el enlace secreto de edición o si cualquier persona que acceda al mapa podrá modificarlo:

Se puede compartir con un enlace secreto a través del último ícono de la barra de edición, con forma de llave.

El mapa podrá compartirse a través de un enlace, o embeberlo dentro de un sitio.

Enlace al mapa: http://u.osmfr.org/m/814953/

Ver pantalla completa

Presentación: Software Libre y Educación

Me invitaron a realizar una charla sobre software libre y Huayra.

Comparto aquí mis diapositivas, realizadas en HTML + CSS, con licencia Creative Commons Atribución.

Enlace a las diapositivas en línea: http://irisfernandez.ar/SLyHuayra/

Descargar archivo comprimido con las diapositivas

Tutoriales de Gimp: primeros pasos

¡Hola! Hoy publico por acá tres tutoriales que hice de Gimp a pedido de mi hermana Griselda <3

Son tutoriales que empiezan desde cero, para el/la que no sabe nada de nada, pero no van despacito sino que muestro muchas cosas en el mismo video.

Espero que lo disfruten!!

Primer tutorial de Gimp (enlace al video)

Tutorial 1: Crear un archivo, dibujar unas figuras, utilizar el balde para rellenar, visualizar las opciones de las herramientas, utilizar relleno con transparencia.

Enlace al video: Utilizar capas para crear un paisaje

Tutorial 2: Utilizar capas para crear un paisaje

Tutorial 3: combinar dos imágenes usando capas y transparencias

Tutorial 3: Combinar dos imágenes utilizando capas y transparencia

Recortar y convertir un fragmento de video usando ffmpeg

Muchas veces tenemos ganas de recortar un fragmento de video, pero cuando intentamos hacerlo con un software de tipo OpenShot o Kdenlive, nos damos cuenta de que se nos cuelga todo. El tema de esos programas es que funcionan en modo gráfico, tenemos que ver el video mientras lo recortamos y por eso exige muchísima memoria RAM.

La alternativa es entonces, ver primero el video, anotar (con el antiquísimo sistema de lápiz y papel) desde dónde hasta dónde es el fragmento que queremos recortar.

Después, abrir la terminal (en mi caso, en Huayra, CTRL + ALT + T) y escribir:

ffmpeg -ss 00:03:00.0 -i efemeride.mp4 -t 00:01:00.0 recorteefemeride.mp4

-ss 00:00:00 es la hora, minuto y segundo donde comienza el recorte que queremos obtener

-i efemeride.mp4 es el archivo original del que queremos obtener un fragmento.

-t 00:01:00 es la duración del recorte (en este caso 1 minuto). Para poner “hasta dónde” en lugar de la duración hay que usar -to

recorteefemeride.mp4 es el archivo de salida que se genera con el fragmento obtenido.

Se puede en un solo paso recortar un fragmento y cambiar también el formato del video:

ffmpeg -ss 00:01:12 -i recuerdos.mp4 -t 00:02:30 recuerdos.avi

También utilizar ffmpeg para convertir, sin recortar nada:

ffmpeg  -i recuerdos.mp4  recuerdos.avi

Escribiendo ffmpeg -h se obtiene ayuda sobre los parámetros.

Fuentes y más datos sobre conversión de formatos:

Blog Recontruccion Virtual http://blog.reconstruccionvirtual.es/ffmpeg-recortar-un-video/

Sitio b5un https://b5un.com/en/article/57/quick-guide-to-convert-videos-with-ffmpeg.html

Infografía: ¿Por qué es tan bueno el Software Libre?

Comparto un trabajo realizado para el seminario Recursos Digitales II de la Maestría en Enseñanza en Escenarios Digitales (MEED)
Profesora: Dra. Carina Fracchia – Tutora: Lic. Valeria Sánchez
Maestranda: Lic. Iris A. Fernández

Infografía editable (realizada en Inkscape): irisfernandez.ar/SL/infografiaSLfinal2.svg

Infografía exportada en PNG (1500 px de ancho): irisfernandez.ar/SL/infografiaSL.png

Infografía exportada en PNG (1000 px de ancho): irisfernandez.ar/SL/infografiaSL-1000px.png

Las imágenes son de: https://publicdomainvectors.org/

Infografía sobre Software Libre

Sozi

Hace ya algunos años, cuando empezó a estar muy de moda hacer pesentaciones con Prezi, me recomendaron Sozi. Pero en aquel momento no logré hacerlo funcionar, y abandoné la idea de probarlo.

Hoy nuevamente me lo mencionan y decidí darle una nueva oportunidad.

Se trata de un software para generar presentaciones a partir de una imagen vectorial creada con Inkscape

Para empezar, descargué Sozi desde su sitio web, en mi caso la versión para GNU/Linux.

Las instrucciones de instalación son muy sencillas:

  • Descomprimir el archivo .tar.xz descargado (botón derecho sobre el archivo descargado, y elegir “Extraer aquí”)
  • Acceder a la carpeta install desde la terminal:
cd /home/tunombre/Descargas/Sozi-20.05.09-1589035558-linux-x64/install
  • Una vez allí, hay que ejecutar el archivo llamado install.sh
sudo ./install.sh

Una vez instalado, se ejecuta buscándolo en el menú, o desde la terminal escribiendo simplemente:

sozi

En mi caso, el acceso del menú no reaccionaba, y el de la terminal me daba este error:

FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /opt/sozi/chrome-sandbox is owned by root and has mode 4755. `trap' para punto de parada/seguimiento

Así que tuve que modificar estas cosas en el archivo /opt/sozi/chrome-sandbox:

cd /opt/sozi/
sudo chown root:root chrome-sandbox
sudo chmod 4755 chrome-sandbox

Una vez instalado, fui a Inkscape y creé un archivo con tres objetos que tienen texto:

Imagen creada en Inkscape

Después, abrí este archivo en Sozi. Con la ruedita del mouse y los controles para rotar y mover la imagen, posicioné la primera diapositiva.

Luego pulsé el botón con el signo + para crear la diapositiva, le puse nombre y tiempo.

A continuación posicioné la imagen para la segunda diapositiva y pulsé el botón, y así sucesivamente con las demás diapositivas.

Haciendo clic en este enlace se puede ver la presentación realizada con Sozi.