Nótese el pedazo iMac que tengo enfrente.

Lo que más me gusta de la Mac en mi espacio de trabajo es su pantalla de 24″, con espacio suficiente para todo. Y al fin tuve la oportunidad de probar el Mac OS X Leopard. Hay detalles que me encantaron, como que al llevar el puntero del ratón a una esquina, se muestren los escritorios disponibles; o que se muestre el escritorio, o todas las ventanas abiertas, pero en orden. Por todo lo demás, se me hizo tan común como la versión anterior.

MEMO: La próxima vez que vaya a Office Depot, debo comprar un bloquecito de Post-It® de 2×2″. ¡Son la neta!

Este mes ha iniciado de forma extraordinariamente benigna. Definitivamente, este ha sido el mejor Enero en muchos años. Allí están las oportunidades, abriéndose cual puertas a mi paso; y los recursos, aunque no han fluido abundantemente, no han faltado. Y sé que esto es clara evidencia de algo enorme, omnipresente, con un potencial creativo único: mi fuerza de voluntad.

El porqué no la había manifestado con tanta energía, ya no es un enigma para mí. ¿Será acaso que ha regresado mi autoestima o que al fin me estoy comprando la idea de tener tanto potencial como pueda imaginar, o ambas a la vez, lo que ha permitido percatarme que hay gente que me necesita? Que allí estan las oportunidades, vaya…

Estoy a punto de iniciar un ciclo y cerrar otro. De eso, me puedo dar cuenta sin ningún problema. Mi blog no será el espacio de autocompasión que vino siendo desde que lo inicié. En parte, por eliminar esa mala costumbre, he venido reduciendo el promedio de entradas mensuales. La otra razón es que no tengo computadora portátil, pero es la menos significativa.

Cabe la posibilidad de que abandone algunos proyectos, más por falta de tiempo y de contenidos que por las ganas de perderlos. En otro momento, ésto me habría causado una sensación de indecisión… pero hoy no. Hay alguien que sabe perfectamente que nuestros caminos se van a cruzar, no importando las condiciones en que ésto suceda. Ella está dentro de mi plan de vida, y es por esa vida juntos que no me pesa cambiar, en lo absoluto; mucho menos dejar aquéllo que ya no considere necesario.

¿Qué pasará con NOWHERELAND blog? Les diré: cerrará permanentemente una vez que haya caducado el dominio. Todos esos posts irán a parar a algún servidor gratuito, sólo para conservar un recuerdo de esa época. Los proyectos que tengan futuro, podrán desligarse y adquirir vida propia; como pasará con Como la Hormiga… y Sugoi! Mi blog personal y el de Kraken Uramen, mi avatar en SL, terminarán posiblemente en WordPress.com. Pero si de algo estoy seguro, es que dejaré de pagar un hosting con tantísimos recursos disponibles, y con tan pocos usados. Lo máximo que he usado de banda ancha en un mes, ha sido 1.5GB -teniendo 10TB de límite, me parece un serio desperdicio-. Esto es algo que no pienso hacer más. Seguiré pagando los dominios restantes, pero irán vinculados a sitios de hospedaje gratuito; a menos de que encuentre un hosting acorde amis necesidades. Son cambios, a fin de cuentas, y me parece que son buenos.

Pasará mucho tiempo antes de que hayan mudanzas. Tengo cubierto hasta noviembre del presente año en HostMonster.com, así que por ahora está la decisión de dejar lo que no funcionó desde su inicio. NOWHERELAND blog, más que un fracaso, fue una gran experiencia que lamentablemente tuvo expectativas demasiado altas y un apoyo mediocre. El trabajo de una sola persona en un proyecto multiusuarios, sencillamente ha sido imposible de sostener. En los últimos tres meses se han perdido las tres cuartas partes del tráfico. Es sencillamente ridículo. Y ahora, se han abierto puertas que no evitaré cruzar, como lo vine haciendo en los últimos años.

Cierro un ciclo, con una gran sonrisa en mi rostro. La experiencia ha sido gratificante; pero sé que lo que me espera lo que será aún más: un plan de vida al lado de la persona que amo. ¿Que más podría desear? Lo tengo todo…

No puedo mentirles. La verdad, no tenía esperanzas. Estaba tan cansado de buscar trabajo, de presentar mi curriculum vitae personalmente y a tantos empleadores, para que al final no regresaran ni siquiera una llamada para decir “gracias por su interés, pero de momento su nivel de habilidades no nos es suficiente”. Digo, por pura civilidad.

Mandé en esta semana casi diez copias de mi curriculum vitae a diversas compañías que solicitaban diseñadores gráficos. Mi papá ya se estaba poniendo bastante funesto en el asunto del préstamo de dinero, presionándome a ayudarle en su negocio a cambio de financiación para seguir dándome el gusto de venir a tomarme un cafecito a Sanborns para hacer mis cosas en Second Life. Y no lo juzgo, tiene toda la razón. A mí mismo me resulta molesto tener que andar estirando la mano…

No sé si sea cierto el refrán “cuando se cierra una puerta, Dios abre una ventana”, pero siento que probablemente lo es. Hoy recibí este e-mail:

HOLA POR EL MOMENTO TENGO PLAZAS VACANTES DE DISEÑO WEB
ESTOY INTERESADO PARA QUE LABORES CON NOSOTROS YA QUE CUBRES EL PERFIL QUE ESTAMOS BUSCANDO
PRESENTATE EL DIA 14/05/07 O EL DIA 15/05/07 A LAS 10:00AM
CONTRATACION INMEDIATA

Creo que… ¡acabo de conseguir un trabajo!

Ya hemos dicho que un buen blog debe mantener un equilibrio visual. ¿Qué significa ésto en palabras sencillas y claras? Que este debe tener una composición armoniosa. Ésto se logra tomando en cuenta:

• Diseño de tablas y optimización de las mismas
• Diseño de imágenes base para el blog y optimización de ellos
• Diseño de tipografía, acorde con el formato del blog

Parece bastante sencillo, pero es una tarea laboriosa.

Primero que nada, debemos contar con nuestros bocetos. Una vez que tenemos definida la estética de nuestro sitio, hay que hacerlo funcional. Para ello, primero haremos las imágenes que integraremos a la interfaz, desde las más grandes a las más pequeñas. Como sólo habrá un estilo general, ya que los blogs no permiten el manejo de tablas diferentes para cada página en particular, nos ahorraremos un buen de trabajo.

En caso de que nuestro sitio integre transparencias, deberemos guardar en formato .PNG. Si no es así­, lo mejor para nuestros visitantes será que las imágenes sean guardadas en .JPG. Si deseas meter animaciones .GIF, cuida que la calidad sea aceptable pero no engroses demasiado el tiempo de bajada con archivos demasiado pesados. Normalmente las animaciones deberán ser muy sencillas, de unos pocos frames, y pequeñas. Caso contrario, lo mejor sería que emplearas Flash y permitieras que los propios usuarios decidan si desean ver o no la animación.

Éstas son unas de las pocas reglas para el buen diseño:

• No caer en el mal gusto (kisch, exagerado o burdo), a menos que sea parte de tu idea inicial,
• Diseñar sólamente a partir del boceto (no inicies por el programa, ya que perderás tiempo),
• Integrar imágenes, tablas y tipografí­a armónicamente, y
• Que el resultado no aburra a la vista

Más adelante les daremos más detalles sobre como lograr estos objetivos, pero es definitivamente un tema aparte, ya que está más ligado a lo editorial que al diseño en web.

Cómo manejar las tablas y cómo optimizarlas

Como ya te lo comenté, debes tomar en cuenta que un blog se compone de dos columnas básicas: la de publicación de entradas y la secundaria, que generalmente se usa para poner ví­nculos y algunos chunches automatizados. Tú decides que ancho y largo va a tener tu sitio.

Hay dos formas esenciales del manejarlo: la común, que nos deja pegada la barra de desplazamiento a la ventana, o por medio de un iframe, publicando en otro blog que se verá en la dirección principal. En todo caso, esto lo debes pensar antes de entrarle a esta parte del trabajo, ya que te verí­as en la penosa necesidad de volver a editar el código y trabajar doble en caso contrario.

Te pongo el ejemplo de Girl Techies. Se publicó una parte del código en el sitio que se carga de entrada en el navegador, y otra parte en el sitio que se carga en el iframe. El código que se publicó para la interfaz, sólo incluye tablas, iframe e imágenes, mientras que el restante, que se ocupa para publicar los artí­culos en la columna, va pegado sólo en el otro sitio.

Claramente en el código se puede observar el tag iframe, que entre sus caracterí­sticas podemos observar los modificadores source (src, que carga una página o sitio externo dentro del mismo), border (para aplicar o no un borde al iframe), transparency (que se usa exclusivamente para sitios a los que en la etiqueta body se les ha modificado por medio de allowtransparency=”yes” para aceptar la transparencia de fondo, el cual se omitirá para integrar los contenidos al fondo del sitio que lo está cargando externamente), y width y height (que modifican la altura y ancho del iframe, que se mide en pixeles)

En esta sección, las tablas las define el diseño de fondo. Se aprovecha la sección gris como área de publicación. El problema puede resolverse comúnmente, pero el concepto principal era eliminar la barra de desplazamiento de la ventana, de forma que el iframe era indispensable, y a su vez, fue necesario usar dos blogs para que la interfaz estuviera completa.

Siempre debes tener en cuenta las medidas exactas de tu diseño. Si tu fondo mide, por ejemplo, 1250 pixeles, estarás trabajando con ancho de tabla de tamaño semejante. En caso de quieras que el texto quede en una columna central, deberas indicar tu alineación principal por medio del tag div. Así­ mismo, si deseas que quede a la derecha. Debes aprender los valores para modificar las tablas desde el mismo código, aun cuando trabajes en Dreamweaver.

Este es el esquema que normalmente te presenta Blogger. Se trata de tablas introducidas en formato CSS, que trabajan de forma dinámica, pero que no son visibles al momento de editarlas en Dreamweaver. Te doy un consejo: no uses CSS a menos que lo domines. Podrí­as obtener resultados desastrozos. Es mejor trabajar con tablas en HTML, que funcionan exactamente igual, si se sabe como editarlas.

Otro ejemplo más, para que quede claro el uso de las tablas en tu diseño. En este caso, el blog de NOWHERELAND. Para su diseño, se necesitaban dos columnas de inclusión de entradas. Blogger no ofrece una solución para ello, por lo que se optépor utilizar, adicionalmente a la columna de posteo, un iframe dentro de la tabla:

Las tablas nos permiten introducir espacios en blanco, que serán respetados sólo si se introduce en el código el alto y largo de la misma. Por ejemplo, la fila superior en el blog de NOWHERELAND, tiene 120 pixeles de alto. Esto me permite colocar dentro de la fila, de fondo a la derecha, una tabla adicional de 460 x 100 pixeles, dividida en dos columnas. Estas dos columnas se usan para promover los servicios de suscripción al blog y al podcast.Los espacios entre columnas también son muy necesarios, ya que el modificador pan de columna, no es muy útil en los casos en los que se requiere un diseño limpio y preciso. Para ello se colocan columnas con un valor estimado de anchura preciso, como por ejemplo, 20 pixeles. También de lado a la columna de información, podrán apreciar que queda un espacio en blanco. En realidad, la columna de información es una tabla en sí­ misma, creada dentro de la columna que incluye a las filas de banner multimedioteca y iframe. Esta tabla tiene varias filas disponibles, pero sólo una columna, y mide exactamente la mitad de lo que mide la fila en la que está incluida. Este valor se puede poner como “50%” o en su medida exacta en pixeles. Es mucho mejor poner siempre las medidas exactas.

Imágenes de fondo

Ya que tienes lista tu tabla, llega el paso de adornarla. Tal vez no desees meterle ninguna imagen a tu blog. Se vale, por supuesto. Entonces sáltate este paso y sigue al siguiente. Pero si quieres que luzca mucho más personalizada, entonces vamos a tener que entrarle con todo a este tema.

Las imágenes que vayas a meter de fondo, tienen que tener una función estilística. Es decir, deben incorporarse al diseño de tus tablas. Seguiré usando los sitios que he hecho como ejemplo. Ahora te presento al blog de Walter Jay, a quien ya debes conocer por los artí­culos que aquí­ ha escrito (y que se publican además en su blog):

Este blog es una alteración del template Scribe de Todd Dominey. Ya se prestaba bastante a lo que se deseaba, así­ que sólo la alteramos (otorgando la correspondiente mención al autor original), para que quedara exactamente como quería.

