Archive for the ‘ Kompozer ’ Category

Kompozer 0.8a4: El nuevo entorno de trabajo

Ha pasado mucho tiempo desde que Kompozer no daba un paso adelante. A parte de cuatro mejoras aquí y allá, la corrección de bugs no daba para más y la 0.7.10 parecía haber quedado en punto muerto; sobre todo después de comprobar que no funcionaba correctamente en Ubuntu Intrepid, Fedora 10… por el hecho de estar basado en un Gecko muy antiguo.

Pero mira tú por dónde nos aparecen ahora con una 0.8a4 (a la espera de la definitiva versión estable) que es bastente sorprendente. Por un lado pone remedio a la incompatibilidad con las versiones más novedosas de las diferentes distros de Linux mientras que, por otro, se pueden ver varios avances dirigidos a facilitar la edición a los diseñadores y que convierten a Kompozer en una herramienta libre ideal tanto para diseñar webs como para usarla para el aprendizaje del HTML y CSS.

En el proyecto NAVE ya se han puesto las pilas y podemos descargar el XPI para tenerlo en español. Recuede descargar el archivo con el botón derecho del ratón y después instalarlo como Complemento en el menú Tools.

Este es el nuevo aspecto de Kompozer para la 0.8

asedr

La primera gran novedad la encontramos en la barra de iconos

html

El nuevo kompozer le va a permitir abrir directamente el archivo un editor externo como Notepad++

Para que se abrá el programa correspondiente al pulsar el botón  debe ir a Herramientas/Opciones y en la sección Aplicaciones activar primero Aplicación:Editor de Textos y acto seguido marcar la ruta al programa en Usar aplicación personalizada.

aplic

Ahora al pulsar el icono se abrirá Notepad++ (es el que escogí yo) con el documeto para ser editado.

Si el documento es alterado Kompozer nos mandará un mensaje de advertencia para saber si debe o no considerar esos cambios:

confirmar

Sin duda una importante novedad para los diseñadores más avanzados a los que les gusta tener mucho control sobre el código generado.

Otra importante novedad para optimizar el flujo de trabajo es la posibilidad de tener una visión simultánea de la parte gráfica y del código HTML del elemento que estemos editando en ese momento. Las pestañas Diseño, Dividir y Código fuente se encargan de permitir esa flexibilidad.

dividirEn principio este código se muestra como siempre, con la etiquetas en color, pero al hacer clic podemos entrar a editar cambiando la estética a un texto plano como el de la captura de arriba.

En los dos modos de visión del código HTML tenemos menú contextual haciendo clic derecho con opciones del tipo

  • Ajustar líneas
  • Tamaño de la fuente

La navegación por el Administrador de sitios (Ver/Mostrar-ocultar/Administrador de sitios) es interesante y permite discriminar por:

  • Todos los archivos
  • Documetos HTML
  • Hojas de estilo CSS
  • Archivos de imágenes
  • Archivos multimedia
  • Archivos de texto

administrador

En la versión 0.8a4 aún no está operativa la administración de sitios Remoto pero se espera su funcionalidad para la versión estable.

En esta misma ventana se puede hacer visible el cuadro DOM (abajo del todo) a la vez que se oculta el Administrador de sitios.

dom

Permite una navegación fenomenal por los distintos “objetos” ya que haciendo clic en uno de ellos se produce el scroll necesario para que aparezca en la parte gráfica y así poder editarlo con facilidad. Además haciendo doble clic sobre cualquiera de las etiquetas se accede al cuadro Editor avanzado de propiedades para poder añadir una class, una id… con mucha rapidez.

avanzado

En definitiva: un gran avance que hace resurgir las esperanzas puestas en el sucesor no oficial de NVU.

Descargas desde la wed del desarrollador.

(busque en la sección Downloads)

Kompozer: DIVs desde el editor visual

Cuando acababa de hincarle el diente a Kompozer como quien dice y me animé a practicar con los DIVs me pareció que lo mejor era crearlos desde el editor de código ya que no tenía idea de cómo hacerlo desde el editor visual y en ese momento no le dediqué el tiempo necesario.
Ahora sé unas cuantas cosas sobre la edición de DIVs desde el editor visual de Kompozer y las comento en este breve tutorial.

Gimp y Kompozer: Crear e integrar un mapa de imagen en una web

