2010 »Diciembre» Yahoo! User Interface Blog (YUIBlog)

YUI 3.3.0 Preview Release 3

Diciembre 22, 2010 a las 24:26 por Eric Miraglia | En Desarrollo | 7 comentarios

En YUIConf en noviembre lanzamos una vista previa de YUI 3.3.0, nuestro próximo gran lanzamiento de la línea de código YUI 3 . Estamos ahora a nuestra versión preliminar en tercer lugar, y si tienes algo de tiempo durante las vacaciones de invierno que nos ayuden a dar patadas a los neumáticos que nos gustaría para que usted pueda darle una vuelta. Usted puede utilizar el archivo de YUI 3.3.0pr1 semilla de la CDN para empezar, descargar la distribución desde YUILibrary.com , o echa un vistazo a la distribución de 3.3.0pr3 alojado en YUIBlog (nota: el rendimiento es muy lento en YUIBlog debido a la falta de combo de manejo; la seguridad de que sus implementaciones basadas en CDN-por lo general será más rápido que el uso correspondiente 3.2.0).

Algunas de las cosas nuevas que buscar en esta versión:

totalmente nuevo Autocompletar (beta)
todos los nuevos gráficos (beta) , impulsado por SVG, VML y lona
totalmente nuevo DataTable (beta) , el comienzo de una actualización más modular de la popular YUI 2 componentes
control de acceso telefónico nueva versión (beta) , una innovadora asumir un control de rango finito o deslizante creado por el diseñador Jeff Yahoo! Conniff
totalmente nuevo cambio de tamaño de utilidad (beta) , proporcionada por Eduardo Lundgren de Liferay, coautor con Nate Cavanaugh de la YUI 3 basadas en AlloyUI extensiones disponibles en la Galería de YUI 3 . (Usted puede conocer a Eduardo y Nate en este recorrido AlloyUI torbellino dispararon YUIConf 2010 .)

Hay mucho más que gusta de YUI 3.3.0, y vamos a compartir más información como la fecha de GA se acerca. En la actualidad, estamos apuntando a una ventana de lanzamiento en la segunda semana de enero. Damos la bienvenida a sus comentarios sobre la vista previa en el foro YUI y en la base de datos boleto si usted encuentra temas de interés cuando se prueba con su propia implementación de la nueva versión.

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

YUILibrary.com Cerrado por Mantenimiento (actualizado: copia de seguridad ahora)

21 de diciembre 2010 a las 9:08 am por YUI Equipo | En Desarrollo | Comments Off

Actualización 12/21/2010 24:32: De nuevo en marcha -, háganos saber si usted ve cualquier problema.

Hemos tomado YUILibrary.com abajo esta mañana por mantenimiento. Esperamos que este trabajo a durar 4-6 horas. Pedimos disculpas por las molestias y vamos a tratar de mantener el tiempo de inactividad lo más corto posible.

Si usted tiene preguntas urgentes de apoyo, mientras tanto, considerar abandonar el canal # yui en Freenode.net, donde usted encontrará a menudo decenas de YUI miembros de la comunidad se ayudan entre sí.

YUIBlog y YUILibrary @ ejecutará las actualizaciones cuando el sitio es una copia de seguridad.

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

YUI 2.9.0 versión de actualización

17 de diciembre de 2010 a las 13:50 por Jenny Donnelly | En Desarrollo | 9 comentarios

La próxima semana el equipo de YUI comenzará a planear para el lanzamiento 2.9.0 para ser enviado en la segunda mitad de Q1 2011. YUI 2.9.0 será el último gran punto de liberación de la línea de código 2.x, y el equipo será agresiva revisión de todas las entradas abiertas contra el YUI 2 del proyecto y, o bien asignarlas a ser una parte de la versión 2.9.0, el cierre de como "NO FIX", o moverlos a la YUI 3 del proyecto.

La realidad de las limitaciones de tiempo y de recursos nos obliga a centrarse en los temas prioritarios que proporcionen un cierre de YUI 2.x y nos permitirá redoblar nuestros esfuerzos en el desarrollo 3.x. Éstos son algunos de los criterios que vamos a utilizar para guiarnos en la decisión de lo que debe incluirse en la versión 2.9.0:

Cuestiones que afectan negativamente los casos de uso principales.
Nuevas cuestiones relacionadas con el lanzamiento del navegador nuevas en la matriz A-grado.
Mejoras y nuevas características se de-prioridad para YUI 2 y considerados para YUI 3.

La transición del equipo de YUI el desarrollo de dos codelines paralelas a centrarse únicamente en YUI 3 no significa el final de la YUI 2 del proyecto. Todas las presentes y futuras versiones YUI 2 se seguirá alojado en el CDN de Yahoo!, el código base de YUI 2 se seguirá alojado en GitHub, y nos gustaría explorar la comunidad basada en el mantenimiento de YUI 2 en el futuro.

