Posts Tagged ‘ Kompozer ’

Bluegriffon: el definitivo editor de páginas web de Glazman

La nostalgia por el viejo editor open source de páginas web NVU acabó en el intento de continuar con KompoZer, un desarrollo derivado (fork) por parte de Fabien Cazenave. El proyecto ha debido caer nuevamente en estancamiento (a pesar del tuneado que le han dado a la web oficial) lo cual me apena bastante ya que en su momento hice una pequeña aportación en el proceso de renovación del logotipo.

Pero sin duda, la nueva apuesta de Glazman (programador del viejo NVU) cumplió con todas las expectativas y demostró que iba en serio cuando decía que Bluegriffon dejaría en pañales NVU, KompoZer y todo lo que se le pareciera.

Yo no hago muchas cosas relativas a web pero por ejemplo ahora estoy culminando un curso sobre Blender con el contenido en HTML, CSS… me he animado a probar Bluegriffon y lo tengo claro: dudo que vuelva a ejecutar KompoZer.

El editor de CSS es una maravilla aunque existe un editor CSS PRO (€) que debe ser impresionante teniendo en cuenta que ya el editor integrado es fantástico. Cuando te encuentras con la posibilidad de usar fuentes del directorio de fuentes de Google y de Font Squirrel de una manera sencilla, las novedades de CSS3 (sombras y asuntos similares) comienzas a comprender aquello que decía Glazman…

Es compatible con HTML5 y permite edición de SVG sin salir del programa; esto último gracias a la integración de SVG Edit (aquí la versión online). Y si le añades que está en español…

Conclusión: a partir de ahora estoy seguro de que los tutoriales que publique  sobre diseño web utilizarán Bluegriffon como software. Es más… creo que lo mismo me animo y adapto los viejos tutos de KompoZer a este otro sorprendente editor web y así lo uso como excusa para ir probando más cosas.

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.

Web para Vila Do Alba

En estos últimos días he estado trabajando en el remate final de un diseño web para el hotel Vila Do Alba.

Está completamente creada y maquetada con KompoZer e incluye el bonito Piezemaker 2 (open source) para la presentación dinámica de las galerías de imágenes.

Me costó un buen rato hacerlo funcionar a mi gusto, editando el archivo XML y todo lo demás, pero al final quedó como yo quería.

Bueno… si se da un paseo por la web, espero que le guste 🙂

Tip del martes, con Aldo

Testado en Kompozer 0.8b3 y escrito con Aldo.

Página web para Autoescuela Montecarlo de El Barco de Valdeorras

Ya he terminado uno de los proyectos que tenía entre manos. En esta ocasión se trata de la elaboración de una web para Autoescuela Montecarlo El Barco. Cabe destacar que en esta ocasión he usado para la galería de imágenes de la página de inicio un javascript llamado A simple jQuery Slideshow de Jon Raasch que, como es lógico necesita a su vez del javascript jQuery.

Toda la web está creada con Kompozer, en esta ocasión he usado la 0.8b1 porque con la 0.8b3 no veo la forma de que vaya en mi Ubuntu Karmic Koala; eso sí, la 0.8b1 va genial.

Lo más destacado en este proyecto es que a nivel gráfico he trabajado a tope con Blender; desde la creación de una versión 3D del logo inicial de Autoescuela Montecarlo El barco, hasta la galería de vehículos representativos del los diferentes permisos y certificados de conducción que se ofrecen.

Después de vectorizar con Inkscape el logo inicial…

…llegó la exportación a Blender. Aquí el problema fue que yo quería, porque ya me he acostumbrado, trabajar desde la versión 2.5 pero aún no se puede importar SVG. Pero fue fácil: importé en Blender 2.49, guardé y abrí en 2.5. luego a  trabajar.

El resultado final aceptado fue este:

La galería de vehículos no fue tan fácil. Hubo mucho trabajo pero, sinceramente, quedé muy satisfecho. La idea fue que todos los vehículos compartieran el color de la carrocería con el color corporativo de la empresa. Estos son algunos de los vehículos que creé

Hay otros 9. Puede usted verlos en esta página.

Como resultado final también hemos creado una tarjeta de visita para sustituir a la antigua y que toma el tono visual de la propia web.

Ahora me han hablado de una web para una armería… Me gusta ese reto. Ya iré contando.

Página web para Casa Goás

Aunque no lo parezca lo del nombre de esta pensión-restaurante es pura casualidad con mi apellido. He desarrollado para ellos una página web de carácter informativo y con la que han quedado muy contentos. Ahora estoy dándole caña a algo de Flash tras realizar el curso para profesores Flash para la enseñanza (la web incluye descarga del material en CD en formato ISO) del ISFTIC y así poder incorporar elementos dinámicos en futuros proyectos. En esta ocasión trabajé al 100% con Kompozer para el HTML, incluí el javascript S3Slider que funciona con JQuery para las galerías fotográficas y los iconos de navegación son pequeñas miniaturas 3D creadas con Blender.