Crea un artículo en Joomla que incluya un enlace a una Web externa

 0 0Email0ShareThisNewUsar puntuación:  / 0 

Malo Bueno Domingo, 24 de Octubre de 2010 16:20Última actualización el Domingo, 24 de Octubre de 2010 17:09Escrito por

Edita Sueiras

Tags: CMS | gestor de contenidos | Joomla

En esta práctica vas a crear un nuevo artículo en Joomla en el que vas a incluir un enlace a un

sitio Web externo. Como ya conoces por nuestros artículos anteriores en primer lugar debes

crear un nuevo artículoen Joomla. Para ello desde el Panel de control del sistema haz clic en

el botón Añadir un nuevo artículo o bien acude al menú Contenido - Gestor de artículos y

pulsa en el botón Nuevo para acceder al formulario de creación de un nuevo artículo:

Configura el artículo con los siguientes parámetros:

Título: Prueba de enlace a una web externa

Alias: el mismo, copiar – pegar.

Publicado: Sí

Página principal: No

Sección y categoría: 1º Bachillerato - Recursos de Biología y Geología

Teclea en el cuerpo del artículo: Proyecto Biosfera - Unidades didácticas multimedia

interactivas, herramientas y recursos para las materias de Biología y Geología en la

Enseñanza Secundaria Obligatoria y el Bachillerato. Accede a las Unidades Didácticas para

1º de Bachillerato.

Puntuar

El procedimiento para insertar vínculos es el siguiente:

En primer lugar debes averiguar la dirección URL del destino del vínculo. Por ejemplo, en este

caso vas a establecer un enlace a la página del Proyecto Biosfera del Ministerio de Educación,

en concreto a la sección dedicada a las Unidades Didácticas para los alumnos de 1º de

Bachillerato. Puedes acceder a ella si introduces la siguiente dirección URL en el navegador:

http://recursos.cnice.mec.es/biosfera/profesor/1bachillerato/1.htm

En el editor de textos, dentro del cuadro de texto del cuerpo del artículo selecciona el texto

que deseas utilizar como origen del vínculo, es decir, el texto sobre el que deberán hacer clic

los usuarios para acceder al destino del vínculo. En este ejemplo, selecciona la cadena de

palabras "Accede a las Unidades Didácticas" del último párrafo.

Una vez seleccionado este texto origen, haz clic sobre el icono Insertar enlace que

localizarás en el editor TinyMCE.

Así accederás a la ventana Insertar / editar enlace.

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

siguiente manera:

URL del hipervínculo: Escribe aquí la dirección URL del sitio a visitar. En este caso,

http://recursos.cnice.mec.es/biosfera/profesor/1bachillerato/1.htm. Puedes también copiar la

dirección URL desde tu navegador y pegarlo en el cuadro de texto, ya sabes, selecciona el

texto, botón derecho del ratón - copiar y pegar.

Destino. Utiliza esta lista desplegable para indicar si quieres mostrar el destino del vínculo en

la página de navegación 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 después de explorar la URL que le has recomendado.

Título. Escribe un título para el enlace, se mostrará cuando acerques el ratón al mismo. Suele

ser un texto explicativo del sitio que se va a visitar. Por ejemplo, el nombre del sitio, la

descripción de su contenido, etc.

Clase. Determina la tipología del texto a mostrar en el campo título. Depende de la plantilla en

uso.

Cuando finalices haz clic en el botón Insertar. Guarda finalmente el artículo, observa como el

nuevo artículo se muestra en el Gestor de Artículos.

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 botón derecho del ratón en el enlace

Previsualizar y...

¿Dónde está el artículo? ¿Por qué no lo veo? ¿Qué he hecho mal?

Nada, todo está correcto. Sencillamente lo has configurado para que no se muestre en la

página principal del sitio y, por tanto, Joomla, obediente, no lo muestra.

¿Cómo solucionarlo?

En el Gestor de artículos haz clic en el icono que se muestra justo a la derecha del artículo en

la columna Página principal para que se convierta de un botón de validación 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 artículo 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 menús

de navegación que apunten a las secciones y categorías que has configurado en el sistema.

De esta manera facilitarás la navegación por todos los artículos 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 sección de cabecera, así como en el cuadro de grisácea que rodea la sección de contenido blanco. He utilizado una de las opciones de color - verde -, pero añadió 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 producción. Va a transferir los cambios a la planta de producción sólo cuando haya terminado, y feliz con el resultado. Cada vez que consulte el directorio de joomla_root, me refiero al directorio raíz 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 alteración de las imágenes gráficas que vienen instalados para agregar o cambiar los colores. También implica la edición de algunos de los archivos CSS instalados.

Piense con cuidado acerca de si usted tiene el tiempo y la habilidad de organización para hacer la recuperación 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 más para hacerlo, o buscar una plantilla que es más 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 difícil.

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 debería decir cuando) todo va mal, y te necesito para obtener el archivo original de nuevo.

Antes de iniciar la fabricación o la reescritura de archivos en los directorios del sitio Joomla, crea un nuevo directorio fuera de la página y lo llaman custom_joomla. Al hacer los nuevos archivos del sitio Joomla, crear copias de ellos en este directorio. Asegúrese de que su ubicación está bien fuera de los directorios de Joomla, por lo que una actualización de Joomla no sobrescribir los archivos. Si usted se olvida de hacer esto, usted perderá todo el trabajo duro la próxima vez que las actualizaciones del programa Joomla sí mismo.

Debido a que están 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 personalización 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 actualización, 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 gráficos 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 sección, se describe cómo utilizar una de las opciones y modificarlo para reflejar sus preferencias de color mediante la adición de fondos de diferentes colores a la cabecera, pie de página y el cuadro de color gris pálido alrededor del área de contenido blanco. Yo construí mi nueva apariencia de la página utilizando la versión verde, la adición de fondos en tonos de verde azulado, así que mi descripción a continuación se reflejan esa opción.

Vaya a joomla_root/templates/rhuk_milkyway/images directorio. Decida el color

que se va a alterar.Usted no quiere cambiar los colores después de haber iniciado este proceso, así que elige con cuidado. He utilizado un sitio web donde se puede

ver cómo 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í.

Después de una línea experiemntation color, me he decidido a modificar la opción de color verde,añadiendo 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 recuperación de archivos más 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 también una copia de seguridad en su custom_joomla/rhuk_milkyway directorio o subdirectorios.

En el joomla_root/templates/rhuk_milkyway/images directorio, hacer un sub-directorio llamadooriginal_green . Vamos a utilizar el directorio de verde para ver

los archivos nuevos colores a medida que rehacerlos. No queremos perder nuestras imágenes verdes originales, sin embargo, por lo que necesitamos para hacer una copia de todas las imágenes 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 imágenes nuevas se guardarán en el green de directorios y copia

de seguridad en sucustom_joomla/rhuk_milkyway/images/teal_on_green directorio. Haga dos sub-

directorios 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 imágenes.

Ahora abre las siguientes imágenes de su green en el directorio de su paquete de

gráficos 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 página

mw_footer_b.png: Color de la línea Gris oscuro en la parte superior en un tono más claro de la zona verde de espesor en la parte inferior. Salga de la delgada línea blanca debajo de él solo también. Color del área grande de color gris pálido con el nuevo color que desea para el área de fondo pie de página. Yo elegí un azul verdoso pálido.

mw_footer_b_l.png: Color de la línea de color gris oscuro en la parte superior en un tono más pálido de la zona verde de espesor en la parte inferior. Salga de la delgada línea blanca debajo de él solo. Pinta el área grande de color gris pálido en el centro y la derecha con el mismo color que has usado antes para el área de fondo Pie de página.

mw_footer_b_r.png: Color de la línea de color gris oscuro en la parte superior en un tono más pálido de la zona verde de espesor en la parte inferior. Salga de la delgada línea blanca debajo de él solo. Color del área grande de color gris pálido en el centro y la izquierda con el mismo color que has usado antes para el área de fondo pie de página.

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 línea blanca solo. El área de fondo principal que se encuentra detrás de los logotipos es una gradación de grises pálidos. Con mucho cuidado reemplazado cada línea con un tono apropiado de verde azulado, para que esta área de fondo verde azulado más oscuro, y para mantener una gradación. Mantener la gradación hace hacer algunos de los diagramas de otros por venir. Yo coincidía con la cantidad de verde en mi verde azulado con la cantidad de verde en los tonos grises originales. Esto simplificó mis cálculos aquí.

mw_header_t_l: ¿Es que el anterior. mw_header_t: Como el anterior pero hay más líneas 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 pálido, pero si usted va a cambiarlo, poner el nuevo color no. No será una gradación. Por encima de esta línea, hay una banda de una línea 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 gradación. que coincida la línea horizontal de la línea horizontal con la gradación de los abover dos imágenes.

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 imágenes 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 botón divertido en la parte inferior del área de cabecera. Es el mejor color de estas tres imágenes juntos, si sus permisos de gráficos 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 energético y extremadamente paciente para esta parte del proceso. El esmerado más son, mejor será el producto final se verá. Las sombras son un desafío, pero por ahora usted sabe que su paquete de gráficos bastante bien. Abra las imágenes 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

Imágenes Contenido de la caja. El cuadro de contenido tiene seis imágenes que dibujan la frontera alrededor de ella. Por todas estas imágenes, la parte blanca sigue siendo blanca, el gris pálido 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 línea divisoria - en mi caso, uno de color verde oscuro.Abra las imágenes de su joomla_root/templates/rhuk_milkyway/images del directorio y

guardar las imágenes acabadas allí, y también 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 imágenes pocas: La página debe mirar muy bien ahora, pero hay algunos retoques poco más opcionales antes de llegar a la CSS, que se limpian los trozos en bruto. Según el nuevo color que ha elegido, puede que no necesite cambiar esto, pero lo hice. Abra estas imágenes de sujoomla_root/templates/rhuk_milkyway/images del directorio y guardar las

imágenes acabadas allí, y también 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 versión en color verde está siendo utilizada por lo que editar el archivo green_bg.css.

Cambiar la CSS para el contenedor div de la línea 5 de la green_bg.csso Original css: div#wrapper { background: #f7f7f7

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

o Nueva CSS: >div#wrapper { background: rgb(0,255,251) url(../images/green/mw_shadow_l.png) 0 0 repeat-y; }

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

Añadir el nuevo texto siguiente al archivo. (Este texto sobrescribe el background-color 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 añadir los cambios de color en la sección whitebox_m. Poner los cambios aquí significa que usted sólo 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 página 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 versión de color verde está siendo utilizada por lo que editar el archivo green.css.

Si ha cambiado un montón de áreas de texto a un fondo más oscuro, que necesita un texto más oscuro en estas áreas, y la forma más fácil es para oscurecer todo el texto en todo el documento. Haga una búsqueda 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 atrás a cada paso, o de todo el procedimiento si no le gusta el resultado.