Etosha, una plantilla de Joomla 1.5 interesante y fácil de adaptar a nuestra página.

13 07 2009

A la hora de darle forma a nuestra página surgen infinidad de posibilidades, tantas como plantillas.

Una de ellas es ésta que originalmente tiene como tema el parque nacional del mismo nombre, en Namibia, y que reúne algunas particularidades:

  • Es algo diferente a la mayoría porque su logo superior de 1200×200 píxeles puede cambiarse cada vez que el usuario o visitante haga clic en un enlace.
  • También podemos colocar el nombre que nos interese en la margen superior izquierdo de manera que siempre permanece en ese mismo sitio aunque vayamos moviéndonos por la página verticalmente.
  • Tiene los módulos más habituales y se adapta a las diferentes pantallas.
  • Su licencia es GNU/GPL, completamente libre, la cual la hace susceptible de ser copiada y editada a tu gusto sin problemas de derechos de autor.

free templates JoomlaPara empezar puedes descargarla desde este enlace: http://www.joomla24.com/Joomla_1.5.x_Downloads/Joomla_1.5_Templates/Etosha.html

El resultado será que dispones de un archivo zip en tu equipo llamado etosha_101 que no necesitarás descomprimir, porque Joomla lo hará por ti.

Una vez descargada se instala por el procedimiento normal, es decir, entra en tu sitio Web como administrador (http://localhost/portal/administrator y teclea tus credenciales de acceso). Ahora acude al menú Extensiones - Instalar/Desinstalar:

 Joomla 1.5: instalar una nueva plantilla

En la pestaña “Instalar”, pulsa en el botón “Examinar” y busca el archivo etosha_101.zip, selecciónalo, y Joomla lo “subirá” a tu espacio web y realizará la instalación automática de la nueva plantilla.

Ya  instalada, puedes ver su estructura. Para ello vete a Extensiones - Gestor de plantillas.

Joomla 1.5: instalar una nueva plantilla

Elige la que te interesa haciendo clic sobre ella: en este caso, sobre el nombre Etosha.

Joomla 1.5: instalar una nueva plantilla

Se abre una pantalla con las características más destacadas de esta plantilla.

En nuestro caso, tras varias pruebas y cambios para experimentar algo, los parámetros que mejor se adaptan a nuestras preferencias son los que se recogen de forma predeterminada en la plantilla, pero puedes variar estos parámetros a tu antojo (juega con ellos, haciendo cambios, pulsando en el botón Aplicar y haciendo clic en el botón Previsualizar para comprobar el resultado final).

Joomla 1.5: instalar una nueva plantilla

Al pulsar en el enlace Previsualizar que se localiza en la parte superior de la pantalla, se abre la imagen que sigue y que corresponde a la página con la plantilla ya aplicada:

Joomla 1.5: instalar una nueva plantilla

En ella se puede apreciar la foto que ocupa toda la banda superior (1200×200) y que irá cambiando tantas veces como queramos al hacer clic en algún enlace. Al mismo tiempo también se puede ver el nombre al que aludí al principio en la banda lateral superior izquierda. Ese nombre aparece siempre visible en esa posición aunque realices scroll con el ratón por la página.

¿Cómo modificar los logos superior y lateral?

Una de las modificaciones más simples que puedes realizar en una plantilla es modificar las imágenes de la cabecera y, en esta plantilla en concreto, no resulta difícil hacerlo. Paso a paso te mostramos cómo.

Primero explora los archivos de la plantilla. Para ello extrae su contenido en un directorio y localiza los archivos existentes en la carpeta header. Originalmente aparecen tres imágenes y un archivo php

Joomla 1.5: editar una plantilla instalada

Las imágenes se llaman

  • header_01.jpg,
  • header_02.jpg y
  • header_03.jpg
  • El archivo php se llama settings.php

Estos son los archivos con los que tendrás que trabajar.

Paso 1. Preparar las imágenes

Primero debes preparar las imágenes que quieras que vayan apareciendo cuando se haga clic en algún enlace con tu editor de imágenes preferido (tienes tutoriales en este mismo blog para trabajar con Photofiltre - programa gratuito o con Gimp - programa libre, open source). Todas deben tener un tamaño de 1200×200 píxeles. Hemos probado hasta con 15 imágenes. Debes nombrarlas header_01.jpg, header_02.jpg… y así sucesivamente. Las tres primeras sustituirán a las que ya existen en la carpeta original (sobreescribe las imágenes); las demás añádelas en la carpeta.

Paso 2. Modificar el archivo settings.php

Si no haces nada más, sólo se verán las 01, 02 y 03, eso sí, con los rótulos originales, no con los que nos podrían interesar y al hacer clic sobre ellas el visitante de tu página acudirá a la página original del autor. Pero si modificas el archivo settings.php con un editor html, por ejemplo, el propio bloc de notas de Windows harás que funcionen todas las imágenes que quieras y con el comportamiento que desees.

Manos a la obra: abre settings.php con el Bloc de notas. Para ello utiliza la opción Abrir del botón derecho del ratón sobre settings.php y selecciona en el listado correspondiente Bloc de notas.Visualizarás el código php del archivo:

Joomla 1.5: editar una plantilla instalada

Si quieres tener, por ejemplo, 5 imágenes, copia cualquier grupo de 4 líneas y pégalo  a continuación de los que hay, en este caso, dos veces, siempre antes del código final ?>. Ahora aparecerán 5 grupos de 4 líneas. Lógicamente aún debes cambiar algunos parámetros.

Sólo deja sin tocar la primera línea de cada grupo, la que corresponde al nombre del archivo imagen: img = “header_01.jpg”; (lógicamente, modifica header_04.jpg, header_05.jpg… si has añadido nuevas imágenes en la carpeta). Las segundas líneas de cada grupo se cambian por la frase que quieras que aparezca en la parte inferior derecha de cada imagen. Las terceras y cuartas líneas de cada grupo se refieren a la dirección a la que quieras enlazar la imagen. Si no se quiere poner un enlace basta con borrar todo lo que hay entre las comillas en cada línea, pero, atención, no borres las comillas. Muy importante es acordarse de poner el número correspondiente al grupo de cada imagen: (4), (5)… aparecen siempre detrás de header entre paréntesis y llevan el mismo número que el de la imagen que quieras que aparezca.

Después de hacer los cambios que te parezca oportunos, guarda el archivo settings.php mediante la opción del menú Archivo - Guardar.

Para que en tu sitio Web Joomla se aprecien los cambios debes enviar los archivos por ftp a la carpeta /portal/templates/etosha/header” y sobreescribir los que originalmente están en ella. En el servidor local es muy simple: copia - pega el contenido de la carpeta header en la ruta xampp/htdocs/portal/templates/etosha/header.

Por lo que respecta al nombre que aparece en vertical, basta abrir con cualquier editor de imágenes, la imagen “Etosha/images/logo.png” y editar la imagen según las preferencias deseadas. Por ejemplo, borra la dirección y sustituye por la frase o nombre que quieras que aparezca. Guarda y sube el archivo de nuevo a la carpeta images sobreescribiendo el archivo logo.png original que había allí.

Joomla 1.5: editar una plantilla instalada

Paso 3. Convertir Etosha como plantilla predeterminada de tu sitio Web

Todo listo: ahora acude a la administración de Joomla y en concreto a “Extensiones - Gestor de plantillas”. En el listado de plantillas instaladas marca la opción de validación de Etosha y pulsa, a continuación, en el icono en forma de estrella amarilla, predeterminada. Prueba los cambios y el nuevo aspecto de tu sitio abriendo la página con tu navegador preferido (actualiza con la tecla F5 si fuese necesario).

Si no te gusta el resultado, sólo tienes que volver a elegir otra de las plantillas del Gestor, marcarla como predeterminada y seguir con ella como si nada hubiera pasado.

Por supuesto, falta decir que si te gusta la nueva plantilla etosha aún quedarán por adaptar la ubicación de los módulos que ya tenías en Joomla a esta nueva plantilla para que siga funcionando todo como hasta ahora.

Mi agradecimiento a Constantino García León, reciente colaborador de este blog y autor de este artículo, al que aprovecho para darle la bienvenida, por este magnífico post que muestra cómo la edición de plantillas en Joomla 1.5 puede ser un procedimiento relativamente sencillo incluso para usuarios no experimentados.


Curso online de Joomla 1.5: lo primero… instalar un buen editor

12 07 2009

En un artículo anterior de “Con el ordenador a cuestas” ya te hemos indicado que, aunque Joomla trae “de serie” un editor integrado TinyMCE, resulta muy conveniente instalar un editor aún mejor que te permita trabajar con tablas, imágenes o archivos multimedia sin problemas. De ahí que te hayamos recomendado instalar el editor JCE.

Curso online de Joomla: instala el editor JCE: Con el ordenador a cuestas

No es nuestra intención cansarte repitiendo el artículo pero dado que en el mismo se trata por encima su instalación en la versión 1.5, la que ahora suponemos estás usando, te mostramos de manera gráfica y resumida cómo actuar para instalar JCE 1.5.4 en tu sitio Web en esta última versión de Joomla: si quieres explicaciones más detalladas acude a la lectura de este antiguo artículo, mucho más completo que el actual.

1. Localiza los archivos necesarios.

El editor JCE se distribuye bajo licencia GPL, por tanto, es gratuito y libre. Podrás descargarlo directamente desde su sitio web oficial:

JCE - A content editor for Joomla - http://www.joomlacontenteditor.net/

En concreto, descarga los archivos:

Una vez que tengas los tres archivos salvados en tu equipo procede de la siguiente manera:

2. Instala el componente.

Instalar componentes en Joomla es muy sencillo. Tienes una entrada en el menú Extensiones - Instalar / Desinstalar. Todo lo que quieras instalar en Joomla lo realizarás desde aquí. Utiliza el botón Examinar para localizar el archivo com_jce… zip en tu equipo y pulsa el botón Subir archivo & Instalar para que Joomla lo instale. Asegúrate siempre que tras la instalación el componente se encuentra correctamente publicado: para ello vete al Gestor de plugins y verifica que tiene una marca verde a su derecha.

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

3. Instala el plugin de utilidades:

Hazlo utilizando idéntico procedimiento al anterior desde el menú Extensiones - Instalar / Desinstalar pero ahora utilizando el archivo plg_jceutilities….zip. Debes publicarlo en el Gestor de plugins, por defecto no lo estará, haciendo clic sobre el icono rojo con un aspa en su interior para que su estado pase a verde (publicado).

JCE - Instala un nuevo editor en Joomla

4. Instala el paquete de idioma desde el Panel de control del componente:

Tras la instalación del plugin aparecerá una nueva entrada en el menú Componentes, llamada JCE Administration. Haz clic sobre Control Panel para acceder al panel de control del plugin. Selecciona el icono Instalar e instala el pack de idioma español desde la nueva ventana que se abre en Joomla. Ahora JCE habla español: cuando pases el cursor del ratón por encima de sus iconos te explicará su función en español.

JCE - Instala un nuevo editor en Joomla

 

JCE - Instala un nuevo editor en Joomla

5. Configura JCE como editor predeterminado:

Si no configuras JCE como editor predeterminado para tu usuario seguirás usando el anterior TinyMCE que venía por defecto con Joomla. Y hacer esto es muy fácil, acude en el panel de control de Joomla al Gestor de usuarios, haz clic sobre el usuario Administrador (el tuyo, claro) y selecciona como editor JCE 1.5.4. Aplica y guarda los cambios ¡Así de sencillo!

JCE - Instala un nuevo editor en Joomla

Ahora ya puedes utilizar este editor en los contenidos que vayas a crear para tu sitio. Comprueba su aspecto acudiendo al Panel de control de Joomla y seleccionando Añadir un nuevo artículo.

JCE - Instala un nuevo editor en Joomla



Curso online de Joomla: Instala la última versión 1.5.12

11 07 2009

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 última opción ha sido tratada profusamente en este blog y ya te hemos indicado diversas opciones para instalar un servidor local en tu equipo:

Tanto si utilizas un servidor local como un hosting remoto, el procedimiento de instalación será el mismo. Te recomendamos además que, aunque dispongas de una versión en remoto, siempre tengas una versión de testeo en un servidor local en tu equipo: resulta muy útil para comprobar los cambios que vayas realizando y sobre todo, 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.

En este artículo instalaremos Joomla 1.5.12, la última versión disponible, en un servidor local con Xampp. Si has seguido nuestras indicaciones previas tendrás una carpeta en tu ordenador con todos los archivos que xampp “volcó” a tu equipo en la instalación de la aplicación. Y, en concreto, dispondrás de la carpeta htdocs, la carpeta específica que Xampp destina a la publicación en Apache. En esta carpeta htdocs deberás crear una nueva carpeta, llámala por ejemplo portal o joomla, en la que tendrás que copiar la estructura completa de archivos y carpetas de Joomla para iniciar la instalación de este popular CMS.

estructura de archivos y carpetas

Pero, no te atragantes aún, vamos paso a paso y todo será mucho más fácil. Por supuesto, doy por hecho que ya has instalado Xampp en tu ordenador y que dispones de la carpeta asociada a este servidor local (la de la captura de pantalla anterior) en tu ordenador.


PASO 1. Joomla necesita un usuario y una base de datos para funcionar

Una vez instalado el servidor con XAMPP tendrás que crear un usuario y la base de datos que necesita Joomla para acometer después su instalación: ambos son requisitos imprescindibles para poder instalar Joomla.

Para ello, inicia el servidor XAMPP (en Windows tienes un archivo en la carpeta xampp llamado xampp-control que te permitirá iniciar y detener los diferentes servicios .

 arranque y parada del servidor local

Para acceder a Xampp sólo tienes que teclear su dirección URL en tu navegador favorito (por supuesto, Firefox!):

http://localhost

La pantalla inicial de Xampp aparecerá en tu monitor. Elige la opción del idioma español para comenzar a utilizar todas sus funcionalidades.

un servidor web local

Para crear un nuevo usuario y una nueva base de datos para Joomla, Xampp te ofrece la herramienta phpMyAdmin. Tienes varias maneras de ejecutarla:

  • Teclear en el campo dirección URL

http://localhost/phpmyadmin

  • o bien

http://127.0.0.1/phpmyadmin

  • o desde la página inicial de XAMPP http://localhost/hacer clic en el enlace PHPMyAdmin.

acceso a la herramienta PhpMyAdmin

En su parte inferior te avisa de que el usuario root no tiene contraseña (Windows) y, por tanto, supone una vulnerabilidad en la seguridad del sistema. Pero como vas a realizar una instalación en local, esto no supone ningún riesgo, así que no hagas ningún cambio al respecto.

Crea un nuevo usuario para Joomla

Para ello haz clic en el enlace Privilegios

crear un nuevo usuario

y, a continuación, sobre Agregar un nuevo usuario, que localizarás a mitad de pantalla.

crear un nuevo usuario

En la nueva pantalla rellena los siguientes datos:

  • Nombre de usuario: Deja la opción por defecto Use el campo de texto y decide tu mismo el nombre de usuario, en mi caso he escogido el término joomla (para qué complicarnos, no?).
  • Servidor: selecciona de la lista Local y observa que el término que aparece en el cuadro de texto es localhost.
  • Contraseña: Deja la opción por defecto Use el campo de texto y teclea una contraseña para el usuario que estás creando, en este caso hemos tecleado la misma palabra joomla para no olvidarnos de ella. ¡No la olvides!
  • Debe volver a escribir: sencillo…, repite la contraseña de nuevo, tecleándola exactamente igual, para que el sistema la registre.

Ahora debes asignar privilegios globales a este usuario. Para ello, haz clic en Marcar todos/as o bien valida todos los campos de las listas Datos, Estructura y Administración.

 crear un nuevo usuario

Ya sólo queda crear el usuario finalmente haciendo clic sobre el botón Continuar. Una nueva pantalla te indicará que el nuevo usuario ha sido agregado.

Crea la base de datos para dicho usuario

Una vez que has creado el nuevo usuario para Joomla debes crear la base de datos asociada a dicho usuario. En la pantalla anterior haz clic sobre el enlace Servidor: localhost que hallarás en la parte superior de la página, para volver a la página inicial de PHPMyAdmin.

Para crear la base de datos tendrás que darle un nombre. Escríbelo en el cuadro de texto Crear nueva base de datos: por ejemplo, joomla (¡no me exprimo mucho la cabeza qué digamos!) y despliega la lista que aparece a la derecha de Cotejamiento para localizar utf8_general_ci.

crear una nueva base de datos

Aclaración sobre el cuadro de lista Cotejamiento:

  • utf8_general_ci. No reconoce la letra ñ ni las letras acentuadas al realizar ordenaciones o búsquedas. Sin embargo, es una de las opciones más rápidas.
  • utf8_spanish_ci. Corresponde al idioma español moderno, en el que sí se reconoce la ñ, pero no la ch ni la ll.
  • utf_spanish2_ci: Corresponde al idioma español tradicional, que reconoce correctamente la ñ, la ch y la ll.
  • Debes elegir un “Cotejamiento de las conexiones MySQL, apropiado para la versión de Joomla que vayas a utilizar:
    • En el caso de bases de datos que vayan a trabajan con Joomla 1.0.x se recomienda la codificación latin1_general_ci.
    • En el caso de bases de datos que vayan a trabajar con Joomla 1.5 se recomienda la codificación utf8_general_ci.

Cuando finalices haz clic sobre Crear. ¡Listo! Sal de phpMyAdmin utilizando el botón Salir.

Ya dispones de los requisitos previos necesarios para acometer la instalación de Joomla. Observa que XAMPP dispone ya de la nueva base de datos joomla creada:

crear una nueva base de datos

Lógicamente, si haces clic sobre ella y compruebas su contenido verás que es una base de datos vacía, sin tablas en ella, a la espera de que realices la nueva instalación:

crear una nueva base de datos

¡Pero, antes deberás obtener la última versión de Joomla disponible y lo más seguro es que acudas a sus repositorios oficiales en Internet!.


 

PASO 2. Descarga la última versión: Joomla 1.5.12

Generalmente Joomla se distribuye como un archivo comprimido, también denominado paquete, en cuyo interior se encuentra todo lo necesario para instalar y hacer funcionar este CMS. El sitio oficial para obtenerlo es

http://www.joomla.org

pero la versión a descargar desde este sitio será en inglés.

JoomlaSpanish es una organización de usuarios tremendamente activa, ya muy consolidada y reconocida como organización colaboradora de Joomla, que ofrece la última versión de Joomla ya traducida al idioma español en un paquete propio denominado JoomlaSpanish, por lo cual es un sitio de confianza del que puedes descargar Joomla de manera gratuita y sin registro alguno, ¡y completamente traducido al español! Así pues, conéctate al sitio web reconocido oficialmente en español dedicado a Joomla para descargar la última versión disponible

http://www.joomlaspanish.org

Localiza en la página inicial el bloque Packs disponibles en Joomla! Spanish y haz clic sobre Pack Joomla-1.5.12-spanish.zip (windows) o Pack Joomla-1.5.12-spanish.tar.gz (linux y ubuntu).

Dependiendo del navegador que utilices y de su configuración, es posible que aparezca un cuadro de diálogo preguntándote qué deseas hacer con el archivo, o que se descargue automáticamente. En el primer caso, indica que deseas guardarlo y fíjate en que carpeta se almacena. El segundo caso es propio de algunas versiones de Firefox, que, si no has realizado cambios en su configuración, almacenan los archivos descargados en el propio escritorio (si ejecutas Herramientas - Descargas podrás consultar el historia de descargar y averiguar en la que se ha almacenado el paquete de Joomla descargado).

Si utilizas Internet Explorer es muy probable que aparezca una advertencia de seguridad antes de descargar un archivo. Verás una franja amarilla en la parte superior de la página. Haz clic con el botón derecho del ratón sobre ella y se desplegará un menú contextual en el que podrás indicar que confías en la fuente y que efectivamente deseas descargar el archivo. Procede, pues, de la siguiente forma:

  • EN UN SISTEMA WINDOWS COMO WXP. Guarda el fichero en tu equipo y, una vez finalizada su descarga, extrae el contenido del archivo zip a una carpeta (utiliza 7-Zip, por ejemplo, como programa alternativo de compresión y descompresión de archivos: libre y gratuito). Se creará una estructura de carpetas y archivos que será la que compondrá nuestro sitio Web posteriormente en el servidor (puedes borrar después el archivo zip descargado si lo deseas, porque ya no lo necesitarás).
  • EN EL CASO DE UBUNTU, simplemente guarda el archivo tar.gz. No necesitarás hacer nada más, por ahora. Tendrás que utilizar la consola para descomprimirlo y volcar sus archivos al servidor local. Te mostramos en el siguiente paso cómo hacerlo.

PASO 3. Envía Joomla al servidor local

En Windows

Para poder iniciar la instalación de Joomla tendrás que enviar a la carpeta raíz del
servidor los archivos (manteniendo su correspondiente estructura de carpetas) en los que se descomprime el paquete que has descargado en el paso anterior. En el caso del servidor local en Windows tendrás que descomprimir previamente el paquete de Windows  y después deberás arrastrar - copiar / pegar los archivos / carpetas descomprimidos (todos y tal cual están) a la carpeta raíz de tu web.

Como dispones de un servidor local la carpeta raíz de tu sitio será xampp/htdocs pero como esta carpeta contiene archivos propios de XAMPP, es muy aconsejable que crees una subcarpeta dentro de ella (llamada portal, por ejemplo) y que copies los archivos dentro de ella. De este modo, la URL de tu sitio será http://localhost/portal

En Ubuntu

Tendrás que utilizar la consola o terminal para descomprimir los archivos y enviarlos a la carpeta raíz de tu sitio. Es la misma que en Windows, por tanto: lampp/htdocs
Acredítate como administrador mediante el comando

sudo -s

Teclea la contraseña de administrador que te acredita como tal.

En la consola utiliza los siguientes comandos:

Para crear el subdirectorio dentro de htdocs destinado al volcado de archivos de Joomla

mkdir /opt/lampp/htdocs/portal

Para copiar la estructura de archivos y carpetas en este subdirectorio teclea el siguiente comando

tar xvfz joomla_1.5.8-Spanish-pack_completo.tar.gz -C /opt/lampp/htdocs/portal


PASO 4. Instala Joomla 1.5.12 (¡Por fin!)

Cuando la copia de archivos y carpetas haya finalizado, accede a la dirección de Joomla que corresponda para comenzar la instalación. Por ejemplo si has seguido nuestras  indicaciones desde el principio será http://localhost/portal
Tanto si utilizas Windows como Ubuntu el proceso de instalación es exactamente el mismo en ambos sistemas: la única diferencia será el arranque del servidor.

Pero ya conoces cómo hacerlo:

  • En Windows: Arranca el servidor XAMPP realizando doble clic sobre el archivo xampp_start.exe. Abre tu navegador y teclea en el campo dirección URL http://localhost/portal. Verás la primera pantalla de la rutina de instalación de la nueva versión de Joomla.
  • En Ubuntu, utiliza la consola o terminal y como administrador teclea el comando sudo /opt/lampp/lampp start. Abre tu navegador y teclea el campo dirección URL http://localhost/portal. Verás igualmente la primera pantalla de la rutina de instalación de la nueva versión de Joomla.

La instalación de Joomla es relativamente sencilla y en sólo 7 pasos de un asistente (apenas un par de minutos) estará lista. Te ofrecemos explicación detallada de cada uno de los pasos, pero prácticamente será un clic en el botón Siguiente excepto en los pasos 4 y 6, algo más delicados.

Paso 1. Idioma

El primer paso de la instalación es elegir el idioma. De forma predeterminada aparecerá seleccionado el idioma que corresponde al lenguaje configurado en tu navegador. Joomla, por tanto, te saludará en español. Haz clic en Siguiente para continuar.

Joomla 1.5: asistente de instalación

Paso 2. Comprobación previa

Este segundo paso es muy importante pues en él se evaluarán las características de tu servidor para averiguar si será capaz o no de ejecutar Joomla. Esta página está dividida en dos zonas: la superior recoge el resultado de las comprobaciones que son esenciales mientras que las que aparecen en la parte inferior son sólo recomendaciones no imperativas. Si alguna de las comprobaciones de la zona superior aparece en rojo no es aconsejable continuar con la instalación, salvo que el requisito único que falle es que el archivo configuration.php no sea “escribible”, error de fácil solución como te indicaremos más adelante. Con respecto a las recomendaciones de la zona inferior, casi todas ellas buscan mejorar la seguridad del sitio, aunque alguna aparezca en rojo que no cunda el pánico; Joomla también funcionará aunque no todo coincida a la perfección. Puede ser que sea más vulnerable a posibles ataques, pero no impedirá que el sitio funcione. En una instalación en local no tendrás problema alguno y podrás saltar este paso casi automáticamente.

Joomla 1.5: asistente de instalación

Ahora bien, en una instalación en remoto quizá alguna opción se muestre en rojo, por ejemplo, si instalas Joomla en el servidor Educastur. Dentro de estos valores recomendados los que suelen causar más problemas son:

  • Modo seguro: la mayoría de los proveedores de alojamiento utilizan servidores compartidos, es decir, alojan los sitios de varios clientes en un mismo servidor. Podría ocurrir que alguno de estos clientes, aprovechando sus privilegios en el servidor, provocase mal intencionadamente algún error o fallo en el sitio de otro cliente. La directiva safe_mode pretendía resolver esto asegurándose de que cada cliente sólo tuviera acceso a sus propias carpetas y archivos. Sin embargo, en las últimas versiones de PHP esta directiva se ha extinguido.
  • Mostrar errores. Si la directiva display_errors está activada, cuando se produzca algún error en la ejecución de un guión - script PHP, se mostrará al usuario un mensaje explicativo de dicho error. El problema es que esto puede ser aprovechado por hackers / crackers para obtener información adicional del sistema. Por ello es esencial que esta directiva esté desactivada en un servidor de producción, es decir, en un sitio web que esté en pleno funcionamiento, pero quizás no lo sea en un servidor de desarrollo, como es el caso de la instalación de Joomla en un servidor local con objetivo de aprendizaje.
  • Registrar globales. Esta directiva surgió como una ayuda para los programadores de PHP, pero pronto se reveló como un foco enorme de problemas de seguridad. Los scripts PHP utilizan las variables definidas dentro de ellos, pero también pueden obtener variables a través de otros medios. La obtención de estas variables externas se realiza de forma automática cuando register_globals está activado, de modo que el script no puede determinar con precisión el origen de una determinada variable… y si hubiera sido inyectada por un usuario malintencionado a través de un formulario no lo discriminaría. Por este motivo es fundamental que la directiva register_globals esté desactivada. Algunos proveedores de hosting siguen manteniéndola. Esta directiva también se ha extinguido en las últimas versiones de PHP.

Si deseas cambiar el valor de alguna de estas directivas, en el caso de un servidor local, podrás hacerlo a través del archivo oculto de configuración de Apache a nivel de carpetas .htaccess o a través del archivo de configuración del motor PHP php.ini. Ambos son archivos de texto que podrás editar con un editor de notas.
También deberás editar ambos archivos si estás realizando la instalación de Joomla en remoto. El primero es un simple archivo de texto que probablemente se encuentre en la carpeta raíz de su sitio web. Las directivas configuradas en él afectan a la carpeta en la que se encuentra y a todas sus subcarpetas, de modo que con un único archivo .htaccess tendrás protegido todo el sitio.

Podrás crearlo en tu ordenador local y subirlo mediante FTP a tu sitio remoto. El archivo php.ini es un simple archivo de texto cuyo efecto es local dentro de la carpeta en la que se encuentra, es decir, no se aplica a las subcarpetas. En el caso de Joomla  deberías crear un archivo php.ini en la carpeta raíz de tu sitio, otro en la carpeta  administrator y, opcionalmente, otro en la propia carpeta installation (esto último servirá para comprobar al hacer clic sobre el botón Volver a comprobar que tu proveedor admite archivos php.ini personalizados).

La sintaxis que utilizan estos archivos es diferente. Te indicamos dos ejemplos de
archivo que te permitirán configurar los valores recomendados por Joomla:

Archivo .htaccess

php_flag register_globals Off

php_flag display_errors Off

Archivo php.ini

register_globals=Off

display_errors=Off

Según la configuración particular de tu proveedor, es posible que tengas que sustituir el valor Off por un 0 (cero).

Haz clic de nuevo en Siguiente para seguir con la instalación.

Paso 3. Licencia

Joomla se distribuye bajo las condiciones de la licencia libre, opensource y de código  abierto, GNU/GPL, cuyas principales características son:

  • El usuario está autorizado a copiar, modificar y redistribuir la aplicación a terceros, incluso cobrando por ello, pero sin menguar en modo alguno los derechos que concede la licencia GPL.
  • Las aplicaciones cubiertas por esta licencia deben distribuirse acompañadas de su código fuente o bien ofrecer la posibilidad al usuario de acceder a él libremente.

Lee las condiciones de la licencia y realiza un nuevo clic en el botón Siguiente.

Joomla 1.5: asistente de instalación

Paso 4. Base de datos

Este cuarto paso es uno de los más delicados porque tendrás que cumplimentar los datos referentes a la configuración de la base de datos que has creado en XAMPP para Joomla: el nombre del servidor, el nombre de usuario, la contraseña o el nombre de la base de datos. Y si no lo haces correctamente, ni siquiera podrás continuar con la instalación. Recuerda que Joomla no se reserva para sí el derecho de utilizar exclusivamente la base de datos, de modo que si sólo dispones de una base de datos (este es el caso del servidor institucional Educastur) podrás compartirla con otras aplicaciones e incluso con otras instalaciones de Joomla.

En nuestro ejemplo de instalación de Joomla en el servidor local tienes que recordar  los datos con los que creaste un usuario y una base de datos con la herramienta PHPMyAdmin:

  • Tipo de base de datos: MySQL.
  • Nombre del servidor: localhost
  • Nombre de usuario: joomla
  • Contraseña: joomla
  • Nombre de la base de datos: joomla

Si configuraste tu usuario y base de datos con otros datos ahora tendrás que utilizarlos. Así pues, rellena cuidadosamente los datos correspondientes a la configuración básica.

Joomla 1.5: asistente de instalación

Haz clic sobre Configuración avanzada en la parte inferior de la página. Aquí puedes decidir si deseas mantener tablas de otras instalaciones previas de Joomla (no es el caso, estás haciendo una instalación completamente nueva en una base de datos todavía vacía). También puedes cambiar el prefijo de la tabla (valor predeterminado, jos_), pero esto sólo te interesará si utilizas varias instalaciones de Joomla en una sola base de datos (en local, no ocurrirá, pues puedes crear tantas bases de datos como necesites, pero en un servidor remoto, tal vez no tengas esa posibilidad; por ejemplo, ya te hemos indicado que Educastur sólo ofrece una única base de datos). Ahora bien, debes saber que esto es un riesgo, ya que muchos complementos de Joomla utilizan este prefijo para sus propias instalaciones y funcionalidades. No lo modifiques a no ser que sea absolutamente necesario.

Joomla 1.5: asistente de instalación

Si has instalado previamente otro Joomla y ahora quieres deshacerte de sus tablas, activa la casilla Eliminar las tablas existentes. Por el contrario, si deseas conservar una copia de las tablas de la instalación previa, activa la casilla Hacer una copia de las tablas existentes. Las tablas viejas se conservarán sustituyendo su prefijo por bak_. Si todo está correcto y el programa de instalación es capaz de establecer la conexión con la base de datos usando los valores especificados, tras hacer clic en Siguiente llegarás al quinto paso. En caso contrario, aparecerá un mensaje de error y tendrás que pulsar el botón Anterior para regresar al paso 4 y revisar de nuevo todos los datos.

Paso 5. Configuración de la capa FTP

Posiblemente la mayor fuente de problemas para los usuarios anteriores de Joomla era la diferenciación de usuarios / privilegios de los sistemas UNIX, que impedía acceder a ciertos archivos / carpetas. Para resolver este problema solía ser necesario cambiar los privilegios individuales de cada uno de estos archivos / carpetas, resultando una labor bastante tediosa. Con el objetivo de resolver esta situación, en la versión 1.5 se ha incluido una capa opcional de gestión de archivos basada en FTP, de modo que cada vez que Joomla necesite acceder a un archivo lo hará mediante el protocolo FTP, en lugar de mediante el protocolo HTTP, que es la opción predeterminada. Esta capa sólo es de utilidad si el servidor en el que está instalado Joomla está basado en UNIX / Linux, no si utiliza Windows, pues en  los sistemas Windows los usuarios y sus privilegios se gestionan de un modo diferente que no causa este tipo de problemas. Al instalar Joomla en un servidor local no necesitarás cambiar nada, déjalo todo como ésta. En consecuencia, deja marcada la opción No y haz clic en Siguiente.

Joomla 1.5: asistente de instalación

Paso 6. Configuración

En este sexto paso tendrás que configurar algunos detalles importantes sobre tu sitio Web como el nombre del sitio, tu dirección de correo electrónico y tu contraseña de administrador, pero también te ofrece la posibilidad de migrar datos desde instalaciones previas de Joomla.

  • Nombre del sitio web. Escribe un título para tu sitio en este cuadro de texto. Este título se utilizará en toda la correspondencia de correo electrónico que genera el sitio; por ejemplo, los mensajes que se envíen automáticamente a los usuarios para que activen sus cuentas una vez registrados, incluirán en su línea de asunto este título. Recuerda también que el nombre del sitio se convertirá automáticamente en el título de la página, aunque podrás modificarlo posteriormente sin problemas tras la instalación. Nosotros le hemos puesto como título Aprendiendo Joomla, pero utiliza el que quieras.
  • Correo electrónico. Escribe aquí la dirección de correo que desees utilizar para la correspondencia generada por tu sitio web. Obviamente debe ser una dirección válida. En esta dirección recibirás todas las incidencias del sistema Joomla, como errores, avisos de nuevos artículos enviados por autores…
  • Contraseña del usuario admin y Confirmar la contraseña del usuario admin. Escribe en ambos cuadros de texto la contraseña que desees utilizar para acceder como administrador al sistema. El nombre predeterminado para el usuario administrador es admin, aunque podrás (y es aconsejable que lo hagas) cambiarlo posteriormente.

Joomla 1.5: asistente de instalación

Llegamos ahora a una opción un poco controvertida. Joomla recomienda instalar datos de ejemplo, pero lejos de ser una ayuda estos datos de ejemplo suelen terminar convirtiéndose en una fuente de confusión. Los datos de ejemplo harán que el sitio no esté vacío, se llene de menús, secciones, categorías y artículos, los elementos fundamentales de Joomla, pero no los necesitarás salvo que quieras analizar cómo están configurados y así aprender de una forma autodidacta a utilizar Joomla. Mi consejo es que no instales estos contenidos de ejemplo así que no pulses el botón correspondiente.

Joomla 1.5: asistente de instalación

Otra opción que podrás encontrar en esta pantalla es la posibilidad de migrar datos
desde instalaciones anteriores de Joomla. Este proceso es muy delicado y requiere ciertos conocimientos del funcionamiento interno de Joomla y de sus tablas, que presumimos que por ahora no tienes, así que no trataremos este asunto. Además, no existe ningún modo sencillo ni fiable de migrar un sitio completo de Joomla 1.0.x a Joomla 1.5.x, por lo que ni siquiera trataremos este aspecto.

Tras hacer clic en Siguiente llegarás al último paso, finalizar. Un mensaje de advertencia te indicará que no has instalado los contenidos de ejemplo, haz clic en Aceptar porque realmente no deseas hacerlo.

Joomla 1.5: asistente de instalación

Paso 7. Finalizar

En este último paso un mensaje de advertencia te indicará la necesidad de borrar la carpeta de instalación del servidor, por motivos de seguridad.

Joomla 1.5: asistente de instalación

Hasta que no borres completamente esta carpeta y todo su contenido no podrás
empezar a utilizar Joomla. En este paso también se te confirma que el nombre
predeterminado del usuario administrador es admin. Borra, por tanto, la carpeta installation de tu servidor local simplemente suprimiéndola de la carpeta portal que se localiza en htdocs.

A continuación, haz clic sobre el botón Portada de la esquina superior derecha para  acceder a la zona pública de tu recién creado sitio web (el botón Administración te conducirá a la zona privada de tu sitio Web, aún no lo uses).

Advertencia en el caso de la instalación de Joomla en LAMPP en Ubuntu. No pude
acceder al sitio Joomla en este momento de la instalación de Joomla porque el sistema me advierte que el archivo configuration.php no escribible. Se soluciona de una manera muy sencilla: Consola o terminal: acredítate como administrador sudo -s y ejecuta Nautilus. Crea en la carpeta /opt/lampp/htdocs/portal un archivo vacío de texto. Llámalo configuration.php y copia en su interior todo el contenido ofrecido para este archivo en esta misma pantalla, en la parte inferior. Guarda los cambios.

El resultado final será algo similar a la captura de pantalla siguiente:

Joomla 1.5: asistente de instalación

¿Algo decepcionante? No parece gran cosa… pero ya la llenarás de contenido y la convertirás en algo más… espectacular.

¡Enhorabuena!  Ya has realizado tu primera instalación de un sitio Joomla y tienes todo preparado para empezar a introducir contenido en tu sitio.

Para acceder a la administración de tu sitio web tendrás que teclear la URL del mismo en tu navegador Web (siempre recuerda con el servidor Xampp encendido):

http://localhost/portal/administrator

Joomla 1.5: asistente de instalación

Accederás así al Panel de control de administración de Joomla.

 Joomla 1.5: asistente de instalación

El enlace Cerrar sesión que localizarás en la parte superior de la pantalla te permitirá salir correctamente del sistema.

¡Ahora ya tienes todo preparado para seguir nuestros próximo artículos dedicados a Joomla 1.5!



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!