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

YUI Theater - Douglas Crockford: "Crockford su JavaScript - Scene 6: Loopage" (52 min.)

Agosto 30, 2010 at 3:47 pm di Eric Miraglia | In YUI Theater | 8 commenti

Ultima puntata Douglas Crockford nel " Crockford su JavaScript "serie, un discorso nel quale ricopre il ruolo di anelli di eventi e l'importanza di JavaScript lato server, è ora disponibile su video. Video Flash è incorporato qui di seguito, oppure è possibile scaricare il video HD (480p ~ 370MB) . Video dei primi cinque conferenze è disponibile sul Crockford a pagina JavaScript .

Altri recenti YUI Theater Video:

Nicholas Zakas e Victor Tsaran: Accessibilità nella home page Yahoo - Nicholas Zakas, uno sviluppatore principale della home page di Yahoo!, e Victor Tsaran, il direttore di accessibilità Yahoo! 's senior, discutere le strategie ei metodi che hanno reso uno dei più visitati siti web in al mondo completamente accessibile. Il colloquio ha avuto luogo al giugno 2010 BayJax meetup a Yahoo.
Dennis Lembree: Rendere accessibile JavaScript - Dennis Lembree, un esperto di accessibilità e il creatore di AccessibleTwitter discute le sfide di fare JS abilitati per siti accessibili. Il colloquio ha avuto luogo al giugno 2010 BayJax meetup a Yahoo.
Ryan Dahl: Introduzione alla NodeJS - Ryan Dahl, il creatore di NodeJS, introduce il progetto e parla di miglioramenti delle prestazioni e nuova architettura. Il colloquio ha avuto luogo al maggio 2010 BayJax meetup di Yahoo.
Elia Insua: jsdom: un'implementazione CommonJS del DOM - Elia Insua introduce un server-side attuazione del DOM JavaScript nel 2010 BayJax meetup a Yahoo.
Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript - Cinque collaboratori di O'Reilly High Performance JavaScript discuss avanzata JavaScript e DOM scripting ottimizzazioni al 2010 Aprile BayJax meetup a Yahoo.

Iscrizione a YUI Theater:

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Introduzione Yeti: Easy Interface Test YUI

Agosto 25, 2010 at 15:16 di Burke Reid | In Development | 16 commenti

Testing JavaScript è una parte importante ma spesso trascurato di sviluppo web. Uno dei motivi è perché in via di sviluppo per il web significa targeting più di un browser. YUI classifica attualmente 11 diversi ambienti che godono di più alto il nostro livello di supporto. Inoltre, abbiamo anche testare YUI sulle nuove X-grade ambienti come i dispositivi mobili. Quando si dispone di ambienti così diversi a sostenere, si sta tentando di raccogliere solo un paio di quelli importanti per sviluppare a livello locale e con la speranza per il meglio.

A YUI, usiamo selenio e Hudson per l'esecuzione di YUI test unit test basati su browser e varie configurazioni di sistema operativo come parte della nostra strategia di integrazione continua. Questo è grande per catturare i problemi che derivano da integrare il lavoro con il resto di uno stack di software complesso. Viene fornito con un prezzo: CI strumenti come questi sono complicate da installare e mantenere. In ogni caso, non ti aiutano mentre si sta sviluppando il codice e test prima di impegnarsi.

Oggi, sono felice di rilasciare Yeti 0.1.0, sperimentale riga di comando progettato per rendere cross-browser testing più facile prima di commettere una riga di codice.

Yeti lancia automaticamente i test unitari JavaScript in un browser e riporta i risultati senza lasciare il proprio terminale. E 'molto semplice da usare: basta eseguire yeti test.html per ottenere i risultati del Test-test basato YUI in test.html . È possibile passare più documenti HTML per testare i componenti contemporaneamente.

 $ 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)

Il vero potere della Yeti è l'esecuzione di test in più browser contemporaneamente. Anche se Yeti può aprire i test one-by-one sul tuo computer, Yeti consente di eseguire test su qualsiasi browser su qualsiasi dispositivo, il tutto allo stesso tempo.

