Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

lunes, 11 de marzo de 2013

La Hora del Planeta: apaga tu sitio, enciende el planeta

Cómo instalar el plugin para apagar el blog/web durante La Hora del Planeta

Sábado 28 de Marzo 20:30 - 21:30h
¿Qué es?
La Hora del Planeta es un gesto simbólico que se celebra en casi todos los países del mundo, y que consiste en apagar la luz durante los 60 minutos de un día del año, como medida de ahorro energético en beneficio de la salud de nuestro planeta.

El evento ocurrirá el próximo sábado 28 de marzo, de 20:30 a 21:30 horas. Puedes encontrar más información en la web española, http://www.horadelplaneta.es y en la web internacional, http://earthhour.org/node?direct=true.

Nosotros, además de apagar la luz en nuestra casa, apagaremos simbólicamente nuestro sitio en Internet para sumarnos a este gesto. Para esto he diseñado una utilidad que simula el apagado, impidiendo el acceso a cualquier enlace de la página durante los 60 minutos del día señalado. A continuación explico como instalarla.

La utilidad ha de ser insertada en un lugar del blog o web que se ejecute siempre, independientemente de la página solicitada, por ejemplo si lo tuyo es un blog, lo más práctico es que lo instales como un gadget HTML, tal y como puedes ver en la columna de la izquierda en este blog.

Añade el gadget:


Y añade estas líneas de código al gadget:
<div style="width:269px;background-color:white;padding-bottom:1px;">
<div style="width:269px;color:#c4d7e8;font-weight:bold;background-color:black;text-align:center;padding-top:2px;">Sábado 28 de Marzo 20:30 - 21:30h</div>
<img style="width:269px;height:107px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHdAMWaAPqMXrd1mttaSqTi0KPJvco8bNK2BdwpBVDaUThgalYnaPfJCxLmZ0QJqYDYtSdUZWJyEe_rpBhBvVGQBePU2kha85Jn0cg48nGNoGaKBZDAXtjupB5YxKsz2bwD-P6DDP17c/s269/logo-H-Planeta.jpg" />
<ul style="margin-left:21px;margin-top:7px;font-size:0.9em;list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCADgSeYbbTUTOstrgyyFbj3CB0rYWy9a4N5FPE2a_Q7fLeAQX-SjbPCXqCeGsZdQhKYASR1bdCkke7bvH7HWQ3VghBwePFMRn9p6QW6Jd1IuOzVF9WixziRKSeuNI1YUCFKc9_EB4vw/s0/diamond_red.gif);">
<li style="margin-bottom:7px;"><a target="newhp" href="http://www.horadelplaneta.es/que-es">¿Qué es?</a></li>
<li style="margin-bottom:7px;">Este sitio se apagará simbólicamente durante La Hora del Planeta (<a href="javascript:;" onclick="FADEAR(60);">probar ahora durante 60 segundos</a>)</li>
<li><a href="http://bikertb-blog-howto.blogspot.com/2013/03/la-hora-del-planeta-apaga-tu-sitio.html">Instalar esto en mi sitio</a></li>
</ul>
</div>

<!-- Corrige la posición de objetos flash -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});
</script>

<!-- Bloquea el acceso al blog el 28 de marzo de 2015, desde las 20:30h a las 21:30h -->
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/hora-planeta-d.js' type='text/JavaScript'></script>

Y ya está, el gadget se mostrará igual que ves en este blog, y el día 28 de marzo de 2015, entre las 20:30 y las 21:30 horas, esta utilidad apagará tu blog/web de la forma que puedes ver en esta muestra: Probar durante 5 segundos

Si tu sitio es una web en lugar de un blog, y dispones de un área de gadgets o widgets, que aparezcan siempre independientemente de la página solicitada, también puedes añadir el código anterior en esa área.

Si no dispones de ese área de gadgets, puedes añadir el siguiente código a la cabecera html de la web. El código ha de situarse justo antes de la etiqueta </head>. Aunque en este caso no se verán la imágen de la utilidad ni los enlaces.

Añade estas líneas de código a la cebecera html de tu web sin gadgets:
<!-- Corrige la posición de objetos flash -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $("iframe").each(function(){
        var ifr_source = $(this).attr('src');
        var wmode = "wmode=transparent";
        if(ifr_source.indexOf('?') != -1) {
            var getQString = ifr_source.split('?');
            var oldString = getQString[1];
            var newString = getQString[0];
            $(this).attr('src',newString+'?'+wmode+'&'+oldString);
        }
        else $(this).attr('src',ifr_source+'?'+wmode);
    });
});
</script>

<!-- Bloquea el acceso al blog el 28 de marzo de 2015, desde las 20:30h a las 21:30h -->
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/hora-planeta-d.js' type='text/JavaScript'></script>
</head>

El día 28 de marzo de 2015, entre las 20:30 y las 21:30 horas, esta utilidad apagará tu blog/web de la forma que puedes ver en esta muestra: Probar durante 5 segundos

Pasada La Hora del Planeta, puedes eliminar el código de esta utilidad de la cabecera html de tu página.


sábado, 19 de enero de 2013

Mediaelement Player sobre Shadowbox

En este post mostraré como mejorar las prestaciones de Shadowbox configurándolo para presentar vídeos h.264 (MP4) controlados con Mediaelement.

Los vídeos correrán según las especificaciones del framework Mediaelement Player, en los navegadores con soporte HTML5, o que dispongan del plugin Flash o Silverlight, siempre que además soporten JavaScript, imprescindible además para hacer funcionar Shadowbox. Esto abarca a IE6+, FF, Safari, Chrome y algunos otros.

Aquí va todo lo necesario, librerías, código y configuración:

Puedes descargarte los ficheros necesarios de los sitios originales: [ Mediaelement ] [ Shadowbox ] [ jQuery ]

O alternativamente puesdes descargarte los ficheros que yo he usado: [ Mediaelement v2.01, Shadowbox v3.03, jQuery v1.8.3 ]

jueves, 13 de diciembre de 2012

Vídeo multiformato en Shadowbox

Escribí el script videox3.js para dar soporte de vídeo multiformato a Shadowbox, aunque funcionará igualmente con cualquier otro gestor de visualización.

El funcionamiento es sencillo: se busca en la página los enlaces de vídeo MP4, y si es preciso se cambian por enlaces FLV o WEBM, según el formato que entienda el navegador del usuario. Los enlaces quedarán modificados en el DOM nada más finalizar la carga de la página.

El script funcionará correctamente bajo las siguientes condiciones:

  • Los enlaces de vídeo contenidos en la página web deben apuntar a archivos mp4.
  • Los enlaces de vídeo que vayan a ser afectados por esta utilidad deberán estar marcados con name="videox3"
  • Se deben ofrecer tres archivos por cada video que vaya a ser tratado, en formatos FLV, MP4/H.264 y WEBM.
  • Los tres archivos de un mismo vídeo deberán estar en el mismo directorio del servidor.
  • Es necesario, además del soporte Javascript, uno de los plugins de los formatos de vídeo ofrecidos activo en el navegador, la librería jQuery y un script PluginDetect específico para detectar Flash y Quick Time, si algo de esto falla, los enlaces quedarán sin modificar y apuntando a los archivos MP4 originalmente codificados en la página.
  • 18-dic-2012 - Para la familia Mac se ofrece siempre y únicamente archivos MP4.
