Indice de la serie:

1. Creando y entendiendo expresiones regulares
2. Expresiones regulares comunes
3. Usando las expresiones regulares

Este es el último artículo de esta Guia de Expresiones Regulares. En el primer capítulo vimos las palabras reservadas para crear nuestras propias expresiones regulares. En el segundo, vimos y explicamos algunas de las expresiones más comunes.

Por último, en este tercer capítulo, aprenderemos a usar las expresiones regulares que hemos aprendido a crear o hemos visto anteriormente.

Usar expresiones en PHP

En PHP disponemos de la función preg_match:

preg_match ( string $pattern , string $subject [, array &$matches [, int $flags = 0 [, int $offset = 0 ]]] )

Esta función dispone de 2 parámetros obligatorios y tres opcionales, pero, por lo general con los tres primeros nos será más que suficiente:

1. pattern, aqui irá nuestra expresión regular.
2. subject, será un string en donde se buscará la expresión regular.
3. matches, nos devolverá las coincidencias. En matches[0] contendrá el texto completo coincidente con la expresión. En matches[1] la primera parte de la expresión, etc.

También podemos usar preg_replace en caso de que queramos buscar y remplazar algo.

En Javascript

En javascript usamos match. Como podemos ver en el siguiente código:

1. Definimos la expresión regular (en este caso comprobaremos un email).
2. Creamos la variable que queremos comprobar.
3. Y usando email.match(RegExPattern) devolverá true o false dependiendo si coincide o no y entrará a la sección del if correspondiente.

    var RegExPattern = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
    var email = 'victoor89@gmail.com';

    if ((email.match(RegExPattern))) {
        alert('Email correcto');
    } else {
        alert('Incorrecto');
    } 

Indice de la guia:

1. Introducción
2. UITableView
3. …

Hoy continuamos con esta guia de programación para iPhone.

En el primer capítulo aprendimos a crear una aplicación sencilla que tras pulsar un botón nos muestre en un label el mensaje “Hola Mundo!”. Erá una aplicación sencilla pero con ella aprendimos a relacionar elementos del StoryBoard con el código y a crear acciones que se ejecutan al pulsar sobre botones.

En este capitulo, el segundo, aprenderemos a manejar los UITableView que son uno de los elementos más útiles que nos encontraremos a la hora de crear una app. Para empezar simplemente crearemos una tabla y añadiremos celdas a partir de un array que crearemos también.

Vamos, paso a paso

Para empezar, como siempre, creamos un nuevo proyecto (No voy a explicar como crear un nuevo proyecto, en el capítulo uno de esta guia ya se explica). En este caso, crearemos una “Empty Application“.

Como podemos ver, este proyecto comienza solo con los archivos AppDelegate.h y AppDelegate.m.

Necesitamos un archivo StoryBoard. Para crearlo vamos a File » New » New File… y en la categoría UserInterface elegimos StoryBoard y lo creamos.

Ahora pasamos con el archivo StoryBoard

Para empezar tenemos que arrastrar una Table View Controler al StoryBoard. Este nos creará la primera vista con el TableView incluido.

Por defecto, la TableView viene configurada con las celdas en estilo “Custom”. Este estilo es para personalizar las celdas a nuestro gusto añadiendo elementos dentro de esta tal y como queramos, pero empezaremos con algo más sencillo.

Definiremos el tipo de celda como “Basic” que nos generará celdas sencillas con un unico Label dentro y nos será suficiente para empezar.

Si ejecutamos ahora el código nos saldrá una pantalla en blanco. Esto se debe ya que al poner Empty Application no nos carga la vista por defecto. Para que cargue nuestra tabla debemos de hacer dos cosas:

1. Primero debemos de dirigirnos al proyecto y definir StoryBoard como la interfaz que usará la aplicación tal y como indica la imagen. (Se explica mejor con una imagen que con mil palabras)
2. Y por último modificamos en el archivo AppDelegate.m la función - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions así:

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
       return YES;
   }

Ahora al ejecutar nuestra app veremos la lista aunque por ahora sigue vacía.

Rellenando la lista

Primero necesitamos el controlador para la vista. Para ello vamos a File » New » New File… y creamos un archivo del tipo “UIViewControllersubclass“. En class ponemos el nombre que queramos y en “subclass of” tenemos que poner UITableViewController (Controlador de una table view).

Tenemos que relacionar el controlador con la vista. Para ello en el StoryBoard seleccionamos el “Table View Controller” y le ponemos de Class el archivo que acabamos de crear. (Imagen).

Y a la celda debemos de ponerle el “identifier” como Cell (Es el que se usa por defecto en el código). (Imagen izquierda)

Por último, el código

Tenemos que modificar el archivo .h y .m que creamos anteriormente.

Cabecera (Archivo .h)

Solo tenemos que definir aqui el array que vamos a usar para rellenar la lista. Quedará así.

#import 

@interface TableViewController : UITableViewController {
    NSArray *tabla; // Array
}

@end

Implementación (Archivo .m)

En este archivo son varias cosas las que debemos de hacer.

1. Debemos de definir el número de secciones y filas que tendrá nuestra tabla

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [tabla count];
}

2. Debemos añadir elementos de la lista al Array

- (void)viewDidLoad
{
    [super viewDidLoad];

    tabla = [NSArray arrayWithObjects:@"1", @"2", @"3", @"4", @"5", nil];

    // Uncomment the following line to preserve selection between presentations.
    // self.clearsSelectionOnViewWillAppear = NO;

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

3. Debemos escribir el label de cada celda

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    // Configure the cell...
    cell.textLabel.text = [tabla objectAtIndex:indexPath.row];

    return cell;
}

¡Terminamos!

Con esto ya esta todo hecho. Como resultado tendremos una lista de 5 celdas con números del 1 al 5 como definimos en el array.

Esta vez ha sido un poco más complicado que el primer capítulo y puede que no haya quedado tan claro.

Como este proyecto es algo más complicado he subido todo el proyecto.

Como siempre, cualquier duda, usar los comentarios y si te ha gustado comparte el enlace en Twitter, Facebook o Google Plus. Gracias.

De esta forma conseguiremos hacer nuestra página más personal y puede que así consigamos mejorar las ventas. Imaginaos que entrais a una tienda online y esta os avisa de los gastos de envio a vuestra casa gracias a la información que obtiene. Esta es solo una de las posibilidades que se me ocurren.

Algunos de los datos que obtendremos son:

1. País y ciudad
2. Fecha de la última visita
3. Si viene de un buscador, sabremos desde cual y que ha buscado para llegar.
4. Tiempo que pasa en la web
5. Navegador y sistema operativo
6. Si viene desde un dispositivo móvil sabremos desde cual.
7. Y mucho más…

El uso no puede ser más sencillo.

Después de registrarnos, es necesario para obtener una clave, agregamos la librería a nuestra página con la clave que nos den:

Hecho esto, ya podremos obtener datos de los usuarios con las variables que podemos ver en la documentación. Por ejemplo, de esta forma escribimos en la caja #visitor-locale-countryCode el país al que pertenece el visitante:

$('#visitor-locale-countryCode').text(getValueText(visitor.locale.countryCode));

Indice de la serie:

1. Creando y entendiendo expresiones regulares
2. Expresiones regulares comunes
3. Usando las expresiones regulares

En un primer artículo sobre las expresiones regulares aprendimos como crearlas y las diferentes palabras reservadas que podíamos usar.

En este segundo artículo de la serie mostraré algunas de las expresiones regulares más comunes. Mirando las palabras reservadas de la noticia anterior junto a estas expresiones comunes las lograremos entender mejor.

Expresiones regulares comunes:

1. Fechas:

   '/^\d{2}\/\d{2}\/\d{4}$/'

   Este expresión nos validará una fecha del tipo DD/MM/YYYY. Es muy sencillo, hay tres grupos separados por un ‘/’.

   • Los dos primeros grupos son d{2}. Es decir, dos digitos seguidos.
   • El último grupo en vez de un dos tiene un 4 ya que son cuatro números para el año.
2. Hora:

   ^(0[1-9]|1\d|2[0-3]):([0-5]\d):([0-5]\d)$

   Con esta expresión validamos una hora del tipo 10:45.33.

3. Email:

   ^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$

   Nos aseguramos de que haya carcateres, más un arroba. Más caracteres y por último un punto y un dominio de dos o tres caracteres como mucho.

