<?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>Indalcasa &#187; XHTML</title>
	<atom:link href="http://www.indalcasa.com/category/programacion/xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.indalcasa.com</link>
	<description>Un blog de tecnologia</description>
	<lastBuildDate>Tue, 03 Jan 2012 15:14:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Centrar texto verticalmente con css</title>
		<link>http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/</link>
		<comments>http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/#comments</comments>
		<pubDate>Sat, 13 Mar 2010 22:44:49 +0000</pubDate>
		<dc:creator>Juan</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Programación]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.indalcasa.com/?p=234</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/' addthis:title='Centrar texto verticalmente con css ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div>Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el "como centrar texto verticalmente sin valign". Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque [...]<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/' addthis:title='Centrar texto verticalmente con css ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/' addthis:title='Centrar texto verticalmente con css ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div><p>Desde hace años que me pase a las <strong>capas</strong> abandonando la <strong>maquetación en tablas</strong>, si algo he hechado de menos siempre ha sido el <strong>"como centrar texto verticalmente sin valign"</strong>. Para solucionar este <strong>problema</strong>, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el <strong>intellisense</strong> mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al <strong>css</strong>. Buscando me he encontrado con un <strong>atribuo de css</strong> que se llama <strong>line-height</strong>, que <strong>agranda la linea del texto a la altura que le indiquemos</strong>, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el <strong>line-height</strong> es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.</p>
<p>Os dejo un ejemplo de como se utilizaría:</p>
<p>Ejemplo del html:</p>
<blockquote>
<pre class="xml">&nbsp;
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;menu&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;menuOption&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>Inicio<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/div<span style="font-weight: bold; color: black;">&gt;</span></span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/div<span style="font-weight: bold; color: black;">&gt;</span></span></span>
&nbsp;</pre>
</blockquote>
<p>Ejemplo del css:</p>
<blockquote>
<pre class="css"><span style="color: #cc00cc;">#menu</span> <span style="color: #66cc66;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #933;">50px</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.menuOption</span> <span style="color: #66cc66;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">line-height</span>: <span style="color: #933;">50px</span>;
  <span style="color: #000000; font-weight: bold;">text-align</span>: <span style="color: #993333;">center</span>;
<span style="color: #66cc66;">&#125;</span></pre>
</blockquote>
<p>Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el <strong>texto centrado verticalmente</strong> y ya de paso <strong>centrado horizontalmente</strong> también.</p>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/' addthis:title='Centrar texto verticalmente con css ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.indalcasa.com/programacion/centrar-texto-verticalmente-con-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Autocomplete=&#8221;off&#8221; valido para XHTML</title>
		<link>http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/</link>
		<comments>http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/#comments</comments>
		<pubDate>Tue, 08 Jul 2008 12:31:56 +0000</pubDate>
		<dc:creator>Juan</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programación]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.indalcasa.com/?p=54</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/' addthis:title='Autocomplete=&#8221;off&#8221; valido para XHTML ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div>Cuando escribimos un texto en un input de tipo text (input type="text") nos encontramos que por regla general el navegador nos va a autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un input que se llama "nombre" el o los nombres que hayamos introducido. La [...]<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/' addthis:title='Autocomplete=&#8221;off&#8221; valido para XHTML ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/' addthis:title='Autocomplete=&#8221;off&#8221; valido para XHTML ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div><p>Cuando escribimos un texto en un input de tipo text (<strong>input type="text"</strong>) nos encontramos que por regla general el navegador nos va a <strong>autocompletar</strong> lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un <strong>input</strong> que se llama "nombre" el o los nombres que hayamos introducido.</p>
