Archive for the ‘ Kompozer ’ Category

KompoZer y Blueprint CSS Framework: Maquetación sencilla a cuatro columnas

En mi navegación por internet buscando temas relacionados con Inkscape me topé con un recurso del que no tenía la más remota idea de su existencia y con el que he quedado maravillado en mi primer contacto.

Blueprint CSS Framework no es un software aunque en la carpeta de descarga incluye algunos javascript a los que en este primer contacto no vamos a prestar atención.

La carpeta llamada blueprint incluye unos CSS prediseñados que debemos enlazar en nuestro HTML. Después tendremos que ocuparnos de crear los contenedores DIV y de darles el class necesario acorde al comportamiento que deseamos.

Lo primero es descargar el ZIP o el TAR.GZ desde la web oficial BlueprintCSS  que una vez descomprimido incluye estos archivos

De todos ellos, tal y como muestra la imagena anterior, sólo nos interesa la carpeta blueprint. La colocamos dentro de la carpeta que tengamos destinada a los CSS de la web que estemos diseñando. Damos por supuesto que esa carpeta se llama css y que está junto al index.html que es la página que vamos a editar

Este orden en la colocación y nombre de los archivos y carpetas es importante para que funcionen las rutas relativas que enlazarán con las hojas de estilo.

Abrimos (o creamos) en KompoZer la página index.html y desde el modo de edición Código fuente insertamos entre <head> y </head> la llamada a la hoja de estilo acorde a las ruta relativa antes mencionada:

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>

Tras guardar (incluso es posible vernos obligados a salir y volver a entrar en KompoZer) para que los cambios tengan efecto y las llamadas a los CSS queden operativas añadimos un simple contenedor genérico

El contenedor se extiende de lado a lado de la interfaz como es lógico. Echando mano del potencial de Blueprint CSS framework nos dirigimos a la parte inferior y con clic derecho sobre la etiqueta <div> nos dirigimos al apartado Clases y escogemos container

Al darle ese class al DIV se le aplican automáticamente varias ediciónes: queda centrado y su ancho es de 950px (muy habitual). Una de las caracteráiticas de Blueprint CSS Framework es que está destinado a webs de ancho fijo y no de ancho líquido. Como esto es un tutorial no me dirijo a Cascades para cambiar el ancho… pero si accedo a su información me encontraré con esto:

Dentro de ese div podemos crear otro con algo de texto…

Y antes de comenzar a editar el ancho de ese nuevo div le aplicamos al div container un class extra de tipo showgrid del mismo modo de antes. Eso se traduce en que aparecen una serie de columnas para ayudarnos visualmente en la maquetación. podemos aplicar este class a cualquiera de los divs.

De nuevo vuelve a aparecer la comodidad de trabajar con Blueprint CSS Framework para elegir el ancho de la columna para el texto. Queremos que ocupe 6 de las 24 columnas; así que sólo tenemos que aplicar a ese div el class span-6

Una de las ventajas de esto es que el div ya queda preparado para añadir contenido flotando por la derecha

Elimino ese texto que he puesto de ejemplo y repito la operación de antes para conseguir cuatro columnas de texto como la primera; es decir con class span-6

¿Qué ha ocurrido?, ¿Por qué la cuarta columna no queda flotando a la derecha de la tercera?. Muy sencillo. Los espaciós que se generan entre columna y columna son consecuencia de que esos divs tienen un margen derecho de 10px. Si el contenedor general midiera 960px todo habría salido bien pero se puerde la esencia de la ayuda visual de las columnas. Para hacer que la última columna se coloque correctamente es necesario decirle al contenedor que tenga un margen derecho de 0px anulando lo anterior.
Para eso le aplicamos un nuevo class a ese contenedor de tipo last con el método que ya conocemos. Si vamos a Cascades podemos ver que last incluye ese valor.

Ahora la maquetación queda así:

Podemos quitar el class showgrid del contenedor en cualquier momento.

Tip del martes, con Aldo

Testado en Kompozer 0.8b3 y escrito con Aldo.

KompoZer: haciendo funcionar el javascript Lightbox

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 <head> y </head> las tres líneas que llaman a los javascripts.

<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>

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 <head> y </head>) la siguiente línea en el código…

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css”

…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 <a> 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 <a> 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

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 (300x263px)

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.

Kompozer: banner extensible con CSS

Una de las partes más características de una web es su cabecera o banner. Éste puede ser de un ancho fijo o medir un tanto por ciento del ancho de la resolución del monitor del visitante. Para este caso necesitamos un banner que actúe como una goma pero sin que se deforme el gráfico.
Aquí lo vamos a hacer con un engaño basado en crear el banner en tres imágenes, de las cuales la del medio es un patrón que se repetite las veces necesacias para unir las dos de los extremos.

El método se basa en CSS aunque también se podría plantear con tablas, pero siempre es mejor tener la posibilidad de hacer un cambio masivo del banner en todas lñas páginas de las que conste la web; y eso con la tabla no sería posible.

Kompozer: Zoom con CSS

Buscando una forma acepatable de conseguir un efecto zoom sólo con CSS  me encontré con Dynamic Drive y el código CSS Popup Image Viewer.

Copiar/Pegar es fácil pero yo tenía otro reto: estudiar eso hasta el fondo para reproducirlo desde el editor de CSS de Kompozer. Y aquí está la memoria-tutorial de mi investigación para que usted también pueda sacar sus conclusiones.

Blender, 3D-No-Plugins y Kompozer: Rotaciones interactivas en web

3DNP (3D-No-Plugins) es una maravilla de script creada por Thorsten Schlüter para poder realizar presentaciones interactivas de carácter sencillo en una web. Permite rotar una escena u objeto con el ratón usando tan sólo javascript; por lo que es seguro que casi el 100% de los visitantes podrá verla. El único inconveniente es el tamaño de las imágenes. Si usamos renders muy grandes el tiempo de carga puede ser estresante. Pero en imágenes pequeñas el asunto funciona divinamente.

Está licenciado con GNU y es totalmente gratuito.

Vamos a crear una escena sencilla con Blender 2.49 (recién salido del horno), después crearemos la secuecia de renders con 3DNP y por último lo insertaremos en un proyecto web con Kompozer 0.8a4 (también recién salidito del horno) Por el camino también usaremos Notepad++

Tengo en mente una cosilla más con 3DNPy ponerla aquí. Lo que me falta ahora es tiempo pero todo se andará…