4. URL:

   ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)( [a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$

   Con esta expresión validamos una URL. Permitimos dos protocoles, el http y el ftp.

Más expresiones regulares:

Bueno, estas son solo unas pocas de las que podemos crear y encontrar por la red. Aqui os dejo algunas entradas donde encontrareis más:

• Validación con expresiones regulares y Javascript
• 37 Tested PHP, Perl, and JavaScript Regular Expressions

Y en Google, ¡hay muchas más!

Indice de la guia:

1. Introducción
2. UITableView
3. …

No soy ningún profesional en lo que al desarrollo de aplicaciones se para iPhone se refiere. Mas bien estoy aprendiendo. Mientras tanto, trataré de enseñar algunos conceptos básicos para aquellos que quieran iniciarse en este mundillo.

Aprender no me esta resultando nada fácil. La mayoría de libros que encuentro son de versiones anteriores de xCode y no de la actual (la 4.2) y el problema es que muchas cosas han cambiado entre la versión anterior y la actual.

Este manual, y todos los que le precedan estarán hechos con xCode 4.x. Espero que os sea de ayuda y os guste la guia.

Comenzamos

Para empezar, comenzaremos por una aplicación sencilla que tras presionar un botón, nos mostrará el clásico mensaje de “Hola mundo”.

1. Creamos el proyecto

Para ello, abrimos xCode y creamos un nuevo proyecto. Para este primer programa usaremos una “Single View Application“. Le ponemos de nombre, por ejemplo, holaMundo y marcamos las dos primeras opciones [img]: “Use StoryBoard” y “Use Automatic Reference Counting”.

Por último, lo guardamos donde queramos.

2. Ventana de xCode

La imagen superior representa a la ventana que nos encontraremos una vez hayamos creado el proyecto. En esta ventana tenemos todo lo necesario para crear nuestro programa.

Lo que nos interesa, por ahora, son los archivos en la barra izquierda, concretamente tres:

1. Mainstoryboard.storyboard en este archivo diseñaremos toda la parte visual del programa. Diseñaremos las distintas ventanas, con los distintos controles, botones, labels (etiquetas), etc.

Por otra parte, el ViewController gestiona las interacciones que tu código tiene con el display, y también gestiona las interacciones del usuario con tu código. Esta clase esta compuesta por dos archivos.

2. ViewController.h que contiene la cabecera
3. Y, ViewController.m que contiene la implementación

Es decir, en la cabecera definimos aquellas cosas que vayamos a hacer en la implementación.

3. Es hora de programar

Tendremos que trabajar en los tres archivos para esta aplicación. Vayamos uno por uno comenzando por la cabecera.

ViewController.h

Esta es la vista inicial del archivo sin los comentarios.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

Lo que tenemos que hacer, en la cabecera, es definir los elementos y acciones que nos hacen falta. Para el programa necesitamos definir una Label y una acción que se ejecutará al pulsar el botón.

El archivo quedará así:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {

    // Etiqueta
    IBOutlet UILabel *etiqueta;
}

// Accion
-(IBAction)mostrarMensaje:(id)sender;

@end

• En la linea 6: Definimos el label que estará en la interfaz. IBOutlet por que es un elemento de StoryBoard del tipo UILabel con el nombre “etiqueta”.
• En la linea 10: definimos la acción. Esta tiene que estar fuera del @interface ya que no pertenece a ella. El nombre de la acción es “mostrarMensaje”.

Guardamos.

ViewController.m

En el archivo de implementación tenemos que desarrollar la acción mostrarMensaje que definimos en la cabecera.

Esta acción tiene como unica función definir el texto de la “etiqueta” para mostrar el mensaje “Hola mundo”.

Dentro de la @implementation tendremos que añadir los siguiente:

-(IBAction)mostrarMensaje:(id)sender {
    etiqueta.text = @"Hola Mundo";
}

Como vemos, solamente cambia la propiedad text de la etiqueta.

Guardamos.

MainStoryBoard.storyboard

Aqui, tenemos que definir el botón y el label. Además tenemos que indicar que el label equivale a “etiqueta” en nuestro código y que el botón ejecutará la acción “mostrarMensaje”.

Vamos paso a paso. Primero diseñamos la aplicación añadiendo los elementos. Simplemente arrastramos un Label y un Round Rect Button a la aplicación para que nos quede más o menos así.

Para terminar solo nos queda relacionar los elementos. Primero hacemos click derecho sobre el label y arrastramos el circulo a la derecha de “New Referencing Outlet” a la vista y seleccionamos “etiqueta”.

Con el botón es parecido. Pero en vez de “New Referencing Outlet” tenemos que arrastrar el circulo de “Touch Up Inside” y luego seleccionar “mostrarMensaje:”.

4. Terminamos

Nuestra aplicación esta lista. Ya podemos ejecutarla pulsando el play en la parte superior izquierda y comprobar que todo funciona bien.

Espero que os haya gustado y este todo bien explicado. Cualquier duda, usar los comentarios y como siempre se agradece compartir el enlace en Twitter, Facebook o Google Plus.

Usando jQuery y CSS he creado este pequeño menú desplegable de subscripción donde podemos ofrecer a nuestros usuarios los enlaces a los distintos feeds rss de nuestra página.

El menú es realmente sencillo, no es nada complicado ni nada del otro mundo. Pero, gracias a él podemos darnos cuenta de que con 6 lineas de jQuery y un poco de CSS podemos lograr cosas alucinantes.

Si sabéis jQuery, esto os parecerá muy sencillo y no os enseñará nada. Si por el contrario no sabéis, este código os podrá servir de introducción y os dareis cuenta de que es realmente sencillo hacer cosas con el sabiendo muy poco.

Veamos el código

HTML

Nada que destacar por aqui. Una caja con dos mas dentro, una de ellas es la que se muestra y se oculta que contiene, además, la lista de enlaces y la otra es para la flecha que indica el estado de la caja.

<div id="caja_rss">
	Subscribete
	<div class="flecha cerrado">&nbsp;</div>
		<div class="caja" style="display:none">
			<ul>
				<li><a href="#">Feed RSS</a></li>
				<li><a href="#">Email</a></li>
				<li><a href="#">Comentarios</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

Lo mismo que lo anterior. Si estamos familiarizados con CSS este código no tiene nada de especial. Unos bordes redondeados por aqui, fondo naranja por allí, algunas sombras y poco más.

#caja_rss {
	width: 120px;
	margin: auto;
	text-align: left;
	font-size: 16px;
	padding: 8px 14px 9px;
	color: #fff;
	text-decoration: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);

	cursor: pointer;
	background-color: #ff5c00;
}