Se si esegue Yeti senza argomenti, si avvierà un server web che è possibile accedere a http://localhost:8000 . È quindi possibile puntare i browser o dispositivi sulla rete a quel URL e ogni test che si esegue da quel punto verrà eseguito su tutti i browser che visitano la pagina di prova.

In combinazione con l'eccellente localtunnel , firewall tra te e altri computer sono meno dolorose. Se non state lavorando con informazioni sensibili, è un modo semplice per rendere il vostro Yeti a disposizione internet:

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

È quindi possibile visitare l'URL per accedere Yeti e avviare l'esecuzione di test:

Ciò è particolarmente utile per i dispositivi cellulari: è possibile utilizzare la connessione internet del tuo gestore senza la necessità di ottenere il vostro dispositivo sulla stessa rete del computer di sviluppo.

Yeti mira a rendere il testing più facile JavaScript, tuttavia, è lungi dall'essere completa. (Non prendere il numero di versione 0.1.0 alla leggera.) Yeti presume stiate usando YUI Test, è stato testato solo su Mac OS X, e potrebbe non funzionare con alcuni tipi di scenari di test. Nonostante queste carenze, Yeti è stata così utile internamente che non voleva più aspettare per condividere con la comunità YUI.

Ottenere il codice

Yeti è disponibile su GitHub e offerto sotto licenza BSD YUI .

Installazione

Yeti è scritto interamente in JavaScript e si appoggia su NodeJS . Se sei già un NodeJS e NPM degli utenti, l'installazione è molto semplice:

 $ npm install yeti@stable

Se non avete installato NodeJS e NPM e siete su un Mac recente, è comunque possibile installare Yeti con un installer conveniente.

Scarica il Yeti 0.1.0 Installer 2.7 MB
Richiede Mac OS X 10.6 e un processore Intel Core 2 o superiore

Se il computer non soddisfa i requisiti del programma di installazione, è comunque possibile utilizzare Yeti se siete in grado di installare NPM. Più di installazione e istruzioni per l'uso sono disponibili in README Yeti .

La vostra partecipazione è il benvenuto

Yeti è il primo progetto che abbiamo lanciato nel Labs YUI , una categoria ombrello dove le nostre nuove idee e iniziative prenderà forma. Come tale, Yeti è offerto senza lo stesso livello di sostegno come gli altri nostri progetti. Dobbiamo ancora incoraggiamo a fare domande e dare un feedback in forum Yeti e spero Yeti rende il testing facile e divertente. In caso contrario, si prega di dirci , un bug o prendere in considerazione contribuendo alla Yeti .

Buon test!

Chi l'Autore: Reid Burke ( @ Reid ) è il nuovo membro del team YUI. Ama abominevoli mostri di neve e JavaScript.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Lo sviluppo di un Widget accessibile stella Valutazioni

24 agosto 2010 alle ore 9.00 da Thierry Koblentz | In Accessibilità e Sviluppo | 18 commenti

In fretta? Vai alla pagina demo .

Molti siti di e-commerce, servizi di social networking e community online includono funzionalità di rating o di valutazione. Sollecitare opinione della gente è addirittura diventato un modello di business, ora ci sono siti dedicati ai prodotti di rating, servizi, imprese, e altro ancora.

L'interfaccia più comune utilizzato per visualizzare i voti è il "sistema di classificazione", in cui viene assegnato un determinato numero di punti (spesso espressa in stelle) a un elemento da ogni revisore. Troviamo questo modello su molti siti, da Amazon a Yelp.

Figura A. esempi txtStarRating da Amazon e Yelp .

Come Figura A mostra, entrambe le interfacce visuali sono simili, ma ciò che rende queste due soluzioni interessanti è la loro base di markup. Uno si basa sulla <map> , l'altro sulla <img> .

