한국 정보문화진흥원 사이트에 landmark roles를 적용한다면? Landmark roles는 정적인 웹 페이지에 책갈피를 달아놓은 것이라고 설명할 수 있다. 이는 HTML을 스타일링하지 않아도 어느 부분이 메인 컨텐츠 영역인지 사이드바(부가 정보) 영역인지 메인 메뉴(내비게이션) 영역인지 명확하게 구분하도록 해준다. Landmark roles는 현재 다음의 8종류가 있다. application: 웹 응용 프로그램에 선언한다. 여기서 웹 응용 프로그램이란 GMail, SVG와 같은 정적인 웹 [...]

WAI-ARIA의 tab, 아직 사용하긴 이르다. 라는 글을 썼었는데, 탭을 헤딩으로 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업을 위한 자바스크립트 라이브러리는 찾기가 어려워 하나 만들었다. 이름하여 flowTab. (기본적으로 자연스럽게 흐르는 컨텐츠를 탭 UI로 만든다 하여 이렇게 지었다.) 마크업과 자바스크립트를 아래 코드와 같이 작성하면 된다. <script type="text/javascript"> // <!– $(function() { $(‘#tabs’).flowTab(); // $(‘#tabs’).flowTab({tabSelector: ‘> .heading’}); }); [...]

WAI-ARIA에는 다양한 위젯 – 여기서 위젯이란 tab, dialog, alert 등을 말한다. – 이 있는데 그 중 tab은 아직 조금 문제가 많은 것 같다. WAI-ARIA 저작 가이드 문서의 tab 부분을 보면 탭 인터페이스를 구현하는 방법을 자세히 소개하고 있는데 그 중 키보드 인터페이스에서 좌/우, Ctrl+Tab/Ctrl+Shift+Tab, Ctrl+PageUp/Ctrl+PageDown 키를 이용하여 탭과 탭을 이동하는 기능을 구현하도록 문서화되어 있는데 좌/우 키는 [...]

이 글은 아래의 두 문서 내용의 요약 정리본이다. WAI ARIA Live Regions – MDC How to use ARIA Live Regions for dynamic content – CodeTalks 이 글을 통해 ARIA 개발의 감각을 끌어올릴 수 있기를 바라며 스펙(Taxonomy of WAI-ARIA States and Properties)에 더 많은 내용이 있으니 참고바란다. 예제들은 ARIA를 지원하는 스크린리더(Korean JAWS for Windows (한글용; 유료), [...]

KWAG 12번째 모임 발표자료 WAI-ARIA in Real World(on slideshare.net)입니다. 첫 발표라 긴장되고 어색했다는 느낌이 드네요. 죄송해요. ㅠ_ㅠ 발표에서 빼먹었던 내용들 이렇게 큰 모임에서의 발표는 처음이었던 관계로 긴장이 되어 준비했던 것들을 다 전달해드리지 못했습니다. 아쉬운 마음 글로나마 보충해봅니다. 참가하셨던 분들 중에 몇 분이나 보실지는 모르겠지만 도움이 되셨으면 좋겠네요. 브라우저별 ARIA 지원표에서… 프리젠테이션 10번 슬라이드의 내용입니다. 브라우저별 [...]

dynaTrace는 웹 페이지의 서버 실행 시간, 페이지 렌더링 시간은 물론 자바스크립트 한 줄의 걸린시간까지 볼 수 있는 툴이다. 얼마전 자바스크립트의 실행속도 때문에 시름시름 앓다가 지인의 소개로 이 툴을 알게 된 후로 그런 고민들이 싹 사라졌다. 자바스크립트 속도 때문에 골치를 앓고 있는 이라면 당장 설치하길… 암튼 좀 짱임.

http://example.com/page.html, http://example.com/page.html?param1=1, http://www.example.com/page.html 등 한 문서를 가리키는 여러 URL은 검색엔진에 심각한 중복 문제를 안겨줍니다. 최근 구글, 야후, 마이크로소프트가 이를 해결할 수 있는 방법을 제시하였습니다. <link rel="canonical" href="http://example.com/page.html" /> 위의 코드를 넣어주면 끝입니다. 간단하죠? 단어 그대로 표준 혹은 대표 링크를 선언해주는 것입니다. 이미 많은 발표자료, 동영상 등이 공개되어 있네요. 보시죠~ 참고로 첫 링크만 보시면 정리가 다 [...]

찬명님의 글에서도 알 수 있듯 IE6에서는 CSS multiple selector도 적용되지 않는데다가 child selector도 적용되지 않습니다. 아래와 같이 a와 b라는 ID를 갖는 디비전이 같은 클래스명을 갖는 하위요소를 포함하고 있다고 칩시다. <div id="a"> <div class="content">…</div> </div> <div id="b"> <div class="content">…</div> </div> 그런데 문제는 각각 다른 사람 – 혹은 같은 사람이더라도… – 이 작업한 a와 b가 부모, 자식간이 [...]

CSS Zen Garden 웹 폰트 버전, 잘 나와요! ㅋ 오페라10 알파 버전이 공개되었습니다. 다양한 기능과 속도 향상과 더불어 웹 폰트도 지원하는군요. 파이어폭스 3.1도 웹 폰트를 지원하니 이제 모든 주요 브라우저(IE와 사파리 포함)가 웹 폰트를 지원하게 되었네요. EOT냐 TTF냐 하는 이슈가 있긴 합니다만, Ajax 등장시절 구글 지도가 그랬던 것처럼 Best Case가 나오면 붐이 일 수도 있지 [...]

단어를 드래그, 더블클릭 등으로 선택하면 선택된 단어를 번역하여 보여주는 북마클릿, 이름하여 inline translator를 만들었습니다. 개인적으로 영문서 읽기 성공률을 올려보고자 만들었는데 생각보다 쓸만한 것 같아 공유해봅니다. :) Google AJAX Language API를 사용하였고 API 지원하는 모든 언어가 번역되어 보여집니다. 아래의 링크를 북마크에 추가하신 후 원하시는 페이지에서 실행하여 사용하시면 됩니다. ( IE7 이상과 파이어폭스, 오페라, 사파리 등의 최신 [...]

우리는 자신의 전자 시종에게 억압당하고 있다. 이 책을 우리의 해방을 위해 바친다. 사내의 동료들(웹 클라이언트 개발자들)과 Humane Interface (인간 중심 인터페이스)를 읽기 시작했습니다. 인간-기계 사이의 인터페이스는 무엇보다 인간이 사용하기 편해야한다.라고 이야기하는 이 책은 우리가 일상적으로 사용하고 있는 기계들에 대하여 알고 있는 불편한 점이나 혹은 익숙해져 불편한지 조차 모르는 것들을 끄집어내고 인간중심으로 바꾸어가는 방법과 그러기 위해 [...]

한국 웹 사이트들이 거대 인트라넷이 된 것이나 웹 표준 관련 기술들의 발전이 실무자들에게는 그냥 남 얘기인 것은 솔직히 말해서 IE 잘못이 아니다. 그냥 구버전 브라우저일 뿐인 IE6 잘못도 아니다. MS 잘못이다. IE6을 사용하는 사람들에게 캠페인을 할 게 아니라 MS를 들들 볶아야 한다. 아, 제발… 서비스팩도 좋고 뭐도 좋으니… IE7로 자동 업그레이드 좀 시켜주소. 지금 안되고 [...]

도메인 기간이 만료되어 방금 복구하였습니다. 스팸 죄송;

접근성을 해치지 않는 자바스크립트의 사용 신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 [...]

요즘 웹에서 벡터 그래픽을 표현하는 방법에 대한 관심이 생겨 canvas, SVG, VML 등을 살펴보고 있습니다. SVG라는 표준이 있고 HTML5에는 canvas 요소가 기본적으로 들어가는데 일단 IE 때문에 표준으로 짜자잔이라던지 CSS background로 벡터 그래픽을 사용한다던지 하는 신나는 일은 나~중에나 될 것 같습니다만 자바스크립트를 통해 IR처럼 구현하는 건 가능할 것 같습니다. 컨텐츠를 HTML로 기본적으로 마크업한 뒤 자바스크립트로 갈아치우는거죠. [...]

uvLayer youtube의 동영상을 검색하고 보고 묶고 공유하고 간직할 수 있다. 단지 접속 후 언어를 선택한 후 원하는 동영상을 찾으면 된다. 마우스를 다루는 재미를 느끼다보면 원하던 기능을 익힐 수 있다. 사용자에게 실제로 유용한 부분을 재미있는 UI를 통해 극대화시켰고 그 외에는 아무것도 없다. :) Juice – Discover. Organize. Share. 동영상, 이미지의 수집, 둘러보기와 웹 사이트를 구경하다가 궁금한 [...]

2008년은 개인적으로 많은 변화를 겪고 있는 해입니다. 겨미의 일로 그 어떤 때보다 슬프게 시작한 2008년. 군대 때문에 2년을 비우긴 했지만 2003년부터 몸 담았던 회사도 점점 상황이 좋지 않아 즐겁게 함께 하던 동료들과 헤어지기도 했어요. 전화위복이라고 했던가요? 여름이 다가올 즈음 영광스럽게도 오픈마루의 일원이 되었고 지난 10월 10일에는 혼인신고를 올리게 되었어요. 7달 전 6개월 시한부 선고를 받았던 [...]

CDK에서 주최하고 2008년 5월 1일부터 2008년 6월 1일까지 진행된 웹 표준 경진대회에 참석했습니다. 감사하게도 금상을 수상했음에도 불구하고 후기가 좀 늦었네요. 좀 게을러서 정리를 못하고 있다가 이제서야 정리해봅니다. 죄송합니다. ㅠ_ㅠ 대회에는 제가 참여하고 있는 하코사 강남스터디에서 3개의 조로 나누어 그 안에서 늘 긍정적이고 깜찍하신(ㅋㅋ) 비티님과 한 조로 참석하였습니다. 웹 표준에 많은 관심을 가진 디자이너이신 아트강님도 함께 [...]

2008년 7월 5일 하드코딩을 하는 사람들 웹 표준 스터디 소모임간의 연합 스터디 시 발표한 자료입니다. | View | Upload your own IE6의 역사 Windows와 함께 버전 업. Windows 98과 함께 IE5가 거의 쓰이지 않게 됨. Windows XP가 쓰이지 않게 되는 시점에 IE6에 대한 지원을 없애게 될 것 Windows 7의 기본 탑재 브라우저에 귀추가 주목됨 웹 [...]

TextMate의 강력한 기능 중 하나인 HTML의 Wrap Selection, Wrap Selection Each Line 기능을 Aptana에 추가하는 방법을 소개한다. 기능 소개 Wrap Selection, Wrap Selection Each Line은 리스트 마크업 – <ul>, <ol> – 을 작성할 수 있게 해주는 TextMate의 기능이다. 텍스트를 복사해넣은 후 각 줄의 시작과 끝에 <li> 태그를 넣는 수고를 크게 덜어주는 편리한 기능이다. Aptana에 기능 [...]