Más allá de no actualizar el blog con frecuencia, existe un dilema aún mayor: no logro definir la temática del mismo. Del tema del cual les voy a hablar, lo podría haber puesto en mi blog personal; o peor, lo que hago con muchas de mis ideas, reducirlas a 140 caracteres y compartirlas en Twitter. Esto último no es malo, pero seguramente no se habría entendido y hubiese pasado al olvido 10 tweets más tarde.

Hoy no les voy a hablar ni de jQuery, CSS, ni presentarles un WordPress theme; quiero regalarles una idea que me surgió, que aunque posiblemente —como la mayoría de las ideas-, alguien ya la haya realizado, quiero compartir.

Hace unos días —mientras estaba en la duchaba-, me puse a pensar en que cada vez veo más series, junto a ese pensamiento llegó el de lo molesto que se vuelve a veces el bajar los subtítulos, la mala calidad de algunos, la des-sincronización, etc. Y como una gota más de agua saliendo de la regadera, la idea cayó en mi cabeza.

Imagínense un sitio web de subtítulos, bastante parecido a los que actualmente deben visitar. Ahora, piensen en Wikipedia y su comunidad escribiendo y editando artículos hasta lograr lo más cercano a la perfección. Juntemoslo. Obtendríamos subtítulos categorizados, subcategorizados y etiquetados en nombre de serie o película, numero de episodio, etc.; pero lo más importante, con una comunidad corrigiéndolos en vivo.

Ahora bien, en mi sueño de ducha existía un reproductor de multimedia adecuado para funcionar en conjunto con este sitio. Llamemosle VLC, porque me encanta VLC y si mi sueño fuera real ellos harían un update con mis modificaciones. Este reproductor tendría en la sección configuración una opción de rellenar un campo para conectarse al sitio e ingresaríamos en él una URL, o DNS, o IP… o lo que exista en ese futuro —esperemos- no tan distante.

Actualmente, los nombres de los archivos de las series tienen una nomenclatura del estilo Lost.S06E11.HDTV.XviD-NoTV: nombre, número de temporada, número de episodio, calidad y grupo que lo ripeo. No estoy seguro de estar en lo correcto, pero tampoco es un punto fundamental en la idea. A lo que quiero llegar es que los subtítulos en el sitio deberían cargarse con el nombre del .avi con el que están sincronizados, de esta forma, el reproductor previamente configurado debería buscar en el sitio su equivalente .srt. La magia está, no solo en la comodidad de no bajar subtítulos, sino principalmente en la actualización constante de los mismos por parte de la comunidad para corregirlos y dejarlos impecables.

La idea básicamente es esa. Ahora, soñando un poco más en grande, podríamos también en las preferencias de nuestro reproductor seleccionar el idioma del subtítulo y así obtener el deseado. La comunidad del sitio podría ser el mundo, creando y actualizando traducciones en todas las lenguas.

Dicen que al ser humano se le ocurre en su vida más de una idea millonaria, pero que muy pocos las realizan. También dicen que el dinero no hace la felicidad. Pues yo no sé si mi idea vale un millón, pero se las regalo, mientras en un futuro cercano exista algo similar, yo voy a ser —probablemente- más pobre, pero más feliz.

Download | Demo

Key features of the template:

• 2 columns
• Fixed width
• Multilevel Dropdown menu
• Widget ready sidebar
• 960.gs Grid System
• SEO optimization
• Author page.
• Threaded-comments
• Related posts
• Separated Pingbacks and Trackbacks from comments
• Internationalization (.po and .mo files)
• Unobtrusive Javascript, Fallback scenarios if Javascript is turned OFF by the user
• Compatible Browsers: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari, Chrome, Opera
• Users with a CSS3 compatible browser will appreciate more visual enhancements such as rounded corners and drop shadow.

Languages:

• English
• Spanish
• Another language (by you!)

If this theme is not available in your language, you can contribute your translation and I will mention it in this post with a link to your site. Read more.

Share!

If you like this theme, feel free to share it in your blog, twitter or anywhere else! And please, don’t link to the file (.zip), link to this post instead. Thank you!

Bugs?

If you find a bug, can report it through the contact form, I try to fix it as soon as possible :)

Changelog

• changelog.txt

License

This theme is released under GPL

If you remix, convert, translate, modify, or distribute a copy of this theme, please keep the links/credit in the footer.

