• Página 1 de 1
  • 1
Moderador del foro: ZorG  
Algunos trucos con el módulo
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 4:52 PM
ÁLBUM DE FOTOS EN FORMA DE LAS FOTOS SALIENTES

La dirección del sitio de donde hace falta descargar (y al mismo tiempo dar con el quid de la instalación si sabes el idioma Inglés) es http://vikjavev.no/highslide/. Si quieres comprender independientemente, has de leer Installation en la página de inicio y visita la sección FAQ.
Así que descargamos el paquete aquí.

Hacemos clic sobre Download como está indicado en la imagen (marcado con rojo). De aquí pasamos a la página donde abajo es necesario dar su asentimiento.

Y empezamos el proceso de descarga.
Después de que el paquete está descargado, hay que abrir el archivo index.htm y elegir el modelo de lo cómo quieres presentar tus fotos en el álbum. (O tal vez en la página o informador).

Elegida la variante, hay que conocer el nombre del archivo que contiene esta variante (se lo puede ver en la barra de direcciones del navegador) y abrir este archivo (está allá mismo donde index.html). Ha de estar abierto no en el navegador, sino por ejemplo en Dreamweaver o en cualquier otro editor, a sabor puedes aplicar el bloc de notas.
Luego copiamos el código del archivo en las plantillas necesarias. Pero aquí hay que estar atento y recordar lo que esto significa.
Como ejemplo elegimos la última variante (“Slideshow with individual captions and a controlbar using custom overlay”). Primero es necesario activar los scripts en la página de exposición. Para esto los archivos donde están descritos los scripts, deben estar en el gestor de archivos. En el código fuente vemos una línea:

Quote
<script type="text/javascript" src="highslide/highslide.js">
</script>

que significa lo siguiente: está conectado el archivo highslide.js que está en la carpeta highslide, por eso crea la carpeta highslide y carga allá en archivo necesario (a propósito: será mejor que cargues highslide.packed.js – está comprimido y se cargará más rápido), pon esta línea en la plantilla de exposición de las fotos:

Quote
<script type="text/javascript" src="highslide/highslide.packed.js">
</script>

O crea una carpeta que sea cómoda tara ti y cambia la ruta (lo principal es activar correctamente el archivo de scripts). Generalmente, en lo que toca al gestor de archivos: mejor utilizar Total Commander (recuerda del modo pasivo y la limitación del largo de la contraseña de 8 caracteres) y de una vez cargar la carpeta graphics y este archivo. Mejor no cambies los nombres de las carpetas para la compatibilidad con todos los códigos en el futuro.
He aquí este código:

Quote
<script type="text/javascript">

hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
} );

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.title';

</script>

También se puede añadir una línea que quitará el enlace superior powered_by:

Quote
hs.showCredits = false;

Esto se añade directamente después de

Quote
hs.graphicsDir = 'highslide/graphics/';

A propósito, la línea de arriba comunica al navegador que la carpeta graphics que contiene todos los elementos gráficos para exponer los elementos de la navegación en la imagen (agujas), está en la carpeta highslide, es por eso es importante guardar los nombres de las carpetas para que el código corresponda a lo que es en realidad.
De momento acabamos con el código. Más tarde será necesario añadir unas modificaciones correspondientes en el aspecto de la imagen (plantilla “Aspecto de las fotos” en el álbum de fotos). Ahora hemos de esclarecer lo de estilos. En el código fuente del modelo todos los estilos se exponen directamente en la página. Nosotros los metemos en nuestro archivo .css. Para esto simplemente copiamos los estilos necesarios en este archivo, pero preliminarmente hay que escribir las rutas absolutas a las imágenes. O sea, si en el clase se utiliza la inscripción

Quote
url(highslide/graphics/zoomin.cur)

ha de estar modificada obligatoriamente a

Quote
url(http://nombre de tu sitio/highslide/graphics/zoomin.cur)

Recuerda bien este momento importante pues las rutas relativas no funcionarán – nuestro archivo .css no está en la raíz del gestor de archivos. Más quería mencionar que no todas las inscripciones se las puede transferir. Por ejemplo:

Quote
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}

se puede no copiar pues esto significa el cambio de la fuente para todos los elementos del sitio – no se requiere. Más los clases con las palabras highslide-credits tampoco se requieren – responden por la exposición del copyright.
Y al fin y al cabo nos falta esclarecer el asunto del aspecto de la imagen y elementos de la navegación. Haz la copia del código

Quote
<div id="controlbar" class="highslide-overlay controlbar">

<a href="#" class="previous" onclick="return hs.previous(this)"
title="Previous (left arrow key)"></a>

<a href="#" class="next" onclick="return hs.next(this)"
title="Next (right arrow key)"></a>

<a href="#" class="highslide-move" onclick="return false"
title="Click and drag to move"></a>

<a href="#" class="close" onclick="return hs.close(this)"
title="Close"></a>
</div>

y ponlo al fin de la plantilla de aquella página donde se expondrán las imágenes (digamos que será la página de inicio del álbum de fotos o, si se expondrá mediante los informadores, en la página donde estará el informador después del código $MYINFn$). Este código responde por la exposición de los botones de la navegación (a propósito, puedes traducir las inscripciones de Inglés a Español). Ahora pasamos a la plantilla “Aspecto de fotos” y hacemos los cambios de siguiente índole:

Quote
<a id="thumb$ID$" href="$FULL_PHOTO_DIRECT_URL$"
class="highslide" onclick="return hs.expand(this)">
<img src="$PHOTO_DIRECT_URL$" border="0"
title="$PHOTO_DESCR$" /></a>

es necesario que ID sea único, por eso utiliza el bloque global $ID$, $FULL_PHOTO_DIRECT_URL$ es la ruta a la imagen del tamaño completo: aquí hace falta recordar que al cargar las imágenes las fotos han de tener más tamaños por horizontal o vertical que las configuraciones en “Álbum de fotos” – “Tamaños de la foto a exponer en una página aparte”. Es decir que cuando el sistema está cargando una foto, ha de tener un motivo para guardar el tamaño completo y nosotros necesitamos que después la variable $FULL_PHOTO_DIRECT_URL$ contenga los datos. Se puede instalar los tamaños mínimos para no fastidiarnos más tarde. Después la cosa sigue muy simple: basta con copiar todo (clase y elaboración del evento onclick). Luego pasa el código global $IMAGE$. Si quieres utilizar el atributo title del tag img en calidad de exponer la información bajo la imagen, el código será así:

Quote
<img src="$PHOTO_DIRECT_URL$" border="0" title="$PHOTO_DESCR$" />

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 6:50 PM
Foto siguiente. Álbum de fotos (Сon ayuda de JavaScript)

Aquí te ofrezco un nuevo script. Es muy simple para comprender y utilizar – en el álbum de fotos haces clic directamente sobre una foto y la página pasa a la foto siguiente. En cuanto a mi, me parece que cómodo y útil.

Pasamos a la plantilla: Inicio » Diseño » Gestión de diseño (plantillas) » ”Página con una foto completa y comentarios”, y después del tag </body> escribimos el código:

Code
<script type="text/javascript">
var spanBlock = document.getElementById('phtmSpan35');
var objImage = spanBlock.getElementsByTagName('img');
var idImage = objImage.item(0).id;
var nextLink = null;

function nextPhoto() {
           var allA = document.getElementsByTagName('a');
           for (i=0; i < allA.length; i++) {
                var inner = allA.item(i).innerHTML;
                if (inner.indexOf("Следующая") != -1) nextLink = allA.item(i).href;       
           }
           if (nextLink != null) window.location.href = nextLink;
}

function attachEvent(d_event, d_function, d_target) {
           if (typeof d_target == 'undefined') d_target = window;
           else d_target = document.getElementById(d_target);

           if (d_target.addEventListener) d_target.addEventListener(d_event, d_function, false);
           else if (d_target.attachEvent) d_target.attachEvent('on' + d_event, d_function);
           else return false;
};

attachEvent('click', nextPhoto, idImage);
</script>

El script puede estar modernizado por tu gusto, pues todito depende de tu fantasía. Por ejemplo, se puede hacer que al hacer clic sobre la última foto se te transfiere al álbum de fotos actual. Para esto cambiamos

Code
if (nextLink != null) window.location.href = nextLink;

por

Code
if (nextLink != null) window.location.href = nextLink;
else window.location.href = '$ALBUM_LINK$';

y ¡vamos a tomar cerveza!
booze


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 2:14 PM
Herramienta bote de pintura de Photoshop

La herramienta bote de pintura sirve para rellenar de color una imagen o un área seleccionada, pero también puede rellenar utilizando un motivo que podríamos crear nosotros mismos.

La herramienta bote de pintura es otra de las que, sin lugar a dudas, cualquier usuario con un mínimo de experiencia sabrá utilizar. Supongo esto porque cualquier programa de diseño la tiene, hasta los más básicos como el Paint, que viene con Microsoft Windows.

Así pues, seguramente pocas explicaciones serán necesarias para aprender a usar el bote de pintura. Sin embargo, lo estamos publicando en no estaría completo si la dejamos de lado. No obstante, para sacarle jugo a este artículo, vamos a explicar un uso del bote de pintura que quizás muchos desconozcan, que es el de rellenar con un motivo. Lo veremos dentro de poco, aunque vamos a comenzar explicando el uso más básico de esta herramienta.

El bote de pintura se encuentra situada en la barra de herramientas de Photoshop, compartiendo espacio en la botonera con la herramienta de degradado. Si vemos el botón de degradado, simplemente tenemos que hacer un clic prolongado para que aparezca la herramienta de bote de pintura.

Rellenar de color
El uso más normal de la herramienta bote de pintura es rellenar de color. Para accionarla simplemente hacemos clic en cualquier parte de la imagen y rellena de color un área de la imagen, que dependerá de la capa donde estemos trabajando y el contenido que tenga.

Cuando usamos el bote de pintura tenemos que tener en cuenta la capa donde estamos trabajando, pues la herramienta rellena el color sobre la capa que esté seleccionada. El bote de pintura rellena de color todo el área de la imagen que esté sin delimitar. Imaginemos que es justamente eso, un bote de pintura y que volcamos la pintura sobre la capa. Entonces la pintura se expande, cual líquido, ocupando todo el área de la imagen que pueda. Los límites de la pintura serán los propios que haya dibujados en la capa. Por ejemplo, si tenemos el dibujo de un rectángulo (que delimita un área por 4 líneas rectas), y pintamos dentro de ese área, la pintura se expandirá por todo el espacio del rectángulo. Las áreas externas del rectángulo no se pintarán, porque la pintura no podrá pasar los límites marcados por el polígono.

Se deduce del último párrafo que si la capa donde estamos pintando no tiene ningún contenido, el bote de pintura pintará toda la capa. Ahora bien, puede que queramos pintar un área que no esté marcada por la imagen, sin que el bote de pintura se expanda para toda la capa. En ese caso podremos hacer una selección (con la herramienta de selección) y pintar dentro. Entonces la pintura nunca pasará los límites del área seleccionada.

Opciones de la herramienta bote de pintura
El bote de pintura tiene algunas opciones, al igual que la mayoría de las herramientas del programa, que se pueden definir en el panel de opciones, generalmente situado en la parte de arriba de la ventana de Photoshop. Cuando seleccionemos la herramienta, aparecerá automáticamente el panel de opciones, que tiene esta forma:

Color frontal: Esta opción sirve para seleccionar entre pintar con el color frontal o pintar con un motivo (veremos luego lo que significa pintar con un motivo). Por defecto pinta con el color frontal, que es el que tenemos seleccionado en la barra de herramientas, en el selector de color que aparece abajo. En la siguiente imagen marcamos el lugar donde aparece el color frontal con una imagen:

Modo: Esto permite varios modos de rellenar color, pero la verdad no encuentro mucha utilidad, salvo para realizar algún efecto puntual.
Opacidad: Con esta opción podemos pintar del color seleccionado, pero creando una transparencia. En principio es 100% opaco, con lo que el color de la pintura no tiene transparencia. Pero si bajamos la opacidad veremos que el color que pintamos pierde un poco de fuerza en el tono y si tenemos una capa debajo con algún dibujo, comprobaremos que se deja entrever, porque la pintura que estamos utilizando tiene transparencia.
Tolerancia: Este valor sirve para que la herramienta tolere más o menos los límites que tenga la capa donde estamos pintando. A menor tolerancia, los límites donde pintamos se restringirán a áreas donde hay el mismo color.
Suavizar: Sirve para que los bordes del área a pintar tengan un suavizado y no se note tanto el mapa de píxeles que es una imagen.
Contiguo: Esto sirve para que se rellenen de color sólo los píxeles contiguos. El comportamiento por defecto que hemos explicado (que la pintura del bote de pintura se detiene por los límites del área que haya dibujada donde se está pintando) es cuando el valor contiguo está activo. Si no está activo, el bote de pintura pintará en toda la capa, siempre que la tolerancia lo permita.

Todas las capas: Si lo marcamos, pintaremos en la capa que esté seleccionada, pero la tolerancia se tendrá en cuenta con lo que haya dibujado en todas las capas y no sólo en la capa donde estamos trabajando.

Pintar con un motivo
La primera de las posibilidades de configuración del panel de opciones tiene un desplegable que permite elegir entre "Color frontal" y "Motivo". En el caso que seleccionemos la opción motivo, no se pintará con un color plano, sino con un mapa gráfico determinado, que hará un mosaico, repitiéndose las veces que hagan falta para rellenar todo el área que se pueda. El motivo puede ser cualquier cosa, como una imagen, un tramado, un logo o lo que se desee.

Photoshop tiene configurados de salida varios motivos para hacer pruebas, que se pueden seleccionar en la interfaz que queda justo a la derecha.

Podemos seleccionar cualquier motivo y probar a pintar, para ver que se hace un mosaico con el motivo, en vez de pintar con un color homogéneo.

Definir un motivo personalizado
Podemos definir nosotros mismos los motivos que hagan falta para hacer nuestros diseños y para ello simplemente tenemos que hacer una selección y luego seleccionar el menú "Selección / Definir motivo". Entonces nos aparecerá una ventanita para que demos un nombre al motivo, con una muestra de la imagen que hemos seleccionado y a partir de la cual se va a crear el motivo.

Luego, con el bote de pintura, configurada la herramienta con la opción "Motivo", podremos pintar con un mosaico con el motivo que acabamos de hacer. Para ello utilizaremos la herramienta bote de pintura tal cual habíamos explicado en el caso de pintar con un color plano.

En la imagen anterior mostramos cómo creamos un motivo con el logotipo y en la imagen siguiente veremos cómo resultaría pintar con ese motivo sobre un espacio delimitado por un área curva:

Eso es todo lo que les queríamos decir sobre el bote de pintura, que es una herramienta muy básica y de fácil uso, pero que en Photoshop tiene interesantes opciones de configuración, lo que amplia bastante sus funcionalidades.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • Página 1 de 1
  • 1
Búscar: