<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>mjcarrascosa.com</title>
	
	<link>http://mjcarrascosa.com</link>
	<description>Desarrollo web y otras hierbas</description>
	<lastBuildDate>Mon, 21 Jun 2010 23:25:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/mjcarrascosa" /><feedburner:info uri="mjcarrascosa" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Insertar o actualizar registros en MySQL</title>
		<link>http://feedproxy.google.com/~r/mjcarrascosa/~3/TZg4HJlE_30/</link>
		<comments>http://mjcarrascosa.com/insertar-o-actualizar-registros-en-mysql/#comments</comments>
		<pubDate>Mon, 21 Jun 2010 23:24:42 +0000</pubDate>
		<dc:creator>Manuel Jesús Carrascosa de la Blanca</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[SQL]]></category>

		<guid isPermaLink="false">http://mjcarrascosa.com/?p=650</guid>
		<description><![CDATA[En muchas ocasiones nos puede interesar insertar un registro o actualizarlo si este ya existe. Para hacer esto tenemos varias opciones, como por ejemplo estas dos: Opción A: Comprobamos si el registro ya existe. Si no existe lo insertamos. Si existe lo actualizamos. Opción B: Intentamos insertar el registro. Si se produce un error lo [...]]]></description>
			<content:encoded><![CDATA[<p>En muchas ocasiones nos puede interesar insertar un registro o actualizarlo si este ya existe. Para hacer esto tenemos varias opciones, como por ejemplo estas dos:</p>
<p>Opción A:</p>
<ol>
<li>Comprobamos si el registro ya existe.</li>
<li>Si no existe lo insertamos.</li>
<li>Si existe lo actualizamos.</li>
</ol>
<p>Opción B:</p>
<ol>
<li>Intentamos insertar el registro.</li>
<li>Si se produce un error lo actualizamos.</li>
</ol>
<p>Pero MySQL nos da una opción mucho más elegante para realizar esto. Se trata de utilizar la construcción <strong>ON DUPLICATE KEY UPDATE</strong>. Podemos ver la <a title="ON DUPLICATE KEY UPDATE" href="http://dev.mysql.com/doc/refman/5.0/en/insert-on-duplicate.html">documentación de esta construcción</a> en el manual de MySQL. Pero vamos a ver un par de ejemplos:</p>
<pre class="brush:sql">INSERT INTO tabla (a, b, c) VALUES (1, 2, 3)
ON DUPLICATE KEY UPDATE b=2, c=3</pre>
<p>De esta forma si ya existe un registro con el valor del campo <em>&#8220;a&#8221;</em> igual a 1, suponiendo que el campo a sea la clave, se actualizarán los valores. ¿Y si tenemos varios registros? Entonces podemos usarlo de la forma siguiente:</p>
<pre class="brush:sql">INSERT INTO tabla (a, b, c) VALUES (1, 2, 3), (4, 5, 6)
ON DUPLICATE KEY UPDATE b=VALUES(b), c=VALUES(c)
</pre>
<p>De esta forma se cogerá los valores b=2 y c=3 para la clave a=1 y b=5 y c=6 para la clave a=4.</p>
]]></content:encoded>
			<wfw:commentRss>http://mjcarrascosa.com/insertar-o-actualizar-registros-en-mysql/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://mjcarrascosa.com/insertar-o-actualizar-registros-en-mysql/</feedburner:origLink></item>
		<item>
		<title>Tutorial de CKEditor. Parte IV.</title>
		<link>http://feedproxy.google.com/~r/mjcarrascosa/~3/SOzI55z5W1k/</link>
		<comments>http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/#comments</comments>
		<pubDate>Sun, 06 Jun 2010 19:40:48 +0000</pubDate>
		<dc:creator>Manuel Jesús Carrascosa de la Blanca</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Librerías]]></category>
		<category><![CDATA[CKEditor]]></category>
		<category><![CDATA[Editor WYSIWYG]]></category>
		<category><![CDATA[librería]]></category>
		<category><![CDATA[plantillas]]></category>

		<guid isPermaLink="false">http://mjcarrascosa.com/?p=614</guid>
		<description><![CDATA[Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar.  Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas: &#60;html&#62; &#60;head&#62; &#60;title&#62;ckeditor test&#60;/title&#62; &#60;script src="ckeditor/ckeditor.js"&#62;&#60;/script&#62; &#60;script src="editor.js"&#62;&#60;/script&#62; &#60;/head&#62; &#60;body&#62; &#60;textarea id="editor"&#62;&#60;/textarea&#62; &#60;/body&#62; &#60;/html&#62; Esta es nuestra página [...]]]></description>
			<content:encoded><![CDATA[<p>Entre las funcionalidades de CKEditor se encuentra una muy interesante, la posibilidad de usar plantillas en el editor. Además es bastante fácil de implementar.  Vamos a ver como configurar nuestro CKEditor para que nos permita mostrar plantillas:</p>
<pre class="brush:html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;ckeditor test&lt;/title&gt;
    &lt;script src="ckeditor/ckeditor.js"&gt;&lt;/script&gt;
    &lt;script src="editor.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;textarea id="editor"&gt;&lt;/textarea&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
<p>Esta es nuestra página con el editor. Hemos añadido el script de ckeditor y otro más llamado editor.js. En ese archivo está el código siguiente:</p>
<pre class="brush:javascript">window.onload = function() {
  CKEDITOR.replace( 'editor',
  {
    toolbar : 'Full',
    templates_files : [ './templates.js' ]
  });
}</pre>
<p>Hemos añadido una barra completa para que aparezca el botón de plantilla aunque, esto no es estrictamente necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la <a title="Tutorial de CKEditor. Parte II." href="http://mjcarrascosa.com/tutorial-de-ckeditor-parte-ii/">segunda parte del tutorial</a>. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que indicaremos los nombres de los ficheros donde definimos las plantillas. En este caso solo un archivo, llamado templates.js.</p>
<p>El archivo templates.js tendrá el siguiente código:</p>
<pre class="brush:javascript">// Registramos las plantillas
CKEDITOR.addTemplates( 'default',
{
  // La ruta donde están las imágenes de las plantillas
  imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

  // Definición de las plantillas
  templates :
  [
    {
      title: 'Plantilla 1',
      image: 'template1.gif',
      description: 'Descripci&amp;oacute;n de la plantilla 1.',
      html:
        '&lt;h2&gt;Pantilla 1&lt;/h2&gt;' +
        '&lt;p&gt;Inserte el texto aqu&amp;iacute;.&lt;/p&gt;'
    },
    {
      title: 'Plantilla 2',
      html:
      '&lt;h3&gt;Plantilla 2&lt;/h3&gt;' +
      '&lt;p&gt;Inserte el texto aqu&amp;iacute;.&lt;/p&gt;'
    }
  ]
});</pre>
<p>Ahora vamos a la parte interesante. Para añadir plantillas llamamos al addTemplates, al que le pasamos un nombre y un objeto con los datos necesarios para mostrar las plantillas. El objeto tiene los campos imagePath, donde le indicamos la ruta de la imágenes que aparecerán como vista previa de la plantilla, y templates, un array de objetos que tienen los datos de la plantilla. Estos datos son:</p>
<ul>
<li><strong>title</strong>: Título de la plantilla.</li>
<li><strong>image</strong>: imagen de vista previa de la plantilla.</li>
<li><strong>description</strong>: descripción de la plantilla.</li>
<li><strong>html</strong>: La plantilla propiamente dicha.</li>
</ul>
<p>De esta sencilla forma podemos añadir plantillas a nuestro editor. Cuando pulsemos sobre el botón de plantillas nos aparecerá la siguiente ventana:</p>
<p><a href="http://mjcarrascosa.com/wp-content/uploads/2010/06/plantillas.jpg"><img class="alignnone size-medium wp-image-645" title="plantillas" src="http://mjcarrascosa.com/wp-content/uploads/2010/06/plantillas-300x299.jpg" alt="" width="300" height="299" /></a></p>
<p>Ahora solo toca seleccionar nuestra plantilla y esta aparecerá como contenido de nuestro editor, reemplazándolo o añadiéndolo según hayamos indicado en la ventana,</p>
]]></content:encoded>
			<wfw:commentRss>http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://mjcarrascosa.com/tutorial-de-ckeditor-parte-iv/</feedburner:origLink></item>
		<item>
		<title>Demos y ejemplos de HTML 5</title>
		<link>http://feedproxy.google.com/~r/mjcarrascosa/~3/4ayWk9jHP7E/</link>
		<comments>http://mjcarrascosa.com/demos-y-ejemplos-de-html-5/#comments</comments>
		<pubDate>Mon, 24 May 2010 09:37:58 +0000</pubDate>
		<dc:creator>Manuel Jesús Carrascosa de la Blanca</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Demo]]></category>
		<category><![CDATA[Ejemplos]]></category>
		<category><![CDATA[HTML 5]]></category>

		<guid isPermaLink="false">http://mjcarrascosa.com/?p=639</guid>
		<description><![CDATA[En la web de HTML 5 Demos and Examples podemos vemos ver distitntos ejemplos de uso de HTML 5, así como los navegadores en que puede verse. Muy interesante para ir viendo lo que se puede hacer con esta nueva versión de HTML.]]></description>
			<content:encoded><![CDATA[<p><a href="http://mjcarrascosa.com/wp-content/uploads/2010/05/html5demos.jpg"><img class="aligncenter size-full wp-image-640" title="HTML5 Demo" src="http://mjcarrascosa.com/wp-content/uploads/2010/05/html5demos.jpg" alt="" width="423" height="260" /></a></p>
<p>En la web de<a title="HTML 5 demos and examples" href="http://html5demos.com/"> HTML 5 Demos and Examples</a> podemos vemos ver distitntos ejemplos de uso de HTML 5, así como los navegadores en que puede verse. Muy interesante para ir viendo lo que se puede hacer con esta nueva versión de HTML.</p>
]]></content:encoded>
			<wfw:commentRss>http://mjcarrascosa.com/demos-y-ejemplos-de-html-5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://mjcarrascosa.com/demos-y-ejemplos-de-html-5/</feedburner:origLink></item>
		<item>
		<title>HTML5 Test ¿Cómo de bien soporta HTML5 tu navegador?</title>
		<link>http://feedproxy.google.com/~r/mjcarrascosa/~3/1wsa_FW2sjA/</link>
		<comments>http://mjcarrascosa.com/html5-test-%c2%bfcomo-de-bien-soporta-html5-tu-navegador/#comments</comments>
		<pubDate>Thu, 06 May 2010 22:05:53 +0000</pubDate>
		<dc:creator>Manuel Jesús Carrascosa de la Blanca</dc:creator>
				<category><![CDATA[Herramientas]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Test]]></category>

		<guid isPermaLink="false">http://mjcarrascosa.com/?p=633</guid>
		<description><![CDATA[HTML5 Test es un test que nos permite saber que funcionalidades de HTML5 soporta nuestro navegador. Los resultados para los navegadores que tengo instalados son: Navegador Versión Resultado Google Chrome 4.1 118 Opera 10.53 102 Mozilla Firefox 3.6.3 101 Safari 4.0.5 70 Internet Explorer 8 19 Por supuesto estos valores depenederán de las versiones instaladas [...]]]></description>
			<content:encoded><![CDATA[<p><a title="HTML5 Test" href="http://html5test.com/">HTML5 Test</a> es un test que nos permite saber que funcionalidades de <strong>HTML5</strong> soporta nuestro navegador.</p>
<p><a href="http://mjcarrascosa.com/wp-content/uploads/2010/05/html5testFirefox_3_6_3.jpg"><img class="aligncenter size-full wp-image-634" title="HTML5 Test" src="http://mjcarrascosa.com/wp-content/uploads/2010/05/html5testFirefox_3_6_3.jpg" alt="" width="600" height="303" /></a></p>
<p>Los resultados para los navegadores que tengo instalados son:</p>
<table style="border: 1px solid #000000;" border="1" align="center">
<tbody>
<tr>
<th>Navegador</th>
<th>Versión</th>
<th>Resultado</th>
</tr>
<tr>
<td>Google Chrome</td>
<td style="text-align: right;">4.1</td>
<td style="text-align: right;">118</td>
</tr>
<tr>
<td>Opera</td>
<td style="text-align: right;">10.53</td>
<td style="text-align: right;">102</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td style="text-align: right;">3.6.3</td>
<td style="text-align: right;">101</td>
</tr>
<tr>
<td>Safari</td>
<td style="text-align: right;">4.0.5</td>
<td style="text-align: right;">70</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td style="text-align: right;">8</td>
<td style="text-align: right;">19</td>
</tr>
</tbody>
</table>
<p>Por supuesto estos valores depenederán de las versiones instaladas de cada navegador.</p>
]]></content:encoded>
			<wfw:commentRss>http://mjcarrascosa.com/html5-test-%c2%bfcomo-de-bien-soporta-html5-tu-navegador/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://mjcarrascosa.com/html5-test-%c2%bfcomo-de-bien-soporta-html5-tu-navegador/</feedburner:origLink></item>
		<item>
		<title>Hacer visible un campo password con jQuery</title>
		<link>http://feedproxy.google.com/~r/mjcarrascosa/~3/KrNCaeLeBuQ/</link>
		<comments>http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/#comments</comments>
		<pubDate>Mon, 26 Apr 2010 00:20:06 +0000</pubDate>
		<dc:creator>Manuel Jesús Carrascosa de la Blanca</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Librerías]]></category>
		<category><![CDATA[formularios]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[librería]]></category>
		<category><![CDATA[usabilidad]]></category>

		<guid isPermaLink="false">http://mjcarrascosa.com/?p=597</guid>
		<description><![CDATA[Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla. Vamos a [...]]]></description>
			<content:encoded><![CDATA[<p>Los campos de tipo password no muestran el contenido que tecleamos, evidentemente para evitar que alguien pueda ver nuestras contraseñas. Pero en ocasiones, por ejemplo cuando estamos en casa y no hay nadie cerca, nos puede interesar mostrar el contenido de estos. Usando la librería jQuery podemos hacer esto de forma muy sencilla.</p>
<p>Vamos a ver primero el código de nuestro formulario:</p>
<pre class="brush:html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;Login&lt;/title&gt;
      &lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="login.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;form onsubmit="return false;"&gt;
         &lt;label for="user"&gt;Usuario:&lt;/label&gt;&lt;input type="text" name="user" id="user"/&gt;&lt;br/&gt;
         &lt;label for="password"&gt;Password:&lt;/label&gt;&lt;input type="password" name="password" id="password"/&gt;&lt;br/&gt;
         &lt;input type="checkbox" id="show"/&gt; &lt;label for="show"&gt;Mostrar password.&lt;/label&gt;&lt;br/&gt;
         &lt;input type="submit" value="login"/&gt;
      &lt;/form&gt;
   &lt;/body&gt;
&lt;/html&gt;</pre>
<p>Es un formulario muy sencillo, ni siquiera envia datos, pero nos sirve como ejemplo. Podemos ver que añadimos dos scripts a la página, el de jQuery y el que contendrá el código para mostrar el campo password. También observamos que hay un campo checkbox que tendremos que seleccionar para ver el contenido de campo password.</p>
<p>Ahora vamos con el código para mostrar el valor del campo, que está en el archivo login.js:</p>
<pre class="brush:javascript">$(document).ready( function(){

   $('#show').attr('checked', false);

   $('#show').click(function(){

      name = $('#password').attr('name');
      value = $('#password').attr('value');
      if($(this).attr('checked'))
      {
         html = '&lt;input type="text" name="'+ name + '" value="' + value + '" id="password"/&gt;';
         $('#password').after(html).remove();
      }
      else
      {
         html = '&lt;input type="password" name="'+ name + '" value="' + value + '" id="password"/&gt;';
         $('#password').after(html).remove();
      }
   });
});</pre>
<p>Básicamente lo que hacemos es añadir un evento click al campo checkbox. Cuando se hace click sobre el checkbox este comprueba su valor y sustituye el campo, por otro igual del tipo que corresponda, password cuando no está seleccionando y text cuando lo está, dándole el mismo valor a los atributos de este.</p>
<p>Podéis ver una demo en el siguiente enlace:</p>
<p><a title="Demostración de como hacer visible un campo password con jQuery" href="http://mjcarrascosa.com/demos/campo-password/login.html">Demostración de como hacer visible un campo password con jQuery</a></p>
<p>Y también podéis descargar los archivos de la demo:</p>
<p><a href="http://mjcarrascosa.com/wp-content/uploads/2010/04/login.zip">Archivos para hacer visibe un campo password con jQuery</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://mjcarrascosa.com/hacer-visible-un-campo-password-con-jquery/</feedburner:origLink></item>
	</channel>
</rss>
