1. Herramientas educativas en el Portal Educamadrid
CAP de Aranjuez Curso 2007-2008
Herramientas Educativas
en el Portal Educamadrid
Seminario
GUIÓN DE TRABAJO
Javier Medina
1

2. Herramientas educativas en el Portal Educamadrid
Sesión 7: Rodeándonos de “buenos amigos”.
Trabajar con el Portal Educamadrid nos va a permitir trabajar con contenidos
multimedia: sonidos, imágenes, vídeo… Ello requiere que seamos capaces de localizar y
manejar estos contenidos, y prepararlos de modo que podamos insertarlos
adecuadamente en nuestras páginas.
Para ello, se os ha facilitado un CD recopilatorio de programas de software libre
y shareware que os serán de gran utilidad. Entre ellos, destacamos:
Programas Utilidad
OpenOffice Completo paquete de programas de Ofimática que no tiene nada que
envidiar y sí mucho que aportar a los conocidos de Office.
Scribus Programa para elaborar carteles, folletos,…
Gimp Programa para edición de imágenes
Openclipart Dirección web donde encontrarás más de 6.900 imágenes de uso libre
Filezilla Programa de FTP para “subir” archivos a tu sitio web.
Nvu Programa para crear y editar páginas web (alternativo a FrontPage o
DreamWeaver)
Avidemux Programa de edición de vídeo lineal compatible con numeroso
formatos de vídeo y audio.
Audacity Editor de audio. Permite reproducir, grabar, editar, mezclar, aplicar
efectos, etc.
7-Zip Programa alternativo a Winzio o Winrar, para comprimir/descomprimir
archivos en formato zip
Infanview Programa para visualización de imágenes. Permite sencillas
manipulaciones de las mismas y guiar su proceso de impresión.
Camstudio Programa para realizar grabaciones en tiempo real de lo mostrado en
pantalla. Permite guardar en formato vídeo (avi) o flash (swf)
Actividad 1: Haciendo “buenos amigos”
Uno de los movimientos que más fuerza están cogiendo en la actualidad
es la de los servidores de espacios web para alojar imágenes, vídeos,
presentaciones,… El éxito de YouTube es ilustrativo de ello.
Vamos a crear una cuenta en diferentes servidores para optar a tener
colgados nuestros archivos en Internet –sin consumir nuestro espacio virtual en
Educamadrid- y teniendo acceso a ellos de una manera más gráfica y atractiva.
Te recomiendo los siguientes:
• Slideshare (http://www.slideshare.net/) para alojar presentaciones
en PowerPoint o pdf.
• Vopdod ( http://vodpod.com/) para organizar tus vídeos favoritos de
YouTube u otras fuentes.
• Picasa (http://picasaweb.google.es/) para crear galerías de imágenes
muy interactivas.
2

3. Herramientas educativas en el Portal Educamadrid
1.1. Slideshare: compartiendo presentaciones
• Abre una nueva pestaña en Firefox , accede a la página
http://www.slideshare.net/ y date de alta.
Subir
varios
Subir ficheros
ficheros
• En el ámbito “Curso: Herramientas educativas en el Portal
Educamadrid” encontrarás un contenido en formato powerpoint
denominado “Modelo de Presentación 1”, que se corresponde con la
primera sesión del curso. Envíatelo a tu ámbito personal y descarga
el archivo en tu ordenador.
• Inaugura tu cuenta en Slideshare subiendo el archivo descargado a tu
cuenta personal (usa la opción Upload o Bulk Upload)
• Cuando lo hayas logrado, localízalo en la sección “MySlidespace” y
copia el código que aparece en la sección “Embed in your blog”
• Crea ahora un nuevo contenido tipo “Libre” en tu ámbito personal y
titúlalo “Presentación 1 – mi nombre”. En el cuerpo, selecciona
HTML y pega el código que has copiado. Publícalo y visualiza el
resultado.
• Puedes obtener un efecto similar con pdf.
• También existe una opción denominada “Widgets” que te permite
crear galerías de tus presentaciones. En la página del curso se ha
creado una utilizando esta opción.
1.2. Vodpod: creando nuestra videoteca on-line
• Entra en la página http://vodpod.com/site/register y crea tu cuenta.
• Crea un vodpost pulsando en el icono :
y dale un nombre.
• Vamos a empezar a “coleccionar” vídeos. Para
ello contamos con una herramienta utilísima: el botón de Firefox.
• Localiza en la parte inferior de la página en la que estás de Vodpod la
sección “Tools” e instala el botón VodPod.
3

4. Herramientas educativas en el Portal Educamadrid
• Te pedirá reiniciar Firefox. Una vez hecho el botón deberá aparecer
en la parte superior. Si no está, ponte encima de la barra de
navegación y pulsa botón derecho, eligiendo “personalizar”.
• Ve ahora a YouTube (http://es.youtube.com/) y localiza algún vídeo
que te interese (puedes hacer búsquedas por temas: por ejemplo, si
quieres conseguir vídeos sobre “La Celestina”, teclea “celestina” en el
campo de búsqueda)
• Una vez localizado el vídeo pulsa para verlo y luego, en el botón
VodPod. Se abrirá una ventana para que elijas el pod al que quieras
asociar el vídeo y personalices –si quieres- la información asociada.
• Repite la operación con otros 2 vídeos más y, en el último, selecciona
“Visit my pod”. Allí verás todos los vídeos recogidos. A la izquierda
localizarás el enlace “Get a widget for this pod” y selecciona los
campos según las siguientes instrucciones:
4

5. Herramientas educativas en el Portal Educamadrid
• Copia el código correspondiente.
• Crea ahora un nuevo contenido tipo “Libre” en tu ámbito personal y
titúlalo “Galería Vodpod – mi nombre”. En el cuerpo, selecciona
HTML y pega el código que has copiado. Publícalo y visualiza el
resultado.
• En la portada del Curso se ha incluido la galería de vídeos de “La
Celestina” que hemos seleccionado en los pasos anteriores.
1.3. Picasa: Creando nuestra galería de imágenes
• Accede a la web: http://picasaweb.google.es/ y date de alta creando
una nueva cuenta de Google (si no tienes ya una)
• Crea una galería en Picasa denominada “Tejidos”. Rellena los campos
dejando la galería “pública” y sube las fotos de la carpeta “tejidos”
que te descargaste en la sesión anterior. (Puedes descargarlos desde
tu ordenador bajándote e instalándote la aplicación “Picasa”. Te lo
recomiendo pues agiliza el proceso además de que te ayudará a
organizar tus fotos y archivos)
• Una vez subidas las fotos, elige la opción “Vínculo a este álbum” y
copia el código
• Crea ahora un nuevo contenido
tipo “Libre” en tu ámbito
personal y titúlalo “Galería Picasa
– mi nombre”. En el cuerpo,
selecciona HTML y pega el código
que has copiado. Publícalo y
visualiza el resultado.
• También puedes situarte en el
botón que indica “Proyección de
diapositivas” y, con el botón derecho, copiar la ruta del enlace.
• Luego, en tu contenido, selecciona
HTML y, colocándote al final del
código, escribe la siguiente
instrucción:
<iframe src= “pega entre las
comillas la dirección del enlace
que has copiado” frameborder=“0”
width=“600”
hight=“400”></iframe>
Ello incluirá la presentación de
diapositivas en tu contenido.
• En la portada del Curso se ha incluido la galería de imágenes de
“Tejidos”que hemos creado en los pasos anteriores, con las dos
opciones.
5

6. Herramientas educativas en el Portal Educamadrid
Actividad 2: Mejorando nuestro navegador
En el momento actual uno de los mejores navegadores de páginas web es
Mozilla Firefox. No sólo por su rendimiento interno, su posibilidad de
trabajar y ordenar las diferentes pantallas abiertas en pestañas, sino por
su actualización frecuente –al ser software libre, todos los
diseñadores de páginas web que conforman este movimiento idealista
que pretende reducir la dependencia del monopolístico Windows y
favorecer la democratización y acceso a las herramientas informáticas,
pueden mejorar e implementar constantemente este programa- y la
enorme diversidad de complementos que tiene disponibles. Estos
complementos añaden funcionalidades increíbles a un simple navegador
web. (Puedes descargarte Mozilla Firefox, en la dirección:
http://www.mozilla-europe.org/es/products/firefox/
Una vez instalado tu programa, vamos a revisar algunos complementos y
trabajar algo con ellos.
En el menú superior de Firefox, selecciona
Herramientas/complementos elige Extensiones y luego,
Obtener extensiones.
De entre las muchas opciones, vamos a instalar las siguientes:
Programas Utilidad
FireShot Permite realizar capturas de pantalla y editar las imágenes
añadiéndoles carteles, texto, flechas. También permite subirlas a un
espacio libre y alojarlas en la Red.
FlashGot Permite descargarte los archivos flash (swf) que existan en una página
determinada.
Para descargar flash necesitas tener instalado un progama de descargas
(Download manager) como:
• Bitcomet: http://www.bitcomet.com/doc/download.htm
• Download Acelearator Plus:
http://download-accelerator-plus.softonic.com/descargar
Foxmarks Permite tener actualizados todos tus marcadores en cualquier
Bookmarks ordenador que tengas.
Synchronizer
Vodpod Programa para subir directamente los vídeos que encuentres en la red a
tu cuenta de Vodpod. (Ya lo hemos añadido en la actividad anterior)
2.1. FireShot
• Vamos a crear una imagen a partir de una captura de pantalla y a
editarla a nuestro gusto con el complemento FireShot. La mayor
parte de las ilustraciones que conforman este tutorial están hechas
con FireShot.
• Al instalar este complemento, te habrá aparecido un icono en la
barra de navegación. Si no está, ponte encima de la barra de
navegación y pulsa botón derecho, eligiendo “personalizar”.
6

7. Herramientas educativas en el Portal Educamadrid
• Ve a “Inicio” y realiza una captura de pantalla con ayuda del botón
FireShot (A) o con el menú que aparece al pulsar el botón derecho de
ratón (B).
A B
• Al editar la imagen, tendrás diferentes opciones para añadirle
flechas, comentarios, etc. Al finalizar, guarda la imagen.
• Ilustra las diferentes opciones de la pantalla principal y sus
diferentes secciones creando una imagen como la que se muestra en
la página siguiente.
• También puedes hacer lo mismo con cualquier imagen que abras en
Mozilla Firefox, pudiendo así rotularla a tu gusto o crear esquemas
para que los alumnos rellenen los huecos.
7

8. Herramientas educativas en el Portal Educamadrid
2.2. FlashGot
• Puedes descargarte cualquier archivo flash con esta aplicación.
• El periódico El Mundo tiene una interesante colección de gráficos en
formato Flash.
• Entra en la página:
http://www.elmundo.es/grafico
s/multimedia/index.html
• Elige un archivo y ejecútalo.
• Colócate con el botón derecho en
la página en la que está el gráfico
y elige “Descargar todo con
FlashGot” y guarda el archivo en
tu escritorio.
• Después súbelo a tu directorio virtual de ficheros e insértalo en un
contenido propio.
2.3. Otros recursos
• Banco de imágenes y sonidos del CNICE, con una enorme
variedad:
http://recursos.cnice.mec.es/bancoimagenes2/buscador/index.php
• Mediateca de Educamadrid, donde podrás encontrar muchos
vídeos que podrás insertar en tus páginas y, solicitando la
autorización, subir tus propios vídeos:
http://mediateca.educa.madrid.org/
• Alojar audio: Te generarán un código que podrás insertar en tu
web (cuidado con los derechos de autor, algunos de estos servidores
tienen una política estricta de protección de estos derechos):
o Odeo: http://studio.odeo.com/create/home
o Blip.TV: aloja audio y vídeo: http://blip.tv/
• Conversores de archivos: te permiten convertir unos archivos de
imagen, vídeo o sonido de un formato a otro:
o Media Converter: http://media-convert.com/conversion/
o Zamzar: http://www.zamzar.com/
8

9. Herramientas educativas en el Portal Educamadrid
• Contadores de visitas: Para saber quién y cuánto te visitan.
o StatCounter: http://www.statcounter.com/
o Webstats-Motigo: http://webstats.motigo.com/
• Ponerle música a tu web: http://sonific.com/
• Editor on-line de imágenes: para retocar tus imágenes
rápidamente y sin abrir otros programas: http://pixer.us/
• Editor on-line de vídeos: para modificar y añadir efectos,
portadas, etc. a tus vídeos: http://www.youtube.com/ytremixer
• Convertir textos en audio: Es una opción interesante para hacer
accesibles tus noticias a personas con déficits de visión o con
problemas de lectura (niños pequeños, por ejemplo). El programa te
genera automáticamente un archivo mp3 a partir de tu texto.
o Sonowebs: (en español) http://www.sonowebs.com/
o Vozme (en español, inglés o italiano): http://vozme.com/
Actividad 3: Y de postre… un poco de HTML
Has elaborado ya numerosos contenidos, insertado imágenes, audio,
vídeo, creado tablas, hipervínculos,… Todas estas funcionalidades llevan detrás
un código que los navegadores de páginas web interpretan y convierten en tus
documentos. Es el lenguaje HTML.
No vamos a hacer un curso HTML dentro del curso, pero sí quería que
tuvieras algunas simples nociones y conocieras algunos códigos básicos. Ello te
permitirá entender la sintaxis básica de estos códigos y llegar a modificarlos
básicamente.
Hay muchos tutoriales en Internet. Te incluyo algunas direcciones que te
vendrán bien. Elige uno de ellos para profundizar:
o http://www.desarrolloweb.com/manuales/21/#capitulos
o http://roble.pntic.mec.es/apuente/html/paginas/uno.htm
o http://www.uv.es/jac/guia/indice.htm
o http://www.etsit.upm.es/~alvaro/manual/manual.html
o http://manual-html.com/
Vamos a realizar un sencillo ejercicio que incluya cambios de formato,
una imagen insertada y un hipervínculo. A partir del ejemplo, realizarás los
cambios necesarios, siempre trabajando con el código.
Fíjate que todas las instrucciones van entre etiquetas <…> y
que algunas instrucciones deben llevar etiqueta de cierre </…>
o Crea un contenido libre y titúlalo: “Mi página HTML”.
o Introdúcete en el cuerpo y abre la ventana HTML.
o Escribe el siguiente código (las negritas son para destacar el código):
<div align=quot;justifyquot;><img src=quot;http://www.google.es/intl/en_com/images/logo_plain.pngquot;
border=quot;2quot; alt=quot;Logo de Googlequot; title=quot;Ven a Googlequot; hspace=quot;12quot; width=quot;276quot; height=quot;110quot;
align=quot;rightquot; />Esta es mi <em>primera página web</em> hecha en <strong>HTML</strong>.
Voy a incluir un <a href=quot;http://www.google.esquot;>enlace </a> a Google y luego la imagen
corporativa de Google a <u>tamaño original</u> y ajustada a la derecha, dejando un espacio
entre texto e imagen de 10 px y con un borde de 2 puntos. Le he colocado también un
<strong>título</strong> (“Ven a Google”) y una <strong>descripción </strong>(“Logo de
Google”). El texto está justificado. </div>
9

10. Herramientas educativas en el Portal Educamadrid
o Analicemos la sintaxis:
Codigo Efecto
1. <div align=quot;justifyquot;>…. </div> Justifica el texto que se encuentra entre las etiquetas
<div>
2. <img src= Todos los parámetros van entre comillas:
quot;http://www.google.es/intl/en_com/images/logo_plain - src= “…”: es la dirección web de la imagen
.pngquot; border=quot;2quot; alt=quot;Logo de Googlequot; title=quot;Ven a - border= “…”: el grosor del marco de la imagen (en
Googlequot; hspace=quot;10quot; width=quot;276quot; height=quot;110quot; nuestro caso “2”)
align=quot;rightquot; /> - alt= “…”: el Título o descripción de la imagen
- title= “…”: Mensaje asociado a la imagen que se
mostrará cuando coloquemos el ratón encima de la
imagen
- hspace= “…”: espacio entre el texto y la imagen
- width= “…”: anchura de la imagen
- height= “…”: altura de la imagen
- align= “…”: alineación de la imagen:
o right: derecha
o left: izquierda
o center: centrado
Formato <em>…</em> Pone en cursiva el texto entre las etiquetas
<strong>...</strong> Pone en negrita el texto entre las etiquetas
<u>…</u> Subraya el texto entre las etiquetas
<a href=quot;http://www.google.esquot;>enlace </a> Enlaza el texto situado entre las etiquetas con la
dirección entrecomillada
o Guarda y previsualiza el resultado. Debe quedarte algo así:
o Vuelve a tu contenido y abre la ventana HTML. Duplica el código
existente bajo el actual y hazle algunos cambios:
o Cambia la imagen o las dimensiones de la imagen actual
o Cambia el mensaje o la descripción de la imagen
o Cambia los otros parámetros: altura, anchura, espacio y
alineación
o Cambia los textos en cursiva y en negrita
o Enlaza con otra página distinta
(http://www.educa.madrid.org)
o Guarda y compara el resultado con el anterior.
Javier Medina Domínguez
javier.medina@educa.madrid.org
10