1. No category

EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO)
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
30) 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 debian (.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 sitiosweb.
- 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 imagenes_originales. En
la carpeta archivos guardaremos las imágenes aligeradas, vídeos, pdf, archivos de sonido, etc.
En la carpeta imagenes_originales guardaremos las imágenes descargadas.
3) ABRIR EL PROGRAMA
- Situar la carpeta kompozer dentro de la Carpeta personal y renombrarla 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
El subrayado lo conseguimos con el botón
. La letra cursiva 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 <br> 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).
PARA TODO TIPO DE RÓTULOS (2D Y 3D):
Clic sobre el botón Fontwork
en la barra de herramientas de dibujo.
Elegir un modelo > Aceptar.
Doble clic sobre el letrero > borrar las letras negras Fontwork y escribir el nuevo rótulo
> clic fuera del rótulo.
Borrar el rótulo: lo seleccionamos y le damos a la tecla [Supr].
Relleno del frente: para cambiar el tipo de relleno hacer clic sobre los botones de la
parte superior derecha.
Sombra: para ponerle sombra, hacer clic derecho sobre el rótulo > Área > pestaña
Sombra > marcar la casilla, elegir la separación y el color de la sombra.
Otras variaciones: al seleccionar el rótulo aparece una barra de herramientas flotante
(Fontwork).
Separación entre letras
Minúsculas con igual altura que las mayúsculas
Contorno de las letras
SÓLO PARA RÓTULOS 2D:
Borde: para cambiar el tipo de línea, grosor y color del borde, hacer clic sobre los
botones de la parte superior izquierda.
De 2D a 3D: un rótulo 2D podemos convertirlo a 3D si, una vez seleccionado, le damos
al botón
SÓLO PARA RÓTULOS 3D:
Los rótulos 3D tienen dos barras de herramientas flotantes: Fontwork y Configuración
3D.
Color de la profundidad
Dirección de iluminación
Ángulo de la perspectiva
Profundidad
Giros de 5º cada vez que le demos a los botones
- Para que el rótulo quede centrado, hacer clic derecho sobre el rótulo > Alineación >
Centrado (en vertical y horizontal).
- Sin tener el rótulo seleccionado, ir a 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.
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:
<embed src="archivos/avion.flv" height="300" width="400" autostart="true"
loop="false"/>
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:
<embed src="archivos/engranajes.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" height="500"
width="450">
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:
<div style="text-align: center;"> para alineación centrada.
<div style="text-align: right;"> para alineación derecha.
Debemos teclear lo siguiente, después del código del vídeo o animación flash:
</div>
- Si con el código anterior no se consigue el centrado, probar con:
<center> y </center> después del código.
28) SONIDO DE FONDO PARA LA PÁGINA WEB
- En la parte inferior le damos a la pestaña Código fuente.
- Antes de la etiqueta </body> teclear lo siguiente:
<embed src="archivos/musica.mp3" loop="true" autostart="true"
controls="smallconsole" height="1" width="1">
- Suponemos que el archivo de música se llama musica.mp3 y está dentro de la carpeta
archivos.
- Con loop="true" indicamos que la música sonará en bucle.
- Darle a la pestaña inferior Normal y al botón Guardar.
29) FAVICON PARA LA PÁGINA WEB
- El favicon es el logo que aparece junto a la dirección de la página, en la pestaña del
navegador o en la lista de marcadores.
Para que el favicon pueda verse en Internet Explorer debe ser un archivo ico, que es
un tipo de bitmap propietario de Microsoft.
Con Firefox podemos usar otros formatos, como gif, png o jpg.
El diseño podemos hacerlo con el programa KiconEdit, guardándolo dentro de la
carpeta archivos con un formato png de 32 x 32 píxeles.
- En la parte inferior le damos a la pestaña Código fuente.
- En el código html teclear lo siguiente en la línea anterior a </head>:
<link rel=”shortcut icon” href=”archivos/nombre del favicon con su extensión”/>
- Darle a la pestaña inferior Normal y al botón Guardar.
- Con Internet Explorer, para ver el favicon hace falta poner la página dentro de las
favoritas y acceder a ella por este menú.
30) ALOJAMIENTO DE LAS PÁGINAS EN UN SERVIDOR WEB
- Ir a la página web www.freewebhostingarea.com
- Teclear la dirección que vaya a tener nuestro sitio web y elegir un dominio en el menú
desplegable. Darle al botón PROCEED.
- Rellenar el formulario: teclear la contraseña (password) 2 veces. Marcar la casilla
inferior y darle al botón Continue. Si no vemos este botón, pasar a pantalla completa con
[F11].
- Cuando sale la pantalla Welcome indica que hemos terminado el registro. Debemos
guardar esta página web como PDF, para ello ir a menú Archivo > Imprimir > Imprimir a un
archivo > como Formato de salida, elegir PDF > elegir el nombre del archivo, manteniendo
la extensión PDF > Imprimir. El archivo PDF se guardará en la Carpeta personal.
Debemos tomar nota del servidor FTP, el login (username) y password.
- Para subir nuestros archivos al servidor, hacer clic sobre el enlace del servidor (la
dirección del servidor termina en /ftp).
- Teclear los datos en la ventana del servidor. Elegir el lenguaje y hacer clic sobre el
botón Iniciar.
- Clic sobre el botón Subir archivo.
- Clic sobre el botón Examinar y elegir el archivo a subir. Esto debemos hacerlo para
cada archivo que queramos subir.
- Darle al botón
- Clic sobre
para volver a ver los archivos que hay en el servidor.
- Las carpetas no podemos subirlas al servidor sino que tenemos que crearlas. Para ello
le damos al botón Nuevo archivo > teclear el nombre de la carpeta > darle al botón
> clic sobre
para comprobar que se ha creado la carpeta.
- Para subir los archivos a la carpeta entramos dentro de la carpeta y subimos los
archivos.