250/365 » Encierro

¿Seré yo el único que no ve tristeza en este niño?

¿Será que solo yo no veo su encierro?

Porque honestamente, él simplemente mira con curiosidad

Mientras yo tomaba la foto, confinado en esta jaula.

249/365 » Mi más grande deseo

...- --- ...

248/365 » Nunca posteo youtubes

Pero siempre hay primeras veces... y últimas veces que tomo café antes de dormir. Detesto el café grandemente.

247/365 » En sequía mental

Lo admito, porque es obvio. Perolo emocionante de eso, es que me encuentro a la expectativa de una excelente idea.

Y por eso es que sigo escribiendo --aunque realmente no escriba. Así funciona esto.

246/365 » El soundtrack

El problema con tener soundtrack en la cabeza es la imposibilidad de edición.

245/365 » Contradicción aditiva

¿No han notado que las personas tienen más energía mientras más la gastan, y parecen menos cansadas mientras más trabajan? También adelgazan más rápido mientras más veces coman y parecen estar menos satisfechos mientras más tengan.

Es complicado.

244/365 » La maquinita del tiempo

A pesar de sus desesperados esfuerzos últimamente por afeisbukearse, entrar al hi5 siempre va a ser remontarse al mundo del pasado. A ese mundo donde tus amigos te escriben "testimonios", donde hacés amigos con gente de cualquier lado, donde parecería que todas las mujeres buenas viven en Mexico, y más impactante aún, donde abunda .

243/365 » 1000:1

De diez mil cosas que me gustan y puedo hacer, solo hay una que realmente debería estar haciendo.

Y yo sé lo que me conviene

242/365 » October Senryu

As in other times

Windy-due happiness times

Come into being

241/365 » El valor relativo

Todo tiene un precio o un valor, y es saludable reconocer que las cosas tienen un valor diferente dependiendo de si lo tenemos o no. Vale más lo que nos pertenece contra lo que está por pertenecer, o hemos perdido. Claro, esa diferencia es relativa, porque una persona que realmente sabe lo que está por obtener, lo valora como si ya fuera suyo.

He ahí por qué dicen que lo que cuesta se valora más. No es que el costo eleva el valor, sino que el valor relativo percibido por la persona lo lleva a obtenerlo.

240/365 » Auto superación

Mientras estuve sentado escuchando conferencias, no pude evitar pensar en cómo la gente se emociona cuando se habla de excelencia, y mejoras y desarrollo a través de los onerosos paquetes de la calidad. Y pega justamente con lo que estuve leyendo anoche antes de dormir: la gente parece sentirse mejor cuando se toma una pastilla que cuesta $5 que cuando se toma una de $0.50. Si algo es peor que el placebo mental individual, es el colectivo, organizacional; pagar miles de dólares por estándares de calidad que nos hagan sentir mejores como grupo. Placebo colectivo, sin duda.

Hasta cierto punto, tal y como lo dijo Tyler Durden: Self improvement is masturbation.

239/365 » Navidon't

La odio.

Y este año, la cruzada continuará. Pero ahora, el poder detrás de mi celotipia severa me acompaña.

238/365 » Pro Cras

Trabajar es difícil cuando no hay una fecha meta, o bien, consecuencias preocupantes.

237/365 » Validez y confiabilidad

La diferencia entre estos dos nace del mismo dilema que se tiene cuando se delegan responsabilidades en los trabajos de tesis a alguien que no hace nada, o a alguien que lo hace todo mal. Es exactamente eso.

Claro que no hablo de mi tesis, sino de los tipos que proponen servicios de outsourcing de trabajos de graduación.

236/365 » Wobble my webs and call me shakey!

Si Spider-Man no tuviera superpoderes, sería idéntico a mí. Por que en serio, ¿cuántos tipos nerdy, cool, arrogantes y conocidos por algunos como Snipe hay en el mundo? Por si no fuera poco, Peter Parker también se retrasó en la U por falta de créditos para graduarse.

