<?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>PicaTeclas &#187; librerías</title>
	<atom:link href="http://picateclas.net/posts/category/codigo/javascript/librerias/feed/" rel="self" type="application/rss+xml" />
	<link>http://picateclas.net</link>
	<description></description>
	<lastBuildDate>Tue, 27 Jul 2010 10:30:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Typeface.js: generando texto con Javascript, canvas y VML</title>
		<link>http://picateclas.net/posts/typefacejs-generando-texto-con-javascript-canvas-y-vml/</link>
		<comments>http://picateclas.net/posts/typefacejs-generando-texto-con-javascript-canvas-y-vml/#comments</comments>
		<pubDate>Mon, 27 Oct 2008 08:38:02 +0000</pubDate>
		<dc:creator>zetxek</dc:creator>
				<category><![CDATA[diseño]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[librerías]]></category>

		<guid isPermaLink="false">http://picateclas.net/?p=47</guid>
		<description><![CDATA[Un problema habitual en el diseño web es conseguir que las fuentes se dibujen de la misma manera en cada navegador, ya que, a pesar de que CSS es un estándar, la implementación de CSS que hace cada navegador dista bastante de ser uniforme (¿alguien ha dicho Internet Explorer?). La solución tradicional a este problema [...]]]></description>
			<content:encoded><![CDATA[<p>Un problema habitual en el diseño web es conseguir que las fuentes se dibujen de la misma manera en cada navegador, ya que, a pesar de que CSS es un estándar, la implementación de CSS que hace cada navegador dista bastante de ser uniforme (<em>¿alguien ha dicho Internet Explorer?</em>).</p>
<p>La solución tradicional a este problema solía ser la de crear los textos necesario mediante imágenes. La ventaja de esto es que el aspecto en cada navegador sería exactamente el esperado, y no hay límites en cuanto a los efectos o fuentes que se quieran usar... Pero es muy poco flexible, ya que para cada texto hay que crear la imagen correspondiente.</p>
<p>La siguiente solución es la creación las imágenes mediante flash. Esta solución es bastante versátil, pero tiene el problema de la accesibilidad del texto de cara a su indexación por los motores de búsqueda (aunque mitigada con las últimas actualizaciones de Google, esto sigue siendo un problema de cara a la optimización del contenido para los buscadores).</p>
<p>Aquí es donde entra typeface.js: nos permite de una manera sencilla (ver el código a continuación), multiplataforma (no importa el navegador) y flexible (permite aplicar diversos efectos que los navegadores no implementan de una manera uniforme) dar estilo a los textos de la página. Con algo como esto ya se dibujarían los textos...</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p47code2'); return false;">Ver código</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p472"><td class="code" id="p47code2"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;typeface-0.10.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;helvetiker_regular.typeface.js&quot;&gt;&lt;/script&gt;
&nbsp;
&lt;div class=&quot;myclass typeface-js&quot; style=&quot;font-family: Helvetiker&quot;&gt;
	Text here in Helvetiker font...
&lt;/div&gt;</pre></td></tr></table></div>

<p>Y uno de los resultados de uso podría ser el siguiente, sacado de su web...<br />
<a href="http://picateclas.net/wp-content/uploads/2008/10/typeface.jpg"><img class="aligncenter size-full wp-image-48" title="Ejemplo de Typeface.js" src="http://picateclas.net/wp-content/uploads/2008/10/typeface.jpg" alt="" width="500" height="101" /></a></p>
<p>Aunque evidentemente, esto no es tan maravilloso. El renderizado aún no es del todo eficiente, y aunque funciona bien para títulos y apartados concretos, dibujar toda la web mediante typeface.js es muy costoso. En cualquier caso, si os interesa no dudeis en echar un ojo a los <a href="http://typeface.neocracy.org/examples.html">ejemplos</a> y a <a href="http://typeface.neocracy.org/usage.html">la explicación de su uso</a>...</p>
<p>Más información | <a href="http://typeface.neocracy.org/">Typeface.js</a><br />
Vía | <a href="http://delicious.com/popular">Delicious Popular</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://picateclas.net/posts/typefacejs-generando-texto-con-javascript-canvas-y-vml/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
