Yahoo! User Interface Blog (YUIBlog)

YUI: Open uur don 01 september

30 augustus 2011 om 10:53 uur door Luke Smith | In Ontwikkeling , Open Uur | 2 Commentaren

YUI Loader en seedbestand veranderingen, plus Loader tips en trucs

Terug in begin juli, Dav Glass geplaatst op een artikel over veranderingen in de Loader en zaad-bestanden in 3.4.0. Er waren een paar vragen in de comments en enkele anderen op het forum en # yui kanaal op freenode IRC , dus ik wilde Dav te krijgen op de hoorn voor een openbare Q & A.

Ik verwacht niet dat, ook al zal het hele uur te nemen,, dus na dat, we gaan het hebben over Loader best practices en tips en trucs. Afhankelijk van de tijd, een aantal dingen die ik hoop te verzekeren, zijn:

• Hoe maak je lader te halen niet-YUI-bestanden
• Het opzetten van module groepen, en de vele voordelen van het gebruik ervan
• Hosting en die naar uw eigen combo dienst
• Hoe elke config van invloed op waar Loader gaat op zoek naar uw bestanden

Als u nog brandende vragen over Loader, een truc die u wilt delen, of nog niet gerealiseerd hoe geweldig Loader is, neem dan met ons mee!

Tijd & Details

Deze week gaan we de sessie volledig hosten op Adobe Connect, inclusief de audio. We zullen gebruik maken van de Connect chat om vragen te beheren of Connect's ingebouwde audio-ondersteuning te gebruiken voor meer diepgaande discussies.

We zullen online zijn in het Openingsuren kamer van 10u tot 11u PDT donderdag.

Bijwerken

De opname is beschikbaar op ons YouTube-kanaal .

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Nomineer YUI voor de 2011 Open Source Awards!

23 augustus 2011 om 16:58 door Jenny Donnelly | In Diversen | 4 Opmerkingen

Als u houdt van YUI (en we hopen dat je doet!), Neem dan even de tijd om ons te nomineren voor de 2011 Open Source Awards , gesponsord door Packt Publishing. Zorg ervoor dat u op onze glanzende nieuwe website wijzen op http://yuilibrary.com !

Het nominatieformulier is open nu tot en met september 9.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Aankondiging YUI 3.4.0 en de nieuwe YUILibrary.com

18 augustus 2011 om 8:54 am door George Puckett | In ontwikkeling | 19 Commentaren

De YUI team heeft niet een, maar twee aankondigingen te delen vandaag. Ten eerste hebben we gestart met een geheel herziene YUILibrary.com . De nieuwe site is een grond af herschreven het verstrekken van een uniforme bestemming voor alle YUI documentatie, een schoner UI, en meer intuïtieve organisatie op de top van een robuuste nieuwe architectuur. Neem de tijd om rond te kijken. We hopen dat je erg blij zijn met wat je ziet.

Daarnaast YUI 3.4.0 is nu beschikbaar op CDN en downloaden . Enkele hoogtepunten van deze release zijn onder andere:

• App Framework (bèta): YUI 3.4.0 markeert het debuut van de App kader van Ryan Grove en Eric Ferraiuolo. De App Framework is een combinatiepakket van de Controller , Model , Model List en Toon componenten die een eenvoudige MVC-stijl kader voor het schrijven van een pagina JavaScript-toepassingen biedt. Deze componenten kunnen apart of samen gebruikt worden om iets te maken van eenvoudige niet-interactieve weergaven om rijke toepassingen met URL-gebaseerde routing, data binding, en volledige client-server te synchroniseren.
• Kalender (bèta): Allen Rabinovich is toegevoegd aan collectie Kalender YUI 3's van widgets in de 3.4.0 release. Kalender is een flexibele widget die maand-tot-maand navigatie, een of meerdere datum selectie, aangepaste opmaak en internationalisering biedt. Het introduceert ook een nieuwe benadering tot op heden filteren die gebruik maakt van geneste regelsets, en een volledig template-based rendering, waarmee ontwikkelaars snel en gemakkelijk het aan te passen voor verschillende toepassingen.
• Loader: The YUI Loader heeft ondergaan een belangrijke update voor 3.4.0 door Dav Glass, met een focus op het verbeteren van de prestaties. Het zaad bevat Loader en de meta-data, waardoor het laden van modules sneller omdat al haar meta-data eisen zijn al op de pagina. Rollups zijn verwijderd uit het systeem en allowRollup standaard op false in de Loader config. Hierdoor zal YUI nu alleen de modules laden plaats aangegeven dan extra modules als onderdeel van een rollup. Ten slotte heeft de build directory is ontploft en submodules zijn verwijderd uit de kern van het systeem verminderen van het aantal iteraties uitgevoerd door Loader in de berekening van afhankelijkheden. U kunt verwijzen naar de blog post over Loader veranderingen in 3.4.0 voor meer informatie.
• Graphics (bèta): Tripp Bruggen introduceert de grafische module in YUI 3.4.0. Dit onderdeel biedt een JavaScript API die u toelaat om vooraf gedefinieerde vormen en vrije-vorm polygonen te maken met vulling en lijn eigenschappen in verschillende formaten. Op basis van de mogelijkheden van de browser en het apparaat zal Graphics maken de vormen met behulp van SVG, HTML, Canvas, of VML.
• Panel (beta) en Widget: YUI stagiair Tilo Mitra bracht een andere productieve zomer in Californië werken aan een herschrijving van het paneel. Hij heeft ook een aantal verbeteringen aan Widget inclusief de conversie van Widget-Autohide en Widget-modaliteit van plugins om extensies, en de introductie van WidgetButtons, een nieuwe Widget extensie die u toestaat om css-stijl knoppen te plaatsen in de kop-en voettekst van een widget die standaard module support implementeert.
• ScrollView: Tilo heeft tevens ScrollView voor 3.4.0 aan verticale paging ondersteunen en te voorzien van een scrollview-lijst plugin om CSS classnames toe te voegen aan onmiddellijke lijst elementen.

Naast het leveren van ontwerpen voor YUILibrary.com, YUI ontwikkelaar en ontwerper, Jeff Coniff, droeg ook bij een aantal items voor de 3.4.0 release. Verbeteringen zijn aangebracht in het ontwerp en de weergave van een deel van de widgets voor een betere uitstraling en bruikbaarheid op mobiele apparaten. Hij heeft ook is artistiek talent om te werken in de oprichting van een aantal nieuwe voorbeelden, zoals de complexe tekening: Viool bijvoorbeeld in Graphics.

In YUI 3.4.0 zijn verschillende componenten zijn gepromoveerd van beta naar GA-status Utility , tabview en YQL Query . U zal ook merken het verwijderen van de Compat component uit de bibliotheek in aanvulling op Geschiedenis-verouderd en CSSGrids-deprecated.

We zijn zeer verheugd om YUI 3.4.0 en de nieuwe website met de YUI community te delen. U kunt meer informatie over YUI 3.4.0 door de herziening van de documentatie op YUILibrary.com . U kunt kunt ook de samenvatting van alle veranderingen opgemerkt in het onderdeel geschiedenis-bestanden voor YUI 3.4.0 , alsmede de volledige lijst van tickets aan bod tijdens de YUI 3.4.0 ontwikkeling . Zoals altijd, zouden wij het op prijs dat u suggesties die u heeft of gebreken u misschien te ontdekken in onze ticketshop databasebestand. Feedback voor YUI 3.4.0 kan worden ingevoerd in de YUI 3 ticket-database . Tickets voor YUILibrary.com kan worden ingevoerd in de YUILibrary repository . Als u geïnteresseerd bent in een kijkje achter de schermen bij de oprichting van de nieuwe YUILibrary.com, moet u samen met ons voor Openingsuren donderdag 18 augustus waar we zullen bespreken het ontwerp en de implementatie.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

YUI: Open uur Don 18 augustus

15 augustus 2011 om 21:49 door Luke Smith | In Ontwikkeling , Open Uur | 10 Commentaren

Welkom op de nieuwe yuilibrary.com!

Parallel met de 3.4.0 release, de nieuwe en verbeterde YUILibrary.com is website gaat live! De nieuwe site is verenigd, beter georganiseerd, en heeft een frisse look en feel.

Kijk voor een aanstaande post over de site details, maar lid van de Open Uren Sluit kamer deze donderdagochtend een eerste-look rondleiding krijgen door Ryan Grove en de andere mensen die dit een realiteit. We zullen praten over het ontwerp van de site, backend setup, plannen voor de toekomst, de gemeenschap kansen, en het controleren van alle nieuwe functies die we kunnen proppen in een uur, inclusief de nieuwe API docs interface.

We werken al onze staarten af ​​om dit ding klaar voor de lancering en we konden niet gelukkiger zijn om te zien dat eindelijk zijn thuis te maken op yuilibrary.com. Kom vieren de inauguratie, het geven van feedback (goed en slecht), en te leren hoe je kunt helpen om de nieuwe site het beste kan worden voor u en voor het grotere YUI gemeenschap.

Tijd & Details

Deze week zijn we niet van plan om een conferentie brug te gebruiken. In plaats daarvan gaan we de sessie volledig hosten op Adobe Connect, inclusief de audio. We zullen gebruik maken van de Connect chat om vragen te beheren of Connect's ingebouwde audio-ondersteuning te gebruiken voor meer diepgaande discussies.

We zullen online zijn in het Openingsuren kamer van 10u tot 11u PDT donderdag.

Update: video beschikbaar om te downloaden

De high-res, iOS vriendelijke opname is beschikbaar om te downloaden .

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

YUI: Open uur Don 11 augustus

08 augustus 2011 om 21:47 door Luke Smith | In Ontwikkeling , Openingsuren | No Comments

Zoeken Directe Toegankelijkheid

We gaan als vervolg op de vorige post over Search Direct . Er is veel over Zoeken Directe moeite waard het over had, maar voor starters, de ervaring van het krijgen van de bereikbaarheid goed is zowel interessant en belangrijk. Victor Tsaran en Caridy Patiño zullen ons aan te sluiten op de oproep om te praten over het project, de implementatie details te herzien, en antwoord op alle vragen die u over het zoeken Direct of toegankelijkheid best practices.

Tijd & Details

We veranderen het formaat van deze week. We gaan proberen om de sessie volledig hosten op Adobe Connect. Er zal geen conference bridge in te bellen zijn. Het geluid zal ook door middel van Connect. We zullen gebruik maken van de Connect chat om vragen te beheren.

We zullen online zoals gebruikelijk te zijn van 10u tot 11u PDT donderdag in de openingstijden aansluiten kamer .

Update: We zullen nog steeds op de conferentie brug

In een slag van ironie, blijkt dat Connect niet over een goede bereikbaarheid voor blinde deelnemers, dus we zullen gebruik maken van Connect voor het delen van schermen en de conferentie brug voor audio zoals gewoonlijk. De verbinding details:

1. Inbellen op 1-888-371-8922 (Skype werkt prima voor niet-Amerikaanse deelnemers *)
2. Voer de deelnemer code 47188953 #
3. Word lid van de delen van het scherm sessie (dit wordt u gevraagd de Adobe Connect-plugin te installeren als dit je eerste keer te gebruiken)

Update # 2: Het opnemen van beschikbare

Hier is de downloadbare opname voor deze Open uur .

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!

Het maken van Search Direct Toegankelijke

08 augustus 2011 om 21:44 door Caridy Patino | In Toegankelijkheid , Ontwikkeling | 6 Commentaren

Een paar maanden geleden lanceerden we de eerste beta release van Search Direct. Dit nieuwe product verkent het concept van de real-time feedback, direct leveren van antwoorden op de gebruiker bij elke toetsaanslag. Gezien de diversiteit van Yahoo! 's publiek, we wilden maken Zoeken Directe zo toegankelijk mogelijk te maken. In eerste instantie, we geloofden dat dit een gemakkelijke opgave zijn, aangezien dit product zou gebaseerd zijn op YUI 3, een JavaScript-bibliotheek met toegankelijkheid gebakken in zijn DNA. In tegenstelling tot mijn verwachtingen als ingenieur, deze taak bleek moeilijker dan we verwacht.

Introductie Zoeken Directe

Hoewel Zoeken Directe wordt gebouwd vanaf de grond met behulp van YUI component van de infrastructuur, is het meest zichtbaar prominente interface, gebaseerd op de YUI AutoAanvullen widget waarin veel toegankelijkheidsfuncties direct uit de doos bevat. Tips met betrekking tot een bepaalde zoekopdracht worden weergegeven in deze autocomplete implementatie. Zoeken Directe ook een content-paneel is voorzien, alias de rijke paneel, waar suggestie gerelateerde inhoud wordt weergegeven. De bedoeling van de rijke panel is om een ​​direct antwoord te verstrekken aan de gebruiker wanneer een suggestie uit de lijst AutoAanvullen wordt geselecteerd.

Een nieuwe reeks suggesties wordt weergegeven in de lijst op elke toetsaanslag, en de eerste suggestie is standaard geselecteerd. Deze standaard selectie wordt een zachte selectie. Soft selecties en de daaropvolgende interacties met de suggestie lijst bepalen de inhoud die wordt weergegeven in de rijke paneel. In werkelijkheid liggen de zaken iets ingewikkelder (performance optimalisaties, extra cache lagen, enz.), maar ter wille van de eenvoud kunnen we aannemen dat dit de gemeenschappelijke workflow.

Toegankelijkheidsfuncties

In de zoektocht naar het maken van Search Direct toegankelijk zijn, hebben we gekeken naar de uitvoering van de Search Assistant, een technologie die Yahoo! een paar jaar geleden een pionier, maar ook de inheemse toegankelijkheidsfuncties van YUI.

Na dit onderzoek werden drie primaire toegankelijkheid van voorzieningen voorgesteld for Search Direct:

• Met behulp van de YUI Internationalisering hulpprogramma voor gelokaliseerde content te dienen.
• Het instellen van role -en aria-* attributen op elementen binnen de autocomplete widget, die moeten worden geïdentificeerd en verwerkt door schermlezers.
• Met behulp van een verborgen div die een live-gebied vertegenwoordigt ( aria-live ) aan de gebruiker als er iets gebeurt hoogte te stellen. Bijvoorbeeld, het aantal beschikbare voorstellen, de geselecteerde suggestie, etc.

Het plan was om de gebruiker van eventuele wijzigingen in het Search-aansluiting te melden, en een set sneltoetsen geven op de volgende visuele componenten navigeren:

• Zoekbox
• Knop Verzenden
• Suggestielijst
• Rich panel

Klinkt als een wind, toch? Nou, laten we een stap terug.

Het probleem

Wat we hier hebben zijn twee asynchrone processen - een van hen voor het bijwerken van de suggestie set en de andere voor het ophalen van overeenkomstige antwoorden - en ze zijn allebei heel snel. We hebben het over 250 ms begin tot eind. Omdat de interface verandert in zo'n hoog tempo, het bijhouden van alles kan moeilijk zijn voor een schermlezer gebruiker. Het wordt een orde van grootte ingewikkelder wanneer er updates gebeuren in een asynchrone, bijna real-time manier. Omdat de schermlezer werd van alle veranderingen in de interface, de daaruit voortvloeiende chatter maakte het moeilijk te begrijpen wat er gaande was te maken.

Bij gebrek aan een aanvaardbare oplossing, zijn we begonnen samen te werken met Yahoo! 's inwoner toegankelijkheid goeroe, Victor Tsaran ( @ vick08 ) om te proberen en komen met iets beters.

De eerste keer dat we keken Victor omgaan met Search Direct, het was meteen duidelijk voor mij dat een meerderheid van zijn focus op de rijke paneel in plaats van de suggestie lijst. Dit was een verrassing voor mij, zoals we gezien de lijst als de "bron van waarheid". Tijdens een van onze sessies hadden we een geluk als we er met alle toegankelijkheidsfuncties van de lijst uit te schakelen. Zodra de ruis die door de lijst is uitgesneden, zoeken Direct ging zinvol Victor!

Hoe gebruikers van schermlezers waarnemen Zoeken Directe

Na het besef dat we probeerden het verkeerde probleem op te lossen, gingen we terug naar de oorspronkelijke gebruiker verhaal: "Als gebruiker kan ik een antwoord te krijgen als ik typ". Haal het antwoord over aan de gebruiker is de prioriteit. Na het herdefiniëren van het probleem hebben we ons geconcentreerd onze bereikbaarheid inspanningen op een implementatie waarbij de schermlezer de rijke panel inhoud voorrang ten opzichte van de suggestie lijst.

Bijvoorbeeld, als de gebruiker typt "miami wea" , zal de schermlezer vertellen twee dingen:

• 10 tips.
• WEER MIAMI, FL. VANDAAG, Regen, 89 ° F 77 ° F. MORGEN, Zwaar bewolkt, 90 ° F 74 ° C ...

Het zal dan verder te lezen uit de rest van de rijke panel inhoud. De gebruiker hoeft niet alle 10 suggesties weet van te voren, iedere keer dat de lijst met updates. Als ze willen weten, de informatie is gemakkelijk toegankelijk via het toetsenbord navigatie.

Om ervoor te zorgen dat de suggestie lijst is waarde toe te voegen aan de ervaring, zorgen we ervoor dat de eerste zin in de rijke paneel nauw verwant is aan de bijbehorende suggestie. Bijvoorbeeld, op basis van het vorige voorbeeld, "weather miami" is de eerste zin in de rijke paneel voor de suggestie: "miami weer".

Victor Tsaran, van de Yahoo! Toegankelijkheid Lab, laat zien hoe het werkt op FireFox met de NVDA schermlezer:

De schermlezer ervaring voor onze toepassing is gemakkelijker te volgen omdat we nu alleen richten op de volgende twee visuele componenten:

• Zoekbox
• Rich panel

Wijzigingen in de lijst AutoAanvullen in zijn geheel niet meer bijgehouden, en de submit knop wordt genegeerd, omdat de gebruiker altijd toets ENTER voor de huidige query of gebruik een sneltoets (Tilda toegangstoets: [control, alt or shift] + ~ ) om te schakelen tussen de input-element en de rijke paneel. Deze toetsenbordnavigatie opties worden geopenbaard aan de gebruiker wanneer het zoekvak wordt erkend door de schermlezer.

Vanuit een technisch perspectief, deze verandering sterk vereenvoudigd dingen. De hoeveelheid DOM manipulatie in de meest actieve component is drastisch verminderd, het verbeteren van de algemene prestaties van Search Direct. Hier is een voorbeeld van de uitvoering:

 functie SDAAria () {
     var knooppunt = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Maak de ARIA live-regio ...
     Y.one ('body') append (knooppunt).;
     / / Luisteren naar aria: live-berichten naar de live-regio bij te werken
     this.on ('aria: live', this._handlerMsg, this);
     / / Luisteren naar roddels: Vernieuwen om hoeveel suggesties aan te kondigen
     this.on ('Gossip: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      strings: {
          valueFn: function () {
              terug Y.Intl.get ('sd-aria');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: functie (stringId, subs) {
         var message = this.get ('strings'. + stringId) | |'';
         this._liveRegion.setContent (? subs Y.Lang.sub (bericht, subs): bericht);
     }
     _handlerMsg: function (e) {
         if (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     }
     _handleGossipRefresh: function () {
         var size = this.get ('suggesties') grootte ().;
         this._ariaSay ((size> 0 'suggesties':? 'NO_SUGGESTIONS'), {
             n: maat
         });
     }
 };

Lessen uit het verleden

Bij het maken van een toegankelijke interface, is het belangrijk om de juiste vragen. Het maken van elke bit van uw aanvraag toegankelijk zijn, kunnen niet de juiste aanpak.

Vraag het begin van feedback van gebruikers van schermlezers - niet van uit dat u uw bases bedekt totdat je wat feedback van gebruikers. Gebruik makend van elk instrument en zijn voorzien tot uw beschikking misschien niet het beoogde effect.

Gebruikers van schermlezers kan moeite hebben met het bijhouden van real-time updates, vooral als schermlezers worden bestookt met meldingen. In deze scenario's is minder meer. Identificeer en focus op wat belangrijk is voor de gebruiker in plaats van te proberen om de rauwe ervaring van de aanvraag voor de schermlezer te repliceren.

Over de auteur: Caridy Patiño, Principal Frontend voor Yahoo! Search Direct. Hij is een oude YUI Donateur en bedenker van Bubbling Bibliotheek YUI uitbreiding en als gast blogger op YUIBlog.com het delen van een deel van zijn uitgebreide ervaring met het bouwen high performance webapplicaties. Laden strategieën, event-driven architecturen en SSJS zijn enkele van de onderwerpen waar Caridy het grootste deel van zijn tijd deze dagen.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | Digg it! | reddit!