A veces necesitamos crear enlaces en zonas de una imagen y no queremos enredarnos a crear botones. Gimp permite seleccionar las zonas que actuarán como vínculos y nos permitirá editar todo lo necesario, como el destino de ese enlace, para poder obtener el código necesario para su perfecta integración en el diseño de nuestra página (que nosotros crearemos con Kompozer). Este proceso se denomina Mapa de imagen.

Es un recurso más que conviene tener en cuenta. Nada espectacular, eso sí, pero nunca se sabe cuándo puede ser útil.

kompozer: Efecto sello en imágenes usando CSS

Una de la mejores maneras de pasar un rato navegando y aumentar mucho las posibilidades de encontrarse algo interesante para aprender es visitar el sitio de Xyberneticos (ya sé que no estoy descubriendo ahora las Américas pero por si acaso no lo conoce…)

Allí me encontré unas líneas de código de CSS que dan a una imagen un efecto de sello y con las que me puse a experimentar un poco. Nada espectacular desde luego pero es un bonito ejercicio para los que se estén iniciando en el CSS.

Ya sabe que siempre que hago este tipo de ejercicios procuro usar todo lo posible el editor gráfico de hojas de estilo integrado en Kompozer.

Ver tutorial  Kompozer: Efecto sello en imágenes usando CSS

Kompozer: rectángulos con esquinas redondas usando CSS

Buscando utilidades online encontré una denomina ROUNDCSS y que permite crear esquinas redondeadas en rectánguros recurriendo a CSS.

La aplicación genera el HTML (incluye el CSS) y los PNGs necesarios para poder obtener el resultado.Todo ello puede descargarse en un solo archivo ZIP.

Las ventajas de esto son variadas pero fundamentalmente son dos:

  • Si hacemos un único bitmap para el rectángulo éste no podrá ser editado en su ancho y en su alto para adaptarse al sitio web o a la longitud del texto o lista que incluya.
  • Con este método se ahorra tiempo de carga ya que se usan sólo bitmaps para las esquinas.

El asunto de este tutorial es conseguirlo desde Kompozer usando en la medida de lo posible el editor gráfico de CSS.

Ver tutorial Kompozer: rectángulos con esquinas redondas usando CSS

Kompozer: rectángulos con sombra usando etiquetas DIV y algo de CSS

Hace un tiempo paseando por el extraordinario sitio Leandono´s blog me encontré con un artículo en el que se mostraba la posibilidad de crear un efecto de sombra en rectángulos usando etiquetas DIV y algo de CSS. El resultado no es ni mucho menos espectácular pero merece la pena considerarlo si queremos hacer una página sin imágenes y aligerar tiempos de carga.

Sea como sea cuando vi aquello me dije que eso lo tenía que hacer yo usando el editor de CSS de Kompozer. Después de un ratillo dándole a los dedos comprobé que el tema no guarda mucha dificultad. Así que lo que aquí pongo es un tutorial en el que desarrollo la misma idea del artículo mencionado pero usando el editor visual de CSS de Kompozer y parándome a explicarle con algo más de profundidad algunos de los detalles.

Ver tutorial Kompozer: rectángulos con sombra usando etiquetas DIV y algo de CSS

Kompozer: Layout sencillo con etiquetas DIV y CSS

Han pasado unos días desde que publiqué mi tutorial para crear páginas web mediante el uso de las etiquetas FRAMESET y los consecuentes FRAMES. Una vez advertido de lo erróneo del método me puse manos a la obra para conseguir el mismo fin mediante etiquetas DIV y su edición desde CSS.

De momento he llegado a conseguir hacer el layout con este método y todo ha salido perfectamente; es por eso que ofrezco ya la memoria-tutorial. He usado Kompozer para toda la creación. El editor de CSS de este software me resulta de lo más agradable.

Espero en unos días ser capaz de crear el menú y hacer que los diferenctes enlaces se abran en el DIV del contenido. Nada más que lo tenga lo publicaré en su correspondiente tutorial.

EDITADO: este asunto de crear una página web haciendo que los enlaces del menú se abran en diferente región se está complicando y si no me cree eche un vistazo a los comentarios de este post… Al parecer es obligatoria la recarga de toda la página (algo así como con las tablas) si sólo se quiere usar HTML.

Ver tutorial Kompozer: Layout sencillo con etiquetas DIV y CSS