티스토리 뷰

SharePoint/SharePoint 2010

SharePoint 2010에서의 HTML 5 지원

정홍주 2012. 4. 2. 08:30

 

SharePoint 2010에서의 HTML 5 지원

 

HTML 5에 대한 내용을 다루어보기 전에 SharePoint 2010에서도 HTML 5을 지원할 수 있으며 개발자들은 웹 페이지나 웹 파트를 생성할 때 HTML 5를 작업 할 수 있습니다.

외국의 SharePoint MVP 중에서 Ted의 SharePoint Conference와 며칠 전 Webinar 내용을 참고해서 블로깅을 해보도록 하겠습니다.

 

HTML 5의 구조는 아래와 같습니다. 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

</body>

</html>

 

위 구조를 이용해서 HTML 5용 마스터페이지를 생성해서 더 구체적으로 지원할 수도 있습니다.

HTML 5에서 새롭게 지원되는 요소는 여러 가지가 있는데 이번 글에서는 Canvas와 Video를 통해 지원되는 내용을 간략히 확인해보도록 하겠습니다.

SharePoint 2010의 Module 프로젝트를 통해 aspx 페이지를 아래와 같이 작업하여 배포합니다. 

<!DOCTYPE HTML PUBLIC>

<html>

<head>

    <meta charset="utf-8" />

    <title>HTML5 Video Support</title>

</head>

<body>

<h2>HTML5 Video Demo</h2>

 

          

  <video width="480" height="360" controls="controls" poster="http://sp.webtime.co.kr/Shared%20Documents

/Falls.png" >

      <source src="http://sp.webtime.co.kr/Shared%20Documents/Falls.ogv" type="video/ogg" />

  </video>

 

</body>

</html> 

 

video라는 태그가 HTML 5에서 새롭게 지원되는 요소인데 브라우저별 지원하는 video 형식이 차이가 납니다. IE 9에서는 제한적이라 크롬으로 테스트해보도록 하겠습니다. SharePoint Online에 배포하고 테스트한 결과입니다. 

 

 다음은 Canvas 인데 기존 사용자 경험과는 상당히 다른 모습을 보여주고 있네요~

마우스로 이리저리 움직이며 아래 커튼 같은 부분이 움직이는 것을 알 수 있습니다. 대부분은 javascript를 통해 제어하고 HTML 5의 태그는 아래와 같이 한줄입니다.

<canvas width="650px" height="450px">    

</canvas>

 

 

SharePoint 2010에서도 HTML 5를 지원한다는 것을 알아보았으니 다음 글에서는 SharePoint 2001의 HTML 5 사용자 지정 마스터 페이지나 HTML 5의 더 다양한 요소를 처리해보도록 하겠습니다.

 

 

 

'SharePoint > SharePoint 2010' 카테고리의 다른 글

SQL Server 2012 Reporting Services – SharePoint  (0) 2012.05.21
SharePoint 2010-Sandboxed 솔루션에서의 Localization  (0) 2012.04.10
SharePoint 2010에서의 jQuery  (0) 2012.03.20
SharePoint 2010의 Module  (0) 2012.03.12
PowerPoint 2010의 문서 동시 작업  (0) 2012.03.08
댓글