Ejercicio 1: Crear un blog

Para crear un blog utilizando el nombre de usuario y la contraseña que te hemos ofrecido solo tendrás que seguir los siguientes pasos:

1. Accede a la cuenta creada introduciendo los datos: nombre de usuario: cursoticd y contraseña: +++++ (la que te hemos dado). Entrarás en el escritorio o zona de gestión donde estarán los blogs que se han creado con ese usuario y desde donde se podrán gestionar.


2. Si ya has entrado en el blog y ya te has validado logandote en "Acceder", es decir ya aparece el nombre de usuario en la parte superior derecha, entonces tendrás que pulsar en "Mi cuenta" y buscarás en mis productos: blogger.


3. Buscar la pestaña: Crear nuevo blog.

4. Ponerle un título.

5. Elegir una dirección y comprobar su disponibilidad.


6. Escribir el código de seguridad o la validación de la palabra aleatoria.


7. Continuar.


8. Elegir una plantilla.


9. Comenzar a publicar creando un post, noticia o entrada.

Ejercicio 2: Configurar el aspecto de tu blog

Al crear un blog por defecto y utilizar una de las plantillas que nos ofrecen nos encontraremos con que algunas de los gadgets u opciones que nos aparecen no nos interesan y en cambio echamos de menos otros que no vemos por ningún sitio. Por eso es importante personalizar el blog y para ello proponemos el siguiente ejercicio:

1. Una vez que estás validado en el blog se mapeará en la parte superior derecha una pestaña que dice personalizar.
2. Nos aparecerá un menú con varias pestañas, nos fijaremos en la de Diseño y en la misma podremos cambiar varias opciones: los elementos de la página; fuentes y colores; edición HTML y Seleccionar plantilla nueva.
3. Escogeremos la opción: Diseño --> Elementos de la página y se abrirá un observaremos los distintas áreas en las que está dividido el blog. Si escogemos la opción Editar que aparece en la parte inferior de cada una podremos configurar y cambiar algunas cosas del aspecto de dicha zona.
4. En el menú lateral aparece la opción de Añadir un gadget que nos permitirá desplegar un listado en el que podremos elegir el que más nos interese para incluir en el blog.
5. Elegiremos el de texto y una vez abierto rellenaremos los campos. Una vez finalizado lo guardamos. Si pulsamos sobre el área recién creada observaremos que la podemos desplazar a distintos lugares de la pantalla. La colocaremos en la parte superior debajo del título y extendiéndola por encima de la barra lateral.
6. Luego añadiremos otro gadget y en el menú elegiremos: Lista de enlaces. Aparecerá una pantalla que se llama: Configurar lista de enlaces. Pondremos un título a la zona de enlaces, podremos controlar en número de enlaces que se visionan y el tipo de criterio para ordenarlos. Escribimos la URL y le pondremos un nombre para localizarla. Si vamos a poner más enlaces escogeremos la opción: añadir enlace y si ya hemos terminado escogeremos guardar.
7. Ahora vamos a eliminar aquellas zonas que no nos interesa que se vean. En el ejercicio eliminaremos la zona de seguidores, archivo del blog y datos personales. Para ello pulsaremos sobre editar y luego eliminar.
8. Te proponemos ahora configurar el cuerpo donde se visionarán las entradas que vamos posteando en el blog. Para ello editamos la zona de entradas del blog y en ella vamos eligiendo aquellos aspectos que nos interesa que se vean en nuestras noticias.
9. Por último podemos cambiar el aspecto de nuestro blog cambiando la plantilla. Para ello elegiremos la pestaña: Seleccionar plantilla nueva y elegiremos una que nos guste, haremos una vista previa para observar que no se estropea nada y cuando encontremos una que nos gusta guardamos.

Configurar un blog

View more OpenOffice presentations from cursoticd.

Ejercicio 3: Crear una nueva entrada