.flecha {
	background: url('flechas.png') no-repeat;
	float: right;
	width: 20px;
	height: 20px;
}
.flecha.cerrado {	background-position: 0px -10px;	margin-top: -13px;	margin-bottom: -10px;}
.flecha.abierto {	background-position: 0px 10px;	margin-top: -23px;}

.caja {
	background: #EEE;
	margin: 10px -10px -6px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.caja ul {	padding: 5px 10px;	list-style: none;	margin: 0;}
.caja li {	padding: 2px 0;}
.caja a {
	color: #444;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px dotted #888;
}
.caja a:hover {	border-bottom: 1px solid #666;	color: #222;}

La magia, jQuery

Aqui es donde pasa todo.

Como vemos el código jQuery, como siempre va contenido dentro del $(document).ready para evitar que se ejecute antes de terminar la carga.

Luego tenemos un toggle que se ejecuta al hacer clic sobre el elemento #caja_rss. Vemos como dentro de este elemento tenemos dos funciones, cada una de ellas se ejecutará una vez cada una.

1. La primera función sirve para desplegar el menú y eliminar y añadir la clase cerrado y abierto respectivamente
2. La segunda función hace lo contrario para dejar el menu como al principio

$(document).ready(function(){
	$('#caja_rss').toggle(
		function(){
			$('.caja').slideDown();
			$('.flecha').removeClass('cerrado');
			$('.flecha').addClass('abierto');
		},
		function(){
			$('.caja').slideUp();
			$('.flecha').removeClass('abierto');
			$('.flecha').addClass('cerrado');
		}
	);
});

Y esto es todo. Como siempre, dudas y preguntas en los comentarios y si te ha servido de ayuda o te ha gustado comparte la para ayudar a cuantos más mejor.

Swipe JS es una slider pero se caracteriza por estar pensado para pantallas táctiles. Es perfecto para dispositivos como iPhone, iPads y demás aunque también es completamente funcional con ratón.

Por lo tanto, el uso de este plugin para webs móviles es perfecto y es ahí donde veremos el plugin en su máximo esplendor.

Las características que lo hacen especial son:

• Desplazamiento 1:1 Las cajas se desplazaran junto a nuestro dedo de forma identica a como lo hacen, por ejemplo, los escritorios del iPhone.
• Resistencia en los bordes Cuando llegamos al final o al principio y intentamos arrastrar este se nos resistirá al igual que cuando llegamos al final de una lista en el iPhone.
• También ajusta el ancho automáticamente a la pantalla al rotar el dispositivo.

Estas características hacen que su comportamiento sea prácticamente identico a una aplicación del sistema por lo que se vuelve algo completamente intuitivo.

Uso

Para implementarlo solamente necesitamos el HTML que como vemos es una simple lista dentro de un contenedor:

Y el Javascript que indica que caja será nuestro slider:

window.mySwipe = new Swipe(
  document.getElementById('slider')
);

Nada más, ni otras librerías ni nada por el estilo.

Con este nuevo rediseño sigo la idea del anterior, un diseño sencillo en el que destaquen las entradas y los enlaces interesantes, las dos secciones de contenido del blog. Como veis la estructura es muy similar al diseño anterior aunque visualmente, no se parece en nada.

El menú superior esta ahora oculto y lo podremos desplegar haciendo click en la flecha negra de la parte superior derecha. Solo lo veremos cuando queramos acceder a él, el resto del tiempo solo nos distraerá de lo importante.

El logo

Como podeis ver sigo usando la fuente Museo (mi favorita, sin duda) pero ahora le he incluido un logo que espero os guste.

El logo sale de la idea de juntar los símbolos < y > (usados en programación) en uno solo.

Más social

Ultimamente el blog estaba ganando visitas y la mayoría provenían de redes sociales como Facebook o Twitter principalmente, por ello, e decido agregar los botones correspondientes para compartir los artículos con un solo clic. Veremos que tal funcionan y si consiguen incrementar el tráfico del blog y llegar a más gente.

Comentarios

Ahora los comentarios son del propio WordPress. Me he artado de Disqus.

Enlaces interesantes

Al igual que antes siguen a la derecha en un segundo plano pero ahora no se importan automáticamente de Delicious como antes, si no que son un tipo de entrada personalizado que he añadido a WordPress.

El funcionamiento es el mismo, al picar en el titulo vamos al enlace y debajo tenemos una pequeña descripción.

Y por último...

El contenido. Ahora, que dispongo de más tiempo, quiero elaborar artículos más completos y profundizar más en los temas. Tengo ganas de preparar algunas guias sobre frameworks, por ejemplo.

Aún así, no prometo nada, ya veremos.

¡Feliz año a todos!, espero que os guste y por supuesto, me encantaría leer vuestras opiniones en forma de comentario.

jQuery.suggest es un plugin sencillo de autocompletado.

Lo mejor de este plugin es su sencillez. Al situarnos sobre un input de texto y teclear sobre el nos irá sugeriendo algunas opciones y al pulsar tab o intro se autocompletará actualizando el campo con el texto en cuestión.

Si hay más de una coincidencia para el texto introducido aparecerá unos ... indicando que hay más de un resultado. Pulsando las flechas arriba y abajo podremos ver los distintos resultados y seleccionar uno. Todo, muy intuitivo.

Uso…

Su uso es sencillo. Tenemos una variable que será un array que contendrá todas las sugerencias. Por último indicamos el #container (elemento) al que le pasamos el array y las dos opciones de configuración, suggestionColor y moreIndicatorClass, este último, indica el elemento que aparecerá cuando haya más de una coincidencia.

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];

$(function(){
  $('#container').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more'
  });
});

