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 [...]]]> 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

Es posible que ya conociéseis de antes Font Squirrel, desde dónde se puede se pueden descargar tipos de fuente gratuïtamente para uso comercial (y personal, obviamente). Pero de lo que hoy hablaremos es del generador de fuentes que ofrecen de forma gratuïta, es tan [...]]]> Hoy os presentamos “Font Squirrel @font-face Generator”, un servicio online para generar kits de tipografías para @font-face, para todos los navegadores. Muy útil para cualquier proyecto web donde debamos introducir una tipografía poco común.

Es posible que ya conociéseis de antes Font Squirrel, desde dónde se puede se pueden descargar tipos de fuente gratuïtamente para uso comercial (y personal, obviamente). Pero de lo que hoy hablaremos es del generador de fuentes que ofrecen de forma gratuïta, es tan simple como entrar aquí, subir una o varias fuentes y generar el kit, que incluye:

Sorprendentemente, esto nos permite cambiar el tipo de letra en practicamente todos los navegadores, ya que funciona desde Internet Explorer 4+, incluyendo Opera, Firefox, Chrome, Safari, y por lo que parece, también en dispositivos móviles. Por lo que gracias a este sistema, podemos crear sin problemas un proyecto con un tipo de fuente no habitual en cualquier PC, normalmente la tipografía del cliente.

Pasos a seguir para generar vuestro kit:

1. Entráis en la página del generador de Font Squirrel
2. Añadís los tipos de fuente en el listado
3. Seleccionáis ‘Optimal’ (o ‘Expert’ si queréis toquitear opciones)
4. Y descargáis vuestro kit
5. Una vez descargado y descomprimido, hay un .html de ‘demo’
6. Copiad los archivos y el contenido del ‘stylesheet.css’ a vuestro proyecto
7. Ya podéis cambiar el tipo de letra vía css con ‘font-family’ como si la tipografía existiese en el propio PC

Espero que os sea de utilidad y que haya quedado todo claro, en caso de dudas, podéis comentar y os responderé en cuanto pueda!

Si alguna vez habéis participado en la mejora de un site, o habéis visto el código de webs que [...]]]> 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] ]]> http://www.2novatos.com/2011/05/03/alternar-el-color-de-las-filas-con-css3/feed/ 2 http://www.2novatos.com/2011/05/03/alternar-el-color-de-las-filas-con-css3/ http://feedproxy.google.com/~r/2novatos/~3/q5oQEU1I8TY/ http://www.2novatos.com/2011/04/28/delicious-se-salva-gracias-a-los-fundadores-de-youtube/#comments Thu, 28 Apr 2011 07:52:17 +0000 Oriol Navascuez http://www.2novatos.com/?p=775 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 [...]]]> 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

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 [...]]]> 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 ]]> http://www.2novatos.com/2011/03/31/no-pagas-no-hay-web/feed/ 6 http://www.2novatos.com/2011/03/31/no-pagas-no-hay-web/ http://feedproxy.google.com/~r/2novatos/~3/gsUQciYytMw/ http://www.2novatos.com/2011/02/17/initializr-plantilla-html5-en-15-segundos/#comments Thu, 17 Feb 2011 12:10:54 +0000 Oriol Navascuez http://www.2novatos.com/?p=760 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 [...]]]> 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.

DHTMLX Touch es una librería en Javascript y HTML5 que nos da todas las herramientas para generar una aplicación web para móvil. Aseguran que el framework es compatible con la mayoría de las plataformas móviles, además de funcionar sin problemas en dispositivos iPhone, iPad, [...]]]> Si alguna vez has pensado en desarrollar alguna aplicación móvil la cual tiene que tener una interfaz “touch” y no has sabido como empezar sin una interficie base, aquí ha llegado la solución.

DHTMLX Touch es una librería en Javascript y HTML5 que nos da todas las herramientas para generar una aplicación web para móvil. Aseguran que el framework es compatible con la mayoría de las plataformas móviles, además de funcionar sin problemas en dispositivos iPhone, iPad, telefonos basados en Android y otros dispositivos populares.

