11 - Como Agregar Efectos Al Contenido

8/11/2019 11 - Como Agregar Efectos Al Contenido

1/22

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 11 Como agregar efectos al contenido Pgina 1

ADMINISTRACIN DE WEBSITES CON CMS

PARTE IILeccin 11 Como agregar efectos al contenido

Administracin de un WebSite con CMS se encuentra bajo una LicenciaCreative Commons Atribucin-No Comercial-Licenciamiento Recproco 3.0 Unported.Sep 2012Ago 2014IDSystems
http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/


2/22



Leccion 11 COMO AGREGAR EFECTOS AL CONTENIDO (TEXTO EIMGENES)

En algunos casos, no solamente necesitamos poner las imgenes y redimensionarlas, sino hacerminiaturas 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:


3/22



Como podemos ver, al dar un click sobre la imagen del articulo esta se abre en otra ventanasuperpuesta oscurenciendo momentaneamente el resto para resaltarla. Esto se llama LIGHTBOX (Cajade 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 menuEXTENSIONES, 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 oURL en nuestro servidor, asi:


4/22



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 deENLACE


5/22



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

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

En apariencia no vemos nada que haya cambiado en nuestro articulo, esto es porque hemos creado unenlace que cuando pasemos el raton por la imagen, se cambiara el cursor para que pueda abrirse laimagen 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:


6/22



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


7/22



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

Ahora, vemos que hay dos etiquetas:


8/22



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

Listo. Tenemos nuestra imagen mostrandose en una ventana flotante.


9/22



Imgenes asociadas con miniaturas y LightBox

Otra forma de poner las imgenes en nuestro articulo, sobre todo cuando son varias es ponerlas todasen una carpeta de nuestro servidor y poner una instruccin para que se muestren todas ellas, creandolas 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. Yque la que queremos ver obtiene un color. Al hacer click en la imagen miniatura, se abre la ventana delightbox.


10/22



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

Veamos como podemos ponerlo.

En primer lugar tenemos que seleccionar las imgenes que queremos acompaar a nuestro articulo. Depreferencia 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 copiarlos archivos de nuestra computadora al servidor donde esta alojado nuestro sitio. Su desarrolladorpodra proporcionarle dicho programa y configurarlo (o puede ver la leccion de cmo hacerlo en eltema de EXTRAS).


11/22



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 sidoclasificado 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 conexinpreestablecida para no tener que teclear cada vez la direccion, el usuario y contrasea.


12/22



Simplemente hacemos click y veremos como se conecta.


13/22



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

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

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


14/22



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


15/22



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

Y cerrar el programa.

Paso 2:

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

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

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

Y escribir la linea que esta marcada en amarillo:


16/22



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

Donde el ultimo numero (width) es el ancho que tendran las miniaturas, puede cambiar este numeropor 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 imgenesque estan dentro de la carpeta indicada se acomodaran en la linea que nos posicionamos, los efectosse daran de manera automatica.

Paso 3:

Si queremos personalizar aun mas estos efectos, podemos ir a EXTENSIONES\GESTOR DE PLUGINS, ybuscar el que dice RS-EXIBITION (como vimos anteriormente). Aqu damos un click y se abrira laventana 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:


17/22



Si queremos que se oscurezca la parte del fondo cuando se abra la ventana, el tamao predeterminadode las minuaturas, si se redimensionaran automaticamente y otras opciones de estas quegeneralmente 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 puntosimportantes en el texto.

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

Los efectos son los siguientes:


18/22



En esta primera parte podemos poner ALERTAS, INFORMACION, ADVERTENCIA, NOTA, NOTICIA oDESCARGA. Basicamente es una sola linea y en la imagen, nos esta mostrando las etiquetas que seusan 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.


19/22



Y aunque nuestro portal permite poner comentarios, este complemento permite manejar de maneramas 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, mostrarla 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 podemosponerlo en negro, blanco, azul o rojo:


20/22



Ahora blanco:

Y azul:


21/22



O rojo:

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


22/22



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

Documents

Transcript of 11 - Como Agregar Efectos Al Contenido