Alteré, cromáticamente, el fondo; cambié el tipo de letra y eliminé la automatización de la columna secundaria. Incluí­ en el código los valores adecuados para colocar el tí­tulo del blog y la caricatura de Walter. También incluí­ algunas imágenes extra para las secciones de Artí­culos y Obra, así­ como el banner a NOWHERELAND y a Kraken Visuals.

Esto tiene una desventaja… cada que se integra un artí­culo nuevo, hay que editar el código del template para incluir el ví­nculo al mismo en columna secundaria, a fin de mantenerlo actualizado. El recurso es aceptable sólo si las actualizaciones al sitio no son muy constantes.

Tu edición puede ser tan sencilla como ésta. No temas alterar el código o las imágenes predeterminadas de un template. Después de todo, debe ser TU blog. Sin embargo, hay ocasiones en las que los templates base simplemente no nos sirven. Para ello, se crean las tablas, que como mencioné, debes tener listas a este punto.

Un ejemplo de un sitio diseñado, no alterado a partir de un código es NOWHERELAND. Pero puedes utilizar ambos sistemas, sobre todo en el caso de usar iframes. Vamos a ver las tablas de Girl Techies y como se hizo la inclusión de imágenes, para que funcionaran con el iframe y el modificador transparency:

En los casos en que se requiere tener un fondo fijo, es necesario colocar un iframe. Esto es benéfico para nuestro diseño en general, porque podemos colocar una imagen en el fondo desde el código CSS. Simplemente hay que incluir el valor background-image: url(dirección donde se encuentra la imagen de fondo); debajo de la etiqueta body { (la de CSS, no la confundan con la de HTML).

Como se puede notar, no es necesario en este caso crear una tabla que cubra toda la pantalla, ya que se ha optimizado para ser vista desde una laptop o un monitor por igual. Por ello, cuando manejemos iframes, debemos saber quien lo va a ver y cómo queremos que lo vea.

Más adelante les explicaré como trabajar con transparencias, tanto en imágenes como en iframes.

Mañana,
QUE HACER CUANDO UNA SOLA IMAGEN DE FONDO NO ES SUFICIENTE
IFRAMES E IMÁGENES CON CANAL ALFA

ESTRUCTURA TU BLOG

Primero que nada, te aconsejo que tomes papel y lápiz para definir la estructura de tu blog. Debes realizar un esquema de tablas que vaya acorde a lo que deseas. Al hacer esto, debes tomar en cuenta que la parte esencial de tu blog, se compone de una columna de entradas y una más de control e información secundaria.

No importa si no sabes dibujar, la idea es aterrizar lo que piensas que debe ser tu website al momento.

Pero si sabes dibujar, podrás nadar como pez en el agua

No te aconsejo trabajar de inmediato en el Dreamweaver, a menos que seas conformista. Debes tomar en cuenta que tu blog va a reflejar una parte de ti. Que mejor que refleje la parte creativa y no la conformista. Por ello, el papel es indispensable en el proceso de diseño, para realizar bocetos (incluso en el diseño web).

Es importante que lleves un registro de jerarquí­as,
para saber exactamente como debe trabajar tu blog

DECANTA EN DREAMWEAVER

Si hay algo que nos encanta a los diseñadores de los paquetes de Macromedia, es su facilidad de uso. Una vez aprendidas las variables, toma muy poco tiempo el definir las caracterí­sticas estéticas del resto, y sobre la marcha se puede modificar la misma, para optimizarla.

Abre el Dreamweaver, y crea las tablas que acabas de diseñar. A tomar en cuenta en este punto:

• Resolución de mi blog
  ¿A quién quiero llegar con mi nuevo diseño?

Si tu blog está destinado a ser leí­do por las masas, piensa en que no todos tienen monitores de alta resolución. De hecho, son muy pocos los que usan una resolución mayor a 1024 x 786 pixeles. Y aun hay gente que tiene la resolución de su monitor en 800 x 600 pixeles.

Si en cambio, tu blog será un reflejo de lo que eres, no te debería preocupar en lo absoluto.

• Largos y anchos de columna y fila

Cuando trabajamos en Dreamweaver, tenemos que tomar en cuenta si nuestro código será incorporado al Cascade Style Sheet (CSS, en adelante). Yo les aconsejo que, a menos que sepan en lo que se van a meter, no lo hagan.

El CCS define los estilos que se ocuparán en la página. Más adelante veremos como editar los más indispensables. Si deseas aprender más sobre este código, te recomiendo que te bajes este libro:

• CSS Web Design for Dummies

En cuanto a estos valores de largo y ancho, tienen que hacer juego con la resolución que hemos elegido. Pero, invariablemente, se verán afectados por el tamaño de nuestra tipografí­a. Así­ es que deberemos equilibrar el ancho de nuestra columna de entradas, para que sea fácil de leer.

En promedio, una columna con una tipografí­a sans-serif a 12 puntos, debe tener un ancho no menor a 360 pixeles, no mayor a 580. Ésto se debe a que el ojo está acostumbrado a leer la siguiente lí­nea antes de terminar la primera. Si nuestro cerebro pierde de vista el inicio de línea, es más probable que se equivoque al tratar de encontrarla una vez que la ha perdido. Ello conlleva a que el texto sea más difí­cil de leer y por ende que haya menos fluidez en el acceso a la información. Lo que a su vez deriva en la falta de interés por el blog.

Asé­ sea tu artí­culo la panácea del reportaje en web, muy poca gente se verá interesada en pasar más tiempo en el blog si no es fácil de leer. Más adelante veremos como hay que adecuar el CCS para que las nuevas entradas que realices tengan los valores pre-establecidos.

• Columna secundaria
  ¿Sí­ o no?

Cuando creas un nuevo blog en Blogger, debes eligir un template que se acerque al diseño que deseas para el mismo. En todos ellos se incluye, en el CSS, el side-bar o columna secundaria, en donde generalmente se guardan valores automatizados y cuasi-automatizados.

Uno de ellos es el perfil, que ya tiene un diseño especificado por Blogger. Otro más, relacionado con las entradas previas, el cual nos es sumamente útil, y uno más, que es sencillamente un archivo de las entradas que has realizado en ciertos lapsos (los cuales se programan en la pestaña de Opciones del blog). Así mismo, la columna secundaria nos permite compartir ví­nculos a otras páginas de nuestro agrado, o si­ lo deseamos, vinculados con un intercambio de tráfico por medio de banners.

No hay lí­mite alguno a tu creatividad… a menos que aceptes el código preseleccionado. Entonces tendrás que limitarte a una columna. Personalmente creo que esa parte del código es completamente innecesaria. Primero, porque pone lí­mite a mi creatividad; segundo, porque el template del blog no serí­a completamente mí­o si no pudiera modificarlo. Y tercero, porque habiendo tanto espacio para trabajar en una página, no podrí­a limitarme a lo que otros piensan que es adecuado y correcto.

Una plantilla prediseñada suele no ser suficiente en muchos casos.
Posiblemente necesites crear tu propia plantilla,
para personalizar tu blog o hacerlo más funcional.

Checa tu diseño previo y coloca donde se te de la gana el código. Sólo asegúrate de que será atractivo, si ese tu deseo, y funcional. Puedes poner cuantas columnas secundarias desees. En el caso de NOWHERELAND, tenemos dos y es probable que se vaya a integrar una tercera en breve.

• ¿Incluirá iframes?

Un iframe, o internal frame, es un marco que se coloca dentro de la página. A diferencia de los marcos comunes, éstos no constituyen una página en sí­ misma, sino que se integran a ella; permitiendo cargar elementos externos sin brincar de una página a otra. La Multimedioteca de NOWHERELAND es un blog, en sí­ mismo. Sin embargo, se carga en la página principal sin necesidad de saltar al sitio. Por lo que ponemos a disposición de los visitantes, dos blogs en uno.

Piensa si este tipo de recursos te conviene. Tiene amplias aplicaciones. Un ejemplo de ello lo encuentras en Girl Techies, un blog que diseñé para una amiga de EEUU. La página inicial no incluye otra cosa que no sea el iframe y el diseño general del sitio, que hace juego con el blog que carga el iframe por medio de la etiqueta allowtransparency. Esto ayuda principalmente a eliminar la barra de desplazamiento pegada al navegador, lo que le da un diseño estático a la vista al blog.

Mañana,
COMPOSICIÓN Y EQUILIBRIO