Interfaz de usuario de Yahoo! Blog (YUIBlog)

YUI 3 Sugerencia rápida: Agregar tu propio diseño impresionante

Lucas ( @ ls_n ) publicó este fragmento de código en respuesta a una pregunta el otro día, y pensé que valía la pena compartir aquí como un consejo rápido.

Como con la mayoría de selección basado en expresiones idiomáticas, una gran cantidad de poder expresivo YUI 3 proviene de lo que puede hacer una vez que tenga referencia a uno o más HTMLElements - en YUI 3, que significa tener un nodo de referencia, lo que usted consigue generalmente a través de Y.one( selector string ) o Y.all( selector string ) . Por lo tanto, Y.one("#foo"). doSomethingInteresting es un patrón común.

Es fácil de ampliar la expresividad YUI 3 mediante la adición de su propia magia al nodo (y / o lista de nodos). Aquí está una manera de hacer que su extensión modular y reutilizable.

En primer lugar, crear un nuevo módulo personalizado (lo llamaremos node++ ):

  YUI.add ("nodo + + ', function (Y) {
	
	 / / Define una función que se ejecutará en el contexto de un
	 / / Instancia de Node:
	 doSomethingAwesome function () {
		 Y.log ("¿Es algo impresionante aquí.");
	 }

	 / / Usar addMethod añadir doAwesomeThing al prototipo de nodo:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Extender esta función a NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, '0 .0.1 ', {Requiere: [' nodo ']}); 

Lucas lo esencial está aquí .

Con esa definición en la página, node++ se puede use en ningún caso d. En el código de la aplicación, puede hacer:

  YUI (). Uso ("nodo + + ', function (Y) {
	
	 / / Uso de un único nodo:
         . Y.one ('# foo') doAwesomeThing ();

	 / / Usar de una lista de nodos:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Tenga en cuenta que sólo la instancia YUI (s) a la que se unen el node++ módulo tendrá acceso a doAwesomeThing . Una característica de este diseño que te gusta como a construir aplicaciones complejas es que la lógica de su aplicación no tendrá que cambiar si la lista de dependencias para node++ evoluciona - que se gestionan de forma automática en el use() el tiempo, y la dependencia la declaración se queda con el código a la que pertenece.

Buscar conversaciones: Bloglines | technorati

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

YUI Theater - Dav Glass: (. 36 min) "Uso de Node.js y YUI 3"

Ryan trabajo de Dahl en Node.js - y la comunidad se forma alrededor de este proyecto - se ha unido a HTML5 como una de las grandes historias de 2010. YUI ingeniero de Dav Glass ha estado trabajando para hacer YUI 3 un poderoso aliado para los ejecutores Node.js, y en este video que muestra lo que ha hecho hasta ahora - incluyendo demos de widgets progresivamente mejorados que ejecutan el mismo código en el cliente y el servidor. No te lo pierdas.

Si el vídeo incorporar a continuación no se muestran correctamente en su lector de RSS, haga clic a través de ver o descargar la versión de alta resolución del video en YUI Theater .

• Descargar vídeo de alta definición (480p ~ 271MB)
• Descargar vídeo (m4v)
• De alta resolución, la versión transcrita de esta charla está disponible en el sitio YUI Theater

Otros recientes Videos de YUI Theater:

• Alois Reitbauer: dynaTrace Ajax Edition - dynaTrace ofrece una de las herramientas más poderosas para el análisis del rendimiento de las aplicaciones web en Internet Explorer. En esta charla, el ingeniero dynaTrace Alois Reitbauer camina a través de cuatro escenarios específicos de análisis utilizando la interfaz de dynaTrace.
• Ryan Grove: El logro de rendimiento Zen con YUI 3 - Siguiendo las directrices codificadas pueden ayudarle a crear sitios web rápidos, pero la creación de aplicaciones que son limpio, rápido y extensible también implica adoptar un enfoque equilibrado para el rendimiento en cada nivel de su trabajo F2e. YUI 3 está diseñado para ayudarle en este proceso, proporcionando una capa de abstracción del tamaño adecuado con una función de magia de rendimiento y una gran variedad de herramientas que hacen que el código interfaz rápida fácil y divertido para producir. En esta sesión, vamos a explorar el zen de performant JavaScript en el YUI 3 del mundo y te presentará a algunas de las herramientas poderosas YUI 3 pone a su disposición en cada aplicación que escribir.
• Douglas Crockford: Crockford en JavaScript - Escena 6: Loopage - El desarrollo de software se ve obstaculizada por un conjunto específico de errores de diseño que se hicieron en los primeros lenguajes de programación y se repite en todo lo que se ha hecho desde entonces. Y, un poco milagrosamente, JavaScript va a hacer lo correcto, transformando radicalmente la forma en que escribir aplicaciones. Una vez más. En el bucle de la historia, todo ha ocurrido antes, pero nunca ha sucedido así. Es por eso que deben preocuparse por la aparición de JavaScript del lado del servidor y el entusiasmo en torno a proyectos como Node.js - no porque sean en el filo de una tendencia, sino porque están allanando el camino hacia la revolución próxima gran en el software.

Subscribirse a YUI Theater:

• YUI Theater RSS
• YUI Theater en iTunes

Buscar conversaciones: Bloglines | technorati

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

Enfoque de Aplicación: Alquiler de coches expreso

Car Rental Express es la empresa líder de alquiler de coches sitio web independiente de comparación a través de Internet. Permite coches de alquiler en línea de los usuarios en más de 1000 ciudades y aeropuertos de todo el mundo.

Nuestra base de usuarios es en gran parte no técnica, lo que significa que quiere comparar los precios y alquilar coches tan fácilmente como sea posible. Con el relanzamiento de nuestro sitio web en junio de 2010 hemos puesto en marcha muchos de los componentes YUI 2 para ayudar a proporcionar a nuestros clientes una experiencia intuitiva.

¿Qué componentes YUI estamos usando?

Los componentes que hemos estado usando incluyen Connection Manager , Autocompletar , DataSource , Calendario , Animación , JSON , y de contenedores .

¿Por qué elegimos YUI

Al revisar las diferentes bibliotecas de JavaScript que podría utilizar en Alquiler de coches expreso , se encontró que la YUI fue la más completa para nuestras necesidades. Las características más grandes de venta de nosotros era el enfoque muy modular, el YUI llevó a poner en práctica los diferentes patrones de diseño, así como la documentación sólida y ejemplos que se proporcionan. Desde el punto de vista de desarrollo lo que condujo a un rápido desarrollo de nuestra aplicación sin tener que luchar con una biblioteca.

¿Cómo se utiliza YUI

Utilizamos la YUI en un número de maneras. Nuestros 4 componentes más utilizados son Autocompletar, Calendario, contenedores, y el Administrador de conexiones. Estas son algunas de las formas en que usamos cada uno de estos componentes.

Autocompletar

El componente de Autocompletar se utiliza ampliamente en nuestro sitio web para ayudar a los usuarios a encontrar una ciudad o un aeropuerto en el que alquilar un coche. Nos gustó mucho lo fácil que era para poner en práctica este componente, y la rapidez con que responde. Nos caché de resultados de búsqueda del lado del servidor para ayudar a mejorar los resultados de búsqueda, sin embargo, tener el almacenamiento en caché del lado del cliente también ayudó enormemente en la aceleración de la respuesta del componente. Otra de las características que realmente nos llevó a lo fácil que era que los resultados fueron de estilo. Cuando se muestran las localizaciones para el usuario esto fue crucial, ya que necesitábamos para identificar los lugares en los que se encuentran en las ciudades y que se encontraron en los aeropuertos.

Calendario

El componente de calendario también se utiliza en todo el sitio, cuando un inquilino se va llenando de fechas para realizar una búsqueda. Estamos utilizando una versión personalizada de John Peloquin del Calendario intervalo de selección y mostrar en un diálogo de YUI . Básicamente lo que quería hacer era darle al arrendatario una vista de dos meses al momento de elegir sus fechas, así como mostrar lo que visualmente rango de fechas que ha seleccionado actualmente. Una vez más, esto era muy sencillo de implementar utilizando YUI 2 Calendario, y que básicamente se reducía a la creación de un diálogo YUI, la creación del cuerpo para contener un div para el calendario, a continuación, adjuntando un calendario Intervalo YUI a la div.

Contenedores

Utilizamos contenedores YUI lo largo de nuestra página web en un número de maneras diferentes. En el ejemplo anterior que estábamos utilizando un cuadro de diálogo que nos ayude a visualizar el calendario de intervalo cuando un usuario seleccionaba una fecha. En nuestra búsqueda de tasa de la página de resultados que hacen un uso intensivo de los contenedores para dar al arrendatario obtener más información sobre los diferentes aspectos de la agencia de alquiler de coches y el vehículo que potencialmente podría alquilar. La mayoría de los contenedores en esta página son paneles que utilizamos para cada re-lista diferente. Por ejemplo, la pantalla del vehículo dispone de panel:

Las cosas se pusieron un poco más divertido con las calificaciones de las agencias por el dueño nominal. Cuando se muestran las calificaciones, que en realidad queríamos centrar la atención del usuario a los resultados de una agencia recibidas y mostrar esta información en un lugar limpio, fácil de vista así. Al utilizar el control de diálogo hemos sido capaces de limitar la vista y el centro del cuadro de diálogo fácil que nos ayuden a lograr este objetivo. Al establecer un encabezado y pie de página en blanco que hizo un estilo sencillo con sólo añadir los estilos adecuados a nuestro CSS. El resultado final fue un contenedor de notas limpias que le brinda al cliente con la información que desean.

Connection Manager

Connection Manager se utiliza en todo el sitio cada vez que tenemos que tirar de datos a través de una petición XHR. En algunos de los ejemplos anteriores que utilizan este componente para la solicitud de las ciudades y aeropuertos de las implementaitons Autocompletar y tirando de la información de clasificación para la renta nominal de diálogo.

Una forma interesante que utilizan Connection Manager es con nuestro bloque de centro de alquiler que se encuentra en la mayoría de las páginas. Para ayudar con el rendimiento que hacer un montón de página completa en el almacenamiento en caché de muchas de nuestras páginas de contenido. Sin embargo, todavía quería mostrar el bloque dinámico centro de alquiler en estas páginas. Esto nos presenta un problema hemos sido capaces de resolver con Connection Manager. En lugar de tener que romper nuestra página totalmente en caché y caché de los aspectos únicos de la página nos pareció que era más fácil de incluir sólo el bloque de centro de alquiler a través de una solicitud asincrónica simple. Encontramos que esto nos permitió mantener el rendimiento de tener una página totalmente en caché, y aún así mostrar contenido dinámico en nuestra caja de centro de alquiler.

Consideraciones finales

En general hemos estado muy contentos con nuestra elección de utilizar YUI. Nos proporciona una biblioteca modular que está bien documentado, fácil de usar e implementar.

Buscar conversaciones: Bloglines | technorati

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

En la galería de YUI 3: Matt Taylor RaphaelJS Módulo

RaphaelJS es una poderosa biblioteca JavaScript que maneja SVG dibujos y animaciones. Le permite crear fácilmente cuadros SVG y dibujar formas básicas y caminos con mucha facilidad, incluso agrupándolos en conjuntos y aplicar transformaciones a uno o muchos vectores. Puede dibujar formas, manipular imágenes y la animación de todo. RaphaelJS proporciona una buena API para crear y modificar los elementos SVG con facilidad.

Mientras que la biblioteca es impresionante, pero he encontrado que puedo agregar algunas características importantes a los elementos de la biblioteca RaphaelJS con YUI3. He empezado estos esfuerzos con el nuevo módulo de Galería RaphaelJS .

RaphaelJS Lazy Loading y plugins

La primera característica es la pereza de carga, no sólo de la biblioteca RaphaelJS, pero cualquier RaphaelJS complementos que puede necesitar. El módulo de Galería RaphaelJS sólo cargará estos archivos cuando se declara que las va a utilizar dentro de un recinto YUI. Por ejemplo:

 
 YUI ({gallery: la galería-09.22.2010-20-15 '}). Uso (la galería-Raphaël', function (Y) {
 
	 Y.Raphael (). Utilizar (la función de (Rafael) {
		
		 / / Usar Raphael aquí al igual que lo harían fuera de YUI
		 var papel = Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Si el uso de plugins RaphaelJS, especificar sus rutas de acceso en un array y enviarlo como el primer parámetro en el Y.Raphael () utiliza () función.:

 
 YUI ({gallery: la galería-09.22.2010-20-15 '}). Uso (la galería-Raphaël', function (Y) {
 
	 MyPlugins var = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Utilizar (MyPlugins, la función de (Rafael) {
 
		 / / Usar Raphael aquí al igual que lo harían fuera de YUI
		 var papel = Raphael ('myPaper', 500, 500);
		 / / El "papel" que tiene nuevas funciones agregadas por los plugins ahora
	 });
 
 });

La biblioteca RaphaelJS se carga primero, luego los complementos específicos se cargan antes de la función de devolución de llamada se ejecuta con el objeto de Rafael como único parámetro.

Eventos personalizados

Una vez que hayas creado un espacio de dibujo con el objeto de Rafael, a continuación, inmediatamente puede llegar hasta el dibujo. Cuando se llama a métodos como el rect , circle , y la path en el área de dibujo, recibirá de nuevo los objetos que representan vectores SVG. Normalmente, usted tendrá acceso a sus correspondientes elementos DOM a través del node la propiedad. Por ejemplo:

 
 var papel = Raphael ('myPaper', 500, 500);
 var cuadrado = paper.rect (0, 0, 100, 100);

Esto crea un objeto vectorial rectangular, en las coordenadas [0,0], con una anchura y una altura de 100 píxeles. Usted tiene acceso al elemento DOM subyacente (que es un SVG rect elemento), así:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Felicitaciones, usted hace clic en un cuadrado');
 };

Si usted es un ávido usuario de YUI, es probable que quiera algo más que esto. ¿Qué tal una construida en Y.Node así? Al igual que el node la propiedad se refiere a la HTMLElement detrás del objeto SVG, el $node propiedad se refiere a la Y.Node contenedor para ese elemento. Así que usted puede hacer cosas como esta:

 
 cuadrado. $ node.on ('mouseover', function () {
	 alert ('Felicitaciones, usted puede mover un ratón!');
 });

Vamos a intentar algo más complejo ahora. Una interacción con un vector debe ser capaz de causar otros vectores dibujados para actualizar sus estilos, ¿verdad? ¿Qué podemos crear algunos de los bares que todos prestan sus colores depende de dónde uno el ratón se encuentra en un círculo en la página:

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 var. circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', un derrame cerebral: 'negro'});
 
 / / Empujar un montón de rectángulos en una matriz
 var i = 0; rectángulos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({fill: 'rojo', un derrame cerebral: 'amarillo'}.));
 }
 
 / / Bucle a través de los rectángulos, la adición de controladores específicos para cada círculo mousemove
 Y.Array.each (rectángulos, la función (Rect, index) {
	 var i = índice + 1;
	 Circ. $ node.on ("MouseMove ', function (evt) {
		 / / El color de relleno es dinámico, dependiente de la localización de este rectángulo
		 / / En la matriz, así como la ubicación del ratón
		 var = Si circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Si,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r superior,
			 y = evt.clientY - la parte superior;
			 rojo = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6;
		 rect.attr ('relleno', 'rgb (' + rojo + ',' + verde + ',' + azul + ')');
	 });
 });

En este ejemplo se ejecuta aquí , pero como se puede ver en las fotos de abajo, el color de cada barra depende de la ubicación del ratón sobre el círculo, así como el orden de la barra.

Dependiendo del lugar donde el cursor del ratón se encuentra sobre el círculo, los colores de la barra cambia de forma individual.

Así que usted puede ver que $node es un atajo útil, pero nada espectacular. Realmente sería fantástico si cada objeto SVG que usted crea con RaphaelJS podía disparar eventos personalizados . Esto permitiría a los elementos de dibujo individuales para desencadenar eventos personalizados, y nada en la página podía escuchar y responder. Esto puede ser útil en muchas formas. Para empezar, proporciona interacciones ricas entre sus dibujos. La interacción del usuario con un vector de ahora puede notificar a los otros vectores de la interacción de la demanda. Esto significa que puede disparar eventos mediante programación de sus dibujos cuando se cumplan ciertas condiciones. Esto no sólo permite que sus dibujos para notificar a otros vectores, pero nada en la página se puede escuchar pulg

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 var. circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', un derrame cerebral: 'negro'});
 
 / / Hacer arreglos de rectángulos y círculos
 var i = 0, rectángulos = [], círculos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({fill: 'rojo', un derrame cerebral: 'amarillo'}.));
	 circles.push (paper.circle (0,0,20) hide ().);
 }
 Y.Array.each (rectángulos, la función (Rect, index) {
	 var i = índice + 1;
	 Circ. $ node.on ("MouseMove ', function (evt) {
		 var = Si circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + LF,
			 x = evt.clientX - Si,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * + circ.attrs.r superior,
			 y = evt.clientY - la parte superior;
			 newwidth = (((256 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 rojo = (((128 * x) / (2 * circ.attrs.r)) -1) * I / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * I / 6;
		 / / Esta vez no, sólo cambiando el color, sino también el ancho de un rectángulo
		 rect.attr ({
			 Ancho: newwidth,
			 fill: 'rgb (' + rojo + ',' + verde + ',' + azul + ')'
		 });
		 / / Cocción de eventos personalizado para notificar que el ancho de un rectángulo ha cambiado
		 rect.fire ("ancho de cambiar", {width: newwidth, fuente: rect, el orden: índice});
	 });
	
	 / / Cada rectángulo un detector que se dispara el ancho cambiado
	 rect.on ("ancho cambiado ', function (evt) {
		 var = attrs evt.source.attrs;
		 / / Obtener el círculo correspondiente y moverlo a la parte derecha del rectángulo
		 círculos [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 CY: attrs.y,
			 llenar: "cornflowerblue '
		 .}) Show ();
		
	 });
	
 });

Echa un vistazo a este ejemplo funcionando aquí . También se puede ver en la foto a continuación que los círculos se están elaborando en los extremos de la derecha de los rectángulos. Esto está ocurriendo en respuesta a cocción cada rectángulo individuo evento personalizado, ser capturado por un controlador que se mueve el círculo a una posición relativa a los atributos actuales del rectángulo.

Esto abre algunas Posibilidades interesantes para RaphaelJS dentro YUI3. Por ejemplo, qué pasaría si pudiéramos crear un grupo de formas vectoriales con el grupo en sí es la entidad que desencadena eventos con el mundo exterior? Internamente, cada uno de dibujo vectorial podía comunicarse con su contenedor a través de eventos personalizados, y el contenedor que tomar decisiones acerca de qué datos se dispara con el mundo exterior. Esto abre la idea de plena encapsulados, controles interactivos SVG.

Resumen

Con el ascenso de HTML5 y sus tecnologías de satélites, hay muchas más opciones que no sean de Flash para las interacciones ricas. Lo ideal sería que todos los elementos vectoriales de la página debe ser totalmente accesible y estandarizada. Esto abre Posibilidades maravillosos para nosotros para crear los controles de acceso, web estándar sin necesidad de recurrir a Flash. SVG es una opción atractiva debido a que cada vector dibujado en la página está respaldado por un nodo DOM que podemos modificar con Yui como cualquier otro nodo DOM. Eso es lo que permite que el módulo de Galería RaphaelJS para aumentar todos los objetos de SVG siendo creadas por RaphaelJS, y que es la clave para una rica interacción con estos elments de otras partes de la página.

Buscar conversaciones: Bloglines | technorati

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

clearfix Reloaded + desbordamiento: oculto Demystified

clearfix y overflow : hidden puede ser las dos técnicas más populares para limpiar flota sin marcaje estructural.

Este breve artículo trata de mejorar el primer método y arrojar alguna luz sobre el verdadero significado de la segunda.

clearfix

En todo lo que sabes acerca clearfix está mal que explican los problemas que crea este método en todos los navegadores y le sugiero que utilice sólo clearfix sobre los elementos que no están al costado del flotante (por ejemplo, una ventana modal), aunque en calidad de autores que todavía tiene que lidiar con el colapso de los márgenes . Esta página de demostración demuestra el problema.

Margen de colapso de comportamiento en las dos primeras casillas demuestra que es el contenido generado (no vacío) que mantiene el margen inferior dentro de la caja (que tiene todo el sentido de acuerdo a las especificaciones ).

Así que, para crear el diseño de una misma caja a través de navegadores podemos mejorar el método original mediante la generación de contenidos con las dos pseudo-elementos :before y :after :

  . Clearfix: antes,
 . Clearfix: after {
   contenido:; "".    
   display: block;    
   altura: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

No se limite a reemplazar sus normas clearfix con estos otros nuevos en los proyectos existentes, sin embargo, ya que puede tener problemas ya parcheado relacionados con el colapso de los márgenes a través de otros métodos.

overflow

En la mayoría de las discusiones sobre la eliminación de la flota overflow:hidden método aparece, y siempre es derribado por un " Si va a colocar elementos con posición absoluta dentro de la div, se le corte de estos elementos ". Pero esto no es necesario verdad. overflow:hidden siempre recortar los elementos en posición relativa, pero no siempre se esconden seres con posición absoluta. Esto es así porque todo depende del bloque de contención:

10.1 Definición de "bloque de contención":

4. Si el elemento tiene 'position: absolute', el bloque de contención es establecido por el antecesor más próximo con una "posición" de la 'absoluta', 'relativa' o 'fijo', ...

Esto significa que los elementos con posición absoluta se mostrará fuera de una caja con estilo overflow:hidden a menos que su bloque de contención es la propia caja o de un elemento dentro de la caja, dijo.

Puede consultar esta página de demostración para ver cómo funcionan las cosas.

Mejores alternativas

Si usted puede solicitar una anchura al elemento que contiene carrozas, entonces su mejor opción es usar:

  display: inline-block;
 Ancho: <valor explícita <cualquier; 

Para leer más

• Flotadores, flotadores encierran contenidos con CSS puro conocido como la técnica clearfix
• Cómo borrar flota sin marcado estructural
• El nuevo método Clearfix
• 10.1 Definición de "bloque de contención"

Buscar conversaciones: Bloglines | technorati

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

YUI: Horario Lun Ene 29

La próxima entrega de YUI: Horario de apertura será el próximo miércoles, día 29.

YUI 3 gráficos se viene en la próxima versión, y una vista previa de algunos primeros trabajos ya se encuentra en la Galería . Puentes de Tripp estará en la convocatoria, la introducción de la nueva estructura y que muestra cómo las enseñanzas del paquete de YUI 2 de Gráficos informó a la nueva arquitectura, la búsqueda de ese equilibrio delicado entre la flexibilidad y la simplicidad. Ah, y ¿he mencionado no Flash?

También en la cubierta será de Allen Rabinovich , una actualización sobre el increíble trabajo que ha estado haciendo en el rediseño yuilibrary.com. Estamos hablando de todo, aquí: página de inicio, guías de usuario, demos, tutoriales, documentos de la API. Las obras. En muchos sentidos, es una historia completamente nueva, y una mucho mejor.

Vamos a estar en línea 10 a.m.-12 p.m. PDT. Los detalles de la conexión son los mismos, como de costumbre.

1. Marque 1-888-371-8922 para (Skype funciona muy bien para no estadounidenses participantes *)
2. Ingrese el código de participante 47188953 #
3. Únete a la sesión de compartir pantalla (esto le preguntará si desea instalar el plugin de Adobe Connect, si esta es tu primera vez con él)

Y, por último, el hilo del foro para este yuilibrary.com Horario es aquí . Mira allí, comida para llevar para las notas de interés, y la grabación de la llamada después de que se ha hecho. O iniciar la conversación antes de tiempo mediante la publicación de las preguntas, sugerencias de temas o código que le gustaría revisión.

No te olvides de suscribirte al calendario YUI y siga @ yuilibrary en Twitter para las últimas actualizaciones de Horario y otros Intereses YUI.

Esperamos verte allí!

* - Si Skype no es una opción, enviarme un correo electrónico a un número local.

Buscar conversaciones: Bloglines | technorati

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

En el salvaje de 24 de septiembre 2010

Como nos preparamos para YUIConf 2010 y mucho más en los próximos meses, aquí están algunas de las otras cosas que hemos tomado nota de la más grande del mundo YUI:

• YUI Theater encabeza la lista NetTuts de visita obligada Podcasts F2e : Andrew Burgess escribe sobre YUI Theater : "Parece que tan a menudo como un par de veces al mes, Yahoo! trae a los desarrolladores a la vanguardia de la tecnología web para mantener a sus empleados hasta fecha. Para el beneficio de el resto de nosotros, estas conversaciones son grabadas y publicadas. Usted encontrará conocidos desarrolladores como Douglas Crockford y Zakas Nicolás, y charlas sobre todo, desde el rendimiento y la accesibilidad de JavaScript y el DOM. " #
  
• DigitalInsurance.com (un sitio de @ apipkin) Powered by YUI 3 : prolífico colaborador de la galería Anthony Pipkin ha ayudado a producir el nuevo portal de DigitalInsurance.com ., powered by YUI 3 #
  
• Mejora progresiva Usando nada más que JS (@ codepo8 de DavGlass @) : Christian Heilmann escribe en Ajaxian: "la mejora progresiva es todavía un tema confuso para mucha gente que están muy entusiasmados con las capacidades de JavaScript en los navegadores modernos ambientes. Se puede sentir un anacronismo para escribir sus soluciones para un entorno no-JS y luego una vez más, mejora en JavaScript. Yo crecí así así que para mí es una simple cuestión de hacer lo correcto, pero con el mundo actual de las bibliotecas de JavaScript y hacia fuera-de-la-caja de reproductores puede parecer un lastre. Introduzca vidrio Dav del equipo de YUI. Él ha estado girando el concepto de mejora progresiva en su cabeza y como un amante JS y código de fondo "sufridor" que se han propuesto resolver esta cuestión una vez por todas, de una manera JavaScript puro. " Echa un vistazo a el artículo completo para más detalles . #
  
• Más plugins de superposición de YUI 3 de Oliver Andrich : Desde la página de GitHub de Oliver: "Superposición de Plugins es una colección de cinco plugins que escribí para aprender YUI 3 Desarrollos plugin en general. Tres de cada cinco plugins, más o menos imitar los Extras de superposición creados por Eric Ferraiuolo .... Los plugins son cinco:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( Fuente original. ) #
• Diapositivas Reid Burke YUI para HackU de la Carnegie Mellon : Ingeniero YUI (y Yeti autor) Burke Reid fustigó a algunas diapositivas y una YUI 3-basado en motores de presentación de su reciente charla en la Universidad Carnegie Mellon. #
  
• Devcurry en el aprendizaje de la JS Crockford y otros gurús de YUI Theater : Suprotim Agarwal escribe en devcurry esta mañana: "En este post, voy a compartir enlaces de algunos videos de JavaScript muy útiles y conferencias dictadas por los gurús de JavaScript, llenos de información, diversión y ver absolutamente gratis! Aunque la Internet está llena de videos gratis, he elegido sólo un par de ellos, que me pareció la más útil. ¡Prepárate para tomar notas a medida que aprende .. Crockford conferencias de vídeo en JavaScript - Douglas Crockford es un arquitecto de JavaScript y juega un papel importante en el diseño de las nuevas características de la lengua. Sus vídeos son un "must-have" para cualquier desarrollador de JavaScript. YUI Theater -.. Proporciona acceso a las conversaciones de programación libre de los gurús en JavaScript y el desarrollo web "Suprotim pasa a enumerar algunas otras fuentes de contenido, incluyendo otros títulos de cine YUI #
  

Buscar conversaciones: Bloglines | technorati

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