martes, 12 de marzo de 2019

¿Cómo es el diseño de una página WEB?
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web.  Un diseñador web tiene que ver con cómo crear y desarrollar un página web así también como los clientes interactúan con ella. Los buenos diseñadores web saben cómo poner juntos los principios de diseño para crear un sitio que se vea muy bien. También entienden acerca de la usabilidad y cómo crear un sitio que los clientes quieren navegar alrededor de porqué es tan fácil de hacer.
Requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos, característica destacable del medio.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
Los diseñadores web necesitan crean prototipos antes de poder llevar en vivo sus creaciones para así poder recibir la aprobación o feedback del cliente.  Estos prototipos son mayormente creados a través del uso de herramientas como HTML, CSS, Java, Ilustrador o photoshop.
Las etapas más fundamentales de un Diseñador de web para  poder crear una página web son las siguientes:
  1. La primera, es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
  2. La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a ‘escribir’ la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML.
  3. La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

Actualmente, los diseñadores web se están especializando en específicas áreas de diseño.  En particular se resalta los diseñadores en UI (interfaz del usuario) y UX (experiencia del usuario).  Estaré escribiendo sobre ello en otro articulo de mi blog.
Historia de la animación
Empecemos por la animación desde los inicios de la historia, creanlo o no, desde antes del film ya existían métodos para tratar de imitar el movimientos en las imágenes estáticas. Desde los inicios de la sociedad las personas buscaron formas de presentar historias de formas visuales y diversas en un mismo objeto, desde pinturas en vasijas griegas hasta la llegada de los tan famosos taumatropos, fenaquistiscopios y posteriormente los zootropos. Tal vez no es animación en su término literario pero se puede apreciar que ahí hay una intención de los principios en el mismo arte.
The Cheat- Panoply vase animation Project
Los Primeros pasos de la animación (1900-1930)
Todo empezó a principio del siglo XX, con diseños simples pero necesarios para la experimentación del nuevo arte, principalmente en Estados Unidos y Francia. Entre los estudios que más llamaron la atención se encuentra Bray Studios en Nueva York, creando muchos cortos animados y sirviendo punto de lanzamiento para la carrera artística de muchos caricaturistas.
En 1906 en Estados Unidos fue presentado al público el cortometraje mudo “Fases cómicas de las caras divertidas” o “Humorous Phises of Funny Faces” (título en su idioma original) basado en la popular obra de Vodevil y dirigido por J. Stuart Blackton. Considerada por algunos como la primera pieza animada usando stop-motion y fotografía para crear los movimientos.
Posteriormente en Francia saldría a la luz “Fantasmagorie” dirigida y producida por Émile Cohl en 1908, considerada la primer animación hecha por dibujo a manos también considerada por otros personas como la primera caricatura animada.
Años después en 1914 aparecería “Gertie el Dinosaurio” corto animado creado por Winsor McCay, también considerada por algunos como el primero cortó animado, pero en este caso Gertie posee algo que destaco en comparación de los dos anteriormente mencionados; esto fue que Gertie fue el primer  personaje animado con una personalidad y carácter. Posteriormente harían sus aparición “Felix el Gato” en 1919 y en 1928 realizó su aparición Walt Disney con “Steamboat Willie”, volviéndose la primera caricatura con sonido impregnado en el film y su primer gran éxito tras su apertura en 1923, lo cual traería una serie de grandes éxitos.
Gertie el Dinosaurio

Gertie el Dinosaurio, Winsor McCay (1914)
La era dorada de la animación Estadounidense (1930-1950)
Cuando las caricaturas eran presentadas en los teatros es el momento histórico donde se denomina la era dorada de la animación Estadounidense, de hecho es este punto donde Walt Disney (Mickey Mouse, el pato Donal y sinfonías animadas) Warner Brothers, MGM (Metro Goldwyn Mayer) y Fleischer (Betty Boop, Popeye, etc.) hicieron su escala a la popularidad.
Pero el mayor salto que se dio en ese entonces fue la creación del primer largometraje animado a color y con sonido. Estamos hablando de “Blanca Nieves y los siete enanitos”. Una tarea titánica en aquel entonces, debido a que la animación era realizada a mano, se estima que para su realización se utilizaron más de 1.5 millones de células para animar la película.
Blanca Nieves y los siete enanitos, Walt Disney (1937)

Blanca Nieves y los siete enanitos, Walt Disney (1937)
Nota: Blanca Nieves y los siete enanitos no es el primer largometraje animado, el primer largometraje animado es “El Apóstol” de Quirino Cristiano film creado en Argentina.

La era de la animación televisiva Estadounidense (1960-1980).
Ante el hecho de el público cada vez tenían más acceso a la televisión, se realizaron esfuerzos para que la creación de series animadas familiar, estas series poseían un estilo de animación limitado al desarrollo de ambientes y escenarios repetitivos. Para la mitad de la década de los 80 con ayuda del cable muchos estudios y cadenas de televisión empezaron la creación de canales infantiles, con el fin de poder captar la atención de los pequeños espectadores. Disney Channel, nickelodeon, cartoon network y otros realizaron su aparición.
Es en esta etapa cuando Hanna-Barbera lanza “Los Pica Piedra” en 1960 siendo la primera serie animada en poseer tiempo al aire en la franja “Prime-Time” en televisión. Un año más tarde lanzaron “El oso Yogi” para la televisión,  un spin-off de Huckleberry Hound otra producción de Hanna-Barbera.
Los Picapiedra, Hanna-Barbaera (1960)

Los Picapiedra, Hanna-Barbaera (1960)
Más adelante en 1972 se lanzaría a los cines “Fritz el Gato” siendo la primera película animada para adultos y alcanzando un estatus de culto junto con un gran número de logros particulares, como ser una película independiente en alcanzar un box office mayor a los 100 millones de dólares.

Era moderna de la Animación

El CGI (Imagen generadas por computadora) revolucionó la animación. Con el principal cambio en el que en vez de dibujar la animación esta se cambiaría por un modelo en 3D, casi como un stop-motion virtual. Una forma de animación que combina ambas y usa el 2D como un dibujo computarizado puede considerarse como animación asistida por computadora.
Por fechas importantes podemos mencionar que en 1984 fue revelada “Las Aventuras de Andre & Wally B” El primer cortometraje completamente realizado por computadora, cortometraje realizado por “El Grupo Gráfico” (1979), los precursores de Pixar.
Las aventuras de Andre & Wally B. Pixar (1979)

Las aventuras de Andre & Wally B. Pixar (1979)
1987 La creación de “Los Simpsons” fue el inicio de la mayor franquicia televisiva animada de todos los tiempos, creada por Matt Groening para la Fox Broadcasting Company. Es la serie animada / sitcom (comedia de enredo) más larga de los estados unidos y 22 años más tarde superó a Gunsmoke como la serie televisiva estadounidense en horario estelar con más duración.
En el año 1995 se estrena la primera película animada completamente por computadora “Toy Story”, resultando ser uno de los más grandes éxitos de ese año.
Posteriormente en el año 2001 se crea oficialmente la categoría “mejor película animada” en los premios de la academia (Los Oscars), siendo su primer ganador “Shrek” por el estudio DreamWorks dirigida por Andrew Adamson y Vick Jenson.
Shrek, DreamWorks, Oscars (2001)

Shrek, DreamWorks, Oscars (2001)


¿Cuántas formas de animación existen?


En este subapartado vamos a tratar los formatos de animación mas extendidos en la actualidad. El archivo puede contener una secuencia de fotogramas o la definición de trazos y sus deformaciones en el tiempo. Existen formatos de archivo específicos para animaciones y otros más genéricos que pueden contener diversos tipos de multimedia.
SWF
Se trata de un formato reducido de animación en Flash. Hasta Mayo de 2008 se trataba de un formato propiedad de Adobe, pero después su especificación se hizo completamente pública. Permite crear imágenes de programación actionscript. En la actualidad, su uso se está desaconsejando en detrimento de HTML5. Tal es el caso que navegadores como Google Chrome ya no soportan flash.
Una de las características que hicieron que el uso de este formato se extendiera por Internet es el reducido tamaño de los fichero .swf generados.

  • Permite crear animaciones, vídeos o incluso videojuegos.
  • Archivos SWF de pequeño tamaño.


Requieren tener instalado el Plugin Adobe Flash Player.
  • Actualmente su uso está desaconsejado.   
  • GIF
Es de los formatos más conocidos para contener imágenes y animaciones, sobre todo en la web. Fue creado en 1987 por CompuServe para dotar de un formato de imagen en color que fuera más eficiente que el formato RLE que estaban utilizando. Lo consiguieron gracias al algoritmo de compresión patentado LZW. Podemos ver un ejemplo en la Figura 1.
Es un formato de imagen con compresión sin pérdida, esto significa que al pasar a otros formatos de compresión sin pérdida la calidad de la imagen no se reduce. Cuenta con una paleta de 256 colores (8 bits), lo cual implica que las imágenes que requieran entre 2 a 256 colores no pierdan calidad, pero sí lo hacen las imágenes con más de 256 colores.

  • Paleta de 256 colores.
  • Compresión sin pérdida.
  • Permite animar imágenes.
  • Permite el uso del canal alfa para transparencias.

  • Portabilidad
  • Facilidad de transmisión
  • Compatibilidad
  • Gratuito (actualmente, la patente del algoritmo LZW ha caducado).

  • Baja resolución
  • Baja calidad
  • Baja precisión


GIFV 
es un nuevo formato creado por Imgur para sustituir el formato GIF. Consiste en emplear y comprimir videos en formato MP4, que se repiten infinitamente, para crear las animaciones. 
¿La ventaja? la calidad de las animaciones es mucho mayor (no está limitada a 256 colores) mientras que el tamaño se mantiene reducido (por la compresión de MP4). En el siguiente enlace podemos ver un ejemplo de una animación que en formato GIFV ocupa 3,4 MB mientras que en GIF ocupa 50 MB.
Actualmente no se trata de un estándar, pero gracias a la alta popularidad de Imgur no sería extraño que se acabase convirtiendo en uno.
Resultado de imagen para ANIMACION GIF TV
SVG
SVG (Scalable Vector Graphics) es una especificación para describir gráficos vectoriales en 2 dimensiones basados en el formato XML. SVG almacena líneas, curvas, degradados, colores y el resto de la información necesaria para crear una imagen y es la aplicación la que se encarga de construirla. Esto nos da las dos características y ventajas principales de este formato: los gráficos vectoriales no pierden calidad al ser escalados y, al basarse en el formato XML, se puede comprimir fácilmente para que las transmisiones sean más rápidas (con gzip, pasando a ser imágenes SVGZ).
Permite tres tipos de objetos:
  • Elementos geométricos: rectas, curvas y áreas delimitados por ellos, bordes...
  • Imágenes de mapa de bits
  • Texto
Es soportado por la mayoría de navegadores actuales: Mozila Firefox (v1.5), Opera, Internet Explorer (v9), Safari (v3.1), Chrome(v0) y Microsoft Edge (build 20059 de W10). Aunque en un principio el rendimiento era una problema, actualmente se ha visto mejorado, sobre todo en las versiones más recientes de estos navegadores.
En cuanto a su uso como fuente multimedia permite animaciones mediante los lenguajes ECMAScript o SMIL y el uso de manejadores de eventos de ratón y teclado, como onClick() u onMouseDown(). Pueden crearse animaciones sencillas como las de la Figura 3 o incluso videojuegos, como este tetris

  • Ligero
  • Soportado por la mayoría de navegadores actuales
  • Muy útil en las web responsive
  • Permite representar imágenes, animaciones y texto.


  • MNG
Es un formato de fichero, libre de derechos, para imágenes animadas. Es considerado como una extensión del formato de imagen PNG. Se crearon dos versiones de MNG de complejidad reducida: MNG-LC (baja complejidad) y MNG-VLC (complejidad muy baja). 
Son muy pocos los navegadores que soportan este formato: Opera lo soporta parcialmente, Safari no lo soporta y Mozilla retiró el soporte de MNG a partir de la versión 1.5a
PROCESAMIENTO DE ANIMACIÓN
En este apartado vamos a ver algunas de las técnicas de animación existentes.
Existen muchas técnicas de animación. Hasta hace algunos años la más utilizada era el dibujo animado, el cual se realizaba a partir de dibujos hechos a mano. Sin embargo, hoy en día los avances de la tecnología han llevado a que la mayor parte de animaciones se realicen por medio de técnicas digitales.
DIBUJOS ANIMADOS 2D
Muy utilizada en los dibujos antiguos, como los del ratón Mickey Mouse. 
En sus inicios se realizaban a través del dibujado y pintado de cada fotograma (incluido el fondo de la animación) para luego ser filmados. En la década de 1910, se agilizó el proceso al aparecer la animación por celdas (inventada por Bray y Hurd) la cual consistía en usar láminas transparentes en las que se animaban los personajes sin tener que pintar el fondo en cada fotograma.
Actualmente apenas se utiliza debido a que se necesita mucho tiempo y personal. Hoy en día se utilizan diversos medios digitales.

STOP MOTION
Es una técnica de animación que consiste en aparentar el movimiento de objetos estáticos por medio de una sucesión de imágenes fotografiadas. El movimiento del objeto estático se construye, fotograma a fotograma, manipulando el objeto entre tomas.
Se pueden dividir en dos variantes:
  • Animación de plastilina o Claymotion (materiales maleables). Por ejemplo Wallace & Gromit.
  • Animación de objetos rígidos. Por ejemplo la técnica de animación Brickfilm - en la que se emplean ladrillos de LEGO.

PIXILIACIÓN
Es una variante de la técnica de Stop Motion, pero utilizando personas humanas en lugar de objetos inanimados.
Al igual que en la técnica de StopMotion, los objetos son fotografiados repetidas veces y desplazados ligeramente entre cada fotografía.
Técnica muy empleada en videoclips y spots publicitarios. 
ROTOSCOPÍA 
Técnica de animación muy antigua que consiste en re-dibujar o calcar un fotograma teniendo otro como referencia. 
Por lo general la rotoscopía suele usarse para re-dibujar vídeos, frame a frame, una excelente rotoscopía sería re-dibujando sus 25 fotogramas, aunque haciendo menos, como 22, 12 u 8 se pueden conseguir fantásticos resultados. 

 POR RECORTES 
En esta técnica se utilizan figuras recortadas, ya sea de papel o incluso fotografías.
Los miembros del cuerpo de los personajes se construyen a base de recortes. Moviendo y reemplazando las partes se obtienen diversas poses, y así se consigue dar vida al personaje.
POR ACETATOS 
El acetato es una pieza transparente de película utilizada en la animación tradicional.
Para este tipo de técnica, los acetatos se colocan en capas (una encima de la otra) para producir un solo cuadro de animación. Se utiliza un acetato separado para la capa del fondo y otro para cada objeto que se mueve independientemente sobre el fondo.
ANIMACIÓN BASADA EN CUADROS 
Es el tipo de animación más simple que se puede visualizar, se genera por el despliegue rápido de hojas. En una computadora es el despliegue de archivos gráficos.
Para conseguir la sensación de movimiento las secuencias de archivos gráficos son desplegadas en una sucesión muy rápida y la diferencia de una imagen con la anterior es muy corta.


ANIMACIÓN EN SPRITE 
Cada objeto es sobrepuesto y animado sobre un fondo de imagen estático, un sprite es cualquier tipo de la animación que puede ser movido independientemente.
Para esta técnica es imprescindible el manejo de buffer o memoria fuera de la pantalla que le permita generar los cuadros con antelación al momento del despliegue, permitiendo así una animación fluida y rápida.
Este tipo de técnica es muy utilizada en videojuegos.
OTRAS TÉCNICAS 
Existen muchas técnicas de animación que sólo han sido utilizadas por unos y que son desconocidas para el gran público.

PINTURA SOBRE CRISTAL 
Esta técnica consiste en pintar una ilustración con óleos de acción retardada sobre un cristal, y manipularla entre fotografías. También se puede realizar con goauche mezclado con glicerina.

ANIMACIÓN DE ARENA 
Para este tipo de animación es necesaria una mesa con un cristal que se encuentre iluminada por la parte inferior. La función de la arena es dejar pasar mayor o menor cantidad de luz en el cristal dando lugar así a una imagen que será fotografiada por encima de la mesa de trabajo.
Una vez encendida la mesa, el trabajo consiste en hacer dibujos con la arena e ir fotografiando cada cambio que se realice.


PANTALLA DE AGUJAS 
En esta técnica de animación se utiliza una pantalla llena de agujas que pueden moverse hacia adentro o hacia afuera, presionándolas con un objeto.
Estas agujas generan un relieve, el cual se ilumina desde los costados para generar una imagen en la pantalla (con su sombra). Con este tipo de técnica se pueden lograr efectos de texturas muy difíciles de conseguir con la animación tradicional por celdas.
TWENNING 
Proceso de generar cuadros intermedios entre dos imágenes por interpolación para dar el aspecto de que la primera imagen se convierte suavemente en la segunda. La interpolación se puede hacer a mano o mediante ordenador.
ANIMACIÓN DIGITAL 3D
Es un tipo de animación que simula las tres dimensiones X, Y, y Z.
Se basa en utilizar programas informáticos para diseñar, modelar, renderizar y crear las animaciones. Básicamente se basa en modelar un objeto en 3D, aportarle un esqueleto, articular dicho esqueleto, crear las animaciones (variando la posición del objeto o de la cámara, regulando las luces...) y por último, tomar "instantáneas".
CAPTURA DE MOVIMIENTO
Consiste en capturar el movimiento de personas o animales reales mediante sensores. Desde un ordenador, se graban estos movimientos y se cambia el cuerpo de la persona o el animal por un modelo 2D o 3D. 
Los ejemplos más comunes son el típico traje negro con sensores de colores (famoso en la publicidad del videojuego FIFA hace unos años) o el uso de Kinect de Microsoft para capturar los movimientos.
Se utiliza principalmente en la industria del cine de fantasía o de ciencia ficción, en la industria de los videojuegos o también en los deportes, con fines médicos.