Hoy os traemos un CSS de un tal Michael Hüneburg que os permite displayar cómodamente combos de teclados, idóneas para manuales o instrucciones en formato HTML, típicas de “Presione CTRL + S para grabar…”

Este CSS convertirá esos textos en auténticas teclas de teclado estilo Apple Mac con teclado de aluminio, un CSS que ocupa na y menos y que por tanto podrás incorporar en tu propio CSS.

A continuación el código del CSS:

/**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

/* Base style, essential for every key. */
kbd, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border: none;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
kbd[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
	background: rgb(80, 80, 80);
	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd.light, .light-keys kbd, .key.light, .light-keys .key {
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

Te dejamos el enlace para la descarga: CSS teclas de teclado (70)

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. Rotación de una imagen con CSS3
3. Cómo añadir un botón para compartir con Facebook

Si pasas el ratón sobre la imagen superior esta rotará de forma automática, se me olvidaba, este efecto no es compatible con Internet Explorer, al igual que intentar acceder a tu banco, vamos a dejarlo claro, realmente Internet Explorer peca de inseguro e incompatible por lo que olvídate de él cuanto antes, pataletas a parte, hazte con un buen navegador web en serio, que los hay, por ejemplo FireFox, Safari o Chrome y para mayor sorpresa son gratuitos y empieza a disfrutar de cosas como la integración con el estandard de hojas de estilo CSS3.

El efecto que te mostramos en este post, es una pequeñísima muestra de una sencilla rotación de imagen,  que señalamos, no está realizada con Flash, tan sólo se usa una sencilla propiedad de CSS3 por lo que es amigable con buscadores.

Páginas relacionadas con este artículo:

1. Internet Explorer 8 incompatible con max-width
2. Representar teclas del teclado
3. Recursos en HTML5 y CSS3

shortcut.add("Ctrl+Shift+X",function() {
  alert("Has presionado CTRL SHIFT X");
});

Enlace: http://www.openjs.com/scripts/events/keyboard_shortcuts/

También puedes descargar la librería desde aquí: Librería javascript para atajos de teclado (54)

Páginas relacionadas con este artículo:

1. Self-service de aplicaciones
2. Compilador JavaScript de Google
3. Correctores ortográfico en PHP y Javascript

Aquí os dejo una tabla para MySQL con todas las provincias Argentinas, en cuanto pueda colgaré las provincias Españolas y si alguien quiere hacer aportes con provincias de otros países, que no lo dude y deje un comentario con su aporte para crear un post.

—

CREATE TABLE `provincias` (
  `provincia_id` int(1) NOT NULL auto_increment,
  `provincia_nombre` varchar(255) NOT NULL,
  `provincia_cpa` varchar(1) NOT NULL,
  PRIMARY KEY  (`provincia_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

--
-- carga de datos de la tabla `provincias`
-- 

INSERT INTO `provincias` VALUES (1, 'Buenos Aires', 'B');
INSERT INTO `provincias` VALUES (2, 'Catamarca', 'K');
INSERT INTO `provincias` VALUES (3, 'Chaco', 'H');
INSERT INTO `provincias` VALUES (4, 'Chubut', 'U');
INSERT INTO `provincias` VALUES (5, 'Ciudad Autónoma de Buenos Aires', 'C');
INSERT INTO `provincias` VALUES (6, 'Córdoba', 'X');
INSERT INTO `provincias` VALUES (7, 'Corrientes', 'W');
INSERT INTO `provincias` VALUES (8, 'Entre Ríos', 'E');
INSERT INTO `provincias` VALUES (9, 'Formosa', 'P');
INSERT INTO `provincias` VALUES (10, 'Jujuy', 'Y');
INSERT INTO `provincias` VALUES (11, 'La Pampa', 'L');
INSERT INTO `provincias` VALUES (12, 'La Rioja', 'F');
INSERT INTO `provincias` VALUES (13, 'Mendoza', 'M');
INSERT INTO `provincias` VALUES (14, 'Misiones', 'N');
INSERT INTO `provincias` VALUES (15, 'Neuqu', 'Q');
INSERT INTO `provincias` VALUES (16, 'Río Negro', 'R');
INSERT INTO `provincias` VALUES (17, 'Salta', 'A');
INSERT INTO `provincias` VALUES (18, 'San Juan', 'J');
INSERT INTO `provincias` VALUES (19, 'San Luis', 'D');
INSERT INTO `provincias` VALUES (20, 'Santa Cruz', 'Z');
INSERT INTO `provincias` VALUES (21, 'Santa Fe', 'S');
INSERT INTO `provincias` VALUES (22, 'Santiago del Estero', 'G');
INSERT INTO `provincias` VALUES (23, 'Tierra del Fuego, Antártida e Islas del Atlántico Sur', 'V');
INSERT INTO `provincias` VALUES (24, 'Tucumán', 'T');

---

Visto en: http://www.pabloglanz.com.ar/2009/10/mysql-con-las-provincias-argentinas/

Páginas relacionadas con este artículo:

1. Search and replace en MySQL
2. Reiniciar MySQL en Ubuntu
3. Error con LOAD DATA LOCAL INFILE en MySql

Seguro que si eres desarrollador web ya te habrás asomado por  los kits de desarrollo para iPhone y para Android.

Si trabajas con php, javascript, html y mysql pero careces de conocimientos en programación en C y del tiempo libre necesario para aprender seguro que habrás desistido en tu intentona de programar para entornos móviles.

Ahora lo tienes más fácil con PhoneGap de la empresa nitobi

¿Qué es PhoneGap?

PhoneGap es una herramienta o conjunto de utilidades que te ofrece un sistema de programación multiplataforma válido para iPhone, Android y Blackberry de código abierto cuya base de lenguaje es JavaScript.

Entre otras características destacamos que con PhoneGap puedes leer el acelerómetro de tu móvil, utilizar el GPS y acceder a cualquier funcionalidad de las pantallas táctiles.

¿Dónde puedo saber más sobre PhoneGap?

Obviamente en la página principal del proyecto, como de costumbre al final te colocamos el enlace hacia dicha página.

Hay un vídeo de 3 minutos muy interesante y alentador.

Además en la todopoderosa han colocado un grupo de discusión sobre el proyecto:

http://groups.google.com/group/phonegap/

Tutoriales puedes encontrar en:

http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse-(Tested)

En la AppStore ya tienes algunas aplicaciones, en esta página tienes los links hacia ellas:

http://www.phonegap.com/projects

Y en el Twitter del propio proyecto;

http://twitter.com/phonegap (Que cuenta ya con más de 2000 followers!)

Ya no tienes excusas, a desarrollar!

Ahora ya no tienes excusa y podrás llevar a cabo aquella aplicación que tenias en mente, te remarcamos que en la AppStore ya han comenzado a aceptar aplicaciones desarrolladas bajo este sistema y gracias a eso algunos pequeños desarrolladores como tu pueden comenzar a ganar algún dinerito.

Nosotros vamos a intentarlo con una versión “mobile” de alguno de nuestros gestores de contenidos e incluso, porque no, con nuestra aplicación de gestión comercial online invOOice.com donde en lugar de lanzarnos al desarrollo de una webapp para iPhone vamos a intentarlo con una aplicación instalable.

Enlace: http://www.phonegap.com/

Páginas relacionadas con este artículo:

1. Google Native Client
2. jQuery para móviles
3. Rootear móviles HTC