PROTOCULTURE ADDICTS

Tuesday, September 17, 2019

Convertir textos en enlaces utilizando jQuery

Esta es una pequeña función muy interesante que usa jQuery para convertir cualquier dirección URL escrita como texto en un enlace. Es decir, escribimos esto:

http://jquery.com/

y se generará esto:

<a href="http://jquery.com/">http://jquery.com/<>

El código de la función sería el siguiente:

$.fn.crearLinks = function() {
  var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
  this.each(function() {
    $(this).html(
      $(this).html().replace(regexp,'<a href="$1">$1</a>')
    );
  });
  return $(this);
}

que ejecutaremos de acuerdo a nuestras necesidades; por ejemplo, si sólo quisiéramos que lo hiciera en determinadas circunstancias, bastaría indicar la clase o ID del contenedor; en este ejemplo uso un DIV con la clase crearlinksdemo así que sería:

$(document).ready(function() {
 $(".crearlinksdemo").crearLinks(); 
});

Morbi vitae est purus. Aliquam at leo nibh. Maecenas ultrices sem est, eget consectetur ante. Nulla lacus turpis; ullamcorper non tincidunt eget, mattis non ligula via http://vagabundia.blogspot.com/

Aliquam erat volutpat. Aliquam hendrerit dolor sed nisl dapibus condimentum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sollicitudin odio a ante semper eu interdum ipsum porta. Phasellus at libero quis sapien imperdiet faucibus auctor nec est Blogger http://www.blogger.com/home

Nullam vel nunc eu tellus vehicula congue. Quisque ut odio felis, vitae tempus ipsum? Quisque venenatis viverra augue, quis tempor lacus iaculis id? Pellentesque luctus egestas tortor, vehicula cursus leo mattis et. Sed molestie purus sed urna iaculis eu luctus nisl tincidunt. Proin eu massa velit, nec fermentum ipsum orci aliquam http://jquery.com/

Pero podría ser algo más global como tods las entradas de Blogger:

$(".post").crearLinks();

o todas las etiquetas P o cualquier cosa:

$("p").crearLinks();

Y, obviamente, podríamos modificar la función para que también se abrieran en otra pestaña:

$(this).html().replace(regexp,'<a target="_blank" href="$1">$1</a>')

agregarle otros atributos:

$(this).html().replace(regexp,'<a rel="nofollow" target="_blank" href="$1">$1</a>')

o una clase para definir reglas de estilo especiales:

$(this).html().replace(regexp,'<a class="enlacetexto" target="_blank" href="$1">$1</a>')

REFERENCIAS:webintenta.com

Sunday, September 15, 2019

Jugando con fontBomb

Muchos desarrolladores experimentan (que es una forma más profesional de decir "juegan") con JavaScript y CSS y crean cosas extrañas que no suelen tener aplicaciones prácticas pero, en este mundo excesivamente práctico, nos regalan un toque de frescura.

Este es el caso de Philippe-Antoine Lehoux que, entre otras "cositas", se le ocurrió hacer algo llamado fontBomb; una forma de "destruir" páginas web, agregando bombas donde uno quiera.

Para usarlo, basta entrar en la página y arrastrar el bookmarket a la barra de marcadores y así, tenerla a mano en caso de emergencia ...

En el rectángulo inferior puede verse el efecto aunque se solicita encarecidamente que no se abusen.

Click en cualquier parte para depositar un bomba ...

Wednesday, September 11, 2019

Comentarios en Blogger: ¿Habrá cambios?

Desde que a Blogger se le ocurrió agregar los comentarios anidados, da la impresión que no sabe para que lado ir (o lo sabe y no lo quiere decir) porque constantemente está haciendo cambios sobre los cuales nada dice y cambiando, agregando y quitando códigos de las plantillas.

Hace ya un tiempo, han aparecido dos nuevos includables forzosos dentro del widget de los posts:

<b:includable id='iframe_comments' var='post'>
  <b:if cond='data:post.allowComments'>
    <script expr:src='data:post.commentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder'/>
    <b:if cond='data:post.embedCommentForm == "false"'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>

El primero, vaya uno a saber qué hace ... por ahora, no parece hacer nada excepto agregar un script larguísimo y un div cuya clase es cmt_iframe_holder:

http://www.blogblog.com/dynamicviews/xxxxxxxxxxxxxxx/js/comments.js

¿Para qué será?
¿Tendrá algo que ver con ese ícono que se ve a veces en los comentarios de este tipo y que muestra un lapicito? ¿Será que están pensando en permitirnos editar nuestros propios comentarios?

