El módulo Enseñar y Aprender en Red nos propone actividades en las que podemos poner a prueba nuestra creatividad utilizando el Windows Movie Maker. Intuyendo que la mayoría de los compañeros no conoce mucho acerca de esta herramienta, decidí publicar la información básica sobre la misma y cómo pude utilizarse. Empecemos. Windows Movie Maker es un programa para crear, editar y compartir nuestras propias ediciones de video, imágenes y sonido. Sus funciones básicas son muy fáciles de usar, y presenta efectos y otro tipo de herramientas que ayudan a lograr películas caseras de muy buena calidad y muy elaboradas. Si sos usuarios de Windows, la ventaja es que viene con el paquete básico de instalación, por lo tanto no hay que bajarse ningún programa adicional. Pero claro, que vengan en el paquete de instalación inicial no significa que sean gratuitos ni de código abierto, ¿verdad? Si son usuarios de Linux existen programas como el Open Movie Editor (de código abierto) con herramientas que posibilitan resultados de igual calidad. Para terminar, les dejo un video tutorial que explica lo básico del Movie Maker.
.
Primera Parte:
Trabajamos con nuestra plantilla en HTLM, por eso, lo primero por hacer es GUARDAR una copia de nuestra plantilla y así tener la opción de recuperarla si queremos. Bien, ahora que ya guardamos, insertamos el menú. Desde nuestro PANEL clickeamos en DISEÑO y luego en EDICIÓN DE HTML y allí tildamos la opción Expandir Planillas de Artilugios. Utilizando la combinación de teclas CONTROL+F buscamos lo siguiente: ]]></b:skin>:
Inmediatamente antes pegamos el código que copio a continuación:
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */
#nav-menu
{
width:30em
}
Luego GUARDAMOS la plantilla.
Segunda Parte
Vamos a DISEÑO y luego a ELEMENTOS DE PÁGINA. Nos muestra la organización de los elementos de nuestro blog. Elegimos Añadir un elemento de página y en la ventana que se abre elegimos la opción Añadir al blog HTML/Javascript. Se va a abrir una nueva ventana, dejamos sin completar el título y en la ventana del contenido copiamos el siguiente código:
<div id="nav-menu">
<ul>
<li><a href="AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE">TÍTULO</a></li>
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>
</ul>
</div>
Ahora GUARDAN. Hasta aquí el Menú nos quedó en un costado, entonces con el Mouse arrastramos el elemento que acabamos de crear hasta la cabecera de nuestro blog, luego vuelven a GUARDAR y así queda creado el menú.
A tener en cuenta
Donde dice AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE, tienen que copiar la dirección donde los va a mandar el botón del menú, por ejemplo: http://www.flacso.org.ar
Donde dice TITULO copian el nombre que va a identificar esa dirección que copiaron, por ejemplo: FLACSO.
En el ejemplo solo coloqué un menú con tres botones. Si necesitan más, sólo tienen que repetir la siguiente línea del código tantas veces como quieran:
<li><a href=" AQUÍ COPIÁS LA DIRECCIÓN DE ENLACE "> TÍTULO </a></li>
Bien, espero que les haya servido, sobre todo a mi compañerita Olga. Ya saben, cualquier problema, me escriben.
.
En la primera parte expliqué como escuchar música en el blog utilizando archivos MP3 alojados en la web. En mi blog uso otro recurso, el Reproductor de Windows Media Player, y la música que se escucha es la de una radio on line. Decidí hacerlo así porque cuando no estoy en mi casa suelo escuchar esa emisora, entonces a través de mi blog me resulta más fácil. Bien, veamos como utilizar este recurso...
Desde el Panel, vamos a DISEÑO, ELEMENTOS DE LA PÁGINA. Nos fijamos en que lugar queremos que aparezca el reproductor, seleccionamos AÑADIR UN ELEMENTO DE PÁGINA y añadimos un elemento HTML / JavaScript. Completamos el título (si queremos) y en la ventana principal copiamos el siguiente código:
<object id="WMPlay" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" viewastext height="45" type="application/x-oleobject">
<param value="
AQUI COLOCAS LA DIRECCIÓN WEB DE LA RADIO O UN LINK A UN ARCHIVO MP3
" name="FileName"/>
<param value="1" name="ShowControls"/>
<param value="0" name="ShowDisplay"/>
<param value="0" name="ShowStatusBar"/>
<param value="0" name="AutoSize"/>
<param value="2" name="DisplaySize"/>
<embed pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows;sbp=mediaplayer;ar=Media;sba=Plugin;" autosize="0" filename="AQUI COLOCAS LA DIRECCIÓN WEB DE LA RADIO O UN LINK A UN ARCHIVO MP3" showstatusbar="0" type="application/x-mplayer2" height="45" showdisplay="0" width="180" showcontrols="1" displaysize="0" name="WMPlay">
</embed></object>
GUARDAR y listo, cada vez que alguien entre en el blog, podrá disfrutar la música elegida. Es importante tener que pueden adaptar el tamaño del reproductor. Lo único que deben hacer es ir modificando el parámetro width (ancho), en el código de ejemplo dice width="180". Lo pueden aumentar o disminuir según sus necesidades, vayan probando y viendo como queda. Bien, esto es todo. Y ya saben, las dudas las resolvemos juntos.
.
Colocar el reproductor en nuestro blog.
El primer paso es copiar el código que necesitamos para que aparezca el reproductor en nuestro blog. Desde el Panel, vamos a DISEÑO, ELEMENTOS DE LA PÁGINA. Nos fijamos en que lugar queremos que aparezca el reproductor, seleccionamos AÑADIR UN ELEMENTO DE PÁGINA y añadimos un elemento HTML / JavaScript. Completamos el título (si queremos) y en la ventana principal copiamos el siguiente código:
<object type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF" width="200" height="20">
<param name="movie" value="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF" />
</object>
Con el código anterior, el visitante tiene que precionar PLAY para que la canción comience a sonar. Para que el mp3 arranque automáticamente, el código que tienen que copiar es el siguiente:
<object type="application/x-shockwave-flash" data="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://tucancion.mp3&autostart=1&bgcolor=FFFFFF" width="200" height="20">
<param name="movie" value="http://www.estvideo.com/dew/media/dewplayer.swf?mp3=http://tucancion.mp3&bgcolor=FFFFFF" />
</object>
Es importante que en ambos casos coloquen la RUTA DE ENLACE de la canción que eligieron donde dice "http://tucanción.mp3". Bueno, espero que les sirva.
Respondiendo a la inquietud de Marta, publico la forma en la cual podemos administrar el tamaño de nuestras columnas. Es bastante sencillo. Debemos trabajar con nuestra plantilla en HTLM, por eso, lo primero por hacer es GUARDAR una copia de nuestra plantilla y así tener la opción de recuperarla si queremos. Para quien no sabe como hacerlo, aquí va la explicación:
En nuestro PANEL del blog vamos a DISEÑO y luego a EDICIÓN DE HTML. Clickeamos sobre DESCARCAR PLANTILLA COMPLETA, y nos va a pedir guardarla en nuestro disco rígido. Le damos un nombre y salvamos para tenerla disponible y SUBIRLA (más adelante veremos cómo) si necesitamos revertir los cambios. (La explicación para subir la plantilla se encuentra en el post: “Empezando por lo básico”)
Bien, ahora que ya guardamos, vamos al tema de las columnas. Desde nuestro PANEL clickeamos en DISEÑO y luego en EDICIÓN DE HTML. Buscamos las líneas que describo más adelante (pueden buscar con CONTROL+F) y cambiamos los números según las intenciones que tengamos para nuestro blog. Fíjense que siempre width nos va a indicar el ancho, ya se de los post, de la columna principal o el ancho total. Como ya guardaron su plantilla, pueden ir probando y viendo como queda usando VISTA PREVIA.
#outer-wrapper {
width:740px;<-----------------Ancho Total
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
#main-wrap1 {
width:485px; <---------------Ancho de los Post
float:$startSide;
background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
#sidebar-wrap {
width:240px; <----------------Ancho de
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
Bien, espero haberles sido útil. Si tienen alguna duda, no duden en escribirme. Saludos.
1º) Entrar en la página de Sono Webs, la dirección es http://www.sonowebs.com/
2º) Clickear en el botón del menú superior que dice Plantilla Bloger
3º) Seleccionar el formato de los reproductores y de la palabra Escuchar, que más nos guste. Definir la alineación y si queremos vincularla a algún Feed (este apartado puede quedar vacío).
4º) Clickear en el botón OBTENER CÓDIGO. Nos redirecciona a otra ventana donde debemos seguir las instrucciones.
ANTES DE SEGUIR, UN TRUCO: Las instrucciones nos dicen que debemos encontrar un elemento en nuestra plantilla HTLM.La mejor forma es clickeando CONTROL + F. Debajo de nuestra ventana se abrirá una barra que dice ENCONTRAR. Copiamos lo que queremos encontrar en el espacio en blanco, y automáticamente lo encuentra. Bien, ahora, sigamos con las instrucciones…
5º) Volvemos a la página de SonoWeb que teníamos abierta. Seleccionamos o pintamos con el mouse todo el código que nos generaron, con el botón derecho elegimos COPIAR / también podemos ir a EDICION y elegimos COPIAR.
6º) Nos paramos antes de la cadena que debíamos encontrar, y con el botón derecho del mouse elegimos PEGAR / o podemos ir a EDICIÓN y elegimos PEGAR.
Si tienen alguna duda, no dude en comentarla.
.