Archive for the ‘Perla’ Category

Chop, comparte píldoras de código

Escrito por Oriol Navascuez en 18/07/2011

Al ver el nombre me ha recordado a esos dibujos que seguramente todos hemos visto en nuestra infancia, “Chip y Chop” esas pequeñas ardillas con voz de pito… Pero no, no se trata de dibujos animados.

Chop, es el nombre de un servicio web con el que podemos compartir código con quien queramos. Pero diciendo la verdad… esto ya se ha visto muchas veces. Por que lo comentamos nosotros? Pues por que le han dado una vuelta de tuerca más, y se convierte en una herramienta que puede servirnos sobretodo para la docencia.

Con Chop, podemos escribir nuestro código en hasta 14 diferentes lenguajes, una vez escrito, podemos añadir comentarios a las líneas que queramos, de tal forma que cada comentario se pueda convertir en una pequeña discusión en la que resolver dudas, mejorar esa línea o explicarla más detalladamente. De esta forma, tanto si somos entendidos en la materia, y queremos difundir trozos de código, o somos algo novatillos con el lenguaje en questión, y queremos que nos expliquen como se hace alguna cosa, podremos participar en cada comentario, añadiendo nuevas respuestas a ese comentario.

Para ver un ejemplo clarificador, hemos hecho una pequeña prueba: http://chopapp.com/#9×3b50w8

No pagas, no hay web!

Escrito por Oriol Navascuez en 31/03/2011

Cuantas veces te has encontrado en esa situación en la que le haces la web a un cliente, y este no hace más que retrasar el pago una y otra vez? O no solo retrasar el pago, sino simplemente no pagar.

Para aquellos momentos en los que ya hemos entregado el proyecto pero no lo hemos cobrado, y además el cliente ha cambiado usuarios y/o contraseñas del FTP para que no le borremos nada y él poder disfrutar de algo que no ha pagado, aquí os traemos una solución.

Se llama CSS Killswitch, y lo que nos hace es dejar la pagina del cliente moroso completamente negra, anulando así los estilos que hubiera previamente y dejando la web inservible, aun sin tener acceso al FTP.

Como funciona?
Killswitch te facilita una URL a una hoja de estilos remota, del estilo “http://cssksw.com/2novatos” que en principio no contiene nada. Esto lo ponemos en las cabeceras de la web que estamos haciendo, o si queremos ser más discretos, lo hacemos mediante una llamada en las CSS con esto:

@import url("http://cssksw.com/2novatos");

Una vez puesto esto, entregado el proyecto y en el caso de ver que la cosa no va por buen camino, es tan fácil como entrar al panel que nos facilita el servicio (por cierto, es gratuito) y activar el Killswitch, dejando la pantalla del “amigo” completamente negra.

Método casero.
Aun que si queremos hacerlo nosotros mismos, desde nuestro servidor si lo tenemos, por tenerlo más a mano… es tan facil como crear una hoja de estilos en blanco para cada proyecto, y añadirlo como hemos puesto anteriormente. Y en caso de que el cliente no pague, modificamos la hoja de estilos que esta en blanco poniendo lo siguiente:

body { background: black !important; }
body * { display: none !important; }

Aun que una buena solución, espero que no lo tengáis que usar.

Enlace: CSS Killswitch

Tu web más rápida con flush

Escrito por Víctor Mundet en 26/11/2010

Hace unos días que me decia a mi mismo de encontrar un hueco y escribir en el blog, que realmente por mi parte lo tengo abandonado! Suerte que ahí está mi compañero para que no se note mi ausencia ;)

Hoy os vamos a hablar de ‘flush’, una función de PHP que puede ayudarnos a mejorar la velocidad de nuestra página. El ‘truco’ está en ejecutar la función justo después de cerrar el ‘head’ de HTML. Lo que hará que se envíe todo el contenido inicial y por tanto el navegador empiece a descargar los JS, CSS, etc.

</head>
<?php flush(); ?>

Por mi parte, después de hacer pruebas, no he notado mucha mejora de velocidad, en concreto no llega a disminuïr 1 segundo.
Es bastante probable que sea más eficaz en proyectos dónde haya bastantes archivos JS o CSS, o que simplemente el contenido de la web tarde en generarse. La idea es, que mientras el servidor genera el contenido, el navegador se descargue los archivos iniciales.

Espero que os sea de utilidad! Conocéis algún sistema similar?

Eliminar registros duplicados en MySQL

Escrito por Oriol Navascuez en 09/09/2010

Esta mañana en el trabajo necesitaba limpiar una tabla en la que se guardaban miles de registros de usuarios, de la que como de costumbre en muchos sitios… la habían definido sin indices, ni uniques,… suerte que aun tenía un campo ID como primaria.

Pero aun así, eso no es suficiente cuando estás guardando datos de usuarios, de los que tienes que mantener cierta integridad. Total, que como lo único que tenía a mano para poder guiarme y limpiar esos miles de registros era el campo email, que era el que al cliente le interesaba, no he tenido muchas opciones.

Pues contando solo con el email, he mirado primero que cantidad de registros tenía duplicados con la siguiente query:

SELECT nombre, apellidos, email, count(*) AS Repetido
FROM followers As Tmp
GROUP BY email
HAVING Count(*) > 1

Con esto lo que obtenemos es una tabla temporal que nos muestra los datos que queramos, además de en este caso el email, y las veces que este campo se repite.

Una vez tenía listados los registros duplicados me ha tocado hacer una copia de todos los registros que tenia quitando los duplicados, pero manteniendo al menos uno de los duplicados, ya que sino estoy perdiendo registros. Pues para cargarme los duplicados y dejar copia de uno junto a todos los demás… hacemos lo siguiente:

INSERT INTO nueva_tabla
SELECT *
FROM tabla_original
GROUP BY email
HAVING Count(*) >=1;

Lo que hacemos aquí es pasar todos los registros de la tabla_original a la nueva_tabla, eliminando los registros duplicados, pero manteniendo uno de ellos. Con lo que por fin conseguimos limpiar la tabla.

Otra forma de hacer algo así es pasar los datos de una tabla a otra usando el DISTINCT * de la tabla_original, pero eso no nos asegura la copia de uno de los duplicados, ni nada parecido. Espero que os sea de tanta utilidad como a mi, y si tenéis algún otro método o solución, encantados de saberlo!

Genera estadísticas de tus descargas

Escrito por Oriol Navascuez en 11/08/2010

Hoy en día las estadísticas son muy importantes, por no decir imprescindibles. “Tenemos un 74% de visitas nuevas”, “el 11% es trafico directo”, “…noticia tiene un 12% de las visitas de la web”,… exacto, todo son números, porcentajes,… al fin y al cabo, es lo que al cliente le interesa. Lo importante para el cliente o empresario que nos contrata es el objetivo de conversión.

Y que es esto del objetivo de conversión? Cualquier página, archivo o documento descargable es un documento de conversión. Pero os damos unos ejemplos para que quede más claro:

  • Una página de “agradecimiento” que aparece tras introducir datos en un formulario. Estas páginas permiten realizar un seguimiento de los registros para la recepción de boletines informativos, suscripciones a listas de correo electrónico, envío de solicitudes de trabajo o formularios con información de contacto.
  • Una página de confirmación de compra o página de recibo.
  • Una página “Acerca de nuestra empresa”.
  • Un determinado artículo o una noticia.
  • Cualquier otra página a la que intente conducir a los usuarios que visitan su sitio.

Todos estos casos son objetivos de conversión, y como tal, es posible que nos interese tener un número de veces que se visitan, o se descargan.

Es posible que haya secciones de nuestra web que no se estén siguiendo en analytics dada su situación, como pueden ser formularios paginados, o descargas de archivos y se nos pida averiguar el número de visitas que se realizan. A día de hoy lo que más he usado y visto, son funciones en PHP que en cuanto se carga la pagina deseada se ejecuta una función que aumenta un número en una base de datos, haciendo así una estadística interna. Eso no está mal, pero si lo queremos unificar todo en la herramienta de Google Analytics, tenemos una herramienta para poder hacerlo.

Una forma más sencilla de hacer el seguimiento de estos datos, si contamos ya con las estadísticas de Google Analytics, es de la forma que os enseñaremos a continuación.

Si leemos los artículos de ayuda de Google Analytics, veremos que nos facilitan la función “_trackPageview“. Esta función permite realizar el seguimiento de los eventos del sitio que no generen una visita de página, es decir, a las descargas de archivos, a los enlaces salientes, etc.

Por ejemplo, para registrar todos los clics que se realizan a un enlace determinado, www.ejemplo.com/descargas/tutorial1.zip, como visita de pagina de /descargas/tutorial1 deberemos añadir el siguiente atributo a la etiqueta <a> del enlace:

<a href="http://www.ejemplo.com/descargas/tutorial1.zip" onClick="javascript: pageTracker._trackPageview('/descargas/tutorial1'); ">

Una vez colocada la función en nuestra web, en 24/48 horas, podremos ver los resultados en nuestra cuenta de Google Analytics.

DIV height: 100%

Escrito por Oriol Navascuez en 05/05/2010

Bueno pues a raíz de una consulta de una amiga diseñadora… surge esta otra perlita sobre CSS.

Alguna vez maquetando hemos necesitado hacer que un <div> nos ocupe el 100% del alto de una capa, o de toda la web. Y normalmente, si no se sabe este pequeño truco, hemos tenido que hacer cosas raras. Pues bien, la solución es bastante sencilla, y es la siguiente.

Para conseguir que cualquier <div> que tengamos en nuestra web pueda tener el 100% del alto de la capa en la que se anida, solo tenemos que darle el 100% de altura al html y al body. De esta forma:


html, body { height: 100%; }

Al decirle a los tags html y body que su altura será del 100% nos permite que las capas que nosotros queramos opten también a tener esa altura. Es una tontería, pero cuando no se sabe este pequeño truco, puede dar muchos problemas el maquetar alguna cosa.

Hay que tener en cuenta también, que la capa o capas anterior a la que le queremos dar ese height:100%, deben de tener un alto especificado. Es decir, si la capa anterior le damos 200px de alto, el height:100% será de esos 200px de la capa contenedora, o si a la capa anterior le damos también 100% de alto igual que a la capa que se lo queremos dar, nos ocupará toda la pantalla. Solo teniendo en cuenta esto, podremos hacer capas al 100% en cualquier instancia.

Por si no os ha quedado demasiado claro, o queréis ver un ejemplo del funcionamiento, podéis ver esta página de ejemplo que hemos preparado:

DEMO

Esperamos que os sirva esta pequeña perla, como decimos nosotros, para vuestros diseños! ;)