Buscando nuevas formas de animar con jQuery me tope con un tutorial muy interesante en buildinternet.com. Este tutorial, el cual también se pueden bajar terminado, explica un método muy interesante para hacer un efecto de rellenado para imágenes. Si quieren entenderlo mejor pueden ver el demo haciendo click aquí. Más que bonito queda el efecto y sin utilizar flash, lo que cada vez es más frecuente, en especial apra pequeñas animacion como botoneras y logos. Para ver el tutorial pueden hacer click en la imagen superior o click aquí. Dentro del sitio tienen la opción de descargárselo ya terminado.

Uno diria “muy lindo. Pero… ¿cómo los hago?” y por esto me parecio interesante este articulo, si hacemos click en la imágen o el titulo de cada efecto nos lleva directamente al tutorial de como realizarlo por nuestra poropia cuenta. Lo bueno de esto es que podemos tomar como base estos tutoriales y crear nuestro propios diseños. Como se darán cuenta este articulo no se encuentra aplicado estrictamente al desarrollo web, sino al diseño grafico, por ende estos tutoriales sirven para cualquier tipo de campaña no solo web.

Theora, es un codec de video libre y gratuito, con una calidad comparable con los MPEG. Pero, gracias al mejor navegador de internet, firefox, estos videos son soportados por el navegador. Que quiere decir esto, que para ver un video al estilo youtube no vamos a necesitar flash player. Así es, no se van a necesitar más plugins de estas empresas privadas para poder ver un video. Si así de práctico, ver un video online, simplemente con tu navegador, por mi parte apoyo 100% este codec y espero verlo en muchos sitios próximamente. Tal vez no lo vean a simple vista, pero para los desarrolladores pagar licencia a Adobe es un gasto, en cambio con este codec de video libre cualquier desarrollador puede implementarlo sin pedirle al usuario que se descargue nada y funcionaría perfectamente y gratis.

Pero si quieren verlo en funcionamiento pueden ir a la página de firefox y hacer click donde dice “Haz una visita guiada a Firefox 3.5″ o simplemente hagan click aquí.

De todos modos el sitio www.adseok.com tiene mucha información sobre SEO, no solo para wordrepss.

Los botones adelante y atrás del navegador

Con cualquier framework como jQuery o mootools hacer una carga de un sitio es realmente simple. Pero se nos presenta un problema muy molesto, perderíamos los botones de navegación. Los tan preciados adelante y atrás serian inutilizables ya que estos se activan cuando se cambia la URL, lo que AJAX evita.

Si buscamos soluciones por internet encontraremos miles de promesas de arreglarlo, pero todas, o la gran mayoría presenta fallos. Sin embargo parece que di con una solución para la mayoría de los navegadores convencionales. El articulo en cuestión es el siguiente http://onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html. Son varias páginas el artículo, léanlo que es interesante. Pero si no aquí tienen un demo funcionando o pueden descargarlo de aquí.

Espero que lo pongan en práctica, es simple y puede serles útil en algún proyecto.

1) qTip

En lo personal el plugin más completo para tooltips de jQuery. Además de incluir soporte para el típico texto de los tooltips, nos permite incluir imágenes, thumbnails de sitios WEB, videos y hasta un traductor. Si quieres ver todos los demos hace click aquí.

2) Internal links

Este plugin es útil si en tu sitio presentas una cantidad grande de links, básicamente lo que hace es que los links dirigidos dentro de tu sitio web se les agregue el favicon del mismo al costado, como señalando que es interno. Realmente ayuda a la navegación dentro de una WEB, y le da un toque distintivo.

3) jQuery Sparklines

Si de plugins funcionales hablamos este es el mejor, cuando hablamos de estadísticas, generalmente es mas rápido mostrar el grafico que describirlo punto por punto. Entonces para ello este plugin nos ofrece un abanico de posibilidades para mostrarlos.

4) Masked input

Este plugin está muy bueno complementado con algún form validator, lo que hace es forzar los inputs con un formato, para que el usuario los complete correctamente. Ideal para completar fechas, teléfonos, códigos postales etc.

5) Slider

Si bien anteriormente mostré el UI de jQuery el cual era completo e incluía un slider, este plugin realmente lo explota, lo que facilita la selección de los ítems ingresados en dicho slider. Aquí un demo.

Ahora, debemos tener una base de datos, en la cual tendremos una tabla y dentro de la tabla un usuario. En mi caso la base de datos se llama “ajaxlogin” la tabla “usuarios” y dentro tengo usuarioID, usuario, password. El cual tiene un registro con los datos usuario: maty y password: 456456. A continuación debemos hacer la consulta SQL y fijarse si existe dicho usuario y contraseña cuando se los envía por POST. El código de este archivo (login.php) seria:

 0) {
	// Usuario correcto, devolvemos 1. Ahora podemos crear la sesion y sus respectivas variables
	echo("1");
}else{
	// Usuario incorrecto, devolvemos 0
	echo("0");
};
?>

Explicando un poco lo que hace este código. Nosotros desde nuestro index, donde tendremos 2 inputs, para poner el usuario y la contraseña, enviaremos dichos valores a este archivo mediante el método POST, entonces este los toma, hace la respectiva consulta a la tabla y se fija si existe y si coinciden. En caso afirmativo devuelve un 1 y en caso negativo un 0. Ahora el código de nuestro index.php sería el siguiente:

<script src="jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
<form>
<table border="0" cellspacing="0" cellpadding="5" width="400" align="center">
<tbody>
<tr>
<td width="120">Usuario</td>
<td>
<input id="txtUser" type="text" /></td>
</tr>
<tr>
<td>Contraseña</td>
<td>
<input id="txtPass" type="text" /></td>
</tr>
<tr>
<td></td>
<td>
<input id="btnLogin" onclick="javascript:doLogin()" type="button" value="Entrar" />
      <img id="imgLoading" style="display: none;" src="loader.gif" alt="" /></td>
</tr>
</tbody>
</table>
</form>

Este archivo es donde tenemos que completar nuestros datos. Para ello utilizo 3 funciones simples, una que muestra y otra que oculta el botón de login y una tercera función que es la encargada de hacer la petición al login.php, y analiza los resultados. Realmente simple y se muestra cómo funciona el flujo de envió y recepción de datos sin recargar la página.
No recomiendo bajo ningún motivo colocar esto asi en un sitio web ya que es solo a modo de demostración, para hacer un login y utilizar AJAX se deben tener en cuenta los aspectos de seguridad, debemos purificar todo el código que ingresa en esos inputs ya que pueden contener código malicioso. Pero bueno para lo que se creo, que fue demostrar cómo funciona AJAX es suficiente.

Estos 3 sitios nos ofrecen templates completos, de buena calidad y gratis listos para descargar.

1) Free Website Templates

Realmente lo que llama la atención de este sitio es lo rápido para descargar los templates, no pide ni siquiera registración, uno selecciona el template y se lo descarga. Además junto al botón download tenemos el boton preview el cual realmente facilita la selección mostrándonos como quedaría el sitio.

2) Free CSS templates

Página muy conocida de templates, al igual que la anterior nos permite ver una previw del sitio funcionando y descargarlo rápidamente. Pero como su nombre lo indica son tempaltes donde predomina el CSS. De este modo sabemos que son páginas validadas y muy livianas.

3) Templates BOX

La cantidad de templates que encontramos en este sitio es realmente sorprendente y lo mejor es que son gratis. Pero además de tener una inmensa cantidad de templates, los tiene ordenados, por categorías y eso facilita muchísimo la búsqueda de rubros. Recomendable sitio, no solo para templates HTML / CSS sino también para flash.