0

Carbono reconocida con dos Spark: Premios Concepto

0

Adobe Photoshop Touch para iPad 2

Adobe Photoshop Touch es ahora disponible para el iPad 2, que ofrece características básicas de Photoshop, así como nuevas capacidades para crear y compartir en una aplicación a medida para las tabletas. La aplicación es un componente central de Adobe aplicaciones táctiles , una familia de seis aplicaciones intuitivas de pantalla táctil, inspirado en el software de Adobe Creative Suite.   Photoshop Touch ofrece a los usuarios la posibilidad de combinar varias fotos en imágenes con capas, hacen que sea esencial edita y aplica efectos profesionales para crear hermosas obras de arte, retocar fotos, pintura, diseñar ideas y mucho más. La herramienta de selección Scribble permite a los usuarios extraer fácilmente los objetos de una imagen, simplemente escribiendo en lo que para mantener, y luego lo va a quitar. Con la tecnología Refine Edge en Photoshop, aunque difíciles de seleccionar áreas con bordes suaves son fáciles de capturar la hora de hacer selecciones. Photoshop Touch ayuda a los usuarios a encontrar rápidamente las imágenes y compartir creaciones mediante la integración con Facebook y Google Image Search. "La gente se sorprenderá con lo que puede crear en el iPad usando Photoshop Touch", comentó David Wadhwani, vicepresidente senior y gerente general de Digital Media Business Unit de Adobe. "Photoshop Touch combina la magia de Photoshop y sus características principales, con la comodidad de una tableta, con lo que el poder de edición de imágenes a las yemas de los dedos de millones de personas."

0

Adobe Primetime: Publicación de vídeo integrado, la publicidad y la plataforma de Google Analytics

Adobe Primetime es la industria de la primera plataforma de tecnología de vídeo totalmente integrado para permitir suaves, como la televisión-las experiencias de apoyo ad-videos a través de dispositivos conectados a Internet. Esta nueva plataforma ofrece vídeo de primera calidad y el contenido del anuncio consistente en todas las principales plataformas, como Apple iOS, Android de Google, sistemas operativos de escritorio y televisores conectados. Primetime crea una sola, de extremo a extremo de flujo de trabajo que interconecta Adobe tecnologías de streaming, protección de contenido, análisis y optimización de la plataforma de publicidad Auditude recientemente adquirida de vídeo. Esta integración permite a los proveedores de video de primera para dar al cliente una experiencia de visualización superior a través de la inserción perfecta dinámica de los anuncios en cualquier tipo de contenido, ya sea lineal, en directo o bajo demanda a través de dispositivos conectados a Internet. Adobe Digital Marketing Suite es parte integral de horario estelar, lo que garantiza que las empresas de medios de comunicación son capaces de combinar los datos de consumo y los ingresos de personalizar su contenido y anuncios. "Adobe 's nueva plataforma de tecnología de vídeo está transformando la forma de contenido de vídeo y los anuncios se sirven y consumen", dijo David Wadhwani, vicepresidente senior de Medios Digitales de Adobe. "Proyecto de horario estelar ofrece a las empresas de medios una solución para entregar y monetizar su contenido a la perfección en tabletas, teléfonos móviles, televisores y computadoras, mientras que la prestación de mejores experiencias de los consumidores a través de IP." Como parte de la primera fase de llevar la plataforma al mercado, Adobe está haciendo "Primetime destaca" disponible en la actualidad. La oferta de publicación de vídeo nueva integra un editor de vídeo basado en la Web clip con la plataforma de publicidad de Adobe Auditude permite a la industria del primer flujo de trabajo único para la creación y la monetización de los clips de vídeo en directo en tiempo real. Editores de vídeo son capaces de ofrecer los clips de anuncios compatibles que están disponibles al instante - incluso mientras un evento aún está en curso - hacer el contenido más oportuno y menos caro de producir. Los clips pueden ser entregados a través de Adobe proporcionada reproductor de vídeo dentro de una aplicación móvil existente o incrustado en una página web. Destacados Primetime permite una experiencia de visualización que es suave y similar a las emisiones tradicionales de televisión con contenido sin fisuras y las transiciones de anuncios. Los editores de vídeo pueden comenzar a publicar y la monetización de los clips de vídeo para el iPad en la actualidad. Otras plataformas se espera que se apoyó en el 2012. Primetime se mostró a las emisoras y medios de comunicación a partir de hoy y se espera que esté disponible en 2012 con soporte para Windows, Mac OS, iOS de Apple, Android de Google, Samsung Smart TV y otras plataformas. Los distintos productos y tecnologías de la plataforma seguirán estando disponibles como ofertas independientes. De soporte de Adobe de acceso para iOS se espera que esté disponible en la primavera de 2012.

0

Lo que los diseñadores web pueden aprender de los Video Juegos

Los juegos son cada vez más en la Web como, y la Web es cada vez más parecidas a juegos. Si usted necesita una prueba de ello, sólo tienes que mirar las respuestas de Yahoo. Preguntas al azar se plantean, la respuesta más elegida es, y los puntos de credibilidad se dan al ganador. Es un sistema de clasificación que se acumula y libera más y más características dentro del sistema. Funciona porque la psicología de los logros y la mecánica del juego y por lo tanto fomenta la interacción. Esto plantea la pregunta, ¿qué puede un diseñador web de aprender de los juegos, o - más concretamente - juegos de video? Buenas interfaces de juego tiene que ser muy fácil de utilizar e intuitivo, capaz de manejar una gran cantidad de acciones repetitivas en el menor número de clics posible. Tienen que ser atractivas e interesantes. Tienen que ser simpáticos. Una interfaz de juego se suma a una buena y mejora la experiencia del usuario. En un juego, la gente desea que el contenido que se les entregan de una manera que no se rompa la fantasía. Cualquier disonancia con la interfaz hará que un juego de otra manera grande para fallar. Incluso en los juegos más antiguos, como en el Prince of Persia (que se muestra arriba), las limitadas capacidades del sistema aplicado a los diseñadores vienen con patrones de diseño creativo e innovador. Con más capacidades disponibles hoy en día, somos capaces de encontrar las técnicas de diseño más avanzadas en los videojuegos modernos. De la misma manera, los usuarios del sitio quieren que su contenido entregado a ellos en una manera que sea fácil de entender, intuitivo y atractivo y que no requiere una gran cantidad de desplazamiento o hacer clic. De hecho, los diseñadores Web pueden aprender mucho de las interfaces de videojuegos. Los sitios web que utilizan herramientas comunes de la interfaz del juego se puede simplificar la experiencia del usuario al tiempo que añade un montón de personalidad. Esto puede resultar en un mayor tráfico y una mayor tasa de repetición de las visitas y las ventas ... - Cha-ching! No es de extrañar, entonces, que hemos visto una afluencia de carruseles, Cajas de Luz, acordeones y los patrones de navegación cada vez más sofisticadas, como las bibliotecas CSS y JavaScript han puesto estas herramientas al alcance de los navegadores web. Ya se trate de un bien o una cosa mala, es un tema para otro artículo, y este artículo se centrará en las técnicas en lugar de sus aplicaciones incorrectas. Lo que un diseñador Web puede aprender de los videojuegos no se limita a la interfaz de usuario. Yahoo Answers funciona gracias a la psicología del sistema de logros que se construye pulg Por lo tanto, mientras vamos a ver algunas ideas básicas de la interfaz de usuario y los patrones, otros conceptos de alto nivel podría ser útil, también, y vale la pena explorar.

Remember The Big Picture

Al considerar las interfaces de juego, un diseñador web tiene que ser muy consciente del contexto de su proyecto y los objetivos de sus clientes. Obviamente, un sitio a menudo, aunque no siempre, tienen un objetivo que es muy diferente de la de un juego de vídeo. En muchos sitios web, la eficiencia debe ser una prioridad mayor que el entretenimiento. Un fresco de ojo de pez interfaz no es la idea más práctica para un sitio web dedicado a la entrega de información fiscal con rapidez o para un sitio de comercio electrónico. Sin embargo, un canal interactivo de medios sociales podrían beneficiarse de una tabla de clasificación o algún tipo de sistema de logros. Elija los componentes de interfaz de usuario para adaptarse al proyecto. Mirando el panorama general, también consideran la estructura y el método - no sólo los componentes de interfaz de usuario. Por ejemplo, mira cómo están estructurados los menús, y considerar por qué esas opciones fueron hechas. En muchos juegos, usted tiene un hub-and-spoke tipo de arquitectura, dando lugar a diferentes conjuntos de herramientas dentro de los menús. Si usted elige "Armas", a continuación, todas las opciones abiertas para las armas en la siguiente pantalla. Usted tiene que navegar de vuelta a la pantalla superior con el fin de elegir la opción "Mapas". Esta estructura simplifica un conjunto de opciones que de otra manera se convierten rápidamente en confuso o abrumadora, proporcionando la atención se centró en una elección a la vez. ¿Puedes ver cómo este tipo de arquitectura podría beneficiar a un sitio web que presenta una gran cantidad de información para el visitante? Al permitir que el visitante se centran en una sola pieza de una gran tarea en línea o una pepita de información a la vez, potencialmente aumentar la tasa de conversión para su cliente. Esta estructura también puede ser eficaz cuando se está elaborando un embudo de ventas en un sitio web. El siguiente ejemplo muestra una estructura de juego sencillo menú que podría ser fácilmente aplicada a la arquitectura de la información de un sitio web, la construcción de caminos para los visitantes a seguir. Si estás construyendo un sitio web para una firma de CPA, usted puede ser que el segmento de la información del menú de las partidas correspondientes al tipo de visitante. Una persona de alto patrimonio tiene unas necesidades muy diferentes a las de una pequeña empresa, pero ambos podrían estar interesados ​​en la contratación de la misma empresa. Usted podría comenzar en el nivel superior, con dos puntos de entrada simple que actúa como un embudo, una para los individuos y las familias y el otro para las empresas y organizaciones, cada botón que lleva a el centro de ese usuario. Esta página del cubo se puede proporcionar el contenido, ofrecer herramientas pertinentes y anunciar los servicios pertinentes para estos usuarios muy diferentes, lo que simplifica su experiencia. Asimismo, los lugares donde los juegos de vídeo Aviso muestran en lugar de decir, y tratar de entender cómo lo hacen. El éxito de los juegos son particularmente adeptos a mostrar en los entrenamientos, en lo que se refiere a menudo como "cuevas noob." Un personaje tiene que pasar a través de las salas de primaria o de niveles, donde se les enseña a realizar las tareas básicas de una manera que es entretenida e integrada con la historia. Un aventurero aprende a coger una espada y el swing, luego mata a una rata, y luego aprende a recoger el tesoro. El usuario se le enseña a utilizar la interfaz a través de experiencia de inmersión. En The Elder Scrolls IV: Oblivion, que comienzan en la cárcel y debe escapar a través de una cueva subterránea, la lucha contra las ratas y el duende y ocasionalmente pequeños en el camino para aprender los controles básicos del juego. ¿Por qué es relevante? Usted probablemente no tendrá que hacer un completo tutorial interactivo para una interfaz complicada, pero es probable que el contenido de su cliente será más clara recibido y entendido con mayor rapidez a través de gráficos inteligentes o gráficos. Usted podría tomar grandes conceptos y los descomponen en pequeños trozos. Se podría buscar los puntos potenciales de confusión y aclarar con información sobre herramientas o ejemplos en lugar de largas explicaciones. Mediante el estudio de cómo los juegos de mostrar en lugar de decirle, que usted podría conseguir un gran avance en un problema de presentación espinoso.

El compromiso no tiene por qué ser ostentoso

Juego de diseño asistente Jesse Schell, dice , "Los juegos ofrecen la posibilidad de éxito, la oportunidad de satisfacer su curiosidad, la oportunidad de hacer algo para resolver problemas y tomar decisiones claras, dando una sensación de libertad." Incluso el más mundano de los sitios web puede ser hacer más atractiva por la pregunta, ¿Qué elementos de los juegos de qué la gente encuentra agradable? Juegos de proporcionar información clara, a menudo en el momento de la entrada del usuario. Estos elementos podrían ser incorporados en las interfaces, y no sólo a través de carruseles o acordeones. Pedir algo tan simple como "¿Quieres saber más sobre este tema?" Luego de comprobar la presentación de un formulario se puede recorrer un largo camino para aumentar la interacción del usuario. Algunos diseñadores Web ya poner en práctica algunos de estos componentes de interfaz de usuario común a un nivel simple. Sin duda se ciernen los menús e información sobre herramientas no son nuevas. Al ver cómo éstos se aplican en un juego puede generar ideas sobre cómo implementar la interfaz de usuario elementos comunes de una manera más creativa e interesante.

Ejemplos, por favor

¡Entremos en el y ver algunos de los elementos de interfaz de usuario que se pueden añadir chispa a su próximo proyecto. Veremos algunos ejemplos y, a continuación algunos recursos donde se puede aprender más.

AJAX mensajes con imagen Loader

Estas pantallas de carga de Fallout: New Vegas (arriba) y Fallout 3 (abajo) tiene información útil y consejos, junto con una imagen de fondo que se expande sobre el tema del juego. En lugar de una imagen de gestor de giro, el usuario ve una ruleta o verde-pantalla de destino que se transforma de una espera aburrida en una parte divertida de la experiencia de juego. Lo que un diseñador Web puede tener de esto: Personaliza los gráficos. Úselos para sacar al usuario para que el "mundo" que va a crear en la pantalla. Incluso si usted está trabajando en una página web corporativa, puede cargar consejos útiles y bits de información. La construcción de un sitio web de los deportes al por menor? Tal vez usted podría utilizar una pelota de baloncesto hilado para su carga gráfica en una presentación de diapositivas. ¿No sabe cómo empezar? Echa un vistazo a este tutorial para aprender a contenidos de precarga. Una imagen de fondo de página completa de una pantalla de carga podría ser demasiado lento, pero se podría añadir un fondo de color a la div panel de carga, y luego el uso de JavaScript plug-ins para cargar al azar consejos e información para rellenar el espacio. Para obtener los mejores resultados, siga los siguientes archivos del cargador de 30 KB, el más pequeño es el mejor. Una simple llamada AJAX puede agarrar consejos cada tantos segundos, o puede simplemente crear uno para cada carga. La elección depende de la cantidad de contenido que necesita para cargar y cuánto tiempo dispone. Para ver un ejemplo de este tipo de cargador, echa un vistazo a la Website Grader en HubSpot. Después de enviar un vínculo, echa un vistazo a el cargador que viene para arriba mientras espera el resultado.

Los cursores personalizados

En Fable 3, siendo el lugar elegido por el usuario se indica mediante una lupa, que actúa como un cursor personalizado. En The Elder Scrolls IV: Oblivion, un cursor de mano simple de un objeto indica que el jugador puede recoger. Una mano de color rojo indica que el elemento está siendo robada y que los soldados podrían seguir. Lo que un diseñador Web puede tener de esto: Es probable que el encargo del cursor más reconocible es la "mano" grabby Google Maps . Pero cursores personalizados no son nada nuevo y son comunes en aplicaciones Web. La capacidad está incorporada en la mayoría de los navegadores. Es importante utilizar estos cursores con moderación: la hora de ofrecer ayuda, puede hacer clic para indicar el contenido, y para resaltar la información importante. ¿Tiene una pieza particular de información es absolutamente necesario para ser vistos por los visitantes? Prueba esta demo de un cursor personalizado (foto de abajo). ¿Ves cómo se podría utilizar para captar la atención y resaltar los puntos importantes? Imagine lo que es un bien ejecutado JavaScript varita mágica podía hacer en el sitio web para niños para captar la atención! Obviamente, no sería una buena opción para una página web corporativa, sin embargo.

Iconos, Iconos, Iconos

Una gran diferencia entre los videojuegos y sitios web es que los iconos se utilizan mucho más en los menús de juego complejas que en la navegación web, y con razón. Un usuario normalmente pasa mucho más tiempo en un juego que en un sitio web. Sin embargo, los iconos siguen siendo utilizados en los sitios web, y cada vez más como la línea entre los sitios web y aplicaciones web de desenfoque. Entonces, ¿cómo son iconos que se utilizan con eficacia en la navegación del juego? Se debe ser legible y ajustarse al contexto. En el ejemplo anterior de Halo Reach, el usuario se basa en iconos para navegar y elegir las armas, pero los menús se parecen a un "heads-up display" (HUD) para que podamos ver en un vehículo en el mundo real. En Oblivion, los iconos se presentan en "rollos". Iconos Web también debería ser fácil de entender. Agregar etiquetas de texto para un uso óptimo. Los iconos pueden acelerar la navegación por los menús complejos si los iconos son cuidadosamente seleccionados y coherente y si los usuarios pasan mucho tiempo en el sitio web. El uso de color sólido, de alto contraste se describen de formas fácilmente reconocibles que son simples y de fácil lectura con rapidez. Juegos se están alejando de las imágenes pequeñas, altamente detallados para líneas más sofisticadas (en archivos más pequeños), como las que se encuentran en Halo Reach y la serie Call of Duty, y grandes imágenes detalladas con formas distintivas, tales como los de abajo. Incluso si no se dan cuenta de los detalles, podrá observar las líneas a mano, el círculo y la cara. Utilizando el mismo color hace menos visualmente complicada y más fácil de descifrar. Los iconos más utilizados, el más simple y más fácil de leer con rapidez que deberían ser. También puede utilizar iconos como señales visuales para llamar la atención sobre temas clave. Utilice gráficos de "cabecera" en lugar de botones tan rápido le pide en cajas de contenido y la repetición de temas para reforzar los conceptos. Crear imágenes complejas más grande, y ser coherente. Usar iconos para añadir interés a las listas, y se rompen en pedazos digeribles contenidos y llamar la atención a las secciones importantes del texto, como Treemo hace tan bien. Considere el uso de iconos correspondientes para la navegación y las agrupaciones de actualidad. Usted podría utilizar formas consistentes como encabezamientos dentro del texto o como sacar cita para indicar que cierto contenido se relaciona. Usar iconos para que el contenido fácil de escanear, destacando los puntos de interés, para que los usuarios puedan encontrar rápidamente la información pertinente. Los iconos no tienen por qué ser ilustraciones estáticas. Las capturas de pantalla de Tap Patrón servir como miniaturas tradicionales, pero su forma característica también funciona como un icono, un creciente interés y el refuerzo de la marca: ¿Qué pasa con el uso de productos propios de su cliente como iconos? El ingenioso sub-menú de DonQ , se muestra a continuación, utiliza los mismos productos en forma de iconos, de forma rápida y fácil que dirigir a la que usted está interesado adentro es aún más inteligente es la manera en que el resto del contenido se atenúa cuando el sub-menú Parece, por lo que sus opciones se destacan.

Full-Page Carruseles

Pantallas con fichas que se desvanecen, como ésta de Dragon Age, Origins, han existido desde hace mucho tiempo: En el "Informe Carnage" en Halo Reach, más adelante, esta idea se lleva a un nuevo nivel. Las pantallas de desplazarse de forma horizontal, y cada página tiene varias pestañas. Los jugadores están acostumbrados a este tipo de interfaz. Pero se necesita para la Web, y la gente se sorprenderá. Usted tiene que interactuar con este tipo de interfaz para hacer justicia. Viñedos Jax utiliza un tipo similar de diseño, sin pestañas: Agregar fichas a cada pantalla de carrusel, y que tomaría este sitio web al siguiente nivel. Magento ofrece otra, más simple tener en esta idea: En este momento vemos este tipo de interfaz en interfaces de usuario móviles y tabletas en las que hay varias imágenes de fondo. También lo vemos en los juegos de todo tipo. Esto es más que fichas en las pestañas o el desplazamiento horizontal simple: creo iPad con múltiples escritorios. Piense por un Living ofrece un mapa (muy parecidas a juegos!) en la esquina superior derecha para ayudar a los usuarios navegar a su carrusel inusual. Lo que un diseñador Web puede tener de esto: Si usted tiene una gran cantidad de contenido, a continuación, esta solución puede ser audaz fácil de usar y puede aumentar el compromiso. Recuerde que el buen viejo en la página etiqueta de ancla con un objetivo? Este es el mismo concepto en ropa nueva. Sus pantallas de diapositivas y son de fácil navegación con una pantalla táctil, que es un factor que no hará sino aumentar en importancia. Debido a los distintos tamaños de pantalla, este tipo de diseño requiere una planificación cuidadosa y podría requerir CSS3 preguntas de los medios para asegurar que las cargas de contenido como se pretende en diferentes tamaños de pantalla. Usted tendrá que hacer sus diseños de respuesta . Puede implementar un carrusel de pantalla completa mediante el uso de una página de tamaño div , con el overflow establecido en hidden , y la colocación de las pantallas en una lista no ordenada con un ancho de conjunto. Los usuarios serán cada vez más cómodo y familiarizado con este tipo de interfaz a medida que adoptan las tabletas. La implementación de un desplazamiento aún más simple horizontal puede hacer que su cliente se destacan entre la multitud.

Barras de desplazamiento

Fable 3 está fuera, y su inmersión en el sistema de menú es completamente diferente a la de Fable 2 , la foto de arriba. Pero Fable 2 tiene una hermosa menú deslizante que teníamos que incluirlo. Desplazamiento con el control deslizante revela botones, y el contenido se presenta en la mitad derecha de la pantalla. Los botones también tienen menús desplegables en virtud de ellos. Atenúa inactivos contenido. La imagen de arriba es la máxima categoría de la "ropa". A continuación, el contenido de los ejercicios hasta "Abrigos", luego a las prendas de vestir específicas. ¿Te recuerda esto del comercio electrónico? Lo que un diseñador Web puede tener de esto: ¿Alguna vez has estado en un sitio web que tenía enormes menús fly-que cubrían la página? Y a medida que se cernía sobre los artículos, que se expandió a los sub-menús ... cuatro niveles de profundidad! Estos menús complicados puede ser intimidante y hacer que la persona quiere dejar. Hacer el menú pequeño, fácil en los ojos y rápidamente desplegable es una gran manera de superar la hinchazón y mantener a los visitantes a hacer clic de distancia. Ya hay algunos scripts deslizantes que ofrecen las barras de desplazamiento personalizadas para cualquier div contenedor. ¿Por qué no poner botones en el div ? Puede haber ciertos ajustes (como sitios web de entretenimiento o de la moda), donde este tipo de menú es más fácil de usar y escalable que su menú desplegable o media marcha fuera. Añadir un cargador de AJAX para su onClick caso, y tiene una interfaz atractiva que los usuarios pueden descifrar. El objetivo es mantener a los usuarios en una sola pantalla, manteniendo los menús escalable. Se podría añadir, literalmente, como muchos elementos de cada menú que usted necesita sin hacerles difícil de manejar.

Pivot Pantallas

Debo admitir que mi corazón dio un vuelco de la primera vez que vi las pantallas dinámicas en Halo Reach. Al llegar al menú principal, el texto está inclinado. Halo Reach usa la perspectiva a través del juego para que apunte a la orilla derecha de las pantallas de menú. Esta es una indicación visual. ¿Qué sucede cuando se pulsa el mando hacia la derecha? Los saltos de pantalla y se desplaza horizontalmente, visión borrosa, para darle la siguiente pantalla, que utiliza el punto de vista, así, en esta ocasión se tuerza todo el texto e imágenes a la izquierda. En una ficha, tu personaje es animado, sin apenas moverse y extrañamente realista. Bravo. Me senté y jugó con los pivotes por un tiempo. Por supuesto, mi primera reacción fue, yo quiero hacer eso. Lo que un diseñador Web puede tener de esto: Con un poco de Photoshop, se puede emular a este menú. Mediante el uso de una gran imagen de fondo panorámico que cubre ancho de dos pantallas de con la tipografía asimétrica CSS3 , y un rápido desplazamiento horizontal en JavaScript, usted podría conseguir algo parecido a la inclinación se encuentra en este juego. Aplicar esto a un panel más pequeño, y utilizarlo en un banner o botón que está completamente animada en dos cuadros, y usted obtendrá un wow (por lo que su cliente). No he visto a nadie con este método en la web todavía, pero me ha funcionado una pequeña demo para darle un punto de partida en caso de que desee implementarlo por ti mismo. También, observe la manera en que Halo Reach integra pantallas de menú mundanas en el mundo del juego con la ilusión inteligente de un paisaje en la distancia. Es una cosa hermosa. Le da una sensación de profundidad y el enfoque, al igual que cuando se mira a una ciudad de un avión antes de aterrizar. Se basa emoción y atrae a ir más profundo, de interactuar y ser parte de la acción. Este tipo de integración no se presta a todas las experiencias del sitio web, pero sí a algunos, y en su caso, vale la pena hacerlo Nunca subestimes el poder de la alegría..

Menús contextuales

El menú contextual en un juego de video es el primo de los besos de un sitio web sub-menú. Los menús contextuales como la de arriba de Assassins Creed: La Hermandad dar al usuario opciones específicas dependiendo de su localización en el juego y la elección de sus acciones. Si decide lanzar un hechizo, el sub-menú le ofrece una explosión de bolas de fuego o un rayo. Si usted decide a moverse, entonces usted puede correr, trepar u ocultar, todo en el menú radial. Los menús radiales con los iconos son muy populares, pero los menús de contexto podría fácilmente ser breves listas verticales de texto. Lo que un diseñador Web puede tener de esto: Cuando invitas a un usuario a tomar una acción específica, un menú contextual se puede mejorar la experiencia. En lugar de proporcionar listas de enlaces, usted podría ofrecer una gran diversión de las acciones específicas a tomar. Vemos esto utilizan en la actualidad en aplicaciones Web y en los pequeños reproductores de medios sociales para compartir. Al hacer un menú de contexto, que al menos podría considerar la posibilidad de que radial. Los menús radiales deben dar a los usuarios una opción de tres a ocho opciones, y la interfaz se puede añadir interés visual. Mantenga los menús como simple y clara como sea posible. Se debería ofrecer opciones relevantes para el usuario en el punto de decisión y aumentar las tasas de conversión. También deben ser fáciles de hacer clic y ligero visualmente. Para ver un ejemplo divertido de un menú contextual radial, echa un vistazo a musicmap TuneGlue de : Mientras que esto fue hecho en Flash, puede crear un menú sencillo radial con JavaScript . O usted podría conseguir más complejo, con anidados menús radiales , así: Los menús radiales no se limitan a los menús contextuales. Pop-up menús del panel en un punto de acción pueden ser igualmente efectivos y no puede tomar mucho tiempo o de pruebas para desarrollar.

Su turno

Muchos otros ejemplos de grandes ideas de la interfaz se puede extraer del estudio de los videojuegos. Juegos de servir de inspiración de diseño que pueden ayudar a premiar y gratificar los usuarios y hacer que las interfaces más intuitivas y divertidas. ¿Está construyendo un sitio web para una organización sin fines de lucro que está planeando una campaña de donación? Considere el uso de marcadores para rastrear las donaciones. Usted podría utilizar tablas de clasificación para dar un grito a los 10 lectores de su blog, dándoles un mayor incentivo para hacer comentarios. Estudiar cómo se utilizan iconos, y pensar en formas de ponerlas en práctica que harán de su sitio web sea más fácil y agradable. Haga información sobre herramientas interesantes, o considerar formas de añadir contenido descargable ("DLC" para todos los jugadores que no) como un premio o incentivo. Mediante la observación y la aplicación creativa, sus sitios web se hará más atractivo y más fácil de usar. Y no olvidemos que al hacer la investigación es muy divertido!

Recursos adicionales

• Introducción a Patrones de Diseño Un recurso de buen principiante para aprender acerca de los patrones de diseño.
• Arte del Diseño de Juego Este libro enseña los fundamentos del diseño del juego. Capítulos de muestra están disponibles para descargar.
• Diseño de Interacción de Patrones Una gran herramienta para intercambio de ideas de soluciones específicas para satisfacer las necesidades de los usuarios. Tiene una lista de patrones y descripciones detalladas.
• Diseño de Yahoo Archivo de Patrones La madre de todas las bibliotecas de diseño de patrones.
• Las barras de desplazamiento vertical de encargo y deslizadores Un punto de partida para un menú deslizante vertical.
• Patternry Un recurso de la interfaz de usuario maravillosa, con ejemplos y de cómo-a.
• Gamification.org Este wiki está dedicado a explorar formas de integrar la mecánica del juego en entornos que no son juegos con el fin de aumentar la participación.

 

0

Cómo crear animaciones Web Con Paper.js

La Web se está empezando a utilizar la animación también. Durante años, los archivos GIF animados y Flash gobernados. Texto movido y brilló, pero nunca fue perfecta. Animaciones había cajas a su alrededor como los vídeos de YouTube. HTML5 canvas todo cambia sobre la animación web. El canvas elemento hace posible la integración de los dibujos y animaciones con el resto de la página. Lo puedes combinar con el texto y hacer animaciones interactivas. Este mecanismo de dibujo es de gran alcance, pero muy bajo nivel. Animaciones obtener más poder y necesita menos código, cuando se combina el canvas la etiqueta con el más alto nivel, tales como bibliotecas Paper.js . Este artículo introduce HTML5 animación y le guía a través de la creación de una animación de las semillas de diente de león en el viento.

Neat es fácil, pero desordenado es difícil

Computadoras encanta limpio. Ellos hacen las hojas de cálculo y hacer las estadísticas y las curvas de la trama multivariados, siempre dentro de las líneas de color. En el mundo real, las cosas más simples son sucios. Las hojas que caen de los árboles, las salpicaduras de agua - todas las interacciones que nos rodean se sienten poco simple debido a que estamos acostumbrados a ellos, pero pequeñas ráfagas de viento son en realidad desordenada e impredecible. Para este artículo, vamos a animar a las semillas de diente de león que soplan en la brisa. Dientes de león son difíciles porque todos sabemos lo que parecen: les hemos sentido y tocado sus semillas fuera. Objetos comunes producir un reconocimiento instantáneo y los sentimientos. No tengo que decirte lo que son los dientes de león - que acaba de saber. Dientes de león son un caos de semillas apilados uno encima del otro. (Imagen: Arnoldius ) Nuestra animación de diente de león nunca reproducir la complejidad de lo real, y funcionará mejor si no lo intentamos: que sea demasiado cerca de la real y que se siente raro. En su lugar, vamos a crear un diente de león estilizada que hace que la impresión correcta, sin todos los detalles.

Paper.js

Dibujo de formas simples con el canvas la etiqueta, sin ningún tipo de bibliotecas especiales de giro, es fácil. Crear un canvas : A continuación, agregue un poco de JavaScript. Hojas de trucos para el lienzo que muestran los aspectos básicos, pero cuando te metes en más de dibujo serio, usted querrá una biblioteca de más alto nivel, como Paper.js . Paper.js es una biblioteca JavaScript de dibujos y animaciones. Se basa en gran medida de Scriptographer , un lenguaje de scripting de Adobe Illustrator . Puede escribir código JavaScript con Paper.js , pero la mayoría de las veces usted estará trabajando con una variante de JavaScript llamada PaperScript. Paper.js se llama " La navaja suiza de los gráficos vectoriales de secuencias de comandos , "y el" vector "de todo es importante. Hay dos tipos básicos de gráficos, vectorizados y trama . Los gráficos de trama son como las fotografías tomadas con su cámara: rectángulos grandes con mapas que indican el color de cada píxel. Ampliar ellos y obtendrás puntos borrosos. Los gráficos vectoriales son como se conectan los puntos de las fotos: son conjuntos de líneas y formas que dan instrucciones sobre la forma de dibujar la imagen en cualquier tamaño. Uso de gráficos de vectores, se puede hacer una imagen de la letra Z muy grande y todavía se ven más nítidos. Si usted se convirtió en una trama gráfica de tomar una foto de ella y luego sopla para arriba, la carta tendría todo borroso. Librerías gráficas vectoriales son perfectas para la animación ya que hacen el cambio de tamaño, rotar y mover objetos fácil. También son mucho más rápido, porque el programa tiene instrucciones para dibujar cada objeto en lugar de tener que averiguarlo. La página de Paper.js ejemplos muestran algunas de las cosas asombrosas que usted puede hacer con gráficos vectorizados. El diente de león es un ejemplo de funcionamiento completo, y usted puede ver todas las que se ejecuta en la página de ejemplo . También puede cambiar el código haciendo clic en el botón "Editar", ver los cambios vivir, y copie y pegue el código en su propio sitio web. A lo largo del artículo, vamos a explicar cada parte del código a su vez, pero ten en cuenta que para ejecutar el código de usted mismo, usted tendrá que dirigirse a la página de ejemplo y copiar y pegarlo en su propio entorno .

Nuestro dibujo de diente de león

El primer paso consiste en importar nuestro código JavaScript y archivos PaperScript. El código PaperScript para el funcionamiento de la animación se declara como text/paperscript . Ahora estamos listos para empezar a dibujar. La primera parte de nuestra diente de león es el tallo. El tallo es el arco verde, con un círculo en la parte superior de la bombilla. Vamos a hacer las dos formas con un camino , una lista de formas, puntos y líneas que el navegador se encargó de mostrar. Las rutas son los elementos básicos de la animación. Hacen líneas, curvas y polígonos. También se pueden rellenar para hacer formas complejas. Nuestro camino es el siguiente: Nuestro camino es un arco, así que necesita tres puntos: el inicio, el final y un punto medio a través del arco. Tres puntos son suficientes para definir cualquier arco que necesitamos. El arcTo función dibuja la línea entre ellos. El elemento de ruta también es compatible con información de estilo, como el color del trazo y el grosor del trazo; #567e37 y 5 hará que nuestra línea de arco verde y frondosa. Paper.js compatible con las definiciones del mismo color como CSS. Podemos añadir algunos elementos más para hacer todo más fácil de ver: Totalmente seleccionar la ruta de acceso mostrará unas líneas que nos muestre el arco; el círculo rojo nos muestra dónde está el punto a través. La raíz termina con un círculo para mostrar el bulbo de la flor y nos dan un lugar para colocar todas las semillas. Los círculos son mucho más fáciles de Paper.js que en directo canvas . Una línea de código dibuja nuestro círculo, uno más hace que sea verde, y ahora estamos listos para agregar nuestras semillas.

Una vez extraídas las semillas

Cada semilla tiene un bulbo, un tallo pequeño y una parte tenue en la parte superior. (Imagen: Hmbascom ) Nuestra semilla comienza con un pequeño óvalo de la bombilla y un arco para el vástago. El óvalo es un rectángulo con esquinas redondeadas: El tallo de la semilla es otro arco, pero éste es mucho más delgado que el tallo de la flor: Los mechones son más arcos con un círculo al final de cada línea. Cada semilla tiene un número aleatorio de mechones que comienzan en la parte superior del arco del vástago y la curva hacia fuera en direcciones diferentes. La aleatoriedad hace que se vean un poco desordenado y por lo tanto más natural. Cada semilla tiene un número aleatorio de jirones, entre 4 y 10. Ahora que hemos llegado a la semilla, tenemos que gestionar, y más tarde, vamos a querer mover y rotar la misma. La semilla se compone de un montón de partes, y no quiero tener que gestionar cada uno por separado. Paper.js tiene un buen grupo de objetos. Grupos de asociar un conjunto de objetos juntos para que podamos manipular a la vez. El último paso es empaquetar nuestra semilla en un objeto reutilizable llamada Seed . Añadimos todo el código que hemos estado escribiendo una nueva función con el nombre de Seed y agregar una función para crear las variables iniciales. En este ejemplo se llama a esa función create , pero puede que sea lo que quieras. El create función dibuja la semilla a la hora especificada punto , y el shortStem booleano nos dice si se trata de un tallo corto. Pronto nos ocuparemos de tallo corto semillas un poco más tarde. Este tipo de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript. Nuestras semillas se verá así cuando los dibuja: La Seed objeto atrae nuestras semillas de diente de león al azar. Ahora podemos añadir a nuestra flor.

Añadir un poco de caos

Las semillas se verá mejor cuando el espacio fuera de todo el círculo de nuestra bombilla de diente de león para sentirse como un halo de semillas. El bulbo es un círculo, y el círculo es un camino, por lo que puede obtener cada punto de la ruta. Esto hará que un círculo de semillas alrededor de la bombilla, pero dejan un espacio en el centro. Vamos a añadir unas cuantas semillas más para llenar en el centro. Estamos dando a los centros de semillas de corto surge de modo que muestren el blanco de los mechones más que el beige de los tallos. Las semillas en el centro será montón al azar, y haremos el diente de león mira muy bien desordenado. Ahora podemos hacer que vuele.

La animación de The Seeds

Viento empuja las semillas en patrones complejos, y dos semillas nunca soplar la misma manera. Queremos que se vean reales, por lo que vamos a necesitar un poco más de aleatoriedad. La reproducción de viento real es demasiado complicado, así que vamos a hacer que las semillas flotando en un patrón aleatorio de aspecto. Cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como un destino final: El rotateMove función de cada semilla lleva hacia su punto de destino y lo hace girar. Podemos trabajar con nuestro objeto de semillas como un grupo para rotar y mover con una sola función. Esta función se moverá la semilla hasta que es fuera de la pantalla. Llamar rotateMove para cada fotograma de la animación hará que el flotador de semillas a través de la pantalla. Paper.js nos da una manera fácil de hacer animaciones con la onFrame la función, cuando ponemos en práctica onFrame , Paper.js lo llamará para cada fotograma de la animación. Con cada marco, repetir cada semilla y se mueven por la pantalla. Las semillas se deslizan y giran un poco más cerca al punto de destino con cada fotograma de la animación. A partir de todas las semillas en el mismo punto y final a la medida, aparte hace muy bien el espacio a medida que se mueven. No queremos que todas las semillas que caen a la vez, así que vamos a utilizar un temporizador para que se alejen. El temporizador de espera durante un segundo antes de liberar la semilla que viene, dando una sensación de diente de león nuestra flotante agradable. Un poco de hierba verde y cielo azul como imagen de fondo para nuestra canvas lo pone todo en su contexto. Ahora tenemos un diente de león con las semillas que flotan en la brisa. Ver el diente de león corriendo de aquí . Usted puede editar y ejecutar el código fuente como parte de la animación o descargarlo de la página de GitHub de diente de león .

Paper.js en el mundo real

Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero usted debe saber algunas trampas antes de usarlo en su sitio web.

No funciona en navegadores antiguos

Todos los dibujos Paper.js utilizar el canvas la etiqueta y requieren HTML5. Esto significa que se requiere Internet Explorer 9 +, Firefox 4 +, Safari o Chrome 5 +. Si su sitio web debe ser compatible con los navegadores más antiguos, entonces usted no será capaz de utilizar canvas . No hay manera de evitar este requisito, si usted necesita los navegadores más antiguos, que está fuera de suerte. A medida que el sitio web de Paper.js dice: " Vamos a seguir adelante! ".

El rendimiento puede ser lento

Paper.js puede hacer que un navegador detendría incluso si el navegador soporta HTML5. Pixar vuelve a Buzz y Woody en enormes granjas de servidores - lo único que consigue es MacBook barata del usuario. No sólo son las computadoras portátiles más lentos que los clústeres de servidores, pero los navegadores empeorar las cosas que hacen que el canvas la etiqueta con la CPU en lugar de la GPU . Juegos como Halo y Rage aprovechar el procesador gráfico en su tarjeta de vídeo para hacer lanzadores de cohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que el mismo equipo que se encarga de complejos juegos de video sin problemas puede hacer que las semillas de diente de león flotante mira lenta y desigual. Asegúrese de probar todas sus animaciones con hardware más lento, y ver el uso de la CPU. Utilice los grupos para reducir al mínimo los cálculos, y tener mucho cuidado con lo que haces en cada invocación de la onFrame función.

Los dispositivos móviles son más lentas

El rendimiento móvil es aún peor. La mayoría de dispositivos móviles admiten canvas , pero la mayoría son demasiado lentos para hacer que canvas y animaciones. Dispositivos aún más poderosos, como el iPad 2, no puede manejar las semillas de diente de león sin problemas.

No es compatible con eventos de nivel de objeto

Otras bibliotecas de dibujo, como SVG (ver más abajo), el apoyo a nivel de objeto eventos de ratón y teclado. Estos acontecimientos hacen que sea fácil de responder cuando una ruta o un polígono se hace clic, se cernía sobre o tocado. El canvas la etiqueta no es compatible a nivel de objeto eventos. Paper.js tiene algunas funciones básicas para la prueba de posicionamiento , pero es de muy bajo nivel. Usted puede escuchar el ratón y el teclado de eventos en todo el lienzo, pero usted necesita para manejar la cartografía aquellos eventos a los controles individuales.

¿Qué pasa con SVG?

El SVG (Scalable Vector Graphics) especificación fue definida hace 10 años, pero llegó a la vanguardia con las bibliotecas de apoyo tales como Raphaël.js , que hacen que sea fácil de generar imágenes SVG con JavaScript. SVG es potente, funciona bien para imágenes más pequeñas, y es compatible con todo el camino de regreso a Internet Explorer 7 con la conversión a VML (Vector Markup Language). SVG es la mejor opción si lo que necesita para soportar los navegadores más antiguos. Los verdaderos problemas son el soporte SVG con la velocidad, el futuro y los dispositivos móviles. Cada fabricante del navegador está trabajando activamente en la fabricación de canvas más rápido. Safari 5 ya ofrece aceleración de hardware con la GPU para la canvas , y el resto están trabajando en ello. SVG también es compatible en los dispositivos Android. Hay una creciente comunidad en torno canvas , la nueva tecnología que los fabricantes se están centrando en. Ellos están añadiendo nuevas características, corrección de bugs y lo que es mejor cada día.

Otras Bibliotecas lienzo de dibujo

Paper.js no es la única opción para canvas . Processing.js , desde el creador de jQuery , los puertos del procesamiento de lenguaje de programación JavaScript. Es compatible con animaciones y tiene muchos ejemplos . El three.js motor es compatible con canvas y el WebGL biblioteca, y se centra más en 3-D los dibujos. Google Dart también apoyará canvas con una función de representar a los objetos. Paper.js es una biblioteca madura, con una comunidad muy positiva en el Grupo Paper.js Google y muchos ejemplos más impresionantes y bien documentado. Echa un vistazo a algunas de las cosas maravillosas que la gente está haciendo con él.

Más ejemplos Paper.js

El diente de león es sólo el comienzo. A continuación se presentan algunas otras animaciones impresionantes escritos en Paper.js.

• Ejemplos , Paper.js cuenta con una página llena de ejemplos increíbles. Voronoi es uno de los mejores. Asegúrese de presionar la barra espaciadora para ver los caminos. Más ejemplos se encuentran en la carpeta de GitHub .
• Nardove , medusas, Ricardo Sánchez se escriben con Paper.js y un estanque koi escrito con Processing.js. Espera un minuto, las medusas son tímidos.
• " Jardín de nodo en Paper.js ", dijo Andrew Berg
• " El programa de reciclaje de HBO "Una infografía que he creado con Paper.js para mostrar con qué frecuencia distinta serie de HBO utilizar los mismos actores.
• " 20 gestos Multi-Touch que usted debe aprender hoy ", creado Zack Grossbart el tutorial interactivo con la ayuda de Paper.js.

¿Dónde está tu amazingness Paper.js? (AL)

• Por Zack Grossbart
• Our Bestseller: Printed Smashing Book 2

  
• 21 de noviembre 2011
• HTML , HTML5 , JavaScript
• 53 Comentarios

La Web se está empezando a utilizar la animación también. Durante años, los archivos GIF animados y Flash gobernados. Texto movido y brilló, pero nunca fue perfecta. Animaciones había cajas a su alrededor como los vídeos de YouTube. HTML5 canvas todo cambia sobre la animación web. El canvas elemento hace posible la integración de los dibujos y animaciones con el resto de la página. Lo puedes combinar con el texto y hacer animaciones interactivas. Este mecanismo de dibujo es de gran alcance, pero muy bajo nivel. Animaciones obtener más poder y necesita menos código, cuando se combina el canvas la etiqueta con el más alto nivel, tales como bibliotecas Paper.js . Este artículo introduce HTML5 animación y le guía a través de la creación de una animación de las semillas de diente de león en el viento.

Neat es fácil, pero desordenado es difícil

Computadoras encanta limpio. Ellos hacen las hojas de cálculo y hacer las estadísticas y las curvas de la trama multivariados, siempre dentro de las líneas de color. En el mundo real, las cosas más simples son sucios. Las hojas que caen de los árboles, las salpicaduras de agua - todas las interacciones que nos rodean se sienten poco simple debido a que estamos acostumbrados a ellos, pero pequeñas ráfagas de viento son en realidad desordenada e impredecible. Para este artículo, vamos a animar a las semillas de diente de león que soplan en la brisa. Dientes de león son difíciles porque todos sabemos lo que parecen: les hemos sentido y tocado sus semillas fuera. Objetos comunes producir un reconocimiento instantáneo y los sentimientos. No tengo que decirte lo que son los dientes de león - que acaba de saber. Dientes de león son un caos de semillas apilados uno encima del otro. (Imagen: Arnoldius ) Nuestra animación de diente de león nunca reproducir la complejidad de lo real, y funcionará mejor si no lo intentamos: que sea demasiado cerca de la real y que se siente raro. En su lugar, vamos a crear un diente de león estilizada que hace que la impresión correcta, sin todos los detalles.

Paper.js

Dibujo de formas simples con el canvas la etiqueta, sin ningún tipo de bibliotecas especiales de giro, es fácil. Crear un canvas : A continuación, agregue un poco de JavaScript. Hojas de trucos para el lienzo que muestran los aspectos básicos, pero cuando te metes en más de dibujo serio, usted querrá una biblioteca de más alto nivel, como Paper.js . Paper.js es una biblioteca JavaScript de dibujos y animaciones. Se basa en gran medida de Scriptographer , un lenguaje de scripting de Adobe Illustrator . Puede escribir código JavaScript con Paper.js , pero la mayoría de las veces usted estará trabajando con una variante de JavaScript llamada PaperScript. Paper.js se llama " La navaja suiza de los gráficos vectoriales de secuencias de comandos , "y el" vector "de todo es importante. Hay dos tipos básicos de gráficos, vectorizados y trama . Los gráficos de trama son como las fotografías tomadas con su cámara: rectángulos grandes con mapas que indican el color de cada píxel. Ampliar ellos y obtendrás puntos borrosos. Los gráficos vectoriales son como se conectan los puntos de las fotos: son conjuntos de líneas y formas que dan instrucciones sobre la forma de dibujar la imagen en cualquier tamaño. Uso de gráficos de vectores, se puede hacer una imagen de la letra Z muy grande y todavía se ven más nítidos. Si usted se convirtió en una trama gráfica de tomar una foto de ella y luego sopla para arriba, la carta tendría todo borroso. Librerías gráficas vectoriales son perfectas para la animación ya que hacen el cambio de tamaño, rotar y mover objetos fácil. También son mucho más rápido, porque el programa tiene instrucciones para dibujar cada objeto en lugar de tener que averiguarlo. La página de Paper.js ejemplos muestran algunas de las cosas asombrosas que usted puede hacer con gráficos vectorizados. El diente de león es un ejemplo de funcionamiento completo, y usted puede ver todas las que se ejecuta en la página de ejemplo . También puede cambiar el código haciendo clic en el botón "Editar", ver los cambios vivir, y copie y pegue el código en su propio sitio web. A lo largo del artículo, vamos a explicar cada parte del código a su vez, pero ten en cuenta que para ejecutar el código de usted mismo, usted tendrá que dirigirse a la página de ejemplo y copiar y pegarlo en su propio entorno .

Nuestro dibujo de diente de león

El primer paso consiste en importar nuestro código JavaScript y archivos PaperScript. El código PaperScript para el funcionamiento de la animación se declara como text/paperscript . Ahora estamos listos para empezar a dibujar. La primera parte de nuestra diente de león es el tallo. El tallo es el arco verde, con un círculo en la parte superior de la bombilla. Vamos a hacer las dos formas con un camino , una lista de formas, puntos y líneas que el navegador se encargó de mostrar. Las rutas son los elementos básicos de la animación. Hacen líneas, curvas y polígonos. También se pueden rellenar para hacer formas complejas. Nuestro camino es el siguiente: Nuestro camino es un arco, así que necesita tres puntos: el inicio, el final y un punto medio a través del arco. Tres puntos son suficientes para definir cualquier arco que necesitamos. El arcTo función dibuja la línea entre ellos. El elemento de ruta también es compatible con información de estilo, como el color del trazo y el grosor del trazo; #567e37 y 5 hará que nuestra línea de arco verde y frondosa. Paper.js compatible con las definiciones del mismo color como CSS. Podemos añadir algunos elementos más para hacer todo más fácil de ver: Totalmente seleccionar la ruta de acceso mostrará unas líneas que nos muestre el arco; el círculo rojo nos muestra dónde está el punto a través. La raíz termina con un círculo para mostrar el bulbo de la flor y nos dan un lugar para colocar todas las semillas. Los círculos son mucho más fáciles de Paper.js que en directo canvas . Una línea de código dibuja nuestro círculo, uno más hace que sea verde, y ahora estamos listos para agregar nuestras semillas.

Una vez extraídas las semillas

Cada semilla tiene un bulbo, un tallo pequeño y una parte tenue en la parte superior. (Imagen: Hmbascom ) Nuestra semilla comienza con un pequeño óvalo de la bombilla y un arco para el vástago. El óvalo es un rectángulo con esquinas redondeadas: El tallo de la semilla es otro arco, pero éste es mucho más delgado que el tallo de la flor: Los mechones son más arcos con un círculo al final de cada línea. Cada semilla tiene un número aleatorio de mechones que comienzan en la parte superior del arco del vástago y la curva hacia fuera en direcciones diferentes. La aleatoriedad hace que se vean un poco desordenado y por lo tanto más natural. Cada semilla tiene un número aleatorio de jirones, entre 4 y 10. Ahora que hemos llegado a la semilla, tenemos que gestionar, y más tarde, vamos a querer mover y rotar la misma. La semilla se compone de un montón de partes, y no quiero tener que gestionar cada uno por separado. Paper.js tiene un buen grupo de objetos. Grupos de asociar un conjunto de objetos juntos para que podamos manipular a la vez. El último paso es empaquetar nuestra semilla en un objeto reutilizable llamada Seed . Añadimos todo el código que hemos estado escribiendo una nueva función con el nombre de Seed y agregar una función para crear las variables iniciales. En este ejemplo se llama a esa función create , pero puede que sea lo que quieras. El create función dibuja la semilla a la hora especificada punto , y el shortStem booleano nos dice si se trata de un tallo corto. Pronto nos ocuparemos de tallo corto semillas un poco más tarde. Este tipo de funciones no funcionan como constructores en JavaScript, pero son compatibles con PaperScript. Nuestras semillas se verá así cuando los dibuja: La Seed objeto atrae nuestras semillas de diente de león al azar. Ahora podemos añadir a nuestra flor.

Añadir un poco de caos

Las semillas se verá mejor cuando el espacio fuera de todo el círculo de nuestra bombilla de diente de león para sentirse como un halo de semillas. El bulbo es un círculo, y el círculo es un camino, por lo que puede obtener cada punto de la ruta. Esto hará que un círculo de semillas alrededor de la bombilla, pero dejan un espacio en el centro. Vamos a añadir unas cuantas semillas más para llenar en el centro. Estamos dando a los centros de semillas de corto surge de modo que muestren el blanco de los mechones más que el beige de los tallos. Las semillas en el centro será montón al azar, y haremos el diente de león mira muy bien desordenado. Ahora podemos hacer que vuele.

La animación de The Seeds

Viento empuja las semillas en patrones complejos, y dos semillas nunca soplar la misma manera. Queremos que se vean reales, por lo que vamos a necesitar un poco más de aleatoriedad. La reproducción de viento real es demasiado complicado, así que vamos a hacer que las semillas flotando en un patrón aleatorio de aspecto. Cada semilla se le asigna un punto aleatorio en el lado derecho de la pantalla como un destino final: El rotateMove función de cada semilla lleva hacia su punto de destino y lo hace girar. Podemos trabajar con nuestro objeto de semillas como un grupo para rotar y mover con una sola función. Esta función se moverá la semilla hasta que es fuera de la pantalla. Llamar rotateMove para cada fotograma de la animación hará que el flotador de semillas a través de la pantalla. Paper.js nos da una manera fácil de hacer animaciones con la onFrame la función, cuando ponemos en práctica onFrame , Paper.js lo llamará para cada fotograma de la animación. Con cada marco, repetir cada semilla y se mueven por la pantalla. Las semillas se deslizan y giran un poco más cerca al punto de destino con cada fotograma de la animación. A partir de todas las semillas en el mismo punto y final a la medida, aparte hace muy bien el espacio a medida que se mueven. No queremos que todas las semillas que caen a la vez, así que vamos a utilizar un temporizador para que se alejen. El temporizador de espera durante un segundo antes de liberar la semilla que viene, dando una sensación de diente de león nuestra flotante agradable. Un poco de hierba verde y cielo azul como imagen de fondo para nuestra canvas lo pone todo en su contexto. Ahora tenemos un diente de león con las semillas que flotan en la brisa. Ver el diente de león corriendo de aquí . Usted puede editar y ejecutar el código fuente como parte de la animación o descargarlo de la página de GitHub de diente de león .

Paper.js en el mundo real

Paper.js tiene algunos ejemplos impresionantes y un buen modelo de codificación, pero usted debe saber algunas trampas antes de usarlo en su sitio web.

No funciona en navegadores antiguos

Todos los dibujos Paper.js utilizar el canvas la etiqueta y requieren HTML5. Esto significa que se requiere Internet Explorer 9 +, Firefox 4 +, Safari o Chrome 5 +. Si su sitio web debe ser compatible con los navegadores más antiguos, entonces usted no será capaz de utilizar canvas . No hay manera de evitar este requisito, si usted necesita los navegadores más antiguos, que está fuera de suerte. A medida que el sitio web de Paper.js dice: " Vamos a seguir adelante! ".

El rendimiento puede ser lento

Paper.js puede hacer que un navegador detendría incluso si el navegador soporta HTML5. Pixar vuelve a Buzz y Woody en enormes granjas de servidores - lo único que consigue es MacBook barata del usuario. No sólo son las computadoras portátiles más lentos que los clústeres de servidores, pero los navegadores empeorar las cosas que hacen que el canvas la etiqueta con la CPU en lugar de la GPU . Juegos como Halo y Rage aprovechar el procesador gráfico en su tarjeta de vídeo para hacer lanzadores de cohetes y mutantes. La CPU es menos eficiente con los gráficos, por lo que el mismo equipo que se encarga de complejos juegos de video sin problemas puede hacer que las semillas de diente de león flotante mira lenta y desigual. Asegúrese de probar todas sus animaciones con hardware más lento, y ver el uso de la CPU. Utilice los grupos para reducir al mínimo los cálculos, y tener mucho cuidado con lo que haces en cada invocación de la onFrame función.

Los dispositivos móviles son más lentas

El rendimiento móvil es aún peor. La mayoría de dispositivos móviles admiten canvas , pero la mayoría son demasiado lentos para hacer que canvas y animaciones. Dispositivos aún más poderosos, como el iPad 2, no puede manejar las semillas de diente de león sin problemas.

No es compatible con eventos de nivel de objeto

Otras bibliotecas de dibujo, como SVG (ver más abajo), el apoyo a nivel de objeto eventos de ratón y teclado. Estos acontecimientos hacen que sea fácil de responder cuando una ruta o un polígono se hace clic, se cernía sobre o tocado. El canvas la etiqueta no es compatible a nivel de objeto eventos. Paper.js tiene algunas funciones básicas para la prueba de posicionamiento , pero es de muy bajo nivel. Usted puede escuchar el ratón y el teclado de eventos en todo el lienzo, pero usted necesita para manejar la cartografía aquellos eventos a los controles individuales.

¿Qué pasa con SVG?

El SVG (Scalable Vector Graphics) especificación fue definida hace 10 años, pero llegó a la vanguardia con las bibliotecas de apoyo tales como Raphaël.js , que hacen que sea fácil de generar imágenes SVG con JavaScript. SVG es potente, funciona bien para imágenes más pequeñas, y es compatible con todo el camino de regreso a Internet Explorer 7 con la conversión a VML (Vector Markup Language). SVG es la mejor opción si lo que necesita para soportar los navegadores más antiguos. Los verdaderos problemas son el soporte SVG con la velocidad, el futuro y los dispositivos móviles. Cada fabricante del navegador está trabajando activamente en la fabricación de canvas más rápido. Safari 5 ya ofrece aceleración de hardware con la GPU para la canvas , y el resto están trabajando en ello. SVG también es compatible en los dispositivos Android. Hay una creciente comunidad en torno canvas , la nueva tecnología que los fabricantes se están centrando en. Ellos están añadiendo nuevas características, corrección de bugs y lo que es mejor cada día.

Otras Bibliotecas lienzo de dibujo

Paper.js no es la única opción para canvas . Processing.js , desde el creador de jQuery , los puertos del procesamiento de lenguaje de programación JavaScript. Es compatible con animaciones y tiene muchos ejemplos . El three.js motor es compatible con canvas y el WebGL biblioteca, y se centra más en 3-D los dibujos. Google Dart también apoyará canvas con una función de representar a los objetos. Paper.js es una biblioteca madura, con una comunidad muy positiva en el Grupo Paper.js Google y muchos ejemplos más impresionantes y bien documentado. Echa un vistazo a algunas de las cosas maravillosas que la gente está haciendo con él.

Más ejemplos Paper.js

El diente de león es sólo el comienzo. A continuación se presentan algunas otras animaciones impresionantes escritos en Paper.js.

• Ejemplos , Paper.js cuenta con una página llena de ejemplos increíbles. Voronoi es uno de los mejores. Asegúrese de presionar la barra espaciadora para ver los caminos. Más ejemplos se encuentran en la carpeta de GitHub .
• Nardove , medusas, Ricardo Sánchez se escriben con Paper.js y un estanque koi escrito con Processing.js. Espera un minuto, las medusas son tímidos.
• " Jardín de nodo en Paper.js ", dijo Andrew Berg
• " El programa de reciclaje de HBO "Una infografía que he creado con Paper.js para mostrar con qué frecuencia distinta serie de HBO utilizar los mismos actores.
• " 20 gestos Multi-Touch que usted debe aprender hoy ", creado Zack Grossbart el tutorial interactivo con la ayuda de Paper.js.

¿Dónde está tu amazingness Paper.js?  

0

Diseños premiados de Periódicos

De impresión y Web son diferentes las técnicas tradicionales de diseño de impresión, en particular un formato avanzado, no son aplicables a la Web como CSS no ofrece instrumentos sofisticados para diseñar diseños de este tipo (por ejemplo, texto flotando alrededor de una imagen incrustada;. Algunos "flotan" las técnicas de proporcionar dichos resultados, sin embargo, producir código fuente hinchado igual de bien). Al mismo tiempo la flexibilidad de la red es difícilmente aplicable a imprimir ya que no hay manera de personalizar un periódico tradicional para la conveniencia del lector. Aparte de eso, la guía de lectura es muy diferente de la línea de lectura: en el segundo tanto líder y la longitud de la línea son generalmente mucho más corto. Sin embargo, hay un número de principios fundamentales que a menudo se están utilizando en ambos medios. En los últimos años los periódicos y sitios web comenzaron a aplicar los mismos principios de presentación de los datos, tales como el uso intensivo de los espacios en blanco y el diseño de la red basada en . Los resultados a veces pueden ser muy similares, pero a menudo no tienen casi nada en común. Este número de serie de la inspiración Lunes se supone que le proporcionará algunos ejemplos de diseños de periódicos en circulación que han sido galardonados con prestigiosos premios (ver referencias al final de este post), y la demostración de métodos inusuales de diseño de periódicos. Tenga en cuenta que

• es posible que desee echar un vistazo al artículo de Visualización de Datos y la infografía que hemos presentado anteriormente,
• todas las imágenes se puede hacer clic y el plomo a las fuentes de las que han sido tomadas.

El Economista (Madrid, España)

El Economista utiliza un muy tradicional, el diseño del periódico sutil y único. Tenga en cuenta lo bien que la tipografía refleja el peso de los artículos individuales. Infografía apoyar el contenido y los titulares están rodeados por gran cantidad de espacio en blanco.

Äripäev (Tallinn, Estonia)

Äripäev firma 's es el uso intensivo de la tipografía. El diseño puede parecer a veces de hacinamiento, sin embargo, el embalaje está siempre limpio, fácil de digerir y fácil de leer. Tenga en cuenta la diferencia en pesos de los colores: el color, gris y rojo se aplican con cuidado y moderación.

De Morgen (Bélgica)

De Morgen se centra en un envase atractivo y un diseño visualmente atractivo. Los colores vivos ofrecer a los lectores más eye-candy, sin embargo, también tienen una función, ya que por ejemplo, las citas claramente separada de la del artículo en general. No hay noticias se centran, de fondo de colores diferentes de una página a otra.

Politiken (Copenhague, Dinamarca)

Politiken tiene un diseño muy legible agradable a la vista, con colores suaves y neutros. Nótese el envase limpio horizontal en la imagen de la cara de la derecha a continuación. La nitidez de la tipografía es impresionante.

0

Yo no creo en la globalización del diseño: Javier Errea

 

0

¿Así que quieres ser un diseñador de carteles modernos?

 

0

Nuestro enfoque