Overview Inline Translator uses Bing translation API of microsoft. Bing API has usage limit and so Inline Translator’s default API key goes limit often. You can simply change API key to yours so you can avoid API usage limit. Change Bing Translation API Key At first, go to application page of bing webmaster Login with [...]

마크업 개발, 어떤툴들을 사용하시나요? View more presentations from mctenshi

들어가기 앞서… 오랜만에 펜을 잡… 아니 키보드를 두들겨봅니다. 이 글이 나태해진 제 자신에게 변화의 시작이 되기를 바라봅니다. 여기까지만 존대말… ^^; 이 글은 Accessible Culture의 Programmatically Determined라는 글의 일부 발번역과 나의 견해가 포함된 글임을 알린다. 프로그래밍 방식으로 결정 “프로그래밍 방식으로 결정” 이라는 문구는 61개의 WCAG 2.0 성공 기준 중 6개에서 눈에 띄는 항목이다. 그것은 아마 처음으로 [...]

며칠 전 facebook의 이벤트에 Microformat이 추가되었다는 글을 보았다. 어떻게 되었나 볼겸 facebook에 방문했다가 Landmark Role이 추가된 것도 발견하였다. Microformat이 뭐냐고? NULI 블로그에 아마티님이 좋은 소개글을 작성하신 바 있으니 참고하면 되겠다. facebook 이벤트에 추가된 Microformat은 이벤트에 hCalendar가 추가된 것, 그리고 이벤트 장소에 hCard가 추가된 것이다. hCard도 추가되었다고 해서 액티비티나 댓글 등에 있는 모든 프로필 정보에 hCard가 [...]

한국 정보문화진흥원 사이트에 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 지원하는 모든 언어가 번역되어 보여집니다. Google 번역 API가 12월 1일부로 폐기된 관계로 Microsoft Translation API로 번역 API가 변경되었습니다. 아래의 링크를 북마크에 추가하신 후 [...]

우리는 자신의 전자 시종에게 억압당하고 있다. 이 책을 우리의 해방을 위해 바친다. 사내의 동료들(웹 클라이언트 개발자들)과 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. 동영상, 이미지의 수집, 둘러보기와 웹 사이트를 구경하다가 궁금한 [...]