El script videox3.js:
$(document).ready(function() {
    var tags_v3 = document.getElementsByName("videox3"); // elementos name="videox3"
    var nr_tv3 = tags_v3.length;
    var link_v3, tit_tag, tag_img, src_img, src_img_txt, src_img_txt_arr, link_img, semienlacevideo;
    var testEl = document.createElement("video"), webm;
    var userAgent = window.navigator.userAgent.toLowerCase(), 
        FamiliaMac = /macintosh|iphone|ipod|ipad/.test( userAgent );
    for (i=0; i&lt;nr_tv3; i++) {
      link_v3 = tags_v3[i].getAttribute("href");     // enlace del video mp4
      semienlacevideo = link_v3.substring(0,link_v3.length-3);
      if (link_v3.match(/\.mp4$/i)) {
        tit_tag = tags_v3[i].getAttribute("title");  // título del vídeo
        // INI extraer enlace de la imagen:
        tag_img = tags_v3[i].innerHTML;
        if (tag_img.match(/&lt;img/i)) {
          src_img = tag_img.match(/src=[\"\"].*[\"\"]/i);
          src_img_txt = new String(src_img);
          src_img_txt_arr = src_img_txt.split(/[\"\"]+/);
          link_img = src_img_txt_arr[1];  // enlace a la tesela del vídeo
        } else {
          link_img = false;
        }
        // FIN extraer enlace de la imagen.
      }
      if (FamiliaMac) {
        // familia Macintosh, asigno video mp4
      } else if (PluginDetect.getVersion("Flash")) {
        // plugin flash activo
        tags_v3[i].href=semienlacevideo+"flv";
      } else if (PluginDetect.getVersion("QuickTime")) {
        // QT activo, video mp4
      } else if (webm = "" !== testEl.canPlayType("video/webm; codecs='vp8, vorbis'")) {
        // video webm/html5 soportado
        tags_v3[i].href=semienlacevideo+"webm";
      } else {
        // No hay videoplayer, devuelve la imagen si la hay.
        tags_v3[i].title="Plugins video?";
        if (link_img) {
          tags_v3[i].href=link_img;
        }
      }
    }
});
Llamar a videox3, jQuery y PluginDetect desde el head:
  <script src="http://dl.dropbox.com/micuenta/jquery-v1.8.3.js" />
  <script src='http://dl.dropbox.com/micuenta/PluginDetect_Flash_QuickTime.js' />
  <script src="http://dl.dropbox.com/micuenta/videox3.js" />
</head>
Ejemplos de enlaces a video en el body:
<body>
  <a name="videox3" href="http://dl.dropbox.com/micuenta/mivideo1.mp4">
    <img src="http://dl.dropbox.com/micuenta/mivideo1.png"/></a>
  <a name="videox3" href="http://dl.dropbox.com/micuenta/mivideo2.mp4">Mi video 2</a>
  <a name="videox3" href='http://dl.dropbox.com/micuenta/mivideo3.mp4'>
    <img src="http://dl.dropbox.com/micuenta/mivideo3.png"/></a>

Según el ejemplo, el resto de los archivos de vídeo deberán estar disponibles en:

  • http://dl.dropbox.com/micuenta/mivideo1.flv
  • http://dl.dropbox.com/micuenta/mivideo1.webm
  • http://dl.dropbox.com/micuenta/mivideo2.flv
  • http://dl.dropbox.com/micuenta/mivideo2.webm
  • http://dl.dropbox.com/micuenta/mivideo3.flv
  • http://dl.dropbox.com/micuenta/mivideo3.webm
Tienes los ficheros necesarios videox3.js, jQuery y PluginDetect en: videox3.zip O si quieres puedes usar la librería original jQuery cogiéndola de su web: http://jquery.com Y generar tu propio detector de plugins en PluginDetect: http://www.pinlady.net/PluginDetect/

jueves, 25 de octubre de 2012

Dewplayer vía DOM


Катюша
Расцветали яблони и груши,
Поплыли туманы над рекой;
Выходила на берег Катюша,
На высокий берег, на крутой.
div donde insertaremos el código:
<div id="Katyusha" style="position:absolute;top:0px;left:0px;"></div>
Script en cualquier parte de la página:
<script type="text/javascript" language="JavaScript">
//<![CDATA[
  var encender = 0;
  var enlace1 = document.URL;
  var enlace2 = window.location.href;
// Autoplay si estamos en la página concreta:
  if ( (enlace1 || enlace2) == 'http://bikertb.blogspot.com/2012/09/Katyusha.html' ) { encender=1; }
  var codigoPlayer = "<object id='myObjID' width='200' height='20' name='dewplayer' type='application/x-shockwave-flash' data='http://www.dropbox.com/dewplayer.swf'><param name='wmode' value='transparent'><param name='flashvars' value='mp3=http://www.dropbox.com/Katyusha.mp3&autostart="+encender+"' /></object>"; 
// Modifico el código si el navegador es Internet Explorer:
  if ( /*@cc_on!@*/false ) {
      codigoPlayer = "<object id='myObjID' width='200' height='20' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'><param name='movie' value='http://www.dropbox.com/dewplayer.swf'><param name='wmode' value='transparent'><param name='flashvars' value='mp3=http://www.dropbox.com/Katyusha.mp3&autostart="+encender+"' /></object>"; }
// Inserto el código:
  document.getElementById("Katyusha").innerHTML = codigoPlayer;
//]]
</script>
Nota: A Internet Explorer (v9.0.10) no le gusta que construya el nodo <object> en el DOM elemento a elemento, por eso utilizo innerHTML para insertar el código en bloque.

miércoles, 24 de octubre de 2012

Detector de plugins

plugins.js:
//This script detects the following:
//Flash
//Windows Media Player
//Java
//Shockwave
//RealPlayer
//QuickTime
//Acrobat Reader
//SVG Viewer

var agt=navigator.userAgent.toLowerCase();
var ie  = (agt.indexOf("msie") != -1);
var ns  = (navigator.appName.indexOf("Netscape") != -1);
var win = ((agt.indexOf("win")!=-1) || (agt.indexOf("32bit")!=-1));
var mac = (agt.indexOf("mac")!=-1);

if (ie && win) { pluginlist = detectIE("Adobe.SVGCtl","SVG Viewer") + detectIE("SWCtl.SWCtl.1","Shockwave Director") + detectIE("ShockwaveFlash.ShockwaveFlash.1","Shockwave Flash") + detectIE("rmocx.RealPlayer G2 Control.1","RealPlayer") + detectIE("QuickTimeCheckObject.QuickTimeCheck.1","QuickTime") + detectIE("MediaPlayer.MediaPlayer.1","Windows Media Player") + detectIE("PDF.PdfCtrl.5","Acrobat Reader"); }
if (ns || !win) {
  nse = ""; for (var i=0;i<navigator.mimeTypes.length;i++) nse += navigator.mimeTypes[i].type.toLowerCase();
  pluginlist = detectNS("image/svg-xml","SVG Viewer") + detectNS("application/x-director","Shockwave Director") + detectNS("application/x-shockwave-flash","Shockwave Flash") + detectNS("audio/x-pn-realaudio-plugin","RealPlayer") + detectNS("video/quicktime","QuickTime") + detectNS("application/x-mplayer2","Windows Media Player") + detectNS("application/pdf","Acrobat Reader");
}

function detectIE(ClassID,name) { result = false; document.write('<SCRIPT LANGUAGE=VBScript>\n on error resume next \n result = IsObject(CreateObject("' + ClassID + '"))</SCRIPT>\n'); if (result) return name+','; else return ''; }
function detectNS(ClassID,name) { n = ""; if (nse.indexOf(ClassID) != -1) if (navigator.mimeTypes[ClassID].enabledPlugin != null) n = name+","; return n; }

pluginlist += navigator.javaEnabled() ? "Java," : "";
if (pluginlist.length > 0) pluginlist = pluginlist.substring(0,pluginlist.length-1);

//SAMPLE USAGE- detect "Flash"
//<script language="javascript" type="text/javascript" src="plugins.js" ></script>
//<script language="javascript" type="text/javascript">
//if (pluginlist.indexOf("Flash")!=-1) {
//document.write("You have flash installed"); }
//</script>

lunes, 19 de septiembre de 2011

Zoom de las imágenes v2


15 de octubre de 2011. Actualizo este post para indicar que Google ha incluido Lightbox activado por defecto para todos sus usuarios Blogger. Esto interfiere con Shadowbox, salvo que lo desactivemos en el apartado de configuración de nuestro blog:


Este es el segundo método que he usado para lograr el zoom de las imágenes, en los posts publicados a partir de julio de 2011, mientras que la utilidad BrightBox sigue funcionando de forma complementaria en los posts más antiguos. Ahora uso el JavaScript Shadowbox.js 3.0.3 de Michael J. I. Jackson ganando en opciones y estabilidad.

Shadowbox viene con unos cuantos archivos que he hackeado, primero por ser necesario para hacerlo funcionar en blogger, y segundo para activar un par utilidades.

Los archivos de Shadowbox que estoy usando son: la hoja de estilo shadowbox.css, el JavaScript shadowbox.js y las imágenes de control de los zoom loading.gif, close.png, next.png, previus.png, play.png y pause.png. También utilizo la librería json2.js para el hack que explico abajo. Todos ellos deben alojarse en un servidor externo a blogger, yo uso Google sites. Pero antes aplicaremos los hacks.
Es necesario indicar el path absoluto de las imágenes de control de los zoom, indicadas en el archivo shadowbox.css de hojas de estilo, para que Shadowbox funcione en Blogger. Añadir el resto de la URL donde están alojadas las imágenes, en rojo en el ejemplo siguiente:
#sb-loading-inner span{background:url(http://sites.google.com/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
... ... ...
#sb-nav-close{background-image:url(http://sites.google.com/shadowbox/close.png);}
#sb-nav-next{background-image:url(http://sites.google.com/shadowbox/next.png);}
#sb-nav-previous{background-image:url(http://sites.google.com/shadowbox/previous.png);}
#sb-nav-play{background-image:url(http://sites.google.com/shadowbox/play.png);}
#sb-nav-pause{background-image:url(http://sites.google.com/shadowbox/pause.png);}
Este hack de Manfersite permite ajustar las opciones de Shadowbox de forma individual en cada una de las imágenes, objetos en realidad. Añadir el siguiente código en rojo a shadowbox.js
S.applyOptions=function(options) {
lastOptions=apply({}, S.options);
if (typeof options=="string")
try {
options=JSON.parse(options);
}
catch(e) {
// not valid JSON
}

apply(S.options,options);
};
Para asegurar el funcionamiento del hack anterior en versiones de navegadores no muy recientes, es necesario añadir la librería json2.js al conjunto de archivos de Shadowbox.
Este hack (en rojo) al principio del archivo shadowbox.js protege el origen de Shadowbox haciendo que solo funcione si es llamado desde el blog BikerTB:
if(window.location.host!="bikertb.blogspot.com"){exit;}
/*
* Shadowbox.js, version 3.0.3
* http://shadowbox-js.com/
*
* Copyright 2007-2010, Michael J. I. Jackson
* Date: 2011-05-14 15:40:54 +0000
*/
(function(window,undefined){
var S={version:"3.0.3"};
var ua=navigator.userAgent.toLowerCase();
Hacks aplicados, ya podemos subir todos los archivos a un servidor, por ejemplo a Google Sites.
Ahora hay que llamar a los archivos, abajo señalados en rojo, desde la cabecera del blog. Además se pueden indicar varias opciones de funcionamiento, BikerTB tiene configuradas las siguientes, en azul:
<link href='http://sites.google.com/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/shadowbox/json2.js' type='text/javascript'></script>
<script src='http://sites.google.com/shadowbox/shadowbox.js' type='text/javascript'></script>

<script type='text/javascript'>
Shadowbox.init({

continuous: true,
// paso automático de imágenes
slideshowDelay: 4,
// intervalo del paso
overlayOpacity: 0.8
// opacidad del fondo oscuro
});
</script>

</head>
En BikerTB Shadowbox se usa de las siguientes formas:
Para hacer zoom de una imágen individual:
<a title="Título que presentará la imágen" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox" >
<img src="http://servidor.com/blog/imagenPequena.jpg" /></a>


Para hacer zoom de varias imágenes consecutivas en carrusel:
<a title="Título que presentará la imágen 1" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" >
<img src="http://servidor.com/blog/imagenPequena.jpg" /></a>
<a title="Título que presentará la imágen 2" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" >
<img src="http://servidor.com/blog/imagenPequena.jpg" /></a>


Zoom de una imágen que solo se verá al activar un carrusel de imágenes:
<a title="Título que presentará la imágen N" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" ></a>


Zoom de los mapas. Estos no se redimensionan, siendo necesario mover la imágen para verla completamente:
<a title="Mueva la imágen con el ratón para verla completamente" href="http://servidor.com/blog/imagenGrande.jpg"
rel='shadowbox; options={"handleOversize":"drag"}'
><img src="http://servidor.com/blog/imagenPequena.jpg" /></a>
Referencias: |Google Sites|Manfersite|Librería json2.js|Web Shadowbox.js|
Hardcopy de la web Shadowbox.js a 5-jul-2011: [Home][Download][Support][Usage][Options][API][FAQ][Forum]

sábado, 16 de abril de 2011

Los Mapas de Rutas de BikerTB


Este post está obsoleto, corresponde a la v2.x del API que Google decidió cerrar. Actualmente (10-feb-2014) se utiliza otro código compatible con la v3.x de API.

El mapa de rutas de BikerTB está construido con el API de Google Maps controlado con JavaScript. Google lo permite utilizar gratuitamente bajo determinadas condiciones de licencia que puedes leer al solicitar la API Key, siendo imprescindible para hacerlo funcionar en tu página. Para solicitar la API Key necesitas tener cuenta en Google.

Los tracks estan definidos en ficheros KML que deberemos alojar en algún servidor, por ejemplo en Google Sites. Y se cargan mediante formularios HTML.
Código necesario en la plantilla del blog:
<script type="text/javascript" src="http://www.google.com/jsapi?key=PON_TU_GOOGLE_MAPS_API_KEY_AQUI"></script>
<script type="text/javascript">
    google.load('maps', '2.160');
    var map;
    var geoXml;
    
    function initialize() {
      map = new GMap2(document.getElementById("map"));
// Define la Latitud, Longitud para el centro de tu mapa y el nivel de zoom en la siguiente línea:
      map.setCenter(new GLatLng(45.512654,-4.490452), 5);
// La siguiente línea opcional activa el plugin Earth:
      map.addMapType(G_SATELLITE_3D_MAP);
      map.addMapType(G_PHYSICAL_MAP);
      var mapui = map.getDefaultUI();
      map.setUI(mapui);
      map.setMapType(G_PHYSICAL_MAP);
    }
    
    function loadKml(url) {
      map.clearOverlays();
      geoXml = new GGeoXml(url);
      map.addOverlay(geoXml);
      geoXml.gotoDefaultViewport(map);
    }
</script></head>
<body onload="initialize()" onunload="GUnload">
Crea tus ficheros KML con cada una de tus rutas o grupo de ellas y enlázalas en un post o mejor en una página estática.
Este es el código necesario con los enlaces apuntando a ficheros KML donde estarán descritas las rutas a representar:
<!-- Botones para los mapas de grupo -->
<div style="float:left;"><form id="kmlurl-group" ACTION="#" NAME=EnGrupo>
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Centro.kmz'); return false;" value="Zona Madrid" />  
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Alicante.kmz'); return false;" value="Zona Alicante" />
  <input type="button" onclick="document.SoloUna.reset();
      loadKml('http://ENLACE_A_TU_SITE/Todos-Essex.kmz'); return false;" value="Zona Essex" /></form></div><!-- Lista desplegable para los tracks individuales -->
<div><form id="kmlurl" ACTION="#" NAME=SoloUna><SELECT  style="margin: 2px 0 0 15px;" NAME="ruta" ONCHANGE="loadKml(document.SoloUna.ruta.value); return false;">
    <OPTION VALUE="">Rutas individuales:</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/ADF-Marmota-Batan.kmz">IBP 94BC: ADF - Puentes Batán y Marmota</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/mutxavista-maigmo.kmz">IBP 91BC: Mutxavista - Balcó d'Alacant</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/DehesaMoncalvillo.kmz">IBP 77AA: La Dehesa de Moncalvillo</OPTION>
    <OPTION VALUE="http://ENLACE_A_TU_SITE/sifones-jarama.kmz">IBP 74AA: Por el CYII: Los sifones del Jarama</OPTION>
</SELECT></form></div>
<div id="map" class="map" style="height:800px"></div>

lunes, 27 de diciembre de 2010

Posts expandibles


Son los índices que aparecen al solicitar el listado de posts [LOG] o [CHK] en el menú superior del blog de BikerTB. Permiten una navegación más ágil, pudiendose además expandir y contraer una o varias de las entradas de dicho índice al hacer click en la marca [+/-]

Sustituir el siguiente código de la plantilla del blog:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
Por este otro:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<td width='40px'>
<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>
</td>

</b:if>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:else/>
<div class='post-body' expr:id='data:post.id' style='display:block'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>
</b:if>
Y añadir este pequeño JavaScript en la cabecera que hace expandirse y contraerse las entradas:
<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != &#39;none&#39;) {
post.style.display = &#39;none&#39;;
} else {
post.style.display = &#39;&#39;;
}
}
</script>

</head>
Si las entradas no se contraen/expanden es posible que falte alguna función. En este caso sustituir el JavaScript anterior por este otro:
<script type='text/javascript'>
// <![CDATA[
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");

if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}

var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
}
//]]>
</script>

</head>

sábado, 24 de abril de 2010

Aviso pop-up asociado a un post

¡ Zona hostil para manazas !


Modificar el código de la plantilla puede ser perjudicial para el funcionamiento correcto de tu blog. Sólo deberías continuar si estás seguro de lo que estás haciendo.


Código para generar un aviso pop-up asociado a un determinado post. Se inicia con CSS y el usuario lo hace desaparecer con un pequeño JavaScript, por lo tanto es indetectable por los sistemas de protección anti-pop-up de los navegadores.
Agregar el siguiente código CSS (en rojo) a la plantilla del blog:
<style id='page-skin-1' type='text/css'><!--
.black_overlay{
display: block;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: block;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 20%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

Agregar el siguiente código (en rojo) en el inicio del post:
<div id="light" class="white_content">¡ Zona hostil para manazas !<br />Modificar el código de la plantilla puede ser perjudicial para ... <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Cerrar aviso</a></div><br /><div id="fade" class="black_overlay"></div>

viernes, 23 de abril de 2010

Zoom de las imágenes


El zoom al hacer click sobre las imágenes se consigue con el JavaScript BrighBox que hay que poner en la plantilla justo antes de la etiqueta de fin de cabecera.
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/BrightBox_v2.0_compressed2.js' type='text/javascript'></script>
</head>
El thumbnail (img) de la imagen debe estar encerrado en un ancla (a) con la propiedad onblur definida con el valor que aparece a continuación. El ancla debe apuntar a la imagen ampliada.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://lh5.ggpht.com/_5SvLLd6obBo/ESRrptIEHNI/s0/Picos_de_Europa-DSC0574.JPG"><img src="http://lh5.ggpht.com/_5SvLLd6obBo/ESRrptIEHNI/s220/Picos_de_Europa-DSC0574.JPG" /></a>
Algunos editores blogger wysiwyg introducen el parámetro onblur con el valor adecuado de forma autómatica, si no ocurre esto, hay que ponerlo a mano.

Este es un pequeño hack que modifica el JavaScript, para que el caption de la imágen ampliada tenga 12pt y una fuente Verdana, Arial o Sans-serif (buscar el código en azul y sustituirlo por el rojo):
imageText.style.fontSize = parseInt(bottomBuffer * 0.3) + "px";

imageText.style.fontSize = parseInt(bottomBuffer * 0.2) + "px";imageText.style.fontFamily = "Verdana, Arial, Sans-serif";
Ejemplo de imagen ampliable:
Zoom

Puedes encontrar BrightBox en AI projects o coger el mío. No olvides abrir el código y customizarlo.


NOTA: Para las imágenes de los post posteriores a julio de 2011 se empezó a usar Shadowbox.

domingo, 18 de abril de 2010

Efecto pelar esquina


Ficheros necesarios.
peel.js - JavaScript de carga
peel-large.swf - flash efecto desplegado
peeel-small.swf - flash efecto plegado
peel-ojo.jpg - imágen efecto plegado
peel-needs-you.jpg - imágen efecto desplegado

Blogger no deja guardar estos ficheros así que los situamos en otro servidor, por ejemplo en http://sites.google.com

Pero antes debemos modificar el script peel.js con los enlaces correctos (en rojo).
var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://redmtb.wordpress.com'); /* <--página que aparecerá al hacer click sobre el desplegado */

jaaspeel.small_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-small.swf';
jaaspeel.small_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-ojo.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-large.swf';
jaaspeel.big_image = escape('http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel-needs-you.jpg');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';

Agregamos el siguiente código (en rojo) a la plantilla del blog justo después de la etiqueta body.
<body>
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/peel.js' type='text/javascript'></script>

viernes, 26 de marzo de 2010

Error en el navegador Internet Explorer

Algún fragmento de código javascript de los widgets o del resto de la página blogspot pueden hacer aparecer un mensage de error en la esquina inferior izquierda del navegador Internet Explorer.



A pesar de esto la página puede funcionar con normalidad y el mensage sólo es útil para el desarrollador e irrelevante para el usuario normal. El siguiente código en rojo antes de </head> ocultará el mensage.
<script type='text/javascript'>
window.onerror = function() { return true; }
</script>

</head>