Si potrebbe pensare che la maggior parte dei sistemi di rating si baserebbe su alcuni markup dimostrato di essere semantica e "operativa" in molti programmi utente - cioè, che i sistemi di rating sarebbe basata su un insieme specifico di elementi e attributi HTML a cui si applica il comportamento e stile tramite JS e CSS. Questo avrebbe senso, ma è lontano dalla verità. Quando si tratta di markup, autori cercano quasi tutto:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
e altro ancora ...

Il caso di microformati

Prima di presentare alcune tecniche di image-based per marcare voti, penso che vale la pena menzionare un approccio di base e semplice (da Microformats ) che utilizza i caratteri:

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

Pro: E 'semplice e semantica.; Il markup è minima.; Il metodo non fa affidamento su CSS.; Il metodo non fa affidamento sulle immagini.; Non vi è alcuna richiesta HTTP.
Cons: E 'impossibile per rappresentare i valori metà (3,5 stelle); Essa "funziona" solo con asterischi ("stelle").; Screen-lettori, per impostazione predefinita, non espandere le abbreviazioni (che non può essere un grosso problema in questo caso).

Nota: Io uso "*", piuttosto che ★ (★) perché screen-reader (almeno Jaws e NVDA ) sembrano ignorare entità HTML.

Markup per visualizzare l'immagine a base di valutazioni

Quando si tratta di visualizzare le immagini, gli autori hanno molte opzioni.

Una immagine per voto

Utilizzando una sola immagine:

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

Una stella
Due stelle
Tre stelle
Quattro stelle
Cinque stelle

Pro: Utilizzando una sola immagine per punteggio è semplice e semantica.; Il metodo non fa affidamento su CSS.; Markup Minimal.
Cons: Crea molte richieste HTTP in quanto vi sono molte immagini differenti.; In cima al problema di prestazioni, può essere un incubo di manutenzione come autori hanno a che fare con più asset (immagini per creare, per spingere ad una CDN, da modificare quando cambiano i colori del sito, ecc.); Selezione del testo non è possibile in Opera (almeno nella versione 9,52) come il testo alternativo viene ignorato

Una immagine per unità

Dal WHATWG 's bozza di lavoro :

 <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">

Una stella
Due stelle
Tre stelle
Quattro stelle
Cinque stelle

Pro: Utilizzando due img elementi per punteggio diminuisce il numero di richieste HTTP.; Il metodo non fa affidamento su CSS.
Cons: In Opera, quando le immagini sono disabilitate, il testo alternativo non è selezionabile, e (in piccola visualizzazione a schermo), che il testo è reso con un bordo che lo rende meno leggibile.

Si noti che questo è tratto da una bozza di lavoro controverso. A mio parere, questo metodo non è accettabile perché il testo alternativo non descrive l'immagine in modo accurato e conciso. Inoltre, se la base di questo approccio è che queste immagini rappresentano il contenuto, allora perché lasciare alcuni di loro senza alt text?

On Ajaxian , per esempio, l'autore sta usando il testo alternativo ad ogni singola immagine, che fa un sacco di senso, se ritiene che ognuno è contento:

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

In ogni caso, usando come immagini quante sono le stelle rispetto all'utilizzo di un singolo elemento (un img o altro) ha il vantaggio principale di agevolare i meccanismi di voto - in cui un utente seleziona una delle stelle di esprimere il suo voto. Quindi dovremmo tenere questo in mente ...

Uno sprite per le immagini di sfondo

La tecnica che segue è un adattamento di una strategia inizialmente attuato con gli sviluppatori di Yahoo! Musica :

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; }

Una stella: 1 di 5
Due stelle: 2 su 5
Tre stelle: 3 su 5
Quattro stelle: 4 su 5
Cinque stelle: 5 su 5

Pro: Questo metodo richiede una singola richiesta HTTP in quanto si basa su una singola immagine sprite.; Minimal "impronta".
Cons: Il contenuto non viene rivelato con immagini fuori.; Nulla indica quando la pagina viene stampata (un foglio di stile di stampa potrebbe prendersi cura di questo problema).; In Opera, il foglio di stile ad alto contrasto fa sparire tutte le stelle, lo stesso vale per l'ottimizzazione High Mode Contrasto .; La selezione del testo è possibile, ma non è ovvio (via evidenziazione).

A sprite nel markup

Questo approccio si basa sul metodo TIP , che utilizza una immagine sprite come <img> elemento piuttosto che una immagine di sfondo:

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; }

Una stella: 1 su 5
Due stelle: 2 su 5
Tre stelle: 3 su 5
Quattro stelle: 4 su 5
Cinque stelle: 5 su 5

Pro: Questo metodo richiede una singola richiesta HTTP.; Questa tecnica è l'unico dei quattro metodi sopra descritti, che rivela i contenuti quando gli utenti di Firefox selezionare "immagini nascondere" o "rendere le immagini invisibili" (dalla barra degli strumenti dello sviluppatore).; Quando le immagini sono disponibili un rosso "x" appare solo il punteggio più alto (ossia 5 su 5) anziché in ognuno come è il caso con altre soluzioni che si basano su img elementi.
Cons: La visualizzazione delle immagini è legata alla CSS.

Vale la pena notare che a differenza di altre tecniche di sostituzione di immagini, questo metodo consente di:

immagini di scalare a seconda del testo di dimensioni impostazioni.
immagini da stampare.
testo alternativo da poter essere facilmente selezionato come l'intera immagine appare evidenziato (Firefox).
l'immagine non a scomparire in un ambiente ad alto contrasto / foglio di stile.
selezione di testo alternativo in Opera (quando le immagini sono disattivate).
bordi testo alternativo in vista piccolo schermo di Opera.

Markup ad esprimere voti

Partendo da un meccanismo nativo

Per votare, abbiamo bisogno di un basso livello meccanismo di voto che permette la selezione utente semplice e sottomissione. Per questo, possiamo contare sull'utilizzo di un form con etichette e controlli:

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>

Risultato

Aggiunta di pause e spazi

Per una migliore leggibilità, si aggiungono <br> e gli spazi.

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>

Risultato

Introducendo l'immagine sprite nel markup

Per questa soluzione, si utilizza una sprite più piccolo di quello nell'esempio precedente. Ora è composto da due singole stelle ("on" e "off").

Mettiamo img elementi all'interno delle etichette. Non ci assumiamo avranno alcun valore senza il supporto CSS, così noi "nascondere" questi, impostando dimensioni specifiche attraverso la loro width e height attributi. Si noti che l'utilizzo di 0 con entrambi gli attributi avrebbe mostrato un'immagine spezzata in qualche 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>

Si noti che con il markup sopra, possiamo aspettarci (nella maggior parte dei browser) campo di selezione attraverso la selezione etichetta.

Considerando Accessibilità

Purtroppo, come è, questo markup crea problemi in almeno due screen-reader: JAWS e NVDA (vedi banco di prova per questi bug). Il problema è legato all'utilizzo di un title attributo e una stringa vuota per il testo alternativo.

La soluzione per non confondere screen-reader gli utenti è quello di utilizzare "stelle" come testo alternativo ( alt ) e utilizzare JavaScript per inserire title al passaggio del mouse.

Meglio 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>

Risultato

Styling

Dare dimensioni per l'immagine tramite CSS

Usiamo em per consentire l'immagine di crescere o diminuire a seconda del font-size.

Markup

Immutato

CSS

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

Risultato

Come si può vedere già, cliccando su un'immagine seleziona il pulsante di opzione corrispondente. Non vi è necessità di scripting come etichettatura implicito produce questo comportamento (eccetto in IE).

Rimuovere l'immagine dal flusso

Styling l' label con position:relative e l'immagine con position:absolute con top / left dei valori è sufficiente per nascondere input e il testo all'interno delle etichette.

Markup

Immutato

CSS

  label { 
    position: relative;
 } 
 img {
   width: 2.8em;
   height: 1.4em;
    position: absolute; 
    top: 0; 
    left: 0; 
 }

Risultato

