Para que no haya desilusiones al terminar de leer, el código que se explica a continuación no construye rótulos ni tipografías fantásticas. Simplemente facilita la tarea para hacerlo. Que la tipografía tenga un aspecto u otro, dependerá exclusivamente del estilo que vosotros diseñéis con vuestro buen gusto.
Lettering.js se autodefine como un plugin jQuery para tipografías web radicales. Lo de radical quizás tenga unas connotaciones para nosotros los hispanoparlantes, distintas de las que tiene para los anglosajones, pero eso no quita para que sea bastante práctica y que efectivamente, con ella consigamos hacer rótulos muy majos. Rótulos que además podemos construir para que resulten algo interactivos. Pasa el puntero por encima de las letras o selecciónalas.
Este sistema sirve para suplir otro tipo de titulares construidos con imágenes. Al ser texto plano, podrá ser marcado, leído por buscadores, indexado (supongo que esto es de interés SEO) y como veremos, formateado a nuestro antojo. Y si hay que cambiar el titular, pues bastará con cambiar el texto sin necesidad de diseñar otra imagen.
1
Su uso requiere de jQuery por lo que antes de nada, tenemos que asegurarnos de que ya tenemos esta librería instalada. Si no es así, pues podemos copiar lo siguiente antes del </head>. Ojo con los que useis prototype.js porque esta última tiene incompatibilidades con jQuery y puede que alguna de las dos deje de funcionar mientras conviven. Si esto ocurre, no es mayor problema. Será suficiente con volverla a quitar.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js'/>
2
El propio script Lettering, puede ser descargado desde aquí y alojado en vuestro hosting habitual para también incluirlo antes de </head> y, en cualquier caso, después de jQuery, en la forma...
<script type='text/javascript' src='http://ruta_a/jquery.lettering-0.6.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(".nombre_clase").lettering();
});
</script>
Como el script es corto una alternativa sería copiarlo directamente en la plantilla. Más rápido, más fácil de mantener y sin depender de servicios externos. Esta sería la redacción correcta en ese caso:
<script type='text/javascript'>
//<![CDATA[
/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(".nombre_clase").lettering();
});
</script>
La úlima parte se tendrá que repetir tantas veces como clases distintas queramos controlar, renombrando adecuadamente lo que hemos marcado en verde. También podríamos utilizar identificadores (id), sustituyendo el punto por un sostenido (#). De esta manera, si queremos dar estilo a un segundo titular, con un id llamado por ejemplo titulardiver, lo añadiríamos de la siguiente manera:
<script type='text/javascript'>
$(document).ready(function() {
$(".nombre_clase").lettering();
$("#titulardiver").lettering();
});
</script>
3
Ya sólo nos queda aplicar la clase escogida a nuestro texto allá dónde se encuentre, para que se ejecute el script. Aunque en el ejemplo he utilizado una etiqueta de párrafo (p), se puede usar cualquier otra válida en HTML:
<p class="nombre_clase">TITULAR</p>
¿Y qué ha pasado? Nuestro texto está igual ¿Dónde está entonces la gracia? Pues en el código fuente. Si observáis, lo que era un simple párrafo con una clase, ahora se ha convertido en una serie de letras individuales bajo etiquetas SPAN y con la clase char1, char2, char3... charX. En el ejemplo, exactamente:
<p clas="nombre_clase">
<span class="char1">T</span>
<span class="char2">I</span>
<span class="char3">T</span>
<span class="char4">U</span>
<span class="char5">L</span>
<span class="char6">A</span>
<span class="char7">R</span>
</p>
Podríamos haber redactado todo ese código a mano, pero resulta evidente que con lo corto que es el script y teniendo en cuenta que sólo hay que instalarlo una vez, este sistema resulta bastante más eficiente. En especial con textos más largos.
4
Y ahora viene la parte creativa. Una vez que tenemos etiquetadas cada una de las letras, sólo se trata de darle estilo individualmente a cada una de las clases .charX, para conseguir efectos como mínimo curiosos. Este es el código del titular de colorines del principio de la entrada usando la ID #titulodiver:
#titulodiver {width:500px; height:200px; position:relative; font-family:'Impact',sans-serif; font-size: 150px; margin-bottom:10px;}
#titulodiver span {position:relative; width:60px; }
#titulodiver span:hover {top:6px;}
.char1, .char4 {color:#ff3636; text-shadow: -4px 4px 0px #cc3636; filter: dropshadow(color=#cc3636, offx=4, offy=4); }
.char3, .char6 {top:-4px; color:#fff330;text-shadow: -4px 4px 0px #ccf330; filter: dropshadow(color=#ccf330, offx=4, offy=4); }
.char2, .char7 {top:-8px; color:#339900;text-shadow: -4px 4px 0px #215c04; filter: dropshadow(color=#215c04, offx=4, offy=4); }
.char5 {top:-6px;color:#003099; text-shadow: -4px 4px 0px #000666; filter: dropshadow(color=#000666, offx=4, offy=4); }
Nótese que en navegadores que no interpreten CSS3, la sombra (text-shadow/dropshadow) no será visible.
Y hablando de CSS3, imaginad las posibilidades de aplicar estilos propios de este estándar: box-shadow, border-radius, transform... y sobre todo @font-face. Para que no tengais que hacer mucho esfuerzo, aquí teneis una galería de ejemplos. Pinchando en cada recuadro accedéis a las respectivas páginas-demo.
Pero la cosa no queda aquí. El mismo script sirve para dividir un texto en palabras o incluso por líneas, insertando en cada caso la palabra words o lines (entre comillas sencillas) dentro de la función lettering():
$(".nombre_clase").lettering('words');
$(".nombre_clase").lettering('lines');
Harán lo mismo que en el caso de las letras, salvo que ahora las clases que llevarán los SPAN serán respectivamente wordX y lineX.
Yo no destaco mucho como diseñador, pero como ejemplo he podido crear estos ejemplos con estas dos últimas alternativas:
En el caso de las líneas, el script sólo es capaz de distinguirlas si se han separado con <br/>
<div id="nombre_clase">Sígueme en<br/> Twitter<br/> aunque no sea<br/> el mejor</div>
Alguna información más (en inglés) en el sitio del creador: Dave Rupert.