Muchas personas —cómo en mi caso-, somos jóvenes de veintitantos que nos encontramos ejerciendo una profesión sin haber conseguido un título académico que la avale. En el contexto en el que me rodeo, la mayoría somos diseñadores, programadores, o por qué no, ambos.

Cuando te preguntan qué sos, ¿qué respondes?.

Hace un tiempo atrás, cuando aún era la época en donde iba a la facultad y la gente me preguntaba de qué trabajaba, les respondía qué era un diseñador en proceso. Me sentía mal si decía que era un diseñador, era una sensación rara ya que aún me encontraba cursando la carrera. Pero un día reaccioné: Nunca iba a dejar de ser un diseñador en proceso, nadie jamás deja de aprender aunque finalice una carrera. Todos vamos a estar en proceso de algo hasta el fin de nuestros días.

Somos lo que ejercemos, lo que dice que tan buenos somos no es el título, sino el adjetivo que nos califica. En otras palabras:

«Todos somos sustantivos, la cuestión es qué adjetivos nos acompañan»

Me considero diseñador y programador simplemente porque diseño y programo. ¡Vamos, si hasta en este momento me estoy considerando escritor por el simple hecho de estar realizando la acción de escribir!. Ahora bien, califica qué tan buen diseñador, programador y escritor soy, los adjetivos que me acompañen; tanto los que me atribuya yo mismo como los que la gente me otorgue.

Yo mismo me considero un buen diseñador, un programador básico y un escritor regular. Pero aquí está la magia, el calificativo que uno se atribuya no es el definitivo. Por mas que yo no me considerase una buen diseñador, ¡la gente si podría hacerlo!

Por eso el boca en boca siempre ha sido la mejor publicidad, no importa el título que tengas, no importa que tan bueno te consideres, si a la gente le gusta el resultado final sin dudas te recomendará.

Foto por: Procsilas

Ando muy ocupado últimamente como para seguir escribiendo al ritmo que empecé. Me encuentro armando un theme para WordPress, no puedo prometer fechas, pero les aseguro que les va a gustar!

Los cebreados son usados en diseño web para realizar listados en donde cada una línea se aplica un estilo diferente. El término proviene del animal Cebra, claramente por su piel.

Éste tipo de detalle no solo condimenta al diseño sino además le proporciona una característica muy importante, la legibilidad. A la hora de tabular datos a veces nos encontramos con listas muy largas en donde paginamos cada 25 o 50 registros, al igual que las líneas punteadas que encontramos en los índices de los libros, intercalar un estilo en un listado nos facilita la lectura y evita que nos perdamos de línea.

Hay diferentes manera de realizar un cebreado, en este tutorial vamos a aprender como hacerlo con el lenguaje PHP y también con jQuery.

Nuestra hoja de estilos

No vamos a profundizar en este aspecto, si quieren ver los estilos pueden descargar el ejemplo. Solamente quiero hacer hincapié en que vamos a tener que definir una clase llamada “alt”, la cual en nuestro caso será aplicada a un <tr> de una tabla.

Entonces, y a modo de ejemplo, el color de fondo de la tabla o del <tr> será por defecto #FFF, y cuando le apliquemos la clase “alt” al <tr> será #CCC.

Cebreado con PHP

Para el cebreado vamos a necesitar primero crear la función que se encargue de devolvernos la clase “alt” cada un registro.

Creando la función

<?php
 
//Funcion para el cebreado cada 1 registro.
function alt ($cebra) {
	if ($cebra/2 == floor($cebra/2)) {
		return ' class="alt"';
	} else {
		return '';
	}
}
$cebra=1;
 
?>

La clave está en lo que evaluamos en el if, decimos:

“Si $cebra dividido 2 es igual al valor entero inferior más cercano al resultado de $cebra dividido 2, entonces imprimí la clase alt, sino no.”

Para comprender mejor esto pueden leer más de la función floor.

Terminada la función, le atribuimos valor 1 a la variable $cebra.

Devolviendo los datos

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Comentario</th>
        </tr>
    </thead>
    <tbody>
        <?php for( $i=1; $i<=6; $i++ ) { ?>
        <tr<?php echo alt($zebra); $zebra++; ?>>
            <td><?php echo $i; ?></td>
            <td><p>Juan Perez</p></td>
            <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus  imperdiet vestibulum volutpat.</p></td>
        </tr>
        <?php } ?>
    </tbody>
</table>

Una vez que tenemos la función vamos a ejecutarla, para eso primero tenemos que crear un bucle que genere registros.

En este caso creé un for() que nos devolverá 6 <tr>, en cada uno se imprimirá el class="alt" o no dependiendo si es par o impar. Para esto en el <tr> hacemos un echo del resultado de la función y luego le sumamos 1 para que dentro del bucle for() $cebra vaya cambiando:

<tr<?php echo alt($zebra); $zebra++; ?>>

Cebreado con jQuery

En este caso usaremos menos código. Antes de cerrar la etiqueta <head> ponemos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	/* Cebreado con jQuery */
	$("#cebreado-jquery tbody tr:even").addClass("alt");
 
});
</script>

Lo que estamos diciendo acá es lo siguiente:

“A los <tr> pares que esten dentro de <tbody> de la tabla con el id cebreado-jquery agregarle la clase alt”

Recuerden que pueden usar :even para los registros pares y :odd para los impares.

En la estructura html hacemos un for() en php igual que en el caso anterior, solo que esta vez no vamos a tener que imprimir el resultado de la función. En este caso recuerden agregarle a la tabla el id “cebreado-jquery”.

Conclusión

Si bien es apenas más trabajoso, recomiendo hacer el cebreado en PHP. Este lenguaje, a diferencia de javascript que puede ser desactivado, funcionara siempre del lado del usuario.

Cuando desarrollamos aplicaciones web, la funcionalidad es un aspecto muy importante. El usuario no tiene ni quiere perder el tiempo y cada click innecesario es un punto en contra hacia nosotros, los desarrolladores.

La edición por lote es un complemento muy funcional. Imagino que muchos de ustedes usan WordPress, piensen qué molesta sería la tarea de tener que borrar una cantidad considerada de comentarios si no pudieran seleccionar todos con un solo click para luego borrarlos, marcarlos como spam, etc.

Y eso es precisamente lo que vamos a construir: un listado de checkboxs con uno “padre” que será el encargado de seleccionar o deseleccionar todos. Para que se aprecie mejor, en el ejemplo simulé la edición masiva de comentarios de un panel de administración.

Estructura HTML

<table>
    <thead>
        <tr>
            <th><input name="checktodos" type="checkbox" /></th>
            <th>ID</th>
            <th>Nombre</th>
            <th>Comentario</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input name="comment-1" type="checkbox" /></td>
            <td>1</td>
            <td>Juan Perez</td>
            <td>Texto de comentario</td>
        </tr>
        <tr>
            <td><input name="comment-2" type="checkbox" /></td>
            <td>2</td>
            <td>Juan Perez</td>
            <td>Texto de comentario</td>
    	</tr>
    </tbody>
</table>

Del código anterior nos tenemos que concentrar en el <input name="checktodos" type="checkbox" />. Este checkbox servirá para controlar los demás. Lo más importante aquí es el atributo name="checktodos", dato que utilizaremos como referencia al escribir nuestro código jQuery.

Además, tenemos los otros checkboxs que seguramente iremos generando de forma dinámica, lo más seguro es que utilicen un for o while, pero eso no lo vamos a profundizar en este tutorial.

Código jQuery para el control de los checkboxs

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//Checkbox
	$("input[name=checktodos]").change(function(){
		$('input[type=checkbox]').each( function() {			
			if($("input[name=checktodos]:checked").length == 1){
				this.checked = true;
			} else {
				this.checked = false;
			}
		});
	});
 
});
</script>

En la primer línea llamamos a la librería jQuery alojada en el servidor de Google, luego con un $(document).ready(function(){ decimos que cuando el documento esté listo, realice lo que sigue.

$("input[name=checktodos]").change(function(){

Empezamos diciendo que cuando el input (en este caso, de tipo checkbox) que contenga “checktodos” en su atributo name cambie (change()) ejecute una función.

$('input[type=checkbox]').each( function() {

Ahora lo que decimos es que por cada uno (each()) de los checkboxs ejecute otra función.

if($("input[name=checktodos]:checked").length == 1){
		this.checked = true;
	} else {
		this.checked = false;
	}

Los checkboxs devuelven un booleano, es decir, un 1 (si es “verdadero” y el checkbox está activo) o un 0 (“falso”, checkbox deseleccionado). Entonces lo que preguntamos en el if es:

“Si el checkbox padre (de name checktodos) que está seleccionado es igual a 1, entonces a this (el checkbox que estamos recorriendo por el each) lo seleccionamos (this.checked = true;), sino lo deseleccionamos (this.checked = false;).”

De esta manera abarcamos todas las posibilidades:

Sí al hacer click en “checktodos” mientras…

1. No está seleccionado y todos los demás tampoco, entonces selecciona todos.
2. No está seleccionado y los demás algunos si algunos no, entonces selecciona todos.
3. No está seleccionado y todos los demás si, entonces selecciona todos.
4. Si está seleccionado y todos los demás no, entonces selecciona ninguno.
5. Si está seleccionado y los demás algunos si algunos no, entonces selecciona ninguno.
6. Si está seleccionado y todos los demás también, entonces selecciona ninguno.

Un buen ejercicio para terminar de entender esto es abrir el demo en una nueva pestaña y realizar cada ejemplo, luego volver al if y analizarlo.

Si quedan dudas, no duden en preguntar!

Antes de arrancar, quiero mostrarles lo que vamos a construir. Para ello nada mejor que ver el demo haciendo click en el link de la derecha o bien descargar los archivos (deberán contar con un servidor local para probarlo).

En el siguiente tutorial me voy a enfocar principalmente en el código javascript del framework jQuery, dejando de lado la explicación PHP.

El menú que vamos a desarrollar tiene la ventaja de dejar abierta la sub botonera cuando nos encontramos dentro del mismo grupo de links. Para entender esto mejor, vayan al demo, ingresen en Posts » Agregar Post y vean que al recargar la página, la sección Posts queda desplegada.

Estructura de carpetas y archivos

Tenemos un index.php en donde vamos a llamar a la hoja de estilos, al framework jQuery y escribir nuestro menú en HTML. Allí también incluiremos a través de PHP las distintas secciones del sitio utilizando los parametros “p” (de página) y “sec” (de sección) por el método GET.

Las páginas, que las llamaremos “p” (posts.php, categorias.php, multimedia.php, etc.) las colocaremos en el raíz del sitio; las secciones, “sec” (agregar-post.php, listar-posts.php, etc.) estarán guardadas dentro una carpeta llamada “paginas” y bajo otra llamada como el “p” que le corresponde.

Para comprender mejor veamos el siguiente ejemplo: agregar-post.php es el “sec” que pertenece al “p” posts.php, entonces estará alojado en /paginas/posts/agregar-post.php. Ésto lo pueden observar en la imagen superior.

Escribiendo el menú en HTML y PHP

<div id="menu">
    <h3>Administrar</h3>
    <ul>
        <li><span <?php if($p == "posts"){echo 'class="current"';} ?>><a href="javascript:void(0);" id="link-posts">Posts</a></span>
            <ul>
                <li><a href="?p=posts&amp;sec=agregar-post" class="add">Agregar</a></li>
                <li><a href="?p=posts&amp;sec=listar-posts" class="list">Listar</a></li>
            </ul>
        </li>
        <li><span <?php if($p == "categorias"){echo 'class="current"';} ?>><a href="javascript:void(0);" id="link-categorias">Cateogr&iacute;as</a></span>
            <ul>
                <li><a href="?p=categorias&amp;sec=agregar-categoria" class="add">Agregar</a></li>
                <li><a href="?p=categorias&amp;sec=listar-categorias" class="list">Listar</a></li>
            </ul>
        </li>
        <li><span <?php if($p == "multimedia"){echo 'class="current"';} ?>><a href="javascript:void(0);" id="link-multimedia">Multimedia</a></span>
            <ul>
                <li><a href="?p=multimedia&amp;sec=agregar-galeria-imagenes" class="add">Agregar galer&iacute;a de im&aacute;genes</a></li>
                <li><a href="?p=multimedia&amp;sec=listar-galeria-imagenes" class="list">Listar galer&iacute;a de im&aacute;genes</a></li>
                <li><a href="?p=multimedia&amp;sec=agregar-galeria-video" class="add">Agregar galer&iacute;a de video</a></li>            
                <li><a href="?p=multimedia&amp;sec=listar-galeria-video" class="list">Listar galer&iacute;a de video</a></li>
            </ul>
        </li>
        <li><span <?php if($p == "usuarios"){echo 'class="current"';} ?>><a href="javascript:void(0);" id="link-usuarios">Usuarios</a></span>
            <ul>
                <li><a href="?p=usuarios&amp;sec=agregar-usuario" class="add">Agregar</a></li>
                <li><a href="?p=usuarios&amp;sec=listar-usuarios" class="list">Listar</a></li>
            </ul>
        </li>
        <li><span <?php if($p == "opciones"){echo 'class="current"';} ?>><a href="javascript:void(0);" id="link-opciones">Opciones</a></span>
            <ul>
                <li><a href="?p=opciones&amp;sec=opcion-lectura" class="bullet">Lectura</a></li>
                <li><a href="?p=opciones&amp;sec=opcion-escritura" class="bullet">Escritura</a></li>
                <li><a href="?p=opciones&amp;sec=opcion-discusion" class="bullet">Discusi&oacute;n</a></li>
                <li><a href="?p=opciones&amp;sec=opcion-permalinks" class="bullet">Permalinks</a></li>
            </ul>
        </li>
    </ul>
</div>

Vamos a seguir está lógica:

Dentro de un div con el id “menu” (referencia para CSS y jQuery) tendremos una lista desordenada. Dentro de cada <li> vamos a tener un <span> que contendrá el nombre de la página, y seguido a éste otra lista desordenada con las subpaginas.

Podrán observar que dentro de cada <span> comparo si $p (url en la que estoy) es igual a la página principal de ese <li>, si lo es imprimo la clase “current”.

Escribiendo el menú jQuery

El siguiente código lo vamos a encontrar antes de cerrar la etiqueta html <head>. En la primer línea llamamos al framework jQuery alojado en Google y luego escribiremos el menú, el cual iré explicando paso a paso más abajo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//Menu desplegable
	$("#menu ul li ul").hide();	
	$("#menu ul li span.current").addClass("open").next("ul").show();
	$("#menu ul li span").click(function(){	
		$(this).next("ul").slideToggle("slow").parent("li").siblings("li").find("ul:visible").slideUp("slow");
		$(this).toggleClass("open");
		$(this).parent("li").siblings("li").find("span").removeClass("open");
	});
 
});
</script>

Primero escribimos:

$(document).ready(function(){

Estamos diciendo que cuando el documento este listo, ejecutemos todo lo siguiente.

Luego tenemos estas dos líneas:

$("#menu ul li ul").hide();	
$("#menu ul li span.current").addClass("open").next("ul").show();

La primera es la que se encarga de esconder todos los <ul> childrens, estos son los que están a continuación de cada <span> en nuestra estructura HTML.

La segunda línea dice: A todos los <span> que están dentro del <div id="menu"><ul><li> y tengan la clase “current” agregales la clase “open”, busca el <ul> que le sigue y abrilo. Ésta línea nos sirve para que cuando estemos en la sección “Agregar Post” el menú “Posts” quede abierto mostrandonos las demás opciones que tenemos.

Ahora vamos a analizar el extracto de código que se encarga del acordeón.

$("#menu ul li span").click(function(){	
	$(this).next("ul").slideToggle("slow").parent("li").siblings("li").find("ul:visible").slideUp("slow");
	$("#menu ul li").find("span").removeClass("open");
	$(this).addClass("open");
});

Lo que estamos diciendo básicamente es que cuando se hace click en un <span> se ejecuta una función que hace:

1. A ésto (el <span> que hicimos click), buscale el siguiente <ul>, a éste hacele un slideToggle() (es decir, si está abierto cerralo y si esta cerrado abrilo, todo con una bonita transición del estilo slideUp/slideDown); luego subimos un nivel hasta el elemento padre del <ul>: el <li>, buscamos los hermanos (siblings) del <li> y los cerramos a todos.
2. Buscamos todos los <span>que existan dentro de <div id="menu"><ul><li> y les sacamos la clase “Open”.
3. A ésto (el <span> que hicimos click) le agregamos la clase “Open”.

Y eso es todo.

Conclusión

Como verán, jQuery es una librería muy flexible que nos permite sin saber mucho de javascript, realizar complementos muy interesantes.

Para éste ejemplo, y más si son nuevos con jQuery, les recomiendo que presten mucha atención al funcionamiento de parent() y siblings() y traten de entender bien cuales son sus funciones. Relean el listado en donde explico con palabras lo que más arriba escribo en jQuery ( la función que realiza el acordeón) las veces necesarias hasta entenderla del todo.

Por otro lado, si bien lo he probado en varios navegadores, no lo hice en todos. Si ven algo raro me avisan en los comentarios. Y cualquier duda también!