Cabe decir que el framework aun está en Alfa, pero no paran de lanzar mejoras y nuevas funcionalidades al framework. Y la documentación no está nada mal. Por lo que promete ser una buena herramienta para todos aquellos que queráis comenzar con este tipo de aplicaciones.

Podéis ver ejemplos en funcionamiento y probarlo en vuestros móviles desde la web oficial [en].

ENLACE DIRECTO

Y por la tozudez que me caracteriza, no paro hasta que no saco lo que tengo en mente. Y quería gestionar el uso de cookies con Javascript y PHP para acabar de hacer unos retoques a la pagina de inicio que estoy haciendo. Al final ha resultado ser una tontería, [...]]]> Nunca había tocado el tema cookies con Javascript, para ser realistas, pocas veces he tocado cookies, pero aun menos en Javascript hasta hoy.

Y por la tozudez que me caracteriza, no paro hasta que no saco lo que tengo en mente. Y quería gestionar el uso de cookies con Javascript y PHP para acabar de hacer unos retoques a la pagina de inicio que estoy haciendo. Al final ha resultado ser una tontería, pero como muchas otras… son tonterías con las que a veces perdemos un tiempo cada vez más importante. Así que comparto el conocimiento y me lo auto recuerdo.

Objetivo

El objetivo es que al seleccionar el estilo que queremos ver en la pagina de inicio, blanco, negro o normal, este se guarde en una cookie y de esta forma, al volver a acceder a la pagina recuperamos este valor evitando que el visitante tenga que volver a seleccionar el color o el estilo que le gusta.

Para facilitar el trabajo, como que ya estoy familiarizado con la librería de jQuery, me ayudo de esta para gestionar también las cookies desde JS. Aquí podemos ver y descargar el código de la librería jquery.cookie.js.

Implementación

Para asignarle un valor a la cookie, es tan sencillo como poner lo siguiente:

/*-----------------------
* ASIGNAR VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie', 'valor_cookie');

// Para declararla, como vemos, le asignamos un nombre, seguido de una coma y el valor que le queremos dar o la variable que le pasamos.

Y si ya la hemos declarado y queremos recibirla, lo hacemos de esta forma:

/*-----------------------
* RECOGER VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie');

// Así no estamos asignando el valor a nada ni lo mostramos, pero lo podemos usar dentro de alguna función
// O la asignamos a una variable para trabajar más cómodamente

var galleta = $.cookie('nombre_cookie');

Claro que una vez declarada… llega el momento en que no la necesitamos… vamos a destruirla:

/*-----------------------
* DESTRUIR COOKIE
*----------------------*/

$.cookie('nombre_cookie', null);

// Asignandole un null al valor de la cookie, esta se destruye.

Y por último lo que nos queda es gestionar el tiempo de vida de la cookie y el alcance que queremos que tenga, etc… veamos las opciones:

/*----------------------
* OPCIONES COOKIE
*---------------------*/

$.cookie('nombre_cookie', 'valor_cookie', { expires: 7, path: '/', domain: '2novatos.com', secure: true });

/* Aqui nos encontramos con distintos parámetros además del nombre y del valor de la cookie, veamos como funciona cada uno.
* Param expires: Fecha en la que expira la cookie o un entero que especifica la fecha de caducidad desde ahora en días. (En el ejemplo son 7 días) También se puede hacer usando un objeto Date.
* Si a la cookie se le asigna un NULL al parametro expires se la considerará una cookie de sesión y se destruirá en abandonar la pagina.
* Si el parametro expires contiene un valor negativo o una fecha en el pasado, la cookie se destruirá.
* Param path: El valor de la ruta que se le da a la cookie (Por defecto la ruta de la pagina que la creó)
* Param domain: El valor del atributo de dominio de la cookie (Por defecto el dominio de la pagina que la creó)
* Param secure: Si true, requiere del protocolo HTTPS para la transmisión segura de datos y de la cookie.
*/

Y por ahora esto es todo, es bastante sencilla la forma de gestionar las cookies con Javascript. Si tenéis alguna duda con esto, os responderemos encantados!