A medida que continuamos nuestro proceso de planificación, vamos a estar afinando nuestra agenda, en busca de comentarios de la comunidad, y la comunicación de actualizaciones de progreso en todo el ciclo de lanzamiento.

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

Modo estricto Llega A La Ciudad

14 de diciembre de 2010 a las 14:12 por Douglas Crockford | En Desarrollo | 20 Comentarios

Este es el tiempo y una época cuando la gente de todo el mundo se olvide de sus diferencias y se unan en paz y hermandad para celebrar el primer aniversario de la aprobación de la Asamblea General de ECMA de ECMAScript El lenguaje de programación estándar, Quinta Edición. La característica más importante en la ES5 es el modo estricto de nuevo. Modo estricto es un modo opt-in que las reparaciones o elimina algunas de las características más problemáticas de la lengua.

Especificación de modo estricto

Existen dos maneras de solicitar modo estricto. El primero es insertar este pragma

  "Use strict";

en la parte superior de un archivo o unidad de compilación. Se debe aparecer antes de cualquier otra declaración, pero puede ser precedido por espacios en blanco y comentarios. Tiene la forma de una declaración literal de cadena inútil, por lo que será ignorado por los sistemas de ES3. Esto significa que es posible escribir programas ES5/strict que también se pueden ejecutar en los navegadores más antiguos. Estricto código también puede interactuar con las organizaciones no estricta (o mal) de código, por lo que las funciones estrictas puede llamar a las funciones descuidadas, y las funciones descuidadas pueden llamar a las funciones estrictas. Este alto nivel de compatibilidad hace que la adopción de modo estricto fácil.

Todo el código en el archivo o la unidad de compilación con el "use strict"; exposición de motivos será procesado como código estricto. Hay un problema, sin embargo. Consideraciones sobre el rendimiento en la actualidad nos obligan a concatenar varios archivos JavaScript en conjunto para evitar los retrasos acumulados HTTP. Si un archivo con un "use strict"; exposición de motivos tiene código descuidado se le ha añadido, el código descuidado será procesado como un estricto y probablemente se producirá un error. Hay una regla muy fácil: No mezcle estricta y descuidado en el mismo archivo, pero ya hemos visto algunos sitios famosos de obtener este mal.

La segunda forma consiste en insertar el pragma es la primera declaración de una función. Que declara que toda la función será estricta, incluidas las funciones que están anidados dentro de él. Rigor ámbito de la función los aspectos, el código tan estricto y el código descuidado se pueden mezclar en el mismo archivo. Esta segunda forma funciona muy bien con el patrón del módulo y sus muchas variaciones. La segunda forma es preferible porque evita el peligro de concatenación.

  (Function () {
    "Use strict";
    / / Esta función es estricta ...
 } ());

 (Function () {
    / / Pero esta función es descuidada ...
 } ());

Alcance

Históricamente, JavaScript se ha confundido acerca de cómo las funciones están en el ámbito. A veces parecen estar estáticamente ámbito, pero algunas características hacen que se comporten como si estuvieran de forma dinámica con ámbito. Esto es confuso, por lo que los programas difíciles de leer y entender. El malentendido hace que los insectos. También es un problema para el rendimiento. Estática de alcance variable de unión permitiría a suceder en tiempo de compilación, pero el requisito de alcance dinámico significa que el enlace debe ser aplazado hasta tiempo de ejecución, que viene con una penalización de rendimiento significativa.

El modo estricto requiere que todas las variables de unión se realiza de forma estática. Eso significa que las características que antes requerían enlace dinámico debe ser eliminada o modificada. En concreto, la sentencia with se elimina, y la eval función de la capacidad de alterar el medio ambiente de la persona que llama está severamente restringido.

Una de las ventajas del código estricta es que herramientas como YUI Compressor puede hacer un mejor trabajo cuando el procesamiento.

Que implica variables globales

JavaScript ha implicado variables globales. Si usted no declara explícitamente una variable, una variable global se declara implícitamente para usted. Esto facilita la programación para los principiantes, ya que puede pasar por alto algunas de sus tareas domésticas básicas. Sin embargo, hace que la gestión de los programas de mayor envergadura mucho más difícil y se degrada en forma significativa la fiabilidad. Así que en modo estricto, implícitas variables globales ya no se crean. Usted debe declarar explícitamente todas las variables.

Fuga Mundial

Hay un número de situaciones que podrían causar que this estar vinculado al objeto global. Por ejemplo, si usted se olvida de proporcionar el new prefijo al llamar a una función de constructor, el constructor es this quedará obligado inesperadamente al objeto global, así que en vez de inicializar un nuevo objeto, en su lugar será en silencio la manipulación de las variables globales. En estas situaciones, el modo estricto en cambio, se unen this a undefined , lo que hará que el constructor se producirá una excepción en su lugar, permitiendo que el error se detecta mucho antes.

El fracaso ruidoso

JavaScript siempre ha tenido propiedades de sólo lectura, pero no se podía crear usted mismo hasta el ES5 de Object.createProperty función expuesta esa capacidad. Si se intenta asignar un valor a una propiedad de sólo lectura, que fracasaría en silencio. La tarea no iba a cambiar el valor de la propiedad, pero el programa se procederá como si lo tenía. Este es un riesgo que puede causar la integridad de los programas para entrar en un estado incoherente. En modo estricto, el intento de cambiar una propiedad de sólo lectura se producirá una excepción.

Octal

El octal (base 8) la representación de los números era muy útil cuando se hace a nivel de máquina de programación en las máquinas cuya palabra tamaños eran un múltiplo de 3. Usted necesita octal cuando se trabaja con el CDC 6600 de mainframe, que tenía un tamaño de palabra de 60 bits. Si pudieras leer octal, se puede mirar una palabra hasta 20 dígitos. Dos dígitos representan el código de operación, y una de un dígito identificado de 8 registros. Durante la lenta transición desde los códigos de la máquina para lenguajes de alto nivel, se piensa que es útil para proporcionar formas octales en lenguajes de programación.

En C, una representación muy desafortunada de octalness fue seleccionado: cero a la izquierda. Así en C, 0100 significa 64 no, 100, y 08 es un error no, 8. Aún más, lamentablemente, este anacronismo se ha copiado en casi todas las lenguas modernas, como JavaScript, donde sólo se utiliza para crear errores. No tiene ningún otro propósito. Así que en modo estricto, las formas octales ya no se permite.

Etcétera

El arguments pseudo-matriz se convierte en un poco más amplia, como en ES5. En modo estricto, pierde su callee y la caller propiedades. Esto hace posible para pasar sus arguments en el código no es de confianza, sin renunciar a una gran cantidad de contexto confidencial. Además, el arguments característica de funciones se elimina.

En modo estricto, duplicados de las llaves en un literal de función va a producir un error de sintaxis. Una función no puede tener dos parámetros con el mismo nombre. Una función no puede tener una variable con el mismo nombre que uno de sus parámetros. Una función no puede delete sus propias variables. Un intento de delete una propiedad que no puede configurarse hoy inicia una excepción. Los valores primitivos no están implícitamente envuelta.

Si el programa pasa JSLint , es probable que funcione en modo estricto.

Todavía es un mundo imperfecto

Todavía hay problemas en JavaScript que el modo estricto no se aborda. Por ejemplo, coma inserción es todavía un peligro, y 0,1 + 0,2 no es todavía igual a 0,3. La corrección de estos problemas tendrá que esperar a futuras ediciones.

Por qué es importante El modo estricto

Además de los beneficios obvios para la fiabilidad y la legibilidad del programa, el modo estricto está ayudando a resolver el problema de Mashup. Queremos ser capaces de invitar a código de terceros en nuestras páginas para hacer cosas útiles para nosotros y para nuestros usuarios, sin dar más que el código de la licencia para asumir el control del navegador o tergiversar a sí misma para el usuario o nuestros servidores. Tenemos que limitar el código de terceros. Sistemas como Caja de Google hace esto, pero a un costo significativo en el rendimiento y la incomodidad. Mi propia AdSafe sistema también hace esto, pero a costa de la eliminación de this y [] el subíndice de la lengua, lo que puede hacer que la adopción difícil. El modo estricto, nos permite hacer que el código de terceros con la comodidad y el rendimiento de AdSafe y la expresividad de la Caja. Esto será muy importante que nuestros sitios se vuelven más complejas y más conectados.

El modo estricto no resuelve el problema de XSS. La solución a este problema depende de la W3C que tienen alguna acción positiva .

ES5/strict está ahora en la vista previa, y pronto será equipamiento de serie en todos los navegadores compatibles con las normas en todas partes.

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

La propiedad de posición CSS

14 de diciembre 2010 a las 7:35 am por Thierry Koblentz | En CSS 101 , los de diseño y desarrollo | 6 comentarios

Sobre el autor: Thierry Koblentz es un ingeniero de front-end de Yahoo!
Él es dueño de TJK Diseño , ez css.org- y -css 101.org . Puedes seguir Thierry en Twitter en @ thierrykoblentz .

Esta propiedad se aplica a todos los elementos. Tiene cinco valores posibles:

static
relative
absolute
fixed
inherit

ubicación: estática

Desde la sección 9 modelo de formato visual :

La caja es una caja normal, establecido de acuerdo con el flujo normal . Los top , right , bottom , y la left las propiedades no se aplican.

Las cosas que debemos notar en esta demo

El segundo cuadro muestra exactamente donde lo que sería sin la declaración de posición.
El valor dado a top no se aplica porque en una "estática" contexto, el valor calculado de las compensaciones de la caja es siempre auto .

Cosas para recordar

Si la position característica de un elemento tiene el valor de static , dicho elemento no se dice que está posicionado.
Debido static es el valor inicial (el valor predeterminado), no hay necesidad de incluir un estilo tal en un bloque de declaración a menos que sea para sobreescribir un valor diferente.

position: relative

Desde la sección 9 modelo de formato visual :

La posición de la caja se calcula de acuerdo con el flujo normal (esto se denomina la posición en el flujo normal ). Entonces, el cuadro se compensa con relación a su posición normal. Cuando una caja B es posicionada relativamente, la posición de la caja siguiente se calcula como si B no fueron compensados.

Las cosas que debemos notar en esta demo

Cuadro de 'dos' se ha movido por 300 píxeles, pero el cuadro 'tres', así como los párrafos siguientes se quedó en su lugar. Parece como si la caja se levantó de la página, dejando su huella detrás. Esto se debe a la compensación de una caja relativamente posicionada no perturbe el flujo.
Las cajas posicionadas relativamente superpone los siguientes elementos. Se muestra frente a otras cajas.

Cosas para recordar

Los valores calculados se dejan siempre = derecha y de arriba-abajo =. Si la direction del bloque de contención es ltr , el valor de 'left' y gana 'derecho' se convierte en - "izquierda". Si direction del bloque de contención es rtl , 'right' gana e "izquierda" se ignora. Los autores podrían sacar provecho de cómo funcionan las cosas mediante el establecimiento de igual valor a las propiedades opuestas.
A diferencia con el modelo 'absolute', top , right , bottom , y la left las propiedades no se pueden estirar, ni reducir el tamaño del cuadro (que no pueden cambiar su tamaño).

position: absolute

Desde la sección 9 modelo de formato visual :

Posición de la caja (y posiblemente el tamaño) se especifica con la top , right , bottom y left propiedades. Estas propiedades especifican los desplazamientos con respecto a la caja de bloque que contiene . Una caja posicionada absolutamente se retira completamente del flujo normal (no tiene ningún impacto sobre los hermanos siguientes) y le asigna una posición con respecto a un bloque de contención. También, aunque con posición absoluta cajas tienen márgenes, que no se colapse con ningún otro margen.

Las cosas que debemos notar en esta demo

Debido a que ningún cuadro de desplazamiento se especifica, caja de 'dos' no se movió de su posición original, pero si se hubiera utilizado top:0;left:0; por ejemplo, que el cuadro sería en la esquina superior izquierda de la ventana gráfica .
Diseño inteligente, es como la caja de 'dos' se había labrado con display:none . La caja se ha eliminado de la corriente.
Con 'dos' caja de fuera de la corriente, caja de 'tres' se ha movido en contra de cuadro de 'uno' (los párrafos que han seguido).
Al igual que todos los elementos retirados de la corriente, caja de 'dos' ha horizontal retráctil.

Cosas para recordar

Para cualquier elemento "absoluto" o "fijo" coloca el valor calculado para la display es block .
Para cualquier elemento "absoluto" o "fijo" coloca el valor calculado para la float es none .
Un "bloque de contención 'es un cuadro que establece un contexto de posicionamiento. Se establece por el antepasado más cercano con una "posición" de la "absoluta", "familiar" o "fijo". Esto significa que el cuadro de los padres no puede ser el bloque de contención .
La posición por defecto de una caja posicionada absolutamente no siempre es el mismo que si se le llamaba con la parte superior: 0; left: 0; (en un contexto LTR). Y esto es por dos razones:
1. El bloque de contención para una caja posicionada se establece por el antepasado posicionado más cercano, si no hay ninguno, el contenedor de referencia es el elemento raíz. El bloque que contiene en la que los elementos de raíz vidas es un rectángulo llamado el bloque de contención inicial. Para papel continuo, que tiene las dimensiones de la ventana (una ventana o área de visualización otro en la pantalla) y está anclado en el origen lienzo. Este ejemplo muestra la caja posicionada en relación con el visor (el bloque predeterminado que contiene).
2. El elemento se coloca en referencia a la caja de relleno, no el cuadro contenido ni el cuadro de borde del bloque de contención. Este nuevo ejemplo demuestra que el cuadro 'dos' sería si los bordes de la caja de relleno de no tocar los bordes de la caja de contenido (el bloque de contención es body ).
El tamaño de la caja puede ser el resultado de la top , right , bottom , y left valores de las propiedades. Por ejemplos, poniendo a cero todas las propiedades hará que el tramo caja para que coincida con las dimensiones de la caja de relleno de su bloque de contención. Ver poniendo a cero todos los desplazamientos de caja (nota: IE6 no se estira la caja).
Para crear una capa máscara que no se desplaza con el documento (como en el ejemplo anterior ), utilice fixed en lugar de absolute o el estilo body con position:relative , como el bloque de posicionamiento inicial es la ventana gráfica (diseño html no funciona en IE) . Dado que esta demostración de superposición muestra.
position:absolute desencadenantes hasLayout .