Visualizzazione di una stella per etichetta

Noi lo stile l'etichetta così le sue dimensioni corrispondono a l'altezza e la larghezza di una singola stella.

Markup

Immutato

CSS

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

Risultato

Visualizzazione delle stelle in orizzontale

Togliamo il br s e galleggiare le etichette.

Markup

Immutato

CSS

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

Risultato

Visualizza l'immagine sprite in base al calibro

Per impostare un "3 su 5" rating, si applica la stessa classe agli ultimi due etichette. Questa classe sposterà la posizione dell'immagine all'interno dell'etichetta.

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 {
  a sinistra:-1.4em;
 }

Risultato

Non fare affidamento sull'immagine solo per visualizzare le informazioni

E 'importante offrire un'alternativa alla visualizzazione delle stelle nel caso in cui le immagini non sono disponibili. Questo perché le etichette ei pulsanti sono stilizzati per essere uno sopra l'altro. Una soluzione semplice è quella di spostare input e di testo off-screen (cioè usando text-indent:-999em ) e applicare un colore di sfondo alle etichette.

Markup

Nessun cambiamento

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; 
 }
 img {
   width: 2.8em;
   height: 1.4em;
   position: absolute;
   top: 0;
   left: 0;
 }
  . No_star {
  background: # ccc;
 } 
 . No_star img {
   a sinistra:-1.4em;
 }

Note:

text-indent fissa anche un salto verso l'alto l'immagine ogni volta che i controlli di prendere il focus.
il margine destro è quello di assicurarsi i colori di sfondo creare quadrati e rettangoli (il che non accadrebbe con le etichette adiacenti che condividono lo stesso colore di sfondo).

Risultato

Tocco finale

Usiamo la pseudo-classe :hover per creare qualche effetto rollover,
Abbiamo nascondere il bordo fieldset,
Abbiamo nascondere la legenda,
Noi lo stile del cursore.

Markup

Immutato

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 {
   a sinistra:-1.4em;
 }
  label: hover {
  opacità: 0,5;
  filter: alpha (opacity = 50);
 }
 fieldset {
  border: 0;
 }
 {leggenda
  text-indent:-999em;
 }

Nota: label:hover è ignorato da IE6 e Opera sanguina colorare lo sfondo attraverso le immagini. Nella pagina demo , invece di usare opacity , sto usando un altro sprite che mostra quattro stati.

Risultato

Visualizzazione delle valutazioni, senza consentire l'interazione dell'utente

Possiamo fare i rating "read-only" con l'aggiunta di disabled e checked gli attributi, nell'ambito degli adeguati input campi.

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"   disabile   > 1/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" value = "movie" = "2_5"   disabile   > 2/5 </ label> <br>
   <label> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" value = "movie" = "3_5" selezionata = "   verificato   "> 3/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" = "movie" value = "4_5"   disabile   > 4/5 </ label> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type = nome di "radio" = "movie" value = "5_5"   disabile   > 5/5 </ label>
 </ Fieldset>

CSS

La regola con :hover è stato rimosso

h4> Risultato

Dare maggiore attenzione al processo di

A questo punto, è possibile votare senza il supporto degli script, ma gli utenti vedenti non hanno alcun indizio circa la loro selezione. Quindi usiamo JavaScript per:

dare un feedback per l'utente per quanto riguarda la sua scelta,
dare agli utenti la tastiera di un indizio visivo mentre navigare attraverso i pulsanti di opzione.

Allo stesso tempo, prendiamo vantaggio di utilizzare uno script per inserire il title attributi che creeranno "suggerimenti" al passaggio del mouse sulle etichette / stelle.

A causa della mancanza di selezione per quanto riguarda il feedback senza JavaScript, abbiamo etichette stile e la forma controlla solo se vi è il supporto degli script. Per farlo usiamo JavaScript per impostare una bandiera sul html elemento e poi creare una regola in base a selettori discendenti che contengono quel gancio. Se il flag è mancante, tale regola non si applica e gli elementi non sono in stile.

