Sesión 7

1.493 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.493
En SlideShare
0
De insertados
0
Número de insertados
21
Acciones
Compartido
0
Descargas
1
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Sesión 7

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×