Demás esta decir que hay que incluír el archivo del plugin y la librería jQuery.

Tenemos tres estilos de alertas predefinidas: Informativas, Satisfactorias y de Errores. Cada una de ellas tiene su estilo para difenciarse del resto.

HumaneJs no necesita de ninguna librería para funcionar y es configurable el tiempo de duración de la alerta, la forma de cerrar la alerta, etc.

Personalmente preferiría algún plugin sencillo para jQuery y así no lidiar con muchas librerías distintas pero esta es otra buena opción.

Esta basado en un sistema de 12 columnas que se adaptan automáticamente dependiendo del tamaño del navegador donde lo carguemos por lo que su uso es similar a sistemas como 960.gs. También incluye una hoja para los textos que nos viene con lo básico y otra para reiniciar los estilos de los navegadores (reset.css).

Además está disponible en dos versiones:

1. Fixed: que se adapta al tamaño del navegador por bloques.
2. Fluid: por el contrario se adapta al navegador aprovechando el máximo de espacio posible.

En la web del framework tenéis las dos demostraciones de como funciona cada uno de ellos.

Indice de la serie:

1. Creando y entendiendo expresiones regulares
2. Expresiones regulares comunes
3. Usando las expresiones regulares

Las expresiones regulares, o patrones, son una de las cosas más difíciles de entender debido a su complejidad, pero no nos asustemos. Una vez que las entendamos y les cojamos el tranquillo nos serán de muchísima utilidad.

¿Que son?

Las expresiones regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto.

Caracteres especiales:

Para definir el patrón usamos una combinación de caracteres especiales que nos ayudarán a crear la expresion. Los caracteres especiales más comunes son:

Y con estoy ya podemos crear nuestras própias expresiones regulares.

En el próximo capítulo enseñaré algunas de las expresiones regulares más comunes explicándolas para que además de sernos utiles las entendamos.

En la hoja de estilo encontraremos el botón para Twitter, Facebook, Google, GitHub, Yahoo, Windows Live y OpenID. Además todos ellos están en tamaño normal y en grande.

Estos botones se visualizan correctamente en Google Chrome, Firefox 3.5+, Safari 4+, IE 10+ y Opera 11.10+. Dan algunos problemas en IE6 y IE7.

Nosotros creamos nuestra hoja de estilos sin preocuparon por añadir las distintas propiedades de los distintos navegadores. Simplemente añadiendo las propiedades nativas de CSS nos bastará. Luego, tras pasarlo por Prefixr este añadirá el resto.

Por ejemplo, esto:

.container {
   box-shadow: 20px;
   -moz-transition: box-shadow 2s;
   -webkit-border-radius: 4px;
   animation: slide 1s alternate;
   background: linear-gradient(top, #e3e3e3 10%, white);
}

Pasará a ser esto:

.container {
   -webkit-box-shadow: 20px;
   -moz-box-shadow: 20px;
   box-shadow: 20px;

   -webkit-transition: box-shadow 2s;
   -moz-transition: box-shadow 2s;
   -o-transition: box-shadow 2s;
   -ms-transition: box-shadow 2s;
   transition: box-shadow 2s;

   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;

   -webkit-animation: slide 1s alternate;
   -moz-animation: slide 1s alternate;
   -ms-animation: slide 1s alternate;
   animation: slide 1s alternate;

   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e3e3e3), to(white));
   background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
   background: -moz-linear-gradient(top, #e3e3e3 10%, white);
   background: -o-linear-gradient(top, #e3e3e3 10%, white);
   background: -ms-linear-gradient(top, #e3e3e3 10%, white);
   background: linear-gradient(top, #e3e3e3 10%, white);
}

Aunque, el CSS ganará mucho peso también ganaremos en compatibilidad, lo cual, siempre se agradece.

La librería calcula el tiempo continuamente, teniendo en cuenta que el tiempo avanza, por lo tanto es ideal para mostrar cuentas atras para eventos o fechas especificas.

También podemos configurar el formato en el que nos devuelve la fecha pudiendo añadir milisegundos, segundos, minutos, horas, días, semanas, etc.

Aqui podemos encontrar toda la documentación necesaria y una demostración.

Si no conocéis jQuery Mobile, se trata de un framework que es compatible con la mayoría de navegadores webs de móviles. Además de, estar bien documentado y de poder generar themes con ThemeRoller, incluye también numerosos widgets optimizados para pantallas tactiles así como botones, barras de herramientas, listas, etc que nos ayudarán a comenzar nuestro proyecto móvil.

Sin duda, como mínimo, se merece un vistazo

Para implementarlas en los distintos elementos simplemente tenemos que añadir las clases especificas donde lo deseemos o añadir las propiedades directamente en nuestro archivo CSS.

El problema es que por ahora solo son compatibles con Safari, Chrome y Firefox. Microsoft a anunciado que las animaciones serán compatibles en Internet Explorer 10 y Opera hará lo propio con la versión número 12.

Para solucionar esto podemos usar Animate.css conjuntamente con jQuery y Modernizr. Si el navegador no es compatible con las animaciones css podemos lanzarlas por medio de jQuery y así conseguir que todos los usuarios en todos los navegadores vean correctamente el sitio.

Cada uno de ellos, además, disponen de ejemplos online y una tabla de compatibilidad con los distintos navegadores.

Sin duda, un enlace que todos deberíamos guardar y tener en cuenta.

En Futurico encontramos pestañas, gráficas, botones, swichts, reproductores, calendarios, paginación, formularios, menús desplegables, advertencias, etc. Todos ellos en PSD por lo que podremos personalizarlos sin mayor problema lo deseamos.

El pack podremos descargarlo a cambio de un tuit en DesignModo

En este caso podremos generar una caja en la que podremos personalizar los bordes, la sombra, el degradado de fondo y la transparencia. La posibilidad de personalizar el código es muy amplia, por lo que podremos generar una caja a nuestro gusto personalizado.

Además, en el código generado, se nos añaden propiedades para que la caja se vea correctamente en Internet Explorer 7 y 8. Por lo tanto la compatibilidad del código es máxima.