Rollovers

Un rollover es un efecto simple que se utiliza en muchísimas páginas web y que consiste en cambiar, de manera dinámica (sin recargar la página) alguna propiedad de un elemento HTML.

Rollover: Crear accesos directos a una página web en Fireworks

A partir de nuestro banner Skyper de samsung añadiremos un enlace a la página de un compañero.

Para ello seleccionaremos un objeto de nuestro banner (en mi caso la estrella que esta en la esquina de mi banner) y pulsaremos el botón derecho y escogeremos la opción de crear zona interactiva. Se creará automáticamente un recuadro azul.

   

Seguidamente copiaremos nuestro enlace web en la parte inferior en la cual aparece un cuadro de diálogos, en la cual podemos poner la información a la cual ira ese enlace.

En mi caso colocaré el enlace de mi compañera Carolina Zarco: http://preimpresioncarol.blogspot.com.es/

Si observamos hay un apartado que dice "destino" ese apartado indica como quiere que funcione el enlace cuando lo utilicemos

Rollover - Cambiar de estado posando el raton encima de la animación

Creando en cada estado la paosicion que queremos que obtenga nuestra imagen pulsaremos el botón derecho para crear la animación, escogiendo la opción de insertar division rectangular

 

En la ventana de complementos Creamos el rollover

Y nuestro rollover estaría finalizado.

Crear un botón en Fireworks

Para realizar botones animados se pueden seguir los siguientes pasos:

1)  Crear rectángulo y colocar el texto deseado dentro.

2) Seleccionamos y sobre él pulsamos el botón derecho y seleccionamos Elegir botón.
3)  Doble clic sobre el botón para acceder a los Estados del mismo. Aquí podremos agregar efectos a los distintos estados del botón.


Los botones animados tienen diferentes estados ellos son:

Estado Arriba: El estado normal de botón. Utilice las herramientas de dibujo y de edición para crear el estado arriba del botón.

Estado Sobre: Aparece cuando el cursor está sobre el botón. Utilice las herramientas de dibujo y de edición para crear el estado sobre del botón.

Estado Abajo: Crea una imagen.

Estado sobre y abajo: Cuando el botón está presionado, si se sitúa el cursor sobre él, seguirá cambiando de aspecto.

4) Apretamos F12 para ver la vista preliminar en el navegador.

 

Modos de color

Modo RGB - Colores Luz

RGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en diferentes dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.

Modo CMYK

El modelo CMYK se basa en la absorción de la luz. El color que presenta un objeto corresponde a la parte de la luz que incide sobre éste y que no es absorbida por el objeto.

 

Animacion del Banner de CrossMedia Samsung

Firework tambien puede tener animaciones e interacciones, las cuales las denominamos símbolos, que explicare los pasos para poder crearlos y a continuación mostraré una práctica que he realizado con los simbolos.

1. Con el raton seleccionamos la imagen que desea convertir.
   
   
2. Buscamos la opcion de  Modificar-símbolo-Convertir en símbolo.
   El cuadro de diálogo Convertir Símbolo abre.
   
   
3. Escriba un nombre para el símbolo en el cuadro de texto Nombre.
   
   
4. Seleccione el tipo de símbolo: Gráfico, Animación, o botón.
5. Para almacenar el símbolo de modo que pueda ser utilizado en varios documentos, seleccione la casilla de verificación Guardar en Biblioteca común.
   
   
   
   
    
    
   Esta práctica esta realizada a partir de el símbolo de animación las cuales tienen diferentes formas de crear una animación
   
   

   Estados

   Número de estados de la animación. Se pueden especificar hasta 250 con el deslizador o introducir un número en el cuadro Estados. El valor predeterminado es 5.

   Mover

   Distancia, en píxeles, que cubre el objeto en movimiento (sólo en el cuadro de diálogo Animar). El valor predeterminado es 72, pero no hay límite. El movimiento es lineal y no existen estados clave (a diferencia de Flash y Adobe Director).

   Dirección

   Dirección, en grados de 0 a 360º, en que se mueve el objeto (sólo en el cuadro de diálogo Animar). También puede modificar los valores de movimiento y dirección si arrastra los tiradores de animación del objeto.

   Escala

   Cambio en tamaño del símbolo de principio a fin, expresado como porcentaje. El valor predeterminado es 100%, pero no hay límite. Para escalar un objeto del 0% al 100%, el objeto original debe ser pequeño; se recomienda utilizar objetos vectoriales.

   Opacidad

   Grado de aparición o desaparición paulatinas de principio a fin. Los valores están comprendidos entre 0 a 100, el valor predeterminado es 100%. Para crear un fundido se requieren dos instancias del mismo símbolo: una para que aparezca y otra para que desaparezca.

   Rotación

   Grado de rotación de principio de final. El rango de valores es de 0 a 360º. Se pueden introducir valores más altos para realizar más de una rotación. El valor predeterminado es 0º.

   A la derecha y A la izquierda

   Dirección en que rota el objeto: en el sentido de las agujas del reloj (A la derecha) o en el sentido inverso a las agujas del reloj (A la izquierda).

Accesibilidad y Usabilidad de la Web

Accesibilidad:

La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web. 

Niveles de Accesibilidad

• Prioridad 1: son aquellos puntos se tienen que cumplir. Es un requisito básico, ciertos grupos de usuarios no podrán acceder a la información del sitio Web si no se cumple dicha prioridad.
• Prioridad 2: son aquellos puntos que se deberían cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.
• Prioridad 3: son aquellos puntos que se deberían cumplir. De no cumplirse algunos usuarios tendrían dificultades para acceder a la información.

Hay tres niveles de accesibilidad

Nivel de conformidad "A": todos los puntos de verificación de prioriodad 1 se satifacen.
Nivel de conformidad "Doble A": todos los  puntos de verificación de prioridad 1 y 2 se satisface.
Nivel de conformidad "tripe A": todos los puntos de prioridad de 1, 2 y 3 se satisfacen

Usabilidad:

Se trata de lograr que los visitantes encuentren rápidemente aquello que buscan, con el mínimo esfuerzo.


La usabilidad y la accesibilidad se pueden encontrar en algunas páginas web que lo certifican

Por ejemplo en la página del ministerio de España que podemos observar que al final de su página web encontramos el certificado.

 

http://www.mecd.gob.es/portada-mecd/

Otro ejemplo es la página de el metro de madrid, en la cual tambien aparece el certificado

 

https://www.metromadrid.es/es/index.html

Banners creados en Firework

Banners que he realizado a partir de mis Crossmedia de Samsung, hice de dos tipos los cuales uno es hhorizontal y vertical, los he realiado en la aplicacion de Firework usando fusiones y colocando textos e imagenes en mapa de bits y vectoriales.

Firework

Firewrok es un editor de gráficos vectoriales y mapa de bits. Está pemsadp para que los desarrolladores web puedan crear rápidamente interfaces web y prototipos de websites.

Fireworks se integran con otros productos de Macromedia, como Dreamweaver, Flash, FreeHand y Director, y con otros editores HTML y aplicaciones gráficas de uso frecuente para ofrecer una solución Web global. Los gráficos de Firework pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se utilice.

Su formato nativo es .fw.png

Formas de optimizar:

Web 216: Para imágenes más complejas, hasta 216 colores todos seran seguros para la web.

Websnap 256: Convierte los colores que no son seguros a los seguros cercanos con un máximo de 256.

Websanp 128: Convierte los colores que son seguros a los seguros cercanos con un máximo de 128.

Adaptable 256: Contiene solo los colores utilizadfos en la gráfica que estas exportando con un máximo de 256.

Animado websnap 128: Define como una animacion Gif y también se acerca a los colores seguros hasta 128.

Panel de herramientas:

Esta dividio en seis apartado es los cuales están las herramientas de selección, las de mapa de bits, las de vectores, de web, de colores y las opciones para ver nuestro lienzo.
















Utilización del Inspector de propiedades.

El Inspector de propiedades le permite editar las propiedades de la selección, herramienta o documento actuales. De forma predeterminada, el Inspector de propiedades está acoplado en la parte inferior del área de trabajo.

 

Este programa tiene características del photoshop por lo que es más facil utilizarlo.

Práctica:

Utilizando las herramientas de Vector, colores haremos una práctica de tutorial

Formas vectoriales con máscaras de recorte

En esta practica utilizaremos imagenes vectorales que aparecen en photoshop, que aparece en la parte inferior de nuestra paleta de herramientas.

En esta herramienta podemos encontrar varias formas pero para hacer nuestra práctica utilizaremos la forma de flecha

Práctica:

Para empezar nuestra práctica le añadiremos color de fondo un pequeño trazo igualmente con color.

 

 Una vez hecha añadiremos todas nuestras flechas y haremos máscaras de corte acoplando la imagen dentro de ellas

Haremos eso con todas nuestras imagenes y le añadiremos un texto en medio y así finalizamos nuestro documento. 

 

Práctica Madame Butterfly

En esta práctica utlilizaremos la herramienta de máscara de capa junto con la mascaras de relleno.

Primero colocaremos nuestra imagen de fondo que en este caso es el de las mariposas, encima de ella haremos una capa de relleno con degradado y le bajaremos la opacidad

Después haremos una capa de relleno uniorme a la cual le taparemos con la seleccion de rectangulo la parte mas grande.

 

 Colocaremos la imagen de la mujer japonesa y le aplicamos un modo de fusión y una máscara y le haremos un degradado.

Para finalizar escribimos nuestro texto y así quedará nuestra imagen