El gif animado es una buena opción para la web, ya que su peso es bastante reducido, y nos permite llegar mas rápido al usuario, ademas de que tenemos posibilidades como el acceso a los celulares, lo cual no es posible atravez de las animaciones en flash.
Para hacer un gif animado lo primero que hay que hacer es crear un nuevo documento en fireworks del tamaño que se desea la animación. Importamos a imagen y la optimizamos, en este caso utilizaremos 3 imágenes, las cuales cambiaran cada determinado tiempo, también podemos exportar texto o ilustraciones. Una vez optimizadas, las guardamos como jpg.
Los fotogramas van a crear los momentos de las animaciones. Abrimos los 3 archivos ya optimizados, con el tamaño deseado y en la parte de abajo, existe la opción de abrir como untitled o como animación, elegimos la animación y automáticamente se convertirán en states de una misma imagen, la similitud con los procesos anteriores de botones es igual, con la diferencia de que esta vez podremos manipular el tiempo de cada una de ellas.
En la parte de abajo de las imágenes nos aparece un cuadro de herramientas en donde esta el play, para que podamos visualizar como esta quedando nuestra animación. en el cuadro de los states, tenemos la opción de modificar el tiempo que tendrá cada fotograba. Para reducir su peso, elegimos la opción de no transparencia y comenzamos a optimizarlo hasta lograr un buen resultado con un bajo peso de las imágenes. Antes de guardar nuestra animación, debemos cambiarla a la opción de gif animado, de no ser así, no nos reconocerá la animación el servidor. Lo guardamos como images only, y lo arrastramos a un explorador para ver la animación.
Nuestro gif no debería pesar mas de 100 kb, un buen ejemplo es la pagina de www.santande.com.mx, lo primero en cargarse en la pagina son las animaciónes en gif, lo que mas tiempo tarda, son las animaciones flash.
Para realizar una animación básica en fireworks, vamos a utilizar de nuevo el panel de los states, veremos lo que se conoce como interpolación de movimiento. Como sabemos, cualquier animación se compone de puntos críticos de movimiento, es decir, el inicio y el final de una acción, o el inicio y final de la animación. En este caso necesitamos el inicio de un objeto y el final de su movimiento. No debemos olvidar la planeación, resulta extremadamente importante a la hora de animar, ya que los estados guardaran la información de atrás hacia adelante, un error nos costaría regresar a cada uno de los cuadros, o estados para mandar hacia adelante o hacia atrás el objeto.
Los pasos para animar serán los siguientes: Seleccionamos el objeto y lo convertimos a símbolo eligiendo la opción de gráfico. lo colocamos en su posición final y seleccionamos ambos objetos, damos click derecho y vamos a la opción de convertí to symbol, ahí encontramos la opción de tween instantes o interpolación de movimiento, nos pregunta en cuantos cuadros queremos animar, seleccionamos el numero y la opción de distribuir en los states.
Podemos seguir haciendo este proceso cuantas veces queramos, siempre tomando en cuenta que las acciones se guardaran de atrás hacia adelante, lo guardamos como gif animado y listo lo podemos visualizar en cualquier explorador.
Una vez realizados las animaciones, las podemos exportar como htm, y subir a nuestra pagina en dreamweaber, en algún frame adaptado a este tamaño.
domingo, 11 de septiembre de 2011
FRAMES
FRAMES
Los frames sirven para colocar la diagramación de una página web. En el siguiente ejercicio utilizaremos 4 frames.
Para comenzar, se debe realizar una previa maquinación de la página. Usaremos 4 divisiones de las cuales una será el cabezal, otra contendrá los botones, otra tendrá el contenido, y por ultimo el pie de pagina.
El tamaño completo de la pagina será de 800x600. La maquetación será la siguiente:
Cada uno de estos frames, los salvamos como png en fireworks, identificandolos en una carpeta raiz previamente creada. Una vez salvados los png, se exportan como elementos htm, cuidando de exportarlos como html and images, guardando las imagenes en una carpeta.
En dreamweaver, abrimos una nueva página, en site; new site, en la pestaña de avanzado ponemos el nombre del sitio y lo dirigimos a la carpeta raíz.
Una vez creado la pagina html, se abrira automaticamente la carpeta de “files” con todos los elementos que estan dentro de la carpeta raíz.
Esta vez vamos a trabajar en modo diseño, abrimos el panel de layout, aqui se estructura la diagramación de la pagina, y se insertan los frames, tambien se pueden insertar en window, insert, frame..
La diagramacion de una pagina siempre se maneja del lado izquierdo superior al derecho inferior. Al elegir los frames, se despliega un menu en el cual elegimos el “top frame” ponemos el titulo y listo, tenemos nuestro primer frame.
Necesitamos dividir la parte de abajo en 2, para esto, debemos seleccionarlo y le insertamos un nuevo frame, en este caso, “left frame”, otra forma, es abriendo la ventana de frames, en donde se ve una pequeña maqueta de la pagina.
Una vez armados los frames, nos dirigimos al icono de las imagenes que eta en la barra de common, y le damos en exportar fireworks html, o bien, ir al menu, insert, image objects, y ahi esta el icono de fireworks html.
Una vez que abrimos las imagenes, elegimos el archivo htm previamente creado en fireworks, que corresponda al frame creado en html. Salvamos cada uno de los frames. El conjunto de todos los frames, se guarda como frameset, este lo guardamos como index. Cuyos frames se encuentran previamente guardados.
En page properties, se puede cambiar el color de fondo de cada uno de los frames. Mientras tanto, abrimos 3 nuevas paginas en fireworks, con las medidas del main frame, es decir, 600x400, y exportamos los 3 documentos como htm. Estos seran los contenidos de los botones.
En dreamweaber, seleccionamos el boton, uno, y en las propiedades, cargamos la opcion de link, y elegimos la pagina de contenido uno, la forma mas segura es tomando el pointfile y arrastrandolo al contenido de file. Luego, en el target debemos definir que queremos que carge en el main frame. Podemos ir pubicando en el boton con el mundo, para ir viendo como va quedando la página, y verificar que no haya ningun error.
Para poder ajustar los cuadros de los frames con los del contenido, vamos a modify, y en las propiedades de la pagina le ponemos cero a todas las dimensiones del sitio, asi se ajustaran.
Solo faltaria ajustar las medidas de los frames, subire esa informacion la proxima clase, ya que ahorita no la tengo.
Los frames sirven para colocar la diagramación de una página web. En el siguiente ejercicio utilizaremos 4 frames.
Para comenzar, se debe realizar una previa maquinación de la página. Usaremos 4 divisiones de las cuales una será el cabezal, otra contendrá los botones, otra tendrá el contenido, y por ultimo el pie de pagina.
El tamaño completo de la pagina será de 800x600. La maquetación será la siguiente:
En dreamweaver, abrimos una nueva página, en site; new site, en la pestaña de avanzado ponemos el nombre del sitio y lo dirigimos a la carpeta raíz.
Una vez creado la pagina html, se abrira automaticamente la carpeta de “files” con todos los elementos que estan dentro de la carpeta raíz.
Esta vez vamos a trabajar en modo diseño, abrimos el panel de layout, aqui se estructura la diagramación de la pagina, y se insertan los frames, tambien se pueden insertar en window, insert, frame..
La diagramacion de una pagina siempre se maneja del lado izquierdo superior al derecho inferior. Al elegir los frames, se despliega un menu en el cual elegimos el “top frame” ponemos el titulo y listo, tenemos nuestro primer frame.
Necesitamos dividir la parte de abajo en 2, para esto, debemos seleccionarlo y le insertamos un nuevo frame, en este caso, “left frame”, otra forma, es abriendo la ventana de frames, en donde se ve una pequeña maqueta de la pagina.
Una vez armados los frames, nos dirigimos al icono de las imagenes que eta en la barra de common, y le damos en exportar fireworks html, o bien, ir al menu, insert, image objects, y ahi esta el icono de fireworks html.
Una vez que abrimos las imagenes, elegimos el archivo htm previamente creado en fireworks, que corresponda al frame creado en html. Salvamos cada uno de los frames. El conjunto de todos los frames, se guarda como frameset, este lo guardamos como index. Cuyos frames se encuentran previamente guardados.
En page properties, se puede cambiar el color de fondo de cada uno de los frames. Mientras tanto, abrimos 3 nuevas paginas en fireworks, con las medidas del main frame, es decir, 600x400, y exportamos los 3 documentos como htm. Estos seran los contenidos de los botones.
En dreamweaber, seleccionamos el boton, uno, y en las propiedades, cargamos la opcion de link, y elegimos la pagina de contenido uno, la forma mas segura es tomando el pointfile y arrastrandolo al contenido de file. Luego, en el target debemos definir que queremos que carge en el main frame. Podemos ir pubicando en el boton con el mundo, para ir viendo como va quedando la página, y verificar que no haya ningun error.
Para poder ajustar los cuadros de los frames con los del contenido, vamos a modify, y en las propiedades de la pagina le ponemos cero a todas las dimensiones del sitio, asi se ajustaran.
Solo faltaria ajustar las medidas de los frames, subire esa informacion la proxima clase, ya que ahorita no la tengo.
Dreamweaver- HTML
HTML:Hypertext marc of language. El texto produce un access a otro documento. Htm se reefier a las cajas de texto, el diseño aplicado al texto, tamaños etc. son llamadas etiquetas, las cuales nos serán muy útiles mas adelante.
Para comenzar a utilizar dreamweaver, debemos comenzar a entender el código html. En la cabeza están las opciones que permiten la configuraciones de las opciones del cuerpo, se pueden aplicar estilos de cascada php, javascript, programación.
title, es el hombre del documento,
body es lo mas importante, todos los contenidos del texto,
y cerramos con html, la relación es la siguiente:
<HTML>
<HEAD>
<TITLE></title>
</HEAD>
<BODY>
</body>
</HTML>
cada etiqueta se debe cerrar con su predecesora en el orden anterior
HTML
Hyper: Aleatorio (vinculos)
Text: Contendio (texto imagen audio)
Markup: <etiquetas> configurar contenidos
Language: logica de estructuracion d
compilation (Display)
No importa el uso de las mayúsculas.
Hablando de usabilidad, resulta necesario el uso de paginas en html, ya que el peso es mínimo y pueden cargar en celulares, a diferencia de animaciones como flash o interactivos un poco mas pesados.
A continuación veremos algunas de las marcas mas básicas:
los encabezados
el parrafo
acentos
tipos de listas, viñetas y números
y las tablas
Nota: Para tener mas claras estas etiquetas, ver los enlaces de los documentos que subió el profesor a la página principal, ya que ahí vienen explicados con detalle.
Para comenzar a utilizar dreamweaver, debemos comenzar a entender el código html. En la cabeza están las opciones que permiten la configuraciones de las opciones del cuerpo, se pueden aplicar estilos de cascada php, javascript, programación.
title, es el hombre del documento,
body es lo mas importante, todos los contenidos del texto,
y cerramos con html, la relación es la siguiente:
<HTML>
<HEAD>
<TITLE></title>
</HEAD>
<BODY>
</body>
</HTML>
cada etiqueta se debe cerrar con su predecesora en el orden anterior
HTML
Hyper: Aleatorio (vinculos)
Text: Contendio (texto imagen audio)
Markup: <etiquetas> configurar contenidos
Language: logica de estructuracion d
compilation (Display)
No importa el uso de las mayúsculas.
Hablando de usabilidad, resulta necesario el uso de paginas en html, ya que el peso es mínimo y pueden cargar en celulares, a diferencia de animaciones como flash o interactivos un poco mas pesados.
A continuación veremos algunas de las marcas mas básicas:
los encabezados
el parrafo
acentos
tipos de listas, viñetas y números
y las tablas
Nota: Para tener mas claras estas etiquetas, ver los enlaces de los documentos que subió el profesor a la página principal, ya que ahí vienen explicados con detalle.
Suscribirse a:
Entradas (Atom)