<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Maison De L&#039;Art &#187; Javascript</title>
	<atom:link href="http://blog.maisondelart.net/categoria/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.maisondelart.net</link>
	<description>Blog de CSS, Jquery, Wordpress y diseño</description>
	<lastBuildDate>Thu, 10 Jun 2010 11:21:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Cufón: usando nuestros propios tipos de letra en la web</title>
		<link>http://blog.maisondelart.net/javascript/cufon-usando-nuestros-propios-tipos-de-letra-en-la-web</link>
		<comments>http://blog.maisondelart.net/javascript/cufon-usando-nuestros-propios-tipos-de-letra-en-la-web#comments</comments>
		<pubDate>Fri, 07 Aug 2009 19:20:29 +0000</pubDate>
		<dc:creator>Hans</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Cufón]]></category>
		<category><![CDATA[Jquery]]></category>

		<guid isPermaLink="false">http://blog.maisondelart.net/?p=29</guid>
		<description><![CDATA[Desde hace tiempo, los desarrolladores web hemos buscado muchas maneras de mostrar nuestros propios tipos de letra en pantalla. Aunque existen nuevos métodos para hacerlo posible de forma "legal" en CSS3, vamos a explicar cómo hacerlo de forma sencilla en Javascript gracias a Cufón.]]></description>
			<content:encoded><![CDATA[<p>Existen diferentes métodos para utilizar nuestras propias tipografías más allá de las estandarizadas (Times, Tahoma, Trebuchet, Arial y Verdana).</p>
<p>Las más utilizadas son las siguientes:</p>
<ul>
<li>Exportar el texto en forma de imagen, y <a href="http://www.google.es/search?q=reemplazar+texto+imagenes+css">usar CSS para reemplazarlo</a>.</li>
<li>Utilizar imágenes, de forma directa (con la etiqueta <em>img</em>), con el contenido dentro del texto alternativo (poco recomendado).</li>
<li>Utilizar <strong>Flash</strong> (no recomendado).</li>
</ul>
<h3>Instrucciones para comenzar</h3>
<p>Desde hace tiempo, tenemos disponible el método <a href="http://cufon.shoqolate.com"><strong>Cufón</strong></a>. Este método consiste en transformar texto en imágenes de forma automática, con un fantástico método <strong>Javascript</strong>, en 3 pasos:</p>
<ol>
<li>Ve al <a href="http://cufon.shoqolate.com/generate/">generador</a> y sube una fuente en formato <strong>TrueType</strong> (TTF), <strong>OpenType</strong> (OTF), <strong>Printer Font Binary</strong> (PFB) o <strong>PostScript</strong>. Procura, además, que la fuente esté abierta, ya que no todas las fuentes de los formatos admitidos, serán aceptadas. Si es posible, sube las 4 variantes: regular, negrita, cursiva y negrita cursiva.</li>
<li>En el apartado &#8220;<strong><em>Include the following glyphs (if available)</em></strong>&#8220;, marca la casilla <em>All</em>.</li>
<li>No es imprescindible personalizar ningún campo más, así que acepta las condiciones de uso. Se descargará un fichero .js que contendrá la fuente &#8220;transformada&#8221; en <strong>Javascript</strong>.</li>
<li>Descarga, <a href="http://cufon.shoqolate.com/generate/">en la página del generador</a>, el archivo de <strong>Cufón</strong> en &#8220;Download&#8221;.</li>
</ol>
<p>Una vez tenemos el archivo de nuestro tipo de letra y el archivo de Cufón (<em>cufon-yui.js</em>), vamos a implementarlos en nuestra web:</p>
<pre id="line1">&lt;<span>script</span><span> src</span><span>="</span>/js/cufon.js<span>" </span><span>type</span>=<span>"text/javascript"</span>&gt;&lt;/<span>script</span>&gt;
&lt;<span>script</span><span> src</span><span>="</span>/js/fuente.js<span>" </span><span>type</span>=<span>"text/javascript"</span>&gt;&lt;/<span>script</span>&gt;
&lt;<span>script</span><span> src</span><span>="/js/</span>jquery.min.js<span>" </span><span>type</span>=<span>"text/javascript"</span>&gt;&lt;/<span>script</span>&gt;</pre>
<p>Como veréis, hemos introducido, también, a <strong>Jquery</strong>. <strong>Jquery es imprescindible para que </strong><strong>Cufón funcione en algunos navegadores</strong>, como <strong>Firefox 3.0</strong> u <strong>Opera</strong>, ya que necesitan la ayuda de un selector como <strong>Jquery</strong> para funcionar.</p>
<h3>Ejemplos de uso</h3>
<p>A continuación, añadimos el primer código:</p>
<pre>&lt;script type="text/javascript"&gt;
 Cufon.replace('h1, h2');
&lt;/script&gt;</pre>
<p>En este ejemplo, estamos transformando los encabezamientos <em>h1</em> y <em>h2</em>. Ahora, vamos a rizar el rizo:</p>
<pre>&lt;script type="text/javascript"&gt;
 Cufon.replace('h2 a',{hover:true,hoverables:{a:true}});
 Cufon.replace('h3', {textShadow: '#37241d 1px 1px 1px', color: '-linear-gradient(#c1a681, #5e472f, #5e472f)'});
&lt;/script&gt;</pre>
<p>En este ejemplo, estamos transformando un enlace dentro de un encabezado de segundo nivel (<em>h2 a</em>) y que funcione la propiedad <em>a:hover</em>. Además, a todos los encabezados de tercer nivel (h3), estamos diciéndoles que <strong>usen una sombra</strong>, con los siguientes datos: <em>#37241d</em> (color) y <em>1px 1px 1px</em> (dispersión de la sombra, píxeles de posición horizontal y píxeles de posición vertical). También estamos añadiéndole, además, un <strong>degradado de color</strong>, introduciendo tantos valores como colores de degradado queramos (en nuestro ejemplo, 3 colores). <strong>Este es el ejemplo para el H3</strong>:</p>
<p><a href="http://blog.maisondelart.net/img/2009/08/h3.png"><img class="aligncenter size-full wp-image-30" title="Cufón on H3 with linear gradient and shadow" src="http://blog.maisondelart.net/img/2009/08/h3.png" alt="Cufón on H3 with linear gradient and shadow" width="167" height="46" /></a></p>
<p>En principio, las propiedades como la negrita, subrayado, cursiva, versalitas y otras, se pueden modificar directamente desde el CSS.</p>
<p><a href="http://wiki.github.com/sorccu/cufon/styling">En este enlace</a> tienes explicadas todas las posibilidades para darle estilo a tus fuentes <strong>Cufón</strong>. Como último consejo, es preferible que utilices un HTML con declaración estricta o, mejor aún, HTML5 para evitar posibles errores a la hora de dar estilos.</p>
<p>Más información:</p>
<ul>
<li><a href="http://wiki.github.com/sorccu/cufon"><strong>Cufón</strong></a></li>
<li><a href="http://cufon.shoqolate.com/generate/"><strong>Cufón generator</strong></a></li>
<li><strong><a href="http://wiki.github.com/sorccu/cufon/demos">Demos</a><br />
</strong></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.maisondelart.net/javascript/cufon-usando-nuestros-propios-tipos-de-letra-en-la-web/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Wordpress, JQuery y Cross Slide: soluciones</title>
		<link>http://blog.maisondelart.net/wordpress/wordpress-jquery-y-cross-slide-soluciones</link>
		<comments>http://blog.maisondelart.net/wordpress/wordpress-jquery-y-cross-slide-soluciones#comments</comments>
		<pubDate>Wed, 22 Jul 2009 00:07:44 +0000</pubDate>
		<dc:creator>Hans</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Cross Slide]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://blog.maisondelart.net/?p=28</guid>
		<description><![CDATA[Muchos somos habituales a plugins de JQuery tan útiles como Cross Slide, un impecable sistema de presentación de imágenes sin necesidad de usar Flash, pero no es tan sencillo implementarlo en Wordpress.]]></description>
			<content:encoded><![CDATA[<p><strong>Wordpress</strong>, desde hace varias versiones, viene de serie con su propia versión de <strong>JQuery</strong>, una versión mejorada del original con mejoras en CSS y otras modificaciones. Si sois usuarios del <em>plugin</em> <strong>Cross Slide</strong> sobre un tema en <strong>Wordpress</strong>, habréis visto que no funciona, debido a que no se llega a entender con el <strong>JQuery</strong> modificado de <strong>Wordpress</strong>.</p>
<p>Existen dos soluciones a este problema:</p>
<ol>
<li>Descargarse el original desde la web oficial de <strong>Jquery</strong> y sobreescribirlo en la carpeta <em>wp-includes/js/jquery/</em> en cada actualización de <strong>Wordpress</strong> (en caso de que uséis la actualización automática).</li>
<li>Usar una solución temporal más sencilla, sólo tocando el archivo wp-config.php, añadiendo una de las siguientes dos opciones:
<ul>
<li>
<pre>define('CONCATENATE_SCRIPTS', false );</pre>
</li>
<li>
<pre>define('SCRIPT_DEBUG', true);</pre>
</li>
</ul>
</li>
</ol>
<p>Cualquiera de las dos opciones es válida, aunque la segunda es mucho más cómoda. Seguramente, existirán incompatibilidades con otros <em>plugin</em> de <strong>Jquery</strong>, así que es conveniente, mientras llega una solución, usar el método del <em>wp-config.php</em>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.maisondelart.net/wordpress/wordpress-jquery-y-cross-slide-soluciones/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
