야후 블로그 사용자 인터페이스 (YUIBlog)

YUI : 개관 시간 목 9월 1일

년 | 10시 53분에서 2011년 8월 30일 루크 스미스에 의해 오전 개발 , 개관 시간 | 2 개의 댓글

YUI 로더와 씨앗 파일을 변경, 플러스 로더 팁 및 유용한 정보

일찍 돌아 7 월, DAV 유리 에 대한 기사 게시 로더와 씨앗 파일에 대한 변경 3.4.0에 있습니다. 이 포럼 및 # YUI 채널의 의견과 일부 다른 몇 가지 질문했다 freenode IRC는 , 그래서 대중 Q & A.에 대한 경적에 DAV를 얻고 싶어요

그 후, 우리는 로더 최상의 사례 및 팁 및 유용한 얘기 될거야 그래서,하지만, 전체 시간을 걸릴 것이라고 기대하지 마십시오. 시간에 따라, 내가 커버 싶습니다 몇 가지는 다음과 같습니다

• 로더가 아닌 YUI 파일을 가져올 수 있도록하는 방법
• 모듈 그룹 및 그들을 사용하는 많은 장점을 설정
• 호스팅 및 자신의 콤보 서비스를 가리키는
• 로더 파일을 찾는 위치를 각각 설정이 미치는 영향

이 로더에 대한 질문을 타는 경우, 공유하려는 마술이있다, 또는 아직 굉장 로더가 얼마나 실현하지 않은, 우리와 함께하시기 바랍니다!

시간 및 세부 정보

이번 주에 우리는 오디오를 포함한 어도비 연결에 완전히 세션을 호스트거야. 우리는 질문을 관리하거나 심층 토론 더 많은 연결이 오디오 지원 내장의 사용에 연결 채팅을 사용합니다.

우리의 온라인 상태가됩니다 개관 시간 룸 오전 10 시부터 태평양 서머 타임 오전 11시 목요일.

업데이트

녹음을 사용할 수 있습니다 우리의 유튜브 채널에 .

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

2011 오픈 소스 어워드에 대한 YUI를 지명!

제니 국 도넬리입니다에 의해 오후 4시 58분에 2011년 8월 23일 |에서 문집 | 4 개의 댓글

당신은 YUI를 (그리고 우리는 당신이 희망!) 사랑한다면, 잠시 시간을 내시어하시기 바랍니다 우리 지명 을위한 2011 오픈 소스 수상 Packt 게시 주최. 저희 빛나는 새 웹사이트를 가리 키도록해야합니다 http://yuilibrary.com !

추천 양식은 9월 9일을 통해 지금 열려 있습니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI 3.4.0과 새로운 YUILibrary.com을 발표

년 | 8시 54분에서 2011년 8월 18일 조지 퍼켓하여 오전 개발 | 19 코멘트

YUI 팀은 하나도 없다지만, 두 가지의 발표 오늘 공유할 수 있습니다. 첫째, 우리는 완전히 개정 시작했습니다 YUILibrary.com을 . 새로운 사이트는 모든 YUI 설명서, 청소기의 UI 및 강력한 새로운 아키텍처의 상단에보다 직관적인 조직 통합 대상을 제공 재작 성까지 지상이다. 둘러 시간이 좀 걸릴. 우리는 당신이 보는 것을 매우 행복하게 사실 거예요 바랍니다.

또한, YUI 3.4.0 지금은 CDN뿐만 아니라에서만 사용할 수 있습니다 다운로드 . 이 릴리스의 일부 하이라이트는 다음과 같습니다 :

• 응용 프로그램 프레임 워크 (베타) : YUI 3.4.0 라이언 그루브와 에릭 Ferraiuolo하여 애플 리케이션 프레임 워크의 데뷰. 애플 리케이션 프레임 워크가의 롤업입니다 컨트롤러 , 모델 , 모델리스트 , 그리고 보기 단일 페이지 자바 스크립트 애플 리케이션을 작성하기위한 간단한 MVC 스타일의 프레임 워크를 제공 구성 요소. 이러한 구성 요소는 URL 기반의 라우팅, 데이터 바인딩, 전체 클라이언트 - 서버 동기화와 간단한 비 대화형보기 풍부한 응용 프로그램에 아무것도 생성 별도로 또는 함께 사용할 수 있습니다.
• 캘린더 (베타) : 알렌 Rabinovich는 3.4.0 버전에서 위젯 YUI 3의 컬렉션에 일정이 추가되었습니다. 캘린더 월부터 월까지의 탐색, 하나 또는 여러 날짜 선택, 사용자 정의 서식 및 국제화를 제공하는 융통성있는 위젯입니다. 또한 중첩된 규칙 집합을 사용하는 필터링 날짜 소설 ​​접근법을 소개하고, 개발자들이 빠르고 쉽게 사용의 다양한 그것을 사용자 정의할 수있는 완벽한 템플릿을 기반 렌더링.
• 로더 : YUI 로더 성능 향상에 초점을 맞춘, DAV 유리로 3.4.0에 대한 중요한 업데이 트를 거쳐했다. 시드 파일은 로더 및 메타 데이터 요구 사항의 모든 페이지에 이미 있기 때문에 신속하게 모듈의 로딩하게 자사의 메타 데이터가 포함되어 있습니다. 롤업은 로더 설정에서 false로 시스템 및 allowRollup 기본에서 삭제되었습니다. 그 결과, YUI는 이제 단지 롤업의 일부로 포함된 추가 모듈보다는 지정된 모듈을로드합니다. 마지막으로, 빌드 디렉토리는 폭발되었으며 submodules은 의존성의 계산에 로더에 의해 실행 반복의 수를 줄이면 코어 시스템에서 제거되었습니다. 당신은 참조할 수 3.4.0에서 로더 변경에 대한 블로그 게시물 자세한 내용은.
• 그래픽 (베타) : 트립 다리는 YUI 3.4.0에서 그래픽 모듈을 소개합니다. 이 구성 요소는 다양한 포맷으로 작성하여 뇌졸중 특성을 가진 미리 정의된 모양과 자유 양식 다각형을 만들 수있는 자바 스크립트 API를 제공합니다. 브라우저 및 장치의 성능에 따라 그래픽 SVG, HTML, 캔버스, 또는 VML을 사용하여 도형을 렌더링합니다.
• 패널 (베타) 와 위젯 : YUI 인턴 Tilo Mitra는 패널의 재작 성하는 작업을 캘리포니아에서 다른 생산성 여름 보냈다. 그는 또한 위젯 - autohide 및 플러그인에서 확장 위젯 - 양상의 전환 및 WidgetButtons의 도입, 당신이 어떤의 머리글과 바닥글에 CSS - 스타일의 버튼을 배치 수있는 새로운 위젯 확장을 포함하여 위젯 몇 가지 향상된 기능을 만들었습니다 표준 모듈 지원을 구현 위젯.
• ScrollView : Tilo 또한 수직 페이징을 지원하고 즉각적인 목록 요소의 CSS classnames를 추가하는 scrollview 목록 플러그인을 포함 3.4.0에 대한 ScrollView를 강화하고 있습니다.

YUILibrary.com, YUI 개발자 및 디자이너, 제프 Coniff에 대한 설계를 제공하는 이외에 또한 3.4.0 릴리스에 대한 항목의 번호를 공헌했습니다. 개선 모바일 장치에 더 나은 모양과 유용성을위한 도구 중 일부의 디자인과 렌더링되었습니다. 그는 또한 새로운 예제 숫자의 생성에서 작동하는 예술적인 재능이다 걸었다 그래픽의 바이올린 예 : 복잡한 그리기.

YUI 3.4.0에서는 여러 구성 요소가 베타 버전에서 GA 상태에 앉혀 졌네 유틸리티 , TabView 및 YQL 쿼리 . 당신은 또한 역사 - 사용 중지 및 CSSGrids - 중지 이외에 도서관에서 Compat 구성 요소의 제거를 확인합니다.

우리는 YUI 3.4.0과 YUI 커뮤니티와 새로운 웹 사이트를 공유하는 매우 기쁘게 생각합니다. 당신은에있는 문서를 검토하여 YUI 3.4.0에 대한 자세한 내용을 배울 수 YUILibrary.com을 . 당신은 또한 확인할 수 있습니다 YUI 3.4.0에 대한 구성 요소 기록 파일에 명시된 모든 변경 사항의 요약 뿐만 아니라, YUI 3.4.0 개발시 해결 티켓의 전체 목록을 . 언제나처럼, 우리는 당신이 당신이 가진 것 제안 또는 저희 티켓 데이터베이스에서 발견 수도 결함을 파일을 부탁드립니다. YUI 3.4.0에 대한 피드백에 입력할 수있는 YUI 3 티켓 데이터베이스 . YUILibrary.com 티켓은에 입력할 수있는 YUILibrary 저장소 . 장면이 새로운 YUILibrary.com 창조 보라 뒤에 당신에 관심이있다면, 저희에게에 가입해야합니다 , 목요일 개관 시간 8월 18일 우리가 설계 및 구현에 대해 말씀 드릴 것입니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI : 개관 시간 목 8월 18일

루크 스미스에 의해 9시 49분의시 2011년 8월 15일 |에서 개발 , 개관 시간 | 10 코멘트

새로운 yuilibrary.com에 오신 것을 환영합니다!

3.4.0 릴리스 병렬에서 새롭고 향상된 YUILibrary.com의 사이트 라이브거야! 새로운 사이트가 통합되어 더 나은 조직, 그리고 신선한 모양을 가지고 있으며 느낌.

사이트에 대한 세부 정보 다가오는 게시물에 대한 봐요,하지만 가입 개관 시간 룸을 연결 하여 처음 볼 견학하려면이 목요일 아침 라이언 숲 이 현실을 만들어 다른 사람합니다. 우리는 사이트 디자인, 백엔드 설치, 미래의 계획, 지역 사회 기회에 대해 이야기하고, 우리는 새로운 API 문서 인터페이스를 포함하여, 한 시간 태워 수있는 모든 새로운 기능을 체크 아웃됩니다.

우리는 시작이 일을 준비하기 위해 꼬리를 작업했고 우리는 결국 yuilibrary.com에 미치는 가정을 만들어보고 행복해 수 없습니다. , 취임식을 축하 어서 피드백을 (좋고 나쁜)주고, 당신이 새로운 사이트는 당신과 더 YUI 커뮤니티를 위해 할 수있는 최선의 도움을 줄 수있는 방법을 배웁니다.

시간 및 세부 정보

이번 주, 우리는 회의 다리를 사용하지 않을거야. 대신, 우리는 오디오를 포함한 어도비 연결에 완전히 세션을 호스트거야. 우리는 질문을 관리하거나 심층 토론 더 많은 연결이 오디오 지원 내장의 사용에 연결 채팅을 사용합니다.

우리의 온라인 상태가됩니다 개관 시간 룸 오전 10 시부터 태평양 서머 타임 오전 11시 목요일.

업데이트 : 다운로드 가능한 동영상

고해상도는 IOS 친화적인 녹화가 다운로드할 수 있습니다 .

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

YUI : 개관 시간은 8 11 목

루크 스미스에 의해 오후 9시 47분에 2011년 8월 8일 |에서 개발 , 개관 시간 | 덧글 없음

직접 액세스 검색

우리는 이전에 따릅시다 검색에 대한 직접 게시 . 이 얘기를 검색 직통 가치에 대해 많이하지만 첫째, 접근을 얻는 경험이 바로 흥미롭고 중요한 모두이다. 빅터 Tsaran 과 Caridy Patiño는 구현 세부 정보를 검토, 프로젝트에 대한 이야기에 대한 호출에서 우리와 함께하며, 당신이 직접 또는 액세스 모범 사례를 검색 어떤 질문에도 대답할.

시간 및 세부 정보

우리는 이번 주에 형식을 변경됩니다. 우리는 어도비 연결에 완전히 세션을 호스트 노력하겠습니다. 로 다이얼 할 회의 다리가되지 않습니다. 오디오도 연결을 통해 것입니다. 우리는 질문을 관리할 수있는 연결 채팅을 사용합니다.

우리의 태평양 서머 타임 오전 11시 목요일 오전 10 시부터 정상적으로 온라인 상태가됩니다 방을 연결 개관 시간 .

업데이트 : 우리는 여전히 회의 브리지에있을 게요

아이러니의 뇌졸중에서는 연결 장님 참가자에 대한 좋은 접근하지 않는다는 것을 밝혀, 그래서 우리가 화면 공유 및 평소와 같이 오디오 컨퍼런스 브리지에 대한 연결을 사용됩니다. 연결 정보는 다음과 같습니다

1. (스카이 프가 아닌 미국 참가자 *에 대한 훌륭한 작품) 1-888-371-8922에 전화
2. 참석자 코드 47188953을 입력합니다 #
3. 화면 공유 세션에 참가 (이것은 그것을 처음 사용하는 경우 이것이 당신이 어도비 연결 플러그인을 설치하라는 메시지가 나타납니다)

# 2 업데이트 : 사용 가능한 녹음

여기의 이 개관 시간에 대한 다운로드 녹음 .

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

검색 직접 이용할 수 있도록

Caridy Patino로 9시 44분의시 2011년 8월 8일 |에서 접근성 , 개발 | 6 개의 댓글

몇 달 전 우리는 직접 검색의 첫 번째 베타 버전을 발표했다. 이 새로운 제품은 즉시 각 키스트 로크와 사용자에 대한 답변을 제공, 실시간 피드백의 개념을 탐구. 야후의 고객의 다양성을 감안할 때, 가능한 한 접근으로 검색 직접 만들어 싶었어요. 처음에는, 우리는이 제품은 YUI 3의 DNA에 구운 액세스와 자바 스크립트 라이브러리에 기초 것입니다 때문에 이것은 쉬운 작업이 될 것이라고 믿었다. 엔지니어로 나의 기대에 반대로,이 작업은 우리가 예상보다 더 어려울 것으로 밝혀졌다.

검색 직접 소개

검색 다이렉트는 YUI의 구성 요소 인프라를 사용하여 지상에서 구축 있지만, 가장 눈에 두드러진 인터페이스를 기반으로 YUI 자동 완성 위젯 박스에서 바로 나가는 많은 접근성 기능이 포함되어 있습니다. 특정 검색어와 관련된 제안이 자동 완성 구현에 표시됩니다. 검색도 직접 제안 관련 콘텐츠가 표시됩니다 콘텐츠 패널, 일명 풍부한 패널을 제공합니다. 풍부한 패널의 의도는 자동 완성 목록에서 제안이 선택되어 사용자에게 직접적인 답변을 제공하는 것입니다.

제안의 새로운 세트가 모든 키 입력에있는 목록에 표시되며, 첫 번째 제안은 기본적으로 선택되어 있습니다. 이 기본 선택은 부드러운 선택이라고합니다. 제안 목록 부드러운 선택 및 이후 상호 작용이 풍부한 패널에 표시되는 내용을 따른다. 현실에서는 상황이 조금 더 복잡 (성능 최적화, 추가 캐시 레이어 등) 있지만, 단순 위해 우리는 이것이 일반적인 흐름이라고 가정 수 있습니다.

접근성 기능

검색 직접 접근하기위한 탐구에서 우리는 검색 도우미의 구현, 야후가 다시 몇 년을 개척하는 기술뿐만 아니라 YUI의 기본 접근성 기능을 바라 보았다.

이 조사 후, 세 가지 기본 접근성 기능은 검색을위한 직접 제안했다 :

• 사용 YUI의 국제화 유틸리티를 화된 콘텐츠를 제공합니다.
• 설정 role 과 aria-* 식별하고 스크린 리더에 의해 처리하는 데 필요한 자동 완성 위젯 내의 요소에 속성을.
• 숨겨진 사용하여 div 라이브 지역 (대표 aria-live 일이 발생했을 때 사용자에게 알려주을). 예를 들어, 사용 가능한 제안의 수, 선택한 제안 등

계획은 검색 인터페이스에서 직접 변경 사항을 사용자에게 알려주는, 다음과 같은 시각적인 구성 요소를 탐색 키보드 단축키 세트를 제공하는 것이었다 :

• 검색
• 버튼을 제출
• 제안 목록
• 서식 패널

바로 바람 것 같은데? 그럼, 뒤로 물러서서 자신을 되돌아 보자.

문제

해당 답변을 가져오기위한 제안 설정하고 다른 하나를 업데이 트 둘 중 하나 - - 우리가 여기있는은 두 비동기 프로세스이며, 그들은 모두 정말 빠르네. 우리는 끝까지 250ms 끝나는 얘기를 하는거야. 인터페이스 같은 빠른 속도로 변화 유지하기 때문에 모든 트랙은 화면 판독기 사용자가 어려울 수 있습니다. 그것은 업데이 트가 실시간 방식으로 근처 비동기식으로 발생하는 경우 진도의 순서가 더 복잡해진다. 화면 판독기는 인터페이스에있는 모든 변화의 통지를 받고 있기 때문에, 결과 잡담은 어려운 일이 있었는지 이해하기 위해했습니다.

허용 솔루션 부족, 우리는 야후의 주민 접근성 전문가, 빅터 Tsaran (과 협력하기 시작 @ vick08 시도하고 더 나은와 같이).

우리는 빅터가 검색 직접 상호 작용을 본 처음, 그의 초점의 대부분이 대신 제안 목록의 풍부한 패널에 있던 나에게 즉시 분명했습니다. 우리가 "진리의 소스"로 목록을 볼로 이것은 나를 위해 놀라운했습니다. 우리는 목록의 모든 액세스 기능을 해제하는 일이 생겼을 때 우리의 세션 중 하나를하는 동안, 우리는 행운의 스트로크를했다. 즉시 목록으로 도입된 소음이 밖으로 잘렸는지로 검색 다이렉트는 빅터에게 이해하기 시작!

스크린 리더 사용자는 검색 직접 인식하는 방법

우리가 잘못된 문제를 해결하려고했던 것을 실현되면, 우리는 원래 사용자 스토리로 돌아 갔어요 "나는 형식으로 사용자로 내가 대답을 얻을 수 있습니다." 사용자에게 전체 답변을 얻는 것이 우선되었다. 문제를 재정의 후, 우리는 화면 판독기가 제안 목록을 통해 풍부한 패널 내용을 우선 구현에 대한 접근 노력을 집중.

예를 들어, 사용자가 유형하면 "miami wea" , 화면 리더는 그들에게 두 가지를 알려줍니다 :

• 10 제안.
• 날씨 마이애미, 플로리다. 오늘, 흩어져 낙뢰, 89 ° F 77 ° F. 내일, 절연 낙뢰, 90 ° F 74 ° F ...

그런 다음 다양한 패널 내용의 나머지 부분을 읽는 것입니다. 사용자는 앞에 모두 10 제안을 알 수있는 목록이 업데이 트를 매번 필요가 없습니다. 그들이 알고 싶은 경우, 정보는 키보드 탐색을 통해 쉽게 접근할 수 있습니다.

제안 목록의 경험에 가치를 추가되었는지 확인하기 위해, 우리는 풍부한 패널에서 첫 번째 문구가 밀접하게 대응하는 제안과 관련되어 있는지 확인합니다. 예를 들어, 이전 예제를 기반으로, "weather miami" '마이애미 날씨 "제안에 대한 풍부한 패널에서 첫 번째 문구입니다.

빅터 Tsaran는 야후 접근성 연구소의 그것은 NVDA 스크린 리더와 파이어 폭스에서 작동하는 방법을 보여줍니다 :

우리가 지금은 다음 두 가지 시각적 구성 요소에 초점을 맞추고 이후의 응용 프로그램에 대한 화면 판독기 경험에 따라 쉽습니다 :

• 검색
• 서식 패널

전체 자동 완성 목록의 변경은 더 이상 추적하지 않습니다, 그리고 사용자가 항상 현재 쿼리에 대한 입력에 충돌하거나 키보드 단축키를 사용할 수 있기 때문에 제출 버튼이 무시됩니다 (tilda 액세스 키 : [control, alt or shift] + ~ )를 입력 요소와 풍부한 패널 사이를 전환할 수 있습니다. 검색이 화면 판독기에 의해 인정하면 이러한 키보드 탐색 옵션은 사용자에게 공개하고 있습니다.

엔지니어링 관점에서,이 변화는 크게 것들을 단순화. 가장 활성화된 구성 요소에서 DOM 조작의 금액은 크게 직접 검색의 전반적인 성능을 향상 감소했다. 여기 구현의 예입니다 :

 기능 SDAAria () {
     var에 노드 = this._liveRegion = Y.Node.create ( '<div role="status" class="off-screen" aria-live="assertive"> </ 사업부>');
     / / ARIA 사는 지역 만들기 ...
     . Y.one ( '몸') 추가 (노드);
     / / ARIA를위한 듣기 : 라이브 메시지가 사는 지역을 업데이 트하려면
     this.on ( 'ARIA : 라이브'this._handlerMsg이);
     / / 소문에 대한 청취 : 리프레이 얼마나 많은 제안을 발표
     this.on ( '잡담 : 새로 고침'this._handleGossipRefresh이);
 }
 SDAAria.ATTRS = {
      문자열 : {
          valueFn : 함수 () {
              Y.Intl.get를 ( 'SD - 아리아') 반환;
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay : 기능 (stringId, 잠수정) {
         var에 메시지 = this.get ( '문자열.'+ stringId) | | '';
         this._liveRegion.setContent (잠수정 Y.Lang.sub (메시지, 잠수정) : 메시지);
     }
     _handlerMsg : 함수 (E) {
         경우 (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     }
     _handleGossipRefresh : 함수 () {
         var에 크기 = this.get ( '제안') 크기 ().;
         this._ariaSay ((크기> 0 '제안': 'NO_SUGGESTIONS') {
             N : 크기
         });
     }
 };

배운 교훈

접근 인터페이스를 만들 때, 그것은 바로 질문을하는 것이 중요합니다. 응용 프로그램에 액세스할의 모든 비트를 만드는 것은 올바른 접근하지 않을 수 있습니다.

스크린 리더 사용자의 요청 조기 피드백 - 당신이 어떤 사용자의 피드백을 얻을 때까지 기지가 적용 있다고 가정하지 않습니다. 귀하의 처분에 모든 도구와 기능을 활용하면 의도된 효과가 없을 수 있습니다.

스크린 리더 사용자는 스크린 리더는 알림과 충돌하게되고 특히, 실시간으로 업데이 트를 추적하는 데 어려움이있을 수 있습니다. 이러한 시나리오에서, 적은 더 수 있습니다. 식별 및 화면 판독기에 대한 응용 프로그램의 원시 경험을 복제하는 대신 사용자의 중요한 무엇에 중점을두고 있습니다.

Caridy Patiño, 야후 검색에 대한 직접 교장 프론트 엔드 : 저자에 관하여. 그는 오랜 YUI의 기여자와 크리에이터 버블링 라이브러리 YUI 확장의뿐만 아니라 YUIBlog.com에서 게스트 블로거가 자신의 광범위한 경험을 구축 고성능 웹 응용 프로그램의 일부를 공유하고 있습니다. 로딩 전략, 이벤트 중심의 아키텍처와 SSJS는 Caridy 요즘은 대부분의 시간을 보낸다 과목의 일부입니다.

: 대화 찾기 bloglines | 테크노를

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!