HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.
㈜ 디지믹스에서 개발한 DGX 소프트웨어 중 DGX.bridge.koisk 는 Interactive Contents를 위해
최적화된 제품군들로 구성되어 있습니다.
DGX.bridge.koisk 는 독립형 KIOSK 혹은 네트워크가 구성된 KIOSK 에 탑재되어 별도의 서버와
데이터베이스 소프트웨어 설치 없이 한번의 설치로 모든 기능이 기동되며, 개발 클라이언트에서
쉽게 접근할 수 있는 API 라이브러리를 제공하고 있습니다.
DGX.bridge.koisk 에서는 다음과 같은 기본적인 기능을 제공합니다.
클라이언트와 클라이언트 사이의 실시간 통신(XML)
클라이언트와 클라이언트 사이의 파일(IMAGE) 송수신
미니 웹서비스(웹브라이저 지원)
전자방명록(데이터베이스/이미지)
E-mail 발송(이미지 첨부가능)
SNS 포스팅(이미지 첨부가능)
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
HTML이 무엇인지, 지금까지 어떠한 흐름을 거치며 HTML5가 되었는지, HTML5의 설계원칙, 중요한 특징, Browser 지원현황, 웹표준(접근성, Semantic), content 모델에 따른 분류, API 사이트와 유용한 Tutorial 사이트들에 대해서 알아봅니다.
㈜ 디지믹스에서 개발한 DGX 소프트웨어 중 DGX.bridge.koisk 는 Interactive Contents를 위해
최적화된 제품군들로 구성되어 있습니다.
DGX.bridge.koisk 는 독립형 KIOSK 혹은 네트워크가 구성된 KIOSK 에 탑재되어 별도의 서버와
데이터베이스 소프트웨어 설치 없이 한번의 설치로 모든 기능이 기동되며, 개발 클라이언트에서
쉽게 접근할 수 있는 API 라이브러리를 제공하고 있습니다.
DGX.bridge.koisk 에서는 다음과 같은 기본적인 기능을 제공합니다.
클라이언트와 클라이언트 사이의 실시간 통신(XML)
클라이언트와 클라이언트 사이의 파일(IMAGE) 송수신
미니 웹서비스(웹브라이저 지원)
전자방명록(데이터베이스/이미지)
E-mail 발송(이미지 첨부가능)
SNS 포스팅(이미지 첨부가능)
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
Chaos Engineering을 위한 최신 도구 업데이트 - 윤석찬 (AWS 테크에반젤리스트)Channy Yun
- 발표 영상: https://www.youtube.com/watch?v=mLWD4KCQuT4
카오스 엔지니어링(Chaos Engineering)을 테스트해 볼 수 있는 각종 도구에 대해 최신 업데이트를 해드립니다. 로컬 장애 주입용 도구 부터, AWS System Manager기반 Runcommand 도구, AWS Lambda 도구, 그리고 ToxiProxy, ChaosToolkit 같은 오픈 소스 기반 도구와 간단한 데모를 함께 보여드립니다.
How to Measure DevRel's Perfomances: From Community to Business - Channy Yun ...Channy Yun
Developer relations are an impactable to generate business values in many software companies who hope to gain mindshare of developers in various approaches from contributing open sources to gaining meaningful sales leads. In this session, you’ll learn about how to measure the perfomrmance of developer relations for building community, increasing impacts and generating leads for sales.
https://tokyo-2018.devrel.net/speakers/yun/
카오스 엔지니어링(Chaos Engineering)이란 프로덕션 서비스의 각종 장애 조건을 견딜 수 있는 시스템의 신뢰성을 확보하기 위해 분산 시스템을 실험 하고 배우는 분야입니다. 즉, 개발자들이 현실 세계에서 발견되는 시스템 장애를 미리 탐지하여 복원성 높은 아키텍처를 구성하는 방법을 공유합니다.클라우드 컴퓨팅의 발전과 데브옵스 방법론을 기반으로 자동화를 통해 좀 더 쉽게 개발자들이 직접 분산 시스템을 통제된 환경에서 실험을 하는 동안 나오는 결과를 관찰함으로써 현실에서 실제 행동 방법을 배울 수 있습니다. 본 세션에서는 카오스 엔지니어링의 기본 개념과 함께 Kubernetes용 Chaos Tool인 KubeMonkey를 통해 무작위로 클러스터의 포드를 삭제하여 장애 복구 서비스 아키텍처를 검증하는 방법을 설명합니다.
클라우드 컴퓨팅과 Daum의 사례- 윤석찬 (KREN 연구 협력 포럼, 2013) Channy Yun
출처: http://www.koren.or.kr/board/board.php?task=view&db=data2&no=44
<개발자에서>
최근에 클라우드 기술이 부각되면서 다음에서도 발빠르게 사내 프라이빗 클라우드 서비스를 준비중이다. 가장 먼저 한 일은 사내 개발자들이 언제든지 자신의 가상머신(VM)을 할당 받아 테스트해 볼 수 있는 사내 클라우드 플랫폼 구축이었다.
2011년 초 오픈소스인 클라우드스택을 최적화해 구축했으며, 개발자들은 공용 테스트 서버나 서비스 서버에서 못하던 자신만의 최신 기술 습득이나 테스트를 아무 구애 받지 않고 자기 서버에서 해 볼 수 있게 됐다. 이 플랫폼은 앞으로 클라우드 파운더리 기반의 사내 PaaS과 하둡 테스트베드로도 활용하고 있으며, 실제 다음 서비스에서 클라우드 컴퓨팅 기술을 활용하는 기초가 되고 있다.
- http://www.bloter.net/archives/107844
DockerCon 2014에서 Adrian Cockcroft가 발표한 The state of the art in Microservice 중 해외 사례 발췌본
https://blog.docker.com/2014/12/dockercon-europe-keynote-state-of-the-art-in-microservices-by-adrian-cockcroft-battery-ventures/
2005년 구글맵으로 부터 시작된 웹 기반 지도 API 서비스는 웹 2.0의 데이터 플랫폼 서비스의 주요 사례로 떠올랐다. 그 이후 야후!, 마이크로소프트 등에서 지도 플랫폼 서비스와 API 제공이 잇달았으며, 국내에서도 다음이 최초로 항공 사진(스카이뷰)과 거리 사진(로드뷰)을 제공하고 네이버도 참여함으로서 로컬 기반 서비스의 폭발적 성장의 견인차 역할을 하였다. 노키아의 Here 및 오픈스트릿맵 등 제 3의 사업자 및 협업 기반 플랫폼이 성장하였으며, Open Layer 라이브러리 및 Open GIS 등 다양한 공개 소프트웨어 들도 함께 성장하였다.
특히, 스마트폰의 보급과 아울러 모바일용 지도 SDK를 적극 보급 및 지원하는 추세로 기존의 Ajax 기반의 이미지 기반 웹 지도 표현 기술은 WebGL 혹은 Canvas를 통해 3차원 기술을 도입하면서 웹 호환성 및 성능을 동시에 높히고 있다. 구글 스케치업을 통해 시작된 공간 3차원 서비스는 약간 주춤하지만 45도 이미지너리 및 DEM 기반 데이터는 계속 추가되고 있다.
최근에는 구글맵 엔진 서비스와 같은 전문 사용자의 참여를 이끌어 내어 클라우드 소싱 형태의 지도 데이터 생성 커뮤니티를 통해 저개발 국가 및 북한과 같은 미공개 지도 데이터 생산을 만들고 있다.
2011년부터 구글 부터 지도 API 서비스 유료화를 단행하여 보안 강화 및 품질 및 성능 향상을 통해 제 3자 재판매를 통한 사업을 진행하고 있다. 또한, 최근 많은 기업들이 글로벌 홈페이지에 자사의 위치나 고객센터를 이용자들이 찾는데 활용하고 있으며, 이를 활용해 물류•관제•입지분석•위험관리•마케팅 등에 활용하고 있다.
현재 글로벌 지도 API 플랫폼은 단순히 베이스맵을 지원하는데 그치지 않고 공간 정보를 시각화 및 표현하는데 필요한 다양한 기능을 제공하면서, 정보 전달 역할을 강화하고 있다. 또한, Mapbox 등 지도 타일의 다양한 스타일과 테마 기능을 통해 좀 더 미려한 지도를 제공하기도 한다.
향후 글로벌 지도 API 플랫폼은 단보다 고도화된 시스템을 활용해 데이터 분석 및 2차원 시각화 그리고 3차원 공간 정보 활용으로 진화하고 있다.
2. Ag e n d a
목적
–차세대 웹 표준의 방향에 대한 모색
웹 표준 동향
–웹 표준 (W vs. W
3C HATWG)
–HTM 5 소개
L
Demo
Q&A
3. 리치 웹 시대의 문제
SaaS, Service as a Software
– 과거의 유산 : DHTM ActiveX, NS Plugin, Flash
L,
– 새로운 기술 : Ajax, WPF/e, Apollo, Widget
웹을 기반으로 하는 어플리케이션
–URI- addressable ( 접근 가능성 )
–Search- index able ( 콘텐츠 기반 )
–Readable and editable ( 확장 HTML)
–HTM L/CSS/DOM /JS 기반 리치 웹
상용 벤더의 “데스크톱 리치 웹과 분리”해야 한
다.
4.
5. HTML Tim e lin e
vs.
<blink>
<marquee>
<font>
1990 1995 1996 1997 1998 1999 2000 2001 2002
HTML 1.0 XHTML 2.0
Begins…
SGML
RFC 1866
6. Wo rld Wid e We b
Co n s o rtium (W3 C )
운영 현황
– 웹을 발명한 Tim Berners- Lee 에 의해 1994 년 시작
– 400 개 회원사 , 65 명의 직원 (2006 년 현재 )
– M (US), ERCIM ( 프랑스 ), 게이오대 (Japan), 15 개 지역 사
IT
무국 운영
운영 방법
– 강력한 표준안 제정 과정
– 특허 무료 정책
– 공감대 , 개방성 , 상호 운용성 중시
– 40 개 이상의 다른 표준 단체와 연계 작업
– 국제 표준에 맞는 합리적인 운영
주요 목표
– 웹 문서에서 하나의 ‘ ’ 지향 웹을
– 데이터서비스 : XM 웹 서비스 (W Services), 시맨틱 웹
L, eb
(Semantic Web)
7. W3 C 주요 목표
XML
– 기계 및 인간 모두에 대한 접근성 가능 , 국제화 용이
– 주요 이슈
• 텍스트 메시징의 문제 ( 바이너리 XML)
• 웹에서 XM 전환이 사실상 실패
L
웹 서비스 : 기계 - 기계 상호 교환 (cf. 사람 - 기계 상
호 교환 )
– XM 기반 메시지 처리 : 플랫폼 독립적인 모델
L
– 확장성을 고려한 프레임웍 : 상호 운용성 확보
– 기계가 처리할 수 있는 형식 : 통합 적합성 확보
시맨틱 웹
– 데이터와 의미를 가진 웹
– 기계가 처리 가능한 의미 있는 웹으로 전환 목표
8. XHTML
XHTM XM 기반 마크업 언어
L: L
– XHTM 1.0: HTM 4 을 XM 화 (W form
L L L ell- ed) 시킴
• HTM 의 전환 전략으로 만들어짐
L
– XHTM 1.1: XHTM 1.0 Strict 을 완성 시킴
L L
– XHTM Basic: 휴대폰 , TV 및 프린터에서도 사용 가능
L
– XHTML2: 진정한 XM 기반 마크업 언어
L
XHTM 2.0 주요 특징
L
– XM 기반 원리에 충실
L
– 구조적 마크업에 치중
– 더 많은 시맨틱 마크업 채택
– 사용성 및 접근성 , 국제화 강화
• XForm XM
, LEvents 사용
– 스크립트 사용 지양 및 장치 독립성 확대
9. XHTML 2 . 0 (1 )
Generic XML
– 모든 외양은 CSS 로 선언 가능하게 함
– 모든 요소에 하이퍼 링크 추가
시맨틱 태그 강화
– <meta> 및 <link> 에 있는 title 같은 속성을 모든 태그에서 사용
모든 외양 태그 삭제
구조적 마크업 대거 확장
– <br/> 대신 <l>. <h1>, <h2> 대신 <nl>, <section> 및 <h> 신설
I think that I shall never see<br />
A poem lovely as a tree
<l>I think that I shall never see</l>
<l>A poem lovely as a tree</l>
10. XHTML 2 . 0 (2 )
주요 이슈
–HTM 에 대한 하위 호환성 (Backw
L ard Com patibility)
포기를 전제
–<img>, <applet> 등 외부 객체를 <object> 로 통일
–<form 은 확장 가능한 XForm을 제공
>
–XM Events 사용을 위해 <script> 를 <handler> 로 대
L
체
–URL 연속성을 위해 <fram 을 Xfram 로 대체
e> es
가장 큰 이슈
– 과감한 변화에 따른 비용 증가에 대한 효용성 부족
– 웹은 W 의 방향에 따라 움직여 주지 않았음
3C
11. W3 C 에 대한 비판
기술 사양에 대한 비판
–XM 스펙의 과도한 확장으로 현실 웹과 괴리
L
• 웹의 변화 속도에 맞추지 못하는 상황 지속 )
– 너무 어렵고 긴 구현 스펙으로 인한 구현 어려움
• DOM 219p, SVG 719p
3
–W 2.0 및 Rich W 등 새로운 변화에 대응 못함
eb eb
–SOAP, WSDL 등 현실 웹에서 거의 사용 안 함
조직에 대한 비판
– 클라이언트 기반 ( 브라우저 ) 회원사들의 배제
– 핵심에 집중하지 않은 너무 큰 이상적인 목표 치중
– 각 W 의 책임감 있는 운영 부재 및 외부와의 단절
/G
– 각 W 의 방만한 회원사 운영 및 비 생산적인 활동
/G
13. WHATWG
설립 계기
– 2004. 4 W 3C 웹어플리케이션 CDF 워크샵 (
http://w w 3.org/2004/04/w
w .w ebapps- cdf- ws/)
– 2004. 6 W HATW 결성 (W Hypertext Application
G eb
Technology W orking Group, http://whatwg.org)
주요 목표
– 웹 페이지 주요 기능인 HTM 을 확장 .
L
– 지금의 “ 수준” 맞는 “
웹 에 적합한 웹”개발 모델 제시
– 리치 웹 어플리케이션 및 동적 웹 서비스 제시
주요 멤버 : Mozilla, Opera, Apple, Google
활동 방법
– 공개된 메일링 리스트를 통해 의견 청취
– 오픈 소스 방법론을 통한 스펙 개발
14. In te ro p e ra b ility Is s ue s
<p><strong>a<em>b</strong>c</em>
p p p
STRONG STRONG EM STRONG
#text: a EM #text: a EM #text: c #text: a EM
#text: b #text: c #text: b #text: b #text: c
15. WHATWG 표준의 목표
기본 아이디어
– 현실적인 웹 문서 상황에 맞는 표준 스펙 (95% 이상이
아직 HTM 임 )
L
– 꼭 필요한 필수적인 표준 확장 기능을 처리 ( 현업 개발
자 피드백 )
– 실제적인 새로운 기능 추가 ( 웹 어플리케이션 )
– 하위 호환성 보장 ( 웹 브라우저 현실 인식 )
– 개발에 꼭 필요한 디버깅 및 에러 처리 방식 기술
개발 방식
– 현재 브라우저를 역 공학 후 호환성 유지
– 에러 처리에 대한 방식 제공
16. Th e DOCTYP E
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
17. Th e S p e c s
We b We b Fo rm 2 . 0
Ap p lic a tio n s
1 .0
We b Co n tro ls 1 . 0
18. WHATWG 작업 스펙
WebForm 2.0 (Completed)
– 웹 저작자들이 Form을 확장하여 사용할 수 있도록
함
– 웹 어플리케이션 제작 시 요구 기능 추가
W Application 1.0 (W
eb orking)
–HTM 에 시맨틱과 구조적 마크업 확장
L
– 고급 위젯에 사용할 수 있는 메뉴 , 콘트롤 , 툴바 정
의
– 브라우저 환경 개선 및 오프라인 브라우징 , 통신 처
리 개선
W Controls 1.0 (Drop)
eb
– 자바스크립트와 CSS 에 다양한 위젯 개발 기능을 부
여
19. W3 C Ric h We b Clie n ts
W3C 내 새로운 그룹 형성
– 2005 년 10 월 결성 / Ajax 및 위젯 등 동적 UI 및 XM 기반
L
웹 어플리케이션에 뒤늦게 호응
W Application Form
eb ats W/G
– W Form 2.0 2006- 08- 21 W
eb s orking Draft
– XM Binding Language (XBL) 2.0 2006- 09- 07 Last Call
L
W orking Draft
– Client- Side W Applications (W
eb idgets) Requirements
2006- 11- 09 W orking Draft
–W idgets 1.0 2006- 11
W APIs W
eb /G
– XM LHttpRequest Object. W indow Object 1.0.
– DOM Level 3 Events.
– File Upload, Selectors API, Rem ote Events for XM (REX) 1.0
L
20. Bre a kin g Ne w s !
Tim Berners- Lee, “Reinventing HTML”
(2006- 10- 27)
–http://dig.csail.mit.edu/breadcrumbs/node/166
–W form 와 Sem
ell- ed antic 마크업의 장점에도 불구
하고 HTM 에서 XHTM 로의 전환은 실패했음을 인
L L
정
– 새로운 HTM 개선 워킹 그룹 개설 제의
L
21. HTML W/ G 발족
600 여명의 외부 Invited Expert (W3C 사상 최초 )
공개 메일링리스트 및 W HATW 와 병행 해서 표준안
G
작업
33. Fa llb a c k fo r n e w e le m e n ts
• http://ejohn.org/blog/htm shiv/
l5-
•http://rem ysharp.com /2009/01/07/htm enabling- script/
l5-
34. 주의 사항
Inline 요소이므로 Block 요소로 정의 필
요
IE6/IE7
–createElement 메소드를 이용
• C.f. Dean Edwards IE7 Script, jQuery Plugin
Firefox 2
–XHTM 로 제공 해야 함 (xm content- type)
L l
39. F o rm 유효성 확인
최대 최소값 표현
<input type="range" min="20" max="80">
필수 항목 확인
<input type="email"
required="required">
정규 표현식
<input type="text" pattern="[a-z0-9_-]+">
텍스트 최대값
<textarea
maxlength="2000"></textarea>
40. Fo rm 이벤트 수정
<p>Search: <input type="text" oninput="search(value);"></p>
<label>
<input name="byte" type="number" min="0" max="255“
required="required" oninvalid="failed(event)" /></label>
<output name="error"/>
<script type="text/javascript"> <![CDATA[
function failed(event) {
var form = event.target.form;
if (event.target.validity.typeMismatch)
form.error.value = ' 숫자만 허용 됩니다 ..';
else if (event.target.validity.rangeUnderflow)
form.error.value = ' 숫자가 0 보다는 커야 합니다 .';
else if (event.target.validity.rangeOverflow)
form.error.value = ' 숫자가 255 이하여야 합니다 .';
event.preventDefault();
}
]]> </script>
</form>
41. Fa llb a c k fo r We b Fo rm 2
http :// c o de .g o o g le .c o m/ p / we bfo rms 2/
42. 3 . 멀티 미디어
Canvas
– SVG Foreign Object
Audio / Video
~ 33% browsers natively
–Open Source JS Shim for
s
Canvas and SVG (autum n
2009) support in IE
–No Flash in iPhone &
Android
43. Ca n va s
Dynam and interactive graphics
ic
Draw images using 2D drawing API
–Lines, curves, shapes, fills, etc.
Native SVG
Useful for:
–Graphs
–Applications
–Gam and Puzzles
es
–And m ore…
44. Vid e o a n d Aud io
멀티미디어 서비스가
주류 서비스로 편입
거의 모두 플러그인 기
반으로 제공되고 있음
(c.f. Open Video)
Flash 가 de facto
standard
브라우저에 네이티브
지원 필요성 (c.f.
OGG)
45. Fa llb a c k fo r Vid e o
<video>
<source src="zombie.ogg" type="video/ogg"/> <source
src="zombie.mp4" type="video/mp4"/>
<embed src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash" width="500"
height="396" allowscriptaccess="always"
allowfullscreen="true"/>
</video>
http://camendesign.com/code/video_for_everybody
46. 4 . 오프라인 지원 및 스토리
지
데이터를 클라이언트 사이드에서 저장
필요
웹 애플리케이션의 오프라인 기능 지원
필요
–데이터베이스 서비스 지원
–SQLite database 및 DOM storage api (key/
value pairs)
구현 브라우저
–Firefox, Safari, Opera, Google Chrom and
e
47. 5 . 웹 워커
일반 애플리케이션은 Thread 와 Process 를 가
짐
웹 애플리케이션에 동시 실행 가능성 부여
오버로드가 심한 애플리케이션에서 분리된
Thread 로 실행 가능
–Dedicated (think: bound to a single tab)
–Shared (shared am ong m ultiple w indow in an
s
origin)
–Persistent (run when the brow ser is “closed”)
구현 중 : Firefox 3.5, Safari and Google
Chrome
48. 6 . 데이터 처리
전통 브라우저에서 HTM (DOM 처리의 문제
L )
–HTM 상의 DOM Tree 오류 수정
L
– 동적 마크업 추가 - innerHTM L()
– 이벤트 핸들러 추가 – AddEventListner()
–HTM 문서에 API 추가 -
L
docum ent.createElement()
테이블 모델 추가
– createCaption(),createTHead(), deleteTFoot() ...
Datagrid : 데이터를 찾는 새로운 방법
– 행과 열을 가지는 새로운 데이터 트리 구조
–Datagrid 는 새로운 이벤트 모델로 제어가 가능하다
• 데이터 얻기 : getRow Count(), getCaptionText()
• 데이터 편집 : setRow editCell(), updateEverything()
(),
• 데이터 핸들 : selectAll(), invert(), clear()
49. 7 . 기타
HTML
– 모든 Tag 의 시맨틱 정리
– <b> 와 <i> <small> c.f. <strong> vs. <em>
– 새 속성
• draggable, spellcheck, contenteditable 속성 제공
DOM
– getElementByClassNam e()
– CrossDom ain Messaging (c.f. XHR)
사용자 정의 프로토콜 및 핸들러
– fax:// - re g is te rCo nte ntHand le r()
W Socket
eb
50. 그 밖에 주요 웹 표준
PNG 구현
CSS 2.1 및 CSS 3
3D API
Selector API –querySelector()
Geolocation API
52. 표준화 참여 방법
W3C
–W 3C 새 HTM W 의 Invited Expert 참여
L /G
–W 3C 테크니컬 문서 참조 http://w w 3.org/TR/
w .w
– 표준안 단계별의 Last Call 및 Issue 추적
–W 3C 한국 사무국에 의견 제시 (http://w w 3.or.kr)
w .w
WHATWG
–WHATW 위키 및 블로그 : Feedback 및 제안
G
• http://blog.whatwg.org, http://wiki.whatwg.org
– 공개 메일링 리스트 : 진행 사항 확인
• http://listserver.dreamhost.com/pipermail/whatw w
g- hatwg.org/
– 표준 스펙 테스트 : 웹 브라우저 구현 단계 별로 테스트
• Firefox DOM Storage,
http://channy.creation.net/work/firefox/domstorage/
53. Re s o urc e s
W3C
– http://w w 3.org/htm g/htm
w .w l/w l5/
– http://w w 3.org/TR/htm design- principles/
w .w l-
– http://dev.w3.org/html5/htm differences/
l4-
Firefox 3.5
– http://hacks.m ozilla.org/ (
http://w w ozilla.or.kr/zine/?tag=35days)
w .m
– https://developer.m ozilla.org/Ko/Firefox_3.5_for_developers
Comparision
– http://en.wikipedia.org/wiki/HTML_5
– http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28H
– http://a.deveria.com /caniuse/
– http://w iki.whatwg.org/wiki/Implementations_in_Web_browsers