Función .animate() de JQuery
Una de las funciones de JQuery más espectaculares, por lo visible de sus resultados, es la función .animate(). Esta función es similar a la función .css() en la manipulación de las propiedades CSS de los elementos, menos por un detalle, esta función suaviza o anima el cambio de valores en la propiedad. Actúa sobre casi todas las propiedades menos con background-color, como menciona su documentación.
Para ilustrar la función .animate() he hecho una pequeña animación de un bloque moviendose en espiral:
El código JavaScript:
En este ejemplo la función .animate() ayuda suavizando el movimiento del bloque rojo que va cambiando su top y left conforme avanza el bucle for hasta terminar la espiral.
Dar formato a números con PHP
Hace tiempo alguien me dijo que para cualquier cosa que se quiera hacer en PHP seguro que ya hay un función creada. Una de esas cosas es mostrar números con un determinado formato. Para esto existe la función number_format(). Esta función admite uno, dos o cuatro parámetros, nunca tres.
number_format(float $numero,int $decimales,string $punto_decimal,string $separador_miles);
Unos ejemplos sencillos:
echo number_format(3.14159265,3);
Muestra:
3.142
echo number_format(5726849.65489,3,",",".");
Muestra:
5.726.849,655
echo number_format(5726849.65489,3,".",",");
Muestra:
5,726,849.655
echo number_format(5726849.65489,3,"x","/");
Muestra:
5/726/849×655
Esta función permite mostrar de forma sencilla número muy altos, limitando el número de decimales a mostrar y también permite cambiar de forma fácil el punto décimal por una coma.
Publicado WordPress 3.0
Se acaba de poner disponible para su descarga la versión 3.0 de WordPress. Se puede descargar pero también se puede actualizar desde el dashboard. En el momento de escribir este post no tengo la posibilidad de actualizar automáticamente, supongo que estará disponible cuando salga la versión en español.
Por lo visto en el vídeo promocionar tiene muy buena pinta, sobretodo la inclusión del tema Twenty Ten. Este tema se puede personalizar. Os dejo el vídeo:
AJAX con JQuery
Siguiendo con mi serie de pequeñas ayudas enfocadas principalmente a los programadores web novatos y al que necesite una ayuda puntual, hoy voy a mostrar como usar AJAX utilizando JQuery de forma sencilla.
No todo el mundo sabe lo que significa AJAX. En este caso AJAX no se refiere a un detergente ni a cierto equipo holandés de fútbol. AJAX significa Asynchronous JavaScript And XML(asíncrono JavaScript y XML, traducido literalmente). El nombre así dicho no dice mucho. AJAX se utiliza para hacer llamadas utilizando JavaScript a un script de servidor(php, asp, jsp) preparado para recibir una petición y que devolverá algo, que normalmente se mostrará en la pantalla. La respuesta del servidor es independiente al flujo de la página desde la que se le hace la petición. Por esto se utiliza la palabra “asíncrono”, el flujo de la página va por un lado y lo que devuelva el servidor no tiene porque estar sincronizado, aunque siempre se puede dejar el flujo a la espera de la respuesta que se obtenga del script llamado.
JQuery facilita la forma en que se hacen llamadas AJAX. Tiene funciones bastante interesantes. En este post voy a mostrar un ejemplo de la función .load(), la que creo más sencilla para AJAX y que da buenos resultados. Típico ejemplo de un formulario con un select que depende de lo que se seleccione en otro select:
El código JavaScript con JQuery:
$(document).ready(function(){
// Hago una carga de datos inicial
$('#numeros').load('ajax.php');
// Cuando se produzca un evento onchange
// en el select de decenas se cargan los
// números de la decena seleccionada
$('#decenas').change(function(){
// Vacío el select
$('#numeros select').empty();
// y pongo como única opción
// un indicador de espera
$('#numeros select').append('Cargando...');
// Llamo al script con el parámetro necesario
$('#numeros').load('ajax.php?decena='+$(this).val());
});
});
La función .load() carga dentro del elemento con id “numeros” lo que le devuelva el script. Cuando se cambia la decena actual en el select de las decenas se ejecuta la función asociada al evento onchange, que primero vacía el select de los números y crea una opción “Cargando…” para indicar la carga. Es necesario indicar que se están cargando datos porque la carga no siempre es instantanea y es fácil que el usuario decida seleccionar una opción del select que se está cargando, no siendo válida la selección y creando dudas al usuario. Después se ejecuta la llamada al script que devuelve el código HTML del select completo. La función .load() sobreescribe el contenido anterior del elemento donde se utilice.
Este ejemplo lo hice con números pero tiene aplicaciones muy utilizadas como el típico select con provincias y ciudades de las provincias.
Generación de contraseñas aleatorias
Cuando se hace una web con registro de usuarios a veces es necesario generar contraseñas automáticamente. Hoy voy a mostrar una forma sencilla de generar contraseñas de forma aleatoria. Este ejemplo se puede modificar fácilmente para adaptarlo a las necesidades:
function genera_password()
{
$chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
srand((double)microtime()*1000000);
$password = '' ;
for($i=0;$i<10;$i++)
{
$num = rand(1,strlen($chars));
$password.=substr($chars, $num, 1);
}
return $password;
}
Se ponen dentro de la cadena $chars todos los caracteres admitidos, se pueden añadir o quitar los caracteres que se quiera. Se crea una semilla con la función PHP srand(). Después inicia la cadena $password como vacía. El bucle for repite 10 veces, se puede establecer al número de repeticiones que se quiera. Dentro del bucle se consigue un número aleatorio con la función rand() y después se concatena con la cadena actual $password el carácter correspondiente a la posición $num dentro de la cadena $chars.
Los próximos días 5 y 6 de julio tendrá lugar en la Universitat Jaume I de Castellón la que anuncian en la web de Symfony como la primera conferencia española sobre Symfony. En la conferencia se tratarán los siguientes temas:
- ORM Doctrine
- Domesticando las vistas de symfony
- Admin generator
- MongoDB y Symfony
- Arquitectura y diseño de un entorno de desarrollo
- Symfony en España
- Domesticando los formularios: sfForm
- Plugins, no reinventes la rueda
- Symfony, cloud computing y web escalables
- Symfony 2
WordPress 3.0 Release Candidate
Se acaba de publicar la primera RC de WordPress 3.0. Hace poco que se publicó la versión beta, lo que quiere decir que si todo va bien en muy poco tiempo tendremos la versión estable. Las caracteristicas principales de esta nueva versión son:
- Menús personalizables.
- Multisitios (fusión con WordPress MU).
- Se ha aligerado el panel de administración. Últimamente está un poco sobrecargado.
Y como en cualquier cambio de versión de WordPress, habrá que cogerlo con cuidado y probar los plugins y temas.
Liberado el Drupal 7.0 Alpha 5
Ayer se liberó la la quinta versión alpha de Drupal 7. En está alpha corrigen varios fallos críticos en la ruta para actualizar, seguridad, JavaScript, rendimiento y alguna cosa más. Con esta llevan lanzadas 5 versiones alpha y se pretende publicar otra versión el día 21 de junio. Quieren que esta última alpha sea la buena y pueda convertirse en beta en esta publicación.
Joomla 1.6 beta
Desde ayer está disponible para su descarga la versión 1.6 beta de Joomla. Advierten de que su uso es únicamente para fines de evaluación y que no se debe utilizar para su puesta en producción. Los cambios que anuncian para esta versión son:
- Los administradores tendrán control sobre quien puede ver y administrar los contenidos.
- Niveles ilimitados para el árbol de categorías.
- Simplificación de las actualizaciones de las extensiones.
- Mejora la base para la presentación de los contenidos.
- Los desarrolladores podrán establecer permisos de forma granular para las extensiones.
Este paso debería conducir en no demasiado tiempo al lanzamiento de la versión definitiva. Hay que recordar que la versión beta de Joomla 1.5 se anunció en septiembre del 2006 y que en tanto tiempo ya harían faltan unos retoques.
Columnas de igual altura con CSS
Uno de los problemas habituales que me he encontrado al crear webs es el como hacer que varias columnas tengan la misma altura. Una forma de resolver esto era utilizando tablas. La otra opción era poner la misma altura a las columnas y no sobrepasarla nunca. Estos dos métodos no son los mejores, es preferible no utilizar tablas y en el otro es fácil no controlar los tamaños de los contenidos. Este problema es claramente visible al instalar Drupal con el tema por defecto Garland:
En el bloque del pie se suele poner datos como el copyright, etc. Cuando el contenido no ocupa mucho y el menú es más alto, queda ridículo ver el pie tan arriba.
Hay dos métodos más recomendables para conseguir columnas iguales en altura, los dos consisten en poner un div como contenedor y dentro las columnas:
El primero de estos métodos consiste en hacer que los div con menor altura tengan el mismo fondo que el div contenedor:
El código CSS:
#container {
background-color: #fff;
overflow: hidden;
width: 780px;
margin: 10px auto 5px auto;
border: 1px solid #000;
}
#content {
background-color: #fff;
width: 580px;
border-right: 200px solid #0099FF; /* ancho y color del menú */
margin-right: -200px;
float: left;
}
#menu {
width: 200px;
float: left;
color: #fff;
background: #0099FF;
text-align: left;
}
Y el HTML:
bla bla bla bla bla bla bla bla
El problema de este método viene cuando el fondo del div contenedor tiene otro color o imagen:
El segundo método es el mejor método que he visto hasta la fecha y que utilizo desde que lo conozco. Consiste en establecer la propiedad CSS overflow del contenedor a hidden y en las columnas: padding-bottom a un valor alto, en mi caso 32767px y margin-bottom al mismo valor pero negativo, -32767px. Alguna vez los he establecido a 30000px y -30000px, a partir de cierta altura en pixeles es indiferente el valor, pero tiene que ser grande. Esta solución la encontré en un artículo de www.positioniseverything.net. Su explicación sería que con el excesivo padding-bottom se consigue añadir un gran relleno. El margin-bottom negativo hace que el flujo del documento vuelva al sitio. Todo lo que sobra se elimina con el valor hidden en el overflow del contenedor, quedando todo cuadrado:
El CSS:
#columna1, #columna2, #columna3{
padding-bottom: 32767px;
margin-bottom: -32767px;
float: left;
width: 33%;
}
#columna1
{
background-color: #f00;
}
#columna2
{
background-color: #0f0;
}
#columna3
{
background-color: #00f;
}
#contenedor
{
overflow: hidden;
background-color: #fff;
}
El HTML:
columna 1 bla bla bla bla ... bla bla bla blacolumna 2 bla bla bla bla bla bla bla blacolumna 3 bla bla bla bla ... bla bla bla bla
Es una solución que al principio asusta por la cantidad de pixeles que se añaden pero que al verla funcionar se quitan todos los miedos.