Empezar a publicar post o entradas en el blog es muy sencillo. Te proponemos la siguiente práctica:

1. Tan solo tendrás que buscar nueva entrada y te aparecerá una pantalla tipo procesador de texto en el que podrás comenzar a escribir. En esta pantalla tenemos dos formas de escribir en vista "Redactar" en la que estamos viendo como queda en la pantalla y en vista "Edición de HTML" que nos permite interpretar código html y que resulta imprescindible para embeber, es decir incrustar código que nos es dado en éste lenguaje. Utilizaremos la vista Redactar y comienza a escribir el texto.
2. La barra de herramientas nos permite cambiar el tipo y el tamaño de la fuente, negrita, cursiva y elegir el color. Formatear el texto probando las diferentes herramientas.
3. También podemos insertar un hipervínculo seleccionando el texto o la imagen y pulsando sobre enlace. Selecciona alguna palabra del texto que has escrito y pulsa sobre enlace para insertar un hipervínculo a una página de internet.
4. Ahora vamos a introducir una imagen. Para ello pulsa sobre la fotito de la barra de herramientas y se desplegará un menú donde se podrá buscar la imagen en nuestro ordenador a través de Examinar o añadir una imagen desde un servido tipo Flickr añadiendo la URL. Elegiremos un diseño y un tamaño y luego pulsamos sobre "subir imagen". Cada vez que subimos una imagen nos descoloca el texto y la pone en la parte superior, por lo que es probable que tengamos que colocar todo el texto y la imagen en el lugar correspondiente:
5. Añadiremos un vídeo pulsando sobre el iconito de la película. Lo buscaremos en nuestro ordenador y le pondremos un título, luego pulsamos sobre subir vídeo.

Ejercicio 4: Subir una presentación a SlideShare y embeberla en el blog

En el siguiente ejercicio proponemos el utilizar SlideShare para subir una presentación en PowerPoint o Impress para luego embeberla en la web. Si pulsas sobre la imagen podrás ver un tutorial en el que se muestra como se ha subido un archivo a la zona del curso. El nombre de usuario y la contraseña para validarte en slideshare son los mismos que hemos empleado para validarnos en el blog.

1. Selecciona la presentación que quieres embeber en el blog (Impress, PowerPoint,...).
2. Abre slideshare y logeate introduciendo el nombre de usuario y contraseña que te hemos facilitado en el curso.
3. En la barra superior selecciona Upload.
4. En la opción Bulk upload your files seleccionar la opción Browse and select files...
5. Seleccionar el archivo que queremos compartir
6. Esperar un rato a que suba el archivo (depende de la conexión), cuando esté subida aparecerá un menú para rellenar los datos que aparecerán con la misma: Título; tags (palabras clave para localizar la presentación), descripción, categoría y privacidad. Al tener esto le damos a publish.
7. Luego regresamos a My Slidespace y esperamos a que convierta la presentación al formato flash.
8. Cuando está subida se visualiza la primera pantalla, la seleccionamos haciendo doble clic sobre ella.
9. Al hacerla grande en la parte derecha veremos un recuadro en el que se ve nuestro usuario y el texto Embeb. A la derecha se ve el código que tenemos que copiar para incrustarlo en el blog. Hacemos doble clic sobre el código y con el botón derecho copiar (Ctrl+C).
10. Abrimos o localizamos el blog donde queremos publicar. Nueva entrada, ponemos un título, cambiamos la forma de verlo de Redactar a Edición de HTML y pegamos el código que habíamos copiado.
11. Publicamos la entrada.
12. Vemos el resultado.

Para visualizar el flash haz clic sobre la imagen o con el botón derecho seleccionar abrir en una nueva pestaña:

Ejercicio 5: Incluir un enlace a un recurso de la web

Vamos a presentar un enlace a un recurso con el que nos interesa que trabajen nuestros alumnos:

1. Selecciona el recurso en la web. Ejemplo: http://www.thatquiz.org/es/
2. Captura la pantalla para incluir la imagen o utiliza un hipervínculo (lo hacemos seleccionando el texto y pulsando sobre el icono de enlace de la barra de herramientas). Para capturar la pantalla pulsa la tecla "Impr Pt" del teclado.
3. Pega la imagen capturada en un programa como Paint; Power Poitn; Impress. Luego recortala y cuando la tengas preparada la guardas en tu ordenador.
4. Escribe en la entrada del blog la explicación de la tarea que quieres que el alumno realice con el recurso que has seleccionado.
5. Inserta la imagen en la noticia como hemos practicado anteriormente.
6. Crea un hipervínculo mediante el icono enlace desde la imagen a la dirección web del recurso.

Ejercicio 6: Incluir un e-book realizado en Issuu

Vamos a integrar en nuestro blog un libro electrónico creado con Issuu:

1. Crea un documento de texto con imágenes o dibujos utilizando un procesador de texto o un programa de presentaciones.
2. Trata de guardar el documento en formato .pdf utilizando directamente el programa (si se utiliza google docs o zoho se hace de forma sencilla) o utilizando un programa como Primo PDF que te permite convertir a este formato al imprimir el documento (en lugar de seleccionar una impresora se busca imprimir con "Primo pdf").
3. Abre Issuu y logeate (Log in) con el nombre del correo electrónico y contraseña que te hemos dado o create uno personalizado.
4. Al entrar en nuestra zona hacemos click sobre "Upload document".
5. En el botón "Brouse" buscamos el archivo en nuestro ordenador.
6. Cubrimos los datos que nos solicita la ficha y luego "Upload file".
7. Esperar mientras se sube el documento.
8. Buscar sobre la biblioteca el libro que acabamos de crear y pulsar sobre él para verlo a pantalla completa "open".
9. Lo visualizamos y en la parte superior buscamos la pestaña "Embed". Al pulsarla se abre una pantalla en la que elegiremos en donde lo quremos incrustar. Nosotros seleccionaremos blogger y copiaremos el código "embed code".
10. Luego pegaremos el código en nuestra noticia cambiando a la visión "Edición de HTML".
    

Open publication - Free publishing - More teconologia

Practicando

Insertar un JClic en un blog

Para introducir un JClic en nuestro blog y que sea interactivo desde el mismo, deberemos seguir el siguiente proceso. Es probable que si no utilizamos el Internet Explorer para seleccionar el enlace del applet del JClic (utilizando el Firefox bajo Windows nos puede dar problema) no nos funcione. Por tanto desde el Explorer vamos a la web de JClic, y buscamos una actividad que nos interese utilizando el formulario de búsqueda. Al seleccionar una actividad utilizando el buscador aparece una pantalla con el título, una imagen, los autores y en la parte inferior de la pantalla varios enlaces para descargarlo o visualizarlo como applet. El resto del proceso lo podemos hacer desde el navegador de Mozilla Firefox, Google Chrome o el que nos guste más.

Al hacer la selección de visualizarlo como applet aparece una ventana con la actividad en funcionamiento. En la parte superior, debajo de la barra del título se ve un icono del JClic seguido de una dirección o URL, que es la que hay que copiar dentro de la etiqueta IFRAME para poder incrustarla en el blog.

Deberemos tener en cuenta que estas actividades no se verán si el ordenador no tiene instalada la máquina virtual Java y que para introducir el código debe de estar en HTML. También podremos modificar el tamaño de nuestro JClic cambiando el código (width="560" o height="400")

Ejemplo:

Nube de tag

Conocía una forma de hacer nube de tag, pero me doy cuenta que que las TICD no esperan por nadie. Les dejo en enlace por si les interesa. Es muy sencillo
http://www.tagcloud-generator.com/generator.php#anker

Eliminar barra de navegación de Blogger