<p>La practica del <strong>autocompletado</strong> es muy util siempre que tengamos formularios repetitivos, tales como los formularios de registro que suelen llamarse siempre de forma similar y siempre suelen pedir los mismos datos, evitandonos volver a escribir todos nuestros datos una y otra vez.</p>
<p>Existen casos en los que quizas no queramos que el navegador nos <strong>autocomplete</strong> ese texto, puede darse el caso que tengamos una tienda online que realiza el pago con tarjeta de crédito y no queramos que esa tarjeta de crédito se nos autocomplete. Para evitar esto, existe un atributo que es utilizado por la gran mayoria de los navegadores que es <strong>el atributo autocomplete="on|off"</strong>, que si se desactiva con el valor off, indica al navegador que no ha de <strong>autocompletar ese campo</strong>.</p>
<p>Aunque en muchos casos es muy buena practica usar el atributo autocomplete, el <strong>W3C</strong> no tiene reconocido este atributo como <strong>atributo de la etiqueta input</strong>, con lo cual al intentar validar y encontrarse con el <strong>atributo autocomplete</strong>, nos dara un <strong>error de validación</strong>. Para solucionar el <strong>error de validación</strong> lo que haremos sera utilizar <strong>javascript</strong> para añadir este <strong>atributo</strong>, así la funcionalidad seguira estando ahí, pero no tendremos problemas de validación.</p>
<p>Lo unico que deberemos hacer es añadir el siguiente código al final de la página, o al menos, justo despues de declarar el input</p>
<blockquote>
<pre class="javascript">  &lt;script type=<span style="color: #3366CC;">&quot;text/javascript&quot;</span>&gt;
    <span style="color: #009900; font-style: italic;">//&lt;![CDATA[</span>
    <span style="color: #003366; font-weight: bold;">var</span> elemento = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;IdDelInput&quot;</span><span style="color: #66cc66;">&#41;</span>
    elemento.<span style="color: #006600;">setAttribute</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">&quot;autocomplete&quot;</span>, <span style="color: #3366CC;">&quot;off&quot;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #009900; font-style: italic;">//]]&amp;gt;</span>
  &lt;/script&gt;</pre>
</blockquote>
<p>De esta forma conseguiremos que al introducir un texto en un input no se autocomplete por el navegador y si queremos <strong>autocompletar</strong> lo podamos hacer por <strong>javascript</strong>.</p>
<p>Un buen y bonito ejemplo de <strong>autocompletado de campos</strong> es el que use para <a title="Buscador de vuelos de Muchoviaje" href="http://ofertas.muchoviaje.com/billetesavion/aspx/vuelos.aspx">muchoviaje</a> en los campos de origen y destino</p>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/' addthis:title='Autocomplete=&#8221;off&#8221; valido para XHTML ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.indalcasa.com/programacion/autocompleteoff-valido-para-xhtml/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Símbolo del euro en xml o xslt sin utf-8</title>
		<link>http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/</link>
		<comments>http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/#comments</comments>
		<pubDate>Mon, 26 May 2008 18:11:43 +0000</pubDate>
		<dc:creator>Juan</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[XHTML]]></category>
		<category><![CDATA[Xml]]></category>
		<category><![CDATA[Xslt]]></category>
		<category><![CDATA[euro]]></category>
		<category><![CDATA[iso-8859-1]]></category>
		<category><![CDATA[utf-8]]></category>
		<category><![CDATA[xsl]]></category>

		<guid isPermaLink="false">http://www.indalcasa.com/?p=51</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/' addthis:title='Símbolo del euro en xml o xslt sin utf-8 ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div>Durante el desarrollo de mi último proyecto, me encontré con un xml de transformación o xslt, donde debía de usar el símbolo del euro (€), pero esta transformada, que no deja de ser un xml, estaba codificada en iso-8859-1, y no podía cambiar la codificación. A la hora de añadir el símbolo del euro, si [...]<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/' addthis:title='Símbolo del euro en xml o xslt sin utf-8 ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style" addthis:url='http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/' addthis:title='Símbolo del euro en xml o xslt sin utf-8 ' ><a class="addthis_button_google_plusone" g:plusone:size="medium" ></a><a class="addthis_counter addthis_pill_style"></a></div><p>Durante el desarrollo de mi último proyecto, me encontré con un <strong>xml </strong>de transformación o <strong>xslt</strong>, donde debía de usar el <strong>símbolo del euro (€)</strong>, pero esta <strong>transformada</strong>, que no deja de ser un <strong>xml</strong>, estaba codificada en <strong>iso-8859-1</strong>, y no podía cambiar la <strong>codificación</strong>. A la hora de añadir el <strong>símbolo del euro</strong>, si usaba directamente el <strong>carácter €</strong>, fallaba porque estaba <strong>mezclando codificaciones</strong>, y si usaba <strong>&amp;euro;</strong> como viene siendo en <strong>html</strong>, fallaba porque no es un <strong>carácter válido de xslt</strong>. La solución, usar los <strong>caracteres especiales</strong>, en este caso para el <strong>euro (€)</strong> es el <strong>&amp;#128;</strong></p>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url='http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/' addthis:title='Símbolo del euro en xml o xslt sin utf-8 ' ><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a></div>]]></content:encoded>
			<wfw:commentRss>http://www.indalcasa.com/programacion/html/simbolo-del-euro-en-xml-o-xslt-sin-utf-8/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

