Yahoo! User Interface Blog (YUIBlog)

Nel Wild 26 feb 2010

E 'stato un paio di settimane emozionante nella comunità YUI con alcuni moduli di grande nuova galleria ( storage Lite , Menu semplici e quelle più buone a venire). Ecco qualche altra notizia recente, con due demo bella YUI dal prolifico Christian Heilmann ( che è stato recentemente sul YUI Theater parlare di come essere prolifico di costruire grandi dimostrazioni ) e YUI legate gemme da Carlos Bueno e Vincent Hardy. Utilizzare i commenti qui sotto o trovare noi a @ YUILibrary per farci sapere quello che abbiamo perso.

• "Folding Accent" in YUI automatico da Carlos Bueno su @ alistapart : Uno dei nostri scrittori preferiti nel mondo del F2E è Carlos Bueno, e lui ha un altro eccellente, l'articolo tempestiva fuori - questa volta sulle sfide della buona scrittura implementazioni di completamento automatico utilizzando internazionale set di caratteri. Ecco come Carlos descrive il problema:
  

  Considerate questa rubrica:

  • Fulanito López
  • Erik Lørgensen
  • Lorena Smith
  • Giacomo Lo

  Se io comporre un nuovo messaggio e digitare "lo" in campo A:, quello che dovrebbe accadere? In molte applicazioni solo Lorena apparirà. Queste applicazioni "supporto Unicode", nel senso che non corrotto o barf su di essa, ma questo è tutto.

  Carlos continua a mostrare un approccio al problema e dimostra che l'approccio con Jenny Donnelly YUI 2 Controllo automatico . L'approccio si chiama "pieghevole accento." "Una funzione accento piegatura essenzialmente mappe caratteri Unicode in equivalenti ASCII. Ovunque si applica il case-folding, dovreste considerare l'accento-folding, e esattamente per le stesse ragioni. Con accento-folding, non importa se gli utenti la ricerca di bar, caffè o anche Café, i risultati saranno gli stessi "Check out. l'articolo completo , tra cui copia-incolla esempi, molto di più. Ho messo su una versione funzionante del codice di esempio, se volete provarlo .
  

• GeoPlanet Explorer - un nuovo YQL / YUI Hack da @ codepo8 : Scrive Christian: "Pochi giorni fa Gary Gale mi ping sul messaggero e successivamente portato una tazza di caffè alla mia scrivania a tormentare me con un'altra sfida. Questa volta ha parlato di quanto sia ricca e raffreddare il GeoPlanet dati è e che è difficile da mostrare alla gente questo in una semplice interfaccia. Internamente abbiamo un paio di strumenti piuttosto fresco per la verifica e l'analisi dei dati ma la maggior parte di loro sono troppo carichi di informazioni comprensibili solo per la gente geo là fuori. Quindi, in sostanza, il signore benevolo di tecnologie geo in Yahoo chiedeva di costruire una semplice interfaccia per navigare i dati GeoPlanet ".
  
• Vincent Hardy demo SVG con YUI Animazione : Vincent Hardy ei suoi colleghi hanno lavorato duro per un po 'su SVG nel browser, e hanno rilasciato una serie di prove-of-concept su un nuovo sito, http://svg-wow . org / . Molti dei demo, tra cui il tavolo luminoso nella foto sopra e la demo di testo , utilizzare l' animazione biblioteca da YUI 3 sotto il cofano.
  
• YQL YUI + + + Christian Heilmann Olimpiadi in TV = Winterolympicsmedals.com : Abbiamo notato Christian Heilmann primo YUI 3-base trucco negli ultimi "In the Wild" , e non abbiamo dovuto aspettare a lungo per il suo secondo: WinterOlympicsMedals.com . Questo utilizza un backend YQL di organizzare i dati sulle Olimpiadi invernali per anno, per paese, per eventi e altro ancora. Sia a 3 YUI e YUI 2 (per DataTable) sono sfruttati qui.
  
• Matt Woodward, "Risolvere i Problemi CSS con Grails UI Plugin" : scrivere Matt: "Sto lavorando su un'altra applicazione Grails e sto usando il fantastico plugin di Grails interfaccia utente per un sacco di controlli dell'interfaccia utente. Grails interfaccia utente è davvero un bel Grails-friendly wrapper componenti YUI e comprende cose come una finestra di dialogo, controlli di calendario, un editor di testo ricco e molto altro ancora. Questa era la mia prima vera incursione in uso questo plugin, così ho iniziato con una semplice finestra di dialogo modale che avrebbe mostrato i dettagli di contatto informazioni per le persone in un semplice elenco. Il punto principale di questo post è quello di delineare la soluzione semplice ai problemi CSS vedevo perché ci ho messo un po 'per capire cosa stava succedendo, ma ho pensato di delineare alcuni Grails e Grails UI magia lungo la strada. " Visitate il suo articolo completo per i più .
• Foto Callout editor per ASP.NET con YUI 2 : Neodynamics ha pubblicato una demo che "consente agli utenti di caricare una foto e quindi aggiungere un callout o fumetto che possono essere trascinati e ridimensionata l'immagine per il posizionamento. Grazie alla YUI è possibile fornire i gestori per il callout parti che comprendono una freccia così come le dimensioni della bolla. ImageDraw è responsabile di generare la forma callout dal lato server, mentre l'utente interagisce con l'editor. "
  
• Aaron K. Jackson 's Script NAnt per YUI Compressor :. Se si utilizza il libero NET costruire NAnt strumento e che si desidera utilizzare YUI Compressor per minify tuo JS e CSS, controlla Aaron K. Jackson 's YUI Compressor NAnt copione .

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Philippe Le Hégaret: "La prossima piattaforma Open Web" (52 min.)

Philippe Le Hégaret, che dirige il W3C Interaction Domain, fermato da Yahoo! ha recentemente per dare un parlare di HTML5. Mentre le specifiche HTML5 stessa che non contiene molte nuove funzionalità, la nuova piattaforma web, spesso etichettato come HTML5, viene fornito con molte nuove caratteristiche. Si va dal video HTML a SVG di animazioni CSS o prese web. Parlare di Philippe offre una panoramica di ciò che sta davanti a noi, con dimostrazioni concrete nei browser Web di ultima generazione. I nostri ringraziamenti a Philippe per la visita e il permesso di condividere il video su YUI Theater.

Se il video embed qui sotto non viene visualizzato correttamente nel tuo lettore RSS di scelta, essere sicuri di scegliere attraverso per vedere la versione ad alta risoluzione del video su YUI Theater .

Notice: Undefined index: hd / siti / teatro / blog.php sulla linea 29
• Scarica il video (m4v)
• Scarica diapositive
• Ad alta risoluzione, versione trascritto di questo discorso è disponibile sul sito YUI Teatro

Altri recenti YUI Theater Video:

• Douglas Crockford: Crockford su JavaScript - Atto III: Funzione Ultimate - Yahoo! 's JavaScript architetto Douglas Crockford continua la sua serie di conferenze sul linguaggio di programmazione JavaScript con una discussione di funzioni in JavaScript. 'Le funzioni sono la parte migliore di JavaScript,' Crockford dice. 'E' dove il potere è, dove la bellezza è. ' Guarda il video per scoprire perché.
• Douglas Crockford: Crockford su JavaScript - Capitolo 2: And Then There Was JavaScript - Yahoo! 's JavaScript architetto Douglas Crockford sondaggi le caratteristiche del linguaggio di programmazione JavaScript.
• Douglas Crockford: Crockford su JavaScript - Volume 1: The Early Years - Douglas Crockford mette il linguaggio di programmazione JavaScript nel suo contesto storico, tracciando la struttura del linguaggio e le convenzioni (e alcune delle sue stranezze) di nuovo alle loro radici nei primi decenni del computer scienza.
• Christian Heilmann: YQL e YUI: Building Blocks for Applications veloce - Il Developer Network di Yahoo! internazionali evangelista Christian Heilmann discute la sua filosofia per la creazione veloce, potente, irresistibile applicazioni utilizzando il linguaggio di query Yahoo (YQL) e Yahoo User Interface Library (YUI) .

Iscrizione a YUI Theater:

• YUI Teatro RSS feed
• YUI Theater su iTunes

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

Frontend di lavoro Engineering Team YUI

Nota: Abbiamo ingaggiato per questa posizione. Si prega di controllare la pagina di YUI posti di lavoro per altri processi relativi a Yahoo! YUI

Se si lavora al fianco gente come Douglas Crockford e sul team che ha creato YUI ( Matt Sweeney , Adam Moore , Dav vetro , Jenny Donnelly , Luke Smith , Tripp Ponti , Allen Rabinovich , Satyen Desai , e altri) sembra un buon modo per trascorrere le vostre tempo, continuate a leggere: Cerchiamo personale .

Siamo alla ricerca di un grande ingegnere per aiutarci con ogni aspetto del progetto YUI. (Nota: questo ruolo si aggiunge a costruire il / CI posizione abbiamo annunciato qualche settimana fa ). Questo può essere un grande lavoro per voi se sono:

• familiarità con le best practice in ingegneria frontend (ad esempio, il video dovrebbe risuonare per voi);
• uno imperturbabile JavaScript Geek (ad esempio, il video e il video dovrebbe essere il tipo di cosa si eccitano di scaricare e guardare sul grande schermo in HD);
• qualcuno che pensa che rendere le applicazioni web screamingly veloce è un obbligo morale;
• qualcuno che pensa che le API dovrebbe essere facile da usare mentre la soluzione di problemi difficili, e qualcuno che sa come creare questo tipo di API;
• qualcuno che pensa a come gli utenti interagiranno con il vostro lavoro se non sono abili con il mouse o non può leggere visivamente lo schermo del computer;
• un comunicatore appassionato e sviluppatore appassionato.
• Leggi la descrizione completa per maggiori dettagli.

La parte migliore di qualsiasi lavoro in campo tecnologico è avere la possibilità di fare il lavoro influente in un ambiente che sia sfide e supporta la crescita. Il team di YUI fornisce proprio questo confluenza di caratteristiche: un enorme comunità impegnata di utenti e sviluppatori e un team di brillanti ingegneri collaborano ogni giorno per migliorare il progetto.

Se questo suona come il vostro lavoro di sogno, e se le persone che ho citato sopra suona come le persone che ci si vuole lavorare tutti i giorni, mi piacerebbe sentire da voi. Dimmi perché sei la persona giusta per questo ruolo, anche un link al tuo curriculum e portfolio professionale, tramite email yui [trattino] lavori [at] yahoo-inc.com. (Principals solo, senza reclutatori.)

Nota: Un visto di lavoro per gli Stati Uniti è richiesto per questa posizione; Yahoo! non può sponsorizzare un nuovo H-1B durante questo ciclo di assunzione.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Douglas Crockford: "Crockford su JavaScript - Atto III: Funzione Ultimate (73 min.)"

Il terzo capitolo della Crockford su JavaScript serie fornisce un profondo tuffo sulle funzioni in JavaScript. Douglas inizia il discorso in questo modo:

Stiamo per parlare di funzioni di stasera. Le funzioni sono la parte migliore di JavaScript. E 'dove la maggior parte del potere è, dove la bellezza è. Come tutto il resto in JavaScript, non sono perfettamente ragione, ma è possibile ovviare a questo, e c'è un sacco di roba buona qui.

73 minuti più tardi, avrete una migliore comprensione delle funzioni - e una più profonda comprensione di ciò che rende JavaScript sia unico e potente. Se vi siete persi una delle prime due conferenze della serie, o se volete partecipare ad uno dei due rimanenti, visitare il Crockford su JavaScript pagina della serie.

Se il video embed qui sotto non viene visualizzato correttamente nel tuo lettore RSS di scelta, essere sicuri di scegliere attraverso per vedere la versione ad alta risoluzione del video su YUI Theater .

• Scaricare video HD (480p ~ 540MB)
• Scarica il video (m4v)
• Scarica diapositive
• Ad alta risoluzione, versione trascritto di questo discorso è disponibile sul sito YUI Teatro

Altri recenti YUI Theater Video:

• Douglas Crockford: Crockford su JavaScript - Capitolo 2: And Then There Was JavaScript - Yahoo! 's JavaScript architetto Douglas Crockford sondaggi le caratteristiche del linguaggio di programmazione JavaScript.
• Douglas Crockford: Crockford su JavaScript - Volume 1: The Early Years - Douglas Crockford mette il linguaggio di programmazione JavaScript nel suo contesto storico, tracciando la struttura del linguaggio e le convenzioni (e alcune delle sue stranezze) di nuovo alle loro radici nei primi decenni del computer scienza.
• Christian Heilmann: YQL e YUI: Building Blocks for Applications veloce - Il Developer Network di Yahoo! internazionali evangelista Christian Heilmann discute la sua filosofia per la creazione veloce, potente, irresistibile applicazioni utilizzando il linguaggio di query Yahoo (YQL) e Yahoo User Interface Library (YUI) .
• Christian Heilmann: Bausteine ​​web fürs - 'evangelista internazionale' Christian Heilmann des Yahoo Developer Network erklaert Philosophie und seine zeigt Tipps und Tricks wie man Web Applikationen ganz einfach und schnell erstellt indem uomo auf Bausteinen wie die Yahoo Query Language (YQL) und der Yahoo User Interfaccia Library (YUI) aufbaut.
• John Resig: test, analisi delle prestazioni e jQuery 1,4 - John Resig di Mozilla, creatore della popolare libreria JavaScript jQuery, le opzioni di recensioni per il test e l'analisi delle prestazioni in JavaScript e anteprime i significativi cambiamenti in jQuery 1.4.

Iscrizione a YUI Theater:

• YUI Teatro RSS feed
• YUI Theater su iTunes

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

Nel YUI 3 Galleria: Ryan Grove Storage Lite Cross-Browser Biblioteca di archiviazione

Con i browser più l'aggiunta del supporto per il Web HTML5 API di archiviazione , il futuro promette bene per le applicazioni web che necessitano di persistente sul lato client memorizzazione dei dati. Purtroppo, mantenendo la compatibilità con i browser che non supportano ancora Web Storage può essere una sfida, e abbandonare il supporto per i browser meno recenti è raramente una scelta accettabile.

L' archiviazione Lite YUI 3 Galleria modulo , che è stato sviluppato per l'uso su Yahoo! Ricerca , mira a risolvere questo problema fornendo un semplice involucro leggero API per una varietà di persistente sul lato client meccanismi di stoccaggio senza dipendenze plugin esterno di qualsiasi genere (nemmeno Flash). Pesa circa 2.6KB dopo minimizzazione e prima di gzip, è simile alle API HTML5 localStorage, e lavora in IE6 +, Firefox 2 +, Safari 3.1 +, Chrome 4 +, e Opera 10.5 +.

Oltre ad essere basata su YUI 3, Deposito Lite è diverso da quello esistente YUI 2 Storage Utility in diversi modi. YUI 2 di archiviazione è una robusta implementazione ed estensibile che rimane più fedele alle API di HTML5 localStorage e sessionStorage (per esempio, offre un evento di modifica e di una key() metodo, che di stoccaggio Lite non). YUI 2 Stoccaggio ricade anche sul retro di memorizzazione Flash o Gears per i browser meno recenti, che in alcuni casi può fornire una migliore persistenza e la capacità di memorizzazione. Stoccaggio Lite mestieri estensibilità e plug-based ricadute per leggerezza e prestazioni migliori, e si concentra in particolare sulla emulare solo localStorage.

Date un'occhiata a questo esempio notepad persistente per vedere storage Lite in azione, o leggere attraverso le seguenti non interattivo esempio di codice per un breve tour delle API.

In primo luogo, includere lo script:

 <Script src = "http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js & 
  gallery-2010.02.22-22/build/gallery-storage-lite/gallery-storage-lite-min.js "> </ script>

Nel tuo codice di implementazione, bisogna intercettare l' storage-lite:ready evento, che viene generato quando il meccanismo di archiviazione è pronto per l'uso. Dopo che il meccanismo di archiviazione è pronto, è possibile utilizzare l'API:

 YUI (). Uso ('galleria-storage-lite', function (Y) {

     / / Per la piena compatibilità con Internet Explorer 6-7 e Safari 3.x, bisogna intercettare l'
     / / Storage-lite: evento pronto prima di effettuare chiamate di stoccaggio.  Se non siete
     / / Come obiettivi i browser, è possibile ignorare questo passaggio.
     Y.StorageLite.on ('storage-lite: pronto', function () {

         / / Per memorizzare un elemento, passare una chiave e un valore (entrambe le stringhe) a setItem ().
         Y.StorageLite.setItem ('gattini', 'soffici e carino');

         / / Se si imposta il terzo parametro opzionale a true, è possibile utilizzare qualsiasi
         / / Oggetto serializzabile come valore e che verrà automaticamente memorizzato
         / / Come una stringa JSON.
         Y.StorageLite.setItem ('torte', ['mela', 'zucca', 'pecan'], true);

         / / Per recuperare un oggetto, passare la chiave per getItem ().
         Y.StorageLite.getItem ('gattini'); / / => 'soffici e carino'

         / / Per recuperare e analizzare automaticamente un valore di JSON, impostare l'opzione
         / / Secondo parametro su true.
         Y.StorageLite.getItem ('torte', true); / / => ['mela', 'zucca', 'pecan']

         / / Il metodo length () restituisce un conteggio di quanti elementi sono al momento
         / / Memorizzato.
         Y.StorageLite.length (); / / => 2

         / / Per rimuovere un singolo elemento, passare la sua chiave di removeItem ().
         Y.StorageLite.removeItem ('gattini');

         / / Per rimuovere tutti gli oggetti in deposito, chiamata clear ().
         Y.StorageLite.clear ();

     });

 });

I dati memorizzati mediante archiviazione Lite viene mantenuta attraverso pagine e del browser ^* riavvia, ed è accessibile solo dallo stesso dominio in cui è stato memorizzato. Dietro le quinte, Deposito Lite utilizza i seguenti meccanismi di stoccaggio, scegliendo automaticamente la migliore che è supportato:

• Firefox 3.5 +, Chrome 4 +, Safari 4 +, IE8, Opera 10.5 +: HTML5 localStorage - tutti i browser moderni supportano la funzionalità di base localStorage definito nel progetto HTML5.
• Firefox 2.xe 3.0.x: Gecko globalStorage , un'API primi simile a localStorage HTML5 è.
• Safari 3.1 e 3.2: Stoccaggio database HTML5 , perché Safari 3.1 e 3.2 non supportano HTML5 localStorage.
• IE6, IE7: userData persistenza , una caratteristica raramente usato IE per l'associazione di dati stringa con un elemento in una pagina web e persistente che tra pagine visualizzate.

Per ulteriori dettagli, vedere la memorizzazione Lite GitHub progetto e le API di riferimento .

* Caveat: IE6 e IE7 persistenza dei dati tra pagine visualizzate, ma non attraverso i riavvii del browser.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

Tre nuovi modelli di progettazione di navigazione

Negli ultimi mesi ho condotto una revisione dei modelli nella libreria di design interno schema di Yahoo! 's, con un occhio verso la pubblicazione, come molti di loro il più possibile nella biblioteca aperta a YDN . Perché? Beh, per prima cosa, per avere più occhi su di loro, per raccogliere più feedback e continuare a migliorare i modelli. Inoltre, dato che pochissimi modelli in biblioteca contengono informazioni specifiche per Yahoo!, e un processo alternativo è ora in atto per vagliare i requisiti specifici per la rete di Yahoo! e dei componenti del marchio, la collezione di design pattern possono ora più facilmente concentrarsi sulla (relativamente) principi di progettazione universale per le implementazioni web.

Ho completato la verifica prima della fine dello scorso anno e prevediamo di rilasciare nuovi modelli in lotti nei prossimi mesi. Alcuni modelli saranno maturi e forniscono una solida base per la progettazione del sito. Alcuni verranno pubblicati come modelli beta che possono subire variazioni significative successivi aggiornamenti in base al feedback ricevuto. Indipendentemente dal loro status, ci auguriamo che mettersi in gioco e rivedere e fornire un feedback sui modelli forniti.

Il primo lotto di modelli ad uscire dalla revisione si riferisce a barre di navigazione . Ci sono tre modelli finora in questo raggruppamento: navigazione superiore , di navigazione di sinistra , e barra di avanzamento . Una domanda legittima è se le barre di navigazione superiore e sinistro sono ancora il modo migliore o più aggiornato per navigare un sito e trovare il contenuto? Dobbiamo ancora trovare molti esempi di loro in rete e in uso a Yahoo! quindi per ora io dico sì, ma vale la pena pensarci.

Quando possibile cerco di collegare i modelli indietro alla Biblioteca YUI e, se del caso, altri codici e soluzioni di implementazione. YUI ha grande sostegno per NavBars ed esempi di menu. Probabilmente il posto migliore per iniziare è il widget di menù .

Una questione interessante nomenclatura abbiamo studiato è stata la distinzione tra un indicatore di progresso graduale (che è ciò che il modello è circa) e una barra di avanzamento continuo (per la quale c'è un grande esempio YUI ). Queste due cose sono spesso indicati con nomi simili, ma svolgono funzioni diverse. Suggerimenti per la terminologia più appropriata sono i benvenuti.

Si prega di verificare questi nuovi modelli e fateci sapere cosa ne pensi!

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Stage Team, estate 2010

Nota: Questa posizione è stata riempita. Grazie a tutti coloro che applicate. -Eric

La squadra ha un YUI aperto una posizione per una stagista estivo ( i dettagli sul programma di tirocinio di Yahoo! sono disponibili qui ). Se sei uno studente di college di lavoro verso un grado CS e l'idea di trascorrere l'estate lavorando su Javascript / CSS progetti al fianco gente come Douglas Crockford e il team che ha creato YUI ( Matt Sweeney , Adam Moore , Dav vetro , Jenny Donnelly , Luke Smith , Tripp Ponti, Allen Rabinovich , Alaric Cole , Satyen Desai e altri) sembra divertente, questo potrebbe essere l'occasione per voi.

Il team di YUI è responsabile per lo sviluppo e la manutenzione delle Biblioteca YUI , una raccolta di componenti JavaScript e CSS che aiutano i tecnici frontend creare Yahoo scala rapidamente le applicazioni web. Realizziamo anche in altre parti del toolchain dell'ingegnere frontend professionista - strumenti come YUI Compressor , YUI Doc , YUI test , e YUI PHP Loader .

Siamo alla ricerca di uno stagista che ha completato almeno un anno di corsi formali verso un grado CS e che ha un track record di creazione di innovative applicazioni basate su browser. Sia undergrads e laureati sono i benvenuti da applicare. Questo può essere una buona misura per voi se:

• si ha familiarità con le migliori pratiche in ingegneria frontend (ad esempio, il video dovrebbe fare il buon senso di te);
• ti amo JavaScript (cioè, scaricare e guardare questi video sembra un buon momento );
• si impara velocemente;
• non hai paura di grandi sfide;
• sei un studente a tempo pieno in un college o università accreditate.

Se questo suona come voi, ci piacerebbe sentire da voi. E-mail una lettera di presentazione, curriculum, e link al tuo portafoglio yui-jobs@yahoo-inc.com. Assicuratevi di indicare le date di disponibilità estate.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!