Hemos encontrado un código que nos permite hacerlo, aunque tendríamos que trabajar en el html de la plantilla. El origen de la información está sacada del blog Kebraderos de Kabeza InformátiKos

El código lo hemos probado y funciona. El inconveniente es que, al perder la barra de navegación, para validarse habría que entrar en bloger y en el panerl de control, pues no podríamos hacerlo desde el própio blog.

En nuestro blog el código que empleamos ha sido el primero y funciona correctamente.

Pasos:
Para suprimir definitivamente la Barra de Navegación (Navigator Bar) de Blogger basta con modificar la plantilla HTML y poner al principio de la página (por ejemplo justo debajo de ):
1. Entrar en la plantilla --> Diseño --> Edición de HTML



2. Pulsar F3 para iniciar el buscador de código y escribir el término de búsqueda = <body>



3. Justo debajo de la etiqueta <body> se pegaría el código adjunto:




<script language="javascript">
document.getElementById("navbar-iframe").parentNode.
removeChild(document.getElementById("navbar-iframe"));
document.getElementById("space-for-ie").parentNode.
removeChild(document.getElementById("space-for-ie"));
</script>





Nota: Vale para tanto para Internet Explorer como para Firefox, Mozilla, etc., pero sólo para la nueva plantilla de Blogger.

Para la plantilla tradicional debemos eliminar el espacio "extra" que queda arriba (por lo menos en Firefox) así que añadimos dentro del siguiente

después de <body>:


<div id="wrapper">

<script language="javascript">

         document.getElementById("wrapper").style.marginTop="0px";

</script>



Nota: El id del div puede variar. Debemos cambiar "wrapper" por el id que aparezca en cada plantilla concreta (wrapper, wrap, header...).

TAG CLOUD GENERATOR

Hola soy Salva. Conocía una forma de hacer nubes de tag, pero veo que la TICD no esperan por nadie. La nube de tags en flash está muy chula.

Les dejo este enlace por si les interesa. Es muy facilito.
http://www.tagcloud-generator.com/generator.php#anker

Flikr
back roller classic
Youtube
DoInk
Pixton
Slideshare
Issuu
Scrib
Bubbl.us

Blogumus: una nube de etiqueta animadas en formato flash para Blogger!

"Blogumus" es un widget basado flash de una nube de etiquetas que utiliza secuencias de comandos para convertir el plugin Cumulus de Roy Tanck para WordPress. El resultado es el widget que se puede ver en acción en la parte derecha superior de este blog. Desplaza el mouse sobre el objeto Flash para ver la animación comenzar. El siguiente texto explica cómo se puede agregar Blogumus a su propio diseño Blogger con facilidad, y está sacado de la traducción original en inglés de la dirección http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

Cómo funciona:

Este widget utiliza una combinación de animación de JavaScript y Flash para analizar y mostrar las etiquetas del blog. Una vez instalado en su plantilla, debería funcionar sin precisar ajustes adicionales, aunque por supuesto quizás prefiera cambiar las variables de color y tamaño si es necesario: También podrá mover el widget de nube de etiquetas a través de elementos de tu diseño si lo prefiere en una ubicación de diseño diferente.

Para ver Blogumus en acción, Flash y JavaScript deben estar instalado y habilitado para su navegador de internet. Sin embargo, el degradado relativo de color, y los enlaces de las etiquetas será seleccionables (aunque no animados) para aquellos que no utilice JavaScript de Flash (incluidas losmotor de búsqueda).

Cómo instalar Blogumus en su diseño de Blogger

Es sorprendentemente sencillo instalar Blogumus en su diseño de Blogger. Sólo debería necesitar copiar y pegar una sección de código a su plantilla de Blogger, aunque para cualquier ajuste para el estilo de visualización se requieren manual edición.