position: fixed

Desde la sección 9 modelo de formato visual :

Posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única diferencia es que para un cuadro fijo posicionado, el bloque de contención es establecido por la ventana . Para los medios continuos , las cajas fijas no se mueven cuando se desplaza el documento. En este sentido, son similares a las imágenes de fondo fijas . Para los medios paginados (donde el contenido del documento se divide en una o más páginas discretas), cajas con posiciones fijas se repiten en cada página. Esto es útil para colocar, por ejemplo, una firma en la parte inferior de cada página. Las cajas con posición fija que son más grandes que el área de la página se recortan. Partes de la caja de posición fija que no son visibles en el bloque de contención inicial no se imprimirá.

Cosas que notar en esta demo :

Desde el posicionamiento fijo es una subcategoría del posicionamiento absoluto, todo lo que sucedió con "absoluto" también es válido para "fijo" (el elemento termo-encogibles, se elimina de la circulación, etc.)
La caja está posicionada en relación a la ventanilla, que no se desplaza con la página.
En IE 6, el cuadro aparece como un cuadro estático , pero hay un "gracioso" solución para eso.
Cuando se imprime el documento, caja de 'dos' aparece en cada página.

Cosas para recordar:

La posición de la caja se calcula de acuerdo con el modelo 'absolute', pero, además, la caja se fija con respecto a alguna referencia. En el caso de la proyección portátil, pantalla, TTY, y los tipos de medios de comunicación de televisión, la caja se fija con respecto a la ventana y no se mueve cuando se desplaza.
El contenido puede ser inaccessile a los usuarios con visión, si parte de la caja se encuentra fuera del área de la vista.
En el caso de el tipo de material, los autores pueden querer evitar que un elemento que aparezca en cada página impresa. Tal vez utilizando una regla @ media, como en:
```
  @ Media print { 
   Logo # {position: static;}
 } 
```
Como position:absolute , position:fixed activará hasLayout en el IE.

posición: heredar

Si position:inherit se especifica para un cuadro dado, entonces tomará el mismo valor computado que la propiedad de los padres de la caja.

Tenga en cuenta que IE 6 y 7 no son compatibles con esta palabra clave, excepto cuando se utiliza con direction y visibility (ver el valor de la propiedad CSS heredan ).

Cosas a tener en cuenta

Desplazamiento de las cajas

Tenga en cuenta que para la absoluta y fijos cajas posicionadas, valores establecidos en el porcentaje de top , right , bottom , y left se calculan de acuerdo a las dimensiones del bloque de contención (que puede no ser la caja de los padres).

'Position' y 'desbordamiento'

Aparecerá un cuadro de estilo con overflow:hidden recortará relativamente elementos posicionados (cajas anidadas), pero no siempre se esconden las posición absoluta. Esto se debe a la caja de los padres no es siempre el bloque de contención (el antepasado más cercano con una "posición" de la 'absoluta', 'relativa' o 'fijo').

En pocas palabras, 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. Esta página de demostración muestra cómo funcionan las cosas.

Márgenes

Los autores pueden utilizar los márgenes de los elementos, independientemente de su esquema de posicionamiento.

El caso de la IE

En IE, el "posicionamiento" de una caja puede ser una bendición o una maldición:

En IE6, position:relative (with haslayout) se puede utilizar para prevenir un cuadro de estilo con márgenes negativos de ser recortado por un contenedor principal (ver cómo el posicionamiento de la caja corrige este problema).
Colocación de un elemento puede "alterar" la pila de cajas en forma de IE 6 y 7, ya que puede establecer un nuevo contexto de apilamiento (ver a un caso de prueba ).

El orden de apilamiento y el nivel de apilamiento

De acuerdo con la secuencia en el código fuente, cajas posicionadas llegar delante de los flotadores y las cajas en el flujo normal.
Los autores pueden especificar los niveles de la pila a través de la propiedad 'z-index' sólo en cajas posicionadas.
En IE6 y 7, el simple hecho de colocar una caja puede establecer un contexto de apilamiento (ver más arriba, " el caso de la IE ").

Los dispositivos móviles

Lea el artículo de PPK, la [Sexta] el valor de posición , para averiguar por qué los vendedores ambulantes del navegador no se puede apoyar a position:fixed .

Lecturas adicionales

Un "fantasma" por analogía DrLangbhani:

Un elemento con posición relativa está siempre compensado con relación a su posición normal en el flujo. En otras palabras, se desplaza con relación a donde sería bajo circunstancias normales, y el cambio no afecta a la disposición de los elementos que lo rodean. Es como un fantasma que ha dejado su cuerpo atrás. Un cuerpo que tiene anchura y la altura y afecta a su entorno, pero es invisible. El cuadro espectral es capaz de moverse pero todavía está conectado al cuerpo de edad en que su posición se mide a partir de ella. Ahora un elemento con posición absoluta es aún más fácil. Ya no afecta a su entorno en todo (se retiró del flujo de diseño). Ahora es un verdadero fantasma sin cuerpo queda atrás. En cuanto a sus elementos del mismo nivel se refiere, es como si ya no existe. Para obtener su posición, mirar a través de cada uno de sus elementos de los padres hasta que encuentre uno, ya sea con position: relative, [position: fixed,] o position: absolute. Este elemento servirá como el punto de referencia. Sólo si usted no encuentra una "posición" elemento va a ser compensado en el documento.

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

En el YUI 3 Galería: El módulo de carrusel

13 de diciembre 2010 a las 11:53 am por Gopal Venkatesan y Frank Fabian | En Desarrollo , la Galería de YUI 3 | 16 comentarios

Sobre los autores: Gopal Venkatesan ( @ g13n ) trabaja para Yahoo! en Bangalore, donde es uno de los decanos de la comunidad de ingeniería frontend, Gopal ha sido el ingeniero jefe de la YUI 2 Carrusel proyecto desde la liberación 2.6.0. Él es también el autor de la nueva YUI 3 Galería Carrusel módulo. Fabián Frank proviene de Alemania y trabaja para Yahoo! en Pekín, Fabián ha sido con Yahoo desde que terminó su Maestría de Investigación de la Universidad de Glasgow.

¿Qué es un carrusel?

Un control de Carrusel proporciona un widget para la navegación entre un conjunto de objetos, como dispuestas horizontal o verticalmente en una región sobrecargada la página. El "carrusel", la metáfora se deriva de una analogía para deslizar los carruseles en los días de fotografía de la película, el control del carrusel puede mantener la fidelidad a esta metáfora, permitiendo una navegación continua y circular a través de todos los bloques de contenido.

El Carrusel es parte de una familia de widgets que permiten la "sobrecarga", un espacio en la página, ofreciendo más contenidos para que el espacio del que cabe dentro de sus dimensiones la vez que proporciona un mecanismo sencillo e intuitivo para el usuario de descubrir y navegar por el contenido adicional . Acordeones, aquí, árboles y ScrollViews son otros ejemplos de este género.

¿Por qué otro control de Carrusel?

YUI 3 necesita una sólida y rica en Carrusel (como hemos hecho en YUI 2 ). El objetivo de diseño para este carrusel era hacer que lo apoye y limpiar y agregar configuraciones adicionales a través de plugins, aprovechándose de YUI 3 ' s de apoyo para la modularidad intrínseca para conservar la ligereza y la velocidad.

YUI 3 Widget Marco

Una de las mayores ventajas de escribir controles personalizados utilizando YUI 3 es el marco Widget (más información sobre el marco Widget: la guía del usuario , en profundidad la introducción de vídeo ). Comparando el Carrusel en YUI 2.8.2 a mi YUI 3 Galería Carrusel , el YUI versión 3 es simple y elegante. Esto se debe a la mayor parte del trabajo pesado con respecto al suministro de la fundación proporciona un conjunto común de atributos del widget, un ciclo de vida disciplinada, el apoyo a la mejora progresiva, etc vienen con la clase Widget.

El marco Widget YUI 3 también proporciona un consistente patrón MVC, que promueve cada widget para adoptar los métodos de separación de Estado frente a otros métodos de actualización de la interfaz de usuario. Esto hace que el código muy limpio y fácil de mantener. De hecho, este es uno de los factores importantes por las que el YUI 3 Carrusel es mejor que su anterior YUI 2-basado primo.

El YUI 3 Plugin modelo permite a los desarrolladores añadir nuevas funcionalidades o modificar el comportamiento existente en objetos. Esto permite agregar funcionalidad adicional en la parte superior del carrusel para sacar de forma dinámica elementos a través de Ajax, etc Por lo tanto, el carrusel de YUI 3 no tiene código de la animación se cocía en él, pero en cambio han creado un plugin que añade soporte de animación para los casos donde se necesita . Esto ayuda a mantener el componente de peso muy ligero.

Un carrusel de galería para su propio sitio web

Después de leer acerca de lo que un carrusel es y cómo puede ayudarle a mejorar su sitio web, que esperamos se sienten dispuestos a ensuciarse las manos. No te preocupes, con nuestra YUI extensión de 3 Galería Carrusel, la aplicación de un carrusel en su sitio web es tan sencillo como proporcionar una lista con viñetas en HTML. Eso no es sólo un argumento de venta - que es la forma en que se ha integrado recientemente un carrusel en la Galería de Yahoo! Search Deportes Página de resultados.

Un ejemplo sencillo

Comencemos con un ejemplo sencillo que cubrirá casi todo lo que necesitas saber. La forma más fácil para que usted pueda utilizar la nueva Galería Carrusel es dejar que YUI 3 automágicamente se carga desde la red de Yahoo de entrega de contenido. Recordando lo que un carrusel es decir, una lista desplazable de elementos, creamos una lista en HTML. Se incluye la lista en un div, que permite a nuestro JavaScript para encontrar y trabajar con él. Si ya dispone de algunos datos que se representa de una manera similar a la lista en el marcado, es posible que también acaba de poner el div carrusel alrededor de ella y poner a prueba tu suerte! Es muy importante decir que, a pesar de que está utilizando una imagen de ejemplo aquí, usted puede utilizar para la Galería Carrusel todo lo que quieras!

  <div class="carousel" id="contenedor">
   <ol>
     <li> <img src="img/c1.jpg"> </ li>
     <li> <img src="img/c2.jpg"> </ li>
     <li> <img src="img/c3.jpg"> </ li>
     <li> <img src="img/c4.jpg"> </ li>
     <li> <img src="img/c5.jpg"> </ li>
     </ Ol>
 </ Div>

Ahora que tenemos nuestros datos para trabajar, queremos mejorar el aspecto, mostrando los cinco elementos con el widget de Carrusel. Suponiendo que usted ya está usando YUI 3 es una tarea sencilla. La única cosa que es posible que no haya visto antes, dependiendo de la profundidad que han estado cavando en YUI 3 y la Galería en el pasado, es que estamos especificando una versión de la Galería de forma explícita. Esto es necesario porque estamos usando un nuevo widget, que no está incluido en la Galería de construir ese gestor de YUI intenta cargar de forma predeterminada. Sin embargo, como YUI y YUI Galería madura, esto no será necesario hacer eso en el futuro cuando el valor por defecto el número de compilación se ha incrementado.

  YUI ({gallery: la galería-20.10.2010-19-33 '})
  . Uso ("galería carrusel", "galería carrusel anim", "sustituto", la función (y) {
   var = nuevo carrusel de Y.Carousel ({boundingBox: "# contenedor",
    contentBox: "contenedor # ol>"});
   carousel.plug (Y.CarouselAnimPlugin, {animación: {velocidad: 0.7}});
   carousel.render ();
 });

(Por cierto, si usted está interesado en obtener material nuevo se puede visitar el repositorio de YUI 3 Galería en github o tenedor Gopal , donde desarrolla Carrusel. Si usted encuentra un error, siempre estamos encantados de oír hablar de eso.)

Volviendo a nuestro ejemplo ... YUI lo tomará de aquí. El cargador extrae automáticamente Galería Carrusel y sus dependencias desde la red de Yahoo de entrega de contenido. Después de eso, el carrusel se inicializa y se muestra. El usuario puede hacer clic en la flecha izquierda o derecha para desplazar la imagen. Por favor, perdóname por traer una línea de una complejidad innecesaria, pero no me pude resistir. Yo Y.CarouselAnimPlugin a dejar que nuestro carrusel de diapositivas sin problemas de una página a otra en lugar de sólo mostrar la página siguiente instante. Siéntase libre para jugar con el parámetro de velocidad si lo desea.

Como se puede ver en la imagen anterior, el carrusel está en marcha. Sin embargo, la CSS no podría encajar muy bien en el resto de tu página. Esto nos lleva a nuestra siguiente sección, donde vamos a discutir cómo personalizar Galería Carrusel.

Personalización de la Galería Carrusel

Ahora que usted tiene su carrusel en marcha y se identificaron un caso de uso para su sitio web, que esperamos para poder integrarse a la perfección. Como se mencionó anteriormente, lo hicimos por nuestra página de resultados de búsqueda Deportes. Si desea aumentar el número de elementos visibles, por ejemplo, de tres a cuatro, puede hacerlo mediante la modificación de la línea que crea una instancia del carrusel.

  var = nuevo carrusel de Y.Carousel ({boundingBox: "# contenedor",
 contentBox: "#container > ol", numVisible: 4 });

Still not good enough? Sí, claro. Luckily CSS allows us to add our own style definitions and even overwrite the initial ones without touching any existing CSS. So your first step will probably be to remove the borders, because they are quite obtrusive. Just add the following CSS to your page header.

 .YUI 3-carousel {
  border: none !important;
 }
.YUI 3-carousel-nav {
  background: none !important;
 }
.carousel ol li {
  border: none !important;
 }

Now, that looks better. I've also used a negative margin to reduce the gap between my Carousel and the heading. However, we are still not completely there. I assume that you also want to use your own custom buttons, which integrate nicely into your page layout. For this example we will use the same buttons that are also used on Yahoo's search result pages. This requires a bit more, but still simple, CSS.

 .YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
 }
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
 }
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
 }
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
 }
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
 }

