Blender: Guía de iniciación para recién llegados. Adaptada a la versión 2.5

Joaclint Istgud — Fri, 27 Nov 2009 20:54:29 +0000

Hemos tenido que esperar mucho para poder degustar la delicatessen que la Fundación Blender ha liberado hace unos pocos días. La versión 2.5 es mucho más que un simple paso de las 2.4x a las 2.5x; es el comienzo de una nueva manera de entender Blender. No sólo tenemos que olvidarnos de las eternas críticas a aquella poco amigable interfaz de carácter “in house” sino que podemos afirmar que la estética de la nueva propuesta es elegante a más no poder. Por no hablar de la organización de las herramientas que es totalmente coherente (aunque debamos hacer un esfuerzo por aprender de nuevo dónde está cada cosa). Pero ya sabe que este no es un blog de noticias sino didáctico; así que vamos directos al grano.

En estos días que han pasado desde la publicación me he dedicado a adaptar mi vieja y obsoleta Guía visual de iniciación para recién llegados a Blender a esta nueva flamante versión. Y aquí está. Mientras que se empieza a llenar la red de nueva documentación espero poder ayudar con este aporte a todos aquellos que quieren aproximarse a esta apasionante herramienta de diseño.

Y como siempre en estos casos tengo que pedir la ayuda de todos aquellos que dispongan de web o blog y quieran apoyar este proyecto, que se animen a desarrollar un pequeño post para difundirlo lo más posible. Gracias de antemano.

Estos son los enlaces a la versión en PDF y la versión Online. Puede usar las imágenes que pongo a continuación si desea promocionar este curso (incluyen enlaces).

KompoZer: haciendo funcionar el javascript Lightbox

Joaclint Istgud — Tue, 17 Nov 2009 22:43:36 +0000

Desde que me rebané la sesera para hacer funcionar el efecto Zoomi con JQuery hasta ahora ha pasado mucho tiempo. Ahora ya comienzo a comprender el asunto y hacer funcionar un script como Lightbox no me supone un quebradero como aquel pero me gusta dejar una memoria para futuros proyectos y para que sirva de apoyo a algún que otro lector.

Tras buscar por la red un efecto bonito y sencillo para incorporar a unas imágenes de una pequeña web que me han encargado opté por Lightbox por ser un script sencillo de implementar y con un resultado visual muy atractivo y elegante como puede verse aquí.

En la web oficial vienen detallados todos los pasos para implementarlo pero vamos a hacerlo aquí de una manera más descriptiva a la vez que usamos KompoZer para realizar la mayor cantidad de trabajo posible en un modo de edición visual y no picando código (aivá, parezco un profesional auténtico)

Una vez descargada la última versión de Lightbox, en mi caso la 2.04 descubrimos que tras descomprimir hay una carpeta con varias subcarpetas:

css: incluye el archivo para el estilo de la página. En su momento tendremos que enlazar nuestros HTML a este CSS.
images: con todo lo necesario para que el script muestre botones, cargadores… En su momento crearemos algunos nuevos para que nuestro script muestre esta información en español.

js: donde se encuentran los javascripts necesarios para que todo esto funcione.

Además tenemos al lado de estas carpetas un archivo llamado index.html para poder acceder a un tutorial sobre la puesta en marcha del script y que usa las imágenes de antes.

Tenemos una imagen en tamaño miniatura y la original a tamaño real que saldrá al ejecutar el script:

Lo primero es ir al código y pegar entre y las tres líneas que llaman a los javascripts.

Tal y como puede verse en las rutas relativas (js/..) se está dando por supuesto que nuestro archivo estará situado al lado de la carpeta js, por lo que si nuestro archivo va a llamarse index.html debemos renombrar el del tutorial o se sobreescribirá.
Bien; pues ya tenemos las llamadas a los javascripts insertados. La llamada al CSS vamos a hacerla desde el editor visual. Se supone que ya tenemos guardado nuestro proyecto como index.html al lado de la carpeta js; así que vamos al editor de CSS (Herramietas/Editor CSS) y escojemos Hoja de estilos enlazada:

Una vez marcada la ruta hacia la carpeta css y su archivo lightbox.css ésta aparecerá en la lista de hojas de estilo:

Con esto se ha creado automáticamente (entre y ) la siguiente línea en el código…

…que es exactamente la misma que nos dice el tutorial que podíamos insertar a mano.

Es el momento de incluir la miniatura en el proyecto (Insertar/Imagen) y de crear en ella un enlace (Insertar/Enlace) cuyo destino es la imagen grande.

Para que al hacer clic sobre la miniatura se produzca el efecto deseado tan sólo tenemos que asignarle al enlace el atributo rel=”lightbox”. Para hacerlo de manera gráfica, sólo tenemos que hacer clic derecho sobre la etiqueta en la parte baja de la interfaz (hay que asegurarse de tener seleccionada la miniatura en cuestión):

Esto nos despliega un cuadro en el que escogemos en el campo de la izquierda en atributo rel y escribimos en el de la derecha el valor lightbox:

La apariencia después de la animación que amplía la imagen es esta:

¿Qué podemos hacer a partir de aquí?.
Pues cambiar la imagen que incluye el texto CLOSE y la X por un nuevo GIF como este:

Y también podemos insertar un pie de página para hacer una descripción de la imagen siempre que le añadamos a la etiqueta el atributo title del mismo modo que antes le añadimos el atributo rel.
Este sería un ejemplo en el que ya se incluye el cambio de la imagen para salir del efecto:

¡Listo!

Ya tenemos el efecto lightbox para esa imagen. Puede ver el ejemplo aquí.

NOTA: es posible hacer que al ejecutar el javascript se muestre una secuencia de imágenes con una agradable transición entre ellas. El método a seguir es añadir entre corchetes el nombre del grupo al que pertenecen las imágenes a mostrar. Lo mejor es un ejemplo:

Esto hace aparecer nuevos botones que quizá deberían ser sustituidos por versiones en español y un texto que dice, por ejemplo, Image 2 of 6 (en inglés).
Después de mirar algo el asunto he visto que esto puede cambiarse si accedemos al archivo lightbox.js con un editor del tipo Gedit para Linux o Notepad++ para Win y editando en esta parte:

Y eso es todo. espero que le saque producto a este bonito efecto así como a otros muchos que se hacen funcionar de una manera similar.

KompoZer: botones rollover sin texto con CSS

Joaclint Istgud — Fri, 13 Nov 2009 22:10:14 +0000

Voy a aprovechar este post para dar la bienvenida a KompoZer 0.8b1 que ya está disponible en español e incluye unos cuantos cambios respecto a la 0.8a4. Dentro de unos días contaré en qué medida (poca) he colaborado en la nueva imagen del logo de la futura versión 0.8.
Crear un efecto rollover en KompoZer usando su editor de CSS es relativamente sencillo si se conserva el texto con el link y ya lo traté en su momento con este otro tutorial.
El asunto se complica un poco si lo que queremos es que el botón actúe de la misma manera pero sin que aparezca el texto del enlace. Un efecto típico es poner un menú de imágenes en blanco y negro o desenfocadas y conseguir que se pongan en color o que se enfoquen al pasar con el ratón por encima.

Es posible que haya otros métodos igual de efectivos que el que yo voy a describir aquí pero este funciona sin problema.

Lo primero, como es lógico, es contar con una única imagen que incluya las dos posiciones del rollover para la que usaremos esta imagen

http://img371.imageshack.us/img371/1931/alexredbullyd4.jpg

Y este es el rollover creado con la ayuda de Gimp (300×263px)

Ya en KompoZer creamos el contenedor DIV en el que se incluirá este rollover. Este contenedor puede que esté dentro de otro u otras mil posibilidades que nosotros aquí no vamos a detallar. A ese contenedor genérico le asignamos una id=”menu” (aunque aquí no editaremos ninguna de sus características). En ese contenedor creamos una lista de viñetas para los enlaces del menú a la que le damos una id=”rollovers” y al primero de los enlaces le asignamos una id=”rollover_01″

Por último creamos un enlace, de momento un enlace nulo con destino # para enlace_01:

Ya en el editor de CSS creamos las reglas de estilo #menu, #rollovers y #rollover_01:

A las que le añadimos un par de ellas más:

#rollovers a:link para editar el comportamiento de los enlaces de texto de todos y cada uno de los rollovers que pongamos en esta lista.
#rollover_01 a:hover para editar el comportamiento del enlace de texto cuando el ratón pasa por encima.

Comenzamos por eliminarle las viñetas a la lista editando la regla #rollovers en la pestaña Listas escogiendo la opción Tipo para el estilo de la lista: Ninguno.

Editamos ahora la regla de estilo #rollovers a:link que es donde se va a cocer el verdadero truco para ocultar el texto. Nos centramos en los campos de la pestaña Caja:

Anchura: la de las imágenes 263px. Nada que no obedezca a la más pura lógica
Altura: 0px (cero píxeles!!). Es el principio del truco. No dejamos sitio para que se muestre el texto del enlace. Pero ¿qué pasa con la imagen de fondo?
Margen interno (padding) superior: 150px. Es el valor de la altura de la imagen. Con esto estamos dejando hueco para que aparezca la imagen por encima de la altura de 0px de antes. Esto genera un problema. El texto del enlace queda desplazado fuera de la caja y es visible.
Desbordamiento: oculto. ¿Qué tiene que hacer el navegador con ese excedente en la caja?. En nuestro caso queremos que no sea visible.
Mostrar como: bloque. Para que todo el espacio de la caja sea sensible al efecto del enlace.

Hemos conseguido que la imagen se comporte como un enlace que nos dirigirá a la dirección que le especifiquemos pero todavía falta el efecto rollover al pasar el ratón por encima. Es tan sencillo como editar la imagen de fondo que deseamos para #rollover_01 a:hover. En realidad se trata de la misma con la particularidad de que tiene que mostrar la parte inferior

Un vistazo a las posibilidades de esta herramienta nos puede llevar rápido a la conclusión de que podemos hacer composiciones más complejas para cargar una sola imagen y poder mostrar la parte que nos interese en cada momento. Por ejemplo podemos ampliar el efecto rollover con un cambio de imagen en el momento en que el usuario hace clic creando la regla de estilo #rollover_01 a:active.

Blender: “Fotoexplosión” 3D

Joaclint Istgud — Sat, 07 Nov 2009 17:05:06 +0000

Hace ya tiempo que presenté una propuesta en forma de tutorial para conseguir un efecto al que denominé foto-explosión y se creaba con Inkscape.

En esta ocasión mi propósito es conseguir un efecto en la misma línea pero totalmente 3D. Para ello lo primero es elegir como software Blender. Como ya no tiene mucho sentido continuar generando documentación con la interfaz de las versiones 2.4x voy a aprovechar esta ocasión para crear mi primer tutorial usando capturas de pantalla de lo que será la flamante 2.5 (he usado una SVN para Windows). Además así me voy animando a conocerla “por dentro” después de ver tanto vídeo contando sus maravillas. Ni que decir tiene que he quedado alucinado totalmente con la nueva manera de organizar todo. La velocidad a la hora de renderizar ha mejorado mucho y el aspecto “in house” que tantas críticas ha tenido ha desaparecido por fin. Muchos botones que no servían para nada por haber quedado obsoletos han desaparecido… En fin, que me ha encantado.

Este es el resultado conseguido con el tutorial en cuestión:

Blender: “Pato” de Pocoyo. Trabajo en progreso

Joaclint Istgud — Sun, 01 Nov 2009 19:57:06 +0000

No es gran cosa pero estoy dando por terminado el modelado de Pato, el personaje de Pocoyo (sé que hay que retocar cosas del pico y de los pies…). La intención es ponerle un esqueleto y que comience a caminar. Espero progresar e ir mostrando esos avances.

Ultimate Flash Face: Retratos-robot on line

Joaclint Istgud — Thu, 29 Oct 2009 21:59:41 +0000

Mientras buscaba una herramienta con la que trabajé hace algún tiempo para hacer caras en 3D me topé con Ultimate Flash Face. Es una utilidad online muy interesante en la medida en que además de traer un amplio abanico de posibilidades para ojos, pelo, narices… permite editar las proporciones X e Y de cada una de ellas con lo que las combinaciones son mucho mayores. La interfaz de trabajo es tan sencilla como esta:

Tampoco es que me haya detenido mucho en ella pero me pareció una bonita herramienta a tener en cuenta en ciertas circunstancias y me animé a crear un post con ella y mostrar mi retrato robot de este individuo… Espero haber movido los elementos lo suficientemente bien como para que sea reconocido por usted.

Entre en Ultimate Flash Face y páselo bien un rato; es seguro que se puede tratar también el tema de la caricatura… pero eso lo dejo para usted.

EDITADO: Bueno, venga… Me he animado y me hecho una caricatura rápida de mi mismo. Ahí va:

Inkscape: Creación de logotipo para Dinosaur Studios

Joaclint Istgud — Mon, 19 Oct 2009 19:07:28 +0000

Últimamente no hay tiempo para nada. Demasiados trabajos y casi todos derivados de este blog. Algunos de estos trabajos están relacionados con el diseño profesional y otros con algún concurso al que me presento de vez en cuando. En 99 designs no hubo suerte con este; pero los organizadores quedaron satisfechos con esta propuesta y sus derivados y han contactado conmigo para adquirirla y poder usarla como imagen corporativa secundaria (producciones infantiles-juveniles o algo así, supongo).

Está creada, como no puede ser de otra manera con Inkscape.

Personalmente no soy muy amigo de convertir las letras en objetos en una marca corporativa pero en este caso era un requerimiento explícito de los convocantes.

Espero que le guste.

Balsamiq Mockups: bocetos de tus proyectos digitales

Joaclint Istgud — Mon, 12 Oct 2009 09:28:24 +0000

Cada vez son más ratos los que se pasa uno proyectando ideas. A uno se le va la mano rápidamente al lápiz y el papel para hacer los bocetos pero acabas dándote cuenta de que casi siempre estás dibujando los mismos elementos una y otra vez. Para aprovechar el tiempo al máximo y dedicarnos en exclusiva a la parte creativa, tenemos una bonita herramienta denominada Balsamiq Mockups. Facilita muchísimo el trabajo ya que permite mover aquí y allá cualquier elemento que nos podamos imaginar.

Imagine que está pensando en incluir un reproductor de vídeos en un proyecto web. Pues Balsamiq Mockup nos ofrece este bonito boceto para que lo pongamos allí dende nos parezca más conveniente en nuestro croquis general:

Hay docenas de bocetos prediseñados y parecen abarcar todo lo que podamos necesitar en un proyecto relacionado con las multimedia: páginas web, redes sociales, reproductores…

Muchos de estos elementos son editables en algunos de sus aspectos. Por ejemplo este…

…presenta un cuadro de opciones como este…

…con el que podemos conseguir resultados tan dinámicos (casilla activada, por ejemplo) como este:

Usando algunos de estos elementos he creado un boceto de lo que hubiera podido ser la primera idea para crear este blog que tiene usted delante

Se está preparando una versión online de esta herramienta, aunque no parece que vaya a ser gratuita (puede, eso sí, trastear un rato desde esta versión). Yo recomiendo instalarla en su versión freeware de escritorio, aunque ésta tenga alguna limitación. Por ejemplo no permite la exportación a mapa de bits. Yo en eso no veo mucho problema porque con hacer una captura de pantalla puede llegar. Si el proyecto es demasiado grande no quedaría más remedio que juntar las partes en Gimp. También existe la versión con licencia, como es lógico donde ese problema no existe. Otros inconveniente son que cada 5 minutos te recuerda que puedes adquirir la licencia cuando creas oportuno y, el peor de todos, NO PERMITE GUARDAR.

Aspecto positivo: se instaló con un par de clics en Linux/Ubuntu 9.04 desde el instalador online.

Hay posibilidad de conseguir una licencia gratuita si colaboras en proyectos open source, si vas a hacer muestras ante un publico superior a 15 personas, si haces análisis del programa…

Joaclint Istgud portada de El País Semanal…

Joaclint Istgud — Sun, 11 Oct 2009 14:59:43 +0000

Jeje… Al menos eso es lo que puede hacer cualquier usuario desde la plataforma Yo leo el País Semanal donde se puede uno crear su propia portada y compartirla en la galería, Facebook… Es una aplicación totalmente espartana que no hace mucho honor a las cosas que se pueden conseguir con la tecnológía 2.0. En cualquier caso yo ya tengo mi portada ¿Y usted?

La ciencia en España no necesita tijeras…

Joaclint Istgud — Wed, 07 Oct 2009 20:07:04 +0000

No suelo sumarme mucho a este tipo de iniciativas porque, entre otras cosas, suelo enterarme tarde. Pero a esta llego a tiempo y me ha parecido muy interesante y además me viene que ni pintado para comentar un asunto concreto.

Esta iniciativa la he visto en La aldea irreductible y me ha apetecido mucho sumerme.

El tema personal está en que yo me dedico al mundo docente y tengo la suerte de poder impartir asignaturas en Bachillerato de Artes (digo suerte porque este Bachillerato es una rareza educativa, aunque sólo sea por los pocos institutos que lo ofertan).

Me he tirado tres años sacando adelante un asignatura optativa de 2º de Bachillerato llamada Tecnología de la Información: Diseño Asistido por Ordenador. No voy a mencionar la cantidad de trabajo que me supuso porque eso no tiene mérito ya que me pagan por ello…

Y va la Administración este curso y así, sin más, la elimina de un plumazo de la oferta educativa. Con un par. Sin más explicación: Real Decreto con el menú de asignaturas y punto. TIN no estaba. A tomar por c…

Supongo que esto tiene que ver con este empuje del que hablan para fomentar las tecnologías en la educación. Es un parón para coger fuerza; estoy seguro (jeje). Así el año que viene nos la vuelven a poner y con ordenatas de última generación y un portátil (ese que nos han prometido tropecientas veces) para cada profe. Vamos, que estamos que da pena. Pues yo me sumo a este meme en apoyo a la ciencia. Aunque mucho me temo que con “administradores” que se lo hacen con los piés, no vamos muy bien que digamos.