<?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>Alfredo Juarez &#187; Web Development</title>
	<atom:link href="http://www.alfrek.net/blog/tags/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.alfrek.net/blog</link>
	<description>Web Design and Development</description>
	<lastBuildDate>Fri, 03 Dec 2010 20:06:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Simple Time Picker para jQuery</title>
		<link>http://www.alfrek.net/blog/2009/08/simple-time-picker-jquerty/</link>
		<comments>http://www.alfrek.net/blog/2009/08/simple-time-picker-jquerty/#comments</comments>
		<pubDate>Sat, 29 Aug 2009 18:40:42 +0000</pubDate>
		<dc:creator>alfredojv</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Otros]]></category>
		<category><![CDATA[ProgramaciÃ³n]]></category>
		<category><![CDATA[trucos]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[accesibilidad]]></category>
		<category><![CDATA[diseÃ±o]]></category>
		<category><![CDATA[formularios]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[usabilidad]]></category>

		<guid isPermaLink="false">http://www.alfrek.net/blog/?p=1246</guid>
		<description><![CDATA[jQuery.timepickr fue creado con la intención de mejorar el proceso de selección de hora de la manera más fácil y natural posible. Está diseñado para ser unobstrusivo, y soporta &#8220;jQuery UI theme Switcher&#8220;, por lo que es completamente customizable. Sus objetivos son: Ser inobstrusivo Uso máximo de 2 clicks. Navegación de teclado intuitivo. Ser usable [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1249" title="timepicr" src="http://www.alfrek.net/blog/wp-content/uploads/2009/08/timepicr.jpg" alt="timepicr" width="420" height="172" /></p>
<p><a title="jQuery.TimePickr" href="http://haineault.com/media/jquery/ui-timepickr/page/" target="_blank">jQuery.timepickr</a> fue creado con la intención de mejorar el proceso de selección de hora de la manera más fácil y natural posible.</p>
<p>Está diseñado para ser unobstrusivo, y soporta &#8220;<a href="http://jqueryui.com/docs/Theming/ThemeSwitcher" target="_blank">jQuery UI theme Switcher</a>&#8220;, por lo que es completamente customizable.</p>
<p>Sus objetivos son:</p>
<ul>
<li>Ser inobstrusivo</li>
<li>Uso máximo de 2 clicks.</li>
<li>Navegación de teclado intuitivo.</li>
<li>Ser usable en dispositivos táctiles.</li>
<li>Compatible con browsers nuevos y viejos (<a href="http://en.wikipedia.org/wiki/Fault-tolerant_system" target="_blank">Degrade Gracefully</a>)</li>
</ul>
<p>Requisitos: jQuery Framework<br />
Demo: <a rel="nofollow" href="http://haineault.com/media/jquery/ui-timepickr/page/" target="_blank">http://haineault.com/media/jquery/ui-timepickr/page/</a></p>
<p>[Via <a href="http://www.webappers.com/2009/08/29/a-simple-2-click-in-place-editing-time-picker/" target="_blank">WebAppers</a>]</p>
<a href="javascript:toggleStartStop();PicLensLite.start({feedUrl:'http://www.alfrek.net/blog/wp-content/plugins/wp-piclens/mrss.php?id=1246'});">Start Slide Show with PicLens Lite <img src="http://www.alfrek.net/blog/wp-content/plugins/wp-piclens/PicLensButton.png" alt="PicLens" width="16" height="12" border="0" align="top"></a>]]></content:encoded>
			<wfw:commentRss>http://www.alfrek.net/blog/2009/08/simple-time-picker-jquerty/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Usando atajos de teclado en JavaScript</title>
		<link>http://www.alfrek.net/blog/2009/06/usando-atajos-de-teclado-en-javascript/</link>
		<comments>http://www.alfrek.net/blog/2009/06/usando-atajos-de-teclado-en-javascript/#comments</comments>
		<pubDate>Sat, 20 Jun 2009 17:34:25 +0000</pubDate>
		<dc:creator>alfredojv</dc:creator>
				<category><![CDATA[ProgramaciÃ³n]]></category>
		<category><![CDATA[trucos]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.alfrek.net/blog/?p=1156</guid>
		<description><![CDATA[Lo primero que debemos tomar en cuenta a la hora de implementar atajos de teclado en una aplicación Web es no redefinir los atajos por defecto del navegador o sistema operativo, ya que se pudiera dar el caso de que el usuario intente hacer una acción común y la aplicación web lo interprete de otra [...]]]></description>
			<content:encoded><![CDATA[<p>Lo primero que debemos tomar en cuenta a la hora de implementar atajos de teclado en una aplicación Web es no redefinir los atajos por defecto del navegador o sistema operativo, ya que se pudiera dar el caso de que el usuario intente hacer una acción común y la aplicación web lo interprete de otra manera, por ejemplo: Imaginemos que el usuario quiere cerrar la pestaña y presiona Ctrl+W, pero tu definiste Ctrl+W para otra acción dentro de la aplicación, el usuario verá su intento frustrado por querer cerrar la pestaña.</p>
<p>Como puedes saber, Javascript tiene muchos &#8220;escuchadores de eventos&#8221;. Para los atajos del teclado usaremos <em><strong>onkeyup</strong></em>, el cual permite efectuar una acción cuando una tecla es presionada. Entonces, solo tenemos que comparar el valor del código de teclado retornado con nuestros atajos de teclado.</p>
<p>Los códigos de teclado consisten en 2 o 3 numeros, cada tecla tiene su propio código (vea la lista completa al final).</p>
<p><strong>EJEMPLOS</strong></p>
<p>En el siguiente ejemplo vamos a ejecutar una acción si la tecla combinación de teclas Ctrl+S es presionada:</p>
<pre><code class="javascript"><span class="keyword">var</span> isCtrl = <span class="literal">false</span>;
document.onkeyup=<span class="function"><span class="keyword">function</span><span class="params">(e)</span> {</span>
    <span class="keyword">if</span>(e.which == <span class="number">17</span>) isCtrl=<span class="literal">false</span>;
}document.onkeydown=<span class="function"><span class="keyword">function</span><span class="params">(e)</span>{</span>
    <span class="keyword">if</span>(e.which == <span class="number">17</span>) isCtrl=<span class="literal">true</span>;
    <span class="keyword">if</span>(e.which == <span class="number">83</span> &amp;&amp; isCtrl == <span class="literal">true</span>) {
         alert(<span class="string">'Guardando...!'</span>);
         <span class="keyword">return</span> <span class="literal">false</span>;
    }
}</code></pre>
<p>Ahora veamos el mismo ejemplo, pero utilizando jQuery:</p>
<pre><code class="javascript"><span class="keyword">var</span> isCtrl = <span class="literal">false</span>;$(document).keyup(<span class="function"><span class="keyword">function</span> <span class="params">(e)</span> {</span>
<span class="keyword">if</span>(e.which == <span class="number">17</span>) isCtrl=<span class="literal">false</span>;
}).keydown(<span class="function"><span class="keyword">function</span> <span class="params">(e)</span> {</span>
    <span class="keyword">if</span>(e.which == <span class="number">17</span>) isCtrl=<span class="literal">true</span>;
    <span class="keyword">if</span>(e.which == <span class="number">83</span> &amp;&amp; isCtrl == <span class="literal">true</span>) {
        alert(<span class="string">'guardando... Con jQuery'</span>);
 	<span class="keyword">return</span> <span class="literal">false</span>;
 }
});</code></pre>
<p>En estos ejemplos, empezamos verificando si la tecla <em>Ctrl </em>fue presionada, Si fue presionada, el valor inicial de la variable <em>isCtrl </em>será &#8220;<em>true</em>&#8220;. si las teclas son liberadas, a isCtrl se le asignará &#8220;<em>false</em>&#8221; de nuevo.</p>
<p>Una vez hecho esto, tenemos que verificar si la segunda tecla presionada es <em>S</em>, como nuestro atajo consiste en una combinación de teclas, también debemos verificar si la variable <em>isCtrl </em>es &#8220;<em>true</em>&#8220;.</p>
<p>Si las dos teclas fueron presionadas, mostraremos una alerta para mostrar un mensaje, por supuesto, en una aplicación real, podemos agregarle más funcionalidad.</p>
<p><strong>Referencia de códigos</strong></p>
<table border="0" width="600">
<tbody>
<tr>
<th width="200">Key</th>
<th width="400">Keyboard code</th>
</tr>
<tr>
<td>Backspace</td>
<td>8</td>
</tr>
<tr>
<td>Tab</td>
<td>9</td>
</tr>
<tr>
<td>Enter</td>
<td>13</td>
</tr>
<tr>
<td>Shift</td>
<td>16</td>
</tr>
<tr>
<td>Ctrl</td>
<td>17</td>
</tr>
<tr>
<td>Alt</td>
<td>18</td>
</tr>
<tr>
<td>Pause</td>
<td>19</td>
</tr>
<tr>
<td>Capslock</td>
<td>20</td>
</tr>
<tr>
<td>Esc</td>
<td>27</td>
</tr>
<tr>
<td>Page up</td>
<td>33</td>
</tr>
<tr>
<td>Page down</td>
<td>34</td>
</tr>
<tr>
<td>End</td>
<td>35</td>
</tr>
<tr>
<td>Home</td>
<td>36</td>
</tr>
<tr>
<td>Left arrow</td>
<td>37</td>
</tr>
<tr>
<td>Up arrow</td>
<td>38</td>
</tr>
<tr>
<td>Right arrow</td>
<td>39</td>
</tr>
<tr>
<td>Down arrow</td>
<td>40</td>
</tr>
<tr>
<td>Insert</td>
<td>45</td>
</tr>
<tr>
<td>Delete</td>
<td>46</td>
</tr>
<tr>
<td>0</td>
<td>48</td>
</tr>
<tr>
<td>1</td>
<td>49</td>
</tr>
<tr>
<td>2</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>51</td>
</tr>
<tr>
<td>4</td>
<td>52</td>
</tr>
<tr>
<td>5</td>
<td>53</td>
</tr>
<tr>
<td>6</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>55</td>
</tr>
<tr>
<td>8</td>
<td>56</td>
</tr>
<tr>
<td>9</td>
<td>57</td>
</tr>
<tr>
<td>a</td>
<td>65</td>
</tr>
<tr>
<td>b</td>
<td>66</td>
</tr>
<tr>
<td>c</td>
<td>67</td>
</tr>
<tr>
<td>d</td>
<td>68</td>
</tr>
<tr>
<td>e</td>
<td>69</td>
</tr>
<tr>
<td>f</td>
<td>70</td>
</tr>
<tr>
<td>g</td>
<td>71</td>
</tr>
<tr>
<td>h</td>
<td>72</td>
</tr>
<tr>
<td>i</td>
<td>73</td>
</tr>
<tr>
<td>j</td>
<td>74</td>
</tr>
<tr>
<td>k</td>
<td>75</td>
</tr>
<tr>
<td>l</td>
<td>76</td>
</tr>
<tr>
<td>m</td>
<td>77</td>
</tr>
<tr>
<td>n</td>
<td>78</td>
</tr>
<tr>
<td>o</td>
<td>79</td>
</tr>
<tr>
<td>p</td>
<td>80</td>
</tr>
<tr>
<td>q</td>
<td>81</td>
</tr>
<tr>
<td>r</td>
<td>82</td>
</tr>
<tr>
<td>s</td>
<td>83</td>
</tr>
<tr>
<td>t</td>
<td>84</td>
</tr>
<tr>
<td>u</td>
<td>85</td>
</tr>
<tr>
<td>v</td>
<td>86</td>
</tr>
<tr>
<td>w</td>
<td>87</td>
</tr>
<tr>
<td>x</td>
<td>88</td>
</tr>
<tr>
<td>y</td>
<td>89</td>
</tr>
<tr>
<td>z</td>
<td>90</td>
</tr>
<tr>
<td>0 (numpad)</td>
<td>96</td>
</tr>
<tr>
<td>1 (numpad)</td>
<td>97</td>
</tr>
<tr>
<td>2 (numpad)</td>
<td>98</td>
</tr>
<tr>
<td>3 (numpad)</td>
<td>99</td>
</tr>
<tr>
<td>4 (numpad)</td>
<td>100</td>
</tr>
<tr>
<td>5 (numpad)</td>
<td>101</td>
</tr>
<tr>
<td>6 (numpad)</td>
<td>102</td>
</tr>
<tr>
<td>7 (numpad)</td>
<td>103</td>
</tr>
<tr>
<td>8 (numpad)</td>
<td>104</td>
</tr>
<tr>
<td>9 (numpad)</td>
<td>105</td>
</tr>
<tr>
<td>*</td>
<td>106</td>
</tr>
<tr>
<td>+</td>
<td>107</td>
</tr>
<tr>
<td>-</td>
<td>109</td>
</tr>
<tr>
<td>.</td>
<td>110</td>
</tr>
<tr>
<td>/</td>
<td>111</td>
</tr>
<tr>
<td>F1</td>
<td>112</td>
</tr>
<tr>
<td>F2</td>
<td>113</td>
</tr>
<tr>
<td>F3</td>
<td>114</td>
</tr>
<tr>
<td>F4</td>
<td>115</td>
</tr>
<tr>
<td>F5</td>
<td>116</td>
</tr>
<tr>
<td>F6</td>
<td>117</td>
</tr>
<tr>
<td>F7</td>
<td>118</td>
</tr>
<tr>
<td>F8</td>
<td>119</td>
</tr>
<tr>
<td>F9</td>
<td>120</td>
</tr>
<tr>
<td>F10</td>
<td>121</td>
</tr>
<tr>
<td>F11</td>
<td>122</td>
</tr>
<tr>
<td>F12</td>
<td>123</td>
</tr>
<tr>
<td>=</td>
<td>187</td>
</tr>
<tr>
<td>Coma</td>
<td>188</td>
</tr>
<tr>
<td>Slash /</td>
<td>191</td>
</tr>
<tr>
<td>Backslash \</td>
<td>220</td>
</tr>
</tbody>
</table>
<p>El articulo original fue publicado en <a href="http://www.catswhocode.com/blog/using-keyboard-shortcuts-in-javascript">CatsWhoCode</a>, traducido por <a href="http://alfrek.net/blog">mí­</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.alfrek.net/blog/2009/06/usando-atajos-de-teclado-en-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Excepciones en PHP Parte II</title>
		<link>http://www.alfrek.net/blog/2008/09/excepciones-en-php-parte-ii/</link>
		<comments>http://www.alfrek.net/blog/2008/09/excepciones-en-php-parte-ii/#comments</comments>
		<pubDate>Mon, 15 Sep 2008 22:44:34 +0000</pubDate>
		<dc:creator>alfredojv</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[ProgramaciÃ³n]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[excepciones]]></category>

		<guid isPermaLink="false">http://www.alfrek.net/blog/?p=706</guid>
		<description><![CDATA[En la entrega anterior vimos de manera sencilla qué son y cómo funcionan las Excepciones en PHP 5. En esta ocasión veremos ejemplos semi-reales y repasaremos algunos detalles que debemos tener en cuenta a la hora de usar excepciones. Las excepciones no te salvan Si estás pensando que las excepciones te salvarán tus errores, ni [...]]]></description>
			<content:encoded><![CDATA[<p>En la <a href="http://www.alfrek.net/blog/2008/07/17/excepciones-en-php/" target="_blank">entrega anterior</a> vimos de manera sencilla qué son y cómo funcionan las Excepciones en PHP 5. En esta ocasión veremos ejemplos semi-reales y repasaremos algunos detalles que debemos tener en cuenta a la hora de usar excepciones.</p>
<h3>Las excepciones no te salvan</h3>
<p>Si estás pensando que las excepciones te salvarán tus errores, ni lo intentes. El uso de excepciones no solventa los errores de programación, eso sácalo de tu mente.</p>
<p>Las excepciones se utilizan para solventar errores en tiempo de ejecución, es decir, cualquier intento fallido lo manejas con excepciones para mostrarle un mensaje bonito al usuario final.</p>
<h3>Ejemplo</h3>
<p>Este código intenta abrir un archivo, en caso que no exista se tirará la excepción, de lo contrario mostrará un mensaje que muestre que el archivo se abrió correctamente.</p>
<pre><code class="php">&lt;?php

	<span class="keyword">try</span>
	{
		<span class="keyword">if</span>( ! fopen( <span class="string">"miarchivo.php"</span>,<span class="string">'r'</span> ) )
		{
			 <span class="keyword">throw</span> <span class="keyword">new</span> <span class="keyword">Exception</span>(<span class="string">'Error al abrir el archivo.'</span>);
		}

		<span class="keyword">echo</span> <span class="string">"El archivo fue abierto correctamente."</span>;
               <span class="keyword">// ...Código para trabajar con el archivo....</span>

	}
	<span class="keyword">catch</span> (<span class="keyword">Exception</span> <span class="variable">$e</span>)
	{
		<span class="keyword">echo</span> <span class="variable">$e</span>-&gt;getMessage(), <span class="string">"<span class="escape">\n</span>"</span>;
	}

?&gt;</code></pre>
<p>Si el archivo no existe o si ocurrió un error al intentar abrirlo, el mensaje que mostrarí­a PHP sin el manejo de excepciones serí­a el siguiente:</p>
<blockquote><p><strong>Warning</strong>: fopen(miarchivo.php) [<a href="http://localhost/to-do/function.fopen">function.fopen</a>]: failed to open stream: No such file or directory in <strong>path</strong><strong>\exception.php</strong> on line <strong>5</strong></p></blockquote>
<p>En cambio, con el manejo de excepciones el Script mostrará el siguiente error:</p>
<blockquote><p><strong>Error al abrir el archivo, es posible que no exista.</strong></p></blockquote>
<p>Claro, <strong>PHP </strong>siempre mostrará sus mensajes de error, mientras no se le indique lo contrario, es decir, además de tu mensaje personalizado también aparecerá el mensaje de error generado por <strong>PHP</strong>.</p>
<p>De hecho, <strong>es recomendable desactivar los mensajes de error del PHP una vez que el software ya esté en manos del usuario final (por motivos de seguridad más que por estética)</strong>.</p>
<p>El ejemplo es sencillo y es utilizable en cualquier caso de uso real, así­ que espero que les sirva de algo.</p>
<h3>Entradas relacionadas</h3>
<p><a href="http://www.alfrek.net/blog/2008/07/17/excepciones-en-php/" target="_blank">Excepciones en PHP Parte I</a></p>
<p>Si tienes alguna duda sobre PHP o igual te interesa el tema y deseas conocer gente del medio, puedes contactarnos en irc desde el servidor: <a href="irc://irc.menosnueve.com/php" target="_blank">69.64.59.193</a> en el canal #php.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.alfrek.net/blog/2008/09/excepciones-en-php-parte-ii/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Capuccino nos brinda programación al estilo Cocoa</title>
		<link>http://www.alfrek.net/blog/2008/09/capuccino-nos-brinda-programacion-al-estilo-cocoa/</link>
		<comments>http://www.alfrek.net/blog/2008/09/capuccino-nos-brinda-programacion-al-estilo-cocoa/#comments</comments>
		<pubDate>Thu, 04 Sep 2008 17:41:33 +0000</pubDate>
		<dc:creator>alfredojv</dc:creator>
				<category><![CDATA[Cocoa]]></category>
		<category><![CDATA[ProgramaciÃ³n]]></category>
		<category><![CDATA[Tecnologia]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[capuccino]]></category>

		<guid isPermaLink="false">http://www.alfrek.net/blog/?p=687</guid>
		<description><![CDATA[La gente de 280 North ha desarrollado un lenguaje de programación junto con sus herramientas y Frameworks para el desarrollo de aplicaciones web (RIAs) muy al estilo de Cocoa, el framework de programación para Mac OS X. Capuccino no require que sepas HTML, CSS o Javascript, tus aplicaciones web serí­an desarrolladas únicamente con el lenguaje [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-medium wp-image-688" title="cappuccino-icon" src="http://www.alfrek.net/blog/wp-content/uploads/2008/09/cappuccino-icon.png" alt="" width="226" height="254" /></p>
<p>La gente de <a href="http://280north.com/" target="_blank">280 North</a> ha desarrollado un lenguaje de programación junto con sus herramientas y Frameworks para el desarrollo de aplicaciones web (RIAs) muy al estilo de <strong>Cocoa</strong>, el <em>framework </em>de programación para <strong>Mac OS X</strong>.</p>
<p><strong><em>Capuccino </em></strong>no require que sepas HTML, CSS o Javascript, tus aplicaciones web serí­an desarrolladas únicamente con el lenguaje <strong>Objective-J</strong> que es una réplica del<strong> Objective-C</strong> utilizado por <strong>cocoa</strong>, esto facilita la transisión para los desarrolladores de aplicaciones de escritorio.</p>
<p>El <strong>framework </strong>en sí­, se ve muy prometedor, al igual que SproutCore utilizado por Apple para desarrollar sus mas nuevos servicios Web. Haré unas cuantas pruebas sobre <strong><em>capuccino </em></strong>para ver que tal se lleva.</p>
<p><strong>Links</strong></p>
<p><a href="http://cappuccino.org" target="_blank">Capuccino</a></p>
<p><a href="http://cappuccino.org/download/" target="_blank">Descargar Capuccino</a></p>
<p>[Via <a href="http://www.techcrunch.com/2008/09/04/cappuccino-brings-cocoa-like-programming-to-the-web/" target="_blank">TechCrunch</a>]</p>
<a href="javascript:toggleStartStop();PicLensLite.start({feedUrl:'http://www.alfrek.net/blog/wp-content/plugins/wp-piclens/mrss.php?id=687'});">Start Slide Show with PicLens Lite <img src="http://www.alfrek.net/blog/wp-content/plugins/wp-piclens/PicLensButton.png" alt="PicLens" width="16" height="12" border="0" align="top"></a>]]></content:encoded>
			<wfw:commentRss>http://www.alfrek.net/blog/2008/09/capuccino-nos-brinda-programacion-al-estilo-cocoa/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

