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

오프라인 애플 리케이션의 YUI 3을 사용 소개

2010년 5월 27일 오후 1시 53분에서 알렉산더 Kessinger에 의한 |에 개발 | 9 개의 댓글

저자 소개 : 알렉스 Kessinger는 프런트 엔드로 일하고 과거 야후의 프론트 엔드 엔지니어로 일하고, 그 전체 스택 작업을 누리고 있습니다. 그는 또한 시간 읽기, curating 및 인터넷에 관한 작문, 소셜 미디어 및 구축 웹사이트를 많이 보낸다. 당신은 그의 웹사이트에서 모두 찾을 수 있습니다 alexkessinger.net . 당신은 또한 트위터에서 그를 찾을 수 @ voidfiles .

그 HTML5는 증기를 만들고 말을 할 수 있겠지만, 그 시간이 전달된다 : HTML5는 여기입니다. 모바일 이미 거대한이며, 웹킷은 급성장하고 있으며, 앞으로 몇 년 동안 자신의 휴대폰 및 / 또는 노트북에서 HTML5 가능 브라우저가 필요합니다 사람의 숫자는 HTML5 기능은 표준되는 "새로운 정상"를 만듭니다.

HTML5에서 가장 멋진 기능 중 하나는 응용 프로그램 캐시 웹사이트에게 캐시에 파일 브라우저를 얘기하는 브라우저가 네트워크 연결이없는 경우 캐시된 파일을 사용할 수있는 기능을 제공합니다. 당신은 사용자가 자기가 오프라인 상태에서 당신의 애플 리케이션 중 적어도 일부를 액세스할 수 있도록 응용 프로그램 캐시를 사용할 수 있습니다. 전화 또는 정제 (또는 노트북 같은 심지어 구식 장치)와 같은 장치의 경우,이 사용자가 비행기에서 동시에 응용 프로그램을 사용할 수 있는지 수도있다는 뜻이다. 한편, 당신은 웹 기술을 사용하여 응용 프로그램을 구축보다는 목표-C를 학습을 계속하십시오.

이외에도 응용 프로그램 캐시 , 웹 개발자에게 유용한 오프라인 경험을 만드는 도구를 제공 HTML5에서 사용할 수있는 다른 API는도 있습니다. 대부분의 최신 브라우저에서 두 가지 영구 저장소 API는있다. 하나라는 간단한 키 / 값 데이터 저장소입니다 localStorage . 두 번째는 SQL 데이터베이스 . 사용자가 오프라인 상태에서 모두 이용할 수 있습니다.

마음에 이러한 개념을 통해 어떻게 우리가 YUI를 좋아하는 모든시 빌드 응용 프로그램에서 응용 프로그램 캐시와 영구 저장 장치 활용 가능 보는 계기로 사용 상록 "우선해야 할"응용 프로그램을 탐구거야 YUI 3 갤러리를 포함하여 3.

마크업

마크업은 항상 웹에 관련된 아무것도 구축할 때 시작하기 좋은 장소입니다. 우리 HTML5 페이지의 기본 셸 :

 <! DOCTYPE HTML> <HTML <HEAD> <TITLE> YUI 할일 </ TITLE> <링크 REL = "스타일 시트"HREF = "base.css"유형 = "텍스트 / CSS는"미디어 = "화면에서"제목 = "타이틀 없음 "문자 집합은 ="UTF-8 "> </ HEAD> <body class="yui-skin-sam"> <script src="yui-min.js"> </ 스크립트> <스크립트 src에 ="base.js " > </ 스크립트> </ BODY> </ HTML>

우리는 오프라인 가능한 응용 프로그램을 구축하고 있지만, 단지 닫기 body 태그 앞에 모범 사례지만, 머리에 CSS를 투입하고, 자바 스크립트를 따릅니다. 페이지가 오프라인에서 사용할 수있을 것하더라도, 초기 페이지로드는 응답이어야합니다. (우리가 여기서 놀랍도록 단순 HTML5의 DOCTYPE을 사용하고 있습니다.)

응용 프로그램의 일부 표시자 마크업이 필요합니다 :

  <! DOCTYPE HTML>
 <HTML>
 <HEAD>
    <TITLE> YUI 할일 </ TITLE>
    <link rel="stylesheet" href="base.css" type="text/css" media="screen" title="no title" charset="utf-8">
 </ 머리>
 <body class="yui-skin-sam">
     <div id="doc3">
         <div class="hd">
             <h1> 오늘의 애플 리케이션 </ H1>
             <a class="callout" href="http://alexkessinger.net" target="_blank"> 지금 알렉스 Kessinger에 의해 </ a>에
             <div class="item_entry">
                 <form class="entry_form">
                     <input type="text" name="todo_item_input" class="todo_item_input">
                     <p class="toRight"> <a class="addItem" href="#add"> 추가 </ A> </ P>
                 </ 양식>
             </ 사업부>
         </ 사업부>
         <div class="bd">
             <div class="yui-main">
                 <div class="yui-b">
                     <div class="todo_items">
                         <h2> 할 일 항목 </ H2>
                         <ul>
                             할일 항목을 가져오는 <li의 class="no_items"> ... </ 리>
                         </ UL>
                     </ 사업부>
                 </ 사업부>
             </ 사업부>
         </ 사업부>
         <div id="debug"> </ 사업부>
         <-! 초기화 과정 / / ->
         <script src="yui-min.js"> </ SCRIPT>
         <script src="base.js"> </ SCRIPT>
     </ 사업부>
 </ BODY>
 </ HTML>

이것은 사용자가 우리들이 먼저 응용 프로그램을 로드할 때 그들을위한 몇 가지 데이터를 받고 계획하고 알려드립니다. 그것은 또한 우리의 무대와 함께 작업을 시작하기위한 자바 스크립트에 대한 DOM 구조를 설정합니다.

프로 그레시브 향상에 관하여 참고

응용 프로그램이 진보 향상의 원리로 만들어 지금도 오프라인에서 사용하기 위해 사용할 수 없다는 이유가 없다. 이번 탐사에서 나는 오프라인 지원에 필요한 기술을 최대한 집중하기 위해 PE에 관련된 것이다 추가적인 복잡성을 생략 해요. 일부는 그 접근 방식을 비판 수도, 그리고 그 주장에 공감 해요.

모바일 장치를 처리하기위한 추가 속성

iPhoneOS과 안드로이드 브라우저는 특별한주의없이 대부분의 웹 페이지를 처리할 수 있지만, 모바일 디바이스와 거래할 때 그 내용이 작은 화면에 맞게 압착 맞은 방법을 조사할만한 가치가 있다고. Quirksmode 아니라이 하나 있지만 이 아니라 당신의 시간을 가치가 뷰포트의 대한 심층 기사.

간단히, 뷰포트라는 메타 태그가 있습니다. 그것은이 정도입니다 :

  <meta name="viewport" value="">

뷰포트의 태그의 목표는 모바일 브라우저는 작은 화면에 정말 큰 웹페이지를 표시하는 방법을 알아낼 수 있도록 돕는 것입니다. 모바일 장치는 대부분의 디바이스는 300 500px 화면에 콘텐츠를 700-1100px 집어넣 때문에 도움이 필요합니다. 또한, 우리는 100 % 우리의 너비를 설정하면, 브라우저는 장치의 크기가 내부에 들어갈 그 큰부터 비늘을 다음 웹페이지가 있어야 얼마나 큰 지에서 최선의 추측을 소요합니다.

이번에 뷰포트의을 설정할 수있는 데 도움이됩니다.

  <meta name="viewport" value="width=device-width">

이것은 장치의 화면 너비에 우리 페이지의 너비를 설정하는 장치를 알려줍니다. 우리의 페이지가 유동적인지 확인한다면, 우리의 페이지는 대부분의 모바일 장치에서 화면을 채울 것입니다. 이것은 또한 휴대폰이 풍경 모드가있는 경우 페이지가 추가 공간을 채우기 위해 확장된다는 것을 의미합니다.

우리뿐만 아니라 뷰포트의로 할 수있는 것들이있다. 당신이 모바일 브라우저로 일한 경우, 그들이 당신에게 확대할 수있게 알아요. 당신은 전체 화면을 채우기 위해 웹사이트를 구축하기위한 시간에 복용하는 경우에는 사용자가 확대할 수 있도록하려면 않을 수 있습니다. 우리가 다음과 같은 것이 될 우리의 뷰포트 설정하면 사용자가 확대 수, 또는 밖으로하지 않습니다. 아이폰과 같은 장치에 이것은 더욱 네이티브 느낄 수 있습니다. 이렇게한다면, 여러분의 애플 리케이션의 내용이 사용자에게 가장 (예 : 작은 텍스트) 확대하려는 이유를 제공하지 않는지 확인하고, 그렇지 않으면,이 절망적 사용성 제한됩니다.

  <meta name="viewport" value="width=device-width,user-scalable=no">

뷰포트은 W3C의 표준이 아니지만 일반적인 규칙입니다. 그것은 현재 아이폰과 안드로이드 운영 체제에서 웹킷 브라우저에서 지원하는 것. Fennec , 모질라 모바일 브라우저가 아마도이 대회를 지원합니다.

CSS

이상의 적, 유체 및 동적 될 CSS의 능력을 사용하는 것이 중요합니다. 전화기, 타블렛, 기타 작은 화면의 광범 보는 경우 애플 리케이션 개발자는 우리의 애플 리케이션은 장치의 과다에 사용 될 것을 알고 있어야합니다. 어떤 마술 지팡이가 없습니다 비록 우리는 모든 것이 잘 작동하게 돼요 대부분의 애플 리케이션을 위해 우리는 모든 장치에서 완벽한 픽셀 있어야하지 않을 수 있습니다. 그냥 다음과 모범 사례는 우리에게 대부분의 장치를 지원하는 방식의 대부분이 걸릴 수 있습니다.

% 년에 기지에서 우리의 애플 리케이션의 넓이를 설정으로 시작하는 건 좋은 출발이다. 그들을 사용하면 글꼴 크기를 설정하는 것은 EMS가 렌더링된 웹 페이지를 기반으로 계산되기 때문에 역시 도움이됩니다. 도움 또 한가지는 물론 비율에 열 너비를 기준으로 삼을 있는지 확인하는 것입니다. 심지어 열 배수구는 그들 년대 설정할 수 있습니다.

많은 작업을 할 필요없이, 시작하기 좋은 장소는 CSS의 프레임 워크입니다. YUI 두 격자 CSS가 자연스럽게 우리의 친한 친구 중 하나이며, 그것은 우리가 비율 대신에 정전기 너비 블록의 측면에서 우리의 페이지를 생각할 수 있습니다.

그래서 여기 YUI이 CSS의 격자를 구축하는 것은 나의 응용 프로그램의 시작 CSS입니다.

 . todo_items {패딩 - 가기 : 1em;} todo_items UL.. {패딩 : 0; 여백 : 0;} todo_items UL 리 {여백 : 0.125 그들 0 0.5 그놈 0; 패딩 : 0.125 그들 0 0 0; 국경 - 상단 : 1px 고체 # CCC, 목록 스타일 : 없음; 디스플레이 : 블록, 워드 랩 : 휴식 단어, 텍스트 랩 :. 억제가;} toRight {텍스트 정렬 : 오른쪽;} yui3 콘솔 {텍스트 정렬 :. 왼쪽; 여백 왼쪽 : 10px;} 본문 H1 {글꼴 크기 : 200 %;} 본문 H2 {글꼴 크기 : 150 %;}

자바 스크립트

저희 오프라인에 남도 응용 프로그램에 다음은 자바 스크립트입니다. 먼저 다운로드 yui_min.js을 귀하의 문서 루트에, 우리는 위의 것처럼 마크업에 추가합니다. 그런 다음에 이걸 넣어 base.js 파일 :

  유이 (). ( '노드'함수 (Y) {사용
     Y.one ( "todo_items H2.") setContent ( "나는 비행기로가는 중이야").;
 });

노드 외에, 나는 또한 포함해야하지 YUI 세 CSS를 재설정 하고 YUI이 CSS의 격자를. 나는에서 모듈 포함 겠어요 YUI 3 갤러리 , 라이언 그루브의 우수한 스토리지 Lite를 , 하나는 사용하기 쉬운 API에 가능한 모든 로컬 데이터 저장 방법을 포장합니다.

  유이 ()를 사용한다. ( 'cssreset', 'yui2-격자', '갤러리 - 스토리지 라이트', '노드'함수 (Y) {

   / /해야 할 일 목록 응용 프로그램 코드

 });

참고 : 제가해야 할 일 목록 코드를하거나 내가 쉽게 모바일 장치 프로젝트 이런 디버깅할 수 있도록하는 데 사용할 것 기법의 일부로 안으로 잠수할 않을거야. 당신은 github에서 그 모두를 찾을 수 있습니다 yui3 - 잭 . 내부 base.js 당신은 애플 리케이션의 전체를 확인할 수 있습니다. 당신은 또한 응용 프로그램을보고에서 실행 수 http://html5.alexkessinger.net/yui/ytodo/ . 여기에서 나는 오프라인 기능이 간단한 응용 프로그램을 강화하는 데 필요한 단계에 초점을거야.

캐시 명단

웹 애플 리케이션에 오프라인을 복용에 대한 첫 번째 단계는 응용 프로그램 캐시 . 응용 프로그램 캐시는 다운로드하여 오프라인으로 유지하려면 어떤 파일 브라우저를 알 수 있습니다. 이 예제에서, 나는 애플 리케이션을 위해 내 자바 스크립트와 CSS의 오프라인뿐만 아니라, 기본 HTML 페이지를 유지하려면 알아요. 염두에두고, 내 캐시 명단은 다음과 같이됩니다 :

  캐시 명단

 index.html 페이지
 base.css
 yui_min.js
 base.js

어떤 것들은 캐시 매니 페스트에 대해 유의하십시오.

이 라인으로 시작해야합니다 CACHE MANIFEST .
당신은 텍스트 / 캐시 매니 페스트의 Content-Type 헤더와 함께 제공해야합니다

당신이 아파치에있는 경우에 다음 코드를 추가할 수 있습니다 .htaccess 올바른 콘텐츠 유형을받을 수 있습니다.

  텍스트 / 캐시 매니 페스트 AddType. 참고

부터 그 함께있는 모든 파일을 .manifest 접미사가 함께 제공됩니다 text/cache-manifest Content-Type 헤더.

하기 다음 우리는 우리의 HTML 태그에 속성을 추가 할려면 캐시 매니 페스트의 브라우저를 통보해야합니다 :

  <html의 manifest="todo.manifest">

당신이 오프라인 애플 리케이션을 지원하는 브라우저에서 페이지로 이동한다면 지금 당신은 아마도이 웹페이지는 오프라인 액세스를 요청한다는 통지를 볼 수 있습니다.

온라인 / 오프라인

어떤 캐시 자원의 브라우저를 말하고 장소에서 매니 페스트를 통해, 우리는 온라인 모드 대 오프라인 모드에서 어떻게 생각해 준비가되었습니다. 두 "부팅 시퀀스는"현재이 있습니다 우리가 이미 (와 리소스가 오프라인 사용을 위해 캐시하는 동안)가있는 전체 온라인 시퀀스되는 첫 번째. 이것은 온라인 시퀀스 파일을로드하기 위해 야후 CDN을 사용하고, 파일은 우리가 단지 몇 HTTP 요청를 제공받을 수 있도록 콤보가 - 처리됩니다.

그러나 우리는 또한 오프라인 부팅 절차를 구축하고있다. 우리는 브라우저가 캐시된 리소스에서 그려 YUI를 제대로 초기화 오프라인으로하고있다는 사실을 감지할 수 있어야합니다.

  VAR 온라인 = (navigator.onLine)?  진실 : 거짓;

이제, 우리는 오프라인 또는 온라인을 기반으로되는 구성 개체를 선택해야합니다.

  VAR YUI_ONLINE_CONF = {}
     YUI_OFFLINE_CONF = {
         기지 : "yui3/build /",
         결합 : 0,
         그룹 : {
             갤러리 : {
                 기지 : 'yui3-gallery/build /',
                 패턴 : { '갤러리 -': {}}
             }
             yui2 : {
                 베이스 : '2 in3/dist/2.8.0/build / ',
                 패턴 : {
                     'yui2-': {
                         configFn : 기능 (나) {
                             경우 (/ - 피부 | 초기화 | 글꼴 | 그리드 | 기본 / .test (me.name)) {
                                 me.type = 'CSS';
                                 me.path = me.path.replace (/ \ JS /. 'CSS.');
                                 me.path = me.path.replace (/ \ / yui2 - 피부 / '/ assets/skins/sam/yui2-skin');
                             }
                         }
                     }
                 }
             }
         }
      }
      온라인 = (navigator.online)?  진실 : 거짓;
      CURRENT_CONF = (온라인)?  YUI_ONLINE_CONF : YUI_OFFLINE_CONF;

 YUI (CURRENT_CONF). 사용 ( 'cssreset', 'yui2-격자', '갤러리 - 스토리지 라이트', '노드'함수 (Y) {
     ...
 });

YUI_OFFLINE_CONF 구성은 몇 가지 설명을 할 수 있습니다. 첫째, 내 문서 루트 +에 기반을 변경하고 yui3/build/ . 매니 페스트는 마찬가지로 오프라인 캐시가 엄격한 단일 원산지 정책을 가지고 W3C 사양에 명시되어 있습니다. 모든 캐시된 리소스가 동일한 도메인에서 와야하기 때문에 내 서버에 YUI 3의 전체 분포를 게시했습니다. 결과적으로, 난 못해 그들 모두가 내 서버에서 캐싱을 위해 사용할 수 있어야합니다 - 야후! 또는 Google 또는 내 파일을 봉사하는 다른 CDN에 의존하고 있습니다.

다음 부분 combine:0 제가 가지고 있지 않기 때문에, 아니라 자동 콤보 파일에 YUI 로더를 알려줍 콤보-처리기가 제 서버에 설치되어 있어야합니다.

마지막으로, 제가 언급하려는 groups 구성. 그룹 같은 장소에서 오는 파일의 전체 그룹을 정의할 수 있습니다 YUI 3.1.1의 새로운 기능입니다. 당신도 그들이 소스에서 combo'd되도록 구성할 수 있습니다. 내가 GitHub에 yui3 - 갤러리 저장소 가지고있는 로컬 복사본에서로드하려면 여기 YUI 세 갤러리를 설정합니다.

우리가 온라인 상태가되었을 때, 우리는 야후 CDN에서 부트 스트랩 수 있지만, 오프라인 우리는 파일의 로컬 복사본이 필요합니다. 이것은 할 쉽습니다. 당신도 당신의 디렉토리에 대한 큰 zip 파일에 필요한 파일을 다운로드할 수 있습니다 :

  CD docroot;
 wget http://yuilibrary.com/downloads/yui3/yui_3.1.0.zip;
 yui_3.1.0.zip을 압축 해제;
 MV YUI yui3;
 wget http://download.github.com/yui-yui3-gallery-gallery-2010.05.19-19-08-0-g2a49f06.zip;
 지퍼를 연다 YUI-yui3 - 갤러리 - 갤러리 - 2010년 5월 19일 - 19-08-0-g2a49f06.zip;
 MV YUI-yui3 - 갤러리 - 2a49f06 yui3 - 갤러리;
 wget http://download.github.com/yui-2in3-yui-2in3.3-0-gdf09025.zip;
 MV YUI-2입방인치-YUI-2in3.3-0-gdf09025 2입방인치;

아니면 놈이이 컴퓨터에 설치되어있는 경우 직접 github에서 놈이 저장소를 복제하실 수 있습니다

  CD docroot;
 놈이의 :/ / github.com/yui/yui3.git yui3을 복제 자식;
 놈이의 :/ / github.com/yui/yui3-gallery.git yui3-갤러리를 복제 자식;
 놈이의 :/ / github.com/yui/2in3.git 2입방인치을 복제 자식;

테스트 목적. 가끔 설정합니다 ONLINE = false 어떻게 내 사이트가로드하시기 바랍니다. 당신은 그때 정상적인 브라우저에서 응용 프로그램을 방문 할 경우에는 개별적으로 포함해야합니다 각 파일을 볼 수 있습니다. 제대로 우리의 캐시 매니 페스트를 작성하기 위해서는 대해 Firebug 같은 것을 사용에 끌려가고 각 파일의 메모를 맡아 줘야 겠어. 그런 다음 캐시 매니 페스트에서 각 파일에게 하나씩 나열됩니다. 그것은이 같이 표시됩니다.

  캐시 명단
 # 댓글
 index.html 페이지
 base.css
 base.js
 YUI-min.js
 yui3/build/loader/loader-min.js
 yui3/build/widget/assets/skins/sam/widget.css
 yui3/build/console/assets/skins/sam/console.css
 yui3/build/oop/oop-min.js
 yui3/build/event-custom/event-custom-min.js
 yui3/build/intl/intl-min.js
 yui3/build/console/lang/console.js
 yui3/build/attribute/attribute-min.js
 yui3/build/event/event-base-min.js
 yui3/build/pluginhost/pluginhost-min.js
 yui3/build/dom/dom-min.js
 yui3/build/node/node-min.js
 yui3/build/event/event-delegate-min.js
 yui3/build/event/event-focus-min.js
 yui3/build/base/base-min.js
 yui3/build/classnamemanager/classnamemanager-min.js
 yui3/build/widget/widget-min.js
 yui3/build/substitute/substitute-min.js
 yui3/build/console/console-min.js
 yui3/build/cssreset/reset-min.css
 2in3/dist/2.8.0/build/yui2-grids/yui2-grids-min.css
 yui3-gallery/build/gallery-storage-lite/gallery-storage-lite-min.js
 yui3/build/json/json-min.js
 startup.png
 icon.png

이 시점에서 우리는 모든 길을 오프라인으로 갈 수 있습니다. 당신은 이제 당신의 웹 페이지를 방문할 수 iPhoneOS이나 안드로이드 장치 (또는 HTML5 가능 브라우저가)있다면, 그것이 장치의 인터넷 접속이 해제와 함께 페이지를 다시로드 후 로딩 완료 및하자.

아이폰 - 특정 근사한

아이폰 WebApp 개발자에게 단지 다른 모든 애플 리케이션처럼 홈 화면에서 응용 프로그램의 일부 공간을 제공하는 능력을 affords. 당신이 "네이티브"응용 프로그램과 함께했을로, 당신은 그런 광택 아이콘과 시작 화면을 가질 수 있습니다. 첫째, 따라 필요한 사양은 아이콘 및 시작 화면. 그리고 당신은 다음과 같은 추가 meta 태그를 :

  <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white" />
 href="icon.png"/> rel="apple-touch-icon" <link
 <link rel="apple-touch-startup-image" href="startup.png" />

처음 두 태그는 웹 페이지 HTML5의 WebApp이며 흰색으로 상단에있는 상태 표시줄의 색상을 싶으 않는지 모바일 Safari를 말해. 이것은 또한 브라우저 창의 주위에 모든 탐색 크롬을 제거합니다. 두 번째이 태그를 사용하면 아이콘과 시작 화면에 사용할 파일을 가리 킵니다.

무엇이 다음이야

HTML5 사양은 여전히 움직이는 표적이다. 신규 개발을 위해 눈을 곳에 보관하십시오. 그 환상적인 새로운 기능은 최신 브라우저에있다 지금도했다. 이 튜토리얼에서 볼 수 있듯이, 그것은 극적으로 그것의 잠재적인 유용성을 향상, 웹 응용 프로그램 오프라인을 떼지 못한다 아니에요. 그리고, 오프라인으로 갈 때, 당신은 YUI 3 갤러리 및 YUI 2 위젯 가정에서 익숙치하는 모든 파워와 함께 당신과 함께 YUI 3을 받아 주저하지 않습니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

야후 오픈 전략 (YOS) 엔지니어링 팀의 일환으로 YUI와 함께 작동

2010년 5월 20일 Rohit Dube하여 오후 2시 6분시 |에서 프런트 엔드 엔지니어링 채용 야후 | 해제 댓글

야후 오픈 전략 (YOS) 팀은 오픈 플랫폼의 차세대를 구축하고있다. 연결 - - 우리 곧 제품의 하나는 써드파티 퍼블리셔와 개발자를 대상으로하고 있습니다. 연결은 제 3자가 쉽게 자신의 사이트에 자바 스크립트 코드 몇 줄을 놓아 야후와 통합할 수 있습니다. 또한, 연결은 사용자가 야후 ID를 사용하여 타사 웹사이트에 로그인하여 친구와 추종자들에게 업데이 트를 방송할 수 있습니다.

연결을 포함한 여러 야후 기술 사용 YQL 와 YUI를 . 특히, 연결은 YUI3 (노드, 사실은, 사용자 지정 이벤트)와 일관된 API 및 크로스 브라우저 환경을 제공하는 위젯 인프라의 핵심 라이브러리를 활용합니다. 일단 완벽하게 개발, 연결은 웹 사이트의 수천에 걸쳐 배포와 소비자의 수백만에게 표시됩니다. 이것은 뛰어난 소비자에 대한 접근 및 도전 확장성 요구해야합니다 프로젝트에 참여할 수있는 흥미로운 기회가 될 것입니다.

이상적인 후보는 자바 스크립트, HTML 및 CSS 같은과 크로스 브라우저 호환성 문제, 최적화 기법, 그리고 국제화와 브라우저 측 클라이언트 기술로 친숙 포함한 대규모의 웹 개발 경험 5 년 이상이됩니다. PHP의 지식과 자바 스크립트 라이브러리 - 같은 YUI 등은 - 필요합니다.

관심이 있으십니까? 에서 전체 직업 설명 참조 http://careers.yahoo.com/jdescription.php?oid=29752 및 연락처 Rohit Dube을 (야후 inc.com AT rdube).

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 극장 - 라이언 달 : "NodeJS 입문"(58 분).

2010년 5월 20일 오후 1시 26분에서 앨런 Rabinovich에 의한 |에서 개발 , YUI 극장 | 14 코멘트

2 주 전, 야후 호스팅 BayJax에 전념 meetup NodeJS을 (meetup은 독립 기념일, 때맞춰 때문에, 우리는 '친코 데 노드'라는 이름의). 라이언 달 , NodeJS의 창조자는, 프로젝트에 대한 이야기를주고, 매우이었다 친절은 우리 YUI 극장에 대한 그의 프레 젠 테이션을 기록하게합니다.

동영상 PS 야후에서 메이요 기념 행사가 독립으로 30 초 돌아간 상태로 열립니다

아래에 삽입 비디오 선택의 RSS 리더에서 제대로 표시되지 않는 경우 반드시 YUI 극장에서 비디오의 고해상도 버전을보고 클릭을 통해 .

기타 최근 YUI 극장 동영상 :

엘리야 Insua : jsdom : DOM의 CommonJS 구현 - 엘리야 Insua는 야후에서 2010년 5월 BayJax meetup에서 자바 스크립트 DOM의 서버측 구현을 소개합니다.
니콜라스 Zakas, Stoyan Stefanov, 로스 Harmes 줄리앙 Lecomte, 매트 스위니 : 고성능 자바 스크립트 - O'Reilly의 고성능 자바 스크립트를 논의 고급 JavaScript 및 야후에서 2010년 4월 BayJax meetup에서 DOM 스크립팅 최적화에 대한 다섯 기여자.
더글러스 Crockford : 주 및 자바 스크립트의 미래 - 야후 자바 스크립트 아키텍트 더글라스 Crockford는 최근 ECMA5 개발 과정과 미래의 언어를 개선하기위한 노력에 대해 설명합니다.
DAV 유리 : YUI에 기여 - YUI 엔지니어 DAV 유리 YUI 갤러리에 대해 소개하고 YUI 프로젝트에 기여를 만드는 과정을 통해 단계.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 극장 - 엘리야 Insua : "jsdom : DOM의 CommonJS 구현"(18 분).

5 월 20 앨런 Rabinovich하여 오후 1시 24분시 2,010 |에서 개발 , YUI 극장이 | 코멘트 끄기

엘리야 Insua 에서 스타 개발자 Arc90는 , 그의 작품에 수여 jsdom을 야후에서 친코 데 노드 BayJax 이벤트에서. 엘리야는 스카 이프 (그래서 낮은 이상적인 비디오 및 오디오 품질을 용서하십시오)를 통해 브루클린에서 발표하고, 기꺼이 우리 YUI 극장에 대한 그의 이야기를 캡처할 수있게되었습니다.

아래에 삽입 비디오 선택의 RSS 리더에서 제대로 표시되지 않는 경우 반드시 YUI 극장에서 비디오의 고해상도 버전을보고 클릭을 통해 .

기타 최근 YUI 극장 동영상 :

라이언 달 : NodeJS 소개 - 라이언 달, NodeJS의 창조자는, 프로젝트 및 성능 개선 및 새로운 아키텍처에 대해 이야기를 소개합니다. 이야기는 야후에서 2010년 5월 BayJax meetup에서 열렸다.
니콜라스 Zakas, Stoyan Stefanov, 로스 Harmes 줄리앙 Lecomte, 매트 스위니 : 고성능 자바 스크립트 - O'Reilly의 고성능 자바 스크립트를 논의 고급 JavaScript 및 야후에서 2010년 4월 BayJax meetup에서 DOM 스크립팅 최적화에 대한 다섯 기여자.
기독교 Heilmann : YQL과 YUI : 빠른 애플 리케이션을위한 빌딩 블록 - 야후 개발자 네트워크의 국제 전도 기독교 Heilmann는 야후 쿼리 언어 (YQL)와 야후 사용자 인터페이스 라이브러리 (YUI)를 사용하여 빠르고, 강력하고 경쟁력있는 애플 리케이션을 만들기 위해 자신의 철학을 설명 .
루크 스미스 : 이벤트 진화 - YUI 엔지니어 루크 스미스는 DOM 이벤트, 이벤트 위임, 합성 이벤트 및 사용자 정의 이벤트에 대한 지원을 포함한 YUI 3 이벤트 시스템에 깊은 소개를 제공합니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

구현 초점 : Phanfare 미디어 오거 나이저

2010년 5월 19일 오후 1시 51분에서 에릭 Miraglia에 의해 |에서 야생의 , YUI 구현 | 1 개의 덧글

에서 코리 Mintz Phanfare은 무겁게 YUI 2.8.0을 기반으로 자신의 최근 제품 출시에 대해 알려주십시오 지난 주 밝혔다.

우리는 어제 우리의 새로운 웹 기획자를 발표 ... 그냥 모든 YUI 두 구성 요소에 대해 사용하여 웹 응용 프로그램으로 만들어진 전체 사진 및 비디오 주최자입니다. 우리는 정말 데스크탑 및 웹 소프트웨어 사이의 경계를 흐리게 하죠 생각합니다.
몇몇 주목할만한 기능은 다음과 같습니다
사용 업로더를 , 우리는 그들이 업로드으로 사람들이 사진을 정리하고 수정할.
의 도움으로 끌어서 놓기 와 메뉴 , 썸네일 그리드는 운영 체제의 파일 브라우저의 동작을 모두 가지고 있습니다. 당신은 CTRL과 교대, 작은 이미지 사이의 화살표 등을 사용하여 다중 선택, 선택 드래그 드래그 앤 드롭 재정렬할 수
의 동적 로딩 TreeView는 그들이 계층이기 때문에, 우리 앨범 100s와 게으른 로딩 사용자 계정 보자 (연도 -> 앨범 -> 섹션). 이것은 매우 큰 계정에 대한 페이지가 작은 계정 만큼의 속도를 로드할 수 있습니다.

제가 사이트와 UI의 세부 사항에 특별한 관심 깨끗한 전문성을 사랑 해요. 사이트를 둘러 부담 - 평가판 계정은 무료이며, 당신에게 사이트가 제공하는 일에 대한 느낌을주고 샘플 앨범으로 채워집와. 코리와 같은 환상적인 출시를위한 팀으로 축하드립니다.

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

CSS를 101 : 블록 서식 컨텍스트

년 | 11시 46분에서 2010년 5월 19일 티에리 Koblentz하여 오전 발달 | 10 코멘트

저자 소개 : 티에리 Koblentz는 야후에서 프론트 엔드 엔지니어
그는 소유 TJK 디자인 , EZ-css.org 및 CSS-101.org를 . 당신은에서 트위터에 티에리 따를 수 @ thierrykoblentz .

블록 서식 컨텍스트는 다음 중 하나 이상을 만족하는 상자입니다

"플로트"의 가치는 '없음', 아니
"오버플로우"의 사용 가치는, "표시"없습니다
"디스플레이"의 값은 "테이블 셀", "테이블 캡션", 또는 "인라인 블록"이다
"위치"의 가치도 "정적"이나 "상대적인"입니다.

그것이 오게되면 시각적인 서식 모델 (이것은 사용자 에이전트가 처리하는 방법은 문서 트리 영상을위한 미디어 ), 블록 형식 컨텍스트가 큰 선수입니다. 그래서 흐름, 부동 소수점, 명확하고, 여백과의 관계의 탄탄한 이해를 가지고 CSS의 저자를위한 중요합니다.

사양에 대해 뭐라고 써 ...

어떻게 포맷 컨텍스트 흐름을 차단

위치 결정 체계 블록 형식 컨텍스트가 속해있다 정상적인 흐름 . 따라서 블록 포맷 컨텍스트의 "블록"당신이 기대대로 페이지의 흐름에 배치됩니다 블록 상자, 인라인 형식 의 인라인 박스, 상대적 포지셔닝 블록이나 인라인 박스, 그리고 포지셔닝 런타임의 상자. 간단히 말해, 그들은 페이지 흐름의 일부입니다.

블록 형식 컨텍스트를 실행 무엇

섹션 9.4.1은 다음 새 블록 형식 컨텍스트를 확립 것을 말합니다 :

수레,
절대 위치가 지정된 요소,
인라인 - 블록,
테이블 셀
테이블 자막,
"오버플로"( "표시"이외의 값)와 스타일 요소

그러나에 따라 CSS를 3 급 사양 은 다음 조건이 충족되면, 블록 형식 컨텍스트가 (CSS3의 말씀에 "유동 루트")이 만들어집니다 :

"의 값은 위치 "(보고도"정적 "이나"상대적인 "입니다 [CSS3POS]를 .)

이 정의는 그 의미 position:fixed 역시 새로운 블록 형식 컨텍스트를 설정합니다. 이것은하지만, 섹션 9.4.1에서 미스가 아니라 고정 위치가 절대 위치 (9.6.1)와 요소의 "라는 절대적 위치에 요소 (또는 상자) 암시에 대한 명세에 대한 참조의 하위 카테고리입니다 위치 "속성이있다 값은 "절대"또는 "고정".

그 참고 display:table SE 당 블록 형식 컨텍스트를 확립하지 않습니다. 하지만 생성할 수 있기 때문에 익명의 상자 , 그 중 하나는 (와 display:table-cell ) 새로운 블록 형식 컨텍스트를 설정합니다. 즉, 트리거는 익명 상자 아닙니다 display:table . 두 스타일은 새로운 블록 형식 컨텍스트를 (암시적으로 또는 명시) 수립하더라도 때문에, 저자가 염두에 두어야할까요 clear 함께 동일 작동하지 않습니다 display:table 그것과 마찬가지로 display:table-cell .

마지막 트리거는 것입니다 fieldset 요소입니다. 기묘하게까지이 문제에 대한 www.w3.org에 대한 어떠한 정보도 없었 HTML5의 사양은. 브라우저 버그 (발생했습니다 웹킷 , 모질라는 이것을 언급)하지만 아무것도 "공식"은. 사실, 대부분의 브라우저의 새로운 블록 형식 컨텍스트를 구축 fieldsets은 섹션 3.2 (UA 적합성)에 따라, 저자는 당연한 감당이 안되는 경우에도 :

CSS 2.1 속성은 컨트롤과 프레임을 형성하는 데 적용되는 정의하지 않는다, 또는 방법을 CSS는 스타일을 사용할 수 있습니다. 사용자 에이전트는 이러한 요소에 CSS 속성을 적용할 수 있습니다. 저자는 실험과 같은 지원을 치료하는데 좋습니다. CSS의 향후 수준이 추가로 지정할 수 있습니다.

어떤 블록 형식 컨텍스트가 할

블록 서식 컨텍스트 때문에 그들이 흐름 방식 때문에 수레를 포함하고, 섹션 9.4.1에 따라, 그들은 무너지고 여백을 방지하고 수레를 중복되지 않습니다 :

블록 서식 컨텍스트에서 상자가 포함된 블록의 상단에서 시작하여 다른 수직 후 하나 뻗어있다. 두 형제 상자 사이의 수직 거리는에 의해 결정됩니다 "여백" 속성. 블록 서식 컨텍스트에 인접한 블록 상자 사이의 수직 마진 축소 .
블록 서식 컨텍스트에서 각 상자의 왼쪽 바깥쪽 가장자리 (오른쪽에서 왼쪽으로 포맷을위한, 오른쪽 가장자리 터치) 포함하는 블록의 왼쪽 가장자리 감동을. 상자가 새 블록 형식 컨텍스트를 (상자 자체는 어떤 경우에 수립하지 않는 한 이것은 심지어 수레의 존재 (박스의 라인 박스로 인해 수레로 축소 수도 있지만)에 해당하는 좁은 될 수 있습니다 인해 수레로).

충분한 사양으로,이 현실 세계에 무엇을 의미할까요?

블록 형식 컨텍스트 간격이 중요한 예외에서 모든 블록 상자처럼 더 많거나 적은 행동 :

블록 형식 컨텍스트가 붕괴 여백을 방지
인접 블록 상자의 사이의 수직 마진 붕괴가 있지만 그들은 동일한 블록 서식 컨텍스트에있는 경우. 인접한 상자가 동일한 블록 서식 컨텍스트에 속하지 않는 경우 즉, 그들의 마진은 축소되지 않습니다.
예 :
이것과 함께 스타일을 파란색 배경을 가진 DIV 안에서 문단이다 margin:20px .
이것과 함께 스타일을 파란색 배경을 가진 DIV 안에서 문단이다 margin:20px .
이것은 파란색 배경이있는 DIV 내부 단락이고, 그것으로 스타일되어 margin:20px , 부모 사업부가 함께 스타일을하고 있습니다 overflow:hidden;zoom:1 .
마지막으로 DIV가 새 블록 형식 컨텍스트를 생성하기 때문에 위의 두 첫번째 파란 상자 사이에, 단락의 붕괴 (간격이 20 픽셀이 아니라 40 픽셀을 동일)의 하단과 상단 여백은, 그러나, 세 번째 문단의 마진이 축소하지 , 따라서 그들은 단락의 컨테이너에서 '내밀어 "않지만 대신 그 블록 상자의 일부입니다.
참고 : Internet Explorer 6에 명시 여백없이 DIV가 마진을 둘러싸면 실패합니다.
그것이 마진을 축소해야 할 때에 새로운 블록 형식 컨텍스트를 작성하는 것은 적용과 같은 역할을 border 이나 padding 요소로합니다.
블록 형식 컨텍스트가 수레를 포함
I am sure you have heard of the sentence ” a float always contains floats “, or maybe heard of the FNE ( float nearly everything ) method. But the basis of this is that floats are block formatting contexts, so a better way to formulate this is to say that ” a block formatting context always contains floats “.
Example:
This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px
This paragraph is a float inside a DIV with a blue background, it is styled with margin:20px . The parent DIV is styled with overflow:hidden;zoom:1 .
The first paragraph is a float so it is removed from the flow and its container collapses , hence the background of this container does not show.
The second paragraph is also a float, but it is contained inside a DIV that creates a new block formatting context, hence that container encloses the child's “margin box”. You should also note that, unlike with the first paragraph, there is no need to clear the previous box. This is often referred to as “self-clearing”, which makes lot of sense considering that block formatting contexts are a normal part of the flow.
Note : clear only clears floats within the same block formatting context .
Block formatting contexts do not overlap floats
This one is my favorite . According to the spec, the border-box of a block formatting context must not overlap the margin-box of floats in the same block formatting context as the element itself. What this means is that browsers create implicit margins on block formatting contexts to prevent them from overlapping the margin-box of floats. For this very reason, negative margins should have no effect when applied to a block formatting context next to floats (WebKit and IE6 have a problem with this though – see test case ).
Example:
```
 .sideBar { background: skyBlue; float: left; width: 180px; } 
```
```
 .sideBar { background: yellow; float: right; width: 180px; } 
```
```
 #main { background: pink; overflow: hidden; zoom: 1; border: 5px solid teal; } 
```
Because this behavior is attached to the “border box” (not the “margin box”), to create space (eg, a 20px gap) between the pink box and its siblings, authors would need to either:
- Set a 20px margin on the floats
- Set margin values on the pink box greater than the width of the floats (ie, margin:0 220px )
Yes, you'd use 220px , not 20px . Because it is the border-box that tries to fit between the floats, not the margin-box. And if I say it tries it is because that container would drop if there was not enough room for it between the two floats.
In other words, if the pink box was given a 400 pixels width, that box should drop when the parent container is narrower than 770 pixels (180px + 180px + 400px + 10px). As a side note, in a few instances, this behavior appears to be broken in Firefox (at least in v.3.5.9) (ie, when the above construct is the first child of body – see test case ).
Note : the space that shows in IE6 between the pink box and the two floats is due to the three pixel jog bug .

hasLayout versus block formatting context

As you may have noticed, all previous examples are styled using overflow:hidden;zoom:1 . The former declaration establishes a new block formatting context in modern browsers while the latter triggers hasLayout in Internet Explorer (IE 5.5/6/7). This is because these renderings are very close ( similarities with the CSS specs ). Like block formatting contexts, elements that are given a layout appear to prevent collapsing margins, to contain floats, and to not overlap floats.

Properties/declarations that give elements a layout

The lists below show that the properties that establish a new block formatting context also trigger hasLayout, at least the ones supported by the browser, with the exception of overflow in IE < 7.

In Internet Explorer 5 and 6: position:absolute; position:fixed; float (any value other than ” none “); display:inline-block; width (any value other than ” auto “); height (any value other than ” auto “); zoom (any value other than ” normal “); writing-mode:tb-rl; -ms-writing-mode:tb-rl
In Internet Explorer 7: min-width (any value); min-height (any value); max-width (any value other than none ); max-height (any value other than none ); elements styled with overflow (any value other than visible ); overflow-x and overflow-y (any value other than visible )

Things to consider

zoom and writing-mode are proprietary properties and do not validate.
IE 5.0 does not support zoom
width and height trigger hasLayout on inline elements only when these properties apply to these elements (ie, IE6 in quirks mode).
overflow-x and overflow-y are part of the CSS3 box model module
hasLayout is also triggered when the layout-flow is different from the parent layout flow (ie, rtl to ltr )

In Quirks Mode and IE7 Mode (All Versions)

When overflow is set to something other than visible, table-cell elements do not establish new block formatting contexts.
When overflow is set to visible, table-cell elements establish a new block formatting context.

HTML elements that always have a layout:

In Internet Explorer, these elements have - by default – a layout.

<body> (as well as <html> in Strict mode)
<table> , <tr> , <th> , <td>
<img>
<hr>
<input> , <button> , <select> , <textarea> , <fieldset> , <legend>
<iframe> , <embed> , <object> , <applet>
<marquee>

Wrap up

To reduce the risk of issues between modern browsers and Internet Explorer ( < 8), authors may choose to give a layout to boxes that establish new block formatting contexts. This way the flow is identical, elements escape floats the same way, clear clears the same floats, and margins collapse where expected. Also, authors must pay attention when styling boxes using hasLayout triggers (ie, width ) as such styling may require making that element a new block formatting context as well.

YUI: Open Hours, Fri May 21st

May 19, 2010 at 10:30 am by Luke Smith | In Development | 2 Comments

It's a new week, and time for another YUI: Open Hours !

This week, we'll be joined by the inimitable Dav Glass , author of (among other things) YUI's Rich Text Editor and Drag and Drop utility , and the primary architect behind yuilibrary.com and the Gallery itself. He'll be discussing the YUI 3 Gallery project — where it's going, how to contribute — and answer any questions about it, about the site, or really about anything else while we have him on the line.

After that, we'll jump into our main event, which will be a “Gallery widget sampler”. We have a number of module authors joining us this week, including

Iliyan Peychev ( Accordion )
Andrew Bialecki ( Lightbox )
Matt Snider ( Radial Menu )
Jacob Fogg ( Sliding Sidebar )
and hopefully more

They'll introduce their module, give an example or two, go over their API, and discuss their experience creating it. Besides just being a nice introduction to additional components available to YUI 3 users, it should provide a good platform to talk about widget API best practices and help give a sense of some of the decisions that are made during widget creation.

Thanks again to Caridy Patiño for joining us last week and reviewing his Accordion Node plugin and Dispatcher modules. We'll have more topics in the future about creating Node plugins and the reasons why the plugin approach or the widget approach might be a better fit for your needs. And thanks to Matt Sweeney (author of YUI's Node class and selector engine) for dropping in as a surprise guest as well.

The time will be the same as before, 10am – 12pm PDT and the connection details are also the same:

Dial in to 1-888-371-8922 (non-US participants, email me for a local number)
Enter the attendee code 4718 8953#
Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

And as always, you can keep up to date with the upcoming schedule and topics by following @yuilibrary on Twitter or subscribing to the YUI Event Calendar .

Hope to see you there!

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

다음 페이지»

에서 제공하는 워드 프레스 에서 야후! Web Hosting .

마크업

프로 그레시브 향상에 관하여 참고

모바일 장치를 처리하기위한 추가 속성

CSS

자바 스크립트

캐시 명단

온라인 / 오프라인

아이폰 - 특정 근사한

무엇이 다음이야

기타 최근 YUI 극장 동영상 :

기타 최근 YUI 극장 동영상 :

사양에 대해 뭐라고 써 ...

어떻게 포맷 컨텍스트 흐름을 차단

블록 형식 컨텍스트를 실행 무엇

어떤 블록 형식 컨텍스트가 할

충분한 사양으로,이 현실 세계에 무엇을 의미할까요?

블록 형식 컨텍스트가 붕괴 여백을 방지

블록 형식 컨텍스트가 수레를 포함

Block formatting contexts do not overlap floats

hasLayout versus block formatting context

Properties/declarations that give elements a layout

Things to consider

HTML elements that always have a layout:

Wrap up

Further readings

Implications

Demos and testcases

hasLayout articles

YUI Library on Twitter

번역

신디케이트

최근 게시물

YUI 라이브러리

아카이브 :

blogroll을

정책 코멘트

야후되기

메타 :