El otro includable es este:

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>

Que parece reemplazar toda esa parte que antes se mostraba separada. Ahora, en los posts veremos solamente:

<b:include data='post' name='comment_picker'/>

dentro de las condiciones para páginas estáticas y entradas individuales.

No parece nada más que una modificación menor, un cambio de lugar pero, allí hay cosas que llaman la atención, primero, una condición que carga o no carga el script del que hablaba antes y que, por el momento, parece que no se ejecuta nunca ya que el valor es siempre cero:

<b:if cond='data:post.commentSource == 1'>

Segundo, algo que estuvo desde que inventaron este sistema:

<b:if cond='data:post.showThreadedComments'>

que significa que si tenemos habilitados los comentarios anidados se muestren de ese modo y sino, que se muestren de modo "normal"; parece lógico excepto por una cosa, no hay nada dentro de la configuración de Blogger que nos permita elegir una u otra opción así que el valor, por ahora, siempre es true y por lo tanto, cualquier plantilla normal, tendrá los comentarios anidados si o si, a menos que eliminemos manualmente la condición.

Me parece que habrá que estar atentos a esos cambios, sobre todo quienes no usamos los comentarios anidados porque estas cosas, Blogger suele hacerlas sin informarnos nada.

Monday, September 9, 2019

Flotaciones, fondos, problemas, alternativas

Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.

leer artículo actualizado

Friday, September 6, 2019

oridomi: Contenidos plegables

oridomi es un script para animar cualquier tipo de contenido, plegándolo con diferentes efectos, como si fueran hojas de papel pero, claro está, esto sólo ocurrirá en navegadores que soporten las nuevas propiedades de CSS3.

Aunque la documentación del script es abundante ya que se explica cada función de modo detallado, lamentablemente, es poco lo que se indica del modo en que debe usarse y las distintas opciones pero veamos lo que dicen.

Para empezar, oriDomi funciona con o sin librerías anexas así que, luego de agregar el script (el minimizado o el normal) que podemos descargar de Github, debemos indicar cual o cuales serán los contenidos a los que se aplicará y esto, lo hacemos estableciendo una clase o un id. Por ejemplo si lo usara en este tipo de contenido:

debajo, pondría lo siguiente:

<script>var domi = new OriDomi(document.getElementById('ejemplo'));</script>

o bien esto si se usan clases en lugar de ids:

var domi = new OriDomi(document.getElementsByClassName('ejemplo')[0]);

aunque es más sencillo usando jQuery

var $domi = $('#ejemplo').oriDomi();

Y si quiera aplciarlo a varios contenidos distintos, sólo debería usar variables diferentes para cada uno:

var $domiUNO = $('#ejemplo').oriDomi();
var $domiOTRO = $('#otro-ejemplo').oriDomi();

Inicializado de ese modo, las opciones serán las que tiene por defecto pero, pueden ser modificadas; por ejemplo:

var $domi = $('#ejemplo').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });

donde:

hPanels es la cantidad de secciones horizontales
vPanels es la cantidad de secciones verticales
speed es la velocidad
perspective es el valor de la perspectiva
shading indica si se agregarán sombras o no

Todo muy lindo pero ¿cómo lo usaría? Ahí, ya depende de lo que uno quiera hacer. Si sólo deseo mostrar ese contenido (imagen, texto, casi cualquier otra cosa simple o más o menos compleja) bastaría llamar a la función correspondiente, por ejemplo, algo así:

$domi.oriDomi('stairs',50,'left');

donde $domi es el nombre de la variable que le asignamos ($domiUNO, $domiOTRO); .oriDomi es la función genérica y lo que se encuentra entre paréntesis es efecto a usar, sus parámetros y opciones.

Los parámetros son números (positivos o negativos) que indican el ángulo y las opciones básicas indican el sentido de la rotación (left, right, top, bottom) siendo left la opción por defecto.

Los efectos posibles son varios y estos son los que se muestran en el demo inferior:

$domi.oriDomi('accordion', -40, 'right');
$domi.oriDomi('curl', 70, 'left');
$domi.oriDomi('ramp',50, 'top');
$domi.oriDomi('collapse','left');
$domi.oriDomi('stairs',50,'left');
$domi.oriDomi('fracture',30,'right');
$domi.oriDomi('twist',40,'left');
$domi.oriDomi('reveal', -50, 'right');

Hay otros como collapseAlt, foldUp, unfold y uno en particular nos permite restaurar el contendido, o se, volverlo a su estado original:

$domi.oriDomi('reset');

