2010 »Août» Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Douglas Crockford: "Crockford sur JavaScript - Scène 6: Loopage" (52 min.)

30 août 2010 à 3:47 pm par Eric Miraglia | Dans YUI Theater | Les 8 commentaires

Dernier opus Douglas Crockford dans le " Crockford de JavaScript "série, un discours dans lequel il porte sur le rôle de la boucle d'événements et de l'importance de JavaScript côté serveur, est maintenant disponible sur vidéo. Vidéo Flash est intégré ci-dessous, ou vous pouvez télécharger la vidéo HD (480p ~ 370 Mo) . Vidéo à partir des cinq premières conférences est disponible sur le Crockford à la page JavaScript .

Autres Vidéos récentes Théâtre Yui:

Nicolas et Victor Tsaran Zakas: l'accessibilité sur la page d'accueil Yahoo - Nicolas Zakas, un développeur principal de la page d'accueil Yahoo!, et Victor Tsaran, gestionnaire de Yahoo! 's l'accessibilité supérieurs, discuter des stratégies et des méthodes qui ont fait l'un des sites les plus visités en le monde entièrement accessible. La conversation a eu lieu à la meetup Juin 2010 BayJax à Yahoo.
Dennis Lembrée: Faire JavaScript Accessible - Dennis Lembrée, un expert en accessibilité et le créateur de AccessibleTwitter discute des défis de faire JS compatibles sites accessibles. La conversation a eu lieu à la meetup Juin 2010 BayJax à Yahoo.
Ryan Dahl: Introduction à la NodeJS - Ryan Dahl, le créateur de NodeJS, présente le projet et parle de l'amélioration des performances et une nouvelle architecture. La conversation a eu lieu à la meetup mai 2010 BayJax à Yahoo.
Elie Insua: jsdom: une mise en œuvre de la CommonJS DOM - Elie Insua introduit une implémentation côté serveur du DOM JavaScript au meetup mai 2010 BayJax à Yahoo.
Nicolas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Cinq contributeurs à O'Reilly de haute performance JavaScript discutent JavaScript avancé et DOM optimisations de script à la meetup Avril 2010 BayJax à Yahoo.

S'abonner à YUI Theater:

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

Présentation de Yeti: L'interface YUI Tests faciles

25 août 2010 à 15h16 par Reid Burke | En développement | Les 16 commentaires

Test JavaScript est un élément important mais souvent négligé du développement web. Une raison en est que le développement pour le Web signifie cibler plus d'un navigateur. YUI classe actuellement 11 environnements différents qui bénéficient de notre soutien au plus haut niveau. En outre, nous testons également YUI sur les nouveaux X-qualité des environnements tels que les appareils mobiles. Lorsque vous avez donc de nombreux environnements différents à l'appui, il est tentant de simplement choisir un couple d'importantes celles à développer avec localement et espérer pour le mieux.

Au YUI, nous utilisons le sélénium et d'Hudson pour l'exécution YUI test -tests unitaires basées sur le navigateur et l'exploitation de diverses configurations de système dans le cadre de notre stratégie d'intégration continue. C'est très bien pour la capture des problèmes qui résultent de l'intégration de votre travail avec le reste d'une pile logicielle complexe. Il est livré avec un prix: outils de CI comme ceux-ci sont compliqués à installer et à entretenir. Dans tous les cas, ils ne vous aident pas lorsque vous développez le code et les tests avant de vous engager.

Aujourd'hui, je suis excité pour libérer Yeti 0.1.0, un dispositif expérimental de ligne de commande outil destiné à rendre cross-browser test plus facile avant de vous engager une ligne de code.

Yeti se lance automatiquement des tests unitaires JavaScript dans un navigateur et rend compte des résultats sans avoir à quitter votre terminal. C'est très simple à utiliser: Il suffit de lancer yeti test.html pour obtenir les résultats de l'essai YUI test basé sur de test.html . Vous pouvez passer plusieurs documents HTML pour tester les composants multiples à la fois.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

La vraie puissance de Yeti est l'exécution des tests dans plusieurs navigateurs simultanément. Bien que Yeti pouvez ouvrir vos tests un par un sur votre ordinateur, Yeti vous permet d'exécuter des tests sur n'importe quel navigateur sur n'importe quel appareil-tout dans le même temps.

Si vous exécutez Yeti sans arguments, il va commencer un serveur Web que vous pouvez accéder à http://localhost:8000 . Vous pouvez alors pointer les navigateurs ou périphériques sur votre réseau pour que les URL et tous les tests que vous exécutez à partir de ce point sera exécuté sur tous les navigateurs visitant la page de test.

Lorsqu'il est combiné avec l'excellent localtunnel , pare-feu entre vous et les autres ordinateurs sont moins douloureuses. Si vous ne travaillez pas avec des informations sensibles, c'est un moyen simple de faire de votre Yeti à la disposition de l'internet:

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

Vous pourrez ensuite visiter cette URL pour accéder à Yeti et commencer l'exécution des tests:

Ceci est particulièrement utile pour les appareils cellulaires: Vous pouvez utiliser une connexion internet de votre opérateur sans avoir à obtenir de votre appareil sur le même réseau que votre ordinateur de développement.

Yeti vise à rendre plus facile les tests JavaScript, mais c'est loin d'être complète. (Ne prenez pas le nombre 0.1.0 version légèrement.) Yeti suppose que vous utilisez YUI test, a été testé uniquement sur Mac OS X, et ne peut pas travailler avec certains types de scénarios de test. Malgré ces lacunes, Yeti a été si utile à l'intérieur que nous ne voulions pas attendre plus longtemps pour la partager avec la communauté YUI.

Obtenir le code

Yeti est disponible sur GitHub et offerts dans le cadre de YUI licence BSD .

Installation

Yeti est entièrement écrit en JavaScript et tourne au-dessus de la NodeJS . Si vous êtes déjà un NodeJS et NPM utilisateurs, l'installation est très simple:

 $ npm install yeti@stable

Si vous n'avez pas installé NodeJS et NGP et vous êtes sur un Mac récent, vous pouvez toujours installer Yeti avec un installateur pratique.

Télécharger le Yeti 0.1.0 Installer 2.7 MB
Nécessite Mac OS X 10.6 et un processeur Intel Core 2 ou mieux

Si votre ordinateur ne répond pas aux exigences de l'installateur, vous pouvez toujours utiliser Yeti si vous êtes en mesure d'installer la NGP. Plus instructions d'installation et d'utilisation sont disponibles dans README Yeti .

Votre participation est la bienvenue

Yeti est le premier projet que nous avons lancé en Labs YUI , une catégorie générale où nos nouvelles idées et initiatives prendront forme. En tant que tel, Yeti est offert sans le même niveau de soutien que nos autres projets. Nous avons encore vous encourageons à poser des questions et donner votre avis dans les forums Yeti Yeti et nous espérons rend l'examen facile et amusant. Si ce n'est pas, s'il vous plaît nous dire , un bogue ou d'envisager de contribuer à Yeti .

Essais heureux!

À propos de l'Auteur: Reid Burke ( @ Reid ) est le membre le plus récent de l'équipe de YUI. Il aime les monstres abominables neige et le JavaScript.

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

Développer une étoile Accessible Widget Notes

24 août 2010 à 9h00 par Thierry Coblence | Dans accessibilité , de développement | Les 18 commentaires

Vous êtes pressé? Passer à la page de démonstration .

De nombreux sites e-commerce, les services de réseaux sociaux, et des communautés en ligne incluent des fonctionnalités de notation ou d'évaluation. Solliciter l'opinion des gens est même devenu un modèle d'affaires, il ya maintenant des sites dédiés à la notation des produits, des services, des entreprises, et plus encore.

L'interface la plus courante utilisée pour afficher votes est le "système d'étoiles", dans lequel un nombre particulier de points (souvent exprimée en étoiles) est assignée à un élément par chaque évaluateur. Nous trouvons ce modèle sur de nombreux sites, d'Amazon à Yelp.

Des exemples de systèmes de notation étoiles

Figure exemples A. étoiles par Amazon et Yelp .

Comme la figure A montre, les deux interfaces visuelles sont similaires, mais ce qui rend ces deux solutions est intéressant, c'est de leur base de balisage. Un repose sur <map> , l'autre sur <img> .

Vous pourriez penser que la plupart des systèmes de notation serait basée sur des balises avéré sémantique et «opérationnelle» à travers de nombreux agents utilisateurs - qui est, que les systèmes de notation serait basée sur un ensemble spécifique d'éléments et attributs HTML à laquelle on applique le comportement et style via JS et CSS. Ce serait logique, mais il est loin de la vérité. Quand il s'agit de balisage, les auteurs tentent à peu près tout:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
et plus encore ...

Le cas des Microformats

Avant de présenter quelques images des techniques basées sur de marquer votes, je pense qu'il est utile de mentionner une approche de base et simple (à partir de microformats ) qui utilise des caractères:

 <abbr class="rating" title="3 stars">***</abbr>

Avantages: Il est simple et sémantique.; Le balisage est minime.; La méthode n'est pas tributaire de CSS.; La méthode n'est pas tributaire des images.; Il n'ya pas de requête HTTP.
Contre: Il est impossible de représenter les valeurs de la moitié (soit 3,5 étoiles); Il "fonctionne" seulement avec des astérisques ("étoiles").; Les lecteurs d'écran, par défaut, ne pas développer les abréviations (qui peut ne pas être un gros problème dans ce cas).

Remarque: j'utilise "*" plutôt que ★ (★) parce les lecteurs d'écran (au moins JAWS et NVDA ) semblent ignorer les entités html.

Markup pour afficher l'image à base de votes

Quand il s'agit d'afficher des images, les auteurs ont beaucoup d'options.

Une image par note

En utilisant une seule image:

 <img src="4stars.png" alt="4 out of five">

Une étoile
Deux étoiles
Trois étoiles
Quatre étoiles
Cinq étoiles

