CONTENIDOS

La realización de una página web requería hace años conocimientos más o menos avanzados de programación en HTML; resultaba fatigoso generar cada una de las páginas al deberse escribir en ese lenguaje que permite visualizar los documentos. Hoy en día, podemos superar dichos impedimentos y generar páginas web con unos cuantos conocimientos de programas de edición. Uno de estos programas es NVu/KompoZer y a ello dedicaremos estas sesiones del curso. Los contenidos básicos y algunos más profundos son los siguientes:

• Introducción. ¿Por qué NVu/KompoZer? • Descarga e instalación • Creación de páginas web

o Principios básicos o Programación básica en HTML o Software para la creación web

• Entorno gráfico • La primera página web • Formato • Enlaces • Imágenes • Tablas • Hojas de estilo • Formularios • Plantillas • Personalización • Otros aspectos

o Capas o Marcos

• Validación HTML • Publicación con Nvu / KompoZer • Publicación vía FTP (Filezilla) • Atajos de teclado • Materiales utilizados • Ejercicios

Nvu, Software libre para hacer páginas web

NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin costo alguno, incluyendo su código fuente por si necesita hacer cambios especiales. Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola en una interesante opción para diseñar sitios web. NVU esta diseñado para ser extremadamente fácil de usar, haciéndolo ideal para los usuarios menos experimentados que quieran crear una web atractiva y de diseño profesional sin necesidad de conocer HTML o código web. La página principal del proyecto es http://www.nvu.com/.

En este tutorial hablaremos acerca de una opción más para aquellos que desean conocer y realizar en formato hmtl, se trata del editor HTML Nvu. El creador de

este proyecto es Daniel Glazma n. NVU es un editor de páginas web WYSIWYG (es un acrónimo "lo que ves es lo que obtienes", en inglés) es un programa que se puede utilizar en diferentes sistemas operativos o sea que es multiplataforma. Se encuentra basado en Mozilla Composer, pero de ejecución independiente. Inicialmente pensado para rivalizar con aplicaciones como Dreamweaver o FrontPage, Nvu es una alternativa para los que no tienen un gran dominio del HTML.

Ofrece una amplia variedad de herramientas para crear de forma cómoda una página web, entre otros un servidor FTP integrado, un entorno de edición WYSIWYG intuitivo, con la posibilidad de pasar fácilmente en el modo de código fuente. Para los colores, dispone de un editor muy fácil de usar, junto a un editor CSS eficaz para principiantes con escasas nociones de hojas de estilo. Está basado en el motor Gecko, el mismo que usa la familia de navegadores web Mozilla, lo que nos asegura una compatibilidad total con los estándares de edición web (XUL, CSS, XML y JavaScript). Incluye otras interesantes características como la gestión de proyectos web o la posibilidad de personalizar la interfaz y barras de herramientas. Además NVU está disponible para Linux, Mac OS X y Microsoft Windows, aunque puede compilarse para cualquier plataforma con el Netscape Portable Runtime.

Hay una versión portátil de NVU que puede ser transportada y usada directamente desde una memoria USB sin necesidad de instalarse en el computador.

Por último (y no por ello menos importante) se trata de una aplicación con licencia GPL {General Public License), que nos da a los usuarios varias libertades básicas, entre ellas la posibilidad de hacer las copias que queramos/necesitemos del programa. Este hecho es una ventaja (por ejemplo) si estamos en el mundo de la enseñanza, ya que podemos utilizar con nuestros alumnos y alumnas esta

aplicación y podemos distribuirla para que la instalen en sus domicilios (si no tienen conexión a Internet) y puedan trabajar con la misma aplicación que se usa en los centros educativos.

No hay que olvidar que diversas administraciones con competencias en educación (primero fue Extremadura, luego Andalucía, después Castilla-La Mancha, Madrid, Valencia...) han apostado por el software libre y está dotando a los centros con equipos informáticos que tienen una distribución GNU-Linux (gnuLinex, Guadalinex, Max, Molinux...), las cuales tienen NVU como programa de edición de páginas Web.

KompoZer

KompoZer es, para quienes no lo conocen, un editor de páginas web WYSIWYG (What you see is what you get - Lo que ves es lo que recibís). Es un derivado de NVU, otra aplicación de edición de páginas web basado en Mozilla Composer, cuyo desarrollo llegó a su fin hace un algunos años. El editor NVU poseía una interfaz con la posibilidad de elegir entre diferentes visualizaciones, lo que facilitaba la creación de sitios web. Como la aplicación dejó de ser desarrollado y sus fallas continúan existiendo, Fabien Cazenave decidió tomar el código y continuar su desarrollo pero

bautizándolo KompoZer, ya que NVU es una marca registrada por Linspire.

Esta aplicación ha sido desarrollada, como he dicho anteriormente, con el único objetivo de facilitar al máximo el desarrollo de páginas web, incluso para el usuario más inexperimentado. Si bien a primera vista, KompoZer 0.7.10 (la última versión) parece igual a NVU, podremos encontrar diferencias, por ejemplo en su logo, en los botones agregados de"Deshacer" y "Rehacer" y en el diseño de la barra de herramientas. Si tenemos una visión más técnica al

respecto, nos daremos cuenta de que muchos errores han sido solucionados, por ejemplo problemas con relacionados con CSS que se mantenían desde la última versión de NVU. De hecho en las futuras versiones 0.8 y 0.9 de KompoZer, se espera poder exprimir más aún los errores que todavía poseen las CSS. También se desea crear un administrador de sitio más completo y una mejor interfaz de código HTML. Éstas futuras versiones todavía no tienen fecha de lanzamiento.

Aquellos que estén acostumbrados al uso de DreamWeaver se sentirán cómodos con la interfaz y opciones de KompoZer. Hace un tiempo atrás en Download.com (vínculo en inglés) se hizo referencia al mismo como una de las mejore alternativas a Adobe CS3 y fue comparable favorablemente con DreamWeaver.

Algunas de las herramientas de KompoZer son:

• Administrador de sitios FTP: cualquier sitio que el usuario haya especificado en sus Opciones de Publicación, podrá ser navegado en una barra lateral. También permite filtrar y mostrar archivos o solo documentos HTML o imágenes.

• Nuevos selector de colores: algo más ligado a lo que los usuarios acostumbran a utilizar. Se podrá elegir entre el selector de colores verde, azul y rojo para crear la tonalidad deseada, así como también elegir la saturación de la matiz

(hue saturation) y el brillo. En caso de que esto nos resulte incómodo, podremos elegir el color deseado con el mouse.

• Pestañas: una de las herramientas más conocidas de Mozilla esta disponible para KompoZer facilitando el trabajo y brindándole la posibilidad al usuario de realizar acciones de manera más fluida navegando entre pestañas. Se podrá utilizar la herramienta Deshacery Rehacer independientemente en cada una de las pestañas.

• Barras de tareas personalizables: se podrán elegir los botones que aparezcan en nuestras barras y los que no según nuestros gustos y/o necesidades.

Como podrás ver, ésta aplicación facilita mucho el desarrollo de sitios web con sus herramientas. Si siempre tuviste ganas de intentar hacer tu sitio web esta es tu oportunidad, solo necesitas KompoZer y un buen servicio de hosting!

DESCARGA

NVU es un programa de software libre, del que aun no existe una versión estable, la última apareció el 14 de Abril de 2005: Nvu 1.0 Preview Release. Entre sus características destacan las siguientes: Multiplataforma (Windows, Mac OS X, OS2, muchas variantes). Ha surgido posteriormente un proyecto que se ha encargado de facilitarnos un archivo que se instala fácilmente y asi poder tener el Nvu en español. Lo debes descargaren tú equipo e instalarlo directamente sin más operaciones de configuración. Por otro lado, está disponible una versión portable, que puede ser utilizada en cualquier disco duro o USB; La versión Nvu 1.0 rev 5 es la última disponible para la versión portable y se encuentra en inglés. La traducción al castellano se encuentra disponible aquí

KompoZer está disponible en su versión 0.7.10 en formato zip, pero en inglés para Windows32; su traducción al castellano tiene un proceso semejante al descrito con anterioridad con Nvu y está disponible en esta dirección. Este programa también está disponible para Linux y MacOS X, por lo que si uno se acostumbra al mismo, no tendrá problema en cambiar de entorno. Para descargar la versión de KompoZer 0.7.10 Portable tenemos que recurrir a una versión inglesa, que una vez descargada e instalada puede ser actualizada en español, con este archivo. Esta versión lleva disponible algunos meses, pero ha sido hasta recientemente cuando que portableapps.com (uno de los principales sitios sobre aplicaciones portátiles) ha sacado su propia versión. Entre las modificaciones que hacen, reducen el tamaño que ocupa el programa de 20mb a 10mb. Es preferible usar las versiones originales sin modificar, pero quien disponga de un USB muy pequeño, puede beneficiarse de la compresión adicional. Este es un software que inicialmente se encuentra en ingles, Esta última versión inglesa para windows puede descargarse aquí, pero requiere posteriormentedescargar la traducción al español.

En cualquiera de los procesos anteriores la actualización de idioma puede efectuarse realizando las siguientes operaciones.

• En todo caso, has debido descargar previamente en tu disco duro el XPI/paquete de idioma correspondiente a Nvu o KompoZer, según requieras, usando cualquier navegador (si usas un navegador basado en Mozilla, recuerda hacer clic con el botón derecho y escoger Guardar destino del enlace como...; ¡¡NO hagas clic con el botón izquierdo!!).

• Inicia Nvu o KompoZer. • Dirígete a Tools -> Extensions (Herramientas -> Extensiones si quieres

actualizar la traducción.

• Pulsa el botón Install (Instalar).

• Localiza el XPI descargado en tu disco duro y selecciónalo.

• Lee el mensaje del cuadro de diálogo de instalación de software y, una vez termine la cuenta atrás, pulsa el botón Install now.

• Una vez instalado, reinicia Nvu/KompoZer para que los cambios de idioma tengan efecto.

Principios básicos a tener en cuenta

¿Qué es una página web? Una página web es un documento de la World Wide Web (que intenta ser estandarizada por el World Wide Web Consortium, también llamada W3C), normalmente en formato HTML que proviene del estandar SGML oXHTML que proviene del estandar XML Una página web típicamente, incluye texto, imágenes y enlaces hacia otros documentos de la red, pudiendo además contener animaciones, sonidos, programas en Java, y cualquier otro tipo de documento, por medio de plugins y otras tecnologías.Actualmente las páginas web ya no están únicamente enfocadas para ser visionadas, sino que cada vez son más dinámicas permitiendo que el visitante participe en ellas mediante menus interactivos, encuestas, votaciones, etc.

Normalmente los formatos gráficos de las páginas web son JPEG para fotografías y GIF o PNG para otras imágenes como diagramas, dibujos, gráficos, etc. Los dos últimos formatos también se pueden usar para fotografías pero no son tan convenientes para ese propósito como JPEG (JPEG es un formato con pérdida, mientras que GIF y PNG son sin pérdida). Para animaciones se suele utilizar GIF, para imágenes con pixelstransparentes tanto GIF como PNG, y para imágenes con pixeles parcialmente transparentes, PNG (aunque dicha característica no está soportada por navegadores que no admiten los estándares W3C, tales comoInternet Explorer). Fuente y más información en: http://es.wikipedia.org/wiki/P%C3%A1gina_web

Sobre el contenido de un página web Como si de un artículo científico o un pequeño ensayo se tratara una página web debe ser un documento claro y debe estar bien organizado. Para empezar, hay que definir la temática sobre la que va a versar ese docuemnto, para, más tarde, establecer una organización y jerarquización de los contenidos teniendo presente la interrelación no secuencial que se puede llevar a cabo en los mismos mediante el uso de los enlaces o hiperenlaces.

Diseño y presentación Así como ocurre con los contenidos del documento web a preparar, el diseño y la presentación de la información que está contenida en ese documento debe establecerse siguiendo unos patrones claros de colores, formas, localización en la ventana del navegador, etc. Una página web en la que prime la sencillez y una buena combinación de colores y formas hará más atractivo el contenido al tiempo que servirá para una mejor difusión del mismo. Un buen ejemplo de esto es la propia página web de Google sencilla, pero a la vez atractiva. Hay que encontrar un equilibrio entre la estética y la sencillez en el diseño-creación de la web para lo cual es muy interesante observar e incluso ispecionar (viendo el código fuente) de las páginas web que ya se encuentran diseñadas y "expuestas" en la WWW.

En la imagen anterior se pueden apreciar algunos ejemplos de distribución de los contenidos de un par de páginas web que pueden ayudar a la hora de prediseñar este tipo de documentos.

Servicios de alojamiento El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. Los Web Host son compañías que proporcionan espacio de un servidor a sus clientes. El servicio de alojamiento de páginas web para docentes e investigadores en la UAM se suministra a través del CAU (ver enlaces) directamente sobre el servidor web de la universidad, sin embargo existen otras alternativas para este servicio, como son el alojamiento web que suministran los proveedores de internet y otros servicios de pago o gratuitos (generalemte se le añaden a estos algún tipo de contraprestación: límitaciones de uso, publicidad, etc.) a los que se puede acceder desde la Web. Fuente y más información en: http://es.wikipedia.org/wiki/Alojamiento_web

Creación, publicación y navegación Otro aspecto a tener en cuenta y previo al tratamiento directo de las páginas web y enlazando con las diferentes partes de la WWW es definir claramente las diferencias entre la cración de los documentos web, la publicación y la navegación. La creación de los documentos web se realiza generalmente sobre la estructura local, sobre nuestro ordenador personal, adjudicando para ello un directorio de nuestro disco duro para manejar los archivos que sean necesarios.

Una vez creados los documentos en nuestro ordenador (estructura local), hay que transferirlos al servidor (estructura remota), generalmente haciendo uso del protocolo FTP, publicando, de esta manera nuestros contenidos en un directorio específico del servidor (directorio remoto). El servidor es el ordenador que

administra el servicio de alojamiento de páginas web. Para aaceder a él deberemos de identificarnos e introducir una clave para acceder a su servicio. Para poder publicar un documento web, por tanto, se hace necesario disponer de un nombre de usuario y una contraseña específicos (estos datos están directamente relacionados con el alta en el servicio de alojamiento que en la UAM se gestiona a través del CAU desdeaquí).

El servidor gracias a sus características de hardware y software, se encargará de servir toda la documentación que hayamos puesto en el directorio remoto para que los usuarios de la WWW puedan navegar por sus contenidos a tevés de una dirección web o URL (Uniform Resource Locator).

Organización de archivos Un documento web puede contener múltiples ficheros con el texto codificado en HTML, las imágenes y otros. Es muy importante, al igual que con el contenido, las formas y la presentación, que se organicen bien los archivos con los que se va a trabajar. Para empezar, es interesante crear un archivo índice al que se le nombra como index.html ó default.html y que será el que localice por defecto el navegador para iniciar la lectura de nuestra documentación web. Con la creación de este archivo índice el navegador admitirá direcciones web URLs de directorio del tipo http://www.servidor.com/directoriodeusuario/ pues se dirigirá sin directamente a esta otra dirección http://www.servidor.com/directoriodeusuario/index.html

Los nombres de los archivos, además del necesario fichero índice arriba comentado, deben de ser sencillos e inteligibles pues nos facilitará el trabajo con los mismos. Es importante que se tenga en cuenta que el uso de minusculas y mayusculas en los nombres NO ES INDIFERENTE por lo que se recomienda que se usensiempre nombres en minúsculas así como se descarten nombres que incluyan espacios o caractéres especiales o "raros" (ñ, á, é, ó, â, etc.).

El uso de la extensión .html o htm es indiferente para nombrar a los archivos web, pero se recomienda siempre se utilice la misma (mejor html que está más extendido y es más correcto). En uso de directorio es también recomendable (para imágenes, documentos, etc.), pero su uso a veces puede traer problemas en la ubicación y relaciones de archivos por lo que si no se está trabajando con muchos ficheros es mejor que todo se incluya sobre un mismo directorio. Se emplearan varios directorios sólo con muchos archivos.

Programación básica en HTML

1. Principios básicos de HTML

El lenguaje HTML o lenguaje etiquetado de hipertexto es el lenguaje utilizado para crear páginas web. Un archivo html no es más que un archivo de texto convencional que puede editarse con cualquier editor básico (como el bloc de notas de Windows) con un texto al que se le han añadido unas etiquetas (generalmente circunscritas a los símbolos "<" y ">") tal y como se ve a continuación.

El lenguaje HTML es una aplicación de SGML conforme al estándar internacional ISO 8879. XHTML es una reformulación de HTML 4 como aplicación XML 1.0, y que supone la base para la evolución estable de este lenguaje. Además XHTML permite la compatibilidad con los agentes de usuario que ya admitían HTML 4 siguiendo un conjunto de reglas.

2. Principales etiquetas

Las etiquetas básicas de HTML, de obligada presencia en todo documento son:

• <HTML>: Es la etiqueta que define el inicio del documento html, le indica al navegador que todo lo que viene a continuación debe tratarlo como una serie de códigos html.

• <HEAD>: Define la cabecera del documento html, esta cabecera suele contener información sobre el documento que no se muestra directamente en el navegador. Como por ejemplo el título de la ventana de su navegador. Dentro de la cabecera <HEAD> podemos encontrar:

o <TITLE>: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana

o <LINK>: para definir algunas características avanzadas, como por ejemplo las hojas de estilousadas para el diseño de la página, ejemplo:<link rel="stylesheet" href="/style.css"

type="text/css"> • <BODY>: Define el contenido principal o cuerpo del documento, esta es la parte

del documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <BODY> podemos encontrar numerosísimas etiquetas. A continuación se indican algunas a modo de ejemplo:

o <H1>, <H2>,... <H6>: encabezados o títulos del documento en diferentes tamaños de fuente

o <P>: párrafo nuevo o <BR>: salto de línea forzado o <TABLE>: comienzo de una tabla (las filas se identifican con <TR> y las

celdas dentro de las filas con <TD>)

o <A>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web. Debe definirse el parámetro de pasada por medio del atributo href (ejemplo: <a href="http://www.google.es">Google</a> se representa como Google)

o <DIV>: comienzo de un área especial en la página o <IMG>: indica la existencia de una imagen para mostrarse en el

navegador o <LI><OL><UL>: Es uno de los mas utilizados para el manejo de listas.

3. Página web básica

oftware para la creación de páginas web

1. Tipos de programas Como ya se ha comentado en el apartado anterior, la creación de páginas web podría realizarse a través de cualquier editor de textos básico, siempre y cuando, tuvieramos un conocimiento perfecto del código HTML. Sin embargo, la existencia de software especializado del tipo WYSIWYG (del inglés, What You See Is What

You G et: lo que ves es lo que obtienes) hace posible que se pueda editar una página web como si de un procesador de textos convencional se tratara, siendo el resultado final de la página igual al visionado en el editor. Las capacidades, resultados y precio a pagar de la gran catidad de paquetes de creación de páginas web que existen son muy diversas por lo que es muy importante que escojamos uno en función de las necesidades de publicación en la web que tengamos, la orientación de los contenidos que vayamos a dar y el presupuesto para compra de licencias que manejemos. Además, y aunque la convergencia de funcionalidad y uso de los programas para creación de páginas web es muy similar hay que tener en cuenta que el familiarizarnos con uno u otro software nos llevará cierto tiempo, por lo que es otro criterio a considerar.

A continuación se recogen algunos ejemplos de programas que hacen muy sencilla la edición de páginas web a través de entornos relativamente sencillos y muy similares a los de un procesador de textos tradicional diferenciandolos entre programas comerciales (entendiendo estos como programas propietarios) yprogramas libres. Esta diferenciación responde a la orientación, flexibilidad y precios que existen entre unos y otros programas (para más información ver los enlaces).

2. Programas comerciales (Software propietario)

Microsoft FrontPage

http://office.microsoft.com/es-es/FX010858023082.aspx

Desgraciadamente este software de la empresa Microsoft, incluido en los paquetes de ofimática de la compañía, es uno de los más populares entre los iniciados en la edición de páginas web. Y es que gracias al gran control que posee esta empresa en el software domestico se permite que su editor de páginas web trabaje bajo estándares propios fuera de los establecidos por la W3C y que solo funcionan bien con el navegador de la compañía (ver algo más de información en inglés en Wikipedia). Por tanto, no es aconsejable el uso del mismo.

(Macromedia) Adobe Dreamweaver

http://www.adobe.com/es/products/dreamweaver

Muy problablemente este sea el software de creación de páginas web más utilizado puesto que constituye un programa muy potente, flexible y versatil.

3. Programas libres (Software de código abierto)

NVu

http://www.nvu.com/

Este editor de páginas web, en proceso constante de desarrollo, es heredero del Mozilla Composer, el editor web que se incluía dentro del núcleo de Netscape, y actualmente bajo el patrocinio del distribuidor de software Linspire. Muy problablemente sea una muy buena opción para los usuarios que se inician en el diseño web, pues resulta fácil de usar y, por sus características de código

abierto, permite la descarga, distribución e, inclusive, si se sabe programar, la modificación del código del programa.

Amaya

http://www.w3.org/Amaya/

Este programa constituye, a la vez, un editor y un navegador web por lo que le confiere, junto a que se trata de un programa de código abierto desarrollado por el W3C, unas peculiaridades que le hacen muy atractivo para usuarios un poco más avanzados, puesto que a la vez que navegamos podemos inspeccionar el "interior" de las páginas web.

Quanta

http://quanta.kdewebdev.org/

Este programa, lamentablemente solo disponible para Linux, es uno de los programas de creación de páginas web más extendido entre los usuarios de ese sistema operativo.

Entorno gráfico

Una vez instalado el programa, nos enfrentamos a la pantalla inicial tal y como podemos apreciar en la siguiente imagen. Desde este momento ya podemos empezar a crear nuestra web como si de un procesador de texto se tratara, simplemente escribiendo en el espacio en blanco que se nos presenta, pero esto lo vamos a dejar para más adelante; ahora detengámonos para observar esta pantalla con mas detalle y ver cada una de sus partes.

1. Pantalla inicial

Vemos las disposiciones habituales de los programas de windows y linux gráfico, con las distintas áreas de trabajo, herramientas e información. Distintas versiones y configuraciones del sistema operativo mostrarán una estética algo diferente, pero los elementos permanecen.

2. Barra de menus La primera barra que vemos es la "barra de menús", en ella aparecen las cabeceras de los menús que se irán desplegando a medida que hagamos clic en ellas. La disposición es la habitual en la mayoría de los programas windows: Archivo, Edición, Ver, Inserta, Formato, Tabla, Herramientas, etc. Algunas de estas opciones se repiten en la barra de botones o pueden ejecutarse mediante una composición de teclas.

3. Barra de composición

La segunda es la "barra de composición", permite atajar las operaciones más usadas en la creación y el diseño, entre los botones más usuales están:

• Nuevo: La utilizaremos para crear un documento o página nueva, abrirá a su vez, un cuadro de diálogo donde deberemos señalar algunas opciones.

• Abrir: Nos abre una página ya creada y guardada previamente.

• Guardar: Guarda la página que estamos creando en ese momento, se abre primero un cuadro de diálogo donde deberemos ponerle un nombre si no lo tiene.

• Publicar: Este botón hará que la página se guarde en el servidor de internet desde será vista por los navegantes.

• Enlace interno: Como su nombre indica sirve para crear enlaces dentro de la propia página.

• Enlace: Esta opción permite crear enlaces a otras páginas.

• Imagen: Abre la ventana de propiedades de la imagen, para permitir localizar el archivo que la contiene e insertarla en el documento.

• Tabla: Abre la ventana insertar tabla, donde elegiremos el número de filas y columnas que tendrá nuestra tabla.

• Formulario: Abrirá la ventana propiedades del formulario.

• Ortografía: Realiza la corrección ortográfica de nuestro texto abriendo la ventana revisar ortografía.

• Imprimir: Imprime la página que estamos creando.

4. Barra de formato

Otra de las barras a la que también vamos a dar bastante uso es la de Formato, si miramos de izquierda a derecha, sus elementos más notables son:

• Formato de párrafo: Es un menú desplegable donde se muestran los distintos formatos que podremos dar a los párrafos del documento.

• Fuente o tipo de letra: También como menú desplegable nos presenta el tipo de letra que estamos utilizando.

• Color: Nos permite cambiar el color del texto para resaltar alguna palabra o párrafo.

• Tamaño: permite ampliar o reducir el tamaño del texto.

• Negrita (B), Cursiva (I) y Subrayado (U): Son estilos de presentación de las fuentes, para resaltar o destacar, determinadas palabras.

• Listas: permite la creación de listas jerarquizadas, utilizando números o viñetas.

• Justificación: Alinea el texto a izquierda, centro, derecha, o lo "justifica", o sea, distribuye por igual entre los dos márgenes, derecho e izquierdo.

• Sangrías: Definen los límites izquierdo y derecho de los párrafos seleccionados dentro de un documento.

5. Modos de edición

A la hora de editar una página web, hay varios modos de editar la página:

• Modo de edición normal: en este modo se muestra la página como un WYSIWYG (lo que ves es lo que obtienes), permitiendo una edición normal, insertando texto, imágenes, tablas, etc. Se ve la apariencia final de la página, pero las zonas y los objetos están recuadrados para facilitar su manipulación. Los objetos dinámicos no se ven.

• Etiquetas HTML: en esta vista, se muestran las “etiquetas” del lenguaje HTML en fondo amarillo, viendo la estructura de la página de una manera visual.

• Código fuente HTML: en esta vista se puede editar directamente el código HTML de la página en texto plano.

• Vista previa: vista previa de la página prácticamente igual a como se verá en el navegador. Desde esta vista también puede editarse el texto y el formato de los objetos.

En cualquiera de estos modos se puede editar el contenido de la página. Mediante las solapas ubicadas en la zona inferior, se puede cambiar fácilmente de un modo a otro.

6. Otras barras.

• Barra de titulo: Es la barra superior de la pantalla de NVu. A la izquierda de esta barra aparece el título de la página web que estamos editando y el nombre del archivo en caso de que ya lo hayamos guardado con anterioridad. A la derecha los botones de control de la venta minimizar, maximizar/restaurar y cerrar.

• Ventana administración sitios web: Accedemos a ella mediante la opción Ver --> Mostrar/Ocultar --->Administrador de sitios. Se sitúa a la izquierda de la pantalla y en ella configuraremos nuestros sitios web, para poder acceder de forma rápida a sus distintas páginas web. A través de ella también podremos publicar en Internet nuestras Webs y editar directamente las paginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local.

Ventana de área de edición: En esta área es donde diseñáramos y editaremos nuestras páginas. Es nuestro espacio de trabajo. Cada página que estemos editando se mostrara en esta área, pudiendo cambiar de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de cada página. También podemos mostrar las reglas en esta área, que nos ayudaran a dimensionar diversos objetos.

Barra de estado: Proporciona información como la relativa a dentro de que etiqueta nos encontramos. Además a través de ella podemos seleccionar etiquetas con sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.

a primera página web

1. Crear una página web Crear una página nueva es tan simple como elegir la opción Nuevo en el menú Archivo o pulsar las teclasCTRL-N.

Aparece un cuadro de diálogo en el que podemos elegir:

• Crear una página vacía, en la que podemos elegir si queremos que cumpla el estándard XHTML y usar el formato Strict DTD.

• Crear un documento a partir de una plantilla previamente creada.

• Crear una plantilla vacía. Es útil cuando queremos dar un aspecto uniforme a nuestro trabajo, por ejemplo para que todas las páginas de un sitio web presenten un mismo aspecto.

El nuevo documento puede crearse en una nueva pestaña o en una ventana nueva de programa. Si usamos el botón Nuevo de la barra de botones se crea directamente una página web vacía.

2. Escribiendo en la página web La inserción de textos no tiene ninguna dificultad, es exactamente igual a como lo haríamos en cualquier procesador de textos, solamente señalar que los caracteresespeciales como vocales acentuadas, eñes, paréntesis, etc. en HTML se escriben de una forma especial, utilizando códigos. Si trabajamos en el modo de edición normal, la aplicación NVU se encargara de traducir los caracteres especiales que escribamos al modo de código de caracteres en HTML. Los espacios en blanco también tienen untratamiento especial. También podemos insertar otros caracteres especiales o símbolos no disponibles a través del teclado, desde el menú Insertar y escogiendo la opción Caracteres y Símbolos. Para una lista completa de caracteres especiales y su representación en HTML ver la Referencia de Entidades. Podemos igualmente dar formatos personalizados a los textos, colores, insertar imágenes, tablas, elementos multimedia... en suma crear una página web con todos sus elementos, a lo que nos dedicaremos en los próximos apartado de este tutorial del curso.

3. Guardando el documento Bien sea con el menú o con el botón de gardar, siempre debemos guardar nustra página para evitar que se pierda al apagar el programa. Al igual que antes podemos usar el menú Archivo (o la combinación de teclas CTRL+S). Si no lo hemos guardado antes al cerrar el programa nos pedirá si queremos guardarlo y con qué nombre.

En cualquier caso accederemos a la ventana donde se nos solicita un título para nuestra página, OJO no se trata del nombre de la página.

Y justo antes de guardar el documento debemos teclar el nombre del archivo en el que guardamos la página web, para este nombe es conveniente seguir estos consejos:

• Utilizar siempre letras minúsculas. • No emplear caracteres "extraños" como eñes, tildes, espacios... • No usar caracteres reservados como asteriscos, signos de interrogación,

paréntesis, etc. • No dejar espacios en blanco entre las distintas palabras del título, si queremos

separarlas podemos utilizar el guión bajo ( _ ).

4. Configurar las propiedades de la página Las propiedades de la página se configuran desde la opción Título y propiedades de página que se encuentra en el menú Formato.

• En el área relativa a Información personal debemos introducir el Titulo de la página, el nombre delAutor y una breve Descripción del contenido de la página. Es recomendable rellenar todos estos datos ya que algunos buscadores los utilizaran para indexar la página en sus bases de datos.

• Disponemos de la opción para indicar que la página se trata de una plantilla que utilizaremos como base en futuros diseños. Las plantillas se guardan con una extensión del tipo archivo.mzt

• Además podremos introducir en el área llamada Internacionalización las opciones referentes al idiomay juego de caracteres utilizados en la página.

Estos datos son importantes para que los buscadores sepan clasificar el idioma de nuestra página y para que los caracteres se muestren correctamente en ordenadores configurados con otros idiomas distintos al nuestro. Podemos configurar otras propiedades de la página accediendo al menú Formato y escogiendo la opción Colores y fondo de página.

Disponemos de dos opciones para establecer los colores de la página: Usar

Colores predeterminados oUsar colores personalizados. Si elegimos usar Colores predeterminados, los textos, enlaces y el color de fondo de fondo se mostraran con los colores configurados en el navegador.

Con Usar colores personalizados, podemos definir el color en que se mostraran los textos, enlaces y fondo de la página independientemente de los colores configurados en nuestro navegador.

5. Trabajar con pestañas

Nvu permite editar varios documentos al mismo tiempo. En lugar de cambiar de una ventana a otra para editar más de un documento, NVu ofrece la posibilidad de las Pestañas, por lo que se pueden abrir varios documentos al mismo tiempo con NVu en la misma ventana pero en distintas pestañas. Las pestañas pueden abrirse usando Ctrl+T, o bien seleccionando Crear en: Nueva pestaña dentro del cuadro de diálogo Crear un nuevo documento o plantilla. Aunque se tengan varias pestañas abiertas, cada una es gestionada independientemente.

Se indica el estado de cada documento; por ejemplo, si ha sido modificado y necesita ser guardado, aparecerá un icono de un disquete rojo en la pestaña correspondiente.

5.Visualización del trabajo realizado

Una vez que hemos creado nuestra página, podemos visualizarla desde el programa navegador (recomendamos Mozilla Firefox). Para esto arrancamos el navegador por defecto que tengamos en nuestro ordenador desde NVU de varias formas:

1. Seleccionando la opción Visualizar página en el navegador desde el menú Archivo

2. Pinchando el botón Navegar situado en la Barra de herramientas.

También se puede abrir desde el navegador seleccionando el archivo de nuestra página Web. Hay que tener en cuenta que cada vez que realice modificaciones en su página, podrá ver reflejados los cambios en el programa navegador, por lo que se guardará la página antes de verla. En la metodología de trabajo para la edición de páginas Web es importante trabajar siempre con las dos aplicaciones abiertas: el programa que permite crear las páginas (en nuestro caso, NVU) y la aplicación que permite visualizarlas (el navegador).

Establecer el formato en una página web

1. Formatos de texto Leer en una pantalla de ordenador no es muy cómodo que digamos, por eso deberemos darle el aspecto más atractivo y equilibrado posible, es decir, le daremos el "formato" más adecuado. Existen dos formatos principales, el de párrafo que como su nombre indica abarcará a uno, varios, o todos los párrafos del documento, y el formato de caracteres. Vamos a empezar por el primero de ellos. Los formatos de párrafo son varios: opciones de Justificación, estilos de títulos y los elementos de Listasque afectarán a todos los párrafos del bloque de texto que seleccionemos. Las opciones de Justificación está situadas en y contienen cuatro posibilidades, según deseemos poner el texto alienado a la izquierda, centrado, a la derecha o justificada en los dos márgenes de la página web, tal como se indica en la siguiente ilustración.

2. Titulos Son estilos a nivel de bloque (párrafos) para delimitar en el texto diferentes secciones o apartados, y resaltar así la importancia de determinados títulos. En el lenguaje HTML sólo hay seis niveles, que se diferencian unos de otros por el tamaño de la letra, van en grado descendente, desde el nivel 1 que es el mayor,

hasta el nivel 6, el más pequeño, tal y como podemos observar en la imagen. Ojo, estos estilos pueden redefinirse usando estilos CSS.

Podemos aplicar este formato seleccionando el texto que deseamos resaltar con este estilo, luego desplegamos la lista que se encuentra en la barra de formato, marcando uno de los seis tipos de título que nos ofrece. El aspecto que ofrecerán los párrafos con estos estilos de títulos podemos verlo en ilustración que está a continuación.

También podemos acceder a traves del menú Formato --> Párrafo. Ese menú también nos ofrece los seis estilos de título, ofreciendose también la posiblidad de incrementar o disminuir su tamaño de acuerdo a nuestros gustos. A la derecha tienes el menú de formato al que nos referimos más arriba, a través de él también puedes aplicar los seis diferentes estilos de títulos. Si miras el código fuente verás que estos estilos corresponden a las etiquetas H1 a H6. Todo el texto encerrado entre esas etiquetas aparecerán con el tamaño, grosor, color correspondientes a los estilos título 1 a título 6.

3. Listas El formato de lista es útil para que nuestros párrafos presenten el de una lista (ordenada o no) por ejemplo al crear un índice para nuestra página. Podemos acceder a ella desde el menú Formato, y en éste seleccionando el apartado Lista, vemos que nos presenta 4 opciones:

• No numerada. • Numerada. • Término. • Definición.

En los siguientes apartados veremos estos diferentes tipos de lista de manera más detallada.

Listas no numeradas

o Arquitectura � Bernini � Borromini

o Escultura � Bernini

o Pintura � Caravaggio

Se llama también lista de viñetas; en ella los elementos que forman la lista van precedidos de un símbolo (viñeta) que puede ser elegido de entre los tres que nos ofrece el programa: círculo sólido, circunferencia y cuadrado sólido. Accederemos a ellos con la opción propiedades de la lista, que vemos en la imagen precedente. Este tipo de lista está también accesible desde el botón Viñetas de la barra de formato.

Lista numerada

Como su nombre indica los elementos de la lista van precedidos de números o letras que podemos elegir en la ventana propiedades de

la lista, desplegando el apartado Estilos de numeración. Estas listas también se las conoce como desordenadas.

Las propiedades e incluso el tipo de la lista puede cambiarse en cualquier momento. Basta seleccionar el o los elementos que queramos cambiar y elegir en el menú de Formato --> Listas la opciónpropiedades, o bien usando el menú del botón secundario del ratón.

La numeración de las listas ordenadas puede hacerse con números árabes, romanos o letras.

1. Redes a. Lan b. Wan

2. Topologías a. Bus b. Anillo c. Estrella

Definiciones y términos

Las listas tipo Definiciones, van estrechamente relacionadas, se utilizan para dar al texto el formato similar al de una definición, el formato Término lo aplicaremos a la palabra que encabeza o da título al elemento de la lista, mientras que el formato Definición lo aplicaremos al texto que sigue al término. Si hemos aplicado el formato término, tras escribir éste, y de forma automática, al pulsar Intro, el cursor se desplaza al punto de inserción correspondiente a la definición adquiriendo el texto que introduzcamos a continuación este formato.

HTML Pseudo lenguaje para la creación de páginas WEB

WWW World Wide Web

Podemos elegir las lista de términos y de definiciones desde el menú Formato, y seleccionando el apartadoLista o también con sus correspondientes botones de la

barra de formato. El izquierdo da formato término y el derecho da formato de definición.

4. Formatos de caracteres Los signos que forman el texto: letras, números, signos ortográficos, matemáticos, etc. pueden aparecer en la página con el aspecto que definamos mediante los diferentes formatos, algo que haremos fundamentalmente mediante los atributos de estilo, color y tipo de letra.

a) Estilos

Los estilos de texto son diferentes formas en las que puede verse el texto en la página web. Algunos estilos llevan un nombre alusivo al uso para el que se crearon (y pueden ser redefinidos). Los estilos de carácter se pueden aplicar de dos maneras:

• Seleccionamos primero el texto y después desplegamos el menú Formato y en él elegimos Estilos de Texto.

• O bien tras seleccionar el texto, pulsamos en algunos de los botones de la barra de herramientas de Formato usados para los estilos más frecuentes: la negrita (B), la cursiva (I), y el subrayado (U).

Aquí tienes una descripción de los diferentes estilos que podremos aplicar al texto a nivel de carácter:

• Negrita: Letras con trazo grueso

• Cursiva: llamado también Itálica, de ahí su símbolo, inclina el texto a la derecha.

• Subrayado: Pues eso, texto subrayado • Tachado: El texto aparece con una línea horizontal. • Superíndice: Posición elevada del texto • Subíndice: Posición del texto más baja.

• Anchura Fija: En este estilo todos los caracteres tendrán el mismo ancho aunque sean bastante dispares como una "m" o una "i". En otros editores aparece como "teletipo".

• Sin romper: El texto se muestra en una sola línea, sin romper por ninguna tabulación.

• El resto de estilos, los utilizaremos cuando queramos introducir un tipo de texto de características especiales como pueden ser: citas, abreviaturas, acrónimos, código de programación, variables, ejemplos, etc.

b) Texto en colores

Para aplicar color a un texto, primero lo seleccionamos y luego elegimos Color del texto... en el menúFormato de la barra de menús. Nos aparecerá una nueva ventana como la que muestra la imagen.

El color debemos usarlo con mesura, lee este artículo para orientarte en el uso de los colores en las páginas web.

c) Tipos de letras

Cuando se trabaja con procesadores de textos tenemos a nuestra disposición una innumerable cantidad de fuentes o tipografías para usar en los documentos. Al igual que ocurre con el color, los tipos de letra deben combinarse con cierto cuidado, el uso uniforme de un mismo tipo de fuente, da coherencia al documento, permite al lector localizar la información que necesita y facilita la legibilidad. El uso de una tipografía heterogénea dificulta a los usuarios identificar los bloques

informacionales y navegar por el contenido del documento.

En una página web aparentemente tenemos las mismas posibilidades, pero solo aparentemente. El explorador usa las fuentes que le decimos en la página web siempre y cuando el ordenador del visitante disponga de esas fuentes. Es decir, además de usar tipos de fuentes homogéneos debemos mantenernos dentro de las fuentes instaladas en la mayoría de los sistemas operativos usados por los internautas. Elegir tipos

Para aplicar la fuente basta con seleccionar el texto previamente mecanografiado y después pasar a la elección del tipo de letra, o también tener ya seleccionado el tipo de letra antes de comenzar la escritura del texto, en ambos casos, para acceder a la fuente o tipo de letra, tenemos dos caminos:

Los tipos de letras los encontraremos en el menú Formato y seleccionado la opción Tipo de letra, con lo que se desplegará una lista con los tipos de letra que tenga nuestro sistema.

Otra forma es desplegando la lista de fuentes del menú que nos nuestra la barra de herramientas de formato. Se desplegará una lista similar a la del método anterior.

En estas listas se nos ofrecen los tipos de letra que podemos usar en nuestra página web:

• En primer lugar se nos muestra la tipología que presenta el texto que previamente hayamos seleccionado.

• En segundo lugar, los dos formatos de escritura de los que ya hemos hablado, el fijo donde todos los caracteres ocupan el mismo espacio, y el variable donde caracteres como la "i" ocupan menos espacio que la "m".

• El siguiente grupo lo ocupan las familias de fuentes que NVU adopta como predeterminadas según el estandard de la W3C, organismo encargado de señalar las normas de accesibilidad a las páginas web. Al usar estas familias conseguiremos que la página se ve por igual en cualquier navegador.

• Por ultimo, y por orden alfabético, aparece el listado de todas las fuentes que tengamos instaladas en nuestro equipo, listado que variará sustancialmente de unos ordenadores a otros.

5. Sangrado de párrafos

Para sangrar párrafos puede utilizar la tecla Tab de su teclado (al igual que ocurre con el procesador de textos), o el botón Sangrar texto de la barra de herramientas.

También podemos tabular “artificialmente” un párrafo mediante espacios sin salto. Es, como su nombre indica, un espacio que no produce salto (es un tipo particular de espacio que está considerado un carácter en sí mismo en lugar de ser, simplemente, un espacio entre caracteres). Para ser más específico, los espacios simples que se obtienen con la barra espaciadora no son considerados esenciales por la mayoría de los navegadores; si coloca un puñado de espacios en blanco, uno tras otro, para intentar dar formato a un texto, en algunos navegadores sólo se mostrará un espacio.

Enlaces

Las páginas web parecen documentos de texto (de hecho se editan con editores de texto), pero son algo más: son hipertextos, van más allá. El contenido de una página web es texto, imágenes, sonidos, animaciones, contenidos interactivos, y ... enlaces. Estos últimos elementos son los que convierten la página web en documento de hipertexto. 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 presenta más información que la vemos directamente al leer su contenido en nuestro explorador.

1. Las URL Pero en esta frase nos encontramos con un palabro que debiera de sonar URL, del inglés, Localizador Universal de Recursos. Puedes ver más sobre las URL en la sección enlaces del manual de HTML. Es decir una forma standard (Uniform) 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. Estas URL tienen la forma

http://www.iescarbula.net/materias/gyh/index.html

Donde http indica el protocolo (normas de comunicación) www.espaciolatino.com es el servidor u ordenador donde se encuentra el recurso, /horoscopo/ es una carpeta dentro de ese servidor y por últimoindex.htm es el nombre del archivo que buscamos.

Las direcciones de los recursos se pueden escribir de dos formas: absoluta o relativa. La dirección completa comenzando con el http:// es una URL absoluta del recurso. Por ejemplo si en el sitio misitio.com hay una carpeta llamada imágenes y dentro hay otra llamada gifs y dentro hay un archivo llamado ojos.gif, la URL absoluta de esta imagen sería

http://misitio.com/imagenes/gifs/ojos.gif

Pero si estamos dando la dirección de un recurso que está en el mismo servidor donde se encuentra la página se suelen usar las llamadas URL relativas, que dan la ruta hasta el recurso partiendo desde la página, sin usar la parte del servidor, http://misitio.com. Si la URL relativa comienza con / la ruta comienza en la raíz de nuestro sitio. Por ejemplo, si en la página index.htm que hay en la carpeta imagenes quiero poner la dirección de la imagen ojos.gif en forma relativa podría ser de cualquiera de las formas:

gifs/ojos.gif

/imagenes/gifs/ojos.gif

2. Clases de Enlaces

Los enlaces que podemos encontrarnos en una página web suelen ser algunos de los citados aquí:

• Interno: Nos lleva a otra parte dentro de la misma página donde se encuentra el enlace.

• Local: Se refiere a algún recurso situado en el mismo servidor que nuestra página (URL relativas)

• Externo: Se refiere a algún recurso situado en otros servidores diferentes a dond se encuentra nuestra página (URL absoluta)

• De Correo: Cuando el visitante pincha en este tipo de enlaces se abre su programa de correo electrónico para enviar un email a la dirección que previamente se halla especificado en ese enlace.

• A Archivos: El recurso señalado es un archivo y al pinchar sobre ellos nos permiten que se abran o se descargen a nuestro ordenador esos archivos, por supuesto nos referimos a archivos distintos de los relacionados directamente con las página web: imágenes, animaciones, sonidos, otras páginas web.

3. Insertar enlaces a páginas

a) Enlaces a páginas web

Vamos a ver la forma de colocar en nuetra página un enlace para saltar a otra página. Como soporte del enlace podemos usar un texto o una imagen. El procedimiento es muy parecido en ambos casos. Situamos el cursor donde queramos colocar el enlace. Elegimos Enlace en el menú insertar, tecleamos CTR + L, o pulsamos el botón Enlace, apareciendo en los tres casos la pantalla de Propiedades de enlace.

Vamos a ver la forma de colocar en nuetra página un enlace para saltar a otra página. Como soporte del enlace podemos usar un texto o una imagen. El procedimiento es muy parecido en ambos casos. En el cuadro de propiedades que hemos abierto por algunos de los procedimientos anteriormente enumerados (Texto del enlace escribimos el texto que queramos que aparezca en la página. Esto no es necesario si antes de comenzar habíamos seleccionado texto; en Ubicación del enlace colocamos la URL de la página a la que debe apuntar el enlace. La URL puede ser absoluta (comienza por http://) o relativa, o sea, la ruta de un archivo en el propio servidor donde esté alojada la página. En este caso podremos marcar la opción La URL es relativa a la dirección de la página cuando accedamos a las propiedades del enlace. Aunque hemos hablado de URL de páginas, un enlace puede apuntar a cualquier archivo. Si es un archivo .htm el explorador lo muestra como página web. Pero también puede apuntar a un archivo

.jpg o .gif o .png: el explorador lo mostrará como imágenes. En general el explorador intentará procesar el archivo. Pero los enlaces también pueden apuntar a archivos de cualquier otro tipo, por ejemplo .zip, en estos archivos el explorador permitirá al visitante descargarlos y guardarlos en su ordenador.

El resultado de este proceso es una dirección absoluta como la siguiente: Curso de innovación pedagógica.

b) Enlaces a un correo electrónico

Al insertar un enlace en la ubicación del enlace podemos colocar una dirección de correo electrónico. En este tipo de enlaces cuando el visitante pulsa sobre el enlace, se abre su cliente de correo y puede escribir un mensaje a la dirección de correo especficada. Para crear este tipo de enlace basta con escribir el email y marcarlo como dirección email:

Se visualizaría así: Instituto de Enseñanza Secundaria "Carbula", Almodóvar del río.

c) Enlaces internos a páginas

Es posible mezclar los enlaces a páginas y los enlaces internos. Es decir podemos colocar enlaces que apunten a un ancla dentro de otra página. Para ello a la URL de la página de destino se le añade el símbolo almohadilla (#) seguido del nombre del ancla:

http://www.elsitio.com/preguntas.htm#apartado2

Este enlace apuntará al ancla denominada apartado2 que hay en la página preguntas.htm alojada enhttp://www.elsitio.com/.

4. Enlaces internos Una vez conocemos lo que son los enlaces, vínculos o hiperenlaces, pasemos a ver como crearlos y colocarlos en nuestra página, el primer paso para crear un sitio completo: un conjunto de páginas interconectadas. Como ya hemos visto anteriormente, existen diferentes tipos, veamos como se crea cada uno de ellos. Vamos a ver separadamente las distintas formas de enlaces que podemos tener en una página web.

a) Enlaces internos en la misma página

Un enlace interno nos permite ir de una a otra parte de la página de forma rápida y sin tener que usar la barra de scroll del navegador. Puede ser muy útil si tenemos la página organizada en apartados y queremos tener un índice de esos apartados. Para usar estos enlaces lo primero que debemos hacer es crear los puntos de destino o anclas, en los puntos de la página a los que queramos saltar.

El primer paso es colocar las anclas, para ello situamos el cursor en el lugar exacto donde queremos situar el destino de nuestro enlace interno, o sea, el sitio donde colocar el ancla.

Una vez situado en el lugar elegido pasamos a situar el ancla para lo cual pulsamos el botón enlace interno que tenemos en la barra de botones.

O bien usamos la opción enlace interno que tenemos dentro del menu Insertar.

Menú Insertar con Enlace interno resaltado

Nos aparecerá la ventana "Propiedades del enlace interno, donde podremos identificar ese destino.

En una misma página pueden existir más de un punto de destino, por ejemplo una página con varios apartados. Cada apartado puede tener su propio ancla para llegar a él con tan solo pulsar sobre un enlace. Tras ponerle el nombre al ancla (en el ejemplo este nombre es inicio) y pulsar el botón

aceptar, donde estaba el cursor veremos el símbolo . Si dejamos el ratón sobre este símbolo veremos un cartelito con su nombre.

El segundo paso es colocar el enlace propiamente dicho, es decir, el vínculo sobre el que pulsar para volver a donde estaba el ancla. Este proceso es similar al visto para colocar enlaces a páginas, solo que en lugar de una URL se elige el ancla al que debe apuntar el enlace. Al desplegar la lista de URL se muestran todos los anclas de la página, estos enlaces van precedidos por el símbolo # (enlace interno).

b) Enlaces interno a páginas externas

Es posible mezclar los enlaces a páginas y los enlaces internos. Es decir podemos colocar enlaces que apunten a un ancla dentro de otra página. Para ello a la URL de la página de destino se le añade el símbolo almohadilla (#) seguido del nombre del ancla:

http://www.elsitio.com/preguntas.htm#apartado2

Este enlace apuntará al ancla denominada apartado2 que hay en la página preguntas.htm alojada enhttp://www.elsitio.com/

nsertar una imagen

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas web. En la elaboración de páginas web se utilizan principalmente imágenes de tipo mapas de bits, concretamente los formatos gráficos GIF, JPG y PNG. Son sistemas de almacenar imágenes pensados para minimizar el tamaño que ocupan en disco manteniendo una calidad aceptable. Lo primero facilita la transmisión de archivos gráficos, mientras que lo segundo hacen que las imágenes sean útiles. Cuando se inserta una imagen, Nvu guarda la referencia a la imagen en la página. En el caso de publicar en la web, es preferible no utilizar las imágenes BMP puesto que pesan bastante y dificultaría su visualización. Ademas, es mejor guardar o publicar primero su página antes de insertar imágenes en ella. Esto permite a Nvu utilizar automáticamente referencias relativas a los archivos de las imágenes cuando las inserta.

1. Elección del formato

a) Formato GIF

El formato GIF (Graphics Interchange Format), nació en el año 1987 de la mano de Compuserve con objeto de colorear sus imágenes, hasta entonces codificadas en su formato RLE en blanco y negro. La versión original (GIF87a) fue sustituida por la GIF89a. Actualmente existe un problema de licencias que desaconseja su uso en favor del formato PnG. Sus características más importantes son:

• Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad.

• Se utiliza principalmente para imágenes de colores planos, o sea, grandes manchas de color homogéneo, sin variación cromática, al modo de los dibujos infantiles.

• Permite "transparencias", es decir, seleccionando uno de los colores de la imagen éste se vuelve transparente, permitiendo ver a través de él cualquier fondo, o imagen que esté situada detrás.

• Permite, con el programa adecuado, crear animaciones presentando varias imágenes una tras otra como si de un "dibujo animado" se tratara. Utiliza una paleta de 256 colores como máximo, lo que nos permite elegir entre varios tamaños para un mismo archivo.

b) Formato JPG

El formato JPG o JPEG (Joint Photographic Expert Group ), es el más utilizado para la transmisión de fotografías, nació en el año 1986. Es un formato muy recomendado para imágenes con una amplia gama de colores y que permite ajustar el grado de compresión y por tanto la calidad de la imagen. Sus características más importantes son:

• Es un formato de compresión con pérdida: aligera el tamaño final del archivo, pero le resta calidad.

• Se utiliza principalmente para incluir en la web fotografías con un elevado número de colores (trabaja con un formato de 16 millones de colores).

• No permite definir colores transparentes. • No permite crear animaciones.

• Con el formato JPG, podemos escoger el grado de compresión, de manera que cuanto mayor sea la compresión mayor es la pérdida de calidad de la imagen.

• Codifica los colores con 24 bits, por lo que puede manejar una paleta de más de 16 millones de colores, lo que se llama color verdadero.

c) Formatos PNG

PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color y otros importantes datos. Sus características principales son:

• Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad.

• Soporta formato de color indexado (256 colores) y profundidades de color de 48 bits y escala de grises de 16 bits.

• Permite colores transparentes y transparencias graduales. • No permite crear animaciones, existe un formato relacionado para

animaciones, pero está poco extendido: MNG. • El usuario puede elegir el formato a usar en la codificación de la imagen: PNG8

(análogo al GIF) o PNG24 (24 bits de color) no es adoptado por todos los navegadores, y aún menos por las versiones antiguas de los mismos.

Observaciones

A la vista de todo lo anterior, cuando integremos imágenes en nuestra página deberíamos tener en cuenta lo siguiente:

• Debemos analizar detalladamente el uso de imágenes en nuestra página. Hemos de fijarnos en su necesidad, resolución, tamaño, formato, etc. El objetivo es lograr que la página se cargue lo más rápidamente posible.

• El tamaño del archivo de imagen depende de las dimensiones de la imagen y del número de colores que la forman.

• Para colores puros con no más de 256 colores y gráficos muy simples usaremos el formato GIF o PNG.

• Para imágenes con más de 256 colores usaremos el formato JPG o PNG24. • Usar las imágenes con su tamaño real, evitando que sea el navegador el

encargado de reducirlas. • No colocar demasiadas imágenes en una misma página. Si necesitamos

mostrar un numero elevado de imágenes, lo mejor es usar una versión muy reducida de las mismas (thumbnails o miniaturas) a modo de índice y enlazar con páginas individuales donde se muestre cada imagen por separado.

• Al diseñar la estructura del sitio utilizar una carpeta para las imágenes muj usadas a lo largo de las diferentes páginas del sitio.

• Usar el atributo ALT en las imágenes, para facilitar la comprensión del contenido a los usuarios y a los robots usados por los buscadores para indexar nuestra página.

2. ¿Cómo se introduce una imagen?

Para insertar una imagen, debemos colocar el cursor en el punto de inserción donde desee que aparezca la imagen y con el ratón pulsamos el botón Imagen de la barra de herramientas

Como segunda opción, podemos abrir el menú Insertar y seleccionar Imagen.

En ambos casos, se abrirá el cuadro de diálogo Propiedades de la imagen. El siguiente paso será Elegir archivo (retrato1.gif) y buscar el archivo de imagen en la ubicación del disco duro o en la red local donde lo hallamos posicionado (en este caso, dentro de la carpeta greco) previamente:

Tras pulsar Abrir, se ofrece relevante información sobre el archivo de imagen seleccionado. En primer lugar, se nos dice que se encuentra en la carte greco el archivo retrato1.gif, en una ubicación de carácter relativo, la cual es preferible para una página web. Podemos posteriormente escribir unl texto alternativo que aparecerá en los navegadores de sólo texto y que aparecerá en los otros navegadores mientras se carga la imagen o cuando la carga de imágenes está deshabilitada. Alternativamente, puede elegirse no incluir texto alternativo. Del mismo modo, podemos visualizar la imagen en Vista preliminar, así como comprobar el tamaño real de la misma.

Este archivo de imagen puede ser transformado y modificado atendiendo a otra serie de funcionalidades que se contienen en Propiedades de la imagen. En la pestaña Dimensiones podemos mantener el Tamaño real de la imagen o bien modificar el mismo accediendo a la casilla Tamaño personalizado.

En la pestaña Apariencia se establecen las distancias entre la imagen y el texto, así como la alineación del texto alrededor de la imagen. En nuestro caso práctico optamos por fijar el espacio entre la imagen y el texto en 4 píxeles y posicionar la imagen el la zona derecha de la pantalla de trabajo al elegir con el curso Fluir por la izquierda.

En la pestaña Enlace se puede establecer un hipervínculo para la imagen. En la primera casilla podemos optar entre introducir una dirección web conocida, un archivo local o una dirección de correo electrónico, o selecionar un enlace interno o una cabecera de lista despegable. Para estas posibilidades contamos con la opción Elegir archivo. También, se puede indicar que dicha dirección es un correo electrónico, una URL relativa o mostrar un borde alrededor de la imagen con enlace.

El resultado de las diferentes operaciones llevadas a cabo con la imagen seleccionada queda reflejado en la siguiente imagen.7

Una vez insertada la imagen, se pueden establecer sus propiedades haciendo doble pulsación sobre ella, seleccionando la opción de menú Formato >> Propiedades de la imagen o a través del menú contextual.

En caso necesario, haga clic en Edición avanzada... para ajustar los valores (por ejemplo, alineación) en el cuadro de diálogo Propiedades de la imagen

Mientras escribe un párrafo que contiene una o más imágenes, si desea insertar una línea de corte tras todas las imágenes del párrafo, seleccione Ruptura tras imágenes (<br clear="all">) en el menú Insertar.

3. Insertar una imagen como fondo Ahora colocaremos una imagen de fondo de página. Para ello pinchamos sobre la página en Formato -->Colores y fondo de página.

Luego, en el cuadro de diálogo que se nos muestra elegimos la sección de Imagen de Fondo y pinchamos en el botón Elegir archivo.

Como hemos visto antes, la primera ventana que se nos abre es en la que aparece nuestra Web. Dentro de la carpeta “imágenes” seleccionamos el archivo (papel.gif en este caso) que deseemos tener como fondo de página.

En la siguiente ventana se comprueba que el archivo seleccionado se ha tomado de la carpeta imágenes y el archivo responde al nombre de papel.gif; tiene una URL relativa, lo que es preferible a la absoluta; luego se pulsa Aceptar.

Si la imagen es más pequeña que la zona de visualización de una página (como en esta imagen elegida para el fondo), la repite en forma de mosaico ocupando toda la pantalla. Por eso las imágenes de fondo siempre hay que seleccionarlas bien para que no dificulten la lectura del texto. Esto mismo que hemos descrito para el fondo de la página sirve para el fondo de una tabla que pongamos en ella.

4. Insertar imágenes en las celdas de una tabla Propongamos de actividad la siguiente actividad de utilizar una tabla para insertar en ella imágenes con enlaces a otras páginas web, con un resultado paracido a este:

TABLAS

Las tablas no solo son útiles para mostrar listas de datos, son también un elemento primordial para maquetar las páginas web, o sea, para colocar con cierta libertad los elementos que forman la página web. Las tablas nos permiten organizar y distribuir los espacios de una manera óptima. Por ejemplo no permite poner el texto en columnas como en los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen. En el momento en que queremos mostrar páginas webs atractivas y fáciles de leer nos veremos en la necesidad de utilizar las tablas.

1. Descripción de las tablas

Una tabla podemos describirla como un conjunto de espacios organizados en filas y columnas. La intersección de las filas se llaman celdas. Una cuadrícula es una tabla, en cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imágenes. Algunos atributos propios de las tablas son:

• Alto y ancho (height y width): pueden medirse en pixels o en porcentaje del elemento contenedor (width= "100%" indica que ocupa el ancho del elemento en el que está colocada.

• Border (borde) : Anchura del borde que rodea a la tabla. Si es 0 el borde no se ve

• cellpadding (relleno): margen del contenido de cada celda. Se mide en pixels. • cellspacing (espaciado): espacio entre las celdas. Se mide en pixels.

2. Crear Tablas Crear una tabla en NVU consiste en insertar el correspondiente elemento HTML, para lo cual tienes tres posibilidades:

• a) Usar el botón tabla de la barra de botones:

• b) Usar el menú Insertar y opción Tabla:

• c) Usar el menú Tabla con la opción insertar

3. Definir la tabla Al insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las caracterísitcas de la tabla. En él encontramos tres pestañas: La primera de ellas es Rápido, es la opción por defecto y nos permite dimensionar la tabla de manera gráfica. Para ello desplazamos el cursor con el ratón por la cuadrícula. Una vez tengamos la distribución que nos interesa, hacemos clic y tendremos la tabla insertada en la página.

• Preciso en esta pestaña podremos escribir directamente el número de filas y columnas de que constará nuestra tabla.

o Filas: escribimos el número de filas que tendrá nuestra tabla.

o Columnas: lo mismo, pero para el valor de las columnas.

o Anchura: ancho de la tabla. Puede ir en píxeles, o en el porcentaje del espacio que ocupará la tabla dentro del elemento donde se encuentre insertada.

o Borde: Grosor en píxeles que tendrá la línea que forma el borde de la tabla, si queremos que sea"invisible" , daremos al borde el valor cero.

• Celda, en ella podemos añadir más detalles a los elementos que vayan en el interior de las celdas de nuestra tabla:

o Alineación Horizontal: indicaremos si irán sin alineación, alineados a la izquierda, al centro, o a la derecha, según elijamos del menú desplegable.

o Alineación Vertical, que puede ser, sin alinear, arriba, al centro, o abajo, según el valor que elijamos del menú desplegable

o Marcando el apartado Ajustar, permitiremos que el texto introducido en la celda ocupe varias líneas, si deseamos que todo el texto se muestre en una sola línea, marcaremos No ajustar .

o En el apartado Espacio entre las celdas introduciremos el valor en píxeles que queremos haya entre las celdas.

o En el apartado Relleno de las celdas, el valor en píxeles que habrá entre los bordes de la celda y su contenido.

4. Modificar tablas Después de insertar la tabla en nuestra página podemos modificar sus características mediante el cuadro de diálogo "propiedades de tabla". Este cuadro nos permite por una parte modificar las propiedades generales de la tabla y por otra las propiedades de las celdas. Para usarlo la tabla o las celdas han de ser previamente seleccionadas.

Seleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de la tabla (hacer click con el botón izquierdo del ratón dentro de la tabla) y a continuación desplegar el menú Tabla y elegir la opción Seleccionar, dentro de ella tenemos todos los elementos de la tabla seleccionables: Tabla, Fila, Columna, Celda, Todas las celdas. También podemos llevar a cabo esta operación pulsando sobre la tabla con el botón derecho del ratón dentro de la tabla. Esto nos ofrecerá la opción Seleccionar Tabla...

5. Propiedades de la tabla Una vez seleccionada la tabla debemos abrir el diálogo de propiedades. Esto se consigue mediante cualquiera de los tres métodos:

• El botón derecho del ratón • El menú Tabla • El botón tabla de la barra de menús

En cualquiera de estos caminos nos lleva al cuadro de diálogo propiedades de la tabla en el que vemos claramente diferenciados cuatro apartados: el tamaño, los bordes y el interlineado, la alineación, y el color de fondo.

• En el apartado Tamaño, podemos modificar tanto el número de filas como el de columnasintroduciendo los valores en las casillas correspondientes. También es posible modificar la altura yanchura de la tabla, especificando el valor absoluto en píxeles o el valor relativo en tanto por ciento de la ventana donde se mostrará la tabla.

• El segundo apartado permite modificar el grosor del borde externo de la tabla, del espaciado entre las celdas de la tabla y también el relleno o espacio que hay entre los bordes de la celda y su contenido; todo ello expresado en píxeles.

• En el tercer grupo modificaremos la alineación de la tabla, que puede ser a la Izquierda, en el Centro, o a la Derecha del elemento o ventana donde tengamos la tabla. También podemos reservar un espacio encima, debajo, a la derecha o a la izquierda de la tabla para posteriormente, una vez cerrada la ventana de propiedades, ponerle un Título a la tabla.

• El último de los apartados nos permite poner color al fondo de la tabla, para ello pulsamos en el rectángulo y se nos abre la ventana donde elegir el color.

En nuestro ejemplo la tabla tendría un aspecto como este:

Para ver como se maneja el cuadro de colores ve a esta sección. Aunque allí se aplica este mismo cuadro de diálogo al color de las letras, la forma de seleccionar los colores es la misma.

6. Propiedades de la celda De forma similar a como modificamos las propiedades de las tablas podemos modificar las propiedades de celdas individuales. Se usa un cuadro de diálogo parecido al de las propiedades de tabla y al que se accede de manera similar. Picamos con el botón izquierdo sobre la celda que vamos a modificar y luego seguimos uno de los siguientes métodos:

• El botón derecho del ratón en la celda • En el menú Formato: Propiedades de Ccelda de Tabla • El botón tabla de la barra de menús

Sea cual sea el método usado llegaremos a un cuadro de diálogo con las propiedades que podemos modificar en la celda seleccionada. El cuadro se parece bastante al usado en propiedades de Tabla. Aquí podemos modificar cinco

apartados: La selección, el tamaño, la alineación, el estilo y ajuste, y el color de fondo.

• En el apartado Selección encontramos un menú desplegable para indicar si las modificaciones que vamos a realizar se van a aplicar sólo a la celda seleccionada, a la fila o a la columna donde a la que pertenece esa celda (como si hubiéramos seleccionado toda la fila o toda la columna)

• El apartado Tamaño funciona igual que las propiedades de la tabla, pudiendo introducir en altura y anchura los valores de tamaño absoluto en píxeles o relativos en % sobre el tamaño de la tabla. Ojo el alto de la celda afecta a toda la fila y el ancho a toda la columna.

• La Alineación del contenido nos permite dos opciones:

• Alineación vertical, en la que el contenido de la celda puede situarse en la parte superior, en el centro, o en la parte inferior de dicha celda.

• Alineación horizontal, en la que el contenido puede ser situado a la izquierda, en el centro, a la derecha, o justificado por igual a ambos bordes laterales de la tabla.

Alineaciones

Izquierda Centro Derecha

Superior Medio

Inferior

• En cuanto al estilo de celdas tenemos dos posibilidades, celdas normales, que serán la mayoría de las celdas de la tabla, y celdas cabecera (suele aplicarse a la primera fila o la primera columna) cuyo contenido aparecerá en mayor tamaño y en negrita.

• El apartado Ajuste del texto ofrece dos opciones, una que el texto ocupe en la celda una sola línea, sin importar su longitud, o que ocupe varias líneas dentro de la misma celda de forma automática

• El último de los apartados corresponde a la posibilidad de cambiar los Colores de fondo de las celdas, ya sea de forma individual, o combinándolo con el apartado selección, hacerlo por filas o por columnas, según el diseño que hayamos pensado para nuestra tabla. Su uso es similar al que hemos visto en propiedades de tabla.

7. Otras modificaciones Una tabla puede modificarse también en cuanto a su definición e incluso en su cuadriculado aspecto, es lo que les da su gran flexibilidad. Así podemos: la insertar y eliminar de tablas, filas, columnas o celdas y la unión o división de celdas.

a) Insertar elementos

Algunas de las operaciones que solemos realizar con las tablas no implican necesariamente el uso de la pantalla de propiedades de la tabla o celda, sino que están disponibles directamente en algunos menús, por ejemplo: inserción o eliminación de una tabla completa, de una fila, de una columna o incluso de celdas individuales (no recomendable).

Para insertar una fila en una tabla ya creada, basta con hacer clic con el botón derecho del ratón sobre una celda cualquiera de la fila que hayamos elegido, y en el menú emergente, dentro de la opción Insertar tabla..., marcar la opción Fila superior, o Fila inferior. O también, si el cursor está en la tabla, podemos usar el menú Tabla de la barra de menús y en la opción Insertar elegir Fila superior o inferior como en el caso anterior. Al insertar una fila podemos ponerla por encima o por debajo de la fila en la que se encuentre el cursor de edición en el momento de abrir este diálogo.

De la misma forma debemos proceder para insertar columnas, solo que ahora las columnas se pueden insertar a la izquierda del cursor (columna anterior) o a su derecha (columna siguiente).

¡Incluso podemos insertar una tabla completa dentro de una celda!. Al seleccionar esta opción (Insertar Tabla -> Tabla...) nos aparecerá el ya conocido

menú de inserción de tablas, que ya se ha visto en estamisma unidad. ¿Ves la potencia de las tablas?

Una tabla dentro de otra

b) Eliminando elementos

De la misma forma que insertamos filas o columnas o celdas en una tabla podemos eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para borrar tablas y sus elementos es uno de los siguientes:

• Hacemos clic con el botón derecho del ratón en cualquier punto del interior de la tabla y en el menú emergente elegimos la opción Eliminar tabla y dentro de ésta, lo que queremos borrar.

• Seleccionar previamente la tabla, y después de desplegar el menú Tabla, elegir la opción Eliminar y dentro de ésta, lo que queremos borrar.

c) Combinando 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.

celda combinada

El proceso para unir celdas comienza seleccionando varias celdas contiguas, para ello arrastramos el ratón sobre ellas con el botón izquierdo pulsado. A continuación tenemos dos métodos

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

• Desplegamos el menú Tabla y elegimos unir celdas seleccionadas.

Las celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda combinada y seguir una de las habituales caminos:

• Con el botón derecho se despliega el menú y se elige Dividir celda • Con el menú Tabla se elige la opción Dividir celda.

HOJAS DE ESTILO

1. Introducción Vamos a ver qué son las hojas de estilos y cómo usarlas para dotar a los documentos que creemos de una apariencia personalizada. Es importante que sepamos que para poder sacarles todo el partido posible a las hojas de estilos, tenemos que tener ciertos conocimientos del lenguaje HTML. Así que no está de más tener a mano un manual básico de HTML.

Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido. Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos.

Una hoja de estilos puede estar contenida en la misma página donde se utiliza o puede estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo el sitio web, mientras que de la primera tendremos que escribir el mismo código en cada página cada vez que lo necesitemos. Por eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y la segunda cuando ese efecto es el mismo para todas las páginas. Existe una tercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dónde queramos usarlo, con lo que el efecto sólo se producirá en ese lugar. Esto implica conocer código HTML y las propiedades que queramos cambiar. Esto tendríamos que repetirlo para cada elemento del texto cuyo estilo deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas. Estas formas también requieren conocer HTML.

Por ello NVU / KompoZer nos facilita el uso de estilos por medio de las plantillas, que nos permite usar hojas de estilo con pocos conocimientos de HTML.

2. Usar hojas de estilo en cascada NVU / KompoZer dispone de un editor de hojas de estilo denominado CaScadeS (CSS, Cascade Style Sheets). CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo. CaScadeS permite dos modos de edición de hojas de estilo: a)Modo para principiantes: este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento; Modo avanzado: este modo permite crear reglas sin restricciones. En caso de que no haya hoja de estilo, se creará una nueva automáticamente.

Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse haciendo clic en el menúHerramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación.

En KompoZer contamos con un botón específico para activar la Hoja de estilos CSS, se trata del icono CasCadeS:

Para crear una hoja de estilo interna en Nvu:

• Haga clic en el botón de elemento <style>.

De forma opcional, se puede rellenar la información sobre Lista de medios y Título de la hoja de estilo. Finalmente, debmos hacer clic en Crear hoja de estilo.

Para crear una hoja de estilo externa en Nvu:

• Haga clic en el botón de elemento <link>.

• Escriba la URL de la hoja de estilo en el panel de la derecha. Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. De forma opcional, rellenamos la información sobre Lista de medios y Título de la hoja de estilo. Activamos también comprobar al crear una hoja de estilo alternativa si ésta es una alternativa. Podemos aconsejar que siempre se archive el documento html antes de agregar una hoja de estilo local; guarde también el documento inmediatamente antes de cerrar el editor CSS. Finalmente, podemos utilizarutilice el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente.

3. Crear reglas de estilo

Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual. Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo

clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas:

1. Haremos clic en el botón Regla del panel de la izquierda. 2. El panel de la derecha mostrará opciones para especificar el tipo de regla a

crear. Elegiremos una entre las siguientes: o estilo con nombre (introduzca abajo el nombre de la clase) o estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo) o estilo aplicado a todos los elementos coincidentes con este selector

3. Rellenaremos el nombre de la regla. 4. Haremos clic en Crear regla de estilo.

En la parte derecha de esta pantalla de Hoja de estilos CSS, aparerá el elemento creado con el proceso anteriormente descrito.

Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.

4. Ejercicio práctico Vamos a asignar a continuación una hoja de estilos a una página Web que vamos a crear a modo de ejemplo, para poner en práctica lo que hemos aprendido en este capítulo. En primer lugar creamos una página web cualquiera como la del ejemplo que se muestra en la parte superior, a continuación la guardamos en nuestra carpeta “cursoweb”, que es donde estamos guardando todas las actividades del curso, con el nombre “index.html”.

A continuación crearemos nuestra hoja de estilos, para ello desplegaremos el

menú Herramientas --> Editor CSS en un documento vacío, tal como hemos descrito con anterioridad. Haremos clic en el botón<Style> y le damos nombre al Título por ejemplo “regla” y luego pulsaremos en el botón Crear hoja de estilo (así se crea una hoja de estilo interna). Ahora podemos poner los estilos que queramos utilizando el botón Regla (le damos el nombre body). Le asignamos los estilos propios, le cambiamos el color al fondo...

En Texto elegiremos la letra personal Book Antiqua, de tamaño 12 px y alineación Justificada, como se muestra en la imagen siguiente.

En Fondo seleccionamos el botón color y en la pantalla de selección de color de fondo, una tonalidad azulada, tal como se indica.

En Bordes, seleccionamos una anchura de 10px y una tonalidad negra de los mismos.

En Caja seleccionamos Position relative y Anchura de 500 px

En su conjunto todas estas operaciones quedan reflejadas en la pestaña General así.

Una vez seleccionadas las opciones elegidas, marcamos con el ratón en la ventana de la izquierda “hoja de estilos interna” y haremos clic en el botón Exportar hoja de estilo y cambiar a la versión exportada.

Le asignaremos el nombre al archivo “hojaestilos.css” (¡¡¡Ojo!!!, hay que ponerle la extensión css al archivo).

Ahora lo único que nos queda es enlazar la página “index.html” con la hoja de estilos que acabamos de crear “hojaestilos.css”; para ello abriremos en NVU el index.html y desplegaremos del menú Herramientas >> Editor CSS y en la ventana que se abre haremos clic en <link> y elegimos el archivo que queremos enlazar, en nuestro caso la hoja de estilos.

En este caso, en NVU aparece la ruta absoluta file:///C:/Documents%20and%20Settings/LARA/Desktop/ nvumanual/hojaestilos.css. Para que se quede hojaestilo.css en el proceso de carga del archivo le tendremos que borrar la ruta y quedarnos con el nombre del archivo únicamente. Por último haremos clic en Crear hoja de estilo.

Pues ya tenemos hecho casi todo el trabajo, para aplicar nuestra hoja de estilo, seleccionamos el texto de la Web al que se lo queramos aplicar y elegir la body a asignar.

El resultado finala ha sido el siguiente en el texto seleccionado y según los procesos realizados:

FORMULARIOS

Para crear formularios con NVu/KompoZer, abriremos el programa e iremos a la opción Insertar -->Formulario --> Definir formulario.

Entonces aparace la ventana Propiedades del formulario

Rellenaremos los datos del Nombre de formulario; en el campo URL de la acción pondremos en principio:http://forms.melodysoft.com ya configuraremos el servicio para que envíe las encuestas que hagamos a los usuarios de nuestra web a un correo determinado; en método seleccionaremos la opción POST, es decir... Enviar; finalmente, pulsamos Aceptar.

Inmediatamente veremos que el programa ha creado un área punteada, como una celda de tabla de color celeste. Esto nos indica que el formulario está creado con el método de recogida de datos que le hemos especificado. Dentro de ese área comenzaremos a colocar los elementos que nos permitirán recopilar los datos que consideremos de interés para nosotros sobre los visitantes a nuestra web.

Para comenzar a crear los botones y los textos que nos servirán para recopilar información haremos lo siguiente. Hacemos clic con el ratón dentro de ese área punteada en celeste, escribimos por ejemplo Nombre y seleccionamos la opción Insertar --> Formulario --> Campo de Formulario. Rellenaremos la ventana que nos salga con los siguientes datos: elegiremos un campo de texto, lo nombraremos a efectos de poder reconocerlo posteriormente en el formulario y pulsaremos aceptar.

Nuestro formulario irá adquiriendo esta apariencia.

Posteriormente podemos repetir la operación para agregar otro campo que sea apellidos y dirección de email. Repetimos la misma operación anterior y nombramos a cada una según el dato que queramos recopilar.

Tras estos datos podremos colocar items para que el visitante elija una entre varias opciones o varias a la vez Colocamos la pregunta ¿Qué te parece la web? y añadiremos los siguientes items, cada uno con su opción:

• Para conseguir estos items, recurriremos a Insertar --> Formulario --> Campo de Formulario y en el tipo elegiremos casilla de verificación.

A cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario, en este caso son opiniones sobre nuestra web.

De forma que nuestro formulario va adquiriendo esta presencia:

Para acabar este sencillo formulario podemos colocar un cuadro de texto para que nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le solicitemos. La mecánica para el cuadro de texto sería la siguiente: Insertar --> Formulario --> Área de Texto

Las propiedades de este área de texto serán las siguientes:

Y lo que obtendremos será algo parecido a esto:

Finalmente solo quedará insertar los botones que harán posible que el visitante envíe el formulario o limpie la información del mismo por si se arrepiente de enviarlo o por si se equivoca en la consignación de algún dato. Para insertar los botones haremos lo siguiente: Insertar --> Formulario --> Campo de Formulario; seleccionaremos la opción botón de envío y botón de restablecimiento posteriormente, de forma que completemos el formulario. A cada uno de los botones pondremos sus propiedades.

El formulario quedará de esta manera:

En formato hmtl este ejemplo resultaría así.

TRABAJAR CON PLANTILLAS

Las plantillas HTML son útiles en casos donde el autor tiene que crear varias páginas con diseño similar pero distinto contenido. Con KompoZer puede diseñar sus propias plantillas y usarlas como base para sus páginas web.

1. Crear una plantilla

1. Para crear una plantilla: o Haga clic en Archivo > Nuevo, o pulse en la flecha junto al

botón Nuevo y seleccione Más opciones. o Seleccione Plantilla vacía y pulse en Crear.

2. Añada y dé formato al contenido que será igual en todas las páginas con los mismos métodos usados para editar texto normal en una página web.

3. Para el contenido que será diferente en las páginas web, puede insertar un área editable haciendo clic en Insertar > Plantillas > Área editable. Las opciones disponibles para un área editable son:

o El área es opcional o El área puede repetirse o El área se puede mover

4. Guarde el archivo como HTML Template (*.mzt).

Consejo: puede eliminar un área editable o hacer un área editable usando la barra de estado. Para más detalles remítase a Usar la barra de estado para dar formato a sus páginas web.

2. Usar una plantilla

Para usar una plantilla en la autoría de páginas web:

1. Haga clic en Archivo > Nuevo o use el atajo de teclado Ctrl+N. 2. Seleccione la opción Un nuevo documento basado en una plantilla y escoja

la plantilla a usar pulsando en Elegir archivo.... 3. Pulse en Crear. 4. Modifique el contenido de las áreas editables. 5. Guarde el archivo como un documento html.

Consejo: pulse en Editar > Separar de la plantilla para separar un documento de su plantilla.

Consejo: la transformación de un documento existente en una plantilla y viceversa puede conseguirse marcando/desmarcando la opción Plantillas en Formato > Título y propiedades de la página.

PERSONALIZAR NVU / KOMPOZER

1. Personalizar la barra de herramientas Nvu / KompoZer tienen barras de herramientas que pueden ser personalizadas por el usuario para ajustarse a sus gustos. Los usuarios pueden mantener los botones más usados en estas barras y ocultar los menos usados haciéndolas así más fáciles de usar, dando a los usuarios la satisfacción de adaptar la apariencia de Nvu / KompoZer de acuerdo a sus preferencias. Para proceder a modificar la configuración por defecto de la barra de herramientas podemos proceder de la siguiente manera. Para abrir la ventana de personalización de barras de herramientas, haga clic con el botón derecho en la barra que desea editar y seleccionar "Personalizar barra de herramientas".

También, podríamos pulsar la tecla Z y se abría una nueva pantalla en cualquier de las dos formas descritas.

Una vez abierta procedemos a presionar sobre el ícono que deseamos traspasar a la barra de herramientas y dejamos de hacerlo en el lugar que pensamos situarlo. En nuestro hemos procedido a mover a dicha barra los iconos de Cortar, Copiar y Pegar, habiéndolos delimitado por sendos separadores, resultando la siguiente ilustración; para salir, debemos hacer clic en Hecho.

Para personalizar las barras de herramientas:

• Puede arrastrar un botón, un separador, un espacio flexible o un espacio a la barra de herramientas donde desea añadir dicho elemento.

• Puede arrastrar elementos (botones, espacios, espacios flexibles o separadores) desde la barra de herramientas a la ventana de personalización.

• Puede también cambiar la apariencia de los botones de la barra de herramientas (Barra de herramientas principal) seleccionando Iconos y texto, Iconos o Sólo texto según lo que desee mostrar (en el siguiente ejemplo hemos modificado el orden de los iconos, seleccionado iconos grandes y texto, e introducido separadores en lugar de espacios).

2. Mejorar la funcionalidad de KompoZer Nvu / KompoZer tiene un mecanismo incorporado para mejorar sus ya potentes funciones. Pueden añadirse nuevas funcionalidades a KompoZer mediante extensiones. Las extensiones son pequeños programas que proporcionan nuevas características o funciones al instalarse en Nvu / KompoZer. Los usuarios pueden decidir qué extensiones quieren instalar. De esta forma, las extensiones permiten a los usuarios tener una instalación personalizada de Nvu / KompoZer. Para instalar una extensión:

• Descargue la extensión a su ordenador y guárdela en un lugar apropiado. La mayoría de las extensiones pueden descargarse desde el sitio web de Nvu / KompoZer.

• Abra el administrador de extensiones(AE) mediante la opción Herramientas --> Extensiones. El AE listará todas las extensiones instaladas (si hay alguna).

• Pulse en el botón Instalar para instalar la extensión que acaba de descargar. • Seleccione la extensión a través del diálogo de apertura de archivos y pulse en

el botón Abrir. • Pulse en el botón Instalar ahora en la ventana de de instalación de software. • Cuando la instalación esté completa, reinicie Nvu / KompoZer para comenzar a

usar las caracterísitcas añadidas por la nueva extensión.

Debería buscar periódicamente actualizaciones para las extensiones con el administrador de extensiones. Las actualizaciones normalmente mejoran las características ofrecidas por las extensiones y resuelven problemas en las versiones más antiguas. Este es el proceso que debemos seguir para modificar el idioma por defecto, como hemos descrito en el caso del paso de la versión inglesa a la castellana.

3. Modificar el tema utilizado Podemos en esta misma línea modificar el aspecto o tema utilizado en el programa por defecto. Por ejemplo, vamos a instalar el tema Pasadoble para Nvu / KompoZer y lo descargamos de la página en que se encuentra alojado (www.jesusda.com).

Como la imagen informa debemos inslarlo desde el menú Herramientas --> Temas.

Nos aparece el Administrador de temas y pulsamos Instalar.

Buscamos el tema Pasodobe en el lugar en el que lo hemos descargado y abrimos el archivo, procediendo a instalarlo, siguiendo los pasos que se nos ofrecen.

Comprobamos que se ha instalado correctamente en el Administrador de temas y hacemos clic en Usar tema, habiendo seleccionado previamente el mismo presionando con el puntero del ratón una vez.

Entonces, debemos cerrar el programa y reiniciarlo nuevamente y advertiremos el nuevo aspecto que presenta.

Si en cualquier momento queremos cambiar nuevamente el aspecto de la pantalla, volvemos alAdministrador de temas, seleccionamos el tema que deseemos y pulsamos Usar tema y reiniciamos

CAPAS

Las capas son bloques con contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS; de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS.

En Nvu / KompoZer crearemos capas mediante el botón Capa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botón. Junto a este botón aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Dentro de las capas podemos incluir otras capas, imágenes, texto formateado, tablas…etc e incluso definirlas con un color de fondo o imagen de fondo.

El problema es que Nvu / KompoZer aun no esta preparado totalmente para trabajar con capas, por lo que su uso puede resultar frustrante. Desde el menú Formato podemos activar lpodemos activar la Rejilla de posicionamiento que nos ayudara a mover las capas y colocarlas más precisamente donde deseemos.

MARCOS O FRAMES

Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.

Para crear una página con frames, tendremos que hacerlo desde el modo código, tecleando sentencias HTML, ya que Nvu / KompoZer aun no esta preparado para trabajar con frames. Para saber como se crean frames, ver la Referencia de HTML. Cuando se utilizan frames es muy habitual usar el atributo target en la etiqueta que define un vínculo (<A>), con este atributo especificaremos en que frame debe cargarse el destino del vinculo, es decir, la página vinculada.

ALIDACIÓN HTML

1. Validación de una página web

Un validador HTML simplemente comprueba la corrección de tu documento frente al DOCTYPE declarado. Si quieres verificar la validez de tu documento final al ser mostrado por un agente de usuario (por ejemplo, un navegador Web), puedes usar el validador HTML de NVU.

Automáticamente aparece una pantalla del Validator HTML, conectada al enlace web anteriormente incorporado que solicita un chequeo inmediato de la página web que tenemos abierta en Nvu / KompoZer.

Si no respondemos aparecerá esta otra pantalla que nos marca que no ha sido chequeado el documento.

La ventana que se abre en el Validator HTML ofrece diversas opciones, entre las que podemos optar si utilizamos enlace mencionado y luego hacer clic en Check

El validador HTML devolverá una lista de errores de acuerdo al DOCTYPE HTML elegido. Si tu documento no tiene errores, devolverá un mensaje de This Page Is Valid HTML 4.01 Transitional!

Para mostrar a sus lectores que le han tomado la atención de permitir la interoperabilidad de la página Web, puede mostrar este icono en cualquier página que valida. Aquí está el código HTML que puede usar este icono para añadir a su página web:

Si creamos un sitio Web a mano o componiendo directamente el código de marcado, y el validador te devuelve errores en tu página, simplemente corrige tu marcado. El validador HTML te proporciona el número de línea en que se encuentra el error.

El validador HTML proporciona el número de línea donde ocurren los errores, ayudándote así a localizar los problemas en tu documento. Comprueba el fichero línea a línea, comenzando por la primera. Esto quiere decir que un error que esté al comienzo de tu documento puede resultar en más errores adicionales a lo largo de la página. Una buena forma de trabajar los errores es corregir el primer error mostrado, y entonces revalidar la página. A menudo descubriremos que corrigiendo un problema al inicio del documento se resuelven unos cuantos errores a la vez. Continuaremos haciendo esto hasta que todos los errores estén corregidos, y el documento resultante sea válido.

Si eres el creador de un motor de plantillas, herramienta de autor, o sistema de gestión de contenido, usa el validador HTML para corregir los problemas de tu implementación. También podemos incorporar el validador HTML en tu software o aplicación en ejecución. El código fuente del validador HTML se encuentra libremente disponible. El validador está siendo mejorado cada día y puedes participar en su desarrollo.

Lista de validadores HTML

• W3C HTML validator • WDG HTML validator

UBLICACIÓN DE PÁGINAS WEB

Nvu / KompoZer está pensado para trabajar directamente sobre el sitio web en Internet, aunque también puede trabajar con archivos en el sistema local.

1. Configuración de publicación Para organizar todos los archivos, lo primero es crear un sitio web. Para ello, seleccionar la opción de menúEditar → Configuración de publicación, o bien, desde el panel izquierdo Administrador de sitios de Nvu / KompoZer, seleccionar el botón Editar sitios, se mostrará una ventana para gestionar los sitios web:

En la zona izquierda se muestran los sitios definidos, y en la zona derecha, las propiedades del sitio seleccionado.

Para crear un nuevo sitio, seleccionar el botón Nuevo sitio, los campos de la derecha se pondrán en blanco para que sean rellenados:

• Nombre del sitio: nombre del sitio que se va a crear (IES Carbula). Es un texto que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo.

• Dirección HTTP de su página inicial: URL de la página de inicio del sitio web. Por ejemplo, si se tiene dada de alta en Geocities, será http://es.geocities.com/usuario/indexoki.html. En caso de que se desee trabajar en el sistema local, la dirección será de tipofile:///home/usuario/sitioweb/index.html; en el presente casohttp://iescarbula.net/

• Servidor de publicación: información para publicar en el servidor.

• Dirección de publicación: dirección FTP (Protocolo de Transferencia de archivos) de publicación. Esta información la suministra el servidor donde se aloja la página. En el caso de Geocities seráftp://ftp.es.geocities.com/. En el caso de que se trabaje en local, se introducirá una URL local del tipo file:///home/usuario/sitioweb/ o se seleccionará la carpeta pulsando en el botón Seleccionar directorio.

• Nombre de usuario: nombre del usuario. Esta información la suministra el servidor donde se aloja la página.

• Contraseña: contraseña del usuario. Esta información la suministra el servidor donde se aloja la página

Para eliminar un sitio, selecciónelo de la lista y pulse el botón Eliminar sitio.

Para establecer un sitio predeterminado, selecciónelo de la lista y pulse el botón Seleccionar como valor predeterminado. El nombre del sitio se pondrá en negrita indicando que es el predeterminado.

Una vez definido el sitio web, en el panel de la izquierda se mostrarán todos los archivos y sub-carpetas existentes. Haciendo doble pulsación sobre un archivo, se abrirá en una solapa nueva de la zona de trabajo. Si se hace pulsación doble sobre una carpeta, se mostrará el contenido de la misma.

2. Publicar nuestra web Una vez configurado el sitio de publicación tal y como se describió en el apartado precedente, podremos publicar páginas en Internet y editar las ya publicadas. Para ello es recomendable que previamente se visualice la ventana del Administrador de sitios (Menu Ver – Mostrar Ocultar – Administrador de sitios).

Publicar es similar a cuando guardamos las páginas en nuestro disco duro, con la diferencia que se guardaran en un servidor, el que configuramos en el administrador de sitios. Con el botón Publicar (o menú archivo – publicar ) colocaremos las pagina en Internet (si queremos también podemos guardarla en nuestro disco duro, como hemos hecho hasta ahora).

Como puedes comprobar en la imagen precedente, cuando pulsamos el icono aparece un panel en el que podemos especificar varios datos:

• Seleccionar el sitio de publicación si tenemos varios creados

• Incluir el título de la página y el nombre con el que se publicará, aunque estos datos se extraerán de la propia página.

Desde el Administrador de sitios también podremos modificar las páginas ya publicadas en Internet, basta con seleccionar el archivo que queremos modificar y se bajara directamente de Internet a nuestro programa de edición, NVU / KompoZer. Una vez modificada, volveremos a publicarla para que aparezca con los nuevos cambios realizados.

3. Consejos a tener en cuenta Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debe ser el primer elemento que abra un documento. Esto quiere decir que debería preceder a <HTML>.Se trata de una marca que no necesita cierre y cuya función es facilitar información al servidor Web que aloja la página. La información facilita por DOCTYPE se refiere al tipo de documento visualizado además de ser necesaria para la comunicación entre navegador y servidor. DOCTYPE se debe escribir de forma estándar:<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">. Esta línea proporciona algunos datos sobre el documento:

• HTML PUBLIC: el documento es público • IETF: el tipo de HTML público está gestionado por la Internet Engineering Task

Force • DTD HTML 4.0: la versión de HTML soportada es la 4.0 • EN: el idioma del documento es el inglés

El uso de DOCTYPE no es obligatorio y puede omitirse. Seguramente su uso ayuda al servidor web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta visualización.

anual de FileZilla

1.- Introducción.

FileZilla es un cliente de FTP desarrollado para la plataforma Windows, válido para todas las versiones, desde Windows 95, 2000, XP y Vista, así como otros sistemas operativos. Es un software libre bajo la licencia GNU General Public License (GPL) por lo que podemos tener la garantía de su eficacia y existencia futura. Podemos obtener la aplicación, fuentes, documentación y mucha más información sobre este potente cliente de FTP en la dirección del proyecto original http://filezilla.sourceforge.net.

La interfaz del programa es de estilo Explorador de Windows, y muestra tanto la ventana local como las carpetas remotas, permitiendo el paso de archivos de una a otra mediante un simple drag-and-drop (arrastar y soltar).

Una de las principales características es el soporte de idioma castellano aunque la instalación no ofrece esa posibilidad ya que aparece en Inglés. Las principales funcionalidades de este cliente FTP son:

• Soporte para Drag & Drop (Arrastrar y soltar). • Permite continuar descargas interrumpidas (si lo soporta el servidor). • Dispone de una herramienta para almacenar los parámetros de conexión de

sitios FTP. • Capacidad para mantener viva la conexión con el servidor FTP. • Soporte a conexiones a través de servidores proxy y firewalls. • Soporte SOCKS4/5 y HTTP1.1. • Permite conexiones seguras sobre SSL y SFTP. • Se puede utilizar una cola de cargas y descargas.

2.- Instalación

La última versión del programa lo podemos bajar aquí (FileZilla Client 3.0.7 para Windows32).

Aunque la aplicación esté en inglés el proceso de instalación es bastante simple, requiriendo sólo unos pocos pasos para completar el proceso. Primeramente, pulsamos varias veces sobre el icono del archivo para proceder a su instalación, que tendrá varios pasos.

Veamos a continuación cada uno de ellos.En primer lugar, aparece la pantalla en la que se deben confirmar los términos de la licencia del software que se distribuye bajo licencia GNU General Public License. Simplemente hay que aceptar los términos de la licencia pulsando el botón "I Agree".

La siguiente pantalla requiere que seleccionemos entre conceder los privilegios del programa a todos los usuarios del ordenador (opción por defecto) o restringimos los mismos al administrador. Pulsamos Next.

Confirmamos a continuación los componentes que deseamos instalar del programa (todos en este caso, el programa, todos los lenguajes, el Shell y el icono del escritorio). Pulsamos Next.

A continuación pasaremos a indicar el directorio de instalación de esta aplicación. Se nos propone por defecto el directorio "C:\Archivos de programa (Program

Files)\FileZilla". Como en pantallas anteriores para continuar con la instalación sólo hay que pulsar el botón "Next"

Pasaremos después a seleccionar la carpeta del menú de inicio a crear donde se pondrán los accesos directos a la aplicación, ayuda y programa de desinstalación. Por defecto se crean en "Inicio -> Programas ->FileZilla". Luego, pulsamos en Install.

En las siguientes pantallas confirmamos como se va instalando FileZilla Client 3.0.7 y como finalizamos este proceso cerrando la última, dando en Finish.

3.- Configuración

La configuración de todas las opciones de FileZilla se realiza desde el menú Edit -> Settings (o Edición -> Configuración) a partir del cual aparece un diálogo con un árbol de opciones de configuración a la izquierda y que están agrupadas en cuatro bloques:

• Conexión: en este bloque están todas las opciones adicionales de conexión como configuración con proxies y cortafuegos, conexiones seguras, etc.

• Configuración de la transmisión de ficheros: como el modo de transferencia ASCII/Binario y resto de opciones.

• Configuración de la interfaz: cambio de idioma, mostrar elementos de pantalla como barra de herramientas, barra de estado, paneles, etc.

• Depuración: opciones de depuración.

Aparte de ver las opciones principales de la pantalla configuración, también se verá en esta sección la utilización del Administrador de Sitios al cual se puede acceder desde el menú Archivo -> Administrador de Sitios.

3.1.- Configuración del idioma

Una vez instalado este cliente de FTP, se puede cambiar al idioma Español modificando su configuración. Para ello hay que ejecutar la aplicación y seleccionar el menú "Edit->Settings..."

Aparecerá una pantalla con todas las opciones que se pueden configurar agrupadas por bloques. La opción para cambiar el idioma está en "Interface settings -> Language". Seleccionaremos en la lista de la derecha "Español" y pulsaremos el botón OK. A partir de ese instante, las opciones de menú y diálogos de la aplicación aparecerán en Español, aunque algunas opciones quedan sin traducción. Es probable que también el idioma sea seleccionado automáticamente, según la opción Idioma predeterminado del sistema.

3.2.- Configuración de opciones del cliente

Aparte de configurar el Idioma de la aplicación en la pantalla de opciones de FileZilla, existen muchas más opciones de configuración de las cuales veremos las más importantes y usadas:

Configuración de transferencia ASCII/Binario automática

La transmisión de ficheros por FTP se caracteriza porque se puede realizar según dos modos de transferencia denominados ASCII y Binario respectivamente, y que dependiendo del mismo el fichero transmitido o recibido será correcto o no. FileZilla puede usar por defecto un modo de transferencia u otro dependiendo de la extensión del fichero a transmitir, con objeto de que no tengamos que seleccionarlo previamente nosotros. Para ello se ha de especificar en la pantalla Preferencias (antigua Settings) en la opción "Transferencias -> Tipo de Archivos" las extensiones de los ficheros que queramos que se transfieran en modo ASCII, el resto de extensiones no especificadas se realizarán en modo Binario. Todas las extensiones más usadas y comunes (html, htm, php, pdf, doc, xls, etc.) ya están configuradas con el modo de transferencia correcto por lo que no debe tener ningún problema.

Configuración de la transferencia de ficheros

Aparte de poder configurar el modo de transferencia ASCII/Binario en la configuración de transferencia de ficheros podemos configurar además lo siguiente:

• Preservar la fecha y hora de los ficheros bajados en el sistema destino. • Usar múltiples conexiones para la transferencia de ficheros y el número de

ellas. • Si el fichero destino existe, indicar al usuario que acción realizar (preguntar,

sobrescribir, etc.)

Configuración de la interfaz

En configuración de la interfaz se pueden modificar las siguientes opciones:

• Distribución de los paneles de archivos y directorios • Intercambio de Panel local y remoto • Modicar el tema en iconos • Formato de fecha y hora • Formato de tamaño

4.- Trabajar con FileZilla

En esta sección veremos el entorno de FileZilla y la forma de trabajar con él, realizando las operaciones básicas como son la transmisión (upload) y recepción (download) de ficheros con un servidor FTP, el cambio de permisos de los mismos, creación de directorios en el servidor remoto o en el PC local, borrado y renombrado de ficheros, etc.

4.1.- El entorno de FileZilla La ventana de FileZilla está compuesta de varias áreas que relacionamos a continuación:

1. Menú con todos los comandos disponibles por la aplicación. 2. Barra de herramientas con las operaciones más habituales. 3. Barra de Conexiones Rápidas que permite introducir los parámetros de

conexión básicos.

4. Panel de Registro de Mensajes o de log donde aparecen todos los mensajes y comandos intercambiados con el servidor FTP.

5. Explorador local de archivos que permite visualizar el árbol de directorios del sistema local donde está el cliente FTP.

6. Explorador remoto de archivos que permite visualizar el árbol de directorios del sistema remoto donde se conecta el cliente FTP.

7. Lista local de archivos que visualiza la lista de ficheros y carpetas del directorio actual en el sistema local.

8. Lista remota de archivos que visualiza la lista de ficheros y directorios del directorio actual en el sistema remoto.

9. Panel de cola de transferencia donde se pueden encolar todas las transferencias hacia el servidor o desde el servidor para hacerlas todas de una vez o programadas para un determinado momento, incluso se permite la exportación e importación de la lista de transferencia.

4.2.- Conexión rápida con un servidor FTP

Con FileZilla existen dos maneras de conectarse a un servidor FTP, una básica en la que introducimos los parámetros de conexión en la Barra de Conexiones Rápidas y otra mediante la utilización del Administrador de Sitios. Mediante el primer método sólo tenemos que introducir en los campos de la Barra de Conexiones Rápidas la dirección del servidor (nombre DNS o dirección IP si es que la conocemos), el usuario y contraseña y el puerto (en blanco para utilizar el puerto por defecto) y pulsar la tecla "Intro". Si los parámetros son correctos el cliente se conecta con el servidor mostrando el sistema remoto y sus ficheros en elExplorador Remoto de Archivos (6) y en la Lista Remota de Archivos (8).

4.3.- Conexión mediante el Administrador de Sitios

Mediante el Administrador de Sitios se puede realizar conexiones sin la necesidad de recordar las direcciones, usuarios y contraseñas específicas y simplemente pulsando un doble click de ratón. Se puede realizar de forma directa seleccionando el nombre de conexión en la barra de herramientas o abriendo el Administrador de Sitios y pulsar un doble click en la conexión que queramos.

Cuando se realiza una conexión FTP con un servidor se requiere disponer de una serie de parámetros e información que ha de introducirse cada vez que queremos conectarnos como es el nombre del servidor o su dirección IP, el puerto de conexión, el usuario y contraseña, el directorio local y/o remoto por defecto, etc. Es por ello, que FileZilla dispone de un Administrador de Sitios que facilita la tarea de conectarnos a servidores FTP sin tener que recordar direcciones IP, usuarios, contraseñas y demás parámetros.

La apariencia que tiene el Administrador de Sitios es muy simple. Dispone, en la parte izquierda, de un árbol de nombres cuyas hojas son las conexiones a los servidores FTP y a la derecha las opciones o parámetros de configuración de la conexión que representa el nodo seleccionado en el árbol mencionado.

Para configurar un sitio web debemos pulsar primeramente en Nuevo sitio.

Para crear una nueva conexión posible se ha de indicar un nombre válido e indicar para el mismo los siguientes campos:

• Servidor: nombre del servidor o dirección IP. • Puerto: número de puerto en el que el servidor escucha nuevas conexiones

(generalmente, el 21 . • Tipo de servidor, con el cual nos queremos conectar; puede ser FTP (es el

utilizado por defecto), SFTP (FTP seguro a través de SSH) y demás conexiones FTP seguras. Si su plan de alojamiento o servidor web le permite utilizar SFTP a través de SSH2 para conectarse a su dominio, seleccione SFTP using SSH2 en lugar de FTP para que toda la información que se transmita (incluyendo las contraseñas) se realice de forma segura y encriptada. Si activa el acceso SFTP con SSH2 deberá cambiar la ruta del Directorio remoto por defecto e indicar el path absoluto hasta el directorio remoto de publicación, por ejemplo /home/usuario/public_html/ donde usuario es el nombre de usuario de su acceso FTP. Desde el menú principal Edición / Configuración categoría SFTP settings puede configurar como desea que FileZilla conecte al servidor SFTP (compresión y protocolo). Por defecto, Filezilla usa el protocolo SSH2 para conexiones SFTP. Si no es usted cliente de Aemilius.net o su servidor no soporta SSH2, puede intentar utilizar el protocolo SSH1.

• Modo de acceso: debemos establecer el normal para acceder a los demás campos.

• Usuario y contraseña (si no es un usuario anónimo).

Aparte en la pestaña Avanzado se puede configurar más opciones como el directorio por defecto local y remoto, o la zona horaria del servidor. También podemos optar por las diferentes opciones de transferencia y el juego de caracteres utilizable.

En nuestro caso podría ser algo parecido a la siguiente pantalla.

4.4.- Transmisión de ficheros

La transmisión de ficheros se realiza fácilmente mediante la utilización del ratón, con sólo arrastrar y soltar uno o varios ficheros desde la Lista de Archivos Local hacia la Lista de Archivos Remota o viceversa podremos realizar el Subir (respectivamente) de los mismos contra el servidor FTP. FileZilla utilizará para cada archivo el modo de transferencia (ASCII o Binario) indicado para la extensión del mismo.

Otra forma de transmitir ficheros es mediante la utilización del menú contextual que aparece en la Lista de Archivos Local o en la Lista de Archivos Remota donde aparecen las siguientes opciones:

• Subir (dependiendo de la Lista de Archivos): transmite el fichero, ficheros y/o directorios automáticamente.

• Añadir archivos a la cola: pone en la cola de transferencia los archivos y/o directorios seleccionados para su transmisión posterior mediante la utilización del menú Cola -> Procesar cola.

• Crear directorio: permite crear directorios en el sistema local o remoto (si es que se tienen los permisos apropiados en el servidor FTP).

• Abrir: permite abrir o ejecutar el fichero determinado. • Editar: edita el fichero seleccionado si es que existe o se ha especificado en la

configuración de FileZilla la aplicación asociada a la extensión. • Borrar: permite borrar ficheros y directorios. • Renombrar: permite cambiar el nombre de ficheros y directorios. • Propiedades/Atributos de archivos: Permite ver las propiedades de los

archivos en Windows o los permisos de archivo en Unix (permitiendo cambiar los atributos de lectura, escritura y ejecución).

Nos encontramos de nuevo en la ventana del Administrador de Sitios y hacemos clic en Conectar. Cuando se ha establecido la conexión entre su PC local y el servidor remoto, la ventana principal de Filezilla muestra los archivos y directorios de su PC en el lado izquierdo (Explorador local de archivos) y los archivos y directorios de su servidor en el lado derecho (Explorador remoto de archivos). Debajo de ambos, se muestra la ventana de Registro de mensajes. Cada acción efectuada con el servidor de Ftp es mostrada aquí, lo que permite realizar un seguimiento de los archivos que han sido programados para subir o bajar (upload/download) y su estado.

Transferir archivos o carpetas al servidor remoto (o descargarlos a su PC local) es una tarea extremadamente sencilla. Para subir sus archivos el servidor, seleccionelos en su Explorador local de archivos y haga clic sobre el botón derecho del ratón. En el menú contextual seleccione Subir (upload) para subirlos inmediatamente o Agregar a la Cola para subirlos después. También puede arrastrar los archivos desde la ventana local hasta la ventana remota mediante el sistema drag and drop, cuando los haya soltado, se iniciará la transferencia de los mismos.

Si desea ejecutar la Cola de proceso programada, seleccione en el menú superior Cola / Procesar Cola y se iniciará la transferencia simultanea de todos ellos.

4.5.- Creación de directorios

Según lo visto en el apartado anterior, la creación de directorios en el sistema local o remoto es tan fácil como pinchar con el botón derecho en la Lista Local o Remota de Archivos y seleccionar la opción "Crear directorio" del menú contextual que aparece.

Aparece una ventana en la que se solicita el nombre del directorio a crear como la que sigue:

En el caso de crear un directorio en el sistema remoto, la operación se podrá realizar si tenemos los permisos necesarios para ello. Si por algún motivo vemos que no aparece en la Lista de Archivos Remota podemos revisar el panel de Registro de Mensajes para ver que mensajes de error nos está indicando el Servidor FTP.

4.6.- Cambio de permisos Unix

El cambio de permisos de un fichero en el sistema remoto también se realiza fácilmente mediante el menú contextual que aparece al pulsar el botón derecho sobre uno o varios ficheros de la Lista Remota de Archivos. Los atributos del archivo se pueden seleccionar mediante las cajas de selección que aparecen en la pantalla o indicarlo mediante el valor numérico tradicional usado en los sistemas Unix.

Atajos del teclado Cualquier atajo del teclado puede sernos de utilidad para administrar más fácilmente Filezilla.

F5 - Refresca los archivos locales y remotos de los exploradores

Ctrl + C - Para la acción que se está ejecutando

Ctrl + D - Desconectar del servidor

Ctrl + Q - Conecta al servidor de Conexión rápida

Ctrl + R - Reconecta con el servidor

Ctrl + S - Abre el Administrador de Sitios

ATAJOS DE TECLADOS

1. Usar atajos de teclado

Este documento usa el siguiente formato para listar los atajos de teclado:

Ejemplo:

Comando WindowsMac OS Linux o Unix Copiar Ctrl+C

Para ejecutar un comando, pulse la tecla aceleradora Ctrl y luego pulse la tecla de atajo C una vez (mientras mantiene pulsada la tecla aceleradora).

Ayuda: el signo de sumar (+) significa que se deben pulsar las teclas una a continuación de la otra sin dejar de pulsar la primera. Si hay más de un signo de sumar (como Ctrl+Mays+C), significa que hay que ir añadiendo teclas a la secuencia sin soltar las anteriores.

Abreviaturas:

• Ctrl = tecla Control tecla Comando en teclados Macintosh

Nota: algunos atajos de teclado realizan funciones distintas dependiendo de dónde esté el cursor (foco). Por ejemplo, si se pulsa la tecla Inicio en Windows mientras se está viendo una página web, KompoZer irá al principio de la página web. Sin embargo, si pulsa Inicio en Windows mientras el cursor está en un campo de texto, el cursor irá al principio del campo de texto.

2. Atajos de teclado globales en KompoZer

Comando WindowsUnix o LinuxMacOS Abrir archivo Ctrl+O Abrir nueva página/plantilla Ctrl+N Abrir nueva pestaña Ctrl+T Guardar archivo Ctrl+S Copiar Ctrl+C Pegar Ctrl+V Cortar Ctrl+X Seleccionar todo Ctrl+A Cerrar ventana Ctrl+W Eliminar palabra siguiente Ctrl+Supr Subir una página Re Pág Bajar una página Av Pág Subir una línea Flecha arriba Bajar una línea Flecha abajo Deshacer Ctrl+Z Repetir Ctrl+Mays+Z Buscar Ctrl+F Repetir la búsqueda Ctrl+G o F3+G Buscar anterior Ctrl+Mays+F? Abrir menú contextual Mays+F10Ctrl+Space

Comando WindowsUnix o LinuxMacOS Abrir menú principal (cambia el foco al primer menú desplegable de la parte superior de la ventana)

Alt óF10Controlado a través de las preferencias de teclado en el panel de control

Ir al principio de la línea (en un campo de edición de texto) Inicio+Flecha IzquierdaCtrl+A

Ir al final de la línea (en un campo de edición de texto) Fin+Flecha DerechaCtrl+E

Cambiar a la siguiente pestaña (cuando hay más de una pestaña) Ctrl+Av Pág

Cambiar a la pestaña anterior (cuando hay más de una pestaña) Ctrl+Re Pág

Cerrar pestaña Ctrl+W Salir de KompoZer Ctrl+Q

3. Atajos

Éstos son los atajos necesarios para editar páginas HTML con KompoZer.

Comando WindowsUnix o LinuxMacOS Abrir dirección web Ctrl+Mays+L Publicar Ctrl+Mays+S Reducir el tamaño de la letra Ctrl+- (signo menos)

Aumentar el tamaño de la letra Ctrl+= O Ctrl++ (signo más)

Tamaño del texto - 100% Ctrl+O

Insertar/editar enlace Ctrl+L Texto en negrita (<b>) Ctrl+B

Texto en cursiva (<i>) Ctrl+I Subrayar texto Ctrl+U Incrementar sangrado Ctrl+[

Reducir sangrado Ctrl+] No continuar estilos de texto Ctrl+Mays+Y

No continuar enlace Ctrl+Mays+K Seleccionar fila/columna Ctrl+arrastrar el ratón

Seleccionar celdas Ctrl+Clic (arrastre el ratón para seleccionar bloques de celdas, o continúe haciendo clic para seleccionar celdas individuales)

Administrador de sitios F9

Revisar ortografía Ctrl+K

4. Atajos de teclado de la ayuda

Estos atajos están disponibles en las ventanas de ayuda.

Comando WindowsMac OSUnix o Linux

Navegar por los enlaces dentro del panel de contenidos (panel derecho) Tab

Alternar la visibilidad del panel lateral F9

Incrementar el tamaño del texto Ctrl+= O Ctrl+Mays++ (signo más)

Reducir el tamaño del texto Ctrl+- (signo menos) Alternar entre el panel de contenidos y el de Búsqueda / Contenido / Índice / Glosario F6

Navegar por los términos del índice (mientras el panel Índice está seleccionado) Flecha arriba/abajo

Seleccionar cada una de las pestañas de Búsqueda / Contenido / Índice / Glosario (mientras se está en el panel izquierdo)

Flecha arriba/abajo

Expander / contraer la estructura del árbol de la tabla de contenidos

Flecha izquierda/derecha

Imprimir página Ctrl+P+P Volver a la página anterior Alt+flecha izquierda Avanzar una página hacia delante Alt+flecha derecha Cerrar la ventana de ayuda de KompoZer Ctrl+W

MATERIALES UTILIZADOS

El presente curso de NVu/KompoZer ha podido ser realizado con materiales contenidos en los siguientes sitios web, de libre distribución en la mayoría de los casos; las imágenes, en su mayoría, han sido elaboradas por el autor de este tutorial.

• Curso básico de creación de páginas web, por Miguel Sevilla Callejo (Departamento de Geografía, Universidad Autónoma de Madrid)

• NVU: Editor Web Gratuito. Tutor básico. creatuweb.espaciolatino.com • Curso de creación web con NVU (Editor web de código libre),

www.omerique.net • KompoZer, www.difundefirefox.com • Diseño web: Nvu, www.molinux.info • Manual de KompoZer. Aprende a usarlo • Edición de páginas Web con KompoZer • Manual de FileZilla, Universidad de Jaén • Publicar archivos mediante Ftp con Filezilla, aemilius.net

EJERCICIOS

Para ejercitar nuestros avances en el conocimiento de Nvu / KompoZer proponemos varias actividades posibles para avanzar prácticamente en su manejo.

1. Realizar una página web personal, con los materiales que deseemos y la temática que consideremos más oportunos. Por ejemplo, información sobre nuestra materia, colección de docuementos, noticias de prensa, etc.

2. Podemos utilizar los materiales que ponemos a disposición de vosotros a continuación sobre una página web concreta dedicada a la Casa Museo de El Greco en Toledo (textos e imágenes) que pueden ser descargados en su ordenador. Un avance a esta posible página la esbozamos en esteenlace.

De todas maneras, consideramos oportuno que cada una de las opciones disponibles debe contar con algunos elementos comunes.

• Disponer de varias páginas web, unidas por un archivo index.html, con menú (conseguido mediante enlaces) para que podamos abrirlas. El menú puede estar disponible en todas esas páginas o sólo en la de inicio, por lo que como el manual del ccurso debemos disponer un enlace al index..html.

• Debemos redactar uno o varios documentos dando formato de varios formato de letras, variando el color entre los títulos, justicando o no los mismos, etc.

• Debemos dar un color al fondo o bien introducir una imagen de fondo. • Debemos incluir enlaces a otras páginas web, enlaces internos dentro de una

misma página y enlaces a otras páginas, dirigiéndonos a una sección concreta (mediante enlace interno).

• Introducir imagenes de diferentes formatos, utilizarlas con diferentes tamaños, introduciendo su título, variando su justificación y sitio en la página web.

• Introducir tablas, con diferentes celdas, columnas y filas, con texto, con imágenes, etc., modificando su tamaño, el color de fondo, uniendo o separando algunas celdas, etc.

• Propuesta especial, tal como se ha mostrado en el curso, es realizar un mosaico de imagenes, utilizando una tabla, contando dichas imágenes con enlaces a otros sitios. (optativo).