We will leave it to that for today and hope you feel ready to get started. At least that was all that we needed. However, depending on how big your site is and how interested you are in its performance, there are general thoughts about loading something from a third party content delivery network that also apply here. For example, Sidnei da Silva laid out some interesting thoughts in a blog post earlier this month. We would be happy to provide a How To that explains how a YUI widget and its dependencies can be moved to your own website, or even content delivery network, so you are able to keep the number of HTTP requests as low as possible. Let us know if you are interested, we are looking forward to your feedback!

More to Explore in the Gallery

The excellent team of Eduardo Lundgren and Nate Cavanaugh of Liferay have a Carousel component in the Gallery as well — certainly worth checking out if you're in the market for this kind of control.

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

YUI Theater - Ryan Grove: "La introducción de YUI 3 Autocompletar" (42 min.)

December 10, 2010 at 5:55 am by Eric Miraglia | In YUI Theater | Comments Off

In this talk from YUIConf 2010 , YUI 3 AutoComplete author Ryan Grove ( @yaypie ) takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component (which is coming in the soon-to-be-released YUI 3.3.0) and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities. ( Note : If you enjoy this talk, you might want to check out Ryan's other excellent talk from this year, “ Achieving Performance Zen with YUI 3 .”)

Si el vídeo incrustar a continuación no se muestran correctamente en su lector de RSS de su elección, asegúrese de hacer clic a través de ver la versión de alta resolución del vídeo en el YUI Theater .

Otros recientes Videos de YUI Theater:

Paul Donnelly and Nagesh Susarla: YQL + YUI: Building End-to-End Applications — When developing widgets, it's not how to use YQL data that comes up as a question, but rather how to access it. In this YUIConf 2010 session, YQL engineers Paul Donnelly and Nagesh Susarla review starting your query out in the YQL console, accessing YQL data via the various endpoints, and going through YQL's various authentication layers.
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL — In this session from YUIConf 2010, TipTheWeb cofounder and YUI contributor Eric Ferraiuolo discusses the creation of a project-scale codebase using YUI 3, YUI 3 Gallery, and YQL.
Reid Burke: Yeti: YUI's Easy Testing Interface — Testing cross-browser web applications has been too difficult for too long: You're either manually reloading browsers or struggling with complicated automation software. In this session from YUIConf 2010, YUI engineer Reid Burke talks about how YUI's Yeti project helps to address these problems. Reid discusses when you should use automated testing for your frontend code, how Yeti works with YUI Test, how to setup cross-browser testing in minutes and how the YUI team uses Yeti to ship a better product.
Douglas Crockford: Project Future — Yahoo! JavaScript architect Douglas Crockford reflects on the life of Walt Disney, who dreamed of creating a 'City of the Future' in Florida as part of the project that became Disney World. (This is not a technical session, but rather one about big dreams and the life lessons we can draw from them.)
Tom Hughes-Croucher: How to Stop Writing Spaghetti Code — In this session from YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher explores different coding styles for event-driven, non-blocking server-side JavaScript and which styles are most successful.

Contenido de CC / Usado con permiso:

Subscribirse a YUI Theater:

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

Página siguiente »

Desarrollado por WordPress en Yahoo! Web Hosting .

Especificación de modo estricto

Alcance

Que implica variables globales

Fuga Mundial

El fracaso ruidoso

Octal

Etcétera

Todavía es un mundo imperfecto

Por qué es importante El modo estricto

ubicación: estática

Las cosas que debemos notar en esta demo

Cosas para recordar

position: relative

Las cosas que debemos notar en esta demo

Cosas para recordar

position: absolute

Las cosas que debemos notar en esta demo

Cosas para recordar

Lo más importante para recordar

position: fixed

posición: heredar

Cosas a tener en cuenta

Desplazamiento de las cajas

'Position' y 'desbordamiento'

Márgenes

El caso de la IE

El orden de apilamiento y el nivel de apilamiento

Los dispositivos móviles

Lecturas adicionales

¿Qué es un carrusel?

¿Por qué otro control de Carrusel?

YUI 3 Widget Marco

Un carrusel de galería para su propio sitio web

Un ejemplo sencillo

Personalización de la Galería Carrusel

More to Explore in the Gallery

Otros recientes Videos de YUI Theater:

Contenido de CC / Usado con permiso:

Subscribirse a YUI Theater:

YUI Library en Twitter

Traducir

Sindicato

Mensajes recientes

YUI Library

Archivos:

Blogroll

Comentario Política

Conviértete en Yahoo!

Meta: