Caracteres "raros" en scripts y CSS

A veces, cuando se usan scripts, debemos escribir caracteres especiales como acentos y estos no se ven bien o aparece un signo de interrogación u otros símbolos raros. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona.

En Blogger, los caracteres especiales suelen verse bien por lo que ese problema es difícil que se nos presente pero, cuando se trata de otros servicios, de archivos externos, las cosas pueden complicarse, sobre todo si queremos emplear caracteres especiales [1 2]

Por ejemplo, esto, suele verse bien y al hacer click en este enlace, se verán las letras de modo correcto:

alert(" á é í ó ú  ☺ ❤ ✛ ");

Si no es así y quiero usar caracteres de ese tipo, lo que debo hacer es escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida de una letra y un número en formato hexadecimal. En el caso de los acentos o caracteres comunes, sería \x más el código Unicode de dos dígitos:

\xe1 es la letra á
\xe9 es la letra é
\xed es la letra í
\xf3 es la letra ó
\xfa es la letra ú

Algunas combinaciones generan caracteres especiales:

\n es un salto de linea
\t es una tabulación
\' es la forma de escribir comillas simples
\" es la forma de escribir comillas dobles
\\ es una barra invertida

De manera más genérica, podemos usar \u más el código Unicode en formato hexadecimal (cuatro dígitos):

\u00e1 es la letra á
\u00e9 es la letra é
\u00ed es la letra í
\u00f3 es la letra ó
\u00fa es la letra ú

lo que nos permitirá ver correctamente eso que antes no se podía:

alert(" \u263a \u2764 \u271b ");

En esta página, hay una lista muy completa de todos los caracteres, tanto símbolos como distintos alfabetos.

Aunque en el CSS no suelen usarse caracteres raros, hay un caso en que también son necesarios, cuando se utiliza la propiedad content junto con :after y :before

Allí, se usa el mismo criterio aunque sólo es necesario agregar la barra invertida seguida de los cuatro dígitos del código hexadecimal. Por ejemplo:

content: ":\24d1\24d4\24d5\24de\24e1\24d4";

content: ":after  \263a  \2724  \2602";

:after ☺ ✤ ☂
:ⓑⓔⓕⓞⓡⓔ

Fokus es un script interesante aunque el resultado final dependerá mucho de la página donde se quiera utilizar, tanto de su color de fondo como de la forma en que está estructurada. Lo que hace es resaltar cualquier cosa que uno haya seleccionado, cubriendo el resto de la página con una cierta opacidad.

Justamente, es esa opacidad lo que hace que el resultado sea variable porque está pensada para fondos claros y no posee opciones de configuración aunque, si se quiere, se podría modificar el script, buscando esta línea y colocando allí el color a utilizar en formato rgba():

v.fillStyle="rgba( 0, 0, 0, "+t+" )";

Por ejemplo, si quisierámos que fuera una opacidad en blanco, sería:

v.fillStyle="rgba( 255, 255, 255, "+t+" )";

El script no utiliza librería así que puede agregarse en cualquier sitio aunque, como usa la etiqueta canvas, no se verá en versiones inferiores de Internet Explorer. Lo podemos descargar desde github y basta agregarlo antes de </head>

REFERENCIAS:lab.hakim

No sé hasta que punto esto tendrá utilidad alguna pero, se me ocurrió buscar en la web a ver si existía alguna forma sencilla de cambiar el favicon de una página; es decir, tener uno pro defecto y cambiarlo por otro ya sea por la acción de un usuario (un click en alguna parte) o de manera aleatoria.

Había muchas respuestas y dudas que, naturalmente, incluían diferencias entre los navegadores (Internet Explorer y Chrome son problemáticos), funciones complicadas, etc etc pero, en un foro, alguien propone una solución que funciona bastante bien en Firefox, Chrome y Opera y que se basa en este artículo.

La función sería esta:

<script>
var IE = navigator.userAgent.indexOf("MSIE")!=-1;
var favicon = {
  change: function(iconURL){
    if (arguments.length == 2){document.title = optionalDocTitle;}
    this.addLink(iconURL, "icon");
    this.addLink(iconURL, "shortcut icon");
    if (!IE) {
      if (!window.__IFrame){
        __IFrame = document.createElement('iframe');
        var s = __IFrame.style;
        s.height = s.width = s.left = s.top = s.border = 0;
        s.position = 'absolute';
        s.visibility = 'hidden';
        document.body.appendChild(__IFrame);
      }
      __IFrame.src = 'about:blank';
    }
  },
  addLink: function(iconURL, relValue) {
    var link = document.createElement("link");
    link.type = "image/x-icon";
    link.rel = relValue;
    link.href = iconURL;
    this.removeLinkIfExists(relValue);
    this.docHead.appendChild(link);
  },
  removeLinkIfExists: function(relValue) {
    var links = this.docHead.getElementsByTagName("link");
    for (var i=0; i<links.length; i++) {
      var link = links[i];
      if (link.type == "image/x-icon" && link.rel == relValue) {
        this.docHead.removeChild(link);
        return;
      }
    }
  },
  docHead: document.getElementsByTagName("head")[0]
}
</script>

Una vez agregada, bastaría ejecutarla con algo así:

favicon.change('url_imagen')

Es simple; estoy usando imágenes en formato gif pero pueden usarse otras, incluyendo formatos ico:

