Highslide en blogger

Actualizado el script que estuve utilizando original de Wordpress llamado Highslide Js adaptado a Blogger, la verdad es que el resultado no me desagrada así he pensado en compartir el truco por si alguien lo quiere utilizar, es todo suyo, a continuación explicaré lo más resumido posible los pasos, puede parecer algo complicado al principio pero sólo es cuestión de jugar con la plantilla.

Primero del todo ponemos este código después de </head> o bien debajo de de ]]></b:skin> vamos probando ya que un poco más arriba o un poco más abajo la porción de código debe ir ahí o arriba de (sin la barra baja].

<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>

<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;

hs.isUnobtrusiveAnchor = function(el) {

if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}

function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}

//]]>

</script>

Una vez colocado el .Js (Javascript) en la plantilla deberemos colocar en el post el html necesario que a continuación explicaré. Estaría bien subir por lo menos archivos tipo imagen (gif, png, etc) a un sitio donde alojar imágenes. Para no hacer Hotlinking lo que es igual a robo de transferencia o ancho de banda y por supuesto el archivo con extension .js (http://getlostpodcast.info/highslide/highslide.js)

Esto sería una imagen simple:

Esto sería el código para aplicar lo anteriormente citado:

<div style="text-align: center;"><a class="highslide" href="http://i47.tinypic.com/24w4y1g.gif" id="thumb1" onclick="return hs.expand(this)"><img alt="Highslide JS" src="http://i46.tinypic.com/2iktpxg.gif" title="Los Simpsons de Vacaciones"></a></div><br>

Esto sería una galería con 8 miniaturas:

Y esto el código de la anterior galería.

<div style="text-align: center">
<table border="0" cellpadding="0" cellspacing="10" style="margin-right: 40px; margin-top: -10px; text-align: center;"><tbody>
<tr align="center"><td>
<a class="highslide" href="http://i48.tinypic.com/ou1dhx.jpg" id="shashin_thumb_link_1" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_1" src="http://i48.tinypic.com/309sbb7.jpg" style="height: 140px; width: 140px;" title="" /></a></div>
</td><td>
<a class="highslide" href="http://i47.tinypic.com/qobrky.jpg" id="shashin_thumb_link_2" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_2" src="http://i48.tinypic.com/9ve4ug.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i49.tinypic.com/volyyu.jpg" id="shashin_thumb_link_3" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_3" src="http://i48.tinypic.com/20t0wtu.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i46.tinypic.com/jj9xck.jpg" id="shashin_thumb_link_4" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_4" src="http://i45.tinypic.com/mwxp4i.jpg" style="height: 140px; width: 140px;" title="" /></a></td></tr>
<tr align="center"><td>
<a class="highslide" href="http://i50.tinypic.com/2a0nfxe.jpg" id="shashin_thumb_link_5" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_5" src="http://i46.tinypic.com/9um8t4.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/106ij9c.jpg" id="shashin_thumb_link_6" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_6" src="http://i48.tinypic.com/6qvgj9.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide " href="http://i50.tinypic.com/v79n4o.jpg" id="shashin_thumb_link_7" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_7" src="http://i48.tinypic.com/2prb9d3.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td><td>
<a class="highslide" href="http://i45.tinypic.com/qsv8ua.jpg" id="shashin_thumb_link_8" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group23' })"><img id="shashin_thumb_image_8" src="http://i49.tinypic.com/21digch.jpg" style="height: 140px; width: 140px;" title="" /></a>
</td></tr>
</tbody></table>
<script type="text/javascript">
addHSSlideshow('group23');
</script>
</div>

Más información sobre cómo aplicar Highslide en el tutorial de la misma página, eso si si quieres poner una galería cómo no uses (ya se que es un poco largo) el código que aquí os he mostrado no creo que lo consigas ya que en Blogger es otra historia, estuve varios días dandole vueltas y si no se hace así a lo engorroso no hay manera. Espero haber sido lo más claro posible, si tenéis alguna duda, me lo decís en los comentarios y veré en que os puedo ayudar, también tenéis más ejemplos en el tutorial de la página oficial.

Las WebQuest como Objetos Digitales de Aprendizaje

Las WebQuest constituyen interesantes herramientas de aprendizaje basadas en una metodología de investigación guiada en Internet y en las que se proporcionan recursos para la investigación a realizar.

Pero, entre las dificultades que encontramos al diseñarlas y ponerlas en Internet, tenemos:

• Dependencia del medio en el que están insertas al estar diseñadas para una web o gestor de WebQuest concreto.
• Necesidad de manejarse con lenguajes como HTML, XHTML, CSS,... o de herramientas puntuales de gestión de contenidos en la red.
• Falta de estandarización del contenido realizado.

Sin embargo, si elaboramos las WebQuest manteniendo su filosofía y metodología, pero como Objetos Digitales de Aprendizaje, con una herramienta de creación de estos Objetos como eXe Learning, resolveremos esa problemática consiguiendo:

• Independencia de la WebQuest respecto al medio en que se encuentre. Podrán estar en una web, en un curso de e-learning como un Objeto de Aprendizaje independiente y modular, en el ordenador del alumno o alumna cuando no se tiene conexión a Internet,...
• Elaborar las WebQuest con un editor como si fuera una herramienta más y sin necesidad de aprender lenguajes de programación web como HTML, XHTML, CSS,..., solamente el funcionamiento de esa aplicación.
• Estandarización con metadatos (el etiquetado) que facilitará el compartir estos recursos, encontrarlos en internet, clasificarlos, ordenarlos,...
• Compartir nuestras WebQuest fácilmente en repositorios de contenidos educativos basados en software libre como el proyecto Agrega, con licencias Creative Commons como Educ@conTIC, o en espacios como edulibre.info abierto a vuestras propuestas, experiencias y recursos.

Más información:

Sobre WebQuest:

• ¿Qué es una WebQuest?
• WebQuest, ideas básicas para empezar
• Sitio español de las WebQuest
• Ejemplos de WebQuest "clásicas" en Internet: Zona WebQuest del CRA Alta Ribagorza: Propuestas

Sobre Objetos Digitales de Aprendizaje:

• ¿Cómo crear Objetos Digitales de Aprendizaje?. Qué son y cómo crearlos.
• Objetos de aprendizaje y repositorios como soporte para e-ĺearning. En uno de sus capítulos encontrarás: Definición, Atributos de los Objetos de Aprendizaje, Reutilización de los Objetos de Aprendizaje, Metadatos, Normalización de datos,...
• Metadatos de los Objetos de Aprendizaje según el estándar LOM-ES. Es la catalogación de metadatos que emplea el proyecto Agrega.
• eXe Learning, un excelente y potente editor de Software libre para Objetos de Aprendizaje.

Si ya tienes instalado eXe Learning (si no lo tienes aquí lo explicamos para GNU/Linux-Ubuntu), quieres lanzarte a realizar una WebQuest con esta herramienta y no sabes por donde empezar, además de los enlaces incluidos puede serte útil este "índice" para WebQuests que, aunque no es el "ortodoxo" (por ejemplo, no utilizo los apartados Conclusión y Autores y añado el de Para profes), en mi experiencia con ellas me sirve:

• Introducción. Corta y motivadora.
• Tarea. Descripción muy breve de lo que se quiere conseguir al realizar la WebQuest
• Proceso. Sugerencia de los pasos a seguir para completar la tarea.
• Recursos. Fuentes de información. Pueden estar o no en Internet.
• Evaluación. Descripción de lo que se va a evaluar y de cómo se hará.
• Créditos y Referencias. Citamos de donde proceden nuestros materiales y recursos incluidos en la propia WebQuest.
• Para profes. Autoría, datos curriculares y metodológicos, sugerencias didácticas,...

Visto en: Craaltaribagorza.net

-----------------------------------------------------

Artículo original en edulibre.info

Aprendiendo CSS

Hoy vamos a tratar un poco el tema del CSS, sobre todo centrándonos en sus partes, os he puesto 3 ejemplos con imágenes, para que entendaís un poco mejor la estructura del cuerpo de la plantilla y saber donde va cada cosa.

Creo que nos hemos pasao Felipe!

se mueve en la esquina del blog

Como veis la estática está arriba, mientras que los fotogramas están abajo, la forma más fácil para no liarnos es coger el gif original darle el doble de alto más 3 píxeles de más, de jar la animada abajo y coger un fotograma (debe ser el primero o el último) estático, y ponerlo arriba, el de arriba hay que repetirlo en cada fotograma si no veremos una imágen parpadeante. Por último hay que buscar (normalmente en "Archivo") y "Exportar" en formato Gif. Nos quedaría cómo resultado final una imágendoble, una arriba inanimada y otra abajo animada, que finalmente se superponen o cambian al pasar el cursor del ratón.

Ahora en la parte técnica a la que aplicaremos el Html y Css a nuestro blog, en el que usaremos un efecto llamado Rollover. Cómo Css, (funciona tanto en Wordpress cómo en Blogger) sería esto, creando un div con el alto y ancho de la imágen inicial, o sea sin ser el doble de alto en píxeles.

Así que ANTES de:

]]></b:skin>

esto:

#mosca { width: 54px; height: 61px; position:fixed; bottom:0px; right:0px; }

Y el código Html con el enlace de la imagen mas las proporciones del alto y ancho (width y height) va Antes o Después de </head> según la plantilla.

<a href='#' title='¡Arriba!'><div id='mosca' onmouseout='this.style.backgroundPosition="right top";' onmouseover='this.style.backgroundPosition="right bottom";' style='width: 54px; height: 61px; background: transparent url(http://tu_imagen.gif) no-repeat right top;'></div></a>

Con esto lograríamos mostrar en el blog, una imágen estática, que al pasar el puntero del ratón por encima se vuelve animada, eso es todo,espero no haberme extendido mucho y que a alguien le sea útil.

Este enlace, en la zona píxeles de Pixinspace, está Loomax la imagen que había antes, aunque ya la cambié :D

Efecto Rollover en las imágenes

Algo que me ha llamado mucho la atención es el uso en algunos blogs del mencionado efecto rollover en las imagenes que consiste en que al pasar el puntero del ratón por encima éstas cambien. :cool: Sólo tenemos que añadir unas lineas a la hoja de estilos (CSS). Sería algo cómo esto antes de:

]]></b:skin>

añadimos esto:

.rollover a { background-color: #FFF; display: block; height: valorpx; /* la altura de la imagen */ margin: 0 auto; width: valorpx; /* el ancho de la imagen */ } .rollover a:hover { } .rollover a:hover img { background: transparent; visibility: hidden; }

Después sólo es cuestión de añadir los enlaces de las imagenes a esta pequeña porción de codigo Html para añadir ya sea en nuestros posts, botones, etc.

<img src="URL_laImagen" onmouseover="this.src = 'URL_segundaImagen';" onmouseout="this.src = 'URL_primeraImagen';" />

El resultado sería algo así

Mas información en Vagabundia