 |
Compositor y GFTP
Para empezar a trabajar con Composer,
pincharemos en - -Programas >>Internet >>Mozilla
y nos aparecerá la pantalla principal de
Mozilla. Pinchando en el icono 
, en la parte inferior de la ventana, se
abre la aplicación. Más rápido es pulsar directamente en el icono Medellín.
En la ventana podemos distinguir:
1.- La barra de título.
Cuando guardemos nuestra página "Sin Título" será sustituido por el que nosotros le hayamos puesto.
2.- La barra de menús:
Desplegando cada uno de ellos, tendremos acceso a las distintas funciones de Composer.
3.- La barra de iconos
Pulsando sobre ellos tendremos acceso
a las funciones más comunes de Composer sin necesidad de abrir los menús.
Si situamos el puntero del ratón sobre cualquiera de ellos y no lo movemos,
aparecerá un mensaje diciéndonos para qué sirve.
4.- La barra formato:
Nos permitirá tratar el texto que
contenga nuestra página.
Al igual que la barra anterior, si situamos el puntero del ratón sobre cualquiera
de ellos y no lo movemos, aparecerá un mensaje diciéndonos para qué sirve.
5.- La zona de trabajo:
Es todo el espacio en blanco que hay entre la barra de formato y la informativa.
Ahí crearemos nuestras páginas.
6.- La barra informativa:
Contiene información sobre seguridad,
conexión y acceso a los distintos programas del paquete Communicator (Navigator,
Messenger...)
7.- Pestañas de modos de visualización
Nos muestra 4 formas de visualizar
el contenido de la ventana donde estamos editando la página.
Para empezar a trabajar con el programa, bastará teclear unas líneas de texto y guardar el fichero. Habremos creado nuestra primera página Web.
Será conveniente tener una carpeta donde guardaremos todos los ficheros relativos a nuestra web (páginas, imágenes, sonidos...), pues así la transferencia de archivos (cuando queramos publicar definitivamente), será mucho más fácil.
Atención: cuando guardemos
por primera vez cada una de nuestras páginas el programa nos pedirá un nombre
de fichero (el que aparecerá en el disco, con extensión htm) y un título (que
podrá ser mucho más largo y aparecerá en la barra de título del navegador).
EL texto y sus atributos.
Una vez tecleado el texto deseado, para poder aplicarle cualquier efecto, debemos, previamente, seleccionarlo.
Os recuerdo. Para seleccionar texto:
Una vez seleccionado el texto, aplicaremos los efectos:
Icono negrita.
Aplica este efecto.
Icono cursiva.
Aplica este efecto.
Ídem. Desplegando este menú 
aplicamos distintos estilos de párrafo. 
Aquí, 
elegimos el tamaño de la letra. Y desplegando éste, 
elegiremos el color. Por último, si pulsamos sobre 
podremos alinear el texto a la izquierda de la página, al centro o a la derecha.
Las listas.
Podemos ordenar la información haciendo uso de las listas. Esencialmente son de dos tipos (aunque el el menú Formato - listas, aparezcan algunas más , no son sino combinaciones de ambas): ordenadas (numeradas) y desordenadas (de viñetas o topos).
1.- Lista ordenada. Se crea seleccionando
los distintos elementos de una lista y pulsando sobre 
.
Si en algún momento queremos ver
cómo va quedando nuestro trabajo, simplemente pulsaremos sobre el icono 
y abriremos una sesión de Mozilla, en la que se
nos muestra la página que realmente se verá en Internet (no olvidéis cerrarla
para regresar a Composer, pues, de otro modo, no podréis seguir trabajando).
2.- Lista desordenada. Se crea seleccionando
los distintos elementos de una lista y pulsando sobre 
.
Ejemplo de lista desordenada:
Propiedades de las listas.
Como de cualquier otro objeto,
podemos obtener las propiedades pulsando en la lista con el botón derecho
del ratón y escogiendo "Propiedades de lista" del menú emergente.
Obtendremos una nueva ventana con tres solapas en las que podemos definir:
|
Podemos cambiar el tipo de
lista eligiendo en el menú desplegable . Para ello elegiremos las opciones deseadas y pulsaremos sobre el botón "Está bien" |
|
En las listas numeradas
podemos elegir el número para empezar la serie. |
|
Como podemos apreciar, en el "Estilo de números, podemos elegir entre la numeración normal, números romanos en mayúsculas o minúsculas, letras... |
Por último, podremos jugar con las listas, creando "Listas anidadas", opción que cubre las posibilidades ofrecidas en el menú Formato - listas.
Para crear este tipo de listas,
haremos uso de los iconos 
(aumentar sangría) y 
(disminuir sangría) del siguiente modo:
Comenzaremos a crear la lista de forma normal y sangraremos al llegar a una sublista. Valga como ejemplo:
Clasificación de los reptiles:
) )Para crear una lista mixta (números y topos, se procedería igual, escogiendo, en cada caso, la opción adecuada).
Ejemplo:
Organización del centro:
Para cambiar el aspecto del fondo
de nuestra página (y algunas cosas más) debemos ir al menú Edición--
Configuraciones. Obtendremos una ventana en la que:
|
Pulsando, en la lista
de categorías en el lado izquierdo, sobre Composer y seguidamente
sobre Páginas Nuevas podremos ponerle o cambiarle el Autor
de la página. Cambiar los colores del texto, vínculos
y fondo de la página. Podremos establecer una imagen para el fondo de la página pulsando sobre el botón "Elegir un archivo". |
|
Esto mismo podemos hacerlo desde el menú Formato -- Color del texto y en Fondo y colores de página. Pulsando sobre los botones de color aparecerá la ventana donde seleccionarlo. En ella podemos:
|
Para aclararnos un poco:
| Desde el menú Formato-- Título y Propiedades de la página... , podemos dar o cambiar el título de la página, indicar el autor o hacer una breve descripción de la misma. |  |
El menú insertar será de los más utilizados en el proceso de creación de una página web. Por tanto, merece un capítulo para él. En nuestra página podemos insertar multitud de cosas. Si pinchamos sobre él se despliega y aparece:
Las dos primeras opciones (vínculo
y ancla), se verán en el apartado "enlaces"
La opción "tabla", también tiene capítulo propio, por tanto las
obviaremos.
El resto las analizaremos una a una.
1.- Insertar imagen: es una opción
parecida a la de elegir una imagen como fondo de nuestra página. si
pulsamos sobre ella, nos aparece:
|
Observamos tres pestañas
en esta ventana, en la pestaña Ubicación lo primero que
se nos pide es qué imagen vamos a insertar (allá donde
esté el cursor). Al igual que ocurría con la imagen de
fondo, lo más normal es pulsar sobre "Elegir un archivo" y buscar
la imagen por nuestro disco duro. |
 |
En la pestaña Dimensiones: Podremos definir el tamaño
de la imagen (¡cuidado!, se deforma bastante al cambiar su tamaño
original)
|
 |
En la pestaña Apariencia: Podemos definir el ajuste del texto con respecto a la imagen: Al tope (superior), En el centro o Al fondo (abajo). También existen las posibilidades de "Ajustar a la izquierda" o "Ajustar a la derecha". ATENCIÓN. Para verlo correctamente debemos pulsar sobre el botón "preliminar" para arrancar el navegador, pues en composer no se ve correctamente. |
2.- Insertar línea horizontal: produce un efecto como el siguiente:
|
En este cuadro de
diálogo podremos definir la altura de la línea (su grosor), y la
anchura (es aconsejable hacerlo en % en lugar de en pixeles, pues
desconocemos la resolución de pantalla que utilizarán nuestros
visitantes). La alineación sólo será perceptible si la línea es más pequeña que la pantalla. El sombreado cambia el aspecto de la línea y la convierte en sólida. |
3.- Insertar etiqueta HTML: equivale al HTML extra que hemos visto en ventanas anteriores. El Hiper Text Markup Lenguaje es un lenguaje de programación sencillo de páginas Web. Está basado en "tags" (etiquetas) que son las que controlan el aspecto y la estructura de las páginas. Para usar estas etiquetas es necesario conocer dicho lenguaje y así podert suplir las carencias del Composer. No creo que sea objeto de estas páginas.
4.- Insertar nuevo salto de línea y salto debajo de imagen: función similiar (el efecto es el mismo) que cuando se pulsa la tecla intro. Simplemente abre espacios entre párrafos o entre imagen y texto.
Los enlaces.
Un enlace, en una página Web, es un salto hipertextual, es decir una forma fácil de desplazarse de un sitio a otro, dentro de la misma página, de una página a otra, dentro del mismo conjunto de páginas, o de una web a otra (distintos conjuntos de páginas).
Para crearlos debemos decidir, ante todo, qué objetos nos va a servir de hipervínculo (dónde vamos a situar el enlace). Puede ser una palabra, una frase, una imagen, una fotografía, una línea..., es decir cualquier cosa que haya en la pantalla.
Veamos primero cómo se crea un enlace dentro de la misma página.
En este caso es obligatorio definir
un "destino" (una marca que le indica al programa a qué lugar de la página
debe irse), cosa que haremos pinchando sobre el icono 
.
Nos saldrá una ventana en la que se nos pedirá un nombre para este destino
(puede ser cualquiera). Yo le he puesto "arriba", pues al pinchar en una flecha
que mira hacia arriba y que está al final de esta página 
, nos encontraremos al principio de la misma. Tened en
cuenta que el "destino" se situará en el lugar que tengamos el cursor.
Bien, ya tenemos ubicado el destino (si no estamos conformes en cuanto a su situación, bastará con seleccionarlo y pulsar la tecla supr). Ahora debemos elegir el objeto que contendrá el enlace.
Una vez decidido sobre qué vamos
a crear el enlace debemos seleccionarlo y utilizar el icono 
pinchando
sobre él con el botón izquierdo del ratón, (yo he seleccionado la flecha que
mira hacia arriba del final de página como ya he dicho ) y pulsamos sobre el icono. Obtendremos algo parecido a esto:
|
|
 |
Se nos ha abierto el cuadro "Propiedades
del Enlace". Como veis, aparece en la ventana el destino que yo acabo de crear ("arriba"). Al desplegar el campo Dirección del vínculo veremos todos los puntos de ancla creados, entre ellos "arriba". haciendo clic sobre este quedará seleccionado, seguidamente pulsamos sobre Aceptar y estará operativo (tened en cuenta que este tipo de enlaces no resulta práctico si nuestra página no ocupa más de una pantalla) |
Bien, ya sabemos crear enlaces dentro de la misma página (para crear más simplemente definiríamos más destinos y estableceríamos los enlaces con cada uno de ellos). Pasemos ahora a los enlaces de una página a otra.
El sistema es, en esencia, el mismo. En este caso NO es obligatorio definir un destino (el salto se producirá al principio de la página enlazada), pero se podría hacer. Lo veremos más adelante.
Para enlazar una página con otra,
seleccionamos el objeto sobre el que va a ir el enlace y pulsamos sobre el
icono . Nos sale la misma ventana de antes (Propiedades del
Enlace), pero ahora pulsaremos sobre "seleccionar archivo". Buscamos en
nuestro disco duro la página con la cual queremos enlazar y pulsamos aceptar.
Ya está. Tened en cuenta que los enlaces no funcionan en Composer y que deberemos
pulsar sobre "preliminar" para que lo hagan.
Es conveniente que nuestro conjunto de páginas esté en la misma carpeta del disco. Nos facilitará la tarea a la hora de establecer los enlaces.
Mirad cómo se haría el enlace de
esta flecha que apunta hacia la página siguiente. 
 |
Como
veis, nos aparece qué imagen está enlazada (2arrow4.gif) y con quién
(FTP.htm).
Para establecer el enlace pulsé sobre Elegir archivo, me fui a la carpeta indicada e hice doble clic sobre FTP.htm. Ahora, al pulsar sobre la flecha, el navegador me llevará a la página siguiente. |
Por último, para enlazar
con cualquier otro sitio web, debo conocer su dirección.
Imaginad que estoy haciendo una página de automóviles y quiero
situar en la misma enlaces a las casas más conocidas.
Podría hacer un listado y después definir los enlaces a las respectivas
Webs.
Por ejemplo:
Peugeot. Tras seleccionar la palabra (doble clic sobre ella) pulsaría en "enlace" y en la línea "enlazar con" escribiría su dirección de internet, es decir http://www.peugeot.fr
Así continuaría con las demás casas hasta tener una página llena de enlaces. Al pulsar sobre cada una de las marcas, el navegador buscará en internet la web solicitada y se irá a ella.
|
|
|
Las tablas.
Las tablas son un potente recurso muy versátil para diseñar páginas web.
Para insertarlas en el documento,
podemos utilizar el icono 
o el menú insertar.
En ambos casos tendremos acceso
a las propiedades de la nueva tabla, donde especificaremos cómo queremos
que sea la misma.
|
En
la parte superior, definiremos el número de Renglones (filas) y columnas
que queremos que tenga. Inmediatamente al lado su anchura en porcentaje del ancho de la ventana. La anchura de línea de borde, define el grosor del "marco" de la tabla. Si ponemos 0, no se verá. El espaciado de celdas creará un espacio mayor o menor entre celda y celda. El ajuste de celdas define el espacio que existirá entre el borde interior de la misma y el texto que contiene (o el objeto). |
Ejemplo de tabla:
Tabla de 3 filas y 2 columnas, alineada al centro con 0 píxeles de borde, 2 de espaciado de celdas y 2 de relleno. Su anchura es del 65 % de la ventana y definición de colores de fondo de la siguiente forma: fondo de tabla: blanco. Fondo de celda (la primera): amarillo. Fondo de fila (segunda): azul
Una vez definida la tabla, puedo tener acceso a sus propiedades seleccionando una parte de ella y con el boton derecho del ratón elegir Propiedades. Si en este caso selecciono o pongo el cursor en la celda de color amarillo pulso el boton derecho del raton y elijo Propiedades de Celda de tabla.
|
Vemos que esta pantalla
cambia con respecto a la primera. Nos aparecen dos pestañas:
tabla, celda, cada una con sus propiedades particulares. Vemos aquí en el apartado Selección la opción Celda y dos botones (Anterior y Siguiente) que me pueden mover a la previa o a la siguiente celda y las distintas opciones para la celda. |
 |
Esta ventana observamos en el apartado selección se ha cogido "Renglón" (fila) en la que podemos configurar contenido de la fila, así como a la adición de color (aquella en la que tengamos situado el cursor). |
|
|
|
A Publicar
Una vez creado nuestro grupo de páginas, debemos publicarlas, es decir, copiarlas al espacio de disco que nuestro proveedor de internet nos destina para ello.
La operación es tan sencilla como copiar de una unidad de disco a otra, pero con ciertas salvedades. Ante todo debemos decirle a nuestro ordenador a dónde ha de copiar los archivos (hay que tener en cuenta que se trata de una máquina remota con sus carpetas y subcarpetas, que no siempre estarán absolutamente accesibles para nosotros).
Después debemos identificarnos (podríamos enviar código maligno de forma anónima).
Lo que está claro es que no podemos hacerlo con el explorador de Windows ni con Mi Pc, debemos utilizar un programa FTP (File Transmission Protocol) de los muchos que hay en el mercado.
LinEx dispone de una aplicación de FTP denominada GFTP y que veremos seguidamente.
Transfiriendo los ficheros con GFTP
Cuando queramos alojar una página
web, es necesario enviar al proveedor del espacio para alojarla (servidor)
todos los ficheros que dan forma a la página. GFTP es un programa que
sirve para transferir archivos de un sistema informático local a otro
remoto. La aplicación
GFTP incluida en LinEx es de fácil manejo. Para abrir la aplicación
iremos a Programas--Internet--GFTP.
Para realizar la transferencia de ficheros es necesario establecer la conexión con el host (ordenador) remoto, y para ello hemos de configurar los datos de acceso a dicho servidor.
Configuración de acceso a un sitio:
Al abrir el programa GFTP, observamos la siguiente ventana:
En primer lugar debemos configurar el acceso al servidor escribiendo los datos siguientes:
Introducimos la dirección del servidor FTP en el campo "Servidor". La dirección se obtiene del proveedor de servicio que aloja las páginas Web. Por ejemplo: platea.pntic.mec.es. Escribimos también el número del "Puerto" que normalmente es 21. El "Usuario" que es nuestro login, en este caso fmarti7 y por último nuestra "Contraseña".
Una vez introducidos los datos
pulsamos sobre el botón 
para Conectar.
Tras unos instantes se produce la conexión y se visualizará en estas dos partes de la ventana los ficheros de las dos máquinas, a la izquierda podemos ver todos los ficheros del ordenador local situados en el directorio /home/fmartim y a la derecha todos los ficheros situados en el directorio /public_html del ordenador remoto (platea.pntic.mec.es).
En este espacio recibiremos mensajes que nos informan del estado de la transmisión, el fichero que se está enviando o recibiendo, el tiempo que tarda o los posibles errores que puedan aparecer.
Si en un momento determinado queremos
interrumpir esta conexión entre las dos máquinas pulsaremos sobre el botón
Transferencia de archivos
Una vez conectado a un sitio FTP, puedes cargar y descargar los archivos.
Para cargar un archivo, basta con
marcar, en la parte del ordenador local, el archivo que queremos transferir
y seguidamente pulsar sobre el botón 
para
iniciar la transferencia. Comienza el envío del fichero y en unos instante
(depende del tamaño del archivo que se transfiera) aparecerá en la ventana
del ordenador remoto.
Del mismo modo si queremos descargar
archivos del remoto al local, realizaremos la operación de marcar el archivo
o archivos que deseemos descargar y pulsaremos seguidamente sobre el botón
y se iniciará la descarga al ordenador local.
Si queremos hacer modificaciones en los archivos del sitio remoto, podemos situarnos en la ventana del sitio y pulsando sobre el botón derecho del ratón podemos ver todas las operaciones que podemos realizar: Cambiar de directorio, crear directorio, renombrar archivo o carpetas, borrar, editar y ver.
|
|
 |
 |
Envía
al tutor