Wow Slider Manual Diseño Web

APLICACIONES WEB CON EFECTOS DE MOVIMIENTO (WOW SLIDER)
Parte 1 - Añadiendo carpetas con imágenes o imágenes a tu presentación
Desde el Menú de Imagenes, seleccionar Agregar Imágenes.... Ir a la ubicación de la

carpeta desde la que te gustaría Agregar y seleccionar las imágenes. También puedes usar
las opciones Agregar Imágenes desde una carpeta..., Agregar Imágenes desde Flickr... y
Agregar Imágenes desde Photobucket.
WOW Slider incluirá entonces estas fotos. O, puedes arrastrar las Imágenes (carpeta) a la
ventana de la presentación de imágenes WOW Slider. La imagen es copiada a tu carpeta de
imágenes y agregada automáticamente al rotador de imágenes de tu sitio Web.
Si has incluido imágenes que no deseas que estén en la presentación de imágenes jQuery, es
fácil eliminarlas. Selecciona todas las imágenes que desees eliminar del rotador de fotos y
selecciona Eliminar Imágenes... en el menú Imágenes. Puedes elegir y tomar las imágenes
manteniendo pulsada la tecla CTRL mientras haces clic en las fotos que quieras.
Prof.: Henrry Septimo Pá gina 1

Parte 2 – Añadir una Leyenda o subtítulo
Cuando seleccionas una imagen, verás diversa información sobre ella, por ejemplo:
 Título - Cuando agregas Imágenes, su nombre aparecerá en Encabezado

automáticamente.
 Descripción - Puedes introducir cualquier comentario o texto acerca de la imagen en
la presentación de imágenes.
 Url - Puedes añadir un enlace para cada imagen en el rotador de imágenes de la
Web.
Parte 3 – Prestaciones para la edición
Con este Creador de Imágenes Deslizantes puedes fácilmente rotar tus imágenes usando los
botones "Rotar a la Izquierda" y "Rotar a la Derecha".

Haz doble clic en la foto para abrirla en tu editor de gráficos por defecto. Puedes ajustar el
color de las imágenes, así como corregir los ojos rojos y recortar las partes no deseadas de
una imagen.
Parte 4 - Propiedades del rotador de imágenes
En el menú del Rotador, seleccionar Propiedades o utilizar el botón "Propiedades", situado

en la barra de herramientas.
En la primera pestaña de la ventana Propiedades del Rotador puedes cambiar el nombre

de tu Rotador de fotos y activar/desactivar las siguientes propiedades: Título de la
diapositiva, Auto presentación de diapositivas, Descripción de la presentación, Mostrar
Anterior/Siguiente y Mostrar botones de navegación.
En la segunda pestaña de la ventana Propiedades del Rotador se pueden seleccionar las

plantillas, el tamaño y la calidad de las imágenes, seleccionar el efecto de transición, el
intervalo entre las diapositivas, la duración del efecto y cambiar la marca de agua.
Puedes establecer los distintos

tamaños de las imágenes exportadas.

Controlar la calidad de salida de la imagen en formato PNG y JPEG mediante la definición

de los parámetros “Calidad de Imagen” (0%... 100%).
Los efectos de transición disponibles son los siguientes:
Blinds efecto Basic efecto Squares efecto Fade efecto
Parte 5 - Publicando desde WOW Slider
Cuando estés listo para publicar online tu presentación de imágenes, o para probarla en una
unidad local, debes ir a "Galería / Publicar". Seleccionar el método de publicación:
'Publicar a carpeta', 'Publicar en un servidor FTP', Pegar la presentación de imágenes
jquery en la página HTML existente mediante la opción ‘Insertar a una página’, Guardar la
presentación de imágenes jquery como módulo de Joomla, o como un control deslizante
plugin de Wordpress.

CODIGO DE APLICACIONES
Codigo de palicacion Wow Slider por Defecto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ISEP-IARO YUNGAY</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="diseño de animacion, WOW Slider, javascript
slideshow, slideshow html" />
<meta name="description" content="diseño de animacion created with WOW Slider,
a free wizard program that helps you easily generate beautiful web slideshow" />

<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>

</head>
<body style="background-color:#CCFFCC">

<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/dsc00672.jpg" alt="PLANA DOCENTE" title="PLANA
DOCENTE" id="wows1_0"/></li>

<li><img src="data1/images/dsc00011.jpg" alt="PASACALLE POR ANIVERSARIO"

title="PASACALLE POR ANIVERSARIO" id="wows1_1"/></li>
<li><img src="data1/images/dsc00607.jpg" alt="ISEP-IARO" title="ISEP-IARO"
id="wows1_2"/></li>
<li><img src="data1/images/dsc01538.jpg" alt="ALUMNOS CACHIMBO 2014"
title="ALUMNOS CACHIMBO 2014" id="wows1_3"/></li>
<li><img src="data1/images/dsc00596.jpg" alt="CAPACITACION DE LOS ALUMNOS"
title="CAPACITACION DE LOS ALUMNOS" id="wows1_4"/></li>
<li><img src="data1/images/dsc00881.jpg" alt="TALLER DE REPARACIONES"
title="TALLER DE REPARACIONES" id="wows1_5"/></li>
<li><img src="data1/images/dsc01527.jpg" alt="AULA DE CLASES" title="AULA DE
CLASES" id="wows1_6"/></li>
<li><img src="data1/images/dsc01539.jpg" alt="CENTRO DE COMPUTO"
title="CENTRO DE COMPUTO" id="wows1_7"/></li>
<li><img src="data1/images/dsc01530.jpg" alt="TALLER DE ENSAMBLAJE"
title="TALLER DE ENSAMBLAJE" id="wows1_8"/></li>
<li><img src="data1/images/dsc01532.jpg" alt="MANTENIMIENTO DE PC"
title="MANTENIMIENTO DE PC" id="wows1_9"/></li>
<li><img src="data1/images/dsc01533.jpg" alt="TALLER DE REDES" title="TALLER DE
REDES" id="wows1_10"/></li>
</ul></div>
<div class="ws_thumbs">
<div>
<a href="#" title="PLANA DOCENTE"><img src="data1/tooltips/dsc00672.jpg" alt=""
/></a>
<a href="#" title="PASACALLE POR ANIVERSARIO"><img
src="data1/tooltips/dsc00011.jpg" alt="" /></a>
<a href="#" title="ISEP-IARO"><img src="data1/tooltips/dsc00607.jpg" alt="" /></a>
<a href="#" title="ALUMNOS CACHIMBO 2014"><img src="data1/tooltips/dsc01538.jpg"
alt="" /></a>
<a href="#" title="CAPACITACION DE LOS ALUMNOS"><img
<a href="#" title="TALLER DE REPARACIONES"><img
<a href="#" title="AULA DE CLASES"><img src="data1/tooltips/dsc01527.jpg" alt=""
/></a>
<a href="#" title="CENTRO DE COMPUTO"><img src="data1/tooltips/dsc01539.jpg"
alt="" /></a>
<a href="#" title="TALLER DE ENSAMBLAJE"><img src="data1/tooltips/dsc01530.jpg"
alt="" /></a>
<a href="#" title="MANTENIMIENTO DE PC"><img src="data1/tooltips/dsc01532.jpg"
alt="" /></a>
<a href="#" title="TALLER DE REDES"><img src="data1/tooltips/dsc01533.jpg" alt=""
/></a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.net">image slider jquery</a> by
WOWSlider.com v5.5</span>
<a href="#" class="ws_frame"></a>

</div>

<script type="text/javascript" src="engine1/wowslider.js"></script>

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

Aplicación Html Complementario (básico)
<marquee bgcolor=BLACK widht=200% heigth=60% behavior="alternate"><FONT

COLOR=#FFFFFF SIZE=8>INSTITUTO SUPERIOR DE EDUCACIÓN PÚBLICO -
"IGNACIO AMADEO RAMOS OLIVERA"</MARQUEE></FONT>
<TABLE BORDER=4 WIDTH=100%>

<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>PRINCIPAL
<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>HISTORIA
<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>CONVENIOS
<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>VISION-
MISION
<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>CARRERAS
<TH ALIGN=CENTER BGCOLOR=YELLOW><font color=blue size=6>ADMISIÓN
</table>
<br>
<img src="escudo.jpg" width=12% height=5% align="left">
<p align="justify"><font color=blue size=7>El Instituto Superior de Educación Público
“Ignacio Amadeo Ramos Olivera” de Yungay, es una institución educativa líder en la
formación de profesionales de calidad para enfrentar los retos y exigencias del mundo
globalizado, dentro de los intereses de la Educación Popular, comprometido con el
desarrollo a nivel personal en armonía con su medio natural y social a través de la
innovación de ejes, práctica de la creatividad, investigación y proyección social a la
comunidad como reflejo de todo el proceso educativo.</p></font>

Wow Slider Manual Diseño Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Wow Slider Manual Diseño Web

Cargado por

Copyright:

Formatos disponibles

APLICACIONES WEB CON EFECTOS DE MOVIMIENTO (WOW SLIDER)

Parte 1 - Añadiendo carpetas con imágenes o imágenes a tu presentación

Desde el Menú de Imagenes, seleccionar Agregar Imágenes.... Ir a la ubicación de la

Prof.: Henrry Septimo Pá gina 1

Parte 2 – Añadir una Leyenda o subtítulo

 Título - Cuando agregas Imágenes, su nombre aparecerá en Encabezado

Parte 3 – Prestaciones para la edición

Prof.: Henrry Septimo Pá gina 2

Parte 4 - Propiedades del rotador de imágenes

En el menú del Rotador, seleccionar Propiedades o utilizar el botón "Propiedades", situado

En la primera pestaña de la ventana Propiedades del Rotador puedes cambiar el nombre

En la segunda pestaña de la ventana Propiedades del Rotador se pueden seleccionar las

Puedes establecer los distintos

Prof.: Henrry Septimo Pá gina 3

Controlar la calidad de salida de la imagen en formato PNG y JPEG mediante la definición

Los efectos de transición disponibles son los siguientes:

Blinds efecto Basic efecto Squares efecto Fade efecto

Parte 5 - Publicando desde WOW Slider

Prof.: Henrry Septimo Pá gina 4

Codigo de palicacion Wow Slider por Defecto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Prof.: Henrry Septimo Pá gina 5

<li><img src="data1/images/dsc00011.jpg" alt="PASACALLE POR ANIVERSARIO"

<a href="#" class="ws_frame"></a>

Prof.: Henrry Septimo Pá gina 6

<script type="text/javascript" src="engine1/wowslider.js"></script>

Aplicación Html Complementario (básico)

<marquee bgcolor=BLACK widht=200% heigth=60% behavior="alternate"><FONT

<TABLE BORDER=4 WIDTH=100%>

Prof.: Henrry Septimo Pá gina 7

También podría gustarte