domingo, 20 de noviembre de 2011
domingo, 13 de noviembre de 2011
jueves, 10 de noviembre de 2011
Práctica Botones y contenidos
Deberían aparecer los contenidos al elegir los botones "uno" "dos" y "tres", pero blogger no permite cargar los archivos. Estos son los contenidos:
domingo, 6 de noviembre de 2011
jueves, 27 de octubre de 2011
domingo, 23 de octubre de 2011
jueves, 20 de octubre de 2011
domingo, 16 de octubre de 2011
domingo, 11 de septiembre de 2011
GIF ANIMADO
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.
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.
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.
lunes, 29 de agosto de 2011
Tron
La película de tron, es mas que solo una película de ciencia ficción, para nosotros es una clara relación con la tecnología de hoy en día. Existe una diferencia tecnológica enorme entre la primera y la segunda película, de hecho la primer película es realmente muy avanzada para su tiempo, se hablaba del usuario y del programador como si nosotros hablásemos de viajes al espacio con casualidad. Dejando atrás la parte de los efectos en la primera y la segunda película, nos remitimos a un tema muy importante, la hipermedia, la relación del usuario con los programas y la importancia del programador con la autonomía del mismo.
En la película mencionan que lo que se busca es el beneficio de los usuarios, los cuales se apoyan en el programador. esto es parte de la funcionalidad que hemos estado viendo últimamente, nuestro trabajo es mas que solo presentar un medio de comunicación, es lograr que sea funcional para el usuario.
Desde el punto de vista del usuario es clara la relación que existe con los medios tecnológicos, en las características de la primera película, el director menciona que en ese momento no era una realidad, era un sueño que el usuario pudiese controlar de tal forma a una maquina, pero hoy en día el mundo tecnológico a alcanzado a ton, se ha logrado entrar en este mundo virtual, desde un blog, una pagina web, el facebook. La importancia de la interfaz se marca en esta clara relación entre el usuario y el programa.
En cuanto a la relación de la tecnología con el diseño, es claramente apreciada en el avance tecnológico de ambas peliculas, en el diseño no basta con crear algo "bonito" para el espectador, se trata de que funcione, de que atrape al usuario, así como lo hacen los medios interactivos, la usabilidad del medio permite que el usuario no lo abandone, no perder al espectador es algo importante para la publicidad el diseño y en este caso, la multimedia.
dentro de los medios digitales, los usuarios pueden intercambiar información, e interactuar, como los blogs los chats, esta comunicación ya no es solo una idea, ahora es una realidad, como lo dice la definición de hipermedia, ahora se puede obtener un acceso aleatorio no lineal a la información.
La autonomía del usuario es muy importante, el control sobre el programa debe ser un factor primordial para el programador. La mayoría de los programas de diseño son autónomos, aunque hay algunos otros que realizan actividades que superan al usuario. debe existir un cierto equilibrio entre lo que el usuario conoce para poder conrolar el programa y no al revés. Hay veces que parece que el usuario es también producto del ser humano. Es un poco como lo que veíamos en el video de prometeus, en realidad la tecnología se ha desarrollado a una velocidad impresionante, lo vemos con el avance de la película de tron hace 25 años, y la ultima.
jueves, 25 de agosto de 2011
Hipervinculos en Fireworks
Una vez mas, volvemos al termino de hiper, como ya vimos antes, este termino nos habla de la relación que hay entre algo, en este caso son los vínculos. Básicamente es la base de una pagina web. Desarrollar un vinculo nos permite manejar la dirección de nuestra página web, por medio de botones, para poder indicar hacia donde se quiere ir. Las opciones son variadas, puedes dirigir un botón hacia un link en una pagina nueva, o sobreescribir la que ya esta abierta.
En fireworks existen distintas formas de convertir en botón una imagen o un símbolo:
*Con la tecla F8 aparece el cuadro de diálogo donde elegimos si queremos un botón, un gráfico, o una animación
*ir a modify, symbol, convert to symbol.
Los botones tienen diferentes estados:
*Up: es el estado potencial del botón antes de que le des click.
*Over: es cuando se pasa el puntero sobre el botón, o se posiciona sobre de el; nos permite agregarle animaciones o efectos para mostrar el cambio, también es conocido como roll over, claramente este tipo de efectos pueden llegar a pesar, y volviendo al tema de la funcionalidad se recomienda no abusar de ellos, ya que puede que el usuario se canse y deje la página.
*Down: es el estado del botón cuando se ejecuta la acción, al presionarlo es decir al elegir la información.
*Active áreas: es la zona de acción que permite seleccionar al botón sin afectar a los demás.
Los botones se pueden hacer con las figuras y formas del programa, pero también se pueden importar imágenes en .png de programas como photoshop.
Una vez creado la forma, se selecciona y se siguen los pasos del principio para convertirlo a botón.
Con la herramienta de slice se selecciona el área activa, y al darle doble click al botón, se generan los states en la parte derecha de la computadora, o bien, entrando a ventana, states, en programas anteriores se les conocía como frames. En los states se generan 4 opciones diferentes, cada una para los tipos de botones que se explicaron en párrafos anteriores. Cabe mencionar que el cuarto estado no solo es la zona activa, sino que también puede ser lo que se conoce con over way down, esta opción es para marcar cuando el usuario ya selecciono la opción.
Como ejercicio se creo una nueva pagina en Fireworks de 800 por 600, para desarrollar nuestra interfaz, el ejercicio consiste en realizar una opción con tres botones, que nos direcciones a 3 páginas diferentes, cuyas opciones nos ofrezcan la opción de regresar o adelantar la la pagina.
Se deberán crear cuatro páginas, una será la principal, llamada intex, y las otras deberán estar guardadas en una carpeta raíz, la cual contendrá todas las imágenes y gráficos.
Una vez diseñadas las paginas, con sus respectivos botones, se seleccionan, y en la parte inferior se encontrara la opción link: en ella se pondrá el nombre del archivo al que se direccionara, agregando el .htm. En el caso de las paginas que tienen el botón de regreso a la pagina principal, se le deberá poner índex.htm.
Debajo del link, se encuentra otra opción, la de target, por el momento solo nos interesan dos de ellas. Target es a donde se va a desplegar la nueva pagina, es decir, si se abrirá en una nueva pestaña, o si se abrirá una nueva ventana. Blank, es la opción para una nueva pagina, mientras que self es sobre la misma pestaña.
Las otras dos opciones las utilizaremos mas adelante en dreamweaber.
Al finalizar, exportamos en htm y se guarda en la misma carpeta las imágenes.
Se pueden agregar nuevos estados, son como intervalos de tiempo, de momentos extras, o adicionales a los ya existentes, para la siguiente acción, lo agregaremos al final, sobre la pagina índex, si se le agregan estados a la pagina principal, estos se encontraran en un estado paralelo a los estados de los botones, aunque se podrán manipular por separado, uno será el tiempo de la interfaz y otro el de los botones.
Para poder relacionarlos, se deberá realizar un slice sobre lo que se le agrego al estado, se deberán copiar y pegar las imágenes en todos los estados.
En las herramientas de web tenemos la opción de slice tool, hay uno poligonal y otro rectangular, con el poligonal rodearemos los estados, y del centro del botón saldrá una especie de linea, esto se hace para relacionar los frames.
lunes, 22 de agosto de 2011
A muy grandes rasgos, lo que intenta mostrarnos Xavier Berenguer en esta lectura son las herramientas que nos brindan los programas interactivos. Se plantea el termino interface, esto es lo que relaciona al se humano con la comunicacion en la maquita, donde se le ordena y se le dirige. Se menciona como el exito de un programa a la calidad de su interface.
Nos menciona la historia de la interactividad. Llegando asi, al termino de Ted Nelson para definir el concepto de hypertext, lo cual es un acceso aleatorio a través de la web.
domingo, 21 de agosto de 2011
¿Que es multimedia?
Este blog tiene la intención de manterer un diario actualizado de la información aprendida en el curso. Comenzaremos por definir términos básicos, como lo son multimedia, hipermedia, http y html. El primer programa que comenzaremos a estudiar será Fireworks, el cual va totalmente dirigido a las páginas web.
¿Que es multimedia? ¿De donde deriva su significado? En realidad no es una respuesta muy complicada, lo complejo radica, en encontrar la relación que tiene con los temas de estudio de la materia. Multimedia no es mas que el termino que se designa para referirse a los distintos medios de expresión que se utilizan para comunicar información. Refiriéndonos así a los textos, imágenes, animaciones, vídeos, sonidos etc. Aunque se puede llamar multimedia a los medios electrónicos que permiten almacenar y presentar dicha información.
Al referirnos a la multimedia interactiva hablamos directamente del control que tiene el usuario sobre el contenido de lo que se desea ver, hipermedia es la interacción del usuario con los medios de comunicación, pero es una iteración aleatoria. El termino hiper, se refiere a la navegación, es así que hipertexto nos habla de la navegación entre ellos
Esto nos lleva a hablar sobre el termino http y html. HTML, HyperText Markup Language (Lenguaje de Marcado de Hipertexto) es el lenguaje mas utilizado para la elaboración de páginas web, con el se describe la estructura y el contenido en forma de texto.
HTTP de HyperText Transfer Protocol (Protocolo de transferencia de hipertexto) es el método más común de intercambio de información en la web, es así que se transfieren las paginas web a un ordenador.
Suscribirse a:
Entradas (Atom)