Yahoo! User Interface Blog (YUIBlog)

Gebouw Sideline: Lessen in YUI + Adobe AIR

Ooit afgevraagd wat de mensen op dit moment zeggen over uw bedrijf, merk, dienst, product, etc? Sideline , geïnspireerd door een recente interne hack project bij Yahoo!, gaat verder dan het standaard klantenonderzoek proces om u te laten in real-time te luisteren naar mensen praten over uw producten en gebruik die feedback om uw service te verbeteren of gebruikers te helpen met hun problemen.

Kort samengevat: de doelstellingen van ons project waren

• Maak een desktop-applicatie die het mogelijk maakt voor de creatie, groepering, en auto-uitvoering van geavanceerde zoekopdrachten tegen Twitter
• Maak gebruik van bestaande vaardigheden-sets en tools
• Richten op de Windows, Mac OS X en Linux-besturingssystemen en het minimaliseren van de hoeveelheid van het platform specifieke code die moet worden geschreven
• Open source de code, zodat anderen kunnen leren van, bijdragen aan en / of uit te breiden van het product naar eigen inzicht

Ons team van front-end engineers zijn experts in JavaScript, CSS, HTML en PHP, maar had niet veel ervaring in het ontwikkelen desktop applicaties. Dus de vraag was, hoe we onze bestaande vaardigheden-sets te maximaliseren voor desktop-ontwikkeling? Het antwoord voor ons was om het gebruik maken van Adobe AIR-platform , wat "kunnen ontwikkelaars gebruik maken van bewezen webtechnologieën om rijke internet applicaties die buiten de browser draaien op meerdere besturingssystemen op te bouwen". Sinds AIR ondersteunt HTML / JavaScript ontwikkeling (naast Flex en Flash), konden we onze applicatie te bouwen op traditionele web-technologieën, op de top van YUI , en laat het draaien op de drie belangrijkste desktop besturingssystemen.

YUI grids in AIR

Sideline bevat een uitgebreide implementatie van het YUI Bibliotheek. Het moet hopelijk dienen als een groot voorbeeld voor andere ontwikkelaars geïnteresseerd zijn in het experimenteren met YUI en Adobe AIR. De toepassing van de lay-out wordt gebouwd met behulp van YUI grids en zelfs maakt gebruik van de recent toegevoegde ARIA Landmark Rollen . Rasters werkte heel goed in de AIR-omgeving en maakte redesigns die zich halverwege de ontwikkeling van eenvoudig te implementeren met minimale wijzigingen in de code. Net als in de standaard browser-omgeving, kan YUI grids dienen als een goede basis voor een AIR-toepassing, zelfs als de ontwikkelaar besluit tegen het gebruik van de rest van de JavaScript-bibliotheek en gekozen voor een ander kader plaats.

YUI Componenten in AIR

In aanvulling op Grids, Sideline maakt ook gebruik van de Dom , Event , slepen en neerzetten , JSON , Selector , Container , Button , Menu , Slider , en tabview componenten. Ik ben blij te kunnen melden dat alle YUI onderdelen presteerden uitstekend in de AIR-omgeving en vereist geen aanpassingen. Sideline doet implementeren van een vrij ontwerp op maat en dus een aantal aangepaste onthuiden van de YUI componenten nodig was, maar geen kern wijzigingen. De meeste AIR-toepassingen hebben de neiging om een ​​rijke desktop applicatie gevoel. Voor dit niveau van aanpassingsmogelijkheden, de YUI villen artikel is een grote verwijzing naar de slag te gaan.

Beyond the Browser

