HTML5 이러닝 콘텐츠 저작도구 웹캣(WebCAT)
http://webcat.openplay.kr
Create Your Own Contents!!
기존 플래시(FALSH)로 저작된 이러닝 콘텐츠와 동일한
사용자 경험, 학습몰입도, 심미성 등을 제공하는
OSMD 가능한 HTML5 콘텐츠를 보다 편리하게
저작 가능한 저작 도구
하나의 콘텐츠를 생성하여 PC, Mobile 모두 대응이 가능
창원시 스마트앱 지원센터의 Mac 활용교육의 하나로 진행된 키노트활용방법에 대한 교육입니다.
Mac의 다양하고 풍부한 프로그램 중에서 많은 사용자층을 가지고 가장 인기를 얻고 있는 프로그램이 바로 "키노트"로 본 강연을 통해 키노트의 기초적인 활용방법과 고급 기능들을 다루어 봅니다.
iCloud는 iOS 또는 Mac장비들 간의 자료를 동기화시키는 애플사의 서비스로 iCloud는 사용자의 문서나 그림등을 저장하는 중심서버의 집합을 일컫는 용어로 사용되기도 합니다.
이 튜토리얼에서는 iCloud의 개념과 개발상의 문제점을 알아보며 간단한 소스코드를 통하여 실제 활용하는 기법을 익혀봅니다.
Mobile Application Development Platform "Morpheus"태일본부장님(Uracle) 권
대한민국 No.1 모바일 개발 플랫폼 모피어스에 대한 소개 자료입니다.모피어스는 국내 200여 사이트에서 그 효과를 입증한 모바일 플랫폼으로 Gartner가 요구하는 MADP(Mobile Application Development Platform)의 7가지 요건을 만족하는 국내의 유일한 플랫폼입니다.
(Morpheus is the No.1 MADP in Korea Market.)
창원시 스마트앱 지원센터의 Mac 활용교육의 하나로 진행된 키노트활용방법에 대한 교육입니다.
Mac의 다양하고 풍부한 프로그램 중에서 많은 사용자층을 가지고 가장 인기를 얻고 있는 프로그램이 바로 "키노트"로 본 강연을 통해 키노트의 기초적인 활용방법과 고급 기능들을 다루어 봅니다.
iCloud는 iOS 또는 Mac장비들 간의 자료를 동기화시키는 애플사의 서비스로 iCloud는 사용자의 문서나 그림등을 저장하는 중심서버의 집합을 일컫는 용어로 사용되기도 합니다.
이 튜토리얼에서는 iCloud의 개념과 개발상의 문제점을 알아보며 간단한 소스코드를 통하여 실제 활용하는 기법을 익혀봅니다.
Mobile Application Development Platform "Morpheus"태일본부장님(Uracle) 권
대한민국 No.1 모바일 개발 플랫폼 모피어스에 대한 소개 자료입니다.모피어스는 국내 200여 사이트에서 그 효과를 입증한 모바일 플랫폼으로 Gartner가 요구하는 MADP(Mobile Application Development Platform)의 7가지 요건을 만족하는 국내의 유일한 플랫폼입니다.
(Morpheus is the No.1 MADP in Korea Market.)
Omni Smart Tutor는 양방향 교육을 지원합니다.
- 수업시 강사와 학생간의 양방향 교류학습지원
- 수업과 동시에 강의를 작고 가벼운 데이터 타입 동영상으로 강의 저작 지원
- 언제 어디서든지 스마트 기기를 활용한 강의 저작 및 질문에 대한 첨삭 강의 제작 지원
[전국 PR연합동아리 PR's 친구들에게 참고용으로 공유합니다.]
대학교 4학년 당시 후배 두분과 함께 공모전에 출품했던 PR 제안서 입니다. PR회사에서 작업한 제안서는 규정상 공유가 어려워 해당내용을 공유합니다.
지금 보니 부끄럽네요. 짧은 시간내 작업하여 컨셉과 실행안 등 많은 부분이 아쉬운 제안서지만 후배님들이 PR제안서의 한 예를 참고할 수 있을 듯하여 공유합니다. 모든 제안서는 브랜드 그리고 상황에 따라 다르게 쓰여져야 합니다. 해당 제안서는 구성내용 정도만 참고하면 좋을 듯해요. 그럼 굿럭!
본 제안서는 발표(PT)용이 아닌 제출용 입니다.
제안서 작성시 질문은 www.facebook.com/jerryeffect 메시지로!! :)
This document discusses various options for developing mobile applications including native apps, web apps, and hybrid apps. It focuses on hybrid frameworks like PhoneGap, Titanium, and Appspresso which allow developing apps using web technologies that are then wrapped into native containers. These hybrid frameworks provide access to device features while developing using HTML, CSS, and JavaScript instead of native languages. Demo code examples are provided for building hybrid mobile apps with jQuery Mobile and Sencha Touch using the Appspresso framework.
Omni Smart Tutor는 양방향 교육을 지원합니다.
- 수업시 강사와 학생간의 양방향 교류학습지원
- 수업과 동시에 강의를 작고 가벼운 데이터 타입 동영상으로 강의 저작 지원
- 언제 어디서든지 스마트 기기를 활용한 강의 저작 및 질문에 대한 첨삭 강의 제작 지원
[전국 PR연합동아리 PR's 친구들에게 참고용으로 공유합니다.]
대학교 4학년 당시 후배 두분과 함께 공모전에 출품했던 PR 제안서 입니다. PR회사에서 작업한 제안서는 규정상 공유가 어려워 해당내용을 공유합니다.
지금 보니 부끄럽네요. 짧은 시간내 작업하여 컨셉과 실행안 등 많은 부분이 아쉬운 제안서지만 후배님들이 PR제안서의 한 예를 참고할 수 있을 듯하여 공유합니다. 모든 제안서는 브랜드 그리고 상황에 따라 다르게 쓰여져야 합니다. 해당 제안서는 구성내용 정도만 참고하면 좋을 듯해요. 그럼 굿럭!
본 제안서는 발표(PT)용이 아닌 제출용 입니다.
제안서 작성시 질문은 www.facebook.com/jerryeffect 메시지로!! :)
This document discusses various options for developing mobile applications including native apps, web apps, and hybrid apps. It focuses on hybrid frameworks like PhoneGap, Titanium, and Appspresso which allow developing apps using web technologies that are then wrapped into native containers. These hybrid frameworks provide access to device features while developing using HTML, CSS, and JavaScript instead of native languages. Demo code examples are provided for building hybrid mobile apps with jQuery Mobile and Sencha Touch using the Appspresso framework.
HyWAI is an HTML5 based Hybrid Web Application platform that allows you to author native applications with web technologies and get access to APIs and app stores.
HyWAI leverages web technologies developers already know best... HTML and JavaScript.
Samville은 교사를 위한 수업지원 서비스 입니다.
교사가 수업을 Flipped Classroom으로 구성하기 위해 필요한
대부분의 기능을제공합니다.
- 학생과 교사가 수업의 주인공이 됩니다.
- 교사가 학생 개개인에게 집중할 수 있도록 도와줍니다.
- 소통하고 생동감 넘치는 교실이 되도록 도와줍니다.
opeLMS는 이러닝 서비스, 온라인 스타트업을 위한 학습관리 시스템으로써, 필요한 환경과 도구를 제공함으로써 고객의 비즈니스 성장과 발전을 지원합니다.
기존의 LMS가 갖는 학습관리 기능은 기본! 쉽고 빠른 설치, 타 LMS대비 경쟁력 있는 비용, 반응형 웹 기술의 적용, 뛰어난 확장성 등의 특징을 갖고 있습니다.
당신의 스마트러닝 환경 구축을 위한
모바일(스마트폰) 어플리케이션 헤일로(HALO)
http://halo.openplay.kr/
기존의 LMS에서 제공하는 통합 로그인, 진도/출석 연동,
학사관리, 공지사항/수강 안내, 성적확인, 토론방, 학습Q&A
등의 LMS 주요기능을 제공합니다.
특장점
1 - 기존 LMS 리뉴얼이 필요 없다
2 - OSMD 가능한 HTML5 콘텐츠 전용 뷰어를 제공 한다.
* PC 와 Mobile 동일 콘텐츠로 서비스 가능
3 - 모바일 사용자 사용 형태 분석 서비스 제공
* 보다 효율적인 마케팅 전략 전개에 도움
2. I. 웹캣(WebCAT)으로 PC, Tablet, Smart Phone 을 한번에
웹캣(WebCAT)으로 저작한 HTML5 콘텐츠
PC
웹 브라우저를 제공 하는 대부분의 디바이스 에서 콘텐츠 구동 가능!!
기기 별 해상도를 고려한 웹캣 고유의 Contents Auto Resizing 기술을 통해
(IE7, 크롬, 사파리, FireFox)
One Source Multi Device HTML5 Contents 제공
태블릿
(아이패드, 갤럭시노트10.1, 갤럭시노트8)
스마트폰
(안드로이드, IOS)
* IE하위 버전(7이상) 지원 가능 (일부 기능 제한적)
http://webcat.openplay.kr 2
3. II. 웹캣(WebCAT)으로 저작된 콘텐츠의 주요 특
징
기존 이러닝 콘텐츠의 동일한 사용자 경험, 학습몰입도, 심미성 등을 제공
플래시의 다양한 유형의 학습 콘텐츠를 애니메이션 효과와 상호작용 등 이 포함된 HTML5로 구현
[음성 타임라인에 따른 애니메이션 효과 화면] [인터렉션을 기능으로 학습몰입도를 높인 학습 화면] [동영상(애니메이션) 요소를 삽입한 학습 화면]
[의견 입력하기 인터렉티브를 적용한 학습 화면] [퀴즈 지원 타입 – OX형, 다답형(단답형), 드래그형(삽입, 배치), 4지 선다형 등]
http://webcat.openplay.kr 3
4. http://webcat.openplay.kr
다양한 서비스로의 확
장
plug-in 형태의 다양한
저작 모듈 확장
오직 하나의 소스만 개
발
One Source Multi Device
쉽고 빠른 저작 기능
No Coding
Drag & Drop
Template base
Instruction design
효율적인 개발 환경
Web Based
Cooperation
Resource Share
4
III. 웹캣(WebCAT)의 특장점(1/4)
웹캣(WebCAT)의 특장점
HTML5 콘텐츠를 쉽고 빠르게 저작할 수 있는 최적의 환경 제공
교육용 콘텐츠 비즈니스를 위한 모든 조건을 갖춘 솔루션은 WebCAT뿐 입니다.
5. III. 웹캣(WebCAT)의 특장점(2/4)
효율적인 개발 환경
협업 가능한 Web-based HTML5 Contents Authoring Tool
웹기반 저작 환경과 리소스 관리 기능을 제공하여, 보다 효율적인 콘텐츠 개발을 위한 최적의 환경 제공.
• 웹기반으로 언제 어디서나 접속할 수 있습니다.
• 콘텐츠 리소스의 계정별 스토리지 서비스를 제공합니다.
• 자원, 사용자, 산출물 등을 효율적으로 관리할 수 있는 기능을 제공합니다.
http://webcat.openplay.kr 5
6. III. 웹캣(WebCAT)의 특장점(3/4)
쉽고 빠른 저작 기능
No Coding Drag&Drop, Template base & 교수 설계 프로세스 적용
드래그앤드롭의 WYSIWYG 방식, 콘텐츠 공통 요소의 Template 관리, 교수 설계 프로세스 적용을 통한
보다 쉽고 빠른 콘텐츠 저작 및 유지보수의 용이함.
• 콘텐츠 공통 요소인 템플릿을 활용하여 저작의 편의성을 높였습니다.
• 직관적인 UX와 일관된 UI를 적용하였습니다.
• 콘텐츠에서 자주 사용되는 효과와 기능 요소를 모듈화 하여 보다 편리합니다.
http://webcat.openplay.kr 6
7. III. 웹캣(WebCAT)의 특장점(4/4)
오직 하나의 소스만 개발
One Source Multi Device 지원
HTML5 기반의 한 개의 콘텐츠를 개발하는 것 만으로, multi device 와 cross browsing 지원 가능
• PC에서 mobile까지 서비스를 고려한다면, WebCAT으로 HTML5기반의 하나의 콘텐츠만을 개발하면 됩니다.
• 다양한 버전의 브라우저에서 one-source 콘텐츠로 대응할 수 있습니다.
* 일부 브라우저의 경우 브라우저의 특성상 일부 기능에 제한이 있을 수 있습니다.
http://webcat.openplay.kr 7
8. IV. 웹캣(WebCAT)의 도입에 따른 기대효과
다양한 서비스 확장
콘텐츠 개발 원가 절감! 유지보수 및 관리의 용이성!
HTML5 콘텐츠 제작의 모바일 콘텐츠에 대한 시장의 요구사항 등 고객사의 Needs를
최대한 수용할 수 있는 솔루션.
비용절감
유지보수/관리
용이성
모바일 트렌드
대응
1. 비용절감
HTML5 전문 프로그래머가 아닌 교수설계자나 디자이너도 손쉽게
콘텐츠를 저작 할 수 있는 환경의 도입.
PC, 모바일 구분 없이 하나의 콘텐츠 개발로, 개발 기간 단축.
2. 유지보수/관리의 용이성
웹캣을 통해 저작된 콘텐츠는 PC, 모바일 구분 없이 단 한번의 수정
혹은 리뉴얼로 작업 완료 가능.
3. 모바일 트렌드 대응
소비자(학습자)들의 모바일 콘텐츠에 대한 Needs가 증가하고
있으며, 이에 대응한 서비스를 제공하기 위해서는 모바일 환경에
부적합한 기존 Flash 콘텐츠가 아닌 HTML5 기반의 콘텐츠가 주목
받고 있음.
WebCAT은 모바일 콘텐츠 Needs에 대응하기 위한 최적의 도구.
http://webcat.openplay.kr 8
9. V. 웹캣(WebCAT)의 기능 소개(1/6)
웹캣의 주요 기능
HTML5 콘텐츠 개발을 위한 웹캣의 4가지 주요 기능
2. 저작하기
1. 생성하기
4. 관리하기 3. 내보내기
1. 생성하기
콘텐츠 저작에 필요한 기본 구성 요소(콘텐츠/템플릿 생성)
및 실제 콘텐츠 생성 기능(차시/과정)을 제공합니다.
2. 저작하기
콘텐츠 및 템플릿에 대한 저작 기능을 제공합니다.
각각의 레이아웃과 화면 페이지에 대한 상세 편집이
가능합니다.
3. 내보내기
만들어진 콘텐츠를 개별 차시 단위로 혹은 과정 별로
그룹핑하여 export 할 수 있습니다. export시 기기 별
맞춤형 스킨 선택과 손쉽게 진도 연동을 하실 수 있습니다.
4. 관리하기
사용자가 만든 콘텐츠 및 템플릿에 대한 관리 기능과 저작
시 사용한 리소스에 대한 관리 기능을 제공합니다.
http://webcat.openplay.kr 9
10. V. 웹캣(WebCAT)의 기능 소개(2/6)
생성하기 : 콘텐츠 개발 프로세스
웹캣(WebCAT)을 이용한 HTML5 E-learning 콘텐츠 생성 프로세스
템플릿 지정
•‘템플릿 선택’ 에서
미리 만든 템플릿
선택/ 적용
학습 내용 구성
(콘텐츠 페이지
편집)
•설정한 템플릿이
적용된
편집화면 제공
•선택한 학습 메뉴 별로
각 페이지 단위로
내용 구성
새 콘텐츠 생성
•‘내 컨텐츠 관리’
메뉴에서
생성 가능
•‘차시 복사’ 기능으로
쉽고 편리한 콘텐츠 생성
콘텐츠 속성
설정
•기본 정보 설정 : 과정명
입력
•사용자 스크립트 편집
: LMS연동을 위한 값 편집
학습 구조 편집
•메뉴 갯수 설정
•메뉴명 입력
•메뉴 구성요소
설정
차시 생성 완료
•차시 기본구조
완성
콘테이너 설정
및 내보내기
•저작한 콘텐츠에 대한
내보내기 기능 제공
•PC & 모바일
컨테이너 선택
콘텐츠 완성
•콘텐츠 완성
•언제나 쉽게 재편집 가능
리소스 등록
&
템플릿 생성
http://webcat.openplay.kr 10
11. V. 웹캣(WebCAT)의 기능 소개(3/6)
생성하기 : 템플릿 개발 프로세스
콘텐츠 배경 및 각 페이지별 디자인 일괄 편집 가능한 템플릿 기능 제공
내 템플릿 관리 새 템플릿 생성
템플릿 속성
설정
템플릿 속성
저장
•‘새 템플릿 만들기’ •설정 완료
템플릿 편집
(배경)
•템플릿명, 개발유형,
키워드
템플릿 편집
(기본 페이지)
템플릿
저장하기
•‘내 템플릿 관리’
메뉴에서
생성, 수정, 삭제 가능
•각 구성요소(페이지)별
미리보기 및 수정 기능
제공
템플릿 완성
•각 페이지별 사용될 공통
혹은 비공통 배경
편집(복수
구성 가능)
•각 학습 유형별 배경 선택
및 구성(타이틀, 구조
등)편집
•학습 유형 추가 가능
•템플릿 완성 •편집 완료한 템플릿 저장
•언제나 쉽게 재편집 가능
리소스 등록
http://webcat.openplay.kr 11
12. V. 웹캣(WebCAT)의 기능 소개(4/6)
저작하기 : 콘텐츠 저작 화면
No Coding! Drag & Drop!!
웹캣의 저작 기능은 콘텐츠 저작 및 템플릿 저작 기능이 있으며, 저작시 기능 및 화면 구성은 동일함.
1) 편집 요소 리스트 제공
- 학습구조, 구성요소리스트 속성 설정 제공
- 현재 편집 중인 내용, 요소, 속성값에 대해
한눈에 파악 가능
• 속성값 : 텍스트, 이미지에 대한 세부 설정
선종류, 굵기, 크기, 투명도, 컬러, 위치, 회전 등
2) 미리보기 기능 제공
- 저작 중인 콘텐츠/템플릿에 대한 미리보기
기능 제공
- 음성, 동영상 미리보기 기능 제공
3) 객체 삽입 영역
- 이미지, 오디오, 비디오, 텍스트, 문항, 게시판,
인터렉티브, 외부리소스, 자막
- 모듈 단위로 제공하여 드래그&드롭 으로 손쉽게
기능 적용 가능
1
2
3
http://webcat.openplay.kr 12
13. V. 웹캣(WebCAT)의 기능 소개(5/6)
내보내기 : 콘텐츠 Export
Device별 스킨 선택, LMS 별 스크립트 추가
모바일과 PC, 각 구동 환경에 맞게 디자인된 스킨(컨테이너)을 선택,
고객사 LMS 연동을 위하여 편집된 사용자 스크립츠 추가 하여 콘텐츠 Export
1) 최적화된 스킨 제공
- 모바일, PC/태블릿 겸용 스킨 리스트 제공
- 블로그 스킨과 동일하게 언제든지 변경
가능
2) 콘텐츠 진도 연동 값 설정 부분
- LMS와 진도 연동을 위한 값 설정
(사용자 스크립트 편집/추가)
http://webcat.openplay.kr 13
14. V. 웹캣(WebCAT)의 기능 소개(6/6)
관리하기 : 리소스 및 콘텐츠 관리
리소스(이미지, 오디오, 비디오 등)에 대한 관리 기능 제공
웹 서버에 올리는 스토리지 방식을 채택하여 언제 어디서나 손쉽게 리소스 등록 및 관리 가능.
사용자 계정 별 혹은 그룹별 콘텐츠/템플릿 저작에 필요한 리소스 관리.
1) 트리 구조의 폴더 생성/삭제
- 윈도우 탐색기와 동일한 트리 구조 제공
- 차시별, 과정별, 계정별로 손쉽게 파일 위치
확인 및 업로드, 수정 등의 관리 가능
- 리소스 관리가 용이하도록 리소스 관리를
위한 폴더 생성 및 삭제 기능 제공
2) 이미지, 오디오 업로드/이동
- 콘텐츠 저작에 필요한 이미지, 오디오
업로드/이동 기능 제공(등록, 수정, 삭제 가능)
3) 비디오 링크 관리
- 콘텐츠 저작에 필요한 비디오 링크 관리
- URL 입력을 통한 손쉬운 등록 기능 제공
4) 그룹(고객사)별 리소스 관리 기능
- 고객사별 웹캣 이용자들(계정)이 사용할
리소스에 대한 통합 관리 기능 제공
http://webcat.openplay.kr 14
15. VII. 포트폴리오(HTML5 과정)
서울대학교 평생교육원
- 1개 과정 16차시
서울대학교 평생교육원
- 1개 과정 16차시
영산대학교 원격평생교육원
- 3개 과정 117차시
한국인터넷진흥원 KOREA HTML5
- 1개 과정 5차시
경기도여성능력개발센터
- 27개 과정 197차시
한국씨티은행
- 725차시
http://webcat.openplay.kr 15
16. 테크빌닷컴㈜
www.tekville.com
HTML5 는 차세대 웹 기술 표준으로서 이러닝 시장 뿐만 아니라 전체 IT시장에서 가장 큰 주목을 받고 있습
니다.
국내 HTML5 저작도구의 선두 주자이자, R&D 및 마케팅 각 분야 전문가로 구성된 테크빌닷컴㈜ 의
웹캣(WebCAT)이 여러분에게 새로운 가치를 창출해 드리겠습니다.
HTML5 기반의 고품질 이러닝 콘텐츠를 보다 쉽고 빠르게 저작 할 수 있는 솔루션 웹캣(WebCAT)을 선택하
십시오!
서울시 강남구 역삼동 654-3 프라자빌딩 5, 6, 8F
스마트교육연구소 – 전략사업팀
Tel.02-3442-7783(213) / Fax.02-3453-7793
Email : webcat@tekville.com
http://webcat.openplay.kr 16