jueves, 3 de julio de 2008

Animación Tradicional (1)

Vamos a repasar los conceptos principales de Flash que nos permitirán realizar animaciones tradicionales. Además, estableceremos la terminología que usaremos en el resto de explicaciones.
En la imagen he remarcado los conceptos fundamentales que vamos a utilizar.

Lo primero que tenemos que entender es que Flash nos va a permitir realizar animaciones tradicionales de forma sencilla y que nos va a asistir en el proceso.

La animación tradicional consiste en la reproducción de una serie de dibujos de manera consecutiva y a una velocidad adecuada de forma que de la sensación de movimiento. La cantidad de dibujos que se reproducen en un segundo viene definida por el valor FPS (Frames Per Second o Fotogramas Por Segundo). Esta, tradicionalmente, era de 24 fps, aunque en algún momento dado alguien se dió cuenta de que a 12 fps el acabado no estaba mal. Durante muchos años, los japoneses han realizado producciones a 8 fps. Para mantener los tiempos, cuando se trabajaba con 12 fps, se proyectaba cada fotograma 2 veces (animation on twos) y cuando se trabaja con 8 fps se proyectaba cada fotograma 3 veces (animation on threes). Es de cajón que cuando se usa 24 fps se proyecta cada fotograma 1 vez (animation on ones).

Realmente, la fluidez de la animación no va a venir sólo definida por los fps que utilicemos, sino que la disposición de los elementos en el espacio para cada momento va a ser también un factor determinante.

Cuando en un instante de tiempo exista información (aunque dicha información sea que el instante de tiempo permanece vacío), tendremos una secuencia (o al menos lo llamaremos así...). Una secuencia será un periodo de tiempo en el que se presenta un conjunto de elementos. La primera secuencia con la que nos podemos encontrar es una secuencia de un fotograma vacio. Será un rectángulo blanco con un circulo blanco en su interior. Si extendemos la duración de esa secuencia insertando fotogramas (NO 'fotograma clave', sino 'fotograma'), veremos que en el último fotograma de la secuencia aparece un rectangulo blanco con un rectángulo blanco en su interior.

Si, en cualquier momento, dibujamos algo en cualquiera de los fotogramas que componen una secuencia, ese dibujo se verá reflejado en todos los fotogramas que componen la secuencia. Esto es que realmente la secuencia nos define el instante de tiempo en el que permanece una determinada composición, como hemos dicho antes. En el caso de que el fotograma no esté vacio, se representa con un rectángulo de color gris que puede contenes un circulo negro en su interior (en caso de que sea el primer fotograma de la secuencia, al que nos referiremos como fotograma clave) o un rectángulo blanco (que nos indicará el último fotograma de la secuencia).

NOTA: Se pueden insertad fotogramas haciendo click con el botón derecho en la línea de tiempos (en la horizontal de la capa correspondiente), a través de los menús Insertar / Línea de tiempo / Fotograma o pulsando F5.

Obviamente, las secuencias que tienen una duración de un sólo fotograma no presentan un rectángulo blanco en su último fotograma. Como sólo tienen un fotograma nos mostrarán el indicador de inicio de secuencia.

Revisemos más cosas que he querido remarcar en la captura de pantalla...
  • Capas: Cuanto más arriba se encuentra una capa en la línea de tiempos, más cerca se encuentra del espectador. Es decir, las capas superiores se superponen a las capas inferiores en la animación. Podemos hacer click en los puntos que hay a la derecha del nombre de las capas para obtener distintos resultados. El lápiz nos indica que es la capa que estamos editando. El ojo que la capa se encuentra visible en este momento. El candado, que la capa es editable. Y el cuadrado de color, pasa al modo de representación de contornos y vuelve. En este modo, el contorno de los elementos que hay en la capa es lo único que veremos, y lo veremos en el color que nos marque el cuadrado. Podemos hacer doble click en el cuadrado para cambiar el color y en el nombre para cambiar el nombre.
  • Hay tres números que nos indican el número del fotograma sobre el que está el cabezal, la velocidad de reproducción y el instante de tiempo en el que comienza a visualizarse el fotograma sobre el que está el cabezal.
  • En el escenario podemos ver un área blanca, que corresponde con el área de la pantalla de reproducción y un área gris, que es el espacio que utilizamos para realizar las animaciones y que, en principio, no será visible a la hora de reproducir. Es como... el backstage.
Destacar también que la inserción de un fotograma clave en una capa realizac una copia identica, aunque independiente, del último fotograma presente antes del nuevo.

Con lo que hemos visto ya podemos realizar sencillas animaciones tradicionales, dibujando en cada fotograma un elemento.

Un ejemplo sencillo de animación tradicional [VER]

viernes, 6 de junio de 2008

Esta semana en useit.com

Jackob Nielsen responde a una curiosa pregunta. Cuando llegamos a un punto en el que el programa (la web) nos pide confirmación o cancelación ¿En qué orden hemos de poner las opciones?

La pregunta parece un poco chorra a priori, y la explicación es bastante buena. Sin embargo si que me he planteado cosas similares en ocasiones. Sobre todo con la colocación de botones para aceptar/cancelar, guardar/descartar, etc. en las aplicaciones web que tratan con bases de datos.

Es una reflexión interesante.

"Páginas" y "Sitios" web.

Una pregunta frecuente de los alumnos es la diferencia entre sitio web y página web.

A pesar de que en alguna ocasión he entrado en discusiones que no llevan a ninguna parte sobre lo que es y lo que no es una página web, consideramos "página web" a un documento de texto interpretable por el navegador. No considero que un archivo TXT sea una página web, ni que un documento PDF sea una página web, ni que una imagen JPG (o PNG, o GIF o de cualquier otro formato que el navegado entienda) sea una página web. Las páginas web son archivos escritos en uno de los lenguajes destinados a ello: HTML, XHTML y similares. Puntualizaremos que cuando hablo de estos documentos hablo de la información final que le llega al navegador. Obviamente, un documento en cualquier lenguaje de programación con los que trabaje el servidor y que, en última instancia, envia al navegador un documento interpretable despues del procesado de un programa, podemos considerarlo una página web (dinámica, en este caso).

Un sitio web es un conjunto de páginas web que, normalmente, tiene una estructura de hipertexto. Es decir, que se puede navegar entre ellas mediante el uso de vinculos. Hace referencia a una ubicación concreta. El sitio en si

En resumen, una página web es un documento HTML (o cualquier cosa que termine en el envio de un archivo HTML, XHTML o similar al navegador) mientras que un sitio web hace referencia a la página o páginas web que se localizan en una ubicación concreta.

domingo, 18 de mayo de 2008

Centrado Vertical (I)

Hace unas semanas un alumno me enseñó un trabajo en el que se producía automáticamente el centrado vertical de un elemento enrelación al tamaño de la ventana. Un análisis detallado del documento (que no funcionaba exactamente igual en todos los navegadores en los que lo testeamos) indicaba que se utilizaba la propiedad de alto con valor porcentual para definir un elemento <TABLE>.
Lo primero que me pasó por la cabeza fue: "Si funciona... ¿porqué no lo estoy usando?". Y pensé en lo de siempre: "No es estandar". Pero el caso es que me mosqueó porque no fui capaz de encontrar ninguna referencia (tampoco busqué exhaustivamente) al asunto.
Luego me di cuenta de que el Dreamweaver no ofrece la posibilidad de cambiar directamente el alto de la tabla mediante la propiedad height...



A ver si tengo tiempo algún día de estos y hago un estudio más exhaustivo sobre el tema.

lunes, 28 de abril de 2008

Esta semana en useit.com

Jakob Nielsen comenta los problemas que genera alinear los elementos de un menú a la derecha.

Realmente interesante. La lectura se realiza de izquierda a derecha, con lo que la alineación a la derecha hace que el seguimiento de los menús sea más dificil para el usuario. Por otra parte, y aplicando lo mismo, recomienda que las palabras más importantes (una o dos) sean las primeras de la línea, par facilitar la comprensión.

Personalmente podríamos plantearnos poner la alineación a la derecha y utilizar sólo una palabra en cada item para simplificar la lectura. Pero la palabra sequiría empezando en la parte izquierda y seguiría siendo molesto de leer.

Mitos y hechos del JPG

Interesantísimo artículo sobre el formáto JPG.
En el mismo se comentan algunas de las creencias generales sobre el formato. Comento algunas de las más interesantes (y puede que añada alguna cosa...).

Abrir, guardar, guardar como...

Abrir un JPG no produce perdidas. Cualquier acción que no implique el guardado de un JPG, no produce perdidas en el mismo.

Guardarlo si. Si lo guardamos repetidas veces en la misma sesión de trabajo, no se acumulan las perdidas. Si lo cerramos y lo abrimos antes de guardarlo si que se acumularán las pérdidas. La opción de Guardar como no es recomendable para renombrar el archivo, puesto que algunos programas recomprimen la imagen. En resumen, el JPG pierde calidad cada vez que es abierto-modificado-guardado.

NUNCA es conveniente utilizar el JPG como fuente original de material gráfico. Es mejor usarlo para obtener visualizaciones del trabajo donde la calidad no sea determinante. Aunque

Porcentaje de compresión y pérdidas

Los niveles de compresión NO son estandar. No se obtienen (mejor dicho, no tienen porqué obtenerse) los mismos resultados en programas distintos aplicando el mismo nivel. Una vez guardado un archivo con un nivel de compresión, se producen perdidas y esas perdidas NO son recuperables a partir del archivo resultado. Es decir, no podemos subir el nivel de calidad abriendo una imagen en JPG y guardándola con otro valor de compresión. Y como ya vimos en otro post, la calidad más alta sigue produciendo pérdidas.

Descarga y representación

Los JPG progresivos NO se descargan antes que los ordinarios. Lo que pasa es que se percibe antes de qué imagen se trata, por el tipo de carga. La representación de JPGs requiere mayor procesado, puesto que hay que decodificarlos. Esto es bastante obvio, si el JPG comprime, luego tendremos que descomprimir...

Cuando usar JPG

Por decirlo de alguna manera que sea sencilla de entender, el JPG es útil, y sus pérdidas aceptables, cuanto mayor número de colores existe en la imagen. Esto es, fotografías e ilustraciones con variaciones grandes de color como degradados y gradientes. Para las imágenes con pocos colores, los textos, los logotipos y similares no es práctico. En esos casos la distorsión puede llegar a perjudicar seriamente al visionado de la imagen.

domingo, 27 de abril de 2008

Perdidas en el JPG

Todo el mundo (o todo el mundo que se dedica al diseño gráfico) sabe (o debería saber) que el formato JPG es un formato que tiene pérdidas. Lo que no todo el mundo sabe es que es un formato que SIEMPRE tiene pérdidas. Hay quien se piensa que si guardamos un JPG a su calidad máxima nos evitamos las pérdidas al coste de aumentar el tamaño del archivo hasta un punto en el que deja de ser práctico usar el JPG.

Bien, esto es un pequeño experimento que podéis realizar para comprobar que el JPG a máxima calidad tiene pérdidas.

Hacemos una imagen nueva, por ejemplo un cuadrado en el que rellenamos cada una de las mitades con un color. Por un lado tenemos el valor rgb (0,255,0) y por el otro el valor rgb (255,0,0). Es decir, verde y rojo.



Esta imagen es un PNG (sin pérdidas) del archivo que hemos creado. Si lo abrimos con un editor y comprobamos los colores, obtenemos los valores esperados. Ahora bien, si guardamos la misma imagen en formato JPG con la máxima calidad que nos permite el Photoshop, a primera vista no notamos nada raro... bueno. Si que notamos algo raro en el navegador y posiblemente en la vista previa del archivo y en su previsualización en la selección, pero si lo abrimos con el Photoshop parece que está completamente igual al original.



Si utilizamos la varita mágica con tolerancia 0 para ver si existe o no distorsión en la imagen... vemos que no aparece. Cada zona es completamente uniforme y no hay colores "intermedios" entre ellas. Pero no todo es como parece. Si usamos el selector de colores y comprobamos los valores nos llevaremos una sorpresa. Ahora son los valores rgb (0,255,1) y (254,0,0). ¡Pérdidas! Cierto es que son pérdidas asumibles, vamos, que no parece importar demasiado. Pero son pérdidas al fin y al cabo.

En cuanto a la compresión. El JPG ocupa unos 44kb y el PNG unos 52kb. Esto es que el JPG ocupa el 84% de lo que ocupa el PNG. En este caso nos ahorramos 12kb y los colores son uniformes... aunque no los originales. En otros casos habría que mirar que es lo que ocurre. :D

Si revisamos los valores de los colores con el selector de colores veremos que

Guardar archivo de hoja de estilos como...

En las últimas semanas he impartido algunas clases en las que hemos realizado algunos ejercicios paso a paso. Y una de las cosas curiosas que, si bien no me quitaba el sueño porque se me olvidaba al acabar la clase, me mosqueaba cada vez que ocurría era el hecho de encontrarse con que el archivo de estilos que acabamos de asociar resulta llamarse "Sin Título.css" en luar del nombre que hemos escrito. El misterio fue resuelto en cuando tuve un ratito y me puse a comprobarlo. El problema viene con esta ventana:


El tema es que si escribimos el nombre del archivo css que queremos crear en la zona verde, automáticamente se actualiza el campo rojo. Pero si realizamos la operación a la inversa no ocurre lo mismo. Con lo que si sólo establecemos el nombre del archivo CSS en la parte superior y hacemos click en "Guardar", nuestro archivo se llamará "Sin título.css".

No se si es un bug del Dreamweaver CS3 propiamente dicho o no, el caso es que ahí queda el aviso. :D

Posicionamiento de menús

Jakob Nielsen, si no me equivoco, comentaba en uno de sus libros que la mayoría de los usuarios esperan encontrarse en las webs unos esquemas bastante concretos en cuanto a la disposición de la información. Un título en la parte superior, un menú (en el lateral izquierdo si es vertical y en la parte superior si es horizontal) y un área principal en la que se introduzcan los contenidos.

Si bien la distribución habitual puede ser alterada en ocasiones concretas para dar un poco más de versatilidad a los diseños, los resultados pueden ser catastróficos.

¿Y a qué viene esto? El motivo principal es una conversación que tuve con uno de mis alumnos de diseño web en la que analizamos una web que su empresa había contratado. Siguiendo unas nociones básicas de usabilidad, se había planteado el layout de la web de forma que se esperaba que la página web se situara siempre en el centro de la pantalla. El problema era que al calcular el alto del área de visibilidad se había planteado partiendo de alguna suposición incorrecta, quien sabe porqué. Si miramos las recomendaciones de Dreamweaver relacionadas con el área visible en la pantalla con, pongamos, una resolución mínima de 800x600 (Si bien se supone que el 80% de los internautas disponen de resoluciones superiores, se sigue recomendando no olvidarse de esta resolución (http://www.w3schools.com/browsers/browsers_stats.asp)) vemos que el tamaño vertical recomendado es de 420 pixels. En este caso alguien había decidido que si 600 era el alto máximo, con 500 y poco bastaría para la correcta visualización. El resultado... uno de los clientes había llamado a la empresa preguntando por los accesos a la web, dado que el menú le desaparecía por la parte inferior de la pantalla.
La verdad es que cualquier persona con dos dedos de frente, ante la falta de menús, se habría planteado la existencia de contenido en la parte oculta inferior de la ventana, sobre todo porque la barra de desplazamiento de la izquierda nos indicaría que se existe más información. Pero en cuanto a diseño y usabilidad NUNCA debemos asumir nada. Sobre todo en lo que se refiere a sitios comerciales. En este caso un cliente había contactado con la empresa para preguntar por los menús desaparecidos... ¿Cuantos clientes o posibles clientes no habrán hecho la llamada?


A 27 de Abril de 2008 la web de la que hablo es esta:
http://www.vicentegandia.com/

Me consta que la empresa está avisada de este comportamiento y de que lo cambiarán. Y por cierto, también quieren deshacerse de la animación de introducción y la "portada". Una mala práctica de la que hablaremos otro día. :D

Anexo: Otra cosa que está fatal en esa web es el enorme globo rojo que aparece sobre la elección de idioma y sobre el que no se puede hacer click. ¡Terrible!

viernes, 25 de enero de 2008

Adobe Photoshop CS3 y Photoshop for Coffee

Actualmente, contamos en el aula con la versión CS3 de Adobe Photoshop. Lo primero que tenemos que hacer a la hora de trabajar con este programa (al margen de adquirirlo e instalarlo, claro está...) es hacernos con la última versión del manual. El manual puede ser descargado gratuitamente desde la página web de Adobe. En concreto, desde la sección de Soporte/Documentación/Photoshop. En la página a la que llegamos, encontramos un PDF que contiene el manual de Photoshop y Photoshop Extended. No es necesario imprimir el manual, pero si que es interesante tenerlo a mano.

Normalmente es una buena idea revisar la documentación de los programas que queremos aprender a utilizar. Por ejemplo, en este caso, si comenzamos a leer el capítulo 1 (ese que siempre parece que no tenga nada de interés) descubriremos que entre tanta información sobre Adobe y el resto de programas de la Suit CS3 y de todo lo que acompaña o deja de acompañar a Photoshop CS3 encontramos una bonita referencia a los tutoriales que Adobe ofrece sobre el programa.

En definitiva, ¿qué es lo que deberíamos resaltar de este post y del capítulo 1 del manual?

  • Hacerse con el manual del programa es más que interesante.
  • Existen unos bonitos tutoriales en video que nos enseñan a utilizar este y otros programas de Adobe.
  • Si ya conocíamos Photoshop (hasta la versión anterior), es interesante echarle un ojo al apartado que nos indica las Novedades en esta versión, que luego pasa lo que pasa...

Adobe Flash CS3 y Flash for Coffee

Actualmente, contamos en el aula con la versión CS3 de Adobe Flash. Lo primero que tenemos que hacer a la hora de trabajar con este programa (al margen de adquirirlo e instalarlo, claro está...) es hacernos con la última versión del manual. El manual puede ser descargado gratuitamente desde la página web de Adobe. En concreto, desde la sección de Soporte/Documentación/Flash. En la página a la que llegamos, encontramos un montón de documentación relacionada con Flash. De todos esos archivos sólo nos interesa (de momento) la última versión de la Guía de Usuario - Utilización de Flash. No es necesario imprimir el manual, pero si que es interesante tenerlo a mano.

Normalmente es una buena idea revisar la documentación de los programas que queremos aprender a utilizar. Por ejemplo, en este caso, si comenzamos a leer el capítulo 1 (ese que siempre parece que no tenga nada de interés) descubriremos que entre tanta información sobre Adobe y el resto de programas de la Suit CS3 y de todo lo que acompaña o deja de acompañar a Flash CS3 encontramos una bonita referencia a los tutoriales que Adobe ofrece sobre el programa.

En definitiva, ¿qué es lo que deberíamos resaltar de este post y del capítulo 1 del manual?
  • Hacerse con el manual del programa es más que interesante.
  • Existen unos bonitos tutoriales en video que nos enseñan a utilizar este y otros programas de Adobe.
  • Si ya conocíamos Flash (hasta la versión anterior), es interesante echarle un ojo al apartado que nos indica las Novedades en esta versión, que luego pasa lo que pasa...

Flash for Coffee

La idea de Flash for Coffee nació durante el curso académico 2007-2008 en el que una alumna llegó a un acuerdo conmigo por el cual yo le prepararía unas notas sobre los conceptos de Flash que habíamos visto y ella me invitaría a un café. Durante un tiempo, estuvo online una web en la que se explicaban aquellos conceptos, pero debido a diversos problemas (particularmente la falta de tiempo unida a la muerte súbida del servidor en el que se alojaba la página...) no estuvo demasiado tiempo en marcha. Este año retomo la idea con intenciones un poco más a largo plazo. A ver que pasa... :D