Para evitar esto existe una técnica llamada Sticky Footer de la que ya hablé aqui entradas atrás.

Esta versión es algo más sencilla que la anterior, y como es un tema que interesa bastante, por lo menos eso de muestran las entradas del blog, quería dejarla aqui.

Están sencillo como estructurar nuestra página de la siguiente forma:

Y aplicar el siguiente CSS:

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -180px; /* negative value of footer height */
	height: 180px;
	clear:both;} 

Por ello, como diseñador, siempre hay que estar al tanto de nuestra librería de tipografías y buscar la que más se adapte al medio donde vayamos a usarla y la que más nos guste para que el resultado, además de funcional sea estéticamente bonito. A continuación una lista de mis tres fuentes favoritas. Las tres me encantan y suelo tenerlas muy en cuenta.

1. Museo

Esta es mi fuente favorita y salta a la vista. La podéis encontrar en el logo de este blog, titulares y algunos textos destacados. ¡Me encanta!

Personalmente me encanta, sobre todo en mayúsculas. Al parecer el autor empezó diseñando la letra “U” en mayúsculas y a partir de ahí continuó con el resto de letras mayúsculas. De hecho, en un principio su intención erá crear una tipografía solo en letras mayúsculas aunque finalmente cambió de opinión. Puede que sea esta la razón por la que luce tan bien en mayúsculas.

Museo está disponible en 5 formatos dependiendo de su grosor: 100, 300, 500, 700 y 900. Y cada una de ellas en cursiva o normal. Las versiones de 300, 500 y 700 en normal son gratuitas, el resto de pago.

2. Trocchi

Trocchi es una fuente derivada de English typecutter Vincent Figgins (1766-1844). Deriva de estos diseños anteriores para generar una “slab serif” algo más informal. Esta fuente se puede usar tanto para diseños como para textos ya que es legible y bonita. Su nombre es en honor del escritor escocés Alexander Trocch.

Esta fuente es completamente gratuita y la tenemos en Google Fonts con lo cual podremos usarla fácilmente en web usando @font-face.

3. Inconsolata

Esta, es mi fuente favorita de ancho fijo. La tengo configurada por defecto en Sublime Text 2 (mi editor de texto favorito) y en el Terminal de mac. Aunque este diseñada para usarse en editores de código luce muy bien en cualquier tamaño ya que cuida los detalles al máximo. A pesar de ser una fuente de ancho fijo es muy legible, por eso, es mi preferida para este uso.

Al igual que la anterior, también está disponible en Google Font y es completamente gratuita.

Me gusta mucho ir viendo fuentes nuevas pero por ahora, estas 3 son mis imprescindibles, mis favoritas.

Como no me funcionó nada, cree este pequeño código javascript que hace lo mismo que trataban de hacer esos plugins.

Como podéis ver, simplemente agarra el contenido del div que le indiquemos, abre un popup con él y lo imprime. Sencillo y funcional.

Los CMS de tiendas online están todos, por lo general, muy verdes. Las opciones principales que podemos encontrar hoy son Magento y Prestashop.

Sobre Magento, no tengo mucho que decir ya que prácticamente no lo he probado pero leyendo opiniones por la red se comenta que el rendimiento es muy malo, y que además es demasiado complejo, tiene muchas opciones, es muy lioso y la curva de aprendizaje es lenta, muy lenta. Al parecer está más pensado para grandes empresas no para pequeñas tiendas de PYMES.

En cambio, Prestashop, si lo he probado y tampoco me gusta. Parece ser la mejor opción de las disponibles pero:

• El panel de control, apesta. Tal cual, la usabilidad es mínima. Por ejemplo:
• Hay cosas que se configuran en Tools como el idioma y otras en Preferences como la Geolocalización.
• Las pestañas son un menú en si mismas.
• Si queremos editar una categoría estando dentro de ella tenemos que hacer click en un icono situado en el breadcumb.
• Hay opciones “ocultas”. Cosas como cambiar el email de destino del formulario de contacto te puede llevar varios minutos las primeras veces.
• Errores, muchos errores. He tenido todo tipo de problemas, el carro ajax da problemas, el proceso de compras en un solo paso, la función para recuperar la contraseña nunca me ha funcionado (he tenido que recurrir a “trucos” para recuperarla) , etc.
• No es posible, por defecto, exportar listas de productos, categorías, etc. Podemos importar estos desde un CSV sin muchos problemas, pero si queremos luego exportarlos para realizar cualquier cambio tendremos que recurrir a modulos externos en su mayoría, de pago.

Aún así, una vez superados estos problemas y una vez que consigues acostumbrarte al panel de control tiene cosas muy buenas, como por ejemplo, la opción de crear productos configurables o con atributos además del generador de estos es bastante bueno.

Supongo que es cuestión de que vaya evolucionando y corrigiendo estás cosas. Tengo ganas de que hagan un rediseño del panel de control simplificándolo y organizándolo, se me hace muy incomodo de usar.

El plugin automáticamente recorrera todo el contenido de nuestra página buscando las cabeceras (h1, h2, h3 …) y creando una lista de enlaces con sus anclas o anchors. Además nos añade un efecto de desplazamiento suave al hacer clic sobre estás anclas y también destacará en el menú la posición actual donde nos encontremos.

Un plugin sencillo, ideal para crear páginas de documentación, para faq’s o para contenido muy largo en general.

Para integrar el plugin en nuestra página simplemente bastará con incluir la librería de jQuery además del archivo jquery.toc.js e iniciar el plugin.

$('#toc').toc({
    'selectors': 'h1,h2,h3', //elements to use as headings
    'container': 'body', //element to find all selectors in
    'smoothScrolling': true, //enable or disable smooth scrolling on click
    'prefix': 'toc', //prefix for anchor tags and class names
    'highlightOnScroll': true, //add class to heading that is currently in focus
    'highlightOffset': 100, //offset to trigger the next headline
    'anchorName': function(i, heading, prefix) { //custom function for anchor name
        return prefix+i;
    }
});

A continuación solo nos queda darle algo de CSS al menú. Por ejemplo, para dejarlo tal y como se muestra en la documentación bastaría con:

#toc {
    top: 0px;
    left: 0px;
    height: 100%;
    position: fixed;
    background: #333;
    box-shadow: inset -5px 0 5px 0px #000;
    width: 150px;
    padding-top: 20px;
    color: #fff;
}

#toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#toc li {
    padding: 5px 10px;
}

#toc a {
    color: #fff;
    text-decoration: none;
    display: block;
}

#toc .toc-h2 {
    padding-left: 10px;
}

#toc .toc-h3 {
    padding-left: 20px;
}

#toc .toc-active {
    background: #336699;
    box-shadow: inset -5px 0px 10px -5px #000;
}

Si el dominio también cambia además de hacer estos cambios, tenemos el problema de que los enlaces internos dejarán de funcionar y además, las imágenes que tenemos incrustadas, también dejarán de funcionar por el cambio de dominio. Soluciones para esto hay muchas, la más fácil, la que he encontrado en el blog de Andrés.

Simplemente entramos a PHPMyAdmin o cualquier otro y ejecutamos la siguiente consulta SQL:

update wp_posts set post_content = replace(post_content,'http://www.antiguo.com','http://www.nuevo.com');

Esta consulta lo que hará es buscar en el contenido de nuestras entradas toda las apariciones en enlaces del dominio antiguo replazandolo por el nuevo. Así de fácil.

Los selectores podemos organizarlos en varias categorías.

1. Pseudo-clases estructurales

Permiten seleccionar elementos basándose en información extra del árbol del documento. Es decir, además de las clases e id podemos seleccionar elementos basándonos en su posición en el documento:

• :root: selecciona la raíz del documento.
• :nth-child(n): selecciona elementos que son el n-ésimo hijo de sus padres.
• :nth-last-child(n): selecciona elementos que son el n-ésimo hijo de sus padres, empezando a contar por el final.
• :nth-of-type(n): selecciona elementos que son el n-ésimo hermano de un tipo.
• :nth-last-of-type(n): igual que el anterior, pero contando desde el final.
• :last-child: selecciona elementos que son el último hijo de sus padres.
• :first-of-type: selecciona elementos que son el último hermano de su tipo.
• :last-of-type: selecciona elementos que son el último hermano de su tipo.
• :only-of-type: selecciona elementos que son el único hermano de su tipo.
• :only-child: selecciona elementos que son el único hijo de sus padres.
• :empty: selecciona elementos que no tienen hijos.

2. Pseudo-clases de estado del elemento

Estos seleccionan elementos dependiendo de l estado de este:

• :enabled/:disabled: selecciona elementos que están activados/desactivados.
• :checked: selecciona elementos marcados.
• :indetermined: selecciona elementos cuyo estado no está determinado.

3. Elementos desclasificados

Finalmente, tenemos 3 elementos que no pueden ser añadidos a ninguna de las categorías anteriores.

• :target: selecciona un elemento que se corresponde con un enlace con nombre (named archor) dentro de la página.
• :not(s): selecciona los elementos que no cumplen un selector simple pasado como parámetro.
• :selection: selecciona cualquier parte de la página que haya sido resaltada por el usuario.

Normalmente pensamos que estos prefijos están para molestar, para obligarnos a escribir una misma propiedad varias veces para que funcione en los distintos navegadores. Por desconocimiento, se piensa que es algo que existe para fragmentar la Web y obligar a los desarrolladores a realizar modificaciones especificas para los distintos navegadores.

Esto es un error, lo cierto, es que los prefijos están precisamente para lo contrario. Las propiedades con estos prefijos nos indican que aún no han llegado a ser un estándar aprobado por la W3C o que están en fase experimental.

Un propiedad debe pasar varias etapas hasta su estandarización. El ciclo habitual de aprobación de un estándar en la W3C comprende los siguientes niveles:

• Working draft: borradores. Son versiones muy verdes, aún se está recogiendo feedback de la comunidad y son muy susceptibles a cambios e incluso las características del estándar pueden cambiar.
• Candidate Recommendation: ya se considera un elemento maduro por la W3C.
• Proposed Recommendation: se ha comprobado que la especificación se puede desarrollar con almenos dos versiones independientes e interoperables.
• Por último, W3C Recommendaiton. Ya es un estandar como tal.

Por lo tanto, la W3C recomienda el uso de prefijos mientras la propiedad no sea un W3C Recommendation, es decir, un estándar como tal.

De esta forma se evita que los desarrolladores ignoren la inmadurez de la propiedad en cuestión y además aceptan que la propiedad es susceptible a cambios.

El problema a la hora de crear y sobre todo testear un diseño de este tipo es que no disponemos de distintos dispositivos ni pantallas. Tampoco sabemos la resolución de la mayoría de smartphones o tablets del mercado, etc.

Con The Responsinator podemos ver de un solo vistazo como se vería nuestra web en la mayoría de dispositivos disponible en el mercado de forma que rápidamente nos haremos una idea y podremos ver los errores, etc.

He probado otros theme frameworks pero ninguno me ha gustado.

Este, al contrario me ha ido muy bien, con el he conseguido maquetar diseños muy rápida ya que la mayoría de el código base ya está, simplemente tienes que centrarte en el diseño.

Estas son algunas de las ventajas que obtenemos con Toolbox son:

• CSS minimo: el theme viene con los estilos css mínimos para que el theme mantenga minimamente la forma (header arriba, sidebar a la derecha y footer abajo) con lo cual no habrá estilos que nos molesten a la hora de personalizarlo, ni cientos de lineas por los que movernos buscando la clase adecuada.
• Definir nuevos sidebar es cosa de niños. Todo está preparado de tal forma que podemos definir un nuevo sidebar en segundos.
• Menús. Al igual que con los sidebars añadir menús es coser y cantar.
• Esta escrito en HTML5
• Y lo mejor de todo. Esta echo por los chicos de Automattic, creadores de WordPress. Quien mejores que ellos para crear un buen código, compatible y que haga que nuestro theme pase los controles de calidad cuando queramos, por ejemplo, darlo de alto en el directorio.

Llevo tres semanas en Madrid, con un nuevo trabajo en Clever Consulting y la verdad que todo va bastante bien, y a pesar de que trabajo las mismas horas de siempre y hago más o menos las mismas cosas de siempre no consigo llegar a casa antes de las 21/22 h. y llego rendido.

Mi intención es seguir publicando con la regularidad normal, dos o tres entradas a la semana, e incluso tengo una pequeña modificación del diseño del blog, aunque aún esta a medias.

Os pido disculpas y en las próximas semanas esto volverá a la normalidad.

El editor, desgraciadamente no es perfecto, tiene algunas carencias como por ejemplo un buen FTP como el de Coda para conectar con el servidor, editar archivos en linea, subir archivos locales, etc. Pero, tiene otras características que lo hacen muy comodo y útil a la hora de programar.

1. Selección multiple

Esta es una de esas características que una vez te acostumbras a usarlas no puedes vivir sin ellas.

• Pulsando ⌘ + D seleccionamos la siguiente ocurrencia según el texto que tengamos seleccionado.
• Con ⌘ + L seleccionamos la siguiente linea.
• Y con ⌘ + ratón podremos seleccionar lo que queramos manualmente.

2. Minimapa

Consiste en una pequeña barra lateral derecha en la que podremos ver nuestro código en pequeño y así ir de un solo clic a cualquier sitio del código que queramos.

Resulta útil para ver todo el código de un solo vistazo y movernos por el cómodamente.

3. Control de paquetes

O Package Control en ingles nos permite instalar plugins y configurar a nuestro gusto el editor. Para instalarlo tenemos que abrir la consola de Sublime ( View » Show Console ) y pegar lo siguiente:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

Tenemos todo tipo de plugins o paquetes estos son mis favoritos:

• ZenCoding, es mi favorito con diferencia. Para los que no lo conozcáis, nos permite escribir código de forma más sencilla y rápida, por ejemplo:

  .caja>ol>li*5

  Pasaría a ser:

  <div class="caja">
  	<ol>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ol>
  </div>

• Prefixr nos permite hacer más compatible nuestro código CSS con todos los navegadores. Seleccionamos el código CSS que queramos procesar, pulsamos Ctrl+⌘+X y nos transformará el código automáticamente.

4. Personalización

Junto a los plugins, podemos personalizar la apariencia por medio de themes.

Personalmente el diseño que trae Sublime Text 2 me parece demasiado oscuro. Me gusta más un diseño claro ya que se me cansa menos la vista después de unas horas usandolo. Soda es un theme que me encanta. Clarito, elegante y encaja a la perfección en Mac OS.

5. Navegación por teclado

La he dejado para el final, pero es de las mejores. ST2 incorpora una serie de accesos de teclado que nos permite movernos por nuestro archivo de texto de forma rápida y directa sin tener que usar el ratón.

Para acceder a esta función tenemos que pulsar Ctrl/⌘ + P y nos aparecerá un cuadro de texto donde podremos:

1. Ir a cualquier función del código escribiendo@ + Nombre de la función
2. Con # nos moveremos por las distintas etiquetas HTML del documento.
3. Escribiendo : + Número iremos directamente a la linea en cuestión.
4. Y, si no ponemos ningún caracter especial podremos abrir cualquier archivo simplemente tecleando el nombre de este.

Puede parecer algo complejo, pero desde que te acostumbras a usarlo se convierte en una herramienta fundamental.

Estas son las 5 razones que a mi me convencieron. Te aconsejo que lo pruebas, ya que no pierdes nada y tomes tu propia decisión. ¿Cual es tu editor favorito?

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.