Avantages: Utiliser une image par notation est simple et sémantique.; La méthode n'est pas tributaire de CSS.; Balisage minimal.
Contre: Il crée de nombreuses requêtes HTTP car il ya beaucoup de différentes images.; En plus du problème de performances, il peut être un cauchemar de maintenance que les auteurs doivent faire face à davantage d'actifs (des images pour créer, pour pousser à un CDN, de modifier les couleurs du site lors du changement, etc.); La sélection de texte n'est pas possible dans l'Opéra (au moins dans la version 9.52) que le texte de remplacement est ignorée

Une image par unité de

De la whatwg l ' ébauche de travail :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

Une étoile
Deux étoiles
Trois étoiles
Quatre étoiles
Cinq étoiles

Avantages: L'utilisation de deux img éléments par note diminue le nombre de requêtes HTTP.; La méthode n'est pas tributaire de CSS.
Contre: Dans Opera, lorsque les images sont désactivées, le texte de remplacement n'est pas sélectionnable, et (dans une petite écran) que le texte est rendu avec une frontière qui le rend moins lisible.

Notez que cela est pris à partir d'un projet de travail controversée. À mon avis, cette méthode n'est pas acceptable parce que le texte de remplacement ne décrit pas l'image exacte et succincte. D'ailleurs, si la base de cette approche est que ces images représentent le contenu, alors pourquoi laisser certains d'entre eux sans alt texte?

Sur Ajaxian , par exemple, l'auteur utilise un texte de remplacement pour chaque image unique, ce qui fait beaucoup de sens s'il estime que chacun est contenu:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

En tout cas, en utilisant autant d'images qu'il ya d'étoiles par rapport à l'aide d'un seul élément (un img ou autre chose) a pour principal avantage de faciliter les mécanismes de vote -, où l'utilisateur sélectionne l'une des étoiles pour exercer son vote. Donc, nous devons garder cela à l'esprit ...

Un sprite pour les images d'arrière-plan

La technique suivante est une adaptation d'une stratégie de mise en œuvre à l'origine par les développeurs de Yahoo! Musique :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

Une étoile: 1 5
Deux étoiles: 2 5
Trois étoiles: 3 5
Quatre étoiles: 4 5
Cinq étoiles: 5 5

Avantages: Cette méthode nécessite une seule requête HTTP car il repose sur une image sprite unique.; Minimal "empreinte".
Contre: Le contenu n'est pas révélé au large avec des images.; Rien ne montre lorsque la page est imprimée (une feuille de style d'impression pourrait prendre soin de cette question).; Dans Opera, la feuille de style à contraste élevé rend toutes les étoiles disparaissent; la même chose est vraie dans l'optimisation du contraste en mode haute .; La sélection de texte est possible, mais il n'est pas évident (par l'intermédiaire surbrillance).

Un sprite dans le balisage

Cette approche est basée sur la méthode de la pointe , qui utilise une image du sprite comme un <img> élément plutôt que d'une image d'arrière-plan:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

Une étoile: 1 sur 5
Deux étoiles: 2 sur 5
Trois étoiles: 3 à 5
Quatre étoiles: 4 sur 5
Cinq étoiles: 5 sur 5

Avantages: Cette méthode nécessite une seule requête HTTP.; Cette technique est la seule des quatre méthodes ci-dessus qui révèle le contenu lorsque les utilisateurs Firefox, sélectionnez "cacher les images" ou "make images invisibles" (à partir de la barre d'outils du développeur).; Lorsque les images ne sont pas disponibles d'un rouge "x" n'apparaît que dans la plus haute cote (soit 5 sur 5) au lieu de chacun d'eux comme c'est le cas avec d'autres solutions qui reposent sur img éléments.
Contre: L'affichage des images est tributaire de CSS.

Il est à noter que, contrairement à d'autres techniques de remplacement d'image, cette méthode permet:

images à l'échelle en fonction de paramètres de taille de texte.
images à imprimer.
un texte de remplacement pour être facilement sélectionné comme l'image entière apparaît en surbrillance (Firefox).
l'image de ne pas disparaître dans un cadre à haut contraste / feuille de style.
la sélection de texte de remplacement dans Opera (lorsque les images sont désactivées).
frontières texte alternatif en vue d'Opera petit écran.

Markup de voter

À partir d'un mécanisme natif

Pour voter, il nous faut un mécanisme de vote de bas niveau qui permet la sélection utilisateur simple et la soumission. Pour cela, nous pouvons compter sur l'aide d'un formulaire avec des étiquettes et des contrôles:

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

Résulter

Ajout de pauses et les espaces

Pour une meilleure lisibilité, nous ajoutons <br> et les espaces.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Résulter

Présentation de l'image du sprite dans le balisage

Pour cette solution, nous utilisons un petit sprite que celle dans l'exemple ci-dessus. Il est maintenant composé de deux étoiles simples ("on" et "off").

Nous mettons img éléments à l'intérieur des étiquettes. Nous supposons qu'ils n'auront pas de valeur sans soutien CSS suffisant, ce qui nous «cacher» leur mise en dimensions spécifiques par l'intermédiaire de leur width et height des attributs. Notez que l'utilisation 0 avec les deux attributs qui montrent une image brisée dans certains s UA.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

Notez que le balisage ci-dessus, nous pouvons nous attendre (dans la plupart des navigateurs) de sélection de champ via la sélection étiquette.

Considérant l'accessibilité

Malheureusement, comme c'est, ce balisage crée des problèmes dans au moins deux lecteurs d'écran: JAWS et NVDA (voir cas de test pour ces bogues). Le problème est lié à l'utilisation d'un title d'attribut et une chaîne vide pour le texte de remplacement.

La solution de contournement à ne pas confondre lecteur d'écran des utilisateurs est d'utiliser "stars" comme texte alternatif ( alt ) et d'utiliser JavaScript pour insérer title sur mouseover.

Mieux Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Résulter

Coiffant

Donner les dimensions de l'image via CSS

Nous utilisons em pour permettre à l'image pour agrandir ou rétrécir en fonction de la taille des caractères.

Markup

Inchangé

CSS

 img { width:2.8em; height:1.4em; }

Résulter

Comme vous pouvez le voir déjà, en cliquant sur une image sélectionne le bouton radio correspondant. Il n'est pas nécessaire pour les scripts que l'étiquetage implicite produit ce comportement (sauf dans IE).

Enlever l'image à partir de l'écoulement

Styling l' label avec position:relative et l'image avec position:absolute avec top / left des valeurs est assez pour cacher input et le texte à l'intérieur des étiquettes.

Markup

Inchangé

CSS

  label { 
    position: relative;
 } 
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 }

Résulter

Affichage d'une étoile par étiquette

Nous le style de l'étiquette de sorte que ses dimensions correspondent à la hauteur et la largeur d'une seule étoile.

Markup

Inchangé

CSS

 label { position:relative;   hauteur: 1.4em;
  Largeur: 1.4em;
  overflow: hidden;
  display: block; 
 }
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Résulter

Affichage des étoiles horizontalement

Nous enlevons le br s et nous faire flotter les étiquettes.

Markup

Inchangé

CSS

  br {
  display: none;
 } 
 label {
   position: relative;
   hauteur: 1.4em;
   Largeur: 1.4em;
   overflow: hidden;
    display: block; 
    float: left; 
 }
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }

Résulter

Affichage de l'image sprite en fonction de la cote

Pour définir un "3 sur 5" Note, nous appliquons la même classe au cours des deux dernières étiquettes. Cette classe sera décaler la position de l'image à l'intérieur de l'étiquette.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ label> <br>
 <Label   class = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ label>
 </ Fieldset>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star img {
  à gauche:-1.4em;
 }

Résulter

Ne pas se fier sur l'image seule pour afficher des informations

Il est important d'offrir une alternative à l'affichage d'étoiles dans le cas des images ne sont pas disponibles. C'est parce que les étiquettes et les boutons radio sont de style pour être au top de l'autre. Une solution simple consiste à déplacer input et le texte hors de l'écran (à l'aide text-indent:-999em ) et d'appliquer une couleur de fond sur les étiquettes.

Markup

Pas de changement

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   arrière-plan: sarcelle;
  margin-right: 1px;
  text-indent:-999em; 
 }
 img {
   Largeur: 2.8em;
   hauteur: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   à gauche:-1.4em;
 }

Note:

text-indent fixe également un haut saut de l'image à chaque fois que les contrôles obtiennent le focus.
la marge de droite est de s'assurer que les couleurs de fond et non pas créer des carrés des rectangles (qui se passerait avec des étiquettes adjacentes partageant la même couleur de fond).

Résulter

Finition

Nous utilisons la pseudo-classe :hover pour créer un effet de survol,
Nous nous cachons la frontière fieldset,
Nous nous cachons la légende,
Nous le style du curseur.

Markup

Inchangé

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   cursor: pointer; 
 }
 . No_star {
   background: # ccc;
 }
 . No_star img {
   à gauche:-1.4em;
 }
  label: hover {
  opacité: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  marge: 0;
 }
 la légende {
  text-indent:-999em;
 }

Remarque: label:hover est ignoré par IE6 et Opera les saignements de couleur de fond à travers les images. Dans la page de démonstration , au lieu d'utiliser opacity , je me sers d'un sprite différent qui montre quatre états.

Résulter

Affichage des notes sans interaction de l'utilisateur permettant

Nous pouvons faire les évaluations "lecture seule" en ajoutant disabled et checked dans les attributs appropriés input des champs.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   handicapé   > 1/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "2_5"   handicapé   > 2/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "3_5" cochée = "   vérifié   "> 3/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "4_5"   handicapé   > 4/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = "radio" name = "movie" value = "5_5"   handicapé   > 5/5 </ label>
 </ Fieldset>

CSS

La règle à l'aide :hover a été supprimé

h4> Résultat

Donner plus de pensée dans le processus

À ce stade, il est possible de voter sans le soutien de script, mais les utilisateurs voyants n'ont aucune idée au sujet de leur sélection. Nous avons donc utiliser JavaScript pour:

améliorer les informations à l'utilisateur au sujet de son choix,
donner aux utilisateurs une indication visuelle du clavier pendant qu'ils naviguer à travers les boutons radio.

