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

CSS 빠른 팁 : IE6에서 "부동 드롭"을 방지하는 방법

10 월 28 일 티에리 Koblentz로 1시 52분의시 2010 |에서 CSS 101 , 개발 | 4 개의 댓글

이 동작은 종종 "라고하더라도 부동 드롭 "또는"드롭 플로트 '부동하실 필요가 없습니다 ... 그것은 단지 그것에 할당된 공간보다 더 넓은되어야 방울 열을. 이 사양에 의해이며 브라우저에서 일반적인 행동주의, 열에 "너무 넓은"면, 그때 그것은 드롭됩니다.

무엇이 IE 6 스탠드를하게하면이 브라우저가 완벽하게 지원하지 않는다는 것입니다 width (이나 속성을 height 그 문제). 따라서, 그것은 용기가 콘텐츠를 수용할 수 있도록 성장 수 있습니다. 상자는 설계 공간에 맞지 않을 수 없기 때문에 그것은 드롭을 만들어 이러한 성장이다.

일반적으로, 범인 (예 : 이미지, URL이 등) 포장되지 않는 요소지만, 글꼴 스타일 (예, IE와 기울임꼴 )도 책임이있을 수 있습니다.

예를 들어, 오른쪽 열에서 드롭하기 위해 YUIBlog IE 6을, 내가 할 일은이 210 픽셀보다 큰 폭 오른쪽 레일에있는 이미지 중 하나 스타일입니다. 그 이미지 세력 IE 6 다음 더 이상 왼쪽 열의 옆에도 못 들어가 오른쪽 열의 너비를 늘릴 수 있습니다.

일반적인 수정 :

word-wrap: break-word;: 상자의 오른쪽 가장자리에 위반하여 문자열 랩.
wbr 과 wbr:after {content:"\00200B"} 오페라: wbr 요소는 줄바꿈 기회를 나타냅니다. 삽입 wbr 의 내부에 긴 문자열 것이 필요한 경우 브라우저에서 줄 바꿈을 추가할 수 있습니다.
overflow-x:hidden;: 컨테이너보다 폭넓은 콘텐츠 차단 말했다 상자의 오른쪽 가장자리에 있습니다.

두 첫번째 해결책은 문자열에 대한 작업과 상자를 확장에서 이미지 등을 방지하지 않습니다.

알려진 수정 짧은 실패하면

몇 주 전에 저는 야후 금융 페이지 중 하나에 "부동 드롭"을 수정하도록 요청했다. 현대적인 브라우저에서 긴 문자열했습니다 오른쪽 레일 바깥으로 튀어나와있는 (스크린샷)하지만, IE 6에 동일한 문자열은 오른쪽 열에서 드롭 만든 배 이하 (스크린샷)을. 불행하게도, 그 내용 있도록 마크업이 옵션이 아니라 편집, 공급자로부터 왔어요.

때문에 기호의 쉼표로 구분된 목록어진 문자열의 성격, 위의 수정 만족되지 않았습니다. 임의의 장소에 목록을 깨는 것은 그것을 잘라보다했지만, 아직 안 가능한 솔루션 ...

IE 6은 큰 애들처럼 행동 만들기

부정적인 오른쪽 여백 (플러스와 함께 상자 스타일에있다 밖으로 IE 6를 만들기 위해 그 트릭은 모든 최신 브라우저처럼 행동 position:relative ).

데모 라이브

수정없이

스크린샷 IE 6에서이 페이지를 볼 수없는 사람들을 위해.

Lorem ipsum 슬픔 앉아 amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh AC rhoncus의 ultrices, turpis mauris mattis 음주 운전, quis pharetra odio orci 이력서 risus. Nunc ultricies gravida facilisis.

Curabitur luctus, quis orci 이력서 risus.

수정과 함께

Curabitur luctus, quis orci 이력서 risus.

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; }

음수 마진은 오랫동안이 값이 할당된 너비와 확장된 상자의 실제 너비 사이의 델타보다 큰 같은 값이 될 수 있습니다. 그것은 드롭 플로트을 방지 것을 선언합니다. 의 목적 position:relative IE가 부모 컨테이너의 경계 밖의 내용을 표시하는 것입니다.

나는 전반적으로 같은 스타일 요소를 좋아 하니까, 나는 일반적으로이 규칙은 샌드 박스하지 않습니다.

고려해야 할 것들

이 해킹은 이곳에 칼럼을 유지하지만, 그것은 넓어지고로부터 용기를 방지하지 않습니다. 그들이 밖 래퍼의 그려진 것입니다 때문에 이것은 배경이나 테두리 스타일 요소 수 없습니다 것을 의미합니다. 여기서 뭐하는 배경과 IE 6에서이 기술을 함께 적용하면 같은 테두리 모양의 스크린샷은 다음과 같습니다

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

jQuery 및 YUI 3 : 두 개의 자바 스크립트 라이브러리의 이야기

10 월 27 일 마크 Rall에 의해 오후 2시 8분에 2010 |에서 개발 , YUI 구현이 | 5 코멘트

최근 내가 처음 자바 스크립트 프런트 엔드 응용 프로그램을 구축할 수있는 기회를했다. 어떤 다음은 손으로에있는 직업에 적합하지 않습니다 도구를 사용하려고 할 때 약 와서 발견과 진화의 단편이다. 그것은 두 개의 매우 다른 도서관, jQuery 및 YUI 3을 사용하여 같은 프론트 엔드 응용 프로그램을 개발을 통해 얻은 학습의 계정입니다. 클라이언트와 프로젝트의 세부 사항은 의도적으로 생략되었습니다.

