Archive for the ‘ Kompozer ’ Category

Kompozer y Notepad++: Creación de una página web con frames

EDITADO: este tutorial lo escribí cuando no tenía la menor idea de lo mal vistos que están los frames en diseño web. Pensaba que simplemente no eran recomendables pero realmente son muy problemáticos. El camino correcto es el uso de DIVS y CSS…

Ando dándole vueltas a un proyecto y quería que la presentación final fuera en formato HTML navegable para poder entregarlo en CD o DVD e incluso en última instancia colgarlo en internet. Este año realicé un curso en el CNICE titulado HTML: iniciación y  el resultado fue la página Herramientas Freeware para el Diseño. Me sirvió para ordenar conceptos puesto que ya había hecho mis experimentos amateur en esto del HTML. Como consecuencia de aquel curso surguieron algunos de los tutoriales que ahora se encuentran en la categoría de tutoriales de Kompozer.

En aquel curso no se trató el tema de los frames para dividir el espacio en diferentes regiones que actuaran de modo independiente. El caso más habitual es el índice que se mantiene independiente del contenido que se carga en la parte central. De este modo se evita tener que cargar ese índice todas las veces y permite poder aplicarle efectos a las pestañas de dicho índice (por ejemplo que se repliegue un submenú mientras que se carga la página de contenido)

Leyendo los apuntes que se salían del temario me llevé un chasco terrible: Kompozer no admite la etiqueta FRAMESET (la borra en cuanto sales del editor HTML y pasas al editor gráfico) imprescindible para dividir el espacio en regiones. Debe usarse un editor, como puede ser Notepad++, para poder insertarlos.

Sin comprender muy bien el problema (creía que tenía que hacer todo el proyecto desde Notepad++) me puse a buscar un editor freeware (preferiblemente de código abierto) para poder hacer los frames desde una interfaz gráfica. Me topé con Amaya, un editor opensource que tiene la garantía añadida de ser desarrollado directamente por la W3C. En realidad ya lo conocía pero nunca le había prestado atención. Lo descargué y lo instalé pero el chasco fue el mismo. Nada más buscar información me encontré con que la W3C se posiciona en contra del uso de frames (dan problemas a los buscadores y no interpretan siempre bien el botón de retroceso del navegador) y directamente no los incluye como opción en su editor Amaya.

Eso sí el programa ha quedado instalado en mi disco duro porque creo que es un buen motivo para serle infiel a Kompozer (no se extrañe si los siguientes tutoriales los hago para Amaya en lugar de mi querido -por sencillo- Kompozer) Antes me miraré a fondo este curso.

Unas cuantas pruebas me hicieron ver la luz respecto a mi supuesto problema. Sólo tengo que hacer la página index con la distribución de frames con Notepad++ puesto que Kompozer no borra el parámetro TARGET que le dice al programa dónde (en qué frame) debe abrir el enlace. Esto me permite crear las páginas en Kompozer y añadir a mano el TARGET de los enlaces.

Ver tutorial Kompozer y Notepad++: Creación de una página web con frames

Kompozer: Cómo hacer funcionar el efecto Zoomi y sobrevivir para verlo

Si usted domina el tema de los javascript el título le parecerá una exageración… Este es un tutorial dirigido a todos los demás.

He incluido la explicación en el apartado de Kompozer pero es cierto que se puede hacer desde cualquier otro editor web ya que se trabaja fundamentalmente desde el código.

Hace un tiempo dando un paseo por Xyberneticos me encontré con un artículo sobre un efecto javascript que me resultó más que interesante: el efecto Zoomi. El principal problema eran mis escasos conocimientos del tema. Acababa de iniciarme (y sigo en ello) en el asunto del HTML y del CSS pero yo quería hacer funcionar aquello. Con la descripción que allí aparecía, un principiante como yo, no tenía nada que hacer así que busqué algo más de información. Encontré varios sitios (docenas) que trataban el tema pero todos se habían limitado a copiar el artículo de Xyberneticos. Un poco cabreado dejé en Tutula el siguiente comentario:

Con respecto a este asunto de Zoomi todo el mundo que ha escrito sobre el tema se ha dedicado a Copiar/Pegar el artículo de Xyberneticos pero nadie se ha molestado en añadir alguna explicación más. Yo con esos datos no hago nada de nada.

A pesar del tono de cabreo Ruy (el administrador) se molestó en contestar y a ofrecerme cuanta ayuda me fuera necesaria (en ese momento él no sabía el nivel de inutilidad que me avalaba)
Prácticamente todo lo que se incluye en el tutorial es un resumen de las ayudas que fui recibiendo de él para poder ver funcionar el efecto Zoomi en mi portafolio.

En mi desesperación le dije:

Si salgo de esta pienso publicar un tuto con todo lujo de detalles sobre el asunto que se titule “Como hacer funcionar Zoomi y sobrevivir para verlo”

Y, aunque un poco tarde, aquí está.

ver tutorial Kompozer: Cómo hacer funcionar el efecto Zoomi y sobrevivir para verlo

Kompozer: insertar y editar un iframe

Aquí regreso con una memoria, más que tutorial, de mis investigaciones a la hora de aprender a insertar un iframe en un apágina web.

Los que me leen saben que para este tipo de aprendizaje (diseño web) uso un método basado en obtener un código con alguna otra herramienta y después investigar con él en Kompozer (del que últimamente no funciona la web oficial) En esta ocasión he usado una herramienta online de Scriptomizers diseñada precisamente para insertar iframes en la web.

En esta memoria cuento cómo trabajé con el código en HTML y algunas de mis primeras investigaciones para editarlo desde CSS con Kompozer.

Ver tutorial Kompozer: insertar y editar iframes

Kompozer: Creación de un menú dinámico (no desplegable) con el editor CSS

Después de mucho darle al coco he conseguido hacer un menú dinámico (sin desplegables) desde el editor visual de CSS de Kompozer. Desde Css Menu Maker (aplicación online para crear menus dinámicos -sensibles a la posición del ratón- y desplegables) creé un menú con objeto de obtener un códogo que me sirviera de guía. Vaya por delante que no soy un experto en CSS sino un autodidacta recién llegado pero ya voy sabiendo algunas cosillas. Utilizo un sistema de aprendizaje basado en analizar códigos generados por una herramienta como Css Menu Maker.

En Kompozer hago variaciones en los valores y aprendo los nombres de los Selectores y sus parámetros. No es un método muy académico pero de momento me está dando buenos resultados.

El tutorial que le presento a continuación es una especie de memoria sobre el proceso que seguí para conseguir uno de esos menús. Si hace la práctica y experimenta durante el proceso puede hacer muchos avances en sus conocimientos.

Ver tutorial Kompozer: Creación de un menú dinámico (no desplegable) con el editor CSS

Kompozer, NVU y Mozilla Composer: Configurar el fondo de la web con CSS

Si ya conoce la interfaz de Kompozer y su editor visual de HTML es posible que se pregunte cómo puede hacer para que una imagen de fondo no se repita con efecto mosaico a lo largo de toda la página o cómo hacer que la imagen permanezca fija aunque haga un scroll.

Las configuraciones de fondos que no sean como la descrita debe hacerlas desde el editor CSS de un modo similar al que ya le expliqué en este otro tutorial para eliminar los subrayados en los textos enlazados.

Ver tutorial Kompozer, Nvu y Mozilla Composer: Configurar el fondo de la web

Kompozer, NVU y Mozilla Composer: Eliminar el subrayado de los textos enlazados y otras ediciones CSS

Es muy posible que en la creación de una página con un toque personal haya querido editar las características de los textos vinculados que por defecto aparecen azules y subrayados. Cambiar el color es sencillo en Kompozer puesto que tiene un cuadro para ello al que se accede desde la línea de comandos Formato/Fondo y colores de la página…

Pero, ¿qué ocurre con el subrayado? Ahora que estoy empezando a hincarle el diente al HTML y al CSS puedo explicarle cómo hacerlo.

Ver tutorial Kompozer: Eliminar el subrayado de los textos enlazados y otras ediciones CSS

Enlaces internos en Kompozer, NVU y Mozilla Composer

En una página web solemos utilizar enlaces que llevan a otras páginas, bien sean de nuestro propio lugar o exteriores a él; también enlaces de correo o para descargas (bajar un EXE o un PDF por ejemplo) Pero existen unos enlaces llamado INTERNOS que se utilizan para organizar la navegación en páginas que incluyen mucha información haciendo que la “hoja” sea muy larga.
En ese caso es habitual facilitar la navegación al usuario mediante un índice inicial y la inclusión de los enlaces internos que son el motivo de este tutorial.

Ver tutorial Enlaces internos en Kompozer, NVU y Mozilla Composer