ELEMENTOS DE UNA PAGINA WEB

he creado en keinote una presentación con todos los elementos necesarios para hacer una pagina web, yo he capturado estos 3 que son los que mas me llamaban la atención, y este es  mi resultado final, he buscado imágenes y descripciones de los elementos que nos pedía.

ANALISIS DE UN SITIO WEB

He realizado un mocupk , para la pagina web principal de apple, y también en keinote una estructura de sus paginas, enlaces, fotos, etc.. he buscado diferentes paginas y este ha sido mi resultado final.

EMPRESA ARIES

empresa aries

Tiene todos los procesos de artes gráficas , al entrar esta la sala de producción donde se abarca todo y la administración de la empresa, donde de ahí salen todos los proyectos y dicen como hacer, lo que necesitan, las cuentas , presupuestos etc

en el siguiente departamento esta preimpresion donde esta las plantas y ordenadores para poder maquetar los pedidos del cliente, libros, tarjetas etc, y maquinas para imprimir.

Y el ultimo departamento es el de impresión es el mas grande tiene todas las maquinas de impresión, la maquina de guillotina, y también donde esta todo el proceso acabado que es el almacén donde esta el resultado final de los proyectos.

Mi opinión personal, es que me ha gustado mucho pero siempre tiro mas por el diseño ya que me gusta dibujar, pero es una empresa bonita y grande , aunque en estos momentos estaba en obras, mi sala favorita fue la de producción, donde espero en futuro acabar, el trato fue excelente y un sitio muy bonito.

oso panda

esta realizado con círculos formas vectoriales y lápiz y degradados echo en flash.

formas digitales

He creado con una interpolación de forma el texto de tratamiento de imagen y lo acerque y lo aleje, y los demás textos los separe y los realice con una  interpolación de movimiento, rotación de 5 y este ha sido mi resultado final.

las que giran son con interpolación de movimiento

y la que se hace mas pequeña interpolación de forma

ROTACIÓN , BOTE

• Una interpolación de movimiento está formada por un objeto de destino en todo el grupo de interpolación. La interpolación clásica permite interpolar dos fotogramas clave que contengan instancias de símbolos iguales o distintos.
• Las interpolaciones de movimiento consideran texto a un tipo interpolable y no convierten los objetos de texto en clips de película. Las interpolaciones clásicas convierten objetos de texto en símbolos gráficos.
• No está permitido utilizar scripts de fotograma en un grupo de interpolación de movimiento. Las interpolaciones clásicas sí admiten el uso de scripts de fotograma.
• Ningún script de objeto de un destino de interpolación puede cambiar en el grupo de interpolación de movimiento.
• Los grupos de interpolaciones de movimiento se pueden estirar y cambiar de tamaño en la línea de tiempo. Se tratan como un solo objeto. Las interpolaciones clásicas están formadas por grupos de fotogramas que se pueden seleccionar independientemente en la línea de tiempo.

interpolacion clasica

 Las interpolaciones clásicas son un método habitual de crear animaciones en Animate. Estas interpolaciones se parecen a las nuevas interpolaciones de movimiento, aunque resultan más complicadas de crear y ofrecen menos flexibilidad. No obstante, las interpolaciones clásicas proporcionan algunos tipos de control en la animación que las interpolaciones de movimiento no ofrecen. La mayoría de los usuarios prefieren trabajar con las interpolaciones de movimiento más nuevas, pero algunos siguen queriendo usar las interpolaciones clásicas. 

INTERPOLACION

Que es una Una interpolación de movimiento es una animación que se crea especificando distintos valores para una propiedad de objeto en distintos fotogramas. Animate calcula los valores de dicha propiedad entre los dos fotogramas. En inglés, la interpolación recibe el nombre de “tween” que, a su vez, viene de las palabras “in between” (intermedio).

Por ejemplo, puede colocar un símbolo a la izquierda del escenario en el fotograma 1 y moverlo a la derecha del escenario, al fotograma 20. Cuando se crea una interpolación, Animate calcula todas las posiciones intermedias del clip de película. El resultado es una animación del símbolo que se mueve de izquierda a derecha, desde el fotograma 2 al fotograma 20. En cada fotograma intermedio, Animate desplaza el clip de película una veinteava parte de la distancia del escenario.

Un grupo de interpolación es un grupo de fotogramas de la línea de tiempo en el que el objeto tiene una o más propiedades que cambian con el tiempo. Un grupo de interpolación se muestra en la línea de tiempo como un grupo de fotogramas en una sola capa con fondo azul. Los grupos de interpolación se pueden seleccionar como un solo objeto y se pueden arrastrar de un lugar a otro de la línea de tiempo (también entre capas). Sólo es posible animar un objeto del escenario en cada grupo de interpolación. Este objeto se denomina objeto de destino del grupo de interpolación.

PROTITPADO

Que es un prototipado de un sitio web (wireframing) consiste en hacer un bosquejo de cómo será su aspecto  (interfaz o interface). Para ello, podemos utilizar un simple lápiz y papel, o una pizarra blanca, o un software de prototipo.

La idea es centrarnos en cómo se organizará la información (arquitectura de la información) y tener un punto de partida sobre el que hacer un diseño más avanzado o definitivo.

Al trabajar con un prototipo (wireframe) nos centramos en los aspectos más importantes, como qué elementos se incluirán, dónde, cómo se organizarán,  usabilidad. Es fácil descubrir durante el prototipado algún elemento que falta o sobra, o darse cuenta de que un elemento no puede ubicarse donde teníamos pensado porque dificulta la usabilidad.

La ventaja del prototipado es que es muy rápido de crear, modificar y es económico. Puesto que diseñar directamente el sitio web tal y como será y realizar modificaciones sobre él implica un coste más elevado, el prototipado nos ayuda a definir desde el principio cómo se organizarán los elementos y a reducir modificaciones innecesarias en el diseño real, reduciendo costes.

Otra ventaja importante es que al tratarse de un simple bosquejo es fácil comentarlo con el cliente y que éste forme parte pudiendo dibujar él mismo sobre el papel.

En la siguiente figura vemos parte del prototipo de una aplicación web para móviles. Como podemos comprobar, son simples dibujos como los hechos a lápiz y papel, pero son de gran ayuda para tener una idea clara de los elementos que habrá en cada página.

mascara de relleno y efecto

• El texto del delfin se crea con una mascara pones la imagen el texto encima y mascara y sale este resultado.
• Flores, creas un dibujo en un lado y lo agrupas comando + g,  y convertir en mapa de bits, luego la frase la seleccionas y dos veces botón derecho separar, modificar y trazado y este es el resultado.
• Filtros en el menu de filtros en la parte derecha  a bajo puedes modificar la palabra o letra como quieras y este ha sido mi resultado final.

fotogramas

he creado una serie de fotograbas del 1 al 9 en bucle que ha sido insertado fotograma clave en cada 10 segundos de espacio añadimos texto y lo ponemos en bucle y este ha sido mi resultado final

animación herramienta deco

he creado esta animación con la herramienta deco que tiene diferentes pinceles animaciones de humo , flores, edificios etc... lo he creado en diferentes capas, para que los fotogramas aparezcan en donde yo quiero y no desaparezca toda la imagen, este ha sido mi resultado final.

botón pulse en flash

 este ha sido mi resultado final, he creado las estrellas con la forma vectorial en una primera capa y después en otra capa he añadido las letras en diferentes fotograbas y después vas borrando las letras para que solo se vea una en esa frecuencia de fotograma, he cambiado los colores de las letras como menciona la base del ejercicio.

circunferencia en flash

he creado una circunferencia a traves de insertar fotograma clave e ir rellenando el circulo para que acabe completo, como en mi resultado final, he copiado y pegado el inicio y desde ese punto añadiendo en el circulo la forma.

banner HTML5maker y Bannersnack

he creado una cuenta en la pagina mencionada en el titulo y de esa misma he ido cogiendo objetos, estampas, dibujos etc,, que tenia la pagina era bastante fácil e intuitiva, con HTML5maker el otro banner (los dos vinculados ) a mi blog , creado con una cuenta en la pagina bannersnack, para mi gusta es mejor la otra, por que te deja hacer varios banner en esta te equivocas y no puedes hacer nada, aunque tiene plantillas y todo esta muy bien.

Pagina Web con Fireworks

Este ha sido mi resultado final, he creado recuadros y óvalos  vectoriales he creado textos en cada uno de los óvalos con el contenido para la pagina web, los textos los he realizado con estilos de texto creativo, y el fondo lo he realizado con un degradado con olas y un fondo con corazones con un borde suavizado, 

en el marco que hemos puesto ha sido en ventana y formas automáticas, y en su defecto el marco que he modificado y he puesto un relleno de patrón de cuadros morados
a continuación creamos un cuadro con unas medidas ya dadas en el ejercicio para hacer el marco de texto donde van las ventanas de los productos y con unos cuadros vectoriales hicimos 6 e importamos las imágenes en 5 estados diferentes.

LEARDERBOARD ANIMADO

He realizado un banner en movimiento  para que salga en movimiento  ponemos en la pestaña de abajo GIF ANIMADO WEBSNAP 128.
Creamos 6 estados minimo y con el botón derecho del ratón seleccionamos crear botón animado y hacemos clim en animación y movemos los parámetros que nos salen para ponerlo a nuestro gusto y ponemos una duración de 40 segundos es lo que yo he puesto, este ha sido mi resultado final.

ROLLOVERS

he creado con el banner de crossmediaun botón que enlaza al blog de Maria he creado dos estados y en el primero das al botón derecho> insertar división rectangular, vas a menú ventana > comportamientos insertar rollovers simple.
debajo pones en url el link de la pagina que quieres abrir, en alt: blog Maria, en destino: _blank, en este caso seria pulsando la estrella irías a la pagina seleccionada.

CAMBIAR ESTADO CON EL RATÓN POR ENCIMA


crear una forma vectorial y en el estado dos crear otra igual y cambiar la forma , luego en el estado botón derecho  insertar estado rollovers simple en la imagen vectorial insertas división rectangular, a continuación te vas a ventana> comportamientos  y das a mas y rollovers simple , damos a vista previa y ya estaría este es mi resultado final.

que es un rollovers: cuando el puntero de un ratón  se sitúa sobre un gráfico, dicha acción desencadena la visualización  de otro gráfico  La activación es siempre el objeto Web ( una división, una zona interactiva o un botón).

BOTÓN FIREWORKS

 mi resultado final he creado un botón con los estados que he capturado y que al pasar cambien de color, en el recuadro que realizamos con el botón derecho añadimos botón y pulsamos encima del botón y en los estados vamos cambiando las diferentes formas del botón.

ACCESIBILIDAD Y USABILIDAD

USABILIDAD: se trata de logar que los visitantes encuentren rápidamente aquello que buscan, con el mínimo de esfuerzo.

"usabilidad es un atributo de calidad que mide que tan fácil son de usar las interfaces de usuario"

A tener en cuenta estos puntos:

• Crear jerarquía visual
• Dar el control al usuario
• Facilitar la interacción 
• Aprovechar las convenciones y llamar a las cosas por su nombre
• Simplificar

ACCESIBILIDAD: Acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

limitaciones:

• Visuales
• Motrices
• Auditivas
• Cognitivas

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

://www.once.es/new