Blog Interface utilisateur Yahoo! (YUIBlog)

CSS rapide Astuce: Comment faire pour empêcher une "goutte float" dans IE6

28 octobre 2010 à 1:52 pm par Thierry Coblence | En CSS 101 et de développement | Les 4 Commentaires

Même si ce comportement est souvent appelé un « goutte à flotteur »ou un« flotteur baisse ", la colonne qui descend n'a pas besoin d'être un flotteur ... il n'a qu'à être plus large que l'espace qui lui est alloué. Notez que ce n'est par spec et c'est un comportement commun à travers les navigateurs, si une colonne est "trop ​​large", puis il fera tomber.

Ce qui rend IE 6 stand, c'est que ce navigateur ne prend pas totalement en charge la width la propriété (ni height , d'ailleurs). Par conséquent, il permet de se développer pour accueillir des conteneurs à leur contenu. C'est cette croissance qui crée la baisse, parce que la boîte ne peut pas entrer dans son espace conçu.

Habituellement, les coupables sont des éléments qui ne sont pas envelopper (par exemple les images, URL, etc), mais un style de police (par exemple, IE et en italique ) peut être responsable aussi.

Par exemple, pour faire tomber la colonne de droite sur YUIBlog dans IE 6, tout ce que j'avais à faire est de style de l'une des images dans le rail de droite avec une largeur supérieure à 210 pixels. Cette image oblige IE 6 pour augmenter la largeur de la colonne de droite qui peuvent ensuite ne correspondent plus à côté de la colonne de gauche.

Les correctifs habituels:

word-wrap: break-word;

Enveloppement par la rupture des chaînes sur le bord droit de la boîte.

wbr avec wbr:after {content:"\00200B"} pour Opera

Le wbr élément représente une occasion de saut de ligne. Insertion wbr s à l'intérieur de longues chaînes permet au navigateur d'ajouter un saut de ligne si nécessaire.

overflow-x:hidden;

Tout contenu est plus large que le conteneur est coupé sur le bord droit de la boîte a dit.

Notez que les deux premières solutions ne fonctionne que sur les chaînes et n'empêchera pas les images, etc de l'expansion de la boîte.

Quand des corrections connues ne court

Il ya quelques semaines, on m'a demandé de fixer une "goutte flottent» sur l'une des pages Yahoo! Finance. Dans les navigateurs modernes, une longue chaîne a été sortait du rail de droite (capture d'écran), mais dans IE 6 cette même chaîne fait la chute de la colonne de droite ci-dessous le pli (capture d'écran). Malheureusement, ce contenu provient d'un fournisseur, afin d'édition le balisage n'était pas une option.

En raison de la nature de la chaîne, qui était une liste séparée par des virgules des symboles, des corrections ci-dessus ne sont pas satisfaisantes. Briser cette liste dans un endroit arbitraire était meilleur que le couper, mais toujours pas une solution viable ...

Faire IE 6 se comportent comme les grands garçons

Le truc pour faire IE 6 se comportent comme tous les navigateurs modernes là-bas est de style de la boîte avec une marge négative à droite (en plus position:relative ).

Démo

Sans le correctif

Captures d'écran pour ceux qui ne voient pas cette page dans IE 6.

Avec le correctif

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

La marge négative peut être de n'importe quelle valeur tant que cette valeur est supérieure à la delta entre la largeur allouée et la largeur réelle de la zone élargie. C'est cette déclaration qui empêche le flotteur baisse. Le but de position:relative est de rendre IE d'afficher le contenu en dehors des limites du conteneur parent.

Parce que je tiens à des éléments de style du même à travers le conseil d'administration, je le fais habituellement pas cette règle bac à sable.

Points à considérer

Ce hack maintient la colonne en place, mais il n'empêche pas que le conteneur de cesse de se creuser. Cela signifie que vous ne pouvez pas le style de l'élément avec un fond ou une bordure, car ils seraient peinte à l'extérieur de l'emballage. Voici une capture d'écran de ce fond et à la frontière ressembler lorsqu'il est appliqué en combinaison avec cette technique dans IE 6:

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

jQuery et YUI 3: Un conte des bibliothèques JavaScript Deux

27 octobre 2010 à 14h08 par Mark Rall | En développement , les implémentations YUI | Les 5 commentaires

Récemment, j'ai eu l'opportunité de construire ma première application JavaScript frontal. Ce qui suit est une courte histoire de la découverte et l'évolution qui vient à propos lorsque vous essayez d'utiliser des outils qui ne sont pas adaptés à la tâche à accomplir. Il s'agit d'un compte de l'apprentissage acquis par le développement de l'application avant même la fin l'aide de deux bibliothèques très différentes, jQuery et YUI 3. Détails du client et du projet ont été volontairement omis.

Vue d'ensemble

Le projet comprenait la refactorisation de plusieurs outils Flash disparates en une seule application interactive basée sur des standards ouverts pour un éditeur de contenu grande. Sur la plus haute importance, la demande devait être hautement optimisé avec une empreinte initiale faible en raison du grand nombre d'impressions de pages par jour, le client reçoit. Plusieurs phases ont été impliqués, le premier étant une première preuve de concept.

Le concept prévoyait l'élaboration d'un point de vue de ce que serait la demande dûment remplie. Elle se composait de:

• Un fichier de lancement initial (<1 Ko) responsable du chargement dynamique de tous les cadres (par exemple, jQuery ou YUI 3) et le dossier de candidature initial.
• Le développement et l'intégration de plugins jQuery pour soutenir un style élément de formulaire et de validation, et des visualisations graphiques dynamiques.
• La génération et la population de l'interface utilisateur, basée sur les intrants d'utilisateurs, la configuration par défaut et l'emplacement de l'application au sein du site de l'éditeur.
• Le calcul et la présentation de l'information basée sur l'entrée de l'utilisateur.

Dans l'intérêt de la divulgation complète, ma propre expérience à ce point avait été dans le développement de petites solutions autonomes, le type dont vous pourriez décrivent typiquement sous forme de plugins. Il s'agit notamment des composants d'interface dynamiques tels que les carrousels d'images, des cartes interactives et Twitter / Flickr widgets. Au moment de la première barboteurs avec JavaScript, jQuery était populaire, facile à apprendre et m'a permis de reprendre rapidement les bases nécessaires pour les projets sur lesquels je travaillais. Cependant ce sont toutes les unités autonomes et n'avait pas besoin d'interagir avec un autre code ou dans le cadre d'une application plus large.

Premier coup

À l'issue de la première phase du projet, il est devenu douloureusement évident que j'avais affaire à une bête très différent de ce que j'étais habitué à. Ayant eu peu d'expérience dans l'organisation du code, mon code est rapidement devenu désorganisé, inefficace et répétitif. En conséquence, la première partie de ce qui allait devenir une application beaucoup plus large a été lent à charger. En fait, il a fallu huit secondes pour générer cette seule preuve de concept. Un grand changement a été nécessaire et alors que j'avais envisagé d'utiliser une petite bibliothèque, comme la Base de Dean Edward ou John Resig de l'Héritage Simple JavaScript motif à ajouter de la classe basée sur l'héritage pour jQuery, j'ai décidé d'aller un peu plus loin.

Ce que je voulais, c'était un cadre complet, dans lequel maturité pour développer ma première application OO. Quelque chose qui aurait pour effet de me guider à travers le processus. En examinant les bibliothèques disponibles, j'ai décidé d'adopter YUI 3 pour les raisons suivantes:

• Intégrée, basée sur l'héritage de soutien du développement d'applications, y compris l'attribut et de la gestion de classe.
• Solution à long terme:
  • Prise en charge de normes et d'accessibilité.
  • Financé par une grande organisation, bien connu Yahoo!
  • Associé avec des noms respectés comme Douglas Crockford , Nicolas Zakas , et Stoyan Stefanov .
• Optimisation des performances:
  • Le fichier source initiale de 7KB seulement.
  • Lazy-chargés modules sur demande.
  • Livraison CDN.
• Documentation complète et variée:
  • Yahoo! Developer Network
  • YUI 3 Documentation API
  • YUI Theater
  • YUI Library
  • YUI Blog
• D'âge mûr, l'évolution cohérente entre les différentes versions.
• Les outils intégrés dans YUI Compressor , YUIDoc , YUI Builder , et la console .
• Non seulement le code JavaScript, CSS un cadre trop.

Take Two

Intégrer YUI 3 a plusieurs avantages directs et indirects au projet:

• Héritage basé sur l'architecture et la gestion de classe à travers le Attribut d'interface, et la Base et Widget classes productrices performant, code réutilisable et organisée.
• Séparation de la présentation du modèle et les données en utilisant le Widget de classe pour rendre d'autres vues (en ligne ou overlay) basés sur la localisation de l'application au sein du site.
• Sandboxing et dynamique module de l'insertion par YUI.use ().
• Débogage de la console de la Croix-navigateur en utilisant YUI console .
• Sur sauvegarde, optimisation des performances en utilisant YUI Compressor dans Eclipse.
• L'inclusion et l'intégration facile de plugins jQuery pré-existants.
• Le sauver, la documentation automatique de code à l'aide YUIDoc .

Le résultat final était un client heureux et un produit fini avec des temps de chargement inférieurs à la seconde (en se souvenant qu'il a fallu 8 secondes pour charger la preuve initiale de concept).

Leçons apprises

Sélectionnez l'outil idéal pour l'emploi

En lisant ce post, je suis sûr que certains lecteurs voir ce que anti-jQuery. Pas du tout. jQuery est un projet fantastique responsable de nombreuses innovations. Mais, comme avec n'importe quel outil, il a ses forces et un but précis. Sa force réside dans les incohérences du navigateur normalisation, en abaissant la barrière à l'entrée pour le novice et l'amélioration de l'efficacité des programmeurs expérimentés. L'apprentissage primaire qui est sorti du projet était que vous ne pouvez pas compter sur un outil pour chaque tâche. YUI s'appuie sur ce que jQuery peut fournir en offrant également un cadre d'application bien architecturé. Mais il est juste de dire qu'il arrive à un coût, voir le point suivant.

Courbe d'apprentissage raide

Vous avez besoin de patience, surtout lorsque vous écrivez votre première application avec une bibliothèque familier comme je le faisais. Toutefois, le gain est immense. En apprenant une autre bibliothèque, pas seulement vos compétences de base JavaScript améliorer, vous aurez également développer une meilleure compréhension de la façon dont le travail des bibliothèques et des avantages qu'elles apportent. J'essaie d'apprendre quelque chose de nouveau tous les jours YUI et plus j'en apprends, plus je suis dans la crainte de la pensée et le talent pur qui a disparu dans la construction de YUI.

Seulement charger le contenu quand vous en avez besoin

Bien qu'il soit certainement plus facile de programmation pour charger tout ce que vous devrez peut-être dès le départ, les améliorations de la performance acquise en tant que résultat direct de la teneur en lazy loading uniquement lorsque vous en avez besoin est énorme. Ce fut l'un des principaux facteurs qui contribuent pour améliorer radicalement la performance de l'application.

Interagir avec les DOM aussi peu que possible

Ce point ne concerne pas la bibliothèque spécifique utilisée. En mettant en cache les éléments requis DOM et en utilisant des modèles HTML plus, le temps de rendu d'interface utilisateur a considérablement diminué. Les nœuds peuvent être mis en cache à l'aide Y.one () tandis que les listes de nœuds peuvent être capturées à l'aide Y.all (). Aussi Y.Node.create () a été très utile dans les convertir efficacement les chaînes de texte HTML de grandes aux éléments DOM avant l'insertion.

Apprenez par l'exemple, utiliser un CDN

En utilisant la bibliothèque CDN livré YUI, nous avons décidé de livrer tous les actifs du projet par l'intermédiaire CAN. Ce fut probablement le prochain plus grand facteur contribuant à l'amélioration des performances.

Pub, brouhaha sous

Pour les programmeurs expérimentés là-bas, essayez de ne pas se moquer de celui-ci. Ayant été utilisé pour écrire un peu plus de plugins dans le passé, je n'avais aucune idée comment les applications devraient communiquer en interne. Même après avoir lu "d'événements personnalisés vous permettent de publier des moments intéressants ou des événements dans votre propre code afin que d'autres composants sur la page peuvent s'abonner à ces événements et d'y répondre,« J'ai encore raté.

Comme il s'avère, d'événement personnalisé YUI de publier et d'abonnement modèle fonctionne à merveille pour la communication inter-classes et inter-objet. Vous pouvez même vous abonner pré et post à des événements et inclure une logique dynamique de supprimer bouillonnement sur la base de certaines conditions.

Intégrer les meilleures pratiques dans votre flux de travail

Utilisation d'Eclipse, nous avons pu intégrer JSLint et YUI Compressor dans le processus de construction. En d'autres termes, chaque fois que vous appuyez sur Ctrl / Cmd + S de votre code JavaScript est validée et optimisée. Cela signifie que vous testez contre le code de production optimisé, la qualité de la toute première ligne de code. Cela signifie également que vous n'oublierez pas afin d'optimiser dans la course effrénée final à la date de livraison.

Apprendre YUI sur le travail

Bien que chacun a un style d'apprentissage différent, j'ai pensé partager les ressources j'ai utilisé pour apprendre YUI avec un objectif précis en tête.

• Regardez les épisodes pertinents Théâtre YUI pour obtenir un aperçu général de la bibliothèque ou d'apprendre un module spécifique. Je vous recommande vivement à commencer par:
  • Eric Miraglia de Bienvenue à YUI 3
  • Todd Kloots sur YUI 3 Sucre
  • Matt Sweeney YUI 3 Performance
  • Luke Smith de débogage dans YUI 3
  • Isaac Schlueter à résoudre les problèmes avec YUI 3
  • Eric Ferraiuolo sur le développement Web App avec YUI 3
  • Événements Luc Smith Evolved
• Renseignez-vous sur YUI sur le Yahoo! Developer Network . J'essaie de lire un peu chaque semaine et en apprendre plus à chaque fois que je l'ai relu.
• Lire l' API documentation. Si vous ne pouvez pas le trouver sur YUI Theater ou sur le réseau de développeurs, creuser dans l'API. Il paye même à lire le code directement.
• Lire et publier des questions à la tribune sur YUILibrary.com .
• Jouer beaucoup et amusez-vous!

Conclusion

YUI 3 est une bibliothèque riche en fonctionnalités, mature et en constante évolution adaptée pour les petites et les grands projets. Comme avant des applications web finaux deviennent plus complexes, la nécessité pour les bibliothèques comme YUI va croître. Alors que pour les non-initiés, il peut être une expérience intimidante au premier abord, si vous restez avec lui, vous serez récompensé.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUIConf 2010 se vend; Annonçant deux soirées spéciales

26 octobre 2010 à 15h35 par Jenny Donnelly | En développement , les événements YUI | Comments Off

YUIConf 2010 est sold out! Merci à tous ceux qui se sont inscrits - Nous avons hâte de tous vous voir en Novembre. Nous sommes en train de mettre la touche finale à notre calendrier, mais vous pouvez jeter un œil à ce que nous avons en magasin ici: http://yuilibrary.com/yuiconf2010/schedule.php .

Faits saillants comprennent:

• A suivre Node.js où vous pouvez rampe sur toutes les choses passionnantes qui se passent avec JavaScript côté serveur. Nous avons Node.js créateur Ryan Dahl présentation et assis sur un panel sur l'avenir de l'ingénierie frontend, et nous avons YUI de Dav Glass, l'un des premiers à démontrer nœud basé sur l'amélioration progressive à l'aide hors-the-shelf composants de la bibliothèque (à partir de YUI 3), montrant ce que l'avenir ressemble.
• Une piste YQL pour vous permettre d'accélérer sur la façon de tirer parti de YQL d'accéder aux données depuis n'importe quel endroit sur l'Internet. L'équipe YQL lui-même sera sur place pour vous parler de leurs derniers travaux.
• Des études de cas qui exposent la façon dont des projets concrets en œuvre YUI en environnements de production exigeants. Les ingénieurs de Flickr et Yahoo! Mail sera à portée de main, et Eric Ferraiuolo - gagnant d'un prix pour son travail PayPalX récente - sera ici pour parler Conseil sur le Web , son dernier YUI 3-base du projet.
• Présentations perspicaces sur la façon d'offrir des expériences mobiles / touch.
• Plongées profondes sur les modules YUI, de saisie semi-automatique à grilles CSS aux contributions Galerie.

Toutes les séances seront archivées à la vidéo et disponible sur YUI Theater peu de temps après la conférence.

Nous sommes ravis d'unir leurs forces avec le Réseau des développeurs Yahoo! pour accueillir deux soirées spéciales qui seront ouverts au grand public. Ainsi, bien que la conférence est déjà sold out, n'importe qui peut assister aux soirées en vous inscrivant à Meetup.com. L'espace est limité, alors inscrivez-vous vite! (Participants YUIConf n'avez pas besoin de vous inscrire.)

YUIConf 2010 Discussion de groupe: "L'avenir du développement Web" animée par Ben Galbraith et Dion Almaer
8 novembre 2010, 6:30-20:00

Inscrivez-vous pour assister à la réunion-débat à http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf a réuni un groupe aussi prestigieux d'explorer l'avenir proche de la discipline à un moment de grand changement. Panélistes réguliers comprennent Elaine Wherry, fondateur et architecte frontend à Meebo, Douglas Crockford, architecte JavaScript chez Yahoo!, Tantek Çelik, technologue et auteur; Ryan Dahl, créateur de Node.js, Joe Hewitt, de Facebook, créateur de Firebug et l'un des plus téléchargé les applications mobiles de tous les temps (Facebook pour iOS); Thomas Sha, fondateur de Yahoo! YUI.

YUIConf 2010 Keynote: "L'avenir du projet" par Douglas Crockford
10 novembre 2010, 6:30-20:00

Inscrivez-vous pour assister à la keynote au http://www.meetup.com/BayJax/calendar/15239717/ .

Dans le développement de logiciels, nous rêvons de l'architecture. C'est l'histoire vraie d'un tel rêve.

Les places sont limitées pour ces événements spéciaux, alors n'oubliez pas de vous inscrire bientôt!

Photos CC:

• 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/

Photos utilisées avec l'aimable autorisation:

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

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Annonçant YUI 2.8.2 - Mise à jour de sécurité importante pour tous les utilisateurs de YUI 2.4.0-2.8.1

25 octobre 2010 à 11h34 par Eric Miraglia | En développement | Les 6 commentaires

L'équipe de YUI YUI 2.8.2 publié aujourd'hui. Cette version corrige une anomalie liée à la sécurité qui a été introduit dans le YUI 2 à partir de Flash infrastructures composant avec la YUI 2.4.0 communiqué. Ce défaut permet des exploits d'injection JavaScript doit être créé contre les domaines qui hébergent affectés YUI .swf fichiers. Visitez le bulletin de sécurité pour YUI 2.8.2 pour plus de détails sur la façon d'identifier et remplacer les fichiers concernés .

Si votre site héberge un YUI 2 Répartition entre la version 2.4.0 et 2.8.1 qui inclut ces fichiers, il est affecté par cette vulnérabilité.

Si votre site charges YUI 2 à partir de CDN Yahoo ( yui.yahooapis.com ) ou à partir de EUR Google ( ajax.googleapis.com ), et les fichiers ne sont pas hébergés sur votre propre nom de domaine, vous ne sont pas affectés. YUI 3 n'est pas affecté par ce problème.