개요

이 프로젝트는 대규모의 콘텐츠 게시자에 대한 개방형 표준을 기반으로 한 대화형 응용 프로그램에 여러 개의 서로 다른 플래시 도구의 리팩토링을 참여. 높은 중요성, 응용 프로그램은 매우 작은 초기 도보 인쇄 인해 일일 페이지 노출의 많은 클라이언트가 수신과 최적화해야했습니다. 여러 단계의 첫 번째 개념의 초기 증명되고 함께 참여했다.

개념은 신청서 될 무엇 하나 볼의 개발 참여. 그것은 구성되어 :

어떤 프레임 워크의 동적 로딩 (예 : jQuery 또는 YUI 3)와 초기 응용 프로그램 파일에 대한 책임 초기 시드 파일 (<1킬로바이트).
jQuery 플러그인의 개발과 포함하는 폼 요소 스타일링 및 검증, 그리고 동적 차트 visualisations을 지원합니다.
사용자 입력, 구성 기본값 및 게시자의 사이트 내에서 응용 프로그램의 위치에 따라 UI의 생성 및 인구.
사용자의 입력에 따라 정보의 계산 및 프레 젠 테이션.

전체 공개의 이익에,이 시점에 내 자신의 경험까지이 작은 독립형 솔루션을 개발했다, 당신이 일반적으로 플러그인으로 표현할 수있는 유형입니다.하기 이들은 같은 이미지 carousels, 대화형지도와 트위터 / 플리커 위젯과 같은 역동적인 UI 구성 요소를 포함. 첫번째 JavaScript를 dabbling 당시, jQuery는 배우기 쉽습, 인기 나를 빨리 내가하고 있던 프로젝트에 필요한 기초를 데리러있었습니다. 그러나 이들은 모두 독립적인 단위로되었고 다른 코드와 함께 또는 큰 응용 프로그램의 일환으로 상호 작용을 할 필요가 없었다.

첫 시도

프로젝트의 첫 단계를 완료에, 내가 내가 사용했던 것보다 매우 다른 짐승을 다루는 것을 고통스럽게 분명했다. 코드 조직의 작은 경험을 가지고있는, 내 코드가 빠르게 분열증 비효율적 및 반복되었다. 그 결과, 어떤의 첫 번째 부분은 훨씬 더 큰 응용 프로그램이로드 속도가 느린되었습니다 될 것입니다. 사실 그것은 개념의 하나의 증거를 생성하는 팔초했다. 큰 변화가 필요하고 내가 좋아하는 작은 도서관 이용으로 간주가 있었을 때되었습니다 딘 에드워드의 기본 이나 존 Resig의 간단한 자바 스크립트 상속 jQuery에 클래스 기반 상속을 추가하는 패턴을, 내가 한 걸음 더 나아가 이동하기로 결정했다.

내가 원하는 것은 처음 OO 응용 프로그램을 개발하는 시간 완벽한 성숙한 프레임 워크되었습니다. 뭔가 효과적으로 프로세스를 통해 나를 안내합니다. 나는 다음과 같은 이유로 YUI 3 채택하기로 결정 사용할 수있는 라이브러리를 검토한 결과 :

속성 및 클래스 관리를 포함한 통합, 상속 기반 응용 프로그램 개발 지원.
장기 솔루션 :
- 표준 및 접근성 지원.
- 대규모 잘 알려진 조직, 야후에 의해 재정 지원
- 같은 존경받는 이름과 관련된 더글러스 Crockford , 니콜라스 Zakas 및 Stoyan Stefanov .
성능 최적화 :
- 단 7킬로바이트의 초기 씨앗 파일입니다.
- 요구에 게으른 - 로드된 모듈.
- CDN 배달.
다양하고 포괄적인 문서 :
릴리스 사이 성숙, 지속적인 진화.
의 통합 도구 YUI 압축기 , YUIDoc , YUI 빌더 , 그리고 콘솔 .
아니라 자바 스크립트, CSS도 프레임 워크.

두 가져가

통합 YUI 3 프로젝트에 몇 가지 직접 및 간접 혜택을 가져왔다 :

상속 기반 아키텍처 및 클래스를 통해 관리 속성 인터페이스와 기본 및 위젯 performant, 재사용 및 조직 코드를 생산하는 클래스.
모델과 사용하여 데이터의 프레 젠 테이션의 분리 위젯 사이트 내의 응용 프로그램의 위치에 따라 다른 견해를 (인라인 또는 오버레이) 렌더링하는 클래스를.
Sandboxing 및 동적 모듈 YUI.use ()를 통해 포함.
를 사용하여 크로스 브라우저 콘솔 디버깅 YUI 콘솔을 .
저장, 사용하는 성능 최적화 YUI 압축기를 이클립스 인치
기존 jQuery 플러그인을 쉽게 포함 및 통합.
저장, 사용하는 자동 코드 설명서에서 YUIDoc를 .

최종 결과는 행복한 클라이언트와 하위 초로드 시간 (이것은 개념의 초기 증거를로드 8 초 걸렸습니다 기억)과 완제품했다.

배우기 레슨

작업에 적합한 도구를 선택

이 게시물을 읽고 필자는 독자 안티 jQuery로 이것을 볼 것입니다 확신 해요. 전혀요. jQuery는 많은 혁신에 대한 책임 환상적인 프로젝트입니다. 그러나 모든 도구와 마찬가지로, 그것의 장점과 용도가 있습니다. 그 강도는 초보자를위한 항목에 장벽을 낮추고 경험 프로그래머의 효율성을 향상, 정규화 브라우저 일관성에있다. 프로젝트에서 나온 기본 학습은 모든 작업에 대해 하나 도구에 의존 수 없다는 것이었습니다. YUI가 jQuery도 잘 아키텍처 애플 리케이션 프레임 워크를 제공하여 제공할 수있는 것에 빌드. 그러나 그것은 비용을 줄일 수 있다고하는 것이 공평하다고, 다음 지점을 참조하십시오.

가파른 학습 곡선

제가 그랬듯이 익숙하지 않은 라이브러리와 함께 최초의 응용 프로그램을 작성 특히 당신은 인내심이 필요합니다. 그러나 귀결은 광대한 있습니다. 다른 라이브러리를 학습함으로써,뿐만 아니라 핵심 자바 스크립트 능력은 향상되며, 여러분은 어떻게 라이브러리 작업과 그들이 가지고 혜택 깊은 이해를 개발합니다. 저는 YUI 일상 생활에 대해 새로운 것을 배우려고하고 더 배우고, 더 나 YUI를 건물에 갔어요 생각과 깎아지른듯한 재능 경외에있어.

당신이 그것을 필요로 할 때 콘텐츠만로드

그것이 당신이 미리 필요할 수 있습니다 모든로드에 확실히 프로그래밍 방식으로 쉽게 반면, 성능 향상은 당신이 크다 필요한 게으른 로딩 내용의 직접적인 결과로 얻었다. 이것은 크게 응용 프로그램의 성능 개선을위한 핵심 요인 중 하나였습니다.

가능한 작은로 DOM과 상호 작용

이 시점은 사용되는 특정 라이브러리에 관련되지 않습니다. 필요한 DOM 요소를 캐싱보다 HTML 템플릿을 활용하여, UI 렌더링 시간이 상당히 떨어졌다. 노드는 노드 목록이 Y.all ()를 사용하여 캡처 수 있지만 Y.one ()를 사용하여 캐시 수 있습니다. 또한 () Y.Node.create 효율적으로 이전에 삽입하기 위해 DOM 요소에 HTML 대량의 텍스트 문자열을 변환에 매우 유용했다.

예를으로 자세히, CDN을 사용하여

YUI의 CDN 배달 라이브러리를 사용하여 우리는 CDN을 통해 모든 프로젝트의 자산을 제공하기로 결정했습니다. 이것은 아마도 성능 향상에 가장 큰 기여 요인 옆에되었습니다.

술집, 하위 와글와글함

저기 그 경험이 프로그래머를위한,이 비웃을하지보십시오. 과거에 플러그인보다 조금 더 작성하는 데 사용되고 있고, 응용 프로그램은 내부 의사 소통 방법을 전혀 몰랐어요. 심지어 읽은 후에 "사용자 지정 이벤트 페이지에 다른 구성 요소가 해당 이벤트에 가입하고 응답할 수 있도록 자신의 코드에서 가장 재미있는 순간이나 이벤트를 게시할 수 있도록,"난 아직 그것을보고 싶었어요.

알고 보니, YUI의 사용자 지정 이벤트는 게시 - 구독 및 모델 간 클래스와 객체 간 통신을 아름답게 작동합니다. 당신도 이벤트 전후에 가입하고 특정 조건에 따라 버블링을 억제하는 역동적인 논리를 포함할 수 있습니다.

귀하의 흐름에 최상의 통합

이클립스를 사용하여 우리는 빌드 과정에 JSLint와 YUI 압축기를 통합할 수있었습니다. 간단히 말하면, 당신는 Ctrl / Cmd를 + S를 누를 때마다는 자바 스크립트 코드 검증 및 최적화되었습니다. 그게 당신이 코드의 첫번째 라인에서 최적화된 생산 코드에 대한 테스트 학년 뜻입니다. 그것은 또한 배달 마감일에 혈안이 마지막 경주에 최적화하는 것을 잊지 않을 것을 의미합니다.

작업에 YUI 학습

모두가 다른 학습 스타일을 가지고 있지만, 나는 내가 마음에 특정 목적으로 YUI를 배울하던 자원 여러분게.

도서관의 일반적인 개요를하거나 특정 모듈을 배울 수있는 관련 YUI 극장 에피소드를보세요. 나는 매우부터 시작하는 것이 좋습니다 수 있습니다 :
에서 YUI에 읽기 야후! 개발자 네트워크 . 제가 다시 읽어 때마다 매주 조금 읽고 자세한 내용을보십시오.
읽기 의 API 설명서를 참조. 당신은 YUI 극장이나 개발자 네트워크에서 찾을 수없는 경우, API에 파다. 그것도 직접 코드를 읽어 지불합니다.
질문을 읽고 게시 YUILibrary.com에 대한 포럼 .
많은 플레이를 즐기세요!

결론

YUI 3 대형 작은 프로젝트에 적합한 완벽한 기능을 갖춘 성숙하고 끊임없이 변화하는 라이브러리입니다. 프런트 엔드 웹 애플 리케이션이보다 복잡하게, YUI와 같은 라이브러리에 대한 필요성이 증가합니다. uninitiated 위해 당신이 함께 붙어 있으면 당신이 보상되며, 처음에는 어려운 경험이 될 수 있지만.

저자 소개 : 마크에서 선임 프런트 엔드 개발자는 VI , 디자인 방향과 1981 년 설립된 멀티 징계 통신 기관. 오늘 기관은 B2C와 B2B 고객의 광범위한 측정 결과를 제공하는 디지털 직접 디자인 분야에서 그 작업을 융합.

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

YUIConf 2010 아웃 홍보, 2 특별 이브닝 이벤트 발표

2010년 10월 26일 오후 3시 35분에서 제니 국 도넬리입니다으로 |에서 개발 , YUI 이벤트 | 코멘트 끄기

YUIConf 2010이 매진! 등록된 모두에게 감사합니다 - 우리는 11 월에 여러분 모두를 볼 수 있도록 최선을 다하겠습니다. 우리는 지금 우리의 일정에 따라 최종 접촉을 가하고 있지만, 여기서 우리가 가게에서 할 수 있는게 뭔지 들여다 봐도 돼요 : http://yuilibrary.com/yuiconf2010/schedule.php을 .

주요 특징은 다음과 같습니다 :

당신은 서버 사이드 자바 스크립트에서 일어나는 모든 흥미로운 것들에 대한 진입로 수있는 Node.js 트랙. 우리는 Node.js 작가 라이언 달이 발표 및 프론트 엔드 엔지니어링의 미래에 대한 패널에 앉아 있고, 우리는 YUI의 DAV 유리, 도서관 구성 요소 (YUI에서 - 더 - 선반 오프를 사용하여 노드 기반의 진보적인 향상을 보여주 가장 먼저 중 하나가 3) 미래가 어떻게 생겼는지 보여주는.
에 대한 속도로 일어날 YQL 추적 방법을 인터넷에 어디에서 데이터를 액세스하는 YQL을 활용합니다. YQL 팀 자체가 자신의 최신 작품에 대해 알려 손에 것입니다.
실제 프로젝트는 생산 환경을 요구에서 YUI를 구현하는 방법을 노출 사례 연구. 플리 커와 야후 메일에서 엔지니어 손에되며, 에릭 Ferraiuolo - 그의 최근 작품 PayPalX의 상금을 수상자는 - 얘기를하려고 여기에 온 것입니다 팁 웹 , 그의 최신 YUI 3을 기반으로 프로젝트를.
모바일 / 터치 경험을 제공하는 방법에 대한 통찰력 프레 젠 테이션.
자동 완성에서 갤러리 공헌에 CSS의 격자로 YUI 모듈에서 깊은 잠수.

모든 세션에 비디오 및 사용할 수 보관된 수 YUI 극장 곧 회의 후.

우리는 일반에게 공개됩니다 특별한 저녁 행사를 개최하기 위해 야후 개발자 네트워크와 세력에 합류하게 된 것을 기쁘게 생각합니다. 회의가 이미 매진 있지만 그렇게하면 누구나 Meetup.com에 가입하여 저녁 행사에 참석하실 수 있습니다. 공간이 제한되어 있으므로 빨리 가입! (YUIConf 참가자들은 가입하실 필요가 없습니다.)

YUIConf 2010 패널 토론 : "웹 개발의 미래"벤 갈브레이스와 디온 Almaer에 의해 검토
2010년 11월 8일, 6시 반부터 오후 8시까지

에서 패널 토론에 참석 가입 http://www.meetup.com/BayJax/calendar/15239592/을 .

YUIConf는 큰 변화의 시점에 학문의 가까운 미래를 개척이 저명한 패널을 함께 가져왔습니다. 더글러스 Crockford, 야후에서 자바 스크립트 건축가,, Tantek Çelik, 공학 및 저자, 라이언 달, Node.js의 창조자, 페이스 북의 조 휴이트, 대해 Firebug의 작성자와 하나 예약된 패널 일레인 웨리, Meebo의 설립자이자 프론트 엔드 건축을 포함 모든 시간 (IOS에 대해 페이스 북이) 대부분의 다운로드 모바일 응용 프로그램, 토마스 샤, 야후의 YUI의 설립자.

YUIConf 2010 기조 연설 : 더글러스 Crockford의 "프로젝트 미래"
2010년 11월 10일, 6시 반부터 오후 8시까지

에서 기조 강연에 참석 가입 http://www.meetup.com/BayJax/calendar/15239717/을 .

소프트웨어 개발에서, 우리는 건축에 대한 꿈. 이것은 이러한 꿈의 실화입니다.

좌석 이러한 특별 행사에 대한 제한이기 때문에 빨리 가입해야합니다!

CC 사진 :

디온 Almaer : http://www.flickr.com/photos/seanosh/3306058997/
Tantek Çelik : http://www.flickr.com/photos/thomashawk/409672754/
라이언 달 : http://www.flickr.com/photos/blank22763/4089950858/
일레인 웨리 : http://www.flickr.com/photos/drewm/3016944830/
벤 갈브레이스 : http://www.flickr.com/photos/seanosh/3306056383/

종류의 허가에 의해 사용 사진 :

더글러스 Crockford : http://www.flickr.com/photos/allenr/4482834276/
더글러스 Crockford : http://www.flickr.com/photos/allenr/4341338168/

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

YUI 2.8.2 발표 - YUI 2.4.0-2.8.1의 모든 사용자를위한 중요 보안 업데이트

년 | 11시 34분에서 2010년 10월 25일 에릭 Miraglia에 의해 오전 개발 | 6 개의 댓글

YUI 팀은 2.8.2 오늘 YUI를 발표했다. 이 릴리스 수정 보안 관련 결함 YUI 2.4.0 릴리스와 함께 YUI 2 플래시 구성 요소 인프라 태초에 도입되었습니다. 이 결함은 자바 스크립트 인젝션 공격은 호스트 YUI 영향을 해당 도메인에 대해 만들 수 있습니다 .swf 파일을 것이. 영향을받는 파일을 식별하고 교체하는 방법에 대한 자세한 사항은 YUI 2.8.2에 대한 보안 공지를 참조하십시오 .

귀하의 사이트가 이러한 파일을 포함 버전 2.4.0과 2.8.1 사이 YUI 두 배포판을 호스트하는 경우, 그것은이 취약점에 의해 영향을받습니다.

야후의 CDN (에서 귀하의 사이트가로드 YUI 2면 yui.yahooapis.com ) 또는 Google의 CDN (에서 ajax.googleapis.com ) 및 파일이 귀하의 도메인에서 호스팅되지 않은, 당신은 영향을받지 않습니다. YUI 3이 문제의 영향을받지 않습니다.

당신은에서 YUI 2.8.2 (그리고 YUI 2.4.0-2.8.1의 패치 버전)을 다운로드 할 수 있습니다 YUILibrary.com 다운로드 페이지 .

참고 보안 공지 문제를 해결하는 방법을 귀하의 사이트가 영향 여부를 확인하는 방법과 수정을 확인하는 방법에 대한 자세한 내용은합니다.

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

YUI 3 갤러리 : SVG의 와우 위해 만든 SVG에 대한 확장!

년 | 11시 18분에서 2010년 10월 18일 빈센트 하디에 의해 오전 개발 , YUI 3 갤러리 | 2 개의 댓글

소개

SVG ( 확장 가능한 벡터 그래픽 도형, 이미지 및 텍스트 :) 인터랙티브, 애니메이션 2D 그래픽을위한 선언적 구문을 제공합니다. SVG 지원은 의 일부 HTML 5 명세와 SVG는 MS의 인터넷 익스플로러를 포함한 모든 주요 브라우저에 의해 구현된 버전 9 .

SVG - wow.org 오늘날 SVG와 함께 할 수있는 웹 사이트 보여줍니다. 이 웹 사이트에서 데모가를 위해 만들어진 SVG 오픈 컨퍼런스, SVG의 와우! 세션은 몇 년 동안 전통되었습니다. SVG의 와우! 세션은 다음 자신과 공동으로, 딘 잭슨에 의해 시작했고 그때까지 계속되었다 에릭 Dahlstrom . 에릭과 나는에 대한 세션에 collorated가 2009 과 2010 회의의 버전.

지난 2 년 동안, 데모 점점 HTML을 SVG 자신의 기능을 적용하는 대신 (또는 이외에), AJAX 프레임 워크를 사용했습니다. YUI가 모두 사용하는 웹 사이트에서 가장 널리 사용되는 프레임 워크입니다 YUI 2 와 YUI 3 .

나는 빠른 SVG 개요로 시작하고 데모의 종류를 다루겠습니다 것을 YUI 지원과 제가 YUI 세 갤러리에 추가한 확장 기능 은 SVG와 함께 작동하도록합니다. (이러한 확장은 이제의 조건에 따라 사용하는 무료 YUI의 BSD 라이센스 ).

SVG 개요

HTML과 마찬가지로, SVG는 W3C 사양입니다. 그것은 기본 도형 (사각형, 원, 선, 다각형, 타원, 폴리 라인), 임의의 모양 (이차 선, 또는 입방 차원 곡선 수있는 경로 세그먼트의 관점에서 설명), 텍스트와 이미지를 설명하기위한 구문을 제공합니다.

다음 이미지는의 화면 캡처입니다 SVG - wow.org에 대체 스타일 시트 예제 놀이에 몇 가지 SVG 기능을 보여줍니다 : 풍부한 렌더링 (그림자 효과, 그라디언트, 패턴)와 간단하고 복잡한 모양을.

SVG 이미지가 도형 및 렌더링 속성의 관점에서 정의되기 때문에, 그것은 모든 해상도에서 그들을 렌더링 할 수 있습니다. 높은 렌더링 품질을 유지하면서 (더 이상 계단 가장자리) 인쇄할 때 결과적으로, SVG 이미지는 예를 들어, 어떤 크기로 확장할 수 있습니다.

보기 기능을 확대한 다음은 이전에 표시하지만, 높은 품질을 유지하면서 높은 해상도로 렌더링 같은 SVG 이미지를 보여줍니다.

그냥 HTML, SVG 지원 상호 작용과 같은 : 그것은 마우스 또는 키보드 상호 작용에 대한 그래픽 객체에 이벤트 리스너를 추가할 수 있습니다. 물론, SVG는 쉽게 이러한 자신의 도형이나 렌더링 스타일로 그래픽 개체의 다양한 속성을 조작하기 위해 만드는 문서 개체 모델을 지원합니다.

SVG 사양을 많이있다 : 고급 렌더링 스타일 (작성, 패턴, 그라디언트를 쓰다듬어), 필터 효과 (흐리게, 그림자, 색상 매트릭스), CSS 스타일링, 고급 텍스트 기능 (예 : 경로에 텍스트와 같은)와 선언적 애니메이션 . 당신은 SVG 포맷 기능에 대한 자세한 내용을 보려면 해당 게시물의 끝에있는 참조를 확인할 수 있습니다.

SVG와 HTML

함께 HTML5 , SVG는 더 ADO없이 HTML 문서 안에 인라인 수 있습니다. 브라우저는 해당 기능 (예, 지원하기 시작 파이어 폭스 4 ). 당분간 모든 주요 브라우저 SVG가 동일한 기능을 제공 XHTML에서 인라인 지원합니다. XHTML에서 SVG 그냥 네임 스페이스가 제대로 선언이 필요합니다.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <HEAD>
         ....
     </ HEAD>
     <BODY>
         <h1> 인라인 SVG </ H1>

         <SVG xmlns = "http://www.w3.org/2000/svg"버전 = "1.1"
          xmlns : xlink = "http://www.w3.org/1999/xlink"
          너비 = "100 %"높이 = "100 %"id = "을 backgroundSVG">
             <- 여기서 SVG 컨텐츠 ->
         </ SVG>
     </ BODY>
 </ HTML>

모든 코드 샘플 이 페이지는 XHTML에서 SVG를 인라 이닝이 방법을 사용합니다.

SVG와 YUI

SVG는 선언적 애니메이션을 지원합니다. 예를 들어, 당신은의 반지름 애니메이션 수 <circle> 같은 요소를 :

 cx="50" cy="100" r="40">을 <circle
     attributeName="r" values="40,60,20,40" dur="1.5s"을 <animate />
 </ 써클>

<animate> 태그로부터 차용되었으며 SMIL 사양, 그리고 다른 애니메이션 요소와 함께, 그것은 SVG에 대한 매우 강력한 애니메이션 엔진을 제공합니다.

불행하게도, 최근까지, SVG 애니메이션에 대한 브라우저 지원 스파스되었습니다. 그것은 지난 2 년 동안 개선이 있지만 MS는 그것이 분명하게있다 가 IE 9 선언적 SVG 애니메이션을 지원하지 않습니다.

그 결과, SVG - wow.org 웹 사이트에서 데모의 대부분은 스크립트 대신 선언적 애니메이션 애니메이션을 사용합니다. 선언적 애니메이션 스크립트 애니메이션보다 더 효율적이기 때문에 한편으로, 이것은 불행한 것입니다. 의혹에서 스크립트 애니메이션은 매우 유연 수 있으며, 그들은 매우 잘 구현에 걸쳐 작동합니다.

좋은 스크립트 애니메이션 솔루션에 대한 필요성에 YUI의 사용을 몰고 무엇인가 SVG - 와우 데모. 그러나, 데모는 특히에서 다른 YUI 기능을 사용 로더 및 노드 모듈.

YUI와 SVG를 애니메이션

에 데모 SVG - 와우는 만들 YUI를 사용하여 탄성 드럼 비트 , 모핑 형상 또는 회전 텍스트와 형상 예를 들어 있습니다. SVG와 YUI를 사용하면 몇 가지 YUI 확장이 필요, 난 그저 한 순간에서 다음을 설명합니다.


회전 텍스트와 도형	모핑 모양

탄성 드럼은 뛰고

다음은 YUI는 단순히 애니메이션 및 SVG 그래픽을 조작하기 위해 유용하는 방법을 보여줍니다.

SVG 애니메이션 `transform` 특성을

모든 SVG 그래픽 요소가 transform 속성을 지정해야합니다. 그 속성은 2D 지정 affine 변환 , 스큐 규모 회전하거나 번역하는 데 사용할 수있는 요소에를.

SVG에 대한 SVG - wow.org YUI 확장 애니메이션 수 있도록 transform 이 같은 특성을 :

 var에 anim = 새로운 Y. 애니메이션 ({
     노드 : '# circleA'
     에서 : {
         변환 : {TX : 0, 타이 : 0, SX : 2, 싸이 : 2}
     }
     으로 : {
         변환 : {TX : 20, 타이 : 20, SX : 1, 싸이 : 1}
     }
     transformTemplate : "(# TX, # 타이) 번역 확장 (# SX, # SY)"
     기간 : 1
 });

참조 변환 애니메이션 테스트를.

당신은 변환 값이 "구성 요소"(같은 측면에서 정의됩니다 겁니다 tx 또는 ty 를 사용하여 값을 형태로 결합) transformTemplate 애니메이션 구성 개체에서 찾을 수 있습니다.

템플릿은 별도의 구성 요소가 쉽게 애니메이션 값을 계산하게하는 동안 변환 가치를 구축하기위한 융통성있는 메커니즘입니다. 이것은 YUI 애니메이션 모델은 SVG의 SMIL 애니메이션 요소 (보다 유연성 (더 표현 능력) 허용 예입니다 animateTransform .) 위에서 설명한 애니메이션을 만들려면 이에 상응하는 SMIL 선언했을 :

 ...>를 <circle
     <animateTransform attributeName = "변환"유형 = "번역"
                       = "20,20"두어 = "1s"시작 = "scaleAnim.begin"/>로 = "0,0"에서
     <animateTransform id = "을 scaleAnim"attributeName = "변환"유형 = "규모"
                       = "1,1"두어 = "1s"시작 = "무기한"/>로 = "2,2"에서
 </ 써클>

위의 미리보기가 여러 방법이 필요합니다 animateTransform 동기화해야 할 요소를 : begin 첫 번째 애니메이션의 속성으로 설정됩니다 scaleAnim.begin 두 애니메이션의 시작을 동기화할 수 있습니다. YUI의 애니메이션 엔진의 좋은 기능은 애니메이션의 타이밍 (즉, 시작, 끝 및 기간)은 여러 요소의 속성에 적용할 공유 될 수있다는 것이다.

SVG 변환을 애니메이션에 대한 YUI 확장 등처럼 광범위하게 사용되는 카메라 와 애니메이션 가사 예제. 후자는 YUI 2 확장명을 사용하면서 전자 YUI 3 확장명을 사용합니다.

기하학을 애니메이션

기본 도형

YUI와 SVG 지오메 트리를 애니메이션하는 것은 매우 간단합니다. 다음 예제 animates <rect> 요소의 폭, 높이와 모서리 반지름 :

 var에 anim = 새로운 Y. 애니메이션 ({
     노드 : '# rectA'
     에서 : {
         폭 : 200,
         높이 : 100,
         RX : 5,
         스피 : 5
     }
     으로 : {
         폭 : 300,
         높이 : 100,
         RX : 10,
         스피 : 10;
     }
     기간 : 2,
     완화 : Y.Easing.elasticOut
 });

참조 형상 애니메이션 테스트를.

나중에 말씀 드린대로, YUI 후드 아래에 몇 가지 변경 사항이이 작업을했습니다. 그러나 개발자의 관점에서,이 애니메이션은 다른 HTML 속성 또는 CSS 속성의 애니메이션과 같은 동일한 방식으로 작동합니다.

`<path>` 의 `d` 속성

하나의 기하학적 특성은 조금 특별 : d 에서 속성 <path> 요소입니다. <path> 요소는 임의로 복잡한 도형에 사용됩니다. <path> 어떤 모양을 설명하실 수 있습니다. 그 d 속성은 선, 자르크, 차 또는 입방 수있는 경로 세그먼트의 관점에서 자사의 지오메 트리를 설명하는 차원 곡선 (거기에 몇 가지 명령어가 있지만 차원 곡선에 대한 모든지도).

애니메이션 d 속성을하면 YUI의 애니메이션 엔진으로 확장 비트가 필요하지만, 확장자, d 아래 그림과 같이 속성은, 다른 애니메이션처럼 수 있습니다.

 var에 anim = 새로운 Y. 애니메이션 ({
     노드 : "# pathA"
     보낸 사람 : {D : "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     으로 : {D : "M 0 0 C 100 0 100 0 100 100 0 100 0 C 100 0 0 Z"},
     기간 1s,
     완화 : Y.Easing.bounceBack
 });

참조 경로 애니메이션 으로 다음과 같은 이미지로 표현 다른 것들 사이에 테스트하는가 보여주는, 시간이 지남에 십자가에 모핑 확인 표시.

간디 따옴표 데모는 애니메이션의 기법을 사용하여 d 간디의 수치로 morph 모양에 속성을 지정해야합니다.

다른 SVG 속성을 애니메이션

물론, YUI 애니메이션은 기하학적 특성에 국한되지 않습니다. 모든 SVG 속성은 애니메이션하실 수 있습니다. 수평 흐림 필터에 대한 예를 들어, 다음과 같은 애니메이션 animates은 흐림 반경.

 / / SVG 미리보기
 <필터 ..
     <feGaussianBlur id = "을 blurFilter"stdDeviation = "10 10"...  />
 </ 필터>

 / / 자바 스크립트 애니메이션
 var에 anim = 새로운 Y. 애니메이션 ({
     노드 : '# blurFilter'
     보낸 사람 : {stdDeviation : [0, 20]}
     으로 : {stdDeviation : [0, 0]}
 });

보기 필터 애니메이션 테스트를. 가우스 흐림은 버튼 상태 사이에서 전환하는 데 사용할 수있는 애니메이션 방법을 다음과 같은 이미지를 보여줍니다.

효과의이 유형은에서 사용되는 빠른 흐림 효과 그 데모 YUI 애니메이션지만 선언적 SMIL 애니메이션 요소를 (해당 기능을 지원하는 브라우저에서 실행의 비용으로, 앞서 설명)을 사용하지 않는 경우에도, 데모.

CSS 속성을 애니메이션

HTML과 마찬가지로, SVG 요소 속성 또한 CSS 속성이 있습니다. SVG 일부가 특정 CSS 속성을 . 이 속성은 때로는 놀라운 효과를 만들려면 애니메이션하실 수 있습니다. 예를 들어, stroke-dashoffset 속성은 도형을 그리는 시뮬레이션하는 데 사용할 수 있습니다.

 / / SVG 미리보기
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / 자바 스크립트
 var에 anim = 새로운 Y. 애니메이션 ({
     노드 : "# rectA"
     으로 : { '뇌졸중 - dashoffset': 0},
     기간 : 0.25
 });

참조 스트로크 애니메이션 테스트를.

graffitis의 데모는이 기술을 (비록 YUI 애니메이션없이) 사용하고 있으므로 않는 카메라 데모 (YUI 애니메이션이 시간).

YUI와 SVG : 후드

SVG - wow.org 웹 사이트 YUI YUI 2 세 모두를 사용하여 모두 SVG 특정 확장을하고 있습니다. 이 문서의 다음 섹션은 YUI 세 확장에 초점을 맞추고 있습니다.

확장이 필요했다 :

SVG의 DOM specificities와 YUI 작업을하다
구현 차이에 대한 계정
같은 SVG의 변환과 같은 새로운 속성 유형에 대한 지원을 추가
추가 애니메이션 타이밍 및 동기화 기능을 추가

SVG DOM의 Specificities에 대한 회계

앞에서 설명한 바와 같이, SVG 속성들은 다음과 같은 선언적 요소와 애니메이션 수 있습니다 <animate> . SVG의 애니메이션 모델을 지원하기 위해, SVG 속성값은 애니메이션과 기본 가치를 줄여야. 예를 들어, r 에서 속성 <circle> 요소입니다 SVGAnimatedLength 다음과 같이 정의 :

 인터페이스 SVGAnimatedLength {
   읽기 전용 SVGLength이 baseVal 속성;
   읽기 전용 SVGLength animVal을 속성;
 };

결과적으로, 심지어는 선언적 애니메이션을 지원하지 않는 구현, 우리는 아래로 연락해야 baseVal 속성의 값을 읽으려면

 var에 동그라미 = document.getElementById ( '# myCircle');
 var에 rValue = circle.getAttribute ( 'R') baseVal.value.;

확장 기능은 SVG 속성 '독특한 가치 모델에 대한 계정에 애니메이션 엔진을 수 있도록 필요했습니다. 다행히, YUI 3 애니메이션 동작의 개념이 있습니다. 행동은 본질적 속성을 특정 갈고리이며, 그것은 SVG 속성값을 처리하기 위해 지원을 추가하기 위해 매우 쉽게했다. 예를 들어, SVGAnimatedLength 특성은 이렇게 처리됩니다 :

 var에 lengthBehavior = {
     설정 기능 (anim, AT & T, 기간, 경과에에서, 재미) {
         / / SVG 구체적인 처리
     }

     얻을 기능 (anim, attr) {
         / / SVG 구체적인 처리
     }
 };

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending `Y.DOM`

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.

loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. 예를 들면 다음과 같습니다

myNode.loadContent({
    tag: 'g',
    fill: 'red',
    stroke: 'none',
    children: [{
        tag: "rect",
        x: 10,
        y: 10,
        width: 200,
        height: 300
    }, {
        tag: 'circle',
        r: 10,
        cx: 105,
        cy: 155
    }, {
        tag: 'image',
        'xlink:href': 'images/photo.png',
        width: 200,
        height: '300px'
    }, prevSibling);

is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
     });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
     } {다른
        firstAnim = anim;
     }
    previousAnim = anim;
 });

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
 });

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. 예를 들면 다음과 같습니다

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
 });

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
 });

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Conclusion

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

참조

SVG Wow!
SVG Specification
SVG Tutorial
Adobe's SVG Zone (a little dated, but still has good examples)
carto.net examples
KevLinDev

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

2010년 10월 15일에 대한 야생에서

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
You can find the full tutorial here . #
Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
“YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #

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

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

An Introduction to YQL
YQL + YUI: Building End-to-End Applications
Building YQL Open Data Tables with YQL Execute
Using (Not Abusing) YQL for Caching, Filtering and Collating Data
NodeJS + YUI 3
Using NodeJS and YUI 3 for Server or Browser Side View Rendering
Avoiding Spaghetti Code with Server-Side JavaScript
Understanding Progressive Enhancement with YUI: Write Less, Achieve More
Internationalizing Applications Using YUI 3
Editor: The Next Generation
AutoComplete: Deep Space Nine
The Journey from Idea to Functioning Widget in YUI 3
Finger Tips: Lessons Learned From Building a Touch-Based Experience
and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

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

다음 페이지»

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

일반적인 수정 :

알려진 수정 짧은 실패하면

IE 6은 큰 애들처럼 행동 만들기

데모 라이브

수정없이

수정과 함께

고려해야 할 것들

개요

첫 시도

두 가져가

배우기 레슨

작업에 YUI 학습

결론

YUIConf 2010 패널 토론 : "웹 개발의 미래"벤 갈브레이스와 디온 Almaer에 의해 검토 2010년 11월 8일, 6시 반부터 오후 8시까지

YUIConf 2010 기조 연설 : 더글러스 Crockford의 "프로젝트 미래" 2010년 11월 10일, 6시 반부터 오후 8시까지

CC 사진 :

종류의 허가에 의해 사용 사진 :

소개

SVG 개요

SVG와 HTML

SVG와 YUI

YUI와 SVG를 애니메이션

SVG 애니메이션 transform 특성을

기하학을 애니메이션

기본 도형

<path> 의 d 속성

다른 SVG 속성을 애니메이션

CSS 속성을 애니메이션

YUI와 SVG : 후드

SVG DOM의 Specificities에 대한 회계

Accounting for browser differences

Extending Y.DOM

Additions to the Animation engine for timing and synchronization

Conclusion

참조

트위터에서 YUI 라이브러리

자바 스크립트를 비디오 시리즈 Crockford

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

Blogroll

댓글 정책

야후되기

메타 :

YUIConf 2010 패널 토론 : "웹 개발의 미래"벤 갈브레이스와 디온 Almaer에 의해 검토
2010년 11월 8일, 6시 반부터 오후 8시까지

YUIConf 2010 기조 연설 : 더글러스 Crockford의 "프로젝트 미래"
2010년 11월 10일, 6시 반부터 오후 8시까지

SVG 애니메이션 `transform` 특성을

`<path>` 의 `d` 속성

Extending `Y.DOM`