고급웹프로그래밍 HTML5 Project 다음 예제 중 하나를 HTML5로 구현하시오.
각 앱의 기능은 설명되어 있는 세부사항을 구현하되, 일부 API 기능을 추가하시오.
1 그림판을 이용한 갤러리 만들기
캔버스를 통해 그림판을 구현한다. 이 그림판으로 그린 그림은 CSS3로 만들어진 갤러리에서 보여 진다
그림판은 웹소켓을 이용해 동시에 한 그림판에서 작성이 가능하게 한다. 즉, 실시간으로 그림판을 공유하는 것이다.
(1) CSS3를 이용하여 갤러리에서 보여지는 블록이 자동으로 정렬되도록 하고, 이를 Drag&Drop으 로 자유롭게 움직일 수 있게 한다. 그림판에서 그림을 추가할 경우 해당 블록이 맨 앞에 나타나고 이 에 맞추어 자동으로 나머지 블록들도 정리되어야 한다.
(2) 그림과 설명을 로컬 스토리지에 저장한다. 이 때 지오로케이션을 사용해 그림판을 작성한 위치도 함 께 저장되게 한다. 즉, 그림과 설명, 위치, 저장 시간, 저작자가 로컬 스토리지에 저장된다..
(3) 오프라인웹을 이용해 오프라인에서도 사용 가능하도록 한다. 단 이 경우, 실시간 그림판 이용이 불 가하다는 것을 사용자에게 알려주는 창을 띄운다.
2 메모 캘린더 만들기
캔버스를 이용해 캘린더와 메모장을 구현한다. 이 때 메모장은 글을 입력할 수 있을 뿐만 아니라 이 미지 삽입이 가능하고, 캔버스로 그림을 그리는 것이 가능하다. 이를 버튼으로 구현하여 사용자가 선택할 수 있게 한다.
구현한 메모장의 내용은 저장 버튼을 이용해 저장하는 것이 아니라 메모장을 Drag&Drop을 이용 하여 캘린더 위에 Drop하면 캘린더에 메모장 내용이 저장되고 표시된다.
(1) 웹소켓을 이용해 캘린더에 접속한 사람과 일정에 관련된 실시간 대화를 할 수 있게 한다.
(2) 캘린더에 저장되는 모든 내용이 인덱스드DB에 저장되게 한다. 저장되는 내용은 날짜, 일정 내용, 저장 시간 등이다.
(3) 오프라인웹을 이용해 오프라인에서도 접속 가능하게 한다. 이 때 사용자에게 오프라인임을 알리는 창이 뜨게 한다.