Monday, September 2, 2019

Dos sliders con efectos 3D

Las cosas se vuelven cada vez más complejas, las alternativas que combinan CSS y scripts van aprovechando las nuevas posibilidades que nos dan los navegadores más modernos y la imaginación de los desarrolladores hace el resto, presentándonos alternativas con las que nunca habíamos soñado.

Lamentablemente, a veces, esas complejidades se extienden más allá de lo razonable y se nos ofrecen efectos que uno trata de mirar y así, a simple vista, nos abruman porque nos posibilitan la descarga de los demos completos pero estos son excesivos, incluyen demasiadas cosas y hay que irlos simplificando para llegar al meollo del asunto. Lo curioso es que cuando se llega a ese punto, todo es más simple de lo que parecía y uno se queda pensando ¿por que no empezarán por lo sencillo?

Ese es el caso de estos dos scripts que utilizan jQuery para generar una serie de efectos gráficos muy llamativos.

El primero se llama Adaptor y es un slider de imágenes con algunos efectos originales tales como Vertical 3D scroll y Horizontal 3D scroll. El demo completo puede verse en este enlace.

Acá, intento usar uno de ellos, el llamado scrollVert3d:

Teniendo jQuery en la plantilla, sólo se requiere un script, el que se llama box-slider-all.jquery.min.js que, en este caso, alojé en un servidor externo como DropBox.

<!-- el CSS lo ponemos antes de </head> -->
<style>
<!-- los valores de width y height dependerán del tamaño de las imágenes a mostrar -->
#viewport-shadow {
  position: relative;
  width: 635px;
}
#viewport, #box, .slide {
  list-style:none;
  height: 375px;
  width: 635px;
}
.slide img{
  height: 375px;
  width: 600px;
}
#viewport {overflow: hidden;}
#time-indicator {
  background-color: #2EDBAC;
  height: 3px;
  left:0px;
  position: absolute;
  top:388px;
  width: 0px;
}
</style>

<!-- el HTML lo ponemos en un post o en un elemento HTML -->
<div id="viewport-shadow">
  <div id="viewport">
    <ul id="box">
      <li class="slide"><img src="URL_imagen1"></li>
        ..... todas las imágenes que uno quiera .......
      </ul>
    </div>
  <div id="time-indicator"></div>
</div>

<!-- el script lo ponemos al final de la pagina o después del HTML -->
<script src="URL_box-slider-all.jquery.min.js"></script>
<script>
$(function () {
  var $box = $('#box'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
  var switchIndicator = function ($c, $n, currIndex, nextIndex) {$timeIndicator.stop().css('width', 0);};
  var startTimeIndicator = function () {$timeIndicator.animate({width: '600px'}, slideInterval);};
  $box.boxSlider({
    speed: 1000, autoScroll: true, timeout: slideInterval, effect: 'scrollVert3d', blindCount: 15, onbefore: switchIndicator, onafter: startTimeIndicator
  });
  startTimeIndicator();});
</script>

No hay manera de explicar los detalles uno por uno y hay que ver la página del autor para descubrir las distintas opciones pero, si se quiere utilizar de modo elemental, no hace falta mucho más que eso.

El otro script se llama Flux y también es un slider que incluye sofisticadas transiciones en 3D y cuyo demo original con todas las alternativas podemos ver acá.

En este caso, sólo intentaé usar el último, uno llamado Turn:

El script que necesitamos es flux.min.js que también podemos alojar el un servidor o colocar directamente en la plantilla y, como en el anterior, necesitamos tener jQuery instalado.

<!-- el CSS y el script los ponemos antes de </head> -->
<style>
div.surface{
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  -ms-box-sizing:content-box;
  box-sizing:content-box
  width:100%;
}
</style>
<script src='URL_flux.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  if(!flux.browser.supportsTransitions)
    alert("Flux Slider requires a browser that supports CSS3 transitions");
  window.f = new flux.slider('#slider', {autoplay: false,pagination: false});
  $('#trans3d').bind('click', function(event){
    event.preventDefault();
    if(!flux.browser.supports3d){alert("Teste navagedor no soporta transiciones");return;}
    window.f.next('turn');
  });
});
//]]>
</script>

<!-- y el HTML lo ponemos donde se nos ocurra mostrar el slider-->
<div class="container">
  <div id="slidercontainer">
    <div id="slider">
       <img src="URL_imagen1" />
        ..... todas las imágenes que uno quiera .......
    </div>
  <a id="trans3d" href="#turn" class="new">Turn</a></div>
</div>