건물 부업 : YUI + 어도비 AIR의 레슨
년 | 9시 52분에서 2009년 3월 31일는 차드 송구하여 오전 개발 , YUI 구현이 | 13 코멘트저자 소개 : 차드 송구는 야후 버즈 마케팅 팀과 함께 작업 프런트 엔드 엔지니어입니다. 오랫동안 오픈 소스 기여자, 그는 최근에 시작하는 데 도움 MiaCMS 프로젝트 , YUI를 사용하여 만들어진 맘보의 차세대 포크. 이 문서에서 그는 어도비 에어 플랫폼에서 YUI와 데스크톱 애플 리케이션을 개발하는 과정을 통해 우리를 안내합니다.
적 어떤 사람들은 브랜드, 서비스, 제품 등?, 회사에 대해서 지금 말씀이 궁금 부업 가 사람에게 실시간으로들을 수 있도록 표준 고객 설문 조사 과정을 뛰어넘는, 야후에서 최근 내부 해킹 프로젝트에서 영감을, 귀하의 제품에 대해 얘기하고 서비스를 강화하거나 문제를 가진 사용자를 돕기 위해 그 의견을 반영하고 있습니다.
간단히 명시, 우리 프로젝트의 목표는 있었
- 트위터에 대한 고급 검색 쿼리 생성, 그룹화, 그리고 자동 실행을 허용 데스크톱 응용 프로그램 만들기
- 활용 기존의 스킬 세트 및 도구
- 윈도우, 맥 OS X 및 Linux 운영 체제를 대상으로 작성해야합니다 플랫폼에 특정 코드의 양을 최소화
- 다른 사람에게서 배울 수 있도록 오픈 소스 코드는에 기여, 그리고 / 또는 그들이 맞는 볼로 제품을 확장
프런트 엔드 엔지니어 저희 팀은 자바 스크립트, CSS, HTML 및 PHP에서 전문가이지만 데스크톱 응용 프로그램 개발 경험이 큰 거래가 없었어요. 그래서 질문은 데스크톱 개발을 위해 기존 기술 세트를 극대화하는 방법이되었습니다? 우리 답은 활용하는 것이었다 어도비 AIR 플랫폼 "개발자가 여러 운영 체제에서 브라우저 외부에서 실행하는 풍부한 인터넷 애플 리케이션을 구축하기 위해 입증된 웹 기술을 사용할 수 있습니다". AIR는 HTML / 자바 스크립트 개발 (플렉스 및 플래시 이외에) 지원하기 때문에, 우리는 위에 전통적인 웹 기술을 우리의 응용 프로그램을 빌드할 수 YUI , 그리고 세 가지 주요 데스크탑 운영 체제에서 실행했습니다.
AIR에서 YUI 격자
부업은 YUI 라이브러리의 광범위한 구현이 들어 있습니다. 그것은 잘하면 YUI와 어도비 AIR와 함께 실험에 관심을 다른 개발자에 대한 좋은 예를 역할을한다. 응용 프로그램의 레이아웃은 사용 구성되어 있습니다 YUI의 격자를 심지어 사용하게 최근에 추가된 ARIA의 랜드마크 역할을 . 격자는 AIR 환경에서 잘 작동하고 최소한의 코드 변경으로 구현 중반 개발을 쉽게 발생 redesigns했다. 개발자가 자바 스크립트 라이브러리의 나머지 부분을 사용하여 반대를 결정하고 그 대신 다른 프레임 워크에 대해 사용하도록 선택한 경우에도 그냥 표준 브라우저 환경에서처럼, YUI의 격자는 AIR 애플 리케이션을위한 훌륭한 기초로 검색할 수 있습니다.
AIR에서 YUI 구성 요소
격자 이외에 부업도 활용 돔 , 이벤트 , 끌어서 놓기 , JSON , 선택기 , 컨테이너 , 버튼 , 메뉴 , 슬라이더 , 그리고 TabView의 구성 요소를. 나는 YUI 구성 요소는 AIR 환경에서 매우 잘 수행하고 아무런 수정이 필요 없다는 것을보고 드리겠습니다. 부업은 상당히 맞춤 디자인 때문에 YUI 구성 요소의 일부 사용자 지정 skinning이 필요했습니다, 그런데 코어 개조를 구현 않습니다. 대부분의 AIR 어플 리케이션은 풍부한 데스크톱 응용 프로그램이 그들에게 느끼는 경우가 많다. 정의의이 수준은 YUI의 skinning 기사가 시작하는 훌륭한 레퍼런스입니다.
브라우저 넘어
전통적인 웹 환경을 통해 어도비 AIR 플랫폼의 주요 향상은 로컬 SQLite는 데이터베이스와 사용자의 파일 시스템에 액세스할 수 있습니다. 로컬 데이터베이스 액세스는 기어와 HTML 5 클라이언트측 스토리지와 같은 기술을 통해 기존의 웹 환경에서 좀 더 유용하게되고있다,하지만 지금은 이러한 해결책은 유비 쿼터스 없습니다. AIR 개발에 관심있는 분들을 위해, 부업은 전형 AIR 응용 프로그램이 필요할 수있는 일반적인 작업을 많이 달려드는있다, 예를 들어, 기본 브라우저 창을 시작, 로컬 파일 시스템 작업, 로컬 데이터베이스 상호 작용, 응용 프로그램 업데이 트를 처리, 외부 데이터 가져오기, 바탕 화면 알림을 표시하는 등 그것은 그 점에있어서 유용한 참고 자료로 증명해야합니다.
AIR 개발을위한 팁
- 환경을인지 알 수 있습니다. 공기는 후드 아래에 웹킷 오픈 소스 브라우저 엔진을 사용합니다. 기존의 웹 개발은 가능한 많은 브라우저 / 운영 체제 등에 걸쳐 응용 프로그램이나 사이트에 작품을 만드는 것을 목표로하고 있습니다. 어떤 브라우저를 지원하기 위해 일반적으로 비용 대비 사용량 요인으로 귀착됩니다. 그러나, 하나의 렌더링 엔진을 위해 코딩하는 것은 시장의 잠재력 조합의 slue에 대해 준비하고 테스트하는 필요성을 줄여줍니다. 에도 불구하고, 그것은 여전히 응용 프로그램이 더 전통적인 브라우저 환경으로 방법을 찾고해야 할 때 순간이 올 수 있으므로 가능한 크로스 브라우저 방식으로 개발하는 것이 가장 중요합니다. YUI와 같은 프레임 워크를 사용하면 해당 프로세스가 상대적으로 고통하겠습니다. 그것은 현재를 통해 YUI가 지원하는 브라우저와 플랫폼을보고 간단 등급 브라우저 지원 차트를 . 개발자는 AIR 응용 프로그램을 (를 사용하여 구축할 때 몇 가지 기본적인 단축키를 데리고 비교적 안전하다고한다
-webkit-border-radius둥근 모서리 산들바람하게)하지만 아껴서 그들을 사용하고 그들이 나중에 찾아낸다 쉬운 있도록 그들을 문서. - 어떤 환경에서 복잡한 애플 리케이션의 개발 기간 동안 디버깅 도구의 단단한 세트가-설치되어 있어야합니다. Adobe는 박스에서 AIR를 디버깅하는 데 유용한 도구를 제공합니다. 개발자는 조사를 해봐야 에어 디버그 실행기 (ADL) , HTML Introspector , 그리고 HTML 소스 뷰어를 . 번들 도구 이외에도 자사의 어도비 AIR 플러그인과 Aptana Studio는 필수 자산 것으로 입증되었습니다. Aptana 플러그인은 디버깅, 패키징 / 수출 및 디지털 응용 프로그램을 서명, 일반적인 자바 스크립트 프레임 워크 가져오기, AIR 프로젝트의 생성과 지원을 제공합니다.
- 우리는 표준 브라우저 환경 (즉, 이미지를 최적화 작게하다하고 응용 프로그램의 CSS와 자바 스크립트 파일을 결합하고, 부업 같은 무거운 이벤트 기반 애플 리케이션을 위해, 활용에서 배운 성능 기법을 잊지 마라 이벤트 위임 기법 ) . AIR 응용 프로그램이 데스크톱에서 실행하고 그래서 거기에 일반 브라우저 환경에 비해 성능과 좀 더 관용이 있지만 일단 브라우저 자체처럼 기억 AIR 컨테이너도도에있는 응용 프로그램의 사용자 지정 코드 실력하기 전에 시스템의 메모리 청크를 소비 .
전방 도로
부업의 베타 버전에 설치할 수 있습니다 http://sideline.yahoo.com . 코드는 BSD 라이센스의 조건에 따라 오픈 소스와 GitHub에서 호스팅 . 우리는 기부금, 피드백 및 / 또는 제안을 환영합니다. 또한, 가능한 한 개방으로 것들을 유지하고 신흥 기술을 지원하는 정신에 우리는 가능성이 부업을 포팅할 것입 티타늄 가까운 미래에. 일부 초기 작품은 이미 포트에서 수행되었으며, 앞으로 몇 주 동안 계속됩니다. 그것은 부업 같은 자바 스크립트 ORM 구현이 집중되는도 꽤 가능 JazzRecord 플랫폼 데이터베이스 상호 작용을 용이하게하도록합니다. 사람이 여러 플랫폼을 지원하기위한 추가 도움말이있다면 우리는 그들을 듣고 싶네요.
이제 앞으로 가서 그것을 포크 !
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
구현 초점 : DocLanding
10시 24분에서 2009년 3월 30일 에릭 Miraglia에 의해 오전 |에서 YUI 구현 | 1 개의 덧글
토드 Fishback가의 대통령이고 DocLanding , 웹 기반 문서 관리 솔루션입니다. 토드는 DocLanding 사용자 인터페이스 내에서 YUI 유틸리티와 위젯 그의 팀의 선택을 논의하기 위해 YUIBlog에 우리가 들어 섭니다. 당신은에서 DocLanding에 대해 자세히 배울 수 있습니다 가을 2008 데모 컨퍼런스에서 자사의 프리젠 테이션 .
우리에게 DocLanding 대해 조금 말해 - 귀하의 사용자를위한 해결 중심 문제는 뭔데?
DocLanding은 대부분의 엔터 프라이즈 솔루션의 비용의 분율을위한 엔터 프라이 즈급 문서 관리 기능을 제공하는 주문형 문서 관리 솔루션입니다. 소프트웨어 서비스 (SaaS는) 제공이나 사내 체제와 우리의 소프트웨어를 통해 전달할 수 있습니다. 우리의 고객은 금융 서비스와 의료 경기장에 주로있다.
우리는 우리 고객을 위해 해결 일반적인 문제는 분산 workforces을위한 웹 기반 중앙 집중식 저장소를 제공하는 낮은 종이 볼륨 사무소를위한 주문형 웹 기반 스캐닝, 높은 종이 볼륨 사무실에서 바탕 화면 배치 기반 스캐닝 등이 있습니다. 우리가 주소가 다른 문제는 안전한 문서 공유 및 공동 작업, 문서 편집 / 주석, 버전 제어, 댓글 문서 및 문서 watermarking이 포함됩니다. 별도로 제어하지만, 연결된 문서 리포지 토리에 대한 우리의 독특한 접근 방식은 사용자가 한 번의 일반적인 로그인과 서로 다른 리포지 토리에 액세스할 수 있습니다.
여러분의 제품 디자인을 제시한 특정 사용자 인터페이스 도전은 뭐였어요?
우리는 당신이 단순히 사용자 친화적인 디자인의 중요성을 과소 평가 수없는 우리의 이전 작업 중 일부에서 배웠습니다. 웹사이트를 만드는 것은 상당히 쉽습니다,하지만 기업인들의 요구를 충족해야 진정한 웹 응용 프로그램을 작성하는 것은 실제 작품입니다. 저희 제품은 대기업의 엄격 도메인에서 문서 관리를하고 중소 기업에게 사용할 수 있도록하려고합니다. 핵심의 전자 문서 관리는 간단한 작업이 아닙니다. 목표는 그들이 완전히 검색할 제작 이외에 구성 및 파일의 거대한 숫자에 대한 액세스를 제어하는 것입니다. 우리의 개발 시간의 대부분은 전통적으로 지출되어 어디이 때문에 사용자 인터페이스는 사실이다.
저희는 귀하의 사이트가 간단하고 사용하기 쉽게 만들 때 지원 문제에 시간과 비용을 절약할 수있는 것으로 나타났습니다. 의 일부는 사이트를 실행하는 데 필요한 사양을 편안하고 있습니다. 우리는 JavaScript와 Flash와 현대의 브라우저에 대해에 우리를 내려 앞에 서어요. 우리가 생각해낸 핵심 사이트 디자인 화면에서 부동산의 매우 구체적인 사용과 자체 과제를 제시. 저희는 사용자들이 우리 자신은 색상, 도해법 그들의 임무에 컨트롤의 근접에주의를 지불하면 응용 프로그램의 전체 사용을 할 수 있었다 더 발견. 우리는 피드백 페이지가 도움 요청에 대해보다 부가 기능에 대한 더 요청을 반환했기 때문에 우리가 올바른 궤도에 온 것.
당신은 힘과 귀하의 사이트를 돕기 위해 YUI를 안았습니다. 그게 무슨 결정으로 이끌 었지?
간단한 대답은 일관성과 속도입니다. 우리는 우리 제품의 설계 사양을 만족하도록 해주는 프레임 워크를 필요했습니다. 더 구체적으로, 우리는 한 화면보기를 유지하고 전체 페이지 postbacks을 최소화 또는 제거와 같은 야심적인 설계 목표를했다. 또한, 우리가 관리할 수있는대로 많은 다른 브라우저로 동일 모습과 기능하기 위해 필요한 요소를 원했습니다. 이미 맞설 수있는 브라우저와 그들의 렌더링 방법론 간의 충분한 일관성 문제가있다, 그래서 브라우저별 우리가해야 할 것 코딩의 양을 최소화하기 위해 필요한 우리가 선택한 모든 프레임 워크. 다른 툴킷의 다양한 실험 후, 유이 위에 정확하게 나왔다. 이 모든 제품에 대한 학습 곡선의 조금했지만, YUI의이 최고의 보수도했다.
기본 프레임 워크가 필요하지 않은 플러그인, 그게. NET와 함께 플레이를 잘하고, 스크립트, 라이트 꽉 및 고체입니다. 일단 프레임 워크의 요령을 가지고, 우리는 YUI 버전에 우리의 오래된 전통적인 인터페이스 페이지를 비교 일깨워 발견. 모든 경우에, 우리의 UI 방법론을 조정하는 것은 고객에 대한 밝은 다운로드 프로그램과 함께 성능 및 일관성에 큰 이득을 반환했습니다.
당신의 애플 리케이션에 가장 크게 어떤 YUI 구성 요소를 사용하고 있습니까?
우리는 실제로 구성 요소를 상당히 많이 사용하고 있습니다. 가장 유익한 것들은 우리가 가능한 한, 그래서 같이 한 화면에 많은 일을하도록하시는 분들은 있었 TreeView는 , 메뉴 , SimpleDialog 및 레이아웃 관리자에 매우 유용하게되었습니다. 사실 우리는 거의 모든 컨트롤을 사용하고 있지만 특별히 감사 업로더 컨트롤 여러 개의 파일 선택을 처리할 수의 능력을. 우리는 얼마 동안 그 문제에 대한 솔루션을 찾고 있었어요 그리고 YUI의 우리가 지금까지 발생한 가장 우아한되었습니다. 우리는 잘 활용하게 JSON 유틸리티 및 연결 관리자 크게 우리의 발자국을 유지하고 더 중요한 것은 기다리는이 작동하지 않습니다 사용자를 유지하는, 만들어 서버에 요청의 크기와 수를 최소화합니다.
DocLanding에 대한 다음은 뭐지? 당신이 곧 릴리스에서 해결하기 위해 노력하고 도전은 무엇인가?
우리는 끊임없이 우리의 제품의 기능 집합을 개선하기 위해 노력하고 있습니다. 우리 사용자들은 우리가 시간이 될 수 있도록 더 나은 주요 응용 프로그램과 함께 자신의 문서 편집을 통합하는 기능을 요구해 왔습니다. 우리는 또한 더 대용량 파일 업로드를 수용 최선을 다하고 있습니다. 그렇지 않으면, 우리는 테이블에 몇 가지 아이디어를 가지고 우리는 것들은 사용자에게 가장 도움이 될 어떤 생각 중이야. 휴대폰과 netbooks에 최적화된 사이트의 버전 도구를 직접 DocLanding으로 바탕 화면에서 구조화된 폴더를 가져올뿐만 아니라, 이미 설계 단계에 있습니다. 실험적으로, 우리는 웹사이트에서 메타 데이터를 저장하고 우리의 소프트웨어를 실행하는 네트워크 클라이언트 컴퓨터에서 직접 콘텐츠를 당기의 아이디어 가지고 놀겠 다는거하고. 궁극적으로 사용자의 요구에 우리가 다음에 어디로 이동 방향으로 지시할 것입니다.
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
YUI 자동 완성으로 플리 커에 대한 빠른 사람-Finder를 구축
8시 59분 3 월 26 일 장소 2009 로스 Harmes에 의해 오전 |에 개발 | 1 개의 덧글에서 플리커 , 우리는 최근 우리의 페이지에 몇 가지에 새로운 사람 - 선택기 위젯을 추가,이 기능을 기반으로 YUI 자동 완성 제어 . 인간 선택기 위젯은 우리의 회원 20,000 항목 이상을 포함할 수의 연락처 목록에서 개인을 선택할 수 있습니다. 데이터 참여, 데이터를 가져오기 및 파싱을위한 전통 기술의 종류가 너무 많기 때문에 주로, 극도로 구문 분석 시간을 늦추기 때문에 가능한 아니었다. 이 게시물에서, 우리는 시도하고 자동 완성 설정에서 우리가 가장 performant 것으로 다른 데이터 형식의 몇 가지 살펴됩니다.
첫째, 우리가 성취하려고했는지 동영상 정리해보, 인간 파인더 위젯과 새로운 상호 작용이 오른쪽에 그려져 있습니다 :
XHR 및 사용자 정의 데이터 : 가져오는 및 구문 분석
보안 - 모든 다른 위 - 가장 큰 문제는, 다운로드 빠른 구문 분석 및 빠른 될 데이터 형식을 찾는되었다. 우리는 먼저 XML과 에이 잭스를했지만, XML 구문 분석이 속도가 훨씬 좋은 것으로 판명 - 사실, 우리는이 접근 방식이 큰 데이터 세트에서 브라우저를 가져다 줄 수있는 것으로 나타났습니다. 이것은 속도가 매우 빠르고했지만 아직 (몇 가지 속성과 약 10,700 개체, 각을 포함하는 배열)의 가장 큰 데이터 집합을 파싱하기 위해 80 개 이상의 초 걸렸습니다;하기 다음 우리는 JSON과 아약스의 조합을 시도.
결국, 우리는 매우 빠른 것으로 판명이 운송 / 파싱 기술을 발견 :
- 동적으로 생성된 스크립트 태그를 사용하여 JSON을 (콜백 함수에 싸여) 가져오는;
- 사용하여 사용자 정의 데이터 형식 (제어 문자 구분된 목록) 구문 분석하는
split(), 아약스 (이용하여 가져온 YUI 연결 관리자를 ).
결국, 우리는 사용자 정의 형식과 함께 갔다. 그것은 동적 스크립트 태그에 의해 실행될 수 있도록 우리의 JSON 포맷하는 것은 덜 안전한 방법이 아닌 성능 승리했습니다. XHR을 사용하면 우리에게 더 안전하고 여전히 매우 performant 솔루션을 주었다.
사용자 상호 작용 : YUI 자동 완성
일단 우리가 신속하게 자바 스크립트로 데이터를 얻을 수있는 방법을 가지고, 다음 과제는 빠르게 연락처 목록을 검색할 수있는 사용자를위한 방법을 만드는 것이었다. 이를 위해 우리는 YUI의 자동 완성 제어하기 시작했습니다. 그것은 정확하게 우리의 요구를 충족 : 매우 빠르고 매우 구성. 우리의 사용자 정의 데이터와 그것을 사용하기 위해 자동 완성 인스턴스가 데이터 소스의로 사용할 함수를 만들어, 위젯의 모든의 키를이 기능을 실행하고 검색 문자열에 전달됩니다. 이 함수 내에서, 우리는 회원의 모든 연락처를 통해 루프와 네 가지 분야에서 검색어와 일치하려고합니다. 우리는 문자열 매칭을 수행하는 정규 표현식을 사용.
비록 연락처 대형 세트를 위해, 우리는 매우 효율적이 방법을 발견. 여기서 우리가 뭘했는지의 기본 버전은 다음과 같습니다 :
함수 searchContacts (쿼리) { VAR 성냥 = [], queryRegEx = 새로운 regexp와이 (쿼리, 'I'), / / 쿼리는되어야 / / 전에 확인 / / 정규식으로 사용합니다. 에게 문의; {(; N <렌 N + + VAR N = 0, 렌 = contacts.length)에 대한 에 문의 = 연락처 [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 (기본값은 200ms입니다.) 이것은 주요 언론과 시작되고 검색 사이에 지연은 없을 것을 의미합니다. 가이 (당신이 빠르게 연속해서 몇 문자를 입력하면 자동 완성 표시 비트를 점멸시키는 경향)에 부정적인 측면이 있지만 우리는 우리가 만든 가장 큰 단일 개선, 심지어 우리의 검색 기능에 대한 최적화보다 더 중요하다고 판단했습니다. 반면 queryDelay 200ms 이상이 XHR 또는 기타 원격 DataSources에 대한 더 적절한 것, 우리는 로컬 데이터와 데이터 원본의 정규식 기반의가 모든 키스트 로크를 검색하는 작업에 대한 것으로 나타났습니다. 자동 완성과 함께, 우리는 특정 검색 한 번만 할 수 밖에 없었다 있도록 무료로 캐시가 믹스에 추가 있어요.
다른 데이터 형식과 각각에 대한 광범위한 프로 파일링 데이터에 대한 자세한 내용을 포함하여 이러한 기법, 모두에 대한 자세한 내용은에서 찾을 수 code.flickr의 블로그.
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
2009년 3월 25일위한 야생에서
년 | 9시 8분에서 2009년 3월 25일가 YUI 팀에 의해 오전 야생에서 | 3 개의 댓글뉴스와 지난 몇 주 동안 YUI 커뮤니티에서 노트. 우리는 우리가 놓친, 우리는 그것을 다음에 시간을 가지게 될겁니다 댓글에 알려주세요 :
- YUI 자동 완성 및 플리커 사람 찾기에서 로스 Harmes : 플리 커의 로스 Harmes가 가진 플리커 코드 블로그에 흥미로운 기사를 초고속 검색을 수행 대해서는 플리커 사람 찾기 기능의 창조에 좋습니다. 로스 자세히 그가 자바 스크립트로 그것을 받고, 클라이언트에서 빠르게 연락처 목록을 처리하는 데 사용하는 프로세스를 설명합니다. 여기에서 그는 제니 국 도넬리입니다의으로 향했다 YUI 자동 완성 : "자바 스크립트의 연락처 배열 [에]의, 우리는 그들을 통해 검색하고 하나를 선택하는 방법이 필요했습니다. 이를 위해, 우리는 YUI의 우수한 자동 완성 위젯를 사용했습니다. 위젯으로 데이터를 얻으려면, 우리는 만들어진 데이터 원본 결과를 얻으려면 함수를 실행하는 것이 개체를. 이 함수는 단순히 우리의 접촉 배열을 통해 반복 및 각 연락처의 네 가지 특성에 대해 특정 검색어와 일치하는, 정규 표현식 (regexp와 개체가 오는 10000 연락처 경우 평균 검색 시간, 극도로 본에 적합임이 드러났다 사용 에서 38ms 이하). 결과가 수집된 후, 자동 완성 위젯은 결과를 캐싱을 포함하여 다른 모든 것을 처리했다. "
- YUI 재설정 및 글꼴 사용하기 W3C의 베타 사이트 : 니콜 설리반 했다는 말을 쓴 YUI 재설정 및 글꼴은 여기서 볼 수 있습니다 새로운 W3C 사이트 재설계의 일부입니다. 사이트도 사용 니콜의 OOCS의 작품.
- YUI 연결, 애니메이션 등을 통해 내장 켈로그 브라질 사이트 : 켈로그 브라질 웹사이트 YUI 구성 요소의 다양한 구현합니다. 우리는 눈치 연결 관리자 , 애니메이션 , 타 , 그리고 더 많은 모든 yahooapis.com에서 단일 콤보-처리할 URL을 통해 내려갑니다. 멋지 네요. ( 원본 소스. )
- YUI가 보이질 - Greenbookings.com, 지속 가능한 여행 사이트 : Yvo 샤프가 이야기를하기에서 쓴 Greenbookings.com , 지속 가능한 여행의 신흥 세계에 초점을 맞춘 최근 시작된 여행 사이트입니다. 당신 Greenbookings 통해 예약했을 때, 그들은 caclulate하고 여행에 의해 생성되는 탄소 발자국을 상쇄 수 있습니다. Yvo의 글을 참고하세요 : "나는 나의 새로운 웹사이트 발표 오랜 시간과 어제 YUI 프레임 워크를 위해 일해 왔던 greenbookings.com 사용 프레임 워크의 거의 모든 모듈이있다 : 달력, 탭, DataTable의 , 역사 + 구간 달력 , 격자를 더 많은 자동 완성, 많은. 또한 많은 노력이 헤더에서 페이지 하단으로 모든 자바 스크립트를 제거하여 매우 빠른 페이지 로딩에 대한 지출. "우리는 사이트 및 YUI에 존 Peloquin의 기부금의 사용을 사랑해왔다 날짜 선정 간격 달력 .
-
YUI가 보이질 - 무한 낱말 게임 사이트 : 마르코 에글리은 무한 낱말의 새로운 릴리스, YUI 유틸리티와 위젯의 다양한 배열을 사용하여 게임 사이트에 대해 알려주십시오 밝혔다. "지난 금요일은 새로운 버전의 무한 낱말이 릴리스되었습니다. 그것은 영어에서 사용할 수있는 첫 번째 버전입니다. 그것은 브라우저에서 완벽하게 실행되는 무한 크로스워드 퍼즐입니다. 여러 가지 YUI 구성 요소 애니메이션, 버튼, 연결 관리자, DataTable의, JSON, 메뉴 등, 개발에 사용되었습니다. 게임은 세계 최대의 크로스워드 퍼즐의 개발을 목표로. 사용자는 재생 및 자신의 질문을 추가할 수 있습니다. 그것은 낱말과 낙서의 혼합물이다. ' 게임을 여기에 체크 아웃 , 로그인 후 자신의 질문을 추가하려면 화면 하단의 메뉴를 사용해야합니다. - DevX, "자바 개발자를위한 야후의 리치 웹 UIs" : DevX은 YUI에 관심이 자바 개발자를위한 새로운 기사를있다 . Narayanan AR의 글을 참고하세요 : " 이것은 첫 번째 기사는 주로 자바 스크립트 전문가가 아닌 자바 개발자를 대상으로 세 부분으로 시리즈지만, 서버측 프레임 워크 (예 : JavaServer 페이지, Struts, 또는 봄 등)와 함께 웹 애플 리케이션을 개발하고 있습니다. 본 할부에서는 자바 스크립트 초보자가 설치 및 설계 YUI를 사용하는 방법을 볼 것이며, 객체 지향 자바 스크립트 프로그래밍에 대한 좋은 거래를 배울 수 있습니다. 자바 스크립트에서 이미 전문 개발자 내용은이 문서 시리즈는 YUI 라이브러리의 소개로 활동하고 있습니다. "
- 비디오 : 기독교 Heilmann있는 "제어 광을위한 YUI" : Ajaxian 팀은 기독교 Heilmann의 YUI 비디오에 이야기가이, 여기서 확인해 아래 또는 내장 플레이어 인치
-
터키 항공 사이트에서 YUI 자동 완성 및 일정 : Cagatay Civici가 쓴 대해 알려주십시오 터키 항공 사이트의 사용량 의 YUI 자동 완성 및 일정 의 예약 도구에서. 많은 여행 사이트는 년 동안이 조합을 사용했을, Southwest.com는 YUI 일정의 첫 구입자 중 하나 였고 현재 예약 사이트에서 캘린더의 원래 릴리스 중 하나를 사용하고 있습니다. 야후의 자신의 여행 사이트 의 또 다른 좋은 예입니다 어떻게 이러한 위젯은 함께 사용할 수 있습니다 - 그것이 구현되었습니다 의해 YUI ImageLoader 저자 매트 Mlinac. ( 원본 소스. ) - Caridy Patino Mayea : "YUI3 : 제어 키 스트로크 이벤트 (keyup, Keydown,의 키를)" : Caridy는 (인기의 저자 기포 라이브러리 YUI에 대한 확장) 새로운 블로그 YUI 3에 키 이벤트 처리에 게시했다 . ( 원본 소스. )
- YUI Components 용 Balsamiq의 모형 : 모형 블로그로 이동 몇 가지 YUI 구성 요소를 포함 Balsamiq 인터페이스를 사용하여 조롱 가지고 메뉴 및 버튼 , 달력 , 그리고 Carousels . ( 원본 소스. )
- YUI-EXT-MVC에 매트 Snider에서 더 많은 : 매트가 그의 YUI-EXT-MVC 프로젝트에서 작업을 계속했습니다 . 매트에 따르면, "컨트롤러 클래스 'AJAX 시스템을 사용의 장점은 단순화한다는 YUI 연결 관리자를 하고 개발자가 예상 응답의 유형을 보장 콜백을 미리 등록할 수 있습니다. 그것은에서 구할 수 http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js . 앞으로 제가 서버에서 JSON 및 HTML 데이터를 가져오기위한 명령 패턴 로직을 추가할 예정입니다. "
-
YQL 및 YUI와 폴 Tarjan의 지리적 익스플로러 : SearchMonkey 엔지니어 폴 Tarjan이 있다 YQL 지리적 검색 결과를 표시합니다 YUI TabView와 야후지도 아약스 API를 사용하여 재미있는 데모 . 인터페이스는 입력 장소 이름에 허용하고 큰 맥락 그리고 왜 이것이 흥미를 위해 그 장소, 그 지역의 형제 자매, 해당 위치의 조상 등 검색, 피사체에 PHP 발명 라스무스 Lerdorff의 블로그 게시물을 참조하십시오 . ( 원본 소스. ) - 멕 Smitley - "YUI 동적 종속성을로드" : 메그의 글을 (Meglog에서) : "제가 사용했던 YUI의 격자 및 LayoutManager를 지난 연말 이후 내 애플 리케이션의 인터페이스의 중추를 위해. 이는 가파른 학습 곡선되고 난 아직 실제로 자신에게 매우 초보자를 고려하고있어, 오직 이번주의 '동적 로딩'탭을 발견 Configurator YUI를 . 오히려 정적 필요한 YUI CSS와 자바 스크립트 리소스를 포함하여보다, 그것은 동적 부하에 그들을 가져올 YUILoader를 사용할 수 있습니다. 전 YUI - 전문가가 내 YUILoader-떠오른 생각에 감동하지 않을 것을 감사 드리며, 이러한 방식은 내 응용 프로그램의 JS 파일에 납작하게 엎드릴 유지 보수 문제를 감소하면서 도움이되었고 그래서 가치가 다른 noobs의 이익을 위해 언급이 있다고 생각합니다. " 체크 아웃 자세한 내용은 그 기사 .
- 슈가 CRM과 함께 회전 목마를 사용 : 로저 스미스는 슈가 CRM 개발자 블로그에 튜토리얼을 가지고 "활용하여 빠르고 간단한 ListView 사용자 정의 제공하는 회전 목마 위젯 에서 야후 UI (YUI) 라이브러리를 . 이 정의는 완전히 '행과 열을'야후 UI 회전식보기로 검색 결과보기에서 연락처 ListView의 모양과 느낌을 변경합니다. YUI 라이브러리는 슈가 CRM에 포함되어 있으며 우리가 핵심 응용 프로그램에서 사용하는 것 이상의 UI 기능의 톤을 제공합니다. "
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
Georgiann 퍼켓 : YUI / ASTRA 프로그램 관리자 (AdaLovelaceDay09)
8시 6분에서 2009년 3월 24일 에릭 Miraglia에 의해 오전 |에 개발 | 1 개의 덧글
[참고 :이 게시물에서 YUI 팀의 참여의 일부 에이다 난봉꾼 일 , 전세계 여성 기술자들의 축하.]
Georgiann 퍼켓은 (더 "조지"라고도 함) YUI와 제휴 프로젝트 (ASTRA 라이브러리 포함)을위한 프로그램 매니저 역할을한다. 여러 프로젝트로 구성된 복잡한 기술적인 프로그램의 프로그램 관리 소프트웨어 회사에서 가장 까다로운 작업 중 하나이며, 조지는 이상적으로 도전에 적합합니다. 그녀는 테이블에 빠르고 지능, 인내와 큰 데이터 스트림을 관리하는 규율, 그리고 성공적인 소프트웨어 프로그램이 지속되는 의해 프로세스의 깊은 뿌리를 이해를 제공합니다. 그녀의 배경도 여기 제공 - C / C + + 엔지니어링 베테랑으로서 그녀는 일하고 싶은 엔지니어의 경험을 직접적으로 공감합니다.
YUI 출시는 변화 수백, 어떤의 많은 전세계의 개발자들이 제안이나 기여하고 함께 출동한다. 2 년 전에 팀에 합류 이후, 조지는 그 모든 정보가 처리되는 방식을 혁신했다. 일단 예측, 더 나은 의사 소통, 그리고 전반적으로 더 나은 품질로 살았어요.
조지는 또한 야후에서 주요 내부 사업을 지원 YUI 팀을위한 훌륭한 리더십을 제공하고있다. 우리가 "큰 내기,"회사의 미래에 중요한 무언가로 내부 프로젝트를 지정할 때, 우리는 프로젝트의 프론트 엔드 엔지니어링 팀과 팀 위쪽 및 우리가 그들을 지원하기 위해 최선을 다하고 있는지 확인하십시오. 조지는 우리의 공동 작업자가 적시에, 잘 문서화된 빌드를 얻고 그들의 우선 순위는 정확하게 우리의 릴리스 계획에 반영되는 수 있도록,이 관계를 관리합니다. 다양한 프로젝트의 요구를 이해하고 우리의 성공적인 협력을 faciliate하는 능력을 갖는 것은 더 작은 도전이없는, 그리고 조지는 YUI과 ASTRA 엔지니어가 야후에 걸쳐 적절한 시간에 적절한 지원을 제공하는 것을 보장하기 위해 필요한 무거운 일들은 다했습니다.
리프팅을 히빙 나와서 말인데 .... 조지는 잘 YUI를위한 뛰어난 기술자와 지칠 줄 모르는 옹호로 야후에 알려져 있지만, 그녀는 그럼 누가 자주 야후의 직원 체육관 이들에게 알려져있어됩니다. 당신은 거기에 조지 네다섯 박 무료 가중치에 자신의 세계 기록 양식을 개선하기 위해 노력하고 일주일에 찾을 수 있습니다.
조지의 작품과 우수성에 대한 그녀의 일반적인 약속은 분명히 지난 몇 년 동안 그녀와 함께 일하는 우리 모두에게 영감을했습니다. 나는 그녀를 자극했다 누가 조지를 요청 및 기술 경력을 향해 경로를 그녀를 보냈습니다.
컴퓨터와 함께 첫 경험이 뭐죠?
저는 대학에서 미리 의대 트랙에 들어가기에 의도 였는데 난 대학 입시 교과 과정의 일환으로 제 학년 AP 미적분 과정을했다. 운 좋게도하는 것처럼, 교사는 고등학교 수준에서 프로그래밍을 가르치는 재판의 일환 두명의 애플 컴퓨터를위한 허가를 얻었습니다. 뿐만 아니라 우리가 났어 - 우리는 코드의 최소 금액과 함께 가장 강력한 기능을 수행하려고에서의 경쟁력 있어요. 내가 어셈블리 언어를 사용하는 브레드 보드에 프로그램 회로에있어 대학의 첫 번째 디지털 가전 코스 거래를 봉인.
당신이 영향을 모든 여성 과학 기술자의 역할 모델을 가지고 있었습니까?
내가 정말 좋아하는 여자가 감동과에서 좋은 거래를 배운 되었음이 함께 일해 왔던 두 여인이있다. Darragh Muldoon, 크리켓 소프트웨어의 공동 설립자가, 나의 경력의 가장 놀라운 모험의 시작 지금까지로 대학 나가길 고용. 그녀는 글 공학 아니었지만, 팀을 구축하고 회사를 성장 선도하는 기술 사람 그녀의 사람들이 기술에 대하여 그녀에게서 좋은 거래를 알게되었다. 제가 최대 모양과에서 배운 다른 여자는 애플의 시스템 소프트웨어 부문 디렉터 레벨로 이름값을 상승 쉴라 브래디였다. 그녀는 확실히 남성 엔지니어로 주로 구성된 팀을 이끌고 많은 경우에, 릴리즈를 운전하는 방법을 알았어요. 남성 또는 여성 - 그녀는 신뢰 수준, 능력, 및 엔지니어에 의해 평가받을 수있는 공격성을 전시.
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
제니 한 국 도넬리입니다 : YUI 전문가 (AdaLovelaceDay09)
년 | 8시 5분에서 2009년 3월 24일 에릭 Miraglia에 의해 오전 발달 | 3 개의 댓글
[참고 :이 게시물에서 YUI 팀의 참여의 일부 에이다 난봉꾼 일 , 전세계 여성 기술자들의 축하.]
제니 한 국 도넬리입니다 세 YUI 구성 요소의 저자이다 :
- DataTable의 제어 : YUI의 DataTable의는 표 형식 데이터에 대한 대화형 옵션 강력한 메뉴를 제공하고, 우리의 서명 UI 위젯 중 하나입니다.
- 자동 완성 제어 : 자동 완성 typeahead 제공은 텍스트 입력 영역, 여과와 콤보 박스 기능을 제안합니다.
- 유틸리티 데이터 원본 : DataTable의 자동 완성과 공유 차트 컨트롤 - HTML 테이블과 같은 서버측 데이터, 자바 스크립트 배열,와 DOM 구조를 포함하여 데이터 원본 것은, 위젯 및 데이터의 잠재적인 소스 사이의 통로 역할을합니다.
제니의 작품 때문에 그녀를 취한다 기술적 과제의 일환으로 우리를 영감 - 당신이 의심이 있으면 언젠가는 의미 사운드 기본 테이블을 사용하여 IE6에서 일할 XY 스크롤로 고정 헤더를 받고보십시오. 제니는 아무데도 YUI에서 가장 복잡한 HCI 과제의 일부를 촬영하고 그들이 거의 모든 환경에 맞게 설계되었습니다. 자바 스크립트 배열과 DOM 구조로 JSON과 XML에 플랫 파일에서 아무것도 작동하도록 다른 YUI 구성 요소를 가능하게 데이터 원본. 우리는 ecclectic와 소설적인 방법으로 이러한 모든 기능 등을 사용 YUI 포럼에서 수천명의 사람으로부터 들었습니다.
우리는 또한 조직의 리더십 제니에 영감을하고는 야후에서 그녀 시간에 나타났습니다. 현재, 그녀는 자신의 통찰력을 공유하는이 페이지로 야후 전역에서 기술적인 목소리를 데리고, YUIBlog의 수석 편집자입니다. 그녀는 또한 풍부한 weeklong 기술 컨퍼런스에서 함께 전세계에서 야후 엔지니어의 수백을 가져, 야후에서 우리의 연례 프론트 엔드 엔지니어링 회담을 주최했다. 그녀는 미국, 한국과 일본에서 엔지니어로 weeklong YUI 과정을 가르친 것, 그리고 그녀는 우리 엔지니어링 문화의 이러한 중요한 부분을 야후에서 해킹 당일 그룹의 핵심 멤버있었습니다.
그녀가 코딩이든, 쓰기, 가르치거나 선도 - 모든 것들의 현대적인 과학 기술자의 직무 측면입니다 - 제니 그녀의 지능, 헌신, 상상력과 재치있는 높은 막대를 설정합니다. 에이다도 자랑스러워하실거야.
[ 제니의 사진은 스티븐 우드 종류의 허가에 의해 사용]
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!
설문 조사 : 언제 아코디언하지 아코디언인가?
기독교 Crumlish하여 오후 9시 20분시 2009년 3월 23일 |에서 디자인 , 개발 | 6 개의 댓글
나는 "아코디언"모듈 (또는 이렇게 고려하고있다)를 사용하여 인터페이스를 설계하거나 지은 사람의 의견을 찾고 있어요. 당신은 내가 아코디언 모듈을위한 디자인 패턴을 위해 일해왔, 봐, 나는 통해 지역 사회에 열린 질문 소수 밖으로 던져 이 간략한 설문 조사를 . 제가 트위터 (에 다른 곳에서뿐만들을 수있을 꺼야 @ mediajunkie ) 및 웹 디자이너와 개발자들이 놀러 메일링리스트에서.
(이건 과학적 조사이 아니라는 걸 깨닫게. 내가 방금 토론에 광범위한 커뮤니티를 끌어들이는 대신 권위가로 보거나 야후의 지역 사회에 대한 전망을 부과하려는 관심이있어.)
요즘 어디 에나, 그것은 상호 작용 디자이너 및 웹 개발자들이 아코디언 위젯에 대해 얘기하고 아코디언 아코디언 만드는 지에 대해 토론하고있는 것. 이 분야에서 일하는 모든 사람이 용어를 (일부는 단순히 "쌓입니다 패널"또는 "접을 수있는 패널"을 참조할 수 있습니다) 들어 있지만, 대부분의 공정을 쉽게 요점을했다. 즉, 아코디언을 스트레칭하면 균일하게 모든 폴드를 열고 있다고 : 아이러니하게도, accordions로 설명한 UI 요소 중 누구도 실제 아코디언 (악기)의 실제 동작을 공유할 수 없습니다.
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.
공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!





