PÁGINA WEB CON FIREWORKS

En esta práctica he realizado el diseño de una página web a partir de Fireworks.

Una vez creábamos el documento en fireworks teníamos que seguir una serie de instrucciones que se nos mostraban en un PDF que nos servía de guía :

La práctica consistía en crear una especie de banner ( digo esto por que creamos varios recuadros que nos llevan a distintas partes ) con varios elementos.

A la derecha de la colocamos cinco recuadros en los cuales colocaremos seis opciones y a la derecha, en cada uno de los cuadros blancos correspondientes con dichas opciones ( que eran sillas, mesas, armarios y camas ).

Para poder hacer la interactividad lo que teníamos que hacer era insertar la división en todos los nombres y en los cuadrados blancos correspondientes, enlazábamos los recuadros grandes con los pequeños y poníamos la opción one-click.

ETIQUETAS HTML

En esta práctica he aprendido a realizar varias etiquetas para crear un código HTML.

Para ello he utilizado el programa Dreamweaver que nos permite crear un HTML en el que pondremos todas las etiquetas y podremos hacer una previsualización para ver como va a ser el resultado final.

Esto es lo que nos aparece al abrir el programa.

Como vemos aparece el código HTML que nos permite que todo lo que escribamos se convierta en un HTML, la cabecera, una opción para poner el título que queramos al documento, la cabecera, y el cuerpo del documento en el que pondremos todas las etiquetas.

Como he dicho antes, en el apartado que pone "Body" tendremos que colocar todas las etiquetas para que luego se puedan ver.

La práctica que he realizado ha sido la siguiente :

En esta práctica hemos puesto en práctica todas las etiquetas que he aprendido.

Lo primero que hice fue colocar el título y el subtítulo que aparecen al principio, que se colocaban con las siguientes etiquetas :

Os explicaré en que consisten algunas de las etiquetas que aparecen en la imagen :

<h1> = Sirve para poner títulos.

<br/> = Sirve para separar párrafos.

<p> = Sirve para poner párrafos.

<hr/> = Crea una línea horizontal. 

<FONT SIZE=> = Sirve para cambiar el tamaño de las letras.

<strong> = Sirve para poner negrita.

Lo siguiente que hice fue poner el enlace que lleva a la página principal del instituto y la imagen que está debajo de ella, que pinchando sobre ella lleva a este blog.

Los códigos que he utilizado para hacerlo son :

<a href=> = Sirve para crear un enlace.

<img src=> = Sirve para poner una imagen.

Width y Height = Sirve para indicar el tamaño en ancho y alto de la imagen.

Por último colocábamos los dos párrafos que faltaban, y con esto terminaba la práctica.

<i> = Sirve para poner las letras en cursiva.

     

INTERPOLACIÓN DE MOVIMIENTO

INTERPOLACIÓN DE FORMA

En esta ocasión he utilizado el programa de flash para crear varias prácticas utilizando la interpolación de forma

La interpolación de forma se hacía desde la línea del tiempo, cuando le dábamos a la opción de interpolación de forma aparecía una línea verde, en la cual al principio de ella había que poner la forma inicial que queríamos, y al final la forma en la que queríamos que se convirtiese nuestra forma del principio.

Esto no solo se limita a las formas poligonales, sino que también se puede hacer con letras. En este caso he hecho que una letra pase a ser una forma y esa forma vuelva a ser una letra. ( En mi caso el principio es una T, luego pasa a un cuadrado y por último a una S ).

Esto lo he hecho separando el texto con la opción de separar, ya que sin esa opción no te deja realizar la interpolación de forma. Una vez hecho esto lo único que tuve que hacer fue hacer lo mismo que en la práctica anterior, pero esta vez creando tres fotogramas claves en los que irían las dos letras y el cuadrado.

Y por último he creado una esfera y gracias a la interpolación de forma he hecho que pareciese que la luz que tenía la esfera se desplazaba.

Esto también era muy sencillo, simplemente hice un degradado radial en un círculo y luego moví la parte central del degradado hacía un lado con la herramienta de selección de degradado. Y por último, con la misma herramienta movíamos esa misma parte del degradado hacía el lado contrario, y en la parte final de la línea de interpolación de forma.

HERRAMIENTA DECO

En esta práctica he utilizado la herramienta DECO para crear un dibujo con animación.

La herramienta DECO es una herramienta que nos permite crear varios dibujos, como edificios, flores, efectos de fuego o llamas...

Yo realicé un dibujo muy sencillo, simplemente hice los edificios y después le puso un efecto de fuego en movimiento para que diese el efecto de que los edificios se quemaban.

Después de hacer todo esto este fue el resultado :

BOTÓN PULSE

En la práctica de botón pulse creé una animación en la que tenían que ir apareciendo distintas letras que creasen la palabra PULSE. 

Para empezar con esta práctica creé un fondo de escenario amarillo y con la herramienta polystar hice todas las estrellas que ocupan el fondo de la composición.

Luego puse la primera letra que tiene que aparecer en la animación, la P, y en la línea del tiempo creé un fotograba clave al principio y un fotograba normal al final, hasta donde quería que se viese la letra.

Este proceso se hacía con todas las letras hasta conseguir que apareciesen seguidas una tras otra.

Este es el resultado que quedaba de hacer ese proceso con todas las letras : 

CIRCUNFERENCIA CON FLASH

Crear una circunferencia con flash es muy sencillo.

Para empezar cogí un punto de referencia que se nos daba y del que teníamos que crear la circunferencia.

Lo que hice con esa línea fue copiarla y pegarla creando un fotograma clave, después la modifiqué con la herramienta de selección directa y la coloqué después de la línea de referencia que se nos daba.

Se seguía este proceso sucesivamente, creando las líneas, modificándolas y poniéndolas en fotogramas claves para que al reproducir la animación pareciese que la circunferencia se fuese creando poco a poco.

Este es el resultado :

PRÁCTICA FOTOGRAMAS

En esta práctica utilicé la línea del tiempo para crear una animación en la que iban apareciendo distintos títulos.

Primero tenía que crear el texto, y después crear un fotograma para que apareciese ese texto.

Para hacer que apareciese el segundo texto tuve que cambiar el texto y crear un nuevo fotograma clave y después crear otro fotograma para marcar el final de esa animación.

Así sucesivamente hasta llegar al décimo fotograma.

APRENDER A DIBUJAR EN FLASH

En estas prácticas he utilizado Flash para realizar dos dibujos.

El primer dibujo que realicé fue una composición con un oso panda como protagonista.

Para realizar este dibujo lo primero que hice fue colocar el color azul como color de escenario, y colocar un cuadro de imagen de color verde para la hierba. 

Después, en una capa distinta creé los diferentes pájaros, y en otra capa las nubes a partir de la herramienta de forma, eligiendo la forma de óvalo y juntando varios de forma que pareciese una nube.

Lo siguiente que hice fue crear el sol, el cual creé utilizando la herramienta de forma ovalada, creando la esfera y dándole un degradado radial que fuese de amarillo a naranja.

Por último creé el panda, empezando por la forma de su cara, también creando un círculo y deformándolo hasta que pareciese la cara del panda. Luego hice las orejas, que eran dos óvalos y las coloqué. Y por último creé los ojos y la boca creando distintas formas.

El otro dibujo que realicé fueron 3 textos, cada uno hecho de una forma distintas.

El primero hecho con una máscara de recorte, el segundo igual, lo único que cambiaba era que tenía que crear el contenido que iba a llevar ( La fresa en mi caso ), y por último un texto que llevaba filtros.

BANNERS CON HTML5

En esta práctica he realizado un banner HTML5 a partir de un programa llamado HTML5 Maker.

Este es un programa que se usa exclusivamente para crear banners en HTML5, y es muy sencillo de utilizar. 

Para empezar vemos a la izquierda las pestañas en las que se dividirá nuestro banner, y también el tiempo que durarán hasta cambiar al siguiente. También nos permite realizar otras acciones como por ejemplo borrar una pestaña o copiar una que ya tengamos hecha.

En la parte superior del programa están las opciones para añadir texto e imágenes, además de otras opciones que nos permiten visualizar nuestro banner y otra que nos permite hacer zoom.

Y por último en la parte derecha encontramos todo lo necesario para modificar nuestras imágenes y textos, ya sea su tamaño, color, trazo... Incluso también una opción que nos permite poner un hipervínculo.

Por último publicábamos nuestro banner y al publicarlo nos permitía guardarlo y coger su código embebido.

Otro de los programas que podemos utilizar es bannersnack.

Este programa nos permite crear banners en HTML5 y en flash.

Este programa se parece mucho al anterior, en su parte izquierda encontramos las dsitintas pestañas que nos servirán para crear nuestro banner, al igual que en el programa anterior.

En la parte superior también encontramos las opciones para añadir texto, imágenes, visualizar el banner...

Y en la parte derecha encontramos también los ajustes que nos permiten modificar nuestro texto, imágenes y demás.

PROTOTIPO DE PAGINA WEB

El prototipado de una página web consiste en hacer un bosquejo o boceto de esa página para ver como será su aspecto y corregir errores antes de crear la página final. El prototipo de una página web se puede realizar a mano ( con una hoja y un papel ) o con un programa de prototipo, como por ejemplo NinjaMock, que es el que he utilizado en este caso.

Ahora explicaré como realizar el prototipo de una página web a partir de dicho programa.

Esa es la página que se nos abre cuando queremos crear un nuevo prototipo, como podéis ver yo ya tengo el mío creado. 

A la derecha aparecen todos los elementos que podemos utilizar para crear nuestro prototipo :

Entre estos elementos aparecen los típicos, como por ejemplo uno que te permite poner imágenes, textos, links... Pero hay otros más curiosos como por ejemplo algunos que te permiten poner calculadoras, mapas, gráficos... 

En la parte derecha de la página se muestran las propiedades del elemento que estamos utilizando : 

A partir de todos esos elementos cree un prototipo de página web, este es el resultado final :

Cuando estaba terminado había que guardarlo en HTML y en PDF :