Rev. 2.73

그동안 VNC와 데스크탑 원격제어 소프트웨어(RealVNC, TightVNC, UltraVNC, MS Remote Desktop, 등)들을 오랜 시간동안 사용해 왔습니다. 호스트 PC와 클라이언트 PC 양쪽에 모두 소프트웨어를 설치하고 상대방 PC를 제어하거나 받는 형식이 일반적이었습니다.

HTML5의 등장으로 순수 웹 기술만으로는 불가능하게 여겨졌던 개발 영역들이 하나 둘 무너지고 있습니다. 그 중 관심있게 지켜보는 분야는 웹기반 원격제어 기술인데요. 최근에 접한 ThinVNC는 호스트쪽에만 소프트웨어를 설치하면 웹브라우저를 통하여 어느 곳에서나 접근하고 제어할 수 있는 웹기반 원격제어 오픈소스 프로젝트입니다. 일종의 웹서버인 셈이죠. VNC가 사용하는 전통적인 통신 방식인 AT&T RFB 프로토콜을 사용하지 않고 오직 오픈 웹 기술인 AJAX, JSON 그리고 HTML5를 이용하여 크로스-브라우저를 지원하도록 구현하는 것에 목적를 두고 있습니다. 놀랍게도 IE8까지 지원합니다.

ThinVNC.jpg

작년에 소개한 EduVNC는 그리드 방식의 저품질 화면 갱신 로직을 사용했지만, @boxersb님이 알려주신 guacamole은 갱신된 영역의 최적화된 이미지를 수신하고 Canvas 요소에 그려내어 실시간에 가까운 갱신 성능을 보여주었습니다. 그러나 RealVNC를 후킹하는 방식으로 구현되어서 동영상 또는 넓은 영역을 원활하게 그려내지 못하며, 일반인이 설치하여 쓰기에는 다소 어려움이 뒤따르는 등의 요인들은 조금 아쉽더군요. ThinVNC역시 guacamole과 유사한 갱신방식을 사용하지만 메모리 릭이 발생하여 화면이 멈추거나 키보드 입력을 지원하지 않고 guacamole보다도 예외 처리나 이벤트 처리가 불안한 등의 문제를 가지고 있습니다. 그러나 설치가 간편하면서도 더욱 뛰어난 화면 갱신 능력을 보여주었습니다. 쾌적하지는 않지만 윈도 모드로 재생되는 동영상을 감상할 수도 있었거든요.(웹브라우저만으로 말예요!) 특히, 화면갱신이 필요한 경우에만 응답(Long-polling)하도록 설계되어있어 불필요한 데이터 호출이 일어나지 않는 점이 가장 마음에 들었습니다.

멋지군요! ThinVNC는 소스포지에서 다운로드할 수 있습니다.

Comments

Web Designer Wall의 Nick La씨는 div, span, p, a, button, input 등 다양한 HTML 요소에 적용이 가능한 예쁜 그라디언트 버튼을 CSS3를 이용하여 만드는 방법에 대하여 포스팅했습니다. 이미지나 자바스크립트를 사용하지 않았으며, font-sizepadding속성의 값을 조절하여 쉽게 변경할 수 있습니다.

browser-preview.gif
CSS3를 사용하기 때문에 CSS3를 지원하지 않는 브라우저인 인터넷 익스플로러에서는 모양이 다르게 나타납니다.

button-states.gif
또한 버튼의 마우스 오버, 활성화 효과도 구현되어 있습니다. 그리고 그라디언트 외에도 박스 그림자, 문자 그림자, 둥근 모서리 효과도 함께 적용되어 있습니다.

.button {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}

.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

일반적으로 위와 같은 스타일이 적용되어 있으며 적용된 결과는 다음과 같습니다. CSS3를 지원하지 않는 IE의 경우 filter속성으로 그라디언트 효과를 만들어 내고 있습니다.

Rectangle or Rounded Can be Medium or Small

Span
Div

P Tag

H3

Gray Rounded Medium Small

Span
Div

P Tag

H3

White Rounded Medium Small

Span
Div

P Tag

H3

Orange Rounded Medium Small

Span
Div

P Tag

H3

Red Rounded Medium Small

Span
Div

P Tag

H3

Blue Rounded Medium Small

Span
Div

P Tag

H3

Rosy Rounded Medium Small

Span
Div

P Tag

H3

Green Rounded Medium Small

Span
Div

P Tag

H3

Pink Rounded Medium Small

Span
Div

P Tag

H3

CSS3 Gradient Buttons by Web Designer Wall

Comments

자바스크립트 라이브러리인 Prototype 1.7 RC2가 릴리즈되었습니다. RC2부터는 Element#purge메서드를 사용할 수 있습니다. 이 메서드는 이미 사용된 요소를 페이지에서 제거할 때 이벤트 핸들러와 스토리지 키를 삭제하는 역할을 수행합니다. 그리고 Element#update 메서드 역시 비슷한 청소 작업을 수행하여 메모리를 적게 사용할수 있도록 유지하는데 도움이 될 것입니다. 자세한 변동사항은 다음과 같습니다.:

  • Remove redefinition of `Element#cumulativeOffset` when `getBoundingClientRect` is present, as it seems to give inaccurate results. (Andrew Dupont)
  • Optimize element purging. (RStankov, Andrew Dupont)
  • Add `Element.purge` for cleaning up event listeners and element storage keys on elements that will be removed from the page. Make `Element.update` perform similar cleanup automatically. (Andrew Dupont, Tobie Langel)
  • The second argument to Event.Handler callbacks is the target element when no selector is present, or the matching element when a selector is present. Callbacks are always bound to the original element. (sam)
  • Fix issue where `Element.Layout#get` would fail to interpret negative pixel values. (Sebastien Gruhier, Andrew Dupont)
  • Fix bugs in layout.js. Add tests for `Element.Layout#toCSS`, `#toObject`, and `#toHash`. (RStankov, Andrew Dupont)
  • Add `Element.Layout#toObject` and `Element.Layout.toHash`. (Andrew Dupont)
  • Make `Element.Layout#toCSS` return camelized property names, as expected by `Element.setStyle`. [#1021 state:resolved] (njakobsen, Andrew Dupont)

Comments