建筑边线：锐+ Adobe AIR的教训

3月31日，上午九时52分在乍得的友谊|在发展 ， YUI实现 | 13评论

作者简介： 乍得的友谊是一个前端工程师，与雅虎口碑营销团队的工作。 一个长期的开源贡献者，他最近帮助启动MiaCMS项目 ，Mambo的下一代叉建成使用YUI。 在这篇文章中，他引导我们通过发展与YUI的Adobe AIR平台上的桌面应用程序的过程。

副业截图

有没有想过什么人说现在的公司，品牌，服务，产品，等等？ 副业 ，最近在雅虎内部的黑客项目的启发，超出标准的顾客调查的过程中去，让你实时听人谈论你的产品，然后使用该反馈，以提高您的服务或帮助用户与他们的问题。

简单地说，我们项目的目标是

  • 创建一个桌面应用程序，允许对Twitter的高级搜索查询的建立，分组和自动执行
  • 充分利用现有的技能集和工具
  • 针对在Windows，Mac OS X中，Linux操作系统，并尽量减少必须编写特定于平台的代码量
  • 开放的源代码，让其他人可以借鉴，促进和/或延长他们认为合适的产品

我们的前端工程师团队中的JavaScript，CSS，HTML，PHP的专家，但没有很大的开发桌面应用程序的经验。 所以成为问题，如何最大限度地发挥我们现有的技能集桌面开发？ 我们的答案是利用Adobe AIR平台 ，“让开发人员使用成熟的网络技术来构建富Internet应用程序以外的浏览器上运行多个操作系统”。 AIR支持HTML / JavaScript开发（除了Flex和Flash）以来，我们对传统的网络技术可以建立我们的应用程序，顶端锐 ，它的三个主要桌面操作系统上运行。

在AIR锐网格

副业包含YUI库的广泛实施。 它应该有希望作为为其他有兴趣尝试使用YUI和Adobe AIR开发的很好的例子。 使用YUI的网格构造应用程序的布局，甚至使用了最近加入的唱腔广场角色 。 电网工作非常出色的空气环境中，并重新设计发生发展中容易实现用最少的代码改变。 就像在标准的浏览器环境，YUI的网格可以作为一个AIR应用程序的基础，即使开发人员决定对使用其他JavaScript库，而不是选择另一个框架。

YUI组件在AIR

除了 ​​电网，副业也利用DOM ， 事件 ， 拖动和Drop ， JSON ， 选择 ， 集装箱 ， 按钮 ， 菜单 ， 滚动条 ， TabView组件。 我很高兴向大家报告，所有YUI组件的表现极为出色的空气环境中，无需修改。 副业不落实相当定制设计，因而需要一些定制皮肤的YUI组件，但没有核心的修改。 最AIR应用程序往往有丰富的桌面应用程序的感觉。 对于这一级别的定制， YUI剥皮文章是一个很好的参考上手。

除了浏览器

超过传统的网络环境中的Adobe AIR平台的一个重大改进是本地SQLite数据库和用户的文件系统的访问。 本地数据库访问变得更可在传统的Web环境中，通过技术，如齿轮和HTML 5客户端存储，但现在这些解决方案是不是无处不在。 对于那些有兴趣在AIR开发，农副产品先后攻克了许多的共同任务，是一个典型的AIR应用程序可能需要，例如，获取外部数据处理应用程序更新，与本地数据库进行交互，与本地文件系统的工作，推行母语浏览器窗口，显示桌面通知，等它应证明在这方面是一个有益的参考。

AIR开发的窍门

  1. 知道你的环境。 AIR使用WebKit开源浏览器引擎罩下。 传统的Web开发的目的是使尽可能多的浏览器/操作系统的跨应用程序或网站的工作。 支持哪些浏览器通常可以归结为成本与使用因素。 然而，编码为一个单一的渲染引擎，减少需要准备和测试，对市场潜力组合极多。 话虽这么说，但它仍然是有意义的跨浏览器的方式，在可能的情况下发展，因为有可能来的时候，应用程序需要寻找到一个更传统的浏览器环境的方式。 使用像YUI的框架将使这一过程相对轻松。 它是简单的浏览器和目前由YUI的支持平台，通过分级浏览器支持图表 。 开发人员应该相当安全，建立AIR应用程序（使用-webkit-border-radius圆角微风）时，采取一些基本的快捷键，但他们有节制地使用，并记录他们，所以他们很容易被发现后。
  2. 在一个复杂的应用程序在任何环境中发展的坚实的调试工具集是一个必须拥有的。 Adobe提供了一些有用的工具，调试盒的空气。 开发人员应该调查的AIR调试启动器（ADL） ， 在HTML的Introspector ， HTML源代码查看器 。 除了 ​​捆绑工具的Aptana Studio中与它的Adobe AIR的插件被证明是一个不可或缺的资产。 在Aptana插件创建AIR项目提供援助，导入常见的JavaScript框架，调试，包装/出口，以及数字签名的应用程序。
  3. 不要忘记我们已经从标准的浏览器环境中（即，优化你的图片，缩小和组合应用程序的CSS和JavaScript文件，沉重的基于事件的应用，如农副产品，利用优势学到的性能技术事件代表团技术 ） 。 AIR应用程序运行在桌面上，并因此有是多一点与性能宽大比，典型的浏览器环境中，但浏览器本身一样记得，在空气容器也消耗甚至​​在应用程序的自定义代码踢在之前系统的内存块。