<img onclick="favicon.change('http://www.google.com/favicon.ico');" src="http://www.google.com/favicon.ico" />

Para que sea aleatorio, colocamos las imágenes en un array y seleccionamos una cualquiera:

function favalea() {
  // lista de imágenes a utilizar
  misFavicons=new Array('url_imagen_1','url_imagen_2','url_imagen_3','url_imagen_4');
  // elegimos una al azar y llamamos a la función
  favicon.change(misFavicons[Math.floor(Math.random()*misFavicons.length)]);
}

Y una etiqueta cualquiera que la ejecute:

<span style="cursor:pointer;" onclick="favalea()">favicon al azar</span>

o ejecutamos la función cuando la página esté cargada:

window.onload = (function(){ favalea(); });

prefix-free es un script que habría que tener muy en cuenta ya que nos ayuda a resolver uno de los problemas más molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automático, los prefijos correspondientes para cada navegador de tal modo que no sería necesarios escribir algo así:

.una-regla {
  background-image: -moz-linear-gradient(#000,#FFF);
  background-image: -webkit-linear-gradient(#000,#FFF);
  background-image: -o-linear-gradient(#000,#FFF);
  background-image: -ms-linear-gradient(#000,#FFF);
  background-image: linear-gradient(#000,#FFF);
}

y todo ese exceso de líneas (que, inevitablemente uno termina equivocando u olvidando) se transformaría en es esto:

.una-regla {
  background-image: linear-gradient(#000,#FFF);
}

es decir, sólo deebría usarse la propiedad especificada por la w3.org y del resto, se encargará el script.

¿En que navegadores funcionará? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes.

¿Funciona en Blogger? Si, no debería haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta.

¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) y lo alojamos en un servidor:

<script src='URL/prefixfree.min.js' type='text/javascript'/>

o simplemente lo copiamos y pegamos en la plantilla entre etiquetas

<script type='text/javascript'>
//<![CDATA[
  ....... acá pegamos el contenido del archvo js .......
//]]>
</script>

y, en ambos casos, conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head>

Tres ejemplo rápidos:

/* un fondo con gradiente */
#pf1{background-image:linear-gradient(#000,#FFF);}

/* una transición */
#pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;}
#pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;}

/* una animación*/
#pf3{background-color:#000;animation: recrojo 1s infinite alternate;}
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.

El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.

Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
  return{
    init:function(a,c,b,s,d){
      a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
      b.style.display='block'; a.style.overflow='hidden';
      var h=a.offsetHeight, t=c.offsetHeight;
      if(t<h){
        b.style.display='none'
      }else{
        a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
        s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
        s.onselectstart=function(){return false}
      }
      a.l=b.offsetHeight-s.offsetHeight
    },
    st:function(e,f){
      var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
      if(a.mv){this.sp(f)}
      a.mv=function(event){TINY.scroller.mv(event,f)};
      a.sp=function(){TINY.scroller.sp(f)};
      if(T$$$()){
        document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
      }else{
        document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
      }
      if(a.d){s.className+=' '+a.n}
    },
    mv:function(e,f){
      var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
      if(m>=0&&m<a.l){
        s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
      }else if(m<0){
        s.style.top=0; c.style.top=0
      }else if(m>a.l){
        s.style.top=a.l+'px'; c.style.top=a.m+'px'
      }
    },
    sp:function(f){
      var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
      if(T$$$()){
        document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
      }else{
        document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
      }
      a.mv=0;
    }
  }
}();
TINY.cursor=function(){
  return{
    top:function(e){
      return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
    }
  }
}();
//]]>
</script>

Y lo usarmemos de este modo:

<div id="ejemplo-scroll" class="scroll">
  <div id="ejemplo-scrollcontent" class="scrollcontent">
    ....... acá pondremos nuestro contenido .......
  </div>
  <div id="ejemplo-scrollbar" class="scrollbar">
    <div id="ejemplo-scroller" class="scroller"></div>
  </div>
</div>

e inmediantamente debajo, llamamos a la función que en este caso, sería así:

<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>

Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:

el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)

Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:

<style>

  /* las reglas genéricas */
  .scroll { /* el contenedor */
    overflow: auto;
    position: relative; 
  }
  .scrollcontent { /* el contenido */
    position: absolute;
    z-index: 200;
  }
  .scrollbar { /* la barra de desplazamiento es una imagen */
    background:url(URL_scroll-bg.gif);
    display: none;
    float: right;
    position: relative;
    width: 15px;
    z-index: 100;
  }
  .scroller  { /* el botón de desplazamiento también es una imagen */
    background-color: #CCC;
    background-image: url(URL_scroll-arrows.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 15px;
  }
  .buttonclick { background-color:#BBB; }

  /* y defino los anchos, altos y otros detalles de cada uno de elllos */
  #ejemplo-scroll { /* 
    background-color: #000;
    margin: 0 auto;
    height: 200px; /* el ancho */
    width: 300px; /* el alto */
  }
  #ejemplo-scrollcontent {
    width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
  }
  #ejemplo-scrollbar {
    height: 200px; /* el mismo alto que el contenedor */
  }

</style>

Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:

#otro-scroll{
  background-color: #222;
  border: 2px solid #000;
  height: 270px;
  margin: 0 auto;
  outline: 1px solid #666;
  width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }