curso basico 2009 practica3 - recursos -...

Curso Descartes Básico

73

Presentación

Cuando se va a emplear Descartes en el aula con los alumnos se puede seguir alguno de estos caminos:

• Usar una unidad didáctica ya creada, sin modificar.

• Usar una unidad didáctica ya creada, modificando formatos y adaptando textos.

• Usar una unidad didáctica modificando algunos parámetros de las escenas.

• Crear una nueva página a partir de otras ya creadas, aprovechando escenas ya preparadas mediante, por ejemplo, un editor HTML.

• Crear toda la unidad desde el principio.

En esta práctica se trata el segundo punto y en la siguiente se tratarán el tercer y cuarto punto.

Aquí se pretende que se adquiera un dominio básico en el uso de un editor de páginas HTML, concretamente Writer de OpenOffice.org, muy sencillo de manejar y sin necesidad de conocer el lenguaje de programación HTML.

La forma de trabajar con Writer OOo es similar a un procesador de textos tradicional, proporciona un entorno de menús y barras de herramientas que facilitan la inserción de los elementos más relevantes en la elaboración de una página Web. El editor hace que el usuario se desentienda de la codificación que en última instancia es lo que se genera, un archivo HTML.

Objetivos El objetivo de esta práctica es adquirir las estrategias necesarias para modificar páginas de actividades didácticas de la Web Descartes (unidades didácticas, aplicaciones, etc.) utilizando las herramientas elementales de un editor de páginas HTML. Contenidos

• Principales comandos y opciones de Writer OOo.

• Operaciones con un texto: Seleccionar, poner formato, copiar, cortar y pegar.

• Operaciones con una imagen: Insertar.

• Modificar el color del fondo y el título de una página.

• Insertar tablas y elementos gráficos.

• Poner hipervínculos a textos e imágenes.

• Guardar los cambios realizados en una página.

Requisitos y sugerencias

Para la realización de esta práctica no se requieren demasiados conocimientos, aunque conocer algún procesador de textos facilita su realización.

Esta práctica es fundamental para poder adaptar unidades didácticas ya creadas y se necesita un editor de archivos HTML. Cada cual podrá utilizar el editor que use habitualmente.

Para quien no haya utilizado un editor de páginas HTML le recomendamos que instale OpenOffice.org versión 3.1 en castellano que encontrará en la dirección http://es.openoffice.org para las plataformas Linux, Windows y Mac OS X


74

OpenOffice de Sun Microsystems es una suite ofimatica. Writer es un interesante editor de texto que forma parte de esta suite, totalmente compatible con Microsoft Word, que permite también editar archivos HTML.

La Introducción de esta práctica describe, con el detalle suficiente, las principales herramientas de OpenOffice.org Writer

Después de leer la Introducción a la práctica se pasará al Proyecto de la misma y se intentará realizarlo. Las Actividades Guiadas indican un procedimiento para cumplimentar el Proyecto y son útiles hasta adquirir seguridad o si se prefiere un aprendizaje gradual y progresivo.

Introducción

En esta práctica se trabajará con Writer OOo (Writer OpenOffice.org) como ya se ha comentado en la presentación. En la Introducción se comentan algunos aspectos generales relacionados con el uso y funcionamiento de dicho editor.

Dado el carácter básico de este curso se pretende hacer una introducción muy elemental a la edición de páginas HTML y creemos que Writer OOo es suficiente para atender este requisito. En esta práctica no se actúa sobre las escenas, los cambios de las escenas se tratarán en la próxima práctica.

Naturalmente se podrá utilizar cualquier otro editor HTML con el que el alumno esté mas familiarizado, las funciones básicas serán similares.

Ningún editor HTML muestra las escenas de Descartes como lo hace el navegador (o visualizador) de páginas web; ni tampoco es desde el editor de HTML desde donde se configuran de forma habitual las escenas, aunque se pueda editar puntualmente parte del código correspondiente.

Una diferencia entre editores consiste en cómo indica cada uno la situación de una escena de Descartes: en algunos no se indica, en el modo de edición normal, como en N|VU o en KompoZer, en otros se pueden ver y manipular. El editor FrontPage presenta una jota mayúscula , en Dreamweaver CS3 aparece la típica

taza de café de Java y Writer OOo muestra esta imagen .

Esta introducción va destinada a aquellos que no han utilizado antes un editor HTML, los que ya sepan utilizarlo pueden pasar a realizar el Proyecto de esta práctica o consultar si tienen curiosidad las características del editor Writer OOo que van a ser utilizadas en este curso (consultar Writer-Web Ooo en la página 77)

Proyecto

El proyecto de la Práctica 3 consiste en modificar una página con el editor Writer OOo. Se cambiará el título de la página y el formato de algunos párrafos y tablas, se insertarán imágenes, tablas y líneas horizontales de separación de apartados y se crearán hipervínculos.

Este hiperenlace muestra la página HTML que hay que modificar usando Writer OOo. Los textos de color gris claro indican los cambios a realizar (archivo ejecicio3.html en la carpeta proyectos)

Propuesta Modificar la página que está en la carpeta proyectos dentro de Curso_basico.

Curso_basico/proyectos/ejercicio3.html

Las modificaciones no se hacen directamente sobre ejercicio3.html sino sobre una copia que habrá que hacer de éste archivo y que se llamará trabajo3.html.

Las imágenes que se ven en la página ejercicio3.htm (no confundir con las escenas de Descartes) están en la carpeta Descartes/imagenes_comunes pero para poder hacer el envío al tutor colocaremos aquellas y sólo aquellas que se vinculan con la página en una


75

carpeta exclusiva dentro de la de proyectos que se llamará imagenes3; esto obligará a cambiar los enlaces de las imágenes.

Se suprimirán todos los textos entre paréntesis, en color gris claro, que indican los cambios a realizar y se insertará una imagen: logo.gif que es el logotipo de Descartes 2 y que se encuentra en la carpeta Descartes/imagenes_comunes.

La tabla de datos correspondiente a la Actividad 7 de la página del proyecto ejercicio3.html es realmente una imagen que hay que eliminar y en su lugar sustituir por una tabla confeccionada con el editor HTML lo más parecida posible.

En el final de la página, se modificará un enlace (hipervínculo) y además se creará otro nuevo a la página original ejercicio3.html.

La página imagen_modelo.html situada en la carpeta proyectos lleva insertada una imagen de la página solución trabajo3.html y puede servir de modelo a lo largo de la realización del trabajo de transformación de la página original ejercicio3.html

Para algunos, esta propuesta puede ser suficiente para comenzar a trabajar con esta página, no obstante se incluye a continuación un índice de actividades (consultar Proyecto en la página 117), que puede servir de ayuda para quien lo quiera seguir y que se puede completar con las indicaciones que contiene la página de Actividades guiadas (página 119)

Actividades guiadas

En estas Actividades Guiadas se ofrece en detalle los pasos que se requiere para la consecución del Proyecto 3.

Cuando se quiera crear o modificar una unidad didáctica, lo más aconsejable es utilizar un editor HTML. Hay muchos editores en el mercado y cada persona tiene sus gustos y preferencias por cada uno: cada cual puede utilizar aquel que considere más conveniente.

Las indicaciones para realizar esta práctica están hechas para el programa Writer OOo. No siempre se elige el camino más sencillo con este programa sino aquellos métodos generales disponibles en otros editores.

Las explicaciones que siguen destacan las herramientas necesarias para modificar una página ya creada (página 119)

Evaluación

Al concluir el Proyecto de trabajo o las Actividades Guiadas de esta práctica deberán existir dentro de la carpeta Proyectos un archivo llamado trabajo3.htm y una subcarpeta con las imagenes que se vinculan en él llamada imagenes3: boton_arriba.gif, boton_atras.gif, logo.gif y logo2.gif

Se habrán realizado las actividades siguientes, usando el editor específico para páginas HTML Writer/Web OOo:

• Crear o modificar una página HTML.

• Especificar las propiedades de la página.

• Insertar texto, imágenes y tablas.

• Poner hipervínculos a textos e imágenes

• Almacenar en el disco la página editada.


76

Se habrá podido resolver el Proyecto consultando cada contenido en el apartado Introducción y en las Actividades Guiadas. En esta práctica se debe modificar la página ejercicio3.html creando una página nueva cuyo acabado sea como especifica el proyecto.

Una vez alcanzados los objetivos de esta práctica es obligatorio enviar el proyecto al tutor o tutora para su corrección y poder proseguir con el curso.

El fichero trabajo3.htm y su carpeta de imágenes correspondiente (imagenes3) se enviarán

al tutor o tutora en un archivo comprimido llamado codigo_sp3.zip, donde código será el nombre de usuario (login) asignado en el curso al alumno o alumna (por ejemplo

mperez5_sp3.zip), adjunto a un mensaje de correo electrónico donde figure como asunto "Solución Práctica 3"

Consultar cómo comprimir archivos y carpetas en el apartado Compresión de archivos (página 135)


77

ACCESO A WRITER-WEB

En esta introducción nos referiremos al editor Web de OpenOffice.org instalado en la plataforma Windows.

Archivo Nuevo

Para iniciar Writer-Web y editar un nuevo documento tenemos al menos dos alternativas:

• Hacer doble clic sobre el icono de acceso directo de OpenOffice.org 3.1 que se creó en el Escritorio cuando lo instalamos. En el Menú Archivo de la ventana de la suite elegir la Opción Nuevo->Documento HTML

• Acceder al enlace del programa desde el Menú Inicio: Inicio -> Programas -> Carpeta OpenOffice.org -> Writer.

En este caso tenemos un documento de texto nuevo (tipo .odt) pero debemos guardarlo como tipo Documento HTML de OpenOffice

Writer.

Abrir Archivo

Abrir un archivo desde el disco representa poner una copia del mismo en la memoria interna del ordenador para poder editarlo. Si ya existe un documento HTML y se desea abrir con Writer, podemos seguir dos procedimientos alternativos:

• En el Menú Archivo de la ventana de la suite elegir, la Opción Abrir, seleccionando a continuación el archivo tipo HTML en la carpeta donde se encuentre guardado. Al reconocer el tipo HTML, OpenOffice lo abre en el modo de Diseño para Internet (lo que conocemos como Writer-Web)


78

• Desde el sistema se accede a la carpeta donde está el archivo HTML y se hace clic derecho sobre el nombre del archivo (p.e. trabajo3.html) para abrir el menú contextual y se elige la opción Abrir con-> sweb.exe

Para actualizar en el disco las actualizaciones del documento que se está editando en la memoria del programa se dispone de las operaciones de guardar en el menú Archivo: Guardar, Guardar como... y Guardar todo

Guardar como...

Esta opción del menú Archivo permite guardar con otro nombre diferente el documento que está en edición. Si aún no ha sido guardado el nuevo archivo, el programa le asigna por defecto el nombre Sin Título 1.html es una oportunidad para poner el nombre más conveniente.

También se puede editar un archivo y guardarlo con un nombre diferente al que tiene actualmente. Esto crea un nuevo archivo y no se alterara con los cambios que se pudieran haber hecho el documento que se edita (se cierra sin cambios). A partir de este momento está en edición el nuevo archivo.

Guardar

No permite cambiar el nombre del archivo al guardarlo. Se suele hacer esta operación de vez en cuando mientras de edita el documento para evitar pérdida de información si el ordenador dejara de funcionar.

Guardar todo

Es habitual tener varios documentos abiertos para consultar uno mientras se edita otro. El documento que se ve en la ventana de trabajo es el documento activo. Para conmutar de uno a otro se utiliza el menú Ventana.

La opción de Guardar todo consigue que se guarden a la vez todos los documentos abiertos en el programa.

Cerrar

Cerrar es una opción que se encuentra en el menu Archivo. Si se hacen cambios en el documento abierto, en algún momento hay que terminar el trabajo. Los cambios si no se guardan se pierden. Por eso al cerrar un documento con cambios aparece una ventana de advertencia donde podemos decidir por Guardar (Guarda y cierra), Rechazar (cierra sin guardar) o Cancelar (Anula la operación de cierre).

Cerrar el archivo no cierra el programa Writer-Web. El area de trabajo queda en blanco o si había otro documento abierto, éste quedará ahora activo.


79

ENTORNO DE TRABAJO

El mapa de imagen siguiente representa la ventana activa de Writer-Web con el archivo trabajo3.html. Situar el puntero del ratón sobre cada número para obtener un resumen de cada herramienta de edición:

1 Barra de título: A la izquierda aparece el nombre del archivo que esta editándose en caso de que ya lo hayamos guardado con anterioridad, sinó mostrará el texto sin título. A la derecha los botones de control de la venta minimizar, maximizar/restaurar y cerrar.

2 Barra de menú principal: Contiene los menús Archivo, Ver, Insertar, Formato, Tabla, Herramientas, Ayuda. A través de estos menús podemos acceder a todas las opciones del programa.

3 Barra de herramienta estándar: Contiene los iconos que dan acceso a funciones habituales de la aplicación: abrir un archivo, guardar, imprimir, copiar, pegar... Se puede personalizar añadiendo o quitando funciones.

4 Barra de herramienta formato: Contiene las opciones necesarias para formatear y dar diseño a un texto: estilo, tipo de letra, tamaño, formato del párrafo y de la página... Cuando trabajamos sobre objetos que no son de texto es sustituida por las barras de herramientas de imagen, de fórmulas, de marcos... Estas son similares a las de cualquier procesador de textos.

5 Regla horizontal: Sirve para posicionar tabuladores y sangrías además de dimesionar (medir en mm, cm, pulg., pt, pica) el ancho de diversos objetos (tablas, imágenes,...). Se muestra marcando la entrada Regla del menú Ver

6 Regla vertical de edición: Sirve dimesionar (medir en mm, cm, pulg., pt, pica) el alto de diversos objetos (tablas,imágenes,...). Se activa/desactiva marcando la entrada Regla del menú Ver

7 Área del documento: Es nuestro espacio de trabajo. La página que estemos editando estará activa y se mostrará en este área, pudiendo cambiar entre páginas abiertas mediante el menú Ventana

8 Barra de estado: Muestra información del estado del documento activo: el número de página, el estilo de página, el idioma, el modo insertar/sobreescribir, el modo de selección del texto, un asteriso que indica que el documento ha sido modificado, la posición del punto (cursor) de inserción y en el extremo derecho la escala, en porcentaje, con que se ve el documento.

9 Barra de desplazamiento vertical: Está asociada a la ventana del documento y permite


80

desplazarnos verticalmente por el mismo cuando éste sobrepasa la extensión de la ventana 10 Barra de desplazamiento horizontal: Está asociada a la ventana del documento y permite

desplazarnos horizontalmente por el mismo cuando éste sobrepasa la extensión de la ventana

Hay otras barras de herramientas que se pueden hacer visibles desde el menú Ver de la barra de menú principal.

Estas barras suelen "aparecer" debajo de las otras dos visibles (Estándar y Formato) cuando estamos en un elemento asociado a las mismas (por ejemplo: una imagen, una tabla, etc.). También podemos acceder a las opciones de esas barras haciendo clic con el botón derecho sobre esos elementos (imágenes, tablas, etc.) a través del menú contextual emergente.

Las barras de herramientas son dinámicas, aparecen o se ocultan automáticamente. Se ajustan en la parte superior o inferior del área de trabajo o aparecen flotantes sobre la ventana.

Las barras de herramientas se pueden personalizar, hacer visibles u ocultar iconos de enlace. Esta operación se puede solicitar desde el botón derecho de la misma barra de herramientas.


81

CONFIGURACIÓN

Ciertos comportamientos del editor pueden quedar fijados o preestablecidos, a gusto del usuario, hasta que se vuelvan a cambiar: esto es lo que entenderemos en esta sección como configuración de Writer-Web OOo y sólo se pretende atender aspectos muy básicos:

Opciones OpenOffice

OpenOffice.org tiene varios ajustes importantes en el menú Herramientas - Opciones. Para acceder a él sequimos los pasos:

1. Pulsar en el Menú Herramientas -> Opciones

2. Hacer clic en la opción OpenOffice.org

De interés para este curso:

• Datos del usuario

Es posible que algunos datos del usuario ya se hayan especificados al instalar OpenOffice.org.

Los datos de usuario los utilizan las plantillas y los asistentes de OpenOffice.org. Por ejemplo, los campos "Nombre" y "Apellidos" se utilizan para insertar automáticamente su nombre como autor de un documento nuevo. Se puede ver en Archivo - Propiedades. Algunos de los datos del usuario se incluyen


82

automáticamente en un diccionario interno para que el revisor ortográfico los reconozca. En caso de errores mecanográficos, el programa puede utilizar estos datos para sugerir reemplazos. Hay que tener en cuenta que los cambios en los datos sólo surten efecto después de reiniciar OpenOffice.org


83

• Rutas

Esta opción contiene las rutas predeterminadas a las carpetas importantes de OpenOffice y el usuario puede cambiarlas. Aquí puede se práctico indicar la carpeta donde se encuentran mis documentos. Por ejemplo, si vamos a trabajar con documentos que están en la carpeta de proyectos se puede seleccionar la entrada "Mis documentos" y pulsar el botón Editar con lo que se nos permite elegir esta carpeta (p.e. Curso_basico\proyectos). A partir de este momento cuando se quiera abrir o guardar un archivo el programa se dirigirá a esta carpeta directamente.

• Colores

OpenOffice dispone de una amplia paleta de colores predefinidos. Esta opción permite eliminar, modificar los ya existentes y añadir más según preferencias.

El modelo de colores utilizado es el RGB: Rojo (Red), Green (Verde), Azul (Blue). Un color resulta de componer una cantidad de cada color fundamental. La cantidad de cada color está dada por un número de 0 a 255 (00 Hex a FF Hex). En la imagen adjunta vemos como está compuesto el color denominado "Azul 8" de la paleta básica: R=153 (99Hex), G=204 (CCHex), B=255(FFHex). En Hexadecimal se reprentaría como #99CCFF (OpenOffice no utiliza esta referencia).

OpenOffice proporciona controles del modelo CMYK (Cian-Magenta-Amarillo-Negro) sólo para facilitar el ajuste de color de éste al modelo RGB.


84

Las unidades didácticas del proyecto Descartes se basan en un diseño que incorpora determinados colores, cada uno asignado a un elemento de contenidos característico. Como en el proyecto de esta práctica se va a trabajar con este diseño es por lo que conviene cuanto antes añadir a la paleta de colores los colores de Descartes.

Añadir un nuevo color

Se escribe su nombre en la ventana "Nombre", se cambian los valores RGB y se pulsa el botón Añadir.

En esta imagen se muestra el nuevo color denominado "Azul claro Descartes".

Todos los colores apellidados Descartes se pueden ver al final del listado de la paleta.


85

Colores de Descartes:

• Fuentes

Sustituye un tipo de letra por otra según convenga. La sustitución reemplaza un tipo de letra únicamente cuando se muestra en pantalla o en pantalla y al imprimir (siempre). El remplazo no cambia los tipos de letra establecidos que se guardan en el documento.

En la imagen se puede ver como se construye la tabla de sustitución. Se selecciona la fuente y su remplazo , después se pulsa el icono de aplicar . En cualquier momento se podrá eliminar seleccionando la entrada y pusando el icono de eliminar .


86

Significado de la tabla de sustitución

Muestra el tipo de letra original y el que lo va a sustituir. Seleccioner "Siempre" para sustituir el tipo de letra, aunque el tipo de letra original esté instalado en el sistema. Seleccione "Sólo pantalla" para sustituir únicamente el tipo de letra de la pantalla y nunca remplazar el tipo de letra al imprimir.

Título, fondo y página

Algunas propiedades sólo quedan asignadas a la página actual, como es el título , el fondo y el formato de la página para la impresora. Al guardar la página se guardan con ella estas asignaciones.

El título del documento es el nombre se muestra en la barra de título de la ventana del programa que abre el documento para su revisión, por ejemplo, para un documento creado con Writer-Web será un navegador Web como Mozilla Firefox o Internet Explorer (no se confunda con la barra de título del programa editor Writer-Web OOo). En el código HTML del documento se encuentra entre etiquetas <title></title>


87

El título de una página es una referencia a la misma que se puede editar desplegando el menú Archivo del programa

Archivo -> Propiedades -> Descripción

El color de fondo de la página es una propiedad del estilo HTML, pero también podemos poner una imagen de fondo. Esto puede ser cambiado desde el menú Formato

Formato -> Página -> Fondo


88

En algún momento podemos estar interesados en imprimir en papel la página que estamos viendo en el navegador. Si no sabemos cuales son los parámetros para la impresión o nos interesa cambiarlos puntualmente se puede hacer desde el menú Formato

Formato -> Página -> Página


89

Si queremos hacer permanente el color de fondo o el formato para imprimir hay que actuar desde otras opciones del menú Herramienta

Opciones OpenOffice.org Writer/Web

OpenOffice.org Write/Web tiene, de forma espécífica, algunas opciones. Seguieremos los pasos:

1. Pulsar en el Menú Herramientas -> Opciones

2. Hacer clic en la opción OpenOffice.org Writer/Web

Pueden ser útil conocer para este curso:

• Ver

La opción Ver, define la configuración predeterminada para mostrar objetos en los documentos de texto, así como para los elementos de ventana.


90

• Imprimir

La configuración de impresión definida en esta pestaña se aplicará a todos los documentos subsiguientes. Si desea cambiar la configuración únicamente para el documento actual, pulse el botón Opciones del diálogo Archivo -> Imprimir.

• Fondo

Especifica el fondo para documentos HTML. El fondo es válido tanto para documentos HTML nuevos como para los que se cargan, mientras no tengan definido un fondo propio.


91

Imprimir archivo

En algún momento necesitaremos imprimir la página que estamos editando. Desde el menú Archivo -> Imprimir se puede elegir la impresora y configurar las propiedades.

El botón Opciones... nos conduce a las opciones de impresión configuradas desde OpenOffice.org Writer/Web


92

FORMATO DE TEXTOS

Para quién no esté muy familiarizado con los procesadores de texto, existe toda una nomenclatura asociada con el texto que conviene aclarar para poder entender las opciones de formato que podemos encontar en el entorno de trabajo de OpenOffice.org Writer

El texto es el componente principal de nuestras páginas, el medio más natural de comunicación. Cada representación elemental que compone un texto es un carácter. Los caracteres pueden ser alfabéticos, numéricos, especiales (de puntuación ó símbolos).

OpenOffice.org Writer/Web proporciona las herramientas que necesitamos para editar el texto de nuestra página web. Las podemos encontrar en el menú Formato y en las barras de formato que presentamos en la sección de Entorno de esta la Introducción.

Carácter es cada uno de los símbolos que se pueden representar en un documento (alfabético, numérico o especial). Para poner formato al texto se selecciona y desde el menú Formato -> Caracter... o desde la barra de Herramientas Formato se elige, la fuente, el tamaño y el estilo.

Basta que el cursor esté situado en alguna parte del párrafo para poder ya elegir el formato que convenga (alineación, sangrado, espaciamiento entre líneas, numeración, fondo y borde).

Fuentes

Una fuente o tipo es un diseño especial de caracteres. Arial, Times New Roman y Courier son fuentes distintas. Normalmente utilizamos varias fuentes según la naturaleza del texto: título, sutítulo, encabezados y pies, cuerpo, etc.

Las fuentes pueden ser de espaciado fijo o variable (proporcional). Proporcional significa que cada carácter tiene un ancho diferente. Arial es una fuente proporcional: dos palabras de 10 letras podrá tener distinto ancho dependiendo de las letras que contenga algoritmos y proyectiva. Courier es una fuente no proporcional y por tanto todos los tipos courier tienen el mismo paso en la palabra: algoritmos y proyectiva tienen la misma lontitud.

Distintas fuentes con diseños similares forman una familia, por ejemplo: Arial,Helvética, Sans-Serif - Times New Roman, times, serif - Courier New, courier, monoespace. Cuando se asigna una fuente al texto también se vincula una familia y el navegador elige entre las posibles fuentes que de la familia que tiene instaladas.

Tamaños

El tamaño es otro aspecto del formato de una fuente. Hay varias formas/unidades de medida para establecer el tamaño de un texto.

El punto es una unidad de medida del tamaño: 1pt=1/72 de pulgada (1 pulgada = 2,54 cm.). Es decir que un tamaño de texto de 72 puntos tiene una altura de 1 pulgada. Normalmente leemos con tipos entre 10pt. y 14pt. Los títulos suelen ser mayores. Otras unidades absolutas son: cm, mm, in (pulgada), pc(pica 1in=6pc).


93

También hay unidades relativas: em (tamaño de la fuente actual), ex (altura de la letra x de la fuente actual), px (pixel o punto de pantalla), % (porcentaje de la fuente actual).

Estilos

También empleamos distinto estilo para escribir el texto. Negrita, cursiva, subrayado suelen ser estilos empleados habitualmente para enfatizar; en las páginas web se recomienda enfatizar con negrita o cursiva y dejar el subrayado para indicar que el texto es un hipervínculo (enlace a otra página o distinto lugar de la

misma). También se puede enfatizar un texto cambiando el color del fondo.

Colores

El color es otra carácterística que puede llevar el texto. El color se establece por adicción de tres colores puros básicos Rojo, Verde y Azul. Distintas cantidades añadidas de color básico dan lugar un color diferente, la mayor proporción de un color de mezcla sobre otro da lugar a distintos matices y tonos. La cantidad de color básico varía de 0 a 255 (#00 a #FF con notación hexadecimal). Así #FF0000 es el rojo, #00FF00 el verde y #0000FF el azul básicos. Un color con tonalidad azul tendrá mayor proporción de azul que de rojo y verde y el color resultante será una variante del azul por ejemplo #003399 tiene Rojo=0=#00, Verde=102=#33, Azul=153=#99.

Párrafo

Un párrafo es una cantidad de texto que puede formatearse en bloque. Así pues, distinguiremos las propiedades de caracter de las propiedades de párrafo. Es importante distinguir en la edición de una página entre salto de línea y salto de párrafo. Una cantidad de texto se convierte en párrafo cuando al final de esel texto se crea un salto de línea más una línea extra en blanco antes de continuar con el texto. Las marcas de código HTML, ocultas en el modo normal, que encierran un párrafo son <p> de apertura y </p> de cierre.

Para terminar un párrafo se pulsa la tecla <Intro> (Intro). Para crear un salto de línea sin terminar el párrafo se pulsa y mantiene retenida la tecla <Mayús> y después pulsa <Intro> (Mayús + Intro)

Son propiedades de párrafo, la alineación (derecha, izquierda, centrada o justificada), la sangría (adentrar el texto acortando el ancho de la línea), la lista numerada y la lista no numerada, el espaciado entre líneas y los bordes (alrededor, arriba, abajo, derecho, izquierdo)

LISTAS

Las listas nos van a servir para organizar la información contenida en los párrafos, para mejorar su lectura, de acuerdo con alguno de los siguientes formatos:

Lista numerada

Los sucesivos párrafos se numeran o se alfabetizan.

Lista no numerada

Cada párrafo lleva delante una viñeta:

Lista de definiciones

Los párrafos son términos seguidos de su correspondiente definición:


94

Para convertir varios párrafos en una lista numerada o con viñetas hay que seleccionarlos con el ratón y/o el teclado (Mayús + Flecha Abajo) / (Mayús+arrastar ratón), y luego acceder menú Formato->Numeración y

Viñetas ó usar los botones correspondientes de la barra de Herramientas de Formato . Aparecerá la barra de herramientas flotante asociada que permite activar y desactivar la lista, descender o ascender un

nivel, desplazar arriba o abajo, reiniciar la numeración o abrir la ventana Numeración y Viñetas del menú Formato para elegir entre todas las posibilidades que ofrece el

programa OpenOffice Writer.

La lista de definiciones se puede conseguir utilizando convenientemente la herramienta de sangrado . Las definiciones correspondientes a cada término se consiguen sangrando a la derecha el párrafo correspondiente. Para corregir se puede usar sangrado a la izquierda.

IMÁGENES

La posibilidad de incorporar imágenes (dibujos, fotos, etc) en las páginas web permiten diseños atractivos y fáciles de leer. El desarrollo de las técnicas de compresión y el aumento de la velocidad en la red, facilitan el uso de un número cada vez mayor de imágenes, no sólo estáticas sino también con efectos de animación. Para las imágenes estáticas se usan los formatos JPG, PNG y GIF, mientras que para las imágenes animadas se usa el formato GIF (éste admite hasta 256 colores diferentes por lo que es más adecuado para dibujos que para fotografía). Las imágenes también pueden servir de enlaces con otras páginas.

Antes de insertar una imagen en una página Web hay que comprobar el tamaño que ocupará el archivo (KBytes) y las dimensiones del ancho y del alto (píxeles, cms, ...). Hay que tener en cuenta que cuando se accede a un página Web en un servidor de Internet, los archivos de imagen que contenga se descargan en el ordenador local conjuntamente con del archivo de código HTML. Si estás imágenes ocupan muchos Kbytes (las fotos hechas con una cámara digital pueden ocupar varios cientos de KBytes, incluso miles) se tardará mucho en descargar y por tanto ver. Para elaborar páginas Web se necesita algún programa para optimizar el tamaño de las imágenes, comprimiéndolas y redimensionándolas; deberían tener algunas decenas de Kbytes ya que la calidad para verlas en pantalla sería más que aceptable y el tiempo de descarga muy corto.


95

En otras ocasiones las imágenes se obtienen descargángolas de otras páginas que se visitan y también capturándolas desde la propia pantalla desde donde se están viendo.

No nos ocuparemose en este curso de las técnicas de obtención y tratamiento de imagénes; partimos del supuesto de que ya existen y están optimizadas para la web.

Ahora veremos las herramientas de Writer/Web para insertarlas en la página.

Para insertar una imagen lo primero es situar el cursor en el lugar donde tenga que ir, una línea de párrafo, una celda de tabla, etc. A continuación y de forma alternativa:

• Pulsar el botón A partir de archivo de la barra de

Estándar ó

• Seleccionar la opción A partir de archivo... del menú Insertar

Por ejemplo al insertar la imagen logo.gif centrada dentro de la celda de tabla veremos la imagen dentro de un marco con 8 tiradores situados uno en cada esquina y en los centros de los bordes (perimiten cambiar las dimensiones del marco). Junto a

la imagen aparece el símbolo de anclaje al párrafo (una referencia para anclar la imagen). Al insertar la imagen ha aparecido la barra de herramientas de imagen (sobre la barra estándar) que permite hacer modificaciones sobre la imagen

Ajuste de la imagen al texto, alineación de párrafo, borde, estilo de línea, color de las líneas del marco, organización de una imagen sobre otra (traer al frente, enviar al fondo, anclaje (a la página, al párrafo, al carácter o como carácter).

Seleccionando la imagen puede moverse arrastrandola con el ratón (sin tocar los tiradores), cambiar su forma o tamaño con los tiradores (los de los puntos medios de los bordes deforman la imagen, los de esquina conservan la forma). Pero entrando en la ventana de propiedades de la imagen se tiene muchas posibilidades. Se llega a esta ventana por tres caminos alternativos, estando seleccionada la imagen:

• Haciendo doble clic sobre la imagen

• Haciendo clic derecho y eligiendo Imagen en el menú contextual

Este memú es muy práctico pues como vemos en la imagen de la derecha tambíen se puede desde aquí organizar, alinear, anclar y ajustar la imagen.

• Desde el menú Formato -> Imagen

Desde esta ventana se puede consultar y en su caso modificar los siguientes aspectos de la imagen:


96

Tipo

Opciones

Ajuste


97

Hiperenlace

Imagen


98

Borde

Macro

ENLACES

Podemos definir un enlace como un elemento que permite acceder desde un punto de nuestro documento o a otro documento (o a otra parte dentro del mismo documento). Este salto se realiza por medio de la dirección URL del sitio de destino. De esta manera una página Web proporciona más información que la que vemos directamente al leer su contenido en nuestro explorador.


99

URL: Localizador Universal de Recursos. Es decir una forma estandar (Universal/Normalizada/Uniforme) para indicar donde (Localizador) se

encuentra un objeto (Recurso) en la red. Este recurso puede ser una página web, una imagen, un sonido, una animación y en general todo aquello que sea manejable por el navegador de internet.

Los enlaces también se conocen como hipervínculos (o vínculos de forma abreviada) y permiten transformar un texto o una imagen en un objeto en el que se puede hacer clic para ir a otra página, a un archivo o incluso para enviar un mensaje de correo electrónico. Es el fundamento mismo de la Web, lo que permite la navegación de un sitio a otro.

Se reconoce que un texto tiene asociado un enlace porque generalmente viene resaltado con un subrayado o tiene un color característico dentro de la página. Una imagen con enlace se puede reconocer, de forma opcional, porque queda bordeada del mismo color que tiene un texto con enlace. Lo que es inequívoco para

reconocer un texto o una imagen con enlace es que al situar el puntero del ratón encima, éste cambia

generalmente a la forma de una mano señalando

Para poner un hiperenlace en un texto o una imagen que ya están en el documento primero se selecciona y después se sigue dos vías alternativas:

• Pulsar el icono hiperenlace de la barra de herramientas Estándar ó

• A través del menú Insertar -> Hiperenlace

Se abre la ventana de hiperenlace y se puede ajustar a la clase de hiperenlace que se quiere poner seleccionado en el margen izquierdo uno de los siguientes:

• Internet: Utilizar esta clase para editar hiperenlaces a direcciones WWW o FTP.

En este curso sólo nos interesa el tipo de enlace Web.

Destino

Ingresa una URL para el archivo que se quiere abrir al hacer clic en el vinculo. Si no se especifica un marco (frame), el archivo abrira dentro del documento o marco actual.


100

Navegador Web

Abre un navegador web en el que se puede cargar la URL deseada. A continuación, puede copiar y pegar el URL en el campo Destino.

Destino en el documento

Abre el diálogo Destino en documento. En él se puede seleccionar el destino dentro de un documento y agregarlo al URL de destino mediante el botón Insertar.

Frame

Introduzca el nombre del marco donde desee que se abra el archivo vinculado, o seleccione un marco predefinido en la lista (_blank, _parent, _self o _top). Si deja este cuadro en blanco, el archivo vinculado se abre en la ventana actual del explorador.

Forma

Especifica si el hipervínculo se inserta como texto o como botón.

Acontecimientos

Abre el diálogo Asignar macro, en el que puede asignar su propio código programa a eventos como "ratón sobre objeto" o "ejecutar hipervínculo".

Texto

Especifica el texto visible o el título del botón del hipervínculo.

Nombre

Escriba un nombre para el hipervínculo. OpenOffice.org inserta una etiqueta NAME en el hipervínculo.

• Correo y noticias: Se utiliza para editar los hiperenlaces de las direcciones de correo-e y noticias

Enlace a correo electrónico


101

Es frecuente encontrar en las páginas web enlaces que permiten enviar un correo electrónico a cierto destinatario. Posiblemente nos interese como autor de una página Web recibir algún tipo de comentario de quién la visite.

Al hacer clic sobre ese enlace se abre el programa cliente de correo que se tenga instalado por defecto en el sistema a falta sólo de escribir el texto del mensaje.

E-mail

Asigna la dirección de correo-e especificada al hiperenlace. Al pulsar en el nuevo hiperenlace del documento se abrirá un nuevo documento de mensaje dirigido al destinatario especificado en el campo Correo-e.

Noticias

Asigna una nueva dirección al hiperenlace. Al pulsar en el nuevo hiperenlace del documento se abrirá un nuevo documento de mensaje dirigido al grupo de noticias especificado en el campo Destinatario.

Destinatario

Especifica la URL completa del destinatario en el formato mailto:[email protected] o news:grupo.servidor.com. También puede utilizar la técnica de arrastrar y colocar.

Fuentes de datos

Oculta o muestra el navegador de la fuente de datos. Arrastra los campos de datos de E mail del remitente al campo de texto de Remitente.

Asunto

Especifica el asunto indicado en la línea de asunto del nuevo documento de mensaje.

Otras opciones

Frame

Introduzca el nombre del marco donde desee que se abra el archivo vinculado, o seleccione un marco predefinido en la lista. Si deja este cuadro en blanco, el archivo vinculado se abre en la ventana actual del explorador.

Forma

Especifica si el hipervínculo se inserta como texto o como botón.

Acontecimientos

Abre el diálogo Asignar macro, en el que puede asignar su propio código programa a eventos como "ratón sobre objeto" o "ejecutar hipervínculo".

Texto

Especifica el texto visible o el título del botón del hipervínculo.

Nombre


102

Escriba un nombre para el hipervínculo. OpenOffice.org inserta una etiqueta NAME en el hipervínculo.

• Documento: Se utiliza para editar los hiperenlaces a cualquier documento o destinos dentro de los documentos. (incluido el propio documento donde está el hiperenlace)

Vamos a ver la forma de colocar en nuestra página un enlace para saltar a otra página o a otro

lugar dentro de la misma página.

Es posible combinar el enlace a una página con un destino (p.e. una marca de texto de esa página, file:///D:/angel/Descartes/Curso_basico/proyectos/trabajo3.html#escena2)

Primeramente tenemos que crear una marca de texto en el sitio del documento al que queremos que nos lleve el enlace.

1. Situamos el cursor en el lugar elegido e insertamos una marca.

2. Se puede ver la lista de marcas que ya existen en la página: problema1 y problema2.

Ponemos el nombre de la marca de texto, por ejemplo "problema3" en la ventana que aparece. Finalmente se hace clic en "Aceptar"

Una vez que existe la marca de destino, se puede situar el enlace a esta marca seleccionando un texto o una imagen y abriendo el cuadro de diálogo Hiperenlaces que vemos en la figura de arriba: menu

Insertar -> Hiperenlace

• Nuevo documento: Utilizar esta clase para configurar un hiperenlace a un documento nuevo y crear dicho documento de forma simultánea.


103

Es posible desde esta ventana escribir el nombre de un archivo sobre una ruta determinada aun en el caso de que este archivo no exista. Pudiéndose este editar en éste momento o más tarde.

En la imagen adjunta se ha puesto enlace al archivo de tipo HTML que va a ser abierto nuevo en este momento.

Al pulsar el botón "Aplicar" se crea el archivo y se puede editar marcándole desde el menú Ventana

Editar ahora

Especifica que el nuevo documento será creado e inmediatamente lo abre para edición.

Editar más tarde

Especifica que el documento será creado pero no es abierto inmediatamente.

Archivo

Ingresa una URL para el archivo que se quiere abrir cuando se hace clic en hipervínculo.

Seleccionar ruta

Abre el diálogo de seleccionar ruta, donde se puedes escoger la ruta.

Tipo

Especifica un tipo de archivo para un nuevo documento.

Alguna página HTML puede utilizar una estructura de marcos (frames) para situar las diferentes páginas de sus hipervínculos. Una opción que aparece asociada a un hipervínculo es el marco de la ventana donde el navegador tiene que abrir la página a la que hace referencia el hipervínculo. El significado de la opción "Frame" es el siguiente:


104

Marco Significado

Nombre propio El archivo se abre en un marco con ese nombre en el documento HTML actual.

_self El archivo se abre en el marco actual.

_blanc El archivo se abre en una ventana nueva del navegador.

_parent El archivo se abre en el marco superior (padre) del marco actual. Si no existe marco superior se utiliza el propio marco actual.

_top El archivo se abre en el marco superior de toda la jerarquia.

TABLAS

Es importante que la información que aparece en la página esté estructurada: una imagen y el texto asociado a su izquierda, una escena de Descartes con las instrucciones correspondientes a su derecha,... Una manera de estructurar la página es usando tablas. Las tablas están formadas por celdas y en cada una de ellas incorporamos los elementos previstos (un texto, una imagen, otra trabla,...).

Las tablas se han venido utilizando para organizar datos (numéricos o no) en filas y columnas, así se pueden interpretar mejor, pero también sirven para maquetación de páginas (diseño). Este último uso, que tuvo su esplendor en la década de los noventa, está siendo desplazado por la técnica de diseño CSS (Cascading Style Sheets) que es lo más adecuado y recomendado actualmente en codificación HTML. El posicionamiento utilizando tablas está desaconsejado por las recomendaciones del organismo internacional encargado de dictar las especificaciones de estandarización de los lenguajes para la web, el W3C.

En este curso básico emplearemos las tablas para diseño de páginas, por simplificar y porque se trata de unos elementos familiares por haber sido utilizados en los procesadores de texto.

Se pretende describir lo más básico para crear y modificar las tablas a través del editor OpenOffice.org Writer/Web

La imagen de la derecha representa una tabla 3x2 que a continuación se comenta. Es oportuno decir que esta imagen ha sido insertada maquetando esta parte de la página con una tabla de 1 fila con 2 columnas. Este texto ocupa la celda (1,1) y la imagen la celda (1,2). Se han suprimido los bordes para este propósito.

Relleno: Es el espacio de separación del contenido de la celda al borde izquierdo y superior; es lo que conocemos también como margen. Puede valer 0 pero no recomendado pues si se pone borde a la celda es poco estético ver el texto pegado al borde.

Espaciado: Es el espacio de separación entre celdas. Puede tomar el valor 0. La estética es buena si se pone espaciado 0 y relleno con algunos píxeles.

Crear

Insertar. En Writer/Web tenemos tres formas para hacerlo:

• Botón Tabla de la barra de herramientas


105

• estándar

• Opción menú Insertar -> Tabla

• Opción menú Tabla -> Insertar -> Tabla... (ó Ctrl+F12)

Definir. Al insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las características de la tabla.

El Nombre es la referencia interna a la tabla que puede ser utilizada para otros propósitos (p.e. como destino de un hiperenlace).

El tamaño de la tabla se mide en el número de filas y de columnas.

Se puede establecer las primeras filas con formato de encabezado.

La tabla puede llevar bordes ó no (p.e. cuando se utiliza para estructurar la página).

Existen la posibilidad de elegir entre varios formatos predefinidos (Formateado automático)


106

Al hacer clic en "Aceptar" aparece la tabla en el espacio de trabajo. Se trata de una tabla con tres filas y dos columnas (3x2). Puede verse la barra de herramientas de la tabla que ha aparecido flotante y permite realizar ciertas trasformaciones que se verán más adelante.

Creación rápida

También se puede crear de forma rápida una tabla desde el icono de tabla de la barra de herramientas estándar. Se puede únicamente indicar el número de filas y de columnas que va a tener. Para ello se pulsa sobre la flecha del icono y aparece una cuadrícula sobre la que podemos seleccionar las filas y columnas arrastrando el ratón.

Seleccionar celdas

Para seleccionar una fila, una columna o una incluso la tabla completa, basta situar el cursor sobre una celda del elemento a seleccionar, a continuación abrir la opción Seleccionar del menú Tabla y elegir la entrada que corresponda.

También es posible seleccionar celdas contiguas a partir de la celda donde está situado el cursor (celda activa) de la siguiente forma:

• Arrastando el ratón (con el botón izquierdo presionado) hasta abarcar el conjunto de celdas.

• Situando el puntero del ratón fuera de la tabla a la izquierda de una fila (aparece un flecha) y haciendo clic se selecciona la fila. Varias filas se pueden seleccionar a la vez arrastrando el ratón hacia las otras filas.

• Situando el puntero del ratón a fuera de la tabla por encima de una columna (aparece una flecha) y haciendo clic se selecciona la columna. Varias columnas se pueden seleccionar a la vez arrastrando el ratón hacia las otras columnas.

Modificar tabla

Una vez seleccionada una tabla o una o varias celdas se puede abrir el diálogo de propiedades de tabla que permite hacer modificaciones de éstas (no del contenido de texto de sus celdas). Esto se consigue mediante cualquiera de los tres métodos siguientes:

• Clic derecho del ratón sobre una celda y en el menú emergente elegir la opción Tabla...


107

• Seleccionar la opción Propiedades de Tabla del menú Tabla

• Clic izquierdo sobre el icono de la barra de herramientas Tabla (flotante)

Aparece el cuadro de diálogo de Formato de tabla que presenta cinco solapas que comentaremos seguidamente

Tabla

Especifica las opciones de tamaño, posición, espacio y alineación para la tabla seleccionada.

Flujo de texto

Define las opciones de dirección para el texto que hay antes y después de la tabla y especifca la alineación vertical del texto en las celdas de la tabla.


108

Columnas

Permite modificar el ancho de las columnas de la tabla, de poseer espacio disponible entre los márgenes de la página y los bordes laterales de la tabla se puede modificar el ancho de columnas y el ancho de la tabla a la vez.

Borde

Se puede modificar en esta pestaña las disposiciones de las líneas, el estilo, el color, la distancia del texto y la sombra de la tabla. Para utilizar la personalización de los bordes y líneas hay que "picar" sobre los mismos en el cuadro que permite seleccionarlos.

Fondo

Se podrá elegir el fondo con dos posibilidades: como color o como imagen.


109

Para cualquiera de las dos formas se debe especificar si el fordo se refiere a la celda, fila o tabla.

Insertar/eliminar

Después de crear una tabla con frecuencia se presenta la necesidad de eliminar alguna fila, columna o la tabla misma. También es posible insertar filas y columnas e incluso una tabla dentro de una celda de la tabla actual.

Antes de insertar o eliminar hay que situar el cursor en la celda que servirá de referencia. A continuación utilizar alguna de las siguientes alternativas:

• Clic derecho para abrir el menú emergente. Ahora podemos seleccionar fila o columna. Se abre otro menú donde están, entre otras las opciones de Insertar... o Eliminar

• En la barra de herramientas de Tabla, flotante, se puede hacer clic sobre el icono correspondiente

añadir fila, añadir columna, eliminar fila y eliminar columna (por defecto, se inserta columna a la derecha o se inserta fila debajo)

• En el menú Tabla se encuentran, entre otras, las entradas de Insertar y Borrar. Al seleccionar la correspondiente se abre otro menú con las opciones


110

Tabla..., Filas..., Columnas...

Insertar elementos

En este apartado suponemos que hemos llegado a la opción de insertar elementos desde el menú emergente (haciendo clic derecho sobre la celda) o desde el menú Tabla->Insertar..., ya que desde la barra de herramientas de Tabla (flotante) las opciones están limitadas a una sola fila o columna , aunque es muy rápido.

Las opciones de la ventana de diálogo en cada caso son muy pocas e intuitivas. Delante o detrás significa respecto de la celda donde nos hemos situado antes de abrir el diálogo.

Eliminar elementos

Las tres alternativas señaladas para eliminar conducen a eliminar la fila o la columna correspondiente a la celda que se toma como referencia. ¡No existe un cuadro de diálogo que nos permita decir cuantas filas o columnas queremos borrar a la vez...! ¿despiste del programador? Así que para eliminar varias filas o columnas hay que primero seleccionarlas y después a través de cualquiera de las alternativas que se tiene eliminarlas.

Unir/dividir celdas

Es posible unir un grupo de celdas contiguas y que éstas compartan su contenido. Por ejemplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de la primera fila. Algo parecido podríamos hacer para ponerle un pie a la tabla. La opción de combinar varias celdas en una sola permite organizar el contendio de la página web casi en cualquier forma.

De forma inversa, a veces conviene para conseguir una determinada estructura, dividir una celda en dos o más.

También es posible dividir una tabla en dos o unir

La celda que contiene el encabezado "Alumno" se ha obtenido uniendo las dos primeras celdas de la 1ª columna. Las celdas 2ª, 3ª y 4ª de la 1ª fila se han unido para escribir el encabezado "Evaluaciones"


111

dos tablas separadas por un párrafo (ver Práctica 4: Actividades guiadas - Editor HTML - Insertar nuevas filas)

El proceso para unir celdas comienza seleccionando varias celdas contiguas, para ello arrastramos el ratón sobre ellas con el botón izquierdo pulsado y a continuación, seguimos con cualquiera de estos tres métodos

• Pulsamos con el botón derecho del ratón eligiendo en el menú emergente la opción

Celda -> Unir.

• Desplegamos el menú Tabla y elegimos Unir celdas

• Pulsamos el icono Unir celdas en la barra de herramientas de tabla (flotante)

Las celdas puede dividirse, para ello hay que poner el cursor sobre la celda y seguir uno de los habituales caminos:

• Pulsamos con el botón derecho del ratón eligiendo en el menú emergente la opción Celda -> Dividir

• Desplegamos el menú Tabla y elegimos Dividir celdas

• Pulsamos el icono Dividir celdas en la barra de herramientas de tabla (flotante)

La orden de división abre una ventana de diálogo que permite indicar el número de celdas en que se va a dividir y también la orientación: Horizontálmente (división en filas) o Verticalmente (división en columnas)

Tamaño de fila y columna

Supuesto que tenemos creada una tabla trataremos de modificar la altura de las filas o el ancho de las columnas.

No es posible hacerlo desde la barra de herramientas de Tabla pero sí desde el menú contextual (clic derecho en la celda) y desde el menú Tabla.

Altura de la fila Para modificar la altura de una fila basta situarse en una de sus celdas (o seleccionar varias filas) y después tomar alguna de estas dos alternativas:

• Clic derecho para abrir el menú emergente, seleccionar la entrada Fila -> Altura...

• Desplegar el menú Tabla y seleccionar la entrada


112

Autoajustar -> Alto de fila...

Tenemos la posibilidad de indicar un ajuste dinámico del tamaño de la fila de acuerdo al contenido de la misma.

Se puede optimizar la altura de las filas a través de las siguientes opciones de la barra de herramientas de Tabla y en el menú Tabla -> Autoajustar:

• Altura optima de las filas (sólo si la tabla contiene alguna altura fija)

• Distribuir filas equitativamente (hay que tener seleccionadas varias filas de diferentes alturas)

Ancho de la columna Para modificar el ancho de una columna basta situarse en una de sus celdas (o seleccionar la columna y después tomar alguna de estas dos alternativas:

• Clic derecho para abrir el menú emergente, seleccionar la entrada Columna -> Ancho...

• Desplegar el menú Tabla y seleccionar la entrada Autoajustar -> Ancho de columna...

Tenemos la posibilidad de de indicar el ancho de la columna seleccionada y también se puede especificar otras columna en caso de necesidad de modificar su ancho.

Se puede optimizar el ancho de las columnas a través de las siguientes opciones de la barra de herramientas de Tabla y en el menú Tabla -> Autoajustar:

• Ancho óptimo de las columnas (sólo si la tabla contiene alguna altura fija)

• Distribuir columnas equitativamente (hay que tener seleccionadas varias filas de diferentes alturas)

ESCENAS

En la introducción de la Práctica 2 se comentaba que una escena de Descartes es una referencia a un programa realizado en un lenguaje llamado Java y tal que las instrucciones o código se escribe formando

parte del contenido del archivo HTML. Este código se denomina applet.

Para que puedan verse las escenas se requiere que esté instalado y habilitado el intérprete del lenguaje Java (Máquina Virtual de Java) en el ordenador que se esté utilizando.

Además Java necesita conocer las características del nippe Descartes para poder interpretar el código o applet insertado en la página Web. Para ello se debe de instalar un módulo de software o plug-in que es requerido y utilizado siempre por cada escena ya que contienen el programa base (nippe) que interpreta su código, realiza la representación que corresponde en cada caso, permite la interacción posterior, así como su edición y modificación. Modificando el código se consigue una escena diferente.


113

En esta práctica nos interesa sólamente reconocer la presencia del applet Descartes en las páginas Web que incorporan escenas, ya que en el proyecto que hay que hacer no se modificará el código de las dos escenas que contiene.

Al repasar el entorno de OOo Writer/Web se explicó brevemente la barra de Menú. En ella está el menú Ver que incluye tres modos de consultar el editor: Configuración de impresión, Diseño para internet y Código fuente HTML Habitualmente se trabaja en modo Diseño para internet para editar la página. Para ver el aspecto que tendrá el documento cuando lo imprima se utiliza el Diseño de

Internet. El modo Código fuente permite editar el código HTML.

Ya se han visto diferentes escenas abriendo páginas con un navegador, como Internet Explorer, Filezilla ó Netscape. Cuando se abre la página en un editor cualquiera en el modo Código fuente el applet empieza donde dice

<applet width=480 height=356 code="descinst.Descartes.class" archive="descinst.jar,http://descartes.cnice.mec.es/plugin/descinst.jar" MAYSCRIPT>

luego continua el código que genera la escena y termina con un cierre de etiqueta

</applet>

Esta información no es relevante para este curso básico pero se indica para el lector interesado que quiera consultarlo si lo desea.

Una diferencia entre editores HTML consiste en cómo indica cada uno la situación de una escena de Descartes en el modo que OpenOffice.org Writer/Web llama Diseño para internet: El editor FrontPage

presenta una jota mayúscula (de Java), en Dreamweaver CS3 aparece la típica taza de café de Java

, KompoZer/N|VU no muestra nada y OOo Writer/Web deja ver el icono .

En el proyecto de la presente práctica se trabaja con el archivo ejercicio3.html que se encuentra en la carpeta proyectos del curso. Veamos el aspecto de la Escena A abriéndolo con el del navegador desde este enlace (imagen alternativa)


114

Abramos el archivo anterior con el editor OOo Writer/Web.

El aspecto en modo Diseño para Internet es el que muestra esta imagen.


115

Donde en el navegador se ve la escena de Descartes y se puede interaccionar con ella...

... en el editor HTML vemos un icono del tamaño de la escena que representa el applet Java.

Haciendo clic derecho sobre el icono del applet, abrimos la ventana Editar Applet que muestra la imagen adjunta; podemos ver los atributos referidos a las dimensiones de la escena (width-height), el nombre del archivo (archive) imprescindible para que el navegador pueda interpretar el código y hacer posible que se vea la escena,.... Es interesante poder editar desde aquí el código.

Tanto en modo Diseño de Internet como en Código fuente HTML, a través del menú Editar (o combinando teclas) podemos Copiar (Ctrl+C) la escena seleccionada y después Pegar (Ctrl+V)

en cualquier otro espacio de la página o en distinta página.


116

Pero esto corresponde a las dos prácticas siguientes.


117

Índice de actividades

Conviene saber

1 Situación de la página

La página trabajo3.html debe estar situada en la carpeta proyectos donde tambien se encuentra el archivo de origen ejercicio3.html

Los archivos de imagen vinculados a la página trabajo3.html deberán estar todos reunidos en la misma carpeta que se creará para este fin y que se llamará para su mejor identificación imagenes3. La figura adjunta muestra la estructura de carpetas para este proyecto.

2 Colores

Nombre del color Fondo R V A Codigo hexadecimal

Negro 0 0 0 #000000 Rojo Descartes 153 51 102 #993366 Azul Oscuro Descartes 0 102 153 #006699 Azul Claro Descartes 234 244 255 #EAF4FF Azul luz Descartes 226 253 254 #E2FDFE Crema medio Descartes 254 230 184 #FEE6B8 Crema Claro Descartes 255 248 225 #FFF8E1

Estos son los colores que se verán en la prágina del proyecto y deben de estar en la paleta de colores antes de empezar a usarlos.

Verde claro Descartes 233 232 203 #E9E8CB

3 Textos

El tipo de letra es Verdana.

Los textos del proyecto deben de tener un aspecto muy similar sobre todo en el color, en el tamaño y en la característica de realzado (negrita, cursiva o subrayado) cuando exista.

4 Título de la página

El título de la página deberá ser "Trabajo Proyecto 3" que es el que aparece en la barra superior del navegador cuando se abre la página. En la entrada Propiedades... del menú Archivo de Writer/Web OOo se podrá poner título a la página.

5 Imágenes y elementos gráficos

En la primera celda de la primera fila de la tabla de encabezado se insertará la imagen logotipo de Descartes.

Y al final de la página están otras tres:

Las dos primeras además llevan vínculos a otras páginas.

Otros elementos asociados con el borde de párrafo son laslíneas horizontales que separan ciertos espacios de la página:Una separa el final de la Actividad 4 y el comienzo de laESCENA B y la otra separa la Actividad 7 del pie de página.Estas líneas ocupan el 100% del ancho de página y tiene unancho de 3 puntos y con color Azul Oscuro Descartes R=0,V=102, A=153.


118

6 Tablas

El contenido que aparece en la página trabajo3.html se estructura en tablas por ser un objeto de diseño ya conocido: maquetación de la página mediante tablas en lugar de hojas de estilo CSS que sería lo más adecuado pero se necesitaría más dedicación en este curso.

Las dimensiones de casi todas las tablas son del 100% de la ventana (no se recomienda medidas en pixeles). Las celdas que forman la tabla tienen tamaños relativos (porcentajes de tabla) y diversos colores de fondo.

7 Hipervínculos

Nos trasladan a otras páginas o a otras partes de la misma página. Un hipervículo se pone como propiedad añadida a un texto o una imagen y permite "saltar" a otro lugar. Por ejemplo las imagenes flecha arriba y flecha a la izquierda de la práctica llevan asociados sendos hipervínculos.

Planificación de la actividad

1 Crear una nueva carpeta con el nombre imagenes3 (sin acento) dentro de proyectos y copiar en ella los archivos boton_arriba.gif, boton_atras.gif, logo2.gif y logo.gif que se encuentran en la carpeta imagenes_comunes dentro de la carpeta Descartes.

2

Abrir con el editor HTML la página modelo ejercicio3.htm que se encuentra en la carpeta Proyectos del Curso Básico y seguidamente guardarla con el nombre (Guardar como...) trabajo3.htm; de esta manera podremos empezar a hacer modificaciones en una copia de ejercicio3.htm y éste quedará cerrado en su estado original.

3 Establecer propiedades de la página poniendo título o nombre ("Trabajo Proyecto 3"), tema ("Editor HTML") y comentario ("Proyecto propuesto en la Práctica 3 del curso").

4 Modificar la página tal y como se indica en los textos de color gris claro y borrar estas indicaciones.

5

Las imágenes boton_arriba.gif, boton_atras.gif, logo2.gif y logo.gif de la página donde modificamos deben de pertenecer a la carpeta imagenes3, por lo que hay que cambiar los vínculos actuales de las tres primeras que pertenecen a la carpeta imagenes_comunes. Esta circustancia es importante puesto que proyecto que se envía al tutor consistirá en el archivo trabajo3.htm y la carpeta imagenes3.

6 Firmar en el pie de página con el nombre y dos apellidos. Modificar el año que figura por el actual.

7 Guardar los cambios realizados.

Las actividades propuestas anteriormente se corresponden con contenidos desarrollados en la Introducción o presentados en las Actividades Guiadas. Se puede seguir las indicaciones que se dan allí o consultar alguno de los pasos que no se sepa resolver:


119

Copiar la página del proyecto (Página 119)

Abrir y guardar desde el editor (Página 119)

Modificaciones sobre la página (Página 122)

Insertar imágenes y líneas (Página 125)

Insertar una tabla y cambiar su diseño (Página 127)

Poner enlaces a textos e imágenes (Página 133)

Copiar la página del proyecto

Este apartado pudiera parecer trivial pero no es así para aquellos que tengan poca experiencia en desarrollo de páginas web.

El proyecto exige que se envíe al tutor el archivo trabajo3.html y el conjunto de imagenes vinculadas a éste (las que se ven al abrirlo con el navegador ) dentro de una carpeta denominada imagenes3.

El archivo trabajo3.html se crea haciendo una copia de ejercicio3.html, dentro de la carpeta proyectos.

Obtención de una copia de ejercicio3.html

En ningún momento de guardarán los cambios en el editor HTML con el original ejercicio3.html

Con el explorador del sitema se abre la carpeta proyecto, se selecciona ejercicio3.html, se copia (Ctrl+C) y se pega en la misma carpeta (Ctrl+V). Finalmente se cambia el nombre de la copia por trabajo3.html. Pero si ya se tiene alguna experiencia con el editor HTML, la copia puede lograr de esta manera:

Abriendo el original ejercicio3.html con Writer/Web OOo y guardándando con la opción Guardar como... con el nombre trabajo3.html. Las referencias a las imágenes son las mismas en el original y en la copia. Writer/Web al Guardar como... cierra el original ejercicio3.html sin cambios y pone en estado de edición a trabajo3.html a partir de este momento las modificaciones se hacen en trabajo3.html y conducirá a la realización del proyecto.

Los archivos vinculados a la página del proyecto

Las imágenes logo.gif, logo2.gif, tabla_activ6.gif, boton_arriba.gif, boton_atras.gif son necesarias para poder ver y editar las escenas de Descartes. Ahora bien estos archivos vinculados están en una carpeta diferente a la carpeta proyectos que contiene ejercicio3.html y trabajo3.html

No es necesarios incluir el archivo tabla_activ6.gif en la carpeta imagenes3, ya que en su lugar se debe crear una tabla (es sólo un modelo a seguir para crear la tabla)

El archivo vinculado... ... está en la carpeta... ... deberá copiarse

en imagenes3 logo.gif Descartes/imagenes_comunes SI

logo2.gif Descartes/imagenes_comunes SI boton_arriba.gif Descartes/imagenes_comunes SI boton_atras.gif Descartes/imagenes_comunes SI tabla_activ6.gif ../Curso_basico/practica3/imagenes NO

Abrir y guardar desde el editor

En la ficha anterior hemos indicado la manera de obtener el archivo trabajo3.html para empezar a hacer modificaciones a partir del contenido del original ejercicio3.html


120

Ahora se explica cómo abrir trabajo3.html en el editor Writer/Web OOo para llevar a cabo las trasformaciones que se piden en el proyecto de esta práctica y guardar los cambios.

Supuesto que el programa OpenOffice.org esté cerrado. La imagen lateral adjunta muestra el menú Archivo desplegado de OpenOffice.org después de abierto con el acceso directo.

La opción Archivo -> Abrir conduce a una ventana de exploración de carpetas y desde aquí se selecciona trabajo3.html.

En este punto es interesante haber configurado OpenOffice.org para que la carpeta Mis documentos se haya cambiado por la de proyectos, así la exploración es más rápida. En la Introducción (panel de Configuraciones) se explica que esto se consigue desde el menú Herramientas -> Opciones -> OpenOffice.org -> Rutas.

Consultar la Introducción de esta práctica para recordar como se abre el editor y como es su entorno operativo.

En una misma sesión de trabajo necesitamos acudir frecuentemente al menú Archivo para seleccionar las siguientes opciones:

Abrir archivo

Hay cierta costumbre de abrir los archivos haciendo doble clic sobre su nombre desde el explorador del sistema. Se recomienda abrir trabajo3.html después de ejecutar el programa OpenOffice.org desde la opción Abrir... del menú Archivo.

Sobre la ventana de diálogo Abrir hay que seleccionar la carpeta proyectos, donde se encuentra, señalar el nombre del archivo y hacer pulsar el botón "Abrir".


121

Guardar

Lo normal es no terminar todas las trasformaciones en una misma sesión de trabajo; hay que terminar la sesión sin completar el proyecto y por tanto guardar el archivo trabajo3.html para no perder los cambios y continuar en otra ocasión a partir del estado en que quedó el último.

Es conveniente también, en la misma sesión de trabajo, Guardar el archivo que se modifica para protejer los cambios realizados ante situaciones de catástrofe como un apagón de luz o un bloqueo del sistema que obliga a reiniciarlo. Si alguna de estas o similares circunstancias se produjera, todos los cambios realizados desde al última vez que se guardó el archivo se perderían y se tendría que volver a repetir el trabajo. Esto es debido a que cuando se abre un archivo en el editor, en realidad se está haciendo una copia del mismo en la memoria interna (memoria RAM) que es volátil y se borra al apagar el ordenador. Cuando se guarda un archivo lo que se hace es reemplazar el contenido del archivo que está en el disco por el que está en memoria interna.

Las opciones de Guardar y Guardar como... están en el menú Archivo del editor y hay una diferencia entre una y otra.

• Guardar: Guarda los cambios del archivo, modificado en memoria interna, en la misma referencia en disco del archivo que se abrió en el editor. No es necesario poner nombre al archivo, es el mismo que se abrió. Por lo tanto se modifica el archivo en disco y se guardan las modificaciones permanentemente. Esta operación es la que hay que realizar frecuentemente sobre el archivo que se modifica con el editor (por ejemplo cada 15 minutos; conseguimos que en caso de catástrofe sólo perdamos 15 minutos de nuestro trabajo).

• Guardar como... Esta opción está pensada para guardar los cambios sobre otro archivo nuevo diferente al archivo abierto. También sin hacer cambio alguno se puede guardar creando una copia. Es el caso que hemos propuesto en la ficha anterior para obtener trabajo3.html a partir de una copia de ejemplo3.html

Visualizar página en el navegador

Una opción interesante del menú Archivo es la posibilidad de ver de vez en cuando el cambio efectuado en la página sobre el navegador. Esto es útil a cualquier diseñador de páginas web pues puede ir comprobando si el efecto que quiere producir cambiando la página realmente se consigue.

Al seleccionar la opción Vista previa en el navegador se invoca al navegador por defecto quien abrirá la página que está actualmente en la memoria del editor. Por lo tanto se superpondrá a la ventana de Writer/Web OOo la ventana del navegador por defecto (Internet Explorer, Mozilla Firefox, ...). Una vez consultada la página en el navegador se puede cerrar su ventana.

OpenOffice.org abre en el navegador un archivo temporal de trabajo3.html que tiene en otra carpeta distinta a proyectos y no se ven las imágenes vinculadas, ¿fallo del programa?, ¿falta de documentación del que redacta este curso?. Es por lo que se aconseja, actualmente, que antes de ver en el navegador los cambios de la página, se guarde el archivo y se abra, no a través de la opción Vista previa en el navegador de Writer/Web, sino desde el explorador de carpetas del sistema, llegando a la carpeta proyectos y haciendo doble clic sobre el nombre del archivo trabajo3.html.

Se puede dejar minimizado el navegador con la URL del archivo y cada vez que queramos tener una vista previa del mismo, primero guardarlo, luego maximizar el navegador y finalmente actualizar para ver los cambios.

Cerrar

La operación Cerrar del menú Archivo hace que el contenido de la memoria interna se blanquee y libere espacio para abrir otro archivo. Si se han realizado cambios desde la última vez que se guardó el archivo y se va directamente a Cerrar el sistema responde con una ventana de diálogo pidiendo si se quieren guardar los cambios; si se dice que no los cambios no se guardarán en el archivo en disco y éste no se actualiza. Lo normal es que si se está conforme con los cambios realizados se diga que si.


122

Para finalizar la sesión de edición con el archivo, hay que Guardar, Cerrar y opcionalmente Salir (si ya no se va a trabajar más con el editor).

Modificaciones sobre la página

Tratamos en esta ficha las siguientes modificaciones que se indican en la planificación de la actividad y en el propio archivo ejercicio3.html. Las de éste se irán eliminando a medida que se realizan los cambios. Se recomienda imprimir a color el archivo imagen_modelo.html que sirve de modelo final o bien tenerlo abierto en una ventana minimizada para ir comparando y si procede corrigiendo el archivo ejercicio3.html

Cambio del título de la página

Abrir el menú Archivo y seleccionar la opción Propiedades... En la ficha "Descripción" se rellena los apartados "Título", "Tema" y "Comentarios" como se muestra en la imagen adjunta.

Finalmente pulsar el botón de "Aceptar".

Ahora puede comprobarse que ha cambiado el contenido de la barra de título en el navegador

En el Código fuente HTML del archivo encontramos estas descripciones en las etiquetas siguientes y que además sirve para documentar el archivo:

<TITLE>Trabajo Proyecto 3</TITLE> <META NAME="CLASSIFICATION" CONTENT="Editor HTML"> <META NAME="DESCRIPTION" CONTENT="Proyecto propuesto en la Práctica 3 del curso">

Cambiar el formato de los textos

Se ejemplifican aquí los cambios de formato de texto que hay que realizar con el encabezado de la página. Los restantes cambios se hacen de forma similar.

El formato de texto para carácter está en la barra de menú Formato, pero es más práctico actuar desde la barra de Herramientas Formato

Para cambiar el formato de carácter de un texto, tiene que haberse éste seleccionarlo antes: se presiona el botón izquierdo del ratón, delante de la primera letra y se arrastra hasta completar toda la selección que hay que cambiar.

En Tipo de letra se elige Verdana, en Tamaño: 16, en Estilo de texto: tiene que quedar marcada la Negrita y desmarcada la Cursiva y

en color se selecciona el blanco en la paleta de colores


123

predefinidos.

Una vez que hemos hecho los cambios y hemos comprobado el resultado, incluso visualizando página en le navegador, procede eliminar el texto entre paréntesis.

Para eliminar texto, primeramente tiene que seleccionarse posicionando el ratón delante del paréntesis de la izquierda y arrastrando hasta completar; después se pulsa la tecla <Supr> (suprimir). También hay que pulsar nuevamente <Supr> para eliminar la línea de párrafo en blanco que ha quedado.

Cambiar el color de fondo de una celda

Vamos a ver cómo se cambia el color de fondo de la celda en la tabla del encabezado que contiene el texto "Unidad de Prueba".

Para otras celdas se procede similarmente.

Consultar la ficha 8 (Tablas) de la Introducción para recordar cómo se modifica una tabla.

Se coloca el cursor sobre la celda y se hace clic para activarla.

En el menú Tabla de selecciona la entrada Propiedades de la tabla...

En la ventana de diálogo que aparece

• Seleccionar la solapa Fondo

• Poner los parámetros "Como" en Color y "Para" en Celda

• En la paleta de color de fondo seleccionar en la penúltima fila el color solicitado.

• Pulsar el botón "Aceptar"

Comprobar el resultado, incluso Visualizar en el navegador.


124

Cambiar el ancho y la alineación de una tabla

Cambiar el ancho de la tabla al 85% y poner alineación centrada a la misma. No confundir la alineación centrada de la tabla, que se hace respecto al espacio horizontal total disponible en pantalla, con la alineación centrada del texto respecto de la celda de la tabla (ver la siguiente sección). El proyecto solicita ambas cosas.

El ejemplo es una tabla con una sola celda (1x1) pero el proceso siguiente es general.

Para cambiar el ancho de la tabla hay que invocar las propiedades de la tabla. Esto se consigue, haciendo clic izquierdo en cualquier parte de la tabla, desplegando el menú Tabla y eligiendo

la opción Propiedades de la tabla...

En la ventana de diálogo de Formato de tabla hay que cambiar el Ancho a "85" y marcar la casilla Relativo para la opción %.

En el apartado de Alineación de la tabla, elegir la opción Centrado.

Cambiar la alineación de un párrafo

La alineación horizontal del texto dentro de una celda o una ventana en general es una propiedad de párrafo. No es necesario seleccionar todo el texto para cambiar la alineación. Basta insertar el cursor entre letras del párrafo (haciendo clic izquierdo) para que el párrafo esté seleccionado.

Visitar la Introducción de esta práctica para repasar las características de Writer/Web OOo relativas a Textos-Párrafos.

En la barra de Herramientas de Formato está el icono de centrado de párrafo y basta pulsarlo para que el párrafo dentro de la celda quede centrado en la línea. Este camino es francamente corto.

Si se prefiere se puede acceder al menú

Formato y seleccionar la entrada Párrafo... En la imagen de la derecha podemos ver las opciones de alineación del párrafo.


125

Insertar imágenes y líneas

Normalmente se suele decir que se inserta una imagen en una página pero ya se ha dicho anteriormente que las imágenes son objetos externos que se vinculan, no se incrustan, en la página; realmente el editor escribe en el código HTML de la página el nombre del archivo de imagen y la dirección de carpeta donde se encuentra. Por esto cuando al abrir una página en el navegador no vemos la supuesta imagen que debería estar en cierto espacio de la misma, es porque o simplemente el archivo no se encuentra en la carpeta a la que hace referencia el vínculo o si existe, es que se ha escrito mal esa referencia.

Por otra parte las líneas horizontales que estamos empleando en este proyecto no son objetos externos sino elementos gráficos que el código HTML dibuja en la página.

Insertar una imagen

logo2.gig

Llegado a este punto del proyecto, se supone que existe una carpeta de imágenes vinculadas imagenes3 y que en ella están las siguientes imágenes: logo.gif, logo2.gif, boton_arriba.gif y boton_atras.gif

Si no existiera la carpeta o faltara alguna imagen, este es el momento ponerse a hacerlo.

Si las imagenes vinculadas se copiaron manualmente y el archivo trabajo3.html se generó copiando y pegando ejercicio3.html o bien Guardando como... en el editor, además hay que cambiar el vínculo de las imagenes logo2.gif, boton_arriba.gif y boton_atras.gif pues éstas estarán referidas a la carpeta imagenes_comunes

boton_arriba.gif y boton_atras.gif

Después de eliminar el texto de la celda donde debe ir logo.gif se comprueba que el cursor queda centrado

en la celda. Ahora hay que desplegar el menú Insertar y se selecciona la opción A partir de archivo... ó bien se pulsa este icono directamente de la barra de Herramientas estándar.

La imagen logo.gif inmediatamente insertada en la celda tiene el aspecto de la figura adjunta. Se observan los 8 tiradores del marco asociado que rodea la imagen y la marca de anclaje de la imagen dentro de la celda.

La imagen se desactiva haciendo clic fuera del marco.

Insertar un alínea horizontal

En el párrafo encima del apartado "2.- ESCENA B" existe la indicación de insertar una línea horizontal de color Azul Oscuro Descartes.

La ventana de exproración que aparece, titulada Insertar imagen, permite llegar hasta la carpeta proyectos/imagenes3 . Allí se selecciona el archivo logo.gif y después pulsar el botón "Abrir"


126

Se selecciona el texto y se borra, pero queda un párrafo en blanco. La marca de párrafo se puede ver

pulsando el icono Caracteres no imprimibles situado en la barra de Herramientas Estándar

Para insertar la línea horizontal sobre el párrafo se despliega el menú Insertar y se elige la entrada Regla horizontal... que abre la ventana de selección.

En la ventana de diálogo se hace clic sobre la selección Sencilla" y se pulsa "Aceptar".

"

Vemos la linea insertada en el párrafo.

Ahora hay que cambiar las propiedades de la línea.

Haciendo clic derecho sobre la línea de abre el menú emergente y se selecciona la opción Editar estilo de párrafo...


127

Se elige el estilo (1,10 pt) y un color (Azul Oscuro Descartes).

Insertar una tabla y cambiar su diseño

Se trata de crear una tabla dentro de una celda de una estructura de tabla y poner formato siguiendo el modelo de una imagen que luego hay que eliminar.

Podemos ver perfectamente la estructura de tabla que soporta los contenidos del apartado "2. ESCENA B" de la página.

Actualmente esta tabla tiene un ancho de 1024 px y debe de tener 100%. ¡No olvidar este cambio!


128

Tiene tres filas y dos columnas. La tercera fila tiene una sola celda y contiene el enunciado de la Actividad 7 y la imagen que servirá de modelo para la tabla que hay que crear. Esta fila se dividirá en dos columnas quedando el enunciado solamente en la celda izquierda (la imagen hay que eliminarla) y la celda de la derecha contendrá la tabla que hay que insertar usando las herramientas del editor.

Llegado a este punto es aconsejable repasar la ficha de Tablas explicada en la Introducción de esta práctica para recordar como se seleccionan varias celdas, como se combinan para reducirse en una sola, como se establecen las propiedades de tabla y celda (color, separación, borde, etc)

También conviene tener a mano los códigos de colores se aplicarán tal como se indicó en el Indice de actividades relativas a este proyecto.

La estructura donde va a ir la tabla es por tanto otra tabla. Esta tiene un ancho de 1024 píxeles y el proyecto indica que debe ocupar el 100% del ancho de la ventana. Esto permite que se pueda adaptar al ancho de cualquier monitor. Pensar que pasaría si la página se viera en un monitor de 800px: habría que hacer deplazamiento horizontal para poder ver la totalidad.

Dividir la fila en dos columnas

La imagen de la izquierda es el resultado de la división de la celda

Hacer clic izquierdo para situar el cursor en cualquier espacio libre de la celda única de la tercera fila de la estructura. Desplegar el menú Tabla y seleccionar Dividir celdas...

En la ventana de diálogo se pone en Dividir

Celda y en orientación se marca

"Verticalmente"

Dejar sólo el enunciado de la actividad en la celda izquierda


129

Una vez que ya conocemos el trabajo a realizar hay que eliminar el texto entre paréntesis. De momento se puede dejar la imagen modelo pero finalmente hay que eliminarla (basta seleccionarla y pulsar la tecla <Supr>).

Observar que el texto queda centrado verticalmente y alineado a la izquierda. Para conseguir este efecto y si fuera necesario después de hacer las eliminaciones previas, hacer clic derecho para abrir el menú emergente y seleccionar la opción Centrado para la entrada Celda

A veces el texto aparentemente no queda centrado verticalmente y esto se debe a que hay párrafos en blanco por arriba o por debajo del texto. Esto se comprueba enseguida si se hace clic izquierdo sobre la línea en blanco; si el cursor queda ahí es que hay párrafo y éste se puede eliminar pulsando la tecla de borrar a la izquierda (no confundir con <Supr>). Repetir hasta la eliminación de todas las líneas en blanco.

Insertar la tabla en la celda derecha

Situar el cursor en la celda derecha de la tercera fila de la estructura. Deplegar el menú Tabla y seleccionar Insertar -> Tabla... En ventana de diálogo que aparece poner Filas 7, Columnas 6, y marcar la casilla Borde. Aceptar.

Seleccionar las celdas de la primera fila indicadas en la imagen (Searrastra el ratón desde la primera a la últtima celda teniendo pulsado y retenido el botón izquierdo).

Para unir las celdas seleccionadas, desplegar el menú Tabla y tomar la opción Unir celdas


130

Después en menu Tabla -> Propiedades de la Tabla... se establece las siguientes propiedades que se indican

Tabla

Flujo de texto


131

Columnas

Borde

Poner altura a las filas


132

Para poner altura a una fila hay que situarse sobre una celda de la misma y abrir el menú contextual haciendo clic derecho.

Se selecciona Fila -> Altura.

En la ventana de diálogo se puede fijar la Altura y Ajuste dinámico (ajusta el ancho al contenido).

En las dos primeras filas se ha marcado el ajuste automático y en las que no llevan contenido se ha establecido 0,8 cm.

Poner color a las celdas

Seleccionar la primera columna arrastrando el ratón y después

seleccionar menu Tabla -> Propiedades de tabla. En la solapa de Color de la ventada del diálogo de Formato de tabla se selecciona "Color Azul Oscuro Descartes" en la penúltima fila de la paleta.

La propiedad de color sobre las celdas seleccionadas también se consigue (más rápido) marcando el icono

en la barra de Herramientas de Tabla (flotante)

De forma similar se pone color a las celdas de la primera fila. Las celdas de la segunda fila (excepto la primera) tienen color de fondo "Verde claro Descartes".

Para el resto de las celdas no se pone color pues trasparentan el fondo de la estructura.


133

Poner formato al texto

Escribir todo el texto que debe contener cada celda. Después se selecciona todas las celdas que tengan el mismo formato de texto y se establecen las propiedades a la vez.

Lo más sencillo es utilizar la barra de herramientas Formato para elegir el

Tipo y Tamaño

Estilo

y el color de texto

Texto en... Tipo Tamaño Estilo Color

Primera fila Verdana 12 pt Negrita Blanco

Primera columna (excepto 1ª celda) Verdana 12 pt

Normal (por

defecto) Blanco

Segunda Fila (excepto 1ª celda) Verdana 12 pt Normal Negro

No olvidar que la alineación del texto es centrada

Poner enlaces a textos e imágenes

Cada una de las imágenes de final de página de este proyecto, boton_arriba.gif y boton_atras.gif deben de permitir enlazar respectivamente con la portada de la Web Descartes cuya dirección es http://descartes.cnice.mec.es y la página ejemplo3.html que ha servido de plantilla original para realizar este proyecto. El primer enlace es una dirección absoluta a un servidor registrado en Internet, y ya está puesta como propiedad del boton_arriba.gif, en cambio el segundo enlace, el que tendrá la imagen boton_atras.gif es una dirección a un archivo en el equipo local y no conviene poner la dirección absoluta a la carpeta donde se encuentra pues tenemos que garantizar que el enlace funcione cuando lo reciba el tutor en su equipo, también local. El enlace a ejemplo3.html ha de ser relativo a carpeta de la página donde está trabajo3.html. Puesto que ambos archivos estan en la misma carpeta proyectos basta con escribir simplemente el nombre del archivo pues el enlace no tiene que saltar a otra carpeta diferente.

Pudiera ser conveniente, llegado a este punto, repasar la información relativa a Enlaces de la Introducción de esta práctica.

Seleccionar la imagen boton_atras.gif y hacer clic derecho que despliega el menú emergente para consultar y actualizar la propiedad Hipervínculo de la Imagen.

Es interesante que aparezca una etiqueta emergente explicativa cuando se pase el puntero del ratón sobre la imagen con enlace, por ejemplo "Ir a la página Ejercicio3.html". Esta etiqueta es la que se pone en el campo "Nombre" (funciona con Internet Explorer pero no con Mozilla Firefox). Como complemento y para normalizar el formato de enlaces de los dos botones sería muy conveniente poner una etiqueta emergente "Ir a la Web Descartes" a boton_arriba.gif.


134

La URL es relativa a la dirección de la página , por eso aunque se ha seleccionado ejercicio3.html con su ruta correspondiente (así es como se ve en la ventana), en el código HTML sólo figurará el nombre del archivo ya que se encuentra en la misma carpeta proyectos que trabajo3.html.

El campo "Frame" es el marco de ventana donde abre el navegador la página. Elegiremos _self para que ejercicio3.html se abra en marco actual, el mismo donde está trabajo3.html.

URL: Localizador Universal de Recursos. Es decir una forma estandar

(Universal/Normalizada/Uniforme) para indicar donde (Localizador) se encuentra un objeto (Recurso) en la red. Este recurso puede ser una página web, una imagen, un sonido, una animación y en general todo aquello que sea manejable por el navegador de internet.


135

En esta sección se indica cómo se puede comprimir los archivos del Proyecto 3 para enviarlos, al tutor o tutora, adjuntos al correo electrónico en una única carpeta comprimida.

Nos referiremos a dos programas de compresión, el que viene incorporado en Windows XP y 7-Zip. Una copia gratuita de 7-Zip puede ser descargada desde su sitio web http://www.7-zip.org bajo licencia GNU LGPL.

Se trata de comprimir el archivo trabajo3.htm y la subcarpeta imagenes3 que se encuentran en la carpeta proyectos

1 Seleccionamos un elemento con un clic sobre él (en este caso sobre la carpeta)

Para seleccionar el segundo (el archivo), mantenemos pulsada la tecla "control" (ctrl) y pinchamos sobre él.

En la imagen de la derecha se observan los dos elementos seleccionados.

2 A continuación pulsamos con el botón derecho del ratón sobre el archivo trabajo3.htm, evitando que se deshaga la selección anterior.

Aparecerá un menú contextual muy parecido (no igual) según la versión del sistema. Elige el programa que corresponda:

Windows XP

Se selecciona la entrada Enviar a y después Carpeta comprimida (en zip)


136

3

Aparecerá en la carpeta proyectos un nuevo archivo comprimido, trabajo3.zip, como muestra la siguiente imagen. Windows pone un nombre por defecto a la carpeta comprimida (homónimo del primer archivo seleccionado).

4

Cambiar su nombre trabajo3.zip por el de codigo_sp3.zip

El archivo codigo_sp3.zip es el que debe enviarse al tutor o tutora, donde "codigo" será el nombre de usuario (login) asignado en el curso al alumno o alumna (por ejemplo mperez5_sp3.zip).

5

Haciendo doble clic en la carpeta comprimida codigo_sp3.zip lo abrirá el programa que tenga asignado el sistema operativo. En la figura observamos que, en este caso, es el programa es WinZip.

Se puede comprobar que los archivos de imagen tienen la ruta imagenes3\, esto significa que cuando se descompriman en el ordenador de destino dentro de una determinada carpeta, las imágenes lo harán dentro de la subcarpeta imagenes3, que se creará automáticamente si no existiera. Se conserva por tanto la posición relativa entre la página trabajo3.htm y las imágenes, de suerte que la vinculación no se pierde.

7-Zip Se selecciona la entrada Añadir a " proyectos.zip". Es decir 7-Zip va a poner como nombre por defectoproyectos.zip a la carpeta comprimida.


137

3 Se inicia el programa 7-Zip y crea el archivo proyectos.zip en la misma carpeta proyectos

4 Cambiar su nombre proyectos.zip por el de codigo_sp3.zip

El archivo codigo_sp3.zip es el que debe enviarse al tutor o tutora, donde código será el nombre de usuario (login) asignado en el curso al alumno o alumna (por ejemplo mperez5_sp3.zip).

5 Haciendo doble clic en la carpeta comprimida codigo_sp3.zip lo abrirá el programa que tenga asignado el sistema operativo (puede ser otro diferente a 7-Zip). Para que lo abra 7-Zip tenemos que elegirlo desde el menú emergente (hacer clic derecho sobre el nombre) y se puede consultar su contenido

se puede consultar el contenido de la carpeta imagenes3 haciendo doble clic sobe su nombre


138

para volver a la vista anterior pulsar el icono

Se puede comprobar que los archivos de imagen tienen la ruta imagenes3\, esto significa que cuando se descompriman en el ordenador de destino dentro de una determinada carpeta, las imágenes lo harán dentro de la subcarpeta imagenes3, que se creará automáticamente si no existiera. Se conserva por tanto la posición relativa entre la página trabajo3.htm y las imágenes, de suerte que la vinculación no se pierde.

curso basico 2009 practica3 - recursos -...

Documents