Interfaz de usuario de Yahoo! Blog (YUIBlog)

CSS Consejo rápido: Cómo evitar una "caída de flotación" en IE6

28 de octubre de 2010 a las 1:52 pm por Thierry Koblentz | En CSS 101 y Desarrollo | 4 comentarios

A pesar de que este comportamiento es a menudo llamado un " descenso del flotador "o un" flotador gota ", la columna que cae no tiene que ser un flotador ... sólo tiene que ser más amplio que el espacio asignado para ello. Tenga en cuenta que esto es por casualidad y es un comportamiento común en todos los navegadores, si una columna es "demasiado amplia", y luego caerá.

Lo que hace el IE 6 se destacan es que este navegador no es totalmente compatible con el width la propiedad (ni height para el caso). Por lo tanto, permite a los contenedores de crecer para adaptarse a su contenido. Este es el crecimiento que genera la caída, porque la caja no puede caber en su espacio diseñado.

Por lo general, los culpables son los elementos que no se ajustan (por ejemplo, imágenes, URLs, etc), pero el estilo de fuente (por ejemplo, IE y cursiva ) puede ser responsable también.

Por ejemplo, para hacer que la caída de la columna a la derecha en YUIBlog en IE 6, todo lo que tenía que hacer es al estilo de una de las imágenes en el carril derecho con una anchura superior a 210 píxeles. Esa imagen obliga IE 6 para aumentar la anchura de la columna de la derecha que entonces ya no puede adaptarse al lado de la columna de la izquierda.

Las soluciones habituales:

word-wrap: break-word;

Cadenas de wrap rompiendo en la orilla derecha del cuadro.

wbr con wbr:after {content:"\00200B"} para la Ópera

El wbr elemento representa una oportunidad de salto de línea. Inserción de wbr dentro de cadenas largas s permite que el navegador para añadir un salto de línea si es necesario.

overflow-x:hidden;

Cualquier contenido más amplio que el contenedor es de corte en el borde derecho de la caja dijo.

Tenga en cuenta que las dos primeras soluciones sólo funcionan en las cuerdas y no evitar que las imágenes, etc de la expansión de la caja.

Cuando las correcciones conocidas no corta

Hace unas semanas, se me pidió para arreglar una "gota flotante" en una de las páginas de Yahoo! Finanzas. En los navegadores modernos, una larga cadena fue saliendo del carril de la derecha (imagen), pero en IE 6, que hizo la misma cadena caída de columna de la derecha debajo de la tapa (imagen). Por desgracia, que el contenido provino de un proveedor, por lo que la edición del margen de beneficio no era una opción.

Debido a la naturaleza de la cadena, que era una lista separada por comas de los símbolos, las revisiones anteriores no fueron satisfactorios. Romper esa lista en un lugar arbitrario era mejor que cortarla, pero todavía no es una solución viable ...

Hacer que IE 6 se comportan como los grandes

El truco para hacer que IE 6 se comportan como cualquier navegador moderno que hay es el estilo de la caja con un margen negativo de la derecha (más position:relative ).

Demo en vivo

Sin la corrección

Captura de pantalla para aquellos que no ven esta página en IE 6.

Con la corrección

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

El margen negativo puede ser de cualquier valor, siempre y cuando este valor es mayor que el delta entre el ancho asignado y la anchura real de la caja expandida. Es esta declaración evita que el flotador gota. El propósito de position:relative es hacer que IE mostrar el contenido fuera de los límites del contenedor primario.

Porque me gusta elementos de estilo de la misma en todos los ámbitos, por lo general no lo hacen caja de arena a esta regla.

Cosas a tener en cuenta

Este hack mantiene la columna en su lugar, pero no impide que el recipiente de conseguir más amplio. Esto significa que usted no puede aplicar estilo al elemento con un fondo o un borde, ya que se pintó fuera de la envoltura. Aquí hay una captura de pantalla de fondo y el borde lo que parece cuando se aplica en combinación con esta técnica en IE 6:

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUI jQuery y 3: Una historia de dos bibliotecas de JavaScript

27 de octubre de 2010 a las 2:08 pm por Marcos Rall | En Desarrollo y Implementaciones YUI | 5 comentarios

Recientemente tuve la oportunidad de construir mi primer frente JavaScript aplicación final. Lo que sigue es una breve historia del descubrimiento y la evolución que se produce al intentar utilizar herramientas que no son aptos para el trabajo a mano. Se trata de un relato de los aprendizajes adquiridos en el desarrollo de la aplicación frente a un mismo fin con dos bibliotecas muy diferentes, y YUI jQuery 3. Los detalles del cliente y el proyecto se han omitido intencionalmente.

Información general

El proyecto consistió en la refactorización de varias herramientas de Flash dispares en una única aplicación interactiva basada en estándares abiertos para un editor de contenido de gran tamaño. De gran importancia, la aplicación tenía que ser altamente optimizada con un pequeño pie de impresión inicial, debido al gran número de impresiones de páginas al día el cliente recibe. Varias fases participaron, siendo el primero una prueba inicial de concepto.

El concepto consistió en el desarrollo de una visión de lo que sería la solicitud completa. Consistió en:

• Un archivo semilla inicial (<1 KB) responsable de la carga dinámica de los marcos (por ejemplo, jQuery o YUI 3) y el archivo de la solicitud inicial.
• El desarrollo y la inclusión de plugins jQuery para apoyar un estilo un elemento de formulario y validación, y visualizaciones dinámicas de gráficos.
• La generación y la población de la interfaz de usuario, basándose en las aportaciones de los usuarios, por defecto de configuración y la ubicación de la aplicación dentro del sitio de la editorial.
• El cálculo y la presentación de la información basada en la entrada del usuario.

En aras de la divulgación completa, mi propia experiencia hasta el momento había estado en el desarrollo de soluciones pequeñas, independientes, el tipo de la que normalmente se podría describir como plugins. Estos incluyen componentes dinámicos de interfaz de usuario, tales como carruseles de imágenes, mapas interactivos y widgets de Twitter / Flickr. En el momento de la primera escarceos con JavaScript, jQuery era muy popular, fácil de aprender y me permitió recoger rápidamente los conceptos básicos necesarios para los proyectos en los que estaba trabajando. Sin embargo estos eran todas las unidades independientes y no tenía ninguna necesidad de interactuar con otro código o como parte de una aplicación más amplia.

Primer intento

Al finalizar la primera fase del proyecto, se hizo dolorosamente obvio que estaba tratando con una bestia muy diferente de lo que estaba acostumbrado. Después de haber tenido poca experiencia en la organización del código, el código se convirtió rápidamente en desorganizado, ineficiente y repetitivo. Como resultado, la primera parte de lo que sería una aplicación mucho más grande era lento para cargar. De hecho, tardó ocho segundos para generar que la única prueba de concepto. Un gran cambio que se necesitaba y mientras que yo había considerado el uso de una pequeña biblioteca, como la Base de Edward Dean o John Resig simple de herencia JavaScript patrón de agregar la clase basada en la herencia de jQuery, me decidí a ir un paso más allá.

Lo que quería era un marco completo, maduro en el que desarrollar mi primera aplicación de OO. Algo que efectivamente me guiará en el proceso. Al examinar las bibliotecas disponibles decidí adoptar YUI 3 por las razones siguientes:

• Integrado, la herencia aplicación basada en la ayuda al desarrollo como atributo y la clase de gestión.
• Solución a largo plazo:
  • Soporte para los estándares y la accesibilidad.
  • Financiado por una gran organización bien conocida, Yahoo!
  • Asociado con nombres tan respetados como Douglas Crockford , Zakas Nicolás , y Stoyan Stefanov .
• Optimización del rendimiento:
  • Archivo semilla inicial de 7KB solamente.
  • Lazy-cargados los módulos en la demanda.
  • Entrega de CDN.
• Documentación variada y completa:
  • Yahoo! Developer Network
  • YUI 3 Documentación de la API
  • YUI Theater
  • YUI Library
  • YUI Blog
• La evolución madura y consistente entre versiones.
• Las herramientas integradas de YUI Compressor , YUIDoc , Generador de YUI , y la consola .
• No sólo JavaScript, un marco CSS también.

Take Two

La integración de YUI 3 traído numerosos beneficios directos e indirectos para el proyecto:

• La herencia basada en la arquitectura y la gestión de la clase a través del atributo de la interfaz, y la Base y el Widget clases productoras código performante, reutilizable y organizado.
• La separación de la presentación del modelo y datos usando el Widget de clase para representar puntos de vista alternativos (en línea o superposición) basados ​​en la localización de la aplicación dentro del sitio.
• Caja de arena y dinámico módulo de inclusión a través de YUI.use ().
• Cross-browser de la consola de depuración utilizando la consola de YUI .
• El ahorro, la optimización del rendimiento utilizando YUI Compressor en Eclipse.
• Fácil inserción y la integración de plugins jQuery pre-existentes.
• El ahorro, la documentación automatizada de código usando YUIDoc .

El resultado final fue un cliente feliz y un producto final con tiempos de carga de menos de un segundo (recordando que tuvo 8 segundos para cargar la prueba inicial de concepto).

Lecciones aprendidas

Seleccione la herramienta adecuada para el trabajo

Al leer este post estoy seguro de que algunos lectores verán esto como anti-jQuery. No, en absoluto. jQuery es un proyecto fantástico responsable de muchas innovaciones. Pero, como con cualquier herramienta, tiene sus puntos fuertes y un propósito definido. Su fuerza radica en la normalización de inconsistencias de navegación, la reducción de la barrera de entrada para el principiante y la mejora de la eficiencia de los programadores experimentados. El principal aprendizaje que salió del proyecto fue que no se puede confiar en una herramienta para cada trabajo. YUI jQuery basa en lo que puede ofrecer, pero también hacen un marco de aplicación, así diseñado. Pero es justo decir que tiene un costo, consulte el siguiente punto.

Empinada curva de aprendizaje

Necesitas paciencia, sobre todo al escribir su primera aplicación con una biblioteca familiar como yo lo hice. Sin embargo, la recompensa es inmensa. Al aprender otra biblioteca, no sólo sus habilidades básicas de JavaScript mejorar, también se va a desarrollar una comprensión más profunda de cómo funcionan las bibliotecas y los beneficios que aportan. Trato de aprender algo nuevo acerca de YUI todos los días y cuanto más aprendo, más me siento en el temor del pensamiento y el talento puro que ha ido en la construcción de YUI.

Sólo cargar el contenido cuando lo necesite

Si bien es cierto programación más fácil simplemente para cargar todo lo necesario por adelantado, las mejoras en el rendimiento obtenido como consecuencia directa del contenido de la carga diferida sólo cuando lo necesita es enorme. Este fue uno de los factores clave que contribuyen para mejorar drásticamente el rendimiento de la aplicación.

Interactuar con el DOM lo menos posible

Este punto no se refiere a la biblioteca específica utilizada. En el almacenamiento en caché de los necesarios elementos DOM y la utilización de plantillas HTML más, el tiempo de renderizado de la IU se redujo considerablemente. Los nodos pueden almacenar en caché usando Y.one () mientras que las listas de nodos pueden ser capturados usando Y.all (). También Y.Node.create () fue muy útil para la eficiente conversión de cadenas largas de texto de HTML para los elementos DOM antes de la inserción.

Aprender con el ejemplo, utilizar un CDN

En el uso de la biblioteca de YUI CDN entrega hemos decidido entregar todos los activos del proyecto a través de CDN. Esta fue probablemente la más grande siguiente factor que contribuye a la mejora del rendimiento.

Pub, el bullicio sub

Para los programadores experimentados por ahí, tratar de no reírse de éste. Después de haber sido utilizado para escribir poco más de plugins en el pasado, no tenía ni idea de cómo las aplicaciones deben comunicarse internamente. Incluso después de leer "eventos personalizados permiten la publicación de los momentos más interesantes y eventos en su propio código de forma que otros componentes de la página puede suscribirse a estos eventos y responder a ellos," yo todavía lo perdí.

Como resultado, eventos personalizados de YUI de publicación y suscripción modelo funciona muy bien para la comunicación entre clases y entre objetos. Tu puedes suscribirte antes y después de los acontecimientos e incluir lógica dinámica para eliminar burbujas sobre la base de ciertas condiciones.

Integrar las mejores prácticas en su flujo de trabajo

Uso de Eclipse que fueron capaces de integrar JSLint y el compresor YUI en el proceso de construcción. En pocas palabras, cada vez que se pulsa Ctrl / Cmd + S el código JavaScript está validado y optimizado. Eso significa que usted está probando contra el código optimizado la producción, el grado de la primera línea de código. También significa que usted no se olvidará de optimizar en la frenética carrera final a la fecha de entrega.

Aprender YUI en el Trabajo

A pesar de todo el mundo tiene un estilo de aprendizaje diferente, yo pensé en compartir los recursos que utilicé para aprender YUI con un objetivo específico en mente.

• Vea los episodios relevantes YUI Theater para obtener una visión general de la biblioteca o aprender un módulo específico. Puedo recomendar altamente a partir de:
  • Bienvenido Eric Miraglia de YUI 3
  • Todd Kloots de YUI 3 Azúcar
  • Matt Sweeney YUI 3 Rendimiento
  • Depuración de Lucas Smith en YUI 3
  • Isaac Schlueter en resolver los problemas con YUI 3
  • Eric Ferraiuolo en Web App para el Desarrollo con YUI 3
  • Eventos Luke Smith Evolved
• Lea sobre YUI en Yahoo! Developer Network . Yo trato de leer un poco cada semana y aprender más cada vez que lo vuelva a leer.
• Lea la API de documentación. Si no puede encontrar en YUI Theater o en la red de desarrolladores, profundizar en la API. Incluso vale la pena leer el código directamente.
• Leer y enviar preguntas a la foro sobre YUILibrary.com .
• Juega mucho y diviértete!

Conclusión

YUI 3 es una biblioteca con todas las funciones, madura y en constante evolución adecuada para pequeñas y grandes proyectos. Como delanteros de gama de aplicaciones web se hacen más complejos, la necesidad de las bibliotecas como YUI crecerá. Mientras que para los no iniciados puede ser una experiencia intimidante al principio, si nos atenemos a lo que será recompensado.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUIConf 2010 vende, anunciando dos eventos nocturnos especiales

26 de octubre 2010 a las 3:35 pm por Jenny Donnelly | En Desarrollo y Eventos YUI | Comments Off

YUIConf 2010 se vendieron! Gracias a todos los que se registraron - Esperamos verlos a todos ustedes en noviembre. Ahora estamos dando los toques finales en nuestro calendario, pero se puede echar un vistazo a lo que tenemos en la tienda aquí: http://yuilibrary.com/yuiconf2010/schedule.php .

Cabe destacar:

• A Node.js donde se puede realizar un seguimiento de la rampa sobre todas las cosas emocionantes que están sucediendo con JavaScript del lado del servidor. Tenemos Node.js creador Ryan Dahl presentar y que se sienta en un panel sobre el futuro de la ingeniería de interfaz, y tenemos Dav YUI de vidrio, uno de los primeros en demostrar Nodo-basado en la mejora progresiva utilizando fuera de los componentes estándar de la biblioteca (de YUI 3), que muestra lo que el futuro parece.
• Una pista YQL para ponerse al día sobre cómo aprovechar YQL para acceder a datos desde cualquier lugar en Internet. El equipo de YQL misma estará a su disposición para informarle sobre su último trabajo.
• Los estudios de casos que se exponen el modo en proyectos del mundo real aplicación de YUI en entornos de producción. Los ingenieros de Flickr y Yahoo! Mail va a estar en la mano, y Eric Ferraiuolo - ganador de un premio PayPalX por su reciente trabajo - a estar aquí para hablar de Consejo de la Web , su último YUI 3-basado en proyectos.
• Presentaciones interesantes sobre la forma de ofrecer experiencias móviles / touch.
• Inmersiones profundas en los módulos de YUI, de Autocompletar para Grids CSS a las contribuciones de la Galería.

Todas las sesiones se archivará en vídeo y está disponible en YUI Theater poco después de la conferencia.