未来之路

副业的beta版本，可以安装在http://sideline.yahoo.com 。 该代码是开源BSD许可证的条款下，在GitHub上 。 我们欢迎捐款，反馈，和/或建议。 此外，在保持尽可能开放的东西，支持新兴技术的精神，我们将可能移植边线以钛在不久的将来。 端口上已经做了一些初步的工作，并会继续在未来数周。 这也是完全可能的副业，将最终实现如JavaScript的ORM JazzRecord ，以纾缓跨平台的数据库交互。 如果任何人有额外的提示，支持多种平台，我们很乐意听到他们的声音。

现在出去和叉 ！

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

实施重点：DocLanding

3月30日，2009 10:24上午|在YUI的实现由埃里克·米拉利亚| 1条评论

DocLanding：在线，按需文档管理

托德Fishback总统DocLanding ，基于Web的文档管理解决方案。 托德，加入YUIBlog讨论他的团队的内的DocLanding的用户界面，选择YUI的工具和部件。 你可以了解更多有关，从DocLanding 介绍其在2008年秋季演示会议 。

告诉我们一个关于DocLanding点点-为用户解决的核心问题是什么？

DocLanding是对需求文档管理解决方案，提供企业级文件管理功能，为大多数企业解决方案的成本的一小部分。 通过我们的软件作为服务（SaaS）提供或作为内部系统，该软件可以交付。 我们的客户主要是在金融服务和医疗保健领域。

我们为我们的客户解决的共同问题，包括提供一个基于网络的分布式劳动力集中的存储库，基于网络的按需扫描用纸量低办事处，并在高用纸量办事处基于桌面批次的扫描。 我们解决其他问题，包括安全的文件共享和协作，文档编辑/注释，版本控制，文档注释，和文档水印。 我们独特的方法来单独控制，但链接的文档库，使用户能够访问不同的资料库，一个共同的登录。

什么是您的产品设计提出特定的用户界面的挑战呢？

DocLanding：文件预览界面。

我们从一些早期的工作，你根本不能低估了人性化设计的重要性。 创建一个网站是很容易，但建立一个真正的Web应用程序，以满足企业家的需求，是真正的工作。 我们的产品，试图从文件管理严格的大型企业的域名，并提供给任何小型企业。 电子文档管理，其核心是不是一项简单的任务。 我们的目标是组织和控制，除了使他们完全可搜索大量文件的访问。 正因为如此，用户界面​​实际上是历来花费大多数的开发时间。

我们发现，你将节省时间和金钱上的支持问题，当你让你的网站简单，容易使用。 该部放宽运行网站所需要的规格。 我们得到了我们减少到几乎任何现代浏览器的JavaScript和Flash。 我们想出了核心站点设计提出了非常具体的屏幕房地产使用其自身的挑战。 我们发现我们的用户能够更好地使应用程序充分利​​用，当我们重视的颜色，肖像和其功能的控制接近。 我们认为我们是在正确的轨道上，因为我们的反馈页面返回更多的附加功能请求，请求帮助。

你选择了YUI的力量来帮助你的网站。 是什么促使你该决定？

DocLanding：按需文档管理

答案很简单，一致性和速度。 我们需要一个框架，使我们能够满足我们的产品设计规格。 更具体地说，我们有雄心勃勃的设计目标，如维护一个屏幕视图和减少或消除整页回发。 此外，我们希望我们必需的元素，许多不同的浏览器的外观和功能相同的，因为我们可以管理。 浏览器和渲染方法之间有足够的一致性问题，已经抗衡，所以我们选择需要的浏览器特定的编码，我们就必须这样做，以尽量减少金额的任何框架。 在尝试了各种不同的工具包，锐来到上面很清楚的。 有一个位的所有产品的学习曲线，但YUI的最好的回报。

基本框架并不需要一个插件，它起着很好。NET中，脚本轻，紧实。 一旦我们得到了挂起的框架中，我们发现它启发YUI的版本比较旧的传统界面页。 在任何情况下，调整我们的UI方法返回打火机下载我们的客户在性能和一致性的巨大收益。

DocLanding：多文件上传，使用YUI上传。

YUI组件您使用的是最严重的在您的应用程序？

我们实际上使用相当多的部件很多。 最有利的是那些允许我们这样做，并尽可能在一个屏幕上，所以尽可能多的TreeView ， 菜单 ， SimpleDialog和布局管理一直非常有用的。 事实上，我们几乎所有的控制，但我们特别感谢上传控制的能力，处理多个文件选择。 一段时间，我们一直在寻找解决这个问题，YUI的一直是我们迄今为止所遇到的最优雅的。 我们利用好JSON实用程序和连接管理器，大大减少我们做，这使我们的足迹，更重要的工作，不等待，让我们的用户向服务器请求的大小和数量。

什么DocLanding下？ 什么是你的工作，以解决在即将发布的挑战？

我们正在不断努力改善我们的产品的功能集。 我们的用户要求的功能，更好地整合与主应用程序的编辑他们的文档，所以我们会让时间。 我们的工作更好地适应大文件上传。 否则，我们在桌子上有几个想法，我们正在权衡哪些是最适合我们的用户受益。 一个版本是为手机和上网本优化的网站已经在设计阶段，以及工具导入结构文件夹从桌面直接进入DocLanding。 实验中，我们只存储在网站的元数据和拉动的内容直接从网络客户机运行我们的软件的想法玩弄。 最终，我们的用户的需求，将决定我们什么方向移动下。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

为Flickr锐自动完成建设快速人民的搜索

3月26日8点59分，2009由罗斯Harmes上午| 开发 | 1评论

在Flickr的 ，我们最近增加了一个新的人选择的部件到我们的网页数;此功能是基于YUI的自动完成控制 。 人民的选择部件，使我们的成员从他们的联系人名单中选择个人，它可以包含20,000项以上。 由于大量的数据，获取和分析数据的传统技术是不可行的，这主要是由于极慢解析倍。 在这篇文章中，我们将看看一些不同的数据格式，我们尝试在自动完成配置，我们发现是最高效的。

首先，这里有一个视频回顾一下我们试图完成什么;右边描绘新的互动与人发现者部件：

XHR和自定义数据获取和分析：

最大的挑战是找到一种数据格式，这将是快速下载，快速解析， - 高于一切 - 安全。 我们第一次尝试XML和Ajax，但XML解析被证明是非常慢 - 事实上，我们发现，这种做法可能带来更大的数据集上的浏览器。 接下来，我们尝试了JSON和Ajax结合，这是速度明显加快，但它仍然花了80秒以上来解析我们最大的数据集（大约10700对象，每个数组包含几个属性）。

最后，我们发现了两个运输/解析技术，原来是非常快：

  1. 获取JSON（包裹在一个回调函数）使用动态生成的脚本标记;
  2. 解析自定义的数据格式（控制字符分隔的列表）使用split()获取与Ajax（使用YUI连接管理器 ）。

最后，我们去自定义格式。 格式化我们的JSON，以便它可以由一个动态的script标签执行的是一个不太安全的方法，而不是性能取胜。 使用XHR给了我们一个更安全，还是很高性能的解决方案。

用户交互：YUI的自动完成

一旦我们有办法迅速进入JavaScript的数据，下一个挑战是创建一个用户的方式，通过联系人列表中快速搜索。 要做到这一点，我们把YUI的自动完成控制。 完全满足我们的需要： 速度极快，非常容易配置。 使用它与我们的自定义数据，我们创建了一个功能，使用自动完成实例的DataSource;在widget的每一个按键触发此功能，并在搜索字符串传递。 在这个函数中，我们遍历所有成员的联系，并尝试以四个不同领域的查询相匹配。 我们使用正则表达式做字符串匹配。

即使对于大型成套的接触，我们发现这是非常有效的技术。 这里是我们所做的基本版本： 

 功能searchContacts（查询）{

        VAR比赛= []
            queryRegEx =新的正则表达式（查询，'我'），/ /查询应
                                                 / /前检查 
                                                 / /使用正则表达式。
           联系;

         （N = 0，LEN = contacts.length; N <LEN，N +）{

               联系=接触[N];

               如果（contact.username.search（queryRegEx）== -1 | |
                    ，！contact.realname.search（queryRegEx）== -1 | |
                    ，！contact.emailAddress.search（queryRegEx）== -1 | |
                    contact.alias.search（queryRegEx）== -1）{
                        matches.push（接触）;
                }
        }

       返回匹配;
 }

一旦有了小部件连接到的数据，我们做了一个改变默认的自动完成配置：我们的queryDelay参数设置为0 （默认值是200毫秒）。 这意味着按一个键，并正在发起一个搜索之间不会有延迟。 （自动完成显示器往往闪烁了一下，如果你在连续快速输入几个字符）也有缺点，但我们发现它是单一最大的改进我们所做的，甚至比我们的搜索功能的优化更重要。 虽然queryDelay为200ms或更可能是更适当的XHR或其他远程数据源，我们发现，我们的正则表达式为基础的数据源与本地数据是寻找每一个按键上的任务。 与自动完成，我们得到了免费的缓存添加到组合，使任何给定的搜索将只进行一次。

所有这些技术，包括不同的数据格式和广泛的分析数据，为每一个细节上的更多细节，可以发现上code.flickr博客。

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

在2009年3月25日，野生

2009年3月25日9时08分上午YUI团队|在野生 | 3评论

注意到，在过去的几个星期，从YUI社区新闻。 让我们知道我们错过了什么，我们会得到下一次的意见：

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！

georgiann帕克特：锐/雅特项目经理（AdaLovelaceDay09）

2009年3月24日8时06分上午由埃里克·米拉利亚| 开发 | 1评论

YUI团队DAV玻璃和乔治·帕克特

[ 注：这篇文章是YUI团队的参与Ada Lovelace的一天 ，庆祝世界 ​​各地的女技师。]

georgiann帕克特（更好地为“乔治”）作为YUI和附属工程（包括雅特库）的项目经理。 复杂的技术方案，包括多个项目的计划管理是最苛刻的工作，在一家软件公司之一，乔治非常适合挑战。 她的表带来快速的智慧，耐心和纪律来管理大量的数据流，一个成功的软件程序是持续的过程中根深蒂固的理解。 她的背景提供在这里 - 作为一个C / C + +工程老将，她可以直接与工程师的经验与她的作品的人同情。

锐发布出去数百个变化，其中有许多是由世界各地的开发建议或贡献。 自从两年前加盟球队，乔治已经彻底改变了所有这些信息的处理方式。 这导致更好的预测，更好的沟通，更好地一刀切质量。

乔治还提供了值得称道的领导，支持雅虎的主要内部项目的YUI团队。 当我们指定一个内部项目，作为一个“大赌注”，公司未来的关键的东西，我们的团队项目的前端工程团队，并确保我们正在竭尽所能，支持他们。 乔治管理这些关系，确​​保我们的合作者得到及时，构建良好的记录和其优先次序是准确地反映在我们的发布计划。 有能力了解不同项目的需求和，faciliate我们的成功合作，是个不小的挑战，和乔治已经完成繁重的需要，以确保YUI和雅特工程师是整个雅虎在合适的时间提供正确的支持。

说到冻胀解除...... 乔治众所周知雅虎作为一个出色的技术和YUI的一个不知疲倦的倡导者，但她也是众所周知的，那些频繁雅虎的雇员健身房。 你会发现乔治有四，五晚一个星期的工作，能更好地她自己保持的世界纪录形式的自由权。

乔治的工作和她一般追求卓越的承诺有一定的启发谁与她的工作在过去的几年，我们的所有。 我问乔治曾启发她，送她走向职业生涯技术路径。

什么是您使用电脑的第一次经历？

我是在大学进入前MED轨道的意图和毕业那年，我作为一个AP微积分课程的大学预科课程的一部分。 幸运的是，老师有两个苹果电脑作为一个试验，在高中阶段教编程的一部分赠款。 我们不仅没有得到它-我们得到了它试图用最少的代码做的最强大的功能上具有竞争力。 在大学的第一个数字电子技术课程，在那里我得到线路板使用汇编语言程序电路密封处理。

你有任何女技师的榜样，影响了你吗？

我曾与我留下了深刻的印象，并学到了很多东西从有两个妇女。 板球软件的创始人之一，darragh马尔登，聘请我走出大学校门，成为迄今为止最惊人的启动我的职业生涯冒险。 她不每SE技师，但我学到了很多，从她的她的人际交往能力方面领先的技术乡亲，建设队伍，而且越来越多的公司。 其他的女人，我期待和教训是希拉·布雷迪，在苹果的系统软件部门的总监级晋升。 她肯定知道如何推动释放，在许多情况下，导致大部分男性工程师组成的团队。 她表现出的信心水平，能力，和侵略性，可以通过任何工程师赞赏-男性或女性 。

找到的谈话： bloglines technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Jenny Han Donnelly: YUI Engineer (AdaLovelaceDay09)

March 24, 2009 at 8:05 am by Eric Miraglia | In Development | 3 Comments

Jenny Han Donnelly, Sr. Engineer, Yahoo; author of YUI DataTable, DataSource and AutoComplete

[ 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 ]

找到的谈话： bloglines technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Survey: When is an Accordion not an Accordion?

March 23, 2009 at 9:20 pm by Christian Crumlish | In Design , Development | 6 Comments

example of 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.

找到的谈话： bloglines technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

下一页»
主办雅虎

©2006-2012雅虎公司所有权利保留。 隐私政策 - 服务条款

支持WordPress的关于雅虎 虚拟主机 。