yoda - html5 content authoring tool
TRANSCRIPT
Content출시 배경
Yoda 란
Yoda 파헤치기
향후 업그레이드 및 교육 계획
가격 정책
Content
출시 배경
2002 ~ 2008
Learning Hub : 92개국 서비스
2011 ~ 2012
N-screen Age
Real Solution for N-screen Age?
Image courtesy of WIX
HTML5 is not trend, it is essential
http://www.zdnet.com/netflix-goes-html5-for-laptop-streaming-7000034730/
The Latest News
Collaboration with Yoda
Content
Yoda 란
What is Yoda?
“Smart Content is created by
Smart People with a Smart Tool!”Smart Toolhttp://www.yodatool.com
Cross-OSCross-Browse
Interactive
N-screenEasy Work
Pure HTML5
Benefits of Yoda
편리성
누구나 쉽게사용할 수 있는
Office UI
환경성
저용량 파일출력으로 고속력로딩 및 스토리지
부하해소
확장성
뷰어가 필요없는웹브라우저플레이 방식
개방성
콘텐츠 소스오픈으로
사용자 특화콘탠츠 개발
경제성
한번의퍼블리싱으로
N스크린 서비스
What is different from other tools?
not a Perfect.
not a Fancy.
not a Sophisticated.
a Flexible.
Content
Yoda 파헤치기
How to install
다운로드(download)
프로그램 설치 (Install)
계정 발급 (Account)
실행 (Use)
Layout
기본 메뉴
Yoda의 메뉴 영역으로 멀티미디어 객체 삽입, 편집, 파일 저장 및 퍼블리시 등 전반적인 기능 제공
시트 네비게이션
• 콘텐츠 전체
시트(페이지)
정보 디스플레이
및 설정
• 시트, 도형,
이벤트, 속성 등
네 개의 탭으로
구성
타임라인 바
객체 및 레이어의 설정과 이벤트 편집 기능 제공
저작/편집 영역
시트 네비게이션
영역에서 선택한
시트 상의 객체,
이벤트 등을
편집하거나 저작
Main Menu
파일
• 콘텐츠 실행, 저장, 및 퍼블리싱
• 사용자 계정 관리
홈
• 콘텐츠 저작에 필요한 주요 기능 : 클립보드, 그리기 도구, 멀티미디어 삽입, 객체 스타일 설정, 정렬, 확대/축소, 미리보기
보기
• 콘텐츠 저작 지원을 위한 화면 보기
설정
Sheet Navigation
시트
• 기본 시트, 마스터 시트 설정
• 시트 추가/삭제
• 마스터/배경 설정
도형
• Yoda에서 제공하는
다양한 도형 (.emf,
png) 이미지 삽입
이벤트
• 객체에 다양한
인터랙티브 이벤트
및 애니메이션 효과
적용
속성
• 객체의 위치, 크기,
회전/각도, 컬러 등
속성 설정
Timeline Bar
• 레이어 추가/삭제 : 새로운 레이어를 추가하거나 선택한 레이어 삭제
• 객체 삭제, 숨기기 : 선택한 객체를 삭제 또는 숨기기
• Show/Hide / Pair Event : 선택한 시간에서 객체가 보여지거나 사라지는 효과 적용.
• 객체 효과 주기 : 선택한 객체에 대한 다양한 Show/Hide 이벤트 효과 적용
Main Functions – Object
그리기도구
스타일 정렬
도형 라이브러리
• 도형 그리기, 텍스트, 멀티미디어 객체 삽입 및 다양한 꾸미기 기능 제공합니다.
멀티미디어객체 삽입
클립보드
Main Functions – Master
• 자주 사용하는 배경, 액션 이벤트를 마스터 시트에 적용하여 반복 작업을 최소화합니다.
Main Functions – Action Event
액션
• On Click
• Mouse Over / Out
• Drag Start / End / Move
효과
액션 타입 속성 속도 소리
Show
• 효과 없음• 날아오기• 올라오기• 밝기 변하며 확대• 밝기 변화• 늘이기• 확대
• 왼쪽에서• 오른쪽에서• 위에서• 아래에서• 상/하/좌/우 대각
선 방향에서
• 매우 느리게• 느리게• 중간• 빠르게• 매우 빠르게
• 소리 없음• 추가Hide
• 효과 없음• 날아가기• 내려가기• 밝기 변하며 축소• 밝기 변화• 줄이기• 축소
• 위로• 아래로• 옆으로• 맡으로• 왼쪽으로• 오른쪽으로
Accent• 크기변화• 커졌다 작아지게• 회전
• 25%, 50%, 150%, • 200%, 250%,
300%, 350%, 400%
Move• 효과 없음• 밝기 변화
• 나타나기• 사라지기
• 클릭/터치, 드래그, 마우스 이동 등 사용자의 액션에 따른 다양한 인터랙티브 효과를적용합니다.
Main Functions – Markup
• Video/Audio 파일의 특정 시간에 마크업을 적정하여 다양한 액션을 추가할 수 있습니다.
Main Functions – Code Generator
• 사용자가 직접 콘텐츠 소스코드를 수정 할 수 있어 저작도구의 한계를 극복한 양질의 콘텐츠를
저작할 수 있습니다.
Case of Authoring
• 다양한 멀티미디어 삽입 : 이미지, 동영상, 오디오, 텍스트
• 애니메이션, 이벤트 삽입 : 날아오기, Fade in/out, 마우스 클릭 시 다음 페이지로 넘어가기 등
• 퀴즈 : O/X, 객관식, 문제 Tip, 정답 해설
Alpha Test (2013)
• 다양한 멀티미디어 삽입, 멀티미디어 특화 이벤트 (오브젝트 마크업, 시트 마크업 등)
• 애니메이션, 이벤트 삽입 : 강조, 확대/축소, 마우스 클릭 시 팝업, 페이지 이동 등
• 퀴즈 : Drag&Drop, 해설 보기
Beta Test (2014)
Case of Recomposition
서울산업통상진흥원 (2012)
• 차시별 SCO 개수 : 11개
• 평가하기 : 사지선다형, 빈칸 맞추기
• 동영상 Embedded, 페이지 이동, 애니메이션
한국표준협회 (2014)
• 차시별 SCO 개수 : 14개
• 평가하기 : O/X, 사지선다형, 빈칸 맞추기
• 타임라인별 객체 이벤트, 페이지 이벤트
• 페이지 이동 마크업
한국생산성본부 (2012)
• 차시별 SCO 개수 : 20개
• 평가하기 : 사지선다형, 빈칸 채우기
• 동영상 Embeded, 페이지 이동
• 애니메이션 : 마우스 클릭 시 팝업 등
HTML5 Elements Support
• Internet Explorer 9 and higher
• Firefox 7 and higher
• Chrome 14 and higher
• Safari 5 and higher
• Opera 11 and higher
• Mobile Safari 3.2 and higher
• Opera Mobile 5 and higher
• Android 2.1 and higher
Environment for HTML5 Content
http://valiancesolutions.com/blog/
시연
Content
업그레이드 및교육 계획
Functions Upgrade Plan
템플릿 사용자 라이브러리
Within this year…
외부 동영상 임베드(Youtube, Vimeo)
메뉴 레이아웃
단문 처리 텍스트 삽입이미지 자동슬라이드
Functions Upgrade Plan
And will be soon…
Plug-In
Training Plan
교육 커리큘럼 및 프로그램 공지
라이선스 구매자 대상의 Content source code generating 교육 (1회 : 2014년 11월 19일)
5 copy 이상 구매 시 방문 교육
Content
가격 정책
Price Policy
• 1 년 : \1,200,000 /user
• Bulk Discount
- 5 users 이상 : 15% off
- 10 users 이상 : 30% off
HTML5
• W3C (World Wide Web)의 HTML Working Group이 정의하고 있는 HTML 규격
• 플러그인이 필요 없는 웹 : ActiveX, Flash 등의 별도의 플러그인이 필요 없고,
스마트폰 및 태블릿 PC에 친화적인 기능들로 구성되어 단말기, OS, 브라우저의
종류에 구애받지 않는 범용 표준 개발 언어
• 광의의 HTML5 : 문서의 외관을 표현하는 CSS, 웹 애플리케이션을 위한
JavaScript API를 포함한 W3C 표준을 총칭