<?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>Círculo de Maquetadores</title>
	<atom:link href="http://www.circulodemaquetadores.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.circulodemaquetadores.com</link>
	<description>Comunidad de Maquetadores Web</description>
	<lastBuildDate>Tue, 03 Jan 2012 12:53:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Como semantizar textos &#8211; Parte 1 &#8211; (Los formatos RDF)</title>
		<link>http://www.circulodemaquetadores.com/semantica-html-rdf-rdfa-erd</link>
		<comments>http://www.circulodemaquetadores.com/semantica-html-rdf-rdfa-erd#comments</comments>
		<pubDate>Tue, 03 Jan 2012 12:53:48 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Semántica Web]]></category>
		<category><![CDATA[eRDF]]></category>
		<category><![CDATA[RDF]]></category>
		<category><![CDATA[RDFa]]></category>
		<category><![CDATA[semántica]]></category>
		<category><![CDATA[semántica web]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1749</guid>
		<description><![CDATA[<p>Cada vez se hace más evidente que aportar textos enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots intentar deducir un dato basándose en el contenido que lo rodea, pero con semántica seremos nosotros quien le digamos a los robots que tipo de información es. Obtendremos así <strong>búsquedas más precisas y mejoradas</strong> aumentando también la experiencia de usuario, porque las búsquedas en Yahoo y Google mejoran su apariencia con contenidos semantizados.</p> <a href="http://www.circulodemaquetadores.com/semantica-html-rdf-rdfa-erd">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Cada vez se hace más evidente que aportar textos enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots intentar deducir un dato basándose en el contenido que lo rodea, pero con semántica seremos nosotros quien le digamos a los robots que tipo de información es. Obtendremos así <strong>búsquedas más precisas y mejoradas</strong> aumentando también la experiencia de usuario, porque las búsquedas en Yahoo y Google mejoran su apariencia con contenidos semantizados.</p>
<p>Actualmente la información semántica puede aparecer en la web de las siguientes formas:</p>
<ul>
<li>Ficheros <acronym lang="en" title="Resource Description Framework">RDF</acronym></li>
<li>Meta etiquetas</li>
<li>Utilizando vínculos relacionales</li>
<li>Etiquetas <acronym lang="en" title="HyperText Markup Language">HTML</acronym> semánticas</li>
<li>Microformatos</li>
<li>Microdatos</li>
</ul>
<p>Dejando de lado algunas etiquetas muy concretas HTML4 y el uso de metadatos en la cabecera de los documentos HTML, el primer paso firme para la adopción de textos enriquecidos fueron los eRDF (estándar para  <acronym lang="en" title="eXtensible HyperText Markup Language">XHTML</acronym> 1.0) y los RDFa (para  XHTML1.1). Estas semánticas las explicaremos con más detalle en este artículo.</p>
<h2>Texto enriquecido mediante RDF (<span lang="en">Resource Description Framework</span>)</h2>
<p>Se trata de es un <span lang="en">framework</span> para metadatos recomendado por la <acronym lang="en" title="World Wide Web Consortium">W3C</acronym> en 1999. Bajo una sintaxis <acronym lang="en" title="Extensible Markup Language">XML</acronym>, está pensado para dar <strong>semántica a la información y generar metadatos sobre dicha información</strong>. Esto permite que los datos puedan ser integrados y reutilizados.</p>
<p>RDF constituye una tecnología fundamental dentro de la Web Semántica, cuyo funcionamiento se resume en una conversión de recursos de la Web en expresiones compuestas que se estructuran en tres partes:</p>
<ul>
<li>Lo que se describe.</li>
<li>La propiedad del recurso que se desea definir.</li>
<li>El valor de la propiedad con el que se define la relación.</li>
</ul>
<h3>Ejemplo de RDF</h3>
<p>La frase: <cite>&#8220;La semántica y la web 3.0 &#8211; Parte 1, está escrito por Jorge López en el blog círculo de maquetadores&#8221;</cite>, se representa en RDF de esta manera:</p>
<pre lang="html4strict">
&lt;rdf:RDF&gt;
  &lt;rdf:Description about="http://www.circulodemaquetadores.com/semantica-RDF-RDFa"&gt;
  &lt;s:Creator&gt;Jorge López&lt;/s:Creator&gt;
  &lt;dc:title&gt; La semántica y la web 3.0 - Parte 1&lt;/dc:title&gt;
  &lt;dc:publisher&gt;Cículo de maquetadores&lt;/dc:publisher&gt;
  &lt;/rdf:Description&gt;
&lt;/rdf:RDF&gt;
</pre>
<p>El resto de información y gramáticas formales sobre RDF la podrás encontrar en la <a href="http://www.sidar.org/recur/desdi/traduc/es/rdf/rdfesp.htm" title="Abre en nueva ventana" target="_blank">correspondiente especificación</a> de la W3C.</p>
<h2>RDFa (<span lang="en">Resource Description Framework-in-attributes</span>)</h2>
<p>Se trata de extensiones específicas de XHTML 1.1, (a la espera de su implementación en HTML 5) propuestas por W3C.  Este método <strong>enriquece los textos a través de los atributos y anotaciones</strong> de las etiquetas XHTML invisibles para el usuario. Se validan mediante la <acronym lang="en" title="document type definition">DTD</acronym> – <span lang="en">Document Type Definition</span>- XHTML1.1+RDFa.  Aunque todo esto parezca muy complicado, en realidad de lo que se trata de extender el manejo de los atributos &#8220;rel&#8221;, &#8220;<span lang="en">content</span>&#8221; y &#8220;<span lang="en">property</span>&#8220;.</p>
<p>Para estandarizar su uso utilizaremos diccionarios predefinidos como Dublin Core. Para indicar en RDFa  que estamos utilizando un diccionario, lo haremos de la siguiente manera:</p>
<pre lang="html4strict">
&lt;body&gt;
  &lt;div class="articulo"&gt;
    &lt;h2> Como semantizar textos - Parte 1 &lt;/h2&gt;
    &lt;p>Texto del artículo.&lt;/p&gt;
    &lt;p>Autor: &lt;span property="dc:author" content="Jorge lópez"&gt; Jorge lópez &lt;/span>&lt;/p&gt;
    &lt;p>Fecha: &lt;span property="dc:date" content="2011-12-14"&gt;14 de diciembre de 2011&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/body&gt;
</pre>
<p>En el diccionario <span lang="en">Dublin Core</span> vienen especificados los términos <span lang="en">author</span> y <span lang="en">date</span>. Para buscar otros términos solo tendremos que buscarlos en el diccionario.</p>
<p>Como vemos la ventaja de RDFa es que sus reglas son genéricas, lo que facilitará la labor de muchos autores.  <strong>Las páginas que no contienen RDFa se visualizan igual</strong> que las que tienen, ya que de lo que se trata es de aportar riqueza semántica a la información, no de cambiar ni el contenido ni de la disposición de los elementos.</p>
<p>Nuevamente, la mejor manera de completar la información sobre RDFa es hacer referencia al <a href="http://www.w3.org/TR/rdfa-in-html/" target="_blank" title="Abre en nueva ventana">borrador de trabajo</a> sobre RDFa de la W3C. <a href="http://support.google.com/webmasters/bin/answer.py?hl=es&#038;answer=146898" target="_blank" title="Abre en nueva ventana">El blog para webmasters de google</a> también recomienda utilizar marcado RDFa para mejorar los resultados y además proporciona algunos ejemplos.</p>
<h2>eRDF (<span lang="en">Embedded RDF</span>)</h2>
<p>El formato eRDF fue creado en 2005 por Ian Davis inspirado por los microformatos. Se trata de una sintaxis para extraer la información del documento ya sea por medio de un Parser o una Hoja de estilos <acronym lang="en" title="Extensible Stylesheet Language- Transformations">XSLT</acronym>. eRDF solo está parcialmente apoyado por la W3C.</p>
<p>Para que un documento HTML le sea reconocido la existencia de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra sumando el atributo <span lang="en">profile</span> en el <span lang="en">head</span> del documento:</p>
<pre>
  &lt;head profile="http://purl.org/NET/erdf/profile"&gt;
</pre>
<p>Toda la información sobre eRDF en el blog de <a href="http://blog.iandavis.com/2005/10/19/introducing-embedded-rdf/" target="_blank" hreflang="en" title="Página en inglés abre en nueva ventana">Ian Davis</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/semantica-html-rdf-rdfa-erd/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>La semántica de los enlaces: definiciones de atributo rev y rel</title>
		<link>http://www.circulodemaquetadores.com/semantica-enlaces-definiciones-atributo-rev-rel</link>
		<comments>http://www.circulodemaquetadores.com/semantica-enlaces-definiciones-atributo-rev-rel#comments</comments>
		<pubDate>Fri, 09 Dec 2011 13:10:25 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Semántica Web]]></category>
		<category><![CDATA[Enlaces]]></category>
		<category><![CDATA[semántica]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1742</guid>
		<description><![CDATA[<h2>La semántica de los enlaces: definiciones de atributo rev y rel</h2>
<p>Con la aparición de los microformatos y más recientemente de los microdatos de <acronym title="HyperText Markup Language" lang="en">HTML</acronym>5, se ha desatado un enorme interés por la semántica. Hay muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e indexar mejor la información que generamos. Un método clásico, pero no muy extendido, para generar metadados es a través de los enlaces.</p> <a href="http://www.circulodemaquetadores.com/semantica-enlaces-definiciones-atributo-rev-rel">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Con la aparición de los microformatos y más recientemente de los microdatos de <acronym title="HyperText Markup Language" lang="en">HTML</acronym>5, se ha desatado un enorme interés por la semántica. Hay muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e indexar mejor la información que generamos. Un método clásico, pero no muy extendido, para generar metadados es a través de los enlaces.</p>
<p>Repasemos algunos atributos básicos de los enlaces. Como veremos, algunos de ellos ya aportan información extra sobre el contenido enlazado:</p>
<h2>Definiciones de atributos</h2>
<ul>
<li><strong>href</strong>: Especifica la localización de un recurso de la Web. La ruta generada podrá ser absoluta o relativa respecto a la web.</li>
<li><strong>hreflang</strong>: Ester atributo sólo puede utilizarse junto con href, porque especifica el idioma del recurso enlazado.</li>
<li><strong>title</strong>: Añade información sobre un vínculo. Esta información puede ser utilizada de manera opcional por los agentes de usuario o dependiendo de la versión de navegador, puede ser representada mediante un <span lang="en">tool-tip</span>.</li>
<li><strong>name</strong>: Asigna un nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a modo de ancla.</li>
<li><strong>type</strong>: Especifica qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos especificar que lo que enlazamos es un documento <acronym title="portable document format" lang="en">PDF</acronym>. Si es un tipo de contenido no soportado por los agentes de usuario, pueden optar por no mostrarlo. En <a href="http://www.circulodemaquetadores.com/lista-de-tipos-de-contenido-mime-para-enlaces-a-documentos" title="Abre en nueva ventana" target="_blank" hreflang="en">este artículo</a> repasamos algunos de los tipos de contenido registrados. </li>
<li><strong>charset</strong>: Este atributo especifica la codificación de caracteres de la página o recurso enlazado con el atributo href.</li>
</ul>
<p>Para enriquecer semánticamente los enlaces, los atributos más interesantes y puede que más útiles son rev y rel. Ahora veremos su función y sus valores.</p>
<h2>Atributos rev y rel</h2>
<ul>
<li><strong>rel</strong>: Permite definir la relación entre la página actual y la enlazada.</li>
<li><strong>rev</strong>: Define la relación que tendrá la página enlazada con la actual.</li>
</ul>
<h2>Valores de los atributos de rev y rel</h2>
<ul>
<li><strong>alternate</strong>: Indica que es una versión alternativa al documento actual. Cuando se utiliza conjuntamente con el atributo &#8220;hreflang&#8221;, significa que enlaza a una versión traducida del documento. Si es utilizada con el atributo &#8220;media&#8221;, implica que esa versión está preparada para un medio diferente (como una impresora)</li>
<li><strong>stylesheet</strong>: Indica que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con &#8220;Alternate&#8221; para ofrecer hojas de estilo alternativas seleccionables por el usuario.</li>
<li><strong>start</strong>: Indica a los motores de búsqueda que el documento actual es considerado por el autor como el punto de inicio de un conjunto de documentos. Por ejemplo la primera página de una paginación o el primer capítulo de un manual&#8230;etc.</li>
<li><strong>next &#8211; prev</strong>: Indica que es el documento que enlazados es anterior o siguiente al actual dentro de una secuencia lógica de documentos. En una paginación estos valores pueden sernos muy útiles.</li>
<li><strong>index</strong>: Es el documento que hace la función de índice en una secuencia de documentos.</li>
<li><strong>copyright</strong>: Se refiere al aviso de copyright del documento actual.</li>
<li><strong>help</strong>: Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)</li>
</ul>
<p>La <a href="http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-links" target="_blank" title="Abre en nueva ventana" hreflang="en">especificación oficial de HTML</a> define la lista completa de tipos de relaciones que se pueden utilizar.</p>
<h2>Como microformatos</h2>
<p>Se han creado <a href="http://microformats.org/2005/12/01/rel-vs-rev" target="_blank" title="Abren en nueva ventana" hreflang="en">varios  microformatos</a> para ser utilizados como valor de estos atributos. Algunos de estos microformatos son tan útiles y se han hecho tan populares que incluso han sido recomendados por google para no ser penalizados, a continuación veremos unos pocas aplicaciones:</p>
<ul>
<li><strong>nofollow</strong>: Sin duda es el más popular de todos. Fue propuesto por algunos buscadores para indicar qué enlace no debe ser considerado por los algoritmos de posicionamiento y de este modo para luchar más eficazmente contra los spammers.  Su aplicación más común, es para aplicarlo a respuestas y comentarios en blogs. <a href="http://microformats.org/wiki/rel-nofollow" target="_blank" title="Abre en nueva ventana" hreflang="en">Enlace a documentación</a>.</li>
<li><strong>license</strong>: Indicar el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar que el destino del enlace es la licencia del contenido de la página actual. <a href="http://microformats.org/wiki/rel-license" target="_blank" title="Abre en nueva ventana" hreflang="en">Enlace a documentación</a></li>
<li><strong>tag</strong>: sirve para agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs mediante la adopción de este tipo de etiquetas. <a href="http://microformats.org/wiki/rel-tag" target="_blank" title="Abre en nueva ventana" hreflang="en">Enlace a documentación</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/semantica-enlaces-definiciones-atributo-rev-rel/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Umbraco</title>
		<link>http://www.circulodemaquetadores.com/umbraco</link>
		<comments>http://www.circulodemaquetadores.com/umbraco#comments</comments>
		<pubDate>Tue, 06 Dec 2011 22:56:55 +0000</pubDate>
		<dc:creator>Eduardo Sainz</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[.NET]]></category>
		<category><![CDATA[microsoft]]></category>
		<category><![CDATA[plantillas]]></category>
		<category><![CDATA[Umbraco]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1715</guid>
		<description><![CDATA[Es posible que a muchos no os suene de nada Umbraco, pero hoy por hoy, es uno de los CMS muy a tener en cuenta. Está desarrollado con C# y funciona sobre infraestructura Microsoft (.net). Con Umbraco se pueden construir &#8230; <a href="http://www.circulodemaquetadores.com/umbraco">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Es posible que a muchos no os suene de nada <strong>Umbraco</strong>, pero hoy por hoy, es uno de los CMS muy a tener en cuenta. Está desarrollado con C# y funciona sobre infraestructura Microsoft (.net).</p>
<p>Con Umbraco se pueden construir desde sitios pequeños (páginas personales, blogs) hasta crear sitios avanzados, portales, proyectos para grandes empresas. De hecho, grandes compañías ya han apostado por este gestor, algunas de renombre como Toyota, Sandisk, Microsoft, Peugeot, Vogue &#8230;, veamos que nos puede ofrecer este CMS.</p>
<p><img src="images/umbraco.png" alt="Logotipo de Umbraco" class="aligncenter size-full wp-image-1687" /></p>
<h2>Un poco de historia</h2>
<p>Aunque muchos lo hayamos conocido hace poco, Umbraco no es nuevo; fue desarrollado por Niels Hartvig en el año 2000 y fue liberado como software open source en 2004, por lo que Umbraco se convierte en un CMS gratuito con un gran potencial. Está contruído sobre <strong>Microsoft .NET Framework</strong>, sí, Microsoft y OpenSource en el mismo saco, aunque suene raro <img src='http://www.circulodemaquetadores.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p>De Umbraco se puede destacar la sencillez y fácilidad de manejo, permite usar los controles de usuario .NET que hayas desarrollado con Visual Studio sin necesidad de realizar cambios de código, o bien utilizar controles personalizados comerciales. Soporta la mayoría de los lenguajes de la red y, por supuesto, todo lo referido a Ajax; aunque está escrito en C#, permite utilizar cualquier lenguaje compatible con .NET como VB.NET, IronPython, IronRuby, e incluso lenguajes “funky” como LOLCODE.</p>
<h2>Maquetación de plantillas en Umbraco</h2>
<p>Los <strong>maquetadores estamos de suerte</strong>, ya que incluye un compacto motor de plantillas, que permite editar y rediseñar plantillas existentes o bien, crear nuestro propio <string>HTML y CSS</strong> sin restricciones, con un código limpio y accesible.</p>
<p>En la web oficial, nos ofrecen un <a href="http://our.umbraco.org/projects/starter-kits/templatecreator">una plantilla base</a>, como punto de partida a nuestro diseño, utilizando el framework css 960 e incluyendo algunos propiedades de <strong>css3</strong>.</p>
<p>También dispone de una <a href="http://our.umbraco.org/forum/templating/templates-and-document-types">comunidad</a> donde plantear nuestras dudas de maquetación </p>
<p>Después de trabajar con Umbraco, podemos afirmar que es unos de los gestores más flexibles a la hora de maquetar.</p>
<h2>Enlaces de interés</h2>
<ul>
<li><a href="http://www.umbraco.com">Web oficial</a></li>
<li><a href="http://our.umbraco.org/">Comunidad oficial</a></li>
<li><a href="http://holaumbraco.org/">Umbraco españa</a></li>
<li><a href="http://www.umbracolombia.com">Umbraco colombia</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/umbraco/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Archivos HTC &#8211; HTML Components</title>
		<link>http://www.circulodemaquetadores.com/archivos-htc-html-components</link>
		<comments>http://www.circulodemaquetadores.com/archivos-htc-html-components#comments</comments>
		<pubDate>Thu, 29 Sep 2011 14:52:39 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1707</guid>
		<description><![CDATA[<h2>¿Qué son los componentes <acronym lang="en" title="HTML components">HTC</acronym>?</h2>
<p>Los componentes HTC, fueron desarrollados por <span lang="en">Microsoft</span> para <strong>implementarlos en Internet Explorer 5.5</strong> y posteriores. La idea era proporcionar un mecanismo alternativo para <strong>encapsular código y comportamiento <acronym lang="en" title="Dynamic HTML">DHTML</acronym></strong> en un componente de script.</p> <a href="http://www.circulodemaquetadores.com/archivos-htc-html-components">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h2>¿Qué son los componentes <acronym lang="en" title="HTML components">HTC</acronym>?</h2>
<p>Los componentes HTC, fueron desarrollados por <span lang="en">Microsoft</span> para <strong>implementarlos en Internet Explorer 5.5</strong> y posteriores. La idea era proporcionar un mecanismo alternativo para <strong>encapsular código y comportamiento <acronym lang="en" title="Dynamic HTML">DHTML</acronym></strong> en un componente de script.</p>
<p>En realidad los HTC son archivos <acronym lang="en" title="Extensible Markup Language">XML</acronym> que contienen secuencias de comandos y elementos específicos, como propiedades, métodos y eventos que definen dicho componente. Luego se guarda con extensión .htc.</p>
<h2>¿Cómo se ejecutan?</h2>
<p>Los archivos HTC se ejecutan en la hoja de estilo, con la propiedad <span lang="en">behavior</span>, de esta manera:</p>
<pre lang="html4strict">
img {
  behavior: url(iepngfix.htc);
}
</pre>
<p>La propiedad <span lang="en">behavior</span> permite utilizar <acronym lang="en" title="Cascading Style Sheets">CSS</acronym> para fijar un script a un elemento específico y aplicar a ese elemento componentes dinámicos, como los mencionados archivos .HTC.</p>
<p>Ten en cuenta que <strong><span lang="en">behavior</span> es una propiedad no estándar</strong> que solo soporta Internet explorer. Por esta razón y para prevenir errores de validación, es conveniente aplicarla en una hoja de estilo exclusiva para explorer.</p>
<h2>¿Para qué se utilizan?</h2>
<p>Actualmente su utilización es muy limitada. Lo más normal es utilizarlos como hacks para <acronym lang="en" title="Internet Explorer">IE</acronym> o para replicar características que otros navegadores tienen y Explorer no puede reproducir de forma nativa.</p>
<h2>¿Cómo modificarlos?</h2>
<p>No hay mucho que decir en cuanto a desarrollo y modificación de  archivos de HTC. Son básicamente estándar de Javascript, con un pequeño envoltorio XML. Por lo que si sabes Javascript, no deberías tener demasiados problemas modificar un HTC. De todas formas, <span lang="en">Microsoft</span> ha publicado documentación al respecto en <a href="http://msdn.microsoft.com/en-us/library/ms531018%28v=vs.85%29.aspx" target="_blank" title="Abre en nueva ventana">HTC Reference</a></p>
<h2>¿Por qué deberías utilizarlos?:</h2>
<p>Como he dicho antes, solo tendría sentido utilizarlos si vas a escribir o modificar un hack para IE. Para prácticamente todo lo demás Javascript es la mejor opción.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/archivos-htc-html-components/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>La tabla periódica del SEO</title>
		<link>http://www.circulodemaquetadores.com/tabla-periodica-seo-posicionamient</link>
		<comments>http://www.circulodemaquetadores.com/tabla-periodica-seo-posicionamient#comments</comments>
		<pubDate>Sat, 27 Aug 2011 16:48:26 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[Posicionamiento Web]]></category>
		<category><![CDATA[Recursos]]></category>
		<category><![CDATA[posicionamiento web]]></category>
		<category><![CDATA[seo]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1694</guid>
		<description><![CDATA[<p><img src="http://searchengineland.com/download/seotable/SearchEngineLand-Periodic-Table-of-SEO-condensed-small.png" alt="Search Engine Land Periodic Table of SEO Ranking Factors" width="200" height="248" class="aligncenter size-full wp-image-1687" /></p>
<p class="aligncenter">Imagen de <a href="http://searchengineland.com" target="_blank" title="Página en inglés abre en nueva ventana">Search Engine Land</a></p> <a href="http://www.circulodemaquetadores.com/tabla-periodica-seo-posicionamient">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://searchengineland.com/download/seotable/SearchEngineLand-Periodic-Table-of-SEO-condensed-small.png" alt="Search Engine Land Periodic Table of SEO Ranking Factors" width="200" height="248" class="aligncenter size-full wp-image-1687" /></p>
<p class="aligncenter">Imagen de <a href="http://searchengineland.com" target="_blank" title="Página en inglés abre en nueva ventana">Search Engine Land</a></p>
<p>El portal <a href="http://searchengineland.com/introducing-the-periodic-table-of-seo-ranking-factors-77181" lang="en" target="_blank" title="Página en inglés abre en nueva ventana">Search Engine Land</a>, ha creado una imprescindible infografía que organiza como si de una tabla periódica se tratase,  algunos factores que impactarán de manera positiva o negativa en el posicionamiento de una web.</p>
<p>Hay disponibles dos versiones de la tabla para descarga: la versión en <a href="http://searchengineland.com/download/seotable/SearchEngineLand-Periodic-Table-of-SEO.pdf" target="_blank" title="Documento PDF abre en nueva ventana">formato extendido</a> (con las descripciones y leyenda completa) y en <a href="http://searchengineland.com/download/seotable/SearchEngineLand-Periodic-Table-of-SEO-condensed.pdf" target="_blank" title="Documento PDF abre en nueva ventana">formato reducido</a> (solo el esquema).</p>
<p>En este artículo podréis encontrar un breve resumen y sobretodo el significado de las abreviaturas de la tabla para poder decodificarla correctamente.</p>
<h3>Factores internos de posicionamiento</h3>
<table summary="Son aquellos factores que están dentro del control del editor">
<caption>Factores <span lang="en">On page</span>:</caption>
<thead>
<tr>
<th scope="col">Area</th>
<th scope="col">Abreviatura</th>
<th scope="col">Significado</th>
<th scope="col">Importancia del factor</th>
</tr>
</thead>
<tbody>
		<!--contenido--></p>
<tr>
<th rowspan="5" scope="row">Contenido</th>
<td><abbr lang="en" title="Content quality">Cq</abbr></td>
<td>Calidad de contenido</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Content research">Cr</abbr></td>
<td>Investigación de las palabras clave</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Content words">Cw</abbr></td>
<td>Inserción de las palabras clave en el contenido</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Content engage">Ce</abbr></td>
<td>Contenido participativo</td>
<td>+2</td>
</tr>
<tr>
<td><abbr lang="en" title="Content fresh">Cf</abbr></td>
<td>Contenido fresco y original</td>
<td>+2</td>
</tr>
<p>		<!--Código--></p>
<tr>
<th rowspan="3" scope="row">Código <acronym lang="en" title="HyperText Markup Language">HTML</acronym></th>
<td><abbr lang="en" title="HTML titles">Ht</abbr></td>
<td>Título de  la página</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="HTML description">Hd</abbr></td>
<td>Descripción de la página</td>
<td>+2</td>
</tr>
<tr>
<td><abbr lang="en" title="HTML headers">Hh</abbr></td>
<td>Encabezados de la página</td>
<td>+1</td>
</tr>
<p>		<!--Arquitectura--></p>
<tr>
<th rowspan="3" scope="row">Arquitectura</th>
<td><abbr lang="en" title="Architechnture crawl">Ac</abbr></td>
<td>Página fácilmente rastreable</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Architecture page speed">As</abbr></td>
<td>Velocidad de carga</td>
<td>+2</td>
</tr>
<tr>
<td><abbr lang="en" title="Architecture URL">Au</abbr></td>
<td>Construcción de la <acronym lang="en" title="Uniform Resource Locator">URL</acronym></td>
<td>+1</td>
</tr>
</tbody>
</table>
<h3>Factores externos de posicionamiento</h3>
<table summary="Aquellos factores que los editores no pueden controlar directamente">
<caption>Factores <span lang="en">Off page</span>:</caption>
<thead>
<tr>
<th scope="col">Area</th>
<th scope="col">Abreviatura</th>
<th scope="col">Significado</th>
<th scope="col">Importancia del factor</th>
</tr>
</thead>
<tbody>
		<!--Links--></p>
<tr>
<th rowspan="3" scope="row">Enlaces</th>
<td><abbr lang="en" title="Link quality">Lq</abbr></td>
<td>Calidad de los enlaces entrantes</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Link text">Lt</abbr></td>
<td>Texto de los enlaces</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Link number">Ln</abbr></td>
<td>Número de enlaces que apuntan a tu sitio</td>
<td>+2</td>
</tr>
<p>		<!--Social--></p>
<tr>
<th rowspan="2" scope="row">Social</th>
<td><abbr lang="en" title="Social reputation">Sr</abbr></td>
<td>Reputación del sitio</td>
<td>+2</td>
</tr>
<tr>
<td><abbr lang="en" title="Social shares">Ss</abbr></td>
<td>Con cuántos usuario se comparte el sitio</td>
<td>+1</td>
</tr>
<p>		<!--Confianza--></p>
<tr>
<th rowspan="2" scope="row">Confianza</th>
<td><abbr lang="en" title="Trust Authority">Ta</abbr></td>
<td>Reputación del sitio</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Trust History">Th</abbr></td>
<td>Antigüedad del dominio</td>
<td>+1</td>
</tr>
<p>		<!--Personal--></p>
<tr>
<th rowspan="4" scope="row">Personal</th>
<td><abbr lang="en" title="Personal country">Pc</abbr></td>
<td>País de origen de la visitas</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Personal locality">Pl</abbr></td>
<td>Ciudad de origen de la visitas</td>
<td>+3</td>
</tr>
<tr>
<td><abbr lang="en" title="Personal history">Ph</abbr></td>
<td>Fidelidad de las visitas</td>
<td>+2</td>
</tr>
<tr>
<td><abbr lang="en" title="Personal social">Ps</abbr></td>
<td>Opinión de tus amigos sobre el sitio</td>
<td>+1</td>
</tr>
</tbody>
</table>
<h3>Factores con posible penalización</h3>
<table summary="Son técnicas tramposas destinadas a engañar al navegador que podrían penalizar el posicionamiento de una página">
<caption>Violaciones</caption>
<thead>
<tr>
<th scope="col">Abreviatura</th>
<th scope="col">Significado</th>
<th scope="col">Importancia del factor</th>
</tr>
</thead>
<tbody>
<tr>
<td><abbr lang="en" title="Violation thin">Vt</abbr></td>
<td>Contenido superficial y sin sustancia</td>
<td>-2</td>
</tr>
<tr>
<td><abbr lang="en" title="Violation stuffing">Vs</abbr></td>
<td>Utilización excesiva de palabras clave</td>
<td>-1</td>
</tr>
<tr>
<td><abbr lang="en" title="Violation Hidden">Vh</abbr></td>
<td>Ocultación de contenido</td>
<td>-1</td>
</tr>
<tr>
<td><abbr lang="en" title="Violation cloaking">Vc</abbr></td>
<td>Engañar a los robots de búsqueda</td>
<td>-3</td>
</tr>
<tr>
<td><abbr lang="en" title="Violation paid links">Vp</abbr></td>
<td>Uso de enlaces de pago</td>
<td>-3</td>
</tr>
<tr>
<td><abbr lang="en" title="Violation link spam">Vi</abbr></td>
<td>Creación de spam</td>
<td>-1</td>
</tr>
</tbody>
</table>
<h3>Tipos de bloqueos</h3>
<table summary="Incluso si un sitiosno viola las reglas, algunos buscadores pueden decidir bloquearlo si creen que hay contenido inadecuado">
<caption>Bloqueos</caption>
<thead>
<tr>
<th scope="col">Abreviatura</th>
<th scope="col">Significado</th>
<th scope="col">Importancia del factor</th>
</tr>
</thead>
<tbody>
<tr>
<td><abbr lang="en" title="Blocking">Bp</abbr></td>
<td>Bloqueos personalizados</td>
<td>-1</td>
</tr>
<tr>
<td><abbr lang="en" title="Blocking">Bt</abbr></td>
<td>Bloqueos masivos o totales</td>
<td>-3</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/tabla-periodica-seo-posicionamient/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tecnologías propietarias en el desarrollo  web</title>
		<link>http://www.circulodemaquetadores.com/tecnologias-propietarias-desarrollo-web</link>
		<comments>http://www.circulodemaquetadores.com/tecnologias-propietarias-desarrollo-web#comments</comments>
		<pubDate>Mon, 22 Aug 2011 15:38:26 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Noticias]]></category>
		<category><![CDATA[internet]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1683</guid>
		<description><![CDATA[<p>Las Innovaciones patentadas por los fabricantes de <span lang="en">software</span> son algo muy común. Algunas se han convertido en tecnologías básicas para el devenir del desarrollo web y han sido ampliamente aceptadas,  otras han fracasado miserablemente y han caído en el olvido.</p>
<a href="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/proprietary-software.jpg"><img src="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/proprietary-software.jpg" alt="Software propietario" title="proprietary-software" width="279" height="181" class="aligncenter size-full wp-image-1687" /></a> <a href="http://www.circulodemaquetadores.com/tecnologias-propietarias-desarrollo-web">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Las Innovaciones patentadas por los fabricantes de <span lang="en">software</span> son algo muy común. Algunas se han convertido en tecnologías básicas para el devenir del desarrollo web y han sido ampliamente aceptadas,  otras han fracasado miserablemente y han caído en el olvido.</p>
<p><a href="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/proprietary-software.jpg"><img src="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/proprietary-software.jpg" alt="Software propietario" title="proprietary-software" width="279" height="181" class="aligncenter size-full wp-image-1687" /></a></p>
<p>En algunos casos, estas tecnologías solo funcionan en un entorno concreto, en otros solo funcionan mediante un plugin específico que no tiene por qué estar instalado junto al navegador, incluso hay tecnologías que se debe pagar licencia para poder ser utilizadas.</p>
<p>En este artículo repasaremos brevemente algunas de las más importantes.</p>
<h3>VML &#8211; <span lang="en">Vector Markup Language</span></h3>
<ul>
<li><strong>Desarrolladores</strong>: Autodesk, Hewlett- Packard, Macromedia, <span lang="en">Microsoft</span> y Visio.</li>
<li><strong>Características</strong>: VML es un lenguaje <acronym lang="en" title="Extensible Markup Language">XML</acronym> para la creación de gráficos vectoriales. Fue presentado para su estandarización al <acronym lang="en" title="World Wide Web Consortium">W3C</acronym> en 1998 compitiendo con <acronym lang="en" title="Precision Graphics Markup Language">PGML</acronym>. Tras de un largo examen, el W3C decidió combinar esos dos formatos originando el formato <acronym lang="en" title="Scalable Vector Graphics">SVG</acronym>.</li>
<li><strong>Inconvenientes</strong>: Sólo las aplicaciones de <span lang="en">Microsoft</span> soportan este lenguaje.</li>
</ul>
<h3>PGML &#8211; <span lang="en">Precision Graphics Markup Language</span></h3>
<ul>
<li><strong>Desarrolladores</strong>: Adobe Systems, <acronym lang="en" title="International Business Machines">IBM</acronym>, Netscape, y Sun Microsystems</li>
<li><strong>Características</strong>: Otro lenguaje basado en XML para la representación de gráficos vectoriales. Se presentó a la W3C no siendo aprobado para su recomendación.</li>
</ul>
<h3>Adobe Flash</h3>
<ul>
<li><strong>Desarrollador</strong>: Adobe systems</li>
<li><strong>Características</strong>: Se trata de la tecnología de creación y edición de animaciones vectoriales más popular. Es actualmente la herramienta más utilizada para la reproducción de video en la red, aunque con la implantación progresiva de <acronym lang="en" title="HyperText Markup Language">HTML</acronym>5 y <acronym lang="en" title="Cascading Style Sheets">CSS</acronym>3, puede que esta situación cambie en poco tiempo.</li>
<li><strong>Inconvenientes</strong>: Es necesario que el navegador tenga instalado el plugin correspondiente para poder visualizar el contenido generado en Flash.</li>
</ul>
<h3><span lang="en">Silverlight</span></h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Microsoft</span></li>
<li><strong>Características</strong>: <span lang="en">Silverlight</span> fue lanzado en 2007 para competir con Flash en la creación de contenido multimedia para la web. Por ahora no ha conseguido una implantación muy profunda.</li>
<li><strong>Inconvenientes</strong>: Esta tecnología no utiliza el estándar SVG, además el contenido introducido en la red mediante <span lang="en">Silverlight</span>, solo podrá ser actualizado y modificado desde la plataforma <span lang="en">Windows</span>.</li>
</ul>
<h3>Applets de Java</h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Sun Microsystems</span></li>
<li><strong>Características</strong>: Un applet es un programa precompilado que se puede incrustar en un HTML. La idea es que deben ser descargados y ejecutados por el navegador, lo que permite crear programas que se puedan ejecutar solo cargando una web. Se pueden utilizar en cualquier sistema que tenga instalada una Java <span lang="en">Virtual Machine</span>.</li>
<li><strong>Inconvenientes</strong>: Del mismo modo que Flash, los applets requieren un plugin específico que no está disponible por defecto en los navegadores.</li>
</ul>
<h3>Controles ActiveX</h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Microsoft</span></li>
<li><strong>Características</strong>: Fueron la respuesta de <span lang="en">Microsoft</span> a los applets de Java. Están construidos sobre el modelo de componentes de Windows.</li>
<li><strong>Inconvenientes</strong>: Sólo operan oficialmente en Internet Explorer (aunque existen opciones para ejecutarlos en otros navegadores) y en el sistema operativo <span lang="en">Windows</span>.</li>
</ul>
<h3>Fuentes <span lang="en">OPEN TYPE</span></h3>
<ul>
<li><strong>Desarrolladores</strong>: <span lang="en">Microsoft</span>, Adobe systems</li>
<li><strong>Características</strong>: OpenType es un formato de fuente basado en TrueType. La especificación continúa en desarrollo y en la actualidad se encuentra en proceso de convertirse en un estándar abierto. Debido a su su versatilidad es ampliamente utilizado en la mayoría de los navegadores y sistemas operativos.</li>
</ul>
<h3>Fuentes EOT &#8211; <span lang="en">Embedded OpenType</span></h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Microsoft</span></li>
<li><strong>Características</strong>: Es una variación de los formatos TrueType y OpenType.</li>
<li><strong>Inconvenientes</strong>: Es compatible exclusivamente con Internet Explorer.</li>
</ul>
<h3>Formato GIF &#8211; <span lang="en">Graphics Interchange Format</span></h3>
<ul>
<li><strong>Desarrollador</strong>: CompuServe </li>
<li><strong>Características</strong>: Es un formato de imagen sin pérdida que comprime los archivos usando un algoritmo llamado <acronym lang="en" title="Lempel-Ziv-Welch">LZW</acronym>. Fué muy utilizado en los noventa sobre todo para mostrar pequeñas animaciones, al tratarse del único formato soportado por multitud de navegadores que permita dicho efecto.</li>
<li><strong>Inconvenientes</strong>: Solo puede contener 256 colores. En la mayoría de los casos tiene un rendimiento de compresión inferior respecto al formato libre <acronym lang="en" title="Portable Network Graphics">PNG</acronym> </li>
</ul>
<h3>Tecnología ASP &#8211; <span lang="en">Active Server Pages</span></h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Microsoft</span></li>
<li><strong>Características</strong>: ASP es un lenguaje de servidor que permite el uso de diferentes scripts y componentes ya desarrollados junto con HTML para mostrar páginas dinámicas.</li>
<li><strong>Inconvenientes</strong>: Solo funciona con servidores que utilizan el sistema operativo <span lang="en">Microsoft</span>.</li>
</ul>
<h3>VBScript &#8211; Visual Basic Script</h3>
<ul>
<li><strong>Desarrollador</strong>: <span lang="en">Microsoft</span> </li>
<li><strong>Características</strong>: Fue un lenguaje de programación de scripts basado en Visual Basic desarrollado para competir, con poco éxito, con Javascript en entornos de cliente. Microsoft decidió abandonar esta tecnología en favor de .NET.</li>
<li><strong>Inconvenientes</strong>: Era compatible exclusivamente con Internet Explorer.</li>
</ul>
<p>¿Destacarías alguna tecnología propietaria más?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/tecnologias-propietarias-desarrollo-web/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Una mirada sobre la mejora progresiva y la degradación elegante</title>
		<link>http://www.circulodemaquetadores.com/mejora-progresiva-degradacion-elegante</link>
		<comments>http://www.circulodemaquetadores.com/mejora-progresiva-degradacion-elegante#comments</comments>
		<pubDate>Tue, 16 Aug 2011 15:00:35 +0000</pubDate>
		<dc:creator>Jorge López</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Navegadores]]></category>
		<category><![CDATA[Semántica Web]]></category>
		<category><![CDATA[contenidos]]></category>
		<category><![CDATA[semántica web]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1667</guid>
		<description><![CDATA[<p>
<a href="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/images.jpeg">
<img src="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/images.jpeg" alt="desarrollo multidispositivo. Imagen recogida del blog del desarrollador noruego Jørn Kinderås" title="Imagen recogida del blog del desarrollador noruego Jørn Kinderås" width="279" height="181" class="aligncenter size-full wp-image-1677" /></a>
</p>
<p>Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?</p>
<p>Existen dos estrategias para afrontar este reto: la <strong>degradación elegante</strong> (<span lang="en">graceful degradation</span>)  y la <strong>mejora progresiva</strong> (<span lang="en">progressive enhancement</span>).</p> <a href="http://www.circulodemaquetadores.com/mejora-progresiva-degradacion-elegante">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>
<a href="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/images.jpeg"><br />
<img src="http://www.circulodemaquetadores.com/wp-content/uploads/2011/08/images.jpeg" alt="desarrollo multidispositivo. Imagen recogida del blog del desarrollador noruego Jørn Kinderås" title="Imagen recogida del blog del desarrollador noruego Jørn Kinderås" width="279" height="181" class="aligncenter size-full wp-image-1677" /></a>
</p>
<p>Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?</p>
<p>Existen dos estrategias para afrontar este reto: la <strong>degradación elegante</strong> (<span lang="en">graceful degradation</span>)  y la <strong>mejora progresiva</strong> (<span lang="en">progressive enhancement</span>).</p>
<p>Estas dos filosofías de desarrollo coinciden en varios puntos:</p>
<ul>
<li>Un sitio web debe <strong>funcionar correctamente ante la multiplicidad de navegadores y dispositivos</strong>.</li>
<li>Hay que <strong>separar en varias capas el contenido</strong>, la presentación y la funcionalidad de los proyectos.</li>
<li>Lo más importante es el <strong>marcado semántico</strong> y la extensión de los estándares web.</li>
</ul>
<p>En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.</p>
<h3>Degradación elegante</h3>
<p>La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo <a href="http://en.wikipedia.org/wiki/David_Marr_%28neuroscientist%29" title="Página en inglés, abre en nueva ventana" lang="en">David Courtenay Marr</a>. La traslación al diseño web viene a significar que un sitio <strong>debe funcionar y visualizarse de forma básicamente parecida</strong> independientemente del navegador o dispositivo utilizado.  Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.</p>
<p>En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como <acronym lang="en" title="Cascading Style Sheets">CSS</acronym>3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a <strong>anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad</strong>. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?</p>
<p>Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no  resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.</p>
<p>La técnica de la degradación elegante conlleva un <strong>tiempo extra de optimización para cada navegador</strong> (<span lang="en">Cross-browser</span>). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.</p>
<p>Como  desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.</p>
<h3>Mejora progresiva</h3>
<p>El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia <a href="http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en">Inclusive Web Design for the Future</a> en 2003.</p>
<p>Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.</p>
<p>Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que <strong>nuestros desarrollos estén mejor preparados para soportar los estándares del futuro</strong>. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?</p>
<p>Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:</p>
<ul>
<li>La maquetación debe permitir el <strong>correcto acceso a la información</strong> de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.</li>
<li>Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).</li>
</ul>
<p>Algunos ejemplos de mejora progresiva  pueden ser:</p>
<ul>
<li>La utilización de una <strong><acronym lang="en" title="Application programming interface">API</acronym> de tipografías</strong> (como Google) para aquellos navegadores que pueden soportarlas.</li>
<li><strong>Propiedades CSS3</strong> como <span lang="en">text-shadow</span>, <span lang="en">border-radius</span> o <span lang="en">Gradient</span> para los navegadores habilitados.</li>
<li>Animaciones y fotografías en formato <acronym lang="en" title="Scalable Vector Graphics">SVG</acronym>.</li>
<li>Fotografías en formato <acronym lang="en" title="Portable Network Graphics">PNG</acronym> con transparencia.</li>
</ul>
<p>De este modo,  los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva <strong>un paradigma más acertado y ajustado al cambiante mundo del desarrollo web</strong>. Es por eso que en Yahoo <a href="http://developer.yahoo.com/yui/articles/gbs/index.html#history" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en">lo adoptaron rápidamente</a> y lo han utilizado para crear su estrategia de soporte de navegador gradual.</p>
<p>Mas información:</p>
<ul>
<li><a href="http://www.simonday.com/web-design-blog/2011/03/24/progressive-enhancements-or-graceful-degradation-which-are-you/" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en">Progressive enhancements or graceful degradation. Which are you?</a></li>
<li><a href="http://esquareda.com/journal/on-css3-graceful-degradation-or-progressive-enhancement.html" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en">On CSS3: &#8220;Graceful Degradation&#8221; or &#8220;Progressive Enhancement&#8221;</a></li>
<li><a href="http://www.alistapart.com/articles/understandingprogressiveenhancement/" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en" >Understanding Progressive Enhancement</a></li>
<li><a href="http://esquareda.com/journal/on-css3-graceful-degradation-or-progressive-enhancement.html" target="_blank" title="Página en inglés, abre en nueva ventana" lang="en">On CSS3: ‘Graceful Degradation’ or ‘Progressive Enhancement’</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/mejora-progresiva-degradacion-elegante/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Preparando Google Chrome 11</title>
		<link>http://www.circulodemaquetadores.com/google-chrome-11-hablale-a-tu-navegador</link>
		<comments>http://www.circulodemaquetadores.com/google-chrome-11-hablale-a-tu-navegador#comments</comments>
		<pubDate>Sun, 27 Mar 2011 17:34:55 +0000</pubDate>
		<dc:creator>Eduardo Sainz</dc:creator>
				<category><![CDATA[Navegadores]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1613</guid>
		<description><![CDATA[Seguimos con novedades en el campo de los navegadores web, Google Chrome 11 en versión beta se ha puesto disponible para descarga, parece que a los chicos de Google no les ha gustado que se hable tanto del nuevo Internet &#8230; <a href="http://www.circulodemaquetadores.com/google-chrome-11-hablale-a-tu-navegador">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter" src="http://www.circulodemaquetadores.com/images/google-chrome-logo.jpg" alt="Logotipo Google Chrome" /></p>
<p>Seguimos con novedades en el campo de los navegadores web, <strong>Google Chrome 11</strong> en versión beta se ha puesto disponible para descarga, parece que a los chicos de Google no les ha gustado que se hable tanto del nuevo Internet Explorer 9 y del nuevo Firefox 4 y también querían su pedacito de pastel en cuanto a atención mediática se refiere.<span id="more-1613"></span></p>
<p>No han pasado ni 24 horas desde la salida del nuevo Firefox 4 cuando el Chorme 11 aunque sea en versión beta ya está disponible. Hay que reconocerle un gran mérito a Google con el buen hacer de su navegador ya que fueron los últimos en llegar pero rápidamente por la calidad del producto y con el boca a boca ha llegado a las primeras posiciones.</p>
<p>No nos debemos de preocupar por el idioma ya que reconoce español entre otros muchos, siempre y cuando hagamos una pronunciación más o menos correcta. Respecto a otras novedades se ha cambiado el diseño del icono y se han incluido por ejemplo soporte para <strong>CSS en 3D</strong> y por su puesto un mejor rendimiento general.</p>
<p>fuente: <a href="http://www.ideal.es/granada/20110323/mas-actualidad/tecnologia/google-chrome-hablale-navegador-201103231713.html">ideal.es</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/google-chrome-11-hablale-a-tu-navegador/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>¡Círculo de Maquetadores se reforma!</title>
		<link>http://www.circulodemaquetadores.com/circulo-de-maquetadores-reforma</link>
		<comments>http://www.circulodemaquetadores.com/circulo-de-maquetadores-reforma#comments</comments>
		<pubDate>Sat, 26 Mar 2011 23:40:37 +0000</pubDate>
		<dc:creator>Álvaro Brito</dc:creator>
				<category><![CDATA[Noticias]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1584</guid>
		<description><![CDATA[Después de varios meses se ha solucionado los problemas de seguridad en la web, hemos aprovechado también para renovar el aspecto de la página. Espero que os guste.]]></description>
			<content:encoded><![CDATA[<p>Después de varios meses se ha solucionado los problemas de seguridad en la web, hemos aprovechado también para renovar el aspecto de la página. Espero que os guste.</p>
<p><a rel="attachment wp-att-1585" href="http://www.circulodemaquetadores.com/?attachment_id=1585"><img class="size-full wp-image-1585 aligncenter" title="logo círculo de maquetadores" src="http://www.circulodemaquetadores.com/archivos/logo-cdm.png" alt="Círculo de Maquetadores Web" width="180" height="90" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/circulo-de-maquetadores-reforma/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Firefox 4 ya está aquí.</title>
		<link>http://www.circulodemaquetadores.com/firefox-4-ya-esta-aqui</link>
		<comments>http://www.circulodemaquetadores.com/firefox-4-ya-esta-aqui#comments</comments>
		<pubDate>Tue, 22 Mar 2011 21:56:01 +0000</pubDate>
		<dc:creator>Eduardo Sainz</dc:creator>
				<category><![CDATA[Navegadores]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[firefox4]]></category>
		<category><![CDATA[mozilla]]></category>

		<guid isPermaLink="false">http://www.circulodemaquetadores.com/?p=1553</guid>
		<description><![CDATA[No hace una semana del lanzamiento de explorer 9, cuando Mozilla hace el anuncio del esperado Firefox 4. Para hacernos una idea del éxito del estreno, decir que en menos de 4 horas se han descargado más de un millón &#8230; <a href="http://www.circulodemaquetadores.com/firefox-4-ya-esta-aqui">Sigue leyendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter" src="http://www.fayerwayer.com/up/2009/11/mozilla-firefox.jpg" alt="Firefox" /></p>
<p>No hace una semana del lanzamiento de explorer 9, cuando Mozilla hace el anuncio del esperado <strong>Firefox 4.</strong></p>
<p>Para hacernos una idea del éxito del estreno, decir que en menos de 4 horas se han descargado más de un millón de copias, ¿superará el <a href="http://www.cincodias.com/articulo/empresas/Firefox-logra-83-millones-descargas-dia/20080619cdscdiemp_17/">record de 8,3M</a> en un día que tenía la versión 3?</p>
<p><span id="more-1553"></span>Como curiosidad, podemos ver las estadísticas actualizadas de estas descargas en esta dirección <a href="http://glow.mozilla.org">glow.mozilla.org</a>.</p>
<p>De esta versión, podemos decir que los chicos de Mozilla se lo han currado, siguiendo la línea de los nuevos navegadores, han conseguido un navegador mucho más ligero, rápido y visualmente más minimalista.</p>
<p>Algunas de sus nuevas características son:</p>
<ul>
<li>Se elimina la necesidad de reiniciar el navegador para poder poner en marcha una nueva extensión</li>
<li>Mayor compatibilidad con HTML5 y CSS3</li>
<li>Panorama, nuevo sistema de gestión de pestañas</li>
<li> Firefox Sync</li>
<li>Actualizaciones silenciosas</li>
</ul>
<p>Ahora sólo queda esperar la adaptación de las extensiones a esta nueva versión.</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.circulodemaquetadores.com/firefox-4-ya-esta-aqui/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

