Archive for 2011

Chop, comparte píldoras de código

Escrito por en 18/05/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/#9x3b50w8

Alternar el color de las filas con CSS3

Escrito por en 03/05/2011

Los que trabajamos programando o diseñando front-end i/o back-end nos hemos dado muchas veces con la necesidad de, a la hora de generar una tabla, que esta intercale los colores de sus filas de forma automática.  Y cuando digo automática, me refiero a que no lo tengamos que hacer mediante programación en la creación de la tabla.

Si alguna vez habéis participado en la mejora de un site, o habéis visto el código de webs que no son vuestras, quizá hayáis dado con alguna que solucione esto de la siguiente forma:


<tbody>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
	<tr class="odd">
		<td>Contenido</td>
	</tr>
	<tr class="even">
		<td>Contenido</td>
	</tr>
</tbody>

Muchas veces se crean dos clases “odd” (impar) y “even” (par), para dar un color distinto a cada fila, y así al generar la tabla se intercala la clase a medida que se genera. Es una solución, pero no la mejor de ellas. Sin contar en que tenemos que crear una condición en el bucle de la programación para que itere entre las dos opciones si es par o impar.

La mejor solución, y que para eso existe, es usando selectores de tercer nivel que nos ofrece CSS3.
Si ahora mismo no sabéis de que estoy hablando, seguro que este trocito de código os suena:

a:hover{}

:hover es un selector de tercer nivel, clasificado como una pseudo-clase de acción, ya que se encarga de cambiar el formato de un elemento según pase el ratón por encima.

Y ahora que sabemos bien que son los selectores de tercer nivel, os enseñamos como hacer el cambio de color de las filas, usando :nth-child, que es una pseudo-clase estructural.

:nth-child(n): Este selector selecciona el elemento indicado con la condición de que sea el hijo enésimo de su padre. Es útil para seleccionar el segundo elemento de una lista, el quinto párrafo de un texto, etc.

La explicación matemática es la siguiente:
Representamos el elemento que queremos seleccionar con la expresión (an+b) e identificaremos una lista con “a” elementos en la que queremos destacar el elemento “b“.

EJEMPLO:

tr:nth-child(2n+1) /* representa cada fila impar de una tabla HTML */

tr:nth-child(odd)  /* igual al anterior */

tr:nth-child(2n+0) /* representa cada fila par de una tabla HTML */

tr:nth-child(even) /* igual al anterior */</pre>

Podemos jugar tanto como queramos con esto, por ejemplo, si queremos seleccionar un elemento de cada nueve de una lista infinita. Sería algo como (10n-1) o (10n+9):

:nth-child(10n-1)  /* representa el 9, 19, 29, etc, elementos */

:nth-child(10n+9)  /* igual al anterior */</pre>

Si lo queréis ver ejemplificado, aquí podéis ver una demo en acción:
DEMO

Más info:
Selectors Level 3 [W3C]

Delicious se salva gracias a los fundadores de YouTube

Escrito por en 28/04/2011

Todos aquellos que hasta ahora habéis estado usando ininterrumpidamente los servicios de Delicious estaréis contentos de leer esto. Los fundadores de YouTube, Chad Hurley y Steve Chen, ayer 27 de Abril, compraron a Yahoo! el conocido servicio de marcadores.

Esta acción por parte de AVON, empresa de Hurley y Chen (nada que ver con Google), asegura la continuidad y mejora de los servicios de Delicious. Comprometiéndose en primer lugar en lanzar una extensión compatible con Firefox 4. Por lo que por fin, los que usamos este servicio, lo podremos continuar usando de forma regular, sin tener que entrar a la web cada vez que queramos guardar un enlace.

Claro que si eres usuario de Delicious, tienes que pasar todos tus datos de Yahoo! a AVON, aceptando los términos y condiciones del traspaso de estos. Ya que a los usuarios que no acepten, se le borrarán todos sus datos y su cuenta de acceso a Delicious.

Así que si quieres mantener a salvo todo tu contenido, os recomendamos aceptar el traspaso, ya que seguramente, estos dos genios que en su día lanzaron YouTube, lo darán todo por innovar con el servicio de marcadores más conocido de la red.

Enlace: Aceptar la transición a AVOS
Fuente: Delicious Blog

No pagas, no hay web!

Escrito por 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

Initializr, plantilla HTML5 en 15 segundos!

Escrito por en 17/02/2011

Poco a poco ya se va haciendo eco y se va usando en más y más webs el HTML5. Pero aun le queda un largo camino que recorrer hasta que no veamos versiones completas de este. Tan largo, que la W3C anunció hace a penas 4 días que el proceso de desarrollo del HTML5 durará hasta 2014. Podéis ver la noticia en este enlace.

Pero lo que os traemos con esta nueva entrada es una pequeña, pero útil, herramienta que tener en cuenta a la hora de empezar un nuevo proyecto que queramos desarrollar con HTML5. Se llama Initializr, que con 5 sencillos clics tenemos a nuestra disposición una plantilla en HTML5 incluso con las librerías JavaScript que queramos usar, o incluso con el fichero de configuración para nuestro servidor.

Así que os invito a poner este recurso en vuestras barras de favoritos. Os ahorrará mucho tiempo en evitar escribir de cero la estructura básica HTML a la hora de hacer una plantilla.

Google lanza Android Market Web Store para Android

Escrito por en 04/02/2011

Hoy en día, seguro que ya habéis oído hablar de Android por todos lados. Como todo, no es perfecto, pero tiene constantes mejoras. Como sabéis Google está detrás de ello, por lo que es una garantía de éxito.

Después de esta breve introducción, vamos a hablar del nuevo lanzamiento de Google para Android, la Android Market Web Store!

Para los que ya llevamos un tiempo inmersos en el mundo Android, en mi caso desde mi ya jubilada HTC Magic al actual Nexus One, se ha ido echando de menos una interficie web para el manejo del Market de Android. Algo que Google prometió en la pasada Google IO 2010.

Podéis acceder al Market Web desde cualquier navegador web, en la dirección: http://market.android.com/

Es tan simple como entrar en la web del Market, logearse con la cuenta Google que tienes configurada en tu Android y… ¡listo!
Ya podéis poneros a cotillear aplicaciones, juegos y chorradas varias… con un simple clic en ‘INSTALL’ basta para que se instale de forma totalmente automática en nuestro Android.

A parte disponéis de un completo historial de las aplicaciones instaladas en My Market account. Y aunque no sea lo habitual, si lo necesitáis, podéis configurar más de 1 terminal Android, en esa misma sección.

Os voy dejando, voy a instalar alguna aplicación… ¡Que lo disfrutéis!