Aquí son los pasos necesarios para instalar Blogumus en su diseño de Blogger: ir a Diseño > Editar HTML en tu submenú de Blogger y búsqueda de la línea siguiente (o similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>


Inmediatamente después de esta línea, pega el siguiente código:


<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


A continuación, vista previa de su plantilla. Si lo ha instalado correctamente, debe ver la nube de etiquetas aparecer en tu barra lateral. A continuación, eres libre de guardar la plantilla, editar los colores y las dimensiones como desee o moverlo a una ubicación diferente. Eso es todo!

No es seguro de que esta instalación permita caracteres especiales en las etiquetas (sólo se apoyado en la actualidad caracteres latinos). Si lo hace puede experimentar problemas con la visualización, como ocurre cuando añade comillas a las etiquetas.

Personalizar Blogumus

En esta instalación por defecto, Blogumus incluye las siguientes variables predefinidas:

•Ancho se establece en 240px
•Altura se establece en 300px;
•Color de fondo es blanco
•Prueba de color es gris
•Tamaño de fuente es "12"

Si prefiere hacer el widget más amplio, más corto, cambiar el esquema de color, etc., deberá hacerlo modificando diversas partes del código modificando las correspondientes líneas de la secuencia de comandos del código anterior:

Modificando anchura y altura: las variables para la anchura y altura se encuentran en esta línea de la secuencia de comandos:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

El ancho (actualmente 240) está resaltado en rojo, mientras que la altura (300px predeterminado) está resaltada en azul. Estos valores numéricos especifican el ancho y alto en píxeles, por lo que se pueden modificar estos a los que se prefieran.

Cambiar el color de fondo: puede cambiar el color de fondo del blanco a cualquier otro color alterarando el valor hexadecimal de la misma línea:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Por ejemplo, si prefiere un fondo rojo brillante, usted puede reemplazar #ffffff con #ff0000.

Cambiar el color del texto: de forma predeterminada, el texto que se establece para mostrar como gris oscuro (valor hexadecimal #333333). Se puede modificar esta variable en la siguiente línea:

so.addVariable("tcolor", "0x333333");

Tenga en cuenta que "tcolor" es una variable de Flash y no incluye el símbolo de hash habitual de códigos de colores hexadecimal. Asegúrese de reemplazar sólo los números!

Ajustar el tamaño de fuente: El tamaño de fuente máximo de las etiquetas se especifica en esta línea:


so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");


Se puede modificar esto para garantizar que las etiquetas se muestran en una fuente más grande o más pequeña si lo prefiere cambiando "12" a un número mayor o menor respectivamente.

Aconsejamos antes de realizar estos cambios, usted previsualizar el widget y esté seguro de que su nueva opción de color, dimensiones y antecedentes son adecuados para sus necesidades.

Para que Blogumus se muestre correctamente en su plantilla, necesita tener Flash Player 7 o superior. Puede descargar el plug-in más reciente de Flash Player para su navegador de Adobe.

Credits, support and requirements

Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by http://www.bloggerbuster.com.

Red Social Ning : Maestros en línea

Otra aportación y a la vez invitación a todos los componentes de este curso.
Esta red social la creé en principio como lugar de encuentro y banco de recursos para los compañeros de mi colegio; poco a poco ha ido creciendo y extendiéndose. Ahora mismo cuenta con unos 70 miembros cuyas aportaciones son muy valiosas.
Invito a todo el que quiera a unirse, a entrar en los diferentes grupos, a aportar y compartir y también a pasar buenos ratos juntos. Puede que, incluso, te encuentres con algún conocido.
ENLACE A MAESTROS EN LÍNEA

GoAnimate: Una herramienta que les gusta a l@s chic@s

GoAnimate.com: A normal day in 3ºB by aseret41


Like it? Create your own at GoAnimate.com. It's free and fun!
Mi primera aportación:
Esta pequeña, y un poco ridícula, animación la hice para mis alumnos de 3ºB. Creo que los alumnos mayores disfrutarían mucho haciendo las suyas propias y es una buena herramienta para que demuestren su creatividad.

Jugamos con el ratón