Curso online de Joomla: XAMPP, también en Ubuntu 9.04

10 05 2009

Joomla 1.5.10, nueva versión estableLos chicos de Joomla Spanish nos facilitan desde finales de marzo la última versión disponible de Joomla, completamente traducida al castellano: Joomla! Spanish 1.5.10 estable-Full. Con el ordenador a cuestas te invita a que descargues, pruebes y uses en tus sitios Web este fantástico Gestor de contenidos (C.M.S) que te permitirá crear y administrar de forma muy sencilla contenido dinámico en tu Web.

En nuestros anteriores artículos dedicados a Joomla ya te hablamos de sus características y de los requisitos técnicos necesarios para ejecutarlo. Te recomendamos accedas a ellos para conocerlos y, sobre todo, leas los artículos dedicados a la instalación de un servidor local en tu equipo con un sistema Windows si este es el Sistema Operativo de tu ordenador. Ten en cuenta que Joomla es un sistema de administración de contenidos de código abierto que se ejecuta en servidores con PHP y base de datos MySQL, por tanto, si quieres instalarlo en tu equipo necesitarás la instalación previa de alguna solución que convierta tu ordenador en un servidor: nuestro recomendado, XAMPP (por ser multiplataforma -versiones para Windows, Linux y Mac- y opensource.

Como ya conoces, si eres uno de nuestros habituales lectores, Con el ordenador a cuestas está especialmente dirigido a la formación de docentes, de ahí que nuestros artículos dedicados a Joomla se destinen a la creación, edición y mantenimiento de sitios webs educativos. Han pasado ya unos cuantos meses desde que la línea 1.5 de Joomla apareciera (Febrero 2007) y ya está claramente desarrollada, por ello, a partir de este momento nuestros tutoriales tomarán como base esta versión.

En este artículo te mostramos cómo instalar XAMPP en un equipo con Ubuntu 9.04, la última versión estable de esta popular distribución Linux con el claro objetivo de instalar posteriormente Joomla 1.5.10 en él.

¿Por qué un servidor Web?

Por tratarse de una aplicación Web, Joomla necesita instalarse sobre un servidor web, como Apache o Internet  Information Services (IIS), pero además requiere que este servidor esté ampliado con PHP y disponga de acceso a una base de datos MySQL.

En concreto, los requisitos de la versión 1.5 de Joomla, la que vas a instalar, son:

  • Un servidor web (Apache 1.3 o superior, o IIS) dotado de
  • PHP (4.3.10 o superior)
  • Servidor de bases de datos MySQL (3.23 o superior)

Esto puedes obtenerlo contratando un servicio de alojamiento (hosting), que no tiene por qué ser de pago (algunas empresas ofrecen alojamiento gratuito a cambio de incluir publicidad en las páginas del sitio, pero muy pocas admiten sitios Joomla), o instalando un servidor local en tu propio ordenador. Esta será la opción que utilicemos para seguir este curso de aprendizaje básico sobre Joomla.

Te recomendamos, además, que, aunque dispongas de un sitio en producción en un hosting remoto, siempre tengas una versión de testeo con un servidor local en tu equipo: resulta muy útil para comprobar los cambios que vayas realizando, comprobar la compatibilidad y estabilidad del sistema a medida que instales nuevos complementos para el mismo, etc. Cuando compruebes que todo funciona correctamente en tu servidor local, realiza los mismos cambios en tu servidor remoto.

Cuando accedes a través de Internet a una web gestionada con Joomla (o con cualquier otro CMS) no necesitas nada especial para ver sus contenidos ni para editar otros nuevos. Es posible hacerlo a través de cualquier navegador conectado a la Red: Internet Explorer, Firefox, Ópera, Flock…

Pero el ordenador en el que se encuentre alojada esa Web sí que necesita un entorno especial para que las tareas que ejecuta Joomla puedan realizarse y para que puedas ver su contenido: debe ser un servidor web capaz de interpretar el lenguaje PHP en el que está escrito Joomla y un programa para gestionar la base de datos SQL en la que se almacena la información que le introduces cuando configuras tu web o cuando creas contenidos. Cuando te planteas realizar tu sitio Web con Joomla y vas a utilizar algún servicio de hosting debes considerar que el servicio que contrates o utilices (si es un hosting gratuito) tiene que ofrecerte estas condiciones especiales para que Joomla pueda funcionar. Y no todos los proveedores de alojamiento web tienen este tipo de servidores (Educastur, sí). El motivo parece ser que está relacionado con los riesgos de ataques externos que corre un sistema informático que ejecuta programas siguiendo órdenes remotas.

¿Por qué un servidor local?

Si no dispones de espacio en un servidor web contratado, no deseas utilizar un hosting gratuito (suele tener contrapartidas, como publicidad, spam, limitaciones en los servicios, temporalidad limitada…) o bien deseas probar primero Joomla en tu ordenador (algo muy recomendable, sobre todo cuando trabajes de un modo más avanzado con Joomla, ya que te permitirá testear que todo funciona perfectamente, antes de probar nuevos complementos directamente en tu sitio web), tendrás que instalar en tu ordenador un servidor web que posea las características comentadas.

La instalación de Joomla en un servidor local tiene algunas ventajas:

  • Te permite trabajar con Joomla sin necesidad de estar conectado a Internet
  • Las operaciones y tareas a realizar en Joomla son mucho más rápidas, casi instantáneas (en un servidor remoto dependerá, claro está, de tu conexión a Internet).
  • Te posibilita comprobar que las funcionalidades que añades a Joomla son completamente compatibles con el sistema.

Aunque no todo son ventajas:

  • Deberás trabajar siempre desde el mismo ordenador.
  • No existe una funcionalidad que te permita diseñar todo tu sitio web en local y posteriormente “subirla” a un sitio remoto.

Cómo instalar un servidor local en tu equipo

Xampp, servidor web también en UbuntuUn servidor local es simplemente un programa, instalado en el PC, que permite mostrar las páginas HTML mediante un navegador. El más conocido que, además es de código abierto, es Apache. Como ya te hemos comentado, Joomla necesita ser instalado en un ordenador en el que el servidor web Apache esté funcionando. Y tendrás además que añadirle el intérprete de lenguaje PHP y el motor de bases de datos SQL, junto con una utilidad que permita acceder a través del navegador web a dicha base de datos: PHPMyAdmin. Y todas estas herramientas son software libre, programas y aplicaciones que podrás descargar gratuitamente desde sus páginas oficiales desde Internet y que podrás instalar de manera independiente.

Ahora bien, aunque su instalación es sencilla, la configuración de estas herramientas para que funcionen adecuadamente no está al alcance de usuarios noveles. Por ello, la solución más simple es utilizar paquetes ya preinstalados y preconfigurados que incluyen no sólo estas herramientas sino también algunas otras añadidas, que nos facilitan mucho esta tarea y que son suficientes para nuestros propósitos con Joomla.

Existen diversas soluciones, cada una con sus propias características:

  • EASYPHP. Profusamente utilizado. Se caracteriza por ser un paquete exclusivamente para Windows, no libre pero sí gratuito, pero no tiene servidor de correo, necesario por ejemplo para que en Joomla puedan registrarse nuevos usuarios a través de e-mail o para que funcionen los formularios de contacto (se pueden utilizar los datos de una cuenta POP).
  • JS-U SERVER. El equipo de desarrolladores de Joomla Spanish, muy interesados en que Joomla se utilice por el mayor número de usuarios, nos ofrece en su sitio oficial un archivo comprimido con el servidor local JS-U Server instalado y configurado junto con la instalación de Joomla en sus dos últimas versiones: joomla 1.0.15 y joomla 1.5. Es una muy buena manera de acercarse a Joomla desde un punto de vista educativo, para iniciarse y para experimentar con Joomla en las primeras etapas de aprendizaje de la herramienta.
  • XAMPP. Nuestro preferido. Es open source, libre, gratuito y multiplataforma (posee versiones para Windows, Linux, Mac). Incluye servidor de correo y aplicación de FTP. De fácil instalación y sencilla utilización.

Cómo obtener e instalar XAMPP para Linux

Si utilizas un equipo con Linux, Ubuntu por ejemplo (mi sistema operativo preferido), tendrás que descargar la versión XAMPP para Linux. El procedimiento es muy sencillo:
Accede a la página oficial del proyecto XAMPP desde Mozilla Firefox:

Apache friends - XAMPP for Linux http://www.apachefriends.org/en/xampp-linux.html

Descarga la última versión disponible: en concreto, la versión XAMPP para Linux 1.7. En la página inicial localiza el apartado Step 1. Download y haz clic sobre el enlace Xampp Linux 1.7.1. El enlace te llevará a la descarga del archivo desde SourceForge.net, el mayor almacén de software libre en Internet y, en breves segundos, la ventana de descargas del navegador Firefox te solicitará qué hacer con el archivo en cuestión. Guárdalo en tu directorio personal.

 Descarga Xampp para Linux

El resultado de este proceso será la presencia en el directorio /home/”nombrede usuario” de un archivo denominado xampp-linux-1.7.tar.gz.

Xampp, servidor web también en Ubuntu

Inicia una sesión en la consola o terminal (Menú Aplicaciones - Accesorios - Terminal) e identifícate como administrador del sistema escribiendo el siguiente comando:

sudo -s

El sistema te solicitará tu contraseña de root, de superadministrador (la que pusiste en la instalación del sistema), tecléala y observa que ante la consola ya estarás identificado como tal.

Xampp, servidor web también en Ubuntu

Observa que en la terminal estás posicionado directamente en tu directorio personal, justo el directorio en el que se localiza el archivo tar.gz descargado en el paso previo (si hubieras descargado el archivo a una carpeta de este directorio tendrías que teclear en la consola cd /home/”nombredeusuario/”carpetadedescarga”, si no conoces la ruta siempre puedes utilizar el comando ls -l para listar archivos y carpetas o bien acudir a Nautilus utilizando el botón presente en la ventana Cambiar entre la barra de lugares y de botones). Pero vamos a suponer que, en efecto, se encuentra en tu directorio personal, por tanto, nuestras instrucciones apuntarán a esta ubicación.

El siguiente paso será descomprimir la carpeta y copiar sus archivos al directorio /opt, directorio predeterminado para este tipo de instalaciones, con el siguiente comando en la consola o terminal:

tar xvfz xampp-linux.1.7.1.tar.gz -C /opt

te explicamos el comando:

  • tar xvfz descomprime el contenido del archivo comprimido tar.gz y genera de nuevo la estructura de directorios
  • xampp-linux.1.7.1.tar.gz archivo descargado de Apache friends
  • -C ordenamos que lo descomprima a un directorio concreto
  • /opt el directorio de destino en el que se copiará toda la estructura de directorios de XAMPP

Observarás que comienza el volcado de archivos y que, en breve, XAMPP para Linux ya estará instalado en el directorio señalado. Así, si navegas por el sistema de archivos y acudes al directorio opt observarás que, en efecto, se ha creado un nuevo directorio llamado lampp en cuyo interior se encuentran todas las carpetas y archivos de Xampp. Una de ellas, la carpeta htdocs, es precisamente el directorio en el que se debe alojar Joomla cuando vayas a realizar su instalación.

Como iniciar el servidor

Deberás iniciar el servidor siempre desde la consola o terminal utilizando el comando:

sudo /opt/lampp/lampp start

Tras teclear la contraseña de root aparecerá en la consola un mensaje indicando que el servidor XAMPP para Linux se ha
iniciado correctamente:
root@edisue-laptop:~# /opt/lampp/lampp start
Starting XAMPP for Linux 1.7…
XAMPP: Starting Apache with SSL (and PHP5)…
XAMPP: XAMPP-MySQL is already running.
XAMPP: XAMPP-ProFTPD is already running.
XAMPP for Linux started.
root@edisue-laptop:~#

Para comprobar que efectivamente es así y que todo funciona correctamente, inicia tu navegador y accede a la dirección

http://localhost

Aparecerá la página inicial de XAMPP en la que podrás seleccionar la opción Español para acceder a la página de presentación.

Xampp, servidor web también en Ubuntu

Como detener el servidor

Siempre desde la consola o terminal. Teclea el comando:

sudo /opt/lampp/lampp stop

¡Así de simple!

 



Manual de Kompozer: módulo 5 - Imágenes en tu página

9 05 2009

Vas a realizar la portada de tu sitio Web Los ecosistemas. Como en ella vas a ubicar diferentes botones de navegación, una imagen representativa y un título tendrás que utilizar una tabla que te permita ubicar correctamente cada imagen. Además, como recomendación general te señalamos que, en primer lugar, copies a la carpeta imagenes de la estructura de tu sitio Web, es decir, en el directorio webcurso - subcarpeta imagenes, las imágenes que vas a utilizar: Ver nuestros artículos anteriores dedicados a Kompozer.

Para seguir nuestro tutorial online te ofrecemos a continuación las imágenes que serán empleadas en la página (ya convenientemente tratadas con un programa de edición gráfico, en concreto, con Gimp) para que te las descargues y las utilices directamente.

Portada para la página

Imagen para la portada

BotónBotónBotón BotónBotón Botón

 Botones de navegación

T�tulo de la portada

Imagen para el titular de la Web

Utiliza la opción de tu navegador para guardar cada imagen en la carpeta imagenes que has creado en el directorio webcurso, directorio especialmente creado para seguir nuestro curso online. Si utilizas Mozilla Firefox es tan simple como posicionarte encima de cada imagen con el botón derecho del ratón, seleccionar la opción Guardar imagen como y localizar en tu directorio personal la carpeta webcurso - subcarpeta imagenes en la ventana de Firefox que aparece en pantalla.

Crea una tabla para ubicar las imágenes

La mejor opción para posicionar toda clase de elementos en una página Web es la utilización de tablas, ya sean éstos imágenes, otros elementos multimedia e incluso texto.

Te mostramos cómo incluir tablas en tu página.

En primer lugar, inicia una nueva página mediante el botón Nuevo de la barra de iconos de Kompozer (también puedes ir a Archivo - Nuevo o utilizar la combinación de teclas Ctrl + N).
Para insertar una tabla en la página puedes utilizar cualquiera de los procedimientos siguientes:

  • Haz clic sobre el icono Tabla de la barra de iconos
  • Acude al menú Insertar - Tabla

La ventana Insertar tabla se mostrará en pantalla:

Kompozer, insertar tabla

Observa que presenta tres pestañas:

  • Rápido: puedes seleccionar con el ratón el número de filas y columnas
  • Preciso: te solicitará que establezcas un número determinado de filas y de columnas. Teclea el el número en los campos correspondientes.
  • Celda: te permitirá editar las características de las celdas de la tabla, su alineación, el espacio de separación entre celdas, el ajuste del texto…

El botón Edición avanzada te permite establecer opciones avanzadas como atributos html, eventos de Javascript, estilos, etc.

En esta práctica, haz clic sobre la pestaña Preciso e introduce los siguientes valores:

Kompozer, insertar tabla

  • Filas: 9
  • Columnas: 4
  • Anchura: 1000 (recuerda que la resolución de pantalla que estamos utilizando es 1024, si necesitas diseñar la web para una menor resolución sólo tienes que reducir este número, por ejemplo a 800) y selecciona píxeles en el cuadro de lista desplegable situado a su derecha.
  • Observa que en Borde aparece de forma predeterminado 1, déjalo como ésta: esto hará que la tabla tenga un borde sencillo con el que podrás visualizar mejor las celdas que la componen. No te preocupes porque podrás modificar este valor en cualquier momento que lo precises.

Cuando finalices haz clic sobre el botón Aceptar. La tabla aparecerá en el espacio de trabajo de Kompozer.

Una vez creada la tabla, puedes editar sus propiedades desde la opción de menú Tabla - Propiedades de la tabla. También puedes utilizar el menú contextual del botón derecho del ratón, si sitúas el cursor dentro de la tabla y haces clic en Propiedades de celda: de este modo establecerás las propiedades a nivel de celda.
Puedes también establecer el ancho y alto de la tabla pulsando y arrastrando sobre los recuadros de control de la tabla, que localizarás en la parte superior e izquierda de la página:

Kompozer, insertar tabla

Inserta los botones de navegación

Posiciónate con el cursor del ratón en la primera celda: será aquí donde colocarás el primer botón de navegación.
Para insertar una imagen acude al menú Insertar - Imagen o haz clic sobre el icono Imagen de la barra de iconos. Se abrirá en pantalla la ventana Propiedades de la imagen.

Kompozer, propiedades de la imagen

  • La pestaña Ubicación indica a Kompozer, de dónde puede tomar la imagen. Al hacer clic en el icono Elegir archivo, explorará el sistema de archivos de tu equipo para seleccionar la imagen que elijas. Debes indicar un texto alternativo de la imagen obligatoriamente: texto que se mostrará cuando se pase el ratón por encima de la imagen.
  • La pestaña Dimensiones te ofrece la posibilidad de cambiar el tamaño de la imagen.
  • La pestaña Apariencia te permite configurar la distancia entre la imagen y el texto, así como la alineación del texto alrededor de la imagen.
  • La pestaña Enlace te ofrece la opción de establecer un hipervínculo para la imagen.
  • El botón Edición avanzada te permite establecer opciones avanzadas para la imagen como atributos HTML, eventos de JavaScript, estilos, etc.

Haz clic en la pestaña Ubicación y mediante el icono Elegir archivo localiza en tu directorio personal la carpeta webcurso. Haz doble clic sobre ella para acceder a su contenido y repite el procedimiento sobre la carpeta imagenes. Selecciona el archivo bot01.jpg localizado en ella y haz clic, finalmente, en el botón Abrir. Observa que la ruta al archivo aparece ahora en la ventana Propiedades de la imagen:
Teclea un texto en el campo Texto alternativo, por ejemplo, Botón definición.
Observa que la Vista preliminar te ofrece una miniatura de la imagen que vas a incluir en tu página y te indica su medida en píxeles.

Kompozer, insertar una imagen en la página web

Guarda ahora la página mediante Archivo - Guardar como… En la ventana Título de la página teclea Portada como nombre y guarda el archivo con el nombre index.html en la carpeta webcurso.
Ahora que ya tienes el archivo index.html observa otro procedimiento para insertar imágenes en tu página:

Kompozer, administrador de sitios

Acude a la ventana Administrador de sitios.

Despliega, haciendo clic sobre el signo más situado a la izquierda de la entrada Los ecosistemas la lista de carpetas y archivos de tu sitio. Repite el procedimiento sobre el signo más a la izquierda de la carpeta imagenes. Se muestra en la ventana el listado de todas las imágenes que previamente has copiado en esta carpeta.

Haz clic y arrastra hasta el espacio de trabajo la imagen que deseas incluir en la página. Por ejemplo, haz clic sobre la imagen bot02.jpg y arrástrala hasta la primera celda de la segunda fila, justo debajo de la imagen del botón Definición que incluiste en el apartado anterior.

Con un doble clic sobre la imagen del botón abrirás la ventana Propiedades de imagen. Esto te permitirá editar en cualquier momento, las propiedades de cualquier imagen que tengas ya incluida en tu página Web. Por ejemplo, teclea Botón Tipos de ecosistemas como Texto alternativo.

Repite el procedimiento con los otros botones de navegación y añádelos en la página a modo de columna.

Kompozer, insertar una imagen en la página web

Incluye un titular en la Portada

Observa que el ancho de la primera columna es demasiado grande. Para reducirlo, haz clic sobre el control de la misma (en la parte superior del espacio de trabajo) y arrastra hasta la izquierda hasta “chocar” con los botones. Puedes reubicar también, si lo deseas, los límites de las otras columnas.

Vas a insertar una imagen con un titular que ocupará las tres celdas restantes de la primera fila, por tanto, debes unirlas previamente en una sola. Para ello, haz clic sobre la segunda celda de la primera fila y, sin soltar el ratón, arrastra hasta la última para seleccionarlas (verás que aparecen remarcadas). Utiliza el menú contextual del botón derecho del ratón sobre las celdas seleccionadas y haz clic, en concreto, sobre la entrada Unir las celdas seleccionadas. Esto hará que las tres celdas se unan en una única celda que ocupe todo su ancho. (Los usuarios de Microsoft reconocerán esta acción como Combinar celdas).

Kompozer, tablas: unir celdas

Ahora arrastra la imagen titular.jpg, que localizarás en la carpeta imágenes, a la celda resultante de la unión. Utiliza de nuevo el menú contextual del botón derecho del ratón sobre esta celda y selecciona la entrada Propiedades de Celda de tabla. En la nueva ventana que aparece en pantalla, Propiedades de la tabla - pestaña Celdas, localiza el apartado Alineación del contenido. Selecciona Centrada en el menú desplegable Horizontal.

Kompozer, tabla: alineación de la celda

Haz clic sucesivamente sobre Aplicar y Aceptar. La imagen con el titular se posicionará en el centro de la celda.

Incluye la imagen de portada

Repite el procedimiento que ya conoces para unir las celdas que van desde la segunda celda de la segunda fila a la última de la fila 8 (ya sabes, clic y arrastra para seleccionarlas) y selección de la entrada, en el menú contextual del botón derecho del ratón, Unir las celdas seleccionadas.

Haz clic y arrastra sobre la imagen portada.jpg de la carpeta imagenes a esta ubicación. Utiliza también el menú contextual del botón derecho del ratón - Propiedades de la Celda de la Tabla para cambiar la alineación horizontal de la misma a Centrada, tal y como hemos hecho anteriormente.

Incluye información en el pie de página

Une las 4 celdas de la última fila. En la celda resultante teclea tus datos personales, el nombre de tu centro educativo y la fecha de creación de la Web (utiliza la opción del menú Insertar - caracteres y símbolos si deseas incluir el signo del Copyright). Incluye también en este pie de página la licencia que regirá tu sitio Web, por ejemplo, una licencia Creative Commons o una licencia GNU/GPL.

Edita este texto según tus preferencias.

Nota. Modifica el borde de la tabla. Para ello selecciona de nuevo Propiedades de la Celda de la Tabla en el menú contextual del botón derecho del ratón en una de las celdas de la tabla y haz clic sobre la pestaña Tabla. Localiza el apartado Borde y modifica el valor 1 sustituyéndolo por 0 píxeles.

Guarda finalmente la página utilizando el botón Guardar. Y comprueba el aspecto de la página acudiendo a la carpeta webcurso y haciendo doble clic sobre el archivo index. html para que se abra en tu navegador predeterminado.

Kompozer, aspecto de la página inicial de tu sitio

¡No está mal para ser tu segunda página en Kompozer!

Visualiza nuestro manual. Manual Kompozer - Módulo 5: Issuu
Manual Kompozer - Módulo 5: Trabajo con imágenes. Formato PDF
Archivo para editar con OpenOffice: formato ODT

				


Manual de Kompozer: módulo 4 - La primera página

3 05 2009

En este artículo te mostraremos cómo realizar tu primera página Web con Kompozer, diseñarás la estructura del sitio y crearás una primera página con texto que editarás para mejorarla estéticamente.

Diseña la estructura de carpetas y directorios

Utilizando los procedimientos habituales para crear nuevas carpetas en el Sistema Operativo instalado en tu equipo, crea un directorio llamado webcurso en tu directorio personal y, en su interior, las carpetas imagenes, multimedia y archivos, necesarias para tu sitio Web inicial.

La primera página

Ejecuta Kompozer por el procedimiento habitual: observa la pantalla principal de la aplicación y el área concreto de trabajo donde irás creando tu primera página Web. Acude al menú Archivo y en el desplegable selecciona la opción Guardar como… Kompozer te solicitará un título para la página que estás guardando, título que se mostrará en la barra de título del navegador Web cuando accedas a la página desde Internet. Teclea en el campo de texto Definición; este será el título de la página que estás creando.
En pantalla se mostrará, a continuación, la ventana Guardar como que te ofrecerá como nombre del archivo de la página web que estás realizando el mismo que escribiste en el párrafo anterior. Modifica el nombre del archivo por definicion.html y asegúrate de guardarlo en la carpeta webcurso que has creado cuando diseñaste la estructura del sitio.

Kompozer, guardar una nueva página Web

El resultado será un nuevo archivo definicion.html en la carpeta webcurso que podrás visualizar en tu navegador web simplemente haciendo doble clic sobre él. Lógicamente, en este momento, la página no mostrará nada más que un fondo blanco porque se encuentra completamente vacía (pero observa como el nombre de la página Definición sí se muestra en el Título de la ventana del navegador). Tendrás que comenzar a añadirle texto, imágenes y cualquier otro elemento multimedia que desees.

Configura Kompozer para tu nuevo sitio Web

Para facilitar el trabajo de creación y edición de tus páginas Web en Kompozer es muy conveniente que configures la aplicación para que referencie siempre tu sitio Web recién creado. Para ello tienes la ventana Administrador de sitios de Kompozer, muy útil e imprescindible cuando tienes varios sitios web creados en tu equipo. Te enseñamos a utilizarla.

Kompozer, ventana Administrador de sitios

Haz clic sobre el icono Editar sitios para abrir la ventana con el formulario de configuración de la publicación de un nuevo sitio.

Introduce los siguientes valores:

  • Nombre del sitio: Los ecosistemas.
  • Servidor de publicación: como el sitio web será realizado en tu equipo, en local (ya te ocuparás más adelante, cuando finalices su creación y edición, de publicarla en Internet), busca la carpeta webcurso mediante el botón Seleccionar directorio. Cuando la encuentres haz clic en el botón Seleccionar.
  • Nombre de usuario: Escribe tu nombre.

Kompozer, nuevo sitio Web

Haz clic finalmente en Aceptar. Observa cómo la estructura que has diseñado de archivos y carpetas ahora se muestra en la ventana Administrador de sitios.

Kompozer, ventana Administrador de sitios

Podrás utilizar el Administrador de sitios para acceder directamente a las páginas que vayas realizando y así poder editarlas con rapidez, crear nuevas carpetas en la carpeta webcurso, renombrarlas, etc. Resulta pues, muy útil, configurarlo adecuadamente.

Añade un texto a la página

El texto es un componente fundamental de las páginas Web. Lo generas tecleándolo (aunque también podrás copiarlo desde cualquier otro programa y pegarlo en el espacio de trabajo).

Debes considerar que su principal objetivo es su legibilidad, es decir, que se pueda leer con facilidad (circunstancia que va a depender no sólo del tipo de fuente y tamaño utilizado, sino también de los colores e imágenes empleados en el fondo de la página). Reserva el subrayado exclusivamente para los enlaces, utiliza la cursiva para titulares o para enfatizar algún fragmento de texto y usa la negrita para destacar alguna palabra.

Ten en cuenta que si empleas un tipo de fuente que el navegante de tu sitio Web no tiene en su equipo no la verá exactamente como la has diseñado. Por tanto, emplea tipos de fuente comunes como Arial, Times New Roman, Courier, fuentes prácticamente disponibles en cualquier equipo con cualquier Sistema Operativo instalado, incluidos equipos Linux.
Para organizar el texto en pantalla es preferible utilizar tablas (ya te indicaremos más adelante cómo hacerlo, aunque te adelantamos que es similar a como las usas con cualquier procesador de textos) y prescindir del uso de tabuladores o sangrías. Tampoco abuses de la utilización de viñetas.
¡Manos a la obra!

Teclea en el espacio de trabajo en blanco el siguiente texto: ¿Qué son los ecosistemas?. Pulsa la tecla Intro al final del párrafo para que Kompozer realice un salto de línea. ¡Exactamente igual como lo harías si estuvieras utilizando un procesador de textos en lugar de una aplicación de creación web!

Continúa tecleando:
En todo lugar, en los bosques, los ríos, en el desierto, en el mar o incluso en pequeñas charcas, se encuentran una gran variedad de seres vivos: animales, plantas, etc. Estos lugares también se caracterizan por la presencia de elementos inanimados como el aire, el agua, el suelo o la luz.
Los seres vivos necesitan estos elementos para crecer y desarrollarse.
El conjunto formado por todos los seres vivos y los seres inanimados de un territorio es un ecosistema.

Sólo debes preocuparte de escribir el texto y de realizar los intros que desees para separar los párrafos. Guarda el archivo desde el menú Archivo - Guardar. Visualiza su aspecto en tu navegador haciendo doble clic sobre el archivo definicion.html de la carpeta webcurso. Se mostrará el texto escrito pero la página sigue siendo muy sosa y aburrida: debes editarla para mejorar su aspecto.

Edita el texto escrito

Podrás editar el texto escrito para cambiar su tipo de fuente, tamaño de fuente, color, alineación de párrafos, etc. Considera que un paso previo y obligatorio es seleccionar previamente el fragmento de texto que deseas editar antes de aplicar en él cualquier cambio (haz clic y arrastra con el ratón para seleccionar un fragmento de texto, haz doble clic sobre una palabra para seleccionarla o haz doble clic y un clic rápido para seleccionar toda la línea): observa cómo el texto seleccionado se muestra resaltado para indicarte que lo está.

Alinea el título de la página al centro

Por defecto, el texto que tecleas o copias-pegas se alinea con el borde izquierdo de la ventana. Si quieres centrar el texto o alinearlo al margen derecho tendrás que utilizar uno de los iconos de alineación de texto que localizarás en la Barra de Formato de Kompozer.

 Kompozer, alineación del texto

En este caso utiliza el icono Alinea al centro para centrar el texto en la página que estás creando. El párrafo se moverá en consonancia. (Este procedimiento te permitirá también alinear imágenes, encabezados y líneas separadoras horizontales: simplemente selecciona el objeto cuya alineación quieras cambiar y haz clic sobre el botón apropiado).

Aumenta su tamaño

Kompozer te permite aumentar el tamaño del texto de una manera muy rápida utilizando los botones Reducir / Aumentar el tamaño de letra que encontrarás en la Barra de Formato:

Kompozer, aumentar /reducir el texto

Como siempre, primero tendrás que seleccionas el texto. Después haz clic sobre el botón Aumentar para que se muestre a mayor tamaño. Por ejemplo, haz clic 3 veces sobre este icono para que adquiera un tamaño apropiado. Finaliza haciendo clic sobre un lugar en blanco del espacio de trabajo para ver el resultado final.

Haz clic sobre la pestaña Vista Preliminar situada en la parte inferior del espacio de trabajo para ir visualizando el aspecto de la página, tal y como la vería un visitante de tu Web.

Repite el procedimiento, utilizando una vez el botón Aumentar el tamaño del texto, sobre el resto de los párrafos de la página. ¡Se aprecia una mejora sustancial en el diseño, aunque aún la página es muy simple al ser en blanco y negro!. ¡Añade algo de color para mejorar su presentación!.

Cambia el color del texto

Emplear colores en los textos puede añadir interés a las páginas. En la mayor parte de las ocasiones querrás emplear un color de texto que contraste fuertemente con el fondo: por defecto, la página que creas tiene un texto negro sobre un fondo blanco (podrás personalizar ambos aspectos más adelante). También es posible que quieras resaltar porciones de texto en las páginas mediante el empleo de un color de fuente diferente del que usas para el resto del texto. Por ejemplo, algunas páginas quedan elegantes con los encabezados en un color diferente. Ahora bien, recuerda no abusar en exceso del cambio de colores (la legibilidad es lo primero) y asegúrate de mantener los colores consistentes por todo el sitio. Por ejemplo, emplea el mismo color para el texto y los enlaces en la página principal que en las páginas internas.

Para cambiar el color del texto seleccionado debes utilizar los botones Elegir color de la Barra de Formato: el primero te permite cambiar el color de la fuente, el segundo cambiará el fondo.

Kompozer, cambiar el color del texto

En cuanto hagas clic sobre cualquiera de estos dos iconos se abrirá en pantalla la ventana Color del texto:

Kompozer, color del texto

Su utilización es muy simple: de la lista de colores predefinidos (la lista estándar que será visible en cualquier plataforma o en cualquier tipo de monitor) selecciona un color de tu interés o bien elige una tonalidad diferente entre la muestra que aparece en la parte izquierda de la ventaja haciendo clic sobre el lugar que determines. Puedes también utilizar la gama de tonalidades que se encuentra justamente debajo para seleccionar un matiz de color más claro u oscuro.
Observa cómo cambian los valores establecidos en Tono, Saturación, Brillo, Rojo, Verde, Azul, cada vez que seleccionas un color diferente y la pequeña muestra del color que te ofrece la propia ventana según el color que hayas seleccionado.
Esta ventana merece una pequeña explicación que tiene que ver con los valores que se muestran en la parte inferior de la misma:

La combinación de teclas y números que se muestra en la caja de texto Hexadecimal es otra forma de referenciar los colores. Puedes consultar el código hexadecimal de cada color en http://html-color-codes.info/codigos-de-colores-hexadecimales/ y ver sus resultados finales.

Encontrarás en Internet muchas herramientas online que te permitirán elegir y visualizar diferentes gamas de color utilizando su código hexadecimal y/o instalar programas específicos para conocer el código hexadecimal de cualquier color.

Selección de Sitios Web:

  • Valores de los colores en Hexadecimal: http://www.webtaller.com/utilidades/csscoder/colores.php
  • Cloford: paleta con más de 500 tonos de color http://cloford.com/resources/colours/500col.htm
  • ColorSchemer: recurso de selección online http://www.colorschemer.com/online.html
  • Conversor online de colores DRAAC: Te permite visualizar el color seleccionado como fondo de la pantalla http://www.draac.com/colorconvert.html

Programas gratuitos y libres:

  • Windows: Pixel Picker http://www.screwturn.eu/PixelPicker.ashx - Programa libre bajo licencia GNU/GPL. Requiere Microsoft .Net Framework 2.0
  • Windows: Instant Eyedropper http://instant-eyedropper.com/ y Pixel Pick http://www.design-lib.com/the_pixel-pick.php ambos completamente gratuitos
  • Mac Os X: Hex Color Picker http://wafflesoftware.net/hexpicker/
  • Ubuntu: Dispones de Gcolor2 y KcolorChooser, ambas aplicaciones muy similares que te permitirán obtener el código hexadecimal del color seleccionado. Puedes instalarlas directamente desde Synaptic.

En este ejemplo en concreto, selecciona el título con la pregunta en el espacio de trabajo y selecciona un color de la gama azul (tonalidad oscura) de la gama de colores predefinidos de la ventana.

Repite el procedimiento para seleccionar el color gris oscuro (código hexadecimal #333333) y aplicarlo al resto de párrafos de la página.

El aspecto estético de la página ha mejorado, ¿no crees?

Utiliza encabezados predeterminados

Aumentar o Reducir el tamaño del texto de tu página Web utilizando los botones que has visto en la Barra de Formatos no es demasiado preciso. Kompozer te ofrece la posibilidad de utilizar encabezados en las páginas Web, un tipo especial de formato de texto ya predefinido que configura los textos seleccionados con un tamaño de letra más grande que el texto normal, habitualmente en negrita y normalmente separados del texto anterior y posterior por una línea de espacio en blanco.

Puedes emplear un encabeza para el título de la página pero también puedes utilizar distintos tamaños de encabezados para diferentes niveles de énfasis, además de que la utilización de encabezados te permite dar uniformidad al tamaño de los textos en tu sitio Web de una manera muy rápida y eficaz.

En HTML se dispone de 6 tamaños de encabezado. No todos resultan efectivos como tal porque algunos son excesivamente pequeños, incluso más pequeños que el cuerpo del texto.

Puedes acceder a los 6 tipos disponibles en Kompozer desde el menú desplegable de estilos de párrafo:

Kompozer, estilos de párrafo - encabezados

Practica con la página que estás creando:

  1. Utiliza la entrada del menú Editar - Deshacer, el icono Deshacer o la combinación de teclas Ctrl + Z tantas veces como precises hasta devolver la apariencia de la página a su estado inicial original: es decir, texto sin aplicar ningún tipo de formato de tamaño de fuente o color.
  2. Selecciona el título interrogativo. Despliega los estilos de párrafo anteriores y haz clic sobre Título 1. ¡Vaya, menuda apariencia… y qué sencillo!
  3. Ahora aplica de nuevo los procedimientos que ya conoces para cambiar:
    1. El título a un color de tono azulado oscuro
    2. El resto del texto aumenta su tamaño una vez utilizando el botón Aumentar el tamaño de fuente y cambia el color a un tono grisáceo oscuro, tal y como ya sabes realizar.
    3. Selecciona el último párrafo de la página (el conjunto formado por… es un ecosistema) y aplícale un estilo de párrafo Título 4. Utiliza la pestaña Vista Preliminar para visualizar el aspecto general de tu página y admira su nueva apariencia.

Kompozer, aspecto final de la página

Guarda el archivo mediante Archivo - Guardar o utilizando el icono Guardar.

Si lo deseas puedes previsualizar el aspecto de la página directamente en tu navegador predeterminado localizando la carpeta webcurso y haciendo doble clic sobre el archivo definicion.html. ¡Ya conoces cómo incluir texto en una página Web y como editarlo! ¡Tu primera clase de Kompozer ha finalizado!

Manual Kompozer - Módulo 4: tu primera página Web. Formato PDF
Archivo para editar con OpenOffice: formato ODT 


Manual de Kompozer: módulo 3 - El primer vistazo a Kompozer

2 05 2009

Inicia Kompozer

Kompozer, creación WebPuedes ejecutar Kompozer de diferentes maneras, tal y como inicias otras aplicaciones en tu Sistema Operativo: mediante el menú de acceso a programas, el acceso directo en el Escritorio, etc. Ahora bien, esto dependerá, claro está, de cuál estés utilizando en tu ordenador.

Sistema Operativo: Windows XP - Windows Vista

Recuerda que en este caso, utilizas una versión portable de Kompozer, es decir, que no requiere ningún tipo de instalación. El acceso a la aplicación se realizará, por tanto, directamente desde el archivo kompozer.exe que localizarás en la carpeta descomprimida que acabas de descargar desde Internet y descomprimir en tu equipo (Ver artículo de Con el ordenador a cuestas dedicado a la descarga e instalación de Kompozer). Un doble clic en este archivo te permitirá ejecutar el programa. Te recomendamos crees un acceso directo en el Escritorio que “apunte” a este ejecutable para que te sea más fácil iniciarlo la próxima vez.

Sistema Operativo: Ubuntu

Si tu Sistema Operativo es Ubuntu 8.10 o 9.04 te recomendamos utilices la versión para Windows con Wine (la versión propia de Linux experimenta cierres inesperados y, hasta ahora, no hay documentada una solución al respecto). Consulta nuestro artículo dedicado a la instalación de Wine en estas dos versiones pues previamente tienes que tener instalado esta aplicación en el equipo. Después descarga el mismo archivo zip para Windows, el mismo que descargarías si tuvieses este S.O. en tu ordenador. Descomprímelo y guarda la carpeta resultante de la descompresión en tu directorio personal, por ejemplo. Para iniciar Kompozer con Wine localiza el archivo ejecutable Kompozer.exe y utiliza el menú contextual del botón derecho del ratón sobre él para abrirlo con Wine.

Utilizar este procedimiento cada vez que inicias Kompozer es bastante engorroso. Lo ideal es que dispongas de un acceso directo a la aplicación directamente en el Escritorio de Gnome. Y realizarlo no es complicado:

  • Renombra la carpeta descomprimida en la que se encuentran los archivos de Kompozer con el nombre Kompozer (evitamos así los espacios en blanco en el nombre de la carpeta).
  • Haz clic con el botón derecho en un espacio libre del escritorio.
  • Selecciona Crear un lanzador en el menú que aparece para llamar a la ventana Crear lanzador.
  • Asegúrate de que incluyes los siguientes valores en la ventana:
    • Tipo: Aplicación.
    • Nombre: Kompozer
    • Comando: wine “ruta al archivo kompozer.exe”, por ejemplo, si tienes la carpeta Kompozer en una carpeta llamada programas de tu directorio personal el comando quedaría así: wine /home/nombredelusuario/programas/kompozer/kompozer.exe
    • Comentario: es un apartado no obligatorio, puedes añadir un comentario en el cuadro de texto del tipo Kompozer, aplicación para la creación Web.
    • Haz clic sobre el icono de la ventana Crear lanzador. Se abrirá la ventana Examinar iconos. Utiliza el botón Examinar de esta ventana para localizar la carpeta Kompozer en la que se encuentran los archivos de la aplicación (la primera entrada en Lugares, a la izquierda de la ventana Examinar, será precisamente tu directorio personal. Vete abriendo sucesivamente las carpetas programas - kompozer - chrome - icons - default y, cuando llegues a esta última, selecciona Abrir. Selecciona uno de los iconos que muestra la ventana Examinar iconos, por ejemplo mozicon50.xpm.
  • El nuevo icono de acceso directo a la aplicación se mostrará en el Escritorio de Ubuntu.

Sistema Operativo: OpenSuse 11.1

Si estás utilizando Gnome con esta última versión de OpenSuse sigue exactamente las mismas indicaciones que te hemos señalado para Ubuntu 8.10 y 9.04: utiliza la versión Windows con Wine y crea un lanzador en el Escritorio a la aplicación. (Hemos probado la versión instalada de Kompozer para Linux 0.70 en OpenSuse 11.1 a través de los repositorios oficiales de la aplicación (menú Sistema - Instalar software) y también se cierra inesperadamente al incluir imágenes, tablas, etc.; Kompozer en español con Wine funciona perfectamente también en OpenSuse 11.1 ).

La pantalla inicial de Kompozer

Cuando inicies Kompozer por primera vez verás su pantalla principal, de aspecto similar al siguiente:

Kompozer, pantalla principal

La ventana Consejos de Kompozer

Cada vez que inicias Kompozer se mostrará una pequeña ventana en pantalla llamada Consejos de Kompozer, con simples orientaciones en el uso de la aplicación. Si te molesta que se abra continuamente, destilda la opción Mostrar consejos en el inicio. Siempre podrás volver a mostrarla mediante Ayuda - Consejo del día. Puedes también cerrarla directamente en cada ocasión mediante el botón Cerrar.

Los elementos de la pantalla principal

En la ventana de trabajo de Kompozer te encontrarás con diversos elementos (de arriba a abajo):

Barra de Título

A la izquierda de esta barra aparece el título de la página Web que estás editando (sin titulo, cuando se inicia por vez primera) y el nombre del archivo, en caso de que ya lo hayas guardado con anterioridad:

 Komponer, barra de t�tulo

También presenta, a la derecha, los botones habituales de control de la ventana maximizar/restaurar, minimizar y cerrar la aplicación.

Barra de Menús

Incluye los menús que te permitirán acceder a todas las opciones del programa.

 Kompozer, barra de menú

Barra de Redacción (barra de iconos)

En ella aparecen botones con las opciones de uso más habitual que se encuentran en la Barra de Menús para que accedas más rápidamente a sus funcionalidades.

Kompozer, barra de redacción

Barras de Formato

Incluye botones que te permitirán acceder a opciones más básicas de formato de textos, párrafos, estilos y capas. Son similares a los de cualquier procesador de textos y su funcionalidad prácticamente la misma.

Kompozer, barra de formato

Ventana Administrador de sitios Web

Está situada a la izquierda y en ella configurarás tu sitio Web, para poder acceder de forma rápida a las distintas páginas del sitio que vayas realizando. A través de ella también podrás publicar en Internet tus sitios y editar directamente las páginas ya publicadas sin necesidad de tenerlas guardadas en el disco local.

 Kompozer, ventana Administrador de sitios

Ventana de Área de Edición

Es en esta área donde diseñarás y editarás las páginas de tu sitio Web. Es tu espacio de trabajo. Cada página que estés editando se mostrará en esta área, pudiendo cambiar de una a otra mediante las pestañas que se mostrarán en la parte superior con el título de cada página. También podrás mostrar las reglas en esta área, que te ayudarán a dimensionar diversos objetos.

Kompozer, ventana de edición

En la parte inferior verás la Barra de modo de edición que muestra cuatro pestañas con las que podrás cambiar el modo de edición:

  • Normal o modo WYSIWYG
  • Etiquetas HTML: muestra de forma esquemáticas las etiquetas de lenguaje HTML utilizadas
  • Código fuente: acceso al código HTML de la página
  • Vista Preliminar: muestra el aspecto de la página tal y como se vería en el navegador Web.

Barra de Estado

Es una barra muy útil situada en la parte inferior de la pantalla inicial de Kompozer. Proporciona información diversa, como la relativa a dentro de qué etiqueta HTML te encuentras. A través de ella podrás seleccionar etiquetas con sus contenidos para realizar acciones sobre ellas como editar, dar formato, eliminar, etc.

Kompozer, barra de estado

Manual Kompozer Módulo 3 - El primer vistazo a Kompozer: formato PDF
Archivo para ser editado con OpenOffice: formato ODT

 



Manual de Kompozer: módulo 2 - Conceptos básicos sobre publicación Web

1 05 2009

La World Wide Web y las páginas Web

Internet, un mundo interconectadoLa World Wide Web es un servicio gráfico de Internet capaz de proporcionar una red de documentos interactiva. Fue inventada por un laboratorio suizo, el CERN, en 1991. Es el servicio de Internet con mayor éxito y que crece con más rapidez. Su éxito se debe a la facilidad de uso, a la capacidad de presentar información diversa, actualizada y proveniente de cualquier punto del planeta y a la sencillez con la que es posible crear y publicar documentos en este sistema. Por supuesto que no es un “lugar”; se trata, en realidad, de secciones de información separadas y almacenadas en ordenadores denominados servidores web, estando todos ellos conectados a través de diversos medios (satélites, líneas telefónicas, fibra óptica,…) y entendiéndose con un protocolo (lenguaje) común.

Cuando se navega por la Web utilizamos un “navegador web”, un programa como Internet Explorer o Mozilla Firefox, con el que es posible acceder a los ficheros almacenados en dichos servidores. El navegador solicita una página a un servidor (proporcionándole la información necesaria sobre su dirección en Internet) y éste se la envía. Para establecer el intercambio de información, los exploradores y los servidores utilizan un conjunto de reglas de comunicación llamadas Protocolo de Transferencia de Hipertexto (HTTP); por este motivo, todas las direcciones de páginas Web comienzan con http:// aunque no es necesario teclear estos caracteres en los navegadores actuales.

Los ficheros a los que accedes se denominan páginas Web, que pueden contener:

  • Texto.
  • Hipervínculos. Para explorar la WWW los usuarios navegan de una página a otra señalando y haciendo clic en hipervínculos de texto o gráficos, que son puntos del documento que permiten acceder a otra sección del mismo (hipervínculos internos) o a otro documento (hipervínculos externos). Se les denomina también vínculos, enlaces, nodos o links. Los exploradores suelen señalar la presencia de un hipervínculo en el documento mediante la transformación de la apariencia del puntero del ratón: generalmente, al colocarse encima de un hipervínculo, se transforma en una mano que señala algo.
  • Tablas.
  • Formularios.
  • Marcos (frames).
  • Imágenes estáticas o en movimiento.
  • Sonidos y otros elementos multimedia.
  • Etc.

Las páginas Web son los documentos básicos de la World Wide Web. Están basadas en la tecnología hipermedia, que integra las posibilidades de los multimedia y del hipertexto, con lo que se puede “navegar” en un mar de información textual, gráfica y sonora. Un sitio Web no es más que una colección de páginas Web enlazadas que contienen información relacionada.

El lenguaje HTML

Hasta hace poco la creación de páginas Web era algo reservado, principalmente, a usuarios con grandes conocimientos de informática, puesto que “debajo” de una página, del texto e imágenes que contiene, descansa un lenguaje propio de páginas Web: el Lenguaje de Marcas de HiperTexto (Hypertext Markup Languaje) o HTML. Algo así como un “armazón” informático que no ves cuando navegas por las páginas, pero que está allí, tras lo que sí ves, para hacer que eso exista.
Este formato, diseñado inicialmente por Tim Berners-Lee, el creador de la World Wide Web, y ampliado posteriormente por distintos grupos de trabajo y organismos, permite que ordenadores de distinto tipo y, con distintos sistemas operativos, puedan ver de la misma forma el contenido de la red.

Html, lenguaje propio de páginas WebEl HTML, cuando apareció, hacia 1991, estaba diseñado para contener únicamente texto e imágenes de un modo básico. Posteriormente, se le fueron añadiendo otras capacidades y características y, actualmente, permite la inclusión de vídeo, sonido e incluso imágenes y audio en tiempo real. Es pues, un lenguaje en permanente evolución. A medida que este lenguaje evoluciona, las nuevas versiones de los exploradores agregan funcionalidades más avanzadas, como controles ActiveX, programas VBSript, programas CGI, programas Java, Flash, etc., que refuerzan, sobre todo, las características interactivas de la tecnología hipermedia.

No tiene intención este manual de mostrarte cómo utilizar el lenguaje HTML (puedes localizar múltiples páginas en Internet con información precisa al respecto) pero te mostraremos, a modo de ejemplo, algunas cuestiones sencillas para que comprendas cómo actúa Kompozer “por debajo” de lo que realizas en él:

  • El HTML se genera a partir de código constituido por etiquetas o tags, que definen cómo se presenta la página Web y permite a los navegadores interpretarlo de forma que lo que tú veas a través del navegador sea una página atractiva.
  • Las etiquetas tendrán una marca de inicio y una de final: por ejemplo, es una etiqueta de inicio y es una etiqueta de final, que caracterizan el principio y el final de un documento HTML.
  • Por tanto, todos los documentos HTML deben estar entre las etiquetas <HTML> y </HTML> .
  • El documento en sí está dividido en dos zonas principales:
  • El encabezamiento, que se encierra con las etiquetas <HEAD> y </HEAD> que contiene información del documento, que no se verá en la pantalla principal, como el título del documento (comprendido entre las etiquetas <TITLE> y < , información para los buscadores de páginas web y otras cuestiones de interés.
  • El cuerpo, parte fundamental del documento, todo lo que aparecerá en la pantalla principal (texto, imágenes, elementos multimedia, etc.). Está comprendido entre las etiquetas <BODY> y </BODY>.

Ejemplo típico:

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body>Este es el texto que se vera en la pagina cuando me conecte a ella con un navegador Web <br>
Este parrafo ira en una linea aparte.
</body>
</html>

Introduces el texto tal cual está en un sencillo editor de notas y lo guardas con la extensión html. Sólo tienes que hacer doble clic sobre él para que el navegador predeterminado de tu equipo lo abra y puedas visualizar el aspecto final de esta página que estás construyendo. Con HTML puedes dar formato al texto, es decir, configurar el tipo, el color y el tamaño de la fuente, incluir imágenes y otros elementos multimedia, editar sus características, insertar enlaces y muchísimo más.

Pero, afortunadamente con las aplicaciones de edición y creación de páginas Web actuales, como es el caso de Kompozer, no necesitarás conocer nada de HTML para realizar tus sitios Web (aunque para diseñadores Web medios y avanzados sí será necesario). El programa utiliza una interfaz muy similar a un procesador de textos, en la que el usuario añade texto y le da formato, inserta imágenes y elementos multimedia… y de forma automática, es la aplicación la que genera las correspondientes etiquetas HTML sin necesidad de tu intervención. Esto se conoce como LO-QUE-VES-ES-LO-QUE-OBTIENES (WYSIWYG, What-You-See-Is-What-You-Get). Ahora bien, si eres capaz de combinar las posibilidades que Kompozer te ofrece y tus conocimientos de lenguaje HTML los resultados serán mucho más precisos, creativos y potentes.

Para conocer más sobre el lenguaje HTML visita:
http://roble.pntic.mec.es/apuente/html/
Excelente manual del lenguaje HTML para diseñadores básicos, medios y avanzados realizado por Ángel Ricardo Puente Pérez, Asesor Técnico Docente del Área TIC de la Dirección General de Infraestructuras y Servicios de la Consejería de Educación de la Comunidad de Madrid.

Una vez que finalices tu sitio Web, éste debe publicarse en la Web para que pueda ser visto por el resto del mundo. Publicar un sitio Web lleva consigo la copia de las páginas y ficheros del ordenador en el que el sitio Web ha sido creado a un servidor Web. Pero esta cuestión será abordada con posterioridad.

Cuestiones preliminares

Cuidado con los nombres de los archivos

Cuando diseñes un sitio Web, con objeto de evitar problemas con los nombres de los archivos, es muy importante que los que crees (tanto páginas html, imágenes, carpetas,…) cumplan los siguientes requisitos:

  • Utilizar una sola palabra como nombre de un archivo.
  • Que no tenga más de 8 caracteres.
  • Que no tenga vocales con tildes, ni mayúsculas, ni eñes ni espacios en blanco.

Cabe recordar que hasta hace poco no se podían emplear dichos caracteres en las URL. Ten en cuenta que todos los servidores no tienen el mismo sistema operativo (de hecho son una minoría los que tienen un sistema operativo Windows). Por tanto, es importante, para evitar problemas con los nombres de archivo cuando quieras “subirlos” al servidor, que se tengan en cuenta las reglas descritas anteriormente. De lo contrario, puede ocurrir que tu sitio Web funcione perfectamente en tu equipo (en lo que se llama en local) y en cambio, en el servidor de Internet en el que está publicado, no.

Atención a la resolución de la pantalla

Con respecto a la resolución de la pantalla, actualmente las resoluciones estándar en la Web son la de 800 x 600 píxeles o 1024 x 768 píxeles, hecho al que ha contribuido la generalización de monitores de 17 e incluso 19 pulgadas en los equipos nuevos. Con los monitores de 15 pulgadas, el estándar en la Web era de 800 x 600 píxeles. Por tanto, te recomendamos que crees tu sitio Web con una resolución de 1024 x 768, por lo que antes de ejecutar el programa es conveniente que ajustes tu escritorio a dicha resolución.

Cuidado con el “tamaño” de las páginas

Es realmente frustrante, cuando visitamos una Web, tener que esperar “mucho” tiempo para que la página sea completamente mostrada en pantalla. Las páginas compuestas de texto, gráficos y elementos multimedia generan una impresión agradable; sin embargo son más lentas para mostrarse al visitante. Debes prestar especial atención al tamaño y “peso” de las imágenes, por tanto, tendrás que utilizar casi obligatoriamente un programa de edición de imágenes. Te recomendamos Photofiltre en Windows (muy sencillito, ideal para que nuestros alumnos de Primaria lo utilicen) o el potente software libre Gimp (tanto en Windows como Linux).

Atención a la navegabilidad de las páginas

Un factor importante es la forma de presentar la información. Hay que tener en cuenta que a medida que la cantidad de páginas de una Web aumenta, es cada vez más difícil para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la información es organizarla en áreas definidas, permitiendo así que la navegación sea muy intuitiva. Si las visitas necesitan emplear mucho tiempo para encontrar la página buscada, es casi seguro que no van a regresar posteriormente. Por tanto, tendrás que diseñar botones y menús de navegación que faciliten el acceso a las páginas de tu sitio.

Atención al diseño de la Web

Debes considerar la paleta o combinación de colores que quieras usar, el tipo o tipos de fuentes a utilizar (no abuses de su variedad, no todos los equipos con las que los visitantes navegan por tu Web dispondrán de ellas), coloca elementos de navegación tales como una barra de navegación con botones o cualquier enlace de texto a otras páginas, realiza titulares, logos identificativos, prepara las ilustraciones y otros tipos de material gráfico, diseña textos de todos los tipos, recuerda poner los avisos sobre propiedad o copyright…

Crea tu primer sitio Web

Como paso previo antes de la utilización de Kompozer debes tomar algunas decisiones sobre lo que será tu primer sitio Web. Tendrás que organizar el posible contenido en un sistema de archivos de forma ordenada.

Si tu sitio va a contener un pequeño número de páginas y pocas imágenes, puedes almacenar todos los archivos en una única carpeta o único directorio sobre el que construirás la Web: por ejemplo, te recomendamos crees en tu directorio personal una carpeta que se llame webcurso, que será la que te permita incluir en ella todos los archivos que vas a utilizar en la realización de este curso online.

Ahora bien, lo habitual es que tu sitio Web sea algo más complejo y que vaya creciendo en un futuro, por lo que es mucho más recomendable crear una estructura de subcarpetas o subdirectorios para poder localizar una página en concreto y para que todos los archivos que utilices (seguramente una lista muy numerosa) estén perfectamente clasificados y organizados. Establecer esta estructura lógica de directorios (denominada también mapeado del sitio Web) es esencial para la planificación de una Web que pretenda crecer en el futuro. Llega a ser incluso más importante que comenzar a añadir enlaces e imágenes a tus páginas porque te ayudará a especificar el camino correcto para cada fichero que se referencia en las páginas.

Aunque esta estructura es muy personal y va a depender del tipo de sitio que diseñes y de sus intenciones te recomendamos una esencial:

  • Crea la carpeta webcurso en tu directorio personal
  • Crea subcarpetas en su interior llamadas: imagenes (las fotos, dibujos, etc. se incluirán aquí), multimedia (para alojar en ella audio, sonidos, música, gifs animados, vídeos…), archivos (utilízala para incluir en ella documentos en formato PDF, DOC, ODT… que mostrarás en tu sitio).
  • Y si tu sitio contiene múltiples páginas tendrás que crear subcarpetas específicas para ellas.

Te ayudará mucho dibujar con lápiz y papel esta estructura y establecer los nombres de los directorios y subdirectorios de manera que sean cortos y descriptivos.

Módulo 2 - Manual Kompozer: Conceptos básicos - Formato PDF
Archivo para editar con OpenOffice: formato ODT