Navegando por la red he encontrado una buena lista de alternativas a Spotify.
Alternativas gratuitas de Spotify
18 de Mayo de 2010Validar formularios con Javascript
2 de Abril de 2010Validar formularios con JavaScript mediante las expresiones regulares es una solución bastante elegante, fiable y requiere muy poco código en comparación con otras vías.
Por ejemplo, si necesitamos comprobar un número de la tarjeta de crédito podemos hacerlo de la siguiente forma:
var numTarjeta=document.getElementById(“numTarjeta”); if(!numTarjeta.match(numTarjetaPattern)){ alert(“Compruebe el número de la tarjeta.”); return false; }else{ return true; } |
Existe multitud de tutoriales sobre cómo usar expresiones regulares, por ejemplo aquí y aquí. El problema viene cuando en el campo que tenemos que comprobar aparecen caractéres que no están incluidos en la tabla ASCII. Hablando de castellano estos caractéres primeramente son las letras acentuadas y la eñe. No obstante, en JavaScript se pueden poner como códigos hexadecimales. Abajo pongo la tabla de correspondencia:
| Á | \uC1 |
| á | \uE1 |
| É | \uC9 |
| é | \uE9 |
| Í | \uCD |
| í | \uED |
| Ñ | \uD1 |
| ñ | \uF1 |
| Ó | \uD3 |
| ó | \uF3 |
| Ú | \uDA |
| ú | \uFA |
| Ü | \uDC |
| ü | \uFC |
| ¿ | \uBF |
| ¡ | \uA1 |
| € | \u80 |
Entonces, si queremos usar estas secuencias lo único que tenemos que hacer es incluirlas en el patrón, por ejemplo:
var pattern=/^[\u00f1]{1}$/;
Sólo permitirá un sólo caracter que será la Ñ.
Para permitir todas las letras del castellano posibles, además del espacio se puede usar la siguiente sentencia:
var pattern=/^/^[A-Za-z\s\u00c1\u00e1\u00c9\u00e9\u00cd\u00ed\u00d1\u00f1\u00d3\u00f3\u00da\u00fa\u00dc\u00fc]+$/;$/;
Paginación en Java
20 de Marzo de 2010Muchas veces lo que se necesita es implementar la paginación en Java. Tengo una forma genérica en implementar cualquier tipo de paginación en cualquier sitio. Sin cargar mucho la base de datos, ni utilizar mucha memoria una vez que se devuelven los datos. Supongamos que tenemos una tabla con muchos registros (100 000, por ejemplo) y queremos mostrarle a los usuarios 1 000 páginas con 100 registros por página.
Pongo un ejemplo genérico para un Servlet, pero en los demás casos la situación sería parecida.
private static final int REGISTROS_POR_PAGINA = 100;
private SqlMapClient SQL;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // para simplificar todo va dentro de bloque try..catch // calculo la cantidad de contactos en todas las páginas try { // calculo el total de las entradas que tenemos int total = (Integer)SQL.queryForObject(“”);
// calculo la cantidad de páginas total que vamos a mostrar al usuario int mod = total % REGISTROS_POR_PAGINA; int diff = total - mod; int totalPaginas = diff / REGISTROS_POR_PAGINA; if(mod != 0) // si la división no es exacta habrá una página más totalPaginas++;
// obtengo la página actual en la que estamos String sPage = request.getParameter(“p”); int page = 0; // si no está presente el parámetro asumo que estamos en la página cero (la primera) if(sPage != null) { page = Integer.parseInt(sPage); page–; }
// calculo el límite y el offset que pasaremos a la BBDD en la consulta int offset = page * REGISTROS_POR_PAGINA; int limit = REGISTROS_POR_PAGINA;
// la página actual ”de cara al usuario” int paginaActual = page + 1; // el usuario empieza a contar de 1, no de 0 int paginaAnterior = page; // aquí se debería de controlar el valor de 0 int paginaSiguiente = page + 2; // la misma razón
// en la lista objects estará lo que queremos List objects = SQL.queryForList(“queryConElLimitYElOffsetPuestos”);
}catch(Exception e){} } } |
Codificaciones en los servlets
18 de Marzo de 2010Muchas veces, cuando trabajamos con caractéres que no están en la tabla ASCII (castellano incluído) pueden surgir problemas a la hora de tratar las cadenas en los servlets. Por ejemplo, muchas veces aparecen caractéres extraños en vez de las eñes, letras acentuadas, etc. La forma más sencilla de evitar esto es trabajar con UTF-8 (Unicode) a todos los niveles. Para lograrlo basta con seguir unas simples reglas a la hora de enviar los formularios:
- En la página HTML desde la que se envía el formulario hay que poner el meta, exactamente: <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
- En el servlet que trata la página enviada, la primera (esto es super-importante) llamada tiene que ser: request.setCharacterEncoding(“UTF-8″);
- No estaría demás (pero no es obligatorio) incluir en la página HTML el tipo de documento que es, por ejemplo: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>.
Siguiendo estas sencillas reglas se puede evitar muchos quebraderos de cabeza.
elFinder – gestor de ficheros online gratuito
18 de Marzo de 2010Hace algún tiempo he decidido echar una mano a los chicos del Studio42, con los que colaboro ocasionalmente, en el desarrollo de elFinder. elFinder, como su propio nombre indica, es un gestor de ficheros online integrable en cualquier página web. También se puede integrar con los conocidos editores WYSIWYG TinyMCE y CKEditor. Se trata de un producto completame gratuito y opensource. Entre los puntos importantes de la aplicación se encuentran:
- Se pueden realizar todas las operaciones comunes con los ficheros en el servidor (mover, copiar, renombrar, borrar, etc.)
- Atajos de teclado para casi todas las operaciones.
- “Arrastrar y soltar” funciona completamente.
- Se pueden comprimir y descomprimir los ficheros directamente en el servidor.
- Cálculo del tamaño total de los directorios.
- Sencilla integración con los editores WYSIWYG (TinyMCE, CKEditor).
Para elaborar la aplicación tan sólo se ha utilizado JavaScript (no hay flash). Para integrar elFinder, el cliente puede optar (de momento) por tres tipos de conectores: PHP, Python y Java. El último todavía se encuentra en la fase alpha no disponible al público, pero prometo acabarlo lo antes posible. Para los temas de soporte se puede contactar directamente conmigo dejando un comentario en esta entrada, en el bugtracker o en el foro. De momento tenemos la casa patas arriba, ya que estamos terminando los temas de la documentación y demás. A continuación dejo algunos enlaces:
- Demo online
- Documentación en español
- Foros (de momento sólo ruso e inglés)
- Página oficial
Capturas de pantalla:
Integrar phpbb en cualquier sitio web
7 de Marzo de 2010Resulta que hace unas semanas decidimos incluir un foro en la página tuseuros.com – nuestro pequeño sistema de monetización de tráfico web. Aunque el sistema está hecho en Java el foro que se ha decidido poner es phpBB por ser la solución gratuita más completa disponible.
El problema con el que me he encontrado es que la integración es un poco compleja teniendo en cuenta que no hay ningún módulo destinado para tal fin. Hay que tener en cuenta que el sitio ya tiene una base de datos de usuarios y lo que tenía que conseguir es que la autenticación sea común en ambos sitios. También el objetivo es evitar que los usuarios tengan que registrarse de nuevo.
Para conseguir esto he decidido modificar directamente la tabla de la base de datos contra la que se conecta el foro phpbb. Claro está que para ello se necesita tener el acceso pero es un tema menor ya que no presenta ningún problema.
Para hacer la tarea más fácil creamos un usuario de prueba para poder coger los valores específicas para la tabla.
Dar de alta a los usuarios.
Para dar de alta a los usuarios tenemos que insertar un registro en las tablas users y user_group (las tablas llevan un prefijo delante).
Primero se actualiza la tabla users. Los campos que tenemos que poner son los siguientes:
- user_type – copiar del usuario de prueba
- group_id- copiar del usuario de prueba
- user_permissions- copiar del usuario de prueba
- user_ip – se puede poner una dirección ip cualquiera
- user_regdate – poner la fecha de registro en formato unix timestamp
- username – nombre de usuario (este nombre aparecerá en los posts del usuario)
- username_clean – nombre de usuario
- user_password – dejar vacío
- user_email – correo electrónico del usuario
- user_email_hash – hash del correo electrónico (crc32 hash del correo hay que concatenarlo con la longitud del correo)
El valor user_id se generará sólo por la base de datos. Este valor tenemos que obtenerlo para guardarlo en nuestra base de datos principal, será necesario para autenticar al usuario dentro del foro.
Ahora hay que añadir una entrada en la tabla user_group.
Tenemos que insertar una entrada con los siguientes campos:
user_id – id del usuario que acabamos de insertar.
group_id – lo mismo que en el caso de usuario de prueba
Autenticar a los usuarios.
El proceso de autenticación de los usuarios para phpbb consiste en crear una entrada en la tabla sessions. Los campos que tenemos que tocar son los siguientes:
session_id – id de la sesión generado (un hash de 32 caracteres)
session_user_id – del usuario que pretendemos autenticar
session_start – hora actual en format unix timestamp
session_time – hora actual en format unix timestamp
session_ip – ip del usuario
session_browser – navegador del usuario. Se puede obtener a partir de la cabecera User-Agent.
Rederigir al usuario autenticado al foro.
phpBB determina que el usuario esta en función de dos cookies:
prefijo_u – id del usuario.
prefijo_sid – identificador de sesión que hemos insertado en la tabla.
El prefijo se configura en el panel de administración del foro. Para hacer este paso más sencillo he creado un sencillo script en PHP y lo he guardado como sess.php en el directorio raíz del foro.
<?php$u=$_GET["u"];$sid=$_GET["sid"];setcookie(“phpbb3_oxwyp_u”, “”, 1, “/”, “foro.tuseuros.com”);setcookie(“phpbb3_oxwyp_sid”, “”, 1, “/”, “foro.tuseuros.com”);setcookie(“phpbb3_oxwyp_u”, $u, time()+360000, “/”, “foro.tuseuros.com”);setcookie(“phpbb3_oxwyp_sid”, $sid, time()+360000, “/”, “foro.tuseuros.com”);header(‘Location: http://foro.tuseuros.com/’);?>
<?php
$u=$_GET["u"];
$sid=$_GET["sid"];
setcookie(“prefijo_u”, “”, 1, “/”, “url_del_foro”);
setcookie(“prefijo_sid”, “”, 1, “/”, “url_del_foro”);
setcookie(“prefijo_u”, $u, time()+360000, “/”, “url_del_foro”);
setcookie(“prefijo_sid”, $sid, time()+360000, “/”, “url_del_foro”);
header(‘Location: http://url_del_foro/’);
?>
De esta forma rederigir el usuario al foro se transforma simplemente en enviarlo a la url /sess.php?sid=id_sesion&u=usuario_id.
Tenemos que insertar una entrada con los siguientes campos:
- user_id – id del usuario que acabamos de insertar.
- group_id – lo mismo que en el caso de usuario de prueba
Autenticar a los usuarios.
El proceso de autenticación de los usuarios para phpbb consiste en crear una entrada en la tabla sessions. Los campos que tenemos que tocar son los siguientes:
- session_id – id de la sesión generado (un hash de 32 caracteres)
- session_user_id – del usuario que pretendemos autenticar
- session_start – hora actual en format unix timestamp
- session_time – hora actual en format unix timestamp
- session_ip – ip del usuario
- session_browser – navegador del usuario. Se puede obtener a partir de la cabecera User-Agent.
Rederigir al usuario autenticado al foro.
phpBB determina que el usuario esta en función de dos cookies:
- prefijo_u – id del usuario.
- prefijo_sid – identificador de sesión que hemos insertado en la tabla.
El prefijo se configura en el panel de administración del foro. Para hacer este paso más sencillo he creado un sencillo script en PHP y lo he guardado como sess.php en el directorio raíz del foro.
<?php
$u=$_GET["u"];
$sid=$_GET["sid"];
setcookie(“prefijo_u”, “”, 1, “/”, “url_del_foro“);
setcookie(“prefijo_sid”, “”, 1, “/”, “url_del_foro“);
setcookie(“prefijo_u”, $u, time()+360000, “/”, “url_del_foro“);
setcookie(“prefijo_sid”, $sid, time()+360000, “/”, “url_del_foro“);
header(‘Location: http://url_del_foro/’);
?>
De esta forma rederigir el usuario al foro se transforma simplemente en enviarlo a la url /sess.php?sid=id_sesion&u=usuario_id.
Enviar SMS de forma completamente gratuita
14 de Enero de 2010Hace poco estaba buscando un proveedor para poder enviar muchos SMS para un cliente. Googleando encontré la página mjoy.com. Es una página que permite enviar mensajes de forma completamente gratuita en todo el mundo. Sin coñas, lo he probado y funciona perfectamente. Lo único que hacen es incluir en el pie del mensaje algo así como “Mensajes gratuitos con mjoy.com”.
El problema es que sólo lo permiten utilizar desde el navegador del móvil, cosa que podemos arreglar (y poder enviar SMS desde nuestro navegador de toda la vida) siguiendo los pasos de este mini manual.
1. Nos registramos en mjoy.com con nuestro número de teléfono.
2. Nos llega un mensaje con el link de activación.
3. Tenemos que hacer para que la página piense que accedemos desde un móvil. Para lograr esto tenemos que cambiar la cabecera User-Agent del navegador. En Mozilla Firefox se hace de la siguiente forma. Abrimos about:config, pinchamos con el botón derecho y creamos una nueva propiedad de tipo String con el nombre general.useragent.override. A la propiedad le podemos asignar cualquier nombre que coincida con el user-agent de algún navegador móvil. En esta página hay unos cuantos, yo he cogido el siguiente: NokiaN73-2/2.0626 S60/3.0 Profile/MIDP-2.0 Configuration/CLDC-1.1.
4. Ahora ya podemos entrar con el User-Agent cambiado al enlace que nos acaban de mandar los de mjoy.
5. Completamos un simple proceso de registro y voila. Ya podemos enviar los SMS gratuitos desde nuestro navegador.
En qué consiste la elaboración de un proyecto
15 de Septiembre de 2009Muchas veces me preguntan como se elabora el presupuesto para un proyecto web (o más generalmente — cualquier proyecto informático). Pues muy sencillo. Un proyecto pasa por las siguientes fases:
- Elaboración de los requisitos.
- Elaboración del contrato basándose en los requisitos (precios/plazos).
- Diseño de la página de inicio.
- Diseño de las páginas interiores.
- Maquetación.
- Elaboración del modelo de datos.
- Programación del sistema.
- Preparación del dominio y hosting.
- Instalación del sistema.
- Elaborar y/o subir el contenido.
- Preparar y/o comprar las fotos.
- Arranque de la versión beta.
- Primera vuelta para completar algunas funcionalidades.
- Arranque de la versión RC.
- Segunda vuelta de implementación.
- Arranque del proyecto.
- SEO y promoción en los buscadores.
Basicamente, con algunas variaciones, este es el proceso que se sigue cuando se crea una página web cualquiera.
Restaurante Zhu en Alicante
26 de Agosto de 2009El otro día estuvimos en un restaurante “asiático” (chino en realidad) que me pareció bastante bien. Los precios son un poco más altos de lo habitual, pero merece la pena. Se llama Restaurante Zhu y está ubicado en la calle Dr. Sánchez San Julián, 6, Alicante.
Los sushis que preparan son exquisitos. He fotografiado la carta con mi móvil para que podais ver los precios.
También voy a hacer una prueba de Google Maps API y dejo el mapa del sitio.
Seleccionar fecha con jQuery UI Datepicker
25 de Agosto de 2009Hoy en día hay muchas librerías que nos pueden hacer la vida mucho más sencilla cuando se trata de JavaScript. Todos conocemos bibliotecas como jQuery, Prototype y otras. En esta entrada voy a hablar sobre una extensión de la librería jQuery llamada jQuery UI.
Esta biblioteca ofrece varios componentes gráficos que podemos usar en nuestras páginas, entre ellos podemos destacar, datepicker — seleccionador de fecha (calendario), dialog — ventanas modales, progressbar — barra de progreso y muchos otros. Voy a explicar como podemos usar datepicker adaptado al entorno nuestro, es decir, a España con sus correspondientes días de la semana, nombres de meses, etc.
Antes que nada tenemos que descargar la última versión de jQuery e incluirla en nuestras páginas:
|
Una vez que tengamos jQuery instalado, descargamos jQueryUI desde esta página. Como podéis ver ofrecen las versiones completamente personalizadas para cada gusto. Yo aconsejaría descargar la versión de la librería completa, al menos para las pruebas.
Desempaquetamos todos, en este punto vamos a tener tres grupos de ficheros, el propio JavaScript, las imágenes y el css, en un principios las imágenes tienen que ir en el directorio /images, no he mirado las opciones para poder cambiar esto, pero estoy casi seguro que se podrá hacer de alguna forma. En cuanto al resto, lo incluímos en la cabecera de la página web.
|
Una vez hecho esto ya podemos instanciar el datepicker. La forma más sencilla de hacerlo es creado un input de tipo texto:
|
Una vez que lo tengamos definido, podemos instanciar el datepicker en el bloque head de la siguiente manera:
|