Questa è la pagina demo , il prodotto finale. Per vedere come si comporta questa soluzione secondo le varie impostazioni, si consiglia di utilizzare gli strumenti di sviluppo preferiti per aumentare la dimensione del testo, rompere percorsi delle immagini, disabilitare JavaScript, CSS girare off, e molto altro ...

Avvolgere

Venendo con una soluzione "accettabile" richiede di identificare i bisogni, gli interpreti degli utenti le peculiarità, le impostazioni di User agent e che sempre più - il che significa test approfonditi.

In questo processo, il feedback degli utenti è essenziale, perché a seguito di buone pratiche non sempre è una cosa sicura. Per esempio, come accennato in precedenza, l'impostazione alcun valore per l' alt attributo delle immagini all'interno delle etichette sembrano essere la cosa sicura da fare, ma si scopre che crea problemi con almeno due screen reader (vedi caso di prova ).

Inoltre, il feedback da parte degli utenti dei dispositivi di assistenza permette di ignorare alcuni messaggi di errore di convalida - come quella che i rapporti di accessibilità Toolbar per Firefox (secondo http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

L'obiettivo qui non è stato quello di risolvere tutto, però. Essere in grado di votare senza un dispositivo di puntamento è stata una delle mie priorità, ma migliorando l'aspetto della soluzione in Opera quando le immagini sono disabilitati non è qualcosa che io considero essenziale.

La parte più interessante di questo "viaggio" è stato quello di rendere la soluzione accessibile a molti utenti in condizioni diverse, affrontando temi quali:

immagini off,
javascript off,
CSS off,
una combinazione di quanto sopra.

E 'anche bello sapere che questa tecnica si basa su img elementi piuttosto che immagini di sfondo, che permette alle stelle di:

si ridimensiona in base alle impostazioni dell'utente,
mostrano in modalità contrasto elevato,
da stampare di default (a differenza di immagini di sfondo).

Tutto questo avviene senza sacrificare le prestazioni, in quanto questa soluzione si basa su questa singola sprite:

Fine trovare

Recentemente ho scoperto il sistema Amazon ha costruito per la sua pagina di voto. E 'piuttosto interessante, visto che servono una soluzione diversa a seconda del supporto script. Se vi è il supporto script, che usano l'immagine <map> (approccio interessante), se non c'è supporto per gli script che usano i pulsanti di opzione. In entrambi i casi, la soluzione è accessibile agli utenti tastiera, e questo consente di ottimizzare l'accesso a una funzionalità che è un nucleo di differenziazione per la piattaforma Amazon.

Si noti che non usano JavaScript per sostituire i pulsanti di opzione con una immagine <map> , invece, usano noscript elementi in cui tabella di markup contiene pulsanti di opzione.

"Out of the box" soluzioni

Dreamweaver ^®: Valutazione Spry Widget
YUI: Stella Script di valutazione per YUI; Stella script di Potenza con YUI
JQuery: Half-Star Rating Plugin; jQuery Ajax Rater; Semplice Star System Valutazione; 5 punteggio star system in PHP, MySQL e jQuery
WordPress: GD Star System Valutazione per WordPress; GD Star Rating; Star Rating per le recensioni
Flash: 5 Star rating componente del sistema
Varie.: Come una star rating dovrebbe essere; Starry widget di 2

Un ringraziamento speciale

Un ringraziamento speciale a Victor Tsaran e Kloots Todd per il loro prezioso feedback.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Annunciando YUI 3.1.2: Aggiornamento critico di sicurezza per tutti gli utenti 3.1.x/3.2.0pr1 YUI

19 agosto 2010 alle 12:35 da Eric Miraglia | In Development | Commenti disabilitati

Il team di YUI YUI 3.1.2 rilasciato oggi. Questo è un aggiornamento di sicurezza importante per tutti gli utenti di YUI 3.1.x e 3.2.0pr1. Se si ospitano YUI 3.1.x o 3.2.0pr1 sul tuo sito, o se si utilizza YUI 3.1.x/3.2.0pr1 IO cross-domain funzionalità, si sono interessati.

XDR in utility IO YUI implementa un trasporto Flash come ripiego per i browser che non supportano XDR nativo. Un errore nella nostra implementazione del fallback Flash in YUI versioni 3.1.x e 3.2.0pr1 permette io.swf file su cui operare non sicuro se servito dalla CDN Yahoo! o dal proprio server. Il rimedio per questo problema è duplice:

Se è stato distribuito l'intero YUI 3.1.x/3.2.0pr1 creare directory sul server, sostituire build/io/io.swf nella versione interessata con la versione inclusa in YUI 3.1.2. Non così se si sta usando IO l'utilità o la sua funzione XDR.
Se si sta utilizzando la funzione XDR IO, l'aggiornamento alla versione 3.1.2 di io-swf affronta il problema della sicurezza. Host versione 3.1.2 del io.swf sul proprio server (questo file non può funzionare in modo sicuro da un CDN, non è incluso nel CDN al 3.1.2). Se avete attinto io.swf da http://yui.yahooapis.com , rimuovere questo dominio dal vostro crossdomain.xml file.

Maggiori dettagli su questo problema può essere trovata nella documentazione utility IO .

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Modalità Quick Edit per YUI due DataTable

19 agosto 2010 alle 08:42 am da Giovanni Lindal | In Development | 9 commenti

YUI due DataTable consente l'editing in linea liscia. Quando disableBtns è attivata nella configurazione colonna, la modifica dei valori semplici come stringhe o numeri si sente proprio come Excel. Tuttavia, l'esperienza non può essere così reattivo come applicazione desktop, perché ogni cambiamento richiede in genere una chiamata XHR al server di memorizzare (o rifiutare!) Il nuovo valore. Se l'utente deve modificare molti dei valori visualizzati, può essere un'esperienza lenta e frustrante. Per risolvere questo problema, ho sviluppato QuickEditDataTable. Questo si estende DataTable per aggiungere modalità Quick Edit, che permette a tutti i valori modificabili da cambiare in una sola operazione di massa:

( Fare clic sulla schermata per giocare con questo esempio .)

Panoramica

Per entrare in modalità Quick Edit, chiamare startQuickEdit() . Per uscire dalla modalità Quick Edit, chiamare cancelQuickEdit() .

E 'vostra responsabilità di salvare le modifiche prima di chiamare cancelQuickEdit() . Per semplificare questa operazione, QuickEditDataTable fornisce getQuickEditChanges() . Questo restituisce una matrice di oggetti, uno per ogni riga. Ogni oggetto contiene solo i valori che sono stati modificati in quella riga, digitato fuori di colonna id. Ad esempio, se la tabella dispone di 4 colonne (titolo, autore, anno, quantità), e l'utente solo cambiato la quantità in una riga a 20, quindi l'oggetto per quella riga sarebbe {quantity:20} . Gli altri valori sarebbe omesso.

QuickEditDataTable può facilmente estendere YAHOO.widget.ScrollingDataTable se avete bisogno di tale funzionalità. Se avete bisogno di questo, è sufficiente fare una copia del file di origine e cambiare la classe base.

Configurazione

Quick Edit è uno stato modale in cui vengono scambiati i formattatori cella per colonne modificabili e sostituito con formattatori speciali che generano input , textarea , o select elementi. Solo le colonne che hanno quickEdit configurazione sarà modificabile. Le opzioni di configurazione sono:

copyDown

Se fosse vero, la cella in alto nella colonna avrà un pulsante per copiare il valore verso il basso per il resto delle righe.

formatter

Il formattatore cellula che renderà un campo apposito modulo: <input type="text">, <textarea> o <select>. Per impostazione predefinita, il formattatore cella YAHOO.widget.QuickEditDataTable.textQuickEditFormatter viene utilizzato per tutte le cellule a produrre elementi di input. Per ottenere una textarea elemento, configurare una colonna da utilizzare YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter invece. È inoltre possibile scrivere una formattazione personalizzata Quick Edit - vedi sotto.

validation

Convalida configurazione per ogni campo nella colonna.

css

Classi CSS che codificano le regole di convalida di base:

yiv-required: Il valore non deve essere vuoto.
yiv-length:[x,y]: String must be at least x characters and at most y characters. At least one of x and y must be specified.
yiv-integer:[x,y]: The integer value must be at least x and at most y . x and y are both optional.
yiv-decimal:[x,y]: The decimal value must be at least x and at most y . Esponenti non sono ammessi. x ed y sono entrambi opzionali.

fn

Una funzione che sarà chiamato con il DataTable alla sua portata ed elemento del modulo della cella come argomento. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and then return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required , min_length , max_length , integer , decimal , and regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

A volte, una non modificabile colonna deve essere reso in modo diverso durante la modalità Quick Edit. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . È inoltre possibile scrivere personalizzato, di sola lettura formattatore. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

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

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

About the author: John Lindal ( @jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT is built. In precedenza, ha lavorato sul Yahoo! Publisher Network.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo è un motore di ricerca che utilizza ampiamente YUI. Ecco cosa si usa in particolare:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
     var = new IG1 YAHOO.util.ImageLoader.group (div, 'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie. DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet. Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
             set (, {display: "blocco"} 'cid.').
             set (, {display: "blocco"} 'CI2.').
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

Circa l'autore: Gabriel Weinberg è il fondatore del motore di ricerca DuckDuckGo, con sede a Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Veloce e divertente - che era il requisito utente per il nuovo Agile Planner Assembla.com - un'interfaccia AJAX per l'aggiunta di attività di sviluppo, la costruzione di storia / funzione di contorni, e la programmazione in questi rilasci. We were lucky to have YUI 3 to make it fast and fun to implement as well.

Avevo usato YUI 2 per una serie di progetti precedenti e mi era stato colpito dalla ingegnerizzazione dei componenti dell'interfaccia utente e l'infrastruttura di raccolta sottostante. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler per trovare i guadagni maggiori velocità
YUI Doc di lasciare le informazioni per il resto della squadra

Lavorare con YUI 3 su un app come questo è stato divertente, e non vedo l'ora di sentire quello che i nostri utenti ci spingono a fare dopo!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Pagina successiva »

Altri recenti YUI Theater Video:

Iscrizione a YUI Theater:

Ottenere il codice

Installazione

La vostra partecipazione è il benvenuto

Il caso di microformati

Markup per visualizzare l'immagine a base di valutazioni

Una immagine per voto

Una immagine per unità

Uno sprite per le immagini di sfondo

Markup

CSS

A sprite nel markup

Markup

CSS

Markup ad esprimere voti

Partendo da un meccanismo nativo

Markup

Risultato

Aggiunta di pause e spazi

Markup

Risultato

Introducendo l'immagine sprite nel markup

Considerando Accessibilità

Meglio Markup

Risultato

Styling

Dare dimensioni per l'immagine tramite CSS

Markup

CSS

Risultato

Rimuovere l'immagine dal flusso

Markup

CSS

Risultato

Visualizzazione di una stella per etichetta

Markup

CSS

Risultato

Visualizzazione delle stelle in orizzontale

Markup

CSS

Risultato

Visualizza l'immagine sprite in base al calibro

Markup

CSS

Risultato

Non fare affidamento sull'immagine solo per visualizzare le informazioni

Markup

CSS

Risultato

Tocco finale

Markup

CSS

Risultato

Visualizzazione delle valutazioni, senza consentire l'interazione dell'utente

Markup

CSS

Dare maggiore attenzione al processo di

Avvolgere

Fine trovare

"Out of the box" soluzioni

Un ringraziamento speciale

Panoramica

Configurazione

Custom Quick Edit Formatters

YUI Library su Twitter

Tradurre

Sindacato

Messaggi Recenti

YUI Biblioteca

Archives:

Blogroll

Regole del blog

Diventa Yahoo!

Meta: