11 - Como Agregar Efectos Al Contenido

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011
Leccion 11 Como agregar efectos al contenido Pgina 1

ADMINISTRACIN DE WEBSITES CON CMS
PARTE II
Leccin 11 Como agregar efectos al contenido

Administracin de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribucin-
No Comercial-Licenciamiento Recproco 3.0 Unported. Sep 2012 Ago 2014 IDSystems


Leccion 11 COMO AGREGAR EFECTOS AL CONTENIDO (TEXTO E
IMGENES)

En algunos casos, no solamente necesitamos poner las imgenes y redimensionarlas, sino hacer
miniaturas de imgenes (thumbnails) y despues verlas en grande, ya sea en otra pagina o ventana.

Dependiendo del sitio web que haya contratado y que se haya creado, algunos de estos efectos
podran o no estar activados en su portal.

LightBox de imgenes individuales

En este caso veamos el efecto:



Como podemos ver, al dar un click sobre la imagen del articulo esta se abre en otra ventana
superpuesta oscurenciendo momentaneamente el resto para resaltarla. Esto se llama LIGHTBOX (Caja
de luz).

Este efecto se utiliza para mostrar imgenes mas grandes que se encuentran en el articulo. Veamos
como ponerlo.

En primer lugar, su desarrollador debera indicarle si tiene este complemento: ARI SEXYLIGHTBOX.
Como referencia, lo podria checar desde el panel de control de administrador, en el menu
EXTENSIONES, PLUGINS:

Ahora, para ponerlo en nuestra imagen debemos hacer lo siguiente:

1. Ir a nuestro articulo donde estan las imgenes:
2. Ubicar la imagen que queremos, podemos editarla porque necesitamos conocer la ubicacin o
URL en nuestro servidor, asi:



Dando click en el icono de imagen se presentara la pantalla de edicion:

Esta es la direccion que necesitamos copiar. Ahora, cerramos la ventana y damos click en el icono de
ENLACE


Dependiendo del editor que este utilizando (ya que el portal puede utilizar varios), el icono puede
cambiar, pero casi siempre es similar. Se abrira una pantalla donde debemos teclear la direccion de la
imagen:

O pulsar en el icono que esta a la derecha que dice EXPLORAR, para seleccionar la imagen desde su
ubicacin en el servidor. Despues pulsamos el boton INSERTAR

En apariencia no vemos nada que haya cambiado en nuestro articulo, esto es porque hemos creado un
enlace que cuando pasemos el raton por la imagen, se cambiara el cursor para que pueda abrirse la
imagen en grande.

Ahora, necesitamos aplicar el LIGHTBOX. Para ello, necesitamos entrar al modo de codigo de
programacion del sitio (HTML) para activarla. Usamos el icono:

Y nos presentara la siguiente pantalla:



Aqu vemos como esta programado nuestro sitio web. Debemos ubicarnos en donde tenemos nuestra
imagen. En este caso, todas las imgenes estan al final del articulo, asi que buscamos lo siguiente:



Aqu tenemos que tener bastante cuidado porque eliminando alguna etiqueta de programacion, no
nos mostrara nuestro articulo como queremos. Basicamente buscamos primero donde esta ubicada la
imagen de acuerdo al nombre del archivo; en este caso sabemos que se llama IDS58_02.PNG

Ahora, vemos que hay dos etiquetas: <img alt y <a href=. Es justamente en esta donde pondremos
la referencia a nuestro lightbox. Vemos que la imagen anterior ya tiene esta etiqueta:

Y eso es lo que debemos poner: rel=sexylightbox. Justo antes de cerrar la etiqueta con el simbolo > y
antes de la siguiente que es <img

Y eso es todo. Una vez escrito, procedemos a dar click en el boton UPDATE (ACTUALIZAR).



Nuevamente, se cierra la ventana y aparentemente no paso nada. Pulsamos el boton APLICAR o
GUARDAR y vemos los resultados en nuestro sitio.

Listo. Tenemos nuestra imagen mostrandose en una ventana flotante.



Imgenes asociadas con miniaturas y LightBox

Otra forma de poner las imgenes en nuestro articulo, sobre todo cuando son varias es ponerlas todas
en una carpeta de nuestro servidor y poner una instruccin para que se muestren todas ellas, creando
las miniaturas correspondientes y el efecto de LightBox.

Vamos a ver como se ve el efecto:

En primer lugar vemos que tenemos varias imgenes de miniatura en linea difuminadas o tenues. Y
que la que queremos ver obtiene un color. Al hacer click en la imagen miniatura, se abre la ventana de
lightbox.



E incluso nos permite navegar entre todas las imgenes poniendo PREV y NEXT en la parte superior d
ela imagen, asi como un indicador de en que imagen estamos actualmente. Es un efecto similar al
anterior pero con un grupo de imgenes.

Veamos como podemos ponerlo.

En primer lugar tenemos que seleccionar las imgenes que queremos acompaar a nuestro articulo. De
preferencia nombrarlas con un numero consecutivo ya sea al inicio o al final (ej. Imagen01, imagen02,
imagen03, etc). Ahora tenemos que subir las imgenes a nuestro servidor y en una carpeta
solamente para dichas imgenes. Recordemos que la carpeta por defecto de nuestro sitio es en
\images\stories\, asi que bajo esta carpeta crearemos otra de acuerdo a nuestro articulo.

Ademas, necesitamos usar un programa llamado FTP Cliente, que es un programa especial para copiar
los archivos de nuestra computadora al servidor donde esta alojado nuestro sitio. Su desarrollador
podra proporcionarle dicho programa y configurarlo (o puede ver la leccion de cmo hacerlo en el
tema de EXTRAS).



Paso 1:
Abrimos nuestro programa FTP Cliente (en este caso usamos uno gratuito llamado FTP FILEZILLA).

Aqu vemos del lado izquierdo la carpeta y los archivos que queremos subir (note como han sido
clasificado como class01 por ejemplo). Y del lado derecho apareceran los archivos de nuestro servidor.
Cuando iniciamos el programa estamos desconectados por lo que aparece en blanco.

Iniciamos la conexin, seleccionando desde el primer icono (es preferible usar ya una conexin
preestablecida para no tener que teclear cada vez la direccion, el usuario y contrasea.



Simplemente hacemos click y veremos como se conecta.



Aqu vemos que ha habido conexin satisfactoria. Segn este creado nuesto sitio web, podemos ver la
carpeta de imgenes inmediatamente o si tiene subdominios (otros sitios asociados) tendremos que
entrar primero a dicha carpeta. En si, tenemos que ubicar la carpeta IMGENES\STORIES. Nuestro
desarrollador nos ayudara a encontrarla.

Aqu, pulsamos el boton derecho del raton, aparecera un menu contextual y eligiremos CREAR
DIRECTORIO. Damos el nombre y entramos a el.

Ahora todo lo que tenemos que hacer es seleccionar los archivos que necesitamos, pulsar boton
derecho y seleccionar SUBIR a la carpeta recien creada.



En la imagen vemos que tenemos seleccionado del lado izquierdo los archivos, mientras del lado
derecho estamos posicionados en la carpeta recien creada. Dando click con el boton derecho y
apareciendo el menu contextual, usamos la opcion SUBIR para comenzar la copia.



Esperaremos unos minutos y los archivos se subiran. Ahora podemos, desconectarnos del servidor con
el boton

Y cerrar el programa.

Paso 2:

Ahora nos vamos a nuestro panel de control de administrador de nuestro sitio web. Si quiere
asegurarse que tiene esta opcion habilitada, debera revisar el complemento

Recordemos que esta opcion esta bajo el menu Extensiones\Gestor de plugins. El complemento se
llama RS-EXIBITION.

Ahora si, cambiamos al articulo donde queremos insertar las imgenes con sus efectos. Una vez
seleccionado y abierto, nos posicionamos en donde queremos insertar todas las imgenes:

Y escribir la linea que esta marcada en amarillo:


{rsexhibition src=[/images/stories/clases] width=[50]}

Donde el ultimo numero (width) es el ancho que tendran las miniaturas, puede cambiar este numero
por 100, 200, 300, 400, dependiendo que tan grande quieras estas.

Y listo, eso es todo. Grabamos nuestro articulo y luego lo vemos en nuestro sitio, y todas las imgenes
que estan dentro de la carpeta indicada se acomodaran en la linea que nos posicionamos, los efectos
se daran de manera automatica.

Paso 3:

Si queremos personalizar aun mas estos efectos, podemos ir a EXTENSIONES\GESTOR DE PLUGINS, y
buscar el que dice RS-EXIBITION (como vimos anteriormente). Aqu damos un click y se abrira la
ventana de configuracion del complemento:

La parte importante esta del lado derecho que nos indica como queremos mostrar las imgenes:

Display Style como Lightbox o como SlideShow (Presentacion).
Si queremos transiciones en las presentaciones, el estilo de las miniaturas:



Si queremos que se oscurezca la parte del fondo cuando se abra la ventana, el tamao predeterminado
de las minuaturas, si se redimensionaran automaticamente y otras opciones de estas que
generalmente se quedan como estan.

Grabamos los cambios con el boton de GUARDAR y los efectos se mostraran la siguiente vez que se
muestre la pagina o se actualice.

Efectos para remarcar el texto

Tambien podemos usar un complemento en nuestro articulos para remarcar algunos puntos
importantes en el texto.

NOTA: Por supuesto, necesitamos saber si este complemento esta activado en nuestro sitio web por
parte del desarrollador.

Los efectos son los siguientes:



En esta primera parte podemos poner ALERTAS, INFORMACION, ADVERTENCIA, NOTA, NOTICIA o
DESCARGA. Basicamente es una sola linea y en la imagen, nos esta mostrando las etiquetas que se
usan para cada una de estas secciones.

En este segundo caso, tambien podemos poner cierto codigo de programacion en nuestros articulos.
Que generalmente no se aplica en todos los sitios web.



Y aunque nuestro portal permite poner comentarios, este complemento permite manejar de manera
mas grafica las comillas o poner dichos comentarios alienados a izquierda y derecha

Tambien, nos permite poner un tipo de comentario llamado Letra Capitular (arriba), es decir, mostrar
la primer letra de nuestro parrafo de un tamao mas grande para indicar el comienzo.

Y despues vienen una serie de cajas para enmarcar texto que consideremos relevante. Y podemos
ponerlo en negro, blanco, azul o rojo:



Ahora blanco:

Y azul:



O rojo:

Y por ultimo, hasta podemos poner unos botones de enlace diferentes a los que tiene nuestra plantilla
en uso:



Ahora bien, como ponemos esto? Basicamente usando las etiquetas de cada caracteristica dentro de
nuestro articulo. Asi que vamos al articulo donde queremos mostrar el efecto:

Y basicamente es teclear antes de nuestro texto la etiqueta correspondiente, y al final del mismo,
cerrar dicha extiqueta con una diagonal (/).

Simple, no?

11 - Como Agregar Efectos Al Contenido

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

11 - Como Agregar Efectos Al Contenido

Uploaded by

Copyright:

Available Formats

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 11 Como agregar efectos al contenido Pgina 1

You might also like