Vous pouvez télécharger YUI 2.8.2 (et versions corrigées de YUI 2.4.0-2.8.1) à partir de la page YUILibrary.com téléchargements .

Voir le bulletin de sécurité pour plus d'informations sur la façon de déterminer si votre site est affecté, comment remédier au problème, et comment vérifier que le correctif.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Dans la Galerie YUI 3: Extensions pour SVG, créé pour Wow SVG!

18 octobre 2010 à 11:18 am par Vincent Hardy | En développement , de YUI 3 Galerie | Les 2 Commentaires

Introduction

SVG ( Scalable Vector Graphics ) fournit une syntaxe déclarative pour interactifs, animés graphismes en 2D: des formes, des images et du texte. Support de SVG est une partie de l' HTML 5 spécification et SVG est mis en œuvre par tous les principaux navigateurs, y compris Internet Explorer de Microsoft en version 9 .

Les svg-wow.org vitrines de sites Web ce qui peut être fait avec SVG aujourd'hui. Les démos sur ce site web ont été créés pour le SVG Open de conférence, où l'Wow SVG! séances ont été une tradition depuis plusieurs années. Le Wow SVG! sessions ont été lancées par Dean Jackson, puis en collaboration avec moi-même et a ensuite continué par Erik Dahlstrom . Erik et moi avons collorated sur la session pour les 2009 et 2010 les éditions de la conférence.

Pour les deux dernières années, les démos ont de plus en plus utilisé des cadres AJAX, l'application de leurs fonctions au format SVG au lieu (ou en plus) HTML. YUI est le cadre le plus largement utilisé sur le site Web, qui utilise à la fois YUI 2 et YUI 3 .

Je vais commencer par un aperçu rapide SVG, puis discuter du type de démos que YUI pris en charge et les extensions que j'ai ajoutées à la Galerie YUI 3 pour le faire fonctionner avec SVG. (Ces extensions sont désormais libres d'utiliser selon les termes de la licence BSD YUI .)

SVG aperçu

Comme HTML, SVG est une spécification du W3C. Il fournit une syntaxe pour décrire des formes de base (rectangles, cercles, lignes, polygones, des ellipses, polylignes), des formes arbitraires (décrite en termes de segments de chemin, qui peuvent être des lignes, des courbes quadratiques ou cubiques de Bézier), textes et images.

L'image suivante est une capture d'écran de l' exemple alternate stylesheet sur ​​svg-wow.org et montre quelques caractéristiques SVG en jeu: le rendu riche (effets d'ombres, dégradés, les motifs) et les formes simples et complexes.

Parce que les images SVG sont définies en termes de géométrie et les attributs de rendu, il est possible de les rendre à n'importe quelle résolution. En conséquence, les images SVG peuvent être adapté à n'importe quelle taille tout en conservant une haute qualité de rendu, par exemple lors de l'impression (pas de bords plus dentelés).

Ce qui suit zoom-en vue montre la même image SVG montré plus tôt, mais rendu à une résolution plus élevée tout en préservant la qualité.

Tout comme HTML, SVG gère l'interactivité: il est possible d'ajouter des écouteurs d'événements sur des objets graphiques pour les interactions de la souris ou le clavier. Bien sûr, SVG supporte le Document Object Model, ce qui le rend facile à manipuler les différentes propriétés des objets graphiques, tels que leur géométrie ou le style de rendu.

Il ya beaucoup de choses à la spécification SVG: styles de rendu avancées (caresser, de remplissage, motifs, les dégradés), les effets de filtres (flou, des ombres, des matrices de couleurs), un style CSS, les caractéristiques de texte avancés (tels que du texte sur un chemin d'accès) et de l'animation déclarative . Vous pouvez consulter les références à la fin de ce post pour en savoir plus sur les caractéristiques de format SVG.

SVG et HTML

Avec HTML5 , SVG peut être mis en ligne dans les documents HTML, sans plus tarder. Les navigateurs sont à partir de soutenir cette fonctionnalité (par exemple, Firefox 4 ). Pour le moment, tous les principaux navigateurs supportent SVG inline en XHTML, ce qui fournit la même fonctionnalité. SVG dans XHTML exige simplement que les espaces de noms sont déclarés correctement.

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

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

Tous les exemples de code sur cette page utiliser ce moyen de inline SVG dans XHTML.

SVG et YUI

SVG supporte l'animation déclarative. Par exemple, vous pouvez animer le rayon d'un <circle> élément comme ceci:

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

Le <animate> tag est emprunté à la SMIL cahier des charges et, en même temps que les autres éléments d'animation, il fournit un moteur d'animation très puissant au format SVG.

Malheureusement, jusqu'à récemment, le soutien pour l'animation SVG navigateur était clairsemée. Il s'est amélioré au cours des deux dernières années, mais Microsoft a clairement fait savoir qu'elle ne soutiendrait pas déclarative d'animation SVG dans IE 9.

En conséquence, la plupart des démos sur le site web svg-wow.org utiliser l'animation scriptée à la place d'animations déclaratives. D'une part, ce qui est regrettable, car les animations déclaratives sont plus efficaces que des animations scriptées. Sur le plan positif, des animations scriptées peuvent être très flexibles, et ils travaillent à travers les implémentations très bien.

La nécessité d'une solution d'animation scriptée bon ce qui a poussé l'utilisation de YUI sur les svg-wow démos. Toutefois, les démos aussi utiliser d'autres fonctions YUI, en particulier le Loader et Node modules.

Animation SVG avec YUI

Les démos sur svg-wow utiliser YUI pour créer battements de tambour élastiques , des formes de morphing ou de texte en rotation et des formes , par exemple. Utilisation de YUI avec SVG nécessaire quelques extensions YUI, je vais décrire en un instant.

texte en rotation et des formes	formes de morphing
élastiques battements de tambour

Le tableau suivant illustre la façon dont YUI est très pratique pour tout simplement animer et de manipuler des graphiques SVG.

Animer le SVG transform attribut

Tous les éléments graphiques SVG avoir une transform l'attribut. Cet attribut spécifie une 2D transformation affine sur les éléments, qui peut être utilisé à l'échelle, incliner, faire pivoter ou traduire.

Les extensions svg-wow.org YUI pour SVG permet l'animation de la transform l'attribut comme ceci:

 var anim = new Y.Animate ({
     noeud: '# circleA »,
     à partir de: {
         transformer: {tx: 0, ty: 0, sx: 2, sy: 2}
     },
     à: {
         transformer: {tx: 20, ty: 20, sx: 1, sy: 1}
     },
     transformTemplate: «traduire (# tx, ty #) échelle (# sx, sy #)",
     durée: 1
 });
        

Voir les animations de transformation des tests.

Vous noterez que les valeurs de transformation sont définis en termes de "composants" (tels que tx ou ty ) qui sont combinés pour former une valeur en utilisant l' transformTemplate trouvé sur l'objet de configuration d'animation.

Le modèle est un mécanisme souple pour la construction de transformer les valeurs tandis que les composants séparés rendent facile à calculer les valeurs d'animation. Ceci est un exemple où le modèle d'animation YUI a permis une plus grande flexibilité (et plus de puissance expressive) que l 'élément SVG animation SMIL ( animateTransform ). Afin de créer l'animation ci-dessus, la déclaration équivalente SMIL aurait été:

 <circle ...>
     <AnimateTransform attributeName = "transformée" type = "translate"
                       from = "0,0" pour = "20,20" dur = "1" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transformée" type = "scale"
                       from = "2,2" pour = "1,1" dur = "1" begin = "indefinite" />
 </ Cercle>
        

Notez comment l'extrait ci-dessus nécessite de multiples animateTransform éléments qui doivent être synchronisés: le begin d'attribut de la première animation est fixé à scaleAnim.begin pour synchroniser le début des deux animations. Une fonctionnalité intéressante du moteur d'animation YUI est que le timing de l'animation (c.-à-début, fin et durée) peuvent être partagées à appliquer à des propriétés des éléments multiples.

L'extension YUI pour animer les transformations SVG est largement utilisé, comme dans le huis clos et animés paroles exemples. Le premier utilise une extension de YUI 3 tandis que le second utilise une extension de YUI 2.

Animer la géométrie

Géométrie de base

Animer la géométrie SVG avec YUI est assez simple. Les anime exemple suite à une <rect> rayons élément largeur, hauteur et angle:

 var anim = new Y.Animate ({
     noeud: '# recta »,
     à partir de: {
         largeur: 200,
         hauteur: 100,
         rx: 5,
         ry: 5
     },
     à: {
         largeur: 300,
         hauteur: 100,
         rx: 10,
         ry: 10;
     },
     durée: 2,
     assouplissement: Y.Easing.elasticOut
 });
        

Voir les animations de forme des tests.

Comme discuté plus tard, quelques changements sous le capot YUI fait ce travail. Mais du point de vue du développeur, cette animation fonctionne de la même manière exacte que l'animation de tout autre attribut HTML ou propriété CSS.

Le <path> 's d 'attribut

Un attribut géométrie est un peu spécial: le d attribut sur ​​l' <path> élément. Le <path> élément est utilisé pour la géométrie arbitrairement complexe. Un <path> peut décrire n'importe quelle forme. Son d attribut décrit sa géométrie en termes de segments de chemin, qui peuvent être des lignes, des arcs, quadratiques ou cubiques courbes de Bézier (il ya quelques commandes plus, mais ils ont tous la carte en courbes de Bézier).

L'animation de la d attribut également besoin d'un peu de l'extension de moteur d'animation YUI, mais avec cette extension, le d attribut peut être animé comme un autre, comme illustré ci-dessous.

 var anim = new Y.Animate ({
     noeud: "# cheminA",
     à partir de: {d: "M 0 0 50 0 100 50 C 100 100 50 C 100 0 50 0 0 Z"},
     à: {d: "M 0 0 0 100 100 C 0 100 100 0 ° C 100 0 100 0 0 Z"},
     durée 1s,
     assouplissement: Y.Easing.bounceBack
 });
        

Voir les animations chemins tests, ce qui montre, entre autres choses, une coche se transformer en une croix au fil du temps, tel que représenté dans les images suivantes.

Le Gandhi citations démo utilise cette technique d'animation de la d attribut à des formes se transforment en chiffre Gandhi.

Animation d'autres attributs SVG

Bien sûr, les animations YUI ne se limitent pas aux attributs de la géométrie. N'importe quel attribut SVG peuvent être animés. Par exemple, les anime d'animation suivants le rayon du flou sur un filtre de flou horizontal.

 / / Extrait de SVG
 <Filtre ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript animation
 var anim = new Y.Animate ({
     noeud: '# BlurFilter »,
     à partir de: {stdDeviation: [0, 20]},
     à: {stdDeviation: [0, 0]}
 });
        

Voir les animations de filtrage des tests. L'image suivante montre comment animer un flou gaussien peut être utilisé pour la transition entre des états de bouton.

Ce type d'effet est utilisé dans le rapide effet de flou démo, même si cette démo ne pas utiliser l'animation YUI, mais déclaratives des éléments d'animation SMIL (au détriment de la seule course dans les navigateurs supportant cette fonctionnalité, comme expliqué précédemment).

Animer les propriétés CSS

Comme HTML, SVG éléments ont des attributs et des propriétés CSS aussi. SVG possède quelques propriétés spécifiques CSS . Ces propriétés peuvent être animés, parfois pour créer des effets surprenants. Par exemple, l' stroke-dashoffset propriété peut être utilisée pour simuler dessiner une forme.

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

 / / JavaScript
 var anim = new Y.Animate ({
     noeud: "# recta",
     à: {'stroke-dashoffset': 0},
     durée: 0,25
 });
        

Voir les temps d'animations essais.

Le graffitis démo utilise cette technique (même si sans YUI animation) et le fait de la caméra démo (cette fois avec YUI animation).

YUI et SVG: Sous le capot

Le site web svg-wow.org utilise à la fois YUI YUI 2 et 3 et a SVG extensions spécifiques pour à la fois. La section suivante de cet article se concentre sur les 3 extensions YUI.

Des prolongations ont été nécessaires pour:

• rendre le travail YUI avec des spécificités DOM de SVG
• tenir compte des différences de mise en œuvre
• ajouter le support de nouveaux types d'attributs tels que SVG transforme
• ajouter le calendrier d'animation supplémentaire et des fonctions de synchronisation

Comptabilisation des spécificités DOM SVG

Comme décrit précédemment, les attributs SVG peuvent être animés avec des éléments déclaratifs comme <animate> . Pour soutenir modèle d'animation de SVG, les valeurs des attributs SVG tenir à la fois une animation et une valeur de base. Par exemple, l' r attribut sur ​​une <circle> élément est une SVGAnimatedLength définis comme suit:

 SVGAnimatedLength interface {
   readonly attribute SVGLength BaseVAL;
   readonly attribute animVal SVGLength;
 };

En conséquence, même dans les implémentations qui ne supportent pas l'animation déclarative, nous avons besoin pour atteindre le bas de la baseVal pour lire la valeur d'un attribut:

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

Des prolongations ont été nécessaires pour permettre au moteur d'animation pour rendre compte de l'attributs SVG modèle de valeur inhabituelle. Heureusement, YUI 3 dispose d'un concept de comportements d'animation. Les comportements sont essentiellement les attributs spécifiques des crochets, et il était assez facile d'ajouter le support pour gérer les valeurs d'attributs SVG. Par exemple, SVGAnimatedLength attributs sont traitées comme suit:

 = {var lengthBehavior
     ensemble: la fonction (anim, att, de, vers, écoulé, la durée, le plaisir) {
         / / Traitement spécifique SVG
     },

     obtenir: function (anim, attr) {
         / / Traitement spécifique SVG
     }
 };

 / / Manipuler attribut <cercle> 'sr
 Y.Animate.behaviors.r = lengthBehavior;

Il ya plus d'extensions pour d'autres valeurs d'attributs tels que le SVG transform attribut, les valeurs des attributs de couleur (comme fill , stroke ou de stop-color ) et des attributs tels que stdDeviation mentionnés plus tôt.

Quelques améliorations similaires ont été tenus, par exemple dans le Y.Node.prototype.toString méthode, encore une fois pour tenir compte de SVG baseVal (cette fois sur le className propriété node). Un autre exemple est le compositeur de noeud par défaut dans le Node du module.

Comptabilisation des différences entre les navigateurs

Alors que les extensions précédentes sont nécessaires en raison des différences de spécifications entre HTML et SVG, les éléments suivants sont requis en raison des variations de mise en œuvre entre les navigateurs.

SVG a une catégorie spéciale d'attributs appelés attributs de présentation . Dans les implémentations soutiennent également un style CSS (qui tout le soutien des navigateurs), ces attributs de présentation sont vraiment juste une autre façon de spécifier une propriété CSS avec une faible spécificité . De la spécification SVG:

Les attributs de présentation va donc participer à la cascade CSS2 comme si elles ont été remplacées par correspondants règles de style CSS placés au début de la feuille de style de l'auteur avec une spécificité de zéro. En général, cela signifie que la présentation attribue une priorité inférieure aux autres règles de style CSS spécifiées dans les feuilles de style de l'auteur ou des attributs 'style'.

Malheureusement, certains navigateurs ne prennent pas la mise en œuvre du cahier des charges correctement et window.getComputedStyle n'est pas toujours compte de toutes les sources possibles pour définir les propriétés CSS SVG: les sélecteurs CSS, attribut de style et les attributs de présentation.

YUI est venu à les remercier de sauvetage à l' Node module qui pourrait être étendu à cacher ces différences entre les navigateurs. Les Y.DOM.CUSTOM_STYLES et l' Y.Node.prototype.getComputedStyle pourrait être étendu à offrir d'une manière uniforme à lire les propriétés de style SVG.

Extension Y.DOM

YUI enveloppe tout accès au DOM à travers le Node d'interface. En conséquence, certains SVG spécifiques des méthodes DOM, comme getBBox (utilisé pour calculer les limites d'un élément SVG), ne sont pas accessibles sur l'objet enveloppé.

Pour rendre les choses plus facile à programmer pour SVG, les extensions vers le module Y.DOM par défaut (qui Node utilise) ont été ajoutés à exposer soit SVG fonctionnalités DOM ou ajouter des méthodes de commodité, communément nécessaires lors de la manipulation de contenu:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (pas SVG spécifique)
• getMatrix/setMatrix . Fournit un moyen facile de manipuler des transformations sur les éléments SVG, quelque chose de particulièrement difficile à la norme DOM de SVG
• getBBox/getViewportBBox fournir des moyens simples d'accéder à la boîte englobante dans le système de coordonnées de l'élément ou dans l'espace de visualisation.
• loadContent . Un utilitaire pour insérer un fragment DOM décrit à l'aide d'un objet JavaScript littérale. Par exemple:

   myNode.loadContent ({
       tag: 'g',
       combler: «rouge»,
       AVC: 'none',
       enfants: [{
           tag: "rect",
           x: 10,
           y: 10,
           largeur: 200,
           hauteur: 300
       }, {
           tag: "cercle",
           r: 10,
           cx: 105,
           cy: 155
       }, {
           tag: "image",
           'Xlink: href': 'images / photo.png »,
           largeur: 200,
           hauteur: '300px '
       }, PrevSibling);
          

  est un raccourci permettant d'effectuer divers appels DOM (comme createElementNS , les setAttributeNS et appendChild ) pour créer un g élément et ses enfants et de l'insérer avant prevSibling sous myNode . L'utilitaire traite les espaces de noms pour les attributs et les éléments.

Ajouts au moteur d'animation pour le calendrier et la synchronisation

Beaucoup, sinon la plupart des effets d'animation impliquant nécessitent plusieurs instances d'animation chorégraphiés. En règle générale, plusieurs animations sont nécessaires pour créer un effet désiré, et le début ou la fin des animations dépendent les uns des autres, parfois avec un décalage temporel: animations doivent être synchronisés.

Par exemple, si vous avez un ensemble de formes qui doivent disparaître en un après l'autre, vous aurez besoin pour créer une animation en fondu pour chaque élément de la chaîne, puis l'heure de début avec un léger décalage.

 var = enchaîné Y.all («cercle # enchaîné»),
     firstAnim, previousAnim;

 chained.each (function (cercle) {
     var anim = new Y.Animate ({
         noeud: cercle,
         à partir de: {«remplir»: «blanc»},
         à: {«remplir»: «grise»},
         durée: 0,25
     });
     if (previousAnim! == undefined) {
         / / Synchrnoize le début de anim à 0,15 secondes après le début
         / / De l'animation du cercle précédent (previousAnim).
         previousAnim.onBegin (anim, 0,15);
     Else {}
         firstAnim = anim;
     }
     previousAnim = anim;
 });

 / / Ouverture de la première animation 1s après un clic sur l'un des cercles.
 / / Notez que ceci est une extension de la méthode d'exécution par défaut YUI qui ne
 / / Prendre un temps de décalage.
 chained.on («clic», function () {
     firstAnim.run (1);
 });

Voir les décalages temporels des tests.

La méthode onBegin , il est facile de synchroniser le démarrage de deux animations, avec éventuellement une heure de décalage. En fait, onBegin pouvez également appeler une fonction avec un décalage temporel. De même, le onEnd d'extension, il est facile de se synchroniser avec la fin d'une animation.

Par défaut, animations YUI avoir des événements qui fournissent un moyen de synchroniser. Les onBegin et onEnd méthodes exprimer la synchronisation de façon plus concise (un exemple similaire de concision est indiqué ci-dessous).

En outre, il est parfois nécessaire de synchroniser une animation avec un événement, encore une fois avec un décalage temporel. Les beginOn et endOn extensions nous permettent d'exprimer cela. Par exemple:

 anim.beginOn (Y.one (bouton # '),' click ', 0,5);

va commencer l'animation après 0.5s l'élément avec «bouton» Identifiant utilisateur a cliqué. Il s'agit d'un court-main pour:

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

Une extension finale apportée à la classe d'animation a été la capacité de faire un objet d'animation s'appliquent état de sa première image avant il a été effectivement commencé. Ceci est souvent nécessaire lors de la création des effets d'animation impliquant de multiples animations qui commencent à des décalages temporels différents.

 var anim = new Y.Animate ({
     noeud: Y.one (bouton # '),
     à partir de: {r: 30, 'fill-opacity': 0, la couleur: «pourpre»},
     à: {r: 80, 'fill-opacity': 1, couleur: «or»},
     durée: 0,25
 });

 / / Le suivant sera mis en l'état désiré sur l'objet cible avant
 / / Commencer réellement l'animation.
 anim.applyStartFrame ();
 anim.run (2);

Le remaniement d'image démo utilise les compensations d'animation de l'effet qui se propage de la pile de photos ou met les photos en arrière dans une pile.

Conclusion

Travailler avec SVG et YUI, et en particulier YUI 3, a été une expérience très agréable: beaucoup de fonctionnalités YUI s'applique à droite SVG hors de la boîte et de l'architecture extensible YUI a rendu possible de travailler autour des questions occasionnelles et d'ajouter la fonctionnalité désirée .

Bien sûr, un soutien accru standard pour SVG dans YUI serait utile, en particulier le travail YUI faire avec stand alone documents SVG et en faisant des Node de classe enveloppement éléments SVG sans solutions de contournement.

Il ya aussi quelques améliorations qui pourraient être utiles. Par exemple, il serait utile que des animations pourraient cibler de multiples éléments. De même, l'appui des valeurs multiples (comme dans le <animate> élément SVG par exemple) serait utile pour créer des effets plus sophistiqués.

Les démos sur svg-wow.org ont été écrites pour YUI 3.1 et porté à 3,2 pour le but de ce blog. En 3.2, les transitions ont été introduits qui font usage de natifs transitions CSS si elle est disponible dans le navigateur. Il pourrait être possible pour le moteur d'animation YUI à l'animation de levier de la même SMIL le cas échéant (Opera, Firefox et WebKit au moment d'écrire ces lignes) qui devrait également conduire à des améliorations de performance.

Les extensions SVG sur le site web svg-wow.org sont disponibles comme un module YUI Galerie 3 pour ceux qui veulent profiter du plaisir de travailler avec YUI et SVG.

Références

• SVG Wow!
• SVG Spécification
• SVG Tutoriel
• Adobe SVG Zone (un peu daté, mais il a encore de bons exemples)
• exemples carto.net
• KevLinDev

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Dans l'état sauvage pour Octobre 15, 2010

15 octobre 2010 à 10:03 am par Eric Miraglia | Dans In the Wild | 2 Commentaires

YUIConf 2010 est juste autour du coin , et nous continuons d'avoir la tête baissée à travailler sur cet événement et la prochaine version 3.3.0 YUI. En attendant, voici ce que nous avons noté dans la communauté dans les dernières semaines. Faites-nous savoir @ yuilibrary (ou dans les commentaires ci-dessous) ce qui nous a manqué!

• Andrew Wooldridge, "l'apprentissage YUI: Pt. 2 - Communauté, l'exploitation forestière, et la console " : Andrew Wooldridge (@ triptyque) est de retour avec la partie 2 de son nouveau «Learning Series YUI blog". J'aime particulièrement (et d'accord avec) son point de vue sur la communauté YUI: "En un mot, la communauté est vraiment ce qui fait YUI se démarquer à moi comme une bibliothèque javascript. Si vous avez besoin d'aide travaillant avec YUI, il ya des forums communautaires , une canal IRC , ainsi que Heures Open qui vous permettent de parler directement avec les développeurs de YUI. Je recommanderais que vous êtes connecté au début de votre expérience d'apprentissage, en particulier avec le canal IRC parce que vous allez découvrir un groupe de gens intelligents utile traîner là-bas et sont prêts à répondre à toute question, peu importe comment en apparence banals. Vous devez également suivre yuilibrary sur twitter que vous serez mis à profit les dernières nouvelles YUI là. " Découvrez le blog complet pour plus d' . J'ai couvert une part dans un précédent "In the Wild" colonne . #
  
• "Crash Course" Andrew Burgess sur YUI 2 grilles sur Nettuts : "Crash Course" Andrew Burgess sur YUI 2 grilles, nous avons d'abord noté en mai dernier , a été repris par Nettuts et apporte une nouvelle vague d'attention à ce qui a historiquement été l'un des projets les plus populaires de YUI. #
  
• Créer un blogroll avec Google Spreadsheets et YUI3 : Andrew Wooldridge (@ triptyque) poursuit sa série de YUI 3 axées sur les articles avec une nouvelle entrée qui relie YUI 3 et Google Docs. "Je l'admets: j'ai été inspiré par cet article par Codeinfront.com. L'idée de créer un extrait de code que n'importe qui peut partager, mettre à jour, et d'apprendre de est juste extrêmement convaincante et satisfaisante. Donc, je vous offre quelque chose que vous n'avez jamais pensé. Vous pouvez utiliser Google Spreadsheets en tant que source de données JSON. YUI3 de module de JSONP parle très bien à cette source de données JSON et vous permet de créer des sites essentiellement que l'on peut guidé par les données et pourtant jamais vous obliger à avoir une configuration compliquée MyAdmin PHP ou base de données MYSQL. Vous pouvez faire tout cela par le biais des technologies côté client et un peu d'aide de Google Spreadsheets. Si vous combinez cela avec la capacité des formulaires dans les feuilles de calcul G, vous pouvez même créer une page de rapport rafraîchissante à base de certains d'enquête que vous créez. Descendons au code. "Descendez au code avec le billet de blog complet ici #
  
• DRAGONtape site vidéo remixage utilisant YUI 3 : le site DRAGONtape vidéo remix fait un usage extensif de YUI 3. Voici comment les auteurs du site décrire le projet: "DRAGONtape est une webapp qui vous permet de créer des mixtapes de vos vidéos préférées en ligne, afin que vous puissiez les regarder comme un spectacle continu. Les bandes que vous créez sont accessibles via une URL unique, de sorte que vous pouvez facilement partager avec des amis ou de les intégrer dans une page web. Les clips source restent dans leur emplacement d'origine, se souvient tout simplement DRAGONtape où les trouver. " #
  
• Erik Eldridge, "Simple YUI 3 Module pour connecter Yahoo!" : YDN évangéliste Erik Eldrige a écrit un tutoriel intéressant sur ​​son blog personnel qui vous montre comment tirer parti de YUI 3 et Yahoo! OpenID système simple et efficace. Écrit Erik: "En regardant la page de destination sur le site OpenID YDN pourrait donner l'impression que la déconnexion des utilisateurs dans un site avec un compte Yahoo! est difficile. Compte tenu des conditions suivantes, cependant, l'ajout de connexion à Yahoo! de votre site peut être assez simple:
  1. Parce que nous sommes ne cibler que les comptes Yahoo!, nous pouvons programmer le lieu de connexion à https://open.login.yahooapis.com/openid/op/auth
  2. Si nous enregistrons les utilisateurs via une popup, mais tout gérer via JavaScript sur la page parent, nous pouvons nous passer de validation de la réponse en revenant de Yahoo! "
  Vous pouvez trouver le tutoriel complet ici . #
  
• Au fond, un nouveau YUI 3-alimenté Système Présentation HTML5 par Reid Burke : @ Reid ne fait que commencer ce projet en cours, mais il ya beaucoup à aimer déjà. Suivant les traces d'une série d'outils de présentation basées sur des normes qui ont lancé dans les dernières années, Upstage met un YUI 3 torsion sur le genre. Code est sur GitHub - téléchargement, la fourche, et amusez-vous. ( source d'origine. ) #
  
• Un Widget simple Twitter avec YUI 3 et YQL (par @ codeinfront) : @ codeinfront a posté un nouveau tutoriel sur l'utilisation de YUI 3 et YQL dans un mashup Twitter. "Alors que dans les projets entre J'ai été jouer avec JavaScript dates y compris la conversion en temps relatif. Voilà donc me conduire à tester la fonction dans un contexte widget Twitter. J'ai fini avec un widget Twitter en utilisant YUI 3 et YQL. Le code ci-dessous explore quelques concepts intéressants ... " Découvrez le blog pour plus de détails . #
  
• "YUI, Comment osez-vous Make Me Repenser ..." : Techie Michigan écrit que YUI 3 est conçu pour briser les mauvaises habitudes et le défie de trouver de nouveaux modes de codage, espérons mieux. "Lorsque vous utilisez YUI3 vous avez un YUI (). Utiliser () et tout est encapsulé dans ce petit bout de code. Donc, si je devais tout simplement déplacer le code dans le bloc MyApp YUI je ne suis plus capable d'y accéder à partir de la page de contenu je veux courir sur JS. Donc, ce qui est bon, pas de variables globales JS, mais c'est mauvais ... pas la façon dont j'ai été faire les choses. "Vous pouvez voir MT épiphanie complet ici . #
  
• Jeez.eu sur Construire un moteur de recherche personnalisé avec YUI : tutoriel Jeez.eu 's sur la construction d'un moteur de recherche personnalisé s'appuie fortement sur ​​YUI 2 widgets et les services publics. #
  
• Liste des ressources de Node.js @ codeinfront Comprend Crockford, Dav verre : Blogger Mark Rall (codeinfront @) a compilé une série de ses préférés Node.js ressources liées. Key d'entre eux sont deux récents pourparlers Théâtre YUI de Douglas Crockford et Dav verre. Pour ses autres favoris, rendez-vous sur son blog . #
• Mise à jour ErisDS at Son carrousel personnalisé de navigation Exemple pour 2.8.x : Northampton blogueur ErisDS a mis à jour son travail sur la coutume de navigation pour YUI 2 Carousel pour soutenir YUI 2.8.x. «L'an dernier, j'ai publié deux parties d'un tutoriel en trois parties (doh) sur le Widget YUI2 Carousel qui a travaillé avec YUI Carousel 2.7.0. Depuis ce temps, un nouveau couple de nouvelles versions de la YUI2: widget carrousel ont été libérés (2.8.0 et 2.8.1), et il semble que mes exemples ne fonctionnent pas avec le code mis à jour. Ce poste couvre les questions, les raisons pour lesquelles ils se produisent et comment les résoudre. " Découvrez l'article complet ici . #
  
• Tweet de la semaine : Du @ bartt : "Etre capable d'utiliser # YUI fois sur le client et le serveur est très gentil. JavaScript + ma bibliothèque préférée des deux côtés de la clôture == changement de contexte! ». #
  

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUIConf 2010: Pré-inscription se termine cette semaine

7 octobre 2010 à 9:03 am par Jenny Donnelly | En développement , les événements YUI | Les 2 Commentaires

Une gamme impressionnante est en place pour YUIConf 2010 , qui se tiendra à Yahoo! Sunnyvale, CA campus cette Novembre 8-10. Douglas Crockford sera de retour avec un nouveau discours intitulé «L'avenir du projet", et Dion Almaer et Ben Galbraith sera le modérateur d'un panneau sur l'avenir de la discipline. Nous avons une prestigieuse brochette de conférenciers, dont Christian Heilmann, Dav verre, et Nicholas Zakas, en prenant le podium cette année sur des sujets couvrant YQL, NodeJS, et YUI:

• Une introduction à la YQL
• YQL + YUI: construction End-to-End Applications
• Construire YQL tableaux de données Open avec YQL Exécuter
• En utilisant (Ne pas abuser) YQL pour la mise en cache, de filtrage et de classement des données
• NodeJS + YUI 3
• Utilisation NodeJS et YUI 3 pour le serveur ou le rendu de navigateur Side
• Éviter code spaghetti avec JavaScript côté serveur
• Comprendre amélioration progressive avec YUI: Ecrire Moins, Atteindre Plus
• Internationalisation des applications à l'aide YUI 3
• Éditeur: The Next Generation
• Saisie semi-automatique: Deep Space Nine
• Le voyage de l'idée à Widget fonctionnement de YUI 3
• Finger Tips: Leçons tirées de la création une expérience tactile à base
• et beaucoup, beaucoup plus!

N'oubliez pas de signer cette semaine pour bénéficier du tarif lève-tôt de 35 $. Après 8 Octobre billets coûtent 50 $.

Pour les gens qui voyagent en dehors de la région de la baie, nous avons fait des taux Yahoo! disponibles dans plusieurs hôtels à proximité couple. Départ http://yuilibrary.com/yuiconf2010/ pour plus de détails.

CC photo de Dion Almaer par seanosh sur Flickr.

Mise à jour: Le prix lève-tôt était incorrecte. Les billets coûtent 35 $ par 8 Octobre.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!