Een enorme verbetering van de Adobe AIR-platform over de traditionele webomgeving is de toegang tot een lokale SQLite database en de gebruiker bestandssysteem. Lokale toegang tot de database wordt steeds meer beschikbaar in de traditionele web-omgevingen door middel van technologie, zoals Gears en HTML 5-client opslag, maar voor nu deze oplossingen zijn niet alomtegenwoordig. Voor diegenen die geïnteresseerd zijn in AIR ontwikkeling, Sideline heeft aangepakt veel van de gemeenschappelijke taken die een typische AIR-toepassing zou kunnen vereisen, zoals het ophalen van externe gegevens, het hanteren van applicatie-updates, interactie met de lokale database, het werken met het lokale bestandssysteem, de lancering van inheemse browservensters, het weergeven van desktop-notificaties, etc. Het moet blijken te zijn een nuttige referentie in dat opzicht zijn.

Tips voor AIR Ontwikkeling

1. Ken uw omgeving. AIR maakt gebruik van de WebKit open source browser engine onder de motorkap. Traditionele web development is gericht op het maken van een applicatie of site werk over als veel browsers / besturingssystemen mogelijk te maken. Welke browsers te ondersteunen komt meestal neer op een kostprijs ten opzichte van het gebruik van factor. Echter, dat codeert voor een rendering engine vermindert de noodzaak voor te bereiden en te testen tegen de slue van de mogelijke combinaties in de markt. Dat gezegd zijnde, het maakt nog steeds zin om te ontwikkelen in een cross-browser manier waar mogelijk, aangezien er kan een tijd komen dat de aanvraag dient te zijn weg terug vinden naar een meer traditionele browser omgeving. Met behulp van een kader zoals YUI zal dat proces relatief pijnloos. Het is eenvoudig om te zien van de browsers en platforms op dit moment ondersteund door YUI via de Graded Browserondersteuning grafiek . Ontwikkelaars moeten redelijk veilig is om een aantal fundamentele shortcuts te nemen bij het ​​bouwen van AIR-toepassingen (met -webkit-border-radius maakt afgeronde hoeken een briesje), maar met mate gebruiken en documenteren zodat ze gemakkelijk te herkennen later.
2. Tijdens de ontwikkeling van een complexe toepassing in elke omgeving een solide set van debugging tools is een must-have. Adobe biedt een aantal handige tools voor het debuggen van lucht uit de doos. Ontwikkelaars moeten onderzoeken de AIR Debug Launcher (ADL) , de HTML-Introspector , en de HTML Source Viewer . Naast de gebundelde gereedschap Aptana Studio met Adobe AIR Plugin bleek een onmisbaar zijn. De Aptana plugin biedt hulp bij oprichting van een AIR-project, het importeren van veelgebruikte JavaScript-frameworks, debuggen, verpakking / exporteren, en digitaal de aanvraag ondertekent.
3. Vergeet niet de prestaties van technieken die we hebben geleerd van de standaard browser omgeving (dat wil zeggen, het optimaliseren van uw afbeeldingen, minify en combineren van de toepassing CSS en JavaScript-bestanden, en voor zware event-based applicaties zoals Sideline, gebruik te maken van event delegatie technieken ) . AIR-toepassingen draaien op de desktop en er is dus een beetje meer clementie met de prestaties dan in de typische browser-omgeving, maar vergeet niet net als de browser zelf, de AIR-container verbruikt ook een stuk van het geheugen van het systeem nog voor op maat van de applicatie code kicks in .

De weg vooruit

De beta versie van Sideline kan worden geïnstalleerd op http://sideline.yahoo.com . De code is open source onder de voorwaarden van de BSD-licentie en gehost op GitHub . Wij zijn blij met de bijdragen, feedback, en / of suggesties. Ook in de geest van het houden van dingen zo open mogelijk en het ondersteunen van opkomende technologie die we zullen waarschijnlijk porten Sideline te Titanium in de nabije toekomst. Sommige eerste werk is al gedaan op de haven en zal blijven de komende weken. Het is ook heel goed mogelijk dat Sideline zal uiteindelijk de implementatie van een JavaScript-ORM, zoals JazzRecord de database interacties te verlichten op verschillende platforms. Als iemand aanvullende tips voor de ondersteuning van meerdere platforms zouden we ze graag horen.

Ga nu heen en vork het !

Zoek gesprekken: Bloglines | technorati

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

Implementatie Focus: DocLanding

Zoek gesprekken: Bloglines | technorati

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

Het bouwen van een Fast People-Finder voor Flickr met YUI AutoAanvullen

Op Flickr hebben we onlangs nog een nieuwe mensen-selector widget om een paar van onze pagina's, deze functie is gebaseerd op de YUI AutoAanvullen controle . De mensen-selector widget zorgt ervoor dat onze leden te selecteren personen van hun lijst met contactpersonen, die kan bevatten, omhoog van 20.000 items. Vanwege de grote hoeveelheid gegevens gaat, traditionele technieken voor het ophalen en het ontleden van de gegevens zijn niet haalbaar, vooral als gevolg van extreem trage parse tijden. In dit bericht nemen we een kijkje bij enkele van de verschillende data formaten hebben we geprobeerd en aan het automatisch aanvullen configuratie vonden we het meest performant zijn.

Ten eerste, hier is een video samenvatting van wat we probeerden te bereiken, de nieuwe interactie met de mensen-Finder Widget is afgebeeld aan de rechterkant:

Het ophalen en het ontleden van: XHR en aangepaste gegevens

De grootste uitdaging was het vinden van een data formaat dat zou snel zijn te downloaden, snel te ontleden, en - boven alles - veilig. We hebben eerst XML en Ajax het geprobeerd, maar XML-parsing bleek veel te vertragen - in feite, vonden we dat deze aanpak kan omlaag brengen van de browser op grotere gegevenssets. Vervolgens hebben we geprobeerd een combinatie van JSON en Ajax, dit was beduidend sneller, maar het duurde nog meer dan 80 seconden nodig om onze grootste dataset ontleden (een array met ongeveer 10.700 objecten, elk met verschillende eigenschappen).

Uiteindelijk vonden we twee vervoer / parse technieken die bleek te zijn extreem snel:

1. Het ophalen van JSON (verpakt in een callback functie) met behulp van dynamisch gegenereerde script tags;
2. ontleden van een aangepaste data formaat (een controle-karakter gescheiden lijst) met behulp van split() , haalde met Ajax (met behulp van YUI Connection Manager ).

Uiteindelijk gingen we met de aangepaste notatie. Het formatteren van onze JSON, zodat het kon worden uitgevoerd door een dynamisch script-tag was een minder veilige benadering en niet een optreden winnen. Met behulp van XHR gaf ons een veiliger en nog steeds zeer performante oplossing.

User Interaction: YUI AutoAanvullen

Zodra we een manier om de data snel in JavaScript gehad, de volgende uitdaging was om een ​​manier voor de gebruiker om snel te zoeken door de lijst met contactpersonen te maken. Om dit te bereiken, wij de hulp van AutoAanvullen Controle YUI's. Het voldeed aan onze behoeften precies: zeer snel en zeer configureerbaar. Om het te gebruiken met onze aangepaste gegevens, hebben we een functie te gebruiken als de AutoAanvullen-instantie DataSource, elke toetsaanslag in de widget activeert deze functie en gaat in de zoekstring. Binnen deze functie, we lus door alle contacten van het lid en probeer de query op vier verschillende velden overeenkomen. We gebruikten reguliere expressies om de string matching te doen.

Zelfs voor grote hoeveelheden contacten, bleek deze techniek zijn zeer efficiënt. Hier is de basisversie van wat we gedaan hebben:

  functie searchContacts (query) {

        var resultaten = [],
            queryRegEx = new RegExp (query, 'i'), moet / / query te zijn
                                                 / / Voor gecontroleerd 
                                                 / / Gebruik in een regex.
            contact op te nemen;

         for (var n = 0, len = contacts.length; n <len, n + +) {

                contact = contact [n];

                if (contact.username.search (queryRegEx) == -1! | |
                    ! contact.realname.search (queryRegEx) == -1 | |
                    ! contact.emailAddress.search (queryRegEx) == -1 | |
                    contact.alias.search (queryRegEx)! == -1) {
                        matches.push (contact);
                }
        }

        terug wedstrijden;
 } 

Zodra we de gegevens met betrekking tot de widget, we hebben een wijziging aan de standaard AutoAanvullen configuratie: We stellen de queryDelay parameter in op 0 (de standaardwaarde is 200ms). Dit betekent dat er geen vertraging tussen indrukken van een toets en een zoektocht wordt gestart. Er zijn nadelen aan dit (de AutoAanvullen scherm heeft de neiging om flikkeren een beetje als je typt een paar letters snel achter elkaar), maar we vonden het de op een na grootste verbetering die we gemaakt, belangrijker zelfs dan optimalisaties van onze zoekfunctie zijn. Terwijl een queryDelay van 200ms of meer zou kunnen zijn meer geschikt voor XHR of andere remote DataSources, vonden we dat onze regex-gebaseerde DataSource met de lokale gegevens was tot de taak van het zoeken op elke toetsaanslag. Met AutoAanvullen, kregen we gratis caching toegevoegd aan de mix, zodat elke zoekopdracht zou slechts een keer worden gedaan.

Meer details over elk van deze technieken, met inbegrip van volledige informatie over de verschillende data formaten en uitgebreide profilering gegevens voor elk een, zijn te vinden op de code.flickr blog.

Zoek gesprekken: Bloglines | technorati

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

In het wild voor 25 maart 2009

Nieuws en aantekeningen van de YUI gemeenschap in de afgelopen weken. Laat het ons weten in de comments wat we gemist, en we krijgen het de volgende keer:

• Ross Harmes op YUI AutoAanvullen en de Flickr People Finder : Flickr's Ross Harmes heeft een interessant stuk op de Flickr-code blog over het doen van super-snel zoeken suggereren in de oprichting van de Flickr People Finder-functie. Ross wordt uitgebreid ingegaan op het proces die hij gebruikt om snel te verwerken lijsten met contactpersonen op de client, om ze in JavaScript. Van daar, wendde hij zich tot Jenny Donnelly's YUI AutoAanvullen : "[Met de] scala aan contacten in JavaScript, moesten we een manier om te zoeken via hen en selecteer een. Hiervoor gebruikten we een uitstekende AutoAanvullen YUI's widget. Om de gegevens te krijgen in de widget, hebben we een DataSource object dat een functie zou uitvoeren om resultaten te krijgen. Deze functie gewoon doorgelust via onze contact array en overeenkwam met de gegeven query uit op vier verschillende eigenschappen van elk contact, met behulp van een reguliere expressie (RegExp objecten bleek uitermate geschikt voor deze, met de gemiddelde zoektijd voor de 10.000 contacten geval komen in minder dan 38ms). Nadat de resultaten werden verzameld, de AutoAanvullen widget zorgde voor al het andere, met inbegrip van caching de resultaten. "
  
• W3C Beta Site Met behulp van YUI Reset en lettertypen : Nicole Sullivan schreef in om ons te vertellen dat YUI Reset en Fonts maken deel uit van de nieuwe W3C website redesign, die u hier kunt bekijken. De site maakt ook gebruik van Nicole's OOCS werk.
  
• Kellogg's Brazilië site is gebouwd met YUI Connection, Animatie, en nog veel meer : Kellogg's Brazilië website voert een verscheidenheid van YUI componenten. We merkten Connection Manager , Animatie , Get , en meer, allemaal naar beneden via een combo-steel URL uit yahooapis.com. Nice. ( Originele bron. )
  
• YUI zicht op - Greenbookings.com, Duurzaam Reizen Site : Yvo Schaap schreef in om ons te vertellen over Greenbookings.com , een onlangs gelanceerde reis-site die zich richt op de opkomende wereld van duurzaam reizen. Als u boekt via Greenbookings, zullen ze caclulate en kunt u de carbon footprint gegenereerd door uw reis te compenseren. Schrijft Yvo: "Ik heb gewerkt met de YUI kader voor een lange tijd en gisteren vrijgelaten mijn nieuwe website greenbookings.com dat bijna elke module van het kader in gebruik heeft: agenda, tabs, DataTable , geschiedenis + interval kalender , roosters, autocomplete, en nog veel meer. Ook veel moeite is te besteden aan een zeer snelle pagina te laden door alle javascript in de kop naar de onderkant van de pagina. "We houden van de site en het gebruik van de bijdrage van John Peloquin aan YUI, de Interval Kalender voor datum selectie .
  
• YUI zicht op - Infinite Crossword Game Site : Marco Egli schreef in om ons te vertellen over een nieuwe release van Infinite Crossword, een game site met behulp van een breed scala van YUI hulpprogramma's en widgets. "Afgelopen vrijdag een nieuwe versie van Infinite Crossword werd uitgebracht. Het is de eerste versie die beschikbaar is in het Engels. Het is een oneindige kruiswoordpuzzel die volledig draait in de browser. Verschillende YUI componenten werden gebruikt om de ontwikkeling, met inbegrip Animatie, Button, Connection Manager, DataTable, JSON, Menu en nog veel meer. Het spel richt zich op de ontwikkeling van het grootste kruiswoordpuzzel ter wereld. Gebruikers kunnen spelen en voegen hun eigen vragen. Het is een mengsel van kruiswoordraadsel en scrabble ". Bekijk hier het spel , zeker om in te loggen en dan de menu's aan de onderkant van het scherm gebruiken om uw eigen vragen toe te voegen.
• DevX, "Rich Web UI's Yahoo's voor Java-ontwikkelaars" : DevX heeft een nieuw artikel voor Java-ontwikkelaars geïnteresseerd zijn in YUI . Schrijft Narayanan AR: " Dit is het eerste artikel in een drie-delige serie die zich voornamelijk richt op Java-ontwikkelaars die geen JavaScript experts, maar zijn het ontwikkelen van webapplicaties met server-side frameworks (zoals JavaServer Pages, Struts of Spring). In deze aflevering zullen JavaScript beginners zien hoe YUI te gebruiken voor de installatie en ontwerp, en moet een goede deal over object-georiënteerd programmeren JavaScript te leren. Voor ontwikkelaars al expert in JavaScript, Dit is een artikel dient als een inleiding tot de YUI bibliotheek. "
• Video: "YUI voor Control Freaks" met Christian Heilmann : De Ajaxian team heeft Christian Heilmann's YUI tot praten op video, check it out hier of in de ingesloten speler hieronder.
  
• YUI AutoAanvullen en Agenda op Turkish Airlines Site : Cagatay Civici schreef in om ons te vertellen over het gebruik van de Turkish Airlines-site van YUI AutoAanvullen en Calendar op haar booking tool. Veel reiswebsites gebruik hebben gemaakt van deze combinatie de loop der jaren; Southwest.com was een van de eerste gebruikers van de YUI Kalender en blijft een van de oorspronkelijke releases van de agenda te gebruiken op de huidige reservering site. eigen reis Yahoo-site is een ander goed voorbeeld van hoe deze widgets kunnen samen gebruikt worden - hij is uitgevoerd door YUI imageLoader auteur Matt Mlinac. ( Originele bron. )
• Caridy Patino Mayea: "YUI3: Controlling Key Strokes Evenementen (keyUp, KeyDown, indrukken)" : Caridy (auteur van de populaire Bubbling Bibliotheek uitbreidingen van YUI) heeft een nieuwe blog up te plaatsen over het omgaan met de belangrijkste gebeurtenissen in YUI 3 . ( Originele bron. )
• Balsamiq mockups van YUI Componenten : De mockups to Go blog heeft verschillende YUI componenten spotten met behulp van de Balsamiq interface, inclusief menu's en knoppen , kalenders , en carrousels . ( Originele bron. )
  
• Meer van Matt Snider op YUI-EXT-MVC : Matt is voortzetting van de werkzaamheden op zijn YUI-EXT-MVC project . Volgens Matt, "het voordeel van het gebruik van de Controller klassen 'AJAX systeem is dat het eenvoudiger YUI Connection Manager en een ontwikkelaar kan preregistreren callbacks, zodat het type van de te verwachten reactie. Het is beschikbaar op http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js . In de toekomst zal ik het toevoegen van commando patroon logica voor het ophalen van JSON en HTML-gegevens van de server. "
  
• Paul Tarjan De Geo Explorer met YQL en YUI : SearchMonkey ingenieur Paul Tarjan heeft een interessante demo met behulp van YUI tabview en de Yahoo Maps Ajax API om de resultaten van een YQL geo zoeken weer te geven . De interface stelt u in staat het invoeren van een plaatsnaam en vervolgens zoeken naar die locatie, die locatie's broers en zussen, die locatie de voorouders, etc. Voor de grotere context en waarom is dit interessant, zie de PHP uitvinder Rasmus Lerdorff's blog post over het onderwerp . ( Originele bron. )
• Meg Smitley - "dynamisch laden YUI Afhankelijkheden" : Meg schrijft (op Meglog) : "Ik gebruik YUI grids en LayoutManager voor de ruggengraat van de interface van mijn app's sinds het einde van vorig jaar. Het is een steile leercurve en ik beschouw mezelf nog steeds heel veel beginnende en, inderdaad, alleen merkte deze week de 'dynamische belasting' tab op de YUI Configurator . In plaats van statisch inclusief de benodigde YUI CSS en JavaScript middelen, is het mogelijk om YUILoader gebruiken om dynamisch te importeren van de belasting. Hoewel ik begrijp dat YUI-experts niet zal worden onder de indruk van mijn YUILoader-openbaring, heeft deze aanpak me geholpen af te slanken JS mijn app's bestanden terwijl het verminderen van het onderhoud zorgen en dus heb ik het gevoel is het vermelden waard ten behoeve van andere noobs. " Bekijk haar artikel voor meer informatie .
• Met behulp van Carousel met SugarCRM : Roger Smith heeft een tutorial op het SugarCRM ontwikkelaar blog dat voorziet in "een snelle en eenvoudige ListView aanpassingen die de maakt gebruik van Carousel widget van de Yahoo UI (YUI) library . Deze aanpassing verandert volledig de look en feel van het Contact ListView van een 'rijen en kolommen' weergave van uw zoekresultaten op een Yahoo UI Carousel uitzicht. De YUI bibliotheek is opgenomen in SugarCRM en zorgt voor een ton van de UI functies dan wat we gebruiken in de kern van toepassing. "
  

Zoek gesprekken: Bloglines | technorati

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

Georgiann Puckett: YUI / ASTRA Program Manager (AdaLovelaceDay09)

[Opmerking: Dit bericht is onderdeel van de deelname van de YUI team in Ada Lovelace Day , een viering van de vrouwelijke technologen over de hele wereld.]

Georgiann Puckett (beter bekend als "George") fungeert als programmamanager voor YUI en gelieerde projecten (inclusief de ASTRA bibliotheek). Programma management van complexe technische programma's bestaande uit meerdere projecten is een van de meest veeleisende banen in een softwarebedrijf, en George is uitermate geschikt voor de uitdaging. Zij brengt aan de tabel een snelle intelligentie, het geduld en de discipline om grote stromen van gegevens te beheren, en een diep geworteld begrip van de processen die succesvolle software programma's worden ondersteund. Haar achtergrond dient ook hier - als een C / C + + techniek veteraan, kan ze direct inleven in de ervaringen van ingenieurs met wie ze werkt.

YUI releases uit te gaan met honderden veranderingen, waarvan er veel voorgesteld of ingebracht door ontwikkelaars over de hele wereld. Sinds de toetreding tot het team twee jaar geleden, heeft George een revolutie in de manier waarop al die informatie wordt omgegaan. Dat is geleid tot een betere prognose, betere communicatie en een betere kwaliteit over de hele linie.

George heeft ook prijzenswaardige leiderschap voor het YUI team bij het ondersteunen van grote interne projecten bij Yahoo. Wanneer we een intern project aan te wijzen als een "grote inzet", iets wat van cruciaal belang voor de toekomst van het bedrijf, we werken samen met frontend van het project engineering team en zorg ervoor dat we alles wat we kunnen doen om hen te steunen. George beheert deze relaties, ervoor te zorgen dat onze medewerkers tijdig en goed gedocumenteerde bouwt krijgen en dat hun prioriteiten worden nauwkeurig weerspiegeld in onze versie plannen. Met de mogelijkheid om de diverse projecten de behoeften te begrijpen en om onze succesvolle samenwerking te vergemakkelijken, is geen kleine uitdaging, en George heeft gedaan het zware werk om ervoor te zorgen dat de YUI en ASTRA engineers de juiste ondersteuning bieden op het juiste moment in heel Yahoo.

Spreken van deinende tillen .... George is bekend bij Yahoo als een uitzonderlijke technoloog en een onvermoeibare pleitbezorger van YUI, maar ze is ook bekend bij hen die frequent Yahoo werknemer van een fitnessruimte. U vindt George zijn er vier of vijf avonden per week bezig om haar eigen wereld-record vorm beter op de vrije gewichten.

George's werk en haar algemene streven naar perfectie is zeker geïnspireerd ieder van ons die met haar werk de afgelopen jaren. Ik vroeg George, die haar inspireerde en stuurde haar de weg naar een carrière in de technologie.

Wat was je eerste ervaring met computers?

Ik was de bedoeling over het invoeren van een pre-med track in de universiteit en ik had een AP Calculus natuurlijk mijn laatste jaar als onderdeel van het college prep curriculum. Het toeval wilde, dat de leraar kreeg een subsidie ​​voor twee Apple-computers als onderdeel van een proef om de programmering te leren op de middelbare school niveau. Niet alleen hebben we het - we concurreren op het proberen om de meest robuuste kenmerken maken met de minste hoeveelheid code. De eerste digitale elektronica cursus in college waar ik te programmeren circuits kreeg op het bord met behulp van assembleertaal verzegeld de deal.

Hebt u een vrouwelijke technoloog rolmodellen die je beïnvloed?

Er zijn twee vrouwen die ik heb gewerkt met dat ik onder de indruk van en leerde veel van. Darragh Muldoon, mede-oprichter van Cricket Software, huurde ik van de universiteit in verreweg het de meest verbazingwekkende avontuur van het opstarten van mijn carrière. Ze was was geen technoloog per se, maar ik heb veel geleerd van haar met betrekking tot haar volk vaardigheden in het leiden van technische mensen, het opbouwen van teams en het kweken van een bedrijf. De andere vrouw die ik op te kijken en leerde van was Sheila Brady, die door de rangen gestegen tot directeur-niveau in het systeem van Apple's software divisie. Ze wist heel goed hoe ze een release te rijden, in veel gevallen leiden van teams voornamelijk uit mannen ingenieurs. Ze vertoonden een niveau van vertrouwen, competentie, en agressiviteit die kunnen worden gewaardeerd door een ingenieur - man of vrouw.

Zoek gesprekken: Bloglines | technorati

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

Jenny Han Donnelly: YUI Engineer (AdaLovelaceDay09)

[ Note: This post is part of the YUI team's participation in Ada Lovelace Day , a celebration of female technologists around the world.]

Jenny Han Donnelly is the author of three YUI components:

1. The DataTable Control : YUI's DataTable is one of our signature UI widgets, providing a powerful menu of interactive options for tabular data.
2. The AutoComplete Control : AutoComplete provides typeahead, suggest, filtration and combo-box functionality to any text input area.
3. The DataSource Utility : Shared by DataTable, AutoComplete and the Charts Control , DataSource serves as a conduit between widgets and potential sources of data — including server-side data, JavaScript arrays, and DOM structures like HTML tables.

Jenny's work inspires us in part because of the technical challenges she takes on — try getting fixed headers with xy scrolling to work in IE6 using a semantically sound base table sometime, if you have any doubts. Jenny has taken on some of the most complex HCI challenges anywhere in YUI and engineered them to suit virtually any environment. DataSource enables other YUI components to work with anything from flat files to JSON and XML to JavaScript arrays and DOM structures. We've heard from thousands of people on the YUI forums using all of these features and more in ecclectic and novel ways.

We're also inspired by the organizational leadership Jenny has shown in her time at Yahoo. Currently, she's the lead editor of YUIBlog, bringing technical voices from throughout Yahoo to these pages to share their insights. She has also organized our annual frontend engineering summit at Yahoo, bringing hundreds of Yahoo engineers from around the world together in a rich weeklong technical conference. She's taught weeklong YUI courses to engineers in the USA, Korea and Japan, and she's been an integral member of the hack day group at Yahoo that's such an important part of our engineering culture.

Whether she's coding, writing, teaching or leading — all of which are aspects of the modern technologist's job description — Jenny sets a high bar with her intelligence, dedication, imagination and wit. Ada would be proud.

[ photo of Jenny used by kind permission of Stephen Woods ]

Zoek gesprekken: Bloglines | technorati

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

Survey: When is an Accordion not an Accordion?

I'm looking for feedback from people who have designed or built an interface using an “accordion” module (or are considering doing so). You see, I've been working on a design pattern for accordion modules, and I'd like to throw out a handful of open questions to the community via this brief survey . I'll be listening elsewhere as well, on twitter ( @mediajunkie ) and on mailing lists where web designers and developers hang out.

(I realize this is not a scientific survey. I'm just interested in engaging the wider community in a discussion instead of trying to impose my view or Yahoo!'s view on the community as authoritative.)

Everywhere I go lately, it seems that interaction designers and web developers are talking about accordion widgets and debating about what makes an accordion an accordion. Not everyone working in this field has heard the term (some may simply refer to “stacked panels” or “collapsible panels”) but most get the gist fairly easily. Ironically, none of the UI elements described as accordions share the actual behavior of a real-world accordion (the musical instrument): namely, that stretching an accordion opens all the folds evenly.

Accordions have been an on-and-off topic of discussion on the main IxDA mailing list ; we discussed them in our Pattern Library workshop in Vancouver earlier this month, and there's been an ongoing discussion about accordions on our internal designer mailing list here at Yahoo!.

So I sat down with some folks from the YUI team (and Marco, the maker of an experimental YUI accordion widget ) a little while ago to sort through a draft of an accordion pattern that might help inform the development of an official YUI component.

Broadly speaking, most people agree on what we're talking about when we talk about an accordion interface element. Everyone agrees that accordions are used to compress content into a limited space and that they consist of panels that can collapse or expand. Beyond this, there are a number of subtle nuances that not everyone agrees on.

One trend I've noticed is that front-end developers tend be agnostic about how the accordion should work, viewing it as really just a variant on a tree widget. Designers tend to be more prescriptive, saying that to be an accordion it must behave in thus and such a way (but not all designers agree on what these rules are).

In the end, the YUI folks will produce code that can be made to do just about anything. We aren't going to try to impose our own taste or preferences in design through the functionality of the code itself. However, we will use the associated pattern to make suggestions and recommendations drawn from the experience of the entire design community, and we will probably lobby for default behaviors that match what most people expect.

So, if you've got a few minutes and an opinion, please visit the survey and let me know what you think!

I'll close the survey on April 30.

Zoek gesprekken: Bloglines | technorati

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