
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 “jQuery UI theme Switcher“, por lo que es completamente customizable.
Sus objetivos son:
- Ser inobstrusivo
- Uso máximo de 2 clicks.
- Navegación de teclado intuitivo.
- Ser usable en dispositivos táctiles.
- Compatible con browsers nuevos y viejos (Degrade Gracefully)
Requisitos: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/
[Via WebAppers]
Start Slide Show with PicLens LiteLo 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.
Como puedes saber, Javascript tiene muchos “escuchadores de eventos”. Para los atajos del teclado usaremos onkeyup, 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.
Los códigos de teclado consisten en 2 o 3 numeros, cada tecla tiene su propio código (vea la lista completa al final).
EJEMPLOS
En el siguiente ejemplo vamos a ejecutar una acción si la tecla combinación de teclas Ctrl+S es presionada:
var isCtrl = false;
document.onkeyup=function(e) {
if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert('Guardando...!');
return false;
}
}
Ahora veamos el mismo ejemplo, pero utilizando jQuery:
var isCtrl = false;$(document).keyup(function (e) {
if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
alert('guardando... Con jQuery');
return false;
}
});
En estos ejemplos, empezamos verificando si la tecla Ctrl fue presionada, Si fue presionada, el valor inicial de la variable isCtrl será “true“. si las teclas son liberadas, a isCtrl se le asignará “false” de nuevo.
Una vez hecho esto, tenemos que verificar si la segunda tecla presionada es S, como nuestro atajo consiste en una combinación de teclas, también debemos verificar si la variable isCtrl es “true“.
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.
Referencia de códigos
| Key | Keyboard code |
|---|---|
| Backspace | 8 |
| Tab | 9 |
| Enter | 13 |
| Shift | 16 |
| Ctrl | 17 |
| Alt | 18 |
| Pause | 19 |
| Capslock | 20 |
| Esc | 27 |
| Page up | 33 |
| Page down | 34 |
| End | 35 |
| Home | 36 |
| Left arrow | 37 |
| Up arrow | 38 |
| Right arrow | 39 |
| Down arrow | 40 |
| Insert | 45 |
| Delete | 46 |
| 0 | 48 |
| 1 | 49 |
| 2 | 50 |
| 3 | 51 |
| 4 | 52 |
| 5 | 53 |
| 6 | 54 |
| 7 | 55 |
| 8 | 56 |
| 9 | 57 |
| a | 65 |
| b | 66 |
| c | 67 |
| d | 68 |
| e | 69 |
| f | 70 |
| g | 71 |
| h | 72 |
| i | 73 |
| j | 74 |
| k | 75 |
| l | 76 |
| m | 77 |
| n | 78 |
| o | 79 |
| p | 80 |
| q | 81 |
| r | 82 |
| s | 83 |
| t | 84 |
| u | 85 |
| v | 86 |
| w | 87 |
| x | 88 |
| y | 89 |
| z | 90 |
| 0 (numpad) | 96 |
| 1 (numpad) | 97 |
| 2 (numpad) | 98 |
| 3 (numpad) | 99 |
| 4 (numpad) | 100 |
| 5 (numpad) | 101 |
| 6 (numpad) | 102 |
| 7 (numpad) | 103 |
| 8 (numpad) | 104 |
| 9 (numpad) | 105 |
| * | 106 |
| + | 107 |
| - | 109 |
| . | 110 |
| / | 111 |
| F1 | 112 |
| F2 | 113 |
| F3 | 114 |
| F4 | 115 |
| F5 | 116 |
| F6 | 117 |
| F7 | 118 |
| F8 | 119 |
| F9 | 120 |
| F10 | 121 |
| F11 | 122 |
| F12 | 123 |
| = | 187 |
| Coma | 188 |
| Slash / | 191 |
| Backslash \ | 220 |
El articulo original fue publicado en CatsWhoCode, traducido por mí.
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 lo intentes. El uso de excepciones no solventa los errores de programación, eso sácalo de tu mente.
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.
Ejemplo
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.
<?php
try
{
if( ! fopen( "miarchivo.php",'r' ) )
{
throw new Exception('Error al abrir el archivo.');
}
echo "El archivo fue abierto correctamente.";
// ...Código para trabajar con el archivo....
}
catch (Exception $e)
{
echo $e->getMessage(), "\n";
}
?>
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:
Warning: fopen(miarchivo.php) [function.fopen]: failed to open stream: No such file or directory in path\exception.php on line 5
En cambio, con el manejo de excepciones el Script mostrará el siguiente error:
Error al abrir el archivo, es posible que no exista.
Claro, PHP 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 PHP.
De hecho, 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).
El ejemplo es sencillo y es utilizable en cualquier caso de uso real, así que espero que les sirva de algo.
Entradas relacionadas
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: 69.64.59.193 en el canal #php.
![]()
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 Objective-J que es una réplica del Objective-C utilizado por cocoa, esto facilita la transisión para los desarrolladores de aplicaciones de escritorio.
El framework 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 capuccino para ver que tal se lleva.
Links
[Via TechCrunch]
Start Slide Show with PicLens Lite
Alfredo Juarez is Digg proof thanks to caching by WP Super Cache