D I S E Ñ O W E B C O N A D O B E D R E A M W E AV E R

Framework de Spry

El framework de Spry es una biblioteca JavaScript que proporciona a los

diseñadores Web la capacidad de crear páginas Web que ofrezcan una
experiencia más completa a los visitantes. Con Spry, puede utilizar
HTML, CSS y una cantidad mínima de código JavaScript para incorporar
datos XML a los documentos HTML, crear widgets, como acordeones y
barras de menú, y añadir tipos distintos de efectos para varios elementos
de la página. El framework de Spry está diseñado para hacer el lenguaje
de formato simple y fácil de utilizar para usuarios con un conocimiento
básico de HTML, CSS y JavaScript.
Framework de Spry

Spry es una herramienta de adobe para implementar efectos web 2.0

sin esfuerzo, utilizando bibliotecas de javascript.
No se requieren complementos o módulos del lado del servidor.
Que es Javascript

JavaScript es un lenguaje de programación creado por Netscape con el

objetivo de integrarse en HTML y facilitar la creación de páginas interactivas
sin necesidad de utilizar scripts-CGI o Java. Es importante no confundir
JavaScript con Java.
JavaScript es un lenguaje de programación orientado a objetos, diseñado
para el desarrollo de aplicaciones cliente/servidor a través de Internet.
JavaScript permite desarrollar programas que se ejecutan directamente en el
navegador (cliente) de manera que éste pueda ejecutar determinadas
operaciones o tomar decisiones sin necesidad de acceder al servidor.
Lenguaje dinámico orientado a objetos basado en el paradigma prototipo-
instancia.
Generalidades de JavaScript
Modelo orientado al WWW
Elementos de una página HTML pueden causar un evento que ejecutará una acción.
Esa acción se ejecutará a través de una serie de sentencias JavaScript
Es un lenguaje interpretado
Parte de un conjunto limitado de objetos y clases
No permite interacción cliente-servidor, únicamente opera en el cliente
Comandos de JavaScript:
 Variables
 Expresiones
 Estructuras de control
 Funciones (bloques de sentencias)
 Clases, objetos y arrays (agrupaciones de datos)
Componentes del framework de Spry

Widgets de Spry

Efectos de Spry

Datos de Spry
Widgets de spry

Componentes web avanzados expresados ​en formato HTML básico, CSS

y un poco de JavaScript
La personalización y el estilo se realizan fácilmente utilizando sus
habilidades HTML y CSS existentes
Los widgets Spry son accesibles: responden a la navegación del teclado
y se degradan cuando se desactiva JavaScrip
Widgets de spry

Un widget de Spry es un elemento de página que permite la interacción

del usuario y, por tanto, ofrece una experiencia más completa. Un widget
de Spry consta de las siguientes partes:
Estructura de widget: Bloque de código HTML que define la
composición estructural del widget.
Comportamiento del widget: JavaScript que controla la respuesta del
widget a los eventos iniciados por el usuario.
Estilo del widget: CSS que especifica el aspecto del widget.
Widgets de spry

Widget de
Widget de Widget de barra paneles que
acordeón de menús pueden
contraerse

Widget de
Widget de Widget de
contraseña de
paneles en fichas selección
validación
Widget de acordeón

Un widget de acordeón es un conjunto de paneles

que pueden contraerse y que tienen la capacidad
para almacenar una gran cantidad de contenido en
un espacio reducido. Los visitantes pueden hacer
clic en la ficha del panel para mostrar u ocultar el
contenido almacenado en el acordeón. Los paneles
del acordeón se amplían o contraen en función de
las fichas que elijan los visitantes. Solamente
puede haber un panel de contenido abierto y visible
en un acordeón en cada momento
Widget de barra de menus

Es un conjunto de botones de menú de

navegación que muestran submenús cuando
el visitante de un sitio sitúa el puntero del
ratón sobre uno de ellos. Las barras de
menús permiten visualizar una gran cantidad
de información de navegación en un espacio
reducido, y ofrecen a los visitantes una ida
de lo que esta disponible en el sitio sin
necesidad de realizar una navegación
exhaustiva. Dreamweaver permite insertar
dos tipos de widgets de barra de menús:
Verticales y horizontales
Widget de paneles que pueden
contraerse
Un widget de panel que puede contraerse
es un panel que puede almacenar
contenido en un espacio reducido. Los
usuarios pueden hacer clic en la ficha del
widget para mostrar u ocultar el contenido
almacenado en el panel de forma rápida
Widget de paneles en fichas

Es un conjunto de paneles que pueden

almacenar contenido en un espacio reducido.
Los visitantes pueden hacer clic en la ficha
del panel para mostrar u ocultar el contenido
almacenado en los paneles a los que desean
acceder. Los paneles del widget se amplían o
contraen en función de las fichas que elijan
los visitantes. Solamente puede haber un
panel de contenido abierto en un widget de
paneles de fichas en cada momento
Widget de selección

Es un menú desplegable que muestra los

estados valido y no valido cuando el usuario
realiza una selección. Por ejemplo, puede
insertar un widget de selección de validación
que contenga una lista de estados, agrupados
en diferentes secciones y divididos por líneas
horizontales. Si el usuario selecciona de forma
accidental una de las líneas de división en lugar
de uno de los estados, el widget de selección de
validación devuelve un mensaje al usuario
indicando que la selección no es valida
Widget de contraseña de validación

Es un campo de texto de contraseña que puede

utilizarse para a aplicar reglas de contraseña (por
ejemplo, el numero y tipo de caracteres) . El
widget proporciona mensajes de advertencia o
error en función de lo que haya introducido el
usuario
Efectos Spry
Los efectos de Spry son mejoras visuales que permiten que una página
web sea mucho más vistosa e interactiva, son utilizados constantemente
para crear efectos animados como transiciones, además son aplicables a
elementos HTML.
Le permite agregar transiciones suaves y elegantes a casi cualquier
elemento de su página
Se usa una sola línea de JavaScript para agregar un efecto a su página
Los efectos pueden resaltar información , cree transiciones animadas, o
altere visualmente un elemento de página por un cierto período de tiempo
Efectos Spry
• Spry incluye estos efectos:

Aparecer /
• Hace que aparezca o desaparezca el elemento.
Desvanecer

Resaltado • Cambia el color de fondo de un elemento.

• Simula la persiana de una ventana que sube o

Persiana
baja para ocultar o mostrar el elemento.

Deslizar • Mueve el elemento hacia arriba o hacia abajo.

Aumentar /reducir • Aumenta o reduce el tamaño del elemento.

• Simula la agitación del elemento de izquierda a

Agitar
derecha.
• Hace que desaparezca el elemento por la esquina
Arrinconar
superior izquierda de la página.
Datos de Spry
Transforma fuentes de datos complejas en un formato de fila / columna familiar que se
puede colocar en cualquier lugar dentro de su página
Las fuentes de datos compatibles incluyen XML, JSON y HTML
Agregue fácilmente regiones dinámicas a Su página que controla la recuperación y
colocación de datos sin escribir ningún JavaScript.