Dans le même temps, nous profitons de l'aide d'un script à insérer title des attributs qui vont créer une "info-bulles" lorsque les utilisateurs pointent sur les étiquettes ou les étoiles.

En raison de l'absence de sélection des commentaires concernant sans JavaScript, nous étiquettes style et la forme ne contrôle que s'il ya un soutien script. Pour ce faire, nous utilisons JavaScript afin de définir un indicateur sur le html élément, puis nous créons une règle basée sur les sélecteurs descendants contenant que le crochet. Si le drapeau est absent, cette règle ne s'applique pas et les éléments ne sont pas coiffés.

Il s'agit de la page de démonstration , le produit final. Pour voir comment cette solution se comporte selon divers paramètres, vous pouvez utiliser vos outils de développement préférés pour augmenter la taille du texte, casser les chemins d'image, désactiver JavaScript, CSS tourner hors, et plus encore ...

Envelopper

Venir avec un "acceptable" solution nécessite d'identifier les besoins, les agents utilisateurs des utilisateurs particularités, les paramètres utilisateur et les agents plus - ce qui signifie des tests approfondis.

Dans ce processus, la rétroaction des utilisateurs est essentielle, car suivant les meilleures pratiques n'est pas toujours une chose sûre. Par exemple, comme mentionné précédemment, la mise en aucune valeur pour le alt attribut des images dans les étiquettes semblent être la chose sûre à faire, mais il s'avère que cela crée des problèmes avec au moins deux lecteurs d'écran (voir cas de test ).

En outre, la rétroaction des utilisateurs des appareils et accessoires fonctionnels permet d'ignorer certains messages d'erreur de validation - que celui que les rapports de Firefox la barre d'outils d'accessibilité (en fonction de http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

Le but ici n'était pas de tout réparer, si. Être en mesure de voter sans un dispositif de pointage est une de mes priorités, mais l'amélioration de l'apparence et la sensation de la solution dans l'Opéra où les images sont désactivées n'est pas quelque chose que je considère essentiel.

La partie la plus intéressante de ce «voyage» était de rendre la solution accessible à de nombreux utilisateurs dans des conditions différentes, abordant des questions telles que:

images de congé,
javascript off,
CSS hors tension,
une combinaison de ce qui précède.

Il est également bon de savoir que cette technique repose sur img éléments plutôt que des images de fond, ce qui permet aux étoiles de:

se redimensionnent en fonction des paramètres de l'utilisateur,
montrent en mode de contraste élevé,
être imprimé par défaut (contrairement aux images d'arrière-plan).

Tout cela vient sans sacrifier les performances, comme cette solution repose sur ce sprite unique:

Fin trouver

J'ai récemment découvert le système Amazon a construit pour sa page de vote. Il est assez intéressant car ils servent une solution différente en fonction de support de script. S'il ya un appui script, ils utilisent une image <map> (approche intéressante), s'il n'ya pas de support de script qu'ils utilisent des boutons radio. Dans les deux cas, la solution est accessible aux utilisateurs du clavier, ce qui contribue à maximiser l'accès à une fonctionnalité qui est un noyau de différenciation pour la plateforme Amazon.

Notez qu'ils ne sont pas utiliser JavaScript pour remplacer les boutons radio avec une image <map> ; au lieu, ils utilisent noscript éléments dans la table qui contient le balisage des boutons radio.

"Out of the box" des solutions

Dreamweaver ^®: Spry Note Widget
YUI: Script étoiles pour YUI; Script de Star Rating avec YUI
JQuery: Plugin Note demi-étoile; jQuery évaluateur Ajax; Simple système d'étoiles; 5 Système étoiles en PHP, MySQL et jQuery
WordPress: Système GD Star Rating pour WordPress; GD Star Rating; Star Rating pour avis
Flash: 5 composant du système d 'étoiles
Divers.: Comment un classement par étoiles doit être; Starry widget 2

Des remerciements spéciaux

Un merci spécial à Victor Tsaran et Kloots Todd pour leurs précieux commentaires.

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

Annonçant YUI 3.1.2: mise à jour de sécurité critique pour tous les utilisateurs 3.1.x/3.2.0pr1 YUI

19 août 2010 à 12h35 par Eric Miraglia | En développement | Comments Off

L'équipe de YUI YUI 3.1.2 publié aujourd'hui. Il s'agit d'une mise à jour de sécurité importante pour tous les utilisateurs de YUI 3.1.x et 3.2.0pr1. Si vous hébergez YUI 3.1.x ou 3.2.0pr1 sur votre site, ou si vous utilisez YUI 3.1.x/3.2.0pr1 OI cross-domain fonctionnalité, vous êtes affecté.

XDR dans l'utilitaire de YUI IO met en œuvre un transport Flash en tant que solution de repli pour les navigateurs qui ne prennent pas en charge native XDR. Une erreur dans notre mise en œuvre de la solution de repli Flash dans YUI versions 3.1.x et 3.2.0pr1 permet à l' io.swf fichier sur lequel opérer dans des conditions dangereuses si servis à partir du CDN Yahoo! ou de votre propre serveur. Le remède à ce problème est double:

Si vous avez déployé la pleine YUI 3.1.x/3.2.0pr1 répertoire de construction à votre serveur, remplacez build/io/io.swf dans la version affectée avec la version incluse dans YUI 3.1.2. Faites-le si vous êtes ou non en utilisant l'utilité ou sa fonction IO XDR.
Si vous êtes en utilisant la fonction XDR OI, mise à niveau vers la version 3.1.2 de io-swf aborde le problème de sécurité. Hôte de la version 3.1.2 io.swf sur votre propre serveur (ce fichier ne peut pas fonctionner en toute sécurité à partir d'un CDN, il n'est pas inclus sur le CDN à compter du 3.1.2). Si vous avez été l'élaboration io.swf de http://yui.yahooapis.com , retirez ce domaine à partir de votre crossdomain.xml fichier.

Plus de détails sur cette question peut être trouvée dans la documentation de l'utilitaire IO .

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

Le mode Edition rapide pour YUI 2 DataTable

19 août 2010 à 8:42 am par John Lindal | En développement | Les 9 commentaires

YUI 2 DataTable fournit l'édition en ligne noire. Lorsque disableBtns est activée dans la configuration de colonnes, modification des valeurs simples comme des chaînes ou des nombres se sent juste comme Excel. Toutefois, l'expérience ne peut pas être aussi sensible que une application de bureau parce que chaque changement nécessite généralement un appel XHR au serveur pour stocker (ou de rejeter!) La nouvelle valeur. Si l'utilisateur a besoin de changer la plupart des valeurs affichées, il peut être une expérience lent et frustrant. Pour résoudre ce problème, j'ai développé QuickEditDataTable. Cette s'étend DataTable pour ajouter le mode Edition rapide, qui permet toutes les valeurs modifiables à être changé en une seule opération en vrac:

( Cliquez sur la capture d'écran pour jouer avec cet exemple .)

Vue d'ensemble

Pour entrer le mode Edition rapide, appelez startQuickEdit() . Pour quitter le mode Edition rapide, appelez cancelQuickEdit() .

Il est de votre responsabilité de sauvegarder les modifications avant d'appeler cancelQuickEdit() . Pour simplifier cette tâche, QuickEditDataTable fournit getQuickEditChanges() . Cela renvoie un tableau d'objets, un pour chaque rangée. Chaque objet contient uniquement les valeurs qui ont été modifiés dans cette rangée, assortie au large de la colonne id. Par exemple, si la table dispose de 4 colonnes (titre, auteur, année, quantité), et le seul utilisateur a modifié la quantité en une seule rangée à 20, puis l'objet de cette ligne serait {quantity:20} . Les autres valeurs seraient omis.

QuickEditDataTable pouvez facilement étendre YAHOO.widget.ScrollingDataTable si vous avez besoin de cette fonctionnalité. Si vous avez besoin, il suffit de faire une copie du fichier source et de changer la classe de base.

Configuration

Quick Edit est un état modal dans lequel les formateurs de cellules pour les colonnes modifiables sont échangés et remplacés par des formateurs de particuliers qui génèrent des input , textarea , ou select les éléments. Seules les colonnes qui ont quickEdit configuration sera modifiable. Les options de configuration sont les suivantes:

copyDown

Si cela est vrai, la première cellule de la colonne aura un bouton pour copier la valeur vers le bas pour le reste des lignes.

formatter

Le formateur cellule qui rendra un champ de formulaire approprié: <input type="text">, <textarea>, ou <select>. Par défaut, le formateur cellule YAHOO.widget.QuickEditDataTable.textQuickEditFormatter est utilisé pour toutes les cellules à produire des éléments d'entrée. Pour obtenir un textarea élément, configurer une colonne à utiliser YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter lieu. Vous pouvez également écrire une coutume formateur d'édition rapide - voir ci-dessous.

validation

Validation de configuration pour chaque champ dans la colonne.

css

Classes CSS codant les règles de validation de base:

yiv-required: Valeur ne doit pas être vide.
yiv-length:[x,y]: La chaîne doit être au moins x caractères et dans la plupart y caractères. Au moins un de x et y doivent être spécifiées.
yiv-integer:[x,y]: La valeur entière doit être au moins x et au plus y . x et y sont tous deux en option.
yiv-decimal:[x,y]: La valeur décimale doit être au moins x et au plus y . Exposants ne sont pas autorisés. x et y sont tous deux en option.

fn

Une fonction qui sera appelée avec le DataTable dans sa portée et l'élément de formulaire de la cellule de l'argument. Retourne vrai si la valeur est valide. Sinon, appelez this.displayQuickEditMessage(...) pour afficher une erreur et alors retourner faux.

msg

Une carte de types à des messages qui seront affichés quand une règle de validation de base ou regex échoue. Les types valides sont: required , min_length , max_length , integer , decimal , et regex . Il n'ya pas de défaut pour le type regex , donc vous devez spécifier un message si vous configurez une validation regex. Les messages d'erreur par défaut pour les autres types sont stockés dans YAHOO.widget.QuickEditDataTable.Strings et peuvent être substitués et / ou localisée.

regex

Expression régulière que la valeur doit satisfaire pour être considéré comme valide.

Parfois, une colonne non-modifiable doit être rendue différemment au cours de mode Edition rapide. Le meilleur exemple est une colonne contenant un lien, puisque naviguer loin de la page tout en mode Edition rapide peut être désastreux. Pour supprimer le lien au cours de Quick Edit, configurer qeFormatter pour la colonne pour être YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . Pour les adresses e-mail, utilisez YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . Vous pouvez également vous écrire personnalisé, en lecture seule formateur. Il suffit de suivre les règles normales pour la construction d'un formateur de cellules DataTable.

Personnalisés rapides de formatage Modifier

Pour écrire un formateur de cellule personnalisé pour le mode d'édition rapide, vous devez structurer la fonction comme suit:

 fonction myQuickEditFormatter (el, oRecord, oColumn, OData) {
   var = balisage
     «<input Type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/> '+
     YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
     el.innerHTML = lang.substitute (balisage, {
       clé: oColumn.key,
       yiv: oColumn.quickEdit.validation?  (OColumn.quickEdit.validation.css | |''):''
     });
     el.firstChild.value = extractMyEditableValue (OData);
     YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply (this, arguments);
 };

Vous pouvez utiliser textarea ou select au lieu de input , mais vous ne pouvez créer un seul champ.

extractMyEditableValue() ne doit pas être une fonction distincte ni ne doit être limité à l'utilisation que oData . Les travaux devraient normalement être fait en ligne dans la fonction de formatage, mais le nom de l'exemple de fonction fait le point clair.

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

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

Utilisation de YUI 2 sur le moteur de recherche DuckDuckGo

19 août 2010 à 5:41 am par Gabriel Weinberg | En implémentations YUI | Les 2 Commentaires

DuckDuckGo est un moteur de recherche qui utilise YUI largement. Voici ce qu'il utilise en particulier:

ImageLoader. Matt Mlinac de YUI 2 ImageLoader était la première chose que j'ai mis en œuvre et ce qui m'a accroché à l'origine sur YUI pour ce projet. DuckDuckGo a favicons aux résultats à venir et a souvent "Zero-Click info" ci-dessus des résultats qui inclut habituellement une image . Je ne voulais pas ces images de rivaliser avec les résultats lors du chargement, comme l'obtention de résultats aussi vite que possible est l'objectif ultime.
L'utilitaire gère cette ImageLoader bien en chargeant les images après le chargement de la page. DDG également auto-charge la page suivante de résultats lorsque vous faites défiler vers le bas. Parfois, les icônes favicons sont donc cachées, et avec ImageLoader leur charge est retardée (parfois indéfiniment) jusqu'à ce que nécessaire. Pour ce faire, il ya un groupe d'images différentes pour chaque (interne) la page, chacun avec son déclenchement personnalisé.
```
  div.event = new YAHOO.util.CustomEvent («il»);
     var = new IG1 YAHOO.util.ImageLoader.group (div, «clic»);
     ig1.addCustomTrigger (div.event);
     div.ig = IG1;
```
Cookie. DuckDuckGo a beaucoup de paramètres , qui sont stockées via les cookies et alternativement par params URL . Lorsque les cookies sont utilisés, j'utilise Nicolas Zakas de YUI utilitaire Cookie 2 d'obtenir facilement et définir les valeurs.
```
  YAHOO.util.Cookie.set (cookie, valeur, {expire: new Date ("Janvier 12, 2025")});
   x = ki | | YAHOO.util.Cookie.get ("i"); 
```
StyleSheet. Certains paramètres DDG changer le look and feel du site. Ces changements sont réellement accompli après chargement de la page par l'intermédiaire Luke Smith de l'utilitaire YUI StyleSheet 2 . Certains de ces changements sont simples et je peux juste utiliser le setStyle fonction Dom .
```
  YAHOO.util.Dom.setStyle ('b2', 'display', 'block'); 
```
D'autres exigent des changements de classe réelles, dont je me sers de l'utilitaire à faire.
```
  . YAHOO.util.StyleSheet ('DDG') ensemble («IC»., {Display: "block"}).
             ensemble (, {display: "block"} 'cid. »).
             ensemble (, {display: "block"} "ci2. ').
             enable (); 
```
Dom. J'utilise aussi à certaines fonctions de base de Matt Sweeney de YUI 2 composants Dom . J'ai fait allusion à setStyle ci-dessus, et j'ai aussi utiliser les connexes getStyle , addClass et removeClass fonctions. En outre, je trouve le getViewportHeight , getViewportWidth , getX et getY fonctions à être incroyablement utile pour faire fonctionner les choses cross-browser, et maintenant sur les écrans mobiles.
KeyListener. DDG a un tas de raccourcis clavier qui vous permettent de naviguer dans les résultats sans la souris. J'utilise le YUI KeyListener 2 composant pour permettre à ces raccourcis.
```
  kl14 = new YAHOO.util.KeyListener (documents, {touches: [70]}, {fn: non}); kl14.enable (); 
```
Saisie semi-automatique. Je travaille actuellement sur l'ajout de suggestions de recherche pour le moteur de recherche, et que vous utilisez Jenny Donnelly YUI 2 saisie semi-automatique de composants pour le front-end. Je comprends que saisie semi-automatique est introduit dans se YUI 3 bientôt. Tout le reste je utiliser a déjà été introduite dans YUI 3, si je peux utiliser YUI 2. Cependant, je vais être explorer la migration vers YUI 3 bientôt.

À propos de l'auteur: Gabriel Weinberg est le fondateur du moteur de recherche DuckDuckGo, basé à Valley Forge, en Pennsylvanie. Gabriel a été l'un des fondateurs de démarrage pour plus de dix ans, et sa dernière entreprise a été vendue en 2006. Gabriel est diplômé de MIT en physique et la technologie et du Programme de politique.

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

La mise en œuvre YUI sur le Planificateur Assembla.com Agile

18 août 2010 à 6:35 am par Joachim Larsen | En implémentations YUI | Comments Off

Rapide et amusant - qui était l'exigence de l'utilisateur pour le planificateur nouvelle Assembla.com Agile - une interface AJAX pour ajouter des tâches de développement, la construction histoire / fonction contours, et les horaires dans les versions. Nous avons eu la chance d'avoir YUI 3 pour le rendre rapide et amusant à mettre en œuvre ainsi.

J'avais utilisé YUI 2 pour un certain nombre de projets antérieurs et j'avais été impressionné par l'ingénierie des composants d'interface utilisateur et l'infrastructure des bibliothèques sous-jacente. Je voulais en savoir plus sur YUI 3, avec sa syntaxe compacte et plus l'accent sur la manipulation du DOM et CSS3 style sélecteurs. Ce projet, avec une faible dépendance des widgets prédéfinis, était une occasion idéale de me mouiller les pieds avec YUI 3. Les installations pour la mise en œuvre «app grande» via des modules personnalisés et l'intégration avec YUI chargeur fait un choix naturel.

Le planificateur Agile prend en charge un certain nombre d'interactions utilisateur de glisser-déposer avec des groupes d'interaction multiples et les comportements basés sur le contexte. Dans le même temps, il gère un ensemble complexe d'interactions avec le serveur, y compris la fusion de nouvelles données depuis le serveur, et la propagation des modifications sur le serveur.

Nous avons amélioré le planificateur existant qui a été fondée sur les gestionnaires d'Rails et prototype.js. Philosophie bac à sable YUI et les installations de la POO fortes fait coexistant avec Prototype.js une brise.

Nous avons utilisé un grand nombre de composants YUI, y compris:

Async-file d'attente pour offrir une expérience sensible sur une page qui peut impliquer 1000 + simultanées billets
Drag and Drop avec des groupes d'interaction.
IO en tant que gestionnaire de connexions à la file d'attente et interaction avec le serveur de massage.
Event-déléguer afin de permettre tout simplement hydratant html et de l'oubli à leur sujet.
Événement-clé pour l'interaction du clavier et de la navigation.
Collection de nous donner une expérience mise en œuvre cohérente à travers les navigateurs.
Cookie de la persistance d'assurance-chômage facile à court terme.
Profiler pour trouver les plus grands gains de vitesse
YUI Doc de laisser des informations pour le reste de l'équipe

Travailler avec YUI 3 sur un soft comme cela a été amusant, et je suis impatient d'entendre ce que nos utilisateurs nous exhorte à le faire la prochaine!

À propos de l'auteur: Joachim Larsen est un ingénieur frontend avec Assembla.com.

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

Page suivante »

Propulsé par WordPress sur Yahoo! Hébergement Web .

Autres Vidéos récentes Théâtre Yui:

S'abonner à YUI Theater:

Obtenir le code

Installation

Votre participation est la bienvenue

Le cas des Microformats

Markup pour afficher l'image à base de votes

Une image par note

Une image par unité de

Un sprite pour les images d'arrière-plan

Markup

CSS

Un sprite dans le balisage

Markup

CSS

Markup de voter

À partir d'un mécanisme natif

Markup

Résulter

Ajout de pauses et les espaces

Markup

Résulter

Présentation de l'image du sprite dans le balisage

Considérant l'accessibilité

Mieux Markup

Résulter

Coiffant

Donner les dimensions de l'image via CSS

Markup

CSS

Résulter

Enlever l'image à partir de l'écoulement

Markup

CSS

Résulter

Affichage d'une étoile par étiquette

Markup

CSS

Résulter

Affichage des étoiles horizontalement

Markup

CSS

Résulter

Affichage de l'image sprite en fonction de la cote

Markup

CSS

Résulter

Ne pas se fier sur l'image seule pour afficher des informations

Markup

CSS

Résulter

Finition

Markup

CSS

Résulter

Affichage des notes sans interaction de l'utilisateur permettant

Markup

CSS

Donner plus de pensée dans le processus

Envelopper

Fin trouver

"Out of the box" des solutions

Des remerciements spéciaux

Vue d'ensemble

Configuration

Personnalisés rapides de formatage Modifier

YUI Library sur Twitter

Traduire

Syndicat

Messages récents

YUI Library

Archives:

Blogroll

Donnez votre avis politique

Devenir Yahoo!

Meta: