로그인

이메일
비밀번호
왼쪽에 걸리적 거리는 거 숨기기

'해석'에 해당되는 글 3건

  1. Microsoft CSS Vendor Extensions (2)

    2008/10/14

  2. 영어공부 - Google Chrome, Chromium, and V8 (7)

    2008/09/05

  3. 영어공부 - Inkscape: Open Source Drawing for SVG

    2008/09/05

Microsoft CSS Vendor Extensions

돼도않는 공부/영어 2008/10/14 09:58

예전부터 앞에 -moz-, -o- 같은게 붙은 스타일을 보고 이건 뭔가 했었는데 CSS 2.1 에 명시되어 있는 내용이었군요.
앞으로 IE 에서도 -ms- 식으로 접두어를 붙힌다고 합니다~

Microsoft CSS Vendor Extensions

알다시피 모든 브라우저에서는, CSS 명세서에는 완전히 정의되어 있는데 구현이 일부분만 되었다던가, 아직 CSS 명세서에 완전히 정의되어 있지 않거나, 아예 정의되어 있지 않은데 구현이 되어 있다던가 하는 경우에 해당 브라우저에서만 지원하는 형태의 CSS 속성들을 가지고 있습니다. (예: -ms-interpolation-mode)


CSS 2.1 에 따르면, 앞에서 얘기한 사항에 해당하는 CSS 속성은 무엇이든 vendor 접두어를 가져야 합니다. (Microsoft 의 '-ms-', Mozilla 의 '-moz-', Opera 의 '-o-' 같은 것 처럼)


CSS 2.1 에 IE8 을 완벽하게 맞추려는 우리의 계획의 일환으로, 다음 사항 중 하나라도 만족시키는 속성에는 '-ms-' 접두어를 붙히기로 결정했습니다.


  • CSS 속성이 Microsoft 만의 확장기능인 경우 (CSS 명세서에 정의가 되지 않은)
  • CSS 명세서에 정의되어 있긴 하지만 아직 W3C 에 의해 확정되지 않은 검토 과정의 속성인 경우
  • CSS 명세서에 정의되어 있긴 하지만 CSS 속성 자체가 아직 완전히 구현된게 아닌 경우


이러한 변화는 이어서 나올 CSS 속성에 적용되어, IE8 에서 동작하는 페이지를 만들때 모두 '-ms-' 라는 접두어를 붙혀야 합니다. (IE8 사용자들이 당신의 홈페이지를 Compatibility View 모드로 보면 IE7 에서 보던 거랑 똑같이 보여지며 이러한 경우 '-ms-' 같은 접두어는 사용되지 않음을 명심하세요)


Property Type W3C Status
-ms-accelerator Extension  
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension  
-ms-block-progression CSS3 Editor's Draft
-ms-filter Extension  
-ms-ime-mode Extension  
-ms-layout-grid CSS3 Editor's Draft
-ms-layout-grid-char CSS3 Editor's Draft
-ms-layout-grid-line CSS3 Editor's Draft
-ms-layout-grid-mode CSS3 Editor's Draft
-ms-layout-grid-type CSS3 Editor's Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor's Draft
-ms-interpolation-mode Extension  
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension  
-ms-scrollbar-arrow-color Extension  
-ms-scrollbar-base-color Extension  
-ms-scrollbar-darkshadow-color Extension  
-ms-scrollbar-face-color Extension  
-ms-scrollbar-highlight-color Extension  
-ms-scrollbar-shadow-color Extension  
-ms-scrollbar-track-color Extension  
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension  
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor's Draft
-ms-zoom Extension  


우린 당신이 이미 작성했던 페이지로 되돌아가 '-ms-' 접두어를 추가해 줘야 하는 것과 관련된 업무를 이해하지만 가능한한 표준에 맞게 작성하기 위해서 당신의 페이지를 이렇게 작업해주는 것을 권장 합니다.


그러나 이러한 변환 작업을 쉽게 하기 위해, IE7 에서 존재하는 접두어가 없는 CSS 속성들(deprecated 가 고려되고 있는)도 IE8 에서도 여전히 동작할 것 입니다.


filter CSS 속성의 문법 바꾸기


아쉽게도, 원래 filter 문법은 CSS 2.1 표준이 아닙니다. 예를 들어 아래에 빨간색으로 강조되어 있는 등호(=)나 콜론(:), 그리고 쉼표(,) 같은 것들은 비표준입니다.

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);


우리의 CSS 파서가 표준에 맞도록 다시 설계되었기 때문에, 예전의 filter 문법은 CSS 명세서에 따르면 무시됩니다. 때문에 선언된 filter 를 따옴표로 감싸주는 것이 필요합니다. 위에 정의되어 있는 filter 문법을 올바른 방법으로 변경하면 아래와 같습니다. (바뀐 부분은 초록색으로 강조)

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)";


IE7, IE8 사용자 모두에게 filter 가 잘 작동되도록 하기 위해, 위에서 보여준 문법 두개를 모두 포함할 수도 있습니다. 우리의 파서가 가지고 있는 특색 때문에, Compatibility View 모드에서도 filter 가 제대로 동작하기 위해서는 예전 filter 의 사용 방식 앞에 새로운 방식을 추가하는 형태로 문법을 수정할 필요가 있습니다. (이건 이미 알고 있고 IE8 마지막 버젼에서는 수정될 버그입니다)


여기 CSS 스타일시트 예제입니다.

#transparentDiv {
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
       opacity: .5;
}


시간 내서 봐주셔서 감사드리고 피드백 환영합니다~


Harel M. Williams 

Program Manager

영양가 있는 포스팅인가요
(총 2분이 투표해서 4.0점) 4.0점
2008/10/14 09:58 2008/10/14 09:58
, , ,
트랙백 0 : 댓글 2 : RSS

영어공부 - Google Chrome, Chromium, and V8

돼도않는 공부/영어 2008/09/05 14:37
이건 뒷부분 해석이 조금 덜 되었어요.
해석 마저 끝나면 수정하겠습니다.

Google Chrome, Chromium, and V8

Category: Browsers, Google

It is really exciting to see the level of pace that browsers have been setting recently, especially with respect to performance.

최근 갖추어지고 있는 브라우저의 진행되는 레벨을 (특히 성능에 관심을 두어서) 보는 것은 매우 재미있다.

I have been able to keep in sync with Google Chrome the new browser, and Chromium, the open source code-base it comes from. There are a couple of innovations that have been great to see such as the multiple process model for tabs and windows, the unified tab and search functionality, and at the core, V8.

나 는 오픈소스 기반인 구글의 새로운 브라우저 Chrome 과 Chromium 을 통해 동조를 유지할 수 있다. Chrome 과 Chromium 에는 혁신적인 것들이 많이 있는데, 그건 탭과 윈도우에서의 멀티프로세스 모델과 검색 기능과 합쳐진 탭, 그리고 V8 같은 것 들이다.

V8 is the super-speedy JavaScript VM by Lars Bak of Sun HotSpot fame. When you run JavaScript benchmarks on this puppy, you see very speedy responses indeed. The V8 part of the comic says it well:

V8 은 Sun HotSpot fame 의 Lars Bak 에 의해 개발된 엄청 빠른 JavaScript VM 이다. 이 녀석을 사용해서 JavaScript 벤치마크를 해보면 확실히 매우 빠른 속도를 확인 할 수 있을 것이다. 만화에서도 V8 에 대해 좋다고 얘기하고 있다 :

The breakthrough of having hidden classes to look at structures and work out the shared information (e.g. object Foo looks like a Person). Once you have that data, you can optimize in the same way you would class systems. V8 improvements consist of:

숨겨진 클래스를 가지는 것의 발전은 구조들을 살펴보고 정보 공유를 이루어내기 (이를 테면 객체 Foo 을 Person 처럼 본다든지) 위해서이다. 일단 이런 데이터를 가지면 당신은 같은 방법으로 당신이 하려는 클래스 시스템을 최적화 할 수 있다. V8 의 개선점은 다음 내용으로 이루어져 있다.

  • Compiler: Instead of using interpretation, JavaScript gets compiled down to native code
  • 컴파일러 : 인터프리터를 사용하지 않고, JavaScript 는 네이티브 코드로 컴파일 된다.
  • Inline caching: Optimize for accessing, and function calling
  • 인라인 캐싱 : 접근과 함수 호출 최적화
  • Very efficient memory management system
  • 매우 효율적인 메모리 관리 시스템

What version of JavaScript? "V8 implements ECMAScript as specified in ECMA-262, 3rd edition, and runs on Windows XP and Vista, Mac OS X 10.5 (Leopard), and Linux systems that use IA-32 or ARM processors."

JavaScript 버젼을 뭘 쓸까? "V8 은 ECMA-262, 3rd edition 에 명시된 ECMAScript 으로 구현한다. 그건 Windows XP 와 Vista, Mac OS X 1.05 (레오파드), IA-32 이나 ARM 프로세서를 사용하는 Linux 시스템에서도 동작한다.

If you are interested in the benchmark suites, you can run them and check them out.

만약 이런 벤치마크 수트에 흥미가 있다면 실행해서 확인해봐라.

Some of the core technology is also exciting to geeks. For example, as this code is operating system neutral we use the Skia Graphic Library (SGL) used by the Android team.

몇몇의 핵심 기술은 역시 오타쿠들의 관심을 끌고 있다. 이를테면, 운영체제 중립 같은 이 코드로 우리는 안드로이드 팀에 의해 SGL 로 사용된다.

What about the process manager? John Resig has interesting thoughts on that with the rub: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."
'프로세스 매니저' 는 어떤가? John Resig 는 '나쁜 성능이나 메모리 소모의 책임이 사이트가 아닌 브라우저에 있다고 더 이상 거짓말 하지 않는다' 라는 비난에 대해 흥미로운 생각을 가지고 있었다.

Alex Russell also has some good thoughts on the importance of Chrome, and Christopher Blizzard (Mozilla) also has some thoughts on how this shows the browser market is strong.

Alex Russell 도 Chrome 의 중요성에 대해 몇몇의 좋은 생각을 가지고 있다. 그리고 Christopher Blizzard (Mozilla) 도 이것이 브라우저 시장이 강력하다는 것을 어떻게 보여주나' 에 대해 몇몇 생각을 가지고 있다.

This is all great to see. Not only is this just the beginning for Google Chrome, Chromium, and V8 (I am dying for a Mac version!), but the other browsers are keeping pace too. The end result is a better Web for users, and a higher quality of product for developers to build against!


영양가 있는 포스팅인가요
(총 1분이 투표해서 5.0점) 5.0점
2008/09/05 14:37 2008/09/05 14:37
, ,
트랙백 0 : 댓글 7 : RSS

영어공부 - Inkscape: Open Source Drawing for SVG

돼도않는 공부/영어 2008/09/05 14:36
요즘 영어공부를 위해 (되도록) 회사 몇몇 분들과 같이 매일 일정량을 해석하는 연습을 하는데,
그에 따른 결과물을 올립니다.

전체적으로 해석 결과에 자신은 없지만
특히 노란배경의 부분은 해석이 제대로 안되었다고 생각한 부분입니다~

Inkscape: Open Source Drawing for SVG

오픈소스 SVG 그림그리기 : Inkscape

Category: SVG

I recently ran across Inkscape, an open source very high-quality graphics editor that can output SVG that I’m blown away by. Even better, it runs on Linux, Windows, and Mac OS X. From the Inkscape website:

얼마전 난 Inkscape 를 우연히 접하게 되었는데, 이 놈은 날 압도시키는 SVG 를 output 으로 내놓는 매우 고품질의 오픈소스 그래픽 에디터이다. Inkscape 홈페이지에 나온 내용은:

[Inkscape is] an Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.

(Inkscape 는) Illustrator, CorelDraw, Xara X 와 비슷한 기능을 가지고 W3C 표준 SVG 파일 포맷을 사용하는 오픈 소스 벡터 그래픽 에디터이다.

Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.

Inkscape 는 많은 발전된 SVG 기능(markers, clones, alpha 블렌딩 등)을 지원하며, 미려한 인터페이스를 디자인 할 수 있다. Inkscape 는 노드를 편집하거나 복잡한 Path 작업도 수행하는 것, 비트맵에서 윤곽선을 추출하는 것이 매우 쉽다. 우리는 또한 사용자의 성장과 열려있는 개발자 커뮤니티, 커뮤니티 기반의 개발을 유지하는 것에 중점을 두고 있다.

Here’s a screenshot looking at one of the samples, a vector image of a car; there are a huge number of great tools in this beastie:

여기 자동자 벡터 이미지 샘플 하나를 보여주는 스크린샷이 있다. 여기에는 엄청난 수의 훌륭한 툴이 있다.

Screenshot

Screenshot of Inkscape showing vector image of car

One of the coolest features of Inkscape is it can take a bitmap image, and do tracing of the edges to create a vector representation! Vector images are inherently more “impressionistic”; they are for more illustration type purposes. I decided to take this feature for a spin and took a photograph I have of myself and do edge detection. Here is the photograph before, loaded into Inkscape ready to process:

Inkscape 의 간지나는 기능 중 하나는, 비트맵 이미지를 읽어들여 벡터 표현으로 만들기 위해 윤곽선 추출을 할 수 있다는 것이다! 벡터 이미지는 본래부터 더 인상파틱 한데 더 삽화 형식의 목적을 위한다. 나는 내 셀카사진을 회전시키고 윤곽선 추출을 해보기 위해 이 기능을 쓰기로 결정했다. 여기 진행 준비를 위해 Inkscape 에 로드한 작업전의 사진이 있다 :

Inkscape

Inkscape with bitmap, non-vector photograph

Here are the results after playing around with the various options; on the right-hand side of the screen is the options dialog that you can use to fiddle around with the various settings for edge detection:

이건 다양한 옵션들을 활용한 후의 결과이다.  화면 오른 쪽의 옵션 다이얼로그에 있는 이런 옵션들로 윤곽선 추출을 위해 다양한 셋팅을 사용해 손볼 수 있다.

Screenshot

Screenshot of Inkscape with traced, vector representation

Now, I can save this into an SVG file suitable for the web. I could then edit the markup, or bring it onto a web-page. More on embedding SVG in a future post.

이제 웹에 올리기 적당한 SVG 파일로 저장할 수 있다. 나는 마크업을 수정하거나 그걸 웹페이지에 올릴 수 있었다. 더구나 미래의 포스트에 들어갈 embedding SVG 도.

One of the strengths of SVG is that it is a file format suitable for exporting such things; while the Canvas tag is great for having a canvas that JavaScript can draw onto, you can’t easily export illustrations into calls to a Canvas as you can with SVG.

SVG 의 강력한 것 중 하나는 SVG 가 그러한 것들로 내보내기에 적당한 파일 포맷이라는 거다. Canvas 태그가 자바스크립트로 그림을 그려넣을 수 있는 canvas 을 가지고 있기에 매우 훌륭하지만 당신이 SVG 로 할 수 있는 만큼 Canvas 라고 불리는 것에 삽화로 내보내기를 쉽게 할 수 없다.


영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/09/05 14:36 2008/09/05 14:36
, ,
트랙백 0 : 댓글 0 : RSS
◀ PREV : [1] : NEXT ▶