TextMate한테 HTML5의 새 elements 인식시켜 주기

, 댓글이 없음 »

TextMate에서 CSS 코딩을 하다 보면, HTML5에서 새로 소개된 elements를 인식하지 못해서, syntax coloring을 제대로 안 해주는 아주 사소한 문제가 있다.

이 문제를 수정하려면, TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Syntaxes/CSS.plist 파일을 열고 Root>patterns>Item 0>patterns>Item 1 속에 있는 match 정규식을 다음처럼 수정해주면 된다.

\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|source|span|strike|strong|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video|wbr)\b
꼬리표:

HTML5의 새로운 문서 Outline 알고리듬

2개의 댓글 »

일반적으로 웹 페이지 혹은 웹 애플리케이션을 제작할 때는 페이지에 담긴 내용을 효과적으로 전달할 수 있도록 그 중요도에 따라 전체적인 내용의 윤곽(outline)을 그리는 일부터 시작된다.

그런데 HTML5에선 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들이 소개되었을 뿐만 아니라 웹 브라우저가 문서를 읽고 DOM tree를 해석하는 outline algorithm에도 변화가 있어서, 이 바뀐 점을 올바로 이해하고 적용하는 것이 문서 전체의 윤곽을 잡는데 아주 중요한 일이 되었다. 글 마저 읽기 »

꼬리표:

WebM 그리고 Google Font API

댓글이 없음 »

오늘 열린 Googl I/O 2010에서 개발자들에게 선택의 폭을 넓혀줄 반갑고 새로운 기술들이 소개되었다. 바로, WebM과 Google Font API.

그 동안 HTML5의 video tag 안에서 생식하게 될 Video와 Audio 형식을 두고 license를 문제 삼아 많은 논란들이 있었는데, 이미 예견되었듯이 Google에서 WebM 이름의 video codec을 BSD 스타일로 공개하였다. 이 포멧은 고화질 영상을 낮은 성능의 CPU를 가진 휴대용 기기들에서도 효율적으로 전송할 수 있다고 주장하고 있다.

앞으로 Mozilla, Opera, Google Chrome, Adobe 그리고 심지어 IE9마저도 VP8 codec 설치를 조건으로 하지만 지원할 것을 약속하고 있는 상황이다. Safari의 지원 여부는 아직 알 수 없지만, 이미 YouTube를 포함한 개발자들의 지지 성명이 잇다르고 있는 가운데 아마도 대세를 따라야 하지 않을까?

또 하나, 이젠 FOUT 걱정없이 web fonts를 자신의 페이지에서 사용하는 작업도 Google Font API 덕분에 쉬운 일이 될 듯하다. 그리고 JavaScript library인 WebFont Loader를 쓰면 자신의 서버에 존재하는 web font를 포함한 다양한 font provider를 선택해서 font 로딩에 관한 좀 더 섬세한 조절도 가능하단다.

현재 제공되는 Google Font Directory에는 아직 그 선택의 폭이 넓지 않지만, 차차 개선될 것이라 예상되고 역시나 이를 활용할 다양한 한글 글꼴의 부재는 아쉬운 일.

어쨌건, 앞으로 license 걱정없이 창작 Video/Audio와 Web font를 추가하는 일이 아래처럼 간단해졌으니 두 손 들고 환영할 일이다. 8) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WebM and Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Some+Cool+Font' rel='stylesheet' type='text/css'>
<style>
    body { font-family: 'Some Cool Font', serif; font-size: 100px; }
</style>
</head>
<body>
<h1>This is cool!</h1>
<video width="640" height="360" poster="__POSTER__.jpg" controls>
    <source src="cool_video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
    <source src="cool_video.webm" type="video/webm; codecs='vp8, vorbis'"></source>
    <object width="640" height="384" type="application/x-shockwave-flash"
        data="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4">
        <param name="movie" value="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4" />
        <img src="__POSTER__.jpg" width="640" height="360" alt="__TITLE__" />
    </object>
</video>
</body>
</html>

이걸 보니, 어쩔 수 없는 과거 유물들을 위한 Flash 코드의 존재는 여전히 꺼림칙하고 지저분하다.

꼬리표:

멋져 부린 HTML5 프리젠테이션 슬라이드

한 개의 댓글 »

이렇게 웹 브라우저 상에서 실제 HTML5 기능을 이용한 멋진 슬라이드를 구경하고 있노라면 눈과 머리에 충분한 자극이 될 것이다.
HTML5 설명 프리젠테이션 슬라이드
원래 Google Chrome 브라우저에서 시연할 용도로 제작되었으며, 대부분의 최신 브라우저들에서도 내용을 확인해 볼 수 있지만, 슬라이드에 있는 시연 기능을 100% 사용하려면 다음과 같이 터미널에서 Chrome의 시험적 기능들을 켜준 후에 열어서 보아야 한다.

/PATH_TO_GOOGLE_CHROME_APPLICATION/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -enable-webgl -enable-geolocation -enable-desktop-notifications -allow-file-access-from-files

슬라이드는 code repository에서 내려받을 수 있으며, 앞으로 계속 새로운 내용이 수정/추가될 예정이란다.

IE에서 Google Chrome Frame을 심어놓고 HTML5 슬라이드를 시연한다면, 너무 심술긏은 짓일까? :-o

꼬리표:

HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들

3개의 댓글 »

현재 웹의 화두는 웹 어플리케이션으로의 진화라고 요약될 수 있을 것이다. 이를 아우르는 새로운 웹 표준으로 HTML5가 자리잡고 있는데, 여기에는 과거 데스크탑 어플리케이션의 전유물로만 여겨지던 여러 기술들을 거의 모두 아우르고 있다. 과거, 한 때 정체되어 있던, HTML4, XHTML1 그리고 DOM2 HTML 웹 기술들을 대체할 목적으로 새로운 틀이 만들어지고 있는 것이다.

그렇다면, 지금 당장 HTML5를 사용할 수 있을까? 해답은 바로 웹 브라우저들의 지원 상황에 달려있다.
공식적으로 발표된 HTML5의 W3C Candidate Recommendation 단계로의 진입은 일러야 2012년으로 예상하고 있으며, 현 브라우저들의 지원 상황도 그 편차가 심하지만, 대세를 그르치지 않는 이상 앞으로 상황은 급속도로 좋아지리라 생각된다.

또한, 당장 HTML5를 사용해도 별 큰 문제가 없는 것이, HTML5 태생부터 과거 호환성을 염두에 두었기에 큰 무리없이 점진적으로 새 기술을 흡수(Progressive Enhancement)하는데 유리하다는 점도 있겠다. 좀 더 자세한 브라우저들의 HTML5 기술 지원 상황은 When can I use… 페이지에서 확인할 수 있다.

자, 그럼 HTML5로 전환하기 전 챙겨야 할 사항들을 알아보자. 글 마저 읽기 »

꼬리표: