Crea un artculo en Joomla que incluya un

enlace a una Web externa

0 0Email0ShareThisNew

Usar puntuacin:
Malo

/0
Bueno
Puntuar

Domingo, 24 de Octubre de 2010 16:20ltima actualizacin el Domingo, 24 de Octubre de 2010 17:09 Escrito por

Edita Sueiras

Tags: CMS | gestor de contenidos | Joomla

En esta prctica vas a crear un nuevo artculo en Joomla en el que vas a incluir un enlace a un
sitio Web externo. Como ya conoces por nuestros artculos anteriores en primer lugar debes
crear un nuevo artculoen Joomla. Para ello desde el Panel de control del sistema haz clic en
el botn Aadir un nuevo artculo o bien acude al men Contenido - Gestor de artculos y
pulsa en el botn Nuevo para acceder al formulario de creacin de un nuevo artculo:

Configura el artculo con los siguientes parmetros:

Ttulo: Prueba de enlace a una web externa

Alias: el mismo, copiar pegar.

Publicado: S

Pgina principal: No

Seccin y categora: 1 Bachillerato - Recursos de Biologa y Geologa

Teclea en el cuerpo del artculo: Proyecto Biosfera - Unidades didcticas multimedia

interactivas, herramientas y recursos para las materias de Biologa y Geologa en la
Enseanza Secundaria Obligatoria y el Bachillerato. Accede a las Unidades Didcticas para
1 de Bachillerato.

El procedimiento para insertar vnculos es el siguiente:

En primer lugar debes averiguar la direccin URL del destino del vnculo. Por ejemplo, en este
caso vas a establecer un enlace a la pgina del Proyecto Biosfera del Ministerio de Educacin,
en concreto a la seccin dedicada a las Unidades Didcticas para los alumnos de 1 de
Bachillerato. Puedes acceder a ella si introduces la siguiente direccin URL en el navegador:

http://recursos.cnice.mec.es/biosfera/profesor/1bach
illerato/1.htm
En el editor de textos, dentro del cuadro de texto del cuerpo del artculo selecciona el texto que
deseas utilizar como origen del vnculo, es decir, el texto sobre el que debern hacer clic los
usuarios para acceder al destino del vnculo. En este ejemplo, selecciona la cadena de
palabras "Accede a las Unidades Didcticas" del ltimo prrafo.
Una vez seleccionado este texto origen, haz clic sobre el icono Insertar enlace que localizars
en el editor TinyMCE.
As acceders a la ventana Insertar / editar enlace.

Observa la ventana Insertar / editar enlace y cumplimenta los campos correspondientes de la

siguiente manera:

URL del hipervnculo: Escribe aqu la direccin URL del sitio a visitar. En este caso,
http://recursos.cnice.mec.es/biosfera/profesor/1bachillerato/1.htm. Puedes tambin copiar la
direccin URL desde tu navegador y pegarlo en el cuadro de texto, ya sabes, selecciona el
texto, botn derecho del ratn - copiar y pegar.
Destino. Utiliza esta lista desplegable para indicar si quieres mostrar el destino del vnculo en
la pgina de navegacin o en otra diferente. Generalmente, si el destino es un contenido
externo, como es el caso, puede ser recomendable abrirlo en una ventana nueva por si el
usuario quiere seguir explorando tu sitio despus de explorar la URL que le has recomendado.
Ttulo. Escribe un ttulo para el enlace, se mostrar cuando acerques el ratn al mismo. Suele
ser un texto explicativo del sitio que se va a visitar. Por ejemplo, el nombre del sitio, la
descripcin de su contenido, etc.
Clase. Determina la tipologa del texto a mostrar en el campo ttulo. Depende de la plantilla en
uso.
Cuando finalices haz clic en el botn Insertar. Guarda finalmente el artculo, observa como el
nuevo artculo se muestra en el Gestor de Artculos.
Llega ahora el momento de comprobar en el Frontend de tu sitio el funcionamiento del enlace
que acabas de configurar. Para ello haz clic con el botn derecho del ratn en el enlace
Previsualizar y...
Dnde est el artculo? Por qu no lo veo? Qu he hecho mal?
Nada, todo est correcto. Sencillamente lo has configurado para que no se muestre en la
pgina principal del sitio y, por tanto, Joomla, obediente, no lo muestra.
Cmo solucionarlo?

En el Gestor de artculos haz clic en el icono que se muestra justo a la derecha del artculo en
la columna Pgina principal para que se convierta de un botn de validacin rojo con un aspa
en validado con un icono verde.

Ahora s puedes
recargar el Frontend de tu sitio con la tecla F5 y comprobar que el artculo est visible y el
enlace que acabas de crear funciona perfectamente.

Creo que ya vas comprendiendo que tu sitio Joomla necesita ciertas entradas en los mens de
navegacin que apunten a las secciones y categoras que has configurado en el sistema. De
esta manera facilitars la navegacin por todos los artculos que vayas creando y configurando
en el sitio.

Si usted tiene un sitio web Joomla, puede que est utilizando la plantilla rhuk_milkyway que
viene instalado. Si es as, que no le gusten las variaciones de color disponible. Incluso si lo
hace, usted lo desea, puede ajustar un poco. Debajo de describir el proceso que utiliza para
cambiar el favicon, el logotipo, y el color de fondo, en la seccin de cabecera, as como en
el cuadro de griscea que rodea la seccin de contenido blanco. He utilizado una de las
opciones de color - verde -, pero aadi algunos otros colores para animar un poco.

Notas Generales

Estas instrucciones asumen que usted est trabajando en un sitio de servidor de prueba,
como un servidor para el hogar, y no en el lugar de produccin. Va a transferir los cambios a
la planta de produccin slo cuando haya terminado, y feliz con el resultado. Cada vez que
consulte el directorio de joomla_root, me refiero al directorio raz en el que tienes tu sitio
Joomla instalado en su ordenador.
Hay varios pasos que participan en este proceso. En primer lugar, cambiar el favicon, el
logotipo, y luego empezar a cambiar los colores de la plantilla. Esto implica la alteracin de
las imgenes grficas que vienen instalados para agregar o cambiar los colores. Tambin
implica la edicin de algunos de los archivos CSS instalados.
Piense con cuidado acerca de si usted tiene el tiempo y la habilidad de organizacin para
hacer la recuperacin de personalizar el estilo cada vez que se actualiza y se vuelve a
escribir su trabajo. Si no, no personaliza rhuk_milkyway. Escribir una nueva plantilla de
Joomla usted mismo, o conseguir a alguien ms para hacerlo, o buscar una plantilla que es
ms personalizable. Me gusta la plantilla, por lo que he personalizado. El proceso es
exigente, pero yo no soy una persona profesional de la tela, y lo hice, as que no es difcil.
A medida que su proceder, en cada directorio donde se van a cambiar un archivo, hacer un
nuevo sub-directorio llamado original_files . Antes de sobreescribir un archivo que
forma parte de los archivos originales de la plantilla de Joomla, poner una copia del mismo
en el original_files sub-directorio para que pueda recuperar de nuevo si (o debera
decir cuando) todo va mal, y te necesito para obtener el archivo original de nuevo.
Antes de iniciar la fabricacin o la reescritura de archivos en los directorios del sitio Joomla,
crea un nuevo directorio fuera de la pgina y lo llaman custom_joomla. Al hacer los nuevos
archivos del sitio Joomla, crear copias de ellos en este directorio. Asegrese de que su
ubicacin est bien fuera de los directorios de Joomla, por lo que una actualizacin de
Joomla no sobrescribir los archivos. Si usted se olvida de hacer esto, usted perder todo el
trabajo duro la prxima vez que las actualizaciones del programa Joomla s mismo.
Debido a que estn alterando la rhuk_milkyway usted debe hacer un sub-directorio con ese
nombre en la comunidad de Joomla custom_joomla. Todos los archivos nuevos que estamos
haciendo en esta personalizacin ir en el directorio custom_joomla / rhuk_milkyway o sus
subdirectorios.

Paso 1. Cambiar Favicon

Vaya a joomla_root/templates/rhuk_milkyway de directorio, y hacer un directorio
nuevo llamadooriginalfavicon . Ponga el archivo de Joomla favicon.ico en el mismo.
Haz que tu favicon personalizado para su sitio, lo llaman favicon.ico , y lo colocamos en
eljoomla_root/template/rhuk_milkyway directorio. Ahora ha sustituido el favicon de
Joomla con los tuyos.

Ponga una copia en el custom_joomla/rhuk_milkyway directorio, por lo que no se perder

en una actualizacin, que puede reescribir todos sus archivos de plantilla
Joomla rhuk_milkyway.

Paso 2. Cambiar Logo

Imagen del logotipo en las cabeceras de
Vaya a joomla_root/templates/rhuk_milkyway/images del directorio, y hacer un nuevo
sub-directorio llamado originalimages . Ponga mw_joomla_logo.png en ella. Tenga en
cuenta su anchura y dimensiones de altura. Haz tu propia imagen de logotipo personalizado
en formato png, el ancho exacto de la misma altitud y en la imagen original, utilizando
cualquier paquete de grficos que te gusta. Coloque la nueva imagen en
el joomla_root/templates/rhuk_milkyway/images del directorio y darle el mismo
nombre que el original.
Ponga una copia de su nueva mw_joomla_logo.png en
su custom_joomla/rhuk_milkyway directorio.Ahora ha sustituido el logo de Joomla con su
propio en el encabezado del sitio.

Paso 3. Cambiar los colores

En la plantilla rhuk_milkyway actual, hay 6 opciones de color: negro, blanco, azul, naranja,
verde y rojo. En esta seccin, se describe cmo utilizar una de las opciones y modificarlo
para reflejar sus preferencias de color mediante la adicin de fondos de diferentes colores a
la cabecera, pie de pgina y el cuadro de color gris plido alrededor del rea de contenido
blanco. Yo constru mi nueva apariencia de la pgina utilizando la versin verde, la adicin
de fondos en tonos de verde azulado, as que mi descripcin a continuacin se reflejan esa
opcin.
Vaya a joomla_root/templates/rhuk_milkyway/images directorio. Decida el color que
se va a alterar.Usted no quiere cambiar los colores despus de haber iniciado este proceso,
as que elige con cuidado. He utilizado un sitio web donde se puede ver cmo los colores del
texto, el fondo y las fronteras de trabajar juntos, y que le da los valores de css de los colores
seleccionados, ya sea en forma RGB (mi favorito) o en forma hexagonal. Yo lo llamo el
corrector de color, y se puede utilizar mis enlaces Joomla para llegar all.
Despus de una lnea experiemntation color, me he decidido a modificar la opcin de color
verde,aadiendo un nuevo color de fondo - azul verdoso. Haga un sub-directorio
llamado teal_on_greenen su custom_joomla/rhuk_milkyway/images directorio. Hacer
esto le ayudar a mantener esta estructura para facilitar la recuperacin de archivos ms
tarde, en caso de que usted comience a hacer una gran cantidad de variaciones de color
diferentes. Recuerde, todos los nuevos archivos que se van a realizar tienen que ser con el

directorio de joomla, pero tambin una copia de seguridad en

su custom_joomla/rhuk_milkyway directorio o subdirectorios.
En el joomla_root/templates/rhuk_milkyway/images directorio, hacer un subdirectorio llamadooriginal_green . Vamos a utilizar el directorio de verde para ver los
archivos nuevos colores a medida que rehacerlos. No queremos perder nuestras imgenes
verdes originales, sin embargo, por lo que necesitamos para hacer una copia de todas las
imgenes en el green del directorio, y poner estas copias en
el original_green directorio. Ahora que hemos respaldado estas green archivos de
directorio, podemos perder el tiempo con sus colores, por lo que todas las imgenes nuevas
se guardarn en el green de directorios y copia de seguridad en
sucustom_joomla/rhuk_milkyway/images/teal_on_green directorio. Haga dos subdirectorios en
elcustom_joomla/rhuk_milkyway/images/teal_on_green directorio. Llame a
uno verde y llamar a losteal_green_css otros. Ahora est listo para comenzar a hacer las
nuevas imgenes.
Ahora abre las siguientes imgenes de su green en el directorio de su paquete de grficos
favorito:

mw_footer_b.png

mw_footer_b_l.png

mw_footer_b_r.png

mw_header_t_r.png

mw_header_t_l.png

mw_header_t.png

Recolorear el fondo pie de pgina

mw_footer_b.png: Color de la lnea Gris oscuro en la parte superior en un tono ms

claro de la zona verde de espesor en la parte inferior. Salga de la delgada lnea
blanca debajo de l solo tambin. Color del rea grande de color gris plido con el
nuevo color que desea para el rea de fondo pie de pgina. Yo eleg un azul verdoso
plido.

mw_footer_b_l.png: Color de la lnea de color gris oscuro en la parte superior en un

tono ms plido de la zona verde de espesor en la parte inferior. Salga de la delgada
lnea blanca debajo de l solo. Pinta el rea grande de color gris plido en el centro y

la derecha con el mismo color que has usado antes para el rea de fondo Pie de
pgina.

mw_footer_b_r.png: Color de la lnea de color gris oscuro en la parte superior en un

tono ms plido de la zona verde de espesor en la parte inferior. Salga de la delgada
lnea blanca debajo de l solo. Color del rea grande de color gris plido en el centro
y la izquierda con el mismo color que has usado antes para el rea de fondo pie de
pgina.

Guardar cada uno de estos archivos bajo su nombre original en el directorio

de verde (no el directorio original_green) y poner una copia en
elcustom_joomla/rhuk_milkyway/images/teal_on_green/green del directorio.

Recolour el fondo cabecera

mw_header_t_r: Deja el verde oscuro solo. Deja la delgada lnea blanca solo. El rea
de fondo principal que se encuentra detrs de los logotipos es una gradacin de
grises plidos. Con mucho cuidado reemplazado cada lnea con un tono apropiado de
verde azulado, para que esta rea de fondo verde azulado ms oscuro, y para
mantener una gradacin. Mantener la gradacin hace hacer algunos de los diagramas
de otros por venir. Yo coincida con la cantidad de verde en mi verde azulado con la
cantidad de verde en los tonos grises originales. Esto simplific mis clculos aqu.

mw_header_t_l: Es que el anterior.

mw_header_t: Como el anterior pero hay ms lneas en la parte inferior bottom.The

uno debe ser el tono exacto de la caja de fondo que rodea el rea de contenido
blanco. La plantilla hace que un color gris plido, pero si usted va a cambiarlo, poner
el nuevo color no. No ser una gradacin. Por encima de esta lnea, hay una banda de
una lnea de color gris, que de color verde oscuro, una banda blanca, que me dej
solo, y otra banda gris que me de color verde oscuro de color. Esto coincide con las
capas superiores, que son (de arriba) de color verde plantilla de espesor, (no
cambian), blanco (que me dej solo) y gris (que de color verde oscuro de color. El
resto de esta imagen es el rea verde azulado, con gradacin. que coincida la lnea
horizontal de la lnea horizontal con la gradacin de los abover dos imgenes.

Guardar cada uno de estos archivos bajo su nombre original en el directorio

de verde (no el directorio original_green) y poner una copia en
elcustom_joomla/rhuk_milkyway/images/teal_on_green/green del directorio.

Recolour del resto de las piezas que bordean el fondo de cabecera. Partido que los hayan
hecho.Las imgenes a utilizar provienen de
la joomla_root/templates/rhuk_milkyway/images del directorio y debe ser guardado

en ese directorio, y una copia de cada uno guarda en

elcustom_joomla/rhuk_milkyway/images/teal_on_green directorio:

mw_header_b.png

mw_header_r_b.png

mw_header_l_b.png

arrow.png

Recolour el rea del botn divertido en la parte inferior del rea de cabecera. Es el mejor
color de estas tres imgenes juntos, si sus permisos de grficos de paquetes, debido a que
las gradaciones de color debe coincidir con las gradaciones de cabecera realizado
previamente la plantilla, y que coincida con el efecto de sombra. Sea fresco y energtico y
extremadamente paciente para esta parte del proceso. El esmerado ms son, mejor ser el
producto final se ver. Las sombras son un desafo, pero por ahora usted sabe que su
paquete de grficos bastante bien. Abra las imgenes siguientes de
su joomla_root/templates/rhuk_milkyway/images del directorio:

mw_menu_cap_l.png

mw_menu_cap_r.png

mw_menu_normal_bg.png

Imgenes Contenido de la caja. El cuadro de contenido tiene seis imgenes que dibujan la
frontera alrededor de ella. Por todas estas imgenes, la parte blanca sigue siendo blanca, el
gris plido coincide con el rea de fondo que desea para todo el cuadro de contenido, y la
frontera coincide con el color del borde que ha elegido para la lnea divisoria - en mi caso,
uno de color verde oscuro.Abra las imgenes de
su joomla_root/templates/rhuk_milkyway/images del directorio y guardar las
imgenes acabadas all, y tambin guardar una copia en
sucustom_joomla/rhuk_milkyway/images/teal_on_green directorio:

mw_content_b.png

mw_content_b_l.png

mw_content_b_r.png

mw_content_t.png

mw_content_t_l.png

mw_content_t_r.png

ltimas imgenes pocas: La pgina debe mirar muy bien ahora, pero hay algunos retoques
poco ms opcionales antes de llegar a la CSS, que se limpian los trozos en bruto. Segn el
nuevo color que ha elegido, puede que no necesite cambiar esto, pero lo hice. Abra estas
imgenes de sujoomla_root/templates/rhuk_milkyway/images del directorio y guardar
las imgenes acabadas all, y tambin guardar una copia en
su custom_joomla/rhuk_milkyway/images/teal_on_green directorio:

mw_line_grey.png

mw_menu_separator

arrow.png

Vuelva a escribir el css

Vuelva a escribir el archivo color_bg.css

En este ejemplo, la versin en color verde est siendo utilizada por lo que editar el
archivo green_bg.css.

Cambiar la CSS para el contenedor div de la lnea 5 de la green_bg.css

o

Original css: div#wrapper { background: #f7f7f7

url(../images/green/mw_shadow_l.png) 0 0 repeat-y; }

Nueva CSS: >div#wrapper { background: rgb(0,255,251)

url(../images/green/mw_shadow_l.png) 0 0 repeat-y; }

Aadir el siguiente nuevo texto en el archivo. (Este texto sobrescribe el backgroundcolor para esta rea, tal como se define en el template.css): div#tabarea
{ background-color: rgb(0,255,251); }

Aadir el nuevo texto siguiente al archivo. (Este texto sobrescribe el backgroundcolor de las reas fuera de la caja de contenido blanco, como se define en
template.css, as que usted puede cortar y pegar de template.css, y luego aadir los
cambios de color en la seccin whitebox_m. Poner los cambios aqu significa que
usted slo tenga que cambiar el archivo green_bg, no el archivo
template.css): #whitebox_t { background:
url(../images/mw_content_t.png) 0 0 repeat-x; } #whitebox_tl
{ background: url(../images/mw_content_t_l.png) 0 0 no-repeat; }
#whitebox_tr { height: 10px; overflow: hidden; background:
url(../images/mw_content_t_r.png) 100% 0 no-repeat; } #whitebox_m {
border-left: 1px solid rgb(0,204,0); border-right: 1px solid

rgb(0,204,0) ; width: auto; padding: 1px 8px; } #whitebox_b

{ margin-top: -5px; background: url(../images/mw_content_b.png) 0
100% repeat-x; } #whitebox_bl { background:
url(../images/mw_content_b_l.png) 0 100% no-repeat; } #whitebox_br
{ height: 13px; background: url(../images/mw_content_b_r.png) 100%
100% no-repeat; }

Cambiar la CSS para el pie de pgina div cerca de la parte inferior de la green_bg.css

Original css: div#footer { background: #f7f7f7

url(../images/green/mw_footer_b.png) 0 100% repeat-x; }

Nueva CSS: div#footer { background: rgb(200,251,247)

url(../images/green/mw_footer_b.png) 0 100% repeat-x; }

Vuelva a escribir el archivo color.css si es necesario

En el ejemplo, la versin de color verde est siendo utilizada por lo que editar el
archivo green.css.

Si ha cambiado un montn de reas de texto a un fondo ms oscuro, que necesita un

texto ms oscuro en estas reas, y la forma ms fcil es para oscurecer todo el texto
en todo el documento. Haga una bsqueda y reemplazo en el archivo de green.css, y
hacer notas en la parte superior del archivo sobre sus cambios a medida que avanza,
por lo que puede dar marcha atrs a cada paso, o de todo el procedimiento si no le
gusta el resultado.