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

				


Imágenes para tu blog, tu sitio Web… ¡por supuesto, libres!

4 05 2009

Siguiendo con el Manual de Kompozer, no puede faltar un artículo de esta naturaleza porque, no cabe duda, una página Web no es sólo texto. La Web está compuesta de mucho más que simple/únicamente texto. Los sitios Web de hoy en día se diseñan para ser gráficos. Por tanto, conocer como Kompozer añade imágenes a las páginas Web que estás creando / editando es básico.

Por supuesto, las indicaciones que aquí te ofrecemos, y nuestra selección de enlaces, te sirven exactamente igual si, en lugar de diseñar una Web, eres el responsable de un blog: la imagen, como apoyo al texto de tus artículos, ocupará también un sitio privilegiado.

En este módulo tenemos irremediablemente que acercarnos a conceptos referidos a la imagen digital y aunque, no es propio de este curso indicarte cómo editar imágenes para su utilización en las páginas que crees, si te señalaremos algunas cuestiones básicas que debes considerar:

  • El formato de las imágenes. Existen múltiples formatos de imagen siendo los más utilizados en Internet, por su optimización y menor peso, los formatos gif (para dibujos, cliparts, ilustraciones…), jpg (para fotografías) y el libre png (nuestro favorito), por ser precisamente libre.
  • Su ubicación en la página. Para colocar adecuadamente objetos en la página, ya sean imágenes, elementos multimedia y texto, es necesario que utilices tablas (de modo similar a como lo harías en un procesador de textos). Más adelante te indicaremos cómo usarlas.
  • Su alojamiento en el sitio. Al crear la estructura de carpetas de tu sitio Web has creado una llamada imagenes en la que guardarás todas las imágenes que vas a utilizar en el sitio. Guarda previamente en esta carpeta las imágenes que deseas usar, para evitar errores y problemas en el futuro.

Si, además, eres capaz de utilizar programas de diseño para crear imágenes e ilustraciones estéticamente bellas y originales, no cabe duda que tu sitio Web incluirá páginas impactantes, que llamarán la atención irremediablemente de tus visitantes lo que incrementará notablemente su fidelidad al sitio y el número de visitas.

Obtener imágenes en Internet que puedas utilizar libremente, sin restricciones

Aunque estés realizando un sitio educativo, no comercial, debes ser cuidadoso con la utilización de imágenes que localices en Internet, descargues a tu equipo, modifiques / edites, y finalmente añadas a tu página. El hecho de que se encuentren en Internet no significa que puedas hacer con ellas lo que quieras: derechos de autor aparte, las imágenes tienen propietarios que pueden no permitirte usarlas ¡y, en la mayoría de los casos, te pueden permitir su uso pero no, desde luego, su edición de ningún tipo!. Te recomiendo que acudas, por tanto, a páginas que te ofrecen imágenes que puedas usar bajo ciertas condiciones o libremente y que no utilices un buscador de Internet “a lo loco” como es el caso de Google.

Sin entrar en mucho detalle te indicamos algunas puntualizaciones:

  • Utiliza preferentemente imágenes de dominio público, es decir, imágenes completamente libres, sin derechos de autor, que podrás utilizar sin restricción: editarlas a tu gusto, compartirlas con otros usuarios, etc. Es cierto, que no hay muchos sitios que te las ofrezcan pero “haberlos, haylos“. Por ejemplo, Wikipedia, Wikimedia Commons… y todos sus webs asociadas son sitios que distribuyen contenido multimedia (imágenes, vídeos, audios…) bajo licencias GNU. Las licencias GNU/GPL establecen que su uso es libre: podrás editarlas a tu antojo y lo mejor es que se distribuyen las obras derivadas, es decir, las obras que se hayan editado a partir de las originales o iniciales, obligatoriamente bajo este mismo tipo de licencia. Las imágenes de dominio público, que puedes localizar en el propio buscador Google, por ejemplo, también pueden ser utilizadas sin ninguna restricción. Introduce en este caso los términos imágenes dominio público o public domain images (inglés). Además existen una gran variedad de sitios especializados en este tipo de imágenes: es el caso de Public Domain Photos. Esta debe ser tu primera opción.

The GNU General Public License The GNU General Public License: Ver (inglés) Traducción (español)

  • Utiliza las imágenes que te ofrecen sitios web educativos especializados en el alojamiento de imágenes para uso educativo. Claros ejemplos, son el Banco de imágenes de Isftic (de uso libre para nuestros trabajos educativos) o la Mediateca EducaMadrid de la Consejería de Educación de la comunidad madrileña. Existen también sitios internacionales con este mismo propósito: el Banque nationale de photos en SVT o Classroom Clipart.
  • Visita aquellos sitios que te ofrecen imágenes bajo licencias Creative Commons. Es un tipo especial de licencia que ofrecen muchos sitios Web en los que podrás usar las imágenes bajo ciertas condiciones, algunas, por cierto, no muy restrictivas: por ejemplo, usarlas citando su autor, editarlas y distribuirlas bajo la misma licencia, etc. Te ofrecemos una lista de sitios Web en las que podrás localizar este tipo de imágenes: pero recuerda siempre leer su licencia Creative Commons correspondiente para saber qué puedes hacer con cada imagen, no vayas a meter la pata tecnológica. El sitio web Flickr es un excelente alojador de imágenes que contiene archivos de este tipo, pero no es el único.

Creative Commons España Creative Commons España: diferentes tipos de licencias CC

Selección de enlaces

1ª opción: Imágenes de dominio público o bajo licencias GNU/GPL

Wikipedia Acceso general http://www.wikipedia.org/ Wikipedia, la enciclopedia libre

Wikipedia http://en.wikipedia.org/wiki/Main_Page

Wikipedia en español http://es.wikipedia.org/wiki/Wikipedia:Portada

Wikimedia Commons http://commons.wikimedia.org/wiki/Portada

Wikisource http://en.wikisource.org/wiki/Main_Page

Wikispecies http://species.wikimedia.org/wiki/Main_Page

Wikiversity http://en.wikiversity.org/wiki/Wikiversity:Main_Page

WP Clipart http://www.wpclipart.com/ WP Clipart

Clker http://www.clker.com/

PDClipart.org http://www.pdclipart.org/

Nicu’s Clipart collection http://clipart.nicubunu.ro/

Public Domain Photos http://www.public-domain-photos.com/

Public Domain Cliparts http://www.public-domain-photos.com/free-cliparts/

Photos8 http://www.photos8.com/

Public Domain Image http://www.public-domain-image.com/

Public Domain Pictures.net http://www.publicdomainpictures.net/

Free Stock Photos http://www.freephotos.lu/ Photos8

Republic Domain http://www.republicdomain.com/

Public-photos net http://public-photo.net/

Easy Stock Photos http://www.easystockphotos.com/

Gimp Savvy http://gimp-savvy.com/PHOTO-ARCHIVE/

Open Clip Art Library http://www.openclipart.org/

PD Photo http://pdphoto.org/

Public Domain Stock Photo http://www.logodesignweb.com/stockphoto/

Images in the Public Domain http://srufaculty.sru.edu/david.dailey/public/public_domain.htm

FreePhotos.se http://www.freephotos.se/

Public Domain Pagan Clipart http://www.angelfire.com/pa2/sacredspiral/

Public Domain Footage http://www.publicdomainfootage.com/

Finally Creative http://finallycreative.com/gallery/

Photos gratuites http://www.gratuites-photos.com/

PDDepot http://pddepot.com/

Jampot http://www.jampot.eu/public_domain_gen.php

PicFindr (buscador de imágenes, no todos los resultados son de dominio público, la mayoría, algunas bajo licencias Creative Commons) http://www.picfindr.com/

Puedes utilizar sin restricciones las imágenes alojadas en estos sitios: copiarlas, editarlas, modificarlas, distribuirlas a tus alumnos, compartirlas con otros maestros de tu centro, utilizarlas en tus clases, distribuirlas en CD-Rom y, por supuesto, añadirlas en tu blog, página web o presentación multimedia que distribuyas en Internet. ¡Son completamente libres!

2ª opción: Imágenes de sitios educativos

ISFTIC, Banco de imágenes - anterior Banco de imágenes CNICE http://bancoimagenes.isftic.mepsyd.es/

Mediateca EducaMadrid http://mediateca.educa.madrid.org/

Banco de imágenes de Extremadura http://imaginacion.nccextremadura.org/banco/

CalPhotos http://calphotos.berkeley.edu/

Pics4Learning.com http://pics.tech4learning.com/

3ª opción: Imágenes bajo licencias Creative Commons

Flickr: Creative Commons http://www.flickr.com/creativecommons

FlickrCC http://flickrcc.bluemountains.net/

Openphoto.net http://o2.openphoto.net/

Stock.xchng http://www.sxc.hu/

Puedes colgarlas en tus trabajos en Internet: diseño Web, presentaciones… siempre y cuando incluyas, en la mayoría de los casos, el nombre del autor o referencies el sitio Web desde el que lo has descargado. Tienes que leer las condiciones específicas de la licencia de autor de cada imagen que vayas a utilizar.

Como ya te indicamos en varias ocasiones a lo largo de este artículo tu primera opción debe pasar por las imágenes bajo licencias GNU/GPL. Sólo la enciclopedia libre Wikipedia y su sitio multimedia asociado Wikimedia Commons incluyen ¡miles de imagenes 100% libres! ¡Raro será que no encuentres la que necesites!



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