En definitiva, dos cosas me hacen falta: alguna araña radioactiva, y una mujer que me diga de vez en cuando: "Tiger, you're utterly MAAAAAAAAAAD!" (to whom I'd hang to as dear life.)

235/365 » HUNNAAAAAAAA

¡¡¡¡¡¡¡Por favorrrrrrrrrrrrrrrrrrrrr!!!!!!! ¡¡¡NOOOOOOOOOOOOO!!!

234/365 » Back To Normal Haiku

Went to bed early
I just can't stand anymore
10 am wake-ups.

233/365 » Diseño satisfactorio

No sé por qué se me vino a la mente, pero supongo que diseñar columpios debería ser un asunto dedicado a verdaderos analistas. Si bien es cierto que la mayoría de sus usuarios son niños pequeños, bien parecería que tiene una razón detrás de ello: la altura del asiento. Claro, porque si está muy alto, no es posible columpiarse, y si está my bajo, los pies se arrastran en el piso.

Si asumimos la altura del columpio como constante, entonces debería existir una gráfica de la distribución de la satisfacción del uso del columpio versus la edad de la persona que se vería algo así (honestamente, me robé el diagrama de otro sitio, tengo mucho sueño como para hacer uno yo).

Ahora, sería interesante pensar en que la altura del columpio debería mover la curva hacia la izquierda o hacia la derecha. O no sé, algo así. sería interesante encontrar una forma matemática para ser optimizada.

En resumen, odio tener más de 10 años de arrastrar los pies en los columpios.

232/365 » América

Respecto al post de ahora en CP: Siempre he discutido con los estadounidenses sobre cómo América es un continente y no un país. Al final, alguien me hizo la aclaración de que nunca en su mente se hubiera imaginado que en nuestros países las escuelas enseñaran tal cosa.

Fue incómodo, les diré.

231/365 » ¿Coincidencia?

Ahora pasé frente a la escena de un crimen, aunque ya no había más que vidrios rotos y varios policías. Así, se me ocurrió una pregunta: ¿Han notado que hace diez años los causantes de violencia en el país tenían, coincidentalmente diez años menos que las personas que la policía atrapa hoy en día?

No sé por qué, pero esa solamente fue una corazonada. Claro, al buscar en internet, me doy cuenta de que no estoy nada equivocado. Según este artículo (tuve que hacer un screenshot porque el sitio está siendo actualizado; tomé la información de la caché de Google), la tasa de relación entre infracción juvenil contra la de adultos disminuyó del 15% al 5.82% en prácticamente 10 años a partir de 1994. Igual, según esta fuente, justo en el 2004 es cuando aumenta dramáticamente la cifra de homicidios. Las edades de los homicidios oscila entre 20 y 34 años. Nada mal para una corazonada, diría yo.

Mi predicción: la tasa de crímenes definitivamente va a disminuir en diez o doce años. Ahora lo importante: do I get a cookie?

230/365 » Epifanía

Cada cierto tiempo, sin siquiera buscarlas--o realmente desearlas, realmente--vienen estas ideas a mi cabeza sobre cómo salvar al mundo. Sin embargo, me temo que que no lograré conseguir los conejitos y ardillitas necesarias a tiempo.

229/365 » Wishlist

Si alguien realmente me quiere y me ama, pero en serio, que me compre y regale esto.

228/365 » Control mental

Levantarme en las mañanas con los gatos cerca nunca será lo mismo. Cuando toda mi vida pasé engañado con que el maullido feliz de mis gatos era cuestión de afecto, según este estudio parece ser producto de un plan para controlar mi cerebro y hacerme cumplir sus deseos.

Ser ignorante y feliz ya no es fácil en estos tiempos.

227/365 » Monólogo

Cuando estoy solo, me encanta platicar conmigo mismo. Y la mayoría de veces que me encuentro en mi plática, lo hago en español. He descubierto que lo hago porque realmente disfruto pensar en la palabra adecuada para expresarme. Decidir de entre las opciones que tengo al hablar me da cierta satisfacción. Las ideas que tengo en mi cabeza no valen nada si no son dichas del modo adecuado.

No hacerlo así es como contar un buen chiste y no causar gracia, o escuchar música en mi cabeza y no poderla tocar en un instrumento. Es un estado de coma mental.

226/365 » Sucinto

Así de extraño es: mientras más corto sea el post, más difícil es escribirlo.

225/365 » Time-Exiguous Haiku

When it comes to you
"How much" isn't quite the deal
All is so worthful

224/365 » Los últimos detalles

¿Te gustaría leer este tutorial desde el inicio?

Teniendo todo casi listo, estoy seguro que no hay adónde perderse, por lo que simplemente voy a hablar de cómo termine el diseño de la plantilla:

Tipografía
Para el diseño de un sitio a mí me gusta utilizar tipografía uniforme. Al momento de decidirse por un tipo, hay que tomar en cuenta que si una computadora de algún lector no tiene instalado nuestro tipo de letra favorito, él no podrá ver el sitio como nosotros querríamos. Por esto, los diseñadores escogen fonts comunes y fáciles de leer.

body {background-color:#030303; font-family:Lucida Grande, Verdana, sans-serif; }

Fecha
Para crear el efecto del listón azul, primero ubiqué el div para la fecha. Para no perderse a la hora de buscar el div para modificar, hay dos modos de hacerlo: el primero es como comenté ayer, con la barra de Web Developer. Otra es hurgando el código fuente del sitio publicado.

.date-header {
color:white;
height:11px;
width:460px;
font-size:11px; 
clear:both; 
padding-left:10px;
background-color:#4c9acf;
padding-top:20px;
float:right;
margin-right:15px;
margin-top:10px;
text-align:right;
text-transform:uppercase;
}

Separación
Si notan, la plantilla tiene el efecto de separar los posts entre sí. Esto lo hago simplemente con un borde inferior del mismo color del body del sitio. Así, crea la ilusión de continuidad del fondo.

.uncustomized-post-template {border-bottom:31px solid #030303;}

Banner
Al ver el banner en medio del sitio, pueden amarlo, u odiarlo. En mi caso, yo siento los dos. Y es exactamente por eso que lo he dejado ahí, porque es molesto y llamativo, como la buena publicidad. Para crearlo, creé una paleta de colores basada en la imagen que quería para mi blog, utilicé una imagen que contuviera esos colores, y después de un par de filtros y modificaciones en Photoshop, obtuve mi banner. Nada muy complicado una vez se tiene una idea de qué hacer.

223/365 » El sidebar

¿Te gustaría leer este tutorial desde el inicio?

El sidebar está compuesto por widgets, ¿verdad? La mayoría de estos widgets van en el sidebar, así que ahora vamos a aprender a modificarlos. Para esto, me auxilio de alguna herramienta como Firebug o la barra de Web Developer; ambas están disponibles para Firefox. Yo uso la última.

Si decidieron usar la misma que yo, les explico el método que uso para trabajar. Primero, deben añadir los widgets desde el menú de Blogger, en "Elementos de la página". Yo decidí que mi blog tuviera un blogroll, una lista de tags, un widget de Flickr, mi perfil y una lista para el archivo de la página. Ustedes pueden poner los que más les gusten. Ahora, abran su blog, y desde la Web Developer Toolbar seleccionen Información - Mostrar detalles ID y CLASS. Van a ver algo como esto:

Ahora ya sabemos qué significan los # y los puntos, ¿verdad? Recapitulando, los # son los divs con id, y los puntos son los id con clases. Pueden observar que generalmente las clases van adentro de los id, porque son de más baja jerarquía. Por el momento vamos a usar los nombres de los id para cada elemento. Por ejemplo, para modificar los atributos de mi perfil, añado en mi CSS:

NOTA: Para poder modificar el CSS de cualquier widget, dentro de la ventana del código de HTML seleccionen la opción "Expandir plantillas de artilugios". Si no lo hacen, Blogger les va a decir que va a borrar los widgets para grabar el código. Han sido advertidos.

#Profile1 
{
margin-top:20px; 
margin-bottom:20px;
border-top:2px solid #555;
border-bottom:2px solid #555;
padding:10px 0 20px 0;
}

Este código dice: al div con id "Profile1" se le genera un margen superior (este se cuenta como externo al elemento) de 20 pixeles, y también uno inferior de 20 pixeles. Tiene un borde superior e inferior de 2 pixeles, sólido y de color gris (ahora es un buen momento para hablar de los códigos hexadecimales... o no: con una búsqueda en Google de "hex colors", van a encontrar muchas herramientas para escoger los colores que más quieran para su blog). Por último, el padding es el contrario de margin, es un tipo de margen interno. Pueden ver que coloqué cuatro números, lo cual es un modo abreviado para evitar repetir los atributos como sucedió arriba; cada número se cuenta como arriba-derecha-abajo-izquierda. Por tanto, arriba y abajo tienen valores, mientras que derecha e izquierda no.

He decidio también colocar los widgets de etiquetas y del blogroll como columnas para ahorrar espacio, así que he colocado lo siguiente:

#BlogList1 {width:135px; float:left;}
#Label1 {width:135px; float:left;}

El sidebar ahora tiene un ancho de 290px (lo reduje para colocarle un padding de 20px y evitar que el logo del blog esté junto a los títulos de los elementos), por lo que he tenido que reducir el tamaño de ambos elementos. Con 135 pixeles de ancho y un float hacia la izquierda, los dos widgets se colocan uno junto al otro.

Entre otras cosas, una que es importante es que modifiqué el color del texto. Debido a que mi sidebar es negra, necesito letras claras, por lo que uso el siguiente código (lo que ven del sidebar se lo añadí al selector que ya tenía antes:

#sidebar a {color:#ddd;}
#sidebar {width:290px; height:1000px; background-color:#030303; color:white; font-size:9px;float:right; padding-left:20px;}

El selector #sidebar a aplica a los elementos "a", como los hipervínculos. En el sitio de w3c pueden encontrar mucha información sobre todo lo que pueden modificar del CSS de un sitio.

Después de una que otra modificación, y que coloqué un bannercito al blog, voy quedando con una plantilla bastante completa, y solo me falta modificar la parte de los posts. ¿Le gusta cómo vamos hasta el momento?

222/365 » Tamaños y floats

¿Te gustaría leer este tutorial desde el inicio? 

Ayer usamos atributos de color para no perdernos mientras movemos nuestros divs de un lado a otro. Ahora vamos a organizar la estructura del sitio. Ya que este tutorial no se encarga de modificar los elementos XML de la plantilla (ya que Blogger hace esto por nosotros), solo vamos a trabajar en darle forma a nuestra plantilla. A partir de este momento, todo lo que voy a hacer es solo para darles un ejemplo de lo que usé para crear mi plantilla. Para una estructura de dos columnas y un header, hay un div de logo (generalmente le llaman header, recuerden que pueden ordenar su sitio como más les guste) justo después de abrir el body, y antes del container:

<div id='logo'>
</div>

Este div por su cuenta no hace mucho, mientras no le den forma. Intenten con algo así:

#logo {height:200px; 
background:url("http://www.urldeejemplo.com") no-repeat; 
clear:both;}

En mi caso, decidí hacer algo diferente. Ya que generalmente escribo posts demasiado cortos, y con el fin de llevarle la contraria al mundo, decidí aprovechar el espacio horizontal para mi header. Les explico un poco de lo que significan algunos de los atributos que van a ver:

• margin es utilizado para crear márgenes fuera de los divs. En el caso específico que ven ahí, al colocar margin-left con margin-right para un elemento, hace que este quede centrado;
• width sirve para el ancho del elemento, y height para su altura;
• float sirve para definir hacia adónde los divs van a "flotar" cuando se les deja sueltos. Los divs que flotan hacia el mismo lado se ordenan, según su orden de declaración. En este caso, el div de content está antes que el del logo, por lo que ese se encuentra más a la izquierda.
• clear es utilizado como un "salto de línea", es decir, para evitar que hayan elementos a los lados del elemento.
  

#navbar-iframe {height:0px;visibility:hidden;display:none;}
#container {width:910px; background-color:99BDAB; margin-left:auto; margin-right:auto; border-top: 4px solid black;}
#content {width:450px; float:left; background-color:#EDEFD1;}
#logo {width:150px; height:1000px; float:left; background-color:#CED59F;}
#sidebar {width:310px; height:1000px; background-color:#F06463; float:right;}
#footer {height:45px; background-color:black; overflow:auto; clear:both;}

Así, tengo un sitio que se ve así por el momento:

A partir de acá, la plantilla está básicamente organizada, y solo es cuestión de organizar los elementos, dar color y dar estilo al texto y uno que otro elemento en el sitio.

A partir de esto, ya están listos para hacer su plantilla con la forma que quieran.

¿Les gustaría tener una plantilla con un footer grande que tenga su blogroll u otras cosas? Solo crean otros divs dentro del footer. ¿Qué tal de tener un blog con dos, tres o cuatro columnas? Hay tantas opciones que pueden hacer de su plantilla única y especial. Pero mientras tanto, sigamos viendo cómo hice para terminar mi plantilla.

221/365 » La estructura del sitio

¿Te gustaría leer este tutorial desde el inicio? 

Como vimos ayer, los sitios web están organizados por medio de los div. Revisemos un código que preparé para comenzar a diseñar nuestra plantilla. Cópienlo y peguenlo dentro de la parte de edición de HTML de su blog:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Templeit
Designer: Esnipi
URL:      www.snipedia.net
Date:     10/01/09
----------------------------------------------- 
*/

 ]]></b:skin>
</head>
<body>
   <div id='wrapper'>
  <div id='container'>
   <div id='content'>
    <div class='post-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
    </b:section>
    </div>
</div>
<div id='sidebar-wrapper'>
    <div id='sidebar'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
     </b:section>
    </div>
</div>
</div>
<!-- acá termina container -->
<div id='footer'>
   <div align="center">
Hacer plantillas es fácil.</div>
</div>
</div>
<!-- acá termina wrapper -->
</body>
</html>

Ahora, hablemos de lo que pensamos hacer. Primero, hay que tener en cuenta que dentro del header va generalmente todo el código CSS. Este nos va a servir para darle forma a todo lo que hagamos con el HTML: tamaños, formas, colores, etc. Ahora, esta plantilla ya está lista para que comencemos a jugar. Primero, revisemos de forma general qué es lo que tenemos dentro del body del código. Entremos a nuestro blog y revisemos qué es lo que se puede ver:

Et voílà! ¿Les gusta cómo vamos? Bueno, no podemos quejarnos, si solo tenemos un post de prueba, y nada más. Ahora, comencemos con la magia. Antes que nada, revisemos la estructura de los divs, para tener claro qué es lo que estamos haciendo.

Con esto en mente, podemos comenzar a jugar con el CSS un poco. Una regla básica de este lenguaje es que todo atributo que se aplique a un elemento, se aplica también a los elementos dentro de ella. Así, por ejemplo, si decidimos el atributo:

body {background-color:green;}

Va a significar que no solo body, sino que todos los elementos dentro de él (container, content, footer, sidebar-wrapper, etc.) tendrán un fondo color verde. Así, si deseáramos que container tenga un fondo blanco, por ejemplo, tendríamos que especificarlo dentro del  código, haciendo que ese div (y los contenidos dentro de él) sean una excepción del atributo global que hemos creado antes.

Juguemos un poco con el código que ya tenemos en nuestro sitio, ¿Les parece? El código CSS puden ponerlo una línea antes de ]]>, dentro del head. Comencemos con quitarle la barra de navegación, y con ponerle algo de color, por motivos puramente didácticos. Voy a escoger una paleta bonita:

#navbar-iframe {height:0px;visibility:hidden;display:none;} /*que significa: el div navbar-iframe va a tener una altura de 0 pixeles, estará escondido, y no tendrá visibilidad.*/
#wrapper {background-color:#7BA38B;}
#container {background-color:#D5A423;}
#content {background-color:#EED4AF;}
#sidebar {background-color:#BE270A;}
#footer {background-color:#CE6C11;} 

Ahora, veamos qué es lo que obtenemos al guardar los cambios. ¿Notan la falta de algunos elementos? Eso es porque todavía no tienen forma, ni contenido. Pero eso es justamente lo que haremos mañana.

220/365 » Sintaxis

¿Te gustaría leer este tutorial desde el inicio? 

Ayer revisamos un poco sobre cómo se estructura un sitio en HTML (bueno, XHTML en este caso). Ahora, hablemos un poco de cómo se organizan los sitios web en este lenguaje.

HTML
Primero, ya sabemos que funcionan a través de etiquetas, ¿verdad? Ya saben, se abren así: <elemento> y se cierran con </elemento>. Ahora, hablemos de cómo se organizan uno dentro de otro. Una cosa importante que deben saber es que en HTML los elementos van dentro de otros, pero si ese es el caso, deben abrirse y cerrarse mientras se encuentran adentro. Por ejemplo, un buen ejemplo relacionado a lo que vimos ayer es que html es una etiqueta que contiene a head y body. Ambas se abren y cierran sin entrelazarse entre sí:

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Ahora, esto no solamente es útil para estas etiquetas, sino para organizar la información de todas las etiquetas, especialmente las que se encuentran dentro de body. ¿Cómo se hace eso? Pues por medio de los divs. Un div es una "caja" que contiene elementos en el sitio web. A mí me gusta pensar en body como la caja maestra que contiene a todo el universo de divs, mientras que existen divs más pequeños que se organizan para caber dentro de ella mientras contienen a su vez a todo el contenido. Así, los sitios web se ven así:

He coloreado cada div con un color distinto. Existe uno para el encabezado de los blogs, para el espacio donde irán los post, para la sidebar (barra lateral), etc. Incluso hay divs dentro de otros: los widgets pueden ir dentro de la sidebar, o el título del post puede ir dentro de un div para cada post. Así, existen tantos divs como elementos y subdivisiones existen en la plantilla.

Para diferenciar un div de otro, se utilizan dos métodos para etiquetarlos: id y class. Así, se le colocan nombres a cada uno de los divs cuando se abren: <elemento id="atributo"> o <elemento class="atributo">. Generalmente, los id tienen más jerarquía que los class, pero te recomiendo que investigués más al respecto para que no te cause problemas.

CSS
Todo el código de CSS está basado en las etiquetas que usamos para nombrar a los divs. La sintaxis para el código se resume así:

selector {propiedad:valor;}

Y ya, así de sencillo es. A un selector se le pone enfrente un símbolo de numeral (#) si estamos dando atributos a un div etiquetado con un id, y un punto si el div tiene una class. Un par de ejemplos:

1) #post {border:1px solid #ffffff;}

2) .date {background-color:white;}

El ejemplo 1 se lee: el div con el id "post" posee un  borde sólido con un valor de 1px y de color negro. El otro ejemplo dice: el div con clase "date" tiene un fondo de color blanco. Aparte de esto, existen elementos como los headers o párrafos (h1, h2, p, etc.) que no requieren ningún símbolo frente a ellos, por mostrarles cómo funciona esto, de forma rápida.

Ahora, veamos cómo vamos a usar todo esto para crear nuestro sitio.