Estamos muy contentos de unir fuerzas con la Red de Desarrolladores de Yahoo! para albergar dos eventos nocturnos especiales que estarán abiertas al público en general. Así que, aunque la conferencia ya está agotada, cualquier persona puede asistir a los eventos por la noche mediante la firma en Meetup.com. El espacio es limitado, así que inscríbase pronto! (Asistentes YUIConf no hay que registrarse.)

YUIConf 2010 Panel de Discusión: "El futuro del desarrollo Web" moderada por Ben Galbraith y Dion Almaer
08 de noviembre 2010, 06:30-8 p.m.

Regístrese para participar en el panel de discusión en http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf ha reunido a este distinguido panel para explorar el futuro de la disciplina en un momento de gran cambio. Panelistas programadas incluyen Elaine Wherry, fundador y arquitecto en la interfaz de Meebo, Douglas Crockford, arquitecto JavaScript en Yahoo!; Çelik Tantek, técnico y autor; Dahl Ryan, creador de Node.js, Joe Hewitt, de Facebook, creador de Firebug y uno de los más descargado las aplicaciones móviles de todos los tiempos (de Facebook para iOS), Thomas Sha, fundador YUI de Yahoo!.

YUIConf 2010 Ponencia: "El futuro del proyecto" por Douglas Crockford
10 de noviembre 2010, 6:30-20:00

Regístrate para asistir a la apertura en http://www.meetup.com/BayJax/calendar/15239717/ .

En el desarrollo de software, soñamos con la arquitectura. Esta es la verdadera historia de un sueño.

El cupo es limitado para estos eventos especiales, así que asegúrese de registrarse pronto!

CC fotos:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• Ryan Dahl: http://www.flickr.com/photos/blank22763/4089950858/
• Elaine Wherry: http://www.flickr.com/photos/drewm/3016944830/
• Ben Galbraith: http://www.flickr.com/photos/seanosh/3306056383/

Fotos usadas con permiso:

• Douglas Crockford: http://www.flickr.com/photos/allenr/4482834276/
• Douglas Crockford: http://www.flickr.com/photos/allenr/4341338168/

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

Al anunciar YUI 2.8.2 - actualización de seguridad importante para todos los usuarios de YUI 2.4.0-2.8.1

25 de octubre 2010 a las 11:34 am por Eric Miraglia | En Desarrollo | 6 comentarios

El equipo de YUI YUI 2.8.2 lanzado hoy. Esta versión corrige un defecto relacionado con la seguridad que se introdujo en el comienzo de infraestructura YUI 2 flash componentes con el YUI 2.4.0 versión. Este defecto permite que las hazañas de inyección de JavaScript que se creará con los dominios que alojan afectados YUI .swf archivos. Visite el boletín de seguridad para YUI 2.8.2 para obtener más sobre cómo identificar y reemplazar los archivos afectados .

Si su sitio recibe un YUI 2 de distribución entre las versiones 2.4.0 y 2.8.1, que incluye estos archivos, se ve afectada por esta vulnerabilidad.

Si su sitio YUI 2 cargas de CDN de Yahoo ( yui.yahooapis.com ) o de CDN de Google ( ajax.googleapis.com ), y los archivos no se hospedan en su propio dominio, no se ven afectados. YUI 3 no está afectado por este problema.

Puede descargar YUI 2.8.2 (y versiones actualizadas de YUI 2.4.0-2.8.1) de la página de descargas YUILibrary.com .

Ver el boletín de seguridad para obtener información acerca de cómo determinar si su sitio se ve afectado, la forma de solucionar el problema, y la forma de verificar la corrección.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

En el YUI 3 Galería: Extensiones para SVG, SVG creados para Wow!

18 de octubre 2010 a las 11:18 am por Vicente Hardy | En Desarrollo y YUI 3 Galería | 2 comentarios

Introducción

SVG ( Scalable Vector Graphics ) proporciona una sintaxis declarativa para gráficos interactivos y animados en 2D: formas, imágenes y texto. SVG es parte de la de HTML 5 y SVG especificación es implementada por todos los principales navegadores, incluido Internet Explorer de Microsoft en la versión 9 .

Los SVG-wow.org vitrinas del sitio web lo que puede hacerse hoy con SVG. Las demostraciones de este sitio web fueron creados para el SVG Open de conferencias, donde el SVG Wow! sesiones han sido una tradición desde hace varios años. El SVG Wow! sesiones se iniciaron por Dean Jackson, a continuación, en colaboración con el mismo y luego continuada por Erik Dahlstrom . Erik y yo hemos collorated en la sesión de los 2009 y 2010 las ediciones de la conferencia.

Durante los últimos dos años, las versiones parciales de programa han utilizado cada vez marcos de AJAX, la aplicación de sus características de SVG en lugar de (o además de) HTML. YUI es el marco más utilizado en el sitio web, que utiliza tanto YUI 2 y 3 de YUI .

Voy a empezar con una visión SVG rápida y luego discutir el tipo de demos que Yui apoyo y las extensiones que he añadido a la YUI 3 Galería de hacer que funcione con SVG. (Estas extensiones son ahora de uso gratuito en los términos de la licencia BSD de YUI .)

SVG visión general

Al igual que HTML, SVG es una especificación del W3C. Se proporciona una sintaxis para la descripción de las formas básicas (rectángulos, círculos, líneas, polígonos, elipses, polilíneas), formas arbitrarias (que se describe en términos de segmentos de ruta que pueden ser líneas, las curvas de Bézier cuadráticas o cúbicas), texto e imágenes.

La siguiente imagen es una captura de pantalla de la hoja de estilo alternativo de ejemplo SVG-wow.org y muestra algunas de las características de SVG en juego: la prestación ricos (los efectos de sombra, gradientes, patrones) y formas simples y complejas.

Como las imágenes SVG se definen en términos de atributos de geometría y la representación, es posible que los conviertan en cualquier resolución. Como resultado, las imágenes SVG se pueden ampliar a cualquier tamaño sin perder una calidad de representación alta, por ejemplo cuando se imprime (sin bordes más dentados).

La siguiente vista ampliada muestra la imagen SVG misma mostrado anteriormente, pero se extraigan a una resolución más alta, mientras que la preservación de la alta calidad.

Al igual que HTML, SVG soporta la interactividad: es posible añadir detectores de eventos de objetos gráficos para las interacciones del ratón o el teclado. Por supuesto, soporta SVG Document Object Model, que hace que sea fácil de manipular las diferentes propiedades de los objetos gráficos, como la geometría o el estilo de representación.

Hay mucho a la especificación SVG: estilos avanzados de renderizado (caricias, de llenado, patrones, gradientes), efectos de filtro (manchas, sombras, las matrices de color), un estilo CSS, características avanzadas de texto (como texto en un trazado) y la animación declarativa . Usted puede comprobar fuera de las referencias al final de este mensaje para obtener más información acerca de las características de formato SVG.

SVG y HTML

Con HTML5 , SVG puede ser inline en los documentos HTML sin más preámbulos. Los navegadores están empezando a apoyar esa función (por ejemplo, Firefox 4 ). Por el momento, todos los principales navegadores soportar SVG inline en XHTML, que proporciona la misma funcionalidad. SVG en XHTML sólo requiere que los espacios de nombres están correctamente declarados.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> línea SVG </ h1>

         <Svg xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <-! El contenido SVG aquí ->
         </ Svg>
     </ Body>
 </ Html>
        

Todos los ejemplos de código en esta página usar este medio de procesos en línea SVG en XHTML.

SVG y YUI

SVG soporta animación declarativa. Por ejemplo, puede animar el radio de un <circle> elemento de esta manera:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Círculo>
       

El <animate> etiqueta es tomado de la SMIL pliego de condiciones y, junto con los otros elementos de animación, que proporciona un motor de animación muy poderoso a SVG.

Desafortunadamente, hasta hace poco, el soporte del navegador para la animación SVG era escasa. Se ha mejorado en los últimos dos años, pero Microsoft ha dejado claro que no apoyará la animación declarativa de SVG en Internet Explorer 9.

Como resultado, la mayoría de las versiones parciales de programa en el sitio web SVG-wow.org utiliza animación mediante scripts en lugar de animaciones declarativos. Por un lado, esto es lamentable, porque las animaciones declarativos son más eficientes que las animaciones de secuencias de comandos. Por el lado positivo, animaciones mediante scripts pueden ser muy flexibles, y trabajar a través de implementaciones muy bien.

La necesidad de una solución buena animación mediante scripts es lo que impulsó el uso de YUI en los svg-wow demos. Sin embargo, las versiones parciales de programa también utilizan otras características YUI, en particular, el cargador y el nodo de módulos.

Animación SVG con YUI

Las demos de SVG-wow utilizar YUI para crear ritmos de batería elásticas , las formas de morphing o de texto de rotación y las formas , por ejemplo. Uso de YUI con SVG requiere unos pocos extensiones YUI, voy a describir estos en un momento.

texto giratorio y formas	formas de morphing
elásticas tambor suena

La siguiente muestra cómo YUI es muy útil para animar simple y manipular gráficos SVG.

La animación de la SVG transform atributo

Todos los elementos gráficos SVG tiene una transform atributo. Ese atributo especifica un 2D transformación afín sobre los elementos que se pueden utilizar para escalar, inclinar, girar o traducir.

Las extensiones de SVG-wow.org YUI para SVG permite la animación de la transform atributos de esta manera:

 var anim = new Y.Animate ({
     nodo: '# circleA',
     a partir de: {
         transform: {tx: 0, ty: 0, sx: 2, sy: 2}
     },
     a: {
         transform: {tx: 20, ty: 20, SX: 1, sy: 1}
     },
     transformTemplate: "translate (tx #, # ty) escala (# sx, sy #)",
     Duración: 1
 });
        

Ver las animaciones de transformación pruebas.

Se habrá dado cuenta que los valores de transformación se define en términos de "componentes" (como tx o ty ), que se combinan para formar un valor mediante la transformTemplate se encuentra en el objeto de configuración de la animación.

La plantilla es un mecanismo flexible para la construcción de transformar los valores, mientras que los componentes separados que sea fácil de calcular los valores animados. Este es un ejemplo en el modelo de animación YUI permite una mayor flexibilidad (y más poder expresivo) de un elemento de animación SVG SMIL ( animateTransform ). Con el fin de crear la animación se ha descrito anteriormente, la declaración SMIL equivalente habría sido:

 <circle ...>
     <AnimateTransform attributeName = "transformación" type = "traducir"
                       from = "0,0" a = "20,20" durante = "1s" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformación" type = "escala"
                       from = "2,2" a = "1,1" durante = "1s" begin = "indefinida" />
 </ Círculo>
        

Nótese cómo el fragmento de código anterior requiere múltiples animateTransform elementos que tienen que estar sincronizados: el begin atributo de la primera animación se establece scaleAnim.begin para sincronizar el inicio de las dos animaciones. Una característica interesante del motor de animación YUI es que el momento de la animación (es decir, inicio, final y duración) se puede compartir para aplicar a las propiedades de elementos múltiples.

La extensión YUI para animar transformaciones SVG se utiliza ampliamente, tal como en la cámara y letras animadas ejemplos. El primero utiliza una extensión de YUI 3, mientras que el segundo utiliza una extensión de YUI 2.

Animación de la geometría

Geometría básica

Animación de la geometría de SVG con YUI es bastante simple. Los anima el siguiente ejemplo un <rect> radios elemento anchura, altura y ángulo:

 var anim = new Y.Animate ({
     nodo: '# recta',
     a partir de: {
         Ancho: 200,
         height: 100,
         RX: 5,
         RY: 5
     },
     a: {
         Ancho: 300,
         height: 100,
         RX: 10,
         RY: 10;
     },
     Duración: 2,
     easing: Y.Easing.elasticOut
 });
        

Ver las animaciones de formas pruebas.

Como se mencionó más adelante, algunos cambios bajo el capó YUI hecho este trabajo. Pero desde la perspectiva de un desarrollador, esta animación funciona de la misma forma como la animación de cualquier otro atributo HTML o propiedad CSS.

El <path> 's d atributo

Uno de los atributos geometría es un poco especial: el d atributo en el <path> elemento. El <path> elemento se utiliza para la geometría arbitrariamente complejo. Un <path> puede describir cualquier forma. Su d atributo describe su geometría en función de los segmentos del trazado que pueden ser líneas, arcos, cuadráticos o cúbicos curvas de Bézier (hay unos cuantos comandos más, pero todo el mapa de curvas de Bézier).

La animación de la d atributo también requiere un poco de extensión al motor de animación de YUI, pero con esa extensión, el d atributo puede ser animada como cualquier otro, como se muestra a continuación.

 var anim = new Y.Animate ({
     nodo: "# Patha",
     a partir de: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     a: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     duración de 1 segundo,
     easing: Y.Easing.bounceBack
 });
        

Ver las animaciones caminos pruebas, lo que demuestra, entre otras cosas, una marca de verificación transformándose en una cruz con el tiempo, como se representa en las siguientes imágenes.

La cita de Gandhi demo utiliza esta técnica de animación de la d atributo de modificar las formas en la figura de Gandhi.

Animación de otros atributos de SVG

Por supuesto, la animaciones YUI no se limitan a los atributos de la geometría. Cualquier atributo SVG pueden ser animados. Por ejemplo, los anima siguiente animación de la radio de desenfoque en un filtro de desenfoque horizontal.

 / / Fragmento de SVG
 <Filtro ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / Activar la animación
 var anim = new Y.Animate ({
     nodo: '# BlurFilter',
     a partir de: {stdDeviation: [0, 20]},
     a: {stdDeviation: [0, 0]}
 });
        

Ver las animaciones de filtro pruebas. La imagen siguiente se muestra cómo animar a un desenfoque gaussiano se puede utilizar para hacer la transición entre los estados del botón.

Este tipo de efecto se utiliza en el desenfoque de rápido efecto de demostración, a pesar de que la demo no utilizar la animación declarativa YUI, pero elementos de animación SMIL (a expensas de la única funcionando en navegadores que soporten esta característica, como se explicó anteriormente).

Animación de las propiedades CSS

Al igual que HTML, SVG elementos tienen atributos y también las propiedades CSS. SVG tiene algunas propiedades específicas de CSS . Estas propiedades pueden ser animados, a veces para crear efectos sorprendentes. Por ejemplo, el stroke-dashoffset propiedad puede ser utilizada para simular dibujando una forma.

 / / Fragmento de SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = new Y.Animate ({
     nodo: "# recta",
     a: {"stroke-dashoffset ': 0},
     Duración: 0,25
 });
        

Ver las animaciones tiempos pruebas.

El graffiti demo utiliza esta técnica (aunque sin YUI animación) y también lo hace la cámara de demostración (esta vez con YUI animación).

YUI y SVG: Bajo el capó

El sitio web de SVG-wow.org utiliza tanto YUI YUI 2 y 3 y SVG tiene extensiones específicas para ambos. La siguiente sección de este artículo se centra en los YUI 3 extensiones.

Las extensiones eran necesarias para:

• hacer que el trabajo YUI con las especificidades de SVG DOM
• en cuenta las diferencias de implementación
• añadir soporte para nuevos tipos de atributos tales como SVG transforma
• añadir el tiempo de animación adicional y características de sincronización

Contabilización de las especificidades de SVG DOM

Como se describió anteriormente, los atributos de SVG se pueden animar con elementos declarativos como <animate> . Para apoyar el modelo de animación SVG, SVG valores de atributos tienen tanto un animado y un valor base. Por ejemplo, la r atributo en un <circle> elemento es un SVGAnimatedLength definen como sigue:

 interfaz de SVGAnimatedLength {
   readonly atribuir SVGLength baseVal;
   readonly atribuir animVal SVGLength;
 };

As a result, even in implementations that do not support declarative animation, we need to reach down to the baseVal to read an attribute's value:

var circle = document.getElementById('#myCircle');
var rValue = circle.getAttribute('r').baseVal.value;

Extensions were needed to allow the animation engine to account for the SVG attributes' unusual value model. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
     },

    get: function (anim, attr) {
        // SVG specific handling
     }
 };

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. Por ejemplo:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
       }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
       }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
    });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
     Else {}
        firstAnim = anim;
     }
    previousAnim = anim;
});

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
});

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. Por ejemplo:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
});

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
});

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Conclusión

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

Referencias

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• y mucho, mucho más!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!