Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Douglas Crockford: "The Saga JSON"

Alla riunione del 27 luglio del gruppo Bayjax , ospitato qui a Yahoo!, abbiamo avuto una linea di altoparlanti formidabili. Il primo dei colloqui Bayjax - Douglas Crockford "The Saga JSON" - è ora disponibile su YUI Theater, disponibile in alta definizione con una trascrizione completa sul sito Theater YUI .

Ecco un assaggio di quello che Douglas ha da dire in questo nuovo talk, che copre l'invenzione di JavaScript Object Notation come formato di dati e la sua divulgazione e la standardizzazione.

Abbiamo trovato [JSON] ha funzionato davvero bene. E 'stato estremamente efficace per la cosa che abbiamo inventato per - essendo comunicazione con il server browser - ma abbiamo anche usato molto per l'inter-server di comunicazione. La nostra piattaforma estremamente ridimensionato, in modo da poter avere un sacco di scatole, e avevano bisogno di essere mantenuti in sincronia, e abbiamo trovato JSON era perfetto per l'invio di messaggi tra i server. Abbiamo anche utilizzato JSON per implementare un semplice database, quindi abbiamo solo le chiavi, e per ogni tasto che avevamo immagazzinare alcuni dati JSON. Ha fatto davvero efficace per la memorizzazione di cose e ottenere di nuovo. Ci è piaciuto molto, e abbiamo cercato di convincere i nostri clienti che era cosa buona. I nostri clienti ha detto: bene, lo odio, perché non abbiamo mai sentito parlare. Alcuni dei nostri clienti ha detto: oh, vorrei che ci ha detto questo sei mesi fa, perché abbiamo appena deciso di andare con XML, quindi non possiamo prendere in considerazione qualsiasi altra cosa adesso. E alcune delle persone con cui abbiamo parlato ha detto: non è uno standard, quindi non possiamo usarlo. Ho detto: è uno standard, è un sottoinsieme di ECMA 262. Hanno detto: no, questo non è uno standard. OK. Quindi, al fine di utilizzare questo, ho dovuto dichiarare che questo è uno standard. Quindi questo è quello che ho fatto. Ho deciso che sara 'uno standard da ora in poi. Così ho comprato JSON.org.

E 'una grande storia, e, naturalmente, Douglas è un narratore fantastico, quindi lo considerano un'ora ben spesi.

Grazie ancora per la squadra Bayjax e Gonzalo Cordero per aiutare a portare l'evento a Yahoo!.

• Scarica il video (m4v)
• Scarica le diapositive
• Ad alta risoluzione, versione trascritta di questo discorso è disponibile sul sito YUI Theater

Altri recenti YUI Theater Video:

• Jonathan LeBlanc: YQL e YUI
• Satyen Desai: YUI3: Obiettivi di progettazione e architettura
• Kloots Todd: sviluppo di un archivio accessibile da Web 2.0 Widget Framework
• Charles McCathieNevile: Opera Dragonfly

Iscrizione a YUI Theater:

• YUI Theater RSS feed
• YUI Theater su iTunes

Trova le conversazioni: bloglines | technorati

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

In the Wild per il 10 agosto 2009

Notizie e note da parte della comunità YUI corso delle ultime settimane, fateci sapere cosa abbiamo perso nella sezione commenti.

• YUI il Gatorade.com : LNR Reader ha scritto per raccontarci l' Player Gatorade.com del sito dell'Anno , che sta facendo largo uso di YUI. "Si usa il drag / drop biblioteca per barre di scorrimento personalizzate, la libreria contenitore per lightbox stile sovrapposizioni, la biblioteca eventi per sparare diversi eventi sul ridimensionamento della finestra, la biblioteca Element, e naturalmente la biblioteca Dom". ( fonte originale. )
  
• Aggiunta di una Class Library di YUI 3 : YUI contribuente Matt Snider blog di aggiungere nuovi moduli per YUI 3. "La prossima versione di YUI 3 sta per cambiare il nostro modo di sviluppare utilizzando il framework YUI. Invece di namespacing della libreria dietro l' YAHOO oggetto, come è stato fatto in YUI 2, in 3 nella libreria YUI si farà riferimento in contesti isolati funzionali chiamando YUI().use . In questo modo gli sviluppatori hanno bisogno di modificare il loro codice per avvolgere tutto ciò che utilizza la libreria YUI con un YUI().use chiamata. "Il suo messaggio passa attraverso l' add e use metodi e su come use un modulo che hai add ed a YUI 3.
  
• Sam Stephenson Ruby-YUI Compressor Progetto Up su GitHub : Sam Stephenson di 37signals ha una interfaccia Ruby per YUI Compressor su GitHub. Ruby-YUI Compressor è distribuito come una gemma Ruby e può essere installato tramite il gestore dei pacchetti Rip.
  
• Arun Gupta YUI Schede Applicazioni Grafici i km di percorso : Arun Gupta ha pubblicato un post di blog sul suo blog all'indirizzo Sun.com, " Segui le tue miglia in esecuzione usando JRuby, Ruby-on-Rails, GlassFish, NetBeans, MySQL, e Grafici YUI ". Ha uno screencast su come utilizzare l'applicazione.
  
  ( fonte originale. )
  
• YUI sul sito SodaHead.com parere-sharing : SodaHead è un'idea-and-parere sito di condivisione che fa uso pesante di YUI (11 componenti separati in uso). SodaHead fornisce "una comunità che offre un ambiente libero e dinamico per condividere e raccogliere i pareri e incontrare gli amici - un posto per fare domande, esprimere le proprie idee, e connettersi con gli amici come e non-così-come ... SodaHeads, come li chiamiamo noi." ( fonte originale. )
  
• Slideshow YUI Utilizzando YUI 3 da Josh Lizarraga a FreshCutSD : Il modulo Presentazione YUI da Josh Lizarraga da FreshCutSD a San Diego è una moto dall'aspetto giocatore con un bel set di funzionalità, ma è basato sul ciclo di jQuery progetto. Ci sono diversi demo disponibili, e si può scaricare il codice dal post sul blog di Josh.
  
• Menu-Esempio di pulsante con icona da Dav Glass : Dav ha aggiunto al suo repository esempio esaustivo una nuova demo che mostra come aggiungere icone per i pulsanti del menu in YUI .
• YUI il WAMU.org : WaMu (American University Radio) ha un bel mashup di Google Maps Utilizzare i pulsanti YUI .
  
• YUI Carousel valore aggiunto da ErisDS : Blogger ErisDS ha pubblicato due parti di quella che sarà una serie in tre parti, relativa all'attuazione di navigazione personalizzata con il Carousel YUI controllo . Controlla sia una parte e seconda parte .
  
• Narayanan AR, "Interazioni tra JSON sul lato server Java e client-side YUI" : Scrive Narayanan il DevX.com : "Perché facilita la comunicazione tramite un formato interoperabile, JavaScript Object Notation (JSON), l' Yahoo! User Interface Library (YUI), consente di implementare il lato server in qualsiasi tecnologia. Il server rendere il testo JSON per una determinata richiesta, YUI e analizza la risposta JSON per creare variabili JavaScript per l'utilizzo in widget UI. " Scopri l'articolo completo qui .
• Veloce Tutorial Animation YUI da CSSTemplatesWeb : La gente di CSSTemplatesWeb hanno inviato una breve introduzione al Utility Animation YUI , tra cui una serie di esempi .
  
• Pixidou Asvin Ballou di - Image Editor Realizzata con YUI e PHP : Abbiamo perso questa un po 'indietro quando è uscito, ma è interessante e vale la pena dare un'occhiata. Asvin Balloo ha creato Pixidou , le basi di una interfaccia web-based editing di immagini con PHP e YUI. C'è una demo , e il codice possono essere trovate sul conto di GitHub Asvin .
  
• Jim Driscoll, "Utilizzo della YUI Calendar Widget con JSF 2" : Scrive Jim : "Se non siete in via di sviluppo JSF con le librerie di terze parti componenti, si sta davvero perdendo la parte migliore di JSF. Ma c'è un sacco di widget Ajax là fuori, che contengono tutti i tipi di funzionalità utili. Non sarebbe utile usare quelli all'interno delle pagine JSF? La libreria Yahoo UI è roba piuttosto carino, e il widget di Calendar è utile, bella e potente. Diciamo la cablare in una pagina JSF, e associare il ritorno di quel widget per la proprietà di un bean. Come duro potrebbe essere? 71 linee, di cui circa 45 o giù di lì sono non-boilerplate ". Scopri tutte le 71 righe sul suo blog .

Trova le conversazioni: bloglines | technorati

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

ARIA più facile con YUI 3

Come già detto nel mio discorso Sviluppare un Accessible Web 2.0 Widget Framework , uno degli obiettivi di YUI 3 è quello di rendere più facile per gli sviluppatori di creare interfacce utente accessibili. A tal fine abbiamo preso in considerazione l'accessibilità fin dall'inizio, mentre la costruzione di YUI 3, e il recente YUI 3.0.0 Beta 1 introduce diverse nuove aggiunte che rendono più facile per gli sviluppatori di creare ARIA abilitati widget.

Supporto Attributo ARIA Aggiunto al nodo

Il nodo Utility è l'interfaccia primaria YUI 3 per interagire con il DOM, e non solo fornisce un modello di astrazione, ma il supporto integrato per i CSS Selector query come un mezzo per accedere agli elementi HTML. Il supporto per gli attributi ARIA è stata aggiunta all'interfaccia Node nel YUI 3.0.0 beta 1 release, permettendo agli sviluppatori di utilizzare la potenza espressiva del CSS query Selector per applicare e gestire ARIA di un elemento ruoli e gli stati e le proprietà .

Applicare uno qualsiasi degli attributi ARIA tramite il nodo di set il metodo. Ad esempio, per applicare il role di toolbar ad un <div> con un id "toolbar":

YUI().use('node', function(Y) { var node = Y.get('#toolbar').set('role', 'toolbar'); });
YUI().use('node', function(Y) { var node = Y.get('#toolbar').set('role', 'toolbar'); }); 

Oltre al nodo integrato di supporto per le query selettori CSS, supporta anche il concatenamento e la capacità di impostare gli attributi multipli su un singolo nodo. Quando viene utilizzato insieme, queste caratteristiche di nodo lo rendono particolarmente facile da applicare ai ruoli ARIA, gli stati e le proprietà durante la creazione di widget DHTML con un sotto-albero di grandi dimensioni.

Per esempio, quando si costruisce un widget barra dei menu, è necessario applicare un role di menubar l'elemento principale DOM contenente la barra dei menu, e il role del menu all'elemento radice DOM contenente ogni sottomenu. Inoltre, come ogni sottomenu è nascosta per impostazione predefinita, l' aria-hidden lo stato dovrà essere applicato a ogni sottomenu pure. L'interfaccia Node permette di fare tutto questo in una sola riga di codice:

YUI().use('node', function(Y) { Y.get('#rootmenu').set('role', 'menubar').queryAll('.menu').setAttrs({ role: 'menu', 'aria-hidden': true }); });
YUI().use('node', function(Y) { Y.get('#rootmenu').set('role', 'menubar').queryAll('.menu').setAttrs({ role: 'menu', 'aria-hidden': true }); }); 

Supporto tastiera con il nuovo Plugin Node Manager di messa a fuoco

Per lavorare, ARIA richiede agli sviluppatori di fornire l'accesso da tastiera per i widget, poiché gli utenti di screen reader contare sulla tastiera per navigare su siti Web e applicazioni. Come indicato nel disciplinare ARIA e corrispondente Best Practices documento, che fornisce accesso alla tastiera richiede, in parte, che ogni widget ha un punto di tabulazione per impostazione predefinita ed è responsabile della gestione discreta attenzione per i suoi discendenti. Seguendo queste linee guida consente agli utenti di navigare velocemente una pagina o applicazione utilizzando il tasto TAB per spostarsi tra i widgets. Una volta che un utente ha a schede in un widget, che possono quindi utilizzare altri tasti (i tasti freccia per esempio) per spostarsi tra i discendenti del widget.

Il Plugin Manager di messa a fuoco Node , che è disponibile a partire dalla YUI 3.0.0 beta 1 release, rende più facile definire focusable discendenti di un nodo, definire quale dovrebbe essere discendente nel flusso scheda predefinita, e definire le chiavi che si muovono tra di messa a fuoco discendente. Inoltre, poiché la classe CSS pseudo :focus non è supportato su tutti gli elementi in tutte le A-Grade browser , il Plugin Manager di messa a fuoco Node fornisce un modo semplice, cross-browser mezzi di messa a fuoco styling.

Esempi di nuova aria

Per YUI 3.0.0 beta 1 abbiamo anche aggiunto una manciata di esempi che dimostrano il potere del Plugin di messa a fuoco Node Manager per implementare il supporto tastiera per widgets esistenti e Node esercizio il nuovo ARIA API relative.

• ARIA-Enabled Toolbar
• ARIA-Enabled Visualizzazione a scheda
• ARIA-Enabled Button Menu

Gli sviluppatori che desiderano sperimentare i benefici che offre ARIA possibile scaricare il open-source NVDA Screen Reader e Firefox per testare ogni esempio se stessi. In alternativa, ho fatto screencast di ciascun esempio correre con NVDA e Firefox.

YUI 3 Beta 1 ARIA Toolbar Video

YUI 3 Beta 1 Menu Video Button

YUI 3 Beta 1 ARIA Visualizzazione a scheda Video

The Road Ahead

Mentre YUI 3 è attualmente composta per lo più di utility, siamo al lavoro per lucidare la nostra infrastruttura di widget e inizierà presto la costruzione di fuori widget. Con YUI 3 il nostro obiettivo è quello di rendere il più semplice possibile la costruzione di interfacce utente accessibili, se si sta creando un widget da zero, o di applicazione di uno dei nostri. Noi pensiamo che siamo fuori ad un buon punto di partenza con il supporto ARIA incorporato nell'interfaccia Node e il Gestore Plugin di messa a fuoco Node. Quindi, voglio incoraggiare gli sviluppatori a iniziare a utilizzare queste interfacce, e di farci sapere cosa manca, cosa non funziona, e ciò che è.

Risorse aggiuntive

• Sviluppare Widgets accessibili usando ARIA
• Migliorare l'accessibilità attraverso la gestione di messa a fuoco
• Configurazione della macchina per test con uno screen reader

Trova le conversazioni: bloglines | technorati

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