Entradas etiquetadas ‘flash’

Mantenerse al día con las últimas tendencias en Diseño Web

5 de Junio de 2009

Desde el comienzo de la World Wide Web, ha habido muchas tendencias en diseño web. La primera etapa comenzó con un enfoque académico y se orientaba hacia el simple intercambio de información. Con el tiempo hemos fuimos experimentado un cambio en el diseño con la llegada de gráficos, lo que dio nacimiento a la moda tecno-era en la que los diseñadores y los clientes buscaron nuevas formas para resaltar y llamar la atención con los últimos trucos de la web. En ese momento, hubo un mayor énfasis en el brillo y el glamour de los applets, flash, videos y en contraposición a contenido.

Hoy en día, estamos en una etapa de evolución de la web donde una buena experiencia web es el resultado de la colaboración mutua entre la presentación (diseño visual), la interacción (la respuesta a los usuarios), y la organización (estructura del sitio). Esta etapa se refiere a la facilidad de uso. Lo que alguna vez fue considerado un “cool” del sitio ya no es tan fresco como inicialmente se pensó que fuera. La atención se centra ahora en los estudios de usuarios y la usabilidad.

Un profesional de sitios web crea diseños de página web para lograr un equilibrio entre los dos extremos, el visual y la información. Implementamos el texto y los gráficos que mejoran la legibilidad y la percepción del mensaje que se transmite a un público objetivo.

Las tendencias futuras se inclinan más hacia la red como estructuras, diseños limpios, y un montón de espacio en blanco. PDD (Programa de Desarrollo Directivo) se halla en la cima de las últimas tendencias en el desarrollo de un sitio web de la red formando la estructura que pone toda la información pertinente delante de los ojos del espectador y hace que sea fácil para él o ella para encontrar exactamente la página que contiene la información que desea. Este tipo de diseño de sitios web requiere de tiempo, la investigación, y esfuerzo por parte del Departamento de Asuntos de Desarme del sitio web de los desarrolladores profesionales, pero bien vale la pena para los sitios web que abarcan grandes cantidades de información.

La presencia en la web es muy importante en estos días sobre todo para las empresas que pretenden obtener la mayor cantidad de visitantes y clientes. Con su alcance mundial, cualquier sitio web tiene una gran oportunidad de llegar a un público objetivo más amplio lo que aumenta el tráfico y las ventas.

La consideración primordial es crear un atractivo y bien diseñado sitio web en que los visitantes se mantengan pegados a lo que tiene que ofrecer. Implica el desarrollo de un sitio web, teniendo en cuenta los diversos elementos de diseño, pero lo principal a tener en cuenta es la sencillez.

Simplicidad en el diseño web significa ser sencillo y directo en un montón de aspectos.Podemos hacer un diseño simple para una cómoda experiencia de navegación sin forzar los ojos. Esto significa que de izquierda a derecha y de arriba abajo, los lectores son capaces de leer todo el contenido sin mucha dificultad.

El diseño del contenido es otra de las últimas tendencias. Si bien el diseño de la página de fondo era popular en los últimos años, el contenido es ahora recibir más atención en un esfuerzo por llamar la atención de los visitantes a la información proporcionada en el sitio. Los diseñadores también somos conscientes del hecho de que el contenido de un sitio es lo más importante.

En términos de color, la mayoría de los fondos de color blanco liso y suave, tonos neutrales están en boga. El fondo blanco es muy popular hoy en día en muchos sitios web, ya que dan un efecto claro y limpio. Esto crea un efecto enfriador en los ojos. En cuanto a los colores más brillantes, son los que mejor reservamos para los aspectos más destacados o los más importantes de la página web y si es posible, se debe utilizar con menos frecuencia.

El blanco es esencial en la construcción de un sitio web. Proporcionar más los márgenes y la talla de línea adicionales para ayudar a los lectores a absorber la información en el sitio. Recordar siempre que Menos es mejor.

Los tipos de letra y el tamaño no deben ser olvidados. Texto grande para resaltar la información más importante en su sitio y dejar el texto de tamaño normal para los detalles.

Los diseñadores donde quiera que nos encontremos hacemos el trabajo de acuerdo a las necesidades del cliente, por lo tanto, es muy importante estar en constante comunicación y consultar con ellos la creación de un sitio apropiado para sus necesidades. Especificación de su público objetivo, la información comercial y de diseño de estilo durante su consulta inicial será de gran ayuda para el diseñador.

Publicada la O3D, el 3D en nuestros navegadores

22 de Abril de 2009

Google ha publicado una nueva API open source llamada O3D. Sirve para poder crear aplicaciones interactivas en 3D que se visalizan en nuestros navegadores.  Usando Javascript podemos crear, mostrar, manipular un mundo virtual en 3D, seguramente quede poco para ver el próximo shooter de éxito funcinando en Firefox ^^!

Al igual que el Flash, es necesario un plugin para cada sistema operativo para hacer funcionar las aplicaciones O3D.

Hay versión para Windows y Mac, y los usuarios de Linux deben seguir estas instrucciones para compilarlo.

Más ejemplos:

Fuente: anieto2k

Importancia de los sistemas de navegación en diseño web

22 de Diciembre de 2008

En la actual era de Internet, el sistema de navegación de un sitio web es como las extremidades de los miembros del sitio web. ¿Puede usted imaginar a una persona sin extremidades? Del mismo modo, un sitio web sin un sistema de navegación o un pobre sistema de navegación es como una discapacidad en gran medida.

Hay que deja claro que los sistemas de navegación son importantes, pero exactamente lo importante, se describe a continuación:

1. Como el nombre sugiere, los sistemas de navegación actúan como un navegador para que los usuarios puedan desplazarse por el sitio web. Un buen sistema de navegación puede ayudar a promover el derecho a páginas de los usuarios. Es extremadamente difícil de adivinar y localizar un contenido sin la ayuda de un sistema de navegación.

2. Los sistemas de navegación tienen que ser intuitivos. Un buen diseñador ayudará a los usuarios obtener el máximo beneficio al visitar un sitio web. Se vuelve imperativo que un buen sistema de navegación para asegurar que los usuarios obtienen lo que buscan sin perderse.

3. La navegación también puede formar una parte muy importante del diseño del sitio web. De hecho, la mayoría de los sitios web giran en torno al propio sistema de navegación. Las nuevas tecnologías como Flash y AJAX se añaden ahora los sistemas de navegación que son muy interactivos y algunos muy interesantes en lo que se refiere conceptos de diseño. Algunos de los mejores sitios web son los que son muy simples en el diseño y utilizan el sistema de navegación para crear el concepto. Hacer un sistema de navegación que no es coherente puede resultar pobre en el uso del sitio web, así como contribuir a un mal diseño del mismo.

4. Un buen sistema de navegación también ayuda en la colocación de sitios web destacados en los motores de búsqueda. Esto es importante desde el marketing online es una de las principales formas de atraer a los usuarios (y posteriormente de negocios) a su sitio web. Buenas técnicas de programación pueden asegurar que los motores de búsqueda miren dentro de la estructura de navegación, así como al índice de páginas.

Si aún no está convencido de que un sistema de navegación juega un papel clave en la salud de un sitio web, a continuación, puede dar un rápido vistazo a la usabilidad de guías publicadas donde se pone por relieve las autoridades de navegación dentro de los tres primeros puntos de consideración que evalúan un sitio web para su usabilidad. Algunas de las recomendaciones para los sistemas de navegación son las siguientes:

1. El texto basado en vínculos es preferible para la navegación en lugar de la estructura gráfica de los vínculos. Además de que es más fácil para los motores de búsqueda.

2. Para un sitio web mas complejo se recomienda una estructura de navegación multi-nivel. Esto proporciona un excelente nivel de facilidad de uso. También permite a los usuarios saltar de un enlace a otro sin tener que pasar por diferentes páginas no relacionadas.

3. En línea estudios se ha demostrado que una de las formas más eficaces de navegación estructuradas son las que están orientadas hacia la izquierda o de arriba a abajo.

4. La estructura de navegación debe seguir siendo uniforme a través de la web. No debe cambiar con el cambio de las secciones. Los cambios en el sistema de navegación puede desorientar al usuario dentro de un sitio web.

5. No debería haber muchos sistemas de navegación dentro de un sitio web. Un sistema de navegación principal y un sistema de navegación menor es lo máximo que debe existir en un sitio web.

Hay algunas excelentes estructuras de navegación que se pueden encontrar en línea. Si vas a diseñar un sitio web en breve, asegúrate de prestar especial atención a la estructura de navegación del sitio web para garantizar el máximo beneficio a sus usuarios.

Diseño minimalista de páginas web

26 de Noviembre de 2008

Con el aumento de la asequibilidad de espacio web y ancho de banda, el creciente uso de módems de alta velocidad, y la abundancia de la aplicación de tecnologías como Flash, audio y video, viene la tentación de la sobreexplotación en el diseño web.

Una característica importante que siempre ha diferenciado a los buenos diseñadores de los malos es el limitar cada nueva tecnología que viene. Los buenos diseñadores deben centrarse en primer lugar en la funcionalidad y asegurarse de que la página web logre los objetivos para los que fue creada, mientras que los malos diseñadores hacer uso gratuito de elementos como gráficos, animaciones flash y javascript, simplemente “porque pueden” o porque ” se ve bien “.

“Minimalismo” es un término acuñado en el arte y la literatura para describir un movimiento hacia la extrema simplificación de forma y color. Extrapolando el concepto a las páginas web, se refiere a diseño, colores y otros aspectos de la presentación, a la que la dimensión de la usabilidad se ha añadido.

Del minimalismo es la estética y la funcionalidad de trabajar juntos. En diseño web, el minimalismo implica la eliminación de todos los adornos innecesarios, centrándose en el usuario, y la creación de una interfaz que es al mismo tiempo agradable a la vista, fácil de navegar, intuitiva y eficaz en ayudar a los usuarios alcanzar sus objetivos de manera rápida y sin esfuerzo.

Minimalismo se aplica a muchos aspectos de diseño web. Por ejemplo:

  • La codificación de las páginas: cuando se trata de escribir código para páginas web, el uso de hojas de estilo en cascada es un buen ejercicio en el minimalismo, por la concentración de las definiciones de estilo en un archivo externo y, a continuación, la vinculación a la misma de cada página web, eso reduce la cantidad de código en cada página, y, en consecuencia, las páginas serán más pequeñas, se cargaran más rápido y será más fácil de mantener.
  • El uso de gráficos: Se utilizaran los gráficos sólo cuando sea absolutamente necesario, eso es otro buen ejemplo de diseño minimalista web. Los Gráficos deben añadir valor a lo que se presenta, en lugar de ser sólo decoración. El uso de los gráficos, y utilizarlos con moderación, eliminan el desorden en una página, hará que el contenido sea más fácil de entender, y permitirá que la página tenga una descarga rápida, que en definitiva es lo que los usuarios quieren.
  • El uso del color: buen uso de colores para separar la página en diferentes categorías, y hacer hincapié en lo que es importante. Por ejemplo, cada sección de un menú de navegación se puede dar un color diferente para indicar que las tareas están relacionadas. Además, el uso de colores brillantes para los botones en los que queremos que los usuarios hagan clic es una buena manera de subrayar la importancia de esa tarea. Si todo en una página tiene color, nada hará hincapié en la página y será un lío.
  • El uso de un amplio espacio en blanco: algunas páginas web se asemejan a los anuncios caóticos que vemos en algunas revistas con cantidad de gráficos e información que parece que nos quieren gritar. La lectura de la pantalla de un ordenador es mas difícil, por lo que debemos esforzarnos por hacerla lo más fácil posible para nuestros visitantes. Podemos mejorar la legibilidad de pantalla por la separación de las diferentes secciones de la página con un montón de espacio en blanco. Eso va a hacer la visita de los usuarios mucho más cómoda, y que tienden a quedarse en nuestro sitio durante más tiempo.
  • Legible y de fuentes lo suficientemente grandes: el minimalismo no significa que las fuentes sean pequeñas. Una buena página minimalista debe usar una fuente fácil, como por ejemplo Verdana, en un tamaño lo suficientemente grande como para ser leído sin esfuerzo. Además, el número de tipos de fuente por página debería limitarse a dos o tres: una para los titulares, otra para los contenidos y, posiblemente, el resto para los botones de navegación. Eso es todo. El uso de más fuentes hará ver la página ocupada y poco atractivo.
  • Search Engine Optimization: los motores de búsqueda no reconocen las imágenes. Reconocen texto. El texto es la comida favorita de las arañas de los motores de búsqueda. Los motores de búsqueda también tienen problemas con Flash y Javascript. Si desea que sus páginas sean indexadas rápidamente, recuerde tener un diseño minimalista en mente: mantener las cosas simples y reducir en lo posible el uso de Flash, Javascript y la carga de imágenes.

En resumen, un diseño web minimalista requiere:

  • Singularidad
  • Fácil Navegación
  • Simplicidad
  • Sencillez con elegancia
  • Funcionalidad
  • Uso de elementos fundamentales y necesarios
  • Pequeño número de formas
  • Texturas y colores naturales
  • Limpieza y buenos acabados
  • A veces el uso de contraste de colores para la estética, o para hacer hincapié en lo que es importante
  • El uso de CSS (hojas de estilo en cascada) para hacer las páginas más pequeñas y más rápidas en la carga
  • El uso de gráficos sólo cuando sea absolutamente necesario

Flash o no Flash

22 de Noviembre de 2008

Este es uno de esos populares temas de debate en foros de diseño web. ¿Qué tipos de sitios web deben utilizar esta nueva tecnología y qué tipos de sitios no? Para aquellos que no están familiarizados con Flash: Flash es un plug-in y el programa desarrollado por Macromedia que ofrece sitios de dinámica de animación y interactividad.
Lo único es que, a fin de ver sitios que utilizan esta tecnología, primero se debe descargar el plug-in, que en algunos equipos puede tomar desde 5 minutos a 15 minutos dependiendo de su velocidad de conexión. Esto no es un obstáculo para la mayoría de los usuarios, sin embargo, para algunos, no es una cuestión de rapidez o la lentitud de carga – algunos usuarios son muy cautos sobre lo que descargar de internet, y es posible que vean este “Download Now” como una amenaza a su sistema. Otros usuarios ni siquiera entran en los sitios que requieren plugins por esta razón solamente. Y algunos no entran porque no les gusta esperar a los componentes y las animaciones de carga. Estas son las personas que quieren información y que han ido al sitio para eso – no para ver un oso animado al introducirse en el.

E-Comercio y Flash no pueden mezclarse

No se recomienda para los sitios de comercio electrónico utilizar tecnología Flash. La finalidad de un sitio de comercio electrónico es vender artículos a los consumidores que visitan su sitio web. Los visitantes quieren ver los productos y obtener la información de manera rápida y fácil. Mediante la implementación de un sitio de comercio electrónico en Flash, la empresa está limitando la cantidad de consumidores que van al sitio, y, potencialmente, podrían perder ventas.
La mayoría de los sitios que utilizan Flash también ofrecen una versión HTML para los clientes que no tienen el plugin, o que deciden no descargarse dicho plugin.
Esto es altamente recomendable para todas las empresas al hacer el uso de Flash en su sitio de comercio electrónico.
Vamos a decirlo de esta manera: Pongamos que nuestra empresa de venta de productos la hemos construido en una isla en el Pacífico muy cerca de la costa. ¿Se le requerirá a todo el mundo que quiere entrar en su tienda a obtener un barco para llegar hasta ella? ¿O a construir un puente para cruzar? Mejor aún, probablemente habría sido mejor construirla en la orilla principal en el primer lugar de “fácil acceso”. Este es el problema con Flash el día de hoy. Aunque un alto porcentaje de consumidores ya tienen sus plugins de Flash instalados, no es aconsejada la aplicación de Flash para un sitio de comercio electrónico. Por supuesto, que es, en última instancia la decisión de la empresa.

El lado bueno de Flash

Sí, Flash tiene sus buenos puntos. Flash es muy beneficioso para los sitios web de entretenimiento. Los sitios que son principalmente para fines de entretenimiento. Webs de información también empiezan a utilizar Flash en partes de sus sitios para representar imágenes en movimiento y sonido como una visita guiada o clips de información que hacen que el sitio sea más interesante. Flash también es ideal para los niños y los sitios de juego. Con la tecnología Flash, su sitio puede interactuar con los visitantes en forma de divertidos juegos o dibujos animados. Añade la diversión y emoción a la web con los sonidos de la música, voces, colores y imágenes en movimiento. Así que sí, Flash puede ser muy bueno para algunos sitios.

Ligero repaso al Flash CS4

7 de Noviembre de 2008

Es indiscutible que la nueva versión de Adobe® Flash CS4 trae consigo una gran cantidad de mejoras en la interfaz. Que consiguen adaptar mucho más la aplicación para efectuar animaciones de interpolaciones de una forma bastante intuitiva y altamente customizable.

La nueva disposición de la línea de tiempo y el panel de propiedades, que en las versiones anteriores era tan diminuto e incómodo, ahora se compone en una sola y única ventana que combina la librería y otras utilidades (o ventanas).

Opera con un nuevo concepto de creación de Keyframes de forma automática y con una capacidad de  reacondicionamiento de la línea de tiempo que ahorra muchísimos dolores de cabeza, que tendríamos en versiones anteriores.

Las opciones estrella son:

  • La herramienta Huesos o Bones.
  • La transformación 3D.
  • Y por supuesto, el editor de movimiento de interpolaciones.

En mi opinión, la novedad más interesante resulta de la herramienta Bones, que permite crear animaciones de elementos encadenados.

Sin embargo, sigue siendo AS3 en el fondo. Lo que realmente no ha supuesto sino una mejora de clases bases y la VM (Virtual Machine) con la que trabaja la aplicación. El gran cambio se dio con la versión CS3, al introducir el nuevo AS3. Y aunque esta versión cuente con soporte para el AS2, el mismo tendrá que ser mejorado en el Adobe® FlashPlayer10 para evitar los problemas de compresión de imágenes y sonidos que hace un swf normalmente liviano en una mole de megas.

Aunque este llena de gozos y grandes opciones, si todavía tenemos problemas con clientes para implementar AS3 porque depende de tener instalado el Adobe® Flash Player 9, no quiero ni imaginarme dar el salto al Adobe® Flash Player 10.

Moses Sopposes 3 – La espera continua

30 de Octubre de 2008

Parece lejano aún el día en que tengamos nuestra librería de animación de tweenings por excelencia disponible para el AS3. Aun así puede que la espera valga la pena.

Este nuevo kit de animación se basará en Go (GoASAP – Go Action Script Animation Plataform), una plataforma de animación para el AS3. Cuya clase base LinearGo provee toda la funcionalidad fundamental de una animación estándard por tweens, sin definir exhaustivamente propiedades ni objetivos a los efectos de que pueda ser posible que cualquier clase extienda ésta con nuevas implementaciones de paquetización de animaciones, tal y como actuaría el Fuse 3.

La potencia de la nueva plataforma Go se puede apreciar en la siguiente gráfica comparativa de eficiencia de hilos de animaciones (tweens) simultáneos, en donde LinearGo llega casi al máximo nivel de rendimiento (negro) y el blanco representa el máximo valor para cada prueba:

Comparativa de Hilos de animación (Tweens)

Comparativa de Hilos de animación (Tweens)

Usamos el kit de Fuse desde el año 2006, como un complemento en el proceso de animación multimedia en Flash. Resulta la razón principal por la que aún trabajemos al 80% con AS2. Ya que se trata de una utilidad difícil de sustituir y que nos costó en su momento una inversión importante de conocimiento. Y aún desbordados con la grandes novedades del AS3, con las pocas excusas que nos presentan algunos clientes como obstáculo para generar productos multimedia con versiones no tan recientes del Flash Player, no nos cuesta nada decir que no hay problema.

Seguimos impacientes por comenzar ya animar con Fuse 3.