ESCRIBIR TEXTO EN KOMPOZER

Las etiquetas "de entrada" HTML son los camaleones de Internet. Según el atributo que das en el código, pueden convertirse en cualquier cosa, desde un botón a un cuadro de texto. KompoZer, un editor visual de páginas HTML, esconde la complejidad del código HTML y permite crear elementos tales como cuadros de texto rápidamente. Basta con hacer clic en algunos botones e introducir algunos valores para que el programa añada un nuevo cuadro de texto personalizado a un documento HTML.

Instrucciones:

1. Inicia KompoZer y pulsa "CTRL" y "N" para abrir una ventana de diálogo. Haz clic en "Crear" para crear un nuevo documento HTML. Este documento aparece en la ventana de edición.
2. Haz clic en "Normal" en la parte inferior de KompoZer para colocar el programa en modo de diseño. Haz clic en cualquier lugar dentro del documento y escribe: "Esto es una prueba". El cuadro de texto que añadas aparecerá debajo de este texto.
3. Haz clic en "Insertar" y haz clic en "Formato" y luego haz clic en "campo de formulario". En "Propiedades de campo de formulario" se abre una ventana de diálogo. Esta ventana te permite configurar un cuadro de texto y definir sus propiedades.
4. Haz clic en botón desplegable "campo tipo" y haz clic en "Texto". Escribe un nombre para el cuadro de texto en el "Nombre_de_campo" y escribe "Hola" en la caja "Valor inicial".
5. Escribe "100", sin las comillas en la caja "Tamaño del campo". Esto le ordena a los navegadores crear un cuadro de texto para 100 caracteres de ancho. Haz clic en "Aceptar". KompoZer coloca un nuevo cuadro de texto que contiene la palabra "Hola" por debajo del texto que has escrito en la página.
   
6. Haz clic en "Fuente" para ver el código fuente HTML. Verás una nueva etiqueta de "Entrada" que define el cuadro de texto. El cuadro de texto es de 100 caracteres de ancho. Agrega cuadros de texto adicionales al documento siguiendo estos pasos.

 
 

EDITOR DE PÁGINAS WEB KOMPOZER

1) INSTALACIÓN

2) CREAR LA ESTRUCTURA DE CARPETAS

3) ABRIR EL PROGRAMA

4) GUARDAR LA PÁGINA WEB

5) CERRAR EL PROGRAMA

6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER

7) COMPLETAR LA INFORMACIÓN SOBRE LA PÁGINA

8) CONOCER EL CÓDIGO HTML

9) PONER UN COLOR DE FONDO

10) PONER UNA IMAGEN DE FONDO

11) DESCARGAR FONDOS DE INTERNET

12) ESCRIBIR TEXTO

13) VER LA PÁGINA WEB EN EL NAVEGADOR

14) INSERTAR IMÁGENES

15) ALIGERAR EL PESO DE LAS IMÁGENES

16) INSERTAR RÓTULOS FONTWORK

17) INSERTAR RÓTULOS FONTWORK SOBRE UNA IMAGEN

18) INSERTAR UNA BARRA HORIZONTAL

19) ENLACES INTERNOS

20) ENLACES EXTERNOS

21) USO DE LISTAS NUMERADAS O VIÑETAS

22) INSERTAR UNA TABLA

23) CREAR UNA TABLA DE IMÁGENES EN MINIATURA (Thumbnails)

24) INSERTAR UN ARCHIVO DE VÍDEO

25) INSERTAR VÍDEOS DE INTERNET

26) INSERTAR ANIMACIONES FLASH

27) ALINEAR UN OBJETO (vídeos, animaciones flash, etc).

28) SONIDO DE FONDO PARA LA PÁGINA WEB

29) FAVICON PARA LA PÁGINA WEB.

ALOJAMIENTO DE LAS PÁGINAS EN UN SERVIDOR WEB

 1) INSTALACIÓN - Kompozer es un editor gráfico de HTML de tipo WYSIWIG (What You See Is What You Get "lo que ves es lo que obtienes"). - Esta basado en Nvu que fue la continuación de Mozilla Composer. - Podemos descargar el paquete debían (.deb) con la última versión estable desde la web http://kompozer.net. También hay que descargar el paquete de idiomas. - Nosotros usamos una versión ejecutable desde una carpeta, que ya viene en español. - También puede descargarse la versión para Windows y el paquete de idiomas. Para cambiar el idioma, abrir el programa > ir a menú Tools > Extensions > Install > seleccionar el archivo kpz-langpack-esES.xpi > Abrir > Install Now > cerrar la ventana y el programa > abrir el programa y comprobar que está en español.

2) CREAR LA ESTRUCTURA DE CARPETAS - En la carpeta personal crear la carpeta sitios web. - Dentro de ella, crear la carpeta con el nombre del tema tratado en el sitio. En esta carpeta guardaremos las páginas web del sitio. La página web debe llamarse index.html y si el sitio web contiene varias páginas, éste debe ser el nombre de la página principal. - Dentro de la carpeta anterior, crear las carpetas archivos e imágenes_originales. En la carpeta archivos guardaremos las imágenes aligeradas, vídeos, pdf, archivos de sonido, etc. En la carpeta imágenes_originales guardaremos las imágenes descargadas.

3) ABRIR EL PROGRAMA - Situar la carpeta kompozer dentro de la Carpeta personal y re nombrarla para ponerla oculta (.kompozer). - Editar los menús de Aplicaciones para crear el enlace hacia el programa, dentro del grupo de Internet. - Abrir el programa desde el menú Aplicaciones > Internet > Kompozer. - Cerrar el consejo. - La primera vez, cerrar la columna lateral izquierda "Administrador de sitios".

 4) GUARDAR LA PÁGINA WEB - Ir a menú Archivo > Guardar como > teclear lo que queramos que aparezca en la barra de títulos de la página web > Aceptar > elegir la carpeta de destino > teclear el nombre del archivo, que debe ser index.html, manteniendo la extensión html. Si el sitio tiene varias páginas, la primera página debe llamarse index.html > Aceptar. - Los nombres de los archivos de un sitio web no deben superar los 8 caracteres, las letras deben ser minúsculas sin ñ y no deben tener espacios, acentos, puntos u otros signos de puntuación.

5) CERRAR EL PROGRAMA - Clic sobre la equis de la esquina superior derecha.

6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER - Abrir el Kompozer. - Ir a menú Archivo > Abrir archivo o le damos al botón Abrir. - Elegir el archivo html que estará en la carpeta que habíamos creado > Abrir.

 7) COMPLETAR LA INFORMACIÓN SOBRE LA PÁGINA - Menú Formato > Título y propiedades de la página > comprobar como está relleno el título que sale en la barra de títulos. Completar el nombre del Autor y una breve Descripción sobre el tema de la página web > Aceptar. - Observar que desde aquí podemos cambiar el juego de caracteres de la página (charset).

8) CONOCER EL CÓDIGO HTML - En la parte inferior, clic sobre la pestaña Código fuente. Observar la estructura de la página: Doctype y html que agrupa a head y body. - Observar como en la parte head aparece el charset, el título (title), y las etiquetas meta con el autor y descripción que hemos puesto antes.

9 ) PONER UN COLOR DE FONDO - Darle al botón de los 2 rectángulos de colores. El primer rectángulo es para el color del texto y el segundo para el color del fondo, así que le damos a éste. - Elegir el color que queramos, el nuevo color debe ocupar el cuadrado inferior, si no es así hacer clic sobre la barra de color horizontal, conviene usar algún color predefinido ya que será visible de igual forma en todos los navegadores > Aceptar.

10) PONER UNA IMAGEN DE FONDO - Guardar la imagen que queramos poner de fondo, en la carpeta archivos, que habíamos creado dentro de la carpeta del sitio. - Menú Formato > Colores y fondo de la página > Usar colores personalizados > Imagen de fondo > en la carpeta, elegir la imagen > Aceptar. - Observar que si la imagen es más pequeña que el tamaño de la página, se repetirá hasta ocuparla por completo (mosaico).

11) DESCARGAR FONDOS DE INTERNET - Entrar en la página www.areas.net/colorvivo > apartado Fondos > clic sobre el número de fondo > clic derecho > Ver imagen de fondo > clic derecho > Guardar imagen como > elegir la carpeta de destino (archivos) > Guardar.

12) ESCRIBIR TEXTO - El color del texto se selecciona con el botón de los 2 rectángulos haciendo clic sobre el rectángulo superior. - El tipo de letra se selecciona desde el menú Formato > Tipo de letra. Es conveniente elegir una letra de tipo sans-serif (sin tacón) como la Arial. Otra alternativa es utilizar el menú desplegable que está a la izquierda de los botones de formato de texto - El tamaño de las letras primero lo elegimos desde el menú Formato > Tamaño. Escribimos una letra y luego podemos afinar el tamaño dándole a los botones de aumento o reducción de tamaño. - La letra negrita la tenemos con el botón . La letra cursiva con el botón El subrayado lo conseguimos con el botón - Dependiendo de la jerarquía del texto a escribir, podemos conseguir un formato de texto automático al utilizar el menú desplegable - La alineación del texto se hace con los botones correspondientes de izquierda, centrado, derecha o justificado - Cuando pegamos un texto procedente de una página web puede interesarnos eliminar los enlaces que tenga, para ello se selecciona el texto y vamos a menú Formato > Elimina enlaces internos y Eliminar enlaces. - Si el cursor no aparece en la zona que queramos, ir a la pestaña Código fuente y poner un salto de línea
después de la última capa.

13) VER LA PÁGINA WEB EN EL NAVEGADOR - No es recomendable usar la pestaña inferior Vista preliminar, porque a veces no se corresponde con la visualización en el navegador. - Otra opción es darle al botón . A veces se bloquea el navegador. - Lo mejor es abrir el archivo html haciendo doble clic sobre él. Una vez abierto el navegador, lo minimizamos para seguir trabajando con el Kompozer. - Cuando modifiquemos la página desde el Kompozer, le damos al botón Guardar y luego maximizamos el navegador, dándole al botón de Recargar la página o teclear F5.

 14) INSERTAR IMÁGENES - Antes de insertar una imagen debemos guardar el archivo del Kompozer. - Guardar las imágenes dentro de la carpeta imagenes_originales, que está en la carpeta del sitio. - Le damos al botón > hacemos clic sobre el botón de la carpeta para elegir el archivo de la imagen > Abrir > rellenar el espacio de Titulo emergente, que será lo que aparezca al pasar el ratón por la imagen > rellenar el espacio de Texto alternativo, que es lo que aparece antes de que se descargue la imagen > Aceptar. - Por defecto el programa considera a la imagen como un carácter, por ello si queremos escribir a la izquierda o la derecha de la misma hacemos doble clic sobre la imagen > pestaña Apariencia > en Alinear el texto con la imagen podemos elegir Fluir por la izquierda o Fluir por la derecha > Aceptar. - Para centrar la imagen, colocarla a la izquierda o a la derecha de la página, le damos a los mismos botones de alineación de texto, pero el texto no debe estar alineado con la imagen como Fluir por la izquierda o Fluir por la derecha.

15) ALIGERAR EL PESO DE LAS IMÁGENES - Si vamos a insertar la imagen en el Kompozer con su mismo tamaño o la aumentamos con clic y arrastre sobre los marcadores, antes de insertarla, debemos aligerarla reduciendo su calidad con el programa gThumb. Se explica más adelante. - No debemos disminuir el tamaño de las imágenes desde el Kompozer sino con el programa gThumb, de esta forma reducimos el peso de la imagen al disminuir su tamaño (escalado) y su calidad (ponerla en 60). - Con el Kompozer, insertar la imagen en el sitio que queramos. La imagen debe estar en la carpeta imagenes_originales. Ajustar el tamaño de la imagen con clic y arrastre. - Doble clic sobre la imagen > pestaña Dimensiones > tomar nota de la Anchura y Altura de la imagen. - Borrar la imagen del Kompozer. - Clic derecho sobre la imagen > Abrir con "Visor de imágenes (gThumb)". Ir a menú Herramientas > Escalar imágenes > poner el ancho y alto anotados > botón Escala > fijar la calidad en 60 > Aceptar > ponerle un nuevo nombre > Aceptar. - Cortar la imagen escalada para pegarla en la carpeta archivos. - Volver al Kompozer e insertar la imagen escalada de la carpeta archivos, en el sitio deseado.

16) INSERTAR RÓTULOS FONTWORK - Abrir el programa de Dibujo de OpenOffice (Draw). Ir a menú Formato > Página > pestaña Página. Poner la página de un tamaño igual al del rótulo, por ejemplo Ancho de 25 cm y Altura de 5 cm. Poner los Márgenes a 0 cm. En la pestaña Fondo establecer el color, que podrá ser igual que el color de fondo del Kompozer, en este caso el color debe tener el mismo código. También podemos elegir, como fondo del rótulo, un Mapa de bits, que es una imagen que también podemos utilizar como fondo de la web en el Kompozer (ver carpeta recursos_web/fondos/openoffice).

17) INSERTAR RÓTULOS FONTWORK SOBRE UNA IMAGEN - Abrir el programa de Dibujo de OpenOffice (Draw). Ir a menú Formato > Página > pestaña Página. Poner la página de un tamaño igual al del rótulo, por ejemplo Ancho de 25 cm y Altura de 5 cm. Poner los Márgenes a 0 cm - Insertar la imagen aligerada y modificar su tamaño con clic derecho sobre la imagen > Posición y tamaño (debe tener el mismo Ancho y Altura que la página). Arrastrar la imagen para que coincida con la página. - Crear el rótulo Fontwork encima de la imagen. - Para que el rótulo quede centrado, hacer clic derecho sobre rótulo > Alineación > Centrado (en vertical y horizontal). - Menú Archivo > Exportar > como carpeta de destino elegir archivos, dentro de la carpeta del sitio web > teclear el nombre del archivo > en Formato de archivo, elegir JPEG > Exportar > Calidad 60 > Aceptar. - Cerrar OpenOffice Draw sin guardar el archivo. - La imagen exportada se inserta en el Kompozer y se centra.

18) INSERTAR UNA BARRA HORIZONTAL - Menú Insertar > Línea horizontal. Desde el código podemos modificar el ancho (width) y la altura (height). - Otra posibilidad consiste en insertar una barra que tengamos como imagen. Podemos descargarla de la página www.areas.net/colorvivo > apartado Barras.

19) ENLACES INTERNOS - Situamos el cursor en el punto que sea el destino del enlace > le damos al botón > tecleamos el nombre (no debemos usar mayúsculas, acentos, espacios, ni signos de puntuación) > Aceptar. Observar como aparece un ancla. - Seleccionar el texto o imagen que vaya a ser el enlace > le damos al botón > clic sobre la flechita hacia abajo > elegir el destino del enlace interno > Aceptar.

20) ENLACES EXTERNOS - Seleccionar el texto o imagen que vaya a ser el enlace > le damos al botón > en Ubicación del enlace escribir la dirección completa de la página web (http://) > Aceptar. - Si el enlace es a un archivo o pagina web de nuestro sitio, le damos al botón de la carpeta y elegimos el archivo > Aceptar. - Si el enlace es un correo electrónico, tecleamos la dirección del mismo > marcamos la casilla Lo anterior es una dirección de correo electrónico > Aceptar. - Por defecto los enlaces se abren en la misma pestaña que la página, por tanto para volver a ella debemos darle al botón Atrás del navegador. Si queremos que el enlace se abra en una nueva pestaña sólo tenemos que hacer clic sobre la casilla que lo indica, en este caso, una vez abierto el enlace, para volver a nuestra página le damos al botón Cerrar del navegador. - Si queremos cambiar los colores que vienen por defecto para los enlaces, ir a menú Formato > Colores y fondo de la página > Usar colores personalizados > darle a los botones de los colores de los enlaces.

21) USO DE LISTAS NUMERADAS O VIÑETAS - Antes de escribir la lista numerada o con viñetas le damos al botón correspondiente. - Cuando hayamos terminado con la lista, le damos otra vez al mismo botón. - Para descender un nivel le damos a la tecla del [Tabulador]. - Para aumentar un nivel le damos a la tecla del [May] + [Tabulador].

22) INSERTAR UNA TABLA - Clic sobre el botón > pestaña Preciso > poner el número de Filas y Columnas, en el Anchura poner 100 % píxeles. El ancho de las celdas se adapta al contenido. - Tabla de igual ancho de columna: multiplicar el ancho de la columna mayor por el número de columnas, este número será la anchura total de la tabla. Para que la tabla alcance este ancho total, debemos arrastrar el primer marcador de la derecha hasta que el ancho de la primera columna de la derecha sumado al ancho de las restantes columnas, nos dé el ancho total de la tabla. Por último arrastramos los restantes marcadores empezando por el segundo de la derecha, hasta conseguir que todas las columnas tengan la misma anchura que la columna mayor. - Situación de la tabla: clic sobre una celda de la tabla > clic sobre el botón > pestaña Tabla > en el apartado Alineación de la tabla, elegir uno. - Ancho de los bordes: clic sobre una celda de la tabla > clic sobre el botón > pestaña Tabla > poner los píxeles para el Borde, Espaciado y Relleno. - Color de toda la tabla: clic sobre una celda de la tabla > clic sobre el botón > pestaña Tabla > clic sobre Color de fondo para elegirlo. Otra alternativa es con clic derecho sobre la tabla > Color de fondo de la tabla o celda. Si luego ponemos un color para las celdas, el color de la tabla quedará para el borde y el espaciado. - Color de las celdas: seleccionar las celdas con clic y arrastre o haciendo clic sobre ellas manteniendo pulsada la tecla [Ctrl] > clic sobre el rectángulo inferior > elegir el color > Aceptar. Otra alternativa es con clic derecho sobre la tabla > Color de fondo de la tabla o celda. - Alinear el contenido dentro de las celdas: seleccionar las celdas > darle a los botones de alineación de texto - Unir celdas: seleccionar las celdas > clic derecho Unir celdas seleccionadas. - Borrado de tabla, filas, columnas o celdas seleccionadas: clic derecho > Eliminar tabla > elegir la opción que queramos.

23) CREAR UNA TABLA DE IMÁGENES EN MINIATURA (Thumbnails) - Insertar una tabla. En cada celda insertar una imagen > en la pestaña Dimensiones de la imagen, fijar el ancho que debe tener la miniatura, que será igual para todas > en la pestaña Apariencia, en el apartado Alinear el texto con la imagen, elegir En el centro. - Crear un enlace desde cada miniatura hacia las imágenes aligeradas que están en la carpeta archivos. NO marcar la casilla Mostrar el borde alrededor de la imagen con enlace. - Alinear la tabla en el centro o a la derecha. - Podemos añadir color a las celdas y a la tabla (borde).

24) INSERTAR UN ARCHIVO DE VÍDEO En el body, insertar, por ejemplo el siguiente código: Donde avion.flv es el nombre del vídeo de ejemplo, que está dentro de la carpeta archivos. Height es la altura y width el ancho. Para ver los vídeos es necesario tener instalado el mozilla-mplayer.

25) INSERTAR VÍDEOS DE INTERNET En el body, pegar el código que hemos copiado de la web donde está alojado el vídeo. En alguna páginas como youtube, podemos personalizar el código variando el tamaño del vídeo, el color de los controles de reproducción, el borde y si queremos que aparezcan vídeos relacionados. Si la página no permite personalizar el código, podemos variar su tamaño según el número que pongamos para el ancho (width) y la altura (height).

26) INSERTAR ANIMACIONES FLASH En el body, insertar, por ejemplo el siguiente código: Donde engranajes.swf es la animación que está dentro de la carpeta archivos. Height es la altura y width el ancho.

27) ALINEAR UN OBJETO (vídeos, animaciones flash, etc). - Debemos teclear lo siguiente, antes del código del vídeo o animación flash: para alineación centrada. Para alineación derecha. Debemos teclear lo siguiente, después del código del vídeo o animación flash:

- Si con el código anterior no se consigue el centrado, probar con: y después del código.

28) SONIDO DE FONDO PARA LA PÁGINA WEB - En la parte inferior le damos la pestaña Código fuente. - Antes de la etiqueta .

http://www.desarrolloweb.com/articulos/kompozer.html